mt-fe-group/xuchang-new
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

zhp #4

Merged
juzi merged 2 commits from zhp into features/warning 2024-08-30 19:10:44 +08:00
Conversation 0 Commits 2 Files Changed 104 +4010 -20071
104 changed files with 4010 additions and 20071 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f702e950ac - Show all commits

20088
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -40,6 +40,7 @@
"jest-resolve": "^27.4.2", "jest-resolve": "^27.4.2",
"jest-watch-typeahead": "^1.0.0", "jest-watch-typeahead": "^1.0.0",
"mini-css-extract-plugin": "^2.4.5", "mini-css-extract-plugin": "^2.4.5",
"moment": "^2.30.1",
"postcss": "^8.4.4", "postcss": "^8.4.4",
"postcss-flexbugs-fixes": "^5.0.2", "postcss-flexbugs-fixes": "^5.0.2",
"postcss-loader": "^6.2.1", "postcss-loader": "^6.2.1",

29
src/assets/CenterChart1icon1.svg Normal file
View File

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>泡界线</title>
<defs>
<filter x="-25.0%" y="-21.9%" width="150.0%" height="150.0%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.976470588 0 0 0 0 0.470588235 0 0 0 0 0.207843137 0 0 0 0.54411604 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FDB764" offset="0%"></stop>
<stop stop-color="#F43D0A" offset="100%"></stop>
</linearGradient>
</defs>
<g id="窑炉预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="预测" transform="translate(-790.000000, -134.000000)" fill-rule="nonzero">
<g id="编组-32" transform="translate(763.000000, 122.000000)">
<g id="泡界线" filter="url(#filter-1)" transform="translate(32.000000, 16.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
<path d="M13.3807264,21 C13.3807264,20.2857143 13.2366352,19.6071429 12.9484529,18.9642857 C12.6602706,18.3214286 12.271851,17.7678571 11.783194,17.3035714 C11.2945371,16.8392857 10.7181724,16.4702381 10.0541002,16.1964286 C9.39002788,15.922619 8.68210177,15.7857143 7.93032183,15.7857143 C7.1785419,15.7857143 6.46435096,15.922619 5.78774901,16.1964286 C5.11114707,16.4702381 4.52851762,16.8392857 4.03986066,17.3035714 C3.5512037,17.7678571 3.16278407,18.3214286 2.87460176,18.9642857 C2.58641945,19.6071429 2.44232829,20.2857143 2.44232829,21 C2.44232829,21.7142857 2.58641945,22.3869048 2.87460176,23.0178571 C3.16278407,23.6488095 3.5512037,24.1964286 4.03986066,24.6607143 C4.52851762,25.125 5.11114707,25.4940476 5.78774901,25.7678571 C6.46435096,26.0416667 7.1785419,26.1785714 7.93032183,26.1785714 C8.68210177,26.1785714 9.39002788,26.0416667 10.0541002,25.7678571 C10.7181724,25.4940476 11.2945371,25.125 11.783194,24.6607143 C12.271851,24.1964286 12.6602706,23.6488095 12.9484529,23.0178571 C13.2366352,22.3869048 13.3807264,21.7142857 13.3807264,21 Z M25.6890346,26.9815668 C25.6890346,26.4408602 25.5790969,25.9247312 25.3592214,25.4331797 C25.139346,24.9416283 24.8354006,24.5176651 24.4473851,24.1612903 C24.0593697,23.8049155 23.606685,23.5222734 23.089331,23.3133641 C22.5719771,23.1044547 22.0287555,23 21.4596661,23 C20.8647091,23 20.3150206,23.1044547 19.8106005,23.3133641 C19.3061804,23.5222734 18.8664295,23.8049155 18.4913479,24.1612903 C18.1162663,24.5176651 17.8187878,24.9416283 17.5989124,25.4331797 C17.379037,25.9247312 17.2690993,26.4408602 17.2690993,26.9815668 C17.2690993,27.546851 17.379037,28.0691244 17.5989124,28.5483871 C17.8187878,29.0276498 18.1162663,29.4516129 18.4913479,29.8202765 C18.8664295,30.1889401 19.3061804,30.4777266 19.8106005,30.6866359 C20.3150206,30.8955453 20.8647091,31 21.4596661,31 C22.0287555,31 22.5719771,30.8955453 23.089331,30.6866359 C23.606685,30.4777266 24.0593697,30.1889401 24.4473851,29.8202765 C24.8354006,29.4516129 25.139346,29.0276498 25.3592214,28.5483871 C25.5790969,28.0691244 25.6890346,27.546851 25.6890346,26.9815668 Z M17.696147,17 C16.4405427,17 15.2705477,16.7763158 14.1861621,16.3289474 C13.1017765,15.8815789 12.152939,15.2715311 11.3396498,14.4988038 C10.5263606,13.7260766 9.88429021,12.8245614 9.41343857,11.7942584 C8.94258692,10.7639553 8.7071611,9.66586922 8.7071611,8.5 C8.7071611,7.33413078 8.94258692,6.22926635 9.41343857,5.1854067 C9.88429021,4.14154705 10.5263606,3.2400319 11.3396498,2.48086124 C12.152939,1.72169059 13.1017765,1.11842105 14.1861621,0.671052632 C15.2705477,0.223684211 16.4405427,0 17.696147,0 C18.923215,0 20.0789417,0.223684211 21.1633273,0.671052632 C22.2477129,1.11842105 23.1965503,1.72169059 24.0098396,2.48086124 C24.8231288,3.2400319 25.4651992,4.14154705 25.9360508,5.1854067 C26.4069025,6.22926635 26.6423283,7.33413078 26.6423283,8.5 C26.6423283,9.66586922 26.4069025,10.7639553 25.9360508,11.7942584 C25.4651992,12.8245614 24.8231288,13.7260766 24.0098396,14.4988038 C23.1965503,15.2715311 22.2477129,15.8815789 21.1633273,16.3289474 C20.0789417,16.7763158 18.923215,17 17.696147,17 Z M14.1533891,4.14285714 C13.5715236,4.14285714 13.0752266,4.33797909 12.6644981,4.728223 C12.2537695,5.1184669 12.0484053,5.59001161 12.0484053,6.14285714 C12.0484053,6.69570267 12.2537695,7.16724739 12.6644981,7.55749129 C13.0752266,7.94773519 13.5715236,8.14285714 14.1533891,8.14285714 C14.7352545,8.14285714 15.2315515,7.94773519 15.6422801,7.55749129 C16.0530086,7.16724739 16.2583729,6.69570267 16.2583729,6.14285714 C16.2583729,5.59001161 16.0530086,5.1184669 15.6422801,4.728223 C15.2315515,4.33797909 14.7352545,4.14285714 14.1533891,4.14285714 Z" id="形状" fill="url(#linearGradient-2)"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

36
src/assets/CenterChart1icon2.svg Normal file
View File

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>碹顶</title>
<defs>
<filter x="-25.0%" y="-21.9%" width="150.0%" height="150.0%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.976470588 0 0 0 0 0.470588235 0 0 0 0 0.207843137 0 0 0 0.54411604 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FDB764" offset="0%"></stop>
<stop stop-color="#F43D0A" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
<stop stop-color="#FDB764" offset="0%"></stop>
<stop stop-color="#F43D0A" offset="100%"></stop>
</linearGradient>
</defs>
<g id="窑炉预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="预测" transform="translate(-1036.201540, -134.000000)" fill-rule="nonzero">
<g id="编组-33" transform="translate(1009.000000, 122.000000)">
<g id="碹顶" filter="url(#filter-1)" transform="translate(32.201540, 16.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
<g id="编组" transform="translate(1.602174, 1.600000)">
<path d="M26.7803321,0.00434714257 L14.3978264,0.00434714257 C14.0276789,0.00434714257 13.7276151,0.304410971 13.7276151,0.674558462 C13.7276151,1.04470595 14.0276789,1.34476978 14.3978264,1.34476978 L26.7803321,1.34476978 C27.1504012,1.34476978 27.4503559,1.6447245 27.450356,2.01516858 L27.450356,26.7801799 C27.450356,27.150249 27.1504012,27.4502038 26.7803321,27.4502038 L2.01532077,27.4502038 C1.64525164,27.4502038 1.34529693,27.150249 1.3452969,26.7801799 L1.3452969,2.01966791 C1.3452969,1.98704784 1.34979621,1.95405281 1.35429555,1.92593205 L1.34492198,1.92593205 L1.34492198,0.121329488 C0.539761675,0.405340909 0.000936313498,1.16588532 0,2.01966791 L0,26.7846792 C0.00165189001,27.8970252 0.902974797,28.7983481 2.01532077,28.8 L26.7803321,28.8 C27.8926781,28.7983481 28.794001,27.8970252 28.7956529,26.7846792 L28.7956529,2.01966791 C28.794001,0.907321939 27.8926781,0.00599903259 26.7803321,0.00434714257 Z" id="路径" fill="url(#linearGradient-2)"></path>
<path d="M3.36475692,0 L11.5177045,0 C11.8929336,4.20938436e-17 12.1971168,0.304183249 12.1971168,0.679412302 C12.1971168,1.05464136 11.8929336,1.3588246 11.5177045,1.3588246 L3.36475692,1.3588246 C2.98952786,1.3588246 2.68534461,1.05464136 2.68534461,0.679412302 C2.68534461,0.304183249 2.98952786,4.59523059e-17 3.36475692,0 Z M24.7646364,26.1088159 L4.03026656,26.1088159 C3.28975336,26.1088159 2.68534461,25.5089065 2.68534461,24.763894 L2.68534461,3.59659181 C3.28975336,3.31988357 4.00664513,3.10916539 4.79890053,3.10916539 C7.19853826,3.10916539 7.19853826,5.03075029 9.59817599,5.03075029 C11.9978137,5.03075029 11.9978137,3.10916539 14.3974515,3.10916539 C16.7970892,3.10916539 16.7970892,5.03075029 19.196727,5.03075029 C21.5963647,5.03075029 21.5963647,3.10916539 23.9960024,3.10916539 C24.7833836,3.10916539 25.5006503,3.31538426 26.1099333,3.59659181 L26.1099333,24.763894 C26.1080777,25.5060501 25.5067931,26.1071671 24.7646364,26.1088159 Z M8.97788835,18.5660828 L13.265104,14.2788672 L13.265104,14.2788672 L13.265104,22.5359782 C13.265104,23.16146 13.7721572,23.6685132 14.397639,23.6685132 C15.0231207,23.6685132 15.5301739,23.16146 15.5301739,22.5359782 L15.5301739,14.2788672 L15.5301739,14.2788672 L19.8173896,18.5660828 C20.1948661,18.9435594 20.8068766,18.9435594 21.1843531,18.5660828 C21.5618297,18.1886063 21.5618297,17.5765958 21.1843531,17.1991193 L14.6320676,10.6468337 L14.6320676,10.6468337 L14.1632103,10.6468337 L7.61092477,17.1991193 C7.2334482,17.5765958 7.2334482,18.1886063 7.61092477,18.5660828 C7.98840134,18.9435594 8.60041178,18.9435594 8.97788835,18.5660828 Z M21.1928485,7.24922894 L7.60242938,7.24922894 C6.97694761,7.24922894 6.46989445,7.7562821 6.46989445,8.38176387 C6.46989445,9.00724564 6.97694761,9.5142988 7.60242938,9.5142988 L21.1928485,9.5142988 C21.8183303,9.5142988 22.3253835,9.00724564 22.3253835,8.38176387 C22.3253835,7.7562821 21.8183303,7.24922894 21.1928485,7.24922894 Z" id="形状" fill="url(#linearGradient-3)"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

18
src/assets/CenterChart1icon3.svg Normal file
View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>液位</title>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#FDB764" offset="0%"></stop>
<stop stop-color="#F43D0A" offset="100%"></stop>
</linearGradient>
</defs>
<g id="窑炉预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="预测" transform="translate(-799.000000, -252.000000)">
<g id="液位" transform="translate(799.000000, 252.000000)">
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect>
<path d="M26.3958148,25.0213482 L26.3958148,22.0000163 L22.4895185,22.0000163 L22.4895185,19.3333243 L26.3958148,19.3333243 L26.3958148,15.3333568 L22.4895185,15.3333568 L22.4895185,12.6666703 L26.3958148,12.6666703 L26.3958148,8.66669737 L22.4895185,8.66669737 L22.4895185,6.00001084 L26.3958148,6.00001084 L26.3958148,3.3333243 L29,3.3333243 L29,26.7639693 C29.4283704,27.1587024 29.7682222,27.5279873 30,27.81338 L28,29.5200093 C27.6430412,29.1042014 27.2518491,28.7205726 26.8307407,28.3733565 C26.0234444,27.7133314 25.25,27.3333514 24.6601481,27.3333514 C24.2564815,27.3333514 24.0754815,27.466699 23.4895556,28.186685 C22.4478889,29.4666854 21.7252593,30 20.319,30 C18.9127407,30 18.1914074,29.4666854 17.1484444,28.186685 C16.5625185,27.466699 16.3814815,27.3333514 15.9791481,27.3333514 C15.5754815,27.3333514 15.3945185,27.466699 14.8098889,28.186685 C13.7682222,29.4666854 13.0442593,30 11.6392963,30 C10.233037,30 9.51040741,29.4666854 8.46874074,28.186685 C7.88281481,27.466699 7.70048148,27.3333514 7.29814815,27.3333514 C6.66041448,27.3384964 6.04093705,27.5519777 5.52992593,27.9427075 C5.20962963,28.1773552 4.99607407,28.4040006 4.91274074,28.5186887 L4.77211111,28.681353 C4.40751852,29.0400186 4.09766667,29.3680022 3.91666667,29.569351 L2,27.7640384 C2.2924622,27.4428839 2.59290632,27.1294497 2.90103704,26.824044 C3.138,26.521357 3.50781481,26.1453593 4.013,25.7759986 C4.95048148,25.0866946 6.05337037,24.6666649 7.29814815,24.6666649 C8.70440741,24.6666649 9.42703704,25.2000173 10.4687407,26.4800178 C11.0546667,27.2000038 11.236963,27.3333514 11.6392963,27.3333514 C12.0416296,27.3333514 12.2226296,27.2000038 12.8085556,26.4800178 C13.8502593,25.2000173 14.5728889,24.6667028 15.9791481,24.6667028 C17.3854074,24.6667028 18.108037,25.2000173 19.1497037,26.4800178 C19.7356296,27.2000038 19.917963,27.3333514 20.318963,27.3333514 C20.7226667,27.3333514 20.9036296,27.2000038 21.4895556,26.4800178 C22.5312593,25.2000173 23.2538889,24.6667028 24.6601481,24.6667028 C25.2460741,24.6667028 25.8254815,24.7920101 26.3958148,25.0213482 Z M5.53165581,13.8320585 C5.53165581,9.35334649 11.5772114,2 12.0420262,2 C12.506841,2 18.5525447,9.35330856 18.5525447,13.8319827 C18.5525447,17.6026933 15.622841,20.666692 12.0421003,20.666692 C8.46132247,20.666692 5.53165581,17.6027312 5.53165581,13.8320585 Z" fill="url(#linearGradient-1)" fill-rule="nonzero" transform="translate(16.000000, 16.000000) scale(-1, 1) translate(-16.000000, -16.000000) "></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

36
src/assets/CenterChart1icon4.svg Normal file
View File

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>池底</title>
<defs>
<filter x="-25.0%" y="-21.9%" width="150.0%" height="150.0%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.976470588 0 0 0 0 0.470588235 0 0 0 0 0.207843137 0 0 0 0.54411604 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FDB764" offset="0%"></stop>
<stop stop-color="#F43D0A" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
<stop stop-color="#FDB764" offset="0%"></stop>
<stop stop-color="#F43D0A" offset="100%"></stop>
</linearGradient>
</defs>
<g id="窑炉预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="预测" transform="translate(-1036.000000, -247.000000)" fill-rule="nonzero">
<g id="编组-33备份" transform="translate(1009.000000, 236.000000)">
<g id="池底" filter="url(#filter-1)" transform="translate(32.000000, 15.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
<g id="编组" transform="translate(1.602174, 1.600000)">
<path d="M26.7803321,0.00434714257 L14.3978264,0.00434714257 C14.0276789,0.00434714257 13.7276151,0.304410971 13.7276151,0.674558462 C13.7276151,1.04470595 14.0276789,1.34476978 14.3978264,1.34476978 L26.7803321,1.34476978 C27.1504012,1.34476978 27.4503559,1.6447245 27.450356,2.01516858 L27.450356,26.7801799 C27.450356,27.150249 27.1504012,27.4502038 26.7803321,27.4502038 L2.01532077,27.4502038 C1.64525164,27.4502038 1.34529693,27.150249 1.3452969,26.7801799 L1.3452969,2.01966791 C1.3452969,1.98704784 1.34979621,1.95405281 1.35429555,1.92593205 L1.34492198,1.92593205 L1.34492198,0.121329488 C0.539761675,0.405340909 0.000936313498,1.16588532 0,2.01966791 L0,26.7846792 C0.00165189001,27.8970252 0.902974797,28.7983481 2.01532077,28.8 L26.7803321,28.8 C27.8926781,28.7983481 28.794001,27.8970252 28.7956529,26.7846792 L28.7956529,2.01966791 C28.794001,0.907321939 27.8926781,0.00599903259 26.7803321,0.00434714257 Z" id="路径" fill="url(#linearGradient-2)"></path>
<path d="M3.36475692,0 L11.5177045,0 C11.8929336,4.20938436e-17 12.1971168,0.304183249 12.1971168,0.679412302 C12.1971168,1.05464136 11.8929336,1.3588246 11.5177045,1.3588246 L3.36475692,1.3588246 C2.98952786,1.3588246 2.68534461,1.05464136 2.68534461,0.679412302 C2.68534461,0.304183249 2.98952786,4.59523059e-17 3.36475692,0 Z M24.7646364,26.1088159 L4.03026656,26.1088159 C3.28975336,26.1088159 2.68534461,25.5089065 2.68534461,24.763894 L2.68534461,3.59659181 C3.28975336,3.31988357 4.00664513,3.10916539 4.79890053,3.10916539 C7.19853826,3.10916539 7.19853826,5.03075029 9.59817599,5.03075029 C11.9978137,5.03075029 11.9978137,3.10916539 14.3974515,3.10916539 C16.7970892,3.10916539 16.7970892,5.03075029 19.196727,5.03075029 C21.5963647,5.03075029 21.5963647,3.10916539 23.9960024,3.10916539 C24.7833836,3.10916539 25.5006503,3.31538426 26.1099333,3.59659181 L26.1099333,24.763894 C26.1080777,25.5060501 25.5067931,26.1071671 24.7646364,26.1088159 Z M19.8173896,12.3516593 L15.5301739,16.638875 L15.5301739,16.638875 L15.5301739,8.38176387 C15.5301739,7.7562821 15.0231207,7.24922894 14.397639,7.24922894 C13.7721572,7.24922894 13.265104,7.7562821 13.265104,8.38176387 L13.265104,16.638875 L13.265104,16.638875 L8.97788835,12.3516593 C8.60041178,11.9741827 7.98840134,11.9741827 7.61092477,12.3516593 C7.2334482,12.7291358 7.2334482,13.3411463 7.61092477,13.7186229 L14.1632103,20.2709084 L14.1632103,20.2709084 L14.6320676,20.2709084 L21.1843531,13.7186229 C21.5618297,13.3411463 21.5618297,12.7291358 21.1843531,12.3516593 C20.8068766,11.9741827 20.1948661,11.9741827 19.8173896,12.3516593 Z M7.60242938,23.6685132 L21.1928485,23.6685132 C21.8183303,23.6685132 22.3253835,23.16146 22.3253835,22.5359782 C22.3253835,21.9104965 21.8183303,21.4034433 21.1928485,21.4034433 L7.60242938,21.4034433 C6.97694761,21.4034433 6.46989445,21.9104965 6.46989445,22.5359782 C6.46989445,23.16146 6.97694761,23.6685132 7.60242938,23.6685132 Z" id="形状" fill="url(#linearGradient-3)"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
src/assets/Icon/forecast.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1021 B

