Commit c1f668b0 authored by wuhao's avatar wuhao 🎯

asder

parent 249425a5
ssh root@192.168.40.50 "rm -rf /qjsfx/web/dashboard"
echo 'deleted /qjsfx/web/dashboard'
scp -r ./dashboard root@192.168.40.50:/qjsfx/web/
echo 'sync complete'
...@@ -45,7 +45,79 @@ export default function HomePage() { ...@@ -45,7 +45,79 @@ export default function HomePage() {
refreshDeps: [], refreshDeps: [],
} }
); );
const lefttwo = useRequest(
async () => {
//format result
let res = await doFetch({
url: "/ngic-statistics/producePoolDay/queryShopBoard",
params: {},
}),
result = res?.data?.dataList ?? [];
return result;
},
{
refreshDeps: [],
}
);
const leftthree = useRequest(
async () => {
//format result
let res = await doFetch({
url: "/ngic-statistics/deviceStatus/shopUsedRate",
params: {},
}),
result = res?.data?.dataList ?? [];
return result;
},
{
refreshDeps: [],
}
);
const rightone = useRequest(
async () => {
//format result
let res = await doFetch({
url: "/ngic-statistics/alarmPoolDay/queryAlarmList",
params: {},
}),
result = res?.data?.dataList ?? [];
return result;
},
{
refreshDeps: [],
}
);
const righttwo = useRequest(
async () => {
//format result
let res = await doFetch({
url: "/ngic-statistics/electricityPoolDay/queryShopBoard",
params: {},
}),
result = res?.data?.dataList ?? [];
return result;
},
{
refreshDeps: [],
}
);
const rightthree = useRequest(
async () => {
//format result
let res = await doFetch({
url: "/ngic-statistics/alarmPoolDay/queryShopBoard",
params: {},
}),
result = res?.data?.dataList ?? [];
return result;
},
{
refreshDeps: [],
}
);
return ( return (
<div className={styles?.container}> <div className={styles?.container}>
...@@ -68,7 +140,7 @@ export default function HomePage() { ...@@ -68,7 +140,7 @@ export default function HomePage() {
tooltip: { tooltip: {
trigger: "item", trigger: "item",
}, },
color:["#6AE49B","#4887E0","#8D8D8D","#F31A1A"], color: ["#6AE49B", "#4887E0", "#8D8D8D", "#F31A1A"],
series: [ series: [
{ {
name: "设备状态", name: "设备状态",
...@@ -95,28 +167,7 @@ export default function HomePage() { ...@@ -95,28 +167,7 @@ export default function HomePage() {
style={{ width: "100%", height: "100%", marginTop: -28 }} style={{ width: "100%", height: "100%", marginTop: -28 }}
option={{ option={{
xAxis: { xAxis: {
data: [ data: lefttwo?.data?.map((it) => it.key),
"点",
"击",
"柱",
"子",
"或",
"者",
"两",
"指",
"在",
"触",
"屏",
"上",
"滑",
"动",
"能",
"够",
"自",
"动",
"缩",
"放",
],
splitLine: { splitLine: {
show: false, show: false,
}, },
...@@ -186,10 +237,7 @@ export default function HomePage() { ...@@ -186,10 +237,7 @@ export default function HomePage() {
// ]), // ]),
// }, // },
// }, // },
data: [ data: lefttwo?.data?.map((it) => it.value),
220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149,
210, 122, 133, 334, 198, 123, 125, 220,
],
}, },
], ],
}} }}
...@@ -208,7 +256,7 @@ export default function HomePage() { ...@@ -208,7 +256,7 @@ export default function HomePage() {
}, },
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], data: leftthree?.data?.map?.((it) => it.name),
}, },
grid: { grid: {
top: "58px", top: "58px",
...@@ -233,7 +281,7 @@ export default function HomePage() { ...@@ -233,7 +281,7 @@ export default function HomePage() {
}, },
series: [ series: [
{ {
data: [820, 932, 901, 934, 1290, 1330, 1320], data: leftthree?.data?.map?.((it) => it.value),
type: "line", type: "line",
lineStyle: { lineStyle: {
color: "rgba(72, 135, 244,0.4)", color: "rgba(72, 135, 244,0.4)",
...@@ -274,18 +322,14 @@ export default function HomePage() { ...@@ -274,18 +322,14 @@ export default function HomePage() {
oddRowBGC: "tranparent", oddRowBGC: "tranparent",
evenRowBGC: "tranparent", evenRowBGC: "tranparent",
header: ["告警时间", "严重程度", "设备名称", "告警信息"], header: ["告警时间", "严重程度", "设备名称", "告警信息"],
data: [ data: rightone?.data?.map(it=>{
["行1列1", "行1列2", "行1列3", "行1列3"], return [
["行2列1", "行2列2", "行2列3", "行1列3"], it?.alarmTime,
["行3列1", "行3列2", "行3列3", "行1列3"], it?.severityName,
["行4列1", "行4列2", "行4列3", "行1列3"], it?.deviceName,
["行5列1", "行5列2", "行5列3", "行1列3"], it?.name
["行6列1", "行6列2", "行6列3", "行1列3"], ]
["行7列1", "行7列2", "行7列3", "行1列3"], }),
["行8列1", "行8列2", "行8列3", "行1列3"],
["行9列1", "行9列2", "行9列3", "行1列3"],
["行10列1", "行10列2", "行10列3", "行1列3"],
],
rowNum: 6, rowNum: 6,
}} }}
style={{ width: "100%", height: "100%" }} style={{ width: "100%", height: "100%" }}
...@@ -297,28 +341,7 @@ export default function HomePage() { ...@@ -297,28 +341,7 @@ export default function HomePage() {
style={{ width: "100%", height: "100%", marginTop: -28 }} style={{ width: "100%", height: "100%", marginTop: -28 }}
option={{ option={{
xAxis: { xAxis: {
data: [ data: righttwo?.data?.map((it) => it.key),
"点",
"击",
"柱",
"子",
"或",
"者",
"两",
"指",
"在",
"触",
"屏",
"上",
"滑",
"动",
"能",
"够",
"自",
"动",
"缩",
"放",
],
splitLine: { splitLine: {
show: false, show: false,
}, },
...@@ -386,10 +409,7 @@ export default function HomePage() { ...@@ -386,10 +409,7 @@ export default function HomePage() {
// ]), // ]),
// }, // },
// }, // },
data: [ data: righttwo?.data?.map((it) => it.value),
220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149,
210, 122, 133, 334, 198, 123, 125, 220,
],
}, },
], ],
}} }}
...@@ -408,7 +428,7 @@ export default function HomePage() { ...@@ -408,7 +428,7 @@ export default function HomePage() {
}, },
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], data: rightthree?.data?.map?.((it) => it.key),
}, },
grid: { grid: {
top: "58px", top: "58px",
...@@ -433,7 +453,7 @@ export default function HomePage() { ...@@ -433,7 +453,7 @@ export default function HomePage() {
}, },
series: [ series: [
{ {
data: [820, 932, 901, 934, 1290, 1330, 10], data: rightthree?.data?.map?.((it) => it.value),
type: "line", type: "line",
lineStyle: { lineStyle: {
color: "rgba(243, 26, 25,0.4)", color: "rgba(243, 26, 25,0.4)",
......
import ReactDOM from "react-dom"
import React, { useRef, useEffect, useMemo, useState, useContext, useCallback } from "react"
import { Vector2 } from "three"
import { Canvas, extend, useFrame, useThree } from "react-three-fiber"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer"
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass"
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass"
import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass"
import { FXAAShader } from "three/examples/jsm/shaders/FXAAShader"
extend({ OrbitControls, EffectComposer, RenderPass, OutlinePass, ShaderPass })
const context = React.createContext()
const Outline = ({ children }) => {
const { gl, scene, camera, size } = useThree();
const composer = useRef();
const [hovered, set] = useState([])
const aspect = useMemo(() => new Vector2(size.width, size.height), [size])
useEffect(() => composer.current.setSize(size.width, size.height), [size])
useFrame(() => composer.current.render(), 1)
return (
<context.Provider value={set}>
{children}
<effectComposer ref={composer} args={[gl]}>
<renderPass attachArray="passes" args={[scene, camera]} />
<outlinePass
attachArray="passes"
args={[aspect, scene, camera]}
selectedObjects={hovered}
visibleEdgeColor="white"
edgeStrength={5}
edgeThickness={1}
/>
<shaderPass attachArray="passes" args={[FXAAShader]} uniforms-resolution-value={[1 / size.width, 1 / size.height]} />
</effectComposer>
</context.Provider>
)
}
export default Outline
\ No newline at end of file
import * as THREE from "three";
import { Canvas } from "@react-three/fiber";
import { useLoader } from "@react-three/fiber";
import React, { useMemo, Suspense } from "react";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { useGLTF } from "@react-three/drei";
const statusbar = [" ","#6AE49B","#4887E0","#8D8D8D","#F31A1A"]; import React, { memo, Suspense } from "react";
import { useGLTF } from "@react-three/drei";
import { Select } from "@react-three/postprocessing";
const statusbar = [" ", "#6AE49B", "#4887E0", "#8D8D8D", "#F31A1A"];
const Mesh = (props) => { const Mesh = (props) => {
let { name, path, position, status, scale } = props; let { name, equpmentNo, setequpmentNo, status, scale } = props;
const { nodes } = useGLTF(props.path); const { nodes } = useGLTF(props.path);
return ( return (
<group {...props} dispose={null}> <Select enabled={equpmentNo == name}>
{Object.keys(nodes).map((it, i) => { <group
return ( {...props}
<mesh dispose={null}
geometry={nodes[it].geometry} onClick={() => {
scale={scale??0.002} if(equpmentNo==name){
key={it} setequpmentNo(null);
> }else{
<meshPhysicalMaterial setequpmentNo(name);
color={statusbar[status]} }
//transparent={true} //是否支持透明度 }}
// opacity={0.5} //透明度 >
//visible={true}//是否可见 {Object.keys(nodes).map((it, i) => {
wireframe={false} //线框化 return (
//metalness={1} //金属性贴图 <mesh geometry={nodes[it].geometry} scale={scale ?? 0.002} key={it}>
roughness={0} //粗糙程度 越精细镜面效果越强 <meshPhysicalMaterial
clearcoat={1} // 透明漆 罩光漆 color={statusbar[status]}
transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光 //transparent={true} //是否支持透明度
// reflectivity={1} //光的 反射率 // opacity={0.5} //透明度
/> //visible={true}//是否可见
</mesh> wireframe={equpmentNo == name} //线框化
); //metalness={1} //金属性贴图
})} roughness={0} //粗糙程度 越精细镜面效果越强
</group> clearcoat={1} // 透明漆 罩光漆
transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
// reflectivity={1} //光的 反射率
/>
</mesh>
);
})}
</group>
</Select>
); );
}; };
export default function Model(props) { function Model(props) {
return ( return (
<Suspense fallback={null}> <Suspense fallback={null}>
<Mesh <Mesh
...@@ -55,3 +60,5 @@ const arr = ["M8", "T360", "M850"].map((it) => { ...@@ -55,3 +60,5 @@ const arr = ["M8", "T360", "M850"].map((it) => {
}); });
useGLTF.preload(arr); useGLTF.preload(arr);
export default memo(Model)
\ No newline at end of file
import * as THREE from "three"; import * as THREE from "three";
import { Canvas } from "@react-three/fiber"; import { Canvas } from "@react-three/fiber";
import { useLoader,useFrame } from "@react-three/fiber"; import { useLoader,useFrame } from "@react-three/fiber";
import React, { useMemo, Suspense } from "react"; import React, { memo, Suspense } from "react";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { useGLTF } from "@react-three/drei"; import { useGLTF } from "@react-three/drei";
const Mesh = (props) => { const Mesh = (props) => {
const model = useGLTF(props.path); const model = useGLTF(props.path);
console.log(model);
let mixer = new THREE.AnimationMixer(model.scene); let mixer = new THREE.AnimationMixer(model.scene);
model.animations.forEach((clip)=>{ model.animations.forEach((clip)=>{
...@@ -23,7 +24,7 @@ const Mesh = (props) => { ...@@ -23,7 +24,7 @@ const Mesh = (props) => {
); );
}; };
export default function Model(props) { function Model(props) {
return ( return (
<Suspense fallback={null}> <Suspense fallback={null}>
<Mesh <Mesh
...@@ -34,5 +35,6 @@ export default function Model(props) { ...@@ -34,5 +35,6 @@ export default function Model(props) {
); );
} }
export default memo(Model)
useGLTF.preload(require(`@/assets/gltf/animated_robot_sdc.glb`)); useGLTF.preload(require(`@/assets/gltf/animated_robot_sdc.glb`));
import * as THREE from "three"; import * as THREE from "three";
import { Canvas } from "@react-three/fiber"; import { Canvas } from "@react-three/fiber";
import { useLoader,useFrame } from "@react-three/fiber"; import { useLoader,useFrame } from "@react-three/fiber";
import React, { useMemo, Suspense } from "react"; import React, { useMemo, Suspense, memo } from "react";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { useGLTF } from "@react-three/drei"; import { useGLTF } from "@react-three/drei";
...@@ -23,7 +23,7 @@ const Mesh = (props) => { ...@@ -23,7 +23,7 @@ const Mesh = (props) => {
); );
}; };
export default function Jixiebi(props) { function Jixiebi(props) {
return ( return (
<Suspense fallback={null}> <Suspense fallback={null}>
<Mesh <Mesh
...@@ -34,4 +34,6 @@ export default function Jixiebi(props) { ...@@ -34,4 +34,6 @@ export default function Jixiebi(props) {
); );
} }
export default memo(Jixiebi)
useGLTF.preload(require(`@/assets/gltf/basic_robot_arm.glb`)); useGLTF.preload(require(`@/assets/gltf/basic_robot_arm.glb`));
...@@ -10,27 +10,19 @@ import { ...@@ -10,27 +10,19 @@ import {
axesHelper, axesHelper,
} from "react-three-fiber"; } from "react-three-fiber";
import { useRef, Suspense, useState, useEffect } from "react"; import { useRef, Suspense, useState, useEffect } from "react";
import { import { OrbitControls } from "@react-three/drei";
OrbitControls, import { useWebSocket, useFullscreen, useThrottle, useRequest, useAsyncEffect } from "ahooks";
Text,
Html,
Line,
Points,
Point,
Image,
Environment,
useGLTF,
PerspectiveCamera,
} from "@react-three/drei";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { useWebSocket, useFullscreen, useThrottle, useRequest } from "ahooks";
import { ShrinkOutlined, ArrowsAltOutlined } from "@ant-design/icons"; import { ShrinkOutlined, ArrowsAltOutlined } from "@ant-design/icons";
import { Tooltip, notification } from "antd"; import { Tooltip, notification } from "antd";
import qs from "query-string";
import Model from "./models/gltf"; import Model from "./models/gltf";
import Robot from "./models"; import Robot from "./models";
import Jixiebi from "./models/jiqiebi"; import Jixiebi from "./models/jiqiebi";
import { doFetch } from "../utils/doFetch"; import { doFetch } from "../utils/doFetch";
import {
Selection,
EffectComposer,
Outline,
} from "@react-three/postprocessing";
const modelconfig = [ const modelconfig = [
{ {
...@@ -235,8 +227,12 @@ const Bulb = (props) => { ...@@ -235,8 +227,12 @@ const Bulb = (props) => {
function Threedire() { 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 [config, setconfig] = useState(modelconfig); const [config, setconfig] = useState(modelconfig);
const [modalprops, setmodalprops] = useState({
visible:false,
data:{}
});
const { data } = useRequest( const { data } = useRequest(
async () => { async () => {
//format result //format result
...@@ -252,12 +248,14 @@ function Threedire() { ...@@ -252,12 +248,14 @@ function Threedire() {
} }
); );
useEffect(() => { useEffect(() => {
if (data) { if (data) {
setconfig((s) => { setconfig((s) => {
let news = JSON.parse(JSON.stringify(s ?? {})); let news = JSON.parse(JSON.stringify(s ?? {}));
news = news.map((it) => { news = news.map((it) => {
it.status = it.name == "0" ? 1 : data[it.name]; it.status = it.name == "0" ? 3 : data[it.name];
return it; return it;
}); });
return news; return news;
...@@ -265,6 +263,25 @@ function Threedire() { ...@@ -265,6 +263,25 @@ function Threedire() {
} }
}, [data]); }, [data]);
useAsyncEffect(async ()=>{
if(equpmentNo){
let res = await doFetch({url:"/ngic-statistics/deviceStatus/queryEquipmentParam",params:{equipmentNo:equpmentNo}})
setmodalprops({
visible:true,
data:res?.data?.data
})
}else{
setmodalprops({
visible:false,
})
}
},[
equpmentNo
])
return ( return (
<Canvas <Canvas
shadows shadows
...@@ -272,10 +289,28 @@ function Threedire() { ...@@ -272,10 +289,28 @@ function Threedire() {
position: [0, 30, 20], position: [0, 30, 20],
}} }}
> >
{config?.map((it, i) => { <Selection>
return <Model key={it.name} {...it} />; <EffectComposer multisampling={8} autoClear={false}>
})} <Outline
<Robot /> blur
visibleEdgeColor="white"
edgeStrength={20}
width={5000}
/>
</EffectComposer>
{config?.map((it, i) => {
return (
<Model
key={it.name}
{...it}
setequpmentNo={setequpmentNo}
equpmentNo={equpmentNo}
/>
);
})}
</Selection>
{/* <Robot /> */}
<Jixiebi /> <Jixiebi />
<Floor position={[2, -0.06, 0]} /> <Floor position={[2, -0.06, 0]} />
......
...@@ -930,6 +930,16 @@ ...@@ -930,6 +930,16 @@
suspend-react "^0.0.8" suspend-react "^0.0.8"
zustand "^3.7.1" zustand "^3.7.1"
"@react-three/postprocessing@^2.6.2":
version "2.6.2"
resolved "https://registry.npmmirror.com/@react-three/postprocessing/-/postprocessing-2.6.2.tgz#fe1484a51ccc0577f67280307a0fc3a9ecb0e070"
integrity sha512-YvU3oH5Vb2UT+ekhhzHwMTvEYo50VoW8EYMQxmh9TzWaTohSB0GGDanJw5peUMDUgYS1gNjj9cpsk0w/z/7Qpg==
dependencies:
postprocessing "^6.28.5"
react-merge-refs "^1.1.0"
screen-space-reflections "2.5.0"
three-stdlib "^2.8.11"
"@rollup/pluginutils@^4.1.2": "@rollup/pluginutils@^4.1.2":
version "4.2.1" version "4.2.1"
resolved "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d" resolved "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
...@@ -4999,6 +5009,11 @@ postcss@^8.4.13, postcss@^8.4.7: ...@@ -4999,6 +5009,11 @@ postcss@^8.4.13, postcss@^8.4.7:
picocolors "^1.0.0" picocolors "^1.0.0"
source-map-js "^1.0.2" source-map-js "^1.0.2"
postprocessing@^6.28.5:
version "6.28.7"
resolved "https://registry.npmmirror.com/postprocessing/-/postprocessing-6.28.7.tgz#ab1104585c3372e576ccf1910a4ea577be379266"
integrity sha512-norsBlNIhDoNG2R0nki9C0bNEARIunE/s5W/4qH/Ozlg3m0dOOmBoY8JZhnmPild/+Jvq/UFEeHQRBvTc11WUg==
potpack@^1.0.1: potpack@^1.0.1:
version "1.0.2" version "1.0.2"
resolved "https://registry.npmmirror.com/potpack/-/potpack-1.0.2.tgz#23b99e64eb74f5741ffe7656b5b5c4ddce8dfc14" resolved "https://registry.npmmirror.com/potpack/-/potpack-1.0.2.tgz#23b99e64eb74f5741ffe7656b5b5c4ddce8dfc14"
...@@ -5793,6 +5808,11 @@ schema-utils@^3.0.0, schema-utils@^3.1.1: ...@@ -5793,6 +5808,11 @@ schema-utils@^3.0.0, schema-utils@^3.1.1:
ajv "^6.12.5" ajv "^6.12.5"
ajv-keywords "^3.5.2" ajv-keywords "^3.5.2"
screen-space-reflections@2.5.0:
version "2.5.0"
resolved "https://registry.npmmirror.com/screen-space-reflections/-/screen-space-reflections-2.5.0.tgz#2a6ea982da96f9c35f34a361b2555439f9fbb1f6"
integrity sha512-fWSDMhJS0xwD3LTxRRch7Lb9NzxsR66sCmtDmAA7i+OGnghUrBBsrha85ng7StnCBaLq/BKmZ97dLxWd1XgWdQ==
screenfull@^5.0.0: screenfull@^5.0.0:
version "5.2.0" version "5.2.0"
resolved "https://registry.npmmirror.com/screenfull/-/screenfull-5.2.0.tgz#6533d524d30621fc1283b9692146f3f13a93d1ba" resolved "https://registry.npmmirror.com/screenfull/-/screenfull-5.2.0.tgz#6533d524d30621fc1283b9692146f3f13a93d1ba"
...@@ -6184,6 +6204,23 @@ three-stdlib@^2.14.3: ...@@ -6184,6 +6204,23 @@ three-stdlib@^2.14.3:
potpack "^1.0.1" potpack "^1.0.1"
zstddec "^0.0.2" zstddec "^0.0.2"
three-stdlib@^2.8.11:
version "2.16.1"
resolved "https://registry.npmmirror.com/three-stdlib/-/three-stdlib-2.16.1.tgz#3548eca5350a06e79b8e24bd7ee7877cfeab11f6"
integrity sha512-AuWs5OFOQfrSYYg49DF2driU9OI9AG8vS1/KBrKjQnJqW5vyn8WvhePexcSmDKgsBfAsxcXk8W/tR9uOESnr3w==
dependencies:
"@babel/runtime" "^7.16.7"
"@types/offscreencanvas" "^2019.6.4"
"@webgpu/glslang" "^0.0.15"
chevrotain "^10.1.2"
draco3d "^1.4.1"
fflate "^0.6.9"
ktx-parse "^0.4.5"
mmd-parser "^1.0.4"
opentype.js "^1.3.3"
potpack "^1.0.1"
zstddec "^0.0.2"
three@^0.144.0: three@^0.144.0:
version "0.144.0" version "0.144.0"
resolved "https://registry.npmmirror.com/three/-/three-0.144.0.tgz#2818517169f8ff94eea5f664f6ff1fcdcd436cc8" resolved "https://registry.npmmirror.com/three/-/three-0.144.0.tgz#2818517169f8ff94eea5f664f6ff1fcdcd436cc8"
......
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