企业图层展示控制

陈泽平

2021-05-17 db929db466201b100a5af70add4a8f6b46bb8b5d

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

@@ -4,18 +4,21 @@
        <!--<el-card>-->
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
            <el-tab-pane label="连通性" name="first">
               <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>
                <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>
                <!--        <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" highlight-current-row style="width: 100%" size="mini">
                <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" 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 width="40" fixed="right" class-name="fixed-table" label="操作">
@@ -25,9 +28,11 @@
                    </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 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 :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="操作" width="40">
@@ -37,9 +42,11 @@
                    </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" style="width: 100%" size="mini">
                <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" 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="操作" width="40">
@@ -55,16 +62,20 @@
            <el-tab-pane label="爆管" style="color: #cccccc" name="second">
                <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-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 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 :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>
@@ -72,11 +83,15 @@
                    </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 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 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>
@@ -86,12 +101,17 @@
                <!--        </el-card>-->
            </el-tab-pane>
            <el-tab-pane label="流向" name="third">
                <el-button type="primary" @click="selectPipeLine" size="mini" highlight-current-row title="地图上点击要显示流向的管段">选择管段</el-button>
                <el-button type="primary" @click="selectPipeLine" size="mini" highlight-current-row
                           title="地图上点击要显示流向的管段">选择管段
                </el-button>
                <el-table max-height="200" class="tableBox" highlight-current-row :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 :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="60">
                        <template slot-scope="scope">
                            <el-button @click="lxQuery(scope.row)" type="text" size="small">显示流向</el-button>
@@ -99,11 +119,15 @@
                    </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 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 :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="操作" width="40">
                        <template slot-scope="scope">
                            <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
@@ -113,18 +137,19 @@
            </el-tab-pane>
            <el-tab-pane label="横断面" name="fourth">
                <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-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" height="150" max-height="200" highlight-current-row style="width: 100%" @row-click="selectRow" size="mini">
                <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="pipename" label="管段名称"></el-table-column>
                    <el-table-column prop="mediumtype" label="管段类型" width="80"></el-table-column>
                    <el-table-column class-name="fixed-table" fixed="right" label="图表"  width="40">
                    <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>
@@ -139,8 +164,10 @@
                    <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width: 350px;height:200px;"></div>
                </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" -->
                <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>-->
@@ -153,7 +180,8 @@
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 iconUrl from '../../../../assets/images/other.png'

export default {
  name: 'SewersAnalysis',
@@ -283,10 +311,17 @@
    },
    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]
        })
      })
    },
@@ -491,14 +526,15 @@

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

      const point = JSON.parse(this.bgPoint.geomText)
      // const point = JSON.parse(this.bgPoint.geomText)

      const p = [point.coordinates[1], point.coordinates[0]]
      // const p = [point.coordinates[1], point.coordinates[0]]

      this.bgMarker = this.createFlowMarker(p)
      // 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) => {
@@ -525,12 +561,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列表数据点击
@@ -803,13 +840,15 @@
</script>

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

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

    /deep/ .el-table .has-gutter tr th {
        border: none !important;
    }
@@ -836,13 +875,14 @@
    /deep/ .el-table__fixed-right::before, .el-table__fixed::before {
        background: none;
    }
    /deep/ .el-table__empty-text{

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

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

    /deep/ .el-table__body tr.current-row > td {
@@ -858,7 +898,7 @@
        display: none;
    }

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