问题修改

QibolinCzp

2021-05-14 2775d5f5cee087361e9e85e10ff55665e5ed0839

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

@@ -4,152 +4,45 @@
        <!--<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-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"
                        max-height="200"
                        highlight-current-row
                        :data="tableDataLinkStart"
                        @row-click="linkSelectStart"
                        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="操作"
                    >
                <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 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="操作">
                        <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="操作"
                    >
                <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="操作" 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="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="操作"
                    >
                <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 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">
                        <template slot-scope="scope">
                            <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
                        </template>
@@ -159,110 +52,32 @@
                <!--</el-card>-->
                <!--</el-scrollbar>-->
            </el-tab-pane>
            <el-tab-pane label="爆管" style=";color: #cccccc" name="second">
            <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-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-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="操作"
                    >
                <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="操作" width="40">
                        <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="lineloopna"
                            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="startpoint"
                            label="起点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="endpointnu"
                            label="终点编号"
                    >
                    </el-table-column>

                    <el-table-column
                            class-name="fixed-table"
                            fixed="right"
                            label="操作"
                    >
                <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="操作" width="40">
                        <template slot-scope="scope">
                            <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
                        </template>
@@ -271,152 +86,61 @@
                <!--        </el-card>-->
            </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"
                    >
                <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 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>
                        </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="操作"
                    >
                <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="操作" 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-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">-->
                <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>
                    <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="图表查看"
                    >
                <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">
                        <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>-->
@@ -429,6 +153,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',
@@ -440,7 +165,10 @@
      map: window.map,

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

      flowPipeLine: null,

      // 用于判断
@@ -478,10 +206,8 @@
      // 流向 分析结果 的table表格数据
      lxTableDataResult: [],

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

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

    }
  },
@@ -496,7 +222,8 @@
  methods: {
    // tab切换
    handleClick (tab, event) {
      // console.log(tab, event)
      console.log(event)
      // console.log(tab)
      this.clearLinkPipe()
      this.clearLX()
      this.linkClear()
@@ -512,12 +239,15 @@
      this.lxTableDataResult = []
    },

    // 流向地图上点击
    // 地图上点击
    selectPipeLine () {
      window.map.on('click', this.selectClick)
      // // 关闭弹窗
      window.layerFactory.clickSwitch = false
    },
    // 地图上点击回调
    selectClick (e) {
      // console.log(e)
      window.map.off('click', this.selectClick)
      const point = [e.latlng.lng, e.latlng.lat]
      this.getPipeLine(point)
@@ -527,10 +257,11 @@
      const param = {
        x: point[0],
        y: point[1],
        radius: 5
        radius: 3
      }
      // 根据参数请求接口数据
      const res = await mapApi.findPipelineByClickPoint(param)
      console.log(res)
      if (this.activeName === 'first') {
        if (this.linkType === 1) {
          this.tableDataLinkStart = res.data
@@ -543,8 +274,6 @@
        this.tableDataLiuxiang = res.data
      } else if (this.activeName === 'fourth') {
      }
      // debugger
      console.log(res.data)
    },
    // 流向显示 的方法参数封
    createFlowLine (param) {
@@ -554,31 +283,24 @@
    },
    createFlowMarker (point) {
      return window.L.marker(point, {
        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]
        icon: window.L.icon({
          iconUrl: iconUrl,
          iconSize: [30, 30],
          iconAnchor: [15, 15]
        })
      })
    },

    // 连通性 ===> 地图点击起始管段e
    linkClickStart (e) {
      console.log(e)
      console.log('地图点击起始管段')
      // console.log('地图点击起始管段')
      this.linkType = 1
      this.selectPipeLine()
    },
    // 连通性 起始管段 table列表数据 选择数据事件 的点击事件
    linkSelectStart (e) {
      console.log('选择起始管段')
      // console.log(e)
      // console.log('选择起始管段')
      // this.$refs.singleTable.setCurrentRow(e)
      this.currentSelectStart = e
      if (this.currentSelectStartLine != null) {
@@ -588,20 +310,23 @@
      const geom = JSON.parse(e.geomText)
      this.currentSelectStartLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return { color: 'rgba(0,255,0,.6)' }
          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()
    },
    // 连通性 结束管段 table列表数据 选择数据事件 的点击事件
    linkSelectEnd (e) {
      console.log('选择结束管段')
      // console.log('选择结束管段')
      this.currentSelectEnd = e

      // 做判断remove
@@ -613,14 +338,17 @@
      const geom = JSON.parse(e.geomText)
      this.currentSelectEndLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return { color: 'rgba(200,0,200,.6)' }
          return {
            weight: 10,
            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) => {
@@ -642,10 +370,11 @@
      console.log(param)
      // 请求接口和数据
      const res = await mapApi.findConnectedPipelines(param)
      console.log(res)
      // console.log(res)
      // 判断数据结果 === 0 则没有请求到数据
      if (res.data.length === 0) {
        this.$message('没有找到连通的管段')
        // 进行判断
        this.currentLinkIsTrue = '不连通'
        return
      }
@@ -677,9 +406,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()
@@ -689,7 +417,7 @@
        style: function (feature) {
          return {
            color: 'rgba(255,0,0,.6)',
            weight: 6
            weight: 10
          }
        }
      }).addTo(window.map)
@@ -737,7 +465,10 @@
      const geom = JSON.parse(e.geomText)
      this.currentSelectEndLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return { color: 'rgba(200,0,200,.6)' }
          return {
            weight: 10,
            color: 'rgba(200,0,200,.6)'
          }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectEndLine.getBounds())
@@ -747,7 +478,7 @@
        lineID: e.pipesegcode
      }
      const res = await mapApi.findLeakages(param)
      console.log(res)
      // console.log(res)

      const len = res.data.length
      if (len === 0) {
@@ -756,7 +487,7 @@
      }
      res.data.reverse()
      this.bgFm = res.data
      console.log(res.data)
      // console.log(res.data)

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

