派生自 wuyushui/SewerAndRainNetwork

陈泽平
2021-05-24 9706167cee66aa208e538b9d3a5e9ecd88cd7462
src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue
@@ -10,11 +10,11 @@
        <span class="fixed-style">起始管段</span>
        <el-table class="tableBox" height="100" max-height="200" :data="tableDataLinkStart"
                  highlight-current-row style="width: 100%" size="mini">
            <el-table-column prop="datasource" label="管段类型"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
            <el-table-column prop="mediumtype" label="管段类型"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipename"
                             label="管段名称"></el-table-column>
            <el-table-column sortable width="100" prop="material" label="起点编号"></el-table-column>
            <el-table-column sortable width="100" prop="material" label="终点编号"></el-table-column>
            <el-table-column sortable width="100" prop="startpointnumber" label="起点编号"></el-table-column>
            <el-table-column sortable width="100" prop="endpointnumber" label="终点编号"></el-table-column>
            <el-table-column width="40" fixed="right" class-name="fixed-table" label="操作">
                <template slot-scope="scope">
                    <el-button @click="linkSelectStart(scope.row)" type="text" size="small">选择</el-button>
@@ -24,11 +24,11 @@
        <span class="fixed-style">结束管段</span>
        <el-table class="tableBox" height="100" max-height="200" highlight-current-row :data="tableDataLinkEnd"
                  @row-click="linkSelectEnd" style="width: 100%" size="mini">
            <el-table-column prop="datasource" label="管段类型"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
            <el-table-column prop="mediumtype" label="管段类型"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipename"
                             label="管段名称"></el-table-column>
            <el-table-column sortable width="100" prop="material" label="起点编号"></el-table-column>
            <el-table-column sortable width="100" prop="material" label="终点编号"></el-table-column>
            <el-table-column sortable width="100" prop="startpointnumber" label="起点编号"></el-table-column>
            <el-table-column sortable width="100" prop="endpointnumber" label="终点编号"></el-table-column>
            <el-table-column class-name="fixed-table" fixed="right" label="操作" width="40">
                <template slot-scope="scope">
                    <el-button @click="linkSelectEnd(scope.row)" type="text" size="small">选择</el-button>
@@ -38,11 +38,11 @@
        <span class="fixed-style">分析结果:<span style="color: red;margin-left: 15px">{{ currentLinkIsTrue }}</span></span>
        <el-table class="tableBox" highlight-current-row max-height="200" :data="tableDataLinkResult"
                  style="width: 100%" size="mini">
            <el-table-column prop="material" label="管段类型"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
            <el-table-column prop="mediumtype" label="管段类型"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipename"
                             label="管段名称"></el-table-column>
            <el-table-column sortable width="100" prop="material" label="起点编号"></el-table-column>
            <el-table-column sortable width="100" prop="material" label="终点编号"></el-table-column>
            <el-table-column sortable width="100" prop="startpointnumber" label="起点编号"></el-table-column>
            <el-table-column sortable width="100" prop="endpointnumber" 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>
@@ -56,6 +56,7 @@
<script>
import mapApi from '../../../../../api/mapApi'
import eventBus from '../../../../../eventBus'
import { createFlowLine } from './PublicWay'
export default {
@@ -81,15 +82,25 @@
      flowPipeLine: null
    }
  },
  mounted () {
    this.$nextTick(() => {
      eventBus.$on('tabData-change', (obj) => {
        if (obj) {
          this.handleClick()
        }
      })
    })
  },
  methods: {
    // 地图上点击
    selectPipeLine () {
      window.map.on('click', this.selectClick)
      // 关闭弹窗
      window.layerFactory.clickSwitch = false
      window.mapManager.clickDialogSwitch = false
    },
    // 地图上点击回调
    selectClick (e) {
      // console.log(e)
      // window.mapManager.clickDialogSwitch = true
      window.map.off('click', this.selectClick)
      const point = [e.latlng.lng, e.latlng.lat]
      this.getPipeLine(point)
@@ -110,9 +121,38 @@
        this.tableDataLinkEnd = res.data
      }
    },
    // 连通性的清除功能
    handleClick () {
      // this.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
      }
      this.currentLinkIsTrue = ''
      this.tableDataLinkStart = []
      this.tableDataLinkEnd = []
      this.tableDataLinkResult = []
      if (this.flowPipeLine != null) {
        this.flowPipeLine.remove()
        this.flowPipeLine = null
      }
      if (this.linkPipeline.length > 0) {
        this.linkPipeline.forEach((itm, idx) => {
          itm.remove()
        })
      }
      this.linkPipeline = []
    },
    // 连通性 ===> 地图点击起始管段e
    linkClickStart (e) {
      // console.log('地图点击起始管段')
      this.linkType = 1
      this.selectPipeLine()
    },
@@ -203,7 +243,11 @@
        const geom = JSON.parse(itm.geomText)
        const points = []
        geom.coordinates.forEach((it, id) => {
          points.push(it.reverse())
          const item = it.reverse()
          if (it.length > 2) {
            item.shift()
          }
          points.push(item)
        })
        linkPipe.push(points)
      })
@@ -238,38 +282,6 @@
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
    },
    // 连通性的清除功能
    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
      }
    },
    handleClick () {
      this.linkClear()
      this.currentLinkIsTrue = ''
      this.tableDataLinkStart = []
      this.tableDataLinkEnd = []
      this.tableDataLinkResult = []
      if (this.flowPipeLine != null) {
        this.flowPipeLine.remove()
        this.flowPipeLine = null
      }
      if (this.linkPipeline.length > 0) {
        this.linkPipeline.forEach((itm, idx) => {
          itm.remove()
        })
      }
      this.linkPipeline = []
    }
  }
}