feature/工序操作首页静态页面

src/styles/variables.scss

@@ -27,3 +27,25 @@ $sidebar-width: 210px; // 侧边栏宽度
 $sidebar-width-collapsed: 54px; // 侧边栏收缩宽度
 $navbar-height: 80px; // 导航栏高度
 $tags-view-height: 34px; // TagsView 高度
+
+$select-hover: #0A59F7;//选中主题色
+$font-default-black: #303030;//字体默认黑
+$font-default-60: #00000060;//黑字体透明60%
+
+//字体大小
+$f10:10px;
+$f12:12px;
+$f14:14px;
+$f16:16px;
+$f20:20px;
+$f24:24px;
+$f38:38px;
+$f60:60px;
+
+
+//flex布局居中
+@mixin flex() {
+  display: flex;
+  justify-content: center;
+  align-items: center
+}

src/views/process/components/currentOrderInfo.vue

@@ -0,0 +1,120 @@
+<template>
+  <!-- 当前订单板块 -->
+  <div class="commonTitle">当前订单</div>
+  <div class="body">
+    <div class="box">
+      <div class="boxContent">
+        <div class="contentHeader">
+          <el-icon :size="30">
+            <CirclePlus />
+          </el-icon>
+          <span class="headerText">产品数量</span>
+        </div>
+        <div class="contentNum">100</div>
+      </div>
+    </div>
+    <div class="box">
+      <div class="boxContent">
+        <div class="contentHeader">
+          <el-icon :size="30">
+            <CirclePlus />
+          </el-icon>
+          <span class="headerText">222</span>
+        </div>
+        <div class="contentNum">100</div>
+      </div>
+    </div>
+    <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>
+        </div>
+        <div class="contentNum">100</div>
+      </div>
+    </div>
+    <div class="box" style="position: absolute; right: 0; bottom: 0">
+      <div class="boxContent">
+        <div class="contentHeader">
+          <el-icon :size="30">
+            <CirclePlus />
+          </el-icon>
+          <span class="headerText">222</span>
+        </div>
+        <div class="contentNum">100</div>
+      </div>
+    </div>
+    <div class="horizontalLine"></div>
+    <div class="verticalLine"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+</script>
+
+<style lang="scss" scoped>
+.body {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .box {
+    display: inline-block;
+    box-sizing: border-box;
+    width: 50%;
+    height: 50%;
+    padding: 10px;
+
+    .boxContent {
+      border-radius: 16px;
+      background-color: white;
+      width: calc(100% - 5px);
+      height: calc(100% - 5px);
+      position: relative;
+
+      .contentHeader {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 30px;
+        position: absolute;
+        top: 5px;
+        left: 5px;
+
+        .headerText {
+          font-size: $f20;
+          color: $font-default-60;
+          margin-left: 5px;
+        }
+      }
+
+      .contentNum {
+        font-size: $f60;
+        line-height: 60px;
+        position: absolute;
+        bottom: 1px;
+      }
+    }
+  }
+
+  .horizontalLine {
+    width: 100%;
+    height: 1px;
+    border-bottom: 1px solid #00000020;
+    position: absolute;
+    top: 50%;
+  }
+
+  .verticalLine {
+    height: 80%;
+    width: 1px;
+    border-right: 1px solid #00000020;
+    position: absolute;
+    top: 10%;
+    right: 50%;
+  }
+}
+</style>

src/views/process/components/operate.vue

@@ -0,0 +1,51 @@
+<template>
+  <!-- 操作板块 -->
+  <div class="commonTitle">操作</div>
+  <div class="body">
+    <div class="operateBox">
+      <span class="opeateText">物料流转</span>
+      <el-icon :size="30">
+        <CirclePlus />
+      </el-icon>
+    </div>
+    <div class="operateBox">
+      <span class="opeateText">物料流转</span>
+      <el-icon :size="30">
+        <CirclePlus />
+      </el-icon>
+    </div>
+    <div class="operateBox">
+      <span class="opeateText">物料流转</span>
+      <el-icon :size="30">
+        <CirclePlus />
+      </el-icon>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+</script>
+
+<style lang="scss" scoped>
+.body {
+  width: 100%;
+  height: 250px;
+
+  .operateBox {
+    height: 76px;
+    width: 100%;
+    margin-bottom: 10px;
+    background-color: white;
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+
+    .opeateText {
+      font-size: $f24;
+    }
+  }
+}
+</style>

