Commit b09847f3 authored by 李苏's avatar 李苏 💬

优化界面

组件化
parent a214aa51
......@@ -10,6 +10,10 @@
{
"launchtype" : "local"
},
"mp-weixin" :
{
"launchtype" : "local"
},
"type" : "uniCloud"
}
]
......
<template>
<view class="infoCard">
<view class="infoCardTitle" v-if="title">
{{title}}
</view>
<view class="infoBody">
<view :class="itemWidth" v-for="(item,key) in info" :key="key">
<span :class="keyWidth">{{key|getKeys}}:</span><span>{{item||'暂无信息'}}</span>
</view>
<view class="noinfoCard" v-if="Object.keys(info).length==0" >
暂无信息
</view>
</view>
</view>
</template>
<script>
export default {
filters:{
getKeys: function(e) {
let keyList = {
"wlname":"物料名称",
"wlgg": "物料规格",
"wlph": "物料批号",
"tpcode":"托盘号",
"ztsl":"数量",
"wlcode":"物料编码",
"rwdh":"任务单号",
"rwzt":"任务状态",
"agvrwdh":"agv任务单号",
"agvrwzt":"agv任务状态",
};
return keyList[e]
},
},
props:{
keyWidth:{
default:"cardKey"
},
itemWidth:{
default:"infoBodyItem"
},
title:{
default:""
},
info:{
default:()=>{
return {
}
}
}
},
name:"InfoCard",
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
.noinfoCard{
width: 100%;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 16px;
color: #666;
}
.cardKey{
display: inline-block;
width: 60px;
text-align: right;
}
.cardKeyFull{
display: inline-block;
width: 50%;
text-align: right;
}
.infoCard{
background-color: white;
border-radius: 5px;
margin: 5px 4px 5px 4px;
border: 1px #ddd solid;
padding: 5px 0px 5px 0px;
box-shadow: 1px 1px 1px #888888;
.infoCardTitle{
font-size: 15px;
padding: 0px 20px 0px 20px;
border-bottom: 1px solid #ddd;
text-align: center;
line-height: 30px;
height: 30px;
font-weight: 550;
background-color: #a7a7a7;
color: #fff;
}
.infoBody{
display: flex;
flex-wrap: wrap;
.infoBodyItem{
width: 50%;
padding-left: 10px;
font-size: 14px;
height: 25px;
line-height: 25px;
}
.infoBodyItemFull{
width: 100%;
padding-left: 10px;
font-size: 14px;
height: 25px;
line-height: 25px;
}
}
}
</style>
\ No newline at end of file
<template>
<view style="overflow: auto;">
<view style="overflow: auto">
<view class="location_body" :style="bodyWidth" >
<view class="xList" v-for="(xitem,xindex) in xList" :key="xindex">
<!-- <view class="yList">
{{xindex+1}}
</view> -->
<view class="yList" :class="{qhkw:yitem&&yitem[0]&&searchSign(yitem).sign=='Y'}" v-for="(yitem,yindex) in xitem" :key="yindex">
<span>
{{(yitem&&yitem[0])?(searchSign(yitem)?searchSign(yitem).code:yitem[yitem.length-1].code):"空位"}}
{{(yitem&&yitem[0])?(searchSign(yitem)?searchSign(yitem).code:yitem[yitem.length-1].code):"空位"}}
</span>
</view>
</view>
......@@ -17,11 +14,10 @@
</template>
<script>
import LocationMain from '@/components/LocationInfo/LocationMain.vue'
export default {
name:"LocationInfo",
components:{
LocationMain
},
props:{
xList:{
......
<template>
<view class="main_body">
<view :class="{existItem:item==7}" class="mainItem" v-for="(item,index) in kwnum" :key="index">
<span >{{item==7?'7(3层)':item+"仓"}}</span>
</view>
</view>
</template>
<script>
export default {
name:"LocationMain",
props:{
kwnum:{
default:10
}
},
data() {
return {
};
}
}
</script>
<style lang="scss">
.main_body{
height: 100%;
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
.mainItem{
border: 1px solid #eee;
height: 40px;
line-height: 40px;
width: 41.3px;
}
.existItem{
color: #fff;
background-color:red;
}
}
</style>
\ No newline at end of file
<template>
<view class="stationAll">
<view class="stationBody" :class="{status1:itemInfo.status==1,status2:itemInfo.status==2,status3:itemInfo.status==3}">
<view class="item">{{itemInfo.stationname}}</view>
<view class="item">{{itemInfo.name}}</view>
<view class="item">{{itemInfo.status|getstatus}}</view>
</view>
<view class="stationSelect">
<view class="checkBody" v-if="isSelected">
<text class="lg text-gray checkItem" :class="'cuIcon-check'"></text>
</view>
</view>
</view>
</template>
<script>
export default {
props:{
isSelected:{
default:false
},
itemInfo:{
default:{
status:1,
stationname: "数据字段错误",
name: "数据字段错误"
}
}
},
name:"Station",
data() {
return {
};
},
filters: {
getstate: function(e) {
let state = {
"C": "完成",
"F": "确认",
"I": "初始"
}
return state[e]
},
getstatus: function(e) {
let ztList = {
"1": "正常",
"2": "已占用",
"3": "锁定"
};
return ztList[e]
},
getColor: function(e) {
let ztList = {
"1": "bg-green",
"2": "bg-red",
"3": "bg-orange"
};
return ztList[e]
},
formatTime: function(time) {
if (time != null && time != "") {
var date = new Date(time);
return date.Format("MM-dd hh:mm")
} else {
return "";
}
},
ztTrans: function(a) {
const ztList = {
"1": "空闲",
"2": "已占用",
"3": "锁定"
};
return ztList[a]
},
},
}
</script>
<style lang="scss" scoped>
.checkBody{
background-color:royalblue;
border-radius: 50%;
padding: 2px;
.checkItem{
color: #fff;
font-size: 14px;
}
}
.stationAll{
border: 0.5px solid #eee;
min-height: 130px;
padding: 10px;
}
.stationSelect{
height: 25%;
display: flex;
align-items: center;
justify-content: center;
}
.stationBody{
height: 75%;
padding: 10px;
display: flex;
flex-wrap: wrap;
flex-direction:column;
.item{
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
}
.stationBody:nth-child(1)
{
color: #fff;
border-radius: 5px;
}
.status1{
background-color: limegreen;
}
.status2{
background-color: crimson;
}
.status3{
background-color: orange;
}
</style>
\ No newline at end of file
......@@ -9,114 +9,82 @@
<text class="cuIcon-title text-orange "></text> 工位列表
</view>
</view>
<!-- 卡片 -->
<view class="home-content-h">
<scroll-view scroll-y="true">
<view class="cu-list grid " :class="['col-3']" style="">
<view class="cu-item " style="border: 0px solid #FFFFFF;" v-for="(item,index) in gwinfor" :key="index" @tap="selectedGw(index,item)" >
<view >
<view class="cu-card " >
<view class="cu-item " style="height: 125px;">
<view class="item padding text-center " :class="(item.status)|getColor(item.status)" style="">
<view class="text-lg r3-box">{{item.stationname}}</view>
<view class="margin-top-sm text-Abc" style="overflow: hidden;">{{item.name}}</view>
<view class="margin-top-sm text-Abc">{{(item.status)|getstatus(item.status)}}</view>
</view>
<view class="cu-item" v-show="index==gwSelcetdIndex">
<view class="cuIcon-roundcheckfill text-blue"></view>
</view>
</view>
</view>
</view>
</view>
<Station @tap.native="selectedGw(index,item)" v-for="(item,index) in gwinfor" :key="index+'GW'"
:isSelected="index==gwSelcetdIndex" :itemInfo="item">
</Station>
</view>
</scroll-view>
</view>
<!-- <view class="cu-form-group" @click="status=='1'?nextTo():null"> -->
<view class="cu-form-group" @click="nextTo()">
<view class="title ">物料</view>
<input disabled="" v-model="wlinfor.wlcode">{{wlinfor.wlcode?'物料已添加':'点击选择物料'}}<text class="lg text-gray" :class="'cuIcon-' + 'right'"></text></input>
</view>
<view class="flex flex-wrap padding bg-grey white radio">
<view class="basis-lg margin-top-xs margin-bottom-xs radius">名称:<span>{{wlinfor.wlname||""}}</span></view>
<view class="basis-sm margin-top-xs margin-bottom-xs radius"><span></span></view>
<view class="basis-lg margin-top-xs margin-bottom-xs radius">规格:<span>{{wlinfor.wlgg||""}}</span></view>
<view class="basis-sm margin-top-xs margin-bottom-xs radius">批号:<span>{{wlinfor.wlph||""}}</span></view>
<view class="basis-lg margin-top-xs margin-bottom-xs radius">托盘号:<span>{{wlinfor.tpcode||""}}</span></view>
<view class="basis-sm margin-top-xs margin-bottom-xs radius">数量:<span>{{wlinfor.ztsl||""}}</span></view>
</view>
<view class="cu-form-group justify-around" style="padding: 0;">
<view class="cu-form-group ">
<view class="title" style="padding: 0;">任务单号</view>
<input disabled="">{{rwdh||""}}</input>
</view>
<view class="cu-form-group" >
<view class="title " style="padding: 0;">任务状态</view>
<input disabled="">{{rwzt|getstate}}</input>
</view>
</view>
<view class="cu-form-group ">
<view class="title " style="padding: 0;">AGV任务单号</view>
<input disabled="" style="padding: 0;">{{agvrwdh||""}}</input>
</view>
<view class="cu-form-group ">
<view class="title " style="padding: 0;">AGV任务状态</view>
<input disabled="" style="padding: 0;">{{agvrwzt||""}}</input>
<input disabled="" v-model="wlinfor.wlcode">{{wlinfor.wlcode?'物料已添加':'点击选择物料'}}<text class="lg text-gray"
:class="'cuIcon-' + 'right'"></text></input>
</view>
<InfoCard :info="wlinfor" title="物料信息"></InfoCard>
<InfoCard :info="agvinfo" :keyWidth="'cardKeyFull'" :itemWidth="'infoBodyItemFull'" title="任务信息"></InfoCard>
<view class="padding flex align-center bg-white justify-around" v-if="gwObj.status==1">
<button class="cu-btn bg-gradual-green wid22" @tap="cmbt()">叫料</button>
<button class="cu-btn bg-gradual-red wid22" @tap="cancelbt()" >取消</button>
<button class="cu-btn bg-gradual-red wid22" @tap="cancelbt()">取消</button>
<button class="cu-btn bg-gradual-orange wid22" @tap="lockingbt()">锁定</button>
</view>
<view class="padding flex align-center bg-white justify-around" v-if="gwObj.status==3">
<button class="cu-btn bg-gradual-orange " @tap="lockingbt()">取消锁定</button>
</view>
<view class="padding flex align-center bg-white justify-around" v-if="gwObj.status==2">
<button class="cu-btn bg-gradual-red wid30" @tap="adjustbt()" >托盘调整</button>
<button class="cu-btn bg-gradual-red wid30" @tap="adjustbt()">托盘调整</button>
<button class="cu-btn bg-gradual-orange wid30" @tap="clearbt()">托盘清空</button>
<button class="cu-btn bg-gradual-orange wid30" @tap="clearbt()">回库</button>
</view>
</view>
</template>
<script>
import api from '@/api/api.js';
import eventBus from '@/common/util/eventBus.js'
import Station from '@/components/Station/Station.vue'
import InfoCard from '@/components/InfoCard/InfoCard.vue'
export default {
components: {
Station,
InfoCard
},
data() {
return {
agvrwdh:"",
agvrwzt:"",
rwdh:"",
rwzt:"",
interval_gwinfor:null,
gwinfor:[],
cxinfor:{id:"",
name:""},
wlinfor:{},
gwInterval:{status:0},
status:null,
agvinfo: {
},
interval_gwinfor: null,
gwinfor: [],
cxinfor: {
id: "",
name: ""
},
wlinfor: {},
gwInterval: {
status: 0
},
status: null,
modalName: null,
loadModal:false,
cxid:"",
cxmc:"产线",
formData:{
gwid:"",
rwdh:"",
rwzt:"",
loadModal: false,
cxid: "",
cxmc: "产线",
formData: {
gwid: "",
rwdh: "",
rwzt: "",
},
urls:{
gwquery:"jcsj/gw/query"
urls: {
gwquery: "jcsj/gw/query"
},
newGwList:[
],
gwList: [
],
gwObj:{
zt:0
newGwList: [],
gwList: [],
gwObj: {
zt: 0
},
gwSelcetdIndex:0,
gwSelcetdIndex: 0,
gridCol: 2,
gridBorder: false,
menuBorder: false,
......@@ -125,20 +93,20 @@
skin: false,
listTouchStart: 0,
listTouchDirection: null,
badge:0,
badge: 0,
TabCur: 0,
}
},
filters: {
getstate:function(e){
let state={
"C":"完成",
"F":"确认",
"I":"初始"
getstate: function(e) {
let state = {
"C": "完成",
"F": "确认",
"I": "初始"
}
return state[e]
},
getstatus:function(e){
getstatus: function(e) {
let ztList = {
"1": "正常",
"2": "已占用",
......@@ -146,7 +114,7 @@
};
return ztList[e]
},
getColor:function(e){
getColor: function(e) {
let ztList = {
"1": "bg-green",
"2": "bg-red",
......@@ -155,11 +123,10 @@
return ztList[e]
},
formatTime: function(time) {
if(time!=null&&time!="")
{
if (time != null && time != "") {
var date = new Date(time);
return date.Format("MM-dd hh:mm")
}else{
} else {
return "";
}
},
......@@ -175,21 +142,21 @@
methods: {
/* 清除物料信息可this.wlinfo={} */
/* 清除任务信息 */
emptyRwinfo(){
this.rwdh=""
this.rwzt=""
this.agvrwdh=""
this.agvrwzt=""
emptyRwinfo() {
this.rwdh = ""
this.rwzt = ""
this.agvrwdh = ""
this.agvrwzt = ""
},
/* 按钮 */
cmbt(){
let that=this
cmbt() {
let that = this
uni.showModal({
title: '提示',
content: '是否叫料',
cancelText: "否", // 取消按钮的文字
confirmText: "是", // 确认按钮的文字
success: function (res) {
success: function(res) {
if (res.confirm) {
console.log(that.wlinfor)
} else if (res.cancel) {
......@@ -198,13 +165,13 @@
}
});
},
cancelbt(){
cancelbt() {
uni.showModal({
title: '提示',
content: '是否取消',
cancelText: "否", // 取消按钮的文字
confirmText: "是", // 确认按钮的文字
success: function (res) {
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
......@@ -213,13 +180,13 @@
}
});
},
lockingbt(){
lockingbt() {
uni.showModal({
title: '提示',
content: '是否锁定',
cancelText: "否", // 取消按钮的文字
confirmText: "是", // 确认按钮的文字
success: function (res) {
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
......@@ -228,19 +195,21 @@
}
});
},
adjustbt(){
this.$Router.push({ path:'/pages/dl_tray_adjust/index', query:{
tpcode:"10020"
adjustbt() {
this.$Router.push({
path: '/pages/dl_tray_adjust/index',
query: {
tpcode: "10020"
},
})
},
clearbt(){
clearbt() {
uni.showModal({
title: '提示',
content: '是否清空托盘',
cancelText: "否", // 取消按钮的文字
confirmText: "是", // 确认按钮的文字
success: function (res) {
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
......@@ -249,92 +218,118 @@
}
});
},
interval(){
interval() {
// this.interval_gwinfor=setInterval(()=>{
// this.apiGetgwxx()
// },3000)
},
gotoBackPage(){
gotoBackPage() {
this.$Router.replace('/pages/gwjl/gwxz')
},
// 选择物料跳转
nextTo(){
nextTo() {
clearInterval(this.interval_gwinfor)
this.$Router.push({ path:'/pages/dl_cmaterial/xzwl', query:{
this.$Router.push({
path: '/pages/dl_cmaterial/xzwl',
query: {
},
})
},
selectedGw(e,item){
this.status=item.status
let _self=this;
selectedGw(e, item) {
this.status = item.status
let _self = this;
this.$forceUpdate()
_self.gwSelcetdIndex=e;
_self.gwObj=_self.gwinfor[e];
_self.formData.gwid=_self.gwObj.id;
if(this.status!=1){
_self.gwSelcetdIndex = e;
_self.gwObj = _self.gwinfor[e];
_self.formData.gwid = _self.gwObj.id;
if (this.status != 1) {
}else if(
this.status==1
){
} else if (
this.status == 1
) {
}
},
/* 查询工位 */
},
onLoad(e) {
this.a=0
setTimeout(()=>{
this.gwinfor=[{status:1,stationname:"测试站",name:"测试名称"},{status:2,stationname:"测试站",name:"测试名称"},{status:3,stationname:"测试站",name:"测试名称"}]
this.gwObj=this.gwinfor[0]
this.gwSelcetdIndex=0
this.a = 0
setTimeout(() => {
this.gwinfor = [{
status: 1,
stationname: "测试站",
name: "测试名称"
}, {
status: 2,
stationname: "测试站",
name: "测试名称"
}, {
status: 3,
stationname: "测试站",
name: "测试名称"
}, {
status: 1,
stationname: "测试站",
name: "测试名称"
}]
this.gwObj = this.gwinfor[0]
this.gwSelcetdIndex = 0
})
console.log("退回执行onload?")
eventBus.$on('sendInfo', function(data){
this.wlinfor=data.wlinfor
eventBus.$on('sendInfo', function(data) {
this.wlinfor = data.wlinfor
}.bind(this));
if(!e.query){
if (!e.query) {
return
}
let einfor =JSON.parse(e.query)
let einfor = JSON.parse(e.query)
},
onShow(){
this.interval_gwinfor=setInterval(()=>{console.log(this.a++)},1000)
onShow() {
this.interval_gwinfor = setInterval(() => {
}, 100000000000)
console.log('onshow')
},
onUnload(){
onUnload() {
console.log("onunload")
eventBus.$off('sendInfo')
clearInterval(this.interval_gwinfor)
},
onHide(){
onHide() {
console.log("onHide")
}
}
</script>
<style scoped>
.cu-form-group{
.cu-form-group {
min-height: 20px;
}
.cu-item{
padding: 0px!important;
.cu-item {
padding: 0px !important;
}
.b-right{
.b-right {
position: relative;
}
.hide{
.hide {
display: none;
}
.disable{
.disable {
background-color: #F5F5F5
}
.wid30{
.wid30 {
width: 30%;
}
.wid22{
.wid22 {
width: 22%;
}
</style>
......@@ -17,22 +17,15 @@
<text class="cuIcon-title text-orange "></text> 物料列表
</view>
</view>
<view class="bg-white " v-for="(item,index) in wlinfor" :key="index" @tap="nextTo(item)">
<view class="flex flex-wrap margin-bottom-xs padding bg-grey white radio">
<view class="wid50 margin-top-xs margin-bottom-xs radius">物料:<span>{{item.wlcode}} </span></view>
<view class="wid50 margin-top-xs margin-bottom-xs radius">名称:<span>{{item.wlname}}</span></view>
<view class="wid50 margin-top-xs margin-bottom-xs radius">规格:<span>{{item.wlgg}}</span></view>
<view class="wid50 margin-top-xs margin-bottom-xs radius">托盘号:<span>{{item.tpcode}}</span></view>
<view class="wid50 margin-top-xs margin-bottom-xs radius">批号:<span>{{item.wlph}}</span></view>
<view class="wid50 margin-top-xs margin-bottom-xs radius">剩余数量:<span>{{item.ztsl}}</span></view>
</view>
</view>
<InfoCard :info="item" :title="'序号:#'+(index+1)" v-for="(item,index) in wlinfor" :key="index+'keys'" @tap.native="nextTo(item)"></InfoCard>
</view>
</template>
<script>
import api from '@/api/api.js';
import InfoCard from '@/components/InfoCard/InfoCard.vue'
import eventBus from '@/common/util/eventBus.js'
export default {
data() {
......@@ -58,7 +51,6 @@
apiGetwl(){
let _self=this;
api.postData("xgwms/tpmx/queryWlxx",{
"ckid":_self.$ckid,
"condition":_self.serachName
}).then((resp) => {
if(resp.data.success){
......
......@@ -135,7 +135,7 @@
}
checkKwcode({code:this.code,kwid:this.rkdjlist[this.index].kwid}).then(e=>{
if(e){
if(that.code==that.rkdjlist[that.index].kwname&&e.records.zt=="L"){
if(that.code.toLowerCase()==that.rkdjlist[that.index].kwname.toLowerCase()&&e.records.zt=="L"){
return {rwid:that.rkdjlist[that.index].id,destKwid:e.records.id,text:"是否确认入库"}
}else if(e.code!=that.code&&e.records.zt=="E"){
return {rwid:that.rkdjlist[that.index].id,destKwid:e.records.id,text:"当前库位和已输库位不一致,是否入库"}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment