feature/首页未完成任务&工序联动&右块布局样式优化

src/views/pro-steps/index.vue

@@ -77,10 +77,6 @@ const clickToolCom = (com, index) => {
 const getNameClass = (index) => {
   return index === selectIndex.value ? "typeBoxSelected" : "typeBoxNormal";
 };
-
-onMounted(() => {
-  console.log(route, "route");
-});
 </script>
 
 <style lang="scss" scoped>

src/views/process/components/steps.vue

@@ -1,25 +1,24 @@
 <template>
   <div class="body">
-    <div class="steps" v-for="(item, index) in array" :key="index">
+    <div class="steps" v-for="(item, index) in opsArray" :key="index">
       <div class="stepBox">
         <div style="display: flex; align-items: center">
           <div class="stepIndex">
             <span class="indexText">{{ index + 1 }}</span>
           </div>
           <div class="midTextBox">
-            <div class="stepName">{{ item.name }}</div>
-            <div class="stepStation">{{ item.position }}</div>
+            <div class="stepName">{{ item.operationName }}</div>
+            <div class="stepStation">{{ item.operationCode }}</div>
           </div>
         </div>
-        <div class="timeBox">{{ item.time }}</div>
+        <div class="timeBox">{{ item.completeNum }}</div>
       </div>
-      <div class="line" v-if="index != array.length - 1"></div>
+      <div class="line" v-if="index != opsArray.length - 1"></div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from "vue";
 const array = [
   {
     name: "aaa",
@@ -52,6 +51,9 @@ const array = [
     time: "14440",
   },
 ];
+defineProps<{
+  opsArray?: object;
+}>();
 </script>
 
 <style lang="scss" scoped>

src/views/process/currentProduction.vue

@@ -1,16 +1,16 @@
 <template>
   <!-- 包含当前订单 操作扫码板块 -->
-  <el-row :gutter="20">
-    <el-col :span="12" class="elColClasss" style="height: 310px" @click="click">
-      <CurrentOrderInfo />
-    </el-col>
-    <el-col :span="12" class="elColClasss" style="height: 310px">
-      <Operate />
-    </el-col>
-    <el-col :span="24" class="elColClasss" style="height: auto">
-      <ScanCode />
-    </el-col>
-  </el-row>
+  <div class="setFlex">
+    <el-row :gutter="20">
+      <el-col :span="12" class="elColClasss" style="height: 310px" @click="click">
+        <CurrentOrderInfo />
+      </el-col>
+      <el-col :span="12" class="elColClasss" style="height: 310px">
+        <Operate />
+      </el-col>
+    </el-row>
+    <ScanCode />
+  </div>
 </template>
 <script lang="ts" setup>
 import CurrentOrderInfo from "@/views/process/components/currentOrderInfo.vue";
@@ -27,6 +27,14 @@ const click = (itemValue) => {
   height: calc(100vh - 270px);
 }
 
+.setFlex {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100vh - 120px);
+  overflow: hidden;
+}
+
 .bottomBtn {
   height: 80px;
   margin-top: 10px;

src/views/process/main.vue

@@ -2,7 +2,7 @@
   <div class="mainContentBox">
     <el-row :gutter="20">
       <el-col :span="6" class="elColClasss">
-        <Orders :ordersSum="ordersSum" />
+        <Orders :ordersSum="ordersSum" @getindex="setSelectOrderIndex" />
       </el-col>
       <el-col :span="6" class="elColClasss">
         <div class="grid-content ep-bg-purple">
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, provide, ref, watch } from "vue";
+import { onMounted, provide, ref } from "vue";
 import Orders from "@/views/process/orders.vue";
 import Processes from "@/views/process/processes.vue";
 import CurrentProduction from "@/views/process/currentProduction.vue";
@@ -34,7 +34,7 @@ const setSelectOrderIndex = (value: number) => {
   selectOrderIndex.value = value;
 };
 provide("ordersDataArray", ordersDataArray);
-
+provide("selectOrderIndex", selectOrderIndex);
 //获取未完成订单的参数
 const ordersQuery = ref({
   orders: [],

src/views/process/orders.vue

@@ -8,15 +8,16 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, inject, onMounted, watch } from "vue";
 import Order from "@/views/process/components/order.vue";
 defineProps<{
   ordersSum?: number;
 }>();
+const emit = defineEmits(["getindex"]);
 const ordersDataArray = inject("ordersDataArray");
 const selectIndex = ref(NaN);
 const setSlectIndex = (value: number) => {
   selectIndex.value = value;
+  emit("getindex", value);
 };
 </script>
 

src/views/process/processes.vue

@@ -1,8 +1,8 @@
 <template>
   <!-- 工序板块 -->
-  <div class="commonTitle">工序[6]</div>
+  <div class="commonTitle">工序[{{ OptArrayLength }}]</div>
   <el-scrollbar class="barHeight">
-    <Steps />
+    <Steps :opsArray="opsArray" />
   </el-scrollbar>
   <div class="bottomBtn">
     <el-button color="#0A59F7" class="btn" round>
@@ -12,6 +12,20 @@
 </template>
 <script lang="ts" setup>
 import Steps from "@/views/process/components/steps.vue";
+const ordersDataArray = inject("ordersDataArray");
+const selectOrderIndex = inject("selectOrderIndex");
+const opsArray = ref([]);
+const setOptArray = () => {
+  if (selectOrderIndex.value > -1) {
+    opsArray.value = ordersDataArray.value[selectOrderIndex.value].ops;
+  } else {
+    opsArray.value = [];
+  }
+};
+const OptArrayLength = computed(() => opsArray.value.length);
+watch(selectOrderIndex, () => {
+  setOptArray();
+});
 </script>
 
 <style lang="scss" scoped>