fj-dc-ui/.svn/pristine/26/2649d8d02b0d19b9e06075f5d67f8fb3bcd5d29a.svn-base

<template>
  <div style="height:100%;width:100%" id="wenTiContainer_ry">
    <el-container>
      <el-aside
        width="200px"
        style="border-right:2px solid #d5d5ff;float:left"
        :style="{'max-height':testHeight+'px','height':testHeight+'px'}"
      >
        <div class="tree" style="
          height: 100%;
          width: 100%;
          overflow: auto;
          display: inline-flex;">
          <el-tree
            :highlight-current="true"
            style="height:100%;"
            :data="treeData"
            node-key="id"
            show-checkbox
            @check-change="handleCheckChange"
            ref="jigou_tree"
          >
            <div class="custom-tree-node" slot-scope="{ node, data }">
            <span style="float:left;">
              {{ data.pnm}}
            </span>
              <div
                style="float:right;display: flex;justify-content: flex-end;align-items: center;width:50%;"
              >
                <span style="color:blue;width:80px;">
              </span>
              </div>
            </div>
          </el-tree>
        </div>
      </el-aside>
      <el-main style="margin:0;padding:0;overflow-y:hidden;" class="renyin">
        <div :style="{'height':testHeight+'px'}">
          <div style="padding: 10px 10px 0 10px;">
            <el-row type="flex" justify="space-bv-fortween">
              <el-col  :span="24">
                <el-form :inline="true" size="mini" class="demo-form-inline" style="padding-left: 10px;">
                  <el-form-item label="行政区划:">
                    <el-input
                      resize="none"
                      type="input"
                      :rows="3"
                      placeholder="请输入行政区划名称"
                      v-model.trim="findParams.adFullName"
                    ></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-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"
                      placeholder="请输入名称"
                      v-model.trim="findParams.persName"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="所在组:">
                    <el-input
                      resize="none"
                      type="input"
                      :rows="3"
                      placeholder="请输入所在组名称"
                      v-model.trim="pblscrGroup"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="是否包含多媒体文件:">
                    <el-select v-model="findParams.hasVedio" clearable placeholder="请选择">
                      <el-option
                        v-for="item in hasVedio1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="发现时间:">
                    <el-date-picker
                      v-model="value6"
                      type="daterange"
                      value-format="yyyy-MM-dd"
                      style="width:240px"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    ></el-date-picker>
                  </el-form-item>
                  <el-button
                    style="float:right;margin-right:10px;"
                    type="primary"
                    icon="el-icon-search"
                    @click="search"
                  >查询</el-button>
                </el-form>
              </el-col>
            </el-row>
          </div>
          <!-- 查询展示 -->
          <div style="margin-top:10px;">
            <el-table
              v-loading="loading"
              border
              ref="multipleTable"
              :data="searchResult"
              :height="tableHeight"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column align="center" type="index" label="序号" min-width="25">
                <template slot-scope="scope">{{ (currentPage - 1) * pageSize + (scope.$index + 1) }}</template>
              </el-table-column>

              <!-- <el-table-column header-align="center" align="center" min-width="140" prop="inspPblmName" label="小水库问题类别"></el-table-column> -->
              <el-table-column
                header-align="center"
                align="center"
                min-width="60"
                prop="province"
                label="省"  v-if="isXj"
                show-overflow-tooltip
              ></el-table-column>
              <!--<el-table-column-->
                <!--header-align="center"-->
                <!--align="center"-->
                <!--min-width="60"-->
                <!--prop="city"-->
                <!-- :label="ownAdName"-->
                <!--show-overflow-tooltip-->
              <!--&gt;</el-table-column>-->
              <el-table-column
                header-align="center"
                align="center"
                min-width="130"
                prop="nm"
                label="督查对象(县、区)"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                min-width="150"
                prop="inspPblmDesc"
                label="问题描述"
                show-overflow-tooltip
              >
              </el-table-column>
              <!--<el-table-column-->
                <!--header-align="center"-->
                <!--align="center"-->
                <!--min-width="45"-->
                <!--prop="ifCasePblm"-->
                <!--label="典型"-->
              <!--&gt;-->
                <!--<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="上报时间"
                :formatter="timestampToTime"
                sortable
                align="center"
                min-width="100"
                show-overflow-tooltip
              ></el-table-column>
              <!--<el-table-column-->
                <!--header-align="center"-->
                <!--align="center"-->
                <!--min-width="150"-->
                <!--prop="hasVedio"-->
                <!--label="是否包含多媒体文件"-->
              <!--&gt;-->
                <!--<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
                header-align="center"
                align="center"
                min-width="120"
                prop="inspPblmName"
                label="问题类别"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="center"
                prop
                min-width="100"
                label="操作"
                show-overflow-tooltip
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button
                    icon="el-icon-view"
                    type="text"
                    @click="showDetails(scope.row.pblmId,scope.row.villType)"
                  ></el-button>
                  <!--<el-button-->
                    <!--icon="el-icon-edit"-->
                    <!--type="text"-->
                    <!--@click="changeSup(scope.row.pblmId,scope.row.villType)"-->
                  <!--&gt;</el-button>-->
                  <!--<el-button-->
                    <!--icon="el-icon-delete"-->
                    <!-- title="删除问题" @click="removeSuperviseOne(scope.row.pblmId)"-->
                    <!--type="text"-->
                  <!--&gt;</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 :disabled="true"></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 :disabled="true"></el-input>
                  </el-form-item>
                  <el-form-item label="行政村名称" prop="srcDesc">
                    <el-input v-model="changeSupervision.srcDesc" clearable :disabled="true"></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="督查对象类型" prop="objType">
                                <el-select v-model="changeSupervision.objType" placeholder="请选择" :disabled="true">
                                    <el-option v-for="item in supervisionTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                  </el-form-item>-->
                  <!-- <el-form-item label="问题程度" prop="inspPblmCate">
                                <el-select v-model="changeSupervision.inspPblmCate" placeholder="请选择">
                                    <el-option v-for="item in supervisionState" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="问题状态" prop="pblmStat">
                                <el-select v-model="changeSupervision.pblmStat" placeholder="请选择">
                                    <el-option v-for="item in supervisionStateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                  </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-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="严重程度:">
                                <el-radio v-model="changeSupervision.inspPblmCate" label="0">一般</el-radio>
                                <el-radio v-model="changeSupervision.inspPblmCate" label="1">较重</el-radio>
                                <el-radio v-model="changeSupervision.inspPblmCate" label="2">严重</el-radio>
                  </el-form-item>-->
                  <!-- <el-form-item label="问题地址" prop="inspAddDesc">
                                <el-input v-model="changeSupervision.inspAddDesc" clearable></el-input>
                  </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"
                      disabled
                      placeholder="请输入"
                      v-model.trim="changeSupervision.persName"
                    ></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="责任单位" prop="inspPblmOrgName">
                                <el-input resize="none" type="input" :rows="3" placeholder="请输入" v-model.trim="changeSupervision.inspPblmOrgName"></el-input>
                  </el-form-item>-->
                  <el-form-item label="采集时间" prop="collTime">
                    <el-date-picker v-model="changeSupervision.collTime" disabled 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-table border :data="pictureArray" style="width: 100%;margin: 0 auto;">
                                        <el-table-column header-align="center" align="center" label="图片">
                                            <template slot-scope="scope">
                                                <img style="width:35%;height:35%" :src="`${hostUrl}/${scope.row.filePath}`" alt>
                                            </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-row style="text-align:right;">
                      <el-button
                        :v-if="!addPicPanel?addPicPanel:addPicPanel"
                        size="mini"
                        type="text"
                        :icon="!addPicPanel?'el-icon-circle-plus-outline':'el-icon-circle-close-outline'"
                        @click="addPic"
                      >{{!addPicPanel?"添加":"取消"}}</el-button>
                    </el-row>
                    <el-row v-if="addPicPanel">
                      <upload
                        ref="uploadFile"
                        :url="`/pdcApi/file/insert?bizId=`"
                        @uploadOver="removeNewSupervision"
                      ></upload>
                    </el-row>
                    <el-row>
                      <div style="overflow-y:auto;overflow-x:hidden;max-height:30vh;padding:10px;">
                        <div class="upload-container">
                          <div
                            v-for="(item, index) in pictureArray"
                            :key="index"
                            class="image-preview image-app-preview"
                          >
                            <div class="image-preview-wrapper">
                              <img :src="`${hostUrl}/${item.filePath}`">
                              <div class="image-preview-action">
                                <i @click="removeFile(item.id)" class="el-icon-delete"></i>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-row>
                  </el-tab-pane>
                  <el-tab-pane :label="audiotabName">
                    <el-table border :data="audioArray" style="width: 100%;margin: 0 auto;">
                      <el-table-column header-align="center" align="center" label="音频">
                        <template slot-scope="scope">
                          <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"
              >保存</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 :disabled="true"></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" :disabled="true" clearable></el-input> -->
                  </el-form-item>
                  <el-form-item label="行政县名称" prop="nm">
                    <el-input v-model="changeSupervision.nm" clearable :disabled="true"></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="督查对象类型" prop="objType">
                                    <el-select v-model="changeSupervision.objType" placeholder="请选择" :disabled="true">
                                        <el-option v-for="item in supervisionTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                  </el-form-item>-->
                  <!-- <el-form-item label="问题程度" prop="inspPblmCate">
                                    <el-select v-model="changeSupervision.inspPblmCate" placeholder="请选择">
                                        <el-option v-for="item in supervisionState" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="问题状态" prop="pblmStat">
                                    <el-select v-model="changeSupervision.pblmStat" placeholder="请选择">
                                        <el-option v-for="item in supervisionStateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                  </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="严重程度:">
                                    <el-radio v-model="changeSupervision.inspPblmCate" label="0">一般</el-radio>
                                    <el-radio v-model="changeSupervision.inspPblmCate" label="1">较重</el-radio>
                                    <el-radio v-model="changeSupervision.inspPblmCate" label="2">严重</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-input 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="inspPblmOrgName">
                                    <el-input resize="none" type="input" :rows="3" placeholder="请输入" v-model.trim="changeSupervision.inspPblmOrgName"></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-item label="开始日期" prop="startTime">
                                    <el-date-picker value-format="yyyy-MM-dd" v-model="changeSupervision.startTime" type="date" placeholder="选择日期"></el-date-picker>
                                </el-form-item>
                                <el-form-item label="结束日期" prop="endTime">
                                    <el-date-picker value-format="yyyy-MM-dd" v-model="changeSupervision.endTime" type="date" placeholder="选择日期"></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-table border :data="pictureArray" style="width: 100%;margin: 0 auto;">
                      <el-table-column header-align="center" align="center" label="图片">
                        <template slot-scope="scope">
                          <img
                            style="width:35%;"
                            :src="`${hostUrl}/${scope.row.filePath}`"
                            alt
                          >
                        </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-row  style="text-align:right;">
                      <el-button :v-if="!addPicPanel?addPicPanel:addPicPanel"
                                 size="mini"
                                 type="text"
                                 :icon="!addPicPanel?'el-icon-circle-plus-outline':'el-icon-circle-close-outline'"
                                 @click="addPic"
                      >{{!addPicPanel?"添加":"取消"}}</el-button>
                    </el-row>
                    <el-row v-if="addPicPanel">
                      <upload ref="uploadFile" :url="`/pdcApi/file/insert?bizId=`" @uploadOver="removeNewSupervision"></upload>
                    </el-row>
                    <el-row>
                      <div style="overflow-y:auto;overflow-x:hidden;max-height:30vh;padding:10px;">
                        <div class="upload-container">
                          <div
                            v-for="(item, index) in pictureArray"
                            :key="index"
                            class="image-preview image-app-preview"
                          >
                            <div class="image-preview-wrapper">
                              <img :src="`${hostUrl}/${item.filePath}`">
                              <div class="image-preview-action">
                                <i @click="removeFile(item.id)" class="el-icon-delete"></i>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-row>
                  </el-tab-pane>
                  <el-tab-pane :label="audiotabName">
                    <el-table border :data="audioArray" style="width: 100%;margin: 0 auto;">
                      <el-table-column header-align="center" align="center" label="音频">
                        <template slot-scope="scope">
                          <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>
              <!-- <upload ref="changeUploadFile" :url="`/pdcApi/file/insert?bizId=`" @uploadOver="removeNewSupervision"></upload> -->
            </div>
            <span slot="footer">
              <el-button
                type="primary"
                @click="changeSupervisionInfo"
                :loading="changeSupervisionLoading"
              >保存</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="nm">
                                <el-input v-model="changeSupervision.nm" clearable></el-input>
                  </el-form-item>-->
                  <el-form-item label="类别" prop="inspPblmName">
                    <el-input v-model="changeSupervision.inspPblmName" clearable :disabled="true"></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" clearable :disabled="true"></el-input> -->
                  </el-form-item>
                  <el-form-item label="水源地名称" prop="nm">
                    <el-input v-model="changeSupervision.nm" clearable :disabled="true"></el-input>
                  </el-form-item>

                  <!-- <el-form-item label="问题程度" prop="inspPblmCate">
                                <el-select v-model="changeSupervision.inspPblmCate" placeholder="请选择">
                                    <el-option v-for="item in supervisionState" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="问题状态" prop="pblmStat">
                                <el-select v-model="changeSupervision.pblmStat" placeholder="请选择">
                                    <el-option v-for="item in supervisionStateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                  </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="严重程度:">
                                <el-radio v-model="changeSupervision.inspPblmCate" label="0">一般</el-radio>
                                <el-radio v-model="changeSupervision.inspPblmCate" label="1">较重</el-radio>
                                <el-radio v-model="changeSupervision.inspPblmCate" label="2">严重</el-radio>
                  </el-form-item>-->
                  <!-- <el-form-item label="问题地址" prop="inspAddDesc">

                                <el-input v-model="changeSupervision.inspAddDesc" clearable></el-input>
                  </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-table border :data="pictureArray" style="width: 100%;margin: 0 auto;">
                      <el-table-column header-align="center" align="center" label="图片">
                        <template slot-scope="scope">
                          <img
                            style="width:35%;"
                            :src="`${hostUrl}/${scope.row.filePath}`"
                            alt
                          >
                        </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-row  style="text-align:right;">
                      <el-button :v-if="!addPicPanel?addPicPanel:addPicPanel"
                                 size="mini"
                                 type="text"
                                 :icon="!addPicPanel?'el-icon-circle-plus-outline':'el-icon-circle-close-outline'"
                                 @click="addPic"
                      >{{!addPicPanel?"添加":"取消"}}</el-button>
                    </el-row>
                    <el-row v-if="addPicPanel">
                      <upload ref="uploadFile" :url="`/pdcApi/file/insert?bizId=`" @uploadOver="removeNewSupervision"></upload>
                    </el-row>
                    <el-row>
                      <div style="overflow-y:auto;overflow-x:hidden;max-height:30vh;padding:10px;">
                        <div class="upload-container">
                          <div
                            v-for="(item, index) in pictureArray"
                            :key="index"
                            class="image-preview image-app-preview"
                          >
                            <div class="image-preview-wrapper">
                              <img :src="`${hostUrl}/${item.filePath}`">
                              <div class="image-preview-action">
                                <i @click="removeFile(item.id)" class="el-icon-delete"></i>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-row>
                  </el-tab-pane>
                  <el-tab-pane :label="audiotabName">
                    <el-table border :data="audioArray" style="width: 100%;margin: 0 auto;">
                      <el-table-column header-align="center" align="center" label="音频">
                        <template slot-scope="scope">
                          <elaudio
                            style="margin-left:15%;width:100px;height:30px;"
                            :theUrl="`${hostUrl}/${scope.row.filePath}`"
                          ></elaudio>
                          <!-- <span>{{scope.row.fileTitle}}</span> -->
                        </template>
                      </el-table-column>
                      <el-table-column header-align="center" align="center" label="操作">
                        <template slot-scope="scope">
                          <el-button
                            size="mini"
                            @click="removeFile(scope.row.id,scope.$index)"
                            type="danger"
                          >删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane :label="videotabName">
                    <el-table border :data="videoArray" style="width: 100%;margin: 0 auto;">
                      <el-table-column header-align="center" align="center" label="视频">
                        <template slot-scope="scope">
                          <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>
              <!-- <upload ref="changeUploadFile" :url="`/pdcApi/file/insert?bizId=`" @uploadOver="removeNewSupervision"></upload> -->
            </div>
            <span slot="footer">
              <el-button
                type="primary"
                @click="changeSupervisionInfo"
                :loading="changeSupervisionLoading"
              >保存</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-main>
    </el-container>
  </div>
</template>

<script>
  import {
    findPageInfoRenYin,
    getTypeInfo,
    getShuiKuWenTi,
    findPageInfo,
    getRYProblemNew,
    removeSupervise,
    showDetailsXq,
    submitUpload,
    creatSupervise,
    getSupervisdByID,
    deleteFileById,
    updatelist,
    getEngId
  } from "../../api/duChaAPI.js";
  import request from "../../utils/gw_ajax_request.js";
  import { hostUrl } from "@util/global_variable.js";
  import elaudio from "../../widgets/elAudioShort.vue";
  import inuptWithDuChaTreeNode from "../../widgets/inuptWithDuChaTreeNode.vue";
  import inputWidthDuChaNodes from "../../widgets/inputWithDuChaNodes.vue";
  import inputWidthDuChaShuiKu from "../../widgets/inputWith_sk.vue";
  export default {
    props: ["codeId"],
    components: {
      upload: resolve => {
        require(["../../widgets/uploadFile.vue"], resolve);
      },
      //详情页
      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 {
        tableHeight: window.innerHeight - 190,
        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"
            }
          ]
        },
        testHeight: window.innerHeight,
        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,
          inspPblmName: "",
          persId: localStorage.getItem("userid")
        },
        currentPage: 1, // 页码
        pageSize: 20, // 条数
        loading: false,
        total: 0, // 总数
        searchResult: [], // 结果
        crId: "", // 当前督查id
        // 督查详情
        userid: localStorage.getItem("userid"),
        supervisionDetailsVisible: false,
        problemDeleteVisible: false,
        supervisionDetails: {},
        pblmId: "",
        gwComFiles: [],
        curComponent: "xingzhengcun_Details",
        curDialog: "xingzhengcun",
        villPguid: "",
        shuiyuandiPguid: "",
        yinshuiPguid: "",
        pblscr: "",
        pblscrList: [
          {
            lable: "我的问题",
            value: localStorage.getItem("userid")
          }
        ],
        pblscrGroup: ""
      };
    },
    computed:{
        hostUrl(){
            return hostUrl
        }
    },
    created() {
      if (this.userId) {
        console.log("已经登录");
        this.search();
      } else {
        this.$router.push("/login");
      }
      this.getLeftTreeData();
      this.addPicPanel = false;
    },
    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
      }
    },
    methods: {
      handleCheckChange(data, checked, indeterminate) {
        let cNarray = this.$refs["jigou_tree"].getCheckedNodes();
        console.log(cNarray);
        this.treeNodeArray = cNarray;
      },
      getLeftTreeData() {
        var _self = this;
        request
          .get("/dc/organization/base/getAllNode", {
            params: {
              userId: this.userId,
              orgType: "002"
            }
          })
          .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();
        });
      },

      handleInputConfirm() {
        // let inputValue = this.inputValue;
        // if (inputValue) {
        //   this.dynamicTags.push(inputValue);
        // }
        // this.inputVisible = false;
        // this.inputValue = '';
      },
      // 操作成功反馈
      successInfo() {
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      },
      // 操作失败反馈
      failInfo(val) {
        this.$message.error(val);
      },
      // 清空选择
      toggleSelection(rows) {
        this.$refs.multipleTable.clearSelection();
      },
      // 已选择项
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      // 文件上传
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      exportExcel() {
        // this.loading = true;

        let _self = this;
        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.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.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"] = "";
            }

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

            // getXSKProblemNewExport(data).then(res => {
            //     let headers = res.headers;
            // let contentType = headers['content-type'];

            // console.log('响应头信息', headers);
            // if (!res.data) {
            //     console.error('响应异常：', res);
            //     return false;
            // } else {
            //     console.error('下载文件：', res);
            //     let d =   "\ufeff" + res.data;
            //     const blob = new Blob([d],{type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});

            //     const contentDisposition = res.headers['content-disposition'];
            //     let fileName = 'unknown';
            //     if (contentDisposition) {
            //     fileName = window.decodeURI(res.headers['content-disposition'].split('=')[1]);
            //     }
            //     console.log('文件名称：', fileName);
            //     this.downFile(blob, fileName);
            // }
            // });
          });
      },
      exportWord() {
        let _self = this;
        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.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.id)) {
                    _self.findUseOrgArray.push(orgItem.id);
                  }
                });
              } else {
                _self.findUseOrgArray.push(item.id);
              }
            });

            // var xhr = new XMLHttpRequest();
            // xhr.open('post', '/pdcApi/vill/doc', true);
            // xhr.responseType = 'blob';
            // xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
            // xhr.setRequestHeader('persId', localStorage.getItem('userid') ? localStorage.getItem('userid') : '');
            // xhr.onload = function () {
            //     if (this.status == 200) {
            //         var blob = this.response;
            //         var a = document.createElement('a');
            //         var url = window.URL.createObjectURL(blob);
            //         a.href = url;
            //         //设置文件名称
            //         a.download = '人饮督查问题详情.doc';
            //         a.click();
            //     }
            // }
            // xhr.send(JSON.stringify(data));

            //下载word文档2
            request.post('/vill/doc',data).then(res=>{
              if(res.success){
                console.log(this.response)
                var a = document.createElement('a');
                a.href = `${this.hostUrl}${res.data.downloadPath}`;
                //设置文件名称
                a.download = '人饮督查问题详情.doc';
                a.click();
                // window.open(`${this.hostUrl}${res.data.downloadPath}`)
              }else{
                _self.$mesage.error(res.message)
              }
            }).catch(res=>{
              _self.$mesage.error(res.message)
            })

            // getXSKProblemNewExport(data).then(res => {
            //     let headers = res.headers;
            // let contentType = headers['content-type'];

            // console.log('响应头信息', headers);
            // if (!res.data) {
            //     console.error('响应异常：', res);
            //     return false;
            // } else {
            //     console.error('下载文件：', res);
            //     let d =   "\ufeff" + res.data;
            //     const blob = new Blob([d],{type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});

            //     const contentDisposition = res.headers['content-disposition'];
            //     let fileName = 'unknown';
            //     if (contentDisposition) {
            //     fileName = window.decodeURI(res.headers['content-disposition'].split('=')[1]);
            //     }
            //     console.log('文件名称：', fileName);
            //     this.downFile(blob, fileName);
            // }
            // });
          });
      },
      // 查询
      search() {
        this.loading = true;
        let _self = this;

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

            _self.loading = true;
            let data = _self.findParams;
            data.startTime = this.value6[0];
            data.endTime = this.value6[1];
            data.pageNum = _self.currentPage;
            data.recPers = _self.pblscr;
            data.orgNm = _self.pblscrGroup;
            // data.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"] = "";
            }

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

          });

      },
      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();
          }
        });
      },
      // 获取engid
      // getEngIdList(val) {
      //     getEngId(val, this.userid).then(res => {
      //         console.log(res)
      //     })
      // },

      // saveNewSupervision(formName) {
      //     this.$refs.newSupFrom.validate(valid => {
      //         if (valid) {
      //             this.newSupervisionLoading = true;
      //             let data = this.newSupervision;
      //             data.recPers = localStorage.getItem('userid');
      //             data.pblmStat = "0";
      //             creatSupervise(data).then(res => {
      //                 this.newSupervisionLoading = false;
      //                 if (res.success) {
      //                     this.pblmId = res.data.pblmId;
      //                     this.gwComFiles = [];
      //                     this.pblmStat = res.data.pblmStat;
      //                     this.successInfo();
      //                     if (this.$refs.uploadFile.submitUpload(res.data.pblmId)) {
      //                         this.removeNewSupervision();
      //                     }
      //                 }
      //             });
      //         } else {
      //             console.log("error submit!!!");
      //         }
      //     });
      // },
      // updatefilelist(arg) {
      //     updatelist({
      //         pblmId: this.pblmId,
      //         gwComFiles: arg,
      //         pblmStat: this.pblmStat
      //     }).then(res => {
      //         this.removeNewSupervision()
      //     });
      // },
      // 取消
      removeNewSupervision(arg) {
        if (arg) {
          console.log(arg);
          var args = this.gwComFiles.concat(arg);
          this.updatefilelist(args);
        }
        this.search();
        this.gwComFiles = [];
        this.newSupervisionVisible = false;
        this.changeSupervisionVisible = false;
        this.newSupervision = {
          id: "",
          checkPoint: "",
          presId: localStorage.getItem("userid"),
          dataStat: "",
          nm: "",
          endTime: "",
          pblmId: "",
          objId: "",
          objType: "",
          inspGroupId: "",
          inspPblmCate: "",
          inspPblmName: "",
          inspPblmDesc: "",
          pblmLong: "",
          pblmLat: "",
          pblmStat: "",
          ifCasePblm: "",
          inspPblmOrgName: "",
          pblmPersName: "",
          reviOpin: "",
          reviConc: "",
          reviOrgGuid: "",
          collTime: "",
          recPers: "",
          note: ""
        };
        // 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.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.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({
                width: "130",
                height: "130",
                autoplay: false,
                muted: true,
                language: "en",
                playbackRates: [0.7, 1.0, 1.5, 2.0],
                sources: [
                  {
                    type: "video/mp4",
                    // mp4
                    src:  `${this.hostUrl}/${item.filePath}`,
                    // webm
                    // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                  }
                ]
              });
            }
          });

          this.picturetabName = "图片资料(" + this.pictureArray.length + ")";
          this.audiotabName = "音频资料(" + this.audioArray.length + ")";
          this.videotabName = "视频资料(" + this.videoArray.length + ")";
        });
      },
      // 提交修改信息
      changeSupervisionInfo() {
        this.changeSupervisionVisible = true;
        this.$refs.changeSupFrom.validate(valid => {
          if (valid) {
            this.changeSupervisionLoading = true;
            let data = this.changeSupervision;
            updatelist(data).then(res => {
              this.pblmId = res.data.pblmId;
              this.gwComFiles = res.data.gwComFiles;
              this.changeSupervisionLoading = false;
              if (res.success) {
                this.removeNewSupervision();
                this.successInfo();
                if (this.$refs.uploadFile.submitUpload(data.pblmId)) {
                  this.removeNewSupervision();
                  this.successInfo();
                  this.addPicPanel = false;
                  this.changeSupervisionLoading = false;
                }
              } else {
                this.failInfo();
              }
            });
          }
        });
      },
      // 时间格式化
      timestampToTime(row, column) {
        var date = new Date(row.collTime);
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : "0" + date.getMonth() + 1) + "-";
        var D =
          (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
        var h =
          (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
        var m =
          date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        return Y + M + D;
      },

      // 删除图片文件
      removeFile(id, index) {
        var _self = this;
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "返回",
          type: "warning"
        }).then(
          res => {
            if (res === "confirm") {
              deleteFileById(id, this.userId).then(res => {
                if (res.success) {
                  // this.changeSupervision.gwComFiles.splice(index, 1);
                  this.changeSupervision.gwComFiles.forEach(item => {
                    if (
                      item.fileExt == "mp3" ||
                      item.fileExt == "MP3" ||
                      item.fileExt == "m4a"
                    ) {
                      this.audiotabName.splice(index, 1);
                    } else if (
                      item.fileExt == "jpg" ||
                      item.fileExt == "JPG" ||
                      item.fileExt == "png" ||
                      item.fileExt == "PNG" ||
                      item.fileExt == "JPEG" ||
                      item.fileExt == "jpeg"
                    ) {
                      this.pictureArray.splice(index, 1);
                    } else if (item.fileExt == "mp4" || item.fileExt == "MP4") {
                      this.videoArray.splice(index, 1);
                    }
                  });
                  _self.changeSup(this.updateIdXiuGai);
                } else {
                  this.failInfo();
                }
              });
            }
          },
          res => {
            console.log("返回");
          }
        );
      },
      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
    }
  };
</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;
  }

  .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;
  }
  .pages .el-select, .pages .el-input {
    width: 100px;
  }
  #wenTiContainer_ry .el-select, #wenTiContainer_ry .el-input {
    width: 100px;
  }
  #wenTiContainer_ry .el-dialog {
    width: 72% !important;
  }
</style>