新增多个图层;更新图层图标;修复SCADA设备列表状态功能

This commit is contained in:
JIANG
2025-10-30 11:57:06 +08:00
parent b3d9c7a97a
commit 265ecdc795
9 changed files with 125 additions and 37 deletions

View File

@@ -1 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1755841972747" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6847" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M128.043 512q42.666 0 42.666 42.667v170.666q0 42.667-42.666 42.667-42.667 0-42.667-42.667V554.667q0-42.667 42.667-42.667zM512.043 213.333a213.333 213.333 0 0 0-213.334 213.334v384a42.667 42.667 0 0 0 42.667 42.666h341.333a42.667 42.667 0 0 0 42.667-42.666v-384a213.333 213.333 0 0 0-213.333-213.334m0-85.333a299.008 299.008 0 0 1 298.666 298.667v384a128 128 0 0 1-128 128H341.376a128 128 0 0 1-128-128v-384A299.008 299.008 0 0 1 512.043 128zM896.043 512q42.666 0 42.666 42.667v170.666q0 42.667-42.666 42.667-42.667 0-42.667-42.667V554.667q0-42.667 42.667-42.667z" p-id="6848" fill="#13227a"></path><path d="M512.043 554.667A85.333 85.333 0 1 0 597.376 640a85.333 85.333 0 0 0-85.333-85.333m0-85.334A170.667 170.667 0 1 1 341.376 640a170.667 170.667 0 0 1 170.667-170.667zM213.376 341.333h597.333q42.667 0 42.667 42.667t-42.667 42.667H213.376q-42.667 0-42.667-42.667t42.667-42.667zM170.709 853.333h682.667q42.667 0 42.667 42.667t-42.667 42.667H170.709q-42.666 0-42.666-42.667t42.666-42.667zM469.376 85.333h85.333q42.667 0 42.667 42.667t-42.667 42.667h-85.333q-42.667 0-42.667-42.667t42.667-42.667z" p-id="6849" fill="#13227a"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1761732312646" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="55778" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M985.173333 142.933333a35.413333 35.413333 0 0 0-34.56 34.56v11.52H512A324.693333 324.693333 0 0 0 209.493333 627.2H73.386667v-11.52a35.413333 35.413333 0 0 0-34.56-34.56 35.413333 35.413333 0 0 0-34.56 34.56v230.826667a35.413333 35.413333 0 0 0 34.56 34.56 35.413333 35.413333 0 0 0 34.56-34.56v-11.52H512A324.693333 324.693333 0 0 0 814.506667 396.8h136.106666v11.52a34.56 34.56 0 1 0 69.12 0V177.493333a35.413333 35.413333 0 0 0-34.56-34.56zM512 696.746667A184.746667 184.746667 0 1 1 696.746667 512 185.173333 185.173333 0 0 1 512 696.746667z m0 0" fill="#195f84" p-id="55779"></path><path d="M502.613333 405.76a682.666667 682.666667 0 0 0-59.733333 152.32 69.12 69.12 0 1 0 138.24 0 682.666667 682.666667 0 0 0-59.733333-152.32 11.093333 11.093333 0 0 0-18.773334 0z m0 0" fill="#195f84" p-id="55780"></path></svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1761794465981" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="100243" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M990.72 18.944h-73.130667c-19.925333 0-19.925333 9.514667-33.237333 28.458667l-13.269333 56.874666c-66.517333-104.277333-126.336-47.36-166.272-9.472-39.893333 37.973333-46.506667 37.973333-59.818667 28.458667-59.861333-85.333333-139.648-85.333333-212.778667 0-39.893333 47.402667-46.549333 37.930667-73.130666 0C339.114667 85.333333 319.146667 56.874667 279.296 47.36H272.64c-39.893333 0-93.098667 56.874667-113.066667 85.333333l-6.656-28.458666L132.992 28.458667C132.992 9.472 119.68 0 106.410667 0H33.237333C13.312 0 0 9.472 0 47.402667v900.736C0 995.541333 33.28 1024 53.205333 1024h917.589334c33.28 0 53.205333-47.402667 53.205333-75.861333V66.389333c0-28.458667-13.312-47.445333-33.28-47.445333z m-757.973333 426.666667l-19.968-75.818667C239.36 341.333333 259.285333 322.389333 272.64 322.389333c13.269333 0 26.581333 18.944 39.893333 37.888 13.269333 28.458667 39.893333 56.917333 73.130667 56.917334 26.581333 0 46.506667-18.986667 73.130667-47.402667 26.624-37.973333 86.442667-85.333333 139.648 0 46.506667 66.346667 99.754667 18.944 132.992-18.986667 33.28-37.930667 59.818667-47.36 79.786666-28.416L784.64 426.666667c-33.28 0-66.517333 28.458667-86.442667 47.402666-39.893333 37.930667-46.549333 37.930667-59.861333 28.458667-59.861333-85.333333-139.648-85.333333-212.778667 0-39.893333 47.36-46.506667 37.930667-73.130666 0-13.312-28.458667-33.28-66.389333-73.173334-66.389333H272.64c-13.312 0-26.624 0-39.893333 9.472zM186.197333 208.64c26.581333-37.930667 66.474667-85.333333 86.442667-85.333333 13.269333 0 26.581333 18.944 39.893333 37.930666 13.269333 28.416 39.893333 56.874667 73.130667 56.874667 26.581333 0 46.506667-18.944 73.130667-47.402667 26.624-37.930667 86.442667-85.333333 139.648 0 46.506667 66.389333 99.754667 18.944 132.992-18.944 46.506667-47.445333 66.474667-56.917333 99.754666 0 6.613333 9.472 13.269333 9.472 13.269334 9.472l-19.925334 75.861334c-53.205333-37.973333-99.754667 9.472-132.992 37.888-39.893333 37.973333-46.549333 37.973333-59.861333 28.458666-59.818667-85.333333-139.648-85.333333-212.778667 0-39.893333 47.402667-46.506667 37.930667-73.130666 0-6.656-18.944-26.581333-56.874667-66.517334-66.346666H272.64c-26.624 0-53.205333 28.416-73.173333 47.36l-19.925334-66.346667 6.656-9.472z m558.506667 436.138667c0 28.458667-26.581333 47.402667-46.506667 47.402666H325.802667c-19.925333 0-39.893333-28.416-53.162667-66.346666l-19.968-104.32C259.328 512 265.984 512 272.64 512c13.269333 0 26.581333 18.944 39.893333 37.930667 13.269333 28.458667 39.893333 56.874667 73.130667 56.874666 26.581333 9.472 53.205333-9.472 79.786667-37.930666 26.581333-37.930667 86.442667-85.333333 139.648 0 46.506667 66.389333 99.712 18.986667 132.992-18.944 13.269333-9.472 26.581333-28.458667 33.237333-28.458667l-6.656 18.986667-19.925333 104.277333z" p-id="100244" fill="#195f84"></path></svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

