更改路网-交通分析bug

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js

@@ -34,9 +34,9 @@ let options = {
     formatter: "健康监测<br>{b1}：{c1}人",
   },
   grid: {
-    left: "2%",
-    right: "4%",
-    top: "5%",
+    left: 0,
+    right: 0,
+    top: "13%",
     bottom: "5%",
     containLabel: true,
   },

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/index.vue

@@ -99,7 +99,6 @@
 </script>
   
 <style lang='scss' scoped>
-
 .showClass {
   color: #00EBC1;
 }
@@ -136,6 +135,7 @@
   background-color: #13272F;
   border: 0px !important;
 }
+
 ::v-deep .el-table tr:nth-child(even) td {
   border: 0px !important;
 }
@@ -152,19 +152,18 @@
   width: 100%;
   height: 310px;
   flex-direction: column;
+  --keep-ratio: scaleX(1);
 
   .board {
-      height: 280px;
+    height: 300px;
     width: 100%;
-      padding: 0px 0px;
+    padding: 0px 20px;
     border-radius: 5px 5px 5px 5px;
     opacity: 1;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-direction: row;
-      margin-top:20px;
-
     background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #064258 93%);
 
     #ChangesIndictors {
@@ -174,10 +173,10 @@
     }
   }
 }
+
 .charts {
   height: 180px;
   width: 100%;
 }
-  
 </style>
   

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/congestionIndicator/index.vue

@@ -100,7 +100,6 @@
 </script>
   
 <style lang='scss' scoped>
-
 .showClass {
   color: #00EBC1;
 }
@@ -137,6 +136,7 @@
   background-color: #13272F;
   border: 0px !important;
 }
+
 ::v-deep .el-table tr:nth-child(even) td {
   border: 0px !important;
 }
@@ -151,11 +151,11 @@
 .congestion {
   display: inline-flex;
   width: 100%;
-    height: 310px;
+  // height: 310px;
   flex-direction: column;
 
   .board {
-      height: 280px;
+    height: 275px;
     width: 100%;
     padding: 0px 0px;
     border-radius: 5px 5px 5px 5px;
@@ -173,7 +173,7 @@
       width: 100%;
       height: 100%;
       overflow: auto;
-        padding:20px 10px;
+      padding: 5px 10px;
 
       >div:first-child {
         .barTitle {
@@ -268,10 +268,10 @@
     }
   }
 }
+
 .charts {
   height: 180px;
   width: 100%;
 }
-  
 </style>
   

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js

@@ -1,8 +1,22 @@
-
 /* 数据 */
-let nameList = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; // 类别
-let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903  ]; // 人数
-var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"]
+let nameList = [
+  "1月",
+  "2月",
+  "3月",
+  "4月",
+  "5月",
+  "6月",
+  "7月",
+  "8月",
+  "9月",
+  "10月",
+  "11月",
+  "12月",
+]; // 类别
+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) => {
@@ -12,32 +26,37 @@ nameList.map((item, index) => {
       value: valueList[index],
       itemStyle: {
         color: {
-               type: 'linear',
+          type: "linear",
           x: 0,
           y: 0,
           x2: 0,
           y2: 1,
-               colorStops: [{
-                  offset: 0, color: '#FFB904' // 0% 处的颜色
-               }, {
-                  offset: 1, color: '#FF6969' // 100% 处的颜色
-               }],
-               global: false // 缺省为 false
+          colorStops: [
+            {
+              offset: 0,
+              color: "#FFB904", // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: "#FF6969", // 100% 处的颜色
             },
-            borderRadius: 6
+          ],
+          global: false, // 缺省为 false
         },
-         label: { show: false }
-      })
+        borderRadius: 6,
+      },
+      label: { show: false },
+    });
   } else {
     dataList.push({
       name: item,
       value: valueList[index],
       itemStyle: {
-            borderRadius: 6
-         }
-      })
+        borderRadius: 6,
+      },
+    });
   }
-})
+});
 
 var options = {
   legend: {
@@ -52,47 +71,48 @@ var options = {
     },
   },
   grid: {
-      top: '25%',//上边距
-      right: '0',//右边距
-      left: '0',//左边距
+    top: "25%", //上边距
+    right: "0", //右边距
+    left: "0", //左边距
     bottom: "0%", //下边距
     containLabel: true,
   },
   xAxis: {
-      type: 'category',
+    type: "category",
     data: nameList,
     axisTick: {
-         show: false //隐藏X轴刻度
+      show: false, //隐藏X轴刻度
     },
     axisLine: {
       lineStyle: {
-            color: "rgba(49, 217, 255, 0.8)"
-         }
+        color: "rgba(49, 217, 255, 0.8)",
+      },
     },
     axisLabel: {
       show: true,
-         color: '#B6E6FF',
+      color: "#B6E6FF",
       fontSize: 8,
-         fontFamily: 'Source Han Sans CN-Regular',
+      fontFamily: "Source Han Sans CN-Regular",
     },
   },
