更改感知事件检测

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js

@@ -1,7 +1,21 @@
-
 /* 数据 */
-let nameList = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; // 类别
+let nameList = [
-let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903]; // 人数
+  "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 = [];
@@ -12,77 +26,81 @@ nameList.map((item, index) => {
       value: valueList[index],
       itemStyle: {
         color: {
-               type: 'linear',
+          type: "linear",
           x: 0,
           y: 0,
           x2: 0,
           y2: 1,
-               colorStops: [{
+          colorStops: [
-                  offset: 0, color: '#FFB904' // 0% 处的颜色
+            {
-               }, {
+              offset: 0,
-                  offset: 1, color: '#FF6969' // 100% 处的颜色
+              color: "#FFB904", // 0% 处的颜色
-               }],
+            },
-               global: false // 缺省为 false
+            {
+              offset: 1,
+              color: "#FF6969", // 100% 处的颜色
+            },
+          ],
+          global: false, // 缺省为 false
         },
-            borderRadius: 6
+        borderRadius: 6,
       },
-         label: { show: false }
+      label: { show: false },
-      })
+    });
   } else {
     dataList.push({
       name: item,
       value: valueList[index],
       itemStyle: {
-            borderRadius: 6
+        borderRadius: 6,
-         }
+      },
-      })
+    });
   }
-})
+});
 
 var options = {
   grid: {
-      top: '7%',//上边距
+    top: "7%", //上边距
-      right: '0',//右边距
+    right: "0", //右边距
-      left: '0',//左边距
+    left: "0", //左边距
     bottom: "2%", //下边距
     containLabel: true,
   },
-   tooltip: {
+  tooltip: {},
-
-   },
   xAxis: {
-      type: 'category',
+    type: "category",
-      data: nameList,
+    data: [],
     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: "#fff",
-         fontSize: 8,
+      fontSize: "10px",
-         fontFamily: 'Source Han Sans CN-Regular',
+      fontFamily: "Source Han Sans CN-Regular",
     },
   },
-   yAxis: [{
+  yAxis: [
-      type: 'value',
+    {
+      type: "value",
       name: "",
       splitNumber: 5,
       nameTextStyle: {
-         color: '#B6E6FF',
+        color: "#B6E6FF",
-         fontSize: 13,
+        fontSize: 10,
-         fontFamily: 'Source Han Sans CN-Regular',
+        fontFamily: "Source Han Sans CN-Regular",
         align: "left",
         verticalAlign: "center",
       },
       axisLabel: {
-         fontSize: 13,
+        fontSize: "10px",
-         color: '#B6E6FF',
+        color: "#fff",
-         fontFamily: 'HarmonyOS Sans-Regular',
+        fontFamily: "HarmonyOS Sans-Regular",
         // formatter:function(value,index){
         //    return yList[index]
         // }
@@ -91,40 +109,47 @@ 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: [{
+  ],
-      type: 'bar',
+  series: [
-      data: dataList,
+    {
+      type: "bar",
+      data: [],
       z: 4,
       itemStyle: {
         color: {
-            type: 'linear',
+          type: "linear",
           x: 0,
           y: 0,
           x2: 0,
           y2: 1,
-            colorStops: [{
+          colorStops: [
-               offset: 0, color: '#06D7B1' // 0% 处的颜色
+            {
-            }, {
+              offset: 0,
-               offset: 1, color: '#80F1BB' // 100% 处的颜色
+              color: "#06D7B1", // 0% 处的颜色
-            }],
+            },
-            global: false // 缺省为 false
+            {
+              offset: 1,
+              color: "#80F1BB", // 100% 处的颜色
             },
-         borderRadius: [4, 4, 0, 0]
+          ],
+          global: false, // 缺省为 false
+        },
+        borderRadius: [4, 4, 0, 0],
       },
       barWidth: 10,
       label: {
         show: false,
-      }
       },
-   ]
+    },
-}
+  ],
+};
 
 export default options;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js

@@ -105,7 +105,7 @@ var options = {
   },
   title: {
     //圆环中间内容
-    text: "{zb|12}",
+    text: "{zb|0}",
     subtext: "    类型分析",
     left: "17.5%",
     top: "40%",
@@ -114,18 +114,20 @@ var options = {
         zb: {
           width: 70,
           color: "#fff",
-          fontSize: 26,
+          fontSize: 30,
-          align: 'center'
+          align: "center",
-        }
+          fontFamily: "PangMenZhengDao",
-      }
+        },
+      },
     },
     subtextStyle: {
-      fontSize: 18,
+      fontSize: 16,
       fontWeight: "400",
-      top: -8,
+      width: 200,
-
+      // top: -18,
+      // marginLeft: 50,
       align: "center",
-      color: "#fff",
+      color: "#74868D",
     },
   },
   color: colorList,
