修改
This commit is contained in:
parent
1f7b867dc5
commit
e8ca7d16ee
BIN
public/png/numberBox.png
Normal file
BIN
public/png/numberBox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
public/png/rect/ld_center_down.png
Normal file
BIN
public/png/rect/ld_center_down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
public/png/rect/ld_left_up_innerbox.png
Normal file
BIN
public/png/rect/ld_left_up_innerbox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
75
public/svg/topbackLD.svg
Normal file
75
public/svg/topbackLD.svg
Normal file
@ -0,0 +1,75 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="1920px" height="93.0031818px" viewBox="0 0 1920 93.0031818" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组 11</title>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="-2.22044605e-14%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#081C43" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#27778E" stop-opacity="0.205883769" offset="57.0640297%"></stop>
|
||||
<stop stop-color="#37A5B4" stop-opacity="0.311188811" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="98.361014%" y1="49.8254916%" x2="-6.66133815e-14%" y2="49.7796521%" id="linearGradient-2">
|
||||
<stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop>
|
||||
<stop stop-color="#52FFF1" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="103.601203%" y1="50.6276601%" x2="-6.66133815e-14%" y2="49.5379248%" id="linearGradient-3">
|
||||
<stop stop-color="#31A6AE" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#31A6AE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="98.361014%" y1="49.8437805%" x2="-6.66133815e-14%" y2="49.8027451%" id="linearGradient-4">
|
||||
<stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop>
|
||||
<stop stop-color="#52FFF1" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="103.601203%" y1="51.0279165%" x2="-6.66133815e-14%" y2="49.2432614%" id="linearGradient-5">
|
||||
<stop stop-color="#3797C6" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#31A6AE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="103.601203%" y1="50.0057357%" x2="-6.66133815e-14%" y2="49.9957774%" id="linearGradient-6">
|
||||
<stop stop-color="#31A6AE" offset="0%"></stop>
|
||||
<stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="103.601203%" y1="50.03033%" x2="-6.66133815e-14%" y2="49.9776715%" id="linearGradient-7">
|
||||
<stop stop-color="#31A6AE" offset="0%"></stop>
|
||||
<stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="洛阳" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="编组-11">
|
||||
<polygon id="路径-5" fill="url(#linearGradient-1)" points="1.90545852e-13 -4.50993001e-15 2.88853814e-14 31.7045455 82.7768328 31.7045455 120.694098 57.9834285 585.064327 57.9834285 633.594326 93 1284.71703 93 1333.41502 57.5262217 1517.36351 57.5262217 1554.66659 31.7045455 1866 31.7045455 1866 1.08915917e-12"></polygon>
|
||||
<g id="编组-12">
|
||||
<g id="编组-8" transform="translate(711.263222, 24.306818)"></g>
|
||||
<g id="编组-4" transform="translate(0.750956, 31.704545)">
|
||||
<polyline id="路径-9" stroke="url(#linearGradient-2)" stroke-width="2.12" points="1866.47546 1.64272616e-13 1556.20507 -1.48645149e-14 1518.30238 26.2788831 1332.03314 26.2788831 1284.10896 60.2386364 959.060954 60.2386364"></polyline>
|
||||
<g id="编组-29" transform="translate(1426.559836, 49.142045) scale(-1, 1) translate(-1426.559836, -49.142045) translate(1331.116205, 38.045455)">
|
||||
<polyline id="路径-10" stroke="url(#linearGradient-3)" stroke-width="2.12" points="190.887262 22.1931818 166.031081 4.22727273 4.00078371 4.22727273"></polyline>
|
||||
<ellipse id="椭圆形" fill="#31A6AE" cx="4.00078371" cy="4.22727273" rx="4.00078371" ry="4.22727273"></ellipse>
|
||||
</g>
|
||||
<polyline id="路径-9" stroke="url(#linearGradient-4)" stroke-width="2.12" transform="translate(479.530477, 30.119318) scale(-1, 1) translate(-479.530477, -30.119318) " points="959.060954 -1.33756642e-14 876.066883 -4.67997966e-14 838.164187 26.2788831 373.972385 26.2788831 326.048198 60.2386364 -4.54174955e-13 60.2386364"></polyline>
|
||||
<g id="编组-28" transform="translate(114.894416, 36.988636)">
|
||||
<polyline id="路径-10" stroke="url(#linearGradient-5)" stroke-width="2.12" points="472.111287 23.25 447.255105 5.28409091 326.074844 5.28409091"></polyline>
|
||||
<ellipse id="椭圆形" fill="#31A6AE" cx="321.073864" cy="5.28409091" rx="4.00078371" ry="4.22727273"></ellipse>
|
||||
<ellipse id="椭圆形备份" fill="#31A6AE" cx="233.056623" cy="5.28409091" rx="4.00078371" ry="4.22727273"></ellipse>
|
||||
<g id="编组-2" transform="translate(247.059366, 0.000000)" fill="#31A6AE">
|
||||
<polygon id="路径-11" points="51.8543795 6.33584094e-14 48.0094045 0 56.5647535 10.5681818 60.0117556 10.5681818"></polygon>
|
||||
<polygon id="路径-11备份" opacity="0.8" points="39.8520284 6.33584094e-14 36.0070534 0 44.5624024 10.5681818 48.0094045 10.5681818"></polygon>
|
||||
<polygon id="路径-11备份-3" opacity="0.4" points="15.8473261 6.33584094e-14 12.0023511 0 20.5577001 10.5681818 24.0047022 10.5681818"></polygon>
|
||||
<polygon id="路径-11备份-2" opacity="0.601434" points="27.8496773 6.33584094e-14 24.0047022 0 32.5600513 10.5681818 36.0070534 10.5681818"></polygon>
|
||||
<polygon id="路径-11备份-4" opacity="0.201434" points="3.84497501 6.33584094e-14 4.67611706e-16 0 8.55534901 10.5681818 12.0023511 10.5681818"></polygon>
|
||||
</g>
|
||||
<line x1="229.055839" y1="4.75568182" x2="0.354627912" y2="5.28409091" id="路径-12" stroke="url(#linearGradient-6)" stroke-width="2.12"></line>
|
||||
</g>
|
||||
<g id="编组-3" transform="translate(117.896179, 0.000000)">
|
||||
<g id="编组-2备份" fill="#31A6AE">
|
||||
<polygon id="路径-11" points="77.7815693 9.50376141e-14 72.0141067 0 84.8471303 15.8522727 90.0176334 15.8522727"></polygon>
|
||||
<polygon id="路径-11备份" opacity="0.8" points="59.7780426 9.50376141e-14 54.0105801 0 66.8436036 15.8522727 72.0141067 15.8522727"></polygon>
|
||||
<polygon id="路径-11备份-3" opacity="0.4" points="23.7709892 9.50376141e-14 18.0035267 0 30.8365502 15.8522727 36.0070534 15.8522727"></polygon>
|
||||
<polygon id="路径-11备份-2" opacity="0.601434" points="41.7745159 9.50376141e-14 36.0070534 0 48.8400769 15.8522727 54.0105801 15.8522727"></polygon>
|
||||
<polygon id="路径-11备份-4" opacity="0.201434" points="5.76746252 9.50376141e-14 7.01417559e-16 0 12.8330235 15.8522727 18.0035267 15.8522727"></polygon>
|
||||
</g>
|
||||
<line x1="103.02018" y1="7.92613636" x2="203.018671" y2="8.45454545" id="路径-13" stroke="url(#linearGradient-7)" stroke-width="2.12"></line>
|
||||
</g>
|
||||
</g>
|
||||
<rect id="矩形" stroke="#979797" stroke-width="1.06" opacity="0" x="0.53" y="0.53" width="1918.94" height="91.94"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.1 KiB |
53
src/App.tsx
53
src/App.tsx
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState, useContext } from "react";
|
||||
import React, { useEffect } from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import locales from "./locales/locales";
|
||||
import "./App.css";
|
||||
@ -13,17 +13,16 @@ import { Observable } from "@babylonjs/core";
|
||||
import { selectGlassStatus } from "./store/ProductionMonitoringEntity";
|
||||
import TestPage from "./page/TestPage";
|
||||
import LDPage from "./page/LDPage";
|
||||
import LinePage from "./page/LinePage";
|
||||
import LinePage1_1 from "./page/LinePage1-1";
|
||||
import LinePage1_2 from "./page/LinePage1-2";
|
||||
import LinePage2_1 from "./page/LinePage2-1";
|
||||
import LinePage2_2 from "./page/LinePage2-2";
|
||||
import LinePage3_1 from "./page/LinePage3-1";
|
||||
import LinePage3_2 from "./page/LinePage3-2";
|
||||
import LinePage4_1 from "./page/LinePage4-1";
|
||||
import LinePage4_2 from "./page/LinePage4-2";
|
||||
import LinePage5_1 from "./page/LinePage5-1";
|
||||
import LinePage5_2 from "./page/LinePage5-2";
|
||||
import LinePageOneOne from "./page/LinePage1-1";
|
||||
import LinePageOneTwo from "./page/LinePage1-2";
|
||||
import LinePageTwoOne from "./page/LinePage2-1";
|
||||
import LinePageTwoTwo from "./page/LinePage2-2";
|
||||
import LinePageThreeOne from "./page/LinePage3-1";
|
||||
import LinePageThreeTwo from "./page/LinePage3-2";
|
||||
import LinePageFourOne from "./page/LinePage4-1";
|
||||
import LinePageFourTwo from "./page/LinePage4-2";
|
||||
import LinePageFiveOne from "./page/LinePage5-1";
|
||||
import LinePageFiveTwo from "./page/LinePage5-2";
|
||||
|
||||
// const LOCALES_LIST = [
|
||||
// {
|
||||
@ -69,11 +68,6 @@ function App() {
|
||||
element: <TestPage />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/LD",
|
||||
element: <LDPage />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
///////////////////////////////////////////////////////////////
|
||||
// {
|
||||
// path: "/LP/:LineID?",
|
||||
@ -81,54 +75,59 @@ function App() {
|
||||
// errorElement: <ErrorPage />,
|
||||
// },
|
||||
////////////////////////////从这开始///////////////////////////////////
|
||||
{
|
||||
path: "/LD",
|
||||
element: <LDPage />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/LP/1-1",
|
||||
element: <LinePage1_1 />,
|
||||
element: <LinePageOneOne />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/LP/1-2",
|
||||
element: <LinePage1_2 />,
|
||||
element: <LinePageOneTwo />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/LP/2-1",
|
||||
element: <LinePage2_1 />,
|
||||
element: <LinePageTwoOne />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/LP/2-2",
|
||||
element: <LinePage2_2 />,
|
||||
element: <LinePageTwoTwo />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/LP/3-1",
|
||||
element: <LinePage3_1 />,
|
||||
element: <LinePageThreeOne />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/LP/3-2",
|
||||
element: <LinePage3_2 />,
|
||||
element: <LinePageThreeTwo />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/LP/4-1",
|
||||
element: <LinePage4_1 />,
|
||||
element: <LinePageFourOne />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/LP/4-2",
|
||||
element: <LinePage4_2 />,
|
||||
element: <LinePageFourTwo />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/LP/5-1",
|
||||
element: <LinePage5_1 />,
|
||||
element: <LinePageFiveOne />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/LP/5-2",
|
||||
element: <LinePage5_2 />,
|
||||
element: <LinePageFiveTwo />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
]);
|
||||
|
||||
@ -8,10 +8,10 @@ import { HemisphericLight, Vector3 } from "@babylonjs/core";
|
||||
import { useAppSelector } from "../store/hooks";
|
||||
import "../page/style/standard.css";
|
||||
import EqInfoData from "./EqInfoData";
|
||||
import AlarmTipGreen from "./../page/LinePage/assets/icon/g.png";
|
||||
import AlarmTipYellow from "./../page/LinePage/assets/icon/y.png";
|
||||
import AlarmTipRed from "./../page/LinePage/assets/icon/r.png";
|
||||
import {selectLine1Before} from "../store/LinePageSlice"
|
||||
import AlarmTipGreen from "./../page/assets/icon/g.png";
|
||||
import AlarmTipYellow from "./../page/assets/icon/y.png";
|
||||
import AlarmTipRed from "./../page/assets/icon/r.png";
|
||||
import {selectLine1Before} from "../store/LinePageSlice";
|
||||
|
||||
const lineNameNo = ["一","二","三","四","五"]
|
||||
const myStyle = {
|
||||
|
||||
@ -2,7 +2,7 @@ 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 },
|
||||
grid: { top: 40, right: 10, bottom: 10, left: 10, containLabel: true },
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
|
||||
125
src/page/Component/BarLineChart/chart.config.ts
Normal file
125
src/page/Component/BarLineChart/chart.config.ts
Normal file
@ -0,0 +1,125 @@
|
||||
import * as echarts from "echarts";
|
||||
export default function getOptions() {
|
||||
// if (dataProps.length === 0) return null;
|
||||
return {
|
||||
grid: { top: 40, right: 10, bottom: 10, left: 10, containLabel: true },
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月'],
|
||||
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",
|
||||
},
|
||||
},
|
||||
},{
|
||||
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: [100,200,110,22,11,458,15,2,45],
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
barGap:0,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(157, 234, 245, 1)' },
|
||||
{ offset: 1, color: 'rgba(110, 249, 222, 1)' },
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
data: [10,20,11,221,111,48,115,211,145],
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(92, 183, 255, 1)' },
|
||||
{ offset: 1, color: 'rgba(54, 75, 254, 1)' },
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
data: [100,99,89,89,88,98,100,98,95],
|
||||
type: "line",
|
||||
yAxisIndex: 1,
|
||||
symbol:'circle',
|
||||
symbolSize: 7,
|
||||
color:'rgba(18, 255, 245, 1)',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(18, 255, 245, 0.8)' },
|
||||
{ offset: 0.2, color: 'rgba(18, 255, 245, 0.2)' },
|
||||
{ offset: 0.4, color: 'rgba(18, 255, 245, 0)' },
|
||||
]),
|
||||
}
|
||||
}
|
||||
],
|
||||
};
|
||||
}
|
||||
44
src/page/LDPage/Center/CenterDown.tsx
Normal file
44
src/page/LDPage/Center/CenterDown.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import NumberBox from "../Component/NumberBox";
|
||||
const num1 = -18
|
||||
const num2 = +18
|
||||
function CenterDown() {
|
||||
return(
|
||||
<div className="ld_center_down flex-row">
|
||||
<div className="ld_center_down_inner flex-col ld_left-box">
|
||||
<TitleBox title={"center_down_left"} />
|
||||
<div style={{padding:'10px 0px 0px 20px'}}>
|
||||
<div style={{width:'300px',height:'128px',marginBottom:'5px'}}>
|
||||
<NumberBox num={num1} show={true} title={'总投入片数'}/>
|
||||
</div>
|
||||
<div style={{width:'300px',height:'128px'}}>
|
||||
<NumberBox num={num2} show={true} title={'总生产片数'}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ld_center_down_inner flex-col ld_center-box">
|
||||
<TitleBox title={"center_down_center"} />
|
||||
<div style={{padding:'10px 0px 0px 20px'}}>
|
||||
<div style={{width:'300px',height:'128px',marginBottom:'5px'}}>
|
||||
<NumberBox num={num1} show={false} title={'总投入片数'}/>
|
||||
</div>
|
||||
<div style={{width:'300px',height:'128px'}}>
|
||||
<NumberBox num={num2} show={false} title={'总生产片数'}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ld_center_down_inner flex-col ld_right-box">
|
||||
<TitleBox title={"center_down_right"} />
|
||||
<div style={{padding:'10px 0px 0px 20px'}}>
|
||||
<div style={{width:'300px',height:'128px',marginBottom:'5px'}}>
|
||||
<NumberBox num={num1} show={true} title={'总投入片数/万'}/>
|
||||
</div>
|
||||
<div style={{width:'300px',height:'128px'}}>
|
||||
<NumberBox num={num2} show={true} title={'总生产片数/万'}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default CenterDown;
|
||||
8
src/page/LDPage/Center/CenterUp.tsx
Normal file
8
src/page/LDPage/Center/CenterUp.tsx
Normal file
@ -0,0 +1,8 @@
|
||||
function CenterUp() {
|
||||
return(
|
||||
<div className="ld_center_up">
|
||||
center-up
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default CenterUp;
|
||||
27
src/page/LDPage/Component/NumberBox/index.css
Normal file
27
src/page/LDPage/Component/NumberBox/index.css
Normal file
@ -0,0 +1,27 @@
|
||||
.number_box_container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../../../../../public/png/numberBox.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
margin:0 auto;
|
||||
padding: 25px 20px 20px;
|
||||
}
|
||||
.number_box_container .big_number {
|
||||
font-size:38px;
|
||||
color: #fff;
|
||||
}
|
||||
.number_box_container .big_number_title {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.number_box_container .big_number_title_left {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.number_box_container .big_number_title_right {
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
top: 6px;
|
||||
left:10px;
|
||||
}
|
||||
34
src/page/LDPage/Component/NumberBox/index.tsx
Normal file
34
src/page/LDPage/Component/NumberBox/index.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import './index.css';
|
||||
import a_r from './../../../assets/icon/a_r.png';
|
||||
import a_g from './../../../assets/icon/a_g.png';
|
||||
interface boxProps {
|
||||
num:number,
|
||||
show?:boolean,
|
||||
title:string,
|
||||
lastYear?:boolean
|
||||
}
|
||||
function NumberBox(props: boxProps) {
|
||||
return (
|
||||
<div className="number_box_container" style={{paddingLeft:props.lastYear?'45px':'25px'}}>
|
||||
<div className='flex-row big_number_title'>
|
||||
<div className='big_number_title_left'>{props.title}</div>
|
||||
{
|
||||
props.show?(
|
||||
<div className='big_number_title_right' style={{color:props.num>0?'#FF0000':'#00FF00'}}>
|
||||
{props.num>0?'+':''}{props.num}%
|
||||
{
|
||||
props.num>0?(
|
||||
<img src={a_r} alt="" width='5px'/>
|
||||
):(
|
||||
<img src={a_g} alt="" width='5px'/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
):''
|
||||
}
|
||||
</div>
|
||||
<div className='big_number'>261,938,984</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default NumberBox;
|
||||
@ -1,9 +1,7 @@
|
||||
import Defect from "./../../assets/icon/defect.png";
|
||||
import Alarm from "./../../assets/icon/alarm.png";
|
||||
import Finished from "./../../assets/icon/finished.png";
|
||||
import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
|
||||
import Num from "./../../assets/icon/num.png";
|
||||
import Record from "./../../assets/icon/record.png";
|
||||
import Defect from "./../../../assets/icon/defect.png";
|
||||
import NumBar from "./../../../assets/icon/numBar.png";
|
||||
import Defe from "./../../../assets/icon/defe.png";
|
||||
import Record from "./../../../assets/icon/record.png";
|
||||
import "./index.css";
|
||||
interface titleProps {
|
||||
title: string;
|
||||
@ -13,33 +11,38 @@ function TitleBox(props: titleProps) {
|
||||
switch (props.title) {
|
||||
case "left_up":
|
||||
return {
|
||||
img: Defect,
|
||||
title: "产线报废汇总",
|
||||
img: Record,
|
||||
title: "近期数据对比",
|
||||
};
|
||||
case "left_down":
|
||||
return {
|
||||
img: Record,
|
||||
title: "当前产线报废情况",
|
||||
img: NumBar,
|
||||
title: "投入产出及良品率",
|
||||
};
|
||||
case "center_down_left":
|
||||
return {
|
||||
img: Alarm,
|
||||
title: "异常报警",
|
||||
img: Defect,
|
||||
title: "本月数据",
|
||||
};
|
||||
case "center_down_center":
|
||||
return {
|
||||
img: Defect,
|
||||
title: "上月数据",
|
||||
};
|
||||
case "center_down_right":
|
||||
return {
|
||||
img: Finished,
|
||||
title: "产线成品率",
|
||||
img: Defect,
|
||||
title: "本年数据",
|
||||
};
|
||||
case "right_up":
|
||||
return {
|
||||
img: Num,
|
||||
title: "各产线总投入和产出",
|
||||
img: Defe,
|
||||
title: "缺陷情况",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
img: InputAndOutput,
|
||||
title: "当前产线投入和产出",
|
||||
img: Defect,
|
||||
title: "上年数据",
|
||||
};
|
||||
}
|
||||
};
|
||||
164
src/page/LDPage/Component/pieChart/chart.config.ts
Normal file
164
src/page/LDPage/Component/pieChart/chart.config.ts
Normal file
@ -0,0 +1,164 @@
|
||||
function getCoordinates(startArc: number, endArc: number) {
|
||||
const posi = [
|
||||
Math.sin(startArc),
|
||||
-Math.cos(startArc),
|
||||
Math.sin(endArc),
|
||||
-Math.cos(endArc),
|
||||
];
|
||||
const dx = posi[2] - posi[0];
|
||||
const dy = posi[3] - posi[1];
|
||||
|
||||
return getLocation(dx, dy);
|
||||
}
|
||||
function getLocation(dx: number, dy: number) {
|
||||
const tanV = dx / dy;
|
||||
const directSign = Math.abs(tanV) < 1;
|
||||
const t = directSign ? tanV : 1 / tanV;
|
||||
|
||||
const sign1 = t > 0 ? 1 : -1;
|
||||
const sign2 = dx > 0 ? 1 : -1;
|
||||
const sign = directSign ? sign1 * sign2 : sign2;
|
||||
|
||||
const group1 = [0.5 - (sign * t) / 2, 0.5 + (sign * t) / 2];
|
||||
const group2 = sign > 0 ? [0, 1] : [1, 0];
|
||||
const group = [...group1, ...group2];
|
||||
const keys = directSign ? ["x", "x2", "y", "y2"] : ["y", "y2", "x", "x2"];
|
||||
|
||||
let res: { [key: string]: any } = {};
|
||||
keys.forEach((k, idx) => {
|
||||
res[k] = group[idx];
|
||||
});
|
||||
return res;
|
||||
}
|
||||
// 数据格式
|
||||
// const dataProps = [
|
||||
// {value: 14,name:'缺陷1'},
|
||||
// {value: 20,name:'缺陷2'},
|
||||
// {value: 22,name:'缺陷3'},
|
||||
// {value: 14,name:'缺陷4'},
|
||||
// {value: 30,name:'缺陷5'}
|
||||
// ]
|
||||
let rangArrValue: any[] = [];
|
||||
let dataList: any = [];
|
||||
let totalValue = 0;
|
||||
const colors = [
|
||||
"rgb(39, 96, 255)",
|
||||
"rgb(91, 155, 255)",
|
||||
"rgb(153, 214, 108)",
|
||||
"rgb(18, 255, 245)",
|
||||
"rgb(221, 177, 18)",
|
||||
];
|
||||
const getPersonnelList = async (dataProps: any) => {
|
||||
totalValue = dataProps.reduce(
|
||||
(total: any, value: any) => total + value.value,
|
||||
0
|
||||
);
|
||||
let cacheNum = 0;
|
||||
for (let i = 0; i < dataProps.length; i++) {
|
||||
const endNum = cacheNum + dataProps[i].value;
|
||||
rangArrValue.push([cacheNum, endNum]);
|
||||
cacheNum = endNum;
|
||||
}
|
||||
const angleArr = rangArrValue.map((arr) =>
|
||||
arr.map((num: any) => (num / totalValue) * Math.PI * 2)
|
||||
);
|
||||
dataList = dataProps.map((item: any, index: any) => {
|
||||
const range = getCoordinates(angleArr[index][0], angleArr[index][1]);
|
||||
const startColor = colors[index%5];
|
||||
const color = {
|
||||
type: "linear",
|
||||
x: range.x,
|
||||
x2: range.x2,
|
||||
y: range.y,
|
||||
y2: range.y2,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: startColor, // 起始颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: `${startColor.substring(0, startColor.length - 1)}, 0)`, // 终点颜色
|
||||
},
|
||||
],
|
||||
global: false,
|
||||
};
|
||||
|
||||
return {
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
itemStyle: {
|
||||
color: color,
|
||||
},
|
||||
};
|
||||
});
|
||||
};
|
||||
export default function getOptions(dataProps: any) {
|
||||
if (dataProps.length === 0) return null;
|
||||
getPersonnelList(dataProps);
|
||||
return {
|
||||
color: colors,
|
||||
graphic: [
|
||||
{
|
||||
type: "text",
|
||||
left: "center",
|
||||
top: "44%",
|
||||
style: {
|
||||
text: totalValue,
|
||||
fill: "#fff",
|
||||
width: 150,
|
||||
height: 44,
|
||||
fontSize: 31,
|
||||
fontWeight: 400,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
left: "center",
|
||||
top: "55%",
|
||||
style: {
|
||||
text: "总数/件",
|
||||
fill: "rgba(255, 255, 255, 0.70)",
|
||||
width: 32,
|
||||
height: 16,
|
||||
fontSize: 16,
|
||||
fontWeight: 400,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "产线缺陷分类",
|
||||
type: "pie",
|
||||
radius: ["45%", "60%"],
|
||||
center: ["50%", "50%"],
|
||||
// label: {
|
||||
// formatter: "{d}%",
|
||||
// color: "#fff",
|
||||
// },
|
||||
label:{
|
||||
formatter:function(params:any){
|
||||
return `{color${params.dataIndex}|${params.percent}%}\n{style2|${params.name}}`
|
||||
},
|
||||
rich:{
|
||||
color0:{color:'rgb(39, 96, 255)',fontSize:22},
|
||||
color1:{color:'rgb(91, 155, 255)',fontSize:22},
|
||||
color2:{color:'rgb(153, 214, 108)',fontSize:22},
|
||||
color3:{color:'rgb(18, 255, 245)',fontSize:22},
|
||||
color4:{color:'rgb(221, 177, 18)',fontSize:22},
|
||||
color5:{color:'rgb(39, 96, 255)',fontSize:22},
|
||||
color6:{color:'rgb(91, 155, 255)',fontSize:22},
|
||||
color7:{color:'rgb(153, 214, 108)',fontSize:22},
|
||||
color8:{color:'rgb(18, 255, 245)',fontSize:22},
|
||||
color9:{color:'rgb(221, 177, 18)',fontSize:22},
|
||||
style2:{
|
||||
color:'#fff',
|
||||
fontSize:14
|
||||
}
|
||||
}
|
||||
},
|
||||
data: dataList,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
20
src/page/LDPage/Left/LeftDown.tsx
Normal file
20
src/page/LDPage/Left/LeftDown.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import getOptions from "../../Component/BarLineChart/chart.config";
|
||||
function LeftDown() {
|
||||
const options1 = getOptions();
|
||||
return(
|
||||
<div className="ld_left_down">
|
||||
<TitleBox title={"left_down"} />
|
||||
<div className="top_legend">
|
||||
<span className="chart_legend_icon1">投入</span>
|
||||
<span className="chart_legend_icon2">产出</span>
|
||||
<span><span className="chart_legend_icon3"></span>良品率</span>
|
||||
</div>
|
||||
<div style={{ width: "402px", height: "288px" }}>
|
||||
<ReactECharts option={options1} style={{ height: "100%" }} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default LeftDown;
|
||||
67
src/page/LDPage/Left/LeftUp.tsx
Normal file
67
src/page/LDPage/Left/LeftUp.tsx
Normal file
@ -0,0 +1,67 @@
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import inputImg from "../../assets/icon/input.png"
|
||||
import prod from '../../assets/icon/prod.png'
|
||||
function LeftUp() {
|
||||
return(
|
||||
<div className="ld_left_up">
|
||||
<TitleBox title={"left_up"} />
|
||||
<div style={{ padding: "10px", height: "555px" }}>
|
||||
<div className="left_down_title flex-row" style={{marginBottom:"8px"}}>
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本日</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="ld_left_up_inner">
|
||||
<div className="num_contrast flex-row">
|
||||
<div>
|
||||
<img src={inputImg} alt="" width="54px"/>
|
||||
<p style={{position:"relative",top:"-3px",left:"3px",color:'#9DEAF5'}}>总投入</p>
|
||||
</div>
|
||||
<div className="num_contrast_right">
|
||||
<p style={{height:"45px",paddingTop:'5px'}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>932,261</span>片数</p>
|
||||
<p style={{height:"40px"}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>894</span>面积/㎡</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="num_contrast flex-row">
|
||||
<div>
|
||||
<img src={prod} alt="" width="54px"/>
|
||||
<p style={{position:"relative",top:"-3px",left:"3px",color:'#9DEAF5'}}>总生产</p>
|
||||
</div>
|
||||
<div className="num_contrast_right">
|
||||
<p style={{height:"45px",paddingTop:'5px'}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>932,261</span>片数</p>
|
||||
<p style={{height:"40px"}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>894</span>面积/㎡</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="left_down_title flex-row" style={{margin:"10px 0px 8px 0px"}}>
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">昨日</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="ld_left_up_inner">
|
||||
<div className="num_contrast flex-row">
|
||||
<div>
|
||||
<img src={inputImg} alt="" width="54px"/>
|
||||
<p style={{position:"relative",top:"-3px",left:"3px",color:'#9DEAF5'}}>总投入</p>
|
||||
</div>
|
||||
<div className="num_contrast_right">
|
||||
<p style={{height:"45px",paddingTop:'5px'}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>932,261</span>片数</p>
|
||||
<p style={{height:"40px"}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>894</span>面积/㎡</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="num_contrast flex-row">
|
||||
<div>
|
||||
<img src={prod} alt="" width="54px"/>
|
||||
<p style={{position:"relative",top:"-3px",left:"3px",color:'#9DEAF5'}}>总生产</p>
|
||||
</div>
|
||||
<div className="num_contrast_right">
|
||||
<p style={{height:"45px",paddingTop:'5px'}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>932,261</span>片数</p>
|
||||
<p style={{height:"40px"}}><span style={{fontSize:'32px',display:'inline-block',marginRight:'5px'}}>894</span>面积/㎡</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default LeftUp;
|
||||
20
src/page/LDPage/Right/RightDown.tsx
Normal file
20
src/page/LDPage/Right/RightDown.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import NumberBox from "../Component/NumberBox";
|
||||
const num1 = -18
|
||||
const num2 = +18
|
||||
function RightDown() {
|
||||
return(
|
||||
<div className="ld_right_down">
|
||||
<TitleBox title={"right_down"} />
|
||||
<div style={{padding:'10px 0px 0px 20px'}}>
|
||||
<div style={{width:'365px',height:'128px',marginBottom:'5px'}}>
|
||||
<NumberBox num={num1} show={false} title={'总投入片数/万'} lastYear={true}/>
|
||||
</div>
|
||||
<div style={{width:'365px',height:'128px'}}>
|
||||
<NumberBox num={num2} show={false} title={'总生产片数/万'} lastYear={true}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default RightDown;
|
||||
82
src/page/LDPage/Right/RightUp.tsx
Normal file
82
src/page/LDPage/Right/RightUp.tsx
Normal file
@ -0,0 +1,82 @@
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import a_r from './../../assets/icon/a_r.png';
|
||||
import a_g from './../../assets/icon/a_g.png';
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import getOptions from "../Component/pieChart/chart.config";
|
||||
function RightUp() {
|
||||
const dataProps = [
|
||||
{value: 14,name:'缺陷1'},
|
||||
{value: 20,name:'缺陷2'},
|
||||
{value: 22,name:'缺陷3'},
|
||||
{value: 14,name:'缺陷4'},
|
||||
{value: 30,name:'缺陷5'}
|
||||
]
|
||||
const options1 = getOptions(dataProps);
|
||||
return(
|
||||
<div className="ld_right_up">
|
||||
<TitleBox title={"right_up"} />
|
||||
<div>
|
||||
<div className="left_down_title flex-row" style={{marginBottom:"8px"}}>
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">总数</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="ld_right_up_box">
|
||||
<div className="ld_right_up_box1 flex-row">
|
||||
<div style={{width:"106px"}}>
|
||||
<p>
|
||||
当日
|
||||
<img src={a_r} alt="" width='5px' className="ld_right_up_img"/>
|
||||
</p>
|
||||
<p style={{fontSize:'28px',textShadow: '0px 5px 2px rgba(0,0,0,0.62)'}}>283</p>
|
||||
</div>
|
||||
<div style={{width:"106px"}}>
|
||||
<p>
|
||||
本月
|
||||
<img src={a_g} alt="" width='5px' className="ld_right_up_img"/>
|
||||
</p>
|
||||
<p style={{fontSize:'28px',textShadow: '0px 5px 2px rgba(0,0,0,0.62)'}}>2,830</p>
|
||||
</div>
|
||||
<div style={{width:"106px"}}>
|
||||
<p>
|
||||
本年
|
||||
<img src={a_g} alt="" width='5px' className="ld_right_up_img"/>
|
||||
</p>
|
||||
<p style={{fontSize:'28px',textShadow: '0px 5px 2px rgba(0,0,0,0.62)'}}>32,830</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ld_right_up_box1 flex-row">
|
||||
<div style={{width:"106px"}}>
|
||||
<p>
|
||||
昨日
|
||||
</p>
|
||||
<p style={{fontSize:'28px',textShadow: '0px 5px 2px rgba(0,0,0,0.62)'}}>283</p>
|
||||
</div>
|
||||
<div style={{width:"106px"}}>
|
||||
<p>
|
||||
上月
|
||||
</p>
|
||||
<p style={{fontSize:'28px',textShadow: '0px 5px 2px rgba(0,0,0,0.62)'}}>2,830</p>
|
||||
</div>
|
||||
<div style={{width:"106px"}}>
|
||||
<p>
|
||||
上年
|
||||
</p>
|
||||
<p style={{fontSize:'28px',textShadow: '0px 5px 2px rgba(0,0,0,0.62)'}}>32,830</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="left_down_title flex-row" style={{marginBottom:"8px"}}>
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">全厂缺陷汇总</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div style={{ width: "400px", height: "320px" }}>
|
||||
<ReactECharts option={options1} style={{ height: "100%" }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default RightUp;
|
||||
18
src/page/LDPage/TopP.tsx
Normal file
18
src/page/LDPage/TopP.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import '../../lanhuapp/common.css';
|
||||
import "./index.css";
|
||||
|
||||
function TopP() {
|
||||
return (
|
||||
<div className="flex-row">
|
||||
<div className="block_top_ld flex-row">
|
||||
<div className='block_top_title'></div>
|
||||
<div className='block_top_time'>
|
||||
<div className='time-title'>时间选择</div>
|
||||
<div className='time-content'>2024-11-22</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TopP;
|
||||
@ -1,4 +1,225 @@
|
||||
.main-box {
|
||||
font-size: 50px;
|
||||
/* 顶部 */
|
||||
.block_top_ld {
|
||||
width: 1920px;
|
||||
height: 94px;
|
||||
background: url(/public/svg/topbackLD.svg) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.block_top_title {
|
||||
width: 651px;
|
||||
height: 77px;
|
||||
background: url(/public/png/topTiltle.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.block_top_time {
|
||||
position:absolute;
|
||||
right:22px;
|
||||
top:56px;
|
||||
color:#fff;
|
||||
font-size: 24px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.block_top_time .time-title {
|
||||
display:inline-block;
|
||||
width:122px;
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
text-align: center;
|
||||
border:1px solid #52FFF1;
|
||||
border-right:none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
|
||||
}
|
||||
.block_top_time .time-content {
|
||||
display:inline-block;
|
||||
width:191px;
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
text-align: center;
|
||||
border:1px solid #52FFF1;
|
||||
border-radius: 0 4px 4px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 中部 */
|
||||
.block_bottom {
|
||||
width: 1920px;
|
||||
height: 966px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.group_left {
|
||||
width: 402px;
|
||||
height: 966px;
|
||||
margin: 0 0 0 24px;
|
||||
}
|
||||
|
||||
.group_center {
|
||||
width: 1041px;
|
||||
height: 966px;
|
||||
margin: 0 0 0 15px;
|
||||
}
|
||||
|
||||
.group_right {
|
||||
width: 401px;
|
||||
height: 966px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.ld_left_up {
|
||||
width: 402px;
|
||||
height: 599px;
|
||||
background: url(../../../public/png/rect/lp_left_down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.ld_left_up_inner {
|
||||
width: 360px;
|
||||
height: 236px;
|
||||
background: url(../../../public/png/rect/ld_left_up_innerbox.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
margin:0 auto;
|
||||
}
|
||||
.ld_left_up_inner .num_contrast {
|
||||
height:113px;
|
||||
padding:20px 18px 0px 29px;
|
||||
color:#fff;
|
||||
}
|
||||
.ld_left_up_inner .num_contrast p{
|
||||
margin: 0px;
|
||||
text-shadow: 0px 4px 2px rgba(0,0,0,0.62);
|
||||
}
|
||||
.ld_left_up_inner .num_contrast .num_contrast_right {
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.ld_left_down {
|
||||
width: 402px;
|
||||
height: 332px;
|
||||
background: url(../../../public/png/rect/lp_left_up.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
margin-top: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.ld_left_down .top_legend {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
left:120px;
|
||||
}
|
||||
.ld_left_down .top_legend .chart_legend_icon1{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.ld_left_down .top_legend .chart_legend_icon2{
|
||||
margin-right: 14px;
|
||||
}
|
||||
.ld_left_down .top_legend .chart_legend_icon1:before {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 5px;
|
||||
border-radius: 2px;
|
||||
background: #73F8E0;
|
||||
}
|
||||
.ld_left_down .top_legend .chart_legend_icon2:before {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 5px;
|
||||
border-radius: 2px;
|
||||
background: #497EFF;
|
||||
}
|
||||
.ld_left_down .top_legend .chart_legend_icon3 {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 8px;
|
||||
border-radius: 4px;
|
||||
background: #73F8E0;
|
||||
position:relative;
|
||||
}
|
||||
.ld_left_down .top_legend .chart_legend_icon3:before {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
width: 16px;
|
||||
height:2px;
|
||||
background: #73F8E0;
|
||||
position:absolute;
|
||||
top:3px;
|
||||
left:-4px;
|
||||
}
|
||||
.ld_center_up {
|
||||
width: 1041px;
|
||||
height: 599px;
|
||||
background: url(../../../public/png/rect/lp_center_up.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.ld_center_down {
|
||||
width: 1041px;
|
||||
height: 332px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
.ld_center_down_inner {
|
||||
width: 337px;
|
||||
height: 329px;
|
||||
background: url(../../../public/png/rect/ld_center_down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.ld_center_down .ld_left-box, .ld_center_down .ld_center-box {
|
||||
margin-right: 15px;
|
||||
position: relative;
|
||||
}
|
||||
.ld_right_up {
|
||||
width: 402px;
|
||||
height: 599px;
|
||||
background: url(../../../public/png/rect/lp_left_down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.ld_right_down {
|
||||
width: 402px;
|
||||
height: 332px;
|
||||
background: url(../../../public/png/rect/lp_left_up.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
margin-top: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.ld_right_up .ld_right_up_box {
|
||||
width: 358px;
|
||||
height:160px;
|
||||
background: url(../../../public/png/rect/ld_left_up_innerbox.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
margin:0 auto 20px;
|
||||
}
|
||||
.ld_right_up .ld_right_up_box .ld_right_up_box1 {
|
||||
width:100%;
|
||||
height: 80px;
|
||||
color: #fff;
|
||||
padding:12px 20px;
|
||||
}
|
||||
.ld_right_up .ld_right_up_box .ld_right_up_box1 p {
|
||||
margin:0;
|
||||
letter-spacing:2px;
|
||||
font-size:20px;
|
||||
}
|
||||
.ld_right_up_img {
|
||||
position:relative;
|
||||
left:2px;
|
||||
top:2px;
|
||||
}
|
||||
@ -1,34 +1,42 @@
|
||||
import "./index.css"
|
||||
import {useEffect} from 'react';
|
||||
import {useLocation,useNavigate} from "react-router-dom";
|
||||
import React from "react";
|
||||
import TopP from "./TopP";
|
||||
import Left from "./Left";
|
||||
import Right from "./Right";
|
||||
import Center from "./Center";
|
||||
// import {useEffect} from 'react';
|
||||
// import {useLocation,useNavigate} from "react-router-dom";
|
||||
function LDPage() {
|
||||
const navigate = useNavigate();
|
||||
const {state} = useLocation();
|
||||
console.log("LDPage被加载了")
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event:any) => {
|
||||
if (event.key === 'ArrowUp') {
|
||||
console.log('LDPage向上键被按下');
|
||||
navigate(`/TP/${state.LineID}`);
|
||||
// 执行向上键的逻辑
|
||||
} else if (event.key === 'ArrowDown') {
|
||||
console.log('LDPage向下键被按下');
|
||||
// 执行向下键的逻辑
|
||||
}
|
||||
};
|
||||
// const navigate = useNavigate();
|
||||
// const {state} = useLocation();
|
||||
// console.log("LDPage被加载了")
|
||||
// useEffect(() => {
|
||||
// const handleKeyDown = (event:any) => {
|
||||
// if (event.key === 'ArrowUp') {
|
||||
// console.log('LDPage向上键被按下');
|
||||
// navigate(`/TP/${state.LineID}`);
|
||||
// // 执行向上键的逻辑
|
||||
// } else if (event.key === 'ArrowDown') {
|
||||
// console.log('LDPage向下键被按下');
|
||||
// // 执行向下键的逻辑
|
||||
// }
|
||||
// };
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
// window.addEventListener('keydown', handleKeyDown);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
}, []);
|
||||
// return () => {
|
||||
// window.removeEventListener('keydown', handleKeyDown);
|
||||
// };
|
||||
// }, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="main-box">LDPage{state.LineID}</div>
|
||||
<div className="main-box" style={{display:'none'}}>3434</div>
|
||||
</>
|
||||
<React.Fragment>
|
||||
<TopP />
|
||||
<div className="block_bottom flex-row">
|
||||
<Left />
|
||||
<Center />
|
||||
<Right />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,248 +0,0 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import { useState } from "react";
|
||||
import getOptions from "./LineChart/chart.config";
|
||||
import { useParams } from "react-router-dom";
|
||||
function CenterDown() {
|
||||
const { LineID } = useParams();
|
||||
const lineID = LineID?.toString() || "1-1";
|
||||
console.log(lineID.slice(-1));
|
||||
// 假数据
|
||||
const dataSource = {
|
||||
day: {
|
||||
yData1: [76.1, 77.4, 75.2, 74.1, 78.5, 81.3, 79.2],
|
||||
yData2: [77.2, 78.1, 78.2, 77.1, 79.2, 78.3, 79.5],
|
||||
yData3: [75.1, 74.3, 71.3, 79.8, 82.3, 81.4, 80.3],
|
||||
yData4: [82.4, 83.1, 88.4, 85.3, 87.1, 82.5, 84.9],
|
||||
yData5: [82.3, 81.9, 85.8, 81.9, 84.1, 83.5, 82.3],
|
||||
},
|
||||
week: {
|
||||
yData1: [120, 200, 150, 80, 100, 89, 69],
|
||||
yData2: [100, 150, 120, 70, 90, 97, 89],
|
||||
yData3: [80, 120, 90, 60, 80, 79, 98],
|
||||
yData4: [60, 90, 70, 40, 60, 69, 98],
|
||||
yData5: [40, 60, 50, 20, 40, 89, 99],
|
||||
},
|
||||
month: {
|
||||
yData1: [1200, 2000, 1500, 800, 1000, 999, 889],
|
||||
yData2: [1000, 1500, 1200, 700, 900, 987, 897],
|
||||
yData3: [800, 1200, 900, 600, 800, 962, 759],
|
||||
yData4: [600, 900, 700, 400, 600, 896, 987],
|
||||
yData5: [400, 600, 500, 200, 400, 986, 951],
|
||||
},
|
||||
};
|
||||
const nameList = [
|
||||
{ name: "天", ename: "day" },
|
||||
{ name: "周", ename: "week" },
|
||||
{ name: "月", ename: "month" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
let chartData = (dataSource as { [key: string]: any })[activeName];
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const options = getOptions(chartData);
|
||||
const config = {
|
||||
header: ["序号", "报警时间", "报警编码", "设备状态"],
|
||||
headerHeight: 36,
|
||||
rowNum: 6,
|
||||
align: ["center", "left", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [80, 137, 137, 137],
|
||||
data: [
|
||||
["1", "行1列1", "行1列2", "<span style='color:#FF1E1E'>行1列3</span>"],
|
||||
["2", "行2列1", "行2列2", "<span style='color:#FF1E1E'>行2列3</span>"],
|
||||
["3", "行3列1", "行3列2", "<span style='color:#FF1E1E'>行3列3</span>"],
|
||||
["4", "行4列1", "行4列2", "<span style='color:#FFB40F'>行4列3</span>"],
|
||||
["5", "行5列1", "行5列2", "<span style='color:#FF1E1E'>行5列3</span>"],
|
||||
["6", "行6列1", "行6列2", "<span style='color:#FFB40F'>行6列3</span>"],
|
||||
["7", "行7列1", "行7列2", "<span style='color:#FF1E1E'>行7列3</span>"],
|
||||
["8", "行8列1", "行8列2", "<span style='color:#FF1E1E'>行8列3</span>"],
|
||||
["9", "行9列1", "行9列2", "<span style='color:#FF1E1E'>行9列3</span>"],
|
||||
[
|
||||
"10",
|
||||
"行10列1",
|
||||
"行10列2",
|
||||
"<span style='color:#FFB40F'>行10列3</span>",
|
||||
],
|
||||
],
|
||||
};
|
||||
const config1 = {
|
||||
header: ["序号", "报警时间", "报警设备", "报警内容"],
|
||||
headerHeight: 36,
|
||||
rowNum: 6,
|
||||
align: ["center", "left", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [80, 137, 137, 137],
|
||||
data: [
|
||||
[
|
||||
"1",
|
||||
"2024/8/28 08:32",
|
||||
"清洗机5_1",
|
||||
"<span style='color:#FF1E1E'>故障</span>",
|
||||
],
|
||||
[
|
||||
"2",
|
||||
"2024/8/28 06:12",
|
||||
"清洗机5_1",
|
||||
"<span style='color:#FFB40F'>离线</span>",
|
||||
],
|
||||
[
|
||||
"3",
|
||||
"2024/8/28 06:05",
|
||||
"磨边机5_2",
|
||||
"<span style='color:#FFB40F'>离线</span>",
|
||||
],
|
||||
[
|
||||
"4",
|
||||
"2024/8/28 04:43",
|
||||
"二次镀膜机5_1",
|
||||
"<span style='color:#FFB40F'>离线</span>",
|
||||
],
|
||||
[
|
||||
"5",
|
||||
"2024/8/28 02:14",
|
||||
"磨边机5_1",
|
||||
"<span style='color:#FF1E1E'>故障</span>",
|
||||
],
|
||||
[
|
||||
"6",
|
||||
"2024/8/27 22:54",
|
||||
"磨边机5_2",
|
||||
"<span style='color:#FFB40F'>离线</span>",
|
||||
],
|
||||
[
|
||||
"7",
|
||||
"2024/8/27 21:55",
|
||||
"磨边机5_1",
|
||||
"<span style='color:#FFB40F'>离线</span>",
|
||||
],
|
||||
[
|
||||
"8",
|
||||
"2024/8/27 21:42",
|
||||
"一次镀膜机5_2",
|
||||
"<span style='color:#FFB40F'>离线</span>",
|
||||
],
|
||||
[
|
||||
"9",
|
||||
"2024/8/27 21:37",
|
||||
"磨边机5_1",
|
||||
"<span style='color:#FFB40F'>离线</span>",
|
||||
],
|
||||
],
|
||||
};
|
||||
const config2 = {
|
||||
header: ["序号", "报警时间", "报警设备", "报警内容"],
|
||||
headerHeight: 36,
|
||||
rowNum: 6,
|
||||
align: ["center", "left", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [80, 137, 137, 137],
|
||||
data: [
|
||||
[
|
||||
"1",
|
||||
"2024/8/28 07:44",
|
||||
"下片机械手5_1",
|
||||
"<span style='color:#FF1E1E'>故障</span>",
|
||||
],
|
||||
[
|
||||
"2",
|
||||
"2024/8/28 07:35",
|
||||
"下片机械手5_1",
|
||||
"<span style='color:#FF1E1E'>故障</span>",
|
||||
],
|
||||
[
|
||||
"3",
|
||||
"2024/8/28 03:23",
|
||||
"在线铺纸机5_1",
|
||||
"<span style='color:#FFB40F'>离线</span>",
|
||||
],
|
||||
[
|
||||
"4",
|
||||
"2024/8/28 01:36",
|
||||
"下片机械手5_2",
|
||||
"<span style='color:#FF1E1E'>故障</span>",
|
||||
],
|
||||
[
|
||||
"5",
|
||||
"2024/8/28 00:38",
|
||||
"钢化炉5",
|
||||
"<span style='color:#FFB40F'>离线</span>",
|
||||
],
|
||||
[
|
||||
"6",
|
||||
"2024/8/27 23:58",
|
||||
"下片机械手5_3",
|
||||
"<span style='color:#FFB40F'>离线</span>",
|
||||
],
|
||||
[
|
||||
"7",
|
||||
"2024/8/27 23:45",
|
||||
"下片机械手5_2",
|
||||
"<span style='color:#FFB40F'>离线</span>",
|
||||
],
|
||||
[
|
||||
"8",
|
||||
"2024/8/27 22:34",
|
||||
"钢化炉5",
|
||||
"<span style='color:#FFB40F'>离线</span>",
|
||||
],
|
||||
[
|
||||
"9",
|
||||
"2024/8/27 20:31",
|
||||
"在线铺纸机5_1",
|
||||
"<span style='color:#FF1E1E'>故障</span>",
|
||||
],
|
||||
],
|
||||
};
|
||||
return (
|
||||
<div className="center_down flex-row">
|
||||
<div className="center_down_inner flex-col left-box">
|
||||
<TitleBox title={"center_down_left"} />
|
||||
<span className="alarm_num_title">— 报警总数 —</span>
|
||||
<div className="alarm_num">321,343</div>
|
||||
<div style={{ padding: 10, height: "270px" }}>
|
||||
<ScrollBoard
|
||||
config={lineID.slice(-1) === "1" ? config1 : config2}
|
||||
style={{ width: "492px", height: "250px" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* 产线成品率 */}
|
||||
<div className="center_down_inner flex-col right_box">
|
||||
<TitleBox title={"center_down_right"} />
|
||||
{/* <div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div> */}
|
||||
|
||||
{options && (
|
||||
<div className="chart_box">
|
||||
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
||||
</div>
|
||||
)}
|
||||
{!options && (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "72px",
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default CenterDown;
|
||||
@ -1,12 +0,0 @@
|
||||
import LinePageBabylon from "../../../babylonjs/LinePageBabylon";
|
||||
import { useParams } from "react-router-dom";
|
||||
function CenterUp() {
|
||||
const { LineID } = useParams();
|
||||
const lineID = LineID?.toString() || "1-1";
|
||||
return (
|
||||
<div className="center_up">
|
||||
<LinePageBabylon modelPath={`Line${lineID}`} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default CenterUp;
|
||||
@ -1,119 +0,0 @@
|
||||
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: 14,
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
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: 14,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#5982B2",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/%",
|
||||
min: 50,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
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: [
|
||||
{
|
||||
name: "产线1",
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 4,
|
||||
data: chartData.yData1,
|
||||
},
|
||||
{
|
||||
name: "产线2",
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 4,
|
||||
data: chartData.yData2,
|
||||
},
|
||||
{
|
||||
name: "产线3",
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 4,
|
||||
data: chartData.yData3,
|
||||
},
|
||||
{
|
||||
name: "产线4",
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 4,
|
||||
data: chartData.yData4,
|
||||
},
|
||||
{
|
||||
name: "产线5",
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 4,
|
||||
data: chartData.yData5,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
.switch-button {
|
||||
height: 33px;
|
||||
}
|
||||
.switch-button button {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
padding: 4px 10px;
|
||||
background-color: rgba(49, 135, 140, 0.3);
|
||||
cursor: pointer;
|
||||
}
|
||||
.switch-button button:first-child {
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
.switch-button button:last-child {
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
.switch-button button.active {
|
||||
background-color: rgba(86, 244, 231, 0.7);
|
||||
}
|
||||
@ -1,65 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import "./index.css";
|
||||
interface Name {
|
||||
name: string;
|
||||
ename: string;
|
||||
}
|
||||
interface nameListProps {
|
||||
nameList: Name[];
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
function createActiveNameUpdater(nameList: any, activeName: string) {
|
||||
let activeIndex = nameList.findIndex((obj: any) => obj.name === activeName);
|
||||
|
||||
return function updateActiveName() {
|
||||
activeIndex = (activeIndex + 1) % nameList.length;
|
||||
return nameList[activeIndex].ename;
|
||||
};
|
||||
}
|
||||
function SwitchButton(props: nameListProps) {
|
||||
const [activeName, setActiveName] = useState(props.nameList[0].ename);
|
||||
const [timerId, setTimerId] = useState<any>(null);
|
||||
let updateActiveName = createActiveNameUpdater(props.nameList, activeName);
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
let active = updateActiveName();
|
||||
setActiveName(active);
|
||||
props.onChange(active);
|
||||
}, 60000);
|
||||
setTimerId(timer);
|
||||
return () => {
|
||||
if (timerId !== null) {
|
||||
clearInterval(timerId);
|
||||
}
|
||||
};
|
||||
}, [props.nameList.length]);
|
||||
const btnClick = (ename: string) => {
|
||||
if (timerId !== null) {
|
||||
clearInterval(timerId);
|
||||
}
|
||||
setActiveName(ename);
|
||||
props.onChange(ename); // 通知父组件
|
||||
const newTimer = setInterval(() => {
|
||||
let active = updateActiveName();
|
||||
setActiveName(active);
|
||||
props.onChange(active);
|
||||
}, 60000);
|
||||
setTimerId(newTimer);
|
||||
};
|
||||
return (
|
||||
<div className="switch-button">
|
||||
{props.nameList.map((item, index) => {
|
||||
return (
|
||||
<button
|
||||
key={item.ename}
|
||||
className={activeName === item.ename ? "active" : ""}
|
||||
onClick={() => btnClick(item.ename)}
|
||||
>
|
||||
{item.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default SwitchButton;
|
||||
@ -1,79 +0,0 @@
|
||||
import * as echarts from "echarts";
|
||||
export default function getOptions(dataProps: number[], 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: ["磨边后", "包装1", "包装2"],
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
interval: 0,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#5982B2",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/片",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
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] },
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
@ -1,183 +0,0 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import { useState } from "react";
|
||||
import getOptions from "./BarChart/chart.config";
|
||||
function LeftDown() {
|
||||
const nameList = [
|
||||
{ name: "表单", ename: "table" },
|
||||
{ name: "柱状", ename: "chart" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const config = {
|
||||
header: ["序号", "工序类型", "报废数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 4,
|
||||
align: ["center", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
data: [
|
||||
["行1列1", "行1列2", "行1列3"],
|
||||
["行2列1", "行2列2", "行2列3"],
|
||||
["行3列1", "行3列2", "行3列3"],
|
||||
["行4列1", "行4列2", "行4列3"],
|
||||
["行5列1", "行5列2", "行5列3"],
|
||||
["行6列1", "行6列2", "行6列3"],
|
||||
["行7列1", "行7列2", "行7列3"],
|
||||
["行8列1", "行8列2", "行8列3"],
|
||||
["行9列1", "行9列2", "行9列3"],
|
||||
["行10列1", "行10列2", "行10列3"],
|
||||
],
|
||||
};
|
||||
const config1 = {
|
||||
header: ["序号", "工序类型", "报废数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 4,
|
||||
align: ["center", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
data: [
|
||||
["1", "磨边后", 224],
|
||||
["2", "包装1", 322],
|
||||
["3", "包装2", 66],
|
||||
],
|
||||
};
|
||||
const config2 = {
|
||||
header: ["序号", "工序类型", "报废数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 4,
|
||||
align: ["center", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
data: [
|
||||
["1", "磨边后", 1119],
|
||||
["2", "包装1", 1798],
|
||||
["3", "包装2", 435],
|
||||
],
|
||||
};
|
||||
const config3 = {
|
||||
header: ["序号", "工序类型", "报废数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 4,
|
||||
align: ["center", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
data: [
|
||||
["1", "磨边后", 5004],
|
||||
["2", "包装1", 9122],
|
||||
["3", "包装2", 1924],
|
||||
],
|
||||
};
|
||||
const color1 = ["#9DD5FF", "#1295FF"];
|
||||
const color2 = ["#85F6E9", "#2EC6B4"];
|
||||
const dataProps1 = [224, 322, 66];
|
||||
const dataProps2 = [1119, 1798, 435];
|
||||
const dataProps3 = [5004, 9122, 1924];
|
||||
const options1 = getOptions(dataProps1, color1);
|
||||
const options2 = getOptions(dataProps2, color2);
|
||||
const options3 = getOptions(dataProps3, color1);
|
||||
return (
|
||||
<div className="left_down">
|
||||
<TitleBox title={"left_down"} />
|
||||
<div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
<div style={{ padding: "10px", height: "555px" }}>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">当天</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="left_down_content">
|
||||
{activeName === "table" ? (
|
||||
<ScrollBoard
|
||||
config={config1}
|
||||
style={{ width: "380px", height: "150px" }}
|
||||
/>
|
||||
) : options1 ? (
|
||||
<ReactECharts option={options1} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "72px",
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本周</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="left_down_content">
|
||||
{activeName === "table" ? (
|
||||
<ScrollBoard
|
||||
config={config2}
|
||||
style={{ width: "380px", height: "150px" }}
|
||||
/>
|
||||
) : options2 ? (
|
||||
<ReactECharts option={options2} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "72px",
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本月</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="left_down_content">
|
||||
{activeName === "table" ? (
|
||||
<ScrollBoard
|
||||
config={config3}
|
||||
style={{ width: "380px", height: "150px" }}
|
||||
/>
|
||||
) : options3 ? (
|
||||
<ReactECharts option={options3} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "72px",
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default LeftDown;
|
||||
@ -1,73 +0,0 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import getOptions from "./SummaryBarChart/chart.config";
|
||||
import { useState } from "react";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine1Before} from "./../../../store/LinePageSlice"
|
||||
function LeftUp() {
|
||||
const data = useAppSelector(selectLine1Before);
|
||||
console.log('页面数据：',data)
|
||||
// 假数据
|
||||
const dataSource = {
|
||||
day: {
|
||||
xData: ["钢1线", "钢2线", "钢3线", "钢4线", "钢5线"],
|
||||
yData1: [236, 214, 196, 239, 224],
|
||||
yData2: [346, 296, 327, 311, 322],
|
||||
yData3: [78, 85, 56, 106, 66],
|
||||
sumData: [660, 595, 579, 656, 612],
|
||||
},
|
||||
week: {
|
||||
xData: ["钢1线", "钢2线", "钢3线", "钢4线", "钢5线"],
|
||||
yData1: [1336, 1223, 1313, 1134, 1119],
|
||||
yData2: [2146, 1996, 2053, 1857, 1798],
|
||||
yData3: [892, 658, 467, 758, 435],
|
||||
sumData: [4374, 3877, 3833, 3749, 3352],
|
||||
},
|
||||
month: {
|
||||
xData: ["钢1线", "钢2线", "钢3线", "钢4线", "钢5线"],
|
||||
yData1: [5789, 6432, 4679, 5456, 5004],
|
||||
yData2: [8762, 9732, 8137, 8820, 9122],
|
||||
yData3: [2468, 3120, 2782, 2395, 1924],
|
||||
sumData: [17019, 19284, 15598, 16671, 16050],
|
||||
},
|
||||
};
|
||||
const nameList = [
|
||||
{ name: "天", ename: "day" },
|
||||
{ name: "周", ename: "week" },
|
||||
{ name: "月", ename: "month" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
let chartData = (dataSource as { [key: string]: any })[activeName];
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const options = getOptions(chartData);
|
||||
return (
|
||||
<div className="left_up">
|
||||
<TitleBox title={"left_up"} />
|
||||
<div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
{options && (
|
||||
<div className="left_up_chart">
|
||||
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
||||
</div>
|
||||
)}
|
||||
{!options && (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "72px",
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default LeftUp;
|
||||
@ -1,149 +0,0 @@
|
||||
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: 14,
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: chartData.xData,
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#5982B2",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/片",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
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: [
|
||||
{
|
||||
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: chartData.yData4,
|
||||
// type: "bar",
|
||||
// stack: "a",
|
||||
// name: "镀膜",
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: "right",
|
||||
// color: "inherit",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// data: chartData.yData5,
|
||||
// type: "bar",
|
||||
// stack: "a",
|
||||
// name: "包装",
|
||||
// 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];
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
function Table() {
|
||||
return <div>111</div>;
|
||||
}
|
||||
export default Table;
|
||||
@ -1,99 +0,0 @@
|
||||
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: 14,
|
||||
},
|
||||
},
|
||||
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: 14,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#5982B2",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/千片",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
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,
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -1,294 +0,0 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import { useState } from "react";
|
||||
import getOptions from "./LineChart/chart.config";
|
||||
function RightDown() {
|
||||
// 假数据
|
||||
let tempData = [
|
||||
{
|
||||
type: "day",
|
||||
data: {
|
||||
time: [
|
||||
"0:00",
|
||||
"1:00",
|
||||
"2:00",
|
||||
"3:00",
|
||||
"4:00",
|
||||
"5:00",
|
||||
"6:00",
|
||||
"7:00",
|
||||
"8:00",
|
||||
"9:00",
|
||||
"10:00",
|
||||
"11:00",
|
||||
"12:00",
|
||||
"13:00",
|
||||
"14:00",
|
||||
"15:00",
|
||||
"16:00",
|
||||
"17:00",
|
||||
"18:00",
|
||||
"19:00",
|
||||
"20:00",
|
||||
"21:00",
|
||||
"22:00",
|
||||
"23:00",
|
||||
],
|
||||
input: [
|
||||
456, 425, 246, 424, 453, 466, 412, 434, 425, 418, 0, 0, 0, 0, 0, 0, 0,
|
||||
0, 0, 0, 0, 0, 0, 0,
|
||||
],
|
||||
output: [
|
||||
432, 401, 232, 398, 421, 439, 378, 411, 400, 394, 0, 0, 0, 0, 0, 0, 0,
|
||||
0, 0, 0, 0, 0, 0, 0,
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "week",
|
||||
data: {
|
||||
time: [
|
||||
"2024/8/22",
|
||||
"2024/8/23",
|
||||
"2024/8/24",
|
||||
"2024/8/25",
|
||||
"2024/8/26",
|
||||
"2024/8/27",
|
||||
"2024/8/28",
|
||||
],
|
||||
input: [9753, 10357, 11246, 10123, 9872, 9985, 10352],
|
||||
output: [7925, 8216, 9091, 7847, 7589, 8126, 8112],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "month",
|
||||
data: {
|
||||
time: [
|
||||
"2024/8/1",
|
||||
"2024/8/2",
|
||||
"2024/8/3",
|
||||
"2024/8/4",
|
||||
"2024/8/5",
|
||||
"2024/8/6",
|
||||
"2024/8/7",
|
||||
"2024/8/8",
|
||||
"2024/8/9",
|
||||
"2024/8/10",
|
||||
"2024/8/11",
|
||||
"2024/8/12",
|
||||
"2024/8/13",
|
||||
"2024/8/14",
|
||||
"2024/8/15",
|
||||
"2024/8/16",
|
||||
"2024/8/17",
|
||||
"2024/8/18",
|
||||
"2024/8/19",
|
||||
"2024/8/20",
|
||||
"2024/8/21",
|
||||
"2024/8/22",
|
||||
"2024/8/23",
|
||||
"2024/8/24",
|
||||
"2024/8/25",
|
||||
"2024/8/26",
|
||||
"2024/8/27",
|
||||
"2024/8/28",
|
||||
"2024/8/29",
|
||||
"2024/8/30",
|
||||
"2024/8/31",
|
||||
],
|
||||
input: [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9813, 9753,
|
||||
10357, 11246, 10123, 9872, 9985, 10352, 4235, 0, 0, 0,
|
||||
],
|
||||
output: [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7883, 7925,
|
||||
8216, 9091, 7847, 7589, 8126, 8112, 3962, 0, 0, 0,
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
const nameList = [
|
||||
{ name: "表单", ename: "table" },
|
||||
{ name: "折线", ename: "chart" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const config = {
|
||||
header: ["时间", "投入数量", "产出数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 5,
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [120, 130, 130],
|
||||
data: [
|
||||
["行1列1", "行1列2", "行1列3"],
|
||||
["行2列1", "行2列2", "行2列3"],
|
||||
["行3列1", "行3列2", "行3列3"],
|
||||
["行4列1", "行4列2", "行4列3"],
|
||||
["行5列1", "行5列2", "行5列3"],
|
||||
["行6列1", "行6列2", "行6列3"],
|
||||
["行7列1", "行7列2", "行7列3"],
|
||||
["行8列1", "行8列2", "行8列3"],
|
||||
["行9列1", "行9列2", "行9列3"],
|
||||
["行10列1", "行10列2", "行10列3"],
|
||||
],
|
||||
};
|
||||
const config1 = {
|
||||
header: ["时间", "投入数量", "产出数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 5,
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [120, 130, 130],
|
||||
data: [],
|
||||
};
|
||||
const config2 = {
|
||||
header: ["时间", "投入数量", "产出数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 5,
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [120, 130, 130],
|
||||
data: [],
|
||||
};
|
||||
const config3 = {
|
||||
header: ["时间", "投入数量", "产出数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 5,
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [120, 130, 130],
|
||||
data: [],
|
||||
};
|
||||
let data1Lenght = tempData[0].data.input.length;
|
||||
for (let i = 0; i < data1Lenght; i++) {
|
||||
(config1.data as any).push([
|
||||
tempData[0].data.time ? tempData[0].data.time[i] : "-",
|
||||
tempData[0].data.input ? tempData[0].data.input[i] : "-",
|
||||
tempData[0].data.output ? tempData[0].data.output[i] : "-",
|
||||
]);
|
||||
}
|
||||
let data2Lenght = tempData[1].data.input.length;
|
||||
for (let i = 0; i < data2Lenght; i++) {
|
||||
(config2.data as any).push([
|
||||
tempData[1].data.time ? tempData[1].data.time[i] : "-",
|
||||
tempData[1].data.input ? tempData[1].data.input[i] : "-",
|
||||
tempData[1].data.output ? tempData[1].data.output[i] : "-",
|
||||
]);
|
||||
}
|
||||
let data3Lenght = tempData[0].data.input.length;
|
||||
for (let i = 0; i < data3Lenght; i++) {
|
||||
(config3.data as any).push([
|
||||
tempData[2].data.time ? tempData[2].data.time[i] : "-",
|
||||
tempData[2].data.input ? tempData[2].data.input[i] : "-",
|
||||
tempData[2].data.output ? tempData[2].data.output[i] : "-",
|
||||
]);
|
||||
}
|
||||
|
||||
const chartData1 = tempData[0].data;
|
||||
const chartData2 = tempData[1].data;
|
||||
const chartData3 = tempData[2].data;
|
||||
const options1 = getOptions(chartData1);
|
||||
const options2 = getOptions(chartData2);
|
||||
const options3 = getOptions(chartData3);
|
||||
return (
|
||||
<div className="right_down">
|
||||
<TitleBox title={"right_down"} />
|
||||
<div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
<div style={{ padding: "10px", height: "628px" }}>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">当天</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="right_down_content">
|
||||
{activeName === "table" ? (
|
||||
<ScrollBoard
|
||||
config={config1}
|
||||
style={{ width: "380px", height: "180px" }}
|
||||
/>
|
||||
) : options1 ? (
|
||||
<ReactECharts option={options1} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "72px",
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本周</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="right_down_content">
|
||||
{activeName === "table" ? (
|
||||
<ScrollBoard
|
||||
config={config2}
|
||||
style={{ width: "380px", height: "180px" }}
|
||||
/>
|
||||
) : options2 ? (
|
||||
<ReactECharts option={options2} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "72px",
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本月</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="right_down_content">
|
||||
{activeName === "table" ? (
|
||||
<ScrollBoard
|
||||
config={config3}
|
||||
style={{ width: "380px", height: "180px" }}
|
||||
/>
|
||||
) : options3 ? (
|
||||
<ReactECharts option={options3} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "72px",
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default RightDown;
|
||||
@ -1,33 +0,0 @@
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
function RightUp() {
|
||||
const config = {
|
||||
header: ["序号", "产线", "上片数据量", "成品下片数量"],
|
||||
headerHeight: 32,
|
||||
rowNum: 5,
|
||||
align: ["center", "left", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [70, 90, 106, 114],
|
||||
data: [
|
||||
["1", "钢1线", "82315", "64268"],
|
||||
["2", "钢2线", "78246", "61235"],
|
||||
["3", "钢3线", "79092", "63562"],
|
||||
["4", "钢4线", "84125", "66789"],
|
||||
["5", "钢5线", "85223", "68246"],
|
||||
],
|
||||
};
|
||||
return (
|
||||
<div className="right_up">
|
||||
<TitleBox title={"right_up"} />
|
||||
<div style={{ padding: "10px", height: "213px" }}>
|
||||
<ScrollBoard
|
||||
config={config}
|
||||
style={{ width: "380px", height: "193px" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default RightUp;
|
||||
@ -1,14 +0,0 @@
|
||||
import '../../lanhuapp/common.css';
|
||||
import "./index.css";
|
||||
|
||||
function TopP() {
|
||||
return (
|
||||
<div className="flex-row">
|
||||
<div className="block_top flex-row">
|
||||
<div className='block_top_title'></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TopP;
|
||||
@ -1,18 +0,0 @@
|
||||
import React from "react";
|
||||
import TopP from "./TopP";
|
||||
import Left from "./Left";
|
||||
import Right from "./Right";
|
||||
import Center from "./Center";
|
||||
function LinePage() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TopP />
|
||||
<div className="block_bottom flex-row">
|
||||
<Left />
|
||||
<Center />
|
||||
<Right />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
export default LinePage;
|
||||
@ -1,9 +1,9 @@
|
||||
import Defect from "./../../assets/icon/defect.png";
|
||||
import Alarm from "./../../assets/icon/alarm.png";
|
||||
import Finished from "./../../assets/icon/finished.png";
|
||||
import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
|
||||
import Num from "./../../assets/icon/num.png";
|
||||
import Record from "./../../assets/icon/record.png";
|
||||
import Defect from "./../../../assets/icon/defect.png";
|
||||
import Alarm from "./../../../assets/icon/alarm.png";
|
||||
import Finished from "./../../../assets/icon/finished.png";
|
||||
import InputAndOutput from "./../../../assets/icon/inputAndOutput.png";
|
||||
import Num from "./../../../assets/icon/num.png";
|
||||
import Record from "./../../../assets/icon/record.png";
|
||||
import "./index.css";
|
||||
interface titleProps {
|
||||
title: string;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
@ -1,9 +1,9 @@
|
||||
import Defect from "./../../assets/icon/defect.png";
|
||||
import Alarm from "./../../assets/icon/alarm.png";
|
||||
import Finished from "./../../assets/icon/finished.png";
|
||||
import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
|
||||
import Num from "./../../assets/icon/num.png";
|
||||
import Record from "./../../assets/icon/record.png";
|
||||
import Defect from "./../../../assets/icon/defect.png";
|
||||
import Alarm from "./../../../assets/icon/alarm.png";
|
||||
import Finished from "./../../../assets/icon/finished.png";
|
||||
import InputAndOutput from "./../../../assets/icon/inputAndOutput.png";
|
||||
import Num from "./../../../assets/icon/num.png";
|
||||
import Record from "./../../../assets/icon/record.png";
|
||||
import "./index.css";
|
||||
interface titleProps {
|
||||
title: string;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import '../../lanhuapp/common.css';
|
||||
import "./index.css";
|
||||
import "./../style/linePage.css";
|
||||
|
||||
function TopP() {
|
||||
return (
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
@ -1,264 +0,0 @@
|
||||
/* 顶部 */
|
||||
.block_top {
|
||||
width: 1920px;
|
||||
height: 94px;
|
||||
background: url(/public/svg/topback.svg) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.block_top_title {
|
||||
width: 651px;
|
||||
height: 77px;
|
||||
background: url(/public/png/topTiltle.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 18px;
|
||||
}
|
||||
/* 中部 */
|
||||
.block_bottom {
|
||||
width: 1920px;
|
||||
height: 966px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.group_left {
|
||||
width: 402px;
|
||||
height: 966px;
|
||||
margin: 0 0 0 24px;
|
||||
}
|
||||
|
||||
.group_center {
|
||||
width: 1041px;
|
||||
height: 966px;
|
||||
margin: 0 0 0 15px;
|
||||
}
|
||||
|
||||
.group_right {
|
||||
width: 401px;
|
||||
height: 966px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.left_up {
|
||||
width: 402px;
|
||||
height: 332px;
|
||||
background: url(../../../public/png/rect/lp_left_up.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.left_down {
|
||||
width: 402px;
|
||||
height: 599px;
|
||||
background: url(../../../public/png/rect/lp_left_down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
margin-top: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.center_up {
|
||||
width: 1041px;
|
||||
height: 562px;
|
||||
background: url(../../../public/png/rect/lp_center_up.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.center_down {
|
||||
width: 1041px;
|
||||
height: 368px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
.center_down_inner {
|
||||
width: 513px;
|
||||
height: 366px;
|
||||
background: url(../../../public/png/rect/lp_center_down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.center_down .left-box {
|
||||
margin-right: 15px;
|
||||
position: relative;
|
||||
}
|
||||
.center_down .left-box .alarm_num_title {
|
||||
position: absolute;
|
||||
left: 220px;
|
||||
top: 22px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 3px;
|
||||
color: #fff;
|
||||
}
|
||||
.center_down .left-box .alarm_num {
|
||||
color: #52fff1;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
}
|
||||
.center_down .right_box .chart_box {
|
||||
width: 100%;
|
||||
height: 310px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.right_up {
|
||||
width: 401px;
|
||||
height: 257px;
|
||||
background: url(../../../public/png/rect/lp_right_up.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
.right_down {
|
||||
width: 401px;
|
||||
height: 673px;
|
||||
background: url(../../../public/png/rect/lp_right_down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
margin-top: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.left_up_switch {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 12px;
|
||||
}
|
||||
.left_up_chart {
|
||||
height: 275px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
/* 左侧 */
|
||||
.left_down_title {
|
||||
height: 18px;
|
||||
justify-content: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.left_down_box1 {
|
||||
width: 56px;
|
||||
height: 13px;
|
||||
background: url(/public/png/leftbar.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.left_down_box2 {
|
||||
width: 56px;
|
||||
height: 13px;
|
||||
background: url(/public/png/rightbar.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 2px 0 0 0px;
|
||||
}
|
||||
.left_down_text {
|
||||
/*width: 40px;*/
|
||||
height: 18px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(1, 207, 204, 1);
|
||||
font-size: 18px;
|
||||
letter-spacing: 5px;
|
||||
font-family: PingFangSC-Regular;
|
||||
white-space: nowrap;
|
||||
line-height: 18px;
|
||||
margin-left: 18px;
|
||||
margin-right: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.left_down_content {
|
||||
height: 160px;
|
||||
/* padding-bottom: 5px; */
|
||||
}
|
||||
.right_down_content {
|
||||
height: 185px;
|
||||
/* padding-bottom: 5px; */
|
||||
}
|
||||
/* 滚动表格部分 */
|
||||
.dv-scroll-board .header .header-item,
|
||||
.dv-scroll-board .rows .ceil {
|
||||
border-right: 1px solid #0d1728;
|
||||
}
|
||||
.dv-scroll-board .header .header-item:last-child,
|
||||
.dv-scroll-board .rows .ceil:last-child {
|
||||
border-right: none;
|
||||
border: none;
|
||||
}
|
||||
/* chart图部分 */
|
||||
.luoyang-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.luoyang-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
/* 三维页面部分 */
|
||||
.center_up .model_name {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: 1000;
|
||||
}
|
||||
.center_up .model_info {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
bottom: 0px;
|
||||
z-index: 1000;
|
||||
width: 841px;
|
||||
height: 62px;
|
||||
background: url(/public/png/lp/line_part.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.center_up .model_info .reset_btn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 40px;
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.center_up .model_info .title {
|
||||
display: inline-block;
|
||||
width: 361px;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
letter-spacing: 5px;
|
||||
position: absolute;
|
||||
left: 241px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.center_up .eq_detail_info {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 1002;
|
||||
width: 240px;
|
||||
height: 110px;
|
||||
background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
padding: 15px 0 0 15px;
|
||||
}
|
||||
.center_up .eq_detail_info .left_name {
|
||||
display: inline-block;
|
||||
width: 95px;
|
||||
height: 28px;
|
||||
text-align: right;
|
||||
font-size: 18px;
|
||||
}
|
||||
.center_up .eq_detail_info .right_value {
|
||||
display: inline-block;
|
||||
height: 28px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.center_up .eq_info {
|
||||
position: absolute;
|
||||
z-index: 1002;
|
||||
background: url(/public/png/lp/eq_msg_always.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.center_up .eq_info .eq_info_inner {
|
||||
height: 24px;
|
||||
font-size: 17px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -1,9 +1,9 @@
|
||||
import Defect from "./../../assets/icon/defect.png";
|
||||
import Alarm from "./../../assets/icon/alarm.png";
|
||||
import Finished from "./../../assets/icon/finished.png";
|
||||
import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
|
||||
import Num from "./../../assets/icon/num.png";
|
||||
import Record from "./../../assets/icon/record.png";
|
||||
import Defect from "./../../../assets/icon/defect.png";
|
||||
import Alarm from "./../../../assets/icon/alarm.png";
|
||||
import Finished from "./../../../assets/icon/finished.png";
|
||||
import InputAndOutput from "./../../../assets/icon/inputAndOutput.png";
|
||||
import Num from "./../../../assets/icon/num.png";
|
||||
import Record from "./../../../assets/icon/record.png";
|
||||
import "./index.css";
|
||||
interface titleProps {
|
||||
title: string;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
@ -1,9 +1,9 @@
|
||||
import Defect from "./../../assets/icon/defect.png";
|
||||
import Alarm from "./../../assets/icon/alarm.png";
|
||||
import Finished from "./../../assets/icon/finished.png";
|
||||
import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
|
||||
import Num from "./../../assets/icon/num.png";
|
||||
import Record from "./../../assets/icon/record.png";
|
||||
import Defect from "./../../../assets/icon/defect.png";
|
||||
import Alarm from "./../../../assets/icon/alarm.png";
|
||||
import Finished from "./../../../assets/icon/finished.png";
|
||||
import InputAndOutput from "./../../../assets/icon/inputAndOutput.png";
|
||||
import Num from "./../../../assets/icon/num.png";
|
||||
import Record from "./../../../assets/icon/record.png";
|
||||
import "./index.css";
|
||||
interface titleProps {
|
||||
title: string;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import '../../lanhuapp/common.css';
|
||||
import "./index.css";
|
||||
|
||||
import "./../style/linePage.css";
|
||||
function TopP() {
|
||||
return (
|
||||
<div className="flex-row">
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
@ -1,264 +0,0 @@
|
||||
/* 顶部 */
|
||||
.block_top {
|
||||
width: 1920px;
|
||||
height: 94px;
|
||||
background: url(/public/svg/topback.svg) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.block_top_title {
|
||||
width: 651px;
|
||||
height: 77px;
|
||||
background: url(/public/png/topTiltle.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 18px;
|
||||
}
|
||||
/* 中部 */
|
||||
.block_bottom {
|
||||
width: 1920px;
|
||||
height: 966px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.group_left {
|
||||
width: 402px;
|
||||
height: 966px;
|
||||
margin: 0 0 0 24px;
|
||||
}
|
||||
|
||||
.group_center {
|
||||
width: 1041px;
|
||||
height: 966px;
|
||||
margin: 0 0 0 15px;
|
||||
}
|
||||
|
||||
.group_right {
|
||||
width: 401px;
|
||||
height: 966px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.left_up {
|
||||
width: 402px;
|
||||
height: 332px;
|
||||
background: url(../../../public/png/rect/lp_left_up.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.left_down {
|
||||
width: 402px;
|
||||
height: 599px;
|
||||
background: url(../../../public/png/rect/lp_left_down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
margin-top: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.center_up {
|
||||
width: 1041px;
|
||||
height: 562px;
|
||||
background: url(../../../public/png/rect/lp_center_up.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.center_down {
|
||||
width: 1041px;
|
||||
height: 368px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
.center_down_inner {
|
||||
width: 513px;
|
||||
height: 366px;
|
||||
background: url(../../../public/png/rect/lp_center_down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.center_down .left-box {
|
||||
margin-right: 15px;
|
||||
position: relative;
|
||||
}
|
||||
.center_down .left-box .alarm_num_title {
|
||||
position: absolute;
|
||||
left: 220px;
|
||||
top: 22px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 3px;
|
||||
color: #fff;
|
||||
}
|
||||
.center_down .left-box .alarm_num {
|
||||
color: #52fff1;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
}
|
||||
.center_down .right_box .chart_box {
|
||||
width: 100%;
|
||||
height: 310px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.right_up {
|
||||
width: 401px;
|
||||
height: 257px;
|
||||
background: url(../../../public/png/rect/lp_right_up.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
.right_down {
|
||||
width: 401px;
|
||||
height: 673px;
|
||||
background: url(../../../public/png/rect/lp_right_down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
margin-top: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.left_up_switch {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 12px;
|
||||
}
|
||||
.left_up_chart {
|
||||
height: 275px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
/* 左侧 */
|
||||
.left_down_title {
|
||||
height: 18px;
|
||||
justify-content: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.left_down_box1 {
|
||||
width: 56px;
|
||||
height: 13px;
|
||||
background: url(/public/png/leftbar.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.left_down_box2 {
|
||||
width: 56px;
|
||||
height: 13px;
|
||||
background: url(/public/png/rightbar.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 2px 0 0 0px;
|
||||
}
|
||||
.left_down_text {
|
||||
/*width: 40px;*/
|
||||
height: 18px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(1, 207, 204, 1);
|
||||
font-size: 18px;
|
||||
letter-spacing: 5px;
|
||||
font-family: PingFangSC-Regular;
|
||||
white-space: nowrap;
|
||||
line-height: 18px;
|
||||
margin-left: 18px;
|
||||
margin-right: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.left_down_content {
|
||||
height: 160px;
|
||||
/* padding-bottom: 5px; */
|
||||
}
|
||||
.right_down_content {
|
||||
height: 185px;
|
||||
/* padding-bottom: 5px; */
|
||||
}
|
||||
/* 滚动表格部分 */
|
||||
.dv-scroll-board .header .header-item,
|
||||
.dv-scroll-board .rows .ceil {
|
||||
border-right: 1px solid #0d1728;
|
||||
}
|
||||
.dv-scroll-board .header .header-item:last-child,
|
||||
.dv-scroll-board .rows .ceil:last-child {
|
||||
border-right: none;
|
||||
border: none;
|
||||
}
|
||||
/* chart图部分 */
|
||||
.luoyang-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.luoyang-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
/* 三维页面部分 */
|
||||
.center_up .model_name {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: 1000;
|
||||
}
|
||||
.center_up .model_info {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
bottom: 0px;
|
||||
z-index: 1000;
|
||||
width: 841px;
|
||||
height: 62px;
|
||||
background: url(/public/png/lp/line_part.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.center_up .model_info .reset_btn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 40px;
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.center_up .model_info .title {
|
||||
display: inline-block;
|
||||
width: 361px;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
letter-spacing: 5px;
|
||||
position: absolute;
|
||||
left: 241px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.center_up .eq_detail_info {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 1002;
|
||||
width: 240px;
|
||||
height: 110px;
|
||||
background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
padding: 15px 0 0 15px;
|
||||
}
|
||||
.center_up .eq_detail_info .left_name {
|
||||
display: inline-block;
|
||||
width: 95px;
|
||||
height: 28px;
|
||||
text-align: right;
|
||||
font-size: 18px;
|
||||
}
|
||||
.center_up .eq_detail_info .right_value {
|
||||
display: inline-block;
|
||||
height: 28px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.center_up .eq_info {
|
||||
position: absolute;
|
||||
z-index: 1002;
|
||||
background: url(/public/png/lp/eq_msg_always.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.center_up .eq_info .eq_info_inner {
|
||||
height: 24px;
|
||||
font-size: 17px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -1,9 +1,9 @@
|
||||
import Defect from "./../../assets/icon/defect.png";
|
||||
import Alarm from "./../../assets/icon/alarm.png";
|
||||
import Finished from "./../../assets/icon/finished.png";
|
||||
import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
|
||||
import Num from "./../../assets/icon/num.png";
|
||||
import Record from "./../../assets/icon/record.png";
|
||||
import Defect from "./../../../assets/icon/defect.png";
|
||||
import Alarm from "./../../../assets/icon/alarm.png";
|
||||
import Finished from "./../../../assets/icon/finished.png";
|
||||
import InputAndOutput from "./../../../assets/icon/inputAndOutput.png";
|
||||
import Num from "./../../../assets/icon/num.png";
|
||||
import Record from "./../../../assets/icon/record.png";
|
||||
import "./index.css";
|
||||
interface titleProps {
|
||||
title: string;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import '../../lanhuapp/common.css';
|
||||
import "./index.css";
|
||||
import "./../style/linePage.css";
|
||||
|
||||
function TopP() {
|
||||
return (
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
@ -1,264 +0,0 @@
|
||||
/* 顶部 */
|
||||
.block_top {
|
||||
width: 1920px;
|
||||
height: 94px;
|
||||
background: url(/public/svg/topback.svg) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.block_top_title {
|
||||
width: 651px;
|
||||
height: 77px;
|
||||
background: url(/public/png/topTiltle.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 18px;
|
||||
}
|
||||
/* 中部 */
|
||||
.block_bottom {
|
||||
width: 1920px;
|
||||
height: 966px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.group_left {
|
||||
width: 402px;
|
||||
height: 966px;
|
||||
margin: 0 0 0 24px;
|
||||
}
|
||||
|
||||
.group_center {
|
||||
width: 1041px;
|
||||
height: 966px;
|
||||
margin: 0 0 0 15px;
|
||||
}
|
||||
|
||||
.group_right {
|
||||
width: 401px;
|
||||
height: 966px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.left_up {
|
||||
width: 402px;
|
||||
height: 332px;
|
||||
background: url(../../../public/png/rect/lp_left_up.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.left_down {
|
||||
width: 402px;
|
||||
height: 599px;
|
||||
background: url(../../../public/png/rect/lp_left_down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
margin-top: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.center_up {
|
||||
width: 1041px;
|
||||
height: 562px;
|
||||
background: url(../../../public/png/rect/lp_center_up.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.center_down {
|
||||
width: 1041px;
|
||||
height: 368px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
.center_down_inner {
|
||||
width: 513px;
|
||||
height: 366px;
|
||||
background: url(../../../public/png/rect/lp_center_down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.center_down .left-box {
|
||||
margin-right: 15px;
|
||||
position: relative;
|
||||
}
|
||||
.center_down .left-box .alarm_num_title {
|
||||
position: absolute;
|
||||
left: 220px;
|
||||
top: 22px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 3px;
|
||||
color: #fff;
|
||||
}
|
||||
.center_down .left-box .alarm_num {
|
||||
color: #52fff1;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
}
|
||||
.center_down .right_box .chart_box {
|
||||
width: 100%;
|
||||
height: 310px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.right_up {
|
||||
width: 401px;
|
||||
height: 257px;
|
||||
background: url(../../../public/png/rect/lp_right_up.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
.right_down {
|
||||
width: 401px;
|
||||
height: 673px;
|
||||
background: url(../../../public/png/rect/lp_right_down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
margin-top: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.left_up_switch {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 12px;
|
||||
}
|
||||
.left_up_chart {
|
||||
height: 275px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
/* 左侧 */
|
||||
.left_down_title {
|
||||
height: 18px;
|
||||
justify-content: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.left_down_box1 {
|
||||
width: 56px;
|
||||
height: 13px;
|
||||
background: url(/public/png/leftbar.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.left_down_box2 {
|
||||
width: 56px;
|
||||
height: 13px;
|
||||
background: url(/public/png/rightbar.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 2px 0 0 0px;
|
||||
}
|
||||
.left_down_text {
|
||||
/*width: 40px;*/
|
||||
height: 18px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(1, 207, 204, 1);
|
||||
font-size: 18px;
|
||||
letter-spacing: 5px;
|
||||
font-family: PingFangSC-Regular;
|
||||
white-space: nowrap;
|
||||
line-height: 18px;
|
||||
margin-left: 18px;
|
||||
margin-right: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.left_down_content {
|
||||
height: 160px;
|
||||
/* padding-bottom: 5px; */
|
||||
}
|
||||
.right_down_content {
|
||||
height: 185px;
|
||||
/* padding-bottom: 5px; */
|
||||
}
|
||||
/* 滚动表格部分 */
|
||||
.dv-scroll-board .header .header-item,
|
||||
.dv-scroll-board .rows .ceil {
|
||||
border-right: 1px solid #0d1728;
|
||||
}
|
||||
.dv-scroll-board .header .header-item:last-child,
|
||||
.dv-scroll-board .rows .ceil:last-child {
|
||||
border-right: none;
|
||||
border: none;
|
||||
}
|
||||
/* chart图部分 */
|
||||
.luoyang-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.luoyang-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
/* 三维页面部分 */
|
||||
.center_up .model_name {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: 1000;
|
||||
}
|
||||
.center_up .model_info {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
bottom: 0px;
|
||||
z-index: 1000;
|
||||
width: 841px;
|
||||
height: 62px;
|
||||
background: url(/public/png/lp/line_part.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.center_up .model_info .reset_btn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 40px;
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.center_up .model_info .title {
|
||||
display: inline-block;
|
||||
width: 361px;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
letter-spacing: 5px;
|
||||
position: absolute;
|
||||
left: 241px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.center_up .eq_detail_info {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 1002;
|
||||
width: 240px;
|
||||
height: 110px;
|
||||
background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
padding: 15px 0 0 15px;
|
||||
}
|
||||
.center_up .eq_detail_info .left_name {
|
||||
display: inline-block;
|
||||
width: 95px;
|
||||
height: 28px;
|
||||
text-align: right;
|
||||
font-size: 18px;
|
||||
}
|
||||
.center_up .eq_detail_info .right_value {
|
||||
display: inline-block;
|
||||
height: 28px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.center_up .eq_info {
|
||||
position: absolute;
|
||||
z-index: 1002;
|
||||
background: url(/public/png/lp/eq_msg_always.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.center_up .eq_info .eq_info_inner {
|
||||
height: 24px;
|
||||
font-size: 17px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -1,9 +1,9 @@
|
||||
import Defect from "./../../assets/icon/defect.png";
|
||||
import Alarm from "./../../assets/icon/alarm.png";
|
||||
import Finished from "./../../assets/icon/finished.png";
|
||||
import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
|
||||
import Num from "./../../assets/icon/num.png";
|
||||
import Record from "./../../assets/icon/record.png";
|
||||
import Defect from "./../../../assets/icon/defect.png";
|
||||
import Alarm from "./../../../assets/icon/alarm.png";
|
||||
import Finished from "./../../../assets/icon/finished.png";
|
||||
import InputAndOutput from "./../../../assets/icon/inputAndOutput.png";
|
||||
import Num from "./../../../assets/icon/num.png";
|
||||
import Record from "./../../../assets/icon/record.png";
|
||||
import "./index.css";
|
||||
interface titleProps {
|
||||
title: string;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import '../../lanhuapp/common.css';
|
||||
import "./index.css";
|
||||
import "./../style/linePage.css";
|
||||
|
||||
function TopP() {
|
||||
return (
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user