3.27优化

pengwei

2025-03-27 1288a7890deb3b180b1e8df7015b1036514c4e71

 ÏîÄ¿´úÂë/client/src/views/tts/TheCurrentJob/Startjob.vue

@@ -1,6 +1,6 @@
<template>
  <div class="Startjob">
    <div class="rect">
    <div class="rect" style="position: relative">
      <div class="rect-top">
        <img src="@/assets/TheCurrentJob/left.png" alt="" />
        <img
@@ -8,7 +8,7 @@
          src="@/assets/TheCurrentJob/left1.png"
          alt=""
        />
        <span>开始作业（机械）</span>
        <span>开始作业（{{ title }}）</span>
        <img
          style="margin-right: -1.5rem; margin-left: 4rem"
          src="@/assets/TheCurrentJob/right1.png"
@@ -17,116 +17,117 @@
        <img src="@/assets/TheCurrentJob/right.png" alt="" />
      </div>
      <div class="rect-center">
        <div style="display: flex; justify-content: space-between">
          <div class="rect-item1">
            <div>
              <img src="@/assets/TheCurrentJob/icon/icon.png" alt="" />
              <span style="color: rgba(26, 201, 255, 1); font-size: 0.88rem"
                >任务作业信息</span
        <div class="rect-item1">
          <div style="margin-top: 0.5rem">
            <img src="@/assets/TheCurrentJob/icon/icon.png" alt="" />
            <span style="color: rgba(26, 201, 255, 1); font-size: 1.5rem"
              >任务作业信息</span
            >
          </div>
          <div style="height: 100%; width: 100%">
            <div style="width: 100%; padding-left: 1rem">
              <div
                style="
                  color: #1ac2f7;
                  font-size: 1rem;
                  display: flex;
                  margin-top: 0.5rem;
                "
              >
            </div>
            <div style="height: 100%; width: 100%">
              <div style="width: 100%">
                <span style="width: 6rem; text-align: right; display: block"
                  >任务名称：</span
                ><span>{{ info.takename }}</span>
              </div>
              <div
                style="
                  color: #1ac2f7;
                  font-size: 1rem;
                  display: flex;
                  margin-top: 0.4rem;
                "
              >
                <span style="width: 6rem; text-align: right; display: block"
                  >技术员：</span
                ><span>{{ info.jishuyuan }}</span>
              </div>
              <div
                style="
                  color: #1ac2f7;
                  font-size: 1rem;
                  display: flex;
                  margin-top: 0.4rem;
                "
              >
                <span style="width: 6rem; text-align: right; display: block"
                  >检修工厂：</span
                ><span>{{ info.gonzhang }}</span>
              </div>
              <div
                style="
                  color: #1ac2f7;
                  font-size: 1rem;
                  display: flex;
                  margin-top: 0.4rem;
                "
              >
                <span style="width: 6rem; text-align: right; display: block"
                  >质检员：</span
                ><span>{{ info.zhijianyuan }}</span>
              </div>
              <div
                style="
                  color: #1ac2f7;
                  font-size: 1rem;
                  display: flex;
                  margin-top: 0.4rem;
                "
              >
                <span style="width: 6rem; text-align: right; display: block"
                  >力矩作业员：</span
                ><span>{{ info.lijuzouyeyuan }}</span>
              </div>
              <div
                style="
                  color: #1ac2f7;
                  font-size: 1rem;
                  display: flex;
                  margin-top: 0.4rem;
                "
              >
                <span style="width: 6rem; text-align: right; display: block"
                  >辅助员：</span
                ><span>{{ info.fuzyuan }}</span>
              </div>
              <div
                style="
                  position: absolute;
                  color: #1ac2f7;
                  font-size: 1rem;
                  display: flex;
                  margin-top: 0.4rem;
                "
              >
                <span style="width: 6rem; text-align: right; display: block"
                  >任务详情：</span
                >
                <span
                  ref="spanHide1"
                  @click="showDetail(!contentShow1)"
                  style="color: #1ac2f7; font-size: 0.88rem; cursor: pointer"
                  >查看</span
                >
                <div
                  v-if="contentShow1"
                  style="
                    color: #1ac2f7;
                    font-size: 0.81rem;
                    display: flex;
                    margin-top: 0.4rem;
                    position: relative;
                    top: 1.5rem;
                    left: -3rem;
                    width: 49rem;
                  "
                >
                  <span style="width: 6rem; text-align: right; display: block"
                    >任务名称：</span
                  ><span>转向架</span>
                </div>
                <div
                  style="
                    color: #1ac2f7;
                    font-size: 0.81rem;
                    display: flex;
                    margin-top: 0.4rem;
                  "
                >
                  <span style="width: 6rem; text-align: right; display: block"
                    >技术员：</span
                  ><span>张三</span>
                </div>
                <div
                  style="
                    color: #1ac2f7;
                    font-size: 0.81rem;
                    display: flex;
                    margin-top: 0.4rem;
                  "
                >
                  <span style="width: 6rem; text-align: right; display: block"
                    >检修工厂：</span
                  ><span>李四</span>
                </div>
                <div
                  style="
                    color: #1ac2f7;
                    font-size: 0.81rem;
                    display: flex;
                    margin-top: 0.4rem;
                  "
                >
                  <span style="width: 6rem; text-align: right; display: block"
                    >质检员：</span
                  ><span>七七</span>
                </div>
                <div
                  style="
                    color: #1ac2f7;
                    font-size: 0.81rem;
                    display: flex;
                    margin-top: 0.4rem;
                  "
                >
                  <span style="width: 6rem; text-align: right; display: block"
                    >力矩作业员：</span
                  ><span>王五</span>
                </div>
                <div
                  style="
                    color: #1ac2f7;
                    font-size: 0.81rem;
                    display: flex;
                    margin-top: 0.4rem;
                  "
                >
                  <span style="width: 6rem; text-align: right; display: block"
                    >辅助员：</span
                  ><span>小刘</span>
                </div>
                <div
                  style="
                    color: #1ac2f7;
                    font-size: 0.81rem;
                    display: flex;
                    margin-top: 0.4rem;
                  "
                >
                  <span style="width: 6rem; text-align: right; display: block"
                    >任务详情：</span
                  >
                  <span
                    style="color: #1ac2f7; font-size: 0.88rem; cursor: pointer"
                    >查看</span
                  >
                  <!-- <el-popover placement="bottom" :width="600" trigger="click">
                  <template #reference>
                    <span
                      style="
                        color: #1ac2f7;
                        font-size: 0.88rem;
                        cursor: pointer;
                      "
                      >查看</span
                    ></template
                  >
                  <el-table
                    :data="gridData"
                    empty-text="暂无数据"
                    :data="taskData"
                    width="100%"
                    :header-cell-style="{
                      color: '#fff',
