feature/ESOP页面功能实现

src/assets/icons/bujian.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.3">
+<path d="M30 16.3333C30 17.0697 29.403 17.6667 28.6667 17.6667L4.66667 17.6667C3.93029 17.6667 3.33333 17.0697 3.33333 16.3333C3.33333 15.597 3.93029 15 4.66667 15L28.6667 15C29.403 15 30 15.597 30 16.3333Z" fill="black"/>
+</g>
+</svg>

src/assets/icons/jian.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30 16.3333C30 17.0697 29.403 17.6667 28.6667 17.6667L4.66667 17.6667C3.93029 17.6667 3.33333 17.0697 3.33333 16.3333C3.33333 15.597 3.93029 15 4.66667 15L28.6667 15C29.403 15 30 15.597 30 16.3333Z" fill="black"/>
+</svg>

src/components/ScanCodeInput/index.vue

@@ -8,9 +8,19 @@
 
 <script setup lang="ts">
 import { ref, reactive } from "vue";
+const props = defineProps({
+  inputValue: {
+    required: true,
+    type: String,
+  },
+});
+const emit = defineEmits(["setinputvalue"]);
 const scanCode = ref("");
-defineExpose({
-  scanCode,
+onMounted(() => {
+  scanCode.value = props.inputValue;
+});
+watch(scanCode, (newVal) => {
+  emit("setinputvalue", newVal);
 });
 </script>
 

src/styles/variables.scss

@@ -31,7 +31,8 @@ $tags-view-height: 34px; // TagsView 高度
 $select-hover: #0A59F7;//选中主题色
 $font-default-black: #303030;//字体默认黑
 $font-default-60: #00000060;//黑字体透明60%
-$font-default-80: #00000080;//黑字体透明60%
+$font-default-80: #00000080;
+$font-default-90: #00000080;
 //字体大小
 $f10:10px;
 $f12:12px;
@@ -45,6 +46,11 @@ $f60:60px;
 //字重
 $Medium:500;
 
+//间隔距离
+$p5:5px;
+$p10:10px;
+$p15:15px;
+$p20:20px;
 
 //flex布局居中
 @mixin flex() {

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

@@ -1,11 +1,142 @@
 <template>
-  <div>3</div>
+  <div class="container">
+    <div class="header">
+      <div class="imgView">
+        <el-image :style="setImgViewWidth" :src="srcList[selectImgIndex]" :initial-index="selectImgIndex"
+          :preview-src-list="srcList" fit="cover" />
+      </div>
+
+      <div class="textBox">
+        <el-scrollbar :max-height="scrollbarHeight">
+          <div class="title">我是啊啊啊啊的的阿德</div>
+          <div class="describe">
+            当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业
+            当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业
+            当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业
+            当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业
+            当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业
+            当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业指导文字当前图片的作业
+          </div>
+        </el-scrollbar>
+      </div>
+    </div>
+
+    <div class="footer">
+      <el-scrollbar>
+        <div class="scrollbar-flex-content">
+          <div :class="selectImgIndex == index
+              ? 'scrollbar-demo-item '
+              : 'scrollbar-demo-item unScrollbarItemBorder'
+            " v-for="(item, index) in srcList" @click="setImgIndex(index)">
+            <el-image class="bottomImgBox" :src="item" fit="fill" />
+          </div>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 defineOptions({
   name: "Esop",
 });
+//配置当前div高度
+const scrollbarHeight = ref(0);
+//选取的图片索引
+const selectImgIndex = ref(0);
+const setImgIndex = (index: number) => (selectImgIndex.value = index);
+const setScrollbarHeight = () => {
+  const viewportHeight = window.innerHeight;
+  scrollbarHeight.value = viewportHeight - 300;
+};
+const setImgViewWidth = computed(
+  () => `height:${scrollbarHeight.value - 20}px`
+);
+const srcList = ref([
+  "https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF",
+  "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
+  "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
+  "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
+]);
+onMounted(() => {
+  setScrollbarHeight();
+});
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.container {
+  width: calc((100vw / 6 * 5) - 50px);
+  height: calc((100vh - 160px)) !important;
+  display: flex;
+
+  .header {
+    width: calc((100vw / 6 * 5) - 50px);
+    flex: 1;
+    margin-top: $p20;
+    display: flex;
+    position: relative;
+
+    .imgView {
+      width: calc(100% - 250px);
+      height: calc(100vh - 290px);
+      @include flex;
+      position: absolute;
+      justify-content: center;
+    }
+
+    .textBox {
+      position: absolute;
+      width: 250px;
+      padding: $p5 $p20;
+      max-height: 100% !important;
+      right: 0;
+
+      .title {
+        font-size: $f24;
+        font-weight: $Medium;
+        width: 100%;
+      }
+
+      .describe {
+        font-size: $f20;
+        color: $font-default-60;
+      }
+    }
+  }
+
+  .footer {
+    height: 110px;
+    padding: 0 $p10;
+
+    .scrollbar-flex-content {
+      display: flex;
+
+      .scrollbar-demo-item {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 110px;
+        height: 110px;
+        margin-right: 10px;
+        @include flex;
+        border: 2px solid #0a59f7;
+        border-radius: 16px;
+        box-sizing: border-box;
+
+        .bottomImgBox {
+          width: 90px;
+          height: 90px;
+          border-radius: 16px;
+
+          @include flex;
+        }
+      }
+
+      .unScrollbarItemBorder {
+        border: 0px;
+      }
+    }
+  }
+}
+</style>

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

@@ -1,6 +1,33 @@
 <template>
-  <div>
-    <el-input v-model="input" placeholder="Please input" style="width: 240px" />
+  <div class="body">
+    <div class="recordBox">
+      <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 class="operate">
+          <div class="describeText operateText">实际值</div>
+          <div class="operateBox">
+            <div class="leftBox">
+              <svg-icon :icon-class="jianDisabled ? 'bujian' : 'jian'" size="25" class="svgStyle" />
+            </div>
+            <div class="showSum">1212</div>
+            <div class="rightBox">
+              <svg-icon :icon-class="jiaDisabled ? 'bujia' : 'jia'" size="25" class="svgStyle" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -9,9 +36,90 @@ defineOptions({
   name: "Jiluxiang",
 });
 const input = ref("");
-onActivated(() => {
-  console.log("active");
-});
+const jianDisabled = ref(true);
+const jiaDisabled = ref(false);
 </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;
+}
+
+.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;
+
+    .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: 2px solid black;
+          border-radius: 16px;
+          display: flex;
+          justify-content: space-between;
+
+          .leftBox {
+            width: 70px;
+            height: 70px;
+            @include flex;
+          }
+
+          .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;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -1,25 +1,34 @@
 <template>
   <div class="container">
     <div class="textBox">
-      <div class="titleText blackColor">
-        <el-tooltip class="box-item" effect="dark" :content="processInfo.materialName" placement="left" trigger="click">
-          {{ substringInfo.materialName }}
-        </el-tooltip>
-      </div>
-      <div class="simpleText greyColor">
-        <el-tooltip class="box-item" effect="dark" :content="processInfo.materialModel" placement="left" trigger="click">
-          {{ processInfo.materialModel.substring(0, 15) }}
-        </el-tooltip>
-      </div>
+      <el-tooltip class="box-item" effect="dark" :content="processInfo.materialName" placement="left" trigger="click">
+        <div class="titleText blackColor">
+          {{ processInfo.materialName }}
+        </div>
+      </el-tooltip>
+      <el-tooltip class="box-item" effect="dark" :content="processInfo.materialModel" placement="left" trigger="click">
+        <div class="simpleText greyColor">
+          {{ processInfo.materialModel }}
+        </div>
+      </el-tooltip>
     </div>
     <div class="textBox" style="margin: 10px 0">
       <div class="simpleText greyColor">序列号</div>
-      <div class="simpleText blackColor">{{ processInfo.operationCode }}</div>
+      <el-tooltip class="box-item" effect="dark" :content="processInfo.operationCode" placement="left" trigger="click">
+        <div class="simpleText blackColor">
+          {{ processInfo.operationCode }}
+        </div>
+      </el-tooltip>
     </div>
     <div class="textBox">
       <div class="simpleText greyColor">当前工序</div>
-      <div class="simpleText blackColor">{{ processInfo.operationName }}</div>
+      <el-tooltip class="box-item" effect="dark" :content="processInfo.operationName" placement="left" trigger="click">
+        <div class="simpleText blackColor">
+          {{ processInfo.operationName }}
+        </div>
+      </el-tooltip>
     </div>
+    <svg-icon icon-class="jiaobiao" size="25" class="svgStyle" />
   </div>
 </template>
 
@@ -27,17 +36,18 @@
 import { useProcessStore } from "@/store";
 const store = useProcessStore();
 const processInfo = ref({ materialName: "...", materialModel: "..." });
-const substringInfo = ref({});
 onMounted(() => {
-  let obj = {};
   processInfo.value = store.processInfo;
-  obj = JSON.parse(JSON.stringify(store.processInfo));
-  obj.materialName = obj.materialName.substring(0, 15);
-  substringInfo.value = obj;
 });
 </script>
 
 <style lang="scss" scoped>
+.svgStyle {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
 .container {
   width: 100%;
   height: 200px;
@@ -47,6 +57,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
+  position: relative;
 
   .textBox {
     .titleText {

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

@@ -1,22 +1,118 @@
 <template>
-  <div>
-    <!-- 物料采集 -->
-    <el-input v-model="input" placeholder="Please input" style="width: 240px" />
-    <CameraUpload @upload-finish="finish" />
+  <div class="scanCode">
+    <ScanCodeInput />
+  </div>
+
+  <div class="showCodeBody" v-if="false">
+    <div class="codeBox">
+      <img src="@/assets/icons/shaoma.svg" style="width: 134px; height: 134px" />
+      <div class="codeText">扫码物料码添加物料</div>
+    </div>
+  </div>
+  <div class="materialInfoBody">
+    <div class="infoMsg">
+      <div class="leftMsg">
+        <div class="nameMsg">PCBA-ASSSD电路板</div>
+        <div class="describe">100*100</div>
+        <div class="describe">需求：12112</div>
+      </div>
+      <div class="rightMsg">
+        <div class="sum">50</div>
+        <div class="describe">还需采集</div>
+      </div>
+      <svg-icon icon-class="jiaobiao" size="25" class="svgStyle" />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import ScanCodeInput from "@/components/ScanCodeInput/index.vue";
 defineOptions({
   name: "Wuliaocaiji",
 });
-import CameraUpload from "@/components/Upload/CameraUpload.vue";
 
 const input = ref("");
-
-const finish = (value) => {
-  console.log("采集", value);
-};
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.scanCode {
+  width: 40%;
+  margin-top: $p5;
+}
+
+.materialInfoBody {
+  width: calc((100vw / 6 * 5) - 50px);
+  margin-top: $p10;
+  display: grid;
+  gap: 20px;
+  grid-template-columns: 1fr 1fr;
+
+  .infoMsgImg {
+    background-image: url("@/assets/images/caijiwancheng.png");
+    background-position: right top;
+    background-repeat: no-repeat;
+  }
+
+  .infoMsg {
+    width: 600px;
+    height: 190px;
+    background-color: white;
+    border-radius: 16px;
+    display: flex;
+    padding: $p20;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+
+    .svgStyle {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+    }
+
+    .describe {
+      font-size: $f20;
+      color: $font-default-60;
+      line-height: 20px;
+    }
+
+    .leftMsg {
+      .nameMsg {
+        font-size: $f24;
+        font-weight: $Medium;
+      }
+    }
+
+    .rightMsg {
+      .sum {
+        font-size: $f38;
+        font-weight: bold;
+        line-height: 38px;
+        text-align: right;
+      }
+    }
+  }
+}
+
+.showCodeBody {
+  width: calc((100vw / 6 * 5) - 50px);
+  height: calc((100vh - 240px));
+  @include flex;
+
+  .codeBox {
+    width: 180px;
+    display: flex;
+    flex-direction: column;
+
+    img {
+      margin: 0 auto;
+    }
+
+    .codeText {
+      text-align: center;
+      font-size: $f20;
+      color: #00000030;
+    }
+  }
+}
+</style>

src/views/pro-steps/index.vue

@@ -8,25 +8,27 @@
       <el-col :span="20" class="elColClasss">
         <div class="container">
           <div class="typeContainer">
-            <div v-for="(item, index) in stepComponents" :key="index" :class="getNameClass(index)" class="typeBox"
-              @click="setSelectIndex(index)">
+            <template v-for="(item, index) in stepComponents" :key="index">
               <router-link :to="{ name: item.name }">
-                <div class="svgIcon">
-                  <svg-icon :icon-class="item.compentType" size="30" />
+                <div :class="getNameClass(index)" class="typeBox" @click="setSelectIndex(index)">
+                  <div class="svgIcon">
+                    <svg-icon :icon-class="item.compentType" size="30" />
+                  </div>
+                  <div class="name">{{ item.compentName }}</div>
                 </div>
-                <div class="name">{{ item.compentName }}</div>
               </router-link>
-            </div>
+            </template>
           </div>
           <!-- 二级路由盒子 -->
-          <div class="routerView">
+          <!-- 页面适配宽度：calc((100vw / 6 * 5) - 50px) -->
+          <el-scrollbar class="routerView">
             <router-view v-slot="{ Component, route }">
               <keep-alive
                 include="Dianjian,Jiluxiang,Duomeiticaiji,Esop,Jingu,Mingpaibangding,Shebeijilu,Tiaoshipipei,Wuliaocaiji">
                 <component :is="Component" :key="route.fullPath" />
               </keep-alive>
             </router-view>
-          </div>
+          </el-scrollbar>
         </div>
       </el-col>
     </el-row>
@@ -141,12 +143,14 @@ onMounted(() => {
   display: flex;
   flex: 1;
   overflow-y: auto;
+  width: 100%;
+  height: 100%;
 }
 
 .typeBox {
   height: 80px;
-  width: 150px;
-  border-radius: 4px 4px 4px 4px;
+  width: 135px;
+  border-radius: 16px;
   display: flex;
   flex-direction: column;
   justify-content: center;

src/views/process/components/scanCode.vue

@@ -5,13 +5,16 @@
     <img class="imgIcon" src="@/assets/icons/shaoma.svg" />
   </div>
   <div class="body">
-    <ScanCodeInput />
+    <ScanCodeInput :inputValue="inputValue" @setinputvalue="setInputValue" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from "vue";
 import ScanCodeInput from "@/components/ScanCodeInput/index.vue";
+const inputValue = ref("12020100000052404100011");
+const setInputValue = (value: any) => {
+  inputValue.value = value;
+};
 </script>
 
 <style lang="scss" scoped>

src/views/process/components/steps.vue

@@ -35,9 +35,7 @@
 </template>
 
 <script lang="ts" setup>
-import router from "@/router";
 import { useProcessStore } from "@/store";
-
 const store = useProcessStore();
 defineProps<{
   opsArray?: object;
@@ -45,15 +43,10 @@ defineProps<{
 }>();
 const emit = defineEmits(["setstepindex"]);
 const boxClick = (item, index) => {
-  const data1 = JSON.parse(JSON.stringify(store.odersData));
-  const data2 = JSON.parse(JSON.stringify(store.processInfo));
-  data1.operationId = item.operationId;
-  //配置状态机参数
-  store.setOdersData({ ...data1 });
-  data2.operationCode = item.operationCode;
-  data2.operationName = item.operationName;
-  store.setProcessInfo({ ...data2 });
-  router.push({ path: "/pro-steps" });
+  store.odersData.operationId = item.operationId;
+  store.processInfo.operationCode = item.operationCode;
+  store.processInfo.operationName = item.operationName;
+
   emit("setstepindex", index);
 };
 </script>