企业应急修改

陈泽平

2021-05-19 6d45b149ba4164dd87152180ff8e4c365484a5b3

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

@@ -1,461 +1,145 @@
<template>
  <div class="sewers-analysis-tab">
    <transition name="el-fade-in-linear">
      <el-card>
    <div class="sewers-analysis-tab">
        <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="linkClear" size="mini" style="margin-bottom: 5px;"
                       title="根据起始、结束管段进行连通性分析">清除
            </el-button>
            <el-scrollbar style="height:450px">
              <el-card shadow="hover"> <!-- style="height: 300px"-->
                <span class="clearfixs">起始管段</span>
                <el-table
                    ref="singleTable"
                    highlight-current-row
                    :data="tableDataLinkStart"
                    @row-click="linkSelectStart"
                    max-height="200"
                    style="width: 100%" size="mini">
                  <el-table-column
                      prop="lineloopna"
                      label="管线类型"
                  >
                  </el-table-column>
                  <el-table-column
                      sortable
                      width="100"
                      prop="pipecode"
                      label="管线名称"
                  >
                  </el-table-column>
                  <el-table-column
                      sortable
                      width="100"
                      prop="startpoint"
                      label="起点编号"
                  >
                  </el-table-column>
                  <el-table-column
                      sortable
                      width="100"
                      prop="endpointnu"
                      label="终点编号"
                  >
                  </el-table-column>
                  <el-table-column
                      class-name="fixed-table"
                      fixed="right"
                      label="操作"
                  >
                    <template slot-scope="scope">
                      <el-button @click="linkSelectStart(scope.row)" type="text" size="small">选择</el-button>
                    </template>
                  </el-table-column>
            <el-tab-pane label="连通性" name="first">
                <Connectivity></Connectivity>
            </el-tab-pane>
            <el-tab-pane label="爆管" style="color: #cccccc" name="second">
                <Tube></Tube>
            </el-tab-pane>
            <el-tab-pane label="流向" name="third">
                <Flow></Flow>
            </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-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-column prop="pipename" 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>
                <span class="clearfixs">结束管段</span>
                <el-table
                    max-height="200"
                    highlight-current-row
                    :data="tableDataLinkEnd"
                    @row-click="linkSelectEnd"
                    style="width: 100%" size="mini">
                  <el-table-column
                      prop="lineloopna"
                      label="管线类型"
                  >
                  </el-table-column>
                  <el-table-column
                      sortable
                      width="100"
                      prop="pipecode"
                      label="管线名称"
                  >
                  </el-table-column>
                  <el-table-column
                      sortable
                      width="100"
                      prop="startpoint"
                      label="起点编号"
                  >
                  </el-table-column>
                  <el-table-column
                      sortable
                      width="100"
                      prop="endpointnu"
                      label="终点编号"
                  >
                  </el-table-column>
                  <el-table-column
                      class-name="fixed-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="clearfixs">分析结果:<span style="color: red;">{{ currentLinkIsTrue }}</span></span>
                <el-table
                    highlight-current-row
                    max-height="200"
                    :data="tableDataLinkResult"
                    @row-click="linkResultSelect"
                    style="width: 100%" size="mini">

                  <el-table-column
                      prop="lineloopna"
                      label="管线类型"
                  >
                  </el-table-column>
                  <el-table-column
                      sortable
                      width="100"
                      prop="pipecode"
                      label="管线名称"
                  >
                  </el-table-column>
                  <el-table-column
                      sortable
                      width="100"
                      prop="startpoint"
                      label="起点编号"
                  >
                  </el-table-column>
                  <el-table-column
                      sortable
                      width="100"
                      prop="endpointnu"
                      label="终点编号"
                  >
                  </el-table-column>
                  <el-table-column
                      class-name="fixed-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>
          </el-tab-pane>
          <el-tab-pane label="爆管" name="second" style="color: #cccccc">爆管（相关开关）
            <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-card shadow="hover">
              <span class="clearfixs">发生爆裂的管段</span>
              <el-table

                  ref="singleTable"
                  highlight-current-row
                  :data="bgPipeLine"

                  style="width: 100%" size="mini">
                <el-table-column
                    prop="lineloopna"
                    label="管线类型"
                >
                </el-table-column>
                <el-table-column
                    sortable
                    width="100"
                    prop="pipecode"
                    label="管线名称"
                >
                </el-table-column>
                <el-table-column
                    sortable
                    width="100"
                    prop="startpoint"
                    label="起点编号"
                >
                </el-table-column>
                <el-table-column
                    sortable
                    width="100"
                    prop="endpointnu"
                    label="终点编号"
                >
                </el-table-column>
                <el-table-column
                    class-name="fixed-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="clearfixs">需要关闭的阀门</span>
              <el-table
                  highlight-current-row
                  :data="bgFm"
                  @row-click="bgFmClick"
                  style="width: 100%" size="mini">
                <el-table-column
                    prop="lineloopna"
                    label="管线类型"
                >
                </el-table-column>
                <el-table-column
                    sortable
                    width="100"
                    prop="pipecode"
                    label="管线名称"
                >
                </el-table-column>
                <el-table-column
                    sortable
                    width="100"
                    prop="startpoint"
                    label="起点编号"
                >
                </el-table-column>
                <el-table-column
                    sortable
                    width="100"
                    prop="endpointnu"
                    label="终点编号"
                >
                </el-table-column>

                <el-table-column
                    class-name="fixed-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>
          <el-tab-pane label="流向" name="third">
            <el-button type="primary" @click="selectPipeLine" size="mini" style="margin-bottom: 5px;"
                       title="地图上点击要显示流向的管线">
              选择管段
            </el-button>
            <el-table
                :data="tableDataLiuxiang" size="mini">
              <el-table-column
                  prop="lineloopna"
                  label="管线类型"
              >
              </el-table-column>
              <el-table-column
                  sortable
                  width="100"
                  prop="pipecode"
                  label="管线名称"
              >
              </el-table-column>
              <el-table-column
                  sortable
                  width="100"
                  prop="startpoint"
                  label="起点编号"
              >
              </el-table-column>
              <el-table-column
                  sortable
                  width="100"
                  prop="endpointnu"
                  label="终点编号"
              >
              </el-table-column>
              <el-table-column
                  class-name="fixed-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>分析结果</span>
            <el-table
                highlight-current-row
                max-height="200"
                :data="lxTableDataResult"
                @row-click="lxResultSelect"
                style="width: 100%" size="mini">

              <el-table-column
                  prop="lineloopna"
                  label="管线类型"
              >
              </el-table-column>
              <el-table-column
                  sortable
                  prop="pipecode"
                  label="管线名称"
              >
              </el-table-column>
              <el-table-column
                  sortable
                  prop="startpoint"
                  label="起点编号"
              >
              </el-table-column>
              <el-table-column
                  sortable
                  prop="endpointnu"
                  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-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">
              <div slot="header" class="clearfixs">
                <span>管线查询结果</span>
              </div>
              <el-table
                  :data="tableData"
                  style="width: 100%" @row-click="selectRow" size="mini">
                <el-table-column
                    prop="name"
                    label="管线名称"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="管线类型"
                    width="180">
                </el-table-column>
                <el-table-column
                    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>
            </el-card>
            <el-card class="box-card">
              <div slot="header" class="clearfixs">
                <span>断面图</span>
              </div>
              <span v-show="!myChartShow" style="color: #909399;font-size: 12px;">暂无数据</span>
              <div v-show="myChartShow" id="echarts_box" style="width: 600px;height:300px;"></div>
            </el-card>
          </el-tab-pane>
                <!--  </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> -->
                <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>
    </div>