@@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1755842379560" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7948" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M511.708 493.574c231.86 0 481.282-50.776 481.282-162.192-0.012-19.934-16.182-36.086-36.116-36.072-19.922 0.014-36.062 16.156-36.076 36.072 0 4.094-18.052 30.082-104.078 54.386-80.972 22.982-189.264 36.096-305.012 36.096-115.754 0-224.046-12.034-305.02-36.096-86.03-24.062-104.08-50.292-104.08-54.386 0-19.934-16.158-36.092-36.094-36.092-19.938 0-36.098 16.16-36.098 36.092 0 111.416 249.548 162.192 481.292 162.192z m23.94 439.302c-27.316 0-55.47 0-83.022-0.966-13.292-0.496-24.47 9.874-24.97 23.158-0.496 13.292 9.872 24.472 23.164 24.968 20.212 0.722 40.672 1.086 60.886 1.086h24.058c13.292 0 24.062-10.78 24.062-24.062 0.068-13.292-10.652-24.118-23.946-24.184h-0.232z m366.614-63.54l-10.098 4.7c-12.164 5.38-17.66 19.606-12.276 31.762 5.376 12.168 19.604 17.66 31.764 12.278l12.034-5.414c11.958-5.914 16.864-20.408 10.946-32.372-5.916-11.96-20.404-16.864-32.37-10.954z m-260.254 58.24l-12.034 0.958c-13.292 0.504-23.654 11.68-23.158 24.97s11.676 23.66 24.964 23.162h1.808l12.032-0.96c13.274-1.258 23.006-13.034 21.752-26.3-1.22-12.912-12.418-22.542-25.364-21.83z m-272.046-0.958l-12.032-1.208c-13.296-1.262-25.098 8.496-26.362 21.79-1.252 13.208 8.36 24.958 21.548 26.34l12.032 1.206h3.132c13.292 0.462 24.442-9.932 24.906-23.22 0.462-13.29-9.932-24.448-23.224-24.908z m-105.278-14.204a794.598 794.598 0 0 1-79.536-18.532c-12.756-3.724-26.122 3.594-29.848 16.348-3.728 12.758 3.592 26.126 16.348 29.85 0.008 0.008 0.016 0.008 0.024 0.008a837.336 837.336 0 0 0 84.222 19.73c13.042 2.712 25.804-5.664 28.516-18.702 2.71-13.032-5.664-25.798-18.7-28.516a57.892 57.892 0 0 0-1.026-0.186z m540.242-9.744c-24.79 5.892-51.974 11.072-80.616 15.402-13.292 0.962-23.284 12.512-22.318 25.806 0.962 13.292 12.52 23.28 25.806 22.316h3.612c30.078-4.446 58.598-9.98 84.226-16.234 13.01-3.16 20.992-16.278 17.836-29.288-3.09-12.722-15.73-20.696-28.546-18.002z m-325.948-79.65c-13.292 0-24.066 10.77-24.066 24.066 0 13.286 10.776 24.06 24.066 24.06h12.03c13.292-0.01 24.058-10.792 24.054-24.08-0.01-13.278-10.774-24.042-24.054-24.046h-12.03z m275.172 29h4.096l12.028-2.172c13.148-1.938 22.242-14.17 20.296-27.316-1.944-13.144-14.166-22.234-27.32-20.294a31.2 31.2 0 0 0-1.758 0.326l-12.034 2.046c-12.904 3.172-20.792 16.216-17.612 29.124a24.08 24.08 0 0 0 22.304 18.286z m-97.102-35.378c-26.83 2.524-54.62 4.33-82.66 5.416-13.292 0.258-23.846 11.25-23.578 24.546 0.258 13.292 11.25 23.844 24.542 23.578h0.966a1480.574 1480.574 0 0 0 85.304-5.656c13.262-0.852 23.326-12.298 22.466-25.566-0.86-13.258-12.302-23.316-25.566-22.462-0.488 0.034-0.98 0.086-1.474 0.144z m-272.768 1.562c-28.27-2.284-55.946-5.414-82.176-9.27-13.292-1.918-25.628 7.292-27.556 20.582-1.924 13.288 7.284 25.624 20.576 27.546 27.196 3.972 55.952 7.222 85.19 9.628h2.048c13.398 0.266 24.47-10.39 24.736-23.792 0.25-13.014-9.814-23.918-22.818-24.694z m-100.946-48.008c19.936 1.668 37.446-13.148 39.104-33.082 1.66-19.94-13.152-37.45-33.09-39.11C137.14 672.138 102.73 631.708 102.73 625.81c0-19.936-16.16-36.1-36.096-36.1s-36.096 16.164-36.096 36.1c0 84.224 134.158 124.776 246.782 144.384a37.5 37.5 0 0 0 6.014 0.002zM956.892 589.71c-19.938 0-36.096 16.164-36.096 36.1 0 5.048-23.106 36.092-132.352 61.846-19.404 4.584-31.418 24.032-26.84 43.438 4.596 19.398 24.04 31.416 43.436 26.828 125.138-29.476 188.544-73.876 188.544-132.352-0.128-19.938-16.392-35.99-36.328-35.86h-0.364z" p-id="7949" fill="#1296db"></path><path d="M149.774 307.44c15.482 12.558 38.214 10.19 50.772-5.292h0.004l94.692-116.712c16.758-20.634 47.068-23.776 67.7-7.02 0.546 0.442 1.084 0.896 1.61 1.362l172.18 152.686c14.72 13.514 37.604 12.54 51.12-2.182 13.512-14.72 12.542-37.606-2.176-51.118-0.274-0.246-0.54-0.488-0.82-0.724L495.7 199.51l78.69-81.698c16.284-16.794 42.674-18.412 60.88-3.73l197.934 161.11c15.692 12.294 38.378 9.54 50.676-6.154 11.96-15.266 9.714-37.254-5.076-49.794L681.116 58.012c-47.374-38.08-115.928-33.916-158.342 9.626l-80.734 84.224-29.12-25.75c-49.718-44.09-125.762-39.534-169.858 10.182a130.678 130.678 0 0 0-3.404 4.016L144.96 257.02c-12.428 15.304-10.286 37.748 4.814 50.42zM358.29 534.484h72.194v222H358.29z m100.11 11.552h72.198v221.996H458.4z m100.108 0H630.7v221.996h-72.192z m100.226-11.552h72.196v222h-72.196z" p-id="7950" fill="#1296db"></path></svg>

