From 71c663091d05b11c41f78d8e75cb8b3db63b9cbc Mon Sep 17 00:00:00 2001 From: yangdelong <828900aaa> Date: 星期六, 29 五月 2021 16:26:54 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/develop' into develop --- src/components/base-page/enterprise-emergency/discard/PipelineFile.vue | 10 src/components/LayerController/logic/EnvironmentRisk.js | 13 src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue | 90 +++++- src/components/base-page/enterprise-emergency/discard/PositionChange.vue | 3 src/components/LayerController/logic/RiskSource.js | 10 public/assets/environmentRiskPoint.json | 24 src/components/base-page/RiskSource/PublicTabs.vue | 120 ++++++++ src/views/MapTemplate.vue | 2 src/components/base-page/enterprise-emergency/events-reported/ReportLocation.vue | 117 ------- src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue | 111 +++++++ src/components/base-page/enterprise-emergency/discard/ReportIncident.vue | 6 src/components/base-page/RiskSource/RiskSourceIndex.vue | 100 ++++++ src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue | 22 src/components/base-page/enterprise-emergency/events-reported/EventsReported.vue | 14 src/components/base-page/RiskSource/PublicTable.vue | 246 ++++++++++++++++ src/utils/utils.js | 2 16 files changed, 707 insertions(+), 183 deletions(-) diff --git a/public/assets/environmentRiskPoint.json b/public/assets/environmentRiskPoint.json index a8da368..7a65236 100644 --- a/public/assets/environmentRiskPoint.json +++ b/public/assets/environmentRiskPoint.json @@ -1,7 +1,7 @@ [ [ { - "no": 1, + "no": 0, "company": "鎵瓙鐭冲寲", "plate": "鐐兼补鏉垮潡", "unitname": "鑺崇儍鍘傘�佺偧娌瑰巶", @@ -10,10 +10,10 @@ "after": "R4(115.48)M1(10)E1", "Longitude": 118.7936111111, "Latitude": 32.2583305556, - "iconType": 1 + "riskLevel": 1 }, { - "no": 2, + "no": 0, "company": "鎵瓙鐭冲寲", "plate": "鍖栧伐鏉垮潡", "unitname": "姘村巶", @@ -22,7 +22,7 @@ "after": "R3(25)M1(10)E1", "Longitude": 118.8174111111, "Latitude": 32.2429611111, - "iconType": 1 + "riskLevel": 1 } ],[ { @@ -35,10 +35,10 @@ "after": "R3(90)M2(25)E1", "Longitude": 113.36571, "Latitude": 29.54677, - "iconType": 2 + "riskLevel": 2 }, { - "no": 2, + "no": 1, "company": "闀垮箔鐐煎寲", "plate": "鍖栧伐鏉垮潡", "unitname": "娓彛閮�", @@ -47,11 +47,11 @@ "after": "Q3(29)M3(30)E1", "Longitude": 113.2917, "Latitude": 29.60036, - "iconType": 2 + "riskLevel": 2 } ],[ { - "no": 1, + "no": 2, "company": "闀垮箔鐐煎寲", "plate": "鍖栧伐鏉垮潡", "unitname": "娓彛閮�", @@ -60,7 +60,7 @@ "after": "Q3(19)M3(30)E1", "Longitude": 113.27935, "Latitude": 29.59832, - "iconType": 3 + "riskLevel": 3 }, { "no": 2, @@ -72,11 +72,11 @@ "after": "R3(2.1)M3(30)E2", "Longitude": 113.28155, "Latitude": 29.59842, - "iconType": 3 + "riskLevel": 3 } ],[ { - "no": 1, + "no": 3, "company": "涓煩鐭冲寲", "plate": "鐐兼补鏉垮潡", "unitname": "鐐兼补浜岄儴", @@ -85,7 +85,7 @@ "after": "R3M2E1", "Longitude": 114.44016, "Latitude": 30.65305, - "iconType": 4 + "riskLevel": 4 } ] ] diff --git a/src/components/LayerController/logic/EnvironmentRisk.js b/src/components/LayerController/logic/EnvironmentRisk.js index ae50da3..677e670 100644 --- a/src/components/LayerController/logic/EnvironmentRisk.js +++ b/src/components/LayerController/logic/EnvironmentRisk.js @@ -9,7 +9,6 @@ const echarts = require('echarts/lib/echarts') module.exports = function () { - let animalService = null // 鐜舰缁熻鍥炬暟缁� let riskLayerGroup = null @@ -18,7 +17,7 @@ * @param L leaflet瀵硅薄 */ this.init = async (layer, L) => { - animalService = new AnimalService({ + this.animalService = new AnimalService({ L: L, layer: layer }) @@ -33,7 +32,7 @@ riskLayerGroup.remove() riskLayerGroup = null } - riskLayerGroup = animalService.L.featureGroup().addTo(animalService.layer) + riskLayerGroup = this.animalService.L.featureGroup().addTo(this.animalService.layer) const result = await mapApi.getEnvironmentRisk() const features = result.features for (let i = 0; i < features.length; i++) { @@ -46,16 +45,16 @@ if (distract !== '闀挎睙娌跨嚎') { continue } - animalService.L.marker([coordinates[1], coordinates[0]], { - icon: animalService.L.divIcon({ + this.animalService.L.marker([coordinates[1], coordinates[0]], { + icon: this.animalService.L.divIcon({ className: '', iconAnchor: [15, 45], iconSize: [40, 40], html: '<div style="width: 40px; height: 40px; background-color: rgba(255,255,255,1); position: relative; border-radius: 50%;"></div>' }) }).addTo(riskLayerGroup) - animalService.L.marker([coordinates[1], coordinates[0]], { - icon: animalService.L.divIcon({ + this.animalService.L.marker([coordinates[1], coordinates[0]], { + icon: this.animalService.L.divIcon({ className: '', iconAnchor: [30, 60], iconSize: [70, 70], diff --git a/src/components/LayerController/logic/RiskSource.js b/src/components/LayerController/logic/RiskSource.js index 2f1f882..6384554 100644 --- a/src/components/LayerController/logic/RiskSource.js +++ b/src/components/LayerController/logic/RiskSource.js @@ -2,7 +2,7 @@ * 鐜椋庨櫓婧� */ // 淇℃伅缁勪欢 -const RiskSourceIndex = require('../../../components/base-page/WasteSolid/WasteSolidIndex.vue').default +const RiskSourceIndex = require('../../base-page/RiskSource/RiskSourceIndex.vue').default const riskRed = '/assets/images/map/environmentRisk/risk_red.png' const riskSandybrown = '/assets/images/map/environmentRisk/risk_sandybrown.png' const riskYellow = '/assets/images/map/environmentRisk/risk_yellow.png' @@ -28,7 +28,7 @@ const data = result[config.level] // 姝ゅ绾у埆瀵瑰簲data鏁扮粍涓嬫爣锛屼綔涓哄弬鏁板彇鏁版爣璇� for (let i = 0; i < data.length; i++) { const postion = [data[i].Latitude, data[i].Longitude] // 鍧愭爣 - const iconUrl = this.riskIconUrl(data[i].iconType) // 椋庨櫓婧愬浘鏍� + const iconUrl = this.riskIconUrl(data[i].riskLevel) // 椋庨櫓婧愬浘鏍� const marker = L.marker(postion, { totransferData: data[i], icon: L.icon({ @@ -55,9 +55,9 @@ * @param e */ this.clickListener = (e) => { - // 鐐瑰嚮marker鐨刾ulse()鍏夋尝 + // 鑴夊啿鏁堟灉 this.animalService.pulseEffect(e.latlng) - /* flyTo()寮瑰嚭妗嗗钩绉讳簨浠� */ + // 淇℃伅寮圭獥骞崇Щ setPanTo(e.latlng, 200) // 寮规鏍囬 const title = e.layer.options.totransferData.Name @@ -66,7 +66,7 @@ comp: RiskSourceIndex, // 缁勪欢 parent: this, // 鐖剁粍浠� data: { // 浼犻�掔殑鍙傛暟 - storagePlaceId: e.layer.options.totransferData.StoragePlaceId + riskSourceId: e.layer.options.totransferData.no } }, title: title // 鏍囬 diff --git a/src/components/base-page/RiskSource/PublicTable.vue b/src/components/base-page/RiskSource/PublicTable.vue new file mode 100644 index 0000000..b71482e --- /dev/null +++ b/src/components/base-page/RiskSource/PublicTable.vue @@ -0,0 +1,246 @@ +<template> + <div class="slotChildTable"> + <span></span> + <span></span> + <span></span> + <span></span> + <div class="main-table"> + <div class=""> + <ul> + <li>椋庨櫓璇勪及杩囩▼</li> + <li>鍒濆璇勪环缁撴灉:{{ riskSourceAssess }}</li> + </ul> + </div> + <div> + <table border="1"> + <tr> + <th colspan="2">椋庨櫓鎺у埗</th> + <th>璇勪及鎸囨爣</th> + <th>鍒嗗��</th> + </tr> + <tr> + <td rowspan="3" colspan="2">瀹夊叏绠$悊锛�25鍒嗭級</td> + <td>閲嶅ぇ鎴栬緝澶х敓浜у畨鍏ㄤ簨鏁呴殣鎮f湭瀹屾垚鏁存敼鐨勮25鍒嗐��</td> + <td rowspan="3">25</td> + </tr> + <tr> + <td>涓�鑸敓浜у畨鍏ㄤ簨鏁呴殣鎮f湭瀹屾垚鏁存敼鐨勶紝姣忎竴椤硅10鍒嗭紝璁版弧25鍒嗕负姝€��</td> + </tr> + <tr> + <td>涓嶅瓨鍦ㄤ笂杩伴棶棰樼殑璁�0鍒嗐��</td> + </tr> + <tr> + <td rowspan="3" colspan="2">璁惧璐ㄩ噺绠$悊锛�25鍒嗭級</td> + <td>瀛樺湪涓嬪垪浠绘剰涓�椤圭殑璁�25鍒嗭細 + 锛�1锛夋湭鎸夎瀹氳繘琛岃澶囪鏂芥娴嬨�佹楠岀殑锛� + 锛�2锛夋娴嬬粨鏋滀笉鑳芥弧瓒宠澶囪鏂借川閲忚姹傜殑锛� + 锛�3锛夋湭鎸夎璁℃爣鍑嗗缓璁剧殑锛� + 锛�4锛変娇鐢ㄧ殑璁惧璁炬柦绛夌骇涓嶆弧瓒宠姹傜殑銆� + </td> + <td rowspan="3">10</td> + </tr> + <tr> + <td>瀛樺湪涓嬪垪鎯呭喌鐨勶紝姣忛」璁�10鍒嗭紝璁版弧25鍒嗕负姝細 + 锛�1锛夎澶囪鏂借秴鏈熶娇鐢ㄤ笖鏈粡杩囪瘎浼扮殑锛� + 锛�2锛夎澶囪鏂介檷绛夌骇浣跨敤鏈粡璇勪及鐨勶紱 + 锛�3锛夎璁″彉鏇存湭缁忎富绠¢儴闂ㄦ壒鍑嗙殑銆� + </td> + </tr> + <tr> + <td>涓嶅瓨鍦ㄤ笂杩伴棶棰樼殑璁�0鍒嗐��</td> + </tr> + <tr> + <td rowspan="9">鐜椋庨櫓闃叉帶鎺柦鏈夋晥鎬э紙50鍒嗭級</td> + <td rowspan="2">浜嬫晠绱ф�ュ叧鏂帾鏂斤紙15鍒嗭級</td> + <td>鐜椋庨櫓婧愪笉鍏峰鏈夋晥鐨勪簨鏁呯揣鎬ュ叧鏂帾鏂界殑锛堢鍚堢揣鎬ュ叧鏂椂鏁堣锛夎15鍒嗐��</td> + <td rowspan="2">15</td> + </tr> + <tr> + <td>鐜椋庨櫓婧愬叿澶囨湁鏁堢殑浜嬫晠绱ф�ュ叧鏂帾鏂界殑锛堢鍚堢揣鎬ュ叧鏂椂鏁堣姹傦級璁�0鍒嗐��</td> + </tr> + <tr> + <td rowspan="3">寤鸿椤圭洰鐜椋庨櫓闃叉帶瑕佹眰钀藉疄锛�10鍒嗭級</td> + <td>鏃犱簨鏁呴闄╃墿璐ㄥ缃帾鏂借15鍒嗐��</td> + <td rowspan="3">10</td> + </tr> + <tr> + <td>瀛樺湪浠ヤ笅鎯呭喌鐨勶紝姣忛」璁�5鍒嗭紝璁版弧15鍒嗕负姝細 + 锛�1锛変簳鍦烘湭鎸夎姹傝鎺掓按鐩戞帶姹犵殑锛� + 锛�2锛変簳鍦烘湭鎸夎姹傝鍥村牥鐨勶紱 + 锛�3锛夊瓨鍦ㄤ袱涓強浠ヤ笂闆ㄦ按鎺掓斁鍙g殑銆� + </td> + </tr> + <tr> + <td>涓嶅瓨鍦ㄤ笂杩伴棶棰樼殑璁�0鍒嗐��</td> + </tr> + <tr> + <td rowspan="2">寤鸿椤圭洰鐜椋庨櫓闃叉帶瑕佹眰钀藉疄锛�10鍒嗭級</td> + <td>寤鸿椤圭洰鐜褰卞搷璇勪环鍙婂叾鎵瑰鎻愬嚭鐨勭幆澧冮闄╅槻鎺ф帾鏂戒笉钀藉疄鐨勮10鍒嗐��</td> + <td rowspan="2">0</td> + </tr> + <tr> + <td>涓嶅瓨鍦ㄤ笂杩伴棶棰樼殑璁�0鍒嗐��</td> + </tr> + <tr> + <td rowspan="2">鐜椋庨櫓婧愪簨鏁呯幇鍦哄缃柟妗堬紙10鍒嗭級</td> + <td>瀛樺湪浠ヤ笅鎯呭喌鐨勶紝姣忛」璁�5鍒嗭紝璁版弧10鍒嗕负姝細 + 锛�1锛夋棤鐜椋庨櫓婧愪簨鏁呭缃柟妗堢殑鎴栫幆澧冮闄╂簮浜嬫晠澶勭疆鏂规鏃犵幆淇濆唴瀹圭殑锛� + 锛�2锛夋湭鎸夎姹傚紑灞曟紨缁冨苟璁板綍鐨勶紱 + 锛�3锛夋湭鎸夎姹傝繘琛屽妗堢殑銆� + </td> + <td rowspan="2">5</td> + </tr> + <tr> + <td>涓嶅瓨鍦ㄤ笂杩伴棶棰樼殑璁�0鍒嗐��</td> + </tr> + </table> + </div> + <el-table :data="riskSourceDetail" style="width: 100%" height="200px" :row-class-name="tableRowClassName"> + <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop" + :label="item.label" :show-overflow-tooltip="true"></el-table-column> + </el-table> + </div> + </div> +</template> + +<script> +import mapApi from '@/api/mapApi' + +export default { + name: 'PublicTable', + data () { + return { + riskSourceDetail: [], + riskSourceAssess: '鏍规嵁椋庨櫓婧愬懆杈圭幆澧冮闄╁彈浣�3绉嶇被鍨嬶紝鎸夌収鐜椋庨櫓鐗╄川閲�(Q/R)銆佺幆澧冮闄╂帶鍒舵按骞�(M)鐭╅樀锛岀‘瀹氱幆澧冮闄╃瓑绾�', + listLabel: [ + { + label: '搴忓彿', + prop: 'no' + }, + { + label: '鍚嶇О', + prop: 'riskname' + }, + { + label: '璇勪及绛夌骇', + prop: 'riskLevel' + }, + { + label: '绛夌骇鐗瑰緛', + prop: 'after' + }, + { + label: 'Q鍊�', + prop: 'riskLevel' + }, + { + label: 'M鍊�', + prop: 'riskLevel' + }, + { + label: 'E鍊�', + prop: 'riskLevel' + } + ] + } + }, + mounted () { + this.$nextTick(() => { + }) + }, + methods: { + async refsRiskDataTable (param) { + // 姝ゅ鎺ュ彛涓烘牴鎹闄╂簮ID鑾峰彇椋庨櫓婧愯瘎浼版暟鎹紙鏆傛椂涓烘ā鎷熸暟鎹級 + const result = await mapApi.getEnvironmentRiskPoint(param) + this.riskSourceDetail = result[param.riskSourceId] + }, + // 闅旇棰滆壊璁剧疆 + tableRowClassName ({ + row, + rowIndex + }) { + if (rowIndex % 2 === 0) { + return 'warning-row' + } else if (rowIndex % 2 === 1) { + return 'success-row' + } + return '' + } + } +} +</script> + +<style lang="less" scoped> + +/deep/ .el-table thead tr { + color: #02a6b5 !important; + //.el-table .has-gutter tr th .cell { + // //color: #fff; 435 + //} +} + +/deep/ .el-table td { + border-bottom: none !important; +} + +/deep/ .el-table .has-gutter tr th { + border: none; +} + +/deep/ .el-table th.is-leaf { + border-bottom: none !important; +} + +/deep/ .el-table td { + height: 30px !important; + line-height: 30px !important; +} + +/deep/ .el-table tbody tr:hover > td { + background: none !important +} + +.slotChildTable { + position: relative; + background: rgba(33, 41, 69, 0.9); + + .main-table { + border: 1px #396d83 solid; + } +} + +.slotChildTable span { + padding: 6px; + border-style: solid; + border-color: #02a6b5; +} + +.slotChildTable span:nth-child(1) { + position: absolute; + left: -1px; + top: -1px; + border-width: 1px 0 0 1px; +} + +.slotChildTable span:nth-child(2) { + position: absolute; + right: -1px; + top: -1px; + border-width: 1px 1px 0 0; +} + +.slotChildTable span:nth-child(3) { + position: absolute; + right: -1px; + bottom: -1px; + border-width: 0 1px 1px 0; +} + +.slotChildTable span:nth-child(4) { + position: absolute; + left: -1px; + bottom: -1px; + border-width: 0 0 1px 1px; +} + +</style> diff --git a/src/components/base-page/RiskSource/PublicTabs.vue b/src/components/base-page/RiskSource/PublicTabs.vue new file mode 100644 index 0000000..b1beb91 --- /dev/null +++ b/src/components/base-page/RiskSource/PublicTabs.vue @@ -0,0 +1,120 @@ +<template> + <div class="slotChildTabs"> + <span></span> + <span></span> + <span></span> + <span></span> + <div class="tabs-content"> + <ul> + <li>椋庨櫓鍚嶇О:{{ riskSourceBaseInfo.riskname }}</li> + <li>椋庨櫓绾у埆:{{ riskSourceBaseInfo.riskLevel }}</li> + <li>椋庨櫓鎻忚堪:{{ riskSourceBaseInfo.depiction }}</li> + <li class="lastli"></li> + </ul> + </div> + </div> +</template> + +<script> +import mapApi from '@/api/mapApi' + +export default { + name: 'PublicTabs', + data () { + return { + riskSourceBaseInfo: [] + } + }, + mounted () { + this.$nextTick(() => { + // this.refsDataTabs() + }) + }, + methods: { + async refsRiskDataTabs (param) { + // 姝ゅ鎺ュ彛涓烘牴鎹闄╂簮ID鑾峰彇椋庨櫓婧愬熀鏈俊鎭紙鏆傛椂涓烘ā鎷熸暟鎹級 + const result = await mapApi.getEnvironmentRiskPoint(param) + this.riskSourceBaseInfo = result[param.riskSourceId][0] + } + } +} +</script> + +<style scoped lang="less"> + +.slotChildTabs { + position: relative; + margin-bottom: 0.1rem; + background-color: @background-color; + + .tabs-content { + font-size: 0.06rem; + font-weight: normal; + padding: 0.04rem 0; + border: 1px solid #396d83; + + ul { + display: flex; + align-items: center; + justify-content: space-around; + flex-wrap: wrap; + + li { + margin-bottom: 0.04rem; + text-align: center; + min-width: 30%; + background-color: #243a55; + color: #00d0f9; + border-radius: 0.02rem; + font-size: 0.08rem; + line-height: 0.09rem; + padding: 0.03rem .5%; + } + + .lastli { + visibility: hidden + } + } + } +} + +.slotChildTabs span:nth-child(1) { + position: absolute; + left: -1px; + top: -1px; + padding: 6px; + border-style: solid; + border-color: #02a6b5; + border-width: 1px 0 0 1px; +} + +.slotChildTabs span:nth-child(2) { + position: absolute; + right: -1px; + top: -1px; + padding: 6px; + border-style: solid; + border-color: #02a6b5; + border-width: 1px 1px 0 0; +} + +.slotChildTabs span:nth-child(3) { + position: absolute; + right: -1px; + bottom: -1px; + padding: 6px; + border-style: solid; + border-color: #02a6b5; + border-width: 0 1px 1px 0; +} + +.slotChildTabs span:nth-child(4) { + position: absolute; + left: -1px; + bottom: -1px; + padding: 6px; + border-style: solid; + border-color: #02a6b5; + border-width: 0 0 1px 1px; +} +</style> diff --git a/src/components/base-page/RiskSource/RiskSourceIndex.vue b/src/components/base-page/RiskSource/RiskSourceIndex.vue new file mode 100644 index 0000000..11b0a01 --- /dev/null +++ b/src/components/base-page/RiskSource/RiskSourceIndex.vue @@ -0,0 +1,100 @@ +<template> + <public-sector> + <template v-slot:tabs> + <public-tabs ref='refsRiskTabsData'></public-tabs> + </template> + <template v-slot:publicPart> + <public-table ref="refsRiskTableData"></public-table> + </template> +<!-- <template v-slot:video>--> +<!-- <public-video></public-video>--> +<!-- </template>--> + </public-sector> +</template> + +<script> + +import PublicTabs from '@components/base-page/RiskSource/PublicTabs' +import PublicTable from '@components/base-page/RiskSource/PublicTable' +// import PublicVideo from '@components/base-page/PublicVideo' +import PublicSector from '@components/base-page/PublicSector' + +export default { + name: 'RiskSourceIndex', + props: ['riskSourceId'], + components: { + PublicSector, + PublicTabs, + PublicTable + // PublicVideo + }, + mounted () { + this.$nextTick(() => { + this.refsData() + }) + }, + data () { + return {} + }, + methods: { + refsData () { + const param = { + riskSourceId: this.riskSourceId + } + this.$refs.refsRiskTabsData.refsRiskDataTabs(param) + this.$refs.refsRiskTableData.refsRiskDataTable(param) + } + } +} +</script> + +<style lang="less" scoped> +.public-bounced { + z-index: 2000; + position: absolute; + top: 35%; + left: 20%; + + .public-bounced-title { + cursor: move; + height: 0.1rem; + padding: 10px 0; + display: flex; + align-items: center; + justify-content: space-between; + + span { + color: #f4f7ff; + margin: 0 15px; + font-size: 14px; + } + + i { + color: #C0C4CC; + margin: 0 15px; + font-size: 22px; + cursor: pointer; + } + + i:hover { + color: #00fff6; + } + } + + .public-bounced-content { + //padding: 0.1rem; + display: flex; + //align-items: center; + //justify-content: space-around; + + .public-bounced-content-left { + //width: 4.8rem; + } + + .public-bounced-content-right { + //width: 3rem; + margin-left: 0.1rem; + } + } +} +</style> diff --git a/src/components/base-page/enterprise-emergency/PipelineFile.vue b/src/components/base-page/enterprise-emergency/discard/PipelineFile.vue similarity index 89% rename from src/components/base-page/enterprise-emergency/PipelineFile.vue rename to src/components/base-page/enterprise-emergency/discard/PipelineFile.vue index dafd268..54ac0db 100644 --- a/src/components/base-page/enterprise-emergency/PipelineFile.vue +++ b/src/components/base-page/enterprise-emergency/discard/PipelineFile.vue @@ -6,7 +6,7 @@ <el-form-item label="绠$嚎鍚嶇О"> <el-input v-model="form.pipeName"> <el-button style="padding-right:10px;" slot="suffix" type="text"> - <img src="../../../../public/assets/images/map/emergency/search.png" alt=""> + <img src="../../../../../public/assets/images/map/emergency/search.png" alt=""> </el-button> </el-input> </el-form-item> @@ -15,7 +15,7 @@ <el-form-item label="绠℃缂栫爜"> <el-input v-model="form.pipeCode"> <el-button style="padding-right:10px;" slot="suffix" type="text"> - <img src="../../../../public/assets/images/map/emergency/search.png" alt=""> + <img src="../../../../../public/assets/images/map/emergency/search.png" alt=""> </el-button> </el-input> </el-form-item> @@ -45,9 +45,9 @@ </template> <script> -import eventBus from '../../../eventBus' -import foldPng from '../../../../public/assets/images/map/emergency/fold.png' -import filePng from '../../../../public/assets/images/map/emergency/file.png' +import eventBus from '../../../../eventBus' +import foldPng from '../../../../../public/assets/images/map/emergency/fold.png' +import filePng from '../../../../../public/assets/images/map/emergency/file.png' export default { name: 'PipelineFile', diff --git a/src/components/base-page/enterprise-emergency/PositionChange.vue b/src/components/base-page/enterprise-emergency/discard/PositionChange.vue similarity index 99% rename from src/components/base-page/enterprise-emergency/PositionChange.vue rename to src/components/base-page/enterprise-emergency/discard/PositionChange.vue index e45dd7d..c1cb2ca 100644 --- a/src/components/base-page/enterprise-emergency/PositionChange.vue +++ b/src/components/base-page/enterprise-emergency/discard/PositionChange.vue @@ -99,8 +99,7 @@ </template> <script> -import eventBus from '../../../eventBus' - +import eventBus from '../../../../eventBus' export default { name: 'PositionChange', props: ['location'], diff --git a/src/components/base-page/enterprise-emergency/ReportIncident.vue b/src/components/base-page/enterprise-emergency/discard/ReportIncident.vue similarity index 98% rename from src/components/base-page/enterprise-emergency/ReportIncident.vue rename to src/components/base-page/enterprise-emergency/discard/ReportIncident.vue index c4437be..2dbf167 100644 --- a/src/components/base-page/enterprise-emergency/ReportIncident.vue +++ b/src/components/base-page/enterprise-emergency/discard/ReportIncident.vue @@ -70,7 +70,7 @@ <!-- @click="locationInfo"></el-button>--> <el-button style="padding-right:10px;" slot="suffix" type="text" @click="locationInfo"> - <img src="../../../../public/assets/images/map/loc.png" alt=""> + <img src="../../../../../public/assets/images/map/loc.png" alt=""> </el-button> </el-input> </el-form-item> @@ -148,8 +148,8 @@ </div> </template> <script> -import '../../../utils/dragBoxes' -import eventBus from '../../../eventBus' +import '../../../../utils/dragBoxes' +import eventBus from '../../../../eventBus' // 寮曞叆缁勪欢 import PositionChange from './PositionChange' import PipelineFile from './PipelineFile' diff --git a/src/components/base-page/enterprise-emergency/events-reported/EventsReported.vue b/src/components/base-page/enterprise-emergency/events-reported/EventsReported.vue index b94555a..0c6335b 100644 --- a/src/components/base-page/enterprise-emergency/events-reported/EventsReported.vue +++ b/src/components/base-page/enterprise-emergency/events-reported/EventsReported.vue @@ -139,7 +139,7 @@ :modal="false" v-dialogDrag > - <ReportLocation @locationClick="getlocaltionClick"></ReportLocation> + <ReportLocation></ReportLocation> </el-dialog> </div> </template> @@ -336,12 +336,12 @@ }) }, methods: { - // 鎺ユ敹瀛愮粍浠朵紶閫掔殑鏁版嵁 - getlocaltionClick (val) { - // console.log(val) - this.ruleForm.positionOf = val.latPos + '-' + val.longPos - this.dialogLocation = !this.dialogLocation - }, + // // 鎺ユ敹瀛愮粍浠朵紶閫掔殑鏁版嵁 + // getlocaltionClick (val) { + // // console.log(val) + // this.ruleForm.positionOf = val.latPos + '-' + val.longPos + // this.dialogLocation = !this.dialogLocation + // }, // 娑堟伅鎺ㄩ�� 閫夋嫨鎺ㄩ�佺殑瀵硅薄 infoChange () { if (this.ruleForm.beingPushed.indexOf('鐭俊鎺ㄩ��') > -1 || this.ruleForm.beingPushed.indexOf('鎵嬫満搴旂敤鎺ㄩ��') > -1) { diff --git a/src/components/base-page/enterprise-emergency/events-reported/ReportLocation.vue b/src/components/base-page/enterprise-emergency/events-reported/ReportLocation.vue index 3e8e096..e42ad35 100644 --- a/src/components/base-page/enterprise-emergency/events-reported/ReportLocation.vue +++ b/src/components/base-page/enterprise-emergency/events-reported/ReportLocation.vue @@ -8,139 +8,34 @@ <ReportLocationSection></ReportLocationSection> </el-tab-pane> <el-tab-pane label="缁忕含搴﹀畾浣�" name="third"> - <el-row class="place-box"> - <div class="place-left"> - <el-form :model="LongLatPos" label-width="90px"> - <el-form-item label="缁忓害:"> - <el-input v-model="LongLatPos.longPos"></el-input> - </el-form-item> - <el-form-item label="绾害:"> - <el-input v-model="LongLatPos.latPos"></el-input> - </el-form-item> - </el-form> - </div> - <div class="place-right"> - <el-button type="primary" @click="mapPoints">瀹氫綅</el-button> - </div> - </el-row> - <div class="place-bottom" style="text-align: center;margin: 5px"> - <el-button type="primary" @click="confirm">纭</el-button> - </div> + <ReportLocationPoint></ReportLocationPoint> </el-tab-pane> </el-tabs> </div> </template> <script> -// import eventBus from '../../../../eventBus' + // 绠℃瀹氫綅缁勪欢 import ReportLocationSection from './ReportLocationSection' import ReportLocationSearch from './ReportLocationSearch' - -import iconUrl from '../../../../../public/assets/images/map/loc.png' +import ReportLocationPoint from './ReportLocationPoint' export default { name: 'ReportLocation', components: { ReportLocationSearch, - ReportLocationSection + ReportLocationSection, + ReportLocationPoint }, data () { return { // active tab鍒囨崲 - activeName: 'first', - // 缁忕含搴﹀畾浣� - LongLatPos: { - longPos: '', - latPos: '' - } - } - }, - // mounted () { - // // 鎺ユ敹瑙勫畾 姣忔閲嶆柊閫夋嫨瀹氫綅 閮芥寚瀹� 閫夋嫨绗竴涓紑濮� - // eventBus.$on('tab-change', (obj) => { - // this.activeName = obj - // }) - // }, - methods: { - // 鍦板浘涓婄偣鍑� - selectPipeLine () { - window.map.on('click', this.selectClick) - // window.mapManager.clickDialogSwitch = false - }, - // 鍦板浘涓婄偣鍑诲洖璋� - selectClick (e) { - window.map.off('click', this.selectClick) - // const point = [e.latlng.lng, e.latlng.lat] - const pointX = e.latlng.lng - const pointY = e.latlng.lat - // let marker = window.L.marker(point,{ - // - // }) - this.clickLocation = '\'' + pointX + '\'' + pointY + '' - this.mapPointResult(e) - }, - mapPointResult (e) { - console.log(e) - this.LongLatPos.longPos = e.latlng.lng - this.LongLatPos.latPos = e.latlng.lat - const as = [e.latlng.lat, e.latlng.lng] - // console.log(as) - const marker = window.L.marker(as, { - icon: window.L.icon({ - iconUrl: iconUrl, - iconSize: [30, 30], - iconAnchor: [15, 15] - }) - }) - window.map.addLayer(marker) - }, - // 鑾峰緱鐒︾偣 杩涜瀹氫綅 - focusLocation () { - this.selectPipeLine() - }, - // 缁忕含搴﹀畾浣� - mapPoints () { - this.selectPipeLine() - }, - // 鐐瑰嚮纭鎸夐挳浜嬩欢 - confirm () { - // 閫氳繃瀛愮粍浠跺悜鐖剁粍浠朵紶閫掓暟鎹� - this.$emit('locationClick', this.LongLatPos) - this.clickLocation = '' - this.LongLatPos.longPos = '' - this.LongLatPos.latPos = '' + activeName: 'first' } } } </script> <style lang="less" scoped> - .place-box { - display: flex; - align-items: center; - justify-content: space-around; - } - - .place { - text-align: center; - - .place-top { - display: flex; - align-items: center; - justify-content: space-around; - - .place-right { - .el-button { - margin: 15px; - } - } - } - - .place-bottom { - .el-button { - /*margin: 15px;*/ - } - } - } </style> diff --git a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue new file mode 100644 index 0000000..091d523 --- /dev/null +++ b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue @@ -0,0 +1,111 @@ +<template> + <div class="location-lon-and-lat"> + <el-row class="place-box"> + <div class="place-left"> + <el-form :model="LongLatPos" label-width="90px"> + <el-form-item label="缁忓害:"> + <el-input v-model="LongLatPos.longPos"></el-input> + </el-form-item> + <el-form-item label="绾害:"> + <el-input v-model="LongLatPos.latPos"></el-input> + </el-form-item> + </el-form> + </div> + <div class="place-right"> + <el-button type="primary" size="small" @click="mapPoints">鐐瑰嚮瀹氫綅</el-button> + <el-button type="primary" size="small" @click="dataPoints">鏁版嵁瀹氫綅</el-button> + </div> + </el-row> + <div class="place-bottom" style="text-align: right;margin: 5px"> + <el-button type="primary" @click="confirm">纭</el-button> + </div> + </div> +</template> + +<script> +import { pulseEffect } from '../../../../utils/utils' +import iconUrl from '../../../../../public/assets/images/map/loc.png' +import eventBus from '../../../../eventBus' + +export default { + name: 'ReportLocationPoint', + data () { + return { + // 缁忕含搴﹀畾浣� + LongLatPos: { + longPos: '', + latPos: '' + } + } + }, + methods: { + // 鐐瑰嚮瀹氫綅 + mapPoints () { + window.map.on('click', (e) => { + this.LongLatPos.longPos = parseFloat(e.latlng.lng).toFixed(6) + this.LongLatPos.latPos = parseFloat(e.latlng.lat).toFixed(6) + const as = [this.LongLatPos.latPos, this.LongLatPos.longPos] + // console.log(as) + window.map.setView(as, 17) + pulseEffect(as) + const marker = window.L.marker(as, { + icon: window.L.icon({ + iconUrl: iconUrl, + iconSize: [30, 30], + iconAnchor: [15, 15] + }) + }) + window.map.addLayer(marker) + window.map.off('click') + }) + }, + // 閫氳繃鏁版嵁瀹氫綅 + dataPoints () { + const as = [this.LongLatPos.latPos, this.LongLatPos.longPos] + // console.log(as) + window.map.setView(as, 17) + pulseEffect(as) + const marker = window.L.marker(as, { + icon: window.L.icon({ + iconUrl: iconUrl, + iconSize: [30, 30], + iconAnchor: [15, 15] + }) + }) + window.map.addLayer(marker) + this.LongLatPos.latPos = '' + this.LongLatPos.longPos = '' + }, + // 鐐瑰嚮纭鎸夐挳浜嬩欢 + confirm () { + eventBus.$emit('location-setChange', true) + this.LongLatPos.longPos = '' + this.LongLatPos.latPos = '' + } + } +} +</script> + +<style lang="less" scoped> + .place-box { + display: flex; + align-items: center; + justify-content: space-around; + } + + .place { + text-align: center; + + .place-top { + display: flex; + align-items: center; + justify-content: space-around; + + .place-right { + .el-button { + margin: 15px; + } + } + } + } +</style> diff --git a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue index 71d6826..a96d691 100644 --- a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue +++ b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue @@ -3,8 +3,23 @@ <el-row> <el-input type="text" v-model="clickLocation" clearable @change="focusLocation"></el-input> </el-row> - <el-row> - <el-button type="primary" @click="confirm" style="text-align: right">纭</el-button> + <el-scrollbar style="height:86.22px"> + <el-row v-for="(item,index) in searchList" :key="index" style="display: flex;align-items: center"> + <el-col :span="12"> + <span>{{ item.name }}</span> + </el-col> + <el-col :span="12"> + <el-button type="primary" size="mini" icon="el-icon-position" @click="locationMapClick(item)">瀹氫綅 + </el-button> + </el-col> + <!-- <el-pagination--> + <!-- layout="prev, pager, next"--> + <!-- :total="50">--> + <!-- </el-pagination>--> + </el-row> + </el-scrollbar> + <el-row style="text-align: right"> + <el-button type="primary" @click="confirm">纭</el-button> </el-row> </div> </template> @@ -14,16 +29,19 @@ import { reportLocationSearch } from '../../../../api/request' import { pulseEffect } from '../../../../utils/utils' import eventBus from '../../../../eventBus' +import iconUrl from '../../../../../public/assets/images/map/loc.png' + export default { name: 'ReportLocationSearch', data () { return { // 鐐瑰嚮瀹氫綅缁戝畾鏁版嵁 - clickLocation: '' + clickLocation: '', + searchList: [] } }, methods: { - // 鑾峰緱鐒︾偣 杩涜瀹氫綅 + // 鎼滅储瀹氫綅 focusLocation () { // console.log(this.clickLocation) // console.log(window.map.getZoom()) @@ -43,31 +61,73 @@ } // console.log(data) reportLocationSearch(data).then(res => { - console.log(res) + // console.log(res) + this.searchList = res.pois + // console.log(this.searchList) // const as = res.pois[0].lonlat.trim().split(' ') // window.map.setView([as[1], as[0]], 17) // pulseEffect([as[1], as[0]]) - for (let i = 0; i < res.pois.length; i++) { - const as = res.pois[i].lonlat.trim().split(' ') - if (res.pois[i].name.indexOf(this.clickLocation) >= 0) { - window.map.setView([as[1], as[0]], 17) - pulseEffect([as[1], as[0]]) - } - } + // for (let i = 0; i < res.pois.length; i++) { + // const as = res.pois[i].lonlat.trim().split(' ') + // if (res.pois[i].name.indexOf(this.clickLocation) >= 0) { + // window.map.setView([as[1], as[0]], 17) + // pulseEffect([as[1], as[0]]) + // } + // } }) + this.clickLocation = '' + }, + // 鐐瑰嚮瀹氫綅 + locationMapClick (val) { + console.log(val) + const ps = val.lonlat.trim().split(' ') + // const htmls = '<div><ul><li>' + val.name + '</li> + <li>' + val.adress + '</li></ul></div>' + // var myIcon = window.L.divIcon({ + // html: htmls, + // className: 'company-bindTooltip', + // iconSize: 16 + // }) + const htmls = '<div><ul><li>' + val.name + '</li> <br/> <li>' + val.address + '</li> <br/> <li>' + val.phone + '</li></ul></div>' + const marker = window.L.marker([ps[1], ps[0]], { + icon: window.L.icon({ + iconUrl: iconUrl, + iconSize: [30, 30], + iconAnchor: [15, 15] + }) + // icon: myIcon + }) + .bindTooltip(htmls, { + // permanent: 'true', + direction: 'bottom', + offset: [0, 10], + sticky: true, + className: '' + }) + window.map.addLayer(marker) + window.map.setView([ps[1], ps[0]], 17) + pulseEffect([ps[1], ps[0]]) }, // 鐐瑰嚮纭鎸夐挳浜嬩欢 confirm () { - // 閫氳繃瀛愮粍浠跺悜鐖剁粍浠朵紶閫掓暟鎹� - // this.$emit('locationClick', this.LongLatPos) + this.searchList = [] + this.clickLocation = '' eventBus.$emit('location-setChange', true) - // console.log('鎼滅储瀹氫綅') } } } </script> <style lang="less" scoped> + /*/deep/ .el-row {*/ + /* margin: 2px 0 !important;*/ + /* padding: 0;*/ + /* height: 10px;*/ + /* max-height: 10px;*/ + /*}*/ + .div-list-search { + + } + .click-location { margin: 0 auto; text-align: center; diff --git a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue index d8bc7be..3d6c07b 100644 --- a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue +++ b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue @@ -117,7 +117,7 @@ <el-table-column show-overflow-tooltip width="150" - prop="properties.code" + prop="properties.pipecode" label="缂栧彿"> </el-table-column> <el-table-column @@ -147,12 +147,9 @@ </template> <script> - -// import { pulseEffect } from '../../../../utils/utils' -// import mapApi from '../../../../api/mapApi' +import { highlight, fitBounds } from '../../../helpers/LocateHelper' import WfsHelper from '@components/helpers/WfsHelper' import AjaxUtils from '@utils/AjaxUtils' -import { fitBounds, highlight } from '../../../../components/helpers/LocateHelper' import eventBus from '../../../../eventBus' import { WMS_URL } from '../../../../conf/Constants' @@ -208,10 +205,6 @@ const resAffFac = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {}) console.log(resAffFac) if (resAffFac instanceof Object && Object.prototype.hasOwnProperty.call(resAffFac, 'features')) { - // console.log(resAffFac.features) - // for (let i = 0; i < resAffFac.features.length; i++) { - // console.log(resAffFac.features[i]) - // } this.tableDataAffFac = resAffFac.features } this.wfsHelper = new WfsHelper() @@ -273,7 +266,7 @@ EXCEPTIONS: 'application/vnd.ogc.se_inimage' }) AjaxUtils.get4JsonDataByUrl(WMS_URL, wmsParams, (res) => { - console.log(res) + // console.log(res) for (let i = 0; i < res.data.features.length; i++) { // console.log(res.data.features[i]) this.tableList.push(res.data.features[i]) @@ -284,12 +277,13 @@ // 闄勫睘璁炬柦 this.affFacData(e) // }) + window.map.off('click') }) // 鏁版嵁 閲嶆柊鑾峰彇 杩涜缃┖ this.tableList = [] this.tableListSection = [] - this.form.pipeName = '' this.tableDataAffFac = [] + this.form.pipeName = '' this.form.sectionName = '' this.form.affiliatedFacilities = '' }, @@ -331,8 +325,8 @@ const wmsParams = Object.assign({ LAYERS: 'sewer:view_pipeline', QUERY_LAYERS: 'sewer:view_pipeline', - // LAYERS: 'pipeline_fs', - // QUERY_LAYERS: 'pipeline_fs', + // LAYERS: 'sewer:pipeline_fs', + // QUERY_LAYERS: 'sewer:pipeline_fs', WIDTH: size.x, HEIGHT: size.y, X: Math.round(point.x), @@ -351,7 +345,7 @@ EXCEPTIONS: 'application/vnd.ogc.se_inimage' }) AjaxUtils.get4JsonDataByUrl(WMS_URL, wmsParams, (res) => { - // console.log(res) + console.log(res) for (let i = 0; i < res.data.features.length; i++) { this.tableDataAffFac.push(res.data.features[i]) } diff --git a/src/utils/utils.js b/src/utils/utils.js index c187b1c..d8d5e40 100644 --- a/src/utils/utils.js +++ b/src/utils/utils.js @@ -27,7 +27,7 @@ * 鑴夊啿鏁堟灉 */ export function pulseEffect (xy) { - let times = 1000 + let times = 5 const colors = ['#00f100', '#ff0000'] // 鎻掍欢 鏁堟灉瀹炵幇 var pulsingIcon = window.L.icon.pulse({ diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue index dd3b6ed..33cb9b6 100644 --- a/src/views/MapTemplate.vue +++ b/src/views/MapTemplate.vue @@ -41,7 +41,7 @@ // // 鍏叡灞曠ず鏁版嵁 // import PublicBounced from '@components/base-page/PublicBounced/PublicBounced' import LayerFactory from '@components/LayerController/service/LayerFactory' -import ReportIncident from '../components/base-page/enterprise-emergency/ReportIncident' +import ReportIncident from '../components/base-page/enterprise-emergency/discard/ReportIncident' import Emergency from '@components/emergency/index' import MapManager from '../components/helpers/MapManager' import Message from '@components/message/index' -- Gitblit v1.8.0