工序执行

src/components/ScanCodeInput/index.vue

@@ -21,6 +21,7 @@
   color: #00000080;
 
   :deep(.el-input__wrapper) {
+    background-color: #d5dade;
     box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
       inset;
     cursor: default;

src/layout/components/header.vue

@@ -2,8 +2,11 @@
   <div class="commonHeader">
     <div style="width: 200px">
       <div style="display: flex; align-items: center">
-        <img src="/logo.png" style="width: 35px; height: 35px; margin-right: 10px" />
-        <div style="font-size: 30px; color: white">生产执行</div>
+        <img
+          src="/logo.png"
+          style="width: 35px; height: 35px; margin-right: 10px"
+        />
+        <div style="font-size: 30px; color: black">生产执行</div>
       </div>
 
       <!-- <svg-icon v-else icon-class="LOGO" style="height: 48px; width: 155px" /> -->
@@ -17,8 +20,21 @@
     </div>
     <div>
       <el-space>
-        <div style="border-radius: 50%; display: flex; justify-content: center; align-items: center">
-          <svg-icon class="activeNotice" icon-class="closeI" size="47" @click="toExitApp" />
+        <div
+          style="
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          "
+        >
+          <svg-icon
+            class="activeNotice"
+            icon-class="closeI"
+            size="47"
+            style="color: black"
+            @click="toExitApp"
+          />
         </div>
         <!-- <div>
           <svg-icon
@@ -45,7 +61,11 @@
         <!--          <div class="process">任务进度: {{ processCount }}%</div>-->
         <!--        </div>-->
 
-        <el-dropdown ref="dropdown1" trigger="contextmenu" @command="handleCommand">
+        <el-dropdown
+          ref="dropdown1"
+          trigger="contextmenu"
+          @command="handleCommand"
+        >
           <div @click="showClick">
             <!-- <div class="name">李明华</div> -->
             <!-- <div class="work">{{ userStore.user.station }}</div> -->
@@ -64,7 +84,9 @@
               <!--              <el-dropdown-item command="a">Action 1</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 ? "关闭" : "打开" }}触摸提示 </el-dropdown-item>
