管线分析相关功能问题修改

陈泽平

2021-05-21 c60e56e2b6ceb633c6b10f5dc52e3da88129ad70

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

@@ -1,59 +1,247 @@
<template>
  <div class="connectivity">
    <el-row>
      <el-button type="primary" size="mini">绘制线段</el-button>
      <el-button type="primary" size="mini">截断面分析</el-button>
      <el-button type="primary" size="mini">清除</el-button>
    </el-row>
    <el-card class="box-card">
      <span class="clearfix">管线查询结果</span>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="date"
            label="管线名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="管线类型"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="操作">
        </el-table-column>
      </el-table>
      <span class="clearfix">断面图</span>
      <div class="cross-section">
        <span>暂无数据</span>
      </div>
    </el-card>
  </div>
    <div class="connectivity">
        <el-row>
            <el-button type="primary" @click="drawLine" size="mini" title="地图上绘制要进行分析截断面的线">绘制线段</el-button>
            <el-button type="primary" @click="jdmQuery" size="mini" title="截断面分析">截断面分析</el-button>
            <el-button type="primary" @click="jdmClear" size="mini" title="清除截断面分析结果">清除</el-button>
        </el-row>
        <div slot="header" class="fixed-style">
            <span>管段查询结果</span>
        </div>
        <el-table class="tableBox" :data="tableData" height="150" max-height="200" highlight-current-row
                  style="width: 100%" size="mini">
            <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop"
                             :label="item.label" :show-overflow-tooltip="true" min-width="100"></el-table-column>
        </el-table>
        <span class="fixed-style">断面图</span>
        <span v-show="!myChartShow"
              style="color: #909399;font-size: 12px;height: 200px;display: block;text-align: center;line-height: 200px">暂无数据</span>
        <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width:350px;height:200px;margin: 0 auto"></div>
    </div>
</template>

<script>
import eventBus from '../../../../../eventBus'
import mapApi from '../../../../../api/mapApi'
import DrawLine from '../../../../plugin/DrawLine'

export default {
  name: 'CrossSectional',
  data () {
    return {
      tableData: []
      // 用于绘制横断面线段
      measure: null,
      // 定义 echarts对象
      myChart: null,
      // 用于判断echarts图表的显示与隐藏
      myChartShow: false,
      // 用于定义接收横断面数据
      hdmParam: null,
      // 横断面 管段查询结果 的table表格数据
      tableData: [],
      // table 表格定义的字段
      listLabel: [
        {
          label: '介质类型',
          prop: 'mediumtype'
        },
        {
          label: '断面(经度)',
          prop: 'x'
        },
        {
          label: '断面(纬度)',
          prop: 'y'
        },
        {
          label: '断面高程(m)',
          prop: 'z'
        },
        {
          label: '间距(m)',
          prop: 'spacing'
        }
      ]
    }
  },
  mounted () {
    // 初始化echarts图表
    this.myChart = this.$echarts.init(this.$refs.myChart)
    // 使用 DrwLine方法
    eventBus.$on('draw-hdm-line', (points) => {
      this.getHdmPoint(points)
    })
    eventBus.$on('tabData-change', (obj) => {
      if (obj) {
        this.jdmClear()
      }
    })
  },
  methods: {
    // 横断面清除
    jdmClear () {
      this.hdmParam = null
      this.tableData = []
      this.option = []
      this.myChartShow = false
      this.myChart.clear()
      if (this.measure != null) {
        this.measure.destory()
      }
    },
    // 横断面 线段绘制
    drawLine () {
      if (this.measure === null) {
        this.measure = new DrawLine(window.map)
      }
      this.measure.destory()
      this.measure.init()
    },
    // 绘制的横断面 线段数据获取
    async getHdmPoint (line) {
      // 横断面数据
      this.hdmParam = {
        x1: line[0].lng,
        y1: line[0].lat,
        x2: line[1].lng,
        y2: line[1].lat
      }
    },
    // 横断面 数据请求
    async jdmQuery () {
      this.tableData = []
      if (this.hdmParam == null) {
        this.$message('请先在地图上绘制截断线')
        return false
      }
      // 已绘制线图 进行绘制横断面数据分析
      const res = await mapApi.getCrossSection(this.hdmParam)
      // // 调用数据处理方法
      // this.dealWithData(res)
      // table数据处理
      const dataPoint = res.data.point
      // 存储间距list
      const spacingList = res.data.pointInterval.reverse()
      for (let i = 0; i < dataPoint.length; i++) {
        const obj = {
          mediumtype: dataPoint[i].pipelines.extraData.mediumtype,
          x: parseFloat(dataPoint[i].crossPoint3D.x).toFixed(8),
          y: parseFloat(dataPoint[i].crossPoint3D.y).toFixed(8),
          z: parseFloat(dataPoint[i].crossPoint3D.z).toFixed(2),
          spacing: spacingList[i - 1],
          startpointz: dataPoint[i].pipelines.extraData.startpointz,
          diameter: dataPoint[i].pipelines.extraData.diameter
        }
        this.tableData.push(obj)
      }
      // 调用数据处理方法
      this.dealWithData(this.tableData)
    },
    // 对获取到的数据进行处理
    dealWithData (dataList) {
      console.log(dataList)
      // const dataPoint = e.data.point
      // const spacingList = e.data.pointInterval.reverse()
      // const dataList = []
      // for (let i = 0; i < dataPoint.length; i++) {
      //   const obj = {
      //     mediumtype: dataPoint[i].pipelines.extraData.mediumtype,
      //     startpointz: dataPoint[i].pipelines.extraData.startpointz,
      //     diameter: dataPoint[i].pipelines.extraData.diameter,
      //     spacing: spacingList[i - 1],
      //     x: parseFloat(dataPoint[i].crossPoint3D.x).toFixed(8),
      //     y: parseFloat(dataPoint[i].crossPoint3D.y).toFixed(8),
      //     z: parseFloat(dataPoint[i].crossPoint3D.z).toFixed(2)
      //   }
      //   dataList.push(obj)
      // }
      // 横向坐标数据
      const xAxisData = []
      const dataObj = []
      for (let i = 0; i < dataList.length; i++) {
        xAxisData.push(dataList[i].mediumtype)
        // if (dataList[i].mediumtype === '雨水') {
        //   dataObj.color = 'red'
        // }
        dataObj.push(dataList[i].startpointz)
      }
      this.selectRow(xAxisData, dataObj)
    },
    // 横断面绘制完成后 进行横断面数据分析 进行图表展示
    selectRow (xAxisData, dataObj) {
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        // legend: {
        //   data: []
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          splitLine: {
            lineStyle: {
              type: 'dashed'
            },
            show: true
          },
          axisLine: {
            lineStyle: {
              color: '#fff',
              width: 2
            }
          },
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          data: xAxisData,
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#fff'
            },
            margin: 20
          }
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: '#fff',
              width: 2
            }
          },
          axisPointer: {
            snap: true
          },
          splitLine: {
            show: false
          },
          type: 'value',
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#fff'
            }
          }
        },
        series: [
          {
            type: 'scatter',
            data: dataObj
          }
        ]
      }
      this.myChartShow = true
      this.myChart.clear()
      this.myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.cross-section {
  background: rgba(0, 16, 30, 0.5);
  border: 0.00521rem solid @color;
  box-shadow: 0 0 0.03rem @color;
  color: #ffffff;
  width: 100%;
  height: 50px;
  border-radius: 3px;
  text-align: center;
  line-height: 50px;
}

</style>