代码提交

src/components/mainHeader/index.vue

@@ -10,6 +10,8 @@ import carbonEmission from '@/views/carbonEmission/index.vue' //碳排放
 
 import screen from '@/views/screen/index.vue' //显示屏
 import energyMonitoring from '@/views/energyMonitoring/index.vue'
+
+// import getImageUrl from '@/utils/getPath.js'
 const nowDate = ref('')
 const nowWeek = ref('')
 const nowMin = ref('')

src/style.scss

@@ -9,6 +9,7 @@
 p,ul,li{
   margin: 0;
   padding: 0;
+  list-style: none;
 }
 .container{
   width: 100%;

src/utils/getPath.js

@@ -0,0 +1,5 @@
+const getImageUrl = (name)=>{
+    return `url(${new URL(name, import.meta.url).href})`
+}
+
+export default getImageUrl

src/views/energyMonitoring/index.vue

@@ -22,12 +22,12 @@
       <div class="title" >
         <span>空调负荷</span>
       </div>
-      <div class="margin10 box-bg"></div>
+      <div class="margin10 box-bg" id="airConditioningLoad"></div>
       <!--  展陈负荷-->
       <div class="title margin10">
         <span>展陈负荷</span>
       </div>
-      <div class="margin10 box-bg"></div>
+      <div class="margin10 box-bg" id="exhibitionLoad"></div>
       <!--  配电回路排名-->
       <div class="title margin10">
         <span>配电回路排名</span>
@@ -397,12 +397,222 @@ function getDailyElectricityConsumption() {
   };
   myChart.setOption(option);
 }
+//空调负荷
+function drawAirConditioningLoad(){
+  let myChart = echarts.init(document.getElementById('airConditioningLoad'))
+  const option = {
+    // backgroundColor: "#05224d",
+    tooltip: {},
+    grid: {
+      top: "18%",
+      left: "4%",
+      right: "4%",
+      bottom: "4%",
+      containLabel: true,
+    },
+    xAxis: [
+
+      {
+        type: "category",
+        boundaryGap: false,
+        axisLine: {
+          //坐标轴轴线相关设置。数学上的x轴
+          show: true,
+          lineStyle: {
+            // type:'dashed',
+            color: "#557775"
+            // color: "#233e64",
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#DDFFFD",
+            margin: 40,
+          },
+
+        },
+
+        axisTick: { show: false },
+        boundaryGap: true,
+        data: ["09:00", "11:00", "13:00", "15:00", "17:00", "19:00"],
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        name:"单位:kW",
+        nameTextStyle:{
+          color: "#DDFFFD",
+          align:"right",
+        },
+        min: 0,
+        max: 2000,
+        splitNumber: 5,
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type:'dashed',
+            color: "rgba(1, 39, 37, 0.30)",
+          },
+        },
+        axisLine: { show: false },
+        axisLabel: {
+          textStyle: {
+            color: "#DDFFFD",
+          },
+        },
+        axisTick: { show: false },
+      },
+    ],
+    series: [
+      {
+        name: "异常流量",
+        type: "line",
+        smooth: true, //是否平滑曲线显示
+        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
+        symbolSize: 0,
+
+        lineStyle: {
+            color: "#5BFAF1", // 线条颜色
+        },
+        areaStyle: {
+          //区域填充样式
+            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+            color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  { offset: 0, color: "rgba(91, 250, 241, 0.40)" },
+                  { offset: 1, color: "rgba(91, 250, 241, 0)" },
+                ],
+                false
+            ),
+
+            shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
+            shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        },
+        data: [500, 800, 900,1200, 1800, 1600],
+      },
+    ],
+  };
+  myChart.setOption(option)
+}
+// 展陈负荷
+function drawExhibitionLoad(){
+  let myChart = echarts.init(document.getElementById('exhibitionLoad'))
+  const option = {
+    // backgroundColor: "#05224d",
+    tooltip: {},
+    grid: {
+      top: "18%",
+      left: "4%",
+      right: "4%",
+      bottom: "4%",
+      containLabel: true,
+    },
+    xAxis: [
+
+      {
+        type: "category",
+        boundaryGap: false,
+        axisLine: {
+          //坐标轴轴线相关设置。数学上的x轴
+          show: true,
+          lineStyle: {
+            // type:'dashed',
+            color: "#557775",
+            // color: "#233e64",
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#DDFFFD",
+            margin: 40,
+          },
+
+        },
+
+        axisTick: { show: false },
+        boundaryGap: true,
+        data: ["09:00", "11:00", "13:00", "15:00", "17:00", "19:00"],
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        name:"单位:kW",
+        nameTextStyle:{
+          color: "#DDFFFD",
+          align:"right",
+        },
+        min: 0,
+        max: 2000,
+        splitNumber: 5,
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type:'dashed',
+            color: "rgba(1, 39, 37, 0.30)",
+          },
+        },
+        axisLine: { show: false },
+        axisLabel: {
+          textStyle: {
+            color: "#DDFFFD",
+          },
+        },
+        axisTick: { show: false },
+      },
+    ],
+    series: [
+      {
+        name: "异常流量",
+        type: "line",
+        smooth: true, //是否平滑曲线显示
+        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
+        symbolSize: 0,
+
+        lineStyle: {
+            color: "rgba(1, 246, 139, 1)", // 线条颜色
+        },
+        areaStyle: {
+          //区域填充样式
+            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+            color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  { offset: 0, color: "rgba(1, 246, 139, 0.7)" },
+                  { offset: 1, color: "rgba(1, 246, 139, 0)" },
+                ],
+                false
+            ),
+
+            shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
+            shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        },
+        data: [500, 800, 900,1200, 1800, 1600],
+      },
+    ],
+  };
+  myChart.setOption(option)
+}
 //加载完dom执行
 onMounted(() => {
   //实时负荷
   getRealTimeLoad();
   //当日累计用电量
   getDailyElectricityConsumption();
+  // 空调负荷
+  drawAirConditioningLoad()
+  // 展陈负荷
+  drawExhibitionLoad()
 });
 </script>
 

