root/aio-hl-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式

Browse Source
This commit is contained in:
caill
2023-05-19 13:51:43 +08:00
parent da23c161bb
commit abef67aa55
8 changed files with 287 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/SecHeader.vue
View File

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

1
src/config/rem.js
View File

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

74
src/pages/assignment/Operation.vue
View File

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

159
src/pages/assignment/workordermanage.vue
View File

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

74
src/pages/homeset/Home.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div> <div class="home-wraper">
<section class="content"> <section class="content">
<div class="device-status"> <div class="device-status">
<p><span class="icon white"></span><span class="txt">关机</span></p> <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 yellow"></span><span class="txt">待机</span></p>
<p><span class="icon red"></span><span class="txt">故障</span></p> <p><span class="icon red"></span><span class="txt">故障</span></p>
</div> </div>
<div class="list-box"> <div class="list-box-wraper">
<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="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"> <div class="device-top">
<img v-if="e.device_icon !== ''" :src="e.device_icon" alt=""> <div class="img">
<img v-else src="../../images/1.png" alt=""> <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>
<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> </div>
</div> </div>
@@ -96,39 +98,49 @@ export default {
.bg2 .bg2
background rgba(0,0,0,0.50) background rgba(0,0,0,0.50)
border 1px solid #7B7B7B border 1px solid #7B7B7B
.home-wraper
width 100%
height calc(100% - 46px)
.content .content
clear both clear both
box-sizing border-box box-sizing border-box
// height 5rem width 100%
width 7.9rem height 100%
padding 15px
.device-status .device-status
text-align right display flex
font-size .18rem justify-content flex-end
padding .1rem 0 0 .1rem height 32px
margin-bottom 15px
p p
display inline-block display flex
text-align left justify-content flex-start
align-items center
margin-left 5px
.icon .icon
display inline-block display inline-block
width .2rem width 14px
height .2rem height 14px
border-radius .1rem border-radius 50%
margin-top .08rem line-height 32px
margin-right 5px
.txt .txt
display inline-block display inline-block
line-height .4rem line-height 32px
margin-left .11rem font-size 14px
float right float right
color #fff color #fff
.list-box-wraper
height calc(100% - 47px)
overflow-y auto
.list-box .list-box
padding-bottom .2rem width 100%
// height 4.6rem
// overflow-y scroll
.device .device
display inline-block display inline-block
width 1.75rem width 1.75rem
margin 0 0 .15rem .19rem margin 0 0 .15rem .19rem
overflow hidden overflow hidden
background #1e307e
.device-top .device-top
box-sizing border-box box-sizing border-box
height 1rem height 1rem

28
src/pages/homeset/index.vue
View File

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

135
src/style/layout.styl
View File

@@ -1,4 +1,5 @@
@import 'iconfont.styl'; @import 'iconfont.styl';
@import 'mixin.styl';
@font-face @font-face
font-family 'iconfont'; font-family 'iconfont';
src url('iconfont/iconfont.eot'); src url('iconfont/iconfont.eot');
@@ -76,47 +77,64 @@
.radio_unselect_icon .radio_unselect_icon
border 1px solid #1989fa border 1px solid #1989fa
background-color #fff 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 .button--primary
min-width .6rem background-color #67c23a
height .3rem border-color #67c23a
line-height .3rem
font-size .15rem
color #ffffff
background-color #286666
padding 0 .1rem
border-radius 5px
.button--defalut .button--defalut
color #fff color #fff
border 1px solid #c9c9c9 border 1px solid #c9c9c9
background-color #c9c9c9 background-color #c9c9c9
/**header*/ /**header*/
.container
_wh(100%, 100vh)
header header
height .6rem height 45px
padding 0 .05rem padding 0 15px
border-bottom .02rem solid #15347b border-bottom 1px solid rgb(255, 208, 75)
box-shadow 0 1px 2px rgba(228, 243, 244, 0.5) box-shadow 0 1px 2px rgba(255, 208, 75, 0.5)
_fj()
.header-tip .header-tip
line-height .6rem line-height 32px
font-size .2rem font-size 16px
color #fff color #fff
.header-btn
margin-top .15rem
/**nav*/ /**nav*/
.tabs .tabs
width 100% width 100%
font-size .18rem height 34px
line-height .4rem margin-bottom 10px
height .4rem
li li
float left float left
width 1rem line-height 32px
text-align center text-align center
a a
display inline-block display inline-block
color #fff color #fff
width 100% width 100%
font-size 14px
padding 0 20px
.router-link-active .router-link-active
border-bottom 1px solid #15347b border-bottom 1px solid #15347b
box-shadow 0 2px 0 rgba(228, 243, 244, 0.5) box-shadow 0 2px 0 rgba(228, 243, 244, 0.5)
@@ -124,22 +142,61 @@ header
/**content*/ /**content*/
.wrap .wrap
width 100% width 100%
padding .05rem height calc(100% - 46px)
.wrap-filter padding 15px
.wrap-filter-buttons
width 100% width 100%
height .5rem margin-bottom 15px
color #fff .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 .filter-table
width 100% width 100%
border 1px solid #fff
margin .1rem 0
text-align center text-align center
th
position: sticky;
top -1px
z-index 1
color #606266
background-color #8B90A6
th,td th,td
line-height .18rem line-height 18px
font-size .13rem font-size 12px
padding .05rem .01rem padding 5px
border 1px solid #fff
color #fff color #fff
td
border 1px solid #8B90A6
&:first-child
border-left 0
&:last-child
border-right 0
.input .input
width 1.8rem width 1.8rem
height .3rem height .3rem
@@ -213,12 +270,12 @@ input::-webkit-input-placeholder
line-height .16rem line-height .16rem
color #606266 color #606266
font-size .13rem font-size .13rem
.el-date-editor--daterange.el-input__inner .el-range-editor.el-input__inner
width 260px width 100%
.el-select-dropdown__item // .el-select-dropdown__item
height .26rem !important // height .26rem !important
line-height .26rem !important // line-height .26rem !important
font-size .16rem !important // font-size .16rem !important
.el-input__inner // .el-input__inner
height .3rem // height .3rem
line-height .3rem // line-height .3rem

3
src/style/mixin.styl
View File

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