废水废气图表数据弹框相关修改

chenzeping

2021-04-25 38ef8cb7cefcd4b308bdefa164fb01ccbd6a0a81

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

@@ -17,8 +17,8 @@
                       title="根据起始、结束管段进行连通性分析">清除
            </el-button>
            <el-scrollbar style="height:450px">
              <el-card shadow="hover"> <!-- style="height: 300px"-->
                <span class="clearfixs">起始管段</span>
              <el-card shadow="hover">
                <span class="fixed-style">起始管段</span>
                <el-table
                    ref="singleTable"
                    highlight-current-row
@@ -62,7 +62,7 @@
                    </template>
                  </el-table-column>
                </el-table>
                <span class="clearfixs">结束管段</span>
                <span class="fixed-style">结束管段</span>
                <el-table
                    max-height="200"
                    highlight-current-row
@@ -105,7 +105,7 @@
                    </template>
                  </el-table-column>
                </el-table>
                <span class="clearfixs">分析结果:<span style="color: red;">{{ currentLinkIsTrue }}</span></span>
                <span class="fixed-style">分析结果:<span style="color: red;">{{ currentLinkIsTrue }}</span></span>
                <el-table
                    highlight-current-row
                    max-height="200"
@@ -160,13 +160,11 @@
            <el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;" title="清除绘制">清除
            </el-button>
            <el-card shadow="hover">
              <span class="clearfixs">发生爆裂的管段</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"
@@ -204,7 +202,7 @@
                  </template>
                </el-table-column>
              </el-table>
              <span class="clearfixs">需要关闭的阀门</span>
              <span class="fixed-style">需要关闭的阀门</span>
              <el-table
                  highlight-current-row
                  :data="bgFm"
@@ -345,7 +343,7 @@
            <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">
              <div slot="header" class="fixed-style">
                <span>管线查询结果</span>
              </div>
              <el-table
@@ -362,6 +360,7 @@
                    width="180">
                </el-table-column>
                <el-table-column
                    class-name="fixed-table"
                    fixed="right"
                    label="图表查看"
                >
@@ -372,11 +371,11 @@
              </el-table>
            </el-card>
            <el-card class="box-card">
              <div slot="header" class="clearfixs">
              <div slot="header" class="fixed-style">
                <span>断面图</span>
              </div>
              <span v-show="!myChartShow" style="color: #909399;font-size: 12px;">暂无数据</span>
              <div v-show="myChartShow" id="echarts_box" style="width: 600px;height:300px;"></div>
              <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width: 600px;height:300px;"></div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
@@ -387,65 +386,68 @@

<script>

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

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

import mapApi from '@/api/mapApi'
import eventBus from '../../../../eventBus'
import DrawLine from './AnalysisChoose/DrawLine'
import mapApi from '../../../../api/mapApi'

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

      myChart: null,
      myChartShow: false,
      flowPipeLine: null,

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

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

      currentResultLine: null,
      currentLinkIsTrue: '',

      linkPipeline: [],

      lxTableDataResult: [],

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

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

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

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

      // 横断面 管线查询结果 的table表格数据
      tableData: []
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.map = window.map
      // this.myChart = this.$echarts.init(document.getElementById('echarts_box'))
      // eventBus.$on('draw-hdm-line', (points) => {
      //   this.getHdmPoint(points)
      // })
    // 初始化echarts图表
    this.myChart = this.$echarts.init(this.$refs.myChart)
    // 使用 DrwLine方法
    eventBus.$on('draw-hdm-line', (points) => {
      this.getHdmPoint(points)
    })
  },
  methods: {
@@ -467,14 +469,14 @@

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

    // 连通性 ===> 地图点击起始管段
@@ -489,6 +491,7 @@
      this.linkType = 0
      this.selectPipeLine()
    },
    // 连通性 起始管段 table列表数据 选择数据事件 的点击事件
    linkSelectStart (e) {
      console.log('选择起始管段')
      console.log(e)
@@ -506,6 +509,7 @@
      // }).addTo(this.map)
      // this.map.panInsideBounds(this.currentSelectStartLine.getBounds())
    },
    // 连通性 结束管段 table列表数据 选择数据事件 的点击事件
    linkSelectEnd (e) {
      console.log('选择结束管段')
      console.log(e)
@@ -524,6 +528,7 @@
      // }).addTo(this.map)
      // this.map.panInsideBounds(this.currentSelectEndLine.getBounds())
    },
    // 连通性 分析结果table列表数据选择点击事件
    linkResultSelect (e) {
      console.log('连通性分析结果列表点击')
      console.log(e)
@@ -601,7 +606,7 @@
      // this.linkPipeline.push(line)
      // })
    },
    // 连通性部分的清除功能
    // 连通性的清除功能
    linkClear () {
      if (this.currentSelectStartLine != null) {
        this.currentSelectStartLine.remove()
@@ -618,65 +623,6 @@
      if (this.bgMarker != null) {
        this.bgMarker.remove()
        this.bgMarker = null
      }
    },

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

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

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

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

@@ -764,6 +710,66 @@
      // marker.addTo(this.map)
      this.map.flyTo(point, 16)
    },

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

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

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

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

    // 流向数据请求
    async getPipeLine (point) {
      // const param = {
@@ -771,7 +777,9 @@
      //   y: point[1],
      //   radius: 3
      // }
      // console.log(param)

      // 根据参数请求接口数据
      // const res = await api.getPipeline(param)
      // 3 流向

@@ -801,6 +809,7 @@
      console.log('正流向显示')
      console.log(e)

      // 清除流向方法
      this.clearLX()
      // const param = {
      //   points: e.data,
@@ -812,6 +821,7 @@
      // this.flowPipeLine = main.createFlowLine(param)
    },

    // 清楚分析结果
    clearLinkPipe () {
      if (this.linkPipeline.length > 0) {
        this.linkPipeline.forEach((itm, idx) => {
@@ -820,6 +830,7 @@
      }
      this.linkPipeline = []
    },
    // 逆流向显示
    lxHandleClick2 (e) {
      console.log('逆流向显示')
      console.log(e)
@@ -836,10 +847,20 @@
      // }
      // this.flowPipeLine = main.createFlowLine(param)
    },
    // 横断面绘制线段
    drawLine () {
      console.log('drawLine')
      if (this.measure === null) {
        this.measure = new DrawLine(this.map)
      }
      this.measure.destory()
      this.measure.init()
    },
    // 横断面数据请求
    async getHdmPoint (line) {
      console.log('横断面的绘制线')
      console.table(line)
      // console.table(line)
      // 横断面数据
      this.hdmParam = {
        x1: line[0].lng,
        y1: line[0].lat,
@@ -847,11 +868,20 @@
        y2: line[1].lat
      }
    },
    // 横断面选择后 图表展示
    // 横断面数据请求
    async jdmQuery () {
      if (this.hdmParam == null) {
        this.$message('请先在地图上绘制截断线')
        return false
      }
      // 已绘制线图 进行绘制横断面数据分析
      // const res = await api.getCrossSection(this.hdmParam)
      // console.log(res)
    },
    // 横断面绘制完成后 进行横断面数据分析 进行图表展示
    async selectRow (e) {
      console.log(e)
      // 3. 使用刚指定的配置项和数据，显示图表

      const option = {
        xAxis: {
          type: 'category',
@@ -865,26 +895,10 @@
          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) {
@@ -942,7 +956,7 @@
  padding: 0;
}

/deep/ .clearfixs {
/deep/ .fixed-style {
  display: inline-block;
  color: #ffffff;
  margin: 15px;