@@ -138,38 +139,41 @@
                      background: '#1373A8',
                    }"
                  >
                    <el-table-column property="date" label="车型" />
                    <el-table-column property="name" label="车组" />
                    <el-table-column property="address" label="股道" />
                    <el-table-column property="address" label="车厢号位置" />
                    <el-table-column property="address" label="转向架位置" />
                    <el-table-column property="address" label="检修班组" />
                    <el-table-column property="trainKind" label="车型" />
                    <el-table-column property="trainNum" label="车组" />
                    <el-table-column property="track" label="股道" />
                    <el-table-column property="coachNum" label="车厢号位置" />
                    <el-table-column property="bogie" label="转向架位置" />
                    <el-table-column property="processDept" label="检修班组" />
                  </el-table>
                </el-popover> -->
                </div>
              </div>
            </div>
          </div>
          <div class="rect-item2">
            <div>
              <span style="color: rgba(26, 200, 254, 1); font-size: 0.75rem"
                >工艺项点/步骤共<span style="font-size: 1rem; font-weight: bold"
                  >23</span
                >
              </span>
              <span
                style="
                  margin-left: 1rem;
                  color: rgba(26, 200, 254, 1);
                  font-size: 0.75rem;
                "
                >当前作业项点/步骤<span
                  style="font-size: 1rem; font-weight: bold"
                  >3</span
                >
              </span>
            </div>
        </div>
        <div class="rect-item2">
          <div>
            <span style="color: rgba(26, 200, 254, 1); font-size: 1.2rem"
              >工艺项点/步骤共<span
                style="font-size: 1.5rem; font-weight: bold"
                >{{ sunNUm }}</span
              >
            </span>
            <span
              style="
                margin-left: 1rem;
                color: rgba(26, 200, 254, 1);
                font-size: 1.2rem;
              "
              >当前作业项点/步骤<span
                style="font-size: 1.5rem; font-weight: bold"
                >{{ obj.setpNum }}</span
              >
            </span>
          </div>
          <div style="position: absolute; width: 62rem; height: 2.5rem">
            <el-table
              empty-text="暂无数据"
              style="margin-top: 0.88rem"
              :data="gridData"
              width="100%"
