From ce9ae368e42abf92a39f73654e301e680f2b4394 Mon Sep 17 00:00:00 2001 From: seatonwan9 <seatonwan9@163.com> Date: 星期六, 29 五月 2021 11:17:07 +0800 Subject: [PATCH] 新增环境风险源图表信息 --- src/components/LayerController/logic/EnvironmentRisk.js | 13 src/components/LayerController/logic/RiskSource.js | 10 public/assets/environmentRiskPoint.json | 24 +- src/components/base-page/RiskSource/RiskSourceIndex.vue | 100 +++++++++++ src/components/base-page/RiskSource/PublicTabs.vue | 120 +++++++++++++ src/components/base-page/RiskSource/PublicTable.vue | 246 +++++++++++++++++++++++++++ 6 files changed, 489 insertions(+), 24 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> -- Gitblit v1.8.0