feat: 设备列表初始化结构完成、导航栏初始化完成

dev-deviceSetting
donghao 1 year ago
parent aa61d3e8bf
commit a03af74bc2

@ -0,0 +1,33 @@
<svg width="1859" height="767" viewBox="0 0 1859 767" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_iii_9388_53122)">
<path d="M2 749.13V3H1842.77L1858 21.6778V749.13L1844.24 766H15.76L2 749.13Z" fill="#00183E" fill-opacity="0.9"/>
</g>
<path d="M2 749.13V3H1842.77L1858 21.6778V749.13L1844.24 766H15.76L2 749.13Z" stroke="#20A0FD" stroke-opacity="0.4" stroke-width="1.5"/>
<path d="M1833 12.88L1835.88 10L1845 19.12L1842.12 22L1833 12.88Z" fill="white"/>
<path d="M1804 3H1842.86L1858 20.6882V50" stroke="#2ABAF0" stroke-width="2"/>
<path d="M2 37V2H74" stroke="#2CCAFF" stroke-width="3"/>
<defs>
<filter id="filter0_iii_9388_53122" x="1.25" y="-1.75" width="1857.5" height="772.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<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" result="hardAlpha"/>
<feOffset dy="-4"/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_9388_53122"/>
<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" result="hardAlpha"/>
<feOffset dy="-4"/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_9388_53122" result="effect2_innerShadow_9388_53122"/>
<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" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
<feBlend mode="normal" in2="effect2_innerShadow_9388_53122" result="effect3_innerShadow_9388_53122"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 483 KiB

@ -0,0 +1,29 @@
<svg width="1399" height="794" viewBox="0 0 1399 794" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.8606 4.98828L6.48659 28.5681L4 761.016L33.3418 790H1368.14L1395 763.472V29.0593L1357.2 4.98828H29.8606Z" fill="#00183E" fill-opacity="0.8"/>
<path d="M5.06619 27.1601L4.48939 27.742L4.4866 28.5613L2.00001 761.009L1.99716 761.849L2.5945 762.439L31.9363 791.422L32.5206 792H33.3418H1368.14H1368.97L1369.55 791.422L1396.41 764.895L1397 764.308V763.472V29.0593V27.9619L1396.07 27.3724L1358.28 3.30134L1357.79 2.98828H1357.2H29.8606H29.027L28.4402 3.58028L5.06619 27.1601Z" stroke="#20A0FD" stroke-opacity="0.4" stroke-width="4"/>
<path d="M28.5 5.06816L7 27.3121V41.3349V52.5218H1395V36.0954V27.3121L1361 4.96582L28.5 5.06816Z" fill="#0B255C"/>
<rect x="101" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
<rect x="113" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
<rect x="125" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
<rect x="137" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
<rect x="149" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
<rect x="4" y="178.156" width="6" height="6.21928" fill="#09E8FB"/>
<rect x="4" y="195.776" width="6" height="6.21928" fill="#FBE500"/>
<rect x="4" y="213.396" width="6" height="6.21928" fill="#EF680F"/>
<path d="M72 5.06787H160" stroke="#00D0D4" stroke-width="2"/>
<path d="M4 17.5468V2H19L4 17.5468Z" fill="#0FDEF2" stroke="#0FDEF2" stroke-width="2"/>
<rect x="249" y="783.78" width="116" height="6.21928" fill="#00FBFF"/>
<rect x="551" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
<rect x="563" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
<rect x="575" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
<rect x="587" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
<rect x="599" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
<rect x="699" y="783.78" width="116" height="6.21928" fill="#00FBFF"/>
<rect x="1041" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
<rect x="1053" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
<rect x="1065" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
<rect x="1077" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
<rect x="1089" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
<rect x="1189" y="783.78" width="116" height="6.21928" fill="#00FBFF"/>
<path d="M4 75.8661L10 70.2144V130.329L4 124.677V75.8661Z" fill="#0FDEF2" stroke="#0FDEF2" stroke-width="2"/>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

@ -0,0 +1,64 @@
<svg width="433" height="792" viewBox="0 0 433 792" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_iii_8592_97022)">
<path d="M2 774.13V3H416.766L432 21.6778V774.13L418.24 791H15.76L2 774.13Z" fill="#00183E" fill-opacity="0.9"/>
</g>
<path d="M2 774.13V3H416.766L432 21.6778V774.13L418.24 791H15.76L2 774.13Z" stroke="#20A0FD" stroke-opacity="0.4" stroke-width="1.5"/>
<path d="M413 12.88L415.88 10L425 19.12L422.12 22L413 12.88Z" fill="white"/>
<path d="M378 3H416.86L432 20.6882V50" stroke="#2ABAF0" stroke-width="2"/>
<g clip-path="url(#clip0_8592_97022)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 1H451.786V51H3V1Z" fill="url(#paint0_linear_8592_97022)"/>
<line x1="3" y1="50.5" x2="11" y2="50.5" stroke="#3656C8"/>
<line x1="13" y1="50.5" x2="21" y2="50.5" stroke="#3656C8" stroke-opacity="0.6"/>
<line x1="23" y1="50.5" x2="31" y2="50.5" stroke="#3656C8" stroke-opacity="0.2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 1H451.786V3H3V1Z" fill="url(#paint1_linear_8592_97022)"/>
<rect x="3" y="18" width="2" height="16" fill="#3656C8"/>
</g>
<path opacity="0.3" d="M405.464 50.0007H37L37.7086 51C38.042 50.9963 405.909 50.9364 405.874 50.9963L409 47.0029C409 46.9993 408.479 46 408.479 46L405.464 50.0007Z" fill="#3656C8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M205.476 50H230.524V51H205.476V50Z" fill="url(#paint2_linear_8592_97022)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M405.528 48H421.554L418.027 51H402L405.528 48Z" fill="url(#paint3_linear_8592_97022)"/>
<path d="M2 37V2H74" stroke="#2CCAFF" stroke-width="3"/>
<defs>
<filter id="filter0_iii_8592_97022" x="1.25" y="-1.75" width="431.5" height="797.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<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" result="hardAlpha"/>
<feOffset dy="-4"/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_8592_97022"/>
<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" result="hardAlpha"/>
<feOffset dy="-4"/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_8592_97022" result="effect2_innerShadow_8592_97022"/>
<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" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
<feBlend mode="normal" in2="effect2_innerShadow_8592_97022" result="effect3_innerShadow_8592_97022"/>
</filter>
<linearGradient id="paint0_linear_8592_97022" x1="3" y1="34.7505" x2="451.786" y2="34.7505" gradientUnits="userSpaceOnUse">
<stop stop-color="#3252C6" stop-opacity="0"/>
<stop stop-color="#3252C6" stop-opacity="0.4"/>
<stop offset="1" stop-color="#3252C6" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_8592_97022" x1="3" y1="2.00164" x2="451.786" y2="2.00164" gradientUnits="userSpaceOnUse">
<stop stop-color="#3656C8"/>
<stop offset="1" stop-color="#2994FC" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_8592_97022" x1="218" y1="50" x2="218" y2="51" gradientUnits="userSpaceOnUse">
<stop stop-color="#FEF643"/>
<stop offset="1" stop-color="#FFA217"/>
</linearGradient>
<linearGradient id="paint3_linear_8592_97022" x1="411.777" y1="48" x2="411.777" y2="51" gradientUnits="userSpaceOnUse">
<stop stop-color="#FEF643"/>
<stop offset="1" stop-color="#FFA217"/>
</linearGradient>
<clipPath id="clip0_8592_97022">
<rect width="430" height="50" fill="white" transform="translate(3 1)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

