feature/点检&设备记录静态页面

src/api/process/index.ts

@@ -2,7 +2,6 @@ import request from "@/utils/request";
 import { AxiosPromise } from "axios";
 import { OrdersQuery } from "./types";
 
-
 //首页涉及相关api（获取未完成任务、扫码开工）
 /**
  * 获取未完成任务

src/api/prosteps/index.ts

@@ -0,0 +1,24 @@
+import request from "@/utils/request";
+
+/**
+ * 获取当前订单tags列表
+ *
+ * @param queryParams
+ */
+export function getOpCompent(queryPath: any) {
+  return request({
+    url: "/api/v1/process/opCompent/get" + `${queryPath}`,
+    method: "get",
+  });
+}
+/**
+ * 通过生产ID获取生产过程详情
+ *
+ * @param id
+ */
+export function getProcessInfo(id: any) {
+  return request({
+    url: "/api/v1/process/info/processInfo/" + `${id}`,
+    method: "get",
+  });
+}

src/api/prosteps/wuliaocaiji.ts

@@ -0,0 +1,34 @@
+import request from "@/utils/request";
+
+/**
+ * 获取当前订单tags列表
+ *
+ * @param queryPath
+ */
+export function getOpCompent(queryPath: any) {
+  return request({
+    url: "/api/v1/process/opCompent/get" + `${queryPath}`,
+    method: "get",
+  });
+}
+/**
+ * 获取当前订单物料列表
+ *
+ * @param data
+ */
+export function recordList(data: any) {
+  return request({
+    url: "/api/v1/process/itemRecord/list",
+    method: "post",
+    data,
+  });
+}
+
+export function searchMaterial(data: any) {
+  return request({
+    url: "/api/v1/process/itemRecord/searchMaterial",
+    method: "post",
+    data: data,
+  });
+}
+

src/assets/icons/shengchanlvli.svg

@@ -0,0 +1,8 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 7.33504C14.5282 7.33504 13.335 8.5282 13.335 10C13.335 11.4719 14.5282 12.665 16 12.665C17.4719 12.665 18.665 11.4719 18.665 10C18.665 8.5282 17.4719 7.33504 16 7.33504ZM10.665 10C10.665 7.0536 13.0536 4.66504 16 4.66504C18.9465 4.66504 21.335 7.0536 21.335 10C21.335 12.9465 18.9465 15.335 16 15.335C13.0536 15.335 10.665 12.9465 10.665 10Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0004 25.335C9.72695 25.335 7.33474 27.6647 7.33504 30.9999C7.33534 34.3355 9.72718 36.665 13.0004 36.665H28C28.7373 36.665 29.335 37.2627 29.335 38C29.335 38.7373 28.7373 39.335 28 39.335H13.0004C8.27364 39.335 4.66548 35.8312 4.66504 31.0002C4.6646 26.1687 8.27387 22.665 13.0004 22.665H20C20.7373 22.665 21.335 23.2627 21.335 24C21.335 24.7373 20.7373 25.335 20 25.335H13.0004Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.665 10C18.665 9.26274 19.2627 8.66504 20 8.66504H34.9997C39.7263 8.66504 43.3355 12.1688 43.335 17.0002C43.3346 21.8311 39.7265 25.335 34.9997 25.335L20 25.335C19.2627 25.335 18.6653 24.7373 18.6653 24C18.6653 23.2627 19.2627 22.665 20 22.665H34.9997C38.2729 22.665 40.6647 20.3356 40.665 16.9999C40.6654 13.6647 38.2732 11.335 34.9997 11.335H20C19.2627 11.335 18.665 10.7373 18.665 10Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.66504 10C4.66504 9.26274 5.26274 8.66504 6.00004 8.66504H12C12.7373 8.66504 13.335 9.26274 13.335 10C13.335 10.7373 12.7373 11.335 12 11.335H6.00004C5.26274 11.335 4.66504 10.7373 4.66504 10Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.665 38C34.665 37.2627 35.2627 36.665 36 36.665H42C42.7373 36.665 43.335 37.2627 43.335 38C43.335 38.7373 42.7373 39.335 42 39.335H36C35.2627 39.335 34.665 38.7373 34.665 38Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32 35.335C30.5282 35.335 29.335 36.5282 29.335 38C29.335 39.4719 30.5282 40.665 32 40.665C33.4719 40.665 34.665 39.4719 34.665 38C34.665 36.5282 33.4719 35.335 32 35.335ZM26.665 38C26.665 35.0536 29.0536 32.665 32 32.665C34.9465 32.665 37.335 35.0536 37.335 38C37.335 40.9465 34.9465 43.335 32 43.335C29.0536 43.335 26.665 40.9465 26.665 38Z" fill="black"/>
+</svg>

