yin.wei
/
bigScreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: 重构运营监控页面

Browse Source
main
@0Melon0 2 years ago
parent bd4d6c94b1
commit b34677ad4d
19 changed files with 336 additions and 140 deletions
Show Stats Download Patch File Download Diff File

6
src/App.vue
Unescape View File

@ -53,6 +53,10 @@ export default {
font-family: 'DIN-Bold'; font-family: 'DIN-Bold';
src: url('@/assets/fonts/DIN-Bold.otf') format('opentype'); src: url('@/assets/fonts/DIN-Bold.otf') format('opentype');
} }
@font-face {
font-family: 'YouSheBiaoTiHei';
src: url('@/assets/fonts/YouSheBiaoTiHei.ttf') format('opentype');
}
.numFont { .numFont {
font-family: 'DIN-Bold'; font-family: 'DIN-Bold';
@ -63,7 +67,7 @@ export default {
text-decoration: none; text-decoration: none;
list-style: none; list-style: none;
color: #fff; color: #fff;
font-family: Microsoft YaHei; font-family: 'YouSheBiaoTiHei', Microsoft YaHei;
} }
.app { .app {
width: 100%; width: 100%;

BIN
src/assets/fonts/YouSheBiaoTiHei.ttf
View File

Binary file not shown.

17
src/assets/fonts/iconfont.css
Unescape View File

@ -0,0 +1,17 @@
@font-face {
font-family: "iconfont"; /* Project id */
src: url('iconfont.ttf?t=1701073554125') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-youjiantou:before {
content: "\e619";
}

BIN
src/assets/fonts/iconfont.ttf
View File

Binary file not shown.

3
src/assets/scss/pxtovh.scss
Unescape View File

@ -0,0 +1,3 @@
@function vh($px) {
@return $px/1080 * 100vh;
}

1
src/assets/svg/blueBox.svg
Unescape View File

@ -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="142" height="162" viewBox="0 0 142 162"><defs><linearGradient x1="0.5" y1="1" x2="0.5" y2="0" id="master_svg0_134_09601"><stop offset="0%" stop-color="#000000" stop-opacity="0.10196078568696976"/><stop offset="100%" stop-color="#23FFFC" stop-opacity="0.10196078568696976"/></linearGradient></defs><g><g transform="matrix(-1,0,0,1,282,0)"><path d="M141,161L273.473,161L281,152.695L281,1L195.1936,1L189.4229,7.36678L183.6523,13.7336L150.03226,13.7336L141,26.4671L141,161Z" fill="url(#master_svg0_134_09601)" fill-opacity="1"/><path d="M194.9719,0.5L189.0525,7.031L183.4307,13.2336L149.77391,13.2336L140.5,26.3078L140.5,161.5L273.695,161.5L281.5,152.888L281.5,0.5L194.9719,0.5ZM183.874,14.2336L189.7934,7.70256L195.4152,1.5L280.5,1.5L280.5,152.503L273.251,160.5L141.5,160.5L141.5,26.6265L150.29061,14.2336L183.874,14.2336Z" fill-rule="evenodd" fill="#094277" fill-opacity="1"/></g><g><g><path d="M97,1C97,1,102,1,102,1C102,1,109,8.15967,109,8.15967C109,8.15967,104,8.15967,104,8.15967C104,8.15967,97,1,97,1Z" fill="#0592FF" fill-opacity="1"/></g><g><path d="M106,1C106,1,111,1,111,1C111,1,118,8.15967,118,8.15967C118,8.15967,113,8.15967,113,8.15967C113,8.15967,106,1,106,1Z" fill="#0592FF" fill-opacity="1"/></g><g><path d="M115,1C115,1,120,1,120,1C120,1,127,8.15967,127,8.15967C127,8.15967,122,8.15967,122,8.15967" fill="#0592FF" fill-opacity="1"/></g></g><g><g><path d="M2,2L13,2L13,0L0,0L0,13L2,13L2,2Z" fill-rule="evenodd" fill="#0592FF" fill-opacity="1"/></g><g transform="matrix(-1,0,0,-1,282,322)"><path d="M142,162L153,162L153,160L140,160L140,173L142,173L142,162Z" fill-rule="evenodd" fill="#0592FF" 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="#0592FF" fill-opacity="1"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

1
src/assets/svg/blueTriangle.svg
Unescape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="22" viewBox="0 0 20 22"><defs><linearGradient x1="0.02499999664723873" y1="0.04545453190803528" x2="0.9749999642372131" y2="0.9999999403953552" id="master_svg0_134_10672"><stop offset="0%" stop-color="#3C88E3" stop-opacity="1"/><stop offset="100%" stop-color="#9FDAF8" stop-opacity="1"/></linearGradient><linearGradient x1="0.02499999664723873" y1="0.04545453563332558" x2="0.875" y2="1" id="master_svg1_134_10669"><stop offset="0%" stop-color="#002F60" stop-opacity="1"/><stop offset="100%" stop-color="#62B3EE" stop-opacity="1"/></linearGradient></defs><g><g><path d="M0,0C0,0,20,11,20,11C20,11,7,11,7,11C7,11,0,0,0,0C0,0,0,0,0,0Z" fill="url(#master_svg0_134_10672)" fill-opacity="1"/></g><g transform="matrix(1,0,0,-1,0,44)"><path d="M0,22C0,22,20,33,20,33C20,33,7,33,7,33C7,33,0,22,0,22C0,22,0,22,0,22Z" fill="url(#master_svg1_134_10669)" fill-opacity="1"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1003 B

1
src/assets/svg/endIcon.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

1
src/assets/svg/endRoom.svg
Unescape View File

@ -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="137" height="107" viewBox="0 0 137 107"><defs><filter id="master_svg0_134_13667" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="136.002197265625" height="106"><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="10"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0.40392157435417175 0 0 0 0 0.7607843279838562 0 0 0 0 0.22745098173618317 0 0 0 1 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow"/></filter><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_123_00043"><stop offset="0%" stop-color="#004880" stop-opacity="0"/><stop offset="99.98999834060669%" stop-color="#004A80" stop-opacity="0.3499999940395355"/><stop offset="100%" stop-color="#004A80" stop-opacity="0.3499999940395355"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg2_117_00562"><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_svg3_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 filter="url(#master_svg0_134_13667)"><path d="M136.356,0.5C136.356,0.5,0.5,0.5,0.5,0.5C0.5,0.5,0.50219727,101.133,0.50219727,101.133C0.50219727,101.133,8.5022,106.5,8.5022,106.5C8.5022,106.5,17.482,106.5,17.482,106.5C17.482,106.5,34.4641,106.5,34.4641,106.5C34.4641,106.5,68.4282,106.5,68.4282,106.5C68.4282,106.5,102.392,106.5,102.392,106.5C102.392,106.5,119.374,106.5,119.374,106.5C119.374,106.5,127.502,106.5,127.502,106.5C127.502,106.5,136.502,101.133,136.502,101.133C136.502,101.133,136.356,0.5,136.356,0.5Z" fill="url(#master_svg1_123_00043)" fill-opacity="1"/><path d="M0.5,0.5L136.356,0.5L136.502,101.133L127.502,106.5L8.5022,106.5L0.50219727,101.133L0.5,2.5L0.5,0.5ZM134.359,2.5L134.501,99.998L126.951,104.5L9.11093,104.5L2.50217,100.0663L2.50004,2.5L134.359,2.5Z" fill-rule="evenodd" fill="url(#master_svg2_117_00562)" fill-opacity="1"/></g><g><g><path d="M1,1L8.5,1L8.5,0L0,0L0,8.5L1,8.5L1,1Z" fill-rule="evenodd" fill="#8FED60" fill-opacity="1"/></g><g transform="matrix(1,0,0,-1,0,213)"><path d="M9.65218,107L18.5,107L18.5,106L9.34782,106L0,112.27132L0,118.5759L1,118.5759L1,112.80463L5.27856,109.9342L9.65218,107Z" fill-rule="evenodd" fill="#8FED60" fill-opacity="1"/></g><g transform="matrix(-1,0,0,-1,273,213)"><path d="M145.65218,107L154.5,107L154.5,106L145.34782,106L136,112.27132L136,118.5759L137,118.5759L137,112.80463L141.27856,109.9342L145.65218,107Z" fill-rule="evenodd" fill="#8FED60" fill-opacity="1"/></g><g transform="matrix(-1,0,0,1,273,0)"><path d="M137,1L144.5,1L144.5,0L136,0L136,8.5L137,8.5L137,1Z" fill-rule="evenodd" fill="#8FED60" fill-opacity="1"/></g></g><g><g transform="matrix(0,1,-1,0,54,35)"><path d="M14,44.5L17.897109999999998,51.25L10.102886,51.25L14,44.5Z" fill="#388764" fill-opacity="1"/></g><g><rect x="4.5" y="48.5" width="128" height="1" rx="0" fill="url(#master_svg3_117_02771)" fill-opacity="1"/></g><g transform="matrix(0,1,1,0,83,-83)"><path d="M132,44.5L135.89711,51.25L128.102886,51.25L132,44.5Z" fill="#388764" fill-opacity="1"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

1
src/assets/svg/greenBox.svg
Unescape View File

@ -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"><defs><linearGradient x1="0.5" y1="1" x2="0.5" y2="0" id="master_svg0_134_09601"><stop offset="0%" stop-color="#000000" stop-opacity="0.10196078568696976"/><stop offset="100%" stop-color="#23FFFC" stop-opacity="0.10196078568696976"/></linearGradient></defs><g><g transform="matrix(-1,0,0,1,978,0)"><path d="M489,161L969.4649999999999,161L977,153.474L977,1L553.0531,1L547.2766,6.7699L541.5,12.5398L498.04149,12.5398L489,24.0796L489,161Z" fill="url(#master_svg0_134_09601)" fill-opacity="1"/><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="#055843" 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="#67C23A" 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="#67C23A" 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="#67C23A" 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="#67C23A" 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="#67C23A" fill-opacity="1"/></g><g><path d="M2,2L13,2L13,0L0,0L0,13L2,13L2,2Z" fill-rule="evenodd" fill="#67C23A" 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="#67C23A" fill-opacity="1"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

1
src/assets/svg/greenPoint.svg
Unescape View File

@ -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_134_13328" 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_134_11765"><stop offset="0%" stop-color="#03F0B4" stop-opacity="1"/><stop offset="100%" stop-color="#6FB6FA" stop-opacity="0"/></linearGradient><filter id="master_svg2_134_13327" 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_134_13328)"><ellipse cx="8.5" cy="8" rx="5" ry="5" fill="url(#master_svg1_134_11765)" fill-opacity="1"/></g><g filter="url(#master_svg2_134_13327)"><ellipse cx="8.5" cy="8" rx="2.5" ry="2.5" fill="#03F0B4" fill-opacity="1"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

1
src/assets/svg/greenTriangle.svg
Unescape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="22" viewBox="0 0 20 22"><defs><linearGradient x1="0.02499999664723873" y1="0.04545453190803528" x2="0.9749999642372131" y2="0.9999999403953552" id="master_svg0_134_12943"><stop offset="0%" stop-color="#42EABF" stop-opacity="1"/><stop offset="100%" stop-color="#9FF8EF" stop-opacity="1"/></linearGradient><linearGradient x1="0.02499999664723873" y1="0.04545453563332558" x2="0.875" y2="1" id="master_svg1_134_12937"><stop offset="0%" stop-color="#00694E" stop-opacity="1"/><stop offset="100%" stop-color="#62EEE9" stop-opacity="1"/></linearGradient></defs><g><g><path d="M0,0C0,0,20,11,20,11C20,11,7,11,7,11C7,11,0,0,0,0C0,0,0,0,0,0Z" fill="url(#master_svg0_134_12943)" fill-opacity="0.800000011920929"/></g><g transform="matrix(1,0,0,-1,0,44)"><path d="M0,22C0,22,20,33,20,33C20,33,7,33,7,33C7,33,0,22,0,22C0,22,0,22,0,22Z" fill="url(#master_svg1_134_12937)" fill-opacity="0.800000011920929"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
src/assets/svg/opreationIcon.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

1
src/assets/svg/opreationRoom.svg
Unescape View File

@ -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="137" height="107" viewBox="0 0 137 107"><defs><filter id="master_svg0_134_13483" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="136.002197265625" height="106"><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="10"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.5215686559677124 0 0 0 0 0.08235294371843338 0 0 0 1 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow"/></filter><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_123_00043"><stop offset="0%" stop-color="#004880" stop-opacity="0"/><stop offset="99.98999834060669%" stop-color="#004A80" stop-opacity="0.3499999940395355"/><stop offset="100%" stop-color="#004A80" stop-opacity="0.3499999940395355"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg2_117_00562"><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_svg3_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 filter="url(#master_svg0_134_13483)"><path d="M136.356,0.5C136.356,0.5,0.5,0.5,0.5,0.5C0.5,0.5,0.50219727,101.133,0.50219727,101.133C0.50219727,101.133,8.5022,106.5,8.5022,106.5C8.5022,106.5,17.482,106.5,17.482,106.5C17.482,106.5,34.4641,106.5,34.4641,106.5C34.4641,106.5,68.4282,106.5,68.4282,106.5C68.4282,106.5,102.392,106.5,102.392,106.5C102.392,106.5,119.374,106.5,119.374,106.5C119.374,106.5,127.502,106.5,127.502,106.5C127.502,106.5,136.502,101.133,136.502,101.133C136.502,101.133,136.356,0.5,136.356,0.5Z" fill="url(#master_svg1_123_00043)" fill-opacity="1"/><path d="M0.5,0.5L136.356,0.5L136.502,101.133L127.502,106.5L8.5022,106.5L0.50219727,101.133L0.5,2.5L0.5,0.5ZM134.359,2.5L134.501,99.998L126.951,104.5L9.11093,104.5L2.50217,100.0663L2.50004,2.5L134.359,2.5Z" fill-rule="evenodd" fill="url(#master_svg2_117_00562)" fill-opacity="1"/></g><g><g><path d="M1,1L8.5,1L8.5,0L0,0L0,8.5L1,8.5L1,1Z" fill-rule="evenodd" fill="#FF9A3D" fill-opacity="1"/></g><g transform="matrix(1,0,0,-1,0,213)"><path d="M9.65218,107L18.5,107L18.5,106L9.34782,106L0,112.27132L0,118.5759L1,118.5759L1,112.80463L5.27856,109.9342L9.65218,107Z" fill-rule="evenodd" fill="#FF9A3D" fill-opacity="1"/></g><g transform="matrix(-1,0,0,-1,273,213)"><path d="M145.65218,107L154.5,107L154.5,106L145.34782,106L136,112.27132L136,118.5759L137,118.5759L137,112.80463L141.27856,109.9342L145.65218,107Z" fill-rule="evenodd" fill="#FF9A3D" fill-opacity="1"/></g><g transform="matrix(-1,0,0,1,273,0)"><path d="M137,1L144.5,1L144.5,0L136,0L136,8.5L137,8.5L137,1Z" fill-rule="evenodd" fill="#FF9A3D" fill-opacity="1"/></g></g><g><g transform="matrix(0,1,-1,0,54,35)"><path d="M14,44.5L17.897109999999998,51.25L10.102886,51.25L14,44.5Z" fill="#A57447" fill-opacity="1"/></g><g><rect x="4.5" y="48.5" width="128" height="1" rx="0" fill="url(#master_svg3_117_02771)" fill-opacity="1"/></g><g transform="matrix(0,1,1,0,83,-83)"><path d="M132,44.5L135.89711,51.25L128.102886,51.25L132,44.5Z" fill="#A57447" fill-opacity="1"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

1
src/assets/svg/waitIcon.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

1
src/assets/svg/waitRoom.svg
Unescape View File

@ -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="137" height="107" viewBox="0 0 137 107"><defs><filter id="master_svg0_134_13680" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="136.002197265625" height="106"><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="10"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.5686274766921997 0 0 0 0 0.9843137264251709 0 0 0 1 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow"/></filter><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_123_00043"><stop offset="0%" stop-color="#004880" stop-opacity="0"/><stop offset="99.98999834060669%" stop-color="#004A80" stop-opacity="0.3499999940395355"/><stop offset="100%" stop-color="#004A80" stop-opacity="0.3499999940395355"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg2_117_00562"><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_svg3_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 filter="url(#master_svg0_134_13680)"><path d="M136.356,0.5C136.356,0.5,0.5,0.5,0.5,0.5C0.5,0.5,0.50219727,101.133,0.50219727,101.133C0.50219727,101.133,8.5022,106.5,8.5022,106.5C8.5022,106.5,17.482,106.5,17.482,106.5C17.482,106.5,34.4641,106.5,34.4641,106.5C34.4641,106.5,68.4282,106.5,68.4282,106.5C68.4282,106.5,102.392,106.5,102.392,106.5C102.392,106.5,119.374,106.5,119.374,106.5C119.374,106.5,127.502,106.5,127.502,106.5C127.502,106.5,136.502,101.133,136.502,101.133C136.502,101.133,136.356,0.5,136.356,0.5Z" fill="url(#master_svg1_123_00043)" fill-opacity="1"/><path d="M0.5,0.5L136.356,0.5L136.502,101.133L127.502,106.5L8.5022,106.5L0.50219727,101.133L0.5,2.5L0.5,0.5ZM134.359,2.5L134.501,99.998L126.951,104.5L9.11093,104.5L2.50217,100.0663L2.50004,2.5L134.359,2.5Z" fill-rule="evenodd" fill="url(#master_svg2_117_00562)" fill-opacity="1"/></g><g><g><path d="M1,1L8.5,1L8.5,0L0,0L0,8.5L1,8.5L1,1Z" fill-rule="evenodd" fill="#49E4FA" fill-opacity="1"/></g><g transform="matrix(1,0,0,-1,0,213)"><path d="M9.65218,107L18.5,107L18.5,106L9.34782,106L0,112.27132L0,118.5759L1,118.5759L1,112.80463L5.27856,109.9342L9.65218,107Z" fill-rule="evenodd" fill="#49E4FA" fill-opacity="1"/></g><g transform="matrix(-1,0,0,-1,273,213)"><path d="M145.65218,107L154.5,107L154.5,106L145.34782,106L136,112.27132L136,118.5759L137,118.5759L137,112.80463L141.27856,109.9342L145.65218,107Z" fill-rule="evenodd" fill="#49E4FA" fill-opacity="1"/></g><g transform="matrix(-1,0,0,1,273,0)"><path d="M137,1L144.5,1L144.5,0L136,0L136,8.5L137,8.5L137,1Z" fill-rule="evenodd" fill="#49E4FA" fill-opacity="1"/></g></g><g><g transform="matrix(0,1,-1,0,54,35)"><path d="M14,44.5L17.897109999999998,51.25L10.102886,51.25L14,44.5Z" fill="#006DAB" fill-opacity="1"/></g><g><rect x="4.5" y="48.5" width="128" height="1" rx="0" fill="url(#master_svg3_117_02771)" fill-opacity="1"/></g><g transform="matrix(0,1,1,0,83,-83)"><path d="M132,44.5L135.89711,51.25L128.102886,51.25L132,44.5Z" fill="#006DAB" fill-opacity="1"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

102
src/views/pageMonitor/bottomLeft/index.vue
Unescape View File

@ -4,11 +4,11 @@
<div class="chartsBox"> <div class="chartsBox">
<div class="chartItem"> <div class="chartItem">
<p>手术等级</p> <p>手术等级</p>
<dv-charts :option="option1"></dv-charts> <div class="echartsContainer" ref="echartsContainerLeft"></div>
</div> </div>
<div class="chartItem"> <div class="chartItem">
<p>ASA分级</p> <p>ASA分级</p>
<dv-charts :option="option2"></dv-charts> <div class="echartsContainer" ref="echartsContainerRight"></div>
</div> </div>
</div> </div>
</dv-border-box-13> </dv-border-box-13>
@ -16,83 +16,71 @@
</template> </template>
<script> <script>
import * as echarts from 'echarts';
export default { export default {
data() { data() {
return { return {
option1: { nowIndex: 0,
chartOptionsLeft: {
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['32%', '44%'], radius: ['32%', '50%'],
selectedMode: 'single',
data: [ data: [
{ { name: '一级', value: 148, selected: true },
name: '一级', { name: '二级', value: 87, selected: false },
value: 148, { name: '三级', value: 75, selected: false },
}, { name: '四级', value: 40, selected: false },
{
name: '二级',
value: 87,
},
{
name: '三级',
value: 75,
},
{
name: '四级',
value: 40,
},
], ],
outsideLabel: { label: {
formatter: '{name}{value}', formatter: '{b}{c}',
labelLineBendGap: '8%', color: 'inherit',
labelLineEndLength: 10,
style: {
fontSize: 16,
},
}, },
}, },
], ],
}, },
option2: { chartOptionsRight: {
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['32%', '44%'], radius: ['32%', '50%'],
selectedMode: 'single',
data: [ data: [
{ { name: 'I级', value: 137, selected: true },
name: 'I级', { name: 'II级', value: 105, selected: false },
value: 137, { name: 'III级', value: 58, selected: false },
}, { name: 'IV级', value: 37, selected: false },
{ { name: 'V级', value: 13, selected: false },
name: 'II级',
value: 105,
},
{
name: 'III级',
value: 58,
},
{
name: 'IV级',
value: 37,
},
{
name: 'V级',
value: 13,
},
], ],
outsideLabel: { label: {
formatter: '{name}{value}', formatter: '{b}{c}',
labelLineBendGap: '8%', color: 'inherit',
labelLineEndLength: 10,
style: {
fontSize: 16,
},
}, },
}, },
], ],
}, },
}; };
}, },
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> </script>
@ -117,7 +105,7 @@ export default {
text-align: center; text-align: center;
letter-spacing: 0.1vh; letter-spacing: 0.1vh;
} }
:deep(.dv-charts-container) { .echartsContainer {
height: 90%; height: 90%;
} }
} }

