横断面数据修改

陈泽平

2021-05-20 18db6fdcd0bed3b9db803591b6057a98dd47c597

横断面数据修改

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

@@ -5,33 +5,22 @@
      <el-button type="primary" @click="jdmQuery" size="mini" title="截断面分析">截断面分析</el-button>
      <el-button type="primary" @click="jdmClear" size="mini" title="清除截断面分析结果">清除</el-button>
    </el-row>
    <!-- <el-card class="box-card">-->
    <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-column prop="pipename" label="管段名称"></el-table-column>
      <el-table-column prop="mediumtype" label="管段类型" width="80"></el-table-column>
      <el-table-column class-name="fixed-table" fixed="right" label="图表" width="40">
        <template slot-scope="scope">
          <el-button @click="selectRow(scope.row)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
            <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="spacing" label="间距(m)" width="80"></el-table-column>
    </el-table>
    <!--  </el-card>-->
    <!-- <el-card class="box-card">
        <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" ref="myChart" style="width: 350px;height:200px;"></div>
    </el-card> -->
    <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><!-- v-show="myChartShow" -->
             style="width:350px;height:200px;margin: 0 auto"></div>
  </div>
</template>

@@ -64,68 +53,8 @@
    })
  },
  methods: {
    // tab切换
    handleClick () {
      this.clearLinkPipe()
      this.jdmClear()
      this.currentLinkIsTrue = ''
      this.bgFm = []
      this.bgPipeLine = []
      this.tableData = []
      this.tableDataLiuxiang = []
      this.tableDataLinkStart = []
      this.tableDataLinkEnd = []
      this.tableDataLinkResult = []
      this.lxTableDataResult = []
    },
    // 地图上点击
    selectPipeLine () {
      window.map.on('click', this.selectClick)
      // // 关闭弹窗
      window.layerFactory.clickSwitch = false
    },
    // 地图上点击回调
    selectClick (e) {
      // console.log(e)
      window.map.off('click', this.selectClick)
      const point = [e.latlng.lng, e.latlng.lat]
      this.getPipeLine(point)
    },
    // 点击获取判断数据
    async getPipeLine (point) {
      const param = {
        x: point[0],
        y: point[1],
        radius: 3
      }
      // 根据参数请求接口数据
      const res = await mapApi.findPipelineByClickPoint(param)
      console.log(res)
      if (this.activeName === 'first') {
        if (this.linkType === 1) {
          this.tableDataLinkStart = res.data
        } else {
          this.tableDataLinkEnd = res.data
        }
      } else if (this.activeName === 'second') {
        this.bgPipeLine = res.data
      } else if (this.activeName === 'third') {
        this.tableDataLiuxiang = res.data
      } else if (this.activeName === 'fourth') {
      }
    },
    // 清楚分析结果
    clearLinkPipe () {
      if (this.linkPipeline.length > 0) {
        this.linkPipeline.forEach((itm, idx) => {
          itm.remove()
        })
      }
      this.linkPipeline = []
    },
    // 横断面绘制线段
    drawLine () {
      // console.log('drawLine')
      if (this.measure === null) {
        this.measure = new DrawLine(window.map)
      }
@@ -134,8 +63,6 @@
    },
    // 横断面数据请求
    async getHdmPoint (line) {
      // console.log('横断面的绘制线')
      // console.table(line)
      // 横断面数据
      this.hdmParam = {
        x1: line[0].lng,
@@ -153,15 +80,39 @@
      }
      // 已绘制线图 进行绘制横断面数据分析
      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)
      // }
      const dataPoint = res.data.point
      for (let i = 0; i < dataPoint.length; i++) {
        const obj = {
          pipename: dataPoint[i].pipelines.extraData.pipename,
          mediumtype: dataPoint[i].pipelines.extraData.mediumtype
          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)
        }
        this.tableData.push(obj)
      }
      // console.log(this.tableData, 'this.tableData')
      this.dealWithData(res)
    },
    dealWithData (e) {

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

@@ -11,6 +11,7 @@
                <Flow></Flow>
            </el-tab-pane>
            <el-tab-pane label="横断面" name="fourth">
                <!--                <CrossSectional></CrossSectional>-->
                <el-row>
                    <el-button type="primary" @click="drawLine" size="mini" title="地图上绘制要进行分析截断面的线">绘制线段</el-button>
                    <el-button type="primary" @click="jdmQuery" size="mini" title="截断面分析">截断面分析</el-button>
@@ -22,16 +23,16 @@
                </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-column prop="pipename" label="介质类型" :show-overflow-tooltip="true"></el-table-column>
                    <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="spacing" label="间距(m)" width="80"></el-table-column>
                    <el-table-column class-name="fixed-table" fixed="right" label="图表" width="40">
                        <template slot-scope="scope">
                            <el-button @click="selectRow(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                    <!--                    <el-table-column class-name="fixed-table" fixed="right" label="图表" width="40">-->
                    <!--                        <template slot-scope="scope">-->
                    <!--                            <el-button @click="selectRow(scope.row)" type="text" size="small">查看</el-button>-->
                    <!--                        </template>-->
                    <!--                    </el-table-column>-->
                </el-table>
                <!--  </el-card>-->
                <!-- <el-card class="box-card">
@@ -60,6 +61,7 @@
import Connectivity from './AnalysisChoose/Connectivity'
import Tube from './AnalysisChoose/Tube'
import Flow from './AnalysisChoose/Flow'
// import CrossSectional from './AnalysisChoose/CrossSectional'

export default {
  name: 'SewersAnalysis',
@@ -67,6 +69,7 @@
    Connectivity,
    Tube,
    Flow
    // CrossSectional
  },
  data () {
    return {
@@ -118,7 +121,8 @@
      lxTableDataResult: [],

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

    }
  },
@@ -588,33 +592,22 @@
      // 已绘制线图 进行绘制横断面数据分析
      const res = await mapApi.getCrossSection(this.hdmParam)
      console.log(res)
      // let obj = {}
      const dataSpacing = res.data.pointInterval
      console.log(dataSpacing)
      // for (let i = 0; i < dataSpacing.length; i++) {
      //   obj.push({
      //     spacing: dataSpacing[i]
      //   })
      //   console.log(obj)
      // }
      // const dataPoint = res.data.point
      // const dataPointjj = res.data.pointInterval
      // for (let i = 0; i < dataPoint.length; i++) {
      //   obj = {
      //     pipename: dataPoint[i].pipelines.extraData.pipename,
      //     x: dataPoint[i].crossPoint3D.x,
      //     y: dataPoint[i].crossPoint3D.y,
      //     z: dataPoint[i].crossPoint3D.z
      //   }
      //   this.tableData.push(obj)
      // }
      // for (let i = 0; i < dataPointjj.length; i++) {
      //   obj = {
      //     pointInterval: dataPointjj[i]
      //   }
      //   this.tableData.push(obj)
      //   console.log(obj)
      // }
      const dataPoint = res.data.point
      // 存储间距list
      const spacingList = res.data.pointInterval.reverse()
      // console.log(spacingList)
      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),
          spacing: spacingList[i - 1]
        }
        this.tableData.push(obj)
      }
      // spacingList.reverse()
      // console.log(spacingList)
      // console.log(this.tableData)
      this.dealWithData(res)
    },