From 4d265afb3419bd5cedc6f31ab78d570f6917b520 Mon Sep 17 00:00:00 2001 From: seatonwan9 <seatonwan9@163.com> Date: 星期五, 21 五月 2021 14:30:44 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/panel/topicSearch/EnterpriseEmergency/EventQuery.vue | 106 public/assets/images/map/sewers/含油污水.png | 0 src/conf/layers/LayerPipeLines.js | 69 src/components/table/components/IndexStatistics.vue | 136 src/conf/layers/LayerSurroundings.js | 6 src/components/LayerController/logic/Company.js | 43 src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue | 825 -------- src/components/panel/topicSearch/DischargeSearch.vue | 2 src/components/panel/topicSearch/EnterpriseEmergencySearch.vue | 4 src/views/popup/Dialog.vue | 5 src/views/popup/Popup.vue | 49 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue | 314 ++ public/assets/images/map/sewers/含硫污水.png | 0 src/components/panel/topicSearch/WaterWasteSearch.vue | 2 src/conf/layers/LayerHbss.js | 11 src/conf/Constants.js | 396 +++ public/favicon.ico | 0 src/components/helpers/WfsHelper.js | 31 src/components/table/components/componented/refinery.vue | 28 src/components/plugin/DrawLine.js | 3 src/components/LayerController/logic/SourcesPollution.js | 16 src/components/LayerController/logic/WasteGas.js | 15 public/assets/images/map/sewers/含碱污水.png | 0 src/components/panel/topicSearch/EnterpriseEmergency/ResourcesQuery.vue | 47 src/conf/layers/LayerFsss.js | 12 src/components/BaseNav/PublicSector.vue | 2 public/assets/images/map/sewers/流向.png | 0 src/components/helpers/MapManager.js | 68 src/components/panel/topicSearch/SolidWasteSearch.vue | 128 public/assets/images/map/sewers/事故水.png | 0 src/components/panel/topicSearch/EnterpriseEmergency/ReportPopup.vue | 300 ++ src/components/table/components/tabHandover.vue | 24 src/main.js | 2 src/components/message/index.vue | 134 + public/assets/images/map/sewers/管架(墩).png | 0 src/components/LayerController/logic/WasteWater.js | 40 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue | 239 ++ src/components/LayerController/logic/WasteSolid.js | 11 src/components/LayerController/service/AnimalService.js | 13 src/conf/Topic.js | 2 src/components/panel/topicSearch/GasWasteSearch.vue | 2 src/components/layer/src/layer.vue | 7 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue | 299 ++ src/assets/css/map/map-panel-style.less | 5 src/components/LayerController/modules/LcServiceLayerFilter.vue | 30 src/conf/layers/LayerArea.js | 9 src/conf/layers/LayerPk.js | 4 src/Sgis.js | 2 public/assets/images/map/sewers/防火堤.png | 0 src/components/LayerController/service/WmsLayerService.js | 188 - src/components/BaseNav/WasteWater/WasteWaterRealChart.vue | 2 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow.vue | 256 ++ src/conf/layers/LayerEmergencySource.js | 6 public/assets/images/map/sewers/含盐污水.png | 0 public/assets/images/map/sewers/净化水.png | 0 src/utils/utils.js | 46 src/components/table/components/Warn.vue | 263 +- public/assets/images/map/sewers/生产污水.png | 0 src/components/panel/RightSearchPanel.vue | 6 public/index.html | 2 src/components/LayerController/dataset/WmsLayerList.js | 18 src/views/MapTemplate.vue | 23 src/components/LayerController/service/LayerFactory.js | 176 - src/components/LayerController/modules/LcServiceLayer.vue | 35 public/assets/images/map/sewers/管廊.png | 0 public/assets/images/map/sewers/循环水.png | 0 /dev/null | 147 - src/components/table/summarySheets.vue | 55 src/conf/图层配置说明.md | 8 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js | 17 src/conf/MapConfig.js | 1 package.json | 1 public/assets/images/map/sewers/生活污水.png | 0 src/components/panel/topicSearch/SewersSearch.vue | 214 + src/components/emergency/index.vue | 411 +++ src/components/helpers/LocateHelper.js | 215 ++ src/components/layer/src/layer.js | 3 77 files changed, 3,143 insertions(+), 2,391 deletions(-) diff --git a/package.json b/package.json index 49b8c35..badf5d0 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ }, "dependencies": { "@jiaminghi/data-view": "^2.10.0", + "@turf/turf": "^6.3.0", "audit": "0.0.6", "axios": "^0.21.1", "babel-polyfill": "^6.26.0", diff --git "a/public/assets/images/map/sewers/\344\272\213\346\225\205\346\260\264.png" "b/public/assets/images/map/sewers/\344\272\213\346\225\205\346\260\264.png" new file mode 100644 index 0000000..65aa66c --- /dev/null +++ "b/public/assets/images/map/sewers/\344\272\213\346\225\205\346\260\264.png" Binary files differ diff --git "a/public/assets/images/map/sewers/\345\207\200\345\214\226\346\260\264.png" "b/public/assets/images/map/sewers/\345\207\200\345\214\226\346\260\264.png" new file mode 100644 index 0000000..d61fe2f --- /dev/null +++ "b/public/assets/images/map/sewers/\345\207\200\345\214\226\346\260\264.png" Binary files differ diff --git "a/public/assets/images/map/sewers/\345\220\253\346\262\271\346\261\241\346\260\264.png" "b/public/assets/images/map/sewers/\345\220\253\346\262\271\346\261\241\346\260\264.png" new file mode 100644 index 0000000..be8083c --- /dev/null +++ "b/public/assets/images/map/sewers/\345\220\253\346\262\271\346\261\241\346\260\264.png" Binary files differ diff --git "a/public/assets/images/map/sewers/\345\220\253\347\233\220\346\261\241\346\260\264.png" "b/public/assets/images/map/sewers/\345\220\253\347\233\220\346\261\241\346\260\264.png" new file mode 100644 index 0000000..8ef0c73 --- /dev/null +++ "b/public/assets/images/map/sewers/\345\220\253\347\233\220\346\261\241\346\260\264.png" Binary files differ diff --git "a/public/assets/images/map/sewers/\345\220\253\347\241\253\346\261\241\346\260\264.png" "b/public/assets/images/map/sewers/\345\220\253\347\241\253\346\261\241\346\260\264.png" new file mode 100644 index 0000000..a49a459 --- /dev/null +++ "b/public/assets/images/map/sewers/\345\220\253\347\241\253\346\261\241\346\260\264.png" Binary files differ diff --git "a/public/assets/images/map/sewers/\345\220\253\347\242\261\346\261\241\346\260\264.png" "b/public/assets/images/map/sewers/\345\220\253\347\242\261\346\261\241\346\260\264.png" new file mode 100644 index 0000000..316a2bc --- /dev/null +++ "b/public/assets/images/map/sewers/\345\220\253\347\242\261\346\261\241\346\260\264.png" Binary files differ diff --git "a/public/assets/images/map/sewers/\345\276\252\347\216\257\346\260\264.png" "b/public/assets/images/map/sewers/\345\276\252\347\216\257\346\260\264.png" new file mode 100644 index 0000000..a9fe895 --- /dev/null +++ "b/public/assets/images/map/sewers/\345\276\252\347\216\257\346\260\264.png" Binary files differ diff --git "a/public/assets/images/map/sewers/\346\265\201\345\220\221.png" "b/public/assets/images/map/sewers/\346\265\201\345\220\221.png" new file mode 100644 index 0000000..d4966ce --- /dev/null +++ "b/public/assets/images/map/sewers/\346\265\201\345\220\221.png" Binary files differ diff --git "a/public/assets/images/map/sewers/\347\224\237\344\272\247\346\261\241\346\260\264.png" "b/public/assets/images/map/sewers/\347\224\237\344\272\247\346\261\241\346\260\264.png" new file mode 100644 index 0000000..1e565df --- /dev/null +++ "b/public/assets/images/map/sewers/\347\224\237\344\272\247\346\261\241\346\260\264.png" Binary files differ diff --git "a/public/assets/images/map/sewers/\347\224\237\346\264\273\346\261\241\346\260\264.png" "b/public/assets/images/map/sewers/\347\224\237\346\264\273\346\261\241\346\260\264.png" new file mode 100644 index 0000000..1e565df --- /dev/null +++ "b/public/assets/images/map/sewers/\347\224\237\346\264\273\346\261\241\346\260\264.png" Binary files differ diff --git "a/public/assets/images/map/sewers/\347\256\241\345\273\212.png" "b/public/assets/images/map/sewers/\347\256\241\345\273\212.png" new file mode 100644 index 0000000..4e37704 --- /dev/null +++ "b/public/assets/images/map/sewers/\347\256\241\345\273\212.png" Binary files differ diff --git "a/public/assets/images/map/sewers/\347\256\241\346\236\266\050\345\242\251\051.png" "b/public/assets/images/map/sewers/\347\256\241\346\236\266\050\345\242\251\051.png" new file mode 100644 index 0000000..84b5db4 --- /dev/null +++ "b/public/assets/images/map/sewers/\347\256\241\346\236\266\050\345\242\251\051.png" Binary files differ diff --git "a/public/assets/images/map/sewers/\351\230\262\347\201\253\345\240\244.png" "b/public/assets/images/map/sewers/\351\230\262\347\201\253\345\240\244.png" new file mode 100644 index 0000000..b26cf57 --- /dev/null +++ "b/public/assets/images/map/sewers/\351\230\262\347\201\253\345\240\244.png" Binary files differ diff --git a/public/favicon.ico b/public/favicon.ico index df36fcf..9f4f110 100644 --- a/public/favicon.ico +++ b/public/favicon.ico Binary files differ diff --git a/public/index.html b/public/index.html index d50d35b..83a048b 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,7 @@ <meta name="viewport" content="width=device-width"> <meta http-equiv="X-UA-Compatible" content="IE=11"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> - <title><%= htmlWebpackPlugin.options.title %></title> + <title>涓浗鐭冲寲鐜繚涓�寮犲浘</title> </head> <body> <noscript> diff --git a/src/Sgis.js b/src/Sgis.js index 64977a5..a3e10a0 100644 --- a/src/Sgis.js +++ b/src/Sgis.js @@ -16,6 +16,7 @@ import '@components/plugin/pulse/Pulse.css' // marker 澶栧湀娉� css import BasemapHelper from './components/helpers/BasemapHelper' import VectorLayerHelper from './components/helpers/VectorLayerHelper' +// import '@/components/plugin/flowline' // import eventBus from './eventBus' let map = null @@ -35,7 +36,6 @@ return map } - /** * 鍩虹搴曞浘鍒濆鍖� * @param map diff --git a/src/assets/css/map/map-panel-style.less b/src/assets/css/map/map-panel-style.less index 8ba44f8..0afa10b 100644 --- a/src/assets/css/map/map-panel-style.less +++ b/src/assets/css/map/map-panel-style.less @@ -823,3 +823,8 @@ width: 100%; height: 1.5rem; } + +.el-dialog__body{ + padding: 5px; + color: #f2f2f2; +} diff --git a/src/components/BaseNav/PublicSector.vue b/src/components/BaseNav/PublicSector.vue index 8daedcb..328b263 100644 --- a/src/components/BaseNav/PublicSector.vue +++ b/src/components/BaseNav/PublicSector.vue @@ -30,7 +30,7 @@ left: 20%; .public-bounced-content { - padding: 0.1rem; + padding: 0.05rem; display: flex; .public-bounced-content-left { diff --git a/src/components/BaseNav/WasteWater/WasteWaterRealChart.vue b/src/components/BaseNav/WasteWater/WasteWaterRealChart.vue index 2c7a925..b332667 100644 --- a/src/components/BaseNav/WasteWater/WasteWaterRealChart.vue +++ b/src/components/BaseNav/WasteWater/WasteWaterRealChart.vue @@ -13,7 +13,7 @@ <el-option v-for="(item,index) in formData.regionList" :key="index" :label="item" :value="item"></el-option> </el-select> <el-button @click="querySearch()">鏌ヨ</el-button> - <!-- <el-button>鏄庣粏琛�</el-button>--> + <!-- <el-button>鏄庣粏琛�</el-button>--> </div> <div class="echarts-chart"> <div ref="echarts"></div> diff --git a/src/components/LayerController/dataset/WmsLayerList.js b/src/components/LayerController/dataset/WmsLayerList.js index fc0e782..3aaeb12 100644 --- a/src/components/LayerController/dataset/WmsLayerList.js +++ b/src/components/LayerController/dataset/WmsLayerList.js @@ -1,5 +1,8 @@ import clone from '../../../utils/utils' +/** + * 缁勮wms鍔犺浇鎵�闇�鐨刲ayers浠ュ強filters鍙傛暟 + */ class WmsLayerList { constructor () { // [{鍥惧眰鍚嶇О锛歔{typeName:xxx,filter:yyy}]}] @@ -10,7 +13,7 @@ const typeName = config.typeName const layerGroup = config.layerGroup || typeName const filter = config.filter - const index = config.index || 9 + const index = config.index if (layerGroup) { this.addLayer(layerGroup, typeName, filter, index) } @@ -18,7 +21,6 @@ addLayer (layerGroup, typeName, filter, index) { const layer = this._getLayer(layerGroup) - if (layer) { const offset = this.indexOf(typeName, filter) if (offset < 0) { @@ -28,7 +30,11 @@ } else { const layerConfig = {} layerConfig[layerGroup] = [{ typeName: typeName, filter: filter || 'INCLUDE' }] - this.layers.push(layerConfig) + if (index) { + this.layers[index] = layerConfig + } else { + this.layers.push(layerConfig) + } } } @@ -36,7 +42,7 @@ const layers = this.layers for (let i = 0; i < layers.length; i++) { const lay = layers[i] - if (lay[layer]) { + if (lay && lay[layer]) { return lay } } @@ -112,7 +118,9 @@ } } } - cqlFilters.push(filters.join(' OR ')) + if (filters.length > 0) { + cqlFilters.push(filters.join(' OR ')) + } } return cqlFilters.join(';') } diff --git a/src/components/LayerController/event/EventHandler.js b/src/components/LayerController/event/EventHandler.js deleted file mode 100644 index 2ab3cba..0000000 --- a/src/components/LayerController/event/EventHandler.js +++ /dev/null @@ -1,26 +0,0 @@ - -class EventHandler { - constructor () { - this.map = window.map - this.mapClickForLayers = {} - - window.map.on('click', (e) => { - console.log(e) - for (var k in this.mapClickForLayers) { - const func = this.mapClickForLayers[k] - console.log(func) - func(e) - } - }) - } - - addLayerEvent (config, callback) { - this.mapClickForLayers[config.code] = callback - } - - removeEvent (config) { - delete this.mapClickForLayers[config.code] - } -} - -export default EventHandler diff --git a/src/components/LayerController/logic/Company.js b/src/components/LayerController/logic/Company.js index 8c4bd07..d6b7ea2 100644 --- a/src/components/LayerController/logic/Company.js +++ b/src/components/LayerController/logic/Company.js @@ -1,6 +1,7 @@ /** - * 鍥哄簾 + * 浼佷笟 */ + // 鍖哄垎涓嶅悓绫诲瀷 浣跨敤涓嶅悓img const companyImg = '/assets/images/map/company_refining.png' const companyOil = '/assets/images/map/company_oil.png' @@ -14,7 +15,6 @@ * @param L leaflet瀵硅薄 */ this.init = async (layer, L) => { - // const SolidWasteIcon = this.SolidWasteIcon() this.animalService = new AnimalService({ L: L, layer: layer @@ -39,23 +39,10 @@ className: 'company-bindTooltip', iconSize: 16 }) - const marker = L.marker([positionX, positionY], { - /* icon: L.icon({ - iconUrl: iconUrl, - iconSize: [30, 30], - iconAnchor: [15, 15] - }), */ icon: myIcon, test: data[i] }) - /* const htmls = '<ul><li>' + data[i].name + '</li></ul>' - marker.bindTooltip(htmls, { - permanent: true, - offset: [0, 5], - direction: 'bottom', - className: 'company-bindTooltip' - }) */ layer.addLayer(marker) } } @@ -63,23 +50,27 @@ * 鐐逛綅榧犳爣绉诲叆寮规 * */ this.bindTooltip = (layer) => { - // console.log(layer) + // console.log(layer) return '<div class="company-bindTooltip-hover"><h3>姹℃煋鐗╀骇鐢熺粺璁�</h3><ul>' + - '<li>鐢熶骇璁炬柦锛�30锛堜釜锛�</li>' + - '<li>娌荤悊璁炬柦锛�30锛堜釜锛�</li>' + - '</ul></div>'// layer.options.test.name + '<li>鐢熶骇璁炬柦锛�30锛堜釜锛�</li>' + + '<li>娌荤悊璁炬柦锛�30锛堜釜锛�</li>' + + '</ul></div>'// layer.options.test.name } /* * 鐐逛綅鐐瑰嚮浜嬩欢 * * */ this.clickListener = (e) => { - // this.animalService.pulseEffect(e.latlng) - const dataValue = { - StoragePlaceId: e.layer.options.test.name - } - debugger - console.log(dataValue) - // return this.PublicBounced.$el + // console.log(e) + window.map.setView(e.latlng, 15) + // if (window.map.getZoom() >= 10) { + // window.map.removeLayer(e.layer) + // e.layer.remove() + // } else if (window.map.getZoom() < 10) { + // window.map.addLayer(e.layer) + // } + // const dataValue = { + // StoragePlaceId: e.layer.options.test.name + // } } } diff --git a/src/components/LayerController/logic/EnterpriseEmergency.js b/src/components/LayerController/logic/EnterpriseEmergency.js deleted file mode 100644 index ab7cc6c..0000000 --- a/src/components/LayerController/logic/EnterpriseEmergency.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * 浼佷笟搴旀�� - */ - -// 浣跨敤灏佽鏂规硶 -const AnimalService = require('../service/AnimalService').default - -module.exports = function () { - this.init = async (layer, L) => { - this.animalService = new AnimalService({ - L: L, - layer: layer - }) - } - this.bindTooltip = (layer) => { - return 'layer' - } - this.click = () => { - window.$layer.open({ - content: { - content: 'Popup', // 缁勪欢 - data: { // 浼犻�掔殑鍙傛暟 - datas: 'popupDatas' - } - }, - title: '' - }) - } -} diff --git a/src/components/LayerController/logic/Sample.js b/src/components/LayerController/logic/Sample.js deleted file mode 100644 index 20fe78f..0000000 --- a/src/components/LayerController/logic/Sample.js +++ /dev/null @@ -1,45 +0,0 @@ -/** - * 搴熸皵 - */ -const AnimalService = require('../service/AnimalService').default -const AjaxUtils = require('../../../utils/AjaxUtils').default - -module.exports = function () { - /** - * 杩斿洖marker瀵硅薄鏁扮粍 - * @param L leaflet瀵硅薄 - */ - this.init = (layer, L) => { - this.animalService = new AnimalService({ L: L, layer: layer }) - AjaxUtils.get4JsonDataByUrl('http://10.246.162.140:8080/EPInterface/DataService/EPMapService.asmx/ObtainningConInfo', { - companyId: 3900100145, - id: '', - monType: 1, - userCode: 'wenchun.deng', - monDuration: '', - epName: '', - secdDeptId: '', - contrLevel: '', - dataStatus: '', - dataFlag: '', - runStatus: '', - emissTypeId: '' - }, function (res) { - const data = res.data.Result.DataInfo - for (let i = 0; i < data.length; i++) { - // 缁忕含搴� 浣嶇疆 - const positionX = data[i].Latitude - const positionY = data[i].Longitude - layer.addLayer(L.marker([positionX, positionY], { test: '122224' })) - } - }) - } - - this.bindTooltip = (layer) => { - return layer.options.test - } - - this.clickListener = (e) => { - this.animalService.pulseEffect(e.latlng) - } -} diff --git a/src/components/LayerController/logic/SourcesPollution.js b/src/components/LayerController/logic/SourcesPollution.js index a701f1c..27899ce 100644 --- a/src/components/LayerController/logic/SourcesPollution.js +++ b/src/components/LayerController/logic/SourcesPollution.js @@ -14,9 +14,23 @@ layer: layer }) const result = await mapApi.getSourcesPoll() - console.log(result) + // console.log(result) const resultData = result.Result.DataInfo || [] const polygon = L.polygon(resultData, { color: 'yellow' }) polygon.addTo(layer) } + this.bindTooltip = (layer) => { + return 'layer' + } + this.click = () => { + window.$layer.open({ + content: { + content: 'Popup', // 缁勪欢 + data: { // 浼犻�掔殑鍙傛暟 + datas: 'popupDatas' + } + }, + title: '' + }) + } } diff --git a/src/components/LayerController/logic/WasteGas.js b/src/components/LayerController/logic/WasteGas.js index 17706bc..935c9ff 100644 --- a/src/components/LayerController/logic/WasteGas.js +++ b/src/components/LayerController/logic/WasteGas.js @@ -3,7 +3,8 @@ */ const AnimalService = require('../service/AnimalService').default // const AjaxUtils = require('../../../utils/AjaxUtils').default - +// 鍏叡鏂规硶 panTo() 寮曠敤 +const { setPanTo } = require('../../../utils/utils') // 鍖哄垎涓嶅悓绫诲瀷 浣跨敤涓嶅悓img // const ImgBlue = '/assets/images/map/exhaust/fq_blue.png' // const ImgGray = '/assets/images/map/exhaust/fq_gray.png' @@ -36,12 +37,6 @@ // 瀹氫箟绫诲瀷 鐢ㄦ潵鍖哄垎鏁版嵁 const ContrLevel = data[i].ContrLevel var iconUrl = this.differentTypes(ContrLevel) - // const marker = L.canvasMarker([positionX, positionY], { - // img: { - // // url: 'assets/images/map/marker-icon.png', - // url: iconUrl, - // size: STYLES.ICON_SIZE - // } const marker = L.marker([positionX, positionY], { test: data[i], icon: L.icon({ @@ -60,13 +55,14 @@ } this.clickListener = async (e) => { - console.log(e) + // console.log(e) this.animalService.pulseEffect(e.latlng) + setPanTo(e.latlng, 200) const title = e.layer.options.test.Name const res = e.layer.options.test window.$layer.open({ content: { - content: WasteGasIndex, // 缁勪欢 + comp: WasteGasIndex, // 缁勪欢 parent: this, // 鐖剁粍浠� data: { // 浼犻�掔殑鍙傛暟 storagePlaceId: res @@ -74,7 +70,6 @@ }, title: '澶╂触鐭冲寲' + title // 鏍囬 }) - this.animalService.setPanTo(e.latlng, 150) } // 涓嶅悓绫诲瀷鍥剧墖鍔犺浇 this.differentTypes = (ContrLevel) => { diff --git a/src/components/LayerController/logic/WasteSolid.js b/src/components/LayerController/logic/WasteSolid.js index 28b0938..ad4b1e0 100644 --- a/src/components/LayerController/logic/WasteSolid.js +++ b/src/components/LayerController/logic/WasteSolid.js @@ -1,11 +1,12 @@ /** * 鍥哄簾 */ -const WasteSolidIndex = require('@components/BaseNav/WasteSolid/WasteSolidIndex').default +const WasteSolidIndex = require('../../../components/BaseNav/WasteSolid/WasteSolidIndex').default // 鍖哄垎涓嶅悓绫诲瀷 浣跨敤涓嶅悓img const defaultImg = '/assets/images/map/solidwaste/voc.png' const setting = '/assets/images/map/solidwaste/gf_green2.png' - +// 鍏叡鏂规硶 panTo() 寮曠敤 +const { setPanTo } = require('../../../utils/utils') // 璇锋眰鎺ュ彛鏁版嵁 const mapApi = require('../../../api/mapApi').default // 浣跨敤灏佽鏂规硶 @@ -53,11 +54,13 @@ this.clickListener = (e) => { // 鐐瑰嚮marker鐨刾ulse()鍏夋尝 this.animalService.pulseEffect(e.latlng) + /* flyTo()寮瑰嚭妗嗗钩绉讳簨浠� */ + setPanTo(e.latlng, 200) // 寮规鏍囬 const title = e.layer.options.totransferData.Name window.$layer.open({ content: { - content: WasteSolidIndex, // 缁勪欢 + comp: WasteSolidIndex, // 缁勪欢 parent: this, // 鐖剁粍浠� data: { // 浼犻�掔殑鍙傛暟 storagePlaceId: e.layer.options.totransferData.StoragePlaceId @@ -65,8 +68,6 @@ }, title: title // 鏍囬 }) - /* flyTo()寮瑰嚭妗嗗钩绉讳簨浠� */ - this.animalService.setPanTo(e.latlng, 300) } // 涓嶅悓绫诲瀷鍥剧墖灏佽 diff --git a/src/components/LayerController/logic/WasteWater.js b/src/components/LayerController/logic/WasteWater.js index 6f67ed6..6203258 100644 --- a/src/components/LayerController/logic/WasteWater.js +++ b/src/components/LayerController/logic/WasteWater.js @@ -1,13 +1,14 @@ /** * 搴熸按 */ -// import WasteWater from "../../table/components/WasteWater"; + +// 鍏叡鏂规硶 panTo() 寮曠敤 +const { setPanTo } = require('../../../utils/utils') const AnimalService = require('../service/AnimalService').default const mapApi = require('../../../api/mapApi').default // 寮圭獥鏁版嵁寮曡繘 const WasteWaterIndex = require('@components/BaseNav/WasteWater/WasteWaterIndex').default -// const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default const NormalImg = '/assets/images/map/wastewater/fs_bright_green.png' // 姝e父 const OffImg = '/assets/images/map/wastewater/fs_gray.png' // 鍋滆繍 @@ -48,20 +49,19 @@ } } - // 鍒嗗壊绾�------------------------------------------------------------------------------- this.bindTooltip = (layer) => { return '<div class="company-bindTooltip-hover"><h3>澶╂触鐭冲寲</h3></div>' + layer.options.totransferData.Name } this.clickListener = (e) => { - // 鐐瑰嚮marker鐨刾ulse()鍏夋尝 this.animalService.pulseEffect(e.latlng) + setPanTo(e.latlng, 200) // 寮规鏍囬 const title = e.layer.options.totransferData.Name const res = e.layer.options.totransferData window.$layer.open({ content: { - content: WasteWaterIndex, // 缁勪欢 + comp: WasteWaterIndex, // 缁勪欢 parent: this, // 鐖剁粍浠� data: { // 浼犻�掔殑鍙傛暟 // info: this.info @@ -70,36 +70,6 @@ }, title: '澶╂触鐭冲寲' + title // 鏍囬 }) - this.animalService.setPanTo(e.latlng, 150) - } - this.requestWasteWaterData = async (e) => { - // 鍩烘湰淇℃伅 鍜� 璇︾粏淇℃伅 灞曠ず鏁版嵁鎵�闇�鍙傛暟 - // const dataValue = { - // StoragePlaceId: e.layer.options.test.StoragePlaceId - // } - // 寮规鏍囬 - // const title = e.layer.options.totransferData.Name - // console.log(e.layer.options) - // 鍩烘湰淇℃伅 tabs - // const resultBasic = await mapApi.getWasteWater(dataValue) - // 鍥捐〃淇℃伅灞曠ず echarts - // 瀹炴椂鏁版嵁 - // const resultReal = await mapApi.getDataItems(Value) - // 灏忔椂鏁版嵁 鍙� 鏄庣粏琛ㄦ暟鎹� - // const result = await mapApi.getQueryOnlineMonData(dataValue) - // 鏃ユ暟鎹� 鍙� 鏄庣粏琛ㄦ暟鎹� - // const result = await mapApi.getQueryOnlineMonData(dataValue) - // 浜哄伐鏁版嵁 - // const resultEchart = await mapApi.getQueryLabMonData(dataValue) - - // // 缁戝畾寮规瀹炰緥 - // const PublicBounced = window.Vue.extend(publicBounced) - // const instance = new PublicBounced().$mount() - // document.body.appendChild(instance.$el) - // // document.body.removeChild(instance.$el) - // // 閫氳繃鏂规硶 鍚戠粦瀹氬脊妗嗕紶閫掓暟鎹� - // instance.setData(title, resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei') - /* flyTo()寮瑰嚭妗嗗钩绉讳簨浠� */ } // 鏍规嵁杩斿洖鍊肩殑涓嶅悓鏍囪涓嶅悓鍥剧墖 diff --git a/src/components/LayerController/modules/LcServiceLayer.vue b/src/components/LayerController/modules/LcServiceLayer.vue index 4bd7e82..ef7dc4d 100644 --- a/src/components/LayerController/modules/LcServiceLayer.vue +++ b/src/components/LayerController/modules/LcServiceLayer.vue @@ -40,6 +40,11 @@ export default { name: 'LcServiceLayer', components: { LcServiceLayerFilter }, + data () { + return { + changeList: [] + } + }, computed: { serviceLayers () { return this.$store.state.map.serviceLayers.LayerSewersLine @@ -51,8 +56,18 @@ swAllLayers (item) { // eslint-disable-next-line no-debugger item.checked = !item.checked - this.toggleLayer(item) - this.swLayers(item.layers, item.checked) + // this.toggleLayer(item) + if (item.layers && item.layers.length > 0) { + this.swLayers(item.layers, item.checked) + if (item.checked) { + window.layerFactory.showAll(this.changeList) + } else { + window.layerFactory.hideAll(this.changeList) + } + this.changeList = [] + } else { + this.toggleLayer(item) + } this.serviceLayers.forEach(function (item1, index1) { if (item1.layers) { item1.istrue = 0 @@ -99,14 +114,14 @@ }) // console.log(this.serviceLayers) }, - swLayers (layers, checked) { - if (layers) { - for (let i = 0, len = layers.length; i < len; ++i) { - var layer = layers[i] - layer.checked = checked - this.toggleLayer(layer) - if (layer.layers) { - this.swLayers(layer.layers, checked) + swLayers (configs, checked) { + if (configs) { + for (let i = 0, len = configs.length; i < len; ++i) { + var config = configs[i] + config.checked = checked + this.changeList.push(config) + if (config.layers) { + this.swLayers(config.layers, checked) } } } diff --git a/src/components/LayerController/modules/LcServiceLayerFilter.vue b/src/components/LayerController/modules/LcServiceLayerFilter.vue index 7b06da4..22c701b 100644 --- a/src/components/LayerController/modules/LcServiceLayerFilter.vue +++ b/src/components/LayerController/modules/LcServiceLayerFilter.vue @@ -24,6 +24,7 @@ return { visible: {}, layers: [], + changeList: [], filterConfig: [] // 闄勫睘瑕佺礌 } }, @@ -40,17 +41,28 @@ // eslint-disable-next-line no-debugger item.checked = !item.checked this.toggleLayer(item) - this.swLayers(item.layers, item.checked) + if (item.layers && item.layers.length > 0) { + this.swLayers(item.layers, item.checked) + if (item.checked) { + window.layerFactory.showAll(this.changeList) + } else { + window.layerFactory.hideAll(this.changeList) + } + this.changeList = [] + } else { + this.toggleLayer(item) + } }, - swLayers (layers, checked) { - if (layers) { - for (let i = 0, len = layers.length; i < len; ++i) { - var layer = layers[i] - layer.checked = checked - this.toggleLayer(layer) - if (layer.layers) { - this.swLayers(layer.layers, checked) + swLayers (configs, checked) { + if (configs) { + for (let i = 0, len = configs.length; i < len; ++i) { + const config = configs[i] + const layers = config.layers + this.changeList.push(config) + if (layers) { + this.swLayers(config, checked) } + config.checked = checked } } }, diff --git a/src/components/LayerController/service/AnimalService.js b/src/components/LayerController/service/AnimalService.js index 3de6468..687b6e7 100644 --- a/src/components/LayerController/service/AnimalService.js +++ b/src/components/LayerController/service/AnimalService.js @@ -33,19 +33,6 @@ } }, 1000) } - - /** - * 璁剧疆寮圭獥骞崇Щ浣嶇疆 - * @param pos - * @param value - */ - setPanTo = (pos, value) => { - var position = pos - position = this.layer.latLngToLayerPoint(position) - position.y += value - position = this.layer.layerPointToLatLng(position) - this.layer.flyTo(position) - } } export default AnimalService diff --git a/src/components/LayerController/service/LayerFactory.js b/src/components/LayerController/service/LayerFactory.js index 8d7c1c6..c586a1c 100644 --- a/src/components/LayerController/service/LayerFactory.js +++ b/src/components/LayerController/service/LayerFactory.js @@ -1,5 +1,4 @@ import WfsLayerService from './WfsLayerService' -import { clone, pulseEffect } from '../../../utils/utils' import { logicMapper, SERVICE_TYPE } from '../../../conf/Constants' import WmsLayerService from './WmsLayerService' @@ -17,16 +16,14 @@ this.layersLogic = {} this.minZoomLayers = {} this.wmsLayers = [] - // todo 寰呬紭鍖栵紝wmslayerservice璋冪敤锛屾斁杩欓噷涓嶅悎閫� - this.clickSwitch = true // 鍥惧眰鐐瑰嚮寮圭獥寮�鍏� - this.hightlightLayer = options.L.featureGroup({}).addTo(window.map) + this.wmsLayerService = null } init (layerConfig) { - this.initConfig(layerConfig) // wms鏈嶅姟鍙渶瑕佸垵濮嬪寲涓�娆� - this.wmsLayerService = new WmsLayerService(this.wmsLayers) + this.wmsLayerService = new WmsLayerService() this.wmsLayerService.init() + this.initConfig(layerConfig) } initConfig (layerConfig) { @@ -42,8 +39,8 @@ wmsGroupLayerService.init() continue } */ - layers && this.init(config.layers) - childLayer && this.init(config.childLayer) + layers && this.initConfig(config.layers) + childLayer && this.initConfig(config.childLayer) this.initMinZoom(config) this.loadLogic(config) @@ -77,10 +74,6 @@ logic = new BusiLayer() } else if (type === SERVICE_TYPE.WFS) { logic = new WfsLayerService(config) - } else if (type === SERVICE_TYPE.WMS) { - var layer = {} - layer[config.code] = config - this.wmsLayers.push(layer) } } this.layersLogic[code] = logic @@ -113,6 +106,16 @@ return layer } + showAll (configs) { + if (Array.isArray(configs)) { + for (let i = 0; i < configs.length; i++) { + const config = configs[i] + this.show(config) + } + this.wmsLayerService && this.wmsLayerService.addAll(configs) + } + } + /** * 濡傛灉 瀛樺湪宸茬粡鍔犺浇浜嗙殑瀵硅薄锛屽氨鐩存帴鍔犲埌map * 濡傛灉 涓嶅瓨鍦ㄥ垯 璋冪敤 addLayer 鍙� 閫昏緫绫荤殑init 杩涜鍒濆鍖栨搷浣� @@ -133,6 +136,15 @@ } logic && logic.start && logic.start() this.wmsLayerService && this.wmsLayerService.add(config) + } + + hideAll (configs) { + if (Array.isArray(configs)) { + for (let i = 0; i < configs.length; i++) { + this.hide(configs[i]) + } + this.wmsLayerService && this.wmsLayerService.removeAll(configs) + } } hide (config) { @@ -167,146 +179,6 @@ this.hide(config) } } - } - } - - /** - * - * 鏍规嵁浼犵殑 feature瀵硅薄瀹氫綅锛� - * @param code - * @param feature - */ - flyByFeature (feature, code) { - this.clearHighlight() - const type = feature.geometry.type - var point = [] - switch (type) { - case 'Point': - point = feature.geometry.coordinates - break - case 'MultiLineString': - var coordinates = feature.geometry.coordinates - var coordinate = coordinates[parseInt(coordinates.length / 2)][0] - if (coordinate.length > 2) { - point = [coordinate[0], coordinate[1]] - } - break - case 'LineString': - var lineString = feature.geometry.coordinates - point = lineString[parseInt(lineString.length / 2)][0] - break - } - if (point.length > 2) { - point.splice(2, 1) - } - this.highlight(feature) - window.map.setView(clone(point).reverse(), 17) - code && this.openPopup(code, feature.id) - } - - clearHighlight () { - this.hightlightLayer.clearLayers() - } - - highlight (feature) { - const type = feature.geometry.type - if (type === 'MultiLineString') { - this.L.geoJSON(feature, { - style: function () { - return { - fillColor: 'red', - color: 'red' - } - } - }).addTo(this.hightlightLayer) - } else if (type === 'Point') { - let point = clone(feature.geometry.coordinates) - if (point.length > 2) { - point = [point[0], point[1]] - } - pulseEffect(point.reverse()) - /* var myIcon = this.L.divIcon({ className: 'my-div-icon' }) - this.L.marker(feature.geometry.coordinates.reverse(), { - icon: myIcon - }).addTo(this.hightlightLayer) */ - } else if (type === 'LineString') { - this.L.polyline(this.reversePolyLine(feature), { color: 'red' }).addTo(this.hightlightLayer) - } - } - - reverseMultiLine (feature) { - const coordinates = feature.geometry.coordinates - var latlng = [] - for (var j = 0; j < coordinates.length; j++) { - const coordinate = coordinates[j] - var xy = [] - for (var k = 0; k < coordinate.length; k++) { - const coor = coordinate[k] - xy.push(coor.reverse()) - } - latlng.push(xy) - } - return latlng - } - - reversePolyLine (feature) { - const coordinates = feature.geometry.coordinates - var latlng = [] - for (var j = 0; j < coordinates.length; j++) { - const coordinate = coordinates[j] - latlng.push(coordinate.reverse()) - } - return latlng - } - - openPopup (layerId, id) { - const layer = this.layers[layerId] - - if (layer) { - layer.eachLayer(function (layer) { - const layers = layer.getLayers() - for (var i = 0; i < layers.length; i++) { - const lay = layers[i] - const feature = lay.feature - lay.closePopup() - if (feature.id === id) { - lay.openPopup() - break - } - } - }) - } - /* for (var k in this.layers) { - var layerGroup = this.layers[k] - layerGroup.eachLayer(function (layer) { - console.log(layer) - console.log(layer.getAttribution()) - }) - var layers = layerGroup.getLayers() - if (layers) { - for (var m = 0; m < layers.length; m++) { - var layer = layers[m] - console.log(layer) - console.log(layer.getLayerId(val.id)) - /!* var feature = layer.feature - if (feature.id === layerId) { - this.map.flyToBounds(bound) - return layer - } *!/ - } - } - } */ - return null - } - - findLayerById (layer, id) { - const layers = layer.getLayers - if (layers) { - this.findLayerById(layer.getLayers(), id) - } else { - layer.eachLayer(function (layer) { - // console.log(layer) - }) } } } diff --git a/src/components/LayerController/service/WmsLayerGroupService.js b/src/components/LayerController/service/WmsLayerGroupService.js deleted file mode 100644 index 6f948d5..0000000 --- a/src/components/LayerController/service/WmsLayerGroupService.js +++ /dev/null @@ -1,116 +0,0 @@ -import AjaxUtils from '../../../utils/AjaxUtils' -import { PIPELINE_WMS } from '../../../conf/Constants' - -/** - * wms 鍥惧眰缁勭殑绠$悊 - */ -class WmsLayerGroupService { - constructor (config) { - this.config = config - this.L = window.L - // 瀛樻斁getfeatureinfo鐨勫浘灞傜粍 - this.featureGroup = this.L.featureGroup({}) - this.map = window.map - this.popupComp = window.popupComp - // {groupName:{url:'.../wms',layers:[]}} - this.map.on('click', (e) => this.click(e)) - } - - load () { - for (var k in this.groups) { - console.log(k) - this.L.tileLayer.wms(PIPELINE_WMS, { - format: 'image/png', // 杩斿洖鐨勬暟鎹牸寮� - transparent: true, - layers: k // todo - }).addTo(this.layer).bringToFront() - } - } - - init () { - this.layer = this.L.featureGroup({}).addTo(this.map) - this.initGroup(this.config) - this.load() - } - - hide (config) { - const layerName = config.layerName - for (var i = 0; i < this.groups.length; i++) { - const group = this.groups[i] - for (var k in group) { - const v = group[k] - const index = v.layers.indexOf(layerName) - if (index >= 0) { - delete v.layers[index] - } - } - } - } - - initGroup (config) { - const groupName = this.config.groupName - const layers = config.layers - layers && this.initGroup(layers) - for (var i = 0; i < config.length; i++) { - const layerConfig = config[i] - const layerName = layerConfig.layerName - const group = this.groups[groupName] - if (group) { - group.layers.push(layerName) - } else { - this.groups[groupName] = { - url: '', - layers: [layerName] - } - } - } - } - - click (e) { - this.featureGroup.clearLayers() - var point = this.map.latLngToContainerPoint(e.latlng, this.map.getZoom()) - var size = this.map.getSize() - // const bbox = this.L.latLngBounds(this.L.latLng(e.latlng.lng, e.latlng.lat)).toBBoxString() - const params = { - VERSION: '1.1.1', - SERVICE: 'WMS', - REQUEST: 'GetFeatureInfo', - // bbox: bbox, - FORMAT: 'image/png', - INFO_FORMAT: 'application/json', - TRANSPARENT: true, - LAYERS: 'sewer:pipeline_group', - QUERY_LAYERS: 'sewer:pipeline_group', // todo - FEATURE_COUNT: 50, - SRS: 'EPSG:4326', - WIDTH: size.x, - HEIGHT: size.y, - EXCEPTIONS: 'application/vnd.ogc.se_inimage', - X: Math.round(point.x), - Y: Math.round(point.y), - BBOX: this.map.getBounds().toBBoxString() - } - - AjaxUtils.get4JsonDataByUrl(PIPELINE_WMS, params, (res) => { - let features = res.data.features - features = features[0] - var myIcon = this.L.divIcon({ className: 'my-div-icon' }) - this.L.marker(features.geometry.coordinates.reverse(), { - icon: myIcon - }).addTo(this.featureGroup) - .bindPopup((layer) => { - this.popupComp.setDatas({ feature: features }) - this.popupComp.setShow() - return this.popupComp.$el - }, { - className: 's-map-popup', - minWidth: 300, - closeButton: false, - autoClose: false - }) - .openPopup() - }) - } -} - -export default WmsLayerGroupService diff --git a/src/components/LayerController/service/WmsLayerService.js b/src/components/LayerController/service/WmsLayerService.js index fbc74bd..20f2af7 100644 --- a/src/components/LayerController/service/WmsLayerService.js +++ b/src/components/LayerController/service/WmsLayerService.js @@ -1,6 +1,4 @@ -import AjaxUtils from '../../../utils/AjaxUtils' import { WMS_URL } from '../../../conf/Constants' -import Popup from '@views/popup/Popup' import WmsLayerList from '../dataset/WmsLayerList' /** @@ -21,6 +19,7 @@ INFO_FORMAT: 'application/json', TRANSPARENT: true, FEATURE_COUNT: 50, + maxZoom: 21, SRS: 'EPSG:4326', EXCEPTIONS: 'application/vnd.ogc.se_inimage' } @@ -29,41 +28,59 @@ this.featureGroup = this.L.featureGroup({}).addTo(this.map) this.wmsLayerList = new WmsLayerList() - for (var i = 0; i < layersConfig.length; i++) { - const config = layersConfig[i] - this.wmsLayerList.addConfig(config) + if (layersConfig) { + for (var i = 0; i < layersConfig.length; i++) { + const config = layersConfig[i] + this.wmsLayerList.addConfig(config) + } } this.load() } init () { - this.clickListener() + } + + addAll (configs) { + for (let i = 0; i < configs.length; i++) { + const config = configs[i] + const layers = config.layers + if (layers) { + this.addAll(layers) + } + this.wmsLayerList.addConfig(config) + } + this.reload() } add (config) { this.wmsLayerList.addConfig(config) - const layers = this.wmsLayerList.getLayers() - const filter = this.wmsLayerList.getFilters() - const params = {} - if (filter) { - params.cql_filter = filter + this.reload() + } + + removeAll (configs) { + for (let i = 0; i < configs.length; i++) { + const config = configs[i] + const layers = config.layers + if (layers) { + this.removeAll(layers) + } + this.wmsLayerList.remove(config.typeName, config.filter) } - if (layers) { - params.layers = layers - } - this.wmsLayer.setParams(params) + this.reload() } remove (config) { - console.log(config) this.wmsLayerList.remove(config.typeName, config.filter) - const layers = this.wmsLayerList.getLayers() - const filter = this.wmsLayerList.getFilters() - const params = { layers: layers } - if (filter) { - params.cql_filter = filter - } - this.wmsLayer.setParams(params) + this.reload() + } + + reload () { + const layers = this.wmsLayerList.getLayers() || '' + const filter = this.wmsLayerList.getFilters() || '' + const params = {} + params.cql_filter = filter + params.layers = layers + this.wmsLayer.setParams(params, false) } load () { @@ -72,6 +89,7 @@ const params = { format: 'image/png', // 杩斿洖鐨勬暟鎹牸寮� transparent: true, + maxZoom: 21, BBOX: this.map.getBounds().toBBoxString() } if (layers) { @@ -81,130 +99,6 @@ params.cql_filter = filter } this.wmsLayer = this.L.tileLayer.wms(WMS_URL, params).addTo(this.map) - } - - clickListener () { - window.map.on('click', (e) => { - // console.log(e) - window.layerFactory.clearHighlight() - this.featureGroup.clearLayers() - var point = this.map.latLngToContainerPoint(e.latlng, this.map.getZoom()) - var size = this.map.getSize() - // const bbox = this.L.latLngBounds(this.L.latLng(e.latlng.lng, e.latlng.lat)).toBBoxString() - const layers = this.wmsLayerList.getLayers() - const filter = this.wmsLayerList.getFilters() - if (layers.length > 0) { - const params = Object.assign({ - LAYERS: layers, - QUERY_LAYERS: layers, - WIDTH: size.x, - HEIGHT: size.y, - X: Math.round(point.x), - Y: Math.round(point.y), - BBOX: this.map.getBounds().toBBoxString() - }, this.params) - if (filter.length > 0) { - params.cql_filter = filter - } - AjaxUtils.get4JsonDataByUrl(WMS_URL, params, (res) => { - const features = res.data.features - /** - * { - * title: 'New Tab', - * name: newTabName, - * content: 'New Tab content' - * } - * @type {*[]} - */ - const popupDatas = [] - if (features) { - for (var i = 0; i < features.length; i++) { - const feature = features[i] - const properties = feature.properties - this.highlight(feature) - // const coordinates = feature.geometry.coordinates - popupDatas.push({ - title: properties.wellname || properties.devicename || properties.name || properties.pipename, - name: feature.id, - content: properties - }) - } - } - if (popupDatas.length > 0) { - var myIcon = this.L.divIcon({ className: 'my-div-icon' }) - this.L.marker(e.latlng, { - icon: myIcon - }).addTo(this.featureGroup)/* - .bindPopup((layer) => { - this.popupComp.setDatas(popupDatas) - this.popupComp.setShow() - return this.popupComp.$el - }, { - className: 's-map-popup', - minWidth: 300, - closeButton: false, - autoClose: false - }) - .openPopup() */ - - if (window.layerFactory.clickSwitch) { - window.$layer.open({ - content: { - content: Popup, // 缁勪欢 - data: { // 浼犻�掔殑鍙傛暟 - datas: popupDatas - } - }, - title: '', // 鏍囬 - left: e.originalEvent.clientX, - top: e.originalEvent.clientY - }) - } - // this.popupComp.setDatas(popupDatas) - // this.popupComp.setShow() - } - }) - } - }) - } - - reverseMultiLine (feature) { - const coordinates = feature.geometry.coordinates - var latlng = [] - for (var j = 0; j < coordinates.length; j++) { - const coordinate = coordinates[j] - var xy = [] - for (var k = 0; k < coordinate.length; k++) { - const coor = coordinate[k] - xy.push(coor.reverse()) - } - latlng.push(xy) - } - return latlng - } - - reversePolyLine (feature) { - const coordinates = feature.geometry.coordinates - var latlng = [] - for (var j = 0; j < coordinates.length; j++) { - const coordinate = coordinates[j] - latlng.push(coordinate.reverse()) - } - return latlng - } - - highlight (feature) { - const type = feature.geometry.type - if (type === 'MultiLineString') { - this.L.polyline(this.reverseMultiLine(feature), { color: 'red' }).addTo(this.featureGroup) - } else if (type === 'Point') { - var myIcon = this.L.divIcon({ className: 'my-div-icon' }) - this.L.marker(feature.geometry.coordinates.reverse(), { - icon: myIcon - }).addTo(this.featureGroup) - } else if (type === 'LineString') { - this.L.polyline(this.reversePolyLine(feature), { color: 'red' }).addTo(this.featureGroup) - } } } diff --git a/src/components/emergency/index.vue b/src/components/emergency/index.vue index 3467c7b..c6fc1bf 100644 --- a/src/components/emergency/index.vue +++ b/src/components/emergency/index.vue @@ -1,55 +1,204 @@ <template> - <el-dialog class="emergency" :visible.sync="showSchedule" :title="tit" :modal="false" v-dialogDrag > - <!-- 鍩虹淇℃伅 --> - <div class="basicInformation"> - <div> - <h3 class="panel-title">婕旂粌淇℃伅</h3> - <ul> - <li>浜嬩欢绫诲瀷锛�</li> - <li>浜嬩欢浣嶇疆锛�</li> - <li>浣嶇疆鎻忚堪锛�</li> - <li>浜嬩欢鏃堕棿锛�</li> - <li>闄勪欢锛�<a href="javascript:;">闄勪欢1</a><a href="javascript:;">闄勪欢1</a></li> - </ul> - <h3 class="panel-title">棰勬鍖归厤</h3> - <el-table :data="tableData" style="width: 100%"> - <el-table-column prop="name" label="棰勬鍚嶇О"></el-table-column> - <el-table-column prop="define" label="棰勬瀹氫箟"></el-table-column> - <el-table-column prop="hierarchy" label="棰勬灞傜骇"></el-table-column> - <el-table-column prop="classification" label="棰勬鍒嗙被"></el-table-column> - <el-table-column label="闄勪欢"> - <template> - <a href="javascript:;">棰勬</a> - </template> - </el-table-column> - </el-table> - <el-button type="primary" size="mini">鍒嗘瀽</el-button> - </div> - <!-- <div> - <div class="panel-title">澶勭疆鍒嗘瀽</div> - <div class="area-selected"> - <el-button type="primary" class="el-icon-location" size="mini"></el-button> - <el-button type="primary" class="el-icon-location" size="mini"></el-button> - <el-select v-model="value" filterable placeholder="璇烽�夋嫨" size="mini"> - <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> - </el-select> - <el-button type="primary" class="el-icon-search" size="mini"></el-button> - </div> + <div class="emergency"> + <el-dialog :class="CZFX?'':'widt800'" :visible.sync="showSchedule" :title="tit" :modal="false" v-dialogDrag> + <!-- 鍩虹淇℃伅 --> + <div class="basicInformation" v-if="CZFX"> <div> - <div class="analysis-btn"> - <div> - <el-button type="primary" size="mini" >閲嶇疆鍒嗘瀽鏉′欢</el-button> - <el-button type="primary" size="mini" >寮�濮嬪垎鏋�</el-button> + <h3 class="panel-title">婕旂粌淇℃伅</h3> + <ul> + <li>浜嬩欢绫诲瀷锛�</li> + <li>浜嬩欢浣嶇疆锛�</li> + <li>浣嶇疆鎻忚堪锛�</li> + <li>浜嬩欢鏃堕棿锛�</li> + <li>闄勪欢锛�<a href="javascript:;">闄勪欢1</a><a href="javascript:;">闄勪欢1</a></li> + </ul> + <h3 class="panel-title">棰勬鍖归厤</h3> + <el-table :data="tableData" style="width: 100%"> + <el-table-column prop="name" label="棰勬鍚嶇О"></el-table-column> + <el-table-column prop="define" label="棰勬瀹氫箟"></el-table-column> + <el-table-column prop="hierarchy" label="棰勬灞傜骇"></el-table-column> + <el-table-column prop="classification" label="棰勬鍒嗙被"></el-table-column> + <el-table-column label="闄勪欢"> + <template> + <a href="javascript:;">棰勬</a> + </template> + </el-table-column> + </el-table> + <el-button type="primary" size="mini" @click="isShowFenXi=!isShowFenXi">鍒嗘瀽</el-button> + </div> + <!-- 鍒嗘瀽鐣岄潰 --> + <div v-if="isShowFenXi"> + <div class="panel-title">澶勭疆鍒嗘瀽</div> + <div class="area-selected"> + <el-button type="primary" class="el-icon-location" size="mini"></el-button> + <el-button type="primary" class="el-icon-location" size="mini"></el-button> + <el-select v-model="value" filterable placeholder="璇烽�夋嫨" size="mini"> + <el-option v-for="item in options" :key="item.value" :label="item.label" + :value="item.value"></el-option> + </el-select> + <el-button type="primary" class="el-icon-search" size="mini"></el-button> + </div> + <div> + <div class="analysis-btn"> + <div> + <el-button type="primary" size="mini">閲嶇疆鍒嗘瀽鏉′欢</el-button> + <el-button type="primary" size="mini" @click="CZFX=!CZFX">寮�濮嬪垎鏋�</el-button> + </div> </div> </div> </div> - </div> --> - </div> - </el-dialog> + </div> + <!-- 寮�濮嬪垎鏋愮晫闈� --> + <div v-else class="fenXiChuZhi"> + <div> + <div class="panel-title">浜嬩欢鍩烘湰淇℃伅</div> + <ul> + <li> + <p>浜嬩欢绠$嚎</p> + <span>鐢熶骇涓�鍖虹绾緼</span> + <span>鍚补姹℃按</span> + <span>鐩村煁</span><span>鏃犵紳閽㈢</span><span>鎷︽埅璁炬柦锛�<i>a闃�闂�</i></span> + </li> + <li> + <p>浜嬩欢涓婃父绠$嚎</p> + <span>鐢熶骇涓�鍖虹绾緼</span> + <span>鍚补姹℃按</span> + <span>鐩村煁</span><span>鏃犵紳閽㈢</span><span>鎷︽埅璁炬柦锛�<i>a闃�闂�</i></span> + </li> + </ul> + </div> + <div> + <div class="panel-title">寤鸿澶勭疆鎺柦</div> + <div class="footer"> + <el-button type="primary" size="mini">妯旱鏂潰</el-button> + <el-button type="primary" size="mini" @click="showCalculate=!showCalculate">浜嬫晠姘磋绠�</el-button> + </div> + <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"> + <el-table-column prop="define" label="寤鸿澶勭疆鎺柦" show-overflow-tooltip></el-table-column> + <el-table-column type="selection" label="棰勮" width="55"></el-table-column> + <!-- <el-table-column label="鏃ユ湡" width="120"> + <template slot-scope="scope">{{ scope.row.date }}</template> + </el-table-column> --> + </el-table> + </div> + <div class="filteringInformation"> + <div class="header"> + <div> + <ul> + <li>鍐呮帓鍙� <span>鍏�1鏉�</span></li> + <li>澶栨帓鍙�<span>鍏�2鏉�</span></li> + <li>鍐呮帓鍙� <span>鍏�1鏉�</span></li> + <li>澶栨帓鍙�<span>鍏�2鏉�</span></li> + <li>鍐呮帓鍙� <span>鍏�1鏉�</span></li> + <li>澶栨帓鍙�<span>鍏�2鏉�</span></li> + </ul> + </div> + <div class="area-selected" style="justify-items: center"> + <el-button type="primary" class="el-icon-location" size="mini"></el-button> + <el-button type="primary" class="el-icon-location" size="mini"></el-button> + <el-select v-model="value" filterable placeholder="璇烽�夋嫨" size="mini"> + <el-option v-for="item in options" :key="item.value" :label="item.label" + :value="item.value"></el-option> + </el-select> + <el-button type="primary" class="el-icon-search" size="mini"></el-button> + <el-input placeholder="瀹℃壒浜�" size="mini" style="width: 60px"></el-input> + <el-button type="primary" size="mini">鏌ヨ</el-button> + </div> + </div> + <div class="content"> + <ul> + <li> + <el-button type="primary" size="mini">搴旀�ュ熀纭�</el-button> + </li> + <li> + <el-button type="primary" size="mini">搴旀�ュ熀纭�</el-button> + </li> + <li> + <el-button type="primary" size="mini">搴旀�ュ熀纭�</el-button> + </li> + <li> + <el-button type="primary" size="mini">搴旀�ュ熀纭�</el-button> + </li> + </ul> + <el-table :data="tableData2" style="width: 80%"> + <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="footer"> + <el-button type="primary" size="mini">鐢熸垚鎶ュ憡</el-button> + <el-button type="primary" size="mini" @click="CZFX=!CZFX">杩斿洖</el-button> + </div> + </div> + </div> + <!-- --> + </el-dialog> + <el-dialog class="calculate" :visible.sync="showCalculate" title="浜嬫晠姘存湁鏁堝绉绠�" :modal="false" v-dialogDrag> + <ul> + <li>浜嬫晠姘存祦閲忥細 + <el-input size="mini" style="width: 60px"></el-input> + m3/h + </li> + <li>浜嬫晠鏃堕棿锛� + <el-input size="mini" style="width: 60px"></el-input> + h + </li> + <li>浜嬫晠鐗╂枡閲忥細 + <el-input size="mini" style="width: 60px"></el-input> + m3 + </li> + <li>杞瓨閲忥細 + <el-input size="mini" style="width: 60px"></el-input> + m3 + </li> + <li>娑堥槻姘存祦閲忥細 + <el-input size="mini" style="width: 60px"></el-input> + h + </li> + <li>娑堥槻鏃堕棿锛� + <el-input size="mini" style="width: 60px"></el-input> + h + </li> + <li>闄嶉洦閲忥細 + <el-input size="mini" style="width: 60px"></el-input> + mm + </li> + <li>姹囨按闈㈢Н锛� + <el-input size="mini" style="width: 60px"></el-input> + m2 + </li> + <li>鐢熶骇搴熸按閲忥細 + <el-input size="mini" style="width: 60px"></el-input> + m3 + </li> + <li>鏀堕泦姹犱綑閲忥細 + <el-input size="mini" style="width: 60px"></el-input> + m3 + </li> + </ul> + <ul> + <li>浜嬫晠姘村绉細 + <el-input size="mini" style="width: 60px"></el-input> + m3 + </li> + <li>鏄惁澶т簬鏀堕泦姹犱綑閲忥細 + <el-input size="mini" style="width: 60px"></el-input> + </li> + </ul> + <div class="footer"> + <el-button type="primary" size="mini">璁$畻</el-button> + <el-button type="primary" size="mini">纭</el-button> + <el-button type="primary" size="mini">閲嶇疆</el-button> + </div> + </el-dialog> + </div> </template> <script> +import eventBus from '../../eventBus' const cityOptions = ['涓婃捣', '鍖椾含', '骞垮窞', '娣卞湷'] + export default { name: 'index', data () { @@ -57,49 +206,171 @@ tit: '浜嬩欢澶勭疆', showSchedule: false, tableData: [ - { name: '棰勬A', define: '缁煎悎棰勬', hierarchy: '浜岀骇鍗曚綅', classification: '鐜繚' }, - { name: '棰勬B', define: '涓撻」棰勬', hierarchy: '鐩村睘浼佷笟', classification: '鐜繚' }, - { name: '棰勬C', define: '鐜板満澶勭疆棰勬', hierarchy: '鍩哄眰鍗曚綅', classification: '鐢熶骇' }, - { name: '棰勬D', define: '鐜板満澶勭疆棰勬', hierarchy: '鍩哄眰鍗曚綅', classification: '鐢熶骇' }, - { name: '棰勬E', define: '鐜板満澶勭疆棰勬', hierarchy: '鍩哄眰鍗曚綅', classification: '鐢熶骇' } + { + name: '棰勬A', + define: '缁煎悎棰勬', + hierarchy: '浜岀骇鍗曚綅', + classification: '鐜繚' + }, + { + name: '棰勬B', + define: '涓撻」棰勬', + hierarchy: '鐩村睘浼佷笟', + classification: '鐜繚' + }, + { + name: '棰勬C', + define: '鐜板満澶勭疆棰勬', + hierarchy: '鍩哄眰鍗曚綅', + classification: '鐢熶骇' + }, + { + name: '棰勬D', + define: '鐜板満澶勭疆棰勬', + hierarchy: '鍩哄眰鍗曚綅', + classification: '鐢熶骇' + }, + { + name: '棰勬E', + define: '鐜板満澶勭疆棰勬', + hierarchy: '鍩哄眰鍗曚綅', + classification: '鐢熶骇' + } ], checkAll: false, checkedCities: ['涓婃捣', '鍖椾含'], cities: cityOptions, isIndeterminate: true, value: '', - options: [{ value: '500', label: '500m' }, { value: '1000', label: '1km' }, { value: '2000', label: '2km' }, { value: '5000', label: '5km' }, { value: '10000', label: '10km' }] + options: [{ + value: '500', + label: '500m' + }, { + value: '1000', + label: '1km' + }, { + value: '2000', + label: '2km' + }, { + value: '5000', + label: '5km' + }, { + value: '10000', + label: '10km' + }], + isShowFenXi: false, + CZFX: true, + tableData2: [{ + 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 寮�' + }], + showCalculate: false } }, - methods: { - - }, + methods: {}, mounted () { - + eventBus.$on('events-reported', (obj) => { + console.log(obj) + this.showSchedule = obj + }) } } </script> <style scoped lang="less"> -.emergency{ - /deep/ .el-dialog{ - width: 450px; - } - .panel-title{ - text-align: left; - padding: 5px 0 0 0; - } - .basicInformation{ - .area-selected{ - display: flex; - justify-content:flex-end; - align-items : center; + .emergency { + /deep/ .el-dialog { + width: 450px; } - .analysis-btn{ + + .panel-title { + text-align: left; + padding: 5px 0 0 0; + } + + .basicInformation { + .area-selected { + display: flex; + justify-content: flex-end; + align-items: center; + } + + .analysis-btn { + display: flex; + justify-content: space-between; + align-items: center; + } + } + + .fenXiChuZhi { display: flex; - justify-content:space-between; - align-items : center; + flex-wrap: wrap; + + > div { + width: 50% + } + + .filteringInformation { + width: 100%; + + .header { + display: flex; + justify-content: space-between; + + ul { + display: flex; + + li { + span { + display: block; + } + } + } + } + + .content { + display: flex; + } + } + } + + .footer { + display: flex; + justify-content: flex-end + } + + .calculate { + ul { + display: flex; + flex-wrap: wrap; + + li { + width: 50%; + } + } + + /deep/ .el-dialog { + left: 810px; + } } } -} + + .emergency .widt800 { + /deep/ .el-dialog { + width: 800px; + } + } </style> diff --git a/src/components/helpers/LocateHelper.js b/src/components/helpers/LocateHelper.js new file mode 100644 index 0000000..9e346c1 --- /dev/null +++ b/src/components/helpers/LocateHelper.js @@ -0,0 +1,215 @@ +import { pulseEffect } from '../../utils/utils' +import Popup from '@views/popup/Popup' +import { LAYERPROPS, LAYERS } from '../../conf/Constants' + +/** + * 鏁村悎瀹氫綅銆侀珮浜�佸脊绐� + * @param feature geojson + * @param config 鍥惧眰鐨刢onfig + */ +export const locate = function (feature, config, filter) { + fitBounds(feature) + highlight(feature, config.icon) + const centerPoint = getCenterPoint(feature) + const params = { LAYERS: config.layerGroup || config.typeName, QUERY_LAYERS: config.layerGroup || config.typeName } + const filters = [] + if (config.filter) { + filters[filters.length] = config.filter + } + if (filter) { + filters[filters.length] = filter + } + if (filters.length > 0) { + params.CQL_FILTER = filters.join(' AND ') + } + console.log(centerPoint) + loadPointWfs(centerPoint, params) +} + +/** + * 鍔犺浇鐐硅寖鍥寸殑wfs鏁版嵁骞跺脊绐� + * @param latlng 鐐圭殑缁忕含搴﹀潗鏍� + * @param params + */ +export const loadPointWfs = function (latlng, params) { + setTimeout(() => { + window.mapManager.loadWfsDatas(latlng, params).then((res) => { + openPropsPopup(latlng, res.features) + }) + }, 1000) +} +/** + * 鏍规嵁浼犵殑 feature瀵硅薄瀹氫綅锛� + * @param code + * @param feature + */ +export const fitBounds = function (feature) { + const type = feature.geometry.type + if (type === 'Point') { + var point = feature.geometry.coordinates + point = [point[1], point[0]] + window.map.setView(point, 19) + } else { + window.map.fitBounds(window.L.geoJSON(feature).getBounds()) + } +} + +export const highlight = function (feature, icon) { + /* if (Array.isArray(feature)) { + for (let i = 0; i < feature.length; i++) { + highlight(feature[i], icon) + } + } else { */ + window.mapManager.clearHighlight() + const L = window.L + const type = feature.geometry.type + const highlightLayer = window.mapManager.hightlightLayer + if (type === 'Point') { + // 鍙犲姞涓�涓ぇ灏哄鐨勫浘鏍� + let point = feature.geometry.coordinates + point = [point[1], point[0]] + pointZoom(point, icon) + pulseEffect(point) + } else { + L.geoJSON(feature, { + style: function () { + return { + color: 'red' + } + } + }).addTo(highlightLayer) + } +} + +/** + * 楂樹寒鐐逛綅鍥炬爣 + * @param latlng 缁忕含搴� + * @param icon 鍥炬爣 + */ +export const pointZoom = function (latlng, icon) { + const L = window.L + const highlightLayer = window.mapManager.hightlightLayer + if (icon) { + L.marker(latlng, { + icon: L.icon({ + iconUrl: '/assets/images/map/' + icon, + iconSize: [30, 30], + iconAnchor: [15, 15] + }) + }).addTo(highlightLayer) + } +} + +/** + * 寮瑰嚭灞炴�у垪琛ㄥ睍绀虹獥鍙� + * @param xy 寮瑰嚭绐楀彛璺熼殢瑕佺礌鐨勭粡绾害 + * @param layer 鏌ヨ鎸囧畾鐨勫浘灞傘�備笉鎸囧畾鏃讹紝榛樿涓哄嬀閫夌殑鍥惧眰 + */ +export const openPropsPopup = function (xy, features) { + const lt = window.map.latLngToContainerPoint(xy) + const datas = popupDatas(features) + if (datas.length > 0) { + window.$layer.open({ + content: { + comp: Popup, // 缁勪欢 + data: { // 浼犻�掔殑鍙傛暟 + datas: datas + } + }, + title: '', // 鏍囬 + left: lt.x, + top: lt.y + }) + } +} + +export const getCenterPoint = function (feature) { + const L = window.L + const type = feature.geometry.type + var coordinates = feature.geometry.coordinates + + if (type === 'Point') { + return [coordinates[1], coordinates[0]] + } else { + return L.geoJSON(feature, {}).getBounds().getSouthWest() + // return [center.lat, center.lng] + + // return turf.centerOfMass(L.geoJSON(feature, {}).toGeoJSON()) + } +} + +const popupDatas = function (features) { + const datas = [] + console.log(features) + if (features) { + for (var i = 0; i < features.length; i++) { + const feature = features[i] + const id = feature.id + const properties = feature.properties + const ids = id.split('.') + + const propValues = LAYERPROPS[ids[0]] + const contents = {} + if (!propValues) { + continue + } + if (id.indexOf('pipesegment') >= 0) { + continue + } + for (const k in properties) { + if (propValues[k]) { + contents[propValues[k]] = properties[k] + } + } + const data = { + title: LAYERS[ids[0]], + name: feature.id, + content: contents, + feature: feature + } + if (id.indexOf('pipeline') >= 0) { + data.tableList = listPipeSection(features, properties.subchacode || properties.pipecode) + } + datas.push(data) + console.log(properties) + } + } + return datas +} + +// 绠$嚎淇℃伅缁戝畾鎵�灞炵娈� +export const listPipeSection = function (features, code) { + const list = [] + if (features) { + for (var i = 0; i < features.length; i++) { + const feature = features[i] + const id = feature.id + if (id.indexOf('pipesegment') < 0) { + continue + } + const properties = feature.properties + if (properties.pipecode === code) { + list[list.length] = properties + } + } + } + return list +} + +export const getLayer = function (layerId, id) { + const layer = this.layers[layerId] + + if (layer) { + layer.eachLayer(function (layer) { + const layers = layer.getLayers() + for (var i = 0; i < layers.length; i++) { + const lay = layers[i] + const feature = lay.feature + if (feature.id === id) { + return lay + } + } + }) + } + return null +} diff --git a/src/components/helpers/MapManager.js b/src/components/helpers/MapManager.js new file mode 100644 index 0000000..eae4b26 --- /dev/null +++ b/src/components/helpers/MapManager.js @@ -0,0 +1,68 @@ +import AjaxUtils from '../../utils/AjaxUtils' +import { WMS_URL } from '../../conf/Constants' +import { highlight, openPropsPopup } from './LocateHelper' + +class MapManager { + constructor () { + this.hightlightLayer = window.L.featureGroup({}).addTo(window.map) + this.clickDialogSwitch = true // 鍥惧眰鐐瑰嚮寮圭獥寮�鍏� + this.L = window.L + this.map = window.map + // wms getfeatureinfo 榛樿鍙傛暟 + this.defaultWmsParams = { + 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' + } + } + + mapClickListener () { + this.map.on('click', (e) => { + // console.log(e) + this.clearHighlight() + this.loadWfsDatas(e.latlng).then((res) => { + if (res.features.length > 0) { + highlight(res.features[0]) + if (this.clickDialogSwitch) { + openPropsPopup(e.latlng, res.features) + } + } + }) + }) + } + + loadWfsDatas (latlng, params) { + return new Promise((resolve, reject) => { + const size = this.map.getSize() + var point = this.map.latLngToContainerPoint(latlng, this.map.getZoom()) + const wmsLayerService = window.layerFactory.wmsLayerService + const layers = wmsLayerService.wmsLayerList.getLayers() + // const filters = wmsLayerService.wmsLayerList.getFilters() + const wmsParams = Object.assign({ + LAYERS: layers, + QUERY_LAYERS: layers, + WIDTH: size.x, + HEIGHT: size.y, + X: Math.round(point.x), + Y: Math.round(point.y), + BBOX: this.map.getBounds().toBBoxString() + }, this.defaultWmsParams, params) + AjaxUtils.get4JsonDataByUrl(WMS_URL, wmsParams, (res) => { + resolve(res.data) + }) + }) + } + + clearHighlight () { + this.hightlightLayer.clearLayers() + } +} + +export default MapManager diff --git a/src/components/helpers/WfsHelper.js b/src/components/helpers/WfsHelper.js index 8505070..d590b0a 100644 --- a/src/components/helpers/WfsHelper.js +++ b/src/components/helpers/WfsHelper.js @@ -2,6 +2,7 @@ * 鍔犺浇WMS,鎷兼帴FILTER,LAYERS鍙傛暟绛� */ import { WFS_URL } from '../../conf/Constants' +import { lrtrim } from '../../utils/utils' function WfsHelper () { this.filters = [] this.typeNames = [] @@ -16,7 +17,35 @@ } this.setTypeName = (typeName) => { - this.typeNames = typeName + if (typeof typeName === 'string' || typeName instanceof String) { + const comma = typeName.indexOf(',') + if (comma >= 0) { + const typeNameArr = typeName.split(',') + for (let i = 0; i < typeNameArr.length; i++) { + this.addTypeName(lrtrim(typeNameArr[i])) + } + } + } else if (Array.isArray(typeName)) { + this.typeNames = typeName + } + } + + this.setFilter = (filter) => { + console.log(filter) + if (typeof filter === 'string' || filter instanceof String) { + const eq = filter.indexOf('=') + const lk = filter.indexOf('like') + if (eq >= 0) { + const filterArr = filter.split('=') + this.addEquals(lrtrim(filterArr[0]), lrtrim(filterArr[1])) + } + if (lk >= 0) { + const filterArr = filter.split('like') + this.addLike(lrtrim(filterArr[0]), lrtrim(filterArr[1])) + } + } else if (Array.isArray(filter)) { + this.filters = filter + } } this.clearFilter = () => { diff --git a/src/components/layer/src/layer.js b/src/components/layer/src/layer.js index b0581c1..6620ed9 100644 --- a/src/components/layer/src/layer.js +++ b/src/components/layer/src/layer.js @@ -20,13 +20,12 @@ * @return {[type]} [description] */ self.open = function (opt) { - console.log(opt) self.closeAll() var options = mergeJson(opt, defOptions) const id = `notification_${new Date().getTime()}_${seed++}` options.id = id options.layer = self - options.content.content = Vue.extend(options.content.content) + options.content.comp = Vue.extend(options.content.comp) const instance = new LayerVueExtend({ data: options }) diff --git a/src/components/layer/src/layer.vue b/src/components/layer/src/layer.vue index 3221a11..64f7411 100644 --- a/src/components/layer/src/layer.vue +++ b/src/components/layer/src/layer.vue @@ -10,6 +10,7 @@ <script> import helper from './helper/helper.js' +import '../../../utils/dragBoxes' export default { data () { @@ -47,10 +48,8 @@ }, init () { const propsData = helper.deepClone(this.content.data) || {} - propsData.layerid = this.id - propsData.lydata = this.content.data - propsData.lyoption = this.options - const instance = new this.content.content({ + console.log(propsData) + const instance = new this.content.comp({ // parent: this.content.parent, propsData: propsData }) diff --git a/src/components/message/index.vue b/src/components/message/index.vue new file mode 100644 index 0000000..3f6c687 --- /dev/null +++ b/src/components/message/index.vue @@ -0,0 +1,134 @@ +<template> + <div class="message"> + <el-tooltip :popper-class="'message-btn'" effect="dark" content="閫氱煡" placement="left"> + <div :class='["iconBtn",selectGroup === true ? "active-button" : ""]' @click="changeSelectMouse" > + <i class="icon el-icon-bell" ></i> + </div> + </el-tooltip> + <el-dialog class="dialogMessage" :visible.sync="isShowMessage" title="閫氱煡" :modal="false" v-dialogDrag :before-close="handleClose"> + <p class="conclusion"> + 鎬讳綋姒傚喌锛氬寲闆嗗洟鎬诲叡鏈� <span>589</span> 涓洃娴嬬偣锛屾秹鍙� <span>44</span> 瀹朵紒涓氥�傚叾涓紝<span>453</span> 涓偣鎺掓斁杈炬爣锛�<span class="red">4</span> 涓嚭鐜拌秴鏍囥�� + </p> + <ul class="detail"> + <li>搴熸按鎶ヨ鏁伴噺锛� + <el-popover placement="bottom-end" trigger="click" popper-class="popovers" title="浜岀骇椋庨櫓鍦板潡"> + <refinery :tableHeader="tableHeader1" :tableContent="tableContent1"></refinery> + <u slot="reference" style="color: #00ffff">22</u> + </el-popover> + 涓�</li> + <li>纭寲姘㈤珮鎶ユ暟閲忥細<span>3</span>涓�</li> + <li>搴熸皵鎶ヨ鏁伴噺锛�<span>3</span>涓�</li> + <li>鍙噧姘旈珮鎶ユ暟閲忥細<span>3</span>涓�</li> + <li>鍥哄簾鎶ヨ鏁伴噺锛�<span>3</span>涓�</li> + <li>搴旀�ュ缃簨浠舵暟閲忥細<span>3</span>涓�</li> + </ul> + <div class="footer"> + <el-button type="primary" size="mini" @click="btnForecastWarningDetails">棰勬姤璀︽槑缁�</el-button> + </div> + </el-dialog> + </div> +</template> + +<script> +// +import bus from '@/eventBus' +import Refinery from '@components/table/components/componented/refinery' +export default { + name: 'index', + components: { + Refinery + }, + data () { + return { + selectGroup: false, + isShowMessage: false, + tableHeader1: [ + { name: '浼佷笟鍚嶇О', width: '140', propS: 'value1' }, + { name: '鐩戞祴鐐瑰悕绉�', width: '140', propS: 'value2' }, + { name: '姹℃煋鐗�', width: '140', propS: 'value3' }, + { name: '鐩戞祴鍊�', width: '140', propS: 'value4' }, + { name: '鏍囧噯鍊�', width: '140', propS: 'value5' }, + { name: '棰勮鍊�', width: '140', propS: 'value6' }, + { name: '鎶ヨ鏃堕棿', width: '140', propS: 'value7' } + ], + tableContent1: [ + { value1: '澶╂触鐭冲寲', value2: '鐐兼补鍖栧伐鎺掓薄姘�', value3: 'COD', value4: '30.07', value5: '35', value6: '30', value7: '2021-06-01 04锛�00' }, + { value1: '澶╂触鐭冲寲', value2: '鐐兼补鍖栧伐鎺掓薄姘�', value3: 'COD', value4: '30.07', value5: '35', value6: '30', value7: '2021-06-01 04锛�00' }, + { value1: '澶╂触鐭冲寲', value2: '鐐兼补鍖栧伐鎺掓薄姘�', value3: 'COD', value4: '30.07', value5: '35', value6: '30', value7: '2021-06-01 04锛�00' } + ] + } + }, + mounted () { + const that = this + bus.$on('changeState', function (state) { + if (state.num !== 6 && state.type) { + that.selectGroup = false + } + }) + }, + methods: { + changeSelectMouse () { + this.selectGroup = !this.selectGroup + this.isShowMessage = this.selectGroup + if (this.selectGroup) { + this.isShow = [] + } else { + this.isShow = !this.isShow + this.active = -1 + } + const state = { + type: this.selectGroup, + num: 6 + } + bus.$emit('changeState', state) + }, + btnForecastWarningDetails () { + bus.$emit('forecastWarningDetails', '') + }, + handleClose (done) { + this.selectGroup = false + this.isShowMessage = false + } + } +} +</script> + +<style scoped lang="less"> + .message{ + z-index: 2000; + position: absolute; + right: 0.14583rem; + top: 0.11979rem; + .dialogMessage{ + /deep/ .el-dialog{ + width: 30vw; + left: 60%; + } + .conclusion{ + text-indent:2em; + span{color: #95F204;} + span.red{color: red} + } + .detail{ + display: flex; + flex-wrap: wrap; + margin-top: 5px; + padding-top: 5px; + border-top: 1px solid rgba(0, 255, 246, 0.14); + border-bottom: 1px solid rgba(0, 255, 246, 0.14); + >li{ + width: 50%; + margin-bottom: 5px;q + cursor: pointer; + display: flex; + span{padding: 0 5px;color: #00fff6;cursor: pointer} + } + } + .footer{ + padding-top: 5px; + display: flex; + justify-content: flex-end; + } + } + } +</style> diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue index d4d40f3..b8fa510 100644 --- a/src/components/panel/RightSearchPanel.vue +++ b/src/components/panel/RightSearchPanel.vue @@ -60,7 +60,7 @@ import SoilGroundWaterSearch from '@components/panel/topicSearch/SoilGroundWaterSearch.vue' import PipeChangesSearch from '@components/panel/topicSearch/pipeChangesSearch.vue' import PipeInformationSearch from '@components/panel/topicSearch/pipeInformationSearch.vue' -import ReportSearch from './topicSearch/ReportSearch' +import EnterpriseEmergencySearch from './topicSearch/EnterpriseEmergencySearch' import bus from '@/eventBus' @@ -72,7 +72,7 @@ SolidWasteSearch, EnvRiskSearch, DischargeSearch, - ReportSearch + EnterpriseEmergencySearch }, data () { return { @@ -155,7 +155,7 @@ this.gcComp = PipeInformationSearch break case '浼佷笟搴旀��': - this.gcComp = ReportSearch + this.gcComp = EnterpriseEmergencySearch break } }, diff --git a/src/components/panel/topicSearch/DischargeSearch.vue b/src/components/panel/topicSearch/DischargeSearch.vue index f0fd797..f29036a 100644 --- a/src/components/panel/topicSearch/DischargeSearch.vue +++ b/src/components/panel/topicSearch/DischargeSearch.vue @@ -170,7 +170,7 @@ methods: { flyto () { const pos = [39.90751504898071, 116.38927817344666] - window.map.flyTo(pos, 15) + window.map.setView(pos, 15) }, // 鍖哄煙绛涢�� areaType (val) { diff --git a/src/components/panel/topicSearch/EnterpriseEmergency/EventQuery.vue b/src/components/panel/topicSearch/EnterpriseEmergency/EventQuery.vue index 873db6e..70f0ca1 100644 --- a/src/components/panel/topicSearch/EnterpriseEmergency/EventQuery.vue +++ b/src/components/panel/topicSearch/EnterpriseEmergency/EventQuery.vue @@ -26,7 +26,8 @@ </el-form-item> <el-form-item label="浜嬩欢绫诲瀷锛�"> <el-radio-group v-model="form.transferData" class="levelOfRisk"> - <el-radio v-for="(item,index) in form.levelOfRisk" :label="item.value" :key="index"> + <el-radio v-for="(item,index) in form.levelOfRisk" :label="item.value" :key="index" + @change="redioChange(item.name)"> <span class="levelOfRisk-type">{{ item.name }}</span> </el-radio> </el-radio-group> @@ -38,12 +39,28 @@ </el-form> </el-form> <el-scrollbar style="height:286.22px"> - <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" - :class="activeNum===index?'hover':''"> + <!-- <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" :class="activeNum===index?'hover':''" @click="accordPopup(item)">--> + <!-- <!– <i class="state"></i>–>--> + <!-- <img class="state" :src="getImgSrc(item.properties.type)" style="background: none"/>--> + <!-- <div>--> + <!-- <h3 @click="handleLocation(item,index)">浜嬩欢鍚嶇О:XXX浜嬩欢</h3>--> + <!-- <h5>--> + <!-- 浜嬩欢浜嬩欢:2021骞�3鏈�21鏃�--> + <!-- <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;">鍒犻櫎</el-button>--> + <!-- </h5>--> + <!-- <p>--> + <!-- 浜嬩欢鐘舵�侊細<span>瀹℃壒闃舵</span>--> + <!-- </p>--> + <!-- <p>浜嬩欢绫诲瀷锛�<span>{{ item.properties.pipecode }}</span>--> + <!-- <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;">浜嬩欢绠$悊--> + <!-- </el-button>--> + <!-- </p>--> + <!-- </div>--> + <!-- </div>--> + <div class="environmental-risk-list"> <!-- <i class="state"></i>--> - <img class="state" :src="getImgSrc()" style="background: none"/> <div> - <h3 @click="handleLocation(item,index)">浜嬩欢鍚嶇О:XXX浜嬩欢</h3> + <h3>浜嬩欢鍚嶇О:XXX浜嬩欢</h3> <h5> 浜嬩欢浜嬩欢:2021骞�3鏈�21鏃� <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;">鍒犻櫎</el-button> @@ -51,30 +68,33 @@ <p> 浜嬩欢鐘舵�侊細<span>瀹℃壒闃舵</span> </p> - <p>浜嬩欢绫诲瀷锛�<span>{{ item.properties.pipecode }}</span> - <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;">浜嬩欢绠$悊 + <p>浜嬩欢绫诲瀷锛�<span>妯℃嫙绠$嚎浜嬩欢</span> + <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;" + @click="accordPopup()"> + <span>浜嬩欢绠$悊</span> </el-button> </p> </div> </div> </el-scrollbar> +<!-- <reportPopup></reportPopup>--> </div> </template> <script> -// import { LayerEntEmer } from '../../../../../conf/layers/LayerEntEmer' -// import { LayerEvent } from '../../../../../conf/layers/LayerEvent' -// import { LayerResources } from '../../../../../conf/layers/LayerResources' -import ReportPopup from './ReportPopup' - -import WfsHelper from '@components/helpers/WfsHelper' -import AjaxUtils from '@utils/AjaxUtils' +// import WfsHelper from '@components/helpers/WfsHelper' +// import AjaxUtils from '@utils/AjaxUtils' +import reportPopup from './ReportPopup' export default { name: 'EventQuery', + components: { + // reportPopup + }, data () { return { + reportIncident: false, list: [], activeNum: -1, LayerEvent: {}, @@ -103,16 +123,36 @@ } }, mounted () { - this.wfsHelper = new WfsHelper() + // this.wfsHelper = new WfsHelper() }, methods: { + // 鐐瑰嚮浜嬩欢绠$悊 + accordPopup () { + window.$layer.open({ + content: { + comp: reportPopup, // 缁勪欢 + parent: this, // 鐖剁粍浠� + data: { // 浼犻�掔殑鍙傛暟 + // info: this.info + } + }, + title: '浜嬩欢鍒嗘瀽' + }) + }, + // radio鏁版嵁閫夋嫨 + redioChange (item) { + console.log(item) + }, + // 鏍规嵁鏁版嵁杩斿洖灞曠ず涓嶅悓鐨勫浘鐗� getImgSrc () { const icon = this.form.dataType.icon return icon ? 'assets/images/map/' + icon : '' }, + // form 2 琛ㄥ崟鏁版嵁閫夋嫨浜嬩欢 handleDataType () { this.list = [] }, + // form 琛ㄥ崟鏁版嵁閫夋嫨 handlePipelineType (val) { this.list = [] for (let i = 0; i < this.items.length; i++) { @@ -123,39 +163,13 @@ } } }, + // 鏁版嵁鎼滅储浜嬩欢 async handleSearch () { - this.list = [] - this.wfsHelper.clearFilter() - // todo 鐜板湪浼佷笟搴旀�ヨ繕娌″尯鍒嗗紑绫诲瀷锛屽悗闈㈡敼 - // this.wfsHelper.setTypeName([this.form.dataType.typeName]) - this.wfsHelper.setTypeName(['sewer:emergency']) - if (this.form.keyword) { - this.wfsHelper.addLike('name', this.form.keyword) - } - const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {}) - if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) { - this.list = res.features - } - }, - handleLocation (val, index) { - console.log(val) - this.activeNum = index - // layer && layer.openPopup() - // window.layerFactory.flyByFeature(val, this.form.dataType.code) - window.map.flyTo([val.properties.y, val.properties.x], 15) - }, - btnAffiliatedFacilities () { console.log('item') - window.$layer.open({ - content: { - content: ReportPopup, // 缁勪欢 - parent: this, // 鐖剁粍浠� - data: { // 浼犻�掔殑鍙傛暟 - // storagePlaceId: e.layer.options.totransferData.StoragePlaceId - } - } - // title: 'title' // 鏍囬 - }) + }, + // 鎼滅储鐨勬暟鎹� de 鐐瑰嚮浜嬩欢 + handleLocation () { + console.log('val') } } } diff --git a/src/components/panel/topicSearch/EnterpriseEmergency/ReportPopup.vue b/src/components/panel/topicSearch/EnterpriseEmergency/ReportPopup.vue index 17e97de..bdbd49e 100644 --- a/src/components/panel/topicSearch/EnterpriseEmergency/ReportPopup.vue +++ b/src/components/panel/topicSearch/EnterpriseEmergency/ReportPopup.vue @@ -1,39 +1,52 @@ <template> - <!-- <div class="public-bounced map-background">--> - <!-- <div class="public-bounced-title panel-title">--> - <!-- <span>涓婃姤浜嬩欢</span>--> - <!-- <i class="el-icon-circle-close" @click="closePopup"></i>--> - <!-- </div>--> - <div class="public-bounced-content"> - <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="search-form"> - <el-form-item label="浜嬩欢鍚嶇О" prop="nameEvent" class="input-event-name"> - <el-input v-model="ruleForm.nameEvent" placeholder="灏嗕簨浠跺懡鍚�"></el-input> +<!-- <el-dialog--> +<!-- custom-class="events-reported"--> +<!-- title="涓婃姤浜嬩欢"--> +<!-- :visible.sync="eventsReported"--> +<!-- :append-to-body="true"--> +<!-- :modal="false"--> +<!-- v-dialogDrag--> +<!-- >--> +<!-- </el-dialog>--> + <div> + <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="90px" class="search-form"> + <!-- 浜嬩欢鍚嶇О--> + <el-form-item class="input-event-name" label="浜嬩欢鍚嶇О" prop="nameOfEvent"> + <el-input v-model="ruleForm.nameOfEvent" placeholder="灏嗕簨浠跺懡鍚�"></el-input> </el-form-item> - <el-form-item label="浜嬩欢绫诲瀷" prop="eventType"> - <el-radio-group v-model="ruleForm.eventType"> - <el-radio v-for="(item,index) in ruleForm.eventTypeList" :label="item.value" :key="index"> + <!-- 浜嬩欢绫诲瀷--> + <el-form-item label="浜嬩欢绫诲瀷" prop="eventOfType"> + <el-radio-group v-model="ruleForm.eventOfType"> + <el-radio v-for="(item,index) in ruleForm.eventOfTypeList" :label="item.value" :key="index"> <span>{{ item.name }}</span> </el-radio> </el-radio-group> </el-form-item> - <el-form-item label="浜嬩欢绛夌骇" prop="eventLevel"> - <el-radio-group v-model="ruleForm.eventLevel"> - <el-radio v-for="(item,index) in ruleForm.eventLevelList" :label="item.value" :key="index"> + <!-- 浜嬩欢绛夌骇--> + <el-form-item label="浜嬩欢绛夌骇" prop="eventOfLevel"> + <el-radio-group v-model="ruleForm.eventOfLevel"> + <el-radio v-for="(item,index) in ruleForm.eventOfLevelList" :label="item.value" :key="index"> <span>{{ item.name }}</span> </el-radio> </el-radio-group> </el-form-item> <el-row> + <!-- 浜嬪彂鍗曚綅--> <el-col :span="12"> - <el-form-item label="浜嬪彂鍗曚綅" prop="region"> - <el-select v-model="ruleForm.region" placeholder="璇烽�夋嫨娲诲姩鍖哄煙"> - <el-option label="鍗曚綅浣嶇疆1" value="shanghai"></el-option> - <el-option label="鍗曚綅浣嶇疆2" value="beijing"></el-option> + <el-form-item label="浜嬪彂鍗曚綅" prop="unit"> + <el-select v-model="ruleForm.unit" placeholder="璇烽�夋嫨娲诲姩鍖哄煙"> + <el-option + v-for="item in ruleForm.unitList" + :key="item.value" + :label="item.label" + :value="item.value"> + </el-option> </el-select> </el-form-item> </el-col> + <!-- 浜嬪彂鏃堕棿--> <el-col :span="12"> - <el-form-item label="浜嬪彂鏃堕棿" prop="region" class="search-panel-item"> + <el-form-item class="search-panel-item" label="浜嬪彂鏃堕棿" prop="atTime"> <el-date-picker v-model="ruleForm.atTime" type="datetime" @@ -43,30 +56,36 @@ </el-col> </el-row> <el-row> + <!-- 浜嬪彂浣嶇疆--> <el-col :span="12"> - <el-form-item label="浜嬪彂浣嶇疆" prop="region" class="search-panel-item"> - <el-input v-model="ruleForm.name" class="report-input"></el-input> + <el-form-item label="浜嬪彂浣嶇疆" prop="positionOf"> + <el-input v-model="ruleForm.positionOf"></el-input> </el-form-item> </el-col> + <!-- 浣嶇疆鎻忚堪--> <el-col :span="12"> - <el-form-item label="浣嶇疆鎻忚堪" prop="name"> - <el-input v-model="ruleForm.name" class="report-input"></el-input> + <el-form-item label="浣嶇疆鎻忚堪" prop="positionDescription"> + <el-input v-model="ruleForm.positionDescription"></el-input> </el-form-item> </el-col> </el-row> <el-row> + <!-- 绠$嚎鍚嶇О--> <el-col :span="12"> - <el-form-item label="绠$嚎鍚嶇О" prop="region" class="search-panel-item"> - <el-input v-model="ruleForm.name" class="report-input"></el-input> + <el-form-item label="绠$嚎鍚嶇О" prop="lineName" class="search-panel-item"> + <el-input disabled v-model="ruleForm.lineName" placeholder="鑷姩甯﹀嚭涓嶅彲淇敼" + class="report-input"></el-input> </el-form-item> </el-col> + <!-- 绠$嚎绫诲瀷--> <el-col :span="12"> - <el-form-item label="绠$嚎绫诲瀷" prop="name"> - <label>鑷姩甯﹀嚭涓嶅彲淇敼</label> + <el-form-item label="绠$嚎绫诲瀷" prop="lineType"> + <label>{{ ruleForm.lineTypeText }}</label> </el-form-item> </el-col> </el-row> - <el-form-item> + <!-- 鐐瑰嚮涓婁紶--> + <el-form-item label="闄勪欢涓婁紶" prop="upload"> <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" @@ -80,42 +99,55 @@ <el-button size="small" type="primary">鐐瑰嚮涓婁紶</el-button> </el-upload> </el-form-item> + <!-- 娑堟伅鎺ㄩ��--> <el-form-item label="娑堟伅鎺ㄩ��" prop="beingPush"> - <el-radio-group v-model="ruleForm.beingPush"> - <el-radio v-for="(item,index) in ruleForm.beingPushList" :label="item.value" :key="index"> - <span>{{ item.name }}</span> - </el-radio> - </el-radio-group> + <el-checkbox-group v-model="ruleForm.beingPushed" @change="infotsChange"> + <el-checkbox v-for="item in ruleForm.beingPushList" + :key="item.name" + :label="item.name" + > + </el-checkbox> + </el-checkbox-group> </el-form-item> <div v-show="wayTo"> <el-form-item label="浜嬩欢鎻忚堪" prop="desc"> - <el-input type="textarea" v-model="ruleForm.desc"></el-input> + <el-input type="textarea" resize="none" v-model="ruleForm.desc" + placeholder="甯﹀嚭浜嬩欢绫诲瀷锛屼簨浠朵綅缃紝浜嬩欢鍗曚綅锛屼簨浠舵椂闂寸瓑瀛楁鑷姩鐢熶骇涓�閮ㄥ垎鎻忚堪"> + </el-input> + <el-button type="primary">涓�閿�<br/>鐢熸垚</el-button> </el-form-item> <el-form-item label="鎺ユ敹浜哄憳" prop="desc"> - <el-input type="textarea" v-model="ruleForm.desc"></el-input> + <el-input type="textarea" resize="none" v-model="ruleForm.desc" placeholder="寮犱笁锛涙潕鍥涳紝"></el-input> + <el-button type="primary">+</el-button> </el-form-item> </div> - <el-form-item> + <el-form-item class="confirmCancel"> <el-button type="primary" @click="submitForm('ruleForm')">纭</el-button> <el-button @click="resetForm('ruleForm')">鍙栨秷</el-button> </el-form-item> </el-form> </div> - <!-- </div>--> </template> <script> -import '@utils/dragBoxes' + +import eventBus from '../../../.././eventBus' export default { name: 'ReportPopup', data () { return { - flag: false, + // eventsReported: true, + eventsReported: false, + saveSuccess: false, + // 琛ㄥ崟缁戝畾鏁版嵁 ruleForm: { - nameEvent: '', - eventType: '', - eventTypeList: [ + // 浜嬩欢鍚嶇О 缁戝畾鏁版嵁 + nameOfEvent: '', + // 浜嬩欢绫诲瀷 缁戝畾鏁版嵁鍊� + eventOfType: '', + // 浜嬩欢绫诲瀷鍙�夋嫨鏁版嵁radio 缁戝畾鏁版嵁 + eventOfTypeList: [ { name: '寰呰ˉ鍏�', value: 1 @@ -129,8 +161,10 @@ value: 3 } ], - eventLevel: '', - eventLevelList: [ + // 浜嬩欢绛夌骇 + eventOfLevel: '', + // 浜嬩欢绛夌骇鍙�夋嫨鏁版嵁radio 缁戝畾鏁版嵁 + eventOfLevelList: [ { name: '寰呰ˉ鍏�', value: 1 @@ -144,63 +178,126 @@ value: 3 } ], + // 浜嬪彂鍗曚綅 缁戝畾鏁版嵁鍊� + unit: '', + unitList: [ + { + label: '鎵瓙', + value: '1' + }, + { + label: '鍗椾含', + value: '2' + } + ], + // 浜嬪彂鏃堕棿 缁戝畾鏁版嵁 atTime: '', - beingPush: '', + // 浜嬪彂浣嶇疆 + positionOf: '', + // 浣嶇疆鎻忚堪 + positionDescription: '', + // 绠$嚎鍚嶇О + lineName: '', + // 绠$嚎绫诲瀷 + lineType: '', + lineTypeText: '鑷姩甯﹀嚭涓嶅彲淇敼', + // 娑堟伅鎺ㄩ�� + beingPushed: [], beingPushList: [ { name: '鐭俊鎺ㄩ��', - value: 1 + value: false }, { name: '鎵嬫満搴旂敤鎺ㄩ��', - value: 2 + value: false } ] }, - fileList: [], - wayTo: false, + // 琛ㄥ崟楠岃瘉 rules: { - name: [ + // 浜嬩欢鍚嶇О鏍¢獙 + nameOfEvent: [ { required: true, message: '璇疯緭鍏ユ椿鍔ㄥ悕绉�', trigger: 'blur' - }, + } + ], + // 浜嬩欢绫诲瀷鏍¢獙 + eventOfType: [ { - min: 3, - max: 5, - message: '闀垮害鍦� 3 鍒� 5 涓瓧绗�', + required: true, + message: '璇烽�夋嫨浜嬩欢绫诲瀷', trigger: 'blur' } ], - region: [ + // 浜嬩欢绛夌骇鏍¢獙 + eventOfLevel: [ + { + required: true, + message: '璇烽�夋嫨浜嬩欢绛夌骇', + trigger: 'blur' + } + ], + // 浜嬪彂鍗曚綅 缁戝畾鏁版嵁鍊� + unit: [ { required: true, message: '璇烽�夋嫨娲诲姩鍖哄煙', trigger: 'change' } ], - resource: [ + // 浜嬪彂鏃堕棿 + atTime: [ { required: true, message: '璇烽�夋嫨娲诲姩璧勬簮', trigger: 'change' } ], - desc: [ + // 浜嬩欢浣嶇疆鏍¢獙 + positionOf: [ { required: true, - message: '璇峰~鍐欐椿鍔ㄥ舰寮�', + message: '璇疯緭鍏ユ椿鍔ㄤ綅缃�', trigger: 'blur' } - ] - } + ], + // 浣嶇疆鎻忚堪鏍¢獙 + positionDescription: [ + { + required: true, + message: '璇疯緭鍏ヤ綅缃弿杩�', + trigger: 'blur' + } + ], + // 绠$嚎鍚嶇О + lineName: [], + // 绠$嚎绫诲瀷 + lineType: [] + }, + wayTo: false, + // 涓婁紶 + fileList: [] } }, methods: { + // 娑堟伅鎺ㄩ�� 閫夋嫨鎺ㄩ�佺殑瀵硅薄 + infotsChange () { + if (this.ruleForm.beingPushed.indexOf('鐭俊鎺ㄩ��') > -1 || this.ruleForm.beingPushed.indexOf('鎵嬫満搴旂敤鎺ㄩ��') > -1) { + // console.log('鍖呭惈璇ュ厓绱�') + this.wayTo = true + } else { + // console.log('涓嶅寘鍚鍏冪礌') + this.wayTo = false + } + }, + // 鐐瑰嚮涓婁紶 鐨勫彇娑堜笂浼犱簨浠� handleRemove (file, fileList) { console.log(file, fileList) }, + // 鐐瑰嚮涓婁紶 鐨勪笂浼犱簨浠� handlePreview (file) { console.log(file) }, @@ -210,19 +307,30 @@ beforeRemove (file, fileList) { return this.$confirm(`纭畾绉婚櫎 ${file.name}锛焋) }, - closePopup () { - this.flags = false - }, + // 琛ㄥ崟鐨勭‘璁ゆ寜閽偣鍑讳簨浠� submitForm (formName) { - this.$refs[formName].validate((valid) => { - if (valid) { - alert('submit!') - } else { - console.log('error submit!!') - return false - } - }) + // this.$refs[formName].validate((valid) => { + // if (valid) { + // alert('submit!') + // } else { + // console.log('error submit!!') + // return false + // } + // }) + // this.eventsReported = false + // this.saveSuccess = true + + // temp涓存椂 + window.mapManager.clickDialogSwitch = false + this.eventsReported = false + eventBus.$emit('events-reported', true) }, + // 澶勭疆鍒嗘瀽 + disposalAnalysis () { + this.saveSuccess = false + eventBus.$emit('events-reported', true) + }, + // form琛ㄥ崟鐨勫彇娑堟寜閽偣鍑讳簨浠� 閲嶇疆淇℃伅 resetForm (formName) { this.$refs[formName].resetFields() } @@ -231,31 +339,45 @@ </script> <style lang="less" scoped> - .public-bounced { - z-index: 2000; - position: absolute; - top: 15%; - left: 20%; + + /deep/ .el-form-item { + margin: 5px 0; + } + + /deep/ .el-textarea__inner { + width: 2rem; + color: darkgrey; + border: solid 1px #00fff6; + background-color: rgba(0, 255, 246, 0.14); + outline: none; + font-size: 0.01rem; + } + + /deep/ .el-checkbox__label { + color: #00fff6 !important; } /deep/ input { + /*width: 145px;*/ border-radius: 0; background-color: rgba(0, 255, 246, 0.14); border: solid 1px #00fff6; color: #C0C4CC; font-size: 0.01rem; - padding: 0 15px; } - /deep/ .input-event-name { - margin: 15px 0; - width: 55%; + /deep/ .el-input.is-disabled .el-input__inner { + color: #C0C4CC; + font-size: 0.01rem; + border-radius: 4px; + background: @background-color; + border-color: @color; + } - .el-input__inner { - width: 100%; - border-radius: 5px; - background: rgba(0, 16, 30, 0.5); - } + /deep/ .el-input__inner { + /*width: 145px;*/ + border-radius: 5px; + background: rgba(0, 16, 30, 0.5); } /deep/ .el-form-item__label { @@ -265,4 +387,10 @@ /deep/ .el-radio__label { color: @color; } + + .confirmCancel { + text-align: right; + /*display: flex;*/ + /*justify-content: flex-end;*/ + } </style> diff --git a/src/components/panel/topicSearch/EnterpriseEmergency/ResourcesQuery.vue b/src/components/panel/topicSearch/EnterpriseEmergency/ResourcesQuery.vue index 40bc1b5..fdad5d6 100644 --- a/src/components/panel/topicSearch/EnterpriseEmergency/ResourcesQuery.vue +++ b/src/components/panel/topicSearch/EnterpriseEmergency/ResourcesQuery.vue @@ -43,53 +43,67 @@ <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" :class="activeNum===index?'hover':''" @click="handleLocation(item,index)"> <img class="state" :src="getImgSrc(item.properties.type)" style="background: none"/> - <h3>璧勬簮绫诲瀷:{{item.properties.adminzonename}}</h3> - <h5>璧勬簮鍚嶇О:{{item.properties.type}}</h5> + <h3>{{changeAmount}}绫诲瀷:{{item.properties.type}}</h3> + <h5>{{changeAmount}}鍚嶇О:{{item.properties.name}}</h5> <p>璐熻矗浜�:<span>{{item.properties.resperson}}</span></p> <p>鐢佃瘽:<span>{{item.properties.telephone}}</span></p> + <p v-if="item.properties.address">鍦板潃:<span>{{item.properties.address}}</span></p> + <p v-else>鍦板潃:<span>{{item.properties.adminzonename}}</span></p> </div> </el-scrollbar> </div> </template> <script> +// wfs ajax import WfsHelper from '@components/helpers/WfsHelper' import AjaxUtils from '@utils/AjaxUtils' -// import { LayerEmergency } from '../../../../../conf/LayerEmergency' +// 鍥惧眰鎺у埗閫夋嫨鐨勬暟鎹� import { LayerEmergencySource } from '../../../../conf/layers/LayerEmergencySource' import { LayerSurroundings } from '../../../../conf/layers/LayerSurroundings' +// 寮曞叆鐨勬柟娉� import { pulseEffect } from '../../../../utils/utils' +import { loadPointWfs, pointZoom } from '../../../helpers/LocateHelper' export default { name: 'ResourcesQuery', data () { return { + // form 琛ㄥ崟缁戝畾鏁版嵁 form: { eventName: '', pipelineType: LayerEmergencySource.name, dataType: '', keyword: '', eventNameList: [ - { name: '閲戦櫟鐭冲寲' }, - { name: '鍗椾含鍖栧' } + { name: '鎵瓙鐭冲寲' }, + { name: '浠緛鍖栫氦' } ] }, + // 鎼滅储鍒扮殑鏁版嵁缁戝畾鐨刟ctive鐨勬牱寮� activeNum: -1, + // 鎼滅储鍒扮殑鏁版嵁杩涜瀛樺偍鐨刲ist list: [], + // form琛ㄥ崟缁戝畾鐨勫浘灞傛暟鎹� items: [LayerEmergencySource, LayerSurroundings], subItems: LayerEmergencySource.layers || LayerSurroundings.layers, - WfsHelper: null + // wfs + WfsHelper: null, + // 搴旀�� || 鍛ㄨ竟 鐨勫尯鍒嗙粦瀹氭暟鎹� + changeAmount: '璧勬簮' } }, mounted () { this.wfsHelper = new WfsHelper() }, methods: { + // 鎼滅储灞曠ず鍥剧墖鏍规嵁杩斿洖鍊煎睍绀� getImgSrc (type) { // console.log(type) // const icon = this.form.dataType.icon return 'assets/images/map/sewers/' + type + '.png' }, + // form 琛ㄥ崟閫夋嫨鏁版嵁鏁版嵁閫夋嫨鍒嗛厤 handlePipelineType (val) { // console.log(val) this.list = [] @@ -102,38 +116,49 @@ } if (this.form.pipelineType === '搴旀�ヨ祫婧�') { this.subItems = LayerEmergencySource.layers + this.changeAmount = '璧勬簮' } else if (this.form.pipelineType === '鍛ㄨ竟鐜') { this.subItems = LayerSurroundings.layers + this.changeAmount = '鐜' } }, + // 浜岀骇from琛ㄥ崟閫夋嫨鏁版嵁娓呯┖ 宸叉湁灞曠ず鏁版嵁 handleDataType (val) { // console.log(val) this.list = [] }, + // 鐐瑰嚮鎼滅储浜嬩欢 async handleSearch () { this.list = [] this.wfsHelper.clearFilter() - // todo 鐜板湪浼佷笟搴旀�ヨ繕娌″尯鍒嗗紑绫诲瀷锛屽悗闈㈡敼 - // console.log(this.form.dataType) - // this.wfsHelper.setTypeName([this.form.dataType.typeName]) this.wfsHelper.setTypeName(['sewer:emergency']) this.wfsHelper.setMaxFeatures(100) + // form琛ㄥ崟閫夋嫨鎼滅储 if (this.form.dataType) { + this.wfsHelper.addEquals('orgname', '\'' + this.form.eventName + '\'') this.wfsHelper.addEquals('type', '\'' + this.form.dataType.name + '\'') } + // 鎼滅储妗唊eyword if (this.form.keyword) { this.wfsHelper.addLike('name', this.form.keyword) } const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {}) + // console.log(res) if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) { this.list = res.features } }, // 鏌ヨ瀹氫綅鍔熻兘 handleLocation (val, index) { + // console.log(val) this.activeNum = index - window.map.setView([val.properties.y, val.properties.x], 16) - pulseEffect([val.properties.y, val.properties.x]) + const positionArea = [val.properties.y, val.properties.x] + window.map.setView(positionArea, 17) + pointZoom(positionArea, this.form.dataType.icon) + // 鍥剧墖 + loadPointWfs(positionArea) + // 寮圭獥 + pulseEffect(positionArea) } } } diff --git a/src/components/panel/topicSearch/ReportSearch.vue b/src/components/panel/topicSearch/EnterpriseEmergencySearch.vue similarity index 85% rename from src/components/panel/topicSearch/ReportSearch.vue rename to src/components/panel/topicSearch/EnterpriseEmergencySearch.vue index 60bcfdd..09db101 100644 --- a/src/components/panel/topicSearch/ReportSearch.vue +++ b/src/components/panel/topicSearch/EnterpriseEmergencySearch.vue @@ -9,17 +9,15 @@ <ResourcesQuery></ResourcesQuery> </el-tab-pane> </el-tabs> - <!-- <ReportPopup></ReportPopup>--> </div> </template> <script> import EventQuery from './EnterpriseEmergency/EventQuery' import ResourcesQuery from './EnterpriseEmergency/ResourcesQuery' -// import ReportPopup from './SewersSelect/EnterpriseEmergency/ReportPopup' export default { - name: 'ReportSearch', + name: 'EnterpriseEmergencySearch', props: ['title'], components: { EventQuery, diff --git a/src/components/panel/topicSearch/GasWasteSearch.vue b/src/components/panel/topicSearch/GasWasteSearch.vue index 42df935..73fc8d6 100644 --- a/src/components/panel/topicSearch/GasWasteSearch.vue +++ b/src/components/panel/topicSearch/GasWasteSearch.vue @@ -169,7 +169,7 @@ window.map.setView(pos, 15) window.$layer.open({ content: { - content: WasteWaterIndex, // 缁勪欢 + comp: WasteWaterIndex, // 缁勪欢 parent: this, // 鐖剁粍浠� data: { // 浼犻�掔殑鍙傛暟 storagePlaceId: val diff --git a/src/components/panel/topicSearch/SewersSearch.vue b/src/components/panel/topicSearch/SewersSearch.vue index ad48f87..3976569 100644 --- a/src/components/panel/topicSearch/SewersSearch.vue +++ b/src/components/panel/topicSearch/SewersSearch.vue @@ -1,91 +1,101 @@ <template> - <div class="sewers-search" v-if="gdVisible"> - <div class="panel-title">{{ title }}</div> - <el-tabs v-model="activeName" @tab-click="handleClick"> - <el-tab-pane label="鏌ヨ" name="first"> - <div class="search-panel "> - <el-form ref="form" :model="form" label-width="90px" class="search-form"> - <el-form-item label="璁炬柦绫诲瀷锛�" size="mini" class="search-panel-item"> - <el-select style="width: 100%" v-model="form.pipelineType" @change="handlePipelineType" - :popper-class="'select-down'"> - <el-option - v-for="item in items" - :key="item.code" - :label="item.name" - :value="item.name"> - </el-option> - </el-select> - </el-form-item> - <el-form-item :label="form.pipelineType+'锛�'" size="mini"> - <el-select style="width: 100%" v-model="form.dataType" value-key="code" :popper-class="'select-down'" @change="handleDataType" > - <el-option - v-for="item in subItems" - :key="item.code" - :label="item.name" - :value="item"> - </el-option> - </el-select> - </el-form-item> - <div class="rightButtonSearch"> - <el-input v-model="form.keyword" size="mini" placeholder="鍦ㄦ杈撳叆鍏抽敭瀛楁悳绱�"></el-input> - <el-button class="el-icon-search" @click="handleSearch"></el-button> - </div> - </el-form> - </div> - <el-scrollbar style="height:413px;"> - <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" :class="activeNum==index?'hover':''"> - <img class="state" :src="getImgSrc()" style="background: none"/> - <div> - <h3 @click="handleLocation(item,index)">{{ item.properties.pipename }}</h3> - <p>鎵�灞炰紒涓氾細<span>{{ item.properties.orgcode }}</span> - <p>璁炬柦绫诲瀷锛�<span>{{ item.properties.teetype }}</span> - <el-button v-if="fuShuSheShiShow" class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;" @click="btnAffiliatedFacilities(item,index)" >闄勫睘璁炬柦</el-button> - </p> - </div> - </div> - </el-scrollbar> - <el-card class="footer-page" v-if="total > 10"> - <el-pagination - small - @current-change="handlePage" - :page-size=pageSize - layout="prev, pager, next" - :total=total - class="warnPagination" - > - </el-pagination> - </el-card> - </el-tab-pane> - <el-tab-pane label="鍒嗘瀽" name="second"> - <SewersAnalysis></SewersAnalysis> - </el-tab-pane> - <el-tab-pane label="鍘嗗彶" name="third"> - <SewersHistory></SewersHistory> - </el-tab-pane> - </el-tabs> - <!-- 闄勫睘璁炬柦闈㈡澘 --> - <affiliated-facilities :facilitiesParameter="facilitiesParameter" v-if="fuShuSheShiShow" ></affiliated-facilities> - </div> + <div class="sewers-search" v-if="gdVisible"> + <div class="panel-title">{{ title }}</div> + <el-tabs v-model="activeName" @tab-click="handleClick"> + <el-tab-pane label="鏌ヨ" name="first"> + <div class="search-panel "> + <el-form ref="form" :model="form" label-width="90px" class="search-form"> + <el-form-item label="璁炬柦绫诲瀷锛�" size="mini" class="search-panel-item"> + <el-select style="width: 100%" v-model="form.pipelineType" @change="handlePipelineType" + :popper-class="'select-down'"> + <el-option + v-for="item in items" + :key="item.code" + :label="item.name" + :value="item.name"> + </el-option> + </el-select> + </el-form-item> + <el-form-item :label="form.pipelineType+'锛�'" size="mini"> + <el-select style="width: 100%" v-model="form.dataType" value-key="code" + :popper-class="'select-down'" @change="handleDataType"> + <el-option + v-for="item in subItems" + :key="item.code" + :label="item.name" + :value="item"> + </el-option> + </el-select> + </el-form-item> + <div class="rightButtonSearch"> + <el-input v-model="form.keyword" size="mini" placeholder="鍦ㄦ杈撳叆鍏抽敭瀛楁悳绱�"></el-input> + <el-button class="el-icon-search" @click="handleSearch"></el-button> + </div> + </el-form> + </div> + <el-scrollbar style="height:413px;"> + <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" + :class="activeNum===index?'hover':''"> + <img class="state" :src="getImgSrc()" style="background: none"/> + <div> + <h3 @click="handleLocation(item,index)">{{ item.properties.name || item.properties.code }}</h3> + <p>鎵�灞炰紒涓氾細<span>{{ item.properties.orgname }}</span> + <p>璁炬柦绫诲瀷锛�<span>{{ item.properties.type }}</span> + <el-button v-if="fuShuSheShiShow" class="rt btn00fff6" size="mini" + style="margin-right: 0.04rem;" + @click="btnAffiliatedFacilities(item,index)"> + 闄勫睘璁炬柦 + </el-button> + </p> + </div> + </div> + </el-scrollbar> + <el-card class="footer-page" v-if="total > 10"> + <el-pagination + small + @current-change="handlePage" + :page-size=pageSize + layout="prev, pager, next" + :total=total + class="warnPagination" + > + </el-pagination> + </el-card> + </el-tab-pane> + <el-tab-pane label="鍒嗘瀽" name="second"> + <SewersAnalysis></SewersAnalysis> + </el-tab-pane> + <el-tab-pane label="鍘嗗彶" name="third"> + <SewersHistory></SewersHistory> + </el-tab-pane> + </el-tabs> + <!-- 闄勫睘璁炬柦闈㈡澘 --> + <affiliated-facilities :facilitiesParameter="facilitiesParameter" + v-if="fuShuSheShiShow"></affiliated-facilities> + </div> </template> <script> +// 寮曞叆缁勪欢鍐呭 =銆� 闄勫睘璁炬柦 +import AffiliatedFacilities from '@components/BaseNav/pipeline/AffiliatedFacilities' +// 绠$嚎鍒嗘瀽鍔熻兘 +import SewersAnalysis from '@components/panel/topicSearch/SewersSelect/SewersAnalysis' +// 绠$嚎鏌ヨ鍘嗗彶鍔熻兘 +import SewersHistory from '@components/panel/topicSearch/SewersSelect/SewersHistory' +// form绫诲瀷鍙�夋嫨鏁版嵁 鍥惧眰鎺у埗 import { LayerPipeLines } from '@src/conf/layers/LayerPipeLines' import { LayerFsss } from '@src/conf/layers/LayerFsss' import { LayerHbss } from '@src/conf/layers/LayerHbss' import { LayerPk } from '@src/conf/layers/LayerPk' import { LayerArea } from '@src/conf/layers/LayerArea' - +// 鏂规硶 import WfsHelper from '@components/helpers/WfsHelper' import AjaxUtils from '@utils/AjaxUtils' - -import AffiliatedFacilities from '@components/BaseNav/pipeline/AffiliatedFacilities' - -// 寮曞叆缁勪欢鍐呭 -import SewersAnalysis from '@components/panel/topicSearch/SewersSelect/SewersAnalysis' -import SewersHistory from '@components/panel/topicSearch/SewersSelect/SewersHistory' +import { fitBounds, highlight, locate } from '../../helpers/LocateHelper' export default { name: 'SewersSearch', + props: ['title'], components: { SewersAnalysis, SewersHistory, @@ -93,38 +103,51 @@ }, data () { return { - activeName: 'first', + // 鍒ゆ柇鏄剧ず/闅愯棌 gdVisible: true, + // tab鍒囨崲 缁戝畾褰撳墠鍊� + activeName: 'first', + // 鎼滅储鏁版嵁 鐢ㄤ簬灞曠ず鏁版嵁瀛樺偍 list: [], + // 鍥惧眰鎺у埗 items: [LayerPipeLines, LayerFsss, LayerHbss, LayerPk, LayerArea], subItems: LayerPipeLines.layers, + // 鍒嗛〉 pageSize: 10, total: 0, + // form琛ㄥ崟缁戝畾鏁版嵁 form: { pipelineType: '绠$嚎', dataType: '', keyword: '' }, - // pageSize: 10, - // current: 1, - isWaybillHover: true, - isRouteHover: false, facilitiesParameter: null, fuShuSheShiShow: true, - fuShuSheShiPanelShow: true, activeNum: -1, wfsHelper: null } }, - props: ['title'], + mounted () { + this.wfsHelper = new WfsHelper() + }, methods: { + // tab鍒囨崲 + handleClick (tab, event) { + console.log(tab, event) + if (tab.label === '鍒嗘瀽') { + // 鍏抽棴寮圭獥 + window.mapManager.clickDialogSwitch = false + } else { + // 鎵撳紑寮圭獥 + window.mapManager.clickDialogSwitch = true + } + }, + // 鏍规嵁杩斿洖鏁版嵁 纭灞曠ず鍥剧墖 getImgSrc () { const icon = this.form.dataType.icon return icon ? 'assets/images/map/' + icon : '' }, - handleClick (tab, event) { - console.log(tab, event) - }, + // 椤甸潰鍒囨崲 鍒嗛〉鍔熻兘 handlePage (page) { this.wfsHelper.setPage(page) this.handleSearch() @@ -132,7 +155,6 @@ // 璁炬柦绫诲瀷绛涢�� handlePipelineType (val) { this.list = [] - // debugger for (let i = 0; i < this.items.length; i++) { const item = this.items[i] if (val === item.name) { @@ -141,32 +163,42 @@ } } }, + // 浜岀骇form琛ㄥ崟鍒囨崲閫夋嫨娓呯┖宸查�夋嫨鏁版嵁 handleDataType () { this.list = [] }, + // 鎼滅储鍔熻兘 async handleSearch () { // console.log(this.form.dataType.sname, this.form.keyword) this.list = [] this.wfsHelper.clearFilter() // todo 鐜板湪绠$綉杩樻病鍖哄垎寮�绫诲瀷锛屽悗闈㈡敼 - this.wfsHelper.setTypeName([this.form.dataType.typeName]) + this.wfsHelper.setTypeName(['sewer:view_pipeline']) if (this.form.keyword) { this.wfsHelper.addLike('name', this.form.keyword) } + this.wfsHelper.addEquals('type', '\'' + this.form.dataType.sname + '\'') + // const filter = this.form.dataType.filter + // if (filter) { + // this.wfsHelper.setFilter(filter) + // } // const _this = this const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {}) if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) { this.total = res.totalFeatures this.list = res.features } + this.wfsHelper = new WfsHelper() }, + // 鐐瑰嚮鎼滅储鍒扮殑鏁版嵁 瀹炵幇鍔熻兘 = 瀹氫綅 楂樹寒 寮规 handleLocation (val, index) { - console.log(val) // console.log(val) this.activeNum = index // layer && layer.openPopup() - window.layerFactory.flyByFeature(val, this.form.dataType.code) + const config = this.form.dataType + locate(val, config) }, + // 闄勫睘璁炬柦鍔熻兘缁勪欢 btnAffiliatedFacilities (val, index) { this.activeNum = index this.facilitiesParameter = val @@ -176,11 +208,9 @@ } else { this.fuShuSheShiShow = false } - window.layerFactory.flyByFeature(val, this.form.dataType.code) + fitBounds(val, this.form.dataType.code) + highlight(val) } - }, - mounted () { - this.wfsHelper = new WfsHelper() } } </script> diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue index 1588a23..feb70b0 100644 --- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue +++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue @@ -1,94 +1,290 @@ <template> - <div class="connectivity"> - <el-row> - <el-button type="primary" size="mini" @click="linkClickStart" title="鍦板浘涓婄偣鍑婚�夋嫨闇�瑕佽繘琛岃繛閫氬垎鏋愮殑绠℃">璧峰绠℃</el-button> - <el-button type="primary" size="mini" @click="linkClickEnd" title="鍦板浘涓婄偣鍑讳笌鎵�閫夌娈佃繛閫氱娈�">缁撴潫绠℃</el-button> - <el-button type="primary" size="mini" @click="linkQuery" title="鏍规嵁璧峰銆佺粨鏉熺娈佃繘琛岃繛閫氭�у垎鏋�">杩為�氭�у垎鏋�</el-button> - <el-button type="primary" size="mini" @click="linkClear" title="鏍规嵁璧峰銆佺粨鏉熺娈佃繘琛岃繛閫氭�у垎鏋�">娓呴櫎</el-button> - </el-row> - <el-card class="box-card"> - <el-scrollbar style="height:2rem"> - <span class="clearfix">璧峰绠℃</span> - <el-table ref="singleTable" highlight-current-row :data="startingSection" max-height="200" style="width: 100%" size="mini"> - <el-table-column prop="lineloopna" label="绠$嚎绫诲瀷"></el-table-column> - <el-table-column sortable prop="pipecode" label="绠$嚎鍚嶇О"></el-table-column> - <el-table-column sortable prop="startpoint" label="璧风偣缂栧彿"></el-table-column> - <el-table-column sortable prop="endpointnu" label="缁堢偣缂栧彿"></el-table-column> - <el-table-column class-name="fixed-tablea" fixed="right" label="鎿嶄綔"> - <template slot-scope="scope"> - <el-button @click="linkSelectStart(scope.row)" type="text" size="small">閫夋嫨</el-button> - </template> - </el-table-column> + <div class="connectivity"> + <el-row> + <el-button type="primary" @click="linkClickStart" size="mini" title="鍦板浘涓婄偣鍑婚�夋嫨闇�瑕佽繘琛岃繛閫氬垎鏋愮殑绠℃">璧峰绠℃ + </el-button> + <el-button type="primary" @click="linkClickEnd" size="mini" title="鍦板浘涓婄偣鍑讳笌鎵�閫夌娈佃繛閫氱娈�">缁撴潫绠℃</el-button> + <el-button type="primary" @click="linkQuery" size="mini" title="鏍规嵁璧峰銆佺粨鏉熺娈佃繘琛岃繛閫氭�у垎鏋�">杩為�氭�у垎鏋�</el-button> + <el-button type="primary" @click="handleClick" size="mini" title="鏍规嵁璧峰銆佺粨鏉熺娈佃繘琛岃繛閫氭�у垎鏋�">娓呴櫎</el-button> + </el-row> + <span class="fixed-style">璧峰绠℃</span> + <el-table class="tableBox" height="100" max-height="200" :data="tableDataLinkStart" + highlight-current-row style="width: 100%" size="mini"> + <el-table-column prop="datasource" label="绠℃绫诲瀷"></el-table-column> + <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" + label="绠℃鍚嶇О"></el-table-column> + <el-table-column sortable width="100" prop="material" label="璧风偣缂栧彿"></el-table-column> + <el-table-column sortable width="100" prop="material" label="缁堢偣缂栧彿"></el-table-column> + <el-table-column width="40" fixed="right" class-name="fixed-table" label="鎿嶄綔"> + <template slot-scope="scope"> + <el-button @click="linkSelectStart(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" height="100" max-height="200" highlight-current-row :data="tableDataLinkEnd" + @row-click="linkSelectEnd" style="width: 100%" size="mini"> + <el-table-column prop="datasource" label="绠℃绫诲瀷"></el-table-column> + <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" + label="绠℃鍚嶇О"></el-table-column> + <el-table-column sortable width="100" prop="material" label="璧风偣缂栧彿"></el-table-column> + <el-table-column sortable width="100" prop="material" label="缁堢偣缂栧彿"></el-table-column> + <el-table-column class-name="fixed-table" fixed="right" label="鎿嶄綔" width="40"> + <template slot-scope="scope"> + <el-button @click="linkSelectEnd(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 style="color: red;margin-left: 15px">{{ currentLinkIsTrue }}</span></span> + <el-table class="tableBox" highlight-current-row max-height="200" :data="tableDataLinkResult" + style="width: 100%" size="mini"> + <el-table-column prop="material" label="绠℃绫诲瀷"></el-table-column> + <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" + label="绠℃鍚嶇О"></el-table-column> + <el-table-column sortable width="100" prop="material" label="璧风偣缂栧彿"></el-table-column> + <el-table-column sortable width="100" prop="material" 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> + </div> </template> <script> +import mapApi from '../../../../../api/mapApi' +import eventBus from '../../../../../eventBus' +import { createFlowLine } from './PublicWay' + export default { name: 'Connectivity', + props: ['tableData'], data () { return { - // 杩為�氭�� - linkType: 1, // 1 杩為�氭�ц捣濮嬬娈� 0 杩為�氭�х粨鏉熺娈� 鐢ㄦ潵鍒ゆ柇鏄偣鍑讳簡璧峰 杩樻槸缁撴潫绠℃ - map: window.map, - tableData: [], - startingSection: [] + // 杩為�氭�� // 1 杩為�氭�ц捣濮嬬娈� 0 杩為�氭�х粨鏉熺娈� 鐢ㄦ潵鍒ゆ柇鏄偣鍑讳簡璧峰 杩樻槸缁撴潫绠℃ + linkType: 1, + // 杩為�氭�� 璧峰绠℃ 琛ㄦ牸鏁版嵁 + tableDataLinkStart: [], + // 杩為�氭�� 缁撴潫绠℃ 琛ㄦ牸鏁版嵁 + tableDataLinkEnd: [], + // 杩為�氭�� 鍒嗘瀽缁撴灉 灞曠ず => 杩為�� || 涓嶈繛閫� + currentLinkIsTrue: '', + // 杩為�氭�� 鍒嗘瀽缁撴灉 琛ㄦ牸鏁版嵁 + tableDataLinkResult: [], + linkPipeline: [], + currentSelectStart: null, + currentSelectEnd: null, + currentSelectStartLine: null, + currentSelectEndLine: null, + currentSelectResultLine: null, + flowPipeLine: null } }, + mounted () { + this.$nextTick(() => { + eventBus.$on('tabData-change', (obj) => { + if (obj) { + this.handleClick() + } + }) + }) + }, methods: { - // 娴佸悜鍦板浘涓婄偣鍑� + // 鍦板浘涓婄偣鍑� selectPipeLine () { - this.map.on('click', this.selectClick) + window.map.on('click', this.selectClick) + // 鍏抽棴寮圭獥 + window.layerFactory.clickSwitch = false }, // 鍦板浘涓婄偣鍑诲洖璋� selectClick (e) { - this.map.off('click', this.selectClick) + window.map.off('click', this.selectClick) const point = [e.latlng.lng, e.latlng.lat] - console.log(point) - // 鏍规嵁鏁版嵁杩涜鏁版嵁璇锋眰 - // this.getPipeLine(point) + this.getPipeLine(point) }, - // 鏁版嵁璇锋眰 + // 鐐瑰嚮鑾峰彇鍒ゆ柇鏁版嵁 async getPipeLine (point) { const param = { x: point[0], y: point[1], radius: 3 } - console.log(param) - // const res = await api.getPipeline(param) + // 鏍规嵁鍙傛暟璇锋眰鎺ュ彛鏁版嵁 + const res = await mapApi.findPipelineByClickPoint(param) // console.log(res) - // this.startingSection = res.data + if (this.linkType === 1) { + this.tableDataLinkStart = res.data + } else { + this.tableDataLinkEnd = res.data + } + }, + // 杩為�氭�� ===> 鍦板浘鐐瑰嚮璧峰绠℃e + linkClickStart (e) { + // console.log('鍦板浘鐐瑰嚮璧峰绠℃') + this.linkType = 1 + this.selectPipeLine() + }, + // 杩為�氭�� 璧峰绠℃ table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠� + linkSelectStart (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 { + weight: 10, + color: 'rgba(0,255,0,.6)' + } + } + }).addTo(window.map) + window.map.panInsideBounds(this.currentSelectStartLine.getBounds()) + }, + // 杩為�氭�� ===> 鍦板浘鐐瑰嚮缁撴潫绠℃ + linkClickEnd () { + // console.log('鍦板浘鐐瑰嚮缁撴潫绠℃') + this.linkType = 0 + this.selectPipeLine() + }, + // 杩為�氭�� 缁撴潫绠℃ table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠� + linkSelectEnd (e) { + // console.log('閫夋嫨缁撴潫绠℃') + this.currentSelectEnd = e + + // 鍋氬垽鏂璻emove + if (this.currentSelectEndLine != null) { + this.currentSelectEndLine.remove() + this.currentSelectEndLine = null + } + // geoGson + const geom = JSON.parse(e.geomText) + this.currentSelectEndLine = window.L.geoJSON(geom, { + style: function (feature) { + return { + weight: 10, + color: 'rgba(255, 247, 0, 0.7)' + } + } + }).addTo(window.map) + window.map.panInsideBounds(this.currentSelectEndLine.getBounds()) + }, + // 杩為�氭�ф煡璇� 缁撴灉 + async linkQuery () { + // 姣忔鏌ヨ鍒嗘瀽缁撴灉鍒剁┖ + this.tableDataLinkResult = [] + if (this.linkPipeline.length > 1) { + this.linkPipeline.forEach((itm) => { + itm.remove() + }) + this.linkPipeline = [] + } + // 鍒ゆ柇 濡傛灉璧峰绠℃ 缁撴潫绠℃娌℃湁鏁版嵁 鍒欒繑鍥瀎alse 鎻愮ず杩樻湭閫夋嫨璧峰/缁撴潫绠℃ + if (this.currentSelectStart === null || this.currentSelectEnd === null) { + this.$message('璇烽�夋嫨璧峰绠℃鍜岀粨鏉熺娈�') + return false + } + + // 璇锋眰鏁版嵁鏃剁殑鍙傛暟 + const param = { + startLineID: this.currentSelectStart.pipesegcode, + endLineID: this.currentSelectEnd.pipesegcode + } + // console.log(param) + // 璇锋眰鎺ュ彛鍜屾暟鎹� + const res = await mapApi.findConnectedPipelines(param) + // console.log(res) + // 鍒ゆ柇鏁版嵁缁撴灉 === 0 鍒欐病鏈夎姹傚埌鏁版嵁 + if (res.data.length === 0) { + this.$message('娌℃湁鎵惧埌杩為�氱殑绠℃') + // 杩涜鍒ゆ柇 + this.currentLinkIsTrue = '涓嶈繛閫�' + return + } + this.tableDataLinkResult = res.data + this.currentLinkIsTrue = '杩為��' + // table 鏁扮粍鏁版嵁缃┖ + const linkPipe = [] + // 鏁版嵁閬嶅巻geoJson + 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) + }) + }, + // 瀹氫綅鏂规硶浜嬩欢 + 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()) + }, + // 杩為�氭�х殑娓呴櫎鍔熻兘 + 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 + } + }, + handleClick () { + this.linkClear() + this.currentLinkIsTrue = '' + this.tableDataLinkStart = [] + this.tableDataLinkEnd = [] + this.tableDataLinkResult = [] + if (this.flowPipeLine != null) { + this.flowPipeLine.remove() + this.flowPipeLine = null + } + if (this.linkPipeline.length > 0) { + this.linkPipeline.forEach((itm, idx) => { + itm.remove() + }) + } + this.linkPipeline = [] } } } </script> <style lang="less" scoped> -/deep/ .fixed-tablea { - background: rgba(0, 16, 30, 1) !important; -} - -/deep/ .el-table__fixed-right::before { - background: none; -} </style> diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue index f6c0928..a0c7fce 100644 --- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue +++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue @@ -1,66 +1,203 @@ <template> - <div class="connectivity"> - <el-row> - <el-button type="primary" size="mini">缁樺埗绾挎</el-button> - <el-button type="primary" size="mini">鎴柇闈㈠垎鏋�</el-button> - <el-button type="primary" size="mini">娓呴櫎</el-button> - </el-row> - <el-card class="box-card"> - <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> - </el-table> - <span class="clearfix">鏂潰鍥�</span> - <div class="cross-section"> - <span>鏆傛棤鏁版嵁</span> - </div> - </el-card> - </div> + <div class="connectivity"> + <el-row> + <el-button type="primary" @click="drawLine" size="mini" title="鍦板浘涓婄粯鍒惰杩涜鍒嗘瀽鎴柇闈㈢殑绾�">缁樺埗绾挎</el-button> + <el-button type="primary" @click="jdmQuery" size="mini" title="鎴柇闈㈠垎鏋�">鎴柇闈㈠垎鏋�</el-button> + <el-button type="primary" @click="jdmClear" size="mini" title="娓呴櫎鎴柇闈㈠垎鏋愮粨鏋�">娓呴櫎</el-button> + </el-row> + <div slot="header" class="fixed-style"> + <span>绠℃鏌ヨ缁撴灉</span> + </div> + <el-table class="tableBox" :data="tableData" height="150" max-height="200" highlight-current-row style="width: 100%" size="mini"> + <el-table-column prop="mediumtype" label="浠嬭川绫诲瀷" :show-overflow-tooltip="true"></el-table-column> + <el-table-column prop="x" label="鏂潰(缁忓害)" :show-overflow-tooltip="true" width="80"></el-table-column> + <el-table-column prop="y" label="鏂潰(绾害)" :show-overflow-tooltip="true" width="80"></el-table-column> + <el-table-column prop="z" label="鏂潰楂樼▼(m)" :show-overflow-tooltip="true" width="80"></el-table-column> + <el-table-column prop="spacing" label="闂磋窛(m)" width="80"></el-table-column> + </el-table> + <span class="fixed-style">鏂潰鍥�</span> + <span v-show="!myChartShow" style="color: #909399;font-size: 12px;height: 200px;display: block;text-align: center;line-height: 200px">鏆傛棤鏁版嵁</span> + <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width:350px;height:200px;margin: 0 auto"></div> + </div> </template> <script> +import eventBus from '../../../../../eventBus' +import mapApi from '../../../../../api/mapApi' +import DrawLine from '../../../../plugin/DrawLine' + export default { name: 'CrossSectional', data () { return { - tableData: [] + measure: null, + myChart: null, + options: [], + echartsList: [], + myChartShow: false, + linkPipeline: [], + // 妯柇闈� 绠℃鏌ヨ缁撴灉 鐨則able琛ㄦ牸鏁版嵁 + tableData: [], + hdmParam: null + } + }, + mounted () { + // 鍒濆鍖杄charts鍥捐〃 + this.myChart = this.$echarts.init(this.$refs.myChart) + // 浣跨敤 DrwLine鏂规硶 + eventBus.$on('draw-hdm-line', (points) => { + this.getHdmPoint(points) + }) + this.$nextTick(() => { + eventBus.$on('tabData-change', (obj) => { + if (obj) { + this.jdmClear() + } + }) + }) + }, + methods: { + // 妯柇闈� 绾挎缁樺埗 + drawLine () { + if (this.measure === null) { + this.measure = new DrawLine(window.map) + } + this.measure.destory() + this.measure.init() + }, + // 缁樺埗鐨勬í鏂潰 绾挎鏁版嵁鑾峰彇 + async getHdmPoint (line) { + // 妯柇闈㈡暟鎹� + this.hdmParam = { + x1: line[0].lng, + y1: line[0].lat, + x2: line[1].lng, + y2: line[1].lat + } + }, + // 妯柇闈� 鏁版嵁璇锋眰 + async jdmQuery () { + this.tableData = [] + if (this.hdmParam == null) { + this.$message('璇峰厛鍦ㄥ湴鍥句笂缁樺埗鎴柇绾�') + return false + } + // 宸茬粯鍒剁嚎鍥� 杩涜缁樺埗妯柇闈㈡暟鎹垎鏋� + const res = await mapApi.getCrossSection(this.hdmParam) + // 璋冪敤鏁版嵁澶勭悊鏂规硶 + this.dealWithData(res) + // table鏁版嵁澶勭悊 + const dataPoint = res.data.point + // 瀛樺偍闂磋窛list + const spacingList = res.data.pointInterval.reverse() + for (let i = 0; i < dataPoint.length; i++) { + const obj = { + mediumtype: dataPoint[i].pipelines.extraData.mediumtype, + x: parseFloat(dataPoint[i].crossPoint3D.x).toFixed(8), + y: parseFloat(dataPoint[i].crossPoint3D.y).toFixed(8), + z: parseFloat(dataPoint[i].crossPoint3D.z).toFixed(2), + spacing: spacingList[i - 1] + } + this.tableData.push(obj) + } + }, + // 瀵硅幏鍙栧埌鐨勬暟鎹繘琛屽鐞� + dealWithData (e) { + console.log(e) + }, + // 妯柇闈㈢粯鍒跺畬鎴愬悗 杩涜妯柇闈㈡暟鎹垎鏋� 杩涜鍥捐〃灞曠ず + selectRow (dataList) { + // console.log(dataList) + // 3. 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁锛屾樉绀哄浘琛� + this.option = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + backgroundColor: '#6a7985' + } + } + }, + // legend: { + // // data: ['鐩存帴璁块棶', '鎼滅储寮曟搸'] + // data: dataList + // }, + toolbox: { + show: false, + feature: { + saveAsImage: {} + } + }, + grid: { + left: '10px', + right: '0', + top: '10px', + bottom: '5px', + containLabel: true + }, + xAxis: [ + { + type: 'category', + boundaryGap: false, + axisLabel: { + // formatter: '{value}', + textStyle: { + color: '#fff' + } + } + // data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩'] + // data: dataList + } + ], + yAxis: [ + { + type: 'value', + axisLabel: { + // formatter: '{value}', + textStyle: { + color: '#fff' + } + } + } + ], + // series: [ + // { + // name: '鎼滅储寮曟搸', + // type: 'line', + // stack: '鎬婚噺', + // label: { + // show: true, + // position: 'top' + // }, + // areaStyle: {}, + // emphasis: { + // focus: 'series' + // }, + // data: [820, 932, 901, 934, 1290, 1330, 1320] + // } + // ] + series: this.echartsList + } + this.myChartShow = true + this.myChart.clear() + this.myChart.setOption(this.option) + }, + // 妯柇闈㈡竻闄� + jdmClear () { + this.hdmParam = null + this.tableData = [] + this.option = [] + this.myChartShow = false + this.myChart.clear() + if (this.measure != null) { + this.measure.destory() + } } } } </script> <style lang="less" scoped> -.cross-section { - background: rgba(0, 16, 30, 0.5); - border: 0.00521rem solid @color; - box-shadow: 0 0 0.03rem @color; - color: #ffffff; - width: 100%; - height: 50px; - border-radius: 3px; - text-align: center; - line-height: 50px; -} + </style> diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow.vue index c221866..aead8c4 100644 --- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow.vue +++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow.vue @@ -1,70 +1,208 @@ <template> - <div class="connectivity"> - <el-row> - <el-button type="primary" size="mini">閫夋嫨绠℃</el-button> - </el-row> - <el-card class="box-card"> - <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> - </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> - </el-table> - </el-card> - </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' +import eventBus from '../../../../../eventBus' + export default { name: 'Flow', data () { return { - tableData: [] + // 娴佸悜 閫夋嫨鐨勭娈� 鐨則able琛ㄦ牸鏁版嵁 + tableDataLiuxiang: [], + // 娴佸悜 鍒嗘瀽缁撴灉 鐨則able琛ㄦ牸鏁版嵁 + lxTableDataResult: [], + linkPipeline: [], + currentSelectResultLine: null + } + }, + mounted () { + this.$nextTick(() => { + eventBus.$on('tabData-change', (obj) => { + if (obj) { + this.handleClick() + } + }) + }) + }, + methods: { + // tab鍒囨崲 + handleClick () { + this.clearLX() + this.linkClear() + this.tableDataLiuxiang = [] + this.tableDataLinkStart = [] + this.tableDataLinkEnd = [] + this.tableDataLinkResult = [] + this.lxTableDataResult = [] + }, + 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 + } + }, + // 瀹氫綅鏂规硶浜嬩欢 + 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 + } + if (this.currentSelectResultLine != null) { + this.currentSelectResultLine.remove() + this.currentSelectResultLine = null + } } } } diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js index b55c90a..81573d0 100644 --- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js +++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js @@ -1,5 +1,16 @@ -export default { - clickPopup () { - console.log('鍏叡鏂规硶') +export function selectPipeLine () { + window.map.on('click', this.selectClick) +} + +export function createFlowLine (param) { + const flowLine = window.L.polyline(param.points, param.option) + flowLine.addTo(window.map) + return flowLine +} + +export function linkClear (linkClear) { + if (this.linkClear != null) { + this.linkClear.remove() + this.linkClear = null } } diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue index c1deb22..11ae76b 100644 --- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue +++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue @@ -1,99 +1,248 @@ <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) => { + 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) + }) + }, + 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> diff --git a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue index 9b9785b..dba9bd3 100644 --- a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue +++ b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue @@ -1,839 +1,48 @@ <template> <div class="sewers-analysis-tab"> - <!--<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-row> - <el-button type="primary" @click="linkClickStart" size="mini" title="鍦板浘涓婄偣鍑婚�夋嫨闇�瑕佽繘琛岃繛閫氬垎鏋愮殑绠℃">璧峰绠℃ - </el-button> - <el-button type="primary" @click="linkClickEnd" size="mini" title="鍦板浘涓婄偣鍑讳笌鎵�閫夌娈佃繛閫氱娈�">缁撴潫绠℃</el-button> - <el-button type="primary" @click="linkQuery" size="mini" title="鏍规嵁璧峰銆佺粨鏉熺娈佃繘琛岃繛閫氭�у垎鏋�">杩為�氭�у垎鏋�</el-button> - <el-button type="primary" @click="handleClick" size="mini" title="鏍规嵁璧峰銆佺粨鏉熺娈佃繘琛岃繛閫氭�у垎鏋�">娓呴櫎</el-button> - </el-row> - <!-- <el-scrollbar style="height:450px">--> - <!-- <el-card shadow="hover">--> - <span class="fixed-style">璧峰绠℃</span> - <el-table class="tableBox" height="100" max-height="200" :data="tableDataLinkStart" - highlight-current-row style="width: 100%" size="mini"> - <el-table-column prop="datasource" label="绠℃绫诲瀷"></el-table-column> - <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" - label="绠℃鍚嶇О"></el-table-column> - <el-table-column sortable width="100" prop="material" label="璧风偣缂栧彿"></el-table-column> - <el-table-column sortable width="100" prop="material" label="缁堢偣缂栧彿"></el-table-column> - <el-table-column width="40" fixed="right" class-name="fixed-table" label="鎿嶄綔"> - <template slot-scope="scope"> - <el-button @click="linkSelectStart(scope.row)" type="text" size="small">閫夋嫨</el-button> - </template> - </el-table-column> - </el-table> - <span class="fixed-style">缁撴潫绠℃</span> - <el-table class="tableBox" height="100" max-height="200" highlight-current-row :data="tableDataLinkEnd" - @row-click="linkSelectEnd" style="width: 100%" size="mini"> - <el-table-column prop="datasource" label="绠℃绫诲瀷"></el-table-column> - <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" - label="绠℃鍚嶇О"></el-table-column> - <el-table-column sortable width="100" prop="material" label="璧风偣缂栧彿"></el-table-column> - <el-table-column sortable width="100" prop="material" label="缁堢偣缂栧彿"></el-table-column> - <el-table-column class-name="fixed-table" fixed="right" label="鎿嶄綔" width="40"> - <template slot-scope="scope"> - <el-button @click="linkSelectEnd(scope.row)" type="text" size="small">閫夋嫨</el-button> - </template> - </el-table-column> - </el-table> - <span class="fixed-style">鍒嗘瀽缁撴灉:<span style="color: red;margin-left: 15px">{{ currentLinkIsTrue }}</span></span> - <el-table class="tableBox" highlight-current-row max-height="200" :data="tableDataLinkResult" - style="width: 100%" size="mini"> - <el-table-column prop="material" label="绠℃绫诲瀷"></el-table-column> - <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" - label="绠℃鍚嶇О"></el-table-column> - <el-table-column sortable width="100" prop="material" label="璧风偣缂栧彿"></el-table-column> - <el-table-column sortable width="100" prop="material" 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-card>--> - <!--</el-scrollbar>--> + <Connectivity></Connectivity> </el-tab-pane> <el-tab-pane label="鐖嗙" style="color: #cccccc" name="second"> - <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="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-card>--> + <Tube></Tube> </el-tab-pane> <el-tab-pane label="娴佸悜" name="third"> - <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> + <Flow></Flow> </el-tab-pane> <el-tab-pane label="妯柇闈�" name="fourth"> - <el-row> - <el-button type="primary" @click="drawLine" size="mini" title="鍦板浘涓婄粯鍒惰杩涜鍒嗘瀽鎴柇闈㈢殑绾�">缁樺埗绾挎</el-button> - <el-button type="primary" @click="jdmQuery" size="mini" title="鎴柇闈㈠垎鏋�">鎴柇闈㈠垎鏋�</el-button> - <el-button type="primary" @click="jdmClear" size="mini" title="娓呴櫎鎴柇闈㈠垎鏋愮粨鏋�">娓呴櫎</el-button> - </el-row> - <!-- <el-card class="box-card">--> - <div slot="header" class="fixed-style"> - <span>绠℃鏌ヨ缁撴灉</span> - </div> - <el-table class="tableBox" :data="tableData" height="150" max-height="200" highlight-current-row - style="width: 100%" @row-click="selectRow" size="mini"> - <el-table-column prop="pipename" label="绠℃鍚嶇О"></el-table-column> - <el-table-column prop="mediumtype" label="绠℃绫诲瀷" width="80"></el-table-column> - <el-table-column class-name="fixed-table" fixed="right" label="鍥捐〃" width="40"> - <template slot-scope="scope"> - <el-button @click="selectRow(scope.row)" type="text" size="small">鏌ョ湅</el-button> - </template> - </el-table-column> - </el-table> - <!-- </el-card>--> - <!-- <el-card class="box-card"> - <div slot="header" class="fixed-style"> - <span>鏂潰鍥�</span> - </div> - <span v-show="!myChartShow" style="color: #909399;font-size: 12px;">鏆傛棤鏁版嵁</span> - <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width: 350px;height:200px;"></div> - </el-card> --> - <span class="fixed-style">鏂潰鍥�</span> - <span v-show="!myChartShow" - style="color: #909399;font-size: 12px;height: 200px;display: block;text-align: center;line-height: 200px">鏆傛棤鏁版嵁</span> - <div v-show="myChartShow" id="echarts_box" ref="myChart" - style="width:350px;height:200px;margin: 0 auto"></div><!-- v-show="myChartShow" --> + <CrossSectional></CrossSectional> </el-tab-pane> </el-tabs> - <!--</el-card>--> - <!--</transition>--> </div> </template> <script> - +import Connectivity from './AnalysisChoose/Connectivity' +import Tube from './AnalysisChoose/Tube' +import Flow from './AnalysisChoose/Flow' +import CrossSectional from './AnalysisChoose/CrossSectional' import eventBus from '../../../../eventBus' -import DrawLine from './AnalysisChoose/DrawLine' -import mapApi from '../../../../api/mapApi' -import { pulseEffect } from '../../../../utils/utils' -// import iconUrl from '../../../../assets/images/other.png' export default { name: 'SewersAnalysis', + components: { + Connectivity, + Tube, + Flow, + CrossSectional + }, data () { return { // 鍦板浘鐐瑰嚮绫诲瀷 first杩為�氭�х偣鍑� second鐖嗙鐐瑰嚮 third娴佸悜鐐瑰嚮 fourth妯柇闈� activeName: 'first', - measure: null, - map: window.map, - - myChart: null, - options: [], - echartsList: [], - myChartShow: false, - - flowPipeLine: null, - - // 鐢ㄤ簬鍒ゆ柇 - currentSelectStart: null, - currentSelectEnd: null, - currentSelectStartLine: null, - currentSelectEndLine: null, - currentSelectResultLine: null, - currentResultLine: null, - - linkPipeline: [], - - bgPoint: null, - bgMarker: null, - hdmParam: null, - - // 杩為�氭�� // 1 杩為�氭�ц捣濮嬬娈� 0 杩為�氭�х粨鏉熺娈� 鐢ㄦ潵鍒ゆ柇鏄偣鍑讳簡璧峰 杩樻槸缁撴潫绠℃ - linkType: 1, - // 杩為�氭�� 璧峰绠℃ 琛ㄦ牸鏁版嵁 - tableDataLinkStart: [], - // 杩為�氭�� 缁撴潫绠℃ 琛ㄦ牸鏁版嵁 - tableDataLinkEnd: [], - // 杩為�氭�� 鍒嗘瀽缁撴灉 灞曠ず => 杩為�� || 涓嶈繛閫� - currentLinkIsTrue: '', - // 杩為�氭�� 鍒嗘瀽缁撴灉 琛ㄦ牸鏁版嵁 - tableDataLinkResult: [], - - // 鐖嗙 鍙戠敓鐖嗚鐨勭娈� table琛ㄦ牸鏁版嵁 - bgPipeLine: [], - // 鐖嗙 闇�瑕佸叧闂殑闃�闂� table琛ㄦ牸鏁版嵁 - bgFm: [], - - // 娴佸悜 閫夋嫨鐨勭娈� 鐨則able琛ㄦ牸鏁版嵁 - tableDataLiuxiang: [], - // 娴佸悜 鍒嗘瀽缁撴灉 鐨則able琛ㄦ牸鏁版嵁 - lxTableDataResult: [], - - // 妯柇闈� 绠℃鏌ヨ缁撴灉 鐨則able琛ㄦ牸鏁版嵁 - tableData: [] - + tableData: false } - }, - mounted () { - // 鍒濆鍖杄charts鍥捐〃 - this.myChart = this.$echarts.init(this.$refs.myChart) - // 浣跨敤 DrwLine鏂规硶 - eventBus.$on('draw-hdm-line', (points) => { - this.getHdmPoint(points) - }) }, 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 = [] - }, - - // 鍦板浘涓婄偣鍑� - 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) - if (this.activeName === 'first') { - if (this.linkType === 1) { - 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') { - } - }, - // 娴佸悜鏄剧ず 鐨勬柟娉曞弬鏁板皝 - createFlowLine (param) { - const flowLine = window.L.polyline(param.points, param.option) - flowLine.addTo(window.map) - return flowLine - }, - createFlowMarker (point) { - return window.L.marker(point, { - icon: window.L.divIcon({ - className: 'dIcon', - html: '<div class="plane live">' + - // '<img src="'+require("../../assets/images/map/ship.png")+ - '<div style="position: absolute;' + - ' width: 20px;' + - ' height: 20px;' + - ' border-radius: 50%;' + - ' content: \'\'; background-color: #FF664A;"/>' + - '<span></span><span></span></div></>', - iconSize: [90, 36] - }) - }) - }, - - // 杩為�氭�� ===> 鍦板浘鐐瑰嚮璧峰绠℃e - linkClickStart (e) { - // console.log('鍦板浘鐐瑰嚮璧峰绠℃') - this.linkType = 1 - this.selectPipeLine() - }, - // 杩為�氭�� 璧峰绠℃ table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠� - linkSelectStart (e) { - // console.log(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 { - weight: 10, - color: 'rgba(0,255,0,.6)' - } - } - }).addTo(window.map) - window.map.panInsideBounds(this.currentSelectStartLine.getBounds()) - }, - // 杩為�氭�� ===> 鍦板浘鐐瑰嚮缁撴潫绠℃ - linkClickEnd () { - // console.log('鍦板浘鐐瑰嚮缁撴潫绠℃') - this.linkType = 0 - this.selectPipeLine() - }, - // 杩為�氭�� 缁撴潫绠℃ table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠� - linkSelectEnd (e) { - // console.log('閫夋嫨缁撴潫绠℃') - this.currentSelectEnd = e - - // 鍋氬垽鏂璻emove - if (this.currentSelectEndLine != null) { - this.currentSelectEndLine.remove() - this.currentSelectEndLine = null - } - // geoGson - const geom = JSON.parse(e.geomText) - this.currentSelectEndLine = window.L.geoJSON(geom, { - style: function (feature) { - return { - weight: 10, - color: 'rgba(255, 247, 0, 0.7)' - } - } - }).addTo(window.map) - window.map.panInsideBounds(this.currentSelectEndLine.getBounds()) - }, - // 杩為�氭�ф煡璇� 缁撴灉 - async linkQuery () { - // 姣忔鏌ヨ鍒嗘瀽缁撴灉鍒剁┖ - this.tableDataLinkResult = [] - if (this.linkPipeline.length > 1) { - this.linkPipeline.forEach((itm) => { - itm.remove() - }) - this.linkPipeline = [] - } - // 鍒ゆ柇 濡傛灉璧峰绠℃ 缁撴潫绠℃娌℃湁鏁版嵁 鍒欒繑鍥瀎alse 鎻愮ず杩樻湭閫夋嫨璧峰/缁撴潫绠℃ - if (this.currentSelectStart === null || this.currentSelectEnd === null) { - this.$message('璇烽�夋嫨璧峰绠℃鍜岀粨鏉熺娈�') - return false - } - - // 璇锋眰鏁版嵁鏃剁殑鍙傛暟 - const param = { - startLineID: this.currentSelectStart.pipesegcode, - endLineID: this.currentSelectEnd.pipesegcode - } - console.log(param) - // 璇锋眰鎺ュ彛鍜屾暟鎹� - const res = await mapApi.findConnectedPipelines(param) - // console.log(res) - // 鍒ゆ柇鏁版嵁缁撴灉 === 0 鍒欐病鏈夎姹傚埌鏁版嵁 - if (res.data.length === 0) { - this.$message('娌℃湁鎵惧埌杩為�氱殑绠℃') - // 杩涜鍒ゆ柇 - this.currentLinkIsTrue = '涓嶈繛閫�' - return - } - this.tableDataLinkResult = res.data - this.currentLinkIsTrue = '杩為��' - // table 鏁扮粍鏁版嵁缃┖ - const linkPipe = [] - // 鏁版嵁閬嶅巻geoJson - 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 = this.createFlowLine(param1) - 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 = 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()) - }, - // 杩為�氭�х殑娓呴櫎鍔熻兘 - 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 - } - if (this.bgMarker != null) { - this.bgMarker.remove() - this.bgMarker = null - } - }, - - // 鐖嗙 ===> 閫夋嫨绠℃ - bgClick () { - this.selectPipeLine() - }, - 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) => { - 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 = this.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] - // const marker = this.createFlowMarker(point) - pulseEffect(point) - // marker.addTo(window.map) - // window.map.flyTo(point, 17) - }, - - // 娴佸悜鍒嗘瀽缁撴灉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 = this.createFlowLine(param1) - this.linkPipeline.push(line) - }) - }, - // 娓呴櫎娴佸悜 - clearLX () { - if (this.flowPipeLine != null) { - this.flowPipeLine.remove() - this.flowPipeLine = null - } - }, - // 娴佸悜-绠℃閫夋嫨 - selectRowLiuXiang (e) { - // 閫夋嫨瑕佹樉绀虹殑娴佸悜绾� - // console.log('閫夋嫨瑕佹樉绀虹殑娴佸悜绾�') - // console.log(e) - }, - lxHandleClick (e) { - // console.log('姝f祦鍚戞樉绀�') - // console.log(e) - // - // // 娓呴櫎娴佸悜鏂规硶 - // this.clearLX() - // const param = { - // points: e.data, - // option: { - // dashArray: '15 15', - // dashSpeed: -30 - // } - // } - // this.flowPipeLine = this.createFlowLine(param) - }, - - // 娓呮鍒嗘瀽缁撴灉 - clearLinkPipe () { - if (this.linkPipeline.length > 0) { - this.linkPipeline.forEach((itm, idx) => { - itm.remove() - }) - } - this.linkPipeline = [] - }, - // 閫嗘祦鍚戞樉绀� - lxHandleClick2 (e) { - // console.log('閫嗘祦鍚戞樉绀�') - // console.log(e) - // if (this.flowPipeLine != null) { - // this.flowPipeLine.remove() - // this.flowPipeLine = null - // } - // const param = { - // points: e.data, - // option: { - // dashArray: '15 15', - // dashSpeed: 30 - // } - // } - // this.flowPipeLine = this.createFlowLine(param) - }, - // 妯柇闈㈢粯鍒剁嚎娈� - drawLine () { - // console.log('drawLine') - if (this.measure === null) { - this.measure = new DrawLine(window.map) - } - this.measure.destory() - this.measure.init() - }, - // 妯柇闈㈡暟鎹姹� - async getHdmPoint (line) { - // console.log('妯柇闈㈢殑缁樺埗绾�') - // console.table(line) - // 妯柇闈㈡暟鎹� - this.hdmParam = { - x1: line[0].lng, - y1: line[0].lat, - x2: line[1].lng, - y2: line[1].lat - } - }, - // 妯柇闈㈡暟鎹姹� - async jdmQuery () { - this.tableData = [] - if (this.hdmParam == null) { - this.$message('璇峰厛鍦ㄥ湴鍥句笂缁樺埗鎴柇绾�') - return false - } - // 宸茬粯鍒剁嚎鍥� 杩涜缁樺埗妯柇闈㈡暟鎹垎鏋� - const res = await mapApi.getCrossSection(this.hdmParam) - const dataPoint = res.data.point - for (let i = 0; i < dataPoint.length; i++) { - const obj = { - pipename: dataPoint[i].pipelines.extraData.pipename, - mediumtype: dataPoint[i].pipelines.extraData.mediumtype - } - this.tableData.push(obj) - } - // console.log(this.tableData, 'this.tableData') - this.dealWithData(res) - }, - dealWithData (e) { - const dataSeries = e.data.point - let tempData - const storeData = [] - const dataList = [] - this.echartsList = [] - for (let i = 0; i < dataSeries.length; i++) { - if (storeData.length === 0) { - storeData.push(name) - tempData = { - name: dataSeries[i].pipelines.oilPipeID, - data: e.data.pointInterval, - type: 'line' - } - this.echartsList.push(tempData) - } - dataList.push(dataSeries[i].pipelines.oilPipeID) - } - // console.log(dataList) - // const seriesList = e.data.pointInterval - // let seriesdata - // for (let i = 0; i < seriesList.length; i++) { - // console.log(seriesList[i]) - // } - // x鏁版嵁澶勭悊 - this.selectRow(dataList) - }, - // 妯柇闈㈢粯鍒跺畬鎴愬悗 杩涜妯柇闈㈡暟鎹垎鏋� 杩涜鍥捐〃灞曠ず - selectRow (dataList) { - // console.log(dataList) - // 3. 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁锛屾樉绀哄浘琛� - this.option = { - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'cross', - label: { - backgroundColor: '#6a7985' - } - } - }, - // legend: { - // // data: ['鐩存帴璁块棶', '鎼滅储寮曟搸'] - // data: dataList - // }, - toolbox: { - show: false, - feature: { - saveAsImage: {} - } - }, - grid: { - left: '10px', - right: '0', - top: '10px', - bottom: '5px', - containLabel: true - }, - xAxis: [ - { - type: 'category', - boundaryGap: false, - axisLabel: { - // formatter: '{value}', - textStyle: { - color: '#fff' - } - } - // data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩'] - // data: dataList - } - ], - yAxis: [ - { - type: 'value', - axisLabel: { - // formatter: '{value}', - textStyle: { - color: '#fff' - } - } - } - ], - // series: [ - // { - // name: '鎼滅储寮曟搸', - // type: 'line', - // stack: '鎬婚噺', - // label: { - // show: true, - // position: 'top' - // }, - // areaStyle: {}, - // emphasis: { - // focus: 'series' - // }, - // data: [820, 932, 901, 934, 1290, 1330, 1320] - // } - // ] - series: this.echartsList - } - this.myChartShow = true - this.myChart.clear() - this.myChart.setOption(this.option) - }, - // 妯柇闈㈡竻闄� - jdmClear () { - this.hdmParam = null - this.tableData = [] - this.option = [] - this.myChartShow = false - this.myChart.clear() - if (this.measure != null) { - this.measure.destory() - } + handleClick () { + eventBus.$emit('tabData-change', true) } } } diff --git a/src/components/panel/topicSearch/SolidWasteSearch.vue b/src/components/panel/topicSearch/SolidWasteSearch.vue index e536771..deb1d88 100644 --- a/src/components/panel/topicSearch/SolidWasteSearch.vue +++ b/src/components/panel/topicSearch/SolidWasteSearch.vue @@ -3,16 +3,25 @@ <div class="panel-title">{{ title }}</div> <div class="search-panel "> <el-form ref="form" :model="form" label-width="90px" class="search-form"> - <el-form-item v-for="(item,index) in solidWasteTypeOptions" :key="index" :label="item.label+'锛�'" - size="mini" - class="search-panel-item"> + <el-form-item label="璁炬柦绫诲瀷锛�" size="mini" class="search-panel-item"> <el-select style="width: 100%" v-model="form.pipelineType" @change="handlePipelineType" :popper-class="'select-down'"> <el-option - v-for="item in solidWasteTypeOptions.labelList" - :key="item.value" - :label="item.label" - :value="item.value"> + v-for="item in items" + :key="item.code" + :label="item.name" + :value="item.name"> + </el-option> + </el-select> + </el-form-item> + <el-form-item :label="form.pipelineType+'锛�'" size="mini"> + <el-select style="width: 100%" v-model="form.dataType" value-key="code" + :popper-class="'select-down'" @change="handleDataType"> + <el-option + v-for="item in subItems" + :key="item.code" + :label="item.name" + :value="item"> </el-option> </el-select> </el-form-item> @@ -28,9 +37,8 @@ </el-form> </div> <el-scrollbar style="height:286.22px"> - <div class="environmental-risk-list" v-for="(item,index) in searchDataDisplay" :key="index" - @click="setBounced(item)"> - <!-- <i class="state"></i>--> + <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" + @click="setBounced(item, index)"> <img src="../../../../public/assets/images/map/solidwaste/gf_green2.png" alt="" class="state"> <div> <h3>###鐐煎寲閮�</h3> @@ -47,6 +55,7 @@ import mapApi from '@/api/mapApi' import WasteSolidIndex from '@/components/BaseNav/WasteSolid/WasteSolidIndex' import { pulseEffect, setPanTo } from '../../../utils/utils' +import { LayerWasteSolid } from '../../../conf/layers/LayerWasteSolid' export default { name: 'SolidWasteSearch', @@ -55,7 +64,9 @@ return { judgeVisible: true, form: { - keyword: '鍥哄簾闈㈡澘鏁版嵁鏌ヨ', + pipelineType: '鍥哄簾', + dataType: '', + keyword: '', // 鏁版嵁鐨勪紶閫� transferData: 1 }, @@ -74,97 +85,42 @@ } ], // 鏁版嵁鎼滅储涔嬪悗锛屽瓨鍌ㄦ暟鎹殑 - searchDataDisplay: [], - solidWasteTypeOptions: [{ - value: '1', - label: '鍖哄煙', - options: [{ - value: '1', - layerName: '鍥哄簾', - key: 'pipename', - label: '鍏ㄩ儴鍥哄簾' - }], - labelList: [{ - label: '杈撻�佷粙璐�', - key: 'mediumtype' - }, { - label: '闀垮害(m)', - key: 'length' - }] - }, { - value: '2', - label: '浼佷笟鍚嶇О', - options: [{ - value: '1', - layerName: '鍥哄簾', - key: 'pipename', - label: '鍏ㄩ儴鍥哄簾' - }], - labelList: [{ - label: '杈撻�佷粙璐�', - key: 'mediumtype' - }, { - label: '闀垮害(m)', - key: 'length' - }] - }, { - value: '3', - label: '浜岀骇鍗曚綅', - options: [{ - value: '1', - layerName: '鍥哄簾', - key: 'pipename', - label: '鍏ㄩ儴鍥哄簾' - }], - labelList: [{ - label: '杈撻�佷粙璐�', - key: 'mediumtype' - }, { - label: '闀垮害(m)', - key: 'length' - }] - }, { - value: '4', - label: '浼佷笟鍚嶇О', - options: [{ - value: '1', - layerName: '鍥哄簾', - key: 'pipename', - label: '鍏ㄩ儴鍥哄簾' - }], - labelList: [{ - label: '杈撻�佷粙璐�', - key: 'mediumtype' - }, { - label: '闀垮害(m)', - key: 'length' - }] - }] + items: [LayerWasteSolid], + subItems: LayerWasteSolid.layers, + list: [] } }, methods: { // select鐨刼ption鐨勬暟鎹�夋嫨 handlePipelineType (val) { - this.solidWasteTypeOptions.forEach(item => { - if (val === item.value) { - this.handleSearch(item.value) + this.list = [] + for (let i = 0; i < this.items.length; i++) { + const item = this.items[i] + if (val === item.name) { + this.subItems = item.layers + return } - }) + } + }, + handleDataType () { + this.list = [] }, // 鐐瑰嚮鎼滅储瀹炵幇鏁版嵁鐨勬悳绱㈠睍绀� async handleSearch (data) { // console.log(this.form.keyword) const result = await mapApi.getSolidWaste(data) - this.searchDataDisplay = result.Result.DataInfo + this.list = result.Result.DataInfo }, // 鏁版嵁灞曠ず,鐐瑰嚮杩涜寮规鍙婄偣鐨勫睍绀� - setBounced (val) { - // console.log(val) + setBounced (val, index) { const pos = [val.Latitude, val.Longitude] window.map.setView(pos, 15) + this.activeNum = index + pulseEffect([val.Latitude, val.Longitude]) + setPanTo(pos, 200) window.$layer.open({ content: { - content: WasteSolidIndex, // 缁勪欢 + comp: WasteSolidIndex, // 缁勪欢 parent: this, // 鐖剁粍浠� data: { // 浼犻�掔殑鍙傛暟 storagePlaceId: val.StoragePlaceId @@ -172,8 +128,6 @@ }, title: val.Name }) - pulseEffect([val.Latitude, val.Longitude]) - setPanTo(pos, 250) } } } diff --git a/src/components/panel/topicSearch/WaterWasteSearch.vue b/src/components/panel/topicSearch/WaterWasteSearch.vue index f49cd6d..c1f5409 100644 --- a/src/components/panel/topicSearch/WaterWasteSearch.vue +++ b/src/components/panel/topicSearch/WaterWasteSearch.vue @@ -192,7 +192,7 @@ window.map.setView(pos, 15) window.$layer.open({ content: { - content: WasteWaterIndex, // 缁勪欢 + comp: WasteWaterIndex, // 缁勪欢 parent: this, // 鐖剁粍浠� data: { // 浼犻�掔殑鍙傛暟 storagePlaceId: val diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/DrawLine.js b/src/components/plugin/DrawLine.js similarity index 93% rename from src/components/panel/topicSearch/SewersSelect/AnalysisChoose/DrawLine.js rename to src/components/plugin/DrawLine.js index 386bdb3..4466da3 100644 --- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/DrawLine.js +++ b/src/components/plugin/DrawLine.js @@ -1,5 +1,6 @@ import L from 'leaflet' -import eventBus from '../../../../../eventBus' +// import eventBus from '../../../../../eventBus' +import eventBus from '../../eventBus' class DrawLine { constructor (map) { diff --git a/src/components/table/SummarySheet.vue b/src/components/table/SummarySheet.vue deleted file mode 100644 index 741ed40..0000000 --- a/src/components/table/SummarySheet.vue +++ /dev/null @@ -1,147 +0,0 @@ -<template> - <div class="summary-sheets"> - <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鎶ヨ〃" placement="left"> - <div :class='["iconBtn",subtopic ? "active-button" : ""]' @click="subtopicBtn"> - <i class="el-icon-tickets icon"></i> - </div> - </el-tooltip> - <transition name="animationChange"> - <div class="subtopic" v-if="subtopic"> - <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="缁熻琛�" placement="bottom"> - <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn('缁熻琛�')"> - <i class="icon iconfont iconbiaoge2"></i> - <!--<span class="icon-name">缁熻琛�</span>--> - </div> - </el-tooltip> - <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鎸囨爣" placement="bottom"> - <div :class='["iconBtn",companyVisible ? "active-button" : ""]' @click="showStatisDialog('鎸囨爣')"> - <!-- <img src="@/assets/images/map-pages/icon/map/company.png" alt="" class="icon"> --> - <i class="el-icon-office-building icon"></i> - </div> - </el-tooltip> - <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="棰勬姤璀�" placement="bottom"> - <div :class='["iconBtn",warnVisible ? "active-button" : ""]' @click="showWarnDialog('棰勬姤璀�')"> - <i class="icon iconfont iconbaojing01"></i> - <!--<span class="icon-name">棰勬姤璀�</span>--> - </div> - </el-tooltip> - </div> - </transition> - <tab-handover v-show="summaryVisible" ref="titleProp"></tab-handover> - <Warn v-show="companyVisible" ref="titlePropWarn"></Warn> - <index-statistics v-show="warnVisible" ref="titlePropStatics"></index-statistics> - </div> -</template> - -<script> -import tabHandover from '@components/table/components/tabHandover' -import Warn from './components/Warn' -import IndexStatistics from '@components/table/components/IndexStatistics' -import bus from '@/eventBus' - -export default { - name: 'SummarySheet', - components: { - tabHandover, - Warn, - IndexStatistics - }, - data () { - return { - summaryVisible: false, - dialogShow: false, - comp: Warn, - warnVisible: false, - companyVisible: false, - subtopic: false - } - }, - methods: { - subtopicBtn () { - this.subtopic = !this.subtopic - const state = { - type: this.subtopic, - num: 2 - } - bus.$emit('changeState', state) - }, - closeBtn (item) { - this.$refs.titleProp.refsDatatitle(item) - this.summaryVisible = !this.summaryVisible - this.warnVisible = false - this.companyVisible = false - }, - showStatisDialog (item) { - this.$refs.titlePropWarn.refsDatatitle(item) - this.companyVisible = !this.companyVisible - this.summaryVisible = false - this.warnVisible = false - }, - showWarnDialog (item) { - this.$refs.titlePropStatics.refsDatatitle(item) - this.warnVisible = !this.warnVisible - this.summaryVisible = false - this.companyVisible = false - } - } -} -</script> - -<style lang="less"> - .summary-sheets { - position: absolute; - display: inline-flex; - overflow: hidden; - top: 0.42979rem; - left: 0.14583rem; - /*width: 850px;*/ - /*height: 265px;*/ - z-index: 500; - - .subtopic { - display: inline-flex; - - .iconBtn { - margin-left: 0.03rem; - border-color: #00fff6; - color: #00fff6; - } - - .iconBtn.active-button { - //border-color:#00fff6 !important; - //color:#00fff6 !important; - } - } - - .dialog { - //width: 800px; - //height: 300px; - position: absolute; - top: 15%; - left: 3rem; - } - - .animationChange-enter-active, .animationChange-leave-active { - transition: all 0.5s; - } - - .animationChange-enter, .animationChange-leave-to { - opacity: 0; - transform: translateX(-100px); - } - - /*color: #fff;*/ - - .el-icon-c-scale-to-original { - width: 30px; - height: 30px; - font-size: 30px; - } - - .el-dialog.el-dialog--center { - left: 0.5rem; - top: 0.73979rem; - } - - } -</style> diff --git a/src/components/table/components/IndexStatistics.vue b/src/components/table/components/IndexStatistics.vue index 27b0797..ef47519 100644 --- a/src/components/table/components/IndexStatistics.vue +++ b/src/components/table/components/IndexStatistics.vue @@ -1,82 +1,74 @@ <template> - <Public> - <template v-slot:title> - <span>{{ titleProp }}</span> - </template> - <template v-slot:publicTable> - <el-tabs v-model="activeName"> - <el-tab-pane label="鎸囨爣缁熻" name="first"> - <el-table :data="tableData" :lock-scroll="true" class="scroll"> - <el-table-column type="index" label="搴忓彿"></el-table-column> - <el-table-column prop="date" label="鍗曚綅鍚嶇О"></el-table-column> - <el-table-column prop="province" label="宸ヤ笟鍙栨按閲�(m3)"></el-table-column> - <el-table-column prop="province" label="澶栨帓搴熸按閲�(m3)"></el-table-column> - <el-table-column prop="province" label="宸ヤ笟搴熸皵鎺掓斁閲�(m3)"></el-table-column> - <el-table-column label="COD(t)"> - <el-table-column prop="province" label="绱浜х敓閲�"></el-table-column> - <el-table-column prop="city" label="褰撴湀浜х敓閲�"></el-table-column> - </el-table-column> - <el-table-column label="姘ㄦ爱(t)"> - <el-table-column prop="province" label="绱浜х敓閲�"></el-table-column> - <el-table-column prop="city" label="褰撴湀浜х敓閲�"></el-table-column> - </el-table-column> - <el-table-column label="浜屾哀鍖栫~(t)"> - <el-table-column prop="province" label="绱浜х敓閲�"></el-table-column> - <el-table-column prop="city" label="褰撴湀浜х敓閲�"></el-table-column> - </el-table-column> - <el-table-column label="姘哀鍖栫墿(t)"> - <el-table-column prop="province" label="绱浜х敓閲�"></el-table-column> - <el-table-column prop="city" label="褰撴湀浜х敓閲�"></el-table-column> - </el-table-column> - <el-table-column label="VOCs(t)"> - <el-table-column prop="province" label="绱浜х敓閲�"></el-table-column> - <el-table-column prop="city" label="褰撴湀浜х敓閲�"></el-table-column> - </el-table-column> - <el-table-column label="鍥哄簾(t)"> - <el-table-column prop="province" label="绱浜х敓閲�"></el-table-column> - <el-table-column prop="city" label="褰撴湀浜х敓閲�"></el-table-column> - </el-table-column> - </el-table> - </el-tab-pane> - <el-tab-pane label="浼佷笟鎺掑悕" name="second"> - <el-table :data="tableData"> - <el-table-column type="index" label="搴忓彿"></el-table-column> - <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 prop="address" label="鍚嶆"></el-table-column> - <el-table-column prop="zip" label="浼犺緭鐜�"></el-table-column> - <el-table-column prop="zip" label="鍚嶆"></el-table-column> - <el-table-column prop="zip" label="璁惧瀹屽ソ鐜�"></el-table-column> - <el-table-column prop="zip" label="鎺掑悕"></el-table-column> - </el-table> - </el-tab-pane> - <el-tab-pane label="鎺掓斁鐐规帓鍚�" name="third"> - <el-table :data="tableData"> - <el-table-column type="index" label="搴忓彿"></el-table-column> - <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 prop="address" label="浼犺緭鐜�"></el-table-column> - <el-table-column prop="zip" label="鍚嶆"></el-table-column> - <el-table-column prop="zip" label="璁惧瀹屽ソ鐜�"></el-table-column> - <el-table-column prop="zip" label="鍚嶆"></el-table-column> - </el-table> - </el-tab-pane> - </el-tabs> - </template> - </Public> + <div> + <el-tabs v-model="activeName"> + <el-tab-pane label="鎸囨爣缁熻" name="first"> + <el-table :data="tableData" :lock-scroll="true" class="scroll"> + <el-table-column type="index" label="搴忓彿"></el-table-column> + <el-table-column prop="date" label="鍗曚綅鍚嶇О"></el-table-column> + <el-table-column prop="province" label="宸ヤ笟鍙栨按閲�(m3)"></el-table-column> + <el-table-column prop="province" label="澶栨帓搴熸按閲�(m3)"></el-table-column> + <el-table-column prop="province" label="宸ヤ笟搴熸皵鎺掓斁閲�(m3)"></el-table-column> + <el-table-column label="COD(t)"> + <el-table-column prop="province" label="绱浜х敓閲�"></el-table-column> + <el-table-column prop="city" label="褰撴湀浜х敓閲�"></el-table-column> + </el-table-column> + <el-table-column label="姘ㄦ爱(t)"> + <el-table-column prop="province" label="绱浜х敓閲�"></el-table-column> + <el-table-column prop="city" label="褰撴湀浜х敓閲�"></el-table-column> + </el-table-column> + <el-table-column label="浜屾哀鍖栫~(t)"> + <el-table-column prop="province" label="绱浜х敓閲�"></el-table-column> + <el-table-column prop="city" label="褰撴湀浜х敓閲�"></el-table-column> + </el-table-column> + <el-table-column label="姘哀鍖栫墿(t)"> + <el-table-column prop="province" label="绱浜х敓閲�"></el-table-column> + <el-table-column prop="city" label="褰撴湀浜х敓閲�"></el-table-column> + </el-table-column> + <el-table-column label="VOCs(t)"> + <el-table-column prop="province" label="绱浜х敓閲�"></el-table-column> + <el-table-column prop="city" label="褰撴湀浜х敓閲�"></el-table-column> + </el-table-column> + <el-table-column label="鍥哄簾(t)"> + <el-table-column prop="province" label="绱浜х敓閲�"></el-table-column> + <el-table-column prop="city" label="褰撴湀浜х敓閲�"></el-table-column> + </el-table-column> + </el-table> + </el-tab-pane> + <el-tab-pane label="浼佷笟鎺掑悕" name="second"> + <el-table :data="tableData"> + <el-table-column type="index" label="搴忓彿"></el-table-column> + <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 prop="address" label="鍚嶆"></el-table-column> + <el-table-column prop="zip" label="浼犺緭鐜�"></el-table-column> + <el-table-column prop="zip" label="鍚嶆"></el-table-column> + <el-table-column prop="zip" label="璁惧瀹屽ソ鐜�"></el-table-column> + <el-table-column prop="zip" label="鎺掑悕"></el-table-column> + </el-table> + </el-tab-pane> + <el-tab-pane label="鎺掓斁鐐规帓鍚�" name="third"> + <el-table :data="tableData"> + <el-table-column type="index" label="搴忓彿"></el-table-column> + <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 prop="address" label="浼犺緭鐜�"></el-table-column> + <el-table-column prop="zip" label="鍚嶆"></el-table-column> + <el-table-column prop="zip" label="璁惧瀹屽ソ鐜�"></el-table-column> + <el-table-column prop="zip" label="鍚嶆"></el-table-column> + </el-table> + </el-tab-pane> + </el-tabs> + </div> </template> <script> -import Public from '@components/table/Public' - export default { name: 'IndexStatistics', - components: { Public }, data () { return { titleProp: '', diff --git a/src/components/table/components/Warn.vue b/src/components/table/components/Warn.vue index faf893a..0308373 100644 --- a/src/components/table/components/Warn.vue +++ b/src/components/table/components/Warn.vue @@ -1,162 +1,154 @@ <template> - <Public> - <template v-slot:title> - <span>{{ titleProp }}</span> - </template> - <template v-slot:publicTable> - <el-tabs v-model="activeName"> - <el-tab-pane label="瀹炴椂缁熻" name="first"> - <el-scrollbar style="width:100%"> - <el-table - :data="tableData"> + <div> + <el-tabs v-model="activeName"> + <el-tab-pane label="瀹炴椂缁熻" name="first"> + <el-scrollbar style="width:100%"> + <el-table + :data="tableData"> + <el-table-column + prop="date" + label="浼佷笟鍚嶇О"> + </el-table-column> + <el-table-column label="搴熸按(涓�)"> <el-table-column + prop="name" + label="棰勮"> + </el-table-column> + <el-table-column + prop="name" + label="鎶ヨ"> + </el-table-column> + </el-table-column> + <el-table-column label="搴熸皵(涓�)"> + <el-table-column + prop="name" + label="棰勮"> + </el-table-column> + <el-table-column + prop="name" + label="鎶ヨ"> + </el-table-column> + </el-table-column> + <el-table-column label="鍥哄簾(涓�)"> + <el-table-column + prop="name" + label="棰勮"> + </el-table-column> + </el-table-column> + <el-table-column label="纭寲姘�(涓�)"> + <el-table-column + prop="name" + label="棰勮"> + </el-table-column> + </el-table-column> + <el-table-column label="鍙噧姘斾綋(涓�)"> + <el-table-column + prop="name" + label="棰勮"> + </el-table-column> + </el-table-column> + </el-table> + </el-scrollbar> + </el-tab-pane> + <el-tab-pane label="褰撴湀缁熻" name="second"> + <el-table + :data="tableData"> + <el-table-column prop="date" label="浼佷笟鍚嶇О"> - </el-table-column> - <el-table-column label="搴熸按(涓�)"> - <el-table-column + </el-table-column> + <el-table-column label="搴熸按(涓�)"> + <el-table-column prop="name" label="棰勮"> - </el-table-column> - <el-table-column + </el-table-column> + <el-table-column prop="name" label="鎶ヨ"> - </el-table-column> - </el-table-column> - <el-table-column label="搴熸皵(涓�)"> - <el-table-column + </el-table-column> + </el-table-column> + <el-table-column label="搴熸皵(涓�)"> + <el-table-column prop="name" label="棰勮"> - </el-table-column> - <el-table-column + </el-table-column> + <el-table-column prop="name" label="鎶ヨ"> - </el-table-column> - </el-table-column> - <el-table-column label="鍥哄簾(涓�)"> - <el-table-column - prop="name" - label="棰勮"> - </el-table-column> - </el-table-column> - <el-table-column label="纭寲姘�(涓�)"> - <el-table-column - prop="name" - label="棰勮"> - </el-table-column> - </el-table-column> - <el-table-column label="鍙噧姘斾綋(涓�)"> - <el-table-column - prop="name" - label="棰勮"> - </el-table-column> - </el-table-column> - </el-table> - </el-scrollbar> - </el-tab-pane> - <el-tab-pane label="褰撴湀缁熻" name="second"> - <el-table - :data="tableData"> + </el-table-column> + </el-table-column> + <el-table-column label="鍥哄簾(涓�)"> <el-table-column - prop="date" - label="浼佷笟鍚嶇О"> + prop="name" + label="棰勮"> </el-table-column> - <el-table-column label="搴熸按(涓�)"> - <el-table-column - prop="name" - label="棰勮"> - </el-table-column> - <el-table-column - prop="name" - label="鎶ヨ"> - </el-table-column> - </el-table-column> - <el-table-column label="搴熸皵(涓�)"> - <el-table-column - prop="name" - label="棰勮"> - </el-table-column> - <el-table-column - prop="name" - label="鎶ヨ"> - </el-table-column> - </el-table-column> - <el-table-column label="鍥哄簾(涓�)"> - <el-table-column - prop="name" - label="棰勮"> - </el-table-column> - </el-table-column> - <el-table-column label="纭寲姘�(涓�)"> - <el-table-column - prop="name" - label="棰勮"> - </el-table-column> - </el-table-column> - <el-table-column label="鍙噧姘斾綋(涓�)"> - <el-table-column - prop="name" - label="棰勮"> - </el-table-column> - </el-table-column> - </el-table> - </el-tab-pane> - <el-tab-pane label="涓婃湀缁熻" name="third"> - <el-table - :data="tableData"> + </el-table-column> + <el-table-column label="纭寲姘�(涓�)"> <el-table-column - prop="date" - label="浼佷笟鍚嶇О"> + prop="name" + label="棰勮"> </el-table-column> - <el-table-column label="搴熸按(涓�)"> - <el-table-column - prop="name" - label="棰勮"> - </el-table-column> - <el-table-column - prop="name" - label="鎶ヨ"> - </el-table-column> + </el-table-column> + <el-table-column label="鍙噧姘斾綋(涓�)"> + <el-table-column + prop="name" + label="棰勮"> </el-table-column> - <el-table-column label="搴熸皵(涓�)"> - <el-table-column - prop="name" - label="棰勮"> - </el-table-column> - <el-table-column - prop="name" - label="鎶ヨ"> - </el-table-column> + </el-table-column> + </el-table> + </el-tab-pane> + <el-tab-pane label="涓婃湀缁熻" name="third"> + <el-table + :data="tableData"> + <el-table-column + prop="date" + label="浼佷笟鍚嶇О"> + </el-table-column> + <el-table-column label="搴熸按(涓�)"> + <el-table-column + prop="name" + label="棰勮"> </el-table-column> - <el-table-column label="鍥哄簾(涓�)"> - <el-table-column - prop="name" - label="棰勮"> - </el-table-column> + <el-table-column + prop="name" + label="鎶ヨ"> </el-table-column> - <el-table-column label="纭寲姘�(涓�)"> - <el-table-column - prop="name" - label="棰勮"> - </el-table-column> + </el-table-column> + <el-table-column label="搴熸皵(涓�)"> + <el-table-column + prop="name" + label="棰勮"> </el-table-column> - <el-table-column label="鍙噧姘斾綋(涓�)"> - <el-table-column - prop="name" - label="棰勮"> - </el-table-column> + <el-table-column + prop="name" + label="鎶ヨ"> </el-table-column> - </el-table> - </el-tab-pane> - </el-tabs> - </template> - </Public> + </el-table-column> + <el-table-column label="鍥哄簾(涓�)"> + <el-table-column + prop="name" + label="棰勮"> + </el-table-column> + </el-table-column> + <el-table-column label="纭寲姘�(涓�)"> + <el-table-column + prop="name" + label="棰勮"> + </el-table-column> + </el-table-column> + <el-table-column label="鍙噧姘斾綋(涓�)"> + <el-table-column + prop="name" + label="棰勮"> + </el-table-column> + </el-table-column> + </el-table> + </el-tab-pane> + </el-tabs> + </div> </template> <script> - -import Public from '@components/table/Public' - export default { data () { return { @@ -193,7 +185,6 @@ }] } }, - components: { Public }, methods: { refsDatatitle (item) { this.titleProp = item diff --git a/src/components/table/components/componented/refinery.vue b/src/components/table/components/componented/refinery.vue index af87df9..c54ae24 100644 --- a/src/components/table/components/componented/refinery.vue +++ b/src/components/table/components/componented/refinery.vue @@ -17,23 +17,7 @@ name: 'refinery', 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 寮�' - }] + tableData: [] } }, props: { @@ -49,6 +33,16 @@ } } } + }, + watch: { + param: { + tableContent (newValue, oldValue) { + this.tableData = newValue + console.log(newValue) + }, + deep: true + } + } } </script> diff --git a/src/components/table/components/tabHandover.vue b/src/components/table/components/tabHandover.vue index 794a621..1665928 100644 --- a/src/components/table/components/tabHandover.vue +++ b/src/components/table/components/tabHandover.vue @@ -1,22 +1,15 @@ <template> - <Public> - <template v-slot:title> - <span>{{ titleProp }}</span> - </template> - <template v-slot:publicTable> - <el-tabs v-model="activeName" @tab-click="handleClick"> - <el-tab-pane v-for="(item,index) in topicList" :key="index" :label="item.name" :name="item.name"></el-tab-pane> - </el-tabs> - <div> - <component :is="gcComp"></component> - </div> - </template> - </Public> + <div> + <el-tabs v-model="activeName" @tab-click="handleClick"> + <el-tab-pane v-for="(item,index) in topicList" :key="index" :label="item.name" :name="item.name"></el-tab-pane> + </el-tabs> + <div> + <component :is="gcComp"></component> + </div> + </div> </template> <script> - -import Public from '@components/table/Public' import WasteWater from '@components/table/components/WasteWater' import SoilGroundwater from '@components/table/components/SoilGroundwater' @@ -29,7 +22,6 @@ export default { name: 'tabHandover', components: { - Public, WasteWater, // WasteGas, // SoilGroundwater, diff --git a/src/components/table/summarySheets.vue b/src/components/table/summarySheets.vue index 6bc279f..37a4fa4 100644 --- a/src/components/table/summarySheets.vue +++ b/src/components/table/summarySheets.vue @@ -1,12 +1,12 @@ <template> <div class="summary-sheets"> <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鎶ヨ〃" placement="left"> - <div :class='["iconBtn",subtopic ? "active-button" : ""]' @click="subtopicBtn" > + <div :class='["iconBtn",selectGroup ? "active-button" : ""]' @click="subtopicBtn" > <i class="el-icon-tickets icon"></i> </div> </el-tooltip> <transition name="animationChange"> - <div class="subtopic" v-if="subtopic"> + <div class="subtopic" v-show="selectGroup"> <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="缁熻琛�" placement="bottom"> <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn"> <!-- --> @@ -67,11 +67,35 @@ comp: Warn, warnVisible: false, companyVisible: false, - subtopic: false + selectGroup: false } }, + mounted () { + const that = this + // 鐩戝惉鏄惁鐐瑰嚮浜嗗綋鍓嶅浘鏍囨寜閽� + bus.$on('changeState', function (state) { + if (state.num !== 2 && state.type) { + that.selectGroup = false + } + }) + // 澶栭儴璋冪敤 涓庢姤璀﹀脊妗� + bus.$on('forecastWarningDetails', function (state) { + that.showWarnDialog() + }) + // 瀛愮粍浠朵簨浠舵帶鍒跺綋鍓嶅彉閲� + this.$nextTick(() => { + this.$refs.summarySheets.$on('closeDialog', () => { + that.summaryVisible = false + }) + this.$refs.warnDialog.$on('closeDialog', () => { + that.warnVisible = false + }) + this.$refs.indexStatisticsDialog.$on('closeDialog', () => { + that.companyVisible = false + }) + }) + }, methods: { - closeBtn () { this.$refs.summarySheets.show() this.summaryVisible = true @@ -85,32 +109,13 @@ this.companyVisible = true }, subtopicBtn () { - this.subtopic = !this.subtopic + this.selectGroup = !this.selectGroup const state = { - type: this.subtopic, + type: this.selectGroup, num: 2 } bus.$emit('changeState', state) } - }, - mounted () { - const that = this - bus.$on('changeState', function (state) { - if (state.num !== 2 && state.type) { - that.subtopic = false - } - }) - this.$nextTick(() => { - this.$refs.summarySheets.$on('closeDialog', () => { - that.summaryVisible = false - }) - this.$refs.warnDialog.$on('closeDialog', () => { - that.warnVisible = false - }) - this.$refs.indexStatisticsDialog.$on('closeDialog', () => { - that.companyVisible = false - }) - }) } } </script> diff --git a/src/conf/Constants.js b/src/conf/Constants.js index e647f9a..3cfb6bf 100644 --- a/src/conf/Constants.js +++ b/src/conf/Constants.js @@ -2,6 +2,8 @@ // export const PIPELINE_WMS = 'http://xearth.cn:6240/geoserver/sewer/wms' export const WMS_URL = 'http://10.238.235.179:6240/geoserver/sewer/wms' export const WFS_URL = 'http://10.238.235.179:6240/geoserver/sewer/ows?service=WFS' +// export const WMS_URL = 'http://xearth.cn:6240/geoserver/sewer/wms' +// export const WFS_URL = 'http://xearth.cn:6240/geoserver/sewer/ows?service=WFS' export const GEOM_TYPE = { POINT: 'point', @@ -36,35 +38,367 @@ ICON_SIZE: [10, 10] } -export const props = { - code: '缂栧彿', - name: '鍚嶇О', - teamname: '鍚嶇О', - pfktype: '鎺掓斁鍙g被鍨�', - level: '绾у埆', - length: '闀垮害(m)', - unitname: '鍗曚綅鍚嶇О', - pipename: '绠$嚎鍚嶇О', - subchaname: '鏀嚎鍚嶇О', - subchacode: '鏀嚎缂栫爜', - mediumtype: '杈撻�佷粙璐�', - startposname: '璧风偣浣嶇疆鍚嶇О', - endposname: '缁堢偣浣嶇疆鍚嶇О', - pressureating: '璁捐鍘嬪姏锛圡Pa锛�', - designtranyear: '璁捐杈撻噺锛堜竾绔�/骞达級', - earningcapacity: '瀹為檯杈撻噺锛堜竾绔�/骞达級', - buriedtime: '鍩嬭鏃堕棿', - coatingmaterial: '闃茶厫鐘跺喌', - inservicetime: '鎶曚骇鏃堕棿', - reportname: '濉姤浜哄鍚�', - reportphone: '濉姤浜鸿仈绯绘柟寮�', - diameter: '绠″緞(mm)', - meterial: '鏉愯川', - pressuerating: '绠¢亾鍘嬪姏(Mpa)', - embeddingmode: '鍩嬭鏂瑰紡', - pipetrenchtype: '绠℃矡绫诲瀷', - datecollected: '鎺㈡祴鏃堕棿', - operationalstatus: '杩愯鐘舵��', - fourtype: '鍥涢�氱被鍨�', - fourm: '鍥涢�氭潗鏂�' +export const LAYERS = { + pipenetwork: '绠$綉', + pipeline: '绠$嚎', + manhole: '绐ㄤ簳', + valve: '闃�闂�', + pipegallery: '绠″粖(甯�)', + piperack: '绠℃灦(澧�)', + tee: '涓夐��', + fourlink: '鍥涢��', + elbow: '寮ご', + raingate: '闆ㄧ瀛�', + firedike: '闃茬伀鍫�', + collectingbasin: '闆嗘按姹�(缃�)', + dischargeport: '鎺掓斁鍙�', + overflowweir: '婧㈡祦鍫�', + oilseparator: '闅旀补姹�', + pointhydrology: '姘翠綋', + pointpreservationzone: '鑷劧淇濇姢鍖�', + hospital: '鍖婚櫌', + emergencyres: '绀句細涓撲笟搴旀�ユ晳鎻撮槦浼�', + emergencyesources: '搴旀�ョ墿璧�', + firefightingunit: '娑堥槻鍗曚綅', + unitareaboundary: '瑁呯疆鍖鸿竟鐣�' +} + +export const LAYERPROPS = { + // 绠$綉 + pipenetwork: { + // 绠$綉 + name: '绠$綉鍚嶇О', + linenumtype: '绠$綉绫诲瀷', + pipename: '绠$綉鍚嶇О', + mediumtype: '杈撻�佷粙璐�', + length: '闀垮害(m)', + startposname: '璧风偣浣嶇疆鍚嶇О', + endposname: '缁堢偣浣嶇疆鍚嶇О', + buriedtime: '鍩嬭鏃堕棿', + coatingmaterial: '闃茶厫鐘跺喌', + inservicetime: '鎶曚骇鏃堕棿', + unitname: '鎵�灞炲崟浣嶅悕绉�', + orgname: '鎵�灞炰紒涓氬悕绉�', + operationalstatus: '杩愯鐘舵��' + }, + // 绠$嚎 + pipeline: { + // 绠$綉 + name: '绠$綉鍚嶇О', + linenumtype: '绠$嚎绫诲瀷', + pipename: '绠$嚎鍚嶇О', + mediumtype: '杈撻�佷粙璐�', + length: '闀垮害(m)', + startposname: '璧风偣浣嶇疆鍚嶇О', + endposname: '缁堢偣浣嶇疆鍚嶇О', + buriedtime: '鍩嬭鏃堕棿', + coatingmaterial: '闃茶厫鐘跺喌', + inservicetime: '鎶曚骇鏃堕棿', + unitname: '鎵�灞炲崟浣嶅悕绉�', + orgname: '鎵�灞炰紒涓氬悕绉�', + operationalstatus: '杩愯鐘舵��' + }, + // 绐ㄤ簳 + manhole: { + wellid: '浜曠紪鍙�', + wellname: '浜曞悕绉�', + type: '绫诲瀷', + wellmaterial: '浜曠洊鏉愯川', + spesize: '浜曠洊鐩村緞(mm)', + welldeepth: '绐ㄤ簳娣卞害(m)', + wellneckheight: '浜曡剸楂樺害(cm)', + havesafetynet: '鏄惁鏈夊畨鍏ㄧ綉', + datasource: '鏁版嵁鏉ユ簮', + operationalstatus: '杩愯鐘舵��' + }, + // 闃�闂� + valve: { + pointnumber: '娴嬬偣缂栧彿', + devicecode: '闃�闂ㄧ紪鐮�', + devicename: '闃�闂ㄥ悕绉�', + valvetype: '闃�闂ㄧ被鍨�', + manufmodel: '鍒堕�犲瀷鍙�', + assetmanufact: '璧勪骇鍒堕�犲晢', + startdate: '鎶曠敤鏃ユ湡', + factorytime: '鍑哄巶鏃堕棿', + nominaldiamet: '鍏О鐩村緞(mm)', + nominalpress: '鍏О鍘嬪姏(MPa)', + operatingtype: '鎺у埗鏂瑰紡', + executagencyf: '鎵ц鏈烘瀯褰㈠紡', + valveplatem: '闃�鏉�(鑺�)鏉愯川', + installunit: '瀹夎鍗曚綅', + sealform: '瀵嗗皝褰㈠紡', + constprange: '瀹氬帇鑼冨洿(MPa)', + valvebodytype: '闃�浣撳舰寮�', + spoolform: '闃�鑺舰寮�', + nominald: '鍏О閫氬緞(mm)', + leakaglevel: '娉勬紡绛夌骇(绾�)', + circulcap: '娴侀�氳兘鍔�(m3/h)', + workpress: '宸ヤ綔鍘嬪姏(MPa)', + worktemp: '宸ヤ綔娓╁害(鈩�)', + flowcharact: '娴侀噺鐗规��', + spooldiamet: '闃�鑺洿寰�(mm)', + valvegroupname: '鎵�灞為榾缁�', + valvegroupcode: '闃�缁勭紪鍙�', + operationalstatus: '杩愯鐘舵��' + }, + // 绠″粖锛堝甫锛� + pipegallery: { + pipecorridname: '绠″粖(甯�)鍚嶇О', + pipecorridcode: '绠″粖(甯�)缂栫爜', + pipename: '鎵�灞炵绾垮悕绉�', + pipecorridsname: '璧风偣绠″粖(甯�)鍚嶇О', + pipecorridename: '缁堢偣绠″粖(甯�)鍚嶇О', + datasource: '鏁版嵁鏉ユ簮', + operationalstatus: '杩愯鐘舵��' + }, + // 绠℃灦锛堝ⅸ锛� + piperack: { + piperackcode: '绠℃灦(澧�)缂栫爜', + piperackname: '绠℃灦(澧�)鍚嶇О', + pipename: '鎵�灞炵绾垮悕绉�', + piperacktype: '绫诲瀷', + piperackst: '绠℃灦(澧�)缁撴瀯绫诲瀷', + longitudinalpiperack: '鏄惁鏈夌旱鍚戞灦', + datasource: '鏁版嵁鏉ユ簮', + operationalstatus: '杩愯鐘舵��' + }, + // 涓夐�� + tee: { + code: '涓夐�氱紪鐮�', + branchdiamet: '鏀嚎鐩村緞(mm)', + branchthickness: '鏀嚎澹佸帤(mm)', + exportdiamet: '鍑哄彛鐩村緞(mm)', + exportthickness: '鍑哄彛澹佸帤(mm)', + exportconnectm: '鍑哄彛杩炴帴鏂瑰紡', + entrycontype: '鍏ュ彛杩炴帴鏂瑰紡', + entrdiamet: '鍏ュ彛鐩村緞', + entrthick: '鍏ュ彛澹佸帤', + teem: '涓夐�氭潗鏂�', + puttingindate: '鎶曠敤鏃ユ湡', + manufactdate: '鐢熶骇鏃ユ湡', + pressuregrade: '鍘嬪姏绛夌骇(mpa)', + constructunit: '鏂藉伐鍗曚綅', + supervisionunit: '鐩戠悊鍗曚綅', + detectunit: '妫�娴嬪崟浣�', + manufacturer: '鐢熶骇鍘傚晢', + branchconntype: '鏀杩炴帴绫诲瀷', + installdate: '瀹夎鏃ユ湡', + strengthgrade: '寮哄害绛夌骇', + operationalstatus: '杩愯鐘舵��' + + }, + // 鍥涢�� + fourlink: { + code: '鍥涢�氱紪鐮�', + fourtype: '鍥涢�氱被鍨�', + entrycontype: '鍏ュ彛杩炴帴鏂瑰紡', + entrydiamet: '鍏ュ彛鐩村緞(mm)', + entrythick: '鍏ュ彛澹佸帤(mm)', + branchdiamet1: '鏀嚎1鐩村緞(mm)', + branchthickness1: '鏀嚎1澹佸帤(mm)', + branchdiamet2: '鏀嚎2鐩村緞(mm)', + branchthickness2: '鏀嚎2澹佸帤(mm)', + exportdiamet: '鍑哄彛鐩村緞(mm)', + exportthickness: '鍑哄彛澹佸帤(mm)', + exportcontype: '鍑哄彛杩炴帴鏂瑰紡', + fourm: '鍥涢�氭潗鏂�', + appdate: '鎶曠敤鏃ユ湡', + manufactdate: '鐢熶骇鏃ユ湡', + pressuregrade: '鍘嬪姏绛夌骇(mpa)', + constructunit: '鏂藉伐鍗曚綅', + supervisionunit: '鐩戠悊鍗曚綅', + detectunit: '妫�娴嬪崟浣�', + manufacturer: '鐢熶骇鍘傚晢', + branchconntype1: '鏀嚎1杩炴帴鏂瑰紡', + branchconntype2: '鏀嚎2杩炴帴鏂瑰紡', + installdate: '瀹夎鏃ユ湡', + operationalstatus: '杩愯鐘舵��' + }, + // 寮ご + elbow: { + pointnumber: '娴嬬偣缂栧彿', + code: '寮ご缂栫爜', + pipename: '鎵�灞炵绾垮悕绉�', + pipecode: '鎵�灞炵绾跨紪鐮�', + bendangle: '寮ご瑙掑害', + elbowtype: '寮ご绫诲瀷', + elbowmaterial: '寮ご鏉愭枡', + anticorros: '闃茶厫鏉愭枡', + entryconntype: '鍏ュ彛杩炴帴鏂瑰紡', + outletconntype: '鍑哄彛杩炴帴鏂瑰紡', + entrdiameter: '鍏ュ彛鐩村緞(mm)', + entrwallthick: '鍏ュ彛澹佸帤(mm)', + exitdiameter: '鍑哄彛鐩村緞(mm)', + exitwallthick: '鍑哄彛澹佸帤(mm)', + classes: '鍘嬪姏绛夌骇(mpa)', + unitname: '鎵�灞炲崟浣嶅悕绉�', + unitcode: '鎵�灞炲崟浣嶄唬鐮�', + productdate: '鐢熶骇鏃ユ湡', + installationdate: '瀹夎鏃ユ湡', + puttingindate: '鎶曠敤鏃ユ湡', + constructunit: '鏂藉伐鍗曚綅', + supervisionunit: '鐩戠悊鍗曚綅', + detectionunit: '妫�娴嬪崟浣�', + elbowcurvrad: '鏇茬巼鍗婂緞(d)', + manufacturer: '鐢熶骇鍘傚晢', + bendlength: '寮ご闀垮害', + benddirection: '寮ご鏂瑰悜', + pipewalldiameter: '绠¢亾澶栧鐩村緞(mm)', + strengthgrade: '寮哄害绛夌骇', + curvelength: '鏇茬嚎闀�', + tangentlength: '鍒囩嚎闀�', + vectordistance: '澶栫煝璺�', + mintemperature: '鏈�浣庤璁℃俯搴�', + maxtemperature: '鏈�楂樿璁℃俯搴�', + operationalstatus: '杩愯鐘舵��' + }, + // 闆ㄧ瀛� + raingate: { + raingrateid: '闆ㄧ瀛愮紪鍙�', + rgshape: '闆ㄧ瀛愬舰鐘�', + rgmaterial: '闆ㄧ瀛愭潗璐�', + spesize: '闆ㄧ瀛愬昂瀵�(cm)', + rgdeepth: '闆ㄧ瀛愬帤搴�(mm)', + operationalstatus: '杩愯鐘舵��' + }, + // 闃茬伀鍫� + firedike: { + name: '鍚嶇О', + code: '缂栫爜', + ownertanks: '鎵�灞炵綈鍖�', + tankscode: '缃愬尯缂栧彿', + operationalstatus: '杩愯鐘舵��' + }, + // 闆嗘按姹狅紙缃愶級 + collectingbasin: { + companyname: '鍚嶇О', + code: '缂栫爜', + mediumtype: '浠嬭川', + size: '灏哄', + volume: '瀹圭Н', + ownersite: '鎵�灞炵珯鍦�', + startdate: '鎶曠敤鏃ユ湡', + operationalstatus: '杩愯鐘舵��' + }, + // 鎺掓斁鍙� + dischargeport: { + name: '鍚嶇О', + code: '缂栫爜', + mediumtype: '浠嬭川', + pfktype: '鎺掓斁鍙g被鍨�', + level: '绾у埆', + operationalstatus: '杩愯鐘舵��' + }, + // 鎴祦闂� + + // 婧㈡祦鍫� + overflowweir: { + name: '鍚嶇О', + code: '缂栫爜', + mediumtype: '闃叉孩浠嬭川', + material: '鏉愯川', + height: '楂�(m)', + length: '闀垮害(m)', + operationalstatus: '杩愯鐘舵��' + }, + // 闅旀补姹� + oilseparator: { + poolname: '鍚嶇О', + no: '缂栫爜', + size: '灏哄', + volume: '瀹圭Н', + operationalstatus: '杩愯鐘舵��' + }, + // 姘翠綋 + pointhydrology: { + name: '鍚嶇О', + orgname: '浼佷笟鍚嶇О', + telphonenumber: '鑱旂郴鏂瑰紡', + velocityaverage: '骞村钩鍧囨祦閫�(m/s)', + erosiondepthavg: '骞村钩鍧囧啿鍒锋繁搴�', + velocitymax: '鏈�澶ч�熷害(m/s)', + velocitymin: '鏈�灏忛�熷害(m/s)', + highestwaterlevel: '鏈�楂樻按浣嶏紙m锛�', + minwaterlevel: '鏈�浣庢按浣嶏紙m锛�', + maximumflux: '鏈�澶ф祦閲�', + erosiondepthmax: '鏈�澶у啿鍒锋繁搴�', + flowdirection: '娌虫祦娴佸悜', + length: '闀垮害锛坢锛�', + hydrotype: '姘寸郴绫诲瀷', + drinkingresourceind: '鏄惁鏄ギ鐢ㄦ按婧�', + seasonalriverind: '鏄惁鏄鑺傛�ф渤娴�', + highriskmonth: '楂橀闄╂湀浠�', + reservoirlocation: '姘村簱浣嶇疆', + coverdepth: '绠¢亾鍩嬫繁', + gbcode: '鍥芥爣鐮�', + operationalstatus: '杩愯鐘舵��' + }, + // 鑷劧淇濇姢鍖� + pointpreservationzone: { + name: '鍚嶇О', + orgname: '浼佷笟鍚嶇О', + datasource: '鏁版嵁鏉ユ簮', + type: '淇濇姢鍖虹被鍨�', + structureoridsitearea: '鍗犲湴闈㈢Н', + preservationobject: '涓昏淇濇姢瀵硅薄', + adminzonename: '琛屾斂闅跺睘' + }, + // 鍖婚櫌 + hospital: { + companyname: '鍖婚櫌鍚嶇О', + orgname: '浼佷笟鍚嶇О', + telephone: '鑱旂郴鐢佃瘽', + hospitalleaval: '鍖婚櫌璧勮川绛夌骇', + maxinjurednumber: '鍙绾充激鍛�', + sickbednumber: '鐥呭簥鏁伴噺', + doctornumber: '鍖荤敓鏁伴噺', + nursenumber: '鎶ゅ+鏁伴噺', + ambulancenumber: '鏁戞姢杞︽暟閲�', + subtypecd: '鍖婚櫌绫诲瀷', + address: '鍗曚綅鍦板潃', + hyperbaricoxygencabin: '楂樺帇姘ц埍', + distance: '璺濈', + datasource: '鏁版嵁鏉ユ簮' + }, + // 绀句細涓撲笟搴旀�ユ晳鎻撮槦浼� + emergencyres: { + name: '鍚嶇О', + orgname: '浼佷笟鍚嶇О', + numberteam: '鏁戞彺浜烘暟', + rescueobject: '涓昏鏁戞彺瀵硅薄', + resperson: '璐熻矗浜�', + telephone: '鑱旂郴鐢佃瘽', + datasource: '鏁版嵁鏉ユ簮' + }, + // 搴旀�ョ墿璧� + emergencyesources: { + resourcesname: '鐗╄祫鍚嶇О', + orgname: '浼佷笟鍚嶇О', + resourcesnumber: '鐗╄祫鏁伴噺', + ownedstatus: '鏄惁鑷湁鐗╄祫', + sourceschargestandard: '鐗╄祫鏀惰垂鏍囧噯', + resperson: '璐熻矗浜�', + telephone: '鑱旂郴鐢佃瘽', + datasource: '鏁版嵁鏉ユ簮' + }, + // 娑堥槻鍗曚綅 + firefightingunit: { + companyname: '娑堥槻鍗曚綅鍚嶇О', + orgname: '浼佷笟鍚嶇О', + pumpernumber: '娑堥槻杞︽暟閲�', + contacttelephone: '鑱旂郴鐢佃瘽', + address: '鍗曚綅鍦板潃', + supportradius: '鏈嶅姟鍗婂緞', + ficroute: '浜ら�氳矾绾�', + distance: '璺濈', + datasource: '鏁版嵁鏉ユ簮' + }, + // 瑁呯疆鍖� + unitareaboundary: { + name: '瑁呯疆鍖哄悕绉�', + code: '瑁呯疆鍖虹紪鐮�', + responsperson: '璐熻矗浜�', + startdate: '鎶曠敤鏃ユ湡' + } } diff --git a/src/conf/MapConfig.js b/src/conf/MapConfig.js index ec1f64e..4cae2f1 100644 --- a/src/conf/MapConfig.js +++ b/src/conf/MapConfig.js @@ -23,7 +23,6 @@ crs: L.CRS.EPSG4326, minZoom: 3, maxZoom: 21, - // center: [26, 104], center: [34.828558921813965, 117.41676807403564], zoom: 5, // center: [39.907214641571045, 116.39019012451172], diff --git a/src/conf/Topic.js b/src/conf/Topic.js index 31db08c..8e4e0d7 100644 --- a/src/conf/Topic.js +++ b/src/conf/Topic.js @@ -9,7 +9,7 @@ envProtectSearch: () => import('@components/panel/topicSearch/EnvRiskSearch'), soilGroundWaterSearch: () => import('@components/panel/topicSearch/SoilGroundWaterSearch'), sewersSearch: () => import('@components/panel/topicSearch/SewersSearch.vue'), - ReportSearchL: () => import('@components/panel/topicSearch/ReportSearch.vue') + EnterpriseEmergencySearch: () => import('@components/panel/topicSearch/EnterpriseEmergencySearch.vue') } export const TopicList = [{ diff --git a/src/conf/layers/LayerArea.js b/src/conf/layers/LayerArea.js index 5a2106c..a6b0837 100644 --- a/src/conf/layers/LayerArea.js +++ b/src/conf/layers/LayerArea.js @@ -1,3 +1,5 @@ +import { SERVICE_TYPE } from '../Constants' + /** * 鍖哄煙 */ @@ -12,7 +14,7 @@ name: '鍏徃', sname: '鍏徃', // 琛ㄥ悕 checked: true, // 榛樿閫変腑鐘舵�� - type: 0, + icon: 'sewers/.png', legendImage: '../.././assets/images/map/company_refining.png' }, { @@ -20,14 +22,17 @@ name: '鐮佸ご', sname: '鐮佸ご', checked: false, // 榛樿閫変腑鐘舵�� - type: 0, + icon: 'sewers/鐮佸ご.png', legendImage: '../.././assets/images/map/sewers/鐮佸ご.png' }, { code: 'sewersAreaZz', name: '瑁呯疆鍖�', sname: '瑁呯疆鍖�', + type: SERVICE_TYPE.WMS, checked: false, // 榛樿閫変腑鐘舵�� + icon: 'sewers/.png', + index: 1, typeName: 'sewer:unitareaboundary' } ] diff --git a/src/conf/layers/LayerEmergencySource.js b/src/conf/layers/LayerEmergencySource.js index bdf018e..495c760 100644 --- a/src/conf/layers/LayerEmergencySource.js +++ b/src/conf/layers/LayerEmergencySource.js @@ -14,7 +14,7 @@ sname: '搴旀�ョ墿璧�', checked: false, type: SERVICE_TYPE.WMS, - icon: 'sewers/闆ㄦ按鎺掑彛.png', + icon: 'sewers/搴旀�ョ墿璧�.png', typeName: 'sewer:emergencyesources', minZoom: 10 // 鍦ㄦ寚瀹氱骇鍒樉绀� }, @@ -22,7 +22,7 @@ code: 'sewersYjcl', name: '搴旀�ヨ溅杈�', sname: '搴旀�ヨ溅杈�', - icon: 'sewers/闆ㄦ按鎺掑彛.png', + icon: 'sewers/搴旀�ヨ溅杈�.png', checked: false, // 榛樿閫変腑鐘舵�� type: SERVICE_TYPE.WMS, minZoom: 10 @@ -31,7 +31,7 @@ code: 'sewersYjdw', name: '搴旀�ラ槦浼�', sname: '搴旀�ラ槦浼�', - icon: 'sewers/闆ㄦ按鎺掑彛.png', + icon: 'sewers/搴旀�ラ槦浼�.png', checked: false, // 榛樿閫変腑鐘舵�� type: SERVICE_TYPE.WMS, typeName: 'sewer:maintenanceteam', diff --git a/src/conf/layers/LayerFsss.js b/src/conf/layers/LayerFsss.js index b0e4350..caaea37 100644 --- a/src/conf/layers/LayerFsss.js +++ b/src/conf/layers/LayerFsss.js @@ -43,19 +43,26 @@ { code: 'piperack', name: '绠℃灦(澧�)', - sname: 'PipeRack', + sname: '绠℃灦(澧�)', minZoom: 16, type: SERVICE_TYPE.WMS, typeName: 'sewer:piperack', + icon: 'sewers/绠℃灦(澧�).png', checked: false }, { code: 'pipegallery', name: '绠″粖(甯�)', - sname: 'PipeGallery', + sname: '绠″粖(甯�)', minZoom: 16, type: SERVICE_TYPE.WMS, typeName: 'sewer:pipegallery', + icon: 'sewers/绠″粖.png', + color: '#828282', + styles: { + COLOR: '#828282', + FILL_COLOR: '#828282' + }, checked: false }, { @@ -63,6 +70,7 @@ name: '娴佸悜', sname: 'ywslx', type: SERVICE_TYPE.WMS, + typeName: 'sewer:pipesegment_flow', checked: false }, { diff --git a/src/conf/layers/LayerHbss.js b/src/conf/layers/LayerHbss.js index 7727670..7b19e8e 100644 --- a/src/conf/layers/LayerHbss.js +++ b/src/conf/layers/LayerHbss.js @@ -35,12 +35,13 @@ minZoom: 16, type: SERVICE_TYPE.WMS, typeName: 'sewer:firedike', + icon: 'sewers/闃茬伀鍫�.png', checked: false }, { code: 'jsc', name: '闆嗘按姹�', - sname: '闆嗘按姹�', + sname: '闆嗘按姹�(缃�)', minZoom: 16, typeName: 'sewer:collectingbasin', checked: false, @@ -52,7 +53,8 @@ name: '鎴祦闂�', sname: '鎴祦闂�', type: SERVICE_TYPE.WMS, - typeName: 'sewer:collectingbasin', + typeName: 'sewer:chokevalve', + icon: 'sewers/.png', checked: false }, { @@ -61,7 +63,8 @@ sname: '婧㈡祦鍫�', minZoom: 16, type: SERVICE_TYPE.WMS, - typeName: 'ewer:overflowweir', + typeName: 'sewer:overflowweir', + icon: 'sewers/.png', checked: false }, { @@ -71,7 +74,7 @@ minZoom: 16, checked: false, type: SERVICE_TYPE.WMS, - typeName: 'ewer:oilseparator', + typeName: 'sewer:oilseparator', icon: 'sewers/闅旀补姹�.png' } ] diff --git a/src/conf/layers/LayerPipeLines.js b/src/conf/layers/LayerPipeLines.js index bbccde9..5fd131f 100644 --- a/src/conf/layers/LayerPipeLines.js +++ b/src/conf/layers/LayerPipeLines.js @@ -16,8 +16,8 @@ { code: 'rainline', name: '闆ㄦ按绾�', - sname: '绠$綉', - checked: false, + sname: '闆ㄦ按', + checked: true, type: SERVICE_TYPE.WMS, layerGroup: 'sewer:pipeline_group', typeName: 'sewer:pipeline', @@ -30,7 +30,7 @@ FILL_COLOR: '#0070ff' }, filter: 'mediumtype = \'闆ㄦ按\'', - index: 1 + index: 20 }, { code: 'accidentline', @@ -40,9 +40,16 @@ type: SERVICE_TYPE.WMS, layerGroup: 'sewer:pipeline_group', typeName: 'sewer:pipeline', + icon: 'sewers/浜嬫晠姘�.png', minZoom: 13, + // color: 'rgb(230, 76, 0)', + color: '#E64C00', + styles: { + COLOR: '#E64C00', + FILL_COLOR: '#E64C00' + }, filter: 'mediumtype = \'浜嬫晠姘碶'', - index: 1 + index: 20 }, { code: 'oilline', @@ -52,6 +59,7 @@ type: SERVICE_TYPE.WMS, layerGroup: 'sewer:pipeline_group', typeName: 'sewer:pipeline', + icon: 'sewers/鍚补姹℃按.png', minZoom: 13, color: '#ffaa00', filter: 'mediumtype = \'鍚补姹℃按\'', @@ -59,7 +67,7 @@ COLOR: '#ffaa00', FILL_COLOR: '#ffaa00' }, - index: 1 + index: 20 }, { code: 'saltline', @@ -69,9 +77,15 @@ type: SERVICE_TYPE.WMS, layerGroup: 'sewer:pipeline_group', typeName: 'sewer:pipeline', + icon: 'sewers/鍚洂姹℃按.png', minZoom: 13, + color: '#FF7F7F', filter: 'mediumtype = \'鍚洂姹℃按\'', - index: 1 + styles: { + COLOR: '#FF7F7F', + FILL_COLOR: '#FF7F7F' + }, + index: 20 }, { code: 'alkaliline', @@ -81,9 +95,15 @@ type: SERVICE_TYPE.WMS, layerGroup: 'sewer:pipeline_group', typeName: 'sewer:pipeline', + icon: 'sewers/鍚⒈姹℃按.png', filter: 'mediumtype = \'鍚⒈姹℃按\'', minZoom: 10, - index: 1 + color: '#E8BEFF', + styles: { + COLOR: '#E8BEFF', + FILL_COLOR: '#E8BEFF' + }, + index: 20 }, { code: 'sulfurline', @@ -93,9 +113,15 @@ type: SERVICE_TYPE.WMS, layerGroup: 'sewer:pipeline_group', typeName: 'sewer:pipeline', + icon: 'sewers/鍚~姹℃按.png', filter: 'mediumtype = \'鍚~姹℃按\'', minZoom: 10, - index: 1 + color: '', + styles: { + COLOR: '', + FILL_COLOR: '' + }, + index: 20 }, { code: 'lifeline', @@ -105,9 +131,15 @@ type: SERVICE_TYPE.WMS, layerGroup: 'sewer:pipeline_group', typeName: 'sewer:pipeline', + icon: 'sewers/鐢熸椿姹℃按.png', filter: 'mediumtype = \'鐢熸椿姹℃按\'', minZoom: 13, - index: 1 + color: '#A8A800', + styles: { + COLOR: '#A8A800', + FILL_COLOR: '#A8A800' + }, + index: 20 }, { code: 'purifyline', @@ -117,9 +149,15 @@ type: SERVICE_TYPE.WMS, layerGroup: 'sewer:pipeline_group', typeName: 'sewer:pipeline', + icon: 'sewers/鍑�鍖栨按.png', filter: 'mediumtype = \'鍑�鍖栨按\'', minZoom: 13, - index: 1 + color: '#55FF00', + styles: { + COLOR: '#55FF00', + FILL_COLOR: '#55FF00' + }, + index: 20 }, { code: 'loopline', @@ -128,10 +166,16 @@ type: SERVICE_TYPE.WMS, layerGroup: 'sewer:pipeline_group', typeName: 'sewer:pipeline', + icon: 'sewers/寰幆姘�.png', filter: 'mediumtype = \'寰幆姘碶'', checked: false, minZoom: 13, - index: 1 + color: '#73FFDF', + styles: { + COLOR: '#73FFDF', + FILL_COLOR: '#73FFDF' + }, + index: 20 }, { code: 'buildline', @@ -141,6 +185,7 @@ type: SERVICE_TYPE.WMS, layerGroup: 'sewer:pipeline_group', typeName: 'sewer:pipeline', + icon: 'sewers/鐢熶骇姹℃按.png', filter: 'mediumtype = \'鐢熶骇姹℃按\'', minZoom: 13, color: '#a8a800', @@ -148,7 +193,7 @@ COLOR: '#a8a800', FILL_COLOR: '#a8a800' }, - index: 1 + index: 20 } ] } diff --git a/src/conf/layers/LayerPk.js b/src/conf/layers/LayerPk.js index edcb323..ab105be 100644 --- a/src/conf/layers/LayerPk.js +++ b/src/conf/layers/LayerPk.js @@ -13,7 +13,7 @@ { code: 'sewersNpk', name: '鍐呮帓鍙�', - sname: '鍐呮帓鍙�', + sname: '鍐呮帓', checked: false, type: SERVICE_TYPE.WMS, icon: 'sewers/闆ㄦ按鎺掑彛.png', @@ -24,7 +24,7 @@ { code: 'sewersWpk', name: '澶栨帓鍙�', - sname: '澶栨帓鍙�', + sname: '澶栨帓', icon: 'sewers/闆ㄦ按鎺掑彛.png', checked: false, // 榛樿閫変腑鐘舵�� type: SERVICE_TYPE.WMS, diff --git a/src/conf/layers/LayerSurroundings.js b/src/conf/layers/LayerSurroundings.js index 9b55d72..f4f0801 100644 --- a/src/conf/layers/LayerSurroundings.js +++ b/src/conf/layers/LayerSurroundings.js @@ -22,7 +22,7 @@ code: 'sewersXx', name: '瀛︽牎', sname: '瀛︽牎', - icon: 'sewers/鍖婚櫌.png', + icon: 'sewers/瀛︽牎.png', checked: false, // 榛樿閫変腑鐘舵�� type: SERVICE_TYPE.WMS, minZoom: 10 @@ -41,7 +41,7 @@ code: 'sewersZrbhq', name: '鑷劧淇濇姢鍖�', sname: '鑷劧淇濇姢鍖�', - icon: 'sewers/鍖婚櫌.png', + icon: 'sewers/鑷劧淇濇姢鍖�.png', checked: false, // 榛樿閫変腑鐘舵�� type: SERVICE_TYPE.WMS, wfs: 'sewer:pointpreservationzone', @@ -51,7 +51,7 @@ code: 'sewersMgmb', name: '鏁忔劅鐩爣', sname: '鏁忔劅鐩爣', - icon: 'sewers/鍖婚櫌.png', + icon: 'sewers/鏁忔劅鐩爣.png', checked: false, // 榛樿閫変腑鐘舵�� type: SERVICE_TYPE.WMS, wfs: 'sewer:sensitivetarget', diff --git "a/src/conf/\345\233\276\345\261\202\351\205\215\347\275\256\350\257\264\346\230\216.md" "b/src/conf/\345\233\276\345\261\202\351\205\215\347\275\256\350\257\264\346\230\216.md" new file mode 100644 index 0000000..a133066 --- /dev/null +++ "b/src/conf/\345\233\276\345\261\202\351\205\215\347\275\256\350\257\264\346\230\216.md" @@ -0,0 +1,8 @@ +##閰嶇疆wms + + type: SERVICE_TYPE.WMS, //琛ㄦ槑杩欐槸涓�涓獁ms鏈嶅姟閰嶇疆 + layerGroup: 'sewer:pipeline_group', //鍥惧眰缁勶紝濡傛灉娌℃湁灏变笉瑕佹椤癸紝涓嶈閰嶇疆绌猴紒锛侊紒 + typeName: 'sewer:pipeline', //geoserver閰嶇疆鐨勫浘灞傚悕绉� + filter: 'mediumtype = \'鍑�鍖栨按\'', //绛夊悓浜巜ms鐨刢ql_filter + index: 5 //閰嶇疆鏄剧ず鍦ㄥ湴鍥句笂鐨勫眰绾э紝濡傛灉鏄潰鍒欓厤缃�1>=涓�<20,濡傛灉鏄嚎鐞嗚涓婂彲浠ラ厤缃�>=20锛岀浉鍚宭ayerGroup鐨勫彲浠ラ噸澶嶏紝涓嶅悓鐨勪笉鑳介噸澶嶏紒锛侊紒 + diff --git a/src/main.js b/src/main.js index be81e98..a2d5681 100644 --- a/src/main.js +++ b/src/main.js @@ -18,6 +18,8 @@ import '@components/plugin/leaflet-measure-path/leaflet-measure-path.css' import '@components/plugin/leaflet-measure-path/leaflet-measure-path' import '@components/plugin/PathDrag' +// import '@components/plugin/flowline' + import layer from './components/layer' const appConfig = require('@/app.config') Vue.config.productionTip = false diff --git a/src/utils/utils.js b/src/utils/utils.js index 2328fd0..c187b1c 100644 --- a/src/utils/utils.js +++ b/src/utils/utils.js @@ -27,15 +27,15 @@ * 鑴夊啿鏁堟灉 */ export function pulseEffect (xy) { - let times = 5 - const colors = ['#98FB98', '#ff0000'] + let times = 1000 + const colors = ['#00f100', '#ff0000'] // 鎻掍欢 鏁堟灉瀹炵幇 var pulsingIcon = window.L.icon.pulse({ - iconSize: [20, 20], + iconSize: [30, 30], color: colors[0], fillColor: '' }) - var picGroupMarker = window.L.marker(xy, { icon: pulsingIcon }).addTo(window.map) + var picGroupMarker = window.L.marker(xy, { icon: pulsingIcon }).addTo(window.mapManager.hightlightLayer) // 瀹氭椂 var timeInterval = setInterval(() => { if (times > 0) { @@ -45,6 +45,35 @@ picGroupMarker.remove() } }, 1000) +} + +export function reversePolyLine (feature) { + const coordinates = clone(feature.geometry.coordinates) + var latlng = [] + for (var j = 0; j < coordinates.length; j++) { + let coordinate = coordinates[j] + coordinate = [coordinate[1], coordinate[0]] + latlng.push(coordinate) + } + return latlng +} + +export function reverseMultiLine (feature) { + const coordinates = clone(feature.geometry.coordinates) + var latlng = [] + for (var j = 0; j < coordinates.length; j++) { + const coordinate = coordinates[j] + var xy = [] + for (var k = 0; k < coordinate.length; k++) { + let coor = coordinate[k] + if (coor.length > 2) { + coor = coor.splice(2, 1) + } + xy.push(coor.reverse()) + } + latlng.push(xy) + } + return latlng } /** @@ -116,4 +145,13 @@ } } +/** + * 鍘绘帀涓ゅご绌烘牸 + * @param str + * @returns {*} + */ +export function lrtrim (str) { + return str.replace(/^\s+|\s+$/g, '') +} + export default clone diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue index ad0d425..234f7e0 100644 --- a/src/views/MapTemplate.vue +++ b/src/views/MapTemplate.vue @@ -17,8 +17,9 @@ <!-- <el-button type="primary" @click="ChangeWaterState" class="Waste-water">搴熸按</el-button>--> <!-- <el-button type="primary" @click="AddGasHelper" class="flue-gas">搴熸皵</el-button>--> <!-- <PublicBounced ref="PublicBounced"></PublicBounced>--> -<!-- <ReportPopup></ReportPopup>--> + <ReportPopup></ReportPopup> <Emergency ref="Emergency"></Emergency> + <Message></Message> </div> </template> @@ -29,8 +30,8 @@ import SgisLayerController from '@components/LayerController/LayerController' import MonitorPanel from '@components/panel/RightSearchPanel' // import TopEnterprisePanel from '@components/panel/TopEnterprisePanel' -// import summarySheets from '@components/table/summarySheets.vue' -import SummarySheet from '@components/table/SummarySheet' +// import summarySheets from '@components/table/summarySheets.vue'SummarySheet +import SummarySheet from '@components/table/summarySheets' import ToolBoxPanel from '@components/panel/ToolBoxPanel' // import MenuSpecial from '@components/panel/MenuTopic' import LegendPanel from '@components/panel/LegendPanel' @@ -38,9 +39,10 @@ // // 鍏叡灞曠ず鏁版嵁 // import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced' import LayerFactory from '@components/LayerController/service/LayerFactory' -import EventHandler from '../components/LayerController/event/EventHandler' -// import ReportPopup from '../components/panel/topicSearch/SewersSelect/EnterpriseEmergency/ReportPopup' +import ReportPopup from '../components/panel/topicSearch/EnterpriseEmergency/ReportPopup' import Emergency from '@components/emergency/index' +import MapManager from '../components/helpers/MapManager' +import Message from '@components/message/index' export default { name: 'MapTemplate', @@ -55,8 +57,9 @@ // summarySheets, SummarySheet, // PublicBounced, - Emergency - // ReportPopup + Emergency, + Message, + ReportPopup }, data () { return { @@ -102,10 +105,6 @@ // this.AddGasHelper() // this.ChangeWaterState() - - var eventHandler = new EventHandler() - window.eventHandler = eventHandler - var layerFactory = new LayerFactory({ L: window.L, map: this.map @@ -113,6 +112,8 @@ layerFactory.init(this.$store.state.map.serviceLayers.LayerSewersLine) layerFactory.initEvent(this.$store.state.map.serviceLayers.LayerSewersLine) window.layerFactory = layerFactory + window.mapManager = new MapManager() + window.mapManager.mapClickListener() this.saveMapStatus() // this.setMapObj(this.mapObj) // this.setBasemapHelper(this.basemapHelper) diff --git a/src/views/popup/Dialog.vue b/src/views/popup/Dialog.vue index 516e523..e85e73c 100644 --- a/src/views/popup/Dialog.vue +++ b/src/views/popup/Dialog.vue @@ -1,9 +1,10 @@ <template> - <el-dialog v-dialogDrag + <el-dialog + v-dialogDrag :title="title" :visible.sync="centerDialogVisible" :modal="false" - :close-on-click-modal="false" + :close-on-click-modal="true" @close='closeDialog' center> <slot></slot> diff --git a/src/views/popup/Popup.vue b/src/views/popup/Popup.vue index a3c7836..242aea0 100644 --- a/src/views/popup/Popup.vue +++ b/src/views/popup/Popup.vue @@ -1,16 +1,32 @@ <template> <div id="popup" class="s-map-popup-panel" style="min-width: 280px;max-width: 280px;padding: 0 10px"> - <el-tabs value="0" type="card"> + <el-tabs type="card" v-model="tabIndex" @tab-click="handleClick"> <el-tab-pane - :key="item.name" + :key="index" v-for="(item,index) in datas" :label="item.title" - :name="index" + :name="index.toString()" > - <el-row v-for="(v,k) in filter(item.content)" :key="k"> - <el-col :span="12"><B>{{k}}锛�</B></el-col> - <el-col :span="12">{{v}}</el-col> + <el-row v-for="(item,key) in item.content" :key="key"> + <el-col :span="12"><B>{{key}}锛�</B></el-col> + <el-col :span="12">{{item}}</el-col> </el-row> + <el-table v-if="item.tableList" + :data="item.tableList" + style="width: 100%"> + <el-table-column + prop="pipesegcode" + label="绠℃缂栫爜"> + </el-table-column> + <el-table-column + prop="startpointdepth" + label="璧风偣鍩嬫繁(m)"> + </el-table-column> + <el-table-column + prop="startpointz" + label="璧风偣楂樼▼(m)"> + </el-table-column> + </el-table> </el-tab-pane> </el-tabs> </div> @@ -18,7 +34,8 @@ <script> // import '@/assets/css/map/map-popup.scss' -import { props } from '../../conf/Constants' + +import { highlight } from '../../components/helpers/LocateHelper' export default { name: 'Popup', @@ -26,10 +43,9 @@ data () { return { tabsValue: '', - tabIndex: 2, + tabIndex: 0, isShow: false, - properties: {}, - props: props + properties: {} } }, computed: { @@ -45,23 +61,18 @@ // console.log(obj) return obj }, - setDatas (layer) { - console.log(layer) - this.datas = layer - this.tabsValue = layer[0].name - }, setShow () { // this.style.display='auto' this.isShow = true }, - onClick () { - const param = 1111 - this.$emit('callPopup', param) + handleClick (tab, event) { + const data = this.datas[this.tabIndex] + const feature = data.feature + highlight(feature) } }, watch: { datas (newVal) { - console.log(newVal) if (newVal != null) { this.tabsValue = newVal[0].name } -- Gitblit v1.8.0