From a1114626d64b9075d21fdcf1f2d2d5b5be4bb766 Mon Sep 17 00:00:00 2001
From: "@0Melon0" <576788380@qq.com>
Date: Thu, 29 Feb 2024 20:38:32 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E9=A6=96=E5=8F=B0=E7=8E=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svg/Operation/LeftBottom/Box.svg   |   1 +
 src/assets/svg/Operation/LeftTop/Box.svg      |   1 +
 src/assets/svg/Operation/LeftTop/ItemBox.svg  |   1 +
 .../svg/Operation/LeftTop/PointBlue.svg       |   1 +
 src/assets/svg/Operation/RightMid/Box.svg     |   1 +
 src/router/index.js                           |   2 +-
 src/views/pageMonitor/topLeft/index.vue       |   2 +-
 src/views/pageOperation/index.vue             |  19 ++-
 src/views/pageOperation/leftBottom/index.vue  |  88 ++++++++++
 src/views/pageOperation/leftTop/index.vue     | 155 ++++++++++++++++++
 src/views/pageOperation/rightMid/index.vue    |  37 +++++
 11 files changed, 304 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/svg/Operation/LeftBottom/Box.svg
 create mode 100644 src/assets/svg/Operation/LeftTop/Box.svg
 create mode 100644 src/assets/svg/Operation/LeftTop/ItemBox.svg
 create mode 100644 src/assets/svg/Operation/LeftTop/PointBlue.svg
 create mode 100644 src/assets/svg/Operation/RightMid/Box.svg
 create mode 100644 src/views/pageOperation/leftBottom/index.vue
 create mode 100644 src/views/pageOperation/leftTop/index.vue
 create mode 100644 src/views/pageOperation/rightMid/index.vue

