From ec4d5c1827487f4c901b69bd9eae58e111e82b32 Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期四, 20 五月 2021 18:05:25 +0800
Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop
---
src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue | 228 +++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 181 insertions(+), 47 deletions(-)
diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue
index b417149..918f08e 100644
--- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue
+++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue
@@ -1,62 +1,196 @@
<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-table
- :data="tableData"
- height="250"
- border
- 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>
- </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 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>
+ <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: [{
- date: '2016-05-02',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�'
- }, {
- date: '2016-05-04',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�'
- }, {
- date: '2016-05-01',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�'
- }, {
- date: '2016-05-03',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
- }]
+ measure: null,
+ myChart: null,
+ options: [],
+ echartsList: [],
+ myChartShow: false,
+ linkPipeline: [],
+ // 妯柇闈� 绠℃鏌ヨ缁撴灉 鐨則able琛ㄦ牸鏁版嵁
+ tableData: [],
+ hdmParam: null
+ }
+ },
+ mounted () {
+ // 鍒濆鍖杄charts鍥捐〃
+ this.myChart = this.$echarts.init(this.$refs.myChart)
+ // 浣跨敤 DrwLine鏂规硶
+ eventBus.$on('draw-hdm-line', (points) => {
+ this.getHdmPoint(points)
+ })
+ },
+ methods: {
+ // 妯柇闈� 绾挎缁樺埗
+ 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(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)
+ }
+ },
+ // 瀵硅幏鍙栧埌鐨勬暟鎹繘琛屽鐞�
+ dealWithData (e) {
+ console.log(e)
+ },
+ // 妯柇闈㈢粯鍒跺畬鎴愬悗 杩涜妯柇闈㈡暟鎹垎鏋� 杩涜鍥捐〃灞曠ず
+ selectRow (dataList) {
+ // console.log(dataList)
+ // 3. 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁锛屾樉绀哄浘琛�
+ this.option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#6a7985'
+ }
+ }
+ },
+ // legend: {
+ // // data: ['鐩存帴璁块棶', '鎼滅储寮曟搸']
+ // data: dataList
+ // },
+ toolbox: {
+ show: false,
+ feature: {
+ saveAsImage: {}
+ }
+ },
+ grid: {
+ left: '10px',
+ right: '0',
+ top: '10px',
+ bottom: '5px',
+ 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'
+ }
+ }
+ }
+ ],
+ // 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.clear()
+ this.myChart.setOption(this.option)
+ },
+ // 妯柇闈㈡竻闄�
+ jdmClear () {
+ this.hdmParam = null
+ this.tableData = []
+ this.option = []
+ this.myChartShow = false
+ this.myChart.clear()
+ if (this.measure != null) {
+ this.measure.destory()
+ }
}
}
}
</script>
<style lang="less" scoped>
-/deep/ .el-table {
- margin-top: 15px;
-}
+
</style>
--
Gitblit v1.8.0