@ -0,0 +1,27 @@
<svg width="42" height="34" viewBox="0 0 42 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_9562_48030)">
<path d="M37.9737 32.8229H3.3414L0.651367 30.6782V24.4139L2.15286 23.2867L2.1779 10.4887L0.651367 9.26178V3.0673L3.3414 0.932617H37.9737L40.6512 3.0673V30.6782L37.9737 32.8229Z" fill="#009DFF" fill-opacity="0.1"/>
</g>
<path opacity="0.6" d="M38.3223 33H3.69003L1 30.848V24.562L2.50149 23.431L2.52654 10.589L1 9.35782V3.14202L3.69003 1H38.3223L40.9999 3.14202V30.848L38.3223 33Z" stroke="#27ACFF" stroke-width="0.58" stroke-miterlimit="10"/>
<path d="M15 24V14C15 10.134 18.134 7 22 7C25.866 7 29 10.134 29 14V24M12 24H32H12Z" fill="#009DFF"/>
<path d="M15 24V14C15 10.134 18.134 7 22 7C25.866 7 29 10.134 29 14V24M12 24H32" stroke="#009DFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22 27C23.3807 27 24.5 25.8807 24.5 24.5V24H19.5V24.5C19.5 25.8807 20.6193 27 22 27Z" fill="#009DFF" stroke="#009DFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<filter id="filter0_ii_9562_48030" x="0.651367" y="-1.06738" width="40" height="35.8904" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<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" result="hardAlpha"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0361115 0 0 0 0 0.4795 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_9562_48030"/>
<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" result="hardAlpha"/>
<feOffset dy="-2"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0352941 0 0 0 0 0.478431 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_9562_48030" result="effect2_innerShadow_9562_48030"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 30 KiB

@ -0,0 +1,3 @@
<svg width="12" height="22" viewBox="0 0 12 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 22V0H6.31579L12 11L6.31579 22H0Z" fill="#2DE6FF"/>
</svg>

After

Width:  |  Height:  |  Size: 166 B

