368 lines
11 KiB
JavaScript
368 lines
11 KiB
JavaScript
import react from "react";
|
||
import { useState } from "react";
|
||
import requests from "../../../utils/requests";
|
||
import { doPost } from "../../../utils/requests";
|
||
import {
|
||
PlayIcon,
|
||
StopIcon,
|
||
PauseIcon,
|
||
BellIcon,
|
||
ViewListIcon,
|
||
} from "@heroicons/react/outline";
|
||
|
||
import { BellIcon as BellIconS } from "@heroicons/react/solid";
|
||
import { PuzzleIcon } from "@heroicons/react/solid";
|
||
import VLabel from "../Header/VLabel";
|
||
import eqs from "../../../utils/eqs";
|
||
import { Tooltip } from 'antd';
|
||
const { eqstatus, orderstatus } = eqs;
|
||
|
||
function Card({
|
||
eq,
|
||
popHandle,
|
||
alartPopHandle,
|
||
classNamez,
|
||
typecode,
|
||
selectedTab,
|
||
alertData,
|
||
}) {
|
||
if (!eq) {
|
||
eq = {};
|
||
}
|
||
|
||
const [status, setStatus] = useState(eqstatus[0]);
|
||
const [alertcount, setAlertcount] = useState(0);
|
||
const [fieldValueMap, setFieldValueMap] = react.useState({});
|
||
const [imgUrl, setImgUrl] = react.useState(null);
|
||
// const [fields, setFields] = react.useState([]);
|
||
|
||
react.useEffect(() => {
|
||
if (eq.runningstatus === undefined) eq.runningstatus = 0;
|
||
setStatus(eqstatus.filter((item) => item.key === eq.runningstatus)[0]);
|
||
// console.log(eq.code,eq.runningstatus)
|
||
}, [eq.runningstatus]);
|
||
// eq.updatestatus=(statuscur)=>{
|
||
// setStatus(eqstatus.filter((item) => item.key === statuscur)[0]);
|
||
// }
|
||
react.useEffect(() => {
|
||
//updatefields();
|
||
// if (eq.operationCode === typecode) {
|
||
// setFields(eq.bmIotEquipmentRelationshipList);
|
||
// }
|
||
async function async1() {
|
||
if (typecode === "1002") {
|
||
let item = eq?.bmIotEquipmentRelationshipList.filter(
|
||
(x) => x.iotField.indexOf("IoStatus") > -1
|
||
);
|
||
if (item && item.length > 0) {
|
||
eq.runningstatus =
|
||
item[0].iotFieldValue || item[0].iotFieldValue === 1 ? 2 : 4;
|
||
}
|
||
}
|
||
}
|
||
async1();
|
||
}, [typecode]);
|
||
|
||
react.useEffect(() => {
|
||
if (alertData && alertData.length > 0) {
|
||
eq.alert = alertData.filter((al) => {
|
||
if (al.equipCode === eq.code) {
|
||
return al;
|
||
}
|
||
});
|
||
if(eq.alert.length>0)
|
||
{
|
||
let alertcout = eq?.alert?.filter((aa) => {
|
||
if (!aa?.eliminationTime) {
|
||
return aa;
|
||
}
|
||
});
|
||
eq.alertcount = alertcout.length;
|
||
setAlertcount(alertcout.length);
|
||
}
|
||
}
|
||
}, [alertData, selectedTab]);
|
||
// react.useEffect(() => {
|
||
// if(!eq.alertcount){
|
||
// eq.alertcount=0;
|
||
// eq.alert= [];
|
||
// }
|
||
// else{
|
||
// setAlertcount(eq.alertcount);
|
||
// }
|
||
// }, [eq.alertcount, selectedTab]);
|
||
react.useEffect(() => {
|
||
}, [eq.alert]);
|
||
react.useEffect(() => {
|
||
if (eq.Img) {
|
||
setImgUrl(eq.Img);
|
||
}
|
||
}, [eq.Img]);
|
||
react.useEffect(() => {}, [eq.runningstatus]);
|
||
react.useEffect(() => {
|
||
// setTimeout(() => {
|
||
// setFields(eq.bmIotEquipmentRelationshipList);
|
||
// }, 100);
|
||
}, [eq.bmIotEquipmentRelationshipList]);
|
||
eq.updateFields = () => {
|
||
// updatefields();
|
||
};
|
||
|
||
let updatefields = () => {
|
||
if (!eq?.bmIotEquipmentRelationshipList) {
|
||
if (!eq.code) {
|
||
return;
|
||
}
|
||
doPost(requests.fetchEquipFields.url, [eq.code])
|
||
.then((res) => res.json())
|
||
.then((data) => {
|
||
if (data.success) {
|
||
// var fileGroupIds = curdata.map((zz) => zz.fileGroupId);
|
||
//获取图片信息
|
||
if (data.data.length > 0) {
|
||
var eqcur = data.data[0][0];
|
||
eq.bmIotEquipmentRelationshipList =
|
||
eqcur.bmIotEquipmentRelationshipList;
|
||
updateonlyfields();
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
updateonlyfields();
|
||
}
|
||
};
|
||
|
||
let updateonlyfields = () => {
|
||
//接口请求物联网influxdb查询服务
|
||
doPost(requests.fetchLastFieldsValue.url, {
|
||
equipCode: eq.code,
|
||
fields: eq.bmIotEquipmentRelationshipList
|
||
.filter((re) => {
|
||
if (re.status && !re.iotIsalarm) {
|
||
return re;
|
||
}
|
||
})
|
||
.map((field) => field.iotField),
|
||
})
|
||
.then((res) => res.json())
|
||
.then((data) => {
|
||
if (data.success) {
|
||
if (data.data !== null && data.data !== []) {
|
||
var _fieldValueMap = data.data[0];
|
||
if (!_fieldValueMap) return;
|
||
eq.bmIotEquipmentRelationshipList.map((field) => {
|
||
field.iotFieldValue = !(field.iotField in _fieldValueMap)
|
||
? null
|
||
: _fieldValueMap[field.iotField];
|
||
if (field.iotIsalarm) {
|
||
if (!field.iotFieldValue) field.iotFieldValue = 0;
|
||
if (field.iotField.indexOf("IoStatus") > -1) {
|
||
field.iotFieldValue =
|
||
field.iotFieldValue === 1 ? true : false;
|
||
} else {
|
||
field.iotFieldValue =
|
||
field.iotFieldValue === 0 ? false : true;
|
||
}
|
||
}
|
||
});
|
||
|
||
if (eq.bmIotEquipmentRelationshipList) {
|
||
var _alertcount = eq.bmIotEquipmentRelationshipList.filter(
|
||
(re) => {
|
||
if (re.iotIsalarm && re.status && re.iotFieldValue) {
|
||
return re;
|
||
}
|
||
}
|
||
).length;
|
||
// setAlertcount(_alertcount);
|
||
setFieldValueMap(_fieldValueMap);
|
||
}
|
||
}
|
||
} else {
|
||
// console.log(data);
|
||
}
|
||
})
|
||
.catch((ex) => {
|
||
console.log(ex);
|
||
});
|
||
};
|
||
react.useEffect(() => {
|
||
if (eq.code === null) return;
|
||
//updatefields();
|
||
}, [eq]);
|
||
react.useEffect(() => {
|
||
//updatefields();
|
||
}, [eq.iotFieldValue]);
|
||
let togglePop = () => {
|
||
popHandle(eq);
|
||
// setState((prevState) => ({
|
||
// ...prevState,
|
||
// }));
|
||
};
|
||
let alartPop = () => {
|
||
alartPopHandle(eq);
|
||
// setState((prevState) => ({
|
||
// ...prevState,
|
||
// }));
|
||
};
|
||
return (
|
||
<div className={` bg-white h-fit rounded w-64 `}>
|
||
{/* 第一行 */}
|
||
<div className={`group flex flex-raw h-6 rounded-t ${status.bg}`}>
|
||
<div
|
||
className={`flex-0 inline-flex items-center text-white justify-center`}
|
||
>
|
||
{/* <div className="w-2"></div> {orderstatus[0].title} */}
|
||
<div className="w-2"></div>
|
||
<p className="truncate w-28 text-left cardP" alt={eq.code}>
|
||
{" "}
|
||
{eq.code}
|
||
</p>
|
||
{/* {eq?.typeName} */}
|
||
</div>
|
||
<div className="flex-auto"></div>
|
||
<div className=" flex-0 inline-flex items-center text-white justify-center ">
|
||
<p className="truncate w-28 text-right cardP" alt={eq.name}>
|
||
{" "}
|
||
{eq.name}
|
||
</p>
|
||
<div className="w-2"></div>
|
||
</div>
|
||
</div>
|
||
<div className="relative flex">
|
||
{!imgUrl ? (
|
||
<img
|
||
src={`../img/eqimg.jpeg`}
|
||
alt={eq.name}
|
||
className=" w-full h-20 bg-gray-500 "
|
||
/>
|
||
) : (
|
||
// eslint-disable-next-line
|
||
<img
|
||
src={imgUrl}
|
||
alt={eq.name}
|
||
className=" w-full h-20 bg-gray-500 "
|
||
/>
|
||
)}
|
||
<Tooltip
|
||
placement="top"
|
||
title={eq?.bmIotEquipmentRelationshipList?.length>0?eq?.bmIotEquipmentRelationshipList[0].updateTime:""}
|
||
mouseEnterDelay={1}
|
||
>
|
||
<button
|
||
className={` absolute top-1 left-2 inline-block px-1 text-xs ${status.bg}-txt text-white ${status.bg}-border border rounded-sm`}
|
||
>
|
||
{status.title}
|
||
{status.key > 0 ? "中" : ""}
|
||
</button>
|
||
</Tooltip>
|
||
</div>
|
||
{/* 第二行 */}
|
||
<div className="border-l border-r text-left pl-4 py-2 border-gray-200 flex flex-col h-48">
|
||
{!eq?.bmIotEquipmentRelationshipList ? (
|
||
<></>
|
||
) : (
|
||
eq?.bmIotEquipmentRelationshipList
|
||
.filter((re) => {
|
||
if (re.iotIsMainField && re.status) {
|
||
return re;
|
||
}
|
||
})
|
||
.sort((a, b) =>
|
||
parseInt(a.fieldSort) > parseInt(b.fieldSort) ? 1 : -1
|
||
)
|
||
.map((re, idx) => {
|
||
return (
|
||
<div className={` flex flex-row mb-1 mr-3 `} key={idx}>
|
||
<VLabel>{re.iotFieldDescribe}：</VLabel>{" "}
|
||
<div className="flex-auto"></div>
|
||
<Tooltip
|
||
placement="top"
|
||
title={re.iotFieldValueTime}
|
||
mouseEnterDelay={1}
|
||
>
|
||
{!fieldValueMap ? (
|
||
""
|
||
) : (
|
||
<label
|
||
className={` text-right ${classNamez} text-[#297FC8]`}
|
||
>
|
||
{typeof re.iotFieldValue === "boolean"
|
||
? String(re.iotFieldValue)
|
||
: re.iotFieldValue}
|
||
</label>
|
||
)}
|
||
</Tooltip>
|
||
</div>
|
||
);
|
||
})
|
||
)}
|
||
</div>
|
||
|
||
{/* 第三行 */}
|
||
<div className=" border group flex items-center flex-raw h-12 rounded-b border-gray-200 px-1">
|
||
<div className=" flex flex-row flex-auto w-12 justify-center cursor-pointer">
|
||
{status.key === 2 ? (
|
||
<PlayIcon className={` flex-0 h-5 w-5 mr-1 ${status.text}`} />
|
||
) : status.key === 1 ? (
|
||
<PauseIcon className={` flex-0 h-5 w-5 mr-1 ${status.text}`} />
|
||
) : status.key === 3 ? (
|
||
<StopIcon className={` flex-0 h-5 w-5 mr-1 ${status.text}`} />
|
||
) : (
|
||
<BellIcon className={` flex-0 h-5 w-5 mr-1 ${status.text}`} />
|
||
)}
|
||
<div className=" flex-0 inline-flex items-center ml-1 text-black justify-center ">
|
||
{status.title}
|
||
</div>
|
||
</div>
|
||
<div className="border-l border-gray-200 h-full flex-0"></div>
|
||
<div
|
||
onClick={alartPop}
|
||
className=" flex items-center justify-center flex-auto w-12 border-gray-200 cursor-pointer"
|
||
>
|
||
{/* {alertcount > 0 ? (
|
||
<span className=" inline-flex rounded-full text-red-500 items-center justify-center ">
|
||
{alertcount}
|
||
</span>
|
||
) : */}
|
||
|
||
<div className="relative inline-flex">
|
||
{alertcount > 0 ? (
|
||
<BellIconS
|
||
className={`flex-0 h-5 w-5 mr-1 text-red-500 `}
|
||
></BellIconS>
|
||
) : (
|
||
<BellIcon className={`flex-0 h-5 w-5 mr-1 `}></BellIcon>
|
||
)}
|
||
{alertcount > 0 ? (
|
||
<span className="text-red-500">{alertcount}</span>
|
||
) : (
|
||
``
|
||
)}
|
||
</div>
|
||
|
||
<div
|
||
className={`flex-0 inline-flex items-center ml-1 ${
|
||
alertcount > 0 ? "text-red-500" : "text-black"
|
||
} justify-center`}
|
||
>
|
||
告警
|
||
</div>
|
||
</div>
|
||
<div className="border-l border-gray-200 h-full flex-0"></div>
|
||
|
||
<div
|
||
onClick={togglePop}
|
||
className=" flex flex-row items-center justify-center flex-auto w-12 border-gray-200 cursor-pointer"
|
||
>
|
||
{ViewListIcon && <ViewListIcon className=" flex-0 h-5 w-5 mr-1 " />}
|
||
<div className=" flex-0 inline-flex items-center ml-1 text-black justify-center ">
|
||
其他
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
export default Card;
|