管线弹框分析修改

陈泽平

2021-05-20 d7c50f6207f0f27f4c20aa96f75b7c0b610b2b23

 src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue

@@ -1,427 +1,54 @@
<template>
    <div class="sewers-analysis-tab">
        <!--<transition name="el-fade-in-linear">-->
        <!--<el-card>-->
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
            <el-tab-pane label="连通性" name="first">
                <el-button type="primary" @click="linkClickStart" size="mini" style="margin-bottom: 5px;"
                           title="地图上点击选择需要进行连通分析的管段">起始管段
                </el-button>
                <el-button type="primary" @click="linkClickEnd" size="mini" style="margin-bottom: 5px;"
                           title="地图上点击与所选管段连通管段">结束管段
                </el-button>
                <el-button type="primary" @click="linkQuery" size="mini" style="margin-bottom: 5px;"
                           title="根据起始、结束管段进行连通性分析">连通性分析
                </el-button>
                <el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;"
                           title="根据起始、结束管段进行连通性分析">清除
                </el-button>
                <!--        <el-scrollbar style="height:450px">-->
                <!--          <el-card shadow="hover">-->
                <span class="fixed-style">起始管段</span>
                <el-table
                        class="tableBox"
                        height="100"
                        max-height="200"
                        :data="tableDataLinkStart"
                        @row-click="linkSelectStart"
                        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"
                            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
                            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="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"
                            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
                            class-name="fixed-table"
                            fixed="right"
                            label="操作"
                    >
                        <template slot-scope="scope">
                            <el-button @click="linkSelectEnd(scope.row)" type="text" size="small">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <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"
                        @row-click="linkResultSelect"
                        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"
                            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
                            class-name="fixed-table"
                            fixed="right"
                            label="操作"
                    >
                        <template slot-scope="scope">
                            <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <!--</el-card>-->
                <!--</el-scrollbar>-->
                <Connectivity></Connectivity>
            </el-tab-pane>
            <el-tab-pane label="爆管" style=";color: #cccccc" name="second">
                <el-row>
                    <span>爆管（相关开关）</span>
                    <el-button type="primary" @click="bgClick" size="mini" style="margin-bottom: 5px;"
                               title="地图上点击选择发生爆管的管段">
                        选择管段
                    </el-button>
                    <el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;" 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="操作"
                    >
                        <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="操作"
                    >
                        <template slot-scope="scope">
                            <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--        </el-card>-->
            <el-tab-pane label="爆管" style="color: #cccccc" name="second">
                <Tube></Tube>
            </el-tab-pane>
            <el-tab-pane label="流向" name="third">
                <el-button type="primary" @click="selectPipeLine" size="mini" style="margin-bottom: 5px;"
                           title="地图上点击要显示流向的管段">
                    选择管段
                </el-button>
                <el-table
                        max-height="200"
                        class="tableBox"
                        :data="tableDataLiuxiang" 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="100"
                    >
                        <template slot-scope="scope">
                            <el-button @click="lxQuery(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="lxTableDataResult"
                        @row-click="lxResultSelect"
                        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"
                            width="100"
                            sortable
                            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="操作"
                    >
                        <template slot-scope="scope">
                            <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <Flow></Flow>
            </el-tab-pane>
            <el-tab-pane label="横断面" name="fourth">
                <el-button type="primary" @click="drawLine" size="mini" style="margin-bottom: 5px;"
                           title="地图上绘制要进行分析截断面的线">
                    绘制线段
                </el-button>
                <el-button type="primary" @click="jdmQuery" size="mini" style="margin-bottom: 5px;" title="截断面分析">截断面分析
                </el-button>
                <el-button type="primary" @click="jdmClear" size="mini" style="margin-bottom: 5px;" title="清除截断面分析结果">清除
                </el-button>
                <!--        <el-card class="box-card">-->
                <!--                <CrossSectional></CrossSectional>-->
                <el-row>
                    <el-button type="primary" @click="drawLine" size="mini" title="地图上绘制要进行分析截断面的线">绘制线段</el-button>
                    <el-button type="primary" @click="jdmQuery" size="mini" title="截断面分析">截断面分析</el-button>
                    <el-button type="primary" @click="jdmClear" size="mini" title="清除截断面分析结果">清除</el-button>
                </el-row>
                <!-- <el-card class="box-card">-->
                <div slot="header" class="fixed-style">
                    <span>管段查询结果</span>
                </div>
                <el-table
                        class="tableBox"
                        :data="tableData"
                        max-height="200"
                        style="width: 100%" @row-click="selectRow" size="mini">
                    <el-table-column
                            prop="pipename"
                            label="管段名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="mediumtype"
                            label="管段类型"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            class-name="fixed-table"
                            fixed="right"
                            label="图表查看"
                    >
                        <template slot-scope="scope">
                            <el-button @click="selectRow(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                <el-table class="tableBox" :data="tableData" height="150" max-height="200" highlight-current-row
                          style="width: 100%" @row-click="selectRow" size="mini">
                    <el-table-column prop="mediumtype" label="介质类型" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="x" label="断面(经度)" :show-overflow-tooltip="true" width="80"></el-table-column>
                    <el-table-column prop="y" label="断面(纬度)" :show-overflow-tooltip="true" width="80"></el-table-column>
                    <el-table-column prop="z" label="断面(高程)" :show-overflow-tooltip="true" width="80"></el-table-column>
                    <el-table-column prop="spacing" label="间距(m)" width="80"></el-table-column>
                    <!--                    <el-table-column class-name="fixed-table" fixed="right" label="图表" width="40">-->
                    <!--                        <template slot-scope="scope">-->
                    <!--                            <el-button @click="selectRow(scope.row)" type="text" size="small">查看</el-button>-->
                    <!--                        </template>-->
                    <!--                    </el-table-column>-->
                </el-table>
                <!--        </el-card>-->
                <el-card class="box-card">
                <!--  </el-card>-->
                <!-- <el-card class="box-card">
                    <div slot="header" class="fixed-style">
                        <span>断面图</span>
                    </div>
                    <span v-show="!myChartShow" style="color: #909399;font-size: 12px;">暂无数据</span>
                    <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width: 350px;height:200px;"></div>
                </el-card>
                </el-card> -->
                <span class="fixed-style">断面图</span>
                <span v-show="!myChartShow"
                      style="color: #909399;font-size: 12px;height: 200px;display: block;text-align: center;line-height: 200px">暂无数据</span>
                <div v-show="myChartShow" id="echarts_box" ref="myChart"
                     style="width:350px;height:200px;margin: 0 auto"></div><!-- v-show="myChartShow" -->
            </el-tab-pane>
        </el-tabs>
        <!--</el-card>-->
        <!--</transition>-->
    </div>
