asder

package.json

@@ -15,6 +15,7 @@
     "@react-three/postprocessing": "^2.6.2",
     "ahooks": "^3.7.1",
     "antd": "^4.23.1",
+    "dayjs": "^1.11.5",
     "echarts": "^5.3.3",
     "echarts-for-react": "^3.0.2",
     "react-custom-scrollbars": "^4.2.1",

src/global.less

@@ -27,6 +27,14 @@ html,
   align-items: center;
   font-size: 24px;
 }
+.time{
+  position: fixed;
+  right: 48px;
+  top: 24px;
+  z-index: 9999;
+  color: #ffffff;
+  font-size: 18px;
+}
 .bgtext {
   background-image: linear-gradient(0deg, #77cde2 0%, #ffffff 100%);
   background-clip: text;

src/layouts/index.jsx

-import { Link, Outlet } from 'umi';
-import styles from './index.less';
+import { Link, Outlet } from "umi";
+import { Tooltip } from "antd";
+import React, { useRef,useState } from "react";
+import { useWebSocket, useFullscreen, useThrottle, useInterval } from "ahooks";
+import {
+  ShrinkOutlined,
+  ArrowsAltOutlined,
+  FieldTimeOutlined,
+} from "@ant-design/icons";
+import dayjs from "dayjs";
+import styles from "./index.less";
 
 export default function Layout() {
+  const ref = useRef();
+  const [isFullscreen, { enterFullscreen, exitFullscreen, toggleFullscreen }] =
+    useFullscreen(ref);
+  const [time, settime] = useState(dayjs().format("YYYY-MM-DD HH:mm:ss"));
+
   return (
-    <div className={styles.navs}>
-      <div className='img' style={{ backgroundImage: `url(${require("@/assets/head.jpg")})` }}>
-        <span className='bgtext'>
-          智能车间看板
+    <div className={styles.navs} ref={ref}>
+      <div
+        className="img"
+        style={{ backgroundImage: `url(${require("@/assets/head.jpg")})` }}
+      >
+        <span className="bgtext">
+          智能车间看板{" "}
+          <Tooltip
+            placement="bottom"
+            title={isFullscreen ? "退出全屏" : "全屏"}
+          >
+            {isFullscreen ? (
+              <ShrinkOutlined
+                style={{
+                  color: "#77cde2",
+                  fontSize: 20,
+                  cursor: "pointer",
+                  paddingLeft: 12,
+                }}
+                onClick={() => {
+                  exitFullscreen();
+                }}
+              />
+            ) : (
+              <ArrowsAltOutlined
+                style={{
+                  color: "#77cde2",
+                  fontSize: 20,
+                  cursor: "pointer",
+                  paddingLeft: 12,
+                }}
+                onClick={() => {
+                  enterFullscreen();
+                }}
+              />
+            )}
+          </Tooltip>
         </span>
       </div>
-      <div style={{ flex: 1,overflow:"hidden"}}>
+      <div style={{ flex: 1, overflow: "hidden" }}>
         <Outlet />
       </div>
     </div>

src/pages/index.jsx

@@ -7,12 +7,18 @@ import * as echarts from "echarts";
 import { Button } from "antd";
 import "echarts/lib/component/graphic";
 import { ScrollBoard } from "@jiaminghi/data-view-react";
-import Threedire from "./threedire";
 import { doFetch } from "@/utils/doFetch";
+import Threedire from "./threedire";
+import dayjs from "dayjs";
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: "//at.alicdn.com/t/c/font_3649650_01jk3haanj83.js",
-});
+    scriptUrl: "//at.alicdn.com/t/c/font_3649650_01jk3haanj83.js",
+  }),
+  statuscolor = {
+    紧急: "#F31A1A",
+    重要: "#F6BD16",
+    普通: "#C7C8CA",
+  };
 
 const Item = ({ title, children }) => {
   return (
@@ -340,17 +346,20 @@ export default function HomePage() {
                 headerBGC: "tranparent",
                 oddRowBGC: "tranparent",
                 evenRowBGC: "tranparent",
-                header: ["告警时间", "严重程度", "设备名称", "告警信息"],
+                header: ["告警时间", "严重", "设备名称", "告警"],
                 data: rightone?.data?.map((it) => {
                   return [
-                    it?.alarmTime,
-                    it?.severityName,
-                    it?.deviceName,
-                    it?.name,
+                    dayjs(it?.alarmTime).format("MM-DD HH:mm"),
+                    `<span style="color:${statuscolor[it?.severityName]}">${
+                      it?.severityName
+                    }</span>`,
+                    `<a title="${it?.deviceName}" style="color:rgba(255,255,255,0.5)">${it?.deviceName}</a>`,
+                    `<a title="${it?.name}" style="color:rgba(255,255,255,0.5)">${it?.name}</a>`,
                   ];
                 }),
                 rowNum: 6,
-              }}
+                columnWidth: [104, 50],
+              }} //重要状态字体颜色：#F6BD16、紧急状态字体颜色：#F31A1A；普通状态字体颜色：#C7C8CA。
               style={{ width: "100%", height: "100%" }}
             />
           </div>

yarn.lock

@@ -2472,7 +2472,7 @@ date-fns@2.x:
   resolved "https://registry.npmmirror.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
   integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
 
-dayjs@1.x, dayjs@^1.9.1:
+dayjs@1.x, dayjs@^1.11.5, dayjs@^1.9.1:
   version "1.11.5"
   resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.5.tgz#00e8cc627f231f9499c19b38af49f56dc0ac5e93"
   integrity sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==