更改

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: [
     /** 饼图上刻度 */

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"
+      <ProgressBar
-        :reset="reset" />
+        class="keep-ratio"
+        @selectItem="selectProgress"
+        :dataList="dataList"
+        :selectIndex="selectIndex"
+        :reset="reset"
+      />
       <div class="searchPanel">
-        <RadioGroup :options="[
+        <RadioGroup
-        { key: '1', label: '菏泽' },
+          :options="[
-        { key: '3', label: '济南' },
+            { key: '1', label: '菏泽' },
-      ]" v-model="direction" type="button" />
+            { key: '3', label: '济南' },
-        <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">
+          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-select
-          <el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value"
+          v-model="quarter"
-            style="width: 140px">
+          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"
+        <el-date-picker
-          :type="type == 'date'
+          size="mini"
-        ? 'date'
+          v-if="type != 'quarter'"
-        : type == 'month'
+          class="selectRoad"
-          ? 'month'
+          v-model="dateTime"
-          : type == 'year'
+          style="width: 140px"
-            ? 'year'
+          :type="
-            : ''
+            type == 'date'
-        " placeholder="请选择" :clearable="false" />
+              ? 'date'
-
+              : type == 'month'
-        <el-button type="primary" size="mini" class="btnSearch" @click="searchQuery"
+              ? 'month'
-          icon="el-icon-search">查询</el-button>
+              : type == 'year'
-        <el-button class="btnReset" size="mini" icon="el-icon-refresh-left" @click="onReset">重置</el-button>
+              ? '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>
+          <Empty
-          <div ref="chart2" class="chart_div" style="width: 540px; height: 270px;" ></div>
+            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(){
+    initChart1() {
-    this.myChart1 = echarts.init(document.getElementById("chart1"));
+      this.myChart1 = echarts.init(document.getElementById("chart1"));
-    this.myChart1.setOption(chart1);
+      this.myChart1.setOption(chart1);
-  },
+    },
-  initChart3(){
+    initChart3() {
-    this.myChart3 = echarts.init(document.getElementById("chart3"));
+      this.myChart3 = echarts.init(document.getElementById("chart3"));
-    this.myChart3.setOption(chart3);
+      this.myChart3.setOption(chart3);
-  },
+    },
-  generateChart2(){
+    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(){
+    initChart2() {
-      if(!this.myChart2){
+      if (!this.myChart2) {
         this.generateChart2();
       }
       let ele = this.$refs["chart2"];
-        this.myChart2.setOption(chart2);
+      this.myChart2.setOption(chart2);
-
+
-        const context = this.canvasChart2.getContext('2d')
+      const context = this.canvasChart2.getContext("2d");
-        context.clearRect(0, 0, this.canvasChart2.width, this.canvasChart2.height); // 清空画布
+      context.clearRect(
-        
+        0,
-        context.lineWidth = 1; // 设置线段宽度
+        0,
-        let total = chart2.legend.data.length;
+        this.canvasChart2.width,
-        for(let i=0; i<total; i++){
+        this.canvasChart2.height
-          let unitH = 32;
+      ); // 清空画布
-          let h = ele.offsetHeight;
+
-          let x = 330;
+      context.lineWidth = 1; // 设置线段宽度
-          let y = (h - total*unitH)/2 + 3 + i*unitH;
+      let total = chart2.legend.data.length;
-          var gr = context.createLinearGradient(330, 0, 500, 0);
+      for (let i = 0; i < total; i++) {
-          gr.addColorStop(0, "rgba(92,197,255,0.6)");
+        let unitH = 32;
-          gr.addColorStop(1, "rgba(92,197,255,0)");
+        let h = ele.offsetHeight;
-          drawRoundRect(context, x, y, 220, 24, 12, gr);
+        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,
+      background: linear-gradient(
-          rgba(6, 66, 88, 0.2) 0%,
+        180deg,
-          #064258 100%);
+        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;
+      height: 0;
-      margin: 95px 20px 30px; position: relative;
+      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-popover:has(> .el-date-picker) div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell,
+  div
-div.el-picker-panel.el-date-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today span,
+  .el-picker-panel__body
-div.el-picker-panel.el-date-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell,
+  .el-picker-panel__content
-div.el-picker-panel.el-date-range-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today span,
+  table
-div.el-picker-panel.el-date-range-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell {
+  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>