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",
|
||||
"css-loader": "^6.5.1",
|
||||
"css-minimizer-webpack-plugin": "^3.2.0",
|
||||
"dayjs": "^1.11.10",
|
||||
"dotenv": "^10.0.0",
|
||||
"dotenv-expand": "^5.1.0",
|
||||
"echarts": "^5.4.3",
|
||||
@ -4204,6 +4205,89 @@
|
||||
"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": {
|
||||
"version": "5.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
|
||||
@ -7138,7 +7222,7 @@
|
||||
},
|
||||
"node_modules/dayjs": {
|
||||
"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=="
|
||||
},
|
||||
"node_modules/debug": {
|
||||
@ -22565,6 +22649,73 @@
|
||||
"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": {
|
||||
"version": "5.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
|
||||
@ -24793,7 +24944,7 @@
|
||||
},
|
||||
"dayjs": {
|
||||
"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=="
|
||||
},
|
||||
"debug": {
|
||||
|
||||
@ -23,6 +23,7 @@
|
||||
"case-sensitive-paths-webpack-plugin": "^2.4.0",
|
||||
"css-loader": "^6.5.1",
|
||||
"css-minimizer-webpack-plugin": "^3.2.0",
|
||||
"dayjs": "^1.11.10",
|
||||
"dotenv": "^10.0.0",
|
||||
"dotenv-expand": "^5.1.0",
|
||||
"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}/>
|
||||
<div className={cls.TopSideLeftLine}>
|
||||
<img src={LeftLine} alt="图片丢失" className={cls.TopSideLeftLineicon}/>
|
||||
<h2 className={cls.TopSideLeftTxt}>单位：河南汇融科技服务有限公司</h2>
|
||||
<h2 className={cls.TopSideLeftTxt}>单位：河南汇融数字科技有限公司</h2>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className={cls.TopTitleText}>
|
||||
|
||||
@ -1,126 +1,159 @@
|
||||
// TODO: 通用组件 - 按钮 菜单控制层
|
||||
import useIcon from '../../../hooks/useIcon';
|
||||
import cls from './index.module.css';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { Switch, Radio } from 'antd';
|
||||
import useIcon from "../../../hooks/useIcon";
|
||||
import cls from "./index.module.css";
|
||||
import { useMemo, useState } from "react";
|
||||
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) {
|
||||
const [width, height] = size;
|
||||
return width === 'long' && height === 'middle'
|
||||
? 'long-middle'
|
||||
: width === 'long' && height === 'short'
|
||||
? 'long-short'
|
||||
: width === 'short' && height === 'middle'
|
||||
? 'short-middle'
|
||||
: width === 'short' && height === 'short'
|
||||
? 'short-short'
|
||||
: width === 'short' && height === 'long'
|
||||
? 'short-long'
|
||||
: width === 'middle' && height === 'middle'
|
||||
? 'middle-middle'
|
||||
: width === 'middle' && height === 'short'
|
||||
? 'middle-short'
|
||||
: width === 'middle' && height === 'long'
|
||||
? 'middle-long'
|
||||
: width === 'middle' && height === 'full'
|
||||
? 'middle-full'
|
||||
: 'middle-middle';
|
||||
const [width, height] = size;
|
||||
return width === "long" && height === "middle"
|
||||
? "long-middle"
|
||||
: width === "long" && height === "short"
|
||||
? "long-short"
|
||||
: width === "short" && height === "middle"
|
||||
? "short-middle"
|
||||
: width === "short" && height === "short"
|
||||
? "short-short"
|
||||
: width === "short" && height === "long"
|
||||
? "short-long"
|
||||
: width === "middle" && height === "middle"
|
||||
? "middle-middle"
|
||||
: width === "middle" && height === "short"
|
||||
? "middle-short"
|
||||
: width === "middle" && height === "long"
|
||||
? "middle-long"
|
||||
: width === "middle" && height === "full"
|
||||
? "middle-full"
|
||||
: "middle-middle";
|
||||
}
|
||||
|
||||
function GraphBase(props) {
|
||||
const size = props.size || ['middle', 'middle'];
|
||||
const bgClass = choseBg(size);
|
||||
const {
|
||||
icon,
|
||||
title,
|
||||
desc,
|
||||
switchOptions,
|
||||
onSwitch,
|
||||
dateOptions,
|
||||
onDateChange,
|
||||
defaultSelect,
|
||||
legend,
|
||||
} = props;
|
||||
const iconSrc = useIcon(icon);
|
||||
const colors = useMemo(() => ['#ffd160', '#2760ff', '#15e8f5'], []);
|
||||
const [showChart, setShowChart] = useState(true);
|
||||
const size = props.size || ["middle", "middle"];
|
||||
const bgClass = choseBg(size);
|
||||
const {
|
||||
icon,
|
||||
title,
|
||||
desc,
|
||||
switchOptions,
|
||||
onSwitch,
|
||||
dateOptions,
|
||||
onDateChange,
|
||||
defaultSelect,
|
||||
selectWidth,
|
||||
legend,
|
||||
} = props;
|
||||
const iconSrc = useIcon(icon);
|
||||
const colors = useMemo(() => ["#ffd160", "#2760ff", "#15e8f5"], []);
|
||||
const [showChart, setShowChart] = useState(true);
|
||||
|
||||
let dto = null;
|
||||
const switchStyle = {};
|
||||
let dto = null;
|
||||
let timerangeHint = null;
|
||||
const switchStyle = {};
|
||||
|
||||
if (props.switchPosition) {
|
||||
props.switchPosition.forEach((item, index) => {
|
||||
if (item != null) {
|
||||
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>
|
||||
));
|
||||
}
|
||||
if (props.switchPosition) {
|
||||
props.switchPosition.forEach((item, index) => {
|
||||
if (item != null) {
|
||||
switchStyle[index == 0 ? "top" : "left"] = item + "px";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleSwitchChange(v) {
|
||||
v ? setShowChart(true) : setShowChart(false);
|
||||
onSwitch(v);
|
||||
}
|
||||
if (dateOptions) {
|
||||
console.log("dateoptions ", title, dateOptions);
|
||||
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 (
|
||||
<div
|
||||
className={
|
||||
'graph-base ' +
|
||||
cls[bgClass] +
|
||||
' ' +
|
||||
cls.graphBase +
|
||||
' ' +
|
||||
props.className
|
||||
}
|
||||
style={{ ...props.style }}
|
||||
>
|
||||
<div className={cls.graphBaseTitle}>
|
||||
<img src={iconSrc} alt="#" />
|
||||
<h2>{title}</h2>
|
||||
{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
|
||||
</div>
|
||||
<div className={cls.graphBaseContent}>
|
||||
{switchOptions && (
|
||||
<div className={cls.graphBaseSwitch} style={switchStyle}>
|
||||
<Switch size="small" defaultChecked onChange={handleSwitchChange} />
|
||||
{showChart && <span className={cls.switchLabel}>历史详情</span>}
|
||||
{!showChart && <span className={cls.switchLabel}>实时流量</span>}
|
||||
</div>
|
||||
)}
|
||||
{legend && showChart && (
|
||||
<div className={cls.legend}>
|
||||
{legend.map((item, index) => (
|
||||
<div className={cls.legendItem} key={item}>
|
||||
<span
|
||||
className={cls.lengedItemPrefix}
|
||||
style={{ backgroundColor: colors[index] }}
|
||||
></span>
|
||||
<span className={cls.legendItemLabel}>{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{dateOptions && (
|
||||
// defaultValue={defaultSelect || dateOptions[0]}
|
||||
<Radio.Group
|
||||
value={defaultSelect || dateOptions[0]}
|
||||
buttonStyle="solid"
|
||||
className={cls.graphBaseDate + ' ' + cls.radioGroup}
|
||||
onChange={({ target }) => onDateChange(target.value)}
|
||||
>
|
||||
{dto}
|
||||
</Radio.Group>
|
||||
)}
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
function handleSwitchChange(v) {
|
||||
v ? setShowChart(true) : setShowChart(false);
|
||||
onSwitch(v);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
"graph-base " +
|
||||
cls[bgClass] +
|
||||
" " +
|
||||
cls.graphBase +
|
||||
" " +
|
||||
props.className
|
||||
}
|
||||
style={{ ...props.style }}
|
||||
>
|
||||
<div className={cls.graphBaseTitle}>
|
||||
<img src={iconSrc} alt="#" />
|
||||
<h2>{title}</h2>
|
||||
{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
|
||||
</div>
|
||||
<div className={cls.graphBaseContent}>
|
||||
{switchOptions && (
|
||||
<div className={cls.graphBaseSwitch} style={switchStyle}>
|
||||
<Switch size="small" defaultChecked onChange={handleSwitchChange} />
|
||||
{showChart && <span className={cls.switchLabel}>历史详情</span>}
|
||||
{!showChart && <span className={cls.switchLabel}>实时流量</span>}
|
||||
</div>
|
||||
)}
|
||||
{legend && showChart && (
|
||||
<div className={cls.legend}>
|
||||
{legend.map((item, index) => (
|
||||
<div className={cls.legendItem} key={item}>
|
||||
<span
|
||||
className={cls.lengedItemPrefix}
|
||||
style={{ backgroundColor: colors[index] }}
|
||||
></span>
|
||||
<span className={cls.legendItemLabel}>{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{
|
||||
dateOptions && dto
|
||||
// (
|
||||
// <Radio.Group
|
||||
// value={defaultSelect || dateOptions[0]}
|
||||
// buttonStyle="solid"
|
||||
// className={cls.graphBaseDate + " " + cls.radioGroup}
|
||||
// onChange={({ target }) => onDateChange(target.value)}
|
||||
// >
|
||||
// {dto}
|
||||
// </Radio.Group>
|
||||
// )
|
||||
}
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default GraphBase;
|
||||
|
||||
@ -115,7 +115,7 @@
|
||||
|
||||
.radioGroup * {
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.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 { useSelector } from "react-redux";
|
||||
import { useState } from "react";
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
function FaultTotal(props) {
|
||||
const [currentSelect, setCurrentSelect] = useState("日");
|
||||
@ -30,6 +31,23 @@ function FaultTotal(props) {
|
||||
const bgSize =
|
||||
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 (
|
||||
<GraphBase
|
||||
icon="chart"
|
||||
@ -38,6 +56,7 @@ function FaultTotal(props) {
|
||||
defaultSelect={currentSelect}
|
||||
onDateChange={handleDateChange}
|
||||
size={bgSize}
|
||||
desc={timeDesc}
|
||||
style={{ width: "600px" }}
|
||||
>
|
||||
<div className={cls.chart}>
|
||||
@ -65,6 +84,7 @@ export default FaultTotal;
|
||||
|
||||
function preHandleStatisticData(data, legend) {
|
||||
const obj = {};
|
||||
if (!data || !Array.isArray(data)) data = [];
|
||||
data.forEach((item) => {
|
||||
obj[item.name] = {};
|
||||
item.data.forEach((d) => {
|
||||
|
||||
@ -47,10 +47,11 @@ function FaultType(props) {
|
||||
<GraphBase
|
||||
icon="default"
|
||||
title="产线当日缺陷分类"
|
||||
dateOptions={lines}
|
||||
dateOptions={[...lines]}
|
||||
defaultSelect={currentLine}
|
||||
onDateChange={handleLineChange}
|
||||
size={bgSize}
|
||||
selectWidth={64}
|
||||
style={{ width: "600px" }}
|
||||
>
|
||||
<div className={cls.chart}>
|
||||
|
||||
@ -2,9 +2,13 @@ import cls from "./index.module.css";
|
||||
import "./overwrite.css"; // 覆写 antd 默认样式，全局
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import * as echarts from "echarts";
|
||||
import { Switch, Radio } from "antd";
|
||||
import { Switch, Select, Radio } from "antd";
|
||||
import { useEffect, useState } from "react";
|
||||
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) => {
|
||||
// 是否展示班次数据
|
||||
@ -13,8 +17,8 @@ const GoodRateChart = (props) => {
|
||||
const [updateKey, setUpdateKey] = useState(Date.now());
|
||||
// 默认的日期类型
|
||||
const [dateType, setDateType] = useState("day");
|
||||
const [defaultSelect, setDefaultSelect] = useState(dateOptions[dateType]);
|
||||
const cutting = useSelector((state) => state.cutting);
|
||||
|
||||
useEffect(() => {
|
||||
setUpdateKey(Date.now());
|
||||
}, [showMore]);
|
||||
@ -24,9 +28,47 @@ const GoodRateChart = (props) => {
|
||||
setShowMore(val);
|
||||
}
|
||||
|
||||
function handleDateChange({ target }) {
|
||||
const [timestr, setTimestr] = useState("");
|
||||
function handleDateChange(value) {
|
||||
// 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
|
||||
@ -49,7 +91,32 @@ const GoodRateChart = (props) => {
|
||||
)}
|
||||
</ul>
|
||||
</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"
|
||||
buttonStyle="solid"
|
||||
onChange={handleDateChange}
|
||||
@ -68,7 +135,7 @@ const GoodRateChart = (props) => {
|
||||
<Radio.Button value="year" className="radio-group__item">
|
||||
年
|
||||
</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Radio.Group> */}
|
||||
</div>
|
||||
{options && <ReactECharts key={updateKey} option={options} />}
|
||||
{!options && (
|
||||
@ -99,16 +166,6 @@ function getOptions(dataList, showMore, dateType) {
|
||||
);
|
||||
if (list.length === 0 || list.filter((item) => item.sum).length == 0)
|
||||
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 grid = { top: 28, right: 12, bottom: 48, left: 48 };
|
||||
const xAxis = {
|
||||
@ -118,10 +175,6 @@ function getOptions(dataList, showMore, dateType) {
|
||||
? item.dataTime.split("T")[1]
|
||||
: item.dataTime.split("T")[0]
|
||||
),
|
||||
// data: list.map((item) => {
|
||||
// console.log("datetime", item.dataTime);
|
||||
// return item.dataTime.split("T")[0];
|
||||
// }),
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
@ -170,7 +223,6 @@ function getOptions(dataList, showMore, dateType) {
|
||||
{ offset: 1, color: "#12FFF510" },
|
||||
]),
|
||||
},
|
||||
// smooth: true,
|
||||
},
|
||||
{
|
||||
name: "夜班",
|
||||
@ -183,7 +235,6 @@ function getOptions(dataList, showMore, dateType) {
|
||||
{ offset: 1, color: "#2760FF10" },
|
||||
]),
|
||||
},
|
||||
// smooth: true,
|
||||
},
|
||||
];
|
||||
return {
|
||||
@ -194,7 +245,6 @@ function getOptions(dataList, showMore, dateType) {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
color: "#fff",
|
||||
// formatter: "{b} {c}%",
|
||||
formatter: showMore
|
||||
? "{a0} {c0}%<br />{a1} {c1}%<br />{a2} {c2}%"
|
||||
: "{b} {c}%",
|
||||
@ -205,7 +255,6 @@ function getOptions(dataList, showMore, dateType) {
|
||||
color: "#fffc",
|
||||
},
|
||||
className: "xc-chart-tooltip",
|
||||
// backgroundColor: ''
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@ -246,3 +295,14 @@ function getOptions(dataList, showMore, dateType) {
|
||||
// },
|
||||
// // 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;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: 5px;
|
||||
color: white;
|
||||
}
|
||||
.GoodRateChart .titleBar h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
letter-spacing: 1.2px;
|
||||
letter-spacing: 1px;
|
||||
color: #52fff8;
|
||||
}
|
||||
|
||||
@ -29,10 +29,17 @@
|
||||
color: #dff1fe;
|
||||
}
|
||||
|
||||
.graphBaseDesc {
|
||||
margin: 0 6px;
|
||||
font-size: 16px;
|
||||
color: #76fff9;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.GoodRateChart .titleBar .legend ul {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
margin-left: 8px;
|
||||
margin-left: 5px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
align-items: center;
|
||||
@ -67,7 +74,8 @@
|
||||
|
||||
.radioGroup * {
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
border-radius: 6px !important;
|
||||
/* transform: translateX(224px) !important; */
|
||||
}
|
||||
.radioGroup *:focus-within {
|
||||
box-shadow: none !important;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user