~xingchuan/SewerAndRainNetwork.git

			@@ -12,7 +12,8 @@
			</el-form-item>
			</el-col>
			<el-col :span="8">
			<el-button type="primary" size="small" icon="el-icon-search" @click="pipeClickLocation">定位</el-button>
			<el-button type="primary" size="small" icon="el-icon-location-outline" @click="pipeClickLocation">定位
			</el-button>
			</el-col>
			</el-row>
			<el-row>
			@@ -30,12 +31,12 @@
			</el-form>
			<div class="pipe-table" v-show="this.tableList.length>=1">
			<el-card>
			<span class="fixed-style">管线名称</span>
			<span class="fixed-style" style="display: block">管线名称</span>
			<el-table
			:data="tableList"
			border
			height="240"
			max-height="280"
			height="120"
			max-height="140"
			@row-click="sectionShowClick"
			style="width: 100%">
			<el-table-column
			@@ -50,6 +51,11 @@
			</el-table-column>
			<el-table-column
			show-overflow-tooltip
			prop="properties.subchaname"
			label="支线名称">
			</el-table-column>
			<el-table-column
			show-overflow-tooltip
			prop="properties.mediumtype"
			label="管线类型">
			</el-table-column>
			@@ -61,13 +67,13 @@
			</el-table>
			</el-card>
			<el-card>
			<span class="fixed-style">管段列表</span>
			<span class="fixed-style" style="display: block">管段列表</span>
			<el-table
			:data="tableListSection"
			border
			@row-click="sectionCode"
			height="100"
			max-height="120"
			max-height="100"
			style="width: 100%">
			<el-table-column
			show-overflow-tooltip
			@@ -100,22 +106,32 @@
			</template>
			</el-table-column>
			</el-table>
			<span class="fixed-style">附属设施列表</span>
			<span class="fixed-style" style="display: block">附属设施列表</span>
			<el-table
			:data="tableDataAffFac"
			border
			@row-click="affFacName"
			height="100"
			max-height="120"
			style="width: 120%">
			max-height="100"
			style="width: 100%">
			<el-table-column
			show-overflow-tooltip
			prop="properties.name"
			prop="properties.pipecode"
			label="附属设施编号">
			</el-table-column>
			<el-table-column
			show-overflow-tooltip
			prop="properties.measattribute"
			label="附属设施名称">
			</el-table-column>
			<el-table-column
			show-overflow-tooltip
			prop="properties.type"
			prop="properties.code"
			label="附属设施名称">
			</el-table-column>
			<el-table-column
			show-overflow-tooltip
			prop="properties.datasource"
			label="附属设施类型">
			</el-table-column>
			<el-table-column width="40" fixed="right" label="操作">
			@@ -126,21 +142,21 @@
			</el-table>
			</el-card>
			</div>
			<el-row style="text-align: center;margin: 10px">
			<el-row style="text-align: right;margin: 10px">
			<el-button type="primary" @click="confirm">确认</el-button>
			</el-row>
			</div>
			</template>

			<script>
			import WfsHelper from '@components/helpers/WfsHelper'
			import AjaxUtils from '@utils/AjaxUtils'

			// import { pulseEffect } from '../../../../utils/utils'
			// import mapApi from '../../../../api/mapApi'

			import WfsHelper from '@components/helpers/WfsHelper'
			import AjaxUtils from '@utils/AjaxUtils'
			import { fitBounds, highlight } from '../../../../components/helpers/LocateHelper'
			import eventBus from '../../../../eventBus'
			// import MapManager from '../../../helpers/MapManager'
			import { WMS_URL } from '../../../../conf/Constants'

			export default {
			name: 'ReportLocationSection',
			@@ -157,19 +173,20 @@
			tableListSection: [],
			// 附属设施查询列表数据
			tableDataAffFac: [],
			// 分页功能
			pageSize: 3,
			total: 0,
			currentPage: 1
			// 定义类型判断 if 是搜索到的数据可以进行管线选择 else 点击定位选择的管线不可以进行选择
			SectionAndAffFacTableJudge: false,
			locateJudgmentSearch: false
			}
			},
			mounted () {
			this.wfsHelper = new WfsHelper()
			},
			methods: {
			// 点击管线列表展示管段内容
			// 点击管线列表展示管段内容和附属设施内容
			async sectionShowClick (val) {
			console.log(val)
			// 如果 SectionAndAffFacTableJudge === true 是搜索数据结果的列表可以进行管段附属设施交互点击定位查询结果不进行点击交互
			if (this.SectionAndAffFacTableJudge === true) {
			// 管段查询
			const sectionNameSearch = val.properties.pipename
			this.tableListSection = []
			@@ -185,83 +202,198 @@
			this.wfsHelper = new WfsHelper()
			// 附属设施查询
			this.tableDataAffFac = []
			const AffFacSearch = val.properties.pipename
			const AffFacSearch = val.properties.mediumtype
			console.log(AffFacSearch)
			this.wfsHelper.clearFilter()
			this.wfsHelper.setTypeName(['sewer:view_pipeline'])
			this.wfsHelper.addLike('name', AffFacSearch)
			this.wfsHelper.addEquals('name', '\'' + AffFacSearch + '\'')
			this.wfsHelper.addLike('type', AffFacSearch)
			// this.wfsHelper.addEquals('type', '\'' + AffFacSearch + '\'')
			const resAffFac = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
			console.log(resAffFac)
			if (resAffFac instanceof Object && Object.prototype.hasOwnProperty.call(resAffFac, 'features')) {
			// console.log(resAffFac.features)
			// for (let i = 0; i < resAffFac.features.length; i++) {
			// console.log(resAffFac.features[i])
			// }
			this.tableDataAffFac = resAffFac.features
			}
			this.wfsHelper = new WfsHelper()
			}
			},
			// 点击管段列表管段编码传递
			sectionCode (val) {
			console.log(val)
			// console.log(val)
			this.form.sectionName = val.properties.pipecode
			},
			// 点击附属设施列表管段编码传递
			affFacName (val) {
			console.log(val)
			// console.log(val)
			this.form.affiliatedFacilities = val.properties.name
			},
			// 定位功能
			localAdr (val) {
			console.log(val)
			fitBounds(val)
			highlight(val)
			},
			// 管线点击点击定位功能
			// 管线点击定位管段的选择功能
			pipeClickLocation () {
			// console.log('val')
			// this.selectPipeLine()
			// 设施不进行管线表格数据的点击交互
			this.SectionAndAffFacTableJudge = false
			window.mapManager.clickDialogSwitch = false
			this.tableList = []
			// this.tableList = []
			// 点击获取数据
			window.map.on('click', (e) => {
			window.mapManager.loadWfsDatas(e.latlng).then((res) => {
			// window.mapManager.loadWfsDatas(e.latlng).then((res) => {
			// console.log(res)
			for (let i = 0; i < res.features.length; i++) {
			// console.log(res.features[i].properties)
			this.tableList.push(res.features[i])
			}
			// console.log(this.tableList)
			// for (let i = 0; i < res.features.length; i++) {
			// this.tableList.push(res.features[i])
			// this.tableListSection.push(res.features[i])
			// this.tableDataAffFac.push(res.features[i])
			// }
			// })
			// return new Promise((resolve, reject) => {
			const size = window.map.getSize()
			var point = window.map.latLngToContainerPoint(e.latlng, window.map.getZoom())
			const wmsParams = Object.assign({
			LAYERS: 'pipeline_group',
			QUERY_LAYERS: 'pipeline_group',
			WIDTH: size.x,
			HEIGHT: size.y,
			X: Math.round(point.x),
			Y: Math.round(point.y),
			BBOX: window.map.getBounds().toBBoxString()
			}, {
			VERSION: '1.1.1',
			SERVICE: 'WMS',
			REQUEST: 'GetFeatureInfo',
			// bbox: bbox,
			FORMAT: 'image/png',
			INFO_FORMAT: 'application/json',
			TRANSPARENT: true,
			FEATURE_COUNT: 50,
			SRS: 'EPSG:4326',
			EXCEPTIONS: 'application/vnd.ogc.se_inimage'
			})
			AjaxUtils.get4JsonDataByUrl(WMS_URL, wmsParams, (res) => {
			// console.log(res)
			for (let i = 0; i < res.data.features.length; i++) {
			// console.log(res.data.features[i])
			this.tableList.push(res.data.features[i])
			}
			})
			// 管段
			this.sectionData(e)
			// 附属设施
			this.affFacData(e)
			// })
			})
			// 数据重新获取进行置空
			this.tableList = []
			this.tableListSection = []
			this.form.pipeName = ''
			this.tableDataAffFac = []
			this.form.sectionName = ''
			this.form.affiliatedFacilities = ''
			},
			// 点击定位擦寻管段
			sectionData (e) {
			const size = window.map.getSize()
			var point = window.map.latLngToContainerPoint(e.latlng, window.map.getZoom())
			const wmsParams = Object.assign({
			LAYERS: 'sewer:pipesegment',
			QUERY_LAYERS: 'sewer:pipesegment',
			WIDTH: size.x,
			HEIGHT: size.y,
			X: Math.round(point.x),
			Y: Math.round(point.y),
			BBOX: window.map.getBounds().toBBoxString()
			}, {
			VERSION: '1.1.1',
			SERVICE: 'WMS',
			REQUEST: 'GetFeatureInfo',
			// bbox: bbox,
			FORMAT: 'image/png',
			INFO_FORMAT: 'application/json',
			TRANSPARENT: true,
			FEATURE_COUNT: 50,
			SRS: 'EPSG:4326',
			EXCEPTIONS: 'application/vnd.ogc.se_inimage'
			})
			AjaxUtils.get4JsonDataByUrl(WMS_URL, wmsParams, (res) => {
			// console.log(res)
			for (let i = 0; i < res.data.features.length; i++) {
			this.tableListSection.push(res.data.features[i])
			}
			})
			},
			// 附属设施
			affFacData (e) {
			const size = window.map.getSize()
			var point = window.map.latLngToContainerPoint(e.latlng, window.map.getZoom())
			const wmsParams = Object.assign({
			LAYERS: 'pipeline_fs',
			QUERY_LAYERS: 'pipeline_fs',
			WIDTH: size.x,
			HEIGHT: size.y,
			X: Math.round(point.x),
			Y: Math.round(point.y),
			BBOX: window.map.getBounds().toBBoxString()
			}, {
			VERSION: '1.1.1',
			SERVICE: 'WMS',
			REQUEST: 'GetFeatureInfo',
			// bbox: bbox,
			FORMAT: 'image/png',
			INFO_FORMAT: 'application/json',
			TRANSPARENT: true,
			FEATURE_COUNT: 50,
			SRS: 'EPSG:4326',
			EXCEPTIONS: 'application/vnd.ogc.se_inimage'
			})
			AjaxUtils.get4JsonDataByUrl(WMS_URL, wmsParams, (res) => {
			console.log(res)
			for (let i = 0; i < res.data.features.length; i++) {
			this.tableDataAffFac.push(res.data.features[i])
			}
			console.log(this.tableDataAffFac)
			})
			},
			// 管线搜索
			async pipelineSearch () {
			// this.pipeTable = !this.pipeTable
			this.SectionAndAffFacTableJudge = true
			this.tableList = []
			this.tableListSection = []
			this.tableDataAffFac = []
			this.wfsHelper.clearFilter()
			this.wfsHelper.setTypeName(['sewer:pipeline'])
			if (this.form.pipeName) {
			this.wfsHelper.addLike('name', this.form.pipeName)
			this.wfsHelper.addLike('pipename', this.form.pipeName)
			}
			// this.wfsHelper.addEquals('type', '\'' + this.form.pipeName + '\'')
			// this.wfsHelper.addEquals('pipename', '\'' + this.form.pipeName + '\'')
			const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
			console.log(res)
			// console.log(res)
			if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
			this.total = res.totalFeatures
			// console.log(res.features)
			this.tableList = res.features
			}
			this.wfsHelper = new WfsHelper()
			},
			// 分页功能 currentPage 改变时会触发
			handlePage (val) {
			// console.log(val)
			this.currentPage = val
			},
			// 分页功能 pageSize 改变时会触发
			handleSizeChange (val) {
			// console.log(val)
			this.pageSize = val
			// this.form.pipeName = ''
			this.form.sectionName = ''
			this.form.affiliatedFacilities = ''
			},
			// 点击确认
			confirm () {
			console.log('点击确定选择完成')
			// console.log('点击确定选择完成')
			eventBus.$emit('section-search', true)
			this.form.pipeName = ''
			this.form.sectionName = ''
			this.form.affiliatedFacilities = ''
			this.tableList = []
			this.tableListSection = []
			this.tableDataAffFac = []
			this.SectionAndAffFacTableJudge = false
			}
			}
			}
			@@ -282,18 +414,18 @@
			}

			.pipe-table {
			display: flex;
			align-items: center;
			justify-content: space-around;
			/display: flex;/
			/align-items: center;/
			/justify-content: space-around;/

			/deep/ .el-card {
			width: 1.39523rem;
			max-width: 1.39523rem;
			height: 1.9343rem;
			max-height: 1.9343rem;
			/width: 1.39523rem;/
			/max-width: 1.39523rem;/
			/height: 0.9343rem;/
			/max-height: 0.9343rem;/

			.el-table {
			margin: 0.07345rem auto;
			margin: 0.05345rem auto;
			}
			}
			}