From 96454b33ef882b36b1a8b73f3416e88a7e7909fe Mon Sep 17 00:00:00 2001
From: "@0Melon0" <576788380@qq.com>
Date: Fri, 1 Mar 2024 11:22:58 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=BF=90=E8=90=A5=E7=9B=91=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svg/Schedule/Box.svg            |  1 +
 src/assets/svg/Schedule/TitleBox.svg       |  1 +
 src/router/index.js                        |  4 +-
 src/views/pageOperation/leftTop/index.vue  |  4 +-
 src/views/pageOperation/rightMid/index.vue | 17 ++++-
 src/views/pageScheduling/index.vue         | 72 +++++++++++++++++++++-
 6 files changed, 90 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/svg/Schedule/Box.svg
 create mode 100644 src/assets/svg/Schedule/TitleBox.svg

diff --git a/src/assets/svg/Schedule/Box.svg b/src/assets/svg/Schedule/Box.svg
new file mode 100644
index 0000000..99946b2
--- /dev/null
+++ b/src/assets/svg/Schedule/Box.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="1860" height="902" viewBox="0 0 1860 902"><defs><clipPath id="master_svg0_555_17895"><rect x="0" y="0" width="1860" height="902" rx="0"/></clipPath><linearGradient x1="6.661338147750939e-16" y1="0.5" x2="1.017080545425415" y2="0.5000399947166443" id="master_svg1_555_29651"><stop offset="0%" stop-color="#5D49AF" stop-opacity="1"/><stop offset="100%" stop-color="#7E65E5" stop-opacity="0"/></linearGradient><linearGradient x1="6.661338147750939e-16" y1="0.5" x2="1.017080545425415" y2="0.5000399947166443" id="master_svg2_555_29651"><stop offset="0%" stop-color="#5D49AF" stop-opacity="1"/><stop offset="100%" stop-color="#7E65E5" stop-opacity="0"/></linearGradient><linearGradient x1="0" y1="127.716796875" x2="0" y2="127.716796875" gradientUnits="userSpaceOnUse" id="master_svg3_185_49104"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="0"/><stop offset="50%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/></linearGradient><linearGradient x1="1856.53125" y1="127.716796875" x2="1856.53125" y2="127.716796875" gradientUnits="userSpaceOnUse" id="master_svg4_185_49104"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="0"/><stop offset="50%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/></linearGradient><filter id="master_svg5_555_17898" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="1860" height="891"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="0" dx="0"/><feGaussianBlur stdDeviation="33"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0.49803921580314636 0 0 0 0 0.33725491166114807 0 0 0 0 0.8509804010391235 0 0 0 0.30000001192092896 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow"/></filter><filter id="master_svg6_555_17899" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="1860" height="891"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="0" dx="0"/><feGaussianBlur stdDeviation="25"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0.49803921580314636 0 0 0 0 0.33725491166114807 0 0 0 0 0.8509804010391235 0 0 0 0.5 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow"/></filter><linearGradient x1="0.012568394653499126" y1="0.2873583436012268" x2="0.9811341762542725" y2="1" id="master_svg7_201_02516"><stop offset="0%" stop-color="#8C64E2" stop-opacity="1"/><stop offset="10.360609740018845%" stop-color="#8C64E2" stop-opacity="0"/><stop offset="47.14285731315613%" stop-color="#8C64E2" stop-opacity="0"/><stop offset="73.57142567634583%" stop-color="#8C64E2" stop-opacity="0.699999988079071"/><stop offset="85.00000238418579%" stop-color="#8C64E2" stop-opacity="0.2199999988079071"/><stop offset="100%" stop-color="#8C64E2" stop-opacity="0"/></linearGradient></defs><g><g><g clip-path="url(#master_svg0_555_17895)"><g><path d="M1142.259521484375,0L1641.259521484375,0L1646.999521484375,4L1148.000001484375,4L1142.259521484375,0Z" fill="url(#master_svg1_555_29651)" fill-opacity="1"/></g><g><path d="M1650.979248046875,0L1839.178248046875,0L1845.699248046875,4L1657.499998046875,4L1650.979248046875,0Z" fill="url(#master_svg2_555_29651)" fill-opacity="1"/></g><g><path d="M1724.512939453125,896L1759.268239453125,896L1759.268239453125,898L1724.512939453125,898L1724.512939453125,896ZM1766.219339453125,896L1787.072539453125,896L1787.072539453125,898L1766.219339453125,898L1766.219339453125,896ZM1811.401339453125,896L1794.023639453125,896L1794.023639453125,898L1811.401339453125,898L1811.401339453125,896Z" fill-rule="evenodd" fill="#8C64E2" fill-opacity="0.8392156958580017"/></g><g><path d="M17.3505859375,878.0508703125L17.3505859375,864.7470703125L34.7012859375,878.0508703125L17.3505859375,878.0508703125Z" fill="#8C64E2" fill-opacity="0.8392156958580017"/></g><g><path d="M1839.18028984375,878.0508703125L1839.18028984375,864.7470703125L1821.82958984375,878.0508703125L1839.18028984375,878.0508703125Z" fill="#8C64E2" fill-opacity="0.8392156958580017"/></g><g transform="matrix(0,1,-1,0,127.716796875,127.716796875)"><line x1="0" y1="127.216796875" x2="763.6400756835938" y2="127.216796875" stroke="url(#master_svg3_185_49104)" fill-opacity="0" fill="none" stroke-width="1"/></g><g transform="matrix(0,1,-1,0,1984.248046875,-1728.814453125)"><line x1="1856.53125" y1="127.216796875" x2="2620.1713256835938" y2="127.216796875" stroke="url(#master_svg4_185_49104)" fill-opacity="0" fill="none" stroke-width="1"/></g><g filter="url(#master_svg5_555_17898)"><g filter="url(#master_svg6_555_17899)"><path d="M4.41796875,0L1128.42796875,0L1141.49796875,9.99609L1864.41796875,9.996L1864.41796875,891L4.41796875,891L4.41796875,0Z" fill="#01152A" fill-opacity="0.4000000059604645"/><path d="M2.91796875,-1.5L2.91796875,892.5L1865.91796875,892.5L1865.91796875,8.496L1142.00796875,8.49609L1128.92796875,-1.5L2.91796875,-1.5ZM5.91796875,889.5L1862.91796875,889.5L1862.91796875,11.496L1140.98796875,11.4961L1127.91796875,1.5L5.91796875,1.5L5.91796875,889.5Z" fill-rule="evenodd" fill="url(#master_svg7_201_02516)" fill-opacity="1"/></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/Schedule/TitleBox.svg b/src/assets/svg/Schedule/TitleBox.svg
new file mode 100644
index 0000000..a8402c6
--- /dev/null
+++ b/src/assets/svg/Schedule/TitleBox.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="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>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 5042d84..be8987b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@ const routes = [
   {
     path: '/',
     name: 'home',
-    redirect: '/operation',
+    redirect: '/scheduling',
   },
   {
     path: '/monitor',
@@ -18,7 +18,7 @@ const routes = [
   {
     path: '/scheduling',
     name: 'scheduling',
-    meta: { title: '护理人员排班' },
+    meta: { title: '运营监控数据可视化' },
     component: () => import('@/views/pageScheduling/index.vue'),
   },
   {
diff --git a/src/views/pageOperation/leftTop/index.vue b/src/views/pageOperation/leftTop/index.vue
index 83bc5b3..255e2b3 100644
--- a/src/views/pageOperation/leftTop/index.vue
+++ b/src/views/pageOperation/leftTop/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="h-[48.79vh] bgLeftTopBox p-[1.85vh]">
-    <div class="w-[26.85vh] h-[26.85vh] mx-auto m-[2vh]" ref="echartsContainer"></div>
-    <div class="w-[45.18vh] h-[14.81vh] bgTopLeftItemBox  mx-auto mt-[3.7vh] 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" />
diff --git a/src/views/pageOperation/rightMid/index.vue b/src/views/pageOperation/rightMid/index.vue
index 161c092..87f9853 100644
--- a/src/views/pageOperation/rightMid/index.vue
+++ b/src/views/pageOperation/rightMid/index.vue
@@ -38,10 +38,16 @@
 </template>
 
 <script>
-export default {};
+import { Carousel, CarouselItem } from 'element-ui';
+export default {
+  components: {
+    'el-carousel': Carousel,
+    'el-carousel-item': CarouselItem,
+  },
+};
 </script>
 
-<style>
+<style lang="scss" scoped>
 .bgRightMidBox {
   background-image: url('@/assets/svg/Operation/RightMid/Box.svg');
   background-size: contain;
@@ -53,4 +59,11 @@ export default {};
   box-sizing: border-box;
   border: 1px solid rgba(87, 151, 181, 0.4);
 }
+:deep(.el-carousel) {
+  height: 100%;
+  .el-carousel__item,
+  .el-carousel__container {
+    height: 100%;
+  }
+}
 </style>
diff --git a/src/views/pageScheduling/index.vue b/src/views/pageScheduling/index.vue
index e904c17..9f3ec41 100644
--- a/src/views/pageScheduling/index.vue
+++ b/src/views/pageScheduling/index.vue
@@ -1,9 +1,75 @@
 <template>
-  <div></div>
+  <div class="w-[172.22vh] h-[83.51vh] bgBox mx-auto relative">
+    <div class="absolute w-[38.51vh] h-[3.7vh] bgTitleBox top-[-1.9vh] left-[3.6vh]">
+      <div class="w-[29.62vh] h-[2.5vh] mx-auto mt-[0.64vh] flex justify-between items-center leading-none">
+        <div class="h-[0.64vh]">
+          <img class="h-full" src="@/assets/svg/Monitor/Triangle.svg" />
+        </div>
+        <span class="panmen text-[1.66vh]">白班</span>
+        <p class="panmen text-[1.66vh]">手术间: 178</p>
+        <p class="panmen text-[1.66vh]">护理人员: 135</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">
+      <el-carousel direction="vertical" :autoplay="false" :interval="5000" indicatorPosition="none">
+        <el-carousel-item v-for="item in 1" :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">
+                <div class="inline-block w-[9.07vh] h-[1.66vh] leading-none">
+                  <span class="panmen text-[#8C5AFA] text-[1.48vh]">R-{{ String(index + 1).padStart(3, '0') }}</span>
+                </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]">陈宇、孙晨、邓一帆</span>
+                </div>
+              </div>
+            </template>
+          </section>
+        </el-carousel-item>
+      </el-carousel>
+    </section>
+  </div>
 </template>
 
 <script>
-export default {};
+import { Carousel, CarouselItem } from 'element-ui';
+export default {
+  components: {
+    'el-carousel': Carousel,
+    'el-carousel-item': CarouselItem,
+  },
+};
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.bgBox {
+  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>