~xingchuan/SewerAndRainNetwork.git

			@@ -13,25 +13,24 @@
			<el-button type="primary" @click="linkQuery" size="mini" style="margin-bottom: 5px;"
			title="根据起始、结束管段进行连通性分析">连通性分析
			</el-button>
			<el-button type="primary" @click="linkClear" size="mini" style="margin-bottom: 5px;"
			<el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;"
			title="根据起始、结束管段进行连通性分析">清除
			</el-button>
			<!-- <el-scrollbar style="height:450px">-->
			<!-- <el-card shadow="hover">-->
			<span class="fixed-style">起始管段</span>
			<el-table
			ref="singleTable"
			highlight-current-row
			:data="tableDataLinkStart"
			@row-click="linkSelectStart"
			max-height="200"
			@row-click="linkSelectStart"
			style="width: 100%" size="mini">
			<el-table-column
			prop="lineloopna"
			prop="datasource"
			label="管线类型"
			>
			</el-table-column>
			<el-table-column
			:show-overflow-tooltip="true"
			sortable
			width="100"
			prop="pipecode"
			@@ -41,14 +40,14 @@
			<el-table-column
			sortable
			width="100"
			prop="startpoint"
			prop="material"
			label="起点编号"
			>
			</el-table-column>
			<el-table-column
			sortable
			width="100"
			prop="endpointnu"
			prop="material"
			label="终点编号"
			>
			</el-table-column>
			@@ -64,17 +63,19 @@
			</el-table>
			<span class="fixed-style">结束管段</span>
			<el-table
			height="100"
			max-height="200"
			highlight-current-row
			:data="tableDataLinkEnd"
			@row-click="linkSelectEnd"
			style="width: 100%" size="mini">
			<el-table-column
			prop="lineloopna"
			prop="datasource"
			label="管线类型"
			>
			</el-table-column>
			<el-table-column
			:show-overflow-tooltip="true"
			sortable
			width="100"
			prop="pipecode"
			@@ -84,14 +85,14 @@
			<el-table-column
			sortable
			width="100"
			prop="startpoint"
			prop="material"
			label="起点编号"
			>
			</el-table-column>
			<el-table-column
			sortable
			width="100"
			prop="endpointnu"
			prop="material"
			label="终点编号"
			>
			</el-table-column>
			@@ -153,7 +154,7 @@
			<!-- </el-card>-->
			<!-- </el-scrollbar>-->
			</el-tab-pane>
			<el-tab-pane label="爆管" name="second" style="color: #cccccc">
			<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="地图上点击选择发生爆管的管段">
			@@ -163,14 +164,14 @@
			</el-button>
			</el-row>
			<!-- <el-card shadow="hover">-->
			<span class="fixed-style">发生爆裂的管段:</span>
			<span class="fixed-style">发生爆裂的管段</span>
			<el-table
			ref="singleTable"
			highlight-current-row
			:data="bgPipeLine"
			style="width: 100%" size="mini">
			<el-table-column
			prop="lineloopna"
			prop="pipecode"
			label="管线类型"
			>
			</el-table-column>
			@@ -184,14 +185,14 @@
			<el-table-column
			sortable
			width="100"
			prop="startpoint"
			prop="pipecode"
			label="起点编号"
			>
			</el-table-column>
			<el-table-column
			sortable
			width="100"
			prop="endpointnu"
			prop="pipecode"
			label="终点编号"
			>
			</el-table-column>
			@@ -205,7 +206,7 @@
			</template>
			</el-table-column>
			</el-table>
			<span class="fixed-style">需要关闭的阀门：</span>
			<span class="fixed-style">需要关闭的阀门</span>
			<el-table
			highlight-current-row
			:data="bgFm"
			@@ -381,7 +382,7 @@
			<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: 600px;height:300px;"></div>
			<div v-show="myChartShow" id="echarts_box" ref="myChart" style="width: 350px;height:200px;"></div>
			</el-card>
			</el-tab-pane>
			</el-tabs>
			@@ -488,12 +489,12 @@
			const param = {
			x: point[0],
			y: point[1],
			radius: 3
			radius: 5
			}
			// 根据参数请求接口数据
			const res = await mapApi.findPipelineByClickPoint(param)
			if (this.activeName === 'first') {
			if (this.linkType) {
			if (this.linkType === 1) {
			this.tableDataLinkStart = res.data
			} else {
			this.tableDataLinkEnd = res.data
			@@ -502,10 +503,14 @@
			this.bgPipeLine = res.data
			} else if (this.activeName === 'third') {
			this.tableDataLiuxiang = res.data
			} else if (this.activeName === 'fourth') {

			}
			console.log(res)
			} else if (this.activeName === 'fourth') {}
			console.log(res.data)
			},
			// 流向显示的方法参数封
			createFlowLine (param) {
			const flowLine = window.L.polyline(param.points, param.option)
			flowLine.addTo(window.map)
			return flowLine
			},

			// 连通性 ===> 地图点击起始管段e
			@@ -518,7 +523,7 @@
			// 连通性起始管段 table列表数据选择数据事件的点击事件
			linkSelectStart (e) {
			console.log('选择起始管段')
			this.$refs.singleTable.setCurrentRow(e)
			// this.$refs.singleTable.setCurrentRow(e)
			this.currentSelectStart = e
			if (this.currentSelectStartLine != null) {
			this.currentSelectStartLine.remove()
			@@ -529,8 +534,8 @@
			style: function (feature) {
			return { color: 'rgba(0,255,0,.6)' }
			}
			}).addTo(this.map)
			this.map.panInsideBounds(this.currentSelectStartLine.getBounds())
			}).addTo(window.map)
			window.map.panInsideBounds(this.currentSelectStartLine.getBounds())
			},
			// 连通性 ===> 地图点击结束管段
			linkClickEnd () {
			@@ -541,7 +546,6 @@
			// 连通性结束管段 table列表数据选择数据事件的点击事件
			linkSelectEnd (e) {
			console.log('选择结束管段')
			console.log(e)
			this.currentSelectEnd = e

			// 做判断remove
			@@ -549,14 +553,14 @@
			this.currentSelectEndLine.remove()
			this.currentSelectEndLine = null
			}

			// geoGson
			const geom = JSON.parse(e.geomText)
			this.currentSelectEndLine = window.L.geoJSON(geom, {
			style: function (feature) {
			return { color: 'rgba(200,0,200,.6)' }
			}
			}).addTo(this.map)
			this.map.panInsideBounds(this.currentSelectEndLine.getBounds())
			}).addTo(window.map)
			window.map.panInsideBounds(this.currentSelectEndLine.getBounds())
			},
			// 连通性查询
			async linkQuery () {
			@@ -578,7 +582,6 @@
			startLineID: this.currentSelectStart.id,
			endLineID: this.currentSelectEnd.id
			}
			console.log(param)
			// 请求接口和数据
			const res = await mapApi.findConnectedPipelines(param)
			console.log(res)
			@@ -590,7 +593,9 @@
			}
			this.tableDataLinkResult = res.data
			this.currentLinkIsTrue = '连通'
			// table 数组数据置空
			const linkPipe = []
			// 数据遍历geoJson
			res.data.forEach((itm, idx) => {
			const geom = JSON.parse(itm.geomText)
			const points = []
			@@ -599,29 +604,23 @@
			})
			linkPipe.push(points)
			})

			// linkPipe.forEach((itm, idx) => {
			// const param1 = {
			// points: itm,
			// option: {
			// dashArray: '15 15',
			// dashSpeed: -30,
			// color: '#ffff00'
			// }
			// }
			// const line = main.createFlowLine(param1)
			// const createFlowLine = (param) => {
			// const flowLine = window.L.polyline(param.points, param.option)
			// flowLine.addTo(window.map)
			// return flowLine
			// }
			// this.linkPipeline.push(line)
			// })
			linkPipe.forEach((itm, idx) => {
			const param1 = {
			points: itm,
			option: {
			dashArray: '15 15',
			dashSpeed: -30,
			color: '#ffff00'
			}
			}
			const line = this.createFlowLine(param1)
			this.linkPipeline.push(line)
			})
			},
			// 连通性分析结果table列表数据选择点击事件
			linkResultSelect (e) {
			console.log('连通性分析结果列表点击')
			console.log(e)
			// console.log('连通性分析结果列表点击')
			// console.log(e)

			// const geom = JSON.parse(e.geomText)
			// if (this.currentSelectResultLine != null) {
			@@ -676,63 +675,64 @@
			this.currentSelectEndLine = null
			}
			this.clearLinkPipe()
			// const geom = JSON.parse(e.geomText)
			// this.currentSelectEndLine = L.geoJSON(geom, {
			// style: function (feature) {
			// return { color: 'rgba(200,0,200,.6)' }
			// }
			// }).addTo(this.map)
			this.map.panInsideBounds(this.currentSelectEndLine.getBounds())
			// 给选择中的数据添加设置样式
			const geom = JSON.parse(e.geomText)
			this.currentSelectEndLine = window.L.geoJSON(geom, {
			style: function (feature) {
			return { color: 'rgba(200,0,200,.6)' }
			}
			}).addTo(window.map)
			window.map.panInsideBounds(this.currentSelectEndLine.getBounds())

			// const param = {
			// lineID: e.id
			// }
			// const res = await api.findLeakages(param)
			// console.log(res)
			// 数据请求参数
			const param = {
			lineID: e.id
			}
			const res = await mapApi.findLeakages(param)
			console.log(res)

			// const len = res.data.length
			// if (len === 0) {
			// this.$message('未找到需要关闭的阀门')
			//
			// return
			// }
			// res.data.reverse()
			// this.bgFm = res.data
			//
			// this.bgPoint = res.data[0].startControlPoint
			//
			// const point = JSON.parse(this.bgPoint.geomText)
			//
			// const p = [point.coordinates[1], point.coordinates[0]]
			//
			// // this.bgMarker = main.createFlowMarker(p)
			// this.bgMarker.bindTooltip(this.bgPoint.pointnumbe)
			// this.bgMarker.addTo(this.map)
			// this.map.flyTo(p)
			//
			// const linkPipe = []
			// res.data.forEach((itm, idx) => {
			// const geom = JSON.parse(itm.geomText)
			// const points = []
			// geom.coordinates.forEach((it, id) => {
			// points.push(it.reverse())
			// })
			//
			// linkPipe.push(points)
			// })
			const len = res.data.length
			if (len === 0) {
			this.$message('未找到需要关闭的阀门')
			return
			}
			res.data.reverse()
			this.bgFm = res.data

			// linkPipe.forEach((itm, idx) => {
			// const param1 = {
			// points: itm,
			// option: {
			// dashArray: '15 15',
			// dashSpeed: -30,
			// color: '#ffff00'
			// }
			// }
			// const line = main.createFlowLine(param1)
			// this.linkPipeline.push(line)
			// })
			this.bgPoint = res.data[0].startControlPoint

			const point = JSON.parse(this.bgPoint.geomText)

			const p = [point.coordinates[1], point.coordinates[0]]

			// this.bgMarker = main.createFlowMarker(p)
			this.bgMarker.bindTooltip(this.bgPoint.pointnumbe)
			this.bgMarker.addTo(this.map)
			this.map.flyTo(p)

			const linkPipe = []
			res.data.forEach((itm, idx) => {
			const geom = JSON.parse(itm.geomText)
			const points = []
			geom.coordinates.forEach((it, id) => {
			points.push(it.reverse())
			})

			linkPipe.push(points)
			})

			linkPipe.forEach((itm, idx) => {
			const param1 = {
			points: itm,
			option: {
			dashArray: '15 15',
			dashSpeed: -30,
			color: '#ffff00'
			}
			}
			const line = this.createFlowLine(param1)
			this.linkPipeline.push(line)
			})
			},
			bgFmClick (e) {
			console.log('点击影响的阀门')
			@@ -740,7 +740,7 @@
			const point = [e.data[0][0], e.data[0][1]]
			// const marker = main.createFlowMarker(point)
			// marker.addTo(this.map)
			this.map.flyTo(point, 16)
			window.map.flyTo(point, 16)
			},

			// 流向分析结果table列表数据点击
			@@ -748,51 +748,54 @@
			console.log('连通性分析结果列表点击')
			console.log(e)

			// const geom = JSON.parse(e.geomText)
			// if (this.currentSelectResultLine != null) {
			// this.currentSelectResultLine.remove()
			// this.currentSelectResultLine = null
			// }
			// this.currentSelectResultLine = L.geoJSON(geom, {
			// style: function (feature) {
			// return { color: 'rgba(0,250,255,.6)' }
			// }
			// }).addTo(this.map)
			// this.map.panInsideBounds(this.currentSelectResultLine.getBounds())
			const geom = JSON.parse(e.geomText)
			if (this.currentSelectResultLine != null) {
			this.currentSelectResultLine.remove()
			this.currentSelectResultLine = null
			}
			this.currentSelectResultLine = window.L.geoJSON(geom, {
			style: function (feature) {
			return { color: 'rgba(0,250,255,.6)' }
			}
			}).addTo(window.map)
			window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
			},
			// 点击显示流向 table列表数据
			// 点击显示流向 table列表中的数据 => 进行官网流向的显示
			async lxQuery (e) {
			console.log(e)
			// console.log(e)
			this.clearLinkPipe()
			// const param = {
			// lineNodeID: e.startpoint
			// }
			// const res = await api.findFlowDirection(param)
			const param = {
			// lineNodeID: e.startpoint
			lineNodeID: e.gid
			}
			const res = await mapApi.findFlowDirection(param)
			this.getres(res)
			},
			// 点击显示流向 table列表中的数据 => 进行官网流向的显示的数据处理方法
			getres (res) {
			this.lxTableDataResult = res.data
			const linkPipe = []
			res.data.forEach((itm, idx) => {
			const geom = JSON.parse(itm.geomText)
			const points = []
			geom.coordinates.forEach((it, id) => {
			points.push(it.reverse())
			})
			linkPipe.push(points)
			})

			// this.lxTableDataResult = res.data
			// const linkPipe = []
			// res.data.forEach((itm, idx) => {
			// const geom = JSON.parse(itm.geomText)
			// const points = []
			// geom.coordinates.forEach((it, id) => {
			// points.push(it.reverse())
			// })
			//
			// linkPipe.push(points)
			// })

			// linkPipe.forEach((itm, idx) => {
			// // const param1 = {
			// // points: itm,
			// // option: {
			// // dashArray: '15 15',
			// // dashSpeed: -30,
			// // color: '#ffff00'
			// // }
			// // }
			// // const line = main.createFlowLine(param1)
			// // this.linkPipeline.push(line)
			// })
			linkPipe.forEach((itm, idx) => {
			const param1 = {
			points: itm,
			option: {
			dashArray: '15 15',
			dashSpeed: -30,
			color: '#ffff00'
			}
			}
			const line = this.createFlowLine(param1)
			this.linkPipeline.push(line)
			})
			},
			// 清除流向
			clearLX () {
			@@ -804,15 +807,15 @@
			// 流向-管线选择
			selectRowLiuXiang (e) {
			// 选择要显示的流向线
			console.log('选择要显示的流向线')
			console.log(e)
			// console.log('选择要显示的流向线')
			// console.log(e)
			},
			lxHandleClick (e) {
			console.log('正流向显示')
			console.log(e)

			// 清除流向方法
			this.clearLX()
			// console.log('正流向显示')
			// console.log(e)
			//
			// // 清除流向方法
			// this.clearLX()
			// const param = {
			// points: e.data,
			// option: {
			@@ -820,7 +823,7 @@
			// dashSpeed: -30
			// }
			// }
			// this.flowPipeLine = main.createFlowLine(param)
			// this.flowPipeLine = this.createFlowLine(param)
			},

			// 清楚分析结果
			@@ -834,12 +837,12 @@
			},
			// 逆流向显示
			lxHandleClick2 (e) {
			console.log('逆流向显示')
			console.log(e)
			if (this.flowPipeLine != null) {
			this.flowPipeLine.remove()
			this.flowPipeLine = null
			}
			// console.log('逆流向显示')
			// console.log(e)
			// if (this.flowPipeLine != null) {
			// this.flowPipeLine.remove()
			// this.flowPipeLine = null
			// }
			// const param = {
			// points: e.data,
			// option: {
			@@ -847,20 +850,20 @@
			// dashSpeed: 30
			// }
			// }
			// this.flowPipeLine = main.createFlowLine(param)
			// this.flowPipeLine = this.createFlowLine(param)
			},
			// 横断面绘制线段
			drawLine () {
			console.log('drawLine')
			// console.log('drawLine')
			if (this.measure === null) {
			this.measure = new DrawLine(this.map)
			this.measure = new DrawLine(window.map)
			}
			this.measure.destory()
			this.measure.init()
			},
			// 横断面数据请求
			async getHdmPoint (line) {
			console.log('横断面的绘制线')
			// console.log('横断面的绘制线')
			// console.table(line)
			// 横断面数据
			this.hdmParam = {
			@@ -877,8 +880,8 @@
			return false
			}
			// 已绘制线图进行绘制横断面数据分析
			// const res = await api.getCrossSection(this.hdmParam)
			// console.log(res)
			const res = await mapApi.getCrossSection(this.hdmParam)
			console.log(res)
			},
			// 横断面绘制完成后进行横断面数据分析进行图表展示
			async selectRow (e) {
			@@ -897,7 +900,7 @@
			type: 'line'
			}]
			}
			this.myChartShow = true
			// this.myChartShow = true
			this.myChart.setOption(option)
			},
			// 横断面清除
			@@ -912,6 +915,26 @@
			</script>

			<style lang="less" scoped>
			///deep/ .el-table__row:hover > td {
			// background: none !important;
			//}
			//
			///deep/ .el-table__row--striped:hover > td {
			// background: none !important;
			//}

			///deep/ .el-table__row.hover-row {
			// background: rgba(0, 16, 30, 0.9) !important
			//}

			/deep/ .el-table .has-gutter tr th {
			border: none !important;
			}

			/deep/ .el-table tbody tr:hover > td {
			background: none !important
			}

			/deep/ .el-tabs__header {
			background: none !important;
			}
			@@ -976,6 +999,6 @@
			}

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