mt-fe-group/luoyang-screen
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

1-1对接接口

Browse Source
This commit is contained in:
朱菊兰
2024-09-12 16:14:54 +08:00
parent 0dcff0c256
commit d142b16df3
41 changed files with 2208 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/page/Component/BarChart/chart.config.ts Normal file
View File

@@ -0,0 +1,79 @@
import * as echarts from "echarts";
export default function getOptions(dataProps: number[],xData:string[], color: string[]) {
if (dataProps.length === 0) return null;
return {
grid: { top: 30, right: 12, bottom: 26, left: 48 },
legend: {
show: false,
},
xAxis: {
type: "category",
data: xData,
axisLabel: {
color: "#fff",
fontSize: 12,
interval: 0,
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 2,
color: "#5982B2",
},
},
},
yAxis: {
name: "单位/片",
nameTextStyle: {
color: "#fff",
fontSize: 12,
},
type: "value",
axisLabel: {
color: "#fff",
fontSize: 12,
formatter: "{value}",
},
axisLine: {
show: true,
lineStyle: {
width: 2,
color: "#5982B2",
},
},
splitLine: {
lineStyle: {
width: 2,
color: "#5982B2",
},
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "luoyang-chart-tooltip",
show: false,
},
series: [
{
data: dataProps,
type: "bar",
barWidth: 10,
label: {
show: true,
fontSize: 12,
color: "#9CD4FF",
position: "top",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: color[0] },
{ offset: 1, color: color[1] },
]),
},
},
],
};
}

36
src/page/Component/ChangeFullButton.tsx
View File

@@ -1,36 +0,0 @@
import React, {useState} from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
function ChangeFullButton() {
const [isFull, setIsFull] = useState(false);
function fullExit() {
let element = document.documentElement;
//HTML5 W3C 提议
document.exitFullscreen();
setIsFull(false)
}
function fullScreen() {
let element = document.documentElement;
//HTML W3C 提议
element.requestFullscreen();
setIsFull(true)
}
const click = () => {
isFull ? fullExit() : fullScreen();
}
return (
<button className="section_1 flex-col" onClick={click}/>
)
}
export default ChangeFullButton;

19
src/page/Component/ChangeLangButton.tsx
View File

@@ -1,19 +0,0 @@
import React from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import {useAppDispatch} from "../../store/hooks";
import {UpdateChangeLangAndCss} from "../../store/ChangeLangAndCss";
function ChangeLangButton() {
const dispatch = useAppDispatch();
const changeTitle = () => {
dispatch(UpdateChangeLangAndCss())
}
return (
<button className="box_76 flex-col" onClick={changeTitle}/>
)
}
export default ChangeLangButton;

121
src/page/Component/LineChart/chart.config.ts Normal file
View File

@@ -0,0 +1,121 @@
export default function getOptions(chartData: any) {
if (Object.keys(chartData).length === 0) {
return null;
}
const colors = ["#1A99FF", "#FFB70C", "#C69DFF", "#50F4E3", "#E02094"];
return {
color: colors,
grid: { top: 38, right: 12, bottom: 26, left: 48 },
legend: {
show: true,
top: 10,
right: 10,
padding: 0,
itemWidth: 14,
itemHeight: 10,
itemGap: 8,
height: 10,
textStyle: {
color: "#DFF1FE",
fontSize: 12,
},
},
xAxis: {
type: "category",
data: chartData.xData,
// data: ["8/22", "8/23", "8/24", "8/25", "8/26", "8/27", "8/28"],
// data: Array(7)
// .fill(1)
// .map((_, index) => {
// const today = new Date();
// const dtimestamp =
// today.getTime() - (index + 1) * 24 * 60 * 60 * 1000;
// return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
// dtimestamp
// ).getDate()}`;
// })
// .reverse(),
axisLabel: {
color: "#fff",
fontSize: 12,
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 2,
color: "#5982B2",
},
},
},
yAxis: {
name: "单位/%",
min: 50,
nameTextStyle: {
color: "#fff",
fontSize: 12,
},
type: "value",
axisLabel: {
color: "#fff",
fontSize: 12,
formatter: "{value}",
},
axisLine: {
show: true,
lineStyle: {
width: 2,
color: "#5982B2",
},
},
splitLine: {
lineStyle: {
width: 2,
color: "#5982B2",
},
},
},
tooltip: {
trigger: "axis",
className: "luoyang-chart-tooltip",
show: false,
},
series:chartData.series
// series: [
// {
// name: "产线1",
// type: "line",
// symbol: "circle",
// symbolSize: 4,
// data: chartData.yData[0],
// },
// {
// name: "产线2",
// type: "line",
// symbol: "circle",
// symbolSize: 4,
// data: chartData.yData[1],
// },
// {
// name: "产线3",
// type: "line",
// symbol: "circle",
// symbolSize: 4,
// data: chartData.yData[2],
// },
// {
// name: "产线4",
// type: "line",
// symbol: "circle",
// symbolSize: 4,
// data: chartData.yData[3],
// },
// {
// name: "产线5",
// type: "line",
// symbol: "circle",
// symbolSize: 4,
// data: chartData.yData[4],
// },
// ],
};
}

