统计表,指标,预报警表格弹框公共修改,管线分析功能

ChenZeping

2021-04-29 c56e506fd34c58209240e97fc29043639fae5d19

统计表,指标,预报警表格弹框公共修改,管线分析功能

 src/api/mapUrl.js

@@ -33,6 +33,7 @@
// export const findPipelineByClickPoint = $HOST + '/findPipelineByClickPoint'
export const findPipelineByClickPoint = 'http://xearth.cn:6202' + '/findPipelineByClickPoint'
export const findConnectedPipelines = 'http://xearth.cn:6202' + '/findConnectedPipelines'
// export const findConnectedPipelines = $HOST + '/findConnectedPipelines'
export const findFlowDirection = 'http://xearth.cn:6202' + '/findFlowDirection'
export const findLeakages = 'http://xearth.cn:6202' + '/findLeakages'
export const getCrossSection = 'http://xearth.cn:6202' + '/getCrossSection'

 src/components/LayerController/service/WfsLayerService.js

@@ -63,7 +63,7 @@
            })
        },
        onEachFeature: (feature, layer) => {
          layer.bindPopup((layer) => {
          /* layer.bindPopup((layer) => {
            this.popupComp.setDatas(layer)
            this.popupComp.setShow()
            return this.popupComp.$el
@@ -72,8 +72,12 @@
            minWidth: 300,
            closeButton: false,
            autoClose: false
          }) */
          layer.bindTooltip((layer) => this.tooltipListener(layer), {
            direction: 'bottom',
            offset: [0, 15],
            sticky: true
          })
            .bindTooltip((layer) => this.tooltipListener(layer), { direction: 'bottom', offset: [0, 15], sticky: true })
            .on('mouseover', (e) => this.mouseOverListener(e, layer)).on('mouseout', (e) => this.mouseOutListener(e, layer))
        }
      }).addTo(this.layer)
