生产统计

src/pages/ProdCount2.vue

@@ -9,29 +9,29 @@
           <div class="num">
             <div class="bg" v-for="item in showNum1" :key="item" :class="{dot: item === '.'}">{{item}}</div>
           </div>
-          <span>吨</span>
+          <span>块</span>
         </div>
         <div class="c-title c-right">
           <span>今日干燥量：</span>
           <div class="num">
             <div class="bg" v-for="item in showNum2" :key="item" :class="{dot: item === '.'}">{{item}}</div>
           </div>
-          <span>吨</span>
+          <span>块</span>
         </div>
-        <div class="c-title c-right" style="marginLeft: 1.5rem;">
+        <div class="c-title c-right" style="marginLeft: 1rem;">
           <span>今日成品量：</span>
           <div class="num">
             <div class="bg" v-for="item in showNum3" :key="item" :class="{dot: item === '.'}">{{item}}</div>
           </div>
-          <span>吨</span>
+          <span>块</span>
         </div>
       </div>
       <div style="display:flex">
         <div class="con2">
           <div class="title">原料计划完成情况</div>
           <div class="desc">
-            <div>计划生产：<span>{{planqty}}</span>吨</div>
+            <div>计划生产：<span>{{planqty}}</span>KG</div>
-            <div>已生产：<span>{{realqty}}</span>吨</div>
+            <div>已生产：<span>{{realqty}}</span>KG</div>
           </div>
           <div class="item_content_0">
             <div id="echart_d01" style="width: 100%; height: 100%"></div>
@@ -49,22 +49,12 @@
           <h2>生产任务</h2>
         </div>
         <div class="list_scroll_title">
-          <span>工序</span><span>设备</span><span>物料号</span><span>生产物料</span><span>客户</span><span>计划量</span><span>生产量</span><span>班次类型</span><span>生产状态</span><span>开始时间</span>
+          <span>设备</span><span>物料号</span><span>计划量</span><span>实际数量</span><span>合格数量</span><span>不合格数量</span><span>生产状态</span><span>开始时间</span>
-          <!-- <span>工序</span>
-          <span>设备</span>
-          <span>物料号</span>
-          <span>生产物料</span>
-          <span>厂家</span>
-          <span>配方代码</span>
-          <span>计划量</span>
-          <span>生产量</span>
-          <span>班次类型</span>
-          <span>生产状态</span> -->
         </div>
         <vue-seamless-scroll :data="taskData" :class-option="classOption" class="content-block-scroll">
           <ul class="content-block-scroll-ul">
             <li v-for="(e, i) in taskData" :key="i">
-              <span>{{e.label}}</span><span>{{e.device_name}}</span><span>{{e.material_code}}</span><span>{{e.material_name}}</span><span>{{e.cust_name}}</span><span>{{e.plan_qty}}</span><span>{{e.real_qty}}</span><span>{{e.shift_type}}</span><span>{{e.order_status}}</span><span>{{e.realproducestart_date}}</span>
+              <span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.device_name}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.material_code}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.plan_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.real_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.qualified_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.unqualified_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.order_status_name}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.realproducestart_date}}</span>
             </li>
           </ul>
         </vue-seamless-scroll>
@@ -141,7 +131,7 @@ export default {
       this.showNum3 = (res.result.finishedRes[2].real_qty + '').split('')
       this.setEchart01()
       this.setEchart05()
-      console.log(this.resData.materialTask[0].plan_qty)
+      // 五种状态：未成产、已下发、生产中、停止、完成
     },
     setEchart01 () {
       let data = [
@@ -586,6 +576,18 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+.blue
+  color #32C5FF !important
+.green
+  color #30EBC9 !important
+.gray
+  color #516282 !important
+.yellow
+  color #E2BB0E !important
+.orange
+  color #F96700 !important
+.red
+  color #FF0000 !important
 .con1
   width 18.14rem
   // height 1.23rem
@@ -599,12 +601,15 @@ export default {
   margin-top 32px
   margin-bottom 15px
   text-align center
+  // display flex
+  // justify-content space-between
+  // align-items center
   .c-title
     float left
     // line-height 1.23rem
     line-height 123px
   .c-left
-    margin 0 2.92rem 0 2.51rem
+    margin 0 1.3rem 0 1.3rem
     display flex
     align-items center
   .c-right
@@ -716,15 +721,15 @@ export default {
     background #262F52
     span
       display inline-block
-      width 10%
+      width 12.5%
       text-align center
       line-height .32rem
       // float left
       font-size 14px
       &:nth-child(1)
-        width 6%
+        width 10%
-      &:nth-child(4)
+      &:nth-child(2)
-        width 14%
+        width 15%
   .content-block-scroll
     width 100%
     height calc(100% - 0.6rem)
@@ -736,15 +741,15 @@ export default {
         background rgba(38,47,82,0.50)
       span
         display inline-block
-        width 10%
+        width 12.5%
         font-size 12px
-        padding 0 .1rem
+        // padding 0 .1rem
         text-align center
         line-height .38rem
         box-sizing border-box
         // float left
         &:nth-child(1)
-          width 6%
+          width 10%
-        &:nth-child(4)
+        &:nth-child(2)
-          width 14%
+          width 15%
 </style>