BIN
src/assets/Icon/yieldRate.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 516 B

BIN
src/assets/dayNight.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

BIN
src/assets/dayNightChange.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
src/assets/ditu.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 MiB

After

Width:  |  Height:  |  Size: 3.6 MiB

BIN
src/assets/forecastBack.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
src/assets/forecastChartBack.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/assets/large.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
src/assets/lefTopBack.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/assets/leftBottomBack.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 113 KiB

BIN
src/assets/leftMiddleBack.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
src/assets/modelButton.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
src/assets/paramsData.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
src/assets/seasonActive.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/seasonChange.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
src/assets/toFourBack.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 MiB

18
src/components/Common/BottomItemBackgroundForecast/index.jsx Normal file
View File

@ -0,0 +1,18 @@
import cls from './index.module.css';
import Container from '../../Container';
function BottomBarItem(props) {
return (
<Container
icon={props.icon}
title={props.title}
desc={props.desc}
className={`${cls.bottomBarItem} ${props.className}`}
style={props.style}
>
{props.children}
</Container>
);
}
export default BottomBarItem;

5
src/components/Common/BottomItemBackgroundForecast/index.module.css Normal file
View File

@ -0,0 +1,5 @@
.bottomBarItem {
background: url(../../../assets/forecastChartBack.png) no-repeat;
background-size: 100% 100%;
width: 506px;
}

18
src/components/Common/BottomItemBackgroundForecastBottom/index.jsx Normal file
View File

@ -0,0 +1,18 @@
import cls from './index.module.css';
import Container from '../../Container';
function BottomBarItem(props) {
return (
<Container
icon={props.icon}
title={props.title}
desc={props.desc}
className={`${cls.bottomBarItem} ${props.className}`}
style={props.style}
>
{props.children}
</Container>
);
}
export default BottomBarItem;

5
src/components/Common/BottomItemBackgroundForecastBottom/index.module.css Normal file
View File

@ -0,0 +1,5 @@
.bottomBarItem {
background: url(../../../assets/leftBottomBack.png) no-repeat;
background-size: 100% 100%;
width: 506px;
}

18
src/components/Common/BottomItemBackgroundForecastMiddle/index.jsx Normal file
View File

@ -0,0 +1,18 @@
import cls from './index.module.css';
import Container from '../../Container';
function BottomBarItem(props) {
return (
<Container
icon={props.icon}
title={props.title}
desc={props.desc}
className={`${cls.bottomBarItem} ${props.className}`}
style={props.style}
>
{props.children}
</Container>
);
}
export default BottomBarItem;

5
src/components/Common/BottomItemBackgroundForecastMiddle/index.module.css Normal file
View File

@ -0,0 +1,5 @@
.bottomBarItem {
background: url(../../../assets/leftMiddleBack.png) no-repeat;
background-size: 100% 100%;
width: 506px;
}

18
src/components/Common/BottomItemBackgroundForecastTop/index.jsx Normal file
View File

@ -0,0 +1,18 @@
import cls from './index.module.css';
import Container from '../../Container';
function BottomBarItem(props) {
return (
<Container
icon={props.icon}
title={props.title}
desc={props.desc}
className={`${cls.bottomBarItem} ${props.className}`}
style={props.style}
>
{props.children}
</Container>
);
}
export default BottomBarItem;

6
src/components/Common/BottomItemBackgroundForecastTop/index.module.css Normal file
View File

@ -0,0 +1,6 @@
.bottomBarItem {
background: url(../../../assets/lefTopBack.png) no-repeat;
background-size: 100% 100%;
width: 506px;
height: 100%;
}

143
src/components/Common/ForecastTemperature/index.jsx Normal file
View File

@ -0,0 +1,143 @@
import cls from "./leftbox.module.scss";
import React, { useState, useContext, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import icon1 from "../../../assets/CenterChart1icon1.svg";
import icon2 from "../../../assets/CenterChart1icon2.svg";
import icon3 from "../../../assets/CenterChart1icon3.svg";
import icon4 from "../../../assets/CenterChart1icon4.svg";
// import icon4 from "../../../assets/CenterChart2icon4.svg";
import useTimeCounter from "../../../hooks/useTimeCounter";
const FireInfo = () => {
// const dispatch = useDispatch();
const KilnInfo = useSelector((state) => state.kiln);
// const time = KilnInfo.lastFireChangeTime || "0分0秒";
// const minsec = useTimeCounter(time);
// let [min, sec] = [0, 0];
// if (minsec) {
// min = minsec[0];
// sec = minsec[1];
// }
// useEffect(() => {
// const restTime = ctx?.runState?.lastFireChangeTime;
// if (restTime == null) return;
// let timer = null;
// if (/分/.test(restTime) && /秒/.test(restTime)) {
// let [min, sec] = restTime.replace(/分/, ":").replace(/秒/, "").split(":");
// timer = setInterval(() => {
// if (Number(sec) === 0 && Number(min) === 0) {
// clearInterval(timer);
// return;
// }
// if (Number(sec) === 0) {
// sec = 59;
// min--;
// } else {
// sec--;
// }
// setTime([min, sec]);
// }, 1000);
// } else if (/分/.test(restTime)) {
// let sec,
// min = restTime.replace(/分/, ":");
// sec = 0;
// timer = setInterval(() => {
// if (Number(sec) === 0 && Number(min) === 0) {
// clearInterval(timer);
// return;
// }
// if (Number(sec) === 0) {
// sec = 59;
// min--;
// } else {
// sec--;
// }
// setTime([min, sec]);
// }, 1000);
// } else if (/秒/.test(restTime)) {
// let min,
// sec = restTime.replace(/秒/, "");
// min = 0;
// timer = setInterval(() => {
// if (Number(sec) === 0 && Number(min) === 0) {
// clearInterval(timer);
// return;
// }
// if (Number(sec) === 0) {
// sec = 59;
// min--;
// } else {
// sec--;
// }
// setTime([min, sec]);
// }, 1000);
// }
// return () => {
// clearInterval(timer);
// };
// }, [ctx?.runState?.lastFireChangeTime]);
// useEffect(() => {
// setInterval(() => {
// dispatch({
// type: "fireInfo/setFireInfo",
// payload: {
// fireChangeTime: `${Math.ceil(Math.random() * 10)}:${Math.ceil(
// Math.random() * 10
// )}`,
// fireDirection: Math.random * 10 < 5 ? "东火" : "西火",
// lastFireChangeTime: `${Math.ceil(Math.random() * 60)}分${Math.ceil(
// Math.random() * 50
// )}秒`,
// },
// });
// }, 10000);
// }, []);
const data = [
{
icon: icon1,
label: "泡界线",
// value: ctx?.runState?.fireChangeTime || "00:00",
// value: KilnInfo.fireChangeTime || "00:00",
},
{
icon: icon2,
label: "磴顶加权温度",
// value: `${time[0]}分${time[1]}秒`,
value: KilnInfo.topTemp|| "℃",
},
{
icon: icon3,
label: "液位",
// value: ctx?.runState?.fireDirection || "东火",
value: KilnInfo.liquidLevel || "0",
},
{
icon: icon4,
label: "池底加权温度",
// value: ctx?.runState?.fireDirection || "东火",
value: KilnInfo.meltTemp || "℃",
},
];
return (
<div className={`${cls.leftbox}`}>
{data.map((item) => (
<div className={cls.box} key={item.label}>
<img src={item.icon} alt="Error" className="box__logo" />
<div className={cls.box__inner}>
<h2 className={cls.box__label}>{item.label}</h2>
<h2 className={cls.box__value}> {item.value}</h2>
</div>
</div>
))}
</div>
);
};
export default FireInfo;

38
src/components/Common/ForecastTemperature/leftbox.module.scss Normal file
View File

@ -0,0 +1,38 @@
.leftbox {
// height: 128px;
height: 230px;
display: flex;
width: 640px;
flex-wrap: wrap;
.box {
margin-right: 16px;
width: 300px;
height: 110px;
padding: 12px 8px;
background: url(../../../assets/CenterChart2ItemBg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
letter-spacing: 2px;
align-items: flex-start;
// flex-wrap: wrap;
user-select: none;
.box__inner {
padding-top: 12px;
.box__label {
color: #fffa;
font-size: 18px;
line-height: 1;
}
.box__value {
color: #fff;
font-weight: 400;
font-size: 34px;
line-height: 54px;
}
}
}
}

9
src/components/Common/KilnInfo/Kiln.jsx
View File

@ -1,3 +1,10 @@
/*
* @Author: zhp
* @Date: 2024-08-20 14:08:32
* @LastEditTime: 2024-08-30 09:50:51
* @LastEditors: zhp
* @Description:
*/
import cls from "./kiln.module.scss"; import cls from "./kiln.module.scss";
import Container from "../../Container"; import Container from "../../Container";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
@ -14,7 +21,7 @@ export default function Kiln() {
return ( return (
<Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}> <Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>
<div className={cls.leftBar__top__content}> <div className={cls.leftBar__top__content}>
{infos.map((item) => ( {infos.slice(0,infos.length-1).map((item) => (
<div key={item.label} className={cls.info__item}> <div key={item.label} className={cls.info__item}>
<span className={cls.label}>{item.label}</span> <span className={cls.label}>{item.label}</span>
<span className={cls.value}>{item.value}</span> <span className={cls.value}>{item.value}</span>

58
src/components/Common/TemperatureTop/forecastIndex.jsx Normal file
View File

@ -0,0 +1,58 @@
/*
* @Author: zhp
* @Date: 2024-08-27 09:22:58
* @LastEditTime: 2024-08-30 09:55:56
* @LastEditors: zhp
* @Description:
*/
import BlueRect from "../forecastRect";
import { useSelector } from "react-redux";
import { motion, AnimatePresence } from "framer-motion";
const blueTe = [
"TE271",
"TE272",
"TE273",
"TE274",
"TE275",
"TE276",
"TE277",
"TE278",
"TE279",
"TE280",
];
function TemperatureTop(props) {
const tempTop = useSelector((state) => state.temperature.top);
console.log('tempTop',tempTop);
return (
<motion.div
className="temperature-top"
style={{
position: "absolute",
top: "0",
left: "0",
width: "100%",
height: "80vh",
zIndex: "-1",
...props.style,
}}
animate={{
opacity: [0, 0, 0, 0.6, 1],
transition: { duration: 0.3, delay: 1.5 },
}}
>
{Object.keys(tempTop).map((d) => (
<BlueRect
title={d}
key={d + Math.random()}
value={tempTop[d]}
blue={blueTe.includes(d)}
/>
))}
</motion.div>
);
}
export default TemperatureTop;

27
src/components/Common/crownTe/Kiln.jsx Normal file
View File

@ -0,0 +1,27 @@
import cls from "./kiln.module.scss";
import Container from "../../Container";
import { useSelector } from "react-redux";
import { stateNameMap } from "../../../store/features/kilnSlice";
export default function Kiln() {
const kilnInfo = useSelector((state) => state.kiln);
const infos = Object.keys(kilnInfo).map((key) => ({
label: stateNameMap[key],
value: kilnInfo[key],
}));
return (
<Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>
<div className={cls.leftBar__top__content}>
{infos.map((item) => (
<div key={item.label} className={cls.info__item}>
<span className={cls.label}>{item.label}</span>
<span className={cls.value}>{item.value}</span>
{/* {item.label}: {item.value} */}
</div>
))}
</div>
</Container>
);
}

42
src/components/Common/crownTe/kiln.module.scss Normal file
View File

@ -0,0 +1,42 @@
.leftBar__top {
width: 625px;
// height: 305px;
height: 300px;
background: url('../../../assets/ItemBg.png') no-repeat;
background-size: 100% 100%;
.leftBar__top__content {
flex: 1;
height: 1px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding-top: 18px;
.info__item {
border-radius: 2px;
color: hsl(0, 0%, 100%, 0.9);
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
// width: 288px;
height: 43px;
font-size: 20px;
letter-spacing: 1.43px;
line-height: 40px;
text-align: center;
user-select: none;
display: flex;
align-items: center;
gap: 12px;
.label {
flex: 6;
text-align: right;
}
.value {
flex: 4;
text-align: left;
}
}
}
}

18
src/components/Common/forecastLargeBackground/index.jsx Normal file
View File

@ -0,0 +1,18 @@
import cls from './index.module.css';
import Container from '../../Container';
function BottomBarItem(props) {
return (
<Container
icon={props.icon}
title={props.title}
desc={props.desc}
className={`${cls.bottomBarItem} ${props.className}`}
style={props.style}
>
{props.children}
</Container>
);
}
export default BottomBarItem;

5
src/components/Common/forecastLargeBackground/index.module.css Normal file
View File

@ -0,0 +1,5 @@
.bottomBarItem {
background: url(../../../assets/large.png) no-repeat;
background-size: 100% 100%;
width: 600px;
}

41
src/components/Common/forecastRect/index.jsx Normal file
View File

@ -0,0 +1,41 @@
/*
* @Author: zhp
* @Date: 2024-08-29 09:46:11
* @LastEditTime: 2024-08-30 14:01:37
* @LastEditors: zhp
* @Description:
*/
import cls from "./index.module.css";
function BlueRect(props) {
const title = props.title || "DEFAULT";
const value = props.value || "0℃";
return (
<div
className={`${cls.blueRect} ${cls[title]}`}
style={{
background: props.blue ? "#0a4268ee" : "#0a426860",
height:"68px" ,
}}
>
<span
className="title"
style={{
fontSize: "18px",
lineHeight: "24px",
color: props.blue ? "#40afb8" : "#fff",
fontWeight: 600,
userSelect: "none",
}}
>
{title}
</span>
<span className="value" style={{ userSelect: "none", fontSize: "22px" }}>
{value}
</span>
</div>
);
}
export default BlueRect;

545
src/components/Common/forecastRect/index.module.css Normal file
View File

@ -0,0 +1,545 @@
.blueRect {
display: inline-block;
width: 106px;
height: 68px;
position: absolute;
top: 0;
left: 0;
padding: 6px 0;
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
background: #0a426820;
border-radius: 4px;
}
.blueRect::before {
content: "";
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(
to right,
transparent 0%,
transparent 50%,
#24aebb 100%
);
border-radius: 3px;
}
.blueRect::after {
content: "";
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(
to right,
#24aebb 0%,
transparent 50%,
transparent 100%
);
border-radius: 3px;
}
/** left **/
.TE271 {
top: 160px;
left: 70px;
}
.TE272 {
top: 254px; /* +94px */
left: 70px;
}
.TE273 {
top: 348px; /* +94px */
left: 70px;
}
.TE274 {
top: 442px;
left: 70px;
}
.TE279 {
top: 536px;
left: 70px;
}
.TE275 {
top: 160px;
left: 206px;
}
.TE276 {
top: 254px;
left: 206px; /* +136px */
}
.TE277 {
top: 348px; /* +94px */
left: 206px; /* +136px */
}
.TE278 {
top: 442px; /* +94px */
left: 206px; /* +136px */
}
.TE280 {
top: 536px; /* +94px */
left: 206px; /* +136px */
}
/** center top **/
.TE227 {
top: 178px;
left: 470px;
}
.TE229 {
top: 178px;
left: 590px; /* +120px */
}
.TE231 {
top: 178px;
left: 700px;
}
.TE233 {
top: 178px;
left: 800px;
}
.TE235 {
top: 178px;
left: 900px;
}
.TE237 {
top: 178px;
left: 1000px;
}
.TE239 {
top: 178px;
left: 1100px;
}
.TE241 {
top: 178px;
left: 1200px;
}
/** center bottom **/
.TE228 {
top: 580px;
left: 460px;
}
.TE230 {
top: 580px;
left: 570px;
}
.TE232 {
top: 580px;
left: 680px;
}
.TE234 {
top: 580px;
left: 790px;
}
.TE236 {
top: 580px;
left: 900px;
}
.TE238 {
top: 580px;
left: 1000px;
}
.TE240 {
top: 580px;
left: 1100px;
}
.TE242 {
top: 580px;
left: 1200px;
}
/** center middle **/
.TE201 {
top: 380px;
/* transform: rotate(-1deg); */
left: 360px;
}
.TE202 {
top: 380px;
/* transform: rotate(-1deg); */
left: 480px;
}
.TE203 {
top: 380px;
/* transform: rotate(-1deg); */
left: 600px;
}
.TE204 {
top: 380px;
/* transform: rotate(-1deg); */
left: 720px;
}
.TE205 {
top: 380px;
/* transform: rotate(-1deg); */
left: 840px;
}
.TE206 {
top: 380px;
/* transform: rotate(-1deg); */
left: 960px;
}
.TE207 {
top: 270px;
/* transform: rotate(-1deg); */
left: 1080px;
}
.TE208 {
top: 380px;
/* transform: rotate(-1deg); */
left: 1080px;
}
.TE209 {
top: 470px;
/* transform: rotate(-1deg); */
left: 1080px;
}
.TE210 {
top: 380px;
/* transform: rotate(-1deg); */
left: 1200px;
}
.TE211 {
top: 380px;
/* transform: rotate(-1deg); */
left: 1320px;
}
.TE212 {
top: 380px;
/* transform: rotate(-1deg); */
left: 1440px;
}
.TE213 {
top: 380px;
/* transform: rotate(-1deg); */
left: 1560px;
}
/** right **/
.TE214 {
top: 128px;
left: 1720px;
}
.TE215 {
top: 245px;
left: 1740px;
}
.TE216 {
top: 380px;
left: 1740px;
}
.TE217 {
top: 500px;
left: 1760px;
}
.TE218 {
top: 600px;
left: 1780px;
}
.TE219 {
top: 128px;
left: 1840px;
}
.TE220 {
top: 245px;
left: 1860px;
}
.TE221 {
top: 380px;
left: 1860px;
}
.TE222 {
top: 500px;
left: 1880px;
}
.TE223 {
top: 600px;
left: 1900px;
}
.TE224 {
top: 245px;
left: 1980px;
}
.TE225 {
top: 380px;
left: 1980px;
}
.TE226 {
top: 500px;
left: 2000px;
}
/** 一层 --- 窑底 **/
.TE401 {
top: 420px;
left: 20px;
}
.TE402 {
top: 420px;
left: 140px;
}
.TE403 {
top: 420px;
left: 260px;
}
.PE401 {
top: 320px;
left: 20px;
}
.PE402 {
top: 320px;
left: 140px;
}
.PE403 {
top: 320px;
left: 260px;
}
/** center top **/
.TE333 {
top: 128px;
left: 660px;
}
.TE335 {
top: 128px;
left: 775px;
}
.TE337 {
top: 128px;
left: 880px;
}
.TE339 {
top: 128px;
left: 1000px;
}
.TE341 {
top: 128px;
left: 1110px;
}
.TE343 {
top: 128px;
left: 1225px;
}
.TE345 {
top: 128px;
left: 1335px;
}
.TE347 {
top: 128px;
left: 1440px;
}
/** center bottom **/
.TE334 {
top: 620px;
left: 610px;
}
.TE336 {
top: 620px;
left: 730px;
}
.TE338 {
top: 620px;
left: 860px;
}
.TE340 {
top: 620px;
left: 980px;
}
.TE342 {
top: 620px;
left: 1110px;
}
.TE344 {
top: 620px;
left: 1235px;
}
.TE346 {
top: 620px;
left: 1360px;
}
.TE348 {
top: 620px;
left: 1480px;
}
/** center middle **/
.TE301 {
top: 340px;
transform: scaleY(0.8);
left: 450px;
}
.TE302 {
top: 400px;
transform: scaleY(0.8);
left: 450px;
}
.TE303 {
top: 460px;
transform: scaleY(0.8);
left: 450px;
}
.TE304 {
top: 400px;
/* transform: scaleY(0.8) skewX(-2deg); */
transform: scaleY(0.8);
left: 580px;
}
.TE305 {
top: 340px;
/* transform: scaleY(0.8) skewX(-2deg); */
transform: scaleY(0.8);
left: 720px;
}
.TE306 {
top: 400px;
/* transform: scaleY(0.8) skewX(-2deg); */
/* transform: scaleY(0.8) rotate(-1deg); */
transform: scaleY(0.8);
left: 720px;
}
.TE307 {
top: 460px;
/* transform: scaleY(0.8) rotate(-1deg); */
transform: scaleY(0.8);
left: 720px;
}
.TE308 {
top: 400px;
transform: scaleY(0.8);
left: 860px;
}
.TE309 {
top: 400px;
transform: scaleY(0.8);
left: 1000px;
}
.TE310 {
top: 400px;
transform: scaleY(0.8);
left: 1140px;
}
.TE311 {
top: 340px;
transform: scaleY(0.8);
left: 1280px;
}
.TE312 {
top: 400px;
transform: scaleY(0.8);
left: 1280px;
}
.TE313 {
top: 460px;
transform: scaleY(0.8);
left: 1280px;
}
.TE314 {
top: 400px;
transform: scaleY(0.8);
left: 1420px;
}
.TE315 {
top: 400px;
transform: scaleY(0.8);
left: 1560px;
}
.TE316 {
top: 400px;
transform: scaleY(0.8);
left: 1700px;
}
.TE317 {
top: 340px;
transform: scaleY(0.8);
left: 1840px;
}
.TE318 {
top: 400px;
transform: scaleY(0.8);
left: 1840px;
}
.TE319 {
top: 460px;
transform: scaleY(0.8);
left: 1840px;
}
/** right **/
.TE327 {
top: 152px;
left: 2000px;
transform: scale(0.8) skewX(5deg);
}
.TE320 {
top: 252px;
left: 2020px;
transform: scale(0.8) skewX(7deg);
}
.TE321 {
top: 400px;
left: 2040px;
transform: scale(0.8) skewX(7deg);
}
.TE322 {
top: 532px;
left: 2060px;
transform: scale(0.8) skewX(7deg);
}
.TE330 {
top: 656px;
left: 2080px;
transform: scale(0.8) skewX(7deg);
}
.TE323 {
top: 152px;
left: 2100px;
transform: scale(0.8) skewX(7deg);
}
.TE328 {
top: 252px;
left: 2120px;
transform: scale(0.8) skewX(7deg);
}
.TE331 {
top: 400px;
left: 2140px;
transform: scale(0.8) skewX(7deg);
}
.TE329 {
top: 532px;
left: 2160px;
transform: scale(0.8) skewX(7deg);
}
.TE326 {
top: 656px;
left: 2180px;
transform: scale(0.8) skewX(7deg);
}
.TE324 {
top: 252px;
left: 2220px;
transform: scale(0.8) skewX(7deg);
}
.TE332 {
top: 400px;
left: 2260px;
transform: scale(0.8) skewX(7deg);
}
.TE325 {
top: 532px;
left: 2260px;
transform: scale(0.8) skewX(7deg);
}

25
src/components/Modules/KilnOptimize/Center/VideoContainer.jsx
View File

@ -3,6 +3,7 @@ import EnterToFloorOne from "./videoComponents/EnterToFloor1";
import EnterToFloorTwo from "./videoComponents/EnterToFloor2"; import EnterToFloorTwo from "./videoComponents/EnterToFloor2";
import FloorOneToTwo from "./videoComponents/Floor1To2"; import FloorOneToTwo from "./videoComponents/Floor1To2";
import FloorTwoToOne from "./videoComponents/Floor2To1"; import FloorTwoToOne from "./videoComponents/Floor2To1";
import FloorToFour from "./videoComponents/FloorToFour";
import { useRef, useEffect, useReducer } from "react"; import { useRef, useEffect, useReducer } from "react";
import { AnimatePresence } from "framer-motion"; import { AnimatePresence } from "framer-motion";
@ -47,6 +48,17 @@ const opacityReducer = (state, action) => {
enterVideo: 0, enterVideo: 0,
}; };
} }
case "to-4": {
return {
...initOpacity,
// FloorToFour: 1,
enterToFloorTwo: 0,
floorOneToTwo: 0,
enterVideo: 0,
floorToFour:1,
};
}
} }
}; };
@ -61,7 +73,7 @@ function VideoContainer(props) {
if (floor == 1) { if (floor == 1) {
if (lastFloor.current == 2 || lastFloor.current == 3) { if (lastFloor.current == 2 || lastFloor.current == 3) {
dispatch({ type: "floor-2-to-1" }); dispatch({ type: "floor-2-to-1" });
} else { } else if (lastFloor.current == 4) {
dispatch({ type: "enter-to-1" }); dispatch({ type: "enter-to-1" });
} }
} else if (floor == 2) { } else if (floor == 2) {
@ -69,17 +81,19 @@ function VideoContainer(props) {
dispatch({ type: "floor-1-to-2" }); dispatch({ type: "floor-1-to-2" });
} else if (lastFloor.current == 3) { } else if (lastFloor.current == 3) {
// 视频不变画面隐藏,通过判断floor的值隐藏3显示2 // 视频不变画面隐藏,通过判断floor的值隐藏3显示2
} else { } else if (lastFloor.current == 4) {
dispatch({ type: "enter-to-2" }); dispatch({ type: "floor-1-to-2" });
} }
} else if (floor == 3) { } else if (floor == 3) {
if (lastFloor.current == 1) { if (lastFloor.current == 1) {
dispatch({ type: "floor-1-to-2" }); dispatch({ type: "floor-1-to-2" });
} else if (lastFloor.current == 2) { } else if (lastFloor.current == 2) {
// 视频不变画面隐藏，通过判断floor的值隐藏2显示3 // 视频不变画面隐藏，通过判断floor的值隐藏2显示3
} else { } else if (lastFloor.current == 4) {
dispatch({ type: "enter-to-2" }); dispatch({ type: "floor-1-to-2" });
} }
} else if (floor == 4) {
dispatch({ type: "to-4" });
} }
lastFloor.current = floor; lastFloor.current = floor;
} }
@ -113,6 +127,7 @@ function VideoContainer(props) {
preFloor={preFloor} preFloor={preFloor}
/> />
<FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} /> <FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
<FloorToFour key="to-4" opacity={opacity.floorToFour} />
</AnimatePresence> </AnimatePresence>
); );
} }

