wip:对接运营监控接口

package-lock.json

@@ -8,6 +8,7 @@
       "name": "cockpit",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^1.7.2",
         "core-js": "^3.8.3",
         "dayjs": "^1.11.10",
         "echarts": "^5.5.0",
@@ -3669,6 +3670,11 @@
         "babel-runtime": "6.x"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -3715,6 +3721,16 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-helper-vue-jsx-merge-props": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
@@ -4455,6 +4471,17 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
@@ -5253,6 +5280,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -6565,10 +6600,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.5",
+      "version": "1.15.6",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
-      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -6671,6 +6705,19 @@
         "node": ">= 8"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -8225,7 +8272,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -8234,7 +8280,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -9893,6 +9938,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",

package.json

@@ -4,10 +4,12 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
+    "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^1.7.2",
     "core-js": "^3.8.3",
     "dayjs": "^1.11.10",
     "echarts": "^5.5.0",

public/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <script src="./webConfig.js"></script>
   </head>
   <body>
     <noscript>

public/webConfig.js

@@ -0,0 +1,3 @@
+window.globalUrl = {
+  baseURL: 'http://139.196.204.68:7015/',
+};

src/App.vue

@@ -14,7 +14,7 @@ import comHeader from '@/components/comHeader/comHeader.vue';
 export default {
   data: () => {
     return {
-      isLoding: true,
+      isLoding: false,
     };
   },
   methods: {

src/api/monitor.js

@@ -0,0 +1,69 @@
+import _axios from '@/utils/_axios';
+
+/**
+ * 获取手术总量(左上角)
+ */
+export const GetMonitorOperationCount = date => {
+  return _axios({
+    url: '/api/QualityMicroservice/Monitor/GetMonitorOperationCount',
+    params: {
+      date,
+    },
+  });
+};
+
+/**
+ * 获取术间状态(右上角)
+ */
+export const GetMonitorOperationRoomStatus = date => {
+  return _axios({
+    url: '/api/QualityMicroservice/Monitor/GetMonitorOperationRoomStatus',
+    params: {
+      date,
+    },
+  });
+};
+
+/**
+ * 获取手术量统计(左下角)
+ */
+export const GetMonitorOperationNumber = data => {
+  return _axios({
+    url: '/api/QualityMicroservice/Monitor/GetMonitorOperationNumber',
+    params: data,
+  });
+};
+
+/**
+ * 获取手术级别统计(下中左)
+ */
+export const GetMonitorOperationLevel = date => {
+  return _axios({
+    url: '/api/QualityMicroservice/Monitor/GetMonitorOperationLevel',
+    params: {
+      date,
+    },
+  });
+};
+
+/**
+ * 获取ASA级别(下中右)
+ */
+export const GetMonitorOperationASALevel = date => {
+  return _axios({
+    url: '/api/QualityMicroservice/Monitor/GetMonitorOperationASALevel',
+    params: {
+      date,
+    },
+  });
+};
+
+/**
+ * 获取ASA级别(右下角)
+ */
+export const GetMonitorOperationDept = data => {
+  return _axios({
+    url: '/api/QualityMicroservice/Monitor/GetMonitorOperationDept',
+    params: data,
+  });
+};

src/assets/style/tailwind.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.el-loading-spinner {
+  left: 50%;
+}

src/main.js

@@ -3,6 +3,11 @@ import App from './App.vue';
 import router from './router';
 import store from './store';
 import '@/assets/style/tailwind.css';
+import { Loading } from 'element-ui';
+
+Vue.use(Loading.directive);
+
+Vue.prototype.$loading = Loading.service;
 
 Vue.config.productionTip = false;
 

src/router/index.js

@@ -7,7 +7,7 @@ const routes = [
   {
     path: '/',
     name: 'home',
-    redirect: '/scheduling',
+    redirect: '/monitor',
   },
   {
     path: '/monitor',

src/utils/_axios.js

@@ -0,0 +1,23 @@
+import axios from 'axios';
+
+let _axios = axios.create({
+  baseURL: window.globalUrl.baseURL,
+  timeout: 5000,
+});
+
+// _axios.interceptors.request.use(function (config) {
+//   return config;
+// }, function (error) {
+//   return Promise.reject(error);
+// });
+
+_axios.interceptors.response.use(
+  function (response) {
+    return response['data'];
+  },
+  function (error) {
+    return Promise.reject(error);
+  }
+);
+
+export default _axios;

src/views/pageMonitor/bottomLeft/index.vue

@@ -6,14 +6,17 @@
     </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="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1]">周</div>
+      <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]">月</div>
+      <div class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1]" @click="toMonth">月</div>
     </div>
   </div>
 </template>
 
 <script>
 import * as echarts from 'echarts';
+import { GetMonitorOperationNumber } from '@/api/monitor';
+import dayjs from 'dayjs';
+
 export default {
   data() {
     return {
@@ -33,15 +36,30 @@ export default {
         },
         series: [
           {
-            data: [87, 108, 50, 92],
+            data: [1, 1, 1, 1],
             type: 'bar',
             barWidth: '10%',
           },
         ],
       },
+      startDate: dayjs().format('YYYY-MM-DD'),
+      endDate: dayjs().format('YYYY-MM-DD'),
     };
   },
+  methods: {
+    onGetPageData() {
+      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']];
+        this.isLoading = false;
+      });
+    },
+    toWeek() {
+      // this.startDate =
+    },
+    toMonth() {},
+  },
   mounted() {
+    this.onGetPageData();
     const echartsContainer = this.$refs.echartsContainer;
     const chartLeft = echarts.init(echartsContainer);
     chartLeft.setOption(this.chartOptions);

src/views/pageMonitor/index.vue

@@ -20,7 +20,21 @@ import topRight from './topRight/index.vue';
 import bottomLeft from './bottomLeft/index.vue';
 import bottomMiddle from './bottomMiddle/index.vue';
 import bottomRight from './bottomRight/index.vue';
+
 export default {
+  data() {
+    return {
+      isLoading: true,
+      topLeftData: {
+        firstPunctualityRate: 0,
+        roomUserRate: 0,
+        patEmergencyCount: 0,
+        patCount: 0,
+        patOperationing: 0,
+        patWating: 0,
+      },
+    };
+  },
   components: {
     topLeft,
     topRight,

src/views/pageMonitor/topLeft/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-[51.29vh] h-[39.62vh] bgTopLeftBox bg-contain bg-center bg-no-repeat p-[3vh] box-border">
+  <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">
@@ -18,7 +18,7 @@
           <img src="@/assets/svg/Monitor/TopLeft/TrianglePurple.svg" />
           <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">350</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">
@@ -39,23 +39,25 @@
 </template>
 
 <script>
+import { GetMonitorOperationCount } from '@/api/monitor';
+import dayjs from 'dayjs';
 export default {
   data() {
     return {
       overviewData: [
         {
           itemName: '首台准点率',
-          itemVal: '80',
+          itemVal: '0',
           itemUnit: '%',
         },
         {
           itemName: '手术间利用率',
-          itemVal: '86',
+          itemVal: '0',
           itemUnit: '%',
         },
         {
           itemName: '急诊患者',
-          itemVal: '180',
+          itemVal: '0',
           itemUnit: '个',
         },
       ],
@@ -69,8 +71,28 @@ export default {
           itemVal: '300',
         },
       ],
+      totalPopulation: 0,
+      isLoading: true,
     };
   },
+  methods: {
+    onGetPageData() {
+      let nowDay = dayjs().format('YYYY-MM-DD');
+      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'];
+        this.isLoading = false;
+      });
+    },
+  },
+  mounted() {
+    this.onGetPageData();
+  },
 };
 </script>
 

