Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetw...

徐旺旺

2021-05-21 e2bf4ab5fbcc29209d74101d99c0690d4ffbe234

 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue

@@ -1,68 +1,252 @@
<template>
  <div class="connectivity">
    <el-row>
      <span class="tube-span">爆管(相关开关)</span>
      <el-button type="primary" size="mini">选择管线</el-button>
      <el-button type="primary" size="mini">清除</el-button>
    </el-row>
    <el-card class="box-card">
      <span class="clearfix">发生爆裂的管段</span>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="date"
            label="管线名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="管线类型"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="操作">
        </el-table-column>
      </el-table>
      <span class="clearfix">需要关闭的阀门</span>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="date"
            label="管线名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="管线类型"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="操作">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
    <div class="connectivity">
        <el-row>
            <span>爆管（相关开关）</span>
            <el-button type="primary" @click="bgClick" size="mini" title="地图上点击选择发生爆管的管段">选择管段</el-button>
            <el-button type="primary" @click="handleClick" size="mini" title="清除绘制">清除</el-button>
        </el-row>
        <!--        <el-card shadow="hover">-->
        <span class="fixed-style">发生爆裂的管段</span>
        <el-table max-height="200" class="tableBox" ref="singleTable" highlight-current-row :data="bgPipeLine"
                  style="width: 100%" size="mini">
            <el-table-column :show-overflow-tooltip="true" prop="pipecode" label="管段类型"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
                             label="管段名称"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
                             label="起点编号"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
                             label="终点编号"></el-table-column>
            <el-table-column class-name="fixed-table" fixed="right" label="操作" width="40">
                <template slot-scope="scope">
                    <el-button @click="bgSelect(scope.row)" type="text" size="small">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <span class="fixed-style">需要关闭的阀门</span>
        <el-table class="tableBox" highlight-current-row max-height="200" :data="bgFm" @row-click="bgFmClick"
                  style="width: 100%" size="mini">
            <el-table-column :show-overflow-tooltip="true" prop="pipecode" label="管段类型"></el-table-column>
            <el-table-column sortable :show-overflow-tooltip="true" width="100" prop="pipecode"
                             label="管段名称"></el-table-column>
            <el-table-column sortable :show-overflow-tooltip="true" width="100" prop="pipecode"
                             label="起点编号"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
                             label="终点编号"></el-table-column>
            <el-table-column class-name="fixed-table" fixed="right" label="操作" width="40">
                <template slot-scope="scope">
                    <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--        </el-card>-->
    </div>
</template>

<script>
import mapApi from '../../../../../api/mapApi'
import { pulseEffect } from '../../../../../utils/utils'
import { createFlowLine } from './PublicWay'
import eventBus from '../../../../../eventBus'

