From c6f45e9a27b6a977c4efceeea276045d2b2ab863 Mon Sep 17 00:00:00 2001
From: weiyin <yin.wei@le9health.com>
Date: Tue, 27 Aug 2024 11:07:05 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=BF=90=E8=90=A5=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E6=89=8B=E6=9C=AF=E9=97=B4=E7=8A=B6=E6=80=81icon=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svg/Monitor/TopRight/anesStart.svg |   1 +
 src/assets/svg/Monitor/TopRight/opEnd.svg     |   1 +
 src/assets/svg/Monitor/TopRight/opIndoor.svg  |   1 +
 src/assets/svg/Monitor/TopRight/opRoom.svg    |   1 +
 src/assets/svg/Monitor/TopRight/opStart.svg   |   1 +
 src/assets/svg/Monitor/TopRight/prePlan.svg   |   1 +
 src/views/pageMonitor/topRight/index.vue      | 146 +++++++++++++++---
 7 files changed, 129 insertions(+), 23 deletions(-)
 create mode 100644 src/assets/svg/Monitor/TopRight/anesStart.svg
 create mode 100644 src/assets/svg/Monitor/TopRight/opEnd.svg
 create mode 100644 src/assets/svg/Monitor/TopRight/opIndoor.svg
 create mode 100644 src/assets/svg/Monitor/TopRight/opRoom.svg
 create mode 100644 src/assets/svg/Monitor/TopRight/opStart.svg
 create mode 100644 src/assets/svg/Monitor/TopRight/prePlan.svg