@@ -185,103 +189,954 @@
              }"
            >
              <el-table-column
                property="date"
                property="craftsStep"
                label="工艺项点/步骤"
                min-width="30%"
                min-width="13%"
              >
                <template #default="scope">
                  <span
                    style="color: #1ac2f7; font-size: 0.88rem"
                  ></span></template
              ></el-table-column>
                    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-table-column
                property="name"
                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; /* è®¾ç½®ä¸º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">
                  <span
                    ref="spanHide"
                    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></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; /* è®¾ç½®ä¸ºWebKit内核的弹性盒子模型 */
                      -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-show="contentShow">
              <el-table
                empty-text="暂无数据"
                :data="gridData"
                width="100%"
                :header-cell-style="{
                  height: '1.61rem',
                  color: '#fff',
                  background: '#0A5B91',
                  fontSize: '0.88rem',
                }"
                :cell-style="{
                  color: '#fff',
                  background: '#147BAF',
                }"
              >
                <el-table-column
                  property="craftsStep"
                  label="工艺内容"
                  min-width="30%"
                >
                  <template #default="scope">
                    <span @click="true" style="color: #fff; font-size: 0.88rem"
                      >{{ scope.row.craftContent }}
                    </span></template
                  ></el-table-column
                >
                <el-table-column
                  property="craftsStep"
                  label="工具"
                  min-width="10%"
                >
                  <template #default="scope">
                    <span style="color: #ffffff">{{
                      scope.row.tools
                    }}</span></template
                  ></el-table-column
                >
                <el-table-column
                  property="craftsStep"
                  label="物料"
                  min-width="10%"
                >
                  <template #default="scope">
                    <span style="color: #ffffff">{{
                      scope.row.material
                    }}</span></template
                  ></el-table-column
                >
              </el-table>
            </div>
          </div>
        </div>
        <div class="rect-item3">
          <div>
        <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 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: 1rem;
                  box-sizing: border-box;
                "
              >
                <span
                  style="color: #ffffff; font-size: 1rem; margin: 0.4rem 0"
                  v-for="(item, index) in Torque"
                  :key="item.id"
                  >{{
                    index + 1 + "、" + item.torqueSize + "&nbsp;" + "N*m"
                  }}</span
                >
              </div>
              <el-input
                type="number"
                v-if="isTorque"
                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>
          <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>
      <div class="rect-content">
      <div
        ref="screenDom"
        style="
          margin: 0 auto;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          top: 38%;
          left: 50%;
          transform: translateX(-50%);
          z-index: 999;
        "
      >
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            width: 21.31rem;
            height: 26.88rem;
            background-color: rgba(25, 189, 241, 0.1);
            color: rgba(16, 16, 16, 1);
            font-size: 0.75rem;
            border: 0.06rem solid rgba(26, 200, 254, 1);
          "
          ref="container"
          class="my-three"
          style="width: 100%; height: 100%"
        ></div>
        <!-- <model-gltf
          :width="400"
          :height="400"
          :backgroundAlpha="0"
          :backgroundColor="'#000000'"
          src="ThreeModel/test.gltf"
          :controlsOptions="{
            enableZoom,
          }"
        /> -->
      </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
        >
          <span style="color: rgba(26, 194, 247, 1); font-size: 1.25rem"
            >爆炸图显示</span
          >
        </div>
      </div>
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 4.25rem;
          position: absolute;
          bottom: 5%;
          left: 50%;
          transform: translateX(-50%);
        "
      >
        <el-button
          :disabled="obj.setpNum == 1"
          @click="Previous(false)"
          type="primary"
          style="
            width: 5rem;
            height: 1.88rem;
            background-color: rgba(164, 173, 179, 1);
            color: rgba(255, 255, 255, 1);
            font-size: 0.88rem;
          "
          :style="{
            width: '5rem',
            height: '1.88rem',
            background:
              obj.setpNum == 1
                ? 'rgba(164, 173, 179, 1)'
                : 'rgba(26, 194, 247, 1)',
            color: 'rgba(255, 255, 255, 1)',
            fontSize: '0.88rem;',
          }"
          >上一步</el-button
        >
        <el-button
          :disabled="obj.setpNum == sunNUm"
          @click="DialogVisible = true"
          type="primary"
          style="
            width: 5rem;
            height: 1.88rem;
            background-color: rgba(26, 194, 247, 1);
            color: rgba(255, 255, 255, 1);
            font-size: 0.88rem;
          "
          :style="{
            width: '5rem',
            height: '1.88rem',
            background:
              obj.setpNum != sunNUm
                ? 'rgba(26, 194, 247, 1)'
                : 'rgba(164, 173, 179, 1)',
            color: ' rgba(255, 255, 255, 1)',
            fontSize: '0.88rem',
          }"
          >下一步</el-button
        >
        <el-button
          :disabled="obj.setpNum != sunNUm"
          @click="Completee"
          type="primary"
          style="
            height: 1.88rem;
            width: 5rem;
            background-color: rgba(164, 173, 179, 1);
            color: rgba(255, 255, 255, 1);
            font-size: 0.88rem;
          "
          :style="{
            height: '1.88rem',
            width: '5rem',
            background:
              obj.setpNum == sunNUm
                ? 'rgba(26, 194, 247, 1)'
                : 'rgba(164, 173, 179, 1)',
            color: 'rgba(255, 255, 255, 1)',
            fontSize: '0.88rem',
          }"
          >完成作业</el-button
        >
      </div>
    </div>

    <!-- å¼ºåˆ¶è·³è½¬ç¡®è®¤æ¡† -->
    <el-dialog v-model="centerDialogVisible" title="确认" width="300" center>
      <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>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { color } from "echarts";
