From 9b9fcf2b896c3fcb38b788a6697b9975f1ddec34 Mon Sep 17 00:00:00 2001
From: "@0Melon0" <576788380@qq.com>
Date: Tue, 3 Sep 2024 17:17:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E8=AF=B7=E6=B1=82=E9=97=B4=E9=9A=94=E6=97=B6=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/index.js                           |   8 +-
 src/views/pageMonitor/bottomLeft/index.vue   |  68 ++-----
 src/views/pageMonitor/bottomMiddle/index.vue | 200 +++++++++----------
 src/views/pageMonitor/bottomRight/index.vue  |  66 ++----
 src/views/pageMonitor/topLeft/index.vue      | 129 +++++-------
 src/views/pageMonitor/topRight/index.vue     | 156 ++++-----------
 src/views/pageOperation/leftBottom/index.vue |   5 +-
 src/views/pageOperation/leftTop/index.vue    | 117 +++++------
 src/views/pageOperation/rightMid/index.vue   | 124 ++++--------
 src/views/pageRoom/leftBottom/index.vue      |   5 +-
 src/views/pageRoom/leftTop/index.vue         |  74 ++++---
 src/views/pageRoom/rightMid/index.vue        | 173 +++++++---------
 src/views/pageScheduling/index.vue           |   2 +-
 13 files changed, 431 insertions(+), 696 deletions(-)

diff --git a/src/store/index.js b/src/store/index.js
index 3715d60..72b8e55 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,14 +1,16 @@
-import Vue from "vue";
-import Vuex from "vuex";
+import Vue from 'vue';
+import Vuex from 'vuex';
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
     isMock: false,
+    intervalTime: 30000, // 请求间隔时间
   },
   getters: {
-    isMock: (state) => state.isMock,
+    isMock: state => state.isMock,
+    intervalTime: state => state.intervalTime,
   },
   mutations: {},
   actions: {},
diff --git a/src/views/pageMonitor/bottomLeft/index.vue b/src/views/pageMonitor/bottomLeft/index.vue
index 1290b3b..3cff540 100644
--- a/src/views/pageMonitor/bottomLeft/index.vue
+++ b/src/views/pageMonitor/bottomLeft/index.vue
@@ -1,60 +1,34 @@
 <template>
-  <div
-    class="w-[51.29vh] h-[40.09vh] bgBottomLeftBox mt-[2.68vh] relative"
-    v-loading="isLoading"
-  >
-    <div
-      class="w-[45%] h-[5.07vh] ml-[1.85vh] flex justify-between items-center"
-    >
+  <div class="w-[51.29vh] h-[40.09vh] bgBottomLeftBox mt-[2.68vh] relative">
+    <div class="w-[45%] h-[5.07vh] ml-[1.85vh] flex justify-between items-center">
       <img src="@/assets/svg/Monitor/Triangle.svg" />
-      <span class="text-[2.03vh] youshe leading-none"
-        >科室手术量统计(前五)</span
-      >
+      <span class="text-[2.03vh] youshe leading-none">科室手术量统计(前五)</span>
     </div>
     <div class="w-[42.96vh] ml-[2.96vh] deptBody">
       <div class="h-[30vh] w-full">
-        <Histogram
-          v-if="getDataList.length"
-          :getDataList="getDataList"
-        ></Histogram>
-        <div
-          v-else
-          class="flex flex-col w-[100%] h-[100%] items-center justify-center"
-        >
+        <Histogram v-if="getDataList.length" :getDataList="getDataList"></Histogram>
+        <div v-else class="flex flex-col w-[100%] h-[100%] items-center justify-center">
           <img src="@/assets/img/noData.png" class="w-[120px]" />
           <span>暂无数据</span>
         </div>
       </div>
     </div>
-    <div
-      class="absolute right-0 top-1/4 w-[3.51vh] h-[12.6vh]"
-      :class="sliderClass"
-    >
-      <div
-        class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1] cursor-pointer"
-        @click="toWeek"
-      >
-        周
-      </div>
-      <div
-        class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1] cursor-pointer"
-        @click="toMonth"
-      >
-        月
-      </div>
+    <div class="absolute right-0 top-1/4 w-[3.51vh] h-[12.6vh]" :class="sliderClass">
+      <div class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1] cursor-pointer" @click="toWeek">周</div>
+      <div class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1] cursor-pointer" @click="toMonth">月</div>
     </div>
   </div>
 </template>
 
 <script>
