init
This commit is contained in:
commit
3c69bc58bf
16
.editorconfig
Normal file
16
.editorconfig
Normal file
@ -0,0 +1,16 @@
|
||||
# http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[Makefile]
|
||||
indent_style = tab
|
||||
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@ -0,0 +1,23 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/npm-debug.log*
|
||||
/yarn-error.log
|
||||
/yarn.lock
|
||||
/package-lock.json
|
||||
|
||||
# production
|
||||
/dist
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
|
||||
# umi
|
||||
/src/.umi
|
||||
/src/.umi-production
|
||||
/src/.umi-test
|
||||
/.env.local
|
||||
|
||||
|
||||
v3dApp/
|
||||
8
.prettierignore
Normal file
8
.prettierignore
Normal file
@ -0,0 +1,8 @@
|
||||
**/*.md
|
||||
**/*.svg
|
||||
**/*.ejs
|
||||
**/*.html
|
||||
package.json
|
||||
.umi
|
||||
.umi-production
|
||||
.umi-test
|
||||
11
.prettierrc
Normal file
11
.prettierrc
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all",
|
||||
"printWidth": 80,
|
||||
"overrides": [
|
||||
{
|
||||
"files": ".prettierrc",
|
||||
"options": { "parser": "json" }
|
||||
}
|
||||
]
|
||||
}
|
||||
30
.umirc.ts
Normal file
30
.umirc.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import { defineConfig } from 'umi';
|
||||
|
||||
export default defineConfig({
|
||||
nodeModulesTransform: {
|
||||
type: 'none',
|
||||
},
|
||||
routes: [
|
||||
{ path: '/', component: '@/pages/index' },
|
||||
],
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:3000',
|
||||
changeOrigin: true,
|
||||
pathRewrite: { '^/api': '' },
|
||||
},
|
||||
},
|
||||
|
||||
fastRefresh: {},
|
||||
chainWebpack(conf) {
|
||||
// ....other config
|
||||
conf.module
|
||||
.rule('mjs$')
|
||||
.test(/\.mjs$/)
|
||||
.include
|
||||
.add(/node_modules/)
|
||||
.end()
|
||||
.type('javascript/auto');
|
||||
},
|
||||
|
||||
});
|
||||
15
README.md
Normal file
15
README.md
Normal file
@ -0,0 +1,15 @@
|
||||
# umi project
|
||||
|
||||
## Getting Started
|
||||
|
||||
Install dependencies,
|
||||
|
||||
```bash
|
||||
$ yarn
|
||||
```
|
||||
|
||||
Start the dev server,
|
||||
|
||||
```bash
|
||||
$ yarn start
|
||||
```
|
||||
49
package.json
Normal file
49
package.json
Normal file
@ -0,0 +1,49 @@
|
||||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "umi dev",
|
||||
"build": "umi build",
|
||||
"postinstall": "umi generate tmp",
|
||||
"prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
|
||||
"test": "umi-test",
|
||||
"test:coverage": "umi-test --coverage"
|
||||
},
|
||||
"gitHooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx,less,md,json}": [
|
||||
"prettier --write"
|
||||
],
|
||||
"*.ts?(x)": [
|
||||
"prettier --parser=typescript --write"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^4.7.0",
|
||||
"@jiaminghi/data-view-react": "^1.2.5",
|
||||
"antd": "^4.20.6",
|
||||
"echarts": "^5.3.2",
|
||||
"echarts-for-react": "^3.0.2",
|
||||
"framer-motion": "^6.3.3",
|
||||
"less": "^4.1.3",
|
||||
"less-loader": "^11.0.0",
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"style-components": "^0.1.0",
|
||||
"styled-components": "^5.3.5",
|
||||
"umi": "^3.5.23"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/runtime": "^7.18.0",
|
||||
"@types/react": "^17.0.0",
|
||||
"@types/react-dom": "^17.0.0",
|
||||
"@umijs/preset-react": "1.x",
|
||||
"@umijs/test": "^3.5.23",
|
||||
"lint-staged": "^10.0.7",
|
||||
"prettier": "^2.2.0",
|
||||
"typescript": "^4.1.2",
|
||||
"yorkie": "^2.0.0"
|
||||
}
|
||||
}
|
||||
352
public/v3d.js
Normal file
352
public/v3d.js
Normal file
File diff suppressed because one or more lines are too long
11
src/Store/features/SliceBase.js
Normal file
11
src/Store/features/SliceBase.js
Normal file
@ -0,0 +1,11 @@
|
||||
class Stack {
|
||||
constructor() {
|
||||
this.items = []
|
||||
};
|
||||
push(value) {
|
||||
return this.items.push(value);
|
||||
};
|
||||
pop() {
|
||||
return this.items;
|
||||
};
|
||||
}
|
||||
0
src/Store/index.js
Normal file
0
src/Store/index.js
Normal file
BIN
src/assets/3D.png
Normal file
BIN
src/assets/3D.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 MiB |
BIN
src/assets/ButtonChart7Icon1.png
Normal file
BIN
src/assets/ButtonChart7Icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 869 B |
14
src/assets/ButtonChart7Icon1.svg
Normal file
14
src/assets/ButtonChart7Icon1.svg
Normal file
@ -0,0 +1,14 @@
|
||||
<?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>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="大屏" transform="translate(-5444.000000, -790.000000)" fill-rule="nonzero">
|
||||
<g id="编组-25备份-2" transform="translate(5420.000000, 709.000000)">
|
||||
<g id="水管" transform="translate(24.000000, 81.000000)">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
|
||||
<path d="M13.3588747,23.8585638 C13.7532735,23.8585638 14.0730263,24.1783252 14.0730263,24.5727154 C14.0730263,24.9342218 13.8043415,25.233032 13.4557765,25.2803233 L13.3588747,25.286843 L10.6642057,25.286843 C10.2698275,25.286843 9.95005406,24.9670783 9.95005406,24.5727154 C9.95005406,24.2111831 10.2187425,23.9123743 10.5673047,23.8650835 L10.6642057,23.8585638 L13.3588747,23.8585638 Z M6.18349159,7.62514607 C6.54500583,7.62514607 6.84380955,7.89383809 6.89109965,8.24239766 L6.89761923,8.33929768 L6.89761923,16.1327417 C6.89761923,18.9917725 9.22406717,21.3180383 12.0835154,21.3180383 C14.8691769,21.3180383 17.1491857,19.1094706 17.2642777,16.3515809 L17.2688359,16.1327417 L17.2688359,14.7482084 C17.2688359,13.2821404 18.4575317,12.0896711 19.9192667,12.0896711 C21.3293781,12.0896711 22.4865245,13.1921615 22.5734498,14.5803115 L22.5786915,14.7482084 L22.5786915,18.4129717 C22.5786915,18.8073619 22.2589627,19.1270994 21.8645638,19.1270994 C21.5030417,19.1270994 21.2042647,18.8584202 21.1569791,18.5098695 L21.1504602,18.4129717 L21.1504602,14.7482084 C21.1504602,14.069923 20.5981372,13.5179504 19.9192907,13.5179504 C19.2877541,13.5179504 18.7661709,14.0029965 18.7034399,14.6225979 L18.6971152,14.7482084 L18.6971152,16.1327431 C18.6970664,19.7795754 15.7303408,22.7462935 12.0835154,22.7462935 C8.51397236,22.7462935 5.59590461,19.904448 5.47334743,16.3645484 L5.46933998,16.1327177 L5.46933998,8.33929768 C5.46933998,7.94489885 5.78910139,7.62514607 6.18349159,7.62514607 Z M10.1391057,7.62514607 C10.500623,7.62514607 10.7994443,7.89384092 10.8467373,8.24239837 L10.8532573,8.33929768 L10.8532573,16.1327417 C10.8532573,16.811246 11.4051994,17.3632636 12.0834914,17.3632636 C12.7191782,17.3632636 13.2439808,16.8780586 13.307098,16.2583689 L13.3134617,16.1327417 L13.3134617,14.7482084 C13.3134617,11.1011078 16.27657,8.13429686 19.9192428,8.13429686 C23.4888324,8.13429686 26.4068326,10.976211 26.5293868,14.5163612 L26.5333942,14.7482084 L26.5333942,18.4129717 C26.5333942,18.8073456 26.2136577,19.1270994 25.8192665,19.1270994 C25.4577562,19.1270994 25.1589492,18.858411 25.1116586,18.5098672 L25.1051389,18.4129717 L25.1051389,14.7482084 C25.1051389,11.8889012 22.7787743,9.56262405 19.9192427,9.56262405 C17.1377144,9.56262405 14.8612073,11.7711721 14.7462921,14.5293462 L14.7417409,14.7482084 L14.7417409,16.1327417 C14.7417409,17.5988863 13.5493467,18.7915429 12.0834914,18.7915429 C10.6738022,18.7915429 9.51710874,17.6889041 9.43021766,16.3006508 L9.42497805,16.1327417 L9.42497805,8.33929768 C9.42497805,7.94489548 9.74471885,7.62514607 10.1391057,7.62514607 Z" id="形状结合" fill="#4DD2FE"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
BIN
src/assets/ButtonChart7Icon2.png
Normal file
BIN
src/assets/ButtonChart7Icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
17
src/assets/ButtonChart7Icon2.svg
Normal file
17
src/assets/ButtonChart7Icon2.svg
Normal file
@ -0,0 +1,17 @@
|
||||
<?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>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="大屏" transform="translate(-5887.000000, -789.000000)" fill-rule="nonzero">
|
||||
<g id="编组-25备份-2" transform="translate(5420.000000, 709.000000)">
|
||||
<g id="氢气" transform="translate(467.000000, 80.000000)">
|
||||
<g id="编组-27">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
|
||||
<path d="M15.8300132,6 C19.3162134,6 22.3562729,8.21924344 23.2982198,11.463727 L23.2982198,11.463727 L23.3521332,11.6494289 L23.5401045,11.6948013 L23.7765815,11.7564336 C26.669032,12.5666036 28.6600263,15.215386 28.6600263,18.2815414 C28.6600263,22.0464564 25.6281178,25.0783649 21.8632028,25.0783649 L21.8632028,25.0783649 L9.79682351,25.0783649 L9.56725392,25.0745961 C5.90941991,24.9543082 3,21.9696214 3,18.2815414 C3,15.132517 5.10007,12.423731 8.11992177,11.6948013 L8.11992177,11.6948013 L8.30789306,11.6494289 L8.36180652,11.463727 L8.43636068,11.2223317 C9.45603517,8.1096683 12.4309679,6 15.8300132,6 Z M15.8300132,7.52726775 C12.9179264,7.52726775 10.2728813,9.62269311 9.58241176,12.4996493 C9.50332061,12.8159528 9.26748105,13.0517924 8.94812355,13.1316318 C6.42196272,13.4740953 4.52726775,15.6845728 4.52726775,18.2815414 C4.52726775,21.2079821 6.87038274,23.5510971 9.79682351,23.5510971 L9.79682351,23.5510971 L21.8632028,23.5510971 L22.0712185,23.547136 C24.8998922,23.4391896 27.1327586,21.138305 27.1327586,18.2815414 C27.1327586,15.6845728 25.2380636,13.4740953 22.6760978,13.1247364 C22.3925453,13.0517924 22.1567057,12.8159528 22.0768663,12.4965953 C21.3871451,9.62269311 18.7420999,7.52726775 15.8300132,7.52726775 Z" id="形状结合" fill="#4DD2FE"></path>
|
||||
</g>
|
||||
<path d="M16.2799128,13 C16.5732619,13 16.8620795,13.3343183 16.9667945,13.7787622 L16.9667945,13.7787622 L16.9617185,19.2883603 L16.9566559,19.4027576 C16.9196395,19.8055051 16.6808359,20.0234437 16.2799128,20.0234437 C15.8829731,20.0234437 15.5981071,19.6936996 15.5981071,19.2883603 L15.5981071,19.2883603 L15.5981071,17.2468053 L13.3636114,17.2468053 L13.3636114,19.2883603 L13.3585488,19.4027576 C13.3215324,19.8055051 13.0827288,20.0234437 12.6818057,20.0234437 C12.284866,20.0234437 12,19.6936996 12,19.2883603 L12,19.2883603 L12,13.7350835 L12.0050626,13.6206861 C12.042079,13.2179387 12.2808826,13 12.6818057,13 C13.0787454,13 13.3636114,13.3297442 13.3636114,13.7350835 L13.3636114,13.7350835 L13.3636114,15.7766384 L15.5981071,15.7766384 L15.5981071,13.7350835 L15.6044227,13.6295523 C15.6502104,13.2534034 15.9391358,13 16.2799128,13 Z M18.5867987,16.4525186 C19.0475943,16.1332391 19.6386699,16.1883755 20.0665128,16.6423509 C20.3714291,16.8626653 20.538097,17.2458358 20.4569612,17.505142 L20.4569612,17.505142 L20.344127,17.8635438 C20.2452371,18.1497167 20.1371658,18.3318431 19.9860943,18.4387091 L19.9860943,18.4387091 L19.1147518,19.1317432 L20.4231876,19.1317432 L20.4716953,19.1383122 C20.5949966,19.1732299 20.6688591,19.3464168 20.6688591,19.6354401 C20.6688591,19.879772 20.5334576,20.0234437 20.314154,20.0234437 L20.314154,20.0234437 L18.0244495,20.0234437 L17.9464468,20.0163643 C17.81968,19.992924 17.7111495,19.9120676 17.6515741,19.7856393 C17.6697445,19.7502844 17.6710651,19.6935306 17.6770584,19.6267571 C17.6916825,19.4638258 17.7307503,19.370554 17.7866122,19.3409171 L17.7866122,19.3409171 L19.4714599,17.9149767 L19.5339119,17.8386585 C19.6055791,17.7366092 19.6323483,17.6349905 19.6323483,17.5529613 C19.6323483,17.4501105 19.6292211,17.4169278 19.6005488,17.3560807 C19.5956431,17.34567 19.5909943,17.3364876 19.5860044,17.3277248 L19.5860044,17.3277248 L19.5471841,17.2737123 L19.4714598,17.1909458 C19.2872403,16.9954742 19.0513632,16.9954742 18.8671437,17.1909458 L18.8671437,17.1909458 L18.5400431,17.5380256 L18.4813475,17.5563761 C18.353828,17.5829996 18.1720888,17.5476087 18.0540237,17.4223323 C17.99658,17.2783851 18.0204553,17.0250494 18.1630573,16.8737374 L18.1630573,16.8737374 L18.4901579,16.5266576 Z" id="形状结合" fill="#4DD2FE"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
BIN
src/assets/ButtonChart7ItemBg.png
Normal file
BIN
src/assets/ButtonChart7ItemBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
src/assets/CenterChart2ItemBg.png
Normal file
BIN
src/assets/CenterChart2ItemBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
26
src/assets/CenterChart2icon1.svg
Normal file
26
src/assets/CenterChart2icon1.svg
Normal file
@ -0,0 +1,26 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>217时间-线性</title>
|
||||
<defs>
|
||||
<filter x="-37.5%" y="-37.5%" width="175.0%" height="175.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="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="大屏" transform="translate(-4990.000000, -249.000000)" fill="url(#linearGradient-2)" fill-rule="nonzero">
|
||||
<g id="217时间-线性" filter="url(#filter-1)" transform="translate(4999.000000, 258.000000)">
|
||||
<path d="M16,1.6 C23.9460448,1.6 30.4,8.05395518 30.4,16 C30.4,23.9460448 23.9460448,30.4 16,30.4 C8.05395518,30.4 1.6,23.9460448 1.6,16 C1.6,8.05395518 8.05395518,1.6 16,1.6 Z M16,4.88722317 C9.86495453,4.88722317 4.88722317,9.86495453 4.88722317,16 C4.88722317,22.1350455 9.86495453,27.1127768 16,27.1127768 C22.1350455,27.1127768 27.1127768,22.1350455 27.1127768,16 C27.1127768,9.86495453 22.1350455,4.88722317 16,4.88722317 Z M16.0294265,7.78807438 C17.0230184,7.78807438 17.5855877,8.46206131 17.6393607,9.52946239 L17.6436116,9.70122787 L17.6436116,15.3219489 L22.5390914,18.1258595 L22.6982275,18.2531376 C23.2309886,18.8345811 23.3297441,19.5452248 22.9656969,20.2344077 C22.612546,20.902963 21.9860289,21.192737 21.2378137,21.070287 L21.0756744,21.037726 L20.8987082,20.9676172 L14.9586778,17.5556032 L14.8387144,17.4673926 C14.7077136,17.3461631 14.6058372,17.1980839 14.5326157,17.0292186 C14.4900581,16.931071 14.4510456,16.8115857 14.4124791,16.6655317 L14.3739463,16.5104279 L14.3563884,16.3589329 L14.3571204,9.67009722 C14.4115027,8.51431125 14.9983246,7.78807438 16.0294265,7.78807438 Z" id="形状结合"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
29
src/assets/CenterChart2icon2.svg
Normal file
29
src/assets/CenterChart2icon2.svg
Normal file
@ -0,0 +1,29 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>燃脂</title>
|
||||
<defs>
|
||||
<filter x="-37.5%" y="-37.5%" width="175.0%" height="175.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="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="大屏" transform="translate(-5195.000000, -136.000000)" fill-rule="nonzero">
|
||||
<g id="编组-32" transform="translate(5180.000000, 129.000000)">
|
||||
<g id="燃脂" filter="url(#filter-1)" transform="translate(24.000000, 16.000000)">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
|
||||
<path d="M27.9713882,14.2442728 C27.9302101,14.6047268 27.9302101,14.996073 27.9713882,15.3976363 L27.9713882,18.4354197 C27.9713882,23.9654205 24.1817358,28.6407275 19.0842248,30.0000156 L19.0842248,28.17738 C19.0842248,26.4678894 17.7043305,25.087995 16.0051602,25.087995 L15.9948398,25.087995 C14.2956351,25.087995 12.9054549,26.4678894 12.9054549,28.17738 L12.9054549,30.0000156 C7.80794394,28.6304416 4.02861183,23.9551002 4.02861183,18.4354197 L4.02861183,13.2247981 C5.39825464,14.3369836 7.23127939,16.3656814 7.11799678,19.1667513 C8.26103997,13.8942079 10.5266233,13.1012296 12.4420386,10.9283914 C14.9341871,8.09646384 15.6755982,4.98643827 14.2441712,2.00001563 C20.4435817,4.15228198 22.0500412,12.4730667 21.5351609,16.849704 C23.7698178,12.8849503 26.5811735,11.8242976 27.9713882,11.546234 L27.9713882,14.2442728 Z" id="路径" fill="url(#linearGradient-2)"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
29
src/assets/CenterChart2icon3.svg
Normal file
29
src/assets/CenterChart2icon3.svg
Normal file
@ -0,0 +1,29 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>沙漏</title>
|
||||
<defs>
|
||||
<filter x="-37.5%" y="-37.5%" width="175.0%" height="175.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="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="大屏" transform="translate(-5195.000000, -248.000000)" fill-rule="nonzero">
|
||||
<g id="编组-33" transform="translate(5180.000000, 241.000000)">
|
||||
<g id="沙漏" filter="url(#filter-1)" transform="translate(24.000000, 16.000000)">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
|
||||
<path d="M25.0449735,29 L7.16137566,29 C6.4047619,29 5.78571429,28.3809524 5.78571429,27.6243386 L5.78571429,24.9417989 C5.78571429,21.2962963 7.71164021,17.9259259 10.8756614,16.0687831 C7.64285714,14.2116402 5.64814815,10.7724868 5.64814815,7.05820106 L5.64814815,4.37566138 C5.64814815,3.61904762 6.26719577,3 7.02380952,3 L24.9074074,3 C25.6640212,3 26.2830688,3.61904762 26.2830688,4.37566138 L26.2830688,7.05820106 C26.2830688,9.74074074 25.2513228,12.3544974 23.3253968,14.2804233 L23.2566138,14.3492063 C22.6375661,14.968254 21.9497354,15.5185185 21.1243386,16 C21.9497354,16.4814815 22.6375661,17.031746 23.3253968,17.7195767 L23.3941799,17.7883598 C25.2513228,19.7142857 26.3518519,22.3280423 26.3518519,25.010582 L26.3518519,27.6931217 C26.3518519,28.3809524 25.8015873,29 25.0449735,29 Z M8.53703704,26.2486772 L23.6693122,26.2486772 L23.6693122,24.9417989 C23.6693122,22.9470899 22.9126984,21.021164 21.468254,19.6455026 L21.3994709,19.5767196 C20.7116402,18.8888889 19.8862434,18.3386243 19.0608466,17.994709 C18.8544974,17.9259259 18.5793651,17.7883598 18.3730159,17.7883598 C17.8227513,17.5820106 17.4100529,17.1005291 17.4100529,16.4814815 L17.4100529,15.5873016 C17.4100529,14.968254 17.8227513,14.4179894 18.3730159,14.2804233 C18.5793651,14.2116402 18.7857143,14.1428571 18.9232804,14.0740741 C19.8174603,13.7301587 20.6428571,13.1798942 21.3306878,12.4920635 L21.3994709,12.4232804 C22.7751323,11.047619 23.531746,9.12169312 23.531746,7.1957672 L23.531746,5.88888889 L8.3994709,5.88888889 L8.3994709,7.1957672 C8.3994709,10.2222222 10.1878307,12.973545 13.0079365,14.1428571 C13.2142857,14.2116402 13.489418,14.3492063 13.6957672,14.4179894 C14.2460317,14.6243386 14.6587302,15.1746032 14.6587302,15.7248677 L14.6587302,16.6190476 C14.6587302,17.2380952 14.2460317,17.7195767 13.6957672,17.9259259 C13.489418,17.994709 13.2830688,18.0634921 13.1455026,18.1322751 C10.3253968,19.3015873 8.53703704,22.0529101 8.53703704,25.0793651 L8.53703704,26.2486772 L8.53703704,26.2486772 Z M10.6004389,7.7408411 C10.9109505,10.6891693 13.5502989,12.9392092 16.5777868,12.6288589 C19.1395073,12.3960961 21.1578326,10.3012314 21.4683442,7.7408411 L10.6004389,7.7408411 Z" id="形状" fill="url(#linearGradient-2)"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
31
src/assets/CenterChart2icon4.svg
Normal file
31
src/assets/CenterChart2icon4.svg
Normal file
@ -0,0 +1,31 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组 36</title>
|
||||
<defs>
|
||||
<filter x="-37.5%" y="-37.5%" width="175.0%" height="175.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="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="大屏" transform="translate(-4985.000000, -136.000000)" fill-rule="nonzero">
|
||||
<g id="编组-31" transform="translate(4970.000000, 129.000000)">
|
||||
<g id="温度" filter="url(#filter-1)" transform="translate(24.000000, 16.000000)">
|
||||
<g id="编组-36">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
|
||||
<path d="M16.9717801,19.6980764 L16.9717801,11.1145396 C16.9717801,10.5927156 16.5468216,10.1677571 16.0249976,10.1677571 L15.9500049,10.1677571 C15.4406796,10.1677571 15.0313446,10.5802168 15.0313446,11.0864173 L15.0313446,19.6980764 C13.6189825,20.1074114 12.5847085,21.3697881 12.5847085,22.875891 C12.5847085,24.7163363 14.1126843,26.2068157 16.0031247,26.2068157 C17.8904404,26.2068157 19.4184162,24.7132116 19.4184162,22.875891 C19.4152915,21.3697881 18.3810175,20.1105361 16.9717801,19.6980764 L16.9717801,19.6980764 Z M21.9994141,15.8953227 C21.7869349,15.7203398 21.6619471,15.482863 21.6619471,15.2391368 L21.6619471,5.53383459 C21.6619471,2.48100772 19.1215702,0 16,0 C12.8784298,0 10.3380529,2.48100772 10.3380529,5.53383459 L10.3380529,14.9641637 C10.3380529,15.3734987 10.1693194,15.7515868 9.87872278,15.9984377 C7.83204766,17.7263939 6.66028709,20.2355239 6.66028709,22.8790157 C6.66028709,27.9066497 10.8505029,32 16.0031247,32 C21.1557465,32 25.3459623,27.9097744 25.3459623,22.8790157 C25.3428376,20.17303 24.1242066,17.6264037 21.9994141,15.8953227 Z M16,29.1034079 C12.4690948,29.1034079 9.60062494,26.3099307 9.60062494,22.875891 C9.60062494,20.7354751 10.7192657,18.7669173 12.5909579,17.6139049 L13.0440387,17.3358071 C13.1908993,17.2451909 13.2815155,17.0827068 13.2815155,16.9108486 L13.2815155,5.53383459 C13.2815155,4.07772678 14.5032712,2.89346744 16.0031247,2.89346744 C17.5029782,2.89346744 18.7247339,4.07772678 18.7247339,5.53383459 L18.7247339,16.9108486 C18.7247339,17.0827068 18.8153501,17.2451909 18.9622107,17.3358071 L19.4152915,17.6139049 C21.2869837,18.7669173 22.4024997,20.7323504 22.4024997,22.875891 C22.3993751,26.3099307 19.5277805,29.1034079 16,29.1034079 L16,29.1034079 Z" id="形状" fill="url(#linearGradient-2)"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
BIN
src/assets/Gap.png
Normal file
BIN
src/assets/Gap.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 832 B |
BIN
src/assets/Icon/ButtonChart1Icon1.png
Normal file
BIN
src/assets/Icon/ButtonChart1Icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 545 B |
BIN
src/assets/Icon/ButtonChart1Icon2.png
Normal file
BIN
src/assets/Icon/ButtonChart1Icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 605 B |
BIN
src/assets/Icon/ButtonChart2Icon1.png
Normal file
BIN
src/assets/Icon/ButtonChart2Icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 595 B |
BIN
src/assets/Icon/ButtonChart3Icon1.png
Normal file
BIN
src/assets/Icon/ButtonChart3Icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 432 B |
BIN
src/assets/Icon/ButtonChart4Icon1.png
Normal file
BIN
src/assets/Icon/ButtonChart4Icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 532 B |
BIN
src/assets/Icon/LeftChart2Icon.png
Normal file
BIN
src/assets/Icon/LeftChart2Icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 703 B |
BIN
src/assets/Icon/LeftChart2Icon2.png
Normal file
BIN
src/assets/Icon/LeftChart2Icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 677 B |
BIN
src/assets/Icon/LeftrChart1ICon.png
Normal file
BIN
src/assets/Icon/LeftrChart1ICon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 589 B |
BIN
src/assets/Icon/RightChart1Icon2.png
Normal file
BIN
src/assets/Icon/RightChart1Icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 B |
BIN
src/assets/Icon/rightChart1ICon.png
Normal file
BIN
src/assets/Icon/rightChart1ICon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 538 B |
BIN
src/assets/Icon/rightChart2ICon.png
Normal file
BIN
src/assets/Icon/rightChart2ICon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 336 B |
BIN
src/assets/Icon/rightChart3ICon.png
Normal file
BIN
src/assets/Icon/rightChart3ICon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 296 B |
BIN
src/assets/ItemBg.png
Normal file
BIN
src/assets/ItemBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
BIN
src/assets/ItemBg2.png
Normal file
BIN
src/assets/ItemBg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/ItemBg3.png
Normal file
BIN
src/assets/ItemBg3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
src/assets/ItemLineTop.png
Normal file
BIN
src/assets/ItemLineTop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 171 B |
BIN
src/assets/MainBG.png
Normal file
BIN
src/assets/MainBG.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
src/assets/Thumbs.db
Normal file
BIN
src/assets/Thumbs.db
Normal file
Binary file not shown.
BIN
src/assets/TopButtonLine.png
Normal file
BIN
src/assets/TopButtonLine.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 900 B |
BIN
src/assets/TopSide.png
Normal file
BIN
src/assets/TopSide.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/TopTitleLeft.png
Normal file
BIN
src/assets/TopTitleLeft.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/assets/TopTitleLeftIcon.png
Normal file
BIN
src/assets/TopTitleLeftIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 804 B |
BIN
src/assets/TopTitleRight.png
Normal file
BIN
src/assets/TopTitleRight.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/assets/TopTitleRightIcon.png
Normal file
BIN
src/assets/TopTitleRightIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 802 B |
BIN
src/assets/V3DBG.png
Normal file
BIN
src/assets/V3DBG.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 370 KiB |
BIN
src/assets/buttonChart2GapLine.png
Normal file
BIN
src/assets/buttonChart2GapLine.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 B |
27
src/assets/status/fault.svg
Normal file
27
src/assets/status/fault.svg
Normal file
@ -0,0 +1,27 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>矩形备份 7</title>
|
||||
<defs>
|
||||
<rect id="path-1" x="0" y="4" width="6" height="6" rx="3"></rect>
|
||||
<filter x="-100.0%" y="-100.0%" width="300.0%" height="300.0%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
|
||||
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.151676829 0 0 0 0 0.151676829 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="大屏" transform="translate(-3951.000000, -854.000000)">
|
||||
<g id="编组-10备份-3" transform="translate(3629.000000, 715.000000)">
|
||||
<g id="编组-21" transform="translate(30.000000, 79.000000)">
|
||||
<g id="编组-30备份" transform="translate(295.000000, 7.000000)">
|
||||
<g id="矩形备份-7" transform="translate(1.000000, 53.000000)">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
|
||||
<use fill="#FF0C0C" fill-rule="evenodd" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
25
src/assets/status/maintenance.svg
Normal file
25
src/assets/status/maintenance.svg
Normal file
@ -0,0 +1,25 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>矩形备份 16 2</title>
|
||||
<defs>
|
||||
<rect id="path-1" x="296" y="38" width="6" height="6" rx="3"></rect>
|
||||
<filter x="-100.0%" y="-100.0%" width="300.0%" height="300.0%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
|
||||
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.717647059 0 0 0 0 0.0470588235 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="大屏" transform="translate(-3951.000000, -934.000000)">
|
||||
<g id="编组-10备份-3" transform="translate(3629.000000, 715.000000)">
|
||||
<g id="编组-21" transform="translate(30.000000, 79.000000)">
|
||||
<g id="矩形备份-16" transform="translate(0.000000, 106.000000)">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
|
||||
<use fill="#FFB70C" fill-rule="evenodd" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
29
src/assets/status/normal.svg
Normal file
29
src/assets/status/normal.svg
Normal file
@ -0,0 +1,29 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>矩形备份 16</title>
|
||||
<defs>
|
||||
<rect id="path-1" x="0" y="0" width="6" height="6" rx="3"></rect>
|
||||
<filter x="-100.0%" y="-100.0%" width="300.0%" height="300.0%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
|
||||
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.152941176 0 0 0 0 0.376470588 0 0 0 0 1 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="大屏" transform="translate(-3951.000000, -828.000000)">
|
||||
<g id="编组-10备份-3" transform="translate(3629.000000, 715.000000)">
|
||||
<g id="编组-21" transform="translate(30.000000, 79.000000)">
|
||||
<g id="编组-30备份" transform="translate(295.000000, 7.000000)">
|
||||
<g id="编组-14" transform="translate(1.000000, 27.000000)">
|
||||
<g transform="translate(0.000000, 4.000000)" id="矩形备份-16">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
|
||||
<use fill="#2760FF" fill-rule="evenodd" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
127
src/components/BottomBar/Chart1.jsx
Normal file
127
src/components/BottomBar/Chart1.jsx
Normal file
@ -0,0 +1,127 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
//小时蒸汽产生量
|
||||
import Item from './substitutionCharts/Chart1.jsx';
|
||||
|
||||
//窑炉温度变化
|
||||
import Item2 from './substitutionCharts/Chart4.jsx';
|
||||
|
||||
import ICon1 from '../../assets/Icon/ButtonChart1Icon1.png';
|
||||
import ICon2 from '../../assets/Icon/ButtonChart1Icon2.png';
|
||||
|
||||
import './Chart1.less';
|
||||
|
||||
const Daytitle = '日发电量统计';
|
||||
const Dayxdata = [
|
||||
'1:00',
|
||||
'2:00',
|
||||
'3:00',
|
||||
'4:00',
|
||||
'5:00',
|
||||
'6:00',
|
||||
'7:00',
|
||||
'8:00',
|
||||
'9:00',
|
||||
'10:00',
|
||||
'11:00',
|
||||
'12:00',
|
||||
'13:00',
|
||||
'14:00',
|
||||
'15:00',
|
||||
'16:00',
|
||||
'17:00',
|
||||
'18:00',
|
||||
'19:00',
|
||||
'20:00',
|
||||
'21:00',
|
||||
'22:00',
|
||||
'23:00',
|
||||
'24:00',
|
||||
];
|
||||
const Daydata = [
|
||||
70,
|
||||
45,
|
||||
10,
|
||||
28,
|
||||
18,
|
||||
28,
|
||||
46,
|
||||
70,
|
||||
45,
|
||||
10,
|
||||
28,
|
||||
18,
|
||||
28,
|
||||
46,
|
||||
70,
|
||||
45,
|
||||
10,
|
||||
28,
|
||||
18,
|
||||
28,
|
||||
46,
|
||||
22,
|
||||
25,
|
||||
26,
|
||||
];
|
||||
|
||||
const Monthtitle = '月发电量统计';
|
||||
const Monthxdata = ['一月', '二月', '三月', '四月', '五月', '六月', '七月'];
|
||||
const Monthdata = [170, 145, 110, 128, 118, 128, 146];
|
||||
|
||||
const Yeartitle = '年发电量统计';
|
||||
const Yearxdata = ['2016', '2017', '2018', '2019', '2020', '2021', '2022'];
|
||||
const Yeardata = [870, 845, 810, 828, 818, 828, 846];
|
||||
|
||||
export default function Chart1() {
|
||||
const [index, setIndex] = useState(1);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
SwitchIndex();
|
||||
}, 10000);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
let num = 1;
|
||||
|
||||
function SwitchIndex() {
|
||||
num = num + 1;
|
||||
if (num < 3) {
|
||||
setIndex(num);
|
||||
} else {
|
||||
num = 1;
|
||||
setIndex(num);
|
||||
}
|
||||
}
|
||||
|
||||
//切换图表
|
||||
function SwitchChart(index) {
|
||||
switch (index) {
|
||||
case 1:
|
||||
return <Item />;
|
||||
case 2:
|
||||
return <Item2 />;
|
||||
default:
|
||||
return <Item />;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="ButtonChart1AllBorder">
|
||||
<div className="ButtonChart1ItemitemBorder">
|
||||
<img
|
||||
src={index == 1 ? ICon1 : ICon2}
|
||||
alt="图片读取失败"
|
||||
className="ButtonChart1ItemIcon"
|
||||
/>
|
||||
<div className="ButtonChart1ItemTitle">
|
||||
{index == 1 ? '小时蒸汽产生量' : '窑炉温度变化'}
|
||||
</div>
|
||||
</div>
|
||||
<motion.div className="ButtonChart1ItemBorder">
|
||||
{SwitchChart(index)}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
src/components/BottomBar/Chart1.less
Normal file
38
src/components/BottomBar/Chart1.less
Normal file
@ -0,0 +1,38 @@
|
||||
.ButtonChart1AllBorder {
|
||||
width: 625px;
|
||||
height: 306px;
|
||||
background: url('../../assets/ItemBg.png');
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.ButtonChart1ItemitemBorder {
|
||||
margin-top: 24px;
|
||||
margin-left: 24px;
|
||||
width: 202px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
vertical-align: middle;
|
||||
|
||||
.ButtonChart1ItemIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.ButtonChart1ItemTitle {
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
margin-left: 8px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
.ButtonChart1ItemBorder {
|
||||
width: 95%;
|
||||
height: 227px;
|
||||
margin-left: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
}
|
||||
}
|
||||
23
src/components/BottomBar/Chart2.jsx
Normal file
23
src/components/BottomBar/Chart2.jsx
Normal file
@ -0,0 +1,23 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
import Item2 from './substitutionCharts/Chart2.jsx'
|
||||
import Icon from '../../assets/Icon/ButtonChart2Icon1.png'
|
||||
import GapLine from '../../assets/buttonChart2GapLine.png'
|
||||
import './Chart2.less'
|
||||
|
||||
|
||||
export default function Chart2() {
|
||||
return (
|
||||
<div className='ButtonChart2AllBorder'>
|
||||
<div className='ButtonChart2ItemitemBorder'>
|
||||
<img src={Icon} alt="图片加载错误" className='ButtonChart2ItemIcon' />
|
||||
<div className='ButtonChart2ItemTitle' >AB线成品量</div>
|
||||
</div>
|
||||
<div className='ButtonChart2ItemBorder' >
|
||||
<Item2 title='A线' data={[78, 9565, 17512]} />
|
||||
<div className='ButtonChart2ItemGap'></div>
|
||||
<Item2 title='B线' data={[58, 7565, 17512]} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
50
src/components/BottomBar/Chart2.less
Normal file
50
src/components/BottomBar/Chart2.less
Normal file
@ -0,0 +1,50 @@
|
||||
.ButtonChart2AllBorder {
|
||||
width: 625px;
|
||||
height: 306px;
|
||||
background: url('../../assets/ItemBg.png');
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.ButtonChart2ItemitemBorder {
|
||||
margin-top: 24px;
|
||||
margin-left: 24px;
|
||||
width: 202px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
vertical-align: middle;
|
||||
|
||||
.ButtonChart2ItemIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top:2px;
|
||||
}
|
||||
|
||||
.ButtonChart2ItemTitle {
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
margin-left: 8px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.ButtonChart2ItemBorder {
|
||||
width: 95%;
|
||||
height: 227px;
|
||||
margin-left: 16px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
.ButtonChart2ItemGap {/* */
|
||||
float: left;
|
||||
width: 1px;
|
||||
height: 90%;
|
||||
background:url('../../assets/Gap.png');
|
||||
border-width: 1.3px;
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
}
|
||||
36
src/components/BottomBar/Chart3.jsx
Normal file
36
src/components/BottomBar/Chart3.jsx
Normal file
@ -0,0 +1,36 @@
|
||||
import React from 'react'
|
||||
|
||||
//导入图表
|
||||
import Item from './Form/Form.jsx'
|
||||
import Item1 from './Form/Form1.jsx'
|
||||
|
||||
import Icon1 from '../../assets/Icon/ButtonChart3Icon1.png'
|
||||
import Icon2 from '../../assets/Icon/ButtonChart1Icon1.png'
|
||||
|
||||
import './Chart3.less'
|
||||
|
||||
export default function Chart3() {
|
||||
return (
|
||||
<div className='ButtonChart3AllBorder'>
|
||||
<div className='ButtonChart3ItemBorder'>
|
||||
<div className='ButtonChart3ItemitemBorder'>
|
||||
<img src={Icon1} alt="图片加载错误" className='ButtonChart3ItemIcon' />
|
||||
<div className='ButtonChart3ItemTitle'>退火风机状况</div>
|
||||
</div>
|
||||
<div className='ButtonChart3ItemDetail'>
|
||||
<Item />
|
||||
</div>
|
||||
</div>
|
||||
<div className='ButtonChart3ItemGap'></div>
|
||||
<div className='ButtonChart3ItemBorder'>
|
||||
<div className='ButtonChart3ItemitemBorder'>
|
||||
<img src={Icon2} alt="图片加载错误" className='ButtonChart3ItemIcon' />
|
||||
<div className='ButtonChart3ItemTitle'>空压机运行时间</div>
|
||||
</div>
|
||||
<div className='ButtonChart3ItemDetail'>
|
||||
<Item1 />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
56
src/components/BottomBar/Chart3.less
Normal file
56
src/components/BottomBar/Chart3.less
Normal file
@ -0,0 +1,56 @@
|
||||
.ButtonChart3AllBorder {
|
||||
width: 625px;
|
||||
height: 306px;
|
||||
background: url('../../assets/ItemBg.png');
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
|
||||
.ButtonChart3ItemBorder {
|
||||
width: 48%;
|
||||
height: 100%;
|
||||
|
||||
.ButtonChart3ItemitemBorder {
|
||||
margin-top: 24px;
|
||||
margin-left: 24px;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
vertical-align: middle;
|
||||
|
||||
|
||||
.ButtonChart3ItemIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top:3px;
|
||||
}
|
||||
|
||||
.ButtonChart3ItemTitle {
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
margin-left: 8px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.ButtonChart3ItemDetail {
|
||||
width: 92%;
|
||||
height: 230px;
|
||||
margin-left: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
}
|
||||
}
|
||||
.ButtonChart3ItemGap{
|
||||
float: left;
|
||||
margin-top: 8%;
|
||||
width: 1px;
|
||||
height:75%;
|
||||
background:url('../../assets/Gap.png');
|
||||
background-repeat: no-repeat;
|
||||
border-width: 1.3px;
|
||||
z-index:20;
|
||||
}
|
||||
}
|
||||
68
src/components/BottomBar/Chart4.jsx
Normal file
68
src/components/BottomBar/Chart4.jsx
Normal file
@ -0,0 +1,68 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
//火炉实时流量
|
||||
import Chart1 from './substitutionCharts/Chart3.jsx';
|
||||
|
||||
//空压机运行时间
|
||||
import Chart2 from './substitutionCharts/Chart4.jsx';
|
||||
|
||||
import Icon1 from '../../assets/Icon/ButtonChart4Icon1.png';
|
||||
import Icon2 from '../../assets/Icon/ButtonChart1Icon2.png';
|
||||
|
||||
import './Chart4.less';
|
||||
|
||||
|
||||
export default function Chart4() {
|
||||
const [index, setIndex] = useState(1);
|
||||
let num = 1;
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
SwitchIndex();
|
||||
}, 10000);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
function SwitchIndex() {
|
||||
num = num + 1;
|
||||
if (num < 3) {
|
||||
setIndex(num);
|
||||
} else {
|
||||
num = 1;
|
||||
setIndex(num);
|
||||
}
|
||||
}
|
||||
|
||||
function SwitchData(index) {
|
||||
switch (index) {
|
||||
case 1:
|
||||
return <Chart1 />;
|
||||
case 2:
|
||||
return <Chart2 />;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="ButtonChart4AllBorder">
|
||||
<div className="ButtonChart4ItemitemBorder">
|
||||
<img
|
||||
src={index == 1 ? Icon1 : Icon2}
|
||||
alt="图片加载错误"
|
||||
className="ButtonChart4ItemIcon"
|
||||
/>
|
||||
<div className="ButtonChart4ItemTitle">
|
||||
{index == 1 ? '火炉实时流量' : '火炉实时温度'}
|
||||
</div>
|
||||
</div>
|
||||
<motion.div
|
||||
className="ButtonChart4ItemBorder"
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 5 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ ease: 'easeIn', duration: 0.5 }}
|
||||
>
|
||||
<div className="ButtonChart4ItemBorder1">{SwitchData(index)}</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
47
src/components/BottomBar/Chart4.less
Normal file
47
src/components/BottomBar/Chart4.less
Normal file
@ -0,0 +1,47 @@
|
||||
.ButtonChart4AllBorder {
|
||||
width: 528px;
|
||||
height: 306px;
|
||||
background: url('../../assets/ItemBg3.png');
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.ButtonChart4ItemitemBorder {
|
||||
margin-top: 24px;
|
||||
margin-left: 24px;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
vertical-align: middle;
|
||||
.ButtonChart4ItemIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.ButtonChart4ItemTitle {
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
margin-left: 8px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.ButtonChart4ItemBorder {
|
||||
width: 95%;
|
||||
height: 227px;
|
||||
margin-left: 16px;
|
||||
margin-bottom: 16px;
|
||||
background-repeat: round;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
|
||||
.ButtonChart4ItemBorder1 {
|
||||
margin-top: 1%;
|
||||
width: 98%;
|
||||
height: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
67
src/components/BottomBar/Form/Form.jsx
Normal file
67
src/components/BottomBar/Form/Form.jsx
Normal file
@ -0,0 +1,67 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { ScrollBoard } from '@jiaminghi/data-view-react'
|
||||
|
||||
import fault from '@/assets/status/fault.svg'
|
||||
import maintenance from '@/assets/status/maintenance.svg'
|
||||
import normal from '@/assets/status/normal.svg'
|
||||
import './Form.less'
|
||||
// <div style="color:#1723ff">欢迎来到php中文网学习html技术，<spanclass="red">这里有全面的css教程</span></div>
|
||||
// background-image: radial-gradient(circle, red, yellow, green);, color:#1723ff"，radial-gradient(circle, red, yellow, green)
|
||||
const Style1 = `<div > <img src=${normal} alt="Error" style="width:12px,height:12px;" /> <span style=" color:rgba(255,255,255,1)">正常</span> </div>`
|
||||
const Style2 = `<div > <img src=${maintenance} alt="Error" style="width:15px,height:15px" /> <span style="color:rgba(255,255,255,1)">维修</span> </div>`
|
||||
const Style3 = `<div > <img src=${fault} alt="Error" style="width:15px,height:15px" /> <span style="color:rgba(255,255,255,1)">故障</span> </div>`
|
||||
|
||||
//rgba(201, 196, 191,0.5)
|
||||
|
||||
let config = {
|
||||
headerBGC: 'rgba(4, 36, 68,0.5)',
|
||||
header: ['<span style="color:rgba(255,255,255,1)">设备名称 <span/>', '<span style="color:rgba(255,255,255,1)">设备状态 <span/>'],
|
||||
align: ['center'],
|
||||
indexHeader: '<span style="color:rgba(255,255,255,1)">序号 <span/>',
|
||||
index: true,
|
||||
rowNum: 7,
|
||||
columnWidth: [400, 400, 400],
|
||||
headerHeight: 35,
|
||||
oddRowBGC: "#042444",
|
||||
evenRowBGC: "#042c4c",
|
||||
data: [
|
||||
['退火1', Style1],
|
||||
['退火2', Style2],
|
||||
['退火3', Style1],
|
||||
['退火4', Style2],
|
||||
['退火5', Style1],
|
||||
['退火6', Style3],
|
||||
['退火7', Style3],
|
||||
['退火8', Style1],
|
||||
['退火9', Style1],
|
||||
['退火10', Style3]
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
function replaceStyle(STR) {
|
||||
if (STR) {
|
||||
return ` <span style="color:rgba(201, 196, 191,0.5)">${STR}<span/>`
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
class Form extends Component {
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='ButtonFormitemDetailBorder'>
|
||||
<div className='ButtonFormitemDetailBorderLine1'></div>
|
||||
<div className='ButtonFormitemDetailBorderLine2'></div>
|
||||
<ScrollBoard config={config} style={{ width: '100%', height: '95%' }} />
|
||||
</div >
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Form;
|
||||
28
src/components/BottomBar/Form/Form.less
Normal file
28
src/components/BottomBar/Form/Form.less
Normal file
@ -0,0 +1,28 @@
|
||||
.ButtonFormitemDetailBorder {
|
||||
width: 98%;
|
||||
height: 100%;
|
||||
margin-top: 2%;
|
||||
position: relative;
|
||||
|
||||
.ButtonFormitemDetailBorderLine1 {
|
||||
width: 1px;
|
||||
height: 95%;
|
||||
background-color:#041c2c;
|
||||
float: left;
|
||||
margin-left:28%;
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
border-width: 1px;
|
||||
}
|
||||
.ButtonFormitemDetailBorderLine2 {
|
||||
width: 1px;
|
||||
height: 95%;
|
||||
background-color:#041c2c;
|
||||
float: left;
|
||||
margin-left: 60%;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
border-width: 1px;
|
||||
|
||||
}
|
||||
}
|
||||
62
src/components/BottomBar/Form/Form1.jsx
Normal file
62
src/components/BottomBar/Form/Form1.jsx
Normal file
@ -0,0 +1,62 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { ScrollBoard } from '@jiaminghi/data-view-react'
|
||||
|
||||
|
||||
import './Form1.less'
|
||||
|
||||
let config = {
|
||||
headerBGC: 'rgba(4, 36, 68,0.5)',
|
||||
header: ['<span style="color:rgba(255, 255,255,1)">设备名称 <span/>', '<span style="color:rgba(255, 255, 255,1)">运行时间 <span/>'],
|
||||
index: true,
|
||||
align: ['center'],
|
||||
oddRowBGC: "#042444",
|
||||
evenRowBGC: "#042c4c",
|
||||
indexHeader: '<span style="color:rgba(255, 255, 255,1)">序号 <span/>',
|
||||
rowNum: 5,
|
||||
columnWidth: [300, 350, 300],
|
||||
headerHeight: 35,
|
||||
rowNum:7,
|
||||
data: [
|
||||
['#1空压', '2039'],
|
||||
['#2空压', '23212'],
|
||||
['#3空压', '2532'],
|
||||
['#4空压', '1252'],
|
||||
['#5空压', '1231'],
|
||||
['#6空压', '1231'],
|
||||
['#7空压', '3532'],
|
||||
['#8空压', '3567'],
|
||||
['#9空压', '3054'],
|
||||
['#10空压', '3564'],
|
||||
]
|
||||
}
|
||||
|
||||
// function (STR) {
|
||||
|
||||
// if (STR) {
|
||||
// return ` <span style="color:rgba(201, 196, 191,0.5)">${STR}<span/>`
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
class Form extends Component {
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<div className='ButtonForm1itemDetailBorder'>
|
||||
<span className='RightFormitemDetailBorderLine1'></span>
|
||||
<span className='RightFormitemDetailBorderLine2'></span>
|
||||
<ScrollBoard config={config} style={{ width: '100%', height: '95%' }} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Form;
|
||||
26
src/components/BottomBar/Form/Form1.less
Normal file
26
src/components/BottomBar/Form/Form1.less
Normal file
@ -0,0 +1,26 @@
|
||||
.ButtonForm1itemDetailBorder {
|
||||
width: 98%;
|
||||
height: 100%;
|
||||
margin-top: 2%;
|
||||
position: relative;
|
||||
|
||||
.RightFormitemDetailBorderLine1 {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: #041c2c;
|
||||
float: left;
|
||||
margin-left: 28%;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.RightFormitemDetailBorderLine2 {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: #041c2c;
|
||||
float: left;
|
||||
margin-left: 58%;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
20
src/components/BottomBar/index.jsx
Normal file
20
src/components/BottomBar/index.jsx
Normal file
@ -0,0 +1,20 @@
|
||||
import React from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import Chart1 from './Chart1'
|
||||
import Chart2 from './Chart2'
|
||||
import Chart3 from './Chart3'
|
||||
import Chart4 from './Chart4'
|
||||
|
||||
import './index.less'
|
||||
|
||||
export default function index() {
|
||||
return (
|
||||
<div className='ButtonBorder'>
|
||||
<Chart1 />
|
||||
<Chart2 />
|
||||
<Chart3 />
|
||||
<Chart4 />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
8
src/components/BottomBar/index.less
Normal file
8
src/components/BottomBar/index.less
Normal file
@ -0,0 +1,8 @@
|
||||
.ButtonBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
207
src/components/BottomBar/substitutionCharts/Chart1.jsx
Normal file
207
src/components/BottomBar/substitutionCharts/Chart1.jsx
Normal file
@ -0,0 +1,207 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import './Chart3.less'
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
var colors = 'rgb(13, 119, 145)';
|
||||
var fontColor = '#fff'
|
||||
var lineColor = 'rgba(33, 50, 89,0.8)'
|
||||
|
||||
|
||||
|
||||
var datalist = [
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [25, 85],
|
||||
symbolSize: 30,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [100, 305],
|
||||
symbolSize: 50,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [200, 525],
|
||||
symbolSize: 70,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [255, 405],
|
||||
symbolSize: 30,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [500, 705],
|
||||
symbolSize: 50,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [400, 525],
|
||||
symbolSize: 70,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [255, 405],
|
||||
symbolSize: 30,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [700, 805],
|
||||
symbolSize: 50,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [300, 425],
|
||||
symbolSize: 70,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [365, 505],
|
||||
symbolSize: 30,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [600, 705],
|
||||
symbolSize: 40,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [400, 525],
|
||||
symbolSize: 70,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [800, 925],
|
||||
symbolSize: 30,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [900, 985],
|
||||
symbolSize: 20,
|
||||
opacity: 0.6,
|
||||
},
|
||||
|
||||
];
|
||||
var datas = [];
|
||||
for (var i = 0; i < datalist.length; i++) {
|
||||
var item = datalist[i];
|
||||
const colorInex = i % colors.length;
|
||||
|
||||
datas.push({
|
||||
...item,
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
fontSize: 11,
|
||||
},
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: colors,
|
||||
opacity: item.opacity,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
class Chart3 extends Component {
|
||||
|
||||
getOption = () => ({
|
||||
grid: {
|
||||
show: false,
|
||||
right: 15,
|
||||
left: 10,
|
||||
top: 10,
|
||||
bottom: 10,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
gridIndex: 0,
|
||||
type: "value",
|
||||
// show: false,
|
||||
min: 0,
|
||||
max: 1000,
|
||||
nameLocation: "middle",
|
||||
nameGap: 5,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
width: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
gridIndex: 0,
|
||||
min: 0,
|
||||
// show: false,
|
||||
max: 1000,
|
||||
nameLocation: "middle",
|
||||
nameGap: 30,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
width: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "scatter",
|
||||
symbol: "circle",
|
||||
symbolSize: 120,
|
||||
data: datas,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='ButtonChart1itemDetailBorder'>
|
||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart3;
|
||||
6
src/components/BottomBar/substitutionCharts/Chart1.less
Normal file
6
src/components/BottomBar/substitutionCharts/Chart1.less
Normal file
@ -0,0 +1,6 @@
|
||||
.ButtonChart1itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
}
|
||||
142
src/components/BottomBar/substitutionCharts/Chart2.jsx
Normal file
142
src/components/BottomBar/substitutionCharts/Chart2.jsx
Normal file
@ -0,0 +1,142 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import './Chart2.less'
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
class Chart2 extends Component {
|
||||
|
||||
|
||||
getOption = () => ({
|
||||
|
||||
title: [{
|
||||
text: `${this.props.data[0]}%`,
|
||||
x: "center",
|
||||
y: "32%",
|
||||
textStyle: {
|
||||
fontWeight: "normal",
|
||||
color: "#5CB2FF",
|
||||
fontSize: "34px",
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "成品率",
|
||||
x: "center",
|
||||
y: "55%",
|
||||
textStyle: {
|
||||
fontWeight: "normal",
|
||||
color: "rgba(255,255,255,0.7)",
|
||||
fontSize: "18px",
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
color: ["rgba(176, 212, 251, 1)"],
|
||||
|
||||
series: [
|
||||
{
|
||||
name: "Line 1",
|
||||
type: "pie",
|
||||
clockWise: true,
|
||||
radius: ["65%", "95%"],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
hoverAnimation: false,
|
||||
data: [
|
||||
{
|
||||
value: this.props.data[0],
|
||||
name: "01",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
shadowBlur: 7,
|
||||
borderColor: "rgba(90,107,255,0.5)",
|
||||
shadowColor: "rgba(92,183,255,0.9)",
|
||||
color: {
|
||||
// 完成的圆环的颜色
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(90,107,255,1)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(92,183,255,0.5)", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "02",
|
||||
value: 100 - this.props.data[0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color:"rgba(255,255,255,0.25)",//未完成圆环颜色
|
||||
borderWidth: 1,
|
||||
shadowBlur: 7,
|
||||
borderColor: "rgba(90,107,255,0.5)",
|
||||
shadowColor: "rgba(92,183,255,0.9)",
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
})
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='buttonChart2itemDetailBorder'>
|
||||
<div className='buttonChart2itemEchart'>
|
||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
||||
</div>
|
||||
<div className='buttonChart2itemTitle'>
|
||||
<h2 className='buttonChart2itemTitle1'>{this.props.title}</h2>
|
||||
<div className='buttonChart2itemTitleGAp' /><div />
|
||||
<div className='buttonChart2itemTitleDetail'>
|
||||
<div className='buttonChart2itemTitleDetailRow'>
|
||||
<h2 className='buttonChart2itemTitle2'>订单总量：</h2>
|
||||
<h2 className='buttonChart2itemTitle3'>{this.props.data[1]}</h2>
|
||||
</div>
|
||||
<div className='buttonChart2itemTitleDetailRow'>
|
||||
<h2 className='buttonChart2itemTitle2'>成品量：</h2>
|
||||
<h2 className='buttonChart2itemTitle3'>{this.props.data[2]}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart2;
|
||||
66
src/components/BottomBar/substitutionCharts/Chart2.less
Normal file
66
src/components/BottomBar/substitutionCharts/Chart2.less
Normal file
@ -0,0 +1,66 @@
|
||||
.buttonChart2itemDetailBorder {
|
||||
width: 215px;
|
||||
height: 216px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
.buttonChart2itemEchart {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
align-self: center;
|
||||
|
||||
}
|
||||
.buttonChart2itemTitle {
|
||||
width: 88%;
|
||||
height: 56px;
|
||||
margin-left: 20px;
|
||||
margin-top: 8px;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
||||
.buttonChart2itemTitle1 {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 22px;
|
||||
line-height: 24px;
|
||||
font-style: normal;
|
||||
margin-top: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.buttonChart2itemTitleGAp {
|
||||
width: 2px;
|
||||
height: 80%;
|
||||
margin-left: 15px;
|
||||
background-color: #73808C;
|
||||
}
|
||||
|
||||
.buttonChart2itemTitleDetail {
|
||||
width: 158px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
|
||||
|
||||
.buttonChart2itemTitleDetailRow {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
.buttonChart2itemTitle2 {
|
||||
font-size: 15px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.buttonChart2itemTitle3 {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
124
src/components/BottomBar/substitutionCharts/Chart3.jsx
Normal file
124
src/components/BottomBar/substitutionCharts/Chart3.jsx
Normal file
@ -0,0 +1,124 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import './Chart3.less'
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
var data = [[800, 4302, 200, 3234, 800, 4302, 200, 3234, 800, 4302, 200, 3234, 800, 4302, 200, 3234],
|
||||
[4450, 553, 2350, 234, 4450, 553, 2350, 234, 4450, 553, 2350, 234, 4450, 553, 2350, 234],
|
||||
[2400, 305, 3500, 234, 2400, 305, 3500, 234, 2400, 305, 3500, 234, 2400, 305, 3500, 234],
|
||||
[50, 3302, 480, 3334, 50, 3302, 480, 3334, 50, 3302, 480, 3334, 50, 3302, 480, 3334],
|
||||
|
||||
]
|
||||
|
||||
var name = ['10HZ-15HZ', '15HZ-25HZ', '30HZ-35HZ', '40HZ-45HZ']
|
||||
|
||||
|
||||
var color = ["#2760ff", "#ffb70c", "#3dbdc2", "#e02094"]
|
||||
var fontColor = '#fff'
|
||||
var lineColor = 'rgba(33, 50, 89,0.8)'
|
||||
|
||||
function makeseries(data, name, color) {
|
||||
if (data) {
|
||||
let All = []
|
||||
for (let i in data) {
|
||||
All.push({
|
||||
name: name[i],
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
symbol: "circle",
|
||||
data: data[i],
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: color[i]
|
||||
},
|
||||
itemStyle: {
|
||||
|
||||
color: color[i],
|
||||
|
||||
},
|
||||
})
|
||||
}
|
||||
return All;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
class Chart3 extends Component {
|
||||
|
||||
|
||||
getOption = () => ({
|
||||
legend: {
|
||||
right: "0%",
|
||||
width: "80%",
|
||||
height: "14%",
|
||||
itemWidth: 12,
|
||||
itemHeight: 11,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#F1F1F3",
|
||||
},
|
||||
// itemStyle: {
|
||||
// color: "rgba(222, 9, 9, 1)"
|
||||
// },
|
||||
data: name
|
||||
},
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '2%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7', 'day5', 'day6', 'day7', 'day6', 'day7', 'day5', 'day6', 'day7'],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
width: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
width: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: makeseries(data, name, color)
|
||||
})
|
||||
render() {
|
||||
return (
|
||||
<div className='ButtonChart3itemDetailBorder'>
|
||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart3;
|
||||
6
src/components/BottomBar/substitutionCharts/Chart3.less
Normal file
6
src/components/BottomBar/substitutionCharts/Chart3.less
Normal file
@ -0,0 +1,6 @@
|
||||
.ButtonChart3itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
}
|
||||
117
src/components/BottomBar/substitutionCharts/Chart4.jsx
Normal file
117
src/components/BottomBar/substitutionCharts/Chart4.jsx
Normal file
@ -0,0 +1,117 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import './Chart4.less'
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
|
||||
|
||||
var name = ['10HZ-15HZ', '15HZ-25HZ', '30HZ-35HZ', '40HZ-45HZ']
|
||||
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
var color = ["#2760ff", "#ffb70c", "#3dbdc2", "#e02094"]
|
||||
var fontColor = '#fff'
|
||||
var lineColor = 'rgba(33, 50, 89,0.8)'
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
class Chart3 extends Component {
|
||||
|
||||
|
||||
getOption = () => ({
|
||||
|
||||
|
||||
|
||||
legend: {
|
||||
right: "0%",
|
||||
width: "70%",
|
||||
height: "14%",
|
||||
itemWidth: 17,
|
||||
itemHeight: 13.5,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#F1F1F3",
|
||||
},
|
||||
|
||||
data: name
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '5%',
|
||||
top:'3%',
|
||||
containLabel: true,
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7', 'day5', 'day6', 'day7', 'day6', 'day7', 'day5', 'day6', 'day7'],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: {
|
||||
|
||||
name:'发电量',
|
||||
type: 'line',
|
||||
showSymbol: true,
|
||||
symbol: "circle",
|
||||
symbolSize:8,
|
||||
symbolBorder:"rgba(17, 36, 246,0.1)",
|
||||
data: [200,320,121,125,585,213,521,326,542,258,632,145,258,632,145],
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color:"rgba(246, 23, 106,0.9)",
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(246, 23, 106,0.3)' },
|
||||
{ offset: 0.5, color: 'rgba(246, 23, 106,0.2)' },
|
||||
{ offset: 1, color: 'rgba(246, 23, 106,0.1)' }
|
||||
]),
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#F6176A',
|
||||
color: "rgba(4, 20, 36,0.8)",
|
||||
},
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='ButtonChart4itemDetailBorder'>
|
||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart3;
|
||||
9
src/components/BottomBar/substitutionCharts/Chart4.less
Normal file
9
src/components/BottomBar/substitutionCharts/Chart4.less
Normal file
@ -0,0 +1,9 @@
|
||||
.ButtonChart4itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
183
src/components/BottomBar/substitutionCharts/Chart6.jsx
Normal file
183
src/components/BottomBar/substitutionCharts/Chart6.jsx
Normal file
@ -0,0 +1,183 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
|
||||
|
||||
import './Chart2.less'
|
||||
|
||||
class Chart2 extends Component {
|
||||
|
||||
getOption = () => ({
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "2%",
|
||||
top: "2%",
|
||||
bottom: "5%",
|
||||
containLabel: true,
|
||||
},
|
||||
|
||||
legend: {
|
||||
|
||||
itemWidth: 14,
|
||||
itemHeight: 5,
|
||||
itemGap: 13,
|
||||
data: ["窑炉1", "窑炉2", "窑炉3"],
|
||||
top:'5%',
|
||||
right: "4%",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#F1F1F3",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#57617B",
|
||||
},
|
||||
},
|
||||
data: [
|
||||
"00:00",
|
||||
"01:05",
|
||||
"02:10",
|
||||
"03:15",
|
||||
"04:20",
|
||||
"05:25",
|
||||
"06:30",
|
||||
"07:35",
|
||||
"08:40",
|
||||
"09:45",
|
||||
"10:45",
|
||||
"11:45",
|
||||
"12:45",
|
||||
|
||||
"13:00",
|
||||
"14:05",
|
||||
"15:10",
|
||||
"16:15",
|
||||
"17:20",
|
||||
"18:25",
|
||||
"19:30",
|
||||
"20:35",
|
||||
"21:40",
|
||||
"22:45",
|
||||
"23:50",
|
||||
"24:55",
|
||||
],
|
||||
},
|
||||
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "单位（%)",
|
||||
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#57617B",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#57617B",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "窑炉1",
|
||||
type: "line",
|
||||
smooth: false,
|
||||
symbol: "circle",
|
||||
symbolSize: 6,
|
||||
showSymbol: true,
|
||||
lineStyle: {
|
||||
color: "rgba(116, 172, 100,0.8)",
|
||||
width:3,
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 3,
|
||||
borderColor: 'rgba(116, 172, 100,0.8)',
|
||||
color:'rgba(4, 28, 52,1)',
|
||||
|
||||
},
|
||||
data: this.props.data[0],
|
||||
},
|
||||
{
|
||||
name: "窑炉2",
|
||||
type: "line",
|
||||
smooth: false,
|
||||
symbol: "circle",
|
||||
symbolSize: 6,
|
||||
showSymbol: true,
|
||||
|
||||
lineStyle: {
|
||||
color: "rgba(164, 132, 44,1)",
|
||||
width:3,
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 3,
|
||||
borderColor: 'rgba(164, 132, 44,1)',
|
||||
color:'rgba(4, 28, 52,1)',
|
||||
|
||||
},
|
||||
|
||||
|
||||
data: this.props.data[1],
|
||||
},
|
||||
{
|
||||
name: "窑炉3",
|
||||
type: "line",
|
||||
smooth: false,
|
||||
symbol: "circle",
|
||||
symbolSize:6,
|
||||
showSymbol: true,
|
||||
|
||||
lineStyle: {
|
||||
color: "rgba(52, 156, 172,1)",
|
||||
width:3,
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 3,
|
||||
borderColor: 'rgba(52, 156, 172,1)',
|
||||
color:'rgba(4, 28, 52,1)',
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
data: this.props.data[2],
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='ButtonChart2itemDetailBorder'>
|
||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart2;
|
||||
6
src/components/BottomBar/substitutionCharts/Chart6.less
Normal file
6
src/components/BottomBar/substitutionCharts/Chart6.less
Normal file
@ -0,0 +1,6 @@
|
||||
.ButtonChart2itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
}
|
||||
38
src/components/BottomBar/substitutionCharts/Chart7.jsx
Normal file
38
src/components/BottomBar/substitutionCharts/Chart7.jsx
Normal file
@ -0,0 +1,38 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import './Chart7.less'
|
||||
|
||||
export default class Chart7 extends Component {
|
||||
|
||||
parseData() {
|
||||
const { data } = this.props
|
||||
const name = Object.keys(data)
|
||||
const Value = Object.values(data)
|
||||
return name.map((item, index) => (
|
||||
|
||||
<div className='buttonChart7FormBorder' key={index}>
|
||||
|
||||
<div className='buttonChart7FormTxt1Border'>
|
||||
<h2 className='buttonChart7FormTxt1'>{name[index]}:</h2>
|
||||
</div>
|
||||
<div className='buttonChart7FormTxt2Border'>
|
||||
<h2 className='buttonChart7FormTxt2'>{Value[index]}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
))
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='ButtonChart7itemDetailBorder'>
|
||||
{this.parseData()}
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
44
src/components/BottomBar/substitutionCharts/Chart7.less
Normal file
44
src/components/BottomBar/substitutionCharts/Chart7.less
Normal file
@ -0,0 +1,44 @@
|
||||
.ButtonChart7itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top:-8px;
|
||||
|
||||
.buttonChart7FormBorder {
|
||||
background: url(../../assets/ButtonChart7ItemBg.png);
|
||||
margin-top: 1.5%;
|
||||
width: 288px;
|
||||
height: 48px;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: left;
|
||||
.buttonChart7FormTxt2Border {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
.buttonChart7FormTxt2 {
|
||||
margin-left: 20%;
|
||||
margin-right: 5%;
|
||||
margin-top: 13px;
|
||||
text-align:left;
|
||||
font-size: 15px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
.buttonChart7FormTxt1Border {
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
|
||||
.buttonChart7FormTxt1 {
|
||||
margin-top: 13px;
|
||||
margin-left: 3%;
|
||||
text-align:right;
|
||||
font-size: 15px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
19
src/components/CenterTopData/index.jsx
Normal file
19
src/components/CenterTopData/index.jsx
Normal file
@ -0,0 +1,19 @@
|
||||
import React from 'react'
|
||||
|
||||
import Item2 from './substitutionCharts/Chart1.jsx'
|
||||
import Item1 from './substitutionCharts/Chart2.jsx'
|
||||
|
||||
import cls from './index.module.less'
|
||||
|
||||
export default function index() {
|
||||
return (
|
||||
<div className='flex justify-between w-full h-full'>
|
||||
<div className={cls.leftGrid}>
|
||||
<Item1 />
|
||||
</div>
|
||||
<div className={cls.rightTable}>
|
||||
<Item2 />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
8
src/components/CenterTopData/index.module.less
Normal file
8
src/components/CenterTopData/index.module.less
Normal file
@ -0,0 +1,8 @@
|
||||
.leftGrid {
|
||||
width: 416px;
|
||||
height: 212px;
|
||||
}
|
||||
.rightTable {
|
||||
width: 410px;
|
||||
height: 240px;
|
||||
}
|
||||
59
src/components/CenterTopData/substitutionCharts/Chart1.jsx
Normal file
59
src/components/CenterTopData/substitutionCharts/Chart1.jsx
Normal file
@ -0,0 +1,59 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import './Chart1.less'
|
||||
|
||||
import { ScrollBoard } from '@jiaminghi/data-view-react'
|
||||
|
||||
let data = [
|
||||
['产线0', '10mm', '10mm', '10mm'],
|
||||
['产线2', '8mm', '8mm', '8mm'],
|
||||
['产线3', '15mm', '15mm', '15mm'],
|
||||
['产线4', '15mm', '15mm', '15mm'],
|
||||
]
|
||||
|
||||
let header = ['产线名', '原板宽度', '净板宽', '玻璃厚度']
|
||||
|
||||
let config = {
|
||||
headerBGC: 'rgba(4, 44, 76, 0.3)',
|
||||
header: ['<span style="color:#fff">产线名<span/>', '<span style="color:#fff">原板宽度<span/>', '<span style="color:#fff">净板宽<span/>', '<span style="color:#fff">玻璃厚度<span/>'],
|
||||
oddRowBGC: "#042444",
|
||||
evenRowBGC: "#042c4c",
|
||||
columnWidth: [90],
|
||||
headerHeight: 40,
|
||||
hoverPause: false,
|
||||
data: replaceStyle(data, 0.7)
|
||||
}
|
||||
|
||||
function replaceStyle(Arr, opencity) {
|
||||
let temp = [];
|
||||
|
||||
for (let i = 0; i < Arr.length; i++) {
|
||||
temp[i] = [];
|
||||
for (let j = 0; j < Arr[i].length; j++) {
|
||||
temp[i][j] = ` <span style="color:rgba(255, 255, 255,${opencity})">${Arr[i][j]}<span/>`
|
||||
}
|
||||
}
|
||||
|
||||
return temp;
|
||||
}
|
||||
|
||||
class Chart1 extends Component {
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='CenterChart1itemDetailBorder'>
|
||||
<h2 className='CenterChart1itemTXT'> 当前产线生产规格</h2>
|
||||
<div className='CenterChart1itemContainer'>
|
||||
<span className='CenterFormitemDetailBorderLine1'></span>
|
||||
<span className='CenterFormitemDetailBorderLine2'></span>
|
||||
<span className='CenterFormitemDetailBorderLine3'></span>
|
||||
<ScrollBoard config={config} style={{ width: '105%', height: '240%' }} />
|
||||
</div>
|
||||
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart1;
|
||||
52
src/components/CenterTopData/substitutionCharts/Chart1.less
Normal file
52
src/components/CenterTopData/substitutionCharts/Chart1.less
Normal file
@ -0,0 +1,52 @@
|
||||
.CenterChart1itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
justify-content: flex-start;
|
||||
|
||||
background-color: rgba(4, 44, 76, 0.2);
|
||||
.CenterChart1itemTXT {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
font-size: 20px;
|
||||
color:rgba(255,255,255,0.8);
|
||||
text-align: center;
|
||||
margin-top: 2%;
|
||||
|
||||
}
|
||||
.CenterChart1itemContainer {
|
||||
|
||||
width: 95%;
|
||||
height:100px;
|
||||
position:relative;
|
||||
|
||||
.CenterFormitemDetailBorderLine1 {
|
||||
width: 1px;
|
||||
height: 200px;
|
||||
background-color:#041c2c;
|
||||
float: left;
|
||||
margin-left: 18%;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
}
|
||||
.CenterFormitemDetailBorderLine2 {
|
||||
width: 1px;
|
||||
height: 200px;
|
||||
background-color:#041c2c;
|
||||
float: left;
|
||||
margin-left: 46%;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
}
|
||||
.CenterFormitemDetailBorderLine3 {
|
||||
width: 1px;
|
||||
height: 200px;
|
||||
background-color:#041c2c;
|
||||
float: left;
|
||||
margin-left: 72%;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
89
src/components/CenterTopData/substitutionCharts/Chart2.jsx
Normal file
89
src/components/CenterTopData/substitutionCharts/Chart2.jsx
Normal file
@ -0,0 +1,89 @@
|
||||
|
||||
import React, { useEffect, useState, useRef } from 'react'
|
||||
|
||||
import icon1 from '@/assets/CenterChart2icon1.svg'
|
||||
import icon2 from '@/assets/CenterChart2icon2.svg'
|
||||
import icon3 from '@/assets/CenterChart2icon3.svg'
|
||||
import icon4 from '@/assets/CenterChart2icon4.svg'
|
||||
|
||||
|
||||
import './Chart2.less'
|
||||
|
||||
|
||||
const Chart2 = () => {
|
||||
|
||||
const timmer = useRef();
|
||||
const [year, setYear] = useState('')
|
||||
const [month, setMonth] = useState('')
|
||||
const [day, setDay] = useState('')
|
||||
|
||||
|
||||
const getNewDate = () => {
|
||||
const Time = new Date();
|
||||
const year = Time.getFullYear();
|
||||
const month = Time.getMonth() + 1;
|
||||
const day = Time.getDate();
|
||||
|
||||
|
||||
setYear(year);
|
||||
setMonth(month);
|
||||
setDay(day);
|
||||
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
getNewDate();
|
||||
timmer.current = setInterval(getNewDate, 10000);
|
||||
return () => {
|
||||
clearTimeout(timmer.current)
|
||||
}
|
||||
//eslint-disable-next-line
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className='CenterChart2itemDetailBorder'>
|
||||
|
||||
<div className='CenterChart2itemcontentOUT'>
|
||||
<div className='CenterChart2itemcontent'>
|
||||
<img src={icon4} alt="Error" className='CenterChart2itemcontentIcon' />
|
||||
<div className='CenterChart2itemcontentText' >
|
||||
<h2 className='CenterChart2itemcontentText1'>车间温度</h2>
|
||||
<h2 className='CenterChart2itemcontentText2'> 27℃</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className='CenterChart2itemcontent'>
|
||||
<img src={icon2} alt="Error" className='CenterChart2itemcontentIcon' />
|
||||
<div className='CenterChart2itemcontentText' >
|
||||
<h2 className='CenterChart2itemcontentText1'>当前火向</h2>
|
||||
<h2 className='CenterChart2itemcontentText2'> XXX</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='CenterChart2itemcontentOUT'>
|
||||
<div className='CenterChart2itemcontent'>
|
||||
<img src={icon1} alt="Error" className='CenterChart2itemcontentIcon' />
|
||||
<div className='CenterChart2itemcontentText' >
|
||||
<h2 className='CenterChart2itemcontentText1'>换火时间</h2>
|
||||
<h2 className='CenterChart2itemcontentText2'> 12:41:45</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className='CenterChart2itemcontent'>
|
||||
<img src={icon3} alt="Error" className='CenterChart2itemcontentIcon' />
|
||||
<div className='CenterChart2itemcontentText' >
|
||||
<h2 className='CenterChart2itemcontentText1'>剩余时间</h2>
|
||||
<h2 className='CenterChart2itemcontentText2'> 20h</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
||||
export default Chart2;
|
||||
53
src/components/CenterTopData/substitutionCharts/Chart2.less
Normal file
53
src/components/CenterTopData/substitutionCharts/Chart2.less
Normal file
@ -0,0 +1,53 @@
|
||||
.CenterChart2itemDetailBorder {
|
||||
width: 440px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
|
||||
.CenterChart2itemcontentOUT {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
.CenterChart2itemcontent {
|
||||
width: 224px;
|
||||
height: 95%;
|
||||
background: url(../../../assets/CenterChart2ItemBg.png);
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: left;
|
||||
margin-top: 3%;
|
||||
margin-left: 2%;
|
||||
|
||||
.CenterChart2itemcontentIcon {
|
||||
margin-top: 2%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
.CenterChart2itemcontentText {
|
||||
width: 50%;
|
||||
height: 70%;
|
||||
margin-left: -2%;
|
||||
|
||||
.CenterChart2itemcontentText1 {
|
||||
color: rgba(224, 222, 222, 0.8);
|
||||
font-size: 15px;
|
||||
margin-top: 10%;
|
||||
}
|
||||
|
||||
.CenterChart2itemcontentText2 {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 34px;
|
||||
margin-top: -10%;
|
||||
margin-left: -3%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
68
src/components/Head/index.jsx
Normal file
68
src/components/Head/index.jsx
Normal file
@ -0,0 +1,68 @@
|
||||
import React, { useEffect, useState, useRef } from 'react'
|
||||
|
||||
import TopSide from "../../assets/TopSide.png"
|
||||
import LeftLine from "../../assets/TopTitleLeftIcon.png"
|
||||
import RightLine from "../../assets/TopTitleRightIcon.png"
|
||||
import ButtonLine from "../../assets/TopButtonLine.png"
|
||||
import './index.less'
|
||||
|
||||
export default function index() {
|
||||
const timmer = useRef()
|
||||
const [Hour, setHour] = useState('');
|
||||
const [Seconds, setSeconds] = useState('');
|
||||
const [Minutes, setMinutes] = useState('');
|
||||
const [Year, setYear] = useState('');
|
||||
const [Month, setMonth] = useState('');
|
||||
const [Day, setDay] = useState('');
|
||||
|
||||
const getNewDate = () => {
|
||||
const time = new Date();
|
||||
const year = time.getFullYear();
|
||||
const month = time.getMonth() + 1;
|
||||
const day = time.getDate();
|
||||
const hour = time.getHours();
|
||||
const minutes = time.getMinutes();
|
||||
const s = time.getSeconds();
|
||||
const seconds = s <= 9 ? "0" + s : s;
|
||||
// const t = `${year}年${month}月${day}日 ${hour}:${minutes}:${seconds}`
|
||||
setHour(hour)
|
||||
setSeconds(seconds)
|
||||
if (minutes < 10) {
|
||||
setMinutes(`0${minutes}`)
|
||||
} else {
|
||||
setMinutes(minutes)
|
||||
}
|
||||
setYear(year)
|
||||
setMonth(month)
|
||||
setDay(day)
|
||||
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
timmer.current = setInterval(getNewDate, 1000);
|
||||
return () => {
|
||||
clearTimeout(timmer.current)
|
||||
}
|
||||
// eslint-disable-next-line
|
||||
}, [])
|
||||
|
||||
|
||||
return (
|
||||
<div className='TopTitleBoder' >
|
||||
<img src={TopSide} alt="图片丢失" className='TopSideLeft' />
|
||||
<div className='TopSideLeftLine' >
|
||||
<img src={LeftLine} alt="图片丢失" className='TopSideLeftLineicon' />
|
||||
<h2 className='TopSideLeftTxt'>单位：中建材智能自动化研究院</h2>
|
||||
</div>
|
||||
<div >
|
||||
<h2 className='TopTitleText'>许昌安彩新能科技  4800万方光伏轻质基板生产线 </h2>
|
||||
<img src={ButtonLine} alt="图片加载错误" className='TopButtonLine' />
|
||||
</div>
|
||||
<div className='TopSideRightLine' >
|
||||
<h2 className='TopSideRightTxt'>{Year}.{Month}.{Day} {Hour}.{Minutes}.{Seconds}</h2>
|
||||
<img src={RightLine} alt="图片丢失" className='TopSideRightLineicon' />
|
||||
</div>
|
||||
<img src={TopSide} alt="图片丢失" className='TopSideRight' />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
89
src/components/Head/index.less
Normal file
89
src/components/Head/index.less
Normal file
@ -0,0 +1,89 @@
|
||||
.TopTitleBoder {
|
||||
width: 3840px;
|
||||
height: 84px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
background: #17b2747a;
|
||||
|
||||
.TopSideRight {
|
||||
margin-top: 40px;
|
||||
margin-right: 40px;
|
||||
width: 493px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.TopSideLeft {
|
||||
margin-left: 40px;
|
||||
margin-top: 40px;
|
||||
width: 493px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.TopSideLeftLine {
|
||||
background: url('../../assets/TopTitleLeft.png');
|
||||
width: 899px;
|
||||
height: 40px;
|
||||
margin-top: 42px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: right;
|
||||
|
||||
.TopSideLeftLineicon {
|
||||
margin-right: 40px;
|
||||
margin-top: 25px;
|
||||
width: 204.32px;
|
||||
height: 2.79px;
|
||||
}
|
||||
|
||||
.TopSideLeftTxt {
|
||||
margin-right: 120px;
|
||||
margin-top: 15px;
|
||||
color: rgb(255, 255, 255, 0.8);
|
||||
font-size: 20px;
|
||||
font-weight: 300px;
|
||||
line-height: 22.174976px;
|
||||
}
|
||||
}
|
||||
|
||||
.TopSiderightLine {
|
||||
background: url('../../assets/TopTitleRight.png');
|
||||
width: 899px;
|
||||
height: 40px;
|
||||
margin-top: 42px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: left;
|
||||
|
||||
.TopSideRightLineicon {
|
||||
margin-left: 40px;
|
||||
margin-top: 25px;
|
||||
width: 204.32px;
|
||||
height: 2.79px;
|
||||
}
|
||||
|
||||
.TopSideRightTxt {
|
||||
margin-left: 120px;
|
||||
margin-top: 15px;
|
||||
color: rgb(255, 255, 255, 0.8);
|
||||
font-size: 20px;
|
||||
font-weight: 600px;
|
||||
line-height: 22.174976px;
|
||||
}
|
||||
}
|
||||
|
||||
.TopButtonLine {
|
||||
margin-top: -9px;
|
||||
width: 760px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.TopTitleText {
|
||||
margin-top: 16px;
|
||||
letter-spacing: 8px;
|
||||
font-size: 32px;
|
||||
color: #00fff7;
|
||||
text-align: center;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
72
src/components/LeftBar/Chart1.jsx
Normal file
72
src/components/LeftBar/Chart1.jsx
Normal file
@ -0,0 +1,72 @@
|
||||
import React from 'react'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
import Item from './substitutionCharts/Chart1.jsx'
|
||||
|
||||
import Icon from '../../assets/Icon/LeftrChart1ICon.png'
|
||||
import Icon1 from '../../assets/ButtonChart7Icon1.svg'
|
||||
import Icon2 from '../../assets/ButtonChart7Icon2.svg'
|
||||
|
||||
import './Chart1.less'
|
||||
|
||||
var Data1 = {
|
||||
'冷水管温度': '3℃',
|
||||
'主线冷水管水压': ' 500Pa',
|
||||
'冷管流量': '800m³'
|
||||
}
|
||||
|
||||
var Data2 = {
|
||||
'冷水管温度': '8℃',
|
||||
'主线冷水管水压': ' 900Pa',
|
||||
'冷管流量': '400m³'
|
||||
}
|
||||
//循环的参数
|
||||
var Number = 1
|
||||
|
||||
export default function Chart1() {
|
||||
|
||||
useEffect(() => {
|
||||
setInterval(() => {
|
||||
Number = Number + 1
|
||||
setNum(Number % 2)
|
||||
if (Number == 3) {
|
||||
Number = 1
|
||||
}
|
||||
}, 10000)
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
const [num, setNum] = useState(1)
|
||||
|
||||
return (
|
||||
<div className='LeftChart1AllBorder'>
|
||||
<div className='LeftChart1ItemitemBorder'>
|
||||
<img src={Icon} alt="图片加载错误" className='LeftChart1ItemIcon' />
|
||||
<div className='LeftChart1ItemTitle'>公共工程</div>
|
||||
</div>
|
||||
<div className='LeftChart1ItemBorder'>
|
||||
<div className='LeftChart1ItemRow'>
|
||||
<div className='LeftChart1ItemRowDetail'>
|
||||
<img src={Icon1} alt="" />
|
||||
<h2 className='LeftChart1ItemRowDetailTxt'>水泵水管</h2>
|
||||
</div>
|
||||
<Item data={num == 1 ? Data1 : Data2} />
|
||||
</div>
|
||||
<div className='LeftChart1ItemRow'></div>
|
||||
<div className='LeftChart1ItemRow'>
|
||||
<div className='LeftChart1ItemRowDetail'>
|
||||
<img src={Icon2} alt="" />
|
||||
<h2 className='LeftChart1ItemRowDetailTxt'>氢气</h2>
|
||||
</div>
|
||||
<Item data={num == 1 ? Data1 : Data2} />
|
||||
</div>
|
||||
<div className='LeftChart1ItemRow'></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
63
src/components/LeftBar/Chart1.less
Normal file
63
src/components/LeftBar/Chart1.less
Normal file
@ -0,0 +1,63 @@
|
||||
.LeftChart1AllBorder {
|
||||
width: 625px;
|
||||
height: 305px;
|
||||
background: url('../../assets/ItemBg.png');
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.LeftChart1ItemitemBorder {
|
||||
margin-top: 24px;
|
||||
margin-left: 24px;
|
||||
width: 202px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
vertical-align: middle;
|
||||
|
||||
.LeftChart1ItemIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.LeftChart1ItemTitle {
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
font-weight: 900px;
|
||||
margin-left: 8px;
|
||||
margin-top: -5px;
|
||||
font-family: 'pingFangSC-Medium';
|
||||
}
|
||||
}
|
||||
|
||||
.LeftChart1ItemBorder {
|
||||
width: 95%;
|
||||
height: 227px;
|
||||
margin-left: 16px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
.LeftChart1ItemRow {
|
||||
width: 288px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
justify-content: flex-start;
|
||||
.LeftChart1ItemRowDetail{
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.LeftChart1ItemRowDetailTxt{
|
||||
font-size: 22px;
|
||||
font-weight: 400px;
|
||||
color: #FFFFFF;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
113
src/components/LeftBar/Chart2.jsx
Normal file
113
src/components/LeftBar/Chart2.jsx
Normal file
@ -0,0 +1,113 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { motion } from "framer-motion"
|
||||
|
||||
//烟气处理
|
||||
import Item1 from './substitutionCharts/Chart2.jsx'
|
||||
|
||||
//温度变化
|
||||
import Item2 from './substitutionCharts/Chart3.jsx'
|
||||
|
||||
//发电量
|
||||
import Item3 from './substitutionCharts/Chart4.jsx'
|
||||
|
||||
import Icon1 from '../../assets/Icon/LeftChart2Icon.png'
|
||||
import Icon2 from '../../assets/Icon/LeftChart2Icon2.png'
|
||||
import './Chart2.less'
|
||||
|
||||
const data = [10, 25, 30, 25, 58, 23, 36, 34]
|
||||
|
||||
//温度
|
||||
const Temptitle = "温度变化";
|
||||
const Tempxdata = ["1:00", "2:00", "3:00", "4:00", "5:00", "6:00", "7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "24:00"]
|
||||
const Tempdata = [420, 410, 410, 300, 350, 380, 352, 410, 410, 300, 350, 380, 352, 410, 410, 300, 350, 380, 352, 350, 380, 352, 380, 352]
|
||||
|
||||
|
||||
//风机频率数据
|
||||
var data2 = [[800, 4302, 200, 3234, 800, 4302, 200, 3234, 800, 4302, 200, 3234, 800, 4302, 200, 3234],
|
||||
[4450, 553, 2350, 234, 4450, 553, 2350, 234, 4450, 553, 2350, 234, 4450, 553, 2350, 234],
|
||||
[2400, 305, 3500, 234, 2400, 305, 3500, 234, 2400, 305, 3500, 234, 2400, 305, 3500, 234],
|
||||
[50, 3302, 480, 3334, 50, 3302, 480, 3334, 50, 3302, 480, 3334, 50, 3302, 480, 3334],
|
||||
]
|
||||
|
||||
var data3 = [[4450, 553, 2350, 234, 4452, 553, 2350, 234, 4450, 553, 2350, 234, 4450, 553, 2350, 234],
|
||||
[700, 4002, 200, 3234, 800, 4302, 200, 3234, 700, 3302, 200, 3234, 800, 4302, 200, 3234],
|
||||
[50, 3302, 480, 3334, 53, 3302, 480, 3034, 50, 3302, 480, 3334, 20, 3302, 580, 3334],
|
||||
[2400, 305, 3500, 234, 2400, 305, 3500, 234, 2400, 305, 3500, 234, 2400, 205, 3500, 234],
|
||||
]
|
||||
|
||||
|
||||
export default function Chart2() {
|
||||
|
||||
const [index, setIndex] = useState(1)
|
||||
let num = 1;
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => { SwitchIndex() }, 10000);
|
||||
return () => clearInterval(timer);
|
||||
}, [])
|
||||
|
||||
function SwitchIndex() {
|
||||
num = num + 1
|
||||
if (num < 3) {
|
||||
setIndex(num)
|
||||
}
|
||||
else {
|
||||
num = 1
|
||||
setIndex(num)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function SwitchData(index) {
|
||||
switch (index) {
|
||||
case 1: return <Item data={data} />
|
||||
case 2: return <Item1 data={Tempdata} title={Temptitle} xdata={Tempxdata} />
|
||||
}
|
||||
}
|
||||
|
||||
//切换标题
|
||||
function SwitchTitle(index) {
|
||||
switch (index) {
|
||||
case 1: return "烟气处理"
|
||||
case 2: return "余热发电"
|
||||
}
|
||||
}
|
||||
|
||||
//切换LOGO
|
||||
function SwitchIcon(index) {
|
||||
switch (index) {
|
||||
case 1: return Icon1
|
||||
case 2: return Icon2
|
||||
}
|
||||
}
|
||||
|
||||
//切换图表1
|
||||
function SwitchChart1(index) {
|
||||
switch (index) {
|
||||
case 1: return <Item1 />
|
||||
case 2: return <Item3 />
|
||||
}
|
||||
}
|
||||
|
||||
//切换图表2
|
||||
function SwitchChart2(index) {
|
||||
switch (index) {
|
||||
case 1: return <Item2 data={data2} />
|
||||
case 2: return <Item2 data={data3} />
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='LeftChart2AllBorder'>
|
||||
<div className='LeftChart2ItemitemBorder'>
|
||||
<img src={SwitchIcon(index)} alt="图片加载错误" className='LeftChart2ItemIcon' />
|
||||
<div className='LeftChart2ItemTitle'>{SwitchTitle(index)}</div>
|
||||
</div>
|
||||
<div className='LeftChart2Item1Row1'>
|
||||
{SwitchChart1(index)}
|
||||
</div>
|
||||
<div className='LeftChart2Item1Row2'>
|
||||
{SwitchChart2(index)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
48
src/components/LeftBar/Chart2.less
Normal file
48
src/components/LeftBar/Chart2.less
Normal file
@ -0,0 +1,48 @@
|
||||
.LeftChart2AllBorder {
|
||||
width: 624px;
|
||||
height: 632px;
|
||||
background: url('../../assets/ItemBg2.png');
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.LeftChart2ItemitemBorder {
|
||||
margin-top: 24px;
|
||||
margin-left: 24px;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
vertical-align: middle;
|
||||
|
||||
.LeftChart2ItemIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.LeftChart2ItemTitle {
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
margin-left: 8px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.LeftChart2Item1Row1 {
|
||||
width: 95%;
|
||||
height: 271px;
|
||||
align-self: center;
|
||||
margin-top: -56px;
|
||||
|
||||
|
||||
}
|
||||
.LeftChart2Item1Row2 {
|
||||
width: 95%;
|
||||
height: 271px;
|
||||
align-self: center;
|
||||
margin-bottom:24px;
|
||||
|
||||
}
|
||||
}
|
||||
15
src/components/LeftBar/index.jsx
Normal file
15
src/components/LeftBar/index.jsx
Normal file
@ -0,0 +1,15 @@
|
||||
import React from 'react'
|
||||
|
||||
|
||||
import Chart1 from './Chart1'
|
||||
import Chart2 from './Chart2'
|
||||
|
||||
import './index.less'
|
||||
export default function index() {
|
||||
return (
|
||||
<div className='LeftBorder'>
|
||||
<Chart1/>
|
||||
<Chart2/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
25
src/components/LeftBar/index.less
Normal file
25
src/components/LeftBar/index.less
Normal file
@ -0,0 +1,25 @@
|
||||
.LeftBorder {
|
||||
width: 625px;
|
||||
height: 966px;
|
||||
margin-left: 40px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.LeftChart1Border {
|
||||
width: 100%;
|
||||
height: 304px;
|
||||
background: url('../../assets/ItemBg.png');
|
||||
|
||||
}
|
||||
|
||||
.LeftChart2Border {
|
||||
width: 624px;
|
||||
height: 632px;
|
||||
background: url('../../assets/ItemBg2.png');
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//justify-content: space-between;
|
||||
}
|
||||
}
|
||||
38
src/components/LeftBar/substitutionCharts/Chart1.jsx
Normal file
38
src/components/LeftBar/substitutionCharts/Chart1.jsx
Normal file
@ -0,0 +1,38 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import './Chart1.less'
|
||||
|
||||
export default class Chart7 extends Component {
|
||||
|
||||
parseData() {
|
||||
const { data } = this.props
|
||||
const name = Object.keys(data)
|
||||
const Value = Object.values(data)
|
||||
return name.map((item, index) => (
|
||||
|
||||
<div className='buttonChart7FormBorder' key={index}>
|
||||
|
||||
<div className='buttonChart7FormTxt1Border'>
|
||||
<h2 className='buttonChart7FormTxt1'>{name[index]}:</h2>
|
||||
</div>
|
||||
<div className='buttonChart7FormTxt2Border'>
|
||||
<h2 className='buttonChart7FormTxt2'>{Value[index]}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
))
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='ButtonChart7itemDetailBorder'>
|
||||
{this.parseData()}
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
44
src/components/LeftBar/substitutionCharts/Chart1.less
Normal file
44
src/components/LeftBar/substitutionCharts/Chart1.less
Normal file
@ -0,0 +1,44 @@
|
||||
.ButtonChart7itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top:-8px;
|
||||
|
||||
.buttonChart7FormBorder {
|
||||
background: url(../../../assets/ButtonChart7ItemBg.png);
|
||||
margin-top: 1.5%;
|
||||
width: 288px;
|
||||
height: 48px;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: left;
|
||||
.buttonChart7FormTxt2Border {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
.buttonChart7FormTxt2 {
|
||||
margin-left: 20%;
|
||||
margin-right: 5%;
|
||||
margin-top: 13px;
|
||||
text-align:left;
|
||||
font-size: 15px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
.buttonChart7FormTxt1Border {
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
|
||||
.buttonChart7FormTxt1 {
|
||||
margin-top: 13px;
|
||||
margin-left: 3%;
|
||||
text-align:right;
|
||||
font-size: 15px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
109
src/components/LeftBar/substitutionCharts/Chart2.jsx
Normal file
109
src/components/LeftBar/substitutionCharts/Chart2.jsx
Normal file
@ -0,0 +1,109 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import './Chart2.less'
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
var data = [[320, 302, 301, 334, 390, 330, 320, 100], [120, 132, 101, 134, 90, 230, 210, 100], [220, 182, 191, 234, 290, 330, 310, 100], [150, 212, 201, 154, 190, 330, 410, 100], [320, 332, 301, 334, 290, 330, 320, 300], [320, 332, 301, 334, 290, 330, 320, 300]]
|
||||
|
||||
var name = ['烟气总量', '余氧总量', '氮氧化物排放浓度', '二氧化碳排放浓度', '颗粒物排放浓度', '烟气流速']
|
||||
|
||||
|
||||
var color = ["#2760ff", "#8167f6", "#5b9bff", "#99d66c", "#ffd160", "#ff8a40"]
|
||||
var fontColor = '#fff'
|
||||
var lineColor = 'rgba(33, 50, 89,0.8)'
|
||||
|
||||
function makeseries(data, name, color) {
|
||||
if (data) {
|
||||
let All = []
|
||||
for (let i in data) {
|
||||
All.push({
|
||||
name: name[i],
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: "20%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: color[i],
|
||||
},
|
||||
},
|
||||
label: {
|
||||
|
||||
},
|
||||
data: data[i]
|
||||
})
|
||||
}
|
||||
return All;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
class Chart2 extends Component {
|
||||
|
||||
|
||||
getOption = () => ({
|
||||
|
||||
legend: {
|
||||
right: "0%",
|
||||
width: "70%",
|
||||
height: "14%",
|
||||
itemWidth: 17,
|
||||
itemHeight: 13.5,
|
||||
orient: "vertical",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#F1F1F3",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
show:true,
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
width: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: makeseries(data, name, color)
|
||||
})
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='LeftChart2itemDetailBorder'>
|
||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart2;
|
||||
11
src/components/LeftBar/substitutionCharts/Chart2.less
Normal file
11
src/components/LeftBar/substitutionCharts/Chart2.less
Normal file
@ -0,0 +1,11 @@
|
||||
.LeftChart2itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top:-8px;
|
||||
|
||||
|
||||
}
|
||||
120
src/components/LeftBar/substitutionCharts/Chart3.jsx
Normal file
120
src/components/LeftBar/substitutionCharts/Chart3.jsx
Normal file
@ -0,0 +1,120 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import './Chart3.less'
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
|
||||
|
||||
var name = ['10HZ-15HZ', '15HZ-25HZ', '30HZ-35HZ', '40HZ-45HZ']
|
||||
|
||||
|
||||
var color = ["#2760ff", "#ffb70c", "#3dbdc2", "#e02094"]
|
||||
var fontColor = '#fff'
|
||||
var lineColor = 'rgba(33, 50, 89,0.8)'
|
||||
|
||||
function makeseries(data, name, color) {
|
||||
if (data) {
|
||||
let All = []
|
||||
for (let i in data) {
|
||||
All.push({
|
||||
name: name[i],
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
symbol: "circle",
|
||||
data: data[i],
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: color[i]
|
||||
},
|
||||
itemStyle: {
|
||||
|
||||
color: color[i],
|
||||
|
||||
},
|
||||
})
|
||||
}
|
||||
return All;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
class Chart3 extends Component {
|
||||
|
||||
|
||||
getOption = () => ({
|
||||
|
||||
title: {
|
||||
text: '风机运行频率',
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: "#52FFF8"
|
||||
},
|
||||
},
|
||||
|
||||
legend: {
|
||||
right: "0%",
|
||||
width: "70%",
|
||||
height: "14%",
|
||||
itemWidth: 17,
|
||||
itemHeight: 13.5,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#F1F1F3",
|
||||
},
|
||||
// itemStyle: {
|
||||
// color: "rgba(222, 9, 9, 1)"
|
||||
// },
|
||||
data: name
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%', containLabel: true
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7', 'day5', 'day6', 'day7', 'day6', 'day7', 'day5', 'day6', 'day7'],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
show:true,
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: makeseries(this.props.data, name, color)
|
||||
})
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='LeftChart3itemDetailBorder'>
|
||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart3;
|
||||
9
src/components/LeftBar/substitutionCharts/Chart3.less
Normal file
9
src/components/LeftBar/substitutionCharts/Chart3.less
Normal file
@ -0,0 +1,9 @@
|
||||
.LeftChart3itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top:-8px;
|
||||
}
|
||||
126
src/components/LeftBar/substitutionCharts/Chart4.jsx
Normal file
126
src/components/LeftBar/substitutionCharts/Chart4.jsx
Normal file
@ -0,0 +1,126 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import './Chart4.less'
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
|
||||
|
||||
var name = ['10HZ-15HZ', '15HZ-25HZ', '30HZ-35HZ', '40HZ-45HZ']
|
||||
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
var color = ["#2760ff", "#ffb70c", "#3dbdc2", "#e02094"]
|
||||
var fontColor = '#fff'
|
||||
var lineColor = 'rgba(33, 50, 89,0.8)'
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
class Chart3 extends Component {
|
||||
|
||||
|
||||
getOption = () => ({
|
||||
|
||||
title: {
|
||||
text: '发电量',
|
||||
top: "2%",
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: "#52FFF8"
|
||||
},
|
||||
},
|
||||
|
||||
legend: {
|
||||
right: "0%",
|
||||
width: "70%",
|
||||
height: "14%",
|
||||
itemWidth: 17,
|
||||
itemHeight: 13.5,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#F1F1F3",
|
||||
},
|
||||
// itemStyle: {
|
||||
// color: "rgba(222, 9, 9, 1)"
|
||||
// },
|
||||
data: name
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '0%',
|
||||
top:'30%',
|
||||
containLabel: true,
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7', 'day5', 'day6', 'day7', 'day6', 'day7', 'day5', 'day6', 'day7'],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: {
|
||||
|
||||
name:'发电量',
|
||||
type: 'line',
|
||||
showSymbol: true,
|
||||
symbol: "circle",
|
||||
symbolSize:8,
|
||||
symbolBorder:"rgba(17, 36, 246,0.1)",
|
||||
data: [200,320,121,125,585,213,521,326,542,258,632,145,258,632,145],
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color:"rgba(246, 23, 106,0.9)",
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(246, 23, 106,0.3)' },
|
||||
{ offset: 0.5, color: 'rgba(246, 23, 106,0.2)' },
|
||||
{ offset: 1, color: 'rgba(246, 23, 106,0.1)' }
|
||||
]),
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#F6176A',
|
||||
color: "rgba(4, 20, 36,0.8)",
|
||||
},
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='LeftChart4itemDetailBorder'>
|
||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '80%' }} />
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart3;
|
||||
9
src/components/LeftBar/substitutionCharts/Chart4.less
Normal file
9
src/components/LeftBar/substitutionCharts/Chart4.less
Normal file
@ -0,0 +1,9 @@
|
||||
.LeftChart4itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
28
src/components/RightBar/Chart1.jsx
Normal file
28
src/components/RightBar/Chart1.jsx
Normal file
@ -0,0 +1,28 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
|
||||
import Item from './substitutionCharts/Chart1/index.jsx'
|
||||
import Icon1 from '../../assets/Icon/rightChart1ICon.png'
|
||||
|
||||
import "./Chart1.less"
|
||||
|
||||
export default function Chart1() {
|
||||
return (
|
||||
<div className='rightChart1Border'>
|
||||
|
||||
<div className='RightChart1ItemitemBorder'>
|
||||
<img src={Icon1} alt="图片加载错误" className='RightChart1ItemIcon' />
|
||||
<div className='RightChart1Title'>储能电站</div>
|
||||
</div>
|
||||
<div className='RightChart1ItemBorder'>
|
||||
<Item index={1} data={345} name={'日充电量'} unit={'kwh'} />
|
||||
<Item index={2} data={345} name={'月充电量'} unit={'kwh'} />
|
||||
<Item index={3} data={2} name={'日收益'} unit={'万元'} />
|
||||
<Item index={1} data={215} name={'日放电量'} unit={'kwh'} />
|
||||
<Item index={2} data={345} name={'月放电量'} unit={'kwh'} />
|
||||
<Item index={3} data={12} name={'月收益'} unit={'万元'} />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user