fj-dc-ui/.svn/pristine/0c/0ce17529206c384b3b836ecebc2bd0807f5114e2.svn-base

<template>
    <div style="height:100%;width:100%">
        <el-container>
            <el-aside
                width="250px"
                style="border-right:2px solid #d5d5ff;float:left;text-align: center;"
                :style="{'max-height':testHeight+'px','height':testHeight+'px'}">
                <el-button size="mini" :class="tabType==1 ? 'skactive' : 'sknormal'" @click="tabChange('1')">当前数据
                </el-button>
                <el-button size="mini" :class="tabType==2 ? 'skactive' : 'sknormal'" @click="tabChange('2')">历史数据
                </el-button>
                <el-button size="mini" :class="tabType==0 ? 'skactive' : 'sknormal'" @click="tabChange('0')">全部数据
                </el-button>
                <div class="tree" style="
          height: calc(100% - 50px);
          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}}
                <!-- <el-button v-if="data.type == '2'"
                              type="text danger"
                              icon="el-icon-circle-close"
                              size="mini"
                              style='color:red'
                              @click="() => deletePICI(node, data)">
                </el-button>-->

                <!-- <el-button v-if="data.type == '4'"
                              type="text danger"
                              icon="el-icon-circle-close"
                              size="mini"
                              style='color:red'
                @click="() => deleteZU(node, data)">-->
                <!-- </el-button> -->
            </span>
                            <div
                                style="float:right;display: flex;justify-content: flex-end;align-items: center;width:50%;"
                            >
                                <!-- <span style="color:blue;margin-right:20%;" v-show="data.sttm!=''&&data.entm!=''">{{data.sttm}}/{{data.entm}}
                                </span>-->
                                <span style="color:blue;width:80px;">
                <!-- <el-button v-if="data.type == '1' && data.code != '100'"
                            type="text"
                            icon="el-icon-circle-plus"
                            size="mini"
                            @click="() => addPICI(node,data,'计划')">
                            新建计划
                </el-button>-->

                                    <!-- <el-button v-if="data.type == '3'"
                                                type="text"
                                                icon="el-icon-circle-plus"
                                                size="mini"
                                                @click="() => addZU(node,data)">
                                                添加督查组
                                    </el-button>-->
              </span>
                            </div>
                        </div>
                    </el-tree>
                </div>
            </el-aside>
            <el-main style="margin:0px;padding:0px;overflow-y:hidden;" class="renyin" v-loading="exportLoading">
                <!-- <el-card> -->

                <div class="pages" :style="{'max-height':testHeight+'px'}">

                    <div class="search">
                        <el-row type="flex" justify="space-between">
                            <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"
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item label="督查对象:">
                                        <el-input
                                            resize="none"
                                            type="input"
                                            :rows="3"
                                            placeholder="请输入名称"
                                            v-model.trim="findParams.nm"
                                        ></el-input>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                        </el-row>
                        <el-row type="flex" justify="space-between" v-show="showExpandSearchPanel">
                            <el-col :span="24">
                                <el-form :inline="true" size="mini" class="demo-form-inline"
                                         style="padding-left: 10px;">
                                    <el-form-item label="问题类别:">
                                        <el-select v-model="findParams.inspPblmName" clearable placeholder="请选择">
                                            <el-option
                                                v-for="value,index in leibieVill"
                                                :key="index"
                                                :label="value"
                                                :value="value"
                                            ></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"
                                            clearable
                                            placeholder="请输入名称"
                                            v-model.trim="findParams.persName"
                                        ></el-input>
                                    </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-form-item label="所在组:">
                                        <el-input
                                            resize="none"
                                            type="input"
                                            :rows="3"
                                            placeholder="请输入所在组名称"
                                            v-model.trim="pblscrGroup"
                                        ></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-select v-model="findParams.state" clearable placeholder="请选择">
                                            <el-option
                                                v-for="item in stateList"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                        </el-row>
                        <el-row type="flex" justify="space-between" style="border-top:1px solid #0014ff2e;">
                            <el-col style='padding-bottom:10px;' :offset="11" :span="2">
                                <el-button style="float:right;margin-right:10px;border: 1px solid #0014ff2e;
                          border-radius: 0px 0px 5px 5px;border-top: 0px;" type="info" plain
                                           size="mini"
                                           @click="showExpandSearchPanel = !showExpandSearchPanel"

                                >
                                    {{showExpandSearchPanel?'收起':'更多条件'}}
                                    <i class="el-icon-arrow-down el-icon--right" v-show="!showExpandSearchPanel"/>
                                    <i class="el-icon-arrow-up el-icon--right" v-show="showExpandSearchPanel"/>
                                </el-button>
                            </el-col>
                            <el-col :offset="2" :span="9">

                                <el-button
                                    style="color:rgba(255,255,255,1);float:right;margin-right:10px;margin-top:5px;"
                                    type="primary"
                                    icon="el-icon-search"
                                    @click="search"
                                >&nbsp;查&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;询&nbsp;
                                </el-button>
                                <el-button
                                    style="color:rgba(255,255,255,1);float:right;margin-right:10px;margin-top:5px;"
                                    type="success"
                                    icon="el-icon-download"
                                    @click="exportWord"
                                >导出WORD
                                </el-button>
                                <el-button
                                    style="color:rgba(255,255,255,1);float:right;margin-right:10px;margin-top:5px;"
                                    type="success"
                                    @click="submitBtn"
                                >问题提交
                                </el-button>
                                <el-button
                                  style="color:rgba(255,255,255,1);float:right;margin-right:10px;margin-top:5px;"
                                  type="success"
                                  icon="el-icon-download"
                                  @click="exportExcel"
                                >导出EXCEL
                                </el-button>
                                <el-button
                                  v-if="isGd"
                                  style="color:rgba(255,255,255,1);float:right;margin-right:10px;margin-top:5px;"
                                  type="success"
                                  icon="el-icon-download"
                                  @click="toForm"
                                >导出一表一单
                                </el-button>
                            </el-col>
                        </el-row>
                    </div>

                    <!-- 查询展示 -->
                    <div class="search" style="margin-top:10px;">
                        <el-table
                            v-loading="loading"
                            border
                            ref="multipleTable"
                            :height="tableHeight"
                            :data="searchResult"
                            tooltip-effect="dark"
                            style="width: 100%"
                            @selection-change="handleSelectionChange"
                        >
                            <el-table-column
                                type="selection"
                                min-width="55">
                            </el-table-column>
                            <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="100"
                                prop="nm"
                                label="督查对象(县、区)"
                                show-overflow-tooltip
                            ></el-table-column>
                            <el-table-column
                                header-align="center"
                                align="center"
                                min-width="120"
                                prop="inspPblmName"
                                label="问题类别"
                                show-overflow-tooltip
                            ></el-table-column>
                            <!-- <el-table-column
                              header-align="center"
                              align="center"
                              min-width="230"
                              prop="inspPblmDesc"
                              label="问题描述"
                              show-overflow-tooltip
                            ></el-table-column> -->
                            <el-table-column
                                header-align="center"
                                align="center"
                                min-width="100"
                                prop="state"
                                label="问题督查状态">
                                <template slot-scope="scope">
                                    <p v-if="Number(scope.row.state) === 0"><span class="inspPblmCate"
                                                                                  style="background: #F56C6C;">未提交</span>
                                    </p>
                                    <p v-if="scope.row.state == 2"><span class="inspPblmCate"
                                                                         style="background: #409EFF;">已提交</span>
                                    </p>
                                    <p v-if="scope.row.state == 3"><span class="inspPblmCate"
                                                                         style="background: #67C23A;">已发布</span>
                                    </p>
                                </template>
                            </el-table-column>
                            <el-table-column
                                header-align="center"
                                align="center"
                                min-width="45"
                                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="100" prop="inspPblmCate" label="程度">
                                          <template slot-scope="scope">
                                              <span
                                                  style="background:#27C19F;"
                                                  v-if="scope.row.inspPblmCate == 0"
                                                  class="inspPblmCate"

                                              >一般</span>
                                              <span
                                                  style="background:#E6A23C;"
                                                  v-if="scope.row.inspPblmCate == 1"
                                                  class="inspPblmCate"

                                              >较重</span>
                                              <span
                                                  style="background:#F56C6C;"
                                                  v-if="scope.row.inspPblmCate == 2"
                                                  class="inspPblmCate"

                                              >严重</span>
                                          </template>
                            </el-table-column> -->
                            <!-- <el-table-column header-align="center" align="center" min-width="180" prop="inspPblmDesc" label="问题描述"></el-table-column> -->
                            <!-- <el-table-column header-align="center" align="center" min-width="180" prop="inspAddDesc" label="问题地址"></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 header-align="center" align="center" min-width="120" prop="recPers" label="操作记录人">
                            </el-table-column>-->
                            <el-table-column
                                prop="collTime"
                                label="上报时间"
                                sortable
                                align="center"
                                min-width="100"
                                show-overflow-tooltip>
                                <template slot-scope="scope">
                                    {{scope.row.collTime ? formatDateTime(scope.row.collTime) : ''}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                header-align="center"
                                align="center"
                                min-width="150"
                                prop="hasVedio"
                                label="是否包含多媒体文件"
                            >
                                <template slot-scope="scope">
                                    <p v-if="scope.row.hasVedio == 1">是</p>
                                    <p v-if="scope.row.hasVedio == 0">否</p>
                                </template>
                            </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"
                                        type="text"
                                        @click="showDetails(scope.row.pblmId,scope.row.villType)"
                                    ></el-button>
                                    <el-button
                                        icon="el-icon-edit"
                                        type="text"
                                        v-if="ownPriv('manage')"
                                        @click="changeSup(scope.row.pblmId,scope.row.villType)"
                                    ></el-button>
                                    <el-button
                                        icon="el-icon-delete"
                                        v-if="ownPriv('manage')"
                                        title="删除问题" @click="removeSuperviseOne(scope.row.pblmId)"
                                        type="text"
                                    ></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="问题详情"
                        v-if="supervisionDetailsVisible"
                        :visible.sync="supervisionDetailsVisible"
                    >
                        <!-- <supervision-details ref="xianqing" :problemId="currentProblemId"></supervision-details> -->
                        <component :is="curComponent" :problemId="currentProblemId"></component>
                        <span slot="footer">
              <el-button style="margin-top:5px;" @click="supervisionDetailsVisible = false">返回</el-button>
            </span>
                    </el-dialog>
                    <!-- 行政村修改弹框 -->
                    <el-dialog
                        width="60%"
                        v-if="curDialog == 'xingzhengcun'"
                        class="outerDialog custom_dialog"
                        title="修改督查问题"
                        :close-on-click-modal="false"
                        :visible.sync="changeSupervisionVisible"
                    >
                        <div class="scroll300">
                            <div
                                style="width:49%;overflow-y:auto;max-height:52vh;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="inspPblmName">
                                        <el-input v-model="changeSupervision.inspPblmName" clearable
                                                  readonly></el-input>
                                    </el-form-item>
                                    <el-form-item label="问题类别" prop="inspPblmsName">
                                        <!-- <el-input v-model="changeSupervision.inspPblmsName" clearable></el-input> -->
                                        <el-select
                                            v-model="changeSupervision.inspPblmsName"
                                            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="行政县名称" prop="nm">
                                        <el-input v-model="changeSupervision.nm" clearable readonly></el-input>
                                    </el-form-item>
                                    <el-form-item label="行政村名称" prop="srcDesc">
                                        <el-input v-model="changeSupervision.srcDesc" clearable readonly></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="inspPblmDesc">
                                        <el-input
                                            type="textarea"
                                            :rows="6"
                                            v-model="changeSupervision.inspPblmDesc"
                                            clearable
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item label="上报人" prop="persName">
                                        <el-input
                                            resize="none"
                                            type="input"
                                            :rows="3"
                                            readonly
                                            placeholder="请输入"
                                            v-model.trim="changeSupervision.persName"
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item label="采集时间" prop="collTime">
                                        <el-date-picker v-model="changeSupervision.collTime" readonly
                                                        type="date"></el-date-picker>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div
                                style="width: 49%;float: left;border: 1px solid rgb(213, 213, 255);margin-right: 5px;overflow-y: auto;max-height: 48vh;"
                            >
                                <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">多媒体信息</p>
                                <el-tabs style="margin:0px 5px">
                                    <el-tab-pane :label="picturetabName" style="overflow:auto">
                                        <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-show="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">
                                                    <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">
                                                    <elaudio
                                                        style="margin-left:15%;width:100px;"
                                                        :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-tabs>
                            </div>
                            <!-- <upload ref="changeUploadFile" :url="`/pdcApi/file/insert?bizId=`" @uploadOver="removeNewSupervision"></upload> -->
                        </div>
                        <span slot="footer">
              <el-button
                  type="primary"
                  @click="changeSupervisionInfo"
                  :loading="buttonLoading"
              >保存</el-button>
              <el-button @click="changeSupervisionVisiblefalse">取消</el-button>
            </span>
                    </el-dialog>
                    <!-- 饮水工程修改弹框 -->
                    <el-dialog
                        width="60%"
                        v-else-if="curDialog == 'yinshuigongcheng'"
                        class="outerDialog custom_dialog"
                        title="修改督查问题"
                        :close-on-click-modal="false"
                        :visible.sync="changeSupervisionVisible">
                        <div class="scroll300">
                            <div
                                style="width:49%;overflow-y:auto;max-height:48vh;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="inspPblmName">
                                        <el-input v-model="changeSupervision.inspPblmName" clearable
                                                  readonly></el-input>
                                    </el-form-item>
                                    <el-form-item label="督查问题类别" prop="inspPblmsName">
                                        <el-select
                                            v-model="changeSupervision.inspPblmsName"
                                            clearable
                                            placeholder="请选择"
                                        >
                                            <el-option
                                                v-for="item in leibie"
                                                :key="item.guid"
                                                :label="item.inspPblmsName"
                                                :value="item.inspPblmsName"
                                            ></el-option>
                                        </el-select>
                                        <!-- <el-input v-model="changeSupervision.inspPblmsName" readonly clearable></el-input> -->
                                    </el-form-item>
                                    <el-form-item label="行政县名称" prop="nm">
                                        <el-input v-model="changeSupervision.nm" clearable readonly></el-input>
                                    </el-form-item>
                                    <el-form-item label="是否为典型问题:">
                                        <el-radio v-model="changeSupervision.ifCasePblm" label="1">典型</el-radio>
                                        <el-radio v-model="changeSupervision.ifCasePblm" label="0">非典型</el-radio>
                                    </el-form-item>
                                    <el-form-item label="问题描述" prop="inspPblmDesc">
                                        <el-input type="textarea" :rows="4"
                                                  v-model="changeSupervision.inspPblmDesc"></el-input>
                                    </el-form-item>
                                    <el-form-item label="备注:" prop="note">
                                        <el-input type="textarea" :rows="3" v-model="changeSupervision.note"
                                                  clearable></el-input>
                                    </el-form-item>
                                    <el-form-item label="上报人" prop="persName">
                                        <el-input
                                            resize="none"
                                            type="input"
                                            :rows="3"
                                            placeholder="请输入"
                                            v-model.trim="changeSupervision.persName"
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item label="采集时间" prop="collTime" required>
                                        <el-date-picker v-model="changeSupervision.collTime"
                                                        type="date"></el-date-picker>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div
                                style="width: 49%;float: left;border: 1px solid rgb(213, 213, 255);margin-right: 5px;overflow-y: auto;max-height: 48vh;">
                                <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">多媒体信息</p>
                                <el-tabs style="margin:5px;">
                                    <el-tab-pane :label="picturetabName" style="">
                                        <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-show="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">
                                                    <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">
                                                    <elaudio
                                                        style="margin-left:15%;width:100px;"
                                                        :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"
                                                    >删除
                                                    </el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                        </div>
                        <span slot="footer">
              <el-button
                  type="primary"
                  @click="changeSupervisionInfo"
                  :loading="buttonLoading"
              >保存</el-button>
              <el-button @click="changeSupervisionVisiblefalse">取消</el-button>
            </span>
                    </el-dialog>
                    <!-- 水源地修改弹框 -->
                    <el-dialog
                        width="60%"
                        v-else-if="curDialog == 'shuiyuandi'"
                        class="outerDialog custom_dialog"
                        title="修改督查问题"
                        :close-on-click-modal="false"
                        :visible.sync="changeSupervisionVisible">
                        <div class="scroll300">
                            <div
                                style="width:49%;overflow-y:auto;max-height:48vh;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="inspPblmName">
                                        <el-input v-model="changeSupervision.inspPblmName" clearable
                                                  readonly></el-input>
                                    </el-form-item>
                                    <el-form-item label="督查问题类型" prop="inspPblmsName">
                                        <el-select
                                            v-model="changeSupervision.inspPblmsName"
                                            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="水源地名称" prop="nm">
                                        <el-input v-model="changeSupervision.nm" clearable readonly></el-input>
                                    </el-form-item>
                                    <el-form-item label="是否为典型问题:">
                                        <el-radio v-model="changeSupervision.ifCasePblm" label="1">典型</el-radio>
                                        <el-radio v-model="changeSupervision.ifCasePblm" label="0">非典型</el-radio>
                                    </el-form-item>
                                    <el-form-item label="问题描述" prop="inspPblmDesc">
                                        <el-input
                                            type="textarea"
                                            :rows="6"
                                            v-model="changeSupervision.inspPblmDesc"
                                            clearable
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item label="上报人" prop="persName">
                                        <el-input
                                            resize="none"
                                            type="input"
                                            :rows="3"
                                            placeholder="请输入"
                                            v-model.trim="changeSupervision.persName"
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item label="采集时间" prop="collTime">
                                        <el-date-picker
                                            v-model="changeSupervision.collTime"
                                            style="width:200px"
                                            size="mini"
                                            type="date"
                                        ></el-date-picker>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div
                                style="width: 49%;float: left;border: 1px solid rgb(213, 213, 255);margin-right: 5px;overflow-y: auto;max-height: 48vh;">
                                <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;">
                                            <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-show="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">
                                                    <video-player
                                                        class="video-player 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>
                        </div>
                        <span slot="footer">
              <el-button
                  type="primary"
                  @click="changeSupervisionInfo"
                  :loading="buttonLoading"
              >保存</el-button>
              <el-button @click="changeSupervisionVisiblefalse">取消</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>
                </div>
                <!-- </el-card> -->
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import {
        deleteFileById,
        findPageInfoRenYin,
        getRYProblemNew,
        getSupervisdByID,
        getTypeInfo,
        showDetailsXq,
        submitUpload,
        updatelist,
        pblmSubmit
    } from "../../api/duChaAPI.js";
    import {formatDateTime2} from '@util/gw_date.js'
    import {exportModel} from "@util/gw_exportModel";
    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);
            },
            //详情页
            xingzhengcun_Details: resolve => {
                require(["./supervisionDetails_xingzhengcun.vue"], resolve);
            },
            yinshuigongcheng_Details: resolve => {
                require(["./supervisionDetails_yinshuigongcheng.vue"], resolve);
            },
            shuiyuandi_Details: resolve => {
                require(["./supervisionDetails_shuiyuandi.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 {
                tabType: "0",//0全部数据，1当前数据，2历史数据
                showExpandSearchPanel: false,
                tableHeight: window.innerHeight - 270,
                hasVedio1: [
                    {
                        value: "1",
                        label: "是"
                    },
                    {
                        value: "0",
                        label: "否"
                    }
                ],
                addPicPanel: false,
                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"
                        }
                    ]
                },
                dxdcAsideHeight: window.innerHeight - 220,
                maxHeight: window.innerHeight - 300,
                testHeight: window.innerHeight - 113,
                supervisionStateList: [
                    {
                        value: "0",
                        label: "暂存"
                    },
                    {
                        value: "1",
                        label: "上报"
                    }
                ],
                treeData: [],
                findUseOrgArray: [],
                supervisionState: [
                    {
                        value: "0",
                        label: "一般"
                    },
                    {
                        value: "1",
                        label: "较重"
                    },
                    {
                        value: "2",
                        label: "严重"
                    }
                ],
                supervision: [
                    {
                        value: "1",
                        label: "是"
                    },
                    {
                        value: "0",
                        label: "否"
                    }
                ],

                areaInputValue: {},
                memberInputValue: {},
                multipleSelection: [], // 已选
                selectionType: {
                    remove: 0,
                    befor: 0,
                    now: 0,
                    after: 0
                },
                // 根据客户点击的督查类型查找督查对象ID
                // 新增
                listobjId: [],
                userId: localStorage.getItem("userid"),

                // 修改督查
                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: "1",
                        label: "小水库"
                    }
                ],
                leibieVill: [],
                bigLeibie: null,
                // 查询
                value6: [],
                findParams: {
                    hasVedio: "",
                    adCode: "",
                    pblmStat: "",
                    inspPblmCate: "",
                    villType: "",
                    ifCasePblm: "",
                    nm: "",
                    adFullName: "",
                    startTime: "",
                    endTime: "",
                    objType: 2,
                    pType:2,
                    inspPblmName: "",
                    persId: localStorage.getItem("userid"),
                    state: ''
                },
                stateList: [
                    {
                        label: '未提交',
                        value: '0'
                    },
                    {
                        label: '已提交',
                        value: '2'
                    },
                    {
                        label: '已发布',
                        value: '3'
                    }
                ],
                currentPage: 1, // 页码
                pageSize: 20, // 条数
                loading: false,
                total: 0, // 总数
                searchResult: [], // 结果
                crId: "", // 当前督查id
                // 督查详情
                userid: localStorage.getItem("userid"),
                supervisionDetailsVisible: false,
                problemDeleteVisible: false,
                supervisionDetails: {},
                pblmId: "",
                gwComFiles: [],
                curComponent: "xingzhengcun_Details",
                curDialog: "xingzhengcun",
                villPguid: "",
                shuiyuandiPguid: "",
                yinshuiPguid: "",
                pblscr: "",
                pblscrList: [
                    {
                        lable: "我的问题",
                        value: localStorage.getItem("userid")
                    }
                ],
                pblscrGroup: "",
                header: {
                    'persId': localStorage.getItem('userid'),
                    'orgId': localStorage.getItem('currentOrgId'),
                    'accessToken': localStorage.getItem('accessToken')
                },
                fileListLength: 0,
                exportLoading: false,
                datas: {},
                buttonLoading: false,
                leibie: []
            };
        },
        computed: {
            hostUrl() {
                return hostUrl
            },
            formatDateTime() {
                return formatDateTime2
            },
            isGd(){
                if(localStorage.getItem('currentRlcode').substring(0,2)=="44"){
                    return true;
                }else{
                    return false;
                }
            }
        },
        created() {
            if (this.userId) {
                console.log("已经登录");
                this.search();
            } else {
                this.$router.push("/login");
            }
            this.getLeftTreeData();
            this.addPicPanel = false;
        },
        methods: {
            tabChange(tabType) {
                this.tabType = tabType;
                this.getLeftTreeData();
                this.search();
            },
            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: "002",
                            tabType: this.tabType
                        }
                    })
                    .then(res => {
                        let data = res.data;
                        data.forEach(ele => {
                            if (ele.pid == null || ele.pid == "") {
                                ele.pid = "001";
                            }
                        });
                        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;
            },
            toForm(){
                var idArr = [];
                if(this.multipleSelection && this.multipleSelection.length==0){
                    this.$message.warning("请选择数据");
                    return false;
                }else{
                    this.multipleSelection.forEach((item)=>{
                        idArr.push(item.pblmId);
                    })
                }
                var ids = idArr.join(",");
                let host = hostUrl;
                let nginx = '/pageofficePath/';
                let href = 'pageoffice://|' + host + nginx + '/pageoffice/pblm/list/word?ids='+ids+'&filename=pblm|width=1100px;height=800px;ismodal=false;||91A4EE66EC1921F376873E85D6C74FFA|A890649B44577C32CE1930797E1299F9';
                let a = document.createElement('a'); // 创建a标签
                a.setAttribute('href', href);// href链接
                a.click();// 自执行点击事件
            },
            async exportExcel() {
                this.exportLoading = true;
                let _self = this;
                await request.get("/dc/organization/base/getAllNode", {
                    params: {
                        userId: this.userId,
                        orgType: "002"
                    }
                }).then(res => {
                    let orgAllNode = res.data;
                    let data = _self.findParams;
                    data.pageNum = _self.currentPage;
                    data.pageSize = _self.pageSize;
                    data.villType = "0";
                    _self.datas = JSON.stringify(data);
                    _self.findUseOrgArray = [];
                    _self.treeNodeArray.forEach(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);
                        }
                    });

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

                });
                let url = "/pdcApi/dc/insp/pblm/page/export";
                let type = "post";
                let exportName = "人饮督查问题列表.xls"
                let result = await exportModel(type, url, exportName, this.datas);
                _self.exportLoading = result;
            },
            async exportWord() {
                let _self = this;
                _self.exportLoading = true;
                await request.get("/dc/organization/base/getAllNode", {
                    params: {
                        userId: this.userId,
                        orgType: "001"
                    }
                }).then(res => {
                    let orgAllNode = res.data;

                    let data = _self.findParams;
                    data.pageNum = _self.currentPage;
                    data.pageSize = _self.pageSize;
                    data.villType = "0";
                    this.datas = data;
                    _self.findUseOrgArray = [];
                    _self.treeNodeArray.forEach(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
                await request.post('/vill/doc', this.datas).then(res => {
                    if (res.success) {
                        _self.exportLoading = false;
                        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)
                })
            },
            // 查询
            search() {
                this.loading = true;
                let _self = this;

                request
                    .get("/dc/organization/base/getAllNode", {
                        params: {
                            userId: this.userId,
                            orgType: "002",
                            tabType: this.tabType
                        }
                    })
                    .then(res => {
                        let orgAllNode = res.data;

                        _self.loading = true;
                        let data = _self.findParams;
                        data.startTime = _self.value6 && _self.value6.length > 0 ? _self.value6[0] : '';
                        data.endTime = _self.value6 && _self.value6.length > 0 ? _self.value6[1] : '';
                        data.pageNum = _self.currentPage;
                        data.recPers = _self.pblscr;
                        data.orgNm = _self.pblscrGroup;
                        // data.recPers = localStorage.getItem('userid');
                        data.pageSize = _self.pageSize;
                        // data.villType = "0";
                        // data.adCode = this.codeId;

                        _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);
                                //     }
                                // });
                            } else {
                                _self.findUseOrgArray.push(item.id);
                            }
                        });

                        if (_self.findUseOrgArray.length > 0) {
                            data["orgIds"] = _self.findUseOrgArray.join(",");
                        } else {
                            data["orgIds"] = "";
                        }
                        data.tabType = this.tabType;
                        getRYProblemNew(data).then(res => {
                            _self.loading = false;
                            _self.multipleSelection = [];
                            if (res.success) {
                                _self.searchResult = res.data.list;
                                // console.log(  "绝对是"+searchResult)
                                _self.total = res.data.total;
                            } else {
                                _self.failInfo();
                            }
                        });
                        //  人饮问题类别下拉数据
                        request.get(`/dc/insp/pblm/findVillType`).then(res => {
                            if (res.success) {
                                _self.leibieVill = res.data;
                            }
                        })

                    });

            },
            async submitBtn() {
                if (this.multipleSelection.length === 0) {
                    this.$message.warning('请至少选择一条问题');
                    return;
                }
                let newArray = this.multipleSelection.map((item) => {
                    return {
                        "objId": item.objId,
                        "objType": item.objType,
                        "state": "3"
                    }
                });
                const {success, message} = await pblmSubmit(newArray);
                if (success) {
                    this.$message.success('问题发布成功');
                    this.search();
                } else {
                    this.$message.warning(message);
                }
            },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
                this.search();
            },

            // 新增
            getDuChaId() {
                //新增中 获取督查对象id
                getSupervisdByID(this.userid, 1).then(res => {
                    if (res.success) {
                        // alert(1)
                        this.listobjId = res.data;
                    } else {
                        this.failInfo();
                    }
                });
            },
            // 取消
            removeNewSupervision(arg) {
                this.gwComFiles = [];
                if (arg) {
                    this.gwComFiles = arg;
                    this.$refs.uploadFile.init();
                }
            },
            // 详情弹框
            showDetails(id, villType) {
                this.currentProblemId = id;
                this.curComponent =
                    villType == "1"
                        ? "xingzhengcun_Details"
                        : villType == "2"
                        ? "shuiyuandi_Details"
                        : villType == "3"
                            ? "yinshuigongcheng_Details"
                            : "xingzhengcun_Details";
                this.supervisionDetailsVisible = true;
            },
            // 删除弹窗
            removeSuperviseOne(id) {
                this.deleteId = id;
                this.problemDeleteVisible = true;
            },
            deleteSuccess() {
                this.problemDeleteVisible = false;
                this.search();
                this.$emit("problemCount");
            },
            getType() {
                getTypeInfo("2").then(res => {
                    if (res.success) {
                        this.bigLeibie = res.data;
                        this.bigLeibie.forEach(ele => {
                            if (ele.inspPblmsName.indexOf("村") > -1) {
                                this.villPguid = ele.guid;
                            }
                            if (ele.inspPblmsName.indexOf("源") > -1) {
                                this.shuiyuandiPguid = ele.guid;
                            }
                            if (ele.inspPblmsName.indexOf("工程") > -1) {
                                this.yinshuiPguid = ele.guid;
                            }
                        });
                        let type = "2";
                        let pguid = this.villPguid;
                        if (this.curDialog == "xingzhengcun") {
                            pguid = this.villPguid;
                        }
                        if (this.curDialog == "shuiyuandi") {
                            pguid = this.shuiyuandiPguid;
                        }
                        if (this.curDialog == "yinshuigongcheng") {
                            pguid = this.yinshuiPguid;
                        }
                        findPageInfoRenYin(type, pguid).then(res => {
                            this.leibie = res.data;
                        });
                    }
                });
            },
            // 修改弹窗显示
            changeSup(id, villType) {
                this.currentProblemId = '';
                this.pictureArray = [];
                this.audioArray = [];
                this.videoArray = [];
                this.updateIdXiuGai = id;
                this.curDialog =
                    villType == "1"
                        ? "xingzhengcun"
                        : villType == "2"
                        ? "shuiyuandi"
                        : villType == "3"
                            ? "yinshuigongcheng"
                            : "xingzhengcun";
                this.getType();

                showDetailsXq(this.updateIdXiuGai).then(res => {
                    // if(this.usersId==)
                    this.changeSupervision = res.data;
                    this.fileList = this.changeSupervision.gwComFiles;
                    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"
                                    }
                                ]
                            });
                        }
                    });

                    this.picturetabName = "图片资料(" + this.pictureArray.length + ")";
                    this.audiotabName = "音频资料(" + this.audioArray.length + ")";
                    this.videotabName = "视频资料(" + this.videoArray.length + ")";
                });
            },
            // 提交修改信息
            changeSupervisionInfo() {
                this.$refs.changeSupFrom.validate(valid => {
                    if (valid) {
                        this.$nextTick(() => {
                            this.buttonLoading = true;
                            if (this.$refs.uploadFile.submitUpload(this.changeSupervision.pblmId)) {
                                this.removeNewSupervision();
                            }
                            setTimeout(() => {
                                this.changeSupervision.gwComFiles = this.gwComFiles;
                                let data = this.changeSupervision;
                                updatelist(data).then(res => {
                                    this.pblmId = res.data.pblmId;
                                    this.gwComFiles = res.data.gwComFiles;
                                    if (res.success) {
                                        this.buttonLoading = false;
                                        this.search();
                                        this.successInfo();
                                        this.addPicPanel = false;
                                        this.changeSupervisionVisible = false;
                                        // }
                                    } else {
                                        this.failInfo();
                                    }
                                });
                            }, 1000)
                        })

                    }
                });
            },

            // 删除图片文件
            removeFile(id, index) {
                var _self = this;
                this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "返回",
                    type: "warning"
                }).then(
                    res => {
                        if (res === "confirm") {
                            deleteFileById(id, this.userId).then(res => {
                                if (res.success) {
                                    this.fileListLength = 0;
                                    this.changeSupervision.gwComFiles.forEach(item => {
                                        if (
                                            item.fileExt == "mp3" ||
                                            item.fileExt == "MP3" ||
                                            item.fileExt == "m4a"
                                        ) {
                                            this.audioArray.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("返回");
                    }
                );
            },
            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: "",
                    reviOpin: "",
                    reviConc: "",
                    reviOrgGuid: "",
                    collTime: "",
                    recPers: "",
                    note: "",
                    gwComFiles: [
                        {
                            id: "",
                            filePath: "",
                            bizId: ""
                        }
                    ]
                };
                // this.$refs.changeUploadFile.init();
            },
            addPic() {
                this.addPicPanel = !this.addPicPanel;
            },
            //水库查询下拉框数据   wby
        },
        activated() {
            this.findParams = {
                hasVedio: "",
                adCode: "",
                pblmStat: "",
                inspPblmCate: "",
                villType: "",
                ifCasePblm: "",
                nm: "",
                adFullName: "",
                startTime: "",
                endTime: "",
                objType: 2,
                inspPblmName: "",
                persId: localStorage.getItem("userid")
            }
        },
        watch: {
            codeId: function () {
                this.search();
            },
            "changeSupervision.inspPblmsName": {
                handler: function (val, oldVal) {
                    this.leibie.forEach(ele => {
                        // console.log(this.changeSupervision.inspPblmsName)
                        console.log(ele.ele);
                        if (this.changeSupervision.inspPblmsName == ele.inspPblmsName) {
                            this.changeSupervision.pblmsTypeId = ele.guid;
                            // alert(ele.puid)
                        }
                    });
                },
                deep: true
            },
            showExpandSearchPanel: function (val) {
                if (val) {
                    this.tableHeight = window.innerHeight - 349;
                } else {
                    this.tableHeight = window.innerHeight - 270;
                }
            }
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss">
    @import "./base.css";
    @import url("/src/assets/iconfont/iconfont.css");
    @import url("/src/assets/css/mixin.scss");

    .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;
            }
        }
    }

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

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

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

    .renyin .content {
        margin: 10px;
    }

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

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

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

    .custom_dialog .scroll300 {
        max-height: 60vh !important;
    }

    .scroll300 .el-form {
        padding-top: 5px;
        padding-right: 5px;
    }

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

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

    .renyin .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }

    .renyin .inspPblmCate {
        padding: 2px 10px;
        border-radius: 10px;
        color: #ffffff;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }

    .skactive {
        background: #3f8eff !important;
        color: white !important;
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 7px 10px !important;
    }

    .sknormal {
        background: white;
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 7px 10px !important;
    }
</style>