添加企业应急中事件上报/事件处置功能页面

陈泽平

2021-05-24 9706167cee66aa208e538b9d3a5e9ecd88cd7462

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

@@ -1,157 +1,291 @@
<template>
  <div class="connectivity">
    <el-row>
      <el-button type="primary" size="mini" @click="linkClickStart" title="地图上点击选择需要进行连通分析的管段">起始管段</el-button>
      <el-button type="primary" size="mini" @click="linkClickEnd" title="地图上点击与所选管段连通管段">结束管段</el-button>
      <el-button type="primary" size="mini" @click="linkQuery" title="根据起始、结束管段进行连通性分析">连通性分析</el-button>
      <el-button type="primary" size="mini" @click="linkClear" title="根据起始、结束管段进行连通性分析">清除</el-button>
    </el-row>
    <el-card class="box-card">
      <el-scrollbar style="height:2rem">
        <span class="clearfix">起始管段</span>
        <el-table
            ref="singleTable"
            highlight-current-row
            :data="tableData"
            max-height="200"
            style="width: 100%" size="mini">
          <el-table-column
              prop="lineloopna"
              label="管线类型"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="pipecode"
              label="管线名称"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="startpoint"
              label="起点编号"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="endpointnu"
              label="终点编号"
          >
          </el-table-column>
          <el-table-column
              class-name="fixed-tablea"
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
              <el-button @click="linkSelectStart(scope.row)" type="text" size="small">选择</el-button>
            </template>
          </el-table-column>
    <div class="connectivity">
        <el-row>
            <el-button type="primary" @click="linkClickStart" size="mini" title="地图上点击选择需要进行连通分析的管段">起始管段
            </el-button>
            <el-button type="primary" @click="linkClickEnd" size="mini" title="地图上点击与所选管段连通管段">结束管段</el-button>
            <el-button type="primary" @click="linkQuery" size="mini" title="根据起始、结束管段进行连通性分析">连通性分析</el-button>
            <el-button type="primary" @click="handleClick" size="mini" title="根据起始、结束管段进行连通性分析">清除</el-button>
        </el-row>
        <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="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="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>
                </template>
            </el-table-column>
        </el-table>
        <span class="clearfix">结束管段</span>
        <el-table
            :data="tableData"
            style="width: 100%">
          <el-table-column
              prop="date"
              label="管线类型">
          </el-table-column>
          <el-table-column
              prop="name"
              label="管线名称">
          </el-table-column>
          <el-table-column
              prop="province"
              label="起点编号">
          </el-table-column>
          <el-table-column
              prop="city"
              label="终点编号">
          </el-table-column>
          <el-table-column
              class-name="fixed-table"
              fixed="right"
              label="操作">
          </el-table-column>
        <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="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="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>
                </template>
            </el-table-column>
        </el-table>
        <span class="clearfix">分析结果</span>
        <el-table
            :data="tableData"
            style="width: 100%">
          <el-table-column
              prop="date"
              label="管线类型">
          </el-table-column>
          <el-table-column
              prop="name"
              label="管线名称">
          </el-table-column>
          <el-table-column
              prop="province"
              label="起点编号">
          </el-table-column>
          <el-table-column
              prop="city"
              label="终点编号">
          </el-table-column>
          <el-table-column
              class-name="fixed-table"
              fixed="right"
              label="操作">
          </el-table-column>
        <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="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="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>
                </template>
            </el-table-column>

        </el-table>
      </el-scrollbar>
    </el-card>
  </div>
    </div>
</template>

<script>

import mapApi from '../../../../../api/mapApi'
import eventBus from '../../../../../eventBus'
import { createFlowLine } from './PublicWay'

