From 0b5868134997d188a06036b0b31fa4caf30e7865 Mon Sep 17 00:00:00 2001
From: "@0Melon0" <576788380@qq.com>
Date: Thu, 29 Feb 2024 16:52:09 +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/Monitor/BottomMid/Box.svg      |  1 +
 src/assets/svg/Monitor/BottomRight/Box.svg    |  1 +
 src/assets/svg/Monitor/TopRight/Box.svg       |  2 +-
 src/assets/svg/Monitor/TopRight/ItemBox.svg   |  2 +-
 .../svg/Monitor/TopRight/ItemBoxBorder.svg    |  1 -
 .../svg/Monitor/{BottomLeft => }/Triangle.svg |  0
 src/views/pageMonitor/bottomLeft/index.vue    |  4 +-
 src/views/pageMonitor/bottomMiddle/index.vue  | 97 ++++++++++++++++++-
 src/views/pageMonitor/bottomRight/index.vue   | 65 ++++++++++++-
 src/views/pageMonitor/topRight/index.vue      |  3 +-
 10 files changed, 164 insertions(+), 12 deletions(-)
 create mode 100644 src/assets/svg/Monitor/BottomMid/Box.svg
 create mode 100644 src/assets/svg/Monitor/BottomRight/Box.svg
 delete mode 100644 src/assets/svg/Monitor/TopRight/ItemBoxBorder.svg
 rename src/assets/svg/Monitor/{BottomLeft => }/Triangle.svg (100%)