@@ -765,7 +496,7 @@
      const p = [point.coordinates[1], point.coordinates[0]]

      this.bgMarker = this.createFlowMarker(p)
      this.bgMarker.bindTooltip(this.bgPoint.pointnumbe)
      // this.bgMarker.bindTooltip(this.bgPoint.pointnumbe)
      this.bgMarker.addTo(window.map)
      window.map.flyTo(p)

@@ -793,12 +524,13 @@
      })
    },
    bgFmClick (e) {
      console.log('点击影响的阀门')
      // console.log('点击影响的阀门')
      console.log(e)
      const point = [e.data[0][0], e.data[0][1]]
      // 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(this.map)
      window.map.flyTo(point, 16)
      marker.addTo(window.map)
      window.map.flyTo(point, 17)
    },

    // 流向分析结果table列表数据点击
@@ -813,7 +545,10 @@
      }
      this.currentSelectResultLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return { color: 'rgba(0,250,255,.6)' }
          return {
            weight: 10,
            color: 'rgba(0,250,255,.6)'
          }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
@@ -858,7 +593,7 @@
        this.flowPipeLine = null
      }
    },
    // 流向-管线选择
    // 流向-管段选择
    selectRowLiuXiang (e) {
      // 选择要显示的流向线
      // console.log('选择要显示的流向线')
@@ -929,6 +664,7 @@
    },
    // 横断面数据请求
    async jdmQuery () {
      this.tableData = []
      if (this.hdmParam == null) {
        this.$message('请先在地图上绘制截断线')
        return false
@@ -943,6 +679,7 @@
        }
        this.tableData.push(obj)
      }
      // console.log(this.tableData, 'this.tableData')
      this.dealWithData(res)
    },
    dealWithData (e) {
@@ -950,6 +687,7 @@
      let tempData
      const storeData = []
      const dataList = []
      this.echartsList = []
      for (let i = 0; i < dataSeries.length; i++) {
        if (storeData.length === 0) {
          storeData.push(name)
@@ -962,7 +700,7 @@
        }
        dataList.push(dataSeries[i].pipelines.oilPipeID)
      }
      console.log(dataList)
      // console.log(dataList)
      // const seriesList = e.data.pointInterval
      // let seriesdata
      // for (let i = 0; i < seriesList.length; i++) {
@@ -975,7 +713,7 @@
    selectRow (dataList) {
      // console.log(dataList)
      // 3. 使用刚指定的配置项和数据，显示图表
      const option = {
      this.option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
@@ -985,10 +723,10 @@
            }
          }
        },
        legend: {
          // data: ['直接访问', '搜索引擎']
          data: dataList
        },
        // legend: {
        //   // data: ['直接访问', '搜索引擎']
        //   data: dataList
        // },
        toolbox: {
          show: false,
          feature: {
@@ -996,10 +734,11 @@
          }
        },
        grid: {
          // left: '3%',
          // right: '4%',
          // bottom: '3%',
          // containLabel: true
          left: '10px',
          right: '0',
          top: '10px',
          bottom: '5px',
          containLabel: true
        },
        xAxis: [
          {
@@ -1010,9 +749,9 @@
              textStyle: {
                color: '#fff'
              }
            },
            }
            // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            data: dataList
            // data: dataList
          }
        ],
        yAxis: [
@@ -1045,13 +784,16 @@
        series: this.echartsList
      }
      this.myChartShow = true
      this.myChart.setOption(option)
      this.myChart.clear()
      this.myChart.setOption(this.option)
    },
    // 横断面清除
    jdmClear () {
      this.hdmParam = null
      this.tableData = []
      this.option = []
      this.myChartShow = false
      this.myChart.clear()
      if (this.measure != null) {
        this.measure.destory()
      }
@@ -1061,32 +803,13 @@
</script>

<style lang="less" scoped>
    /*****滚动条***/
    /deep/ .tableBox {
        .el-table__fixed-right-patch {
            display: none;
        }
    /deep/ .el-tabs .el-tabs__item{
        height: 20px;
        line-height: 20px;
    }

    /deep/ .tableBox::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        /*height: 10px;*/
    /deep/ .el-tabs--border-card>.el-tabs__content{
        padding: 5px;
    }

    /deep/ .tableBox::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        background: #000;
    }

    /deep/ .tableBox::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: @background-color;
        border-radius: 10px;
    }

    /deep/ .el-table .has-gutter tr th {
        border: none !important;
    }
