diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json index 3f9bfe8e..d359e330 100644 --- a/ruoyi-ui/package.json +++ b/ruoyi-ui/package.json @@ -49,6 +49,7 @@ "crypto-js": "4.0.0", "dayjs": "^1.11.7", "debounce": "^1.2.0", + "deepmerge": "^4.3.1", "dplayer": "^1.26.0", "echarts": "^5.2.2", "echarts-liquidfill": "^3.1.0", @@ -152,4 +153,4 @@ "> 1%", "last 2 versions" ] -} \ No newline at end of file +} diff --git a/ruoyi-ui/src/common/menuData.js b/ruoyi-ui/src/common/menuData.js index 7c08946f..ebeccf37 100644 --- a/ruoyi-ui/src/common/menuData.js +++ b/ruoyi-ui/src/common/menuData.js @@ -115,7 +115,14 @@ export default [ name: "statisticalAnalysis", path: "/maintain/statisticalAnalysis", component: "maintenanceOperations/statisticalAnalysis/index.vue", - }] + }, + { + title: "设备查询", + name: "maintainQuery", + path: "/maintain/maintainQuery", + component: "maintenanceOperations/maintainQuery/index.vue", + } + ] }, { title: "公众服务", diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue index 47f79ff9..08de14d1 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue @@ -63,14 +63,22 @@ export default { '--reverse-scale', '' ], + [ + '--middle-scale', + '' + ], ]; if (scaleX > scaleY) { - cssGlobalVariable[0][1] = `scaleX(${1 / scaleX * scaleY})`; + // cssGlobalVariable[0][1] = `scaleX(${1 / scaleX * scaleY})`; + cssGlobalVariable[0][1] = `scaleX(${1 - (scaleX - scaleY)})`; cssGlobalVariable[1][1] = `scaleY(${1 / scaleX})`; + cssGlobalVariable[2][1] = `scaleX(${1 - (scaleX - scaleY) / 2})`; } else { - cssGlobalVariable[0][1] = `scaleY(${1 / scaleY * scaleX})`; + // cssGlobalVariable[0][1] = `scaleY(${1 / scaleY * scaleX})`; + cssGlobalVariable[0][1] = `scaleX(${1 - (scaleY - scaleX)})`; cssGlobalVariable[1][1] = `scaleX(${1 / scaleY})`; + cssGlobalVariable[2][1] = `scaleX(${1 - (scaleY - scaleX) / 2})`; } cssGlobalVariable.forEach((data) => { @@ -94,47 +102,35 @@ export default { body { .keep-ratio { transform: var(--keep-ratio); - transition: all .15s linear; - - &[origin] { - transform-origin: attr(origin); - } - - &-left { - transform-origin: left; - } - - &-right { - transform-origin: right; - } + } - &-bottom { - transform-origin: bottom; - } + .reverse-ratio { + transform: var(--reverse-scale); + } - &-top { - transform-origin: top; - } + .middle-ratio { + transform: var(--middle-scale); } - .reverse-scale { - transform: var(--reverse-scale); + .keep-ratio, + .reverse-ratio, + .middle-ratio { transition: all .15s linear; - &-left { + &[origin="left"] { transform-origin: left; } - &-right { + &[origin="right"] { transform-origin: right; } - &-bottom { - transform-origin: bottom; + &[origin="top"] { + transform-origin: top; } - &-top { - transform-origin: top; + &[origin="bottom"] { + transform-origin: bottom; } } } diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue index a9da0db4..d6bad9c8 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue @@ -1,5 +1,5 @@ @@ -55,31 +52,31 @@ export default { DrivingGuidance, InfoBoard, Bg1 -}, + }, data() { return { - testData:{ - visible:true, - device: { - "id": 904, - "iotDeviceId": "81221-65535", - "groupId": null, - "productId": 0, - "stakeMarkId": "k59+289", - "direction": "1", - "deviceName": "大学城入口站前板", - "deviceType": 2, - "installationDate": null, - "productionDate": null, - "durableYears": null, - "installationSite": null, - "useState": null, - "otherConfig": "{\"screenSize\":\"160*80\"}", - "remark": null, - "createTime": "2024-01-10T15:48:59.000+08:00", - "updateTime": null - } - }, + // testData:{ + // visible:true, + // device: { + // "id": 904, + // "iotDeviceId": "81221-65535", + // "groupId": null, + // "productId": 0, + // "stakeMarkId": "k59+289", + // "direction": "1", + // "deviceName": "大学城入口站前板", + // "deviceType": 2, + // "installationDate": null, + // "productionDate": null, + // "durableYears": null, + // "installationSite": null, + // "useState": null, + // "otherConfig": "{\"screenSize\":\"160*80\"}", + // "remark": null, + // "createTime": "2024-01-10T15:48:59.000+08:00", + // "updateTime": null + // } + // }, layerData: [], active: "事件专题", tabContentData: [], diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/data.json b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/data.json new file mode 100644 index 00000000..6782a0fa --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/data.json @@ -0,0 +1,464 @@ +[ + { + "id": 1882, + "iotDeviceId": null, + "groupId": null, + "productId": 285, + "stakeMarkId": "K60+000—K65+000", + "direction": null, + "deviceName": "智能行车诱导系统", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": "2024-01-17T22:50:56.000+08:00", + "updateTime": null, + "longitude": null, + "latitude": null + }, + { + "id": 1883, + "iotDeviceId": null, + "groupId": null, + "productId": 285, + "stakeMarkId": "K75+000—K81+000", + "direction": null, + "deviceName": "智能行车诱导系统", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": "2024-01-17T22:50:56.000+08:00", + "updateTime": null, + "longitude": null, + "latitude": null + }, + { + "id": 1884, + "iotDeviceId": null, + "groupId": null, + "productId": 285, + "stakeMarkId": "K101+000—K104+000", + "direction": null, + "deviceName": "智能行车诱导系统", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": "2024-01-17T22:50:56.000+08:00", + "updateTime": null, + "longitude": null, + "latitude": null + }, + { + "id": 1885, + "iotDeviceId": null, + "groupId": null, + "productId": 285, + "stakeMarkId": "K110+000—K112+000", + "direction": null, + "deviceName": "智能行车诱导系统", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": "2024-01-17T22:50:56.000+08:00", + "updateTime": null, + "longitude": null, + "latitude": null + }, + { + "id": 1886, + "iotDeviceId": null, + "groupId": null, + "productId": 285, + "stakeMarkId": "K147+000—K152+000", + "direction": null, + "deviceName": "智能行车诱导系统", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": "2024-01-17T22:50:56.000+08:00", + "updateTime": null, + "longitude": null, + "latitude": null + }, + { + "id": 1887, + "iotDeviceId": null, + "groupId": null, + "productId": 285, + "stakeMarkId": "K162+000—K166+000", + "direction": null, + "deviceName": "智能行车诱导系统", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": "2024-01-17T22:50:56.000+08:00", + "updateTime": null, + "longitude": null, + "latitude": null + }, + { + "id": 1888, + "iotDeviceId": null, + "groupId": null, + "productId": 285, + "stakeMarkId": "K205+000—K207+000", + "direction": null, + "deviceName": "智能行车诱导系统", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": "2024-01-17T22:50:56.000+08:00", + "updateTime": null, + "longitude": null, + "latitude": null + }, + { + "id": 1889, + "iotDeviceId": null, + "groupId": null, + "productId": 285, + "stakeMarkId": "K59+290", + "direction": null, + "deviceName": "智能行车诱导系统", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": "2024-01-17T22:50:56.000+08:00", + "updateTime": null, + "longitude": null, + "latitude": null + }, + { + "id": 1890, + "iotDeviceId": null, + "groupId": null, + "productId": 285, + "stakeMarkId": "K72+844", + "direction": null, + "deviceName": "智能行车诱导系统", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": "2024-01-17T22:50:56.000+08:00", + "updateTime": null, + "longitude": null, + "latitude": null + }, + { + "id": 1891, + "iotDeviceId": null, + "groupId": null, + "productId": 285, + "stakeMarkId": "K83+885", + "direction": null, + "deviceName": "智能行车诱导系统", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": "2024-01-17T22:50:56.000+08:00", + "updateTime": null, + "longitude": null, + "latitude": null + }, + { + "id": 1892, + "iotDeviceId": null, + "groupId": null, + "productId": 285, + "stakeMarkId": "K86+499", + "direction": null, + "deviceName": "智能行车诱导系统", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": "2024-01-17T22:50:56.000+08:00", + "updateTime": null, + "longitude": null, + "latitude": null + }, + { + "id": 1893, + "iotDeviceId": null, + "groupId": null, + "productId": 285, + "stakeMarkId": "K99+750", + "direction": null, + "deviceName": "智能行车诱导系统", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": "2024-01-17T22:50:56.000+08:00", + "updateTime": null, + "longitude": null, + "latitude": null + }, + { + "id": 1894, + "iotDeviceId": null, + "groupId": null, + "productId": 285, + "stakeMarkId": "K105+904", + "direction": null, + "deviceName": "智能行车诱导系统", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": "2024-01-17T22:50:56.000+08:00", + "updateTime": null, + "longitude": null, + "latitude": null + }, + { + "id": 1895, + "iotDeviceId": null, + "groupId": null, + "productId": 285, + "stakeMarkId": "K117+878", + "direction": null, + "deviceName": "智能行车诱导系统", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": "2024-01-17T22:50:56.000+08:00", + "updateTime": null, + "longitude": null, + "latitude": null + }, + { + "id": 1896, + "iotDeviceId": null, + "groupId": null, + "productId": 285, + "stakeMarkId": "K126+224", + "direction": null, + "deviceName": "智能行车诱导系统", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": "2024-01-17T22:50:56.000+08:00", + "updateTime": null, + "longitude": null, + "latitude": null + }, + { + "id": 1897, + "iotDeviceId": null, + "groupId": null, + "productId": 285, + "stakeMarkId": "K145+934", + "direction": null, + "deviceName": "智能行车诱导系统", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": "2024-01-17T22:50:56.000+08:00", + "updateTime": null, + "longitude": null, + "latitude": null + }, + { + "id": 1898, + "iotDeviceId": null, + "groupId": null, + "productId": 285, + "stakeMarkId": "K155+652", + "direction": null, + "deviceName": "智能行车诱导系统", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": "2024-01-17T22:50:56.000+08:00", + "updateTime": null, + "longitude": null, + "latitude": null + }, + { + "id": 1899, + "iotDeviceId": null, + "groupId": null, + "productId": 285, + "stakeMarkId": "K163+250", + "direction": null, + "deviceName": "智能行车诱导系统", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": "2024-01-17T22:50:56.000+08:00", + "updateTime": null, + "longitude": null, + "latitude": null + }, + { + "id": 1900, + "iotDeviceId": null, + "groupId": null, + "productId": 285, + "stakeMarkId": "K173+600", + "direction": null, + "deviceName": "智能行车诱导系统", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": "2024-01-17T22:50:56.000+08:00", + "updateTime": null, + "longitude": null, + "latitude": null + }, + { + "id": 1901, + "iotDeviceId": null, + "groupId": null, + "productId": 285, + "stakeMarkId": "K179+140", + "direction": null, + "deviceName": "智能行车诱导系统", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": "2024-01-17T22:50:56.000+08:00", + "updateTime": null, + "longitude": null, + "latitude": null + }, + { + "id": 1902, + "iotDeviceId": null, + "groupId": null, + "productId": 285, + "stakeMarkId": "K190+500", + "direction": null, + "deviceName": "智能行车诱导系统", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": "2024-01-17T22:50:56.000+08:00", + "updateTime": null, + "longitude": "116.147183", + "latitude": "35.612834" + }, + { + "id": 99999, + "iotDeviceId": null, + "groupId": null, + "productId": 286, + "stakeMarkId": "k59+289", + "direction": "2", + "deviceName": "不知", + "deviceType": 12, + "installationDate": null, + "productionDate": null, + "durableYears": null, + "installationSite": null, + "useState": null, + "otherConfig": null, + "remark": null, + "createTime": null, + "updateTime": null, + "longitude": null, + "latitude": null + } +] \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/firstResponders/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/firstResponders/data.js new file mode 100644 index 00000000..3cb25cff --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/firstResponders/data.js @@ -0,0 +1,20 @@ +// import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; + +export const searchFormList = [ + { + label: "岗位:", + key: "key009", + type: "select", + options: { + type: "daterange", + }, + }, + { + label: "驻点:", + key: "key018", + type: "select", + options: { + type: "daterange", + }, + }, +]; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/firstResponders/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/firstResponders/index.vue index 9a8cacc9..a94333cc 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/firstResponders/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/firstResponders/index.vue @@ -22,7 +22,7 @@ - +
@@ -35,6 +35,7 @@ import PeopleCard from "./../../components/PeopleCard/index.vue"; import InputSearch from '@screen/components/InputSearch/index.vue'; import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; +import { searchFormList } from "./data"; export default { name: 'FirstResponders', @@ -45,6 +46,7 @@ export default { }, data() { return { + searchFormList } } } diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DispatchLiaison/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DispatchLiaison/index.vue index a1196192..9797ad67 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DispatchLiaison/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DispatchLiaison/index.vue @@ -1,26 +1,26 @@ diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalPlan/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalPlan/index.vue index 2311f4a5..b79852d3 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalPlan/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalPlan/index.vue @@ -1,7 +1,7 @@ diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalProcess/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalProcess/index.vue index a97d0917..384a796c 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalProcess/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalProcess/index.vue @@ -29,7 +29,7 @@
- + 发送 @@ -63,6 +63,7 @@ export default { emit: ['fullHeight'], data() { return { + test: null, timeLine1List, // timeLine2List: Array.from({ length: 6 }).map(() => ({ // title: "接警记录", diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue index d7e03549..39684805 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue @@ -11,7 +11,12 @@ +
+ @@ -24,6 +29,7 @@ import { formList, timeLine1List } from "./data" import { timeLine2List } from "@screen/pages/control/event/commandDispatch/Cards/DisposalProcess/data.js" import Video from "@screen/components/Video"; import Carousel from "./Carousel/index.vue" +import Button from '@screen/components/Buttons/Button.vue'; export default { name: 'EventDetail', @@ -33,7 +39,8 @@ export default { TimeLine1, TimeLine2, Video, - Carousel + Carousel, + Button }, model: { prop: 'visible', 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 b09c346d..e54e8c84 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 @@ -10,8 +10,8 @@
- - + +
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/assets/charts.js index ab52e40c..bcc12a76 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/assets/charts.js @@ -1,391 +1,176 @@ -var res = [ - { value: 50, name: '情报板发布' }, - { value: 1, name: '' }, - { value: 20, name: '微博发布' }, - { value: 1, name: '' }, - { value: 30, name: '服务网站' }, - { value: 1, name: '' }, - ]; - // var res = this.evaluatedCountList; - var data1 = [], data2 = [], data3 = [], legendData = []; - var curIndex = 0; - var index = 0; - let angle = 0; //角度，用来做简单的动画效果的 - - for (var i = 0; i < res.length; i++) { - - data1.push({ - value: res[i].value, - name: res[i].name, - }) - data2.push({ - value: res[i].value, - name: res[i].name, - itemStyle: { - opacity: 0.4, +import * as echarts from "echarts"; +var options = { + tooltip: { + showContent: true, + trigger: 'axis', + backgroundColor: 'rgba(8,36,68,.7)', + color: '#fff', + textStyle: { + color: '#fff', }, - }) - - data3.push({ - value: res[i].value, - name: res[i].name, - itemStyle: { - opacity: 0.1, + }, + legend: { + top: '5%', + right: '10', + icon: 'circle', + itemWidth: 10, + itemHeight: 10, + textStyle: { + color: '#fff', + fontSize: 12, }, - }) - if ( res[i].name != "" ) - legendData.push(res[i].name); - } - - var options = { - color: ['#5CC5FF', 'transparent', '#54EFD5', 'transparent', '#FD9666', 'transparent', '#5C8CFE', 'transparent', '#51D5AD', 'transparent'], - title: [ + }, + grid: { + left: '30%', + right: '20%', + top: '10%', + bottom: '10%', + // width: 250, + }, + xAxis: [ { - text:'999', - top: '25%', - textAlign: 'center', - left: '50%', - textStyle: { - color: '#ffffff', - fontSize: 30, - fontFamily: 'SourceHanSansCN', - }, + splitLine: { + show: false, + }, + type: 'value', + show: false, }, + ], + yAxis: [ { - text: '总数', - top: '38%', - textAlign: 'center', - left: '50%', - textStyle: { - color: 'rgba(242, 252, 253, 0.84)', - fontSize: 16, - fontFamily: 'SourceHanSansCN', - }, - }, - ], - grid: { - top: '3%', - left: '6%', - right: '6%', - bottom: '3%', - containLabel: true - }, - tooltip: { - trigger: 'item', - formatter: '{b} : {c}:{d}' - }, - legend: { - orient: '', - left: '10%', - top: '68%', - itemWidth: 10, - itemHeight: 10, - icon:"circle", - textStyle: { - color: "#ffffff", - fontSize: 14, - lineHeight: 22, - rich: { - text: { - marginLeft:32, - fontSize: 14, + splitLine: { + show: false, }, - number: { - fontSize: 14, - color: "#37E7FF", - marginLeft:32, - fontWeight: 'bold' + axisLine: { + //y轴 + show: false, }, - unit: { - fontSize: 14, - } - } - }, - data: legendData, - formatter(name) { - if ( name == "" ) return ""; - const newData = res; - let tarValue = 0; - let total = 0; - for (let i = 0; i < newData.length; i++) { - total += newData[i].value; - if (newData[i].name === name) { - tarValue = newData[i].value; - } - } - var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); - const arr = name + ' ' + tarValue; - return `{text|${name}} {number|${percert}%}`;; - }, - }, - series: [ - /** 饼图上刻度 */ - { - type: 'gauge', - center: ['50%', '35%'], - radius: '40%', // 错位调整此处 - startAngle: 0, - endAngle: 360, - splitNumber: 52, - axisLine: { show: false }, - splitLine: { - // length: 39, - length: '2', - lineStyle: { - width: 5, - color: '#5CC5FF' - } - }, - axisTick: { show: false }, - axisLabel: { show: false } - }, - /** 绘制外部圆弧-2-开始圆点 */ - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - let x0 = api.getWidth() / 2; - let y0 = api.getHeight() / 2 - 59; - let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50; - return { - type: 'circle', - shape: { - /** 角度175° 外弧2开始角度 */ - cx: x0 + r * Math.cos((350 + -angle) * Math.PI / 180), - cy: y0 + r * Math.sin((350 + -angle) * Math.PI / 180), - r: 4 + type: 'category', + axisTick: { + show: false, }, - style: { - fill: '#5BC4FF', - stroke: '#5BC4FF' + inverse: true, + data: [ + '大学城收费站', + '大学城收费站', + '大学城收费站', + '大学城收费站', + '大学城收费站', + ], + axisLabel: { + color: '#fff', + fontSize: 14, + margin:20, }, - silent: true - } - }, - data: [0] - }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - return { - type: 'arc', - shape: { - cx: api.getWidth() / 2, - cy: api.getHeight() / 2 - 59, - r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, - startAngle: (350 + -angle) * Math.PI / 180, - endAngle: (120 + -angle) * Math.PI / 180 - }, - style: { - fill: 'transparent', - stroke: '#5BC4FF66', - lineWidth: 2.6 - }, - silent: true - } - }, - data: [0] }, { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - let x0 = api.getWidth() / 2; - let y0 = api.getHeight() / 2 - 59; - let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50; - return { - type: 'circle', - shape: { - /** 角度175° 外弧2开始角度 */ - cx: x0 + r * Math.cos((150 + -angle) * Math.PI / 180), - cy: y0 + r * Math.sin((150 + -angle) * Math.PI / 180), - r: 4 - }, - style: { - fill: '#5BC4FF', - stroke: '#5BC4FF' - }, - silent: true - } - }, - data: [0] - }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - return { - type: 'arc', - shape: { - cx: api.getWidth() / 2, - cy: api.getHeight() / 2 - 59, - r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, - startAngle: (150 + -angle) * Math.PI / 180, - endAngle: (-30 + -angle) * Math.PI / 180 - }, - style: { - fill: 'transparent', - stroke: '#5BC4FF66', - lineWidth: 2.6 + type: 'category', + inverse: true, + axisTick: 'none', + axisLine: 'none', + show: true, + axisLabel: { + textStyle: { + color: '#A7D6F4', + fontSize: '14', }, - silent: true - } }, - data: [0] - }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - let x0 = api.getWidth() / 2; - let y0 = api.getHeight() / 2 - 59; - let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; - return { - type: 'circle', - shape: { - /** 角度175° 外弧2开始角度 */ - cx: x0 + r * Math.cos((590 + -angle) * Math.PI / 180), - cy: y0 + r * Math.sin((590 + -angle) * Math.PI / 180), - r: 4 - }, - style: { - fill: '#5BC4FF', - stroke: '#5BC4FF' - }, - silent: true - } - }, - data: [0] - }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - return { - type: 'arc', - shape: { - cx: api.getWidth() / 2, - cy: api.getHeight() / 2 - 59, - r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, - startAngle: (590 + -angle) * Math.PI / 180, - endAngle: (350 + -angle) * Math.PI / 180 - }, - style: { - fill: 'transparent', - stroke: '#5BC4FF66', - lineWidth: 2.6 - }, - silent: true - } - }, - data: [0] - }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - let x0 = api.getWidth() / 2; - let y0 = api.getHeight() / 2 - 59; - let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; - return { - type: 'circle', - shape: { - /** 角度175° 外弧2开始角度 */ - cx: x0 + r * Math.cos((90 + -angle) * Math.PI / 180), - cy: y0 + r * Math.sin((90 + -angle) * Math.PI / 180), - r: 4 - }, - style: { - fill: '#5BC4FF', - stroke: '#5BC4FF' - }, - silent: true - } - }, - data: [0] - }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - return { - type: 'arc', - shape: { - cx: api.getWidth() / 2, - cy: api.getHeight() / 2 - 59, - r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, - startAngle: (90 + -angle) * Math.PI / 180, - endAngle: (160 + -angle) * Math.PI / 180 - }, - style: { - fill: 'transparent', - stroke: '#5BC4FF66', - lineWidth: 2.6 - }, - silent: true - } - }, - data: [0] + // data: value, + data: [900, 380, 360, 340, 320], }, + ], + series: [ { - type: 'pie', - radius: ['45%', '39%'], - center: ['50%', '35%'], - z: 10, - label: { - show: false, - position: 'center', - formatter: (params) => { - return params.name + "\r\n" + params.value + name: '收费站限行（次）', + type: 'bar', + barGap: '120%', + barWidth: 10, // 柱子宽度 + showBackground: true, + MaxSize: 0, + backgroundStyle: { + color: '#0BA7DA32', }, - rich: { - total: { - fontSize: 16, - color: '#04F5FE', - }, - efficiency: { - fontSize: 12, - color: '#00FD6D', - }, + label: { + show: false, + // color: '#A7D6F4', + // fontSize: 14, + // distance: 20, // 距离 + // formatter: '{c} ', // 这里是数据展示的时候显示的数据 + // align: "center", + // position: [290, 0] + }, // 柱子上方的数值 + itemStyle: { + barBorderRadius: [0, 4, 4, 0], // 圆角（左上、右上、右下、左下） + color: new echarts.graphic.LinearGradient( + 1, + 0, + 0, + 0, + [ + { + offset: 0, + color: '#48d0ca', + }, + { + offset: 0.5, + color: '#61D8FF', + }, + { + offset: 1, + color: '#61D8FF00', + }, + ], + false + ), // 渐变 }, - color: '#FFFFFF', - fontSize: 12, - lineHeight: 16, - }, - data: data1, - labelLine: { - show: false, - }, - itemStyle: { - normal: { - borderWidth: 6, - shadowBlur: 10, - borderRadius: 50, // 圆角 - } - } - }, - { - type: 'pie', - radius: ['25%', '39%'], - center: ['50%', '35%'], - label: { - show: false, - }, - data: data2, - labelLine: { - show: false, - }, - itemStyle: { - normal: { - borderWidth: 6, - shadowBlur: 10, - borderRadius: 0, // 圆角 - } - } + data: [900, 380, 360, 340, 320], + }, + { + name: '收费站封闭（次）', + type: 'bar', + barWidth: 10, // 柱子宽度 + showBackground: true, + MaxSize: 0, + backgroundStyle: { + color: '#0BA7DA32', + }, + label: { + show: false, + // color: '#A7D6F4', + // fontSize: 14, + // distance: 20, // 距离 + // formatter: '{c} ', // 这里是数据展示的时候显示的数据 + // align: "center", + position: ['100%', 0] + }, // 柱子上方的数值 + itemStyle: { + barBorderRadius: [0, 4, 4, 0], // 圆角（左上、右上、右下、左下） + color: new echarts.graphic.LinearGradient( + 1, + 0, + 0, + 0, + [ + { + offset: 0, + color: '#FF6969', + }, + { + offset: 0.5, + color: '#FF696955', + }, + { + offset: 1, + color: '#FFB90410', + }, + ], + false + ), // 渐变 + }, + data: [900, 380, 360, 340, 320, 300, 280, 260, 400, 380, 360, 340, 320, 300, 280, 260], }, - ], + ], +}; - }; - export default options \ No newline at end of file +export default options; \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/index.vue index 023484e6..30486d27 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/index.vue @@ -58,7 +58,7 @@ } } .charts { - height:376px; + height:326px; width: 100%; } diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts.js index c4411f48..c51a29cd 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts.js @@ -1,180 +1,317 @@ +import * as echarts from "echarts"; -/* 数据 */ -let nameList = ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"]; // 类别 -let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903 ]; // 人数 -var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"] -/* 数据整合 */ -let dataList = []; -nameList.map((item, index) => { - if (index === 4) { - dataList.push({ - name: item, - value: valueList[index], - itemStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, color: '#FFB904' // 0% 处的颜色 - }, { - offset: 1, color: '#FF6969' // 100% 处的颜色 - }], - global: false // 缺省为 false - }, - borderRadius: 6 - }, - label: { show: false } - }) - } else { - dataList.push({ - name: item, - value: valueList[index], - itemStyle:{ - borderRadius: 6 - } - }) - } -}) - -var options = { - legend: { - // orient: 'vertical', - icon: "circle", - itemHeight: 8, - itemWidth: 8, - top: "5%", - x: "right", +let xData = [ + "大学城-长清", + "长清-孝里", + "孝里-平阴北", + "平阴北-平阴", + "平阴-平阴南", + "平阴南-东平", + "东平-梁山东", + "梁山东-梁山", + "梁山-嘉祥西", + "梁山东-梁山", + ]; + let data1 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120]; + let data2= [120, 340, 750, 600, 400, 700, 900, 200, 540, 320]; + let data3 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120]; + let options = { + tooltip: { + show:false, + trigger: "axis", + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: "shadow", // 默认为直线，可选为：'line' | 'shadow' + }, textStyle: { color: "#fff", + fontSize: 14, }, + backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色 + borderColor: "rgba(3, 31, 71, .0)", + formatter: "健康监测
{b1}：{c1}人", }, - grid: { - top: '20%',//上边距 - right: '0',//右边距 - left: '0',//左边距 - bottom: "10%",//下边距 + grid: { + left: "2%", + right: "4%", + top: "10%", + bottom: "5%", containLabel: true, - }, - xAxis: { - type: 'category', - data: nameList, + }, + xAxis: { + data: xData, + show: true, axisTick: { - show: false //隐藏X轴刻度 + show: false, + lineStyle: { + color: "#fff", + }, }, axisLine: { - lineStyle: { - color: "rgba(49, 217, 255, 0.8)" - } + lineStyle: { + color: "#1C82C5", + }, }, axisLabel: { - show: true, - color: '#B6E6FF', - fontSize:8, - fontFamily: 'Source Han Sans CN-Regular', + interval: 0, + align: "center", + rotate: "1", + margin: "20", + textStyle: { + fontSize: 12, + color: "#50A2C1", + }, }, - }, - yAxis: [{ - type: 'value', - name: "", - max: 1000, - min:0, - splitNumber:5, - nameTextStyle: { - color: '#B6E6FF', - fontSize: 13, - fontFamily: 'Source Han Sans CN-Regular', - align: "left", - verticalAlign: "center", - }, - axisLabel: { - fontSize: 13, - color: '#B6E6FF', - fontFamily: 'HarmonyOS Sans-Regular', - // formatter:function(value,index){ - // return yList[index] - // } - }, - axisLine: { - show: false, + }, + yAxis: [ + { + min: 0, + axisLine: { + lineStyle: { + color: "#1C82C5", + }, + }, + splitLine: { + show: true, + lineStyle: { + color: "rgba(28, 130, 197, .3)", + type: "solid", + }, + }, + axisLabel: { + color: "#DEEBFF", + textStyle: { + fontSize: 12, + }, + }, + axisTick: { + show: false, + }, }, - axisTick: { - show: false + ], + legend: { + // orient: 'vertical', + icon: "circle", + itemHeight: 6, + itemWidth: 6, + top: "5%", + right: "10%", + textStyle: { + color: "#fff", }, - splitLine: { - lineStyle: { - color: 'rgba(49, 217, 255, 0.5)', - } + + data:[ + { + name:"交通特征", + itemStyle:{ + color:'#51BFA4', + }, + }, + { + name:"饱和度", + itemStyle:{ + color:'#08BAF4', + }, + }, + { + name:"拥挤度", + itemStyle:{ + color:'#E2BA74', + }, + } + ], + }, + series: [ + { + name: "饱和度", + type: "bar", + barWidth: "10px", + selectedMode:false, + select:{ + itemStyle:{ + + opacity: 1, + color: function (params) { + var a = params; + + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#1AC5FD", // 0% 处的颜色 + }, + { + offset: 1, + color: "#003B4E", // 100% 处的颜色 + }, + ], + false + ); + }, + }, + }, + itemStyle: { + barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下） + // lenged文本 + opacity: 1, + color: function (params) { + var a = params.name; + console.log("==========a=============",a); + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#00A3FF", // 0% 处的颜色 + }, + { + offset: 1, + color: "#00A3FF00", // 100% 处的颜色 + }, + ], + false + ); + }, + }, + data: data2, }, - }], - series: [ + // 下半截柱状图linear-gradient(180deg, #61D8FF 0%, #003B4E 100%); linear-gradient(180deg, #06D7B1 0%, #003B4E 100%) { - name: '感知事件', - type: 'line', - symbol: 'circle', - symbolSize: 0, - smooth: true, - areaStyle: { - width: 4, - opacity: 0.25, - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0.389, color: "#32BB8A99" }, - { offset: 1, color: "#32BB8A00" }, - ], - global: false, + name: "交通特征", + type: "bar", + barWidth: "10px", + barGap: "120%", + selectedMode:false, + select:{ + itemStyle:{ + opacity: 1, + color: function (params) { + var a = params; + + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#00E4BB53", // 0% 处的颜色 + }, + { + offset: 1, + color: "#00E4BB53", // 100% 处的颜色 + }, + ], + false + ); }, - }, - // yAxisIndex: 1, // 与第二个 y 轴关联 - itemStyle: { - color: '#32BB8A', - }, - lineStyle: { - width:2, - }, - - data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据 - }, - { - name: '交通事件', - type: 'line', - symbol: 'circle', - symbolSize: 0, - - // yAxisIndex: 1, // 与第二个 y 轴关联 - itemStyle: { - color: '#E2BA74', - }, - lineStyle: { - width: 2, - }, - smooth: true, - areaStyle: { - width: 4, - opacity: 0.25, - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0.389, color: "##E2BA7490" }, - { offset: 1, color: "##E2BA7400" }, - ], - global: false, + }, + }, + itemStyle: { + // lenged文本 + barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下） + opacity: 1, + color: function (params) { + var a = params.name; + console.log("==========a=============",a); + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#01D2EE", // 0% 处的颜色 + }, + { + offset: 1, + color: "#01D2EE00", // 100% 处的颜色 + }, + ], + false + ); + }, + }, + data: data1, + }, + // 进度条的小圆圈 +{ + name: "拥挤度", + type: "bar", + barWidth: "10px", + selectedMode:false, + select:{ + itemStyle:{ + opacity: 1, + color: function (params) { + var a = params; + + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#1AC5FD", // 0% 处的颜色 + }, + { + offset: 1, + color: "#003B4E", // 100% 处的颜色 }, - }, - data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据 - }, - ] -} + ], + false + ); + }, + }, + }, + itemStyle: { + barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下） + // lenged文本 + opacity:1, + color: function (params) { + var a = params.name; + console.log("==========a=============",a); + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#32BB8A", // 0% 处的颜色 + }, + { + offset: 1, + color: "#32BB8A00", // 100% 处的颜色 + }, + ], + false + ); + }, + }, + data: data2, +}, + { + name: '路段里程数', + stack: '我不叠加',//添加stack属性，相同的stack值的数据类型将会叠加不并列，值为自定义值 + type: 'line',//换为line 实现折线与柱状图 + data: data3, + color:"#E2BA74" + } + ], + }; + -export default options; + export default options; \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts2.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts2.js new file mode 100644 index 00000000..d1a86dfd --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts2.js @@ -0,0 +1,157 @@ +let zData = ["侧翻", "撞障碍物", "自燃", "追尾", "撞护栏", "货物洒落"]; +let lc = [450, 500, 250, 340,450, 500]; +let lc2 = [400, 550, 200, 140,400, 550]; +let options = { + + tooltip: { + show: true, + trigger: "axis", + backgroundColor: "rgba(17,95,182,0.5)", //设置背景颜色 + textStyle: { + color: "#fff", + }, + formatter: "{b}：{c}人", + }, + grid: { + right: "4%", + top: "12%", + left: "2%", + bottom: "0%", + containLabel: true, + }, + xAxis: { + type: "category", + boundaryGap: true, + data: zData, + axisLabel: { + interval: 0, + textStyle: { + color: "rgba(255, 255, 255, 0.80)", + fontSize: 16 + }, + }, + axisTick: { + //坐标轴刻度相关设置。 + show: false, + }, + axisLine: { + //坐标轴轴线相关设置 + lineStyle: { + color: "#fff", + }, + }, + splitLine: { + //坐标轴在 grid 区域中的分隔线。 + show: false, + }, + }, + yAxis: [ + { + type: "value", + splitNumber: 6, + axisLabel: { + show: true, + textStyle: { + color: "rgba(255, 255, 255, 0.90)", + fontSize: 16 + }, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + color: "rgba(255, 255, 255, 0.40)", + }, + }, + }, + ], + series: [ + { + name: "从业人员", + type: "pictorialBar", + stack: "数量", + label: { + normal: { + show: false, + position: "top", + textStyle: { + color: "#FFFFFF", + fontSize: 16, + }, + }, + }, + itemStyle: { + normal: { + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: "#0085FF", // 0% 处的颜色 + }, + { + offset: 1, + color: "#0085FF00", // 100% 处的颜色 + }, + ], + globalCoord: false, // 缺省为 false + } + }, + }, + symbol: "path://M48 0 L49 17 C52 72 68 125 96 173 H0 C25 125 41 73 46 19 L48 0Z", + data: lc, + }, + { + name: "去年同期数量", + type: "pictorialBar", + stack: "else", + barGap: "10%", + boundaryGap:"100%", + label: { + normal: { + show: false, + position: "top", + textStyle: { + color: "#FFFFFF", + fontSize: 16, + }, + }, + }, + itemStyle: { + normal: { + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: "#01D2EE", // 0% 处的颜色 + }, + { + offset: 1, + color: "rgba(0, 194, 255,0)", // 100% 处的颜色 + }, + ], + globalCoord: false, // 缺省为 false + } + }, + }, + symbol: "path://M48 0 L49 17 C52 72 68 125 96 173 H0 C25 125 41 73 46 19 L48 0Z", + data: lc2, + }, + ], +}; + +export default options; \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts3.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts3.js new file mode 100644 index 00000000..a0a13223 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts3.js @@ -0,0 +1,144 @@ +const sxnja = [ + 400,400,400 + ]; + const sxnja2 = [ + 700,700,700 + ]; + + const minNumber = 90; + const minArray = []; + sxnja.map((value) => { + minArray.push(parseFloat((value - minNumber).toFixed(2))) + }) + console.log(minArray) + let xaxisData = [ + '客车', + '货车', + '专项车', + ]; + + var options = { + title: { + text: '单位/%', + top: '4%', + left: '3%', + textStyle: { + fontSize: '10px', + fontWeight: 300, + color: '#B5C5D4', + opacity: 0.8 + } + }, + tooltip: { + valueFormatter: function (value) { + return (value + minNumber).toFixed(2) + ' %'; + } + }, + legend: { + // orient: 'vertical', + icon: "circle", + itemHeight: 6, + itemWidth: 6, + top: "5%", + right: "0%", + textStyle: { + fontSize:10, + color: "#fff", + }, + }, + grid: { + left: '1%', + right: '0%', + top: '16%', + bottom: '0%', + containLabel: true + }, + xAxis: { + type: 'category', + data: xaxisData, + axisLine: { + show: true, + lineStyle: { + width: 1, + color: '#545454' + } + }, + axisTick: { + show: false + }, + axisLabel: { + color: '#B5C5D4', + fontSize: '10px', + interval: 0 + } + }, + yAxis: [ + { + // type: 'value', + // min: function (value) { + // return value.min*0.9; + // }, + type: 'value', + min: 0, + max:900, + splitNumber: 9, + // max: yAxisMax, + axisLine: { + show: false, + lineStyle: { + width: 1, + color: '#545454' + } + }, + splitLine: { + show: true, + lineStyle: { + color: '#B2C2D3', + opacity: 0.3, + type: 'dotted' + } + }, + axisTick: { + show: false + }, + axisLabel: { + color: '#B5C5D4', + fontSize: '12px', + formatter: (value) => { + return value + minNumber + } + } + } + ], + series: [ + { + name: '事件数量（起）', + data: minArray, + type: 'pictorialBar', + symbol: 'roundRect', + symbolRepeat: true, + symbolSize: [12, 5], + // symbolOffset: symbolOffset, + // barWidth:'40%', + itemStyle: { + color: '#20E7FF' + } + }, + { + barGap: "10%", + name: '平均处置时长（分钟）', + data: sxnja2 , + type: 'pictorialBar', + symbol: 'roundRect', + symbolRepeat: true, + symbolSize: [12, 5], + // symbolOffset: symbolOffset, + // barWidth:'40%', + itemStyle: { + color: '#20FFC9' + } + } + ] + }; + + export default options; \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue index be895be9..5d21afca 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue @@ -1,7 +1,8 @@ @@ -26,6 +35,9 @@ import WgtTitle from "../../../../../perception/widgets/title"; import * as echarts from "echarts"; import chartsStatistics from "./assets/charts"; + import charts2 from "./assets/charts2"; + import charts3 from "./assets/charts3"; + export default { name: 'postTrendsMonth', components: { @@ -46,8 +58,14 @@ mounted() { setTimeout(() => { this.$nextTick(() => { - var myChart = echarts.init(document.getElementById('postTrendsMonth')); + var myChart = echarts.init(document.getElementById('chart1')); myChart.setOption(chartsStatistics); + + var myChart1 = echarts.init(document.getElementById('chart2')); + myChart1.setOption(charts2); + + var myChart2 = echarts.init(document.getElementById('chart3')); + myChart2.setOption(charts3); }); }); }, @@ -57,9 +75,32 @@ + \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue index 66bac610..9505dea3 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue @@ -148,7 +148,7 @@ width="'100%'" :page-size="pageSize" :current-page.sync="pageIndex" - layout="prev, pager, next" + layout="total, sizes, prev, pager, next" :total="pageTotal"> @@ -545,6 +545,10 @@ import * as echarts from "echarts"; this.pageSize = pageSize; this.pageTotal = res.total; this.tableData = res.rows; + + this.tableData.forEach((it,index)=>{ + it.nem = (pageIndex - 1 ) * ( pageSize ) + index + 1; + }) } }) } diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js index 2cc9297a..93e94c8d 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js @@ -68,7 +68,7 @@ let data = [{ tooltip: { confine: true, textStyle: { - fontSize: 10 // 字体大小 + fontSize: 14 // 字体大小 }, }, title:{ //圆环中间内容 @@ -108,11 +108,13 @@ let data = [{ color: "#fff", rich:{ a:{ + width:45, fontSize: 12, }, b:{ fontSize:14, color:"#37E7FF", + marginLeft:-0, } }, }, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue index ce90f099..f51c5963 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue @@ -160,7 +160,7 @@ } ], quarter:"", - year:"2024", + year:"year", list:[ {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}, {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}, 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 5ee28cec..c9091b95 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 @@ -59,8 +59,11 @@ var options = { tooltip: { confine: true, textStyle: { - fontSize: 10 // 字体大小 + fontSize: 10, // 字体大小 + color:'#fff', }, + color:'#fff', + backgroundColor:"#064258", }, title:{ //圆环中间内容 text: '99% ', diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherForecast/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherForecast/index.vue index cff12622..acb1a211 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherForecast/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherForecast/index.vue @@ -190,13 +190,13 @@ justify-content: center; align-items: center; margin-top:23px; - width: 47px; - height: 16px; + width: 67px; + height: 18px; background: rgba(245,80,80,0.4); border-radius: 2px 2px 2px 2px; opacity: 1; border: 1px solid #F55050; - font-size: 10px; + font-size: 12px; font-family: Source Han Sans SC, Source Han Sans SC; font-weight: 400; color: #F55050; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/index.vue index 63381fa9..14193db6 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/index.vue @@ -2,7 +2,7 @@
- +