From 3eb9b174c63039a23e839bfc15e48ea4786d6f17 Mon Sep 17 00:00:00 2001
From: weiyin <yin.wei@le9health.com>
Date: Mon, 19 Aug 2024 22:40:21 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=83=A8=E5=88=86=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E4=B8=AD=E6=8E=A5=E5=8F=A3=E8=B0=83=E8=AF=95=E5=8F=8A=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E5=91=88=E7=8E=B0=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                  |   1 +
 src/api/monitor.js                          |  26 ++--
 src/views/pageMonitor/bottomRight/index.vue | 128 ++++++++++++++------
 src/views/pageMonitor/topLeft/index.vue     | 125 +++++++++++++------
 src/views/pageOperation/leftTop/index.vue   | 112 +++++++++++------
 src/views/pageRoom/leftBottom/index.vue     |   3 +-
 src/views/pageRoom/leftTop/index.vue        |  64 +++++-----
 src/views/pageRoom/rightMid/index.vue       |   3 +-
 8 files changed, 305 insertions(+), 157 deletions(-)

diff --git a/.gitignore b/.gitignore
index 403adbc..380349c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/.history
 
 
 # local env files
diff --git a/src/api/monitor.js b/src/api/monitor.js
index 82cb2ec..e7af3e0 100644
--- a/src/api/monitor.js
+++ b/src/api/monitor.js
@@ -1,11 +1,11 @@
-import _axios from '@/utils/_axios';
+import _axios from "@/utils/_axios";
 
 /**
  * 获取手术总量(左上角)
  */
