界面实现

.env.development

@@ -11,7 +11,7 @@ VITE_APP_BASE_API = '/dev-api'
 VITE_APP_UPLOAD_URL = 'http://192.168.1.4:9000'
 
 # 开发接口地址
-VITE_APP_API_URL = 'http://192.168.0.26:8059'
+VITE_APP_API_URL = 'http://121.41.179.41:8079'
 # Websocket地址
 VITE_WEBSOCKET_URL = 'ws://192.168.101.178:8079'
 ``

src/layout/index.vue

@@ -21,7 +21,7 @@
       </router-view>
     </section>
     <!-- 左侧消息弹框 -->
-    <!-- <RealTimeMsg /> -->
+    <RealTimeMsg />
   </div>
 </template>
 

src/plugins/permission.ts

@@ -2,68 +2,51 @@ import router from "@/router";
 import NProgress from "@/utils/nprogress";
 import { useDictionaryStore } from "@/store/modules/dictionary";
 import { getUserDicts } from "@/api/auth";
+import { useSettingsStore, useUserStore } from "@/store";
 
 export function setupPermission() {
-  // 白名单路由
-  const whiteList: string[] = ["client-traceability"]; //由于包含动态路由，这里面存储的是路由的name而不是path
-
   router.beforeEach(async (to, from, next) => {
+    const userStore = useUserStore();
     NProgress.start();
-    //在路由跳转前判断是否为不需要全屏加载的二级路由界面(目前项目中只有pro-step界面涉及)
     const isShow = inject("isShow");
     const route = useRoute();
-    if (
-      !(
-        route.fullPath.substr(0, 11) == "/pro-steps/" &&
-        to.fullPath.substr(0, 11) == "/pro-steps/"
-      )
-    ) {
-      //@ts-ignore
-      isShow.value = true;
-    }
     if (to.fullPath.substr(0, 10) == "/pro-steps") {
       next();
     }
     const hasToken = localStorage.getItem("token");
     if (hasToken) {
-      if (to.path === "/login") {
-        // 如果已登录，跳转首页,并且清空token
-        localStorage.setItem("token", "");
-        next();
-        // next({ path: "/" });
-        NProgress.done();
-      } else {
-        const dictStore = useDictionaryStore();
-        dictStore.checkAllData();
-        if (
-          !dictStore.dicts.value ||
-          JSON.stringify(dictStore.dicts.value) === "{}"
-        ) {
-          const res = await getUserDicts(dictStore.types);
-          if (res.data) {
-            dictStore.dicts = res?.data ?? [];
-          }
+      const dictStore = useDictionaryStore();
+      dictStore.checkAllData();
+      if (
+        !dictStore.dicts.value ||
+        JSON.stringify(dictStore.dicts.value) === "{}"
+      ) {
+        const res = await getUserDicts(dictStore.types);
+        if (res.data) {
+          dictStore.dicts = res?.data ?? [];
         }
-
-        next();
-        NProgress.done();
       }
+      next();
     } else {
-      // 未登录可以访问白名单页面
-      console.log("111");
-      next(`pro-steps`);
-      // if (whiteList.indexOf(to.name as string) !== -1) {
-      //   const dictStore = useDictionaryStore();
-      //   dictStore.checkAllData();
-      //   next();
-      // } else {
-      //   if (to.path === "/login") {
-      //     next();
-      //   } else {
-      //     next(`/login`);
-      //   }
-      //   NProgress.done();
-      // }
+      //自动登录
+      const acountP = {
+        userName: "admin",
+        password: "123456",
+        proCode: "PL000010",
+        orgId: "1",
+        stationId: "54",
+        stationType: "13",
+      };
+
+      userStore
+        .login(acountP)
+        .then(() => {
+          next(`pro-steps`);
+        })
+        .catch(() => {
+          // getCaptcha();
+        })
+        .finally(() => {});
     }
   });
 

src/utils/request.ts

@@ -5,6 +5,7 @@ import axios, {
 } from "axios";
 import { useUserStoreHook } from "@/store/modules/user";
 import { useCommonStoreHook } from "@/store/modules/common";
+import { useRouter } from "vue-router";
 
 // 创建 axios 实例
 const service = axios.create({
@@ -41,22 +42,9 @@ service.interceptors.response.use(
 
     // token 过期,重新登录
     if (code === "4106") {
-      ElMessageBox.confirm("当前页面已失效，请重新登录", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      }).then(() => {
-        const userStore = useUserStoreHook();
-        userStore.resetToken().then(() => {
-          location.reload();
-        });
-      });
-      return Promise.reject(new Error(msg || "Error"));
+      localStorage.setItem("token", "");
+      useRouter().push({ path: "/pro-steps" });
     }
-
-    ElMessage.error(msg || "系统出错");
-
-    return Promise.reject(new Error(msg || "Error"));
   },
   (error: any) => {
     if (error.response.data) {

src/views/pro-steps/components/screwdriver.vue

@@ -43,7 +43,6 @@
           </el-select>
           <el-button
             class="ces"
-            type="primary"
             style="position: absolute; right: 340px; z-index: 2"
             v-if="item.deviceType == 'DDLSD'"
             @click.stop="
@@ -100,7 +99,6 @@
           >
           <el-button
             class="ces"
-            type="primary"
             style="position: absolute; right: 180px; z-index: 2"
             v-if="item.deviceType == 'WKDLT'"
             @click.stop="setTipTemperature"
@@ -110,7 +108,6 @@
           <!-- WKDLT -->
           <el-button
             class="ces"
-            type="primary"
             style="position: absolute; right: 60px; z-index: 2"
             v-if="item.deviceType != 'FJDJC'"
             @click.stop="

src/views/pro-steps/index.vue

@@ -1,6 +1,6 @@
 `
 <template>
-  <div>
+  <div style="position: relative">
     <div class="headerInfo">
       <!-- <div
         class="titleText"
@@ -39,27 +39,68 @@
     <div class="mainContentBox">
       <el-row :gutter="20">
         <el-col :span="4" class="boxStyle">
-          <div class="productInfo">
-            <div
-              class="productitleText"
-              style="font-size: 500; font-size: 24px"
-            >
-              卫星通导模块
-            </div>
-            <div class="productitleText" style="color: #ffffff60">
-              ASF-ASFA-ASD-FAS
-            </div>
-            <div style="display: flex">
-              <div class="productitleText" style="color: #ffffff60">S/N</div>
-              <div class="productitleText">&nbsp;202501020215421532</div>
-            </div>
+          <div class="productInfo" @click="openPop">
+            <template v-if="taskIndex != null">
+              <div
+                class="productitleText"
+                style="font-size: 500; font-size: 24px"
+              >
+                {{ taskArray[taskIndex].materialName }}
+              </div>
+              <div class="productitleText" style="color: #ffffff60">
+                {{ taskArray[taskIndex].materialModel }}
+              </div>
+              <div style="display: flex">
+                <div class="productitleText" style="color: #ffffff60">S/N</div>
+                <div class="productitleText">
+                  &nbsp;{{ snVal ? snVal : "-" }}
+                </div>
+              </div>
+            </template>
+            <template v-else>
+              <div
+                class="productitleText"
+                style="
+                  font-size: 500;
+                  font-size: 24px;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  height: 100%;
+                "
+              >
+                请选择产品
+              </div>
+            </template>
           </div>
           <!-- 侧边栏盒子 -->
           <div class="commonTitle">工序</div>
           <el-scrollbar
             style="height: calc(100vh - 220px); padding-bottom: 60px"
           >
-            <Steps :opsArray="opsArray" @init="init" />
+            <Steps
+              v-if="opsArray.length > 0"
+              :opsArray="opsArray"
+              @init="init"
+            />
+            <template v-else>
+              <div
+                class="productitleText"
+                style="
+                  font-size: 500;
+                  font-size: 24px;
+                  display: flex;
+                  height: calc(100vh - 280px);
+                  justify-content: center;
+                  align-items: center;
+                  background-color: var(--ohos-area-bg);
+                  border-radius: 16px;
+                  color: white;
+                "
+              >
+                暂无工序
+              </div>
+            </template>
           </el-scrollbar>
         </el-col>
         <el-col :span="20">
@@ -84,11 +125,39 @@
                     </div>
                   </router-link>
                 </div>
+                <div
+                  v-if="snVal == null && taskIndex == null"
+                  style="
+                    font-size: 40px;
+                    font-weight: 500;
+                    color: white;
+                    width: 100%;
+                    height: 80px;
+                    text-align: center;
+                    line-height: 80px;
+                  "
+                >
+                  请先选择工序
+                </div>
+                <div
+                  v-else-if="snVal == null"
+                  style="
+                    font-size: 40px;
+                    font-weight: 500;
+                    color: white;
+                    width: 100%;
+                    height: 80px;
+                    text-align: center;
+                    line-height: 80px;
+                  "
+                >
+                  请选择其他工序
+                </div>
               </div>
             </el-scrollbar>
           </div>
-          <Empty v-if="stepComponents.length == 0" />
-          <div :key="key" class="routerView">
+
+          <div :key="key" class="routerView" v-if="snVal != null">
             <el-scrollbar style="width: 100%">
               <router-view v-slot="{ Component, route }">
                 <keep-alive
@@ -102,268 +171,151 @@
         </el-col>
       </el-row>
     </div>
+    <div class="midPopUp" v-if="popStatus" @click.stop="popStatus = false">
+      <div class="popView">
+        <div class="hang">
+          请扫码：
+          <ScanCodeInput
+            style="width: 400px"
+            v-model="seqVal"
+            @keyup.enter="console.log(111)"
+          />
+        </div>
+        <el-divider class="dark" content-position="center"
+          ><div
+            style="
+              background-color: var(--ohos-area-bg);
+              width: 100%;
+              height: 100%;
+              display: flex;
+              font-size: 20px;
+              padding: 0 20px;
+              color: white;
+              font-weight: 500;
+            "
+          >
+            选择近期产品
+          </div></el-divider
+        >
+        <el-scrollbar style="height: calc(100vh - 220px)">
+          <div class="taskBox">
+            <div
+              class="productInfo"
+              :key="item + index"
+              style="background-color: var(--ohos-area-active-bg)"
+              v-for="(item, index) in taskArray"
+              @click="selectProduct(index)"
+            >
+              <div
+                class="productitleText"
+                style="font-size: 500; font-size: 24px; color: #000000"
+              >
+                {{ item.materialName }}
+              </div>
+              <div class="productitleText" style="color: #00000060">
+                {{ item.materialModel }}
+              </div>
+              <div style="display: flex">
+                <div class="productitleText" style="color: #00000060">Code</div>
+                <div class="productitleText" style="color: #000000">
+                  &nbsp;{{ item.materialCode }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-scrollbar>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import OperationBar from "@/views/pro-steps/operationBar.vue";
+import ScanCodeInput from "@/components/ScanCodeInput/index.vue";
 import Steps from "@/views/process/components/steps.vue";
 import { useProcessStore } from "@/store";
 import { getOpCompent } from "@/api/prosteps";
+import { getOrders } from "@/api/process";
+import { getScan } from "@/api/process";
 
 defineOptions({
   name: "ProSteps",
 });
+const popStatus = ref(null);
+const openPop = async () => {
+  await getTaskArray();
+  popStatus.value = true;
+};
+const seqVal = ref("");
+const snVal = ref(null);
+const selectProduct = async (index) => {
+  taskIndex.value = index;
+  store.odersData.workOrderCode =
+    taskArray.value[taskIndex.value].workOrderCode;
+  store.processInfo.materialName =
+    taskArray.value[taskIndex.value].materialName;
+  store.processInfo.materialModel =
+    taskArray.value[taskIndex.value].materialModel;
+  if (taskArray.value[taskIndex.value].ops.length > 0) {
+    opsArray.value = taskArray.value[taskIndex.value].ops;
+    selectStepIndex.value = 0;
+    snVal.value =
+      taskArray.value[taskIndex.value].ops[selectStepIndex.value].seqs.length >
+      0
+        ? taskArray.value[taskIndex.value].ops[selectStepIndex.value].seqs[0]
+            .seqNo
+        : null;
+  } else {
+    selectStepIndex.value = null;
+    ElMessage.warning("暂无操作步骤");
+  }
+  if (snVal.value != null) {
+    await getScanData();
+  } else {
+    ElMessage.warning("当前工序暂不可操作");
+  }
+  popStatus.value = false;
+};
 const store = useProcessStore();
-store.odersData = {
-  productLineId: "10",
-  workOrderCode: "10.25.0021",
-  operationId: "536",
+store.odersData.productLineId = 10;
+const taskArray = ref([]);
+const taskIndex = ref(null);
+const getScanData = async () => {
+  const value = snVal.value;
+  const res = await getScan({
+    operationId: Number(
+      taskArray.value[taskIndex.value].ops[selectStepIndex.value].operationId
+    ),
+    qrCode: value,
+    workOrderCode: taskArray.value[taskIndex.value].workOrderCode,
+    //stationId暂时随便传一个
+    stationId: 1,
+  });
+  if (res) {
+    const { code, data, msg } = res;
+    if (code == "200") {
+      store.scanInfo = data;
+      store.useSeqNo = data.seqNo;
+    }
+    return true;
+  } else {
+    snVal.value = null;
+    stepComponents.value = [];
+    router.replace({ name: "ProSteps" });
+    return false;
+  }
 };
-store.processInfo = {
-  materialName: "底遮板弹星发射天线",
-  materialModel: "1S043-17(B)_60051S043T1_1S043-17(B)底遮板弹星发射天线(再入)",
-  operationCode: "XFOP-0015",
-  operationName: "装配",
+const getTaskArray = async () => {
+  const { data } = await getOrders({
+    pageNo: 1,
+    pageSize: 999999999,
+    queryComplete: 0,
+  });
+  taskArray.value = data.records;
 };
-// store.scanInfo = {
-//   batchReport: 1,
-//   changeWhen: null,
-//   created: "2025-03-03 17:18:26",
-//   creator: "admin",
-//   currentState: "start",
-//   deptId: "1",
-//   id: "347",
-//   materialCode: "51264341413213",
-//   materialModel: "1S043-17(B)_60051S043T1_1S043-17(B)底遮板弹星发射天线(再入)",
-//   materialName: "底遮板弹星发射天线",
-//   nextStation: "调试工位-2",
-//   offLine: 0,
-//   operationId: 536,
-//   operationName: "装配",
-//   operator: "admin",
-//   orderCode: "DD2503010003",
-//   orderId: "64",
-//   orgId: "1",
-//   outsource: 0,
-//   realEndWhen: null,
-//   realStartWhen: "2025-03-03 17:18:26",
-//   repairId: "0",
-//   reworkId: "0",
-//   seqNo: "10.25.0021-0001",
-//   stanId: "54",
-//   totalTime: "0",
-//   updated: "2025-03-03 17:18:26",
-//   updator: "admin",
-//   workOrderCode: "10.25.0021",
-//   workOrderId: "158",
-// };
-store.useSeqNo = "10.25.0021-0001";
-const opsArray = [
-  {
-    exists: false,
-    firstCheck: 1,
-    inspection: 1,
-    mutualInspection: 1,
-    opComplete: false,
-    operationCode: "XFOP-0052",
-    operationId: "588",
-    operationName: "领料",
-    operationSort: 0,
-    selfCheck: 1,
-    seqs: [],
-    specialInspection: 1,
-    workOrderCode: "10.25.0021",
-  },
-  {
-    exists: true,
-    firstCheck: 0,
-    inspection: 0,
-    mutualInspection: 0,
-    opComplete: false,
-    operationCode: "XFOP-0015",
-    operationId: "536",
-    operationName: "装配",
-    operationSort: 1,
-    selfCheck: 0,
-    seqs: [{ seqNo: "10.25.0021-0001", state: "1" }],
-    specialInspection: 0,
-    workOrderCode: "10.25.0021",
-  },
-  {
-    exists: false,
-    firstCheck: 0,
-    inspection: 0,
-    mutualInspection: 0,
-    opComplete: false,
-    operationCode: "XFOP-0016",
-    operationId: "537",
-    operationName: "调试",
-    operationSort: 2,
-    selfCheck: 0,
-    seqs: [],
-    specialInspection: 0,
-    workOrderCode: "10.25.0021",
-  },
-  {
-    exists: false,
-    firstCheck: 0,
-    inspection: 0,
-    mutualInspection: 0,
-    opComplete: false,
-    operationCode: "XFOP-0017",
-    operationId: "538",
-    operationName: "装配",
-    operationSort: 3,
-    selfCheck: 0,
-    seqs: [
-      { seqNo: "10.25.0021-0004", state: "0" },
-      { seqNo: "10.25.0021-0007", state: "0" },
-      { seqNo: "10.25.0021-0010", state: "0" },
-    ],
-    specialInspection: 0,
-    workOrderCode: "10.25.0021",
-  },
-  {
-    exists: false,
-    firstCheck: 0,
-    inspection: 0,
-    mutualInspection: 0,
-    opComplete: false,
-    operationCode: "XFOP-0018",
-    operationId: "539",
-    operationName: "调试",
-    operationSort: 4,
-    selfCheck: 0,
-    seqs: [],
-    specialInspection: 0,
-    workOrderCode: "10.25.0021",
-  },
-  {
-    exists: false,
-    firstCheck: 0,
-    inspection: 0,
-    mutualInspection: 0,
-    opComplete: false,
-    operationCode: "XFOP-0019",
-    operationId: "540",
-    operationName: "检测",
-    operationSort: 5,
-    selfCheck: 0,
-    seqs: [],
-    specialInspection: 0,
-    workOrderCode: "10.25.0021",
-  },
-  {
-    exists: false,
-    firstCheck: 0,
-    inspection: 0,
-    mutualInspection: 0,
-    opComplete: false,
-    operationCode: "XFOP-0020",
-    operationId: "541",
-    operationName: "试验",
-    operationSort: 6,
-    selfCheck: 0,
-    seqs: [],
-    specialInspection: 0,
-    workOrderCode: "10.25.0021",
-  },
-  {
-    exists: false,
-    firstCheck: 0,
-    inspection: 0,
-    mutualInspection: 0,
-    opComplete: false,
-    operationCode: "XFOP-0021",
-    operationId: "542",
-    operationName: "开盖检验",
-    operationSort: 7,
-    selfCheck: 0,
-    seqs: [{ seqNo: "10.25.0021-0002", state: "0" }],
-    specialInspection: 0,
-    workOrderCode: "10.25.0021",
-  },
-  {
-    exists: false,
-    firstCheck: 0,
-    inspection: 0,
-    mutualInspection: 0,
-    opComplete: false,
-    operationCode: "XFOP-0022",
-    operationId: "543",
-    operationName: "合成",
-    operationSort: 8,
-    selfCheck: 0,
-    seqs: [
-      { seqNo: "10.25.0021-0002", state: "0" },
-      { seqNo: "10.25.0021-0005", state: "0" },
-      { seqNo: "10.25.0021-0008", state: "0" },
-    ],
-    specialInspection: 0,
-    workOrderCode: "10.25.0021",
-  },
-  {
-    exists: false,
-    firstCheck: 0,
-    inspection: 0,
-    mutualInspection: 0,
-    opComplete: false,
-    operationCode: "XFOP-0023",
-    operationId: "544",
-    operationName: "测试",
-    operationSort: 9,
-    selfCheck: 0,
-    seqs: [],
-    specialInspection: 0,
-    workOrderCode: "10.25.0021",
-  },
-  {
-    exists: false,
-    firstCheck: 0,
-    inspection: 0,
-    mutualInspection: 0,
-    opComplete: false,
-    operationCode: "XFOP-0024",
-    operationId: "545",
-    operationName: "减半A组振动试验",
-    operationSort: 10,
-    selfCheck: 0,
-    seqs: [],
-    specialInspection: 0,
-    workOrderCode: "10.25.0021",
-  },
-  {
-    exists: false,
-    firstCheck: 0,
-    inspection: 0,
-    mutualInspection: 0,
-    opComplete: false,
-    operationCode: "XFOP-0025",
-    operationId: "546",
-    operationName: "做标识",
-    operationSort: 11,
-    selfCheck: 0,
-    seqs: [],
-    specialInspection: 0,
-    workOrderCode: "10.25.0021",
-  },
-  {
-    exists: false,
-    firstCheck: 0,
-    inspection: 0,
-    mutualInspection: 0,
-    opComplete: false,
-    operationCode: "XFOP-0026",
-    operationId: "547",
-    operationName: "包装",
-    operationSort: 12,
-    selfCheck: 0,
-    seqs: [],
-    specialInspection: 0,
-    workOrderCode: "10.25.0021",
-  },
-];
+const opsArray = ref([]);
+const selectStepIndex = ref(null);
+provide("selectStepIndex", selectStepIndex);
 const key = ref(false);
 const route = useRoute();
 const router = useRouter();
@@ -468,10 +420,13 @@ const getNameClass = (index) => {
 //获取当前tags列表
 const getOpCompentArray = async () => {
   const { data } = await getOpCompent(
-    "/" + `${store.odersData.operationId}` + "/" + `${store.scanInfo.id}`
+    "/" +
+      `${Number(
+        taskArray.value[taskIndex.value].ops[selectStepIndex.value].operationId
+      )}` +
+      "/" +
+      `${store.scanInfo.id}`
   );
-  recondOPId.value = store.odersData.operationId;
-  qrCode.value = store.scanInfo.seqNo;
   stepComponents.value = setStepComponents(data);
   router.replace({ name: stepComponents.value[selectIndex.value].name });
 };
@@ -479,37 +434,42 @@ const getOpCompentArray = async () => {
 const setSelectIndex = (index) => {
   selectIndex.value = index;
 };
-const init = async () => {
-  console.log("111");
-  // if (recondOPId.value == null || qrCode.value == null) {
-  //   //相当于首次进入该路由
-  //   await getOpCompentArray();
-  // } else {
-  //   if (
-  //     recondOPId.value != store.odersData.operationId ||
-  //     qrCode.value != store.scanInfo.seqNo
-  //   ) {
-  //     //当发生改变时
-  //     setSelectIndex(0);
-  //     await getOpCompentArray();
-  //     key.value = !key.value;
-  //   } else {
-  //     await getOpCompentArray();
-  //     if (
-  //       !instance.devtoolsRawSetupState.router.options.history.state.forward
-  //     ) {
-  //       key.value = !key.value;
-  //     }
-  //   }
-  // }
+const init = async (index) => {
+  if (taskIndex.value == null) {
+    return;
+  }
+  selectStepIndex.value = index != null ? index : 0;
+  store.odersData.operationId =
+    taskArray.value[taskIndex.value].ops[selectStepIndex.value].operationId;
+  store.processInfo.operationCode =
+    taskArray.value[taskIndex.value].ops[selectStepIndex.value].operationCode;
+  store.processInfo.operationName =
+    taskArray.value[taskIndex.value].ops[selectStepIndex.value].operationName;
+  snVal.value =
+    taskArray.value[taskIndex.value].ops[selectStepIndex.value].seqs.length > 0
+      ? taskArray.value[taskIndex.value].ops[selectStepIndex.value].seqs[0]
+          .seqNo
+      : null;
+  if (snVal.value != null) {
+    const res = await getScanData();
+    if (res == true) {
+      await getOpCompentArray();
+    }
+  } else {
+    stepComponents.value = [];
+    ElMessage.warning("当前工序暂不可操作");
+  }
 };
 onActivated(async () => {
   //缓存组件数据逻辑
-  init();
+  init(selectStepIndex.value);
 });
 </script>
 
 <style lang="scss" scoped>
+:deep(.el-input__wrapper) {
+  background-color: #000;
+}
 .boxStyle {
   height: calc(100vh - 80px);
 
@@ -517,16 +477,17 @@ onActivated(async () => {
     color: var(--ohos-text);
     font-size: 28px;
   }
-  .productInfo {
-    width: 100%;
-    height: 100px;
-    margin-bottom: 10px;
-    border-radius: 16px;
-    background-color: var(--ohos-area-bg);
-    padding: 10px 20px;
-    .productitleText {
-      color: white;
-    }
+}
+.productInfo {
+  width: 100%;
+  height: 100px;
+  margin-bottom: 10px;
+  border-radius: 16px;
+  background-color: var(--ohos-area-bg);
+  padding: 10px 20px;
+  cursor: pointer;
+  .productitleText {
+    color: white;
   }
 }
 .optionBox {
@@ -630,4 +591,27 @@ onActivated(async () => {
   background-color: var(--ohos-area-active-bg);
   color: black !important;
 }
+:deep(.el-divider__text) {
+  padding: 0px;
+}
+.popView {
+  width: 80%;
+  display: flex;
+  flex-direction: column;
+  height: 80%;
+  background-color: var(--ohos-area-bg);
+  border-radius: 16px;
+  padding: 20px;
+  .hang {
+    display: flex;
+    align-items: center;
+    color: white;
+    font-size: 20px;
+  }
+  .taskBox {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr); /* 每行 3 列 */
+    gap: 20px; /* 设置间距为 20px */
+  }
+}
 </style>

src/views/process/components/steps.vue

@@ -7,13 +7,7 @@
       @click="boxClick(item, index)"
     >
       <div
-        :class="
-          item.exists == true
-            ? selectStepIndex == index
-              ? 'stepBox stepBoxHover'
-              : 'stepBox'
-            : 'stepBox stepExistsHover'
-        "
+        :class="selectStepIndex == index ? 'stepBox stepBoxHover' : 'stepBox'"
       >
         <div style="display: flex; align-items: center">
           <div
@@ -48,7 +42,6 @@
           {{ item.completeNum }}
         </div>
         <div style="padding-right: 20px">
-          <svg-icon icon-class="dui" size="20" v-if="index < selectStepIndex" />
           <svg-icon
             icon-class="dangqian"
             size="20"
@@ -75,14 +68,14 @@ const props = defineProps({
 const emit = defineEmits(["init"]);
 //步骤显示index
 const router = useRouter();
-const selectStepIndex = ref(0);
+const selectStepIndex = inject("selectStepIndex");
 
 const boxClick = (item, index) => {
   store.odersData.operationId = item.operationId;
   store.processInfo.operationCode = item.operationCode;
   store.processInfo.operationName = item.operationName;
   selectStepIndex.value = index;
-  emit("init");
+  emit("init", selectStepIndex.value);
 };
 const getScanData = async () => {
   try {