feat: 完成排版改版

src/assets/svg/Schedule/TitleBox.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="417.4140625" height="40.5" viewBox="0 0 417.4140625 40.5"><defs><radialGradient cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" id="master_svg0_555_26275" gradientTransform="translate(208.70703125 20.5) rotate(90) scale(20 203)"><stop offset="0%" stop-color="#251567" stop-opacity="0.800000011920929"/><stop offset="100%" stop-color="#230F79" stop-opacity="0.699999988079071"/></radialGradient></defs><g><g><g><path d="M5.70703125,15L25.70703125,40.5L391.70703125,40.5L411.70703125,25L391.70703125,0.5L25.70703125,0.5L5.70703125,15Z" fill="url(#master_svg0_555_26275)" fill-opacity="1"/><path d="M5.70703125,15L6.32461225,15.7874L25.70703125,40.5L391.70703125,40.5L410.91603125,25.6128L411.70703125,25L411.07403125,24.2251L391.70703125,0.5L25.70703125,0.5L6.51722025,14.4126L5.70703125,15ZM26.19363125,39.5L7.13480125,15.2L26.03143125,1.5L391.23203125,1.5L410.28403125,24.8379L391.36503125,39.5L26.19363125,39.5Z" fill-rule="evenodd" fill="#5797B5" fill-opacity="0.699999988079071"/></g><g transform="matrix(-1,0,0,-1,833.4140625,45)"><path d="M419.77452125,21.7929L416.38693925,24.61589L415.99992925,24.9384L432.97513125,45L438.76213125,45L419.77452125,21.7929ZM417.41413325,25.0616L433.43893125,44L436.65193125,44L419.63954125,23.207099L417.41413325,25.0616Z" fill-rule="evenodd" fill="#5797B5" fill-opacity="0.699999988079071"/></g><g><path d="M3.77452125,17.2929L0.38693925,20.11589L-0.0000707500000000083,20.4384L16.97513125,40.5L22.76213125,40.5L3.77452125,17.2929ZM1.41413325,20.5616L17.43893125,39.5L20.65193125,39.5L3.63954125,18.707099L1.41413325,20.5616Z" fill-rule="evenodd" fill="#5797B5" fill-opacity="0.699999988079071"/></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="417.4141845703125" height="40.5" viewBox="0 0 417.4141845703125 40.5"><g><g><g><path d="M5.7071533203125,15L25.7071533203125,40.5L351.7071533203125,40.5L371.7071533203125,25L351.7071533203125,0.5L25.7071533203125,0.5L5.7071533203125,15Z" fill="#0D2576" fill-opacity="1"/><path d="M5.7071533203125,15L6.3247342703125,15.787416L25.7071533203125,40.5L351.7071533203125,40.5L370.9164733203125,25.612766L371.7071533203125,25L371.0745833203125,24.225088L351.7071533203125,0.5L25.7071533203125,0.5L6.5173422703125,14.412613L5.7071533203125,15ZM26.1937253203125,39.5L7.1349232203124995,15.200028L26.0315153203125,1.5L351.2326033203125,1.5L370.2839033203125,24.837852L351.3649933203125,39.5L26.1937253203125,39.5Z" fill-rule="evenodd" fill="#8AAAFB" fill-opacity="1"/></g><g><path d="M5.7071533203125,15L25.7071533203125,40.5L391.7071533203125,40.5L411.7071533203125,25L391.7071533203125,0.5L25.7071533203125,0.5L5.7071533203125,15Z" fill="#E0E4FC" fill-opacity="1"/><path d="M5.7071533203125,15L6.3247342703125,15.787416L25.7071533203125,40.5L391.7071533203125,40.5L410.9164733203125,25.612766L411.7071533203125,25L411.0745833203125,24.225088L391.7071533203125,0.5L25.7071533203125,0.5L6.5173422703125,14.412613L5.7071533203125,15ZM26.1937253203125,39.5L7.1349232203124995,15.200028L26.0315153203125,1.5L391.2326033203125,1.5L410.2839033203125,24.837852L391.3649933203125,39.5L26.1937253203125,39.5Z" fill-rule="evenodd" fill="#8AAAFB" fill-opacity="1"/></g><g transform="matrix(-1,0,0,-1,833.414306640625,45)"><path d="M419.7746477203125,21.79290044L416.3870611203125,24.6158893L416.0000516203125,24.9383974L432.9752543203125,45L438.7622753203125,45L419.7746477203125,21.79290044ZM417.4142550803125,25.0616026L433.4390523203125,44L436.6520333203125,44L419.6396589203125,23.207099499999998L417.4142550803125,25.0616026Z" fill-rule="evenodd" fill="#8AAAFB" fill-opacity="1"/></g><g><path d="M3.7746477203125,17.29290044L0.3870611203125,20.1158893L0.00005162031249994481,20.4383974L16.9752543203125,40.5L22.7622753203125,40.5L3.7746477203125,17.29290044ZM1.4142550803125,20.5616026L17.4390523203125,39.5L20.6520333203125,39.5L3.6396589203125,18.707099499999998L1.4142550803125,20.5616026Z" fill-rule="evenodd" fill="#8AAAFB" fill-opacity="1"/></g></g></g></svg>

