From c73d15615219e8fbaf3fa45c06d74925fc5944bf Mon Sep 17 00:00:00 2001 From: zhoule Date: Fri, 23 Feb 2024 17:17:17 +0800 Subject: [PATCH 1/6] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../event/event/FormEvent/PresetFormItems.js | 64 +-- .../control/event/event/FormEvent/data.js | 498 +++++++++++++++++- .../control/event/event/FormEvent/index.vue | 23 +- 3 files changed, 505 insertions(+), 80 deletions(-) diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js index b1abf167..5f63793a 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js @@ -1,5 +1,6 @@ import request from '@/utils/request' import { Message } from "element-ui"; +import moment from "moment"; export const source = { label: "来源:", @@ -7,6 +8,7 @@ export const source = { type: "RadioGroup", isAlone: true, required: true, + default: '1', options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", options: [ @@ -48,6 +50,7 @@ export const illegalTriggeringType = { type: "RadioGroup", isAlone: true, required: true, + default: '5-1', options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", options: [ @@ -99,7 +102,7 @@ export const station = { ], }, visible: (data) => { - if (data?.dcEventAccident?.locationType != 1) { + if (data.dcEventAccident && data.dcEventAccident.locationType != 1) { return false; } return true; @@ -187,6 +190,7 @@ export const startTime = { required: true, isAlone: true, type: "datePicker", + default: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"), options: { type: "datetime", format: "yyyy-MM-dd HH:mm:ss", @@ -470,7 +474,7 @@ export const remark = { autosize: { minRows: 6, maxRows: 6 }, showWordLimit: true, }, - required: true, + // required: true, }; export const isInTunnel = { @@ -478,6 +482,7 @@ export const isInTunnel = { key: "inTunnel", // isAlone: true, required: true, + default: '0', type: "RadioGroup", options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", @@ -575,52 +580,15 @@ export const weatherSituation = { key: "1-6", label: "暴雨", }, - { - key: "2-1", - label: "小雪", - }, - { - key: "2-2", - label: "中雪", - }, - { - key: "2-3", - label: "大雪", - }, - { - key: "2-4", - label: "暴雪", - }, - { - key: "2-5", - label: "大暴雪", - }, - { - key: "2-6", - label: "特大暴雪", - }, - { - key: "3-1", - label: "轻雾", - }, - { - key: "3-2", - label: "大雾", - }, - { - key: "3-3", - label: "浓雾", - }, - { - key: "3-4", - label: "强浓雾", - }, - { - key: "3-5", - label: "团雾", - }, ], }, + visible: (data) => { + if (data?.eventSubclass == '10-1' || data?.eventSubclass == '10-2' || data?.eventSubclass == '10-3') { + return true; + } + return false; + }, + }; export const additionalNotes = { @@ -770,6 +738,7 @@ export const eventHappenTime = { key: "occurrenceTime", required: true, type: "datePicker", + default: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"), options: { type: "datetime", format: "yyyy-MM-dd HH:mm:ss", @@ -971,6 +940,7 @@ export const constructionMeasurement = { type: "RadioGroup", isAlone: true, required: true, + default:'0', options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", options: [ @@ -1000,6 +970,7 @@ export const locationType = { type: "RadioGroup", isAlone: true, required: true, + default: '1', options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", options: [ @@ -1021,6 +992,7 @@ export const specialConstruction = { type: "RadioGroup", isAlone: true, required: true, + default: '1', options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", options: [ diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/data.js index 274eccb1..2f1098d2 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/data.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/data.js @@ -532,41 +532,44 @@ export const tabConfigList = [ }, ], }; - classify.options.options = ad[data.dcEventTrafficControl.controlType]; + classify.options.options = + ad[data.dcEventTrafficControl.controlType]; - if(data.dcEventTrafficControl) { + if (data.dcEventTrafficControl) { data.dcEventTrafficControl.facilityId = null; } let facilityType = 1; - if (value == '3-2') { + if (value == "3-2") { facilityType = 1; - } else if (value == '3-3') { + } else if (value == "3-3") { facilityType = 3; - } else if (value == '3-4') { + } else if (value == "3-4") { facilityType = 6; } - if(value && value != '3-1'){ + if (value && value != "3-1") { //路网设施 1 收费站 2 桥梁 3 互通立交 4 枢纽立交 5 隧道 6 服务区 request({ url: `/business/facility/query?facilityType=${facilityType}`, - method: "get" - }).then((result) => { - if (result.code != 200) return Message.error(result?.msg); - let lwss = []; - result.data.forEach(it => lwss.push({ key: it.id, label: it.facilityName})) - - formList.forEach((it) => { - if(it.key == "dcEventTrafficControl.facilityId"){ - it.options.options = lwss; - } - }); - - }).catch((err) => { - console.log('err',err) - Message.error("查询失败1", err); + method: "get", }) - } + .then((result) => { + if (result.code != 200) return Message.error(result?.msg); + let lwss = []; + result.data.forEach((it) => + lwss.push({ key: it.id, label: it.facilityName }) + ); + formList.forEach((it) => { + if (it.key == "dcEventTrafficControl.facilityId") { + it.options.options = lwss; + } + }); + }) + .catch((err) => { + console.log("err", err); + Message.error("查询失败1", err); + }); + } }, }, }, @@ -683,7 +686,8 @@ export const tabConfigList = [ { key: "1", label: "主线关闭", - },], + }, + ], }, }, { @@ -1072,7 +1076,7 @@ export const tabConfigList = [ ], }, visible: (data) => { - if (data?.eventSubclass == '3-1') { + if (data?.eventSubclass == "3-1") { return true; } return false; @@ -1614,6 +1618,7 @@ export const tabConfigList = [ type: "RadioGroup", isAlone: true, required: true, + default: "6-1", options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", options: [ @@ -1666,6 +1671,7 @@ export const tabConfigList = [ type: "RadioGroup", isAlone: true, required: true, + default: "1", options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", options: [ @@ -1739,6 +1745,7 @@ export const tabConfigList = [ type: "RadioGroup", isAlone: true, required: true, + default: "7-1", options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", options: [ @@ -1764,13 +1771,53 @@ export const tabConfigList = [ }, ], }, + ons: { + input(value, ...args) { + const { data, formList } = args.slice(-1)[0]; + if (data.dcEventConstruction) { + data.dcEventConstruction.facilityId = null; + } + let facilityType = 1; + if (value == "7-2" || value == "7-7") { + facilityType = 1; + } else if (value == "7-3" || value == "7-8") { + facilityType = 6; + } else if (value == "7-4" || value == "7-9") { + facilityType = 3; + } + if (value && (value != "7-1" && value != "7-6")) { + //路网设施 1 收费站 2 桥梁 3 互通立交 4 枢纽立交 5 隧道 6 服务区 + request({ + url: `/business/facility/query?facilityType=${facilityType}`, + method: "get", + }) + .then((result) => { + if (result.code != 200) return Message.error(result?.msg); + let lwss = []; + result.data.forEach((it) => + lwss.push({ key: it.id, label: it.facilityName }) + ); + + formList.forEach((it) => { + if (it.key == "dcEventConstruction.facilityId") { + it.options.options = lwss; + } + }); + }) + .catch((err) => { + console.log("err", err); + Message.error("查询失败1", err); + }); + } + }, + }, }, { label: "管制方式:", key: "dcEventConstruction.controlMode", type: "RadioGroup", - isAlone: true, required: true, + default: "1", options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", options: [ @@ -1787,13 +1834,264 @@ export const tabConfigList = [ }, PresetFormItems.isInTunnel, { + //地点类型 ...PresetFormItems.locationType, key: "dcEventConstruction.locationType", + visible: (data) => { + if (data.eventSubclass == "7-1" || data.eventSubclass == "7-6") { + return true; + } + return false; + }, + }, + { + label: "施工方式:", + key: "dcEventConstruction.constructionMethod", + type: "RadioGroup", + isAlone: false, + required: true, + default: "1", + options: { + activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", + options: [ + { + key: "1", + label: "车道", + }, + { + key: "2", + label: "其他", + }, + ], + }, + visible: (data) => { + if (data.eventSubclass == "7-2" || data.eventSubclass == "7-7") { + return true; + } + return false; + }, + }, + { + label: "通行情况:", + key: "dcEventConstruction.trafficCondition", + type: "RadioGroup", + isAlone: true, + required: true, + default: "1", + options: { + activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", + options: [ + { + key: "1", + label: "通行受限", + }, + { + key: "2", + label: "车辆谨慎慢行", + }, + { + key: "3", + label: "车辆正常通行", + }, + ], + }, + visible: (data) => { + if ( + data.eventSubclass == "7-2" || + data.eventSubclass == "7-7" || + data.eventSubclass == "7-4" || + data.eventSubclass == "7-9" + ) { + return true; + } + return false; + }, }, PresetFormItems.freeway, PresetFormItems.direction, - PresetFormItems.station, - PresetFormItems.emptyLine, + { + ...PresetFormItems.station, + visible: (data) => { + if ( + (data.eventSubclass == "7-1" || data.eventSubclass == "7-6") && + data?.dcEventConstruction.locationType == "1" + ) { + return true; + } + return false; + }, + }, + { + ...PresetFormItems.startEndStation, + visible: (data) => { + if ( + (data.eventSubclass == "7-1" || data.eventSubclass == "7-6") && + data?.dcEventConstruction.locationType == "2" + ) { + return true; + } + return false; + }, + }, + // PresetFormItems.emptyLine, + { + ...PresetFormItems.laneOccupancy, + required: true, + visible: (data) => { + if (data?.dcEventConstruction.controlMode == "2") { + return true; + } + return false; + }, + }, + { + label: "收费站:", + key: "dcEventConstruction.facilityId", + type: "select", + isAlone: false, + required: true, + options: { + options: [], + }, + visible: (data) => { + if (data.eventSubclass == "7-2" || data.eventSubclass == "7-7") { + return true; + } + return false; + }, + }, + { + label: "出入口:", + key: "dcEventConstruction.exitsInlets", + type: "RadioGroup", + isAlone: false, + required: true, + default: "2", + options: { + activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", + options: [ + { + key: "1", + label: "出口", + }, + { + key: "2", + label: "入口", + }, + ], + }, + visible: (data) => { + if (data.eventSubclass == "7-2" || data.eventSubclass == "7-7") { + return true; + } + return false; + }, + }, + { + label: "服务区:", + key: "dcEventConstruction.facilityId", + type: "select", + isAlone: false, + required: true, + options: { + options: [], + }, + visible: (data) => { + if (data.eventSubclass == "7-3" || data.eventSubclass == "7-8") { + return true; + } + return false; + }, + }, + { + label: "地点:", + key: "dcEventConstruction.location", + isAlone: false, + required: true, + options: { + placeholder: "服务区地点", + }, + visible: (data) => { + if (data.eventSubclass == "7-3" || data.eventSubclass == "7-8") { + return true; + } + return false; + }, + }, + { + label: "立交桥:", + key: "dcEventConstruction.facilityId", + type: "select", + isAlone: false, + required: true, + options: { + options: [], + }, + visible: (data) => { + if (data.eventSubclass == "7-4" || data.eventSubclass == "7-9") { + return true; + } + return false; + }, + ons: { + change(value, ...args) { + const { formList } = args.slice(-1)[0]; + + //匝道 + request({ + url: `/system/ramp/listAll?facilityId=${value}`, + method: "get", + }) + .then((result) => { + if (result.code != 200) return Message.error(result?.msg); + let zd = []; + result.rows.forEach((it) => + zd.push({ key: it.id, label: it.rampName }) + ); + // console.log("zd", zd); + formList.forEach((it) => { + if (it.key == "dcEventConstruction.rampId") { + // console.log("it", it); + it.options.options = zd; + } + }); + }) + .catch((err) => { + console.log("err", err); + Message.error("查询失败3", err); + }); + }, + }, + }, + { + label: "匝道:", + key: "dcEventConstruction.rampId", + type: "select", + isAlone: false, + required: true, + options: { + options: [], + }, + visible: (data) => { + if (data.eventSubclass == "7-4" || data.eventSubclass == "7-9") { + return true; + } + return false; + }, + }, + { + label: "地方道路名称:", + key: "dcEventConstruction.localRoadName", + isAlone: true, + required: true, + options: {}, + visible: (data) => { + if (data.eventSubclass == "7-5" || data.eventSubclass == "7-10") { + return true; + } + return false; + }, + }, { label: "特殊地点描述:", key: "dcEventConstruction.specialPlaceDescription", @@ -1810,9 +2108,27 @@ export const tabConfigList = [ ...PresetFormItems.specialConstruction, key: "dcEventConstruction.specialConstruction", }, + { + label: "专项施工名称:", + key: "dcEventConstruction.otherConstructionName", + isAlone: true, + options: {}, + visible: (data) => { + if (data?.dcEventConstruction.specialConstruction == "4") { + return true; + } + return false; + }, + }, { ...PresetFormItems.constructionMeasurement, key: "dcEventConstruction.constructionMeasurement", + visible: (data) => { + if (data.eventSubclass == "7-1" || data.eventSubclass == "7-6") { + return true; + } + return false; + }, }, PresetFormItems.startTime, PresetFormItems.expectedEndTime, @@ -1835,6 +2151,7 @@ export const tabConfigList = [ type: "RadioGroup", isAlone: true, required: true, + default: "8-1", options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", options: [ @@ -1859,7 +2176,7 @@ export const tabConfigList = [ label: "服务区:", key: "dcEventServiceArea.facilityId", type: "select", - isAlone: true, + isAlone: false, required: true, options: { options: [ @@ -1870,12 +2187,50 @@ export const tabConfigList = [ ], }, }, + { + label: "停用设施:", + key: "dcEventServiceArea.disableFacility", + type: "select", + isAlone: false, + required: true, + options: { + options: [ + { + value: "1", + label: "卫生间", + }, + { + value: "2", + label: "餐厅", + }, + { + value: "3", + label: "停车场", + }, + { + value: "4", + label: "加油站", + }, + { + value: "5", + label: "充电桩", + }, + ], + }, + visible: (data) => { + if (data?.eventSubclass == "8-2") { + return true; + } + return false; + }, + }, { label: "出入口:", key: "dcEventServiceArea.exitsInlets", type: "RadioGroup", isAlone: true, required: true, + default: "2", options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", options: [ @@ -1911,6 +2266,7 @@ export const tabConfigList = [ type: "RadioGroup", isAlone: true, required: true, + default: "9-1", options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", options: [ @@ -1979,6 +2335,7 @@ export const tabConfigList = [ type: "RadioGroup", isAlone: true, required: true, + default: "10-1", options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", options: [ @@ -2020,6 +2377,91 @@ export const tabConfigList = [ }, ], }, + ons: { + input(value, ...args) { + const { formList } = args.slice(-1)[0]; + const config = formList.find( + (it) => it.key == "dcEventAbnormalWeather.weatherSituation" + ); + let ad = { + "10-1": [ + { + key: "1-1", + label: "雨雾", + }, + { + key: "1-2", + label: "雨雪", + }, + { + key: "1-3", + label: "中雨", + }, + { + key: "1-4", + label: "小雨", + }, + { + key: "1-5", + label: "大雨", + }, + { + key: "1-6", + label: "暴雨", + }, + ], + "10-2": [ + { + key: "2-1", + label: "小雪", + }, + { + key: "2-2", + label: "中雪", + }, + { + key: "2-3", + label: "大雪", + }, + { + key: "2-4", + label: "暴雪", + }, + { + key: "2-5", + label: "大暴雪", + }, + { + key: "2-6", + label: "特大暴雪", + }, + ], + "10-3": [ + { + key: "3-1", + label: "轻雾", + }, + { + key: "3-2", + label: "大雾", + }, + { + key: "3-3", + label: "浓雾", + }, + { + key: "3-4", + label: "强浓雾", + }, + { + key: "3-5", + label: "团雾", + }, + ], + }; + config.options.options = ad[value]; + }, + }, }, { ...PresetFormItems.weatherSituation, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/index.vue index 65da9a77..81799915 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/index.vue @@ -120,7 +120,7 @@ export default { // console.log('index',index) this.index = index; let formConfig = tabConfigList[index].formConfig; - + console.log('formConfig', formConfig) formConfig.list.forEach(it => { if (it.key == 'direction') { it.options.options = this.direction; @@ -128,7 +128,7 @@ export default { if (it.key == 'roadId') { it.options.options = this.roads; } - if (index == 7 || it.key === 'dcEventServiceArea.facilityId') { + if (index == 7 && it.key == 'dcEventServiceArea.facilityId') { it.options.options = this.lwss.filter(ss => ss.type == 6); } // if (index == 0 || index == 1 || index == 7) { @@ -148,21 +148,32 @@ export default { if (this.index == 0 || this.index == 1) { formData.lang = formData.lang.join(',') + } else { + formData.lang = '' } - if (formData.endStakeMark) { + if (formData.endStakeMark && formData.endStakeMark[0] != null) { let endStakeMark = formData.endStakeMark; let strMark = (endStakeMark && endStakeMark.length > 0) ? ('K' + endStakeMark[0] + '+' + endStakeMark[1]) : ''; if (this.index == 3) { formData.dcEventTrafficCongestion.endStakeMark = strMark; } + if (this.index == 6) { + formData.dcEventConstruction.endStakeMark = strMark; + } if (this.index == 9) { formData.dcEventAbnormalWeather.endStakeMark = strMark; } formData.endStakeMark = ''; + } else { + formData.endStakeMark = ''; } - // console.log('formData',formData) - // return; let stakeMark = formData.stakeMark; + // console.log('formData', { + // ...formData, + // eventType: Number(this.index) + 1, + // stakeMark: (stakeMark && stakeMark[0] != null) ? ((stakeMark && stakeMark.length > 0) ? ('K' + stakeMark[0] + '+' + stakeMark[1]) : '') : '', + // }) + // return; request({ url: `/dc/system/event`, @@ -170,7 +181,7 @@ export default { data: { ...formData, eventType: Number(this.index) + 1, - stakeMark: stakeMark ? ((stakeMark && stakeMark.length > 0) ? ('K' + stakeMark[0] + '+' + stakeMark[1]) : '') : '', + stakeMark: (stakeMark && stakeMark[0] != null) ? ((stakeMark && stakeMark.length > 0) ? ('K' + stakeMark[0] + '+' + stakeMark[1]) : '') : '', } }).then((result) => { if (result.code != 200) return Message.error(result?.msg); From 048b31bbf99ed1f28d2ce1abc6e1e03997f691ad Mon Sep 17 00:00:00 2001 From: zhoule Date: Fri, 23 Feb 2024 17:55:01 +0800 Subject: [PATCH 2/6] =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../event/event/EventDetailDialog/Carousel/index.vue | 2 +- .../JiHeExpressway/pages/control/event/event/index.vue | 1 + .../eventDetection/components/eventSource/assets/charts.js | 7 ++++--- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Carousel/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Carousel/index.vue index 1d0c5c00..575b3c50 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Carousel/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Carousel/index.vue @@ -2,7 +2,7 @@
- +
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue index 6240f771..6a44b764 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue @@ -199,6 +199,7 @@ export default { } }) + // console.log('result.rows',result.rows[0]) this.data = result.rows; this.total = result.total; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js index cbaa44bb..c2b70d9f 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js @@ -128,13 +128,14 @@ var options = { if (!mainData) return ""; for (let i = 0; i < window.mainData.length; i++) { if (window.mainData[i].name === name) { - target = window.mainData[i].percent; + target = window.mainData[i].value; } } + console.log('starget',target) var arr = [ "{ast|" + name + "}", - "{bst|" + (target * 100).toFixed(0) + "% }", - "{cst|" + target + "起}", + "{bst|" + Math.round((target * 100).toFixed(0)) + "% }", + "{cst|" + Math.round(target) + "起}", ]; return arr.join(" "); }, From ab6810f3d60253aa7d5c61c4ee810a25183d065a Mon Sep 17 00:00:00 2001 From: qingzhengli <1204552371@qq.com> Date: Fri, 23 Feb 2024 17:55:24 +0800 Subject: [PATCH 3/6] =?UTF-8?q?feat=20=E4=BC=98=E5=8C=96=20lngLatMap=20?= =?UTF-8?q?=E6=8F=90=E5=8F=96=E5=87=BA=E6=9D=A5=20=20canvas+Map=E5=85=AC?= =?UTF-8?q?=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RoadAndEvents/utils/buttonEvent.js | 61 +++++++++++++++++-- .../components/RoadAndEvents/utils/map.js | 31 ++-------- .../pages/Home/components/Thumbnail/index.vue | 2 + 3 files changed, 63 insertions(+), 31 deletions(-) diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js index 9848e32f..5f51f256 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js @@ -7,8 +7,10 @@ import { delay } from "@screen/utils/common"; import { Message } from "element-ui"; import { EventTopics } from "@screen/utils/enum.js"; import { debounce } from "lodash"; +import Vue from "vue"; import { markerClusterIns } from "./map"; +const canvasCtx = Vue.prototype.canvasCtx; const cameraIcon = { // 球机 @@ -75,6 +77,7 @@ export const DeviceForMap = { }, }; +export const lngLatMap = {}; //优化 缩略图 + 地图 复用lngLatmap export function getHandleDeviceType(item) { if (DeviceForMap[item.title]) return "地图路测设备/map"; if (EventTopics[item.title]) return "地图事件专题/map"; @@ -153,11 +156,13 @@ export const eventMap = { "font-size:15px; background:#83c806; color:#c7ff4a;", removeData ); - + addDataPreHandle(removeData); markerClusterIns.addData(removeData); - cacheRemoveFunc[`地图路测设备/${item.title}`] = () => + cacheRemoveFunc[`地图路测设备/${item.title}`] = () => { + removeDataPreHandle(removeData); markerClusterIns.removeData(removeData); + }; }, "地图路测设备/map_close"(item) { cacheRemoveFunc[`地图路测设备/${item.title}`]?.(); @@ -204,11 +209,13 @@ export const eventMap = { isDefault ) ); - + addDataPreHandle(removeData); markerClusterIns.addData(removeData); - cacheRemoveFunc[`地图事件专题/${item.title}`] = () => + cacheRemoveFunc[`地图事件专题/${item.title}`] = () => { + removeDataPreHandle(removeData); markerClusterIns.removeData(removeData); + }; }, "地图事件专题/map_close"(item) { cacheRemoveFunc[`地图事件专题/${item.title}`]?.(); @@ -249,15 +256,57 @@ export const eventMap = { let removeData = data.map((item) => resolveDataOptions.call(this, item, options, "PerceiveEvent", isDefault) ); - + addDataPreHandle(removeData); markerClusterIns.addData(removeData); loadingMessage?.close(); - cacheRemoveFunc[`事件专题/${item.title}`] = () => + cacheRemoveFunc[`事件专题/${item.title}`] = () => { + removeDataPreHandle(removeData); markerClusterIns.removeData(removeData); + }; }, "事件专题/感知事件_close"(item) { cacheRemoveFunc[`事件专题/${item.title}`]?.(); }, }; + +function lngLatMapHandle(markers, cb) { + markers.forEach((markerData) => { + const lnglat = markerData.lnglat; + if (lnglat) { + const getLatAndLng = () => { + if (Array.isArray(lnglat)) return { lng: lnglat[0], lat: lnglat[1] }; + else return lnglat; + }; + const { lat, lng } = getLatAndLng(); + const lngLatStr = `${lng}/${lat}`; + cb(lngLatStr, markerData); + } + }); +} + +function addDataPreHandle(markers) { + const cb = (lngLatStr, markerData) => { + if (lngLatMap[lngLatStr]) + !lngLatMap[lngLatStr].includes(markerData) && + lngLatMap[lngLatStr].push(markerData); + else lngLatMap[lngLatStr] = [markerData]; + }; + lngLatMapHandle(markers, cb); +} + +function removeDataPreHandle(markers) { + const cb = (lngLatStr, markerData) => { + if (lngLatMap[lngLatStr]) { + if (lngLatMap[lngLatStr].length < 2) delete lngLatMap[lngLatStr]; + else { + const findIndex = lngLatMap[lngLatStr].findIndex( + (removeData) => removeData === markerData + ); + lngLatMap[lngLatStr].splice(findIndex, 1); + } + } + }; + lngLatMapHandle(markers, cb); +} diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js index 55ab2de4..d7bf94fc 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js @@ -1,6 +1,7 @@ import { loadAMap } from "@screen/pages/Home/components/AMapContainer/loadAMap.js"; // import { Message } from "element-ui"; import Vue from "vue"; +import { lngLatMap } from "./buttonEvent"; /** * @typedef {Object} Point * @property {number} weight - The weight of the item. @@ -32,8 +33,6 @@ export class MarkerCluster { markerCluster; infoWindow; - lngLatMap = {}; - data = []; constructor() {} @@ -74,7 +73,7 @@ export class MarkerCluster { map.setZoom(10); setTimeout(() => { - map.setFitView([...this.markerCluster.U], false, [0, 0, 0, 0], 10); + map.setFitView([...this.markerCluster.U], false, [0, 0, 0, 0], 10); //自适应. 覆盖物数组, 动画过渡到指定位置, 周围边距，上、下、左、右, 最大 zoom 级别 }, 150); } @@ -268,19 +267,14 @@ export class MarkerCluster { context.marker.setContent(div); }, renderMarker: (context) => { + const markerData = context.data[0]; const { extData, lnglat: { lat, lng }, - } = context.data[0]; - + } = markerData; const lngLatStr = `${lng}/${lat}`; - if (this.lngLatMap[lngLatStr]) - !this.lngLatMap[lngLatStr].includes(context.data[0]) && - this.lngLatMap[lngLatStr].push(context.data[0]); - else this.lngLatMap[lngLatStr] = [context.data[0]]; - - context.marker.setContent(this.getContent(this.lngLatMap[lngLatStr])); + context.marker.setContent(this.getContent(lngLatMap[lngLatStr])); context.marker.setAnchor("bottom-center"); @@ -292,7 +286,7 @@ export class MarkerCluster { context.marker.on("click", (e) => { hasClick = true; - const data = this.lngLatMap[lngLatStr]; + const data = lngLatMap[lngLatStr]; if (data.length > 1) { this.showInfoWindow(data); return; @@ -325,19 +319,6 @@ export class MarkerCluster { (removeData) => removeData === item ); - const lngLatStr = `${item.lnglat.lng}/${item.lnglat.lat}`; - - if (this.lngLatMap[lngLatStr]) { - if (this.lngLatMap[lngLatStr].length < 2) - delete this.lngLatMap[lngLatStr]; - else { - const findIndex = this.lngLatMap[lngLatStr].findIndex( - (removeData) => removeData === item - ); - this.lngLatMap[lngLatStr].splice(findIndex, 1); - } - } - if (findIndex > -1) this.data.splice(findIndex, 1); }); diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/index.vue index d9ff5dad..84999dcd 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/index.vue @@ -5,6 +5,7 @@ + + diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue index 4bf9d6b3..1f70c877 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue @@ -1,32 +1,42 @@