fj-dc-ui/.svn/pristine/5a/5af39123cb08b594474b0bcee593acec2deaed9b.svn-base

<template>
    <el-dialog
        class="custom_dialog"
        title="问题整改复查情况"
        width="60%"
        append-to-body
        :close-on-click-modal="false"
        :visible.sync="supervisionDetailsVisible"
        @close="cancelHandler">

        <div class="wtzgfc_view_pblm" style="padding: 3px;" :style="{'height':testHeight+'px',}">
            <div :style="{'height':testHeight+'px',}"
                 style="width:46%;float:left;border:1px solid #d5d5ff;margin-right:5px;">
                <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">基本信息</p>
                <el-form label-position="right" label-width="140px" :style="{'max-height':testHeight-30+'px',}"
                         style="overflow-y: auto;height:100%;margin:5px;" :model="problemDetail" ref="problemDetail"
                         :rules="rules">
                    <p class="p_title">问题整改情况</p>
                    <el-form-item label="问题类别:">
                        <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">
                            {{problemDetail.pblmType}}</p>
                    </el-form-item>
                    <el-form-item label="检查项目:">
                        <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">
                            {{problemDetail.pblmOption}}</p>
                    </el-form-item>
                    <el-form-item label="问题描述:">
                        <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">
                            {{problemDetail.pblmDesc}}</p>
                    </el-form-item>
                    <el-form-item label="问题等级:">
                        <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">
                            {{problemDetail.pblmLevl == 0 ?
                            "一般" : problemDetail.pblmLevl == 1 ? "较重" : problemDetail.pblmLevl == 2 ? "严重" :
                            problemDetail.pblmLevl ==
                            3 ? "特别严重" : ""}}</p>
                    </el-form-item>
                    <el-form-item label="整改状态:">
                        <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">
                            {{problemDetail.rectConc == 0 ?
                            "未填写" : problemDetail.rectConc == 1 ? "未整改" : problemDetail.rectConc == 2 ? "正在整改" :
                            problemDetail.rectConc == 3 ? "已整改" : ""}}</p>
                    </el-form-item>
                    <el-form-item label="整改措施:">
                        <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;">
                            {{problemDetail.rectMsrs}}</p>
                    </el-form-item>
                    <el-form-item label="审核状态:">
                        <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">
                            {{problemDetail.auditConc == 1 ?
                            "审核已整改" : problemDetail.auditConc == 2 ? "审核未整改" : problemDetail.auditConc == 3 ? "未审核" :
                            problemDetail.auditConc == 4 ? "审核正在整改" : ""}}</p>
                    </el-form-item>
                    <!--<el-form-item label="上报人:">-->
                    <!--<p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;">-->
                    <!--{{problemDetail.persName}}</p>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item label="上报时间:">-->
                    <!--<p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;">-->
                    <!--{{problemDetail.persName}}</p>-->
                    <!--</el-form-item>-->
                    <p class="p_title">复核情况</p>
                    <el-form-item label="整改状态:" style="text-align:left">
                        <el-radio-group v-model="problemDetail.revwRectConc">
                            <el-radio label="1">未整改</el-radio>
                            <el-radio label="2">正在整改</el-radio>
                            <el-radio label="3">整改完成</el-radio>
                            <br/>
                            <br/>
                            <el-radio label="4">整改不到位</el-radio>
                            <el-radio label="5">上报整改情况与实际不符</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item
                        :label="problemDetail.revwRectConc == 3 ? '实际整改完成时间' : problemDetail.revwRectConc == 2 ? '计划整改完成时间': ''"
                        style="text-align:left"
                        v-if="(Number(problemDetail.revwRectConc) === 2 || Number(problemDetail.revwRectConc) === 3) && problemDetail.revwRectConc">
                        <el-date-picker v-model="problemDetail.realPlanDt" type="date" value-format="yyyy-MM-dd"
                                        placeholder="选择日期" class="w30"
                                        v-if="(Number(problemDetail.revwRectConc) === 2 || Number(problemDetail.revwRectConc) === 3) && problemDetail.revwRectConc"></el-date-picker>
                    </el-form-item>
                    <div>
                        <el-form-item label="备注" v-if="problemDetail.revwRectConc != 3">
                            <el-input
                                type="textarea"
                                :rows="4"
                                placeholder="请输入"
                                v-model="problemDetail.revwRectPblm"
                                class="w30">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="备注" prop="revwRectPblm" v-else key="revwRectPblm">
                            <el-input
                                type="textarea"
                                :rows="4"
                                placeholder="请输入"
                                v-model="problemDetail.revwRectPblm"
                                class="w30">
                            </el-input>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <div
                style="width: 49%;float: left;border: 1px solid rgb(213, 213, 255);margin-right: 5px;overflow-y: auto;max-height: 58vh;">
                <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">多媒体信息</p>
                <el-tabs style="margin:0px 5px">
                    <el-tab-pane :label="picturetabName">
                        <el-row style="text-align:right;" v-if="!ifView">
                            <el-button
                                :v-if="!addPicPanel?addPicPanel:addPicPanel"
                                size="mini"
                                type="text"
                                :icon="!addPicPanel?'el-icon-circle-plus-outline':'el-icon-circle-close-outline'"
                                @click="addPic"
                            >{{!addPicPanel?"添加":"取消"}}
                            </el-button>
                        </el-row>
                        <!-- 该上传组件之前用v-if="addPicPanel 控制显示隐藏,发现在点击编辑问题时,如果不上传图片,之间点击确认时会报错 add by lch -->
                        <el-row v-show="addPicPanel">  <!-- v-if="addPicPanel" -->
                            <upload
                                ref="uploadFile"
                                :url="`/pdcApi/file/insert?bizType=MEND_EXTRA&bizId=`"
                                @uploadOver="removeNewSupervision"
                            ></upload>
                        </el-row>
                        <el-row>
                            <div style="overflow-y:auto;overflow-x:hidden;max-height:30vh;padding:10px;">
                                <div class="upload-container" id="imgView">
                                    <div
                                        v-for="(item, index) in pictureArray"
                                        :key="index"
                                        class="image-preview image-app-preview"
                                    >
                                        <div class="image-preview-wrapper">
                                            <img :src="`${hostUrl}/${item.filePath}`">
                                            <div class="image-preview-action">
                                                <i @click="removeFile(item.id)" class="el-icon-delete"
                                                   v-if="!ifView"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-row>
                    </el-tab-pane>

                    <el-tab-pane :label="audiotabName">
                        <el-table border :data="audioArray" style="width: 100%;margin: 0 auto;">
                            <el-table-column header-align="center" align="center" label="音频">
                                <template slot-scope="scope">
                                    <elaudio
                                        style="margin-left:15%;width:100px;height:30px;"
                                        :theUrl="`${hostUrl}/${scope.row.filePath}`"
                                    ></elaudio>
                                </template>
                            </el-table-column>
                            <el-table-column header-align="center" align="center" label="操作">
                                <template slot-scope="scope">
                                    <el-button
                                        size="mini"
                                        @click="removeFile(scope.row.id,scope.$index)"
                                        type="danger"
                                        v-if="!ifView"
                                    >删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane :label="videotabName">
                        <el-table border :data="videoArray" style="width: 100%;margin: 0 auto;">
                            <el-table-column header-align="center" align="center" label="视频">
                                <template slot-scope="scope">
                                    <video-player
                                        class="vjs-custom-skin"
                                        ref="videoPlayer"
                                        :options="scope.row"
                                        :playsinline="true"
                                    ></video-player>
                                </template>
                            </el-table-column>
                            <el-table-column header-align="center" align="center" label="操作">
                                <template slot-scope="scope">
                                    <el-button
                                        size="mini"
                                        @click="removeFile(scope.row.item.id,scope.$index)"
                                        type="danger"
                                        v-if="!ifView"
                                    >删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane :label="filetabName">
                        <el-table border :data="fileArray" style="width: 100%;margin: 0 auto;">
                            <el-table-column header-align="center" align="center" label="文档">
                                <template slot-scope="scope">
                                    <p>
                                        <a :href="`${hostUrl}/${scope.row.filePath}`" target="_blank"
                                           rel="noopener noreferrer">
                                            {{scope.row.fileName}}
                                        </a>
                                    </p>
                                </template>
                            </el-table-column>
                            <el-table-column header-align="center" align="center" label="操作">
                                <template slot-scope="scope">
                                    <el-button
                                        size="mini"
                                        @click="removeFile(scope.row.id,scope.$index)"
                                        type="danger"
                                        v-if="!ifView"
                                    >删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <span slot="footer">
        <el-button type="primary" @click="problemDetailInfo('problemDetail')" :loading="buttonLoading"
                   v-if="!ifView">保存</el-button>
        <el-button @click="cancelHandler">取消</el-button>
        </span>
    </el-dialog>

