代码提交

src/assets/font/font.css

@@ -0,0 +1,7 @@
+/*庞门正道标题体免费版-Regular*/
+@font-face {
+    font-family: "title";
+    src: url('./PangMenZhengDaoBiaoTiTiMianFeiBan-2.ttf'); 
+    font-weight: normal; 
+    font-style: normal;
+}

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/main.js

@@ -8,7 +8,8 @@ moment.locale('zh-cn', {
     weekdays: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
 
 })
-
+// 引入字体
+import "@/assets/font/font.css"
 // 引入 echarts
 import * as echarts from "echarts";
 // element-plus中文

src/style.scss

@@ -5,10 +5,12 @@
   margin: 0;
   padding: 0;
   overflow: hidden;
+  color: rgba(221, 255, 253, 1);
 }
 p,ul,li{
   margin: 0;
   padding: 0;
+  list-style: none;
 }
 .container{
   width: 100%;
@@ -21,6 +23,32 @@ p,ul,li{
   z-index:99;
 
 }
+.unit{
+  font-size:.8rem;
+  color:rgba(221, 255, 253, 1);
+  font-weight: normal;
+}
+.page {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+
+  &-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;
+  }
+}
 .m100{
   position: relative;
   top:2rem;
@@ -35,8 +63,9 @@ p,ul,li{
   background-size: 100% 100%;
 }
 .title{
-  font-size: 22px;
-  font-weight: bold;
+  font-family: "title";
+  font-size: 20px;
+  font-weight: 400;
   color: #fff;
   padding-left: 2.75rem;
   padding-right:1rem;
@@ -48,6 +77,7 @@ p,ul,li{
   align-items: center;
   justify-content: space-between;
   display: flex;
+  span{}
   p{
     display: flex;
     align-items: center;
@@ -55,7 +85,7 @@ p,ul,li{
       font-size: 14px;
       font-weight: normal;
     }
-    .year,.month{
+    .year,.month,.day{
       padding: 0 0.8rem;
       //display: inline-block;
       //background-color: #092624;
@@ -63,8 +93,11 @@ p,ul,li{
       background-size: 100% 100%;
       cursor: pointer;
     }
+    .day{
+      margin-left: .5rem;
+    }
     .year{
       margin-right: .5rem;
     }
   }
-}
+}

src/untils/getPath.js

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

src/views/energyEfficiency/index.vue

@@ -1,13 +1,646 @@
 <script setup>
+import {ref, onMounted} from "vue";
+import * as echarts from "echarts";
+// 各系统能耗概况
+const systemTab = [{name: '空调'}, {name: '照明'}, {name: '展陈'}, {name: '消防'}, {name: '电梯'}]
+const systemTabIndex = ref(0)
+const systemLeftList = ref([
+  {
+    name: '今日用能峰值',
+    value: '322',
+  },
+  {
+    name: '本月用能峰值',
+    value: '35422',
+  }
+])
+const systemRightList = ref([
+  [
+    {
+      name: '今日',
+      value: '3122',
+      unit:'kWh'
+    },
+    {
+      name: '昨日',
+      value: '9400',
+      unit:'kWh'
+    },
+    {
+      name:'同比',
+      value:'-201',
+      unit:'%'
+    }
+  ],//日
+  [
+    {
+      name: '本月',
+      value: '3122',
+      unit:'kWh'
+    },
+    {
+      name: '上月',
+      value: '9400',
+      unit:'kWh'
+    },
+    {
+      name:'同比',
+      value:'-201',
+      unit:'%'
+    }
+  ],//月
+  [
+    {
+      name: '今年',
+      value: '3122',
+      unit:'kWh'
+    },
+    {
+      name: '去年',
+      value: '9400',
+      unit:'kWh'
+    },
+    {
+      name:'同比',
+      value:'-201',
+      unit:'%'
+    }
+  ]//年
+])
+const selectSystemTab = (index) => {
+  systemTabIndex.value = index
+}
 
+// 能耗总量echarts
+const drawTotalChart = () => {
+  let myChart = echarts.init(document.getElementById('totalEnergy'))
+  const option = {
+    // backgroundColor: "#05224d",
+    tooltip: {},
+    grid: {
+      top: "18%",
+      left: "4%",
+      right: "4%",
+      bottom: "4%",
+      containLabel: true,
+    },
+    xAxis: [
+
+      {
+        type: "category",
+        axisLine: {
+          //坐标轴轴线相关设置。数学上的x轴
+          show: true,
+          lineStyle: {
+            // type:'dashed',
+            color: "#557775",
+            // color: "#233e64",
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#DDFFFD",
+            // margin: 40,
+          },
+
+        },
+
+        axisTick: {show: false},
+        boundaryGap: true,
+        data: ["11-01", "11-02", "11-03", "11-04", "11-05", "11-07", "11-08", "11-09", "11-10", "11-11", "11-12", "11-13", "11-14"],
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        name: "单位:kW",
+        // padding:[0,10,0,0],
+        nameTextStyle: {
+          color: "#DDFFFD",
+          align: "center",
+          padding: [0, 15, 0, 0],
+        },
+        min: 0,
+        max: 500,
+        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: [100, 200, 300, 282, 283, 166, 100, 200, 300, 282, 283, 166, 283],
+      },
+    ],
+  };
+  myChart.setOption(option)
+}
+// 定额管理charts
+const drawManagement = () => {
+  let myChart = echarts.init(document.getElementById('management'))
+  const option = {
+    // backgroundColor: "#05224d",
+    tooltip: {},
+    legend: {
+      show: true,
+      icon: 'rect',
+      right: '10',
+      top: '5',
+      layout: 'vertical',
+      itemHeight: '10',
+      // itemWidth:'10',
+      textStyle: {
+        color: "rgba(221, 255, 253, 1)"
+      }
+    },
+    grid: {
+      top: "18%",
+      left: "4%",
+      right: "4%",
+      bottom: "4%",
+      containLabel: true,
+    },
+    xAxis: [
+
+      {
+        type: "category",
+        axisLine: {
+          //坐标轴轴线相关设置。数学上的x轴
+          show: true,
+          lineStyle: {
+            // type:'dashed',
+            color: "#557775",
+            // color: "#233e64",
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#DDFFFD",
+            margin: 40,
+          },
+
+        },
+
+        axisTick: {show: false},
+        boundaryGap: true,
+        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        name: "单位:kgce/m²",
+        // padding:[0,10,0,0],
+        nameTextStyle: {
+          color: "#DDFFFD",
+          align: "middle",
+          padding: [0, -30, 0, 0],
+        },
+        min: 0,
+        max: 18,
+        splitNumber: 6,
+        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: "单位建筑面积综合能耗",
+        markLine: { //阈值
+          //最大值和最小值
+          data: [
+            {
+              yAxis: 9,
+              label: {
+                show: false
+              },
+              lineStyle: {
+                width: 1,
+                color: "rgba(255, 221, 0, 1)",
+                // symbol:"none",
+              },
+            },
+          ],
+          symbol: ["none", "none"],
+        },
+        type: "line",
+        smooth: true, //是否平滑曲线显示
+        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
+        symbolSize: 0,
+        itemStyle: {
+          color: "rgba(221, 255, 253, 1)",
+        },
+
+        lineStyle: {
+          color: "rgba(221, 255, 253, 1)", // 线条颜色
+        },
+        areaStyle: {
+          //区域填充样式
+          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+          color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {offset: 0, color: "rgba(221, 255, 253, .7)"},
+                {offset: 1, color: "rgba(221, 255, 253, 0)"},
+              ],
+              false
+          ),
+
+          shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
+          shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        },
+        data: [5, 7, 9, 6, 2, 5, 4],
+      },
+    ],
+  };
+  myChart.setOption(option)
+}
+// 能效流向
+const drawEnergyFlow = () => {
+  let myChart = echarts.init(document.getElementById('energyFlow'))
+  let sourceData = [
+
+    {
+      name: "电",
+      nameValue: 1562,
+      valueUnit: "KWh",
+    },
+    {
+      name: "空调",
+      nameValue: 562,
+      valueUnit: "kWh",
+    },
+    {
+      name: "照明",
+      nameValue: 490,
+      valueUnit: "kWh",
+    },
+    {
+      name: "电梯",
+      nameValue: 510,
+      valueUnit: "kWh",
+    },
+  ];
+  let sangjiColor = [
+    'rgba(91, 250, 241, 1)',
+    'rgba(91, 250, 241, 1)',
+    'rgba(91, 250, 241, 1)',
+    'rgba(91, 250, 241, 1)'
+  ];
+  let itemStyleSource = [];
+  for (let d = 0; d < sourceData.length; d++) {
+    if (sourceData[d].name == "电") {
+      sourceData[d].label = {
+        position: 'right'
+      };
+    }
+    sourceData[d].itemStyle = {
+      color: sangjiColor[d],
+    };
+    itemStyleSource.push(sourceData[d]);
+  }
+
+  let option = {
+    series: [
+      {
+        type: "sankey",
+        layout: "none",
+        top: "5%",
+        bottom: "4%",
+        left: "6%",
+        right: "5%",
+        nodeWidth: '13',
+        // nodeAlign:'right',
+        focusNodeAdjacency: "allEdges",
+        data: itemStyleSource,
+        links: [
+          {
+            source: "电",
+            target: "空调",
+            value: 8,
+          },
+          {
+            source: "电",
+            target: "照明",
+            value: 8,
+          },
+          {
+            source: "电",
+            target: "电梯",
+            value: 8,
+          },
+
+        ],
+        label: {
+          position: "left",
+          color: "#fff",
+          fontSize: 14,
+          formatter: function (params) {
+
+            if (params.dataIndex == 0) {
+              return (
+                  "{a|" +
+                  params.data.name +
+                  "}\n" + "{b|" +
+                  params.data.nameValue + "}" +
+                  " " +
+                  params.data.valueUnit
+              );
+            } else {
+              return (
+                  "{name|" +
+                  params.data.name +
+                  "}" + "{value|" +
+                  params.data.nameValue + "}" +
+                  // " " +
+                  params.data.valueUnit
+              );
+            }
+
+          },
+          rich: {
+            a: {
+              padding: [0, 15, 10, 0],
+              fontSize: "14"
+            },
+            b: {
+              color: "rgba(91, 250, 241, 1)",
+              fontWeight: "600",
+              fontSize: "16",
+            },
+            name: {
+              fontSize: 14,
+              // padding: [10, 0, 0, 0],
+            },
+            value: {
+              color: "rgba(91, 250, 241, 1)",
+              fontWeight: "600",
+              fontSize: "16",
+              padding: [0, 10, 0, 10]
+            }
+
+          },
+        },
+        lineStyle: {
+          color: "source",
+          // curveness: 0.5,
+        },
+        itemStyle: {
+          borderWidth: 1,
+          borderColor: "transparent",
+        },
+      },
+    ],
+  };
+  myChart.setOption(option)
+}
+// dom加载
+onMounted(() => {
+  // 能耗总量
+  drawTotalChart()
+  // 定额管理
+  drawManagement()
+  // 能效流向
+  drawEnergyFlow()
+})
 </script>
 
 <template>
-<div>
-  能效
-</div>
+  <div class="page m100">
+    <div class="page-left-box">
+      <!--  能耗总量-->
+      <div class="title">
+        <span>能耗总量</span>
+        <p>
+          <span class="month">月</span>
+          <span class="day">日</span>
+        </p>
+      </div>
+      <div id="totalEnergy" class="margin10 box-bg"></div>
+      <!--  能效对标（定额管理）-->
+      <div class="title margin10">
+        <span>能效对标（定额管理）</span>
+        <p>
+          <span class="year">年</span>
+          <span class="month">月</span>
+        </p>
+      </div>
+      <div id="management" class="margin10 box-bg">
+
+      </div>
+      <!--  能效流向 -->
+      <div class="title margin10">
+        <span>能效流向</span>
+      </div>
+      <div id="energyFlow" class="margin10 box-bg"></div>
+    </div>
+    <div class="page-right-box">
+      <!--  各系统能耗概况 -->
+      <div class="title">
+        <span>各系统能耗概况</span>
+      </div>
+      <div id="airConditioningLoad" class="margin10 box-bg">
+        <ul class="system-tab">
+          <li v-for="(item,index) in systemTab" :class="index==systemTabIndex?'tab-select':''"
+              @click="selectSystemTab(index)">
+            <span>{{ item.name }}</span>
+          </li>
+        </ul>
+        <div class="system-content">
+          <div class="system-content-left">
+            <div v-for="(item,index) in systemLeftList" class="system-content-left-item">
+              <p class="system-content-left-item-p1">{{ item.name }}</p>
+              <p class="system-content-left-item-p2">{{ item.value }}</p>
+            </div>
+          </div>
+          <div class="system-content-right">
+            <div class="system-content-right-item" v-for="(item,index) in systemRightList">
+              <ul  class="system-content-right-item-title">
+                <li v-for="(s,i) in item">{{s.name}}</li>
+              </ul>
+              <div class="system-content-right-item-box">
+                  <span v-for="v in item" :class="v.unit==='%'?'yoy':''">{{v.value}} <span class="unit">{{v.unit}}</span></span>
+
+              </div>
+            </div>
+
+
+          </div>
+        </div>
+      </div>
+      <!--  复费率-->
+      <div class="title margin10">
+        <span>复费率</span>
+        <p>
+          <span class="year">年</span>
+          <span class="month">月</span>
+          <span class="day">日</span>
+        </p>
+      </div>
+      <div id="exhibitionLoad" class="margin10 box-bg"></div>
+      <!--  电费电价-->
+      <div class="title margin10">
+        <span>电费电价</span>
+      </div>
+      <div id="ranking" class="margin10 box-bg"></div>
+    </div>
+  </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
+.system-tab {
+  display: flex;
+  justify-content: space-evenly;
+  padding-top: .7rem;
+  box-sizing: border-box;
 
+  .tab-select {
+    background-image: url("@/assets/images/air-tab-select.png");
+  }
+
+  li {
+    background-image: url("@/assets/images/air-tab.png");
+    cursor: pointer;
+    color: rgba(221, 255, 253, 1);
+    background-size: 100% 100%;
+    font-size: .8rem;
+    padding: .2rem 1.1rem;
+  }
+}
+
+.system-content {
+  height: 83%;
+  width: 100%;
+  display: flex;
+  justify-content: space-evenly;
+
+  &-left {
+    width: 6.875rem;
+    height: 100%;
+    display: flex;
+    align-content: space-evenly;
+    flex-wrap: wrap;
+
+    &-item {
+      height: 40%;
+      width: 100%;
+      background-image: url("@/assets/images/system-value-bg.png");
+      background-size: 100% 100%;
+
+      &-p1 {
+        height: 29%;
+        text-align: center;
+        font-size: .875rem;
+        color: rgba(221, 255, 253, 1);
+      }
+
+      &-p2 {
+        height: 70%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-weight: 600;
+        font-size: 20px;
+        color: rgba(91, 250, 241, 1);
+      }
+    }
+  }
+
+  &-right {
+    width: 15.7rem;
+    height: 100%;
+    //background-color: #fff;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: space-evenly;
+    &-item {
+      height: 30%;
+      //background-color: #000;
+      width: 100%;
+
+      &-title{
+        display: flex;
+        justify-content: space-between;
+        font-size: .8rem;
+        padding: 0 .5rem;
+        box-sizing: border-box;
+      }
+      &-box{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 .5rem;
+        box-sizing: border-box;
+        font-weight: bold;
+        background-image: url("@/assets/images/system-box.png");
+        background-size: 100% 100%;
+        height: 65%;
+        width: 100%;
+        color: rgba(255,255,255,1);
+        .yoy{
+          color:rgba(1, 246, 139, 1);
+        }
+
+      }
+    }
+  }
+
+  //background-color: #fff;
+}
 </style>

src/views/energyMonitoring/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="overview m100">
-    <div class="overview-left-box">
+  <div class="page m100">
+    <div class="page-left-box">
       <!--  实时负荷-->
       <div class="title">
         <span>实时负荷</span>
@@ -17,22 +17,22 @@
       </div>
       <div class="margin10 box-bg" id="loadClassification"></div>
     </div>
-    <div class="overview-right-box">
+    <div class="page-right-box">
       <!--  空调负荷 -->
-      <div class="title">
+      <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>
       </div>
-      <div class="margin10 box-bg"></div>
+      <div class="margin10 box-bg" id="ranking"></div>
     </div>
   </div>
 </template>
@@ -40,6 +40,9 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import * as echarts from "echarts";
+const getImageUrl=(name)=>{
+  return new URL(name, import.meta.url).href
+}
 //实时负荷
 function getRealTimeLoad() {
   let myChart = echarts.init(document.getElementById("realTimeLoad"));
@@ -56,7 +59,6 @@ function getRealTimeLoad() {
     xAxis: [
       {
         type: "category",
-        boundaryGap: false,
         axisLine: {
           //坐标轴轴线相关设置。数学上的x轴
           show: true,
@@ -403,6 +405,356 @@ 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",
+        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",
+        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)
+
+  }
+//   配电回路排名
+function drawRanking(){
+  let myChart = echarts.init(document.getElementById('ranking'))
+  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",
+            fontSize:"14"
+          },
+          formatter: function (value,index) {
+            return "{a|TOP " +  (index+1) +
+                "}" + "{b|" +  value +
+                "}";
+          },
+          rich:{
+              a:{
+                width:45,
+                // padding: [0, 8, 0,0],
+                fontSize:"14",
+                backgroundColor:{
+
+                  image:getImageUrl('../../assets/images/rank-bg.png')
+                }
+              }
+          }
+        },
+        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: {
+
+          },
+          formatter: function (value) {
+            return "{a|" +  (value / 10000).toLocaleString() +
+                "}" + "{b|kWh}";
+          },
+          rich:{
+            a:{
+              fontSize: "16",
+              color:"rgba(0, 255, 240, 1)",
+              padding:[0,6,0,0]
+            },
+            b:{
+              color: "#fff",
+              fontSize: "12",
+
+            }
+
+          }
+        },
+        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)
+}
 //负荷分类
 function getLoadClassification() {
   var trafficWay = [
@@ -460,7 +812,7 @@ function getLoadClassification() {
     );
   }
   let myChart = echarts.init(document.getElementById("loadClassification"));
-  var option = {
+  let option = {
     color: color,
     title: [
       {
@@ -576,28 +928,17 @@ onMounted(() => {
   getRealTimeLoad();
   //当日累计用电量
   getDailyElectricityConsumption();
+  // 空调负荷
+  drawAirConditioningLoad();
+  // 展陈负荷
+  drawExhibitionLoad();
+  // 配电回路排名
+  drawRanking();
   //负荷分类
   getLoadClassification();
 });
 </script>
 
 <style lang="scss" scoped>
-.overview {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: space-between;
-  &-right-box,
-  &-left-box {
-    height: 100%;
-    width: vw(450);
-  }
-  &-right-box {
-    padding-right: 2.375rem;
-  }
-  &-left-box {
-    padding-left: 2.375rem;
-  }
-}
+
 </style>

src/views/overview/index.vue

@@ -1,12 +1,34 @@
 <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()
   //碳排放
   getCarbonEmission()
 })
+
 const drawPowerEcharts = () =>{
   let myChart = echarts.init(document.getElementById('power'))
   const option = {
@@ -23,13 +45,12 @@ const drawPowerEcharts = () =>{
 
       {
         type: "category",
-        boundaryGap: false,
         axisLine: {
           //坐标轴轴线相关设置。数学上的x轴
           show: true,
           lineStyle: {
             // type:'dashed',
-            color: "rgba(1, 39, 37, .3)",
+            color: "#557775"
             // color: "#233e64",
           },
         },
@@ -112,6 +133,132 @@ 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",
+            fontSize:"14"
+          },
+        },
+        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: {
+
+          },
+          formatter: function (value) {
+              return "{a|" +  (value / 10000).toLocaleString() +
+          "}" + "{b|kWh}";
+          },
+          rich:{
+            a:{
+              fontSize: "16",
+              color:"rgba(0, 255, 240, 1)",
+              padding:[0,6,0,0]
+            },
+            b:{
+              color: "#fff",
+              fontSize: "12",
+
+            }
+
+          }
+        },
+        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)
+}
 //碳排放
 function getCarbonEmission() {
   const offsetX = 10; //bar宽
@@ -394,9 +541,9 @@ function getCarbonEmission() {
 
 <template>
 
-  <div class="overview m100">
+  <div class="page m100">
 
-    <div class="overview-left-box">
+    <div class="page-left-box">
       <!--  用电量-->
       <div class="title">
         <span>用电量</span>
@@ -430,15 +577,22 @@ function getCarbonEmission() {
 
       </div>
     </div>
-    <div class="overview-right-box">
+    <div class="page-right-box">
       <!--  实时负荷 -->
       <div class="title">
         <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">
@@ -446,14 +600,21 @@ function getCarbonEmission() {
 
       </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)">
+                <span>{{item.name}}</span>
+              </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>
@@ -462,19 +623,70 @@ function getCarbonEmission() {
 </template>
 
 <style lang="scss" scoped>
-.overview {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: space-between;
-    &-right-box,&-left-box {
-      height: 100%;
-      width: vw(450);
+
+  .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)
+
+      }
+    }
   }
-  &-right-box{padding-right: 2.375rem;}
-  &-left-box{padding-left: 2.375rem;}
+  .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;
+      display: flex;
+      align-items: center;
+      padding-left: 2.6rem;
+      box-sizing: border-box;
+      font-size: .9rem;
+      font-style:italic;
+      height:50%;
+      color:rgba(221, 255, 253, 1);
+    }
+  }
 
-}
 </style>