管线分析横截面

ChenZeping

2021-05-06 1929431aba55ed59dc09564fd1ee6c0fa3ec0a9f

管线分析横截面

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

@@ -21,8 +21,9 @@
        <span class="fixed-style">起始管段</span>
        <el-table
            class="tableBox"
                        max-height="200"
                        highlight-current-row
            :data="tableDataLinkStart"
            max-height="100"
            @row-click="linkSelectStart"
            style="width: 100%" size="mini">
          <el-table-column
@@ -53,6 +54,7 @@
          >
          </el-table-column>
          <el-table-column
                            fixed="right"
              class-name="fixed-table"
              label="操作"
          >
@@ -99,7 +101,7 @@
          </el-table-column>
          <el-table-column
              class-name="fixed-table"

                            fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
@@ -145,7 +147,7 @@
          </el-table-column>
          <el-table-column
              class-name="fixed-table"

                            fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
@@ -160,10 +162,12 @@
      <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="地图上点击选择发生爆管的管段">
                    <el-button type="primary" @click="bgClick" size="mini" style="margin-bottom: 5px;"
                               title="地图上点击选择发生爆管的管段">
            选择管段
          </el-button>
          <el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;" title="清除绘制">清除
                    <el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;" title="清除绘制">
                        清除
          </el-button>
        </el-row>
        <!--        <el-card shadow="hover">-->
@@ -207,7 +211,7 @@
          </el-table-column>
          <el-table-column
              class-name="fixed-table"

                            fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
@@ -256,7 +260,7 @@

          <el-table-column
              class-name="fixed-table"

                            fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
@@ -307,6 +311,7 @@
          </el-table-column>
          <el-table-column
              class-name="fixed-table"
                            fixed="right"
              label="操作"
              width="100"
          >
@@ -356,6 +361,7 @@
          </el-table-column>
          <el-table-column
              class-name="fixed-table"
                            fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
@@ -366,7 +372,8 @@
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="横断面" name="fourth">
        <el-button type="primary" @click="drawLine" size="mini" style="margin-bottom: 5px;" title="地图上绘制要进行分析截断面的线">
                <el-button type="primary" @click="drawLine" size="mini" style="margin-bottom: 5px;"
                           title="地图上绘制要进行分析截断面的线">
          绘制线段
        </el-button>
        <el-button type="primary" @click="jdmQuery" size="mini" style="margin-bottom: 5px;" title="截断面分析">截断面分析
@@ -394,7 +401,7 @@
          </el-table-column>
          <el-table-column
              class-name="fixed-table"

                            fixed="right"
              label="图表查看"
          >
            <template slot-scope="scope">
@@ -472,7 +479,10 @@
      lxTableDataResult: [],

      // 横断面 管线查询结果 的table表格数据
      tableData: []
      tableData: [],

      echartsList: []

    }
  },
  mounted () {
@@ -786,8 +796,8 @@
      console.log('点击影响的阀门')
      console.log(e)
      const point = [e.data[0][0], e.data[0][1]]
      // const marker = main.createFlowMarker(point)
      // marker.addTo(this.map)
      const marker = this.createFlowMarker(point)
      marker.addTo(this.map)
      window.map.flyTo(point, 16)
    },

@@ -841,10 +851,6 @@
        this.linkPipeline.push(line)
      })
    },
    // 点击显示流向 table列表中的数据 => 进行官网流向的显示 的数据处理方法
    // getres (res) {
    //
    // },
    // 清除流向
    clearLX () {
      if (this.flowPipeLine != null) {
@@ -929,10 +935,7 @@
      }
      // 已绘制线图 进行绘制横断面数据分析
      const res = await mapApi.getCrossSection(this.hdmParam)
      console.log(res)
      const dataPoint = res.data.point
      console.log(dataPoint)
      // this.tableData = dataPoint.pipelines.extraData
      for (let i = 0; i < dataPoint.length; i++) {
        const obj = {
          pipename: dataPoint[i].pipelines.extraData.pipename,
@@ -940,26 +943,106 @@
        }
        this.tableData.push(obj)
      }
      this.dealWithData(res)
    },
    dealWithData (e) {
      const dataSeries = e.data.point
      let tempData
      const storeData = []
      const dataList = []
      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)
    },
    // 横断面绘制完成后 进行横断面数据分析 进行图表展示
    async selectRow (e) {
      console.log(e)
      // option 数据处理 const dataSeries = e.data.pointInterval
    selectRow (dataList) {
      // console.log(dataList)
      // 3. 使用刚指定的配置项和数据，显示图表
      const option = {
        xAxis: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          // data: ['直接访问', '搜索引擎']
          data: dataList
        },
        toolbox: {
          show: false,
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          // left: '3%',
          // right: '4%',
          // bottom: '3%',
          // containLabel: true
        },
        xAxis: [
          {
          type: 'category',
          // data: ['井1', '井2', '井3', '井4', '井5', '井6', '井7']
          data: ['井1', '井2', '井3', '井4', '井5', '井6', '井7']
            boundaryGap: false,
            axisLabel: {
              // formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          // data: dataSeries,
          type: 'line'
        }]
            // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            data: dataList
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              // formatter: '{value}',
              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
      }
      this.myChartShow = true
      this.myChart.setOption(option)
@@ -967,6 +1050,8 @@
    // 横断面清除
    jdmClear () {
      this.hdmParam = null
      this.tableData = []
      this.myChartShow = false
      if (this.measure != null) {
        this.measure.destory()
      }
@@ -986,7 +1071,7 @@
/deep/ .tableBox::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
        /*height: 10px;*/
}

/deep/ .tableBox::-webkit-scrollbar-thumb {
@@ -1073,7 +1158,13 @@
  background: none;
}

    /deep/ .el-table__fixed-right {
        bottom: 0;
        padding: 0;
        margin: 0;
    }

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

 src/components/table/SummarySheet.vue

@@ -56,26 +56,15 @@
      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: {
    subtopicBtn () {
      this.subtopic = !this.subtopic
      const state = {
        type: this.subtopic,
        num: 2
      }
      bus.$emit('changeState', state)
    },
    closeBtn (item) {
      this.$refs.titleProp.refsDatatitle(item)
      this.summaryVisible = !this.summaryVisible
@@ -93,14 +82,6 @@
      this.warnVisible = !this.warnVisible
      this.summaryVisible = false
      this.companyVisible = false
    },
    subtopicBtn () {
      this.subtopic = !this.subtopic
      const state = {
        type: this.subtopic,
        num: 2
      }
      bus.$emit('changeState', state)
    }
  }
}