diff --git a/src/assets/svg/Monitor/TopRight/anesStart.svg b/src/assets/svg/Monitor/TopRight/anesStart.svg
new file mode 100644
index 0000000..e0e5bc1
--- /dev/null
+++ b/src/assets/svg/Monitor/TopRight/anesStart.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="26" height="30" viewBox="0 0 26 30"><defs><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg0_674_20532"><stop offset="0%" stop-color="#C2E8FF" stop-opacity="0"/><stop offset="79.16666865348816%" stop-color="#000AB8" stop-opacity="0.30000001192092896"/><stop offset="99.28571581840515%" stop-color="#2F3AFF" stop-opacity="0.699999988079071"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_674_20968"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="54.6875%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="100%" stop-color="#232FFF" stop-opacity="0.5"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg2_674_18972"><stop offset="0%" stop-color="#2531FF" stop-opacity="0.699999988079071"/><stop offset="100%" stop-color="#0900B3" stop-opacity="0"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg3_674_19688"><stop offset="0%" stop-color="#B6BAFF" stop-opacity="0"/><stop offset="100%" stop-color="#2733FF" stop-opacity="1"/></linearGradient><filter id="master_svg4_674_24510" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-4" y="-2" width="18" height="18"><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="2" dx="0"/><feGaussianBlur stdDeviation="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.30000001192092896 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg5_674_21158"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CDE9FF" stop-opacity="1"/><stop offset="100%" stop-color="#111EFF" stop-opacity="1"/></linearGradient></defs><g><g><g><path d="M13,0C13,0,26,7.5,26,7.5C26,7.5,26,22.5,26,22.5C26,22.5,13,30,13,30C13,30,0,22.5,0,22.5C0,22.5,0,7.5,0,7.5C0,7.5,13,0,13,0C13,0,13,0,13,0Z" fill="url(#master_svg0_674_20532)" fill-opacity="1"/><path d="M26,22.5L26,7.5L13,0L0,7.5L0,22.5L13,30L26,22.5ZM1,8.07756L13,1.15449L25,8.07756L25,21.9224L13,28.8455L1,21.9224L1,8.07756Z" fill-rule="evenodd" fill="url(#master_svg1_674_20968)" fill-opacity="1"/></g><g><path d="M13.000024945144654,3.888885736465454C13.000024945144654,3.888885736465454,22.629694945144653,9.444465736465453,22.629694945144653,9.444465736465453C22.629694945144653,9.444465736465453,22.629694945144653,20.555585736465453,22.629694945144653,20.555585736465453C22.629694945144653,20.555585736465453,13.000024945144654,26.111085736465455,13.000024945144654,26.111085736465455C13.000024945144654,26.111085736465455,3.3703949451446533,20.555585736465453,3.3703949451446533,20.555585736465453C3.3703949451446533,20.555585736465453,3.3703949451446533,9.444465736465453,3.3703949451446533,9.444465736465453C3.3703949451446533,9.444465736465453,13.000024945144654,3.888885736465454,13.000024945144654,3.888885736465454Z" fill="url(#master_svg2_674_18972)" fill-opacity="1"/><path d="M22.629694945144653,20.555585736465453L22.629694945144653,9.444465736465453L13.000024945144654,3.888885736465454L3.3703949451446533,9.444465736465453L3.3703949451446533,20.555585736465453L13.000024945144654,26.111085736465455L22.629694945144653,20.555585736465453ZM4.370394945144653,10.022025736465455L13.000024945144654,5.043375736465454L21.629694945144653,10.022025736465455L21.629694945144653,19.977985736465453L13.000024945144654,24.956585736465453L4.370394945144653,19.977985736465453L4.370394945144653,10.022025736465455Z" fill-rule="evenodd" fill="url(#master_svg3_674_19688)" fill-opacity="1"/></g></g><g filter="url(#master_svg4_674_24510)"><g><path d="M18,15C18,12.24242,15.75758,10,13,10C10.24242,10,8,12.24242,8,15C8,17.75758,10.24242,20,13,20C15.75758,20,18,17.75758,18,15ZM15.32164,14.46903C15.54197,14.596589999999999,15.65579,14.84839,15.62237,15.0886C15.65579,15.32881,15.54197,15.58061,15.32164,15.708169999999999L12.397400000000001,17.52635C12.10952,17.69302,11.73073,17.58696,11.564070000000001,17.29908C11.49379,17.1777,11.472010000000001,17.04016,11.49189,16.90917C11.48726,16.87914,11.48486,16.848399999999998,11.48486,16.81713L11.48486,13.180769999999999L11.48487,13.178C11.48441,13.07538,11.50976,12.97192,11.564070000000001,12.87812C11.73073,12.57509,12.10952,12.48418,12.397400000000001,12.65085L15.32164,14.46903ZM12.69698,14.27455L14.00625,15.0886L12.69698,15.902650000000001L12.69698,14.27455Z" fill-rule="evenodd" fill="url(#master_svg5_674_21158)" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/Monitor/TopRight/opEnd.svg b/src/assets/svg/Monitor/TopRight/opEnd.svg
new file mode 100644
index 0000000..19e78ef
--- /dev/null
+++ b/src/assets/svg/Monitor/TopRight/opEnd.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="26" height="30" viewBox="0 0 26 30"><defs><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg0_674_23712"><stop offset="0%" stop-color="#C2E8FF" stop-opacity="0"/><stop offset="79.16666865348816%" stop-color="#BAE7A4" stop-opacity="0.30000001192092896"/><stop offset="100%" stop-color="#C6F7AE" stop-opacity="0.699999988079071"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_674_24122"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="54.6875%" stop-color="#BAE7A4" stop-opacity="0"/><stop offset="100%" stop-color="#C9FFAF" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg2_674_22968"><stop offset="0%" stop-color="#C8FFAD" stop-opacity="0.699999988079071"/><stop offset="100%" stop-color="#D2FFBC" stop-opacity="0"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg3_674_23152"><stop offset="0%" stop-color="#BAE7A4" stop-opacity="0"/><stop offset="100%" stop-color="#C6F6AF" stop-opacity="1"/></linearGradient><filter id="master_svg4_674_24431" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-4" y="-2" width="16" height="17.5"><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="2" dx="0"/><feGaussianBlur stdDeviation="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.30000001192092896 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg5_674_24152"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CDE9FF" stop-opacity="1"/><stop offset="100%" stop-color="#BAE7A4" stop-opacity="1"/></linearGradient></defs><g><g><g><path d="M13,0C13,0,26,7.5,26,7.5C26,7.5,26,22.5,26,22.5C26,22.5,13,30,13,30C13,30,0,22.5,0,22.5C0,22.5,0,7.5,0,7.5C0,7.5,13,0,13,0C13,0,13,0,13,0Z" fill="url(#master_svg0_674_23712)" fill-opacity="1"/><path d="M26,22.5L26,7.5L13,0L0,7.5L0,22.5L13,30L26,22.5ZM1,8.07756L13,1.15449L25,8.07756L25,21.9224L13,28.8455L1,21.9224L1,8.07756Z" fill-rule="evenodd" fill="url(#master_svg1_674_24122)" fill-opacity="1"/></g><g><path d="M13.000024945144654,3.888885736465454C13.000024945144654,3.888885736465454,22.629694945144653,9.444465736465453,22.629694945144653,9.444465736465453C22.629694945144653,9.444465736465453,22.629694945144653,20.555585736465453,22.629694945144653,20.555585736465453C22.629694945144653,20.555585736465453,13.000024945144654,26.111085736465455,13.000024945144654,26.111085736465455C13.000024945144654,26.111085736465455,3.3703949451446533,20.555585736465453,3.3703949451446533,20.555585736465453C3.3703949451446533,20.555585736465453,3.3703949451446533,9.444465736465453,3.3703949451446533,9.444465736465453C3.3703949451446533,9.444465736465453,13.000024945144654,3.888885736465454,13.000024945144654,3.888885736465454Z" fill="url(#master_svg2_674_22968)" fill-opacity="1"/><path d="M22.629694945144653,20.555585736465453L22.629694945144653,9.444465736465453L13.000024945144654,3.888885736465454L3.3703949451446533,9.444465736465453L3.3703949451446533,20.555585736465453L13.000024945144654,26.111085736465455L22.629694945144653,20.555585736465453ZM4.370394945144653,10.022025736465455L13.000024945144654,5.043375736465454L21.629694945144653,10.022025736465455L21.629694945144653,19.977985736465453L13.000024945144654,24.956585736465453L4.370394945144653,19.977985736465453L4.370394945144653,10.022025736465455Z" fill-rule="evenodd" fill="url(#master_svg3_674_23152)" fill-opacity="1"/></g></g><g filter="url(#master_svg4_674_24431)"><path d="M10.5,10.421053Q10.5,10.379583,10.50809,10.338909Q10.51618,10.298236,10.53205,10.259923Q10.54792,10.221609,10.57096,10.187128Q10.594,10.152647,10.62332,10.123323Q10.65265,10.0939997,10.68713,10.0709602Q10.72161,10.0479206,10.75992,10.0320507Q10.79824,10.0161808,10.83891,10.00809041Q10.87958,10,10.92105,10L14.978950000000001,10Q15.02042,10,15.06109,10.00809041Q15.101759999999999,10.0161808,15.140080000000001,10.0320507Q15.17839,10.0479206,15.212869999999999,10.0709602Q15.24735,10.0939997,15.276679999999999,10.123323Q15.306000000000001,10.152647,15.329039999999999,10.187128Q15.35208,10.221609,15.36795,10.259923Q15.38382,10.298236,15.39191,10.338909Q15.4,10.379583,15.4,10.421053Q15.4,10.462523000000001,15.39191,10.503195999999999Q15.38382,10.543869,15.36795,10.582183Q15.35208,10.620496,15.329039999999999,10.654977Q15.306000000000001,10.689458,15.276679999999999,10.718782000000001Q15.24735,10.748106,15.212869999999999,10.771145Q15.17839,10.794185,15.140080000000001,10.810055Q15.101759999999999,10.825924,15.06109,10.834015Q15.02042,10.842105,14.978950000000001,10.842105L13.5,10.842105L13.5,11.531369999999999Q13.67939,11.55397,13.856010000000001,11.59267Q14.03262,11.63136,14.20503,11.68583Q14.37744,11.7403,14.544229999999999,11.8101Q14.711020000000001,11.8799,14.87083,11.96447Q15.03064,12.04903,15.18217,12.14767Q15.3337,12.24631,15.475719999999999,12.35821Q15.61773,12.47012,15.74907,12.594380000000001Q15.880410000000001,12.71864,16,12.85425Q16.11959,12.98985,16.22646,13.1357Q16.33333,13.28154,16.42661,13.43642Q16.51989,13.59131,16.59881,13.75399Q16.67773,13.91666,16.74166,14.08579Q16.80558,14.25492,16.85399,14.429120000000001Q16.90239,14.60333,16.93488,14.781189999999999Q16.96738,14.959050000000001,16.98369,15.13912Q17,15.319189999999999,17,15.5Q17,15.69651,16.98074,15.89207Q16.96148,16.08763,16.92314,16.28036Q16.8848,16.47309,16.827759999999998,16.66114Q16.77072,16.84918,16.695520000000002,17.03073Q16.62032,17.21228,16.52768,17.38559Q16.43505,17.558889999999998,16.325879999999998,17.722279999999998Q16.2167,17.88567,16.09204,18.037570000000002Q15.96738,18.18948,15.82843,18.32843Q15.68948,18.46738,15.537569999999999,18.59204Q15.385670000000001,18.7167,15.22228,18.825879999999998Q15.05889,18.93505,14.88559,19.02768Q14.71228,19.12032,14.53073,19.195520000000002Q14.34918,19.27072,14.16114,19.327759999999998Q13.97309,19.3848,13.78036,19.42314Q13.58763,19.46148,13.39207,19.48074Q13.19651,19.5,13,19.5Q12.80349,19.5,12.60793,19.48074Q12.41237,19.46148,12.21964,19.42314Q12.02691,19.3848,11.83886,19.327759999999998Q11.65082,19.27072,11.46927,19.195520000000002Q11.28772,19.12032,11.11441,19.02768Q10.94111,18.93505,10.77772,18.825879999999998Q10.61433,18.7167,10.46243,18.59204Q10.31052,18.46738,10.17157,18.32843Q10.03262,18.18948,9.907958,18.037570000000002Q9.783295,17.88567,9.674121,17.722279999999998Q9.564948,17.558889999999998,9.472315,17.38559Q9.379682,17.21228,9.304482,17.03073Q9.229282,16.84918,9.172239,16.66114Q9.115196,16.47309,9.0768589,16.28036Q9.0385222,16.08763,9.0192611,15.89207Q9,15.69651,9,15.5Q9,15.319189999999999,9.0163122,15.13912Q9.0326244,14.959050000000001,9.0651157,14.781189999999999Q9.097607,14.60333,9.146012,14.429120000000001Q9.194418,14.25492,9.258343,14.08579Q9.322267,13.91666,9.40119,13.75399Q9.480113,13.59131,9.57339,13.43643Q9.666667,13.28154,9.773537,13.1357Q9.880408,12.98985,10,12.85425Q10.11959,12.71864,10.25093,12.594380000000001Q10.38227,12.47012,10.524280000000001,12.35821Q10.6663,12.24631,10.81783,12.14767Q10.96936,12.04903,11.12917,11.96447Q11.28898,11.8799,11.45577,11.8101Q11.62256,11.7403,11.79497,11.68583Q11.96738,11.63136,12.14399,11.59267Q12.32061,11.55397,12.5,11.531369999999999L12.5,10.842105L10.92105,10.842105Q10.87958,10.842105,10.83891,10.834015Q10.79824,10.825924,10.75992,10.810054000000001Q10.72161,10.794185,10.68713,10.771145Q10.65265,10.748106,10.62332,10.718782000000001Q10.594,10.689458,10.57096,10.654977Q10.54792,10.620496,10.53205,10.582183Q10.51618,10.543869,10.50809,10.503195999999999Q10.5,10.462523000000001,10.5,10.421053ZM11.91493,15.55178L14.10159,15.55178C14.31016,15.55178,14.5,15.376339999999999,14.5,15.15704C14.5,14.93827,14.31016,14.76248,14.10159,14.76248L11.91493,14.76248C11.71224,14.75634,11.5,14.93792,11.5,15.157219999999999C11.5,15.37651,11.70636,15.55195,11.91493,15.55195L11.91493,15.55178Z" fill-rule="evenodd" fill="url(#master_svg5_674_24152)" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/Monitor/TopRight/opIndoor.svg b/src/assets/svg/Monitor/TopRight/opIndoor.svg
new file mode 100644
index 0000000..26b8941
--- /dev/null
+++ b/src/assets/svg/Monitor/TopRight/opIndoor.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="26" height="30" viewBox="0 0 26 30"><defs><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg0_674_15105"><stop offset="0%" stop-color="#C2E8FF" stop-opacity="0"/><stop offset="79.16666865348816%" stop-color="#005AC8" stop-opacity="0.30000001192092896"/><stop offset="100%" stop-color="#2C8BFF" stop-opacity="0.699999988079071"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_674_15691"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="55.714285373687744%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="100%" stop-color="#0A79FF" stop-opacity="0.5"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg2_674_14463"><stop offset="0%" stop-color="#2B8BFF" stop-opacity="0.699999988079071"/><stop offset="100%" stop-color="#006EB3" stop-opacity="0"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg3_674_14503"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="100%" stop-color="#0073FF" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg4_674_15843"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CDE9FF" stop-opacity="1"/><stop offset="100%" stop-color="#117CFF" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg5_674_15843"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CDE9FF" stop-opacity="1"/><stop offset="100%" stop-color="#117CFF" stop-opacity="1"/></linearGradient></defs><g><g><g><path d="M13,0C13,0,26,7.5,26,7.5C26,7.5,26,22.5,26,22.5C26,22.5,13,30,13,30C13,30,0,22.5,0,22.5C0,22.5,0,7.5,0,7.5C0,7.5,13,0,13,0C13,0,13,0,13,0Z" fill="url(#master_svg0_674_15105)" fill-opacity="1"/><path d="M26,22.5L26,7.5L13,0L0,7.5L0,22.5L13,30L26,22.5ZM1,8.07756L13,1.15449L25,8.07756L25,21.9224L13,28.8455L1,21.9224L1,8.07756Z" fill-rule="evenodd" fill="url(#master_svg1_674_15691)" fill-opacity="1"/></g><g><path d="M13.000024945144654,3.888885736465454C13.000024945144654,3.888885736465454,22.629694945144653,9.444465736465453,22.629694945144653,9.444465736465453C22.629694945144653,9.444465736465453,22.629694945144653,20.555585736465453,22.629694945144653,20.555585736465453C22.629694945144653,20.555585736465453,13.000024945144654,26.111085736465455,13.000024945144654,26.111085736465455C13.000024945144654,26.111085736465455,3.3703949451446533,20.555585736465453,3.3703949451446533,20.555585736465453C3.3703949451446533,20.555585736465453,3.3703949451446533,9.444465736465453,3.3703949451446533,9.444465736465453C3.3703949451446533,9.444465736465453,13.000024945144654,3.888885736465454,13.000024945144654,3.888885736465454Z" fill="url(#master_svg2_674_14463)" fill-opacity="1"/><path d="M22.629694945144653,20.555585736465453L22.629694945144653,9.444465736465453L13.000024945144654,3.888885736465454L3.3703949451446533,9.444465736465453L3.3703949451446533,20.555585736465453L13.000024945144654,26.111085736465455L22.629694945144653,20.555585736465453ZM4.370394945144653,10.022025736465455L13.000024945144654,5.043375736465454L21.629694945144653,10.022025736465455L21.629694945144653,19.977985736465453L13.000024945144654,24.956585736465453L4.370394945144653,19.977985736465453L4.370394945144653,10.022025736465455Z" fill-rule="evenodd" fill="url(#master_svg3_674_14503)" fill-opacity="1"/></g></g><g><g><path d="M11.33331,15.49914379814148L8,15.49914379814148L8,14.124133798141479L11.3333,14.124133798141479L11.3333,12.74911379814148L13.33328,14.81162379814148L11.3333,16.87413379814148L11.33331,15.49914379814148Z" fill="url(#master_svg4_674_15843)" fill-opacity="1"/></g><g><path d="M18.00000487701416,10L18.00000487701416,18.9375L14.00005487701416,21L14.00005487701416,18.9375L10.00008487701416,18.9375L10.00008487701416,16.18751L10.66674687701416,16.18751L10.66674687701416,18.25L14.00003487701416,18.25L14.00003487701416,12.06248L16.66668487701416,10.687497L10.66676887701416,10.687497L10.66676887701416,13.43751L10.00010732391416,13.43751L10.00010732391416,10L18.00000487701416,10Z" fill="url(#master_svg5_674_15843)" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/Monitor/TopRight/opRoom.svg b/src/assets/svg/Monitor/TopRight/opRoom.svg
new file mode 100644
index 0000000..50ccb60
--- /dev/null
+++ b/src/assets/svg/Monitor/TopRight/opRoom.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="26" height="30" viewBox="0 0 26 30"><defs><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg0_674_17513"><stop offset="0%" stop-color="#C2E8FF" stop-opacity="0"/><stop offset="79.16666865348816%" stop-color="#008BB6" stop-opacity="0.30000001192092896"/><stop offset="100%" stop-color="#44D3FF" stop-opacity="0.699999988079071"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_674_17853"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="54.6875%" stop-color="#7BE0FF" stop-opacity="0"/><stop offset="100%" stop-color="#0AC5FF" stop-opacity="0.5"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg2_674_16437"><stop offset="0%" stop-color="#08C5FF" stop-opacity="0.699999988079071"/><stop offset="100%" stop-color="#0083AC" stop-opacity="0"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg3_674_16863"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="100%" stop-color="#13C8FF" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg4_674_17869"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CDE9FF" stop-opacity="1"/><stop offset="100%" stop-color="#35CEFD" stop-opacity="1"/></linearGradient></defs><g><g><g><path d="M13,0C13,0,26,7.5,26,7.5C26,7.5,26,22.5,26,22.5C26,22.5,13,30,13,30C13,30,0,22.5,0,22.5C0,22.5,0,7.5,0,7.5C0,7.5,13,0,13,0C13,0,13,0,13,0Z" fill="url(#master_svg0_674_17513)" fill-opacity="1"/><path d="M26,22.5L26,7.5L13,0L0,7.5L0,22.5L13,30L26,22.5ZM1,8.07756L13,1.15449L25,8.07756L25,21.9224L13,28.8455L1,21.9224L1,8.07756Z" fill-rule="evenodd" fill="url(#master_svg1_674_17853)" fill-opacity="1"/></g><g><path d="M13.000024945144654,3.888885736465454C13.000024945144654,3.888885736465454,22.629694945144653,9.444465736465453,22.629694945144653,9.444465736465453C22.629694945144653,9.444465736465453,22.629694945144653,20.555585736465453,22.629694945144653,20.555585736465453C22.629694945144653,20.555585736465453,13.000024945144654,26.111085736465455,13.000024945144654,26.111085736465455C13.000024945144654,26.111085736465455,3.3703949451446533,20.555585736465453,3.3703949451446533,20.555585736465453C3.3703949451446533,20.555585736465453,3.3703949451446533,9.444465736465453,3.3703949451446533,9.444465736465453C3.3703949451446533,9.444465736465453,13.000024945144654,3.888885736465454,13.000024945144654,3.888885736465454Z" fill="url(#master_svg2_674_16437)" fill-opacity="1"/><path d="M22.629694945144653,20.555585736465453L22.629694945144653,9.444465736465453L13.000024945144654,3.888885736465454L3.3703949451446533,9.444465736465453L3.3703949451446533,20.555585736465453L13.000024945144654,26.111085736465455L22.629694945144653,20.555585736465453ZM4.370394945144653,10.022025736465455L13.000024945144654,5.043375736465454L21.629694945144653,10.022025736465455L21.629694945144653,19.977985736465453L13.000024945144654,24.956585736465453L4.370394945144653,19.977985736465453L4.370394945144653,10.022025736465455Z" fill-rule="evenodd" fill="url(#master_svg3_674_16863)" fill-opacity="1"/></g></g><g><path d="M9.5,10L8,10L8,19L9.5,19L9.5,10ZM10,10L17,10C17.55228,10,18,10.447715,18,11L18,18C18,18.55229,17.55228,19,17,19L10,19L10,10ZM15,12.11768L13.5,12.11768L13.5,13.70595L12,13.70595L12,15.29419L13.5,15.29419L13.5,16.88238L15,16.88238L15,15.29419L16.5,15.29419L16.5,13.70595L15,13.70595L15,12.11768Z" fill-rule="evenodd" fill="url(#master_svg4_674_17869)" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/Monitor/TopRight/opStart.svg b/src/assets/svg/Monitor/TopRight/opStart.svg
new file mode 100644
index 0000000..9e641ba
--- /dev/null
+++ b/src/assets/svg/Monitor/TopRight/opStart.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="26" height="30" viewBox="0 0 26 30"><defs><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg0_674_22188"><stop offset="0%" stop-color="#C2E8FF" stop-opacity="0"/><stop offset="78.57142686843872%" stop-color="#5D5CB8" stop-opacity="0.30000001192092896"/><stop offset="97.85714149475098%" stop-color="#6867FF" stop-opacity="0.699999988079071"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_674_22286"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="54.6875%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="100%" stop-color="#7B7AFF" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg2_674_21320"><stop offset="0%" stop-color="#8685FF" stop-opacity="0.699999988079071"/><stop offset="100%" stop-color="#006EB3" stop-opacity="0"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg3_674_21790"><stop offset="2.142857201397419%" stop-color="#ADADFF" stop-opacity="0"/><stop offset="100%" stop-color="#8A89FF" stop-opacity="1"/></linearGradient><filter id="master_svg4_674_24393" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-4" y="-2" width="18" height="18"><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="2" dx="0"/><feGaussianBlur stdDeviation="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.30000001192092896 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg5_674_22368"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CDE9FF" stop-opacity="1"/><stop offset="100%" stop-color="#8483F6" stop-opacity="1"/></linearGradient></defs><g><g><g><path d="M13,0C13,0,26,7.5,26,7.5C26,7.5,26,22.5,26,22.5C26,22.5,13,30,13,30C13,30,0,22.5,0,22.5C0,22.5,0,7.5,0,7.5C0,7.5,13,0,13,0C13,0,13,0,13,0Z" fill="url(#master_svg0_674_22188)" fill-opacity="1"/><path d="M26,22.5L26,7.5L13,0L0,7.5L0,22.5L13,30L26,22.5ZM1,8.07756L13,1.15449L25,8.07756L25,21.9224L13,28.8455L1,21.9224L1,8.07756Z" fill-rule="evenodd" fill="url(#master_svg1_674_22286)" fill-opacity="1"/></g><g><path d="M13.000024945144654,3.888885736465454C13.000024945144654,3.888885736465454,22.629694945144653,9.444465736465453,22.629694945144653,9.444465736465453C22.629694945144653,9.444465736465453,22.629694945144653,20.555585736465453,22.629694945144653,20.555585736465453C22.629694945144653,20.555585736465453,13.000024945144654,26.111085736465455,13.000024945144654,26.111085736465455C13.000024945144654,26.111085736465455,3.3703949451446533,20.555585736465453,3.3703949451446533,20.555585736465453C3.3703949451446533,20.555585736465453,3.3703949451446533,9.444465736465453,3.3703949451446533,9.444465736465453C3.3703949451446533,9.444465736465453,13.000024945144654,3.888885736465454,13.000024945144654,3.888885736465454Z" fill="url(#master_svg2_674_21320)" fill-opacity="1"/><path d="M22.629694945144653,20.555585736465453L22.629694945144653,9.444465736465453L13.000024945144654,3.888885736465454L3.3703949451446533,9.444465736465453L3.3703949451446533,20.555585736465453L13.000024945144654,26.111085736465455L22.629694945144653,20.555585736465453ZM4.370394945144653,10.022025736465455L13.000024945144654,5.043375736465454L21.629694945144653,10.022025736465455L21.629694945144653,19.977985736465453L13.000024945144654,24.956585736465453L4.370394945144653,19.977985736465453L4.370394945144653,10.022025736465455Z" fill-rule="evenodd" fill="url(#master_svg3_674_21790)" fill-opacity="1"/></g></g><g filter="url(#master_svg4_674_24393)"><path d="M13,9C15.30125,9,17.16667,10.86542,17.16667,13.16667L17.16667,16.5L17.58333,16.5C17.81345,16.5,18,16.68655,18,16.91667L18,18.58333C18,18.81345,17.81345,19,17.58333,19L8.416667,19C8.186548,19,8,18.81345,8,18.58333L8,16.91667C7.999999523163,16.68655,8.186548,16.5,8.416667,16.5L8.833333,16.5L8.833333,13.16667C8.833333,10.86542,10.69875,9,13,9ZM13,11.91667C12.76988,11.91667,12.58333,12.10321,12.58333,12.33333L12.58333,13.16667L11.75,13.16667C11.51988,13.16667,11.33333,13.35322,11.33333,13.58333C11.33333,13.81345,11.51988,14,11.75,14L12.58333,14L12.58333,14.83333C12.58333,15.06345,12.76988,15.25,13,15.25C13.23012,15.25,13.41667,15.06345,13.41667,14.83333L13.41667,14L14.25,14C14.48012,14,14.66667,13.81345,14.66667,13.58333C14.66667,13.35322,14.48012,13.16667,14.25,13.16667L13.41667,13.16667L13.41667,12.33333C13.41667,12.10321,13.23012,11.91667,13,11.91667Z" fill="url(#master_svg5_674_22368)" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/Monitor/TopRight/prePlan.svg b/src/assets/svg/Monitor/TopRight/prePlan.svg
new file mode 100644
index 0000000..183f9c0
--- /dev/null
+++ b/src/assets/svg/Monitor/TopRight/prePlan.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="26" height="30" viewBox="0 0 26 30"><defs><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg0_674_13379"><stop offset="0%" stop-color="#FFEECE" stop-opacity="0"/><stop offset="79.16666865348816%" stop-color="#BE7700" stop-opacity="0.30000001192092896"/><stop offset="100%" stop-color="#FFAD23" stop-opacity="0.699999988079071"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_674_14069"><stop offset="0%" stop-color="#FFDFA9" stop-opacity="0"/><stop offset="54.6875%" stop-color="#FFDDA5" stop-opacity="0"/><stop offset="97.85714149475098%" stop-color="#FFA610" stop-opacity="0.4000000059604645"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg2_674_10763"><stop offset="0%" stop-color="#DCA447" stop-opacity="0.699999988079071"/><stop offset="100%" stop-color="#48B300" stop-opacity="0"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg3_674_12447"><stop offset="0%" stop-color="#FFF5E4" stop-opacity="0"/><stop offset="100%" stop-color="#FFB232" stop-opacity="1"/></linearGradient><filter id="master_svg4_674_24453" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-4" y="-2" width="16" height="18"><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="2" dx="0"/><feGaussianBlur stdDeviation="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.30000001192092896 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg5_674_12279"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CEFFC8" stop-opacity="1"/><stop offset="100%" stop-color="#FFB944" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg6_674_12279"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CEFFC8" stop-opacity="1"/><stop offset="100%" stop-color="#FFB944" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg7_674_12279"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CEFFC8" stop-opacity="1"/><stop offset="100%" stop-color="#FFB944" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg8_674_12279"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CEFFC8" stop-opacity="1"/><stop offset="100%" stop-color="#FFB944" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg9_674_12279"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CEFFC8" stop-opacity="1"/><stop offset="100%" stop-color="#FFB944" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svga_674_12279"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CEFFC8" stop-opacity="1"/><stop offset="100%" stop-color="#FFB944" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svgb_674_12279"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CEFFC8" stop-opacity="1"/><stop offset="100%" stop-color="#FFB944" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svgc_674_12279"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CEFFC8" stop-opacity="1"/><stop offset="100%" stop-color="#FFB944" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svgd_674_12279"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CEFFC8" stop-opacity="1"/><stop offset="100%" stop-color="#FFB944" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svge_674_12279"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CEFFC8" stop-opacity="1"/><stop offset="100%" stop-color="#FFB944" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svgf_674_12279"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CEFFC8" stop-opacity="1"/><stop offset="100%" stop-color="#FFB944" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svgg_674_12279"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CEFFC8" stop-opacity="1"/><stop offset="100%" stop-color="#FFB944" stop-opacity="1"/></linearGradient></defs><g><g><g><path d="M13,0C13,0,26,7.5,26,7.5C26,7.5,26,22.5,26,22.5C26,22.5,13,30,13,30C13,30,0,22.5,0,22.5C0,22.5,0,7.5,0,7.5C0,7.5,13,0,13,0C13,0,13,0,13,0Z" fill="url(#master_svg0_674_13379)" fill-opacity="1"/><path d="M26,22.5L26,7.5L13,0L0,7.5L0,22.5L13,30L26,22.5ZM1,8.07756L13,1.15449L25,8.07756L25,21.9224L13,28.8455L1,21.9224L1,8.07756Z" fill-rule="evenodd" fill="url(#master_svg1_674_14069)" fill-opacity="1"/></g><g><path d="M13.000024945144654,3.888885736465454C13.000024945144654,3.888885736465454,22.629694945144653,9.444465736465453,22.629694945144653,9.444465736465453C22.629694945144653,9.444465736465453,22.629694945144653,20.555585736465453,22.629694945144653,20.555585736465453C22.629694945144653,20.555585736465453,13.000024945144654,26.111085736465455,13.000024945144654,26.111085736465455C13.000024945144654,26.111085736465455,3.3703949451446533,20.555585736465453,3.3703949451446533,20.555585736465453C3.3703949451446533,20.555585736465453,3.3703949451446533,9.444465736465453,3.3703949451446533,9.444465736465453C3.3703949451446533,9.444465736465453,13.000024945144654,3.888885736465454,13.000024945144654,3.888885736465454Z" fill="url(#master_svg2_674_10763)" fill-opacity="1"/><path d="M22.629694945144653,20.555585736465453L22.629694945144653,9.444465736465453L13.000024945144654,3.888885736465454L3.3703949451446533,9.444465736465453L3.3703949451446533,20.555585736465453L13.000024945144654,26.111085736465455L22.629694945144653,20.555585736465453ZM4.370394945144653,10.022025736465455L13.000024945144654,5.043375736465454L21.629694945144653,10.022025736465455L21.629694945144653,19.977985736465453L13.000024945144654,24.956585736465453L4.370394945144653,19.977985736465453L4.370394945144653,10.022025736465455Z" fill-rule="evenodd" fill="url(#master_svg3_674_12447)" fill-opacity="1"/></g></g><g filter="url(#master_svg4_674_24453)"><g><path d="M12.730738878250122,14.212527751922607L13.269260878250122,14.212527751922607L13.269260878250122,15.889257751922607L12.730738878250122,15.889257751922607L12.730738878250122,14.212527751922607Z" fill="url(#master_svg5_674_12279)" fill-opacity="1"/></g><g><path d="M16.34999,10.817673L9.648961,10.817673C9.291349,10.817673,9,10.508949,9,10.127517L9,10L16.99895,10L16.99895,10.127517C16.99895,10.508949,16.70865,10.817673,16.34999,10.817673Z" fill="url(#master_svg6_674_12279)" fill-opacity="1"/></g><g><path d="M12.99894504787445,14.72371338514328C14.538785047874452,14.72371338514328,15.786225047874451,12.974273385143281,15.786225047874451,10.81767338514328L10.21167504787445,10.81767338514328C10.21167504787445,12.97539338514328,11.459115047874452,14.72371338514328,12.99894504787445,14.72371338514328Z" fill="url(#master_svg7_674_12279)" fill-opacity="1"/></g><g><path d="M9.684723,19.182326316833496L16.31528,19.182326316833496C16.69393,19.182326316833496,17,19.508948316833497,17,19.910514316833495L17,19.999999316833495L9,19.999999316833495L9,19.910514316833495C9,19.506711316833496,9.306074,19.182326316833496,9.684723,19.182326316833496Z" fill="url(#master_svg8_674_12279)" fill-opacity="1"/></g><g><path d="M12.99894504787445,15.27516794204712C11.459115047874452,15.27516794204712,10.21167504787445,17.02460794204712,10.21167504787445,19.18120794204712L15.788325047874451,19.18120794204712C15.788325047874451,17.02460794204712,14.538785047874452,15.27516794204712,12.99894504787445,15.27516794204712Z" fill="url(#master_svg9_674_12279)" fill-opacity="1"/></g><g><path d="M13,10.81767338514328L13,14.72371338514328C14.53879,14.72259338514328,15.78727,12.974273385143281,15.78727,10.81767338514328L13,10.81767338514328Z" fill="url(#master_svga_674_12279)" fill-opacity="1"/></g><g><path d="M12.998947858810425,14.212527751922607L13.268208858810425,14.212527751922607L13.268208858810425,15.889257751922607L12.998947858810425,15.889257751922607L12.998947858810425,14.212527751922607Z" fill="url(#master_svgb_674_12279)" fill-opacity="1"/></g><g><path d="M12.998947858810425,19.18120794204712L15.786217858810424,19.18120794204712C15.786217858810424,17.02460794204712,14.538787858810425,15.27516794204712,12.998947858810425,15.27516794204712L12.998947858810425,19.18120794204712Z" fill="url(#master_svgc_674_12279)" fill-opacity="1"/></g><g><path d="M10.428346037864685,12.329977750778198C10.850118037864686,13.734897750778199,11.841966037864685,14.722597750778199,12.999996037864685,14.722597750778199C14.156986037864685,14.722597750778199,15.148826037864685,13.734897750778199,15.571656037864685,12.329977750778198L10.428346037864685,12.329977750778198Z" fill="url(#master_svgd_674_12279)" fill-opacity="1"/></g><g><path d="M15.48751193687439,19.181772248077394C14.91638193687439,18.473712248077394,14.01604193687439,18.01622224807739,13.00105193687439,18.01622224807739C11.98501193687439,18.01622224807739,11.08466993687439,18.47595224807739,10.51354193687439,19.181772248077394L15.48751193687439,19.181772248077394ZM12.87799193687439,16.077740248077394C12.87799193687439,16.238814248077393,12.93268193687439,16.36856824807739,13.00000193687439,16.36856824807739C13.06731193687439,16.36856824807739,13.12201193687439,16.238814248077393,13.12201193687439,16.077740248077394C13.12201193687439,15.973714248077393,13.098871936874389,15.877516948077393,13.06100193687439,15.826062848077392C13.023141936874389,15.774608748077393,12.97686193687439,15.774608748077393,12.93899193687439,15.826062848077392C12.901131936874389,15.877516948077393,12.87799193687439,15.973714248077393,12.87799193687439,16.077740248077394ZM12.87799193687439,16.937922248077392C12.87799193687439,17.098992248077394,12.93268193687439,17.22875224807739,13.00000193687439,17.22875224807739C13.06731193687439,17.22875224807739,13.12201193687439,17.098992248077394,13.12201193687439,16.937922248077392C13.12201193687439,16.833892248077394,13.098871936874389,16.73769624807739,13.06100193687439,16.68624224807739C13.023141936874389,16.634787248077394,12.97686193687439,16.634787248077394,12.93899193687439,16.68624224807739C12.901131936874389,16.738814248077393,12.87799193687439,16.833892248077394,12.87799193687439,16.937922248077392Z" fill="url(#master_svge_674_12279)" fill-opacity="1"/></g><g><path d="M12.87694295387268,17.9340077028656C12.87694295387268,18.095077702865602,12.93163295387268,18.2248377028656,12.998952953872681,18.2248377028656C13.06626295387268,18.2248377028656,13.120952953872681,18.095077702865602,13.120952953872681,17.9340077028656C13.120952953872681,17.8299777028656,13.09781295387268,17.733777702865602,13.059952953872681,17.6823277028656C13.02208295387268,17.6308777028656,12.97581295387268,17.6308777028656,12.93794295387268,17.6823277028656C12.90008295387268,17.733777702865602,12.87694295387268,17.8299777028656,12.87694295387268,17.9340077028656ZM11.93873295387268,13.5268477028656C11.596896953872681,13.5268477028656,11.267682953872681,13.5044777028656,10.95214295387268,13.466447702865601C11.46121495387268,14.2393777028656,12.18906295387268,14.7248277028656,13.00000295387268,14.7248277028656C14.15067295387268,14.7248277028656,15.138312953872681,13.7472077028656,15.563242953872681,12.3534677028656C15.03418295387268,13.035794702865601,13.61320295387268,13.5268477028656,11.93873295387268,13.5268477028656Z" fill="url(#master_svgf_674_12279)" fill-opacity="1"/></g><g><path d="M12.998947858810425,10L12.998947858810425,10.818792L16.412037858810425,10.818792C16.735997858810425,10.818792,16.997897858810425,10.53915,16.997897858810425,10.195749L16.997897858810425,10L12.998947858810425,10ZM16.413097858810424,19.18121L12.999999658810426,19.18121L12.999999658810426,20L16.998947858810425,20L16.998947858810425,19.80649C16.998947858810425,19.46085,16.735997858810425,19.18121,16.413097858810424,19.18121Z" fill="url(#master_svgg_674_12279)" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/views/pageMonitor/topRight/index.vue b/src/views/pageMonitor/topRight/index.vue
index 43e03dd..54bc3a7 100644
--- a/src/views/pageMonitor/topRight/index.vue
+++ b/src/views/pageMonitor/topRight/index.vue
@@ -1,16 +1,104 @@
 <template>