202
src/views/pageMonitor/topLeft/index.vue
Unescape View File

@ -1,25 +1,50 @@
<template> <template>
<div class="topLeft"> <div class="topLeft">
<dv-border-box-13> <dv-border-box-13>
<div class="box"> <section>
<dv-border-box-2 class="item"> <nav>
<p class="active numFont">80%</p> <div>
<p>首台准点率</p> <img src="@/assets/svg/blueTriangle.svg" />
</dv-border-box-2> <p>首台准点率</p>
<dv-border-box-2 class="item"> <p>80<span>%</span></p>
<p class="active numFont">86%</p> </div>
<p>手术间利用率</p> <div>
</dv-border-box-2> <img src="@/assets/svg/blueTriangle.svg" />
<dv-border-box-2 class="item"> <p>手术间利用率</p>
<p>总人数 <span class="numFont">350</span></p> <p>86<span>%</span></p>
<p>进行中 <span class="numFont">50</span></p> </div>
<p>待进行 <span class="numFont">220</span></p> <div>
</dv-border-box-2> <img src="@/assets/svg/blueTriangle.svg" />
<dv-border-box-2 class="item"> <p>急诊患者</p>
<p class="active numFont">50个</p> <p>180<span>个</span></p>
<p>急诊患者</p> </div>
</dv-border-box-2> </nav>
</div> <div class="bottomBox">
<section>
<div class="leftBox">
<img src="@/assets/svg/greenTriangle.svg" />
<p>总人数</p>
</div>
<div class="rightBox">
<div>
<img src="@/assets/svg/greenPoint.svg" />
<p>进行中</p>
</div>
<p>50<span>人</span></p>
</div>
</section>
<section class="numBox">
<div class="leftBox">350</div>
<div class="rightBox">
<div>
<img src="@/assets/svg/greenPoint.svg" />
<p>待进行</p>
</div>
<p>300<span>人</span></p>
</div>
</section>
</div>
</section>
</dv-border-box-13> </dv-border-box-13>
</div> </div>
</template> </template>
@ -33,52 +58,123 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/assets/scss/pxtovh.scss';
.topLeft { .topLeft {
flex-basis: 30%; flex-basis: 30%;
.box { section {
height: 100%; height: 100%;
display: flex; padding: vh(46) vh(32);
flex-wrap: wrap;
justify-content: space-evenly;
align-content: space-evenly;
padding: 2vh;
box-sizing: border-box; box-sizing: border-box;
.item { nav {
flex-basis: 45%; display: flex;
flex-shrink: 0; justify-content: space-between;
height: 40%; div {
width: vh(140);
height: vh(160);
background-image: url('@/assets/svg/blueBox.svg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: vh(10) vh(16);
box-sizing: border-box;
img {
width: vh(20);
}
p:first-of-type {
margin-top: vh(12);
margin-bottom: vh(18);
font-size: vh(16);
color: #fff;
font-family: Source Han Sans;
letter-spacing: 3px;
font-weight: normal;
white-space: nowrap;
}
p:last-of-type {
font-size: vh(46);
line-height: vh(46);
color: #0592ff;
span {
font-size: vh(24);
color: #0592ff;
}
}
}
}
.bottomBox {
margin-top: vh(48);
height: vh(182);
background-image: url('@/assets/svg/greenBox.svg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: vh(26) vh(32);
box-sizing: border-box; box-sizing: border-box;
padding: 3%; section {
:deep(.border-box-content) {
display: flex; display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center; align-items: center;
font-size: 2.3vh; justify-content: space-between;
p { padding: 0;
height: 30%; height: auto;
flex-shrink: 0; margin-bottom: vh(20);
margin-top: vh(10);
.leftBox {
img {
width: vh(20);
vertical-align: middle;
}
p {
display: inline-block;
margin-left: vh(12);
font-size: vh(20);
color: rgba(255, 255, 255, 0.8);
vertical-align: middle;
font-weight: normal;
}
}
.rightBox {
width: vh(240);
height: vh(44);
padding: 0 vh(24);
display: flex; display: flex;
justify-content: space-between;
align-content: space-between;
align-items: center; align-items: center;
letter-spacing: 0.1vh; background: linear-gradient(271deg, rgba(85, 255, 212, 0.075) 2%, rgba(35, 150, 121, 0.11) 99%);
font-size: 2.4vh; border: 1.5px solid;
span { border-image: linear-gradient(159deg, #a9d5ff -8%, rgba(169, 213, 255, 0) 38%) 1.5;
margin-left: 1vh; div {
color: aquamarine; img {
font-size: 2.6vh; width: vh(14);
vertical-align: bottom;
}
p {
display: inline-block;
margin-left: vh(8);
font-size: vh(16);
font-family: Source Han Sans;
vertical-align: middle;
letter-spacing: 1px;
}
}
> p {
color: #67c23a;
font-size: vh(26);
span {
font-family: Source Han Sans;
color: #fff;
font-size: vh(12);
margin-left: vh(4);
vertical-align: middle;
}
} }
}
.active {
color: aquamarine;
font-size: 3.8vh;
letter-spacing: 0.3vh;
} }
} }
} .numBox {
.item:nth-child(3) { .leftBox {
p { font-size: vh(44);
min-width: 13vh; color: #67c23a;
text-align: left; }
} }
} }
} }

135
src/views/pageMonitor/topRight/index.vue
Unescape View File

@ -1,18 +1,33 @@
<template> <template>
<div class="topRight"> <div class="topRight">
<dv-border-box-13> <dv-border-box-13>
<el-carousel direction="vertical" :autoplay="true" :interval="5000"> <el-carousel direction="vertical" :autoplay="false" :interval="5000">
<el-carousel-item v-for="item in 3" :key="item"> <el-carousel-item v-for="item in 3" :key="item">
<template v-for="(item1, index) in 21"> <section>
<div class="item" :key="item1"> <template v-for="(item1, index) in 24">
<dv-border-box-2> <div v-if="index % 3" class="item opreationRoom" :key="index">
<p class="numFont">{{ String(index + 1).padStart(3, '0') }}</p> <p>OR-{{ String(index + 1).padStart(3, '0') }}</p>
<p v-if="index % 3" style="color: #f00">手术中</p> <div>
<p v-else-if="index % 5" style="color: #ff0">麻醉结束</p> <img src="@/assets/svg/opreationIcon.svg" />
<p v-else style="color: #fff">空置中</p> <span>手术中</span>
</dv-border-box-2> </div>
</div> </div>
</template> <div v-else-if="index % 5" class="item endRoom" :key="index">
<p>OR-{{ String(index + 1).padStart(3, '0') }}</p>
<div>
<img src="@/assets/svg/endIcon.svg" />
<span>麻醉结束</span>
</div>
</div>
<div v-else class="item waitRoom" :key="index">
<p>OR-{{ String(index + 1).padStart(3, '0') }}</p>
<div>
<img src="@/assets/svg/waitIcon.svg" />
<span>空置中</span>
</div>
</div>
</template>
</section>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</dv-border-box-13> </dv-border-box-13>
@ -30,6 +45,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/assets/scss/pxtovh.scss';
.topRight { .topRight {
flex-basis: 69%; flex-basis: 69%;
:deep(.el-carousel) { :deep(.el-carousel) {
@ -39,33 +55,94 @@ export default {
} }
.el-carousel__item { .el-carousel__item {
height: 100%; height: 100%;
padding: 2vh;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-evenly; justify-content: space-evenly;
align-content: space-evenly; align-content: space-evenly;
.item { section {
flex-basis: 13%; position: absolute;
height: 11vh; top: 50%;
flex-shrink: 0; left: 50%;
> div { transform: translate(-50%, -50%);
width: 100%; width: 96%;
height: 100%; display: grid;
.border-box-content { grid-template-columns: repeat(8, minmax(vh(136), 1fr));
display: flex; gap: vh(20);
flex-direction: column; grid-row-gap: vh(40);
align-items: center; .item {
justify-content: space-evenly; width: vh(136);
letter-spacing: 0.1vh; height: vh(106);
p:first-child { // display: inline-block;
font-size: 2.2vh; // margin: vh(16) vh(22) vh(16) 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
p {
width: vh(116);
margin: vh(8) auto 0;
text-align: center;
line-height: vh(30);
background: linear-gradient(
90deg,
rgba(0, 147, 255, 0) 0%,
rgba(0, 147, 255, 0.37) 44%,
rgba(0, 147, 255, 0) 99%
);
font-size: vh(20);
color: #fff;
position: relative;
&::after {
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%);
} }
p:last-child { }
font-size: 2.4vh; div {
position: absolute;
bottom: 15%;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
img {
width: vh(28);
vertical-align: middle;
}
span {
margin-left: vh(8);
font-size: vh(20);
vertical-align: middle;
white-space: nowrap;
} }
} }
} }
.waitRoom {
background-image: url('@/assets/svg/waitRoom.svg');
span {
color: #0592ff;
}
}
.endRoom {
background-image: url('@/assets/svg/endRoom.svg');
span {
color: #67c23a;
}
}
.opreationRoom {
background-image: url('@/assets/svg/opreationRoom.svg');
span {
color: #ff8515;
}
}
.item:nth-child(8n) {
margin-right: 0;
}
} }
} }
} }

Write Preview
Loading…
Cancel
Save