Before

Width:  |  Height:  |  Size: 4.4 KiB

View File

@@ -1 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1755506499906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1515" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M616.035556 933.688889c-133.333333 0-253.966222-69.852444-330.154667-177.777778l19.043555-12.700444c69.838222 107.939556 184.128 171.420444 311.111112 171.420444 203.171556 0 368.256-165.077333 368.256-368.234667 0-203.185778-165.084444-368.263111-368.256-368.263111-120.632889-6.350222-228.565333 50.794667-298.410667 152.376889l-19.043556-12.700444C374.769778 216.227556 489.052444 152.739556 616.035556 152.739556c215.879111 0 393.649778 177.777778 393.649777 393.656888 0 215.850667-177.770667 387.292444-393.649777 387.292445z m0 0" p-id="1516" fill="#1296db"></path><path d="M616.035556 947.911111c-132.757333 0-260.529778-68.707556-341.774223-183.800889l-8.426666-11.932444 43.192889-28.807111 7.836444 12.103111c67.818667 104.817778 176.860444 164.928 299.164444 164.928 195.214222 0 354.033778-158.812444 354.033778-354.012445 0-195.221333-158.819556-354.040889-354.033778-354.040889l-0.746666-0.021333a338.631111 338.631111 0 0 0-17.386667-0.455111c-106.574222 0-204.451556 53.468444-268.551111 146.695111l-7.943111 11.555556-43.221333-28.814223 9.024-12.024888c81.393778-108.522667 201.244444-170.766222 328.832-170.766223 224.903111 0 407.872 182.976 407.872 407.879111 0 221.397333-182.968889 401.514667-407.872 401.514667z" fill="#1296db" p-id="1517"></path><path d="M819.207111 349.560889L616.035556 495.594667c-25.393778 0-44.444444 25.408-44.444445 57.144889 0 31.744 19.050667 57.137778 44.444445 57.137777 25.408 0 44.451556-19.050667 44.451555-50.787555l158.72-209.528889z m0 0" p-id="1518" fill="#1296db"></path><path d="M541.326222 642.126222c-34.794667-20.878222-65.358222-30.599111-96.206222-30.599111-30.840889 0-61.411556 9.720889-96.199111 30.599111-30.186667 18.112-54.840889 26.545778-77.603556 26.545778-22.513778 0-45.475556-8.327111-72.846222-26.545778-34.318222-20.593778-65.521778-30.599111-95.409778-30.599111-30.136889 0-59.975111 10.126222-91.221333 30.961778L0 650.375111l28.252444 42.382222L39.964444 685.44c23.630222-14.776889 43.427556-21.660444 62.300445-21.660444s38.670222 6.883556 62.208 21.596444c37.596444 23.914667 72.284444 35.541333 106.048 35.541333s68.444444-11.626667 106.048-35.541333l0.632889-0.433778c36.992-26.410667 81.173333-23.829333 130.225778 6.840889l11.079111 6.926222 36.337777-48.469333-13.518222-8.113778z" fill="#1296db" p-id="1519"></path><path d="M541.326222 508.807111c-34.794667-20.885333-65.358222-30.606222-96.206222-30.606222-30.840889 0-61.411556 9.728-96.199111 30.606222-30.186667 18.104889-54.840889 26.538667-77.603556 26.538667-22.513778 0-45.475556-8.32-72.846222-26.538667-34.311111-20.593778-65.521778-30.606222-95.409778-30.606222-30.136889 0-59.975111 10.126222-91.228444 30.968889L0 517.063111l28.259556 42.346667 11.704888-7.310222c21.098667-13.184 39.729778-19.335111 58.631112-19.335112 18.894222 0 38.819556 5.888 66.510222 19.676445 37.347556 23.651556 71.843556 35.150222 105.415111 35.150222 33.763556 0 68.451556-11.633778 105.464889-35.207111 41.479111-23.687111 87.153778-21.617778 131.441778 6.072889l11.079111 6.926222 36.344889-48.462222-13.525334-8.113778z" fill="#1296db" p-id="1520"></path><path d="M541.326222 381.809778c-34.794667-20.878222-65.365333-30.599111-96.206222-30.599111s-61.411556 9.720889-96.199111 30.599111c-30.186667 18.104889-54.840889 26.538667-77.603556 26.538666-22.513778 0-45.475556-8.32-72.846222-26.538666-34.311111-20.593778-65.521778-30.599111-95.409778-30.599111-30.136889 0-59.975111 10.126222-91.221333 30.961777L0 390.065778l28.252444 42.368 11.704889-7.317334c23.630222-14.769778 43.427556-21.646222 62.300445-21.646222s38.670222 6.876444 62.208 21.589334c37.596444 23.921778 72.284444 35.555556 106.048 35.555555s68.444444-11.626667 106.048-35.555555l0.632889-0.426667c36.992-26.432 81.180444-23.829333 130.225777 6.833778l11.079112 6.926222 36.344888-48.462222-13.518222-8.120889z" fill="#1296db" p-id="1521"></path><path d="M700.693333 80.590222c-100.885333-15.523556-162.958222 0-162.958222 0v31.04c15.516444 0 31.04 0 38.784 7.751111v46.563556h77.610667v-54.314667c31.04 0 46.563556-7.758222 46.563555-7.758222v-23.281778z m0 0M868.608 246.343111l40.917333-40.903111 71.587556 61.354667-20.458667 20.458666-20.458666 30.684445-71.587556-71.594667z m0 0" p-id="1522" fill="#1296db"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1761795430667" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="35183" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#0094BC" opacity=".7" p-id="35184"></path><path d="M512 25.6a486.4 486.4 0 0 0-343.771429 830.171429A486.4 486.4 0 0 0 855.771429 168.228571 483.218286 483.218286 0 0 0 512 25.6m0-25.6A512 512 0 1 1 0 512 512 512 0 0 1 512 0z" fill="#00AEDB" opacity=".7" p-id="35185"></path><path d="M765.366857 376.502857l9.289143-13.860571 13.531429-13.568-47.542858-41.289143-20.004571 20.370286a269.604571 269.604571 0 0 0-150.235429-63.634286v-19.236572a73.142857 73.142857 0 0 0 31.012572-5.376v-15.616a304.457143 304.457143 0 0 0-108.470857 0v20.918858a38.729143 38.729143 0 0 1 25.6 5.083428v14.226286a275.894857 275.894857 0 0 0-192.731429 113.188571l-5.924571 8.192 36.169143 25.234286 5.156571-7.314286a207.030857 207.030857 0 0 1 172.434286-94.317714h11.629714a226.742857 226.742857 0 1 1-191.634286 348.196571l-5.156571-7.862857-36.571429 24.064 5.632 7.936a281.6 281.6 0 0 0 227.949715 122.770286 269.824 269.824 0 0 0 219.757714-427.885714z m-211.309714 122.514286h-5.083429a38.180571 38.180571 0 0 0 0 76.397714h2.816a38.985143 38.985143 0 0 0 35.510857-38.180571l102.4-136.082286z m-169.033143 130.121143a73.142857 73.142857 0 0 1 86.784 4.534857l7.314286 4.534857 24.246857-39.168-8.996572-5.376a120.685714 120.685714 0 0 0-63.963428-20.662857 122.258286 122.258286 0 0 0-64.256 20.662857 102.4 102.4 0 0 1-51.565714 17.554286 86.272 86.272 0 0 1-48.457143-17.554286 122.806857 122.806857 0 0 0-63.670857-20.662857 109.019429 109.019429 0 0 0-60.891429 20.662857l-7.021714 12.032 18.870857 28.306286 9.289143-4.827429a78.372571 78.372571 0 0 1 40.009143-13.312 80.932571 80.932571 0 0 1 41.435428 14.372572 130.669714 130.669714 0 0 0 70.729143 24.027428 130.962286 130.962286 0 0 0 70.436571-23.771428z m-222.317714-82.468572a72.484571 72.484571 0 0 1 38.875428-12.726857 101.668571 101.668571 0 0 1 44.507429 13.019429 129.536 129.536 0 0 0 70.144 23.478857 129.536 129.536 0 0 0 70.144-23.478857 80.859429 80.859429 0 0 1 87.771428 4.242285l7.314286 4.534858 24.246857-39.460572-8.996571-5.376a122.514286 122.514286 0 0 0-63.963429-20.370286 123.318857 123.318857 0 0 0-64.256 20.370286 101.156571 101.156571 0 0 1-51.565714 17.810286 87.771429 87.771429 0 0 1-48.749714-17.810286 124.342857 124.342857 0 0 0-63.378286-20.370286 108.470857 108.470857 0 0 0-60.891429 20.662858l-9.289142 5.376 18.870857 35.218285z m0-84.845714a77.860571 77.860571 0 0 1 40.009143-14.445714 78.409143 78.409143 0 0 1 41.398857 14.445714 130.084571 130.084571 0 0 0 70.729143 23.734857 129.243429 129.243429 0 0 0 70.436571-23.734857 73.837714 73.837714 0 0 1 87.332571 4.242286l7.314286 4.827428 24.246857-39.460571-8.996571-5.376a122.514286 122.514286 0 0 0-63.963429-20.370286 124.342857 124.342857 0 0 0-64.256 20.370286 100.315429 100.315429 0 0 1-51.565714 17.810286 86.857143 86.857143 0 0 1-48.457143-17.810286 122.221714 122.221714 0 0 0-63.634286-20.406857 109.019429 109.019429 0 0 0-60.854857 20.662857l-7.899428 5.083428 18.870857 35.218286z" fill="#FFFFFF" opacity=".8" p-id="35186"></path></svg>

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@@ -1 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1755506522843" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4819" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 1024c-137.385335 0-265.984399-52.717629-362.633385-148.567863C53.516381 779.581903 0.798752 650.982839 0.798752 512.798752c0-281.959438 229.24181-511.201248 511.201248-511.201248s511.201248 229.24181 511.201248 511.201248c0 137.385335-52.717629 265.984399-148.567863 362.633385-96.648986 95.850234-225.24805 148.567863-362.633385 148.567863z m0-987.25741C249.210608 36.74259 35.943838 250.00936 35.943838 512.798752s214.065523 476.056162 476.056162 476.056162c262.789392 0 476.056162-214.065523 476.056162-476.056162S774.789392 36.74259 512 36.74259z" fill="#FFB700" p-id="4820"></path><path d="M568.711388 853.865835V769.99688h47.126366v83.868955h-47.126366z m-79.875195 0V769.99688H535.163807v83.868955h-46.327614z m-83.868954 0V769.99688h47.126365v83.868955h-47.126365zM512 543.151326c-6.390016 0-13.578783 0-16.773791-3.195008-6.390016-3.195008-13.578783-13.578783-16.773791-19.968798-3.195008-10.383775 0-16.773791 3.195008-26.358815 6.390016-10.383775 16.773791-16.773791 30.352574-16.773791 6.390016 0 13.578783 0 16.773791 3.195008 6.390016 3.195008 13.578783 13.578783 16.773791 19.968799 3.195008 10.383775 0 16.773791-3.195008 26.358814-3.99376 9.585023-16.773791 16.773791-30.352574 16.773791z m353.847114-36.74259v-30.352574h79.875195v30.352574h-79.875195z m-791.563183 0v-30.352574h79.875195v30.352574h-79.875195z m260.393136-154.159126L495.226209 465.672387c-6.390016 3.195008-10.383775 6.390016-16.773791 13.578783-3.195008 6.390016-6.390016 10.383775-10.383775 16.773791l-133.391576-143.775351z m420.942278-87.063963l56.711388-56.711388 19.968799 19.968799-56.711388 56.711388-19.968799-19.968799z m-574.302652-36.742589l23.163806-23.163807 56.711389 56.711389-23.163807 23.163806-56.711388-56.711388zM495.226209 171.731669v-79.875195h30.352574v79.875195H495.226209z" fill="#FFB700" p-id="4821"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1761795521880" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="48107" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 1018.88A506.88 506.88 0 1 1 1018.88 512 507.392 507.392 0 0 1 512 1018.88z" fill="#FFB624" p-id="48108"></path><path d="M512 10.24A501.76 501.76 0 1 1 10.24 512 502.272 502.272 0 0 1 512 10.24m0-10.24a512 512 0 1 0 512 512A512 512 0 0 0 512 0z" fill="#FFFFFF" p-id="48109"></path><path d="M346.282667 826.709333h17.066666V904.533333h24.917334v-78.506666h17.066666v-90.624a326.826667 326.826667 0 0 1-57.514666-28.842667zM443.733333 826.709333h17.066667V904.533333h24.917333v-78.506666h17.066667v-69.632a327.68 327.68 0 0 1-57.514667-8.533334zM541.184 826.709333h17.066667V904.533333h24.917333v-78.506666h17.066667v-78.336a327.68 327.68 0 0 1-57.514667 8.533333zM638.634667 826.709333h17.066666V904.533333h24.917334v-78.506666h17.066666v-119.466667a326.826667 326.826667 0 0 1-57.514666 28.842667z" fill="#FFFFFF" p-id="48110"></path><path d="M830.293333 367.616l-34.133333 6.826667c-1.024-5.12-2.218667-10.24-3.413333-15.189334l34.133333-8.533333a312.661333 312.661333 0 0 0-34.133333-81.066667l-30.037334 17.066667q-3.925333-6.656-8.362666-13.312l29.184-19.456a316.416 316.416 0 0 0-58.197334-65.536l-22.698666 26.624q-5.973333-5.12-12.117334-9.728l20.992-27.818667a313.856 313.856 0 0 0-76.458666-42.837333l-12.458667 32.597333-14.848-5.290666 10.752-34.133334a314.197333 314.197333 0 0 0-86.357333-15.018666l-1.194667 34.133333h-15.530667v-34.133333a314.88 314.88 0 0 0-86.528 13.653333l10.410667 34.133333-14.677333 4.949334-12.117334-32.597334a313.685333 313.685333 0 0 0-77.141333 41.642667l20.650667 27.989333q-6.314667 4.608-12.288 9.557334l-23.210667-26.112a316.757333 316.757333 0 0 0-59.050667 64.682666L290.133333 270.677333q-4.437333 6.485333-8.362666 13.141334l-29.866667-18.090667a312.661333 312.661333 0 0 0-34.133333 80.554667l34.133333 9.045333q-2.048 7.509333-3.584 15.189333l-34.133333-7.338666a315.050667 315.050667 0 1 0 617.130666 4.437333z m-254.464 83.626667a54.613333 54.613333 0 1 1-58.026666-54.272l104.277333-139.605334-50.176 174.08a54.272 54.272 0 0 1 3.925333 19.968z" fill="#FFFFFF" p-id="48111"></path></svg>

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@@ -1 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1755842421313" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10326" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M921.6 795.1872c-0.2048-85.1712-0.2048-170.2144-0.2048-255.2576 0-85.0688 0-170.1376-0.2048-255.2832 0-14.4384-1.664-28.8768-4.1216-43.3152-2.4832-17.7408-16.512-28.8768-34.2272-28.8768h-323.328c-12.3648 0-23.5008 1.664-34.2272 7.8592-10.3168 5.76-18.56 13.5936-18.1504 25.9584v0.8448c0.4096 11.9552 7.8336 21.0176 18.1504 24.7296 11.136 4.1216 23.5008 7.0144 35.456 7.0144 40.448 0.2048 80.9472 0.2048 121.472 0.2048 40.4992 0 81.024 0 121.4464 0.2048 14.4384 0 28.4416 1.2288 42.4704 3.712 13.6192 2.4832 16.0768 6.6048 16.0768 20.224v128.256c0 7.8336-0.4096 15.6672-1.6384 23.0912-4.1216 20.1984-9.088 21.8368-25.984 10.7008-40.832-27.2128-85.376-26.8032-124.9536 1.664-28.0576 20.224-54.016 20.608-82.4832 0.8192-15.6672-10.7264-31.744-19.3792-50.7136-21.4528-27.648-3.2768-52.7872 2.4832-74.6496 19.4048-30.5152 23.5008-63.104 20.1984-87.8336 0.8192a96.7168 96.7168 0 0 0-50.3296-20.224c-29.696-3.2768-55.2448 5.376-78.7712 23.0912-18.1504 13.6192-39.168 18.56-59.392 9.4976-17.7152-8.2432-33.792-20.608-49.0496-33.408-16.1024-13.184-18.56-32.9984-18.56-52.7872V235.9808c0-23.1168 0-23.1168-21.9392-23.8848l-1.152-0.0512c-14.4384-0.4096-23.1168 7.0144-27.2384 18.56-4.096 11.5456-6.5792 24.32-6.5792 36.3008-0.4352 176.896-0.4352 353.024-0.4352 529.1008v9.472c-1.6384 22.272 24.32 46.208 47.872 46.208 90.5728-0.6144 180.9664-0.5376 271.4368-0.4608l90.624 0.0512c120.4224 0 240.8448 0 360.8576 0.8192h2.1504c5.12 0.0512 10.4192 0.1024 14.7456-2.048 22.6816-10.752 33.408-28.4672 33.408-54.0416v-0.8192z" fill="#10A4F7" p-id="10327"></path><path d="M406.5792 336.9216c17.5872 1.3824 29.184-5.5552 32.8704-19.456 6.016-22.656-6.4768-52.736-28.6976-66.6368-18.048 16.64-30.5408 36.096-27.3152 62.464 1.3824 13.44 10.1888 22.7072 23.1424 23.6288zM244.5824 334.592c-1.408-0.4608-2.7904-1.3824-4.1728-2.304-11.1104-8.3456-12.032-20.8384-11.1104-32.4096 1.3824-17.152 10.1888-31.488 22.6816-43.52 0.9216-1.3824 3.2512-1.8432 5.5552-1.8432 2.304-0.4608 4.608 0 6.016 0.9216 12.9536 8.8064 23.6032 32.8704 23.6032 48.6144 0 9.728-1.3824 18.9696-7.424 25.4464-2.304 1.8432-4.608 3.712-7.3728 5.12-8.8064 4.1472-18.9952 5.0688-27.776 0zM324.4288 335.2832c-0.256-0.1024-0.4608-0.2304-0.6912-0.2304-10.1888-3.2256-16.2048-11.5712-17.152-24.5248 0-1.8688 0-3.712-0.4608-8.8064 0.4864-17.5872 10.1888-33.792 24.5504-47.6672a11.6224 11.6224 0 0 1 4.608-0.9216c1.8688 0 4.1728 0.4608 5.12 1.3824 15.7184 15.2832 25.9072 33.3312 23.1424 56.4736-2.304 17.1264-12.5184 26.368-28.6976 25.9328h-2.304c-0.7168 0-1.408-0.128-2.0992-0.256a12.5184 12.5184 0 0 0-2.0992-0.2304 14.7712 14.7712 0 0 0-1.5872-0.4096 6.7328 6.7328 0 0 1-1.6384-0.512c-0.256 0-0.4608-0.1024-0.6912-0.2304z" fill="#10A4F7" p-id="10328"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1761731943832" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="44394" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1024 1024H0V0h1024v1024z" fill="#CECFFF" p-id="44395"></path><path d="M0 0v1024h1024V0H0z m960 960H64v-192h896v192zM64 704V64h896v640H64z m256 192v-64H128v64h192z m320-64H384v64h256v-64z m256 0h-192v64h192v-64zM832 128H512a254.912 254.912 0 0 0-167.552 448H192v64h320a254.912 254.912 0 0 0 167.552-448H832V128z m-128 256a192 192 0 1 1-192-192 192 192 0 0 1 192 192zM576 384a64 64 0 1 1-64-64 64 64 0 0 1 64 64z" fill="#151883" p-id="44396"></path></svg>

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 788 B

