985 lines
30 KiB
JavaScript
985 lines
30 KiB
JavaScript
|
/** @format */
|
|||
|
|
import { Tooltip } from "antd";
|
|||
|
|
import Head from "next/head";
|
|||
|
|
import react from "react";
|
|||
|
|
import Header from "./components/Header/Header";
|
|||
|
|
import VTab from "./components/Tab";
|
|||
|
|
// import Results from "./components/Results/Results";
|
|||
|
|
import localStorage from "localStorage";
|
|||
|
|
import Rcwebsocket from "reconnecting-websocket";
|
|||
|
|
import eqs from "../utils/eqs";
|
|||
|
|
import requests, { doPost, getWsUrl, imgUrl } from "../utils/requests";
|
|||
|
|
import Card from "./components/Card";
|
|||
|
|
import Modal from "./components/Modal";
|
|||
|
|
|
|||
|
|
const { eqinfos, eqdetail, eqstatus } = eqs;
|
|||
|
|
var intX;
|
|||
|
|
var isImgLoad = false;
|
|||
|
|
var isAlertLoad = false;
|
|||
|
|
var isEqDataUpdate = false;
|
|||
|
|
var _selectedtypecode, _selectedTab;
|
|||
|
|
var ws, connected, wseq, connectedeq;
|
|||
|
|
|
|||
|
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|||
|
|
|
|||
|
|
export default function Home({ results }) {
|
|||
|
|
const [isLoading, setLoading] = react.useState(false);
|
|||
|
|
const [selectedTab, setSelectedTab] = react.useState("-2");
|
|||
|
|
const [isPop, setPop] = react.useState(false);
|
|||
|
|
const [isPopAlert, setIsPopAlert] = react.useState(false);
|
|||
|
|
const [popData, setPopData] = react.useState({});
|
|||
|
|
const [workCenterCode, setWorkCenterCode] = react.useState();
|
|||
|
|
const [queryEqList, setQueryEqList] = react.useState(null);
|
|||
|
|
const [eqlist, setEqlist] = react.useState([]);
|
|||
|
|
const [operations, setOperations] = react.useState([]);
|
|||
|
|
const [curstation, setCurstation] = react.useState(null);
|
|||
|
|
const [runningStatus, setRunningStatus] = react.useState({
|
|||
|
|
0: true,
|
|||
|
|
1: true,
|
|||
|
|
2: true,
|
|||
|
|
3: true,
|
|||
|
|
4: true,
|
|||
|
|
});
|
|||
|
|
const [statuslist, setStatuslist] = react.useState({});
|
|||
|
|
// const [watingCount, setWaitingCount] = react.useState([]);
|
|||
|
|
const [typeList, setTypeList] = react.useState(null);
|
|||
|
|
// const [workingCount, setWorkingCount] = react.useState([]);
|
|||
|
|
const [stopCount, setStopCount] = react.useState([]);
|
|||
|
|
const [alertData, setAlertData] = react.useState([]);
|
|||
|
|
// const [productCount, setProductCount] = react.useState(0);
|
|||
|
|
const [selectedtypecode, setselectedtypecode] = react.useState("");
|
|||
|
|
const [allEquipCount, setAllEquipCount] = react.useState([]);
|
|||
|
|
// if (isLoading) return <p>Loading...</p>;
|
|||
|
|
var handleClose = () => {
|
|||
|
|
setPop(false);
|
|||
|
|
};
|
|||
|
|
var popHandle = (eq) => {
|
|||
|
|
setIsPopAlert(false);
|
|||
|
|
setPop(!isPop);
|
|||
|
|
setPopData(eq);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var alartPopHandle = (eq) => {
|
|||
|
|
setIsPopAlert(true);
|
|||
|
|
setPop(!isPop);
|
|||
|
|
setPopData(eq);
|
|||
|
|
};
|
|||
|
|
const listHeight = react.useRef(null);
|
|||
|
|
const screenref = react.useRef(null);
|
|||
|
|
const headerref = react.useRef(null);
|
|||
|
|
let isresize = false;
|
|||
|
|
let counter = 0;
|
|||
|
|
react.useEffect(() => {
|
|||
|
|
getWsUrl().then((url) => {
|
|||
|
|
ws?.close();
|
|||
|
|
wseq?.close();
|
|||
|
|
|
|||
|
|
//判断只有在是edge ws才连接，否则会出现异常连接不停重连
|
|||
|
|
if (url.indexOf("application-ws") > -1) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
try {
|
|||
|
|
ws = new Rcwebsocket(url);
|
|||
|
|
wseq = new Rcwebsocket(url);
|
|||
|
|
const onOpen = function () {
|
|||
|
|
console.log("OPENED: " + url);
|
|||
|
|
connected = true;
|
|||
|
|
ws.send("alert");
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const onClose = function () {
|
|||
|
|
console.log("CLOSED: " + url);
|
|||
|
|
ws = null;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const onMessage = function (event) {
|
|||
|
|
var data = event.data;
|
|||
|
|
try {
|
|||
|
|
var jsonobj = JSON.parse(data);
|
|||
|
|
if (jsonobj.length > 0) {
|
|||
|
|
setAlertData(jsonobj);
|
|||
|
|
}
|
|||
|
|
} catch (error) { }
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const onError = function (event) {
|
|||
|
|
//alert(event.data);
|
|||
|
|
};
|
|||
|
|
ws.onopen = onOpen;
|
|||
|
|
ws.onclose = onClose;
|
|||
|
|
ws.onmessage = onMessage;
|
|||
|
|
ws.onerror = onError;
|
|||
|
|
|
|||
|
|
const onOpeneq = function () {
|
|||
|
|
console.log("eq OPENED: " + url);
|
|||
|
|
connectedeq = true;
|
|||
|
|
wseq.send("equip");
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const onCloseeq = function () {
|
|||
|
|
console.log("eq CLOSED: " + url);
|
|||
|
|
wseq = null;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const onMessageeq = function (event) {
|
|||
|
|
var data = event.data;
|
|||
|
|
try {
|
|||
|
|
var jsonobj = JSON.parse(data);
|
|||
|
|
//获取数据
|
|||
|
|
// setLoading(true);
|
|||
|
|
bindData(jsonobj, queryEqList);
|
|||
|
|
// setLoading(false);
|
|||
|
|
} catch (error) { }
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const onErroreq = function (event) {
|
|||
|
|
//alert(event.data);
|
|||
|
|
console.log("event:连接websocket发生异常");
|
|||
|
|
};
|
|||
|
|
wseq.onopen = onOpeneq;
|
|||
|
|
wseq.onclose = onCloseeq;
|
|||
|
|
wseq.onmessage = onMessageeq;
|
|||
|
|
wseq.onerror = onErroreq;
|
|||
|
|
|
|||
|
|
//设置启动时选择工作中心
|
|||
|
|
let curstation = localStorage.getItem("workCenterCode");
|
|||
|
|
setCurstation(curstation);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log("连接websocket发生异常");
|
|||
|
|
}
|
|||
|
|
}, 2000);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}, [queryEqList]);
|
|||
|
|
|
|||
|
|
react.useEffect(() => {
|
|||
|
|
function handleResize() {
|
|||
|
|
isresize = true;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
isresize = false;
|
|||
|
|
}, 100);
|
|||
|
|
}
|
|||
|
|
window.addEventListener("resize", handleResize);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// react.useEffect(() => {
|
|||
|
|
// queryStauts(queryEqList);
|
|||
|
|
// }, [alertData, isImgLoad]);
|
|||
|
|
react.useEffect(() => {
|
|||
|
|
queryStauts(queryEqList);
|
|||
|
|
}, [alertData]);
|
|||
|
|
// react.useEffect(() => {
|
|||
|
|
// if (queryEqList === null || queryEqList === undefined) {
|
|||
|
|
// if (intX) {
|
|||
|
|
// clearInterval(intX);
|
|||
|
|
// intX = null;
|
|||
|
|
// }
|
|||
|
|
// } else if (queryEqList.length > 0) {
|
|||
|
|
// if (intX) {
|
|||
|
|
// clearInterval(intX);
|
|||
|
|
// intX = null;
|
|||
|
|
// }
|
|||
|
|
// setTimeout(() => {
|
|||
|
|
// intX = setInterval(() => {
|
|||
|
|
// // queryFields(queryEqList);
|
|||
|
|
// // queryStauts(queryEqList);
|
|||
|
|
// }, interval);
|
|||
|
|
// }, 2000);
|
|||
|
|
// }
|
|||
|
|
// }, [queryEqList]);
|
|||
|
|
const getAlertData = react.useMemo(() => {
|
|||
|
|
return alertData;
|
|||
|
|
}, [alertData]);
|
|||
|
|
|
|||
|
|
const getqueryEqList = react.useMemo(() => {
|
|||
|
|
return queryEqList;
|
|||
|
|
}, [queryEqList]);
|
|||
|
|
|
|||
|
|
var factorychanged = (item) => {
|
|||
|
|
setQueryEqList([]);
|
|||
|
|
setAlertData([]);
|
|||
|
|
setStatuslist({});
|
|||
|
|
if (!item) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
isImgLoad = false;
|
|||
|
|
setLoading(true);
|
|||
|
|
if (item.code === undefined) return;
|
|||
|
|
console.log("执行获取所有设备" + item.code);
|
|||
|
|
setWorkCenterCode(item.code);
|
|||
|
|
localStorage.setItem("workCenterCode", item.code);
|
|||
|
|
let eqdata = undefined;//localStorage.getItem(item.code);
|
|||
|
|
if (eqdata && JSON.parse(eqdata).length !== 0) {
|
|||
|
|
let ed = JSON.parse(eqdata);
|
|||
|
|
getTypeList(ed);
|
|||
|
|
setEqlist(ed);
|
|||
|
|
queryFields(ed);
|
|||
|
|
setQueryEqList(ed);
|
|||
|
|
setLoading(false);
|
|||
|
|
return;
|
|||
|
|
} else {
|
|||
|
|
isEqDataUpdate = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//获取设备明细清单
|
|||
|
|
doPost(requests.fetchEquipFieldsList.url, { workCenterCode: item.code })
|
|||
|
|
.then((res) => res.json())
|
|||
|
|
.then((data) => {
|
|||
|
|
if (data.success) {
|
|||
|
|
if (!data.data) {
|
|||
|
|
setTypeList(null);
|
|||
|
|
setEqlist(null);
|
|||
|
|
setQueryEqList(null);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//这里如果想要按照name进行分组即如下：
|
|||
|
|
const retdata = data.data;
|
|||
|
|
const results = GroupBy(retdata, function (item) {
|
|||
|
|
return [item.code];
|
|||
|
|
});
|
|||
|
|
const eqlisttmp = results.map((item) => {
|
|||
|
|
return {
|
|||
|
|
code: item[0].code,
|
|||
|
|
fileGroupId: item[0].fileGroupId,
|
|||
|
|
fieldSort: item[0].fieldSort,
|
|||
|
|
name: item[0].name,
|
|||
|
|
operationCode: item[0].operationCode,
|
|||
|
|
operationName: item[0].operationName,
|
|||
|
|
operationSort: item[0].operationSort,
|
|||
|
|
screenShowSerialNumber: item[0].screenShowSerialNumber,
|
|||
|
|
typeCode: item[0].typeCode,
|
|||
|
|
runningstatus: undefined,
|
|||
|
|
typeName: item[0].typeName,
|
|||
|
|
bmIotEquipmentRelationshipList: item,
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
getTypeList(eqlisttmp);
|
|||
|
|
setEqlist(eqlisttmp);
|
|||
|
|
queryFields(eqlisttmp);
|
|||
|
|
setQueryEqList(eqlisttmp);
|
|||
|
|
//localStorage.setItem(item.code, JSON.stringify(eqlisttmp));
|
|||
|
|
isEqDataUpdate = false;
|
|||
|
|
} else {
|
|||
|
|
setEqlist(null);
|
|||
|
|
setTypeList(null);
|
|||
|
|
queryFields(null);
|
|||
|
|
setQueryEqList(null);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch((ex) => {
|
|||
|
|
console.log(ex);
|
|||
|
|
setTypeList(null);
|
|||
|
|
setEqlist(null);
|
|||
|
|
queryFields(null);
|
|||
|
|
setQueryEqList(null);
|
|||
|
|
})
|
|||
|
|
.finally((data) => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
setLoading(false);
|
|||
|
|
}, 300);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
function refreshData(eqfields) {
|
|||
|
|
if (!eqfields) {
|
|||
|
|
eqfields = eqlist;
|
|||
|
|
}
|
|||
|
|
if (!eqfields) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
//把所有字段赋值
|
|||
|
|
const eqfieldstmp = eqfields.map((item) => {
|
|||
|
|
var obj = {};
|
|||
|
|
var fields = item.bmIotEquipmentRelationshipList.map((field) => {
|
|||
|
|
return field.iotField;
|
|||
|
|
});
|
|||
|
|
obj["equipCode"] = item.code;
|
|||
|
|
fields.map((aa) => {
|
|||
|
|
obj[aa] = "";
|
|||
|
|
});
|
|||
|
|
return obj;
|
|||
|
|
});
|
|||
|
|
// doPost(requests.fetchLastEqFieldsValue.url, eqfieldstmp)
|
|||
|
|
// .then((res) => res.json())
|
|||
|
|
// .then((data) => {
|
|||
|
|
// if (data.success) {
|
|||
|
|
// bindData(data.data, eqfields);
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
// .catch((ex) => {
|
|||
|
|
// console.log(ex);
|
|||
|
|
// })
|
|||
|
|
// .finally(() => {
|
|||
|
|
// setLoading(false);
|
|||
|
|
// });
|
|||
|
|
}
|
|||
|
|
function bindData(data, eqfields) {
|
|||
|
|
const zret = data;
|
|||
|
|
zret.map((ret) => {
|
|||
|
|
eqfields.filter((a) => {
|
|||
|
|
// var eqstatus1 = a;
|
|||
|
|
// if (getAlertData && getAlertData.length > 0) {
|
|||
|
|
// eqstatus1.alert = getAlertData.filter((al) => {
|
|||
|
|
// if (al.equipCode === eqstatus1.code) {
|
|||
|
|
// return al;
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
// let alertcout = eqstatus1?.alert?.filter((aa) => {
|
|||
|
|
// if (!aa?.eliminationTime) {
|
|||
|
|
// return aa;
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
// eqstatus1.alertcount = alertcout.length;
|
|||
|
|
|
|||
|
|
// }
|
|||
|
|
if (ret && ret.equipCode && a.code === ret.equipCode) {
|
|||
|
|
a.bmIotEquipmentRelationshipList.map((b) => {
|
|||
|
|
b.iotFieldValue = ret[b.iotField];
|
|||
|
|
b.iotFieldValueTime = ret[b.iotField + "__time"];
|
|||
|
|
if (
|
|||
|
|
(!a.runningstatus || a.runningstatus === 0) &&
|
|||
|
|
a.runningstatus !== 3
|
|||
|
|
) {
|
|||
|
|
a.runningstatus = Number.parseInt(ret["runningstatus"]);
|
|||
|
|
}
|
|||
|
|
if (Number.isNaN(a.runningstatus)) {
|
|||
|
|
a.runningstatus = 0;
|
|||
|
|
}
|
|||
|
|
if (!b.updateTime) {
|
|||
|
|
b.updateTime = ret["time"];
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
queryStauts(eqfields);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function GroupBy(array, fn) {
|
|||
|
|
const groups = {};
|
|||
|
|
array.forEach(function (item) {
|
|||
|
|
const group = JSON.stringify(fn(item));
|
|||
|
|
//这里利用对象的key值唯一性的，创建数组
|
|||
|
|
groups[group] = groups[group] || [];
|
|||
|
|
groups[group].push(item);
|
|||
|
|
});
|
|||
|
|
//最后再利用map循环处理分组出来
|
|||
|
|
return Object.keys(groups).map(function (group) {
|
|||
|
|
return groups[group];
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var closePop = () => {
|
|||
|
|
setPop(false);
|
|||
|
|
};
|
|||
|
|
function dateData(property, bol) {
|
|||
|
|
//property是你需要排序传入的key,bol为true时是升序，false为降序
|
|||
|
|
return function (a, b) {
|
|||
|
|
var value1 = a[property];
|
|||
|
|
var value2 = b[property];
|
|||
|
|
if (bol) {
|
|||
|
|
// 升序
|
|||
|
|
return Date.parse(value1) - Date.parse(value2);
|
|||
|
|
} else {
|
|||
|
|
// 降序
|
|||
|
|
return Date.parse(value2) - Date.parse(value1);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
return (
|
|||
|
|
<div className="h-screen overflow-hidden modal-container " ref={screenref}>
|
|||
|
|
{isPop ? (
|
|||
|
|
<Modal
|
|||
|
|
title={`${popData.name} · ${isPopAlert ? "告警" : "其他"} `}
|
|||
|
|
img={popData.Img}
|
|||
|
|
closePopHandler={closePop}
|
|||
|
|
>
|
|||
|
|
{console.log(popData.alert)}
|
|||
|
|
{isPopAlert ? (
|
|||
|
|
<div>
|
|||
|
|
<div className="overflow-x-auto">
|
|||
|
|
<table className="table table-compact w-full">
|
|||
|
|
<thead>
|
|||
|
|
<tr className=" ">
|
|||
|
|
<th>告警发生时间</th>
|
|||
|
|
<th>告警内容</th>
|
|||
|
|
<th>告警消除时间</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
{popData?.alert?.sort(dateData("time", false)).map((x) => {
|
|||
|
|
return (
|
|||
|
|
<tr>
|
|||
|
|
<td>{x.time}</td>
|
|||
|
|
<td>{x.phenomenonName}</td>
|
|||
|
|
<td>{x.eliminationTime}</td>
|
|||
|
|
</tr>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className={`grid gap-2 grid-cols-2 w-full`}>
|
|||
|
|
{!popData.bmIotEquipmentRelationshipList
|
|||
|
|
? ``
|
|||
|
|
: popData.bmIotEquipmentRelationshipList
|
|||
|
|
.filter((re) => {
|
|||
|
|
if (isPopAlert && re.iotIsalarm && re.status) {
|
|||
|
|
return re;
|
|||
|
|
} else if (
|
|||
|
|
!isPopAlert &&
|
|||
|
|
!re.iotIsalarm &&
|
|||
|
|
!re.iotIsMainField &&
|
|||
|
|
re.status
|
|||
|
|
) {
|
|||
|
|
return re;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.sort((a, b) =>
|
|||
|
|
parseFloat(a.fieldSort) > parseFloat(b.fieldSort) ? 1 : -1
|
|||
|
|
) // .sort((a, b) => (!a.iotFieldValue ? 1 : -1))
|
|||
|
|
.map((re) => {
|
|||
|
|
return (
|
|||
|
|
<div className="">
|
|||
|
|
<label
|
|||
|
|
htmlFor="field-value"
|
|||
|
|
className="block text-xs text-gray-700"
|
|||
|
|
>
|
|||
|
|
{re.iotFieldDescribe}
|
|||
|
|
</label>
|
|||
|
|
{!isPopAlert ? (
|
|||
|
|
<Tooltip
|
|||
|
|
placement="top"
|
|||
|
|
title={re.iotFieldValueTime}
|
|||
|
|
mouseEnterDelay={1}
|
|||
|
|
>
|
|||
|
|
<div>
|
|||
|
|
<input
|
|||
|
|
disabled
|
|||
|
|
type="text"
|
|||
|
|
name="field-value"
|
|||
|
|
value={re.iotFieldValue}
|
|||
|
|
id="field-value"
|
|||
|
|
autoComplete="given-name"
|
|||
|
|
className=" mt-1 text-xs disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
|
|||
|
|
focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm h-6 border-gray-300 "
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</Tooltip>
|
|||
|
|
) : typeof re.iotFieldValue === "boolean" ? (
|
|||
|
|
re.iotFieldValue ? (
|
|||
|
|
<label
|
|||
|
|
name="field-value"
|
|||
|
|
id="field-value"
|
|||
|
|
className=" mt-1 block w-10 bg-[#eb5f2c26] text-[#EB5E2C] border-[#EB5E2C] border py-0.5 px-1.5"
|
|||
|
|
>
|
|||
|
|
告警{" "}
|
|||
|
|
</label>
|
|||
|
|
) : (
|
|||
|
|
<label
|
|||
|
|
name="field-value"
|
|||
|
|
id="field-value"
|
|||
|
|
className=" mt-1 block w-10 bg-[#7caea02f] text-[#53B59A] border-[#53B59A] border py-0.5 px-1.5"
|
|||
|
|
>
|
|||
|
|
正常
|
|||
|
|
</label>
|
|||
|
|
)
|
|||
|
|
) : (
|
|||
|
|
re.iotFieldValue
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</Modal>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
<Head>
|
|||
|
|
<title>融通高科设备大屏 1.0</title>
|
|||
|
|
<link rel="icon" href="/favicon.ico" />
|
|||
|
|
<script src="http://localhost:8097"></script>
|
|||
|
|
</Head>
|
|||
|
|
{/* {selectedtypecode==='1001'
|
|||
|
|
} */}
|
|||
|
|
<Header
|
|||
|
|
getEqData={() => {
|
|||
|
|
localStorage.removeItem(workCenterCode);
|
|||
|
|
factorychanged({ code: workCenterCode });
|
|||
|
|
}}
|
|||
|
|
runningstatuschanged={(key, value) => {
|
|||
|
|
setRunningStatus((prestate) => {
|
|||
|
|
return {
|
|||
|
|
...prestate,
|
|||
|
|
[key]: value,
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
}}
|
|||
|
|
zzref={headerref}
|
|||
|
|
selectedone={curstation}
|
|||
|
|
factorychanged={factorychanged}
|
|||
|
|
setTypeList={(data) => {
|
|||
|
|
setTypeList(data);
|
|||
|
|
}}
|
|||
|
|
typechanged={(ty) => {
|
|||
|
|
if(ty.name==='无'){return}
|
|||
|
|
setselectedtypecode(ty?.code);
|
|||
|
|
_selectedtypecode = ty?.code;
|
|||
|
|
if (eqlist&&eqlist.length > 0) {
|
|||
|
|
getTypeList(eqlist);
|
|||
|
|
queryFields(eqlist);
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
typeList={typeList}
|
|||
|
|
statuslist={statuslist}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* overflow-y-scroll scrollbar-hide */}
|
|||
|
|
{/* ${
|
|||
|
|
screenref.current?.clientHeight
|
|||
|
|
} ${headerref.current?.clientHeight} ${
|
|||
|
|
listHeight.current?.clientHeight
|
|||
|
|
} ${
|
|||
|
|
screenref.current?.clientHeight - headerref.current?.clientHeight <
|
|||
|
|
listHeight.current?.clientHeight && !isresize
|
|||
|
|
? "h-[92%]"
|
|||
|
|
: "h-fit"
|
|||
|
|
} */}
|
|||
|
|
<VTab
|
|||
|
|
className="flex flex-col h-[94%] w-full bg-white px-3 pb-3"
|
|||
|
|
ops={operations}
|
|||
|
|
selectedtypecode={selectedtypecode}
|
|||
|
|
tabchanged={(tab) => {
|
|||
|
|
if (tab) {
|
|||
|
|
setSelectedTab(tab.code);
|
|||
|
|
_selectedTab = tab.code;
|
|||
|
|
console.log(JSON.stringify(tab));
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div className="h-full w-full">
|
|||
|
|
{operations
|
|||
|
|
.filter((x) => {
|
|||
|
|
if (selectedTab === "-1" && x.code === "-1") {
|
|||
|
|
return x;
|
|||
|
|
} else if (selectedTab === "-2" && x.code !== "-2") {
|
|||
|
|
return x;
|
|||
|
|
} else if (
|
|||
|
|
selectedTab !== "-2" &&
|
|||
|
|
selectedTab !== "-1" &&
|
|||
|
|
x.code === selectedTab
|
|||
|
|
) {
|
|||
|
|
return x;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.map((op) => {
|
|||
|
|
return selectedtypecode === "-001" ? (
|
|||
|
|
getTabContent(op.code)
|
|||
|
|
) : !op.code ||
|
|||
|
|
eqlist?.filter(
|
|||
|
|
(z) =>
|
|||
|
|
z.operationCode === op.code &&
|
|||
|
|
z.typeCode === selectedtypecode
|
|||
|
|
)?.length === 0 ? (
|
|||
|
|
<></>
|
|||
|
|
) : (
|
|||
|
|
<div>
|
|||
|
|
<span className="text-[#0185FF]">
|
|||
|
|
<label className=" text-lg ">{"▌"}</label>
|
|||
|
|
<label className=" text-lg ">{op.name}</label>
|
|||
|
|
</span>
|
|||
|
|
<div className="h-3"></div>
|
|||
|
|
{getTabContent(op.code)}
|
|||
|
|
<div className="h-3"></div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</VTab>
|
|||
|
|
{/* <Results results={results} /> */}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
function getTabContent(op) {
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
ref={listHeight}
|
|||
|
|
className={`" relative grid grid-flow-row gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 text-sm text-center font-bold overflow-y-auto h-[92%] "`}
|
|||
|
|
>
|
|||
|
|
{isLoading ? (
|
|||
|
|
<svg
|
|||
|
|
className="animate-spin -ml-1 mr-3 h-5 w-5 text-red absolute top-4 right-4"
|
|||
|
|
xmlns="http://www.w3.org/2000/svg"
|
|||
|
|
fill="none"
|
|||
|
|
viewBox="0 0 24 24"
|
|||
|
|
>
|
|||
|
|
<circle
|
|||
|
|
className="opacity-25"
|
|||
|
|
cx="12"
|
|||
|
|
cy="12"
|
|||
|
|
r="10"
|
|||
|
|
stroke="currentColor"
|
|||
|
|
// stroke-width="4"
|
|||
|
|
></circle>
|
|||
|
|
<path
|
|||
|
|
className="opacity-75"
|
|||
|
|
fill="currentColor"
|
|||
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|||
|
|
></path>
|
|||
|
|
</svg>
|
|||
|
|
) : (
|
|||
|
|
<></>
|
|||
|
|
)}
|
|||
|
|
{!eqlist || eqlist.length === 0
|
|||
|
|
? `当前没有数据`
|
|||
|
|
: eqlist
|
|||
|
|
.filter((item) => {
|
|||
|
|
{
|
|||
|
|
if (op === item.operationCode) {
|
|||
|
|
if (!item.runningstatus) {
|
|||
|
|
if (runningStatus[0]) {
|
|||
|
|
return item;
|
|||
|
|
}
|
|||
|
|
} else if (runningStatus[item.runningstatus]) {
|
|||
|
|
return item;
|
|||
|
|
} else if (item.runningstatus < 4 && item?.alertcount > 0) {
|
|||
|
|
if (runningStatus[4] && !runningStatus[2]) {
|
|||
|
|
return item;
|
|||
|
|
} else if (!runningStatus[4] && runningStatus[2]) {
|
|||
|
|
return item;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.filter((item) => {
|
|||
|
|
if (item.typeCode === selectedtypecode) {
|
|||
|
|
if (!item.screenShowSerialNumber)
|
|||
|
|
item.screenShowSerialNumber = 1000000;
|
|||
|
|
return item;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.sort((a, b) =>
|
|||
|
|
a.screenShowSerialNumber > b.screenShowSerialNumber ? 1 : -1
|
|||
|
|
)
|
|||
|
|
.map((item, idx) => (
|
|||
|
|
// eslint-disable-next-line react/jsx-key
|
|||
|
|
<Card
|
|||
|
|
// classNamez={isLoading ? `animate-pulse` : ``}
|
|||
|
|
alertData={alertData}
|
|||
|
|
key={idx}
|
|||
|
|
selectedTab={selectedTab}
|
|||
|
|
typecode={_selectedtypecode}
|
|||
|
|
eq={item}
|
|||
|
|
popHandle={popHandle}
|
|||
|
|
alartPopHandle={alartPopHandle}
|
|||
|
|
></Card>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
function getTypeList(curdata) {
|
|||
|
|
var curdata = curdata.filter((zz) => zz.typeCode === _selectedtypecode);
|
|||
|
|
var codes = curdata.map((zz) => zz.code);
|
|||
|
|
// var _typelist = [];
|
|||
|
|
var _opcodelist = [];
|
|||
|
|
_opcodelist.push({
|
|||
|
|
code: "-2",
|
|||
|
|
name: "全部",
|
|||
|
|
sort: 0,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var ctypes = curdata.map((zz) => {
|
|||
|
|
// zz.typecode = zz.typecode;
|
|||
|
|
// zz.typename = zz.bmEquipmentTypeIotVo.name;
|
|||
|
|
// if (_typelist.filter((item) => item.code === zz.typeCode).length > 0) {
|
|||
|
|
// } else {
|
|||
|
|
// _typelist.push({
|
|||
|
|
// name: zz.typeName,
|
|||
|
|
// code: zz.typeCode,
|
|||
|
|
// });
|
|||
|
|
// }
|
|||
|
|
if (
|
|||
|
|
_opcodelist.filter((item) => item.code === zz.operationCode).length > 0
|
|||
|
|
) {
|
|||
|
|
} else {
|
|||
|
|
if (zz.operationCode) {
|
|||
|
|
_opcodelist.push({
|
|||
|
|
code: zz.operationCode,
|
|||
|
|
name: zz.operationName,
|
|||
|
|
sort: zz.operationSort ?? 10000,
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
zz.operationCode = "-1";
|
|||
|
|
zz.operationName = "其他";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
if (_opcodelist.filter((x) => x.code === "-1")?.length === 0) {
|
|||
|
|
_opcodelist.push({
|
|||
|
|
code: "-1",
|
|||
|
|
name: "其他",
|
|||
|
|
sort: 100000,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
var opslist = _opcodelist.sort((a, b) => (a.sort > b.sort ? 1 : -1));
|
|||
|
|
setOperations(opslist);
|
|||
|
|
// setTypeList(_typelist);
|
|||
|
|
|
|||
|
|
if (isImgLoad || !curdata) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
curdata.map((eq) => {
|
|||
|
|
if (!eq.fileGroupId) return;
|
|||
|
|
doPost(requests.fetchEquipImg.url + eq.fileGroupId, {
|
|||
|
|
clientId: "pc",
|
|||
|
|
})
|
|||
|
|
.then((res) => res.json())
|
|||
|
|
.then((data) => {
|
|||
|
|
if (data.success && data.rows.length > 0) {
|
|||
|
|
var img = imgUrl + data.rows[0].fileCode;
|
|||
|
|
doPost(img, {})
|
|||
|
|
.then((res) => res.blob())
|
|||
|
|
.then((file) => {
|
|||
|
|
var blobUrl = URL.createObjectURL(file);
|
|||
|
|
eq.Img = blobUrl;
|
|||
|
|
})
|
|||
|
|
.catch((ex) => {
|
|||
|
|
console.log(ex);
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// console.log(data);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch((ex) => {
|
|||
|
|
console.log(ex);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
isImgLoad = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function queryStauts(eqdata) {
|
|||
|
|
if (!_selectedtypecode) {
|
|||
|
|
_selectedtypecode = selectedtypecode;
|
|||
|
|
}
|
|||
|
|
if (!eqdata || !_selectedtypecode) {
|
|||
|
|
// setLoading(false);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var codes = eqdata
|
|||
|
|
.filter((item) => {
|
|||
|
|
if (item.typeCode === _selectedtypecode) {
|
|||
|
|
return item;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.map((aa) => aa.code);
|
|||
|
|
//获取设备状态
|
|||
|
|
//接口请求物联网influxdb查询服务
|
|||
|
|
//0 待产 1 生产 2 停产
|
|||
|
|
if (_selectedtypecode && _selectedtypecode !== "1001") {
|
|||
|
|
setStatuslist((prestate) => {
|
|||
|
|
return {
|
|||
|
|
...prestate,
|
|||
|
|
0: codes.length,
|
|||
|
|
1: 0,
|
|||
|
|
2: 0,
|
|||
|
|
3: 0,
|
|||
|
|
4: 0,
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var alertcount = [];
|
|||
|
|
if (_selectedtypecode) {
|
|||
|
|
alertcount = eqdata.filter((eqstatus) => {
|
|||
|
|
if (
|
|||
|
|
eqstatus?.alertcount > 0 &&
|
|||
|
|
eqstatus.typeCode === _selectedtypecode
|
|||
|
|
) {
|
|||
|
|
return eqstatus;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// setStatuslist((prestate) => {
|
|||
|
|
// return {
|
|||
|
|
// ...prestate,
|
|||
|
|
// 4: alertcount?.length,
|
|||
|
|
// };
|
|||
|
|
// });
|
|||
|
|
const alertcountl = alertcount?.length;
|
|||
|
|
|
|||
|
|
if (codes.length === 0) return;
|
|||
|
|
|
|||
|
|
var waitingcount = eqdata.filter((eqstatus) => {
|
|||
|
|
if (eqstatus.runningstatus === 1) {
|
|||
|
|
return eqstatus;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
var workingcount = eqdata.filter((eqstatus) => {
|
|||
|
|
if (eqstatus.runningstatus === 2) {
|
|||
|
|
return eqstatus;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
var stopcount = eqdata.filter((eqstatus) => {
|
|||
|
|
if (eqstatus.runningstatus === 3) {
|
|||
|
|
return eqstatus;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// setWaitingCount(waitingcount.length);
|
|||
|
|
// setWorkingCount(workingcount.length);
|
|||
|
|
// setStopCount(stopcount.length);
|
|||
|
|
// setStatuslist((prestate) => {
|
|||
|
|
// return {
|
|||
|
|
// ...prestate,
|
|||
|
|
// [eqstatus.runningstatus]: waitingcount.length,
|
|||
|
|
// };
|
|||
|
|
// });
|
|||
|
|
setStatuslist((prestate) => {
|
|||
|
|
return {
|
|||
|
|
...prestate,
|
|||
|
|
1: waitingcount.length,
|
|||
|
|
2: workingcount.length,
|
|||
|
|
3: stopcount.length,
|
|||
|
|
4: alertcountl,
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
var wclist = waitingcount.map((count) => count.code);
|
|||
|
|
var sclist = stopcount.map((count) => count.code);
|
|||
|
|
var rclist = workingcount.map((count) => count.code);
|
|||
|
|
var alertlist = alertcount?.map((count) => count.code);
|
|||
|
|
var nonestate = 0;
|
|||
|
|
eqdata
|
|||
|
|
.filter((item) => {
|
|||
|
|
if (codes.indexOf(item.code) > -1) {
|
|||
|
|
return item;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.map((eq) => {
|
|||
|
|
if (wclist.filter((a) => a === eq.code).length > 0) {
|
|||
|
|
eq.runningstatus = 1;
|
|||
|
|
// eq.updatestatus(1);
|
|||
|
|
} else if (sclist.filter((a) => a === eq.code).length > 0) {
|
|||
|
|
eq.runningstatus = 3;
|
|||
|
|
// eq.updatestatus(3);
|
|||
|
|
} else if (rclist.filter((a) => a === eq.code).length > 0) {
|
|||
|
|
eq.runningstatus = 2;
|
|||
|
|
// eq.updatestatus(2);
|
|||
|
|
} else if (alertlist.filter((a) => a === eq.code).length > 0) {
|
|||
|
|
eq.runningstatus = 4;
|
|||
|
|
// eq.updatestatus(4);
|
|||
|
|
} else {
|
|||
|
|
eq.runningstatus = 0;
|
|||
|
|
nonestate++;
|
|||
|
|
}
|
|||
|
|
// if (alertlist?.filter((a) => a === eq.code).length > 0) {
|
|||
|
|
// eq.runningstatus = 1;
|
|||
|
|
// // eq.updatestatus();
|
|||
|
|
// }
|
|||
|
|
});
|
|||
|
|
setStatuslist((prestate) => {
|
|||
|
|
return {
|
|||
|
|
...prestate,
|
|||
|
|
0: nonestate,
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function queryFields(data) {
|
|||
|
|
if (!data || data === undefined || data.length == 0) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// setLoading(true);
|
|||
|
|
data.filter((item) => {
|
|||
|
|
if (item.typeCode === _selectedtypecode && item.updateFields) {
|
|||
|
|
item.updateFields();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// console.log(typelist);
|
|||
|
|
refreshData(data);
|
|||
|
|
//获取绑定的工单
|
|||
|
|
// doPost(requests.fetchBindList.url, {})
|
|||
|
|
// .then((res) => res.json())
|
|||
|
|
// .then((data) => {
|
|||
|
|
// if (data.success) {
|
|||
|
|
// var bindlist = data.data;
|
|||
|
|
// var arr = bindlist.map((bind) => bind.workOrderCode);
|
|||
|
|
// const set = new Set(arr);
|
|||
|
|
// setProductCount(set.length)
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
// .catch((ex) => {
|
|||
|
|
// console.log(ex);
|
|||
|
|
// });
|
|||
|
|
//获取设备以及字段信息
|
|||
|
|
// queryStauts(codes, eqdata);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// doPost(requests.fetchEquipFields.url, codes)
|
|||
|
|
// .then((res) => res.json())
|
|||
|
|
// .then((data) => {
|
|||
|
|
// if (data.success) {
|
|||
|
|
// // var fileGroupIds = curdata.map((zz) => zz.fileGroupId);
|
|||
|
|
// //获取图片信息
|
|||
|
|
// var eqdata = data.data;
|
|||
|
|
// setEqlist(eqdata);
|
|||
|
|
// setAllEquipCount(eqdata.length);
|
|||
|
|
// queryStauts(codes, eqdata);
|
|||
|
|
|
|||
|
|
// if (isImgLoad) {
|
|||
|
|
// return;
|
|||
|
|
// }
|
|||
|
|
// eqdata.map((eq) => {
|
|||
|
|
// doPost(requests.fetchEquipImg.url + eq.fileGroupId, {
|
|||
|
|
// clientId: "pc",
|
|||
|
|
// })
|
|||
|
|
// .then((res) => res.json())
|
|||
|
|
// .then((data) => {
|
|||
|
|
// if (data.success && data.rows.length > 0) {
|
|||
|
|
// var img = imgUrl + data.rows[0].fileCode;
|
|||
|
|
// doPost(img, {})
|
|||
|
|
// .then((res) => res.blob())
|
|||
|
|
// .then((file) => {
|
|||
|
|
// var blobUrl = URL.createObjectURL(file);
|
|||
|
|
// eq.Img = blobUrl;
|
|||
|
|
// eq.updateImg();
|
|||
|
|
// })
|
|||
|
|
// .catch((ex) => {
|
|||
|
|
// console.log(ex);
|
|||
|
|
// });
|
|||
|
|
// } else {
|
|||
|
|
// // console.log(data);
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
// .catch((ex) => {
|
|||
|
|
// console.log(ex);
|
|||
|
|
// });
|
|||
|
|
// });
|
|||
|
|
// isImgLoad = true;
|
|||
|
|
// } else {
|
|||
|
|
// setEqlist([]);
|
|||
|
|
// setAllEquipCount(0);
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
// .catch((ex) => {
|
|||
|
|
// setEqlist([]);
|
|||
|
|
// console.log(ex);
|
|||
|
|
// });
|
|||
|
|
// }
|
|||
|
|
}
|
|||
|
|
//
|
|||
|
|
// export async function getStaticProps() {
|
|||
|
|
// const request = await fetch(
|
|||
|
|
// `&{
|
|||
|
|
// requests.fetchFactory.url
|
|||
|
|
// }`
|
|||
|
|
// )
|
|||
|
|
// .then((res) => res.json())
|
|||
|
|
// .catch((ex) => console.log(ex)); // then get result and pass it with result.json
|
|||
|
|
// return {
|
|||
|
|
// props: {
|
|||
|
|
// results: !request ? null : request.results,
|
|||
|
|
// },
|
|||
|
|
// };
|
|||
|
|
// }
|