fj-dc-ui/.svn/pristine/28/2831b10ee3b1ff76749ebd7e5b7e24fba07734d6.svn-base

<template>
<div style="height:100%;width:100%" id="wenTiContainer_dxs">
    <el-container>
        <el-aside width="250px" style="border-right:2px solid #d5d5ff;float:left" :style="{'max-height':testHeight+'px','height':testHeight+'px'}">
          <div class="tree" style="
          height: 100%;
          width: 100%;
          overflow: auto;
          display: inline-flex;">
            <el-tree :highlight-current="true" style="height:100%;" :data="treeData" node-key="id" show-checkbox @check-change="handleCheckChange" ref="jigou_tree">
                <div class="custom-tree-node" slot-scope="{ node, data }">
                    <span style="float:left;">{{ data.pnm}}

                        </span>
                    <div style="float:right;display: flex;justify-content: flex-end;align-items: center;width:50%;">

                        <span style="color:blue;width:80px;"></span>

                    </div>
                </div>
            </el-tree>
          </div>
        </el-aside>
        <el-main style='margin:0px;padding:0px;overflow-y:hidden;' class="shuiku">
            <!-- <el-card> -->
            <div class="pages" :style="{'max-height':testHeight+'px'}">

                <div style="padding: 10px 10px 0 10px;">
                    <el-row type="flex" justify="space-bv-fortween">
                      <el-col  :span="24">
                        <el-form :inline="true" size="mini" class="demo-form-inline" style="padding-left: 10px;">
                          <el-form-item label="行政区划:">
                            <el-input resize="none" type="input" :rows="3" placeholder="请输入行政区划名称" v-model.trim="findParams.adFullName" clearable></el-input>
                          </el-form-item>
                          <el-form-item label="测站名称:">
                            <el-input resize="none" type="input" :rows="3" placeholder="请输入测站名称" v-model.trim="findParams.nm" clearable></el-input>
                          </el-form-item>
                          <el-form-item label="问题类别:">
                            <el-select v-model="findParams.inspPblmName"  clearable placeholder="请选择">
                                <el-option v-for="item in leibie" :key="item.guid" :label="item.inspPblmsName" :value="item.inspPblmsName"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="是否典型:">
                            <el-select v-model="findParams.ifCasePblm"  clearable placeholder="请选择">
                                <el-option v-for="item in supervision"  :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="问题筛选:">
                            <el-select v-model="pblscr"  clearable placeholder="请选择">
                                <el-option v-for="item in pblscrList" :key="item.value" :label="item.lable" :value="item.value"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="上报人员:">
                            <el-input resize="none" type="input" :rows="3" placeholder="请输入名称" v-model.trim="findParams.persName"></el-input>
                          </el-form-item>
                          <el-form-item label="所在组:">
                            <el-input resize="none" type="input" :rows="3" placeholder="请输入所在组名称" v-model.trim="pblscrGroup" clearable></el-input>
                          </el-form-item>
                          <el-form-item label="是否包含多媒体文件:">
                            <el-select v-model="findParams.hasVedio" clearable placeholder="请选择">
                            <el-option
                                v-for="item in hasVedio1"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="发现时间:">
                            <el-date-picker v-model="value6" type="daterange" value-format="yyyy-MM-dd" style="width:240px" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                          </el-form-item>
                          <el-button style="float:right;margin-right:10px;" type="primary" icon="el-icon-search" @click="search">查询</el-button>
                        </el-form>
                      </el-col>
                    </el-row>
                </div>
                <!-- 查询展示 -->
                <div style="margin-top:10px;">
                    <el-table v-loading="loading" border ref="multipleTable" :data="searchResult" :height="tableHeight" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column align="center" type="index" label="序号" min-width="25">
                            <template slot-scope="scope">{{ (currentPage - 1) * pageSize + (scope.$index + 1) }}</template>
                        </el-table-column>

                        <!-- <el-table-column header-align="center" align="center" min-width="140" prop="inspPblmName" label="小水库问题类别"></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="100" prop="nm" label="测站名称" show-overflow-tooltip></el-table-column>
                        <el-table-column header-align="center" align="center" min-width="150" prop="inspPblmDesc" label="问题描述" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column header-align="center" align="center" min-width="60" 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="100" show-overflow-tooltip></el-table-column>
                      <el-table-column header-align="center" align="center" min-width="150" prop="inspPblmName" label="问题类别" show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column
                        align="center"
                        prop
                        min-width="100"
                        label="操作"
                        show-overflow-tooltip
                        fixed="right"
                      >
                            <template slot-scope="scope">
                                <el-button icon="el-icon-view"  title="查看详情"type="text" @click="showDetails(scope.row.pblmId)"></el-button>
                                <!--<el-button icon="el-icon-edit" type="text" title="修改问题"  @click="changeSup(scope.row.pblmId)"></el-button>-->
                                <!--<el-button icon="el-icon-delete" type="text"  title="删除问题" @click="removeSuperviseOne(scope.row.pblmId)"></el-button>-->
                                <!-- <el-button icon="el-icon-view"  title="查看详情"@click="showDetails(scope.row.pblmId)" style="background:#409EFF;border-radius:15px;color:rgba(255,255,255,1)"></el-button>
                                <el-button style=" margin:2px 20px;padding: 5px 15px;background-color:#909399;border-radius:15px;color:rgba(255,255,255,1)" type="info" icon="el-icon-edit" @click="changeSup(scope.row.pblmId)"></el-button>
                                <el-button style=" margin:2px 20px;padding: 5px 15px;background-color:#F56C6C;border-radius:15px;color:rgba(255,255,255,1)" type="danger" icon="el-icon-delete"  title="删除问题" @click="removeSuperviseOne(scope.row.pblmId)"></el-button> -->
                            </template>
                        </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>
                <!-- 详情弹框 -->
                <el-dialog class="outerDialog custom_dialog" title="问题详情" width="60%" :visible.sync="supervisionDetailsVisible" v-if="supervisionDetailsVisible">
                    <supervision-details ref="xianqing" :problemId="currentProblemId"></supervision-details>
                    <span slot="footer">
                <el-button style="margin-top:5px;" @click="supervisionDetailsVisible = false">返回</el-button>
                </span>
                </el-dialog>
                <!-- 删除的弹窗 -->
                <el-dialog class="deleteDialog" title="问题删除描述" :visible.sync="problemDeleteVisible">
                    <Problem-delete ref="deleteMiaoShu" :deleteProblemId="deleteId" @deleteSuccess="deleteSuccess"></Problem-delete>
                    <span slot="footer">
                     <el-button @click="problemDeleteVisible = false">返回</el-button>
                    </span>
                </el-dialog>
                <!-- 修改弹框 -->
                <el-dialog class="outerDialog custom_dialog" title="修改督查问题" width="60%" :close-on-click-modal="false" :visible.sync="changeSupervisionVisible">
                    <div class="scroll300">
                        <div style="width:49%;height:500px;float:left;border:1px solid #d5d5ff;margin-right:5px;">
                            <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">基本信息</p>
                            <el-form ref="changeSupFrom" :rules="rules1" :model="changeSupervision" label-width="120px">
                                <el-form-item label="测站名称" prop="nm">
                                    <el-input v-model="changeSupervision.nm" clearable readonly></el-input>
                                </el-form-item>
                                <el-form-item label="问题类别">
                                    <el-select v-model="changeSupervision.inspPblmName" clearable placeholder="请选择">
                                        <el-option v-for="(item,index) in leibie" :key="index" :label="item.inspPblmsName" :value="item.inspPblmsName"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="检查项目">
                                    <el-select v-model="changeSupervision.inspPblmsName" clearable placeholder="请选择" @change="checkPointChange">
                                        <el-option v-for="item in checkPointList" :key="item" :label="item.inspPblmsName" :value="item.inspPblmsName"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="问题描述">
                                    <el-input type="textarea" :rows="2" v-model="changeSupervision.inspPblmDesc" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="是否为典型问题:">
                                    <el-select v-model="changeSupervision.ifCasePblm" clearable placeholder="请选择">
                                        <el-option v-for="item in supervision" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="整改意见" prop="note">
                                    <el-input type="textarea" :rows="2" v-model.trim="changeSupervision.note" clearable></el-input>
                                </el-form-item>
                                <el-form-item label="上报人" prop="persName">
                                    <el-input resize="none" type="input" :rows="3" placeholder="请输入" readonly v-model.trim="changeSupervision.persName"></el-input>
                                </el-form-item>
                                <el-form-item label="采集时间">
                                    <el-date-picker v-model="changeSupervision.collTime" type="date" readonly></el-date-picker>
                                </el-form-item>
                            </el-form>
                        </div>

                        <div style="width:49%;height: 500px;float:left;border:1px solid #d5d5ff;">
                            <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">多媒体信息</p>
                            <el-tabs style="height: 300px;margin:0px 5px">
                                <el-tab-pane :label="picturetabName" style="height: 300px;">
                                  <el-row  style="text-align:right;">
                                    <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>
                                  <el-row v-if="addPicPanel">
                                    <upload ref="uploadFile" :url="`/pdcApi/file/insert?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">
                                        <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"></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>
                                                <!-- <span>{{scope.row.fileTitle}}</span> -->
                                            </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">删除</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">
                                                <!-- <span>{{scope.row.fileTitle}}</span> -->
                                                <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.id,scope.$index)" type="danger">删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-tab-pane>

                            </el-tabs>

                        </div>

                        <!-- <upload ref="changeUploadFile" :url="`/pdcApi/file/insert?bizId=`" @uploadOver="removeNewSupervision"></upload> -->
                    </div>
                    <span slot="footer">
                        <el-button
                        type="primary"
                        @click="changeSupervisionInfo"
                        >保存</el-button>
                        <el-button @click="changeSupervisionVisiblefalse">取消</el-button>
                    </span>
                </el-dialog>
            </div>
            <!-- </el-card> -->
        </el-main>
    </el-container>
