~xingchuan/SewerAndRainNetwork.git

			@@ -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="断面(高程)" :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,8 +71,24 @@
			eventBus.$on('draw-hdm-line', (points) => {
			this.getHdmPoint(points)
			})
			eventBus.$on('tabData-change', (obj) => {
			if (obj) {
			this.jdmClear()
			}
			})
			},
			methods: {
			// 横断面清除
			jdmClear () {
			this.hdmParam = null
			this.tableData = []
			this.option = []
			this.myChartShow = false
			this.myChart.clear()
			if (this.measure != null) {
			this.measure.destory()
			}
			},
			// 横断面线段绘制
			drawLine () {
			if (this.measure === null) {
			@@ -77,8 +116,8 @@
			}
			// 已绘制线图进行绘制横断面数据分析
			const res = await mapApi.getCrossSection(this.hdmParam)
			// 调用数据处理方法
			this.dealWithData(res)
			// // 调用数据处理方法
			// this.dealWithData(res)
			// table数据处理
			const dataPoint = res.data.point
			// 存储间距list
			@@ -86,106 +125,118 @@
			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]
			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],
			startpointz: dataPoint[i].pipelines.extraData.startpointz,
			diameter: dataPoint[i].pipelines.extraData.diameter
			}
			this.tableData.push(obj)
			}
			// 调用数据处理方法
			this.dealWithData(this.tableData)
			},
			// 对获取到的数据进行处理
			dealWithData (e) {
			console.log(e)
			dealWithData (dataList) {
			console.log(dataList)
			// 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'
			}
			xAxis: {
			type: 'category',
			splitLine: {
			lineStyle: {
			type: 'dashed'
			},
			show: true
			},
			axisLine: {
			lineStyle: {
			color: '#fff',
			width: 2
			}
			// data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
			// data: dataList
			},
			// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			data: xAxisData,
			axisLabel: {
			interval: 0,
			textStyle: {
			color: '#fff'
			},
			margin: 20
			}
			],
			yAxis: [
			{
			type: 'value',
			axisLabel: {
			// formatter: '{value}',
			textStyle: {
			color: '#fff'
			}
			},
			yAxis: {
			axisLine: {
			lineStyle: {
			color: '#fff',
			width: 2
			}
			},
			axisPointer: {
			snap: true
			},
			splitLine: {
			show: false
			},
			type: 'value',
			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
			},
			series: [
			{
			type: 'scatter',
			data: dataObj
			}
			]
			}
			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()
			}
			this.myChart.setOption(option)
			}
			}
			}