src/views/pageMonitor/topRight/index.vue

@@ -1,10 +1,20 @@
 <template>
-  <div class="w-[116.94vh] h-[39.62vh] bgTopRightBox bg-contain bg-center bg-no-repeat p-[2.96vh] box-border">
+  <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">
-      <el-carousel-item v-for="item in 3" :key="item">
+      <el-carousel-item v-for="item in opList" :key="item['roomCode']">
         <section>
-          <template v-for="(item1, index) in 21">
+          <template v-for="(subItem, index) in item">
-            <div v-if="index % 3" class="w-[12.59vh] h-[9.81vh] ItemBox relative" :key="index">
+            <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>
+              <div class="absolute w-[10vh] h-[2.77vh] left-[1.03vh] bottom-[1.48vh] flex justify-between items-end">
+                <img src="@/assets/svg/Monitor/TopRight/OpingIcon.svg" />
+                <span class="text-[1.85vh] text-[#B53FDF] youshe text-nowrap">{{ subItem['operStatusName'] }}</span>
+              </div>
+            </div>
+
+            <!-- <div v-if="index % 3" 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">
                 OR-{{ String(index + 1).padStart(3, '0') }}
               </p>
@@ -30,7 +40,7 @@
                 <img src="@/assets/svg/Monitor/TopRight/OpWaitIcon.svg" />
                 <span class="text-[1.85vh] text-[#0CFFFF] youshe">空置中</span>
               </div>
-            </div>
+            </div> -->
           </template>
         </section>
       </el-carousel-item>
@@ -40,7 +50,40 @@
 
 <script>
 import { Carousel, CarouselItem } from 'element-ui';
+import { GetMonitorOperationRoomStatus } from '@/api/monitor';
+import dayjs from 'dayjs';
 export default {
+  data() {
+    return {
+      opList: [],
+      isLoading: true,
+    };
+  },
+  methods: {
+    onGetPageData() {
+      let nowDay = dayjs().format('YYYY-MM-DD');
+      nowDay = '2024-06-06';
+      GetMonitorOperationRoomStatus(nowDay).then(res => {
+        this.formatData(res['data']);
+        this.isLoading = false;
+      });
+    },
+    formatData(pageData) {
+      this.opList = [];
+      let group = 0;
+      for (let i = 0; i < pageData['length']; i++) {
+        group = parseInt(i / 21);
+        if (this.opList[group]) {
+          this.opList[group].push(pageData[i]);
+        } else {
+          this.opList[group] = [pageData[i]];
+        }
+      }
+    },
+  },
+  mounted() {
+    this.onGetPageData();
+  },
   components: {
     'el-carousel': Carousel,
     'el-carousel-item': CarouselItem,
@@ -54,7 +97,7 @@ export default {
   :deep(.el-carousel) {
     height: 39.62vh;
     .el-carousel__container {
-    height: 39.62vh;
+      height: 39.62vh;
       .el-carousel__item {
         section {
           display: grid;

src/views/pageScheduling/index.vue

@@ -11,8 +11,8 @@
       </div>
     </div>
     <section class="w-[166.2vh] h-[77.12vh] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-      <el-carousel direction="vertical" :autoplay="false" :interval="5000" indicatorPosition="none">
+      <el-carousel direction="vertical" :autoplay="true" :interval="5000" indicatorPosition="none">
-        <el-carousel-item v-for="item in 1" :key="item">
+        <el-carousel-item v-for="item in 3" :key="item">
           <section class="carouselItemBox">
             <template v-for="(item, index) in 39">
               <div class="w-[54.25vh] h-[4.44vh] leading-[4.44vh] text-center" :class="index % 6 < 3 ? 'bgOdd' : 'bgEven'" :key="index">