</div>
</template>

<script>
import {
    findPageInfoShuiKu,
    getShuiKuWenTi,
    getXSKProblemNewExport,
    findPageInfo,
    getDXSProblemNew,
    removeSupervise,
    showDetailsXq,
    submitUpload,
    creatSupervise,
    getSupervisdByID,
    deleteFileById,
    updatelist,
    getEngId
} from "../../api/duChaAPI.js";
import request from '../../utils/gw_ajax_request.js'
import { hostUrl } from "@util/global_variable.js";
import elaudio from '../../widgets/elAudioShort.vue'
import inuptWithDuChaTreeNode from '../../widgets/inuptWithDuChaTreeNode.vue'
import inputWidthDuChaNodes from '../../widgets/inputWithDuChaNodes.vue'
import inputWidthDuChaShuiKu from '../../widgets/inputWith_sk.vue'
export default {
    props: ["codeId"],
    components: {
        upload: resolve => {
            require(["../../widgets/uploadFile.vue"], resolve);
        },
        //详情页
        supervisionDetails: resolve => {
            require(["./supervisionDetails_dxs.vue"], resolve);
        },
        // 删除描述页
        ProblemDelete: resolve => {
            require(["./problemDelete.vue"], resolve);
        },
        elaudio: elaudio,
        inuptWithDuChaTreeNode: inuptWithDuChaTreeNode,
        inputWidthDuChaNodes: inputWidthDuChaNodes,
        inputWidthDuChaShuiKu: inputWidthDuChaShuiKu,
    },
    data() {
        var validatePass1 = (rules1, value, callback) => {
            if (this.newSupervision.startTime > this.newSupervision.endTime) {
                callback(new Error("结束时间不能早于开始时间"));
            } else {
                callback();
            }
        };
        var validatePass2 = (rules1, value, callback) => {
            let startTime = this.changeSupervision.startTime.slice(0, 10);
            if (startTime > this.changeSupervision.endTime) {
                callback(new Error("结束时间不能早于开始时间"));
            } else {
                callback();
            }
        };
        var divisionList = (rules1, value, callback) => {
            if (this.newGroup.divisionList.length) {
                callback();
            } else {
                callback(new Error("至少要添加一个地区"));
            }
        };
        return {
            addPicPanel: false,
            tableHeight: window.innerHeight - 190,
            deleteId: "",
            treeNodeArray: [],
            treeNodeSelectVisible: false,
            adNodeArray: [],
            adNodeSelectVisible: false,
            areaSelectVisible: false,
            rsvrNodeArray: [],
            rsvrNodeSelectVisible: false,
            skSelectVisible: false,

            currentProblemId: '',
            updateIdXiuGai: '',
            rules1: {
                inspPblmName: [{
                        required: true,
                        message: "请输入问题名称",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 999,
                        message: "不超过100字符",
                        trigger: "blur"
                    }
                ],
                inspPblmDesc: [{
                    required: true,
                    message: "请输入问题描述",
                    trigger: "blur"
                }],
                recPers: [{
                        required: true,
                        message: "请输入记录人",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 999,
                        message: "不超过100字符",
                        trigger: "blur"
                    }
                ],
                objType: [{
                    required: true,
                    message: "请选择督查对象类型",
                    trigger: "change"
                }],
                objId: [{
                    required: true,
                    message: "请选择督查对象类型",
                    trigger: "change"
                }],
                inspPblmType: [{
                    required: true,
                    message: "请选择督查问题类型",
                    trigger: "change"
                }],
                dataStat: [{
                    required: true,
                    message: "请选择数据状态",
                    trigger: "change"
                }],
                collTime: [{
                    required: true,
                    message: "请选择采集时间",
                    trigger: "change"
                }],
                ifCasePblm: [{
                    required: true,
                    message: "请选择是否典型",
                    trigger: "change"
                }],
                pblmStat: [{
                    required: true,
                    message: "请选择问题类型",
                    trigger: "change"
                }],
                inspPblmCate: [{
                        required: true,
                        message: "请选择问题程度",
                        trigger: "change"
                    },
                    {
                        trigger: "change"
                    }
                ]
            },
            testHeight: window.innerHeight,
            supervisionStateList: [{
                    value: "0",
                    label: "暂存"
                },
                {
                    value: "1",
                    label: "上报"
                },

            ],

            supervisionState: [{
                    value: "0",
                    label: "一般"
                },
                {
                    value: "1",
                    label: "较重"
                },
                {
                    value: "2",
                    label: "严重"
                }
            ],
            supervision: [{
                    value: "1",
                    label: "是"
                },
                {
                    value: "0",
                    label: "否"
                }
            ],
            findUseOrgArray: [],
            areaInputValue: {},
            memberInputValue: {},
            multipleSelection: [], // 已选
            selectionType: {
                remove: 0,
                befor: 0,
                now: 0,
                after: 0
            },
            // 根据客户点击的督查类型查找督查对象ID
            // 新增
            listobjId: [],
            userId: localStorage.getItem("userid"),
            treeData: [],
            // 修改督查
            pictureArray: [],
            audioArray: [],
            videoArray: [],
            audiotabName: "",
            videotabName: "",
            picturetabName: "",
            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: "5",
                    label: "地下水"
                },

            ],
            leibie: [],
            checkPointList: [],
            // 查询
            value6: [],
            hasVedio1: [
                {
                value: "1",
                label: "是"
                },
                {
                value: "0",
                label: "否"
                }
            ],
            findParams: {
                hasVedio:"",
                adCode: "",
                pblmStat: "",
                inspPblmCate: "",
                ifCasePblm: "",
                nm: "",
                rsName: '',
                adFullName: '',
                startTime: '',
                endTime: '',
                objType: '5',
                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: "",
        };
    },
    computed:{
        hostUrl(){
            return hostUrl
        }
    },
    created() {
        if (this.userId) {
            console.log("已经登录");
            this.search();
        } else {
            this.$router.push("/login");
        }

        this.getproblemSmallType();
        this.getLeftTreeData();
    },
    methods: {
        handleCheckChange(data, checked, indeterminate) {
            let cNarray = this.$refs['jigou_tree'].getCheckedNodes();
            console.log(cNarray);
            this.treeNodeArray = cNarray;
        },
        getLeftTreeData() {
            var _self = this;
            request.get('/dc/organization/base/getAllNode', {
                params: {
                    'userId': this.userId,
                    'orgType': '005'
                }
            }).then((res) => {
                let data = res.data
                data.forEach(ele => {
                    if (ele.pid == null || ele.pid == '') {
                        ele.pid = '005'
                    }
                });
                data = _self.getTrees(data)
                _self.treeData = data;
                console.log(data);

                // _self.duChaType = _self.treeData[0].id.substring(2,3);
            })
        },
        //格式化树形数据
        getTrees(list) {
          //@wxcwater重写方法 适应多个树
          let highLevelLength = 99;//预设最大节点id长度，目前最大应该为12，所以设置为99保证正常
          let _self =this;
          list.forEach((item,index)=>{
            item['pidLength'] = item.pid&&item.pid!=''?item.pid.length:0;
            if(highLevelLength>item.pidLength){
              highLevelLength = item.pidLength;
            }
          });
          console.log(highLevelLength);
          let heightLevelNode = [];
           list.forEach((item,index)=>{

            if(highLevelLength>=item.pidLength){
              heightLevelNode.push(item);
            }
          });

            list.forEach((item,index)=>{
              heightLevelNode.forEach((pItem)=>{
                _self.addTreeNode(pItem,item);
              });

            });
            console.log(heightLevelNode);
            return heightLevelNode;
          },

        addTreeNode:function(treeNode,leafNode){
            let _self = this;
            if(!treeNode.hasOwnProperty('children')){
                treeNode['children'] = [];
            }
            if(leafNode.pid == treeNode.id){
                treeNode.children.push(leafNode);
                return;
            }
            treeNode.children.forEach((item) => {
                _self.addTreeNode(item,leafNode);
            });
        },
        // 查询参数逻辑
        insertTreeNode: function (params) {
            this.treeNodeArray.push({
                name: params.name,
                code: params.code,
            });
            this.treeNodeSelectVisible = false;
            this.areaSelectVisible = false;
            this.skSelectVisible = false;
        },
        deleteTreeNode: function (tag) {
            let deleteIndex;
            this.treeNodeArray.forEach((item, index) => {
                if (item.code == tag.code) {
                    deleteIndex = index;
                }
            });
            this.treeNodeArray.splice(deleteIndex, 1);
        },
        selectDuChaAreaNode(params) {
            this.adNodeArray.push(params);
            this.areaSelectVisible = false;
            this.skSelectVisible = false;
        },
        deleteAreaNode(tag) {
            let deleteIndex;
            this.adNodeArray.forEach((item, index) => {
                if (item.adCode == tag.adCode) {
                    deleteIndex = index;
                    return
                }
            });
            this.adNodeArray.splice(deleteIndex, 1);
        },
        selectSkNode(params) {
            this.rsvrNodeArray.push(params);
            this.skSelectVisible = false;
        },
        deleteSkNode(tag) {
            let deleteIndex;
            this.rsvrNodeArray.forEach((item, index) => {
                if (item.rsCode == tag.rsCode) {
                    deleteIndex = index;
                    return
                }
            });
            this.rsvrNodeArray.splice(deleteIndex, 1);
        },
        // end
        handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },

        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        // 操作成功反馈
        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);
        },

        // 查询
        search() {
            this.loading = true;
            let _self = this;
            request.get('/dc/organization/base/getAllNode', {
                params: {
                    'userId': this.userId,
                    'orgType': '005'
                }
            }).then((res) => {
                let orgAllNode = res.data
                _self.loading = true;
                let data = _self.findParams;
                data.startTime=this.value6[0];
                data.endTime=this.value6[1];
                data.pageNum = _self.currentPage;
                data.recPers = _self.pblscr;
                data.orgNm = _self.pblscrGroup;
                data.pageSize = _self.pageSize;

                _self.findUseOrgArray = [];
                _self.treeNodeArray.forEach((item) => {
                    if (item.id.length < 12) {
                      orgAllNode.forEach((orgItem) => {
                        if (orgItem.id.startsWith(item.code)) {
                          _self.findUseOrgArray.push(orgItem.id);
                        }
                      });

                    }
                  _self.findUseOrgArray.push(item.id);
                });

                if (_self.findUseOrgArray.length > 0) {
                    data['orgIds'] = _self.findUseOrgArray.join(',');
                } else {
                    data['orgIds'] = '';
                }

                getDXSProblemNew(data).then(res => {
                    _self.loading = false;
                    _self.multipleSelection = [];
                    if (res.success) {
                        _self.searchResult = res.data.list;
                        _self.total = res.data.total;
                    } else {
                        _self.failInfo();
                    }
                });
            })

        },
        exportExcel() {
            let _self = this;
            request.get('/dc/organization/base/getAllNode', {
                params: {
                    'userId': this.userId,
                    'orgType': '005'
                }
            }).then((res) => {
                let orgAllNode = res.data

                let data = _self.findParams;
                data.pageNum = _self.currentPage;
                data.pageSize = _self.pageSize;
                _self.treeNodeArray.forEach((item) => {
                    console.log(item)
                    if (item.id.length < 12) {
                        orgAllNode.forEach((orgItem) => {
                            if (orgItem.id.startsWith(item.id)) {
                                _self.findUseOrgArray.push(orgItem.id);
                            }
                        });

                    } else {
                        _self.findUseOrgArray.push(item.id);
                    }

                });

                var xhr = new XMLHttpRequest();
                xhr.open('post', '/pdcApi/dc/insp/pblm/page/grw/export', true);
                xhr.responseType = 'blob';
                xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
                xhr.setRequestHeader('persId', localStorage.getItem('userid') ? localStorage.getItem('userid') : '');
                xhr.onload = function () {
                    if (this.status == 200) {
                        var blob = this.response;
                        var a = document.createElement('a');
                        var url = window.URL.createObjectURL(blob);
                        a.href = url;
                        //设置文件名称
                        a.download = '地下水问题列表.xls';
                        a.click();
                    }
                }
                xhr.send(JSON.stringify(data));
            })

        },
        exportWord() {
            let _self = this;
            request.get('/dc/organization/base/getAllNode', {
                params: {
                    'userId': this.userId,
                    'orgType': '005'
                }
            }).then((res) => {
                let orgAllNode = res.data

                let data = _self.findParams;
                data.pageNum = _self.currentPage;
                data.pageSize = _self.pageSize;
                _self.treeNodeArray.forEach((item) => {
                    console.log(item)
                    if (item.id.length < 12) {
                        orgAllNode.forEach((orgItem) => {
                            if (orgItem.id.startsWith(item.id)) {
                                _self.findUseOrgArray.push(orgItem.id);
                            }
                        });

                    } else {
                        _self.findUseOrgArray.push(item.id);
                    }

                });

                //下载word文档2
                request.post('/grw/doc',data).then(res=>{
                    if(res.success){
                        console.log(this.response)
                        var a = document.createElement('a');
                        a.href = `${this.hostUrl}${res.data.downloadPath}`;
                        //设置文件名称
                        a.download = '地下水问题详情.doc';
                        a.click();
                        // window.open(`${this.hostUrl}${res.data.downloadPath}`)
                    }else{
                        _self.$mesage.error(res.message)
                    }
                }).catch(res=>{
                    _self.$mesage.error(res.message)
                })
            })
        },
        downFile(blob, fileName) {
            // 非IE下载
            if ('download' in document.createElement('a')) {
                let link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob); // 创建下载的链接
                link.download = fileName; // 下载后文件名
                link.style.display = 'none';
                document.body.appendChild(link);
                link.click(); // 点击下载
                window.URL.revokeObjectURL(link.href); // 释放掉blob对象
                document.body.removeChild(link); // 下载完成移除元素
            } else {
                // IE10+下载
                window.navigator.msSaveBlob(blob, fileName);
            }
        },

        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.search();
        },

        // 新增
        getDuChaId() {
            //新增中 获取督查对象id
            getSupervisdByID(this.userid, 5).then(res => {
                if (res.success) {
                    // alert(1)
                    this.listobjId = res.data;
                } 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();
        },
        // 详情弹框
        showDetails(id) {
            this.currentProblemId = id;
            this.supervisionDetailsVisible = true;
        },
        // 删除弹窗
        removeSuperviseOne(id) {
            this.deleteId = id;
            this.problemDeleteVisible = true;
        },
        deleteSuccess() {
            this.problemDeleteVisible = false;
            this.search();
            this.$emit('problemCount')
        },
        // 修改弹窗显示
        changeSup(id) {
            this.pictureArray = [];
            this.audioArray = [];
            this.videoArray = [];
            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 == '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({
                                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"
                                }],

                            }, );
                        }
                    }
                );

                this.picturetabName = "图片资料(" + this.pictureArray.length + ")";
                this.audiotabName = "音频资料(" + this.audioArray.length + ")";
                this.videotabName = "视频资料(" + this.videoArray.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;
                        this.changeSupervisionLoading = false;
                        if (res.success) {
                            this.removeNewSupervision();
                            this.successInfo()
                            if (this.$refs.uploadFile.submitUpload(data.pblmId)) {
                                this.removeNewSupervision();
                                this.successInfo();
                            }
                        } else {
                            this.failInfo();
                        }
                    });
                }
            });
        },
        // 时间格式化
        timestampToTime(row, column) {
            var date = new Date(row.collTime);
            var Y = date.getFullYear() + "-";
            var M =
                (date.getMonth() + 1 < 10 ?
                    "0" + (date.getMonth() + 1) :
                    "0" + 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;
        },

        // 删除图片文件
        removeFile(id, index) {
            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 == 'JPEG' || item.fileExt == 'jpeg'  || item.fileExt == 'JPG' || item.fileExt == 'png' || item.fileExt == 'PNG') {
                                        this.pictureArray.splice(index, 1)
                                    } else if (item.fileExt == 'mp4' || item.fileExt == 'MP4') {
                                        this.videoArray.splice(index, 1)
                                    }
                                })
                            } else {
                                this.failInfo();
                            }
                        });
                    }
                },
                res => {
                    console.log("返回");
                }
            );
        },
        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.changeUploadFile.init();
        },
        //地下水查询下拉框数据
        getproblemSmallType() {
            request.get('/dc/insp/pblms/getPblmType', {
                params: {
                    type: 5
                }
            }).then(res => {
                if (res.success) {
                    this.leibie = res.data;
                }
            })
        },
        addPic() {
          this.addPicPanel = !this.addPicPanel;
        },
        getCheckPointPblm(guid){
            let _this = this
            request.get('/dc/insp/pblms/getPblmType',{params:{'type':5,'pguid':guid}}).then(res=>{
                if(res.success){
                    _this.checkPointList = res.data
                }
            })
        },
        checkPointChange(val){
            this.checkPointList.forEach(ele=>{
                if(ele.inspPblmsName == this.changeSupervision.inspPblmsName){
                    this.changeSupervision.pblmsTypeId = ele.guid
                    this.changeSupervision.checkPoint = ele.inspPblmsName
                }
            })

        }
    },
    watch: {
        codeId: function () {
            this.search()
        },
        'changeSupervision.inspPblmName':{
            deep:true,
            handler(val){
                this.leibie.forEach(ele=>{
                    if(val == ele.inspPblmsName){
                        this.getCheckPointPblm(ele.guid)
                    }
                })
            }
        }
    }
};
</script>

