From 1f303d59b59624acd8ea97730219b6c4a1024cbe Mon Sep 17 00:00:00 2001
From: zhangzhang <1747194829@qq.com>
Date: Thu, 22 Feb 2024 17:29:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/postTrendsDay/assets/charts.js |   2 +-
 .../components/postTrendsMonth/index.vue      | 282 +++++----
 .../components/dailyDisposal/assets/charts.js |   2 +-
 .../components/eventQuery/assets/charts.js    |  12 +-
 .../components/eventQuery/assets/charts3.js   |   4 +-
 .../components/eventQuery/index.vue           | 540 ++++++++++++------
 .../components/eventSource/assets/charts.js   |   3 +-
 .../monthStatistics/assets/charts.js          |   2 +-
 .../components/typeAnalysis/assets/charts.js  |   2 +-
 .../TemperatureTrend/assets/charts.js         | 280 ++++-----
 .../visibilityTrends/assets/charts.js         | 290 +++++-----
 .../components/classification/index.vue       | 187 +++---
 .../components/flowstate/assets/charts.js     |   2 +-
 .../components/situation/index.vue            |   1 +
 .../trafficIndicators/assets/chartsRadar.js   |  79 +++
 .../components/trafficIndicators/index.vue    |   5 +-
 16 files changed, 1015 insertions(+), 678 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js
index 44e0963a..5ccc5558 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js
@@ -49,7 +49,7 @@ var options = {
   yAxis: [
     {
       type: "value",
-      name: "（件）",
+      name: "(起)       ",
       nameTextStyle: {
         color: "#E5E7E8",
         fomtSize: 10,
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue
index f6c93929..7d1a22ce 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue
@@ -1,39 +1,86 @@
 <template>
-  <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'事件分析'"></WgtTitle>
     <div class="main-board">
       <div class="board board-m">
         <div class="searchPanel_1">
           <!-- <el-from ref="form"> -->
-          <RadioGroup :options="[{ key: '1', label: '菏泽' }, { key: '3', label: '济南' }]" v-model="direction"
-            type="button" />
-          <el-select v-model="type" size="mini" class="selectRoad" placeholder="请选择">
-            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
+          <RadioGroup
+            :options="[
+              { key: '1', label: '菏泽' },
+              { key: '3', label: '济南' },
+            ]"
+            v-model="direction"
+            type="button"
+          />
+          <el-select
+            v-model="type"
+            size="mini"
+            class="selectRoad"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in typeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
             </el-option>
           </el-select>
-          <el-select v-model="quarter" size="medium" v-if="type == '3'" class="selectRoad-medium" placeholder="请选择">
-            <el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value">
+          <el-select
+            v-model="quarter"
+            size="medium"
+            v-if="type == '3'"
+            class="selectRoad-medium"
+            placeholder="请选择"
+            style="width: 140px"
+          >
+            <el-option
+              v-for="item in quarterOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
             </el-option>
           </el-select>
           <!-- <el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="type == '3'" v-model="dateTime"
             aria-placeholder="请选季度" /> -->
-          <el-date-picker size="mini" v-if="type != '3'" class="selectRoad" v-model="dateTime" style="width:140px;"
-            :type="type == 1 ? 'date' : type == 2 ? 'month' : type == 4 ? 'year' : ''" placeholder="请选择" />
-
-
-          <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="handleClear">重置</el-button>
+          <el-date-picker
+            size="mini"
+            v-if="type != '3'"
+            class="selectRoad"
+            v-model="dateTime"
+            style="width: 140px"
+            :type="
+              type == 1 ? 'date' : type == 2 ? 'month' : type == 4 ? 'year' : ''
+            "
+            placeholder="请选择"
+          />
+
+          <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="handleClear"
+            >重置</el-button
+          >
           <!-- </el-from> -->
-
         </div>
-        <div class="charts keep-ratio " id="chart1"></div>
+        <div class="charts keep-ratio" id="chart1"></div>
       </div>
       <div class="board board-l">
-        <div class="charts keep-ratio " id="chart2"></div>
+        <div class="charts keep-ratio" id="chart2"></div>
       </div>
       <div class="board board-s">
-        <div class="charts keep-ratio " id="chart3"></div>
+        <div class="charts keep-ratio" id="chart3"></div>
       </div>
     </div>
   </div>
@@ -42,18 +89,22 @@
 <script>
 import moment from "moment";
 import WgtTitle from "@screen/pages/perception/widgets/title";
-import RadioGroup from '@screen/components/FormConfig/components/RadioGroup/index.vue';
+import RadioGroup from "@screen/components/FormConfig/components/RadioGroup/index.vue";
 import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
 import chartsStatistics2 from "./assets/charts2";
 import chartsStatistics3 from "./assets/charts3";
-import { selectRoadSection, selectEventType, selectAccidentVehicle } from "@/api/event/governanceAnalysis"
+import {
+  selectRoadSection,
+  selectEventType,
+  selectAccidentVehicle,
+} from "@/api/event/governanceAnalysis";
 
 export default {
-  name: 'postTrendsMonth',
+  name: "postTrendsMonth",
   components: {
     WgtTitle,
-    RadioGroup
+    RadioGroup,
   },
   data() {
     return {
@@ -61,109 +112,108 @@ export default {
       type: "1",
       typeOptions: [
         {
-          label: '年',
-          value: '4'
+          label: "年",
+          value: "4",
         },
         {
-          label: '月',
-          value: '2'
+          label: "月",
+          value: "2",
         },
         {
-          label: '日',
-          value: '1'
+          label: "日",
+          value: "1",
         },
         {
-          label: '季',
-          value: '3'
-        }
+          label: "季",
+          value: "3",
+        },
       ],
-      quarter: '1',
+      quarter: "1",
       quarterOptions: [
         {
           label: "第一季度",
-          value: "1"
+          value: "1",
         },
         {
           label: "第二季度",
-          value: "2"
+          value: "2",
         },
         {
           label: "第三季度",
-          value: "3"
+          value: "3",
         },
         {
           label: "第四季度",
-          value: "4"
-        }
+          value: "4",
+        },
       ],
-      dateTime: "2024-01-01 00:00:00"
-    }
+      dateTime: "2024-01-01 00:00:00",
+    };
   },
 
   async created() {
-    await this.searchQuery()
+    await this.searchQuery();
   },
   methods: {
     getSelectRoadSection(formData) {
       return selectRoadSection(formData).then((res) => {
         // console.log("接口返回数据", res.data)
-        let sectionNameData = []
-        let avgNumData = []
-        let lastNumData = []
-        let numData = []
-        let mileageData = []
-        res.data.forEach(item => {
-          avgNumData.push(item.avgNum)
-          lastNumData.push(item.lastNum)
-          numData.push(item.num)
-          mileageData.push(item.mileage)
-          sectionNameData.push(item.section_name)
+        let sectionNameData = [];
+        let avgNumData = [];
+        let lastNumData = [];
+        let numData = [];
+        let mileageData = [];
+        res.data.forEach((item) => {
+          avgNumData.push(item.avgNum);
+          lastNumData.push(item.lastNum);
+          numData.push(item.num);
+          mileageData.push(item.mileage);
+          sectionNameData.push(item.section_name);
         });
-        chartsStatistics.series[0].data = numData //事故总量
-        chartsStatistics.series[1].data = avgNumData //百公里事故总量
-        chartsStatistics.series[2].data = lastNumData //去年事故总量
-        chartsStatistics.series[3].data = mileageData //路段里程数
-        chartsStatistics.xAxis.data = sectionNameData
-      })
+        chartsStatistics.series[0].data = numData; //事故总量
+        chartsStatistics.series[1].data = avgNumData; //百公里事故总量
+        chartsStatistics.series[2].data = lastNumData; //去年事故总量
+        chartsStatistics.series[3].data = mileageData; //路段里程数
+        chartsStatistics.xAxis.data = sectionNameData;
+      });
     },
     getSelectEventType(formData) {
       return selectEventType(formData).then((res) => {
         // console.log("_____________", res.data)
-        let lastAvgTimeData = []
-        let avgTimeData = []
-        let numData = []
-        let lastNumData = []
-        let eventSubclassData = []
+        let lastAvgTimeData = [];
+        let avgTimeData = [];
+        let numData = [];
+        let lastNumData = [];
+        let eventSubclassData = [];
         res.data.forEach((item) => {
-          lastAvgTimeData.push(item.lastAvgTime)
-          numData.push(item.num)
-          avgTimeData.push(item.avgTime)
-          lastNumData.push(item.lastNum)
-          eventSubclassData.push(item.eventSubclassName)
-          chartsStatistics2.series[0].data = numData //事件数量
-          chartsStatistics2.series[1].data = lastNumData //去年同期数量
-          chartsStatistics2.series[2].data = avgTimeData //平均处置时长
-          chartsStatistics2.series[3].data = lastAvgTimeData //去年同期平均处置时长
-          chartsStatistics2.xAxis.data = eventSubclassData
-        })
-
-      })
+          lastAvgTimeData.push(item.lastAvgTime);
+          numData.push(item.num);
+          avgTimeData.push(item.avgTime);
+          lastNumData.push(item.lastNum);
+          eventSubclassData.push(item.eventSubclassName);
+          chartsStatistics2.series[0].data = numData; //事件数量
+          chartsStatistics2.series[1].data = lastNumData; //去年同期数量
+          chartsStatistics2.series[2].data = avgTimeData; //平均处置时长
+          chartsStatistics2.series[3].data = lastAvgTimeData; //去年同期平均处置时长
+          chartsStatistics2.xAxis.data = eventSubclassData;
+        });
+      });
     },
     getSelectAccidentVehicle(formData) {
       return selectAccidentVehicle(formData).then((res) => {
         // console.log("______", res.data)
-        let typeNameData = []
-        let numData = []
-        let avgTimeData = []
+        let typeNameData = [];
+        let numData = [];
+        let avgTimeData = [];
         res.data.forEach((item) => {
-          typeNameData.push(item.typeName)
-          numData.push(item.num)
-          avgTimeData.push(item.avgTime)
-        })
-        chartsStatistics3.series[0].data = numData //事件数量（起）
-        chartsStatistics3.series[1].data = avgTimeData //平均处置时长（分钟）
-        chartsStatistics3.xAxis.data = typeNameData
-      })
+          typeNameData.push(item.typeName);
+          numData.push(item.num);
+          avgTimeData.push(item.avgTime);
+        });
+        chartsStatistics3.series[0].data = numData; //事件数量（起）
+        chartsStatistics3.series[1].data = avgTimeData; //平均处置时长（分钟）
+        chartsStatistics3.xAxis.data = typeNameData;
+      });
     },
     async searchQuery() {
       let startTime = "";
@@ -171,16 +221,16 @@ export default {
         let year = moment().year();
         // console.log(year, this.quarter);
         if (this.quarter == 1) {
-          startTime = `${year}-01-01 00:00:00`
+          startTime = `${year}-01-01 00:00:00`;
         } else if (this.quarter == 2) {
-          startTime = `${year}-04-01 00:00:00`
+          startTime = `${year}-04-01 00:00:00`;
         } else if (this.quarter == 3) {
-          startTime = `${year}-07-01 00:00:00`
+          startTime = `${year}-07-01 00:00:00`;
         } else {
-          startTime = `${year}-10-01 00:00:00`
+          startTime = `${year}-10-01 00:00:00`;
         }
       } else {
-        startTime = moment(this.dateTime).format('YYYY-MM-DD HH:mm:ss')
+        startTime = moment(this.dateTime).format("YYYY-MM-DD HH:mm:ss");
       }
       // let data = {
       //   direction: this.direction,
@@ -191,38 +241,35 @@ export default {
       formData.append("direction", this.direction);
       formData.append("type", this.type);
       formData.append("startTime", startTime);
-      await this.getSelectRoadSection(formData)
-      await this.getSelectEventType(formData)
-      await this.getSelectAccidentVehicle(formData)
-      this.renderCharts()
-
+      await this.getSelectRoadSection(formData);
+      await this.getSelectEventType(formData);
+      await this.getSelectAccidentVehicle(formData);
+      this.renderCharts();
     },
     handleClear() {
-      this.direction = "1"
-      this.type = "1"
-      this.quarter = "1"
-      this.dateTime = "2024-01-01 00:00:00"
+      this.direction = "1";
+      this.type = "1";
+      this.quarter = "1";
+      this.dateTime = "2024-01-01 00:00:00";
     },
     renderCharts() {
       this.$nextTick(() => {
-        var myChart = echarts.init(document.getElementById('chart1'));
+        var myChart = echarts.init(document.getElementById("chart1"));
         myChart.setOption(chartsStatistics);
 
-        var myChart1 = echarts.init(document.getElementById('chart2'));
+        var myChart1 = echarts.init(document.getElementById("chart2"));
         myChart1.setOption(chartsStatistics2);
 
-        var myChart2 = echarts.init(document.getElementById('chart3'));
+        var myChart2 = echarts.init(document.getElementById("chart3"));
         myChart2.setOption(chartsStatistics3);
       });
     },
   },