@@ -85,7 +89,10 @@
    const icon = this.config.icon
    const type = e.target.feature.geometry.type
    if (type === 'LineString' || type === 'MultiLineString') {
      layer.setStyle({ weight: 8, color: '#00ffff' })
      layer.setStyle({
        weight: 8,
        color: '#00ffff'
      })
    } else if (type === 'Point' || type === 'MultiPoint') {
      layer.setStyle({
        img: {
@@ -101,7 +108,10 @@
    const icon = this.config.icon
    const type = e.target.feature.geometry.type
    if (type === 'LineString' || type === 'MultiLineString') {
      layer.setStyle({ weight: STYLES.WEIGHT, color: STYLES.COLOR })
      layer.setStyle({
        weight: STYLES.WEIGHT,
        color: STYLES.COLOR
      })
    }
    if (type === 'Point' || type === 'MultiPoint') {
      layer.setStyle({
@@ -127,4 +137,5 @@
    return name
  }
}

export default WfsLayerService

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

@@ -31,18 +31,15 @@
    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 = L.polyline(this.points, { showMeasurements: false, 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)
    }


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

@@ -13,25 +13,24 @@
        <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;"
        <el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;"
                   title="根据起始、结束管段进行连通性分析">清除
        </el-button>
        <!--        <el-scrollbar style="height:450px">-->
        <!--          <el-card shadow="hover">-->
        <span class="fixed-style">起始管段</span>
        <el-table
            ref="singleTable"
            highlight-current-row
            :data="tableDataLinkStart"
            @row-click="linkSelectStart"
            max-height="200"
            @row-click="linkSelectStart"
            style="width: 100%" size="mini">
          <el-table-column
              prop="lineloopna"
              prop="datasource"
              label="管线类型"
          >
          </el-table-column>
          <el-table-column
              :show-overflow-tooltip="true"
              sortable
              width="100"
              prop="pipecode"
@@ -41,14 +40,14 @@
          <el-table-column
              sortable
              width="100"
              prop="startpoint"
              prop="material"
              label="起点编号"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="endpointnu"
              prop="material"
              label="终点编号"
          >
          </el-table-column>
@@ -64,17 +63,19 @@
        </el-table>
        <span class="fixed-style">结束管段</span>
        <el-table
            height="100"
            max-height="200"
            highlight-current-row
            :data="tableDataLinkEnd"
            @row-click="linkSelectEnd"
            style="width: 100%" size="mini">
          <el-table-column
              prop="lineloopna"
              prop="datasource"
              label="管线类型"
          >
          </el-table-column>
          <el-table-column
              :show-overflow-tooltip="true"
              sortable
              width="100"
              prop="pipecode"
@@ -84,14 +85,14 @@
          <el-table-column
              sortable
              width="100"
              prop="startpoint"
              prop="material"
              label="起点编号"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="endpointnu"
              prop="material"
              label="终点编号"
          >
          </el-table-column>
@@ -153,7 +154,7 @@
        <!--          </el-card>-->
        <!--        </el-scrollbar>-->
      </el-tab-pane>
      <el-tab-pane label="爆管" name="second" style="color: #cccccc">
      <el-tab-pane label="爆管" style=";color: #cccccc" name="second">
        <el-row>
          <span>爆管（相关开关）</span>
          <el-button type="primary" @click="bgClick" size="mini" style="margin-bottom: 5px;" title="地图上点击选择发生爆管的管段">
@@ -163,14 +164,14 @@
          </el-button>
        </el-row>
        <!--        <el-card shadow="hover">-->
        <span class="fixed-style">发生爆裂的管段:</span>
        <span class="fixed-style">发生爆裂的管段</span>
        <el-table
            ref="singleTable"
            highlight-current-row
            :data="bgPipeLine"
            style="width: 100%" size="mini">
          <el-table-column
              prop="lineloopna"
              prop="pipecode"
              label="管线类型"
          >
          </el-table-column>
@@ -184,14 +185,14 @@
          <el-table-column
              sortable
              width="100"
              prop="startpoint"
              prop="pipecode"
              label="起点编号"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="endpointnu"
              prop="pipecode"
              label="终点编号"
          >
          </el-table-column>
@@ -205,7 +206,7 @@
            </template>
          </el-table-column>
        </el-table>
        <span class="fixed-style">需要关闭的阀门：</span>
        <span class="fixed-style">需要关闭的阀门</span>
        <el-table
            highlight-current-row
            :data="bgFm"
@@ -381,7 +382,7 @@
            <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: 600px;height:300px;"></div>
          <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width: 350px;height:200px;"></div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
@@ -488,12 +489,12 @@
      const param = {
        x: point[0],
        y: point[1],
        radius: 3
        radius: 5
      }
      // 根据参数请求接口数据
      const res = await mapApi.findPipelineByClickPoint(param)
      if (this.activeName === 'first') {
        if (this.linkType) {
        if (this.linkType === 1) {
          this.tableDataLinkStart = res.data
        } else {
          this.tableDataLinkEnd = res.data
@@ -502,10 +503,14 @@
        this.bgPipeLine = res.data
      } else if (this.activeName === 'third') {
        this.tableDataLiuxiang = res.data
      } else if (this.activeName === 'fourth') {

      }
      console.log(res)
      } else if (this.activeName === 'fourth') {}
      console.log(res.data)
    },
    // 流向显示 的方法参数封
    createFlowLine (param) {
      const flowLine = window.L.polyline(param.points, param.option)
      flowLine.addTo(window.map)
      return flowLine
    },

    // 连通性 ===> 地图点击起始管段e
@@ -518,7 +523,7 @@
    // 连通性 起始管段 table列表数据 选择数据事件 的点击事件
    linkSelectStart (e) {
      console.log('选择起始管段')
      this.$refs.singleTable.setCurrentRow(e)
      // this.$refs.singleTable.setCurrentRow(e)
      this.currentSelectStart = e
      if (this.currentSelectStartLine != null) {
        this.currentSelectStartLine.remove()
@@ -529,8 +534,8 @@
        style: function (feature) {
          return { color: 'rgba(0,255,0,.6)' }
        }
      }).addTo(this.map)
      this.map.panInsideBounds(this.currentSelectStartLine.getBounds())
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectStartLine.getBounds())
    },
    // 连通性 ===> 地图点击结束管段
    linkClickEnd () {
@@ -541,7 +546,6 @@
    // 连通性 结束管段 table列表数据 选择数据事件 的点击事件
    linkSelectEnd (e) {
      console.log('选择结束管段')
      console.log(e)
      this.currentSelectEnd = e

      // 做判断remove
@@ -549,14 +553,14 @@
        this.currentSelectEndLine.remove()
        this.currentSelectEndLine = null
      }

      // geoGson
      const geom = JSON.parse(e.geomText)
      this.currentSelectEndLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return { color: 'rgba(200,0,200,.6)' }
        }
      }).addTo(this.map)
      this.map.panInsideBounds(this.currentSelectEndLine.getBounds())
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectEndLine.getBounds())
    },
    // 连通性查询
    async linkQuery () {
@@ -578,7 +582,6 @@
        startLineID: this.currentSelectStart.id,
        endLineID: this.currentSelectEnd.id
      }
      console.log(param)
      // 请求接口和数据
      const res = await mapApi.findConnectedPipelines(param)
      console.log(res)
