From 70b850dff6f46cec568ead7a601c02822e0e7db4 Mon Sep 17 00:00:00 2001
From: jiminglei <836545853@qq.com>
Date: Wed, 10 May 2023 16:06:14 +0800
Subject: [PATCH] 11

---
 psdc-ui/src/views/emonitor/db/index.vue    |  4 +-
 psdc-ui/src/views/emonitor/drgl/index.vue  | 53 +++++++++++++++++++---
 psdc-ui/src/views/emonitor/frdl/index.vue  |  6 +--
 psdc-ui/src/views/emonitor/kqyrb/index.vue |  6 +--
 psdc-ui/src/views/emonitor/wdcgq/index.vue |  5 +-
 psdc-ui/src/views/emonitor/xrgl/index.vue  |  6 +--
 6 files changed, 59 insertions(+), 21 deletions(-)

diff --git a/psdc-ui/src/views/emonitor/db/index.vue b/psdc-ui/src/views/emonitor/db/index.vue
index 264391c..f49338e 100644
--- a/psdc-ui/src/views/emonitor/db/index.vue
+++ b/psdc-ui/src/views/emonitor/db/index.vue
@@ -88,8 +88,8 @@ p{
 .mid{
   width: 100%;
   height: 350px;
-  margin-top: 15px;
-  margin-bottom: 15px;
+  margin-top: 20px;
+  margin-bottom: 20px;
   display: flex;
   justify-content: space-between;
 }
diff --git a/psdc-ui/src/views/emonitor/drgl/index.vue b/psdc-ui/src/views/emonitor/drgl/index.vue
index e3bb0e2..f48f08b 100644
--- a/psdc-ui/src/views/emonitor/drgl/index.vue
+++ b/psdc-ui/src/views/emonitor/drgl/index.vue
@@ -42,7 +42,7 @@
         <div class="bottom1-1">
           日用电量
         </div>
-        <div>
+        <div id="myEcharts" style="width: 100%; height: 86.7%">
           pic
         </div>
       </div>
@@ -74,8 +74,47 @@
   </div>
 </template>
 
-<script setup name="Index">
-
+<script  name="Index">
+import { onMounted } from "vue";
+import * as echarts from 'echarts';
+export default {
+  name: "drgl",
+  setup() {
+    onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      let myChart = echarts.init(document.getElementById("myEcharts"));
+      // 绘制图表
+      myChart.setOption({
+        title: {},
+        tooltip: {},
+        xAxis: {
+          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
+        },
+        yAxis: {
+          nameTextStyle: {
+            color: 'white'
+          },
+            show: true,
+          type: 'value',
+          axisLine: {
+            show: true,
+          }
+          },
+        series: [
+          {
+            name: "用户量",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+          },
+        ],
+      });
+      window.onresize = function () {//自适应大小
+        myChart.resize();
+      };
+    });
+  },
+  components: {},
+  mounted() {},
+};
 
 
 </script>
@@ -87,7 +126,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  margin-bottom: 15px;
+  margin-bottom: 20px;
 }
 .card{
   width: 24%;
@@ -100,7 +139,7 @@
 
 .bottom{
   width: 100%;
-  height: 615px;
+  height: 640px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -109,14 +148,14 @@
   width: 49.35%;
   height: 300px;
   background-color: #2F3D8A;
-  margin-bottom: 15px;
+  margin-bottom: 20px;
 }
 p{
   margin-bottom: 10px;
 }
 .bottom1-1{
   width: 100%;
-  height: 40px;
+  height: 13.3%;
   background-color: #374590;
   padding-top: 10px;
   padding-left: 10px;
diff --git a/psdc-ui/src/views/emonitor/frdl/index.vue b/psdc-ui/src/views/emonitor/frdl/index.vue
index 0426617..b76f813 100644
--- a/psdc-ui/src/views/emonitor/frdl/index.vue
+++ b/psdc-ui/src/views/emonitor/frdl/index.vue
@@ -83,7 +83,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  margin-bottom: 15px;
+  margin-bottom: 20px;
 }
 .card{
   width: 24%;
@@ -96,7 +96,7 @@
 
 .bottom{
   width: 100%;
-  height: 615px;
+  height: 640px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -105,7 +105,7 @@
   width: 49.35%;
   height: 300px;
   background-color: #2F3D8A;
-  margin-bottom: 15px;
+  margin-bottom: 20px;
 }
 p{
   margin-bottom: 10px;
diff --git a/psdc-ui/src/views/emonitor/kqyrb/index.vue b/psdc-ui/src/views/emonitor/kqyrb/index.vue
index c6794e2..d6f00b6 100644
--- a/psdc-ui/src/views/emonitor/kqyrb/index.vue
+++ b/psdc-ui/src/views/emonitor/kqyrb/index.vue
@@ -87,7 +87,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  margin-bottom: 15px;
+  margin-bottom: 20px;
 }
 .card{
   width: 24%;
@@ -100,7 +100,7 @@
 
 .bottom{
   width: 100%;
-  height: 615px;
+  height: 640px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -109,7 +109,7 @@
   width: 49.35%;
   height: 300px;
   background-color: #2F3D8A;
-  margin-bottom: 15px;
+  margin-bottom: 20px;
 }
 p{
   margin-bottom: 10px;
diff --git a/psdc-ui/src/views/emonitor/wdcgq/index.vue b/psdc-ui/src/views/emonitor/wdcgq/index.vue
index 85fd7f6..e6a39cb 100644
--- a/psdc-ui/src/views/emonitor/wdcgq/index.vue
+++ b/psdc-ui/src/views/emonitor/wdcgq/index.vue
@@ -84,17 +84,16 @@ p{
 }
 .top{
   width: 100%;
-  height: 235px;
+  height: 260px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  margin-bottom: 15px;
 }
 .card{
   width: 24%;
   height: 110px;
   background-color: #2F3D8A;
-  margin-bottom: 15px;
+  margin-bottom: 20px;
   display: flex;
   justify-content: space-around;
   align-items: center;
diff --git a/psdc-ui/src/views/emonitor/xrgl/index.vue b/psdc-ui/src/views/emonitor/xrgl/index.vue
index c6794e2..d6f00b6 100644
--- a/psdc-ui/src/views/emonitor/xrgl/index.vue
+++ b/psdc-ui/src/views/emonitor/xrgl/index.vue
@@ -87,7 +87,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  margin-bottom: 15px;
+  margin-bottom: 20px;
 }
 .card{
   width: 24%;
@@ -100,7 +100,7 @@
 
 .bottom{
   width: 100%;
-  height: 615px;
+  height: 640px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -109,7 +109,7 @@
   width: 49.35%;
   height: 300px;
   background-color: #2F3D8A;
-  margin-bottom: 15px;
+  margin-bottom: 20px;
 }
 p{
   margin-bottom: 10px;