From 366612bd8e8b88d02a98edf508f96d7add23ff9f Mon Sep 17 00:00:00 2001
From: pengwei <2071057782@qq.com>
Date: 星期日, 27 四月 2025 16:03:38 +0800
Subject: [PATCH] 功能新增
---
项目代码/client/src/views/tts/TheCurrentJob/Startjob.vue | 902 ++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 707 insertions(+), 195 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/client/src/views/tts/TheCurrentJob/Startjob.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/client/src/views/tts/TheCurrentJob/Startjob.vue"
index 4118283..a75c2b2 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/client/src/views/tts/TheCurrentJob/Startjob.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/client/src/views/tts/TheCurrentJob/Startjob.vue"
@@ -126,6 +126,7 @@
"
>
<el-table
+ empty-text="鏆傛棤鏁版嵁"
:data="taskData"
width="100%"
:header-cell-style="{
@@ -170,65 +171,135 @@
>
</span>
</div>
- <div style="position: absolute; width: 47rem; height: 2.5rem">
+ <div style="width: 62rem; height: 2.5rem">
<el-table
- style="margin-top: 0.88rem"
+ empty-text="鏆傛棤鏁版嵁"
+ style="margin-top: 0.88rem; opacity: 0.8"
:data="gridData"
width="100%"
:header-cell-style="{
height: '1.61rem',
- color: '#1AC8FE',
- background: '#0A5B91',
+ color: '#fff',
fontSize: '0.88rem',
+ border: 'solid 1px #1ac2f7',
}"
:cell-style="{
color: '#fff',
- background: '#147BAF',
}"
>
<el-table-column
property="craftsStep"
label="宸ヨ壓椤圭偣/姝ラ"
- min-width="30%"
+ min-width="13%"
>
<template #default="scope">
- <span
- ref="spanHide"
- @click="showDetail1(!contentShow)"
- style="
- color: #1ac2f7;
- font-size: 0.88rem;
- cursor: pointer;
- text-decoration: underline;
- "
- >{{ scope.row.craftsStep }}
- </span></template
- ></el-table-column
- >
+ <el-tooltip placement="bottom" effect="light">
+ <template #content>
+ <span style="display: block; width: 15rem">{{
+ scope.row.craftsStep
+ }}</span>
+ </template>
+ <span
+ @click="true"
+ style="
+ color: #ffffff;
+ font-size: 0.88rem;
+ display: -webkit-box; /* 璁剧疆涓篧ebKit鍐呮牳鐨勫脊鎬х洅瀛愭ā鍨� */
+ -webkit-box-orient: vertical; /* 鍨傜洿鎺掑垪 */
+ -webkit-line-clamp: 1; /* 闄愬埗鏄剧ず涓よ */
+ overflow: hidden; /* 闅愯棌瓒呭嚭鑼冨洿鐨勫唴瀹� */
+ text-overflow: ellipsis; /* 浣跨敤鐪佺暐鍙� */
+ "
+ >{{ scope.row.craftsStep }}</span
+ >
+ </el-tooltip>
+ </template>
+ </el-table-column>
+
<el-table-column
property="craftContent"
label="宸ヨ壓鍐呭"
- min-width="70%"
+ min-width="40%"
>
<template #default="scope">
- <span
- @click="true"
- style="
- color: #ffffff;
- font-size: 0.88rem;
- display: -webkit-box; /* 璁剧疆涓篧ebKit鍐呮牳鐨勫脊鎬х洅瀛愭ā鍨� */
- -webkit-box-orient: vertical; /* 鍨傜洿鎺掑垪 */
- -webkit-line-clamp: 2; /* 闄愬埗鏄剧ず涓よ */
- overflow: hidden; /* 闅愯棌瓒呭嚭鑼冨洿鐨勫唴瀹� */
- text-overflow: ellipsis; /* 浣跨敤鐪佺暐鍙� */
- "
- >{{ scope.row.craftContent }}</span
- ></template
- ></el-table-column
+ <el-tooltip placement="bottom" effect="light">
+ <template #content>
+ <span style="display: block; width: 15rem">{{
+ scope.row.craftContent
+ }}</span>
+ </template>
+ <span
+ @click="true"
+ style="
+ color: #ffffff;
+ font-size: 0.88rem;
+ display: -webkit-box; /* 璁剧疆涓篧ebKit鍐呮牳鐨勫脊鎬х洅瀛愭ā鍨� */
+ -webkit-box-orient: vertical; /* 鍨傜洿鎺掑垪 */
+ -webkit-line-clamp: 2; /* 闄愬埗鏄剧ず涓よ */
+ overflow: hidden; /* 闅愯棌瓒呭嚭鑼冨洿鐨勫唴瀹� */
+ text-overflow: ellipsis; /* 浣跨敤鐪佺暐鍙� */
+ "
+ >{{ scope.row.craftContent }}</span
+ >
+ </el-tooltip>
+ </template></el-table-column
+ >
+ <el-table-column property="tools" label="宸ュ叿" min-width="12%">
+ <template #default="scope">
+ <el-tooltip placement="bottom" effect="light">
+ <template #content>
+ <span style="display: block; width: 15rem">{{
+ scope.row.tools
+ }}</span>
+ </template>
+ <span
+ @click="true"
+ style="
+ color: #ffffff;
+ font-size: 0.88rem;
+ display: -webkit-box; /* 璁剧疆涓篧ebKit鍐呮牳鐨勫脊鎬х洅瀛愭ā鍨� */
+ -webkit-box-orient: vertical; /* 鍨傜洿鎺掑垪 */
+ -webkit-line-clamp: 2; /* 闄愬埗鏄剧ず涓よ */
+ overflow: hidden; /* 闅愯棌瓒呭嚭鑼冨洿鐨勫唴瀹� */
+ text-overflow: ellipsis; /* 浣跨敤鐪佺暐鍙� */
+ "
+ >{{ scope.row.tools }}</span
+ >
+ </el-tooltip>
+ </template></el-table-column
+ >
+ <el-table-column
+ property="craftsStep"
+ label="鐗╂枡"
+ min-width="15%"
+ >
+ <template #default="scope">
+ <el-tooltip placement="bottom" effect="light">
+ <template #content>
+ <span style="display: block; width: 15rem">{{
+ scope.row.material
+ }}</span>
+ </template>
+ <span
+ @click="true"
+ style="
+ color: #ffffff;
+ font-size: 0.88rem;
+ display: -webkit-box; /* 璁剧疆涓篧ebKit鍐呮牳鐨勫脊鎬х洅瀛愭ā鍨� */
+ -webkit-box-orient: vertical; /* 鍨傜洿鎺掑垪 */
+ -webkit-line-clamp: 2; /* 闄愬埗鏄剧ず涓よ */
+ overflow: hidden; /* 闅愯棌瓒呭嚭鑼冨洿鐨勫唴瀹� */
+ text-overflow: ellipsis; /* 浣跨敤鐪佺暐鍙� */
+ "
+ >{{ scope.row.material }}</span
+ >
+ </el-tooltip>
+ </template></el-table-column
>
</el-table>
- <div class="consten" v-if="contentShow">
+ <!-- <div class="consten" v-show="contentShow">
<el-table
+ empty-text="鏆傛棤鏁版嵁"
:data="gridData"
width="100%"
:header-cell-style="{
@@ -276,7 +347,7 @@
></el-table-column
>
</el-table>
- </div>
+ </div> -->
</div>
</div>
<div class="rect-item3" style="position: relative">
@@ -313,7 +384,10 @@
v-model="torqueFrom.torqueSize"
style="font-size: 0.75rem; height: 2rem"
placeholder="璇疯緭鍏ユ壄鍔涘��"
- />
+ ><template #suffix>
+ <span style="font-size: 0.88rem; color: black">N*m</span>
+ </template>
+ </el-input>
<!-- @blur="addTorque" -->
</el-scrollbar>
</div>
@@ -356,13 +430,13 @@
display: flex;
justify-content: center;
align-items: center;
- position: absolute;
- top: 33%;
- left: 50%;
- transform: translateX(-50%);
"
>
- <div ref="container" style="width: 100%; height: 100%"></div>
+ <div
+ ref="container"
+ class="my-three"
+ style="width: 100%; height: 100%"
+ ></div>
<!-- <model-gltf
:width="400"
:height="400"
@@ -374,6 +448,11 @@
}"
/> -->
</div>
+ <div style="position: absolute; bottom: 5%; left: 2%">
+ <span style="color: rgba(26, 201, 255, 1); font-size: 1.5em"
+ >X:{{ xPos }} Y:{{ yPos }} Z:{{ zPos }}</span
+ >
+ </div>
<div
style="
display: flex;
@@ -381,8 +460,9 @@
align-items: center;
position: absolute;
bottom: 5%;
- left: 50%;
- transform: translateX(-50%);
+ right: 0%;
+ transform: translateX(-20%);
+ z-index: 999;
"
>
<el-button
@@ -403,7 +483,7 @@
>
<el-button
:disabled="obj.setpNum == sunNUm"
- @click="Next(false)"
+ @click="DialogVisible = true"
type="primary"
:style="{
width: '5rem',
@@ -438,7 +518,7 @@
<!-- 寮哄埗璺宠浆纭妗� -->
<el-dialog v-model="centerDialogVisible" title="纭" width="300" center>
- <span> 褰撳墠浠诲姟鏈畬鎴愶紝鏄惁寮哄埗璺宠浆鍒颁笅涓�姝ワ紵 </span>
+ <span sty> 褰撳墠浠诲姟鏈畬鎴愶紝鏄惁寮哄埗璺宠浆鍒颁笅涓�姝ワ紵 </span>
<template #footer>
<div class="dialog-footer">
<el-button style="width: 5rem" @click="centerDialogVisible = false"
@@ -450,10 +530,27 @@
</div>
</template>
</el-dialog>
+
+ <!-- 鏄惁鍚堟牸鎴栧凡瀹屾垚 -->
+ <el-dialog v-model="DialogVisible" title="纭" width="300" center>
+ <span style="display: block; text-align: center; font-size: 1.5rem">
+ 璇风‘璁ゅ綋鍓嶆楠ゅ凡瀹屾垚涓斿悎鏍�
+ </span>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button style="width: 5rem" @click="DialogVisible = false"
+ >鍙栨秷</el-button
+ >
+ <el-button style="width: 5rem" type="primary" @click="Next(false)">
+ 纭
+ </el-button>
+ </div>
+ </template>
+ </el-dialog>
</div>
</template>
<script setup>
-import { ref, onMounted, nextTick } from "vue";
+import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
import {
GetScreenData,
GetPre,
@@ -471,15 +568,15 @@
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; //gltf
+import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
const container = ref(null);
-
-let scene, camera, renderer, controls;
const router = useRouter();
const gridData = ref([]);
const contentShow = ref(false);
const contentShow1 = ref(false);
+const DialogVisible = ref(false);
const info = ref({});
info.value = history.state?.info ? JSON.parse(history.state?.info) : {};
const title = ref("");
@@ -490,7 +587,7 @@
const Torque = ref("");
const showDetail1 = (va1) => {
contentShow1.value = false;
- contentShow.value = va1;
+ contentShow.value = true;
};
const showDetail = (va1) => {
contentShow1.value = va1;
@@ -504,6 +601,8 @@
takeid: "",
setnum: 0,
});
+
+const client = ref(null);
//鎵姏鍊�
const torqueFrom = ref({
@@ -524,16 +623,38 @@
const innerRef = ref();
const scrollbarRef = ref();
+const isJob = ref([]); //宸茬粡瀹屾垚鐨勬楠�
+
//涓婁竴姝�
const Previous = (val) => {
+ //涓婁竴涓殑鍊�
from.value.group = info.value.grouptype;
from.value.takeid = info.value.njtakeid;
from.value.setnum = obj.value.setpNum;
flag.value = val;
- console.log(from.value, info.value);
GetPre(from.value, flag.value).then((res) => {
gridData.value = [res.data.nex];
obj.value = res.data.nex;
+ xPos.value =
+ gridData.value[0].pointAxisXYZ != null &&
+ gridData.value[0].pointAxisXYZ != 0
+ ? gridData.value[0].pointAxisXYZ.split(",")[0]
+ : -585;
+ yPos.value =
+ gridData.value[0].pointAxisXYZ != null &&
+ gridData.value[0].pointAxisXYZ != 0
+ ? gridData.value[0].pointAxisXYZ.split(",")[1]
+ : 692;
+ zPos.value =
+ gridData.value[0].pointAxisXYZ != null &&
+ gridData.value[0].pointAxisXYZ != 0
+ ? gridData.value[0].pointAxisXYZ.split(",")[2]
+ : 692;
+ isJob.value = nodeList.slice(0, gridData.value[0].setpNum - 1); //宸茬粡瀹屾垚鐨勬楠�
+ cameraAnimate(
+ [xPos.value, yPos.value, zPos.value],
+ gridData.value[0].moduleName
+ );
queryData.value.setnum = obj.value.setpNum;
GetTorque(queryData.value).then((res) => {
Torque.value = res.data;
@@ -542,26 +663,47 @@
};
//涓嬩竴姝�
const Next = (val) => {
- console.log(obj.value);
from.value.group = info.value.grouptype;
from.value.takeid = info.value.njtakeid;
from.value.setnum = obj.value.setpNum;
flag.value = val;
-
GetNext(from.value, flag.value).then((res) => {
if (res.message == "娌℃湁瀹屾垚褰撳墠姝ラ") {
gridData.value = res.data.nowdate;
obj.value = res.data.nowdate[0];
if (res.data.nowdate[0].setpNum == obj.value.setpNum) {
centerDialogVisible.value = true;
+ DialogVisible.value = false;
return;
}
return;
}
centerDialogVisible.value = false;
+ DialogVisible.value = false;
gridData.value = [res.data.nex];
+ xPos.value =
+ gridData.value[0].pointAxisXYZ != null &&
+ gridData.value[0].pointAxisXYZ != 0
+ ? gridData.value[0].pointAxisXYZ.split(",")[0]
+ : -585;
+ yPos.value =
+ gridData.value[0].pointAxisXYZ != null &&
+ gridData.value[0].pointAxisXYZ != 0
+ ? gridData.value[0].pointAxisXYZ.split(",")[1]
+ : 692;
+ zPos.value =
+ gridData.value[0].pointAxisXYZ != null &&
+ gridData.value[0].pointAxisXYZ != 0
+ ? gridData.value[0].pointAxisXYZ.split(",")[2]
+ : 692;
+ isJob.value = res.data.finish.map((item) => {
+ return item.moduleName;
+ });
+ cameraAnimate(
+ [xPos.value, yPos.value, zPos.value],
+ gridData.value[0].moduleName
+ );
obj.value = res.data.nex;
-
queryData.value.setnum = obj.value.setpNum;
GetTorque(queryData.value).then((res) => {
Torque.value = res.data;
@@ -573,7 +715,6 @@
from.value.gruops = info.value.grouptype;
from.value.id = info.value.njtakeid;
from.value.creater = info.value.creater;
- console.log(from.value, info.value);
ChangeStatus(from.value).then((res) => {
ElMessage({
@@ -611,138 +752,240 @@
takeid: info.value.njtakeid,
setnum: "",
});
-const initData = () => {
- console.log(obj.value);
- GetScreenData({
+const initData = async () => {
+ await GetScreenData({
group: info.value.grouptype,
takeid: info.value.njtakeid,
}).then((res) => {
- if (res.message == "杩斿洖宸ヨ壓琛ㄤ腑鐨勭涓�鏉�") {
- gridData.value = res.data.proNoe;
- obj.value = res.data.proNoe[0];
- sunNUm.value = res.data.maxproce;
- queryData.value.setnum = obj.value.setpNum;
- GetTorque(queryData.value).then((res) => {
- Torque.value = res.data;
- });
- return;
- }
- gridData.value = res.data.maxpro;
+ gridData.value = [res.data.proNow];
sunNUm.value = res.data.maxproce;
- obj.value = res.data.maxpro[0];
+ obj.value = res.data.proNow;
queryData.value.setnum = obj.value.setpNum;
+ xPos.value =
+ gridData.value[0].pointAxisXYZ != null &&
+ gridData.value[0].pointAxisXYZ != 0
+ ? gridData.value[0].pointAxisXYZ.split(",")[0]
+ : -585;
+ yPos.value =
+ gridData.value[0].pointAxisXYZ != null &&
+ gridData.value[0].pointAxisXYZ != 0
+ ? gridData.value[0].pointAxisXYZ.split(",")[1]
+ : 692;
+ zPos.value =
+ gridData.value[0].pointAxisXYZ != null &&
+ gridData.value[0].pointAxisXYZ != 0
+ ? gridData.value[0].pointAxisXYZ.split(",")[2]
+ : 692;
+ isJob.value = res.data.finish;
+ cameraAnimate(
+ [xPos.value, yPos.value, zPos.value],
+ gridData.value[0].moduleName
+ );
GetTorque(queryData.value).then((res) => {
Torque.value = res.data;
});
});
};
-const showModel = () => {
- scene = new THREE.Scene();
- console.log("model", window.innerWidth, window.innerHeight);
+const CAMERA_POS = [100, 100, 150];
+const BASE_COLOR = [0.2, 0.4, 0.6];
+const RED_COLOR = [3.0, 0.2, 0.4];
+const GREEN_COLOR = [0.0, 1.0, 0.0];
- // 鍒涘缓鐩告満 (瑙嗚锛屽楂樻瘮锛岃繎瑁佸壀闈紝杩滆鍓潰)
- camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
+const xPos = ref("");
+const yPos = ref("");
+const zPos = ref("");
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(
+ 75,
+ window.innerWidth / window.innerHeight,
+ 0.1,
+ 3000
+);
+const renderer = new THREE.WebGLRenderer({
+ antialias: true,
+ alpha: true,
+ precision: "highp",
+});
- // 鍒涘缓娓叉煋鍣�
- renderer = new THREE.WebGLRenderer({
- antialias: true,
- alpha: true,
- });
- renderer.setSize(400, 400); // 璁剧疆娓叉煋鍣ㄧ殑澶у皬
- container.value.appendChild(renderer.domElement);
- scene.background = null;
- // 鍔犺浇GLTF妯″瀷
- const loader = new GLTFLoader();
- loader.load(
- "ThreeModel/test.gltf",
- (gltf) => {
- const model = gltf.scene;
+const painting = (part) => {
+ let newArr = [];
+ // let newArr = flatten(isJob.value);
+ scene.traverse(function (child) {
+ // 妫�鏌ュ璞℃槸鍚﹀叿鏈夋潗璐ㄥ睘鎬�
+ if (child.isMesh) {
+ let materials = child.material;
+ // 濡傛灉鏉愯川鏄崟涓璞¤�屼笉鏄暟缁勶紝鍒欏皢鍏舵斁鍏ユ暟缁勪腑浠ヤ究缁熶竴澶勭悊
+ if (!Array.isArray(materials)) {
+ materials = [materials];
+ }
+ let isString = []; // 鍒ゆ柇鏄惁鏄瓧绗︿覆
+ // 閬嶅巻鏉愯川鏁扮粍骞惰缃鑹�
+ //宸茬粡瀹屾垚鐨勮妭鐐�
+ isJob.value.forEach((item) => {
+ if (
+ item ==
+ "鎶楄泧琛屽噺鎸櫒铻烘爴1,鎶楄泧琛屽噺鎸櫒铻烘爴2,鎶楄泧琛屽噺鎸櫒铻烘爴3,鎶楄泧琛屽噺鎸櫒铻烘爴4" &&
+ item != part
+ ) {
+ isString = item.split(",");
+ materials.forEach(function (material) {
+ if (isString.includes(material.name)) {
+ material.color.setRGB(...GREEN_COLOR);
+ }
+ material.needsUpdate = true; // 寮哄埗鏇存柊鏉愯川
+ });
+ }
+ materials.forEach(function (material) {
+ if (material.name === item) {
+ material.color.setRGB(...GREEN_COLOR);
+ }
+ material.needsUpdate = true; // 寮哄埗鏇存柊鏉愯川
+ });
+ });
+ if (
+ part ==
+ "鎶楄泧琛屽噺鎸櫒铻烘爴1,鎶楄泧琛屽噺鎸櫒铻烘爴2,鎶楄泧琛屽噺鎸櫒铻烘爴3,鎶楄泧琛屽噺鎸櫒铻烘爴4"
+ ) {
+ materials.forEach(function (material) {
+ if (part.split(",").includes(material.name)) {
+ material.color.setRGB(...RED_COLOR);
+ }
+ material.needsUpdate = true; // 寮哄埗鏇存柊鏉愯川
+ });
+ } else {
+ materials.forEach(function (material) {
+ if (material.name == part) {
+ material.color.setRGB(...RED_COLOR);
+ }
+ material.needsUpdate = true; // 寮哄埗鏇存柊鏉愯川
+ });
+ }
- // 璁＄畻妯″瀷鐨勮竟鐣屾骞惰幏鍙栦腑蹇冪偣
- const box = new THREE.Box3().setFromObject(model);
- const center = box.getCenter(new THREE.Vector3());
-
- // 鍒涘缓涓�涓┖瀵硅薄浣滀负鐖惰妭鐐癸紝灏嗗潗鏍囪酱鍜屾ā鍨嬫坊鍔犲埌杩欎釜鐖惰妭鐐�
- const parent = new THREE.Object3D();
- scene.add(parent);
-
- // 灏嗘ā鍨嬬殑浣嶇疆璁剧疆涓烘ā鍨嬬殑杈圭晫妗嗙殑涓績锛岀‘淇濆畠灞呬腑
- model.position.sub(center); // 璁╂ā鍨嬬殑涓績涓庣埗鑺傜偣瀵归綈
-
- // 灏嗗潗鏍囪酱鍔╂墜娣诲姞鍒扮埗鑺傜偣
- // const axesHelper = new THREE.AxesHelper(100); // 杞寸殑闀垮害涓�100 x,y,z鐨勯鑹插垎鍒负锛堢孩鑹诧紝缁胯壊锛岃摑鑹诧級
- // parent.add(axesHelper); // 灏嗗潗鏍囪酱娣诲姞鍒扮埗鑺傜偣
-
- // 灏嗘ā鍨嬫坊鍔犲埌鐖惰妭鐐�
- parent.add(model);
-
- // 纭繚妯″瀷鐨勫ぇ灏忛�傚綋锛屽彲浠ヨ皟鏁存ā鍨嬬殑澶у皬
- model.scale.set(1, 1, 1); // 濡傛灉闇�瑕佺殑璇濆彲浠ョ缉鏀炬ā鍨�
- },
- undefined,
- (error) => {
- console.error("妯″瀷鍔犺浇澶辫触", error);
+ // if (
+ // typeof part ==
+ // "鎶楄泧琛屽噺鎸櫒铻烘爴1,鎶楄泧琛屽噺鎸櫒铻烘爴2,鎶楄泧琛屽噺鎸櫒铻烘爴3,鎶楄泧琛屽噺鎸櫒铻烘爴4"
+ // ) {
+ // newArr = part.split(",");
+ // materials.forEach(function (material) {
+ // if (newArr.includes(material.name)) {
+ // material.color.setRGB(...GREEN_COLOR);
+ // }
+ // if (part.includes(material.name)) {
+ // material.color.setRGB(...RED_COLOR);
+ // } else {
+ // material.color.setRGB(...BASE_COLOR);
+ // }
+ // material.needsUpdate = true; // 寮哄埗鏇存柊鏉愯川
+ // });
+ // } else {
+ // materials.forEach(function (material) {
+ // if (newArr.includes(material.name)) {
+ // material.color.setRGB(...GREEN_COLOR);
+ // } else if (material.name === part) {
+ // material.color.setRGB(...RED_COLOR);
+ // } else {
+ // material.color.setRGB(...BASE_COLOR);
+ // }
+ // // if (newArr.includes(material.name)) {
+ // // material.color.setRGB(...GREEN_COLOR);
+ // // }
+ // material.needsUpdate = true; // 寮哄埗鏇存柊鏉愯川
+ // });
+ // }
}
- );
-
- const metalMaterial = new THREE.MeshStandardMaterial({
- color: 0xaaaaaa,
- metalness: 1,
- roughness: 0.2,
});
-
- const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
- const metalSphere = new THREE.Mesh(sphereGeometry, metalMaterial);
- scene.add(metalSphere);
-
- // 鍒涘缓鐏厜
- const light = new THREE.AmbientLight(0xffffff); // 鐜鍏夋槸涓�绉嶅叏灞�鎬х殑鍏夋簮锛屽潎鍖�鍦扮収浜暣涓満鏅紝骞朵笖涓嶄細鏈夐槾褰辨晥鏋�
- scene.add(light);
-
- const directionalLight = new THREE.DirectionalLight(0xffffff, 3); //杩欐浠ｇ爜鍒涘缓浜嗕竴涓櫧鑹层�佸己搴︿负 1 鐨勫钩琛屽厜婧�
- directionalLight.position.set(300, 300, 300).normalize(); //骞跺皢鍏朵綅缃缃湪 (300, 300, 300)銆傜劧鍚庯紝閫氳繃 normalize() 鏂规硶锛岀‘淇濆钩琛屽厜婧愮殑鍏夌嚎浠ヤ竴涓爣鍑嗙殑鏂瑰悜鐓у皠
- scene.add(directionalLight);
-
- // 璁剧疆鐩告満鍒濆浣嶇疆锛坸,y,z锛�
- camera.position.set(100, 100, 50); // 璁剧疆鐩告満浣嶇疆锛岀‘淇濆彲浠ョ湅鍒版ā鍨�
-
- // 鍒涘缓 OrbitControls 瀹炰緥
- controls = new OrbitControls(camera, renderer.domElement);
- controls.enableZoom = false;
- controls.enablePan = false;
- controls.enableDamping = true; // 鍚敤闃诲凹鏁堟灉
- controls.dampingFactor = 0.25; // 闃诲凹绯绘暟
- controls.screenSpacePanning = false; // 绂佺敤灞忓箷绌洪棿骞崇Щ
- controls.maxPolarAngle = Math.PI / 2; // 闄愬埗鐩告満鍨傜洿鏃嬭浆鐨勮搴︼紝闃叉缈昏浆
- controls.target.set(0, 0, 0); // 纭繚鐩告満濮嬬粓鍥寸粫鍦烘櫙涓績锛堟ā鍨嬩綅缃級
- controls.minDistance = 2; // 鏈�灏忚窛绂伙紝闃叉缂╁緱澶繎
- controls.maxDistance = 500; // 鏈�澶ц窛绂伙紝闃叉缂╁緱澶繙
-
- // 娓叉煋寰幆
- function animate() {
- requestAnimationFrame(animate);
-
- // 鏇存柊鎺у埗鍣�
- controls.update(); // 鍙湁鍦ㄥ惎鐢ㄩ樆灏肩殑鏃跺�欓渶瑕佽皟鐢ㄦ鍑芥暟
-
- // 娓叉煋鍦烘櫙
- renderer.render(scene, camera);
- }
-
- animate();
-
- // 鍝嶅簲绐楀彛澶у皬鍙樺寲;
- window.addEventListener("resize", onWindowResize, false);
-
- function onWindowResize() {
- console.log(window.innerWidth, window.innerHeight);
-
- camera.aspect = window.innerWidth / window.innerHeight;
- camera.updateProjectionMatrix();
- renderer.setSize(window.innerWidth / 2, window.innerHeight / 2);
- }
};
+const cameraAnimate = (
+ targetPosition = CAMERA_POS,
+ part = null,
+ duration = 500
+) => {
+ let startTime = null;
+ const startPosition = {
+ x: camera.position.x,
+ y: camera.position.y,
+ z: camera.position.z,
+ };
+ const distance = {
+ x: targetPosition[0] - startPosition.x,
+ y: targetPosition[1] - startPosition.y,
+ z: targetPosition[2] - startPosition.z,
+ };
+
+ function animate(time) {
+ if (!startTime) startTime = time;
+ const elapsed = time - startTime;
+ const progress = Math.min(elapsed / duration, 1);
+
+ // 浣跨敤绾挎�ф彃鍊艰绠楁柊鐨勪綅缃�
+ camera.position.x = startPosition.x + distance.x * progress;
+ camera.position.y = startPosition.y + distance.y * progress;
+ camera.position.z = startPosition.z + distance.z * progress;
+ xPos.value = Math.floor(camera.position.x);
+ yPos.value = Math.floor(camera.position.y);
+ zPos.value = Math.floor(camera.position.z);
+ if (progress < 1) {
+ requestAnimationFrame(animate);
+ }
+ }
+ requestAnimationFrame(animate);
+ painting(part);
+ renderer.render(scene, camera); // 寮哄埗娓叉煋涓�娆�
+};
+const flatten = (arr) => {
+ return arr.reduce(
+ (acc, val) =>
+ Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val),
+ []
+ );
+};
+// window.addEventListener("resize", () => {
+// // console.log("鍒濆鍖栧満鏅�", window.innerWidth, window.innerHeight);
+// // camera.aspect = window.innerWidth / window.innerHeight;
+// // camera.updateProjectionMatrix();
+// // renderer.setSize(window.innerWidth, window.innerHeight);
+// });
+const nodeList = [
+ "杞悜鏋�",
+ "鎶楄泧琛屽噺鎸櫒铻烘爴1,鎶楄泧琛屽噺鎸櫒铻烘爴2,鎶楄泧琛屽噺鎸櫒铻烘爴3,鎶楄泧琛屽噺鎸櫒铻烘爴4",
+ "鎶楄泧琛屽噺鎸櫒铻烘爴1,鎶楄泧琛屽噺鎸櫒铻烘爴2,鎶楄泧琛屽噺鎸櫒铻烘爴3,鎶楄泧琛屽噺鎸櫒铻烘爴4",
+ "鎶楄泧琛屽噺鎸櫒铻烘爴2",
+ "鎶楄泧琛屽噺鎸櫒铻烘爴3",
+ "鎶楄泧琛屽噺鎸櫒铻烘爴4",
+ "鎶楄泧琛屽噺鎸櫒铻烘爴1,鎶楄泧琛屽噺鎸櫒铻烘爴2,鎶楄泧琛屽噺鎸櫒铻烘爴3,鎶楄泧琛屽噺鎸櫒铻烘爴4",
+ "鎶楄泧琛屽噺鎸櫒铻烘爴2",
+ "鎶楄泧琛屽噺鎸櫒铻烘爴3",
+ "鎶楄泧琛屽噺鎸櫒铻烘爴4",
+ "楂樺害璋冩暣鏉�",
+ "楂樺害璋冩暣鏉�",
+ "楂樺害璋冩暣鏉�",
+ "杞悜鏋�",
+ "杞悜鏋�",
+ "杞悜鏋�",
+ "杞悜鏋�",
+ "杞悜鏋�",
+ "杞悜鏋�",
+ "杞悜鏋�",
+ "鎶楄泧琛屽噺鎸櫒铻烘爴1,鎶楄泧琛屽噺鎸櫒铻烘爴2,鎶楄泧琛屽噺鎸櫒铻烘爴3,鎶楄泧琛屽噺鎸櫒铻烘爴4",
+ "鎶楄泧琛屽噺鎸櫒铻烘爴2",
+ "鎶楄泧琛屽噺鎸櫒铻烘爴3",
+ "鎶楄泧琛屽噺鎸櫒铻烘爴4",
+ "鎶楄泧琛屽噺鎸櫒铻烘爴1,鎶楄泧琛屽噺鎸櫒铻烘爴2,鎶楄泧琛屽噺鎸櫒铻烘爴3,鎶楄泧琛屽噺鎸櫒铻烘爴4",
+ "鎶楄泧琛屽噺鎸櫒铻烘爴1,鎶楄泧琛屽噺鎸櫒铻烘爴2,鎶楄泧琛屽噺鎸櫒铻烘爴3,鎶楄泧琛屽噺鎸櫒铻烘爴4",
+ "楂樺害璋冩暣鏉�",
+ "楂樺害璋冩暣鏉�",
+ "楂樺害璋冩暣鏉�",
+ "杞悜鏋�",
+ "杞悜鏋�",
+ "杞悜鏋�",
+ "杞悜鏋�",
+ "杞悜鏋�",
+ "杞悜鏋�",
+ "杞悜鏋�",
+ "杞悜鏋�",
+];
+
const spanHide = ref();
const spanHide1 = ref();
const handleClickOutside = () => {
@@ -763,9 +1006,9 @@
};
//娣诲姞鎵姏鍊�
const addTorque = () => {
- torqueFrom.value.processSte = Torque.value[0].processSte;
- torqueFrom.value.takeId = Torque.value[0].takeId;
- torqueFrom.value.groupOp = Torque.value[0].groupOp;
+ torqueFrom.value.processSte = queryData.value.setnum;
+ torqueFrom.value.takeId = queryData.value.takeid;
+ torqueFrom.value.groupOp = queryData.value.grop;
if (
torqueFrom.value.torqueSize == null ||
torqueFrom.value.torqueSize == "" ||
@@ -798,10 +1041,214 @@
console.error("娣诲姞澶辫触", error);
});
};
+const timer = ref(null);
+
+const createSocket = (url) => {
+ clearInterval(timer.value);
+ // 鍒涘缓WebSocket杩炴帴
+ //"ws://127.0.0.1:9295/admin"
+ client.value = new WebSocket("ws://115.159.85.185:5173/");
+
+ client.value.onopen = function () {
+ console.log("WebSocket 杩炴帴鎴愬姛");
+ };
+ client.value.onmessage = function (event) {
+ let data = JSON.parse(event.data);
+ (gridData.value = [data.process.proNow].map((item) => {
+ return {
+ articleOne: item.ArticleOne,
+ articleOneid: item.ArticleOneid,
+ articleTowid: item.ArticleTowid,
+ articleTwo: item.ArticleTwo,
+ craftContent: item.CraftContent,
+ craftID: item.CraftID,
+ craftType: item.CraftType,
+ craftsStep: item.CraftsStep,
+ createDate: item.CreateDate,
+ creater: item.Creater,
+ material: item.Material,
+ modifier: item.Modifier,
+ modifyDate: item.ModifyDate,
+ moduleName: item.ModuleName,
+ nodal: item.Nodal,
+ pointAxisHPB: item.PointAxisHPB,
+ pointAxisXYZ: item.PointAxisXYZ,
+ setpNum: item.SetpNum,
+ tools: item.Tools,
+ torqueOne: item.TorqueOne,
+ torqueOneQuantity: item.TorqueOneQuantity,
+ torqueSum: item.TorqueSum,
+ torqueTwo: item.TorqueTwo,
+ torqueTwoQuantity: item.TorqueTwoQuantity,
+ };
+ })),
+ (sunNUm.value = data.process.maxproce);
+ obj.value = [data.process.proNow].map((item) => {
+ return {
+ articleOne: item.ArticleOne,
+ articleOneid: item.ArticleOneid,
+ articleTowid: item.ArticleTowid,
+ articleTwo: item.ArticleTwo,
+ craftContent: item.CraftContent,
+ craftID: item.CraftID,
+ craftType: item.CraftType,
+ craftsStep: item.CraftsStep,
+ createDate: item.CreateDate,
+ creater: item.Creater,
+ material: item.Material,
+ modifier: item.Modifier,
+ modifyDate: item.ModifyDate,
+ moduleName: item.ModuleName,
+ nodal: item.Nodal,
+ pointAxisHPB: item.PointAxisHPB,
+ pointAxisXYZ: item.PointAxisXYZ,
+ setpNum: item.SetpNum,
+ tools: item.Tools,
+ torqueOne: item.TorqueOne,
+ torqueOneQuantity: item.TorqueOneQuantity,
+ torqueSum: item.TorqueSum,
+ torqueTwo: item.TorqueTwo,
+ torqueTwoQuantity: item.TorqueTwoQuantity,
+ };
+ })[0];
+ Torque.value = data.operation.map((item) => {
+ return {
+ createDate: item.CreateDate,
+ creater: item.Creater,
+ deviceCode: item.SystemDeviceCode,
+ groupOp: item.GroupOp,
+ id: item.ID,
+ modifier: item.Modifier,
+ modifyDate: item.ModifyDate,
+ processSte: item.ProcessSte,
+ takeId: item.TakeId,
+ torqueSize: item.TorqueSize,
+ };
+ });
+ xPos.value =
+ gridData.value[0].pointAxisXYZ != null &&
+ gridData.value[0].pointAxisXYZ != 0
+ ? gridData.value[0].pointAxisXYZ.split(",")[0]
+ : -585;
+ yPos.value =
+ gridData.value[0].pointAxisXYZ != null &&
+ gridData.value[0].pointAxisXYZ != 0
+ ? gridData.value[0].pointAxisXYZ.split(",")[1]
+ : 692;
+ zPos.value =
+ gridData.value[0].pointAxisXYZ != null &&
+ gridData.value[0].pointAxisXYZ != 0
+ ? gridData.value[0].pointAxisXYZ.split(",")[2]
+ : 692;
+ isJob.value = data.process.finish.map((item) => {
+ return item.moduleName;
+ });
+ cameraAnimate(
+ [xPos.value, yPos.value, zPos.value],
+ gridData.value[0].moduleName
+ );
+ console.log(
+ "WebSocket 鎺ユ敹鍒版秷鎭�",
+ data,
+ gridData.value,
+ sunNUm.value,
+ Torque.value,
+ isJob.value
+ );
+ };
+ client.value.onclose = function () {
+ console.log("WebSocket 杩炴帴鍏抽棴");
+ timer.value = setTimeout(createSocket, 1000);
+ };
+
+ client.value.onerror = function () {};
+};
+
onMounted(() => {
- document.addEventListener("click", handleClickOutside);
+ console.log("mounted", window.innerWidth, window.innerHeight);
+
+ // 鍒濆鍖栧満鏅�
+ renderer.setSize(window.innerWidth - 20, window.innerHeight - 100);
+ renderer.setClearColor(0xeeeeee); // 璁剧疆鑳屾櫙鑹�
+ // 鍚敤鐗╃悊娓叉煋妯″紡
+ // renderer.physicallyCorrectLights = true;
+ // renderer.toneMapping = THREE.ACESFilmicToneMapping;
+ const mainTag = document.querySelector(".my-three");
+ mainTag.appendChild(renderer.domElement);
+
+ // 娣诲姞浜や簰鎺у埗鍣紙榧犳爣鎷栨嫿缂╂斁锛�
+ const controls = new OrbitControls(camera, renderer.domElement);
+ controls.enablePan = false; //绂佹鍙抽敭鎷栨嫿
+ //鐩告満浣嶇疆涓庤瀵熺洰鏍囩偣鏈�灏忓��
+ controls.minDistance = 600;
+ //鐩告満浣嶇疆涓庤瀵熺洰鏍囩偣鏈�澶у��
+ controls.maxDistance = 1000;
+
+ camera.position.set(...CAMERA_POS);
+ controls.update();
+
+ // 娣诲姞鍏夋簮锛堥噸瑕侊紒鍚﹀垯妯″瀷鍙兘鏄剧ず涓哄叏榛戯級
+ const light = new THREE.DirectionalLight(0xffffff, 3);
+ light.position.set(5, 5, 5);
+ scene.add(light);
+ scene.add(new THREE.AmbientLight(0x404040));
+ renderer.setClearAlpha(0);
+ renderer.setPixelRatio(window.devicePixelRatio);
+ scene.background = null;
+ let dracoLoader = new DRACOLoader();
+ dracoLoader.setDecoderPath("ThreeModel/draco/");
+ dracoLoader.setDecoderConfig({ type: "js" });
+ dracoLoader.preload();
+ // 鍔犺浇GLTF妯″瀷
+ const loader = new GLTFLoader();
+ loader.setDRACOLoader(dracoLoader);
+ loader.load(
+ "ThreeModel/modelDraco.glb", // 鏇挎崲涓轰綘鐨�.gltf鏂囦欢璺緞
+ (gltf) => {
+ const model = gltf.scene;
+ model.scale.set(80, 80, 80);
+ scene.add(model);
+ // 鑷姩灞呬腑妯″瀷锛堝彲閫夛級
+ const box = new THREE.Box3().setFromObject(model);
+ const center = box.getCenter(new THREE.Vector3());
+ model.position.sub(center);
+ },
+ (xhr) => {
+ // 鍔犺浇杩涘害鍥炶皟
+ // console.log(`${(xhr.loaded / xhr.total * 100).toFixed(1)}% loaded`);
+ },
+ (error) => {
+ console.error("鍔犺浇澶辫触:", error);
+ }
+ );
+ // 鍔ㄧ敾寰幆
+ const animate = () => {
+ requestAnimationFrame(animate);
+ controls.update(); // 鍚敤鎺у埗鍣ㄦ椂闇�瑕�
+ renderer.render(scene, camera);
+ };
initData();
- showModel();
+
+ animate();
+ mainTag.addEventListener("wheel", () => {
+ xPos.value = Math.floor(camera.position.x);
+ yPos.value = Math.floor(camera.position.y);
+ zPos.value = Math.floor(camera.position.z);
+ });
+ mainTag.addEventListener("mousemove", () => {
+ xPos.value = Math.floor(camera.position.x);
+ yPos.value = Math.floor(camera.position.y);
+ zPos.value = Math.floor(camera.position.z);
+ });
+ // };
+ document.addEventListener("click", handleClickOutside);
+ console.log(window.webConfig);
+
+ createSocket();
+ // showModel();
+});
+onBeforeUnmount(() => {
+ clearInterval(timer.value);
});
</script>
<style lang="scss" scoped>
@@ -825,7 +1272,7 @@
background-size: 0.3rem 2rem, 2rem 0.3rem, 0.3rem 2rem, 2rem 0.3rem;
padding: 0.2rem;
box-sizing: border-box;
- background-color: rgba(0, 0, 0, 0.3);
+ background-color: rgba(0, 0, 0, 0.1);
overflow: hidden;
.rect {
@@ -858,38 +1305,74 @@
.rect-center {
display: flex;
- justify-content: space-between;
- width: 80%;
+ justify-content: space-around;
+ width: 100%;
margin: 0 auto;
padding: 0.8rem 2.15rem;
box-sizing: border-box;
-
+ position: absolute;
+ left: 50%;
+ top: 5%;
+ transform: translateX(-50%);
.rect-item1 {
display: flex;
flex-direction: column;
width: 16rem;
height: 15.38rem;
- background-image: url("../../../assets/TheCurrentJob/bg.png");
- background-repeat: no-repeat;
- background-size: 100% 100%;
- padding: 0.28rem 0.28rem;
+ // background-image: url("../../../assets/TheCurrentJob/bg.png");
+ // background-repeat: no-repeat;
+ // background-size: 100% 100%;
+ border-radius: 8px;
+ background: linear-gradient(
+ 0deg,
+ rgba(0, 0, 0, 0.001),
+ rgba(0, 0, 0, 0.001)
+ ),
+ rgba(0, 0, 0, 0),
+ linear-gradient(
+ 135deg,
+ rgba(30, 58, 138, 0.6) -3%,
+ rgba(49, 46, 129, 0.6) 99%
+ );
+ box-sizing: border-box;
+ border: 1px solid rgba(96, 165, 250, 0.3);
+ box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1),
+ 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
+ padding: 0.28rem 1.28rem;
box-sizing: border-box;
}
.rect-item2 {
- width: 49.88rem;
- height: 15.38rem;
- border: 0.1rem solid #02cde6;
+ width: 65rem;
+ height: 14.38rem;
+ border-radius: 8px;
+ background: linear-gradient(
+ 0deg,
+ rgba(0, 0, 0, 0.001),
+ rgba(0, 0, 0, 0.001)
+ ),
+ rgba(0, 0, 0, 0),
+ linear-gradient(
+ 135deg,
+ rgba(30, 58, 138, 0.6) -3%,
+ rgba(49, 46, 129, 0.6) 99%
+ );
+ box-sizing: border-box;
+ border: 1px solid rgba(96, 165, 250, 0.3);
+ box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1),
+ 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
padding: 0.69rem 1.44rem;
+ position: relative;
.el-table :deep(.el-table__header th) {
- border: solid 1px #1ac0f6;
+ // border: solid 1px #1ac0f6;
color: white;
}
.consten {
- position: relative;
- top: 0;
+ width: 100%;
+ position: absolute;
+ top: 10rem;
z-index: 999;
}
}
@@ -899,9 +1382,25 @@
flex-direction: column;
width: 11.31rem;
height: 15.38rem;
- background-image: url("../../../assets/TheCurrentJob/bg.png");
- background-repeat: no-repeat;
- background-size: 100% 100%;
+ // background-image: url("../../../assets/TheCurrentJob/bg.png");
+ // background-repeat: no-repeat;
+ // background-size: 100% 100%;
+ border-radius: 8px;
+ background: linear-gradient(
+ 0deg,
+ rgba(0, 0, 0, 0.001),
+ rgba(0, 0, 0, 0.001)
+ ),
+ rgba(0, 0, 0, 0),
+ linear-gradient(
+ 135deg,
+ rgba(30, 58, 138, 0.6) -3%,
+ rgba(49, 46, 129, 0.6) 99%
+ );
+ box-sizing: border-box;
+ border: 1px solid rgba(96, 165, 250, 0.3);
+ box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1),
+ 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
padding: 0.28rem 0.28rem;
box-sizing: border-box;
}
@@ -921,6 +1420,19 @@
// border-bottom: solid 1px #1ac2f7;
// color: white;
// }
+.el-table {
+ --el-table-border-color: transparent;
+ --el-table-border: none;
+ --el-table-text-color: #bdbdbe;
+ --el-table-header-text-color: #bdbdbe;
+ --el-table-row-hover-bg-color: transparent;
+ --el-table-current-row-bg-color: transparent;
+ --el-table-header-bg-color: transparent;
+ --el-table-bg-color: transparent;
+ --el-table-tr-bg-color: transparent;
+ --el-table-expanded-cell-bg-color: transparent;
+}
+
.el-table :deep(.el-table__row td) {
border: solid 1px #1ac2f7;
color: white;
@@ -931,9 +1443,9 @@
color: #1ac2f7;
}
-.el-table :deep(.el-table__body-wrapper) {
- background-color: #1ac2f7;
-}
+// .el-table :deep(.el-table__body-wrapper) {
+// background-color: #1ac2f7;
+// }
:deep(.el-popper) {
background-color: #ad2525;
--
Gitblit v1.9.3