@@ -590,7 +593,9 @@
      }
      this.tableDataLinkResult = res.data
      this.currentLinkIsTrue = '连通'
      // table 数组数据置空
      const linkPipe = []
      // 数据遍历geoJson
      res.data.forEach((itm, idx) => {
        const geom = JSON.parse(itm.geomText)
        const points = []
@@ -599,29 +604,23 @@
        })
        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) => {
      //     const flowLine = window.L.polyline(param.points, param.option)
      //     flowLine.addTo(window.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)
      })
    },
    // 连通性 分析结果table列表数据选择点击事件
    linkResultSelect (e) {
      console.log('连通性分析结果列表点击')
      console.log(e)
      // console.log('连通性分析结果列表点击')
      // console.log(e)

      // const geom = JSON.parse(e.geomText)
      // if (this.currentSelectResultLine != null) {
@@ -676,63 +675,64 @@
        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 { 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)
      // console.log(res)
      // 数据请求参数
      const param = {
        lineID: e.id
      }
      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

      // 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 = 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 = this.createFlowLine(param1)
        this.linkPipeline.push(line)
      })
    },
    bgFmClick (e) {
      console.log('点击影响的阀门')
@@ -740,7 +740,7 @@
      const point = [e.data[0][0], e.data[0][1]]
      // const marker = main.createFlowMarker(point)
      // marker.addTo(this.map)
      this.map.flyTo(point, 16)
      window.map.flyTo(point, 16)
    },

    // 流向分析结果table列表数据点击
@@ -748,51 +748,54 @@
      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())
      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(0,250,255,.6)' }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
    },
    // 点击显示流向 table列表数据
    // 点击显示流向 table列表中的数据 => 进行官网流向的显示
    async lxQuery (e) {
      console.log(e)
      // console.log(e)
      this.clearLinkPipe()
      // const param = {
      //   lineNodeID: e.startpoint
      // }
      // const res = await api.findFlowDirection(param)
      const param = {
        // lineNodeID: e.startpoint
        lineNodeID: e.gid
      }
      const res = await mapApi.findFlowDirection(param)
      this.getres(res)
    },
    // 点击显示流向 table列表中的数据 => 进行官网流向的显示 的数据处理方法
    getres (res) {
      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)
      })

      // 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)
      // })
      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 () {
@@ -804,15 +807,15 @@
    // 流向-管线选择
    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: {
@@ -820,7 +823,7 @@
      //     dashSpeed: -30
      //   }
      // }
      // this.flowPipeLine = main.createFlowLine(param)
      // this.flowPipeLine = this.createFlowLine(param)
    },

    // 清楚分析结果
@@ -834,12 +837,12 @@
    },
    // 逆流向显示
    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: {
@@ -847,20 +850,20 @@
      //     dashSpeed: 30
      //   }
      // }
      // this.flowPipeLine = main.createFlowLine(param)
      // this.flowPipeLine = this.createFlowLine(param)
    },
    // 横断面绘制线段
    drawLine () {
      console.log('drawLine')
      // console.log('drawLine')
      if (this.measure === null) {
        this.measure = new DrawLine(this.map)
        this.measure = new DrawLine(window.map)
      }
      this.measure.destory()
      this.measure.init()
    },
    // 横断面数据请求
    async getHdmPoint (line) {
      console.log('横断面的绘制线')
      // console.log('横断面的绘制线')
      // console.table(line)
      // 横断面数据
      this.hdmParam = {
@@ -877,8 +880,8 @@
        return false
      }
      // 已绘制线图 进行绘制横断面数据分析
      // const res = await api.getCrossSection(this.hdmParam)
      // console.log(res)
      const res = await mapApi.getCrossSection(this.hdmParam)
      console.log(res)
    },
    // 横断面绘制完成后 进行横断面数据分析 进行图表展示
    async selectRow (e) {
@@ -897,7 +900,7 @@
          type: 'line'
        }]
      }
      this.myChartShow = true
      // this.myChartShow = true
      this.myChart.setOption(option)
    },
    // 横断面清除
@@ -912,6 +915,26 @@
</script>

<style lang="less" scoped>
///deep/ .el-table__row:hover > td {
//  background: none !important;
//}
//
///deep/ .el-table__row--striped:hover > td {
//  background: none !important;
//}

///deep/ .el-table__row.hover-row {
//  background: rgba(0, 16, 30, 0.9) !important
//}

/deep/ .el-table .has-gutter tr th {
  border: none !important;
}

/deep/ .el-table tbody tr:hover > td {
  background: none !important
}

/deep/ .el-tabs__header {
  background: none !important;
}
@@ -976,6 +999,6 @@
}

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

 src/components/plugin/MeaSure.js

@@ -151,6 +151,78 @@
  }
}

