long/mes_mobile
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

调整项目框架

Browse Source
This commit is contained in:
龙运模
2024-04-23 11:48:55 +08:00
parent 01ea333978
commit 2b8797a1ac
26 changed files with 962 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
pages/index/index.vue
View File

@ -25,7 +25,7 @@
<view class="top">
▴2.89%
</view>
<view class="font22">
<view class="num font22">
1,567
</view>
</view>
@ -43,7 +43,7 @@
<view class="top">
▴2.89%
</view>
<view class="font22">
<view class="num font22">
1,567
</view>
</view>
@ -61,7 +61,7 @@
<view class="top">
▴2.89%
</view>
<view class="font22">
<view class="num font22">
1,567
</view>
</view>
@ -79,7 +79,7 @@
<view class="top">
▴2.89%
</view>
<view class="font22">
<view class="num font22">
1,567
</view>
</view>
@ -97,7 +97,7 @@
<view class="top">
▴2.89%
</view>
<view class="font22">
<view class="num font22">
1,567
</view>
</view>
@ -115,7 +115,7 @@
<view class="top">
▴2.89%
</view>
<view class="font22">
<view class="num font22">
1,567
</view>
</view>
@ -166,14 +166,6 @@
<view class="t-icon t-icon-shengchangongdan contenticon"></view>
<view class="contentname">生产工单</view>
</view>
<view class="content_module" @click="toSchedule()">
<view class="t-icon t-icon-gongdanjindu contenticon"></view>
<view class="contentname">工单进度</view>
</view>
<view class="content_module" @click="toMaterialYield()">
<view class="t-icon t-icon-gongdanchucaishuai contenticon"></view>
<view class="contentname">工单出材率</view>
</view>
<view class="content_module">
<view class="t-icon t-icon-shengchanbaobiao contenticon"></view>
<view class="contentname">生产报表</view>
@ -187,11 +179,19 @@
<view class="content_module">
<view class="t-icon t-icon-paichengguanli contenticon"></view>
<view class="contentname">排程管理</view>
</view>
<view class="content_module" @click="toSchedule()">
<view class="t-icon t-icon-gongdanjindu contenticon"></view>
<view class="contentname">工单进度</view>
</view>
<view class="content_module" @click="toMaterialYield()">
<view class="t-icon t-icon-gongdanchucaishuai contenticon"></view>
<view class="contentname">工单出材率</view>
</view>
<view class="content_module">
<!-- <view class="content_module">
<view class="t-icon t-icon-paichengshichang contenticon"></view>
<view class="contentname">排程时长</view>
</view>
</view> -->
</view>
</view>
<view class="content_box">
@ -205,8 +205,8 @@
<view class="t-icon t-icon-shebeizhuangtai contenticon"></view>
<view class="contentname">设备状态</view>
</view>
<view class="content_module">
<view class="t-icon t-icon-shebeibaoxiu contenticon" @click="toDeviceRepair()"></view>
<view class="content_module" @click="toDeviceRepair()">
<view class="t-icon t-icon-shebeibaoxiu contenticon"></view>
<view class="contentname">设备报修</view>
</view>
</view>
@ -300,7 +300,7 @@
.name{flex:1;}
.accounticon{
margin-right: 5px;
color: #fff;
color: $uni-text-color-inverse;
font-size: 20px;
}
.notifyicon{font-size: 20px;padding-right: 20px;}
@ -312,33 +312,43 @@
.content_title{line-height: 25px;font-size: 16px;padding: 15px 0;}
.device_data{display: flex;flex-wrap: wrap;
.device_module{
width: calc(50% - 12px); /* 计算每个块的宽度（根据需要调整）*/
width: calc(50% - 6px); /* 计算每个块的宽度（根据需要调整）*/
// background-color: #ccc; /* 设置背景色（根据需要调整）*/
background: $uni-bg-color-primary;
margin:6px;
background-color: #ccc; /* 设置背景色（根据需要调整）*/
padding: 10px;
background: #1C2755;
padding: 10px 14px;
border-radius: 8px;
display: flex;
.module_left{width: 60%;
.icon_background{width: 32px;height: 32px;background: #6576B7;border-radius: 8px; display: flex;align-items: center;justify-content: center;margin-bottom: 4px;}
.icon_background{width: 32px;height: 32px;background: $uni-bg-color-info;border-radius: 8px; display: flex;align-items: center;justify-content: center;margin-bottom: 4px;}
}
.module_right{width: 40%;
.top{float: right;font-size: 10px;padding: 2px 4px;background: rgba(103,194,58,0.3);border-radius: 4px;color: #67C23A;}
.top{
display: flex;flex-direction: column; font-size: 10px;padding: 2px 4px;background: rgba(103,194,58,0.3);border-radius: 4px;color: $uni-text-color-success;
}
.num{
margin-top: 6px;
}
}
}
.device_module:nth-child(even){
margin-right: 0;
}
.device_module:nth-child(odd){
margin-left: 0;
}
}
.energy_data{padding: 12px; height: 64px; display: flex;align-items: center;background: #1C2755;border-radius: 8px;
.energy_icon{color: #009688;font-size: 24px;margin-right: 8px;}
.energy_data{padding: 12px; height: 64px; display: flex;align-items: center;background: $uni-bg-color-primary;border-radius: 8px;
.energy_icon{color: $uni-text-color-primary;font-size: 24px;margin-right: 8px;}
.energy_image{flex: 1;text-align: center;
image{width: 86px;height: 32px;}
}
.energy_number{color: #FA3758;}
.energy_number{color: $uni-text-color-danger;}
}
.content_data{
// view{display: inline-block;width: 25%;}
padding: 10px 0;display: flex;position: relative;align-items: center;text-align: center;height: 98px;
padding: 10px 0;display: flex;position: relative;align-items: center;justify-content:flex-start;height: 98px;
.content_module{
width: 25%;margin: 10px 1%;height: 98px;display: flex;align-items: center;justify-content: center;flex-direction: column;background-color: #009688;border-radius: 8px;
width: calc(25% - 7px);margin: 10px 4px;height: 98px;display: flex;align-items: center;justify-content: center;flex-direction: column;background-color: $uni-color-primary;border-radius: 8px;
.contenticon{font-size: 24px;width: 32px;height: 32px;background-repeat: no-repeat;}
.contentname{padding-top: 2px;font-size: 12px;}
}

80
pages/index/materialYield.vue
View File

@ -1,50 +1,49 @@
<template>
<!-- 工单出材率 -->
<view class="page_padding font13">
<view v-for="(item,index) in list" :key="index" class="detail_list contentboxsty">
<view v-for="(item,index) in list" :key="index" class="detail_list contentboxsty" @click="toDetail(498)">
<view class="list_top">
<view class="top_left">
工单号:{{item.name}}
工单号：{{item.name}}
</view>
<view class="top_right">
工单详情 <text class="iconfont icon-gengduo"></text>
工单详情 <text class="arrow iconfont icon-gengduo"></text>
</view>
</view>
<view class="list_content font13">
<view class="list_centre">
<view class="list_row">
<view class="centre_left">
<text>加工规格</text>
<text>{{item.specs}}</text>
</view>
<view class="centre_right">
生产中
<text class="name">加工规格</text>
<text class="text">{{item.specs}}</text>
</view>
</view>
<view class="list_row">
<view class="centre_left">
<text>算法出材率</text>
<text>{{item.algorithm}}%</text>
<text class="name">算法出材率</text>
<text class="text">{{item.algorithm}}%</text>
</view>
</view>
</view>
<view class="list_below">
<view class="below_left">
<view class="">
出材率
</view>
<view class="percentage font24">
{{item.algorithm}}%
</view>
<view class="below_left">
<view class="circle-progress">
<view class="progressBg">
<view class="progressBox">
<view class="percentage font22">
{{item.algorithm}}%
</view>
<view class="title font12">
出材率
</view>
</view>
</view>
<view class="circle-progress__bar" :style="'--progress:'+item.algorithm+'%'"></view>
</view>
</view>
<!-- <view class="below_left">
<view class="">
算法出材率
</view>
<view class="percentage font24">
{{item.reality}}%
</view>
</view> -->
</view>
<view class="card_right">
<view class="status">生产中</view>
</view>
</view>
</view>
@ -57,7 +56,7 @@
return {
list:[{
name:'SO202401111004',
algorithm:'81.5',
algorithm:'51.5',
reality:'81.4',
state:'生产中',
specs:'4*9*3.66',
@ -75,7 +74,7 @@
number:'12.66m³'
},{
name:'SO202401111004',
algorithm:'81.5',
algorithm:'61.5',
reality:'81.4',
state:'生产中',
specs:'4*9*3.66',
@ -95,27 +94,28 @@
}
},
methods: {
toDetail(id){
uni.navigateTo({
url:'/pages/production/productionDetail?id='+id
})
},
}
}
</script>
<style lang="scss">
<style scoped lang="scss">
.detail_list{
// .list_top{display: flex;padding: 12px 0;border-bottom: 1px solid #2D3A6F;margin-bottom: 8px;
// .top_left{flex: 1;}
// }
.list_centre{
.list_row{display: flex;padding-bottom: 12px;
.centre_left{flex: 1;display: flex;
text:first-child{width:80px;}
.centre_left{
flex: 1;
.name{width:80px;display: inline-block;font-weight: bold;}
}
.centre_right{background: rgba(230,162,60,0.2);border-radius: 4px 4px 4px 4px;height: 20px;padding: 0 6px;color: #E6A23C;}
}
}
.list_below{display: flex;text-align: center;padding: 20px 0;
view{flex: 1;}
.percentage{color: #00B68D;}
.list_below{display: flex;text-align: center;padding: 20px 0;
.below_left{flex: 1;display: flex;align-items: center;justify-content: center;}
.percentage{color: $uni-text-color-inverse;}
}
}
</style>
}
</style>

87
pages/index/schedule.vue
View File

@ -1,62 +1,77 @@
<template>
<!-- 工单进度管理 -->
<view class="page_padding">
<view class="detail_list contentboxsty font13">
<view class="list_top">
<view class="top_left">
工单号:
</view>
<view class="top_right">
工单详情
</view>
</view>
<view class="list_content">
<view class="list_row">
<view class="row_left">
<view class="">开始时间：</view>
<view class="">24-01-12 08:00</view>
<view class="page_padding columnFlex">
<view class="headerView" :class="headerFixed?'headerViewFixed':''">
<searchView placeholder=" 搜索工单" />
</view>
<view class="flexBox">
<view class="detail_list contentboxsty font13" v-for="(item,index) in list" :key="index">
<view @click="toDetail(497)">
<view class="list_top">
<view class="top_left">
工单号：{{item.sn}}
</view>
<view class="top_right">
工单详情<text class="arrow iconfont icon-gengduo"></text>
</view>
</view>
<view class="row_right">
生产中
<view class="list_content">
<view class="list_row">
<text class="name">开始时间</text>
<text class="text">24-01-12 08:00</text>
</view>
<view class="list_row padd_top12">
<text class="name">计划完成</text>
<text class="text">24-01-12 08:00</text>
</view>
<view class="padd_top12">
<progressBar :total="100" :val="item.num" title="" />
</view>
<view class="card_right">
<view class="status">生产中</view>
</view>
</view>
</view>
<view class="list_row padd_top12">
<view class="">计划完成：</view>
<view class="">24-01-12 08:00</view>
</view>
<view class="padd_top12">
<progressBar :total="100" :val="20" title="" />
</view>
</view>
<!-- <annularProgressBar :progress_txt="20" :width="84" :height="69" title="出材率"/> -->
</view>
</view>
</view>
</template>
<script>
import progressBar from '/components/progressBar.vue'
import annularProgressBar from '/components/chocolate-progress-bar/chocolate-progress-bar.vue'
export default {
components: {
"progressBar":progressBar,
"annularProgressBar":annularProgressBar,
},
data() {
return {
list:[{name:''}]
list:[
{name:'',sn:"SO20240422000002",num:20},{name:'',sn:"SO20240422000002",num:70},{name:'',sn:"SO20240422000002",num:90},
{name:'',sn:"SO20240422000002",num:20},{name:'',sn:"SO20240422000002",num:70},{name:'',sn:"SO20240422000002",num:90}
]
}
},
methods: {
toDetail(id){
uni.navigateTo({
url:'/pages/production/productionDetail?id='+id
})
},
}
}
</script>
<style lang="scss">
<style scoped lang="scss">
.page_padding{
padding-top: 0;
}
.detail_list{
.list_content{
.list_row{display: flex;
.row_left{display: flex;}
.list_content{
.list_row{
.name{
width: 65px;
display: inline-block;
font-weight: bold;
}
}
}
}