管线分析

chenzeping

2021-04-19 39638e1ec95822792c7520dcd0f5a807957cadde

管线分析

 src/components/BaseNav/PublicSector.vue

@@ -3,7 +3,7 @@
    <div class="public-bounced-content-left">
      <slot name='tabs'></slot>
      <div class="public-bounced-content-left-bottom">
        <slot name='table'></slot>
        <slot name='publicPart'></slot>
      </div>
    </div>
    <div class="public-bounced-content-right">

 src/components/BaseNav/WasteGas/WasteGasIndex.vue

@@ -3,7 +3,7 @@
    <template v-slot:tabs>
      <public-tabs :storagePlaceId="storagePlaceId"></public-tabs>
    </template>
    <template v-slot:table>
    <template v-slot:publicPart>
      <public-echarts></public-echarts>
    </template>
    <template v-slot:video>

 src/components/BaseNav/WasteSolid/WasteSolidIndex.vue

@@ -3,7 +3,7 @@
    <template v-slot:tabs>
      <public-tabs ref='refsTabsData'></public-tabs>
    </template>
    <template v-slot:table>
    <template v-slot:publicPart>
      <public-table ref="refsTableData"></public-table>
    </template>
    <template v-slot:video>

 src/components/LayerController/logic/WasteSolid.js