diff --git a/src/assets/svg/Monitor/BottomMid/Box.svg b/src/assets/svg/Monitor/BottomMid/Box.svg
new file mode 100644
index 0000000..1a931eb
--- /dev/null
+++ b/src/assets/svg/Monitor/BottomMid/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="776" height="434.0546875" viewBox="0 0 776 434.0546875"><defs><filter id="master_svg0_600_05759" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="773" height="428"><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"/><feGaussianBlur in="BackgroundImage" stdDeviation="2.5"/><feComposite in2="SourceAlpha" operator="in" result="effect2_foregroundBlur"/><feBlend mode="normal" in="SourceGraphic" in2="effect2_foregroundBlur" result="shape"/></filter><linearGradient x1="0.012568394653499126" y1="0.2873583436012268" x2="0.9811341762542725" y2="1" id="master_svg1_185_47658"><stop offset="0%" stop-color="#8C64E2" stop-opacity="1"/><stop offset="6.495057046413422%" stop-color="#8C64E2" stop-opacity="0"/><stop offset="12.896205484867096%" stop-color="#8C64E2" stop-opacity="0"/><stop offset="82.82808661460876%" stop-color="#8C64E2" stop-opacity="0.699999988079071"/><stop offset="87.64115571975708%" 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><linearGradient x1="1" y1="0.5" x2="0" y2="0.5" id="master_svg4_185_44761"><stop offset="0%" stop-color="#2B406C" stop-opacity="0"/><stop offset="100%" stop-color="#332B6C" stop-opacity="0.699999988079071"/></linearGradient><linearGradient x1="0.5576906800270081" y1="1.806973057036994e-15" x2="0.5576906800270081" y2="1" id="master_svg5_185_44712"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="0"/><stop offset="100%" stop-color="#FFFFFF" stop-opacity="0.1599999964237213"/></linearGradient><linearGradient x1="0.5576906800270081" y1="1.806973057036994e-15" x2="0.5576906800270081" y2="1" id="master_svg6_185_44712"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="0"/><stop offset="100%" stop-color="#FFFFFF" stop-opacity="0.1599999964237213"/></linearGradient><linearGradient x1="3.860804120847661e-9" y1="0.5005239844322205" x2="1" y2="0.5005239844322205" id="master_svg7_173_01135"><stop offset="0%" stop-color="#538AFF" stop-opacity="0.14000000059604645"/><stop offset="19.79166716337204%" stop-color="#538AFF" stop-opacity="1"/><stop offset="76.04166865348816%" stop-color="#538AFF" stop-opacity="0.07999999821186066"/><stop offset="100%" stop-color="#538AFF" stop-opacity="0"/></linearGradient><linearGradient x1="3.860804120847661e-9" y1="0.5005239844322205" x2="1" y2="0.5005239844322205" id="master_svg8_173_01132"><stop offset="0%" stop-color="#538AFF" stop-opacity="0.14000000059604645"/><stop offset="65.625%" stop-color="#538AFF" stop-opacity="0.3400000035762787"/><stop offset="76.04166865348816%" stop-color="#538AFF" stop-opacity="0.07999999821186066"/><stop offset="100%" stop-color="#538AFF" stop-opacity="0"/></linearGradient></defs><g><g filter="url(#master_svg0_600_05759)"><path d="M2.5,430.5L775.5,430.5L775.5,9L456.5,8L453.5,2.5L2.5,2.5L2.5,430.5Z" fill="#01152A" fill-opacity="0.30000001192092896"/></g><g><path d="M1.5,429.5L774.5,429.5L774.5,10.5L456,10L451,1.5L1.5,1.5L1.5,429.5Z" fill="#01152A" fill-opacity="0.4000000059604645"/><path d="M456.859,8.50135L776,9.00235L776,431L0,431L0,0L451.858,0L456.859,8.50135ZM450.142,3L454.707,10.76053L455.141,11.49865L773,11.9976L773,428L3,428L3,3L450.142,3Z" fill-rule="evenodd" fill="url(#master_svg1_185_47658)" fill-opacity="1"/></g><g><path d="M457.5,0.5L672.485,0.5L675.586,4.33186L460.60075,4.33186L457.5,0.5Z" fill="url(#master_svg2_555_29651)" fill-opacity="1"/></g><g><path d="M680.5,0.5L768.3545,0.5L771.4552,4.33186L683.60075,4.33186L680.5,0.5Z" fill="url(#master_svg3_555_29651)" fill-opacity="1"/></g><g><path d="M7.5,422.88643L7.5,416.5L12.66791,422.88643L7.5,422.88643Z" fill="#8C64E2" fill-opacity="0.8392156958580017"/></g><g><path d="M767.66791,422.88643L767.66791,416.5L762.5,422.88643L767.66791,422.88643Z" fill="#8C64E2" fill-opacity="0.8392156958580017"/></g><g><path d="M708.5,431.5L718.8358,431.5L718.8358,434.05457L708.5,434.05457L708.5,431.5ZM720.903,431.5L727.1045,431.5L727.1045,434.05457L720.903,434.05457L720.903,431.5ZM734.3396,431.5L729.1716,431.5L729.1716,434.05457L734.3396,434.05457L734.3396,431.5Z" fill-rule="evenodd" fill="#8C64E2" fill-opacity="0.8392156958580017"/></g><g><g><rect x="5.5" y="5.5" width="765" height="44" rx="0" fill="url(#master_svg4_185_44761)" fill-opacity="1"/></g><g><g><path d="M517.1502,7.5L489.9867,7.5L464.5,47.5L491.6635,47.5L517.1502,7.5ZM557.7278,7.5L530.5643,7.5L505.0776,47.5L532.2411,47.5L557.7278,7.5ZM571.142,7.5L598.3050000000001,7.5L572.819,47.5L545.6553,47.5L571.142,7.5ZM638.884,7.5L611.72,7.5L586.233,47.5L613.3969999999999,47.5L638.884,7.5Z" fill-rule="evenodd" fill="url(#master_svg5_185_44712)" fill-opacity="0.6000000238418579"/></g></g><g><g><path d="M97.1502,7.5L69.9867,7.5L44.5,47.5L71.6635,47.5L97.1502,7.5ZM137.7278,7.5L110.5643,7.5L85.07759999999999,47.5L112.2411,47.5L137.7278,7.5ZM151.142,7.5L178.305,7.5L152.81900000000002,47.5L125.6553,47.5L151.142,7.5ZM218.884,7.5L191.72,7.5L166.233,47.5L193.397,47.5L218.884,7.5Z" fill-rule="evenodd" fill="url(#master_svg6_185_44712)" fill-opacity="0.6000000238418579"/></g></g><g><g><rect x="5.5" y="5.5" width="434" height="1" rx="0" fill="url(#master_svg7_173_01135)" fill-opacity="1"/></g><g><rect x="5.5" y="47.5" width="765" height="2" rx="0" fill="url(#master_svg8_173_01132)" fill-opacity="0.800000011920929"/></g><g><rect x="706.5" y="47.5" width="12.072660446166992" height="2" rx="0" fill="#A4C1FF" fill-opacity="1"/></g></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/Monitor/BottomRight/Box.svg b/src/assets/svg/Monitor/BottomRight/Box.svg
new file mode 100644
index 0000000..b81bc40
--- /dev/null
+++ b/src/assets/svg/Monitor/BottomRight/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="451" height="433" viewBox="0 0 451 433"><defs><clipPath id="master_svg0_600_05582"><rect x="0" y="0" width="451" height="433" 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="61.3095703125" x2="0" y2="61.3095703125" gradientUnits="userSpaceOnUse" id="master_svg3_201_00003"><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="450.15869140625" y1="61.3095703125" x2="450.15869140625" y2="61.3095703125" gradientUnits="userSpaceOnUse" id="master_svg4_201_00003"><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_600_05592" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="451" height="427.8908386230469"><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_600_05593" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="451" height="427.8908386230469"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur in="BackgroundImage" stdDeviation="2.5"/><feComposite in2="SourceAlpha" operator="in" result="effect1_foregroundBlur"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_foregroundBlur" result="shape"/></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><linearGradient x1="1" y1="0.5" x2="0" y2="0.5" id="master_svg8_185_47812"><stop offset="0%" stop-color="#2B406C" stop-opacity="0"/><stop offset="100%" stop-color="#332B6C" stop-opacity="0.800000011920929"/></linearGradient><linearGradient x1="0.5576906800270081" y1="1.806973057036994e-15" x2="0.5576906800270081" y2="1" id="master_svg9_185_44712"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="0"/><stop offset="100%" stop-color="#FFFFFF" stop-opacity="0.1599999964237213"/></linearGradient><linearGradient x1="3.860804120847661e-9" y1="0.5005239844322205" x2="1" y2="0.5005239844322205" id="master_svga_173_01135"><stop offset="0%" stop-color="#538AFF" stop-opacity="0.14000000059604645"/><stop offset="19.79166716337204%" stop-color="#538AFF" stop-opacity="1"/><stop offset="76.04166865348816%" stop-color="#538AFF" stop-opacity="0.07999999821186066"/><stop offset="100%" stop-color="#538AFF" stop-opacity="0"/></linearGradient><linearGradient x1="3.860804120847661e-9" y1="0.5005239844322205" x2="1" y2="0.5005239844322205" id="master_svgb_173_01132"><stop offset="0%" stop-color="#538AFF" stop-opacity="0.14000000059604645"/><stop offset="65.625%" stop-color="#538AFF" stop-opacity="0.3400000035762787"/><stop offset="76.04166865348816%" stop-color="#538AFF" stop-opacity="0.07999999821186066"/><stop offset="100%" stop-color="#538AFF" stop-opacity="0"/></linearGradient></defs><g><g clip-path="url(#master_svg0_600_05582)"><g><path d="M283,0L408.015,0L410.539,3.83186L285.52429,3.83203L283,0Z" fill="url(#master_svg1_555_29651)" fill-opacity="1"/></g><g><path d="M414.4306640625,0L445.95116406249997,0L448.4754640625,3.83186L416.9549540625,3.83203L414.4306640625,0Z" fill="url(#master_svg2_555_29651)" fill-opacity="1"/></g><g><path d="M418.1845703125,430L426.5987503125,430L426.5987503125,432.55457L418.1845703125,432.55457L418.1845703125,430ZM428.2815703125,430L433.3300703125,430L433.3300703125,432.55457L428.2815703125,432.55457L428.2815703125,430ZM439.2199703125,430L435.0129703125,430L435.0129703125,432.55457L439.2199703125,432.55457L439.2199703125,430Z" fill-rule="evenodd" fill="#8C64E2" fill-opacity="0.8392156958580017"/></g><g><path d="M4.20703125,421.50410578125L4.20703125,415.11767578125L8.41412125,421.50410578125L4.20703125,421.50410578125Z" fill="#8C64E2" fill-opacity="0.8392156958580017"/></g><g><path d="M445.95171890625,421.50410578125L445.95171890625,415.11767578125L441.74462890625,421.50410578125L445.95171890625,421.50410578125Z" fill="#8C64E2" fill-opacity="0.8392156958580017"/></g><g transform="matrix(0,1,-1,0,61.3095703125,61.3095703125)"><line x1="0" y1="60.8095703125" x2="366.5810852050781" y2="60.8095703125" stroke="url(#master_svg3_201_00003)" fill-opacity="0" fill="none" stroke-width="1"/></g><g transform="matrix(0,1,-1,0,511.46826171875,-388.84912109375)"><line x1="450.15869140625" y1="60.8095703125" x2="816.7397766113281" y2="60.8095703125" stroke="url(#master_svg4_201_00003)" fill-opacity="0" fill="none" stroke-width="1"/></g><g filter="url(#master_svg5_600_05592)"><g filter="url(#master_svg6_600_05593)"><path d="M1,0L273.11,0L279,10.2188L452,10.2183L452,427.891L1,427.891L1,0Z" fill="#01152A" fill-opacity="0.4000000059604645"/><path d="M-0.5,-1.5L-0.5,429.391L453.5,429.391L453.5,8.71828L279.867,8.71875L273.977,-1.5L-0.5,-1.5ZM2.5,426.391L450.5,426.391L450.5,11.7183L278.133,11.7188L272.243,1.5L2.5,1.5L2.5,426.391Z" fill-rule="evenodd" fill="url(#master_svg7_201_02516)" fill-opacity="1"/></g><g><g><rect x="5" y="4" width="240" height="44" rx="0" fill="url(#master_svg8_185_47812)" fill-opacity="1"/></g><g><g></g></g><g><g><g><path d="M79.6807359375,6L57.5675359375,6L36.8193359375,46L58.9325359375,46L79.6807359375,6ZM112.7144359375,6L90.60123593750001,6L69.85303593750001,46L91.9662359375,46L112.7144359375,6ZM123.6344359375,6L145.7473359375,6L124.9994359375,46L102.8862359375,46L123.6344359375,6ZM178.7813359375,6L156.6683359375,6L135.9199359375,46L158.0333359375,46L178.7813359375,6Z" fill-rule="evenodd" fill="url(#master_svg9_185_44712)" fill-opacity="0.6000000238418579"/></g></g><g><rect x="5" y="4" width="220" height="1" rx="0" fill="url(#master_svga_173_01135)" fill-opacity="1"/></g><g><path d="M5,48L448,48L448,46L5,46L5,48Z" fill="url(#master_svgb_173_01132)" fill-opacity="0.800000011920929"/></g><g><rect x="417" y="46" width="12.072660446166992" height="2" rx="0" fill="#A4C1FF" fill-opacity="1"/></g></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/Monitor/TopRight/Box.svg b/src/assets/svg/Monitor/TopRight/Box.svg
index d72650e..7e0a07f 100644
--- a/src/assets/svg/Monitor/TopRight/Box.svg
+++ b/src/assets/svg/Monitor/TopRight/Box.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="1268.30029296875" height="434.0546875" viewBox="0 0 1268.30029296875 434.0546875"><defs><linearGradient x1="6.661338147750939e-16" y1="0.5" x2="1.017080545425415" y2="0.5000399947166443" id="master_svg0_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_svg1_555_29651"><stop offset="0%" stop-color="#5D49AF" stop-opacity="1"/><stop offset="100%" stop-color="#7E65E5" stop-opacity="0"/></linearGradient><linearGradient x1="1" y1="62.8095703125" x2="1" y2="62.8095703125" gradientUnits="userSpaceOnUse" id="master_svg2_201_00003"><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="1261.64453125" y1="62.8095703125" x2="1261.64453125" y2="62.8095703125" gradientUnits="userSpaceOnUse" id="master_svg3_201_00003"><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_svg4_600_05906" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="1263" height="427.8908386230469"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur in="BackgroundImage" stdDeviation="2.5"/><feComposite in2="SourceAlpha" operator="in" result="effect1_foregroundBlur"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_foregroundBlur" result="shape"/></filter><linearGradient x1="0.012568394653499126" y1="0.2873583436012268" x2="0.9811341762542725" y2="1" id="master_svg5_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><path d="M540.60205078125,1.5L1030.7210507812501,1.5L1037.79005078125,5.33186L547.67108078125,5.33186L540.60205078125,1.5Z" fill="url(#master_svg0_555_29651)" fill-opacity="1"/></g><g><path d="M1049.572265625,1.5L1249.861265625,1.5L1256.930265625,5.33186L1056.641295625,5.33186L1049.572265625,1.5Z" fill="url(#master_svg1_555_29651)" fill-opacity="1"/></g><g><path d="M1172.10205078125,431.5L1195.66545078125,431.5L1195.66545078125,434.05457L1172.10205078125,434.05457L1172.10205078125,431.5ZM1200.37815078125,431.5L1214.51625078125,431.5L1214.51625078125,434.05457L1200.37815078125,434.05457L1200.37815078125,431.5ZM1231.01065078125,431.5L1219.22895078125,431.5L1219.22895078125,434.05457L1231.01065078125,434.05457L1231.01065078125,431.5Z" fill-rule="evenodd" fill="#8C64E2" fill-opacity="0.8392156958580017"/></g><g><path d="M12.78173828125,423.00410578125L12.78173828125,416.61767578125L24.56343828125,423.00410578125L12.78173828125,423.00410578125Z" fill="#8C64E2" fill-opacity="0.8392156958580017"/></g><g><path d="M1249.8627546875,423.00410578125L1249.8627546875,416.61767578125L1238.0810546875,423.00410578125L1249.8627546875,423.00410578125Z" fill="#8C64E2" fill-opacity="0.8392156958580017"/></g><g transform="matrix(0,1,-1,0,63.8095703125,61.8095703125)"><line x1="1" y1="62.3095703125" x2="367.5810852050781" y2="62.3095703125" stroke="url(#master_svg2_201_00003)" fill-opacity="0" fill="none" stroke-width="1"/></g><g transform="matrix(0,1,-1,0,1324.4541015625,-1198.8349609375)"><line x1="1261.64453125" y1="62.3095703125" x2="1628.2256164550781" y2="62.3095703125" stroke="url(#master_svg3_201_00003)" fill-opacity="0" fill="none" stroke-width="1"/></g><g filter="url(#master_svg4_600_05906)"><path d="M3.80029296875,1.5L531.62129296875,1.5L548.11529296875,11.7183L1266.80029296875,11.7183L1266.80029296875,429.391L3.80029296875,429.391L3.80029296875,1.5Z" fill="#01152A" fill-opacity="0.4000000059604645"/><path d="M2.30029296875,0L2.30029296875,430.891L1268.30029296875,430.891L1268.30029296875,10.21829L548.54229296875,10.21829L532.04829296875,0L2.30029296875,0ZM5.30029296875,427.891L1265.30029296875,427.891L1265.30029296875,13.2183L547.68829296875,13.2183L531.19429296875,3L5.30029296875,3L5.30029296875,427.891Z" fill-rule="evenodd" fill="url(#master_svg5_201_02516)" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="1263" height="433" viewBox="0 0 1263 433"><defs><clipPath id="master_svg0_612_13406"><rect x="0" y="0" width="1263" height="433" rx="0"/></clipPath><filter id="master_svg1_612_13408" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="1265.80029296875" height="432.5545654296875"><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><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><linearGradient x1="0" y1="61.3095703125" x2="0" y2="61.3095703125" 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><linearGradient x1="1260.64453125" y1="61.3095703125" x2="1260.64453125" y2="61.3095703125" gradientUnits="userSpaceOnUse" id="master_svg5_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_svg6_612_13419" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="1263" height="427.8908386230469"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur in="BackgroundImage" stdDeviation="2.5"/><feComposite in2="SourceAlpha" operator="in" result="effect1_foregroundBlur"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_foregroundBlur" result="shape"/></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_612_13406)"><g filter="url(#master_svg1_612_13408)"><g><g><path d="M539.60205078125,0L1029.7210507812501,0L1036.79005078125,3.83186L546.67108078125,3.83186L539.60205078125,0Z" fill="url(#master_svg2_555_29651)" fill-opacity="1"/></g><g><path d="M1048.572265625,0L1248.861265625,0L1255.930265625,3.83186L1055.641295625,3.83186L1048.572265625,0Z" fill="url(#master_svg3_555_29651)" fill-opacity="1"/></g><g><path d="M1171.10205078125,430L1194.66545078125,430L1194.66545078125,432.55457L1171.10205078125,432.55457L1171.10205078125,430ZM1199.37815078125,430L1213.51625078125,430L1213.51625078125,432.55457L1199.37815078125,432.55457L1199.37815078125,430ZM1230.01065078125,430L1218.22895078125,430L1218.22895078125,432.55457L1230.01065078125,432.55457L1230.01065078125,430Z" fill-rule="evenodd" fill="#8C64E2" fill-opacity="0.8392156958580017"/></g><g><path d="M11.78173828125,421.50410578125L11.78173828125,415.11767578125L23.56343828125,421.50410578125L11.78173828125,421.50410578125Z" fill="#8C64E2" fill-opacity="0.8392156958580017"/></g><g><path d="M1248.8627546875,421.50410578125L1248.8627546875,415.11767578125L1237.0810546875,421.50410578125L1248.8627546875,421.50410578125Z" fill="#8C64E2" fill-opacity="0.8392156958580017"/></g><g transform="matrix(0,1,-1,0,61.3095703125,61.3095703125)"><line x1="0" y1="60.8095703125" x2="366.5810852050781" y2="60.8095703125" stroke="url(#master_svg4_185_49104)" fill-opacity="0" fill="none" stroke-width="1"/></g><g transform="matrix(0,1,-1,0,1321.9541015625,-1199.3349609375)"><line x1="1260.64453125" y1="60.8095703125" x2="1627.2256164550781" y2="60.8095703125" stroke="url(#master_svg5_185_49104)" fill-opacity="0" fill="none" stroke-width="1"/></g><g filter="url(#master_svg6_612_13419)"><path d="M2.80029296875,0L530.62129296875,0L547.11529296875,10.2183L1265.80029296875,10.2183L1265.80029296875,427.891L2.80029296875,427.891L2.80029296875,0Z" fill="#01152A" fill-opacity="0.4000000059604645"/><path d="M1.30029296875,-1.5L1.30029296875,429.391L1267.30029296875,429.391L1267.30029296875,8.71829L547.54229296875,8.71829L531.04829296875,-1.5L1.30029296875,-1.5ZM4.30029296875,426.391L1264.30029296875,426.391L1264.30029296875,11.7183L546.68829296875,11.7183L530.19429296875,1.5L4.30029296875,1.5L4.30029296875,426.391Z" 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/Monitor/TopRight/ItemBox.svg b/src/assets/svg/Monitor/TopRight/ItemBox.svg
index c741a0e..3c61f08 100644
--- a/src/assets/svg/Monitor/TopRight/ItemBox.svg
+++ b/src/assets/svg/Monitor/TopRight/ItemBox.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="136.002197265625" height="106" viewBox="0 0 136.002197265625 106"><defs><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg0_185_29425"><stop offset="0%" stop-color="#006DAB" stop-opacity="0.30000001192092896"/><stop offset="100%" stop-color="#00669F" stop-opacity="1"/></linearGradient></defs><g><path d="" fill="#2D126F" fill-opacity="0"/><path d="M0,0L135.856,0L136.002,100.633L127.002,106L8.0022,106L0.00219727,100.633L0,1L0,0ZM134.858,1L135.001,100.065L126.727,105L8.30656,105L1.00219,100.1L1.00002,1L134.858,1Z" fill-rule="evenodd" fill="url(#master_svg0_185_29425)" fill-opacity="1"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="138" height="108" viewBox="0 0 138 108"><defs><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg0_123_00047"><stop offset="0%" stop-color="#006DAB" stop-opacity="0.30000001192092896"/><stop offset="100%" stop-color="#00669F" stop-opacity="1"/></linearGradient><linearGradient x1="-2.032271242567371e-14" y1="0.9999873042106628" x2="0.9840425848960876" y2="0.9999790191650391" id="master_svg1_117_02771"><stop offset="0%" stop-color="#006DAB" stop-opacity="0"/><stop offset="51.5625%" stop-color="#006DAB" stop-opacity="1"/><stop offset="100%" stop-color="#006DAB" stop-opacity="0"/></linearGradient></defs><g><g><g><path d="" fill="#2D126F" fill-opacity="0"/><path d="M1,1L136.856,1L137.002,101.633L128.002,107L9.0022,107L1.00219727,101.633L1,2L1,1ZM135.858,2L136.001,101.065L127.727,106L9.30656,106L2.0021899999999997,101.1L2.00002,2L135.858,2Z" fill-rule="evenodd" fill="url(#master_svg0_123_00047)" fill-opacity="1"/></g><g><g><g transform="matrix(0,1,-1,0,55,35)"><path d="M14.5,45L18.397109999999998,51.75L10.602886,51.75L14.5,45Z" fill="#006DAB" fill-opacity="1"/></g><g><rect x="5" y="49" width="128" height="1" rx="0" fill="url(#master_svg1_117_02771)" fill-opacity="1"/></g><g transform="matrix(0,1,1,0,83,-83)"><path d="M132.5,45L136.39711,51.75L128.602886,51.75L132.5,45Z" fill="#006DAB" fill-opacity="1"/></g></g></g></g><g><g><path d="M2,2L9,2L9,0L0,0L0,9L2,9L2,2Z" fill-rule="evenodd" fill="#5D49AF" fill-opacity="1"/></g><g transform="matrix(1,0,0,-1,0,214)"><path d="M10.30437,108L19,108L19,106L9.69563,106L0,112.50466L0,119.0759L2,119.0759L2,113.57128L6.05712,110.84942L10.30437,108Z" fill-rule="evenodd" fill="#5D49AF" fill-opacity="1"/></g><g transform="matrix(-1,0,0,-1,274,214)"><path d="M146.30437,108L155,108L155,106L145.69563,106L136,112.50466L136,119.0759L138,119.0759L138,113.57128L142.05712,110.84942L146.30437,108Z" fill-rule="evenodd" fill="#5D49AF" fill-opacity="1"/></g><g transform="matrix(-1,0,0,1,274,0)"><path d="M138,2L145,2L145,0L136,0L136,9L138,9L138,2Z" fill-rule="evenodd" fill="#5D49AF" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/Monitor/TopRight/ItemBoxBorder.svg b/src/assets/svg/Monitor/TopRight/ItemBoxBorder.svg
deleted file mode 100644
index 9f78a46..0000000
--- a/src/assets/svg/Monitor/TopRight/ItemBoxBorder.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="138" height="108" viewBox="0 0 138 108"><g><g><path d="M2,2L9,2L9,0L0,0L0,9L2,9L2,2Z" fill-rule="evenodd" fill="#5D49AF" fill-opacity="1"/></g><g transform="matrix(1,0,0,-1,0,214)"><path d="M10.30437,108L19,108L19,106L9.69563,106L0,112.50466L0,119.0759L2,119.0759L2,113.57128L6.05712,110.84942L10.30437,108Z" fill-rule="evenodd" fill="#5D49AF" fill-opacity="1"/></g><g transform="matrix(-1,0,0,-1,274,214)"><path d="M146.30437,108L155,108L155,106L145.69563,106L136,112.50466L136,119.0759L138,119.0759L138,113.57128L142.05712,110.84942L146.30437,108Z" fill-rule="evenodd" fill="#5D49AF" fill-opacity="1"/></g><g transform="matrix(-1,0,0,1,274,0)"><path d="M138,2L145,2L145,0L136,0L136,9L138,9L138,2Z" fill-rule="evenodd" fill="#5D49AF" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/Monitor/BottomLeft/Triangle.svg b/src/assets/svg/Monitor/Triangle.svg
similarity index 100%
rename from src/assets/svg/Monitor/BottomLeft/Triangle.svg
rename to src/assets/svg/Monitor/Triangle.svg
diff --git a/src/views/pageMonitor/bottomLeft/index.vue b/src/views/pageMonitor/bottomLeft/index.vue
index b8d6729..e76bd78 100644
--- a/src/views/pageMonitor/bottomLeft/index.vue
+++ b/src/views/pageMonitor/bottomLeft/index.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="w-[51.29vh] h-[40.09vh] bgBottomLeftBox mt-[2.68vh] relative">
     <div class="w-[12.4vh] h-[5.07vh] ml-[1.85vh] flex justify-between items-center">
-      <img src="@/assets/svg/Monitor/BottomLeft/Triangle.svg" />
+      <img src="@/assets/svg/Monitor/Triangle.svg" />
       <span class="text-[2.03vh] youshe leading-none">手术量统计</span>
     </div>
     <div class="w-[42.96vh] h-[27.12vh] ml-[2.96vh] my-[3.7vh] border border-orange-500" ref="echartsContainer"></div>
-    <div class="absolute right-0 top-1/2 -translate-y-1/2 w-[3.51vh] h-[12.6vh] bgWeekBox">
+    <div class="absolute right-0 top-1/4 w-[3.51vh] h-[12.6vh] bgWeekBox">
       <div class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1]">周</div>
       <div class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1]">月</div>
     </div>