src/views/overview/index.vue

@@ -1,10 +1,32 @@
 <script setup>
 import calendar from '@/components/calendar/index.vue'
 import * as echarts from 'echarts'
-import {onMounted} from "vue";
+import {onMounted,ref} from "vue";
+// 实时负荷
+const realTimeLoad = ref([
+  {pic:"../../assets/images/overview/room-num.png",name:'配电室数量',value:8,unit:'个'},
+  {pic:"../../assets/images/overview/WL.png",name:'实时负荷',value:1465.2,unit:'kW'}, //负荷
+  {pic:"../../assets/images/overview/E.png",name:'今日电量',value:146,unit:'kW/h'}, //电量
+])
+// 气象站
+const weatherStation = ref([
+  {pic:"../../assets/images/overview/rain.png",name:'雨量',value:100,unit:'mm'},
+  {pic:"../../assets/images/overview/rain-snow.png",name:'雨雪',value:'实际取值',unit:'kW'},
+  {pic:"../../assets/images/overview/wind.png",name:'风向',value:'东南风'},
+  {pic:"../../assets/images/overview/illuminance.png",name:'光照度',value:101,unit:'lux'},
+  {pic:"../../assets/images/overview/wind-speed.png",name:'风速',value:'东南风3级'},
+  {pic:"../../assets/images/overview/air.png",name:'今日电量',value:'优'},
+])
+const getImageUrl=(name)=>{
+  return `url(${new URL(name, import.meta.url).href})`
+}
 onMounted(()=>{
+  // 用电量
   drawPowerEcharts()
+  // 系统用电排名
+  drawRankEcharts()
 })
