From 1288a7890deb3b180b1e8df7015b1036514c4e71 Mon Sep 17 00:00:00 2001
From: pengwei <2071057782@qq.com>
Date: 星期四, 27 三月 2025 09:07:12 +0800
Subject: [PATCH] 3.27优化

---
 项目代码/client/src/views/tts/TheCurrentJob/Startjob.vue | 1270 ++++++++++++++++++++++++++++++++++++++++++++++++--------
 1 files changed, 1,074 insertions(+), 196 deletions(-)

diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/client/src/views/tts/TheCurrentJob/Startjob.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/client/src/views/tts/TheCurrentJob/Startjob.vue"
index 10aad1e..0a01bb0 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/client/src/views/tts/TheCurrentJob/Startjob.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/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; /* 璁剧疆涓篧ebKit鍐呮牳鐨勫脊鎬х洅瀛愭ā鍨� */
+                        -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; /* 璁剧疆涓篧ebKit鍐呮牳鐨勫脊鎬х洅瀛愭ā鍨� */
+                      -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; /* 璁剧疆涓篧ebKit鍐呮牳鐨勫脊鎬х洅瀛愭ā鍨� */
+                      -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);
-          "
-        >
-          <span style="color: rgba(26, 194, 247, 1); font-size: 1.25rem"
-            >鐖嗙偢鍥炬樉绀�</span
-          >
-        </div>
+          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
+        >
+      </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 { ref, onMounted } 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>

--
Gitblit v1.9.3