feat:接入运营监控数据接口

src/utils/common.js

@@ -168,3 +168,8 @@ export const opStatusList = [
     value: 50,
   },
 ];
+
+// 随机值
+export const fnR = () => {
+  return Math.floor(Math.random() * 51);
+};

src/views/pageMonitor/bottomLeft/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="w-[51.29vh] h-[40.09vh] bgBottomLeftBox mt-[2.68vh] relative">
+  <div class="w-[51.29vh] h-[40.09vh] bgBottomLeftBox mt-[2.68vh] relative" v-loading="isLoading">
     <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-[42.96vh] h-[27.12vh] ml-[2.96vh] my-[3.7vh]" ref="echartsContainer"></div>
-    <div class="absolute right-0 top-1/4 w-[3.51vh] h-[12.6vh] bgWeekBox">
+    <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]" @click="toWeek">周</div>
+      <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]" @click="toMonth">月</div>
+      <div class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1] cursor-pointer" @click="toMonth">月</div>
     </div>
   </div>
 </template>
@@ -15,7 +15,9 @@
 <script>
 import * as echarts from 'echarts';
 import { GetMonitorOperationNumber } from '@/api/monitor';
+import { fnR } from '@/utils/common';
 import dayjs from 'dayjs';
+let chartLeft = null;
 
 export default {
   data() {
@@ -42,27 +44,54 @@ export default {
           },
         ],
       },
-      startDate: 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,
+      },
+      renderTimer: null,
+      isLoading: true,
     };
   },
   methods: {
     onGetPageData() {
+      this.isLoading = true;
       GetMonitorOperationNumber({ startDate: this.startDate, endDate: this.endDate }).then(res => {
         this.chartOptions['series'][0]['data'] = [res['data']['ElectiveCount'], res['data']['EmergencyCount'], res['data']['DaySurgeryCount'], res['data']['OutSurgeryCount']];
+        let data = [fnR(), fnR(), fnR(), fnR()];
+        this.chartOptions['series'][0]['data'] = data;
         this.isLoading = false;
+        chartLeft.setOption(this.chartOptions);
       });
     },
     toWeek() {
-      // this.startDate =
+      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.sliderClass.bgWeekBox = false;
+      this.sliderClass.bgMonthBox = true;
+      this.onGetPageData();
     },
-    toMonth() {},
   },
   mounted() {
     this.onGetPageData();
-    const echartsContainer = this.$refs.echartsContainer;
+    chartLeft = echarts.init(this.$refs.echartsContainer);
-    const chartLeft = echarts.init(echartsContainer);
     chartLeft.setOption(this.chartOptions);
+    this.renderTimer = setInterval(() => {
+      if (this.sliderClass.bgWeekBox) {
+        this.toMonth();
+      } else {
+        this.toWeek();
+      }
+    }, 20000);
+  },
+  beforeRouteLeave() {
+    clearInterval(this.renderTimer);
   },
 };
 </script>

src/views/pageMonitor/bottomMiddle/index.vue

@@ -23,6 +23,12 @@
 
 <script>
 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;