@ -0,0 +1,71 @@
<svg width="368" height="37" viewBox="0 0 368 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_9562_48043)">
<path d="M359.521 11.6994C353.262 12.1634 346.859 12.4507 340.312 12.5611C339.538 12.5611 338.93 12.4175 338.487 12.1303C338.067 11.8431 337.857 11.4453 337.857 10.9371C337.857 10.2743 338.244 9.58933 339.018 8.88229C342.535 5.54591 345.377 2.58514 347.545 0H351.857C349.225 3.31429 346.262 6.46286 342.966 9.44571C347.058 9.42362 352.09 9.18057 358.062 8.71657L355.242 2.91657H358.758L364 13.224H360.284L359.521 11.6994ZM359.853 28.2046H338.023L339.25 18.4274C339.472 16.4168 340.555 15.4114 342.502 15.4114H358.36C360.13 15.4114 361.014 16.2069 361.014 17.7977C361.014 18.0629 361.003 18.2617 360.981 18.3943L359.853 28.2046ZM341.805 25.1554H356.668L357.498 18.328H342.668L341.805 25.1554Z" fill="url(#paint0_linear_9562_48043)"/>
<path d="M316.856 28.7681H313.373L314.733 17.8309H302.955L303.32 14.6492H315.131L316.358 4.70637H305.609L305.974 1.65723H330.658L330.293 4.70637H319.809L318.581 14.6492H330.558L330.226 17.8309H318.183L316.856 28.7681ZM307.998 6.1978H311.15L312.245 13.1247H308.927L307.998 6.1978ZM325.25 13.1909H321.965L324.653 6.26408H327.937L325.25 13.1909Z" fill="url(#paint1_linear_9562_48043)"/>
<path d="M295.623 26.0502C295.534 26.9561 295.291 27.6189 294.893 28.0387C294.495 28.4806 293.931 28.7016 293.201 28.7016C293.046 28.7016 292.792 28.6795 292.438 28.6353C291.089 28.4143 289.894 28.0829 288.855 27.641L289.319 24.4924C290.049 24.7797 290.967 25.078 292.073 25.3873L292.405 25.4536C292.537 25.4536 292.626 25.4204 292.67 25.3542C292.714 25.2658 292.758 25.1111 292.803 24.8902L295.656 0.463867H298.675L295.623 26.0502ZM271.669 0.894725L276.911 3.87758L276.513 7.09244L271.271 4.10958L271.669 0.894725ZM286.134 1.29244C286.997 1.29244 287.627 1.4692 288.025 1.82272C288.446 2.15415 288.656 2.71758 288.656 3.51301C288.656 3.77815 288.645 3.98806 288.622 4.14272L286.864 19.1564H284.276L286.101 3.97701H280.461L278.703 19.1564H276.082L277.906 3.94387C278.017 2.94958 278.293 2.26463 278.736 1.88901C279.178 1.4913 279.886 1.29244 280.859 1.29244H286.134ZM290.613 3.14844H293.466L291.243 21.4433H288.357L290.613 3.14844ZM283.414 14.3839C283.259 15.798 283.027 17.1016 282.717 18.2947C283.248 19.0681 284.066 20.3385 285.172 22.1062C285.637 22.8795 286.389 24.1942 287.428 26.0502L284.873 27.177C284.785 27.0223 284.685 26.8456 284.575 26.6467C284.486 26.4479 284.376 26.2269 284.243 25.9839C283.248 24.0837 282.407 22.537 281.722 21.3439C281.169 22.7138 280.505 23.9842 279.731 25.1553C278.957 26.3043 278.061 27.4532 277.044 28.6022L274.522 27.4422C276.336 25.6303 277.729 23.7633 278.703 21.841C279.786 19.7199 280.516 17.201 280.892 14.2844L281.821 5.79987H284.376L283.414 14.3839ZM269.944 7.7553L275.319 10.7713L274.954 14.0193L269.48 10.9702L269.944 7.7553ZM275.65 16.5382C274.965 18.814 274.29 20.913 273.627 22.8353C272.875 25.0227 272.178 26.8345 271.536 28.2707H268.285C270.055 24.0063 271.47 20.0955 272.532 16.5382H275.65Z" fill="url(#paint2_linear_9562_48043)"/>
<path d="M240.55 15.047C239.643 16.7483 238.526 18.5049 237.199 20.3167L234.777 18.8916C237.387 15.4668 239.554 11.9868 241.279 8.45155H237.199L237.597 5.53498H241.744L242.407 0.0664062H245.493L244.829 5.53498H248.014L247.649 8.45155H244.464L244.332 9.61155C245.88 12.4397 247.063 14.8039 247.882 16.7041L245.46 18.0298L245.128 17.1018C244.597 15.6656 244.155 14.5498 243.801 13.7544L241.976 28.5693H238.891L240.55 15.047ZM265.664 11.9647L262.579 12.495L258.963 3.67898H254.152L249.341 12.6275L246.057 11.6664L251.697 1.95555C251.962 1.51364 252.25 1.20431 252.56 1.02755C252.869 0.828691 253.223 0.729263 253.621 0.729263H259.493C259.869 0.729263 260.234 0.828691 260.588 1.02755C260.964 1.22641 261.241 1.52469 261.418 1.92241L265.664 11.9647ZM251.564 9.18069H260.688L260.356 11.8984H251.232L251.564 9.18069ZM252.858 13.8538H255.711L257.304 22.9018C258.432 20.4051 259.571 17.4222 260.721 13.9533H263.939L261.749 19.7533C261.219 21.1453 260.478 22.935 259.527 25.1224H264.238L263.906 28.0058H245.161L245.493 25.1224H256.308L257.271 23.0013H254.351L252.858 13.8538ZM249.375 23.1007L247.815 13.9533H250.668L252.327 23.1007H249.375Z" fill="url(#paint3_linear_9562_48043)"/>
<path d="M215.103 8.45185C212.802 8.84956 209.894 9.18099 206.377 9.44614C205.846 9.49033 205.382 9.42404 204.984 9.24728C204.586 9.07052 204.309 8.82747 204.154 8.51814C204.044 8.29718 203.988 8.07623 203.988 7.85528C203.988 7.36918 204.232 6.84995 204.718 6.29756C205.913 4.94975 207.439 2.92804 209.297 0.232422H212.979C212.227 1.42557 211.409 2.61871 210.524 3.81185C209.861 4.69566 209.12 5.59052 208.301 6.49642C210.602 6.34175 212.648 6.08766 214.439 5.73414L213.709 2.51928H216.562L218.42 10.0096H215.468L215.103 8.45185ZM230.696 5.03814C228.816 5.72309 226.139 6.3749 222.667 6.99356L222.468 8.94899C222.446 9.01528 222.435 9.10366 222.435 9.21414C222.435 9.63395 222.722 9.84385 223.297 9.84385H225.454C227.555 9.84385 229.501 9.40195 231.293 8.51814L230.862 11.7993C229.424 12.44 227.489 12.7604 225.056 12.7604H221.937C221.008 12.7604 220.322 12.5726 219.88 12.197C219.46 11.7993 219.25 11.2248 219.25 10.4736C219.25 10.2305 219.261 10.0317 219.283 9.87699L220.278 0.298707H223.364L222.966 4.17642C225 3.77871 227.688 3.06061 231.027 2.02214L230.696 5.03814ZM213.046 22.9021H206.576L205.979 28.6027H203.026L204.586 13.4233C204.696 12.4511 204.962 11.7551 205.382 11.3353C205.824 10.9155 206.51 10.7056 207.439 10.7056H214.505C216.12 10.7056 216.927 11.4347 216.927 12.893C216.927 13.1581 216.916 13.357 216.894 13.4896L215.799 25.7524C215.667 26.813 215.379 27.5642 214.937 28.0061C214.517 28.448 213.842 28.669 212.913 28.669C212.294 28.669 211.619 28.6138 210.889 28.5033C210.159 28.4149 209.606 28.2934 209.23 28.1387L209.463 25.3216C210.657 25.6309 211.542 25.7856 212.117 25.7856C212.382 25.7856 212.559 25.7303 212.648 25.6199C212.758 25.5094 212.836 25.2663 212.88 24.8907L213.046 22.9021ZM213.875 13.4896H207.572L207.339 15.5444H213.676L213.875 13.4896ZM229.501 19.3559C228.506 19.7094 227.245 20.0629 225.719 20.4164C223.972 20.8141 222.512 21.1124 221.34 21.3113L220.975 24.5924C220.864 25.1669 221.13 25.4541 221.771 25.4541H223.994C224.967 25.4541 225.996 25.3437 227.079 25.1227C228.185 24.8797 229.181 24.5372 230.065 24.0953L229.634 27.4096C228.904 27.7189 227.997 27.9619 226.914 28.1387C225.83 28.3155 224.724 28.4039 223.596 28.4039H220.444C219.515 28.4039 218.83 28.205 218.387 27.8073C217.967 27.4317 217.757 26.8682 217.757 26.117C217.757 25.8519 217.768 25.6419 217.79 25.4873L219.051 13.9536H222.136L221.638 18.3616C224.669 17.765 227.4 17.08 229.833 16.3067L229.501 19.3559ZM213.444 18.1959H207.074L206.842 20.2507H213.278L213.444 18.1959Z" fill="url(#paint4_linear_9562_48043)"/>
<path d="M173.4 4.60697C173.046 4.60697 172.77 4.54069 172.571 4.40812C172.372 4.25345 172.272 4.05459 172.272 3.81154C172.272 3.63478 172.35 3.39173 172.504 3.0824L173.898 0.331543H177.116L176.353 2.02183H185.078L184.68 4.60697H180.765C180.655 5.24773 180.467 6.01002 180.201 6.89383H185.145L184.813 9.51212H179.306C181.097 10.4622 182.911 11.6222 184.747 12.9921L182.623 14.8481C181.274 13.8538 180.411 13.202 180.035 12.8927C179.261 12.3403 178.542 11.8542 177.879 11.4344C176.508 13.2462 174.716 14.8039 172.504 16.1075L169.983 14.2515C171.332 13.5003 172.471 12.7491 173.4 11.9978C174.329 11.2466 175.103 10.418 175.722 9.51212H170.879L171.21 6.89383H177.083C177.37 6.14259 177.58 5.38031 177.713 4.60697H173.4ZM196.723 13.887H185.211L186.439 4.0104C186.527 3.30335 186.792 2.75097 187.235 2.35326C187.677 1.95554 188.252 1.75669 188.96 1.75669H195.662C196.392 1.75669 196.978 2.01078 197.42 2.51897C197.862 3.00507 198.028 3.59059 197.918 4.27554L196.723 13.887ZM188.562 11.2355H194.036L194.766 4.40812H189.391L188.562 11.2355ZM193.372 28.5361H172.538L173.964 17.5327C174.053 16.8698 174.34 16.3285 174.827 15.9087C175.335 15.4889 175.944 15.279 176.651 15.279H192.244C192.974 15.279 193.549 15.4668 193.97 15.8424C194.39 16.218 194.6 16.7373 194.6 17.4001C194.6 17.6211 194.589 17.7868 194.567 17.8973L193.372 28.5361ZM191.349 18.063H177.05L176.718 20.5818H191.05L191.349 18.063ZM176.087 25.7521H190.486L190.751 23.2333H176.386L176.087 25.7521Z" fill="url(#paint5_linear_9562_48043)"/>
<path d="M163.845 24.0617L163.513 27.1771H136.773L137.138 24.0617H147.92L150.176 5.76686H139.759L140.124 2.68457H163.812L163.447 5.76686H153.726L151.47 24.0617H163.845Z" fill="url(#paint6_linear_9562_48043)"/>
<path d="M121.18 0.198975C120.892 2.45269 120.472 4.69536 119.919 6.92697C121.114 10.9925 122.717 14.6824 124.73 17.9967C126.743 21.2889 129.176 24.2938 132.029 27.0115L128.346 28.5361C126.311 26.4592 124.409 24.0066 122.64 21.1784C120.893 18.3502 119.422 15.3342 118.227 12.1304C115.617 18.6927 111.614 24.1834 106.217 28.6024L102.634 27.111C106.815 23.6199 110.143 19.7091 112.62 15.3784C115.23 10.7384 116.845 5.67859 117.464 0.198975H121.18Z" fill="url(#paint7_linear_9562_48043)"/>
<path d="M87.705 4.90523C87.3953 6.96008 87.0967 8.79399 86.8092 10.4069C86.8092 10.3407 86.765 10.5506 86.6765 11.0367H98.5206L98.1224 14.2847H86.8756C88.269 16.9803 89.8946 19.3666 91.7525 21.4435C93.6104 23.5205 95.7337 25.4428 98.1224 27.2104L94.7052 29.0001C90.3702 25.3323 87.0304 21.2447 84.6859 16.7372C83.4915 19.1235 81.9101 21.322 79.9416 23.3327C77.9953 25.3212 75.6508 27.2104 72.9082 29.0001L69.8228 27.1772C73.1404 24.9456 75.7724 22.8024 77.7188 20.7475C79.6873 18.7148 81.1581 16.5605 82.1313 14.2847H71.8134L72.1451 11.0367H83.1598L83.2925 10.3738C83.6021 8.67246 83.8675 7.15894 84.0887 5.83323C84.1772 5.36923 84.2325 5.05989 84.2546 4.90523H74.2352L74.567 1.65723H97.4257L97.0276 4.90523H87.705Z" fill="url(#paint8_linear_9562_48043)"/>
<path d="M53.9971 5.96614H57.1821L57.8788 0.232422H61.0969L60.4002 5.96614H65.8412L65.5094 8.98214H60.0353L59.3386 14.8816H64.7463L64.3814 17.8644H59.0068L58.111 25.2553H65.5094L65.1445 28.3044H48.1248L48.4566 25.2553H54.8265L55.7223 17.8644H50.4804L50.8453 14.8816H56.0872L56.8171 8.98214H51.8406C51.3762 8.98214 51.0112 8.88271 50.7458 8.68385C50.5025 8.48499 50.3809 8.2088 50.3809 7.85528C50.3809 7.67852 50.414 7.47966 50.4804 7.25871L52.2719 1.85642H55.2578L53.9971 5.96614ZM47.1959 25.653C47.0632 26.6915 46.7757 27.4096 46.3333 27.8073C45.9131 28.2271 45.2716 28.4039 44.4091 28.3376C43.2589 28.2492 42.1199 28.0503 40.9919 27.741L41.39 24.9901C42.0756 25.189 42.8719 25.3658 43.7787 25.5204L43.9778 25.5536C44.1105 25.5536 44.1989 25.5094 44.2432 25.421C44.2874 25.3105 44.3427 25.1227 44.4091 24.8576L45.1389 18.5604H41.1577C40.8923 20.5711 40.5274 22.4271 40.0629 24.1284C39.4436 26.2054 38.8686 27.7079 38.3377 28.6359L35.6836 27.6084C36.8558 25.2 37.7074 22.1619 38.2382 18.4941L40.1624 3.44728C40.273 2.58556 40.5274 1.95585 40.9255 1.55813C41.3457 1.13833 41.965 0.928421 42.7834 0.928421H47.6604C48.4787 0.928421 49.0648 1.08309 49.4187 1.39242C49.7947 1.70175 49.9827 2.22099 49.9827 2.95014C49.9827 3.1048 49.9606 3.38099 49.9164 3.77871L47.1959 25.653ZM46.8973 3.81185H43.1483L42.518 8.35242H46.3665L46.8973 3.81185ZM46.0347 11.1364H42.153L41.5227 15.8096H45.4707L46.0347 11.1364Z" fill="url(#paint9_linear_9562_48043)"/>
<path d="M22.977 0.331543H26.2947L25.9298 3.04926H32.731L32.3329 6.0984H25.5648L25.2331 8.78297H21.9486L22.2803 6.0984H15.1805L14.8488 8.78297H11.5643L11.896 6.0984H5.39342L5.79154 3.04926H12.261L12.6259 0.331543H15.9436L15.5787 3.04926H22.6453L22.977 0.331543ZM19.1286 7.78869L18.7304 10.9041H24.6691C25.598 10.9041 26.2726 11.0919 26.6928 11.4675C27.1131 11.8211 27.3232 12.3845 27.3232 13.1578C27.3232 13.4451 27.3121 13.666 27.29 13.8207C27.2679 14.2847 27.1352 15.4668 26.8919 17.367C26.7592 18.4717 26.527 20.1178 26.1952 22.3053C25.9298 24.1392 25.7418 25.2992 25.6312 25.7853C25.41 26.7795 25.0893 27.4645 24.6691 27.8401C24.2488 28.2378 23.5853 28.4367 22.6785 28.4367C21.661 28.4367 20.4003 28.271 18.8963 27.9395C17.6798 27.6744 16.8062 27.3982 16.2754 27.111L16.6071 24.1281C17.1158 24.327 17.8789 24.5479 18.8963 24.791C20.0686 25.1445 21.0307 25.3213 21.7827 25.3213C22.026 25.3213 22.1919 25.2771 22.2803 25.1887C22.3688 25.0782 22.4462 24.8794 22.5126 24.5921C22.5789 24.2828 22.7338 23.2774 22.977 21.5761L23.2756 19.3555L23.5742 17.1018C23.7733 15.6435 23.8949 14.583 23.9392 13.9201H18.1996C16.8947 19.2893 13.7208 24.3049 8.67791 28.967L5.45977 27.6081C8.09179 25.1555 10.1709 22.8355 11.697 20.6481C13.2452 18.4386 14.3179 16.1959 14.9151 13.9201H6.62096L6.95272 10.9041H15.4791L15.9436 7.78869H19.1286ZM31.3044 15.5441L32.2002 23.4984H29.2143L28.3848 15.5441H31.3044ZM10.3367 15.8424L7.25131 23.0675H4L7.21814 15.8424H10.3367Z" fill="url(#paint10_linear_9562_48043)"/>
</g>
<defs>
<filter id="filter0_d_9562_48043" x="0" y="0" width="368" height="37" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<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" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<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_9562_48043"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9562_48043" result="shape"/>
</filter>
<linearGradient id="paint0_linear_9562_48043" x1="350.929" y1="0" x2="350.929" y2="28.2046" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#A6CDF6"/>
</linearGradient>
<linearGradient id="paint1_linear_9562_48043" x1="316.806" y1="1.65723" x2="316.806" y2="28.7681" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#A6CDF6"/>
</linearGradient>
<linearGradient id="paint2_linear_9562_48043" x1="283.48" y1="0.463867" x2="283.48" y2="28.7016" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#A6CDF6"/>
</linearGradient>
<linearGradient id="paint3_linear_9562_48043" x1="250.221" y1="0.0664062" x2="250.221" y2="28.5693" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#A6CDF6"/>
</linearGradient>
<linearGradient id="paint4_linear_9562_48043" x1="217.16" y1="0.232422" x2="217.16" y2="28.669" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#A6CDF6"/>
</linearGradient>
<linearGradient id="paint5_linear_9562_48043" x1="183.967" y1="0.331543" x2="183.967" y2="28.5361" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#A6CDF6"/>
</linearGradient>
<linearGradient id="paint6_linear_9562_48043" x1="150.309" y1="2.68457" x2="150.309" y2="27.1771" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#A6CDF6"/>
</linearGradient>
<linearGradient id="paint7_linear_9562_48043" x1="117.332" y1="0.198975" x2="117.332" y2="28.6024" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#A6CDF6"/>
</linearGradient>
<linearGradient id="paint8_linear_9562_48043" x1="84.1717" y1="1.65723" x2="84.1717" y2="29.0001" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#A6CDF6"/>
</linearGradient>
<linearGradient id="paint9_linear_9562_48043" x1="50.7624" y1="0.232422" x2="50.7624" y2="28.6359" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#A6CDF6"/>
</linearGradient>
<linearGradient id="paint10_linear_9562_48043" x1="18.3655" y1="0.331543" x2="18.3655" y2="28.967" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#A6CDF6"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 15 KiB

