修改界面

ruoyi-admin/src/main/resources/static/css/board/month.css

@@ -72,35 +72,6 @@ body {
     top: 18.7%;
     left: 26.7%;
 }
-.nivoSlider{
-    width: 100%;
-    height: 100%;
-}
-.HighlightOne{
-    /*width: 23vw;*/
-    /*height: 35vh;*/
-    width: 230px;
-    height: 350px;
-
-}
-.HighlightTwo{
-    /*width: 23vw;*/
-    /*height: 35vh;*/
-    width: 230px;
-    height: 350px;
-}
-.HighlightThree{
-    /*width: 23vw;*/
-    /*height: 35vh;*/
-    width: 230px;
-    height: 350px;
-}
-.HighlightFour{
-    /*width: 23vw;*/
-    /*height: 35vh;*/
-    width: 230px;
-    height: 350px;
-}
 .slide{
     position: absolute;
     width: 22%;

ruoyi-admin/src/main/resources/static/js/board/month.js

@@ -26,7 +26,6 @@ $(() => {
         }, document.getElementById("safe"), '')
     })
     autoUpdate(url + "/selectMonthQANumber", INTERVAL, data => {
-        console.log(data)
         pieChart(data.map((val,index) => {
             if (index == 0 ) {
                 return {
@@ -63,10 +62,6 @@ $(() => {
     })
     autoUpdate(url + "/selectHighlightProducts", 40000, data => {
         let url = data.map(val => val.picturePath)
-        // $('#HighlightOne').css({backgroundImage: `url("http://10.100.70.5:9090/${url[0]}")`})
-        // $('#HighlightTwo').css({backgroundImage: `url("http://10.100.70.5:9090/${url[1]}")`})
-        // $('#HighlightThree').css({backgroundImage: `url("http://10.100.70.5:9090/${url[2]}")`})
-        // $('#HighlightFour').css({backgroundImage: `url("http://10.100.70.5:9090/${url[3]}")`})
         $('#HighlightOne').attr("src" , `http://10.100.70.5:9090/${url[0]}`)
         $('#HighlightTwo').attr("src" , `http://10.100.70.5:9090/${url[1]}`)
         $('#HighlightThree').attr("src" , `http://10.100.70.5:9090/${url[2]}`)
@@ -107,7 +102,7 @@ $(() => {
         lineChart({
             xName: month.splice(0,value.length),
             yData: value,
-            yDataName: "能耗百分比"
+            yDataName: "单台能耗(元/台)"
         }, document.getElementById("energyConsumption"), '')
     })
 

ruoyi-admin/src/main/resources/static/js/echartsCommon.js

@@ -946,19 +946,22 @@ const barChartAndLineChartFour = function (data, id) {
 }
 
 // 折线图
-const lineChart = function (data, id) {
+const lineChart = function (data, id,unit='') {
     let charts = echarts.init(id);
     if (!data) {
         data = {
             xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
             yData: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
-            yDataName: "提升百分比"
+            yDataName: "提升百分比",
+            yDataTwo: [60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
+            yDataTwoName: "百分比"
         }
     }
     let min = Math.ceil(Math.min(...data.yData))
+    let max = Math.ceil(Math.max(...data.yData))
     let option = {
         grid: {
-            top: '34%',
+            top: '20%',
             left: '5%',
             right: '5%',
             bottom: '8%',
@@ -998,8 +1001,8 @@ const lineChart = function (data, id) {
         },
         yAxis: [
             {
-                min:min - 2,
+                min: (min - 2 < 0) ? 0 : min - 2,
-                max:100,
+                max: (max + 2 > 100) ? 100 : max + 2,
                 type: 'value',
                 nameTextStyle: {
                     color: '#393939',
@@ -1018,6 +1021,7 @@ const lineChart = function (data, id) {
                 },
                 axisLabel: {
                     show: true,
+                    formatter:`{c}${unit}`,
                     textStyle: {
                         color: '#ffffff',
                     },
@@ -1056,6 +1060,37 @@ const lineChart = function (data, id) {
                 },
                 data: data.yData,
             },
+            {
+                name: data.yDataTwoName,
+                type: 'line',
+                showAllSymbol: true, //显示所有图形。
+                symbol: 'circle', //标记的图形为实心圆
+                symbolSize: 4, //标记的大小
+                itemStyle: {
+                    //折线拐点标志的样式
+                    color: '#5f3caf',
+                    borderWidth: '2',
+                    borderColor: '#462f84',
+                },
+                lineStyle: {
+                    color: '#3094ea',
+                },
+                label: {
+                    //图形上的文本标签
+                    normal: {
+                        formatter: '{c}%',
+                        show: true,
+                        position: "top",
+                        textStyle: {
+                            color: "#3254b8",
+                            fontStyle: "normal",
+                            fontFamily: "微软雅黑",
+                            fontSize: 0.5 * vw,
+                        },
+                    },
+                },
+                data: data.yDataTwo,
+            },
         ],
     };
 
@@ -1067,7 +1102,6 @@ const lineChart = function (data, id) {
 // 饼图
 const pieChart = function (data, id, unit = '次') {
     let charts = echarts.init(id);
-    console.log(data)
     if (!data) {
         data = [
             {

ruoyi-admin/src/main/resources/templates/broad/month.html

@@ -59,14 +59,6 @@
 <span style="position: absolute;transform: translateX(-50%);top: 7.9%;left: 62.8%;font-size: 0.8vw;font-weight: 800;color: red;">生态终端</span>
 <span style="position: absolute;transform: translateX(-50%);top: 7.9%;left: 71.1%;font-size: 0.8vw;font-weight: 800;color: red;">感动用户</span>
 <!--亮点产品-->
-<!--<div class="HighlightOne" id="HighlightOne"></div>-->
-<!--<div class="HighlightTwo" id="HighlightTwo"></div>-->
-<!--<div class="HighlightThree" id="HighlightThree"></div>-->
-<!--<div class="HighlightFour" id="HighlightFour"></div>-->
-<!--    <img class="HighlightOne" id="HighlightOne" width="23vw"/>-->
-<!--    <img class="HighlightTwo" id="HighlightTwo" width="23vw"/>-->
-<!--    <img class="HighlightThree" id="HighlightThree" width="23vw"/>-->
-<!--    <img class="HighlightFour" id="HighlightFour" width="23vw"/>-->
 <div id="slide" class="slide"></div>
 </body>
 <script src="../../static/js/board/month.js" th:src="@{/js/board/month.js}"></script>