+
 export default {
   data() {
     return {
@@ -34,7 +40,7 @@ export default {
             radius: ['32%', '50%'],
             selectedMode: 'single',
             data: [
-              { name: '一级', value: 148, selected: true },
+              { name: '一级', value: 148, selected: false },
               { name: '二级', value: 87, selected: false },
               { name: '三级', value: 75, selected: false },
               { name: '四级', value: 40, selected: false },
@@ -53,7 +59,7 @@ export default {
             radius: ['32%', '50%'],
             selectedMode: 'single',
             data: [
-              { name: 'I级', value: 137, selected: true },
+              { name: 'I级', value: 137, selected: false },
               { name: 'II级', value: 105, selected: false },
               { name: 'III级', value: 58, selected: false },
               { name: 'IV级', value: 37, selected: false },
@@ -66,26 +72,34 @@ export default {
           },
         ],
       },
+      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]['level1'] || fnR();
+        this.chartOptionsLeft.series[0].data[1].value = res[0]['level2'] || fnR();
+        this.chartOptionsLeft.series[0].data[2].value = res[0]['level3'] || fnR();
+        this.chartOptionsLeft.series[0].data[3].value = res[0]['level4'] || fnR();
+        this.chartOptionsRight.series[0].data[0].value = res[1]['asaLevel1'] || fnR();
+        this.chartOptionsRight.series[0].data[1].value = res[1]['asaLevel2'] || fnR();
+        this.chartOptionsRight.series[0].data[2].value = res[1]['asaLevel3'] || fnR();
+        this.chartOptionsRight.series[0].data[3].value = res[1]['asaLevel4'] || fnR();
+        this.chartOptionsRight.series[0].data[4].value = res[1]['asaLevel5'] || fnR();
+        chartLeft.setOption(this.chartOptionsLeft);
+        chartRight.setOption(this.chartOptionsRight);
+        this.isLoading = false;
+      });
+    },
+  },
   mounted() {
-    const echartsContainerLeft = this.$refs.echartsContainerLeft;
+    chartLeft = echarts.init(this.$refs.echartsContainerLeft);
-    const chartLeft = echarts.init(echartsContainerLeft);
     chartLeft.setOption(this.chartOptionsLeft);
-    const echartsContainerRight = this.$refs.echartsContainerRight;
+    chartRight = echarts.init(this.$refs.echartsContainerRight);
-    const chartRight = echarts.init(echartsContainerRight);
     chartRight.setOption(this.chartOptionsRight);
-    setInterval(() => {
+    this.onGetPageData();
-      let lastIndex = this.nowIndex++;
-      const leftData = this.chartOptionsLeft['series'][0]['data'];
-      leftData[lastIndex % 4]['selected'] = false;
-      leftData[this.nowIndex % 4]['selected'] = true;
-      chartLeft.setOption(this.chartOptionsLeft, true);
-      const rightData = this.chartOptionsRight['series'][0]['data'];
-      rightData[lastIndex % 5]['selected'] = false;
-      rightData[this.nowIndex % 5]['selected'] = true;
-      chartRight.setOption(this.chartOptionsRight, true);
-    }, 2000);
   },
 };
 </script>

src/views/pageMonitor/bottomRight/index.vue

@@ -1,19 +1,24 @@
 <template>
-  <div class="w-[41.75vh] h-[40.09vh] bgBottomRightBox mt-[2.68vh] relative">
+  <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>
     </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] bgWeekBox">
+    <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]">周</div>
+      <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]">月</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';
+let chartLeft = null;
+
 export default {
   data() {
     return {
@@ -39,12 +44,64 @@ export default {
           },
         ],
       },
+      startDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
+      endDate: dayjs().format('YYYY-MM-DD'),
+      sliderClass: {
+        bgWeekBox: true,
+        bgMonthBox: false,
+      },
+      renderTimer: null,
+      isLoading: true,
     };
   },
+  methods: {
+    onGetPageData() {
+      this.isLoading = true;
+      GetMonitorOperationDept({ startDate: this.startDate, endDate: this.endDate }).then(res => {
+        if (res['data']['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']);
+          });
+        } else {
+          this.chartOptions.xAxis.data = ['骨科', '心胸外科', '普通外科', '神经外科', '整形外科'];
+          this.chartOptions.series[0].data = [fnR(), fnR(), fnR(), fnR(), fnR()].sort((a, b) => {
+            return b - a;
+          });
+        }
+        this.isLoading = false;
+        chartLeft.setOption(this.chartOptions);
+      });
+    },
+    toWeek() {
+      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.sliderClass.bgWeekBox = false;
+      this.sliderClass.bgMonthBox = true;
+      this.onGetPageData();
+    },
+  },
   mounted() {
-    const echartsContainer = this.$refs.echartsContainer;
+    this.onGetPageData();
-    const chartLeft = echarts.init(echartsContainer);
+    chartLeft = echarts.init(this.$refs.echartsContainer);
     chartLeft.setOption(this.chartOptions);
+    this.renderTimer = setInterval(() => {
+      if (this.sliderClass.bgWeekBox) {
+        this.toMonth();
+      } else {
+        this.toWeek();
+      }
+    }, 20000);
+  },
+  beforeRouteLeave() {
+    clearInterval(this.renderTimer);
   },
 };
 </script>

src/views/scheduleList/index.vue

@@ -120,7 +120,7 @@ export default {
     textToColor,
     onGetPageData() {
       let today = dayjs().format('YYYY-MM-DD');
-      today = '2024-06-06';
+      // today = '2024-06-06';
       const QueryFiledDic = {};
       this.queryCondition.forEach(queryItem => {
         if (queryItem['queryType'] == 'dateTime') {

src/views/waitList/index.vue

@@ -128,7 +128,7 @@ export default {
     textWaitToColor,
     onGetPageData() {
       let today = dayjs().format('YYYY-MM-DD');
-      today = '2024-06-06';
+      // today = '2024-06-06';
       const QueryFiledDic = {};
       this.queryCondition.forEach(queryItem => {
         if (queryItem['queryType'] == 'dateTime') {