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

<template>
  <div class="testResultDiagram i-scrollbar" :data="'这个是data'">
    <!-- 检测成果专题图 -->
    <p class="title">查询设置</p>
    <el-form ref="form" :model="form" label-width="100px" :rules="rules">
      <el-form-item label="工程名称:" prop="name">
        <el-select @change="projectChange" v-model="form.project" clearable>
          <el-option
            v-for="(item, index) in projectOpt"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检测报告:" prop="rpt">
        <el-select :disabled="!form.project" v-model="form.report" placeholder="请选择检测报告" multiple clearable>
          <el-option
            v-for="(item, index) in reportOpt"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检测日期:">
        <el-row style="margin-bottom: 15px">
          <el-date-picker
            type="date"
            placeholder="开始日期"
            v-model="form.startDate"
            :picker-options="sOpition"
            style="width: 100%"
            @change="sDateChange"
          ></el-date-picker>
        </el-row>
        <el-row>
          <el-date-picker
            type="date"
            placeholder="结束日期"
            v-model="form.endDate"
            :picker-options="eOpition"
            style="width: 100%"
            @change="eDateChange"
          ></el-date-picker>
        </el-row>
      </el-form-item>
    </el-form>
    <div class="see-btn">
      <el-button type="primary" @click="showLayer">查看<i :class="loading ? 'el-icon-loading' : ''"></i></el-button>
    </div>
    <p class="title">专题图列表</p>
    <div v-for="(item, index) in defectLegend" :key="index" class="thematicMap-list">
      <div>
        <div class="thematicMap-title">
          <i
            style="cursor: pointer"
            @click="changeArrow(index)"
            :class="{ 'el-icon-caret-bottom': showThemBox[index], 'el-icon-caret-right': !showThemBox[index] }"
          ></i>
          <el-checkbox
            @change="setThemLayerVisible(index, item.open)"
            v-model="item.open"
            :label="item.title"
          ></el-checkbox>
        </div>
        <transition>
          <div v-if="item.type === 'gradient' && showThemBox[index]" class="transition-box">
            <div class="line-color"></div>
            <div class="text-mix-max">
              <span>{{ item.start }}</span>
              <span>{{ item.end }}</span>
            </div>
          </div>
          <div v-else-if="showThemBox[index]" class="transition-box">
            <ul>
              <li
                @click="openBox(item.layerName, i)"
                v-for="(level, i) in item.level"
                :key="i"
                :class="comStyle(item.type, level.color)"
              >
                {{ level.label + ' / ' + level.num + level.unit
                }}<i :class="level.num || hasLoad ? '' : 'el-icon-loading'"></i>
              </li>
            </ul>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import { 
  queryDefectdetails, 
  histroyPipeData,
  getDefectData,
  getProject,
  getReportByProjecetId,
  getDefectDataByFilter
  } from '@/views/pipelineDefect/api/pipelineDefect'

import { baseAddress } from '@/utils/request';
import checkDetails from '../../components/checkDetails.vue'
import { projUtil } from '@/views/pipelineDefect/common/proj'
import { appconfig } from 'staticPub/config';

import { Point, LineString, Polygon } from 'ol/geom'
import Feature from 'ol/Feature'
import { Style } from 'ol/style'
import Icon from 'ol/style/Icon'
import { comSymbol } from '@/utils/comSymbol'
import defectImg1 from '@/assets/images/traingle1.png'
import defectImg2 from '@/assets/images/traingle2.png'
import defectImg3 from '@/assets/images/traingle3.png'
import defectImg4 from '@/assets/images/traingle4.png'
import defectImg0 from '@/assets/images/traingle0.png'

import GraphicUtil from '@/views/pipelineDefect/common/graphic';
import HandleManage from '@/views/pipelineDefect/common/cesiumEvent';
import CesiumUtil from '@/views/pipelineDefect/common/cesiumUtil';