src/assets/svg/Schedule/Triangle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="7" viewBox="0 0 20 7"><g transform="matrix(-1,0,0,1,40,0)"><g><path d="M27.3574042,0L23.7305148,0L20,3.5L20.00010919571,3.5L23.730624,7L27.357513400000002,7L23.6269987,3.5000002L23.6268895,3.5000002L27.3574042,0Z" fill-rule="evenodd" fill="#A378FF" fill-opacity="0.20000000298023224"/></g><g><path d="M33.6786555923645,0L30.051766192364504,0L26.321251392364502,3.5L26.3213605880745,3.5L30.0518753923645,7L33.678764792364504,7L29.948250092364503,3.5000002L29.948140892364503,3.5000002L33.6786555923645,0Z" fill-rule="evenodd" fill="#A378FF" fill-opacity="0.5"/></g><g><path d="M39.999906984729,0L36.373017584729006,0L32.642502784729004,3.5L32.64261198043901,3.5L36.373126784729,7L40.000016184729006,7L36.269501484729005,3.5000002L36.269392284729,3.5000002L39.999906984729,0Z" fill-rule="evenodd" fill="#A378FF" fill-opacity="1"/></g></g></svg>

src/store/index.js

@@ -5,7 +5,7 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
-    isMock: false,
+    isMock: true,
     intervalTime: 30000, // 请求间隔时间
   },
   getters: {

src/views/pageMonitor/bottomRight/eMid.vue

@@ -32,8 +32,6 @@ export default {
   methods: {
     onGetPageData() {
       GetMonitorOperationASALevel(dayjs().format('YYYY-MM-DD')).then(res => {
-        console.log(res.data);
-
         this.pageList[0].value = res.data['asaLevel1'];
         this.pageList[0].name = `一级 ${res.data['asaLevel1'].toString().padStart(4, ' ')}`;
         this.pageList[1].value = res.data['asaLevel2'];

src/views/pageScheduling/index.scss

@@ -0,0 +1,108 @@
+.bgBox {
+  width: vw(1860);
+  height: vh(900);
+  margin: 0 auto;
+  position: relative;
+  background-image: url('@/assets/svg/Schedule/Box.svg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+
+  .bgTitleBox {
+    width: vw(416);
+    height: vh(40);
+    position: absolute;
+    box-sizing: border-box;
+    top: vh(-14);
+    left: vw(60);
+    padding: 0 vw(36);
+    background-image: url('@/assets/svg/Schedule/TitleBox.svg');
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    display: flex;
+    align-items: center;
+
+
+    img {
+      width: vw(20);
+    }
+
+    span {
+      margin: vw(20);
+      color: #444444;
+      font-size: vw(18);
+    }
+
+    p {
+      margin-right: vw(20);
+      color: #444444;
+      font-size: vw(18);
+    }
+  }
+
+  section {
+    width: vw(1800);
+    height: vh(850);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: vh(4);
+
+    :deep(.el-carousel) {
+      height: 100%;
+
+      .el-carousel__item,
+      .el-carousel__container {
+        height: 100%;
+
+        .carouselItemBox {
+          height: 100%;
+          display: grid;
+          grid-template-columns: repeat(auto-fill, vw(586));
+          justify-content: space-between;
+          row-gap: vh(8);
+          align-content: start;
+
+          .itemBox {
+            height: vh(48);
+            box-sizing: border-box;
+            padding: vh(12) vw(40);
+            display: flex;
+            align-items: center;
+
+            div {
+              border-right: 1px dashed rgba(103, 92, 136, 0.24);
+              width: vw(80);
+              text-align: center;
+              color: #8E68FA;
+              font-size: vw(16);
+              letter-spacing: 1px;
+              line-height: vh(24);
+            }
+
+            p {
+              padding-left: vw(24);
+              font-size: vw(16);
+              color: #675C88;
+            }
+          }
+        }
+      }
+    }
+
+    .rowBg1 {
+      background-color: #E8E9FA;
+    }
+
+    .rowBg2 {
+      background-color: #EEEEFF;
+    }
+
+    .rowBg3,
+    .rowBg0 {
+      background-color: #F3F3F9;
+    }
+  }
+}

src/views/pageScheduling/index.vue

@@ -1,27 +1,21 @@
 <template>
-  <div class="w-[172.22vh] h-[83.51vh] bgBox mx-auto relative">
+  <div class="bgBox">
-    <div class="absolute w-[38.51vh] h-[3.7vh] bgTitleBox top-[-1.9vh] left-[3.6vh]">
+    <div class="bgTitleBox">
-      <div class="w-[29.62vh] h-[2.5vh] mx-auto mt-[0.64vh] flex justify-between items-center leading-none">
+      <img src="@/assets/svg/Schedule/Triangle.svg" />
-        <div class="h-[0.64vh]">
+      <span class="panmen">白班</span>
-          <img class="h-full" src="@/assets/svg/Monitor/Triangle.svg" />
+      <p class="panmen">手术间: {{ roomCount }}</p>
-        </div>
+      <p class="panmen">护理人员: {{ nurseCount }}</p>
-        <span class="panmen text-[1.66vh]">白班</span>
-        <p class="panmen text-[1.66vh]">手术间: {{ roomCount }}</p>
-        <p class="panmen text-[1.66vh]">护理人员: {{ nurseCount }}</p>
-      </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">
+    <section>
-      <el-carousel direction="vertical" :autoplay="true" :interval="5000" indicatorPosition="none">
+      <el-carousel direction="vertical" :autoplay="false" :interval="5000" indicatorPosition="none">
         <el-carousel-item v-for="item in schedulingList" :key="item['roomName']">
           <section class="carouselItemBox">
             <template v-for="(subItem, index) in item">
-              <div class="w-[54.25vh] h-[4.44vh] leading-[4.44vh] text-center" :class="index % 6 < 3 ? 'bgOdd' : 'bgEven'" :key="index">
+              <div class="itemBox" :class="`rowBg${Math.ceil((index + 1) % 9 / 3)}`" :key="index">
-                <div class="inline-block w-[9.07vh] h-[1.66vh] leading-none">
+                <div class="panmen">
-                  <span class="panmen text-[#8C5AFA] text-[1.48vh]">{{ subItem['roomName'] }}</span>
+                  {{ subItem['roomName'] }}
-                </div>
-                <div class="inline-block w-[23vh] h-[1.66vh] leading-none pl-[1.94vh] border-l border-dashed border-l-[rgba(213,209,228,0.24)]">
-                  <span class="text-[1.48vh]">{{ subItem['nurseNames'] }}</span>
                 </div>
+                <p>{{ subItem['nurseNames'] }}</p>
               </div>
             </template>
           </section>
@@ -55,23 +49,23 @@ export default {
           this.nurseCount = res['data']['nurseCount'];
           this.schedulingList = [];
           res['data']['nurseScheduleDetails'].forEach((item, index) => {
-            if (this.schedulingList[Math.floor(index / 39)]) {
+            if (this.schedulingList[Math.floor(index / 45)]) {
-              this.schedulingList[Math.floor(index / 39)].push(item);
+              this.schedulingList[Math.floor(index / 45)].push(item);
             } else {
-              this.schedulingList[Math.floor(index / 39)] = [item];
+              this.schedulingList[Math.floor(index / 45)] = [item];
             }
           });
         } else {
           if (this.$store.getters.isMock) {
             this.schedulingList = [];
             for (let index = 0; index < 100; index++) {
-              if (this.schedulingList[Math.floor(index / 39)]) {
+              if (this.schedulingList[Math.floor(index / 45)]) {
-                this.schedulingList[Math.floor(index / 39)].push({
+                this.schedulingList[Math.floor(index / 45)].push({
                   roomName: String(index + 1).padStart(3, '0'),
                   nurseNames: '陈宇、孙晨、邓一帆',
                 });
               } else {
-                this.schedulingList[Math.floor(index / 39)] = [
+                this.schedulingList[Math.floor(index / 45)] = [
                   {
                     roomName: String(index + 1).padStart(3, '0'),
                     nurseNames: '陈宇、孙晨、邓一帆',
@@ -102,34 +96,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.bgBox {
+@import './index.scss'
-  background-image: url('@/assets/svg/Schedule/Box.svg');
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-.bgTitleBox {
-  background-image: url('@/assets/svg/Schedule/TitleBox.svg');
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-:deep(.el-carousel) {
-  height: 100%;
-  .el-carousel__item,
-  .el-carousel__container {
-    height: 100%;
-    .carouselItemBox {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(54.25vh, 1fr));
-      grid-row-gap: 1.64vh;
-    }
-  }
-}
-.bgOdd {
-  background-color: rgba(50, 35, 105, 0.38);
-}
-.bgEven {
-  background-color: rgba(74, 78, 103, 0.15);
-}
 </style>

src/views/waitList/index.vue

@@ -252,7 +252,7 @@ export default {
     },
     onFailed: function (frame) {
       console.group("MQ Failed:")
-      console.log(frame);
+      console.warn(frame);
       console.groupEnd();
       setTimeout(() => {
         this.client = Stomp.client(MQTT_SERVICE);