功能新增

pengwei

2025-04-27 366612bd8e8b88d02a98edf508f96d7add23ff9f

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

@@ -171,21 +171,20 @@
              >
            </span>
          </div>
          <div style="position: absolute; width: 62rem; height: 2.5rem">
          <div style="width: 62rem; height: 2.5rem">
            <el-table
              empty-text="暂无数据"
              style="margin-top: 0.88rem"
              style="margin-top: 0.88rem; opacity: 0.8"
              :data="gridData"
              width="100%"
              :header-cell-style="{
                height: '1.61rem',
                color: '#1AC8FE',
                background: '#0A5B91',
                color: '#fff',
                fontSize: '0.88rem',
                border: 'solid 1px #1ac2f7',
              }"
              :cell-style="{
                color: '#fff',
                background: '#147BAF',
              }"
            >
              <el-table-column
@@ -194,18 +193,27 @@
                min-width="13%"
              >
                <template #default="scope">
                  <span
                    ref="spanHide"
                    @click="showDetail1(!contentShow)"
                    style="
                      color: #1ac2f7;
                      font-size: 0.88rem;
                      cursor: pointer;
                      text-decoration: underline;
                    "
                    >{{ scope.row.craftsStep }}
                  </span></template
                >
                  <el-tooltip placement="bottom" effect="light">
                    <template #content>
                      <span style="display: block; width: 15rem">{{
                        scope.row.craftsStep
                      }}</span>
                    </template>
                    <span
                      @click="true"
                      style="
                        color: #ffffff;
                        font-size: 0.88rem;
                        display: -webkit-box; /* è®¾ç½®ä¸º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
@@ -238,20 +246,27 @@
              >
              <el-table-column property="tools" label="工具" min-width="12%">
                <template #default="scope">
                  <span
                    ref="spanHide"
                    style="
                      color: #ffffff;
                      font-size: 0.88rem;
                      display: -webkit-box; /* è®¾ç½®ä¸ºWebKit内核的弹性盒子模型 */
                      -webkit-box-orient: vertical; /* åž‚直排列 */
                      -webkit-line-clamp: 2; /* é™åˆ¶æ˜¾ç¤ºä¸¤è¡Œ */
                      overflow: hidden; /* éšè—è¶…出范围的内容 */
                      text-overflow: ellipsis; /* ä½¿ç”¨çœç•¥å· */
                    "
                    >{{ scope.row.tools }}
                  </span></template
                ></el-table-column
                  <el-tooltip placement="bottom" effect="light">
                    <template #content>
                      <span style="display: block; width: 15rem">{{
                        scope.row.tools
                      }}</span>
                    </template>
                    <span
                      @click="true"
                      style="
                        color: #ffffff;
                        font-size: 0.88rem;
                        display: -webkit-box; /* è®¾ç½®ä¸º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"
@@ -259,22 +274,30 @@
                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-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-show="contentShow">
            <!-- <div class="consten" v-show="contentShow">
              <el-table
                empty-text="暂无数据"
                :data="gridData"
@@ -324,7 +347,7 @@
                  ></el-table-column
                >
              </el-table>
            </div>
            </div> -->
          </div>
        </div>
        <div class="rect-item3" style="position: relative">
@@ -407,11 +430,6 @@
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          top: 38%;
          left: 50%;
          transform: translateX(-50%);
          z-index: 999;
        "
      >
        <div
@@ -442,8 +460,9 @@
          align-items: center;
          position: absolute;
          bottom: 5%;
          left: 50%;
          transform: translateX(-50%);
          right: 0%;
          transform: translateX(-20%);
          z-index: 999;
        "
      >
        <el-button
@@ -531,7 +550,7 @@
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
import {
  GetScreenData,
  GetPre,
@@ -582,6 +601,8 @@
  takeid: "",
  setnum: 0,
});

const client = ref(null);

//扭力值
const torqueFrom = ref({
@@ -736,35 +757,6 @@
    group: info.value.grouptype,
    takeid: info.value.njtakeid,
  }).then((res) => {
    // if (res.message == "返回工艺表中的第一条") {
    //   gridData.value = res.data.proNoe;
    //   obj.value = res.data.proNoe[0];
    //   sunNUm.value = res.data.maxproce;
    //   queryData.value.setnum = obj.value.setpNum;
    //   xPos.value =
    //     gridData.value[0].pointAxisXYZ != null &&
    //     gridData.value[0].pointAxisXYZ != 0
    //       ? gridData.value[0].pointAxisXYZ.split(",")[0]
    //       : -585;
    //   yPos.value =
    //     gridData.value[0].pointAxisXYZ != null &&
    //     gridData.value[0].pointAxisXYZ != 0
    //       ? gridData.value[0].pointAxisXYZ.split(",")[1]
    //       : 692;
    //   zPos.value =
    //     gridData.value[0].pointAxisXYZ != null &&
    //     gridData.value[0].pointAxisXYZ != 0
    //       ? gridData.value[0].pointAxisXYZ.split(",")[2]
    //       : 692;
    //   cameraAnimate(
    //     [xPos.value, yPos.value, zPos.value],
    //     nodeList[gridData.value[0].setpNum]
    //   );
    //   GetTorque(queryData.value).then((res) => {
    //     Torque.value = res.data;
    //   });
    //   return;
    // }
    gridData.value = [res.data.proNow];
    sunNUm.value = res.data.maxproce;
    obj.value = res.data.proNow;
@@ -1049,10 +1041,134 @@
      console.error("添加失败", error);
    });
};
const timer = ref(null);

const createSocket = (url) => {
  clearInterval(timer.value);
  // åˆ›å»ºWebSocket连接
  //"ws://127.0.0.1:9295/admin"
  client.value = new WebSocket("ws://115.159.85.185: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.01, window.innerHeight / 2.1);
  renderer.setSize(window.innerWidth - 20, window.innerHeight - 100);
  renderer.setClearColor(0xeeeeee); // è®¾ç½®èƒŒæ™¯è‰²
  // å¯ç”¨ç‰©ç†æ¸²æŸ“模式
  // renderer.physicallyCorrectLights = true;
@@ -1064,9 +1180,9 @@
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enablePan = false; //禁止右键拖拽
  //相机位置与观察目标点最小值
  controls.minDistance = 650;
  controls.minDistance = 600;
  //相机位置与观察目标点最大值
  controls.maxDistance = 900;
  controls.maxDistance = 1000;

  camera.position.set(...CAMERA_POS);
  controls.update();
@@ -1126,8 +1242,13 @@
  });
  // };
  document.addEventListener("click", handleClickOutside);
  console.log(window.webConfig);

  createSocket();
  // showModel();
});
onBeforeUnmount(() => {
  clearInterval(timer.value);
});
</script>
<style lang="scss" scoped>
@@ -1151,7 +1272,7 @@
  background-size: 0.3rem 2rem, 2rem 0.3rem, 0.3rem 2rem, 2rem 0.3rem;
  padding: 0.2rem;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.1);
  overflow: hidden;

  .rect {
@@ -1184,33 +1305,67 @@

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

      position: absolute;
      left: 50%;
      top: 5%;
      transform: translateX(-50%);
      .rect-item1 {
        display: flex;
        flex-direction: column;
        width: 16rem;
        height: 15.38rem;
        background-image: url("../../../assets/TheCurrentJob/bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 0.28rem 0.28rem;
        // background-image: url("../../../assets/TheCurrentJob/bg.png");
        // background-repeat: no-repeat;
        // background-size: 100% 100%;
        border-radius: 8px;
        background: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.001),
            rgba(0, 0, 0, 0.001)
          ),
          rgba(0, 0, 0, 0),
          linear-gradient(
            135deg,
            rgba(30, 58, 138, 0.6) -3%,
            rgba(49, 46, 129, 0.6) 99%
          );
        box-sizing: border-box;
        border: 1px solid rgba(96, 165, 250, 0.3);
        box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1),
          0px 10px 15px -3px rgba(0, 0, 0, 0.1);
        padding: 0.28rem 1.28rem;
        box-sizing: border-box;
      }

      .rect-item2 {
        width: 65rem;
        height: 15.38rem;
        border: 0.1rem solid #02cde6;
        height: 14.38rem;
        border-radius: 8px;
        background: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.001),
            rgba(0, 0, 0, 0.001)
          ),
          rgba(0, 0, 0, 0),
          linear-gradient(
            135deg,
            rgba(30, 58, 138, 0.6) -3%,
            rgba(49, 46, 129, 0.6) 99%
          );
        box-sizing: border-box;
        border: 1px solid rgba(96, 165, 250, 0.3);
        box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1),
          0px 10px 15px -3px rgba(0, 0, 0, 0.1);
        padding: 0.69rem 1.44rem;
        position: relative;

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

@@ -1227,9 +1382,25 @@
        flex-direction: column;
        width: 11.31rem;
        height: 15.38rem;
        background-image: url("../../../assets/TheCurrentJob/bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        // background-image: url("../../../assets/TheCurrentJob/bg.png");
        // background-repeat: no-repeat;
        // background-size: 100% 100%;
        border-radius: 8px;
        background: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.001),
            rgba(0, 0, 0, 0.001)
          ),
          rgba(0, 0, 0, 0),
          linear-gradient(
            135deg,
            rgba(30, 58, 138, 0.6) -3%,
            rgba(49, 46, 129, 0.6) 99%
          );
        box-sizing: border-box;
        border: 1px solid rgba(96, 165, 250, 0.3);
        box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1),
          0px 10px 15px -3px rgba(0, 0, 0, 0.1);
        padding: 0.28rem 0.28rem;
        box-sizing: border-box;
      }
@@ -1249,6 +1420,19 @@
//   border-bottom: solid 1px #1ac2f7;
//   color: white;
// }
.el-table {
  --el-table-border-color: transparent;
  --el-table-border: none;
  --el-table-text-color: #bdbdbe;
  --el-table-header-text-color: #bdbdbe;
  --el-table-row-hover-bg-color: transparent;
  --el-table-current-row-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-expanded-cell-bg-color: transparent;
}

.el-table :deep(.el-table__row td) {
  border: solid 1px #1ac2f7;
  color: white;
@@ -1259,9 +1443,9 @@
  color: #1ac2f7;
}

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

:deep(.el-popper) {
  background-color: #ad2525;