export default {
  name: 'Tube',
  data () {
    return {
      tableData: []
      bgPoint: null,
      bgMarker: null,
      hdmParam: null,
      // 爆管 发生爆裂的管段 table表格数据
      bgPipeLine: [],
      // 爆管 需要关闭的阀门 table表格数据
      bgFm: [],
      linkPipeline: [],
      currentSelectEndLine: null
    }
  },
  mounted () {
    this.$nextTick(() => {
      eventBus.$on('tabData-change', (obj) => {
        if (obj) {
          this.handleClick()
        }
      })
    })
  },
  methods: {
    handleClick () {
      this.clearLinkPipe()
      this.linkClear()
      this.bgFm = []
      this.bgPipeLine = []
    },
    linkClear () {
      if (this.currentSelectStartLine != null) {
        this.currentSelectStartLine.remove()
        this.currentSelectStartLine = null
      }
      if (this.currentSelectEndLine != null) {
        this.currentSelectEndLine.remove()
        this.currentSelectEndLine = null
      }
      if (this.currentSelectResultLine != null) {
        this.currentSelectResultLine.remove()
        this.currentSelectResultLine = null
      }
    },
    // 地图上点击
    selectPipeLine () {
      window.map.on('click', this.selectClick)
      // // 关闭弹窗
      window.layerFactory.clickSwitch = false
    },
    // 地图上点击回调
    selectClick (e) {
      // console.log(e)
      window.map.off('click', this.selectClick)
      const point = [e.latlng.lng, e.latlng.lat]
      this.getPipeLine(point)
    },
    // 点击获取判断数据
    async getPipeLine (point) {
      const param = {
        x: point[0],
        y: point[1],
        radius: 3
      }
      // 根据参数请求接口数据
      const res = await mapApi.findPipelineByClickPoint(param)
      console.log(res)
      this.bgPipeLine = res.data
    },
    // 清楚分析结果
    clearLinkPipe () {
      if (this.linkPipeline.length > 0) {
        this.linkPipeline.forEach((itm, idx) => {
          itm.remove()
        })
      }
      this.linkPipeline = []
      if (this.currentSelectEndLine != null) {
        this.currentSelectEndLine.remove()
        this.currentSelectEndLine = null
      }
    },
    // 爆管 ===> 选择管段
    bgClick () {
      this.selectPipeLine()
    },
    async bgSelect (e) {
      // console.log('选择爆管管段')
      // console.log(e)
      this.bgFm = []
      if (this.bgMarker != null) {
        this.bgMarker.remove()
        this.bgMarker = null
      }

      if (this.currentSelectEndLine != null) {
        this.currentSelectEndLine.remove()
        this.currentSelectEndLine = null
      }
      this.clearLinkPipe()
      // 给选择中的数据添加设置样式
      const geom = JSON.parse(e.geomText)
      this.currentSelectEndLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return {
            weight: 10,
            color: 'rgba(200,0,200,.6)'
          }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectEndLine.getBounds())

      // 数据请求参数
      const param = {
        lineID: e.pipesegcode
      }
      const res = await mapApi.findLeakages(param)
      // console.log(res)

      const len = res.data.length
      if (len === 0) {
        this.$message('未找到需要关闭的阀门')
        return
      }
      res.data.reverse()
      this.bgFm = res.data
      // console.log(res.data)

      this.bgPoint = res.data[0].startControlPoint

      // const point = JSON.parse(this.bgPoint.geomText)
      // const p = [point.coordinates[1], point.coordinates[0]]
      // this.bgMarker = this.createFlowMarker(p)
      // this.bgMarker = pulseEffect(p)
      // this.bgMarker.bindTooltip(this.bgPoint.pointnumbe)
      // this.bgMarker.addTo(window.map)
      // window.map.flyTo(p)

      const linkPipe = []
      res.data.forEach((itm, idx) => {
        const geom = JSON.parse(itm.geomText)
        const points = []
        geom.coordinates.forEach((it, id) => {
          const item = it.reverse()
          if (it.length > 2) {
            item.shift()
          }
          points.push(item)
        })
        linkPipe.push(points)
      })

      linkPipe.forEach((itm, idx) => {
        const param1 = {
          points: itm,
          option: {
            dashArray: '15 15',
            dashSpeed: -30,
            color: '#ffff00'
          }
        }
        const line = createFlowLine(param1)
        this.linkPipeline.push(line)
      })
    },
    bgFmClick (e) {
      // console.log('点击影响的阀门')
      // console.log(e)
      // const point = [e.data[0][0], e.data[0][1]]
      const point = [e.startControlPoint.y, e.startControlPoint.x]
      pulseEffect(point)
      // const marker = this.createFlowMarker(point)
      // marker.addTo(window.map)
      // window.map.flyTo(point, 17)
    },
    // 定位方法事件
    linkResultSelect (e) {
      // console.log('连通性分析结果列表点击')
      console.log(e)
      const geom = JSON.parse(e.geomText)
      if (this.currentSelectResultLine != null) {
        this.currentSelectResultLine.remove()
        this.currentSelectResultLine = null
      }
      this.currentSelectResultLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return {
            color: 'rgba(255,0,0,.6)',
            weight: 10
          }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
    }
  }
}
</script>

<style lang="less" scoped>
.tube-span {
  color: #ffffff !important;
  font-size: 14px;
  margin: 0 15px;
}

</style>