// 管线线段绘制方法
// const drawLine = {
//   points: [],
//   color: 'red',
//   L: null,
//   map: null,
//   layers: null,
//   polyline: null,
//   marker: null,
//   init (map, L) {
//     drawLine.L = window.L
//     drawLine.map = window.map
//     drawLine.points = []
//     drawLine.polyline = null
//     drawLine.marker = null
//     drawLine.layers = window.L.layers
//     map.on('click', drawLine.click).on('dblclick', drawLine.dblclick)
//   },
//   close: function (latlng) {
//     /*distanceMeasure.marker = L.marker(latlng, { icon: deleteIcon }).addTo(map).on("click", function (e) {
//     //console.log('marker',e);
//     if(distanceMeasure.polyline)
//     map.removeLayer(distanceMeasure.polyline);
//
//     if(distanceMeasure.marker)
//     distanceMeasure.marker.remove();
//     });*/
//   },
//   click: function (e) {
//     drawLine.map.doubleClickZoom.disable()
// // 添加点信息
//     drawLine.points.push(e.latlng)
// // 添加线
//     drawLine.map.on('mousemove', drawLine.mousemove)
//   },
//   mousemove (e) {
//     drawLine.points.push(e.latlng)
//     if (drawLine.polyline) {
//       distanceMeasure.map.removeLayer(distanceMeasure.polyline)
//     }
//     drawLine.polyline = drawLine.L.polyline(drawLine.points, {
//       showMeasurements: false,
//       color: 'red'
//     })
//     drawLine.polyline.addTo(drawLine.layers)
//     // distanceMeasure.polyline.enableEdit()
//     drawLine.layers.addTo(drawLine.map)
//     drawLine.points.pop()
//   },
//   dblclick (e) { // 双击结束
//     console.log(drawLine.polyline.dragging)
//     console.log('双击结束', e)
//     drawLine.polyline.enableEdit()
//     drawLine.polyline.dragging.disable()
//     drawLine.polyline.addTo(drawLine.layers)
//     drawLine.map.on('editable:vertex:drag editable:vertex:deleted', drawLine.polyline.updateMeasurements, drawLine.polyline)
//     drawLine.close(e.latlng)
//     drawLine.map.off('click', drawLine.click).off('mousemove', drawLine.mousemove).off('dblclick', drawLine.dblclick)
//   },
//   destory: function () {
//     if (drawLine.polyline) {
//       drawLine.map.removeLayer(drawLine.polyline)
//     }
//     if (drawLine.marker) {
//       drawLine.marker.remove()
//     }
//     if (drawLine.layers) {
//       drawLine.layers.clearLayers()
//     }
//   }
// }

const startMeasureArea = function (map, L) {
  areaMeasure.destory()
  areaMeasure.init(map, L)
@@ -161,12 +233,19 @@
  distanceMeasure.init(map, L)
}

// const drawLineData = (map, L) => {
//   drawLine.destory()
//   drawLine.init(map, L)
// }

const clearMeasure = function () {
  areaMeasure.destory()
  distanceMeasure.destory()
  // drawLine.destory()
}
export default {
  startMeasureArea,
  startMeasureLen,
  clearMeasure
  // drawLineData
}

 src/components/table/Public.vue

New file
@@ -0,0 +1,41 @@
<template>
  <div class="report-bounced map-background" v-drag>
    <div class="public-bounced-title">
      <slot name='title'></slot>
    </div>
    <div class="report-table-content">
      <slot name='publicTable'></slot>
    </div>
  </div>
</template>

<script>

// 引入拖拽
import '@/utils/dragBoxes'

export default {
  name: 'Public'
}
</script>

<style scoped lang="less">
.report-bounced {
  z-index: 2000;
  position: fixed;
  top: 35%;
  left: 35%;

  .public-bounced-title {
    text-align: center;
    height: 0.3rem;
    line-height: 0.3rem;
    border-bottom: .00521rem solid @color;

    span {
      font-size: 14px;
      color: #fff;
    }
  }
}
</style>

 src/components/table/ReportBounced.vue

New file
@@ -0,0 +1,36 @@
<template>
  <public>
    <template v-slot:title>
      <span>{{ titleProp }}</span>
    </template>
    <template v-slot:publicTable>
      <tab-handover></tab-handover>
    </template>
  </public>
</template>

<script>
import Public from '@components/table/Public'
import tabHandover from '../table/components/tabHandover'

export default {
  name: 'ReportBounced',
  components: {
    Public,
    tabHandover
  },
  data () {
    return {
      titleProp: ''
    }
  },
  methods: {
    refsDatatitle (item) {
      this.titleProp = item
    }
  }
}
</script>

<style lang="less" scoped>
</style>

 src/components/table/SummarySheet.vue