@@ -53,22 +53,6 @@
    // 点击marker的pulse()光波
    this.animalService.pulseEffect(e.latlng)
    /* 点击数据的接口请求 */
    this.requestSolidWasteData(e).then(e)
  }

  // 不同类型图片封装
  this.differentTypes = (judgeValue) => {
    var effectOfChange
    if (judgeValue === 1) {
      effectOfChange = defaultImg
    } else {
      effectOfChange = setting
    }
    return effectOfChange
  }

  // 根据点击不同数据 进行接口的数据请求
  this.requestSolidWasteData = async (e) => {
    // 弹框标题
    const title = e.layer.options.totransferData.Name
    /* flyTo()弹出框平移事件 */
@@ -87,6 +71,17 @@
    })
  }

  // 不同类型图片封装
  this.differentTypes = (judgeValue) => {
    var effectOfChange
    if (judgeValue === 1) {
      effectOfChange = defaultImg
    } else {
      effectOfChange = setting
    }
    return effectOfChange
  }

  // flayTo() 弹框的可滑动事件
  this.setPanTo = (pos, value) => {
    var position = pos

 src/components/layer/src/layer.vue

@@ -4,8 +4,7 @@
      <span>{{ title }}</span>
      <i class="el-icon-circle-close" @click="close"></i>
    </div>
    <div class="public-bounced-content" :id="id">
    </div>
    <div class="public-bounced-content" :id="id"></div>
  </div>
</template>


 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue

@@ -12,7 +12,7 @@
        <el-table
            ref="singleTable"
            highlight-current-row
            :data="tableData"
            :data="startingSection"
            max-height="200"
            style="width: 100%" size="mini">
          <el-table-column
@@ -109,39 +109,42 @@
</template>

<script>

export default {
  name: 'Connectivity',
  data () {
    return {
      // 连通性
      linkType: 1, // 1  连通性起始管段   0 连通性结束管段 用来判断是点击了起始  还是结束管段
      tableData: []
      map: window.map,
      tableData: [],
      startingSection: []
    }
  },
  methods: {
    // 地图点击起始管段
    linkClickStart () {
      console.log('地图点击起始管段')
      this.linkType = 1
      // this.selectPipeLine()
    // 流向地图上点击
    selectPipeLine () {
      this.map.on('click', this.selectClick)
    },
    // 地图点击结束管段
    linkClickEnd () {
      console.log('地图点击结束管段')
      this.linkType = 0
      // this.selectPipeLine()
    // 地图上点击回调
    selectClick (e) {
      this.map.off('click', this.selectClick)
      const point = [e.latlng.lng, e.latlng.lat]
      console.log(point)
      // 根据数据进行数据请求
      // this.getPipeLine(point)
    },
    // 连通性分析
    linkQuery () {
      console.log('点击连通性分析')
    },
    // 清除功能
    linkClear () {
      console.log('点击清除')
    },
    // 选择起始管段
    linkSelectStart () {
      console.log('选择起始管段')
    // 数据请求
    async getPipeLine (point) {
      const param = {
        x: point[0],
        y: point[1],
        radius: 3
      }
      console.log(param)
      // const res = await api.getPipeline(param)
      // console.log(res)
      // this.startingSection = res.data
    }
  }
}
@@ -151,6 +154,7 @@
/deep/ .fixed-tablea {
  background: rgba(0, 16, 30, 1) !important;
}

/deep/ .el-table__fixed-right::before {
  background: none;
}

 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/DrawLine.js

New file
@@ -0,0 +1,59 @@
import L from 'leaflet'
// import eventBus from "@/components/leaflet/app/eventBus"
import eventBus from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/eventBus'

class DrawLine {
  constructor (map) {
    this.points = []
    this.color = 'red'
    this.layers = L.layerGroup()
    this.polyline = null
    this.marker = null
    this.points = []
    this.polyline = null
    this.marker = null
    this.map = map
  }

    init = () => {
      this.map.on('click', this.click)
      this.map.on('mousemove', this.mousemove)
      this.map.on('dblclick', this.dbClick)
    }

    click = (e) => {
      this.map.doubleClickZoom.disable()
      this.points.push(e.latlng)
      if (this.points.length > 1) {
        this.dbClick()
      }
    }

    mousemove = (e) => {
      this.points.push(e.latlng)
      if (this.polyline) { this.map.removeLayer(this.polyline) }
      this.polyline = L.polyline(this.points, { showMeasurements: true, color: 'red' })
      this.polyline.addTo(this.layers)
      this.layers.addTo(this.map)
      this.points.pop()
    }

    dbClick = (e) => {
      console.log('双击结束', e)
      this.polyline.addTo(this.layers)
      // this.close(e.latlng);
      this.map.off('click', this.click).off('mousemove', this.mousemove).off('dblclick', this.dbClick)
      console.log(this.points)
      eventBus.$emit('draw-hdm-line', this.points)
    }

    destory () {
      if (this.polyline) { this.map.removeLayer(this.polyline) }

      if (this.marker) { this.marker.remove() }
      this.points = []
      this.layers.clearLayers()
    }
}

export default DrawLine

 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js

@@ -1,427 +1,18 @@
// export default {
//   handleClick (tab, event) {
//     console.log(tab, event)
//     this.clearLinkPipe()
//     this.clearLX()
//     this.linkClear()
//     this.jdmClear()
//     this.bgFm = []
//     this.bgPipeLine = []
//     this.tableData = []
//     this.tableDataLiuxiang = []
//     this.tableDataLinkStart = []
//     this.tableDataLinkEnd = []
//     this.tableDataLinkResult = []
//   },
//   linkClickStart () {
//     console.log('地图点击起始管段')
//     this.linkType = 1
//     this.selectPipeLine()
//   },
//   linkClickEnd () {
//     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())
//   },
//   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)
//
//     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())
//   },
//   // 连通性查询
//   async linkQuery () {
//     this.tableDataLinkResult = []
//     if (this.linkPipeline.length > 1) {
//       this.linkPipeline.forEach((itm) => {
//         itm.remove()
//       })
//       this.linkPipeline = []
//     }
//     if (this.currentSelectStart === null || this.currentSelectEnd === null) {
//       this.$message('请选择起始管段和结束管段')
//       return
//     }
//     const param = {
//       startLineID: this.currentSelectStart.id,
//       endLineID: this.currentSelectEnd.id
//     }
//
//     const res = await api.findConnectedPipelines(param)
//
//     if (res.data.length === 0) {
//       this.$message('没有找到连通的管段')
//       this.currentLinkIsTrue = '不连通'
//       return
//     }
//     this.tableDataLinkResult = res.data
//     this.currentLinkIsTrue = '连通'
//     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)
//     })
//   },
//
//   linkClear () {
//     if (this.currentSelectStartLine != null) {
//       this.currentSelectStartLine.remove()
//       this.currentSelectStartLine = null
//     }
//     if (this.currentSelectEndLine != null) {
//       this.currentSelectEndLine.remove()
//       this.currentSelectEndLine = null
//     }
//     if (this.currentSelectResultLine != null) {
//       this.currentSelectResultLine.remove()
//       this.currentSelectResultLine = null
//     }
//     if (this.bgMarker != null) {
//       this.bgMarker.remove()
//       this.bgMarker = null
//     }
//   },
//   lxResultSelect () {
//     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())
//   },
//   async lxQuery (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)
//     })
//   },
//
//   bgClick () {
//     this.selectPipeLine()
//   },
//   async bgSelect (e) {
//     console.log('选择爆管管段')
//     console.log(e)
//     this.bgFm = []
//     if (this.bgMarker != null) {
//       this.bgMarker.remove()
//       this.bgMarker = null
//     }
//
//     if (this.currentSelectEndLine != null) {
//       this.currentSelectEndLine.remove()
//       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 param = {
//       lineID: e.id
//     }
//     const res = await api.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)
//     })
//
//     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)
//     })
//   },
//   bgFmClick (e) {
//     console.log('点击影响的阀门')
//     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)
//   },
//   // 流向地图上点击
//   selectPipeLine () {
//     this.map.on('click', this.selectClick)
//   },
//   // 地图上点击回调
//   selectClick (e) {
//     this.map.off('click', this.selectClick)
//     const point = [e.latlng.lng, e.latlng.lat]
//     console.log(point)
//     this.getPipeLine(point)
//   },
//
//   // 流向数据请求
//   async getPipeLine (point) {
//     const param = {
//       x: point[0],
//       y: point[1],
//       radius: 3
//     }
//
//     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)
//   },
//   // 流向-管线选择
//   selectRowLiuXiang (e) {
//     // 选择要显示的流向线
//     console.log('选择要显示的流向线')
//     console.log(e)
//   },
//   lxHandleClick (e) {
//     console.log('正流向显示')
//     console.log(e)
//
//     this.clearLX()
//     const param = {
//       points: e.data,
//       option: {
//         dashArray: '15 15',
//         dashSpeed: -30
//       }
//     }
//     this.flowPipeLine = main.createFlowLine(param)
//   },
//   clearLinkPipe () {
//     if (this.linkPipeline.length > 0) {
//       this.linkPipeline.forEach((itm, idx) => {
//         itm.remove()
//       })
//     }
//     this.linkPipeline = []
//   },
//   clearLX () {
//     if (this.flowPipeLine != null) {
//       this.flowPipeLine.remove()
//       this.flowPipeLine = null
//     }
//   },
//   lxHandleClick2 (e) {
//     console.log('逆流向显示')
//     console.log(e)
//     if (this.flowPipeLine != null) {
//       this.flowPipeLine.remove()
//       this.flowPipeLine = null
//     }
//     const param = {
//       points: e.data,
//       option: {
//         dashArray: '15 15',
//         dashSpeed: 30
//       }
//     }
//     this.flowPipeLine = main.createFlowLine(param)
//   },
//   // 横断面数据请求
//   async getHdmPoint (line) {
//     console.log('横断面的绘制线')
//     console.table(line)
//     this.hdmParam = {
//       x1: line[0].lng,
//       y1: line[0].lat,
//       x2: line[1].lng,
//       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
//     }
//     const res = await api.getCrossSection(this.hdmParam)
//     console.log(res)
//     // debugger
//   },
//   jdmClear () {
//     this.hdmParam = null
//     if (this.measure != null) {
//       this.measure.destory()
//     }
//   }
// }
export default {
  // 爆管
  bgClick () {
    this.selectPipeLine()
  },
  // 流向地图上点击
  selectPipeLine () {
    // console.log(map)
    window.on('click', this.selectClick)
  },
  // 地图上点击回调
  selectClick (e) {
    console.log(e)
    // window.map.off('click', this.selectClick)
    // const point = [e.latlng.lng, e.latlng.lat]
    // console.log(point)
  }
}

 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/eventBus.js

New file
@@ -0,0 +1,3 @@
import Vue from 'vue'

export default new Vue()

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

@@ -1,51 +1,946 @@
<template>
  <div class="sewers-analysis-tab">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="连通性" name="first">
        <Connectivity></Connectivity>
      </el-tab-pane>
      <el-tab-pane label="爆管" name="second">
        <Tube></Tube>
      </el-tab-pane>
      <el-tab-pane label="流向" name="third">
        <Flow></Flow>
      </el-tab-pane>
      <el-tab-pane label="横断面" name="four">
        <CrossSectional></CrossSectional>
      </el-tab-pane>
    </el-tabs>
    <transition name="el-fade-in-linear">
      <el-card>
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
          <el-tab-pane label="连通性" name="first">
            <el-button type="primary" @click="linkClickStart" size="mini" style="margin-bottom: 5px;"
                       title="地图上点击选择需要进行连通分析的管段">起始管段
            </el-button>
            <el-button type="primary" @click="linkClickEnd" size="mini" style="margin-bottom: 5px;"
                       title="地图上点击与所选管段连通管段">结束管段
            </el-button>
            <el-button type="primary" @click="linkQuery" size="mini" style="margin-bottom: 5px;"
                       title="根据起始、结束管段进行连通性分析">连通性分析
            </el-button>
            <el-button type="primary" @click="linkClear" size="mini" style="margin-bottom: 5px;"
                       title="根据起始、结束管段进行连通性分析">清除
            </el-button>
            <el-scrollbar style="height:400px">
              <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-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>
            <!--        </div>-->
            <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-tabs>
      </el-card>
    </transition>
  </div>
</template>

<script>
import Connectivity from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity'
import Tube from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube'
import Flow from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow'
import CrossSectional from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional'

// import PublicWay from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay'
// 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'

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

      myChart: null,
      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
    }
  },
  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)
      // })
    })
  },
  methods: {
    // tab切换
    handleClick (tab, event) {
      console.log(tab, event)
      // PublicWay.handleClick(tab, event)
      this.clearLinkPipe()
      this.clearLX()
      this.linkClear()
      this.jdmClear()
      this.bgFm = []
      this.bgPipeLine = []
      this.tableData = []
      this.tableDataLiuxiang = []
      this.tableDataLinkStart = []
      this.tableDataLinkEnd = []
      this.tableDataLinkResult = []
    },

    // 流向地图上点击
    selectPipeLine () {
      this.map.on('click', this.selectClick)
    },
    // 地图上点击回调
    selectClick (e) {
      this.map.off('click', this.selectClick)
      const point = [e.latlng.lng, e.latlng.lat]
      console.log(point)
      // this.getPipeLine(point)
    },

    // 连通性 ===> 地图点击起始管段
    linkClickStart () {
      console.log('地图点击起始管段')
      this.linkType = 1
      this.selectPipeLine()
    },
    // 连通性 ===> 地图点击结束管段
    linkClickEnd () {
      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())
    },
    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)

      // 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())
    },
    // 连通性查询
    async linkQuery () {
      this.tableDataLinkResult = []
      if (this.linkPipeline.length > 1) {
        this.linkPipeline.forEach((itm) => {
          itm.remove()
        })
        this.linkPipeline = []
      }
      if (this.currentSelectStart === null || this.currentSelectEnd === null) {
        this.$message('请选择起始管段和结束管段')
        return false
      }
      // 请求数据时的参数
      const param = {
        startLineID: this.currentSelectStart.id,
        endLineID: this.currentSelectEnd.id
      }
      // 请求接口和数据
      const res = await mapApi.findConnectedPipelines(param)
      // 判断数据结果
      if (res.data.length === 0) {
        this.$message('没有找到连通的管段')
        this.currentLinkIsTrue = '不连通'
        return
      }
      this.tableDataLinkResult = res.data
      this.currentLinkIsTrue = '连通'
      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)
      // const createFlowLine = (param) => {
      //   let flowLine = L.polyline(param.points, param.option)
      //   flowLine.addTo(map)
      //   return flowLine
      // }
      // this.linkPipeline.push(line)
      // })
    },
    // 连通性部分的清除功能
    linkClear () {
      if (this.currentSelectStartLine != null) {
        this.currentSelectStartLine.remove()
        this.currentSelectStartLine = null
      }
      if (this.currentSelectEndLine != null) {
        this.currentSelectEndLine.remove()
        this.currentSelectEndLine = null
      }
      if (this.currentSelectResultLine != null) {
        this.currentSelectResultLine.remove()
        this.currentSelectResultLine = null
      }
      if (this.bgMarker != null) {
        this.bgMarker.remove()
        this.bgMarker = null
      }
    },

    lxResultSelect () {
      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())
    },
    async lxQuery (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)
      // })
    },
    // 爆管 ===> 选择管段
    bgClick () {
      this.selectPipeLine()
    },
    async bgSelect (e) {
      console.log('选择爆管管段')
      console.log(e)
      this.bgFm = []
      if (this.bgMarker != null) {
        this.bgMarker.remove()
        this.bgMarker = null
      }

      if (this.currentSelectEndLine != null) {
        this.currentSelectEndLine.remove()
        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 param = {
      //   lineID: e.id
      // }
      // const res = await api.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)
      // })

      // 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)
      // })
    },
    bgFmClick (e) {
      console.log('点击影响的阀门')
      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
      // }

      // 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)
    },
    // 流向-管线选择
    selectRowLiuXiang (e) {
      // 选择要显示的流向线
      console.log('选择要显示的流向线')
      console.log(e)
    },
    lxHandleClick (e) {
      console.log('正流向显示')
      console.log(e)

      this.clearLX()
      // const param = {
      //   points: e.data,
      //   option: {
      //     dashArray: '15 15',
      //     dashSpeed: -30
      //   }
      // }
      // this.flowPipeLine = main.createFlowLine(param)
    },
    clearLinkPipe () {
      if (this.linkPipeline.length > 0) {
        this.linkPipeline.forEach((itm, idx) => {
          itm.remove()
        })
      }
      this.linkPipeline = []
    },
    clearLX () {
      if (this.flowPipeLine != null) {
        this.flowPipeLine.remove()
        this.flowPipeLine = null
      }
    },
    lxHandleClick2 (e) {
      console.log('逆流向显示')
      console.log(e)
      if (this.flowPipeLine != null) {
        this.flowPipeLine.remove()
        this.flowPipeLine = null
      }
      // const param = {
      //   points: e.data,
      //   option: {
      //     dashArray: '15 15',
      //     dashSpeed: 30
      //   }
      // }
      // this.flowPipeLine = main.createFlowLine(param)
    },
    // 横断面数据请求
    async getHdmPoint (line) {
      console.log('横断面的绘制线')
      console.table(line)
      this.hdmParam = {
        x1: line[0].lng,
        y1: line[0].lat,
        x2: line[1].lng,
        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
      // }
      // const res = await api.getCrossSection(this.hdmParam)
      // console.log(res)
    },
    jdmClear () {
      this.hdmParam = null
      if (this.measure != null) {
        this.measure.destory()
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-tabs__header {
  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 {
  margin-top: 15px;
  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/ .clearfixs {
  display: inline-block;
  color: #ffffff;
  margin: 15px;
}

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

 src/components/panel/topicSearch/SolidWasteSearch.vue

@@ -44,8 +44,7 @@
<script>

import mapApi from '@/api/mapApi'
import publicBounced from '@/components/BaseNav/PublicBounced/PublicBounced'
import defaultImg from '../../../../public/assets/images/map/solidwaste/gf_green2.png'
import WasteSolidIndex from '@/components/BaseNav/WasteSolid/WasteSolidIndex'

export default {
  name: 'SolidWasteSearch',
@@ -148,101 +147,6 @@
    }
  },
  methods: {
    // 点击搜索实现数据的搜索展示
    async handleSearch (data) {
      // console.log(this.form.keyword)
      const result = await mapApi.getSolidWaste(data)
      this.searchDataDisplay = result.Result.DataInfo
      console.log(this.searchDataDisplay)
    },
    // 不同类型图片封装
    differentTypes (judgeValue) {
      var effectOfChange
      if (judgeValue === 1) {
        effectOfChange = defaultImg
      } else {
        effectOfChange = defaultImg
      }
      return effectOfChange
    },
    // 数据展示,点击进行弹框及点的展示
    async setBounced (val) {
      const pos = [val.Latitude, val.Longitude]
      window.map.flyTo(pos, 11)
      // 循环遍历数据 根据进行marker 的创建
      // for (let i = 0; i < this.searchDataDisplay.length; i++) {
      // 经纬度 位置
      const positionX = val.Latitude
      const positionY = val.Longitude

      // 定义类型 用来区分数据的不同 1.接口接口数据来进行数据的判断 2.根据数据类型的不同，进行不同类型的图片显示
      const judgeValue = val.StorageQty
      var iconUrl = this.differentTypes(judgeValue)

      const marker = this.L.marker([positionX, positionY], {
        // totransferData: this.searchDataDisplay[i],
        icon: this.L.icon({
          iconUrl: iconUrl,
          iconSize: [30, 30],
          iconAnchor: [15, 15]
        })
      })
      this.layer.addLayer(marker)
      // }
      const t1 = setTimeout(async () => {
        const dataValue = {
          StoragePlaceId: val.StoragePlaceId
        }
        // 弹框标题
        const title = val.Name
        debugger
        // 基本信息 tabs
        const resultBasic = await mapApi.getSolidWasteBaseInfo(dataValue)
        // 详细信息展示 table
        const resultDetailed = await mapApi.getSolidWasteDetail(dataValue)

        // 绑定弹框实例
        this.instance && this.instance.closePopup()
        const PublicBounced = window.Vue.extend(publicBounced)
        this.instance = new PublicBounced().$mount()
        document.body.appendChild(this.instance.$el)
        // document.body.removeChild(instance.$el)
        // 通过方法 向绑定弹框传递数据
        this.instance.setData(title, resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei')
        this.setPanTo(pos, 250)
      }, 1000)
      console.log(t1)
      // clearTimeout(t1)
      this.pulseEffect(pos)
    },

    // flayTo() 弹框的可滑动事件
    setPanTo (pos, value) {
      var position = pos
      position = window.map.latLngToLayerPoint(position)
      position.y += value
      position = window.map.layerPointToLatLng(position)
      window.map.flyTo(position)
    },
    pulseEffect (xy) {
      // 插件 效果实现
      var pulsingIcon = this.L.icon.pulse({
        iconSize: [20, 20],
        color: this.colors[0],
        fillColor: ''
      })
      var picGroupMarker = this.L.marker(xy, { icon: pulsingIcon }).addTo(this.layer)
      var times = this.times
      // 定时
      var timeInterval = setInterval(() => {
        if (times > 0) {
          times--
        } else {
          clearInterval(timeInterval)
          picGroupMarker.remove()
        }
      }, 1000)
    },
    // select的option的数据选择
    handlePipelineType (val) {
      this.solidWasteTypeOptions.forEach(item => {
@@ -250,6 +154,28 @@
          this.handleSearch(item.value)
        }
      })
    },
    // 点击搜索实现数据的搜索展示
    async handleSearch (data) {
      // console.log(this.form.keyword)
      const result = await mapApi.getSolidWaste(data)
      this.searchDataDisplay = result.Result.DataInfo
    },
    // 数据展示,点击进行弹框及点的展示
    setBounced (val) {
      console.log(val)
      const pos = [val.Latitude, val.Longitude]
      window.map.flyTo(pos, 15)
      window.$layer.open({
        content: {
          content: WasteSolidIndex, // 组件
          parent: this, // 父组件
          data: { // 传递的参数
            storagePlaceId: val.StoragePlaceId
          }
        },
        title: val.Name
      })
    }
  }
}