管线分析功能问题修改

陈泽平

2021-05-21 b187fa62b3e02d8417d73139dcf3e2271268788d

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

@@ -8,26 +8,23 @@
        <div slot="header" class="fixed-style">
            <span>管段查询结果</span>
        </div>
        <el-table class="tableBox" :data="tableData" height="150" max-height="200" highlight-current-row
                  style="width: 100%" @row-click="selectRow" size="mini">
        <el-table class="tableBox" :data="tableData" height="150" max-height="200" highlight-current-row style="width: 100%" size="mini">
            <el-table-column prop="mediumtype" label="介质类型" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="x" label="断面(经度)" :show-overflow-tooltip="true" width="80"></el-table-column>
            <el-table-column prop="y" label="断面(纬度)" :show-overflow-tooltip="true" width="80"></el-table-column>
            <el-table-column prop="z" label="断面(高程)" :show-overflow-tooltip="true" width="80"></el-table-column>
            <el-table-column prop="z" label="断面高程(m)" :show-overflow-tooltip="true" width="80"></el-table-column>
            <el-table-column prop="spacing" label="间距(m)" width="80"></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>
        <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 './DrawLine'
import DrawLine from '../../../../plugin/DrawLine'

export default {
  name: 'CrossSectional',
@@ -51,9 +48,16 @@
    eventBus.$on('draw-hdm-line', (points) => {
      this.getHdmPoint(points)
    })
    this.$nextTick(() => {
      eventBus.$on('tabData-change', (obj) => {
        if (obj) {
          this.jdmClear()
        }
      })
    })
  },
  methods: {
    // 横断面绘制线段
    // 横断面 线段绘制
    drawLine () {
      if (this.measure === null) {
        this.measure = new DrawLine(window.map)
@@ -61,7 +65,7 @@
      this.measure.destory()
      this.measure.init()
    },
    // 横断面数据请求
    // 绘制的横断面 线段数据获取
    async getHdmPoint (line) {
      // 横断面数据
      this.hdmParam = {
@@ -71,7 +75,7 @@
        y2: line[1].lat
      }
    },
    // 横断面数据请求
    // 横断面 数据请求
    async jdmQuery () {
      this.tableData = []
      if (this.hdmParam == null) {
@@ -80,67 +84,26 @@
      }
      // 已绘制线图 进行绘制横断面数据分析
      const res = await mapApi.getCrossSection(this.hdmParam)
      console.log(res)
      // let obj = {}
      const dataSpacing = res.data.pointInterval
      for (let i = 0; i < dataSpacing.length; i++) {
        const objSpacing = {
          spacing: dataSpacing[i]
        }
        console.log(objSpacing)
        this.tableData.push(objSpacing)
      }
      // const dataSpacing = res.data.pointInterval
      // // for (let i = 0; i < dataSpacing.length; i++) {
      // //   this.obj.spacing = dataSpacing[i]
      // // }
      // const dataPoint = res.data.point
      // // const obj = {}
      // for (let i = 0; i < dataPoint.length; i++) {
      //   this.obj.mediumtype = dataPoint[i].pipelines.extraData.mediumtype
      //   this.obj.x = parseFloat(dataPoint[i].crossPoint3D.x).toFixed(4)
      //   this.obj.y = parseFloat(dataPoint[i].crossPoint3D.y).toFixed(4)
      //   this.obj.z = parseFloat(dataPoint[i].crossPoint3D.z).toFixed(4)
      //   this.obj.spacing = parseFloat(dataPoint[i].crossPoint3D.z).toFixed(4)
      // }
      // 调用数据处理方法
      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(4),
          y: parseFloat(dataPoint[i].crossPoint3D.y).toFixed(4),
          z: parseFloat(dataPoint[i].crossPoint3D.z).toFixed(4)
          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]
        }
        this.tableData.push(obj)
      }
      this.dealWithData(res)
    },
    // 对获取到的数据进行处理
    dealWithData (e) {
      const dataSeries = e.data.point
      let tempData
      const storeData = []
      const dataList = []
      this.echartsList = []
      for (let i = 0; i < dataSeries.length; i++) {
        if (storeData.length === 0) {
          storeData.push(name)
          tempData = {
            name: dataSeries[i].pipelines.oilPipeID,
            data: e.data.pointInterval,
            type: 'line'
          }
          this.echartsList.push(tempData)
        }
        dataList.push(dataSeries[i].pipelines.oilPipeID)
      }
      // console.log(dataList)
      // const seriesList = e.data.pointInterval
      // let seriesdata
      // for (let i = 0; i < seriesList.length; i++) {
      //   console.log(seriesList[i])
      // }
      // x数据处理
      this.selectRow(dataList)
      console.log(e)
    },
    // 横断面绘制完成后 进行横断面数据分析 进行图表展示
    selectRow (dataList) {