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

大屏样式

Browse Source
This commit is contained in:
朱菊兰
2024-08-19 14:44:16 +08:00
parent bda855430d
commit bbb7de918e
20 changed files with 998 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/page/LinePage/Center/CenterDown.tsx
View File

@@ -1,16 +1,60 @@
import TitleBox from "../Component/TitleBox";
import LineChart from "./LineChart";
import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton";
import { useState } from "react";
function CenterDown() {
const nameList = [{ name: "天" }, { name: "周" }, { name: "月" }];
const [activeName, setActiveName] = useState<string>(nameList[0].name);
const config = {
header: ["序号", "报警时间", "报警编码", "设备状态"],
headerHeight: 36,
rowNum: 6,
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>",
],
],
};
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={config}
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}
activeName={activeName}
setActiveName={setActiveName}
/>
</div>
<div className="chart_box">
<LineChart />
</div>

5
src/page/LinePage/Center/CenterUp.tsx
View File

@@ -1,8 +1,11 @@
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={`Line1-2`} />
<LinePageBabylon modelPath={`Line${lineID}`} />
</div>
);
}

15
src/page/LinePage/Center/LineChart/chart.config.ts
View File

@@ -70,31 +70,44 @@ export default function getOptions() {
},
},
},
tooltip: {},
tooltip: {
trigger: "axis",
className: "luoyang-chart-tooltip",
},
series: [
{
name: "产线1",
type: "line",
symbol: "circle",
symbolSize: 4,
data: [20, 32, 10, 34, 90, 30, 20],
},
{
name: "产线2",
type: "line",
symbol: "circle",
symbolSize: 4,
data: [22, 82, 91, 34, 90, 33, 31],
},
{
name: "产线3",
type: "line",
symbol: "circle",
symbolSize: 4,
data: [50, 32, 20, 54, 19, 33, 41],
},
{
name: "产线4",
type: "line",
symbol: "circle",
symbolSize: 4,
data: [30, 32, 30, 34, 90, 33, 32],
},
{
name: "产线5",
type: "line",
symbol: "circle",
symbolSize: 4,
data: [20, 92, 91, 94, 90, 30, 53],
},
],

8
src/page/LinePage/Left/BarChart/chart.config.ts
View File