export default {
  name: 'Connectivity',
  data () {
    return {
      // 连通性
      linkType: 1, // 1  连通性起始管段   0 连通性结束管段 用来判断是点击了起始  还是结束管段
      tableData: []
      // 连通性  // 1  连通性起始管段   0 连通性结束管段 用来判断是点击了起始  还是结束管段
      linkType: 1,
      // 连通性 起始管段 表格数据
      tableDataLinkStart: [],
      // 连通性 结束管段 表格数据
      tableDataLinkEnd: [],
      // 连通性 分析结果 展示 => 连通 || 不连通
      currentLinkIsTrue: '',
      // 连通性 分析结果 表格数据
      tableDataLinkResult: [],
      linkPipeline: [],
      currentSelectStart: null,
      currentSelectEnd: null,
      currentSelectStartLine: null,
      currentSelectEndLine: null,
      currentSelectResultLine: null,
      flowPipeLine: null
    }
  },
  mounted () {
    this.$nextTick(() => {
      eventBus.$on('tabData-change', (obj) => {
        if (obj) {
          this.handleClick()
        }
      })
    })
  },
  methods: {
    // 地图点击起始管段
    linkClickStart () {
      console.log('地图点击起始管段')
    // 地图上点击
    selectPipeLine () {
      window.map.on('click', this.selectClick)
      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)
    },
    // 点击获取判断数据
    async getPipeLine (point) {
      const param = {
        x: point[0],
        y: point[1],
        radius: 3
      }
      // 根据参数请求接口数据
      const res = await mapApi.findPipelineByClickPoint(param)
      // console.log(res)
      if (this.linkType === 1) {
        this.tableDataLinkStart = res.data
      } else {
        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) {
      this.linkType = 1
      // this.selectPipeLine()
      this.selectPipeLine()
    },
    // 地图点击结束管段
    // 连通性 起始管段 table列表数据 选择数据事件 的点击事件
    linkSelectStart (e) {
      this.currentSelectStart = e
      if (this.currentSelectStartLine != null) {
        this.currentSelectStartLine.remove()
        this.currentSelectStartLine = null
      }
      const geom = JSON.parse(e.geomText)
      this.currentSelectStartLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return {
            weight: 10,
            color: 'rgba(0,255,0,.6)'
          }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectStartLine.getBounds())
    },
    // 连通性 ===> 地图点击结束管段
    linkClickEnd () {
      console.log('地图点击结束管段')
      // console.log('地图点击结束管段')
      this.linkType = 0
      // this.selectPipeLine()
      this.selectPipeLine()
    },
    // 连通性分析
    linkQuery () {
      console.log('点击连通性分析')
    // 连通性 结束管段 table列表数据 选择数据事件 的点击事件
    linkSelectEnd (e) {
      // console.log('选择结束管段')
      this.currentSelectEnd = e

      // 做判断remove
      if (this.currentSelectEndLine != null) {
        this.currentSelectEndLine.remove()
        this.currentSelectEndLine = null
      }
      // geoGson
      const geom = JSON.parse(e.geomText)
      this.currentSelectEndLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return {
            weight: 10,
            color: 'rgba(255, 247, 0, 0.7)'
          }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectEndLine.getBounds())
    },
    // 清除功能
    linkClear () {
      console.log('点击清除')
    // 连通性查询 结果
    async linkQuery () {
      // 每次查询分析结果制空
      this.tableDataLinkResult = []
      if (this.linkPipeline.length > 1) {
        this.linkPipeline.forEach((itm) => {
          itm.remove()
        })
        this.linkPipeline = []
      }
      // 判断 如果起始管段 结束管段没有数据 则返回false 提示还未选择起始/结束管段
      if (this.currentSelectStart === null || this.currentSelectEnd === null) {
        this.$message('请选择起始管段和结束管段')
        return false
      }

      // 请求数据时的参数
      const param = {
        startLineID: this.currentSelectStart.pipesegcode,
        endLineID: this.currentSelectEnd.pipesegcode
      }
      // console.log(param)
      // 请求接口和数据
      const res = await mapApi.findConnectedPipelines(param)
      // console.log(res)
      // 判断数据结果 === 0 则没有请求到数据
      if (res.data.length === 0) {
        this.$message('没有找到连通的管段')
        // 进行判断
        this.currentLinkIsTrue = '不连通'
        return
      }
      this.tableDataLinkResult = res.data
      this.currentLinkIsTrue = '连通'
      // table 数组数据置空
      const linkPipe = []
      // 数据遍历geoJson
      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)
      })
    },
    // 选择起始管段
    linkSelectStart () {
      console.log('选择起始管段')
    // 定位方法事件
    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>
/deep/ .fixed-tablea {
  background: rgba(0, 16, 30, 1) !important;
}
/deep/ .el-table__fixed-right::before {
  background: none;
}
</style>