-import { GetMonitorOperationDept } from "@/api/monitor";
-import dayjs from "dayjs";
-import Histogram from "@/views/pageMonitor/bottomRight/DepHistogram.vue";
+import { GetMonitorOperationDept } from '@/api/monitor';
+import dayjs from 'dayjs';
+import Histogram from '@/views/pageMonitor/bottomRight/DepHistogram.vue';
 export default {
   data() {
     return {
-      startDate: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
-      endDate: dayjs().format("YYYY-MM-DD"),
+      startDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
+      endDate: dayjs().format('YYYY-MM-DD'),
       sliderClass: {
         bgWeekBox: true,
         bgMonthBox: false,
@@ -73,21 +47,21 @@ export default {
       GetMonitorOperationDept({
         startDate: this.startDate,
         endDate: this.endDate,
-      }).then((res) => {
+      }).then(res => {
         // this.getDataList = [res["data"]] || [];
         // this.isLoading = false;
-        this.getDataList = res["data"] || [];
+        this.getDataList = res['data'] || [];
         this.isLoading = false;
       });
     },
     toWeek() {
-      this.startDate = dayjs().subtract(7, "day").format("YYYY-MM-DD");
+      this.startDate = dayjs().subtract(7, 'day').format('YYYY-MM-DD');
       this.sliderClass.bgWeekBox = true;
       this.sliderClass.bgMonthBox = false;
       this.onGetPageData();
     },
     toMonth() {
-      this.startDate = dayjs().subtract(30, "day").format("YYYY-MM-DD");
+      this.startDate = dayjs().subtract(30, 'day').format('YYYY-MM-DD');
       this.sliderClass.bgWeekBox = false;
       this.sliderClass.bgMonthBox = true;
       this.onGetPageData();
@@ -101,7 +75,7 @@ export default {
       } else {
         this.toWeek();
       }
-    }, 20000);
+    }, this.$store.getters.intervalTime);
   },
   beforeRouteLeave() {
     clearInterval(this.renderTimer);
@@ -111,19 +85,19 @@ export default {
 
 <style>
 .bgBottomLeftBox {
-  background-image: url("@/assets/svg/Monitor/BottomLeft/Box.svg");
+  background-image: url('@/assets/svg/Monitor/BottomLeft/Box.svg');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
 }
 .bgWeekBox {
-  background-image: url("@/assets/svg/Monitor/BottomLeft/WeekActive.svg");
+  background-image: url('@/assets/svg/Monitor/BottomLeft/WeekActive.svg');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
 }
 .bgMonthBox {
-  background-image: url("@/assets/svg/Monitor/BottomLeft/MonthActive.svg");
+  background-image: url('@/assets/svg/Monitor/BottomLeft/MonthActive.svg');
 }
 
 .deptBody {
diff --git a/src/views/pageMonitor/bottomMiddle/index.vue b/src/views/pageMonitor/bottomMiddle/index.vue
index 4f51657..f48dd50 100644
--- a/src/views/pageMonitor/bottomMiddle/index.vue
+++ b/src/views/pageMonitor/bottomMiddle/index.vue
@@ -1,15 +1,11 @@
 <template>
   <div class="w-[71.58vh] h-[40.09vh] bgBottomMidBox mt-[2.68vh] relative">
     <div class="flex">
-      <div
-        class="w-[12.4vh] h-[5.07vh] ml-[1.85vh] flex justify-between items-center"
-      >
+      <div class="w-[12.4vh] h-[5.07vh] ml-[1.85vh] flex justify-between items-center">
         <img src="@/assets/svg/Monitor/Triangle.svg" />
         <span class="text-[2.03vh] youshe leading-none">手术等级</span>
       </div>
-      <div
-        class="w-[12.4vh] h-[5.07vh] ml-[27vh] flex justify-between items-center"
-      >
+      <div class="w-[12.4vh] h-[5.07vh] ml-[27vh] flex justify-between items-center">
         <img src="@/assets/svg/Monitor/Triangle.svg" />
         <span class="text-[2.03vh] youshe leading-none">ASA分级</span>
       </div>
@@ -19,9 +15,7 @@
         <span title="手术等级">今日</span>
         <span title="ASA分级">今日</span>
       </div>
-      <div
-        class="w-[35.79vh] h-[24.62vh] border-r border-dashed border-r-[rgba(255,255,255,0.26)]"
-      >
+      <div class="w-[35.79vh] h-[24.62vh] border-r border-dashed border-r-[rgba(255,255,255,0.26)]">
         <div class="h-full" ref="echartsContainerLeft"></div>
       </div>
       <div class="w-[35.79vh] h-[24.62vh]">
@@ -32,13 +26,10 @@
 </template>
 
 <script>
-import * as echarts from "echarts";
-import {
-  GetMonitorOperationLevel,
-  GetMonitorOperationASALevel,
-} from "@/api/monitor";
-import { fnR } from "@/utils/common";
-import dayjs from "dayjs";
+import * as echarts from 'echarts';
+import { GetMonitorOperationLevel, GetMonitorOperationASALevel } from '@/api/monitor';
+import { fnR } from '@/utils/common';
+import dayjs from 'dayjs';
 let chartLeft = null;
 let chartRight = null;
 
@@ -49,18 +40,18 @@ export default {
       chartOptionsLeft: {
         series: [
           {
-            type: "pie",
-            radius: ["32%", "50%"],
-            selectedMode: "single",
+            type: 'pie',
+            radius: ['32%', '50%'],
+            selectedMode: 'single',
             data: [
-              { name: "一级", value: 148, selected: false },
-              { name: "二级", value: 87, selected: false },
-              { name: "三级", value: 75, selected: false },
-              { name: "四级", value: 40, selected: false },
+              { name: '一级', value: 148, selected: false },
+              { name: '二级', value: 87, selected: false },
+              { name: '三级', value: 75, selected: false },
+              { name: '四级', value: 40, selected: false },
             ],
             label: {
-              formatter: "{b}{c}",
-              color: "inherit",
+              formatter: '{b}{c}',
+              color: 'inherit',
             },
             labelLine: {
               show: true,
@@ -74,12 +65,12 @@ export default {
             },
           },
           {
-            name: "外边框-outBig",
-            type: "pie",
+            name: '外边框-outBig',
+            type: 'pie',
             clockWise: false, //顺时加载
             hoverAnimation: false, //鼠标移入变大
-            center: ["50%", "50%"],
-            radius: ["62%", "62%"],
+            center: ['50%', '50%'],
+            radius: ['62%', '62%'],
             label: {
               normal: {
                 show: false,
@@ -88,23 +79,23 @@ export default {
             data: [
               {
                 value: 9,
-                name: "",
+                name: '',
                 itemStyle: {
                   normal: {
                     borderWidth: 2,
-                    borderColor: "#2F58B4",
+                    borderColor: '#2F58B4',
                   },
                 },
               },
             ],
           },
           {
-            name: "外边框-outSmall",
-            type: "pie",
+            name: '外边框-outSmall',
+            type: 'pie',
             clockWise: false, //顺时加载
             hoverAnimation: false, //鼠标移入变大
-            center: ["50%", "50%"],
-            radius: ["57%", "57%"],
+            center: ['50%', '50%'],
+            radius: ['57%', '57%'],
             label: {
               normal: {
                 show: false,
@@ -112,48 +103,48 @@ export default {
             },
             showEmptyCircle: true,
             itemStyle: {
-              shadowColor: "rgba(255, 0, 0, 1)",
+              shadowColor: 'rgba(255, 0, 0, 1)',
               shadowBlur: 10,
               opacity: 1,
             },
             data: [
               {
                 value: 9,
-                name: "",
+                name: '',
                 itemStyle: {
                   normal: {
                     borderWidth: 2,
-                    borderColor: "#0D447C",
+                    borderColor: '#0D447C',
                   },
                 },
               },
             ],
           },
           {
-            name: "内边框-inBig",
-            type: "pie",
+            name: '内边框-inBig',
+            type: 'pie',
             clockWise: true, //顺时加载
             hoverAnimation: false, //鼠标移入变大
-            center: ["50%", "50%"],
-            radius: ["25%", "25%"],
+            center: ['50%', '50%'],
+            radius: ['25%', '25%'],
             label: {
               normal: {
                 show: false,
               },
             },
             itemStyle: {
-              shadowColor: "rgba(255, 0, 0, 1)",
+              shadowColor: 'rgba(255, 0, 0, 1)',
               shadowBlur: 10,
               opacity: 1,
             },
             data: [
               {
                 value: 9,
-                name: "",
+                name: '',
                 itemStyle: {
                   normal: {
                     borderWidth: 2,
-                    borderColor: "#006CFF",
+                    borderColor: '#006CFF',
                     opacity: 0.4,
                   },
                 },
@@ -161,12 +152,12 @@ export default {
             ],
           },
           {
-            name: "内边框-inSmall",
-            type: "pie",
+            name: '内边框-inSmall',
+            type: 'pie',
             clockWise: true, //顺时加载
             hoverAnimation: false, //鼠标移入变大
-            center: ["50%", "50%"],
-            radius: ["20%", "20%"],
+            center: ['50%', '50%'],
+            radius: ['20%', '20%'],
             label: {
               normal: {
                 show: false,
@@ -175,11 +166,11 @@ export default {
             data: [
               {
                 value: 9,
-                name: "",
+                name: '',
                 itemStyle: {
                   normal: {
                     borderWidth: 2,
-                    borderColor: "#fff",
+                    borderColor: '#fff',
                     opacity: 0.2,
                   },
                 },
@@ -191,19 +182,19 @@ export default {
       chartOptionsRight: {
         series: [
           {
-            type: "pie",
-            radius: ["32%", "50%"],
-            selectedMode: "single",
+            type: 'pie',
+            radius: ['32%', '50%'],
+            selectedMode: 'single',
             data: [
-              { name: "I级", value: 137, selected: false },
-              { name: "II级", value: 105, selected: false },
-              { name: "III级", value: 58, selected: false },
-              { name: "IV级", value: 37, selected: false },
-              { name: "V级", value: 13, selected: false },
+              { name: 'I级', value: 137, selected: false },
+              { name: 'II级', value: 105, selected: false },
+              { name: 'III级', value: 58, selected: false },
+              { name: 'IV级', value: 37, selected: false },
+              { name: 'V级', value: 13, selected: false },
             ],
             label: {
-              formatter: "{b}{c}",
-              color: "inherit",
+              formatter: '{b}{c}',
+              color: 'inherit',
             },
             labelLine: {
               show: true,
@@ -217,12 +208,12 @@ export default {
             },
           },
           {
-            name: "外边框-outBig",
-            type: "pie",
+            name: '外边框-outBig',
+            type: 'pie',
             clockWise: false, //顺时加载
             hoverAnimation: false, //鼠标移入变大
-            center: ["50%", "50%"],
-            radius: ["62%", "62%"],
+            center: ['50%', '50%'],
+            radius: ['62%', '62%'],
             label: {
               normal: {
                 show: false,
@@ -231,23 +222,23 @@ export default {
             data: [
               {
                 value: 9,
-                name: "",
+                name: '',
                 itemStyle: {
                   normal: {
                     borderWidth: 2,
-                    borderColor: "#2F58B4",
+                    borderColor: '#2F58B4',
                   },
                 },
               },
             ],
           },
           {
-            name: "外边框-outSmall",
-            type: "pie",
+            name: '外边框-outSmall',
+            type: 'pie',
             clockWise: false, //顺时加载
             hoverAnimation: false, //鼠标移入变大
-            center: ["50%", "50%"],
-            radius: ["57%", "57%"],
+            center: ['50%', '50%'],
+            radius: ['57%', '57%'],
             label: {
               normal: {
                 show: false,
@@ -255,48 +246,48 @@ export default {
             },
             showEmptyCircle: true,
             itemStyle: {
-              shadowColor: "rgba(255, 0, 0, 1)",
+              shadowColor: 'rgba(255, 0, 0, 1)',
               shadowBlur: 10,
               opacity: 1,
             },
             data: [
               {
                 value: 9,
-                name: "",
+                name: '',
                 itemStyle: {
                   normal: {
                     borderWidth: 2,
-                    borderColor: "#0D447C",
+                    borderColor: '#0D447C',
                   },
                 },
               },
             ],
           },
           {
-            name: "内边框-inBig",
-            type: "pie",
+            name: '内边框-inBig',
+            type: 'pie',
             clockWise: true, //顺时加载
             hoverAnimation: false, //鼠标移入变大
-            center: ["50%", "50%"],
-            radius: ["25%", "25%"],
+            center: ['50%', '50%'],
+            radius: ['25%', '25%'],
             label: {
               normal: {
                 show: false,
               },
             },
             itemStyle: {
-              shadowColor: "rgba(255, 0, 0, 1)",
+              shadowColor: 'rgba(255, 0, 0, 1)',
               shadowBlur: 10,
               opacity: 1,
             },
             data: [
               {
                 value: 9,
-                name: "",
+                name: '',
                 itemStyle: {
                   normal: {
                     borderWidth: 2,
-                    borderColor: "#006CFF",
+                    borderColor: '#006CFF',
                     opacity: 0.4,
                   },
                 },
@@ -304,12 +295,12 @@ export default {
             ],
           },
           {
-            name: "内边框-inSmall",
-            type: "pie",
+            name: '内边框-inSmall',
+            type: 'pie',
             clockWise: true, //顺时加载
             hoverAnimation: false, //鼠标移入变大
-            center: ["50%", "50%"],
-            radius: ["20%", "20%"],
+            center: ['50%', '50%'],
+            radius: ['20%', '20%'],
             label: {
               normal: {
                 show: false,
@@ -318,11 +309,11 @@ export default {
             data: [
               {
                 value: 9,
-                name: "",
+                name: '',
                 itemStyle: {
                   normal: {
                     borderWidth: 2,
-                    borderColor: "#fff",
+                    borderColor: '#fff',
                     opacity: 0.2,
                   },
                 },
@@ -331,30 +322,22 @@ export default {
           },
         ],
       },
-      toDate: dayjs().format("YYYY-MM-DD"),
+      toDate: dayjs().format('YYYY-MM-DD'),
     };
   },
   methods: {
     onGetPageData() {
       this.isLoading = true;
-      Promise.all([
-        GetMonitorOperationLevel(this.toDate),
-        GetMonitorOperationASALevel(this.toDate),
-      ]).then((res) => {
-        this.chartOptionsLeft.series[0].data[0].value = res[0].data["level1"];
-        this.chartOptionsLeft.series[0].data[1].value = res[0].data["level2"];
-        this.chartOptionsLeft.series[0].data[2].value = res[0].data["level3"];
-        this.chartOptionsLeft.series[0].data[3].value = res[0].data["level4"];
-        this.chartOptionsRight.series[0].data[0].value =
-          res[1].data["asaLevel1"];
-        this.chartOptionsRight.series[0].data[1].value =
-          res[1].data["asaLevel2"];
-        this.chartOptionsRight.series[0].data[2].value =
-          res[1].data["asaLevel3"];
-        this.chartOptionsRight.series[0].data[3].value =
-          res[1].data["asaLevel4"];
-        this.chartOptionsRight.series[0].data[4].value =
-          res[1].data["asaLevel5"];
+      Promise.all([GetMonitorOperationLevel(this.toDate), GetMonitorOperationASALevel(this.toDate)]).then(res => {
+        this.chartOptionsLeft.series[0].data[0].value = res[0].data['level1'];
+        this.chartOptionsLeft.series[0].data[1].value = res[0].data['level2'];
+        this.chartOptionsLeft.series[0].data[2].value = res[0].data['level3'];
+        this.chartOptionsLeft.series[0].data[3].value = res[0].data['level4'];
+        this.chartOptionsRight.series[0].data[0].value = res[1].data['asaLevel1'];
+        this.chartOptionsRight.series[0].data[1].value = res[1].data['asaLevel2'];
+        this.chartOptionsRight.series[0].data[2].value = res[1].data['asaLevel3'];
+        this.chartOptionsRight.series[0].data[3].value = res[1].data['asaLevel4'];
+        this.chartOptionsRight.series[0].data[4].value = res[1].data['asaLevel5'];
         if (this.$store.getters.isMock) {
           this.chartOptionsLeft.series[0].data[0].value = fnR();
           this.chartOptionsLeft.series[0].data[1].value = fnR();
@@ -378,13 +361,16 @@ export default {
     chartRight = echarts.init(this.$refs.echartsContainerRight);
     chartRight.setOption(this.chartOptionsRight);
     this.onGetPageData();
+    setInterval(() => {
+      this.onGetPageData();
+    }, this.$store.getters.intervalTime);
   },
 };
 </script>
 
 <style>
 .bgBottomMidBox {
-  background-image: url("@/assets/svg/Monitor/BottomMid/Box.svg");
+  background-image: url('@/assets/svg/Monitor/BottomMid/Box.svg');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
diff --git a/src/views/pageMonitor/bottomRight/index.vue b/src/views/pageMonitor/bottomRight/index.vue
index 410807d..8bb8549 100644
--- a/src/views/pageMonitor/bottomRight/index.vue
+++ b/src/views/pageMonitor/bottomRight/index.vue
@@ -1,59 +1,35 @@
 <template>
-  <div
-    class="w-[41.75vh] h-[40.09vh] bgBottomRightBox mt-[2.68vh] relative"
-    v-loading="isLoading"
-  >
-    <div
-      class="w-[34%] h-[5.07vh] ml-[1.85vh] flex justify-between items-center"
-    >
+  <div class="w-[41.75vh] h-[40.09vh] bgBottomRightBox mt-[2.68vh] relative">
+    <div class="w-[34%] h-[5.07vh] ml-[1.85vh] flex justify-between items-center">
       <img src="@/assets/svg/Monitor/Triangle.svg" />
       <span class="text-[2.03vh] youshe leading-none">手术量统计</span>
     </div>
     <div class="w-[35.46vh] h-[28.05vh] ml-[2.4vh] opBody">
       <div class="h-[30vh] w-full">
-        <Histogram
-          v-if="getDataList.length"
-          :getDataList="getDataList"
-        ></Histogram>
-        <div
-          v-else
-          class="flex flex-col w-[100%] h-[100%] items-center justify-center"
-        >
+        <Histogram v-if="getDataList.length" :getDataList="getDataList"></Histogram>
+        <div v-else class="flex flex-col w-[100%] h-[100%] items-center justify-center">
           <img src="@/assets/img/noData.png" class="w-[120px]" />
           <span>暂无数据</span>
         </div>
       </div>
     </div>
-    <div
-      class="absolute right-0 top-1/4 w-[3.51vh] h-[12.6vh]"
-      :class="sliderClass"
-    >
-      <div
-        class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1] cursor-pointer"
-        @click="toWeek"
-      >
-        周
-      </div>
-      <div
-        class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1] cursor-pointer"
-        @click="toMonth"
-      >
-        月
-      </div>
+    <div class="absolute right-0 top-1/4 w-[3.51vh] h-[12.6vh]" :class="sliderClass">
+      <div class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1] cursor-pointer" @click="toWeek">周</div>
+      <div class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1] cursor-pointer" @click="toMonth">月</div>
     </div>
   </div>
 </template>
 
 <script>
-import { GetMonitorOperationNumber } from "@/api/monitor";
-import dayjs from "dayjs";
-import Histogram from "@/views/pageMonitor/bottomLeft/OpHistogram.vue";
+import { GetMonitorOperationNumber } from '@/api/monitor';
+import dayjs from 'dayjs';
+import Histogram from '@/views/pageMonitor/bottomLeft/OpHistogram.vue';
 
 export default {
   data() {
     return {
-      startDate: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
-      endDate: dayjs().format("YYYY-MM-DD"),
+      startDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
+      endDate: dayjs().format('YYYY-MM-DD'),
       sliderClass: {
         bgWeekBox: true,
         bgMonthBox: false,
@@ -72,22 +48,22 @@ export default {
       GetMonitorOperationNumber({
         startDate: this.startDate,
         endDate: this.endDate,
-      }).then((res) => {
+      }).then(res => {
         // this.getDataList = res["data"] || [];
         // this.isLoading = false;
 
-        this.getDataList = [res["data"]] || [];
+        this.getDataList = [res['data']] || [];
         this.isLoading = false;
       });
     },
     toWeek() {
-      this.startDate = dayjs().subtract(7, "day").format("YYYY-MM-DD");
+      this.startDate = dayjs().subtract(7, 'day').format('YYYY-MM-DD');
       this.sliderClass.bgWeekBox = true;
       this.sliderClass.bgMonthBox = false;
       this.onGetPageData();
     },
     toMonth() {
-      this.startDate = dayjs().subtract(30, "day").format("YYYY-MM-DD");
+      this.startDate = dayjs().subtract(30, 'day').format('YYYY-MM-DD');
       this.sliderClass.bgWeekBox = false;
       this.sliderClass.bgMonthBox = true;
       this.onGetPageData();
@@ -101,7 +77,7 @@ export default {
       } else {
         this.toWeek();
       }
-    }, 20000);
+    }, this.$store.getters.intervalTime);
   },
   beforeRouteLeave() {
     clearInterval(this.renderTimer);
@@ -111,21 +87,21 @@ export default {
 
 <style>
 .bgBottomRightBox {
-  background-image: url("@/assets/svg/Monitor/BottomRight/Box.svg");
+  background-image: url('@/assets/svg/Monitor/BottomRight/Box.svg');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
 }
 .bgWeekBox {
-  background-image: url("@/assets/svg/Monitor/BottomLeft/WeekActive.svg");
+  background-image: url('@/assets/svg/Monitor/BottomLeft/WeekActive.svg');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
 }
 .bgMonthBox {
-  background-image: url("@/assets/svg/Monitor/BottomLeft/MonthActive.svg");
+  background-image: url('@/assets/svg/Monitor/BottomLeft/MonthActive.svg');
 }
-.opBody{
+.opBody {
   height: calc(100% - 5.07vh);
   display: flex;
   justify-content: center;
diff --git a/src/views/pageMonitor/topLeft/index.vue b/src/views/pageMonitor/topLeft/index.vue
index 80943e2..545c58b 100644
--- a/src/views/pageMonitor/topLeft/index.vue
+++ b/src/views/pageMonitor/topLeft/index.vue
@@ -1,40 +1,24 @@
 <template>
-  <div
-    class="w-[51.29vh] h-[39.62vh] bgTopLeftBox bg-contain bg-center bg-no-repeat p-[3vh] box-border"
-    v-loading="isLoading"
-  >
+  <div class="w-[51.29vh] h-[39.62vh] bgTopLeftBox bg-contain bg-center bg-no-repeat p-[3vh] box-border">
     <section class="flex justify-between">
       <template v-for="(item, index) in overviewData">
-        <div
-          class="w-[12.96vh] h-[14.81vh] bgTopLeftItemBox bg-contain bg-no-repeat pl-[1.48vh] py-[0.92vh]"
-          :key="index"
-        >
+        <div class="w-[12.96vh] h-[14.81vh] bgTopLeftItemBox bg-contain bg-no-repeat pl-[1.48vh] py-[0.92vh]" :key="index">
           <img src="@/assets/svg/Monitor/TopLeft/TriangleBlue.svg" />
-          <p
-            class="tracking-[0.27vh] text-[1.48vh] leading-none mt-[2vh] mb-[2vh] opacity-80"
-          >
-            {{ item["itemName"] }}
+          <p class="tracking-[0.27vh] text-[1.48vh] leading-none mt-[2vh] mb-[2vh] opacity-80">
+            {{ item['itemName'] }}
           </p>
           <p class="">
-            <span class="text-[4.25vh] youshe text-[#733FF3] leading-none">{{
-              item["itemVal"]
-            }}</span>
-            <span class="text-[2.22vh] youshe text-[#733FF3] leading-none">{{
-              item["itemUnit"]
-            }}</span>
+            <span class="text-[4.25vh] youshe text-[#733FF3] leading-none">{{ item['itemVal'] }}</span>
+            <span class="text-[2.22vh] youshe text-[#733FF3] leading-none">{{ item['itemUnit'] }}</span>
           </p>
         </div>
       </template>
     </section>
-    <div
-      class="w-[45.18vh] h-[14.81vh] bgTopLeftItemBoxPurple bg-contain bg-no-repeat mt-[3.7vh] px-[2.96vh] py-[2.4vh] flex justify-between items-center"
-    >
+    <div class="w-[45.18vh] h-[14.81vh] bgTopLeftItemBoxPurple bg-contain bg-no-repeat mt-[3.7vh] px-[2.96vh] py-[2.4vh] flex justify-between items-center">
       <section>
         <div class="flex">
           <img src="@/assets/svg/Monitor/TopLeft/TrianglePurple.svg" />
-          <span class="youshe text-[1.75vh] ml-[1.11vh] opacity-80"
-            >总人数</span
-          >
+          <span class="youshe text-[1.75vh] ml-[1.11vh] opacity-80">总人数</span>
         </div>
         <p class="text-[#B53FDF] text-[4.07vh] mt-[1.4vh] youshe leading-none">
           {{ totalPopulation }}
@@ -42,21 +26,13 @@
       </section>
       <section>
         <template v-for="(item, index) in peopleData">
-          <div
-            class="w-[25.55vh] h-[4.07vh] peopleItemBox px-[2.22vh] flex justify-between items-center"
-            :class="!index && 'mb-[1.85vh]'"
-            :key="index"
-          >
+          <div class="w-[25.55vh] h-[4.07vh] peopleItemBox px-[2.22vh] flex justify-between items-center" :class="!index && 'mb-[1.85vh]'" :key="index">
             <div class="flex items-end">
               <img src="@/assets/svg/Monitor/TopLeft/PointPurple.svg" />
-              <span class="text-[1.48vh] opacity-80 ml-[0.74vh]">{{
-                item["itemName"]
-              }}</span>
+              <span class="text-[1.48vh] opacity-80 ml-[0.74vh]">{{ item['itemName'] }}</span>
             </div>
             <div class="flex items-center">
-              <span class="text-[#B53FDF] text-[2.4vh] youshe">{{
-                item["itemVal"]
-              }}</span>
+              <span class="text-[#B53FDF] text-[2.4vh] youshe">{{ item['itemVal'] }}</span>
               <span class="text-[1.11vh] opacity-65 ml-[0.74vh]">人</span>
             </div>
           </div>
@@ -67,36 +43,36 @@
 </template>
 
 <script>
-import { GetMonitorOperationCount } from "@/api/monitor";
-import dayjs from "dayjs";
+import { GetMonitorOperationCount } from '@/api/monitor';
+import dayjs from 'dayjs';
 export default {
   data() {
     return {
       overviewData: [
         {
-          itemName: "首台准点率",
-          itemVal: "0",
-          itemUnit: "%",
+          itemName: '首台准点率',
+          itemVal: '0',
+          itemUnit: '%',
         },
         {
-          itemName: "手术间利用率",
-          itemVal: "0",
-          itemUnit: "%",
+          itemName: '手术间利用率',
+          itemVal: '0',
+          itemUnit: '%',
         },
         {
-          itemName: "急诊患者",
-          itemVal: "0",
-          itemUnit: "个",
+          itemName: '急诊患者',
+          itemVal: '0',
+          itemUnit: '个',
         },
       ],
       peopleData: [
         {
-          itemName: "进行中",
-          itemVal: "50",
+          itemName: '进行中',
+          itemVal: '50',
         },
         {
-          itemName: "待进行",
-          itemVal: "300",
+          itemName: '待进行',
+          itemVal: '300',
         },
       ],
       totalPopulation: 0,
@@ -105,62 +81,57 @@ export default {
   },
   methods: {
     onGetPageData() {
-      let nowDay = dayjs().format("YYYY-MM-DD");
+      this.isLoading = true;
+      let nowDay = dayjs().format('YYYY-MM-DD');
       if (this.$store.getters.isMock) {
-        nowDay = "2024-06-06";
+        nowDay = '2024-06-06';
       }
-      GetMonitorOperationCount(nowDay).then((res) => {
+      GetMonitorOperationCount(nowDay).then(res => {
         if (!res.data) {
           return;
         }
-        let fisrtRate = res["data"]["firstPunctualityRate"];
-        if (fisrtRate.includes("%")) {
-          this.overviewData[0]["itemVal"] = fisrtRate.slice(0, -1);
+        let fisrtRate = res['data']['firstPunctualityRate'];
+        if (fisrtRate.includes('%')) {
+          this.overviewData[0]['itemVal'] = fisrtRate.slice(0, -1);
         } else {
-          this.overviewData[0]["itemVal"] = Number(fisrtRate);
+          this.overviewData[0]['itemVal'] = Number(fisrtRate);
         }
-        let roomUserRate = res["data"]["roomUserRate"];
-        if (roomUserRate.includes("%")) {
-          this.overviewData[1]["itemVal"] = roomUserRate.slice(0, -1);
+        let roomUserRate = res['data']['roomUserRate'];
+        if (roomUserRate.includes('%')) {
+          this.overviewData[1]['itemVal'] = roomUserRate.slice(0, -1);
         } else {
-          this.overviewData[1]["itemVal"] = Number(roomUserRate);
+          this.overviewData[1]['itemVal'] = Number(roomUserRate);
         }
-        this.overviewData[2]["itemVal"] = res["data"]["patEmergencyCount"];
-        this.totalPopulation = res["data"]["patCount"];
-        this.peopleData[0]["itemVal"] = res["data"]["patOperationing"];
-        this.peopleData[1]["itemVal"] = res["data"]["patWating"];
+        this.overviewData[2]['itemVal'] = res['data']['patEmergencyCount'];
+        this.totalPopulation = res['data']['patCount'];
+        this.peopleData[0]['itemVal'] = res['data']['patOperationing'];
+        this.peopleData[1]['itemVal'] = res['data']['patWating'];
         this.isLoading = false;
       });
     },
   },
   mounted() {
     this.onGetPageData();
+    setInterval(() => {
+      this.onGetPageData();
+    }, this.$store.getters.intervalTime);
   },
 };
 </script>
 
 <style>
 .bgTopLeftBox {
-  background-image: url("@/assets/svg/Monitor/TopLeft/Box.svg");
+  background-image: url('@/assets/svg/Monitor/TopLeft/Box.svg');
 }
 .bgTopLeftItemBox {
-  background-image: url("@/assets/svg/Monitor/TopLeft/ItemBox.svg");
+  background-image: url('@/assets/svg/Monitor/TopLeft/ItemBox.svg');
 }
 .bgTopLeftItemBoxPurple {
-  background-image: url("@/assets/svg/Monitor/TopLeft/ItemBoxPurple.svg");
+  background-image: url('@/assets/svg/Monitor/TopLeft/ItemBoxPurple.svg');
 }
 .peopleItemBox {
-  background: linear-gradient(
-    271deg,
-    rgba(85, 255, 212, 0.045) 2%,
-    rgba(35, 150, 121, 0.066) 99%
-  );
+  background: linear-gradient(271deg, rgba(85, 255, 212, 0.045) 2%, rgba(35, 150, 121, 0.066) 99%);
   border: 1.5px solid;
-  border-image: linear-gradient(
-      159deg,
-      rgba(169, 213, 255, 0.4) -8%,
-      rgba(169, 213, 255, 0) 38%
-    )
-    1.5;
+  border-image: linear-gradient(159deg, rgba(169, 213, 255, 0.4) -8%, rgba(169, 213, 255, 0) 38%) 1.5;
 }
 </style>
diff --git a/src/views/pageMonitor/topRight/index.vue b/src/views/pageMonitor/topRight/index.vue
index 9428f1b..1a67d23 100644
--- a/src/views/pageMonitor/topRight/index.vue
+++ b/src/views/pageMonitor/topRight/index.vue
@@ -1,103 +1,37 @@
 <template>
-  <div
-    class="w-[116.94vh] h-[39.62vh] bgTopRightBox bg-contain bg-center bg-no-repeat p-[2.96vh] box-border"
-    v-loading="isLoading"
-  >
-    <el-carousel
-      direction="vertical"
-      :autoplay="false"
-      :interval="5000"
-      indicatorPosition="none"
-    >
+  <div class="w-[116.94vh] h-[39.62vh] bgTopRightBox bg-contain bg-center bg-no-repeat p-[2.96vh] box-border">
+    <el-carousel direction="vertical" :autoplay="true" :interval="5000" indicatorPosition="none">
       <el-carousel-item v-for="item in opList" :key="item['roomCode']">
         <section>
           <template v-for="(subItem, index) in item">
             <div class="w-[12.59vh] h-[9.81vh] ItemBox relative" :key="index">
-              <p
-                class="absolute w-[10.74vh] h-[2.77vh] leading--[2.77vh] text-[1.85vh] left-[0.92vh] top-[0.74vh] text-center youshe PBg"
-              >
-                {{ subItem["roomName"] }}
+              <p class="absolute w-[10.74vh] h-[2.77vh] leading--[2.77vh] text-[1.85vh] left-[0.92vh] top-[0.74vh] text-center youshe PBg">
+                {{ subItem['roomName'] }}
               </p>
-              <div
-                class="absolute w-[10vh] h-[2.77vh] left-[1.03vh] bottom-[1.48vh]"
-              >
-                <div
-                  class="w-full h-full flex justify-between items-center"
-                  v-if="subItem.procStatus == 10"
-                >
-                  <img
-                    src="@/assets/svg/Monitor/TopRight/opRoom.svg"
-                    class="relative top-[-2px]"
-                  />
-                  <span
-                    class="text-[1.85vh] text-[#35CEFD] youshe text-nowrap"
-                    >{{ subItem["operStatusName"] }}</span
-                  >
+              <div class="absolute w-[10vh] h-[2.77vh] left-[1.03vh] bottom-[1.48vh]">
+                <div class="w-full h-full flex justify-between items-center" v-if="subItem.procStatus == 10">
+                  <img src="@/assets/svg/Monitor/TopRight/opRoom.svg" class="relative top-[-2px]" />
+                  <span class="text-[1.85vh] text-[#35CEFD] youshe text-nowrap">{{ subItem['operStatusName'] }}</span>
                 </div>
-                <div
-                  class="w-full h-full flex justify-between items-center"
-                  v-else-if="subItem.procStatus == 15"
-                >
-                  <img
-                    src="@/assets/svg/Monitor/TopRight/anesStart.svg"
-                    class="relative top-[-2px]"
-                  />
-                  <span
-                    class="text-[1.85vh] text-[#424CFE] youshe text-nowrap"
-                    >{{ subItem["operStatusName"] }}</span
-                  >
+                <div class="w-full h-full flex justify-between items-center" v-else-if="subItem.procStatus == 15">
+                  <img src="@/assets/svg/Monitor/TopRight/anesStart.svg" class="relative top-[-2px]" />
+                  <span class="text-[1.85vh] text-[#424CFE] youshe text-nowrap">{{ subItem['operStatusName'] }}</span>
                 </div>
-                <div
-                  class="w-full h-full flex justify-between items-center"
-                  v-else-if="subItem.procStatus == 20"
-                >
-                  <img
-                    src="@/assets/svg/Monitor/TopRight/OpingIcon.svg"
-                    class="relative top-[-2px]"
-                  />
-                  <span
-                    class="text-[1.85vh] text-[#B53FDF] youshe text-nowrap"
-                    >{{ subItem["operStatusName"] }}</span
-                  >
+                <div class="w-full h-full flex justify-between items-center" v-else-if="subItem.procStatus == 20">
+                  <img src="@/assets/svg/Monitor/TopRight/OpingIcon.svg" class="relative top-[-2px]" />
+                  <span class="text-[1.85vh] text-[#B53FDF] youshe text-nowrap">{{ subItem['operStatusName'] }}</span>
                 </div>
-                <div
-                  class="w-full h-full flex justify-between items-center"
-                  v-else-if="subItem.procStatus == 25"
-                >
-                  <img
-                    src="@/assets/svg/Monitor/TopRight/opEnd.svg"
-                    class="relative top-[-2px]"
-                  />
-                  <span
-                    class="text-[1.85vh] text-[#BAE7A4] youshe text-nowrap"
-                    >{{ subItem["operStatusName"] }}</span
-                  >
+                <div class="w-full h-full flex justify-between items-center" v-else-if="subItem.procStatus == 25">
+                  <img src="@/assets/svg/Monitor/TopRight/opEnd.svg" class="relative top-[-2px]" />
+                  <span class="text-[1.85vh] text-[#BAE7A4] youshe text-nowrap">{{ subItem['operStatusName'] }}</span>
                 </div>
-                <div
-                  class="w-full h-full flex justify-between items-center"
-                  v-else-if="subItem.procStatus == 30"
-                >
-                  <img
-                    src="@/assets/svg/Monitor/TopRight/OpendIcon.svg"
-                    class="relative top-[-2px]"
-                  />
-                  <span
-                    class="text-[1.85vh] text-[#946FEC] youshe text-nowrap"
-                    >{{ subItem["operStatusName"] }}</span
-                  >
+                <div class="w-full h-full flex justify-between items-center" v-else-if="subItem.procStatus == 30">
+                  <img src="@/assets/svg/Monitor/TopRight/OpendIcon.svg" class="relative top-[-2px]" />
+                  <span class="text-[1.85vh] text-[#946FEC] youshe text-nowrap">{{ subItem['operStatusName'] }}</span>
                 </div>
-                <div
-                  class="w-full h-full flex justify-between items-center"
-                  v-else
-                >
-                  <img
-                    src="@/assets/svg/Monitor/TopRight/OpWaitIcon.svg"
-                    class="relative top-[-2px]"
-                  />
-                  <span
-                    class="text-[1.85vh] text-[#0CFFFF] youshe text-nowrap"
-                    >{{ subItem["operStatusName"] }}</span
-                  >
+                <div class="w-full h-full flex justify-between items-center" v-else>
+                  <img src="@/assets/svg/Monitor/TopRight/OpWaitIcon.svg" class="relative top-[-2px]" />
+                  <span class="text-[1.85vh] text-[#0CFFFF] youshe text-nowrap">{{ subItem['operStatusName'] }}</span>
                 </div>
               </div>
             </div>
@@ -109,9 +43,9 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from "element-ui";
-import { GetMonitorOperationRoomStatus } from "@/api/monitor";
-import dayjs from "dayjs";
+import { Carousel, CarouselItem } from 'element-ui';
+import { GetMonitorOperationRoomStatus } from '@/api/monitor';
+import dayjs from 'dayjs';
 export default {
   data() {
     return {
@@ -121,21 +55,20 @@ export default {
   },
   methods: {
     onGetPageData() {
-      let nowDay = dayjs().format("YYYY-MM-DD");
+      let nowDay = dayjs().format('YYYY-MM-DD');
       if (this.$store.getters.isMock) {
-        nowDay = "2024-06-06";
+        nowDay = '2024-06-06';
       }
 
-      GetMonitorOperationRoomStatus(nowDay).then((res) => {
-        this.formatData(res["data"]);
+      GetMonitorOperationRoomStatus(nowDay).then(res => {
+        this.formatData(res['data']);
         this.isLoading = false;
       });
     },
     formatData(pageData) {
-      console.log("pageData:", pageData);
       this.opList = [];
       let group = 0;
-      for (let i = 0; i < pageData["length"]; i++) {
+      for (let i = 0; i < pageData['length']; i++) {
         group = parseInt(i / 21);
         if (this.opList[group]) {
           this.opList[group].push(pageData[i]);
@@ -147,17 +80,20 @@ export default {
   },
   mounted() {
     this.onGetPageData();
+    setInterval(() => {
+      this.onGetPageData();
+    }, this.$store.getters.intervalTime);
   },
   components: {
-    "el-carousel": Carousel,
-    "el-carousel-item": CarouselItem,
+    'el-carousel': Carousel,
+    'el-carousel-item': CarouselItem,
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .bgTopRightBox {
-  background-image: url("@/assets/svg/Monitor/TopRight/Box.svg");
+  background-image: url('@/assets/svg/Monitor/TopRight/Box.svg');
   :deep(.el-carousel) {
     height: 39.62vh;
     .el-carousel__container {
@@ -175,33 +111,23 @@ export default {
 }
 
 .ItemBox {
-  background-image: url("@/assets/svg/Monitor/TopRight/ItemBox.svg");
+  background-image: url('@/assets/svg/Monitor/TopRight/ItemBox.svg');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
 }
 .PBg {
-  background: linear-gradient(
-    90deg,
-    rgba(0, 147, 255, 0) 0%,
-    rgba(0, 147, 255, 0.37) 44%,
-    rgba(0, 147, 255, 0) 99%
-  );
+  background: linear-gradient(90deg, rgba(0, 147, 255, 0) 0%, rgba(0, 147, 255, 0.37) 44%, rgba(0, 147, 255, 0) 99%);
   position: relative;
   &::after {
-    content: "";
+    content: '';
     display: block;
     width: 100%;
     height: 1px;
     position: absolute;
     bottom: 0;
     left: 0;
-    background: linear-gradient(
-      90deg,
-      rgba(0, 147, 255, 0) 0%,
-      #0093ff 49%,
-      rgba(0, 147, 255, 0) 99%
-    );
+    background: linear-gradient(90deg, rgba(0, 147, 255, 0) 0%, #0093ff 49%, rgba(0, 147, 255, 0) 99%);
   }
 }
 </style>
diff --git a/src/views/pageOperation/leftBottom/index.vue b/src/views/pageOperation/leftBottom/index.vue
index 325f732..c393f05 100644
--- a/src/views/pageOperation/leftBottom/index.vue
+++ b/src/views/pageOperation/leftBottom/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-[32.4vh] mt-[2.77vh] bgLeftBottomBox pt-[3.24vh]" v-loading="isLoading">
+  <div class="h-[32.4vh] mt-[2.77vh] bgLeftBottomBox pt-[3.24vh]">
     <div class="w-[43.79vh] h-[26.85vh] mx-auto" ref="echartsContainer"></div>
   </div>
 </template>
@@ -90,6 +90,9 @@ export default {
   mounted() {
     chart = echarts.init(this.$refs.echartsContainer);
     this.onGetPageData();
+    setInterval(() => {
+      this.onGetPageData();
+    }, this.$store.getters.intervalTime);
   },
 };
 </script>
diff --git a/src/views/pageOperation/leftTop/index.vue b/src/views/pageOperation/leftTop/index.vue
index e7f44e3..439396c 100644
--- a/src/views/pageOperation/leftTop/index.vue
+++ b/src/views/pageOperation/leftTop/index.vue
@@ -1,18 +1,11 @@
 <template>
-  <div class="h-[48.79vh] bgLeftTopBox p-[1.85vh]" v-loading="isLoading">
-    <div
-      class="w-[21.29vh] h-[21.29vh] mx-auto m-[2vh]"
-      ref="echartsContainer"
-    ></div>
-    <div
-      class="w-[45.18vh] h-[14.81vh] bgTopLeftItemBox mx-auto mt-[4.8vh] px-[2.96vh] py-[2.4vh] flex justify-between items-center"
-    >
+  <div class="h-[48.79vh] bgLeftTopBox p-[1.85vh]">
+    <div class="w-[21.29vh] h-[21.29vh] mx-auto m-[2vh]" ref="echartsContainer"></div>
+    <div class="w-[45.18vh] h-[14.81vh] bgTopLeftItemBox mx-auto mt-[4.8vh] px-[2.96vh] py-[2.4vh] flex justify-between items-center">
       <section>
         <div class="flex">
           <img src="@/assets/svg/Monitor/TopLeft/TrianglePurple.svg" />
-          <span class="youshe text-[1.75vh] ml-[1.11vh] opacity-80"
-            >总人数</span
-          >
+          <span class="youshe text-[1.75vh] ml-[1.11vh] opacity-80">总人数</span>
         </div>
         <p class="text-[#733FF3] text-[4.07vh] mt-[1.4vh] youshe leading-none">
           {{ totalPopulation }}
@@ -20,21 +13,13 @@
       </section>
       <section>
         <template v-for="(item, index) in peopleData">
-          <div
-            class="w-[25.55vh] h-[4.07vh] peopleItemBox px-[2.22vh] flex justify-between items-center"
-            :class="!index && 'mb-[1.85vh]'"
-            :key="index"
-          >
+          <div class="w-[25.55vh] h-[4.07vh] peopleItemBox px-[2.22vh] flex justify-between items-center" :class="!index && 'mb-[1.85vh]'" :key="index">
             <div class="flex items-end">
               <img src="@/assets/svg/Operation/LeftTop/PointBlue.svg" />
-              <span class="text-[1.48vh] opacity-80 ml-[0.74vh]">{{
-                item["itemName"]
-              }}</span>
+              <span class="text-[1.48vh] opacity-80 ml-[0.74vh]">{{ item['itemName'] }}</span>
             </div>
             <div class="flex items-center">
-              <span class="text-[#733FF3] text-[2.4vh] youshe">{{
-                item["itemVal"]
-              }}</span>
+              <span class="text-[#733FF3] text-[2.4vh] youshe">{{ item['itemVal'] }}</span>
               <span class="text-[1.11vh] opacity-65 ml-[0.74vh]">人</span>
             </div>
           </div>
@@ -45,9 +30,9 @@
 </template>
 
 <script>
-import * as echarts from "echarts";
-import { GetMonitorOperationCount } from "@/api/monitor";
-import dayjs from "dayjs";
+import * as echarts from 'echarts';
+import { GetMonitorOperationCount } from '@/api/monitor';
+import dayjs from 'dayjs';
 let chart = null;
 export default {
   data() {
@@ -55,15 +40,15 @@ export default {
       chartOptions: {
         series: [
           {
-            type: "gauge",
+            type: 'gauge',
             startAngle: 90,
             endAngle: -270,
             pointer: {
               show: false,
             },
             max: 100,
-            radius: "100%",
-            center: ["50%", "50%"],
+            radius: '100%',
+            center: ['50%', '50%'],
             progress: {
               show: true,
               overlap: false,
@@ -71,7 +56,7 @@ export default {
               clip: false,
               itemStyle: {
                 color: {
-                  type: "linear",
+                  type: 'linear',
                   x: 0,
                   y: 0,
                   x2: 0,
@@ -79,11 +64,11 @@ export default {
                   colorStops: [
                     {
                       offset: 0,
-                      color: "#9C85FA",
+                      color: '#9C85FA',
                     },
                     {
                       offset: 1,
-                      color: "#5531E7",
+                      color: '#5531E7',
                     },
                   ],
                   global: false,
@@ -92,7 +77,7 @@ export default {
             },
             axisLine: {
               lineStyle: {
-                color: [[1, "#4F518C"]],
+                color: [[1, '#4F518C']],
                 opacity: 0.7,
                 width: 30,
               },
@@ -112,21 +97,21 @@ export default {
             data: [
               {
                 value: 86,
-                name: "首台准点率",
+                name: '首台准点率',
                 title: {
-                  offsetCenter: ["0%", "20%"],
+                  offsetCenter: ['0%', '20%'],
                   fontSize: 22,
-                  fontFamily: "Microsoft YaHei",
-                  color: "#fff",
-                  overflow: "break",
+                  fontFamily: 'Microsoft YaHei',
+                  color: '#fff',
+                  overflow: 'break',
                   lineHeight: 20,
                 },
                 detail: {
                   valueAnimation: true,
-                  offsetCenter: ["0%", "-15%"],
+                  offsetCenter: ['0%', '-15%'],
                   fontSize: 40,
-                  fontFamily: "DIN-Bold,Microsoft YaHei",
-                  color: "#03FFFF",
+                  fontFamily: 'DIN-Bold,Microsoft YaHei',
+                  color: '#03FFFF',
                   formatter: `{value}%`,
                 },
               },
@@ -136,12 +121,12 @@ export default {
       },
       peopleData: [
         {
-          itemName: "进行中",
-          itemVal: "50",
+          itemName: '进行中',
+          itemVal: '50',
         },
         {
-          itemName: "待进行",
-          itemVal: "300",
+          itemName: '待进行',
+          itemVal: '300',
         },
       ],
       totalPopulation: 0,
@@ -150,29 +135,25 @@ export default {
   },
   methods: {
     onGetPageData() {
-      let nowDay = dayjs().format("YYYY-MM-DD");
+      let nowDay = dayjs().format('YYYY-MM-DD');
       if (this.$store.getters.isMock) {
-        nowDay = "2024-06-06";
+        nowDay = '2024-06-06';
       }
-      GetMonitorOperationCount(nowDay).then((res) => {
+      GetMonitorOperationCount(nowDay).then(res => {
         if (!res.data) {
           this.isLoading = false;
           return;
         }
-        let fisrtRate = res["data"]["firstPunctualityRate"];
-        if (fisrtRate.includes("%")) {
-          this.chartOptions["series"][0]["data"][0]["value"] = fisrtRate.slice(
-            0,
-            -1
-          );
+        let fisrtRate = res['data']['firstPunctualityRate'];
+        if (fisrtRate.includes('%')) {
+          this.chartOptions['series'][0]['data'][0]['value'] = fisrtRate.slice(0, -1);
         } else {
-          this.chartOptions["series"][0]["data"][0]["value"] =
-            Number(fisrtRate);
+          this.chartOptions['series'][0]['data'][0]['value'] = Number(fisrtRate);
         }
 
-        this.peopleData[0]["itemVal"] = res["data"]["patOperationing"];
-        this.peopleData[1]["itemVal"] = res["data"]["patWating"];
-        this.totalPopulation = res["data"]["patCount"];
+        this.peopleData[0]['itemVal'] = res['data']['patOperationing'];
+        this.peopleData[1]['itemVal'] = res['data']['patWating'];
+        this.totalPopulation = res['data']['patCount'];
         chart.setOption(this.chartOptions);
         this.isLoading = false;
       });
@@ -181,35 +162,29 @@ export default {
   mounted() {
     chart = echarts.init(this.$refs.echartsContainer);
     this.onGetPageData();
+    setInterval(() => {
+      this.onGetPageData();
+    }, this.$store.getters.intervalTime);
   },
 };
 </script>
 
 <style>
 .bgLeftTopBox {
-  background-image: url("@/assets/svg/Operation/LeftTop/Box.svg");
+  background-image: url('@/assets/svg/Operation/LeftTop/Box.svg');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
 }
 .bgTopLeftItemBox {
-  background-image: url("@/assets/svg/Operation/LeftTop/ItemBox.svg");
+  background-image: url('@/assets/svg/Operation/LeftTop/ItemBox.svg');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
 }
 .peopleItemBox {
-  background: linear-gradient(
-    271deg,
-    rgba(85, 255, 212, 0.045) 2%,
-    rgba(35, 150, 121, 0.066) 99%
-  );
+  background: linear-gradient(271deg, rgba(85, 255, 212, 0.045) 2%, rgba(35, 150, 121, 0.066) 99%);
   border: 1.5px solid;
-  border-image: linear-gradient(
-      159deg,
-      rgba(169, 213, 255, 0.4) -8%,
-      rgba(169, 213, 255, 0) 38%
-    )
-    1.5;
+  border-image: linear-gradient(159deg, rgba(169, 213, 255, 0.4) -8%, rgba(169, 213, 255, 0) 38%) 1.5;
 }
 </style>
diff --git a/src/views/pageOperation/rightMid/index.vue b/src/views/pageOperation/rightMid/index.vue
index c4e4433..6e0808d 100644
--- a/src/views/pageOperation/rightMid/index.vue
+++ b/src/views/pageOperation/rightMid/index.vue
@@ -3,93 +3,46 @@
     <div class="w-[112.96vh] h-[77.03vh] mx-auto mt-[2.96vh]">
       <div class="h-[4.44vh] leading-[4.44vh] text-center bg-[#322369]">
         <div class="inline-block">
-          <div class="inline-block w-[5.11vh] text-[#AAAAAA] text-[1.48vh]">
-            手术间
-          </div>
-          <div class="inline-block w-[11.11vh] text-[#AAAAAA] text-[1.48vh]">
-            人员
-          </div>
-          <div class="inline-block w-[16.51vh] text-[#AAAAAA] text-[1.48vh]">
-            手术名称
-          </div>
-          <div class="inline-block w-[13.11vh] text-[#AAAAAA] text-[1.48vh]">
-            申请类型
-          </div>
-          <div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">
-            入手术室时间
-          </div>
-          <div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">
-            麻醉开始时间
-          </div>
-          <div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">
-            手术开始时间
-          </div>
-          <div class="inline-block w-[11.11vh] text-[#AAAAAA] text-[1.48vh]">
-            是否准点
-          </div>
+          <div class="inline-block w-[5.11vh] text-[#AAAAAA] text-[1.48vh]">手术间</div>
+          <div class="inline-block w-[11.11vh] text-[#AAAAAA] text-[1.48vh]">人员</div>
+          <div class="inline-block w-[16.51vh] text-[#AAAAAA] text-[1.48vh]">手术名称</div>
+          <div class="inline-block w-[13.11vh] text-[#AAAAAA] text-[1.48vh]">申请类型</div>
+          <div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">入手术室时间</div>
+          <div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">麻醉开始时间</div>
+          <div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">手术开始时间</div>
+          <div class="inline-block w-[11.11vh] text-[#AAAAAA] text-[1.48vh]">是否准点</div>
         </div>
       </div>
       <div class="h-[72.58vh]">
-        <el-carousel
-          direction="vertical"
-          :autoplay="true"
-          :interval="15000"
-          indicatorPosition="none"
-        >
+        <el-carousel direction="vertical" :autoplay="true" :interval="15000" indicatorPosition="none">
           <el-carousel-item v-for="(item, index) in scheduList" :key="index">
             <template v-for="(subItem, index) in item">
-              <div
-                class="h-[4.44vh] leading-[4.44vh] mt-[0.74vh] text-center itemStyle"
-                :key="index"
-              >
+              <div class="h-[4.44vh] leading-[4.44vh] mt-[0.74vh] text-center itemStyle" :key="index">
                 <div class="inline-block">
-                  <div
-                    class="inline-block align-top w-[5.11vh] text-[1.48vh] panmen"
-                  >
-                    {{ subItem["roomName"] }}
+                  <div class="inline-block align-top w-[5.11vh] text-[1.48vh] panmen">
+                    {{ subItem['roomName'] }}
                   </div>
                   <div class="inline-block align-top w-[11.11vh] text-[1.48vh]">
-                    {{ subItem["patientName"] }}
+                    {{ subItem['patientName'] }}
                   </div>
-                  <div
-                    class="inline-block align-top w-[16.51vh] text-[1.48vh] px-1"
-                  >
-                    <marquee scrollamount="2">{{
-                      subItem["operationName"]
-                    }}</marquee>
+                  <div class="inline-block align-top w-[16.51vh] text-[1.48vh] px-1">
+                    <marquee scrollamount="2">{{ subItem['operationName'] }}</marquee>
                   </div>
-                  <div
-                    class="inline-block align-middle w-[13.11vh] text-[1.48vh]"
-                  >
-                    <img
-                      class="mx-auto"
-                      src="@/assets/svg/Operation/RightMid/Emergency.svg"
-                      v-if="subItem['OperationType']"
-                    />
-                    <img
-                      class="mx-auto"
-                      src="@/assets/svg/Operation/RightMid/Other.svg"
-                      v-else
-                    />
+                  <div class="inline-block align-middle w-[13.11vh] text-[1.48vh]">
+                    <img class="mx-auto" src="@/assets/svg/Operation/RightMid/Emergency.svg" v-if="subItem['OperationType']" />
+                    <img class="mx-auto" src="@/assets/svg/Operation/RightMid/Other.svg" v-else />
                   </div>
                   <div class="inline-block align-top w-[16.66vh] text-[1.48vh]">
-                    {{ formatData(subItem["inDateTime"]) }}
+                    {{ formatData(subItem['inDateTime']) }}
                   </div>
                   <div class="inline-block align-top w-[16.66vh] text-[1.48vh]">
-                    {{ formatData(subItem["anesStartTime"]) }}
+                    {{ formatData(subItem['anesStartTime']) }}
                   </div>
                   <div class="inline-block align-top w-[16.66vh] text-[1.48vh]">
-                    {{ formatData(subItem["operStartTime"]) }}
+                    {{ formatData(subItem['operStartTime']) }}
                   </div>
-                  <div
-                    class="inline-block align-top w-[11.11vh] text-[1.48vh]"
-                    :class="
-                      subItem['IsFirstOnTime']
-                        ? 'text-[#349AFC]'
-                        : 'text-[#A53FAF]'
-                    "
-                  >
-                    {{ subItem["IsFirstOnTime"] ? "准点" : "不准点" }}
+                  <div class="inline-block align-top w-[11.11vh] text-[1.48vh]" :class="subItem['IsFirstOnTime'] ? 'text-[#349AFC]' : 'text-[#A53FAF]'">
+                    {{ subItem['IsFirstOnTime'] ? '准点' : '不准点' }}
                   </div>
                 </div>
               </div>
@@ -102,9 +55,9 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from "element-ui";
-import { GetMonitorOperationCount } from "@/api/operation";
-import dayjs from "dayjs";
+import { Carousel, CarouselItem } from 'element-ui';
+import { GetMonitorOperationCount } from '@/api/operation';
+import dayjs from 'dayjs';
 export default {
   data() {
     return {
@@ -114,45 +67,48 @@ export default {
   },
   methods: {
     onGetPageData() {
-      let nowDay = dayjs().format("YYYY-MM-DD");
+      let nowDay = dayjs().format('YYYY-MM-DD');
       if (this.$store.getters.isMock) {
-        nowDay = "2024-06-06";
+        nowDay = '2024-06-06';
       }
-      GetMonitorOperationCount(nowDay).then((res) => {
+      GetMonitorOperationCount(nowDay).then(res => {
         this.scheduList = [];
         let group = 0;
-        for (let i = 0; i < res["data"]["length"]; i++) {
+        for (let i = 0; i < res['data']['length']; i++) {
           group = parseInt(i / 14);
           if (this.scheduList[group]) {
-            this.scheduList[group].push(res["data"][i]);
+            this.scheduList[group].push(res['data'][i]);
           } else {
-            this.scheduList[group] = [res["data"][i]];
+            this.scheduList[group] = [res['data'][i]];
           }
         }
         this.isLoading = false;
       });
     },
     formatData(date) {
-      let txt = "";
+      let txt = '';
       if (date) {
-        txt = dayjs(date).format("YYYY-MM-DD HH:mm:ss");
+        txt = dayjs(date).format('YYYY-MM-DD HH:mm:ss');
       }
       return txt;
     },
   },
   mounted() {
     this.onGetPageData();
+    setInterval(() => {
+      this.onGetPageData();
+    }, this.$store.getters.intervalTime);
   },
   components: {
-    "el-carousel": Carousel,
-    "el-carousel-item": CarouselItem,
+    'el-carousel': Carousel,
+    'el-carousel-item': CarouselItem,
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .bgRightMidBox {
-  background-image: url("@/assets/svg/Operation/RightMid/Box.svg");
+  background-image: url('@/assets/svg/Operation/RightMid/Box.svg');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
diff --git a/src/views/pageRoom/leftBottom/index.vue b/src/views/pageRoom/leftBottom/index.vue
index 260ab44..59f441f 100644
--- a/src/views/pageRoom/leftBottom/index.vue
+++ b/src/views/pageRoom/leftBottom/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-[32.31vh] mt-[2.77vh] pt-[4vh] bgLeftBottomBox" v-loading="isLoading">
+  <div class="h-[32.31vh] mt-[2.77vh] pt-[4vh] bgLeftBottomBox">
     <div class="h-[20vh] flex justify-center" ref="echartsContainer"></div>
     <section class="w-[37.96vh] h-[5.18vh] leading-[5.18vh] text-center border border-[#2D126F] mx-auto">
       <span class="text-[1.85vh] youshe">平均接台时间</span>
@@ -105,6 +105,9 @@ export default {
   mounted() {
     chart = echarts.init(this.$refs.echartsContainer);
     this.onGetPageData();
+    setInterval(() => {
+      this.onGetPageData();
+    }, this.$store.getters.intervalTime);
   },
 };
 </script>
diff --git a/src/views/pageRoom/leftTop/index.vue b/src/views/pageRoom/leftTop/index.vue
index 47a3a83..e0b1976 100644
--- a/src/views/pageRoom/leftTop/index.vue
+++ b/src/views/pageRoom/leftTop/index.vue
@@ -1,12 +1,7 @@
 <template>
-  <div class="h-[48.79vh] bgLeftTopBox p-[1.85vh]" v-loading="isLoading">
-    <div
-      class="w-[22vh] h-[22vh] mx-auto mt-[4.6vh] flex justify-center"
-      ref="echartsContainer"
-    ></div>
-    <div
-      class="w-[37.96vh] h-[6.29vh] mx-auto mt-[8.6vh] px-[4.96vh] flex justify-between items-center bgTopLeftItemBox"
-    >
+  <div class="h-[48.79vh] bgLeftTopBox p-[1.85vh]">
+    <div class="w-[22vh] h-[22vh] mx-auto mt-[4.6vh] flex justify-center" ref="echartsContainer"></div>
+    <div class="w-[37.96vh] h-[6.29vh] mx-auto mt-[8.6vh] px-[4.96vh] flex justify-between items-center bgTopLeftItemBox">
       <div class="flex">
         <img src="@/assets/svg/Room/LeftTop/TrianglePurple.svg" />
         <span class="text-[1.85vh] youshe ml-[1.4vh]">手术间数</span>
@@ -17,9 +12,9 @@
 </template>
 
 <script>
-import * as echarts from "echarts";
-import { GetMonitorOperationCount } from "@/api/monitor";
-import dayjs from "dayjs";
+import * as echarts from 'echarts';
+import { GetMonitorOperationCount } from '@/api/monitor';
+import dayjs from 'dayjs';
 let chart = null;
 export default {
   data() {
@@ -27,15 +22,15 @@ export default {
       chartOptions: {
         series: [
           {
-            type: "gauge",
+            type: 'gauge',
             startAngle: 90,
             endAngle: -270,
             pointer: {
               show: false,
             },
             max: 100,
-            radius: "100%",
-            center: ["50%", "50%"],
+            radius: '100%',
+            center: ['50%', '50%'],
             progress: {
               show: true,
               overlap: false,
@@ -43,7 +38,7 @@ export default {
               clip: false,
               itemStyle: {
                 color: {
-                  type: "linear",
+                  type: 'linear',
                   x: 0,
                   y: 0,
                   x2: 0,
@@ -51,11 +46,11 @@ export default {
                   colorStops: [
                     {
                       offset: 0,
-                      color: "#9C85FA",
+                      color: '#9C85FA',
                     },
                     {
                       offset: 1,
-                      color: "#5531E7",
+                      color: '#5531E7',
                     },
                   ],
                   global: false,
@@ -64,7 +59,7 @@ export default {
             },
             axisLine: {
               lineStyle: {
-                color: [[1, "#4F518C"]],
+                color: [[1, '#4F518C']],
                 opacity: 0.7,
                 width: 30,
               },
@@ -84,21 +79,21 @@ export default {
             data: [
               {
                 value: 86,
-                name: "首台准点率",
+                name: '首台准点率',
                 title: {
-                  offsetCenter: ["0%", "20%"],
+                  offsetCenter: ['0%', '20%'],
                   fontSize: 22,
-                  fontFamily: "Microsoft YaHei",
-                  color: "#fff",
-                  overflow: "break",
+                  fontFamily: 'Microsoft YaHei',
+                  color: '#fff',
+                  overflow: 'break',
                   lineHeight: 20,
                 },
                 detail: {
                   valueAnimation: true,
-                  offsetCenter: ["0%", "-15%"],
+                  offsetCenter: ['0%', '-15%'],
                   fontSize: 40,
-                  fontFamily: "DIN-Bold,Microsoft YaHei",
-                  color: "#03FFFF",
+                  fontFamily: 'DIN-Bold,Microsoft YaHei',
+                  color: '#03FFFF',
                   formatter: `{value}%`,
                 },
               },
@@ -112,25 +107,21 @@ export default {
   },
   methods: {
     onGetPageData() {
-      let nowDay = dayjs().format("YYYY-MM-DD");
+      let nowDay = dayjs().format('YYYY-MM-DD');
       if (this.$store.getters.isMock) {
-        nowDay = "2024-06-06";
+        nowDay = '2024-06-06';
       }
-      GetMonitorOperationCount(nowDay).then((res) => {
+      GetMonitorOperationCount(nowDay).then(res => {
         if (!res.data) {
           return;
         }
-        let fisrtRate = res["data"]["firstPunctualityRate"];
-        if (fisrtRate.includes("%")) {
-          this.chartOptions["series"][0]["data"][0]["value"] = fisrtRate.slice(
-            0,
-            -1
-          );
+        let fisrtRate = res['data']['firstPunctualityRate'];
+        if (fisrtRate.includes('%')) {
+          this.chartOptions['series'][0]['data'][0]['value'] = fisrtRate.slice(0, -1);
         } else {
-          this.chartOptions["series"][0]["data"][0]["value"] =
-            Number(fisrtRate);
+          this.chartOptions['series'][0]['data'][0]['value'] = Number(fisrtRate);
         }
-        this.opTotal = res["data"]["roomCount"];
+        this.opTotal = res['data']['roomCount'];
         chart.setOption(this.chartOptions);
         this.isLoading = false;
       });
@@ -139,19 +130,22 @@ export default {
   mounted() {
     chart = echarts.init(this.$refs.echartsContainer);
     this.onGetPageData();
+    setInterval(() => {
+      this.onGetPageData();
+    }, this.$store.getters.intervalTime);
   },
 };
 </script>
 
 <style>
 .bgLeftTopBox {
-  background-image: url("@/assets/svg/Room/LeftTop/Box.svg");
+  background-image: url('@/assets/svg/Room/LeftTop/Box.svg');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
 }
 .bgTopLeftItemBox {
-  background-image: url("@/assets/svg/Room/LeftTop/ItemBox.svg");
+  background-image: url('@/assets/svg/Room/LeftTop/ItemBox.svg');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
diff --git a/src/views/pageRoom/rightMid/index.vue b/src/views/pageRoom/rightMid/index.vue
index 5784d71..289f7e3 100644
--- a/src/views/pageRoom/rightMid/index.vue
+++ b/src/views/pageRoom/rightMid/index.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script>
-import * as echarts from "echarts";
-import dayjs from "dayjs";
-import { GetRoomList, GetMonitorRoomUsageRate } from "@/api/room";
-import { statusToTxt, textToColor } from "@/utils/common";
+import * as echarts from 'echarts';
+import dayjs from 'dayjs';
+import { GetRoomList, GetMonitorRoomUsageRate } from '@/api/room';
+import { statusToTxt, textToColor } from '@/utils/common';
 let chart = null;
 export default {
   data() {
@@ -16,27 +16,27 @@ export default {
       isLoding: false,
       chartOptions: {
         grid: {
-          width: "86%",
-          height: "80%",
-          top: "14%",
+          width: '86%',
+          height: '80%',
+          top: '14%',
         },
         legend: {
           data: [],
-          selectedMode: "none",
-          top: "6%",
-          right: "4%",
+          selectedMode: 'none',
+          top: '6%',
+          right: '4%',
           textStyle: {
-            color: "#fff",
+            color: '#fff',
             fontSize: 14,
-            fontFamily: "DIN-Bold,Microsoft YaHei",
+            fontFamily: 'DIN-Bold,Microsoft YaHei',
           },
         },
         xAxis: {
-          type: "time",
-          position: "top",
+          type: 'time',
+          position: 'top',
           splitNumber: 24,
           axisLabel: {
-            color: "#B7BDBF",
+            color: '#B7BDBF',
             fontSize: 12,
             margin: 16,
             formatter: function (value) {
@@ -44,32 +44,26 @@ export default {
               var hours = date.getHours();
               var minutes = date.getMinutes();
               if (hours === 0 && minutes === 0) {
-                return "00:00";
+                return '00:00';
               } else {
-                return (
-                  (hours < 10 ? "0" : "") +
-                  hours +
-                  ":" +
-                  (minutes < 10 ? "0" : "") +
-                  minutes
-                );
+                return (hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes;
               }
             },
           },
         },
         yAxis: {
-          type: "category",
+          type: 'category',
           data: [],
           axisLabel: {
-            color: "#B7BDBF",
+            color: '#B7BDBF',
             fontSize: 12,
             margin: 16,
-            fontFamily: "DIN-Bold,Microsoft YaHei",
+            fontFamily: 'DIN-Bold,Microsoft YaHei',
           },
         },
         series: [],
       },
-      legendDataList: ["入手术间", "手术开始", "手术结束", "出手术间"],
+      legendDataList: ['入手术间', '手术开始', '手术结束', '出手术间'],
       yAxisArr: [],
       showPageIndex: -1,
       allPageIndex: 0,
@@ -83,23 +77,19 @@ export default {
   methods: {
     initMockData() {
       // 创建一个数组来存储整点时间
-      const currentDate = dayjs().format("YYYY-MM-DD");
+      const currentDate = dayjs().format('YYYY-MM-DD');
       const hours = new Date().getHours();
-      const detailMin = dayjs().subtract(1, "minute").format("HH:mm:00");
-      const sevenMinutesAgo = dayjs().subtract(8, "minute").format("HH:mm:00");
+      const detailMin = dayjs().subtract(1, 'minute').format('HH:mm:00');
+      const sevenMinutesAgo = dayjs().subtract(8, 'minute').format('HH:mm:00');
       this.chartOptions.xAxis.min = `${currentDate} 08:00:00`;
-      this.chartOptions.xAxis.max = `${dayjs()
-        .add(1, "day")
-        .format("YYYY-MM-DD")} 07:00:00`;
+      this.chartOptions.xAxis.max = `${dayjs().add(1, 'day').format('YYYY-MM-DD')} 07:00:00`;
       // 手术间数量
       const num = 20;
       // 时间数组
       const timeArr = [];
       // 生成手术间
       for (let index = num; index >= 1; index--) {
-        this.chartOptions.yAxis.data.push(
-          `手术间${String(index).padStart(3, "0")}`
-        );
+        this.chartOptions.yAxis.data.push(`手术间${String(index).padStart(3, '0')}`);
         const isUseArr = this.getUseTime();
         for (let j = 1; j < isUseArr.length; j += 2) {
           if (isUseArr[j] <= hours) {
@@ -107,12 +97,9 @@ export default {
               startTime: `${currentDate} ${isUseArr[j - 1]}:00:00`,
               endTime: `${currentDate} ${isUseArr[j]}:00:00`,
               yValue: index - 1,
-              color: textToColor("出手术间"),
-              diff: dayjs(`${currentDate} ${isUseArr[j]}:00:00`).diff(
-                dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`),
-                "minute"
-              ),
-              name: "出手术间",
+              color: textToColor('出手术间'),
+              diff: dayjs(`${currentDate} ${isUseArr[j]}:00:00`).diff(dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`), 'minute'),
+              name: '出手术间',
             });
           } else if (isUseArr[j] > hours && isUseArr[j - 1] < hours) {
             if (Math.random() > 0.5) {
@@ -120,24 +107,18 @@ export default {
                 startTime: `${currentDate} ${isUseArr[j - 1]}:00:00`,
                 endTime: `${currentDate} ${detailMin}`,
                 yValue: index - 1,
-                color: textToColor("手术开始"),
-                diff: dayjs(`${currentDate} ${detailMin}`).diff(
-                  dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`),
-                  "minute"
-                ),
-                name: "手术开始",
+                color: textToColor('手术开始'),
+                diff: dayjs(`${currentDate} ${detailMin}`).diff(dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`), 'minute'),
+                name: '手术开始',
               });
             } else {
               timeArr.push({
                 startTime: `${currentDate} ${isUseArr[j - 1]}:00:00`,
                 endTime: `${currentDate} ${detailMin}`,
                 yValue: index - 1,
-                color: textToColor("手术结束"),
-                diff: dayjs(`${currentDate} ${detailMin}`).diff(
-                  dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`),
-                  "minute"
-                ),
-                name: "手术结束",
+                color: textToColor('手术结束'),
+                diff: dayjs(`${currentDate} ${detailMin}`).diff(dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`), 'minute'),
+                name: '手术结束',
               });
             }
           } else if (isUseArr[j] > hours && isUseArr[j - 1] == hours) {
@@ -145,9 +126,9 @@ export default {
               startTime: `${currentDate} ${sevenMinutesAgo}`,
               endTime: `${currentDate} ${detailMin}`,
               yValue: index - 1,
-              color: textToColor("入手术间"),
-              diff: "7",
-              name: "入手术间",
+              color: textToColor('入手术间'),
+              diff: '7',
+              name: '入手术间',
             });
           }
         }
@@ -158,22 +139,20 @@ export default {
       chart.setOption(this.chartOptions);
     },
     onGetPageData() {
-      let today = dayjs().format("YYYY-MM-DD");
+      let today = dayjs().format('YYYY-MM-DD');
       // today = '2024-06-06';
       // today = '2024-08-07';
       this.chartOptions.xAxis.min = `${today} 08:00:00`;
-      this.chartOptions.xAxis.max = `${dayjs(today)
-        .add(1, "day")
-        .format("YYYY-MM-DD")} 07:00:00`;
-      GetMonitorRoomUsageRate(today).then((res) => {
-        this.originData = res["data"];
+      this.chartOptions.xAxis.max = `${dayjs(today).add(1, 'day').format('YYYY-MM-DD')} 07:00:00`;
+      GetMonitorRoomUsageRate(today).then(res => {
+        this.originData = res['data'];
         this.formatPageList();
       });
     },
     seriesData(data) {
       const res = data.map(function (item) {
         return {
-          type: "custom",
+          type: 'custom',
           name: item.name,
           renderItem: function (params, api) {
             var xStart = api.coord([item.startTime, item.yValue]);
@@ -181,10 +160,10 @@ export default {
             var textX = (xStart[0] + xEnd[0]) / 2;
             var textY = xStart[1] - 20;
             return {
-              type: "group",
+              type: 'group',
               children: [
                 {
-                  type: "line",
+                  type: 'line',
                   shape: {
                     x1: xStart[0],
                     y1: xStart[1],
@@ -197,13 +176,13 @@ export default {
                   },
                 },
                 {
-                  type: "text",
+                  type: 'text',
                   position: [textX, textY],
                   style: {
                     text: `${item.diff} min`,
-                    fill: "#B7BDBF",
-                    textSize: "12px",
-                    textAlign: "center",
+                    fill: '#B7BDBF',
+                    textSize: '12px',
+                    textAlign: 'center',
                   },
                 },
               ],
@@ -225,21 +204,17 @@ export default {
       }
 
       const numValues = Math.floor(Math.random() * 3) + 8;
-      const randomValues = getRandomUniqueValues(
-        8,
-        24,
-        numValues % 2 ? numValues + 1 : numValues
-      );
+      const randomValues = getRandomUniqueValues(8, 24, numValues % 2 ? numValues + 1 : numValues);
       return randomValues.sort((a, b) => {
         return a - b;
       });
     },
     formatLegendData() {
       if (this.legendDataList.length) {
-        this.legendDataList.forEach((item) => {
+        this.legendDataList.forEach(item => {
           this.chartOptions.legend.data.push({
             name: item,
-            icon: "rect",
+            icon: 'rect',
             itemStyle: {
               color: textToColor(item),
             },
@@ -254,32 +229,23 @@ export default {
       const timeArr = [];
       // 根据展示页数,处理Y轴数据
       ++this.showPageIndex >= this.allPageNum && (this.showPageIndex = 0);
-      this.yAxisArr = this.allRoomList
-        .slice(
-          this.pageNum * this.showPageIndex,
-          this.pageNum * (this.showPageIndex + 1)
-        )
-        .reverse();
+      this.yAxisArr = this.allRoomList.slice(this.pageNum * this.showPageIndex, this.pageNum * (this.showPageIndex + 1)).reverse();
       console.log(this.yAxisArr);
       this.chartOptions.yAxis.data = this.yAxisArr;
       this.legendDataList = [];
       // 格式化指定手术间信息
-      this.originData.forEach((item) => {
-        if (this.yAxisArr.includes(item["roomName"])) {
-          if (!this.legendDataList.includes(statusToTxt(item["procStatus"]))) {
-            this.legendDataList.push(statusToTxt(item["procStatus"]));
+      this.originData.forEach(item => {
+        if (this.yAxisArr.includes(item['roomName'])) {
+          if (!this.legendDataList.includes(statusToTxt(item['procStatus']))) {
+            this.legendDataList.push(statusToTxt(item['procStatus']));
           }
           timeArr.push({
-            startTime: dayjs(item["inRoomDateTime"]).format(
-              "YYYY-MM-DD HH:mm:ss"
-            ),
-            endTime: dayjs(item["inRoomDateTime"])
-              .add(item["surgicalDuration"], "minute")
-              .format("YYYY-MM-DD HH:mm:ss"),
-            yValue: this.yAxisArr.findIndex((text) => text == item["roomName"]),
-            color: textToColor(statusToTxt(item["procStatus"])),
-            diff: item["surgicalDuration"],
-            name: statusToTxt(item["procStatus"]),
+            startTime: dayjs(item['inRoomDateTime']).format('YYYY-MM-DD HH:mm:ss'),
+            endTime: dayjs(item['inRoomDateTime']).add(item['surgicalDuration'], 'minute').format('YYYY-MM-DD HH:mm:ss'),
+            yValue: this.yAxisArr.findIndex(text => text == item['roomName']),
+            color: textToColor(statusToTxt(item['procStatus'])),
+            diff: item['surgicalDuration'],
+            name: statusToTxt(item['procStatus']),
           });
         }
       });
@@ -294,10 +260,10 @@ export default {
     },
   },
   mounted() {
-    GetRoomList().then((res) => {
-      res["Data"]["Data"].forEach((item) => {
-        if (item["RoomTypeCode"] == 0) {
-          this.allRoomList.push(item["RoomName"]);
+    GetRoomList().then(res => {
+      res['Data']['Data'].forEach(item => {
+        if (item['RoomTypeCode'] == 0) {
+          this.allRoomList.push(item['RoomName']);
           this.allPageIndex++;
         }
       });
@@ -307,6 +273,9 @@ export default {
         this.initMockData();
       } else {
         this.onGetPageData();
+        setInterval(() => {
+          this.onGetPageData();
+        }, this.$store.getters.intervalTime);
       }
     });
   },
@@ -315,7 +284,7 @@ export default {
 
 <style>
 .bgRightMidBox {
-  background-image: url("@/assets/svg/Room/RightMid/Box.svg");
+  background-image: url('@/assets/svg/Room/RightMid/Box.svg');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
diff --git a/src/views/pageScheduling/index.vue b/src/views/pageScheduling/index.vue
index adf4d23..4678313 100644
--- a/src/views/pageScheduling/index.vue
+++ b/src/views/pageScheduling/index.vue
@@ -89,7 +89,7 @@ export default {
     this.onGetPageData();
     this.redenTimer = setInterval(() => {
       this.onGetPageData();
-    }, 300000);
+    }, this.$store.getters.intervalTime);
   },
   components: {
     'el-carousel': Carousel,