-  <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="true" :interval="5000" indicatorPosition="none">
+  <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 opList" :key="item['roomCode']">
         <section>
           <template v-for="(subItem, index) in item">
             <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
+                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
+                class="absolute w-[10vh] h-[2.77vh] left-[1.03vh] bottom-[1.48vh]"
+              >
+                <div
+                  class="w-full h-full flex justify-between items-center"
+                  v-if="subItem.procStatus == 10"
+                >
+                  <img
+                    src="@/assets/svg/Monitor/TopRight/opRoom.svg"
+                    class="relative top-[-2px]"
+                  />
+                  <span
+                    class="text-[1.85vh] text-[#35CEFD] youshe text-nowrap"
+                    >{{ subItem["operStatusName"] }}</span
+                  >
+                </div>
+                <div
+                  class="w-full h-full flex justify-between items-center"
+                  v-else-if="subItem.procStatus == 15"
+                >
+                  <img
+                    src="@/assets/svg/Monitor/TopRight/anesStart.svg"
+                    class="relative top-[-2px]"
+                  />
+                  <span
+                    class="text-[1.85vh] text-[#424CFE] youshe text-nowrap"
+                    >{{ subItem["operStatusName"] }}</span
+                  >
+                </div>
+                <div
+                  class="w-full h-full flex justify-between items-center"
+                  v-else-if="subItem.procStatus == 20"
+                >
+                  <img
+                    src="@/assets/svg/Monitor/TopRight/OpingIcon.svg"
+                    class="relative top-[-2px]"
+                  />
+                  <span
+                    class="text-[1.85vh] text-[#B53FDF] youshe text-nowrap"
+                    >{{ subItem["operStatusName"] }}</span
+                  >
+                </div>
+                <div
+                  class="w-full h-full flex justify-between items-center"
+                  v-else-if="subItem.procStatus == 25"
+                >
+                  <img
+                    src="@/assets/svg/Monitor/TopRight/opEnd.svg"
+                    class="relative top-[-2px]"
+                  />
+                  <span
+                    class="text-[1.85vh] text-[#BAE7A4] youshe text-nowrap"
+                    >{{ subItem["operStatusName"] }}</span
+                  >
+                </div>
+                <div
+                  class="w-full h-full flex justify-between items-center"
+                  v-else-if="subItem.procStatus == 30"
+                >
+                  <img
+                    src="@/assets/svg/Monitor/TopRight/OpendIcon.svg"
+                    class="relative top-[-2px]"
+                  />
+                  <span
+                    class="text-[1.85vh] text-[#946FEC] youshe text-nowrap"
+                    >{{ subItem["operStatusName"] }}</span
+                  >
+                </div>
+                <div
+                  class="w-full h-full flex justify-between items-center"
+                  v-else
+                >
+                  <img
+                    src="@/assets/svg/Monitor/TopRight/OpWaitIcon.svg"
+                    class="relative top-[-2px]"
+                  />
+                  <span
+                    class="text-[1.85vh] text-[#0CFFFF] youshe text-nowrap"
+                    >{{ subItem["operStatusName"] }}</span
+                  >
+                </div>
               </div>
             </div>
           </template>
