From dd9af28934e9b34f74a58cf3f92a472b898d738e Mon Sep 17 00:00:00 2001 From: seatonwan9 <seatonwan9@163.com> Date: 星期五, 28 五月 2021 19:39:51 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue | 291 ++++++++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 211 insertions(+), 80 deletions(-) diff --git a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue index f899d47..0b57216 100644 --- a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue +++ b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue @@ -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,19 +106,29 @@ </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.code" + label="闄勫睘璁炬柦缂栧彿"> + </el-table-column> <el-table-column show-overflow-tooltip prop="properties.name" 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" @@ -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,111 +173,226 @@ 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) - // 绠℃鏌ヨ - const sectionNameSearch = val.properties.pipename - this.tableListSection = [] - this.wfsHelper.clearFilter() - this.wfsHelper.setTypeName(['sewer:pipesegment']) - this.wfsHelper.addLike('pipename', sectionNameSearch) - this.wfsHelper.addEquals('pipename', '\'' + sectionNameSearch + '\'') - const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {}) - // console.log(res) - if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) { - this.tableListSection = res.features + // 濡傛灉 SectionAndAffFacTableJudge === true 鏄悳绱㈡暟鎹粨鏋滅殑鍒楄〃 鍙互杩涜 绠℃ 闄勫睘璁炬柦浜や簰 鐐瑰嚮瀹氫綅鏌ヨ缁撴灉 涓嶈繘琛岀偣鍑讳氦浜� + if (this.SectionAndAffFacTableJudge === true) { + // 绠℃鏌ヨ + const sectionNameSearch = val.properties.pipename + this.tableListSection = [] + this.wfsHelper.clearFilter() + this.wfsHelper.setTypeName(['sewer:pipesegment']) + this.wfsHelper.addLike('pipename', sectionNameSearch) + this.wfsHelper.addEquals('pipename', '\'' + sectionNameSearch + '\'') + const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {}) + // console.log(res) + if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) { + this.tableListSection = res.features + } + this.wfsHelper = new WfsHelper() + // 闄勫睘璁炬柦鏌ヨ + this.tableDataAffFac = [] + const AffFacSearch = val.properties.pipecode + console.log(AffFacSearch) + this.wfsHelper.clearFilter() + this.wfsHelper.setTypeName(['sewer:view_pipeline']) + this.wfsHelper.addLike('pipecode', 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() } - this.wfsHelper = new WfsHelper() - // 闄勫睘璁炬柦鏌ヨ - this.tableDataAffFac = [] - const AffFacSearch = val.properties.pipename - this.wfsHelper.clearFilter() - this.wfsHelper.setTypeName(['sewer:view_pipeline']) - this.wfsHelper.addLike('name', AffFacSearch) - this.wfsHelper.addEquals('name', '\'' + AffFacSearch + '\'') - const resAffFac = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {}) - console.log(resAffFac) - if (resAffFac instanceof Object && Object.prototype.hasOwnProperty.call(resAffFac, 'features')) { - 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) => { - // 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) + // window.mapManager.loadWfsDatas(e.latlng).then((res) => { + // console.log(res) + // 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: 'sewer:pipeline', + QUERY_LAYERS: 'sewer:pipeline', + 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: 'sewer:view_pipeline', + QUERY_LAYERS: 'sewer:view_pipeline', + 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]) + } }) }, // 绠$嚎鎼滅储 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 +413,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; } } } -- Gitblit v1.8.0