@ -0,0 +1,26 @@
<svg width="42" height="34" viewBox="0 0 42 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_9562_48037)">
<path d="M38.582 32.8229H3.93728L1.25977 30.6782V24.4139L2.7611 23.2867L2.78615 10.4887L1.25977 9.26178V3.0673L3.93728 0.932617H38.582L41.2595 3.0673V30.6782L38.582 32.8229Z" fill="#009DFF" fill-opacity="0.1"/>
</g>
<path opacity="0.6" d="M38.3222 33H3.67751L1 30.848V24.562L2.50134 23.431L2.52638 10.589L1 9.35782V3.14202L3.67751 1H38.3222L40.9997 3.14202V30.848L38.3222 33Z" stroke="#009DFF" stroke-width="0.58" stroke-miterlimit="10"/>
<path d="M21 15C22.933 15 24.5 13.433 24.5 11.5C24.5 9.56701 22.933 8 21 8C19.067 8 17.5 9.56701 17.5 11.5C17.5 13.433 19.067 15 21 15Z" fill="#009DFF" stroke="#009DFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 25.4V26H30V25.4C30 23.1598 30 22.0397 29.5641 21.184C29.1806 20.4314 28.5686 19.8195 27.816 19.436C26.9603 19 25.8402 19 23.6 19H18.4C16.1598 19 15.0397 19 14.1841 19.436C13.4314 19.8195 12.8195 20.4314 12.436 21.184C12 22.0397 12 23.1598 12 25.4Z" fill="#009DFF" stroke="#009DFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<filter id="filter0_ii_9562_48037" x="1.25977" y="-1.06738" width="39.9995" height="35.8904" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<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" result="hardAlpha"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0361115 0 0 0 0 0.4795 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_9562_48037"/>
<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" result="hardAlpha"/>
<feOffset dy="-2"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0352941 0 0 0 0 0.478431 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_9562_48037" result="effect2_innerShadow_9562_48037"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

