wer45

src/global.less

@@ -36,4 +36,47 @@ html,
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-
+.fixder{
+  position: fixed;
+  width: 400px;
+  right: 380px;
+  top:90px;
+  background-image: linear-gradient(
+    0deg,
+    rgba(52, 131, 242,0.6) 0%,
+    rgba(52, 131, 242,0.1) 100%
+  );
+  z-index: 999999;
+  border-radius: 8px;
+  padding: 12px;
+}
+.spread{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color:#ffffff;
+  border-bottom: rgba(216, 216, 216,0.4) solid 2px;
+  padding-bottom: 12px;
+  margin-bottom: 12px;
+}
+.spreaditem{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color:rgba(255, 255, 255,0.6);
+}
+.status{
+  position: fixed;
+  width: 209px;
+  left: 380px;
+  top:90px;
+  background-image: linear-gradient(
+    0deg,
+    rgba(52, 131, 242,0.6) 0%,
+    rgba(52, 131, 242,0.1) 100%
+  );
+  z-index: 999999;
+  border-radius: 8px;
+  padding: 12px;
+  color: #ffffff;
+}
\ No newline at end of file

src/pages/threedire.js → src/pages/threedire.jsx

@@ -11,8 +11,18 @@ import {
 } from "react-three-fiber";
 import { useRef, Suspense, useState, useEffect } from "react";
 import { OrbitControls } from "@react-three/drei";
-import { useWebSocket, useFullscreen, useThrottle, useRequest, useAsyncEffect } from "ahooks";
-import { ShrinkOutlined, ArrowsAltOutlined } from "@ant-design/icons";
+import {
+  useWebSocket,
+  useFullscreen,
+  useThrottle,
+  useRequest,
+  useAsyncEffect,
+} from "ahooks";
+import {
+  ShrinkOutlined,
+  CloseCircleFilled,
+  ExclamationCircleFilled,
+} from "@ant-design/icons";
 import { Tooltip, notification } from "antd";
 import Model from "./models/gltf";
 import Robot from "./models";
@@ -24,6 +34,15 @@ import {
   Outline,
 } from "@react-three/postprocessing";
 