49
src/components/Modules/KilnOptimize/Center/index.jsx
View File

@ -1,16 +1,30 @@
import { useState, useRef } from "react"; import { useState, useRef, useEffect } from "react";
import cls from "./index.module.css"; import cls from "./index.module.css";
import Chart2 from "../../../Common/TimeFireDir"; import Chart2 from "../../../Common/TimeFireDir";
import Chart1 from "../../../Common/ForecastTemperature";
import VideoContainer from "./VideoContainer"; import VideoContainer from "./VideoContainer";
function KilnCenter({ onFloorChange }) {
function KilnCenter() { const [floor, setFloor] = useState(1); // 初始值设置为 1
const [floor, setFloor] = useState(0);
const preFloor = useRef(); const preFloor = useRef();
useEffect(() => {
onFloorChange(floor);
}, [floor, onFloorChange]);
function onFloorUpdate(flr) { function onFloorUpdate(flr) {
preFloor.current = floor; preFloor.current = floor;
setFloor(flr); setFloor(flr);
onFloorChange(flr);
} }
const subMenuStyle = {
marginLeft: floor === 4? "400px" : "0",
};
const colorStyle = {
right: floor === 4? "0px" : "400px",
};
return ( return (
<div <div
className="bgKilnInner" className="bgKilnInner"
@ -23,12 +37,22 @@ function KilnCenter() {
}} }}
> >
{/* 时间火向数据 */} {/* 时间火向数据 */}
{floor === 4 && (
<div
className="fireAndTime"
style={{ position: "absolute", top: "-112px", height: "400px" }}
>
<Chart1 />
</div>
)}
{floor!== 4 && (
<div <div
className="fireAndTime" className="fireAndTime"
style={{ position: "absolute", top: "-112px", height: "212px" }} style={{ position: "absolute", top: "-112px", height: "212px" }}
> >
<Chart2 /> <Chart2 />
</div> </div>
)}
{/* menu */} {/* menu */}
<div <div
@ -36,7 +60,8 @@ function KilnCenter() {
style={{ style={{
display: "flex", display: "flex",
marginBottom: "24px", marginBottom: "24px",
justifyContent: "center", ...subMenuStyle,
justifyContent: "center"
}} }}
> >
<div <div
@ -49,7 +74,7 @@ function KilnCenter() {
</div> </div>
<div <div
className={ className={
"flr flr2 " + cls.menuItem + " " + (floor === 2 ? cls.active : "") "flr flr2 " + cls.menuItem + " " + (floor === 2? cls.active : "")
} }
onClick={() => onFloorUpdate(2)} onClick={() => onFloorUpdate(2)}
> >
@ -57,12 +82,20 @@ function KilnCenter() {
</div> </div>
<div <div
className={ className={
"flr flr2 " + cls.menuItem + " " + (floor === 3 ? cls.active : "") "flr flr2 " + cls.menuItem + " " + (floor === 3? cls.active : "")
} }
onClick={() => onFloorUpdate(3)} onClick={() => onFloorUpdate(3)}
> >
溶液速度 溶液速度
</div> </div>
<div
className={
"flr flr1 " + cls.menuItem + " " + (floor === 4? cls.active : "")
}
onClick={() => onFloorUpdate(4)}
>
窑炉预测
</div>
</div> </div>
{/* 颜色指示图 */} {/* 颜色指示图 */}
@ -70,7 +103,7 @@ function KilnCenter() {
style={{ style={{
position: "absolute", position: "absolute",
top: "30px", top: "30px",
right: "450px", ...colorStyle,
width: "300px", width: "300px",
height: "41px", height: "41px",
}} }}

2
src/components/Modules/KilnOptimize/Center/index.module.css
View File

@ -21,7 +21,7 @@
} }
.menuItem:not(:first-child) { .menuItem:not(:first-child) {
margin-left: 50px; margin-left:20px;
} }
.videoLayer2 { .videoLayer2 {

118
src/components/Modules/KilnOptimize/Center/videoComponents/FloorTo4.jsx Normal file
View File

@ -0,0 +1,118 @@
/*
* @Author: zhp
* @Date: 2024-08-27 08:38:07
* @LastEditTime: 2024-08-28 15:28:39
* @LastEditors: zhp
* @Description:
*/
import { motion, AnimatePresence } from "framer-motion";
import { useRef, useEffect, useMemo, useState } from "react";
import FeederStatus from "../../../../Common/Feeder";
import TemperatureBottom from "../../../../Common/TemperatureBottom";
import TemperatureTop from "../../../../Common/TemperatureTop/forecastIndex";
import { useSelector, useDispatch } from "react-redux";
import TopColorBlock from "../../components/forecastTopColorBlock";
import myImage from '../../../../../assets/toFourBack.png';
function FloorToFour(props) {
const fireInfo = useSelector((state) => state.fireInfo);
const fireDir = fireInfo?.fireDirection || null;
const [fireCanPlay, setFireCanPlay] = useState(false);
// const vd = useRef(null);
const show = props.opacity || 0;
// useEffect(() => {
// if (show) {
// vd.current.play();
// setTimeout(() => {
// // console.log("开启2-1的火播放");
// setFireCanPlay(true);
// }, 1800);
// }
// if (!show) setFireCanPlay(false);
// return () => {
// // console.log("关闭2-1的火播放");
// setFireCanPlay(false);
// };
// }, [show]);
return (
<AnimatePresence>
{show && (
<motion.div
className="video-wrapper"
style={{
position: "fixed",
top: "0px",
left: "0px",
width: "calc(100% - 50px)",
height: "calc(100% - 7px)",
zIndex: -998,
overflow: "clip",
}}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0, transition: { duration: 0.2, delay: 0.2 } }}
>
<div>
<img src={myImage} style={{ width: '1726px', height: '695px',position: "absolute",
top: "300px",
left: "950px",
zIndex: -9, }} alt="Example" />
</div>
{/* <video ref={vd} muted>
<source src="/video/2to1.webm" type="video/mp4" />
</video>
{fireCanPlay && fireDir == "东火" && (
// {fireCanPlay && (
<video
src="/video/fire_top.webm"
muted
autoPlay
loop
width={3800}
style={{
position: "absolute",
top: "10px",
left: "0px",
zIndex: 9,
}}
></video>
)}
{fireCanPlay && fireDir == "西火" && (
// {fireCanPlay && (
<video
src="/video/fire_down.webm"
muted
autoPlay
loop
width={3800}
style={{
position: "absolute",
top: "-12px",
left: "-10px",
zIndex: 9,
}}
></video>
)} */}
<TopColorBlock />
<TemperatureTop
style={{
top: "200px",
left: "652px",
width: "2380px",
zIndex: 10,
}}
/>
<FeederStatus style={{ left: "680px" }} />
</motion.div>
)}
</AnimatePresence>
);
}
export default FloorToFour;

125
src/components/Modules/KilnOptimize/Center/videoComponents/FloorToFour.jsx Normal file
View File

@ -0,0 +1,125 @@
/*
* @Author: zhp
* @Date: 2024-08-28 15:27:46
* @LastEditTime: 2024-08-29 09:46:32
* @LastEditors: zhp
* @Description:
*/
import { motion, AnimatePresence } from "framer-motion";
import { useRef, useEffect, useMemo, useState } from "react";
import FeederStatus from "../../../../Common/Feeder";
import TemperatureBottom from "../../../../Common/TemperatureBottom";
import TemperatureTop from "../../../../Common/TemperatureTop/forecastIndex";
import { useSelector, useDispatch } from "react-redux";
// import TopColorBlock from "../../components/TopColorBlock";
import TopColorBlock from "../../components/forecastTopColorBlock";
function FloorTwoToOne(props) {
const fireInfo = useSelector((state) => state.fireInfo);
const fireDir = fireInfo?.fireDirection || null;
const [fireCanPlay, setFireCanPlay] = useState(false);
const vd = useRef(null);
const show = props.opacity || 0;
useEffect(() => {
if (show) {
vd.current.play();
setTimeout(() => {
// console.log("开启2-1的火播放");
setFireCanPlay(true);
}, 1800);
}
if (!show) setFireCanPlay(false);
return () => {
// console.log("关闭2-1的火播放");
setFireCanPlay(false);
};
}, [show]);
return (
<AnimatePresence>
{show && (
<motion.div
className="video-wrapper"
style={{
position: "fixed",
top: "0px",
left: "0px",
width: "calc(100% - 500px)",
height: "calc(100% - 7px)",
zIndex: -998,
overflow: "clip",
}}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0, transition: { duration: 0.2, delay: 0.2 } }}
>
<video style={{
position: "fixed",
top: "10px",
left: "70px",
width: "calc(100% - 600px)",
height: "calc(100% - 7px)",
zIndex: -998,
overflow: "clip",
}} ref={vd} muted>
<source src="/video/2to1.webm" type="video/mp4" />
</video>
{fireCanPlay && fireDir == "东火" && (
// {fireCanPlay && (
<video
src="/video/fire_top.webm"
muted
autoPlay
loop
width={3800}
style={{
position: "absolute",
top: "10px",
width: "calc(100% - 500px)",
height: "calc(100% - 7px)",
left: "240px",
zIndex: 9,
}}
></video>
)}
{fireCanPlay && fireDir == "西火" && (
// {fireCanPlay && (
<video
src="/video/fire_down.webm"
muted
autoPlay
loop
width={3800}
style={{
position: "absolute",
top: "-12px",
left: "-100px",
width: "calc(100% - 500px)",
height: "calc(100% - 7px)",
left: "240px",
zIndex: 9,
}}
></video>
)}
<TopColorBlock />
<TemperatureTop
style={{
top: "200px",
left: "652px",
width: "2380px",
zIndex: 10,
}}
/>
<FeederStatus style={{ left: "680px" }} />
</motion.div>
)}
</AnimatePresence>
);
}
export default FloorTwoToOne;

28
src/components/Modules/KilnOptimize/LeftSide/indexForecast.jsx Normal file
View File

@ -0,0 +1,28 @@
/*
* @Author: zhp
* @Date: 2024-08-21 16:31:53
* @LastEditTime: 2024-08-30 14:45:54
* @LastEditors: zhp
* @Description:
*/
import React from 'react';
import KilnPress from '../components/paramsInput';
// import LiquidTrend from '../components/LiquidTrend';
import { motion } from 'framer-motion';
import cls from './index.module.scss';
export default function Index({ onGetValueFromGrandChild }) {
return (
<motion.div
className={cls.leftBar}
initial={{ opacity: 0, position: 'absolute' }}
animate={{ opacity: 1, position: 'relative' }}
exit={{ opacity: 0, position: 'relative' }}
transition={{ type: 'tween' }}
>
<KilnPress onSendValueToParent={onGetValueFromGrandChild} style={{ flex: 1, width: '100%', marginTop: '24px' }} />
{/* <LiquidTrend style={{ flex: 1, width: '100%', marginTop: '24px' }} /> */}
</motion.div>
);
}

70
src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.jsx Normal file
View File

@ -0,0 +1,70 @@
/*
* @Author: zhp
* @Date: 2024-08-23 14:44:30
* @LastEditTime: 2024-08-30 17:14:19
* @LastEditors: zhp
* @Description:
*/
// 窑炉压力
import cls from "./index.module.css";
import BottomBarItem from "../../../../Common/BottomItemBackgroundForecast";
import CommonChart from "../forecastRightChart/yield"
import { useSelector } from "react-redux";
import moment from "moment";
import React, { useContext,useEffect,useState} from 'react'
import { HomeContext } from '../../../../../pages/Home';
function KilnBottomForecast(props) {
const value = useContext(HomeContext);
const kilnInfo = useSelector((state) => state.cutting);
console.log('forecastWeeklyChart', kilnInfo.forecastWeeklyChart);
let data = [];
let xData = [];
kilnInfo.forecastWeeklyChart.forEach((ele) => {
data.push(ele.sum);
xData.push(moment(ele.dataTime).format('MM-DD'));
});
const [dataSource, setDataSource] = useState({
color1: '#146CFF',
color:'rgba(255, 194, 20, 1)',
yName:'℃',
// areaColor0:'rgba(18, 255, 245, 0.4)',
areaColor1:'rgba(18, 255, 245, 0)',
// msg: kilnOptimize.topTempAvgFor1h,
xData,
data: data? data : [],
range:[-10,10],
modelFlag: false
});
useEffect(() => {
setDataSource(prevDataSource => ({
...prevDataSource,
modelFlag: value
}));
}, [value]);
return (
<BottomBarItem
icon="yieldRate"
title="综合良品率趋势"
style={props.style}
>
{/* legend */}
<div className={cls.legend}>
<span className={cls.item}>
实际值
</span>
<span className={cls.block}>
预测值
</span>
</div>
<div className={cls.chart}>
<CommonChart dataSource={dataSource}/>
</div>
</BottomBarItem>
)
}
export default KilnBottomForecast;

73
src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.module.css Normal file
View File

@ -0,0 +1,73 @@
.chart {
height: 100%;
}
.legend {
position: absolute;
right: 25px;
top: 30px;
}
.item{
display: inline-block;
margin-right: 30px;
font-size: 11px;
position: relative;
color: #DFF1FE;
}
.item:before {
content: "";
width: 1vw;
height: 0.1064vw;
position: absolute;
top: 50%;
left: -1.2vw;
background-color: rgba(255, 194, 20, 1);
transform: translateY(-50%);
}
.item:after {
content: "";
display: inline-block;
position: absolute;
width: 0.4vw;
height: 0.4vw;
border-radius: 100%;
top: 50%;
background-color: rgba(255, 194, 20, 1);
left: -1.1vw;
transform: translateY(-50%) translateX(50%);
}
.block{
display: inline-block;
margin-right: 10px;
font-size: 11px;
position: relative;
color: #DFF1FE;
}
/* .block {
width: 8px;
height: 8px;
border-radius: 2px;
display: inline-block;
margin-right: 4px;
} */
.block:before {
content: "";
width: 1vw;
height: 0.1064vw;
position: absolute;
top: 50%;
left: -1.2vw;
transform: translateY(-50%);
background-color: #146CFF
}
.block:after {
content: "";
display: inline-block;
position: absolute;
width: 0.4vw;
height: 0.4vw;
background-color: #146CFF;
border-radius: 100%;
top: 50%;
left: -1.1vw;
transform: translateY(-50%) translateX(50%);
}

58
src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.jsx Normal file
View File

@ -0,0 +1,58 @@
/*
* @Author: zhp
* @Date: 2024-08-23 14:44:30
* @LastEditTime: 2024-08-30 17:03:44
* @LastEditors: zhp
* @Description:
*/
// 窑炉压力
import cls from "./index.module.css";
import BottomBarItem from "../../../../Common/BottomItemBackgroundForecast";
import CommonChart from "../forecastRightChart"
import { useSelector } from "react-redux";
import React, { useContext,useEffect,useState} from 'react'
import { HomeContext } from '../../../../../pages/Home';
function KilnMiddleForecast(props) {
const value = useContext(HomeContext);
const kilnOptimize = useSelector((state) => state.kilnOptimize);
const [dataSource, setDataSource] = useState({
color1: 'rgba(0, 255, 245, 1)',
color:'rgba(255, 194, 20, 1)',
yName:'℃',
// areaColor0:'rgba(18, 255, 245, 0.4)',
areaColor1:'rgba(18, 255, 245, 0)',
msg: kilnOptimize.topTempAvgFor1h,
modelFlag: null,
data: kilnOptimize.topTempAvgFor1h? kilnOptimize.topTempAvgFor1h.topTempAvgFor1h : [],
range: [-10, 10]
});
useEffect(() => {
setDataSource(prevDataSource => ({
...prevDataSource,
modelFlag: value
}));
}, [value]);
return (
<BottomBarItem
icon="kilnBottom"
title="池底加权温度趋势"
style={props.style}
>
{/* legend */}
<div className={cls.legend}>
<span className={cls.item}>
实际值
</span>
<span className={cls.block}>
预测值
</span>
</div>
<div className={cls.chart}>
<CommonChart dataSource={dataSource}/>
</div>
</BottomBarItem>
)
}
export default KilnMiddleForecast;

73
src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.module.css Normal file
View File

@ -0,0 +1,73 @@
.chart {
height: 100%;
}
.legend {
position: absolute;
right: 25px;
top: 30px;
}
.item{
display: inline-block;
margin-right: 30px;
font-size: 11px;
position: relative;
color: #DFF1FE;
}
.item:before {
content: "";
width: 1vw;
height: 0.1064vw;
position: absolute;
top: 50%;
left: -1.2vw;
background-color: rgba(255, 194, 20, 1);
transform: translateY(-50%);
}
.item:after {
content: "";
display: inline-block;
position: absolute;
width: 0.4vw;
height: 0.4vw;
border-radius: 100%;
top: 50%;
background-color: rgba(255, 194, 20, 1);
left: -1.1vw;
transform: translateY(-50%) translateX(50%);
}
.block{
display: inline-block;
margin-right: 10px;
font-size: 11px;
position: relative;
color: #DFF1FE;
}
/* .block {
width: 8px;
height: 8px;
border-radius: 2px;
display: inline-block;
margin-right: 4px;
} */
.block:before {
content: "";
width: 1vw;
height: 0.1064vw;
position: absolute;
top: 50%;
left: -1.2vw;
transform: translateY(-50%);
background-color: rgba(0, 255, 245, 1);
}
.block:after {
content: "";
display: inline-block;
position: absolute;
width: 0.4vw;
height: 0.4vw;
background-color: rgba(0, 255, 245, 1);
border-radius: 100%;
top: 50%;
left: -1.1vw;
transform: translateY(-50%) translateX(50%);
}

7
src/components/Modules/KilnOptimize/components/KilnPress/index.jsx
View File

@ -1,3 +1,10 @@
/*
* @Author: zhp
* @Date: 2024-08-20 14:09:17
* @LastEditTime: 2024-08-22 08:51:03
* @LastEditors: zhp
* @Description:
*/
// 窑炉压力 // 窑炉压力
import cls from "./index.module.css"; import cls from "./index.module.css";
import BottomBarItem from "./../../../../../components/Common/BottomItemBackground"; import BottomBarItem from "./../../../../../components/Common/BottomItemBackground";

7
src/components/Modules/KilnOptimize/components/KilnTop/index.jsx
View File

@ -1,3 +1,10 @@
/*
* @Author: zhp
* @Date: 2024-08-20 14:09:17
* @LastEditTime: 2024-08-23 14:45:08
* @LastEditors: zhp
* @Description:
*/
// 窑炉压力 // 窑炉压力
import cls from "./index.module.css"; import cls from "./index.module.css";
import BottomBarItem from "./../../../../../components/Common/BottomItemBackground"; import BottomBarItem from "./../../../../../components/Common/BottomItemBackground";

58
src/components/Modules/KilnOptimize/components/KilnTopForecast/index.jsx Normal file
View File

@ -0,0 +1,58 @@
/*
* @Author: zhp
* @Date: 2024-08-23 14:44:30
* @LastEditTime: 2024-08-30 16:56:21
* @LastEditors: zhp
* @Description:
*/
// 窑炉压力
import cls from "./index.module.css";
import BottomBarItem from "../../../../Common/BottomItemBackgroundForecast";
import CommonChart from "../forecastRightChart"
import { useSelector } from "react-redux";
import React, { useContext,useEffect,useState} from 'react'
import { HomeContext } from '../../../../../pages/Home';
function LeftTopForecast(props) {
const value = useContext(HomeContext);
const kilnOptimize = useSelector((state) => state.kilnOptimize);
const [dataSource, setDataSource] = useState({
color1: 'rgba(0, 187, 255, 1)',
color:'rgba(255, 194, 20, 1)',
yName:'℃',
// areaColor0:'rgba(18, 255, 245, 0.4)',
areaColor1:'rgba(18, 255, 245, 0)',
msg: kilnOptimize.topTempAvgFor1h,
modelFlag: null,
data: kilnOptimize.topTempAvgFor1h? kilnOptimize.topTempAvgFor1h.topTempAvgFor1h : [],
range: [-10, 10]
});
useEffect(() => {
setDataSource(prevDataSource => ({
...prevDataSource,
modelFlag: value
}));
}, [value]);
return (
<BottomBarItem
icon="kilnTop"
title="碹顶加权温度趋势"
style={props.style}
>
{/* legend */}
<div className={cls.legend}>
<span className={cls.item}>
实际值
</span>
<span className={cls.block}>
预测值
</span>
</div>
<div className={cls.chart}>
<CommonChart dataSource={dataSource}/>
</div>
</BottomBarItem>
)
}
export default LeftTopForecast;

80
src/components/Modules/KilnOptimize/components/KilnTopForecast/index.module.css Normal file
View File

@ -0,0 +1,80 @@
.chart {
height: 100%;
}
.legend {
position: absolute;
right: 25px;
top: 30px;
}
.item{
display: inline-block;
margin-right: 30px;
font-size: 11px;
position: relative;
color: #DFF1FE;
}
/* .block {
width: 8px;
height: 8px;
border-radius: 2px;
display: inline-block;
margin-right: 4px;
} */
.item:before {
content: "";
width: 1vw;
height: 0.1064vw;
position: absolute;
top: 50%;
left: -1.2vw;
background-color: rgba(255, 194, 20, 1);
transform: translateY(-50%);
}
.item:after {
content: "";
display: inline-block;
position: absolute;
width: 0.4vw;
height: 0.4vw;
border-radius: 100%;
top: 50%;
background-color: rgba(255, 194, 20, 1);
left: -1.1vw;
transform: translateY(-50%) translateX(50%);
}
.block{
display: inline-block;
margin-right: 10px;
font-size: 11px;
position: relative;
color: #DFF1FE;
}
/* .block {
width: 8px;
height: 8px;
border-radius: 2px;
display: inline-block;
margin-right: 4px;
} */
.block:before {
content: "";
width: 1vw;
height: 0.1064vw;
position: absolute;
top: 50%;
left: -1.2vw;
transform: translateY(-50%);
background-color: rgba(0, 187, 255, 1);
}
.block:after {
content: "";
display: inline-block;
position: absolute;
width: 0.4vw;
height: 0.4vw;
background-color: rgba(0, 187, 255, 1);
border-radius: 100%;
top: 50%;
left: -1.1vw;
transform: translateY(-50%) translateX(50%);
}

47
src/components/Modules/KilnOptimize/components/dayButton/index.jsx Normal file
View File

@ -0,0 +1,47 @@
/*
* @Author: zhp
* @Date: 2024-08-22 09:09:25
* @LastEditTime: 2024-08-22 14:39:13
* @LastEditors: zhp
* @Description:
*/
import React, { useState } from'react';
import cls from "./index.module.css";
function DayNightToggle() {
const [day, setDay] = useState(1);
// const preFloor = useRef();
function onDayUpdate(day) {
// preFloor.current = floor;
setDay(day);
// onFloorChange(flr);
}
return (
<div
className="subMenu"
style={{
display: "flex",
justifyContent: "center",
}}
>
<div
className={
"day day1 " + cls.menuItem + " " + (day === 1 ? cls.active : "")
}
onClick={() => onDayUpdate(1)}
>
白天
</div>
<div
className={
"day day2 " + cls.menuItem + " " + (day === 2 ? cls.active : "")
}
onClick={() => onDayUpdate(2)}
>
夜晚
</div>
</div>
);
}
export default DayNightToggle;

26
src/components/Modules/KilnOptimize/components/dayButton/index.module.css Normal file
View File

@ -0,0 +1,26 @@
.menuItem {
/* transition: all 0.3s ease-out; */
cursor: pointer;
user-select: none;
padding:5px 40px;
font-size: 32px;
line-height: 48px;
letter-spacing: 6px;
background: url(../../../../../assets/dayNight.png) no-repeat;
background-size: 100% 90%;
background-position: bottom;
color: #00fff788;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Microsoft YaHei UI',
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
}
.menuItem.active,
.menuItem:hover {
background: url(../../../../../assets/dayNightChange.png) no-repeat;
background-size: 100% 100%;
}
.menuItem:not(:first-child) {
margin-left:20px;
}

130
src/components/Modules/KilnOptimize/components/forecastRightChart/chart.config.js Normal file
View File

@ -0,0 +1,130 @@
/*
* @Author: zhp
* @Date: 2024-08-28 09:25:58
* @LastEditTime: 2024-08-28 10:22:34
* @LastEditors: zhp
* @Description:
*/
// import * as echarts from "echarts";
export default function getOptions(data, times, range, yName,forecastList,color,color1,areaStyle,areaStyle1) {
return {
grid: { top: 38, right: 44, bottom: 20, left: 48 },
xAxis: {
type: "category",
data:times,
axisLabel: {
color: "#fff",
fontSize: 12,
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 1,
color: "#213259",
},
},
},
yAxis: {
name: "单位: "+yName,
nameTextStyle: {
color: "#fff",
fontSize: 10,
align: "right",
},
type: "value",
axisLabel: {
color: "#fff",
fontSize: 12,
formatter: "{value}",
},
axisLine: {
show: true,
lineStyle: {
color: "#213259",
},
},
splitLine: {
lineStyle: {
color: "#213259a0",
},
},
min:range[0],
max:range[1]
},
// visualMap: {
// show: false,
// dimension: 1,
// pieces: pieces
// },
series: [
{
type: 'line',
label: {
show: true,
position: 'top',
color:'inherit'
},
symbol: 'circle',
symbolSize: 6,
// prettier-ignore
lineStyle:{
color:color
},
data: data,
// markLine: {
// symbol: 'none',
// label:{
// show:true,
// position:'end',
// formatter:'标准线',
// color:'#FFCB59',
// fontSize: 12,
// },
// lineStyle:{
// color:'#FFCB59'
// },
// data: seriesData.markLineData
// },
areaStyle:areaStyle
},
{
type: 'line',
label: {
show: true,
position: 'top',
color:'inherit'
},
symbol: 'circle',
symbolSize: 6,
lineStyle:{
color:color1
},
areaStyle:areaStyle1,
// prettier-ignore
data: forecastList,
// markLine: {
// symbol: 'none',
// label:{
// show:true,
// position:'end',
// formatter:'标准线',
// color:'#FFCB59',
// fontSize: 12,
// },
// data: seriesData.markLineData
// },
// areaStyle: seriesData.areaStyle
}
],
tooltip: {
trigger: "axis",
axisPointer: {
type: 'cross'
},
className: "xc-chart-tooltip",
// backgroundColor: ''
},
};
}

