From 1288a7890deb3b180b1e8df7015b1036514c4e71 Mon Sep 17 00:00:00 2001
From: pengwei <2071057782@qq.com>
Date: 星期四, 27 三月 2025 09:07:12 +0800
Subject: [PATCH] 3.27优化
---
项目代码/client/src/views/tts/TheCurrentJob/Startjob.vue | 616 ++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 472 insertions(+), 144 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..0a01bb0 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,8 +171,9 @@
>
</span>
</div>
- <div style="position: absolute; width: 47rem; height: 2.5rem">
+ <div style="position: absolute; width: 62rem; height: 2.5rem">
<el-table
+ empty-text="鏆傛棤鏁版嵁"
style="margin-top: 0.88rem"
:data="gridData"
width="100%"
@@ -189,7 +191,7 @@
<el-table-column
property="craftsStep"
label="宸ヨ壓椤圭偣/姝ラ"
- min-width="30%"
+ min-width="13%"
>
<template #default="scope">
<span
@@ -203,16 +205,41 @@
"
>{{ scope.row.craftsStep }}
</span></template
- ></el-table-column
- >
+ >
+ </el-table-column>
+
<el-table-column
property="craftContent"
label="宸ヨ壓鍐呭"
- min-width="70%"
+ min-width="40%"
>
<template #default="scope">
+ <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">
<span
- @click="true"
+ ref="spanHide"
style="
color: #ffffff;
font-size: 0.88rem;
@@ -222,13 +249,34 @@
overflow: hidden; /* 闅愯棌瓒呭嚭鑼冨洿鐨勫唴瀹� */
text-overflow: ellipsis; /* 浣跨敤鐪佺暐鍙� */
"
- >{{ scope.row.craftContent }}</span
+ >{{ scope.row.tools }}
+ </span></template
+ ></el-table-column
+ >
+ <el-table-column
+ property="craftsStep"
+ label="鐗╂枡"
+ min-width="15%"
+ >
+ <template #default="scope">
+ <span
+ 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
></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="{
@@ -313,7 +361,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>
@@ -357,12 +408,17 @@
justify-content: center;
align-items: center;
position: absolute;
- top: 33%;
+ top: 38%;
left: 50%;
transform: translateX(-50%);
+ z-index: 999;
"
>
- <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"
@@ -373,6 +429,11 @@
enableZoom,
}"
/> -->
+ </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="
@@ -403,7 +464,7 @@
>
<el-button
:disabled="obj.setpNum == sunNUm"
- @click="Next(false)"
+ @click="DialogVisible = true"
type="primary"
:style="{
width: '5rem',
@@ -438,13 +499,30 @@
<!-- 寮哄埗璺宠浆纭妗� -->
<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"
>鍙栨秷</el-button
>
<el-button style="width: 5rem" type="primary" @click="Next(true)">
+ 纭
+ </el-button>
+ </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>
@@ -471,15 +549,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 +568,7 @@
const Torque = ref("");
const showDetail1 = (va1) => {
contentShow1.value = false;
- contentShow.value = va1;
+ contentShow.value = true;
};
const showDetail = (va1) => {
contentShow1.value = va1;
@@ -524,16 +602,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 +642,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 +694,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 +731,269 @@
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;
+ // 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;
+ // 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;
+ // cameraAnimate(
+ // [xPos.value, yPos.value, zPos.value],
+ // nodeList[gridData.value[0].setpNum]
+ // );
+ // GetTorque(queryData.value).then((res) => {
+ // Torque.value = res.data;
+ // });
+ // return;
+ // }
+ 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 +1014,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 +1049,85 @@
console.error("娣诲姞澶辫触", error);
});
};
+
onMounted(() => {
- document.addEventListener("click", handleClickOutside);
+ // 鍒濆鍖栧満鏅�
+ renderer.setSize(window.innerWidth / 1.01, window.innerHeight / 2.1);
+ 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 = 650;
+ //鐩告満浣嶇疆涓庤瀵熺洰鏍囩偣鏈�澶у��
+ controls.maxDistance = 900;
+
+ 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);
+
+ // showModel();
});
</script>
<style lang="scss" scoped>
@@ -877,10 +1203,11 @@
}
.rect-item2 {
- width: 49.88rem;
+ width: 65rem;
height: 15.38rem;
border: 0.1rem solid #02cde6;
padding: 0.69rem 1.44rem;
+ position: relative;
.el-table :deep(.el-table__header th) {
border: solid 1px #1ac0f6;
@@ -888,8 +1215,9 @@
}
.consten {
- position: relative;
- top: 0;
+ width: 100%;
+ position: absolute;
+ top: 10rem;
z-index: 999;
}
}
--
Gitblit v1.9.3