~xingchuan/SewerAndRainNetwork.git

			@@ -1,66 +1,289 @@
			<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-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>
			<el-card class="box-card">
			<span class="clearfix">管线查询结果</span>
			<el-table
			:data="tableData"
			style="width: 100%">
			<el-table-column
			prop="date"
			label="管线类型">
			</el-table-column>
			<el-table-column
			prop="name"
			label="管线名称">
			</el-table-column>
			<el-table-column
			prop="province"
			label="起点编号">
			</el-table-column>
			<el-table-column
			prop="city"
			label="终点编号">
			</el-table-column>
			<el-table-column
			class-name="fixed-table"
			fixed="right"
			label="操作">
			</el-table-column>
			</el-table>
			<span class="clearfix">断面图</span>
			<div class="cross-section">
			<span>暂无数据</span>
			</div>
			</el-card>
			<!-- <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>
			<!-- </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" -->
			</div>
			</template>

			<script>
			import eventBus from '../../../../../eventBus'
			import mapApi from '../../../../../api/mapApi'
			import DrawLine from './DrawLine'

			export default {
			name: 'CrossSectional',
			data () {
			return {
			tableData: []
			measure: null,
			myChart: null,
			options: [],
			echartsList: [],
			myChartShow: false,
			linkPipeline: [],
			// 横断面管段查询结果的table表格数据
			tableData: [],
			hdmParam: null
			}
			},
			mounted () {
			// 初始化echarts图表
			this.myChart = this.$echarts.init(this.$refs.myChart)
			// 使用 DrwLine方法
			eventBus.$on('draw-hdm-line', (points) => {
			this.getHdmPoint(points)
			})
			},
			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)
			}
			this.measure.destory()
			this.measure.init()
			},
			// 横断面数据请求
			async getHdmPoint (line) {
			// console.log('横断面的绘制线')
			// console.table(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)
			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
			}
			this.tableData.push(obj)
			}
			// console.log(this.tableData, 'this.tableData')
			this.dealWithData(res)
			},
			dealWithData (e) {
			const dataSeries = e.data.point
			let tempData
			const storeData = []
			const dataList = []
			this.echartsList = []
			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)
			},
			// 横断面绘制完成后进行横断面数据分析进行图表展示
			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>
			.cross-section {
			background: rgba(0, 16, 30, 0.5);
			border: 0.00521rem solid @color;
			box-shadow: 0 0 0.03rem @color;
			color: #ffffff;
			width: 100%;
			height: 50px;
			border-radius: 3px;
			text-align: center;
			line-height: 50px;
			}

			</style>