+              <el-dropdown-item command="c"
+                >{{ notice ? "关闭" : "打开" }}触摸提示
+              </el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
@@ -188,11 +210,11 @@ const goToDevice = () => {
 .commonHeader {
   height: $navbar-height;
   width: 100%;
-  background-color: var(--ohos-bg);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px 24px;
+  background-color: #f2f2f2;
   //border: 1px solid red;
 
   .middle-title {

src/layout/index.vue

@@ -37,7 +37,8 @@ provide("fullscreenLoading", fullscreenLoading);
   width: 100%;
   min-height: calc(100vh - $navbar-height);
   overflow: hidden;
-  background-color: var(--ohos-bg);
+  // background-color: var(--el-bg-color-page);
+  background-color: #f1f3f5;
 }
 
 .main-container {

src/styles/variables.scss

@@ -9,11 +9,11 @@
   --el-mask-color: #f1f3f5;
   //ohos 颜色样式更改
   --ohos-bg: #000;
-  --ohos-text: #ffffff;
-  --ohos-area-bg: #191919;
+  --ohos-text: black;
+  --ohos-area-bg: #d5dade;
   --ohos-box-bg: #ffffff40;
-  --ohos-box-active-bg: #64bb5c80;
-  --ohos-area-active-bg: #e5e5e5;
+  --ohos-box-active-bg: #92d240;
+  --ohos-area-active-bg: #00a5ff;
   --ohos-text-green: #3d0158;
 }
 

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

@@ -191,6 +191,7 @@ onMounted(() => {
     height: 190px;
     color: var(--ohos-text);
     border-radius: 16px;
+    background-color: #d5dade;
     display: flex;
     padding: $p20;
     justify-content: space-between;

src/views/pro-steps/index.vue

@@ -39,10 +39,40 @@
     <div class="mainContentBox">
       <el-row :gutter="20">
         <el-col :span="4" class="boxStyle">
+          <div class="selectOpBox">
+            <div
+              style="
+                font-size: 500;
+                font-size: 24px;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                height: 100%;
+                color: black;
+              "
+            >
+              请选择工位
+              <el-select
+                v-model="opValue"
+                class="m-2"
+                placeholder="请选择工位"
+                style="width: calc(100% - 40px)"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+          </div>
           <div class="productInfo" @click="openPop">
             <template v-if="taskIndex != null">
               <div
                 class="productitleText"
+                @click.stop
                 style="
                   font-size: 500;
                   font-size: 24px;
@@ -52,24 +82,36 @@
                   text-overflow: ellipsis;
                 "
               >
-                {{ taskArray[taskIndex].materialName }}
+                <span @dblclick="fz()">{{
+                  taskArray[taskIndex].workOrderCode
+                }}</span>
+                /
+                {{ taskArray[taskIndex].planNum }}
               </div>
               <div
                 class="productitleText"
                 style="
-                  color: #ffffff60;
+                  color: #000000;
                   white-space: nowrap;
                   overflow: hidden;
                   text-overflow: ellipsis;
                   -webkit-line-clamp: 2; /* 限制显示的行数 */
                 "
               >
-                {{ taskArray[taskIndex].materialModel }}
+                {{ taskArray[taskIndex].materialName }}
               </div>
               <div style="display: flex">
-                <div class="productitleText" style="color: #ffffff60">S/N</div>
-                <div class="productitleText">
-                  &nbsp;{{ snVal ? snVal : "-" }}
+                <div
+                  class="productitleText"
+                  style="
+                    color: #000000;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    -webkit-line-clamp: 2; /* 限制显示的行数 */
+                  "
+                >
+                  {{ taskArray[taskIndex].materialModel }}
                 </div>
               </div>
             </template>
@@ -92,10 +134,24 @@
           <!-- 侧边栏盒子 -->
           <div
             class="commonTitle"
-            style="display: flex; justify-content: space-between"
+            style="display: flex; justify-content: space-between; color: black"
           >
-            工序
-            <div v-if="selectStepIndex !== null">
+            <div>当前工位工序</div>
+            <el-button
+              type="primary"
+              @click="opShowAllStatus = true"
+              v-if="!opShowAllStatus && opsArray.length > 0"
+              link
+              >全部工序</el-button
+            >
+            <el-button
+              type="primary"
+              @click="opShowAllStatus = false"
+              v-if="opShowAllStatus && opsArray.length > 0"
+              link
+              >关闭</el-button
+            >
+            <!-- <div v-if="selectStepIndex !== null">
               <el-popconfirm
                 class="box-item"
                 title="请确认操作：叫料"
@@ -146,15 +202,16 @@
                   <el-button type="danger" link>缩回</el-button>
                 </template>
               </el-popconfirm>
-            </div>
+            </div> -->
           </div>
           <el-scrollbar
-            style="height: calc(100vh - 220px); padding-bottom: 60px"
+            style="height: calc(100vh - 600px); padding-bottom: 20px"
           >
             <Steps
               v-if="opsArray.length > 0"
-              :opsArray="opsArray"
+              :opsArray="setOpsArray"
               @init="init"
+              :opShowAllStatus
             />
             <template v-else>
               <div
@@ -163,18 +220,48 @@
                   font-size: 500;
                   font-size: 24px;
                   display: flex;
-                  height: calc(100vh - 280px);
+                  height: calc(100vh - 630px);
                   justify-content: center;
                   align-items: center;
-                  background-color: var(--ohos-area-bg);
+                  background-color: #d5dade;
                   border-radius: 16px;
-                  color: white;
+                  color: black;
                 "
               >
                 暂无工序
               </div>
             </template>
           </el-scrollbar>
+          <div
+            style="
+              width: 100%;
+              height: 200px;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-evenly;
+            "
+          >
+            <div>
+              <el-button type="primary" style="width: 100%">切换产品</el-button>
+            </div>
+            <div style="display: flex">
+              <el-button type="primary" style="width: 50%">开工</el-button>
+              <el-button type="primary" style="width: 50%">报工</el-button>
+            </div>
+            <div style="display: flex">
+              <el-button type="primary" style="width: 50%">条码跟踪</el-button>
+              <el-button type="primary" style="width: 50%">叫料</el-button>
+            </div>
+            <div style="display: flex">
+              <el-button type="primary" style="width: 50%">图纸资料</el-button>
+              <el-button type="primary" style="width: 50%"
+                >作业指导书</el-button
+              >
+            </div>
+            <div>
+              <el-button type="primary" style="width: 100%">流程单据</el-button>
+            </div>
+          </div>
         </el-col>
         <el-col :span="20">
           <div class="typeContainer">
@@ -230,17 +317,19 @@
             @keyup.enter="console.log(111)"
           />
         </div>
-        <el-divider class="dark" content-position="center"
+        <el-divider
+          content-position="center"
+          style="border-color: black !important"
           ><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;
+              color: black;
+              background-color: #d5dade;
             "
           >
             选择近期产品
@@ -251,13 +340,13 @@
             <div
               class="productInfo"
               :key="item + index"
-              style="background-color: var(--ohos-area-active-bg)"
+              style="background-color: #ffffff80"
               v-for="(item, index) in taskArray"
               @click="selectProduct(index)"
             >
               <div
                 class="productitleText"
-                style="font-size: 500; font-size: 24px; color: #000000"
+                style="font-size: 500; font-size: 24px"
               >
                 {{ item.materialName }}
               </div>
@@ -300,6 +389,68 @@ import { carCall, carBack, carExtend } from "@/api/process";
 defineOptions({
   name: "ProSteps",
 });
+//true为展示所有
+const opShowAllStatus = ref(false);
+const opValue = ref(null);
+const options = [
+  {
+    value: "Option1",
+    label: "Option1",
+  },
+  {
+    value: "Option2",
+    label: "Option2",
+  },
+  {
+    value: "Option3",
+    label: "Option3",
+  },
+  {
+    value: "Option4",
+    label: "Option4",
+  },
+  {
+    value: "Option5",
+    label: "Option5",
+  },
+];
+const copyTextUsingTextarea = (text) => {
+  let textArea = document.createElement("textarea");
+  textArea.value = text;
+  textArea.style.position = "absolute";
+  textArea.style.opacity = "0";
+  textArea.style.left = "-9999px";
+  textArea.style.top = "-9999px";
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+  try {
+    const result = document.execCommand("copy");
+    showCopyMessage(result);
+  } catch (err) {
+    showCopyMessage(false);
+  }
+
+  textArea.remove();
+};
+const showCopyMessage = (success) => {
+  if (success) {
+    ElMessage({
+      type: "success",
+      message: "复制成功!",
+    });
+  } else {
+    ElMessage({
+      type: "error",
+      message: "复制失败!",
+    });
+  }
+};
+const fz = () => {
+  const text = taskArray.value[taskIndex.value].workOrderCode;
+  console.log(taskArray.value[taskIndex.value]);
+  copyTextUsingTextarea(text);
+};
 const toCall = async () => {
   await carCall();
   ElMessage.success("呼叫成功,请等待");
@@ -395,6 +546,17 @@ const getTaskArray = async () => {
   taskArray.value = data.records;
 };
 const opsArray = ref([]);
+const setOpsArray = computed(() => {
+  const array = JSON.parse(JSON.stringify(opsArray.value));
+  array.forEach((item, index) => {
+    if (index < 3) {
+      item.isOp = false;
+    } else {
+      item.isOp = true;
+    }
+  });
+  return array;
+});
 const selectStepIndex = ref(null);
 provide("selectStepIndex", selectStepIndex);
 const key = ref(false);
@@ -408,58 +570,41 @@ const qrCode = ref(null);
 const stepComponents = ref([]);
 const defaultComponents = [
   {
-    compentName: "多媒体采集",
-    iconName: "duomeiticaiji",
-    path: "duomeiticaiji",
-    name: "Duomeiticaiji",
-  },
-  {
     compentName: "物料采集",
     iconName: "wuliaocaiji",
     path: "wuliaocaiji",
     name: "Wuliaocaiji",
   },
   {
-    compentName: "记录项",
-    iconName: "jiluxiang",
-    path: "jiluxiang",
-    name: "Jiluxiang",
+    compentName: "图像采集",
+    iconName: "duomeiticaiji",
+    path: "duomeiticaiji",
+    name: "Duomeiticaiji",
+  },
+  {
+    compentName: "工序表单",
+    iconName: "mingpai",
+    path: "execl",
+    name: "Excel",
   },
+
   {
-    compentName: "ESOP",
+    compentName: "自动测试",
     iconName: "ESOP",
     path: "esop",
     name: "Esop",
   },
   {
-    compentName: "点检",
-    iconName: "dianjian",
-    path: "dianjian",
-    name: "Dianjian",
-  },
-  {
-    compentName: "设备记录",
+    compentName: "设备确认",
     iconName: "shebeijilu",
     path: "shebeijilu",
     name: "Shebeijilu",
   },
   {
-    compentName: "测试记录",
-    iconName: "mingpai",
-    path: "ceshijilu",
-    name: "Ceshijilu",
-  },
-  {
-    compentName: "工序表单",
-    iconName: "mingpai",
-    path: "execl",
-    name: "Excel",
-  },
-  {
-    compentName: "数据采集",
-    iconName: "mingpai",
-    path: "screwdriver",
-    name: "Screwdriver",
+    compentName: "检验",
+    iconName: "dianjian",
+    path: "dianjian",
+    name: "Dianjian",
   },
 ];
 //当前路由在setpComponents中的index
@@ -500,8 +645,8 @@ const setSelectIndex = (index) => {
     selectIndex.value = index;
   }
 };
-const init = async (index) => {
-  if (taskIndex.value == null) {
+const init = async (index, status) => {
+  if (taskIndex.value == null || status == true) {
     return;
   }
   selectStepIndex.value = index != null ? index : 0;
@@ -540,8 +685,14 @@ watch(
   }
 );
 </script>
-
+d
 <style lang="scss" scoped>
+.selectOpBox {
+  height: 100px;
+  margin-bottom: 10px;
+  background-color: #d5dade;
+  border-radius: 5px;
+}
 .disabled {
   opacity: 0.6 !important;
 }
@@ -560,17 +711,17 @@ watch(
   width: 100%;
   height: 100px;
   margin-bottom: 10px;
-  border-radius: 16px;
-  background-color: var(--ohos-area-bg);
+  border-radius: 5px;
+  background-color: #d5dade;
   padding: 10px 20px;
   cursor: pointer;
   .productitleText {
-    color: white;
+    color: black;
   }
 }
 .optionBox {
   height: calc(100vh - 150px);
-  background-color: var(--ohos-area-bg);
+  background-color: #d5dade;
   border-radius: 16px;
 }
 .headerInfo {
@@ -609,7 +760,7 @@ watch(
   width: 135px;
   border-radius: 16px;
   text-align: center;
-  background-color: var(--ohos-box-bg);
+  background-color: #d5dade;
   margin-right: 10px;
 }
 
@@ -662,12 +813,12 @@ watch(
 
 .typeBoxNormal {
   background: transparent;
-  color: var(--ohos-text);
+  color: black;
 }
 
 .typeBoxSelected {
   background-color: var(--ohos-area-active-bg);
-  color: black !important;
+  color: white !important;
 }
 :deep(.el-divider__text) {
   padding: 0px;
@@ -677,13 +828,13 @@ watch(
   display: flex;
   flex-direction: column;
   height: 80%;
-  background-color: var(--ohos-area-bg);
+  background-color: #d5dade;
   border-radius: 16px;
   padding: 20px;
   .hang {
     display: flex;
     align-items: center;
-    color: white;
+    color: black;
     font-size: 20px;
   }
   .taskBox {
@@ -692,4 +843,7 @@ watch(
     gap: 20px; /* 设置间距为 20px */
   }
 }
+:deep(.el-input__wrapper) {
+  background-color: #00000020 !important;
+}
 </style>

src/views/process/components/steps.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="body">
     <div
-      class="steps"
-      v-for="(item, index) in opsArray"
+      :class="item.isOp == true ? 'steps stepsDisabled' : 'steps'"
+      v-for="(item, index) in showOpsArray"
       :key="index"
       @click="boxClick(item, index)"
     >
@@ -41,16 +41,16 @@
         >
           {{ item.completeNum }}
         </div>
-        <div style="padding-right: 20px">
+        <!-- <div style="padding-right: 20px">
           <svg-icon
             icon-class="dangqian"
             size="20"
             v-if="index == selectStepIndex"
           />
-        </div>
+        </div> -->
       </div>
 
-      <div class="line" v-if="index != opsArray.length - 1"></div>
+      <div class="line" v-if="index != showOpsArray.length - 1"></div>
     </div>
 
     <el-empty v-if="!opsArray" description="暂无数据" />
@@ -64,6 +64,10 @@ import { getScan } from "@/api/process";
 const store = useProcessStore();
 const props = defineProps({
   opsArray: Object,
+  opShowAllStatus: Boolean,
+});
+const showOpsArray = computed(() => {
+  return props.opShowAllStatus ? props.opsArray : props.opsArray.slice(0, 3);
 });
 const emit = defineEmits(["init"]);
 //步骤显示index
@@ -71,11 +75,13 @@ const router = useRouter();
 const selectStepIndex = inject("selectStepIndex");
 
 const boxClick = (item, index) => {
+  if (item.isOp == true) {
+    return;
+  }
   store.odersData.operationId = item.operationId;
   store.processInfo.operationCode = item.operationCode;
   store.processInfo.operationName = item.operationName;
   selectStepIndex.value = index;
-  emit("init", selectStepIndex.value);
 };
 const getScanData = async () => {
   try {
@@ -115,7 +121,12 @@ const getScanData = async () => {
   background-color: rgb(64, 64, 64);
   box-shadow: 0px 1px 1px 1px #00000025;
 }
-
+.stepsDisabled {
+  opacity: 0.5;
+}
+.stepsDisabled:hover {
+  cursor: not-allowed; /* 禁止状态 */
+}
 .stepBoxHover {
   box-shadow: 0px 0px 0px 0px;
   background-color: var(--ohos-area-active-bg);
@@ -131,15 +142,15 @@ const getScanData = async () => {
 }
 
 .stepIndexHover {
-  border-color: #303030;
+  border-color: white !important;
   background-color: var(--ohos-area-active-bg) !important;
   span {
-    color: black !important;
+    color: white !important;
   }
 }
 
 .stepNameHover {
-  color: black !important;
+  color: white !important;
 }
 
 .stepStationHover {
@@ -191,7 +202,7 @@ const getScanData = async () => {
 }
 
 .line {
-  border-right: 1px solid #e5e5e5;
+  border-right: 1px solid black;
   height: 15px;
   width: 1px;
   margin-left: 20px;