更新太阳能板

ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue

@@ -28,13 +28,27 @@
         </div>
       </section>
       <footer class="footer card-menu">
-        <div class="footer-title">
+        <div class="foot-title-panel">
-          <span>济菏高速缩略图</span>
+          <div :class="'footer-title ' + ( footVisible===0 ? 'footer-titleVis' : '')">
-          <i class="el-icon-s-fold" style="color: #2ad9fd; transform: rotate(-90deg)" @click.stop="handleShrink" />
+            <span @click="footClick(0)">济菏高速缩略图</span>
+            <i class="el-icon-s-fold" style="transform: rotate(-90deg)" @click.stop="handleShrink" />
+          </div>
+          <div :class="'footer-title ' + ( footVisible===1 ? 'footer-titleVis' : '')">
+            <span @click="footClick(1)">交通流分析</span>
+            <i class="el-icon-s-fold" style="transform: rotate(-90deg)" @click.stop="handleShrink" />
+          </div>
         </div>
-        <div class="footer-content">
+        <div class="foot-title-panel">
+        <div class="footer-content" :style="footVisible===1?'display:none;':''">
           <Thumbnail ref="Thumbnail" />
         </div>
+        <div class="footer-content footer-contentFlow" :style="footVisible===0?'display:none;':''">
+          <div>
+            <div class="ftitle">全路段双向实时车流量</div>
+           <Real ref="refReal" source="home"></Real></div>
+           <div><div class="ftitle">收费站出入口实时车流量</div><Fee ref="refFee" source="home"></Fee></div>
+        </div>
+        </div>
       </footer>
     </div>
     <carbon v-if="jnValue==='2'"/>
@@ -68,6 +82,11 @@ import Button from "@screen/components/Buttons/Button.vue";
 import Vue from "vue";
 import BMapContainer from "./components/BMapContainer/index.vue";
 import RadioGroup from "@screen/components/FormConfig/components/RadioGroup/index.vue";