@@ -200,7 +202,7 @@ var options = {
           length2: 80,
         },
       },
-      data: pieData1,
+      data: [],
       label: {
         show: false,
         formatter: function (params) {},

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js

@@ -20,12 +20,12 @@ let options = {
   grid: {
     left: "2%",
     right: "4%",
-    top: "5%",
+    top: "30px",
     bottom: "5%",
     containLabel: true,
   },
   xAxis: {
-    data: xData,
+    data: [],
     show: true,
     axisTick: {
       show: false,
@@ -44,13 +44,18 @@ let options = {
       rotate: "1",
       margin: "20",
       textStyle: {
-        fontSize: 12,
+        fontSize: 10,
-        color: "#50A2C1",
+        color: "#fff",
       },
     },
   },
   yAxis: [
     {
+      name: "(起)       ",
+      nameTextStyle: {
+        color: "#E5E7E8",
+        fomtSize: 10,
+      },
       min: 0,
       axisLine: {
         lineStyle: {
@@ -67,7 +72,7 @@ let options = {
       axisLabel: {
         color: "#DEEBFF",
         textStyle: {
-          fontSize: 12,
+          fontSize: 10,
         },
       },
       axisTick: {
@@ -162,7 +167,7 @@ let options = {
             );
         },
       },
-      data: data1,
+      data: [],
     },
     // 进度条的小圆圈
     {
@@ -183,7 +188,7 @@ let options = {
       },
       z: 2,
       zlevel: 10,
-      data: data1,
+      data: [],
       animationDelay: 500,
     },
   ],

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue

@@ -9,11 +9,13 @@
           </el-option>
         </el-select>
         <el-select v-model="quarter" size="medium" v-if="type == 'quarter'" class="selectRoad-medium" placeholder="请选择">
-          <el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value">
+          <el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value"
+            style="width:140px;">
           </el-option>
         </el-select>
         <el-date-picker size="mini" v-if="type != 'quarter'" class="selectRoad" v-model="dateTime" style="width:140px;"
-          :type="type == 'date' ? 'date' : type == 'month' ? 'month' : type == 'year' ? 'year' : ''" placeholder="请选择" :clearable="false"/>
+          :type="type == 'date' ? 'date' : type == 'month' ? 'month' : type == 'year' ? 'year' : ''" placeholder="请选择"
+          :clearable="false" />
 
         <el-button type="primary" size="mini" class="btnSearch" @click="searchQuery" icon="el-icon-search">查询</el-button>
         <el-button class="btnReset" size="mini" icon="el-icon-refresh-left" @click="onReset">重置</el-button>
@@ -23,16 +25,19 @@
     <div class="body">
       <div>
         <WgtTitle :title="'感知事件趋势分析'"></WgtTitle>
-        <div id="chart1" class="btnChart" />
+        <Empty v-show="!chart1List || chart1List.length <= 0" text="暂无数据..."></Empty>
+        <div v-show="chart1List || chart1List.length > 0" id="chart1" class="btnChart" />
       </div>
 
       <div>
         <WgtTitle :title="'感知事件类型分析'"></WgtTitle>
+        <Empty v-show="!chart2List || chart2List.length <= 0" text="暂无数据..."></Empty>
         <div id="chart2" class="btnChart" />
       </div>
 
       <div>
         <WgtTitle :title="'桩号范围内事件分析趋势'"></WgtTitle>
+        <Empty v-show="!chart3List || chart3List.length <= 0" text="暂无数据..."></Empty>
         <div id="chart3" class="btnChart" />
       </div>
     </div>
@@ -119,6 +124,9 @@ export default {
       selectIndex: 3,
       selectId: 3,
       type: "year",
+      chart1List: [],
+      chart2List: [],
+      chart3List: [],
       list: [
         { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
         { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
@@ -175,6 +183,7 @@ export default {
         "quarter": this.quarter
       }).then(res => {
         if (res.code == 200) {
+          this.chart1List = res.data
           let data = res.data;
           chart1.series[0].data = [];
           chart1.xAxis.data = [];
@@ -247,7 +256,7 @@ export default {
         if (res.code == 200) {
           let types = [];
           let numbers = [];
-
+          this.chart2List = res.data
           let data = res.data.warningTypeList;
           let total = res.data.total;
 
@@ -307,22 +316,22 @@ export default {
 
           chart2.series[0].data = numbers;
           // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
-          this.myChart2.on('mouseover', (params) => {
+          // this.myChart2.on('mouseover', (params) => {
-            if (params.componentType == 'graphic') {
+          //   if (params.componentType == 'graphic') {
-              return
+          //     return
-            }
+          //   }
-            // console.log(params);
+          //   // console.log(params);
-            chart2.title.text = `{zb|${Math.round(params.data.value / total * 100)}%}`;
+          //   chart2.title.text = `{zb|${Math.round(params.data.value / total * 100)}%}`;
-            chart2.title.subtext = params.data.name;
+          //   chart2.title.subtext = params.data.name;
-            this.myChart2.setOption(chart2);
+          //   this.myChart2.setOption(chart2);
-          })
+          // })
 
           // 用户鼠标移出时，重新开始自动切换
-          this.myChart2.on('mouseout', (params) => {
+          // this.myChart2.on('mouseout', (params) => {
-            chart2.title.text = `{zb|${total}}`;
+          //   chart2.title.text = `{zb|${total}}`;
-            chart2.title.subtext = "类型分析";
+          //   chart2.title.subtext = "类型分析";
-            this.myChart2.setOption(chart2);
+          //   this.myChart2.setOption(chart2);
-          })
+          // })
         }
         this.myChart2.setOption(chart2);
 
@@ -339,6 +348,7 @@ export default {
         chart3.series[1].data = [];
         chart3.xAxis.data = [];
         if (res.code == 200 && res.data.length > 0) {
+          this.chart3List = res.data
           let data = res.data;
           const maxObject = data.filter(it => it.sectionNumber > 0).reduce((prev, current) => (current.sectionNumber > prev.sectionNumber ? current : prev));
           let zhs = [];
@@ -562,7 +572,7 @@ export default {
     justify-content: space-between;
     align-items: center;
     flex-direction: column;
-
+    --keep-ratio: scaleX(1);
 
     .searchPanel {
       display: flex;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js

@@ -10,7 +10,7 @@ var options = {
   grid: {
     left: "0%",
     right: "5%",
-    bottom: "10%",
+    bottom: "30px",
     top: "30px",
     containLabel: true,
   },
@@ -22,7 +22,7 @@ var options = {
       startValue: 0,
       endValue: 7,
       filterMode: "filter",
-      height: 14,
+      height: 10,
       bottom: 5,
       handleSize: "200%",
       handleIcon:
@@ -106,12 +106,12 @@ var options = {
     axisLine: {
       lineStyle: {
         color: "#BDD8FB",
-        fontSize: 12,
+        fontSize: 10,
       },
     },
     axisLabel: {
       // interval:0,
-      color: "#BDD8FB",
+      color: "#fff",
       fontSize: 12,
     },
     axisTick: {
@@ -145,14 +145,14 @@ var options = {
     ],
   },
   yAxis: {
+    name: "(件)       ",
+    nameTextStyle: {
+      color: "#fff",
+      fomtSize: 10,
+    },
     type: "value",
     min: 0,
     minInterval: 1,
-    nameTextStyle: {
-      fontSize: 12,
-      color: "#BDD8FB",
-      align: "center",
-    },
     splitLine: {
       lineStyle: {
         color: "rgba(255, 255, 255, 0.15)",
@@ -169,7 +169,7 @@ var options = {
     axisLabel: {
       fontSize: 12,
       fontFamily: "Bebas",
-      color: "#BDD8FB",
+      color: "#fff",
     },
   },
   series: [
@@ -178,11 +178,8 @@ var options = {
       // symbol: "none",
       showSymbol: false,
       smooth: true, // 是否曲线
-      name: "", // 图例对应类别
+      // name: "", // 图例对应类别
-      data: [
+      data: [], // 纵坐标数据
-        400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900,
-        400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900,
-      ], // 纵坐标数据
       lineStyle: {
         color: "#39B1FF",
       },

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue

@@ -10,7 +10,7 @@
         <EventSource class="content-m-t" />
         <DailyDisposal class="content-m-t" />
       </div>
-      <div class="content-m">
+      <div class="content-m" style="margin-right: 0;">
         <MonthStatistice class="content-m-t" />
         <TypeAnalysis class="content-m-t" />
       </div>
@@ -128,5 +128,6 @@ export default {
       width: 493px;
     }
   }
-}</style>
+}
+</style>