New file
@@ -0,0 +1,161 @@
<template>
  <div class="summary-sheets">
    <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="报表" placement="left">
      <div :class='["iconBtn",subtopic ? "active-button" : ""]' @click="subtopicBtn">
        <i class="el-icon-tickets icon"></i>
      </div>
    </el-tooltip>
    <transition name="animationChange">
      <div class="subtopic" v-if="subtopic">
        <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="统计表" placement="bottom">
          <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn('统计表')">
            <!--  -->
            <i class="icon iconfont iconbiaoge2"></i>
            <!--<span class="icon-name">统计表</span>-->
          </div>
        </el-tooltip>
        <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="指标" placement="bottom">
          <div :class='["iconBtn",companyVisible ? "active-button" : ""]' @click="showStatisDialog('指标')">
            <!-- <img src="@/assets/images/map-pages/icon/map/company.png" alt="" class="icon"> -->
            <i class="el-icon-office-building icon"></i>
          </div>
        </el-tooltip>
        <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="预报警" placement="bottom">
          <div :class='["iconBtn",warnVisible ? "active-button" : ""]' @click="showWarnDialog('预报警')">
            <i class="icon iconfont iconbaojing01"></i>
            <!--<span class="icon-name">预报警</span>-->
          </div>
        </el-tooltip>
      </div>
    </transition>
    <tab-handover v-show="summaryVisible" ref="titleProp"></tab-handover>
    <Warn v-show="companyVisible" ref="titlePropWarn"></Warn>
    <index-statistics v-show="warnVisible" ref="titlePropStatics"></index-statistics>
  </div>
</template>

<script>
import tabHandover from '@components/table/components/tabHandover'
import Warn from './components/Warn'
import IndexStatistics from '@components/table/components/IndexStatistics'
import bus from '@/eventBus'

export default {
  name: 'SummarySheet',
  components: {
    tabHandover,
    Warn,
    IndexStatistics
  },
  data () {
    return {
      summaryVisible: false,
      dialogShow: false,
      comp: Warn,
      warnVisible: false,
      companyVisible: false,
      subtopic: false
    }
  },
  // mounted () {
  //   const that = this
  //   bus.$on('changeState', function (state) {
  //     if (state.num !== 2 && state.type) {
  //       that.subtopic = false
  //     }
  //   })
  //   this.$nextTick(() => {
  //     this.$refs.summarySheets.$on('closeDialog', () => {
  //       that.summaryVisible = false
  //     })
  //     this.$refs.warnDialog.$on('closeDialog', () => {
  //       that.warnVisible = false
  //     })
  //     this.$refs.indexStatisticsDialog.$on('closeDialog', () => {
  //       that.companyVisible = false
  //     })
  //   })
  // },
  methods: {
    closeBtn (item) {
      this.$refs.titleProp.refsDatatitle(item)
      this.summaryVisible = !this.summaryVisible
    },
    showWarnDialog (item) {
      this.$refs.titlePropStatics.refsDatatitle(item)
      this.warnVisible = !this.warnVisible
    },
    showStatisDialog (item) {
      this.$refs.titlePropWarn.refsDatatitle(item)
      this.companyVisible = !this.companyVisible
    },
    subtopicBtn () {
      this.subtopic = !this.subtopic
      const state = {
        type: this.subtopic,
        num: 2
      }
      bus.$emit('changeState', state)
    }
  }
}
</script>

<style lang="less">
.summary-sheets {
  position: absolute;
  display: inline-flex;
  overflow: hidden;
  top: 0.42979rem;
  left: 0.14583rem;
  /*width: 850px;*/
  /*height: 265px;*/
  z-index: 500;

  .subtopic {
    display: inline-flex;

    .iconBtn {
      margin-left: 0.03rem;
      border-color: #00fff6;
      color: #00fff6;
    }

    .iconBtn.active-button {
      //border-color:#00fff6 !important;
      //color:#00fff6 !important;
    }
  }

  .dialog {
    //width: 800px;
    //height: 300px;
    position: absolute;
    top: 15%;
    left: 3rem;
  }

  .animationChange-enter-active, .animationChange-leave-active {
    transition: all 0.5s;
  }

  .animationChange-enter, .animationChange-leave-to {
    opacity: 0;
    transform: translateX(-100px);
  }

  /*color: #fff;*/

  .el-icon-c-scale-to-original {
    width: 30px;
    height: 30px;
    font-size: 30px;
  }

  .el-dialog.el-dialog--center {
    left: 0.5rem;
    top: 0.73979rem;
  }

}
</style>

 src/components/table/components/IndexStatistics.vue