src/styles/index.scss

@@ -56,3 +56,11 @@
   color: rgba(0, 0, 0, 0.9);
   text-align: center;
 }
+//steps 二级路由页面Scroll样式
+.stepsViewScroll {
+  width: calc((100vw / 6 * 5) - 50px);
+  margin-top: $p20;
+  display: grid;
+  gap: 20px;
+  grid-template-columns: 1fr 1fr;
+}

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

@@ -1,12 +1,116 @@
 <template>
-  <div>
-    <el-input v-model="input" placeholder="Please input" style="width: 240px" />
+  <div class="stepsViewScroll">
+    <div class="recordBox" v-for="item in 7">
+      <div class="leftMsg">
+        <div class="msgHeader">
+          <div class="titleText">外围尺寸</div>
+          <div class="describeText">单位：cm</div>
+        </div>
+        <div class="msgFooter">
+          <div class="describeText">单位：cm</div>
+          <div class="describeText">单位：cm</div>
+          <div class="describeText">单位：cm</div>
+        </div>
+      </div>
+      <div class="rightOperate">
+        <!-- 占位div -->
+        <div></div>
+        <div class="operate">
+          <div class="describeText operateText">结果</div>
+          <div class="operateBox">
+            <div class="operateBtn" :style="setBoxStatus('qualified')">
+              合格
+            </div>
+            <div class="operateBtn" :style="setBoxStatus('unqualified')">
+              不合格
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 defineOptions({ name: "Dianjian" });
-const input = ref("");
+const setBoxStatus = (status: string) => {
+  let style = "";
+  switch (status) {
+    case "qualified":
+      style = "background-color: #64BB5C;color: white;";
+      break;
+    case "unqualified":
+      style = "background-color: #E84026;color: white;";
+      break;
+    default:
+      style = "background-color: #00000015;color: white;";
+      break;
+  }
+  return style;
+};
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.titleText {
+  font-size: $f24;
+  font-weight: $Medium;
+}
+
+.describeText {
+  font-size: $f20;
+  color: $font-default-60;
+  line-height: 25px;
+}
+
+.recordBox {
+  width: 600px;
+  height: 210px;
+  background-color: white;
+  border-radius: 16px;
+  display: flex;
+  padding: $p20;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+
+  .leftMsg {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 170px;
+  }
+
+  .rightOperate {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .operate {
+      .operateText {
+        margin-bottom: $p5;
+      }
+
+      .operateBox {
+        width: 290px;
+        height: 70px;
+
+        border-radius: 16px;
+        display: flex;
+        justify-content: space-between;
+
+        .operateBtn {
+          width: 130px;
+          height: 70px;
+          background-color: #00000015;
+          border-radius: 16px;
+          text-align: center;
+          line-height: 70px;
+          font-size: $f24;
+          font-weight: $Medium;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -1,31 +1,12 @@
 <template>
   <el-scrollbar style="width: 100%; height: 100%">
     <div class="media-container">
-      <CameraUpload
-        @reset-select="clickReset"
-        @upload-finish="finish"
-        @delete-all="clickDeleteAll"
-      />
-      <div
-        v-for="(item, index) in medias.filter((item: any) => item.filePath)"
-        :key="index"
-        class="media-item"
-      >
+      <CameraUpload @reset-select="clickReset" @upload-finish="finish" @delete-all="clickDeleteAll" />
+      <div v-for="(item, index) in medias.filter((item: any) => item.filePath)" :key="index" class="media-item">
         <img :src="getImgurl(item)" alt="" class="img-box" object-fit="cover" />
-        <svg-icon
-          v-if="item.isSelected"
-          class="check"
-          icon-class="bendishangchuan"
-          size="30"
-          @click="item.isSelected = false"
-        />
-        <svg-icon
-          v-else
-          class="check"
-          icon-class="edit"
-          size="30"
-          @click="item.isSelected = true"
-        />
+        <svg-icon v-if="item.isSelected" class="check" icon-class="bendishangchuan" size="30"
+          @click="item.isSelected = false" />
+        <svg-icon v-else class="check" icon-class="edit" size="30" @click="item.isSelected = true" />
       </div>
     </div>
   </el-scrollbar>
@@ -33,7 +14,7 @@
 
 <script lang="ts" setup>
 import { useProcessStore } from "@/store";
-import { addMedia, deleteMedias, pageMedias } from "@/api/process/medias";
+import { addMedia, deleteMedias, pageMedias } from "@/api/prosteps/medias";
 
 import CameraUpload from "@/components/Upload/CameraUpload.vue";
 
@@ -128,3 +109,4 @@ const clickDeleteAll = () => {
   }
 }
 </style>
+@/api/prosteps/medias

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="body">
+  <div class="stepsViewScroll">
     <div class="recordBox">
       <div class="leftMsg">
         <div class="msgHeader">
@@ -52,71 +52,63 @@ const jiaDisabled = ref(false);
   line-height: 25px;
 }
 
-.body {
-  width: calc((100vw / 6 * 5) - 50px);
-  margin-top: $p20;
-  display: grid;
-  gap: 20px;
-  grid-template-columns: 1fr 1fr;
+.recordBox {
+  width: 600px;
+  height: 210px;
+  background-color: white;
+  border-radius: 16px;
+  display: flex;
+  padding: $p20;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
 
-  .recordBox {
-    width: 600px;
-    height: 210px;
-    background-color: white;
-    border-radius: 16px;
+  .leftMsg {
     display: flex;
-    padding: $p20;
+    flex-direction: column;
     justify-content: space-between;
-    align-items: center;
-    position: relative;
+    height: 170px;
+  }
 
-    .leftMsg {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 170px;
-    }
+  .rightOperate {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 
-    .rightOperate {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
+    .operate {
+      .operateText {
+        margin-bottom: $p5;
+      }
 
-      .operate {
-        .operateText {
-          margin-bottom: $p5;
-        }
+      .operateBox {
+        width: 290px;
+        height: 70px;
+        border: 2px solid black;
+        border-radius: 16px;
+        display: flex;
+        justify-content: space-between;
 
-        .operateBox {
-          width: 290px;
+        .leftBox {
+          width: 70px;
           height: 70px;
-          border: 2px solid black;
-          border-radius: 16px;
-          display: flex;
-          justify-content: space-between;
-
-          .leftBox {
-            width: 70px;
-            height: 70px;
-            @include flex;
-          }
+          @include flex;
+        }
 
-          .showSum {
-            flex: 1;
-            @include flex;
-            border: 2px solid black;
-            border-top: 0px;
-            border-bottom: 0px;
-            font-weight: bold;
-            font-size: $f38;
-          }
+        .showSum {
+          flex: 1;
+          @include flex;
+          border: 2px solid black;
+          border-top: 0px;
+          border-bottom: 0px;
+          font-weight: bold;
+          font-size: $f38;
+        }
 
-          .rightBox {
-            width: 70px;
-            height: 70px;
-            @include flex;
-          }
+        .rightBox {
+          width: 70px;
+          height: 70px;
+          @include flex;
         }
       }
     }

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

@@ -1,7 +1,119 @@
 <template>
-  <div>2</div>
+  <div class="stepsViewScroll">
+    <div class="recordBox" v-for="item in 7">
+      <!-- <div class="">
+        <div class="msgHeader">
+          <div class="titleText">外围尺寸</div>
+        </div>
+        <div class="msgFooter">
+          <div class="describeText">单位：cm</div>
+        </div>
+      </div> -->
+      <div class="headerText titleText">高低温试验箱</div>
+      <div class="describeBox">
+        <div class="describeText">精度要求</div>
+        <div class="describeText" style="color: black">
+          高温：50~100℃ 低温：-5~-10℃ ±1℃
+        </div>
+      </div>
+      <!-- 变量控制样式 -->
+      <div class="footerBtn">
+        <el-button v-if="true" class="bottomBtn" style="background-color: #0a59f7">点击扫描设备</el-button>
+        <div v-else class="infoBox">
+          <div class="info">
+            <div>
+              <div class="describeText" style="text-align: left">
+                高低温试验箱001
+              </div>
+              <div class="describeText" style="text-align: left">
+                sds12313213213213231
+              </div>
+            </div>
+          </div>
+          <div class="info">
+            <div>
+              <div class="describeText" style="text-align: right">
+                检定有效期
+              </div>
+              <div class="describeText" style="text-align: right">
+                2026-11-11
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+defineOptions({ name: "Shebeijilu" });
+</script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.titleText {
+  font-size: $f24;
+  font-weight: $Medium;
+  font-weight: bold;
+}
+
+.describeText {
+  font-size: $f20;
+  color: $font-default-60;
+  line-height: 25px;
+}
+
+.recordBox {
+  width: 600px;
+  height: 210px;
+  background-color: white;
+  border-radius: 16px;
+  display: flex;
+  padding: $p20;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .headerText {}
+
+  .describeBox {}
+
+  //按钮样式
+  .footerBtn {
+    width: 100%;
+    height: 70px;
+    background-color: #00000015;
+    border-radius: 16px;
+    overflow: hidden;
+
+    .bottomBtn {
+      width: 100%;
+      height: 100%;
+      font-size: $f24;
+      color: white;
+    }
+  }
+
+  //描述样式
+  .footerInfo {
+    width: 100%;
+    height: 70px;
+    background-color: #00000015;
+    border-radius: 16px;
+    overflow: hidden;
+
+    .infoBox {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 100%;
+      padding: 0 $p10;
+
+      .info {
+        height: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}
+</style>

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

@@ -3,7 +3,7 @@
     <ScanCodeInput />
   </div>
 
-  <div class="showCodeBody" v-if="false">
+  <div class="showCodeBody" v-if="true">
     <div class="codeBox">
       <img src="@/assets/icons/shaoma.svg" style="width: 134px; height: 134px" />
       <div class="codeText">扫码物料码添加物料</div>

src/views/pro-steps/index.vue

@@ -12,7 +12,7 @@
               <router-link :to="{ name: item.name }">
                 <div :class="getNameClass(index)" class="typeBox" @click="setSelectIndex(index)">
                   <div class="svgIcon">
-                    <svg-icon :icon-class="item.compentType" size="30" />
+                    <svg-icon :icon-class="item.iconName" size="30" />
                   </div>
                   <div class="name">{{ item.compentName }}</div>
                 </div>
@@ -39,79 +39,110 @@
 import { onMounted } from "vue";
 import Jiluxiang from "@/views/pro-steps/Jiluxiang.vue";
 import { useProcessStore } from "@/store";
-
+import { getOpCompent } from "@/api/prosteps";
 const store = useProcessStore();
 defineOptions({ name: "ProSteps" });
 const route = useRoute();
+const loading = ref(false);
 //配置标签信息Data
-const stepComponents = ref([
+const stepComponents = ref([]);
+const defaultComponents = [
   {
     compentName: "物料采集",
-    compentType: "wuliaocaiji",
+    iconName: "wuliaocaiji",
     path: "wuliaocaiji",
     name: "Wuliaocaiji",
   },
   {
     compentName: "记录项",
-    compentType: "jiluxiang",
+    iconName: "jiluxiang",
     path: "jiluxiang",
     name: "Jiluxiang",
   },
   {
     compentName: "多媒体采集",
-    compentType: "duomeiticaiji",
+    iconName: "duomeiticaiji",
     path: "duomeiticaiji",
     name: "Duomeiticaiji",
   },
   {
     compentName: "ESOP",
-    compentType: "ESOP",
+    iconName: "ESOP",
     path: "esop",
     name: "Esop",
   },
   {
     compentName: "点检",
-    compentType: "dianjian",
+    iconName: "dianjian",
     path: "dianjian",
     name: "Dianjian",
   },
   {
     compentName: "设备记录",
-    compentType: "shebeijilu",
+    iconName: "shebeijilu",
     path: "shebeijilu",
     name: "Shebeijilu",
   },
   {
     compentName: "紧固",
-    compentType: "jingu",
+    iconName: "jingu",
     path: "jingu",
     name: "Jingu",
   },
   {
     compentName: "调试配对",
-    compentType: "tiaoshipipei",
+    iconName: "tiaoshipipei",
     path: "tiaoshipipei",
     name: "Tiaoshipipei",
   },
   {
     compentName: "铭牌绑定",
-    compentType: "mingpai",
+    iconName: "mingpai",
     path: "mingpaibangding",
     name: "Mingpaibangding",
   },
-]);
+];
 //当前路由在setpComponents中的index
 const selectIndex = ref(0);
 
+//配置data固定路由参数等
+const setStepComponents = (data) => {
+  let resData = [];
+  data.forEach((item) => {
+    defaultComponents.forEach((obj) => {
+      if (item.compentName === obj.compentName) {
+        resData.push({ ...item, ...obj });
+      }
+    });
+  });
+  return resData;
+};
 const getNameClass = (index) => {
   return index === selectIndex.value ? "typeBoxSelected" : "typeBoxNormal";
 };
+//获取当前tags列表
+const getOpCompentArray = async () => {
+  const { data } = await getOpCompent("/129/12");
+  stepComponents.value = setStepComponents(data);
+};
 //设置标签是否被选中
 const setSelectIndex = (index) => {
   selectIndex.value = index;
 };
+const setSelectTag = () => {
+  const nowRouteName = route.name;
+  stepComponents.value.forEach((item, index) => {
+    if (item.name == nowRouteName) {
+      setSelectIndex(index);
+    }
+  });
+};
 onMounted(() => {
-  setSelectIndex();
+  getOpCompentArray();
+  setSelectTag();
+});
+onActivated(() => {
+  setSelectTag();
 });
 </script>
 
@@ -157,14 +188,14 @@ onMounted(() => {
   align-items: center;
 
   .name {
-    width: 70px;
     height: 16px;
     font-weight: 500;
-    font-size: 14px;
-    line-height: 16px;
+    font-size: $f20;
+    line-height: 20px;
     text-align: center;
     font-style: normal;
     text-transform: none;
+    margin-top: $p10;
   }
 }
 

src/views/process/components/operate.vue

@@ -3,22 +3,18 @@
   <div class="commonTitle">操作</div>
   <div class="body">
     <div class="operateBox">
-      <span class="opeateText">物料流转</span>
-      <el-icon :size="30">
-        <CirclePlus />
-      </el-icon>
+      <span class="operateText">物料流转</span>
+      <svg-icon icon-class="liuzhuan" size="30" />
     </div>
     <div class="operateBox">
-      <span class="opeateText">物料流转</span>
-      <el-icon :size="30">
-        <CirclePlus />
-      </el-icon>
+      <span class="operateText">取暂存料</span>
+      <div class="operateSum">
+        <span>0</span>
+      </div>
     </div>
     <div class="operateBox">
-      <span class="opeateText">物料流转</span>
-      <el-icon :size="30">
-        <CirclePlus />
-      </el-icon>
+      <span class="operateText">生产履历</span>
+      <svg-icon icon-class="shengchanlvli" size="30" />
     </div>
   </div>
 </template>
@@ -43,9 +39,18 @@ import { reactive, ref } from "vue";
     justify-content: space-between;
     padding: 0 20px;
 
-    .opeateText {
+    .operateText {
       font-size: $f24;
     }
+
+    .operateSum {
+      @include flex;
+
+      span {
+        font-size: $f24;
+        font-weight: bold;
+      }
+    }
   }
 }
 </style>