diff --git a/src/views/pageMonitor/bottomMiddle/index.vue b/src/views/pageMonitor/bottomMiddle/index.vue
index f5d6423..b541170 100644
--- a/src/views/pageMonitor/bottomMiddle/index.vue
+++ b/src/views/pageMonitor/bottomMiddle/index.vue
@@ -1,9 +1,100 @@
 <template>
-  <div class="w-[71.57vh]"></div>
+  <div class="w-[71.58vh] h-[40.09vh] bgBottomMidBox mt-[2.68vh] relative">
+    <div class="flex">
+      <div class="w-[12.4vh] h-[5.07vh] ml-[1.85vh] flex justify-between items-center">
+        <img src="@/assets/svg/Monitor/Triangle.svg" />
+        <span class="text-[2.03vh] youshe leading-none">手术等级</span>
+      </div>
+      <div class="w-[12.4vh] h-[5.07vh] ml-[27vh] flex justify-between items-center">
+        <img src="@/assets/svg/Monitor/Triangle.svg" />
+        <span class="text-[2.03vh] youshe leading-none">ASA分级</span>
+      </div>
+    </div>
+    <section class="flex mt-[4.81vh]">
+      <div class="w-[35.79vh] h-[24.62vh] border-r border-dashed border-r-[rgba(255,255,255,0.26)]">
+        <div class="h-full" ref="echartsContainerLeft"></div>
+      </div>
+      <div class="w-[35.79vh] h-[24.62vh]">
+        <div class="h-full" ref="echartsContainerRight"></div>
+      </div>
+    </section>
+  </div>
 </template>
 
 <script>
