258 lines
6.3 KiB
Vue
258 lines
6.3 KiB
Vue
<template>
|
||
<view>
|
||
<view class="topTab">
|
||
<tabHeader title="首页" isShowBack="''"></tabHeader>
|
||
</view>
|
||
|
||
<view class="page-content">
|
||
<!-- <view class="top-header">
|
||
<view class="header-title">
|
||
<view style="font-size: 32rpx;font-weight: 600;">智慧工地</view>
|
||
<view style="font-size: 22rpx;color: #999;margin-top: 10rpx;">数字化管理，建设未来美好</view>
|
||
</view>
|
||
</view> -->
|
||
<view class="header-box">
|
||
<swiper style="overflow: hidden;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
|
||
<swiper-item v-for="(pics, index) in bgList" :key="index">
|
||
<image :src="pics.base64Url" mode="" style="width: 100%; height: 100%;"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<view class="center">
|
||
<view class="center-item" style="background-image: url('../../static/img/item1.png');" @click="goDevices()" v-if="permission.indexOf('devices')>-1">
|
||
<view class="title">设备领用</view>
|
||
<view class="tip">立即进入</view>
|
||
<view class="img">
|
||
<image src="../../static/img/back2.png" style="width: 25rpx;height: 25rpx;" alt="">
|
||
</view>
|
||
|
||
</view>
|
||
<view class="center-item" style="background-image: url('../../static/img/item2.png');" @click="goBracelet()" v-if="permission.indexOf('bracelet')>-1">
|
||
<view class="title">手环管理</view>
|
||
<view class="tip">立即进入</view>
|
||
<view class="img">
|
||
<image src="../../static/img/back2.png" style="width: 25rpx;height: 25rpx;" alt="">
|
||
</view>
|
||
|
||
</view>
|
||
<view class="center-item" style="background-image: url('../../static/img/item3.png');" @click="goSafeHat()" v-if="permission.indexOf('safehat')>-1">
|
||
<view class="title">智能安全帽</view>
|
||
<view class="tip">立即进入</view>
|
||
<view class="img">
|
||
<image src="../../static/img/back2.png" style="width: 25rpx;height: 25rpx;" alt="">
|
||
</view>
|
||
|
||
</view>
|
||
<view class="center-item" style="background-image: url('../../static/img/item4.png');" @click="goStaff()" v-if="permission.indexOf('staff')>-1">
|
||
<view class="title">现场人员</view>
|
||
<view class="tip">立即进入</view>
|
||
<view class="img">
|
||
<image src="../../static/img/back2.png" style="width: 25rpx;height: 25rpx;" alt="">
|
||
</view>
|
||
|
||
</view>
|
||
<view class="center-item" style="background-image: url('../../static/img/item5.png');" @click="goMonitor()" v-if="permission.indexOf('monitor')>-1">
|
||
<view class="title">吊车监控</view>
|
||
<view class="tip">立即进入</view>
|
||
<view class="img">
|
||
<image src="../../static/img/back2.png" style="width: 25rpx;height: 25rpx;" alt="">
|
||
</view>
|
||
|
||
</view>
|
||
<view class="center-item" style="background-image: url('../../static/img/item6.png');" @click="goAlarm()" v-if="permission.indexOf('alarm')>-1">
|
||
<view class="title">预警提醒</view>
|
||
<view class="tip">立即进入</view>
|
||
<view class="img">
|
||
<image src="../../static/img/back2.png" style="width: 25rpx;height: 25rpx;" alt="">
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { carouselList } from '@/service/url.js';
|
||
import tabHeader from '@/components/tab-Header.vue';
|
||
import AES from "@/utils/cryptoJs/aes.js";
|
||
export default {
|
||
components: {
|
||
tabHeader
|
||
},
|
||
data() {
|
||
return {
|
||
menuList:uni.getStorageSync('menuList')[0].children,
|
||
permission:'',
|
||
bgList: [
|
||
|
||
],
|
||
item:{
|
||
notice:"李四的来访预约，请审核",
|
||
date:"2023-10-23 03:44:56",
|
||
url:"@/static/monitor.png"
|
||
},
|
||
};
|
||
},
|
||
onShow() {
|
||
this.getPermission()
|
||
this.carouselList()
|
||
|
||
|
||
},
|
||
methods: {
|
||
getPermission(){
|
||
console.log(this.menuList)
|
||
let arr = this.menuList.map(item=>{
|
||
return item.path
|
||
})
|
||
this.permission=arr.join(',')
|
||
console.log(this.permission)
|
||
console.log(this.permission.indexOf('devices'))
|
||
this.$forceUpdate()
|
||
},
|
||
carouselList(){
|
||
let obj = {}
|
||
let param = {
|
||
// encryptedData: AES.encrypt(JSON.stringify(obj))
|
||
}
|
||
this.$http.get(carouselList,obj).then(res => {
|
||
if (res) {
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
this.bgList=res.data;
|
||
}
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
// this.$utils.showHttpError(error)
|
||
})
|
||
},
|
||
goDevices(){
|
||
console.log()
|
||
uni.navigateTo({
|
||
url: `/pages/devices/devices`
|
||
})
|
||
},
|
||
goBracelet(){
|
||
console.log('goBracelet')
|
||
uni.navigateTo({
|
||
url: '/pages/bracelet/bracelet'
|
||
})
|
||
},
|
||
goSafeHat(){
|
||
console.log('goSafeHat')
|
||
uni.navigateTo({
|
||
url: '/pages/safehat/safeHat'
|
||
})
|
||
},
|
||
goStaff(){
|
||
console.log('goStaff')
|
||
uni.navigateTo({
|
||
url: '/pages/staff/staff'
|
||
})
|
||
},
|
||
goMonitor(){
|
||
console.log('goMonitor')
|
||
uni.navigateTo({
|
||
url: '/pages/monitor/monitor'
|
||
})
|
||
},
|
||
goAlarm(){
|
||
console.log('goAlarm')
|
||
uni.navigateTo({
|
||
url: '/pages/alarm/alarm'
|
||
})
|
||
},
|
||
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.page-content{
|
||
width: 100%;
|
||
height: 90vh;
|
||
position: absolute;
|
||
top:5vh;
|
||
padding: 40rpx 0;
|
||
}
|
||
.top-header{
|
||
width: 94%;
|
||
height: 340rpx;
|
||
margin: 40rpx auto;
|
||
background-image: url('@/static/img/banner.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.header-title{
|
||
margin-left: 30rpx;
|
||
|
||
}
|
||
}
|
||
.header-box {
|
||
width: 100%;
|
||
height: 350rpx;
|
||
// color: #fff;
|
||
box-sizing: border-box;
|
||
padding: 20rpx;
|
||
margin-top: 20rpx;
|
||
border-radius: 20rpx;
|
||
uni-swiper{
|
||
height: 100%;
|
||
}
|
||
}
|
||
.center{
|
||
width: 94%;
|
||
height: 700rpx;
|
||
margin: 40rpx auto;
|
||
margin-top: 40rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
|
||
.center-item{
|
||
width: 48%;
|
||
height: 200rpx;
|
||
// border-radius: 16rpx;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
.title{
|
||
margin-top: 40rpx;
|
||
margin-left: 40rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
}
|
||
.tip{
|
||
margin-top: 10rpx;
|
||
margin-left: 40rpx;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
.img{
|
||
margin-top: 20rpx;
|
||
margin-left: 40rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
text-align: center;
|
||
border-radius: 30rpx;
|
||
background-color: #e0e0e0;
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
|
||
</style>
|