99
src/page/Component/LineChartRight/chart.config.ts Normal file
View File

@@ -0,0 +1,99 @@
import * as echarts from "echarts";
export default function getOptions(tempData: any) {
if (Object.keys(tempData).length === 0) {
return null;
}
const colors = ["#1A99FF", "#50F4E3"];
return {
color: colors,
grid: { top: 30, right: 12, bottom: 10, left: 10, containLabel: true },
legend: {
show: true,
icon: "roundRect",
top: 10,
right: 10,
padding: 0,
itemWidth: 10,
itemHeight: 10,
itemGap: 3,
height: 10,
textStyle: {
color: "#DFF1FE",
fontSize: 12,
},
},
xAxis: {
type: "category",
data: tempData.time,
// data: Array(7)
// .fill(1)
// .map((_, index) => {
// const today = new Date();
// const dtimestamp =
// today.getTime() - (index + 1) * 24 * 60 * 60 * 1000;
// return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
// dtimestamp
// ).getDate()}`;
// })
// .reverse(),
axisLabel: {
color: "#fff",
fontSize: 12,
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 2,
color: "#5982B2",
},
},
},
yAxis: {
name: "单位/千片",
nameTextStyle: {
color: "#fff",
fontSize: 12,
},
type: "value",
axisLabel: {
color: "#fff",
fontSize: 12,
formatter: "{value}",
},
axisLine: {
show: true,
lineStyle: {
width: 2,
color: "#5982B2",
},
},
splitLine: {
lineStyle: {
width: 2,
color: "#5982B2",
},
},
},
series: [
{
name: "投入",
type: "line",
symbol: "circle",
symbolSize: 4,
data: tempData.input,
},
{
name: "产出",
type: "line",
symbol: "circle",
symbolSize: 4,
data: tempData.output,
},
],
tooltip: {
trigger: "axis",
className: "luoyang-chart-tooltip",
show: false,
},
};
}

51
src/page/Component/QualityRightTable.tsx
View File

