实现 SCADA 设备列表数据对接；监测点优化，实现传感器定位；爆管分析，属性面板新增计算属性的获取；更新部分图标；爆管分析定位，更改时间轴样式。
This commit is contained in:
JIANG
11
package-lock.json
generated
11
package-lock.json
generated
@@ -37,6 +37,7 @@
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-window": "^2.2.2",
|
||||
"tailwindcss": "^4.1.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -16460,6 +16461,16 @@
|
||||
"react": "^16.6.3 || ^17.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-window": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/react-window/-/react-window-2.2.2.tgz",
|
||||
"integrity": "sha512-kvHKwFImKBWNbx2S87NZOhQhAVkBthjmnOfHlhQI45p3A+D+V53E+CqQMsyHrxNe3ke+YtWXuKDa1eoHAaIWJg==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/readable-stream": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
|
||||
|
||||
@@ -42,6 +42,7 @@
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-window": "^2.2.2",
|
||||
"tailwindcss": "^4.1.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
1
public/icons/burst_pipe.svg
Normal file
1
public/icons/burst_pipe.svg
Normal 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="1761560991415" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4672" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M64 416L160 512H256l64 64 96 32 64-32 96 32 96-32 32-64h160l32-32L960 384v384h-96v-64h-704v64H64V416z" fill="#d81e06" opacity=".1" p-id="4673"></path><path d="M960 800h-96L832 768v-32H192v32l-32 32H64L32 768V384l32-32h96L192 384v32h64l25.6 6.4 57.6 57.6 76.8 32 51.2-25.6h25.6L576 512l44.8-19.2 25.6-57.6 25.6-19.2H832V384l32-32H960l32 32v384l-32 32z m-64-64h32v-320H896V448l-32 32h-172.8l-25.6 44.8-12.8 12.8-64 32-25.6 6.4-83.2-32-51.2 25.6-25.6 6.4-96-32-12.8-6.4-51.2-57.6H160L128 448v-32h-32v320H128V704l32-32h704l32 32v32z" fill="#d81e06" p-id="4674"></path><path d="M736 320l-64-32-32 128L736 320zM544 256L448 288 544 384V256zM384 352L320 384l128 64-64-96z" fill="#d81e06" p-id="4675"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -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="1761204792054" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12884" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M64 416L160 512H256l64 64 96 32 64-32 96 32 96-32 32-64h160l32-32L960 384v384h-96v-64h-704v64H64V416z" fill="#2D8DFE" opacity=".1" p-id="12885"></path><path d="M960 800h-96L832 768v-32H192v32l-32 32H64L32 768V384l32-32h96L192 384v32h64l25.6 6.4 57.6 57.6 76.8 32 51.2-25.6h25.6L576 512l44.8-19.2 25.6-57.6 25.6-19.2H832V384l32-32H960l32 32v384l-32 32z m-64-64h32v-320H896V448l-32 32h-172.8l-25.6 44.8-12.8 12.8-64 32-25.6 6.4-83.2-32-51.2 25.6-25.6 6.4-96-32-12.8-6.4-51.2-57.6H160L128 448v-32h-32v320H128V704l32-32h704l32 32v32z" fill="#2D8DFE" p-id="12886"></path><path d="M736 320l-64-32-32 128L736 320zM544 256L448 288 544 384V256zM384 352L320 384l128 64-64-96z" fill="#2D8DFE" p-id="12887"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
1
public/icons/pump.svg
Normal file
1
public/icons/pump.svg
Normal 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="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>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
1
public/icons/reservoirs.svg
Normal file
1
public/icons/reservoirs.svg
Normal 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="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>
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
1
public/icons/scada_flow.svg
Normal file
1
public/icons/scada_flow.svg
Normal 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="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>
|
||||
|
After Width: | Height: | Size: 4.5 KiB |
1
public/icons/scada_pressure.svg
Normal file
1
public/icons/scada_pressure.svg
Normal 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="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>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
1
public/icons/sensor.svg
Normal file
1
public/icons/sensor.svg
Normal 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="1761636517774" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14244" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M747.054545 142.894545A335.127273 335.127273 0 0 0 279.272727 142.894545a325.818182 325.818182 0 0 0 0 465.454546 725.178182 725.178182 0 0 1 208.523637 333.730909c3.258182 8.843636 14.429091 34.909091 25.6 34.909091 11.170909 0 22.341818-26.065455 25.6-34.909091a725.178182 725.178182 0 0 1 208.523636-333.730909 325.818182 325.818182 0 0 0 0-465.454546z" fill="#D1A900" p-id="14245"></path><path d="M512 377.949091m-251.345455 0a251.345455 251.345455 0 1 0 502.69091 0 251.345455 251.345455 0 1 0-502.69091 0Z" fill="#F5F8FF" p-id="14246"></path><path d="M512 527.825455m-33.047273 0a33.047273 33.047273 0 1 0 66.094546 0 33.047273 33.047273 0 1 0-66.094546 0Z" fill="#D1A900" p-id="14247"></path><path d="M512 411.461818A116.363636 116.363636 0 0 0 413.789091 465.454545l20.945454 23.738182a85.643636 85.643636 0 0 1 154.53091 0l20.945454-23.738182A116.829091 116.829091 0 0 0 512 411.461818z" fill="#D1A900" p-id="14248"></path><path d="M512 328.610909a199.214545 199.214545 0 0 0-154.530909 73.541818l20.48 23.272728a167.098182 167.098182 0 0 1 267.636364 0l20.48-23.272728A197.818182 197.818182 0 0 0 512 328.610909z" fill="#D1A900" p-id="14249"></path><path d="M512 245.76a279.272727 279.272727 0 0 0-209.454545 93.090909l19.54909 22.807273a250.88 250.88 0 0 1 379.345455 0l20.014545-22.807273a279.272727 279.272727 0 0 0-209.454545-93.090909z" fill="#D1A900" p-id="14250"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
1
public/icons/tank.svg
Normal file
1
public/icons/tank.svg
Normal 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="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>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
@@ -8,7 +8,7 @@ export default function Home() {
|
||||
return (
|
||||
<div className="relative w-full h-full overflow-hidden">
|
||||
<MapComponent>
|
||||
<MapToolbar />
|
||||
<MapToolbar queryType="scheme" />
|
||||
<BurstPipeAnalysisPanel />
|
||||
</MapComponent>
|
||||
</div>
|
||||
|
||||
@@ -14,35 +14,35 @@ const mockDevices = [
|
||||
name: "SCADA-001",
|
||||
type: "pressure",
|
||||
coordinates: [121.4737, 31.2304] as [number, number],
|
||||
status: "online" as const,
|
||||
status: "在线" as const,
|
||||
},
|
||||
{
|
||||
id: "SCADA-002",
|
||||
name: "SCADA-002",
|
||||
type: "flow",
|
||||
coordinates: [121.4807, 31.2204] as [number, number],
|
||||
status: "warning" as const,
|
||||
status: "警告" as const,
|
||||
},
|
||||
{
|
||||
id: "SCADA-003",
|
||||
name: "SCADA-003",
|
||||
type: "pressure",
|
||||
coordinates: [121.4607, 31.2354] as [number, number],
|
||||
status: "offline" as const,
|
||||
status: "离线" as const,
|
||||
},
|
||||
{
|
||||
id: "SCADA-004",
|
||||
name: "SCADA-004",
|
||||
type: "demand",
|
||||
coordinates: [121.4457, 31.2104] as [number, number],
|
||||
status: "online" as const,
|
||||
status: "在线" as const,
|
||||
},
|
||||
{
|
||||
id: "SCADA-005",
|
||||
name: "SCADA-005",
|
||||
type: "level",
|
||||
coordinates: [121.4457, 31.2104] as [number, number],
|
||||
status: "online" as const,
|
||||
status: "在线" as const,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -77,21 +77,21 @@ export default function Home() {
|
||||
return (
|
||||
<div className="relative w-full h-full overflow-hidden">
|
||||
<MapComponent>
|
||||
<MapToolbar />
|
||||
<MapToolbar queryType="realtime" />
|
||||
<Timeline />
|
||||
<SCADADeviceList
|
||||
devices={[]}
|
||||
onDeviceClick={handleDeviceClick}
|
||||
onSelectionChange={handleSelectionChange}
|
||||
selectedDeviceIds={selectedDeviceIds}
|
||||
/>
|
||||
<SCADADataPanel
|
||||
deviceIds={selectedDeviceIds}
|
||||
deviceLabels={deviceLabels}
|
||||
visible={panelVisible}
|
||||
onClose={handleClosePanel}
|
||||
/>
|
||||
</MapComponent>
|
||||
<SCADADeviceList
|
||||
devices={devices}
|
||||
onDeviceClick={handleDeviceClick}
|
||||
onSelectionChange={handleSelectionChange}
|
||||
selectedDeviceIds={selectedDeviceIds}
|
||||
/>
|
||||
<SCADADataPanel
|
||||
deviceIds={selectedDeviceIds}
|
||||
deviceLabels={deviceLabels}
|
||||
visible={panelVisible}
|
||||
onClose={handleClosePanel}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -13,35 +13,35 @@ const mockDevices = [
|
||||
name: "SCADA-001",
|
||||
type: "pressure",
|
||||
coordinates: [121.4737, 31.2304] as [number, number],
|
||||
status: "online" as const,
|
||||
status: "在线" as const,
|
||||
},
|
||||
{
|
||||
id: "SCADA-002",
|
||||
name: "SCADA-002",
|
||||
type: "flow",
|
||||
coordinates: [121.4807, 31.2204] as [number, number],
|
||||
status: "warning" as const,
|
||||
status: "警告" as const,
|
||||
},
|
||||
{
|
||||
id: "SCADA-003",
|
||||
name: "SCADA-003",
|
||||
type: "pressure",
|
||||
coordinates: [121.4607, 31.2354] as [number, number],
|
||||
status: "offline" as const,
|
||||
status: "离线" as const,
|
||||
},
|
||||
{
|
||||
id: "SCADA-004",
|
||||
name: "SCADA-004",
|
||||
type: "demand",
|
||||
coordinates: [121.4457, 31.2104] as [number, number],
|
||||
status: "online" as const,
|
||||
status: "在线" as const,
|
||||
},
|
||||
{
|
||||
id: "SCADA-005",
|
||||
name: "SCADA-005",
|
||||
type: "level",
|
||||
coordinates: [121.4457, 31.2104] as [number, number],
|
||||
status: "online" as const,
|
||||
status: "在线" as const,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -77,19 +77,19 @@ export default function Home() {
|
||||
<div className="relative w-full h-full overflow-hidden">
|
||||
<MapComponent>
|
||||
<MapToolbar hiddenButtons={["style"]} />
|
||||
<SCADADeviceList
|
||||
devices={[]}
|
||||
onDeviceClick={handleDeviceClick}
|
||||
onSelectionChange={handleSelectionChange}
|
||||
selectedDeviceIds={selectedDeviceIds}
|
||||
/>
|
||||
<SCADADataPanel
|
||||
deviceIds={selectedDeviceIds}
|
||||
deviceLabels={deviceLabels}
|
||||
visible={panelVisible}
|
||||
onClose={handleClosePanel}
|
||||
/>
|
||||
</MapComponent>
|
||||
<SCADADeviceList
|
||||
devices={devices}
|
||||
onDeviceClick={handleDeviceClick}
|
||||
onSelectionChange={handleSelectionChange}
|
||||
selectedDeviceIds={selectedDeviceIds}
|
||||
/>
|
||||
<SCADADataPanel
|
||||
deviceIds={selectedDeviceIds}
|
||||
deviceLabels={deviceLabels}
|
||||
visible={panelVisible}
|
||||
onClose={handleClosePanel}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useMap } from "../MapComponent";
|
||||
import { Layer } from "ol/layer";
|
||||
import { Checkbox, FormControlLabel } from "@mui/material";
|
||||
import WebGLVectorTileLayer from "ol/layer/WebGLVectorTile";
|
||||
import VectorLayer from "ol/layer/Vector";
|
||||
|
||||
const LayerControl: React.FC = () => {
|
||||
const map = useMap();
|
||||
@@ -16,7 +17,10 @@ const LayerControl: React.FC = () => {
|
||||
const mapLayers = map
|
||||
.getLayers()
|
||||
.getArray()
|
||||
.filter((layer) => layer instanceof WebGLVectorTileLayer) as Layer[];
|
||||
.filter(
|
||||
(layer) =>
|
||||
layer instanceof WebGLVectorTileLayer || layer instanceof VectorLayer
|
||||
) as Layer[];
|
||||
setLayers(mapLayers);
|
||||
const visible = new Map<Layer, boolean>();
|
||||
mapLayers.forEach((layer) => {
|
||||
|
||||
@@ -25,8 +25,9 @@ import { PlayArrow, Pause, Stop, Refresh } from "@mui/icons-material";
|
||||
import { TbRewindBackward15, TbRewindForward15 } from "react-icons/tb";
|
||||
import { FiSkipBack, FiSkipForward } from "react-icons/fi";
|
||||
import { useData } from "../MapComponent";
|
||||
import { config } from "@/config/config";
|
||||
import { config, NETWORK_NAME } from "@/config/config";
|
||||
import { useMap } from "../MapComponent";
|
||||
import { Network } from "inspector/promises";
|
||||
const backendUrl = config.backendUrl;
|
||||
|
||||
interface TimelineProps {
|
||||
@@ -69,6 +70,7 @@ const Timeline: React.FC<TimelineProps> = ({
|
||||
const [isPlaying, setIsPlaying] = useState<boolean>(false);
|
||||
const [playInterval, setPlayInterval] = useState<number>(5000); // 毫秒
|
||||
const [calculatedInterval, setCalculatedInterval] = useState<number>(15); // 分钟
|
||||
const [isCalculating, setIsCalculating] = useState<boolean>(false);
|
||||
|
||||
// 计算时间轴范围
|
||||
const minTime = timeRange
|
||||
@@ -105,6 +107,7 @@ const Timeline: React.FC<TimelineProps> = ({
|
||||
// 检查node缓存
|
||||
if (junctionProperties !== "") {
|
||||
const nodeCacheKey = `${query_time}_${junctionProperties}_${schemeName}`;
|
||||
console.log("Node Cache Key:", nodeCacheKey);
|
||||
if (nodeCacheRef.current.has(nodeCacheKey)) {
|
||||
nodeRecords = nodeCacheRef.current.get(nodeCacheKey)!;
|
||||
} else {
|
||||
@@ -121,7 +124,7 @@ const Timeline: React.FC<TimelineProps> = ({
|
||||
|
||||
// 检查link缓存
|
||||
if (pipeProperties !== "") {
|
||||
const linkCacheKey = `${query_time}_${pipeProperties}`;
|
||||
const linkCacheKey = `${query_time}_${pipeProperties}_${schemeName}`;
|
||||
if (linkCacheRef.current.has(linkCacheKey)) {
|
||||
linkRecords = linkCacheRef.current.get(linkCacheKey)!;
|
||||
} else {
|
||||
@@ -148,9 +151,9 @@ const Timeline: React.FC<TimelineProps> = ({
|
||||
if (!nodeResponse.ok)
|
||||
throw new Error(`Node fetch failed: ${nodeResponse.status}`);
|
||||
nodeRecords = await nodeResponse.json();
|
||||
// 缓存数据
|
||||
// 缓存数据（修复键以包含 schemeName）
|
||||
nodeCacheRef.current.set(
|
||||
`${query_time}_${junctionProperties}`,
|
||||
`${query_time}_${junctionProperties}_${schemeName}`,
|
||||
nodeRecords || []
|
||||
);
|
||||
}
|
||||
@@ -159,9 +162,9 @@ const Timeline: React.FC<TimelineProps> = ({
|
||||
if (!linkResponse.ok)
|
||||
throw new Error(`Link fetch failed: ${linkResponse.status}`);
|
||||
linkRecords = await linkResponse.json();
|
||||
// 缓存数据
|
||||
// 缓存数据（修复键以包含 schemeName）
|
||||
linkCacheRef.current.set(
|
||||
`${query_time}_${pipeProperties}`,
|
||||
`${query_time}_${pipeProperties}_${schemeName}`,
|
||||
linkRecords || []
|
||||
);
|
||||
}
|
||||
@@ -429,6 +432,63 @@ const Timeline: React.FC<TimelineProps> = ({
|
||||
}
|
||||
}, [map, handlePause]);
|
||||
|
||||
const handleForceCalculate = async () => {
|
||||
if (!NETWORK_NAME) {
|
||||
open?.({
|
||||
type: "error",
|
||||
message: "方案名称未设置，无法进行强制计算。",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setIsCalculating(true);
|
||||
// 显示处理中的通知
|
||||
open?.({
|
||||
type: "progress",
|
||||
message: "正在强制计算，请稍候...",
|
||||
undoableTimeout: 3,
|
||||
});
|
||||
try {
|
||||
const body = {
|
||||
name: NETWORK_NAME,
|
||||
simulation_date: selectedDate.toISOString().split("T")[0], // YYYY-MM-DD
|
||||
start_time: `${formatTime(currentTime)}:00`, // HH:MM:00
|
||||
duration: calculatedInterval,
|
||||
};
|
||||
|
||||
const response = await fetch(
|
||||
`${backendUrl}/runsimulationmanuallybydate/`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
open?.({
|
||||
type: "success",
|
||||
message: "重新计算成功",
|
||||
});
|
||||
} else {
|
||||
open?.({
|
||||
type: "error",
|
||||
message: "重新计算失败",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Recalculation failed:", error);
|
||||
open?.({
|
||||
type: "error",
|
||||
message: "重新计算时发生错误",
|
||||
});
|
||||
} finally {
|
||||
setIsCalculating(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 w-[920px] opacity-90 hover:opacity-100 transition-opacity duration-300">
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={zhCN}>
|
||||
@@ -574,7 +634,8 @@ const Timeline: React.FC<TimelineProps> = ({
|
||||
variant="outlined"
|
||||
size="small"
|
||||
startIcon={<Refresh />}
|
||||
// onClick={onRefresh}
|
||||
onClick={handleForceCalculate}
|
||||
disabled={isCalculating}
|
||||
>
|
||||
强制计算
|
||||
</Button>
|
||||
@@ -610,6 +671,7 @@ const Timeline: React.FC<TimelineProps> = ({
|
||||
"& .MuiSlider-track": {
|
||||
backgroundColor: "primary.main",
|
||||
height: 6,
|
||||
display: timeRange ? "none" : "block",
|
||||
},
|
||||
"& .MuiSlider-rail": {
|
||||
backgroundColor: "grey.300",
|
||||
|
||||
@@ -59,12 +59,13 @@ interface LayerStyleState {
|
||||
// 添加接口定义隐藏按钮的props
|
||||
interface ToolbarProps {
|
||||
hiddenButtons?: string[]; // 可选的隐藏按钮列表，例如 ['info', 'draw', 'style']
|
||||
queryType?: string; // 可选的查询类型参数
|
||||
}
|
||||
const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons }) => {
|
||||
const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
|
||||
const map = useMap();
|
||||
const data = useData();
|
||||
if (!data) return null;
|
||||
const { currentTime, selectedDate } = data;
|
||||
const { currentTime, selectedDate, schemeName } = data;
|
||||
const [activeTools, setActiveTools] = useState<string[]>([]);
|
||||
const [highlightFeature, setHighlightFeature] = useState<FeatureLike | null>(
|
||||
null
|
||||
@@ -319,9 +320,16 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons }) => {
|
||||
dateObj.setHours(Math.floor(minutes / 60), minutes % 60, 0, 0);
|
||||
// 转为 UTC ISO 字符串
|
||||
const querytime = dateObj.toISOString(); // 例如 "2025-09-16T16:30:00.000Z"
|
||||
const response = await fetch(
|
||||
`${backendUrl}/queryrecordsbyidtime/?id=${id}&querytime=${querytime}&type=${type}`
|
||||
);
|
||||
let response;
|
||||
if (queryType === "scheme") {
|
||||
response = await fetch(
|
||||
`${backendUrl}/queryschemesimulationrecordsbyidtime/?scheme_name=${schemeName}&id=${id}&querytime=${querytime}&type=${type}`
|
||||
);
|
||||
} else {
|
||||
response = await fetch(
|
||||
`${backendUrl}/querysimulationrecordsbyidtime/?id=${id}&querytime=${querytime}&type=${type}`
|
||||
);
|
||||
}
|
||||
if (!response.ok) {
|
||||
throw new Error("API request failed");
|
||||
}
|
||||
@@ -333,7 +341,7 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons }) => {
|
||||
}
|
||||
};
|
||||
// 仅当 currentTime 有效时查询
|
||||
if (currentTime !== -1) queryComputedProperties();
|
||||
if (currentTime !== -1 && queryType) queryComputedProperties();
|
||||
}, [highlightFeature, currentTime, selectedDate]);
|
||||
|
||||
// 从要素属性中提取属性面板需要的数据
|
||||
|
||||
@@ -23,6 +23,10 @@ import { Deck } from "@deck.gl/core";
|
||||
import { TextLayer } from "@deck.gl/layers";
|
||||
import { TripsLayer } from "@deck.gl/geo-layers";
|
||||
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";
|
||||
|
||||
interface MapComponentProps {
|
||||
children?: React.ReactNode;
|
||||
@@ -31,6 +35,8 @@ interface DataContextType {
|
||||
currentTime?: number; // 当前时间
|
||||
setCurrentTime?: React.Dispatch<React.SetStateAction<number>>;
|
||||
selectedDate?: Date; // 选择的日期
|
||||
schemeName?: string; // 当前方案名称
|
||||
setSchemeName?: React.Dispatch<React.SetStateAction<string>>;
|
||||
setSelectedDate?: React.Dispatch<React.SetStateAction<Date>>;
|
||||
currentJunctionCalData?: any[]; // 当前计算结果
|
||||
setCurrentJunctionCalData?: React.Dispatch<React.SetStateAction<any[]>>;
|
||||
@@ -44,6 +50,7 @@ interface DataContextType {
|
||||
pipeText: string;
|
||||
setJunctionText?: React.Dispatch<React.SetStateAction<string>>;
|
||||
setPipeText?: React.Dispatch<React.SetStateAction<string>>;
|
||||
scadaData?: any[]; // SCADA 数据
|
||||
}
|
||||
|
||||
// 创建自定义Layer类来包装deck.gl
|
||||
@@ -103,6 +110,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
|
||||
const [currentTime, setCurrentTime] = useState<number>(-1); // 默认选择当前时间
|
||||
// const [selectedDate, setSelectedDate] = useState<Date>(new Date("2025-9-17"));
|
||||
const [selectedDate, setSelectedDate] = useState<Date>(new Date()); // 默认今天
|
||||
const [schemeName, setSchemeName] = useState<string>(""); // 当前方案名称
|
||||
|
||||
const [currentJunctionCalData, setCurrentJunctionCalData] = useState<any[]>(
|
||||
[]
|
||||
@@ -165,7 +173,22 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
|
||||
setPipeDataState((prev) => [...prev, ...uniqueNewData]);
|
||||
}
|
||||
};
|
||||
// 配置地图数据源、图层和样式
|
||||
const defaultFlatStyle: FlatStyleLike = config.mapDefaultStyle;
|
||||
// 定义 SCADA 图层的样式函数，根据 type 字段选择不同图标
|
||||
const scadaStyle = (feature: any) => {
|
||||
const type = feature.get("type");
|
||||
const scadaPressureIcon = "/icons/scada_pressure.svg";
|
||||
const scadaFlowIcon = "/icons/scada_flow.svg";
|
||||
// 如果 type 不匹配，可以设置默认图标或不显示
|
||||
return new Style({
|
||||
image: new Icon({
|
||||
src: type === "pipe_flow" ? scadaFlowIcon : scadaPressureIcon,
|
||||
scale: 0.1, // 根据需要调整图标大小
|
||||
anchor: [0.5, 0.5], // 图标锚点居中
|
||||
}),
|
||||
});
|
||||
};
|
||||
// 矢量瓦片数据源和图层
|
||||
const junctionSource = new VectorTileSource({
|
||||
url: `${mapUrl}/gwc/service/tms/1.0.0/TJWater:geo_junctions_mat@WebMercatorQuad@pbf/{z}/{x}/{-y}.pbf`, // 替换为你的 MVT 瓦片服务 URL
|
||||
@@ -177,6 +200,10 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
|
||||
format: new MVT(),
|
||||
projection: "EPSG:3857",
|
||||
});
|
||||
const scadaSource = new VectorSource({
|
||||
url: `${mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:geo_scada&outputFormat=application/json`,
|
||||
format: new GeoJson(),
|
||||
});
|
||||
// WebGL 渲染优化显示
|
||||
const junctionLayer = new WebGLVectorTileLayer({
|
||||
source: junctionSource as any, // 使用 WebGL 渲染
|
||||
@@ -223,7 +250,19 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
const scadaLayer = new VectorLayer({
|
||||
source: scadaSource,
|
||||
style: scadaStyle,
|
||||
// extent: extent, // 设置图层范围
|
||||
maxZoom: 24,
|
||||
minZoom: 12,
|
||||
properties: {
|
||||
name: "SCADA", // 设置图层名称
|
||||
value: "scada",
|
||||
type: "point",
|
||||
properties: [],
|
||||
},
|
||||
});
|
||||
useEffect(() => {
|
||||
if (!mapRef.current) return;
|
||||
// 缓存 junction、pipe 数据，提供给 deck.gl 显示标签使用
|
||||
@@ -340,7 +379,6 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
|
||||
console.error("Pipe tile load error:", error);
|
||||
}
|
||||
});
|
||||
// 更新标签可见性状态
|
||||
// 监听 junctionLayer 的 visible 变化
|
||||
const handleJunctionVisibilityChange = () => {
|
||||
const isVisible = junctionLayer.getVisible();
|
||||
@@ -361,7 +399,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
|
||||
projection: "EPSG:3857",
|
||||
}),
|
||||
// 图层依面、线、点、标注次序添加
|
||||
layers: [pipeLayer, junctionLayer],
|
||||
layers: [pipeLayer, junctionLayer, scadaLayer],
|
||||
controls: [],
|
||||
});
|
||||
setMap(map);
|
||||
@@ -417,7 +455,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
|
||||
d[junctionText] ? (d[junctionText] as number).toFixed(3) : "",
|
||||
getSize: 18,
|
||||
fontWeight: "bold",
|
||||
getColor: [255, 138, 92],
|
||||
getColor: [0, 0, 0],
|
||||
getAngle: 0,
|
||||
getTextAnchor: "middle",
|
||||
getAlignmentBaseline: "center",
|
||||
@@ -593,6 +631,8 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
|
||||
setCurrentTime,
|
||||
selectedDate,
|
||||
setSelectedDate,
|
||||
schemeName,
|
||||
setSchemeName,
|
||||
currentJunctionCalData,
|
||||
setCurrentJunctionCalData,
|
||||
currentPipeCalData,
|
||||
|
||||
@@ -110,7 +110,7 @@ const AnalysisParameters: React.FC = () => {
|
||||
new Style({
|
||||
geometry: new Point(midPointMercator),
|
||||
image: new Icon({
|
||||
src: "/icons/burst_pipe_icon.svg",
|
||||
src: "/icons/burst_pipe.svg",
|
||||
scale: 0.2,
|
||||
anchor: [0.5, 1],
|
||||
}),
|
||||
|
||||
@@ -32,14 +32,20 @@ import { config, NETWORK_NAME } from "@config/config";
|
||||
import { useNotification } from "@refinedev/core";
|
||||
|
||||
import { queryFeaturesByIds } from "@/utils/mapQueryService";
|
||||
import { useMap } from "@app/OlMap/MapComponent";
|
||||
import * as turf from "@turf/turf";
|
||||
import { useData, useMap } from "@app/OlMap/MapComponent";
|
||||
import { GeoJSON } from "ol/format";
|
||||
import VectorLayer from "ol/layer/Vector";
|
||||
import VectorSource from "ol/source/Vector";
|
||||
import { Stroke, Style, Icon } from "ol/style";
|
||||
import Feature, { FeatureLike } from "ol/Feature";
|
||||
import { along, lineString, length, toMercator } from "@turf/turf";
|
||||
import {
|
||||
along,
|
||||
lineString,
|
||||
length,
|
||||
toMercator,
|
||||
bbox,
|
||||
featureCollection,
|
||||
} from "@turf/turf";
|
||||
import { Point } from "ol/geom";
|
||||
import { toLonLat } from "ol/proj";
|
||||
import Timeline from "@app/OlMap/Controls/Timeline";
|
||||
@@ -100,7 +106,6 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
|
||||
{ start: Date; end: Date } | undefined
|
||||
>();
|
||||
const [internalSchemes, setInternalSchemes] = useState<SchemeRecord[]>([]);
|
||||
const [schemeName, setSchemeName] = useState<string>("");
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [expandedId, setExpandedId] = useState<number | null>(null);
|
||||
const [mapContainer, setMapContainer] = useState<HTMLElement | null>(null); // 地图容器元素
|
||||
@@ -108,7 +113,9 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
|
||||
const { open } = useNotification();
|
||||
|
||||
const map = useMap();
|
||||
|
||||
const data = useData();
|
||||
if (!data) return null;
|
||||
const { schemeName, setSchemeName } = data;
|
||||
// 使用外部提供的 schemes 或内部状态
|
||||
const schemes =
|
||||
externalSchemes !== undefined ? externalSchemes : internalSchemes;
|
||||
@@ -183,9 +190,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
|
||||
geojsonFormat.writeFeatureObject(feature)
|
||||
);
|
||||
|
||||
const extent = turf.bbox(
|
||||
turf.featureCollection(geojsonFeatures as any)
|
||||
);
|
||||
const extent = bbox(featureCollection(geojsonFeatures as any));
|
||||
|
||||
if (extent) {
|
||||
map?.getView().fit(extent, { maxZoom: 18, duration: 1000 });
|
||||
@@ -211,7 +216,9 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
|
||||
);
|
||||
setSelectedDate(schemeDate);
|
||||
setTimeRange({ start, end });
|
||||
setSchemeName(scheme.schemeName);
|
||||
if (setSchemeName) {
|
||||
setSchemeName(scheme.schemeName);
|
||||
}
|
||||
handleLocatePipes(burstPipeIds);
|
||||
}
|
||||
};
|
||||
@@ -270,7 +277,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
|
||||
new Style({
|
||||
geometry: new Point(midPointMercator),
|
||||
image: new Icon({
|
||||
src: "/icons/burst_pipe_icon.svg",
|
||||
src: "/icons/burst_pipe.svg",
|
||||
scale: 0.2,
|
||||
anchor: [0.5, 1],
|
||||
}),
|
||||
@@ -283,6 +290,8 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
|
||||
const highlightLayer = new VectorLayer({
|
||||
source: new VectorSource(),
|
||||
style: burstPipeStyle,
|
||||
maxZoom: 24,
|
||||
minZoom: 12,
|
||||
properties: {
|
||||
name: "爆管管段高亮",
|
||||
value: "burst_pipe_highlight",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
@@ -30,7 +30,12 @@ import { config, NETWORK_NAME } from "@config/config";
|
||||
import { useNotification } from "@refinedev/core";
|
||||
import { useMap } from "@app/OlMap/MapComponent";
|
||||
import { queryFeaturesByIds } from "@/utils/mapQueryService";
|
||||
import * as turf from "@turf/turf";
|
||||
import { GeoJSON } from "ol/format";
|
||||
import VectorLayer from "ol/layer/Vector";
|
||||
import VectorSource from "ol/source/Vector";
|
||||
import { Style, Icon, Circle, Fill, Stroke } from "ol/style";
|
||||
import Feature, { FeatureLike } from "ol/Feature";
|
||||
import { bbox, featureCollection } from "@turf/turf";
|
||||
|
||||
interface SchemeRecord {
|
||||
id: number;
|
||||
@@ -74,23 +79,68 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
|
||||
const { open } = useNotification();
|
||||
const map = useMap();
|
||||
|
||||
const [highlightLayer, setHighlightLayer] =
|
||||
useState<VectorLayer<VectorSource> | null>(null);
|
||||
const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
|
||||
// 使用外部提供的 schemes 或内部状态
|
||||
const schemes =
|
||||
externalSchemes !== undefined ? externalSchemes : internalSchemes;
|
||||
const setSchemes = onSchemesChange || setInternalSchemes;
|
||||
|
||||
// 格式化日期
|
||||
const formatTime = (timeStr: string) => {
|
||||
const time = moment(timeStr);
|
||||
return time.format("YYYY-MM-DD HH:mm:ss");
|
||||
};
|
||||
|
||||
// 格式化简短日期
|
||||
const formatShortDate = (timeStr: string) => {
|
||||
const time = moment(timeStr);
|
||||
return time.format("MM-DD");
|
||||
};
|
||||
// 初始化管道图层和高亮图层
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
// 定义传感器样式
|
||||
const sensorStyle = new Style({
|
||||
image: new Icon({
|
||||
src: "/icons/sensor.svg",
|
||||
scale: 0.2,
|
||||
anchor: [0.5, 1],
|
||||
}),
|
||||
});
|
||||
// 创建高亮图层 - 爆管管段标识样式
|
||||
const highlightLayer = new VectorLayer({
|
||||
source: new VectorSource(),
|
||||
style: sensorStyle,
|
||||
maxZoom: 24,
|
||||
minZoom: 12,
|
||||
properties: {
|
||||
name: "传感器高亮",
|
||||
value: "sensor_highlight",
|
||||
},
|
||||
});
|
||||
|
||||
map.addLayer(highlightLayer);
|
||||
setHighlightLayer(highlightLayer);
|
||||
|
||||
return () => {
|
||||
map.removeLayer(highlightLayer);
|
||||
};
|
||||
}, [map]);
|
||||
|
||||
// 高亮要素的函数
|
||||
useEffect(() => {
|
||||
if (!highlightLayer) {
|
||||
return;
|
||||
}
|
||||
const source = highlightLayer.getSource();
|
||||
if (!source) {
|
||||
return;
|
||||
}
|
||||
// 清除之前的高亮
|
||||
source.clear();
|
||||
// 添加新的高亮要素
|
||||
highlightFeatures.forEach((feature) => {
|
||||
if (feature instanceof Feature) {
|
||||
source.addFeature(feature);
|
||||
}
|
||||
});
|
||||
}, [highlightFeatures]);
|
||||
// 查询方案
|
||||
const handleQuery = async () => {
|
||||
if (!queryAll && !queryDate) return;
|
||||
@@ -158,29 +208,19 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
|
||||
if (sensorIds.length > 0) {
|
||||
queryFeaturesByIds(sensorIds).then((features) => {
|
||||
if (features.length > 0) {
|
||||
// 计算范围并缩放
|
||||
const geojsonFormat = new (window as any).ol.format.GeoJSON();
|
||||
// 设置高亮要素
|
||||
setHighlightFeatures(features);
|
||||
// 将 OpenLayers Feature 转换为 GeoJSON Feature
|
||||
const geojsonFormat = new GeoJSON();
|
||||
const geojsonFeatures = features.map((feature) =>
|
||||
geojsonFormat.writeFeatureObject(feature)
|
||||
);
|
||||
|
||||
const extent = turf.bbox(
|
||||
turf.featureCollection(geojsonFeatures as any)
|
||||
);
|
||||
const extent = bbox(featureCollection(geojsonFeatures as any));
|
||||
|
||||
if (extent) {
|
||||
map.getView().fit(extent, { maxZoom: 18, duration: 1000 });
|
||||
map?.getView().fit(extent, { maxZoom: 18, duration: 1000 });
|
||||
}
|
||||
|
||||
open?.({
|
||||
type: "success",
|
||||
message: `已定位 ${features.length} 个传感器位置`,
|
||||
});
|
||||
} else {
|
||||
open?.({
|
||||
type: "error",
|
||||
message: "未找到传感器位置",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -321,7 +361,8 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
|
||||
variant="caption"
|
||||
className="text-gray-500 block"
|
||||
>
|
||||
最小半径: {scheme.minDiameter} · 用户: {scheme.user} · 日期: {formatShortDate(scheme.create_time)}
|
||||
最小半径: {scheme.minDiameter} · 用户: {scheme.user} ·
|
||||
日期: {formatShortDate(scheme.create_time)}
|
||||
</Typography>
|
||||
</Box>
|
||||
{/* 操作按钮 */}
|
||||
@@ -434,54 +475,58 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
|
||||
</Box>
|
||||
|
||||
{/* 传感器位置列表 */}
|
||||
{scheme.sensorLocation && scheme.sensorLocation.length > 0 && (
|
||||
<Box className="mb-3">
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="text-gray-600 block mb-2"
|
||||
>
|
||||
传感器位置 ({scheme.sensorLocation.length}个):
|
||||
</Typography>
|
||||
<Box className="max-h-40 overflow-auto bg-gray-50 rounded p-2">
|
||||
<Box className="flex flex-wrap gap-2">
|
||||
{scheme.sensorLocation.map((sensorId, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
component="button"
|
||||
variant="caption"
|
||||
className="font-medium text-blue-600 hover:text-blue-800 underline cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleLocateSensors([sensorId]);
|
||||
}}
|
||||
>
|
||||
{sensorId}
|
||||
</Link>
|
||||
))}
|
||||
{scheme.sensorLocation &&
|
||||
scheme.sensorLocation.length > 0 && (
|
||||
<Box className="mb-3">
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="text-gray-600 block mb-2"
|
||||
>
|
||||
传感器位置 ({scheme.sensorLocation.length}个):
|
||||
</Typography>
|
||||
<Box className="max-h-40 overflow-auto bg-gray-50 rounded p-2">
|
||||
<Box className="flex flex-wrap gap-2">
|
||||
{scheme.sensorLocation.map(
|
||||
(sensorId, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
component="button"
|
||||
variant="caption"
|
||||
className="font-medium text-blue-600 hover:text-blue-800 underline cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleLocateSensors([sensorId]);
|
||||
}}
|
||||
>
|
||||
{sensorId}
|
||||
</Link>
|
||||
)
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
)}
|
||||
|
||||
{/* 操作按钮区域 */}
|
||||
<Box className="pt-2 border-t border-gray-100 flex gap-2">
|
||||
{scheme.sensorLocation && scheme.sensorLocation.length > 0 && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
size="small"
|
||||
className="border-blue-600 text-blue-600 hover:bg-blue-50"
|
||||
onClick={() =>
|
||||
handleLocateSensors(scheme.sensorLocation!)
|
||||
}
|
||||
sx={{
|
||||
textTransform: "none",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
定位全部传感器
|
||||
</Button>
|
||||
)}
|
||||
{scheme.sensorLocation &&
|
||||
scheme.sensorLocation.length > 0 && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
size="small"
|
||||
className="border-blue-600 text-blue-600 hover:bg-blue-50"
|
||||
onClick={() =>
|
||||
handleLocateSensors(scheme.sensorLocation!)
|
||||
}
|
||||
sx={{
|
||||
textTransform: "none",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
定位全部传感器
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
|
||||
@@ -349,7 +349,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
||||
rowsCount: rows.length,
|
||||
columnsCount: columns.length,
|
||||
sampleRow: rows[0],
|
||||
columns: columns.map(c => c.field),
|
||||
columns: columns.map((c) => c.field),
|
||||
});
|
||||
|
||||
return (
|
||||
@@ -373,7 +373,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
||||
<Paper
|
||||
className={clsx(
|
||||
"absolute right-4 top-20 w-4xl h-2xl bg-white rounded-xl shadow-lg overflow-hidden flex flex-col transition-opacity duration-300",
|
||||
visible ? "opacity-95 hover:opacity-100" : "opacity-0 z-10"
|
||||
visible ? "opacity-95 hover:opacity-100" : "opacity-0 -z-10"
|
||||
)}
|
||||
>
|
||||
{/* Header */}
|
||||
|
||||
@@ -1,10 +1,16 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useMemo } from "react";
|
||||
import React, {
|
||||
useState,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useCallback,
|
||||
useRef,
|
||||
startTransition,
|
||||
} from "react";
|
||||
import {
|
||||
Box,
|
||||
Paper,
|
||||
TextField,
|
||||
Typography,
|
||||
List,
|
||||
ListItem,
|
||||
@@ -14,7 +20,6 @@ import {
|
||||
Chip,
|
||||
IconButton,
|
||||
Collapse,
|
||||
InputAdornment,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
Select,
|
||||
@@ -23,6 +28,7 @@ import {
|
||||
Stack,
|
||||
Divider,
|
||||
InputBase,
|
||||
CircularProgress,
|
||||
} from "@mui/material";
|
||||
import {
|
||||
Search,
|
||||
@@ -31,17 +37,19 @@ import {
|
||||
ExpandLess,
|
||||
FilterList,
|
||||
Clear,
|
||||
Visibility,
|
||||
VisibilityOff,
|
||||
DeviceHub,
|
||||
} from "@mui/icons-material";
|
||||
|
||||
import { useMap } from "@app/OlMap/MapComponent";
|
||||
import { GeoJSON } from "ol/format";
|
||||
import { Point } from "ol/geom";
|
||||
import config from "@/config/config";
|
||||
interface SCADADevice {
|
||||
id: string;
|
||||
name: string;
|
||||
type: string;
|
||||
coordinates: [number, number];
|
||||
status: "online" | "offline" | "warning" | "error";
|
||||
status: "在线" | "离线" | "警告" | "错误";
|
||||
properties?: Record<string, any>;
|
||||
}
|
||||
|
||||
@@ -57,7 +65,6 @@ interface SCADADeviceListProps {
|
||||
const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
|
||||
devices = [],
|
||||
onDeviceClick,
|
||||
onZoomToDevice,
|
||||
multiSelect = true,
|
||||
selectedDeviceIds,
|
||||
onSelectionChange,
|
||||
@@ -70,9 +77,28 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
|
||||
const [pendingSelection, setPendingSelection] = useState<string[] | null>(
|
||||
null
|
||||
);
|
||||
const [internalDevices, setInternalDevices] = useState<SCADADevice[]>([]);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [inputValue, setInputValue] = useState<string>("");
|
||||
|
||||
const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
// 防抖更新搜索查询
|
||||
const debouncedSetSearchQuery = useCallback((value: string) => {
|
||||
if (debounceTimerRef.current) {
|
||||
clearTimeout(debounceTimerRef.current);
|
||||
}
|
||||
// 根据输入长度调整防抖延迟：短输入延迟更长，长输入响应更快
|
||||
const delay = value.length <= 2 ? 200 : 100;
|
||||
debounceTimerRef.current = setTimeout(() => {
|
||||
setSearchQuery(value);
|
||||
}, delay);
|
||||
}, []);
|
||||
|
||||
const activeSelection = selectedDeviceIds ?? internalSelection;
|
||||
|
||||
const map = useMap(); // 移到此处，确保在条件检查前调用
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedDeviceIds) {
|
||||
setInternalSelection(selectedDeviceIds);
|
||||
@@ -87,28 +113,87 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
|
||||
}
|
||||
}, [pendingSelection, onSelectionChange]);
|
||||
|
||||
// 初始化 SCADA 设备列表
|
||||
useEffect(() => {
|
||||
const fetchScadaDevices = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const url = `${config.mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:geo_scada&outputFormat=application/json`;
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) throw new Error("Failed to fetch SCADA devices");
|
||||
const json = await response.json();
|
||||
const features = new GeoJSON().readFeatures(json);
|
||||
const data = features.map((feature) => ({
|
||||
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 "在线" | "离线" | "警告" | "错误",
|
||||
coordinates: (feature.getGeometry() as Point)?.getCoordinates() as [
|
||||
number,
|
||||
number
|
||||
],
|
||||
properties: feature.getProperties(),
|
||||
}));
|
||||
setInternalDevices(data);
|
||||
console.log("Fetched SCADA devices:", data);
|
||||
} catch (error) {
|
||||
console.error("Error fetching SCADA devices:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchScadaDevices();
|
||||
}, []);
|
||||
|
||||
const effectiveDevices = devices.length > 0 ? devices : internalDevices;
|
||||
|
||||
// 获取设备类型列表
|
||||
const deviceTypes = useMemo(() => {
|
||||
const types = Array.from(new Set(devices.map((device) => device.type)));
|
||||
const types = Array.from(
|
||||
new Set(effectiveDevices.map((device) => device.type))
|
||||
);
|
||||
return types.sort();
|
||||
}, [devices]);
|
||||
}, [effectiveDevices]);
|
||||
|
||||
// 获取设备状态列表
|
||||
const deviceStatuses = useMemo(() => {
|
||||
const statuses = Array.from(
|
||||
new Set(devices.map((device) => device.status))
|
||||
new Set(effectiveDevices.map((device) => device.status))
|
||||
);
|
||||
return statuses.sort();
|
||||
}, [devices]);
|
||||
}, [effectiveDevices]);
|
||||
|
||||
// 创建设备索引 Map，使用设备 ID 作为键
|
||||
const deviceIndex = useMemo(() => {
|
||||
const index = new Map<string, SCADADevice>();
|
||||
effectiveDevices.forEach((device) => {
|
||||
index.set(device.id, device);
|
||||
});
|
||||
return index;
|
||||
}, [effectiveDevices]);
|
||||
|
||||
// 过滤设备列表
|
||||
const filteredDevices = useMemo(() => {
|
||||
return devices.filter((device) => {
|
||||
if (
|
||||
searchQuery === "" &&
|
||||
selectedType === "all" &&
|
||||
selectedStatus === "all"
|
||||
) {
|
||||
return effectiveDevices;
|
||||
}
|
||||
|
||||
const searchLower = searchQuery.toLowerCase();
|
||||
return effectiveDevices.filter((device) => {
|
||||
if (searchQuery === "") return true;
|
||||
|
||||
const nameLower = device.name.toLowerCase();
|
||||
const idLower = device.id.toLowerCase();
|
||||
|
||||
const matchesSearch =
|
||||
searchQuery === "" ||
|
||||
device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
device.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
device.type.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
nameLower.indexOf(searchLower) !== -1 ||
|
||||
idLower.indexOf(searchLower) !== -1;
|
||||
|
||||
const matchesType =
|
||||
selectedType === "all" || device.type === selectedType;
|
||||
@@ -117,7 +202,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
|
||||
|
||||
return matchesSearch && matchesType && matchesStatus;
|
||||
});
|
||||
}, [devices, searchQuery, selectedType, selectedStatus]);
|
||||
}, [effectiveDevices, searchQuery, selectedType, selectedStatus]);
|
||||
|
||||
// 状态颜色映射
|
||||
const getStatusColor = (status: string) => {
|
||||
@@ -171,22 +256,38 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
|
||||
};
|
||||
|
||||
// 处理缩放到设备
|
||||
const handleZoomToDevice = (device: SCADADevice, event: React.MouseEvent) => {
|
||||
event.stopPropagation();
|
||||
onZoomToDevice?.(device.coordinates);
|
||||
const handleZoomToDevice = (device: SCADADevice) => {
|
||||
map
|
||||
?.getView()
|
||||
.fit(new Point(device.coordinates), { maxZoom: 15, duration: 1000 });
|
||||
};
|
||||
|
||||
// 清除搜索
|
||||
const handleClearSearch = () => {
|
||||
setSearchQuery("");
|
||||
};
|
||||
const handleClearSearch = useCallback(() => {
|
||||
setInputValue("");
|
||||
startTransition(() => {
|
||||
setSearchQuery("");
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 重置所有筛选条件
|
||||
const handleResetFilters = () => {
|
||||
setSearchQuery("");
|
||||
setSelectedType("all");
|
||||
setSelectedStatus("all");
|
||||
};
|
||||
const handleResetFilters = useCallback(() => {
|
||||
setInputValue("");
|
||||
startTransition(() => {
|
||||
setSearchQuery("");
|
||||
setSelectedType("all");
|
||||
setSelectedStatus("all");
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 清理定时器
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (debounceTimerRef.current) {
|
||||
clearTimeout(debounceTimerRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Paper className="absolute left-4 top-20 w-90 max-h-[calc(100vh-100px)] bg-white rounded-xl shadow-lg overflow-hidden flex flex-col opacity-95 transition-opacity duration-200 ease-in-out hover:opacity-100">
|
||||
@@ -242,9 +343,12 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
|
||||
<Box className="h-10 flex items-center border border-gray-300 rounded-md p-0.5">
|
||||
<InputBase
|
||||
sx={{ ml: 1, flex: 1 }}
|
||||
placeholder="搜索设备名称、ID 或类型..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="搜索设备名称、ID..."
|
||||
value={inputValue}
|
||||
onChange={(e) => {
|
||||
setInputValue(e.target.value);
|
||||
debouncedSetSearchQuery(e.target.value);
|
||||
}}
|
||||
inputProps={{ "aria-label": "search devices" }}
|
||||
/>
|
||||
<IconButton type="button" sx={{ p: "6px" }} aria-label="search">
|
||||
@@ -310,7 +414,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
共找到 {filteredDevices.length} 个设备
|
||||
{devices.length !== filteredDevices.length &&
|
||||
` (共 ${devices.length} 个设备)`}
|
||||
` (共 ${effectiveDevices.length} 个设备)`}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Box>
|
||||
@@ -319,7 +423,18 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
|
||||
|
||||
{/* 设备列表 */}
|
||||
<Box sx={{ flex: 1, overflow: "auto", maxHeight: 400 }}>
|
||||
{filteredDevices.length === 0 ? (
|
||||
{loading ? (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: 200,
|
||||
}}
|
||||
>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
) : filteredDevices.length === 0 ? (
|
||||
<Box
|
||||
sx={{
|
||||
p: 4,
|
||||
@@ -416,7 +531,10 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
|
||||
<Tooltip title="缩放到设备位置">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={(e) => handleZoomToDevice(device, e)}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
handleZoomToDevice(device);
|
||||
}}
|
||||
sx={{
|
||||
ml: 1,
|
||||
color: "primary.main",
|
||||
|
||||
Reference in New Issue
Block a user