From 1772b34c2dcedc237028070b65c31aaa37195900 Mon Sep 17 00:00:00 2001
From: zhangzhang <1747194829@qq.com>
Date: Wed, 27 Mar 2024 18:15:30 +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

---
 .../channelAnalytics/assets/charts.js         |   2 +
 .../components/eventQuery/index.vue           | 297 +++++++++++++-----
 2 files changed, 213 insertions(+), 86 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts.js
index aafb53e0..9812ee09 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts.js
@@ -106,6 +106,8 @@ var options = {
     },
     type: "scroll",
     pageButtonPosition: "end",
+    // animation: true,
+    // animationDurationUpdate: 8000,
   },
   series: [
     /** 饼图上刻度 */
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 a76ffbdc..21ceab64 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,35 +1,87 @@
 <template>
   <div class="congestion">
     <div class="condition">
-      <ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectIndex"
-        :reset="reset" />
+      <ProgressBar
+        class="keep-ratio"
+        @selectItem="selectProgress"
+        :dataList="dataList"
+        :selectIndex="selectIndex"
+        :reset="reset"
+      />
       <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="请选择" @change="changeType">
-          <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="请选择"
+          @change="changeType"
+        >
+          <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>
 
@@ -37,7 +89,11 @@
       <div>
         <WgtTitle :title="'感知事件趋势分析'"></WgtTitle>
         <div class="unit_con">
-          <Empty v-if="!chart1List || chart1List.length <= 0" text="暂无数据..." class="empty"></Empty>
+          <Empty
+            v-if="!chart1List || chart1List.length <= 0"
+            text="暂无数据..."
+            class="empty"
+          ></Empty>
           <div v-else id="chart1" class="chart_div"></div>
         </div>
       </div>
@@ -45,15 +101,27 @@
       <div>
         <WgtTitle :title="'感知事件类型分析'"></WgtTitle>
         <div class="unit_con unit_con_02">
-          <Empty v-show="!chart2List || chart2List.length <= 0" text="暂无数据..." class="empty"></Empty>
-          <div ref="chart2" class="chart_div" style="width: 540px; height: 270px;" ></div>
+          <Empty
+            v-show="!chart2List || chart2List.length <= 0"
+            text="暂无数据..."
+            class="empty"
+          ></Empty>
+          <div
+            ref="chart2"
+            class="chart_div"
+            style="width: 540px; height: 270px"
+          ></div>
         </div>
       </div>
 
       <div>
         <WgtTitle :title="'桩号范围内事件分析趋势'"></WgtTitle>
         <div class="unit_con">
-          <Empty v-show="!chart3List || chart3List.length <= 0" text="暂无数据..." class="empty"></Empty>
+          <Empty
+            v-show="!chart3List || chart3List.length <= 0"
+            text="暂无数据..."
+            class="empty"
+          ></Empty>
           <div id="chart3" class="chart_div"></div>
         </div>
       </div>
@@ -117,7 +185,7 @@ export default {
   },
   data() {
     return {
-      canvas:null,
+      canvas: null,
       typeOptions: [
         {
           value: "year",
@@ -211,7 +279,7 @@ export default {
       ],
     };
   },
-  created() { },
+  created() {},
   methods: {
     selectProgress(item, index) {
       this.selectIndex = index;
@@ -232,7 +300,6 @@ export default {
       let startTime = "";
       let qType = this.type == "date" ? "day" : this.type;
       if (this.type == "quarter") {
-        console.log("dateTime", this.quarter);
         // let year = moment().year();
         // if (this.quarter == 1) {
         //   startTime = `${year}-01-01 00:00:00`
@@ -246,7 +313,6 @@ export default {
       } else {
         startTime = moment(this.dateTime).format("YYYY-MM-DD HH:mm:ss");
       }
-      console.log("startTime", startTime);
 
       //感知事件趋势
       getWarningTrend({
@@ -361,7 +427,7 @@ export default {
         }
         this.$nextTick(() => {
           this.initChart1();
-        })
+        });
       });
 
       //感知事件类型分析
@@ -377,7 +443,7 @@ export default {
         if (res.code == 200) {
           let numbers = [];
           this.chart2List = res.data;
-          let data = res.data.warningTypeList ;
+          let data = res.data.warningTypeList;
           let total = res.data.total;
 
           data.forEach((it) => {
@@ -403,6 +469,7 @@ export default {
               "{b|" + ((target / total) * 100).toFixed(2) + "%}  ",
               "{c|" + target + "起}",
             ];
+
             return arr.join(" ");
           };
 
@@ -410,6 +477,12 @@ export default {
           chart2.title.subtext = "类型分析";
 
           chart2.series[0].data = numbers;
+          chart2.tooltip = {
+            confine: true,
+            valueFormatter: function (value) {
+              return value + " 起";
+            },
+          };
           // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
           // this.myChart2.on('mouseover', (params) => {
           //   if (params.componentType == 'graphic') {
@@ -430,7 +503,7 @@ export default {
         }
         this.$nextTick(() => {
           this.initChart2(types);
-        })
+        });
       });
       //路段范围内桩号分布
       getSectionMarkNumber({
@@ -502,7 +575,7 @@ export default {
         }
         this.$nextTick(() => {
           this.initChart3();
-        })
+        });
       });
       // if (this.type == "day")
       //   this.type = "date";
@@ -512,15 +585,15 @@ export default {
         this.dateTime = moment(new Date()).format("YYYY-MM-DD");
       }
     },
-    initChart1(){
-    this.myChart1 = echarts.init(document.getElementById("chart1"));
-    this.myChart1.setOption(chart1);
-  },
-  initChart3(){
-    this.myChart3 = echarts.init(document.getElementById("chart3"));
-    this.myChart3.setOption(chart3);
-  },
-  generateChart2(){
+    initChart1() {
+      this.myChart1 = echarts.init(document.getElementById("chart1"));
+      this.myChart1.setOption(chart1);
+    },
+    initChart3() {
+      this.myChart3 = echarts.init(document.getElementById("chart3"));
+      this.myChart3.setOption(chart3);
+    },
+    generateChart2() {
       let ele = this.$refs["chart2"];
       this.myChart2 = echarts.init(ele);
       let parentDiv = ele.firstChild;
@@ -528,34 +601,38 @@ export default {
       this.canvasChart2.width = parentDiv.offsetWidth;
       this.canvasChart2.height = parentDiv.offsetHeight;
       parentDiv.appendChild(this.canvasChart2);
-  },
-  initChart2(){
-      if(!this.myChart2){
+    },
+    initChart2() {
+      if (!this.myChart2) {
         this.generateChart2();
       }
       let ele = this.$refs["chart2"];
-        this.myChart2.setOption(chart2);
-
-        const context = this.canvasChart2.getContext('2d')
-        context.clearRect(0, 0, this.canvasChart2.width, this.canvasChart2.height); // 清空画布
-        
-        context.lineWidth = 1; // 设置线段宽度
-        let total = chart2.legend.data.length;
-        for(let i=0; i<total; i++){
-          let unitH = 32;
-          let h = ele.offsetHeight;
-          let x = 330;
-          let y = (h - total*unitH)/2 + 3 + i*unitH;
-          var gr = context.createLinearGradient(330, 0, 500, 0);
-          gr.addColorStop(0, "rgba(92,197,255,0.6)");
-          gr.addColorStop(1, "rgba(92,197,255,0)");
-          drawRoundRect(context, x, y, 220, 24, 12, gr);
-        }
-  },
+      this.myChart2.setOption(chart2);
+
+      const context = this.canvasChart2.getContext("2d");
+      context.clearRect(
+        0,
+        0,
+        this.canvasChart2.width,
+        this.canvasChart2.height
+      ); // 清空画布
+
+      context.lineWidth = 1; // 设置线段宽度
+      let total = chart2.legend.data.length;
+      for (let i = 0; i < total; i++) {
+        let unitH = 32;
+        let h = ele.offsetHeight;
+        let x = 330;
+        let y = (h - total * unitH) / 2 + 3 + i * unitH;
+        var gr = context.createLinearGradient(330, 0, 500, 0);
+        gr.addColorStop(0, "rgba(92,197,255,0.6)");
+        gr.addColorStop(1, "rgba(92,197,255,0)");
+        drawRoundRect(context, x, y, 220, 24, 12, gr);
+      }
+    },
   },
   mounted() {
     getRoadSectionList().then((res) => {
-      console.log(res);
       if (res.code == 200) {
         let rows = res.data;
         this.dataList = [];
@@ -572,12 +649,10 @@ export default {
             id: rows[rows.length - 1].id,
           });
         }
-        console.log("dataList", this.dataList);
       }
       this.searchQuery();
     });
-
-  }
+  },
 };
 </script>
 
@@ -592,15 +667,20 @@ export default {
     align-items: stretch;
     font-size: 14px;
 
-    >div {
+    > div {
       flex: 1;
-      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,
+      border-image: linear-gradient(
+          360deg,
           rgba(55, 231, 255, 0.3),
-          rgba(55, 231, 255, 0)) 1 1;
+          rgba(55, 231, 255, 0)
+        )
+        1 1;
       display: flex;
       flex-direction: column;
       align-items: stretch;
@@ -613,10 +693,13 @@ export default {
 
     .unit_con {
       flex: 1;
-      height: 0; padding: 0;
-      margin: 95px 20px 30px; position: relative;
+      height: 0;
+      padding: 0;
+      margin: 95px 20px 30px;
+      position: relative;
       // &.unit_con_02{ margin: 105px 0px 20px; }
-      display: flex; align-items: center;
+      display: flex;
+      align-items: center;
     }
 
     .empty {
@@ -625,7 +708,7 @@ export default {
 
     .chart_div {
       width: 100%;
-      height:200px;
+      height: 200px;
     }
   }
 
@@ -717,12 +800,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 {
+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>