From 3174b0ec78af1b9e2f7c53b034bce630f085b9f3 Mon Sep 17 00:00:00 2001 From: Joe <1712833832@qq.com> Date: Mon, 29 Jan 2024 17:48:35 +0800 Subject: [PATCH] =?UTF-8?q?=E6=99=BA=E8=83=BD=E8=AE=BE=E5=A4=87=E7=AE=B1?= =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Dialogs/Broadcast/index.vue | 2 - .../SmartDevice/components/LineChart/chart.js | 102 ++++++++++++ .../components/LineChart/index.vue | 23 +++ .../components/Dialogs/SmartDevice/index.vue | 148 ++++++++++++++++++ .../Home/components/RoadAndEvents/index.vue | 12 +- .../RoadAndEvents/utils/buttonEvent.js | 16 +- 6 files changed, 289 insertions(+), 14 deletions(-) create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/LineChart/chart.js create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/LineChart/index.vue create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue index f1e1c832..392d439f 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue @@ -24,7 +24,6 @@ import Dialog from "@screen/components/Dialog/index.vue"; import Button from "@screen/components/Buttons/Button.vue" import Descriptions from '@screen/components/Descriptions.vue'; -import CustomControlVideo from '@screen/components/CustomControlVideo/index.vue'; import BroadcastReleases from "./components/BroadcastReleases.vue" import Video from "@screen/components/Video" @@ -39,7 +38,6 @@ export default { Dialog, Button, Descriptions, - CustomControlVideo, BroadcastReleases, Video }, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/LineChart/chart.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/LineChart/chart.js new file mode 100644 index 00000000..b8fb844a --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/LineChart/chart.js @@ -0,0 +1,102 @@ +import * as echarts from "echarts"; + +export const lineChartOption = { + color: ["#2AD9FD"], + xAxis: { + name: "日", + type: "category", + // boundaryGap: ["15%", "15%"], + nameTextStyle: { + color: "#2AD9FD", + align: "right", + fontSize: 15, + padding: [0, -15, 0, 0], + }, + boundaryGap: false, + data: ["1", "5", "10", "15", "20", "25", "30"], + axisTick: { + show: false, + }, + axisLabel: { + color: "#fff", + fontSize: 12, + }, + axisLine: { + lineStyle: { + color: "#668598", + }, + }, + }, + grid: { + left: 51, + top: 15, + bottom: 24, + right: 36, + }, + tooltip: { + trigger: "axis", + backgroundColor: "rgba(0,0,0,0.36)", + borderWidth: 0, + textStyle: { + color: "#fff", + }, + formatter: "{b}：{c}", + // formatter: function([axisData]) { + // console.log(axisData) + // let str = axisData.name + ' ' + axisData.data + '辆
'; + // // params.forEach(item => { + // // if (item.seriesName === '供温' || item.seriesName === '回温') { + // // str += item.marker + item.seriesName + ' : ' + item.data.value + ' ℃' + '
'; + // // } else if (item.seriesName === '压力值(Mpa)') { + // // // 柱状图渐变时设置marker + // // item.marker = ''; + // // str += item.marker + item.seriesName + ' : ' + item.data.value + ' m'; + // // } + // // }); + // return str; + // } + }, + yAxis: { + max: 100, + type: "value", + // nameGap: 24, + splitLine: { + lineStyle: { + type: [6, 9], + color: "rgba(255,255,255, .3)", + // dashOffset: [10, 10], + // cap: 21, + // width: 2 + }, + }, + axisLabel: { + color: "#fff", + fontSize: 12, + formatter: "{value} %", + }, + }, + series: [ + { + data: [0, 90, 65, 90, 45, 36, 27], + type: "line", + showSymbol: false, + smooth: true, + lineStyle: { + color: "#2AD9FD", + }, + areaStyle: { + opacity: 0.8, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "rgb(90, 227, 255, .9)", + }, + { + offset: 1, + color: "rgba(42,217,253,0)", + }, + ]), + }, + }, + ], +}; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/LineChart/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/LineChart/index.vue new file mode 100644 index 00000000..31d73d94 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/LineChart/index.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue new file mode 100644 index 00000000..dc1ff5b7 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue @@ -0,0 +1,148 @@ + + + + + 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 fd9c83ef..acfb0cf8 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 @@ -25,9 +25,7 @@ - - @@ -39,13 +37,14 @@ import { debounce } from "lodash"; import { eventMap, cacheRemoveFunc, getHandleDeviceType } from "./utils/buttonEvent"; import Bg1 from "@screen/components/Decorations/bg-1.vue" -// import ControlCamera from "./../Dialogs/ControlCamera/index.vue" +import InfoBoard from "./../InfoBoard" + import DrivingGuidance from "./../Dialogs/DrivingGuidance/index.vue" import Camera from "./../Dialogs/Camera/index.vue"; import Broadcast from "./../Dialogs/Broadcast/index.vue"; import TrafficIncidents from "./../Dialogs/TrafficIncidents/index.vue"; import PerceiveEvent from "./../Dialogs/PerceiveEvent/index.vue"; -import InfoBoard from "./../InfoBoard" +import SmartDevice from "./../Dialogs/SmartDevice/index.vue"; export default { name: 'RoadAndEvents', @@ -53,11 +52,12 @@ export default { // ControlCamera, Camera, DrivingGuidance, + Bg1, InfoBoard, Broadcast, TrafficIncidents, PerceiveEvent, - Bg1 + SmartDevice, }, data() { return { @@ -92,7 +92,7 @@ export default { // 0 有 可控（球机） ControlCamera | 1 ⽆ 不可控（枪机） Camera component: void 0, data: void 0, - // component: "PerceiveEvent", + component: "SmartDevice", data: { "searchValue": null, "createBy": null, 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 eec60041..f45a28df 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 @@ -44,6 +44,10 @@ export const DeviceForMap = { deviceType: "5", dialog: "Broadcast", }, + 设备箱: { + deviceType: "13", + dialog: "SmartDevice", + }, }; export function getHandleDeviceType(item) { @@ -92,6 +96,8 @@ export const eventMap = { }) .catch(() => {}); + loadingMessage.close(); + if (!data) return; if (!data.length) return Message.warning(`没有${item.title}事件数据!`); @@ -108,8 +114,6 @@ export const eventMap = { markerClusterIns.addData(removeData); - loadingMessage.close(); - cacheRemoveFunc[`地图路测设备/${item.title}`] = () => markerClusterIns.removeData(removeData); }, @@ -133,6 +137,8 @@ export const eventMap = { }) .catch(() => {}); + loadingMessage.close(); + if (!data) return; if (!data.length) return Message.warning(`没有${item.title}事件数据!`); @@ -150,8 +156,6 @@ export const eventMap = { markerClusterIns.addData(removeData); - loadingMessage.close(); - cacheRemoveFunc[`地图事件专题/${item.title}`] = () => markerClusterIns.removeData(removeData); }, @@ -175,14 +179,14 @@ export const eventMap = { }) .catch(() => {}); + loadingMessage.close(); + if (!data) return; if (!data?.length) return Message.warning(`没有${item.title}数据!`); eventMap[`事件专题/感知事件_close`](item); - loadingMessage.close(); - const options = { stateCallback: () => true, item,