+
+
+import Real from "@screen/pages/perception/trafficFlow/analysis/real/index.vue";
+import Fee from "@screen/pages/perception/trafficFlow/analysis/fee/index.vue";
+
 import Carbon from "./carbon";
 export default {
   name: "Home",
@@ -89,16 +108,20 @@ export default {
     HomeWeatherLayer,
     HomeTraffic,
     RadioGroup,
-    Carbon
+    Carbon,
+    Real,
+    Fee
   },
   data() {
     return {
       selectedDevice: null,
       isGisCompleted: false,
       mapContainer:'BMapContainer',
-      jnValue:'1'
+      jnValue:'1',
+      footVisible:0
     };
   },
+  
   provide() {
     return {
       // 2024-06-04更新地图==========================================
@@ -112,11 +135,20 @@ export default {
     };
   },
   methods: {
+    footClick(v){
+      this.footVisible = v;
+      if(v===1){
+        setTimeout(() => {
+          this.$refs.refReal.myChart.resize();
+          this.$refs.refFee.myChart.resize();
+        }, 100);
+      }
+    },
     debug(){
       this.$refs.Thumbnail.debug()
     },
     handleShrink(e) {
-      const translateXElement = e.target.parentElement.parentElement;
+      const translateXElement = e.target.parentElement.parentElement.parentElement;
 
       const result =
         (e.target.style.transform.match(/[-0-9]+/)?.[0] || -90) * -1;
@@ -198,7 +230,6 @@ export default {
       height: 100%;
     }
   }
-
   .footer {
     width: 100%;
     // margin: auto;
@@ -212,15 +243,26 @@ export default {
     >div {
       pointer-events: all;
     }
-
+    .foot-title-panel{
+      display: flex;
+    }
     // position: fixed;
     // bottom: 0;
+    .footer-titleVis{
+      border: 1px solid #2ad9fd !important;
+      span{
+        color: #2ad9fd !important;
+      }
+      i{
+        color: #2ad9fd !important;
+      }
+    }
     .footer-title {
       width: 164px;
       height: 36px;
       border-radius: 11px 11px 0px 0px;
       opacity: 1;
-      border: 1px solid #2ad9fd;
+      border: 1px solid #cccccc;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -230,16 +272,19 @@ export default {
 
       gap: 15px;
         
+
       span {
         font-size: 16px;
         font-family: PingFang SC, PingFang SC;
         font-weight: 500;
-        color: #2ad9fd;
+        color: #cccccc;
+        cursor: pointer;
       }
 
       i {
+        color: #cccccc;
         transition: all 0.24s linear;
-        cursor: pointer;
+        cursor: s-resize;
       }
 
       // img {
@@ -250,7 +295,20 @@ export default {
       //   cursor: pointer;
       // }
     }
-
+    .footer-contentFlow{
+      display:flex;
+      div{
+        flex:1;
+        height:100%;
+        gap: 20px;
+        .ftitle{
+          color: white;
+          position: absolute;
+          text-align: center;
+          margin-left: 20vw;
+        }
+      }
+    }
     .footer-content {
       width: 100%;
       height: 200px;

ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index.vue

@@ -13,7 +13,7 @@
       <div>
         <Bg2 class="content-l-t">
           <div class="focuse-header">
-            <div class="title">重点数据</div>
+            <div class="title1"></div>
           </div>
           <div class="content-l-t-content">
             <div class="content-k1">
@@ -34,19 +34,19 @@
               <div>今日累计发电量</div>
               <div class="content-ll">
                 <div class="content-llc">
-                  <div v-for="(item, index) in titles2p" :key="index"></div>
+                  <div style="background-color: #FFCD4D;" v-for="(item, index) in titles2p" :key="index"></div>
                 </div>
               </div>
-              <div class="content-unit" style="width:50px;text-align:right;">{{ titles2 }}度</div>
+              <div class="content-unit" style="color: #FFCD4D;width:50px;text-align:right;">{{ titles2 }}度</div>
             </div>
             <div class="content-k1">
               <div>今日累计用电量</div>
               <div class="content-ll">
                 <div class="content-llc">
-                  <div v-for="(item, index) in titles3p" :key="index"></div>
+                  <div style="background-color: #3FD7FE;" v-for="(item, index) in titles3p" :key="index"></div>
                 </div>
               </div>
-              <div class="content-unit" style="width:50px;text-align:right;">{{ titles3 }}度</div>
+              <div class="content-unit" style="color: #3FD7FE;width:50px;text-align:right;">{{ titles3 }}度</div>
             </div>
           </div>
         </Bg2>
@@ -54,15 +54,26 @@
       <div>
         <Bg2 class="content-l-t">
           <div class="focuse-header">
-            <div class="title">设备统计</div>
+            <div class="title3"></div>
           </div>
           <div class="content-l-sec-content">
-            <div id="chartp1" class="secleft"></div>
+            <!-- <div id="chartp1" class="secleft"></div> -->
+            <div class="seclft">
+              <div class="seclft-s0" v-if="device0>0">{{parseInt(device1/device0 * 100)}}%</div>
+              <div class="seclft-s1" v-if="device0>0">{{device1}} / {{device0}}</div>
+              <div class="seclft-s2">设备故障率</div>
+            </div>
             <div class="secright">
-              <div class="d1"><span>{{device0}}</span> 个</div>
+             <div class="d1">
-              <div class="d2">设备总数</div>
+              <img  :src="require('@screen/images/solar/d0.png')" />
-              <div class="d1"><span>{{device1}}</span> 个</div>
+              <div class="d1label">放电异常设备</div>
-              <div class="d2">放电异常设备</div>
+              <div class="d1Num" style="color:#FFCD4D">{{device1}}</div>
+             </div>
+             <div class="d1">
+              <img  :src="require('@screen/images/solar/d1.png')" />
+              <div class="d1label">设备总数</div>
+              <div class="d1Num" style="color:#1EDDF3">{{device0}}个</div>
+             </div>
             </div>
           </div>
         </Bg2>
@@ -71,22 +82,22 @@
       <div>
         <Bg2 class="content-l-t">
           <div class="focuse-header">
-            <div class="title">环境贡献</div>
+            <div class="title4"></div>
           </div>
           <div class="content-l-third-content">
             <div class="thirditem">
-              <img :src="require('@screen/images/solar/CO2.png')" />
+              <img :src="require('@screen/images/solar/c0.png')" />
-              <div class="thirdNum"><span>{{titles4}}</span> 吨</div>
+              <div class="thirdNum" style="color:#FFCD4D">{{titles4}}吨</div>
               <div>CO₂减排</div>
             </div>
             <div class="thirditem">
-              <img :src="require('@screen/images/solar/tree.png')" />
+              <img :src="require('@screen/images/solar/c1.png')" />
-              <div class="thirdNum"><span>{{titles5}}</span> 棵</div>
+              <div class="thirdNum" style="color:#14C47F">{{titles5}}棵</div>
               <div>等效植树</div>
             </div>
             <div class="thirditem">
-              <img :src="require('@screen/images/solar/coal.png')" />
+              <img :src="require('@screen/images/solar/c2.png')" />
-              <div class="thirdNum"><span>{{titles6}}</span> 吨</div>
+              <div class="thirdNum" style="color:#25B5CA">{{titles6}} 吨</div>
               <div>节约标准煤</div>
             </div>
           </div>
@@ -102,17 +113,17 @@
           <div class="content-box">
             <div class="box-title " style="margin-top: 15px;">
               <span>今日发电统计</span>
-              <span style="margin-left: 140px;">总计：{{ chart1Total1 }}度</span>
+              <span style="color:#2AD9FD;margin-left: 140px;">总计：{{ chart1Total1 }}度</span>
             </div>
             <div id="charts1" class="chart"></div>
             <div class="box-title " style="margin-top: 15px;">
               <span>今日用电统计</span>
-              <span style="margin-left: 140px;">总计：{{ chart1Total1 }}度</span>
+              <span style="color:#FFCD4D;margin-left: 140px;">总计：{{ chart1Total1 }}度</span>
             </div>
             <div id="charts2" class="chart"></div>
             <div class="box-title " style="margin-top: 15px;">
               <span>今日功率统计</span>
-              <span style="margin-left: 140px;">总计：{{ chart1Total3 }}千瓦</span>
+              <span style="color:#04BFAE;margin-left: 140px;">总计：{{ chart1Total3 }}千瓦</span>
             </div>
             <div id="charts3" class="chart"></div>
           </div>
@@ -244,11 +255,11 @@ export default {
       }).then(result => {
         if (result.code != 200) return;
         console.log('initTotal',result)
-        this.titles0 = result.data.theAccumulatedChargeOfTheYear.toString().padStart(9,'0'); //
+        this.titles0 = parseInt(result.data.theAccumulatedChargeOfTheYear).toString().padStart(9,'0'); //
-        this.titles1 = result.data.cumulativeElectricityConsumptionInTheYear.toString().padStart(9,'0');
+        this.titles1 = parseInt(result.data.cumulativeElectricityConsumptionInTheYear).toString().padStart(9,'0');
-        this.titles2 = result.data.dailyAccumulatedCharge;
+        this.titles2 = parseFloat(result.data.dailyAccumulatedCharge);
-        this.titles3 = result.data.cumulativeElectricityConsumptionOnTheDay;
+        this.titles3 = parseFloat(result.data.cumulativeElectricityConsumptionOnTheDay);
-        let _titles2p = (result.data.dailyAccumulatedCharge/10000) * 24
+        let _titles2p = (result.data.dailyAccumulatedCharge/100) * 24
         if(_titles2p > 24){
           _titles2p = 24;
         } else if(_titles2p===0){
@@ -256,7 +267,7 @@ export default {
         }
         this.titles2p = parseInt(_titles2p);
 
-        let _titles3p = (result.data.cumulativeElectricityConsumptionOnTheDay/10000) * 24
+        let _titles3p = (result.data.cumulativeElectricityConsumptionOnTheDay/100) * 24
         if(_titles3p > 24){
           _titles3p = 24;
         } else if(_titles3p===0){
@@ -304,12 +315,12 @@ export default {
             }
           ]
         }
-        if (!this.chartp1) {
+        // if (!this.chartp1) {
-          this.chartp1 = echarts.init(document.getElementById("chartp1"));
+        //   this.chartp1 = echarts.init(document.getElementById("chartp1"));
-          let option1 = JSON.parse(JSON.stringify(_chartsOptions));
+        //   let option1 = JSON.parse(JSON.stringify(_chartsOptions));
-          this.chartp1.setOption(option1);
+        //   this.chartp1.setOption(option1);
-          this.chartp1.resize();
+        //   this.chartp1.resize();
-        }
+        // }
       })
     },
     initChart(){
@@ -378,7 +389,31 @@ export default {
               {
                 data: [],
                 type: 'line',
-                smooth: true
+                 showSymbol: false,
+                smooth: true, // 是否曲线
+                lineStyle: {
+                    color: "#2AD9FD",
+                  },
+                  areaStyle: {
+                    color: {
+                      type: "linear",
+                      x: 0, //右
+                      y: 0, //下
+                      x2: 0, //左
+                      y2: 1, //上
+                      colorStops: [
+                        {
+                          offset: 0.1,
+                          color: "#2AD9FD", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          opacity: 0.01,
+                          color: "#2AD9FD01", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                  },
               }
             ]
         }
@@ -403,7 +438,29 @@ export default {
             this.chart1.setOption(option1);
             this.chart1.resize();
           })
-
+          _chartsOptions.series[0].lineStyle = {
+                    color: "#FFD15C",
+                  }
+          _chartsOptions.series[0].areaStyle= {
+                    color: {
+                      type: "linear",
+                      x: 0, //右
+                      y: 0, //下
+                      x2: 0, //左
+                      y2: 1, //上
+                      colorStops: [
+                        {
+                          offset: 0.1,
+                          color: "#FFD15C", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          opacity: 0.01,
+                          color: "#FFD15C01", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                  },
           this.chart2 = echarts.init(document.getElementById("charts2"));
           let option2 = JSON.parse(JSON.stringify(_chartsOptions));
           request({
@@ -423,6 +480,30 @@ export default {
             this.chart2.setOption(option2);
             this.chart2.resize();
           })
+
+          _chartsOptions.series[0].lineStyle = {
+                    color: "#04BFAE",
+                  }
+          _chartsOptions.series[0].areaStyle= {
+                    color: {
+                      type: "linear",
+                      x: 0, //右
+                      y: 0, //下
+                      x2: 0, //左
+                      y2: 1, //上
+                      colorStops: [
+                        {
+                          offset: 0.1,
+                          color: "#04BFAE", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          opacity: 0.01,
+                          color: "#04BFAE01", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                  },
           // 发电功率
           this.chart3 = echarts.init(document.getElementById("charts3"));
           let option3 = JSON.parse(JSON.stringify(_chartsOptions));
@@ -515,6 +596,37 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
+ .title1 {
+      width: 220px;
+      height: 40px;
+      margin-top: 10px;
+      margin-left: 10px;
+      display: flex;
+      align-items: center;
+      background: url("~@screen/images/title/title-import.png") no-repeat;
+      background-size: 100% 100%;
+    }
+ .title4 {
+      width: 220px;
+      height: 40px;
+      margin-top: 10px;
+      margin-left: 10px;
+      display: flex;
+      align-items: center;
+      background: url("~@screen/images/title/title-place.png") no-repeat;
+      background-size: 100% 100%;
+    }
+
+ .title3 {
+      width: 220px;
+      height: 40px;
+      margin-top: 10px;
+      margin-left: 10px;
+      display: flex;
+      align-items: center;
+      background: url("~@screen/images/title/title-device.png") no-repeat;
+      background-size: 100% 100%;
+    }
 
     .title2 {
 
@@ -543,28 +655,62 @@ export default {
   .content-l-sec-content {
     display: flex;
     flex-direction: row;
-
+    justify-content: center;
+    align-items: center;
+    height: 100%;
     .secleft {
       height: 180px;
       width: 250px;
     }
-
+    .seclft{
+      height: 130px;
+      flex: 1;
+      background:url('~@screen/images/solar/space.png') no-repeat;
+      margin-left:20px;
+      margin-top:50px;
+      display:flex;
+      flex-direction:column;
+      justify-content: flex-start;
+      align-items: center;
+      .seclft-s0{
+        font-size: 25px;
+        font-weight:bold;
+      }
+      .seclft-s1{
+        color:#83B8B8;
+        margin:0px 0px 32px 0px;
+      }
+      .seclft-s2{
+        color:#83B8B8;
+      }
+    }
     .secright {
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
-      gap: 10px;
+      gap: 15px;
-      font-size: 14px;
+      width:240px;      
-
       .d1 {
-        font-size: 12px;
+        display:flex;
-
+        justify-content: center;
-        span {
+        align-items: center;
-          font-size: 30px;
+        .d1label{
-          font-weight: bold;
+          font-size:16px;
-          color: #d3d51c;
+          margin:0px 5px;
+        }
+        .d1Num{
+          font-size: 20px;
+          font-weight:bold;
+          font-family: YouSheBiaoTiHei;
         }
+        // font-size: 12px;
+
+        // span {
+        //   font-size: 30px;
+        //   font-weight: bold;
+        //   color: #d3d51c;
+        // }
       }
     }
   }
@@ -583,7 +729,8 @@ export default {
     .content-k1 {
       display: flex;
       flex-direction: row;
-
+      justify-content: space-between;
+      width:100%;
       .content-ll {
         flex: 1;
         width: 200px;
@@ -597,7 +744,7 @@ export default {
           gap: 3px;
 
           >div {
-            background-color: #9ff501;
+            
             width: 5px;
             height: 17px;
           }
@@ -608,13 +755,16 @@ export default {
       .content-kk {
         display: flex;
         flex-direction: row;
-        margin-left: 10px;
+        
         margin-right: 3px;
         gap: 3px;
 
         >div {
-          border: 1px solid #0c7f8a;
+          // border: 1px solid #0c7f8a;
-          padding: 2px 5px;
+          background:#1f3c4d;
+          color:#3FD7FE;
+          padding: 2px 6px;
+          font-weight:bold;
         }
       }
 
@@ -629,7 +779,7 @@ export default {
   .content-l-third-content {
     display: flex;
     width: 100%;
-    margin: 20px 20px 20px 10px;
+    margin: 20px 10px 20px 0px;
 
     .thirditem {
       flex: 1;
@@ -638,12 +788,15 @@ export default {
       justify-content: center;
       align-items: center;
       gap: 10px;
-      font-size: 14px;
+      font-size: 18px;
-
+      .thirdNum{
+        margin-top:-100px;
+        margin-bottom: 30px;
+        font-weight:bold;
+      }
       img {
-        width: 40px;
+        width: 100px;
-        height: 40px;
+        height: 129px;
-        margin-bottom: 10px;
       }
 
       span {

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/fee/charts.js

@@ -3,6 +3,7 @@ var options = {
   color:['#6DBBFB','#E18B3B'],
   tooltip: {
     show: true,
+    confine:true,
     trigger: "axis",
     formatter: (params) => {
       console.log(params)

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/fee/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flowstate">
-      <div class="tag1">入口</div>
+      <div class="tag1" :style="source==='home'?'margin-top:-120px;':''">入口</div>
-      <div class="tag2">出口</div>
+      <div class="tag2" :style="source==='home'?'margin-top:120px;margin-left:700px;':''">出口</div>
       <div class="chartsFT" id="feeChart"></div>
     </div>
 </template>
@@ -14,6 +14,9 @@ import { exportFile } from "@screen/utils/common";
 
 export default {
   name: "Flowstate",
+   props:{
+    source:String
+  },
   components: {
   },
   data() {

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/real/charts.js

@@ -2,6 +2,7 @@ import * as echarts from "echarts";
 var options = {
   tooltip: {
     show: true,
+    confine:true,
     trigger: "axis",
     formatter: (params) => {
 

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/real/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flowstate">
-      <div class="tag1" @click="bind">方向：济南<span>←</span></div>
+      <div class="tag1" :style="source==='home'?'margin-top:-120px;':''" @click="bind">方向：济南<span>←</span></div>
-      <div class="tag2"><span>→</span>方向：菏泽</div>
+      <div class="tag2" :style="source==='home'?'margin-top:120px;margin-left:700px;':''"><span>→</span>方向：菏泽</div>
       <div class="chartsFs " id="flowStateEchartBox"></div>
     </div>
 </template>
@@ -15,6 +15,9 @@ import { exportFile } from "@screen/utils/common";
 
 export default {
   name: "Flowstate",
+  props:{
+    source:String
+  },
   components: {
   },
   data() {