yclw/src/views/pipelineDefect/manage/report/widget.vue

<template>
  <div class="engineering-manage" @keyup.enter="searchApi">
    <!-- 检测报告管理 -->
    <div class="table-box">
      <div class="top-tool">
        <div class="serch-engineering">
          <div class="title">关键字：</div>
          <el-input
            size="small"
            placeholder="请输入工程、地点、报告名称"
            v-model="searchValue.serchValue"
            clearable
            class="serch-input"
          >
          </el-input>
          <!-- <div class="title">检测日期：</div>
          <div class="sampleTime">
            <el-row style="display: flex; justify-content: center; align-items: center">
              <el-col :span="11">
                <el-date-picker
                  v-model="searchValue.startDate"
                  type="date"
                  placeholder="选择开始日期"
                  value-format="yyyy-MM-dd"
                  size="small"
                  :picker-options="sOpition"
                  @change="sDateChange"
                ></el-date-picker>
              </el-col>
              <el-col :span="1" style="text-align: center; margin: 0 5px">至</el-col>
              <el-col :span="12">
                <el-date-picker
                  v-model="searchValue.finishDate"
                  type="date"
                  placeholder="选择结束日期"
                  value-format="yyyy-MM-dd"
                  size="small"
                  :picker-options="eOpition"
                  @change="eDateChange"
                ></el-date-picker>
              </el-col>
            </el-row>
          </div> -->
          <div class="release-radio">
            <p class="release-title">发布状态:</p>
            <el-checkbox-group v-model="searchValue.checkList">
              <el-checkbox label="0">未发布</el-checkbox>
              <el-checkbox label="1">已发布</el-checkbox>
            </el-checkbox-group>
            <!-- <el-radio v-model="searchValue.checkList" label="0">未发布</el-radio> -->
            <!-- <el-radio v-model="searchValue.checkList" label="1">已发布</el-radio> -->
          </div>
          <el-button size="small" type="primary" @click="searchApi"> 搜索 </el-button>
          <el-button size="small" type="primary" @click="resetDate"> 重置 </el-button>
        </div>
        <div class="right-btn">
          <el-button size="small" type="primary" @click="showUpdata">报告上传</el-button>
          <!-- <el-button  type="primary" @click="dialogFormVisible2 = true">视频上传</el-button> -->
          <el-button size="small" type="primary" @click="videoShowUpdata">视频上传</el-button>
          <el-button
            size="small"
            type="primary"
            :disabled="!multipleSelection.length"
            @click="batchReleaseDialog = true"
            >批量发布</el-button
          >
          <el-button
            size="small"
            type="danger"
            :disabled="!multipleSelection.length"
            @click="removeBtn"
            >删除</el-button
          >
        </div>
      </div>
      <!-- <el-empty description="暂无数据" v-if="!tableData"></el-empty> -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        height="250"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @row-dblclick="openDetails"
        @row-click="lightFea"
        :row-style="{ height: '40px' }"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <template slot="empty">
          <img src="@/assets/icon/null.png" alt="暂无数据" />
        </template>
        <el-table-column header-align="center" :selectable="checkSelect" align="center" type="selection" width="55">
        </el-table-column>
        <el-table-column align="center" type="index" label="序号" width="50"> </el-table-column>
        <el-table-column
          :prop="v.name"
          header-align="center"
          :label="v.label"
          align="center"
          show-overflow-tooltip
          v-for="v in tableContent"
          :key="v.name"
          :sortable="v.sortable"
        >
        </el-table-column>

        <el-table-column prop="state" header-align="center" label="发布状态" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span :class="{ stateRedClass: scope.row.state == '0', stateGreenClass: scope.row.state == '1' }">{{
              scope.row.state | filter_state
            }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" header-align="center" label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              :wu="scope"
              v-if="scope.row.state == '1'"
              @click.stop="withdrawBtn(scope.row.id, true)"
              >撤回</el-button
            >
            <el-button
              type="text"
              size="small"
              :wu="scope"
              v-if="scope.row.state == '0'"
              @click.stop="testReportDetails(scope.row, true)"
              >发布</el-button
            >
            <el-button
              type="text"
              size="small"
              :wu="scope"
              style="margin-left: 10px"
              @click.stop="testReportDetails(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          :page-sizes="[10, 20, 30, 50, 100, 1000]"
          :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paginationTotal"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 批量发布 -->
    <div class="delete-box">
      <!-- 删除提示框 -->
      <el-dialog title="提示" :visible.sync="batchReleaseDialog" width="30%" :modal='false'>
        <div style="display: flex; align-items: center">
          <!-- <i class="el-icon-info" style="color: #e6a23c"></i> -->
          <span class="iconfont icondtbz" style="font-size: 22px; color: #e6a23c"></span>
          &nbsp; 确认要发布选中的{{ multipleSelection.length }}条检测报告吗?
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="batchReleaseDialog = false">取 消</el-button>
          <el-button size="small" type="primary" @click="confirmRelease">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 报告上传 -->
    <div class="public-box">
      <el-dialog title="检测报告上传" @close="closeDialogDocx" :visible.sync="dialogFormVisible" :modal='false'>
        <el-form ref="formDocx" :model="form" :rules="rules">
          <el-form-item label="工程名称" :label-width="formLabelWidth" prop="name">
            <el-select
              clearable
              v-model="form.name"
              placeholder="请选择工程名称"
              v-selectLoadMore="selectLoadMore"
              @blur="initSelectDate"
              filterable
              :disabled="loadingBool"
            >
              <el-option v-for="(item, i) in selectArr" :key="i" :label="item.name" :value="item.No"> </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="检测报告" :label-width="formLabelWidth" class="hd-input" prop="report">
            <!-- action="http://192.168.2.78:1111/psjc/pipeState/pipeStateUpload" -->
            <el-upload
              :on-change="getFile"
              ref="updataDocx"
              class="upload-demo"
              :headers="uploadHeaders"
              :action="getBaseAddress"
              accept=".doc,.docx"
              :data="getData"
              multiple
              :show-file-list="false"
              :before-upload="checkState"
              :on-success="handleAvatarSuccess"
              :before-remove="beforeRemove"
              :on-progress="beforeUpload"
              :on-exceed="handleExceed"
              :file-list="fileList"
              :auto-upload="false"
            >
              <div class="btn-box">
                <el-button size="small" type="primary" :disabled="loadingBool">选择报告</el-button>
                <span class="btns">
                  <el-button size="small" @click.stop="hideUpdataDocx">取 消</el-button>
                  <el-button
                    size="small"
                    type="primary"
                    :icon="isLoading"
                    @click.stop="uploadWord"
                    :disabled="this.loadingBool || !this.fileList.length"
                    >确 定</el-button
                  >
                </span>
              </div>
              <div slot="tip" class="el-upload__tip">
                <p style="line-height: 17px">只能上传docx/doc文件</p>
                <el-table
                  ref="singleTable"
                  :data="upDataTable"
                  stripe
                  highlight-current-row
                  style="width: 100%"
                  height="250"
                >
                  <template slot="empty">
                    <img src="@/assets/icon/null.png" alt="暂无数据" />
                  </template>

                  <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
                  <el-table-column property="name" label="报告名称" show-overflow-tooltip align="center">
                  </el-table-column>
                  <el-table-column property="size" label="报告大小" align="center" width="80"> </el-table-column>
                  <el-table-column property="status" label="上传进度" align="center" width="80">
                    <!-- filter_schedule -->
                    <template slot-scope="scope">
                      <p
                        :class="{
                          'font-green': scope.row.status == 'success',
                          'font-blue': scope.row.status == 'uploading',
                          'font-red': scope.row.status == 'error'
                        }"
                      >
                        {{ scope.row.status | filter_schedule }}
                      </p>
                    </template>
                  </el-table-column>
                  <el-table-column show-overflow-tooltip property="result" label="上传结果" align="center" width="80"></el-table-column>
                </el-table>
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <!-- 视频上传 -->
    <div class="public-box">
      <el-dialog title="附件视频上传" @close="closeDialogVideo" :visible.sync="dialogFormVisible2" :modal='false'>
        <el-form ref="formVideo" :model="form" :rules="rules">
          <!-- <el-input size="small" v-model="selectWord.name" disabled show-word-limit></el-input> -->
          <el-form-item label="工程名称" :label-width="formLabelWidth" prop="name">
            <el-select
              clearable
              v-model="form.name"
              placeholder="请选择工程名称"
              v-selectLoadMore="selectLoadMore"
              @blur="initSelectDate"
              filterable
              :disabled="loadingBool"
            >
              <el-option v-for="(item, i) in selectArr" :key="i" :label="item.name" :value="item.No"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检测视频" :label-width="formLabelWidth" class="hd-input" prop="report">
            <!-- action="http://192.168.2.78:1111/psjc/pipeState/pipeStateUpload" -->
            <el-upload
              :on-change="getvideoFile"
              :show-file-list="false"
              ref="updataVideo"
              class="upload-demo"
              :headers="uploadHeaders"
              :action="getBaseAddress"
              accept=".mp4"
              :data="getVideoData"
              multiple
              :before-upload="checkState"
              :on-success="handleAvatarSuccessVideo"
              :before-remove="beforeRemove"
              :on-progress="beforeUpload"
              :on-exceed="handleExceed"
              :file-list="vdieofileList"
              :auto-upload="false"
            >
              <div class="btn-box">
                <el-button size="small" type="primary" :disabled="loadingBool">选择视频</el-button>
                <span class="btns">
                  <el-button size="small" @click.stop="hideUpdataDocx">取 消</el-button>
                  <el-button
                    size="small"
                    type="primary"
                    :icon="isLoading"
                    @click.stop="uploadVideoWord"
                    :disabled="this.loadingBool || !this.vdieofileList.length"
                    >确 定</el-button
                  >
                </span>
              </div>

              <div slot="tip" class="el-upload__tip">
                <p style="line-height: 17px">只能上传mp4文件</p>
                <el-table
                  ref="singleTable"
                  :data="upDataTable"
                  stripe
                  highlight-current-row
                  style="width: 100%"
                  height="250"
                >
                  <template slot="empty">
        <img src="@/assets/icon/null.png" alt="暂无数据" />
                  </template>
                  <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
                  <el-table-column property="name" label="视频名称" show-overflow-tooltip align="center">
                  </el-table-column>
                  <el-table-column property="size" label="视频大小" align="center" width="80"> </el-table-column>
                  <el-table-column property="status" label="上传进度" align="center" width="80">
                    <!-- filter_schedule -->
                    <template slot-scope="scope">
                      <p
                        :class="{
                          'font-green': scope.row.status == 'success',
                          'font-blue': scope.row.status == 'uploading',
                          'font-red': scope.row.status == 'error'
                        }"
                      >
                        {{ scope.row.status | filter_schedule }}
                      </p>
                    </template>
                  </el-table-column>
                  <el-table-column show-overflow-tooltip property="result" label="上传结果" align="center" width="80"></el-table-column>
                </el-table>
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <!-- 发布 -->
    <div class="public-box release-box">
      <el-dialog
        :title="setTitle"
        :visible.sync="dialogFormVisible3"
        @open="openRelease"
        @close="closeRelease"
        :fullscreen="true"
        :modal='false'
      >
        <div class="releaseTop-box">
          <!-- 左边部分 -->
          <div class="left">
            <el-tabs v-model="activeLeft" @tab-click="handleClick">
              <el-tab-pane label="统计汇总" name="first">
                <div class="releaseContent">
                  <div class="detailsTitle">主要工程量表</div>
                  <project-form :paramId="id" v-if="isOpen"></project-form>
                  <div class="detailsTitle">管道缺陷数量统计表</div>
                  <summary-form :tabelData="returnTabel" v-if="isOpen"></summary-form>
                  <div class="detailsTitle">管道缺陷数量统计图</div>
                  <div id="statistics_echatrs" style="width: 600px; display: flex; height: 600px"></div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="管道缺陷" name="third">
                <div class="releaseContent">
                  <div class="detailsTitle">管道缺陷汇总一览表</div>
                  <defect-one :paramId="id"></defect-one>
                </div>
              </el-tab-pane>
              <el-tab-pane label="管段状态评估" name="fourth">
                <div class="releaseContent">
                  <div class="detailsTitle">管段状况评估表</div>
                  <assessment v-if="isOpen" :paramId="id"></assessment>
                  <div class="detailsTitle">检测评估建议</div>
                  <proposal v-if="isOpen" :paramId="id"></proposal>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <!-- 右边部分 -->
          <div class="right">
            <el-tabs v-model="activeRight" @tab-click="handleClick">
              <!-- <el-tab-pane label="原始检测报告" name="one">
                <div class="releaseContent">
                  <pdf-see :pdfUrl="pdfUrl"></pdf-see>
                </div>
              </el-tab-pane> -->
              <el-tab-pane label="数据地图" name="two">
                <!-- 数据地图 -->
                <div class="map-box">
                  <simple-map @afterLoad="afterMapLoad" ref="myMap"></simple-map>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <div style="justify-content: space-between; display: flex; align-items: center">
            <div style="display: flex; align-items: center; flex: 1">
              <span>备注：</span>
              <el-input
                size="small"
                style="flex: 1; padding-right: 40px"
                type="textarea"
                :rows="2"
                placeholder="请输入备注"
                :disabled="!isRelease"
                resize="none"
                v-model="remark"
                v-if="isRelease"
              >
              </el-input>
              <p v-if="!isRelease">{{ remark }}</p>
            </div>
            <div>
              <el-button size="small" type="primary" v-if="isRelease" @click="oneReleaseBtn">发 布</el-button>
              <el-button size="small" v-if="isRelease" @click="dialogFormVisible3 = false">取 消</el-button>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 删除提示框 -->
    <div class="delete-box">
      <!-- 删除提示框 -->
      <el-dialog title="提示" :visible.sync="deleteDialogVisible" width="30%" :modal='false'>
        <div style="display: flex; align-items: center">
          <!-- <i class="el-icon-info" style="color: #e6a23c"></i> -->
          <span class="iconfont icondtbz" style="font-size: 22px; color: #e6a23c"></span>
          &nbsp; 确认删除选中的{{ multipleSelection.length }}条检测报告吗?
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="deleteDialogVisible = false">取 消</el-button>
          <el-button size="small" type="primary" @click="removeDatas">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 撤回提示框 -->
    <div class="delete-box">
      <!-- 撤回提示框 -->
      <el-dialog title="提示" :visible.sync="withdrawDialogVisible" width="30%" :modal='false'>
        <div style="display: flex; align-items: center">
          <!-- <i class="el-icon-info" style="color: #e6a23c"></i> -->
          <span class="iconfont icondtbz" style="font-size: 22px; color: #e6a23c"></span>
          &nbsp; 确定要撤回这条检测报告吗?
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="withdrawDialogVisible = false">取 消</el-button>
          <el-button size="small" type="primary" @click="isWithdraw">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  queryPageTestReportNew,
  deleteIdData,
  deleteTestReport,
  projectPagingQuery,
  batchRelease,
  withdrawReport,
  queryPipecheckDetails,
  queryDictionariesId,
  oneRelease,
  queryProjectDetails,
  queryDefectFormDetails,
  queryPipeStateDetails,
  queryPipeState,
  queryDefectdetails,
  histroyPipeData,
  getDefectDataById, 
  getDefectData, 
  getDefectDataBySE 
} from '@/views/pipelineDefect/api/pipelineDefect'

