css

src/config/mork2.js

@@ -270,7 +270,7 @@ export const pickingInfo = () => {
             "update_time": null,
             "stor_code": null,
             "task_type": "PK20240909006",
-            "material_name": "测试物料",
+            "material_name": "测试物料33fdfdff测试物料33",
             "material_code": null,
             "material_spec": "test_zz",
             "assign_qty": 7,

src/pages/modules/index1.vue

@@ -21,67 +21,76 @@
           <p class="absolute title_h2">当前任务&nbsp;-&nbsp;<span style="color: #00b678;font-weight: 700;">{{ itemData[0].task_code }}</span></p>
         </div>
         <div class="zd-row content_wraper">
-          <div class="zd-col-20">
+          <div class="zd-col-18">
             <div class="zd-row flexwrap item_wraper">
               <div class="info_item">
                 <div class="box zd-row jccenter info_item_i">
-                  <div class="zd-col-8 item_label">库内料箱</div>
-                  <div class="zd-col-16 item_value">{{ itemData[0].vehicle_code }}<span class="item_unit"></span></div>
+                  <div class="item_label">库内料箱:</div>
+                  <div class="item_value">{{ itemData[0].vehicle_code }}<span class="item_unit"></span></div>
                 </div>
               </div>
               <div class="info_item">
                 <div class="box zd-row jccenter info_item_i">
-                  <div class="zd-col-8 item_label">物料名称</div>
-                  <div class="zd-col-16 item_value">{{ itemData[0].material_name }}<span class="item_unit"></span></div>
+                  <div class="item_label">物料名称:</div>
+                  <div class="item_value">{{ itemData[0].material_name }}<span class="item_unit"></span></div>
                 </div>
               </div>
               <div class="info_item">
                 <div class="box zd-row jccenter info_item_i">
-                  <div class="zd-col-8 item_label">规格</div>
-                  <div class="zd-col-16 item_value">{{ itemData[0].material_spec }}<span class="item_unit"></span></div>
+                  <div class="item_label">物料规格:</div>
+                  <div class="item_value">{{ itemData[0].material_spec }}<span class="item_unit"></span></div>
                 </div>
               </div>
               <div class="info_item">
                 <div class="box zd-row jccenter info_item_i">
-                  <div class="zd-col-8 item_label">数量</div>
-                  <div class="zd-col-16 item_value">{{ itemData[0].qty }}<span class="item_unit">个</span></div>
+                  <div class="item_label">物料数量:</div>
+                  <div class="item_value">{{ itemData[0].qty }}<span class="item_unit">个</span></div>
                 </div>
               </div>
               <div class="info_item">
                 <div class="box zd-row jccenter info_item_i">
-                  <div class="zd-col-8 item_label">需出数量</div>
-                  <div class="zd-col-16 item_value">{{ itemData[0].assign_qty }}<span class="item_unit">个</span></div>
+                  <div class="item_label">箱内剩余数量:</div>
+                  <div class="item_value">{{ itemData[0].remaining_qty }}<span class="item_unit">个</span></div>
                 </div>
               </div>
               <div class="info_item">
                 <div class="box zd-row jccenter info_item_i">
-                  <div class="zd-col-8 item_label">单重</div>
-                  <div class="zd-col-16 item_value">{{ itemData[0].single_weight }}<span class="item_unit">g</span></div>
+                  <div class="item_label">拣选称重:</div>
+                  <div class="item_value">{{ itemData[0].actual_weight }}<span class="item_unit">g</span></div>
                 </div>
               </div>
-              <div class="info_item">
-                <div class="box zd-row jccenter info_item_i">
-                  <div class="zd-col-8 item_label">拣选称重</div>
-                  <div class="zd-col-16 item_value">{{ itemData[0].actual_weight }}<span class="item_unit">g</span></div>
+              <div class="info_item_1">
+                <div class="zd-row info_item_1_i">
+                  <div class="zd-col-16">
+                    <div class="item_label_1">拣选数量</div>
+                    <div class="item_value_1">{{ itemData[0].assign_qty }}<span class="item_unit">个</span></div>
+                  </div>
+                  <div class="zd-col-8 info_icon"></div>
                 </div>
               </div>
-              <div class="info_item">
-                <div class="box zd-row jccenter info_item_i">
-                  <div class="zd-col-8 item_label">理论数量</div>
-                  <div class="zd-col-16 item_value">{{ itemData[0].theory_qty }}<span class="item_unit">个</span></div>
-                </div>
-              </div>
-              <div class="info_item">
-                <div class="box zd-row jccenter info_item_i">
-                  <div class="zd-col-8 item_label">箱内剩余</div>
-                  <div class="zd-col-16 item_value">{{ itemData[0].remaining_qty }}<span class="item_unit">个</span></div>
+              <div class="info_item_1">
+                <div class="zd-row info_item_1_i">
+                  <div class="zd-col-16">
+                    <div class="item_label_1">理论数量</div>
+                    <div class="item_value_1">{{ itemData[0].theory_qty }}<span class="item_unit">个</span></div>
+                  </div>
+                  <div class="zd-col-8 info_icon info_icon_2"></div>
                 </div>
               </div>
             </div>
           </div>
-          <div class="zd-col-4 tip_wraper" :class="itemData[0].assign_qty === itemData[0].theory_qty ? 'tip_wraper_bg1' : 'tip_wraper_bg2'">
+          <div class="zd-col-6 height-100">
+            <div class="info_item info_item_2">
+              <div class="box zd-row jccenter info_item_i">
+                <div class="item_label">单重:</div>
+                <input type="number" class="item_value_input" v-model="itemData[0].single_weight">
+                <div class="item_unit">g</div>
+              </div>
+            </div>
+            <div class="tip_wraper" :class="itemData[0].assign_qty === itemData[0].theory_qty ? 'tip_wraper_bg1' : 'tip_wraper_bg2'">
             <div class="tip_txt">料箱{{ itemData[0].vehicle_code }}<br/>{{itemData[0].assign_qty === itemData[0].theory_qty ? '拣选成功！' : '称重错误！'}}</div>
           </div>
+          </div>
         </div>
       </div>
       <div v-if="itemData.length >= 2" class="relative n_wraper">
@@ -98,38 +107,38 @@
             <div class="zd-row flexwrap item_wraper">
               <div class="info_item">
                 <div class="box zd-row jccenter info_item_i">
-                  <div class="zd-col-8 item_label">料箱号</div>
-                  <div class="zd-col-16 item_value">{{ itemData[1].vehicle_code }}<span class="item_unit"></span></div>
+                  <div class="item_label">料箱号</div>
+                  <div class="item_value">{{ itemData[1].vehicle_code }}<span class="item_unit"></span></div>
                 </div>
               </div>
               <div class="info_item">
                 <div class="box zd-row jccenter info_item_i">
-                  <div class="zd-col-8 item_label">物料名称</div>
-                  <div class="zd-col-16 item_value">{{ itemData[1].material_name }}<span class="item_unit"></span></div>
+                  <div class="item_label">物料名称</div>
+                  <div class="item_value">{{ itemData[1].material_name }}<span class="item_unit"></span></div>
                 </div>
               </div>
               <div class="info_item">
                 <div class="box zd-row jccenter info_item_i">
-                  <div class="zd-col-8 item_label">规格</div>
-                  <div class="zd-col-16 item_value">{{ itemData[1].material_spec }}<span class="item_unit"></span></div>
+                  <div class="item_label">物料规格</div>
+                  <div class="item_value">{{ itemData[1].material_spec }}<span class="item_unit"></span></div>
                 </div>
               </div>
               <div class="info_item">
                 <div class="box zd-row jccenter info_item_i">
-                  <div class="zd-col-8 item_label">数量</div>
-                  <div class="zd-col-16 item_value">{{ itemData[1].qty }}<span class="item_unit">个</span></div>
+                  <div class="item_label">物料数量</div>
+                  <div class="item_value">{{ itemData[1].qty }}<span class="item_unit">个</span></div>
                 </div>
               </div>
               <div class="info_item">
                 <div class="box zd-row jccenter info_item_i">
-                  <div class="zd-col-8 item_label">需出数量</div>
-                  <div class="zd-col-16 item_value">{{ itemData[1].assign_qty }}<span class="item_unit">个</span></div>
+                  <div class="item_label">拣选数量</div>
+                  <div class="item_value">{{ itemData[1].assign_qty }}<span class="item_unit">个</span></div>
                 </div>
               </div>
               <div class="info_item">
                 <div class="box zd-row jccenter info_item_i">
-                  <div class="zd-col-8 item_label">单重</div>
-                  <div class="zd-col-16 item_value">{{ itemData[1].single_weight }}<span class="item_unit">g</span></div>
+                  <div class="item_label">单重</div>
+                  <div class="item_value">{{ itemData[1].single_weight }}<span class="item_unit">g</span></div>
                 </div>
               </div>
             </div>

src/pages/modules/index1的副本.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="box relative">
+    <t-header title2="浙江恒森实业集团WMS系统">
+      <el-select class="header_select" v-model="value" placeholder="请选择" @change="change">
+        <el-option
+          v-for="item in options"
+          :key="item.code"
+          :label="item.name"
+          :value="item.code">
+        </el-option>
+      </el-select>
+    </t-header>
+    <div class="box body_container">
+      <div v-if="itemData.length >= 1" class="relative n_wraper">
+        <div class="absolute bg_j bg_j_1"></div>
+        <div class="absolute bg_j bg_j_2"></div>
+        <div class="absolute bg_j bg_j_3"></div>
+        <div class="absolute bg_j bg_j_4"></div>
+        <div class="relative title_wraper">
+          <p class="relative title_h1">装配一车间</p>
+          <p class="absolute title_h2">当前任务&nbsp;-&nbsp;<span style="color: #00b678;font-weight: 700;">{{ itemData[0].task_code }}</span></p>
+        </div>
+        <div class="zd-row content_wraper">
+          <div class="zd-col-20">
+            <div class="zd-row flexwrap item_wraper">
+              <div class="info_item">
+                <div class="box zd-row jccenter info_item_i">
+                  <div class="zd-col-8 item_label">库内料箱</div>
+                  <div class="zd-col-16 item_value">{{ itemData[0].vehicle_code }}<span class="item_unit"></span></div>
+                </div>
+              </div>
+              <div class="info_item">
+                <div class="box zd-row jccenter info_item_i">
+                  <div class="zd-col-8 item_label">物料名称</div>
+                  <div class="zd-col-16 item_value">{{ itemData[0].material_name }}<span class="item_unit"></span></div>
+                </div>
+              </div>
+              <div class="info_item">
+                <div class="box zd-row jccenter info_item_i">
+                  <div class="zd-col-8 item_label">规格</div>
+                  <div class="zd-col-16 item_value">{{ itemData[0].material_spec }}<span class="item_unit"></span></div>
+                </div>
+              </div>
+              <div class="info_item">
+                <div class="box zd-row jccenter info_item_i">
+                  <div class="zd-col-8 item_label">数量</div>
+                  <div class="zd-col-16 item_value">{{ itemData[0].qty }}<span class="item_unit">个</span></div>
+                </div>
+              </div>
+              <div class="info_item">
+                <div class="box zd-row jccenter info_item_i">
+                  <div class="zd-col-8 item_label">需出数量</div>
+                  <div class="zd-col-16 item_value">{{ itemData[0].assign_qty }}<span class="item_unit">个</span></div>
+                </div>
+              </div>
+              <div class="info_item">
+                <div class="box zd-row jccenter info_item_i">
+                  <div class="zd-col-8 item_label">单重</div>
+                  <div class="zd-col-16 item_value">{{ itemData[0].single_weight }}<span class="item_unit">g</span></div>
+                </div>
+              </div>
+              <div class="info_item">
+                <div class="box zd-row jccenter info_item_i">
+                  <div class="zd-col-8 item_label">拣选称重</div>
+                  <div class="zd-col-16 item_value">{{ itemData[0].actual_weight }}<span class="item_unit">g</span></div>
+                </div>
+              </div>
+              <div class="info_item">
+                <div class="box zd-row jccenter info_item_i">
+                  <div class="zd-col-8 item_label">理论数量</div>
+                  <div class="zd-col-16 item_value">{{ itemData[0].theory_qty }}<span class="item_unit">个</span></div>
+                </div>
+              </div>
+              <div class="info_item">
+                <div class="box zd-row jccenter info_item_i">
+                  <div class="zd-col-8 item_label">箱内剩余</div>
+                  <div class="zd-col-16 item_value">{{ itemData[0].remaining_qty }}<span class="item_unit">个</span></div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="zd-col-4 tip_wraper" :class="itemData[0].assign_qty === itemData[0].theory_qty ? 'tip_wraper_bg1' : 'tip_wraper_bg2'">
+            <div class="tip_txt">料箱{{ itemData[0].vehicle_code }}<br/>{{itemData[0].assign_qty === itemData[0].theory_qty ? '拣选成功！' : '称重错误！'}}</div>
+          </div>
+        </div>
+      </div>
+      <div v-if="itemData.length >= 2" class="relative n_wraper">
+        <div class="absolute bg_j bg_j_1"></div>
+        <div class="absolute bg_j bg_j_2"></div>
+        <div class="absolute bg_j bg_j_3"></div>
+        <div class="absolute bg_j bg_j_4"></div>
+        <div class="relative title_wraper">
+          <p class="relative title_h1">装配二车间</p>
+          <p class="absolute title_h2">下一任务&nbsp;-&nbsp;<span style="color: #00b678;font-weight: 700;">{{ itemData[1].task_code }}</span></p>
+        </div>
+        <div class="zd-row content_wraper">
+          <div class="zd-col-24">
+            <div class="zd-row flexwrap item_wraper">
+              <div class="info_item">
+                <div class="box zd-row jccenter info_item_i">
+                  <div class="zd-col-8 item_label">料箱号</div>
+                  <div class="zd-col-16 item_value">{{ itemData[1].vehicle_code }}<span class="item_unit"></span></div>
+                </div>
+              </div>
+              <div class="info_item">
+                <div class="box zd-row jccenter info_item_i">
+                  <div class="zd-col-8 item_label">物料名称</div>
+                  <div class="zd-col-16 item_value">{{ itemData[1].material_name }}<span class="item_unit"></span></div>
+                </div>
+              </div>
+              <div class="info_item">
+                <div class="box zd-row jccenter info_item_i">
+                  <div class="zd-col-8 item_label">规格</div>
+                  <div class="zd-col-16 item_value">{{ itemData[1].material_spec }}<span class="item_unit"></span></div>
+                </div>
+              </div>
+              <div class="info_item">
+                <div class="box zd-row jccenter info_item_i">
+                  <div class="zd-col-8 item_label">数量</div>
+                  <div class="zd-col-16 item_value">{{ itemData[1].qty }}<span class="item_unit">个</span></div>
+                </div>
+              </div>
+              <div class="info_item">
+                <div class="box zd-row jccenter info_item_i">
+                  <div class="zd-col-8 item_label">需出数量</div>
+                  <div class="zd-col-16 item_value">{{ itemData[1].assign_qty }}<span class="item_unit">个</span></div>
+                </div>
+              </div>
+              <div class="info_item">
+                <div class="box zd-row jccenter info_item_i">
+                  <div class="zd-col-8 item_label">单重</div>
+                  <div class="zd-col-16 item_value">{{ itemData[1].single_weight }}<span class="item_unit">g</span></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="itemData.length === 0" class="zd-row jccenter wraning">当前拣选工位无拣选作业</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import THeader from '@components/header.vue'
+import { queryPickingPoint, pickingInfo } from '@js/mork2.js'
+export default {
+  components: {
+    THeader
+  },
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      timer: null,
+      options: [],
+      value: '',
+      itemData: []
+    }
+  },
+  created () {
+    this._queryPickingPoint()
+  },
+  beforeDestroy () {
+    if (this.timer !== null) {
+      clearInterval(this.timer)
+    }
+  },
+  methods: {
+    refresh () {
+      this._pickingInfo()
+      this.timer = setInterval(() => {
+        this._pickingInfo()
+      }, this.interTime)
+    },
+    async _pickingInfo () {
+      let res = await pickingInfo(this.value)
+      this.itemData = [...res]
+    },
+    async _queryPickingPoint () {
+      let res = await queryPickingPoint()
+      this.options = [...res]
+      if (res.length > 0) {
+        this.value = res[0].code
+        this.refresh()
+      }
+    },
+    change (e) {
+      if (e) {
+        if (this.timer !== null) {
+          clearInterval(this.timer)
+        }
+        this.refresh()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import './style.stylus'
+.wraning
+  height 100%
+  font-size 50px;
+  color: yellow;
+  font-weight: 700;
+  text-align: center;
+</style>

src/pages/modules/style.stylus

@@ -35,34 +35,72 @@
   left 2%
 .content_wraper
   height calc(100% - 26px)
-  padding 0 2%
+  padding 13px 2%
 .item_wraper
   padding-right 3%
 .info_item
-  height 66px
-  padding 3px
-  border 1px solid #168abd
-  border-radius 4px
-  &:nth-child(3n+1), &:nth-child(3n+3)
-    width 30%
+  width 32%
+  height 50px
+  // padding 3px
+  border-left 2px solid #00fcff
+  // border-radius 4px
   &:nth-child(3n+2)
-    width 36%
     margin-left 2%
     margin-right 2%
   &:nth-child(4), &:nth-child(5), &:nth-child(6), &:nth-child(7), &:nth-child(8), &:nth-child(9)
-    margin-top 6px
+    margin-top 12px
 .info_item_i
-  border-radius 2px
-  box-shadow inset 0px 0px 5px 3px #1198bf
+  // border-radius 2px
+  box-shadow inset 3px 0px 3px 0px rgba(17, 152, 191, 70%)
+  padding 5px 10px
+  background linear-gradient(45deg, rgba(22, 138, 189, 1), transparent)
+.info_item_1
+  width 48.5%
+  height 84px
+  // padding 3px
+  border 1px solid #168abd
+  // border-radius 4px
+  margin-top 14px
+.info_item_1_i
+  height 100%
+  box-shadow inset 0px 0px 1px 1px rgba(17, 152, 191, 70%)
+  padding 0 16px
+  background linear-gradient(to top, rgba(22, 138, 189, 1), transparent)
+.item_label_1
+  height 28px
+  font-size 18px
+  line-height 28px
+  color #f2a045
+  font-style italic
+  // text-shadow: 0 0 1px #f6ba77,
+  //              0 0 1px #f6ba77,
+  //              0 0 1px #f6ba77,
+  //              0 0 1px #f6ba77;
+.item_value_1
+  display flex
+  align-items center
+  height calc(100% - 24px)
+  font-size 34px
+  line-height 32px
+  color #fefb2d
+  font-weight 700
+  .item_unit
+    font-size 16px
 .item_label
+  width 85px
   font-size 13px
   line-height 13px
-  color #fff
-  text-align right
+  color #d2eff8
+  text-align left
+  text-shadow: 0 0 1px #5bd0f5,
+               0 0 1px #5bd0f5,
+               0 0 1px #5bd0f5,
+               0 0 1px #5bd0f5;
 .item_value
-  font-size 14px
-  line-height 14px
-  color #5bd0f5
+  width calc(100% - 85px)
+  font-size 15px
+  line-height 15px
+  color #fff
   font-weight 700
   text-align center
 .item_unit
@@ -70,15 +108,32 @@
   color #fff
   font-weight 400
   padding-left 5px
+.item_value_input
+  width calc(100% - 85px)
+  font-size 14px
+  line-height 30px
+  color #fff
+  font-weight 700
+  background-color transparent
+  border-bottom 1px solid #fff
+  text-align center
+.info_icon
+  width 70px
+  height 70px
+  background center / 100% auto url('../../images/icon_1.png') no-repeat
+.info_icon_2
+  background-image url('../../images/icon_2.png')
+.info_item_2
+  width 100%
 .tip_wraper
-  height 100%
-  padding 3% 2% 0 2%
+  height calc(100% - 50px)
+  padding-top 16px
 .tip_wraper_bg1
-  background center 90% / 100% auto url('../../images/bg_tip.png') no-repeat
+  background center bottom / auto 76% url('../../images/bg_tip.png') no-repeat
   .tip_txt
     color #00c8ed
 .tip_wraper_bg2
-  background center 90% / 100% auto url('../../images/bg_tip_1.png') no-repeat
+  background center bottom / auto 76% url('../../images/bg_tip_1.png') no-repeat
   .tip_txt
     color #9d5a00
 .tip_txt

src/style/reset.css

@@ -236,6 +236,10 @@ div, p {
     width: 4.16667%
 }
 
+.height-100 {
+    height: 100%;
+}
+
 .pointer {
      cursor: pointer;
 }