@@ -1,39 +1,45 @@
<template>
    <el-tabs v-model="activeName">
  <Public>
    <template v-slot:title>
      <span>{{ titleProp }}</span>
    </template>
    <template v-slot:publicTable>
      <el-tabs v-model="activeName">
        <el-tab-pane label="指标统计" name="first">
            <el-table :data="tableData" :lock-scroll="true" class="scroll" >
                <el-table-column  type="index" label="序号"></el-table-column>
                <el-table-column prop="date" label="单位名称"></el-table-column>
                <el-table-column prop="province" label="工业取水量(m3)"></el-table-column>
                <el-table-column prop="province" label="外排废水量(m3)"></el-table-column>
                <el-table-column prop="province" label="工业废气排放量(m3)"></el-table-column>
                <el-table-column label="COD(t)">
                    <el-table-column prop="province" label="累计产生量"></el-table-column>
                    <el-table-column prop="city" label="当月产生量"></el-table-column>
                </el-table-column>
                <el-table-column label="氨氮(t)">
                    <el-table-column prop="province" label="累计产生量"></el-table-column>
                    <el-table-column prop="city" label="当月产生量"></el-table-column>
                </el-table-column>
                <el-table-column label="二氧化硫(t)">
                    <el-table-column prop="province" label="累计产生量"></el-table-column>
                    <el-table-column prop="city" label="当月产生量"></el-table-column>
                </el-table-column>
                <el-table-column label="氮氧化物(t)">
                    <el-table-column prop="province" label="累计产生量"></el-table-column>
                    <el-table-column prop="city" label="当月产生量"></el-table-column>
                </el-table-column>
                <el-table-column label="VOCs(t)">
                    <el-table-column prop="province" label="累计产生量"></el-table-column>
                    <el-table-column prop="city" label="当月产生量"></el-table-column>
                </el-table-column>
                <el-table-column label="固废(t)">
                    <el-table-column prop="province" label="累计产生量"></el-table-column>
                    <el-table-column prop="city" label="当月产生量"></el-table-column>
                </el-table-column>
            </el-table>
          <el-table :data="tableData" :lock-scroll="true" class="scroll">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="date" label="单位名称"></el-table-column>
            <el-table-column prop="province" label="工业取水量(m3)"></el-table-column>
            <el-table-column prop="province" label="外排废水量(m3)"></el-table-column>
            <el-table-column prop="province" label="工业废气排放量(m3)"></el-table-column>
            <el-table-column label="COD(t)">
              <el-table-column prop="province" label="累计产生量"></el-table-column>
              <el-table-column prop="city" label="当月产生量"></el-table-column>
            </el-table-column>
            <el-table-column label="氨氮(t)">
              <el-table-column prop="province" label="累计产生量"></el-table-column>
              <el-table-column prop="city" label="当月产生量"></el-table-column>
            </el-table-column>
            <el-table-column label="二氧化硫(t)">
              <el-table-column prop="province" label="累计产生量"></el-table-column>
              <el-table-column prop="city" label="当月产生量"></el-table-column>
            </el-table-column>
            <el-table-column label="氮氧化物(t)">
              <el-table-column prop="province" label="累计产生量"></el-table-column>
              <el-table-column prop="city" label="当月产生量"></el-table-column>
            </el-table-column>
            <el-table-column label="VOCs(t)">
              <el-table-column prop="province" label="累计产生量"></el-table-column>
              <el-table-column prop="city" label="当月产生量"></el-table-column>
            </el-table-column>
            <el-table-column label="固废(t)">
              <el-table-column prop="province" label="累计产生量"></el-table-column>
              <el-table-column prop="city" label="当月产生量"></el-table-column>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="企业排名" name="second"><el-table :data="tableData">
        <el-tab-pane label="企业排名" name="second">
          <el-table :data="tableData">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="date" label="企业名称"></el-table-column>
            <el-table-column prop="name" label="废水达标率"></el-table-column>
@@ -44,8 +50,10 @@
            <el-table-column prop="zip" label="名次"></el-table-column>
            <el-table-column prop="zip" label="设备完好率"></el-table-column>
            <el-table-column prop="zip" label="排名"></el-table-column>
        </el-table></el-tab-pane>
        <el-tab-pane label="排放点排名" name="third"><el-table :data="tableData">
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="排放点排名" name="third">
          <el-table :data="tableData">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="date" label="排放点名称"></el-table-column>
            <el-table-column prop="name" label="排放类型"></el-table-column>
@@ -55,15 +63,23 @@
            <el-table-column prop="zip" label="名次"></el-table-column>
            <el-table-column prop="zip" label="设备完好率"></el-table-column>
            <el-table-column prop="zip" label="名次"></el-table-column>
        </el-table></el-tab-pane>
    </el-tabs>

          </el-table>
        </el-tab-pane>
      </el-tabs>
    </template>
  </Public>
</template>

<script>

import Public from '@components/table/Public'

export default {
  name: 'IndexStatistics',
  components: { Public },
  data () {
    return {
      titleProp: '',
      activeName: 'first',
      tableData: [{
        date: '集团公司',
@@ -88,6 +104,11 @@
        zip: 200333
      }]
    }
  },
  methods: {
    refsDatatitle (item) {
      this.titleProp = item
    }
  }
}
</script>

 src/components/table/components/Warn.vue