diff --git a/src/assets/svg/Operation/LeftBottom/Box.svg b/src/assets/svg/Operation/LeftBottom/Box.svg
new file mode 100644
index 0000000..1203006
--- /dev/null
+++ b/src/assets/svg/Operation/LeftBottom/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="557.455078125" height="352" viewBox="0 0 557.455078125 352"><defs><filter id="master_svg0_555_20910" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="554" height="349"><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_svg1_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><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="6.661338147750939e-16" y1="0.5" x2="1.017080545425415" y2="0.5000399947166443" id="master_svg3_555_29651"><stop offset="0%" stop-color="#5D49AF" stop-opacity="1"/><stop offset="100%" stop-color="#7E65E5" stop-opacity="0"/></linearGradient></defs><g><g filter="url(#master_svg0_555_20910)"><path d="M1.5,350.5L555.5,350.5L555.5,11.5L241.5,11.5L233.5,1.5L1.5,1.5L1.5,350.5Z" fill="#01152A" fill-opacity="0.4000000059604645"/><path d="M242.221,10L557,10L557,352L0,352L0,0L234.221,0L242.221,10ZM232.779,3L240.329,12.437L240.779,13L554,13L554,349L3,349L3,3L232.779,3Z" fill-rule="evenodd" fill="url(#master_svg1_201_02516)" fill-opacity="1"/></g><g><g><path d="M242.5,0.5L457.485,0.5L460.586,4.33186L245.60075,4.33186L242.5,0.5Z" fill="url(#master_svg2_555_29651)" fill-opacity="1"/></g><g><path d="M466.5,0.5L554.3545,0.5L557.4552,4.33186L469.60075,4.33186L466.5,0.5Z" fill="url(#master_svg3_555_29651)" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/Operation/LeftTop/Box.svg b/src/assets/svg/Operation/LeftTop/Box.svg
new file mode 100644
index 0000000..af017c7
--- /dev/null
+++ b/src/assets/svg/Operation/LeftTop/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="557.455078125" height="530" viewBox="0 0 557.455078125 530"><defs><filter id="master_svg0_555_21768" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="554" height="527"><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_svg1_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><linearGradient x1="1.5" y1="62.5009765625" x2="1.5" y2="62.5009765625" gradientUnits="userSpaceOnUse" id="master_svg2_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="6.661338147750939e-16" y1="0.5" x2="1.017080545425415" y2="0.5000399947166443" id="master_svg3_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_svg4_555_29651"><stop offset="0%" stop-color="#5D49AF" stop-opacity="1"/><stop offset="100%" stop-color="#7E65E5" stop-opacity="0"/></linearGradient></defs><g><g filter="url(#master_svg0_555_21768)"><path d="M1.5,528.5L555.5,528.5L555.5,11.5L241.5,11.5L233.5,1.5L1.5,1.5L1.5,528.5Z" fill="#01152A" fill-opacity="0.4000000059604645"/><path d="M242.221,10L557,10L557,530L0,530L0,0L234.221,0L242.221,10ZM232.779,3L240.329,12.437L240.779,13L554,13L554,527L3,527L3,3L232.779,3Z" fill-rule="evenodd" fill="url(#master_svg1_201_02516)" fill-opacity="1"/></g><g transform="matrix(0,1,-1,0,64.0009765625,61.0009765625)"><line x1="1.5" y1="62.0009765625" x2="368.0810852050781" y2="62.0009765625" stroke="url(#master_svg2_185_49104)" fill-opacity="0" fill="none" stroke-width="1"/></g><g><g><path d="M242.5,1.5L457.485,1.5L460.586,5.33186L245.60075,5.33186L242.5,1.5Z" fill="url(#master_svg3_555_29651)" fill-opacity="1"/></g><g><path d="M466.5,1.5L554.3545,1.5L557.4552,5.33186L469.60075,5.33186L466.5,1.5Z" fill="url(#master_svg4_555_29651)" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/Operation/LeftTop/ItemBox.svg b/src/assets/svg/Operation/LeftTop/ItemBox.svg
new file mode 100644
index 0000000..c28d2a9
--- /dev/null
+++ b/src/assets/svg/Operation/LeftTop/ItemBox.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="490" height="162" viewBox="0 0 490 162"><g><g><g transform="matrix(-1,0,0,1,978,0)"><path d="M552.8462,0.5L546.9233,6.41614L541.2931,12.0398L497.79805,12.0398L488.5,23.907L488.5,161.5L969.672,161.5L977.5,153.681L977.5,0.5L552.8462,0.5ZM541.7069,13.0398L547.63,7.12366L553.26,1.5L976.5,1.5L976.5,153.267L969.258,160.5L489.5,160.5L489.5,24.2521L498.28493,13.0398L541.7069,13.0398Z" fill-rule="evenodd" fill="#2D126F" fill-opacity="1"/></g><g><g><path d="M434,1C434,1,439,1,439,1C439,1,446,8.15967,446,8.15967C446,8.15967,441,8.15967,441,8.15967C441,8.15967,434,1,434,1Z" fill="#5D49AF" fill-opacity="1"/></g><g><path d="M443,1C443,1,448,1,448,1C448,1,455,8.15967,455,8.15967C455,8.15967,450,8.15967,450,8.15967C450,8.15967,443,1,443,1Z" fill="#5D49AF" fill-opacity="1"/></g><g><path d="M461,1C461,1,466,1,466,1C466,1,473,8.15967,473,8.15967C473,8.15967,468,8.15967,468,8.15967C468,8.15967,461,1,461,1Z" fill="#5D49AF" fill-opacity="1"/></g><g><path d="M452,1C452,1,457,1,457,1C457,1,464,8.15967,464,8.15967C464,8.15967,459,8.15967,459,8.15967" fill="#5D49AF" fill-opacity="1"/></g></g><g><g transform="matrix(-1,0,0,-1,978,322)"><path d="M490,162L501,162L501,160L488,160L488,173L490,173L490,162Z" fill-rule="evenodd" fill="#5D49AF" fill-opacity="1"/></g><g><path d="M2,2L13,2L13,0L0,0L0,13L2,13L2,2Z" fill-rule="evenodd" fill="#5D49AF" fill-opacity="1"/></g><g><path d="M8.08579,162L16.5,162L16.5,160L8.91421,160L2,153.08579L2,145L0,145L0,153.91421L8.08579,162Z" fill-rule="evenodd" fill="#5D49AF" fill-opacity="1"/></g></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/Operation/LeftTop/PointBlue.svg b/src/assets/svg/Operation/LeftTop/PointBlue.svg
new file mode 100644
index 0000000..effb073
--- /dev/null
+++ b/src/assets/svg/Operation/LeftTop/PointBlue.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="17" height="20.5" viewBox="0 0 17 20.5"><defs><filter id="master_svg0_555_21695" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-4" y="-4" width="18" height="18"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur"/></filter><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_555_27682"><stop offset="1.4285714365541935%" stop-color="#BEA4FF" stop-opacity="0.6000000238418579"/><stop offset="100%" stop-color="#D4C3FF" stop-opacity="0"/></linearGradient><filter id="master_svg2_555_21694" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-8" y="-4" width="21" height="21"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4" dx="0"/><feGaussianBlur stdDeviation="2"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs><g><g filter="url(#master_svg0_555_21695)"><ellipse cx="8.5" cy="8" rx="5" ry="5" fill="url(#master_svg1_555_27682)" fill-opacity="1"/></g><g filter="url(#master_svg2_555_21694)"><ellipse cx="8.5" cy="8" rx="2.5" ry="2.5" fill="#733FF3" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/Operation/RightMid/Box.svg b/src/assets/svg/Operation/RightMid/Box.svg
new file mode 100644
index 0000000..79d2343
--- /dev/null
+++ b/src/assets/svg/Operation/RightMid/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="1263" height="902" viewBox="0 0 1263 902"><defs><clipPath id="master_svg0_555_20913"><rect x="0" y="0" width="1263" 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="1260.64453125" y1="127.716796875" x2="1260.64453125" 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_21666" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="1263" 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_21667" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="1263" 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 clip-path="url(#master_svg0_555_20913)"><g><path d="M539.60205078125,0L1029.7210507812501,0L1033.61905078125,4L543.50000078125,4L539.60205078125,0Z" fill="url(#master_svg1_555_29651)" fill-opacity="1"/></g><g><path d="M1048.572265625,0L1248.861265625,0L1253.289265625,4L1052.999995625,4L1048.572265625,0Z" fill="url(#master_svg2_555_29651)" fill-opacity="1"/></g><g><path d="M1171,896L1194.6,896L1194.6,898L1171,898L1171,896ZM1199.32,896L1213.48,896L1213.48,898L1199.32,898L1199.32,896ZM1230,896L1218.2,896L1218.2,898L1230,898L1230,896Z" fill-rule="evenodd" fill="#8C64E2" fill-opacity="0.8392156958580017"/></g><g><path d="M11.78173828125,878.0508703125L11.78173828125,864.7470703125L23.56343828125,878.0508703125L11.78173828125,878.0508703125Z" fill="#8C64E2" fill-opacity="0.8392156958580017"/></g><g><path d="M1248.8627546875,878.0508703125L1248.8627546875,864.7470703125L1237.0810546875,878.0508703125L1248.8627546875,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,1388.361328125,-1132.927734375)"><line x1="1260.64453125" y1="127.216796875" x2="2024.2846069335938" y2="127.216796875" stroke="url(#master_svg4_185_49104)" fill-opacity="0" fill="none" stroke-width="1"/></g><g filter="url(#master_svg5_555_21666)"><g filter="url(#master_svg6_555_21667)"><path d="M3,0L530.821,0L539.7,9.996L1266,9.996L1266,891L3,891L3,0Z" fill="#01152A" fill-opacity="0.4000000059604645"/><path d="M1.5,-1.5L1.5,892.5L1267.5,892.5L1267.5,8.496L540.374,8.496L531.495,-1.5L1.5,-1.5ZM4.5,889.5L1264.5,889.5L1264.5,11.496L539.026,11.496L530.147,1.5L4.5,1.5L4.5,889.5Z" fill-rule="evenodd" fill="url(#master_svg7_201_02516)" fill-opacity="1"/></g></g></g></g></svg>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 876de2c..913f1fa 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@ const routes = [
   {
     path: '/',
     name: 'home',
-    redirect: '/monitor',
+    redirect: '/operation',
   },
   {
     path: '/monitor',
diff --git a/src/views/pageMonitor/topLeft/index.vue b/src/views/pageMonitor/topLeft/index.vue
index 6c0f1c2..3cd0093 100644
--- a/src/views/pageMonitor/topLeft/index.vue
+++ b/src/views/pageMonitor/topLeft/index.vue
@@ -40,7 +40,7 @@
 
 <script>
 export default {
-  data: function () {
+  data() {
     return {
       overviewData: [
         {
diff --git a/src/views/pageOperation/index.vue b/src/views/pageOperation/index.vue
index e904c17..e2299a4 100644
--- a/src/views/pageOperation/index.vue
+++ b/src/views/pageOperation/index.vue
@@ -1,9 +1,24 @@
 <template>
-  <div></div>
+  <div class="w-[171.38vh] flex justify-between mx-auto">
+    <div class="w-[51.48vh]">
+      <leftTop></leftTop>
+      <leftBottom></leftBottom>
+    </div>
+    <rightMid></rightMid>
+  </div>
 </template>
 
 <script>
-export default {};
+import leftTop from './leftTop/index.vue';
+import leftBottom from './leftBottom/index.vue';
+import rightMid from './rightMid/index.vue';
+export default {
+  components: {
+    leftTop,
+    leftBottom,
+    rightMid,
+  },
+};
 </script>
 
 <style></style>
diff --git a/src/views/pageOperation/leftBottom/index.vue b/src/views/pageOperation/leftBottom/index.vue
new file mode 100644
index 0000000..25f24ee
--- /dev/null
+++ b/src/views/pageOperation/leftBottom/index.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="h-[32.4vh] mt-[2.77vh] bgLeftBottomBox pt-[3.24vh]">
+    <div class="w-[43.79vh] h-[26.85vh] mx-auto" ref="echartsContainer"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  data() {
+    return {
+      chartOptions: {
+        grid: {
+          top: '13%',
+          left: '13%',
+          right: '10%',
+          bottom: '13%',
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['3月', '4月', '5月', '6月', '7月', '8月'],
+          axisLabel: {
+            color: '#fff',
+            fontFamily: 'DIN-Bold,Microsoft YaHei',
+          },
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            formatter: '{value}%',
+            color: '#fff',
+            fontFamily: 'DIN-Bold,Microsoft YaHei',
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(0,142,114,0.3)',
+              width: 0.5,
+            },
+          },
+        },
+        series: [
+          {
+            data: [95, 97, 96, 98, 99, 96],
+            type: 'line',
+            itemStyle: {
+              color: '#30FDFF',
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(0, 128, 255, 0.7)', // 开始颜色
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(200, 254, 255, 0)', // 结束颜色
+                  },
+                ],
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    const chartContainer = this.$refs.echartsContainer;
+    const chart = echarts.init(chartContainer);
+    chart.setOption(this.chartOptions);
+  },
+};
+</script>
+
+<style>
+.bgLeftBottomBox {
+  background-image: url('@/assets/svg/Operation/LeftBottom/Box.svg');
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+</style>
diff --git a/src/views/pageOperation/leftTop/index.vue b/src/views/pageOperation/leftTop/index.vue
new file mode 100644
index 0000000..83bc5b3
--- /dev/null
+++ b/src/views/pageOperation/leftTop/index.vue
@@ -0,0 +1,155 @@
+<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">
+      <section>
+        <div class="flex">
+          <img src="@/assets/svg/Monitor/TopLeft/TrianglePurple.svg" />
+          <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">350</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="flex items-end">
+              <img src="@/assets/svg/Operation/LeftTop/PointBlue.svg" />
+              <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-[1.11vh] opacity-65 ml-[0.74vh]">人</span>
+            </div>
+          </div>
+        </template>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  data() {
+    return {
+      chartOptions: {
+        series: [
+          {
+            type: 'gauge',
+            startAngle: 90,
+            endAngle: -270,
+            pointer: {
+              show: false,
+            },
+            max: 100,
+            radius: '100%',
+            center: ['50%', '50%'],
+            progress: {
+              show: true,
+              overlap: false,
+              roundCap: true,
+              clip: false,
+              itemStyle: {
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: '#9C85FA',
+                    },
+                    {
+                      offset: 1,
+                      color: '#5531E7',
+                    },
+                  ],
+                  global: false,
+                },
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: [[1, '#4F518C']],
+                opacity: 0.7,
+                width: 30,
+              },
+            },
+            splitLine: {
+              show: false,
+              distance: 0,
+              length: 10,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+              distance: 50,
+            },
+            data: [
+              {
+                value: 86,
+                name: '首台准点率',
+                title: {
+                  offsetCenter: ['0%', '20%'],
+                  fontSize: 22,
+                  fontFamily: 'Microsoft YaHei',
+                  color: '#fff',
+                  overflow: 'break',
+                  lineHeight: 20,
+                },
+                detail: {
+                  valueAnimation: true,
+                  offsetCenter: ['0%', '-15%'],
+                  fontSize: 40,
+                  fontFamily: 'DIN-Bold,Microsoft YaHei',
+                  color: '#03FFFF',
+                  formatter: `{value}%`,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      peopleData: [
+        {
+          itemName: '进行中',
+          itemVal: '50',
+        },
+        {
+          itemName: '待进行',
+          itemVal: '300',
+        },
+      ],
+    };
+  },
+  mounted() {
+    const chartContainer = this.$refs.echartsContainer;
+    const chart = echarts.init(chartContainer);
+    chart.setOption(this.chartOptions);
+  },
+};
+</script>
+
+<style>
+.bgLeftTopBox {
+  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-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%);
+  border: 1.5px solid;
+  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/rightMid/index.vue b/src/views/pageOperation/rightMid/index.vue
new file mode 100644
index 0000000..4c223af
--- /dev/null
+++ b/src/views/pageOperation/rightMid/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="w-[116.94vh] h-[85.51vh] bgRightMidBox">
+    <div class="w-[112.96vh] h-[77.03vh] mx-auto mt-[2.96vh] border border-teal-400">
+      <div class="h-[4.44vh] leading-[4.44vh] text-center">
+        <div class="inline-block">
+          <div class="inline-block w-[11.11vh] text-[#AAAAAA] text-[1.48vh]">手术间</div>
+          <div class="inline-block w-[18.51vh] text-[#AAAAAA] text-[1.48vh]">手术名称</div>
+          <div class="inline-block w-[11.11vh] text-[#AAAAAA] text-[1.48vh]">申请类型</div>
+          <div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">入手术室时间</div>
+          <div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">麻醉开始时间</div>
+          <div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">手术开始时间</div>
+          <div class="inline-block w-[11.11vh] text-[#AAAAAA] text-[1.48vh]">是否准点</div>
+        </div>
+      </div>
+      <div class="h-[72.58vh] border border-red-400">
+        <el-carousel direction="vertical" :autoplay="false" :interval="5000" indicatorPosition="none">
+          <el-carousel-item v-for="item in 1" :key="item">
+            <section></section>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.bgRightMidBox {
+  background-image: url('@/assets/svg/Operation/RightMid/Box.svg');
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+</style>