-   yAxis: [{
-      type: 'value',
+  yAxis: [
+    {
+      type: "value",
       name: "",
       max: 1200,
       min: 0,
       splitNumber: 5,
       nameTextStyle: {
-         color: '#B6E6FF',
+        color: "#B6E6FF",
         fontSize: 13,
-         fontFamily: 'Source Han Sans CN-Regular',
+        fontFamily: "Source Han Sans CN-Regular",
         align: "left",
         verticalAlign: "center",
       },
       axisLabel: {
         fontSize: 13,
-         color: '#B6E6FF',
-         fontFamily: 'HarmonyOS Sans-Regular',
+        color: "#B6E6FF",
+        fontFamily: "HarmonyOS Sans-Regular",
         // formatter:function(value,index){
         //    return yList[index]
         // }
@@ -101,60 +121,67 @@ var options = {
         show: false,
       },
       axisTick: {
-         show: false
+        show: false,
       },
       splitLine: {
         lineStyle: {
-            color: 'rgba(49, 217, 255, 0.5)',
-         }
+          color: "rgba(49, 217, 255, 0.5)",
         },
-   }],
+      },
+    },
+  ],
   series: [
     {
-         name: '交通特征',
-         type: 'line',
-         symbol: 'circle',
+      name: "交通特征",
+      type: "line",
+      symbol: "circle",
       symbolSize: 0,
 
       // yAxisIndex: 1, // 与第二个 y 轴关联
       itemStyle: {
-           color: '#32BB8A',
+        color: "#32BB8A",
       },
       lineStyle: {
         width: 2,
       },
-         data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据
+      data: [
+        1000, 800, 520, 600, 900, 700, 700, 1000, 800, 520, 600, 900, 700, 700,
+      ], // 折线图的数据
     },
     {
-         name: '饱和度',
-         type: 'line',
-         symbol: 'circle',
+      name: "饱和度",
+      type: "line",
+      symbol: "circle",
       symbolSize: 0,
 
       // yAxisIndex: 1, // 与第二个 y 轴关联
       itemStyle: {
-           color: '#07A3FB',
+        color: "#07A3FB",
       },
       lineStyle: {
         width: 2,
       },
-         data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据
+      data: [
+        600, 700, 900, 400, 500, 800, 600, 600, 700, 900, 400, 500, 800, 600,
+      ], // 折线图的数据
     },
     {
-         name: '拥挤度',
-         type: 'line',
-         symbol: 'circle',
+      name: "拥挤度",
+      type: "line",
+      symbol: "circle",
       symbolSize: 0,
       // yAxisIndex: 1, // 与第二个 y 轴关联
       itemStyle: {
-           color: '#E2BA74',
+        color: "#E2BA74",
       },
       lineStyle: {
         width: 2,
       },
-         data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据
+      data: [
+        850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480, 480, 780,
+      ], // 折线图的数据
     },
-   ]
-}
+  ],
+};
 
 export default options;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts2.js

