功能新增

pengwei

2025-04-27 366612bd8e8b88d02a98edf508f96d7add23ff9f

 ÏîÄ¿´úÂë/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; /* è®¾ç½®ä¸ºWebKit内核的弹性盒子模型 */
                        -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; /* è®¾ç½®ä¸ºWebKit内核的弹性盒子模型 */
                      -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; /* è®¾ç½®ä¸ºWebKit内核的弹性盒子模型 */
                        -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; /* è®¾ç½®ä¸ºWebKit内核的弹性盒子模型 */
                        -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; /* è®¾ç½®ä¸ºWebKit内核的弹性盒子模型 */
                        -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 }}&nbsp;&nbsp;Y:{{ yPos }}&nbsp;&nbsp;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);

  // è®¾ç½®ç›¸æœºåˆå§‹ä½ç½®ï¼ˆx,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;