From 446234c2aada6a1cde3d9ebc7929c8478f402f25 Mon Sep 17 00:00:00 2001 From: lb Date: Wed, 24 Jan 2024 14:41:24 +0800 Subject: [PATCH] update --- package-lock.json | 155 ++++++++++- package.json | 1 + src/assets/Icon/triangle.svg | 14 + src/components/Common/Company/index.jsx | 2 +- src/components/Common/GraphBase/index.jsx | 259 ++++++++++-------- .../Common/GraphBase/index.module.css | 2 +- .../GraphBase/selector.style.overwrite.css | 31 +++ .../Common/TodayFaultTotal/index.jsx | 20 ++ .../Common/TodayFaultType/index.jsx | 3 +- .../components/GoodRateChart/index.jsx | 108 ++++++-- .../components/GoodRateChart/index.module.css | 18 +- 11 files changed, 466 insertions(+), 147 deletions(-) create mode 100644 src/assets/Icon/triangle.svg create mode 100644 src/components/Common/GraphBase/selector.style.overwrite.css diff --git a/package-lock.json b/package-lock.json index 21324c8..2ff143c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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": { diff --git a/package.json b/package.json index d3610f2..6fffba9 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/assets/Icon/triangle.svg b/src/assets/Icon/triangle.svg new file mode 100644 index 0000000..86dc117 --- /dev/null +++ b/src/assets/Icon/triangle.svg @@ -0,0 +1,14 @@ + + + 编组 13 + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Common/Company/index.jsx b/src/components/Common/Company/index.jsx index 1b1a055..0a70816 100644 --- a/src/components/Common/Company/index.jsx +++ b/src/components/Common/Company/index.jsx @@ -32,7 +32,7 @@ export default function CompanyName() { 图片丢失
图片丢失 -

单位：河南汇融科技服务有限公司

+

单位：河南汇融数字科技有限公司

diff --git a/src/components/Common/GraphBase/index.jsx b/src/components/Common/GraphBase/index.jsx index 7c491df..1e84828 100644 --- a/src/components/Common/GraphBase/index.jsx +++ b/src/components/Common/GraphBase/index.jsx @@ -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) => ( - - {item} - - )); - } + 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 = ( + ({ + label: item, + value: item, + }))} + suffixIcon={#} + notFoundContent={ + + - 无 - + + } + onChange={(value, option) => handleDateChange(value)} + /> + {/* { 年 - + */}

{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}%
{a1} {c1}%
{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(), diff --git a/src/components/Common/TodayGood/components/GoodRateChart/index.module.css b/src/components/Common/TodayGood/components/GoodRateChart/index.module.css index f7f6f91..9161f17 100644 --- a/src/components/Common/TodayGood/components/GoodRateChart/index.module.css +++ b/src/components/Common/TodayGood/components/GoodRateChart/index.module.css @@ -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;