import { ref } from "vue";
import { ref, onMounted, nextTick } from "vue";
import {
  GetScreenData,
  GetPre,
  GetNext,
  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
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";

const container = ref(null);

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("");
title.value = history.state?.title ? history.state?.title : "机械";
const enableZoom = ref(false);
const obj = ref({});
const sunNUm = ref(0);
const Torque = ref("");
const showDetail1 = (va1) => {
  contentShow1.value = false;
  contentShow.value = true;
};
const showDetail = (va1) => {
  contentShow1.value = va1;
  contentShow.value = false;
  checko();
};
const taskData = ref([]);
const centerDialogVisible = ref(false);
const from = ref({
  group: "",
  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 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;
  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;
    });
  });
};
//下一步
const Next = (val) => {
  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;
    });
  });
};
//完成
const Completee = () => {
  from.value.gruops = info.value.grouptype;
  from.value.id = info.value.njtakeid;
  from.value.creater = info.value.creater;

  ChangeStatus(from.value).then((res) => {
    ElMessage({
      message: "操作完成",
      type: "success",
    });
    router.push("/Thecurrentjob");
  });
};
//查看数据
const checko = () => {
  GetPageData({
    page: 1,
    rows: 10,
    total: 100,
    tableName: "",
    sort: "",
    order: "",
    wheres: "",
    export: true,
    value: "",
    filter: [
      {
        name: "njtaskid",
        value: info.value.njtakeid,
        displayType: "String",
      },
    ],
  }).then((res) => {
    taskData.value = res.rows;
  });
};
const queryData = ref({
  grop: info.value.grouptype,
  takeid: info.value.njtakeid,
  setnum: "",
});
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;
    //   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;
    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 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];

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",
});

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; // å¼ºåˆ¶æ›´æ–°æè´¨
        });
      }

      // 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 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 = () => {
  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 = queryData.value.setnum;
  torqueFrom.value.takeId = queryData.value.takeid;
  torqueFrom.value.groupOp = queryData.value.grop;
  if (
    torqueFrom.value.torqueSize == null ||
    torqueFrom.value.torqueSize == "" ||
    torqueFrom.value.torqueSize == 0
  ) {
    ElMessage({
      message: "请输入力矩值",
      type: "warning",
    });
    return;
  }

  AddTorque(torqueFrom.value)
    .then((res) => {
      if (res.code == 400) {
        ElMessage({
          message: res.message,
          type: "warning",
        });
        return;
      }
      ElMessage({
        message: "添加成功",
        type: "success",
      });
      isTorque.value = false;
      initData();
    })
    .catch((error) => {
      console.error("添加失败", error);
    });
};

