~xingchuan/SewerAndRainNetwork.git

			@@ -1,7 +1,7 @@
			<template>
			<div class="sewers-analysis-tab">
			<transition name="el-fade-in-linear">
			<el-card>
			<!-- <transition name="el-fade-in-linear">-->
			<!-- <el-card>-->
			<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
			<el-tab-pane label="连通性" name="first">
			<el-button type="primary" @click="linkClickStart" size="mini" style="margin-bottom: 5px;"
			@@ -16,8 +16,8 @@
			<el-button type="primary" @click="linkClear" size="mini" style="margin-bottom: 5px;"
			title="根据起始、结束管段进行连通性分析">清除
			</el-button>
			<el-scrollbar style="height:450px">
			<el-card shadow="hover">
			<!-- <el-scrollbar style="height:450px">-->
			<!-- <el-card shadow="hover">-->
			<span class="fixed-style">起始管段</span>
			<el-table
			ref="singleTable"
			@@ -150,17 +150,20 @@
			</el-table-column>

			</el-table>
			</el-card>
			</el-scrollbar>
			<!-- </el-card>-->
			<!-- </el-scrollbar>-->
			</el-tab-pane>
			<el-tab-pane label="爆管" name="second" style="color: #cccccc">爆管（相关开关）
			<el-tab-pane label="爆管" name="second" style="color: #cccccc">
			<el-row>
			<span>爆管（相关开关）</span>
			<el-button type="primary" @click="bgClick" size="mini" style="margin-bottom: 5px;" title="地图上点击选择发生爆管的管段">
			选择管段
			</el-button>
			<el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;" title="清除绘制">清除
			</el-button>
			<el-card shadow="hover">
			<span class="fixed-style">发生爆裂的管段</span>
			</el-row>
			<!-- <el-card shadow="hover">-->
			<span class="fixed-style">发生爆裂的管段:</span>
			<el-table
			ref="singleTable"
			highlight-current-row
			@@ -202,7 +205,7 @@
			</template>
			</el-table-column>
			</el-table>
			<span class="fixed-style">需要关闭的阀门</span>
			<span class="fixed-style">需要关闭的阀门：</span>
			<el-table
			highlight-current-row
			:data="bgFm"
			@@ -245,7 +248,7 @@
			</template>
			</el-table-column>
			</el-table>
			</el-card>
			<!-- </el-card>-->
			</el-tab-pane>
			<el-tab-pane label="流向" name="third">
			<el-button type="primary" @click="selectPipeLine" size="mini" style="margin-bottom: 5px;"
			@@ -291,7 +294,7 @@
			</template>
			</el-table-column>
			</el-table>
			<span>分析结果</span>
			<span class="fixed-style">分析结果</span>
			<el-table
			highlight-current-row
			max-height="200"
			@@ -305,6 +308,7 @@
			>
			</el-table-column>
			<el-table-column
			width="100"
			sortable
			prop="pipecode"
			label="管线名称"
			@@ -312,12 +316,14 @@
			</el-table-column>
			<el-table-column
			sortable
			width="100"
			prop="startpoint"
			label="起点编号"
			>
			</el-table-column>
			<el-table-column
			sortable
			width="100"
			prop="endpointnu"
			label="终点编号"
			>
			@@ -342,7 +348,7 @@
			</el-button>
			<el-button type="primary" @click="jdmClear" size="mini" style="margin-bottom: 5px;" title="清除截断面分析结果">清除
			</el-button>
			<el-card class="box-card">
			<!-- <el-card class="box-card">-->
			<div slot="header" class="fixed-style">
			<span>管线查询结果</span>
			</div>
			@@ -369,7 +375,7 @@
			</template>
			</el-table-column>
			</el-table>
			</el-card>
			<!-- </el-card>-->
			<el-card class="box-card">
			<div slot="header" class="fixed-style">
			<span>断面图</span>
			@@ -379,8 +385,8 @@
			</el-card>
			</el-tab-pane>
			</el-tabs>
			</el-card>
			</transition>
			<!-- </el-card>-->
			<!-- </transition>-->
			</div>
			</template>

			@@ -453,7 +459,7 @@
			methods: {
			// tab切换
			handleClick (tab, event) {
			console.log(tab, event)
			// console.log(tab, event)
			this.clearLinkPipe()
			this.clearLX()
			this.linkClear()
			@@ -475,15 +481,56 @@
			selectClick (e) {
			window.map.off('click', this.selectClick)
			const point = [e.latlng.lng, e.latlng.lat]
			console.log(point)
			this.getPipeLine(point)
			},
			// 点击获取判断数据
			async getPipeLine (point) {
			const param = {
			x: point[0],
			y: point[1],
			radius: 3
			}
			// 根据参数请求接口数据
			const res = await mapApi.findPipelineByClickPoint(param)
			if (this.activeName === 'first') {
			if (this.linkType) {
			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') {

			// 连通性 ===> 地图点击起始管段
			linkClickStart () {
			}
			console.log(res)
			},

			// 连通性 ===> 地图点击起始管段e
			linkClickStart (e) {
			console.log(e)
			console.log('地图点击起始管段')
			this.linkType = 1
			this.selectPipeLine()
			},
			// 连通性起始管段 table列表数据选择数据事件的点击事件
			linkSelectStart (e) {
			console.log('选择起始管段')
			this.$refs.singleTable.setCurrentRow(e)
			this.currentSelectStart = e
			if (this.currentSelectStartLine != null) {
			this.currentSelectStartLine.remove()
			this.currentSelectStartLine = null
			}
			const geom = JSON.parse(e.geomText)
			this.currentSelectStartLine = window.L.geoJSON(geom, {
			style: function (feature) {
			return { color: 'rgba(0,255,0,.6)' }
			}
			}).addTo(this.map)
			this.map.panInsideBounds(this.currentSelectStartLine.getBounds())
			},
			// 连通性 ===> 地图点击结束管段
			linkClickEnd () {
			@@ -491,66 +538,29 @@
			this.linkType = 0
			this.selectPipeLine()
			},
			// 连通性起始管段 table列表数据选择数据事件的点击事件
			linkSelectStart (e) {
			console.log('选择起始管段')
			console.log(e)
			// this.$refs.singleTable.setCurrentRow(e)
			// this.currentSelectStart = e
			// if (this.currentSelectStartLine != null) {
			// this.currentSelectStartLine.remove()
			// this.currentSelectStartLine = null
			// }
			// const geom = JSON.parse(e.geomText)
			// this.currentSelectStartLine = L.geoJSON(geom, {
			// style: function (feature) {
			// return { color: 'rgba(0,255,0,.6)' }
			// }
			// }).addTo(this.map)
			// this.map.panInsideBounds(this.currentSelectStartLine.getBounds())
			},
			// 连通性结束管段 table列表数据选择数据事件的点击事件
			linkSelectEnd (e) {
			console.log('选择结束管段')
			console.log(e)
			// this.currentSelectEnd = e
			//
			// if (this.currentSelectEndLine != null) {
			// this.currentSelectEndLine.remove()
			// this.currentSelectEndLine = null
			// }
			//
			// 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())
			},
			// 连通性分析结果table列表数据选择点击事件
			linkResultSelect (e) {
			console.log('连通性分析结果列表点击')
			console.log(e)
			this.currentSelectEnd = 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(255,0,0,.6)',
			// weight: 6
			// }
			// }
			// }).addTo(this.map)
			// this.map.panInsideBounds(this.currentSelectResultLine.getBounds())
			// 做判断remove
			if (this.currentSelectEndLine != null) {
			this.currentSelectEndLine.remove()
			this.currentSelectEndLine = null
			}

			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())
			},
			// 连通性查询
			async linkQuery () {
			// 设置分析结果为空
			// 每次查询分析结果为空
			this.tableDataLinkResult = []
			if (this.linkPipeline.length > 1) {
			this.linkPipeline.forEach((itm) => {
			@@ -568,8 +578,10 @@
			startLineID: this.currentSelectStart.id,
			endLineID: this.currentSelectEnd.id
			}
			console.log(param)
			// 请求接口和数据
			const res = await mapApi.findConnectedPipelines(param)
			console.log(res)
			// 判断数据结果 === 0 则没有请求到数据
			if (res.data.length === 0) {
			this.$message('没有找到连通的管段')
			@@ -599,12 +611,32 @@
			// }
			// const line = main.createFlowLine(param1)
			// const createFlowLine = (param) => {
			// let flowLine = L.polyline(param.points, param.option)
			// flowLine.addTo(map)
			// const flowLine = window.L.polyline(param.points, param.option)
			// flowLine.addTo(window.map)
			// return flowLine
			// }
			// this.linkPipeline.push(line)
			// })
			},
			// 连通性分析结果table列表数据选择点击事件
			linkResultSelect (e) {
			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(255,0,0,.6)',
			// weight: 6
			// }
			// }
			// }).addTo(this.map)
			// this.map.panInsideBounds(this.currentSelectResultLine.getBounds())
			},
			// 连通性的清除功能
			linkClear () {
			@@ -769,36 +801,6 @@
			this.flowPipeLine = null
			}
			},

			// 流向数据请求
			async getPipeLine (point) {
			// const param = {
			// x: point[0],
			// y: point[1],
			// radius: 3
			// }
			// console.log(param)

			// 根据参数请求接口数据
			// const res = await api.getPipeline(param)
			// 3 流向

			// if (this.activeName === 'first') {
			// if (this.linkType) {
			// 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') {
			//
			// }
			//
			// console.log(res)
			},
			// 流向-管线选择
			selectRowLiuXiang (e) {
			// 选择要显示的流向线
			@@ -946,10 +948,12 @@
			}

			/deep/ .el-card {
			margin-top: 15px;
			background: rgba(0, 16, 30, 0.5);
			//width: 95%;
			//margin: 5px auto;
			//border: none;
			//background: rgba(0, 16, 30, 0.5);
			//border: 0.00521rem solid @color;
			box-shadow: 0 0 0.03rem @color;
			//box-shadow: 0 0 0.03rem @color;
			}

			/deep/ .el-card__body {
			@@ -957,11 +961,20 @@
			}

			/deep/ .fixed-style {
			font-size: 12px;
			display: inline-block;
			color: #ffffff;
			margin: 15px;
			}

			/deep/ th.is-leaf {
			border: none !important;
			}

			/deep/ .el-table__fixed-right::before, .el-table__fixed::before {
			background: none;
			}

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