src/views/process/components/order.vue

@@ -0,0 +1,137 @@
+<template>
+  <!-- 子订单盒子 -->
+  <div :class="hoverStatus ? 'body bodyHover ' : 'body'">
+    <div class="topArea">
+      <div class="productName">DS123422233卫星天线</div>
+      <div class="productMsg">
+        <span class="msgName">产品型号</span>
+        <span class="msgValue">DASD5561612</span>
+      </div>
+      <div class="productMsg">
+        <span class="msgName">计划编号</span>
+        <span class="msgValue">JH516563332114466</span>
+      </div>
+      <div class="productMsg">
+        <span :class="hoverStatus ? 'msgName msgNameHover' : 'msgName'">
+          订单编号
+        </span>
+        <span class="msgValue">DD4545662211544</span>
+      </div>
+    </div>
+    <div class="bottomArea">
+      <div class="bottomBox">
+        <div class="boxNum">200</div>
+        <div :class="hoverStatus ? 'boxText boxTextHover' : 'boxText'">
+          产品数量
+        </div>
+      </div>
+      <div class="textDivider">
+        <div class="dividerBox">
+          <el-divider direction="vertical" style="height: 60%" />
+        </div>
+      </div>
+      <div class="bottomBox">
+        <div class="boxNum">100</div>
+        <div class="boxText">主料齐套</div>
+      </div>
+    </div>
+    <!-- 右下角状态盒子 -->
+    <div class="statusBox">未开始</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+
+defineProps<{
+  hoverStatus?: boolean;
+}>();
+</script>
+
+<style lang="scss" scoped>
+//盒子间隔在MAR-bottom
+.body {
+  position: relative;
+  width: 100%;
+  height: 244px;
+  border-radius: 16px;
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 15px 0 15px 20px;
+  background-color: #ffffff;
+}
+
+.bodyHover {
+  background-color: $select-hover;
+  color: white;
+}
+
+.boxTextHover {
+  color: white;
+}
+
+.msgNameHover {
+  color: white;
+}
+
+.productName {
+  font-size: $f24;
+}
+
+.msgName {
+  font-size: $f20;
+  color: $font-default-60;
+}
+
+.msgValue {
+  margin-left: 5px;
+  font-size: $f20;
+}
+
+.bottomArea {
+  height: 60px;
+}
+
+.bottomBox {
+  width: 80px;
+  display: inline-block;
+}
+
+.textDivider {
+  display: inline-block;
+
+  .dividerBox {
+    height: 60px;
+    display: flex;
+  }
+}
+
+.boxNum {
+  text-align: center;
+  line-height: 38px;
+  font-size: $f38;
+}
+
+.boxText {
+  text-align: center;
+  font-size: $f20;
+  line-height: 20px;
+  color: $font-default-60;
+}
+
+.statusBox {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 90px;
+  height: 40px;
+  border-radius: 10px 0 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $select-hover;
+  font-size: $f20;
+}
+</style>

