src/components/mainHeader/index.vue

@@ -9,7 +9,11 @@ import lighting from '@/views/lighting/index.vue' //照明
 import carbonEmission from '@/views/carbonEmission/index.vue' //碳排放
 
 import screen from '@/views/screen/index.vue' //显示屏
+<<<<<<< HEAD
+
+=======
 import energyMonitoring from '@/views/energyMonitoring/index.vue'
+>>>>>>> af48436e2178f27ff7772684e807f1fea9516ede
 const nowDate = ref('')
 const nowWeek = ref('')
 const nowMin = ref('')
@@ -26,7 +30,11 @@ timer.value = setInterval(()=>{
 },1000)
 const menuList = ref([
   {name:shallowRef(overview),default:'../../assets/images/menu/overview.png',select:'../../assets/images/menu/overview-select.png'},
+<<<<<<< HEAD
+  { //name:shallowRef(energyMonitoring),
+=======
   {name:shallowRef(energyMonitoring),
+>>>>>>> af48436e2178f27ff7772684e807f1fea9516ede
     default:'../../assets/images/menu/energy.png',select:'../../assets/images/menu/energy-select.png'},
   {name:shallowRef(energyEfficiency),default:'../../assets/images/menu/energy-efficiency.png',select:'../../assets/images/menu/energy-efficiency-select.png'},
   {name:shallowRef(drainage),default:'../../assets/images/menu/drainage.png',select:'../../assets/images/menu/drainage-select.png'},

src/views/energyMonitoring/index.vue

@@ -134,17 +134,16 @@ function getDailyElectricityConsumption() {
     },
     buildPath: function (ctx, shape) {
       const xAxisPoint = shape.xAxisPoint;
-      const c0 = [shape.x - 10, shape.y];
+      const c0 = [shape.x, shape.y]; // 左侧面 右上点
-      const c1 = [shape.x + 10, shape.y];
+      const c1 = [shape.x - offsetX, shape.y - offsetY + 5]; // 左侧面  左上点
-      const c2 = [xAxisPoint[0] + 10, xAxisPoint[1]];
+      const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY + 5]; // 左侧面 左下点
-      const c3 = [xAxisPoint[0] - 10, xAxisPoint[1]];
+      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();
-      ctx.stroke();
     },
   });
   // 绘制右侧面
@@ -155,17 +154,16 @@ function getDailyElectricityConsumption() {
     },
     buildPath: function (ctx, shape) {
       const xAxisPoint = shape.xAxisPoint;
-      const c1 = [shape.x + 9, shape.y];
+      const c1 = [shape.x, shape.y]; //右侧面左上点
-      const c2 = [xAxisPoint[0] + 9, xAxisPoint[1]];
+      const c2 = [xAxisPoint[0], xAxisPoint[1] + 5]; //右侧面 左下点
-      const c3 = [xAxisPoint[0] + 9 + 8, xAxisPoint[1] - 10];
+      const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY + 5]; //右侧面  右下点
-      const c4 = [shape.x + 7 + 8, shape.y - 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();
-      ctx.stroke();
     },
   });
   // 绘制顶面
@@ -175,17 +173,16 @@ function getDailyElectricityConsumption() {
       y: 0,
     },
     buildPath: function (ctx, shape) {
-      const c1 = [shape.x - 10, shape.y];
+      const c1 = [shape.x, shape.y + 5]; //顶部菱形下点
-      const c2 = [shape.x + 10, shape.y];
+      const c2 = [shape.x + offsetX, shape.y - offsetY + 5]; //顶部菱形右点
-      const c3 = [shape.x + 15, shape.y - 5];
+      const c3 = [shape.x, shape.y - offsetX + 5]; //顶部菱形上点
-      const c4 = [shape.x - 5, shape.y - 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();
-      ctx.stroke();
     },
   });
   // 注册三个面图形
@@ -209,9 +206,9 @@ function getDailyElectricityConsumption() {
   // let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
   // 蓝色渐变
   let colorArr = [
-    ["rgba(0, 170, 193, 1)"],
+    ["#71ddff"],
-    ["rgba(0, 224, 255, 1)", "rgba(13,8,16,0)"],
+    ["rgba(12, 149, 198, 1)", "rgba(13,8,16,0)"],
-    ["rgba(0, 224, 255, 1)", "rgba(14,156,185,0)"],
+    ["rgba(34, 188, 255, 1)", "rgba(14,156,185,0)"],
   ];
   let myChart = echarts.init(
     document.getElementById("dailyElectricityConsumption")
@@ -274,8 +271,7 @@ function getDailyElectricityConsumption() {
       splitLine: {
         show: true,
         lineStyle: {
-          type: "dashed",
+          color: "rgba(255,255,255,0.16)",
-          color: "rgba(1, 39, 37, 0.30)",
         },
       },
       // y轴刻度线
@@ -377,7 +373,7 @@ function getDailyElectricityConsumption() {
         type: "bar",
         label: {
           normal: {
-            show: false,
+            show: true,
             position: "top",
             formatter: (e) => {
               return e.value;
@@ -402,7 +398,7 @@ onMounted(() => {
   //实时负荷
   getRealTimeLoad();
   //当日累计用电量
-  getDailyElectricityConsumption();
+  getDailyElectricityConsumption()
 });
 </script>