-export const GetMonitorOperationCount = date => {
+export const GetMonitorOperationCount = (date) => {
   return _axios({
-    url: '/api/QualityMicroservice/Monitor/GetMonitorOperationCount',
+    url: "/api/QualityMicroservice/Monitor/GetMonitorOperationCount",
     params: {
       date,
     },
@@ -15,9 +15,9 @@ export const GetMonitorOperationCount = date => {
 /**
  * 获取术间状态(右上角)
  */
-export const GetMonitorOperationRoomStatus = date => {
+export const GetMonitorOperationRoomStatus = (date) => {
   return _axios({
-    url: '/api/QualityMicroservice/Monitor/GetMonitorOperationRoomStatus',
+    url: "/api/QualityMicroservice/Monitor/GetMonitorOperationRoomStatus",
     params: {
       date,
     },
@@ -27,9 +27,9 @@ export const GetMonitorOperationRoomStatus = date => {
 /**
  * 获取手术量统计(左下角)
  */
-export const GetMonitorOperationNumber = data => {
+export const GetMonitorOperationNumber = (data) => {
   return _axios({
-    url: '/api/QualityMicroservice/Monitor/GetMonitorOperationNumber',
+    url: "/api/QualityMicroservice/Monitor/GetMonitorOperationNumber",
     params: data,
   });
 };
@@ -37,9 +37,9 @@ export const GetMonitorOperationNumber = data => {
 /**
  * 获取手术级别统计(下中左)
  */
-export const GetMonitorOperationLevel = date => {
+export const GetMonitorOperationLevel = (date) => {
   return _axios({
-    url: '/api/QualityMicroservice/Monitor/GetMonitorOperationLevel',
+    url: "/api/QualityMicroservice/Monitor/GetMonitorOperationLevel",
     params: {
       date,
     },
@@ -49,9 +49,9 @@ export const GetMonitorOperationLevel = date => {
 /**
  * 获取ASA级别(下中右)
  */
-export const GetMonitorOperationASALevel = date => {
+export const GetMonitorOperationASALevel = (date) => {
   return _axios({
-    url: '/api/QualityMicroservice/Monitor/GetMonitorOperationASALevel',
+    url: "/api/QualityMicroservice/Monitor/GetMonitorOperationASALevel",
     params: {
       date,
     },
@@ -61,9 +61,9 @@ export const GetMonitorOperationASALevel = date => {
 /**
  * 获取ASA级别(右下角)
  */
-export const GetMonitorOperationDept = data => {
+export const GetMonitorOperationDept = (data) => {
   return _axios({
-    url: '/api/QualityMicroservice/Monitor/GetMonitorOperationDept',
+    url: "/api/QualityMicroservice/Monitor/GetMonitorOperationDept",
     params: data,
   });
 };
diff --git a/src/views/pageMonitor/bottomRight/index.vue b/src/views/pageMonitor/bottomRight/index.vue
index 2db98d7..e0e49fd 100644
--- a/src/views/pageMonitor/bottomRight/index.vue
+++ b/src/views/pageMonitor/bottomRight/index.vue
@@ -1,22 +1,45 @@
 <template>
-  <div class="w-[41.75vh] h-[40.09vh] bgBottomRightBox mt-[2.68vh] relative" v-loading="isLoading">
-    <div class="w-[20.8vh] h-[5.07vh] ml-[1.85vh] flex justify-between items-center">
+  <div
+    class="w-[41.75vh] h-[40.09vh] bgBottomRightBox mt-[2.68vh] relative"
+    v-loading="isLoading"
+  >
+    <div
+      class="w-[20.8vh] 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-[35.46vh] h-[28.05vh] ml-[2.4vh] my-[3.7vh]" ref="echartsContainer"></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="w-[35.46vh] h-[28.05vh] ml-[2.4vh] my-[3.7vh]"
+      ref="echartsContainer"
+    ></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 * as echarts from 'echarts';
-import { GetMonitorOperationDept } from '@/api/monitor';
-import { fnR } from '@/utils/common';
-import dayjs from 'dayjs';
+import * as echarts from "echarts";
+import { GetMonitorOperationDept } from "@/api/monitor";
+import { fnR } from "@/utils/common";
+import dayjs from "dayjs";
 let chartLeft = null;
 
 export default {
@@ -24,53 +47,88 @@ export default {
     return {
       chartOptions: {
         grid: {
-          left: '0%',
-          right: '0%',
-          top: '0%',
-          bottom: '10%',
+          left: "0%",
+          right: "0%",
+          top: "0%",
+          bottom: "10%",
         },
         xAxis: {
-          type: 'category',
-          data: ['骨科', '心胸外科', '普通外科', '神经外科', '整形外科'],
+          type: "category",
+          data: ["骨科", "心胸外科", "普通外科", "神经外科", "整形外科"],
         },
         yAxis: {
-          type: 'value',
+          type: "value",
         },
         series: [
           {
             data: [180, 165, 155, 148, 137],
-            type: 'bar',
-            barWidth: '10%',
+            type: "bar",
+            barWidth: "10%",
           },
         ],
       },
-      startDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
-      endDate: dayjs().format('YYYY-MM-DD'),
+      emptyOptions: {
+        title: {
+          text: "暂无数据",
+          x: "center",
+          y: "center",
+          textStyle: {
+            color: "#fff",
+            fontWeight: "normal",
+            fontSize: 16,
+          },
+        },
+      },
+      startDate: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
+      endDate: dayjs().format("YYYY-MM-DD"),
       sliderClass: {
         bgWeekBox: true,
         bgMonthBox: false,
       },
       renderTimer: null,
       isLoading: true,
+      getDataList: [],
     };
   },
   methods: {
     onGetPageData() {
+      chartLeft.clear(); //先清除图表
       this.isLoading = true;
-      GetMonitorOperationDept({ startDate: this.startDate, endDate: this.endDate }).then(res => {
-        if (res['data']['length']) {
+      GetMonitorOperationDept({
+        startDate: this.startDate,
+        endDate: this.endDate,
+      }).then((res) => {
+        this.getDataList = res["data"] || [];
+        if (this.getDataList.length) {
           this.chartOptions.xAxis.data = [];
           this.chartOptions.series[0].data = [];
-          res['data'].forEach(item => {
-            this.chartOptions.xAxis.data.push(item['deptName']);
-            this.chartOptions.series[0].data.push(item['deptCount']);
+          res["data"].forEach((item) => {
+            this.chartOptions.xAxis.data.push(item["deptName"]);
+            this.chartOptions.series[0].data.push(item["deptCount"]);
           });
         } else {
           if (this.$store.getters.isMock) {
-            this.chartOptions.xAxis.data = ['骨科', '心胸外科', '普通外科', '神经外科', '整形外科'];
-            this.chartOptions.series[0].data = [fnR(), fnR(), fnR(), fnR(), fnR()].sort((a, b) => {
+            this.chartOptions.xAxis.data = [
+              "骨科",
+              "心胸外科",
+              "普通外科",
+              "神经外科",
+              "整形外科",
+            ];
+            this.chartOptions.series[0].data = [
+              fnR(),
+              fnR(),
+              fnR(),
+              fnR(),
+              fnR(),
+            ].sort((a, b) => {
               return b - a;
             });
+          } else {
+            //清空数据
+            this.chartOptions.xAxis.data = [];
+            this.chartOptions.series[0].data = [];
+            chartLeft.setOption(this.emptyOptions);
           }
         }
         this.isLoading = false;
@@ -78,21 +136,21 @@ export default {
       });
     },
     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();
     },
   },
   mounted() {
-    this.onGetPageData();
     chartLeft = echarts.init(this.$refs.echartsContainer);
+    this.onGetPageData();
     chartLeft.setOption(this.chartOptions);
     this.renderTimer = setInterval(() => {
       if (this.sliderClass.bgWeekBox) {
@@ -110,18 +168,18 @@ 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");
 }
 </style>
diff --git a/src/views/pageMonitor/topLeft/index.vue b/src/views/pageMonitor/topLeft/index.vue
index 91e3ff5..94352db 100644
--- a/src/views/pageMonitor/topLeft/index.vue
+++ b/src/views/pageMonitor/topLeft/index.vue
@@ -1,34 +1,62 @@
 <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"
+    v-loading="isLoading"
+  >
     <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>
+          <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 }}</p>
+        <p class="text-[#B53FDF] text-[4.07vh] mt-[1.4vh] youshe leading-none">
+          {{ totalPopulation }}
+        </p>
       </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>
@@ -39,36 +67,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,
@@ -77,17 +105,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 => {
-        this.overviewData[0]['itemVal'] = res['data']['firstPunctualityRate'].slice(0, -1);
-        this.overviewData[1]['itemVal'] = res['data']['roomUserRate'].slice(0, -1);
-        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'];
+      GetMonitorOperationCount(nowDay).then((res) => {
+        if (!res.data) {
+          return;
+        }
+        this.overviewData[0]["itemVal"] = res["data"][
+          "firstPunctualityRate"
+        ].slice(0, -1);
+        this.overviewData[1]["itemVal"] = res["data"]["roomUserRate"].slice(
+          0,
+          -1
+        );
+        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;
       });
     },
@@ -100,17 +136,26 @@ export default {
 
 <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/pageOperation/leftTop/index.vue b/src/views/pageOperation/leftTop/index.vue
index 4ad071b..1362748 100644
--- a/src/views/pageOperation/leftTop/index.vue
+++ b/src/views/pageOperation/leftTop/index.vue
@@ -1,23 +1,40 @@
 <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="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 }}</p>
+        <p class="text-[#733FF3] text-[4.07vh] mt-[1.4vh] youshe leading-none">
+          {{ totalPopulation }}
+        </p>
       </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>
@@ -28,9 +45,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() {
@@ -38,15 +55,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,
@@ -54,7 +71,7 @@ export default {
               clip: false,
               itemStyle: {
                 color: {
-                  type: 'linear',
+                  type: "linear",
                   x: 0,
                   y: 0,
                   x2: 0,
@@ -62,11 +79,11 @@ export default {
                   colorStops: [
                     {
                       offset: 0,
-                      color: '#9C85FA',
+                      color: "#9C85FA",
                     },
                     {
                       offset: 1,
-                      color: '#5531E7',
+                      color: "#5531E7",
                     },
                   ],
                   global: false,
@@ -75,7 +92,7 @@ export default {
             },
             axisLine: {
               lineStyle: {
-                color: [[1, '#4F518C']],
+                color: [[1, "#4F518C"]],
                 opacity: 0.7,
                 width: 30,
               },
@@ -95,21 +112,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}%`,
                 },
               },
@@ -119,12 +136,12 @@ export default {
       },
       peopleData: [
         {
-          itemName: '进行中',
-          itemVal: '50',
+          itemName: "进行中",
+          itemVal: "50",
         },
         {
-          itemName: '待进行',
-          itemVal: '300',
+          itemName: "待进行",
+          itemVal: "300",
         },
       ],
       totalPopulation: 0,
@@ -133,15 +150,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 => {
-        this.chartOptions['series'][0]['data'][0]['value'] = res['data']['firstPunctualityRate'].slice(0, -1);
-        this.peopleData[0]['itemVal'] = res['data']['patOperationing'];
-        this.peopleData[1]['itemVal'] = res['data']['patWating'];
-        this.totalPopulation = res['data']['patCount'];
+      GetMonitorOperationCount(nowDay).then((res) => {
+        if (!res.data) {
+          this.isLoading = false;
+          return;
+        }
+        this.chartOptions["series"][0]["data"][0]["value"] = res["data"][
+          "firstPunctualityRate"
+        ].slice(0, -1);
+        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;
       });
@@ -156,20 +179,29 @@ export default {
 
 <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/pageRoom/leftBottom/index.vue b/src/views/pageRoom/leftBottom/index.vue
index f1fa489..18ed497 100644
--- a/src/views/pageRoom/leftBottom/index.vue
+++ b/src/views/pageRoom/leftBottom/index.vue
@@ -95,7 +95,8 @@ export default {
         nowDay = '2024-06-06';
       }
       GetMonitorAverageReceptionTime(nowDay).then(res => {
-        this.chartOptions['series'][0]['data'][0]['value'] = res['data']['averageReceptionTime'] > 999 ? 999 : res['data']['averageReceptionTime'];
+        // this.chartOptions['series'][0]['data'][0]['value'] = res['data']['averageReceptionTime'] > 999 ? 999 : res['data']['averageReceptionTime'];
+        this.chartOptions['series'][0]['data'][0]['value'] = res['data']['averageReceptionTime'];
         chart.setOption(this.chartOptions);
         this.isLoading = false;
       });
diff --git a/src/views/pageRoom/leftTop/index.vue b/src/views/pageRoom/leftTop/index.vue
index c9b8677..24820aa 100644
--- a/src/views/pageRoom/leftTop/index.vue
+++ b/src/views/pageRoom/leftTop/index.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="h-[48.79vh] bgLeftTopBox p-[1.85vh]" v-loading="isLoading">
-    <div class="w-[22vh] h-[22vh] mx-auto mt-[4.6vh]" 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="w-[22vh] h-[22vh] mx-auto mt-[4.6vh]"
+      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>
@@ -12,9 +17,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() {
@@ -22,15 +27,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,
@@ -38,7 +43,7 @@ export default {
               clip: false,
               itemStyle: {
                 color: {
-                  type: 'linear',
+                  type: "linear",
                   x: 0,
                   y: 0,
                   x2: 0,
@@ -46,11 +51,11 @@ export default {
                   colorStops: [
                     {
                       offset: 0,
-                      color: '#9C85FA',
+                      color: "#9C85FA",
                     },
                     {
                       offset: 1,
-                      color: '#5531E7',
+                      color: "#5531E7",
                     },
                   ],
                   global: false,
@@ -59,7 +64,7 @@ export default {
             },
             axisLine: {
               lineStyle: {
-                color: [[1, '#4F518C']],
+                color: [[1, "#4F518C"]],
                 opacity: 0.7,
                 width: 30,
               },
@@ -79,21 +84,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}%`,
                 },
               },
@@ -107,13 +112,18 @@ 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 => {
-        this.chartOptions['series'][0]['data'][0]['value'] = res['data']['firstPunctualityRate'].slice(0, -1);
-        this.opTotal = res['data']['roomCount'];
+      GetMonitorOperationCount(nowDay).then((res) => {
+        if (!res.data) {
+          return;
+        }
+        this.chartOptions["series"][0]["data"][0]["value"] = res["data"][
+          "firstPunctualityRate"
+        ].slice(0, -1);
+        this.opTotal = res["data"]["roomCount"];
         chart.setOption(this.chartOptions);
         this.isLoading = false;
       });
@@ -128,13 +138,13 @@ export default {
 
 <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 994999c..af5fdfd 100644
--- a/src/views/pageRoom/rightMid/index.vue
+++ b/src/views/pageRoom/rightMid/index.vue
@@ -140,7 +140,8 @@ export default {
     },
     onGetPageData() {
       let today = dayjs().format('YYYY-MM-DD');
-      today = '2024-06-06';
+      // 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 => {