feature/0410首页未完成订单调试

src/api/process/index.ts

@@ -0,0 +1,16 @@
+import request from "@/utils/request";
+import { AxiosPromise } from "axios";
+import { OrdersQuery } from "./types";
+
+/**
+ * 获取未完成任务
+ *
+ * @param data
+ */
+export function getOrders(data: any) {
+  return request({
+    url: "/api/v1/plan/workOrder/taskPage",
+    method: "post",
+    data: data,
+  });
+}

src/api/process/types.ts

@@ -0,0 +1,123 @@
+/**
+ * 登录用户信息
+ */
+// export interface UserInfo {
+//   userId?: number;
+//   username?: string;
+//   nickname?: string;
+//   avatar?: string;
+//   roles: string[];
+//   perms: string[];
+//   deptId?: string;
+// }
+
+/**
+ * 用户查询对象类型
+ */
+// export interface UserQuery extends PageQuery {
+//   keywords?: string;
+//   status?: number;
+//   deptId?: number;
+//   startTime?: string;
+//   endTime?: string;
+// }
+
+/**
+ * 一体机获取未完成任务请求参数
+ */
+export interface OrdersQuery extends PageQuery {
+  orders?: object[];
+}
+
+/**
+ * 用户分页对象
+ */
+export interface UserPageVO {
+  /**
+   * 用户头像地址
+   */
+  avatar?: string;
+  /**
+   * 创建时间
+   */
+  createTime?: Date;
+  /**
+   * 部门名称
+   */
+  deptName?: string;
+  /**
+   * 用户邮箱
+   */
+  email?: string;
+  /**
+   * 性别
+   */
+  genderLabel?: string;
+  /**
+   * 用户ID
+   */
+  id?: number;
+  /**
+   * 手机号
+   */
+  mobile?: string;
+  /**
+   * 用户昵称
+   */
+  nickname?: string;
+  /**
+   * 角色名称，多个使用英文逗号(,)分割
+   */
+  roleNames?: string;
+  /**
+   * 用户状态(1:启用;0:禁用)
+   */
+  status?: number;
+  /**
+   * 用户名
+   */
+  username?: string;
+}
+
+/**
+ * 用户表单类型
+ */
+export interface UserForm {
+  /**
+   * 用户头像
+   */
+  avatar?: string;
+  /**
+   * 部门ID
+   */
+  deptId?: number;
+  /**
+   * 邮箱
+   */
+  email?: string;
+  /**
+   * 性别
+   */
+  gender?: number;
+  /**
+   * 用户ID
+   */
+  id?: number;
+  mobile?: string;
+  /**
+   * 昵称
+   */
+  nickname?: string;
+  /**
+   * 角色ID集合
+   */
+  roleIds?: number[];
+  /**
+   * 用户状态(1:正常;0:禁用)
+   */
+  status?: number;
+  /**
+   * 用户名
+   */
+  username?: string;
+}

src/components/ScanCodeInput/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-input v-model="scanCode" placeholder="Please input" class="scanInput">
+    <template #prefix>
+      <img src="@/assets/icons/shaoma.svg" />
+    </template>
+  </el-input>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+const scanCode = ref("");
+defineExpose({
+  scanCode,
+});
+</script>
+
+<style lang="scss" scoped>
+.scanInput {
+  height: 80px;
+  border-radius: 76px;
+  overflow: hidden;
+  border: 1px solid #00000025;
+  font-size: $f24;
+  color: #00000080;
+
+  :deep(.el-input__wrapper) {
+    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
+    cursor: default;
+
+    .el-input__inner {
+      cursor: default !important;
+    }
+  }
+
+  :deep(.el-input-group__prepend) {
+    border: 0px;
+    background-color: white;
+  }
+}
+</style>

src/views/pro-steps/index.vue

@@ -1,16 +1,13 @@
 <template>
   <div class="mainContentBox">
     <el-row :gutter="20">