128
src/components/Modules/KilnOptimize/components/forecastRightChart/index.jsx Normal file
View File

@ -0,0 +1,128 @@
/*
* @Author: zhp
* @Date: 2024-08-28 09:25:58
* @LastEditTime: 2024-08-30 16:57:38
* @LastEditors: zhp
* @Description:
*/
import cls from "./index.module.css";
import ReactECharts from "echarts-for-react";
import getOptions from "./chart.config";
import * as echarts from "echarts";
import { useState } from "react";
function CommonChart(props) {
const { dataSource } = props;
const data = dataSource.data || [];
const modelFlag = dataSource.modelFlag || false;
const color1 = dataSource.color1 || [];
const color = dataSource.color || [];
const yName = dataSource.yName;
const currentTime = new Date();
const times = [];
// }
let forecastList = []
if (modelFlag === true) {
for (let i = 0; i < data.length; i++) {
let item = data[i];
let min = item - 5;
let max = item + 5;
let randomValue = Math.random() * (max - min) + min;
forecastList.push(randomValue.toFixed(1));
}
}
for(let i = 0; i < 7; i++) {
currentTime.setMinutes(currentTime.getMinutes() - 10);
const timeString = `${currentTime.getHours()}:${currentTime.getMinutes().toString().padStart(2, '0')}`;
times.unshift(timeString);
}
let areaStyle= {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: color,
},
{
offset: 1,
color: dataSource.areaColor1,
},
]),
origin: "start",
}
let areaStyle1 = {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color:color1,
},
{
offset: 1,
color: dataSource.areaColor1,
},
]),
origin: "start",
}
// let pieces = [
// {
// lte: dataSource.msg ? dataSource.msg.lte : 0,
// color: "#FFCB59",
// },
// {
// gt: dataSource.msg ? dataSource.msg.lte : 0,
// lte: dataSource.msg ? dataSource.msg.gt : 0,
// color: dataSource.color,
// },
// {
// gt: dataSource.msg ? dataSource.msg.gt : 0,
// color: "#FFCB59",
// },
// ];
const [yRange] = useState([]);
// useEffect(() => {
// if (data.length > 0) {
// var standardValue = dataSource.msg.sp;
// var maxY = (standardValue * 100 + dataSource.range[1] * 100) / 100;
// var minY = (standardValue * 100 + dataSource.range[0] * 100) / 100;
// // 计算最大最小值是否超标
// const maxValue = Math.max(...data);
// const minValue = Math.min(...data);
// if (maxValue > maxY) {
// maxY = Math.ceil(maxValue);
// }
// if (minValue < minY) {
// minY = Math.floor(minValue);
// }
// setYRange([minY, maxY]);
// }
// }, [dataSource, data]);
return (
<div className={cls.commonChart}>
{data.length > 0 && (
<ReactECharts
option={getOptions(data, times, yRange, yName,forecastList,color,color1,areaStyle,areaStyle1)}
style={{ height: "100%" }}
/>
)}
{data.length <= 0 && (
<p
style={{
paddingTop: "88px",
color: "#fffc",
textAlign: "center",
fontSize: "24px",
userSelect: "none",
}}
>
暂无数据
</p>
)}
</div>
);
}
export default CommonChart;