@@ -11,44 +11,52 @@ function contains(arr, val) {
 }
 let list = [
   {
-      name: '交通特征',
+    name: "交通特征",
     max: 88,
   },
   {
-      name: '拥挤度',
+    name: "拥挤度",
     max: 88,
   },
   {
-      name: '饱和度',
+    name: "饱和度",
     max: 188,
   },
 ];
 let data1 = [[80, 50, 55, 80, 50, 80, 48, 43]];
 let data2 = [[60, 60, 65, 60, 70, 40, 80, 63]];
 let options = {
- 
   tooltip: {
     show: true,
-      trigger: 'item',
+    trigger: "item",
     formatter: (data) => {
       // console.log(data.seriesIndex);
-          var tip = '<h5 class="echarts-tip-h5">' + data.seriesName + '</h5>';
+      var tip = '<span class="echarts-tip-h5">' + data.seriesName + "</span>";
       let tmpData = [];
       if (data.seriesIndex === 0) {
         tmpData = data1;
       } else if (data.seriesIndex === 1) {
         tmpData = data2;
       }
-          console.log(tmpData)
+      console.log(tmpData);
       data.value.forEach((item, index) => {
         // console.log(list[index].name)
-              tip += '<div>';
-              tip += '<div>' + list[index].name + ': '+ tmpData[0][index] + '万</div>'
-              tip += '</div>';
+        tip += "<div>";
+        tip +=
+          "<div>" + list[index].name + ": " + tmpData[0][index] + "万</div>";
+        tip += "</div>";
       });
       return tip;
     },
   },
+  grid: {
+    top: "5%", //上边距
+    right: "0", //右边距
+    left: "0", //左边距
+    bottom: "0%", //下边距
+    padding: "50px",
+    containLabel: true,
+  },
   // legend: {
   //     show: true,
   //     icon: 'circle',
@@ -64,18 +72,18 @@ let options = {
   radar: {
     name: {
       textStyle: {
-              color: '#fff',
+        color: "#fff",
         fontSize: 16,
       },
       rich: {
         a: {
-                  fontSize: 16,
-                  color: '#FFFFFF',
+          fontSize: 12,
+          color: "#FFFFFF",
           padding: [0, 0, 8, 0],
         },
         b: {
           fontSize: 18,
-                  color: '#ACD3FF',
+          color: "#ACD3FF",
         },
       },
       formatter: (a) => {
@@ -83,14 +91,20 @@ let options = {
         return `{a| ${a}}`;
       },
     },
-      center: ['50%', '50%'],
-      radius: '60%',
+    center: ["50%", "50%"],
+    radius: "60%",
     startAngle: 90,
     splitNumber: 5,
-      shape: 'circle',
+    shape: "circle",
     splitArea: {
       areaStyle: {
-              color: [ '#07A3FB99','#07A3FB8010', '#07A3FB30','#07A3FB60','#07A3FB80'],
+        color: [
+          "#07A3FB99",
+          "#07A3FB8010",
+          "#07A3FB30",
+          "#07A3FB60",
+          "#07A3FB80",
+        ],
       },
     },
     axisLabel: {
@@ -102,16 +116,16 @@ let options = {
     splitLine: {
       show: true,
       lineStyle: {
-              color: 'rgba(50, 72, 130, 0.4)',
+        color: "rgba(50, 72, 130, 0.4)",
       },
     },
     indicator: list,
   },
   series: [
     {
-          name: '数据1',
-          type: 'radar',
-          symbol: 'circle',
+      name: "数据1",
+      type: "radar",
+      symbol: "circle",
       symbolSize: 3,
       areaStyle: {
         normal: {
@@ -123,11 +137,11 @@ let options = {
             [
               {
                 offset: 0,
-                              color: '#DC6A00',
+                color: "#DC6A00",
               },
               {
                 offset: 1,
-                              color: '#099CCD',
+                color: "#099CCD",
               },
             ],
             false
@@ -135,8 +149,8 @@ let options = {
         },
       },
       itemStyle: {
-              color: 'rgba(245, 166, 35, 0.2)',
-              borderColor: 'rgba(235, 171, 86, 00)',
+        color: "rgba(245, 166, 35, 0.2)",
+        borderColor: "rgba(235, 171, 86, 00)",
         borderWidth: 10,
       },
       data: data1,
@@ -144,6 +158,4 @@ let options = {
   ],
 };
 
-
-
 export default options;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue

@@ -35,7 +35,7 @@
         </div> -->
       <ProgressBar :dataList="dataList" class="keep-ratio progressbar" :selectIndex="7" />
       <div class="body">
-        <div style="width:70%">
+        <div class="body-l">
           <div class="searchPanel_1">
             <!-- <el-from ref="form"> -->
             <RadioGroup :options="[{ key: '1', label: '菏泽' }, { key: '3', label: '济南' }]" v-model="direction"
@@ -310,7 +310,7 @@ export default {
   
 <style lang='scss' scoped>
 .progressbar {
-  margin: 10px;
+  margin: 15px;
 
 }
 
@@ -332,9 +332,10 @@ export default {
       flex-direction: column;
       height: 100%;
       width: 33%;
-      margin-right: 20px;
+      // margin-right: 20px;
       border: 1px solid;
-      border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.1), rgba(55, 231, 255, 0)) 1 1;
+      border: none;
+      // border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.1), rgba(55, 231, 255, 0)) 1 1;
       background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #064258 100%);
       padding: 10px;
     }
@@ -394,7 +395,13 @@ export default {
     justify-content: space-between;
     align-items: center;
     flex-direction: column;
+    --keep-ratio: scaleX(1);
 
+    .body-l {
+      width: 70%;
+      padding: 0 20px;
+      margin-right: 20px;
+    }
 
     .searchPanel_1 {
       position: absolute;
@@ -406,6 +413,7 @@ export default {
       margin-bottom: 10px;
       z-index: 1000;
 
+
       div {
         white-space: nowrap;
         margin-right: 4px;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/progressBar.vue

@@ -1,7 +1,8 @@
 <template>
     <div class='congestion'>
         <div :style="{ width: dataList.length * 300 }">
-        <div :class="selectIndex == index?selectLine < 1?'item action Abefore':'item action Aafter':selectIndex + selectLine == index?selectLine < 1?'item action Aafter':'item action Abefore':'item'" v-for="(item,index) in dataList"   :key="index"  >
+            <div :class="selectIndex == index ? selectLine < 1 ? 'item action Abefore' : 'item action Aafter' : selectIndex + selectLine == index ? selectLine < 1 ? 'item action Aafter' : 'item action Abefore' : 'item'"
+                v-for="(item, index) in dataList" :key="index">
                 <i class="after" @click="selectItem(index, -1)"></i>
                 <i class="before" @click="selectItem(index, +1)"></i>
                 <span></span>
@@ -173,6 +174,7 @@ import { number } from 'echarts';
                 justify-content: center;
                 top: 5px;
                 margin-top: 10px;
+                font-size: 14px;
                 color: #C7C7C7;
             }
 

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/index.vue

@@ -51,7 +51,6 @@
 </script>
   
 <style lang='scss' scoped>
-
 ::v-deep .el-tabs__item {
   display: inline-flex;
   justify-content: center;
@@ -73,10 +72,14 @@
   opacity: 0.1;
 }
 
+.el-tabs__content {
+  height: 100%;
+}
+
 .footTabs {
   display: inline;
   width: 99%;
-
+  height: 100%;
 }
 
 
@@ -87,6 +90,7 @@
   pointer-events: none;
   margin-top: 19px;
   margin-left: 19px;
+
   >div {
     pointer-events: auto;
   }
@@ -144,17 +148,20 @@
         margin-bottom: 20px;
       }
     }
+
     .content-r {
       width: 30%;
     }
   }
+
   .foot {
     width: 100%;
     margin: auto;
     display: flex;
     flex: 1;
     pointer-events: none;
-      margin-top: 8px;
+    margin-top: 19px;
+
     >div {
       pointer-events: auto;
     }
@@ -165,11 +172,14 @@
     }
 
     .foot-l {
-        width: 67%;
+      width: 70%;
+      height: 330px;
     }
+
     .foot-m {
       width: 613px;
     }
+
     .foot-r {
       margin-left: 20px;
       width: 33%;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorQuery/index.vue

@@ -11,34 +11,17 @@
     <div class="board">
 
       <div class="weaterMain">
-            <el-table
-                :border="false"
-                :data="tableData"
-                height="790"
-                style="width: 100%">
-                <el-table-column
-                prop="nem"
-                label=""
-                width="30">
+        <el-table :border="false" :data="tableData" style="width: 100%">
+          <el-table-column prop="nem" label="" width="30">
           </el-table-column>
-                <el-table-column
-                prop="address"
-                label="桩号范围"
-               >
+          <el-table-column prop="address" label="桩号范围">
           </el-table-column>
-                <el-table-column
-                prop="name"
-                label="能见度"
-                class-name="showClass"
-                >
+          <el-table-column prop="name" label="能见度" class-name="showClass">
             <template slot-scope="scope">
               <span class="showClass">{{ scope.row.name }}</span>
             </template>
           </el-table-column>
-                <el-table-column
-                prop="date"
-                label="发生时间"
-                >
+          <el-table-column prop="date" label="发生时间">
           </el-table-column>
         </el-table>
       </div>
@@ -240,7 +223,6 @@
 </script>
   
 <style lang='scss' scoped>
-
 .showClass {
   color: #00EBC1;
 }
@@ -277,6 +259,7 @@
   background-color: #13272F;
   border: 0px !important;
 }
+
 ::v-deep .el-table tr:nth-child(even) td {
   border: 0px !important;
 }
@@ -307,7 +290,8 @@
       border-radius: 2px 2px 2px 2px;
       justify-content: center;
       align-items: center;
-        padding: 1px 10px;;
+      padding: 1px 10px;
+      ;
       opacity: 1;
       font-size: 14px;
       font-family: PingFang SC, PingFang SC;
@@ -405,12 +389,14 @@
       display: inline-flex;
       flex-direction: row;
       width: 100%;
-        height: 100%;;
+      height: 100%;
+      ;
 
 
       .buttons {
         width: 100%;
         height: 38px;
+
         >div {
           display: inline-flex;
           width: 10%;
@@ -464,6 +450,7 @@
         border-radius: 0px 0px 0px 0px;
         opacity: 1;
       }
+
       .weaterTitle::before {
         content: "";
         position: absolute;
@@ -510,10 +497,10 @@
 
   }
 }
+
 .charts {
   height: 180px;
   width: 100%;
 }
-  
 </style>