-  mounted() {
-
-  },
-}
+  mounted() {},
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .congestion {
   width: 100%;
 
@@ -245,7 +292,6 @@ export default {
 
   .board-s {
     width: calc(100% / 6 * 1) !important;
-
   }
 
   .board {
@@ -257,7 +303,12 @@ export default {
     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;
+    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;
@@ -298,7 +349,7 @@ export default {
 
       .selectRoad {
         width: 89px;
-        border: 1px solid #00B3CC;
+        border: 1px solid #00b3cc;
 
         ::v-deep {
           .el-input__inner {
@@ -310,7 +361,7 @@ export default {
 
       .selectRoad-medium {
         width: 120px;
-        border: 1px solid #00B3CC;
+        border: 1px solid #00b3cc;
 
         ::v-deep {
           .el-input__inner {
@@ -321,20 +372,17 @@ export default {
       }
 
       .btnSearch {
-        background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+        background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
         margin-left: 10px;
         border-color: transparent;
       }
 
       .btnReset {
-        background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
-        ;
+        background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
         border-color: transparent;
         color: white;
       }
     }
-
-
   }
 }
 
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 46e7091f..d942d30c 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
@@ -55,7 +55,7 @@ var options = {
       });
       return `{ast|${obj[0].name}}     {bst|${Math.round(
         (obj[0].value / count) * 100
-      )}%}    {cst|${obj[0].value}件}`;
+      )}%}    {cst|${obj[0].value}起}`;
     },
     data: echartsData?.map((x) => x),
   },
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js
index c08c28e5..a6f7a624 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js
@@ -60,7 +60,7 @@ nameList.map((item, index) => {
 
 var options = {
   grid: {
-    top: "7%", //上边距
+    top: "15%", //上边距
     right: "0", //右边距
     left: "0", //左边距
     bottom: "2%", //下边距
@@ -88,14 +88,14 @@ var options = {
   yAxis: [
     {
       type: "value",
-      name: "",
+      name: "(起)       ",
       splitNumber: 5,
       nameTextStyle: {
-        color: "#B6E6FF",
+        color: "#fff",
         fontSize: 10,
-        fontFamily: "Source Han Sans CN-Regular",
-        align: "left",
-        verticalAlign: "center",
+        // fontFamily: "Source Han Sans CN-Regular",
+        // align: "left",
+        // verticalAlign: "center",
       },
       axisLabel: {
         fontSize: "10px",
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js
index e1183d2a..a2069848 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js
@@ -53,13 +53,13 @@ let options = {
     {
       name: "(起)       ",
       nameTextStyle: {
-        color: "#E5E7E8",
+        color: "#fff",
         fomtSize: 10,
       },
       min: 0,
       axisLine: {
         lineStyle: {
-          color: "#1C82C5",
+          color: "#fff",
         },
       },
       splitLine: {
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 b48b5391..d4331bab 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
@@ -1,125 +1,224 @@
 <template>
-  <div class='congestion'>
+  <div class="congestion">
     <div class="board">
-      <ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectIndex" />
+      <ProgressBar
+        class="keep-ratio"
+        @selectItem="selectProgress"
+        :dataList="dataList"
+        :selectIndex="selectIndex"
+      />
       <div class="searchPanel">
-        <RadioGroup :options="[{ key: '1', label: '菏泽' }, { key: '3', label: '济南' }]" v-model="direction" type="button" />
-        <el-select v-model="type" size="mini" class="selectRoad" placeholder="请选择">
-          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
+        <RadioGroup
+          :options="[
+            { key: '1', label: '菏泽' },
+            { key: '3', label: '济南' },
+          ]"
+          v-model="direction"
+          type="button"
+        />
+        <el-select
+          v-model="type"
+          size="mini"
+          class="selectRoad"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in typeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
           </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"
-            style="width:140px;">
+        <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"
+            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" />
-
-        <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>
+        <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"
+        />
+
+        <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
+        >
       </div>
     </div>
 
     <div class="body">
       <div>
         <WgtTitle :title="'感知事件趋势分析'"></WgtTitle>
-        <Empty v-show="!chart1List || chart1List.length <= 0" text="暂无数据..."></Empty>
-        <div v-show="chart1List || chart1List.length > 0" 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" />
+        <Empty
+          v-show="!chart2List || chart2List.length <= 0"
+          text="暂无数据..."
+        ></Empty>
+        <div
+          v-show="chart2List || chart2List.length > 0"
+          id="chart2"
+          class="btnChart"
+        />
       </div>
 
       <div>
         <WgtTitle :title="'桩号范围内事件分析趋势'"></WgtTitle>
-        <Empty v-show="!chart3List || chart3List.length <= 0" text="暂无数据..."></Empty>
-        <div id="chart3" class="btnChart" />
+        <Empty
+          v-show="!chart3List || chart3List.length <= 0"
+          text="暂无数据..."
+        ></Empty>
+        <div
+          v-show="chart3List || chart3List.length > 0"
+          id="chart3"
+          class="btnChart"
+        />
       </div>
     </div>
-
   </div>
 </template>
-  
-<script>
 
-import WgtTitle from '../../../widgets/title'
-import RadioGroup from '@screen/components/FormConfig/components/RadioGroup/index.vue';
-import ProgressBar from './progressBar';
+<script>
+import WgtTitle from "../../../widgets/title";
+import RadioGroup from "@screen/components/FormConfig/components/RadioGroup/index.vue";
+import ProgressBar from "./progressBar";
 import * as echarts from "echarts";
 import chart1 from "./assets/charts";
 import chart2 from "./assets/charts2";
 import chart3 from "./assets/charts3";
-import ElQuarterPicker from './ElQuarterPicker'
-import { getWarningTrend, getWarningSectionType, getSectionMarkNumber, getRoadSectionList } from '../../../../../../../api/event/perceiveEvent';
+import ElQuarterPicker from "./ElQuarterPicker";
+import {
+  getWarningTrend,
+  getWarningSectionType,
+  getSectionMarkNumber,
+  getRoadSectionList,
+} from "../../../../../../../api/event/perceiveEvent";
 
 const drawRoundRect = (ctx, x, y, width, height, radius, gr) => {
-  // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 
+  // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度
   ctx.beginPath();
   ctx.fillStyle = gr;
-  ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
+  ctx.arc(x + radius, y + radius, radius, Math.PI, (Math.PI * 3) / 2);
   ctx.lineTo(width - radius + x, y);
-  ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
+  ctx.arc(
+    width - radius + x,
+    radius + y,
+    radius,
+    (Math.PI * 3) / 2,
+    Math.PI * 2
+  );
   ctx.lineTo(width + x, height + y - radius);
-  ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
+  ctx.arc(
+    width - radius + x,
+    height - radius + y,
+    radius,
+    0,
+    (Math.PI * 1) / 2
+  );
   ctx.lineTo(radius + x, height + y);
-  ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
+  ctx.arc(radius + x, height - radius + y, radius, (Math.PI * 1) / 2, Math.PI);
   ctx.closePath();
   //ctx.stroke();
-  ctx.fill()
-}
+  ctx.fill();
+};
 
 export default {
-  name: 'EventQuery',
+  name: "EventQuery",
   components: {
     WgtTitle,
     ProgressBar,
     ElQuarterPicker,
-    RadioGroup
+    RadioGroup,
   },
   data() {
     return {
       typeOptions: [
         {
-          value: 'year',
-          label: '年'
-        }, {
-          value: 'month',
-          label: '月'
+          value: "year",
+          label: "年",
+        },
+        {
+          value: "month",
+          label: "月",
         },
         {
-          value: 'date',
-          label: '日'
+          value: "date",
+          label: "日",
         },
         {
-          value: 'quarter',
-          label: '季'
-        }],
-      quarter: '1',
+          value: "quarter",
+          label: "季",
+        },
+      ],
+      quarter: "1",
       quarterOptions: [
         {
           label: "第一季度",
-          value: "1"
+          value: "1",
         },
         {
           label: "第二季度",
-          value: "2"
+          value: "2",
         },
         {
           label: "第三季度",
-          value: "3"
+          value: "3",
         },
         {
           label: "第四季度",
-          value: "4"
-        }
+          value: "4",
+        },
       ],
       dateTime: "2024",
-      direction: '1',
+      direction: "1",
       dataList: [],
       selectIndex: 3,
       selectId: 3,
@@ -128,36 +227,70 @@ export default {
       chart2List: [],
       chart3List: [],
       list: [
-        { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
-        { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
-        { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
-        { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
-        { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
-        { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' }
-      ]
-    }
-  },
-  created() {
-
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+      ],
+    };
   },
+  created() {},
   methods: {
-    selectProgress(item, index,) {
-      this.selectIndex = index
+    selectProgress(item, index) {
+      this.selectIndex = index;
       this.selectId = item.id;
-      this.searchQuery()
+      this.searchQuery();
     },
     onReset() {
-      this.direction = '1';
+      this.direction = "1";
       this.type = "year";
-      this.dateTime = '2024';
+      this.dateTime = "2024";
       this.selectId = this.dataList[0].id;
-      this.selectIndex = 1
+      this.selectIndex = 1;
     },
     searchQuery() {
       let startTime = "";
-      let qType = this.type == 'date' ? 'day' : this.type;
+      let qType = this.type == "date" ? "day" : this.type;
       if (this.type == "quarter") {
-        console.log('dateTime', this.quarter)
+        console.log("dateTime", this.quarter);
         // let year = moment().year();
         // if (this.quarter == 1) {
         //   startTime = `${year}-01-01 00:00:00`
@@ -169,30 +302,31 @@ export default {
         //   startTime = `${year}-10-01 00:00:00`
         // }
       } else {
-        startTime = moment(this.dateTime).format('YYYY-MM-DD HH:mm:ss')
+        startTime = moment(this.dateTime).format("YYYY-MM-DD HH:mm:ss");
       }
-      console.log("startTime", startTime)
-
+      console.log("startTime", startTime);
 
       //感知事件趋势
       getWarningTrend({
-        "type": qType,
-        "sectionId": this.selectId,
-        "createTime": startTime,
-        "direction": this.direction,
-        "quarter": this.quarter
-      }).then(res => {
+        type: qType,
+        sectionId: this.selectId,
+        createTime: startTime,
+        direction: this.direction,
+        quarter: this.quarter,
+      }).then((res) => {
         if (res.code == 200) {
-          this.chart1List = res.data
+          this.chart1List = res.data;
           let data = res.data;
           chart1.series[0].data = [];
           chart1.xAxis.data = [];
           if (data.length > 0) {
-            const maxObject = data.reduce((prev, current) => (current.number > prev.number ? current : prev));
+            const maxObject = data.reduce((prev, current) =>
+              current.number > prev.number ? current : prev
+            );
             let xData = [];
             let numbers = [];
 
-            data.forEach(it => {
+            data.forEach((it) => {
               if (this.type == "year") {
                 xData.push(it.month + "月");
               }
@@ -203,42 +337,45 @@ export default {
                 xData.push(it.time.split(" ")[1] + "时");
               }
               if (this.type == "quarter") {
-                xData.push(it.month + '月');
+                xData.push(it.month + "月");
               }
               if (it.number == maxObject.number) {
                 numbers.push({
                   value: it.number,
                   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% 处的颜色
+                        },
+                      ],
+                      global: false, // 缺省为 false
                     },
-                    borderRadius: 6
-                  }
+                    borderRadius: 6,
+                  },
                 });
               } else {
                 numbers.push({
                   value: it.number,
                   itemStyle: {
-                    borderRadius: 6
-                  }
+                    borderRadius: 6,
+                  },
                 });
               }
-
-            })
+            });
 
             chart1.xAxis.data = xData;
             chart1.series[0].data = numbers;
-
           }
         }
         this.myChart1.setOption(chart1);
@@ -246,17 +383,17 @@ export default {
 
       //类型占比
       getWarningSectionType({
-        "type": qType,
-        "sectionId": this.selectId,
-        "createTime": startTime,
-        "direction": this.direction,
-        "quarter": this.quarter
-      }).then(res => {
+        type: qType,
+        sectionId: this.selectId,
+        createTime: startTime,
+        direction: this.direction,
+        quarter: this.quarter,
+      }).then((res) => {
         chart2.series[0].data = [];
         if (res.code == 200) {
           let types = [];
           let numbers = [];
-          this.chart2List = res.data
+          this.chart2List = res.data;
           let data = res.data.warningTypeList;
           let total = res.data.total;
 
@@ -291,13 +428,13 @@ export default {
 
             numbers.push({
               name: types[types.length - 1],
-              value: it.number
+              value: it.number,
             });
-          })
+          });
           chart2.legend.data = types;
           chart2.legend.formatter = function (name) {
-            let total = 0
-            let target
+            let total = 0;
+            let target;
             for (let i = 0; i < numbers.length; i++) {
               total += numbers[i].value;
               if (types[i] == name) {
@@ -305,11 +442,11 @@ export default {
               }
             }
             var arr = [
-              '{a|' + name + '}',
-              '{b|' + ((target / total) * 100).toFixed(2) + '%}  ',
-              "{c|" + target + "件}",
-            ]
-            return arr.join(' ')
+              "{a|" + name + "}",
+              "{b|" + ((target / total) * 100).toFixed(2) + "%}  ",
+              "{c|" + target + "起}",
+            ];
+            return arr.join(" ");
           };
 
           chart2.title.text = `{zb|${total}}`;
@@ -335,23 +472,26 @@ export default {
           // })
         }
         this.myChart2.setOption(chart2);
-
-      })
+      });
       //路段范围内桩号分布
       getSectionMarkNumber({
-        "type": qType,
-        "sectionId": this.selectId,
-        "createTime": startTime,
-        "direction": this.direction,
-        "quarter": this.quarter
-      }).then(res => {
+        type: qType,
+        sectionId: this.selectId,
+        createTime: startTime,
+        direction: this.direction,
+        quarter: this.quarter,
+      }).then((res) => {
         chart3.series[0].data = [];
         chart3.series[1].data = [];
         chart3.xAxis.data = [];
         if (res.code == 200 && res.data.length > 0) {
-          this.chart3List = res.data
+          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));
+          const maxObject = data
+            .filter((it) => it.sectionNumber > 0)
+            .reduce((prev, current) =>
+              current.sectionNumber > prev.sectionNumber ? current : prev
+            );
           let zhs = [];
           let values1 = [];
           let values2 = [];
@@ -366,32 +506,36 @@ export default {
                   value: it.sectionNumber,
                   itemStyle: {
                     color: {
-                      type: 'linear',
+                      type: "linear",
                       x: 0,
                       y: 0,
                       x2: 0,
                       y2: 1,
-                      colorStops: [{
-                        offset: 0, color: '#01D5BC' // 0% 处的颜色
-                      }, {
-                        offset: 1, color: '#003B4E' // 100% 处的颜色
-                      }],
-                      global: false // 缺省为 false
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#01D5BC", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#003B4E", // 100% 处的颜色
+                        },
+                      ],
+                      global: false, // 缺省为 false
                     },
-                    borderRadius: 6
+                    borderRadius: 6,
                   },
-                })
+                });
               } else {
                 values1.push({
                   value: it.sectionNumber,
                   itemStyle: {
-                    borderRadius: 6
+                    borderRadius: 6,
                   },
-                })
+                });
               }
-
             }
-          })
+          });
 
           chart3.xAxis.data = zhs;
           chart3.series[0].data = values1;
@@ -399,7 +543,7 @@ export default {
         }
 
         this.myChart3.setOption(chart3);
-      })
+      });
       // if (this.type == "day")
       //   this.type = "date";
     },
@@ -407,19 +551,18 @@ export default {
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-
-        getRoadSectionList().then(res => {
+        getRoadSectionList().then((res) => {
           console.log(res);
           if (res.code == 200) {
             let rows = res.rows;
             this.dataList = [];
-            rows.forEach(it => {
+            rows.forEach((it) => {
               this.dataList.push({
                 title: it.sectionName.split("-")[0],
                 id: it.id,
               });
-            })
-            console.log("dataList", this.dataList)
+            });
+            console.log("dataList", this.dataList);
             // if (rows.length > 0) {
             //   let lastRoad = rows[rows.length - 1].sectionName.split("-")[1];
             //   this.dataList.push({
@@ -427,21 +570,17 @@ export default {
             //     id: rows[rows.length - 1].id,
             //   });
             // }
-
           }
           this.searchQuery();
+        });
 
-
-        })
-
-        var myChart1 = echarts.init(document.getElementById('chart1'));
+        var myChart1 = echarts.init(document.getElementById("chart1"));
         myChart1.setOption(chart1);
-        var myChart2 = echarts.init(document.getElementById('chart2'));
+        var myChart2 = echarts.init(document.getElementById("chart2"));
         myChart2.setOption(chart2);
-        var myChart3 = echarts.init(document.getElementById('chart3'));
+        var myChart3 = echarts.init(document.getElementById("chart3"));
         myChart3.setOption(chart3);
 
-
         this.myChart1 = myChart1;
         this.myChart2 = myChart2;
         this.myChart3 = myChart3;
@@ -449,11 +588,11 @@ export default {
         const domMap = document.getElementById("chart2");
         let parentDiv = domMap.firstChild;
         // 创建canvas
-        let canvas = document.createElement('canvas');
+        let canvas = document.createElement("canvas");
         canvas.width = parentDiv.offsetWidth;
         canvas.height = parentDiv.offsetHeight;
         parentDiv.appendChild(canvas);
-        const context = canvas.getContext('2d');
+        const context = canvas.getContext("2d");
         context.lineWidth = 1; // 设置线段宽度
 
         // 填充渐变颜色
@@ -510,15 +649,13 @@ export default {
         // gr.addColorStop(1, 'rgba(92,197,255,0)');
         // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
         // drawRoundRect(context, 416, 208, 140, 24, 12, gr);
-
       });
-
     });
   },
-}
+};
 </script>
-  
-<style lang='scss' scoped>
+
+<style lang="scss" scoped>
 .congestion {
   width: 100%;
   position: relative;
@@ -529,12 +666,21 @@ export default {
     justify-content: space-evenly;
     font-size: 14px;
 
-    >div {
+    > div {
       width: 33%;
       height: 470px;
-      background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
+      background: linear-gradient(
+        180deg,
+        rgba(6, 66, 88, 0.2) 0%,
+        #064258 100%
+      );
       border: 1px solid;
-      border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+      border-image: linear-gradient(
+          360deg,
+          rgba(55, 231, 255, 0.3),
+          rgba(55, 231, 255, 0)
+        )
+        1 1;
     }
 
     :nth-child(1) {
@@ -555,7 +701,6 @@ export default {
       width: 90%;
       margin: 95px auto 0;
     }
-
   }
 
   .board {
@@ -607,7 +752,7 @@ export default {
 
       .selectRoad {
         width: 100px;
-        border: 1px solid #00B3CC;
+        border: 1px solid #00b3cc;
 
         ::v-deep {
           .el-input__inner {
@@ -619,7 +764,7 @@ export default {
 
       .selectRoad-medium {
         width: 120px;
-        border: 1px solid #00B3CC;
+        border: 1px solid #00b3cc;
 
         ::v-deep {
           .el-input__inner {
@@ -630,19 +775,17 @@ export default {
       }
 
       .btnSearch {
-        background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+        background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
         margin-left: 10px;
         border-color: transparent;
       }
 
       .btnReset {
-        background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
-        ;
+        background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
         border-color: transparent;
         color: white;
       }
     }
-
   }
 }
 
@@ -653,13 +796,54 @@ export default {
 </style>
 
 <style lang="scss">
-div.el-popover:has(> .el-date-picker) div .el-picker-panel__body .el-picker-panel__content table tr td.today span,
-div.el-popover:has(> .el-date-picker) div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell,
-div.el-picker-panel.el-date-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today span,
-div.el-picker-panel.el-date-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell,
-div.el-picker-panel.el-date-range-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today span,
-div.el-picker-panel.el-date-range-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell {
-  color: #fff
+div.el-popover:has(> .el-date-picker)
+  div
+  .el-picker-panel__body
+  .el-picker-panel__content
+  table
+  tr
+  td.today
+  span,
+div.el-popover:has(> .el-date-picker)
+  div
+  .el-picker-panel__body
+  .el-picker-panel__content
+  table
+  tr
+  td.today
+  .cell,
+div.el-picker-panel.el-date-picker.el-popper
+  div
+  .el-picker-panel__body
+  .el-picker-panel__content
+  table
+  tr
+  td.today
+  span,
+div.el-picker-panel.el-date-picker.el-popper
+  div
+  .el-picker-panel__body
+  .el-picker-panel__content
+  table
+  tr
+  td.today
+  .cell,
+div.el-picker-panel.el-date-range-picker.el-popper
+  div
+  .el-picker-panel__body
+  .el-picker-panel__content
+  table
+  tr
+  td.today
+  span,
+div.el-picker-panel.el-date-range-picker.el-popper
+  div
+  .el-picker-panel__body
+  .el-picker-panel__content
+  table
+  tr
+  td.today
+  .cell {
+  color: #fff;
 }
 </style>
-  
\ No newline at end of file
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 94541e3e..cbaa44bb 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
@@ -77,7 +77,6 @@ var options = {
   tooltip: {
     confine: true,
     textStyle: {
-      fontSize: 10, // 字体大小
       color: "#333",
     },
     color: "#333",
@@ -135,7 +134,7 @@ var options = {
       var arr = [
         "{ast|" + name + "}",
         "{bst|" + (target * 100).toFixed(0) + "%  }",
-        "{cst|" + target+ "件}",
+        "{cst|" + target + "起}",
       ];
       return arr.join("  ");
     },
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js
index 14e3cc68..4929a73e 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js
@@ -145,7 +145,7 @@ var options = {
     ],
   },
   yAxis: {
-    name: "(件)       ",
+    name: "(起)       ",
     nameTextStyle: {
       color: "#fff",
       fomtSize: 10,
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 4c9725b9..7fe27863 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
@@ -63,7 +63,7 @@ var options = {
       // console.log(obj);
       return `{ast|${obj[0].name}}    {bst|${
         Math.round((obj[0].value / count) * 100) || 0
-      }%} {cst|${obj[0].value}件}`;
+      }%} {cst|${obj[0].value}起}`;
     },
     // data: typeAnalysisData?.map(x => x.name),
   },
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/assets/charts.js
index 2491f1bc..0b2afe4d 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/assets/charts.js
@@ -1,148 +1,152 @@
 import * as echarts from "echarts";
 var options = {
-
-   color: ["#5090FF", "#01B3E4"],
-   grid: {
-      left: "2%",
-      right: "5%",
-      bottom: "10%",
-      top: "10%",
-      containLabel: true,
-   },
-   legend: {
-      icon: 'rect',
-      top: '0%',
-      right: '5%',
-      data: ['实时数据'],
-      itemWidth:18,
-      itemHeight: 5,
-      itemGap: 30,
-      itemStyle:{
-         color:"#FFD15C",
-      },
-      textStyle: {
-        fontSize: 12,
-        color: '#fff',
-        padding: [0, 0, 0, 10],
-      },
-   },
-   xAxis: {
-      type: "category",
-      axisLine: {
-         lineStyle: {
-            color: "#BDD8FB",
-            fontSize: 12,
-         },
+  tooltip: {
+    show: true,
+    trigger: "axis",
+  },
+  color: "#FFD15C",
+  grid: {
+    left: "2%",
+    right: "5%",
+    bottom: "10%",
+    top: "10%",
+    containLabel: true,
+  },
+  legend: {
+    icon: "rect",
+    top: "0%",
+    right: "5%",
+    data: ["实时数据"],
+    itemWidth: 18,
+    itemHeight: 5,
+    itemGap: 30,
+    //  itemStyle: {
+    //    color: "#FFD15C",
+    //  },
+    textStyle: {
+      fontSize: 12,
+      color: "#fff",
+      padding: [0, 0, 0, 10],
+    },
+  },
+  xAxis: {
+    type: "category",
+    axisLine: {
+      lineStyle: {
+        color: "#FFD15C",
       },
-      axisLabel: {
-         // interval:0,
-         color: "#BDD8FB",
-         fontSize: 12,
-      },
-      axisTick: {
-         show: false,
+    },
+    axisLabel: {
+      // interval:0,
+      color: "#fff",
+      fontSize: 10,
+    },
+    axisTick: {
+      show: false,
+    },
+    data: [
+      "00:00",
+      "01:00",
+      "02:00",
+      "03:00",
+      "04:00",
+      "05:00",
+      "06:00",
+      "07:00",
+      "08:00",
+      "09:00",
+      "10:00",
+      "11:00",
+      "12:00",
+      "13:00",
+      "14:00",
+      "15:00",
+      "16:00",
+      "17:00",
+      "18:00",
+      "19:00",
+      "20:00",
+      "21:00",
+      "22:00",
+      "23:00",
+    ],
+  },
+  yAxis: {
+    type: "value",
+    min: 0,
+    max: 40,
+    minInterval: 1,
+    nameTextStyle: {
+      fontSize: 10,
+      color: "#fff",
+      align: "center",
+    },
+    splitLine: {
+      lineStyle: {
+        color: "rgba(255, 255, 255, 0.15)",
+        // type: 'dashed', // dotted 虚线
       },
+    },
+    splitArea: { show: false },
+    axisLine: {
+      show: false,
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      fontSize: 10,
+      fontFamily: "Bebas",
+      color: "#fff",
+    },
+  },
+  series: [
+    {
+      type: "line",
+      // symbol: "none",
+      showSymbol: false,
+      smooth: true, // 是否曲线
+      name: "实时数据", // 图例对应类别
       data: [
-         "00:00",
-         "01:00",
-         "02:00",
-         "03:00",
-         "04:00",
-         "05:00",
-         "06:00",
-         "07:00",
-         "08:00",
-         "09:00",
-         "10:00",
-         "11:00",
-         "12:00",
-         "13:00",
-         "14:00",
-         "15:00",
-         "16:00",
-         "17:00",
-         "18:00",
-         "19:00",
-         "20:00",
-         "21:00",
-         "22:00",
-         "23:00",
-      ],
-   },
-   yAxis: {
-      type: "value",
-      min: 0,
-      max:40,
-      minInterval: 1,
-      nameTextStyle: {
-         fontSize: 12,
-         color: "#BDD8FB",
-         align: "center",
-      },
-      splitLine: {
-         lineStyle: {
-            color: "rgba(255, 255, 255, 0.15)",
-            // type: 'dashed', // dotted 虚线
-         },
+        12, 12, 23, 23, 30, 12, 26, 28, 31, 23, 25, 12, 18, 18, 18, 18, 23, 21,
+        20, 20, 20, 20, 20, 22, 22, 12, 12, 12,
+      ], // 纵坐标数据
+      lineStyle: {
+        color: "#FFD15C",
       },
-      splitArea: { show: false },
-      axisLine: {
-         show: false,
-      },
-      axisTick: {
-         show: false,
-      },
-      axisLabel: {
-         fontSize: 12,
-         fontFamily: "Bebas",
-         color: "#BDD8FB",
-      },
-   },
-   series: [
-      {
-         type: "line",
-         // symbol: "none",
-         showSymbol: false,
-         smooth: true, // 是否曲线
-         name: "实时数据", // 图例对应类别
-         data: [12, 12, 23, 23, 30, 12, 26,28, 31, 23, 25, 12, 18, 18,18, 18, 23, 21, 20, 20, 20,20, 20, 22, 22, 12, 12, 12], // 纵坐标数据
-         lineStyle :{
-            color:"#FFD15C"
-         },
-         areaStyle: {
-            // 区域颜色
-            // color: new graphic.LinearGradient(0, 0, 0, 1, [
-            // 	{
-            // 		offset: 0,
-            // 		color: "#5090FF",
-            // 	},
-            // 	{
-            // 		offset: 1,
-            // 		color: "#1057E5",
-            // 	},
-            // ]),
-            color: {
-               type: 'linear',
-               x: 0,  //右
-               y: 0,  //下
-               x2: 0,  //左
-               y2: 1,  //上
-               colorStops: [
-                  {
-                     offset: 0.1,
-                     color: '#FFD15C99' // 0% 处的颜色
-                  },
-                  {
-                     offset: 1,
-                     opacity:0.01,
-                     color: '#FFD15C01' // 100% 处的颜色
-                  }
-               ]
+      areaStyle: {
+        // 区域颜色
+        // color: new graphic.LinearGradient(0, 0, 0, 1, [
+        // 	{
+        // 		offset: 0,
+        // 		color: "#5090FF",
+        // 	},
+        // 	{
+        // 		offset: 1,
+        // 		color: "#1057E5",
+        // 	},
+        // ]),
+        color: {
+          type: "linear",
+          x: 0, //右
+          y: 0, //下
+          x2: 0, //左
+          y2: 1, //上
+          colorStops: [
+            {
+              offset: 0.1,
+              color: "#FFD15C99", // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              opacity: 0.01,
+              color: "#FFD15C01", // 100% 处的颜色
             },
-         },
+          ],
+        },
       },
-     
-   ],
+    },
+  ],
 };
 
-export default options;
\ No newline at end of file
+export default options;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/assets/charts.js
index ab037e02..8a1feaa5 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/assets/charts.js
@@ -1,154 +1,156 @@
 import * as echarts from "echarts";
 var options = {
-
-   color: ["#5090FF", "#01B3E4"],
-   tooltip: {
-      trigger: "axis",
-      backgroundColor: "rgba(0,0,0,.6)",
-      borderColor: "rgba(147, 235, 248, .8)",
-      textStyle: {
-         color: "#FFF",
-      },
-   },
-   grid: {
-      left: "2%",
-      right: "5%",
-      bottom: "10%",
-      top: "10%",
-      containLabel: true,
-   },
-   legend: {
-      icon: 'rect',
-      top: '0%',
-      right: '5%',
-      data: ['实时数据'],
-      itemWidth:18,
-      itemHeight: 5,
-      itemGap: 30,
-      textStyle: {
-        fontSize: 12,
-        color: '#C9D2FA',
-        padding: [0, 0, 0, 10],
-      },
-   },
-   xAxis: {
-      type: "category",
-      axisLine: {
-         lineStyle: {
-            color: "#BDD8FB",
-            fontSize: 12,
-         },
+  color: "#0783FA",
+  tooltip: {
+    show: true,
+    trigger: "axis",
+    // backgroundColor: "rgba(0,0,0,.6)",
+    // borderColor: "rgba(147, 235, 248, .8)",
+    // textStyle: {
+    //    color: "#FFF",
+    // },
+  },
+  grid: {
+    left: "2%",
+    right: "5%",
+    bottom: "10%",
+    top: "10%",
+    containLabel: true,
+  },
+  legend: {
+    icon: "rect",
+    top: "0%",
+    right: "5%",
+    data: ["实时数据"],
+    itemWidth: 18,
+    itemHeight: 5,
+    itemGap: 30,
+    textStyle: {
+      fontSize: 10,
+      color: "#fff",
+      padding: [0, 0, 0, 10],
+    },
+  },
+  xAxis: {
+    type: "category",
+    axisLine: {
+      lineStyle: {
+        color: "#0783FA",
+        fontSize: 10,
       },
-      axisLabel: {
-         // interval:0,
-         color: "#BDD8FB",
-         fontSize: 12,
-      },
-      axisTick: {
-         show: false,
+    },
+    axisLabel: {
+      // interval:0,
+      color: "#fff",
+      fontSize: 10,
+    },
+    axisTick: {
+      show: false,
+    },
+    data: [
+      "00:00",
+      "01:00",
+      "02:00",
+      "03:00",
+      "04:00",
+      "05:00",
+      "06:00",
+      "07:00",
+      "08:00",
+      "09:00",
+      "10:00",
+      "11:00",
+      "12:00",
+      "13:00",
+      "14:00",
+      "15:00",
+      "16:00",
+      "17:00",
+      "18:00",
+      "19:00",
+      "20:00",
+      "21:00",
+      "22:00",
+      "23:00",
+    ],
+  },
+  yAxis: {
+    type: "value",
+    min: 0,
+    max: 40,
+    minInterval: 5,
+    splitNumber: 5,
+    nameTextStyle: {
+      fontSize: 12,
+      color: "#BDD8FB",
+      align: "center",
+    },
+    splitLine: {
+      lineStyle: {
+        color: "rgba(255, 255, 255, 0.15)",
+        // type: 'dashed', // dotted 虚线
       },
+    },
+    splitArea: { show: false },
+    axisLine: {
+      show: false,
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      fontSize: 10,
+      fontFamily: "Bebas",
+      color: "#fff",
+    },
+  },
+  series: [
+    {
+      type: "line",
+      // symbol: "none",
+      showSymbol: false,
+      smooth: true, // 是否曲线
+      name: "实时数据", // 图例对应类别
       data: [
-         "00:00",
-         "01:00",
-         "02:00",
-         "03:00",
-         "04:00",
-         "05:00",
-         "06:00",
-         "07:00",
-         "08:00",
-         "09:00",
-         "10:00",
-         "11:00",
-         "12:00",
-         "13:00",
-         "14:00",
-         "15:00",
-         "16:00",
-         "17:00",
-         "18:00",
-         "19:00",
-         "20:00",
-         "21:00",
-         "22:00",
-         "23:00",
-      ],
-   },
-   yAxis: {
-      type: "value",
-      min: 0,
-      max:40,
-      minInterval: 5,
-      splitNumber:5,
-      nameTextStyle: {
-         fontSize: 12,
-         color: "#BDD8FB",
-         align: "center",
-      },
-      splitLine: {
-         lineStyle: {
-            color: "rgba(255, 255, 255, 0.15)",
-            // type: 'dashed', // dotted 虚线
-         },
+        12, 12, 23, 23, 30, 12, 26, 28, 31, 23, 25, 12, 18, 18, 18, 18, 23, 21,
+        20, 20, 20, 20, 20, 22, 22, 12, 12, 12,
+      ], // 纵坐标数据
+      lineStyle: {
+        color: "#0783FA",
       },
-      splitArea: { show: false },
-      axisLine: {
-         show: false,
-      },
-      axisTick: {
-         show: false,
-      },
-      axisLabel: {
-         fontSize: 12,
-         fontFamily: "Bebas",
-         color: "#BDD8FB",
-      },
-   },
-   series: [
-      {
-         type: "line",
-         // symbol: "none",
-         showSymbol: false,
-         smooth: true, // 是否曲线
-         name: "实时数据", // 图例对应类别
-         data: [12, 12, 23, 23, 30, 12, 26,28, 31, 23, 25, 12, 18, 18,18, 18, 23, 21, 20, 20, 20,20, 20, 22, 22, 12, 12, 12], // 纵坐标数据
-         lineStyle :{
-            color:"#0783FA"
-         },
-         areaStyle: {
-            // 区域颜色
-            // color: new graphic.LinearGradient(0, 0, 0, 1, [
-            // 	{
-            // 		offset: 0,
-            // 		color: "#5090FF",
-            // 	},
-            // 	{
-            // 		offset: 1,
-            // 		color: "#1057E5",
-            // 	},
-            // ]),
-            color: {
-               type: 'linear',
-               x: 0,  //右
-               y: 0,  //下
-               x2: 0,  //左
-               y2: 1,  //上
-               colorStops: [
-                  {
-                     offset: 0.1,
-                     color: '#0783FA99' // 0% 处的颜色
-                  },
-                  {
-                     offset: 1,
-                     opacity:0.01,
-                     color: '#0783FA01' // 100% 处的颜色
-                  }
-               ]
+      areaStyle: {
+        // 区域颜色
+        // color: new graphic.LinearGradient(0, 0, 0, 1, [
+        // 	{
+        // 		offset: 0,
+        // 		color: "#5090FF",
+        // 	},
+        // 	{
+        // 		offset: 1,
+        // 		color: "#1057E5",
+        // 	},
+        // ]),
+        color: {
+          type: "linear",
+          x: 0, //右
+          y: 0, //下
+          x2: 0, //左
+          y2: 1, //上
+          colorStops: [
+            {
+              offset: 0.1,
+              color: "#0783FA99", // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              opacity: 0.01,
+              color: "#0783FA01", // 100% 处的颜色
             },
-         },
+          ],
+        },
       },
-     
-   ],
+    },
+  ],
 };
 
-export default options;
\ No newline at end of file
+export default options;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/index.vue
index 892bfa02..3018ad04 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class='classification'>
+  <div class="classification">
     <WgtTitle :title="'全路车流量状况'"></WgtTitle>
     <div class="board">
       <!-- <div v-for="(item, index) in list" class="list">
@@ -14,65 +14,85 @@
             </div>
           </div>
       </div> -->
-      <div id="classification" class="keep-ratio" >
-
-      </div>
+      <div id="classification" class="keep-ratio"></div>
     </div>
   </div>
 </template>
 
 <script>
-
 import * as echarts from "echarts";
-import WgtTitle from '../../../widgets/title'
+import WgtTitle from "../../../widgets/title";
 import chartsStatistics from "./assets/charts";
 
-const drawRoundRect = ( ctx, x, y, width, height, radius ) => {   
-  // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 
-	ctx.beginPath();    
-	ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);    
-	ctx.lineTo(width - radius + x, y);    
-	ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);    
-	ctx.lineTo(width + x, height + y - radius);    
-	ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);    
-	ctx.lineTo(radius + x, height +y);    
-	ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);    
-	ctx.closePath();    
+const drawRoundRect = (ctx, x, y, width, height, radius) => {
+  // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度
+  ctx.beginPath();
+  ctx.arc(x + radius, y + radius, radius, Math.PI, (Math.PI * 3) / 2);
+  ctx.lineTo(width - radius + x, y);
+  ctx.arc(
+    width - radius + x,
+    radius + y,
+    radius,
+    (Math.PI * 3) / 2,
+    Math.PI * 2
+  );
+  ctx.lineTo(width + x, height + y - radius);
+  ctx.arc(
+    width - radius + x,
+    height - radius + y,
+    radius,
+    0,
+    (Math.PI * 1) / 2
+  );
+  ctx.lineTo(radius + x, height + y);
+  ctx.arc(radius + x, height - radius + y, radius, (Math.PI * 1) / 2, Math.PI);
+  ctx.closePath();
   //ctx.stroke();
-  ctx.fill()
-}
+  ctx.fill();
+};
 
 export default {
-  name: 'Classification',
+  name: "Classification",
   components: {
-    WgtTitle
+    WgtTitle,
   },
   data() {
     return {
-      list:[
-        {label:'客车',value:63,detail:[
-          { color:"#FF5A62", label: '客1', value: '13456', perce: '34.2' },
-          { color:"#23E7B2",label: '客2', value: '13456', perce: '34.2' },
-          { color:"#0294FF",label: '客3', value: '13456', perce: '34.2' },
-          ]
-        }, {label:'货车',value:63,detail:[
-          { color:"#FF5A62",label: '货1', value: '13456', perce: '34.2' },
-          { color:"#23E7B2",label: '货2', value: '13456', perce: '34.2' },
-          { color:"#0294FF",label: '货3', value: '13456', perce: '34.2' },
-          ]
-        }, {label:'专车',value:63,detail:[
-          { color:"#FF5A62",label: '专1', value: '13456', perce: '34.2' },
-          { color:"#23E7B2",label: '专2', value: '13456', perce: '34.2' },
-          { color:"#0294FF",label: '专3', value: '13456', perce: '34.2' },
-          ]
-        }
-      ]
-    }
+      list: [
+        {
+          label: "客车",
+          value: 63,
+          detail: [
+            { color: "#FF5A62", label: "客1", value: "13456", perce: "34.2" },
+            { color: "#23E7B2", label: "客2", value: "13456", perce: "34.2" },
+            { color: "#0294FF", label: "客3", value: "13456", perce: "34.2" },
+          ],
+        },
+        {
+          label: "货车",
+          value: 63,
+          detail: [
+            { color: "#FF5A62", label: "货1", value: "13456", perce: "34.2" },
+            { color: "#23E7B2", label: "货2", value: "13456", perce: "34.2" },
+            { color: "#0294FF", label: "货3", value: "13456", perce: "34.2" },
+          ],
+        },
+        {
+          label: "专车",
+          value: 63,
+          detail: [
+            { color: "#FF5A62", label: "专1", value: "13456", perce: "34.2" },
+            { color: "#23E7B2", label: "专2", value: "13456", perce: "34.2" },
+            { color: "#0294FF", label: "专3", value: "13456", perce: "34.2" },
+          ],
+        },
+      ],
+    };
   },
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-        var myChart0 = echarts.init(document.getElementById('classification'));
+        var myChart0 = echarts.init(document.getElementById("classification"));
         myChart0.setOption(chartsStatistics);
         // var myChart1 = echarts.init(document.getElementById('busEchartBox1'));
         // myChart1.setOption(chartsStatistics);
@@ -80,40 +100,35 @@ export default {
         // myChart2.setOption(chartsStatistics);
 
         const domMap = document.getElementById("classification");
-        let parentDiv = domMap.firstChild; 
+        let parentDiv = domMap.firstChild;
         // 创建canvas
-        let canvas = document.createElement('canvas');
+        let canvas = document.createElement("canvas");
         canvas.width = parentDiv.offsetWidth;
-        canvas.height =parentDiv.offsetHeight;
+        canvas.height = parentDiv.offsetHeight;
         parentDiv.appendChild(canvas);
-        const context = canvas.getContext('2d'); 
-        
+        const context = canvas.getContext("2d");
+
         // 填充渐变颜色
         var gr = context.createLinearGradient(247, 63, 450, 0);
         // 颜色断点
-        gr.addColorStop(1, 'rgba(92,197,255,0)');
-        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
-        context.fillStyle = gr
-      
+        gr.addColorStop(1, "rgba(92,197,255,0)");
+        gr.addColorStop(0, "rgba(92,197,255,0.5)");
+        context.fillStyle = gr;
+
         context.lineWidth = 1; // 设置线段宽度
-      
-        for (var i = 0;i < 8;i++)
-        // 绘制圆角矩形
-        drawRoundRect(context, 340, 50 + 34 * i, 300, 24, 12)
-        
+
+        for (var i = 0; i < 8; i++)
+          // 绘制圆角矩形
+          drawRoundRect(context, 340, 50 + 34 * i, 300, 24, 12);
       });
     });
   },
-  created() {
-
-  },
-  methods: {
-
-  }
-}
+  created() {},
+  methods: {},
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .classification {
   width: 100%;
   height: 100%;
@@ -122,24 +137,28 @@ export default {
     height: 400px;
     width: 100%;
     padding: 0px 30px;
-    background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+    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;
+    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;
 
     #classification {
       display: inline-flex;
-      width:100%;
-      height:350px;
-
+      width: 100%;
+      height: 350px;
     }
 
     .title {
-      background:url('./assets/bg.png') no-repeat;
+      background: url("./assets/bg.png") no-repeat;
       background-size: 100% 100%;
       width: 209px;
       height: 30px;
@@ -147,34 +166,34 @@ export default {
       line-height: 30px;
     }
   }
-  .list{
+  .list {
     display: flex;
-    justify-content:center;
+    justify-content: center;
     align-items: center;
     flex-direction: column;
   }
-  .charts{
-    height:164px;
+  .charts {
+    height: 164px;
     width: 164px;
-
   }
-  .detail{
-    width:100%;
+  .detail {
+    width: 100%;
   }
-  .detailItem{
+  .detailItem {
     display: flex;
     align-items: center;
     font-size: 14px;
     letter-spacing: 2px;
   }
-  .detailItem span{
-    color: #37E7FF;
+  .detailItem span {
+    color: #37e7ff;
   }
-  .tag{
-    background-color: #FF5A62;
+  .tag {
+    background-color: #ff5a62;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     margin-right: 5px;
   }
-}</style>
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js
index c58d59a9..a2ed2068 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js
@@ -87,7 +87,7 @@ var options = {
   ],
   yAxis: [
     {
-      name: "车流量",
+      name: "车流量          ",
       type: "value",
       // max: 300,
       interval: 50,
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/index.vue
index 0a55d39a..9a8cb58c 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/index.vue
@@ -90,6 +90,7 @@ export default {
       text-align: center;
       background-color: #00b3cc;
       margin-right: 10px;
+      cursor: pointer;
     }
     .checked {
       background-color: #c87800 !important;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js
new file mode 100644
index 00000000..50857170
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js
@@ -0,0 +1,79 @@
+import * as echarts from "echarts";
+let options = {
+  legend: {
+    show: false,
+  },
+  radar: [
+    {
+      indicator: [
+        { text: "Indicator1" },
+        { text: "Indicator2" },
+        { text: "Indicator3" },
+      ],
+      center: ["50%", "55%"],
+      radius: 70,
+      startAngle: 90,
+      splitNumber: 4,
+      shape: "circle",
+      axisName: {
+        formatter: "{value}",
+        color: "#428BD4",
+      },
+      splitArea: {
+        areaStyle: {
+          color: ["#0987CD", "#0A7BB9", "#0B6A9C", "#0D5173"],
+          // opacity: 0.3,
+        },
+      },
+      axisLine: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+    },
+  ],
+  series: [
+    {
+      type: "radar",
+      color: "#07A3FB",
+      emphasis: { show: false },
+      symbol: "none",
+      lineStyle: {
+        show: false,
+        color: "none",
+      },
+      data: [
+        {
+          value: [1, 5, 1],
+          name: "Data B",
+          areaStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0.1,
+                  color: "#DC6A00", // 0% 处的颜色
+                },
+                {
+                  offset: 0.5,
+                  color: "#5D887C", // 100% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: "#099CCD", // 100% 处的颜色
+                },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+        },
+      ],
+    },
+  ],
+};
+export default options;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
index 3bb0a50a..e627ceb3 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
@@ -158,6 +158,7 @@ import * as echarts from "echarts";
 import chart1 from "./assets/charts";
 import chart2 from "./assets/charts2";
 import chart3 from "./assets/charts3";
+import chartsRadar from "./assets/chartsRadar";
 import ElQuarterPicker from "./ElQuarterPicker";
 
 const drawRoundRect = (ctx, x, y, width, height, radius, gr) => {
@@ -345,9 +346,9 @@ export default {
         var myChart1 = echarts.init(document.getElementById("chart1"));
         myChart1.setOption(chart1);
         var myChart2 = echarts.init(document.getElementById("chart2"));
-        myChart2.setOption(chart2);
+        myChart2.setOption(chartsRadar);
         var myChart3 = echarts.init(document.getElementById("chart3"));
-        myChart3.setOption(chart2);
+        myChart3.setOption(chartsRadar);
 
         const domMap = document.getElementById("chart2");
         let parentDiv = domMap.firstChild;