3
src/components/Modules/KilnOptimize/components/forecastRightChart/index.module.css Normal file
View File

@ -0,0 +1,3 @@
.commonChart {
height: 100%;
}

113
src/components/Modules/KilnOptimize/components/forecastRightChart/yield.jsx Normal file
View File

@ -0,0 +1,113 @@
import cls from "./index.module.css";
import ReactECharts from "echarts-for-react";
import getOptions from "./chart.config";
import * as echarts from "echarts";
import { useState } from "react";
function CommonChart(props) {
const { dataSource } = props;
const data = dataSource.data || [];
const modelFlag = dataSource.modelFlag || false
const color1 = dataSource.color1 || [];
const color = dataSource.color || [];
const yName = dataSource.yName;
const xData = dataSource.xData || [];
console.log('xData',xData);
let forecastList = [];
if (modelFlag === true) {
for (let i = 0; i < data.length; i++) {
let item = data[i];
let min = item - 5;
let max = item + 5;
let randomValue = Math.random() * (max - min) + min;
forecastList.push(randomValue.toFixed(1));
}
}
let areaStyle= {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: color,
},
{
offset: 1,
color: dataSource.areaColor1,
},
]),
origin: "start",
}
let areaStyle1 = {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color:color1,
},
{
offset: 1,
color: dataSource.areaColor1,
},
]),
origin: "start",
}
// let pieces = [
// {
// lte: dataSource.msg ? dataSource.msg.lte : 0,
// color: "#FFCB59",
// },
// {
// gt: dataSource.msg ? dataSource.msg.lte : 0,
// lte: dataSource.msg ? dataSource.msg.gt : 0,
// color: dataSource.color,
// },
// {
// gt: dataSource.msg ? dataSource.msg.gt : 0,
// color: "#FFCB59",
// },
// ];
const [yRange] = useState([]);
// useEffect(() => {
// if (data.length > 0) {
// var standardValue = dataSource.msg.sp;
// var maxY = (standardValue * 100 + dataSource.range[1] * 100) / 100;
// var minY = (standardValue * 100 + dataSource.range[0] * 100) / 100;
// // 计算最大最小值是否超标
// const maxValue = Math.max(...data);
// const minValue = Math.min(...data);
// if (maxValue > maxY) {
// maxY = Math.ceil(maxValue);
// }
// if (minValue < minY) {
// minY = Math.floor(minValue);
// }
// setYRange([minY, maxY]);
// }
// }, [dataSource, data]);
return (
<div className={cls.commonChart}>
{data.length > 0 && (
<ReactECharts
option={getOptions(data, xData, yRange, yName,forecastList,color,color1,areaStyle,areaStyle1)}
style={{ height: "100%" }}
/>
)}
{data.length <= 0 && (
<p
style={{
paddingTop: "88px",
color: "#fffc",
textAlign: "center",
fontSize: "24px",
userSelect: "none",
}}
>
暂无数据
</p>
)}
</div>
);
}
export default CommonChart;

366
src/components/Modules/KilnOptimize/components/forecastTopColorBlock/index.jsx Normal file
View File

@ -0,0 +1,366 @@
import { useSelector } from "react-redux";
import React from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ReactComponent as B1 } from "./pic/b1.svg";
import { ReactComponent as B2 } from "./pic/b2.svg";
import { ReactComponent as B3 } from "./pic/b3.svg";
import { ReactComponent as B4 } from "./pic/b4.svg";
import { ReactComponent as B5 } from "./pic/b5.svg";
import { ReactComponent as B6 } from "./pic/b6.svg";
import { ReactComponent as B7 } from "./pic/b7.svg";
import { ReactComponent as B8 } from "./pic/b8.svg";
import { ReactComponent as T1 } from "./pic/t1.svg";
import { ReactComponent as T2 } from "./pic/t2.svg";
import { ReactComponent as T3 } from "./pic/t3.svg";
import { ReactComponent as T4 } from "./pic/t4.svg";
import { ReactComponent as T5 } from "./pic/t5.svg";
import { ReactComponent as T6 } from "./pic/t6.svg";
import { ReactComponent as T7 } from "./pic/t7.svg";
import { ReactComponent as T8 } from "./pic/t8.svg";
const TopColorBlock = ({ condition }) => {
const tempTop = useSelector((state) => state.temperature.top);
function returnColor(n) {
let num = Number(tempTop[n].slice(0, tempTop[n].length - 1));
if (num <= 100) {
return "rgba(96, 0, 189, 0.7)";
} else if (num > 100 && num <= 200) {
return "rgba(102, 7, 255, 0.7)";
} else if (num > 200 && num <= 300) {
return "rgba(10, 20, 255, 0.7)";
} else if (num > 300 && num <= 400) {
return "rgba(7, 89, 255, 0.7)";
} else if (num > 400 && num <= 500) {
return "rgba(7, 139, 255, 0.7)";
} else if (num > 500 && num <= 600) {
return "rgba(7, 194, 255, 0.7)";
} else if (num > 600 && num <= 700) {
return "rgba(7, 255, 253, 0.7)";
} else if (num > 700 && num <= 800) {
return "rgba(7, 255, 205, 0.7)";
} else if (num > 800 && num <= 900) {
return "rgba(20, 237, 127, 0.7)";
} else if (num > 900 && num <= 1000) {
return "rgba(0, 193, 39, 0.7)";
} else if (num > 1000 && num <= 1100) {
return "rgba(147, 210, 1, 0.7)";
} else if (num > 1100 && num <= 1200) {
return "rgba(206, 206, 0, 0.7)";
} else if (num > 1200 && num <= 1300) {
return "rgba(255, 226, 13, 0.7)";
} else if (num > 1300 && num <= 1400) {
return "rgba(249, 240, 146, 0.7)";
} else if (num > 1400 && num <= 1500) {
return "rgba(250, 204, 93, 0.7)";
} else if (num > 1500 && num <= 1600) {
return "rgba(240, 139, 32, 0.7)";
} else if (num > 1600 && num <= 1700) {
return "rgba(241, 88, 26, 0.7)";
} else if (num > 1700 && num <= 1800) {
return "rgba(255, 0, 0, 0.7)";
} else if (num > 1800 && num <= 1900) {
return "rgba(182, 0, 0, 0.7)";
} else if (num > 1900) {
return "rgba(140, 0, 33, 0.7)";
}
}
function returnColor2(n) {
let num = Number(tempTop[n].slice(0, tempTop[n].length - 1));
if (num <= 100) {
return "rgba(96, 0, 189, 0.9)";
} else if (num > 100 && num <= 200) {
return "rgba(102, 7, 255, 0.9)";
} else if (num > 200 && num <= 300) {
return "rgba(10, 20, 255, 0.9)";
} else if (num > 300 && num <= 400) {
return "rgba(7, 89, 255, 0.9)";
} else if (num > 400 && num <= 500) {
return "rgba(7, 139, 255, 0.9)";
} else if (num > 500 && num <= 600) {
return "rgba(7, 194, 255, 0.9)";
} else if (num > 600 && num <= 700) {
return "rgba(7, 255, 253, 0.9)";
} else if (num > 700 && num <= 800) {
return "rgba(7, 255, 205, 0.9)";
} else if (num > 800 && num <= 900) {
return "rgba(20, 237, 127, 0.9)";
} else if (num > 900 && num <= 1000) {
return "rgba(0, 193, 39, 0.9)";
} else if (num > 1000 && num <= 1100) {
return "rgba(147, 210, 1, 0.9)";
} else if (num > 1100 && num <= 1200) {
return "rgba(206, 206, 0, 0.9)";
} else if (num > 1200 && num <= 1300) {
return "rgba(255, 226, 13, 0.9)";
} else if (num > 1300 && num <= 1400) {
return "rgba(249, 240, 146, 0.9)";
} else if (num > 1400 && num <= 1500) {
return "rgba(250, 204, 93, 0.9)";
} else if (num > 1500 && num <= 1600) {
return "rgba(240, 139, 32, 0.9)";
} else if (num > 1600 && num <= 1700) {
return "rgba(241, 88, 26, 0.9)";
} else if (num > 1700 && num <= 1800) {
return "rgba(255, 0, 0, 0.9)";
} else if (num > 1800 && num <= 1900) {
return "rgba(182, 0, 0, 0.9)";
} else if (num > 1900) {
return "rgba(140, 0, 33, 0.9))";
}
}
// 窑炉内部svg变色
function BigSvg() {
return (
<svg
width="2050px"
height="700px"
style={{
position: "absolute",
top: "320px",
left: "970px",
zIndex: 0,
}}
>
<defs>
<linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="0">
<stop offset="0%" stopColor={returnColor2("TE201")} />
<stop offset="9%" stopColor={returnColor2("TE202")} />
<stop offset="18%" stopColor={returnColor2("TE203")} />
<stop offset="27%" stopColor={returnColor2("TE204")} />
<stop offset="36%" stopColor={returnColor2("TE205")} />
<stop offset="45%" stopColor={returnColor2("TE206")} />
<stop offset="54%" stopColor={returnColor2("TE208")} />
<stop offset="63%" stopColor={returnColor2("TE210")} />
<stop offset="72%" stopColor={returnColor2("TE211")} />
<stop offset="81%" stopColor={returnColor2("TE212")} />
<stop offset="90%" stopColor={returnColor2("TE213")} />
<stop offset="100%" stopColor={returnColor2("TE213")} />
</linearGradient>
<linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="0">
<stop offset="0%" stopColor={returnColor2("TE216")} />
<stop offset="33%" stopColor={returnColor2("TE221")} />
<stop offset="66%" stopColor={returnColor2("TE225")} />
<stop offset="100%" stopColor={returnColor2("TE225")} />
</linearGradient>
</defs>
<polygon
points="27 238,1310 238,1320 310,1330 310,1330 351,1320 361,1320 395,1076 395,1076 400,1020 400,1020 400,958 400,958 400,900 400,900 400,832 400,775 400,775 400,170 400,170 380,12 380"
fill="url(#Gradient1)"
/>
<polygon
points="1345 300,1410 296,1420 290,1390 76,1434 76,1434 83,1434 90,1530 88,1528 88,1530 120,1438 120,1446 178,1616 178,1620 210,1450 210,1462 300,1720 300,1726 333,1470 336,1480 415,1652 414,1658 444,1480 448,1490 523,1590 520, 1593 553,1448 553,1425 335,1424 342,1345 344"
fill="url(#Gradient2)"
/>
{/* <polygon
points="1350 300,1355 460,1670 290,1640 50,1688 50,1688 58,1800 58,1804 93,1692 93,1700 168,1900 168,1906 201,1706 200,1718 312,2024 311,2029 343,1724 344,1736 445,1940 444,1946 478,1740 478,1753 573,1874 573, 1878 608,1710 608,1678 349,1668 360,1590 360"
fill="url(#Gradient2)"
/> */}
</svg>
);
}
return (
<motion.div
animate={{
opacity: [0, 0, 0, 0.6, 1],
transition: { duration: 0.3, delay: 1.5 },
}}
>
<BigSvg />
<B1
style={{
fill: returnColor("TE228"),
width: "100%",
height: "100%",
position: "absolute",
top: "100px",
left: "56px",
zIndex: 0,
transform: "scale(0.68,0.64)",
}}
/>
<B2
style={{
fill: returnColor("TE230"),
width: "100%",
height: "100%",
position: "absolute",
top: "100px",
left: "48px",
zIndex: 0,
transform: "scale(0.68,0.64)",
}}
/>
<B3
style={{
fill: returnColor("TE232"),
width: "100%",
height: "100%",
position: "absolute",
top: "100px",
left: "29px",
zIndex: 0,
transform: "scale(0.66,0.64)",
}}
/>
<B4
style={{
fill: returnColor("TE234"),
width: "100%",
height: "100%",
position: "absolute",
top: "100px",
left: "21px",
zIndex: 0,
transform: "scale(0.66,0.64)",
}}
/>
<B5
style={{
fill: returnColor("TE236"),
width: "100%",
height: "100%",
position: "absolute",
top: "100px",
left: "16px",
zIndex: 0,
transform: "scale(0.66,0.64)",
}}
/>
<B6
style={{
fill: returnColor("TE238"),
width: "100%",
height: "100%",
position: "absolute",
top: "100px",
left: "10px",
zIndex: 0,
transform: "scale(0.66,0.64)",
}}
/>
<B7
style={{
fill: returnColor("TE240"),
width: "100%",
height: "100%",
position: "absolute",
top: "100px",
left: "3px",
zIndex: 0,
transform: "scale(0.66,0.64)",
}}
/>
<B8
style={{
fill: returnColor("TE242"),
width: "100%",
height: "100%",
position: "absolute",
top: "100px",
left: "-8px",
zIndex: 0,
transform: "scale(0.68,0.64)",
}}
/>
<T1
style={{
fill: returnColor("TE227"),
width: "100%",
height: "100%",
position: "absolute",
top: "110px",
left: "48px",
zIndex: 0,
transform: "scale(0.68,0.64)",
}}
/>
<T2
style={{
fill: returnColor("TE229"),
width: "100%",
height: "100%",
position: "absolute",
top: "110px",
left: "44px",
zIndex: 0,
transform: "scale(0.68,0.64)",
}}
/>
<T3
style={{
fill: returnColor("TE231"),
width: "100%",
height: "100%",
position: "absolute",
top: "110px",
left: "36px",
zIndex: 0,
transform: "scale(0.68,0.64)",
}}
/>
<T4
style={{
fill: returnColor("TE233"),
width: "100%",
height: "100%",
position: "absolute",
top: "110px",
left: "20px",
zIndex: 0,
transform: "scale(0.66,0.64)",
}}
/>
<T5
style={{
fill: returnColor("TE235"),
width: "100%",
height: "100%",
position: "absolute",
top: "110px",
left: "16px",
zIndex: 0,
transform: "scale(0.66,0.64)",
}}
/>
<T6
style={{
fill: returnColor("TE237"),
width: "100%",
height: "100%",
position: "absolute",
top: "110px",
left: "10px",
zIndex: 0,
transform: "scale(0.66,0.64)",
}}
/>
<T7
style={{
fill: returnColor("TE239"),
width: "100%",
height: "100%",
position: "absolute",
top: "110px",
left: "4px",
zIndex: 0,
transform: "scale(0.66,0.64)",
}}
/>
<T8
style={{
fill: returnColor("TE241"),
width: "100%",
height: "100%",
position: "absolute",
top: "110px",
left: "-10px",
zIndex: 0,
transform: "scale(0.68,0.64)",
}}
/>
</motion.div>
);
};
export default TopColorBlock;

1
src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b1.svg Normal file
View File

@ -0,0 +1 @@
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM421.92,703.81c-2.21-.15-4-.39-5.76-.37-26.5.16-53,.46-79.48.44-4.48,0-5.5,1.52-5.71,5.7-.59,11.58-.8,11.57-12.2,11.61-1,0-2,.09-3,0-2.63-.22-3.4,1.09-3.54,3.56-.57,10-1.28,19.93-2,29.9-1.54,22.09-3.13,44.17-4.65,66.26-.56,8.08-1,16.16-1.46,24.91h6.08l60-.14c13.16,0,26.33-.19,39.49,0,3.89,0,5.23-1.25,5.21-5.17,0-5.82.55-11.64.86-17.46q1.85-34.66,3.69-69.34C420.3,737.36,421.07,721.06,421.92,703.81Z" transform="translate(277 -158)"/><path d="M421.92,703.81c-.85,17.25-1.62,33.55-2.46,49.84q-1.8,34.67-3.69,69.34c-.31,5.82-.9,11.64-.86,17.46,0,3.92-1.32,5.21-5.21,5.17-13.16-.14-26.33,0-39.49,0l-60,.14h-6.08c.5-8.75.9-16.83,1.46-24.91,1.52-22.09,3.11-44.17,4.65-66.26.7-10,1.41-19.93,2-29.9.14-2.47.91-3.78,3.54-3.56,1,.09,2,0,3,0,11.4,0,11.61,0,12.2-11.61.21-4.18,1.23-5.71,5.71-5.7,26.49,0,53-.28,79.48-.44C417.93,703.42,419.71,703.66,421.92,703.81Z" transform="translate(277 -158)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b2.svg Normal file
View File

