364 lines
10 KiB
Vue
364 lines
10 KiB
Vue
<template>
|
||
|
||
<view class="container home">
|
||
<view class="home_head">
|
||
<view class="iconfont icon-chaojiguanliyuan accounticon"></view>
|
||
<view class="name" v-if="userName==''" @click="toLogin()">未登录</view>
|
||
<view class="name" v-else>{{userName}} </view>
|
||
<view class="iconfont icon-xiaoxitongzhi notifyicon" @click="toMessage()"></view>
|
||
<view class="iconfont icon-shezhi setupicon"></view>
|
||
</view>
|
||
<view class="home_content">
|
||
<view class="content_box">
|
||
<view class="content_title">设备信息</view>
|
||
<view class="device_data">
|
||
<view class="device_module">
|
||
<view class="module_left">
|
||
<view class="icon_background">
|
||
<view class="iconfont icon-WIFI_on contenticon"></view>
|
||
</view>
|
||
<view class="font13">
|
||
在线设备
|
||
</view>
|
||
</view>
|
||
<view class="module_right">
|
||
<view class="top">
|
||
▴2.89%
|
||
</view>
|
||
<view class="num font22">
|
||
1,567
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="device_module">
|
||
<view class="module_left">
|
||
<view class="icon_background">
|
||
<view class="iconfont icon-WIFI_off contenticon"></view>
|
||
</view>
|
||
<view class="font13">
|
||
离线设备
|
||
</view>
|
||
</view>
|
||
<view class="module_right">
|
||
<view class="top">
|
||
▴2.89%
|
||
</view>
|
||
<view class="num font22">
|
||
1,567
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="device_module">
|
||
<view class="module_left">
|
||
<view class="icon_background">
|
||
<view class="iconfont icon-setting contenticon"></view>
|
||
</view>
|
||
<view class="font13">
|
||
维修保养
|
||
</view>
|
||
</view>
|
||
<view class="module_right">
|
||
<view class="top">
|
||
▴2.89%
|
||
</view>
|
||
<view class="num font22">
|
||
1,567
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="device_module">
|
||
<view class="module_left">
|
||
<view class="icon_background">
|
||
<view class="iconfont icon-broken contenticon"></view>
|
||
</view>
|
||
<view class="font13">
|
||
故障频次
|
||
</view>
|
||
</view>
|
||
<view class="module_right">
|
||
<view class="top">
|
||
▴2.89%
|
||
</view>
|
||
<view class="num font22">
|
||
1,567
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="device_module">
|
||
<view class="module_left">
|
||
<view class="icon_background">
|
||
<view class="iconfont icon-brokenrate contenticon"></view>
|
||
</view>
|
||
<view class="font13">
|
||
设备故障率
|
||
</view>
|
||
</view>
|
||
<view class="module_right">
|
||
<view class="top">
|
||
▴2.89%
|
||
</view>
|
||
<view class="num font22">
|
||
1,567
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="device_module">
|
||
<view class="module_left">
|
||
<view class="icon_background">
|
||
<view class="iconfont icon-weixiubaoyangpinshuai contenticon"></view>
|
||
</view>
|
||
<view class="font13">
|
||
维修保养频率
|
||
</view>
|
||
</view>
|
||
<view class="module_right">
|
||
<view class="top">
|
||
▴2.89%
|
||
</view>
|
||
<view class="num font22">
|
||
1,567
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="content_box">
|
||
<view class="content_title">能耗信息</view>
|
||
<view class="energy_data">
|
||
<view class="iconfont icon-dianliang energy_icon"></view>
|
||
<view class="energy_name">
|
||
<view class="font13">
|
||
用电量
|
||
</view>
|
||
<view class="font14">
|
||
345.00
|
||
</view>
|
||
</view>
|
||
<view class="energy_image">
|
||
<image src="http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/yongdian.png" alt="" />
|
||
</view>
|
||
<view class="energy_number font20">
|
||
41.443
|
||
</view>
|
||
</view>
|
||
<view class="energy_data mar_top12">
|
||
<view class="iconfont icon-yasuokongqi energy_icon"></view>
|
||
<view class="energy_name">
|
||
<view class="font13">
|
||
用气量
|
||
</view>
|
||
<view class="font14">
|
||
345.00
|
||
</view>
|
||
</view>
|
||
<view class="energy_image">
|
||
<image src="http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/yongqi.png" alt="" />
|
||
</view>
|
||
<view class="energy_number font20">
|
||
41.443
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="content_box">
|
||
<view class="content_title">工单管理</view>
|
||
<view class="content_data">
|
||
<view class="content_module" @click="toProductionOrder()">
|
||
<view class="t-icon t-icon-shengchangongdan contenticon"></view>
|
||
<view class="contentname">生产工单</view>
|
||
</view>
|
||
<view class="content_module">
|
||
<view class="t-icon t-icon-shengchanbaobiao contenticon"></view>
|
||
<view class="contentname">生产报表</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="content_box">
|
||
<view class="content_title">生产排程</view>
|
||
<view class="content_data">
|
||
<view class="content_module" @click="toSchedul()">
|
||
<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="t-icon t-icon-paichengshichang contenticon"></view>
|
||
<view class="contentname">排程时长</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="content_box">
|
||
<view class="content_title">设备管理</view>
|
||
<view class="content_data">
|
||
<view class="content_module" @click="toEquipmentManage()">
|
||
<view class="t-icon t-icon-shebeiguanli contenticon"></view>
|
||
<view class="contentname">设备管理</view>
|
||
</view>
|
||
<view class="content_module" @click="toDeviceStatus()">
|
||
<view class="t-icon t-icon-shebeizhuangtai contenticon"></view>
|
||
<view class="contentname">设备状态</view>
|
||
</view>
|
||
<view class="content_module" @click="toDeviceRepair()">
|
||
<view class="t-icon t-icon-shebeibaoxiu contenticon"></view>
|
||
<view class="contentname">设备报修</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<tab-bar :current-page="0"></tab-bar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import tabBar from "@/components/customTabBar/index"
|
||
export default {
|
||
components:{
|
||
tabBar
|
||
},
|
||
data() {
|
||
return {
|
||
userName: '',
|
||
}
|
||
},
|
||
// onLoad() {
|
||
// this.userName = uni.getStorageSync('demu_mes_user_name')
|
||
// },
|
||
onShow(){
|
||
this.userName = uni.getStorageSync('demu_mes_user_name')
|
||
},
|
||
// created() {
|
||
// },
|
||
mounted() {
|
||
this.userName = uni.getStorageSync('demu_mes_user_name')
|
||
|
||
},
|
||
methods: {
|
||
//
|
||
toLogin(){
|
||
uni.navigateTo({
|
||
url:'/pages/login/login'
|
||
})
|
||
},
|
||
//跳转消息页
|
||
toMessage(){
|
||
uni.navigateTo({
|
||
url: '/pages/index/message'
|
||
})
|
||
},
|
||
//跳转生产工单页
|
||
toProductionOrder(){
|
||
uni.navigateTo({
|
||
url:'/pages/production/productionOrder'
|
||
})
|
||
},
|
||
// 工单排程
|
||
toSchedul(){
|
||
uni.navigateTo({
|
||
url:'/pages/schedul/list'
|
||
})
|
||
},
|
||
//跳转工单进度页
|
||
toSchedule(){
|
||
uni.navigateTo({
|
||
url:'/pages/index/schedule'
|
||
})
|
||
},
|
||
//跳转工单出材率页
|
||
toMaterialYield(){
|
||
uni.navigateTo({
|
||
url:'/pages/index/materialYield'
|
||
})
|
||
},
|
||
//跳转设备管理页面
|
||
toEquipmentManage(){
|
||
uni.navigateTo({
|
||
url:'/pages/equipmentManage/equipmentManage'
|
||
})
|
||
},
|
||
//跳转设备报修页
|
||
toDeviceRepair(){
|
||
uni.navigateTo({
|
||
url:'/pages/deviceRepair/deviceRepair'
|
||
})
|
||
},
|
||
//跳转设备状态
|
||
toDeviceStatus(){
|
||
uni.navigateTo({
|
||
url:'/pages/deviceStatus/deviceStatus'
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
.home {padding: 0 10px;font-size: 14px;
|
||
.home_head{height: 40px;display: flex;position: relative;align-items: center;padding-bottom: 5px;
|
||
.name{flex:1;}
|
||
.accounticon{
|
||
margin-right: 5px;
|
||
color: $uni-text-color-inverse;
|
||
font-size: 20px;
|
||
}
|
||
.notifyicon{font-size: 20px;padding-right: 20px;}
|
||
.setupicon{font-size: 20px;}
|
||
}
|
||
}
|
||
|
||
.home_content{padding-bottom: 100px;
|
||
.content_title{line-height: 25px;font-size: 16px;padding: 15px 0;}
|
||
.device_data{display: flex;flex-wrap: wrap;
|
||
.device_module{
|
||
width: calc(50% - 6px); /* 计算每个块的宽度（根据需要调整）*/
|
||
// background-color: #ccc; /* 设置背景色（根据需要调整）*/
|
||
background: $uni-bg-color-primary;
|
||
margin:6px;
|
||
padding: 10px 14px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
.module_left{width: 60%;
|
||
.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{
|
||
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: $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: $uni-text-color-danger;}
|
||
}
|
||
.content_data{
|
||
padding: 10px 0;display: flex;position: relative;align-items: center;justify-content:flex-start;height: 98px;
|
||
.content_module{
|
||
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;}
|
||
}
|
||
}
|
||
}
|
||
</style>
|