From bbce81a396e22743b1fbf0c54fed05ab79c99e72 Mon Sep 17 00:00:00 2001 From: 陈泽平 <chenzeping> Date: 星期六, 29 五月 2021 16:28:51 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/panel/RightSearchPanel.vue | 2 src/components/LayerController/logic/EnvironmentRisk.js | 13 src/components/LayerController/logic/RiskSource.js | 10 src/components/layer/src/layer.vue | 8 public/assets/environmentRiskPoint.json | 24 src/assets/css/map/map-panel-style.less | 9 src/components/base-page/RiskSource/PublicTabs.vue | 120 ++++++++ src/views/MapTemplate.vue | 3 src/components/base-page/enterprise-emergency/event-handling/EventHandling.vue | 19 + src/components/LayerController/LayerController.vue | 2 src/components/base-page/enterprise-emergency/event-handling/ResInfo.vue | 42 ++ src/components/base-page/enterprise-emergency/DisposalEvent.vue | 182 +++++++----- src/components/base-page/RiskSource/RiskSourceIndex.vue | 100 +++++++ src/components/base-page/RiskSource/PublicTable.vue | 246 +++++++++++++++++ src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue | 24 - 15 files changed, 668 insertions(+), 136 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/assets/css/map/map-panel-style.less b/src/assets/css/map/map-panel-style.less index 133719f..7ae3d48 100644 --- a/src/assets/css/map/map-panel-style.less +++ b/src/assets/css/map/map-panel-style.less @@ -545,7 +545,7 @@ .panel-title { color: @color-title; font-size: 18px; - padding: 10px; + padding: 5px 10px; text-align: center; border-bottom: 1px solid @background-color-split; } @@ -591,13 +591,14 @@ padding: 7px 15px; } - .el-button:hover { +.el-button:hover{ background: @background-color; color: @color-highlight; border-color: @color-highlight; } - .el-input__inner { + + .el-input__inner { color: #fff; text-align: center; } @@ -834,4 +835,4 @@ text-align: right; margin: 5px 0; color: @color; -} \ No newline at end of file +} diff --git a/src/components/LayerController/LayerController.vue b/src/components/LayerController/LayerController.vue index 3a49054..37af978 100644 --- a/src/components/LayerController/LayerController.vue +++ b/src/components/LayerController/LayerController.vue @@ -265,7 +265,7 @@ background:@background-color4; color:@color-tool; position: absolute; - top:24px; + top:20px; right:0.02rem; border:none;//1px solid @color-tool; width: 0.2rem; 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/DisposalEvent.vue b/src/components/base-page/enterprise-emergency/DisposalEvent.vue index 5e6358c..e7eb185 100644 --- a/src/components/base-page/enterprise-emergency/DisposalEvent.vue +++ b/src/components/base-page/enterprise-emergency/DisposalEvent.vue @@ -1,62 +1,72 @@ <template> - <div class="disposal-event"> - <h3 class="panel-title">浜嬩欢鍩烘湰淇℃伅</h3> - <el-form ref="form" :model="form" label-width="100px"> - <el-form-item label="浜嬩欢鍚嶇О锛�" prop="nameOfEvent"> - <label>{{ form.nameOfEvent }}</label> - </el-form-item> - <el-row> - <el-col :span="12"> - <el-form-item label="浜嬩欢浣嶇疆锛�" prop="eventLocation"> - <label>{{ form.eventLocation }}</label> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="浣嶇疆鎻忚堪锛�" prop="positionDesc"> - <label>{{ form.positionDesc }}</label> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="12"> - <el-form-item label="浜嬩欢鍗曚綅锛�" prop="incidentUnit"> - <label>{{ form.incidentUnit }}</label> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="浜嬪彂鏃堕棿锛�" prop="atTime"> - <label>{{ form.atTime }}</label> - </el-form-item> - </el-col> - </el-row> - <el-form-item label="浜嬩欢鎻忚堪锛�" prop="eventDesc" class="fixed-width"> - <label>{{ form.eventDesc }}</label> - </el-form-item> - <el-form-item label="闄勪欢锛�" prop="upload"> - <label> - <a href="javascript:">闄勪欢</a> - - <a href="javascript:">闄勪欢</a> - </label> - </el-form-item> - </el-form> - <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> - <div class="event-management"> - <el-button type="primary" size="mini" @click="ToManagement">浜嬩欢澶勭疆</el-button> - <el-button size="mini">鍏抽棴</el-button> - </div> + <div class="disposal-event"> + <h4 class="sub-title ">浜嬩欢鍩烘湰淇℃伅</h4> + <div :model="form"> + <el-row> + <el-col class="info-label" :span="6">浜嬩欢鍚嶇О锛�</el-col> + <el-col class="info-text" :span="18">{{ form.nameOfEvent }}</el-col> + </el-row> + <el-row> + <el-col class="info-label" :span="6"> + 浜嬩欢浣嶇疆锛� + </el-col> + <el-col class="info-text" :span="18"> + <label>{{ form.eventLocation }}</label> + </el-col> + </el-row> + <el-row> + <el-col class="info-label" :span="6"> + 浣嶇疆鎻忚堪锛� + </el-col> + <el-col class="info-text" :span="18"> + <label>{{ form.positionDesc }}</label> + </el-col> + </el-row> + <el-row> + <el-col class="info-label" :span="6"> + 浜嬩欢鍗曚綅锛� + </el-col> + <el-col class="info-text" :span="18"> + {{ form.incidentUnit }} + </el-col> + </el-row> + <el-row> + <el-col class="info-label" :span="6"> + 浜嬪彂鏃堕棿锛� + </el-col> + <el-col class="info-text" :span="18"> + {{ form.atTime }} + </el-col> + </el-row> + <el-row> + <el-col class="info-label" :span="6">浜嬩欢鎻忚堪锛�</el-col> + <el-col class="info-text" :span="18">{{ form.eventDesc }}</el-col> + </el-row> + <el-row> + <el-col class="info-label" span="6">闄勪欢锛�</el-col> + <el-col class="info-text" :span="18"><a class="link-btn" href="javascript:">闄勪欢</a> + + <a class="link-btn" href="javascript:">闄勪欢</a> + </el-col> + </el-row> </div> + <h3 class="sub-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 class="link-btn" href="javascript:">棰勬</a> + </template> + </el-table-column> + </el-table> + <div class="event-management"> + <el-button type="primary" size="mini" @click="ToManagement">寮�濮嬪垎鏋�</el-button> + <!-- <el-button size="mini">鍏抽棴</el-button>--> + </div> + </div> </template> <script> @@ -110,31 +120,55 @@ } }, methods: { - // 浜嬩欢绠$悊椤甸潰璺宠浆 + // 寮�濮嬪垎鏋� ToManagement () { - eventBus.$emit('events-reported', true) + eventBus.$emit('event-handling', {}) } } } </script> <style lang="less" scoped> - .fixed-width { - width: 3.2459893rem; - min-width: 3.2459893rem; - } +.disposal-event { + padding: 5px; - /deep/ .el-form-item { - margin: 5px 0; - } + .fixed-width { + width: 3.2459893rem; + min-width: 3.2459893rem; + } - /deep/ .el-form-item__label { - color: @color; - font-size: 0.08rem; - } + /deep/ .el-form-item { + margin: 5px 0; + } - .event-management { - text-align: right; - margin: 15px; - } + /deep/ .el-form-item__label { + color: @color; + font-size: 0.08rem; + } + + .event-management { + text-align: right; + margin: 15px; + } + + .sub-title { + + //color: @color-title; + padding: 5px; + font-size: 16px; + } + + .link-btn { + color: @color-highlight; + } + + .info-label { + text-align: right; + } + + .info-text { + text-align: left; + } +} + </style> diff --git a/src/components/base-page/enterprise-emergency/event-handling/EventHandling.vue b/src/components/base-page/enterprise-emergency/event-handling/EventHandling.vue index 5a36cb3..a4ec6ef 100644 --- a/src/components/base-page/enterprise-emergency/event-handling/EventHandling.vue +++ b/src/components/base-page/enterprise-emergency/event-handling/EventHandling.vue @@ -1,5 +1,6 @@ <template> - <div> + <el-dialog :visible.sync="isShow" class="effect-vol-calc" title="鍒嗘瀽" :modal="false" v-dialog-drag + :before-close="handleClose"> <!--<!– 鍩烘湰淇℃伅–>--> <!-- <event-base-info>--> @@ -20,7 +21,7 @@ <effective-volume-calc ref="effectVolCalc"></effective-volume-calc> <event-report-doc ref="eventReportDoc" :reportItemCon="reportItemCon"> </event-report-doc> <res-info ref="resInfo"></res-info> - </div> + </el-dialog> </template> @@ -30,15 +31,23 @@ import EffectiveVolumeCalc from '@components/base-page/enterprise-emergency/EffectiveVolumeCalc' import EventReportDoc from '@components/base-page/enterprise-emergency/event-handling/EventReportDoc' import ResInfo from '@components/base-page/enterprise-emergency/event-handling/ResInfo' +import eventBus from '../../../../eventBus' export default { name: 'EventHandling', components: { ResInfo, EventReportDoc, DisposalProposed, EffectiveVolumeCalc }, data () { return { + isShow: false, reportItemCon: { popupType: 'aaa' } } + }, + mounted () { + // this.wfsHelper = new WfsHelper() + eventBus.$on('event-handling', () => { + this.isShow = !this.isShow + }) }, methods: { toggleShowCalc () { @@ -56,7 +65,11 @@ report () { console.log('鐢熸垚鎶ュ憡') }, - close () { console.log('杩斿洖') } + close () { console.log('杩斿洖') }, + + handleClose () { + this.isShow = false + } } } diff --git a/src/components/base-page/enterprise-emergency/event-handling/ResInfo.vue b/src/components/base-page/enterprise-emergency/event-handling/ResInfo.vue index 4203ea9..f0c72f7 100644 --- a/src/components/base-page/enterprise-emergency/event-handling/ResInfo.vue +++ b/src/components/base-page/enterprise-emergency/event-handling/ResInfo.vue @@ -1,10 +1,10 @@ <template> - <el-dialog :visible.sync="isShow" class="effect-vol-calc" title="鍛ㄨ竟璧勬簮淇℃伅" :modal="false" v-dialog-drag + <el-dialog :visible.sync="isShow" class="res-info-container" title="鍛ㄨ竟璧勬簮淇℃伅" :modal="false" v-dialog-drag width="400" > <el-row> <el-col :span="3" style="text-align: center;"> - <el-row v-for="item in menuList" :key="item.id"> - <el-button type="primary" size="mini" @click="menuClickHandle(item)">{{ item.name }}</el-button> + <el-row v-for="(item,index) in menuList" :key="index"> + <el-button type="primary" size="mini" :class="index===btnActive?'hover':''" @click="menuClickHandle(item,index)">{{ item.name }}</el-button> </el-row> <!--<el-row> <el-button type="primary" size="mini" @click="menuClickHandle">鍦ㄧ嚎鐩戞祴</el-button></el-row>--> <!--<el-row> <el-button type="primary" size="mini" @click="menuClickHandle">搴旀�ヨ祫婧�</el-button></el-row>--> @@ -13,7 +13,7 @@ </el-col> <el-col :span="21"> <el-row> - <el-button v-for="item in subMenuList" :key="item.name" type="primary" size="mini" @click="subMenuClickHandle(item)">{{ item.name }}</el-button> + <el-button v-for="(item,index) in subMenuList" :class="index===subBtnActive?'hover':''" :key="item.name" type="primary" size="mini" @click="subMenuClickHandle(item,index)">{{ item.name }}</el-button> <!-- <el-button type="primary" size="mini" @click="subMenuClickHandle">澶栨帓鍙�(1)</el-button>--> <!-- <el-button type="primary" size="mini" @click="subMenuClickHandle">闅旀补姹�(1)</el-button>--> <!-- <el-button type="primary" size="mini" @click="subMenuClickHandle">鑺傛祦闃�(1)</el-button>--> @@ -46,6 +46,8 @@ data () { return { isShow: false, + btnActive: 0, + subBtnActive: 0, menuList: ResInfo.data, subMenuList: ResInfo.data[0].child, tableData: [ @@ -160,17 +162,41 @@ getVisible () { return this.isShow }, - menuClickHandle (item) { - console.log(item) + menuClickHandle (item, index) { + this.btnActive = index + this.subBtnActive = 0 this.subMenuList = item.child }, - subMenuClickHandle (subItem) { + subMenuClickHandle (subItem, index) { + this.subBtnActive = index this.currentTableData.column = subItem.column } } } </script> -<style scoped> +<style lang="less"> +.res-info-container{ + /deep/ .el-dialog { + left: 810px; + } + + .el-dialog__header { + padding: 4px 10px; + } + + .el-dialog__headerbtn { + top: 10px; + } + .hover{ + color: @color-highlight; + border-color:@color-highlight; + } + .el-button:active .el-button--primary.is-active, .el-button--primary:active ,.el-button--primary:focus, .el-button--primary:hover{ + background: @background-color; + color: @color-highlight; + border-color:@color-highlight; + } +} </style> diff --git a/src/components/layer/src/layer.vue b/src/components/layer/src/layer.vue index 03400c7..56522c5 100644 --- a/src/components/layer/src/layer.vue +++ b/src/components/layer/src/layer.vue @@ -2,7 +2,7 @@ <div class="public-bounced map-background" v-drag :style="style"> <div class="public-bounced-title panel-title" ref="publicBounced"> <span>{{ title }}</span> - <i class="el-icon-close" @click="close"></i> + <i class="el-icon-close" style="font-size: 16px;" @click="close"></i> </div> <div class="public-bounced-content" :id="id"></div> </div> @@ -86,8 +86,8 @@ .public-bounced-title { cursor: move; - height: 0.1rem; - padding: 10px 0; + //height: 0.1rem; + //padding: 10px 0; display: flex; align-items: center; justify-content: space-between; @@ -95,7 +95,7 @@ span { color: #f4f7ff; margin: 0 15px; - font-size: 14px; + font-size: 16px; } i { diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue index b8fa510..6df7286 100644 --- a/src/components/panel/RightSearchPanel.vue +++ b/src/components/panel/RightSearchPanel.vue @@ -327,7 +327,7 @@ background: @background-color4; color: @color-tool; position: absolute; - top: 24px; + top: 20px; left: 0.02rem; border: none; //1px solid @color-tool; width: 0.2rem; diff --git a/src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue b/src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue index cbe1309..860f6e1 100644 --- a/src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue +++ b/src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue @@ -108,8 +108,8 @@ // import WfsHelper from '@components/helpers/WfsHelper' // import AjaxUtils from '@utils/AjaxUtils' -// import DisposalEvent from '../../../base-page/enterprise-emergency/DisposalEvent' -import EventHandling from '@components/base-page/enterprise-emergency/event-handling/EventHandling' +import DisposalEvent from '../../../base-page/enterprise-emergency/DisposalEvent' +// import EventHandling from '@components/base-page/enterprise-emergency/event-handling/EventHandling' import eventBus from '../../../../eventBus' import EventsReported from '../../../base-page/enterprise-emergency/events-reported/EventsReported' @@ -162,29 +162,19 @@ }, // 寮�濮嬪垎鏋� startAnalysis () { - // eventBus.$emit('start-analysis', true) + eventBus.$emit('event-handling', {}) + }, + disposalfx () { window.$layer.open({ content: { - comp: EventHandling, // 缁勪欢 + comp: DisposalEvent, // 缁勪欢 parent: this, // 鐖剁粍浠� data: { // 浼犻�掔殑鍙傛暟 // info: this.info } }, - title: '浜嬩欢澶勭疆' + title: '浜嬩欢淇℃伅' }) - }, - disposalfx () { - // window.$layer.open({ - // content: { - // comp: DisposalEvent, // 缁勪欢 - // parent: this, // 鐖剁粍浠� - // data: { // 浼犻�掔殑鍙傛暟 - // // info: this.info - // } - // }, - // title: '浜嬩欢澶勭疆' - // }) }, // radio鏁版嵁閫夋嫨 redioChange (item) { diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue index 632f8bf..33cb9b6 100644 --- a/src/views/MapTemplate.vue +++ b/src/views/MapTemplate.vue @@ -21,6 +21,7 @@ <Emergency ref="Emergency"></Emergency> <Message></Message> <EventsReported></EventsReported> + <event-handling></event-handling> </div> </template> @@ -45,10 +46,12 @@ import MapManager from '../components/helpers/MapManager' import Message from '@components/message/index' import EventsReported from '../components/base-page/enterprise-emergency/events-reported/EventsReported' +import EventHandling from '@components/base-page/enterprise-emergency/event-handling/EventHandling' export default { name: 'MapTemplate', components: { + EventHandling, // Enterprise, LegendPanel, // MenuSpecial, -- Gitblit v1.8.0