Skip to content

W
wms
Commit 2a7dfd38 authored by krysent's avatar krysent
Browse files
Options

new

parent 4b38295a
Hide whitespace changes
Inline Side-by-side
Showing with 1599 additions and 12 deletions
config/config.js
View file @ 2a7dfd38
......@@ -56,7 +56,7 @@ export default defineConfig({
nodeModulesTransform: {
type: "all",
},
headScripts: [{ src: "/sr/LodopFuncs.js", defer: true }],
headScripts: [{ src: "/LodopFuncs.js", defer: true }],
//mfsu: {},
//webpack5: {}
});
config/proxy.js
View file @ 2a7dfd38
......@@ -12,8 +12,9 @@ export default {
"/srwms/": {
// 要代理的地址
// target: "http://192.168.40.18/wms/", //39:28040 18/wms/
// target: "http://192.168.40.203:28040", //39:28040 18/wms/ dj
target: "http://192.168.40.117:28040", //39:28040 18/wms/ jf
target: "http://192.168.40.203:28040", //39:28040 18/wms/ dj
// target: "http://192.168.40.117:28040", //39:28040 18/wms/ jf
// target: "http://192.168.40.108:28040", //39:28040 18/wms/ jf
changeOrigin: true,
pathRewrite: {
"^/srwms": "",
......
config/routes.js
View file @ 2a7dfd38
......@@ -304,6 +304,11 @@ export default [
},
],
},
{
path: "/board/storeboard",
name: "生产看板",
component: "./Storeboard",
},
{
component: "./404",
},
......
src/app.jsx
View file @ 2a7dfd38
......@@ -22,6 +22,7 @@ export async function getInitialState() {
const fetchUserInfo = async () => {
try {
const msg = await queryCurrentUser();
return msg.data;
} catch (error) {
history.push(loginPath);
......@@ -51,7 +52,7 @@ export async function getInitialState() {
settings: defaultSettings,
newMenu: menuData,
getmenuData,
collapsed: false
collapsed: false,
};
}
return {
......@@ -59,7 +60,7 @@ export async function getInitialState() {
settings: defaultSettings,
getmenuData,
collapsed: false,
tagList: []
tagList: [],
};
} // ProLayout 支持的api https://procomponents.ant.design/components/layout
export const layout = async (props) => {
......@@ -74,7 +75,7 @@ export const layout = async (props) => {
},
collapsed: initialState.collapsed,
onCollapse: (cols) => {
setInitialState(s => ({ ...s, collapsed: cols }))
setInitialState((s) => ({ ...s, collapsed: cols }));
},
onPageChange: () => {
const { location } = history; // 如果没有登录，重定向到 login
......@@ -107,10 +108,10 @@ export const layout = async (props) => {
},
request: (params, defaultMenuData) => {
let lastArr = initialState?.newMenu?.userHavePermList
? JSON.parse(
JSON.stringify(initialState?.newMenu?.userHavePermList)
)
: [],
? JSON.parse(
JSON.stringify(initialState?.newMenu?.userHavePermList)
)
: [],
newArr = [
{
path: "/welcome",
......@@ -138,7 +139,6 @@ export const layout = async (props) => {
}
},
// 自定义 403 页面
// unAccessible: <div>unAccessible</div>,
// 增加一个 loading 的状态
......
src/pages/Storeboard/Charts.jsx 0 → 100644
View file @ 2a7dfd38
import { ScrollBoard } from "@jiaminghi/data-view-react";
import React, { useState, useEffect, useMemo } from "react";
import ReactECharts from "echarts-for-react";
export default (props) => {
const { title, config, data } = props;
console.log(data);
const option = useMemo(() => {
let xData;
let yData1, yData2;
if (title === "出入库单数量") {
xData = data?.map((it) => it?.time);
yData1 = data?.map((it) => it?.outstoreNum);
yData2 = data?.map((it) => it?.instoreNum);
} else if (title === "出入库产品数量") {
xData = data?.map((it) => it?.time);
yData1 = data?.map((it) => it?.outstoreNum);
yData2 = data?.map((it) => it?.instoreNum);
}
return {
grid: {
top: 25,
left: 35,
bottom: 28,
right: 15,
},
xAxis: {
type: "category",
data: xData,
},
yAxis: {
type: "value",
},
series: [
{
data: yData1,
type: "bar",
itemStyle: {
borderRadius: [15, 15, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#00ECF2", // 0% 处的颜色
},
{
offset: 1,
color: "#7E7E7E", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
{
data: yData2,
type: "bar",
itemStyle: {
borderRadius: [15, 15, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#F4664A", // 0% 处的颜色
},
{
offset: 1,
color: "#F1F1F1", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
],
};
}, [data]);
return (
<>
<div className="data-content">
<div className="content-header">{title}</div>
<div className="content-charts">
<ReactECharts
option={option}
style={{ height: "100%", width: "100%" }}
/>
</div>
</div>
</>
);
};
src/pages/Storeboard/Clock/index.css 0 → 100644
View file @ 2a7dfd38
@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Share+Tech+Mono");
/* html, body {
height: 100%;
}
body {
background: #0f3854;
background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
background-size: 100%;
} */
p {
display: inline-block;
margin: 0;
padding: 0;
margin-right: 10px;
}
.clock {
/* font-family: "AlimamaShuHeiTid", monospace; */
color: #ffffff;
text-align: center;
color: #daf6ff;
/* text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0); */
}
.time {
letter-spacing:4px;
font-size: 30px;
font-weight: 800;
/* padding: 0.1rem 0; */
}
.date {
letter-spacing: 4px;
font-weight: 800;
font-size: 30px;
}
.text {
letter-spacing: 4px;
font-size: 26px;
padding: 20px 0 0;
}
\ No newline at end of file
src/pages/Storeboard/Clock/index.jsx 0 → 100644
View file @ 2a7dfd38
import React, { useState, useEffect } from "react";
import "./index.css";
export default (params) => {
const [clock, setClock] = useState({ time: "", date: "" });
useEffect(() => {
var week = [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
];
var timerID = setInterval(updateTime, 1000);
updateTime();
function updateTime() {
var cd = new Date();
let time =
zeroPadding(cd.getHours(), 2) +
":" +
zeroPadding(cd.getMinutes(), 2) +
":" +
zeroPadding(cd.getSeconds(), 2);
let date =
zeroPadding(cd.getFullYear(), 4) +
"-" +
zeroPadding(cd.getMonth() + 1, 2) +
"-" +
zeroPadding(cd.getDate(), 2);
setClock({
time,
date,
});
}
function zeroPadding(num, digit) {
var zero = "";
for (var i = 0; i < digit; i++) {
zero += "0";
}
return (zero + num).slice(-digit);
}
}, []);
return (
<>
<div className="clock">
<p className="date">{clock.date}</p>
<p className="time">{clock.time}</p>
</div>
</>
);
};
src/pages/Storeboard/DataTable.jsx 0 → 100644
View file @ 2a7dfd38
import { ScrollBoard } from "@jiaminghi/data-view-react";
import React, { useState, useEffect } from "react";
import line4_bg from "../../../public/img/table4.png";
import line5_bg from "../../../public/img/table5.png";
import { useMemo } from "react";
const statusBgc = function (state) {
if (state === 4) {
return { width: "100%", "--bgUrl--": `url(${line4_bg})` };
} else if (state === 5) {
return { width: "100%", "--bgUrl--": `url(${line5_bg})` };
}
};
export default (props) => {
const { title, headTitle, data } = props;
const config = useMemo(() => {
let configArr = [];
if (title === "待入库任务") {
data?.forEach((it) => {
let arr = [
it?.taskNo ?? "--",
it?.materieName ?? "--",
it?.materieControlNo ?? "--",
it?.targetStorePositionName ?? "--",
];
configArr.push(arr);
});
} else if (title === "待出库任务") {
data?.forEach((it) => {
let arr = [
it?.taskNo ?? "--",
it?.materieName ?? "--",
it?.materieControlNo ?? "--",
it?.sourceStorePositionName ?? "--",
it?.targetStorePositionName ?? "--",
];
configArr.push(arr);
});
} else if (title === "库存统计") {
data?.forEach((it) => {
let arr = [
it?.materieCode ?? "--",
it?.materieName ?? "--",
it?.specificationModel ?? "--",
it?.totalNum ?? "--",
it?.width ?? "--",
];
configArr.push(arr);
});
}
return {
data: configArr,
};
}, [data, title]);
return (
<>
<div className="data-content">
<div className="content-header">{title}</div>
<div className="content-title">
{headTitle?.map((it, i) => {
return <span key={i}>{it}</span>;
})}
</div>
<ScrollBoard
align={["center"]}
config={config}
style={statusBgc(headTitle?.length)}
rowNum={"7"}
/>
</div>
</>
);
};
src/pages/Storeboard/Krjk.jsx 0 → 100644
View file @ 2a7dfd38
// 库容监控
import React, { useState, useEffect, useMemo } from "react";
export default ({ data }) => {
console.log(data);
const statusArr1 = useMemo(() => {
let allArr = data?.[0]?.thirdList;
let newArr = [];
allArr?.forEach((item) => {
item?.fourthList?.forEach((it) => {
newArr.push(it?.status);
});
});
console.log("arr1", newArr);
return newArr;
}, [data]);
const statusArr2 = useMemo(() => {
let allArr = data?.[1]?.thirdList;
let newArr = [];
allArr?.forEach((item) => {
console.log(item);
item?.fourthList?.forEach((it) => {
newArr.push(it?.status);
});
});
console.log("arr2", newArr);
return newArr;
}, [data]);
const statusArr3 = useMemo(() => {
let allArr = data?.[2]?.thirdList;
let newArr = [];
allArr?.forEach((item) => {
console.log(item);
item?.fourthList?.forEach((it) => {
newArr.push(it?.status);
});
});
console.log("arr3", newArr);
return newArr;
}, [data]);
const rgbChange = function (status) {
if (status == "0") {
return "gray";
} else if (status == "1") {
return "green";
} else if (status == "2") {
return "#00bbf2";
}
};
return (
<>
<div className="data-content" style={{ position: "relative" }}>
<div className="content-header"> 库容监控</div>
<div className="jk-content">
<div className="jk-content-unit" style={{ position: "relative" }}>
<div
className="jk-status numStatus"
style={{ position: "relative" }}
>
<div className="numberStatus">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
</div>
<div className="statusLine bgline1"></div>
<span
style={{
position: "absolute",
bottom: "-20px",
left: "15px",
color: "white",
}}
>
高
</span>
</div>
<div className="jk-statusContent">
{statusArr1?.map((it) => {
return (
<div
className="statusDiv"
style={{
backgroundColor: rgbChange(it),
}}
></div>
);
})}
<div className="jk-statusBottom">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
</div>
<div className="jk-content-unit">
<div className="jk-status" style={{ position: "relative" }}>
<div className="statusLine bgline2"></div>
<span
style={{
position: "absolute",
bottom: "-20px",
left: "0",
color: "white",
}}
>
中
</span>
</div>
<div className="jk-statusContent">
{statusArr2?.map((it) => {
return (
<div
className="statusDiv"
style={{
backgroundColor: rgbChange(it),
}}
></div>
);
})}
<div className="jk-statusBottom">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
</div>
<div className="jk-content-unit">
<div className="jk-status" style={{ position: "relative" }}>
<div className="statusLine bgline3"></div>
<span
style={{
position: "absolute",
bottom: "-20px",
left: "0",
color: "white",
}}
>
低
</span>
</div>
<div className="jk-statusContent">
{statusArr3?.map((it) => {
return (
<div
className="statusDiv"
style={{
backgroundColor: rgbChange(it),
}}
></div>
);
})}
<div className="jk-statusBottom">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
</div>
</div>
<div
style={{
position: "absolute",
display: "flex",
top: 3,
right: 10,
}}
className="statuslogo"
>
<div>
<div
style={{ backgroundColor: "green" }}
className="statustitle"
></div>
空闲
</div>
<div>
<div
style={{ backgroundColor: "#00bbf2" }}
className="statustitle"
></div>
占用
</div>
<div>
<div
style={{ backgroundColor: "gray" }}
className="statustitle"
></div>
不可用
</div>
</div>
</div>
</>
);
};
src/pages/Storeboard/Kwxx.jsx 0 → 100644
View file @ 2a7dfd38
//库位信息
import React, { useState, useEffect } from "react";
import logo1 from "./../../../public/img/logo1.png";
import logo2 from "./../../../public/img/logo2.png";
import logo3 from "./../../../public/img/logo3.png";
import logo4 from "./../../../public/img/logo4.png";
export default ({ data }) => {
return (
<>
<div className="data-content">
<div className="content-header"> 库位信息</div>
<div className="content-div">
<div>
<div style={{ display: "flex", flexDirection: "column" }}>
<img src={logo1} alt="" />
<p>空闲</p>
</div>
<span>{data?.idleNum ?? "--"}</span>
</div>
<div>
<div style={{ display: "flex", flexDirection: "column" }}>
<img src={logo2} alt="" />
<p>占用</p>
</div>
<span>{data?.occupyNum ?? "--"}</span>
</div>
<div>
<div style={{ display: "flex", flexDirection: "column" }}>
<img src={logo3} alt="" />
<p>入库</p>
</div>
<span>{data?.instoreNum ?? "--"}</span>
</div>
<div>
<div style={{ display: "flex", flexDirection: "column" }}>
<img src={logo4} alt="" />
<p>出库</p>
</div>
<span>{data?.outstoreNum ?? "--"}</span>
</div>
</div>
</div>
</>
);
};
src/pages/Storeboard/getData.js 0 → 100644
View file @ 2a7dfd38
import { doFetch } from "@/utils/doFetch";
import { message } from "antd";
// 待入库任务
export function getInstoreData(params) {
return doFetch({
url: "/ngic-statistics/board/queryDealMaterieInstore",
}).then((res) => {
if (res.code == "0000") {
return res?.data?.dataList;
} else {
message.error(res.msg);
}
});
}
// 待出库任务
export function getOutstoreData(params) {
return doFetch({
url: "/ngic-statistics/board/queryDealMaterieOutstore",
}).then((res) => {
if (res.code == "0000") {
return res?.data?.dataList;
} else {
message.error(res.msg);
}
});
}
// 库容监控
export async function getStationMonitor(params) {
await doFetch({ url: "/ngic-statistics/board/queryMonitor" }).then((res) => {
if (res.code == "0000") {
return res?.data?.dataList;
} else {
message.error(res.msg);
return [];
}
});
}
// 库存统计
export function getStationStatistics(params) {
return doFetch({
url: "/ngic-statistics/board/queryInventoryStatistics",
}).then((res) => {
if (res.code == "0000") {
return res?.data?.dataList;
} else {
message.error(res.msg);
}
});
}
// 出入库条数
export function getInOutstoreNum(params) {
return doFetch({
url: "/ngic-statistics/board/queryInOutstoreNum",
}).then((res) => {
if (res.code == "0000") {
return res?.data?.dataList;
} else {
message.error(res.msg);
}
});
}
// 出入库重量
export function getInOutstoreWeight(params) {
return doFetch({
url: "/ngic-statistics/board/queryInOutstoreWeight",
}).then((res) => {
if (res.code == "0000") {
return res?.data?.dataList;
} else {
message.error(res.msg);
}
});
}
// 实时库存数量
export function queryRealityWeight(params) {
return doFetch({
url: "/ngic-statistics/board/queryRealityWeight",
}).then((res) => {
if (res.code == "0000") {
return res?.data;
} else {
message.error(res.msg);
}
});
}
// 库存监控
export function queryMonitor(params) {
return doFetch({
url: "/ngic-statistics/board/queryMonitor",
}).then((res) => {
if (res.code == "0000") {
return res?.data?.dataList;
} else {
message.error(res.msg);
}
});
}
// 库存信息数据
export function queryStore(params) {
return doFetch({
url: "/ngic-statistics/board/queryStore",
}).then((res) => {
if (res.code == "0000") {
return res?.data;
} else {
message.error(res.msg);
}
});
}
src/pages/Storeboard/index.css 0 → 100644
View file @ 2a7dfd38
.kb-container {
width: 100%;
height: 100%;
background-color: rgba(26, 32, 44);
}
.kb-container header {
height: 64px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.kb-container header h2 {
color: aliceblue;
font-weight: 600;
font-size: 30px;
text-shadow: 1px 1px 2px white;
}
.kb-container header > div {
flex: 1;
}
.kb-container .kb-content {
height: calc(100% - 64px);
width: 100%;
display: flex;
flex-direction: row;
}
.kb-container .kb-content .Left {
flex: 1;
}
.kb-container .kb-content .Left .unit {
flex: 1;
}
.kb-container .kb-content .Center {
flex: 2;
}
.kb-container .kb-content .Center > .unit:first-child {
flex: 2;
display: flex;
flex-direction: row;
}
.kb-container .kb-content .Center > .unit:first-child > div:first-child {
flex: 1;
height: 100%;
}
.kb-container .kb-content .Center > .unit:first-child > div:last-child {
flex: 3;
}
.kb-container .kb-content .Center > .unit:last-child {
flex: 1;
}
.kb-container .kb-content .Right {
flex: 1;
}
.kb-container .kb-content .Right > .unit:first-child {
flex: 2;
}
.kb-container .kb-content .Right > .unit:nth-child(2) {
flex: 2;
}
.kb-container .kb-content .Right > .unit:last-child {
flex: 1;
}
.kb-container .kb-content .Left,
.kb-container .kb-content .Center,
.kb-container .kb-content .Right {
display: flex;
flex-direction: column;
}
.kb-container .kb-content .unit {
background-color: rgba(49, 60, 77, 0.8);
border-radius: 20px;
margin: 8px;
padding: 8px;
}
.kb-container .data-content {
height: 100%;
width: 100%;
}
.kb-container .data-content .content-title {
width: 100%;
height: 48px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.kb-container .data-content .content-title span {
flex: 1;
color: #fff;
text-align: center;
font-size: 14px;
}
.kb-container .content-charts {
width: 100%;
height: calc(100% - 32px);
}
.kb-container .content-header {
height: 32px;
width: 100%;
border-bottom: 1px solid;
border-image: linear-gradient(to left, rgba(255, 255, 255, 0.1) 10%, rgba(177, 95, 231, 0.637) 50%, #00bbf2 100%) 2 2 2 2;
color: #fff;
font-size: 18px;
}
.kb-container .content-div {
height: calc(100% - 32px);
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 12px;
padding-bottom: 12px;
}
.kb-container .content-div > div {
flex: 1;
margin: 12px 24px;
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 20px;
align-items: center;
}
.kb-container .content-div > div img {
width: 34px;
height: 34px;
}
.kb-container .content-div > div p {
color: #fff;
font-weight: 600;
font-size: 14px;
}
.kb-container .content-div > div span {
font-size: 35px;
color: #fff;
font-weight: 600;
text-shadow: 1px 1px 2px #fff;
}
.kb-container .content-div > div:nth-child(1) {
background-image: url('../../../public/img/cover1.png');
}
.kb-container .content-div > div:nth-child(2) {
background-image: url('../../../public/img/cover2.png');
}
.kb-container .content-div > div:nth-child(3) {
background-image: url('../../../public/img/cover3.png');
}
.kb-container .content-div > div:nth-child(4) {
background-image: url('../../../public/img/cover3.png');
}
.kb-container .dv-scroll-board {
background-image: var(--bgUrl--);
background-position: 0 0;
background-size: 100% 100%;
height: calc(100% - 80px);
background-color: transparent;
border-radius: 15px;
}
.kb-container .dv-scroll-board .row-item {
background-color: transparent !important;
text-align: center;
}
.kb-container .realTime {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.51), rgba(0, 0, 0, 0.51)), linear-gradient(176deg, #77F7F7 -1054%, rgba(145, 143, 220, 0.94) 128%, #313C4D 1124%);
}
.kb-container .realTime > div:last-child {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: auto;
justify-self: center;
}
.kb-container .realTime .realTime-content {
width: 200px;
height: 70px;
background: #1A202C;
border-radius: 11px;
box-shadow: inset 1px 1px 2px 1px rgba(255, 255, 255, 0.3);
text-align: center;
line-height: 70px;
margin-right: 10px;
}
.kb-container .realTime .realTime-content span {
color: #00bbf2;
font-size: 25px;
font-weight: 600;
}
.kb-container .jk-content {
display: flex;
flex-direction: row;
height: calc(100% - 32px);
padding: 12px 0 24px 0;
}
.kb-container .jk-content .jk-content-unit {
flex: 1;
height: 100%;
display: flex;
flex-direction: row;
margin-left: 6px;
}
.kb-container .jk-content .jk-content-unit .numStatus {
width: 30px !important;
}
.kb-container .jk-content .jk-content-unit .numStatus .numberStatus {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100%;
align-self: center;
}
.kb-container .jk-content .jk-content-unit .numStatus .numberStatus span {
color: #fff;
flex: 1;
height: auto;
align-self: center;
}
.kb-container .jk-content .jk-content-unit .jk-statusBottom {
width: 100%;
position: absolute;
top: 1;
}
.kb-container .jk-content .statusDiv {
width: 10px;
height: auto;
flex: 22%;
background-color: #00bbf2;
border-radius: 10px;
margin: 6px 1px;
}
.kb-container .jk-content .statusLine {
width: 10px;
background-color: green;
height: 100%;
}
.kb-container .jk-content .jk-status {
width: 10px;
height: 100%;
display: flex;
flex-direction: row;
}
.kb-container .jk-content .statusLine {
border-radius: 32px;
}
.kb-container .jk-content .bgline1 {
background: linear-gradient(180deg, rgba(255, 15, 15, 0.49) 0%, rgba(246, 244, 244, 0) 51%, rgba(255, 0, 0, 0.38) 100%);
}
.kb-container .jk-content .bgline2 {
background: linear-gradient(180deg, rgba(255, 147, 15, 0.49) 0%, rgba(246, 244, 244, 0) 51%, rgba(255, 140, 0, 0.38) 100%);
}
.kb-container .jk-content .bgline3 {
background: linear-gradient(180deg, rgba(255, 251, 15, 0.49) 0%, rgba(246, 244, 244, 0) 51%, rgba(255, 251, 0, 0.38) 100%);
}
.kb-container .jk-content .jk-statusContent {
flex: 1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
position: relative;
}
.kb-container .jk-content .jk-statusContent .jk-statusBottom {
position: absolute;
bottom: -20px;
width: 100%;
display: flex;
flex-direction: row;
}
.kb-container .jk-content .jk-statusContent .jk-statusBottom span {
flex: 1;
text-align: center;
color: skyblue;
font-size: 16px;
font-weight: 600;
}
.kb-container .statuslogo > div {
display: flex;
flex-direction: row;
color: #fff;
margin-right: 12px;
align-items: center;
}
.kb-container .statustitle {
width: 18px;
height: 18px;
border-radius: 4px;
margin-right: 3px;
}
src/pages/Storeboard/index.jsx 0 → 100644
View file @ 2a7dfd38
import React, { useState, useEffect, useRef } from "react";
import "./index.less";
import DataTable from "./DataTable";
import io from "socket.io-client";
import Krjk from "./Krjk";
import Kwxx from "./Kwxx";
import { FullscreenOutlined, FullscreenExitOutlined } from "@ant-design/icons";
import { useFullscreen, useRequest } from "ahooks";
import Charts from "./Charts";
import Clock from "./Clock";
import {
getInstoreData,
getOutstoreData,
getStationStatistics,
getInOutstoreNum,
getInOutstoreWeight,
queryRealityWeight,
queryMonitor,
queryStore,
} from "./getData.js";
import { message } from "antd";
const { NODE_ENV } = process.env;
const websocketUrl =
NODE_ENV == "development"
? "http://192.168.40.41:7001"
: `${window.location.protocol == "http:" ? "ws" : "wss"}://${
window.location.host
}`;
let socket;
export default (second) => {
const ref = useRef(null);
const [isFullscreen, { enterFullscreen, exitFullscreen, toggleFullscreen }] =
useFullscreen(ref);
const [full, setfull] = useState(false);
const [instoreData, setinstoreData] = useState([]); //入库
const [outStoreData, setoutStoreData] = useState([]); //出库
const [stationStatistics, setstationStatistics] = useState([]); //库存统计
const [InOutstoreNum, setInOutstoreNum] = useState([]); //出库
const [InOutstoreWeight, setInOutstoreWeight] = useState([]); //出库
const [realNum, setnum] = useState(""); //
const [monitor, setMonitor] = useState([]); //
const [stautsnum, setstautsnum] = useState(); //
useEffect(() => {
socket = io(websocketUrl, {
reconnectionDelay: 4000,
// transports: ["websocket"],
autoConnect: true,
query: { id: localStorage.getItem("WMS_ID") },
});
// connect to socketIO server
socket.connect();
socket.on("message", (data) => {
console.log(data);
});
}, []);
// getInstoreData
useRequest(getInstoreData, {
manual: false,
onSuccess: (result, params) => {
console.log(result);
setinstoreData(result);
},
onError: (error) => {
message.error(error.message);
setinstoreData([]);
},
});
// getOutstoreData
useRequest(getOutstoreData, {
manual: false,
onSuccess: (result, params) => {
console.log(result);
setoutStoreData(result);
},
onError: (error) => {
message.error(error.message);
setoutStoreData([]);
},
});
// getStationStatistics
useRequest(getStationStatistics, {
manual: false,
onSuccess: (result, params) => {
console.log(result);
setstationStatistics(result);
},
onError: (error) => {
message.error(error.message);
setstationStatistics([]);
},
});
// getInOutstoreNum
useRequest(getInOutstoreNum, {
manual: false,
onSuccess: (result, params) => {
console.log(result);
setInOutstoreNum(result);
},
onError: (error) => {
message.error(error.message);
setInOutstoreNum([]);
},
});
// getInOutstoreWeight
useRequest(getInOutstoreWeight, {
manual: false,
onSuccess: (result, params) => {
console.log(result);
setInOutstoreWeight(result);
},
onError: (error) => {
message.error(error.message);
setInOutstoreWeight([]);
},
});
// getInOutstoreWeight
useRequest(queryRealityWeight, {
manual: false,
onSuccess: (result, params) => {
console.log(result);
setnum(result?.stockNum);
},
onError: (error) => {
message.error(error.message);
setnum("");
},
});
// queryMonitor
useRequest(queryMonitor, {
manual: false,
onSuccess: (result, params) => {
console.log(result);
setMonitor(result[0]?.secondList);
},
onError: (error) => {
message.error(error.message);
setMonitor([]);
},
});
// queryMonitor
useRequest(queryStore, {
manual: false,
onSuccess: (result, params) => {
setstautsnum(result);
},
onError: (error) => {
message.error(error.message);
setstautsnum([]);
},
});
return (
<>
<div className="kb-container" ref={ref}>
<header>
<div className="kb-time">
<Clock />
</div>
<div className="kb-title" style={{ textAlign: "center" }}>
<h2 style={{ marginBottom: 0, letterSpacing: 10 }}>
线边库监控看板
</h2>
</div>
<div>
<div
style={{
cursor: "pointer",
width: 30,
height: 30,
float: "right",
marginRight: 16,
}}
onClick={() => {
toggleFullscreen();
setfull((v) => !v);
}}
title="全屏"
>
{full ? (
<FullscreenExitOutlined
style={{ color: "#fff", fontSize: "24px" }}
/>
) : (
<FullscreenOutlined
style={{ color: "#fff", fontSize: "24px" }}
/>
)}
</div>
</div>
</header>
{/* 看板 */}
<div className="kb-content">
{/* 左侧 */}
<div className="Left">
{/* 待入库 */}
<div className="unit">
<DataTable
headTitle={["任务编号", "产品信息", "批次号", "库位"]}
title="待入库任务"
data={instoreData}
/>
</div>
{/* 待出库 */}
<div className="unit">
<DataTable
headTitle={["任务编号", "产品信息", "批次号", "库位", "工位"]}
title="待出库任务"
data={outStoreData}
/>
</div>
</div>
<div className="Center">
{/* 库存监控 */}
<div className="unit">
<div>
<Kwxx data={stautsnum}></Kwxx>
</div>
<div>
<Krjk data={monitor}></Krjk>
</div>
</div>
{/* 库存统计 */}
<div className="unit">
<DataTable
headTitle={["产品编码", "产品名称", "规格", "卷数", "重量"]}
title="库存统计"
data={stationStatistics}
/>
</div>
</div>
<div className="Right">
<div className="unit">
<Charts title="出入库单数量" data={InOutstoreNum} />
</div>
<div className="unit">
<Charts title="出入库产品数量" data={InOutstoreWeight} />
</div>
<div className="unit realTime">
<div className="content-header"> 实时库存重量</div>
<div
style={{
lineHeight: "calc(100% - 32px)",
height: "calc(100% - 32px)",
}}
>
<div className="realTime-content">
<span>{realNum ?? "--"}</span>
</div>
<span
style={{ color: "#1FDBDB", fontSize: 24, fontWeight: 600 }}
>
KG
</span>
</div>
</div>
</div>
</div>
</div>
</>
);
};
src/pages/Storeboard/index.less 0 → 100644
View file @ 2a7dfd38
.kb-container {
width: 100%;
height: 100%;
background-color: rgba(26, 32, 44);
header {
height: 64px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
h2 {
color: aliceblue;
font-weight: 600;
font-size: 30px;
text-shadow: 1px 1px 2px white;
}
>div {
flex: 1;
}
}
.kb-content {
height: calc(100% - 64px);
width: 100%;
display: flex;
flex-direction: row;
.Left {
flex: 1;
.unit {
flex: 1;
}
}
.Center {
flex: 2;
// 库容监控
>.unit:first-child {
flex: 2;
display: flex;
flex-direction: row;
>div:first-child {
flex: 1;
height: 100%;
}
>div:last-child {
flex: 3;
}
}
>.unit:last-child {
flex: 1
}
}
.Right {
flex: 1;
>.unit:first-child {
flex: 2;
}
>.unit:nth-child(2) {
flex: 2;
}
>.unit:last-child {
flex: 1;
}
}
.Left,
.Center,
.Right {
display: flex;
flex-direction: column;
}
.unit {
background-color: rgba(49, 60, 77, .8);
border-radius: 20px;
margin: 8px;
padding: 8px;
}
}
.data-content {
height: 100%;
width: 100%;
.content-title {
width: 100%;
height: 48px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
span {
flex: 1;
color: #fff;
text-align: center;
// font-weight: 600;
font-size: 14px;
}
}
}
.content-charts {
width: 100%;
height: calc(100% - 32px);
}
.content-header {
height: 32px;
width: 100%;
border-bottom: 1px solid;
border-image: linear-gradient(to left, rgba(255, 255, 255, .1) 10%, rgba(177, 95, 231, 0.637) 50%, #00bbf2 100%) 2 2 2 2;
color: #fff;
font-size: 18px;
}
.content-div {
height: calc(100% - 32px);
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 12px;
padding-bottom: 12px;
>div {
flex: 1;
margin: 12px 24px;
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 20px;
align-items: center;
img {
width: 34px;
height: 34px;
}
p {
color: #fff;
font-weight: 600;
font-size: 14px;
}
span {
font-size: 35px;
color: #fff;
font-weight: 600;
text-shadow: 1px 1px 2px #fff;
}
}
>div:nth-child(1) {
background-image: url('../../../public/img/cover1.png');
}
>div:nth-child(2) {
background-image: url('../../../public/img/cover2.png');
}
>div:nth-child(3) {
background-image: url('../../../public/img/cover3.png');
}
>div:nth-child(4) {
background-image: url('../../../public/img/cover3.png');
}
}
.dv-scroll-board {
background-image: var(--bgUrl--);
background-position: 0 0;
background-size: 100% 100%;
height: calc(100% - 80px);
background-color: transparent;
border-radius: 15px;
.row-item {
background-color: transparent !important;
text-align: center;
}
}
.realTime {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.51), rgba(0, 0, 0, 0.51)), linear-gradient(176deg, #77F7F7 -1054%, rgba(145, 143, 220, 0.94) 128%, #313C4D 1124%);
>div:last-child {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: auto;
justify-self: center;
}
.realTime-content {
width: 200px;
height: 70px;
background: #1A202C;
border-radius: 11px;
box-shadow: inset 1px 1px 2px 1px rgba(255, 255, 255, .3);
text-align: center;
line-height: 70px;
margin-right: 10px;
span {
color: #00bbf2;
font-size: 25px;
font-weight: 600;
}
}
}
.jk-content {
display: flex;
flex-direction: row;
height: calc(100% - 32px);
padding: 12px 0 24px 0;
.jk-content-unit {
flex: 1;
height: 100%;
display: flex;
flex-direction: row;
margin-left: 6px;
.numStatus {
width: 30px !important;
.numberStatus {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100%;
align-self: center;
span {
color: #fff;
flex: 1;
height: auto;
align-self: center;
}
}
}
.jk-statusBottom {
width: 100%;
position: absolute;
top: 1;
}
}
.statusDiv {
width: 10px;
height: auto;
flex: 22%;
background-color: #00bbf2;
border-radius: 10px;
margin: 6px 1px;
}
.statusLine {
width: 10px;
background-color: green;
height: 100%;
}
.jk-status {
width: 10px;
height: 100%;
display: flex;
flex-direction: row;
}
.statusLine {
border-radius: 32px;
}
.bgline1 {
background: linear-gradient(180deg, rgba(255, 15, 15, 0.49) 0%, rgba(246, 244, 244, 0.00) 51%, rgba(255, 0, 0, 0.38) 100%);
}
.bgline2 {
background: linear-gradient(180deg, rgba(255, 147, 15, 0.49) 0%, rgba(246, 244, 244, 0.00) 51%, rgba(255, 140, 0, 0.38) 100%);
}
.bgline3 {
background: linear-gradient(180deg, rgba(255, 251, 15, 0.49) 0%, rgba(246, 244, 244, 0.00) 51%, rgba(255, 251, 0, 0.38) 100%);
}
.jk-statusContent {
flex: 1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
position: relative;
.jk-statusBottom {
position: absolute;
bottom: -20px;
width: 100%;
display: flex;
flex-direction: row;
span {
flex: 1;
text-align: center;
color: skyblue;
font-size: 16px;
font-weight: 600;
}
}
}
}
.statuslogo {
>div {
display: flex;
flex-direction: row;
color: #fff;
margin-right: 12px;
align-items: center;
}
}
.statustitle {
width: 18px;
height: 18px;
border-radius: 4px;
margin-right: 3px;
}
}
\ No newline at end of file
src/pages/user/Login/index.jsx
View file @ 2a7dfd38
......@@ -56,6 +56,7 @@ const Login = () => {
menuData = await initialState?.getmenuData();
if (userInfo) {
localStorage.setItem("WMS_ID", userInfo?.data?.id);
await setInitialState((s) => {
return { ...s, currentUser: userInfo?.data, newMenu: menuData };
});
......@@ -85,6 +86,7 @@ const Login = () => {
let token = res?.data?.token;
localStorage.setItem("TOKEN_MES", token);
await fetchUserInfo();
message.success("🎉 🎉 🎉 登录成功！");
/** 此方法会跳转到 redirect 参数所在的位置 */
if (!history) return;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment