fj-dc-ui/.svn/pristine/cb/cbfde86e2918dede45422b62ee52e31b20cdd670.svn-base

<!--  -->
<template>
  <div>
    <el-dialog
      width="65%"
      :title="'督查已填报问题列表'"
      :modal="true"
      :append-to-body="true"
      :before-close="closeProblemList"
      :visible.sync="showProblemList"
    >
      <!-- 查询展示 -->
      <div class="search" style="margin-top:10px;height:49vh">
       <el-table
          border
          :height="tableHeight"
          ref="multipleTable"
          :data="searchResult"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column align="center" type="index" label="序号" min-width="25" fixed>
            <template slot-scope="scope">{{ (currentPage - 1) * pageSize + (scope.$index + 1) }}</template>
          </el-table-column>
          <!-- <el-table-column
          header-align="center"
          align="center"
          min-width="55"
          prop="inspPblmCate"
          label="程度"
          fixed
        >
          <template slot-scope="scope">
            <p style="color:#27C19F;" v-if="scope.row.inspPblmCate == 0">一般</p>
            <p style="color:#E6A23C;" v-if="scope.row.inspPblmCate == 1">较重</p>
            <p style="color:#F56C6C;" v-if="scope.row.inspPblmCate == 2">严重</p>
            <p style="color:#F56C6C;" v-if="scope.row.inspPblmCate == 3">特别严重</p>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="60"
          prop="province"
          label="省"  v-if="isXj"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="60"
          prop="city"
          :label="ownAdName"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="60"
          prop="country"
          label="县"
           v-if="isXj"
          show-overflow-tooltip
          ></el-table-column>-->
          <!-- <el-table-column
          header-align="center"
          align="center"
          min-width="100"
          prop="nm"
          label="督查水闸名称"
          show-overflow-tooltip
          ></el-table-column>-->
          <el-table-column
            header-align="center"
            align="center"
            min-width="140"
            prop="inspPblmName"
            label="问题类别"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="230"
            prop="checkPoint"
            label="检查项目"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="100"
            prop="inspPblmDesc"
            label="详细描述"
            show-overflow-tooltip
          ></el-table-column>
          <!-- <el-table-column
                header-align="center"
                align="center"
                min-width="60"
                prop="ifCasePblm"
                label="典型"
              >
                <template slot-scope="scope">
                  <p v-if="scope.row.ifCasePblm == 1">是</p>
                  <p v-if="scope.row.ifCasePblm == 0">否</p>
                </template>
          </el-table-column>-->

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

          <el-table-column
            prop="collTime"
            label="上报时间"
            :formatter="timestampToTime"
            sortable
            align="center"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column align="center" prop min-width="130" label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button icon="el-icon-view"  title="查看详情" type="text" @click="showDetails(scope.row.pblmId)"></el-button>
              <el-button
                v-if="ownPriv('manage')"
                icon="el-icon-edit"
                title="修改问题"
                type="text"
                @click="changeSup(scope.row.pblmId)"
              ></el-button>
              <el-button
                v-if="ownPriv('manage')"
                icon="el-icon-delete"
                type="text"
                 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="问题详情"
        :visible.sync="supervisionDetailsVisible"
        :append-to-body="true"
        v-if="supervisionDetailsVisible"
      >
        <supervision-details ref="xianqing" :problemId="currentProblemId" :objType="6"></supervision-details>
        <span slot="footer">
          <el-button style="margin-top:5px;" @click="supervisionDetailsVisible = false">返回</el-button>
        </span>
      </el-dialog>

      <el-dialog
        width="60%"
        :append-to-body="true"
        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" :model="changeSupervision" label-width="120px">
              <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="inspPblmsName">
                <el-input v-model="changeSupervision.inspPblmsName" clearable :disabled="true"></el-input>
              </el-form-item>

              <el-form-item label="检查项目" prop="checkPoint">
                <el-input v-model="changeSupervision.checkPoint" clearable :disabled="true"></el-input>
              </el-form-item>

              <el-form-item label="问题描述" prop="pblmDesc">
                <el-input
                  :autosize="{ minRows: 4, maxRows: 6}"
                  type="textarea"
                  v-model="changeSupervision.pblmDesc"
                  clearable
                  :disabled="true"
                ></el-input>
              </el-form-item>

              <el-form-item label="详细描述" prop="inspPblmDesc">
                <el-input
                  type="textarea"
                  :rows="2"
                  v-model="changeSupervision.inspPblmDesc"
                  clearable
                ></el-input>
              </el-form-item>

              <el-form-item label="是否为典型问题:">
                <el-select v-model="changeSupervision.ifCasePblm" clearable placeholder="请选择">
                  <el-option
                    v-for="item in supervision"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="严重程度:">
                <el-select v-model="changeSupervision.inspPblmCate" clearable placeholder="请选择">
                  <el-option
                    v-for="item in supervisionState"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <!-- <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="note">
                <el-input type="textarea" :rows="2" v-model.trim="changeSupervision.note" clearable></el-input>
                <!-- <el-input resize="none" type="input" :rows="3" placeholder="请输入" v-model.trim="changeSupervision.pblmPersName"></el-input> -->
              </el-form-item>
              <el-form-item label="上报人" prop="persName">
                <el-input
                  resize="none"
                  disabled
                  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" 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">
                <!-- <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" id="imgView">
                      <div
                        v-for="(item, index) in pictureArray"
                        :key="item"
                        class="image-preview image-app-preview"
                      >
                        <div class="image-preview-wrapper">
                          <img :src="`${hostUrl}/${item.filePath}`" />
                          <div class="image-preview-action">
                            <i @click="removeFile(item.id)" class="el-icon-delete"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-row>
              </el-tab-pane>

              <el-tab-pane :label="audiotabName">
                <el-table border :data="audioArray" style="width: 100%;margin: 0 auto;">
                  <el-table-column header-align="center" align="center" label="音频">
                    <template slot-scope="scope">
                      <elaudio
                        style="margin-left:15%;width:100px;height:30px;"
                        :theUrl="`${hostUrl}/${scope.row.filePath}`"
                      ></elaudio>
                      <!-- <span>{{scope.row.fileTitle}}</span> -->
                    </template>
                  </el-table-column>
                  <el-table-column header-align="center" align="center" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        @click="removeFile(scope.row.id,scope.$index)"
                        type="danger"
                      >删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane :label="videotabName">
                <el-table border :data="videoArray" style="width: 100%;margin: 0 auto;">
                  <el-table-column header-align="center" align="center" label="视频">
                    <template slot-scope="scope">
                      <!-- <span>{{scope.row.fileTitle}}</span> -->
                      <video-player
                        class="vjs-custom-skin"
                        ref="videoPlayer"
                        :options="scope.row"
                        :playsinline="true"
                      ></video-player>
                    </template>
                  </el-table-column>
                  <el-table-column header-align="center" align="center" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        @click="removeFile(scope.row.id,scope.$index)"
                        type="danger"
                      >删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane :label="filetabName">
                <el-table border :data="fileArray" style="width: 100%;margin: 0 auto;">
                  <el-table-column header-align="center" align="center" label="文档">
                    <template slot-scope="scope">
                      <p>
                        <a :href="`${hostUrl}/${scope.row.filePath}`" target="_blank" rel="noopener noreferrer">
                          {{scope.row.fileName}}
                        </a>
                      </p>
                    </template>
                  </el-table-column>
                  <el-table-column header-align="center" align="center" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        @click="removeFile(scope.row.id,scope.$index)"
                        type="danger"
                      >删除</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
        class="deleteDialog"
        title="问题删除描述"
        :visible.sync="problemDeleteVisible"
        :append-to-body="true"
      >
        <Problem-delete
          ref="deleteMiaoShu"
          :deleteProblemId="deleteId"
          @deleteSuccess="deleteSuccess"
        ></Problem-delete>
        <span slot="footer">
          <el-button @click="problemDeleteVisible = false">返回</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
  findPageInfoShuiKu,
  getShuiKuWenTi,
  getXSKProblemNewExport,
  findPageInfo,
  getSzwtTable,
  removeSupervise,
  showDetailsXq,
  submitUpload,
  creatSupervise,
  getSupervisdByID,
  deleteFileById,
  updatelist,
  getEngId
} from "../../api/duChaAPI.js";
import request from "../../utils/gw_ajax_request.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";
import {hostUrl} from "@util/global_variable.js";
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    //详情页
    supervisionDetails: resolve => {
      require(["../duChaWenTi/supervisionDetails_shuiku.vue"], resolve);
    },
    upload: resolve => {
      require(["../../widgets/uploadFile.vue"], resolve);
    },
    // 删除描述页
    ProblemDelete: resolve => {
      require(["../duChaWenTi/problemDelete.vue"], resolve);
    },
    elaudio: elaudio,
    inuptWithDuChaTreeNode: inuptWithDuChaTreeNode,
    inputWidthDuChaNodes: inputWidthDuChaNodes,
    inputWidthDuChaShuiKu: inputWidthDuChaShuiKu
  },
  props: ["activedName", "currentResCode", "showProblemList", "problData"],
  data() {
    //这里存放数据
    return {
      tableHeight: window.innerHeight - 450,
      supervisionState: [
        {
          value: "0",
          label: "一般"
        },
        {
          value: "1",
          label: "较重"
        },
        {
          value: "2",
          label: "严重"
        },
        {
          value: "3",
          label: "特别严重"
        }
      ],
      supervision: [
        {
          value: "1",
          label: "是"
        },
        {
          value: "0",
          label: "否"
        }
      ],
      updateIdXiuGai: "",
      pblmId: "",
      addPicPanel: false,
      supervisionDetailsVisible: false,
      currentProblemId: "",
      currentPage: 1, // 页码
      pageSize: 20,
      loading: false,
      total: 0, // 总数
      searchResult: [], // 结果
      userId: localStorage.getItem("userid"),
      pictureArray: [],
      audioArray: [],
      videoArray: [],
      fileArray: [],
      audiotabName: "",
      videotabName: "",
      filetabName:"",
      picturetabName: "",
      deleteId: "",
      playerOptions: {
        height: "120",
        autoplay: true,
        muted: true,
        language: "en",
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            type: "video/mp4",
            // mp4
            src: "http://vjs.zencdn.net/v/oceans.mp4"
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          },
          {
            type: "video/mp4",
            // mp4
            src: "http://vjs.zencdn.net/v/oceans.mp4"
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          },
          {
            type: "video/mp4",
            // mp4
            src: "http://vjs.zencdn.net/v/oceans.mp4"
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          },
          {
            type: "video/mp4",
            // mp4
            src: "http://vjs.zencdn.net/v/oceans.mp4"
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          }
        ]
      },
      changeSupervisionVisible: false,
      changeSupervisionLoading: false,
      changeSupervision: {
        nm: "",
        presId: localStorage.getItem("userid"),
        endTime: "",
        pblmId: "",
        objId: "",
        objType: "",
        inspGroupId: "",
        inspPblmName: "",
        inspPblmDesc: "",
        pblmLong: "",
        pblmLat: "",
        pblmStat: "",
        ifCasePblm: "",
        inspPblmOrgName: "",
        pblmPersName: "",
        inspPblmCate: "",
        reviOpin: "",
        reviConc: "",
        reviOrgGuid: "",
        collTime: "",
        recPers: "",
        gwComFiles: [
          {
            id: "",
            filePath: "",
            bizId: ""
          }
        ]
      },
      // 文件弹框
      fileList: [], // 当前文件列表
      flash: false,
      // 督查类型
      supervisionTypeList: [
        {
          value: "1",
          label: "小水库"
        }
      ],
      leibie: [],
      // 查询
      value6: [],
      findParams: {
        hasVedio: "",
        adCode: "",
        pblmStat: "",
        inspPblmCate: "",
        ifCasePblm: "",
        nm: "",
        rsName: "",
        adFullName: "",
        startTime: "",
        endTime: "",
        objType: 1,
        inspPblmName: "",
        persId: localStorage.getItem("userid")
      },
      currentPage: 1, // 页码
      pageSize: 20, // 条数
      loading: false,
      total: 0, // 总数
      searchResult: [], // 结果
      crId: "", // 当前督查id
      // 督查详情
      userid: localStorage.getItem("userid"),
      supervisionDetailsVisible: false,
      problemDeleteVisible: false,
      supervisionDetails: {},
      pblmId: "",
      gwComFiles: [],
      pblscr: "",
      pblscrList: [
        {
          lable: "我的问题",
          value: localStorage.getItem("userid")
        }
      ],
      pblscrGroup: ""
    };
  },
  //监听属性 类似于data概念
  computed: {
    hostUrl() {
        return hostUrl
    }
  },
  //监控data中的数据变化
  watch: {
    activedName() {
      this.search();
    },
    currentResCode(oldValue, newValue) {
      this.currentResCode = newValue;
      this.search();
    }
  },
  //方法集合

  methods: {
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.search();
    },
    // 查询
    search() {
      this.loading = true;
      let _self = this;
      let data = {};
      data["gateName"] = "";
      data["inspPblmName"] = "";
      data["objType"] = 6;
      data["persId"] = _self.userId;
      data["pageNum"] = _self.currentPage;
      data["recPers"] = _self.userId;
      data["pageSize"] = _self.pageSize;
      data["villType"] = "7";
      data["codes"] = _self.currentResCode;
      let quesId = this.problData;
      // getSzwtTable(data).then(res => {
      request
        .get(`/dc/insp/pblm/getPblmList/${quesId}/${data.objType}`)
        .then(res => {
          _self.loading = false;
          if (res.success) {
            _self.searchResult = res.data;
            //_self.total = res.data.total;
          } else {
            this.$message("暂无数据");
          }
        });
    },
    //add by lch 关闭问题列表
    closeProblemList() {
      this.showProblemList = false;
      this.$emit("dialogFormVisible", this.showProblemList);
    },
    timestampToTime(row, column) {
      var date = new Date(row.collTime);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      return Y + M + D + h + m;
    },
    // 详情弹框
    showDetails(id) {
      this.currentProblemId = id;
      this.supervisionDetailsVisible = true;
    },
    // 修改弹窗显示
    changeSup(id) {
      this.pictureArray = [];
      this.audioArray = [];
      this.videoArray = [];
      this.fileArray = [];
      this.updateIdXiuGai = id;
      var _this = this;
      showDetailsXq(this.updateIdXiuGai).then(res => {
        // if(this.usersId==)
        this.changeSupervision = res.data;
        this.changeSupervisionVisible = true;
        res.data.gwComFiles.forEach(item => {
          if (
            item.fileExt == "mp3" ||
            item.fileExt == "MP3" ||
            item.fileExt == "m4a"
          ) {
            this.audioArray.push(item);
          } else if (
            item.fileExt == "jpg" ||
            item.fileExt == "JPG" ||
            item.fileExt == "png" ||
            item.fileExt == "PNG" ||
            item.fileExt == "JPEG" ||
            item.fileExt == "jpeg"
          ) {
            this.pictureArray.push(item);
          } else if (item.fileExt == "mp4" || item.fileExt == "MP4") {
            this.videoArray.push({
              id: item.id,
              bizId: item.bizId,
              width: "130",
              height: "130",
              autoplay: false,
              muted: true,
              language: "en",
              playbackRates: [0.7, 1.0, 1.5, 2.0],
              sources: [
                {
                  type: "video/mp4",
                  // mp4
                  src:  `${this.hostUrl}/${item.filePath}`,
                  // webm
                  // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                }
              ]
            });
          }else{
              this.fileArray.push(item);
          }
        });
        _this.$nextTick(function(){
            var  ViewerDom = document.getElementById('imgView');
            var  viewer = new Viewer(ViewerDom, {})
        });
        this.picturetabName = "图片资料(" + this.pictureArray.length + ")";
        this.audiotabName = "音频资料(" + this.audioArray.length + ")";
        this.videotabName = "视频资料(" + this.videoArray.length + ")";
        this.filetabName = "其它资料(" + this.fileArray.length + ")";
      });
    },
    // 提交修改信息
    changeSupervisionInfo() {
      this.changeSupervisionVisible = true;
      this.$refs.changeSupFrom.validate(valid => {
        if (valid) {
          this.changeSupervisionLoading = true;
          let data = this.changeSupervision;
          updatelist(data).then(res => {
            this.pblmId = res.data.pblmId;
            this.gwComFiles = res.data.gwComFiles;
            if (res.success) {
              this.removeNewSupervision();
              this.successInfo();
              if (this.$refs.uploadFile.submitUpload(data.pblmId)) {
                this.removeNewSupervision();
                this.successInfo();
                this.addPicPanel = false;
                this.changeSupervisionLoading = false;
              }
            } else {
              this.failInfo();
            }
          });
        }
      });
    },
    removeNewSupervision(arg) {
      if (arg) {
        console.log(arg);
        var args = this.gwComFiles.concat(arg);
        this.updatefilelist(args);
      }
      this.search();
      this.gwComFiles = [];
      this.newSupervisionVisible = false;
      this.changeSupervisionVisible = false;
      this.newSupervision = {
        id: "",
        checkPoint: "",
        presId: localStorage.getItem("userid"),
        dataStat: "",
        nm: "",
        endTime: "",
        pblmId: "",
        objId: "",
        objType: "",
        inspGroupId: "",
        inspPblmCate: "",
        inspPblmName: "",
        inspPblmDesc: "",
        pblmLong: "",
        pblmLat: "",
        pblmStat: "",
        ifCasePblm: "",
        inspPblmOrgName: "",
        pblmPersName: "",
        inspPblmCate: "",
        reviOpin: "",
        reviConc: "",
        reviOrgGuid: "",
        collTime: "",
        recPers: "",
        note: ""
      };
      // this.$refs.uploadFile.init();
    },
    // 删除图片文件
    removeFile(id, index) {
      // this.updateIdXiuGai = this.updateIdXiuGai;
      var _self = this;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "返回",
        type: "warning"
      }).then(
        res => {
          if (res === "confirm") {
            deleteFileById(id, this.userId).then(res => {
              if (res.success) {
                // this.changeSupervision.gwComFiles.splice(index, 1);
                this.changeSupervision.gwComFiles.forEach(item => {
                  if (
                    item.fileExt == "mp3" ||
                    item.fileExt == "MP3" ||
                    item.fileExt == "m4a"
                  ) {
                    this.audiotabName.splice(index, 1);
                  } else if (
                    item.fileExt == "jpg" ||
                    item.fileExt == "JPG" ||
                    item.fileExt == "png" ||
                    item.fileExt == "PNG" ||
                    item.fileExt == "JPEG" ||
                    item.fileExt == "jpeg"
                  ) {
                    this.pictureArray.splice(index, 1);
                  } else if (item.fileExt == "mp4" || item.fileExt == "MP4") {
                    this.videoArray.splice(index, 1);
                  }
                });
                _self.changeSup(this.updateIdXiuGai);
              } else {
                this.failInfo();
              }
            });
          }
        },
        res => {
          console.log("返回");
        }
      );
    },
    // 操作成功反馈
    successInfo() {
      this.$message({
        type: "success",
        message: "操作成功!"
      });
    },
    // 操作失败反馈
    failInfo(val) {
      this.$message.error(val);
    },
    // 清空选择
    toggleSelection(rows) {
      this.$refs.multipleTable.clearSelection();
    },
    // 已选择项
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 文件上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    addPic() {
      this.addPicPanel = !this.addPicPanel;
    },
    // 删除弹窗
    removeSuperviseOne(id) {
      this.deleteId = id;
      this.problemDeleteVisible = true;
    },
    deleteSuccess() {
      this.problemDeleteVisible = false;
      this.search();
    },
    changeSupervisionVisiblefalse() {
      this.$nextTick(() => {
        if (this.flash) {
          this.flash = false;
          this.search();
        }
      });

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

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.addPicPanel = false;
    if (this.userId) {
      console.log("已经登录");
      this.search();
    } else {
      this.$router.push("/login");
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.search();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../duChaWenTi/base.css";
@import url("/src/assets/iconfont/iconfont.css");
@import url("/src/assets/css/mixin.scss");
.upload-container {
  width: 100%;
  position: relative;
  .image-uploader {
    width: 35%;
    float: left;
  }
  .image-preview {
    width: 200px;
    height: 200px;
    position: relative;
    border: 1px dashed #d9d9d9;
    float: left;
    // margin-left: 50px;
    .image-preview-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .image-preview-action {
      position: absolute;
      width: 100%;
      height: 30px;
      left: 0;
      bottom: 0;
      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: 30px;
      .el-icon-delete {
        font-size: 25px;
      }
    }
    &:hover {
      .image-preview-action {
        opacity: 1;
      }
    }
  }
  .image-app-preview {
    margin-bottom: 10px;
    width: 40vh;
    height: 180px;
    position: relative;
    border: 1px dashed #d9d9d9;
    float: left;
    // margin-left: 50px;
    .app-fake-conver {
      height: 44px;
      position: absolute;
      width: 100%; // background: rgba(0, 0, 0, .1);
      text-align: center;
      line-height: 64px;
      color: #fff;
    }
  }
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
#wenTiContainer_sk .el-tree-node {
  /* overflow: auto; */
}

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

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

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

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

.shuiku .content {
  margin: 10px;
}

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

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

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

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

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

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

.shuiku .input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>