管线分析

ChenZeping

2021-05-08 963dbc402ac093f39c4a82036561ba16710f0fed

管线分析

 src/assets/images/other.png

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

@@ -5,20 +5,20 @@
        <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="地图上点击选择需要进行连通分析的管线">起始管线
                           title="地图上点击选择需要进行连通分析的管段">起始管段
                </el-button>
                <el-button type="primary" @click="linkClickEnd" size="mini" style="margin-bottom: 5px;"
                           title="地图上点击与所选管线连通管线">结束管线
                           title="地图上点击与所选管段连通管段">结束管段
                </el-button>
                <el-button type="primary" @click="linkQuery" size="mini" style="margin-bottom: 5px;"
                           title="根据起始、结束管线进行连通性分析">连通性分析
                           title="根据起始、结束管段进行连通性分析">连通性分析
                </el-button>
                <el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;"
                           title="根据起始、结束管线进行连通性分析">清除
                           title="根据起始、结束管段进行连通性分析">清除
                </el-button>
                <!--        <el-scrollbar style="height:450px">-->
                <!--          <el-card shadow="hover">-->
                <span class="fixed-style">起始管线</span>
                <span class="fixed-style">起始管段</span>
                <el-table
                        class="tableBox"
                        height="100"
@@ -29,7 +29,7 @@
                        style="width: 100%" size="mini">
                    <el-table-column
                            prop="datasource"
                            label="管线类型"
                            label="管段类型"
                    >
                    </el-table-column>
                    <el-table-column
@@ -37,7 +37,7 @@
                            sortable
                            width="100"
                            prop="pipecode"
                            label="管线名称"
                            label="管段名称"
                    >
                    </el-table-column>
                    <el-table-column
@@ -64,7 +64,7 @@
                        </template>
                    </el-table-column>
                </el-table>
                <span class="fixed-style">结束管线</span>
                <span class="fixed-style">结束管段</span>
                <el-table
                        class="tableBox"
                        height="100"
@@ -75,7 +75,7 @@
                        style="width: 100%" size="mini">
                    <el-table-column
                            prop="datasource"
                            label="管线类型"
                            label="管段类型"
                    >
                    </el-table-column>
                    <el-table-column
@@ -83,7 +83,7 @@
                            sortable
                            width="100"
                            prop="pipecode"
                            label="管线名称"
                            label="管段名称"
                    >
                    </el-table-column>
                    <el-table-column
@@ -121,7 +121,7 @@

                    <el-table-column
                            prop="material"
                            label="管线类型"
                            label="管段类型"
                    >
                    </el-table-column>
                    <el-table-column
@@ -129,7 +129,7 @@
                            sortable
                            width="100"
                            prop="pipecode"
                            label="管线名称"
                            label="管段名称"
                    >
                    </el-table-column>
                    <el-table-column
@@ -164,15 +164,15 @@
                <el-row>
                    <span>爆管（相关开关）</span>
                    <el-button type="primary" @click="bgClick" size="mini" style="margin-bottom: 5px;"
                               title="地图上点击选择发生爆管的管线">
                        选择管线
                               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>
                <span class="fixed-style">发生爆裂的管段</span>
                <el-table
                        max-height="200"
                        class="tableBox"
@@ -183,7 +183,7 @@
                    <el-table-column
                            :show-overflow-tooltip="true"
                            prop="pipecode"
                            label="管线类型"
                            label="管段类型"
                    >
                    </el-table-column>
                    <el-table-column
@@ -191,7 +191,7 @@
                            sortable
                            width="100"
                            prop="pipecode"
                            label="管线名称"
                            label="管段名称"
                    >
                    </el-table-column>
                    <el-table-column
@@ -231,7 +231,7 @@
                    <el-table-column
                            :show-overflow-tooltip="true"
                            prop="pipecode"
                            label="管线类型"
                            label="管段类型"
                    >
                    </el-table-column>
                    <el-table-column
@@ -239,7 +239,7 @@
                            :show-overflow-tooltip="true"
                            width="100"
                            prop="pipecode"
                            label="管线名称"
                            label="管段名称"
                    >
                    </el-table-column>
                    <el-table-column
