生产执行演示

.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://121.41.179.41:8079'
+VITE_APP_API_URL = 'http://192.168.0.26:8059'
 # Websocket地址
 VITE_WEBSOCKET_URL = 'ws://192.168.101.178:8079'
 ``

src/components/ScanCodeInput/index.vue

@@ -1,7 +1,7 @@
 <template>
   <el-input class="scanInput" clearable v-bind="$attrs">
     <template #prefix>
-      <img src="@/assets/icons/shaoma.svg" />
+      <img style="width: 30px; height: 30px" src="@/assets/icons/shaoma.svg" />
     </template>
     <template v-if="$attrs.showSuffix" #suffix>
       <i-ep-search @click.self="$emit('keydown')" />

src/components/Upload/CameraUpload.vue

@@ -187,6 +187,7 @@ const camera_ohos = () => {
   height: 292px;
   border-radius: 16px 16px 16px 16px;
   border: 2px dashed rgba(0, 0, 0, 0.2);
+  background-color: var(--ohos-box-bg);
 
   .row {
     width: 100%;

src/layout/components/header.vue

@@ -2,11 +2,12 @@
   <div class="commonHeader">
     <div style="width: 155px">
       <svg-icon
-        v-if="routeMeta.back"
+        v-if="routeMeta.back && !route.path.startsWith('/pro-steps')"
         icon-class="back"
-        size="48"
+        size="42"
         @click="commonBack"
       />
+      <div style="font-size: 35px; color: white">生产执行</div>
       <!-- <svg-icon v-else icon-class="LOGO" style="height: 48px; width: 155px" /> -->
     </div>
     <div v-if="routeMeta.back && routeMeta.title" class="middle-title">
@@ -18,30 +19,38 @@
     </div>
     <div>
       <el-space>
-        <div>
+        <div
+          style="
+            background-color: var(--ohos-box-bg);
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          "
+        >
           <svg-icon
             class="activeNotice"
-            icon-class="shutdown"
+            icon-class="closeI"
             size="47"
             @click="toExitApp"
           />
         </div>
-        <div>
+        <!-- <div>
           <svg-icon
             class="activeNotice"
             icon-class="hongDa_black"
             size="48"
             @click="goToDevice"
           />
-        </div>
-        <div>
+        </div> -->
+        <!-- <div>
           <svg-icon
             class="activeNotice"
             icon-class="lingdang"
             size="48"
             @click="messageStatus = !messageStatus"
           />
-        </div>
+        </div> -->
         <!--        <div class="task">-->
         <!--          <el-progress-->
         <!--            :percentage="processCount"-->
@@ -57,8 +66,8 @@
           @command="handleCommand"
         >
           <div @click="showClick">
-            <div class="name">{{ userStore.user.username }}</div>
-            <div class="work">{{ userStore.user.station }}</div>
+            <div class="name">李明华</div>
+            <!-- <div class="work">{{ userStore.user.station }}</div> -->
           </div>
           <!--          <img-->
           <!--            v-if="userStore.user.avatar"-->
@@ -72,7 +81,7 @@
           <template #dropdown>
             <el-dropdown-menu style="width: 150px">
               <!--              <el-dropdown-item command="a">Action 1</el-dropdown-item>-->
-              <el-dropdown-item command="b">退出登录</el-dropdown-item>
+              <!-- <el-dropdown-item command="b">退出登录</el-dropdown-item> -->
               <!--              <el-dropdown-item command="c" divided>Action 3</el-dropdown-item>-->
               <el-dropdown-item command="c"
                 >{{ notice ? "关闭" : "打开" }}触摸提示
@@ -95,6 +104,7 @@ import { ElMessage, ElMessageBox } from "element-plus";
 const userStore = useUserStore();
 const router = useRouter();
 const route = useRoute();
+console.log(route.path, "22");
 const routeMeta = computed(() => {
   return route.meta;
 });
@@ -199,7 +209,7 @@ const goToDevice = () => {
 .commonHeader {
   height: $navbar-height;
   width: 100%;
-  background-color: #f1f3f5;
+  background-color: var(--ohos-bg);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -238,7 +248,7 @@ const goToDevice = () => {
   .name {
     font-weight: 500;
     font-size: 20px;
-    color: rgba(0, 0, 0, 0.9);
+    color: var(--ohos-text);
     line-height: 14px;
     text-align: right;
   }

src/layout/index.vue

@@ -21,7 +21,7 @@
       </router-view>
     </section>
     <!-- 左侧消息弹框 -->
-    <RealTimeMsg />
+    <!-- <RealTimeMsg /> -->
   </div>
 </template>
 
@@ -37,8 +37,7 @@ provide("fullscreenLoading", fullscreenLoading);
   width: 100%;
   min-height: calc(100vh - $navbar-height);
   overflow: hidden;
-  // background-color: var(--el-bg-color-page);
-  background-color: #f1f3f5;
+  background-color: var(--ohos-bg);
 }
 
 .main-container {

src/plugins/permission.ts

@@ -21,6 +21,9 @@ export function setupPermission() {
       //@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") {
@@ -47,19 +50,20 @@ export function setupPermission() {
       }
     } else {
       // 未登录可以访问白名单页面
-
-      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();
-      }
+      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();
+      // }
     }
   });
 

src/router/modules/constant.ts

@@ -15,16 +15,16 @@ const constantRoutes: RouteRecordRaw[] = [
     ],
   },
 
-  {
-    path: "/login",
-    component: () => import("@/views/login/index.vue"),
-    meta: { hidden: true },
-  },
-  {
-    path: "/client-traceability/:id",
-    component: () => import("@/views/traceability/index.vue"),
-    name: "client-traceability",
-  },
+  // {
+  //   path: "/login",
+  //   component: () => import("@/views/login/index.vue"),
+  //   meta: { hidden: true },
+  // },
+  // {
+  //   path: "/client-traceability/:id",
+  //   component: () => import("@/views/traceability/index.vue"),
+  //   name: "client-traceability",
+  // },
 
   {
     path: "/:pathMatch(.*)*", // 必备

src/router/modules/process.ts

@@ -5,7 +5,7 @@ export default {
   path: "/",
   name: "/",
   component: Layout,
-  redirect: "/process",
+  redirect: "/pro-steps",
   children: [
     {
       path: "process",

src/styles/variables.scss

@@ -11,7 +11,8 @@
   --ohos-bg: #000;
   --ohos-text: #ffffff;
   --ohos-area-bg: #191919;
-  --ohos-box-bg: #ffffff20;
+  --ohos-box-bg: #ffffff40;
+  --ohos-box-active-bg: #64bb5c80;
   --ohos-area-active-bg: #e5e5e5;
   --ohos-text-green: #3d0158;
 }
@@ -66,3 +67,10 @@ $p20: 20px;
   justify-content: center;
   align-items: center;
 }
+:deep(.el-table--fit) {
+  background-color: #000 !important;
+}
+:deep(.el-table__cell) {
+  background-color: #000 !important;
+  color: white;
+}

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

@@ -92,7 +92,7 @@ onMounted(async () => {
 .espoViewStyle {
   display: flex;
   max-height: calc(100vh - 234px);
-  width: calc(100vw / 6 * 5 - 50px);
+  width: 100%;
   flex-direction: column;
 }
 

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="padding-top: 20px">
     <div v-if="!addStatus">
       <div class="stepsViewScrollH">
         <div class="left">
@@ -213,7 +213,7 @@ onMounted(() => {
   width: 100%;
   height: calc(100vh - 290px);
   display: flex;
-  background-color: white;
+  background-color: black;
   border-radius: 16px;
   justify-content: center;
   align-items: center;
@@ -228,12 +228,13 @@ onMounted(() => {
     width: 25%;
     height: 100%;
     border-radius: 16px;
-    background-color: white;
+    background-color: var(--ohos-box-bg);
   }
   .right {
     flex: 1;
     border-radius: 16px;
     margin-left: 20px;
+
     .tableView {
       width: 100%;
       height: calc(100vh - 340px);
@@ -244,7 +245,6 @@ onMounted(() => {
       height: 50px;
       display: flex;
       align-items: center;
-      background-color: rgb(241, 243, 245);
       .btn {
         height: 30px;
       }

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="stepsViewScroll">
+  <div class="stepsViewScroll" style="width: calc(100% - 40px)">
     <div class="recordBox" v-for="(item, index) in checkListData" :key="index">
       <div class="leftMsg">
         <div class="msgHeader">
@@ -91,7 +91,7 @@ const setBoxStatus = (status: string) => {
       style = "background-color: #E84026;color: white;";
       break;
     default:
-      style = "background-color: #00000015;color: black;";
+      style = "background-color: #00000015;color: white;";
       break;
   }
   return style;
@@ -111,16 +111,20 @@ onMounted(() => {
 .titleText {
   font-size: $f24;
   font-weight: $Medium;
+  color: var(--ohos-text);
 }
 
 .describeText {
   font-size: $f20;
   color: $font-default-60;
   line-height: 25px;
+  color: var(--ohos-text);
 }
 
 .recordBox {
-  background-color: white;
+  width: calc(100%);
+  background-color: var(--ohos-box-bg);
+  color: var(--ohos-text);
   border-radius: 16px;
   display: flex;
   padding: $p20;

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

@@ -176,6 +176,7 @@ window.addEventListener("message", (event) => {
   overflow: hidden;
   position: relative;
 
+
   .img-box {
     width: 292px;
     height: 292px;

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

@@ -248,7 +248,7 @@ onMounted(() => {
 }
 .btnText {
   font-size: $f20;
-  color: black;
+  color: white;
 }
 .excelView {
   width: 100%;

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

@@ -276,8 +276,11 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.titleText {
+  color: var(--ohos-text);
+}
 .describeText {
-  color: black;
+  color: var(--ohos-text);
 }
 
 .stepsViewScrollH {
@@ -325,9 +328,10 @@ onMounted(() => {
     .infoBox {
       display: inline-block;
       box-sizing: border-box;
+      background-color: var(--ohos-box-bg);
       width: 230px;
       height: 180px;
-      background-color: white;
+
       border-radius: 16px;
       padding: 20px;
       margin: 0 5px;
@@ -344,7 +348,7 @@ onMounted(() => {
 
   .right {
     width: 50%;
-    background-color: white;
+    background-color: var(--ohos-box-bg);
     border-radius: 16px;
     height: calc(100%);
   }
@@ -352,7 +356,7 @@ onMounted(() => {
 
 .operateBox {
   padding: $p20;
-  background-color: white;
+  background-color: var(--ohos-box-bg);
   border-radius: 16px;
   margin: $p20;
   position: relative;

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

@@ -109,13 +109,13 @@ const stepComponents = ref([
     width: 100%;
     height: 88px;
     border-radius: 16px;
-    background-color: white;
+    background-color: var(--ohos-box-bg);
     margin-bottom: 20px;
     display: flex;
     padding: 20px;
     justify-content: space-between;
     align-items: center;
-
+    color: var(--ohos-text);
     .operatorText {
       font-size: $f24;
     }
@@ -127,7 +127,7 @@ const stepComponents = ref([
 }
 
 .active {
-  background-color: #64bb5c !important;
+  background-color: var(--ohos-box-active-bg) !important;
   color: white;
 }
 </style>

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

@@ -9,9 +9,10 @@
         style="position: relative"
       >
         <template #title>
-          {{
-            dictS.getLableByValue("device_type", item.deviceType)
-          }}&nbsp;&nbsp;&nbsp;<span
+          <span class="diviceName">
+            {{ dictS.getLableByValue("device_type", item.deviceType) }}</span
+          >
+          &nbsp;&nbsp;&nbsp;<span
             :class="item.state ? 'round green' : 'round'"
           ></span
           >&nbsp; &nbsp;
@@ -660,16 +661,25 @@ emitter.on(EventsNames.GETDATA_WKDLT, (name) => {
 </script>
 
 <style lang="scss" scoped>
+:deep(.el-collapse-item) {
+}
+:deep(.el-collapse-item__wrap) {
+  background-color: black;
+}
+.diviceName {
+  color: var(--ohos-text);
+}
 .ces {
   font-size: 18px;
   height: 40px;
 }
 .containerBox {
-  background-color: white;
   padding: 20px;
+  border-radius: 16px !important;
+  overflow: hidden;
 }
 :deep(.el-collapse-item__header) {
-  background-color: rgb(241, 243, 245) !important;
+  background-color: var(--ohos-box-bg) !important;
   padding: 0 20px;
   height: 80px;
 }
@@ -686,7 +696,7 @@ emitter.on(EventsNames.GETDATA_WKDLT, (name) => {
 }
 :deep(.el-collapse-item__wrap) {
   padding: 20px;
-  border: 1px solid rgb(241, 243, 245);
+  border: 1px solid var(--ohos-box-bg);
 }
 .opear {
   font-size: 16px;

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

@@ -1,10 +1,10 @@
 <template>
-  <div class="stepsViewScroll">
+  <div class="stepsViewScroll" style="width: calc(100%)">
     <div class="recordBox" v-for="(item, index) in equitListData" :key="index">
       <div class="headerText titleText">{{ item.equitType }}</div>
       <div class="describeBox">
         <div class="describeText">精度要求</div>
-        <div class="describeText" style="color: black">
+        <div class="describeText">
           {{ item.accuracy }}
         </div>
       </div>
@@ -51,7 +51,7 @@
         <el-button
           v-if="!item.equitCode && !item.selectStatus"
           class="bottomBtn"
-          style="background-color: #0a59f7"
+          type="primary"
           :disabled="item.selectStatus"
           @click="openScanCode(index)"
           >点击扫描其它设备</el-button
@@ -182,8 +182,15 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.titleText {
+  color: var(--ohos-text);
+}
+.describeText {
+  color: var(--ohos-text);
+}
+
 .recordBox {
-  background-color: white;
+  background-color: var(--ohos-box-bg);
   border-radius: 16px;
   display: flex;
   padding: $p20;
@@ -198,6 +205,7 @@ onMounted(() => {
   }
 
   .describeBox {
+    color: var(--ohos-text);
   }
   .selectBtn {
     display: flex;

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

@@ -158,16 +158,19 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .scanCode {
-  width: 100%;
+  width: 400px;
   margin-top: $p5;
+  border-radius: 25px;
+  overflow: hidden;
 }
 
 .materialInfoBody {
-  width: calc((100vw / 6 * 5) - 50px);
+  width: 100%;
   margin-top: $p10;
   display: grid;
   gap: 20px;
   grid-template-columns: 1fr 1fr;
+  color: var(--ohos-text);
 
   .infoMsgImg {
     background-image: url("@/assets/images/caijiwancheng.png");
@@ -181,12 +184,12 @@ onMounted(() => {
   }
 
   .whiteBgClass {
-    background-color: #ffffff;
+    background-color: var(--ohos-box-bg);
   }
 
   .infoMsg {
     height: 190px;
-
+    color: var(--ohos-text);
     border-radius: 16px;
     display: flex;
     padding: $p20;
@@ -198,12 +201,14 @@ onMounted(() => {
       position: absolute;
       bottom: 0;
       right: 0;
+      color: var(--ohos-text);
     }
 
     .describe {
       font-size: $f20;
       color: $font-default-60;
       line-height: 30px;
+      color: var(--ohos-text);
     }
 
     .leftMsg {
@@ -223,7 +228,9 @@ onMounted(() => {
     }
   }
 }
-
+:deep(.el-input__wrapper) {
+  background-color: #000;
+}
 .showCodeBody {
   width: calc((100vw / 6 * 5) - 50px);
   height: calc((100vh - 240px));

src/views/pro-steps/index.vue

@@ -2,7 +2,7 @@
 <template>
   <div>
     <div class="headerInfo">
-      <div
+      <!-- <div
         class="titleText"
         style="
           width: 300px;
@@ -34,13 +34,18 @@
             store.scanInfo.materialCode ? store.scanInfo.materialCode : "-"
           }}
         </div>
-      </div>
+      </div> -->
     </div>
     <div class="mainContentBox">
       <el-row :gutter="20">
         <el-col :span="4" class="boxStyle">
           <!-- 侧边栏盒子 -->
-          <OperationBar />
+          <div class="commonTitle">工序</div>
+          <el-scrollbar
+            style="height: calc(100vh - 120px); padding-bottom: 60px"
+          >
+            <Steps :opsArray="opsArray" />
+          </el-scrollbar>
         </el-col>
         <el-col :span="20">
           <div class="typeContainer">
@@ -87,6 +92,7 @@
 
 <script setup>
 import OperationBar from "@/views/pro-steps/operationBar.vue";
+import Steps from "@/views/process/components/steps.vue";
 import { useProcessStore } from "@/store";
 import { getOpCompent } from "@/api/prosteps";
 
@@ -94,6 +100,255 @@ defineOptions({
   name: "ProSteps",
 });
 const store = useProcessStore();
+store.odersData = {
+  productLineId: "10",
+  workOrderCode: "10.25.0021",
+  operationId: "536",
+};
+store.processInfo = {
+  materialName: "底遮板弹星发射天线",
+  materialModel: "1S043-17(B)_60051S043T1_1S043-17(B)底遮板弹星发射天线(再入)",
+  operationCode: "XFOP-0015",
+  operationName: "装配",
+};
+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 key = ref(false);
 const route = useRoute();
 const router = useRouter();
@@ -238,22 +493,30 @@ onActivated(async () => {
 <style lang="scss" scoped>
 .boxStyle {
   height: calc(100vh - 80px);
+  .commonTitle {
+    color: var(--ohos-text);
+    font-size: 28px;
+  }
+}
+.optionBox {
+  height: calc(100vh - 150px);
+  background-color: var(--ohos-area-bg);
+  border-radius: 16px;
 }
-
 .headerInfo {
-  height: 40px;
+  height: 20px;
   width: calc(100vw - 40px);
-  padding: 10px;
-  margin: 0 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-radius: 16px;
-  border-right: 0px;
-  border-left: 0px;
-  box-sizing: border-box;
-  margin-bottom: 10px;
-  background-color: white;
+  // padding: 10px;
+  // margin: 0 20px;
+  // display: flex;
+  // justify-content: space-between;
+  // align-items: center;
+  // border-radius: 16px;
+  // border-right: 0px;
+  // border-left: 0px;
+  // box-sizing: border-box;
+  // margin-bottom: 10px;
+  // background-color: white;
 
   .info {
     display: flex;
@@ -276,6 +539,8 @@ onActivated(async () => {
   width: 135px;
   border-radius: 16px;
   text-align: center;
+  background-color: var(--ohos-box-bg);
+  margin-right: 10px;
 }
 
 .typeContainer {
@@ -289,7 +554,7 @@ onActivated(async () => {
 }
 
 .mainContentBox {
-  height: calc(100vh - 130px);
+  height: calc(100vh - 110px);
 }
 
 .routerView {
@@ -297,8 +562,11 @@ onActivated(async () => {
   flex: 1;
   overflow-y: auto;
   width: 100%;
-  height: calc(100vh - 234px);
-  padding-top: $p20;
+  height: calc(100vh - 214px);
+  margin-top: 20px;
+  background-color: #ffffff20 !important;
+  padding: 0 20px;
+  border-radius: 16px;
 }
 
 .typeBox {
@@ -324,11 +592,11 @@ onActivated(async () => {
 
 .typeBoxNormal {
   background: transparent;
-  color: rgba(0, 0, 0, 0.9);
+  color: var(--ohos-text);
 }
 
 .typeBoxSelected {
-  background: $select-hover;
-  color: white;
+  background-color: var(--ohos-area-active-bg);
+  color: black !important;
 }
 </style>

src/views/pro-steps/popUpView/xiangqingPopUp.vue

@@ -73,9 +73,13 @@ const handleClose = () => {
     width: 75%;
   }
 }
-
+.container {
+  background-color: var(--ohos-area-bg);
+  color: var(--ohos-text);
+}
 .describeText {
   line-height: 25px !important;
+  color: var(--ohos-text) !important;
 }
 
 .infoBox {
@@ -132,6 +136,7 @@ const handleClose = () => {
     background-color: white;
     border-radius: 16px;
     line-height: 70px;
+    color: var(--ohos-text);
   }
 }
 </style>

src/views/process/components/steps.vue

@@ -1,95 +1,67 @@
 <template>
   <div class="body">
-    <TransitionGroup name="list">
+    <div
+      class="steps"
+      v-for="(item, index) in opsArray"
+      :key="index"
+      @click="boxClick(item, index)"
+    >
       <div
-        class="steps"
-        v-for="(item, index) in opsArray"
-        :key="index"
-        @click="boxClick(item, index)"
+        :class="
+          item.exists == true
+            ? selectStepIndex == index
+              ? 'stepBox stepBoxHover'
+              : 'stepBox'
+            : 'stepBox stepExistsHover'
+        "
       >
-        <div
-          :class="
-            item.exists == true
-              ? selectStepIndex == index
-                ? 'stepBox stepBoxHover'
-                : 'stepBox'
-              : 'stepBox stepExistsHover'
-          "
-        >
-          <div style="display: flex; align-items: center">
-            <div
+        <div style="display: flex; align-items: center">
+          <div
+            :class="
+              selectStepIndex == index
+                ? 'stepIndex stepIndexHover'
+                : 'stepIndex'
+            "
+          >
+            <span
               :class="
                 selectStepIndex == index
-                  ? 'stepIndex stepIndexHover'
-                  : 'stepIndex'
+                  ? 'indexText hoverTextColor'
+                  : 'indexText'
               "
+              >{{ index + 1 }}</span
             >
-              <span
-                :class="
-                  selectStepIndex == index
-                    ? 'indexText hoverTextColor'
-                    : 'indexText'
-                "
-                >{{ index + 1 }}</span
-              >
-            </div>
-            <div class="midTextBox">
-              <div
-                :class="
-                  selectStepIndex == index
-                    ? 'stepName stepNameHover'
-                    : 'stepName'
-                "
-              >
-                {{ item.operationName }}
-              </div>
-              <div
-                :class="
-                  selectStepIndex == index
-                    ? 'stepStation stepStationHover'
-                    : 'stepStation'
-                "
-              >
-                {{ item.operationCode }}
-              </div>
-            </div>
           </div>
-          <div
-            :class="
-              selectStepIndex == index ? 'timeBox timeBoxHover' : 'timeBox'
-            "
-          >
-            {{ item.completeNum }}
+          <div class="midTextBox">
+            <div
+              :class="
+                selectStepIndex == index ? 'stepName stepNameHover' : 'stepName'
+              "
+            >
+              {{ item.operationName }}
+            </div>
           </div>
         </div>
-        <Transition>
-          <div v-if="item.exists != true" class="existsText">
-            注：该工位计划上未分配此任务！
-          </div>
-        </Transition>
-        <div class="line" v-if="index != opsArray.length - 1"></div>
+        <div
+          :class="selectStepIndex == index ? 'timeBox timeBoxHover' : 'timeBox'"
+        >
+          {{ 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"
+            v-if="index == selectStepIndex"
+          />
+        </div>
       </div>
-    </TransitionGroup>
+
+      <div class="line" v-if="index != opsArray.length - 1"></div>
+    </div>
+
     <el-empty v-if="!opsArray" description="暂无数据" />
     <!-- 弹窗 -->
-
-    <el-dialog
-      v-model="centerDialogVisible"
-      width="500"
-      align-center
-      style="border-radius: 16px"
-    >
-      <template #header>
-        <div class="titleText" style="text-align: center">通知</div>
-      </template>
-      <span class="titleText">已选择好工序，点击确认立即开工</span>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="centerDialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="getScanData"> 确定 </el-button>
-        </div>
-      </template>
-    </el-dialog>
   </div>
 </template>
 
@@ -107,7 +79,7 @@ const props = defineProps<{
 }>();
 //步骤显示index
 const router = useRouter();
-const selectStepIndex = ref(null);
+const selectStepIndex = ref(1);
 const selectedOderStatus = inject("selectedOderStatus");
 const selectOrderIndex = inject("selectOrderIndex");
 const centerDialogVisible = ref(false);
@@ -159,31 +131,6 @@ const getScanData = async () => {
     centerDialogVisible.value = false;
   }
 };
-watch(
-  () => props.opsArray,
-  () => {
-    if (props.opsArray.length > 0) {
-      selectStepIndex.value = null;
-      // setStepIndex();
-      if (selectStepIndex.value !== null) {
-        boxClick(props.opsArray[selectStepIndex.value], selectStepIndex.value);
-      } else {
-        emitFnc();
-      }
-    } else {
-      selectStepIndex.value = null;
-    }
-  }
-);
-watch(
-  () => selectedOderStatus.value,
-  () => {
-    selectStepIndex.value = null;
-  }
-);
-onBeforeUnmount(() => {
-  emitter.off(EventsNames.PROCESS_STEPOBJ);
-});
 </script>
 
 <style lang="scss" scoped>
@@ -202,23 +149,20 @@ onBeforeUnmount(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 88px;
-  border-radius: 44px;
-  background-color: white;
+  height: 40px;
+  border-radius: 20px;
+  background-color: rgb(64, 64, 64);
   box-shadow: 0px 1px 1px 1px #00000025;
 }
 
 .stepBoxHover {
   box-shadow: 0px 0px 0px 0px;
-  background-color: $select-hover;
-  animation-name: bodyHover;
-  animation-duration: $animation-duration;
+  background-color: var(--ohos-area-active-bg);
+  
 }
 
 .stepExistsHover {
-  background-color: grey;
-  animation-name: stepHover;
-  animation-duration: $animation-duration;
+
   cursor: not-allowed;
 }
 
@@ -228,15 +172,15 @@ onBeforeUnmount(() => {
 }
 
 .stepIndexHover {
-  border-color: white !important;
-
+  border-color: #303030;
+  background-color: var(--ohos-area-active-bg) !important;
   span {
-    color: white;
+    color: black !important;
   }
 }
 
 .stepNameHover {
-  color: white !important;
+  color: black !important;
 }
 
 .stepStationHover {
@@ -252,15 +196,17 @@ onBeforeUnmount(() => {
 }
 
 .stepIndex {
-  width: 88px;
-  height: 88px;
+  width: 40px;
+  height: 40px;
   border: 2px solid #303030;
   border-radius: 44px;
+  color: var(--ohos-text);
+  background-color: rgb(108, 108, 108);
   @include flex;
 
   .indexText {
-    font-size: $f24;
-    color: #303030;
+    font-size: $f16;
+    color: var(--ohos-text);
   }
 }
 
@@ -268,8 +214,8 @@ onBeforeUnmount(() => {
   margin-left: 10px;
 
   .stepName {
-    font-size: $f24;
-    color: $font-default-black;
+    font-size: $f16;
+    color: var(--ohos-text);
   }
 
   .stepStation {
@@ -286,9 +232,9 @@ onBeforeUnmount(() => {
 }
 
 .line {
-  border-right: 1px solid #303030;
+  border-right: 1px solid #e5e5e5;
   height: 15px;
   width: 1px;
-  margin-left: 44px;
+  margin-left: 20px;
 }
 </style>