@@ -1,51 +0,0 @@
import React from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import {useAppSelector} from "../../store/hooks";
import {Quality, selectQualityMonitorEntity} from "../../store/QualityMonitorEntity";
import {Table, TableBody, TableHead} from "@mui/material";
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "./StyledTable";
interface param {
timeName: "todayQualityLineAll" | "weekQualityLineAll" | "monthQualityLineAll";
lineName: "Line_1" | "Line_2" | "Line_3" | "Line_4";
}
function QualityRightTable(props: param) {
const AllData = useAppSelector(selectQualityMonitorEntity);
const TimeData = AllData[props.timeName];
const LineData = TimeData[props.lineName];
const SlicedLineData = LineData.slice(0, 6);
return (
<div className="rightTableAreaQ">
<StyledTableContainer>
<Table>
<TableHead>
<StyledTableRow>
<StyledTableCell align="center" sx={{width: 100}}>{intl.get('serialNo')}</StyledTableCell>
<StyledTableCell align="center" sx={{width: 250}}>{intl.get('DefectType')}</StyledTableCell>
<StyledTableCell align="center" sx={{width: 120}}>{intl.get('DefectNumber')}</StyledTableCell>
</StyledTableRow>
</TableHead>
<TableBody>
{SlicedLineData.map((item: Quality, index: number) => (
<StyledTableRow key={index}>
<StyledTableCell align="center">{item.sort}</StyledTableCell>
<StyledTableCell align="center" sx={{
maxWidth: 250,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
}}>{item.content}</StyledTableCell>
<StyledTableCell align="center">{item.num}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</StyledTableContainer>
</div>
)
}
export default QualityRightTable;

71
src/page/Component/StyledTable.tsx
View File

@@ -1,71 +0,0 @@
import React from "react";
import {styled, TableCell, tableCellClasses, TableContainer, TableRow, ToggleButton} from "@mui/material";
export const StyledTableCell = styled(TableCell)(({theme}) => ({
[`&.${tableCellClasses.head}`]: {
backgroundColor: 'rgba(32, 55, 96, 0.7)',
color: theme.palette.common.white,
fontSize: 14,
padding: 0,
border: 0,
height: 28,
},
[`&.${tableCellClasses.body}`]: {
fontSize: 12,
color: theme.palette.common.white,
padding: 0,
border: 0,
height: 26
},
}));
export const StyledTableRow = styled(TableRow)(({theme}) => ({
'&:nth-of-type(odd)': {
backgroundColor: 'rgba(14, 32, 62, 0.7)',
},
backgroundColor: 'rgba(32, 55, 96, 0.7)',
}));
export const StyledTableContainer = styled(TableContainer)(({theme}) => ({
overflow: 'auto hidden',
'&::-webkit-scrollbar': {
height: 8,
WebkitAppearance: 'none'
},
'&::-webkit-scrollbar-thumb': {
borderRadius: 2,
backgroundColor: 'rgba(91, 196, 190, 0.5)',
},
'&::-webkit-scrollbar-button': {
width: 8,
borderBottomLeftRadius: 2,
borderBottomRightRadius: 2,
backgroundColor: 'rgba(91, 196, 190, 1)',
},
'&::-webkit-scrollbar-track': {
backgroundColor: 'rgba(12, 32, 67, 1)',
}
}));
export const StyledToggleButton = styled(ToggleButton)({
width: 120,
height: 24,
backgroundColor: 'rgba(49, 135, 140, 0.29)',
color: "white",
'&.Mui-selected': {
backgroundColor: 'rgba(86, 244, 231, 0.69)',
color: "white",
'&:hover': {
backgroundColor: 'rgba(86, 244, 231, 0.5)',
color: "white",
},
},
'&:hover': {
backgroundColor: 'rgba(86, 244, 231, 0.5)',
color: "white",
},
'&:active': {
backgroundColor: 'rgba(86, 244, 231, 0.69)',
color: "white",
},
});

128
src/page/Component/SummaryBarChart/chart.config.ts Normal file
View File

@@ -0,0 +1,128 @@
export default function getOptions(chartData: any) {
if (Object.keys(chartData).length === 0) {
return null;
}
const colors = ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160"];
let sum = chartData.sumData;
return {
color: colors,
grid: { top: 48, right: 20, bottom: 5, left: 15, containLabel: true },
legend: {
show: true,
icon: "roundRect",
top: 10,
right: 20,
padding: 0,
itemWidth: 10,
itemHeight: 10,
itemGap: 15,
height: 10,
textStyle: {
color: "#DFF1FE",
fontSize: 12,
},
},
xAxis: {
type: "category",
data: chartData.xData,
axisLabel: {
color: "#fff",
fontSize: 12,
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 2,
color: "#5982B2",
},
},
},
yAxis: {
name: "单位/片",
nameTextStyle: {
color: "#fff",
fontSize: 12,
},
type: "value",
axisLabel: {
color: "#fff",
fontSize: 12,
formatter: "{value}",
},
axisLine: {
show: true,
lineStyle: {
width: 2,
color: "#5982B2",
},
},
splitLine: {
lineStyle: {
width: 2,
color: "#5982B2",
},
},
},
tooltip: {
show: false,
trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "luoyang-chart-tooltip",
},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series:chartData.series
// series: [
// {
// data: chartData.yData1,
// type: "bar",
// stack: "a",
// name: "磨边后",
// barWidth: 14,
// label: {
// show: true,
// position: "right",
// color: "inherit",
// },
// },
// {
// data: chartData.yData2,
// type: "bar",
// stack: "a",
// name: "包装1",
// label: {
// show: true,
// position: "right",
// color: "inherit",
// },
// },
// {
// data: chartData.yData3,
// type: "bar",
// stack: "a",
// name: "包装2",
// label: {
// show: true,
// position: "right",
// color: "inherit",
// },
// },
// {
// data: [0, 0, 0, 0, 0],
// type: "bar",
// stack: "a",
// name: "",
// label: {
// show: true,
// position: "top",
// color: "#fff",
// formatter: function (params: any) {
// return sum[params.dataIndex];
// },
// },
// },
// ],
};
}

26
src/page/Component/SwitchOnOff.tsx
View File

@@ -1,26 +0,0 @@
import React, {useState} from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import {FormControlLabel, Switch} from "@mui/material";
import {useAppSelector, useAppDispatch} from "../../store/hooks";
import {selectSwitchState,ChangeSwitch} from "../../store/ChangeSwitchState";
function SwitchOnOff() {
const dispatch = useAppDispatch();
const [isSwitch, setIsSwitch] = useState(useAppSelector(selectSwitchState));
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
dispatch(ChangeSwitch())
setIsSwitch(event.target.checked);
}
return (
<div className={'switchBtn'}>
<FormControlLabel control={<Switch color={'warning'} checked={isSwitch} onChange={handleChange}/>}
label={intl.get('AutoSwitch')}/>
</div>
)
}
export default SwitchOnOff;

19
src/page/Component/TabPanel.tsx
View File

@@ -1,19 +0,0 @@
import React from "react";
import "../style/standard.css"
interface TabPanelProps {
children?: React.ReactNode;
index: number;
value: number;
}
function TabPanel(props: TabPanelProps) {
const {children, value, index, ...other} = props;
return (
<div hidden={value !== index}>
{children}
</div>
)
}
export default TabPanel;