+let infos = {
+  device_5: "能耗1(1-12设备)",
+  device_6: "能耗2(13-24设备)",
+  device_1: "数控车床T360-2",
+  device_2: "数控车床T360-1",
+  device_3: "立式智能加工中心M850b",
+  device_4: "立式智能加工中心M850",
+};
+
 const modelconfig = [
   {
     name: "0",
@@ -202,7 +221,24 @@ const modelconfig = [
     scale: 0.055,
   },
 ];
-
+const statusbar = {
+  1: {
+    color: "#6AE49B",
+    name: "运行",
+  },
+  2: {
+    color: "#4887E0",
+    name: "待机",
+  },
+  3: {
+    color: "#8D8D8D",
+    name: "关机",
+  },
+  4: {
+    color: "#F31A1A",
+    name: "故障",
+  },
+};
 const Floor = (props) => {
   return (
     <>
@@ -229,9 +265,14 @@ function Threedire() {
   const texture = useLoader(THREE.TextureLoader, require("@/assets/floor.png"));
   const [equpmentNo, setequpmentNo] = useState();
   const [config, setconfig] = useState(modelconfig);
+  const [info, setinfo] = useState({});
   const [modalprops, setmodalprops] = useState({
-    visible:false,
-    data:{}
+    visible: false,
+    data: {},
+  });
+  const [alarm, setalarm] = useState({
+    visible: false,
+    data: {},
   });
   const { data } = useRequest(
     async () => {
@@ -248,8 +289,6 @@ function Threedire() {
     }
   );
 
-
-
   useEffect(() => {
     if (data) {
       setconfig((s) => {
@@ -263,26 +302,124 @@ function Threedire() {
     }
   }, [data]);
 
-
-  useAsyncEffect(async ()=>{
-    if(equpmentNo){
-      let res = await doFetch({url:"/ngic-statistics/deviceStatus/queryEquipmentParam",params:{equipmentNo:equpmentNo}})
+  useAsyncEffect(async () => {
+    if (equpmentNo) {
+      let res = await doFetch({
+        url: "/ngic-statistics/deviceStatus/queryEquipmentParam",
+        params: { equipmentNo: equpmentNo },
+      });
 
       setmodalprops({
-        visible:true,
-        data:res?.data?.data
-      })
-      
-    }else{
+        visible: true,
+        data: res?.data?.data,
+      });
+    } else {
       setmodalprops({
-        visible:false,
-      })
+        visible: false,
+      });
     }
-  },[
-    equpmentNo
-  ])
+  }, [equpmentNo]);
 
+  const { sendMessage, lastMessage, readyState } = useWebSocket(
+    `ws://192.168.40.111:9400/ws/device/status`,
+    {
+      onOpen: () => {
+        console.log("readyState is ", readyState);
+      },
+      onClose: () => {
+        console.log("连接关闭");
+      },
+      onError: (e) => {
+        console.log(e);
+      },
+      onMessage: (message) => {
+        let uir = JSON.parse(message.data);
+        if(Object.values(uir).includes(0)){
+          setalarm(s=>({
+            ...s,
+            visible:true
+          }))
+        }
+        setinfo((s) => {
+          return {
+            ...s,
+            ...uir,
+          };
+        });
+      },
+    }
+  );
+
+  return (
+    <>
+      <div
+        className="status"
+        style={{
+          transform: alarm?.visible ? "translateY(-4px)" : `translateY(-800px)`,
+          transition: "all 0.4s",
+        }}
+      >
+        <p style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
+          <span>离线设备</span>
+          <CloseCircleFilled onClick={()=>{
+            setalarm(s=>({
+              ...s,
+              visible:false
+            }))
+          }}/>
+        </p>
+        {Object.keys(infos).map((it) => {
           return (
+            <div
+              key={it}
+              style={{ display: info[it] == 1 ? "none" : "block" }}
+            >
+              <ExclamationCircleFilled style={{ color: "red" }} />
+              <span> {infos[it]}</span>
+            </div>
+          );
+        })}
+      </div>
+
+      <div
+        className="fixder"
+        style={{
+          transform: modalprops?.visible
+            ? "translateY(-4px)"
+            : `translateY(-800px)`,
+          transition: "all 0.4s",
+        }}
+      >
+        <div className="spread">
+          <span>{modalprops?.data?.equipmentName}</span>
+          <span style={{ color: statusbar[config[equpmentNo]?.status]?.color }}>
+            {statusbar[config[equpmentNo]?.status]?.name}
+          </span>
+        </div>
+
+        <div
+          style={{
+            maxHeight: 300,
+            overflow: "auto",
+            borderBottom: "2px solid rgba(255,255,255,0.5)",
+            paddingBottom: 12,
+            marginBottom: 12,
+          }}
+        >
+          {modalprops?.data?.paramList?.map?.((it) => {
+            return (
+              <div className="spreaditem">
+                <span>参数:{it.name}</span>
+                <span>{it.value ?? "-"}</span>
+              </div>
+            );
+          })}
+        </div>
+        <div style={{ color: "rgba(255,255,255,0.6)" }}>
+          <span>告警信息: </span>
+          <span> {modalprops?.data?.alarm}</span>
+        </div>
+      </div>
       <Canvas
         shadows
         camera={{
@@ -314,7 +451,10 @@ function Threedire() {
         <Jixiebi />
 
         <Floor position={[2, -0.06, 0]} />
-      <gridHelper args={[60, 15, "#20293A", "#20293A"]} position={[2, 0, 0]} />
+        <gridHelper
+          args={[60, 15, "#20293A", "#20293A"]}
+          position={[2, 0, 0]}
+        />
         <Bulb position={[0, 6, 0]} />
         <OrbitControls />
         <>
@@ -365,6 +505,7 @@ function Threedire() {
           </mesh>
         </>
       </Canvas>
+    </>
   );
 }
 

src/utils/request.js

@@ -62,17 +62,15 @@ const request = extend({
 // request拦截器, 改变url 或 options.
 request.interceptors.request.use(async (url, options) => {
   let token =
-    localStorage.getItem("TOKEN_MES") ?? "9410b3f7de5d63f2be42d80ec8241d2d";
+    localStorage.getItem("TOKEN_MES") ?? "";
   if (token) {
     const headers =
       options.type == "form"
         ? {
-            token: token,
           }
         : {
             "Content-Type": "application/json",
             Accept: "application/json",
-            token: token,
           };
     return {
       url: url,