+
 const drawPowerEcharts = () =>{
   let myChart = echarts.init(document.getElementById('power'))
   const option = {
@@ -21,13 +43,12 @@ const drawPowerEcharts = () =>{
 
       {
         type: "category",
-        boundaryGap: false,
         axisLine: {
           //坐标轴轴线相关设置。数学上的x轴
           show: true,
           lineStyle: {
             // type:'dashed',
-            color: "rgba(1, 39, 37, .3)",
+            color: "#557775"
             // color: "#233e64",
           },
         },
@@ -110,6 +131,118 @@ const drawPowerEcharts = () =>{
   };
   myChart.setOption(option)
 }
+const drawRankEcharts = () =>{
+  let myChart = echarts.init(document.getElementById('rank'))
+  let option = {
+    grid: {
+      left: "5%",
+      right: "5%",
+      bottom: "-10%",
+      top: "8%",
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "none",
+      },
+      formatter: function (params) {
+        return (
+            params[0].name +
+            "<br/>" +
+            "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
+            params[0].seriesName +
+            " : " +
+            Number(
+                (params[0].value.toFixed(4) / 10000).toFixed(2)
+            ).toLocaleString() +
+            " 万元<br/>"
+        );
+      },
+    },
+    xAxis: {
+      show: false,
+      type: "value",
+    },
+    yAxis: [
+      {
+        type: "category",
+        inverse: true,
+        axisLabel: {
+          padding: [0, 0, 10, -10],
+          verticalAlign: "bottom",
+          inside: true,
+          show: true,
+          textStyle: {
+            color: "#fff",
+          },
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+        data: ["大米", "玉米", "蔬菜", "鸡蛋", "坚果"],
+      },
+      {
+        type: "category",
+        inverse: true,
+        axisTick: "none",
+        axisLine: "none",
+        show: true,
+        axisLabel: {
+          padding: [0, 0, 10, -10],
+          verticalAlign: "bottom",
+          inside: true,
+          textStyle: {
+            color: "#ffffff",
+            fontSize: "12",
+          },
+          formatter: function (value) {
+              return (value / 10000).toLocaleString() + "kw/h";
+          },
+        },
+        data: [50000000, 22000000, 10000000, 5000000, 1],
+      },
+    ],
+    series: [
+      {
+        name: "金额",
+        type: "bar",
+        zlevel: 1,
+        itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              {
+                offset: 0,
+                color: "rgba(29, 169, 153, 1)",
+              },
+              {
+                offset: 1,
+                color: "rgba(223, 243, 240, 1)",
+              },
+            ]),
+        },
+        barWidth: 8,
+        data: [50000000, 22000000, 10000000, 5000000, 200],
+      },
+      {
+        name: "背景",
+        type: "bar",
+        barWidth: 10,
+        barGap: "-115%",
+        data: [50000000, 50000000, 50000000, 50000000, 50000000],
+        itemStyle: {
+            color: 'rgba(5, 33, 31, 0.32)',
+          },
+      },
+    ],
+  };
+  myChart.setOption(option)
+}
 </script>
 
 <template>
@@ -156,9 +289,16 @@ const drawPowerEcharts = () =>{
         <span>实时负荷</span>
       </div>
       <div class="margin10 box-bg">
-          <div class="">
+          <ul class="real-time-load">
+            <li v-for="(item,index) in realTimeLoad" :style="'background-image:'+ getImageUrl(item.pic)">
+              <span class="unit">{{item.name}}</span>
+              <p>
+                <span class="value">{{item.value}}</span>
+                <span class="unit">{{item.unit}}</span>
+              </p>
 
-          </div>
+            </li>
+          </ul>
       </div>
       <!--  气象站-->
       <div class="title margin10">
@@ -166,14 +306,19 @@ const drawPowerEcharts = () =>{
 
       </div>
       <div class="margin10 box-bg">
-
+        <ul class="weather-station">
+          <li v-for="(item,index) in weatherStation" >
+              <p class="img" :style="'background-image:'+ getImageUrl(item.pic)"></p>
+            <p><span class="wea-value">{{item.value}}</span><span class="unit" v-if="item.unit">{{ item.unit }}</span></p>
+          </li>
+        </ul>
       </div>
       <!--  系统用电排名-->
       <div class="title margin10">
         <span>系统用电排名</span>
 
       </div>
-      <div class="margin10 box-bg">
+      <div class="margin10 box-bg" id="rank">
 
       </div>
     </div>
@@ -191,10 +336,66 @@ const drawPowerEcharts = () =>{
     &-right-box,&-left-box {
       height: 100%;
       width: vw(450);
+      box-sizing:border-box;
   }
   &-right-box{padding-right: 2.375rem;}
   &-left-box{padding-left: 2.375rem;}
-
+  .real-time-load{
+    width:100%;
+    height:100%;
+    display:flex;
+    justify-content: center;
+    flex-wrap: wrap;
+  align-content: space-evenly;
+    li{
+      width:24.125rem;
+      height:28%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-left: 4.75rem;
+      padding-right: 1.3rem;
+      box-sizing: border-box;
+      .value{
+        margin-right: .7rem;
+        font-size: 1.5rem;
+        font-weight: 700;
+        color:rgba(91, 250, 241, 1);
+      }
+      .unit{
+        font-size:.8rem;
+        color:rgba(221, 255, 253, 1)
 
       }
+    }
+  }
+  .weather-station{
+    width: 100%;
+    height: 100%;
+    padding:.8rem;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: space-evenly;
+    justify-content: space-between;
+    li{
+      height:30%;
+      .wea-value{
+        font-weight: 600;
+        color: rgba(91, 250, 241, 1);
+        margin: 0 .4rem 0 1rem;
+    }
+      .unit{
+        font-size:.8rem;
+        color:rgba(221, 255, 253, 1)
+
+      }
+    }
+    .img{
+      margin-bottom: .3rem;
+      width: 11.125rem;
+      height:50%;
+    }
+  }
+}
 </style>