@@ -273,8 +273,8 @@
            </el-tab-pane>
            <el-tab-pane label="流向" name="third">
                <el-button type="primary" @click="selectPipeLine" size="mini" style="margin-bottom: 5px;"
                           title="地图上点击要显示流向的管线">
                    选择管线
                           title="地图上点击要显示流向的管段">
                    选择管段
                </el-button>
                <el-table
                        max-height="200"
@@ -283,7 +283,7 @@
                    <el-table-column
                            :show-overflow-tooltip="true"
                            prop="pipecode"
                            label="管线类型"
                            label="管段类型"
                    >
                    </el-table-column>
                    <el-table-column
@@ -291,7 +291,7 @@
                            sortable
                            width="100"
                            prop="pipecode"
                            label="管线名称"
                            label="管段名称"
                    >
                    </el-table-column>
                    <el-table-column
@@ -333,7 +333,7 @@
                    <el-table-column
                            :show-overflow-tooltip="true"
                            prop="pipecode"
                            label="管线类型"
                            label="管段类型"
                    >
                    </el-table-column>
                    <el-table-column
@@ -341,7 +341,7 @@
                            width="100"
                            sortable
                            prop="pipecode"
                            label="管线名称"
                            label="管段名称"
                    >
                    </el-table-column>
                    <el-table-column
@@ -383,7 +383,7 @@
                </el-button>
                <!--        <el-card class="box-card">-->
                <div slot="header" class="fixed-style">
                    <span>管线查询结果</span>
                    <span>管段查询结果</span>
                </div>
                <el-table
                        class="tableBox"
@@ -392,12 +392,12 @@
                        style="width: 100%" @row-click="selectRow" size="mini">
                    <el-table-column
                            prop="pipename"
                            label="管线名称"
                            label="管段名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="mediumtype"
                            label="管线类型"
                            label="管段类型"
                            width="180">
                    </el-table-column>
                    <el-table-column
@@ -430,6 +430,7 @@
import eventBus from '../../../../eventBus'
import DrawLine from './AnalysisChoose/DrawLine'
import mapApi from '../../../../api/mapApi'
import iconUrl from '../../../../assets/images/other.png'

export default {
  name: 'SewersAnalysis',
@@ -459,28 +460,28 @@
      bgMarker: null,
      hdmParam: null,

      // 连通性  // 1  连通性起始管线   0 连通性结束管线 用来判断是点击了起始  还是结束管线
      // 连通性  // 1  连通性起始管段   0 连通性结束管段 用来判断是点击了起始  还是结束管段
      linkType: 1,
      // 连通性 起始管线 表格数据
      // 连通性 起始管段 表格数据
      tableDataLinkStart: [],
      // 连通性 结束管线 表格数据
      // 连通性 结束管段 表格数据
      tableDataLinkEnd: [],
      // 连通性 分析结果 展示 => 连通 || 不连通
      currentLinkIsTrue: '',
      // 连通性 分析结果 表格数据
      tableDataLinkResult: [],

      // 爆管 发生爆裂的管线 table表格数据
      // 爆管 发生爆裂的管段 table表格数据
      bgPipeLine: [],
      // 爆管 需要关闭的阀门 table表格数据
      bgFm: [],

      // 流向 选择的管线 的table表格数据
      // 流向 选择的管段 的table表格数据
      tableDataLiuxiang: [],
      // 流向 分析结果 的table表格数据
      lxTableDataResult: [],

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

      echartsList: []
@@ -564,30 +565,24 @@
    },
    createFlowMarker (point) {
      return window.L.marker(point, {
        icon: window.L.divIcon({
          className: 'dIcon',
          // html: '<div class="plane live">' +
          //     '<div style="position: absolute;' +
          //     '    width: 20px;' +
          //     '    height: 20px;' +
          //     '    border-radius: 50%;' +
          //     '  content: \'\'; background-color: #FF664A;"/>' +
          //     '<span></span><span></span></div></>',
          iconSize: [36, 36]
        icon: window.L.icon({
          iconUrl: iconUrl,
          iconSize: [30, 30],
          iconAnchor: [15, 15]
        })
      })
    },

    // 连通性 ===> 地图点击起始管线e
    // 连通性 ===> 地图点击起始管段e
    linkClickStart (e) {
      // console.log(e)
      // console.log('地图点击起始管线')
      // console.log('地图点击起始管段')
      this.linkType = 1
      this.selectPipeLine()
    },
    // 连通性 起始管线 table列表数据 选择数据事件 的点击事件
    // 连通性 起始管段 table列表数据 选择数据事件 的点击事件
    linkSelectStart (e) {
      // console.log('选择起始管线')
      // console.log('选择起始管段')
      // this.$refs.singleTable.setCurrentRow(e)
      this.currentSelectStart = e
      if (this.currentSelectStartLine != null) {
@@ -605,15 +600,15 @@
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectStartLine.getBounds())
    },
    // 连通性 ===> 地图点击结束管线
    // 连通性 ===> 地图点击结束管段
    linkClickEnd () {
      console.log('地图点击结束管线')
      // console.log('地图点击结束管段')
      this.linkType = 0
      this.selectPipeLine()
    },
    // 连通性 结束管线 table列表数据 选择数据事件 的点击事件
    // 连通性 结束管段 table列表数据 选择数据事件 的点击事件
    linkSelectEnd (e) {
      console.log('选择结束管线')
      console.log('选择结束管段')
      this.currentSelectEnd = e

      // 做判断remove
@@ -643,9 +638,9 @@
        })
        this.linkPipeline = []
      }
      // 判断 如果起始管线 结束管线没有数据 则返回false 提示还未选择起始/结束管线
      // 判断 如果起始管段 结束管段没有数据 则返回false 提示还未选择起始/结束管段
      if (this.currentSelectStart === null || this.currentSelectEnd === null) {
        this.$message('请选择起始管线和结束管线')
        this.$message('请选择起始管段和结束管段')
        return false
      }

