diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue index 7de3aa72..73970c5e 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue @@ -8,7 +8,7 @@
-
@@ -86,19 +86,6 @@ export default { } - + diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue index ab2c2002..62e498dd 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue @@ -214,7 +214,7 @@ export default { margin-bottom: 6px; display: grid; grid-template-columns: repeat(5, 1fr); - // grid-template-rows: repeat(3, 1fr); + grid-auto-rows: 78px; flex: 1; max-height: 100%; overflow: auto; 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 0356eac5..f8a053fc 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 @@ -1,6 +1,7 @@ -import { getDeviceList } from "./httpList"; +import { getDeviceList, getEventTopicList } from "./httpList"; import { delay } from "@screen/utils/common"; import { Message } from "element-ui"; +import { EventTopics } from "@screen/utils/enum.js"; import { setMarkToMap } from "./map"; @@ -43,12 +44,13 @@ export const DeviceForMap = { }; export function getHandleDeviceType(item) { - if (DeviceForMap[item.title]) return "地图设备/map"; + if (DeviceForMap[item.title]) return "地图路测设备/map"; + if (EventTopics[item.title]) return "地图事件专题/map"; } export const eventMap = { - // 需要在地图显示的 - async "地图设备/map"(item) { + // 设备 需要在地图显示的 + async "地图路测设备/map"(item) { const config = DeviceForMap[item.title]; const loadingMessage = Message.info({ @@ -68,9 +70,9 @@ export const eventMap = { if (!data) return; - eventMap[`地图设备/map_close`](item); + eventMap[`地图路测设备/map_close`](item); - cacheRemoveFunc[`地图设备/${item.title}`] = await setMarkToMap.call( + cacheRemoveFunc[`地图路测设备/${item.title}`] = await setMarkToMap.call( this, item, data, @@ -86,7 +88,47 @@ export const eventMap = { config.options ); }, - "地图设备/map_close"(item) { - cacheRemoveFunc[`地图设备/${item.title}`]?.(); + "地图路测设备/map_close"(item) { + cacheRemoveFunc[`地图路测设备/${item.title}`]?.(); + }, + // 事件 需要在地图显示的 + async "地图事件专题/map"(item) { + const loadingMessage = Message.info({ + message: `${item.title}事件位置加载中...`, + duration: 0, + customClass: "loading-message", + iconClass: "el-icon-loading", + }); + + const data = await getEventTopicList(EventTopics[item.title]) + .then(async (data) => { + await delay(600); + return data; + }) + .catch(() => {}) + .finally(() => loadingMessage.close()); + + if (!data) return; + + eventMap[`地图事件专题/map_close`](item); + + cacheRemoveFunc[`地图事件专题/${item.title}`] = await setMarkToMap.call( + this, + item, + data, + (extData) => { + this.dialogConfig = { + component: null, + data: { + ...extData, + parseOtherConfig: JSON.parse(extData.otherConfig || "{}"), + }, + }; + } + // config.options + ); + }, + "地图事件专题/map_close"(item) { + cacheRemoveFunc[`地图事件专题/${item.title}`]?.(); }, }; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js index dc186b9e..e32a51ed 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js @@ -248,3 +248,29 @@ export function getProduct(productId) { }); }); } + +/** + * @param {number} eventType + */ +export function getEventTopicList(eventType) { + return new Promise((resolve, reject) => { + if (!eventType) return reject(); + + request({ + url: `/business/trafficIncidents/getEventList/${eventType}`, + method: "get", + }) + .then(({ code, data }) => { + if (code != 200) { + reject(); + return Message.error(`${DeviceTypeMap[deviceType]}事件加载失败!`); + } + + resolve(data); + }) + .catch(() => { + Message.error(`${DeviceTypeMap[deviceType]}事件加载失败!`); + reject(); + }); + }); +} diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/layerImages.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/layerImages.js index e3ccb3a2..2d2b4aae 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/layerImages.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/layerImages.js @@ -1,3 +1,5 @@ +import { EventTopics } from "@screen/utils/enum.js"; + export function getLayerData() { const layerData = require.context( "@screen/images/layer", @@ -10,6 +12,11 @@ export function getLayerData() { layerData.keys().forEach((item) => { const [_, topic, title] = item.match(/[^/]+/g); + switch (topic) { + case "事件专题": + if (!EventTopics[title.match(/[^._]+/)[0]]) return; + break; + } if (!layerDatas[topic]) { resultData.push( (layerDatas[topic] = { @@ -19,6 +26,7 @@ export function getLayerData() { }) ); } + layerDatas[topic].children.push({ id: item, title: title.replace(".svg", ""), 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 25d637c7..5c44c837 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 @@ -63,11 +63,7 @@ export async function setMarkerCluster(map, points, markerFun) { const offset = new AMap.Pixel(0, 0); context.marker.setContent(content); context.marker.setAnchor("bottom-center"); - console.log( - "%c [ context.marker ]-62-「map.js」", - "font-size:15px; background:#7d477f; color:#c18bc3;", - context.marker - ); + context.marker.setOffset(offset); context.marker.setExtData(extData); @@ -172,7 +168,11 @@ export async function setMarkToMap( markerClick ); - mapIns.setFitView([...markerCluster.U], false, [0, 0, 0, 0], 10); + mapIns.setZoom(10); + + setTimeout(() => { + mapIns.setFitView([...markerCluster.U], false, [0, 0, 0, 0], 10); + }, 150); return () => markerCluster.setMap(null); } diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue index a1838491..34d1124a 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue @@ -13,13 +13,7 @@
-
- - - -
+
@@ -42,6 +36,7 @@ import Thumbnail from "./components/Thumbnail/index.vue"; import ConditionStatistics from "./components/ConditionStatistics/index.vue"; import RoadAndEvents from "./components/RoadAndEvents/index.vue"; import AMapContainer from "./components/AMapContainer/index.vue"; +import HomeFilter from "./components/HomeFilter/index.vue"; import Button from '@screen/components/Buttons/Button.vue'; // import InfoBoard from "./components/InfoBoard" @@ -54,7 +49,8 @@ export default { Thumbnail, RoadAndEvents, AMapContainer, - Button + Button, + HomeFilter // InfoBoard }, data() { @@ -142,19 +138,6 @@ export default { display: flex; gap: 9px; - .btn { - padding: 9px; - background: linear-gradient(180deg, #152E3C 0%, #163A45 100%); - border-radius: 4px; - overflow: hidden; - height: unset; - border: 1px solid rgba(40, 144, 167, 1); - } - - .btn-active { - background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); - } - .filter { display: flex; flex-direction: column; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/data.js index 840527ed..c8286350 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/data.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/data.js @@ -1,22 +1,22 @@ import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; export const tabMap = { - AlarmEvents: { + "-1": { state: 5, textColor: "#007FF4", text: "去确认", }, - EventsConfirmed: { + 0: { state: 5, textColor: "#007FF4", text: "去确认", }, - DisposingEvents: { + 1: { state: 4, textColor: "#007FF4", text: "去处置", }, - IncidentDisposed: { + 2: { state: 3, textColor: "#007FF4", text: "处置记录", 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 f2a6d796..36895163 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 @@ -29,7 +29,7 @@
-
+
@@ -56,6 +56,7 @@ import InputSearch from '@screen/components/InputSearch/index.vue'; import EventDetailDialog from "./EventDetailDialog/index"; import FormEvent from "./FormEvent/index"; import { tabMap, searchFormList } from "./data"; +import request from "@/utils/request"; function getRandomData(min = 1, max = 15) { return Math.floor(Math.random() * (max - min + 1)) + min @@ -83,45 +84,60 @@ export default { }, data() { return { - data: getMockData(), + data: [], searchFormList, - - activeName: "AlarmEvents", + activeName: "-1", panels: [ { label: "告警事件(20)", - key: "AlarmEvents" + key: "-1" }, { label: "待确认事件(125)", - key: "EventsConfirmed" + key: "0" }, { label: "处置中事件(230)", - key: "DisposingEvents" + key: "1" }, { label: "已处置事件(76)", - key: "IncidentDisposed" + key: "2" }, ], eventDetailDialogVisible: false, - isShowAddNew: false + isShowAddNew: false, + searchData: { + pageSize: 15, + pageNo: 1, + eventState: null + } } }, methods: { handleSelect(activeName) { this.activeName = activeName; - this.data = getMockData(); + + this.searchData.eventState = activeName == '-1' ? null : activeName; + + // this.data = getMockData(); }, getStateCardBind(item) { const { state, textColor, text } = tabMap[this.activeName] + return { cardData: { ...item, state }, lastBtnColor: textColor, lastBtnText: text } }, + getData() { + request({ + url: `/dc/system/event/list`, + method: "get", + // params: this.searchData + }) + }, onAddNew() { this.isShowAddNew = true; }, diff --git a/ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss b/ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss index caf6123d..81a27a5f 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss +++ b/ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss @@ -482,3 +482,15 @@ body { } } } + +div.el-popper.global-input-search-popover { + background: #064258; + + .footer { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 9px; + margin-top: 15px; + } +} diff --git a/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js b/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js index d1bcf687..8786420b 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js +++ b/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js @@ -71,3 +71,17 @@ export const CameraControlTypeEnum = { text: "枪机", }, }; + +export const EventTopics = { + 交通事故: 1, + 车辆故障: 2, + 交通管制: 3, + 交通拥堵: 4, + 非法上路: 5, + 路障清除: 6, + 施工建设: 7, + 服务区异常: 8, + 设施设备隐患: 9, + 异常天气: 10, + 其他事件: 11, +};