功能新增

pengwei

2025-04-27 366612bd8e8b88d02a98edf508f96d7add23ff9f

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

@@ -171,65 +171,133 @@
              >
            </span>
          </div>
          <div style="position: absolute; width: 47rem; 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
                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"
@@ -279,7 +347,7 @@
                  ></el-table-column
                >
              </el-table>
            </div>
            </div> -->
          </div>
        </div>
        <div class="rect-item3" style="position: relative">
@@ -362,11 +430,6 @@
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          top: 35%;
          left: 50%;
          transform: translateX(-50%);
          z-index: 999;
        "
      >
        <div
@@ -397,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
@@ -419,7 +483,7 @@
        >
        <el-button
          :disabled="obj.setpNum == sunNUm"
          @click="Next(false)"
          @click="DialogVisible = true"
          type="primary"
          :style="{
            width: '5rem',
@@ -454,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"
@@ -466,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,
@@ -491,12 +572,11 @@

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("");
@@ -507,7 +587,7 @@
const Torque = ref("");
const showDetail1 = (va1) => {
  contentShow1.value = false;
  contentShow.value = va1;
  contentShow.value = true;
};
const showDetail = (va1) => {
  contentShow1.value = va1;
@@ -521,6 +601,8 @@
  takeid: "",
  setnum: 0,
});

const client = ref(null);

//扭力值
const torqueFrom = ref({
@@ -591,11 +673,13 @@
      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 &&
@@ -631,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({
@@ -674,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;
@@ -737,6 +791,7 @@
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("");
@@ -788,7 +843,6 @@
          material.needsUpdate = true; // å¼ºåˆ¶æ›´æ–°æè´¨
        });
      });
      console.log(part.split(","));
      if (
        part ==
        "抗蛇行减振器螺栓1,抗蛇行减振器螺栓2,抗蛇行减振器螺栓3,抗蛇行减振器螺栓4"
@@ -886,12 +940,12 @@
    []
  );
};
window.addEventListener("resize", () => {
  console.log("初始化场景", window.innerWidth, window.innerHeight);
  // camera.aspect = window.innerWidth / window.innerHeight;
  // camera.updateProjectionMatrix();
  // renderer.setSize(window.innerWidth, window.innerHeight);
});
// 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",
@@ -987,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: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(() => {
  console.log("mounted", window.innerWidth, window.innerHeight);

  // åˆå§‹åŒ–场景
  renderer.setSize(window.innerWidth / 1.5, window.innerHeight / 2);
  renderer.setSize(window.innerWidth - 20, window.innerHeight - 100);
  renderer.setClearColor(0xeeeeee); // è®¾ç½®èƒŒæ™¯è‰²
  // å¯ç”¨ç‰©ç†æ¸²æŸ“模式
  // renderer.physicallyCorrectLights = true;
@@ -1000,6 +1178,12 @@

  // æ·»åŠ äº¤äº’控制器（鼠标拖拽缩放）
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enablePan = false; //禁止右键拖拽
  //相机位置与观察目标点最小值
  controls.minDistance = 600;
  //相机位置与观察目标点最大值
  controls.maxDistance = 1000;

  camera.position.set(...CAMERA_POS);
  controls.update();

@@ -1058,8 +1242,13 @@
  });
  // };
  document.addEventListener("click", handleClickOutside);
  console.log(window.webConfig);

  createSocket();
  // showModel();
});
onBeforeUnmount(() => {
  clearInterval(timer.value);
});
</script>
<style lang="scss" scoped>
@@ -1083,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 {
@@ -1116,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;
        }
      }
@@ -1157,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;
      }
@@ -1179,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;
@@ -1189,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;