Skip to content

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

asder

parent 249425a5
Hide whitespace changes
Inline Side-by-side
Showing with 278 additions and 127 deletions
deploy.sh 0 → 100644
View file @ c1f668b0
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'
src/pages/index.jsx
View file @ c1f668b0
......@@ -45,7 +45,79 @@ export default function HomePage() {
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 (
<div className={styles?.container}>
......@@ -68,7 +140,7 @@ export default function HomePage() {
tooltip: {
trigger: "item",
},
color:["#6AE49B","#4887E0","#8D8D8D","#F31A1A"],
color: ["#6AE49B", "#4887E0", "#8D8D8D", "#F31A1A"],
series: [
{
name: "设备状态",
......@@ -95,28 +167,7 @@ export default function HomePage() {
style={{ width: "100%", height: "100%", marginTop: -28 }}
option={{
xAxis: {
data: [
"点",
"击",
"柱",
"子",
"或",
"者",
"两",
"指",
"在",
"触",
"屏",
"上",
"滑",
"动",
"能",
"够",
"自",
"动",
"缩",
"放",
],
data: lefttwo?.data?.map((it) => it.key),
splitLine: {
show: false,
},
......@@ -186,10 +237,7 @@ export default function HomePage() {
// ]),
// },
// },
data: [
220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149,
210, 122, 133, 334, 198, 123, 125, 220,
],
data: lefttwo?.data?.map((it) => it.value),
},
],
}}
......@@ -208,7 +256,7 @@ export default function HomePage() {
},
type: "category",
boundaryGap: false,
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
data: leftthree?.data?.map?.((it) => it.name),
},
grid: {
top: "58px",
......@@ -233,7 +281,7 @@ export default function HomePage() {
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
data: leftthree?.data?.map?.((it) => it.value),
type: "line",
lineStyle: {
color: "rgba(72, 135, 244,0.4)",
......@@ -274,18 +322,14 @@ export default function HomePage() {
oddRowBGC: "tranparent",
evenRowBGC: "tranparent",
header: ["告警时间", "严重程度", "设备名称", "告警信息"],
data: [
["行1列1", "行1列2", "行1列3", "行1列3"],
["行2列1", "行2列2", "行2列3", "行1列3"],
["行3列1", "行3列2", "行3列3", "行1列3"],
["行4列1", "行4列2", "行4列3", "行1列3"],
["行5列1", "行5列2", "行5列3", "行1列3"],
["行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"],
],
data: rightone?.data?.map(it=>{
return [
it?.alarmTime,
it?.severityName,
it?.deviceName,
it?.name
]
}),
rowNum: 6,
}}
style={{ width: "100%", height: "100%" }}
......@@ -297,28 +341,7 @@ export default function HomePage() {
style={{ width: "100%", height: "100%", marginTop: -28 }}
option={{
xAxis: {
data: [
"点",
"击",
"柱",
"子",
"或",
"者",
"两",
"指",
"在",
"触",
"屏",
"上",
"滑",
"动",
"能",
"够",
"自",
"动",
"缩",
"放",
],
data: righttwo?.data?.map((it) => it.key),
splitLine: {
show: false,
},
......@@ -386,10 +409,7 @@ export default function HomePage() {
// ]),
// },
// },
data: [
220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149,
210, 122, 133, 334, 198, 123, 125, 220,
],
data: righttwo?.data?.map((it) => it.value),
},
],
}}
......@@ -408,7 +428,7 @@ export default function HomePage() {
},
type: "category",
boundaryGap: false,
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
data: rightthree?.data?.map?.((it) => it.key),
},
grid: {
top: "58px",
......@@ -433,7 +453,7 @@ export default function HomePage() {
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 10],
data: rightthree?.data?.map?.((it) => it.value),
type: "line",
lineStyle: {
color: "rgba(243, 26, 25,0.4)",
......
src/pages/models/OutLine.jsx 0 → 100644
View file @ c1f668b0
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
src/pages/models/gltf.jsx
View file @ c1f668b0
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) => {
let { name, path, position, status, scale } = props;
let { name, equpmentNo, setequpmentNo, status, scale } = props;
const { nodes } = useGLTF(props.path);
return (
<group {...props} dispose={null}>
{Object.keys(nodes).map((it, i) => {
return (
<mesh
geometry={nodes[it].geometry}
scale={scale??0.002}
key={it}
>
<meshPhysicalMaterial
color={statusbar[status]}
//transparent={true} //是否支持透明度
// opacity={0.5} //透明度
//visible={true}//是否可见
wireframe={false} //线框化
//metalness={1} //金属性贴图
roughness={0} //粗糙程度 越精细镜面效果越强
clearcoat={1} // 透明漆 罩光漆
transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
// reflectivity={1} //光的 反射率
/>
</mesh>
);
})}
</group>
<Select enabled={equpmentNo == name}>
<group
{...props}
dispose={null}
onClick={() => {
if(equpmentNo==name){
setequpmentNo(null);
}else{
setequpmentNo(name);
}
}}
>
{Object.keys(nodes).map((it, i) => {
return (
<mesh geometry={nodes[it].geometry} scale={scale ?? 0.002} key={it}>
<meshPhysicalMaterial
color={statusbar[status]}
//transparent={true} //是否支持透明度
// opacity={0.5} //透明度
//visible={true}//是否可见
wireframe={equpmentNo == name} //线框化
//metalness={1} //金属性贴图
roughness={0} //粗糙程度 越精细镜面效果越强
clearcoat={1} // 透明漆 罩光漆
transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
// reflectivity={1} //光的 反射率
/>
</mesh>
);
})}
</group>
</Select>
);
};
export default function Model(props) {
function Model(props) {
return (
<Suspense fallback={null}>
<Mesh
......@@ -55,3 +60,5 @@ const arr = ["M8", "T360", "M850"].map((it) => {
});
useGLTF.preload(arr);
export default memo(Model)
\ No newline at end of file
src/pages/models/index.jsx
View file @ c1f668b0
import * as THREE from "three";
import { Canvas } 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 { useGLTF } from "@react-three/drei";
const Mesh = (props) => {
const model = useGLTF(props.path);
console.log(model);
let mixer = new THREE.AnimationMixer(model.scene);
model.animations.forEach((clip)=>{
......@@ -23,7 +24,7 @@ const Mesh = (props) => {
);
};
export default function Model(props) {
function Model(props) {
return (
<Suspense fallback={null}>
<Mesh
......@@ -34,5 +35,6 @@ export default function Model(props) {
);
}
export default memo(Model)
useGLTF.preload(require(`@/assets/gltf/animated_robot_sdc.glb`));
src/pages/models/jiqiebi.jsx
View file @ c1f668b0
import * as THREE from "three";
import { Canvas } 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 { useGLTF } from "@react-three/drei";
......@@ -23,7 +23,7 @@ const Mesh = (props) => {
);
};
export default function Jixiebi(props) {
function Jixiebi(props) {
return (
<Suspense fallback={null}>
<Mesh
......@@ -34,4 +34,6 @@ export default function Jixiebi(props) {
);
}
export default memo(Jixiebi)
useGLTF.preload(require(`@/assets/gltf/basic_robot_arm.glb`));
src/pages/threedire.js
View file @ c1f668b0
......@@ -10,27 +10,19 @@ import {
axesHelper,
} from "react-three-fiber";
import { useRef, Suspense, useState, useEffect } from "react";
import {
OrbitControls,
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 { OrbitControls } from "@react-three/drei";
import { useWebSocket, useFullscreen, useThrottle, useRequest, useAsyncEffect } from "ahooks";
import { ShrinkOutlined, ArrowsAltOutlined } from "@ant-design/icons";
import { Tooltip, notification } from "antd";
import qs from "query-string";
import Model from "./models/gltf";
import Robot from "./models";
import Jixiebi from "./models/jiqiebi";
import { doFetch } from "../utils/doFetch";
import {
Selection,
EffectComposer,
Outline,
} from "@react-three/postprocessing";
const modelconfig = [
{
......@@ -235,8 +227,12 @@ const Bulb = (props) => {
function Threedire() {
const texture = useLoader(THREE.TextureLoader, require("@/assets/floor.png"));
const [equpmentNo, setequpmentNo] = useState();
const [config, setconfig] = useState(modelconfig);
const [modalprops, setmodalprops] = useState({
visible:false,
data:{}
});
const { data } = useRequest(
async () => {
//format result
......@@ -252,12 +248,14 @@ function Threedire() {
}
);
useEffect(() => {
if (data) {
setconfig((s) => {
let news = JSON.parse(JSON.stringify(s ?? {}));
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 news;
......@@ -265,6 +263,25 @@ function Threedire() {
}
}, [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 (
<Canvas
shadows
......@@ -272,10 +289,28 @@ function Threedire() {
position: [0, 30, 20],
}}
>
{config?.map((it, i) => {
return <Model key={it.name} {...it} />;
})}
<Robot />
<Selection>
<EffectComposer multisampling={8} autoClear={false}>
<Outline
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 />
<Floor position={[2, -0.06, 0]} />
......
yarn.lock
View file @ c1f668b0
......@@ -930,6 +930,16 @@
suspend-react "^0.0.8"
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":
version "4.2.1"
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:
picocolors "^1.0.0"
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:
version "1.0.2"
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:
ajv "^6.12.5"
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:
version "5.2.0"
resolved "https://registry.npmmirror.com/screenfull/-/screenfull-5.2.0.tgz#6533d524d30621fc1283b9692146f3f13a93d1ba"
......@@ -6184,6 +6204,23 @@ three-stdlib@^2.14.3:
potpack "^1.0.1"
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:
version "0.144.0"
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