From e0a31f7013898540948f4d4d86ade1a5414b44d4 Mon Sep 17 00:00:00 2001
From: pengwei <2071057782@qq.com>
Date: 星期四, 20 三月 2025 17:32:42 +0800
Subject: [PATCH] 优化数据大屏页面
---
项目代码/client/src/views/tts/TheCurrentJob/Startjob.vue | 263 +++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 245 insertions(+), 18 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 7c7dd51..4ef70a6 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"
@@ -1,7 +1,7 @@
<template>
<div class="Startjob">
- <div class="rect">
- <div class="rect-top" style="position: relative">
+ <div class="rect" style="position: relative">
+ <div class="rect-top">
<img src="@/assets/TheCurrentJob/left.png" alt="" />
<img
style="margin-left: -1.5rem; margin-right: 4rem"
@@ -111,6 +111,7 @@
>浠诲姟璇︽儏锛�</span
>
<span
+ ref="spanHide1"
@click="showDetail(!contentShow1)"
style="color: #1ac2f7; font-size: 0.88rem; cursor: pointer"
>鏌ョ湅</span
@@ -192,6 +193,7 @@
>
<template #default="scope">
<span
+ ref="spanHide"
@click="showDetail1(!contentShow)"
style="
color: #1ac2f7;
@@ -277,27 +279,27 @@
</div>
</div>
</div>
- <div class="rect-item3">
- <div style="overflow: hidden">
+ <div class="rect-item3" style="position: relative">
+ <div style="overflow: hidden; padding-bottom: 1rem">
<img src="@/assets/TheCurrentJob/icon/icon.png" alt="" />
<span style="color: rgba(26, 201, 255, 1); font-size: 0.88rem"
>鍔涚煩鍊兼樉绀�</span
>
-
- <el-scrollbar>
+ <el-scrollbar ref="scrollbarRef" height="130rpx">
<div
+ ref="innerRef"
style="
display: flex;
justify-content: center;
flex-direction: column;
padding-left: 1.5rem;
padding-top: 0.5rem;
- padding-bottom: 1.5rem;
+ padding-bottom: 1rem;
box-sizing: border-box;
"
>
<span
- style="color: #ffffff; font-size: 1rem; margin: 0.5rem 0"
+ style="color: #ffffff; font-size: 1rem; margin: 0.4rem 0"
v-for="(item, index) in Torque"
:key="item.id"
>{{
@@ -305,7 +307,44 @@
}}</span
>
</div>
+ <el-input
+ v-if="isTorque"
+ v-model.number="torqueFrom.torqueSize"
+ style="font-size: 0.75rem; height: 2rem"
+ placeholder="璇疯緭鍏ユ壄鍔涘��"
+ />
+ <!-- @blur="addTorque" -->
</el-scrollbar>
+ </div>
+ <div
+ style="
+ position: absolute;
+ bottom: -2.3rem;
+ left: -0.1rem;
+ width: 100%;
+ "
+ >
+ <el-button
+ v-if="!isTorque"
+ type="primary"
+ style="font-size: 0.75rem; width: 100%; height: 2rem"
+ @click="showTorque"
+ >鎵嬪姩妯℃嫙鎵姏鍊�</el-button
+ >
+ <div v-else style="display: flex; justify-content: space-between">
+ <el-button
+ type="primary"
+ style="font-size: 0.75rem; width: 100%; height: 2rem"
+ @click="addTorque"
+ >纭</el-button
+ >
+ <el-button
+ type="primary"
+ style="font-size: 0.75rem; width: 100%; height: 2rem"
+ @click="isTorque = false"
+ >鍙栨秷</el-button
+ >
+ </div>
</div>
</div>
</div>
@@ -316,13 +355,14 @@
display: flex;
justify-content: center;
align-items: center;
- z-index: 999;
position: absolute;
- top: 42%;
- left: 15%;
+ top: 33%;
+ left: 50%;
+ transform: translateX(-50%);
"
>
- <model-gltf
+ <div ref="container" style="width: 100%; height: 100%"></div>
+ <!-- <model-gltf
:width="400"
:height="400"
:backgroundAlpha="0"
@@ -331,14 +371,17 @@
:controlsOptions="{
enableZoom,
}"
- />
+ /> -->
</div>
<div
style="
display: flex;
justify-content: center;
align-items: center;
- margin-top: 30rem;
+ position: absolute;
+ bottom: 5%;
+ left: 50%;
+ transform: translateX(-50%);
"
>
<el-button
@@ -409,7 +452,7 @@
</div>
</template>
<script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, nextTick } from "vue";
import {
GetScreenData,
GetPre,
@@ -417,11 +460,20 @@
Complete,
GetTorque,
ChangeStatus,
+ AddTorque, //娣诲姞鎵姏鍊兼帴鍙�
} from "@/api/newapi/Thecurrentjob";
import { GetPageData } from "@/api/newapi/NjTask";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { ModelCollada, ModelGltf } from "vue-3d-model";
+import { formatTime } from "@/utils/index.js";
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; //gltf
+
+const container = ref(null);
+
+let scene, camera, renderer, controls;
const router = useRouter();
const gridData = ref([]);
@@ -451,7 +503,26 @@
takeid: "",
setnum: 0,
});
+
+//鎵姏鍊�
+const torqueFrom = ref({
+ creater: JSON.parse(localStorage.getItem("user")).userName, //褰撳墠鐧婚檰浜�
+ createDate: formatTime(new Date()), //褰撳墠鏃堕棿
+ modifier: JSON.parse(localStorage.getItem("user")).userName,
+ modifyDate: formatTime(new Date()),
+ id: 0,
+ deviceCode: "", //璁惧缂栧彿
+ takeId: "", //浠诲姟id
+ groupOp: "", //鐝粍
+ processSte: 0, //褰撳墠姝ラ
+ torqueSize: null, //杈撳叆鐨勬壄鍔涘��
+});
+
+const isTorque = ref(false);
const flag = ref(false);
+
+const innerRef = ref();
+const scrollbarRef = ref();
//涓婁竴姝�
const Previous = (val) => {
from.value.group = info.value.grouptype;
@@ -513,7 +584,6 @@
};
//鏌ョ湅鏁版嵁
const checko = () => {
- console.log(info.value);
GetPageData({
page: 1,
rows: 10,
@@ -532,7 +602,6 @@
},
],
}).then((res) => {
- console.log(res);
taskData.value = res.rows;
});
};
@@ -542,6 +611,7 @@
setnum: "",
});
const initData = () => {
+ console.log(obj.value);
GetScreenData({
group: info.value.grouptype,
takeid: info.value.njtakeid,
@@ -566,8 +636,165 @@
});
};
+const showModel = () => {
+ scene = new THREE.Scene();
+ console.log("model", window.innerWidth, window.innerHeight);
+
+ // 鍒涘缓鐩告満 (瑙嗚锛屽楂樻瘮锛岃繎瑁佸壀闈紝杩滆鍓潰)
+ camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
+
+ // 鍒涘缓娓叉煋鍣�
+ 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 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);
+ }
+ );
+
+ 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 spanHide = ref();
+const spanHide1 = ref();
+const handleClickOutside = () => {
+ if (spanHide.value && !spanHide.value.contains(event.target)) {
+ contentShow.value = false;
+ }
+ if (spanHide1.value && !spanHide1.value.contains(event.target)) {
+ contentShow1.value = false;
+ }
+};
+const showTorque = () => {
+ isTorque.value = true;
+ nextTick(() => {
+ if (innerRef.value.clientHeight > 150) {
+ scrollbarRef.value.setScrollTop(innerRef.value.clientHeight);
+ }
+ });
+};
+//娣诲姞鎵姏鍊�
+const addTorque = () => {
+ torqueFrom.value.processSte = Torque.value[0].processSte;
+ torqueFrom.value.takeId = Torque.value[0].takeId;
+ torqueFrom.value.groupOp = Torque.value[0].groupOp;
+ if (
+ torqueFrom.value.torqueSize == null ||
+ torqueFrom.value.torqueSize == "" ||
+ torqueFrom.value.torqueSize == 0
+ ) {
+ ElMessage({
+ message: "璇疯緭鍏ュ姏鐭╁��",
+ type: "warning",
+ });
+ return;
+ }
+
+ AddTorque(torqueFrom.value)
+ .then((res) => {
+ console.log("娣诲姞鎴愬姛", res);
+ ElMessage({
+ message: "娣诲姞鎴愬姛",
+ type: "success",
+ });
+ isTorque.value = false;
+ initData();
+ })
+ .catch((error) => {
+ console.error("娣诲姞澶辫触", error);
+ });
+};
onMounted(() => {
+ document.addEventListener("click", handleClickOutside);
initData();
+ showModel();
});
</script>
<style lang="scss" scoped>
@@ -625,7 +852,7 @@
.rect-center {
display: flex;
justify-content: space-between;
- width: 170vh;
+ width: 80%;
margin: 0 auto;
padding: 0.8rem 2.15rem;
box-sizing: border-box;
--
Gitblit v1.9.3