样式

src/components/SecHeader.vue

@@ -1,14 +1,14 @@
 <template>
-  <div>
+  <div class="container">
     <header>
-      <div class="fl header-tip">设备：{{deviceCode}}</div>
-      <button class="fr button--primary header-btn" @click="goBack">返&nbsp;&nbsp;回</button>
+      <div class="header-tip">设备：{{deviceCode}}</div>
+      <button class="button button--primary" @click="goBack">返&nbsp;&nbsp;回</button>
     </header>
-    <ul v-if="tabShow" class="tabs">
+    <!-- <ul v-if="tabShow" class="tabs">
       <li v-for="i in menus" :key="i.index">
         <router-link :to="i.router" :class="{'router-link-active': i.index === activeIndex}">{{i.label}}</router-link>
       </li>
-    </ul>
+    </ul> -->
     <slot></slot>
   </div>
 </template>

src/config/rem.js

@@ -1,3 +1,4 @@
+// 800 * 600
 (function (doc, win) {
   var docEl = doc.documentElement
   var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'

src/pages/assignment/Operation.vue

@@ -1,43 +1,45 @@
 <template>
   <sec-header :deviceCode="deviceCode" activeIndex="1">
     <div class="wrap">
-      <div class="wrap-filter">
-        <div class="fr mgt10">
-          <button class="mgr54 button--primary" :disabled="disabled" @click="toHandle('01')">开&nbsp;&nbsp;始</button>
-          <button class="mgr54 button--primary" :disabled="disabled" @click="toHandle('03')">报&nbsp;&nbsp;工</button>
-          <button class="mgr54 button--primary" :disabled="disabled" @click="toHandle('02', '1')">强制结束</button>
-          <button class="button--primary" :disabled="disabled" @click="toHandle('02', '2')">更换设备</button>
+      <div class="wrap-filter-buttons">
+        <div class="wrap-buttons">
+          <button class="button button--primary" :disabled="disabled" @click="toHandle('01')">开&nbsp;&nbsp;始</button>
+          <button class="button button--primary" :disabled="disabled" @click="toHandle('03')">报&nbsp;&nbsp;工</button>
+          <button class="button button--primary" :disabled="disabled" @click="toHandle('02', '1')">强制结束</button>
+          <button class="button button--primary" :disabled="disabled" @click="toHandle('02', '2')">更换设备</button>
         </div>
       </div>
-      <table class="filter-table">
-        <tr>
-          <th width="4%">
-            <button v-if="isMultiple === '1'" class="iconfont select_icon select_square_icon" :class="allChoice === true ? 'selected_icon' : 'unselect_icon'" @click="allChecked"></button>
-          </th>
-          <th width="11%">工单号</th>
-          <th width="13%">班次</th>
-          <th width="13%">物料名称</th>
-          <th width="10%">工序</th>
-          <th width="13%">生产数量</th>
-          <th width="10%">期初数量</th>
-          <th width="13%">本次加工</th>
-          <th width="13%">开始时间</th>
-        </tr>
-        <tr v-for="e in datas" :key="e.pk_id"  @click="toRadio(e)">
-          <td>
-            <button v-if="isMultiple === '1'" class="iconfont select_icon select_square_icon" :class="e.checked === true ? 'selected_icon' : 'unselect_icon'"></button>
-            <button v-else class="iconfont select_icon" :class="e.checked === true ? 'selected_icon' : 'unselect_icon'"></button>
-          </td>
-          <td>{{e.produceorder_code}}</td>
-          <td>{{e.shift_type_scode_name}}</td>
-          <td>{{e.material_name}}</td>
-          <td>{{e.workprocedure_name}}</td>
-          <td>{{e.produce_qty}}</td>
-          <td>{{e.initial_qty}}</td>
-          <td>{{e.this_qty}}</td>
-          <td>{{e.realproducestart_date}}</td>
-        </tr>
-      </table>
+      <div class="grid_wraper">
+        <table class="filter-table">
+          <tr>
+            <th width="4%">
+              <button v-if="isMultiple === '1'" class="iconfont select_icon select_square_icon" :class="allChoice === true ? 'selected_icon' : 'unselect_icon'" @click="allChecked"></button>
+            </th>
+            <th width="11%">工单号</th>
+            <th width="13%">班次</th>
+            <th width="13%">物料名称</th>
+            <th width="10%">工序</th>
+            <th width="13%">生产数量</th>
+            <th width="10%">期初数量</th>
+            <th width="13%">本次加工</th>
+            <th width="13%">开始时间</th>
+          </tr>
+          <tr v-for="e in datas" :key="e.pk_id"  @click="toRadio(e)">
+            <td>
+              <button v-if="isMultiple === '1'" class="iconfont select_icon select_square_icon" :class="e.checked === true ? 'selected_icon' : 'unselect_icon'"></button>
+              <button v-else class="iconfont select_icon" :class="e.checked === true ? 'selected_icon' : 'unselect_icon'"></button>
+            </td>
+            <td>{{e.produceorder_code}}</td>
+            <td>{{e.shift_type_scode_name}}</td>
+            <td>{{e.material_name}}</td>
+            <td>{{e.workprocedure_name}}</td>
+            <td>{{e.produce_qty}}</td>
+            <td>{{e.initial_qty}}</td>
+            <td>{{e.this_qty}}</td>
+            <td>{{e.realproducestart_date}}</td>
+          </tr>
+        </table>
+      </div>
       <modal
         :mdShow='mdShow2'
         message="提示"
@@ -360,4 +362,6 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+.grid_wraper
+  height calc(100% - 45px)
 </style>

src/pages/assignment/workordermanage.vue

@@ -1,62 +1,76 @@
 <template>
   <sec-header :deviceCode="deviceCode" activeIndex="1">
     <div class="wrap">
-      <div class="wrap-filter">
-        <div class="fl mgt10">
-          工单日期&nbsp;
-          <el-date-picker
-            v-model="value1"
-            type="daterange"
-            range-separator="-"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期">
-          </el-date-picker>
+      <div class="wrap-filter-buttons">
+        <div class="wrap-filters">
+          <div class="filter_item">
+            <div class="filter_label">工单日期</div>
+            <div class="filter_input">
+              <el-date-picker
+                v-model="value1"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期">
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="filter_item">
+            <div class="filter_label">关键字</div>
+            <div class="filter_input">
+              <input type="text" class="filter-input" v-model="keyValue" placeholder="请输入工单号、物料编码">
+              <i v-show="closeIcon1" class="iconfont close_icon" @click="clearData(1)"></i>
+            </div>
+          </div>
         </div>
-        <div class="fl mgt10 keyValue">
-          &nbsp;关键字
-          <input type="text" class="input" v-model="keyValue" placeholder="请输入工单号、物料编码">
-          <i v-show="closeIcon1" class="iconfont close_icon" @click="clearData(1)"></i>
-        </div>
-        <div class="fr mgt10">
-          <button class="mgr5 button--primary" @click="getDatas">查&nbsp;&nbsp;询</button>
-          <button class="button--primary" :class="{'button--defalut': !pkId || Number(pkObj.order_status) !== 1}" :disabled="disabled1" @click="_openStart">开工</button>
-          <button class="button--primary" :class="{'button--defalut': !pkId || Number(pkObj.order_status) === 1}" :disabled="disabled2" @click="_saveReport">报工</button>
-          <button class="button--primary" :class="{'button--defalut': !pkId || Number(pkObj.order_status) === 1}" :disabled="disabled3" @click="_tofinish">完工</button>
+        <!-- <div class="wrap-buttons">
+          <button class="button button--primary" @click="getDatas">查&nbsp;&nbsp;询</button>
+          <button class="button button--primary" :class="{'button--defalut': !pkId || Number(pkObj.order_status) !== 1}" :disabled="disabled1" @click="_openStart">开工</button>
+          <button class="button button--primary" :class="{'button--defalut': !pkId || Number(pkObj.order_status) === 1}" :disabled="disabled2" @click="_saveReport">报工</button>
+          <button class="button button--primary" :class="{'button--defalut': !pkId || Number(pkObj.order_status) === 1}" :disabled="disabled3" @click="_tofinish">完工</button>
+        </div> -->
+        <div class="wrap-buttons">
+          <button class="button button--primary" @click="getDatas">查&nbsp;&nbsp;询</button>
+          <button class="button button--primary" :disabled="disabled1" @click="_openStart">开工</button>
+          <button class="button button--primary" :disabled="disabled2" @click="_saveReport">报工</button>
+          <button class="button button--primary" :disabled="disabled3" @click="_tofinish">完工</button>
         </div>
       </div>
-      <table class="filter-table">
-        <tr>
-          <th width="4%"></th>
-          <th width="8%">工单号</th>
-          <th width="8%">班次</th>
-          <th width="9%">物料名称</th>
-          <th width="8%">工序</th>
-          <th width="9%">工单状态</th>
-          <th width="10%">计划数量</th>
-          <th width="9%">实际数量</th>
-          <th width="9%">报工数量</th>
-          <th width="13%">开始时间</th>
-          <th width="13%">结束时间</th>
-        </tr>
-        <tr v-for="e in dataList" :key="e.workorder_id">
-          <td>
-            <button class="iconfont select_icon" :class="pkId === e.workorder_id ? 'selected_icon' : 'unselect_icon'" @click="toRadio(e)"></button>
-          </td>
-          <td>{{e.workorder_code}}</td>
-          <td>{{e.shift_type_scode_name}}</td>
-          <td>{{e.material_name}}</td>
-          <td>{{e.workprocedure_name}}</td>
-          <td>{{['创建','下发','生产中','暂停', '完成'][Number(e.order_status) - 1]}}</td>
-          <td>{{e.plan_qty}}</td>
-          <td>{{e.real_qty}}</td>
-          <!-- <td>{{e.report_qty}}</td> -->
-          <td>
-            <input type="number" class="grid-input" v-model="e.report_qty">
-          </td>
-          <td>{{e.realproducestart_date}}</td>
-          <td>{{e.realproduceend_date}}</td>
-        </tr>
-      </table>
+      <div class="grid_wraper">
+        <table class="filter-table">
+          <tr>
+            <th width="4%"></th>
+            <th width="8%">工单号</th>
+            <th width="8%">班次</th>
+            <th width="9%">物料名称</th>
+            <th width="8%">工序</th>
+            <th width="9%">工单状态</th>
+            <th width="10%">计划数量</th>
+            <th width="9%">实际数量</th>
+            <th width="9%">报工数量</th>
+            <th width="13%">开始时间</th>
+            <th width="13%">结束时间</th>
+          </tr>
+          <tr v-for="e in dataList" :key="e.workorder_id">
+            <td>
+              <button class="iconfont select_icon" :class="pkId === e.workorder_id ? 'selected_icon' : 'unselect_icon'" @click="toRadio(e)"></button>
+            </td>
+            <td>{{e.workorder_code}}</td>
+            <td>{{e.shift_type_scode_name}}</td>
+            <td>{{e.material_name}}</td>
+            <td>{{e.workprocedure_name}}</td>
+            <td>{{['创建','下发','生产中','暂停', '完成'][Number(e.order_status) - 1]}}</td>
+            <td>{{e.plan_qty}}</td>
+            <td>{{e.real_qty}}</td>
+            <!-- <td>{{e.report_qty}}</td> -->
+            <td>
+              <input type="number" class="grid-input" v-model="e.report_qty">
+            </td>
+            <td>{{e.realproducestart_date}}</td>
+            <td>{{e.realproduceend_date}}</td>
+          </tr>
+        </table>
+      </div>
     </div>
     <Back></Back>
   </sec-header>
@@ -120,10 +134,10 @@ export default {
         this.disabled1 = false
         return
       }
-      if (Number(this.pkObj.order_status) !== 1) {
-        this.disabled1 = false
-        return
-      }
+      // if (Number(this.pkObj.order_status) !== 1) {
+      //   this.disabled1 = false
+      //   return
+      // }
       if (Number(this.pkObj.report_qty) < 0) {
         this.toast('报工数量不能为负值')
         this.disabled1 = false
@@ -147,10 +161,10 @@ export default {
         this.disabled2 = false
         return
       }
-      if (Number(this.pkObj.order_status) === 1) {
-        this.disabled2 = false
-        return
-      }
+      // if (Number(this.pkObj.order_status) === 1) {
+      //   this.disabled2 = false
+      //   return
+      // }
       if (Number(this.pkObj.report_qty) < 0) {
         this.toast('报工数量不能为负值')
         this.disabled2 = false
@@ -174,10 +188,10 @@ export default {
         this.disabled3 = false
         return
       }
-      if (Number(this.pkObj.order_status) === 1) {
-        this.disabled3 = false
-        return
-      }
+      // if (Number(this.pkObj.order_status) === 1) {
+      //   this.disabled3 = false
+      //   return
+      // }
       if (Number(this.pkObj.report_qty) < 0) {
         this.toast('报工数量不能为负值')
         this.disabled3 = false
@@ -198,14 +212,15 @@ export default {
 
 <style lang="stylus" scoped>
 .input
-    width 1.2rem
+    width 1.5rem
 .close_icon
-    top 0
+    top 50%
+    transform: translateY(-50%)
 .grid-input
-  line-height 0.18rem
-  font-size 0.13rem
-  color #999
+  line-height 24px
+  font-size 12px
+  color #606266
   text-align center
-  border-radius 3px
-  margin 0 .01rem
+  border-radius 4px
+  margin 0 auto
 </style>

src/pages/homeset/Home.vue

@@ -1,5 +1,5 @@
 <template>
-<div>
+<div class="home-wraper">
   <section class="content">
       <div class="device-status">
           <p><span class="icon white"></span><span class="txt">关机</span></p>
@@ -8,21 +8,23 @@
           <p><span class="icon yellow"></span><span class="txt">待机</span></p>
           <p><span class="icon red"></span><span class="txt">故障</span></p>
       </div>
-      <div class="list-box">
-        <div class="device" v-for="e in dataList" :key="e.device_code" :class="{bg1:e.is_run=='1',bg2:e.is_run=='0'}" @click="toOperation(e)"
-        >
-          <div class="device-top">
-            <div class="img">
-              <img v-if="e.device_icon !== ''" :src="e.device_icon" alt="">
-              <img v-else src="../../images/1.png" alt="">
+      <div class="list-box-wraper">
+        <div class="list-box">
+          <div class="device" v-for="e in dataList" :key="e.device_code" :class="{bg1:e.is_run=='1',bg2:e.is_run=='0'}" @click="toOperation(e)"
+          >
+            <div class="device-top">
+              <div class="img">
+                <img v-if="e.device_icon !== ''" :src="e.device_icon" alt="">
+                <img v-else src="../../images/1.png" alt="">
+              </div>
+            </div>
+            <div class="fl icon" :class="['white', 'blue', 'green', 'yellow', 'red'][Number(e.device_status) - 1]">
+            </div>
+            <div class="fl desc">
+              <p class="device_name">{{e.deviceName}}</p>
+              <p class="ellipsis">工单数: {{e.job_count}}</p>
+              <p class="ellipsis">当前工单: {{e.workorderCode}}</p>
             </div>
-          </div>
-          <div class="fl icon" :class="['white', 'blue', 'green', 'yellow', 'red'][Number(e.device_status) - 1]">
-          </div>
-          <div class="fl desc">
-            <p class="device_name">{{e.deviceName}}</p>
-            <p class="ellipsis">工单数: {{e.job_count}}</p>
-            <p class="ellipsis">当前工单: {{e.workorderCode}}</p>
           </div>
         </div>
       </div>
@@ -96,39 +98,49 @@ export default {
 .bg2
     background rgba(0,0,0,0.50)
     border 1px solid #7B7B7B
+.home-wraper
+  width 100%
+  height calc(100% - 46px)
 .content
     clear both
     box-sizing border-box
-    // height 5rem
-    width 7.9rem
+    width 100%
+    height 100%
+    padding 15px
     .device-status
-        text-align right
-        font-size .18rem
-        padding .1rem 0 0 .1rem
+        display flex
+        justify-content flex-end
+        height 32px
+        margin-bottom 15px
         p
-            display inline-block
-            text-align left
+            display flex
+            justify-content flex-start
+            align-items center
+            margin-left 5px
             .icon
                 display inline-block
-                width .2rem
-                height .2rem
-                border-radius .1rem
-                margin-top .08rem
+                width 14px
+                height 14px
+                border-radius 50%
+                line-height 32px
+                margin-right 5px
             .txt
                 display inline-block
-                line-height .4rem
-                margin-left .11rem
+                line-height 32px
+                font-size 14px
                 float right
                 color #fff
+    .list-box-wraper
+      height calc(100% - 47px)
+      overflow-y auto
     .list-box
-      padding-bottom .2rem
-      // height 4.6rem
-      // overflow-y scroll
+      width 100%
       .device
           display inline-block
           width 1.75rem
           margin 0 0 .15rem .19rem
           overflow hidden
+          background #1e307e
           .device-top
               box-sizing border-box
               height 1rem

src/pages/homeset/index.vue

@@ -1,5 +1,5 @@
 <template>
-<div>
+<div class="container">
   <header>
     <div class="left-box">
       <button class="fl logo iconfont dropdown_icon" ref="logo" @click="getInfo">登录人员： {{userName}}</button>
@@ -66,12 +66,11 @@ export default {
   position relative
 .logo
   position relative
-  max-width 50%
-  height .6rem
+  height 45px
   overflow hidden
   padding-right .3rem
-  line-height .6rem
-  font-size .2rem
+  line-height 45px
+  font-size 16px
   background none
   color #fff
 .dropdown-ul
@@ -93,21 +92,22 @@ export default {
         border-bottom none
 .date-box
   max-width 50%
-  height .6rem
+  height 45px
   overflow hidden
+  display flex
+  justify-content flex-end
+  align-items center
 .time
-  font-size .24rem
-  line-height .24rem
-  margin-top .09rem
-  text-align right
+  font-size 16px
+  line-height 24px
+  margin-right 10px
   color #fff
 .date
-  font-size .14rem
-  line-height .2rem
-  text-align right
+  font-size 16px
+  line-height 24px
   color #fff
 .week
-  font-size .14rem
+  font-size 16px
 .drift
   transition height .3s linear
 </style>

src/style/layout.styl

@@ -1,4 +1,5 @@
 @import 'iconfont.styl';
+@import 'mixin.styl'; 
 @font-face
   font-family 'iconfont';
   src url('iconfont/iconfont.eot');
@@ -76,47 +77,64 @@
 .radio_unselect_icon
   border 1px solid #1989fa
   background-color #fff
+.button
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background: #909399;
+  border: 1px solid #909399;
+  color: #ffffff;
+  -webkit-appearance: none;
+  text-align: center;
+  box-sizing: border-box;
+  outline: none;
+  margin: 0;
+  transition: .1s;
+  font-weight: 500;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  padding: 7px 12px;
+  font-size: 14px;
+  border-radius: 4px;
 .button--primary
-  min-width .6rem
-  height .3rem
-  line-height .3rem
-  font-size .15rem
-  color #ffffff
-  background-color #286666
-  padding 0 .1rem
-  border-radius 5px
+  background-color #67c23a
+  border-color #67c23a
 .button--defalut
   color #fff
   border 1px solid #c9c9c9
   background-color #c9c9c9
 
 /**header*/
+.container
+  _wh(100%, 100vh)
 header
-  height .6rem
-  padding 0 .05rem
-  border-bottom .02rem solid #15347b
-  box-shadow 0 1px 2px rgba(228, 243, 244, 0.5)
+  height 45px
+  padding 0 15px
+  border-bottom 1px solid rgb(255, 208, 75)
+  box-shadow 0 1px 2px rgba(255, 208, 75, 0.5)
+  _fj()
 .header-tip
-  line-height .6rem
-  font-size .2rem
+  line-height 32px
+  font-size 16px
   color #fff
-.header-btn
-  margin-top .15rem
 
 /**nav*/
 .tabs
   width 100%
-  font-size .18rem
-  line-height .4rem
-  height .4rem
+  height 34px
+  margin-bottom 10px
   li
     float left
-    width 1rem
+    line-height 32px
     text-align center
     a
       display inline-block
       color #fff
       width 100%
+      font-size 14px
+      padding 0 20px
     .router-link-active
       border-bottom 1px solid #15347b
       box-shadow 0 2px 0 rgba(228, 243, 244, 0.5)
@@ -124,22 +142,61 @@ header
 /**content*/
 .wrap
   width 100%
-  padding .05rem
-.wrap-filter
+  height calc(100% - 46px)
+  padding 15px
+.wrap-filter-buttons
   width 100%
-  height .5rem
-  color #fff
+  margin-bottom 15px
+.wrap-filters
+  display flex
+  justify-content space-between
+  width 100%
+  height 40px
+.wrap-buttons
+  width 100%
+  height 100%
+  margin 10px 0
+  text-align right
+.filter_item
+  width 49%
+  display flex
+  justify-content space-between
+.filter_label
+  _font(14px, 40px, #fff,,)
+  width 70px
+.filter_input
+  position relative
+  width calc(100% - 70px)
+  height 40px
+  line-height 40px
+.filter-input
+  _wh(100%, 40px)
+  _font(14px, 34px, #606266,,)
+  padding 3px 10px
+  border-radius 4px
+.grid_wraper
+  _wh(100%, calc(100% - 95px))
+  overflow-y auto
 .filter-table
   width 100%
-  border 1px solid #fff
-  margin .1rem 0
   text-align center
+  th
+    position: sticky;
+    top -1px
+    z-index 1
+    color #606266
+    background-color #8B90A6
   th,td
-    line-height .18rem
-    font-size .13rem
-    padding .05rem .01rem
-    border 1px solid #fff
+    line-height 18px
+    font-size 12px
+    padding 5px
     color #fff
+  td
+    border 1px solid #8B90A6
+    &:first-child
+      border-left 0
+    &:last-child
+      border-right 0
 .input
   width 1.8rem
   height .3rem
@@ -213,12 +270,12 @@ input::-webkit-input-placeholder
   line-height .16rem
   color #606266
   font-size .13rem
-.el-date-editor--daterange.el-input__inner
-  width 260px
-.el-select-dropdown__item
-  height .26rem !important
-  line-height .26rem !important
-  font-size .16rem !important
-.el-input__inner
-  height .3rem
-  line-height .3rem
+.el-range-editor.el-input__inner
+  width 100%
+// .el-select-dropdown__item
+//   height .26rem !important
+//   line-height .26rem !important
+//   font-size .16rem !important
+// .el-input__inner
+//   height .3rem
+//   line-height .3rem

src/style/mixin.styl

@@ -20,10 +20,11 @@ _font(size,height,color=$fc1,weight=normal,align=left)
   text-align: align
 
 //flex 布局和 子元素 对其方式
-_fj(x=space-between,y=center)
+_fj(x=space-between,y=center,z=row)
   display: flex
   justify-content: x
   align-items: y
+  flex-direction: z
 
 // 背景图片地址和大小
 _bis(url,w,h=auto,x=center,y=center)