实验室运维app端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

352 lines
8.2 KiB

<template>
<view class="page-css">
<u-navbar :is-back="false" title="工作台">
<view slot="right" @click="goPage('/pages/notice/index')">
<u-badge size="mini" type="error" count="7"></u-badge>
<u-icon name="chat" size="60" color="#3a62d7" :is-center="true" style="padding-right: 20rpx;">
</u-icon>
</view>
</u-navbar>
<!-- 通知公告 -->
<view class="notice_box" v-if="noticeList.length>0">
<u-notice-bar mode="horizontal" type="primary" :list="noticeList" :more-icon="true"
@getMore="getNotice()"></u-notice-bar>
</view>
<view class="">
<view class="banner-swiper" v-if="swiperList.length > 0">
<image :src="swiperList[0]" style="padding-right:12rpx;height:444rpx;width:100%"></image>
</view>
<view class="menu_box">
<view class="menu_title">工作台</view>
<view class="menu_list clearfix">
<view class="item_box" @click="goPage('/pages/inspection/plan')">
<view class="item_img">
<image src="@/static/images/home/left.svg" mode="aspectFit" />
</view>
<view class="item_txt">巡检计划</view>
</view>
<view class="item_box" @click="goPage('/pages/submission/records?type=submission')">
<view class="item_img">
<image src="@/static/images/home/left.svg" mode="aspectFit" />
</view>
<view class="item_txt">报送记录</view>
</view>
</view>
</view>
<view class="work-title">实验室巡检</view>
<swiperSlider></swiperSlider>
<view class="work-title">设备统计</view>
<eacharts_pie :data="pieInfo"></eacharts_pie>
<view class="work-title">检修单状态</view>
<!-- <view>
<alarm></alarm>
</view> -->
<view class="work-title">维修统计</view>
<view class="statistics">
<eacharts :type="'maintenanceStatistics'"></eacharts>
<eacharts :type="'maintenanceStatisticsPie'"></eacharts>
</view>
</view>
<betone-tabbar ref="tabbarRef" />
<betone-loading ref="BetLoading"></betone-loading>
</view>
</template>
<script>
import swiperSlider from "./components/swiper.vue";
import alarm from "./components/alarm.vue";
import eacharts from "./components/eacharts.vue";
import eacharts_pie from "./components/eacharts_pie.vue";
export default {
components: {
swiperSlider,
alarm,
eacharts,
eacharts_pie
},
data() {
return {
swiperList: [],
workList: [],
pieInfo: [],//饼图数据
noticeList: [
'寒雨连江夜入吴',
'平明送客楚山孤',
'洛阳亲友如相问',
'一片冰心在玉壶'
],//通知列表
};
},
onShow() {
this.$nextTick(() => {
this.$refs.tabbarRef.getPermission();
// this.BetLoading.show();
// setTimeout(() => {
// this.BetLoading.hide();
// }, 1000);
});
//工作台
this.getUserInfo()
this.getoverview()
},
methods: {
// 工作台 列表 overview
getoverview() {
this.$u.api.overview().then(res => {
if (res.code == 200) {
let data_ = res.data
data_.forEach(item => {
if (item.name.indexOf('巡检') > 0) {
item.pagePath = '/pages/inspection/plan'
item.img = require("@/static/images/home/lab_xj.png")
}
if (item.name.indexOf('记录') > 0) {
item.pagePath = '/pages/submission/records?type=submission'
item.img = require("@/static/images/home/bs_jl.png")
}
if (item.name.indexOf('报警') > 0) {
item.pagePath = ''
item.img = require("@/static/images/home/alarm.png")
}
});
data_.push({
name: "其他",
img: require("@/static/images/home/full.png"),
num: 0,
pagePath: ''
})
this.workList = data_
}
})
},
getUserInfo() {
this.$u.api.getUserInfo().then(res => {
if (res.code == 200) {
if (res.data?.backGroundPic != undefined) {
this.swiperList.push(res.data.backGroundPic)
} else {
this.swiperList.push(require("@/static/images/home/lab.png"))
}
}
}).catch(err => {
this.swiperList.push(require("@/static/images/home/lab.png"))
})
},
goPage(item) {
uni.navigateTo({
url: item,
});
},
scanCode() {
uni.scanCode({
success: (res) => {
console.log('扫码结果:' + res.result);
// 扫码成功后的操作,例如:
// this.handleScanResult(res.result);
},
fail: (err) => {
console.error('扫码失败:' + err);
}
});
},
// 饼图数据
pieStat() {
this.$u.api.pieStat().then(res => {
if (res.code == 200) {
this.pieInfo = res.data.fault
}
})
},
// 通知公告
getNotice() {
uni.navigateTo({
url: '/pages/notice/announcement',
});
}
},
};
</script>
<style lang="scss" scoped>
.page-css {
width: 100%;
// min-height: 100%;
padding: 0;
padding-top: var(--status-bar-height);
.banner-swiper {
margin-bottom: 32rpx;
position: relative;
.logo-txt {
color: rgba(255, 255, 255, 1);
font-size: 36rpx;
position: absolute;
top: 40rpx;
left: 20rpx;
z-index: 10;
}
.logo-scan {
position: absolute;
right: 20rpx;
top: 40rpx;
z-index: 10;
color: rgba(255, 255, 255, 1);
}
}
.work-title {
color: rgba(16, 16, 16, 1);
font-size: 32rpx;
padding: 0 0 32rpx 36rpx;
margin-top: 32rpx;
}
.workbench {
height: 210rpx;
position: relative;
display: flex;
justify-content: space-around;
margin: 0 40rpx 32rpx;
.workbench-item {
width: 150rpx;
height: 150rpx;
background-color: rgba(58, 98, 215, 0.57);
border-radius: 8rpx;
position: relative;
.workbench-item-icon {
width: 64rpx;
height: 64rpx;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
image {
width: 100%;
height: 100%;
}
}
}
.workbench-name {
width: 100%;
text-align: center;
font-size: 28rpx;
color: rgba(16, 16, 16, 1);
margin-top: 16rpx;
}
.badge {
// background-color: blue;
// color: white;
}
}
.statistics_pie {
width: 100%;
}
.menu_box {
width: 100%;
background: #fff;
position: relative;
&::after {
content: '';
position: absolute;
height: 4rpx;
width: 100%;
background: #38D79F;
position: absolute;
top: 0;
left: 0;
}
.menu_title {
height: 100rpx;
font-weight: 500;
font-size: 32rpx;
color: #333333;
line-height: 100rpx;
text-align: left;
font-style: normal;
margin: 0 32rpx;
position: relative;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 2rpx;
background: #f5f5f5;
width: 100%;
}
}
.menu_list {
padding-bottom: 32rpx;
margin-left: 32rpx;
margin-right: 32rpx;
margin-top: 24rpx;
.item_box {
width: 50%;
float: left;
&:nth-child(1) {
position: relative;
&::after {
content: '';
position: absolute;
width: 4rpx;
height: 100%;
background: #f5f5f5;
right: 20rpx;
top: 0;
}
}
.item_img {
width: 64rpx;
height: 64rpx;
float: left;
image {
width: 100%;
height: 100%;
}
}
.item_txt {
font-weight: 400;
font-size: 32rpx;
color: #333333;
line-height: 64rpx;
text-align: left;
font-style: normal;
padding-left: 20rpx;
float: left;
}
}
}
}
.notice_box {
width: 100%;
background: #fff;
}
}
</style>