fearure/工序操作操作tab

src/assets/icons/baogu.svg

@@ -0,0 +1,7 @@
+<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="M24 10.3345C18.1099 10.3345 13.335 15.1094 13.335 20.9995V33.6645H34.665V20.9995C34.665 15.1094 29.8901 10.3345 24 10.3345ZM10.665 20.9995C10.665 13.6348 16.6353 7.66452 24 7.66452C31.3647 7.66452 37.335 13.6348 37.335 20.9995V34.9995C37.335 35.7368 36.7373 36.3345 36 36.3345H12C11.2627 36.3345 10.665 35.7368 10.665 34.9995V20.9995Z" fill="black" fill-opacity="0.9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66503 41.9995C6.66503 41.2622 7.26273 40.6645 8.00003 40.6645H40C40.7373 40.6645 41.335 41.2622 41.335 41.9995C41.335 42.7368 40.7373 43.3345 40 43.3345H8.00003C7.26273 43.3345 6.66503 42.7368 6.66503 41.9995Z" fill="black" fill-opacity="0.9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.73354 12.5774C2.9667 11.8779 3.72273 11.4999 4.4222 11.733L7.4222 12.733C8.12166 12.9662 8.49968 13.7222 8.26653 14.4217C8.03337 15.1212 7.27734 15.4992 6.57787 15.266L3.57787 14.266C2.87841 14.0329 2.50039 13.2768 2.73354 12.5774Z" fill="black" fill-opacity="0.9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5779 2.73293C13.2773 2.49978 14.0334 2.8778 14.2665 3.57726L15.2665 6.57726C15.4997 7.27672 15.1217 8.03276 14.4222 8.26592C13.7227 8.49907 12.9667 8.12105 12.7335 7.42159L11.7335 4.42159C11.5004 3.72212 11.8784 2.96609 12.5779 2.73293Z" fill="black" fill-opacity="0.9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.05614 6.05543C6.57749 5.53408 7.42276 5.53408 7.94411 6.05543L10.9441 9.05543C11.4655 9.57677 11.4655 10.422 10.9441 10.9434C10.4228 11.4648 9.5775 11.4648 9.05615 10.9434L6.05614 7.9434C5.53479 7.42205 5.53479 6.57678 6.05614 6.05543Z" fill="black" fill-opacity="0.9"/>
+</svg>

src/assets/icons/gongweishangliao.svg

@@ -0,0 +1,5 @@
+<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="M34.2463 27.8084C35.4434 26.941 36.8439 28.5836 35.7989 29.6286L25.2068 40.2207C24.6211 40.8064 23.6713 40.8065 23.0855 40.2207L12.4934 29.6286C11.4474 28.5826 12.8501 26.9421 14.0459 27.8083L24.1461 35.1267L34.2463 27.8084Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.2465 9.46058C35.4422 8.59457 36.8451 10.2348 35.7989 11.281L25.2069 21.873C24.6211 22.4588 23.6713 22.4588 23.0855 21.873L12.4934 11.2809C11.4475 10.2349 12.85 8.59436 14.0459 9.46059L24.1461 16.779L34.2465 9.46058Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.2464 18.6344C35.4423 17.7683 36.845 19.4087 35.7989 20.4548L25.2068 31.0469C24.6211 31.6326 23.6713 31.6326 23.0855 31.0469L12.4934 20.4548C11.4474 19.4088 12.85 17.7682 14.0459 18.6344L23.5594 25.5277C23.9094 25.7813 24.3829 25.7814 24.7329 25.5278L34.2464 18.6344Z" fill="black"/>
+</svg>

src/assets/icons/jiaobiao.svg

@@ -0,0 +1,10 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_150_424)">
+<path d="M18 16V2.82843C18 1.04662 15.8457 0.154282 14.5858 1.41421L1.41421 14.5858C0.154284 15.8457 1.04662 18 2.82843 18H16C17.1046 18 18 17.1046 18 16Z" fill="black" fill-opacity="0.1"/>
+</g>
+<defs>
+<clipPath id="clip0_150_424">
+<rect width="38" height="38" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/views/pro-steps/Jiluxiang.vue

@@ -4,12 +4,14 @@
   <el-input v-model="input" style="width: 240px" placeholder="Please input" /> -->
   <el-scrollbar>
     <LeftBarInfo />
+    <Operates />
   </el-scrollbar>
 </template>
 
 <script lang="ts" setup>
 // import MaterialCollectionDG from "@/components/CommonDialogs/MaterialCollectionDG.vue";
 import LeftBarInfo from "./components/leftBarInfo.vue";
+import Operates from "./components/operates.vue";
 const input = ref("aa");
 // const MaterialCollectionDGRef = ref<any>(null);
 // const handleClick = () => {

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

@@ -1,9 +1,72 @@
 <template>
-  <div class="container"></div>
+  <div class="container">
+    <div class="operator active" v-for="(item, index) in stepComponents" :key="index">
+      <div class="operatorText">{{ item.compentName }}</div>
+      <div class="operatorIcon">
+        <svg-icon :icon-class="item.compentType" size="45" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 const input = ref("");
+const stepComponents = ref([
+  {
+    compentName: "叫料",
+    compentType: "jiaoliao",
+  },
+  {
+    compentName: "工位上料",
+    compentType: "gongweishangliao",
+  },
+  {
+    compentName: "物料流转",
+    compentType: "liuzhuan",
+  },
+  {
+    compentName: "图纸",
+    compentType: "tuzhi",
+  },
+  {
+    compentName: "报故",
+    compentType: "baogu",
+  },
+  {
+    compentName: "报工",
+    compentType: "baogong",
+  },
+]);
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  font-weight: $Medium;
+
+  .operator {
+    width: 100%;
+    height: 88px;
+    border-radius: 16px;
+    background-color: white;
+    margin-top: 20px;
+    display: flex;
+    padding: 20px;
+    justify-content: space-between;
+    align-items: center;
+
+    .operatorText {
+      font-size: $f24;
+    }
+
+    .operatorIcon {
+      font-weight: 800;
+    }
+  }
+}
+
+.active {
+  background-color: #64bb5c;
+  color: white;
+}
+</style>

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

@@ -1,5 +1,4 @@
 <template>
-
   <div>2</div>
 </template>
 

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

@@ -1,7 +1,6 @@
 <template>
   <div>
     <!-- 物料采集 -->
-
     <el-input v-model="input" placeholder="Please input" style="width: 240px" />
     <CameraUpload />
   </div>

src/views/pro-steps/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="mainContentBox" style="padding: 0 24px">
     <el-row :gutter="20">
-      <el-col :span="4" class="elColClasss" style="height: calc(100vh - 80px)">
+      <el-col :span="4" class="elColClasss boxStyle">
         <!-- 侧边栏盒子 -->
         <Jiluxiang />
       </el-col>
@@ -113,6 +113,10 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.boxStyle {
+  height: calc(100vh - 80px);
+}
+
 .container {
   display: flex;
   flex: 1;