src/views/process/components/steps.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="body">
+    <div class="steps" v-for="(item, index) in array" :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>
+        </div>
+        <div class="timeBox">{{ item.time }}</div>
+      </div>
+      <div class="line" v-if="index != array.length - 1"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+const array = [
+  {
+    name: "aaa",
+    position: "装配工位",
+    time: "10",
+  },
+  {
+    name: "222",
+    position: "装配工位",
+    time: "14440",
+  },
+  {
+    name: "222",
+    position: "装配工位",
+    time: "14440",
+  },
+  {
+    name: "222",
+    position: "装配工位",
+    time: "14440",
+  },
+  {
+    name: "222",
+    position: "装配工位",
+    time: "14440",
+  },
+  {
+    name: "222",
+    position: "装配工位",
+    time: "14440",
+  },
+];
+</script>
+
+<style lang="scss" scoped>
+.body {
+  width: 100%;
+}
+
+.stepBox {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 88px;
+  border-radius: 44px;
+  background-color: white;
+  box-shadow: 0px 1px 1px 1px #00000025;
+}
+
+.stepBox:hover {
+  box-shadow: 0px 0px 0px 0px;
+  background-color: $select-hover;
+
+  .stepIndex {
+    border-color: white;
+
+    span {
+      color: white;
+    }
+  }
+
+  .stepName {
+    color: white;
+  }
+
+  .stepStation {
+    color: white;
+  }
+
+  .timeBox {
+    color: white;
+  }
+}
+
+.stepIndex {
+  width: 88px;
+  height: 88px;
+  border: 2px solid #303030;
+  border-radius: 44px;
+  @include flex;
+
+  .indexText {
+    font-size: $f24;
+    color: #303030;
+  }
+}
+
+.midTextBox {
+  margin-left: 10px;
+
+  .stepName {
+    font-size: $f24;
+    color: $font-default-black;
+  }
+
+  .stepStation {
+    font-size: $f20;
+    color: $font-default-60;
+    line-height: 20px;
+  }
+}
+
+.timeBox {
+  margin-right: 20px;
+  @include flex;
+  font-size: $f24;
+}
+
+.line {
+  border-right: 1px solid #303030;
+  height: 15px;
+  width: 1px;
+  margin-left: 44px;
+}
+</style>

src/views/process/currentProduction.vue

@@ -0,0 +1,43 @@
+<template>
+  <!-- 包含当前订单 操作扫码板块 -->
+  <el-row :gutter="20">
+    <el-col :span="12" class="elColClasss" style="height: 250px">
+      <CurrentOrderInfo />
+    </el-col>
+    <el-col :span="12" class="elColClasss" style="height: 250px">
+      <Operate />
+    </el-col>
+    <el-col :span="24" class="elColClasss">
+      <div></div>
+    </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";
+</script>
+
+<style lang="scss" scoped>
+.barHeight {
+  height: calc(100vh - 270px);
+}
+
+.bottomBtn {
+  height: 80px;
+  margin-top: 10px;
+  width: 100%;
+  display: flex;
+
+  .btn {
+    width: 100%;
+    height: 80px;
+    border-radius: 40px;
+
+    .btnText {
+      font-size: $f24;
+      color: white;
+    }
+  }
+}
+</style>

src/views/process/main.vue

@@ -10,7 +10,9 @@
         </div>
       </el-col>
       <el-col :span="12" class="elColClasss" @click="click">
-        <div class="grid-content ep-bg-purple">3</div>
+        <div class="grid-content ep-bg-purple">
+          <CurrentProduction />
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -19,6 +21,7 @@
 <script lang="ts" setup>
 import Orders from "@/views/process/orders.vue";
 import Processes from "@/views/process/processes.vue";
+import CurrentProduction from "@/views/process/currentProduction.vue";
 
 // todo: 跳转修改
 const router = useRouter();

src/views/process/orders.vue

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

src/views/process/processes.vue

@@ -1,6 +1,39 @@
 <template>
-  <div class="commonTitle">待完成订单[3]</div>
+  <!-- 工序板块 -->
+  <div class="commonTitle">工序[6]</div>
+  <el-scrollbar class="barHeight">
+    <Steps />
+  </el-scrollbar>
+  <div class="bottomBtn">
+    <el-button color="#0A59F7" class="btn" round>
+      <span class="btnText">叫主料</span>
+    </el-button>
+  </div>
 </template>
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import Steps from "@/views/process/components/steps.vue";
+</script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.barHeight {
+  height: calc(100vh - 270px);
+}
+
+.bottomBtn {
+  height: 80px;
+  margin-top: 10px;
+  width: 100%;
+  display: flex;
+
+  .btn {
+    width: 100%;
+    height: 80px;
+    border-radius: 40px;
+
+    .btnText {
+      font-size: $f24;
+      color: white;
+    }
+  }
+}
+</style>