</template>

<script>
    // import {getsuperviseinspect,} from "@api/duChaAPI.js";
    import {dateFormat} from "../../../utils/gw_date.js"
    import request from '@util/gw_ajax_request'
    import {deleteFileById} from "@api/duChaAPI.js";
    import {hostUrl} from "@util/global_variable.js";
    import Viewer from 'viewerjs';
    import 'viewerjs/dist/viewer.css';
    export default {
        props: ["details", 'problemId', 'objType', 'ifView'],
        components: {
            upload: resolve => {
                require(["@widget/uploadFile.vue"], resolve);
            },
            elaudio: resolve => {
                require(["../../../widgets/elAudio.vue"], resolve);
            },

        },
        data() {
            return {
                testHeight: window.innerHeight * 0.6,
                activeName: "0",
                superviseinspect: {},
                fileList: [],
                groupingList: [],
                fileListloading: false,
                groupListloading: false,
                problemDetail: {
                    pblmDesc: '',//问题描述 ,
                    pblmLevl: '',//问题等级 ,
                    pblmOption: '',//检查项目 ,
                    pblmSn: '',//问题序号 ,
                    pblmType: '',//问题类别 ,
                    proName: '',//省 ,
                    realPlanDt: '',//实际/计划整改完成时间 ,
                    rectConc: '',//整改状态(1:未整改;2:正在整改;3:已整改) ,
                    rectMsrs: '',//整改措施 ,
                    revwInfo: '',//复核情况 ,
                    revwRectConc: '',//复核整改状态(1:未整改;2:正在整改;3:整改完成;4:整改不到位;5:上报整改情况与实际不符) ,
                    revwRectPblm: '',//复核整改问题 ,
                    revwState: '',//复核填报状态(0:未填报;1:填报中;2:已填报) ,
                    rgstrId: '',//登记表ID ,
                    rsCode: '',//水库编码 ,
                    rsName: '',//水库名称 ,
                    safeComment: '',//工况总体评价 ,
                    unit: '',//管理单位 ,
                    uptm: '',//修改时间 ,
                    year: '',//年度
                    gwComFiles: []
                },
                rules: {
                    revwRectPblm: [{
                        required: true,
                        message: '请填写备注',
                        trigger: 'blur'
                    }],
                },
                pictureArray: [],
                audioArray: [],
                videoArray: [],
                fileArray: [],
                audiotabName: "",
                videotabName: "",
                picturetabName: "",
                filetabName: "",
                playerOptions: {
                    height: '120',
                    autoplay: true,
                    muted: true,
                    language: 'en',
                    playbackRates: [0.7, 1.0, 1.5, 2.0],
                    labelName: '',
                    sources: [{
                        type: "video/mp4",
                        // mp4
                        src: "http://vjs.zencdn.net/v/oceans.mp4",
                        // webm
                        // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                    },
                        {
                            type: "video/mp4",
                            // mp4
                            src: "http://vjs.zencdn.net/v/oceans.mp4",
                            // webm
                            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                        },
                        {
                            type: "video/mp4",
                            // mp4
                            src: "http://vjs.zencdn.net/v/oceans.mp4",
                            // webm
                            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                        },
                        {
                            type: "video/mp4",
                            // mp4
                            src: "http://vjs.zencdn.net/v/oceans.mp4",
                            // webm
                            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                        }],
                },
                buttonLoading: false,
                supervisionDetailsVisible: true,
                addPicPanel: false,
                gwComFiles: []
            };
        },
        computed: {
            hostUrl() {
                return hostUrl
            },

        },
        mounted: function () {
            this.problemDetail = {};
            this.pictureArray = [];
            this.audioArray = [];
            this.videoArray = [];
            this.fileArray = [];
            this.showDetails();
        },
        watch: {
            problemId: function () {
                this.problemDetail = {};
                this.pictureArray = [];
                this.audioArray = [];
                this.videoArray = [];
                this.fileArray = [];
                this.showDetails();
            }
        },
        methods: {
            init() {
                this.activeName = "0";
            },
            showDetails() {
                let obj = {id: this.problemId, bizId: this.problemId}
                var _this = this;
                request.post(`bis/insp/rsvr/pblm/mend/getWithExtras`, obj).then(res => {
                    this.problemDetail = res.data;
                    this.problemDetail.realPlanDt = res.data.realPlanDt ? dateFormat(res.data.realPlanDt, 'yyyy-MM-dd') : '';
                    this.gwComFiles = this.problemDetail.gwComFiles;
                    console.log(this.hostUrl);
                    if (res.data.gwComFiles) {
                        res.data.gwComFiles.forEach(
                            (item) => {
                                if (item.fileExt == 'mp3' || item.fileExt == 'MP3' || item.fileExt == 'm4a') {
                                    this.audioArray.push(item);
                                } else if (item.fileExt == 'jpg' || item.fileExt == 'JPEG' || item.fileExt == 'jpeg' || item.fileExt == 'JPG' || item.fileExt == 'png' || item.fileExt == 'PNG') {
                                    this.pictureArray.push(item);
                                } else if (item.fileExt == 'mp4' || item.fileExt == 'MP4') {
                                    this.videoArray.push(
                                        {
                                            height: '350',
                                            autoplay: false,
                                            muted: true,
                                            language: 'en',
                                            playbackRates: [0.7, 1.0, 1.5, 2.0],
                                            sources: [{
                                                type: "video/mp4",
                                                // mp4
                                                src: `${this.hostUrl}/${item.filePath}`
                                            }],
                                            item: item

                                        },
                                    );
                                } else {
                                    this.fileArray.push(item);
                                }
                            }
                        );
                    }
                    _this.$nextTick(function(){
                        var  ViewerDom = document.getElementById('imgView');
                        var  viewer = new Viewer(ViewerDom, {})
                    });
                    this.filetabName = this.fileArray.length ? "佐证材料(" + this.fileArray.length + ")" : "佐证材料";
                    this.picturetabName = this.pictureArray.length ? "图片资料(" + this.pictureArray.length + ")" : "图片资料";
                    this.audiotabName = this.pictureArray.length ? "音频资料(" + this.audioArray.length + ")" : "音频资料";
                    this.videotabName = this.videoArray.length ? "视频资料(" + this.videoArray.length + ")" : "视频资料";
                });
            },
            // 提交修改信息
            problemDetailInfo(problemDetail) {
                this.$refs[problemDetail].validate((valid) => {
                    if (valid) {
                        this.buttonLoading = true;
                        this.$nextTick(() => {
                            if (this.$refs.uploadFile.submitUpload(this.problemDetail.id)) {
                                this.removeNewSupervision();
                            }
                            setTimeout(() => {
                                this.problemDetail.gwComFiles = this.gwComFiles;
                                request.post(`bis/insp/rsvr/pblm/mend/2021/update`, this.problemDetail)
                                    .then(res => {
                                        if (res.success) {
                                            this.$message.success('保存成功');
                                            this.buttonLoading = false;
                                            this.$emit('cancelHandler', true);
                                        } else {
                                            this.buttonLoading = false;
                                            this.$message.warning(res.message);
                                        }
                                    })
                                    .catch(err => {
                                        this.buttonLoading = false;
                                        console.log(err);
                                    })
                            }, 1000)
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            cancelHandler() {
                this.$emit('cancelHandler');
                this.$refs.uploadFile.init();
                this.addPicPanel = false;
            },
            timestampToTime(detail) {
                if (detail) {
                    var date = new Date(detail);
                    var Y = date.getFullYear() + "-";
                    var M =
                        (date.getMonth() + 1 < 10 ?
                            "0" + (date.getMonth() + 1) :
                            date.getMonth() + 1) + "-";
                    var D =
                        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
                    var h =
                        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
                    var m =
                        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                    return Y + M + D + h + m;
                } else {
                    return "";
                }


            },
            removeNewSupervision(arg) {
                if (arg) {
                    var args = this.gwComFiles.concat(arg);
                    this.gwComFiles = args;
                    return;
                }
                // this.gwComFiles = [];
            },
            addPic() {
                this.addPicPanel = !this.addPicPanel;
            },
            // 删除图片文件
            removeFile(id, index) {
                var _self = this;
                this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "返回",
                    type: "warning"
                }).then(
                    res => {
                        if (res === "confirm") {
                            deleteFileById(id, this.persId).then(res => {
                                if (res.success) {
                                    this.problemDetail.gwComFiles.forEach(item => {
                                        if (
                                            item.fileExt == "mp3" ||
                                            item.fileExt == "MP3" ||
                                            item.fileExt == "m4a"
                                        ) {
                                            this.audiotabName.splice(index, 1);
                                        } else if (
                                            item.fileExt == "jpg" ||
                                            item.fileExt == "JPG" ||
                                            item.fileExt == "png" ||
                                            item.fileExt == "PNG" ||
                                            item.fileExt == "JPEG" ||
                                            item.fileExt == "jpeg"
                                        ) {
                                            this.pictureArray.splice(index, 1);
                                        } else if (item.fileExt == "mp4" || item.fileExt == "MP4") {
                                            this.videoArray.splice(index, 1);
                                        } else {
                                            this.fileArray.splice(index, 1);
                                        }
                                    });
                                    _self.showDetails();
                                } else {
                                    this.$message.error(res.message);
                                }
                            });
                        }
                    },
                    res => {
                        console.log("返回");
                    }
                )
            },
        },
        filters: {
            zgqk(val) {
                switch (val) {
                    case '0':
                        return '未整改';
                    case '1':
                        return '整改中';
                    case '2':
                        return '已整改';
                }
            },
            inspPblmCate(val) {
                if (!val || val == '') {
                    return ''
                }
                if (val == '0') {
                    return '一般'
                } else if (val == '1') {
                    return '较重'
                } else if (val == '2') {
                    return '严重'
                } else {
                    return val
                }
            },
        }
    };
</script>

<style lang="scss" scoped>
    .wtzgfc_view_pblm {
        .el-form-item {
            width: 100%;
            margin-bottom: 0;
        }

        p.p_title {
            text-align: left;
            font-weight: bold;
        }

        .el-radio {
            margin-bottom: 15px;
        }

        .upload-container {
            width: 100%;
            position: relative;

            .image-uploader {
                width: 35%;
                float: left;
            }

            .image-preview {
                width: 200px;
                height: 200px;
                position: relative;
                border: 1px dashed #d9d9d9;
                float: left;
                // margin-left: 50px;
                .image-preview-wrapper {
                    position: relative;
                    width: 100%;
                    height: 100%;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .image-preview-action {
                    position: absolute;
                    width: 100%;
                    height: 30px;
                    left: 0;
                    bottom: 0;
                    color: #fff;
                    opacity: 0;
                    font-size: 20px;
                    background-color: rgba(0, 0, 0, 0.5);
                    transition: opacity 0.3s;
                    cursor: pointer;
                    text-align: center;
                    line-height: 30px;

                    .el-icon-delete {
                        font-size: 25px;
                    }
                }

                &:hover {
                    .image-preview-action {
                        opacity: 1;
                    }
                }
            }

            .image-app-preview {
                margin-bottom: 10px;
                width: 40vh;
                height: 180px;
                position: relative;
                border: 1px dashed #d9d9d9;
                float: left;
                // margin-left: 50px;
                .app-fake-conver {
                    height: 44px;
                    position: absolute;
                    width: 100%; // background: rgba(0, 0, 0, .1);
                    text-align: center;
                    line-height: 64px;
                    color: #fff;
                }
            }
        }
    }

</style>