1
public/icons/valve.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1761789564862" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="70077" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M513.640525 513.911813m-510.088186 0a510.088187 510.088187 0 1 0 1020.176373 0 510.088187 510.088187 0 1 0-1020.176373 0Z" fill="#F1C339" p-id="70078"></path><path d="M483.307444 389.380334v-87.682364H351.164541c-17.997151 0-32.651827-14.204236-32.651827-31.628099 0-17.428981 14.670032-31.633217 32.651827-31.633217h320.186511c17.986913 0 32.64159 14.204236 32.64159 31.633217 0 17.613252-14.654677 31.628099-32.631353 31.628099h-131.948393v87.677246h10.349897c12.315456 0 22.286574 9.65888 22.286574 21.590438v51.590809l-121.393751-0.194509v-51.391181c0-11.931558 9.965999-21.590439 22.286574-21.590439h10.365254z m-217.450216 336.248814v36.362844c0 5.302915-4.463457 9.663999-10.078609 9.663999h-25.792845c-5.620271 0-10.083728-4.361084-10.083728-9.853389V529.226795c0-5.487186 4.463457-9.84827 10.083728-9.84827h25.792845c5.620271 0 10.078609 4.361084 10.078609 9.84827v47.352571h85.757754c3.572813-48.719249 45.141318-87.124432 95.918262-87.124432h118.471005c50.776944 0 92.345448 38.405183 95.928499 87.124432h85.942025v-47.736469c0-5.287559 4.268949-9.464372 9.704948-9.464372h26.366133c5.425762 0 9.689592 4.161457 9.689593 9.464372v233.333366c0.194508 5.313152-4.26383 9.479728-9.694711 9.479728h-26.371252c-5.425762 0-9.694711-4.161457-9.694711-9.479728v-36.547115h-92.304499c-14.009727 34.924505-48.821622 59.652672-89.566025 59.652672H447.533244c-40.739284 0-75.551179-24.71793-89.571144-59.652672H265.857228z" fill="#FFFFFF" p-id="70079"></path></svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@@ -18,7 +18,7 @@ import WebGLVectorTileLayer from "ol/layer/WebGLVectorTile";
import MVT from "ol/format/MVT";
import { FlatStyleLike } from "ol/style/flat";
import { toLonLat } from "ol/proj";
import { along, bearing, lineString, length } from "@turf/turf";
import { along, bearing, lineString, length, toMercator } from "@turf/turf";
import { Deck } from "@deck.gl/core";
import { TextLayer } from "@deck.gl/layers";
import { TripsLayer } from "@deck.gl/geo-layers";
@@ -26,7 +26,9 @@ import { CollisionFilterExtension } from "@deck.gl/extensions";
import VectorSource from "ol/source/Vector";
import GeoJson from "ol/format/GeoJSON";
import VectorLayer from "ol/layer/Vector";
import { Style, Icon } from "ol/style";
import { Icon, Style } from "ol/style.js";
import { FeatureLike } from "ol/Feature";
import { Point } from "ol/geom";
interface MapComponentProps {
children?: React.ReactNode;
@@ -189,6 +191,52 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
}),
});
};
// 定义 reservoirs 图层的样式函数,使用固定图标
const reservoirsStyle = () => {
const reserviorIcon = "/icons/reservior.svg";
return new Style({
image: new Icon({
src: reserviorIcon,
scale: 0.1, // 根据需要调整图标大小
anchor: [0.5, 0.5], // 图标锚点居中
}),
});
};
// 定义 valves 图层的样式函数,使用固定图标
const valvesStyle = function (feature: FeatureLike) {
const styles = [];
const valveIcon = "/icons/valve.svg";
const geometry = feature.getGeometry();
const lineCoords =
geometry?.getType() === "LineString"
? (geometry as any).getCoordinates()
: null;
if (geometry) {
const lineCoordsWGS84 = lineCoords.map((coord: []) => {
const [lon, lat] = toLonLat(coord);
return [lon, lat];
});
// 计算中点
const lineStringFeature = lineString(lineCoordsWGS84);
const lineLength = length(lineStringFeature);
const midPoint = along(lineStringFeature, lineLength / 2).geometry
.coordinates;
// 在中点添加 icon 样式
const midPointMercator = toMercator(midPoint);
styles.push(
new Style({
geometry: new Point(midPointMercator),
image: new Icon({
src: valveIcon,
scale: 0.12,
anchor: [0.5, 0.5],
}),
})
);
}
return styles;
};
// 矢量瓦片数据源和图层
const junctionSource = new VectorTileSource({
url: `${mapUrl}/gwc/service/tms/1.0.0/TJWater:geo_junctions_mat@WebMercatorQuad@pbf/{z}/{x}/{-y}.pbf`, // 替换为你的 MVT 瓦片服务 URL
@@ -204,6 +252,14 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
url: `${mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:geo_scada&outputFormat=application/json`,
format: new GeoJson(),
});
const reservoirsSource = new VectorSource({
url: `${mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:geo_reservoirs&outputFormat=application/json`,
format: new GeoJson(),
});
const valvesSource = new VectorSource({
url: `${mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:geo_valves&outputFormat=application/json`,
format: new GeoJson(),
});
// WebGL 渲染优化显示
const junctionLayer = new WebGLVectorTileLayer({
source: junctionSource as any, // 使用 WebGL 渲染
@@ -212,7 +268,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
maxZoom: 24,
minZoom: 12,
properties: {
name: "节点图层", // 设置图层名称
name: "节点", // 设置图层名称
value: "junctions",
type: "point",
properties: [
@@ -232,7 +288,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
maxZoom: 24,
minZoom: 12,
properties: {
name: "管道图层", // 设置图层名称
name: "管道", // 设置图层名称
value: "pipes",
type: "linestring",
properties: [
@@ -263,6 +319,32 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
properties: [],
},
});
const reservoirsLayer = new VectorLayer({
source: reservoirsSource,
style: reservoirsStyle,
extent: extent, // 设置图层范围
maxZoom: 24,
minZoom: 12,
properties: {
name: "水库", // 设置图层名称
value: "reservoirs",
type: "point",
properties: [],
},
});
const valvesLayer = new VectorLayer({
source: valvesSource,
style: valvesStyle,
extent: extent, // 设置图层范围
maxZoom: 24,
minZoom: 12,
properties: {
name: "阀门", // 设置图层名称
value: "valves",
type: "linestring",
properties: [],
},
});
useEffect(() => {
if (!mapRef.current) return;
// 缓存 junction、pipe 数据,提供给 deck.gl 显示标签使用
@@ -396,10 +478,17 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
const map = new OlMap({
target: mapRef.current,
view: new View({
maxZoom: 24,
projection: "EPSG:3857",
}),
// 图层依面、线、点、标注次序添加
layers: [pipeLayer, junctionLayer, scadaLayer],
layers: [
pipeLayer,
junctionLayer,
valvesLayer,
scadaLayer,
reservoirsLayer,
],
controls: [],
});
setMap(map);

View File

@@ -44,12 +44,25 @@ import { useMap } from "@app/OlMap/MapComponent";
import { GeoJSON } from "ol/format";
import { Point } from "ol/geom";
import config from "@/config/config";
const STATUS_OPTIONS: {
value: "online" | "offline" | "warning" | "error";
name: "在线" | "离线" | "警告" | "错误";
}[] = [
{ value: "online", name: "在线" },
{ value: "offline", name: "离线" },
{ value: "warning", name: "警告" },
{ value: "error", name: "错误" },
];
interface SCADADevice {
id: string;
name: string;
type: string;
coordinates: [number, number];
status: "在线" | "离线" | "警告" | "错误";
status: {
value: "online" | "offline" | "warning" | "error";
name: "在线" | "离线" | "警告" | "错误";
};
properties?: Record<string, any>;
}
@@ -127,9 +140,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
id: feature.get("id") || feature.getId(),
name: feature.get("id") || feature.getId(),
type: feature.get("type") === "pipe_flow" ? "流量" : "压力",
status: ["在线", "离线", "警告", "错误"][
Math.floor(Math.random() * 4)
] as "在线" | "离线" | "警告" | "错误",
status: STATUS_OPTIONS[Math.floor(Math.random() * 4)],
coordinates: (feature.getGeometry() as Point)?.getCoordinates() as [
number,
number
@@ -137,7 +148,6 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
properties: feature.getProperties(),
}));
setInternalDevices(data);
console.log("Fetched SCADA devices:", data);
} catch (error) {
console.error("Error fetching SCADA devices:", error);
} finally {
@@ -158,12 +168,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
}, [effectiveDevices]);
// 获取设备状态列表
const deviceStatuses = useMemo(() => {
const statuses = Array.from(
new Set(effectiveDevices.map((device) => device.status))
);
return statuses.sort();
}, [effectiveDevices]);
const deviceStatuses = STATUS_OPTIONS;
// 创建设备索引 Map使用设备 ID 作为键
const deviceIndex = useMemo(() => {
@@ -176,29 +181,20 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
// 过滤设备列表
const filteredDevices = useMemo(() => {
if (
searchQuery === "" &&
selectedType === "all" &&
selectedStatus === "all"
) {
return effectiveDevices;
}
const searchLower = searchQuery.toLowerCase();
return effectiveDevices.filter((device) => {
if (searchQuery === "") return true;
const searchLower = searchQuery.toLowerCase();
const nameLower = device.name.toLowerCase();
const idLower = device.id.toLowerCase();
const matchesSearch =
searchQuery === "" ||
nameLower.indexOf(searchLower) !== -1 ||
idLower.indexOf(searchLower) !== -1;
const matchesType =
selectedType === "all" || device.type === selectedType;
const matchesStatus =
selectedStatus === "all" || device.status === selectedStatus;
selectedStatus === "all" || device.status.value === selectedStatus;
return matchesSearch && matchesType && matchesStatus;
});
@@ -396,8 +392,8 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
>
<MenuItem value="all"></MenuItem>
{deviceStatuses.map((status) => (
<MenuItem key={status} value={status}>
{status}
<MenuItem key={status.value} value={status.value}>
{status.name}
</MenuItem>
))}
</Select>
@@ -486,12 +482,14 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
<Typography
variant="caption"
sx={{
color: `${getStatusColor(device.status)}.main`,
color: `${getStatusColor(
device.status.value
)}.main`,
fontWeight: "bold",
fontSize: 16,
}}
>
{getStatusIcon(device.status)}
{getStatusIcon(device.status.value)}
</Typography>
</ListItemIcon>