From b5f002c87d497e04beda2cc063d5dad711e95fa3 Mon Sep 17 00:00:00 2001 From: zhangzhang <1747194829@qq.com> Date: Fri, 29 Mar 2024 15:36:54 +0800 Subject: [PATCH] =?UTF-8?q?=E6=84=9F=E7=9F=A5=E4=BA=8B=E4=BB=B6=E5=9B=BE?= =?UTF-8?q?=E8=A1=A8=E5=8A=A8=E6=80=81=E7=BF=BB=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/typeAnalysis/assets/charts.js | 14 +- .../components/typeAnalysis/index.vue | 229 +++++++++++++++++- .../components/flowstate/index.vue | 2 +- 3 files changed, 229 insertions(+), 16 deletions(-) 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 a2bb57fc..db4e8596 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 @@ -14,13 +14,18 @@ window.colorList = [ "#FFDD69", "#F6A73C", "#7390FD", + "#2967EA", + "#1DA7FF", + "#219f73", + "#7cedd5", ]; -window.colorList1 = ["#61D8FF", "#FFB905", "#6AE0BC"]; +// window.colorList1 = ["#61D8FF", "#FFB905", "#6AE0BC"]; var options = { color: colorList, legend: { + show: false, width: "500px", height: "160px", orient: "vertical", @@ -87,8 +92,10 @@ var options = { { name: "", type: "pie", + // radius: "70%", + // center: ["30%", "50%"], radius: "70%", - center: ["30%", "50%"], + center: ["40%", "50%"], clockwise: false, // roseType: "area", startAngle1: 180, @@ -133,7 +140,8 @@ var options = { hoverAnimation: false, emphasis: { scale: false }, clockwise: false, - center: ["30%", "50%"], + // center: ["30%", "50%"], + center: ["40%", "50%"], // roseType: "area", label: { show: false, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue index fe56e6c1..c1a4801a 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue @@ -3,6 +3,21 @@
+
+ + +
+ {{ items.name }} + {{ items.value }} 起 + {{ items.percert }}% +
+ + +
@@ -47,9 +62,9 @@ export default { WgtTitle, }, data() { - return {}; + return { dataList: [] }; }, - created() { }, + created() {}, methods: {}, mounted() { setTimeout(() => { @@ -57,10 +72,8 @@ export default { var myChart = echarts.init(document.getElementById("typeAnalysis")); getWarningTypeDay().then((res) => { - console.log(res); if (res.code == 200) { let data = res.data; - console.log("===================22", data); typeAnalysisData = [ { name: "交通拥堵", @@ -123,15 +136,31 @@ export default { value: 0, }, ]; + let total = null; + data.forEach((item, index) => { + total += item.number; + }); data.forEach((item, index) => { typeAnalysisData.forEach((r) => { if (item.warningType == r.warningType) { - r.value += item.number; + r.value = item.number; + this.dataList.push({ + name: r.name, + value: r.value, + percert: + total == 0 ? 0 : ((r.value / total) * 100).toFixed(2), + }); } }); // drawRoundRect(context, 250, 8 + index * 28, 120, 24, 12, gr); }); + const list = this.dataList.reduce((acc, curr, index) => { + if (index % 6 === 0) acc.push([]); + acc[Math.floor(index / 6)].push(curr); + return acc; + }, []); + this.dataList = list; chartsStatistics.legend.data = typeAnalysisData?.map((x) => x.name); chartsStatistics.series[0].data = typeAnalysisData.map( (item, index) => { @@ -191,23 +220,199 @@ export default { .congestion { .board { padding: 0px 20px; - background: linear-gradient(180deg, - rgba(6, 66, 88, 0.2) 0%, - #06425888 100%); + background: linear-gradient( + 180deg, + rgba(6, 66, 88, 0.2) 0%, + #06425888 100% + ); border-radius: 5px 5px 5px 5px; opacity: 1; border: 1px solid; - border-image: linear-gradient(360deg, + border-image: linear-gradient( + 360deg, rgba(55, 231, 255, 0.1), - rgba(55, 231, 255, 0)) 1 1; + rgba(55, 231, 255, 0) + ) + 1 1; display: flex; justify-content: center; align-items: center; + .legend-box { + width: 60%; + margin: auto; + margin-top: 20px; + height: 185px; + overflow: hidden; + + .legend-item { + width: 100%; + /** + 单个动画循环样式 勿删 + */ + // height: 30px; + // display: flex; + // justify-content: space-between; + // align-items: center; + // animation: 5s infinite roll; + // position: relative; + + // &::before { + // // position: absolute; + // content: ""; + // width: 8px; + // height: 8px; + // left: 0px; + // border-radius: 50%; + // background: #37e7ff; + // } + .legend-items { + width: 100%; + height: 24px; + display: flex; + justify-content: space-between; + align-items: center; + padding-left: 20px; + background: linear-gradient(to right, #327799 0%, #0d3443 60%); + border-top-left-radius: 25px; + border-bottom-left-radius: 25px; + margin-bottom: 5px; + &::before { + // position: absolute; + content: ""; + width: 8px; + height: 8px; + left: 0px; + border-radius: 50%; + background: #37e7ff; + } + } + .legend-name { + width: 60px; + margin-left: 10px; + font-size: 14px; + } + .legend-num, + .legend-percert { + width: 50px; + display: flex; + justify-content: center; + align-items: center; + font-size: 14px; + color: #37e7ff; + font-weight: bold; + } + } + .legend-item:nth-child(1) { + .legend-items:nth-child(1) { + &::before { + background: #019aff; + } + } + .legend-items:nth-child(2) { + &::before { + background: #3cc3f0; + } + } + .legend-items:nth-child(3) { + &::before { + background: #51d5ad; + } + } + .legend-items:nth-child(4) { + &::before { + background: #ffdd69; + } + } + .legend-items:nth-child(5) { + &::before { + background: #f6a73c; + } + } + .legend-items:nth-child(6) { + &::before { + background: #7390fd; + } + } + } + .legend-item:nth-child(2) { + .legend-items:nth-child(1) { + &::before { + background: #2967ea; + } + } + .legend-items:nth-child(2) { + &::before { + background: #1da7ff; + } + } + .legend-items:nth-child(3) { + &::before { + background: #219f73; + } + } + .legend-items:nth-child(4) { + &::before { + background: #7cedd5; + } + } + } + /** + 单个动画循环样式 勿删 + */ + // .legend-item:nth-child(1) { + // &::before { + // background: #68f4dd; + // } + // } + // .legend-item:nth-child(2) { + // &::before { + // background: #1785c0; + // } + // } + // .legend-item:nth-child(3) { + // &::before { + // background: #476dbc; + // } + // } + // .legend-item:nth-child(4) { + // &::before { + // background: #b55233; + // } + // } + // .legend-item:nth-child(5) { + // &::before { + // background: #b0862c; + // } + // } + // .legend-item:nth-child(6) { + // &::before { + // background: #35ad6b; + // } + // } + // .legend-item:nth-child(7) { + // &::before { + // background: #219f73; + // } + // } + // .legend-item:nth-child(8) { + // &::before { + // background: #7cedd5; + // } + // } + + // .legend-item:nth-child(9) { + // &::before { + // background: #68f4dd; + // } + // } + } } } - +::v-deep .el-carousel__indicators--vertical { + display: none; +} .charts { height: 180px; - width: 100%; + width: 50%; } diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/index.vue index ebec4e95..eae17a4d 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/index.vue @@ -67,7 +67,7 @@ export default { .tag1 { position: absolute; margin-top: -174px; - margin-left: 80px; + margin-left: 120px; font-size: 12px; }