@ -1,3 +1,11 @@
<!--
* @Author: donghao donghao@supervision.ltd
* @Date: 2024-02-22 13:38:04
* @LastEditors: donghao donghao@supervision.ltd
* @LastEditTime: 2024-02-27 14:53:55
* @FilePath: \General-AI-Platform-Web-Client\src\components\CustomTree\src\demoItem.md
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="course_lessonsBox fs14 text_1">
<!---->

@ -2,7 +2,7 @@
* @Author: donghao donghao@supervision.ltd
* @Date: 2024-02-23 11:38:23
* @LastEditors: donghao donghao@supervision.ltd
* @LastEditTime: 2024-02-26 17:27:17
* @LastEditTime: 2024-02-27 13:52:18
* @FilePath: \General-AI-Platform-Web-Client\src\components\DsBox\index.ts
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/

@ -3,7 +3,7 @@
*
* 1
* w1 430px w2 364px
* h1 288px h2 608px
* h1 288px h2 608px h3 788px
* 2
*
*
@ -45,6 +45,12 @@ export default defineComponent({
height: "288px"
};
break;
case "w1h3":
options = {
width: "430px",
height: "788px"
};
break;
default:
options = {
width: "430px",

@ -1,3 +1,14 @@
.dsBox2_wrap {
//
.head_info {
padding: 0 17px;
.bg_icon {
width: 12px;
height: 22px;
background: #2de6ff;
border-radius: 0px 0px 0px 0px;
margin-right: 12px;
}
}
}

@ -2,7 +2,7 @@
* @Author: donghao donghao@supervision.ltd
* @Date: 2024-02-26 17:24:07
* @LastEditors: donghao donghao@supervision.ltd
* @LastEditTime: 2024-02-26 17:42:29
* @LastEditTime: 2024-02-27 14:29:15
* @FilePath: \General-AI-Platform-Web-Client\src\components\DsBox\src\dsBox2.tsx
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@ -10,11 +10,9 @@
* @
*
* 1
* w1 1856px
* h1 763px
* w1 1856px w2 1392px w3 430px
* h1 788px h2 763px
*
*
*
*/
import { defineComponent } from "vue";
@ -30,6 +28,21 @@ export default defineComponent({
title: {
type: String,
default: ""
},
// 整体框类名
bgClass: {
type: String,
default: ""
},
// // 是否有标题
// isHasTitle: {
// type: Boolean,
// default: false
// },
// 标题框类名
bgTitleClass: {
type: String,
default: ""
}
},
@ -46,6 +59,18 @@ export default defineComponent({
height: "288px"
};
break;
case "w2h1":
options = {
width: "1391px",
height: "788px"
};
break;
case "w3h1":
options = {
width: "430px",
height: "788px"
};
break;
default:
options = {
width: "100%",
@ -55,10 +80,27 @@ export default defineComponent({
}
return (
<div class="dsBox2_wrap w-full h-full">
<dv-border-box-10
<div
style={{ width: options.width, height: options.height }}
class={props.bgClass}
>
<div class="w-full h-full">
{/* 标题 */}
{props.title && (
<div
class="head_info flex align-middle items-center"
style={{
height: "50px",
width: options.width,
fontWeight: "bold",
fontSize: "20px",
color: "#2DE6FF"
}}
>
<div class="bg_icon"></div>
<span>{props.title}</span>
</div>
)}
<div
class="w-full"
style={{ height: `calc(${options.height} - 50px)` }}
@ -67,7 +109,7 @@ export default defineComponent({
{slots.default()}
</div>
</div>
</dv-border-box-10>
</div>
</div>
);
};

@ -1,29 +1,142 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useNav } from "@/layout/hooks/useNav";
// TODO
defineOptions({
name: "DsNavbar"
});
const { logout } = useNav();
//
const currTime = ref({
date: "",
time: "",
week: ""
});
function _formatNum(value) {
if (value <= 9) {
return "0" + value;
}
return value;
}
function getTime() {
const nowDate = new Date();
const date =
nowDate.getFullYear() +
"/" +
_formatNum(nowDate.getMonth() + 1) +
"/" +
_formatNum(nowDate.getDate());
const time =
_formatNum(nowDate.getHours()) +
":" +
_formatNum(nowDate.getMinutes()) +
":" +
_formatNum(nowDate.getSeconds());
let week = "";
switch (nowDate.getDay()) {
case 0:
week = "星期天";
break;
case 1:
week = "星期一";
break;
case 2:
week = "星期二";
break;
case 3:
week = "星期三";
break;
case 4:
week = "星期四";
break;
case 5:
week = "星期五";
break;
case 6:
week = "星期六";
break;
default:
break;
}
return {
date,
time,
week
};
}
const getDataTime = () => {
currTime.value = getTime();
setTimeout(getDataTime, 1000);
};
onMounted(() => {
getDataTime();
});
</script>
<template>
<div class="flex justify-between h-full align-middle dsNavbar_wrap">
<div class="left">logo</div>
<h1>苏胜天人工智能检测平台</h1>
<div class="right">time</div>
<div class="flex items-center left"><div class="bg_logo" /></div>
<div class="flex"><div class="center_title" /></div>
<div class="flex items-center justify-end right">
<div class="date_box ff1">
<span>{{ currTime.date }}</span
><span>{{ currTime.week }}</span
><span>{{ currTime.time }}</span>
</div>
<div class="bg_user_icon" @click="logout" />
</div>
</div>
</template>
<style lang="scss" scoped>
.dsNavbar_wrap {
// bgNav
background: url("@/assets/dataScreen/common/bgNav.svg") no-repeat;
background-size: cover;
width: 100vw;
height: 64px;
.left {
width: 30vw;
padding-left: 24px;
.bg_logo {
background: url("@/assets/dataScreen/common/logo.svg") no-repeat;
width: 111px;
height: 36px;
}
h1 {
color: white;
}
.center_title {
margin-top: 19px;
background: url("@/assets/dataScreen/common/title.svg") no-repeat center
center;
width: 370px;
height: 36px;
line-height: 2;
}
.right {
width: 30vw;
.date_box {
color: #009dff;
font-size: 16px;
margin-right: 15px;
& > span {
padding-left: 5px;
}
}
.bg_user_icon {
background: url("@/assets/dataScreen/common/userIcon.svg") no-repeat;
width: 40px;
height: 32px;
// border: 1px solid #009dff;
opacity: 0.6;
margin-right: 15px;
}
}
}
</style>

@ -4,3 +4,8 @@
height: 763px;
}
}
.bg_alarmTable {
// bgAlarmTable.svg
background: url("@/assets/dataScreen/common/bgAlarmTable.svg") no-repeat;
}

@ -2,7 +2,7 @@
* @Author: donghao donghao@supervision.ltd
* @Date: 2024-02-23 09:55:26
* @LastEditors: donghao donghao@supervision.ltd
* @LastEditTime: 2024-02-27 09:58:59
* @LastEditTime: 2024-02-27 11:27:38
* @FilePath: \General-AI-Platform-Web-Client\src\pages\dataScreen\views\alarm\alarmInfoIndex.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@ -13,8 +13,6 @@ import { onMounted, ref, reactive, h } from "vue";
import { BaseTable } from "@/components/CustomTable";
import { getConfig } from "@/config";
import setting from "@/layout/components/setting/index.vue";
defineOptions({
name: "alarmInfoIndex"
});
@ -135,7 +133,7 @@ const columns = [
"span",
{
fontSize: "14px",
class: "pf-1"
class: "text-white"
},
val.deviceGroup
)
@ -221,10 +219,9 @@ onMounted(() => {
<template>
<div class="alarmInfoIndex_wrap">
<!-- 系统设置 -->
<p class="ds_title_1 pb-[16px]">设备告警通知</p>
<div class="alarm_main_info">
<DsBox2>
<DsBox2 bgClass="bg_alarmTable">
<template #default>
<!-- <div class="w-full h-full">表格</div> -->
<div class="main alarm_wrap pt-[18px] px-[24px]">
@ -266,6 +263,7 @@ onMounted(() => {
>
<template v-if="pagination.total > 0">
<BaseTable
class="ds_table"
:total="pagination.total"
:pageSize="pagination.pageSize"
:dataSource="listData"

@ -0,0 +1,55 @@
.deviceList_wrap {
padding: 32px;
.bg_device_left {
background: url("@/assets/dataScreen/common/deviceListLeft.svg") no-repeat;
}
.bg_device_right {
background: url("@/assets/dataScreen/common/deviceListRight.svg") no-repeat;
}
.device_left_box {
position: relative;
canvas {
border-radius: 0 0px 30px 30px;
overflow: hidden;
}
}
/* 设备列表 */
.deviceList_params {
position: absolute;
left: 24px;
top: 24px;
.el-input {
background-color: #00183e;
width: 147px;
height: 40px;
}
}
/* 设备详情 */
.device_alarm_info {
& > p {
padding: 16px 0 23px;
font-weight: bold;
font-size: 16px;
color: #2de6ff;
line-height: 22px;
}
.device_alarm_info_list {
font-size: 14px;
li {
padding-bottom: 23px;
.level_status_2 {
color: #e80d0d;
}
.level_status_1 {
color: #faad14;
}
.level_status_0 {
color: #52c41a;
}
}
}
}
}

@ -2,30 +2,52 @@
* @Author: donghao donghao@supervision.ltd
* @Date: 2024-02-23 10:14:31
* @LastEditors: donghao donghao@supervision.ltd
* @LastEditTime: 2024-02-26 10:59:16
* @LastEditTime: 2024-02-27 16:05:40
* @FilePath: \General-AI-Platform-Web-Client\src\pages\dataScreen\views\device\deviceList.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { bgImageData } from "./testData/fabricImageSvg";
import { DsBox1 } from "@/components/DsBox";
import { deviceStatusData, deviceTypeOptions } from "./testData/deviceListData";
import { DsBox2 } from "@/components/DsBox";
import DetailCard from "./modules/detailCard.vue";
defineOptions({
name: "DeviceList"
});
// state
const deviceParams = ref<Record<string, any>>({
type: "0"
});
const clipPathData = ref<{
width: number;
height: number;
}>({
width: 1200, //
height: 900 //
width: 1378, //
height: 728 //
});
const canvasRef = ref<any>(null);
const cvs = ref<any>(null);
const currentDetail = ref<Record<string, any>>({});
const currentDetail = ref<Record<string, any>>({
deviceType: "1", // 1 1 2 2
id: "1001", // id
status: "watchOnline", //
deviceStatus: "启用",
deviceName: "工业摄像头01", //
deviceCode: "CRM001",
deviceLocation: "生产厂商: 南京苏胜天信息科技有限公司",
deviceParams: "89hufd",
deviceCategory: "摄像设备",
diviceGroup: "组1",
createTime: "2024-01-15 14:00",
baseInfo: {
left: 527.0215, // x
top: 24.5797 // y
}
});
function initCanvas() {
const canvasObject = new fabric.Canvas(canvasRef.value);
@ -50,19 +72,66 @@ onMounted(() => {
<template>
<div class="flex justify-between deviceList_wrap">
<div class="left">
<DsBox2 title="设备列表" type="w2h1" bgClass="bg_device_left">
<template #default>
<div
class="flex items-center justify-end w-full h-full device_left_box"
>
<canvas
ref="canvasRef"
:width="clipPathData.width"
:height="clipPathData.height"
/>
<div class="right_info">
<DsBox1 title="设备详情">
<div class="deviceList_params">
<el-select
v-model="deviceParams.type"
placeholder="Select"
style="width: 240px"
>
<el-option
v-for="item in deviceTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
</template>
</DsBox2>
</div>
<div class="right">
<DsBox2 title="设备详情" type="w3h1" bgClass="bg_device_right">
<template #default>
<div class="w-full h-full">1234546376</div>
<div class="w-full p-[24px]">
<DetailCard :info="currentDetail" />
<div class="device_alarm_info">
<p>告警信息</p>
<ul class="device_alarm_info_list">
<li
v-for="(v, k) in deviceStatusData"
:key="k"
class="flex justify-between"
>
<span
class="level_status"
:class="`level_status_${v.type}`"
>{{ v.label }}</span
>
<span>{{ v.des }}</span>
<span>{{ v.time }}</span>
</li>
</ul>
</div>
</div>
</template>
</DsBox1>
</DsBox2>
</div>
</div>
</template>
<style lang="scss" scoped></style>
<style lang="scss">
@import "./deviceList.scss";
</style>

@ -0,0 +1,27 @@
.deviceDetailCard_wrap {
.deviceDetail_info {
li {
font-size: 16px;
color: rgba(255, 255, 255, 0.9);
line-height: 22px;
padding-bottom: 12px;
.label {
display: inline-block;
width: 75px;
}
.detail_value_status {
border-radius: 2px;
border: 1px solid #52c41a;
font-size: 14px;
padding: 3px 12px;
color: #52c41a;
}
}
}
.device_pic {
width: 383px;
height: 225px;
background-color: aqua;
}
}

@ -2,7 +2,7 @@
* @Author: donghao donghao@supervision.ltd
* @Date: 2024-02-23 11:32:43
* @LastEditors: donghao donghao@supervision.ltd
* @LastEditTime: 2024-02-23 11:36:05
* @LastEditTime: 2024-02-27 15:51:39
* @FilePath: \General-AI-Platform-Web-Client\src\pages\dataScreen\views\device\modules\detailCard.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@ -10,10 +10,55 @@
defineOptions({
name: "DeviceDetailCard"
});
const props = defineProps({
info: {
type: Object,
default: null
}
});
</script>
<template>
<div></div>
<div class="deviceDetailCard_wrap">
<ul class="deviceDetail_info">
<li>
<span class="label">设备名称: </span>
<span class="detail_value">{{ props.info?.deviceName }}</span>
</li>
<li>
<span class="label">设备ID: </span>
<span class="detail_value">{{ props.info?.deviceCode }}</span>
</li>
<li>
<span class="label">设备类型: </span>
<span class="detail_value">{{ props.info?.deviceCategory }}</span>
</li>
<li>
<span class="label">设备型号: </span>
<span class="detail_value">{{ props.info?.deviceParams }}</span>
</li>
<li>
<span class="label">生产厂商: </span>
<span class="detail_value">{{ props.info?.deviceLocation }}</span>
</li>
<li>
<span class="label">设备状态: </span>
<span class="detail_value detail_value_status">{{
props.info?.deviceStatus
}}</span>
</li>
<li>
<span class="label">创建时间: </span>
<span class="detail_value">{{ props.info?.createTime }}</span>
</li>
</ul>
<div class="device_pic">
<!-- <img /> -->
</div>
</div>
</template>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
@import "./detailCard.scss";
</style>

@ -0,0 +1,41 @@
/*
* @Author: donghao donghao@supervision.ltd
* @Date: 2024-02-27 15:04:53
* @LastEditors: donghao donghao@supervision.ltd
* @LastEditTime: 2024-02-27 15:09:57
* @FilePath: \General-AI-Platform-Web-Client\src\pages\dataScreen\views\device\testData\deviceListData.ts
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
export const deviceStatusData = [
{
type: 2,
label: "紧急",
des: "设备1发生紧急报警请及时关注",
time: "今天10:03:01"
},
{
type: 1,
label: "优先",
des: "设备1发生紧急报警请及时关注",
time: "今天10:03:01"
},
{
type: 0,
label: "一般",
des: "设备1发生紧急报警请及时关注",
time: "今天10:03:01"
},
{
type: 0,
label: "一般",
des: "设备1发生紧急报警请及时关注",
time: "今天10:03:01"
}
];
export const deviceTypeOptions = [
{
value: "0",
label: "核心监测车间"
}
];

File diff suppressed because one or more lines are too long

@ -146,3 +146,11 @@ html.dark {
}
//
// .ds_table {
// .el-table__row {
// background-color: red !important;
// }
// }
html.dark .el-table__cell {
background: rgba(255, 255, 255, 0.05);
}

Loading…
Cancel
Save