~xingchuan/SewerAndRainNetwork.git

			@@ -1,99 +1,252 @@
			<template>
			<div class="connectivity">
			<el-row>
			<span class="tube-span">爆管(相关开关)</span>
			<el-button type="primary" size="mini" @click="bgClick">选择管线</el-button>
			<el-button type="primary" size="mini" @click="handleClick('czp')">清除</el-button>
			</el-row>
			<el-card class="box-card">
			<el-scrollbar style="height:350px">
			<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>
			<div class="connectivity">
			<el-row>
			<span>爆管（相关开关）</span>
			<el-button type="primary" @click="bgClick" size="mini" title="地图上点击选择发生爆管的管段">选择管段</el-button>
			<el-button type="primary" @click="handleClick" size="mini" title="清除绘制">清除</el-button>
			</el-row>
			<!-- <el-card shadow="hover">-->
			<span class="fixed-style">发生爆裂的管段</span>
			<el-table max-height="200" class="tableBox" ref="singleTable" highlight-current-row :data="bgPipeLine"
			style="width: 100%" size="mini">
			<el-table-column :show-overflow-tooltip="true" prop="pipecode" label="管段类型"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
			label="管段名称"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
			label="起点编号"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
			label="终点编号"></el-table-column>
			<el-table-column class-name="fixed-table" fixed="right" label="操作" width="40">
			<template slot-scope="scope">
			<el-button @click="bgSelect(scope.row)" type="text" size="small">选择</el-button>
			</template>
			</el-table-column>
			</el-table>
			<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>
			<span class="fixed-style">需要关闭的阀门</span>
			<el-table class="tableBox" highlight-current-row max-height="200" :data="bgFm" @row-click="bgFmClick"
			style="width: 100%" size="mini">
			<el-table-column :show-overflow-tooltip="true" prop="pipecode" label="管段类型"></el-table-column>
			<el-table-column sortable :show-overflow-tooltip="true" width="100" prop="pipecode"
			label="管段名称"></el-table-column>
			<el-table-column sortable :show-overflow-tooltip="true" width="100" prop="pipecode"
			label="起点编号"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
			label="终点编号"></el-table-column>
			<el-table-column class-name="fixed-table" fixed="right" label="操作" width="40">
			<template slot-scope="scope">
			<el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
			</template>
			</el-table-column>
			</el-table>
			</el-scrollbar>
			</el-card>
			</div>
			<!-- </el-card>-->
			</div>
			</template>

			<script>

			// import PublicWay from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay'
			import mapApi from '../../../../../api/mapApi'
			import { pulseEffect } from '../../../../../utils/utils'
			import { createFlowLine } from './PublicWay'
			import eventBus from '../../../../../eventBus'

			export default {
			name: 'Tube',
			data () {
			return {
			tableData: [],
			tube: []
			bgPoint: null,
			bgMarker: null,
			hdmParam: null,
			// 爆管发生爆裂的管段 table表格数据
			bgPipeLine: [],
			// 爆管需要关闭的阀门 table表格数据
			bgFm: [],
			linkPipeline: [],
			currentSelectEndLine: null
			}
			},
			mounted () {
			this.$nextTick(() => {
			eventBus.$on('tabData-change', (obj) => {
			if (obj) {
			this.handleClick()
			}
			})
			})
			},
			methods: {
			// 选指管线
			handleClick () {
			this.clearLinkPipe()
			this.linkClear()
			this.bgFm = []
			this.bgPipeLine = []
			},
			linkClear () {
			if (this.currentSelectStartLine != null) {
			this.currentSelectStartLine.remove()
			this.currentSelectStartLine = null
			}
			if (this.currentSelectEndLine != null) {
			this.currentSelectEndLine.remove()
			this.currentSelectEndLine = null
			}
			if (this.currentSelectResultLine != null) {
			this.currentSelectResultLine.remove()
			this.currentSelectResultLine = null
			}
			},
			// 地图上点击
			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)
			this.bgPipeLine = res.data
			},
			// 清楚分析结果
			clearLinkPipe () {
			if (this.linkPipeline.length > 0) {
			this.linkPipeline.forEach((itm, idx) => {
			itm.remove()
			})
			}
			this.linkPipeline = []
			if (this.currentSelectEndLine != null) {
			this.currentSelectEndLine.remove()
			this.currentSelectEndLine = null
			}
			},
			// 爆管 ===> 选择管段
			bgClick () {
			this.selectPipeLine()
			},
			// 清楚绘制
			handleClick (val) {
			console.log(val)
			// PublicWay.handleClick(val)
			async bgSelect (e) {
			// console.log('选择爆管管段')
			// console.log(e)
			this.bgFm = []
			if (this.bgMarker != null) {
			this.bgMarker.remove()
			this.bgMarker = null
			}

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

			// 数据请求参数
			const param = {
			lineID: e.pipesegcode
			}
			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
			// console.log(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 = this.createFlowMarker(p)
			// this.bgMarker = pulseEffect(p)
			// this.bgMarker.bindTooltip(this.bgPoint.pointnumbe)
			// this.bgMarker.addTo(window.map)
			// window.map.flyTo(p)

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

			linkPipe.forEach((itm, idx) => {
			const param1 = {
			points: itm,
			option: {
			dashArray: '15 15',
			dashSpeed: -30,
			color: '#ffff00'
			}
			}
			const line = createFlowLine(param1)
			this.linkPipeline.push(line)
			})
			},
			bgFmClick (e) {
			// console.log('点击影响的阀门')
			// console.log(e)
			// const point = [e.data[0][0], e.data[0][1]]
			const point = [e.startControlPoint.y, e.startControlPoint.x]
			pulseEffect(point)
			// const marker = this.createFlowMarker(point)
			// marker.addTo(window.map)
			// window.map.flyTo(point, 17)
			},
			// 定位方法事件
			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 = window.L.geoJSON(geom, {
			style: function (feature) {
			return {
			color: 'rgba(255,0,0,.6)',
			weight: 10
			}
			}
			}).addTo(window.map)
			window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
			}
			}
			}
			</script>

			<style lang="less" scoped>
			.tube-span {
			color: #ffffff !important;
			font-size: 14px;
			margin: 0 15px;
			}

			</style>