update
This commit is contained in:
lb
parent
909bd92ee6
commit
446234c2aa
155
package-lock.json
generated
155
package-lock.json
generated
@ -28,6 +28,7 @@
|
|||||||
"case-sensitive-paths-webpack-plugin": "^2.4.0",
|
"case-sensitive-paths-webpack-plugin": "^2.4.0",
|
||||||
"css-loader": "^6.5.1",
|
"css-loader": "^6.5.1",
|
||||||
"css-minimizer-webpack-plugin": "^3.2.0",
|
"css-minimizer-webpack-plugin": "^3.2.0",
|
||||||
|
"dayjs": "^1.11.10",
|
||||||
"dotenv": "^10.0.0",
|
"dotenv": "^10.0.0",
|
||||||
"dotenv-expand": "^5.1.0",
|
"dotenv-expand": "^5.1.0",
|
||||||
"echarts": "^5.4.3",
|
"echarts": "^5.4.3",
|
||||||
@ -4204,6 +4205,89 @@
|
|||||||
"url": "https://github.com/sponsors/gregberge"
|
"url": "https://github.com/sponsors/gregberge"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@testing-library/dom": {
|
||||||
|
"version": "9.3.4",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@testing-library/dom/-/dom-9.3.4.tgz",
|
||||||
|
"integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/code-frame": "^7.10.4",
|
||||||
|
"@babel/runtime": "^7.12.5",
|
||||||
|
"@types/aria-query": "^5.0.1",
|
||||||
|
"aria-query": "5.1.3",
|
||||||
|
"chalk": "^4.1.0",
|
||||||
|
"dom-accessibility-api": "^0.5.9",
|
||||||
|
"lz-string": "^1.5.0",
|
||||||
|
"pretty-format": "^27.0.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@testing-library/dom/node_modules/ansi-styles": {
|
||||||
|
"version": "4.3.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||||
|
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"color-convert": "^2.0.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@testing-library/dom/node_modules/chalk": {
|
||||||
|
"version": "4.1.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
|
||||||
|
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"ansi-styles": "^4.1.0",
|
||||||
|
"supports-color": "^7.1.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@testing-library/dom/node_modules/color-convert": {
|
||||||
|
"version": "2.0.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
|
||||||
|
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"color-name": "~1.1.4"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=7.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@testing-library/dom/node_modules/color-name": {
|
||||||
|
"version": "1.1.4",
|
||||||
|
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
|
||||||
|
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"node_modules/@testing-library/dom/node_modules/has-flag": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
|
||||||
|
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||||
|
"peer": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@testing-library/dom/node_modules/supports-color": {
|
||||||
|
"version": "7.2.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
|
||||||
|
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"has-flag": "^4.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@testing-library/jest-dom": {
|
"node_modules/@testing-library/jest-dom": {
|
||||||
"version": "5.17.0",
|
"version": "5.17.0",
|
||||||
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
|
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
|
||||||
@ -7138,7 +7222,7 @@
|
|||||||
},
|
},
|
||||||
"node_modules/dayjs": {
|
"node_modules/dayjs": {
|
||||||
"version": "1.11.10",
|
"version": "1.11.10",
|
||||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
|
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
|
||||||
"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
|
"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
|
||||||
},
|
},
|
||||||
"node_modules/debug": {
|
"node_modules/debug": {
|
||||||
@ -22565,6 +22649,73 @@
|
|||||||
"loader-utils": "^2.0.0"
|
"loader-utils": "^2.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@testing-library/dom": {
|
||||||
|
"version": "9.3.4",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@testing-library/dom/-/dom-9.3.4.tgz",
|
||||||
|
"integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==",
|
||||||
|
"peer": true,
|
||||||
|
"requires": {
|
||||||
|
"@babel/code-frame": "^7.10.4",
|
||||||
|
"@babel/runtime": "^7.12.5",
|
||||||
|
"@types/aria-query": "^5.0.1",
|
||||||
|
"aria-query": "5.1.3",
|
||||||
|
"chalk": "^4.1.0",
|
||||||
|
"dom-accessibility-api": "^0.5.9",
|
||||||
|
"lz-string": "^1.5.0",
|
||||||
|
"pretty-format": "^27.0.2"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"ansi-styles": {
|
||||||
|
"version": "4.3.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||||
|
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||||
|
"peer": true,
|
||||||
|
"requires": {
|
||||||
|
"color-convert": "^2.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"chalk": {
|
||||||
|
"version": "4.1.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
|
||||||
|
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||||
|
"peer": true,
|
||||||
|
"requires": {
|
||||||
|
"ansi-styles": "^4.1.0",
|
||||||
|
"supports-color": "^7.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color-convert": {
|
||||||
|
"version": "2.0.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
|
||||||
|
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||||
|
"peer": true,
|
||||||
|
"requires": {
|
||||||
|
"color-name": "~1.1.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color-name": {
|
||||||
|
"version": "1.1.4",
|
||||||
|
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
|
||||||
|
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"has-flag": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
|
||||||
|
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"supports-color": {
|
||||||
|
"version": "7.2.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
|
||||||
|
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||||
|
"peer": true,
|
||||||
|
"requires": {
|
||||||
|
"has-flag": "^4.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"@testing-library/jest-dom": {
|
"@testing-library/jest-dom": {
|
||||||
"version": "5.17.0",
|
"version": "5.17.0",
|
||||||
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
|
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
|
||||||
@ -24793,7 +24944,7 @@
|
|||||||
},
|
},
|
||||||
"dayjs": {
|
"dayjs": {
|
||||||
"version": "1.11.10",
|
"version": "1.11.10",
|
||||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
|
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
|
||||||
"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
|
"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
|
||||||
},
|
},
|
||||||
"debug": {
|
"debug": {
|
||||||
|
|||||||
@ -23,6 +23,7 @@
|
|||||||
"case-sensitive-paths-webpack-plugin": "^2.4.0",
|
"case-sensitive-paths-webpack-plugin": "^2.4.0",
|
||||||
"css-loader": "^6.5.1",
|
"css-loader": "^6.5.1",
|
||||||
"css-minimizer-webpack-plugin": "^3.2.0",
|
"css-minimizer-webpack-plugin": "^3.2.0",
|
||||||
|
"dayjs": "^1.11.10",
|
||||||
"dotenv": "^10.0.0",
|
"dotenv": "^10.0.0",
|
||||||
"dotenv-expand": "^5.1.0",
|
"dotenv-expand": "^5.1.0",
|
||||||
"echarts": "^5.4.3",
|
"echarts": "^5.4.3",
|
||||||
|
|||||||
14
src/assets/Icon/triangle.svg
Normal file
14
src/assets/Icon/triangle.svg
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>编组 13</title>
|
||||||
|
<g id="·窑炉总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="总览" transform="translate(-1823.000000, -772.000000)">
|
||||||
|
<g id="编组-20备份-5" transform="translate(1786.000000, 764.000000)">
|
||||||
|
<g id="编组-13" transform="translate(45.000000, 16.000000) scale(1, -1) rotate(-180.000000) translate(-45.000000, -16.000000) translate(37.000000, 8.000000)">
|
||||||
|
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
|
||||||
|
<path d="M3.67840479,4.47768215 L12.3215952,4.47768215 C12.87388,4.47768215 13.3215952,4.9253974 13.3215952,5.47768215 C13.3215952,5.70423387 13.2446673,5.92407165 13.1034098,6.1011931 L8.78181462,11.5200015 C8.43745903,11.9517857 7.80827335,12.0226607 7.37648905,11.6783051 C7.31796217,11.6316289 7.2648616,11.5785283 7.21818538,11.5200015 L2.89659016,6.1011931 C2.55223458,5.6694088 2.62310955,5.04022312 3.05489384,4.69586753 C3.23201529,4.55461005 3.45185307,4.47768215 3.67840479,4.47768215 Z" id="路径-2" fill="#03233C"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
@ -32,7 +32,7 @@ export default function CompanyName() {
|
|||||||
<img src={TopSide} alt="图片丢失" className={cls.TopSideLeft}/>
|
<img src={TopSide} alt="图片丢失" className={cls.TopSideLeft}/>
|
||||||
<div className={cls.TopSideLeftLine}>
|
<div className={cls.TopSideLeftLine}>
|
||||||
<img src={LeftLine} alt="图片丢失" className={cls.TopSideLeftLineicon}/>
|
<img src={LeftLine} alt="图片丢失" className={cls.TopSideLeftLineicon}/>
|
||||||
<h2 className={cls.TopSideLeftTxt}>单位：河南汇融科技服务有限公司</h2>
|
<h2 className={cls.TopSideLeftTxt}>单位：河南汇融数字科技有限公司</h2>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h2 className={cls.TopTitleText}>
|
<h2 className={cls.TopTitleText}>
|
||||||
|
|||||||
@ -1,126 +1,159 @@
|
|||||||
// TODO: 通用组件 - 按钮 菜单控制层
|
// TODO: 通用组件 - 按钮 菜单控制层
|
||||||
import useIcon from '../../../hooks/useIcon';
|
import useIcon from "../../../hooks/useIcon";
|
||||||
import cls from './index.module.css';
|
import cls from "./index.module.css";
|
||||||
import { useMemo, useState } from 'react';
|
import { useMemo, useState } from "react";
|
||||||
import { Switch, Radio } from 'antd';
|
import { Switch, Select, Radio } from "antd";
|
||||||
|
import "./selector.style.overwrite.css";
|
||||||
|
// import { Switch, Select, Space } from 'antd';
|
||||||
|
import triangle from "../../../assets/Icon/triangle.svg";
|
||||||
|
|
||||||
|
const handleChange = (value: string) => {
|
||||||
|
console.log(`selected ${value}`);
|
||||||
|
};
|
||||||
function choseBg(size) {
|
function choseBg(size) {
|
||||||
const [width, height] = size;
|
const [width, height] = size;
|
||||||
return width === 'long' && height === 'middle'
|
return width === "long" && height === "middle"
|
||||||
? 'long-middle'
|
? "long-middle"
|
||||||
: width === 'long' && height === 'short'
|
: width === "long" && height === "short"
|
||||||
? 'long-short'
|
? "long-short"
|
||||||
: width === 'short' && height === 'middle'
|
: width === "short" && height === "middle"
|
||||||
? 'short-middle'
|
? "short-middle"
|
||||||
: width === 'short' && height === 'short'
|
: width === "short" && height === "short"
|
||||||
? 'short-short'
|
? "short-short"
|
||||||
: width === 'short' && height === 'long'
|
: width === "short" && height === "long"
|
||||||
? 'short-long'
|
? "short-long"
|
||||||
: width === 'middle' && height === 'middle'
|
: width === "middle" && height === "middle"
|
||||||
? 'middle-middle'
|
? "middle-middle"
|
||||||
: width === 'middle' && height === 'short'
|
: width === "middle" && height === "short"
|
||||||
? 'middle-short'
|
? "middle-short"
|
||||||
: width === 'middle' && height === 'long'
|
: width === "middle" && height === "long"
|
||||||
? 'middle-long'
|
? "middle-long"
|
||||||
: width === 'middle' && height === 'full'
|
: width === "middle" && height === "full"
|
||||||
? 'middle-full'
|
? "middle-full"
|
||||||
: 'middle-middle';
|
: "middle-middle";
|
||||||
}
|
}
|
||||||
|
|
||||||
function GraphBase(props) {
|
function GraphBase(props) {
|
||||||
const size = props.size || ['middle', 'middle'];
|
const size = props.size || ["middle", "middle"];
|
||||||
const bgClass = choseBg(size);
|
const bgClass = choseBg(size);
|
||||||
const {
|
const {
|
||||||
icon,
|
icon,
|
||||||
title,
|
title,
|
||||||
desc,
|
desc,
|
||||||
switchOptions,
|
switchOptions,
|
||||||
onSwitch,
|
onSwitch,
|
||||||
dateOptions,
|
dateOptions,
|
||||||
onDateChange,
|
onDateChange,
|
||||||
defaultSelect,
|
defaultSelect,
|
||||||
legend,
|
selectWidth,
|
||||||
} = props;
|
legend,
|
||||||
const iconSrc = useIcon(icon);
|
} = props;
|
||||||
const colors = useMemo(() => ['#ffd160', '#2760ff', '#15e8f5'], []);
|
const iconSrc = useIcon(icon);
|
||||||
const [showChart, setShowChart] = useState(true);
|
const colors = useMemo(() => ["#ffd160", "#2760ff", "#15e8f5"], []);
|
||||||
|
const [showChart, setShowChart] = useState(true);
|
||||||
|
|
||||||
let dto = null;
|
let dto = null;
|
||||||
const switchStyle = {};
|
let timerangeHint = null;
|
||||||
|
const switchStyle = {};
|
||||||
|
|
||||||
if (props.switchPosition) {
|
if (props.switchPosition) {
|
||||||
props.switchPosition.forEach((item, index) => {
|
props.switchPosition.forEach((item, index) => {
|
||||||
if (item != null) {
|
if (item != null) {
|
||||||
switchStyle[index == 0 ? 'top' : 'left'] = item + 'px';
|
switchStyle[index == 0 ? "top" : "left"] = item + "px";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (dateOptions) {
|
|
||||||
dto = dateOptions.map((item) => (
|
|
||||||
<Radio.Button value={item} key={item} className="radio-group__item">
|
|
||||||
{item}
|
|
||||||
</Radio.Button>
|
|
||||||
));
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleSwitchChange(v) {
|
if (dateOptions) {
|
||||||
v ? setShowChart(true) : setShowChart(false);
|
console.log("dateoptions ", title, dateOptions);
|
||||||
onSwitch(v);
|
dto = (
|
||||||
}
|
<Select
|
||||||
|
defaultValue={defaultSelect || dateOptions[0]}
|
||||||
|
style={{ width: selectWidth || 60 }}
|
||||||
|
popupClassName="xc-date-selector-menu"
|
||||||
|
className={cls.graphBaseDate + " " + cls.radioGroup}
|
||||||
|
options={dateOptions.map((item) => ({ label: item, value: item }))}
|
||||||
|
suffixIcon={<img src={triangle} alt="#" />}
|
||||||
|
notFoundContent={
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: "14px",
|
||||||
|
lineHeight: 1,
|
||||||
|
paddingLeft: "12px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
- 无 -
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
onChange={(value, option) => onDateChange(value)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
// <Radio.Button value={item} key={item} className="radio-group__item">
|
||||||
|
// {item}
|
||||||
|
// </Radio.Button>
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
function handleSwitchChange(v) {
|
||||||
<div
|
v ? setShowChart(true) : setShowChart(false);
|
||||||
className={
|
onSwitch(v);
|
||||||
'graph-base ' +
|
}
|
||||||
cls[bgClass] +
|
|
||||||
' ' +
|
return (
|
||||||
cls.graphBase +
|
<div
|
||||||
' ' +
|
className={
|
||||||
props.className
|
"graph-base " +
|
||||||
}
|
cls[bgClass] +
|
||||||
style={{ ...props.style }}
|
" " +
|
||||||
>
|
cls.graphBase +
|
||||||
<div className={cls.graphBaseTitle}>
|
" " +
|
||||||
<img src={iconSrc} alt="#" />
|
props.className
|
||||||
<h2>{title}</h2>
|
}
|
||||||
{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
|
style={{ ...props.style }}
|
||||||
</div>
|
>
|
||||||
<div className={cls.graphBaseContent}>
|
<div className={cls.graphBaseTitle}>
|
||||||
{switchOptions && (
|
<img src={iconSrc} alt="#" />
|
||||||
<div className={cls.graphBaseSwitch} style={switchStyle}>
|
<h2>{title}</h2>
|
||||||
<Switch size="small" defaultChecked onChange={handleSwitchChange} />
|
{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
|
||||||
{showChart && <span className={cls.switchLabel}>历史详情</span>}
|
</div>
|
||||||
{!showChart && <span className={cls.switchLabel}>实时流量</span>}
|
<div className={cls.graphBaseContent}>
|
||||||
</div>
|
{switchOptions && (
|
||||||
)}
|
<div className={cls.graphBaseSwitch} style={switchStyle}>
|
||||||
{legend && showChart && (
|
<Switch size="small" defaultChecked onChange={handleSwitchChange} />
|
||||||
<div className={cls.legend}>
|
{showChart && <span className={cls.switchLabel}>历史详情</span>}
|
||||||
{legend.map((item, index) => (
|
{!showChart && <span className={cls.switchLabel}>实时流量</span>}
|
||||||
<div className={cls.legendItem} key={item}>
|
</div>
|
||||||
<span
|
)}
|
||||||
className={cls.lengedItemPrefix}
|
{legend && showChart && (
|
||||||
style={{ backgroundColor: colors[index] }}
|
<div className={cls.legend}>
|
||||||
></span>
|
{legend.map((item, index) => (
|
||||||
<span className={cls.legendItemLabel}>{item}</span>
|
<div className={cls.legendItem} key={item}>
|
||||||
</div>
|
<span
|
||||||
))}
|
className={cls.lengedItemPrefix}
|
||||||
</div>
|
style={{ backgroundColor: colors[index] }}
|
||||||
)}
|
></span>
|
||||||
{dateOptions && (
|
<span className={cls.legendItemLabel}>{item}</span>
|
||||||
// defaultValue={defaultSelect || dateOptions[0]}
|
</div>
|
||||||
<Radio.Group
|
))}
|
||||||
value={defaultSelect || dateOptions[0]}
|
</div>
|
||||||
buttonStyle="solid"
|
)}
|
||||||
className={cls.graphBaseDate + ' ' + cls.radioGroup}
|
{
|
||||||
onChange={({ target }) => onDateChange(target.value)}
|
dateOptions && dto
|
||||||
>
|
// (
|
||||||
{dto}
|
// <Radio.Group
|
||||||
</Radio.Group>
|
// value={defaultSelect || dateOptions[0]}
|
||||||
)}
|
// buttonStyle="solid"
|
||||||
{props.children}
|
// className={cls.graphBaseDate + " " + cls.radioGroup}
|
||||||
</div>
|
// onChange={({ target }) => onDateChange(target.value)}
|
||||||
</div>
|
// >
|
||||||
);
|
// {dto}
|
||||||
|
// </Radio.Group>
|
||||||
|
// )
|
||||||
|
}
|
||||||
|
{props.children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default GraphBase;
|
export default GraphBase;
|
||||||
|
|||||||
@ -115,7 +115,7 @@
|
|||||||
|
|
||||||
.radioGroup * {
|
.radioGroup * {
|
||||||
border: none !important;
|
border: none !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 6px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radioGroup *:focus-within {
|
.radioGroup *:focus-within {
|
||||||
|
|||||||
31
src/components/Common/GraphBase/selector.style.overwrite.css
Normal file
31
src/components/Common/GraphBase/selector.style.overwrite.css
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
.xc-date-selector-menu {
|
||||||
|
background-color: #04233c !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xc-date-selector-menu .ant-select-item {
|
||||||
|
color: #fff;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xc-date-selector-menu .ant-select-item-option-content {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xc-date-selector-menu .ant-select-item-option-selected {
|
||||||
|
color: #fff !important;
|
||||||
|
background-color: #02457E !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-select-selector {
|
||||||
|
background-color: #02457E !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
.ant-select-selector::after {
|
||||||
|
content: '\25BC' !important;
|
||||||
|
visibility: visible !important;
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
right: 22px;
|
||||||
|
color: #04233c;
|
||||||
|
} */
|
||||||
@ -3,6 +3,7 @@ import GraphBase from "../GraphBase";
|
|||||||
import ReactECharts from "echarts-for-react";
|
import ReactECharts from "echarts-for-react";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
|
||||||
function FaultTotal(props) {
|
function FaultTotal(props) {
|
||||||
const [currentSelect, setCurrentSelect] = useState("日");
|
const [currentSelect, setCurrentSelect] = useState("日");
|
||||||
@ -30,6 +31,23 @@ function FaultTotal(props) {
|
|||||||
const bgSize =
|
const bgSize =
|
||||||
props.page == "home" ? ["middle", "short"] : ["middle", "long"];
|
props.page == "home" ? ["middle", "short"] : ["middle", "long"];
|
||||||
|
|
||||||
|
// time hint
|
||||||
|
let timeDesc = "";
|
||||||
|
const now = new Date();
|
||||||
|
switch (currentSelect) {
|
||||||
|
case "日":
|
||||||
|
timeDesc = dayjs().subtract(1, 'day').format('YYYY.MM.DD') + " 7点 - " + dayjs().format('YYYY.MM.DD') + " 7点";
|
||||||
|
break;
|
||||||
|
case "周":
|
||||||
|
timeDesc = dayjs().subtract(8, 'day').format('YYYY.MM.DD') + " - " + dayjs().subtract(1, 'day').format('YYYY.MM.DD') ;
|
||||||
|
break;
|
||||||
|
case "月":
|
||||||
|
timeDesc = dayjs().subtract(1, 'month').format('YYYY.MM.') + "29 - " + dayjs().format('YYYY.MM.') + '28' ;
|
||||||
|
break;
|
||||||
|
case "年":
|
||||||
|
timeDesc = dayjs().subtract(1, 'year').endOf('year').format('YYYY.MM.') + "29 - " + dayjs().endOf('year').format('YYYY.MM.') + '28' ;
|
||||||
|
break;
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<GraphBase
|
<GraphBase
|
||||||
icon="chart"
|
icon="chart"
|
||||||
@ -38,6 +56,7 @@ function FaultTotal(props) {
|
|||||||
defaultSelect={currentSelect}
|
defaultSelect={currentSelect}
|
||||||
onDateChange={handleDateChange}
|
onDateChange={handleDateChange}
|
||||||
size={bgSize}
|
size={bgSize}
|
||||||
|
desc={timeDesc}
|
||||||
style={{ width: "600px" }}
|
style={{ width: "600px" }}
|
||||||
>
|
>
|
||||||
<div className={cls.chart}>
|
<div className={cls.chart}>
|
||||||
@ -65,6 +84,7 @@ export default FaultTotal;
|
|||||||
|
|
||||||
function preHandleStatisticData(data, legend) {
|
function preHandleStatisticData(data, legend) {
|
||||||
const obj = {};
|
const obj = {};
|
||||||
|
if (!data || !Array.isArray(data)) data = [];
|
||||||
data.forEach((item) => {
|
data.forEach((item) => {
|
||||||
obj[item.name] = {};
|
obj[item.name] = {};
|
||||||
item.data.forEach((d) => {
|
item.data.forEach((d) => {
|
||||||
|
|||||||
@ -47,10 +47,11 @@ function FaultType(props) {
|
|||||||
<GraphBase
|
<GraphBase
|
||||||
icon="default"
|
icon="default"
|
||||||
title="产线当日缺陷分类"
|
title="产线当日缺陷分类"
|
||||||
dateOptions={lines}
|
dateOptions={[...lines]}
|
||||||
defaultSelect={currentLine}
|
defaultSelect={currentLine}
|
||||||
onDateChange={handleLineChange}
|
onDateChange={handleLineChange}
|
||||||
size={bgSize}
|
size={bgSize}
|
||||||
|
selectWidth={64}
|
||||||
style={{ width: "600px" }}
|
style={{ width: "600px" }}
|
||||||
>
|
>
|
||||||
<div className={cls.chart}>
|
<div className={cls.chart}>
|
||||||
|
|||||||
@ -2,9 +2,13 @@ import cls from "./index.module.css";
|
|||||||
import "./overwrite.css"; // 覆写 antd 默认样式，全局
|
import "./overwrite.css"; // 覆写 antd 默认样式，全局
|
||||||
import ReactECharts from "echarts-for-react";
|
import ReactECharts from "echarts-for-react";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import { Switch, Radio } from "antd";
|
import { Switch, Select, Radio } from "antd";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
|
import triangle from "../../../../../assets/Icon/triangle.svg";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
|
||||||
|
const dateOptions = { day: "日", week: "周", month: "月", year: "年" };
|
||||||
|
|
||||||
const GoodRateChart = (props) => {
|
const GoodRateChart = (props) => {
|
||||||
// 是否展示班次数据
|
// 是否展示班次数据
|
||||||
@ -13,8 +17,8 @@ const GoodRateChart = (props) => {
|
|||||||
const [updateKey, setUpdateKey] = useState(Date.now());
|
const [updateKey, setUpdateKey] = useState(Date.now());
|
||||||
// 默认的日期类型
|
// 默认的日期类型
|
||||||
const [dateType, setDateType] = useState("day");
|
const [dateType, setDateType] = useState("day");
|
||||||
|
const [defaultSelect, setDefaultSelect] = useState(dateOptions[dateType]);
|
||||||
const cutting = useSelector((state) => state.cutting);
|
const cutting = useSelector((state) => state.cutting);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setUpdateKey(Date.now());
|
setUpdateKey(Date.now());
|
||||||
}, [showMore]);
|
}, [showMore]);
|
||||||
@ -24,9 +28,47 @@ const GoodRateChart = (props) => {
|
|||||||
setShowMore(val);
|
setShowMore(val);
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleDateChange({ target }) {
|
const [timestr, setTimestr] = useState("");
|
||||||
|
function handleDateChange(value) {
|
||||||
// e: Event
|
// e: Event
|
||||||
setDateType(target.value);
|
let v = "day";
|
||||||
|
switch (value) {
|
||||||
|
case "日":
|
||||||
|
setTimestr(
|
||||||
|
dayjs().subtract(1, "day").format("YYYY.MM.DD") +
|
||||||
|
" 7点 - " +
|
||||||
|
dayjs().format("YYYY.MM.DD") +
|
||||||
|
" 7点"
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "月":
|
||||||
|
v = "month";
|
||||||
|
setTimestr(
|
||||||
|
dayjs().subtract(8, "day").format("YYYY.MM.DD") +
|
||||||
|
" - " +
|
||||||
|
dayjs().subtract(1, "day").format("YYYY.MM.DD")
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "周":
|
||||||
|
v = "week";
|
||||||
|
setTimestr(
|
||||||
|
dayjs().subtract(1, "month").format("YYYY.MM.") +
|
||||||
|
"29 - " +
|
||||||
|
dayjs().format("YYYY.MM.") +
|
||||||
|
"28"
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "年":
|
||||||
|
v = "year";
|
||||||
|
setTimestr(
|
||||||
|
dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
|
||||||
|
"29 - " +
|
||||||
|
dayjs().endOf("year").format("YYYY.MM.") +
|
||||||
|
"28"
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
setDateType(v);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 根据日期类型，数据列表，是否展示班次数据，生成对应的 options
|
// 根据日期类型，数据列表，是否展示班次数据，生成对应的 options
|
||||||
@ -49,7 +91,32 @@ const GoodRateChart = (props) => {
|
|||||||
)}
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<Radio.Group
|
<div className={cls.graphBaseDesc}>{timestr}</div>
|
||||||
|
<Select
|
||||||
|
defaultValue={defaultSelect}
|
||||||
|
style={{ width: 60 }}
|
||||||
|
popupClassName="xc-date-selector-menu"
|
||||||
|
className={cls.radioGroup}
|
||||||
|
options={["日", "周", "月", "年"].map((item) => ({
|
||||||
|
label: item,
|
||||||
|
value: item,
|
||||||
|
}))}
|
||||||
|
suffixIcon={<img src={triangle} alt="#" />}
|
||||||
|
notFoundContent={
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: "14px",
|
||||||
|
lineHeight: 1,
|
||||||
|
paddingLeft: "12px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
- 无 -
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
onChange={(value, option) => handleDateChange(value)}
|
||||||
|
/>
|
||||||
|
{/* <Radio.Group
|
||||||
defaultValue="day"
|
defaultValue="day"
|
||||||
buttonStyle="solid"
|
buttonStyle="solid"
|
||||||
onChange={handleDateChange}
|
onChange={handleDateChange}
|
||||||
@ -68,7 +135,7 @@ const GoodRateChart = (props) => {
|
|||||||
<Radio.Button value="year" className="radio-group__item">
|
<Radio.Button value="year" className="radio-group__item">
|
||||||
年
|
年
|
||||||
</Radio.Button>
|
</Radio.Button>
|
||||||
</Radio.Group>
|
</Radio.Group> */}
|
||||||
</div>
|
</div>
|
||||||
{options && <ReactECharts key={updateKey} option={options} />}
|
{options && <ReactECharts key={updateKey} option={options} />}
|
||||||
{!options && (
|
{!options && (
|
||||||
@ -99,16 +166,6 @@ function getOptions(dataList, showMore, dateType) {
|
|||||||
);
|
);
|
||||||
if (list.length === 0 || list.filter((item) => item.sum).length == 0)
|
if (list.length === 0 || list.filter((item) => item.sum).length == 0)
|
||||||
return null;
|
return null;
|
||||||
// data: Array(7)
|
|
||||||
// .fill(1)
|
|
||||||
// .map((_, index) => {
|
|
||||||
// const today = new Date();
|
|
||||||
// const dtimestamp = today - index * 24 * 60 * 60 * 1000;
|
|
||||||
// return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
|
|
||||||
// dtimestamp
|
|
||||||
// ).getDate()}`;
|
|
||||||
// })
|
|
||||||
// .reverse(),
|
|
||||||
const color = ["#FFD160", "#12FFF5", "#2760FF"];
|
const color = ["#FFD160", "#12FFF5", "#2760FF"];
|
||||||
const grid = { top: 28, right: 12, bottom: 48, left: 48 };
|
const grid = { top: 28, right: 12, bottom: 48, left: 48 };
|
||||||
const xAxis = {
|
const xAxis = {
|
||||||
@ -118,10 +175,6 @@ function getOptions(dataList, showMore, dateType) {
|
|||||||
? item.dataTime.split("T")[1]
|
? item.dataTime.split("T")[1]
|
||||||
: item.dataTime.split("T")[0]
|
: item.dataTime.split("T")[0]
|
||||||
),
|
),
|
||||||
// data: list.map((item) => {
|
|
||||||
// console.log("datetime", item.dataTime);
|
|
||||||
// return item.dataTime.split("T")[0];
|
|
||||||
// }),
|
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: 10,
|
fontSize: 10,
|
||||||
@ -170,7 +223,6 @@ function getOptions(dataList, showMore, dateType) {
|
|||||||
{ offset: 1, color: "#12FFF510" },
|
{ offset: 1, color: "#12FFF510" },
|
||||||
]),
|
]),
|
||||||
},
|
},
|
||||||
// smooth: true,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "夜班",
|
name: "夜班",
|
||||||
@ -183,7 +235,6 @@ function getOptions(dataList, showMore, dateType) {
|
|||||||
{ offset: 1, color: "#2760FF10" },
|
{ offset: 1, color: "#2760FF10" },
|
||||||
]),
|
]),
|
||||||
},
|
},
|
||||||
// smooth: true,
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
return {
|
return {
|
||||||
@ -194,7 +245,6 @@ function getOptions(dataList, showMore, dateType) {
|
|||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
// formatter: "{b} {c}%",
|
|
||||||
formatter: showMore
|
formatter: showMore
|
||||||
? "{a0} {c0}%<br />{a1} {c1}%<br />{a2} {c2}%"
|
? "{a0} {c0}%<br />{a1} {c1}%<br />{a2} {c2}%"
|
||||||
: "{b} {c}%",
|
: "{b} {c}%",
|
||||||
@ -205,7 +255,6 @@ function getOptions(dataList, showMore, dateType) {
|
|||||||
color: "#fffc",
|
color: "#fffc",
|
||||||
},
|
},
|
||||||
className: "xc-chart-tooltip",
|
className: "xc-chart-tooltip",
|
||||||
// backgroundColor: ''
|
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
@ -246,3 +295,14 @@ function getOptions(dataList, showMore, dateType) {
|
|||||||
// },
|
// },
|
||||||
// // smooth: true,
|
// // smooth: true,
|
||||||
// },
|
// },
|
||||||
|
|
||||||
|
// data: Array(7)
|
||||||
|
// .fill(1)
|
||||||
|
// .map((_, index) => {
|
||||||
|
// const today = new Date();
|
||||||
|
// const dtimestamp = today - index * 24 * 60 * 60 * 1000;
|
||||||
|
// return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
|
||||||
|
// dtimestamp
|
||||||
|
// ).getDate()}`;
|
||||||
|
// })
|
||||||
|
// .reverse(),
|
||||||
|
|||||||
@ -8,14 +8,14 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: 5px;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
.GoodRateChart .titleBar h2 {
|
.GoodRateChart .titleBar h2 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 18px;
|
font-size: 16px;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
letter-spacing: 1.2px;
|
letter-spacing: 1px;
|
||||||
color: #52fff8;
|
color: #52fff8;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -29,10 +29,17 @@
|
|||||||
color: #dff1fe;
|
color: #dff1fe;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.graphBaseDesc {
|
||||||
|
margin: 0 6px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #76fff9;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.GoodRateChart .titleBar .legend ul {
|
.GoodRateChart .titleBar .legend ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-left: 8px;
|
margin-left: 5px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -67,7 +74,8 @@
|
|||||||
|
|
||||||
.radioGroup * {
|
.radioGroup * {
|
||||||
border: none !important;
|
border: none !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 6px !important;
|
||||||
|
/* transform: translateX(224px) !important; */
|
||||||
}
|
}
|
||||||
.radioGroup *:focus-within {
|
.radioGroup *:focus-within {
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user