fj-dc-ui/.svn/pristine/f4/f447a042a78f05ddb5796f71f85c5ad71a74df6c.svn-base

<!--  -->
<template>
    <div :style="{'height':testHeight1+'px'}">
        <!-- 查询展示 -->
        <div class="search" style="margin-top:10px;height:49vh">
        <el-table
            border
            :height="tableHeight"
            ref="multipleTable"
            :data="searchResult"
            tooltip-effect="dark"
            style="width: 100%"
        >
            <el-table-column align="center" type="index" label="序号" min-width="60" fixed>
            <template slot-scope="scope">{{ (currentPage - 1) * pageSize + (scope.$index + 1) }}</template>
            </el-table-column>
            <el-table-column
            header-align="center"
            align="center"
            min-width="55"
            prop="inspPblmCate"
            label="程度"
            fixed
            >
            <template slot-scope="scope">
                <p style="color:#27C19F;" v-if="scope.row.inspPblmCate == 0">一般</p>
                <p style="color:#E6A23C;" v-if="scope.row.inspPblmCate == 1">较重</p>
                <p style="color:#F56C6C;" v-if="scope.row.inspPblmCate == 2">严重</p>
                <p style="color:#F56C6C;" v-if="scope.row.inspPblmCate == 3">特别严重</p>
            </template>
            </el-table-column>
            <el-table-column
            header-align="center"
            align="center"
            min-width="60"
            prop="province"
            label="省"  v-if="isXj"
            show-overflow-tooltip
            ></el-table-column>
            <el-table-column
            header-align="center"
            align="center"
            min-width="60"
            prop="city"
            :label="ownAdName"
            show-overflow-tooltip
            ></el-table-column>
            <el-table-column
            header-align="center"
            align="center"
            min-width="60"
            prop="country"
            label="县"
            v-if="isXj"
            show-overflow-tooltip
            ></el-table-column>
            <el-table-column
            header-align="center"
            align="center"
            min-width="120"
            prop="nm"
            label="督查水闸名称"
            show-overflow-tooltip
            ></el-table-column>
            <el-table-column
            header-align="center"
            align="center"
            min-width="140"
            prop="inspPblmsName"
            label="问题类别"
            show-overflow-tooltip
            ></el-table-column>
            <el-table-column
            header-align="center"
            align="center"
            min-width="230"
            prop="checkPoint"
            label="检查项目"
            show-overflow-tooltip
            ></el-table-column>

            <!-- <el-table-column
                    header-align="center"
                    align="center"
                    min-width="60"
                    prop="ifCasePblm"
                    label="典型"
                >
                    <template slot-scope="scope">
                    <p v-if="scope.row.ifCasePblm == 1">是</p>
                    <p v-if="scope.row.ifCasePblm == 0">否</p>
                    </template>
            </el-table-column>-->

            <el-table-column
            header-align="center"
            align="center"
            min-width="80"
            prop="persName"
            label="上报人"
            ></el-table-column>
            <el-table-column
            header-align="center"
            align="center"
            min-width="80"
            show-overflow-tooltip
            prop="orgNm"
            label="所在组"
            ></el-table-column>

            <el-table-column
            prop="collTime"
            label="上报时间"
            :formatter="timestampToTime"
            sortable
            align="center"
            min-width="120"
            show-overflow-tooltip
            ></el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="paginationWarpper">
            <el-pagination
            class="paginationCenter"
            background
            @size-change="handleSizeChange"
            @current-change="search"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            ></el-pagination>
        </div>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
    findPageInfoShuiKu,
    getShuiKuWenTi,
    getXSKProblemNewExport,
    findPageInfo,
    getSzwtTable,
    removeSupervise,
    showDetailsXq,
    submitUpload,
    creatSupervise,
    getSupervisdByID,
    deleteFileById,
    updatelist,
    getEngId,
} from "@api/duChaAPI.js";
import request from "@util/gw_ajax_request.js";
import { hostUrl } from "@util/global_variable.js";
import elaudio from "@widget/elAudioShort.vue";
import inuptWithDuChaTreeNode from "@widget/inuptWithDuChaTreeNode.vue";
import inputWidthDuChaNodes from "@widget/inputWithDuChaNodes.vue";
import inputWidthDuChaShuiKu from "@widget/inputWith_sk.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
    components: {
        //详情页
        supervisionDetails: resolve => {
        require(["../../../../duChaWenTi/supervisionDetails_shuiku.vue"], resolve);
        },
    },
    props: ["activedName","currentResCode"],
    data() {
        //这里存放数据
        return {
        testHeight1:window.innerHeight * 0.5,
        tableHeight: window.innerHeight - 380,
        supervisionState: [
            {
            value: "0",
            label: "一般"
            },
            {
            value: "1",
            label: "较重"
            },
            {
            value: "2",
            label: "严重"
            },
            {
            value: "3",
            label: "特别严重"
            }
        ],
        supervision: [
            {
            value: "1",
            label: "是"
            },
            {
            value: "0",
            label: "否"
            }
        ],
        updateIdXiuGai: "",
        pblmId: "",
        addPicPanel: false,
        supervisionDetailsVisible:false,
        currentProblemId: "",
        currentPage: 1, // 页码
        pageSize: 20,
        loading: false,
        total: 0, // 总数
        searchResult: [], // 结果
        userId: localStorage.getItem("userid"),
        pictureArray: [],
        audioArray: [],
        videoArray: [],
        fileArray: [],
        audiotabName: "",
        videotabName: "",
        filetabName:"",
        picturetabName: "",
        deleteId: "",
        playerOptions: {
            height: "120",
            autoplay: true,
            muted: true,
            language: "en",
            playbackRates: [0.7, 1.0, 1.5, 2.0],
            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"
            }
            ]
        },
        changeSupervisionVisible: false,
        changeSupervisionLoading: false,
        changeSupervision: {
            nm: "",
            presId: localStorage.getItem("userid"),
            endTime: "",
            pblmId: "",
            objId: "",
            objType: "",
            inspGroupId: "",
            inspPblmName: "",
            inspPblmDesc: "",
            pblmLong: "",
            pblmLat: "",
            pblmStat: "",
            ifCasePblm: "",
            inspPblmOrgName: "",
            pblmPersName: "",
            inspPblmCate: "",
            reviOpin: "",
            reviConc: "",
            reviOrgGuid: "",
            collTime: "",
            recPers: "",
            gwComFiles: [
            {
                id: "",
                filePath: "",
                bizId: ""
            }
            ]
        },
        // 文件弹框
        fileList: [], // 当前文件列表
        flash: false,
        // 督查类型
        supervisionTypeList: [
            {
            value: "1",
            label: "小水库"
            }
        ],
        leibie: [],
        // 查询
        value6: [],
        findParams: {
            hasVedio:"",
            adCode: "",
            pblmStat: "",
            inspPblmCate: "",
            ifCasePblm: "",
            nm: "",
            rsName: "",
            adFullName: "",
            startTime: "",
            endTime: "",
            objType: 1,
            inspPblmName: "",
            persId: localStorage.getItem("userid")
        },
        currentPage: 1, // 页码
        pageSize: 20, // 条数
        loading: false,
        total: 0, // 总数
        searchResult: [], // 结果
        crId: "", // 当前督查id
        // 督查详情
        userid: localStorage.getItem("userid"),
        supervisionDetailsVisible: false,
        problemDeleteVisible: false,
        supervisionDetails: {},
        pblmId: "",
        gwComFiles: [],
        pblscr: "",
        pblscrList: [
            {
            lable: "我的问题",
            value: localStorage.getItem("userid")
            }
        ],
        pblscrGroup: ""

        };
    },
    //监听属性 类似于data概念
    computed: {
        hostUrl(){
            return hostUrl
        }
    },
    //监控data中的数据变化
    watch: {
        activedName() {
        this.search();
        },
        currentResCode(oldValue,newValue){
        this.currentResCode = newValue;
        this.search();
        }
    },
    //方法集合

    methods: {
        handleSizeChange(pageSize) {
        this.pageSize = pageSize;
        this.search();
        },
        // 查询
        search() {
        this.loading = true;
        let _self = this;
        let data = {};
        data["gateName"] = "";
        data["inspPblmName"] = "";
        data["objType"] = 6;
        data["persId"] = _self.userId;
        data["pageNum"] = _self.currentPage;
        data["recPers"] = _self.userId;
        data["pageSize"] = _self.pageSize;
        data["villType"] = "7";
        data["codes"] = _self.currentResCode;
        getSzwtTable(data).then(res => {
            _self.loading = false;
            if (res.success) {
            _self.searchResult = res.data.list;
            _self.total = res.data.total;
            } else {
            }
        });
        },
        timestampToTime(row, column) {
        var date = new Date(row.collTime);
        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;
        },
        // 详情弹框
        showDetails(id) {
        this.currentProblemId = id;
        this.supervisionDetailsVisible = true;
        },
        // 修改弹窗显示
        changeSup(id) {
        this.pictureArray = [];
        this.audioArray = [];
        this.videoArray = [];
        this.fileArray = [];
        this.updateIdXiuGai = id;
        showDetailsXq(this.updateIdXiuGai).then(res => {
            // if(this.usersId==)
            this.changeSupervision = res.data;
            this.changeSupervisionVisible = true;
            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 == "JPG" ||
                item.fileExt == "png" ||
                item.fileExt == "PNG" ||
                item.fileExt == "JPEG" ||
                item.fileExt == "jpeg"
            ) {
                this.pictureArray.push(item);
            } else if (item.fileExt == "mp4" || item.fileExt == "MP4") {
                this.videoArray.push({
                id: item.id,
                bizId: item.bizId,
                width: "130",
                height: "130",
                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}`,
                    // webm
                    // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                    }
                ]
                });
            }else{
                this.fileArray.push(item);
            }
            });

            this.picturetabName = "图片资料(" + this.pictureArray.length + ")";
            this.audiotabName = "音频资料(" + this.audioArray.length + ")";
            this.videotabName = "视频资料(" + this.videoArray.length + ")";
            this.filetabName = "其它资料(" + this.fileArray.length + ")";
        });
        },
        // 提交修改信息
        changeSupervisionInfo() {
        this.changeSupervisionVisible = true;
        this.$refs.changeSupFrom.validate(valid => {
            if (valid) {
            this.changeSupervisionLoading = true;
            let data = this.changeSupervision;
            updatelist(data).then(res => {
                this.pblmId = res.data.pblmId;
                this.gwComFiles = res.data.gwComFiles;
                if (res.success) {
                    this.removeNewSupervision();
                this.successInfo();
                if (this.$refs.uploadFile.submitUpload(data.pblmId)) {
                    this.removeNewSupervision();
                    this.successInfo();
                    this.addPicPanel = false;
                    this.changeSupervisionLoading = false;
                }
                } else {
                this.failInfo();
                }
            });
            }
        });
        },
            removeNewSupervision(arg) {
        if (arg) {
            console.log(arg);
            var args = this.gwComFiles.concat(arg);
            this.updatefilelist(args);
        }
        this.search();
        this.gwComFiles = [];
        this.newSupervisionVisible = false;
        this.changeSupervisionVisible = false;
        this.newSupervision = {
            id: "",
            checkPoint: "",
            presId: localStorage.getItem("userid"),
            dataStat: "",
            nm: "",
            endTime: "",
            pblmId: "",
            objId: "",
            objType: "",
            inspGroupId: "",
            inspPblmCate: "",
            inspPblmName: "",
            inspPblmDesc: "",
            pblmLong: "",
            pblmLat: "",
            pblmStat: "",
            ifCasePblm: "",
            inspPblmOrgName: "",
            pblmPersName: "",
            inspPblmCate: "",
            reviOpin: "",
            reviConc: "",
            reviOrgGuid: "",
            collTime: "",
            recPers: "",
            note: ""
        };
        // this.$refs.uploadFile.init();
        },
        // 删除图片文件
        removeFile(id, index) {
        // this.updateIdXiuGai = this.updateIdXiuGai;
        var _self = this;
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "返回",
            type: "warning"
        }).then(
            res => {
            if (res === "confirm") {
                deleteFileById(id, this.userId).then(res => {
                if (res.success) {
                    // this.changeSupervision.gwComFiles.splice(index, 1);
                    this.changeSupervision.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);
                    }
                    });
                    _self.changeSup(this.updateIdXiuGai);
                } else {
                    this.failInfo();
                }
                });
            }
            },
            res => {
            console.log("返回");
            }
        );

        },
        // 操作成功反馈
        successInfo() {
        this.$message({
            type: "success",
            message: "操作成功!"
        });
        },
        // 操作失败反馈
        failInfo(val) {
        this.$message.error(val);
        },
        // 清空选择
        toggleSelection(rows) {
        this.$refs.multipleTable.clearSelection();
        },
        // 已选择项
        handleSelectionChange(val) {
        this.multipleSelection = val;
        },
        // 文件上传
        submitUpload() {
        this.$refs.upload.submit();
        },
        handleRemove(file, fileList) {
        console.log(file, fileList);
        },
        handlePreview(file) {
        console.log(file);
        },
        addPic() {
        this.addPicPanel = !this.addPicPanel;
        },
        // 删除弹窗
        removeSuperviseOne(id) {
        this.deleteId = id;
        this.problemDeleteVisible = true;
        },
        deleteSuccess() {
        this.problemDeleteVisible = false;
        this.search();
        },
        changeSupervisionVisiblefalse() {
        this.$nextTick(() => {
            if (this.flash) {
            this.flash = false;
            this.search();

            }
        });

        this.changeSupervisionVisible = false;
        this.changeSupervision = {
            dataStat: "",
            nm: "",
            endTime: "",
            pblmId: "",
            objId: "",
            objType: "",
            inspGroupId: "",
            inspPblmCate: "",
            inspPblmName: "",
            inspPblmDesc: "",
            pblmLong: "",
            pblmLat: "",
            pblmStat: "",
            ifCasePblm: "",
            inspPblmOrgName: "",
            pblmPersName: "",
            inspPblmCate: "",
            reviOpin: "",
            reviConc: "",
            reviOrgGuid: "",
            collTime: "",
            recPers: "",
            note: "",
            gwComFiles: [
            {
                id: "",
                filePath: "",
                bizId: ""
            }
            ]
        };
        this.$refs.uploadFile.init();
        this.addPicPanel = false;
        },
    },

    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.addPicPanel = false;
        if (this.userId) {
        console.log("已经登录");
        this.search();
        } else {
        this.$router.push("/login");
        }
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.search();
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>