export default {
  components: { checkDetails },
  props: { data: Object },
  data() {
    return {
      rules: {
        name: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { max: 100, message: '内容不能超过100个字符串', trigger: 'change' }
        ],
        rpt: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ]
      },
      form: {
        project: '',
        report: '',
        startDate: '',
        endDate: ''
      },

      // 报告数据
      reportOpt: [],
      // 工程数据
      projectOpt: [],
      defectLegend: [
        {
          title: '管道缺陷分布图',
          layerName: 'pipeDefectLayer',
          open: true,
          type: 'img',
          level: [
            { color: '1', label: '一级', num: 0, unit: '个' },
            { color: '2', label: '二级', num: 0, unit: '个' },
            { color: '3', label: '三级', num: 0, unit: '个' },
            { color: '4', label: '四级', num: 0, unit: '个' },
            // { color: '0', label: '正常', num: 0, unit: '个' }
          ]
        },
        {
          title: '管道结构性缺陷等级分布图',
          layerName: 'pipeStrucLayer',
          open: true,
          type: 'line',
          level: [
            { color: 'green', label: 'Ⅰ级', num: 0, unit: '条' },
            { color: 'blue', label: 'Ⅱ级', num: 0, unit: '条' },
            { color: 'pink', label: 'Ⅲ级', num: 0, unit: '条' },
            { color: 'red', label: 'Ⅳ级', num: 0, unit: '条' },
            { color: 'un', label: '正常', num: 0, unit: '条' }
          ]
        },
        {
          title: '管道功能性缺陷等级分布图',
          layerName: 'pipeFuncLayer',
          open: true,
          type: 'line',
          level: [
            { color: 'green', label: 'Ⅰ级', num: 0, unit: '条' },
            { color: 'blue', label: 'Ⅱ级', num: 0, unit: '条' },
            { color: 'pink', label: 'Ⅲ级', num: 0, unit: '条' },
            { color: 'red', label: 'Ⅳ级', num: 0, unit: '条' },
            { color: 'un', label: '正常', num: 0, unit: '条' }
          ]
        }
      ],
      showThemBox: [true, true, true, true],

      currentDataProjName: appconfig.currPRJ,
      // 
      projUtil: null,

      loading: false,
      currentInfoCard: false,
      DetailsForm: {},
      popup: null,
      activeName: 'picnum',

      currentInfoCard2: false,
      // 时间过滤
      sOpition: {
        disabledDate: (time) => {
          time = time.getTime()
          if (this.form.endDate) {
            return time > new Date(this.form.endDate).getTime()
          }
          return time > new Date().getTime()
        }
      },
      eOpition: {
        disabledDate: (time) => {
          time = time.getTime()
          if (this.form.startDate) {
            return time < new Date(this.form.startDate).getTime() || time > new Date().getTime()
          }
          return time > new Date().getTime()
        }
      },
      //
      dialogFormVisible: false,
      pipeId: 0,
      hasLoad: false,
      //
      currentForm: [], // 缩略提示框
      currentIndex: 0,
      imgArrIndex: 0, // 缩略框照片索引
      themLayerName: 'pipeAndDefectLayer',
      //
      graphicUtil: null,
      propertyName: 'bsdata', // 添加到地图实体里的数据名
      geometryType: 'geometryType', // 类型区分
      dSName: 'pipeDefectLayer',
      fSName: 'pipeFuncLayer',
      sSName: 'pipeStrucLayer',
      clkHanderIndex: 0,

    }
  },
  mounted() {
    this.init()
    console.log('加载检测成果专题图')
  },
  destroyed() {
    this.clearAll()
  },
  computed: {
    // 获取照片数组路径
    getImgUrlArrEV() {
      let arr = this.getCurrentForm.pipeDefects.map((v) => {
        return baseAddress + '/psjc/file' + v.picPath
      })
      return arr
    },
    // 获取文件url
    getImgUrlEV() {
      let address = baseAddress + '/psjc/file' + this.getCurrentForm.pipeDefects[this.imgArrIndex].picPath
      console.log('address', address)
      return address
    },
    getVideoUrlEV() {
      console.log('照片', this.getCurrentForm.pipeDefects.length)
      let address = baseAddress + '/psjc/file' + this.getCurrentForm.videoPath
      console.log('address', address)
      return address
    },
    // 提示框当前信息
    getCurrentForm() {
      return this.currentForm ? this.currentForm[this.currentIndex] : {}
    },
    getVideoUrl() {
      let address = baseAddress + '/psjc/file' + this.DetailsForm.videopath
      console.log('address', address)
      return address
    },
    getImgUrl() {
      let address = baseAddress + '/psjc/file' + this.DetailsForm.picPath
      console.log('address', address)
      return address
    },
    // 获取文件url
    getImgUrlEV() {
      let address = baseAddress + '/psjc/file' + this.getCurrentForm.pipeDefects[this.imgArrIndex].picPath
      console.log('address', address)
      return address
    },
    getVideoUrlEV() {
      console.log('照片', this.getCurrentForm.pipeDefects.length)
      let address = baseAddress + '/psjc/file' + this.getCurrentForm.videoPath
      console.log('address', address)
      return address
    },
  },
  watch: {
    '$store.state.app.activeSideItem': function(n, o) {
      if (n === '检测成果专题图') this.init()
      else this.clearAll()
    },
    'form.report': function (n, o) {
      if (n.length > 1) {
        if (n.some(i => isNaN(i))) {
          this.form.report = n.filter(i => !isNaN(i))
        }
      }
    },
  },
  methods: {
    sDateChange (t) {
      if (!this.form.endDate) {
        console.log('时间变化')
        this.$nextTick(() => {
          this.form.endDate = this.form.startDate
        })
      }
    },
    eDateChange (t) {
      if (!this.form.startDate) {
        this.$nextTick(() => {
          this.form.startDate = this.form.endDate
        })
      }
    },
    init () {
      this.viewer = window.viewer
      this.projUtil = new projUtil()
      this.projUtil.resgis(this.currentDataProjName)
      this.cesiumUitl = new CesiumUtil(this.viewer)
      this.graphicUtil =  new GraphicUtil()
      this.handleManage = new HandleManage(this.viewer)

      this.setdefectVisible()
      this.setEvent()

      let dataSources = this.viewer.dataSources
      this.defectSource = new Cesium.CustomDataSource(this.dSName)
      dataSources.add(this.defectSource)

      this.fpipeSource = new Cesium.CustomDataSource(this.fSName)
      dataSources.add(this.fpipeSource)

      this.spipeSource = new Cesium.CustomDataSource(this.sSName)
      dataSources.add(this.spipeSource)

      this.lightPrimitiveCollection = new Cesium.PrimitiveCollection()
      this.lightPrimitiveCollection.destroyPrimitives = false
      this.viewer.scene.primitives.add(this.lightPrimitiveCollection)
      // 添加缺陷数据
      this.setProjectData()
    },
    clearAll() {
      this.viewer.dataSources.remove(this.defectSource)
      this.viewer.dataSources.remove(this.fpipeSource)
      this.viewer.dataSources.remove(this.spipeSource)
      this.handleManage.remove(this.clkHanderIndex)
      this.removeListener && this.removeListener()
      this.lightPrimitiveCollection.removeAll()
    },
    setEvent () {
            this.clkHanderIndex = this.handleManage.create('lclick', evt => {
                let { car3, position, pick, rayPoint } = evt
                let data = null, type = ''
                this.data.that.$refs.popupwindow.removePopupWindow()
                if (pick && pick.id) {
                    data = pick.id[this.propertyName]
                    type = data[this.geometryType]
                    this.data.that.$refs.popupwindow.showPopupWindow(rayPoint, pick.id[this.propertyName], type)
                }

                this.removeLightFeas()
                // 高亮
                let fieldText = this.lightFeaText
                if (type === 'line') {
                    this.lightGraphic = this.getPrimity('line', data.lineCar3, { color: this.lightStyle.line, width: 12 }, { [this.lightLayerName]: fieldText })
                    this.lightPrimitiveCollection.add(this.lightGraphic)
                }
            })
            this.removeListener = this.viewer.camera.changed.addEventListener(evt => {
                this.data.that.$refs.popupwindow.movePosition()
            })
    },
    setdefectVisible () {
        let viewer = window.viewer
        let sources = viewer.dataSources
        let pS = this.getDataSource('pipeline')
        let dS = this.getDataSource('defect')
        if (pS && dS) {
          let entities = [...pS.entities.values, ...dS.entities.values]
          entities.forEach(e => { e.show = false })
        }
    },

    setProjectData() {
      getProject({ current: 1, size: 1e4 }).then((res) => {
        if (res.code === 1) {
          // label, value
          this.projectOpt = res.result.records.map((record) => {
            return { label: record.prjName, value: record.prjNo }
          })
          if (this.projectOpt.length > 0) {
            this.form.project = this.projectOpt[0].label
            let prjNo = this.projectOpt[0].value
            getReportByProjecetId({ prjNo, state: 1 }).then(res => {
              if (res.code === 1) {
                let data = res.result
                this.reportOpt = data.map(d => {
                  return { label: d.wordInfoName, value: d.id }
                })
                if (this.reportOpt.length !== 0) {
                  this.form.report = [this.reportOpt[0].label]
                  this.showLayer(this.projectOpt[0].value, this.reportOpt[0].value)
                } else {
                  this.loading = false
                  this.hasLoad = true
                }
              } else this.$message.error('获取报告失败!')
            })
          }

          // 默认选择第一项
          // if (this.projectOpt.length !== 0) {
          //   this.$set(this.form, 'project', this.projectOpt[0].label)
          //   this.projectChange(this.projectOpt[0].value)
          // }
        } else this.$message.error('获取工程项目失败!')
      })
    },
    removeLightFeas () {
      let primitives = this.lightPrimitiveCollection
      let l = primitives.length
      for(let i = 0; i < l; i++) {
        let p = primitives.get(i)
        primitives.remove(p)
      }
    },
    // 项目变化
    projectChange(prjNo) {
      prjNo = prjNo || this.form.project
      getReportByProjecetId({ prjNo, state: 1 }).then((res) => {
        if (res.code === 1) {
          this.form.report = ''
          let data = res.result
          this.reportOpt = data.map((d) => {
            return { label: d.wordInfoName, value: d.id }
          })
        } else this.$message.error('获取报告失败!')
      })
    },
    openBox(layerName, level) {
      if (!this.hasLoad) return
      let typeIndex = ['pipeDefectLayer', 'pipeFuncLayer', 'pipeStrucLayer'].indexOf(layerName)
      let filter = [
        { key: 'defectLevel', value: [['一', '1'], ['二', '2'], ['三', '3'], ['四', '4'], null] },
        { key: 'funcClass', value: ['Ⅰ', 'Ⅱ', 'Ⅲ', 'Ⅳ', null] },
        { key: 'structClass', value: ['Ⅰ', 'Ⅱ', 'Ⅲ', 'Ⅳ', null] }
      ][typeIndex]
      let lv = filter.value[level] ? `${filter.value[level][0]}级` : '正常'
      this.openDefect(filter.key, lv, layerName)
    },

    initMap(data) {
      // 管网缺陷
      let { strucDefectFeatures, funcDefectFeatures, pipeDefectFeatures } = this.getReportFeatures(data)
      
      if ([...strucDefectFeatures, ...funcDefectFeatures, ...pipeDefectFeatures].length !== 0) {
        strucDefectFeatures.forEach(e => this.spipeSource.entities.add(e))
        funcDefectFeatures.forEach(e => this.fpipeSource.entities.add(e))
        pipeDefectFeatures.forEach(e => this.defectSource.entities.add(e))
        this.cesiumUitl.flyTo(strucDefectFeatures[0])
      }
    },
   lastImg() {
      if (this.imgArrIndex <= 0) {
        this.imgArrIndex = 0
        return
      }
      this.imgArrIndex--
    },
    // 下一张照片
    nextImg() {
      if (this.imgArrIndex + 1 >= this.getCurrentForm.pipeDefects.length) {
        this.imgArrIndex = this.getCurrentForm.pipeDefects.length - 1
        return
      }
      this.imgArrIndex++
    },
    // 上一页
    lastPage() {
      if (this.currentIndex <= 0) {
        this.currentIndex = 0
        return
      }
      this.currentIndex--
    },
    // 下一页
    nextPage() {
      if (this.currentIndex + 1 >= this.currentForm.length) {
        this.currentIndex = this.currentForm.length - 1
        return
      }
      this.currentIndex++
    },

    /**
     * 构造管道缺陷地图要素
     * @param reportInfos 报告数据
     * */
    getReportFeatures (defectInfos) {
      const colors = [
        { level: 'Ⅰ', color: 'green', index: 0 },
        { level: 'Ⅱ', color: 'blue', index: 1 },
        { level: 'Ⅲ', color: 'pink', index: 2 },
        { level: 'Ⅳ', color: 'red', index: 3 }
      ], defaultColor = '#070358'
      let style = null, features = { pipeDefectFeatures: [], funcDefectFeatures: [], strucDefectFeatures: [], normal: [] }
      if (defectInfos.length === 0) { return features }
      let funcNum = [0, 0, 0, 0, 0]
      let strucNum = [0, 0, 0, 0, 0]
      let defectNum = [0, 0, 0, 0, 0]
      defectInfos.forEach(defect => {
        let { startPointXLocation, startPointYLocation, endPointXLocation, endPointYLocation } = defect
        if (startPointXLocation && startPointYLocation && endPointXLocation && endPointYLocation) {
          let startPoint = this.projUtil.transform([Number(startPointXLocation), Number(startPointYLocation)], this.currentDataProjName, 'proj84')
          let endPoint = this.projUtil.transform([Number(endPointXLocation), Number(endPointYLocation)], this.currentDataProjName, 'proj84')
          let lineCar3 = CesiumUtil.degreesArray2Car3([startPoint, endPoint].flat())
          // 健康等级颜色

          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 fcolor = findFuncColor ? findFuncColor.color : defaultColor
              let fFea = this.getEntity('line', lineCar3, { color: fcolor }, { ...defect, lineCar3 })
              fFea && features.funcDefectFeatures.push(fFea)

              let findex = findFuncColor ? findFuncColor.index : 4
              funcNum[findex] += 1
            }
              // 结构性缺陷
            if (!isExit(defect.expNo, 'strucDefectFeatures')) {
              let scolor = findStrucColor ? findStrucColor.color : defaultColor
              let sFea = this.getEntity('line', lineCar3, { color: scolor }, { ...defect, lineCar3 })
              sFea && features.strucDefectFeatures.push(sFea)

              let sindex = findStrucColor ? findStrucColor.index : 4
              strucNum[sindex] += 1
            }
            // 缺陷点
            if (defect.geometry) {
              let { x, y } = JSON.parse(defect.geometry)
                        let [lon, lat] = this.projUtil.transform([x, y], this.currentDataProjName, 'proj84')
                        let pointCar3 = CesiumUtil.degrees2Car3(lon, lat, 0)
                        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 }
                        ]
                        let findimg = null
                        if (defect.defectLevel) {
                            findimg = imgs.find((colorObj) => colorObj.level.includes(defect['defectLevel']))
                        }
                        if (findimg) {
                            defectNum[findimg.index] += 1
                            let dFea = this.getEntity('img', pointCar3, { img: findimg.img }, { ...defect, pointCar3 })
                            features.pipeDefectFeatures.push(dFea)
                        }
            }

        }
      })
      // 把数量填充到图例
      this.defectLegend[1].level.forEach((l, index) => {
        l.num = strucNum[index]
      })
      this.defectLegend[2].level.forEach((l, index) => {
        l.num = funcNum[index]
      })
      this.defectLegend[0].level.forEach((l, index) => {
        l.num = defectNum[index]
      })
      
      return features
      function isExit(pipeId, feasType) {
        return features[feasType].some(fea => fea['bsdata'].expNo === pipeId)
      }
    },

        getEntity (type, positions, style, data) {
            data[this.geometryType] = type
            let entity = this.graphicUtil.getEntity(type, positions, style)
            entity[this.propertyName] = data
            return entity
        },
        getPrimity (type, positions, style, data = {}) {
            data[this.geometryType] = 'line'
            let primitive = this.graphicUtil.getPrimity(type, positions, style, {[this.propertyName]: data})
            return primitive
        },
    randomPoint(center, range, num) {
      return new Array(num).fill(center).map(([centerX, centerY]) => {
        let x = Math.random() * range
        let y = Math.random() * range
        return [centerX + x, centerY + y]
      })
    },

    showLayer(projectId, reportId) {
      if (!this.form.project) return this.$message.warning('请先填写工程名称')
      if (!reportId && this.form.report.length === 0) return this.$message.warning('请先选择报告')
      this.loading = true
      let ids = '', prjNo = ''
      if (reportId) {
        ids = reportId
        prjNo = projectId
      } else {
        if (this.form.report) {
          ids = this.reportOpt.filter(proj => this.form.report.some(rep => proj.value === rep || proj.label === rep)).map(proj => proj.value).join(',')
        }
        prjNo = this.projectOpt.find(proj => proj.value === this.form.project || proj.label === this.form.project).value
      }
      let params = {
        prjNo,
        ids,
        jcStartDate: this.form.startDate ? this.form.startDate.toLocaleDateString().replace(/\//g, '-') : '',
        jcEndDate: this.form.endDate ? this.form.endDate.toLocaleDateString().replace(/\//g, '-') : ''
      }
      getDefectDataByFilter(params).then(res => {
        this.loading = false
        this.hasLoad = true
        if (res.code === 1) {
          let data = res.result
          if (data.length !== 0) {
            this.initMap(data)
          } else this.$message.info('无管线缺陷数据')
        } else this.$message.error('请求缺陷数据出错')
      })

    },
    getDataSource (name) {
      return this.viewer.dataSources.getByName(name)[0]
    },
    setThemLayerVisible(index, visible) {
      let legendParams = this.defectLegend[index]
      let source = this.getDataSource(legendParams.layerName)
      let entities = source.entities.values
      entities.forEach(e => { e.show = visible })
      this.lightPrimitiveCollection.removeAll()
    },
    changeArrow(index) {
      this.$set(this.showThemBox, index, !this.showThemBox[index])
    },
    comStyle(type, color) {
      if (type === 'img') return `type-${type}-${color}`
      return `item-${color} type-${type}`
    },
    // 管道缺陷管理的信息
    openDefect(type, level, layerName, data = []) {
      let doc = {
        structClass: `管道结构性缺陷`,
        funcClass: '管道功能性缺陷',
        defectLevel: '管道缺陷'
      }
      let com = type === 'defectLevel' ? 'testPipelineDefect' : 'testPipelineEvaluation'

      this.$store.dispatch('map/handelClose', { box: 'HalfPanel', pathId: com })
      
      let info = {
        id: com,
        label: `${doc[type]} (${level})`,
        meta: {
          title: doc[type] + level
        },
        name: com,
        noShowingChildren: true,
        parentPathid: '/' + com,
        path: '',
        type: 'gis',
        widgetid: 'HalfPanel',
        param: { type, level, data, layerName, rootPage: this }
      }
      // 这是map里的跳转方法
      this.$nextTick(() => {
        this.$store.dispatch('map/changeMethod', info)
      })

      this.openPromptBox('109YS322～109YS327', '')
    },
    // 打开弹窗
    openPromptBox (id, type) {
            this.data.that.$refs.popupwindow.removePopupWindow()
            this.removeLightFeas()
            let idText = ['id', 'expNo'][type], 
                height = [150, 500, 6000],
                center,
                findFeas = []
            if (type) {
                let pEntities = this.getDataSource(this.sSName).entities.values
                findFeas = pEntities.filter(e => e[this.propertyName][idText] === id).map(i => i[this.propertyName])
                let features = this.getLightFeatures(findFeas)
                center = this.cesiumUitl.getCenterFormFeas(features.map(f => f.geometryInstances.id[this.propertyName].coors))
                features.forEach(f => this.lightPrimitiveCollection.add(f))
            } else {
                let dEntities = this.getSource(this.dSName).entities.values
                findFeas = dEntities.filter(e => e[this.propertyName][idText] === id).map(i => i[this.propertyName])
                let { x, y } = JSON.parse(findFeas[0]['geometry'])
                let [lon, lat] = this.projUtil.transform([x, y], this.currentDataProjName, 'proj84')
                center = [lon, lat]
            }

            if (center) {
              this.cesiumUitl.setView(CesiumUtil.degrees2Car3(center[0], center[1], height[type]), () => {
                        let car3 =  CesiumUtil.degrees2Car3(center[0], center[1], 0)
                        let winPos = this.cesiumUitl.car32WindowPosition(car3)
                        let geotype = type ? 'line' : 'point'
                        let rayPoint = this.viewer.scene.globe.pick(this.viewer.scene.camera.getPickRay(winPos), this.viewer.scene);
                        this.data.that.$refs.popupwindow.showPopupWindow(rayPoint, findFeas[0], geotype)
                    })
            } else {
                this.$message.error('该点无位置信息');
            }
    },
        // 获取高亮的要素
        getLightFeatures(data) {
            let that = this
            let features = [], lightColor = 'rgba(0, 255, 255, 0.6)'
            data.forEach(defect => {
                let { endPointXLocation, endPointYLocation, startPointXLocation, startPointYLocation } = defect
                if (startPointXLocation && startPointYLocation && endPointXLocation && endPointYLocation) {
                    let startPoint = this.projUtil.transform([Number(startPointXLocation), Number(startPointYLocation)], this.currentDataProjName, 'proj84')
                    let endPoint = this.projUtil.transform([Number(endPointXLocation), Number(endPointYLocation)], this.currentDataProjName, 'proj84')

                    let lineCar3 = CesiumUtil.degreesArray2Car3([startPoint, endPoint].flat())
                    let fea = this.getPrimity('line', lineCar3, { color: lightColor, width: 7 }, { ...defect, coors: [startPoint, endPoint]})
                    if (!isExist(defect.expNo)) {
                        features.push(fea)
                    }
                }
            })
            return features
            function isExist (expNo) {
                return features.some(f => f.geometryInstances.id[that.propertyName].expNo === expNo)
            }
        },
    lightFea (feaid, layerName) {
      let field = layerName === "pipeDefectLayer" ? "id" : 'expNo'
      let feas = this[layerName].getSource().getFeatures()
      let fea = feas.find(fea => fea.get(field) === feaid)
      if (fea) {
        let geometry = fea.getGeometry().clone()
        this.lightLayer.getSource().clear()
        this.lightLayer.getSource().addFeature(new Feature({ geometry }))
        let center = mapUtil.getCenter(fea)
        return center
      } else {
        this.$message.warning('该点无位置信息')
      }
    },
    openDetails() {
      console.log('打开详情', this.DetailsForm)
      // 管道缺陷传stateId
      // 评估传id
      this.pipeId = this.DetailsForm.stateId
      this.dialogFormVisible = true
    },
    openDetailsDialog(id) {
      this.pipeId = id
      console.log('打开检测详情', this.DetailsId)
      this.dialogFormVisible = true
    },
    // 详情关闭
    dialogClose(bool) {
      this.dialogFormVisible = bool
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
.i-scrollbar {
  overflow: auto;
  @include scrollBar;
}

.testResultDiagram {
  padding: 0 12px !important;
  overflow-y: scroll;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  .see-btn {
    display: flex;
    flex-direction: row-reverse;
  }
  ul,
  li {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
  }
}
.title {
  padding-left: 16px;
  margin: 15px 0;
}
.title::before {
  position: relative;
  left: -10px;
  top: 2px;
  content: '';
  width: 5px;
  height: 18px;
  display: inline-block;
  background-color: #2d74e7;
}
.thematicMap-list {
  display: flex;
  flex-direction: column;
  .transition-box {
    padding: 6px 0 6px 44px;
    box-sizing: border-box;
  }
}
.line-color {
  width: 140px;
  height: 10px;
  border: 1px solid #666;
  background: linear-gradient(to right, #3ce10f, #ff0602); /* 标准的语法 */
}
.text-mix-max {
  width: 140px;
  display: flex;
  padding: 8px 0;
  box-sizing: border-box;
  justify-content: space-between;
}
.type-img-3 {
  cursor: pointer;
  margin: 10px 0 10px 20px !important;
  &::before {
    position: relative;
    left: -20px;
    top: -2px;
    content: '';
    width: 10px;
    height: 10px;
    background-image: url('../../../../assets/images/traingle3.png');
    background-size: 100% 100%;
    display: inline-block;
  }
}
.type-img-2 {
  cursor: pointer;
  margin: 10px 0 10px 20px !important;
  &::before {
    position: relative;
    left: -20px;
    top: -2px;
    content: '';
    width: 10px;
    height: 10px;
    background-image: url('../../../../assets/images/traingle2.png');
    background-size: 100% 100%;
    display: inline-block;
  }
}
.type-img-1 {
  cursor: pointer;
  margin: 10px 0 10px 20px !important;
  &::before {
    position: relative;
    left: -20px;
    top: -2px;
    content: '';
    width: 10px;
    height: 10px;
    background-image: url('../../../../assets/images/traingle1.png');
    background-size: 100% 100%;
    display: inline-block;
  }
}
.type-img-4 {
  cursor: pointer;
  margin: 10px 0 10px 20px !important;
  &::before {
    position: relative;
    left: -20px;
    top: -2px;
    content: '';
    width: 10px;
    height: 10px;
    background-image: url('../../../../assets/images/traingle4.png');
    background-size: 100% 100%;
    display: inline-block;
  }
}
.type-img-0 {
  cursor: pointer;
  margin: 10px 0 10px 20px !important;
  &::before {
    position: relative;
    left: -20px;
    top: -2px;
    content: '';
    width: 10px;
    height: 10px;
    background-image: url('../../../../assets/images/traingle0.png');
    background-size: 100% 100%;
    display: inline-block;
  }
}
.type-circle {
  cursor: pointer;
  margin: 10px 0 10px 20px !important;
  &::before {
    position: relative;
    left: -20px;
    top: -2px;
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
  }
}
.type-square {
  cursor: pointer;
  margin: 10px 0 10px 20px !important;
  &::before {
    position: relative;
    left: -20px;
    top: -2px;
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: transparent !important;
    display: inline-block;
  }
}
.type-line {
  cursor: pointer;
  margin: 10px 0 10px 18px !important;
  &::before {
    position: relative;
    top: -2px;
    left: -20px;
    content: '';
    width: 40px;
    height: 8px;
    display: inline-block;
  }
}
.item-un {
  &::before {
    background-color: #070358;
    border: 1px solid #070358;
  }
}
.item-blue {
  &::before {
    background-color: blue;
    border: 1px solid blue;
  }
}
.item-green {
  &::before {
    background-color: #0c9923;
    border: 1px solid #0c9923;
  }
}
.item-pink {
  &::before {
    background-color: #f405ff;
    border: 1px solid #f405ff;
  }
}
.item-red {
  &::before {
    background-color: #ff0000;
    border: 1px solid #ff0000;
  }
}
#popupCardDefRes {
  .histroyPipeData {
    // 详情卡片的样式
    .detailsCrad {
      position: fixed;
      top: 100px;
      right: 24px;
      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;
            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;
            }
            /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;
            }
          }
        }
      }
    }
  }
  &::after {
    content: '';
    display: block;
    width: 45px;
    height: 27px;
    background: url('../../components/testImg/corner.png');
    position: absolute;
    bottom: -26px;
    left: 50%;
    transform: translate(-50%, 0);
  }
}

#popupCardRes {
  &::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>