From 10298137c4d5e646a6e297c4fa1c250c70432ca0 Mon Sep 17 00:00:00 2001
From: pengwei <2071057782@qq.com>
Date: 星期二, 08 四月 2025 17:31:37 +0800
Subject: [PATCH] 最新代码
---
项目代码/client/src/views/tts/TheCurrentJob/Startjob.vue | 390 +++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 287 insertions(+), 103 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 0a01bb0..ff362d2 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"
@@ -171,21 +171,20 @@
>
</span>
</div>
- <div style="position: absolute; width: 62rem; height: 2.5rem">
+ <div style="width: 62rem; height: 2.5rem">
<el-table
empty-text="鏆傛棤鏁版嵁"
- style="margin-top: 0.88rem"
+ 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
@@ -194,18 +193,27 @@
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-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
@@ -238,20 +246,27 @@
>
<el-table-column property="tools" label="宸ュ叿" min-width="12%">
<template #default="scope">
- <span
- ref="spanHide"
- 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></template
- ></el-table-column
+ <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"
@@ -259,22 +274,30 @@
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-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-show="contentShow">
+ <!-- <div class="consten" v-show="contentShow">
<el-table
empty-text="鏆傛棤鏁版嵁"
:data="gridData"
@@ -324,7 +347,7 @@
></el-table-column
>
</el-table>
- </div>
+ </div> -->
</div>
</div>
<div class="rect-item3" style="position: relative">
@@ -407,11 +430,6 @@
display: flex;
justify-content: center;
align-items: center;
- position: absolute;
- top: 38%;
- left: 50%;
- transform: translateX(-50%);
- z-index: 999;
"
>
<div
@@ -442,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
@@ -531,7 +550,7 @@
</div>
</template>
<script setup>
-import { ref, onMounted, nextTick } from "vue";
+import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
import {
GetScreenData,
GetPre,
@@ -582,6 +601,8 @@
takeid: "",
setnum: 0,
});
+
+const client = ref(null);
//鎵姏鍊�
const torqueFrom = ref({
@@ -736,35 +757,6 @@
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;
- // 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.proNow;
@@ -1049,10 +1041,134 @@
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:9098/");
+
+ 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(() => {
+ console.log("mounted", window.innerWidth, window.innerHeight);
+
// 鍒濆鍖栧満鏅�
- renderer.setSize(window.innerWidth / 1.01, window.innerHeight / 2.1);
+ renderer.setSize(window.innerWidth - 20, window.innerHeight - 100);
renderer.setClearColor(0xeeeeee); // 璁剧疆鑳屾櫙鑹�
// 鍚敤鐗╃悊娓叉煋妯″紡
// renderer.physicallyCorrectLights = true;
@@ -1064,9 +1180,9 @@
const controls = new OrbitControls(camera, renderer.domElement);
controls.enablePan = false; //绂佹鍙抽敭鎷栨嫿
//鐩告満浣嶇疆涓庤瀵熺洰鏍囩偣鏈�灏忓��
- controls.minDistance = 650;
+ controls.minDistance = 600;
//鐩告満浣嶇疆涓庤瀵熺洰鏍囩偣鏈�澶у��
- controls.maxDistance = 900;
+ controls.maxDistance = 1000;
camera.position.set(...CAMERA_POS);
controls.update();
@@ -1126,8 +1242,13 @@
});
// };
document.addEventListener("click", handleClickOutside);
+ console.log(window.webConfig);
+ createSocket();
// showModel();
+});
+onBeforeUnmount(() => {
+ clearInterval(timer.value);
});
</script>
<style lang="scss" scoped>
@@ -1151,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 {
@@ -1184,33 +1305,67 @@
.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: 65rem;
- height: 15.38rem;
- border: 0.1rem solid #02cde6;
+ 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;
}
@@ -1227,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;
}
@@ -1249,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;
@@ -1259,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