@@ -1,155 +1,166 @@
<template>
    <el-tabs v-model="activeName">
  <Public>
    <template v-slot:title>
      <span>{{ titleProp }}</span>
    </template>
    <template v-slot:publicTable>
      <el-tabs v-model="activeName">
        <el-tab-pane label="实时统计" name="first">
            <el-scrollbar style="width:100%">
          <el-scrollbar style="width:100%">
            <el-table
                    :data="tableData">
                :data="tableData">
              <el-table-column
                  prop="date"
                  label="企业名称">
              </el-table-column>
              <el-table-column label="废水(个)">
                <el-table-column
                        prop="date"
                        label="企业名称">
                    prop="name"
                    label="预警">
                </el-table-column>
                <el-table-column label="废水(个)">
                    <el-table-column
                            prop="name"
                            label="预警">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="报警">
                    </el-table-column>
                <el-table-column
                    prop="name"
                    label="报警">
                </el-table-column>
                <el-table-column label="废气(个)">
                    <el-table-column
                            prop="name"
                            label="预警">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="报警">
                    </el-table-column>
              </el-table-column>
              <el-table-column label="废气(个)">
                <el-table-column
                    prop="name"
                    label="预警">
                </el-table-column>
                <el-table-column label="固废(个)">
                    <el-table-column
                            prop="name"
                            label="预警">
                    </el-table-column>
                <el-table-column
                    prop="name"
                    label="报警">
                </el-table-column>
                <el-table-column label="硫化氢(个)">
                    <el-table-column
                            prop="name"
                            label="预警">
                    </el-table-column>
              </el-table-column>
              <el-table-column label="固废(个)">
                <el-table-column
                    prop="name"
                    label="预警">
                </el-table-column>
                <el-table-column label="可燃气体(个)">
                    <el-table-column
                            prop="name"
                            label="预警">
                    </el-table-column>
              </el-table-column>
              <el-table-column label="硫化氢(个)">
                <el-table-column
                    prop="name"
                    label="预警">
                </el-table-column>
              </el-table-column>
              <el-table-column label="可燃气体(个)">
                <el-table-column
                    prop="name"
                    label="预警">
                </el-table-column>
              </el-table-column>
            </el-table>
            </el-scrollbar>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="当月统计" name="second">
            <el-table
                    :data="tableData">
                <el-table-column
                        prop="date"
                        label="企业名称">
                </el-table-column>
                <el-table-column label="废水(个)">
                    <el-table-column
                            prop="name"
                            label="预警">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="报警">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="废气(个)">
                    <el-table-column
                            prop="name"
                            label="预警">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="报警">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="固废(个)">
                    <el-table-column
                            prop="name"
                            label="预警">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="硫化氢(个)">
                    <el-table-column
                            prop="name"
                            label="预警">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="可燃气体(个)">
                    <el-table-column
                            prop="name"
                            label="预警">
                    </el-table-column>
                </el-table-column>
            </el-table>
          <el-table
              :data="tableData">
            <el-table-column
                prop="date"
                label="企业名称">
            </el-table-column>
            <el-table-column label="废水(个)">
              <el-table-column
                  prop="name"
                  label="预警">
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="报警">
              </el-table-column>
            </el-table-column>
            <el-table-column label="废气(个)">
              <el-table-column
                  prop="name"
                  label="预警">
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="报警">
              </el-table-column>
            </el-table-column>
            <el-table-column label="固废(个)">
              <el-table-column
                  prop="name"
                  label="预警">
              </el-table-column>
            </el-table-column>
            <el-table-column label="硫化氢(个)">
              <el-table-column
                  prop="name"
                  label="预警">
              </el-table-column>
            </el-table-column>
            <el-table-column label="可燃气体(个)">
              <el-table-column
                  prop="name"
                  label="预警">
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="上月统计" name="third">
            <el-table
                    :data="tableData">
                <el-table-column
                        prop="date"
                        label="企业名称">
                </el-table-column>
                <el-table-column label="废水(个)">
                    <el-table-column
                            prop="name"
                            label="预警">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="报警">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="废气(个)">
                    <el-table-column
                            prop="name"
                            label="预警">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="报警">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="固废(个)">
                    <el-table-column
                            prop="name"
                            label="预警">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="硫化氢(个)">
                    <el-table-column
                            prop="name"
                            label="预警">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="可燃气体(个)">
                    <el-table-column
                            prop="name"
                            label="预警">
                    </el-table-column>
                </el-table-column>
            </el-table>
          <el-table
              :data="tableData">
            <el-table-column
                prop="date"
                label="企业名称">
            </el-table-column>
            <el-table-column label="废水(个)">
              <el-table-column
                  prop="name"
                  label="预警">
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="报警">
              </el-table-column>
            </el-table-column>
            <el-table-column label="废气(个)">
              <el-table-column
                  prop="name"
                  label="预警">
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="报警">
              </el-table-column>
            </el-table-column>
            <el-table-column label="固废(个)">
              <el-table-column
                  prop="name"
                  label="预警">
              </el-table-column>
            </el-table-column>
            <el-table-column label="硫化氢(个)">
              <el-table-column
                  prop="name"
                  label="预警">
              </el-table-column>
            </el-table-column>
            <el-table-column label="可燃气体(个)">
              <el-table-column
                  prop="name"
                  label="预警">
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-tab-pane>
    </el-tabs>
      </el-tabs>
    </template>
  </Public>
