init

src/views/orderManage/orderManagerCockpit/components/workOrder.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="order-box" :style="{ padding: '0 ' + 16 * beilv + 'px', fontSize: 14 * beilv + 'px'}">
+    <!-- 小块 -->
+    <div v-for="(item,index) in orderMsg" :key="index" :style="{ padding: 10 * beilv + 'px' + ' 20px ' + 16 * beilv + 'px' + ' 16px'}" class="box">
+      <p class="line1">
+        <span>工单编号：<span class="light-color">{{ item.code }}</span></span>
+        <span class="fr">
+          状态：
+          <span class="state">{{ item.state }}</span>
+        </span>
+      </p>
+      <p :style="{ paddingLeft: 15 * beilv + 'px'}">
+        <span>产品名称：<span class="light-color">{{ item.name }}</span></span>
+        <span class="fr">
+          产线：
+          <span class="light-color" style="margin-right: 25px">{{ item.line }}</span>
+        </span>
+      </p>
+      <p :style="{ paddingLeft: 15 * beilv + 'px'}">
+        <span>所属订单编号：<span class="light-color">{{ item.workCode }}</span></span>
+      </p>
+      <div :style="{ paddingLeft: 15 * beilv + 'px'}">
+        <span v-if="item.percentage === '100%'" class="blue-color">√ 订单进度</span>
+        <span v-else class="light-color">订单进度</span>
+        <span class="light-color fr">{{ item.percentage }}</span>
+        <div class="progress-box">
+          <div
+            class="progress"
+            :style="{height: 8 * beilv + 'px', width: item.percentage}"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'WorkOrder',
+  props: {
+    orderMsg: {
+      type: Array,
+      default: () => []
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+.order-box {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  .box {
+    width: 49.5%;
+    height: 49.5%;
+    margin-bottom: 8px;
+    background-image: url('../../../../assets/img/cockpit/module-back.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    .light-color {
+      opacity: 0.5;
+    }
+    .blue-color {
+      color: #3E6AE9;
+    }
+    .line1::before {
+      display: inline-block;
+      content: "";
+      width: 4px;
+      height: 14px;
+      border-radius: 2px;
+      margin-right: 8px;
+      vertical-align: middle;
+      background-color: #4BFFC8;
+    }
+    .state {
+      display: inline-block;
+      color: #70F97F;
+      padding: 2px 4px;
+      border-radius: 2px;
+      background: #366F5D;
+    }
+  }
+}
+.progress-box {
+  border-radius: 5px;
+  background: #1E2D45;
+  .progress {
+    text-align: right;
+    line-height: 18px;
+    border-radius: 5px;
+    padding-right: 5px;
+    margin-top: 10px;
+    background: linear-gradient(270deg, #47F8DC 0%, #4573FE 100%);
+  }
+}
+
+</style>