@ -0,0 +1 @@
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM544.59,703.38q-53.33,0-106.49,0c-2.87,0-3.72,1.28-3.8,3.94-.17,5.65-.58,11.3-.87,17-2,38.74-3.87,77.48-5.95,116.21-.21,3.84,1.08,5,4.69,5q51.72-.4,103.43-.61c2.88,0,4.18-.76,4.23-3.91.1-7.15.55-14.3.85-21.46,1.31-30.6,2.68-61.21,3.86-91.82C544.85,719.69,544.59,711.75,544.59,703.38Z" transform="translate(277 -158)"/><path d="M544.59,703.38c0,8.37.26,16.31-.05,24.24-1.18,30.61-2.55,61.22-3.86,91.82-.3,7.16-.75,14.31-.85,21.46-.05,3.15-1.35,3.89-4.23,3.91q-51.71.2-103.43.61c-3.61,0-4.9-1.14-4.69-5,2.08-38.73,4-77.47,5.95-116.21.29-5.65.7-11.3.87-17,.08-2.66.93-3.94,3.8-3.94Q491.3,703.43,544.59,703.38Z" transform="translate(277 -158)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 872 B

1
src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b3.svg Normal file
View File

@ -0,0 +1 @@
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM558.89,703.13a13,13,0,0,0-.55,1.88q-2.9,68.16-5.8,136.31c-.11,2.69,1,3.48,3.53,3.43,6.33-.12,12.66,0,19-.08,29.5-.18,59-.44,88.49-.51,3.93,0,5.81-1,5.65-5.28-.18-4.65.31-9.32.41-14q1-48.24,2-96.46c.15-8.43,0-16.87,0-25.31Z" transform="translate(277 -158)"/><path d="M558.89,703.13H671.6c0,8.44.13,16.88,0,25.31q-.9,48.22-2,96.46c-.1,4.66-.59,9.33-.41,14,.16,4.3-1.72,5.27-5.65,5.28-29.49.07-59,.33-88.49.51-6.33,0-12.66,0-19,.08-2.53,0-3.64-.74-3.53-3.43q2.94-68.15,5.8-136.31A13,13,0,0,1,558.89,703.13Z" transform="translate(277 -158)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 770 B

1
src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b4.svg Normal file
View File

@ -0,0 +1 @@
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM799.81,702.69a17.56,17.56,0,0,0-2.32-.43c-36,0-72,.14-107.93.1-3.94,0-4.13,2-4.18,5q-1,65.19-2.27,130.37c-.09,4.72,1,6.33,6,6.28q52-.46,103.93-.34c4.29,0,5.72-1,5.75-5.53.21-43.3.66-86.6,1-129.9C799.83,706.5,799.81,704.71,799.81,702.69Z" transform="translate(277 -158)"/><path d="M799.81,702.69c0,2,0,3.81,0,5.6-.37,43.3-.82,86.6-1,129.9,0,4.5-1.46,5.53-5.75,5.53q-52-.09-103.93.34c-5,.05-6.08-1.56-6-6.28q1.35-65.17,2.27-130.37c0-3,.24-5.06,4.18-5,36,0,72-.06,107.93-.1A17.56,17.56,0,0,1,799.81,702.69Z" transform="translate(277 -158)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 770 B

1
src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b5.svg Normal file
View File

@ -0,0 +1 @@
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM812.91,702.15a15.47,15.47,0,0,0-.55,2.23q-.57,67.73-1.18,135.46c0,3.33,1.61,3.79,4.34,3.77q52-.43,104-.7c3.43,0,4.28-1.39,4.16-4.48q-.42-11-.52-22-.5-54.74-.9-109.46c0-3.3-.12-5.49-4.73-5.44-32.82.38-65.65.44-98.47.6Z" transform="translate(277 -158)"/><path d="M812.91,702.15H819c32.82-.16,65.65-.22,98.47-.6,4.61,0,4.71,2.14,4.73,5.44q.4,54.74.9,109.46.11,11,.52,22c.12,3.09-.73,4.47-4.16,4.48q-52,.23-104,.7c-2.73,0-4.37-.44-4.34-3.77q.68-67.73,1.18-135.46A15.47,15.47,0,0,1,812.91,702.15Z" transform="translate(277 -158)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 758 B

1
src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b6.svg Normal file
View File

@ -0,0 +1 @@
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM1049,701.25h-5.47c-33.82.06-67.64.21-101.47.07-5,0-6.07,1.61-6,6.32q.85,65,1.21,129.94c0,4.25,1.39,5.3,5.44,5.27,34.83-.23,69.65-.25,104.47-.37,1.77,0,3.54-.24,5.76-.4C1051.66,795,1050.36,748.47,1049,701.25Z" transform="translate(277 -158)"/><path d="M1049,701.25c1.32,47.22,2.62,93.77,3.93,140.83-2.22.16-4,.4-5.76.4-34.82.12-69.64.14-104.47.37-4,0-5.41-1-5.44-5.27q-.37-65-1.21-129.94c-.06-4.71,1.06-6.34,6-6.32,33.83.14,67.65,0,101.47-.07Z" transform="translate(277 -158)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 709 B

1
src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b7.svg Normal file
View File

@ -0,0 +1 @@
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM1064.31,778.29c.47,14.73,1.29,36.54,1.76,58.35.1,4.49,1.63,5.57,5.87,5.53q49.23-.4,98.47-.33c4.88,0,5.77-1.64,5.58-6.05q-2.76-65.14-5.13-130.32c-.15-4.41-2.31-4.67-5.7-4.65-32.49.18-65,.35-97.48.27-4.51,0-5.63,1.33-5.47,5.68C1063,728.24,1063.51,749.73,1064.31,778.29Z" transform="translate(277 -158)"/><path d="M1064.31,778.29c-.8-28.56-1.31-50-2.1-71.52-.16-4.35,1-5.69,5.47-5.68,32.49.08,65-.09,97.48-.27,3.39,0,5.55.24,5.7,4.65q2.36,65.17,5.13,130.32c.19,4.41-.7,6.06-5.58,6.05q-49.23-.15-98.47.33c-4.24,0-5.77-1-5.87-5.53C1065.6,814.83,1064.78,793,1064.31,778.29Z" transform="translate(277 -158)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 834 B

1
src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/b8.svg Normal file
View File

@ -0,0 +1 @@
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197Zm-957.31-80.35v-.58c14.66,0,29.33,0,44,0,6.49,0,6.37-.09,6-6.4q-2.54-44.4-4.93-88.81-1.08-20-2.1-39.92c-.17-3.37-.58-5.82-5.3-5.76q-43.48.55-87,.44c-4.84,0-6.29,1.43-6.06,6.27,1.25,25.62,2.18,51.26,3.28,76.88.75,17.48,1.77,34.94,2.3,52.42.14,4.78,2,5.64,6.29,5.57C1210.69,841.5,1225.19,841.65,1239.69,841.65Z" transform="translate(277 -158)"/><path d="M1239.69,841.65c-14.5,0-29-.15-43.49.1-4.3.07-6.15-.79-6.29-5.57-.53-17.48-1.55-34.94-2.3-52.42-1.1-25.62-2-51.26-3.28-76.88-.23-4.84,1.22-6.28,6.06-6.27q43.48.09,87-.44c4.72-.06,5.13,2.39,5.3,5.76q1,20,2.1,39.92,2.43,44.42,4.93,88.81c.35,6.31.47,6.38-6,6.4-14.66,0-29.33,0-44,0Z" transform="translate(277 -158)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 897 B

1
src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t1.svg Normal file
View File

@ -0,0 +1 @@
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM447.62,225.07h-5.18c-29.8,0-59.61.19-89.41-.13-5.6-.06-7.34,1.6-7,6.89.18,3.46-.48,7-.72,10.45q-2.34,33.61-4.66,67.22c-.84,12.29-1.53,24.58-2.46,36.86-.26,3.46.79,5,4.38,4.66,2.48-.21,5,.1,7.48-.08,3.39-.24,4.84.88,4.5,4.53s-.07,7.58-.07,11.49a8.13,8.13,0,0,0,2,.57c26.8,0,53.61,0,80.42,0,3.26,0,3.72-1.73,3.87-4.41,2.26-40.38,4.63-80.75,6.87-121.13C447.88,236.59,447.62,231.14,447.62,225.07Z" transform="translate(277 -158)"/><path d="M447.62,225.07c0,6.07.26,11.52,0,16.94-2.24,40.38-4.61,80.75-6.87,121.13-.15,2.68-.61,4.42-3.87,4.41-26.81-.05-53.62,0-80.42,0a8.13,8.13,0,0,1-2-.57c0-3.91-.27-7.73.07-11.49s-1.11-4.77-4.5-4.53c-2.48.18-5-.13-7.48.08-3.59.3-4.64-1.2-4.38-4.66.93-12.28,1.62-24.57,2.46-36.86q2.29-33.62,4.66-67.22c.24-3.49.9-7,.72-10.45-.29-5.29,1.45-7,7-6.89,29.8.32,59.61.14,89.41.13Z" transform="translate(277 -158)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t2.svg Normal file
View File

@ -0,0 +1 @@
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM562.48,225.44H460.77a10,10,0,0,0-.48,1.8q-2.06,35.67-4.06,71.34c-1.2,21.13-2.28,42.26-3.69,63.36-.29,4.21.77,5.67,5,5.64q48.24-.34,96.49-.39c3.27,0,4.74-.86,4.79-4.5.13-10.83.58-21.65,1-32.47.86-22.14,1.94-44.28,2.59-66.43C562.79,251.18,562.48,238.55,562.48,225.44Z" transform="translate(277 -158)"/><path d="M562.48,225.44c0,13.11.31,25.74-.06,38.35-.65,22.15-1.73,44.29-2.59,66.43-.42,10.82-.87,21.64-1,32.47-.05,3.64-1.52,4.49-4.79,4.5q-48.24.07-96.49.39c-4.24,0-5.3-1.43-5-5.64,1.41-21.1,2.49-42.23,3.69-63.36q2-35.67,4.06-71.34a10,10,0,0,1,.48-1.8Z" transform="translate(277 -158)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 819 B

1
src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t3.svg Normal file
View File

@ -0,0 +1 @@
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM683.28,225.41a26.54,26.54,0,0,0-2.82-.39c-33.48,0-67,.06-100.43-.05-4.14,0-4.52,2.22-4.62,5.35-1.41,43.6-2.78,87.2-4.4,130.79-.19,5.09,1.58,6.09,6.21,6.06,32.31-.22,64.62-.18,96.93-.25,1.75,0,3.5-.24,5.49-.39C680.86,319.23,682.07,272.5,683.28,225.41Z" transform="translate(277 -158)"/><path d="M683.28,225.41c-1.21,47.09-2.42,93.82-3.64,141.12-2,.15-3.74.39-5.49.39-32.31.07-64.62,0-96.93.25-4.63,0-6.4-1-6.21-6.06,1.62-43.59,3-87.19,4.4-130.79.1-3.13.48-5.37,4.62-5.35,33.47.11,67,0,100.43.05A26.54,26.54,0,0,1,683.28,225.41Z" transform="translate(277 -158)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 792 B

1
src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t4.svg Normal file
View File

@ -0,0 +1 @@
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM802,296.2h.7c0-21.82-.14-43.65.11-65.47,0-4.63-1.31-5.91-5.85-5.88q-47.47.27-95,0c-4.37,0-6,1-6.06,5.77Q694.7,295.86,692.84,361c-.13,4.59,1.14,6,5.8,6q49-.31,98-.08c4.62,0,5.54-1.59,5.5-5.75C801.94,339.51,802,317.86,802,296.2Z" transform="translate(277 -158)"/><path d="M802,296.2c0,21.66-.09,43.31.07,65,0,4.16-.88,5.77-5.5,5.75q-49-.27-98,.08c-4.66,0-5.93-1.37-5.8-6q1.8-65.19,3.13-130.39c.1-4.74,1.69-5.79,6.06-5.77q47.47.21,95,0c4.54,0,5.9,1.25,5.85,5.88-.25,21.82-.11,43.65-.11,65.47Z" transform="translate(277 -158)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 755 B

1
src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t5.svg Normal file
View File

@ -0,0 +1 @@
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM919.16,296.12H918c0-22-.08-44,.07-66,0-4.15-1.36-5.36-5.47-5.34q-46.47.24-93,0c-3.95,0-5.48.88-5.47,5.24q.13,65.72-.21,131.43c0,4.11,1.12,5.38,5.32,5.36q47.22-.27,94.45,0c4.62,0,5.52-1.61,5.49-5.76C919.08,339.43,919.16,317.78,919.16,296.12Z" transform="translate(277 -158)"/><path d="M919.16,296.12c0,21.66-.08,43.31.08,65,0,4.15-.87,5.79-5.49,5.76q-47.22-.28-94.45,0c-4.2,0-5.34-1.25-5.32-5.36q.32-65.71.21-131.43c0-4.36,1.52-5.25,5.47-5.24q46.49.18,93,0c4.11,0,5.5,1.19,5.47,5.34-.15,22-.07,44-.07,66Z" transform="translate(277 -158)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 769 B

1
src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t6.svg Normal file
View File

@ -0,0 +1 @@
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM1039.17,296.21h-1.4c0-21.66-.16-43.32.11-65,.06-5-1.2-6.55-6.35-6.51q-47,.36-94,.05c-4.82,0-6.59,1-6.51,6.31q.94,65.23,1.21,130.48c0,4.29,1.44,5.22,5.45,5.2q48.75-.24,97.49,0c4.34,0,5.74-1,5.59-5.56C1040.05,339.53,1039.67,317.87,1039.17,296.21Z" transform="translate(277 -158)"/><path d="M1039.17,296.21c.5,21.66.88,43.32,1.6,65,.15,4.52-1.25,5.58-5.59,5.56q-48.75-.23-97.49,0c-4,0-5.42-.91-5.45-5.2q-.35-65.24-1.21-130.48c-.08-5.33,1.69-6.34,6.51-6.31q47,.25,94-.05c5.15,0,6.41,1.54,6.35,6.51-.27,21.66-.11,43.32-.11,65Z" transform="translate(277 -158)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 787 B

1
src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t7.svg Normal file
View File

@ -0,0 +1 @@
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM1052.49,366.17c2.8.22,4.1.41,5.4.41q46.2,0,92.4,0c6.58,0,6.7,0,6.46-6.5-1.66-43.57-3.43-87.14-5-130.72-.16-4.51-2.54-4.59-5.8-4.58-30,.06-59.94.15-89.9,0-4.86,0-6.18,1.46-6.06,6.27,1,37.78,1.7,75.56,2.45,113.34C1052.61,351.47,1052.49,358.61,1052.49,366.17Z" transform="translate(277 -158)"/><path d="M1052.49,366.17c0-7.56.12-14.7,0-21.84-.75-37.78-1.48-75.56-2.45-113.34-.12-4.81,1.2-6.3,6.06-6.27,30,.17,59.93.08,89.9,0,3.26,0,5.64.07,5.8,4.58,1.54,43.58,3.31,87.15,5,130.72.24,6.49.12,6.5-6.46,6.5q-46.2,0-92.4,0C1056.59,366.58,1055.29,366.39,1052.49,366.17Z" transform="translate(277 -158)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 827 B

1
src/components/Modules/KilnOptimize/components/forecastTopColorBlock/pic/t8.svg Normal file
View File

@ -0,0 +1 @@
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM1170.17,366.09c2.38.16,4.33.4,6.28.39,25.5-.09,51-.1,76.49-.38,12.29-.14,11.28,2.73,10.53-11.71-2.13-41.26-4.59-82.49-6.63-123.75-.25-5-2-6-6.57-6-26.17.18-52.33.1-78.5.11-7.79,0-7.65,0-7.31,7.67q2,43.69,3.77,87.38C1168.88,335.1,1169.51,350.4,1170.17,366.09Z" transform="translate(277 -158)"/><path d="M1170.17,366.09c-.66-15.69-1.29-31-1.94-46.28q-1.86-43.68-3.77-87.38c-.34-7.65-.48-7.66,7.31-7.67,26.17,0,52.33.07,78.5-.11,4.52,0,6.32.95,6.57,6,2,41.26,4.5,82.49,6.63,123.75.75,14.44,1.76,11.57-10.53,11.71-25.5.28-51,.29-76.49.38C1174.5,366.49,1172.55,366.25,1170.17,366.09Z" transform="translate(277 -158)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 844 B

232
src/components/Modules/KilnOptimize/components/inputData/index.jsx Normal file
View File

@ -0,0 +1,232 @@
/*
* @Author: zhp
* @Date: 2024-08-22 14:00:57
* @LastEditTime: 2024-08-30 13:55:33
* @LastEditors: zhp
* @Description:
*/
import React from'react';
import cls from "./index.module.css";
function InputDataToggle() {
// const [season, setSeason] = useState(1);
// const preFloor = useRef()
return (
<div
className="dataContent"
style={{
display: "flex",
width:"100%",
// marginBottom: "24px",
flexDirection: "column",/* 这行设置为垂直布局 */
gap:'30px'
}}
>
<div
className={
cls.item
}
>
<div className={
cls.content
}>
<h2 className={
cls.paramsTitle
}>
投料速度
</h2>
<div className={
cls.paramsData
}>
<div className={
cls.data
}>
363
</div> <div className={
cls.unit
}>
m/s
</div>
</div>
</div>
<div className={
cls.content
}>
<h2 className={
cls.totalDataTitle
}>
天然气设定总量
</h2>
<div className={
cls.paramsData
}>
<div className={
cls.data
}>
631
</div> <div className={
cls.unit
}>
m³/s
</div>
</div>
</div>
</div>
<div
className={
cls.item
}
>
<div className={
cls.content
}>
<h2 className={
cls.totalDataTitle
}>
焦炉煤气设定总量
</h2>
<div className={
cls.paramsData
}>
<div className={
cls.data
}>
11111
</div> <div className={
cls.unit
}>
m³/s
</div>
</div>
</div>
<div className={
cls.content
}>
<h2 className={
cls.paramsTitle
}>
助燃风流量
</h2>
<div className={
cls.paramsData
}>
<div className={
cls.data
}>
432
</div> <div className={
cls.unit
}>
m³/s
</div>
</div>
</div>
</div>
<div
className={
cls.item
}
>
<div className={
cls.content
}>
<h2 className={
cls.totalDataTitle
}>
产品规格设定标准
</h2>
<div className={
cls.paramsData
}>
<div className={
cls.data
}>
11111
</div> <div className={
cls.unit
}>
</div>
</div>
</div>
<div className={
cls.content
}>
<h2 className={
cls.paramsTitle
}>
循环水流量
</h2>
<div className={
cls.paramsData
}>
<div className={
cls.data
}>
562
</div> <div className={
cls.unit
}>
m³/s
</div>
</div>
</div>
</div>
<div
className={
cls.item
}
>
<div className={
cls.content
}>
<h2 className={
cls.totalDataTitle
}>
配料水分含量
</h2>
<div className={
cls.paramsData
}>
<div className={
cls.data
}>
60
</div> <div className={
cls.unit
}>
</div>
</div>
</div>
<div className={
cls.content
}>
<h2 className={
cls.paramsTitle
}>
玻璃液出口宽度
</h2>
<div className={
cls.paramsData
}>
<div className={
cls.data
}>
11
</div> <div className={
cls.unit
}>
</div>
</div>
</div>
</div>
</div>
);
}
export default InputDataToggle;

