From 4c2d529452a75df5b6bb485c2c5663c97a083900 Mon Sep 17 00:00:00 2001
From: ZK <1057786341@qq.com>
Date: Wed, 29 Jun 2022 11:02:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8F=B3=E4=B8=AD=E5=9B=BE?=
 =?UTF-8?q?=E5=BD=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NewMainPageComponents/RightMiddle.vue     | 75 ++++++++++++++++---
 1 file changed, 66 insertions(+), 9 deletions(-)

diff --git a/src/views/NewMainPageComponents/RightMiddle.vue b/src/views/NewMainPageComponents/RightMiddle.vue
index f68c14b..1e652a8 100644
--- a/src/views/NewMainPageComponents/RightMiddle.vue
+++ b/src/views/NewMainPageComponents/RightMiddle.vue
@@ -2,10 +2,48 @@
   <!--右中-->
   <div
     style="display: flex;
-			justify-content: space-between;width: 25%"
+			justify-content: space-between;width: 25%;background: #073055;"
   >
-    <div id="rightMiddle1" class="rightMiddle_echarts" style="width: 50%;height: 300px" />
-    <div id="rightMiddle2" class="rightMiddle_echarts" style="width: 50%;height: 300px" />
+    <div style="width: 50%;height: 300px">
+      <div id="rightMiddle1" class="rightMiddle_echarts" style="width: 100%;height: 26vh" />
+      <el-button
+        round
+        size="mini"
+        style="background-color: #0a106b;color: #eeeeee;margin-left:62px"
+      >
+        报警率
+      </el-button>
+      <div style="display: flex;font-size: 8px;background-color: #0c1426;margin:6px 0 0 35px;width: 130px">
+        <div style="color:#c0ae14;border: 1px solid #083770;width: 60px;text-align: center">
+          <span>本周期</span><br>
+          <span style="font-size: 15px">56%</span>
+        </div>
+        <div style="color:#04b464;margin-left: 10px;width: 50px;text-align: center">
+          <span>上周期</span><br>
+          <span style="font-size: 15px">56%</span>
+        </div>
+      </div>
+    </div>
+    <div style="width: 50%">
+      <div id="rightMiddle2" class="rightMiddle_echarts" style="width: 100%;height: 26vh" />
+      <el-button
+        round
+        size="mini"
+        style="background-color: #0a106b;color: #eeeeee;margin-left: 62px"
+      >
+        离线率
+      </el-button>
+      <div style="display: flex;font-size: 8px;background-color: #0c1426;margin:6px 0 0 35px;width: 130px">
+        <div style="color:#c0ae14;border: 1px solid #083770;width: 60px;text-align: center">
+          <span>本周期</span><br>
+          <span style="font-size: 15px">56%</span>
+        </div>
+        <div style="color:#04b464;margin-left: 10px;width: 50px;text-align: center">
+          <span>上周期</span><br>
+          <span style="font-size: 15px">56%</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -25,7 +63,7 @@ export default {
         series: [
           {
             type: 'gauge',
-            center: ['50%', '60%'],
+            center: ['50%', '75%'],
             startAngle: 220,
             endAngle: -40,
             min: 0,
@@ -73,7 +111,14 @@ export default {
             },
             title: {
               offsetCenter: [0, '60%'],
-              fontSize: 15
+              fontSize: 15,
+              color: '#ffffff'
+            },
+            grid: {
+              left: '2%',
+              right: '2%',
+              bottom: '3%',
+              containLabel: true
             },
             detail: {
               valueAnimation: true,
@@ -120,7 +165,7 @@ export default {
         series: [
           {
             type: 'gauge',
-            center: ['50%', '60%'],
+            center: ['50%', '75%'],
             startAngle: 220,
             endAngle: -40,
             min: 0,
@@ -168,7 +213,8 @@ export default {
             },
             title: {
               offsetCenter: [0, '60%'],
-              fontSize: 15
+              fontSize: 15,
+              color: '#fff'
             },
             detail: {
               valueAnimation: true,
@@ -212,6 +258,17 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="less" scoped>
+.rightMiddle_echarts {
+  width: 9.625rem;
+  height: 6.325rem;
+  background: #073055;
+  box-sizing: border-box;
+  padding: 0.5rem 0.425rem 0.4rem 0.425rem;
+  display: inline-block;
+  .echarts {
+    width: 100%;
+    height: 100%;
+  }
+}
 </style>
-- 
Gitee