~xingchuan/SewerAndRainNetwork.git

			@@ -1,60 +1,192 @@
			<template>
			<div class="connectivity">
			<el-row>
			<el-button type="primary" size="mini">选择管段</el-button>
			</el-row>
			<el-table
			:data="tableData"
			height="250"
			border
			style="width: 100%">
			<el-table-column
			prop="date"
			label="管线名称"
			width="180">
			</el-table-column>
			<el-table-column
			prop="name"
			label="管线类型"
			width="180">
			</el-table-column>
			<el-table-column
			prop="address"
			label="操作">
			</el-table-column>
			</el-table>
			</div>
			<div class="connectivity">
			<el-button type="primary" @click="selectPipeLine" size="mini" highlight-current-row
			title="地图上点击要显示流向的管段">选择管段
			</el-button>
			<el-table max-height="200" class="tableBox" highlight-current-row :data="tableDataLiuxiang" 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="60">
			<template slot-scope="scope">
			<el-button @click="lxQuery(scope.row)" type="text" size="small">显示流向</el-button>
			</template>
			</el-table-column>
			</el-table>
			<span class="fixed-style">分析结果</span>
			<el-table class="tableBox" highlight-current-row max-height="200" :data="lxTableDataResult"
			@row-click="lxResultSelect" 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" width="100" sortable 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="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
			</template>
			</el-table-column>
			</el-table>
			</div>
			</template>

			<script>
			import mapApi from '../../../../../api/mapApi'
			import { createFlowLine } from './PublicWay'

			export default {
			name: 'Flow',
			data () {
			return {
			tableData: [{
			date: '2016-05-02',
			name: '王小虎',
			address: '上海市普陀区金沙江路 1518 弄'
			}, {
			date: '2016-05-04',
			name: '王小虎',
			address: '上海市普陀区金沙江路 1517 弄'
			}, {
			date: '2016-05-01',
			name: '王小虎',
			address: '上海市普陀区金沙江路 1519 弄'
			}, {
			date: '2016-05-03',
			name: '王小虎',
			address: '上海市普陀区金沙江路 1516 弄'
			}]
			// 流向选择的管段的table表格数据
			tableDataLiuxiang: [],
			// 流向分析结果的table表格数据
			lxTableDataResult: [],
			linkPipeline: []
			}
			},
			methods: {
			// tab切换
			handleClick (tab, event) {
			console.log(event)
			// console.log(tab)
			this.clearLinkPipe()
			this.clearLX()
			this.linkClear()
			this.jdmClear()
			this.currentLinkIsTrue = ''
			this.bgFm = []
			this.bgPipeLine = []
			this.tableData = []
			this.tableDataLiuxiang = []
			this.tableDataLinkStart = []
			this.tableDataLinkEnd = []
			this.tableDataLinkResult = []
			this.lxTableDataResult = []
			},
			// 定位方法事件
			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())
			},
			// 清楚分析结果
			clearLinkPipe () {
			if (this.linkPipeline.length > 0) {
			this.linkPipeline.forEach((itm, idx) => {
			itm.remove()
			})
			}
			this.linkPipeline = []
			},
			// 地图上点击
			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.tableDataLiuxiang = res.data
			},
			// 流向分析结果table列表数据点击
			lxResultSelect (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 {
			weight: 10,
			color: 'rgba(0,250,255,.6)'
			}
			}
			}).addTo(window.map)
			window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
			},
			// 点击显示流向 table列表中的数据 => 进行官网流向的显示
			async lxQuery (e) {
			console.log(e)
			this.clearLinkPipe()
			const param = {
			// lineNodeID: e.startpoint
			lineNodeID: e.startpointnumber
			}
			const res = await mapApi.findFlowDirection(param)
			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 = createFlowLine(param1)
			this.linkPipeline.push(line)
			})
			},
			// 清除流向
			clearLX () {
			if (this.flowPipeLine != null) {
			this.flowPipeLine.remove()
			this.flowPipeLine = null
			}
			}
			}
			}
			</script>

			<style lang="less" scoped>
			/deep/ .el-table {
			margin-top: 15px;
			}

			</style>