108
src/components/Modules/KilnOptimize/components/inputData/index.module.css Normal file
View File

@ -0,0 +1,108 @@
.dataContent{
width: 100%;
}
.item{
flex: 1;
display: flex;
flex-direction: column;/* 这行设置为垂直布局 */
gap: 35px;
}
.content{
height: 56px;
display: flex;
justify-content: space-around;
gap: 16px;
}
.paramsData{
flex: 1;
cursor: pointer;
user-select: none;
display: flex;
justify-content: space-between;
padding:5px 10px;
font-size: 32px;
line-height: 48px;
letter-spacing: 6px;
background: url(../../../../../assets/paramsData.png) no-repeat;
background-size: 100% 90%;
background-position: bottom;
color: #00fff788;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Microsoft YaHei UI',
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
}
/* 下划线 */
.paramsTitle{
flex: 1;
height: 56px;
position: relative;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24px;
color: #FFFFFF;
line-height: 56px;
letter-spacing: 1px;
text-align: right;
}
.paramsTitle::after {
content: "";
top: 73%;
position: absolute;
bottom: 0;
left: 50%;
width: 50%; /* 调整此处的宽度值来改变下划线的宽度，例如 50% 表示占文字宽度的一半 */
height: 4px; /* 调整下划线的高度 */
background-image: linear-gradient(173deg, rgba(47, 47, 49, 0) 0%, #2BFFDF 100%);
box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55);
backdrop-filter: blur(0px);
}
.totalDataTitle{
flex: 1;
height: 56px;
position: relative;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24px;
color: #FFFFFF;
line-height: 56px;
letter-spacing: 1px;
text-align: right;
}
.totalDataTitle::after {
content: "";
top: 73%;
position: absolute;
bottom: 0;
left: 20%;
width: 80%; /* 调整此处的宽度值来改变下划线的宽度，例如 50% 表示占文字宽度的一半 */
height: 4px; /* 调整下划线的高度 */
background-image: linear-gradient(173deg, rgba(47, 47, 49, 0) 0%, #2BFFDF 100%);
box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55);
backdrop-filter: blur(0px);
}
.outTitle{
flex: 1;
height: 56px;
position: relative;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24px;
color: #FFFFFF;
line-height: 56px;
letter-spacing: 1px;
text-align: right;
}
.outTitle::after {
content: "";
top: 73%;
position: absolute;
bottom: 0;
left: 20%;
width: 80%; /* 调整此处的宽度值来改变下划线的宽度，例如 50% 表示占文字宽度的一半 */
height: 4px; /* 调整下划线的高度 */
background-image: linear-gradient(173deg, rgba(47, 47, 49, 0) 0%, #2BFFDF 100%);
box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55);
backdrop-filter: blur(0px);
}

38
src/components/Modules/KilnOptimize/components/leftBottomForecast/index.jsx Normal file
View File

@ -0,0 +1,38 @@
/*
* @Author: zhp
* @Date: 2024-08-23 15:31:44
* @LastEditTime: 2024-08-28 13:31:32
* @LastEditors: zhp
* @Description:
*/
import cls from "./index.module.css";
import BottomBarItem from "../../../../Common/BottomItemBackgroundForecastTop";
import { useSelector } from "react-redux";
function LeftMiddleForecast() {
const kilnInfo = useSelector((state) => state.cutting);
console.log('kilnInfo',kilnInfo);
const infos = kilnInfo.forecastDayChart.map((ele) => {
return {
label:ele.lineName,
value: ele.yield,
}
})
return (
<BottomBarItem title="预期结果" icon="forecast" className={cls.leftBar__middle}>
<div className={cls.leftBar__middle__content}>
{infos.map((item) => (
<div key={item.label} className={`${cls.info__item}`}>
<span className={cls.square}></span>
<span className={cls.label}>{item.label}</span>
<span className={cls.line}></span>
<span className={cls.value}>{ (item.value * 100).toFixed(2) + '%'}</span>
{/* {item.label}: {item.value} */}
</div>
))}
</div>
</BottomBarItem>
);
}
export default LeftMiddleForecast;

51
src/components/Modules/KilnOptimize/components/leftBottomForecast/index.module.css Normal file
View File

@ -0,0 +1,51 @@
.leftBar__middle {
width: 100%;
height: 422px;
.leftBar__middle__content {
flex: 1;
height: 1px;
display: grid;
grid-template-rows: auto 1fr 1fr;
gap: 10px;
padding-top: 18px;
.info__item {
/* width: 100%; */
background: url('../../../../../assets/forecastBack.png') no-repeat;
background-size: 100% 100%;
position: relative;
/* width: 220px; */
height: 45px;
/* background: rgba(10,154,255,0.15); */
/* box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5); */
/* border: 1px solid; */
color: #58E7E9;
/* border-image: linear-gradient(80deg, rgba(0, 255, 245, 0.55), rgba(0, 255, 245, 0)) 1 1; */
font-size: 20px;
letter-spacing: 1.43px;
line-height: 40px;
text-align: center;
user-select: none;
display: flex;
align-items: center;
gap: 12px;
.square{
/* flex: 1; */
margin-left: 20px;
width: 6px;
height: 6px;
background: #00FFF5;
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5), 0px 0px 4px 1px #58E7E9;
}
.label {
/* flex:1; */
text-align: left;
/* position: relative; */
}
.value {
width: 320px;
/* flex: 1; */
text-align: right;
}
}
}
}

48
src/components/Modules/KilnOptimize/components/leftMiddleForecast/index.jsx Normal file
View File

@ -0,0 +1,48 @@
/*
* @Author: zhp
* @Date: 2024-08-23 15:31:44
* @LastEditTime: 2024-08-30 10:05:40
* @LastEditors: zhp
* @Description:
*/
import cls from "./index.module.css";
import BottomBarItem from "../../../../Common/BottomItemBackgroundForecastTop";
import { useSelector } from "react-redux";
import { stateNameMap } from "../../../../../store/features/bottomTe";
function LeftMiddleForecast() {
const kilnInfo = useSelector((state) => state.temperature.top);
console.log(kilnInfo);
const infos = Object.keys(kilnInfo).map((key) => ({
label: key,
value: kilnInfo[key],
}));
const infoList = [infos[1], infos[5], infos[10], infos[16],infos[19]]
console.log('infoList',infoList);
return (
<BottomBarItem title="池底温度" icon="kilnBottom" className={cls.leftBar__middle}>
<div className={cls.leftBar__middle__content}>
{/* {infos.map((item) => ( */}
<div key={infoList[0].label} className={`${cls.span}`}>
<span className={cls.square}></span>
<span className={cls.label}>{infos[0].label}</span>
<span className={cls.line}></span>
<span className={cls.value}>{infos[0].label}</span>
{/* {item.label}: {item.value} */}
</div>
{/* ))} */}
{infoList.slice(1).map((item) => (
<div key={item.label} className={`${cls.info__item}`}>
<span className={cls.square}></span>
<span className={cls.label}>{item.label}</span>
<span className={cls.line}></span>
<span className={cls.value}>{item.value}</span>
{/* {item.label}: {item.value} */}
</div>
))}
</div>
</BottomBarItem>
);
}
export default LeftMiddleForecast;

130
src/components/Modules/KilnOptimize/components/leftMiddleForecast/index.module.css Normal file
View File

@ -0,0 +1,130 @@
.leftBar__middle {
width: 100%;
height: 261px;
/* height: 261px; */
/* background: url('../../../../../assets/ItemBg.png') no-repeat; */
.leftBar__middle__content {
flex: 1;
height: 1px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 10px;
padding-top: 18px;
.span{
grid-column: span 2;
position: relative;
/* width: 220px; */
height: 45px;
background: rgba(10,154,255,0.15);
/* box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5); */
border: 1px solid;
color: #58E7E9;
border-image: linear-gradient(80deg, rgba(0, 255, 245, 0.55), rgba(0, 255, 245, 0)) 1 1;
font-size: 20px;
letter-spacing: 1.43px;
line-height: 40px;
text-align: center;
user-select: none;
display: flex;
align-items: center;
gap: 12px;
.square{
/* flex: 1; */
margin-left: 20px;
width: 6px;
height: 6px;
background: #00FFF5;
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5), 0px 0px 4px 1px #58E7E9;
}
.label {
flex: 1;
text-align: right;
position: relative;
}
.label::after{
content: '';
position:absolute;
/* width: 3px; */
left: 110%;
width: 3px;
top: 30%;
height: 24px;
background: linear-gradient( 360deg, rgba(0,187,255,0) 0%, #00BBFF 100%);
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5);
backdrop-filter: blur(3px);
}
.value {
flex: 5;
text-align: left;
}
}
.info__item {
position: relative;
/* width: 220px; */
height: 45px;
background: rgba(10,154,255,0.15);
/* box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5); */
border: 1px solid;
color: #58E7E9;
border-image: linear-gradient(80deg, rgba(0, 255, 245, 0.55), rgba(0, 255, 245, 0)) 1 1;
font-size: 20px;
letter-spacing: 1.43px;
line-height: 40px;
text-align: center;
user-select: none;
display: flex;
align-items: center;
gap: 12px;
.square{
/* flex: 1; */
margin-left: 20px;
width: 6px;
height: 6px;
background: #00FFF5;
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5), 0px 0px 4px 1px #58E7E9;
}
.label {
flex: 2;
text-align: right;
position: relative;
}
.label::after{
content: '';
position:absolute;
/* width: 3px; */
left: 110%;
width: 3px;
top: 30%;
height: 24px;
background: linear-gradient( 360deg, rgba(0,187,255,0) 0%, #00BBFF 100%);
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5);
backdrop-filter: blur(3px);
}
.value {
flex: 3;
text-align: left;
}
}
.info__item::before{
content: '';
position:absolute;
width: 3px;
left: -5%;
height: 45px;
background: linear-gradient( 360deg, rgba(0,187,255,0) 0%, #00BBFF 100%);
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5);
backdrop-filter: blur(3px);
}
.span::before{
content: '';
position:absolute;
width: 3px;
left: -2.3%;
height: 45px;
background: linear-gradient( 360deg, rgba(0,187,255,0) 0%, #00BBFF 100%);
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5);
backdrop-filter: blur(3px);
}
}
}

39
src/components/Modules/KilnOptimize/components/leftTopForecast/index.jsx Normal file
View File

@ -0,0 +1,39 @@
/*
* @Author: zhp
* @Date: 2024-08-23 15:31:44
* @LastEditTime: 2024-08-30 10:03:33
* @LastEditors: zhp
* @Description:
*/
import cls from "./index.module.css";
import BottomBarItem from "../../../../Common/BottomItemBackgroundForecastTop";
import { useSelector } from "react-redux";
// import { stateNameMap } from "../../../../../store/features/crownTe";
function LeftTopForecast() {
const kilnInfo = useSelector((state) => state.temperature.top);
console.log(kilnInfo);
const infos = Object.keys(kilnInfo).map((key) => ({
label: key,
value: kilnInfo[key],
}));
const infoList = [infos[1], infos[5], infos[10], infos[16]]
console.log('infoList',infoList);
return (
<BottomBarItem title="碹顶温度" icon="kilnTop" className={cls.leftBar__top}>
<div className={cls.leftBar__top__content}>
{infoList.map((item) => (
<div key={item.label} className={cls.info__item}>
<span className={cls.square}></span>
<span className={cls.label}>{item.label}</span>
<span className={cls.line}></span>
<span className={cls.value}>{item.value}</span>
{/* {item.label}: {item.value} */}
</div>
))}
</div>
</BottomBarItem>
);
}
export default LeftTopForecast;

72
src/components/Modules/KilnOptimize/components/leftTopForecast/index.module.css Normal file
View File

@ -0,0 +1,72 @@
.leftBar__top {
width: 100%;
height: 200px;
/* background: url('../../../../../assets/ItemBg.png') no-repeat; */
/* background-size: 100% 100%; */
.leftBar__top__content {
flex: 1;
height: 1px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding-top: 18px;
.info__item {
position: relative;
/* width: 220px; */
height: 45px;
background: rgba(10,207,255,0.15);
/* box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5); */
border: 1px solid;
color: #58E7E9;
border-image: linear-gradient(80deg, rgba(0, 255, 245, 0.55), rgba(0, 255, 245, 0)) 1 1;
font-size: 20px;
letter-spacing: 1.43px;
line-height: 40px;
text-align: center;
user-select: none;
display: flex;
align-items: center;
gap: 12px;
.square{
/* flex: 1; */
margin-left: 20px;
width: 6px;
height: 6px;
background: #00FFF5;
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5), 0px 0px 4px 1px #58E7E9;
}
.label {
flex: 2;
text-align: right;
position: relative;
}
.label::after{
content: '';
position:absolute;
/* width: 3px; */
left: 110%;
width: 3px;
top: 30%;
height: 24px;
background: linear-gradient( 360deg, rgba(0,255,251,0) 0%, #00FFF5 100%);
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5);
backdrop-filter: blur(3px);
}
.value {
flex: 3;
text-align: left;
}
}
.info__item::before{
content: '';
position:absolute;
width: 3px;
left: -5%;
height: 45px;
background: linear-gradient( 360deg, rgba(0,255,251,0) 0%, #00FFF5 100%);
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5);
backdrop-filter: blur(3px);
}
}
}

36
src/components/Modules/KilnOptimize/components/paramsInput/index.jsx Normal file
View File

@ -0,0 +1,36 @@
/*
* @Author: zhp
* @Date: 2024-08-20 14:09:17
* @LastEditTime: 2024-08-30 14:53:39
* @LastEditors: zhp
* @Description:
*/
// 窑炉预测控制参数输入
import cls from "./index.module.css";
import BottomBarItem from "../../../../Common/forecastLargeBackground";
// import CommonChart from "../CommonChart";
import DayNightToggle from "../dayButton";
import SeasonToggle from "../seasonButton";
import InputDataToggle from "../inputData";
function paramsInput(props) {
const handleClick = () => {
props.onSendValueToParent(true);
};
return (
<BottomBarItem icon="kilnPress" title="控制参数输入" style={props.style}>
<div className={cls.legend}>
<DayNightToggle style={{ flex: 1, width: '100%', marginTop: '24px' }} />
</div>
<div className={cls.middle}>
<SeasonToggle style={{ flex: 1, width: '100%', }} />
<InputDataToggle style={{ flex: 1, width: '100%', }} />
</div>
<div className={cls.bottom}>
<div className={cls.bottomButton} onClick={handleClick}>
执行模拟
</div>
</div>
</BottomBarItem>
);
}
export default paramsInput;

52
src/components/Modules/KilnOptimize/components/paramsInput/index.module.css Normal file
View File

@ -0,0 +1,52 @@
/* .chart {
height: 100%;
} */
.legend {
position: absolute;
right: 25px;
top: 40px;
}
.middle {
margin-top: 70px;
display: flex;
justify-content: space-around;
/* width: 10%; */
/* position: absolute;
left: 225px;
top: 40px; */
}
.bottom{
/* height: 100%; */
margin-top: 20px;
/* display: flex; */
/* justify-content: center; */
}
.bottomButton{
cursor: pointer;
user-select: none;
padding:15px 10px;
font-size: 32px;
line-height: 48px;
text-align: center;
letter-spacing: 6px;
background: url(../../../../../assets/modelButton.png) no-repeat;
background-size: 100% 90%;
background-position: bottom;
color: #00fff788;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Microsoft YaHei UI',
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
}
/* .item{
display: inline-block;
margin-right: 10px;
font-size: 11px;
color: #DFF1FE;
}
.block {
width: 8px;
height: 8px;
border-radius: 2px;
display: inline-block;
margin-right: 4px;
} */

65
src/components/Modules/KilnOptimize/components/seasonButton/index.jsx Normal file
View File

@ -0,0 +1,65 @@
/*
* @Author: zhp
* @Date: 2024-08-22 14:00:57
* @LastEditTime: 2024-08-22 14:33:33
* @LastEditors: zhp
* @Description:
*/
import React, { useState } from'react';
import cls from "./index.module.css";
function SeasonToggle() {
const [season, setSeason] = useState(1);
// const preFloor = useRef();
function onSeasonUpdate(season) {
// preFloor.current = floor;
setSeason(season);
// onFloorChange(flr);
}
return (
<div
className="subMenu"
style={{
display: "flex",
width:"10%",
// marginBottom: "24px",
flexDirection: "column",/* 这行设置为垂直布局 */
}}
>
<div
className={
"season season1 " + cls.menuItem + " " + (season === 1 ? cls.active : "")
}
onClick={() => onSeasonUpdate(1)}
>
春季
</div>
<div
className={
"season season2 " + cls.menuItem + " " + (season === 2 ? cls.active : "")
}
onClick={() => onSeasonUpdate(2)}
>
夏季
</div>
<div
className={
"season season3 " + cls.menuItem + " " + (season === 3 ? cls.active : "")
}
onClick={() => onSeasonUpdate(3)}
>
夏季
</div>
<div
className={
"season season4 " + cls.menuItem + " " + (season === 4 ? cls.active : "")
}
onClick={() => onSeasonUpdate(4)}
>
夏季
</div>
</div>
);
}
export default SeasonToggle;

30
src/components/Modules/KilnOptimize/components/seasonButton/index.module.css Normal file
View File

@ -0,0 +1,30 @@
.menuItem {
/* transition: all 0.3s ease-out; */
cursor: pointer;
user-select: none;
padding:40px 35px;
font-size: 32px;
display: flex;
align-items: center;
justify-content: center;
writing-mode: vertical-lr;
line-height: 48px;
letter-spacing: 6px;
background: url(../../../../../assets/seasonChange.png) no-repeat;
background-size: 90% 100%;
background-position: bottom;
color: #00fff788;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Microsoft YaHei UI',
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
}
.menuItem.active,
.menuItem:hover {
background: url(../../../../../assets/seasonActive.png) no-repeat;
background-size: 100% 100%;
}
.menuItem:not(:first-child) {
margin-top:20px;
}

10
src/components/Modules/KilnOptimize/forecastRightSide/contextFile.jsx Normal file
View File