@@ -1099,55 +822,11 @@
        background: none !important;
    }

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

    /deep/ .el-tabs--border-card {
        background: none;
        border: none;
        box-shadow: none;
    }

    /deep/ .el-tabs--border-card > .el-tabs__header {
        background: none;
        border-bottom: none;
        margin: 0;
    }

    /deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
        color: #409EFF;
        background: none;
        border: none;
    }

    /deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item {
        border: none;
    }

    /deep/ .panel-right ::-webkit-scrollbar-thumb {
        background: none;
        border: none;
    }

    /deep/ .el-card {
        //width: 95%;
        //margin: 5px auto;
        //border: none;
        //background: rgba(0, 16, 30, 0.5);
        //border: 0.00521rem solid @color;
        //box-shadow: 0 0 0.03rem @color;
    }

    /deep/ .el-card__body {
        padding: 0;
    }

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

    /deep/ th.is-leaf {
@@ -1157,14 +836,69 @@
    /deep/ .el-table__fixed-right::before, .el-table__fixed::before {
        background: none;
    }
    /deep/ .el-table__empty-text{
        line-height: 170px;
    }

    /deep/ .el-table__fixed-right {
        bottom: 0;
        padding: 0;
        margin: 0;
    /deep/ .el-table__body .el-table__row.hover-row td {
        background: none !important;
        color:yellow;
    }

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

    /deep/ .fixed-table {
        background: rgba(0, 16, 30, 0.9) !important;
        background: rgba(0, 16, 30, 1) !important;
    }

    /*scroll右侧占位*/
    /deep/ .el-table__fixed-right-patch {
        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;*/
    /*}*/

    /*/deep/ .el-tabs--border-card {*/
    /*    background: none;*/
    /*    border: none;*/
    /*    box-shadow: none;*/
    /*}*/

    /*/deep/ .el-tabs--border-card > .el-tabs__header {*/
    /*    background: none;*/
    /*    border-bottom: none;*/
    /*    margin: 0;*/
    /*}*/

    /*/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {*/
    /*    color: #409EFF;*/
    /*    background: none;*/
    /*    border: none;*/
    /*}*/

    /*/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item {*/
    /*    border: none;*/
    /*}*/

    /*/deep/ .panel-right ::-webkit-scrollbar-thumb {*/
    /*    background: none;*/
    /*    border: none;*/
    /*}*/

    /*/deep/ .el-card__body {*/
    /*    padding: 0;*/
    /*}*/
    /*/deep/ .el-table__fixed-right {*/
    /*    bottom: 0;*/
    /*    padding: 0;*/
    /*    margin: 0;*/
    /*}*/
</style>