onMounted(() => {
  // åˆå§‹åŒ–场景
  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();

  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>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.Startjob {
  width: 100%;
  height: 100%;
@@ -297,6 +1152,8 @@
  padding: 0.2rem;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.3);
  overflow: hidden;

  .rect {
    display: flex;
    flex-direction: column;
@@ -304,6 +1161,7 @@
    height: 100%;
    border: 0.1rem solid #02cde6;
    box-shadow: 0rem 0rem 0.3rem #02cde6;

    .rect-top {
      display: flex;
      justify-content: center;
@@ -312,48 +1170,63 @@
      height: 3rem;
      background: #051d3f;
      text-align: center;

      img {
        width: 3.75rem;
        height: 2.81rem;
      }

      span {
        color: rgba(26, 194, 247, 1);
        font-size: 1.25rem;
      }
    }

    .rect-center {
      display: flex;
      justify-content: space-between;
      width: 100%;
      width: 80%;
      margin: 0 auto;
      padding: 0.8rem 2.15rem;
      box-sizing: border-box;

      .rect-item1 {
        display: flex;
        flex-direction: column;
        width: 11.31rem;
        height: 12.38rem;
        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;
        box-sizing: border-box;
      }

      .rect-item2 {
        width: 49.88rem;
        height: 12.38rem;
        width: 65rem;
        height: 15.38rem;
        border: 0.1rem solid #02cde6;
        padding: 0.69rem 1.44rem;
        margin-left: 6rem;
        position: relative;

        .el-table :deep(.el-table__header th) {
          border: solid 1px #1ac0f6;
          color: white;
        }

        .consten {
          width: 100%;
          position: absolute;
          top: 10rem;
          z-index: 999;
        }
      }

      .rect-item3 {
        display: flex;
        flex-direction: column;
        width: 11.31rem;
        height: 12.38rem;
        height: 15.38rem;
        background-image: url("../../../assets/TheCurrentJob/bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
@@ -361,6 +1234,7 @@
        box-sizing: border-box;
      }
    }

    .rect-content {
      display: flex;
      justify-content: space-between;
@@ -370,6 +1244,7 @@
    }
  }
}

// .el-table :deep(.el-table__header th) {
//   border-bottom: solid 1px #1ac2f7;
//   color: white;
@@ -378,14 +1253,17 @@
  border: solid 1px #1ac2f7;
  color: white;
}

.el-table :deep(.el-table__empty-block) {
  background-color: #137aaf;
  color: #1ac2f7;
}
// .el-table :deep(.el-table__body-wrapper) {
//   background-color: #1ac2f7;
// }
// .el-popper :deep(.el-popper) {
//   background-color: #ad2525;
// }

.el-table :deep(.el-table__body-wrapper) {
  background-color: #1ac2f7;
}

:deep(.el-popper) {
  background-color: #ad2525;
}
</style>