-      <el-col :span="4" class="elColClasss"> 对对对</el-col>
+      <el-col :span="4" class="elColClasss">
+        <!-- 侧边栏盒子 -->
+      </el-col>
       <el-col :span="20" class="elColClasss">
         <div class="typeContainer">
-          <div
-            v-for="(item, index) in stepComponents"
-            :key="index"
-            :class="getNameClass(index)"
-            class="typeBox"
-            @click="clickToolCom(item, index)"
-          >
+          <div v-for="(item, index) in stepComponents" :key="index" :class="getNameClass(index)" class="typeBox"
+            @click="clickToolCom(item, index)">
             <svg-icon :icon-class="item.compentType" size="30" />
             <div class="name">{{ item.compentName }}</div>
           </div>
@@ -21,6 +18,8 @@
 </template>
 
 <script setup>
+import { onMounted } from "vue";
+const route = useRoute();
 const stepComponents = ref([
   {
     compentName: "记录项",
@@ -70,6 +69,10 @@ 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/currentOrderInfo.vue

@@ -5,9 +5,7 @@
     <div class="box">
       <div class="boxContent">
         <div class="contentHeader">
-          <el-icon :size="30">
-            <CirclePlus />
-          </el-icon>
+          <img class="imgIcon" src="@/assets/icons/jinrijihua.svg" />
           <span class="headerText">产品数量</span>
         </div>
         <div class="contentNum">100</div>
@@ -16,10 +14,8 @@
     <div class="box">
       <div class="boxContent">
         <div class="contentHeader">
-          <el-icon :size="30">
-            <CirclePlus />
-          </el-icon>
-          <span class="headerText">222</span>
+          <img class="imgIcon" src="@/assets/icons/jinriwancheng.svg" />
+          <span class="headerText">完成数量</span>
         </div>
         <div class="contentNum">100</div>
       </div>
@@ -27,21 +23,17 @@
     <div class="box" style="position: absolute; left: 0; bottom: 0">
       <div class="boxContent">
         <div class="contentHeader">
-          <el-icon :size="30">
-            <CirclePlus />
-          </el-icon>
-          <span class="headerText">222</span>
+          <img class="imgIcon" src="@/assets/icons/zhuliaoqitao.svg" />
+          <span class="headerText">主料齐套</span>
         </div>
         <div class="contentNum">100</div>
       </div>
     </div>
     <div class="box" style="position: absolute; right: 0; bottom: 0">
-      <div class="boxContent">
+      <div class="boxContent activeBoxContent">
         <div class="contentHeader">
-          <el-icon :size="30">
-            <CirclePlus />
-          </el-icon>
-          <span class="headerText">222</span>
+          <img class="imgIcon" src="@/assets/icons/jinribaogu.svg" />
+          <span class="headerText">报故历史</span>
         </div>
         <div class="contentNum">100</div>
       </div>
@@ -58,7 +50,7 @@ import { reactive, ref } from "vue";
 <style lang="scss" scoped>
 .body {
   width: 100%;
-  height: 100%;
+  height: calc(100% - 60px);
   position: relative;
 
   .box {
@@ -70,7 +62,7 @@ import { reactive, ref } from "vue";
 
     .boxContent {
       border-radius: 16px;
-      background-color: white;
+
       width: calc(100% - 5px);
       height: calc(100% - 5px);
       position: relative;
@@ -84,6 +76,12 @@ import { reactive, ref } from "vue";
         top: 5px;
         left: 5px;
 
+        //控制icon大小
+        .imgIcon {
+          width: 32px;
+          height: 32px;
+        }
+
         .headerText {
           font-size: $f20;
           color: $font-default-60;
@@ -98,6 +96,10 @@ import { reactive, ref } from "vue";
         bottom: 1px;
       }
     }
+
+    .activeBoxContent {
+      background-color: white;
+    }
   }
 
   .horizontalLine {

src/views/process/components/order.vue

@@ -2,25 +2,25 @@
   <!-- 子订单盒子 -->
   <div :class="hoverStatus ? 'body bodyHover ' : 'body'">
     <div class="topArea">
-      <div class="productName">DS123422233卫星天线</div>
+      <div class="productName">{{ item.materialName }}</div>
       <div class="productMsg">
-        <span class="msgName">产品型号</span>
-        <span class="msgValue">DASD5561612</span>
+        <span :class="hoverStatus ? 'msgName msgNameHover' : 'msgName'">产品型号</span>
+        <span class="msgValue">{{ item.materialModel }}</span>
       </div>
       <div class="productMsg">
-        <span class="msgName">计划编号</span>
-        <span class="msgValue">JH516563332114466</span>
+        <span :class="hoverStatus ? 'msgName msgNameHover' : 'msgName'">计划编号</span>
+        <span class="msgValue">{{ item.workOrderCode }}</span>
       </div>
       <div class="productMsg">
         <span :class="hoverStatus ? 'msgName msgNameHover' : 'msgName'">
           订单编号
         </span>
-        <span class="msgValue">DD4545662211544</span>
+        <span class="msgValue">{{ item.orderCode }}</span>
       </div>
     </div>
     <div class="bottomArea">
       <div class="bottomBox">
-        <div class="boxNum">200</div>
+        <div class="boxNum">{{ parseInt(item.planNum) }}</div>
         <div :class="hoverStatus ? 'boxText boxTextHover' : 'boxText'">
           产品数量
         </div>
@@ -31,8 +31,10 @@
         </div>
       </div>
       <div class="bottomBox">
-        <div class="boxNum">100</div>
-        <div class="boxText">主料齐套</div>
+        <div class="boxNum">{{ parseInt(item.planNum) }}</div>
+        <div :class="hoverStatus ? 'boxText boxTextHover' : 'boxText'">
+          主料齐套
+        </div>
       </div>
     </div>
     <!-- 右下角状态盒子 -->
@@ -45,6 +47,7 @@ import { reactive, ref } from "vue";
 
 defineProps<{
   hoverStatus?: boolean;
+  item: object;
 }>();
 </script>
 
@@ -69,11 +72,7 @@ defineProps<{
 }
 
 .boxTextHover {
-  color: white;
-}
-
-.msgNameHover {
-  color: white;
+  color: white !important;
 }
 
 .productName {
@@ -85,6 +84,10 @@ defineProps<{
   color: $font-default-60;
 }
 
+.msgNameHover {
+  color: white !important;
+}
+
 .msgValue {
   margin-left: 5px;
   font-size: $f20;

src/views/process/components/scanCode.vue

@@ -0,0 +1,27 @@
+<template>
+  <!-- 扫码板块 -->
+  <div class="commonTitle">扫码</div>
+  <div class="icon">
+    <img class="imgIcon" src="@/assets/icons/shaoma.svg" />
+  </div>
+  <div class="body">
+    <ScanCodeInput />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+import ScanCodeInput from "@/components/ScanCodeInput/index.vue";
+</script>
+
+<style lang="scss" scoped>
+.icon {
+  @include flex;
+  height: 120px;
+
+  .imgIcon {
+    width: 100px;
+    height: 100px;
+  }
+}
+</style>

src/views/process/currentProduction.vue

@@ -1,21 +1,25 @@
 <template>
   <!-- 包含当前订单 操作扫码板块 -->
   <el-row :gutter="20">
-    <el-col :span="12" class="elColClasss" style="height: 250px">
+    <el-col :span="12" class="elColClasss" style="height: 310px" @click="click">
       <CurrentOrderInfo />
     </el-col>
-    <el-col :span="12" class="elColClasss" style="height: 250px">
+    <el-col :span="12" class="elColClasss" style="height: 310px">
       <Operate />
     </el-col>
-    <el-col :span="24" class="elColClasss">
-      <div></div>
+    <el-col :span="24" class="elColClasss" style="height: auto">
+      <ScanCode />
     </el-col>
   </el-row>
-  <!-- <div class="commonTitle">当前订单</div> -->
 </template>
 <script lang="ts" setup>
 import CurrentOrderInfo from "@/views/process/components/currentOrderInfo.vue";
 import Operate from "@/views/process/components/operate.vue";
+import ScanCode from "@/views/process/components/scanCode.vue";
+const router = useRouter();
+const click = (itemValue) => {
+  router.push({ path: "/pro-steps", query: { id: 1 } });
+};
 </script>
 
 <style lang="scss" scoped>

src/views/process/main.vue

@@ -2,14 +2,14 @@
   <div class="mainContentBox">
     <el-row :gutter="20">
       <el-col :span="6" class="elColClasss">
-        <Orders />
+        <Orders :ordersSum="ordersSum" />
       </el-col>
       <el-col :span="6" class="elColClasss">
         <div class="grid-content ep-bg-purple">
           <Processes />
         </div>
       </el-col>
-      <el-col :span="12" class="elColClasss" @click="click">
+      <el-col :span="12" class="elColClasss">
         <div class="grid-content ep-bg-purple">
           <CurrentProduction />
         </div>
@@ -19,16 +19,40 @@
 </template>
 
 <script lang="ts" setup>
+import { onMounted, provide, ref, watch } from "vue";
 import Orders from "@/views/process/orders.vue";
 import Processes from "@/views/process/processes.vue";
 import CurrentProduction from "@/views/process/currentProduction.vue";
+import { getOrders } from "@/api/process";
+//未完成订单数组
+const ordersDataArray = ref([]);
+//未完成任务总数
+const ordersSum = ref(0);
+// 获取选中的Index
+const selectOrderIndex = ref(NaN);
+const setSelectOrderIndex = (value: number) => {
+  selectOrderIndex.value = value;
+};
+provide("ordersDataArray", ordersDataArray);
 
-// todo: 跳转修改
-const router = useRouter();
+//获取未完成订单的参数
+const ordersQuery = ref({
+  orders: [],
+  pageNo: 1,
+  pageSize: 9999,
+});
 
-const click = (itemValue) => {
-  router.push(`/pro-steps`);
+//获取未完成订单Data
+const getOrdersData = async () => {
+  const { code, data } = await getOrders(ordersQuery.value);
+  if (code == "200") {
+    ordersDataArray.value = data.records;
+    ordersSum.value = data.totalCount;
+  }
 };
+onMounted(() => {
+  getOrdersData();
+});
 </script>
 
 <style lang="scss" scoped>

src/views/process/orders.vue

@@ -1,19 +1,20 @@
 <template>
   <!-- 待完成板块 -->
-  <div class="commonTitle">待完成订单[3]</div>
+  <div class="commonTitle">待完成订单[{{ ordersSum }}]</div>
   <el-scrollbar class="barHeight">
-    <!-- <p v-for="item in 80" :key="item" class="scrollbar-demo-item">
-      {{ item }}
-    </p> -->
-    <Order v-for="item in 8" :key="item" @click="setSlectIndex(item - 1)"
-      :hoverStatus="item - 1 == selectIndex ? true : false" />
+    <Order v-for="(item, index) in ordersDataArray" :key="index" @click="setSlectIndex(index)"
+      :hoverStatus="index == selectIndex ? true : false" :item="item" />
   </el-scrollbar>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, inject, onMounted, watch } from "vue";
 import Order from "@/views/process/components/order.vue";
-const selectIndex = ref(-1);
+defineProps<{
+  ordersSum?: number;
+}>();
+const ordersDataArray = inject("ordersDataArray");
+const selectIndex = ref(NaN);
 const setSlectIndex = (value: number) => {
   selectIndex.value = value;
 };