Skip to content

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

zxcdf

parent 023a6b5e
Hide whitespace changes
Inline Side-by-side
Showing with 183 additions and 59 deletions
.umirc.ts
View file @ 15ace3b6
......@@ -4,7 +4,7 @@ export default {
history: {
type: "hash",
},
publicPath:"./",
//publicPath:"./",
manifest: {
basePath: "/",
},
......
src/global.less
View file @ 15ace3b6
......@@ -28,55 +28,77 @@ html,
font-size: 24px;
}
.bgtext {
background-image: linear-gradient(
0deg,
#77cde2 0%,
#ffffff 100%
);
background-image: linear-gradient(0deg, #77cde2 0%, #ffffff 100%);
background-clip: text;
-webkit-text-fill-color: transparent;
}
.fixder{
.fixder {
position: fixed;
width: 400px;
right: 380px;
top:90px;
top: 90px;
background-image: linear-gradient(
0deg,
rgba(52, 131, 242,0.6) 0%,
rgba(52, 131, 242,0.1) 100%
rgba(52, 131, 242, 0.8) 0%,
rgba(52, 131, 242, 0.4) 100%
);
z-index: 999999;
border-radius: 8px;
padding: 12px;
}
.spread{
.spread {
display: flex;
justify-content: space-between;
align-items: center;
color:#ffffff;
border-bottom: rgba(216, 216, 216,0.4) solid 2px;
color: #ffffff;
border-bottom: rgba(216, 216, 216, 0.4) solid 2px;
padding-bottom: 12px;
margin-bottom: 12px;
}
.spreaditem{
.spreaditem {
display: flex;
justify-content: space-between;
align-items: center;
color:rgba(255, 255, 255,0.6);
color: rgba(255, 255, 255, 0.8);
margin-bottom: 6px;
background-color: rgba(70, 119, 255, 0.4);
padding: 8px;
> div:first-child {
width: 140px;
flex-shrink: 0;
//text-indent: 8px;
position: relative;
word-break: break-all;
// &::before{
// position: absolute;
// left: 0;
// top: 4px;
// width: 2px;
// height: 14px;
// content: '';
// background-color: #d6dbff;
// }
}
> div:last-child {
flex: 1;
text-align: right;
word-break: break-all;
color: #ffffff !important;
}
}
.status{
.status {
position: fixed;
width: 209px;
left: 380px;
top:90px;
top: 90px;
background-image: linear-gradient(
0deg,
rgba(52, 131, 242,0.6) 0%,
rgba(52, 131, 242,0.1) 100%
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/index.jsx
View file @ 15ace3b6
......@@ -130,12 +130,23 @@ export default function HomePage() {
orient: "vertical", //垂直显示
y: "center", //延Y轴居中
x: "right", //居右显示
padding: 20, //调节legend的位置
padding: 40, //调节legend的位置
textStyle: {
fontSize: 14, //字体大小
color: "#ffffff", //字体颜色
},
icon: "circle",
formatter: function (name) {
//图例后添加数值
let data = leftone.data ?? [];
let tarValue;
for (let i = 0; i < data.length; i++) {
if (data[i].name === name) {
tarValue = data[i].value;
}
}
return name + ": " + tarValue;
},
},
tooltip: {
trigger: "item",
......@@ -145,13 +156,21 @@ export default function HomePage() {
{
name: "设备状态",
type: "pie",
radius: [8, 100],
radius: [40, 80],
center: ["34%", "50%"],
itemStyle: {
borderRadius: 8,
},
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: "28",
fontWeight: "bold",
},
},
itemStyle: {
borderRadius: 8,
},
data: leftone.data,
},
......@@ -322,13 +341,13 @@ export default function HomePage() {
oddRowBGC: "tranparent",
evenRowBGC: "tranparent",
header: ["告警时间", "严重程度", "设备名称", "告警信息"],
data: rightone?.data?.map(it=>{
data: rightone?.data?.map((it) => {
return [
it?.alarmTime,
it?.severityName,
it?.deviceName,
it?.name
]
it?.name,
];
}),
rowNum: 6,
}}
......
src/pages/models/gltf.jsx
View file @ 15ace3b6
......@@ -14,6 +14,7 @@ const Mesh = (props) => {
{...props}
dispose={null}
onClick={() => {
if(name=='0') return;
if(equpmentNo==name){
setequpmentNo(null);
}else{
......
src/pages/threedire.jsx
View file @ 15ace3b6
......@@ -11,6 +11,7 @@ import {
} from "react-three-fiber";
import { useRef, Suspense, useState, useEffect } from "react";
import { OrbitControls } from "@react-three/drei";
import { Scrollbars } from "react-custom-scrollbars";
import {
useWebSocket,
useFullscreen,
......@@ -23,7 +24,7 @@ import {
CloseCircleFilled,
ExclamationCircleFilled,
} from "@ant-design/icons";
import { Tooltip, notification } from "antd";
import { Tooltip, notification, Empty } from "antd";
import Model from "./models/gltf";
import Robot from "./models";
import Jixiebi from "./models/jiqiebi";
......@@ -321,7 +322,7 @@ function Threedire() {
}, [equpmentNo]);
const { sendMessage, lastMessage, readyState } = useWebSocket(
`ws://192.168.40.14:17901/ws/device/status`,//192.168.40.50:7910
`ws://192.168.40.14:17901/ws/device/status`, //192.168.40.50:7910
{
onOpen: () => {
console.log("readyState is ", readyState);
......@@ -334,11 +335,11 @@ function Threedire() {
},
onMessage: (message) => {
let uir = JSON.parse(message.data);
if(Object.values(uir).includes(0)){
setalarm(s=>({
if (Object.values(uir).includes(0)) {
setalarm((s) => ({
...s,
visible:true
}))
visible: true,
}));
}
setinfo((s) => {
return {
......@@ -359,21 +360,26 @@ function Threedire() {
transition: "all 0.4s",
}}
>
<p style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
<p
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<span>离线设备</span>
<CloseCircleFilled onClick={()=>{
setalarm(s=>({
...s,
visible:false
}))
}}/>
<CloseCircleFilled
onClick={() => {
setalarm((s) => ({
...s,
visible: false,
}));
}}
/>
</p>
{Object.keys(infos).map((it) => {
return (
<div
key={it}
style={{ display: info[it] == 1 ? "none" : "block" }}
>
<div key={it} style={{ display: info[it] == 1 ? "none" : "block" }}>
<ExclamationCircleFilled style={{ color: "red" }} />
<span> {infos[it]}</span>
</div>
......@@ -391,7 +397,9 @@ function Threedire() {
}}
>
<div className="spread">
<span>{modalprops?.data?.equipmentName} ｜ {equpmentNo}</span>
<span>
{modalprops?.data?.equipmentName} ｜ {equpmentNo}
</span>
<span style={{ color: statusbar[config[equpmentNo]?.status]?.color }}>
{statusbar[config[equpmentNo]?.status]?.name}
</span>
......@@ -399,25 +407,39 @@ function Threedire() {
<div
style={{
maxHeight: 300,
overflow: "auto",
borderBottom: "2px solid rgba(255,255,255,0.5)",
overflow: "hidden",
borderBottom:
modalprops?.data?.paramList?.length > 0
? "2px solid rgba(255,255,255,0.5)"
: "none",
paddingBottom: 12,
marginBottom: 12,
}}
>
{modalprops?.data?.paramList?.map?.((it) => {
return (
<div className="spreaditem">
<span>参数:{it.name}</span>
<span>{it.value ?? "-"}</span>
</div>
);
})}
<Scrollbars
thumbMinSize={10}
autoHide
style={{
width: "100%",
height: "200px",
}}
hideTracksWhenNotNeeded
>
{modalprops?.data?.paramList?.length>0?modalprops?.data?.paramList?.map?.((it) => {
return (
<div className="spreaditem">
<div>
{it.name}
</div>
<div>{it.value ?? "-"}["-420.014282","-71.198875","-72.400002","0"]</div>
</div>
);
}):<Empty style={{opacity:0.4,marginTop:36}} description={<span style={{color:"#ffffff"}}>暂无数据</span>}></Empty>}
</Scrollbars>
</div>
<div style={{ color: "rgba(255,255,255,0.6)" }}>
<span>告警信息: </span>
<span> {modalprops?.data?.alarm}</span>
<span> {modalprops?.data?.alarm ?? '-'}</span>
</div>
</div>
<Canvas
......
yarn.lock
View file @ 15ace3b6
......@@ -1658,6 +1658,11 @@ acorn@^8.5.0:
resolved "https://registry.npmmirror.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
add-px-to-style@1.0.0:
version "1.0.0"
resolved "https://registry.npmmirror.com/add-px-to-style/-/add-px-to-style-1.0.0.tgz#d0c135441fa8014a8137904531096f67f28f263a"
integrity sha512-YMyxSlXpPjD8uWekCQGuN40lV4bnZagUwqa2m/uFv1z/tNImSk9fnXVMUI5qwME/zzI3MMQRvjZ+69zyfSSyew==
ahooks-v3-count@^1.0.0:
version "1.0.0"
resolved "https://registry.npmmirror.com/ahooks-v3-count/-/ahooks-v3-count-1.0.0.tgz#ddeb392e009ad6e748905b3cbf63a9fd8262ca80"
......@@ -2577,6 +2582,15 @@ dom-converter@^0.2.0:
dependencies:
utila "~0.4"
dom-css@^2.0.0:
version "2.1.0"
resolved "https://registry.npmmirror.com/dom-css/-/dom-css-2.1.0.tgz#fdbc2d5a015d0a3e1872e11472bbd0e7b9e6a202"
integrity sha512-w9kU7FAbaSh3QKijL6n59ofAhkkmMJ31GclJIz/vyQdjogfyxcB6Zf8CZyibOERI5o0Hxz30VmJS7+7r5fEj2Q==
dependencies:
add-px-to-style "1.0.0"
prefix-style "2.0.1"
to-camel-case "1.0.0"
dom-serializer@^1.0.1:
version "1.4.1"
resolved "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
......@@ -4665,6 +4679,11 @@ pbkdf2@^3.0.3:
safe-buffer "^5.0.1"
sha.js "^2.4.8"
performance-now@^2.1.0:
version "2.1.0"
resolved "https://registry.npmmirror.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
picocolors@^1.0.0:
version "1.0.0"
resolved "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
......@@ -5019,6 +5038,11 @@ potpack@^1.0.1:
resolved "https://registry.npmmirror.com/potpack/-/potpack-1.0.2.tgz#23b99e64eb74f5741ffe7656b5b5c4ddce8dfc14"
integrity sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==
prefix-style@2.0.1:
version "2.0.1"
resolved "https://registry.npmmirror.com/prefix-style/-/prefix-style-2.0.1.tgz#66bba9a870cfda308a5dc20e85e9120932c95a06"
integrity sha512-gdr1MBNVT0drzTq95CbSNdsrBDoHGlb2aDJP/FoY+1e+jSDPOb1Cv554gH2MGiSr2WTcXi/zu+NaFzfcHQkfBQ==
prettier-plugin-organize-imports@^2.3.4:
version "2.3.4"
resolved "https://registry.npmmirror.com/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-2.3.4.tgz#65473861ae5ab7960439fff270a2258558fbe9ba"
......@@ -5054,7 +5078,7 @@ process@^0.11.10:
resolved "https://registry.npmmirror.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
prop-types@^15.6.0, prop-types@^15.8.1:
prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.npmmirror.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
......@@ -5127,6 +5151,13 @@ quick-format-unescaped@^4.0.3:
resolved "https://registry.npmmirror.com/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz#93ef6dd8d3453cbc7970dd614fad4c5954d6b5a7"
integrity sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==
raf@^3.1.0:
version "3.4.1"
resolved "https://registry.npmmirror.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
dependencies:
performance-now "^2.1.0"
randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
version "2.1.0"
resolved "https://registry.npmmirror.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
......@@ -5518,6 +5549,15 @@ react-composer@^5.0.3:
dependencies:
prop-types "^15.6.0"
react-custom-scrollbars@^4.2.1:
version "4.2.1"
resolved "https://registry.npmmirror.com/react-custom-scrollbars/-/react-custom-scrollbars-4.2.1.tgz#830fd9502927e97e8a78c2086813899b2a8b66db"
integrity sha512-VtJTUvZ7kPh/auZWIbBRceGPkE30XBYe+HktFxuMWBR2eVQQ+Ur6yFJMoaYcNpyGq22uYJ9Wx4UAEcC0K+LNPQ==
dependencies:
dom-css "^2.0.0"
prop-types "^15.5.10"
raf "^3.1.0"
react-dom@18.1.0:
version "18.1.0"
resolved "https://registry.npmmirror.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"
......@@ -6248,11 +6288,23 @@ to-arraybuffer@^1.0.0:
resolved "https://registry.npmmirror.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
integrity sha512-okFlQcoGTi4LQBG/PgSYblw9VOyptsz2KJZqc6qtgGdes8VktzUQkj4BI2blit072iS8VODNcMA+tvnS9dnuMA==
to-camel-case@1.0.0:
version "1.0.0"
resolved "https://registry.npmmirror.com/to-camel-case/-/to-camel-case-1.0.0.tgz#1a56054b2f9d696298ce66a60897322b6f423e46"
integrity sha512-nD8pQi5H34kyu1QDMFjzEIYqk0xa9Alt6ZfrdEMuHCFOfTLhDG5pgTu/aAM9Wt9lXILwlXmWP43b8sav0GNE8Q==
dependencies:
to-space-case "^1.0.0"
to-fast-properties@^2.0.0:
version "2.0.0"
resolved "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
to-no-case@^1.0.0:
version "1.0.2"
resolved "https://registry.npmmirror.com/to-no-case/-/to-no-case-1.0.2.tgz#c722907164ef6b178132c8e69930212d1b4aa16a"
integrity sha512-Z3g735FxuZY8rodxV4gH7LxClE4H0hTIyHNIHdk+vpQxjLm0cwnKXq/OFVZ76SOQmto7txVcwSCwkU5kqp+FKg==
to-regex-range@^5.0.1:
version "5.0.1"
resolved "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
......@@ -6260,6 +6312,13 @@ to-regex-range@^5.0.1:
dependencies:
is-number "^7.0.0"
to-space-case@^1.0.0:
version "1.0.0"
resolved "https://registry.npmmirror.com/to-space-case/-/to-space-case-1.0.0.tgz#b052daafb1b2b29dc770cea0163e5ec0ebc9fc17"
integrity sha512-rLdvwXZ39VOn1IxGL3V6ZstoTbwLRckQmn/U8ZDLuWwIXNpuZDhQ3AiRUlhTbOXFVE9C+dR51wM0CBDhk31VcA==
dependencies:
to-no-case "^1.0.0"
toggle-selection@^1.0.6:
version "1.0.6"
resolved "https://registry.npmmirror.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
......
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