@@ -49,7 +49,13 @@ export default function getOptions() {
},
},
},
tooltip: {},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "luoyang-chart-tooltip",
},
series: [
{
data: [120, 200, 150, 80, 70, 110],

49
src/page/LinePage/Left/LeftDown.tsx
View File

@@ -1,10 +1,32 @@
import TitleBox from "../Component/TitleBox";
import SwitchButton from "../Component/SwitchButton";
import BarChart from "./BarChart";
import ScrollBoard from "./../../Component/ScrollBoard";
import { useState } from "react";
function LeftDown() {
const nameList = [{ name: "表单" }, { name: "柱状" }];
const [activeName, setActiveName] = useState<string>(nameList[0].name);
const config = {
header: ["序号", "缺陷种类", "缺陷数量"],
headerHeight: 30,
rowNum: 4,
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"],
],
};
return (
<div className="left_down">
<TitleBox title={"left_down"} />
@@ -22,7 +44,14 @@ function LeftDown() {
<div className="left_down_box2 flex-col" />
</div>
<div className="left_down_content">
{activeName === "表单" ? "表单" : <BarChart />}
{activeName === "表单" ? (
<ScrollBoard
config={config}
style={{ width: "380px", height: "150px" }}
/>
) : (
<BarChart />
)}
</div>
<div className="left_down_title flex-row">
<div className="left_down_box1 flex-col" />
@@ -30,7 +59,14 @@ function LeftDown() {
<div className="left_down_box2 flex-col" />
</div>
<div className="left_down_content">
{activeName === "表单" ? "表单" : <BarChart />}
{activeName === "表单" ? (
<ScrollBoard
config={config}
style={{ width: "380px", height: "150px" }}
/>
) : (
<BarChart />
)}
</div>
<div className="left_down_title flex-row">
<div className="left_down_box1 flex-col" />
@@ -38,7 +74,14 @@ function LeftDown() {
<div className="left_down_box2 flex-col" />
</div>
<div className="left_down_content">
{activeName === "表单" ? "表单" : <BarChart />}
{activeName === "表单" ? (
<ScrollBoard
config={config}
style={{ width: "380px", height: "150px" }}
/>
) : (
<BarChart />
)}
</div>
</div>
</div>

8
src/page/LinePage/Left/SummaryBarChart/chart.config.ts
View File

@@ -69,7 +69,13 @@ export default function getOptions() {
},
},
},
tooltip: {},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "luoyang-chart-tooltip",
},
dataset: {
source: [
["product", "产线1", "产线2", "产线3", "产线4", "产线5"],

9
src/page/LinePage/Right/LineChart/chart.config.ts
View File

@@ -70,18 +70,25 @@ export default function getOptions() {
},
},
},
tooltip: {},
series: [
{
name: "投入",
type: "line",
symbol: "circle",
symbolSize: 4,
data: [20, 32, 10, 34, 90, 30, 20],
},
{
name: "产出",
type: "line",
symbol: "circle",
symbolSize: 4,
data: [22, 82, 91, 34, 90, 33, 31],
},
],
tooltip: {
trigger: "axis",
className: "luoyang-chart-tooltip",
},
};
}

49
src/page/LinePage/Right/RightDown.tsx
View File

@@ -1,10 +1,32 @@
import TitleBox from "../Component/TitleBox";
import SwitchButton from "../Component/SwitchButton";
import LineChart from "./LineChart";
import ScrollBoard from "./../../Component/ScrollBoard";
import { useState } from "react";
function RightDown() {
const nameList = [{ name: "表单" }, { name: "折线" }];
const [activeName, setActiveName] = useState<string>(nameList[0].name);
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"],
],
};
return (
<div className="right_down">
<TitleBox title={"right_down"} />
@@ -22,7 +44,14 @@ function RightDown() {
<div className="left_down_box2 flex-col" />
</div>
<div className="right_down_content">
{activeName === "表单" ? "表单" : <LineChart />}
{activeName === "表单" ? (
<ScrollBoard
config={config}
style={{ width: "380px", height: "180px" }}
/>
) : (
<LineChart />
)}
</div>
<div className="left_down_title flex-row">
<div className="left_down_box1 flex-col" />
@@ -30,7 +59,14 @@ function RightDown() {
<div className="left_down_box2 flex-col" />
</div>
<div className="right_down_content">
{activeName === "表单" ? "表单" : <LineChart />}
{activeName === "表单" ? (
<ScrollBoard
config={config}
style={{ width: "380px", height: "180px" }}
/>
) : (
<LineChart />
)}
</div>
<div className="left_down_title flex-row">
<div className="left_down_box1 flex-col" />
@@ -38,7 +74,14 @@ function RightDown() {
<div className="left_down_box2 flex-col" />
</div>
<div className="right_down_content">
{activeName === "表单" ? "表单" : <LineChart />}
{activeName === "表单" ? (
<ScrollBoard
config={config}
style={{ width: "380px", height: "180px" }}
/>
) : (
<LineChart />
)}
</div>
</div>
</div>

28
src/page/LinePage/Right/RightUp.tsx
View File

@@ -1,8 +1,36 @@
import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard";
function RightUp() {
const config = {
header: ["产线", "上片数据量", "成品下片数量", "成品下片"],
headerHeight: 32,
rowNum: 5,
headerBGC: "rgba(79, 114, 136, 0.3)",
oddRowBGC: "rgba(79, 114, 136, 0.3)",
evenRowBGC: "rgba(76, 97, 123, 0.1)",
columnWidth: [73, 100, 117, 90],
data: [
["1", "行1列1", "行1列2", "行1列3"],
["2", "行2列1", "行2列2", "行2列3"],
["3", "行3列1", "行3列2", "行3列3"],
["4", "行4列1", "行4列2", "行4列3"],
["5", "行5列1", "行5列2", "行5列3"],
["6", "行6列1", "行6列2", "行6列3"],
["7", "行7列1", "行7列2", "行7列3"],
["8", "行8列1", "行8列2", "行8列3"],
["9", "行9列1", "行9列2", "行9列3"],
["10", "行10列1", "行10列2", "行10列3"],
],
};
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>
);
}

21
src/page/LinePage/index.css
View File

@@ -76,6 +76,7 @@
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;
@@ -129,6 +130,7 @@
.left_down_title {
height: 18px;
justify-content: center;
margin-bottom: 4px;
}
.left_down_box1 {
width: 56px;
@@ -166,3 +168,22 @@
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;
}
.luoyang-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;
backdrop-filter: blur(12px);
}
.luoyang-chart-tooltip * {
color: #fff !important;
}