diff --git a/ruoyi-ui/src/api/manualWarning/index.js b/ruoyi-ui/src/api/manualWarning/index.js index 59e8dc4c..89864030 100644 --- a/ruoyi-ui/src/api/manualWarning/index.js +++ b/ruoyi-ui/src/api/manualWarning/index.js @@ -1,9 +1,13 @@ import request from "@/utils/request"; // 查询非机预警列表 -export function perceivedEventsList(data) { +export function perceivedEventsList(data, pageNum, pageSize) { return request({ - url: "/perceivedEvents/warning/perceivedEventsList", + url: + "/perceivedEvents/warning/nonAutomaticWarningList?pageNum=" + + pageNum + + "&pageSize=" + + pageSize, method: "post", data, }); diff --git a/ruoyi-ui/src/common/menuData.js b/ruoyi-ui/src/common/menuData.js index 9827e639..f58ac82d 100644 --- a/ruoyi-ui/src/common/menuData.js +++ b/ruoyi-ui/src/common/menuData.js @@ -156,6 +156,11 @@ export default [ component: "maintenanceOperations/statisticalAnalysis/index.vue", } ] + }, { + title: "边坡光伏", + name: "photovoltaic", + path: "/maintain/photovoltaic", + component: "developing.vue" } ] }, @@ -239,7 +244,7 @@ export default [ ], }, { - title: "配置中心", + title: "安全生产", name: "config", position: "right", path: "/config", diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/ManualWarningCard/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/ManualWarningCard/index.vue index 6932bc15..1fa4b120 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/components/ManualWarningCard/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/components/ManualWarningCard/index.vue @@ -89,7 +89,7 @@ export default { type: Array, default: () => [ { - key: "warningType", + key: "warningTypeName", label: "类型", }, // { diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/digital/digitalTollStation.jpg b/ruoyi-ui/src/views/JiHeExpressway/images/digital/digitalTollStation.jpg index 3c5b99e5..da1a71bb 100644 Binary files a/ruoyi-ui/src/views/JiHeExpressway/images/digital/digitalTollStation.jpg and b/ruoyi-ui/src/views/JiHeExpressway/images/digital/digitalTollStation.jpg differ diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/FatigueWakesUp/components/DeviceControlDialog.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/FatigueWakesUp/components/DeviceControlDialog.vue index a562d58c..d72620c8 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/FatigueWakesUp/components/DeviceControlDialog.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/FatigueWakesUp/components/DeviceControlDialog.vue @@ -238,7 +238,7 @@ export default { modelVisible: { get() { if (this.visible) { - this.deviceId = 'K82+285'; + // this.deviceId = 'K82+285'; this.initData(); } return this.visible @@ -360,7 +360,7 @@ export default { } - } + }, }, } diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue index e01a85cb..b170bd8c 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue @@ -13,7 +13,7 @@
设备筛选
-
+
@@ -58,6 +58,8 @@ export default { type: "day", warningTime: "", }, + trafficIncidents: null, + trafficIncidentsPie: null, searchFormList: [ { label: "事件类型:", @@ -130,27 +132,54 @@ export default { }; }, async mounted() { - (this.formData.warningTime = - moment(new Date()).format("YYYY-MM-DD") + " 00:00:01"), - await this.getNonAutomaticWarningType(this.formData); - var trafficIncidents = echarts.init( - document.getElementById("trafficIncidents") - ); - trafficIncidents.setOption(trafficIncidentsCharts); - var trafficIncidentsPie = echarts.init( - document.getElementById("trafficIncidentsPie") - ); - trafficIncidentsPie.setOption(trafficIncidentsChartsPie); + setTimeout(() => { + this.$nextTick(async () => { + (this.formData.warningTime = + moment(new Date()).format("YYYY-MM-DD") + " 00:00:01"), + (this.trafficIncidents = echarts.init(this.$refs.trafficIncidents)); + this.trafficIncidents.setOption(trafficIncidentsCharts); + this.trafficIncidentsPie = echarts.init(this.$refs.trafficIncidentsPie); + this.trafficIncidentsPie.setOption(trafficIncidentsChartsPie); + + const domMap = this.$refs.trafficIncidentsPie; + let parentDiv = domMap.firstElementChild; + // // 创建canvas; + let canvas = document.createElement("canvas"); + canvas.width = parentDiv.offsetWidth; + canvas.height = parentDiv.offsetHeight; + parentDiv.appendChild(canvas); + const context = canvas.getContext("2d"); + + // // 填充渐变颜色 + let gr = context.createLinearGradient(280, 0, 580, 0); + gr.addColorStop(1, "rgba(92,197,255,0)"); + gr.addColorStop(0, "rgba(92,197,255,0.5)"); + context.lineWidth = 1; // 设置线段宽度 + drawRoundRect(context, 430, 134, 280, 24, 12, gr); + drawRoundRect(context, 430, 168, 280, 24, 10, gr); + drawRoundRect(context, 430, 202, 280, 24, 10, gr); + drawRoundRect(context, 430, 236, 280, 24, 10, gr); + drawRoundRect(context, 430, 270, 280, 24, 10, gr); + drawRoundRect(context, 430, 304, 280, 24, 10, gr); + drawRoundRect(context, 430, 338, 280, 24, 10, gr); + drawRoundRect(context, 430, 372, 280, 24, 10, gr); + drawRoundRect(context, 430, 406, 280, 24, 10, gr); + drawRoundRect(context, 430, 440, 280, 24, 10, gr); + drawRoundRect(context, 430, 474, 280, 24, 10, gr); + await this.getNonAutomaticWarningType(this.formData); + // drawRoundRect(context, 430, 508, 280, 24, 10, gr); + }); + }); }, methods: { getNonAutomaticWarningType(data) { + let that = this; return nonAutomaticWarningType(data).then((res) => { let newData = res.data; let seriesData = []; let xData = []; let pieData = []; let total = null; - console.log("++++++++++++", newData); newData.forEach((item) => { seriesData.push(item.number); xData.push(item.subclass); @@ -162,7 +191,7 @@ export default { }); trafficIncidentsCharts.series[0].data = seriesData; trafficIncidentsCharts.xAxis.data = xData; - + trafficIncidentsChartsPie.legend.data = xData; trafficIncidentsChartsPie.legend.formatter = function (name) { let tarValue = 0; for (let i = 0; i < newData.length; i++) { @@ -173,34 +202,10 @@ export default { var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); return `{text|${name}} {number|${tarValue} 起 } {number|${percert}%}`; }; - trafficIncidentsChartsPie.legend.data = xData; trafficIncidentsChartsPie.title[0].text = total; - trafficIncidentsChartsPie.series[2].data = seriesData; - - // const domMap = document.getElementById("trafficIncidentsPie"); - // let parentDiv = domMap.firstChild; - // console.log("parentDiv", parentDiv); - // // 创建canvas; - // let canvas = document.createElement("canvas"); - // canvas.width = parentDiv.offsetWidth; - // canvas.height = parentDiv.offsetHeight; - // parentDiv.appendChild(canvas); - // const context = canvas.getContext("2d"); - - // // 填充渐变颜色 - // let gr = context.createLinearGradient(240, 0, 450, 0); - // gr.addColorStop(1, "rgba(92,197,255,0)"); - // gr.addColorStop(0, "rgba(92,197,255,0.5)"); - // context.lineWidth = 1; // 设置线段宽度 - // drawRoundRect(context, 100, 8, 280, 50, 12, gr); - // drawRoundRect(context, 202, 32, 280, 20, 10, gr); - // drawRoundRect(context, 202, 56, 280, 20, 10, gr); - // drawRoundRect(context, 202, 80, 280, 20, 10, gr); - // drawRoundRect(context, 202, 104, 280, 20, 10, gr); - // drawRoundRect(context, 202, 128, 280, 20, 10, gr); - // drawRoundRect(context, 202, 152, 280, 20, 10, gr); - - // this.myChart = myChart; + trafficIncidentsChartsPie.series[2].data = pieData; + that.trafficIncidents.setOption(trafficIncidentsCharts); + that.trafficIncidentsPie.setOption(trafficIncidentsChartsPie); }); }, handleSearch(value) { @@ -221,6 +226,7 @@ export default { .search-box { width: 402px !important; float: right; + overflow: hidden; } .Eventfiltering-content { @@ -230,12 +236,12 @@ export default { justify-content: space-between; .Eventfiltering-left { - width: 65%; + width: 63%; height: 100%; } .Eventfiltering-right { - width: 32%; + width: 34%; height: 100%; } } diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsCharts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsCharts.js index 215c85d8..f8c4fe7f 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsCharts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsCharts.js @@ -16,7 +16,7 @@ var options = { }, }, grid: { - left: "30px", + left: "50px", right: "0%", top: "50px", bottom: "5%", diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsChartsPie.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsChartsPie.js index 6e352490..1cf10bef 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsChartsPie.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsChartsPie.js @@ -18,9 +18,9 @@ var options = { title: [ { text: "999", - top: "25%", + top: "36%", textAlign: "center", - left: "48%", + left: "29%", textStyle: { color: "#ffffff", fontSize: 30, @@ -29,9 +29,9 @@ var options = { }, { text: "总数", - top: "38%", + top: "32%", textAlign: "center", - left: "48%", + left: "29%", textStyle: { color: "rgba(242, 252, 253, 0.84)", fontSize: 16, @@ -53,20 +53,22 @@ var options = { }, }, legend: { + show: true, width: "300px", - height: "120px", + height: "520px", orient: "vertical", icon: "circle", - top: "60%", + top: "15%", + left: "70%", itemWidth: 10, itemHeight: 10, textStyle: { color: "#ffffff", fontSize: 14, - lineHeight: 22, + lineHeight: 24, rich: { text: { - width: 100, + width: 50, marginLeft: 32, fontSize: 14, }, @@ -82,20 +84,20 @@ var options = { }, }, data: legendData, - pageIconColor: "#fff", - pageIconSize: 10, - pageTextStyle: { - color: "#fff", - }, - type: "scroll", - pageButtonPosition: "end", + // pageIconColor: "#fff", + // pageIconSize: 10, + // pageTextStyle: { + // color: "#fff", + // }, + // type: "scroll", + // pageButtonPosition: "end", }, series: [ /** 饼图上刻度 */ { type: "gauge", - center: ["50%", "35%"], - radius: "46%", // 错位调整此处 + center: ["30%", "35%"], + radius: "43%", // 错位调整此处 startAngle: 0, endAngle: 360, splitNumber: 52, @@ -116,7 +118,7 @@ var options = { tooltip: false, type: "gauge", radius: "30%", - center: ["50%", "35%"], + center: ["30%", "35%"], startAngle: 0, endAngle: 360, axisLine: { @@ -183,7 +185,7 @@ var options = { { type: "pie", radius: ["40%", "50%"], - center: ["50%", "35%"], + center: ["30%", "35%"], z: 10, label: { show: false, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/index.vue index 0a48f804..cd1b7a93 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/index.vue @@ -1,46 +1,270 @@ diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/trafficIncidentsCharts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/trafficIncidentsCharts.js new file mode 100644 index 00000000..f8c4fe7f --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/trafficIncidentsCharts.js @@ -0,0 +1,95 @@ +var options = { + title: { + // text: '单位/%', + top: "0%", + left: "0%", + textStyle: { + fontSize: "10px", + fontWeight: 300, + color: "#B5C5D4", + opacity: 0.8, + }, + }, + tooltip: { + valueFormatter: function (value) { + return value + " 起"; + }, + }, + grid: { + left: "50px", + right: "0%", + top: "50px", + bottom: "5%", + containLabel: true, + }, + xAxis: { + type: "category", + data: [], + axisLine: { + lineStyle: { + color: "rgba(49, 217, 255, 0.8)", + }, + }, + axisTick: { + show: false, + }, + axisLabel: { + color: "#fff", + fontSize: "18px", + }, + }, + yAxis: [ + { + // type: 'value', + // min: function (value) { + // return value.min*0.9; + // }, + name: "交通事件（起）", + nameTextStyle: { + color: "#fff", + fontSize: 18, + align: "center", + }, + type: "value", + axisLine: { + show: false, + lineStyle: { + width: 1, + color: "#545454", + }, + }, + splitLine: { + lineStyle: { + color: "rgba(49, 217, 255, 0.5)", + }, + }, + axisTick: { + show: false, + }, + axisLabel: { + color: "#fff", + fontSize: "18px", + formatter: (value) => { + return value; + }, + }, + }, + ], + series: [ + { + // name: '审限内结案率', + data: [5, 10, 20, 30], + type: "pictorialBar", + symbol: "roundRect", + symbolRepeat: true, + symbolSize: [13, 4], + // symbolOffset: symbolOffset, + // barWidth:'40%', + itemStyle: { + color: "#20E7FF", + }, + }, + ], +}; + +export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/trafficIncidentsChartsPie.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/trafficIncidentsChartsPie.js new file mode 100644 index 00000000..43a2118d --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/trafficIncidentsChartsPie.js @@ -0,0 +1,232 @@ +let colors = [ + "#4278F8", + "#5372C4", + "#0046FF", + "#FB9434", + "#854101", + "#05E599", + "#219F73", + "#7CEDD5", + "#854101", + "#05E599", + "#219F73", + "#7CEDD5", +]; +var legendData = []; + +var options = { + title: [ + { + text: "999", + top: "36%", + textAlign: "center", + left: "29%", + textStyle: { + color: "#ffffff", + fontSize: 30, + fontFamily: "SourceHanSansCN", + }, + }, + { + text: "总数", + top: "32%", + textAlign: "center", + left: "29%", + textStyle: { + color: "rgba(242, 252, 253, 0.84)", + fontSize: 16, + fontFamily: "SourceHanSansCN", + }, + }, + ], + grid: { + top: "38%", + left: "6%", + right: "6%", + bottom: "3%", + containLabel: true, + }, + tooltip: { + show: true, + valueFormatter: function (value) { + return value + " 起"; + }, + }, + legend: { + show: true, + width: "300px", + height: "520px", + orient: "vertical", + icon: "circle", + top: "15%", + left: "70%", + itemWidth: 10, + itemHeight: 10, + textStyle: { + color: "#ffffff", + fontSize: 14, + lineHeight: 24, + rich: { + text: { + width: 100, + marginLeft: 32, + fontSize: 14, + }, + number: { + fontSize: 14, + color: "#37E7FF", + marginLeft: 32, + fontWeight: "bold", + }, + unit: { + fontSize: 14, + }, + }, + }, + data: legendData, + // pageIconColor: "#fff", + // pageIconSize: 10, + // pageTextStyle: { + // color: "#fff", + // }, + // type: "scroll", + // pageButtonPosition: "end", + }, + series: [ + /** 饼图上刻度 */ + { + type: "gauge", + center: ["30%", "35%"], + radius: "43%", // 错位调整此处 + 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 }, + }, + { + name: "总数", + tooltip: false, + type: "gauge", + radius: "30%", + center: ["30%", "35%"], + startAngle: 0, + endAngle: 360, + axisLine: { + lineStyle: { + color: [[1, "#0AFFE950"]], + width: 1, + }, + }, + axisTick: { + show: false, + }, + splitLine: { + show: false, + }, + axisLabel: { + show: false, + }, + detail: { + show: false, + }, + pointer: { + show: false, + }, + progress: { + show: true, + width: 80, + itemStyle: { + color: { + type: "radial", + x: 0.5, + y: 0.5, + r: 0.5, + colorStops: [ + { + offset: 0, + color: "rgb(0, 224, 205, 0)", + }, + { + offset: 0.7, + color: "rgba(0, 224, 205, 0)", + }, + { + offset: 1, + color: "rgba(10, 255, 233, 0.5)", + }, + ], + }, + }, + }, + data: [ + { + value: 100, + }, + ], + tooltip: { + backgroundColor: "rgba(50,50,50,0)", + formatter: " ", + borderWidth: 0, + textStyle: { + textShadowColor: "rgba(50,50,50,0)", + }, + }, + }, + { + type: "pie", + radius: ["40%", "50%"], + center: ["30%", "35%"], + z: 10, + label: { + show: false, + }, + data: [], + labelLine: { + show: false, + }, + itemStyle: { + normal: { + borderRadius: "5", + borderWidth: 2, + borderType: "solid", + borderCap: "round", + borderJoin: "round", + borderColor: "#064258", + borderMiterLimit: "20", + color: function (params) { + return { + type: "linear", + x: 0, + y: 0, + x2: 1, + y2: 1, + colorStops: [ + { + offset: 0, + color: colors[params.dataIndex], // 0% 处的颜色 + }, + { + offset: 1, + color: colors[params.dataIndex], // 100% 处的颜色 + }, + ], + globalCoord: false, // 缺省为 false + }; + }, + }, + }, + }, + ], +}; + +export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Timefiltering/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Timefiltering/index.vue index 0a48f804..9c44505e 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Timefiltering/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Timefiltering/index.vue @@ -1,46 +1,203 @@ diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Timefiltering/trafficIncidentsCharts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Timefiltering/trafficIncidentsCharts.js new file mode 100644 index 00000000..f8c4fe7f --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Timefiltering/trafficIncidentsCharts.js @@ -0,0 +1,95 @@ +var options = { + title: { + // text: '单位/%', + top: "0%", + left: "0%", + textStyle: { + fontSize: "10px", + fontWeight: 300, + color: "#B5C5D4", + opacity: 0.8, + }, + }, + tooltip: { + valueFormatter: function (value) { + return value + " 起"; + }, + }, + grid: { + left: "50px", + right: "0%", + top: "50px", + bottom: "5%", + containLabel: true, + }, + xAxis: { + type: "category", + data: [], + axisLine: { + lineStyle: { + color: "rgba(49, 217, 255, 0.8)", + }, + }, + axisTick: { + show: false, + }, + axisLabel: { + color: "#fff", + fontSize: "18px", + }, + }, + yAxis: [ + { + // type: 'value', + // min: function (value) { + // return value.min*0.9; + // }, + name: "交通事件（起）", + nameTextStyle: { + color: "#fff", + fontSize: 18, + align: "center", + }, + type: "value", + axisLine: { + show: false, + lineStyle: { + width: 1, + color: "#545454", + }, + }, + splitLine: { + lineStyle: { + color: "rgba(49, 217, 255, 0.5)", + }, + }, + axisTick: { + show: false, + }, + axisLabel: { + color: "#fff", + fontSize: "18px", + formatter: (value) => { + return value; + }, + }, + }, + ], + series: [ + { + // name: '审限内结案率', + data: [5, 10, 20, 30], + type: "pictorialBar", + symbol: "roundRect", + symbolRepeat: true, + symbolSize: [13, 4], + // symbolOffset: symbolOffset, + // barWidth:'40%', + itemStyle: { + color: "#20E7FF", + }, + }, + ], +}; + +export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/index.vue index 6ac52b5e..371b7c72 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/index.vue @@ -1,14 +1,14 @@