</template>

<script>

import Public from '@components/table/Public'

export default {
  data () {
    return {
      titleProp: '',
      activeName: 'first',
      tableData: [{
        date: '集团公司',
@@ -181,6 +192,12 @@
        zip: 1
      }]
    }
  },
  components: { Public },
  methods: {
    refsDatatitle (item) {
      this.titleProp = item
    }
  }
}
</script>

 src/components/table/components/tabHandover.vue

@@ -1,31 +1,25 @@
<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- <el-tab-pane label="废水" name="first">
        <waste-water></waste-water>
      </el-tab-pane>
      <el-tab-pane label="废气" name="second">
        <waste-water></waste-water>
      </el-tab-pane>
      <el-tab-pane label="固废" name="third">
        <solid-waste></solid-waste>
      </el-tab-pane>
      <el-tab-pane label="空气质量" name="fourth">
        <AirQuality></AirQuality>
      </el-tab-pane> -->
      <el-tab-pane v-for="(item,index) in topicList" :key="index" :label="item.name" :name="item.name"></el-tab-pane>
    </el-tabs>
    <div>
      <component :is="gcComp"></component>
    </div>
  </div>
  <Public>
    <template v-slot:title>
      <span>{{ titleProp }}</span>
    </template>
    <template v-slot:publicTable>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="(item,index) in topicList" :key="index" :label="item.name" :name="item.name"></el-tab-pane>
      </el-tabs>
      <div>
        <component :is="gcComp"></component>
      </div>
    </template>
  </Public>
</template>

<script>

import Public from '@components/table/Public'

import WasteWater from '@components/table/components/WasteWater'

import SoilGroundwater from '@components/table/components/SoilGroundwater'

import WasteGas from '@components/table/components/WasteGas'
import SolidWaste from '@components/table/components/WasteSolid'
import AirQuality from '@components/table/components/AirQuality'
@@ -35,6 +29,7 @@
export default {
  name: 'tabHandover',
  components: {
    Public,
    WasteWater,
    // WasteGas,
    // SoilGroundwater,
@@ -43,12 +38,16 @@
  },
  data () {
    return {
      titleProp: '',
      activeName: 'first',
      topicList: TopicList,
      gcComp: AirQuality
    }
  },
  methods: {
    refsDatatitle (item) {
      this.titleProp = item
    },
    handleClick (tab, event) {
      console.log(tab.label)
      switch (tab.label) {

 src/conf/MapConfig.js

@@ -22,9 +22,10 @@
  minZoom: 3,
  maxZoom: 17,
  // center: [26, 104],
  center: [38.828558921813965, 117.41676807403564],
  // center: [29.454345703125, 113.40362548828125],
  zoom: 5,
  // center: [38.828558921813965, 117.41676807403564],
  // zoom: 5,
  center: [32.25853085517883, 118.78592848777771],
  zoom: 15,
  worldCopyJump: true,
  inertia: true,
  zoomControl: false,

 src/views/MapTemplate.vue

@@ -9,7 +9,8 @@
    <tool-box-panel ref="toolBox"></tool-box-panel>
    <!--    <menu-special></menu-special>-->
    <legend-panel></legend-panel>
    <summary-sheets></summary-sheets>
<!--    <summary-sheets></summary-sheets>-->
    <SummarySheet></SummarySheet>
    <!-- <enterprise></enterprise> -->
    <!--    <el-button id="map-btn" el-icon-c-scale-to-original icon="el-icon-c-scale-to-original" circle @click="isShowHidden"></el-button>-->
    <!--    <el-button type="primary" @click="ChangeState" class="solid-waste">固废</el-button>-->
@@ -26,7 +27,8 @@
import SgisLayerController from '@components/LayerController/LayerController'
import MonitorPanel from '@components/panel/RightSearchPanel'
// import TopEnterprisePanel from '@components/panel/TopEnterprisePanel'
import summarySheets from '@components/table/summarySheets.vue'
// import summarySheets from '@components/table/summarySheets.vue'
import SummarySheet from '@components/table/SummarySheet'
import ToolBoxPanel from '@components/panel/ToolBoxPanel'
import Popup from '@views/popup/Popup'
// import MenuSpecial from '@components/panel/MenuTopic'
@@ -47,7 +49,8 @@
    SgisLayerController,
    MonitorPanel,
    Popup,
    summarySheets,
    // summarySheets,
    SummarySheet,
    PublicBounced
  },
  data () {