@@ -654,14 +649,16 @@
        startLineID: this.currentSelectStart.pipesegcode,
        endLineID: this.currentSelectEnd.pipesegcode
      }
      console.log(param)
      // console.log(param)
      // 请求接口和数据
      const res = await mapApi.findConnectedPipelines(param)
      console.log(res)
      // console.log(res)
      // 判断数据结果 === 0 则没有请求到数据
      if (res.data.length === 0) {
        this.$message('没有找到连通的管线')
        this.$message('没有找到连通的管段')
        // if (this.tableDataLinkStart === [] && this.tableDataLinkEnd === []) {
        this.currentLinkIsTrue = '不连通'
        // }
        return
      }
      this.tableDataLinkResult = res.data
@@ -692,9 +689,8 @@
    },
    // 连通性 分析结果table列表数据选择点击事件
    linkResultSelect (e) {
      console.log('连通性分析结果列表点击')
      console.log(e)

      // console.log('连通性分析结果列表点击')
      // console.log(e)
      const geom = JSON.parse(e.geomText)
      if (this.currentSelectResultLine != null) {
        this.currentSelectResultLine.remove()
@@ -730,12 +726,12 @@
      }
    },

    // 爆管 ===> 选择管线
    // 爆管 ===> 选择管段
    bgClick () {
      this.selectPipeLine()
    },
    async bgSelect (e) {
      console.log('选择爆管管线')
      console.log('选择爆管管段')
      console.log(e)
      this.bgFm = []
      if (this.bgMarker != null) {
@@ -817,7 +813,7 @@
      const point = [e.startControlPoint.y, e.startControlPoint.x]
      const marker = this.createFlowMarker(point)
      marker.addTo(window.map)
      window.map.flyTo(point, 16)
      window.map.flyTo(point, 17)
    },

    // 流向分析结果table列表数据点击
@@ -880,7 +876,7 @@
        this.flowPipeLine = null
      }
    },
    // 流向-管线选择
    // 流向-管段选择
    selectRowLiuXiang (e) {
      // 选择要显示的流向线
      // console.log('选择要显示的流向线')
@@ -1118,10 +1114,6 @@
        background: none !important;
    }

    /deep/ .el-table__fixed-right-patch {
        /*display: none;*/
    }

    /deep/ .el-table__body tr.current-row > td {
        background: rgba(0, 16, 30, 1) !important;
    }
@@ -1130,6 +1122,11 @@
        background: rgba(0, 16, 30, 1) !important;
    }

    /*scroll右侧占位*/
    /deep/ .el-table__fixed-right-patch {
        display: none;
    }

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