更改样式

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/assets/charts.js

@@ -1,5 +1,5 @@
 import * as echarts from "echarts";
-import Group from "./Group.png";
+import icon from "./icon.svg";
 var options = {
   tooltip: {
     showContent: false,
@@ -41,7 +41,14 @@ var options = {
     right: "20%",
     top: "10%",
     bottom: "10%",
-    // width: 250,
+    // width: "100px",
+    // overflow: "hidden",
+    containLabel: true,
+    // // scrollX: true,
+    // scrollY: true,
+    // // xAxisIndex: [0],
+    // start: 50, // 起始位置（百分比）
+    // end: 90,
   },
   xAxis: [
     {
@@ -66,11 +73,22 @@ var options = {
         show: false,
       },
       inverse: true,
-      data: ["测试"],
+      data: [
+        "测试",
+        "测试1",
+        "测试2",
+        "测试3",
+        "测试4",
+        "测试5",
+        "测试6",
+        "测试7",
+        "测试8",
+        "测试9",
+      ],
       axisLabel: {
         color: "#fff",
         fontSize: 14,
-        margin: 20,
+        margin: 10,
         formatter: function (value) {
           return value + "  {flag|}";
         },
@@ -79,13 +97,15 @@ var options = {
             width: 20,
             height: 20,
             fontSize: 14,
+            padding: 10,
+            marginRight: 10,
           },
           flag: {
-            width: 20,
+            width: 11,
-            height: 40,
+            height: 30,
-            align: "center",
+            align: "right",
             backgroundColor: {
-              image: Group,
+              image: icon,
             },
           },
         },
@@ -151,7 +171,7 @@ var options = {
           false
         ), // 渐变
       },
-      data: [],
+      data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
     },
     {
       name: "收费站封闭（次）",
@@ -195,7 +215,7 @@ var options = {
           false
         ), // 渐变
       },
-      data: [],
+      data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
     },
   ],
 };

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/assets/icon.svg

@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 13.91 27"><defs><style>.cls-1{fill:url(#未命名的渐变_20);}</style><linearGradient id="未命名的渐变_20" y1="13.5" x2="13.91" y2="13.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#61d8ff"/><stop offset="1" stop-color="#0ba7da" stop-opacity="0"/></linearGradient></defs><path class="cls-1" d="M5.87,27h6.65a1.39,1.39,0,0,0,1.39-1.39V1.39A1.39,1.39,0,0,0,12.52,0H5.87a1.38,1.38,0,0,0-1.3.91L.09,13a1.32,1.32,0,0,0,0,1L4.57,26.09A1.38,1.38,0,0,0,5.87,27Z"/></svg>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/index.vue

@@ -6,9 +6,42 @@
       </ButtonGradient>
     </WgtTitle>
 
-    <div class="board">
+    <div class="box">
-      <div class="charts keep-ratio " id="auditAnalytics"></div>
+      <div class="title-top">
+        <div class="close">收费站封闭（次）</div>
+        <div class="traffic">收费站限行（次）</div>
+
+      </div>
+      <div class="content">
+        <div class="content-item" v-for="item in tollBoothsData" :key="item.facilityName">
+          <div class="content-item-left">
+            <span class="name">{{ item.facilityName }}</span>
+            <img class="icon" src="./assets/icon.svg" />
+          </div>
+          <div class="content-item-right" :style="{
+            '--width': item.trafficRestriction + '%'
+          }">
+            <div class="box-item">
+              <span class="num">{{ item.trafficClose }}次</span>
+            </div>
+            <div class="box-item" :style="{
+              '--width': item.trafficRestriction + '%'
+            }">
+              <span class="num">{{ item.trafficRestriction }}次</span>
             </div>
+
+            <!-- <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress> -->
+            <!-- <el-progress :width="600"></el-progress>
+            <el-progress :percentage="50"></el-progress> -->
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+    <!-- <div class="board">
+      <div class="charts keep-ratio " id="auditAnalytics"></div>
+    </div> -->
     <StatsDialogVisible :visible="statsDialogVisible" @update:value="handleClose" />
   </div>
 </template>
@@ -20,7 +53,7 @@ import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
 import { tollStationAnalysis } from "@/api/event/governanceAnalysis"
 import StatsDialogVisible from "./StatsDialogVisible/index.vue"