-export default {};
+import * as echarts from 'echarts';
+export default {
+  data() {
+    return {
+      nowIndex: 0,
+      chartOptionsLeft: {
+        series: [
+          {
+            type: 'pie',
+            radius: ['32%', '50%'],
+            selectedMode: 'single',
+            data: [
+              { name: '一级', value: 148, selected: true },
+              { name: '二级', value: 87, selected: false },
+              { name: '三级', value: 75, selected: false },
+              { name: '四级', value: 40, selected: false },
+            ],
+            label: {
+              formatter: '{b}{c}',
+              color: 'inherit',
+            },
+          },
+        ],
+      },
+      chartOptionsRight: {
+        series: [
+          {
+            type: 'pie',
+            radius: ['32%', '50%'],
+            selectedMode: 'single',
+            data: [
+              { name: 'I级', value: 137, selected: true },
+              { name: 'II级', value: 105, selected: false },
+              { name: 'III级', value: 58, selected: false },
+              { name: 'IV级', value: 37, selected: false },
+              { name: 'V级', value: 13, selected: false },
+            ],
+            label: {
+              formatter: '{b}{c}',
+              color: 'inherit',
+            },
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    const echartsContainerLeft = this.$refs.echartsContainerLeft;
+    const chartLeft = echarts.init(echartsContainerLeft);
+    chartLeft.setOption(this.chartOptionsLeft);
+    const echartsContainerRight = this.$refs.echartsContainerRight;
+    const chartRight = echarts.init(echartsContainerRight);
+    chartRight.setOption(this.chartOptionsRight);
+    setInterval(() => {
+      let lastIndex = this.nowIndex++;
+      const leftData = this.chartOptionsLeft['series'][0]['data'];
+      leftData[lastIndex % 4]['selected'] = false;
+      leftData[this.nowIndex % 4]['selected'] = true;
+      chartLeft.setOption(this.chartOptionsLeft, true);
+      const rightData = this.chartOptionsRight['series'][0]['data'];
+      rightData[lastIndex % 5]['selected'] = false;
+      rightData[this.nowIndex % 5]['selected'] = true;
+      chartRight.setOption(this.chartOptionsRight, true);
+    }, 2000);
+  },
+};
 </script>
 
-<style></style>
+<style>
+.bgBottomMidBox {
+  background-image: url('@/assets/svg/Monitor/BottomMid/Box.svg');
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+</style>
diff --git a/src/views/pageMonitor/bottomRight/index.vue b/src/views/pageMonitor/bottomRight/index.vue
index d05cecc..6256f28 100644
--- a/src/views/pageMonitor/bottomRight/index.vue
+++ b/src/views/pageMonitor/bottomRight/index.vue
@@ -1,9 +1,68 @@
 <template>
-  <div class="w-[41.75vh]"></div>
+  <div class="w-[41.75vh] h-[40.09vh] bgBottomRightBox mt-[2.68vh] relative">
+    <div class="w-[20.8vh] h-[5.07vh] ml-[1.85vh] flex justify-between items-center">
+      <img src="@/assets/svg/Monitor/Triangle.svg" />
+      <span class="text-[2.03vh] youshe leading-none">科室手术量统计(前五)</span>
+    </div>
+    <div class="w-[35.46vh] h-[28.05vh] ml-[2.4vh] my-[3.7vh] border border-orange-500" ref="echartsContainer"></div>
+    <div class="absolute right-0 top-1/4 w-[3.51vh] h-[12.6vh] bgWeekBox">
+      <div class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1]">周</div>
+      <div class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1]">月</div>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {};
+import * as echarts from 'echarts';
+export default {
+  data() {
+    return {
+      chartOptions: {
+        grid: {
+          left: '0%',
+          right: '0%',
+          top: '0%',
+          bottom: '10%',
+        },
+        xAxis: {
+          type: 'category',
+          data: ['骨科', '心胸外科', '普通外科', '神经外科', '整形外科'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [180, 165, 155, 148, 137],
+            type: 'bar',
+            barWidth: '10%',
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    const echartsContainer = this.$refs.echartsContainer;
+    const chartLeft = echarts.init(echartsContainer);
+    chartLeft.setOption(this.chartOptions);
+  },
+};
 </script>
 
-<style></style>
+<style>
+.bgBottomRightBox {
+  background-image: url('@/assets/svg/Monitor/BottomRight/Box.svg');
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.bgWeekBox {
+  background-image: url('@/assets/svg/Monitor/BottomLeft/WeekActive.svg');
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.bgMonthBox {
+  background-image: url('@/assets/svg/Monitor/BottomLeft/MonthActive.svg');
+}
+</style>
diff --git a/src/views/pageMonitor/topRight/index.vue b/src/views/pageMonitor/topRight/index.vue
index 88a5043..25c2c8c 100644
--- a/src/views/pageMonitor/topRight/index.vue
+++ b/src/views/pageMonitor/topRight/index.vue
@@ -66,8 +66,9 @@ export default {
     }
   }
 }
+
 .ItemBox {
-  background-image: url('@/assets/svg/Monitor/TopRight/ItemBox.svg'), url('@/assets/svg/Monitor/TopRight/ItemBoxBorder.svg');
+  background-image: url('@/assets/svg/Monitor/TopRight/ItemBox.svg');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;