</template>

<script>

// import eventBus from './AnalysisChoose/eventBus'
// import DrawLine from './AnalysisChoose/DrawLine'

// import api from "../api"
// import main from "../leaflet/app/main"

import mapApi from '@/api/mapApi'
import eventBus from '../../../../eventBus'
import DrawLine from './AnalysisChoose/DrawLine'
import mapApi from '../../../../api/mapApi'
import { pulseEffect } from '../../../../utils/utils'
import Connectivity from './AnalysisChoose/Connectivity'
import Tube from './AnalysisChoose/Tube'
import Flow from './AnalysisChoose/Flow'

export default {
  name: 'SewersAnalysis',
  components: {
    Connectivity,
    Tube,
    Flow
  },
  data () {
    return {
      activeName: 'first', // 地图点击类型 first连通性点击  second爆管点击  third流向点击 fourth横断面
      // 地图点击类型 first连通性点击  second爆管点击  third流向点击 fourth横断面
      activeName: 'first',
      measure: null,
      map: null,
      tableData: [],
      tableDataLiuxiang: [],
      map: window.map,

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

      flowPipeLine: null,

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

      // 用于判断
      currentSelectStart: null,
      currentSelectEnd: null,
      currentSelectStartLine: null,
      currentSelectEndLine: null,
      currentSelectResultLine: null,

      currentResultLine: null,
      currentLinkIsTrue: '',

      linkPipeline: [],

      lxTableDataResult: [],

      bgPipeLine: [],
      bgFm: [],
      bgPoint: null,
      bgMarker: null,
      hdmParam: null,

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

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

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

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

    }
  },
  mounted () {
    this.$nextTick(() => {
      this.map = window.map
      // this.myChart = this.$echarts.init(document.getElementById('echarts_box'))
      // eventBus.$on('draw-hdm-line', (points) => {
      //   this.getHdmPoint(points)
      // })
    // 初始化echarts图表
    this.myChart = this.$echarts.init(this.$refs.myChart)
    // 使用 DrwLine方法
    eventBus.$on('draw-hdm-line', (points) => {
      this.getHdmPoint(points)
    })
  },
  methods: {
    // tab切换
    handleClick (tab, event) {
      console.log(tab, event)
      console.log(event)
      // console.log(tab)
      this.clearLinkPipe()
      this.clearLX()
      this.linkClear()
      this.jdmClear()
      this.currentLinkIsTrue = ''
      this.bgFm = []
      this.bgPipeLine = []
      this.tableData = []
@@ -463,89 +147,124 @@
      this.tableDataLinkStart = []
      this.tableDataLinkEnd = []
      this.tableDataLinkResult = []
      this.lxTableDataResult = []
    },

    // 流向地图上点击
    // 地图上点击
    selectPipeLine () {
      this.map.on('click', this.selectClick)
      window.map.on('click', this.selectClick)
      // 关闭弹窗
      window.layerFactory.clickSwitch = false
    },
    // 地图上点击回调
    selectClick (e) {
      this.map.off('click', this.selectClick)
      // console.log(e)
      window.map.off('click', this.selectClick)
      const point = [e.latlng.lng, e.latlng.lat]
      console.log(point)
      // this.getPipeLine(point)
      this.getPipeLine(point)
    },
    // 点击获取判断数据
    async getPipeLine (point) {
      const param = {
        x: point[0],
        y: point[1],
        radius: 3
      }
      // 根据参数请求接口数据
      const res = await mapApi.findPipelineByClickPoint(param)
      console.log(res)
      if (this.activeName === 'first') {
        if (this.linkType === 1) {
          this.tableDataLinkStart = res.data
        } else {
          this.tableDataLinkEnd = res.data
        }
      } else if (this.activeName === 'second') {
        this.bgPipeLine = res.data
      } else if (this.activeName === 'third') {
        this.tableDataLiuxiang = res.data
      } else if (this.activeName === 'fourth') {
      }
    },
    // 流向显示 的方法参数封
    createFlowLine (param) {
      const flowLine = window.L.polyline(param.points, param.option)
      flowLine.addTo(window.map)
      return flowLine
    },
    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]
        })
      })
    },

    // 连通性 ===> 地图点击起始管段
    linkClickStart () {
      console.log('地图点击起始管段')
    // 连通性 ===> 地图点击起始管段e
    linkClickStart (e) {
      // console.log('地图点击起始管段')
      this.linkType = 1
      this.selectPipeLine()
    },
    // 连通性 起始管段 table列表数据 选择数据事件 的点击事件
    linkSelectStart (e) {
      // console.log(e)
      this.currentSelectStart = e
      if (this.currentSelectStartLine != null) {
        this.currentSelectStartLine.remove()
        this.currentSelectStartLine = null
      }
      const geom = JSON.parse(e.geomText)
      this.currentSelectStartLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return {
            weight: 10,
            color: 'rgba(0,255,0,.6)'
          }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectStartLine.getBounds())
    },
    // 连通性 ===> 地图点击结束管段
    linkClickEnd () {
      console.log('地图点击结束管段')
      // console.log('地图点击结束管段')
      this.linkType = 0
      this.selectPipeLine()
    },
    linkSelectStart (e) {
      console.log('选择起始管段')
      console.log(e)
      // this.$refs.singleTable.setCurrentRow(e)
      // this.currentSelectStart = e
      // if (this.currentSelectStartLine != null) {
      //   this.currentSelectStartLine.remove()
      //   this.currentSelectStartLine = null
      // }
      // const geom = JSON.parse(e.geomText)
      // this.currentSelectStartLine = L.geoJSON(geom, {
      //   style: function (feature) {
      //     return { color: 'rgba(0,255,0,.6)' }
      //   }
      // }).addTo(this.map)
      // this.map.panInsideBounds(this.currentSelectStartLine.getBounds())
    },
    // 连通性 结束管段 table列表数据 选择数据事件 的点击事件
    linkSelectEnd (e) {
      console.log('选择结束管段')
      console.log(e)
      // this.currentSelectEnd = e
      //
      // if (this.currentSelectEndLine != null) {
      //   this.currentSelectEndLine.remove()
      //   this.currentSelectEndLine = null
      // }
      //
      // const geom = JSON.parse(e.geomText)
      // this.currentSelectEndLine = L.geoJSON(geom, {
      //   style: function (feature) {
      //     return { color: 'rgba(200,0,200,.6)' }
      //   }
      // }).addTo(this.map)
      // this.map.panInsideBounds(this.currentSelectEndLine.getBounds())
    },
    linkResultSelect (e) {
      console.log('连通性分析结果列表点击')
      console.log(e)
      // console.log('选择结束管段')
      this.currentSelectEnd = e

      // const geom = JSON.parse(e.geomText)
      // if (this.currentSelectResultLine != null) {
      //   this.currentSelectResultLine.remove()
      //   this.currentSelectResultLine = null
      // }
      // this.currentSelectResultLine = L.geoJSON(geom, {
      //   style: function (feature) {
      //     return {
      //       color: 'rgba(255,0,0,.6)',
      //       weight: 6
      //     }
      //   }
      // }).addTo(this.map)
      // this.map.panInsideBounds(this.currentSelectResultLine.getBounds())
      // 做判断remove
      if (this.currentSelectEndLine != null) {
        this.currentSelectEndLine.remove()
        this.currentSelectEndLine = null
      }
      // geoGson
      const geom = JSON.parse(e.geomText)
      this.currentSelectEndLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return {
            weight: 10,
            color: 'rgba(255, 247, 0, 0.7)'
          }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectEndLine.getBounds())
    },
    // 连通性查询
    // 连通性查询 结果
    async linkQuery () {
      // 设置分析结果为空
      // 每次查询分析结果制空
      this.tableDataLinkResult = []
      if (this.linkPipeline.length > 1) {
        this.linkPipeline.forEach((itm) => {
@@ -558,22 +277,28 @@
        this.$message('请选择起始管段和结束管段')
        return false
      }

      // 请求数据时的参数
      const param = {
        startLineID: this.currentSelectStart.id,
        endLineID: this.currentSelectEnd.id
        startLineID: this.currentSelectStart.pipesegcode,
        endLineID: this.currentSelectEnd.pipesegcode
      }
      console.log(param)
      // 请求接口和数据
      const res = await mapApi.findConnectedPipelines(param)
      // console.log(res)
      // 判断数据结果 === 0 则没有请求到数据
      if (res.data.length === 0) {
        this.$message('没有找到连通的管段')
        // 进行判断
        this.currentLinkIsTrue = '不连通'
        return
      }
      this.tableDataLinkResult = res.data
      this.currentLinkIsTrue = '连通'
      // table 数组数据置空
      const linkPipe = []
      // 数据遍历geoJson
      res.data.forEach((itm, idx) => {
        const geom = JSON.parse(itm.geomText)
        const points = []
@@ -582,26 +307,39 @@
        })
        linkPipe.push(points)
      })

      // linkPipe.forEach((itm, idx) => {
      //   const param1 = {
      //     points: itm,
      //     option: {
      //       dashArray: '15 15',
      //       dashSpeed: -30,
      //       color: '#ffff00'
      //     }
      //   }
      // const line = main.createFlowLine(param1)
      // const createFlowLine = (param) => {
      //   let flowLine = L.polyline(param.points, param.option)
      //   flowLine.addTo(map)
      //   return flowLine
      // }
      // this.linkPipeline.push(line)
      // })
      linkPipe.forEach((itm, idx) => {
        const param1 = {
          points: itm,
          option: {
            dashArray: '15 15',
            dashSpeed: -30,
            color: '#ffff00'
          }
        }
        const line = this.createFlowLine(param1)
        this.linkPipeline.push(line)
      })
    },
    // 连通性部分的清除功能
    // 定位方法事件
    linkResultSelect (e) {
      // console.log('连通性分析结果列表点击')
      console.log(e)
      const geom = JSON.parse(e.geomText)
      if (this.currentSelectResultLine != null) {
        this.currentSelectResultLine.remove()
        this.currentSelectResultLine = null
      }
      this.currentSelectResultLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return {
            color: 'rgba(255,0,0,.6)',
            weight: 10
          }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
    },
    // 连通性的清除功能
    linkClear () {
      if (this.currentSelectStartLine != null) {
        this.currentSelectStartLine.remove()
@@ -621,72 +359,13 @@
      }
    },

    // 流向分析结果table列表数据点击
    lxResultSelect (e) {
      console.log('连通性分析结果列表点击')
      console.log(e)

      // const geom = JSON.parse(e.geomText)
      // if (this.currentSelectResultLine != null) {
      //   this.currentSelectResultLine.remove()
      //   this.currentSelectResultLine = null
      // }
      // this.currentSelectResultLine = L.geoJSON(geom, {
      //   style: function (feature) {
      //     return { color: 'rgba(0,250,255,.6)' }
      //   }
      // }).addTo(this.map)
      // this.map.panInsideBounds(this.currentSelectResultLine.getBounds())
    },
    // 点击显示流向 table列表数据
    async lxQuery (e) {
      console.log(e)
      this.clearLinkPipe()
      // const param = {
      //   lineNodeID: e.startpoint
      // }
      // const res = await api.findFlowDirection(param)

      // this.lxTableDataResult = res.data
      // const linkPipe = []
      // res.data.forEach((itm, idx) => {
      //   const geom = JSON.parse(itm.geomText)
      //   const points = []
      //   geom.coordinates.forEach((it, id) => {
      //     points.push(it.reverse())
      //   })
      //
      //   linkPipe.push(points)
      // })

      // linkPipe.forEach((itm, idx) => {
      //   // const param1 = {
      //   //   points: itm,
      //   //   option: {
      //   //     dashArray: '15 15',
      //   //     dashSpeed: -30,
      //   //     color: '#ffff00'
      //   //   }
      //   // }
      //   // const line = main.createFlowLine(param1)
      //   // this.linkPipeline.push(line)
      // })
    },
    // 清除流向
    clearLX () {
      if (this.flowPipeLine != null) {
        this.flowPipeLine.remove()
        this.flowPipeLine = null
      }
    },

    // 爆管 ===> 选择管段
    bgClick () {
      this.selectPipeLine()
    },
    async bgSelect (e) {
      console.log('选择爆管管段')
      console.log(e)
      // console.log('选择爆管管段')
      // console.log(e)
      this.bgFm = []
      if (this.bgMarker != null) {
        this.bgMarker.remove()
@@ -698,110 +377,150 @@
        this.currentSelectEndLine = null
      }
      this.clearLinkPipe()
      // const geom = JSON.parse(e.geomText)
      // this.currentSelectEndLine = L.geoJSON(geom, {
      //   style: function (feature) {
      //     return { color: 'rgba(200,0,200,.6)' }
      //   }
      // }).addTo(this.map)
      this.map.panInsideBounds(this.currentSelectEndLine.getBounds())
      // 给选择中的数据添加设置样式
      const geom = JSON.parse(e.geomText)
      this.currentSelectEndLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return {
            weight: 10,
            color: 'rgba(200,0,200,.6)'
          }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectEndLine.getBounds())

      // const param = {
      //   lineID: e.id
      // }
      // const res = await api.findLeakages(param)
      // 数据请求参数
      const param = {
        lineID: e.pipesegcode
      }
      const res = await mapApi.findLeakages(param)
      // console.log(res)

      // const len = res.data.length
      // if (len === 0) {
      //   this.$message('未找到需要关闭的阀门')
      //
      //   return
      // }
      // res.data.reverse()
      // this.bgFm = res.data
      //
      // this.bgPoint = res.data[0].startControlPoint
      //
      // const point = JSON.parse(this.bgPoint.geomText)
      //
      // const p = [point.coordinates[1], point.coordinates[0]]
      //
      // // this.bgMarker = main.createFlowMarker(p)
      // this.bgMarker.bindTooltip(this.bgPoint.pointnumbe)
      // this.bgMarker.addTo(this.map)
      // this.map.flyTo(p)
      //
      // const linkPipe = []
      // res.data.forEach((itm, idx) => {
      //   const geom = JSON.parse(itm.geomText)
      //   const points = []
      //   geom.coordinates.forEach((it, id) => {
      //     points.push(it.reverse())
      //   })
      //
      //   linkPipe.push(points)
      // })
      const len = res.data.length
      if (len === 0) {
        this.$message('未找到需要关闭的阀门')
        return
      }
      res.data.reverse()
      this.bgFm = res.data
      // console.log(res.data)

      // linkPipe.forEach((itm, idx) => {
      // const param1 = {
      //   points: itm,
      //   option: {
      //     dashArray: '15 15',
      //     dashSpeed: -30,
      //     color: '#ffff00'
      //   }
      // }
      // const line = main.createFlowLine(param1)
      // this.linkPipeline.push(line)
      // })
      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)
      // this.bgMarker = pulseEffect(p)
      // this.bgMarker.bindTooltip(this.bgPoint.pointnumbe)
      // this.bgMarker.addTo(window.map)
      // window.map.flyTo(p)

      const linkPipe = []
      res.data.forEach((itm, idx) => {
        const geom = JSON.parse(itm.geomText)
        const points = []
        geom.coordinates.forEach((it, id) => {
          points.push(it.reverse())
        })
        linkPipe.push(points)
      })

      linkPipe.forEach((itm, idx) => {
        const param1 = {
          points: itm,
          option: {
            dashArray: '15 15',
            dashSpeed: -30,
            color: '#ffff00'
          }
        }
        const line = this.createFlowLine(param1)
        this.linkPipeline.push(line)
      })
    },
    bgFmClick (e) {
      console.log('点击影响的阀门')
      // console.log('点击影响的阀门')
      // console.log(e)
      // const point = [e.data[0][0], e.data[0][1]]
      const point = [e.startControlPoint.y, e.startControlPoint.x]
      pulseEffect(point)
      // const marker = this.createFlowMarker(point)
      // marker.addTo(window.map)
      // window.map.flyTo(point, 17)
    },

    // 流向分析结果table列表数据点击
    lxResultSelect (e) {
      // console.log('连通性分析结果列表点击')
      // console.log(e)

      const geom = JSON.parse(e.geomText)
      if (this.currentSelectResultLine != null) {
        this.currentSelectResultLine.remove()
        this.currentSelectResultLine = null
      }
      this.currentSelectResultLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return {
            weight: 10,
            color: 'rgba(0,250,255,.6)'
          }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
    },
    // 点击显示流向 table列表中的数据 => 进行官网流向的显示
    async lxQuery (e) {
      console.log(e)
      const point = [e.data[0][0], e.data[0][1]]
      // const marker = main.createFlowMarker(point)
      // marker.addTo(this.map)
      this.map.flyTo(point, 16)
    },
    // 流向数据请求
    async getPipeLine (point) {
      // const param = {
      //   x: point[0],
      //   y: point[1],
      //   radius: 3
      // }
      this.clearLinkPipe()
      const param = {
        // lineNodeID: e.startpoint
        lineNodeID: e.startpointnumber
      }
      const res = await mapApi.findFlowDirection(param)
      this.lxTableDataResult = res.data
      const linkPipe = []
      res.data.forEach((itm, idx) => {
        const geom = JSON.parse(itm.geomText)
        const points = []
        geom.coordinates.forEach((it, id) => {
          points.push(it.reverse())
        })
        linkPipe.push(points)
      })

      // const res = await api.getPipeline(param)
      // 3 流向

      // if (this.activeName === 'first') {
      //   if (this.linkType) {
      //     this.tableDataLinkStart = res.data
      //   } else {
      //     this.tableDataLinkEnd = res.data
      //   }
      // } else if (this.activeName === 'second') {
      //   this.bgPipeLine = res.data
      // } else if (this.activeName === 'third') {
      //   this.tableDataLiuxiang = res.data
      // } else if (this.activeName === 'fourth') {
      //
      // }
      //
      // console.log(res)
      linkPipe.forEach((itm, idx) => {
        const param1 = {
          points: itm,
          option: {
            dashArray: '15 15',
            dashSpeed: -30,
            color: '#ffff00'
          }
        }
        const line = this.createFlowLine(param1)
        this.linkPipeline.push(line)
      })
    },
    // 流向-管线选择
    // 清除流向
    clearLX () {
      if (this.flowPipeLine != null) {
        this.flowPipeLine.remove()
        this.flowPipeLine = null
      }
    },
    // 流向-管段选择
    selectRowLiuXiang (e) {
      // 选择要显示的流向线
      console.log('选择要显示的流向线')
      console.log(e)
      // console.log('选择要显示的流向线')
      // console.log(e)
    },
    lxHandleClick (e) {
      console.log('正流向显示')
      console.log(e)

      this.clearLX()
      // console.log('正流向显示')
      // console.log(e)
      //
      // // 清除流向方法
      // this.clearLX()
      // const param = {
      //   points: e.data,
      //   option: {
@@ -809,9 +528,10 @@
      //     dashSpeed: -30
      //   }
      // }
      // this.flowPipeLine = main.createFlowLine(param)
      // this.flowPipeLine = this.createFlowLine(param)
    },

    // 清楚分析结果
    clearLinkPipe () {
      if (this.linkPipeline.length > 0) {
        this.linkPipeline.forEach((itm, idx) => {
@@ -820,13 +540,14 @@
      }
      this.linkPipeline = []
    },
    // 逆流向显示
    lxHandleClick2 (e) {
      console.log('逆流向显示')
      console.log(e)
      if (this.flowPipeLine != null) {
        this.flowPipeLine.remove()
        this.flowPipeLine = null
      }
      // console.log('逆流向显示')
      // console.log(e)
      // if (this.flowPipeLine != null) {
      //   this.flowPipeLine.remove()
      //   this.flowPipeLine = null
      // }
      // const param = {
      //   points: e.data,
      //   option: {
@@ -834,12 +555,22 @@
      //     dashSpeed: 30
      //   }
      // }
      // this.flowPipeLine = main.createFlowLine(param)
      // this.flowPipeLine = this.createFlowLine(param)
    },
    // 横断面绘制线段
    drawLine () {
      // console.log('drawLine')
      if (this.measure === null) {
        this.measure = new DrawLine(window.map)
      }
      this.measure.destory()
      this.measure.init()
    },
    // 横断面数据请求
    async getHdmPoint (line) {
      console.log('横断面的绘制线')
      console.table(line)
      // console.log('横断面的绘制线')
      // console.table(line)
      // 横断面数据
      this.hdmParam = {
        x1: line[0].lng,
        y1: line[0].lat,
@@ -847,46 +578,158 @@
        y2: line[1].lat
      }
    },
    // 横断面选择后 图表展示
    async selectRow (e) {
      console.log(e)
      // 3. 使用刚指定的配置项和数据，显示图表

      const option = {
        xAxis: {
          type: 'category',
          data: ['井1', '井2', '井3', '井4', '井5', '井6', '井7']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
      }

      this.myChartShow = true
      this.myChart.setOption(option)
    },
    drawLine () {
      console.log('drawLine')
      // if (this.measure === null) {
      //   this.measure = new DrawLine(this.map)
      // }
      this.measure.destory()
      this.measure.init()
    },
    // 横断面数据请求
    async jdmQuery () {
      // if (this.hdmParam == null) {
      //   this.$message('请先在地图上绘制截断线')
      //   return
      this.tableData = []
      if (this.hdmParam == null) {
        this.$message('请先在地图上绘制截断线')
        return false
      }
      // 已绘制线图 进行绘制横断面数据分析
      const res = await mapApi.getCrossSection(this.hdmParam)
      console.log(res)
      // let obj = {}
      const dataSpacing = res.data.pointInterval
      console.log(dataSpacing)
      // for (let i = 0; i < dataSpacing.length; i++) {
      //   obj.push({
      //     spacing: dataSpacing[i]
      //   })
      //   console.log(obj)
      // }
      // const res = await api.getCrossSection(this.hdmParam)
      // console.log(res)
      // const dataPoint = res.data.point
      // const dataPointjj = res.data.pointInterval
      // for (let i = 0; i < dataPoint.length; i++) {
      //   obj = {
      //     pipename: dataPoint[i].pipelines.extraData.pipename,
      //     x: dataPoint[i].crossPoint3D.x,
      //     y: dataPoint[i].crossPoint3D.y,
      //     z: dataPoint[i].crossPoint3D.z
      //   }
      //   this.tableData.push(obj)
      // }
      // for (let i = 0; i < dataPointjj.length; i++) {
      //   obj = {
      //     pointInterval: dataPointjj[i]
      //   }
      //   this.tableData.push(obj)
      //   console.log(obj)
      // }
      // console.log(this.tableData)
      this.dealWithData(res)
    },
    dealWithData (e) {
      const dataSeries = e.data.point
      let tempData
      const storeData = []
      const dataList = []
      this.echartsList = []
      for (let i = 0; i < dataSeries.length; i++) {
        if (storeData.length === 0) {
          storeData.push(name)
          tempData = {
            name: dataSeries[i].pipelines.oilPipeID,
            data: e.data.pointInterval,
            type: 'line'
          }
          this.echartsList.push(tempData)
        }
        dataList.push(dataSeries[i].pipelines.oilPipeID)
      }
      // console.log(dataList)
      // const seriesList = e.data.pointInterval
      // let seriesdata
      // for (let i = 0; i < seriesList.length; i++) {
      //   console.log(seriesList[i])
      // }
      // x数据处理
      this.selectRow(dataList)
    },
    // 横断面绘制完成后 进行横断面数据分析 进行图表展示
    selectRow (dataList) {
      // console.log(dataList)
      // 3. 使用刚指定的配置项和数据，显示图表
      this.option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        // legend: {
        //   // data: ['直接访问', '搜索引擎']
        //   data: dataList
        // },
        toolbox: {
          show: false,
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '10px',
          right: '0',
          top: '10px',
          bottom: '5px',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              // formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            }
            // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            // data: dataList
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              // formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            }
          }
        ],
        // series: [
        //   {
        //     name: '搜索引擎',
        //     type: 'line',
        //     stack: '总量',
        //     label: {
        //       show: true,
        //       position: 'top'
        //     },
        //     areaStyle: {},
        //     emphasis: {
        //       focus: 'series'
        //     },
        //     data: [820, 932, 901, 934, 1290, 1330, 1320]
        //   }
        // ]
        series: this.echartsList
      }
      this.myChartShow = true
      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()
      }
@@ -896,59 +739,105 @@
</script>

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

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

/deep/ .el-tabs--border-card {
  background: none;
  border: none;
  box-shadow: none;
}
    /deep/ .el-table .has-gutter tr th {
        border: none !important;
    }

/deep/ .el-tabs--border-card > .el-tabs__header {
  background: none;
  border-bottom: none;
  margin: 0;
}
    /deep/ .el-table tbody tr:hover > td {
        background: none !important
    }

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

/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  border: none;
}
    /deep/ .fixed-style {
        /*margin: 15px;*/
        font-size: 12px;
        display: inline-block;
        color: #00fff6;
    }

/deep/ .panel-right ::-webkit-scrollbar-thumb {
  background: none;
  border: none;
}
    /deep/ th.is-leaf {
        border: none !important;
    }

/deep/ .el-card {
  margin-top: 15px;
  background: rgba(0, 16, 30, 0.5);
  //border: 0.00521rem solid @color;
  box-shadow: 0 0 0.03rem @color;
}
    /deep/ .el-table__fixed-right::before, .el-table__fixed::before {
        background: none;
    }

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

/deep/ .clearfixs {
  display: inline-block;
  color: #ffffff;
  margin: 15px;
}
    /deep/ .el-table__body .el-table__row.hover-row td {
        background: none !important;
        color: yellow;
    }

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

    /deep/ .fixed-table {
        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>