diff --git a/src/views/NewMainPageComponents/RightMiddle.vue b/src/views/NewMainPageComponents/RightMiddle.vue
index f68c14bf885f7c79d243924982396655b3f8d2e8..1e652a8e89d40c0d08650a48730a4633a16bd475 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>