-import Group from "./assets/Group.png";
+import icon from "./assets/icon.svg";
 
 export default {
   name: 'RailWayDay',
@@ -32,6 +65,7 @@ export default {
   data() {
     return {
       statsDialogVisible: false,
+      tollBoothsData: []
     }
   },
 
@@ -40,44 +74,45 @@ export default {
   },
   methods: {
     handleStats() {
-      console.log("统计")
       this.statsDialogVisible = true
-      console.log(this.statsDialogVisible)
     },
     handleClose() {
       this.statsDialogVisible = false
     },
     getTollStationAnalysis() {
       return tollStationAnalysis().then((response) => {
-        let facilityName = []
+        this.tollBoothsData = response.data
-        let trafficRestriction = []
+        console.log("response", response)
-        let trafficClose = []
+        // let facilityName = []
-        response.data.forEach(item => {
+        // let trafficRestriction = []
-          facilityName.push(item.facilityName)
+        // let trafficClose = []
-          trafficRestriction.push(item.trafficRestriction)
+        // response.data.forEach(item => {
-          trafficClose.push(item.trafficClose)
+        //   facilityName.push(item.facilityName)
-        });
+        //   trafficRestriction.push(item.trafficRestriction)
+        //   trafficClose.push(item.trafficClose)
+        // });
 
-        for (let i = 0; i < facilityName.length; i++) {
+        // for (let i = 0; i < facilityName.length; i++) {
-          chartsStatistics.yAxis[0].axisLabel.rich[facilityName[i]] = {
+        //   chartsStatistics.yAxis[0].axisLabel.rich[facilityName[i]] = {
-            height: 40,
+        //     marginLeft: 10,
-            align: 'center',
+        //     height: 20,
-            backgroundColor: {
+        //     align: 'center',
-              image: Group
+        //     backgroundColor: {
-            }
+        //       image: icon
-          }
+        //     },
-        }
+        //   }
-        chartsStatistics.yAxis[0].data = facilityName;
+        // }
-        chartsStatistics.series[0].data = trafficClose;
+        // chartsStatistics.yAxis[0].data = facilityName;
-        chartsStatistics.series[1].data = trafficRestriction;
+        // chartsStatistics.series[0].data = trafficClose;
+        // chartsStatistics.series[1].data = trafficRestriction;
 
       })
     }
   },
   async mounted() {
     await this.getTollStationAnalysis()
-    const myChart = echarts.init(document.getElementById('auditAnalytics'));
+    // const myChart = echarts.init(document.getElementById('auditAnalytics'));
-    myChart.setOption(chartsStatistics);
+    // myChart.setOption(chartsStatistics);
 
   },
 }
@@ -86,6 +121,7 @@ export default {
 <style lang='scss' scoped>
 .congestion {
   width: 100%;
+  overflow: hidden;
 
   .board {
     height: 346px;
@@ -114,4 +150,132 @@ export default {
   height: 326px;
   width: 100%;
 }
+
+.box {
+  height: 346px;
+  width: 100%;
+  padding: 0px 20px;
+  overflow-y: auto;
+  background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
+  border-radius: 5px 5px 5px 5px;
+  opacity: 1;
+  border: 1px solid;
+  border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+  // display: flex;
+  // justify-content: space-between;
+  // align-items: center;
+
+  .title-top {
+    margin-top: 10px;
+    width: 100%;
+    font-size: 12px;
+    color: #fff;
+    display: flex;
+    flex-direction: row-reverse;
+
+    .traffic {
+      width: 130px;
+    }
+
+    .traffic:before {
+      content: '';
+      display: block;
+      position: relative;
+      top: 13px;
+      left: -15px;
+      width: 8px;
+      height: 8px;
+      background: #5FD7FE;
+      border-radius: 50%;
+      opacity: 1;
+    }
+
+    .close:before {
+      content: '';
+      display: block;
+      position: relative;
+      top: 13px;
+      left: -15px;
+      width: 8px;
+      height: 8px;
+      background: #FC6A67;
+      border-radius: 50%;
+      opacity: 1;
+    }
+  }
+
+  .content {
+    .content-item {
+      margin-top: 30px;
+      display: flex;
+
+      .content-item-left {
+        display: flex;
+
+        .name {
+          width: 130px;
+          text-align: right;
+          color: #fff;
+          font-size: 14px;
+          margin-right: 10px;
+          display: block;
+        }
+
+        .icon {
+          width: 12px;
+          height: 27px;
+          margin-right: 5px;
+        }
+
+      }
+
+      .content-item-right {}
+
+    }
+
+    .box-item {
+      position: relative;
+      height: 8px;
+      width: 289px;
+      background: linear-gradient(180deg, rgba(11, 167, 218, 0.1) 0%, rgba(79, 211, 255, 0.1) 100%);
+      border-radius: 2px 2px 2px 2px;
+    }
+
+    .box-item:nth-child(1) {
+      margin-bottom: 10px;
+    }
+
+    .box-item:nth-child(1)::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      height: 8px;
+      width: var(--width);
+      background: linear-gradient(90deg, rgba(97, 216, 255, 0) 0%, #60D7FF 100%);
+      border-radius: 2px 2px 2px 2px;
+      opacity: 1;
+    }
+
+    .box-item:nth-child(2)::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      height: 8px;
+      width: var(--width);
+      background: linear-gradient(90deg, rgba(255, 185, 4, 0) 0%, rgba(255, 105, 105, 1) 100%);
+      border-radius: 2px 2px 2px 2px;
+      opacity: 1;
+    }
+
+    .num {
+      width: 50px;
+      position: absolute;
+      left: 100%;
+      top: -5px;
+      margin-left: 10px;
+      font-size: 12px;
+      color: #fff;
+    }
+  }
+}
 </style>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue

@@ -119,8 +119,6 @@ export default {
           numData.push(item.num)
           mileageData.push(item.mileage)
         });
-
-
         chartsStatistics.series[0].data = avgNumData
         chartsStatistics.series[1].data = lastNumData
         chartsStatistics.series[2].data = numData