@ -0,0 +1,10 @@
/*
* @Author: zhp
* @Date: 2024-08-30 15:22:59
* @LastEditTime: 2024-08-30 15:22:59
* @LastEditors: zhp
* @Description:
*/
import React from'react';
export const ValueContext = React.createContext();

53
src/components/Modules/KilnOptimize/forecastRightSide/index.jsx Normal file
View File

@ -0,0 +1,53 @@
/*
* @Author: zhp
* @Date: 2024-08-23 13:56:11
* @LastEditTime: 2024-08-30 16:30:35
* @LastEditors: zhp
* @Description:
*/
import React, { useContext } from'react';
import KilnTopForecast from '../components/KilnTopForecast';
import KilnBottomForecast from '../components/KilnBottomForecast';
import KilnMiddleForecast from '../components/KilnMiddleForecast';
import LeftBottomForecast from '../components/leftBottomForecast';
import LeftTopForecast from '../components/leftTopForecast';
import LeftMiddleForecast from '../components/leftMiddleForecast';
import { motion } from 'framer-motion';
import { ValueContext } from './contextFile';
import cls from './index.module.scss';
export default function Index() {
return (
<div className={cls.forecast}>
<motion.div
className={cls.leftBar}
initial={{ opacity: 0, position: 'absolute' }}
animate={{ opacity: 1, position: 'relative' }}
exit={{ opacity: 0, position: 'relative' }}
transition={{ type: 'tween' }}
>
<div style={{ height: '200px', marginTop: '24px' }}>
<LeftTopForecast/>
</div>
<div style={{ height: '261px', marginTop: '24px' }}>
<LeftMiddleForecast />
</div>
<div style={{ flex: 1,marginTop: '24px' }}>
<LeftBottomForecast/>
</div>
</motion.div>
<motion.div
className={cls.leftBar}
initial={{ opacity: 0, position: 'absolute' }}
animate={{ opacity: 1, position: 'relative' }}
exit={{ opacity: 0, position: 'relative' }}
transition={{ type: 'tween' }}
>
<KilnTopForecast style={{ flex: 1, width: '100%', marginTop: '24px' }} />
<KilnMiddleForecast style={{ flex: 1, width: '100%', marginTop: '24px' }} />
<KilnBottomForecast style={{ flex: 1, width: '100%', marginTop: '24px' }} />
</motion.div>
</div>
);
}

14
src/components/Modules/KilnOptimize/forecastRightSide/index.module.scss Normal file
View File

@ -0,0 +1,14 @@
.leftBar {
width: 501px;
height: 966px;
// margin-left: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.forecast{
display: flex;
justify-content: space-between;
gap: 16px;
}

14
src/hooks/useIcon.js
View File

@ -1,3 +1,10 @@
/*
* @Author: zhp
* @Date: 2024-08-20 14:09:17
* @LastEditTime: 2024-08-26 15:28:43
* @LastEditors: zhp
* @Description:
*/
import IconStack from '../assets/Icon/icon-stack.png'; import IconStack from '../assets/Icon/icon-stack.png';
import IconGood from '../assets/Icon/icon-good.png'; import IconGood from '../assets/Icon/icon-good.png';
import IconCharger from '../assets/Icon/icon-charge.png'; import IconCharger from '../assets/Icon/icon-charge.png';
@ -11,6 +18,9 @@ import IconKilnPress from '../assets/Icon/kilnPress.png';
import IconLiquidTrend from '../assets/Icon/liquidTrend.png'; import IconLiquidTrend from '../assets/Icon/liquidTrend.png';
import IconKilnTop from '../assets/Icon/kilnTop.png'; import IconKilnTop from '../assets/Icon/kilnTop.png';
import IconKilnBottom from '../assets/Icon/kilnBottom.png'; import IconKilnBottom from '../assets/Icon/kilnBottom.png';
import yieldRate from '../assets/Icon/yieldRate.png';
import forecast from '../assets/Icon/forecast.png';
function useIcon(iconName) { function useIcon(iconName) {
// const icon = require(`../assets/icons/${iconName}.svg`).default; // const icon = require(`../assets/icons/${iconName}.svg`).default;
@ -37,8 +47,12 @@ function useIcon(iconName) {
? IconLiquidTrend ? IconLiquidTrend
: iconName == 'kilnTop' : iconName == 'kilnTop'
? IconKilnTop ? IconKilnTop
: iconName == 'forecast'
? forecast
: iconName == 'kilnBottom' : iconName == 'kilnBottom'
? IconKilnBottom ? IconKilnBottom
: iconName == 'yieldRate'
? yieldRate
: IconDefault; : IconDefault;
} }

38
src/index.css
View File

@ -70,6 +70,44 @@ body {
margin-top: -05px; margin-top: -05px;
} }
#FullScreen .Main .InputCenter {
margin: 22px;
width: 2072px;
height: 940px;
position: relative;
}
#FullScreen .Main .InputCenter .CenterData {
position: absolute;
width: 2072px;
height: 240px;
z-index: 2;
}
#FullScreen .Main .InputCenter .V3DBG {
position: absolute;
background: #f004;
width: 2072px;
height: 640px;
z-index: 1;
}
#FullScreen .Main .InputCenter .V3DBorder {
width: 100%;
height: 486px;
margin-top: 160px;
/* background: url(./assets/moxing.png) no-repeat; */
background-position: 50% 50%;
background-size: 170% 200%;
position: relative;
z-index: -1;
}
#FullScreen .Main .InputCenter .Button {
width: 100%;
height: 306px;
margin-top: -05px;
}
.bgDitu { .bgDitu {
position: absolute; position: absolute;
z-index: -1000; z-index: -1000;

41
src/pages/Home/index.jsx
View File

@ -8,24 +8,37 @@ import KilnInnerLeft from "../../components/Modules/KilnInner/LeftSide"; // 窑
import KilnInnerRight from "../../components/Modules/KilnInner/RightSide"; // 窑炉内部右侧内容 import KilnInnerRight from "../../components/Modules/KilnInner/RightSide"; // 窑炉内部右侧内容
import OptimizeCenter from "../../components/Modules/KilnOptimize/Center"; // 窑炉优化 import OptimizeCenter from "../../components/Modules/KilnOptimize/Center"; // 窑炉优化
import KilnOptimizeLeft from "../../components/Modules/KilnOptimize/LeftSide"; // 窑炉优化左侧内容 import KilnOptimizeLeft from "../../components/Modules/KilnOptimize/LeftSide"; // 窑炉优化左侧内容
import KilnOptimizeLeftForecast from "../../components/Modules/KilnOptimize/LeftSide/indexForecast"; // 窑炉优化左侧内容
import KilnOptimizeRight from "../../components/Modules/KilnOptimize/RightSide"; // 窑炉优化右侧内容 import KilnOptimizeRight from "../../components/Modules/KilnOptimize/RightSide"; // 窑炉优化右侧内容
import KilnOptimizeRightForecast from "../../components/Modules/KilnOptimize/forecastRightSide"; // 窑炉优化右侧内容
import FireCheckLeft from "../../components/Modules/FireCheck/LeftSide"; // 退火监测 - 左边 import FireCheckLeft from "../../components/Modules/FireCheck/LeftSide"; // 退火监测 - 左边
import QualityCheckLeft from "../../components/Modules/QualityCheck/LeftSide"; // 质检统计 - 左边 import QualityCheckLeft from "../../components/Modules/QualityCheck/LeftSide"; // 质检统计 - 左边
import FireCheckRight from "../../components/Modules/FireCheck/RightSide";// 退火监测 - 右边 import FireCheckRight from "../../components/Modules/FireCheck/RightSide";// 退火监测 - 右边
import QualityCheckRight from "../../components/Modules/QualityCheck/RightSide";// 质检统计 - 右边 import QualityCheckRight from "../../components/Modules/QualityCheck/RightSide";// 质检统计 - 右边
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { useEffect, useRef } from "react"; import { useEffect, useRef,useState,createContext } from "react";
import useRefresh from "../../hooks/useRefresh"; import useRefresh from "../../hooks/useRefresh";
import TimeFireDir from "../../components/Common/TimeFireDir"; import TimeFireDir from "../../components/Common/TimeFireDir";
import WarnAlertList from "../../components/Common/WarnAlert/ListContainer"; import WarnAlertList from "../../components/Common/WarnAlert/ListContainer";
export const HomeContext = createContext();
export default function Home({ active }) { export default function Home({ active }) {
useRefresh(true); useRefresh(true);
const videoUp = useRef(null); const videoUp = useRef(null);
const videoDown = useRef(null); const videoDown = useRef(null);
const [floor, setFloor] = useState(null);
const handleFloorChangeFromKilnCenter = (newFloor) => {
console.log(newFloor)
setFloor(newFloor);
};
const [modelFlag, setModelFlag] = useState(false);
const handleValueFromGrandChild = (value) => {
setModelFlag(value);
console.log(modelFlag);
};
const ctx = useSelector((state) => state.fireInfo); const ctx = useSelector((state) => state.fireInfo);
const fireDir = ctx.fireDirection || null; const fireDir = ctx.fireDirection || null;
@ -66,13 +79,23 @@ export default function Home({ active }) {
> >
{active == "窑炉总览" && <LeftBar key="kiln-total" />} {active == "窑炉总览" && <LeftBar key="kiln-total" />}
{active == "窑炉内部" && <KilnInnerLeft key="kiln-inner" />} {active == "窑炉内部" && <KilnInnerLeft key="kiln-inner" />}
{active == "窑炉优化" && <KilnOptimizeLeft key="kiln-optimize" />} {active == "窑炉优化" && (
<>
{floor !== 4 && <KilnOptimizeLeft key="kiln-optimize" />}
{floor !== 0 &&
<KilnOptimizeLeftForecast onGetValueFromGrandChild={handleValueFromGrandChild} key="kiln-optimize-forecast" />
}
</>
)}
{/* {active == "窑炉优化" && <KilnOptimizeLeft key="kiln-optimize" />} */}
{active == "退火监测" && <FireCheckLeft key="fire-check" />} {active == "退火监测" && <FireCheckLeft key="fire-check" />}
{active == "质检统计" && <QualityCheckLeft key="quality-check" />} {active == "质检统计" && <QualityCheckLeft key="quality-check" />}
</div> </div>
</AnimatePresence> </AnimatePresence>
<div className="Center"> <div className={
(floor === 4 && active === '窑炉优化' ? 'InputCenter' : "Center")
}>
{active == "窑炉总览" && ( {active == "窑炉总览" && (
<> <>
<div id="alarm-list-container"> <div id="alarm-list-container">
@ -135,7 +158,7 @@ export default function Home({ active }) {
{active == "窑炉内部" && <KilnCenter />} {active == "窑炉内部" && <KilnCenter />}
{active == "窑炉优化" && <OptimizeCenter />} {active == "窑炉优化" && <OptimizeCenter onFloorChange={handleFloorChangeFromKilnCenter} />}
{active == "退火监测" && <div className="bgFire"></div>} {active == "退火监测" && <div className="bgFire"></div>}
@ -144,7 +167,15 @@ export default function Home({ active }) {
{active == "窑炉总览" && <RightBar key="right-bar" />} {active == "窑炉总览" && <RightBar key="right-bar" />}
{active == "窑炉内部" && <KilnInnerRight key="kiln-inner-right" />} {active == "窑炉内部" && <KilnInnerRight key="kiln-inner-right" />}
{active == "窑炉优化" && <KilnOptimizeRight key="kiln-optimize-right" />} {active == "窑炉优化" && (
<>
{floor !== 4 && <KilnOptimizeRight key="kiln-optimize-right" />}
<HomeContext.Provider value={modelFlag}>
{floor === 4 && <KilnOptimizeRightForecast value={modelFlag} key="kiln-optimize-right-forecast" />}
</HomeContext.Provider>
</>
)}
{/* {active == "窑炉优化" && <KilnOptimizeRight key="kiln-optimize-right" />} */}
{active == "退火监测" && <FireCheckRight key="kiln-fire-check-right" />} {active == "退火监测" && <FireCheckRight key="kiln-fire-check-right" />}
{active == "质检统计" && <QualityCheckRight key="kiln-quality-right" />} {active == "质检统计" && <QualityCheckRight key="kiln-quality-right" />}
</div> </div>

46
src/store/features/bottomTe.js Normal file
View File

@ -0,0 +1,46 @@
/*
* @Author: zhp
* @Date: 2024-08-26 14:09:29
* @LastEditTime: 2024-08-26 14:10:10
* @LastEditors: zhp
* @Description:
*/
/*
* @Author: zhp
* @Date: 2024-08-26 09:20:25
* @LastEditTime: 2024-08-26 09:33:23
* @LastEditors: zhp
* @Description:
*/
import { createSlice } from "@reduxjs/toolkit";
export const initialState = {
kilnPressure: "0Pa",
waterTemp: "0℃",
waterFlow: "0m³/h",
waterPressure: "0Pa",
area: "0Pa",
};
export const stateNameMap = {
kilnPressure: "区域1",
waterTemp: "区域2",
waterFlow: "区域3",
waterPressure: "区域4",
area: "区域1",
};
const kilnSlice = createSlice({
name: "kiln",
initialState,
reducers: {
setKilnInfo: (state, action) => {
Object.keys(action.payload).forEach((key) => {
state[key] = action.payload[key];
});
},
},
});
export default kilnSlice.reducer;
export const { setKilnInfo } = kilnSlice.actions;

37
src/store/features/crownTe.js Normal file
View File

@ -0,0 +1,37 @@
/*
* @Author: zhp
* @Date: 2024-08-26 09:20:25
* @LastEditTime: 2024-08-26 09:33:23
* @LastEditors: zhp
* @Description:
*/
import { createSlice } from "@reduxjs/toolkit";
export const initialState = {
kilnPressure: "0Pa",
waterTemp: "0℃",
waterFlow: "0m³/h",
waterPressure: "0Pa",
};
export const stateNameMap = {
kilnPressure: "区域1",
waterTemp: "区域2",
waterFlow: "区域3",
waterPressure: "区域4",
};
const kilnSlice = createSlice({
name: "kiln",
initialState,
reducers: {
setKilnInfo: (state, action) => {
Object.keys(action.payload).forEach((key) => {
state[key] = action.payload[key];
});
},
},
});
export default kilnSlice.reducer;
export const { setKilnInfo } = kilnSlice.actions;

14
src/store/features/cuttingSlice.js
View File

@ -1,3 +1,10 @@
/*
* @Author: zhp
* @Date: 2024-08-20 14:08:32
* @LastEditTime: 2024-08-28 11:17:38
* @LastEditors: zhp
* @Description:
*/
import { createSlice } from "@reduxjs/toolkit"; import { createSlice } from "@reduxjs/toolkit";
export const initialState = { export const initialState = {
@ -10,6 +17,8 @@ export const initialState = {
month: [], month: [],
day: [], day: [],
}, },
forecastDayChart:[],
forecastWeeklyChart:[],
}; };
const cuttingSlice = createSlice({ const cuttingSlice = createSlice({
@ -30,12 +39,15 @@ const cuttingSlice = createSlice({
break; break;
case "weekly": case "weekly":
state.chart.week = action.payload.detData; state.chart.week = action.payload.detData;
state.forecastWeeklyChart = action.payload.detData;
break; break;
case "month": case "month":
state.chart.month = action.payload.detData; state.chart.month = action.payload.detData;
break; break;
case "day": case "day":
state.chart.day = action.payload.detData; state.chart.day = action.payload.detData;
if ("prediction" in action.payload)
state.forecastDayChart = action.payload.prediction;
break; break;
} }
}, },
@ -43,4 +55,4 @@ const cuttingSlice = createSlice({
}); });
export default cuttingSlice.reducer; export default cuttingSlice.reducer;
export const { setCuttingTable, setCuttingChart } = cuttingSlice.actions; export const { setCuttingTable, setCuttingChart,setForecastDayChart } = cuttingSlice.actions;

12
src/store/features/kilnOptimizeSlice.js
View File

@ -91,7 +91,9 @@ export const initialState = {
pressureAvg:{}, pressureAvg:{},
liquidAvg:{}, liquidAvg:{},
bottomTempAvg:{}, bottomTempAvg:{},
topTempAvg:{} topTempAvg: {},
topTempAvgFor1h: {},
bottomTempAvgFor1h:{},
}; };
const kilnOptimizeSlice = createSlice({ const kilnOptimizeSlice = createSlice({
@ -151,9 +153,15 @@ const kilnOptimizeSlice = createSlice({
}, },
setTopTempAvg: (state, action) => { setTopTempAvg: (state, action) => {
state.topTempAvg = action.payload; state.topTempAvg = action.payload;
},
topTempAvgFor1h: (state, action) => {
state.topTempAvgFor1h = action.payload;
},
bottomTempAvgFor1h: (state, action) => {
state.bottomTempAvgFor1h = action.payload;
} }
}, },
}); });
export default kilnOptimizeSlice.reducer; export default kilnOptimizeSlice.reducer;
export const { setPressureAvg, setLiquidAvg,setBottomTempAvg,setTopTempAvg} = kilnOptimizeSlice.actions; export const { setPressureAvg, setLiquidAvg,setBottomTempAvg,setTopTempAvg,topTempAvgFor1h,bottomTempAvgFor1h} = kilnOptimizeSlice.actions;

9
src/store/features/kilnSlice.js
View File

@ -1,3 +1,10 @@
/*
* @Author: zhp
* @Date: 2024-08-20 14:08:32
* @LastEditTime: 2024-08-30 09:50:00
* @LastEditors: zhp
* @Description:
*/
import { createSlice } from "@reduxjs/toolkit"; import { createSlice } from "@reduxjs/toolkit";
export const initialState = { export const initialState = {
@ -9,6 +16,7 @@ export const initialState = {
topTemp: "0℃", topTemp: "0℃",
compressedAirPressure: "0Pa", compressedAirPressure: "0Pa",
meltTemp: "0℃", meltTemp: "0℃",
liquidLevel:"0",
}; };
export const stateNameMap = { export const stateNameMap = {
@ -20,6 +28,7 @@ export const stateNameMap = {
topTemp: "碹顶加权温度", topTemp: "碹顶加权温度",
compressedAirPressure: "压缩气压力", compressedAirPressure: "压缩气压力",
meltTemp: "熔化加权温度", meltTemp: "熔化加权温度",
liquidLevel:"液位",
}; };
const kilnSlice = createSlice({ const kilnSlice = createSlice({

Some files were not shown because too many files have changed in this diff Show More