@@ -18,12 +106,12 @@
       </el-carousel-item>
     </el-carousel>
   </div>
-</template> 
+</template>
 
 <script>
-import { Carousel, CarouselItem } from 'element-ui';
-import { GetMonitorOperationRoomStatus } from '@/api/monitor';
-import dayjs from 'dayjs';
+import { Carousel, CarouselItem } from "element-ui";
+import { GetMonitorOperationRoomStatus } from "@/api/monitor";
+import dayjs from "dayjs";
 export default {
   data() {
     return {
@@ -33,19 +121,21 @@ export default {
   },
   methods: {
     onGetPageData() {
-      let nowDay = dayjs().format('YYYY-MM-DD');
+      let nowDay = dayjs("2024-04-22").format("YYYY-MM-DD");
       if (this.$store.getters.isMock) {
-        nowDay = '2024-06-06';
+        nowDay = "2024-06-06";
       }
-      GetMonitorOperationRoomStatus(nowDay).then(res => {
-        this.formatData(res['data']);
+
+      GetMonitorOperationRoomStatus(nowDay).then((res) => {
+        this.formatData(res["data"]);
         this.isLoading = false;
       });
     },
     formatData(pageData) {
+      console.log("pageData:", pageData);
       this.opList = [];
       let group = 0;
-      for (let i = 0; i < pageData['length']; i++) {
+      for (let i = 0; i < pageData["length"]; i++) {
         group = parseInt(i / 21);
         if (this.opList[group]) {
           this.opList[group].push(pageData[i]);
@@ -59,15 +149,15 @@ export default {
     this.onGetPageData();
   },
   components: {
-    'el-carousel': Carousel,
-    'el-carousel-item': CarouselItem,
+    "el-carousel": Carousel,
+    "el-carousel-item": CarouselItem,
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .bgTopRightBox {
-  background-image: url('@/assets/svg/Monitor/TopRight/Box.svg');
+  background-image: url("@/assets/svg/Monitor/TopRight/Box.svg");
   :deep(.el-carousel) {
     height: 39.62vh;
     .el-carousel__container {
@@ -85,23 +175,33 @@ export default {
 }
 
 .ItemBox {
-  background-image: url('@/assets/svg/Monitor/TopRight/ItemBox.svg');
+  background-image: url("@/assets/svg/Monitor/TopRight/ItemBox.svg");
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
 }
 .PBg {
-  background: linear-gradient(90deg, rgba(0, 147, 255, 0) 0%, rgba(0, 147, 255, 0.37) 44%, rgba(0, 147, 255, 0) 99%);
+  background: linear-gradient(
+    90deg,
+    rgba(0, 147, 255, 0) 0%,
+    rgba(0, 147, 255, 0.37) 44%,
+    rgba(0, 147, 255, 0) 99%
+  );
   position: relative;
   &::after {
-    content: '';
+    content: "";
     display: block;
     width: 100%;
     height: 1px;
     position: absolute;
     bottom: 0;
     left: 0;
-    background: linear-gradient(90deg, rgba(0, 147, 255, 0) 0%, #0093ff 49%, rgba(0, 147, 255, 0) 99%);
+    background: linear-gradient(
+      90deg,
+      rgba(0, 147, 255, 0) 0%,
+      #0093ff 49%,
+      rgba(0, 147, 255, 0) 99%
+    );
   }
 }
 </style>