1
This commit is contained in:
parent
3c8c7e497b
commit
bda855430d
33
package-lock.json
generated
33
package-lock.json
generated
@ -41,6 +41,7 @@
|
|||||||
"dotenv": "^10.0.0",
|
"dotenv": "^10.0.0",
|
||||||
"dotenv-expand": "^5.1.0",
|
"dotenv-expand": "^5.1.0",
|
||||||
"echarts": "^5.4.0",
|
"echarts": "^5.4.0",
|
||||||
|
"echarts-for-react": "^3.0.2",
|
||||||
"eslint": "^8.3.0",
|
"eslint": "^8.3.0",
|
||||||
"eslint-config-react-app": "^7.0.1",
|
"eslint-config-react-app": "^7.0.1",
|
||||||
"eslint-webpack-plugin": "^3.1.1",
|
"eslint-webpack-plugin": "^3.1.1",
|
||||||
@ -6931,6 +6932,19 @@
|
|||||||
"zrender": "5.4.3"
|
"zrender": "5.4.3"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/echarts-for-react": {
|
||||||
|
"version": "3.0.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/echarts-for-react/-/echarts-for-react-3.0.2.tgz",
|
||||||
|
"integrity": "sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA==",
|
||||||
|
"dependencies": {
|
||||||
|
"fast-deep-equal": "^3.1.3",
|
||||||
|
"size-sensor": "^1.0.1"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"echarts": "^3.0.0 || ^4.0.0 || ^5.0.0",
|
||||||
|
"react": "^15.0.0 || >=16.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/ee-first": {
|
"node_modules/ee-first": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
|
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
|
||||||
@ -14843,6 +14857,11 @@
|
|||||||
"resolved": "https://registry.npmmirror.com/sisteransi/-/sisteransi-1.0.5.tgz",
|
"resolved": "https://registry.npmmirror.com/sisteransi/-/sisteransi-1.0.5.tgz",
|
||||||
"integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
|
"integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
|
||||||
},
|
},
|
||||||
|
"node_modules/size-sensor": {
|
||||||
|
"version": "1.0.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/size-sensor/-/size-sensor-1.0.2.tgz",
|
||||||
|
"integrity": "sha512-2NCmWxY7A9pYKGXNBfteo4hy14gWu47rg5692peVMst6lQLPKrVjhY+UTEsPI5ceFRJSl3gVgMYaUi/hKuaiKw=="
|
||||||
|
},
|
||||||
"node_modules/slash": {
|
"node_modules/slash": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz",
|
"resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz",
|
||||||
@ -21957,6 +21976,15 @@
|
|||||||
"zrender": "5.4.3"
|
"zrender": "5.4.3"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"echarts-for-react": {
|
||||||
|
"version": "3.0.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/echarts-for-react/-/echarts-for-react-3.0.2.tgz",
|
||||||
|
"integrity": "sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA==",
|
||||||
|
"requires": {
|
||||||
|
"fast-deep-equal": "^3.1.3",
|
||||||
|
"size-sensor": "^1.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"ee-first": {
|
"ee-first": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
|
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
|
||||||
@ -27955,6 +27983,11 @@
|
|||||||
"resolved": "https://registry.npmmirror.com/sisteransi/-/sisteransi-1.0.5.tgz",
|
"resolved": "https://registry.npmmirror.com/sisteransi/-/sisteransi-1.0.5.tgz",
|
||||||
"integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
|
"integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
|
||||||
},
|
},
|
||||||
|
"size-sensor": {
|
||||||
|
"version": "1.0.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/size-sensor/-/size-sensor-1.0.2.tgz",
|
||||||
|
"integrity": "sha512-2NCmWxY7A9pYKGXNBfteo4hy14gWu47rg5692peVMst6lQLPKrVjhY+UTEsPI5ceFRJSl3gVgMYaUi/hKuaiKw=="
|
||||||
|
},
|
||||||
"slash": {
|
"slash": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz",
|
"resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz",
|
||||||
|
|||||||
@ -36,6 +36,7 @@
|
|||||||
"dotenv": "^10.0.0",
|
"dotenv": "^10.0.0",
|
||||||
"dotenv-expand": "^5.1.0",
|
"dotenv-expand": "^5.1.0",
|
||||||
"echarts": "^5.4.0",
|
"echarts": "^5.4.0",
|
||||||
|
"echarts-for-react": "^3.0.2",
|
||||||
"eslint": "^8.3.0",
|
"eslint": "^8.3.0",
|
||||||
"eslint-config-react-app": "^7.0.1",
|
"eslint-config-react-app": "^7.0.1",
|
||||||
"eslint-webpack-plugin": "^3.1.1",
|
"eslint-webpack-plugin": "^3.1.1",
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 MiB After Width: | Height: | Size: 8.9 MiB |
BIN
public/png/rect/lp_center_down.png
Normal file
BIN
public/png/rect/lp_center_down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
public/png/rect/lp_center_up.png
Normal file
BIN
public/png/rect/lp_center_up.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
BIN
public/png/rect/lp_left_down.png
Normal file
BIN
public/png/rect/lp_left_down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
public/png/rect/lp_left_up.png
Normal file
BIN
public/png/rect/lp_left_up.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
public/png/rect/lp_right_down.png
Normal file
BIN
public/png/rect/lp_right_down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
public/png/rect/lp_right_up.png
Normal file
BIN
public/png/rect/lp_right_up.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
public/png/topTiltle.png
Normal file
BIN
public/png/topTiltle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
@ -1,6 +1,6 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<svg width="1921px" height="88px" viewBox="0 0 1921 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
<svg width="1920px" height="93.28px" viewBox="0 0 1920 93.28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
<title>编组 11</title>
|
<title></title>
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient x1="50%" y1="-2.22044605e-14%" x2="50%" y2="100%" id="linearGradient-1">
|
<linearGradient x1="50%" y1="-2.22044605e-14%" x2="50%" y2="100%" id="linearGradient-1">
|
||||||
<stop stop-color="#081C43" stop-opacity="0" offset="0%"></stop>
|
<stop stop-color="#081C43" stop-opacity="0" offset="0%"></stop>
|
||||||
@ -36,64 +36,62 @@
|
|||||||
<stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop>
|
<stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
<g id="洛阳" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
<g id="现场看板_生产监控看板" transform="translate(1.000000, 0.000000)">
|
<g id="编组-11" transform="translate(-58.630000, -0.000000)">
|
||||||
<g id="编组-11" transform="translate(-1.000000, 0.000000)">
|
<polygon id="路径-5" fill="url(#linearGradient-1)" points="1.06 -4.52350829e-15 1.06 31.8 88.7697287 31.8 128.946587 58.1580023 620.989897 58.1580023 672.41193 93.28 1362.3368 93.28 1413.93684 57.6994189 1894.84731 57.6994189 1934.37339 31.8 2036.26 31.8 2036.26 2.36492588e-13"></polygon>
|
||||||
<polygon id="路径-5" fill="url(#linearGradient-1)" points="1 -4.26746065e-15 1 30 83.7450271 30 121.647723 54.8660399 585.839525 54.8660399 634.350877 88 1285.2234 88 1333.90268 54.433414 1787.59181 54.433414 1824.88056 30 1921 30 1921 2.23106215e-13"></polygon>
|
|
||||||
<g id="编组-12" transform="translate(0.000000, 0.000000)">
|
<g id="编组-12" transform="translate(0.000000, 0.000000)">
|
||||||
<g id="编组-8" transform="translate(711.263222, 23.000000)"></g>
|
<g id="编组-8" transform="translate(753.939016, 24.380000)"></g>
|
||||||
<g id="编组-4" transform="translate(0.750956, 30.000000)">
|
<g id="编组-4" transform="translate(0.796014, 31.800000)">
|
||||||
<polyline id="路径-9" stroke="url(#linearGradient-2)" stroke-width="2" points="1920.24904 5.66395583e-14 1824.1296 3.83165721e-14 1786.2269 24.8660399 1332.03314 24.8660399 1284.10896 57 959.060954 57"></polyline>
|
<polyline id="路径-9" stroke="url(#linearGradient-2)" stroke-width="2.12" points="2035.46399 6.00379318e-14 1933.57738 4.06155665e-14 1893.40052 26.3580023 1411.95513 26.3580023 1361.15549 60.42 1016.60461 60.42"></polyline>
|
||||||
<g id="编组-29" transform="translate(1561.171848, 46.000000) scale(-1, 1) translate(-1561.171848, -46.000000) translate(1331.116205, 35.000000)">
|
<g id="编组-29" transform="translate(1654.842159, 48.760000) scale(-1, 1) translate(-1654.842159, -48.760000) translate(1410.983177, 37.100000)">
|
||||||
<polyline id="路径-10" stroke="url(#linearGradient-3)" stroke-width="2" points="460.111287 22 435.255105 5 314.074844 5"></polyline>
|
<polyline id="路径-10" stroke="url(#linearGradient-3)" stroke-width="2.12" points="487.717964 23.32 461.370411 5.3 332.919335 5.3"></polyline>
|
||||||
<ellipse id="椭圆形" fill="#31A6AE" cx="309.073864" cy="5" rx="4.00078371" ry="4"></ellipse>
|
<ellipse id="椭圆形" fill="#31A6AE" cx="327.618296" cy="5.3" rx="4.24083073" ry="4.24"></ellipse>
|
||||||
<ellipse id="椭圆形备份" fill="#31A6AE" cx="221.056623" cy="5" rx="4.00078371" ry="4"></ellipse>
|
<ellipse id="椭圆形备份" fill="#31A6AE" cx="234.32002" cy="5.3" rx="4.24083073" ry="4.24"></ellipse>
|
||||||
<g id="编组-2" transform="translate(235.059366, 0.000000)" fill="#31A6AE">
|
<g id="编组-2" transform="translate(249.162928, 0.000000)" fill="#31A6AE">
|
||||||
<polygon id="路径-11" points="51.8543795 5.99520433e-14 48.0094045 0 56.5647535 10 60.0117556 10"></polygon>
|
<polygon id="路径-11" points="54.9656423 6.35491659e-14 50.8899688 0 59.9586387 10.6 63.612461 10.6"></polygon>
|
||||||
<polygon id="路径-11备份" opacity="0.8" points="39.8520284 5.99520433e-14 36.0070534 0 44.5624024 10 48.0094045 10"></polygon>
|
<polygon id="路径-11备份" opacity="0.8" points="42.2431501 6.35491659e-14 38.1674766 0 47.2361465 10.6 50.8899688 10.6"></polygon>
|
||||||
<polygon id="路径-11备份-3" opacity="0.4" points="15.8473261 5.99520433e-14 12.0023511 0 20.5577001 10 24.0047022 10"></polygon>
|
<polygon id="路径-11备份-3" opacity="0.4" points="16.7981657 6.35491659e-14 12.7224922 0 21.7911621 10.6 25.4449844 10.6"></polygon>
|
||||||
<polygon id="路径-11备份-2" opacity="0.601434" points="27.8496773 5.99520433e-14 24.0047022 0 32.5600513 10 36.0070534 10"></polygon>
|
<polygon id="路径-11备份-2" opacity="0.601434" points="29.5206579 6.35491659e-14 25.4449844 0 34.5136543 10.6 38.1674766 10.6"></polygon>
|
||||||
<polygon id="路径-11备份-4" opacity="0.201434" points="3.84497501 5.99520433e-14 4.67611706e-16 0 8.55534901 10 12.0023511 10"></polygon>
|
<polygon id="路径-11备份-4" opacity="0.201434" points="4.07567352 6.35491659e-14 4.95668408e-16 0 9.06866995 10.6 12.7224922 10.6"></polygon>
|
||||||
</g>
|
</g>
|
||||||
<line x1="217.055839" y1="4.5" x2="0.978448027" y2="5" id="路径-12" stroke="url(#linearGradient-4)" stroke-width="2"></line>
|
<line x1="230.07919" y1="4.77" x2="1.03715491" y2="5.3" id="路径-12" stroke="url(#linearGradient-4)" stroke-width="2.12"></line>
|
||||||
</g>
|
</g>
|
||||||
<polyline id="路径-9" stroke="url(#linearGradient-5)" stroke-width="2" transform="translate(479.530477, 28.500000) scale(-1, 1) translate(-479.530477, -28.500000) " points="959.060954 -1.26565425e-14 876.066883 -4.42836785e-14 838.164187 24.8660399 373.972385 24.8660399 326.048198 57 -4.54174955e-13 57"></polyline>
|
<polyline id="路径-9" stroke="url(#linearGradient-5)" stroke-width="2.12" transform="translate(508.302305, 30.210000) scale(-1, 1) translate(-508.302305, -30.210000) " points="1016.60461 -1.3415935e-14 928.630896 -4.69406992e-14 888.454038 26.3580023 396.410728 26.3580023 345.61109 60.42 -4.81425453e-13 60.42"></polyline>
|
||||||
<g id="编组-28" transform="translate(114.894416, 35.000000)">
|
<g id="编组-28" transform="translate(121.788081, 37.100000)">
|
||||||
<polyline id="路径-10" stroke="url(#linearGradient-6)" stroke-width="2" points="472.111287 22 447.255105 5 326.074844 5"></polyline>
|
<polyline id="路径-10" stroke="url(#linearGradient-6)" stroke-width="2.12" points="500.437964 23.32 474.090411 5.3 345.639335 5.3"></polyline>
|
||||||
<ellipse id="椭圆形" fill="#31A6AE" cx="321.073864" cy="5" rx="4.00078371" ry="4"></ellipse>
|
<ellipse id="椭圆形" fill="#31A6AE" cx="340.338296" cy="5.3" rx="4.24083073" ry="4.24"></ellipse>
|
||||||
<ellipse id="椭圆形备份" fill="#31A6AE" cx="233.056623" cy="5" rx="4.00078371" ry="4"></ellipse>
|
<ellipse id="椭圆形备份" fill="#31A6AE" cx="247.04002" cy="5.3" rx="4.24083073" ry="4.24"></ellipse>
|
||||||
<g id="编组-2" transform="translate(247.059366, 0.000000)" fill="#31A6AE">
|
<g id="编组-2" transform="translate(261.882928, 0.000000)" fill="#31A6AE">
|
||||||
<polygon id="路径-11" points="51.8543795 5.99520433e-14 48.0094045 0 56.5647535 10 60.0117556 10"></polygon>
|
<polygon id="路径-11" points="54.9656423 6.35491659e-14 50.8899688 0 59.9586387 10.6 63.612461 10.6"></polygon>
|
||||||
<polygon id="路径-11备份" opacity="0.8" points="39.8520284 5.99520433e-14 36.0070534 0 44.5624024 10 48.0094045 10"></polygon>
|
<polygon id="路径-11备份" opacity="0.8" points="42.2431501 6.35491659e-14 38.1674766 0 47.2361465 10.6 50.8899688 10.6"></polygon>
|
||||||
<polygon id="路径-11备份-3" opacity="0.4" points="15.8473261 5.99520433e-14 12.0023511 0 20.5577001 10 24.0047022 10"></polygon>
|
<polygon id="路径-11备份-3" opacity="0.4" points="16.7981657 6.35491659e-14 12.7224922 0 21.7911621 10.6 25.4449844 10.6"></polygon>
|
||||||
<polygon id="路径-11备份-2" opacity="0.601434" points="27.8496773 5.99520433e-14 24.0047022 0 32.5600513 10 36.0070534 10"></polygon>
|
<polygon id="路径-11备份-2" opacity="0.601434" points="29.5206579 6.35491659e-14 25.4449844 0 34.5136543 10.6 38.1674766 10.6"></polygon>
|
||||||
<polygon id="路径-11备份-4" opacity="0.201434" points="3.84497501 5.99520433e-14 4.67611706e-16 0 8.55534901 10 12.0023511 10"></polygon>
|
<polygon id="路径-11备份-4" opacity="0.201434" points="4.07567352 6.35491659e-14 4.95668408e-16 0 9.06866995 10.6 12.7224922 10.6"></polygon>
|
||||||
</g>
|
</g>
|
||||||
<line x1="229.055839" y1="4.5" x2="0.354627912" y2="5" id="路径-12" stroke="url(#linearGradient-7)" stroke-width="2"></line>
|
<line x1="242.79919" y1="4.77" x2="0.375905586" y2="5.3" id="路径-12" stroke="url(#linearGradient-7)" stroke-width="2.12"></line>
|
||||||
</g>
|
</g>
|
||||||
<g id="编组-3" transform="translate(117.896179, 0.000000)">
|
<g id="编组-3" transform="translate(124.969950, 0.000000)">
|
||||||
<g id="编组-2备份" fill="#31A6AE">
|
<g id="编组-2备份" fill="#31A6AE">
|
||||||
<polygon id="路径-11" points="77.7815693 8.9928065e-14 72.0141067 0 84.8471303 15 90.0176334 15"></polygon>
|
<polygon id="路径-11" points="82.4484634 9.53237489e-14 76.3349532 0 89.9379581 15.9 95.4186914 15.9"></polygon>
|
||||||
<polygon id="路径-11备份" opacity="0.8" points="59.7780426 8.9928065e-14 54.0105801 0 66.8436036 15 72.0141067 15"></polygon>
|
<polygon id="路径-11备份" opacity="0.8" points="63.3647251 9.53237489e-14 57.2512149 0 70.8542198 15.9 76.3349532 15.9"></polygon>
|
||||||
<polygon id="路径-11备份-3" opacity="0.4" points="23.7709892 8.9928065e-14 18.0035267 0 30.8365502 15 36.0070534 15"></polygon>
|
<polygon id="路径-11备份-3" opacity="0.4" points="25.1972486 9.53237489e-14 19.0837383 0 32.6867432 15.9 38.1674766 15.9"></polygon>
|
||||||
<polygon id="路径-11备份-2" opacity="0.601434" points="41.7745159 8.9928065e-14 36.0070534 0 48.8400769 15 54.0105801 15"></polygon>
|
<polygon id="路径-11备份-2" opacity="0.601434" points="44.2809868 9.53237489e-14 38.1674766 0 51.7704815 15.9 57.2512149 15.9"></polygon>
|
||||||
<polygon id="路径-11备份-4" opacity="0.201434" points="5.76746252 8.9928065e-14 7.01417559e-16 0 12.8330235 15 18.0035267 15"></polygon>
|
<polygon id="路径-11备份-4" opacity="0.201434" points="6.11351027 9.53237489e-14 7.43502613e-16 0 13.6030049 15.9 19.0837383 15.9"></polygon>
|
||||||
</g>
|
</g>
|
||||||
<line x1="103.02018" y1="7.5" x2="203.018671" y2="8" id="路径-13" stroke="url(#linearGradient-8)" stroke-width="2"></line>
|
<line x1="109.201391" y1="7.95" x2="215.199791" y2="8.48" id="路径-13" stroke="url(#linearGradient-8)" stroke-width="2.12"></line>
|
||||||
</g>
|
</g>
|
||||||
<g id="编组-3备份" transform="translate(1678.705842, 7.500000) scale(-1, 1) translate(-1678.705842, -7.500000) translate(1577.185955, 0.000000)">
|
<g id="编组-3备份" transform="translate(1779.428192, 7.950000) scale(-1, 1) translate(-1779.428192, -7.950000) translate(1671.817112, 0.000000)">
|
||||||
<g id="编组-2备份" fill="#31A6AE">
|
<g id="编组-2备份" fill="#31A6AE">
|
||||||
<polygon id="路径-11" points="77.7815693 8.9928065e-14 72.0141067 0 84.8471303 15 90.0176334 15"></polygon>
|
<polygon id="路径-11" points="82.4484634 9.53237489e-14 76.3349532 0 89.9379581 15.9 95.4186914 15.9"></polygon>
|
||||||
<polygon id="路径-11备份" opacity="0.8" points="59.7780426 8.9928065e-14 54.0105801 0 66.8436036 15 72.0141067 15"></polygon>
|
<polygon id="路径-11备份" opacity="0.8" points="63.3647251 9.53237489e-14 57.2512149 0 70.8542198 15.9 76.3349532 15.9"></polygon>
|
||||||
<polygon id="路径-11备份-3" opacity="0.4" points="23.7709892 8.9928065e-14 18.0035267 0 30.8365502 15 36.0070534 15"></polygon>
|
<polygon id="路径-11备份-3" opacity="0.4" points="25.1972486 9.53237489e-14 19.0837383 0 32.6867432 15.9 38.1674766 15.9"></polygon>
|
||||||
<polygon id="路径-11备份-2" opacity="0.601434" points="41.7745159 8.9928065e-14 36.0070534 0 48.8400769 15 54.0105801 15"></polygon>
|
<polygon id="路径-11备份-2" opacity="0.601434" points="44.2809868 9.53237489e-14 38.1674766 0 51.7704815 15.9 57.2512149 15.9"></polygon>
|
||||||
<polygon id="路径-11备份-4" opacity="0.201434" points="5.76746252 8.9928065e-14 7.01417559e-16 0 12.8330235 15 18.0035267 15"></polygon>
|
<polygon id="路径-11备份-4" opacity="0.201434" points="6.11351027 9.53237489e-14 7.43502613e-16 0 13.6030049 15.9 19.0837383 15.9"></polygon>
|
||||||
</g>
|
</g>
|
||||||
<line x1="103.02018" y1="7.5" x2="203.018671" y2="8" id="路径-13" stroke="url(#linearGradient-8)" stroke-width="2"></line>
|
<line x1="109.201391" y1="7.95" x2="215.199791" y2="8.48" id="路径-13" stroke="url(#linearGradient-8)" stroke-width="2.12"></line>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
<rect id="矩形" stroke="#979797" opacity="0" x="0.5" y="0.5" width="1919" height="87"></rect>
|
<rect id="矩形" stroke="#979797" stroke-width="1.06" opacity="0" x="0.53" y="0.53" width="2034.14" height="92.22"></rect>
|
||||||
</g>
|
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 9.7 KiB |
25
src/App.tsx
25
src/App.tsx
@ -15,6 +15,9 @@ import SwitchLine from "./page/AutoSwitch/SwitchLine";
|
|||||||
import {MyObservable} from "./context/MyObservable";
|
import {MyObservable} from "./context/MyObservable";
|
||||||
import {Observable} from "@babylonjs/core";
|
import {Observable} from "@babylonjs/core";
|
||||||
import {selectGlassStatus} from "./store/ProductionMonitoringEntity";
|
import {selectGlassStatus} from "./store/ProductionMonitoringEntity";
|
||||||
|
import TestPage from "./page/TestPage";
|
||||||
|
import LDPage from "./page/LDPage"
|
||||||
|
import LinePage from './page/LinePage';
|
||||||
|
|
||||||
// const LOCALES_LIST = [
|
// const LOCALES_LIST = [
|
||||||
// {
|
// {
|
||||||
@ -78,6 +81,28 @@ function App() {
|
|||||||
element: <SwitchLine/>,
|
element: <SwitchLine/>,
|
||||||
errorElement: <ErrorPage/>
|
errorElement: <ErrorPage/>
|
||||||
},
|
},
|
||||||
|
/////////////////////////////////////////////////////////////////////////////
|
||||||
|
{
|
||||||
|
path: "/TP/:LineID?",
|
||||||
|
element: <TestPage/>,
|
||||||
|
errorElement: <ErrorPage/>
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/LD",
|
||||||
|
element: <LDPage/>,
|
||||||
|
errorElement: <ErrorPage/>
|
||||||
|
},
|
||||||
|
///////////////////////////////////////////////////////////////
|
||||||
|
{
|
||||||
|
path: "/LP/:LineID?",
|
||||||
|
element: <LinePage/>,
|
||||||
|
errorElement: <ErrorPage/>
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// path: "/TP/:LineID?",
|
||||||
|
// element: <TestPage/>,
|
||||||
|
// errorElement: <ErrorPage/>
|
||||||
|
// },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
429
src/babylonjs/LinePageBabylon.tsx
Normal file
429
src/babylonjs/LinePageBabylon.tsx
Normal file
@ -0,0 +1,429 @@
|
|||||||
|
import React, { useEffect, useRef, useState, useContext, useMemo } from "react";
|
||||||
|
import * as BABYLON from "@babylonjs/core";
|
||||||
|
import "@babylonjs/core/Debug/debugLayer";
|
||||||
|
import "@babylonjs/inspector";
|
||||||
|
import "@babylonjs/loaders/glTF";
|
||||||
|
import { GridMaterial } from "@babylonjs/materials/";
|
||||||
|
import {
|
||||||
|
Animatable,
|
||||||
|
HemisphericLight,
|
||||||
|
Mesh,
|
||||||
|
Observable,
|
||||||
|
Vector3,
|
||||||
|
} from "@babylonjs/core";
|
||||||
|
import {
|
||||||
|
GlassAnimation1_1,
|
||||||
|
GlassAnimation1_2D,
|
||||||
|
GlassAnimation1_2U,
|
||||||
|
GlassAnimation1_3,
|
||||||
|
GlassAnimation1_4,
|
||||||
|
GlassAnimation2_1,
|
||||||
|
GlassAnimation2_2D,
|
||||||
|
GlassAnimation2_2U,
|
||||||
|
GlassAnimation2_3,
|
||||||
|
GlassAnimation2_4,
|
||||||
|
GlassAnimation3_1,
|
||||||
|
GlassAnimation3_2D,
|
||||||
|
GlassAnimation3_2U,
|
||||||
|
GlassAnimation3_3,
|
||||||
|
GlassAnimation3_4,
|
||||||
|
GlassAnimation4_1,
|
||||||
|
GlassAnimation4_2D,
|
||||||
|
GlassAnimation4_2U,
|
||||||
|
GlassAnimation4_3,
|
||||||
|
GlassAnimation4_4,
|
||||||
|
} from "./GlassAnimation";
|
||||||
|
import { useAppSelector } from "../store/hooks";
|
||||||
|
import {
|
||||||
|
GlassStatus,
|
||||||
|
selectGlassStatus,
|
||||||
|
} from "../store/ProductionMonitoringEntity";
|
||||||
|
import "../page/style/standard.css";
|
||||||
|
import { MyObservable } from "../context/MyObservable";
|
||||||
|
import { Button, ButtonGroup } from "@mui/material";
|
||||||
|
import intl from "react-intl-universal";
|
||||||
|
import { EquStatusInterface, selectEquStatus } from "../store/EquStatusEntity";
|
||||||
|
import EquMap from "./EquMap";
|
||||||
|
|
||||||
|
const onMainCamObservable = new Observable();
|
||||||
|
const onEquObservable = new Observable();
|
||||||
|
|
||||||
|
const myStyle = {
|
||||||
|
width: "1041px",
|
||||||
|
height: "562px",
|
||||||
|
outline: "none",
|
||||||
|
};
|
||||||
|
|
||||||
|
const DetailCamera = {
|
||||||
|
alpha: BABYLON.Tools.ToRadians(270),
|
||||||
|
beta: BABYLON.Tools.ToRadians(25),
|
||||||
|
radius: 120,
|
||||||
|
target: new BABYLON.Vector3(-110, 0, -8),
|
||||||
|
// Part_1: {
|
||||||
|
// alpha: BABYLON.Tools.ToRadians(270),
|
||||||
|
// beta: BABYLON.Tools.ToRadians(25),
|
||||||
|
// radius: 85,
|
||||||
|
// target: new BABYLON.Vector3(-110, 0, -8),
|
||||||
|
// },
|
||||||
|
// Part_2: {
|
||||||
|
// alpha: BABYLON.Tools.ToRadians(270),
|
||||||
|
// beta: BABYLON.Tools.ToRadians(25),
|
||||||
|
// radius: 85,
|
||||||
|
// target: new BABYLON.Vector3(-40, 0, -8),
|
||||||
|
// },
|
||||||
|
// Part_3: {
|
||||||
|
// alpha: BABYLON.Tools.ToRadians(270),
|
||||||
|
// beta: BABYLON.Tools.ToRadians(25),
|
||||||
|
// radius: 85,
|
||||||
|
// target: new BABYLON.Vector3(0, 0, -8),
|
||||||
|
// },
|
||||||
|
// Part_4: {
|
||||||
|
// alpha: BABYLON.Tools.ToRadians(270),
|
||||||
|
// beta: BABYLON.Tools.ToRadians(25),
|
||||||
|
// radius: 85,
|
||||||
|
// target: new BABYLON.Vector3(110, 0, -8),
|
||||||
|
// },
|
||||||
|
};
|
||||||
|
|
||||||
|
interface MybabylonJSProps {
|
||||||
|
modelPath: string; // 明确 modelPath 属性的类型为 string
|
||||||
|
}
|
||||||
|
|
||||||
|
function MybabylonJS({ modelPath }: MybabylonJSProps) {
|
||||||
|
const onGlassObservable = useContext(MyObservable);
|
||||||
|
const EquStatus = useAppSelector(selectEquStatus);
|
||||||
|
const canvasRef = useRef(null);
|
||||||
|
onEquObservable.notifyObservers(EquStatus);
|
||||||
|
// const thisLineGlassStatus = useAppSelector(selectGlassStatus)
|
||||||
|
// onGlassObservable.notifyObservers(thisLineGlassStatus)
|
||||||
|
const [SelectedMeshName, setSelectedMeshName] = useState<string | null>(null);
|
||||||
|
|
||||||
|
interface MybabylonJSProps {
|
||||||
|
modelPath: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用 useRef 来存储当前加载的模型引用
|
||||||
|
const currentMeshesRef = useRef<Array<BABYLON.AbstractMesh>>([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// 确保 canvas 引用存在
|
||||||
|
if (!canvasRef.current) return;
|
||||||
|
|
||||||
|
const canvas = canvasRef.current;
|
||||||
|
const engine = new BABYLON.Engine(canvas, true, {
|
||||||
|
preserveDrawingBuffer: true,
|
||||||
|
stencil: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const createScene = async function () {
|
||||||
|
// This creates a basic Babylon Scene object (non-mesh)
|
||||||
|
const scene = new BABYLON.Scene(engine);
|
||||||
|
scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
|
||||||
|
|
||||||
|
const light = new BABYLON.DirectionalLight(
|
||||||
|
"light",
|
||||||
|
new BABYLON.Vector3(20, 20, 100),
|
||||||
|
scene
|
||||||
|
);
|
||||||
|
const light2 = new BABYLON.PointLight(
|
||||||
|
"light2",
|
||||||
|
new BABYLON.Vector3(20, 20, 100),
|
||||||
|
scene
|
||||||
|
);
|
||||||
|
|
||||||
|
const Glass1_1 = new BABYLON.TransformNode("Glass1_1");
|
||||||
|
|
||||||
|
const baseLight = new HemisphericLight(
|
||||||
|
"hemiLight",
|
||||||
|
new Vector3(-1, 1, 0),
|
||||||
|
scene
|
||||||
|
);
|
||||||
|
baseLight.intensity = 1;
|
||||||
|
baseLight.diffuse = new BABYLON.Color3(1, 1, 1);
|
||||||
|
baseLight.specular = new BABYLON.Color3(0.25, 0.25, 0.25);
|
||||||
|
baseLight.groundColor = new BABYLON.Color3(0.5, 0.5, 0.5);
|
||||||
|
|
||||||
|
//add an arcRotateCamera to the scene
|
||||||
|
const camera = new BABYLON.ArcRotateCamera(
|
||||||
|
"camera",
|
||||||
|
BABYLON.Tools.ToRadians(245),
|
||||||
|
BABYLON.Tools.ToRadians(25),
|
||||||
|
90,
|
||||||
|
new BABYLON.Vector3(-13, 0, 0)
|
||||||
|
);
|
||||||
|
camera.lowerRadiusLimit = 10;
|
||||||
|
camera.upperRadiusLimit = 600;
|
||||||
|
|
||||||
|
// This attaches the camera to the canvas
|
||||||
|
camera.attachControl(canvas, true);
|
||||||
|
|
||||||
|
//创建一个材质
|
||||||
|
const newMt = new BABYLON.StandardMaterial("newMt");
|
||||||
|
newMt.diffuseColor = BABYLON.Color3.Blue();
|
||||||
|
|
||||||
|
const ground = BABYLON.MeshBuilder.CreateGround(
|
||||||
|
"ground",
|
||||||
|
{
|
||||||
|
width: 1000,
|
||||||
|
height: 1000,
|
||||||
|
subdivisions: 1,
|
||||||
|
},
|
||||||
|
scene
|
||||||
|
);
|
||||||
|
|
||||||
|
ground.scaling.x = 100;
|
||||||
|
ground.scaling.z = ground.scaling.x;
|
||||||
|
ground.isPickable = false;
|
||||||
|
|
||||||
|
let grid = new GridMaterial("grid", scene);
|
||||||
|
|
||||||
|
grid.majorUnitFrequency = 10;
|
||||||
|
grid.minorUnitVisibility = 0.3;
|
||||||
|
grid.gridRatio = 0.04;
|
||||||
|
grid.backFaceCulling = !1;
|
||||||
|
grid.mainColor = new BABYLON.Color3(1, 1, 1);
|
||||||
|
grid.lineColor = new BABYLON.Color3(1, 1, 1);
|
||||||
|
grid.opacity = 0.8;
|
||||||
|
grid.zOffset = 1;
|
||||||
|
grid.opacityTexture = new BABYLON.Texture(
|
||||||
|
"/public/png/backgroundGround.png",
|
||||||
|
scene
|
||||||
|
);
|
||||||
|
ground.material = grid;
|
||||||
|
|
||||||
|
let hl = new BABYLON.HighlightLayer("hl1", scene);
|
||||||
|
let hl2 = new BABYLON.HighlightLayer("hl2", scene);
|
||||||
|
|
||||||
|
// var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `${modelPath}.babylon`, scene);
|
||||||
|
|
||||||
|
// 定义一个函数来加载或重新加载模型
|
||||||
|
const loadOrReloadModel = async () => {
|
||||||
|
// 在加载新模型之前卸载已加载的模型
|
||||||
|
currentMeshesRef.current.forEach((mesh) => {
|
||||||
|
if (mesh && mesh.parent) {
|
||||||
|
scene.removeMesh(mesh, true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
currentMeshesRef.current = []; // 重置模型数组
|
||||||
|
try {
|
||||||
|
// 使用 ImportMeshAsync 加载新模型
|
||||||
|
var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync(
|
||||||
|
"",
|
||||||
|
"/Line/",
|
||||||
|
`${modelPath}.babylon`,
|
||||||
|
scene
|
||||||
|
);
|
||||||
|
// var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line1.babylon`, scene);
|
||||||
|
// var LOD1MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line2.babylon`, scene);
|
||||||
|
// var LOD2MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line3.babylon`, scene);
|
||||||
|
// var LOD3MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line4.babylon`, scene);
|
||||||
|
// var LOD4MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line5.babylon`, scene);
|
||||||
|
// 将新加载的模型添加到 currentMeshesRef 中
|
||||||
|
currentMeshesRef.current.push(...LOD0MESH.meshes);
|
||||||
|
|
||||||
|
// ...为新加载的模型设置交互逻辑
|
||||||
|
|
||||||
|
LOD0MESH.meshes.map((mesh) => {
|
||||||
|
mesh.isPickable = true;
|
||||||
|
mesh.actionManager = new BABYLON.ActionManager(scene);
|
||||||
|
//鼠标移动到物体上亮显
|
||||||
|
mesh.actionManager.registerAction(
|
||||||
|
new BABYLON.ExecuteCodeAction(
|
||||||
|
BABYLON.ActionManager.OnPointerOverTrigger,
|
||||||
|
() => {
|
||||||
|
// @ts-ignore
|
||||||
|
hl.addMesh(mesh, BABYLON.Color3.Green());
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
mesh.actionManager.registerAction(
|
||||||
|
new BABYLON.ExecuteCodeAction(
|
||||||
|
BABYLON.ActionManager.OnPointerOutTrigger,
|
||||||
|
() => {
|
||||||
|
// @ts-ignore
|
||||||
|
hl.removeMesh(mesh);
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
mesh._scene.onPointerDown = async (event, _pickResult) => {
|
||||||
|
const pickInfo = mesh._scene.pick(
|
||||||
|
mesh._scene.pointerX,
|
||||||
|
mesh._scene.pointerY
|
||||||
|
);
|
||||||
|
|
||||||
|
const clickedPosition = _pickResult.pickedPoint;
|
||||||
|
//如果需要获取吗模型根节点，而不是模型中某个组件，请用一下方法
|
||||||
|
// getRootNode(pickInfo.pickedMesh as BABYLON.Node) 如上篇文章getRootNode函数
|
||||||
|
|
||||||
|
//判断是否是右键
|
||||||
|
if (!(event.buttons === 1 && pickInfo.pickedMesh)) return;
|
||||||
|
const MeshName1 = pickInfo.pickedMesh.name.split(".")[0];
|
||||||
|
|
||||||
|
setSelectedMeshName(MeshName1);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
/////////////////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
onEquObservable.add((eventData, eventState) => {
|
||||||
|
LOD0MESH.meshes.find((mesh) => {
|
||||||
|
// @ts-ignore
|
||||||
|
hl2.removeMesh(mesh);
|
||||||
|
});
|
||||||
|
Object.keys(eventData as EquStatusInterface).map((key) => {
|
||||||
|
// @ts-ignore
|
||||||
|
if (eventData[key] == 2) {
|
||||||
|
// @ts-ignore
|
||||||
|
EquMap[key].map((name) => {
|
||||||
|
LOD0MESH.meshes.find((mesh) => {
|
||||||
|
if (mesh.name == name) {
|
||||||
|
// @ts-ignore
|
||||||
|
hl2.addMesh(mesh, BABYLON.Color3.Red());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/////////////////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
} catch (error) {
|
||||||
|
console.error("加载模型失败:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 调用函数以加载或重新加载模型
|
||||||
|
loadOrReloadModel();
|
||||||
|
|
||||||
|
function reset() {
|
||||||
|
camera.target = new BABYLON.Vector3(-13, 0, 0);
|
||||||
|
camera.alpha = BABYLON.Tools.ToRadians(245);
|
||||||
|
camera.beta = BABYLON.Tools.ToRadians(25);
|
||||||
|
camera.radius = 90;
|
||||||
|
}
|
||||||
|
|
||||||
|
let resetCamera = setTimeout(reset, 15000);
|
||||||
|
scene.onPointerObservable.add((pointerInfo) => {
|
||||||
|
// console.log(camera.target, camera.alpha * 180 / 3.14, camera.beta * 180 / 3.14, camera.radius)
|
||||||
|
switch (pointerInfo.type) {
|
||||||
|
case BABYLON.PointerEventTypes.POINTERMOVE:
|
||||||
|
clearTimeout(resetCamera);
|
||||||
|
resetCamera = setTimeout(reset, 15000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// onMainCamObservable.add((eventData, eventState) => {
|
||||||
|
// clearTimeout(resetCamera);
|
||||||
|
// resetCamera = setTimeout(reset, 5000);
|
||||||
|
// switch (eventData) {
|
||||||
|
// case 1:
|
||||||
|
// camera.target = DetailCamera.Part_1.target;
|
||||||
|
// camera.alpha = DetailCamera.Part_1.alpha;
|
||||||
|
// camera.beta = DetailCamera.Part_1.beta;
|
||||||
|
// camera.radius = DetailCamera.Part_1.radius;
|
||||||
|
// break;
|
||||||
|
// case 2:
|
||||||
|
// camera.target = DetailCamera.Part_2.target;
|
||||||
|
// camera.alpha = DetailCamera.Part_2.alpha;
|
||||||
|
// camera.beta = DetailCamera.Part_2.beta;
|
||||||
|
// camera.radius = DetailCamera.Part_2.radius;
|
||||||
|
// break;
|
||||||
|
// case 3:
|
||||||
|
// camera.target = DetailCamera.Part_3.target;
|
||||||
|
// camera.alpha = DetailCamera.Part_3.alpha;
|
||||||
|
// camera.beta = DetailCamera.Part_3.beta;
|
||||||
|
// camera.radius = DetailCamera.Part_3.radius;
|
||||||
|
// break;
|
||||||
|
// case 4:
|
||||||
|
// camera.target = DetailCamera.Part_4.target;
|
||||||
|
// camera.alpha = DetailCamera.Part_4.alpha;
|
||||||
|
// camera.beta = DetailCamera.Part_4.beta;
|
||||||
|
// camera.radius = DetailCamera.Part_4.radius;
|
||||||
|
// break;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
return scene;
|
||||||
|
};
|
||||||
|
|
||||||
|
// call the createScene function
|
||||||
|
const scene = createScene();
|
||||||
|
|
||||||
|
scene.then((scene) => {});
|
||||||
|
|
||||||
|
// run the render loop
|
||||||
|
scene.then(
|
||||||
|
(scene) => {
|
||||||
|
engine.runRenderLoop(function () {
|
||||||
|
scene.render();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
(reason) => {
|
||||||
|
console.log(reason);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Resize
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
engine.resize();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 组件卸载时的清理逻辑
|
||||||
|
return () => {
|
||||||
|
// 清理场景和引擎资源
|
||||||
|
engine.dispose();
|
||||||
|
};
|
||||||
|
}, [modelPath]);
|
||||||
|
|
||||||
|
// const handleClick1 = () => {
|
||||||
|
// onMainCamObservable.notifyObservers(1);
|
||||||
|
// };
|
||||||
|
// const handleClick2 = () => {
|
||||||
|
// onMainCamObservable.notifyObservers(2);
|
||||||
|
// };
|
||||||
|
// const handleClick3 = () => {
|
||||||
|
// onMainCamObservable.notifyObservers(3);
|
||||||
|
// };
|
||||||
|
// const handleClick4 = () => {
|
||||||
|
// onMainCamObservable.notifyObservers(4);
|
||||||
|
// };
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={myStyle}>
|
||||||
|
{/* <ButtonGroup
|
||||||
|
variant="contained"
|
||||||
|
aria-label="outlined button group"
|
||||||
|
className={"btnArea"}
|
||||||
|
>
|
||||||
|
<h2>当前选择: {SelectedMeshName}</h2>
|
||||||
|
<Button
|
||||||
|
sx={{ backgroundColor: "rgba(86, 244, 231, 0.69)" }}
|
||||||
|
onClick={handleClick1}
|
||||||
|
>
|
||||||
|
{intl.get("Part1")}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
sx={{ backgroundColor: "rgba(86, 244, 231, 0.69)" }}
|
||||||
|
onClick={handleClick2}
|
||||||
|
>
|
||||||
|
{intl.get("Part2")}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
sx={{ backgroundColor: "rgba(86, 244, 231, 0.69)" }}
|
||||||
|
onClick={handleClick3}
|
||||||
|
>
|
||||||
|
{intl.get("Part3")}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
sx={{ backgroundColor: "rgba(86, 244, 231, 0.69)" }}
|
||||||
|
onClick={handleClick4}
|
||||||
|
>
|
||||||
|
{intl.get("Part4")}
|
||||||
|
</Button>
|
||||||
|
</ButtonGroup> */}
|
||||||
|
<canvas ref={canvasRef} style={myStyle} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MybabylonJS;
|
||||||
@ -163,8 +163,8 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
|
|||||||
});
|
});
|
||||||
currentMeshesRef.current = []; // 重置模型数组
|
currentMeshesRef.current = []; // 重置模型数组
|
||||||
try { // 使用 ImportMeshAsync 加载新模型
|
try { // 使用 ImportMeshAsync 加载新模型
|
||||||
// var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `${modelPath}.babylon`, scene);
|
var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `${modelPath}.babylon`, scene);
|
||||||
var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line1.babylon`, scene);
|
// var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line1.babylon`, scene);
|
||||||
// var LOD1MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line2.babylon`, scene);
|
// var LOD1MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line2.babylon`, scene);
|
||||||
// var LOD2MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line3.babylon`, scene);
|
// var LOD2MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line3.babylon`, scene);
|
||||||
// var LOD3MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line4.babylon`, scene);
|
// var LOD3MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line4.babylon`, scene);
|
||||||
|
|||||||
4
src/page/LDPage/index.css
Normal file
4
src/page/LDPage/index.css
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
.main-box {
|
||||||
|
font-size: 50px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
35
src/page/LDPage/index.tsx
Normal file
35
src/page/LDPage/index.tsx
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import "./index.css"
|
||||||
|
import {useEffect} from 'react';
|
||||||
|
import {useLocation,useNavigate} from "react-router-dom";
|
||||||
|
function LDPage() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const {state} = useLocation();
|
||||||
|
console.log("LDPage被加载了")
|
||||||
|
useEffect(() => {
|
||||||
|
const handleKeyDown = (event:any) => {
|
||||||
|
if (event.key === 'ArrowUp') {
|
||||||
|
console.log('LDPage向上键被按下');
|
||||||
|
navigate(`/TP/${state.LineID}`);
|
||||||
|
// 执行向上键的逻辑
|
||||||
|
} else if (event.key === 'ArrowDown') {
|
||||||
|
console.log('LDPage向下键被按下');
|
||||||
|
// 执行向下键的逻辑
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('keydown', handleKeyDown);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('keydown', handleKeyDown);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="main-box">LDPage{state.LineID}</div>
|
||||||
|
<div className="main-box" style={{display:'none'}}>3434</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LDPage;
|
||||||
21
src/page/LinePage/Center/CenterDown.tsx
Normal file
21
src/page/LinePage/Center/CenterDown.tsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import TitleBox from "../Component/TitleBox";
|
||||||
|
import LineChart from "./LineChart";
|
||||||
|
function CenterDown() {
|
||||||
|
return (
|
||||||
|
<div className="center_down flex-row">
|
||||||
|
<div className="center_down_inner flex-col left-box">
|
||||||
|
<TitleBox title={"center_down_left"} />
|
||||||
|
<span className="alarm_num_title">— 报警总数 —</span>
|
||||||
|
<div className="alarm_num">321,343</div>
|
||||||
|
</div>
|
||||||
|
{/* 产线成品率 */}
|
||||||
|
<div className="center_down_inner flex-col right_box">
|
||||||
|
<TitleBox title={"center_down_right"} />
|
||||||
|
<div className="chart_box">
|
||||||
|
<LineChart />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default CenterDown;
|
||||||
9
src/page/LinePage/Center/CenterUp.tsx
Normal file
9
src/page/LinePage/Center/CenterUp.tsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import LinePageBabylon from "../../../babylonjs/LinePageBabylon";
|
||||||
|
function CenterUp() {
|
||||||
|
return (
|
||||||
|
<div className="center_up">
|
||||||
|
<LinePageBabylon modelPath={`Line1-2`} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default CenterUp;
|
||||||
102
src/page/LinePage/Center/LineChart/chart.config.ts
Normal file
102
src/page/LinePage/Center/LineChart/chart.config.ts
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
import * as echarts from "echarts";
|
||||||
|
export default function getOptions() {
|
||||||
|
const colors = ["#1A99FF", "#FFB70C", "#C69DFF", "#50F4E3", "#E02094"];
|
||||||
|
return {
|
||||||
|
color: colors,
|
||||||
|
grid: { top: 38, right: 12, bottom: 26, left: 48 },
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
icon: "roundRect",
|
||||||
|
top: 10,
|
||||||
|
right: 10,
|
||||||
|
padding: 0,
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
itemGap: 3,
|
||||||
|
height: 10,
|
||||||
|
textStyle: {
|
||||||
|
color: "#DFF1FE",
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: Array(7)
|
||||||
|
.fill(1)
|
||||||
|
.map((_, index) => {
|
||||||
|
const today = new Date();
|
||||||
|
const dtimestamp =
|
||||||
|
today.getTime() - (index + 1) * 24 * 60 * 60 * 1000;
|
||||||
|
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
|
||||||
|
dtimestamp
|
||||||
|
).getDate()}`;
|
||||||
|
})
|
||||||
|
.reverse(),
|
||||||
|
axisLabel: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
axisTick: { show: false },
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: "#5982B2",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: "单位/%",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
type: "value",
|
||||||
|
axisLabel: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 14,
|
||||||
|
formatter: "{value}",
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: "#5982B2",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: "#5982B2",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "产线1",
|
||||||
|
type: "line",
|
||||||
|
data: [20, 32, 10, 34, 90, 30, 20],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "产线2",
|
||||||
|
type: "line",
|
||||||
|
data: [22, 82, 91, 34, 90, 33, 31],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "产线3",
|
||||||
|
type: "line",
|
||||||
|
data: [50, 32, 20, 54, 19, 33, 41],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "产线4",
|
||||||
|
type: "line",
|
||||||
|
data: [30, 32, 30, 34, 90, 33, 32],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "产线5",
|
||||||
|
type: "line",
|
||||||
|
data: [20, 92, 91, 94, 90, 30, 53],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
6
src/page/LinePage/Center/LineChart/index.tsx
Normal file
6
src/page/LinePage/Center/LineChart/index.tsx
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import ReactECharts from "echarts-for-react";
|
||||||
|
import getOptions from "./chart.config";
|
||||||
|
function LineChart() {
|
||||||
|
return <ReactECharts option={getOptions()} style={{ height: "100%" }} />;
|
||||||
|
}
|
||||||
|
export default LineChart;
|
||||||
12
src/page/LinePage/Center/index.tsx
Normal file
12
src/page/LinePage/Center/index.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import CenterDown from "./CenterDown";
|
||||||
|
import CenterUp from "./CenterUp";
|
||||||
|
|
||||||
|
function Center() {
|
||||||
|
return (
|
||||||
|
<div className="group_center flex-col">
|
||||||
|
<CenterUp />
|
||||||
|
<CenterDown />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default Center;
|
||||||
19
src/page/LinePage/Component/SwitchButton/index.css
Normal file
19
src/page/LinePage/Component/SwitchButton/index.css
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
.switch-button {
|
||||||
|
height: 33px;
|
||||||
|
}
|
||||||
|
.switch-button button {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
padding: 4px 15px;
|
||||||
|
background-color: rgba(49, 135, 140, 0.3);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.switch-button button:first-child {
|
||||||
|
border-radius: 5px 0 0 5px;
|
||||||
|
}
|
||||||
|
.switch-button button:last-child {
|
||||||
|
border-radius: 0 5px 5px 0;
|
||||||
|
}
|
||||||
|
.switch-button button.active {
|
||||||
|
background-color: rgba(86, 244, 231, 0.7);
|
||||||
|
}
|
||||||
29
src/page/LinePage/Component/SwitchButton/index.tsx
Normal file
29
src/page/LinePage/Component/SwitchButton/index.tsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import "./index.css";
|
||||||
|
interface Name {
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
interface nameListProps {
|
||||||
|
nameList: Name[];
|
||||||
|
activeName: string;
|
||||||
|
setActiveName: (name: string) => void;
|
||||||
|
}
|
||||||
|
function SwitchButton(props: nameListProps) {
|
||||||
|
return (
|
||||||
|
<div className="switch-button">
|
||||||
|
{props.nameList.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={item.name}
|
||||||
|
className={props.activeName === item.name ? "active" : ""}
|
||||||
|
onClick={() => {
|
||||||
|
props.setActiveName(item.name);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default SwitchButton;
|
||||||
13
src/page/LinePage/Component/TitleBox/index.css
Normal file
13
src/page/LinePage/Component/TitleBox/index.css
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
.title_box {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #52fff1;
|
||||||
|
padding: 10px 0 0 15px;
|
||||||
|
}
|
||||||
|
.title_box img {
|
||||||
|
width: 33px;
|
||||||
|
height: 33px;
|
||||||
|
vertical-align: bottom;
|
||||||
|
margin-right: 3px;
|
||||||
|
position: relative;
|
||||||
|
top: 3px;
|
||||||
|
}
|
||||||
53
src/page/LinePage/Component/TitleBox/index.tsx
Normal file
53
src/page/LinePage/Component/TitleBox/index.tsx
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
import Defect from "./../../assets/icon/defect.png";
|
||||||
|
import Alarm from "./../../assets/icon/alarm.png";
|
||||||
|
import Finished from "./../../assets/icon/finished.png";
|
||||||
|
import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
|
||||||
|
import Num from "./../../assets/icon/num.png";
|
||||||
|
import Record from "./../../assets/icon/record.png";
|
||||||
|
import "./index.css";
|
||||||
|
interface titleProps {
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
function TitleBox(props: titleProps) {
|
||||||
|
const filteredTitles = () => {
|
||||||
|
switch (props.title) {
|
||||||
|
case "left_up":
|
||||||
|
return {
|
||||||
|
img: Defect,
|
||||||
|
title: "产线缺陷汇总",
|
||||||
|
};
|
||||||
|
case "left_down":
|
||||||
|
return {
|
||||||
|
img: Record,
|
||||||
|
title: "当前产线缺陷",
|
||||||
|
};
|
||||||
|
case "center_down_left":
|
||||||
|
return {
|
||||||
|
img: Alarm,
|
||||||
|
title: "异常报警",
|
||||||
|
};
|
||||||
|
case "center_down_right":
|
||||||
|
return {
|
||||||
|
img: Finished,
|
||||||
|
title: "产线成品率",
|
||||||
|
};
|
||||||
|
case "right_up":
|
||||||
|
return {
|
||||||
|
img: Num,
|
||||||
|
title: "各产线总投入和产出",
|
||||||
|
};
|
||||||
|
default:
|
||||||
|
return {
|
||||||
|
img: InputAndOutput,
|
||||||
|
title: "各产线投入和产出",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="title_box">
|
||||||
|
<img src={filteredTitles().img} alt="title" />
|
||||||
|
<span>{filteredTitles().title}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default TitleBox;
|
||||||
73
src/page/LinePage/Left/BarChart/chart.config.ts
Normal file
73
src/page/LinePage/Left/BarChart/chart.config.ts
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
import * as echarts from "echarts";
|
||||||
|
export default function getOptions() {
|
||||||
|
const colors = ["#1A99FF", "#FFB70C", "#C69DFF", "#50F4E3", "#E02094"];
|
||||||
|
return {
|
||||||
|
color: colors,
|
||||||
|
grid: { top: 30, right: 12, bottom: 26, left: 48 },
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: ["缺陷1", "缺陷2", "缺陷3", "缺陷4", "缺陷5", "缺陷6"],
|
||||||
|
axisLabel: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 14,
|
||||||
|
interval: 0,
|
||||||
|
},
|
||||||
|
axisTick: { show: false },
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: "#5982B2",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: "单位/千片",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
type: "value",
|
||||||
|
axisLabel: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 14,
|
||||||
|
formatter: "{value}",
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: "#5982B2",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: "#5982B2",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [120, 200, 150, 80, 70, 110],
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 10,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: 12,
|
||||||
|
color: "#9CD4FF",
|
||||||
|
position: "top",
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: "#9DD5FF" },
|
||||||
|
{ offset: 1, color: "#1295FF" },
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
6
src/page/LinePage/Left/BarChart/index.tsx
Normal file
6
src/page/LinePage/Left/BarChart/index.tsx
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import ReactECharts from "echarts-for-react";
|
||||||
|
import getOptions from "./chart.config";
|
||||||
|
function BarChart() {
|
||||||
|
return <ReactECharts option={getOptions()} style={{ height: "100%" }} />;
|
||||||
|
}
|
||||||
|
export default BarChart;
|
||||||
47
src/page/LinePage/Left/LeftDown.tsx
Normal file
47
src/page/LinePage/Left/LeftDown.tsx
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
import TitleBox from "../Component/TitleBox";
|
||||||
|
import SwitchButton from "../Component/SwitchButton";
|
||||||
|
import BarChart from "./BarChart";
|
||||||
|
import { useState } from "react";
|
||||||
|
function LeftDown() {
|
||||||
|
const nameList = [{ name: "表单" }, { name: "柱状" }];
|
||||||
|
const [activeName, setActiveName] = useState<string>(nameList[0].name);
|
||||||
|
return (
|
||||||
|
<div className="left_down">
|
||||||
|
<TitleBox title={"left_down"} />
|
||||||
|
<div className="left_up_switch">
|
||||||
|
<SwitchButton
|
||||||
|
nameList={nameList}
|
||||||
|
activeName={activeName}
|
||||||
|
setActiveName={setActiveName}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div style={{ padding: "10px", height: "555px" }}>
|
||||||
|
<div className="left_down_title flex-row">
|
||||||
|
<div className="left_down_box1 flex-col" />
|
||||||
|
<span className="left_down_text">当天</span>
|
||||||
|
<div className="left_down_box2 flex-col" />
|
||||||
|
</div>
|
||||||
|
<div className="left_down_content">
|
||||||
|
{activeName === "表单" ? "表单" : <BarChart />}
|
||||||
|
</div>
|
||||||
|
<div className="left_down_title flex-row">
|
||||||
|
<div className="left_down_box1 flex-col" />
|
||||||
|
<span className="left_down_text">本周</span>
|
||||||
|
<div className="left_down_box2 flex-col" />
|
||||||
|
</div>
|
||||||
|
<div className="left_down_content">
|
||||||
|
{activeName === "表单" ? "表单" : <BarChart />}
|
||||||
|
</div>
|
||||||
|
<div className="left_down_title flex-row">
|
||||||
|
<div className="left_down_box1 flex-col" />
|
||||||
|
<span className="left_down_text">本月</span>
|
||||||
|
<div className="left_down_box2 flex-col" />
|
||||||
|
</div>
|
||||||
|
<div className="left_down_content">
|
||||||
|
{activeName === "表单" ? "表单" : <BarChart />}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default LeftDown;
|
||||||
24
src/page/LinePage/Left/LeftUp.tsx
Normal file
24
src/page/LinePage/Left/LeftUp.tsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import TitleBox from "../Component/TitleBox";
|
||||||
|
import SwitchButton from "../Component/SwitchButton";
|
||||||
|
import SummaryBarChart from "./SummaryBarChart";
|
||||||
|
import { useState } from "react";
|
||||||
|
function LeftUp() {
|
||||||
|
const nameList = [{ name: "天" }, { name: "周" }, { name: "月" }];
|
||||||
|
const [activeName, setActiveName] = useState<string>(nameList[0].name);
|
||||||
|
return (
|
||||||
|
<div className="left_up">
|
||||||
|
<TitleBox title={"left_up"} />
|
||||||
|
<div className="left_up_switch">
|
||||||
|
<SwitchButton
|
||||||
|
nameList={nameList}
|
||||||
|
activeName={activeName}
|
||||||
|
setActiveName={setActiveName}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="left_up_chart">
|
||||||
|
<SummaryBarChart />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default LeftUp;
|
||||||
138
src/page/LinePage/Left/SummaryBarChart/chart.config.ts
Normal file
138
src/page/LinePage/Left/SummaryBarChart/chart.config.ts
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
import * as echarts from "echarts";
|
||||||
|
export default function getOptions() {
|
||||||
|
const colors = ["#1A99FF", "#FFB70C", "#C69DFF", "#50F4E3", "#E02094"];
|
||||||
|
return {
|
||||||
|
color: colors,
|
||||||
|
grid: { top: 38, right: 12, bottom: 26, left: 48 },
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
icon: "roundRect",
|
||||||
|
top: 10,
|
||||||
|
right: 10,
|
||||||
|
padding: 0,
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
itemGap: 3,
|
||||||
|
height: 10,
|
||||||
|
textStyle: {
|
||||||
|
color: "#DFF1FE",
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
// data: Array(7)
|
||||||
|
// .fill(1)
|
||||||
|
// .map((_, index) => {
|
||||||
|
// const today = new Date();
|
||||||
|
// const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
|
||||||
|
// return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
|
||||||
|
// dtimestamp
|
||||||
|
// ).getDate()}`;
|
||||||
|
// })
|
||||||
|
// .reverse(),
|
||||||
|
axisLabel: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
axisTick: { show: false },
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: "#5982B2",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: "单位/千片",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
type: "value",
|
||||||
|
axisLabel: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 14,
|
||||||
|
formatter: "{value}",
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: "#5982B2",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: "#5982B2",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
dataset: {
|
||||||
|
source: [
|
||||||
|
["product", "产线1", "产线2", "产线3", "产线4", "产线5"],
|
||||||
|
["缺陷1", 43, 85, 93, 60, 80],
|
||||||
|
["缺陷2", 83, 73, 55, 67, 90],
|
||||||
|
["缺陷3", 86, 65, 82, 68, 90],
|
||||||
|
["缺陷4", 72, 53, 39, 88, 50],
|
||||||
|
["缺陷5", 72, 53, 39, 88, 50],
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// Declare several bar series, each will be mapped
|
||||||
|
// to a column of dataset.source by default.
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 8,
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: "#9DD5FF" },
|
||||||
|
{ offset: 1, color: "#1295FF" },
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 8,
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: "#FFC844" },
|
||||||
|
{ offset: 1, color: "#FFB70C" },
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 8,
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: "#FF8BC3" },
|
||||||
|
{ offset: 1, color: "#EB46A1" },
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 8,
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: "#85F6E9" },
|
||||||
|
{ offset: 1, color: "#2EC6B4" },
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 8,
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: "#9496FF" },
|
||||||
|
{ offset: 1, color: "#6567FF" },
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
6
src/page/LinePage/Left/SummaryBarChart/index.tsx
Normal file
6
src/page/LinePage/Left/SummaryBarChart/index.tsx
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import ReactECharts from "echarts-for-react";
|
||||||
|
import getOptions from "./chart.config";
|
||||||
|
function SummaryBarChart() {
|
||||||
|
return <ReactECharts option={getOptions()} style={{ height: "100%" }} />;
|
||||||
|
}
|
||||||
|
export default SummaryBarChart;
|
||||||
4
src/page/LinePage/Left/Table/index.tsx
Normal file
4
src/page/LinePage/Left/Table/index.tsx
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
function Table() {
|
||||||
|
return <div>111</div>;
|
||||||
|
}
|
||||||
|
export default Table;
|
||||||
11
src/page/LinePage/Left/index.tsx
Normal file
11
src/page/LinePage/Left/index.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import LeftUp from "./LeftUp";
|
||||||
|
import LeftDown from "./LeftDown";
|
||||||
|
function Left() {
|
||||||
|
return (
|
||||||
|
<div className="group_left flex-col">
|
||||||
|
<LeftUp />
|
||||||
|
<LeftDown />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default Left;
|
||||||
87
src/page/LinePage/Right/LineChart/chart.config.ts
Normal file
87
src/page/LinePage/Right/LineChart/chart.config.ts
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
import * as echarts from "echarts";
|
||||||
|
export default function getOptions() {
|
||||||
|
const colors = ["#1A99FF", "#50F4E3"];
|
||||||
|
return {
|
||||||
|
color: colors,
|
||||||
|
grid: { top: 38, right: 12, bottom: 26, left: 48 },
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
icon: "roundRect",
|
||||||
|
top: 10,
|
||||||
|
right: 10,
|
||||||
|
padding: 0,
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
itemGap: 3,
|
||||||
|
height: 10,
|
||||||
|
textStyle: {
|
||||||
|
color: "#DFF1FE",
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: Array(7)
|
||||||
|
.fill(1)
|
||||||
|
.map((_, index) => {
|
||||||
|
const today = new Date();
|
||||||
|
const dtimestamp =
|
||||||
|
today.getTime() - (index + 1) * 24 * 60 * 60 * 1000;
|
||||||
|
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
|
||||||
|
dtimestamp
|
||||||
|
).getDate()}`;
|
||||||
|
})
|
||||||
|
.reverse(),
|
||||||
|
axisLabel: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
axisTick: { show: false },
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: "#5982B2",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: "单位/千片",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
type: "value",
|
||||||
|
axisLabel: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 14,
|
||||||
|
formatter: "{value}",
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: "#5982B2",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: "#5982B2",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "投入",
|
||||||
|
type: "line",
|
||||||
|
data: [20, 32, 10, 34, 90, 30, 20],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "产出",
|
||||||
|
type: "line",
|
||||||
|
data: [22, 82, 91, 34, 90, 33, 31],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
6
src/page/LinePage/Right/LineChart/index.tsx
Normal file
6
src/page/LinePage/Right/LineChart/index.tsx
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import ReactECharts from "echarts-for-react";
|
||||||
|
import getOptions from "./chart.config";
|
||||||
|
function BarChart() {
|
||||||
|
return <ReactECharts option={getOptions()} style={{ height: "100%" }} />;
|
||||||
|
}
|
||||||
|
export default BarChart;
|
||||||
47
src/page/LinePage/Right/RightDown.tsx
Normal file
47
src/page/LinePage/Right/RightDown.tsx
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
import TitleBox from "../Component/TitleBox";
|
||||||
|
import SwitchButton from "../Component/SwitchButton";
|
||||||
|
import LineChart from "./LineChart";
|
||||||
|
import { useState } from "react";
|
||||||
|
function RightDown() {
|
||||||
|
const nameList = [{ name: "表单" }, { name: "折线" }];
|
||||||
|
const [activeName, setActiveName] = useState<string>(nameList[0].name);
|
||||||
|
return (
|
||||||
|
<div className="right_down">
|
||||||
|
<TitleBox title={"right_down"} />
|
||||||
|
<div className="left_up_switch">
|
||||||
|
<SwitchButton
|
||||||
|
nameList={nameList}
|
||||||
|
activeName={activeName}
|
||||||
|
setActiveName={setActiveName}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div style={{ padding: "10px", height: "628px" }}>
|
||||||
|
<div className="left_down_title flex-row">
|
||||||
|
<div className="left_down_box1 flex-col" />
|
||||||
|
<span className="left_down_text">当天</span>
|
||||||
|
<div className="left_down_box2 flex-col" />
|
||||||
|
</div>
|
||||||
|
<div className="right_down_content">
|
||||||
|
{activeName === "表单" ? "表单" : <LineChart />}
|
||||||
|
</div>
|
||||||
|
<div className="left_down_title flex-row">
|
||||||
|
<div className="left_down_box1 flex-col" />
|
||||||
|
<span className="left_down_text">本周</span>
|
||||||
|
<div className="left_down_box2 flex-col" />
|
||||||
|
</div>
|
||||||
|
<div className="right_down_content">
|
||||||
|
{activeName === "表单" ? "表单" : <LineChart />}
|
||||||
|
</div>
|
||||||
|
<div className="left_down_title flex-row">
|
||||||
|
<div className="left_down_box1 flex-col" />
|
||||||
|
<span className="left_down_text">本月</span>
|
||||||
|
<div className="left_down_box2 flex-col" />
|
||||||
|
</div>
|
||||||
|
<div className="right_down_content">
|
||||||
|
{activeName === "表单" ? "表单" : <LineChart />}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default RightDown;
|
||||||
9
src/page/LinePage/Right/RightUp.tsx
Normal file
9
src/page/LinePage/Right/RightUp.tsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import TitleBox from "../Component/TitleBox";
|
||||||
|
function RightUp() {
|
||||||
|
return (
|
||||||
|
<div className="right_up">
|
||||||
|
<TitleBox title={"right_up"} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default RightUp;
|
||||||
12
src/page/LinePage/Right/index.tsx
Normal file
12
src/page/LinePage/Right/index.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import RightDown from "./RightDown";
|
||||||
|
import RightUp from "./RightUp";
|
||||||
|
|
||||||
|
function Right() {
|
||||||
|
return (
|
||||||
|
<div className="group_right flex-col">
|
||||||
|
<RightUp />
|
||||||
|
<RightDown />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default Right;
|
||||||
14
src/page/LinePage/TopP.tsx
Normal file
14
src/page/LinePage/TopP.tsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import '../../lanhuapp/common.css';
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
|
function TopP() {
|
||||||
|
return (
|
||||||
|
<div className="flex-row">
|
||||||
|
<div className="block_top flex-row">
|
||||||
|
<div className='block_top_title'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TopP;
|
||||||
BIN
src/page/LinePage/assets/icon/alarm.png
Normal file
BIN
src/page/LinePage/assets/icon/alarm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/page/LinePage/assets/icon/defect.png
Normal file
BIN
src/page/LinePage/assets/icon/defect.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/page/LinePage/assets/icon/finished.png
Normal file
BIN
src/page/LinePage/assets/icon/finished.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/page/LinePage/assets/icon/inputAndOutput.png
Normal file
BIN
src/page/LinePage/assets/icon/inputAndOutput.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/page/LinePage/assets/icon/num.png
Normal file
BIN
src/page/LinePage/assets/icon/num.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/page/LinePage/assets/icon/record.png
Normal file
BIN
src/page/LinePage/assets/icon/record.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
168
src/page/LinePage/index.css
Normal file
168
src/page/LinePage/index.css
Normal file
@ -0,0 +1,168 @@
|
|||||||
|
/* 顶部 */
|
||||||
|
.block_top {
|
||||||
|
width: 1920px;
|
||||||
|
height: 94px;
|
||||||
|
background: url(/public/svg/topback.svg) 100% no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
opacity: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block_top_title {
|
||||||
|
width: 651px;
|
||||||
|
height: 77px;
|
||||||
|
background: url(/public/png/topTiltle.png) 100% no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
/* 中部 */
|
||||||
|
.block_bottom {
|
||||||
|
width: 1920px;
|
||||||
|
height: 966px;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_left {
|
||||||
|
width: 402px;
|
||||||
|
height: 966px;
|
||||||
|
margin: 0 0 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_center {
|
||||||
|
width: 1041px;
|
||||||
|
height: 966px;
|
||||||
|
margin: 0 0 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_right {
|
||||||
|
width: 401px;
|
||||||
|
height: 966px;
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left_up {
|
||||||
|
width: 402px;
|
||||||
|
height: 332px;
|
||||||
|
background: url(../../../public/png/rect/lp_left_up.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: 0 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.left_down {
|
||||||
|
width: 402px;
|
||||||
|
height: 599px;
|
||||||
|
background: url(../../../public/png/rect/lp_left_down.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: 0 0;
|
||||||
|
margin-top: 14px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.center_up {
|
||||||
|
width: 1041px;
|
||||||
|
height: 562px;
|
||||||
|
background: url(../../../public/png/rect/lp_center_up.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
.center_down {
|
||||||
|
width: 1041px;
|
||||||
|
height: 368px;
|
||||||
|
margin-top: 17px;
|
||||||
|
}
|
||||||
|
.center_down_inner {
|
||||||
|
width: 513px;
|
||||||
|
height: 366px;
|
||||||
|
background: url(../../../public/png/rect/lp_center_down.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
.center_down .left-box {
|
||||||
|
margin-right: 15px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.center_down .left-box .alarm_num_title {
|
||||||
|
position: absolute;
|
||||||
|
left: 220px;
|
||||||
|
top: 22px;
|
||||||
|
font-size: 13px;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.center_down .left-box .alarm_num {
|
||||||
|
color: #52fff1;
|
||||||
|
font-size: 40px;
|
||||||
|
text-align: center;
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
}
|
||||||
|
.center_down .right_box .chart_box {
|
||||||
|
width: 100%;
|
||||||
|
height: 310px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.right_up {
|
||||||
|
width: 401px;
|
||||||
|
height: 257px;
|
||||||
|
background: url(../../../public/png/rect/lp_right_up.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
.right_down {
|
||||||
|
width: 401px;
|
||||||
|
height: 673px;
|
||||||
|
background: url(../../../public/png/rect/lp_right_down.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: 0 0;
|
||||||
|
margin-top: 14px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.left_up_switch {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 12px;
|
||||||
|
}
|
||||||
|
.left_up_chart {
|
||||||
|
height: 275px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
/* 左侧 */
|
||||||
|
.left_down_title {
|
||||||
|
height: 18px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.left_down_box1 {
|
||||||
|
width: 56px;
|
||||||
|
height: 13px;
|
||||||
|
background: url(/public/png/leftbar.png) 100% no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
.left_down_box2 {
|
||||||
|
width: 56px;
|
||||||
|
height: 13px;
|
||||||
|
background: url(/public/png/rightbar.png) 100% no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: 2px 0 0 0px;
|
||||||
|
}
|
||||||
|
.left_down_text {
|
||||||
|
/*width: 40px;*/
|
||||||
|
height: 18px;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
color: rgba(1, 207, 204, 1);
|
||||||
|
font-size: 18px;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
white-space: nowrap;
|
||||||
|
line-height: 18px;
|
||||||
|
margin-left: 18px;
|
||||||
|
margin-right: 16px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.left_down_content {
|
||||||
|
height: 160px;
|
||||||
|
/* padding-bottom: 5px; */
|
||||||
|
}
|
||||||
|
.right_down_content {
|
||||||
|
height: 185px;
|
||||||
|
/* padding-bottom: 5px; */
|
||||||
|
}
|
||||||
18
src/page/LinePage/index.tsx
Normal file
18
src/page/LinePage/index.tsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import React from "react";
|
||||||
|
import TopP from "./TopP";
|
||||||
|
import Left from "./Left";
|
||||||
|
import Right from "./Right";
|
||||||
|
import Center from "./Center";
|
||||||
|
function LinePage() {
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
<TopP />
|
||||||
|
<div className="block_bottom flex-row">
|
||||||
|
<Left />
|
||||||
|
<Center />
|
||||||
|
<Right />
|
||||||
|
</div>
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default LinePage;
|
||||||
@ -1,12 +1,15 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import LineBabylon from "../../babylonjs/LineBabylon";
|
import LineBabylon from "../../babylonjs/LineBabylon";
|
||||||
|
import MybabylonJS_1 from "../../babylonjs/MybabylonJS_1";
|
||||||
import {Observable} from "@babylonjs/core";
|
import {Observable} from "@babylonjs/core";
|
||||||
|
// import LineID from "../../store/ChangeLineID";
|
||||||
|
|
||||||
function CenterUpE() {
|
function CenterUpE() {
|
||||||
return (
|
return (
|
||||||
<div className="block_16_E flex-col fineWin">
|
<div className="block_16_E flex-col fineWin">
|
||||||
<div className="fineWin-footer"/>
|
<div className="fineWin-footer"/>
|
||||||
<LineBabylon/>
|
<LineBabylon />
|
||||||
|
{/* <MybabylonJS_1 modelPath={`line${LineID}`} /> */}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -15,6 +15,7 @@ import {MyObservable} from "../../context/MyObservable";
|
|||||||
import {ThisLineID} from "../../context/ThisLineID";
|
import {ThisLineID} from "../../context/ThisLineID";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function MainE() {
|
function MainE() {
|
||||||
const contextLineID = useContext(ThisLineID);
|
const contextLineID = useContext(ThisLineID);
|
||||||
const {LineID} = useParams()
|
const {LineID} = useParams()
|
||||||
@ -26,7 +27,6 @@ function MainE() {
|
|||||||
}
|
}
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
dispatch(UpdateChangeLineID(NowThisLineID));
|
dispatch(UpdateChangeLineID(NowThisLineID));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThisLineID.Provider value={NowThisLineID}>
|
<ThisLineID.Provider value={NowThisLineID}>
|
||||||
<TopE/>
|
<TopE/>
|
||||||
|
|||||||
41
src/page/TestPage/CenterUp.tsx
Normal file
41
src/page/TestPage/CenterUp.tsx
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
import React, { useState } from "react"; // 使用useState钩子来管理状态
|
||||||
|
import intl from "react-intl-universal";
|
||||||
|
import '../../lanhuapp/common.css';
|
||||||
|
import "../../lanhuapp/index.css";
|
||||||
|
import "../style/standard.css"
|
||||||
|
import MybabylonJS_1 from "../../babylonjs/MybabylonJS_1";
|
||||||
|
import MybabylonJS_2 from "../../babylonjs/MybabylonJS_2";
|
||||||
|
import { number } from "echarts";
|
||||||
|
import { firePixelShader } from "@babylonjs/materials/fire/fire.fragment";
|
||||||
|
|
||||||
|
function CenterUp() {
|
||||||
|
|
||||||
|
// 使用 useState 钩子来管理当前的序号状态
|
||||||
|
const [modelIndex, setModelIndex] = useState(1); // 默认序号为 1
|
||||||
|
|
||||||
|
// 定义切换模型序号的函数
|
||||||
|
const prevModelIndex = () => {
|
||||||
|
// 当前序号减 1，如果小于 1，则变为 5
|
||||||
|
setModelIndex((currentModelIndex) => (currentModelIndex - 1 + 5) % 5);
|
||||||
|
};
|
||||||
|
|
||||||
|
const nextModelIndex = () => {
|
||||||
|
// 当前序号加 1，如果大于 5，则变为 1
|
||||||
|
setModelIndex((currentModelIndex) => (currentModelIndex + 1) % 5);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="block_16 flex-col fineWin">
|
||||||
|
<div className="fineWin-footer"/>
|
||||||
|
<MybabylonJS_1 modelPath={`line${modelIndex+1}`} />
|
||||||
|
{/* 添加按钮来切换组件 */}
|
||||||
|
<button className="centerButton_1" onClick={prevModelIndex}>上一个组件</button>
|
||||||
|
<button className="centerButton_2" onClick={nextModelIndex}>下一个组件</button>
|
||||||
|
<h5 className="centerButton_2" >{modelIndex}</h5>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CenterUp;
|
||||||
4
src/page/TestPage/index.css
Normal file
4
src/page/TestPage/index.css
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
.main-box {
|
||||||
|
font-size: 50px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
38
src/page/TestPage/index.tsx
Normal file
38
src/page/TestPage/index.tsx
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import "./index.css"
|
||||||
|
import MainE from "../MainE/MainE";
|
||||||
|
import {useParams,useNavigate} from "react-router-dom";
|
||||||
|
import {useEffect} from 'react';
|
||||||
|
function TestPage() {
|
||||||
|
const {LineID} = useParams()
|
||||||
|
const navigate = useNavigate();
|
||||||
|
console.log("TestPage被加载了")
|
||||||
|
useEffect(() => {
|
||||||
|
const handleKeyDown = (event:any) => {
|
||||||
|
if (event.key === 'ArrowUp') {
|
||||||
|
console.log('TestPage向上键被按下');
|
||||||
|
// 执行向上键的逻辑
|
||||||
|
} else if (event.key === 'ArrowDown') {
|
||||||
|
console.log('TestPage向下键被按下');
|
||||||
|
// 执行向下键的逻辑
|
||||||
|
navigate('/LD',{ state: { LineID: LineID} });
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('keydown', handleKeyDown);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('keydown', handleKeyDown);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="main-box">TestPage Line{LineID}</div>
|
||||||
|
<div className="main-box" style={{display:'none'}}>3434</div>
|
||||||
|
<MainE/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TestPage;
|
||||||
Loading…
Reference in New Issue
Block a user