From 1588837890e434dde4855ca911d30892e9df2269 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9C002001lixiaobang=E2=80=9D?= <2547956374@qq.com>
Date: Tue, 12 Dec 2023 13:53:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                          |   1 -
 src/components/mainHeader/index.vue  |   1 +
 src/router/router.js                 |   8 +-
 src/views/energyMonitoring/index.vue | 424 +++++++++++++++++++++++++++
 4 files changed, 431 insertions(+), 3 deletions(-)
 create mode 100644 src/views/energyMonitoring/index.vue

diff --git a/src/App.vue b/src/App.vue
index 45406a9..888130a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,6 @@ import mainHeader from '@/components/mainHeader/index.vue'
   <mainHeader></mainHeader>
 
 
-
 <!--  <calendar></calendar>-->
 </template>
 
diff --git a/src/components/mainHeader/index.vue b/src/components/mainHeader/index.vue
index eb43cb7..775d511 100644
--- a/src/components/mainHeader/index.vue
+++ b/src/components/mainHeader/index.vue
@@ -89,4 +89,5 @@ timer.value = setInterval(()=>{
 .weaIcon{
 
 }
+
 </style>
\ No newline at end of file
diff --git a/src/router/router.js b/src/router/router.js
index d02c8f2..16ab0ba 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -1,6 +1,6 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import Overview from '../views/overview/index.vue'
-
+import energyMonitoring from '../views/energyMonitoring/index.vue'
 
 const routes = [
     {
@@ -12,7 +12,11 @@ const routes = [
         name: 'overview',
         component: Overview
     },
-
+    {
+        path: '/energyMonitoring',
+        name: 'energyMonitoring',
+        component: energyMonitoring
+    },
 ]
 
 const router = createRouter({
diff --git a/src/views/energyMonitoring/index.vue b/src/views/energyMonitoring/index.vue
new file mode 100644
index 0000000..1dac221
--- /dev/null
+++ b/src/views/energyMonitoring/index.vue
@@ -0,0 +1,424 @@
+<template>
+  <div class="overview m100">
+    <div class="overview-left-box">
+      <!--  实时负荷-->
+      <div class="title">
+        <span>实时负荷</span>
+      </div>
+      <div class="margin10 box-bg" id="realTimeLoad"></div>
+      <!--  当日累计用电量-->
+      <div class="title margin10">
+        <span>当日累计用电量</span>
+      </div>
+      <div class="margin10 box-bg" id="dailyElectricityConsumption"></div>
+      <!--  负荷分类-->
+      <div class="title margin10">
+        <span>负荷分类</span>
+      </div>
+      <div class="margin10 box-bg"></div>
+    </div>
+    <div class="overview-right-box">
+      <!--  空调负荷 -->
+      <div class="title">
+        <span>空调负荷</span>
+      </div>
+      <div class="margin10 box-bg"></div>
+      <!--  展陈负荷-->
+      <div class="title margin10">
+        <span>展陈负荷</span>
+      </div>
+      <div class="margin10 box-bg"></div>
+      <!--  配电回路排名-->
+      <div class="title margin10">
+        <span>配电回路排名</span>
+      </div>
+      <div class="margin10 box-bg"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import * as echarts from "echarts";
+//实时负荷
+function getRealTimeLoad() {
+  let myChart = echarts.init(document.getElementById("realTimeLoad"));
+  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: "rgba(1, 39, 37, .3)",
+            // color: "#233e64",
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#DDFFFD",
+            margin: 40,
+          },
+        },
+
+        axisTick: { show: false },
+        boundaryGap: true,
+        data: ["08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00"],
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        name: "单位:kW/h",
+        nameTextStyle: {
+          color: "#DDFFFD",
+        },
+        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",
+        symbol: "circle",
+        symbolSize: 6,
+        // yAxisIndex: 1, // 与第二个 y 轴关联
+        itemStyle: {
+          color: "#44C558",
+        },
+        lineStyle: {
+          width: 2,
+        },
+        data: [90, 70, 40, 70, 80, 65, 73], // 折线图的数据
+      },
+    ],
+  };
+  myChart.setOption(option);
+}
+//当日累计用电量
+function getDailyElectricityConsumption() {
+  const offsetX = 10; //bar宽
+  const offsetY = 5; //倾斜角度
+  // 绘制左侧面
+  const CubeLeft = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0,
+    },
+    buildPath: function (ctx, shape) {
+      const xAxisPoint = shape.xAxisPoint;
+      const c0 = [shape.x, shape.y]; // 左侧面 右上点
+      const c1 = [shape.x - offsetX, shape.y - offsetY + 5]; // 左侧面  左上点
+      const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY + 5]; // 左侧面 左下点
+      const c3 = [xAxisPoint[0], xAxisPoint[1] + 5]; // 左侧面 右下点
+      ctx
+        .moveTo(c0[0], c0[1])
+        .lineTo(c1[0], c1[1])
+        .lineTo(c2[0], c2[1])
+        .lineTo(c3[0], c3[1])
+        .closePath();
+    },
+  });
+  // 绘制右侧面
+  const CubeRight = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0,
+    },
+    buildPath: function (ctx, shape) {
+      const xAxisPoint = shape.xAxisPoint;
+      const c1 = [shape.x, shape.y]; //右侧面左上点
+      const c2 = [xAxisPoint[0], xAxisPoint[1] + 5]; //右侧面 左下点
+      const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY + 5]; //右侧面  右下点
+      const c4 = [shape.x + offsetX, shape.y - offsetY + 5]; //右侧面 右上点
+      ctx
+        .moveTo(c1[0], c1[1])
+        .lineTo(c2[0], c2[1])
+        .lineTo(c3[0], c3[1])
+        .lineTo(c4[0], c4[1])
+        .closePath();
+    },
+  });
+  // 绘制顶面
+  const CubeTop = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0,
+    },
+    buildPath: function (ctx, shape) {
+      const c1 = [shape.x, shape.y + 5]; //顶部菱形下点
+      const c2 = [shape.x + offsetX, shape.y - offsetY + 5]; //顶部菱形右点
+      const c3 = [shape.x, shape.y - offsetX + 5]; //顶部菱形上点
+      const c4 = [shape.x - offsetX, shape.y - offsetY + 5]; //顶部菱形左点
+      ctx
+        .moveTo(c1[0], c1[1])
+        .lineTo(c2[0], c2[1])
+        .lineTo(c3[0], c3[1])
+        .lineTo(c4[0], c4[1])
+        .closePath();
+    },
+  });
+  // 注册三个面图形
+  echarts.graphic.registerShape("CubeLeft", CubeLeft);
+  echarts.graphic.registerShape("CubeRight", CubeRight);
+  echarts.graphic.registerShape("CubeTop", CubeTop);
+  let xAxisData = [
+    "北京",
+    "上海",
+    "天津",
+    "南京",
+    "深圳",
+    "重庆",
+    "青岛",
+    "大连",
+    "沈阳",
+    "哈尔滨",
+  ];
+  let seriesData = [100, 200, 300, 400, 200, 250, 360, 250, 340, 280];
+  // 绿色渐变
+  // let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
+  // 蓝色渐变
+  let colorArr = [
+    ["#71ddff"],
+    ["rgba(12, 149, 198, 1)", "rgba(13,8,16,0)"],
+    ["rgba(34, 188, 255, 1)", "rgba(14,156,185,0)"],
+  ];
+  let myChart = echarts.init(
+    document.getElementById("dailyElectricityConsumption")
+  );
+  const option = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+      formatter: function (params, ticket, callback) {
+        const item = params[1];
+        return item.name + " : " + item.value;
+      },
+    },
+    grid: {
+      left: "5%",
+      right: "10%",
+      top: "15%",
+      bottom: "5%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "category",
+      data: xAxisData,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 1,
+          color: "rgba(255, 255, 255, 0.60)",
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        fontSize: 14,
+        interval: 0,
+        // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
+        formatter: function (value) {
+          const length = value.length;
+          if (length > 3) {
+            const start = Math.floor(length / 2);
+            const str =
+              value.slice(0, start) + "\n" + value.slice(start, length);
+            return str;
+          }
+          return value;
+        },
+      },
+    },
+    yAxis: {
+      type: "value",
+      minInterval: 1,
+      // y轴（竖直线）
+      axisLine: {
+        show: false,
+      },
+      // y轴横向 标线
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(255,255,255,0.16)",
+        },
+      },
+      // y轴刻度线
+      axisTick: {
+        show: false,
+      },
+      // y轴文字
+      axisLabel: {
+        fontSize: 14,
+        color: "rgba(255, 255, 255, 0.60)",
+      },
+    },
+    series: [
+      {
+        type: "custom",
+        renderItem: (params, api) => {
+          const location = api.coord([api.value(0), api.value(1)]);
+          return {
+            type: "group",
+            children: [
+              // 左侧面
+              {
+                type: "CubeLeft",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: colorArr[1][0],
+                    },
+                    {
+                      offset: 1,
+                      color: colorArr[1][1],
+                    },
+                  ]),
+                },
+              },
+              // 右侧面
+              {
+                type: "CubeRight",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: colorArr[2][0],
+                    },
+                    {
+                      offset: 1,
+                      color: colorArr[2][1],
+                    },
+                  ]),
+                },
+              },
+              // 顶部
+              {
+                type: "CubeTop",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: colorArr[0][0],
+                    },
+                    {
+                      offset: 1,
+                      color: colorArr[0][0],
+                    },
+                  ]),
+                },
+              },
+            ],
+          };
+        },
+        data: seriesData,
+      },
+      {
+        type: "bar",
+        label: {
+          normal: {
+            show: true,
+            position: "top",
+            formatter: (e) => {
+              return e.value;
+            },
+            fontSize: 16,
+            color: "#43C4F1",
+            offset: [0, -5],
+          },
+        },
+        itemStyle: {
+          color: "transparent",
+        },
+        tooltip: {},
+        data: seriesData,
+      },
+    ],
+  };
+  myChart.setOption(option);
+}
+//加载完dom执行
+onMounted(() => {
+  //实时负荷
+  getRealTimeLoad();
+  //当日累计用电量
+  getDailyElectricityConsumption()
+});
+</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>