</template>

@@ -430,10 +57,20 @@
import eventBus from '../../../../eventBus'
import DrawLine from './AnalysisChoose/DrawLine'
import mapApi from '../../../../api/mapApi'
import iconUrl from '../../../../assets/images/other.png'
import { pulseEffect } from '../../../../utils/utils'
import Connectivity from './AnalysisChoose/Connectivity'
import Tube from './AnalysisChoose/Tube'
import Flow from './AnalysisChoose/Flow'
// import CrossSectional from './AnalysisChoose/CrossSectional'

export default {
  name: 'SewersAnalysis',
  components: {
    Connectivity,
    Tube,
    Flow
    // CrossSectional
  },
  data () {
    return {
      // 地图点击类型 first连通性点击  second爆管点击  third流向点击 fourth横断面
@@ -443,7 +80,9 @@

      myChart: null,
      options: [],
      echartsList: [],
      myChartShow: false,

      flowPipeLine: null,

      // 用于判断
@@ -483,8 +122,7 @@

      // 横断面 管段查询结果 的table表格数据
      tableData: [],

      echartsList: []
      obj: {}

    }
  },
@@ -499,7 +137,8 @@
  methods: {
    // tab切换
    handleClick (tab, event) {
      // console.log(tab, event)
      console.log(event)
      // console.log(tab)
      this.clearLinkPipe()
      this.clearLX()
      this.linkClear()
@@ -518,28 +157,22 @@
    // 地图上点击
    selectPipeLine () {
      window.map.on('click', this.selectClick)
      // // 关闭弹窗
      window.layerFactory.clickSwitch = false
      // 关闭弹窗
      // window.mapManager.clickDialogSwitch = false
    },
    // 地图上点击回调
    selectClick (e) {
      console.log(e)
      // console.log(e)
      window.map.off('click', this.selectClick)
      const point = [e.latlng.lng, e.latlng.lat]
      this.getPipeLine(point)
      // if () {
      //   // 关闭弹窗
      //   window.layerFactory.clickSwitch = false
      // } else {
      //   window.layerFactory.clickSwitch = true
      // }
    },
    // 点击获取判断数据
    async getPipeLine (point) {
      const param = {
        x: point[0],
        y: point[1],
        radius: 5
        radius: 3
      }
      // 根据参数请求接口数据
      const res = await mapApi.findPipelineByClickPoint(param)
@@ -565,25 +198,30 @@
    },
    createFlowMarker (point) {
      return window.L.marker(point, {
        icon: window.L.icon({
          iconUrl: iconUrl,
          iconSize: [30, 30],
          iconAnchor: [15, 15]
        icon: window.L.divIcon({
          className: 'dIcon',
          html: '<div class="plane live">' +
              // '<img src="'+require("../../assets/images/map/ship.png")+
              '<div style="position: absolute;' +
              '    width: 20px;' +
              '    height: 20px;' +
              '    border-radius: 50%;' +
              '  content: \'\'; background-color: #FF664A;"/>' +
              '<span></span><span></span></div></>',
          iconSize: [90, 36]
        })
      })
    },

    // 连通性 ===> 地图点击起始管段e
    linkClickStart (e) {
      // console.log(e)
      // console.log('地图点击起始管段')
      this.linkType = 1
      this.selectPipeLine()
    },
    // 连通性 起始管段 table列表数据 选择数据事件 的点击事件
    linkSelectStart (e) {
      // console.log('选择起始管段')
      // this.$refs.singleTable.setCurrentRow(e)
      // console.log(e)
      this.currentSelectStart = e
      if (this.currentSelectStartLine != null) {
        this.currentSelectStartLine.remove()
@@ -608,7 +246,7 @@
    },
    // 连通性 结束管段 table列表数据 选择数据事件 的点击事件
    linkSelectEnd (e) {
      console.log('选择结束管段')
      // console.log('选择结束管段')
      this.currentSelectEnd = e

      // 做判断remove
@@ -622,15 +260,15 @@
        style: function (feature) {
          return {
            weight: 10,
            color: 'rgba(255, 247, 0, 0.6)'
            color: 'rgba(255, 247, 0, 0.7)'
          }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectEndLine.getBounds())
    },
    // 连通性查询
    // 连通性查询 结果
    async linkQuery () {
      // 每次查询分析结果为空
      // 每次查询分析结果制空
      this.tableDataLinkResult = []
      if (this.linkPipeline.length > 1) {
        this.linkPipeline.forEach((itm) => {
@@ -649,16 +287,15 @@
        startLineID: this.currentSelectStart.pipesegcode,
        endLineID: this.currentSelectEnd.pipesegcode
      }
      // console.log(param)
      console.log(param)
      // 请求接口和数据
      const res = await mapApi.findConnectedPipelines(param)
      // console.log(res)
      // 判断数据结果 === 0 则没有请求到数据
      if (res.data.length === 0) {
        this.$message('没有找到连通的管段')
        // if (this.tableDataLinkStart === [] && this.tableDataLinkEnd === []) {
        // 进行判断
        this.currentLinkIsTrue = '不连通'
        // }
        return
      }
      this.tableDataLinkResult = res.data
@@ -687,10 +324,10 @@
        this.linkPipeline.push(line)
      })
    },
    // 连通性 分析结果table列表数据选择点击事件
    // 定位方法事件
    linkResultSelect (e) {
      // console.log('连通性分析结果列表点击')
      // console.log(e)
      console.log(e)
      const geom = JSON.parse(e.geomText)
      if (this.currentSelectResultLine != null) {
        this.currentSelectResultLine.remove()
@@ -731,8 +368,8 @@
      this.selectPipeLine()
    },
    async bgSelect (e) {
      console.log('选择爆管管段')
      console.log(e)
      // console.log('选择爆管管段')
      // console.log(e)
      this.bgFm = []
      if (this.bgMarker != null) {
        this.bgMarker.remove()
@@ -774,14 +411,13 @@

      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)
      // 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)
      // this.bgMarker.addTo(window.map)
      // window.map.flyTo(p)

      const linkPipe = []
      res.data.forEach((itm, idx) => {
@@ -808,12 +444,13 @@
    },
    bgFmClick (e) {
      // console.log('点击影响的阀门')
      console.log(e)
      // console.log(e)
      // const point = [e.data[0][0], e.data[0][1]]
      const point = [e.startControlPoint.y, e.startControlPoint.x]
      const marker = this.createFlowMarker(point)
      marker.addTo(window.map)
      window.map.flyTo(point, 17)
      pulseEffect(point)
      // const marker = this.createFlowMarker(point)
      // marker.addTo(window.map)
      // window.map.flyTo(point, 17)
    },

    // 流向分析结果table列表数据点击
@@ -947,20 +584,31 @@
    },
    // 横断面数据请求
    async jdmQuery () {
      this.tableData = []
      if (this.hdmParam == null) {
        this.$message('请先在地图上绘制截断线')
        return false
      }
      // 已绘制线图 进行绘制横断面数据分析
      const res = await mapApi.getCrossSection(this.hdmParam)
      console.log(res)
      const dataPoint = res.data.point
      // 存储间距list
      const spacingList = res.data.pointInterval.reverse()
      // console.log(spacingList)
      for (let i = 0; i < dataPoint.length; i++) {
        const obj = {
          pipename: dataPoint[i].pipelines.extraData.pipename,
          mediumtype: dataPoint[i].pipelines.extraData.mediumtype
          mediumtype: dataPoint[i].pipelines.extraData.mediumtype,
          x: parseFloat(dataPoint[i].crossPoint3D.x).toFixed(4),
          y: parseFloat(dataPoint[i].crossPoint3D.y).toFixed(4),
          z: parseFloat(dataPoint[i].crossPoint3D.z).toFixed(4),
          spacing: spacingList[i - 1]
        }
        this.tableData.push(obj)
      }
      // spacingList.reverse()
      // console.log(spacingList)
      // console.log(this.tableData)
      this.dealWithData(res)
    },
    dealWithData (e) {
@@ -1015,10 +663,11 @@
          }
        },
        grid: {
          // left: '3%',
          // right: '4%',
          // bottom: '3%',
          // containLabel: true
          left: '10px',
          right: '0',
          top: '10px',
          bottom: '5px',
          containLabel: true
        },
        xAxis: [
          {
@@ -1083,6 +732,15 @@
</script>

<style lang="less" scoped>
    /deep/ .el-tabs .el-tabs__item {
        height: 20px;
        line-height: 20px;
    }

    /deep/ .el-tabs--border-card > .el-tabs__content {
        padding: 5px;
    }

    /deep/ .el-table .has-gutter tr th {
        border: none !important;
    }
@@ -1096,10 +754,10 @@
    }

    /deep/ .fixed-style {
        /*margin: 15px;*/
        font-size: 12px;
        display: inline-block;
        color: #ffffff;
        margin: 15px;
        color: #00fff6;
    }

    /deep/ th.is-leaf {
@@ -1110,8 +768,13 @@
        background: none;
    }

    /deep/ .el-table__empty-text {
        line-height: 170px;
    }

    /deep/ .el-table__body .el-table__row.hover-row td {
        background: none !important;
        color: yellow;
    }

    /deep/ .el-table__body tr.current-row > td {
@@ -1127,6 +790,10 @@
        display: none;
    }

    /deep/ .el-tab-pane {
        min-height: 506.19px;
    }

    /*/deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {*/
    /*    padding-left: 20px;*/
    /*}*/