Skip to content

M
model_line
Commit 42dcffcf authored by wuhao's avatar wuhao 🎯
Browse files
Options

wer45

parent c1f668b0
Hide whitespace changes
Inline Side-by-side
Showing with 557 additions and 4 deletions
src/global.less
View file @ 42dcffcf
...@@ -36,4 +36,47 @@ html, ...@@ -36,4 +36,47 @@ html,
background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; -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
View file @ 42dcffcf
...@@ -11,8 +11,18 @@ import { ...@@ -11,8 +11,18 @@ import {
} from "react-three-fiber"; } from "react-three-fiber";
import { useRef, Suspense, useState, useEffect } from "react"; import { useRef, Suspense, useState, useEffect } from "react";
import { OrbitControls } from "@react-three/drei"; import { OrbitControls } from "@react-three/drei";
import { useWebSocket, useFullscreen, useThrottle, useRequest, useAsyncEffect } from "ahooks"; import {
import { ShrinkOutlined, ArrowsAltOutlined } from "@ant-design/icons"; useWebSocket,
useFullscreen,
useThrottle,
useRequest,
useAsyncEffect,
} from "ahooks";
import {
ShrinkOutlined,
CloseCircleFilled,
ExclamationCircleFilled,
} from "@ant-design/icons";
import { Tooltip, notification } from "antd"; import { Tooltip, notification } from "antd";
import Model from "./models/gltf"; import Model from "./models/gltf";
import Robot from "./models"; import Robot from "./models";
...@@ -24,6 +34,15 @@ import { ...@@ -24,6 +34,15 @@ import {
Outline, Outline,
} from "@react-three/postprocessing"; } 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 = [ const modelconfig = [
{ {
name: "0", name: "0",
...@@ -202,7 +221,24 @@ const modelconfig = [ ...@@ -202,7 +221,24 @@ const modelconfig = [
scale: 0.055, scale: 0.055,
}, },
]; ];
const statusbar = {
1: {
color: "#6AE49B",
name: "运行",
},
2: {
color: "#4887E0",
name: "待机",
},
3: {
color: "#8D8D8D",
name: "关机",
},
4: {
color: "#F31A1A",
name: "故障",
},
};
const Floor = (props) => { const Floor = (props) => {
return ( return (
<> <>
...@@ -229,9 +265,14 @@ function Threedire() { ...@@ -229,9 +265,14 @@ function Threedire() {
const texture = useLoader(THREE.TextureLoader, require("@/assets/floor.png")); const texture = useLoader(THREE.TextureLoader, require("@/assets/floor.png"));
const [equpmentNo, setequpmentNo] = useState(); const [equpmentNo, setequpmentNo] = useState();
const [config, setconfig] = useState(modelconfig); const [config, setconfig] = useState(modelconfig);
const [info, setinfo] = useState({});
const [modalprops, setmodalprops] = useState({ const [modalprops, setmodalprops] = useState({
visible:false, visible: false,
data:{} data: {},
});
const [alarm, setalarm] = useState({
visible: false,
data: {},
}); });
const { data } = useRequest( const { data } = useRequest(
async () => { async () => {
...@@ -248,8 +289,6 @@ function Threedire() { ...@@ -248,8 +289,6 @@ function Threedire() {
} }
); );
useEffect(() => { useEffect(() => {
if (data) { if (data) {
setconfig((s) => { setconfig((s) => {
...@@ -263,108 +302,210 @@ function Threedire() { ...@@ -263,108 +302,210 @@ function Threedire() {
} }
}, [data]); }, [data]);
useAsyncEffect(async () => {
useAsyncEffect(async ()=>{ if (equpmentNo) {
if(equpmentNo){ let res = await doFetch({
let res = await doFetch({url:"/ngic-statistics/deviceStatus/queryEquipmentParam",params:{equipmentNo:equpmentNo}}) url: "/ngic-statistics/deviceStatus/queryEquipmentParam",
params: { equipmentNo: equpmentNo },
});
setmodalprops({ setmodalprops({
visible:true, visible: true,
data:res?.data?.data data: res?.data?.data,
}) });
} else {
}else{
setmodalprops({ setmodalprops({
visible:false, visible: false,
}) });
}
}, [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,
};
});
},
} }
},[ );
equpmentNo
])
return ( return (
<Canvas <>
shadows <div
camera={{ className="status"
position: [0, 30, 20], style={{
}} transform: alarm?.visible ? "translateY(-4px)" : `translateY(-800px)`,
> transition: "all 0.4s",
<Selection> }}
<EffectComposer multisampling={8} autoClear={false}> >
<Outline <p style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
blur <span>离线设备</span>
visibleEdgeColor="white" <CloseCircleFilled onClick={()=>{
edgeStrength={20} setalarm(s=>({
width={5000} ...s,
/> visible:false
</EffectComposer> }))
{config?.map((it, i) => { }}/>
</p>
{Object.keys(infos).map((it) => {
return ( return (
<Model <div
key={it.name} key={it}
{...it} style={{ display: info[it] == 1 ? "none" : "block" }}
setequpmentNo={setequpmentNo} >
equpmentNo={equpmentNo} <ExclamationCircleFilled style={{ color: "red" }} />
/> <span> {infos[it]}</span>
</div>
); );
})} })}
</Selection> </div>
{/* <Robot /> */} <div
<Jixiebi /> 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>
<Floor position={[2, -0.06, 0]} /> <div
<gridHelper args={[60, 15, "#20293A", "#20293A"]} position={[2, 0, 0]} /> style={{
<Bulb position={[0, 6, 0]} /> maxHeight: 300,
<OrbitControls /> overflow: "auto",
<> borderBottom: "2px solid rgba(255,255,255,0.5)",
<mesh position={[7.5, 0, 1.4]} receiveShadow> paddingBottom: 12,
<boxBufferGeometry args={[45, 0.1, 4]} /> marginBottom: 12,
<meshPhysicalMaterial }}
color={"green"} >
roughness={0.5} {modalprops?.data?.paramList?.map?.((it) => {
transmission={0.5} return (
/> <div className="spreaditem">
</mesh> <span>参数:{it.name}</span>
<mesh position={[6, 0, 15]} receiveShadow> <span>{it.value ?? "-"}</span>
<boxBufferGeometry args={[4, 0.1, 30]} /> </div>
<meshPhysicalMaterial );
color={"green"} })}
roughness={0.5} </div>
transmission={0.5} <div style={{ color: "rgba(255,255,255,0.6)" }}>
/> <span>告警信息: </span>
</mesh> <span> {modalprops?.data?.alarm}</span>
<mesh position={[-15, 0, 0]} receiveShadow> </div>
<boxBufferGeometry args={[4, 0.1, 60]} /> </div>
<meshPhysicalMaterial <Canvas
color={"green"} shadows
roughness={0.5} camera={{
transmission={0.5} position: [0, 30, 20],
/> }}
</mesh> >
<mesh position={[28, 0, 0]} receiveShadow> <Selection>
<boxBufferGeometry args={[4, 0.1, 60]} /> <EffectComposer multisampling={8} autoClear={false}>
<meshPhysicalMaterial <Outline
color={"green"} blur
roughness={0.5} visibleEdgeColor="white"
transmission={0.5} edgeStrength={20}
/> width={5000}
</mesh> />
</EffectComposer>
{config?.map((it, i) => {
return (
<Model
key={it.name}
{...it}
setequpmentNo={setequpmentNo}
equpmentNo={equpmentNo}
/>
);
})}
</Selection>
{/* <Robot /> */}
<Jixiebi />
<Floor position={[2, -0.06, 0]} />
<gridHelper
args={[60, 15, "#20293A", "#20293A"]}
position={[2, 0, 0]}
/>
<Bulb position={[0, 6, 0]} />
<OrbitControls />
<>
<mesh position={[7.5, 0, 1.4]} receiveShadow>
<boxBufferGeometry args={[45, 0.1, 4]} />
<meshPhysicalMaterial
color={"green"}
roughness={0.5}
transmission={0.5}
/>
</mesh>
<mesh position={[6, 0, 15]} receiveShadow>
<boxBufferGeometry args={[4, 0.1, 30]} />
<meshPhysicalMaterial
color={"green"}
roughness={0.5}
transmission={0.5}
/>
</mesh>
<mesh position={[-15, 0, 0]} receiveShadow>
<boxBufferGeometry args={[4, 0.1, 60]} />
<meshPhysicalMaterial
color={"green"}
roughness={0.5}
transmission={0.5}
/>
</mesh>
<mesh position={[28, 0, 0]} receiveShadow>
<boxBufferGeometry args={[4, 0.1, 60]} />
<meshPhysicalMaterial
color={"green"}
roughness={0.5}
transmission={0.5}
/>
</mesh>
<mesh position={[-7, 0, -6]} receiveShadow> <mesh position={[-7, 0, -6]} receiveShadow>
<boxBufferGeometry args={[8, 0.1, 8]} /> <boxBufferGeometry args={[8, 0.1, 8]} />
<meshPhysicalMaterial color={"grey"} map={texture} roughness={1} /> <meshPhysicalMaterial color={"grey"} map={texture} roughness={1} />
</mesh> </mesh>
<mesh position={[-7, 0, -15.6]} receiveShadow> <mesh position={[-7, 0, -15.6]} receiveShadow>
<boxBufferGeometry args={[8, 0.1, 8]} /> <boxBufferGeometry args={[8, 0.1, 8]} />
<meshPhysicalMaterial color={"grey"} map={texture} roughness={1} /> <meshPhysicalMaterial color={"grey"} map={texture} roughness={1} />
</mesh> </mesh>
<mesh position={[3, 0, -10.75]} receiveShadow> <mesh position={[3, 0, -10.75]} receiveShadow>
<boxBufferGeometry args={[9, 0.1, 17.75]} /> <boxBufferGeometry args={[9, 0.1, 17.75]} />
<meshPhysicalMaterial color={"grey"} map={texture} roughness={1} /> <meshPhysicalMaterial color={"grey"} map={texture} roughness={1} />
</mesh> </mesh>
</> </>
</Canvas> </Canvas>
</>
); );
} }
......
src/utils/request.js
View file @ 42dcffcf
...@@ -62,17 +62,15 @@ const request = extend({ ...@@ -62,17 +62,15 @@ const request = extend({
// request拦截器, 改变url 或 options. // request拦截器, 改变url 或 options.
request.interceptors.request.use(async (url, options) => { request.interceptors.request.use(async (url, options) => {
let token = let token =
localStorage.getItem("TOKEN_MES") ?? "9410b3f7de5d63f2be42d80ec8241d2d"; localStorage.getItem("TOKEN_MES") ?? "";
if (token) { if (token) {
const headers = const headers =
options.type == "form" options.type == "form"
? { ? {
token: token,
} }
: { : {
"Content-Type": "application/json", "Content-Type": "application/json",
Accept: "application/json", Accept: "application/json",
token: token,
}; };
return { return {
url: url, url: url,
......
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