// 引入预览pdf插件
import pdfSee from '../../components/OpenPdf.vue'
// 引入管道检测组件
import checkDialog from '../../components/checkDetails.vue'

// 引入公共ip地址
// import { baseAddress } from '@/utils/request.ts'
import { baseAddress } from '@/utils/request'

// 引入发布的组件
import summaryForm from '../../components/summaryForm.vue'
import projectForm from './components/project'
import inspectForm from './components/inspect'
import defectOne from './components/defectOne'
import assessment from './components/assessment'
import proposal from './components/proposal'

import simpleMap from '@/views/pipelineDefect/components/simpleMap.vue'

import * as echarts from 'echarts'
import { appconfig } from 'staticPub/config'
import { mapMixin } from '@/views/pipelineDefect/mixin/map'
import CesiumUtil from '../../common/cesiumUtil'

export default {
  props: ['data'],
  mixins: [mapMixin],
  components: {
    summaryForm,
    projectForm,
    inspectForm,
    defectOne,
    assessment,
    proposal,
    pdfSee,
    simpleMap,
    oneRelease,
    checkDialog
  },
  data() {
    return {
      initdefectQuantityStatisticsA: [],
      initdefectQuantityStatisticsB: [],
      isOpen: false, // 打开详情弹框时触发
      DetailsId: null, // 检测详情的id
      DetailsForm: {}, // 管道缺陷缩略框
      imgArrIndex: 0, // 缩略框照片索引
      pipDialogFormVisible: false, // 详情弹框显影
      lastFileList: [], //上次上次的文件列表
      fullscreenLoading: false, // 加载
      remark: '', // 备注
      pdfUrl: '', // pdf地址
      activeName: 'picnum', // 照片视频tab标签
      activeNameEV: 'picnum', // 照片视频tab标签
      currentForm: [], // 缩略提示框
      currentIndex: 0, // 当前页数
      // 评估
      currentInfoCard: false, // 弹出框
      currentInfoCard2: false, // 弹出框
      deleteDialogVisible: false, // 删除提示框显影
      withdrawDialogVisible: false, // 撤回提示框显影
      // 数据为空时的图片
      // 上传文件表格
      upDataTable: [],

      updataParamsId: {
        itemId: '',
        uploadFileTypeDicId: '',
        uploadItemDictId: ''
      }, // 上传视频需要的参数id
      id: '', // 发布时的id
      isRelease: false, // 判断是否从发布按钮进入详情
      defectSumObj: { oneSum: 0, twoSum: 0, threeSum: 0, fourSum: 0, total: 0 }, // 合计
      defectQuantityStatisticsA: [
        { title: '(AJ)支管暗接', type: 'AJ', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: '/', value: 0 },
        { title: '(BX)变形', type: 'BX', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
        { title: '(CK)错口', type: 'CK', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
        { title: '(CR)异物穿入', type: 'CR', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: '/', value: 0 },
        { title: '(FS)腐蚀', type: 'FS', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: '/', value: 0 },
        { title: '(PL)破裂', type: 'PL', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
        { title: '(QF)起伏', type: 'QF', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
        { title: '(SL)渗透', type: 'SL', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
        { title: '(TJ)脱节', type: 'TJ', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
        { title: '(TL)接口材料脱落', type: 'TL', oneValue: 0, twoValue: 0, threeValue: '/', fourValue: '/', value: 0 }
      ], // 管道缺陷数量统计表
      defectQuantityStatisticsB: [
        { title: '(CJ)沉积', type: 'CJ', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
        { title: '(CQ)残墙、坝根', type: 'CQ', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
        { title: '(FZ)浮渣', type: 'FZ', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: '/', value: 0 },
        { title: '(JG)结垢', type: 'JG', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
        { title: '(SG)树根', type: 'SG', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
        { title: '(ZW)障碍物', type: 'ZW', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 }
      ],
      batchReleaseDialog: false, // 批量发布弹框
      // 选择框分页参数
      selectParm: { current: 1, size: 30 },
      selectLoadTotal: 0, // 选择框总页数
      selectArr: [], // 选择工程数组(报告上传)
      videoSelectArr: [], // 选择工程数组(视频上传)
      tableData: [
        { wordInfoName: '1' }
      ],
      // 表格参数
      tableContent: [
        { sortable: false, label: '检测报告名称', name: 'wordInfoName' },
        { sortable: true, label: '检测段数', name: 'jcnum' },
        { sortable: true, label: '检测长度(m)', name: 'jclength' },
        { sortable: false, label: '工程名称', name: 'prjName' },
        { sortable: false, label: '工程地点', name: 'address' },
        { sortable: false, label: '检测单位', name: 'sgunit' },
        // { sortable: true, label: '检测日期', name: 'jcDate' },
        { sortable: false, label: '入库人', name: 'createUserName' },
        { sortable: true, label: '入库时间', name: 'createTime' }
      ],
      // 日期选择器规则
      sOpition: {
        disabledDate: (time) => {
          time = time.getTime()
          if (this.searchValue.finishDate) {
            return time > new Date(this.searchValue.finishDate).getTime()
          }
          return time > new Date().getTime()
        }
      },
      eOpition: {
        disabledDate: (time) => {
          time = time.getTime()
          if (this.searchValue.startDate) {
            return time < new Date(this.searchValue.startDate).getTime() - 8.64e7 || time > new Date().getTime()
          }
          return time > new Date().getTime()
        }
      },
      // 搜索功能参数
      searchValue: {
        startDate: '',
        finishDate: '',
        checkList: [], // 发布状态
        serchValue: '' // 搜索关键字
      },
      // 上传需要的数据
      fileList: [],
      vdieofileList: [],
      UpdataList: '', // 上传文件携带的参数
      updataDialog: false, // 上传对话框
      uploadHeaders: {
        Authorization: 'bearer ' + sessionStorage.getItem('token')
      }, // token值
      activeLeft: 'first', // 发布默认激活的导航（左）
      activeRight: 'two', // 发布默认激活的导航（右）
      multipleSelection: [], // 被选中的表格数据
      // 分页需要的值
      pagination: { current: 1, size: 30 }, // 分页参数信息
      paginationTotal: 0, // 总页数
      // ------------
      radio: '',

      //  报告上传数据
      rules: {
        name: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
        report: [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      // 报告上传
      dialogFormVisible: false,
      // 视频上传
      dialogFormVisible2: false,
      // 报告发布
      dialogFormVisible3: false,
      form: {
        name: '',
        report: '1'
      },
      formLabelWidth: '84px',
      loadingBool: false, // 加载按钮显隐

      //
      showId: 0,
      projUtil: null, // 坐标系工具
      currentDataProjName: appconfig.currPRJ, // 当前坐标系
      // 
      vectorLayer: null,
      vectorLayer2: null,
      hasLoadMap: false,
      map: null,
      clickEvent: null,
      themLayerName: 'pipeAndDefectLayer'
    }
  },
  watch: {
  },
  computed: {
    // ------>
    // 设置发布标题
    setTitle() {
      return this.isRelease ? '检测报告发布' : '检测报告详情'
    },
    // 统计饼图数据信息
    defectTotal() {
      let arr = this.defectQuantityStatisticsA.concat(this.defectQuantityStatisticsB)
      let newArr = arr.map((v) => {
        if (!v.value) {
          return { label: { show: false } }
        } else {
          return { value: v.value, title: v.title }
        }
      })
      return newArr
    },

    returnTabel() {
      let obj = {
        defectQuantityStatisticsA: this.defectQuantityStatisticsA,
        defectQuantityStatisticsB: this.defectQuantityStatisticsB,
        defectSumObj: this.defectSumObj
      }
      return obj
    },
    // 加载按钮
    isLoading() {
      return this.loadingBool ? 'el-icon-loading' : ''
    },
    // 动态设置上传地址
    getBaseAddress() {
      return baseAddress + '/psjc/sysUploadFile/uploadFile'
    },
    // 动态设置上传携带参数
    getData() {
      return this.updataParamsId
    },
    getVideoData() {
      return this.updataParamsId
    }
  },
  mounted() {
    this.upDateTable()
  },
  destroyed() {
  },
  methods: {
    getThemLayer () {
      return this.map.getLayers().getArray().find(layer => layer.get('layername') === this.themLayerName)
    },

    sDateChange(t) {
      if (!this.searchValue.finishDate) {
        this.$nextTick(() => {
          this.searchValue.finishDate = this.searchValue.startDate
        })
      }
    },
    eDateChange(t) {
      if (!this.searchValue.startDate) {
        this.$nextTick(() => {
          this.searchValue.startDate = this.searchValue.finishDate
        })
      }
    },
    // 绘制统计饼图
    renderEcharts() {
      let chartDom = document.getElementById('statistics_echatrs')
      let myChart = echarts.init(chartDom)
      let option
      option = {
        tooltip: {
          trigger: 'item',
          formatter: function (a) {
            return `${a['data']['title']} 数量 ${a['data']['value']} `
          }
        },

        color: [
          'red',
          'orange',
          'yellow',
          'green',
          'blue',
          'indigo',
          'purple',
          '#ff7f50',
          '#87cefa',
          '#da70d6',
          '#32cd32',
          '#6495ed',
          '#ff69b4',
          '#ba55d3',
          '#cd5c5c',
          '#ffa500',
          '#40e0d0',
          '#1e90ff',
          '#ff6347',
          '#7b68ee',
          '#00fa9a',
          '#ffd700',
          '#6699FF',
          '#ff6666',
          '#3cb371',
          '#b8860b',
          '#30e0e0'
        ],
        series: [
          {
            name: '管道缺陷数量统计图',
            type: 'pie',
            radius: '50%',
            data: this.defectTotal || [],
            label: {
              formatter: function (a) {
                return `${a['data']['title']} ${a['percent'].toFixed(1) + '%'} `
              },
              backgroundColor: '#F6F8FC',
              borderWidth: 1,
              borderRadius: 4
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      option && myChart.setOption(option)
    },

    // 双击打开详情或发布
    openDetails(row, column) {
      if (row.state == '1') {
        this.testReportDetails(row)
      } else {
        this.testReportDetails(row, true)
      }
    },

    clearAll() {
      this.popup && this.popup.setPosition(null)
      this.currentInfoCard = false
      this.currentInfoCard2 = false
      this.lightLayer && this.map.removeLayer(this.lightLayer)
      this.$refs.myMap && this.vectorLayer2 && this.$refs.myMap.map.removeLayer(this.vectorLayer2)
      this.clickEvent && unByKey(this.clickEvent)
      this.lightLayer = this.vectorLayer2 = this.clickEvent = null
    },
    // 根据状态设置每列表格样式
    modality(obj) {
      // 通过id标识来改变当前行的文字颜色
      let idArr
      if (this.multipleSelection != []) {
        idArr = this.multipleSelection.map((v) => v.id)
      }
      if (idArr.some((v) => v == obj.row.id)) {
        return 'rowBgBlue'
      }
    },
    lightFea(row) {
      console.log('高亮')
      this.setViewFromFeas(row.id, 2)
    },
    /**
     * 小地图完成加载后
     * */
    afterMapLoad() {
      this.setSimpleMap(this.id)
      this.hasLoadMap = true
      this.$refs.myMap.showLegend('testReport', true)
    },
    /**
     * 添加、更新地图管道缺陷
     * */
    setMainMap () {
      this.removeCesiumGraphics()
      this.initDefectMap()
    },
    /**
     * 构造管道缺陷地图要素
     * @param reportInfos 报告数据
     * */
    getReportFeatures (defectInfos, hasStyle) {
      let style = null, features = { pipeDefectFeatures: [], funcDefectFeatures: [], strucDefectFeatures: [], normal: [] }
      if (defectInfos.length === 0) { return features }
      defectInfos.forEach(defect => {
        let { startPointXLocation, startPointYLocation, endPointXLocation, endPointYLocation } = defect
        if (startPointXLocation && startPointYLocation && endPointXLocation && endPointYLocation) {
          let startPoint = [Number(startPointXLocation), Number(startPointYLocation)]
          let endPoint = [Number(endPointXLocation), Number(endPointYLocation)]
          startPoint = this.projUtil.transform(startPoint, this.currentDataProjName, 'proj84')
          endPoint = this.projUtil.transform(endPoint, this.currentDataProjName, 'proj84')
          let lineCoors = [startPoint, endPoint]
          let feature = new Feature({ geometry: new LineString(lineCoors) })
          // 健康等级颜色
            let colors = [
              { level: 'Ⅰ', color: 'green' },
              { level: 'Ⅱ', color: 'blue' },
              { level: 'Ⅲ', color: 'pink' },
              { level: 'Ⅳ', color: 'red' }
            ]
            let findFuncColor = colors.find(colorObj => defect['funcClass'] && defect['funcClass'].includes(colorObj.level))
            let findStrucColor = colors.find(colorObj => defect['structClass'] && defect['structClass'].includes(colorObj.level))
              // 功能性缺陷
            if (!isExit(defect.expNo, 'funcDefectFeatures')) {
              let fFea = feature.clone()
              let fColor = findFuncColor ? findFuncColor.color : "#070358"
              hasStyle && fFea.setStyle(comSymbol.getLineStyle(5, fColor))
              for (let i in defect) {
                i !== 'geometry' && fFea.set(i, defect[i])
              }
              features.funcDefectFeatures.push(fFea)
            }
              // 结构性缺陷
            if (!isExit(defect.expNo, 'strucDefectFeatures')) {
              let sFea = feature.clone()
              let sColor = findStrucColor ? findStrucColor.color : "#070358"
              hasStyle && sFea.setStyle(comSymbol.getLineStyle(5, sColor))
              for (let i in defect) {
                i !== 'geometry' && sFea.set(i, defect[i])
              }
              features.strucDefectFeatures.push(sFea)
            }
            // 缺陷点
            if (defect.geometry) {
              let coors = JSON.parse(defect.geometry)
              let point = this.projUtil.transform([coors.x, coors.y], this.currentDataProjName, 'proj84')
              let feature = new Feature({ geometry: new Point(point) })
              let imgs = [
                { level: ['一级', '1'], img: defectImg1, index: 0 },
                { level: ['二级', '2'], img: defectImg2, index: 1 },
                { level: ['三级', '3'], img: defectImg3, index: 2 },
                { level: ['四级', '4'], img: defectImg4, index: 3 },
                // { level: '/', img: defectImg0, index: 4 }
              ]
              let findimg = null
              if (defect.defectLevel) {
                findimg = imgs.find((colorObj) => colorObj.level.includes(defect['defectLevel']))
              }
              // 缺少 defectLevel 字段
              if (findimg) {
                let rotation = getIconRat(lineCoors)
                hasStyle && feature.setStyle( new Style({ image: new Icon({ size: [48, 48], anchor: [0.5, 0], src: findimg.img, scale: 0.4, rotation }) }) )
                for (let i in defect) {
                  i !== 'geometry' && feature.set(i, defect[i])
                }
                features.pipeDefectFeatures.push(feature)
              }
            }

        }
      })
      return features
      function isExit(pipeId, feasType) {
        return features[feasType].some(fea => fea.get('expNo') === pipeId)
      }
      function getIconRat([startPoint, endPoint]) {
        let rotation = 0
        // 因为要垂直管线显示，所以图片旋转 90°
        let imgRt = Math.PI / 2

        // 计算旋转弧度
        if (endPoint[0] === startPoint[0]) {
          // 竖直
          rotation = endPoint[1] > startPoint[1] ? -imgRt : Math.PI - imgRt
        } else if (endPoint[1] === startPoint[1]) {
          // 水平
          rotation = endPoint[1] > startPoint[1] ? Math.PI / 2 - imgRt : (Math.PI * 3) / 2 - imgRt
        } else {
          // 其他角度
          rotation = Math.atan((endPoint[0] - startPoint[0]) / (endPoint[1] - startPoint[1])) - imgRt
        }
        return rotation
      }
    },

    setSimpleMap (id) {
      let map = this.$refs.myMap
      map.removeCesiumGraphics()
      map.changeLoading(true)
      getDefectDataById(id).then(res => {
        map.changeLoading(false)
        if (res.code === 1 && res.result) {
            let { strucDefectFeatures, funcDefectFeatures, pipeDefectFeatures } = map.getFeatures(res.result)
            if ([...strucDefectFeatures, ...funcDefectFeatures, ...pipeDefectFeatures].length !== 0) {
                map.addLines([...strucDefectFeatures, ...funcDefectFeatures])
                setTimeout(() => { 
                  map.addDefects(pipeDefectFeatures)
                  new CesiumUtil(this.$refs.myMap.viewer).flyTo(pipeDefectFeatures[0])
                }, 1000)
                console.log('跳转子地图')
                
            }
        } else this.$message.error('管线缺陷数据请求失败')
      })
    },

    // 关闭上传弹框时
    closeDialogDocx() {
      this.loadingBool = false
      this.$refs['formDocx'] && this.$refs['formDocx'].resetFields()
      this.$refs['updataDocx'] && this.$refs['updataDocx'].clearFiles()
      this.selectParm = { current: 1, size: 30 }
      this.selectLoadTotal = 0 // 选择框总页数
      this.upDataTable = []
      this.fileList = []
      // this.getPipeDefectData()
      this.setMainMap()
      this.upDateTable()
    },
    closeDialogVideo() {
      this.loadingBool = false
      this.$refs['formVideo'] && this.$refs['formVideo'].resetFields()
      this.$refs['updataVideo'] && this.$refs['updataVideo'].clearFiles()
      this.selectParm = { current: 1, size: 30 }
      this.selectLoadTotal = 0 // 选择框总页数
      this.vdieofileList = []
      this.upDataTable = []
      this.upDateTable()
    },
    // 获取字典id
    async getParamsId(type1, type2) {
      // 获取字典id
      // uploadFileType
      let uploadFileTypeDicId = await queryDictionariesId({ keys: 'uploadFileType' })
      // uploadItem
      let uploadItemDictId = await queryDictionariesId({ keys: 'uploadItem' })
      uploadFileTypeDicId = uploadFileTypeDicId.result.uploadFileType
      uploadItemDictId = uploadItemDictId.result.uploadItem
      // await this.$refs.upload.submit()
      uploadFileTypeDicId.forEach((v) => {
        if (v.codeValue == type1) {
          this.updataParamsId.uploadFileTypeDicId = v.id
        }
      })
      uploadItemDictId.forEach((v) => {
        if (v.codeValue == type2) {
          this.updataParamsId.uploadItemDictId = v.id
        }
      })
    },
    // 判断表格当前行是否可被选中
    checkSelect(row, index) {
      let isChecked = true
      if (row.state == '0') {
        // 判断里面是否存在某个参数
        isChecked = true
      } else {
        isChecked = false
      }
      return isChecked
    },
    // 打开弹框时
    openRelease() {
    },
    // 关闭发布弹框时触发
    closeRelease() {
      this.id = ''
      this.defectQuantityStatisticsA = JSON.parse(JSON.stringify(this.initdefectQuantityStatisticsA))
      this.defectQuantityStatisticsB = JSON.parse(JSON.stringify(this.initdefectQuantityStatisticsB))
      this.defectSumObj = { oneSum: 0, twoSum: 0, threeSum: 0, fourSum: 0, total: 0 }
      this.isOpen = false
      this.isRelease = false
    },
    // 判断是否是'/'
    judge(value) {
      if (value == '/') {
        return 0
      } else {
        return value
      }
    },
    // 单行管段详情
    testReportDetails(row, isRelease) {
      console.log('详情')
      let id = row.id
      let path = row.wordFilePath
      // 显示加载
      const loading = this.$loading({
        lock: true,
        text: '数据加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      // 判断是否已加载地图
      if (this.hasLoadMap) {
        this.setSimpleMap(id)
      }

      this.id = id
      isRelease ? (this.isRelease = true) : ''
      this.activeLeft = 'first'
      queryPipecheckDetails(id).then(res => {
        console.log('详情')
        // 按缺陷名称给数据分类
        // 缺陷数量统计
        this.defectSumObj = { oneSum: 0, twoSum: 0, threeSum: 0, fourSum: 0, total: 0 }, // 合计
        this.defectQuantityStatisticsA = [
          { title: '(AJ)支管暗接', type: 'AJ', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: '/', value: 0 },
          { title: '(BX)变形', type: 'BX', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
          { title: '(CK)错口', type: 'CK', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
          { title: '(CR)异物穿入', type: 'CR', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: '/', value: 0 },
          { title: '(FS)腐蚀', type: 'FS', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: '/', value: 0 },
          { title: '(PL)破裂', type: 'PL', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
          { title: '(QF)起伏', type: 'QF', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
          { title: '(SL)渗透', type: 'SL', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
          { title: '(TJ)脱节', type: 'TJ', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
          { title: '(TL)接口材料脱落', type: 'TL', oneValue: 0, twoValue: 0, threeValue: '/', fourValue: '/', value: 0 }
        ], // 管道缺陷数量统计表
        this.defectQuantityStatisticsB = [
          { title: '(CJ)沉积', type: 'CJ', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
          { title: '(CQ)残墙、坝根', type: 'CQ', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
          { title: '(FZ)浮渣', type: 'FZ', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: '/', value: 0 },
          { title: '(JG)结垢', type: 'JG', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
          { title: '(SG)树根', type: 'SG', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 },
          { title: '(ZW)障碍物', type: 'ZW', oneValue: 0, twoValue: 0, threeValue: 0, fourValue: 0, value: 0 }
        ]
        res.result.forEach((resValue) => {
          this.defectQuantityStatisticsA.forEach((sumValue) => {
            if (resValue.defectCode == sumValue.type) {
              if (['一级', '1'].includes(resValue.defectLevel)) {
                sumValue.oneValue += resValue.defectNums
              } else if (['二级', '2'].includes(resValue.defectLevel)) {
                sumValue.twoValue += resValue.defectNums
              } else if (['三级', '3'].includes(resValue.defectLevel)) {
                sumValue.threeValue += resValue.defectNums
              } else if (['四级', '4'].includes(resValue.defectLevel)) {
                sumValue.fourValue += resValue.defectNums
              }
            }
          })

          this.defectQuantityStatisticsB.forEach((sumValue) => {
            if (resValue.defectCode == sumValue.type) {
              if (['一级', '1'].includes(resValue.defectLevel)) {
                sumValue.oneValue += resValue.defectNums
              } else if (['二级', '2'].includes(resValue.defectLevel)) {
                sumValue.twoValue += resValue.defectNums
              } else if (['三级', '3'].includes(resValue.defectLevel)) {
                sumValue.threeValue += resValue.defectNums
              } else if (['四级', '4'].includes(resValue.defectLevel)) {
                sumValue.fourValue += resValue.defectNums
              }
            }
          })
        })

        this.defectQuantityStatisticsA.forEach((v) => {
          v.value = this.judge(v.oneValue) + this.judge(v.twoValue) + this.judge(v.threeValue) + this.judge(v.fourValue)
          this.defectSumObj.oneSum += this.judge(v.oneValue)
          this.defectSumObj.twoSum += this.judge(v.twoValue)
          this.defectSumObj.threeSum += this.judge(v.threeValue)
          this.defectSumObj.fourSum += this.judge(v.fourValue)
          this.defectSumObj.total += v.value
        })
        this.defectQuantityStatisticsB.forEach((v) => {
          v.value = this.judge(v.oneValue) + this.judge(v.twoValue) + this.judge(v.threeValue) + this.judge(v.fourValue)
          this.defectSumObj.oneSum += this.judge(v.oneValue)
          this.defectSumObj.twoSum += this.judge(v.twoValue)
          this.defectSumObj.threeSum += this.judge(v.threeValue)
          this.defectSumObj.fourSum += this.judge(v.fourValue)
          this.defectSumObj.total += v.value
        })

        this.pdfUrl = path ? baseAddress + '/psjc/file' + path : ""
        this.remark = row.remark
        this.dialogFormVisible3 = true
        this.$nextTick(() => {
          this.isOpen = true
          this.renderEcharts()
          loading.close()
        })
      })
    },
    // 单个发布
    async oneReleaseBtn() {
      // &remark=${this.remark}
      let param = {
        id: this.id,
        remark: this.remark,
        state: '1'
      }
      let res = await oneRelease(param)
      if (res.result) {
        this.$message({
          message: '发布成功',
          type: 'success'
        })
        this.setMainMap()
      }
      await this.upDateTable()
      this.dialogFormVisible3 = false
    },
    // 单个撤回
    withdrawBtn(id) {
      this.id = id
      this.withdrawDialogVisible = true
    },
    // 确认撤回
    async isWithdraw() {
      let res = await withdrawReport(this.id)
      if (res.result) {
        this.$message({
          message: '撤回成功',
          type: 'success'
        })
      } else {
        this.$message.error('撤回失败')
      }
      this.withdrawDialogVisible = false
      await this.upDateTable()
      this.setMainMap()
    },
    // 批量发布确认
    async confirmRelease() {
      let idArr = this.multipleSelection.map((v) => {
        return v.id
      })
      let res = await batchRelease(idArr.join(','))
      if (res.result) {
        // this.getPipeDefectData() // 刷新地图
        this.$message({
          message: '发布成功',
          type: 'success'
        })
      }
      this.batchReleaseDialog = false
      await this.upDateTable()
      this.setMainMap()
    },
    // 文件发生变化时触发
    getFile(file, fileList) {
      let num = 1024.0 // byte
      this.fileList = fileList
      this.upDataTable = fileList.map((v) => {
        let result = v.response ? v.response.result[0].msg : ''
        let status = v.response ? (v.response.result[0].flag === 'succ' ? "success" : 'error') : v.status
        return {  
          name: v.name,
          size: (v.size / Math.pow(num, 2)).toFixed(2) + 'MB',
          status,
          result
        }
      })
    },
    getvideoFile(file, fileList) {
        let num = 1024.0 // byte
        this.vdieofileList = fileList
        let data = fileList.map((v) => {
          let result = v.response ? v.response.result[0].msg : ''
          let status = v.response ? (v.response.result[0].flag === 'succ' ? "success" : 'error') : v.status
          return {
            name: v.name,
            size: (v.size / Math.pow(num, 2)).toFixed(2) + 'MB',
            status,
            result
          }
        })
        this.upDataTable = data
    },
    // 重置
    resetDate() {
      this.searchValue.checkList = []
      this.searchValue.serchValue = ''
      this.searchValue.startDate = ''
      this.searchValue.finishDate = ''
      this.upDateTable()
    },
    // 报告上传取消按钮
    hideUpdataDocx() {
      this.form.name = ''
      this.dialogFormVisible = false
      this.dialogFormVisible2 = false
      return false
    },
    // 失去焦点时
    initSelectDate() {
      this.selectParm.current = 1
    },
    // 选择工程下拉刷新加载更多数据（报告上传）
    async selectLoadMore() {
      if (this.selectParm.current * this.selectParm.size >= this.selectLoadTotal) return
      this.selectParm.current++
      let res = await projectPagingQuery(this.selectParm)
      let data = res.result.records
      data.forEach((v) => {
        this.selectArr.push({
          name: v.wordInfoName,
          No: v.id
        })
      })
    },
    // 报告上传按钮
    async showUpdata() {
      // 选择工程名称的分页查询
      let res = await projectPagingQuery(this.selectParm)
      this.selectLoadTotal = res.result.records
      let data = res.result.records
      this.selectArr = data.map((v) => {
        return {
          name: `${v.prjName}(${v.prjNo})`,
          No: v.id
        }
      })
      this.dialogFormVisible = true
    },
    // 视频上传按钮
    async videoShowUpdata() {
      // 选择工程名称的分页查询
      let res = await projectPagingQuery(this.selectParm)
      this.selectLoadTotal = res.result.records
      let data = res.result.records
      this.selectArr = data.map((v) => {
        return {
          name: `${v.prjName}(${v.prjNo})`,
          No: v.id
        }
      })
      this.dialogFormVisible2 = true
    },
    // 上传按钮
    async uploadWord() {
      this.$refs['formDocx'].validate(async (valid) => {
        if (valid) {
          this.loadingBool = true
          // 获取字典id
          await this.getParamsId('wordInfoDoc', 'tf_ywpn_prjinfo_w')
          this.updataParamsId.itemId = this.form.name
          await this.$refs.updataDocx.submit()
        } else {
          return false
        }
      })
    },
    async uploadVideoWord() {
      this.$refs['formVideo'].validate(async (valid) => {
        if (valid) {
          this.loadingBool = true
          // 获取字典id
          await this.getParamsId('pipeVideo', 'tf_ywpn_prjinfo_w')
          this.updataParamsId.itemId = this.form.name
          await this.$refs.updataVideo.submit()
        } else {
          return false
        }
      })
    },
    // 上传触发的方法
    handleAvatarSuccess(res, file, fileList) {
      let arrState = fileList.every((v) => v.status != 'ready' && v.status != 'uploading')
      if (res.result == null || res.result.length == 0) {
        file.status = 'error'
      }
      if (arrState) {
        this.$message({
          showClose: true,
          message: '文件上传结束'
        })
        this.lastFileList = fileList
        this.loadingBool = false
      }
    },
    // 检测报告是否已被上传成功过
    checkState(file) {
      if (file.status == 'success') {
        this.$message({
          message: '文件都已上传完成',
          type: 'success'
        })
        this.loadingBool = false
        return false
      }
    },
    // 视频
    handleAvatarSuccessVideo(res, file, fileList) {
      let arrState = fileList.every((v) => v.status != 'ready' && v.status != 'uploading')
      if (res.result == null || res.result.length == 0) {
        file.status = 'error'
      }
      if (arrState) {
        this.$message({
          showClose: true,
          message: '文件上传结束'
        })
        this.loadingBool = false
      }
    },
    beforeUpload(event, file, fileList) {
      let num = 1024.0 //byte
      let find = this.upDataTable.find(item => item.name === file.name)
      if (find) {
        find.status = file.status
        find.result = file.response ? file.response.result[0].msg : ''
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    // 搜索
    searchApi() {
      this.pagination.current = 1
      let params = { ...this.searchValue }
      if (params.checkList.length == 1) {
        params.checkList = params.checkList[0]
      } else {
        params.checkList = ''
      }
      this.upDateTable(params)
    },
    // 删除按钮
    removeBtn() {
      this.deleteDialogVisible = true
    },
    // 确认删除
    async removeDatas() {
      let res = {}
      if (this.multipleSelection.length == 1) {
        // res = await deleteIdData(this.multipleSelection[0].id)
        res = await deleteTestReport({ ids: this.multipleSelection[0].id })
      } else {
        let idArr = this.multipleSelection.map((v) => v.id)
        res = await deleteTestReport({ ids: idArr.join(',') })
      }
      if (res.result) {
        // this.getPipeDefectData()
        this.setMainMap()
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.deleteDialogVisible = false
        this.upDateTable()
      } else {
        this.$message.error('删除失败')
      }
    },
    // 查询数据
    upDateTable(params) {
      let data = { ...this.pagination }
      if (params) {
        data.jcStartDate = params.startDate
        data.jcEndDate = params.finishDate
        data.state = params.checkList
        data.prjNo = params.serchValue
      }
      queryPageTestReportNew(data).then(res => {
        this.tableData = res.result.records
        this.paginationTotal = res.result.total
      })
    },
    // 发布tab标签点击事件
    handleClick(tab, event) {
    },
    add() {},
    // 表格选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 分页触发的事件
    async handleSizeChange(val) {
      this.pagination.size = val
      await this.upDateTable()
    },
    async handleCurrentChange(val) {
      this.pagination.current = val
      await this.upDateTable()
    }
  },
  // 过滤器
  filters: {
    // 过滤发布状态
    filter_state(value) {
      return value == 0 ? '未发布' : '已发布'
    },
    // 过滤上传进度
    filter_schedule(value) {
      if (value == 'ready') {
        return '未开始'
      } else if (value == 'uploading') {
        return '进行中...'
      } else if (value == 'success') {
        return '√'
      } else if (value == 'error') {
        return '×'
      } else {
        return value
      }
    }
  }
}
</script>


<style lang="scss" scoped>
$fontSize: 14px !important;
// 上传进度样式
.font-green {
  color: #67c23a;
}
.font-blue {
  color: #2d74e7;
}
.font-red {
  font-weight: bold;
  color: #f65252;
}
.engineering-manage {
  height: 100vh;
  margin: 0;
  padding: 20px 0;
  box-sizing: border-box;
  position: relative;
  font-size: $fontSize;
  /deep/.histroyPipeData {
    // 详情卡片的样式
    .detailsCrad {
      position: fixed;
      top: 100px;
      right: 24px;
      z-index: 9;
      .clearfix:before,
      .clearfix:after {
        display: table;
        content: '';
      }
      .clearfix:after {
        clear: both;
      }

      .box-card {
        width: 500px;
        max-height: 80vh;
        .el-card__header {
          height: 48px;
          color: #fff;
          background-color: #2d74e7;
        }
        .el-card__body {
          padding: 0 !important;
          .el-menu-item {
            height: 45px;
            font-size: 16px;
          }
        }
        .content {
          height: 600px;
          /deep/ .content-info {
            overflow-y: scroll;
            // max-height: 545px;
            height: 100%;
            padding: 10px 20px;
            .el-textarea__inner,
            .el-input__inner {
              color: #666;
            }
            .detailsTitle {
              position: relative;
              font-size: 16px;
              padding: 5px 0;
              box-sizing: border-box;
            }
            .detailsTitle::after {
              position: absolute;
              top: 5px;
              left: -10px;
              content: '';
              width: 4px;
              height: 65%;
              background-color: #2d74e7;
            }
            /deep/ .el-form {
              .is-disabled {
                .el-input__inner {
                  background-color: transparent;
                }
                .el-textarea__inner {
                  background-color: transparent;
                }
              }
              .el-form-item {
                margin-bottom: 10px;
              }
            }
          }
        }
        .table-content {
          padding: 15px;
          .content-info {
            font-size: 12px;
            display: flex;
            // justify-content: space-between;
            flex-direction: column;
            align-content: center;
            .left {
              font-family: 'Microsoft YaHei UI', sans-serif;
              flex: 1;
            }
            .right {
              flex: 1;
              .container {
                height: 100%;
                width: 100%;
                padding: 5px;
                box-sizing: border-box;
              }

              .is-top {
              }
              .el-tabs__item {
                margin: 11px 0 0 0;
                background: transparent;
              }
              .el-tabs__header {
                border-top: 0;
                background: #fff;
              }
              // .el-tabs__nav-wrap::after {
              //   z-index: 2;
              // }
              // .el-tabs__active-bar
            }
            .detailsTitle {
              position: relative;
              margin: 6px 0;
              padding-left: 10px;
              box-sizing: border-box;
              margin-bottom: 10px;
            }
            .detailsTitle::after {
              position: absolute;
              left: 0;
              content: '';
              width: 4px;
              height: 100%;
              background-color: #2d74e7;
            }
          }
        }
      }
    }
  }
  /deep/.el-table .el-table__cell {
    padding: 0;
  }
  // 详情卡片的样式
  .PipeEvData {
    position: fixed;
    top: 100px;
    right: 45px;
    z-index: 9;
    .detailsCrad {
      .clearfix:before,
      .clearfix:after {
        display: table;
        content: '';
      }
      .clearfix:after {
        clear: both;
      }

      .box-card {
        width: 550px;
        min-height: 310px;
        border: none;
        border-radius: 5px;
        /deep/ .el-card__header {
          height: 48px;
          color: #fff;
          background-color: #2d74e7;
        }
        /deep/.el-card__body {
          padding: 15px !important;
          .el-menu-item {
            height: 45px;
            font-size: 16px;
          }
        }
        .content {
          .content-info {
            overflow-y: scroll;
            height: 600px;
            padding: 10px 20px;
            .info-title {
              font-size: 14px;
              font-weight: bold;
              margin: 5px 0;
            }
            .info-box {
              height: 100%;
              display: flex;
              justify-content: space-between;
              .info-text {
                width: 37%;
                padding: 10px;
                box-sizing: border-box;
                background-color: #f3f7fe;
                border: 1px solid #dedede;
              }
              .info-video {
                width: 60%;
                border: 1px solid #dedede;
              }
            }
            /deep/.el-form {
              .el-link--inner {
                max-width: 416px;
                /* 1.先强制一行内显示文本 */
                white-space: nowrap;
                /* 2.超出部分隐藏 */
                overflow: hidden;
                /* 3.文字用省略号替代超出的部分 */
                text-overflow: ellipsis;
              }
              /deep/.is-disabled {
                .el-input__inner {
                  background-color: transparent;
                }
                .el-textarea__inner {
                  background-color: transparent;
                }
              }
              .el-form-item {
                margin-bottom: 10px;
              }
            }
            /deep/.el-textarea__inner,
            .el-input__inner {
              color: #666;
            }
            .detailsTitle {
              position: relative;
              font-size: 16px;
              padding: 5px 0;
              box-sizing: border-box;
            }
            .detailsTitle::after {
              position: absolute;
              top: 5px;
              left: -10px;
              content: '';
              width: 4px;
              height: 65%;
              background-color: #2d74e7;
            }
          }
        }
        .table-content {
          padding: 15px;
          .content-info {
            font-size: 12px;
            display: flex;
            justify-content: space-between;

            .left {
              flex: 1;
              .text-space {
                margin: 10px 0;
                /deep/.el-link--inner {
                  max-width: 240px;
                  // 1.先强制一行内显示文本
                  white-space: nowrap;

                  // 2.超出部分隐藏
                  overflow: hidden;
                  // 3.文字用省略号替换超出的部分
                  text-overflow: ellipsis;
                }
              }
            }
            .right {
              flex: 1;

              /deep/.is-top {
                margin: 0 0 10px;
              }
              // .el-tabs__header{
              //   border-top: none;
              //       margin-bottom: 6px;
              //   background-color: transparent !important;
              // }
              /deep/.el-tabs {
                .container {
                  height: 100%;
                  width: 100%;
                  padding-top: 5px;
                  box-sizing: border-box;
                }
                .el-tabs__content {
                  height: 150px;
                  width: 234px;
                }
                .el-tabs__item {
                  margin: 11px 0 0 0 !important;
                  background: transparent !important;
                }
                .el-tabs__header {
                  border-top: 0 !important;
                  background: transparent !important;
                }
              }
              // .el-tabs__nav-wrap::after {
              //   z-index: 2;
              // }
              // .el-tabs__active-bar
            }
            .detailsTitle {
              position: relative;
              margin: 6px 0;
              padding-left: 10px;
              box-sizing: border-box;
            }
            .detailsTitle::after {
              position: absolute;
              left: 0;
              content: '';
              width: 4px;
              height: 100%;
              background-color: #2d74e7;
            }
          }
        }
      }
    }
  }
  .delete-box {
    /deep/.el-dialog {
      margin-top: 30vh !important;
      .el-dialog__header {
        border-bottom: none;
      }
    }
  }
  /deep/ .el-date-editor {
  }
  // 表格样式
  .table-box {
    width: 96%;
    margin: auto;
    display: flex;
    height: 100%;
    flex-direction: column;
    // 发布状态样式
    .stateRedClass {
      color: #ff0017;
    }
    .stateGreenClass {
      color: #5c9a44;
    }
    .top-tool {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      flex-wrap: wrap;
      font-size: $fontSize;
      /deep/ .el-radio__label {
        font-size: $fontSize;
      }
      /deep/ .serch-engineering {
        display: flex;
        // justify-content: space-around;
        align-items: center;
        margin-bottom: 14px;
        .sampleTime {
          width: 308px !important;
          .el-input {
            width: 140px;
          }
        }
        .release-radio {
          display: flex;
          align-items: center;
          white-space: nowrap;
          margin-right: 5px;
          font-size: $fontSize;
          .el-radio {
            margin-right: 10px;
          }
          .release-title {
            margin: 0 10px;
          }
          .el-checkbox {
            margin-right: 12px;
          }
        }
        .serch-input {
          width: 240px;
        }
        .el-input__inner {
          height: 34px;
        }
        .el-range-editor {
          width: 270px;
        }
        .date-css {
          width: 140px;
        }

        .title {
          font-size: 14px;
          color: #606266;
          font-family: Arial;
          white-space: nowrap;
          margin-left: 5px;
        }
      }

      .right-btn {
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        font-size: $fontSize;
        // flex-direction: row;
        // flex-wrap: wrap;
      }
    }
  }
  /deep/.el-table .el-table__cell:not(td) {
    padding: 0;
  }
  /deep/ .el-table {
    flex: 1;
    // overflow-y: scroll;
    th.el-table__cell > .cell {
      color: rgb(50, 59, 65);
      height: 40px;
      line-height: 40px;
      background: rgb(234, 241, 253);
    }
    .el-table__row--striped > td {
      background-color: #f3f7fe !important;
    }
    .hover-row {
      color: #e6a23c;
      background-color: rgba($color: #2d74e7, $alpha: 0.1);
    }
    .rowBgBlue {
      & > td {
        color: #fff;
        border-right: 1px solid #ebeef5;
        background-color: #69a8ea !important;
      }
    }
  }

  // 报告上传样式
  .public-box {
    /deep/ .el-dialog__header {
      background-color: #2d74e7;
      .el-dialog__title {
        color: #fff;
      }
      .el-dialog__headerbtn > .el-icon-close {
        color: #fff !important;
      }
    }
  }
  // 发布盒子布局
  .release-box {
    /deep/ .el-dialog {
      display: flex;
      flex-direction: column;
      .el-dialog__body {
        flex: 1;
        padding: 15px 20px !important;
      }
    }
  }
  .hd-input {
    /deep/.el-input__inner {
      width: 70%;
    }
    .upData-class {
      height: 40px;
      display: flex;
      align-items: center;
      font-size: $fontSize;
      font-weight: bold;
      background-color: #dfeffe;
    }
    /deep/ .el-upload-list__item-name {
      text-align: center;
    }
  }
  .release-radio {
    .el-radio {
      margin-right: 8px !important;
      .radio__label {
        padding-left: 4px;
      }
    }
  }
  .el-select {
    width: 70%;
  }
  /deep/ .is-required {
    position: relative;
    .select-btn {
      position: absolute;
      top: 0;
      left: 72%;
    }
  }
  // 报告发布
  .releaseTop-box {
    display: flex;
    justify-content: space-between;
    .left,
    .right {
      /deep/ .el-tabs__header {
        background: transparent;
        border-top: none;
      }
      /deep/.el-tabs__item {
        margin: 0 !important;
        margin-top: 11px !important;
        background: transparent !important;
      }
      /deep/.releaseContent {
        width: 100%;
        height: 78vh;
        max-width: 64vw;
        margin-top: -3px;
        padding: 20px;
        box-sizing: border-box;
        overflow-y: scroll;
      }
    }
    .left {
      flex: 2;
      .releaseContent {
        height: 78vh;
        border: 1px solid #9a9a9a;
        overflow: scroll;
        .detailsTitle {
          margin: 24px 0;
          position: relative;
        }
        .detailsTitle::after {
          position: absolute;
          left: -10px;
          content: '';
          width: 4px;
          height: 100%;
          background-color: #2d74e7;
        }
      }
    }
    .right {
      flex: 1;
      .map-box {
        height: 78vh;
        border: 1px solid #666;
      }
    }
  }
  /deep/ .upload-demo {
    position: relative;
    & > .el-upload {
      // width: 100%;
    }
    .btn-box {
      // cursor: default;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .btns {
        position: absolute;
        right: 0;
      }
    }
  }
  // 详情卡片的样式
  .detailsCrad {
    z-index: 9;
    .clearfix:before,
    .clearfix:after {
      display: table;
      content: '';
    }
    .clearfix:after {
      clear: both;
    }

    /deep/ .box-card {
      width: 500px;
      max-height: 80vh;
      .el-card__header {
        height: 48px;
        color: #fff;
        background-color: #2d74e7;
      }
      .el-card__body {
        padding: 0;
        .el-menu-item {
          height: 45px;
        }
      }
      .content {
        /deep/ .content-info {
          overflow-y: scroll;
          max-height: 545px;
          padding: 10px 20px;
          .el-textarea__inner,
          .el-input__inner {
            color: #666;
          }
          .detailsTitle {
            position: relative;
            font-size: 16px;
            padding: 5px 0;
            box-sizing: border-box;
          }
          .detailsTitle::after {
            position: absolute;
            top: 5px;
            left: -10px;
            content: '';
            width: 4px;
            height: 65%;
            background-color: #2d74e7;
          }
        }
      }
      .table-content {
        padding: 15px;
        .content-info {
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          .left {
            flex: 1;
          }
          /deep/ .right {
            flex: 1;
            .container {
              height: 100%;
              width: 100%;
              padding: 5px;
              box-sizing: border-box;
            }

            .is-top {
            }
            .el-tabs__item {
              margin: 11px 0 0 0;
              background: transparent;
            }
            .el-tabs__header {
              border-top: 0;
              background: #fff;
            }
            // .el-tabs__nav-wrap::after {
            //   z-index: 2;
            // }
            // .el-tabs__active-bar
          }
          .detailsTitle {
            position: relative;
            margin: 6px 0;
            padding-left: 10px;
            box-sizing: border-box;
            margin-bottom: 10px;
          }
          .detailsTitle::after {
            position: absolute;
            left: 0;
            content: '';
            width: 4px;
            height: 100%;
            background-color: #2d74e7;
          }
        }
      }
    }
  }
}
#popupCardDefRpt {
  &::after {
    content: '';
    display: block;
    width: 45px;
    height: 27px;
    background: url('../../components/testImg/corner.png');
    position: absolute;
    bottom: -26px;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
#popupCardRpt {
  &::after {
    content: '';
    display: block;
    width: 45px;
    height: 27px;
    background: url('../../components/testImg/corner.png');
    position: absolute;
    bottom: -26px;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
</style>