<style lang="scss" >
@import "./base.css";
@import url("/src/assets/iconfont/iconfont.css");
.el-form-item--mini.el-form-item, {
    margin-bottom: 8px;
}
.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 35px;
}
.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: 100%;
      left: 0;
      top: 0;
      cursor: default;
      text-align: center;
      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: 200px;
      .el-icon-delete {
        font-size: 36px;
      }
    }
    &: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;
    }
  }
}
#wenTiContainer_sk .el-tree-node {
    /* overflow: auto; */
}

#wenTiContainer_sk .el-tree-node>.el-tree-node__children {
    overflow: auto;
}

.shuiku .el-date-editor.el-input {
    min-width: 180px !important;
}

.shuiku .header {
    padding: 0px 10px;
}

.shuiku .el-row {
    margin-bottom: 5px;
}

.shuiku .content {
    margin: 10px;
}

/* .search .el-table>>>.el-tooltip {
    white-space: pre-wrap !important;
    line-height: 30px;
    font-size: 0;
} */

.shuiku .search>>>.el-table .el-button:nth-child(odd) {
    margin-left: 0 !important;
}

.custom_dialog .el-dialog {
    width: 60% !important;
}

.custom_dialog .scroll300 {
    max-height: 340px !important;
}
.scroll300 .el-form{
  padding-top: 5px;
  padding-right: 5px;
}

.shuiku .el-tag+.el-tag {
    margin-left: 10px;
}

.shuiku .button-new-tag {
    margin-left: 10px;
    height: 28px;
    line-height: 28px;
    padding-top: 0;
    padding-bottom: 0;
}

.shuiku .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}
.pages .el-select, .pages .el-input {
  width: 100px;
}
#wenTiContainer_dxs .el-dialog {
  width: 72% !important;
}
</style>