From 0679b9386fd587a3942f99d340d76d70e2906eff Mon Sep 17 00:00:00 2001 From: zhoule Date: Tue, 20 Feb 2024 10:30:59 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E5=9B=BE=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/dailyDisposal/assets/charts.js | 12 ++++++--- .../components/dailyDisposal/index.vue | 8 +++--- .../components/eventQuery/assets/charts2.js | 26 ++++++++++++------- .../components/eventQuery/index.vue | 5 ++-- .../components/eventSource/assets/charts.js | 10 ++++++- .../components/eventSource/index.vue | 12 ++++----- .../components/typeAnalysis/assets/charts.js | 23 ++++++++++------ 7 files changed, 63 insertions(+), 33 deletions(-) diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js index d3f76436..46e7091f 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js @@ -28,7 +28,7 @@ var options = { ast: { align: "left", fontSize: 12, - width: 35, + width: 50, }, bst: { align: "left", @@ -36,6 +36,12 @@ var options = { marginLeft: 10, color: "#37E7FF", }, + cst: { + align: "left", + fontSize: 12, + marginLeft: 10, + color: "#37E7FF", + }, }, }, formatter: (params) => { @@ -47,9 +53,9 @@ var options = { let obj = echartsData.filter((it) => { return it.name == params; }); - return `{ast|${obj[0].name}} {bst|${Math.round( + return `{ast|${obj[0].name}} {bst|${Math.round( (obj[0].value / count) * 100 - )}%}`; + )}%} {cst|${obj[0].value}件}`; }, data: echartsData?.map((x) => x), }, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue index d3e46290..bef82428 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue @@ -141,10 +141,10 @@ export default { context.lineWidth = 1; // 设置线段宽度 // 绘制圆角矩形 - drawRoundRect(context, 270, 36, 120, 24, 12, gr) - drawRoundRect(context, 270, 63, 120, 24, 12, gr) - drawRoundRect(context, 270, 90, 120, 24, 12, gr) - drawRoundRect(context, 270, 117, 120, 24, 12, gr) + drawRoundRect(context, 242, 36, 180, 24, 12, gr) + drawRoundRect(context, 242, 63, 180, 24, 12, gr) + drawRoundRect(context, 242, 90, 180, 24, 12, gr) + drawRoundRect(context, 242, 117, 180, 24, 12, gr) }); }); }, 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 9637be33..2547cc56 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 @@ -115,9 +115,9 @@ var options = { width: 70, color: "#fff", fontSize: 26, - align: 'center' - } - } + align: "center", + }, + }, }, subtextStyle: { fontSize: 18, @@ -130,26 +130,34 @@ var options = { }, color: colorList, legend: { - top: "15%", - right: -5, + top: 10, + right: 0, orient: "vertical", //改变排列方式 icon: "circle", //改变legend小图标形状 itemGap: 20, // 设置legend的间距 itemWidth: 10, // 设置宽度 itemHeight: 10, // 设置高度 textStyle: { - right: -19, - fontSize: 30, + right: 50, + fontSize: 12, color: "#fff", rich: { a: { + align: "left", width: 45, fontSize: 12, }, b: { - fontSize: 14, + align: "left", + fontSize: 12, + color: "#37E7FF", + marginLeft: 0, + }, + c: { + align: "left", + fontSize: 12, color: "#37E7FF", - marginLeft: -0, + 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 6e1b0a1b..0f313649 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 @@ -297,9 +297,10 @@ export default { } var arr = [ '{a|' + name + '}', - '{b|' + ((target / total) * 100).toFixed(2) + '%}', + '{b|' + ((target / total) * 100).toFixed(2) + '%} ', + "{c|" + target + "件}", ] - return arr.join(' ') + return arr.join(' ') }; chart2.title.text = `{zb|${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 1ab98b94..94541e3e 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 @@ -134,7 +134,8 @@ var options = { } var arr = [ "{ast|" + name + "}", - "{bst|" + (target * 100).toFixed(0) + "%}", + "{bst|" + (target * 100).toFixed(0) + "% }", + "{cst|" + target+ "件}", ]; return arr.join(" "); }, @@ -153,6 +154,13 @@ var options = { marginLeft: 20, color: "#37E7FF", }, + cst: { + align: "left", + fontSize: 12, + marginLeft: 30, + width: 60, + color: "#37E7FF", + }, }, }, }, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue index 76be9cca..92eb61d0 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue @@ -175,12 +175,12 @@ export default { let gr = context.createLinearGradient(230, 0, 360, 0); gr.addColorStop(1, 'rgba(92,197,255,0)'); gr.addColorStop(0, 'rgba(92,197,255,0.3)'); - drawRoundRect(context, 248, 15, 134, 21, 12, gr); - drawRoundRect(context, 248, 42, 134, 21, 12, gr); - drawRoundRect(context, 248, 69, 134, 21, 12, gr); - drawRoundRect(context, 248, 96, 134, 21, 12, gr); - drawRoundRect(context, 248, 123, 134, 21, 12, gr); - drawRoundRect(context, 248, 150, 134, 21, 12, gr); + drawRoundRect(context, 214, 15, 134, 21, 12, gr); + drawRoundRect(context, 214, 42, 134, 21, 12, gr); + drawRoundRect(context, 214, 69, 134, 21, 12, gr); + drawRoundRect(context, 214, 96, 134, 21, 12, gr); + drawRoundRect(context, 214, 123, 134, 21, 12, gr); + drawRoundRect(context, 214, 150, 134, 21, 12, gr); context.lineWidth = 1; // 设置线段宽度 diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js index bc311a9f..4c9725b9 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js @@ -24,7 +24,7 @@ var options = { orient: "vertical", top: "10", icon: "circle", - right: 40, + right: 0, itemGap: 16, itemWidth: 8, itemHeight: 8, @@ -33,14 +33,21 @@ var options = { fontSize: 12, rich: { ast: { - align: "left", + marginLeft: 0, fontSize: 12, - width: 30, + width: 40, }, bst: { align: "left", fontSize: 12, - marginLeft: 20, + color: "#37E7FF", + width: 30, + }, + cst: { + align: "right", + fontSize: 12, + width: 40, + // marginLeft: 20, color: "#37E7FF", }, }, @@ -54,9 +61,9 @@ var options = { return it.name == params; }); // console.log(obj); - return `{ast|${obj[0].name}} {bst|${ + return `{ast|${obj[0].name}} {bst|${ Math.round((obj[0].value / count) * 100) || 0 - }%}`; + }%} {cst|${obj[0].value}件}`; }, // data: typeAnalysisData?.map(x => x.name), }, @@ -70,7 +77,7 @@ var options = { radius: "70%", center: ["30%", "50%"], clockwise: false, - roseType: "radius", + // roseType: "area", startAngle1: 180, label: { show: false, @@ -114,7 +121,7 @@ var options = { emphasis: { scale: false }, clockwise: false, center: ["30%", "50%"], - roseType: "radius", + // roseType: "area", label: { show: false, position: "outside", From c3572ed890da6cbb8066fef191101de4b945f429 Mon Sep 17 00:00:00 2001 From: zhangzhang <1747194829@qq.com> Date: Tue, 20 Feb 2024 11:14:45 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E6=94=B6=E8=B4=B9?= =?UTF-8?q?=E7=AB=99=E5=88=86=E6=9E=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../StatsDialogVisible/index.vue | 816 +++++++++++------- .../components/auditAnalytics/index.vue | 137 +-- .../channelAnalytics/assets/charts.js | 1 + .../eventTypeAnalysis/assets/charts.js | 1 + 4 files changed, 576 insertions(+), 379 deletions(-) diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/StatsDialogVisible/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/StatsDialogVisible/index.vue index 001d3809..33a33126 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/StatsDialogVisible/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/StatsDialogVisible/index.vue @@ -1,393 +1,551 @@ \ 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 bfd838ec..8949a01d 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 @@ -1,5 +1,5 @@ @@ -51,42 +62,50 @@ import WgtTitle from "@screen/pages/perception/widgets/title"; import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue"; import * as echarts from "echarts"; import chartsStatistics from "./assets/charts"; -import { tollStationAnalysis } from "@/api/event/governanceAnalysis" -import StatsDialogVisible from "./StatsDialogVisible/index.vue" +import { tollStationAnalysis } from "@/api/event/governanceAnalysis"; +import StatsDialogVisible from "./StatsDialogVisible/index.vue"; import icon from "./assets/icon.svg"; export default { - name: 'RailWayDay', + name: "RailWayDay", components: { WgtTitle, ButtonGradient, - StatsDialogVisible + StatsDialogVisible, }, data() { return { statsDialogVisible: false, tollBoothsData: [], maxRestrictionNum: null, - maxCloseNum: null - } + maxCloseNum: null, + }; }, - created() { - - }, + created() {}, methods: { handleStats() { - this.statsDialogVisible = true + this.statsDialogVisible = true; }, handleClose() { - this.statsDialogVisible = false + this.statsDialogVisible = false; }, getTollStationAnalysis() { return tollStationAnalysis().then((response) => { - this.tollBoothsData = response.data - this.maxRestrictionNum = Math.max.apply(Math, this.tollBoothsData.map(item => { return item.trafficRestriction })) - this.maxCloseNum = Math.max.apply(Math, this.tollBoothsData.map(item => { return item.trafficRestriction })) - console.log("response", this.maxRestrictionNum, this.maxCloseNum) + this.tollBoothsData = response.data; + this.maxRestrictionNum = Math.max.apply( + Math, + this.tollBoothsData.map((item) => { + return item.trafficRestriction; + }) + ); + this.maxCloseNum = Math.max.apply( + Math, + this.tollBoothsData.map((item) => { + return item.trafficRestriction; + }) + ); + console.log("response", this.maxRestrictionNum, this.maxCloseNum); // let facilityName = [] // let trafficRestriction = [] // let trafficClose = [] @@ -109,20 +128,18 @@ export default { // chartsStatistics.yAxis[0].data = facilityName; // chartsStatistics.series[0].data = trafficClose; // chartsStatistics.series[1].data = trafficRestriction; - - }) - } + }); + }, }, async mounted() { - await this.getTollStationAnalysis() + await this.getTollStationAnalysis(); // const myChart = echarts.init(document.getElementById('auditAnalytics')); // myChart.setOption(chartsStatistics); - }, -} +}; -