diff --git a/src/App.vue b/src/App.vue
index 626f4f8..f1fc3d6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -25,7 +25,7 @@ export default {
     enterFullscreen() {
       const element = document.documentElement;
       // 请求全屏模式
-      if (!this.isLoding) {
+      if (this.isLoding) {
         if (element.webkitRequestFullscreen) {
           // Chrome, Safari and Opera
           element.webkitRequestFullscreen();
@@ -48,12 +48,21 @@ export default {
 </script>
 
 <style lang="scss">
+@font-face {
+  font-family: 'DIN-Bold';
+  src: url('@/assets/fonts/DIN-Bold.otf') format('opentype');
+}
+
+.numFont {
+  font-family: 'DIN-Bold';
+}
 * {
   margin: 0;
   padding: 0;
   text-decoration: none;
   list-style: none;
   color: #fff;
+  font-family: Microsoft YaHei;
 }
 .app {
   width: 100%;
diff --git a/src/assets/fonts/DIN-Bold.otf b/src/assets/fonts/DIN-Bold.otf
new file mode 100644
index 0000000..782e68e
Binary files /dev/null and b/src/assets/fonts/DIN-Bold.otf differ
diff --git a/src/components/comHeader/index.vue b/src/components/comHeader/index.vue
index 57da5e9..6f87301 100644
--- a/src/components/comHeader/index.vue
+++ b/src/components/comHeader/index.vue
@@ -3,8 +3,10 @@
     <dv-decoration-8 class="left" />
     <dv-decoration-5 class="center" />
     <dv-decoration-8 class="right" :reverse="true" />
-    <div class="centerTitle">{{$route.meta.title}}</div>
-    <dv-decoration-7 class="dateBox"><span>{{ curTime }}</span></dv-decoration-7>
+    <div class="centerTitle">{{ $route.meta.title }}</div>
+    <dv-decoration-7 class="dateBox"
+      ><span>{{ curTime }}</span></dv-decoration-7
+    >
   </Header>
 </template>
 
@@ -66,38 +68,38 @@ Header {
   display: flex;
   justify-content: space-between;
   flex-shrink: 0;
-  height: 100px;
+  height: 8.6vh;
   position: relative;
   .left {
     width: 25%;
-    height: 60px;
+    height: 6vh;
   }
   .center {
     width: 40%;
-    height: 60px;
-    margin-top: 30px;
+    height: 6vh;
+    margin-top: 2.2vh;
   }
   .right {
     width: 25%;
-    height: 60px;
+    height: 6vh;
   }
   .centerTitle {
     position: absolute;
-    font-size: 30px;
+    font-size: 3.4vh;
     font-weight: 700;
     left: 50%;
-    top: 15px;
+    top: 0.6vh;
     transform: translateX(-50%);
   }
   .dateBox {
     position: absolute;
-    width: 18%;
-    height: 60px;
-    font-size: 16px;
-    font-weight: 700;
-    right: 9%;
-    top: 27px;
-    span{
+    width: 32vh;
+    height: 3vh;
+    font-size: 1.8vh;
+    font-weight: 400;
+    right: 19vh;
+    top: 4.2vh;
+    span {
       margin: 0 8px;
     }
   }
diff --git a/src/views/pageMonitor/bottomLeft/index.vue b/src/views/pageMonitor/bottomLeft/index.vue
index 117ac49..05864da 100644
--- a/src/views/pageMonitor/bottomLeft/index.vue
+++ b/src/views/pageMonitor/bottomLeft/index.vue
@@ -4,12 +4,11 @@
       <div class="chartsBox">
         <div class="chartItem">
           <p>手术等级</p>
-          <dv-active-ring-chart :config="config1" />
+          <dv-charts :option="option1"></dv-charts>
         </div>
-        <dv-decoration-2 :reverse="true" />
         <div class="chartItem">
           <p>ASA分级</p>
-          <dv-active-ring-chart :config="config2" />
+          <dv-charts :option="option2"></dv-charts>
         </div>
       </div>
     </dv-border-box-13>
@@ -20,47 +19,80 @@
 export default {
   data() {
     return {
-      config1: {
-        data: [
+      option1: {
+        series: [
           {
-            name: '一级',
-            value: 300,
-          },
-          {
-            name: '二级',
-            value: 250,
-          },
-          {
-            name: '三级',
-            value: 250,
-          },
-          {
-            name: '四级',
-            value: 100,
-          },
-          {
-            name: '五级',
-            value: 80,
+            type: 'pie',
+            radius: ['40%', '55%'],
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2,
+            },
+            data: [
+              {
+                name: '一级',
+                value: 300,
+              },
+              {
+                name: '二级',
+                value: 250,
+              },
+              {
+                name: '三级',
+                value: 250,
+              },
+              {
+                name: '四级',
+                value: 100,
+              },
+              {
+                name: '五级',
+                value: 80,
+              },
+            ],
+            outsideLabel: {
+              formatter: '{name} {value}',
+              labelLineBendGap: '8%',
+              labelLineEndLength: 8,
+              style: {
+                fontSize: 16,
+              },
+            },
           },
         ],
       },
-      config2: {
-        data: [
-          {
-            name: 'I级',
-            value: 80,
-          },
-          {
-            name: 'II级',
-            value: 50,
-          },
-          {
-            name: 'III级',
-            value: 10,
-          },
+      option2: {
+        series: [
           {
-            name: 'IV级',
-            value: 20,
+            type: 'pie',
+            radius: ['40%', '55%'],
+            data: [
+              {
+                name: 'I级',
+                value: 80,
+              },
+              {
+                name: 'II级',
+                value: 50,
+              },
+              {
+                name: 'III级',
+                value: 10,
+              },
+              {
+                name: 'IV级',
+                value: 20,
+              },
+            ],
+            outsideLabel: {
+              formatter: '{name} {value}',
+              labelLineBendGap: '8%',
+              labelLineEndLength: 8,
+              style: {
+                fontSize: 16,
+              },
+            },
           },
         ],
       },
@@ -80,7 +112,7 @@ export default {
     padding-top: 10px;
     box-sizing: border-box;
     .chartItem {
-      width: 48%;
+      width: 50%;
       height: 100%;
       flex-shrink: 0;
       padding-top: 40px;
@@ -88,8 +120,9 @@ export default {
       p {
         font-size: 24px;
         text-align: center;
+        letter-spacing: 0.1vh;
       }
-      :deep(.dv-active-ring-chart) {
+      :deep(.dv-charts-container) {
         height: 90%;
       }
     }
diff --git a/src/views/pageMonitor/bottomMiddle/index.vue b/src/views/pageMonitor/bottomMiddle/index.vue
index 5a2e6fd..aff512f 100644
--- a/src/views/pageMonitor/bottomMiddle/index.vue
+++ b/src/views/pageMonitor/bottomMiddle/index.vue
@@ -10,7 +10,7 @@
               <p>月</p>
             </div>
           </nav>
-          <dv-capsule-chart :config="config" />
+          <dv-charts :option="option"></dv-charts>
         </div>
       </div>
     </dv-border-box-13>
@@ -21,30 +21,60 @@
 export default {
   data() {
     return {
-      config: {
-        data: [
-          {
-            name: '择期手术',
-            value: 120,
+      option: {
+        grid: {
+          left: '20%',
+          top: '6%',
+        },
+        xAxis: {
+          data: 'value',
+          max: '1%',
+          min: 0,
+          axisLabel: {
+            style: {
+              fontSize: 0,
+            },
           },
-          {
-            name: '急诊手术',
-            value: 10,
+          axisLine: {
+            show: false,
           },
-          {
-            name: '门诊手术',
-            value: 30,
+        },
+        yAxis: {
+          type: 'category',
+          data: ['择期手术', '急诊手术', '门诊手术', '无痛手术', '日间手术', '外科手术'],
+          axisLabel: {
+            style: {
+              stroke: '#fff',
+              fontSize: 14,
+            },
           },
-          {
-            name: '无痛手术',
-            value: 20,
+          splitLine: { show: false },
+          axisLine: {
+            show: false,
           },
+        },
+        series: [
           {
-            name: '日间手术',
-            value: 25,
+            type: 'bar',
+            data: [10, 20, 25, 30, 40, 80],
+            barWidth: '40%',
+            label: {
+              show: true,
+              position: 'top',
+              offset: [16, 2],
+              style: {
+                stroke: '#fff',
+                fontSize: 14,
+              },
+            },
+            gradient: {
+              color: ['#83bff6', '#188df0', '#188df0'],
+            },
+            backgroundBar: {
+              show: true,
+            },
           },
         ],
-        showValue: true,
       },
     };
   },
@@ -59,57 +89,38 @@ export default {
     height: 100%;
     display: flex;
     position: relative;
-    padding-top: 10px;
+    padding-top: 1vh;
     box-sizing: border-box;
     .chartItem {
       width: 100%;
       height: 100%;
       flex-shrink: 0;
-      padding: 0 20px;
-      padding-top: 20px;
+      padding: 2vh;
       box-sizing: border-box;
       nav {
         display: flex;
         justify-content: space-between;
+        align-items: center;
         .right {
           display: flex;
           .active,
           p:hover {
             color: #87ceeb;
+            border: 1px solid #87ceeb;
           }
           p {
-            margin-right: 10px;
+            margin-right: 1.5vh;
             cursor: pointer;
+            border: 1px solid #fff;
+            font-size: 1.6vh;
+            width: 2.6vh;
+            height: 2.6vh;
+            line-height: 2.6vh;
+            text-align: center;
           }
         }
         p {
-          font-size: 24px;
-        }
-      }
-      :deep(.dv-capsule-chart) {
-        height: 90%;
-        transform: translateX(-10px) translateY(20px);
-        .label-column {
-          div {
-            font-size: 18px;
-            margin-top: 7px;
-          }
-        }
-        .capsule-container {
-          .capsule-item {
-            height: 20px;
-            .capsule-item-column {
-              height: 18px;
-              .capsule-item-value {
-                font-size: 18px;
-                transform: translateX(110%);
-              }
-            }
-          }
-          .unit-label {
-            visibility: hidden;
-            font-size: 20px;
-          }
+          font-size: 2.4vh;
         }
       }
     }
diff --git a/src/views/pageMonitor/bottomRight/index.vue b/src/views/pageMonitor/bottomRight/index.vue
index 2dff2ef..2afaf7b 100644
--- a/src/views/pageMonitor/bottomRight/index.vue
+++ b/src/views/pageMonitor/bottomRight/index.vue
@@ -10,7 +10,7 @@
               <p>月</p>
             </div>
           </nav>
-          <dv-bar-chart></dv-bar-chart>
+          <dv-charts :option="option"></dv-charts>
         </div>
       </div>
     </dv-border-box-13>
@@ -18,11 +18,57 @@
 </template>
 
 <script>
-// import dvBarChart from '@/components/dvBarChart/index.vue';
-import comBar from '@/components/comBar/index.vue';
 export default {
-  components: {
-    'dv-bar-chart': comBar,
+  data() {
+    return {
+      option: {
+        xAxis: {
+          type: 'category',
+          data: ['骨科', '心胸外科', '普通外科', '神经外科', '整形外科'],
+          axisLabel: {
+            style: {
+              stroke: '#fff',
+              fontSize: 14,
+              fontWeight: 'normal',
+              fontFamily: 'Microsoft YaHei',
+            },
+          },
+        },
+        yAxis: {
+          type: 'value',
+          data: 'value',
+          max: '1%',
+          axisLabel: {
+            style: {
+              stroke: '#fff',
+              fontSize: 14,
+              fontWeight: 'normal',
+              fontFamily: 'Microsoft YaHei',
+            },
+          },
+        },
+        series: [
+          {
+            type: 'bar',
+            data: [200, 150, 120, 80, 70],
+            barWidth: '40%',
+            label: {
+              show: true,
+              position: 'top',
+              style: {
+                stroke: '#fff',
+                fontSize: 14,
+                fontWeight: 'normal',
+                fontFamily: 'Microsoft YaHei',
+              },
+            },
+            gradient: {
+              color: ['#83bff6', '#188df0', '#188df0'],
+            },
+          },
+        ],
+      },
+    };
   },
 };
 </script>
@@ -35,36 +81,40 @@ export default {
     height: 100%;
     display: flex;
     position: relative;
-    padding-top: 10px;
+    padding-top: 1vh;
     box-sizing: border-box;
     .chartItem {
       width: 100%;
       height: 100%;
       flex-shrink: 0;
-      padding: 0 20px;
-      padding-top: 20px;
+      padding: 2vh;
       box-sizing: border-box;
       nav {
         display: flex;
         justify-content: space-between;
+        align-items: center;
         .right {
           display: flex;
           .active,
           p:hover {
             color: #87ceeb;
+            border: 1px solid #87ceeb;
           }
           p {
-            margin-right: 10px;
+            margin-right: 1.5vh;
             cursor: pointer;
+            border: 1px solid #fff;
+            font-size: 1.6vh;
+            width: 2.6vh;
+            height: 2.6vh;
+            line-height: 2.6vh;
+            text-align: center;
           }
         }
         p {
-          font-size: 24px;
+          font-size: 2.4vh;
         }
       }
-      :deep(.dv-charts-container){
-        height: 90%;
-      }
     }
   }
 }
diff --git a/src/views/pageMonitor/topLeft/index.vue b/src/views/pageMonitor/topLeft/index.vue
index 89923ca..15e4f64 100644
--- a/src/views/pageMonitor/topLeft/index.vue
+++ b/src/views/pageMonitor/topLeft/index.vue
@@ -3,27 +3,21 @@
     <dv-border-box-13>
       <div class="box">
         <dv-border-box-2 class="item">
+          <p class="active numFont">80%</p>
           <p>首台准点率</p>
-          <p>
-            <dv-digital-flop :config="config1" />
-          </p>
         </dv-border-box-2>
         <dv-border-box-2 class="item">
+          <p class="active numFont">86%</p>
           <p>手术间利用率</p>
-          <p>
-            <dv-digital-flop :config="config2" />
-          </p>
         </dv-border-box-2>
         <dv-border-box-2 class="item">
-          <p>总人数 <span>400</span></p>
-          <p>进行中 <span>180</span></p>
-          <p>待进行 <span>220</span></p>
+          <p>总人数 <span class="numFont">400</span></p>
+          <p>进行中 <span class="numFont">180</span></p>
+          <p>待进行 <span class="numFont">220</span></p>
         </dv-border-box-2>
         <dv-border-box-2 class="item">
+          <p class="active numFont">80个</p>
           <p>急症患者</p>
-          <p>
-            <dv-digital-flop :config="config6" />
-          </p>
         </dv-border-box-2>
       </div>
     </dv-border-box-13>
@@ -33,44 +27,7 @@
 <script>
 export default {
   data() {
-    return {
-      config1: {
-        number: [0],
-        content: '{nt} %',
-        animationFrame: 150,
-        animationCurve: 'easeOutCubic',
-        style: {
-          fontSize: 30,
-        },
-      },
-      config2: {
-        number: [0],
-        content: '{nt} %',
-        animationFrame: 150,
-        animationCurve: 'easeOutCubic',
-        style: {
-          fontSize: 30,
-        },
-      },
-      config6: {
-        number: [0],
-        content: '{nt} 个',
-        animationFrame: 150,
-        animationCurve: 'easeOutCubic',
-        style: {
-          fontSize: 30,
-        },
-      },
-    };
-  },
-  mounted() {
-    const { config1, config2, config6 } = this;
-    config1.number = [80];
-    config2.number = [86];
-    config6.number = [180];
-    this.config1 = { ...this.config1 };
-    this.config2 = { ...this.config2 };
-    this.config6 = { ...this.config6 };
+    return {};
   },
 };
 </script>
@@ -82,8 +39,10 @@ export default {
     height: 100%;
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-around;
-    align-items: center;
+    justify-content: space-evenly;
+    align-content: space-evenly;
+    padding: 2vh;
+    box-sizing: border-box;
     .item {
       flex-basis: 45%;
       flex-shrink: 0;
@@ -95,19 +54,25 @@ export default {
         flex-direction: column;
         justify-content: space-evenly;
         align-items: center;
-        font-size: 20px;
+        font-size: 2.3vh;
         p {
           height: 30%;
           flex-shrink: 0;
           display: flex;
           align-items: center;
+          letter-spacing: 0.1vh;
+          font-size: 2.4vh;
           span {
-            margin-left: 10px;
-          }
-          .dv-digital-flop {
-            height: 100%;
+            margin-left: 1vh;
+            color: aquamarine;
+            font-size: 2.6vh;
           }
         }
+        .active {
+          color: aquamarine;
+          font-size: 3.8vh;
+          letter-spacing: 0.3vh;
+        }
       }
     }
   }
diff --git a/src/views/pageMonitor/topRight/index.vue b/src/views/pageMonitor/topRight/index.vue
index 9163c9f..4a33287 100644
--- a/src/views/pageMonitor/topRight/index.vue
+++ b/src/views/pageMonitor/topRight/index.vue
@@ -5,7 +5,7 @@
         <el-carousel-item v-for="item in 3" :key="item">
           <div class="item" v-for="(item1, index) in 21" :key="item1">
             <dv-border-box-2>
-              <p>WK{{ String(index + 1).padStart(2, '0') }}</p>
+              <p class="numFont">WK{{ String(index + 1).padStart(2, '0') }}</p>
               <p v-if="index % 3" style="color: #f00">手术中</p>
               <p v-else-if="index % 5" style="color: #ff0">麻醉结束</p>
               <p v-else style="color: #fff">空置中</p>
@@ -38,29 +38,30 @@ export default {
     }
     .el-carousel__item {
       height: 100%;
+      padding: 2vh;
+      box-sizing: border-box;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-evenly;
+      align-content: space-evenly;
       .item {
-        float: left;
-        width: 13%;
-        padding-top: 10%;
-        position: relative;
-        margin-left: 1%;
-        margin-top: 1.8%;
+        flex-basis: 15.4vh;
+        height: 12vh;
+        flex-shrink: 0;
         > div {
-          position: absolute;
           width: 100%;
           height: 100%;
-          top: 0;
-          left: 0;
           .border-box-content {
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: space-evenly;
+            letter-spacing: 0.1vh;
             p:first-child {
-              font-size: 18px;
+              font-size: 2.4vh;
             }
             p:last-child {
-              font-size: 22px;
+              font-size: 2.6vh;
             }
           }
         }
diff --git a/src/views/pageOperation/index.vue b/src/views/pageOperation/index.vue
index e2da19c..0bf9bbc 100644
--- a/src/views/pageOperation/index.vue
+++ b/src/views/pageOperation/index.vue
@@ -29,18 +29,18 @@ export default {
 .operation {
   width: 100%;
   height: 100%;
-  padding: 20px;
+  padding: 2vh;
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
   .leftBox {
-    flex-basis: 30%;
+    flex-basis: 25%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
   }
   .rightBox {
-    flex-basis: 69%;
+    flex-basis: 74%;
   }
 }
 </style>
diff --git a/src/views/pageOperation/leftBottom/index.vue b/src/views/pageOperation/leftBottom/index.vue
index 8281075..8d3e382 100644
--- a/src/views/pageOperation/leftBottom/index.vue
+++ b/src/views/pageOperation/leftBottom/index.vue
@@ -11,6 +11,9 @@ export default {
   data() {
     return {
       option: {
+        grid: {
+          left: '18%',
+        },
         xAxis: {
           type: 'category',
           data: ['3月', '4月', '5月', '6月', '7月', '8月'],
@@ -57,6 +60,6 @@ export default {
 
 <style lang="scss" scoped>
 .leftBottom {
-  height: 49%;
+  height: 39%;
 }
 </style>
diff --git a/src/views/pageOperation/leftTop/index.vue b/src/views/pageOperation/leftTop/index.vue
index cc1cf56..9a438b6 100644
--- a/src/views/pageOperation/leftTop/index.vue
+++ b/src/views/pageOperation/leftTop/index.vue
@@ -1,15 +1,12 @@
 <template>
   <div class="leftTop">
     <dv-border-box-13>
-      <dv-border-box-2 class="item">
-        <p>首台准点率 <span>80%</span></p>
-      </dv-border-box-2>
-      <dv-decoration-2 />
-      <dv-border-box-2 class="item">
-        <p>总人数 <span>400</span></p>
-        <p>进行中 <span>180</span></p>
-        <p>待进行 <span>220</span></p>
-      </dv-border-box-2>
+      <dv-charts :option="option"></dv-charts>
+      <section class="dataSection">
+        <p>总人数<span class="numFont">400</span></p>
+        <p>进行中<span class="numFont">180</span></p>
+        <p>待进行<span class="numFont">220</span></p>
+      </section>
     </dv-border-box-13>
   </div>
 </template>
@@ -17,42 +14,74 @@
 <script>
 export default {
   data() {
-    return {};
+    return {
+      option: {
+        series: [
+          {
+            type: 'gauge',
+            startAngle: -Math.PI / 2,
+            endAngle: Math.PI * 1.5,
+            arcLineWidth: 35,
+            data: [{ name: 'itemA', value: 80, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] }],
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+            dataItemStyle: {
+              lineCap: 'round',
+            },
+            details: {
+              show: true,
+              formatter: '首台准点率 {value}%',
+              style: {
+                fill: 'aqua',
+                fontSize: 24,
+              },
+            },
+            backgroundArc: {
+              style: {
+                stroke: '#4F518C',
+              },
+            },
+          },
+        ],
+      },
+    };
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .leftTop {
-  height: 49%;
+  height: 59%;
+  position: relative;
   :deep(.dv-border-box-13) {
-    padding: 20px;
+    padding: 2vh;
     box-sizing: border-box;
-    > div {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      align-items: center;
-      .item {
-        height: 45%;
-        .border-box-content {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-          align-items: center;
-          padding: 20px 0 ;
-          box-sizing: border-box;
-          p {
-            font-size: 20px;
-            span {
-              font-size: 24px;
-              color: #61bad3;
-            }
-          }
-        }
-      }
-      .dv-decoration-2 {
-        height: 2%;
+    .dv-charts-container {
+      height: 80%;
+    }
+  }
+  .dataSection {
+    width: 100%;
+    position: absolute;
+    bottom: 1.4vh;
+    p {
+      color: #fff;
+      font-size: 2.4vh;
+      text-align: center;
+      letter-spacing: .2vh;
+      line-height: 4vh;
+      span {
+        font-size: 2.6vh;
+        color: aqua;
+        letter-spacing: 0.1vh;
+        margin-left: 1vh;
       }
     }
   }
diff --git a/src/views/pageOperation/rightMiddle/index.vue b/src/views/pageOperation/rightMiddle/index.vue
index 3aba870..befb443 100644
--- a/src/views/pageOperation/rightMiddle/index.vue
+++ b/src/views/pageOperation/rightMiddle/index.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="rightMiddle">
-    <dv-scroll-board :config="config" />
+    <dv-border-box-13>
+      <dv-scroll-board :config="config" />
+    </dv-border-box-13>
   </div>
 </template>
 
@@ -37,6 +39,7 @@ export default {
         rowNum: 12,
         waitTime: 10000,
         carousel: 'page',
+        headerBGC:"#1D70A2",
       },
     };
   },
@@ -46,19 +49,22 @@ export default {
 <style lang="scss" scoped>
 .rightMiddle {
   height: 100%;
-  :deep(.dv-scroll-board) {
+  :deep(.dv-border-box-13) {
     box-sizing: border-box;
-    height: 100%;
-    .header-item {
-      font-size: 18px;
-    }
-    .ceil {
-      font-size: 18px;
-      white-space: nowrap;
-    }
-    .row-item {
-      .ceil:last-child {
-        color: #87ceeb;
+    padding: 2vh;
+    .dv-scroll-board {
+      height: 100%;
+      .header-item {
+        font-size: 2vh;
+      }
+      .ceil {
+        font-size: 1.8vh;
+        white-space: nowrap;
+      }
+      .row-item {
+        .ceil:last-child {
+          color: #87ceeb;
+        }
       }
     }
   }
diff --git a/src/views/pageRoom/leftMiddle/index.vue b/src/views/pageRoom/leftMiddle/index.vue
index 7c63a5d..3b2c45b 100644
--- a/src/views/pageRoom/leftMiddle/index.vue
+++ b/src/views/pageRoom/leftMiddle/index.vue
@@ -3,17 +3,17 @@
     <dv-border-box-13>
       <dv-border-box-2 class="item">
         <p>手术间数</p>
-        <span>80</span>
+        <span class="numFont">80</span>
       </dv-border-box-2>
       <dv-decoration-2 />
       <dv-border-box-2 class="item">
         <p>手术间利用率</p>
-        <span>72%</span>
+        <span class="numFont">72%</span>
       </dv-border-box-2>
       <dv-decoration-2 />
       <dv-border-box-2 class="item">
         <p>平均接台时间</p>
-        <span>45分钟</span>
+        <span class="numFont">45分钟</span>
       </dv-border-box-2>
     </dv-border-box-13>
   </div>
@@ -27,7 +27,7 @@ export default {};
 .leftMiddle {
   height: 100%;
   :deep(.dv-border-box-13) {
-    padding: 20px;
+    padding: 2vh;
     box-sizing: border-box;
     > div {
       display: flex;
@@ -41,13 +41,13 @@ export default {};
           flex-direction: column;
           justify-content: space-around;
           align-items: center;
-          padding: 20px 0;
+          padding: 2vh 0;
           box-sizing: border-box;
           p {
-            font-size: 24px;
+            font-size: 2.4vh;
           }
           span {
-            font-size: 30px;
+            font-size: 3.6vh;
             color: #61bad3;
           }
         }
diff --git a/src/views/pageRoom/rightMiddle/index.vue b/src/views/pageRoom/rightMiddle/index.vue
index 9885319..5e7bd14 100644
--- a/src/views/pageRoom/rightMiddle/index.vue
+++ b/src/views/pageRoom/rightMiddle/index.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="rightMiddle">
-    <dv-charts :option="option"></dv-charts>
+    <dv-border-box-13>
+      <dv-loading v-if="isLoding">Loading...</dv-loading>
+      <section v-else>
+        <dv-charts :option="option"></dv-charts>
+      </section>
+    </dv-border-box-13>
   </div>
 </template>
 
@@ -8,15 +13,16 @@
 export default {
   data() {
     return {
+      isLoding: true,
       option: {
         xAxis: {
           type: 'category',
           position: 'top',
           data: 'value',
           min: 0,
-          max: 23,
+          max: 24,
           minInterval: 1,
-          splitNumber: 24,
+          splitNumber: 25,
           axisLabel: {
             style: {
               stroke: '#fff',
@@ -24,9 +30,6 @@ export default {
             },
             formatter: dataItem => `${String(dataItem.value).padStart(2, '0')}:00`,
           },
-          axisLine: {
-            show: false,
-          },
         },
         yAxis: {
           data: [],
@@ -42,35 +45,42 @@ export default {
       },
     };
   },
-  created() {
-    // 手术间数量
-    const num = 8;
-    // 生成手术间
-    for (let index = num; index >= 1; index--) {
-      this.option.yAxis.data.push(`手术间${String(index).padStart(2, '0')}`);
-    }
-    // 生成对应的使用率数据
-    for (let index = 1; index <= 24; index++) {
-      let seriesData = {
-        name: `bar${String(index).padStart(2, '0')}`,
-        type: 'bar',
-        stack: 'bar',
-        data: [],
-        independentColor: true,
-        independentColors: [],
-        barWidth: 10,
-      };
-      for (let sunIndex = 0; sunIndex < num; sunIndex++) {
-        const isUse = Math.random() < 0.7;
-        seriesData.data.push(1);
-        if (isUse) {
-          seriesData.independentColors.push('#87ceeb');
-        } else {
-          seriesData.independentColors.push('rgb(128,128,128)');
+  mounted() {
+    setTimeout(() => {
+      // 手术间数量
+      const num = 12;
+      // 生成手术间
+      for (let index = num; index >= 1; index--) {
+        this.option.yAxis.data.push(`手术间${String(index).padStart(2, '0')}`);
+      }
+      // 生成对应的使用率数据
+      for (let index = 1; index <= 24; index++) {
+        let seriesData = {
+          name: `bar${String(index).padStart(2, '0')}`,
+          type: 'bar',
+          stack: 'bar',
+          data: [],
+          independentColor: true,
+          independentColors: [],
+          barWidth: '40%',
+          barStyle: {
+            stroke: 'rgb(128,128,128)',
+          },
+        };
+        for (let sunIndex = 0; sunIndex < num; sunIndex++) {
+          const isUse = Math.random() < 0.7;
+          seriesData.data.push(1);
+          if (isUse) {
+            seriesData.independentColors.push('#87ceeb');
+          } else {
+            seriesData.independentColors.push('rgb(128,128,128)');
+          }
         }
+        this.option.series.push(seriesData);
       }
-      this.option.series.push(seriesData);
-    }
+      this.option = { ...this.option };
+      this.isLoding = false;
+    }, 500);
   },
 };
 </script>
@@ -78,6 +88,16 @@ export default {
 <style lang="scss" scoped>
 .rightMiddle {
   height: 100%;
-  background-color: gray;
+  :deep(.dv-border-box-13) {
+    padding: 2vh;
+    box-sizing: border-box;
+    section {
+      height: 100%;
+      background-color: gray;
+      .dv-charts-container {
+        height: 100%;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/pageScheduling/index.vue b/src/views/pageScheduling/index.vue
index 1308465..2b7bc40 100644
--- a/src/views/pageScheduling/index.vue
+++ b/src/views/pageScheduling/index.vue
@@ -14,68 +14,42 @@ export default {
       titleWidth: 380,
       config: {
         data: [
-          ['WK01 郑六、小李、杨三、孙七', 'WK02 小红、小李、杨三、小刚', 'WK03 赵六、吴四、赵十五'],
-          ['WK04 李八、吴四、王五、钟二十一', 'WK05 刘一、小丽、小明', 'WK06 小刚、黄十二、小明、周十六'],
-          ['WK07 李四、郑六、吴十九、孙七', 'WK08 小李、吴四、李八', 'WK09 吴四、吴十九、李四、小丽、钟二十一'],
-          [
-            'WK10 李四、吴十九、王五、陈十七、杨三',
-            'WK11 黄十二、张三、小丽、小红、小李',
-            'WK12 杨十八、钟二十一、陈十七、小刚、许二十',
-          ],
-          ['WK13 杨三、周五、朱九', 'WK14 朱九、郑六、小刚、孙七', 'WK15 许二十、陈二、刘一'],
-          [
-            'WK16 郑六、许二十、小红、朱九、杨十八',
-            'WK17 郑六、刘一、吴十九、钟二十一、小李',
-            'WK18 钟二十一、杨三、林十一、小红、吴十九',
-          ],
-          [
-            'WK19 小李、小明、王五、许二十',
-            'WK20 刘一、杨十八、小丽、赵六、陈十七',
-            'WK21 小刚、孙七、吴四、黄十二、钟二十一',
-          ],
-          ['WK22 黄十二、郑六、王十四、林十一、小明', 'WK23 刘一、小刚、小丽、赵六', 'WK24 周五、王五、黄十二、李八'],
-          ['WK25 郑六、周十六、王五、张三', 'WK26 陈十七、吴十九、陈二、张三', 'WK27 小明、林十一、李四'],
-          [
-            'WK28 小红、赵十五、陈二、李八、朱九',
-            'WK29 陈十七、小丽、张三、王十四',
-            'WK30 陈二、王五、王十四、周五、吴十九',
-          ],
-          ['WK31 小红、杨十八、小丽', 'WK32 杨十八、陈二、小丽、郑六、林十一', 'WK33 张三、刘一、孙七、王五'],
-          ['WK34 小红、小刚、林十一', 'WK35 李四、杨十八、赵十五、朱九', 'WK36 朱九、赵六、张三、赵十五、小李'],
-          ['WK37 杨三、陈二、刘一', 'WK38 朱九、小明、吴十九、孙七', 'WK39 刘一、陈二、小刚、赵六'],
-          [
-            'WK40 王五、小红、刘十三、杨十八',
-            'WK41 赵十五、黄十二、周十六、张三',
-            'WK42 朱九、赵十五、周十六、李八、黄十二',
-          ],
-          ['WK43 小刚、吴十九、周五、朱九、李八', 'WK44 小李、周五、王五', 'WK45 杨十八、黄十二、李八'],
-          ['WK46 李四、小丽、王五、吴十九', 'WK47 何十、孙七、小李', 'WK48 林十一、钟二十一、小刚、刘一'],
-          [
-            'WK49 赵十五、王五、周十六、小丽、杨十八',
-            'WK50 郑六、周十六、李八',
-            'WK51 王十四、小刚、赵十五、陈二、林十一',
-          ],
-          ['WK52 小刚、李四、吴十九', 'WK53 周五、李八、周十六', 'WK54 吴十九、周十六、林十一'],
-          ['WK55 郑六、小李、王五、李八、钟二十一', 'WK56 小李、刘十三、周五', 'WK57 何十、周十六、吴四、小红、许二十'],
-          [
-            'WK58 孙七、杨十八、陈十七、王五、李八',
-            'WK59 赵六、杨十八、周十六',
-            'WK60 杨三、周十六、刘一、赵六、许二十',
-          ],
-          [
-            'WK61 钟二十一、杨十八、刘一、杨三、黄十二',
-            'WK62 李八、何十、刘十三、王五、陈十七',
-            'WK63 李八、朱九、王十四、小丽、郑六',
-          ],
-          [
-            'WK64 刘十三、小明、黄十二、小红',
-            'WK65 杨十八、陈二、黄十二、赵六、周十六',
-            'WK66 赵六、吴十九、小丽、刘一、张三',
-          ],
-          ['WK67 孙七、小刚、王五、吴四', 'WK68 刘十三、周十六、王十四、张三、杨三', 'WK69 杨十八、李八、孙七、陈十七'],
-          ['WK70 小李、陈十七、张三', 'WK71 赵六、刘一、钟二十一、赵十五', 'WK72 杨三、钟二十一、小红、小李、王十四'],
-          ['WK73 周十六、小刚、小李、小红、陈十七', 'WK74 吴十九、孙七、小红', 'WK75 刘一、李四、周十六'],
-          ['WK76 杨十八、郑六、陈十七、赵六', 'WK77 李八、张三、小丽', 'WK78 王五、吴十九、刘一、孙七、何十'],
+          ['WK01 王总、小红、乐迪', 'WK02 魏兄、乐迪、方老师', 'WK03 省文、魏兄、方老师'],
+          ['WK04 省文、魏兄、方老师', 'WK05 乐迪、魏兄、小红', 'WK06 省文、方老师、小红'],
+          ['WK07 乐迪、王总、方老师', 'WK08 省文、乐迪、小红', 'WK09 魏兄、王总、小红'],
+          ['WK10 乐迪、魏兄、王总', 'WK11 魏兄、乐迪、小红', 'WK12 魏兄、王总、乐迪'],
+          ['WK13 王总、小红、魏兄', 'WK14 魏兄、王总、方老师', 'WK15 乐迪、方老师、小红'],
+          ['WK16 省文、方老师、王总', 'WK17 魏兄、小红、方老师', 'WK18 魏兄、方老师、小红'],
+          ['WK19 乐迪、魏兄、王总', 'WK20 魏兄、小红、方老师', 'WK21 王总、小红、魏兄'],
+          ['WK22 乐迪、魏兄、小红', 'WK23 乐迪、王总、小红', 'WK24 乐迪、方老师、小红'],
+          ['WK25 省文、魏兄、方老师', 'WK26 乐迪、小红、王总', 'WK27 省文、方老师、小红'],
+          ['WK28 乐迪、魏兄、小红', 'WK29 魏兄、方老师、王总', 'WK30 乐迪、小红、魏兄'],
+          ['WK31 魏兄、乐迪、方老师', 'WK32 王总、魏兄、乐迪', 'WK33 乐迪、小红、方老师'],
+          ['WK34 乐迪、魏兄、小红', 'WK35 省文、魏兄、方老师', 'WK36 乐迪、小红、王总'],
+          ['WK37 省文、小红、乐迪', 'WK38 魏兄、王总、方老师', 'WK39 乐迪、方老师、小红'],
+          ['WK40 乐迪、小红、方老师', 'WK41 乐迪、魏兄、小红', 'WK42 省文、方老师、小红'],
+          ['WK43 乐迪、方老师、王总', 'WK44 王总、魏兄、小红', 'WK45 魏兄、王总、乐迪'],
+          ['WK46 乐迪、小红、王总', 'WK47 省文、小红、魏兄', 'WK48 王总、乐迪、方老师'],
+          ['WK49 王总、小红、魏兄', 'WK50 王总、乐迪、王总', 'WK51 乐迪、王总、小红'],
+          ['WK52 魏兄、方老师、乐迪', 'WK53 乐迪、魏兄、小红', 'WK54 乐迪、小红、方老师'],
+          ['WK55 乐迪、小红、魏兄', 'WK56 乐迪、方老师、魏兄', 'WK57 乐迪、小红、王总'],
+          ['WK58 省文、方老师、小红', 'WK59 乐迪、王总、小红', 'WK60 乐迪、魏兄、方老师'],
+          ['WK61 省文、方老师、魏兄', 'WK62 魏兄、乐迪、王总', 'WK63 乐迪、魏兄、小红'],
+          ['WK64 王总、小红、乐迪', 'WK65 乐迪、方老师、王总', 'WK66 乐迪、小红、方老师'],
+          ['WK67 魏兄、方老师、小红', 'WK68 王总、魏兄、方老师', 'WK69 乐迪、方老师、魏兄'],
+          ['WK70 王总、小红、方老师', 'WK71 省文、小红、魏兄', 'WK72 乐迪、王总、魏兄'],
+          ['WK73 魏兄、方老师、小红', 'WK74 乐迪、小红、方老师', 'WK75 乐迪、小红、魏兄'],
+          ['WK76 乐迪、方老师、魏兄', 'WK77 王总、乐迪、方老师', 'WK78 王总、魏兄、魏兄'],
+          [],
+          [],
+          [],
+          [],
+          [],
+          [],
+          [],
+          [],
+          [],
+          [],
         ],
         rowNum: 12,
         waitTime: 5000,
@@ -96,8 +70,8 @@ export default {
       padding: 3% 1% 0;
       box-sizing: border-box;
       height: 92%;
-      .ceil{
-        font-size: 20px;
+      .ceil {
+        font-size: 2vh;
         white-space: nowrap;
         /* border-right: 1px dashed #fff; */
       }