最新代码提交

pengwei

2025-03-20 2591e298a3fd1332ad0ca33059f6ba0b7d426f51

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

@@ -1,14 +1,14 @@
<template>
  <div class="Startjob">
    <div class="rect">
      <div class="rect-top">
      <div class="rect-top" style="position: relative">
        <img src="@/assets/TheCurrentJob/left.png" alt="" />
        <img
          style="margin-left: -1.5rem; margin-right: 4rem"
          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,115 @@
        <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
                  @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"
                    :data="taskData"
                    width="100%"
                    :header-cell-style="{
                      color: '#fff',
@@ -138,37 +137,39 @@
                      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: 47rem; height: 2.5rem">
            <el-table
              style="margin-top: 0.88rem"
              :data="gridData"
@@ -185,103 +186,397 @@
              }"
            >
              <el-table-column
                property="date"
                property="craftsStep"
                label="工艺项点/步骤"
                min-width="30%"
              >
                <template #default="scope">
                  <span
                    style="color: #1ac2f7; font-size: 0.88rem"
                  ></span></template
              ></el-table-column>
                    @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%"
              />
              >
                <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-table>
            <div class="consten" v-if="contentShow">
              <el-table
                :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 style="overflow: hidden">
            <img src="@/assets/TheCurrentJob/icon/icon.png" alt="" />
            <span style="color: rgba(26, 201, 255, 1); font-size: 0.88rem"
              >力矩值显示</span
            >

            <el-scrollbar>
              <div
                style="
                  display: flex;
                  justify-content: center;
                  flex-direction: column;
                  padding-left: 1.5rem;
                  padding-top: 0.5rem;
                  padding-bottom: 1.5rem;
                  box-sizing: border-box;
                "
              >
                <span
                  style="color: #ffffff; font-size: 1rem; margin: 0.5rem 0"
                  v-for="(item, index) in Torque"
                  :key="item.id"
                  >{{
                    index + 1 + "、" + item.torqueSize + "&nbsp;" + "N*m"
                  }}</span
                >
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
      <div class="rect-content">
        <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);
          "
        >
          <span style="color: rgba(26, 194, 247, 1); font-size: 1.25rem"
            >爆炸图显示</span
          >
        </div>
      <div
        ref="screenDom"
        style="
          margin: 0 auto;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 999;
          position: absolute;
          top: 42%;
          left: 15%;
        "
      >
        <model-gltf
          :width="400"
          :height="400"
          :backgroundAlpha="0"
          :backgroundColor="'#000000'"
          src="ThreeModel/test.gltf"
          :controlsOptions="{
            enableZoom,
          }"
        />
      </div>

      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 4.25rem;
          margin-top: 30rem;
        "
      >
        <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="Next(false)"
          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> å½“前任务未完成，是否强制跳转到下一步？ </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>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import {
  GetScreenData,
  GetPre,
  GetNext,
  Complete,
  GetTorque,
  ChangeStatus,
} 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";

const router = useRouter();
const gridData = ref([]);
const contentShow = ref(false);
const contentShow1 = 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 = va1;
};
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 flag = ref(false);
//上一步
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;
    queryData.value.setnum = obj.value.setpNum;
    GetTorque(queryData.value).then((res) => {
      Torque.value = res.data;
    });
  });
};
//下一步
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;
        return;
      }
      return;
    }
    centerDialogVisible.value = false;
    gridData.value = [res.data.nex];
    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;
  console.log(from.value, info.value);

  ChangeStatus(from.value).then((res) => {
    ElMessage({
      message: "操作完成",
      type: "success",
    });
    router.push("/Thecurrentjob");
  });
};
//查看数据
const checko = () => {
  console.log(info.value);
  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) => {
    console.log(res);
    taskData.value = res.rows;
  });
};
const queryData = ref({
  grop: info.value.grouptype,
  takeid: info.value.njtakeid,
  setnum: "",
});
const initData = () => {
  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;
    sunNUm.value = res.data.maxproce;
    obj.value = res.data.maxpro[0];
    queryData.value.setnum = obj.value.setpNum;
    GetTorque(queryData.value).then((res) => {
      Torque.value = res.data;
    });
  });
};

onMounted(() => {
  initData();
});
</script>
<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.Startjob {
  width: 100%;
  height: 100%;
@@ -297,6 +592,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 +601,7 @@
    height: 100%;
    border: 0.1rem solid #02cde6;
    box-shadow: 0rem 0rem 0.3rem #02cde6;

    .rect-top {
      display: flex;
      justify-content: center;
@@ -312,48 +610,61 @@
      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: 170vh;
      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: 14.31rem;
        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;
        height: 15.38rem;
        border: 0.1rem solid #02cde6;
        padding: 0.69rem 1.44rem;
        margin-left: 6rem;

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

        .consten {
          position: relative;
          top: 0;
          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 +672,7 @@
        box-sizing: border-box;
      }
    }

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

// .el-table :deep(.el-table__header th) {
//   border-bottom: solid 1px #1ac2f7;
//   color: white;
@@ -378,14 +691,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>