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

update

Browse Source
This commit is contained in:
lb
2024-01-24 14:41:24 +08:00
parent 909bd92ee6
commit 446234c2aa
11 changed files with 466 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/assets/Icon/triangle.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

2
src/components/Common/Company/index.jsx
View File

@@ -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}>

259
src/components/Common/GraphBase/index.jsx
View File

@@ -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;

2
src/components/Common/GraphBase/index.module.css
View File

@@ -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
View 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;
} */

20
src/components/Common/TodayFaultTotal/index.jsx
View File

@@ -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) => {

3
src/components/Common/TodayFaultType/index.jsx
View File

@@ -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}>

108
src/components/Common/TodayGood/components/GoodRateChart/index.jsx
View File

@@ -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(),

18
src/components/Common/TodayGood/components/GoodRateChart/index.module.css
View File

@@ -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;