提交最新代码，charts修改

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

@@ -68,8 +68,6 @@ var options = {
    yAxis: [{
       type: 'value',
       name: "",
-      max: 1000,
-      min:0,
       splitNumber:5,
       nameTextStyle: {
          color: '#B6E6FF',

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

@@ -64,6 +64,8 @@ let data = [{
     });
     pieData1.push(gapData);
  }
+
+ console.log(pieData1);
  var options = {
     tooltip: {
        confine: true,
@@ -74,7 +76,7 @@ let data = [{
     title:{   //圆环中间内容
        text: '100%',
        subtext: '类型分析',
-       left:"18%",
+       left:"19%",
        top:"40%",
        textStyle:{
           color:"#fff",

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

@@ -94,7 +94,7 @@
            label: '月'
         },
         {
-            value: 'day',
+            value: 'date',
            label: '日'
         },
         {
@@ -183,49 +183,260 @@
       },
       searchQuery(){
         let dateTime = this.dateTime;
+        var quarter = 0;
         if ( this.year == "year") {
           dateTime = new Date(dateTime);
-          dateTime = dateTime.getFullYear();
+          dateTime = dateTime.getFullYear() + "-01-01 00:00:00";
           console.log(dateTime);
         }
         if ( this.year == "month") {
           dateTime = new Date(dateTime);
           let m = dateTime.getMonth()+1;
           m = m < 10?"0"+m:m;
-          dateTime = dateTime.getFullYear() + "-" + m +"-00 00:00:00";
+          dateTime = dateTime.getFullYear() + "-" + m +"-01 00:00:00";
           console.log(dateTime);
         }
+        if ( this.year == "quarter" ) {
+          console.log(dateTime);
+          dateTime = new Date(dateTime);
+          let m = dateTime.getMonth()+1;
+          if ( m == 1) m = 1;
+          if ( m == 2) m = 4;
+          if ( m == 3) m = 7;
+          if ( m == 4) m = 10;
+
+          quarter = m;
+          m = m < 10?"0"+m:m;
+          dateTime = dateTime.getFullYear() + "-" + m +"-01 00:00:00";
+          console.log(dateTime);
+        }
+
+        if ( this.year == "date"  ) {
+          this.year = "day";
+          dateTime = new Date(dateTime);
+          let m = dateTime.getMonth()+1;
+          m = m < 10?"0"+m:m;
+          let d = dateTime.getDate();
+          d = d < 10?"0"+d:d;
+          dateTime = dateTime.getFullYear() + "-" + m +"-"+d+" 00:00:00";
+        }
+
         //感知事件趋势
         getWarningTrend({
             "type": this.year,
             "sectionId": this.selectId,
             "createTime": dateTime,
+            "direction":1,
         }).then(res=>{
           console.log(res);
           chart1.series[0].data = [];
+          if ( res.code == 200 ) {
+            let data = res.data;
+            if ( this.year == "year" ) {
+              let years = [];
+              let numbers = [];
+              data.forEach(it=>{
+                years.push(it.month+"月");
+                numbers.push(it.number);
+              })
+              chart1.xAxis.data = years;
+              chart1.series[0].data = numbers;
+            }
+
+            if ( this.year == "month" ) {
+              let months = [];
+              let numbers = [];
+              data.forEach(it=>{
+                months.push(it.day.split("-")[2]+"日");
+                numbers.push(it.number);
+              })
+              chart1.xAxis.data = months;
+              chart1.series[0].data = numbers;
+            }
+
+            if ( this.year == "day" ) {
+              let times = [];
+              let numbers = [];
+              data.forEach(it=>{
+                times.push(it.time.split(" ")[1]+"小时");
+                numbers.push(it.number);
+              })
+              chart1.xAxis.data = times;
+              chart1.series[0].data = numbers;
+            }
+
+            if ( this.year == "quarter" ) {
+              let months = [];
+              let numbers = [];
+              data.forEach(it=>{
+                months.push(it.MONTH+"月");
+                numbers.push(it.number);
+              })
+              chart1.xAxis.data = months;
+              chart1.series[0].data = numbers;
+            }
+          }
+
           this.myChart1.setOption(chart1);
         });
+
         //类型占比
         getWarningSectionType({
             "type": this.year,
             "sectionId": this.selectId,
             "createTime": dateTime,
+            "direction":1,
         }).then(res=>{
           console.log(res);
+         
           chart2.series[0].data = [];
+          if ( res.code == 200 ) {
+             let types = [];
+             let numbers = [];
+             const gapData = {
+                name: "",
+                value: 0.5,
+                itemStyle: {
+                  color: "transparent",
+                },
+            };
+            let data = res.data.warningTypeList;
+            let total= res.data.total;
+
+            data.forEach((it)=>{
+              // 1-交通拥堵 2-行人 3-非机动车 4-停车5-倒车/逆行 6-烟火7-撒落物8-异常天气 9-护栏碰撞
+              if ( it.warningType == 1) {
+                types.push("交通拥堵");
+
+              }
+              if ( it.warningType == 2) {
+                types.push("行人");
+              }
+              if ( it.warningType == 3) {
+                types.push("非机动车");
+              }
+              if ( it.warningType == 4) {
+                types.push("停车");
+              }
+              if ( it.warningType == 5) {
+                types.push("倒车/逆行");
+              }
+              if ( it.warningType == 6) {
+                types.push("烟火");
+              }
+              if ( it.warningType == 7) {
+                types.push("撒落物");
+              }
+              if ( it.warningType == 8) {
+                types.push("异常天气");
+              }
+              if ( it.warningType == 9) {
+                types.push("护栏碰撞");
+              }
+              
+              numbers.push({
+                name:types[types.length - 1],
+                value:it.number
+              });
+              numbers.push(gapData);
+            })
+            console.log(types);
+            chart2.legend.data = types;
+            chart2.legend.formatter = function(name){
+            let total = 0
+            let target
+             for (let i = 0; i < numbers.length; i++) {
+               total += numbers[i].value;
+               if (types[i] === name) {
+                 target = numbers[i].value;
+               }
+             }
+             var arr = [
+               '{a|' + name + '}',
+               '{b|' + ((target / total) * 100).toFixed(2) + '%}',
+             ]
+             return arr.join('  ')
+       };
+
+          chart2.series[0].data = numbers;
+              // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
+              this.myChart2.on('mouseover', (params) => {
+                    if (params.componentType == 'graphic') {
+                      return
+                    }
+                    console.log(params);
+                    chart2.title.text = Math.round(params.data.value/total * 100) + "%";
+                    chart2.title.subtext = params.data.name;
                     this.myChart2.setOption(chart2);
+                })
+
+                // 用户鼠标移出时，重新开始自动切换
+                this.myChart2.on('mouseout', (params) => {
+                    chart2.title.text = total;
+                    chart2.title.subtext = "类型分析";
+                    this.myChart2.setOption(chart2);
+                })
+          }
+          this.myChart2.setOption(chart2);
+              
         })
           //路段范围内桩号分布
           getSectionMarkNumber({
             "type": this.year,
             "sectionId": this.selectId,
             "createTime": dateTime,
+            "direction":1,
         }).then(res=>{
           console.log(res);
           chart3.series[0].data = [];
           chart3.series[1].data = [];
+          if ( res.code == 200 ) {
+            let data = res.data;
+            if ( this.year != "quarter" ) {
+              let zhs = [];
+              let values = [];
+              data.forEach((it)=>{
+                console.log(it);
+                values.push(it.sectionNumber);
+                zhs.push(it.stakeMarkId);
+              })
+              chart3.xAxis.data = zhs;
+              chart3.series[0].data = values;
+              chart3.series[1].data = values;
+            } else {
+              let zhs = [];
+              let values = [];
+              data.forEach((dt,i)=>{
+                dt.forEach((it)=>{
+                      console.log(it);
+                      if ( quarter == 1 && it.QUARTER == "第一季度") {
+                        values[i] = it.number;
+                        zhs[i] = it.stakeMark;
+                      }
+                      if ( quarter == 4 && it.QUARTER == "第二季度") {
+                        values[i] = it.number;
+                        zhs[i] = it.stakeMark;
+                      }
+                      if ( quarter == 7 && it.QUARTER == "第三季度") {
+                        values[i] = it.number;
+                        zhs[i] = it.stakeMark;
+                      }
+                      if ( quarter == 10 && it.QUARTER == "第四季度") {
+                        values[i] = it.number;
+                        zhs[i] = it.stakeMark;
+                      }
+                })
+              })
+              chart3.xAxis.data = zhs;
+              chart3.series[0].data = values;
+              chart3.series[1].data = values;
+            }
+          }
+
           this.myChart3.setOption(chart3);
         })
+        if ( this.year == "day" )
+        this.year = "date";
       },
     },
     mounted() {
@@ -256,6 +467,7 @@
              var myChart3 = echarts.init(document.getElementById('chart3'));
              myChart3.setOption(chart3);
 
+             
              this.myChart1 = myChart1;
              this.myChart2 = myChart2;
              this.myChart3 = myChart3;

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

@@ -41,7 +41,9 @@
 
           getWarningSourceGroup().then((res)=>{
             if ( res.code == 200 ) {
-              let data = res.data;
+              console.log("=================",res);
+              let data = res.data.warningSourceList;
+              let total =  res.data.total;
               let warningTypes = [];
               let number = [];
               data.forEach(it=>{
@@ -97,9 +99,28 @@
                   })
               }
               window.mainData = mainData;
-              console.log("--------------",mainData);
+              //console.log("--------------",mainData);
               chartsStatistics.legend.data = lengData;
               chartsStatistics.series[0].data = mainData;
+
+              myChart.on('mouseover', (params) => {
+                    if (params.componentType == 'graphic') {
+                      return
+                    }
+                    console.log(params);
+                    chartsStatistics.title.text = params.percent  + "%";
+                    chartsStatistics.title.subtext = params.data.name;
+                    chartsStatistics.title.left = "22%";
+                    myChart.setOption(chartsStatistics);
+                })
+
+                // 用户鼠标移出时，重新开始自动切换
+                myChart.on('mouseout', (params) => {
+                    chartsStatistics.title.text = total;
+                    chartsStatistics.title.subtext = "总数";
+                    chartsStatistics.title.left = "25%";
+                    myChart.setOption(chartsStatistics);
+                })
             }
             myChart.setOption(chartsStatistics);
           })

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

@@ -4,10 +4,8 @@ var options = {
    color: ["#5090FF", "#01B3E4"],
    tooltip: {
       trigger: "axis",
-      backgroundColor: "rgba(0,0,0,.6)",
-      borderColor: "rgba(147, 235, 248, .8)",
       textStyle: {
-         color: "#FFF",
+         color: "#333",
       },
    },
    grid: {

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

@@ -78,7 +78,7 @@
       padding: 0px 20px;
       background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
       border-radius: 5px 5px 5px 5px;
-      opacity: 0.8;
+      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;