管线分析横断面数据图表展示

陈泽平

2021-05-21 bb588bddeaee7ea617f8ad019ba9f5e1825d9e27

管线分析横断面数据图表展示

 src/components/BaseNav/WasteGas/WasteGasIndex.vue

@@ -95,10 +95,15 @@
      margin: 0 10px;
      cursor: pointer;
      padding: 5px;
      border: 1px solid #2b87c8;
      border-radius: 4px;
      /*border: 1px solid #2b87c8;*/
      /*border-radius: 4px;*/
      text-align: center;
      vertical-align: middle !important;
      color: #fff;
      -webkit-transform: skew(30deg);
      -moz-transform: skew(30deg);
      -o-transform: skew(30deg);
      transform: skew(15deg);
    }

    .default-uncheck {

 src/components/BaseNav/WasteWater/WasteWaterIndex.vue

@@ -95,10 +95,15 @@
      margin: 0 10px;
      cursor: pointer;
      padding: 5px;
      border: 1px solid #2b87c8;
      border-radius: 4px;
      /*border: 1px solid #2b87c8;*/
      /*border-radius: 4px;*/
      text-align: center;
      vertical-align: middle !important;
      color: #fff;
      -webkit-transform: skew(30deg);
      -moz-transform: skew(30deg);
      -o-transform: skew(30deg);
      transform: skew(15deg);
    }

    .default-uncheck {

 src/components/panel/topicSearch/SewersSearch.vue

@@ -135,13 +135,6 @@
    // tab切换
    handleClick (tab, event) {
      console.log(tab, event)
      if (tab.label === '分析') {
        // 关闭弹窗
        window.mapManager.clickDialogSwitch = false
      } else {
        // 打开弹窗
        window.mapManager.clickDialogSwitch = true
      }
    },
    // 根据返回数据 确认展示图片
    getImgSrc () {

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

@@ -96,12 +96,13 @@
    // 地图上点击
    selectPipeLine () {
      window.map.on('click', this.selectClick)
      // 关闭弹窗
      window.layerFactory.clickSwitch = false
      window.mapManager.clickDialogSwitch = false
    },
    // 地图上点击回调
    selectClick (e) {
      // console.log(e)
      window.map.off('click', this.selectClick)
      window.mapManager.clickDialogSwitch = true
      const point = [e.latlng.lng, e.latlng.lat]
      this.getPipeLine(point)
    },
@@ -114,7 +115,7 @@
      }
      // 根据参数请求接口数据
      const res = await mapApi.findPipelineByClickPoint(param)
      // console.log(res)
      console.log(res)
      if (this.linkType === 1) {
        this.tableDataLinkStart = res.data
      } else {
@@ -124,6 +125,7 @@
    // 连通性 ===> 地图点击起始管段e
    linkClickStart (e) {
      // console.log('地图点击起始管段')
      // window.mapManager.clickDialogSwitch = false
      this.linkType = 1
      this.selectPipeLine()
    },
@@ -214,7 +216,11 @@
        const geom = JSON.parse(itm.geomText)
        const points = []
        geom.coordinates.forEach((it, id) => {
          points.push(it.reverse())
          const item = it.reverse()
          if (it.length > 2) {
            item.shift()
          }
          points.push(item)
        })
        linkPipe.push(points)
      })

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

@@ -8,15 +8,14 @@
        <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 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="断面高程(m)" :show-overflow-tooltip="true" width="80"></el-table-column>
            <el-table-column prop="spacing" label="间距(m)" width="80"></el-table-column>
        <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>
        <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>
@@ -30,15 +29,39 @@
  name: 'CrossSectional',
  data () {
    return {
      // 用于绘制横断面线段
      measure: null,
      // 定义 echarts对象
      myChart: null,
      options: [],
      echartsList: [],
      // 用于判断echarts图表的显示与隐藏
      myChartShow: false,
      linkPipeline: [],
      // 用于定义接收横断面数据
      hdmParam: null,
      // 横断面 管段查询结果 的table表格数据
      tableData: [],
      hdmParam: null
      // table 表格定义的字段
      listLabel: [
        {
          label: '介质类型',
          prop: 'mediumtype'
        },
        {
          label: '断面(经度)',
          prop: 'x'
        },
        {
          label: '断面(纬度)',
          prop: 'y'
        },
        {
          label: '断面高程(m)',
          prop: 'z'
        },
        {
          label: '间距(m)',
          prop: 'spacing'
        }
      ]
    }
  },
  mounted () {
@@ -48,12 +71,10 @@
    eventBus.$on('draw-hdm-line', (points) => {
      this.getHdmPoint(points)
    })
    this.$nextTick(() => {
      eventBus.$on('tabData-change', (obj) => {
        if (obj) {
          this.jdmClear()
        }
      })
    eventBus.$on('tabData-change', (obj) => {
      if (obj) {
        this.jdmClear()
      }
    })
  },
  methods: {
@@ -104,84 +125,90 @@
    // 对获取到的数据进行处理
    dealWithData (e) {
      console.log(e)
      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 (dataList) {
      // console.log(dataList)
      // 3. 使用刚指定的配置项和数据，显示图表
      this.option = {
    selectRow (xAxisData, dataObj) {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
          trigger: 'axis'
        },
        // legend: {
        //   // data: ['直接访问', '搜索引擎']
        //   data: dataList
        //   data: []
        // },
        toolbox: {
          show: false,
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '10px',
          right: '0',
          top: '10px',
          bottom: '5px',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              // formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            }
            // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            // data: dataList
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              // formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
        xAxis: {
          type: 'category',
          splitLine: {
            lineStyle: {
              type: 'dashed'
            },
            show: true
          },
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          data: xAxisData,
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#fff'
            }
          }
        ],
        // series: [
        //   {
        //     name: '搜索引擎',
        //     type: 'line',
        //     stack: '总量',
        //     label: {
        //       show: true,
        //       position: 'top'
        //     },
        //     areaStyle: {},
        //     emphasis: {
        //       focus: 'series'
        //     },
        //     data: [820, 932, 901, 934, 1290, 1330, 1320]
        //   }
        // ]
        series: this.echartsList
        },
        yAxis: {
          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(this.option)
      this.myChart.setOption(option)
    },
    // 横断面清除
    jdmClear () {

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

@@ -175,7 +175,11 @@
        const geom = JSON.parse(itm.geomText)
        const points = []
        geom.coordinates.forEach((it, id) => {
          points.push(it.reverse())
          const item = it.reverse()
          if (it.length > 2) {
            item.shift()
          }
          points.push(item)
        })
        linkPipe.push(points)
      })
@@ -203,6 +207,11 @@
        this.currentSelectResultLine.remove()
        this.currentSelectResultLine = null
      }
      if (this.linkPipeline.length > 0) {
        this.linkPipeline.forEach((itm, idx) => {
          itm.remove()
        })
      }
    }
  }
}

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

@@ -1,5 +1,6 @@
export function selectPipeLine () {
  window.map.on('click', this.selectClick)
  window.mapManager.clickDialogSwitch = true
}

export function createFlowLine (param) {

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

@@ -192,7 +192,11 @@
        const geom = JSON.parse(itm.geomText)
        const points = []
        geom.coordinates.forEach((it, id) => {
          points.push(it.reverse())
          const item = it.reverse()
          if (it.length > 2) {
            item.shift()
          }
          points.push(item)
        })
        linkPipe.push(points)
      })