146 lines
3.4 KiB
Vue
146 lines
3.4 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="tui-header">
|
||
<view class="tui-sub-title" style="padding-bottom: 20rpx;">场站总数</view>
|
||
<view class="tui-title">{{terminal_count}}</view>
|
||
<view class="tui-sub-title" style="padding-top: 20rpx;">闸门调控次数：{{total_gate_count}} 水泵调控次数：{{total_pump_count}} </view>
|
||
</view>
|
||
<tui-grid>
|
||
<block v-for="(item,index) in routers" :key="index">
|
||
<navigator :url="item.url" hover-class='none'>
|
||
<tui-grid-item>
|
||
<view class="tui-grid-icon">
|
||
<image class="tui-grid-img" :src="apiHost+'/miniapp/static/wsapp/'+item.img" :style="{width:item.width+'rpx',height:item.height+'rpx'}" ></image>
|
||
</view>
|
||
<text class="tui-grid-label">{{item.name}}</text>
|
||
</tui-grid-item>
|
||
</navigator>
|
||
</block>
|
||
</tui-grid>
|
||
<tui-tabbar :current="tabbarCurrent" backdropFilter :backgroundColor="tabbarBackgroundColor" :tabBar="tabBar" color="#777" selectedColor="#AC9157" @click="tabbarSwitch"></tui-tabbar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import myapp from '@/common/js/myapp.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
apiHost: myapp.apiHost,
|
||
terminal_count: '',
|
||
total_gate_count: '',
|
||
total_pump_count: '',
|
||
routers: [{
|
||
name: '总览',
|
||
url: '/packagePage/pages/overview/overview',
|
||
img: "nav1.png",
|
||
width: 74,
|
||
height: 74
|
||
},
|
||
{
|
||
name: '远程调控',
|
||
url: '/packagePage/pages/ctrllist/ctrllist',
|
||
img: "nav2.png",
|
||
width: 74,
|
||
height: 74
|
||
},
|
||
{
|
||
name: '曝气机',
|
||
url: '/packagePage/pages/aerator/aerator',
|
||
img: "nav3.png",
|
||
width: 74,
|
||
height: 74
|
||
},
|
||
{
|
||
name: '数据分析',
|
||
url: '/packagePage/pages/wait/wait',
|
||
img: "nav4.png",
|
||
width: 74,
|
||
height: 74
|
||
}
|
||
],
|
||
tabBar: myapp.tabBar,
|
||
tabbarCurrent: 0,
|
||
tabbarBackgroundColor: '#FFF'
|
||
}
|
||
},
|
||
onShow: function() {
|
||
// 验证登录信息是否过期
|
||
let user = myapp.checkLogin()
|
||
|
||
// 将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容
|
||
uni.setStorageSync('lastPagePath', '/pages/index/index')
|
||
let that = this;
|
||
// 获取场站基本信息
|
||
myapp.request('/?c=overview&a=getProjectBasicInfo',function(res) {
|
||
that.terminal_count = res.data.data.terminal_count
|
||
that.total_gate_count = res.data.data.total_gate_count
|
||
that.total_pump_count = res.data.data.total_pump_count
|
||
},{token:user.token})
|
||
},
|
||
methods: {
|
||
tabbarSwitch: myapp.tabbarSwitch,
|
||
exitauth: function() {
|
||
uni.removeStorageSync('user');
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #F5F6FA;
|
||
}
|
||
|
||
.tui-header {
|
||
padding: 80rpx 60rpx;
|
||
}
|
||
|
||
.tui-title {
|
||
font-size: 46rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tui-sub-title {
|
||
font-size: 26rpx;
|
||
color: #7a7a7a;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.tui-grid-icon {
|
||
width: 100%;
|
||
height: 74rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.tui-grid-label {
|
||
margin-top: 10rpx;
|
||
display: block;
|
||
text-align: center;
|
||
font-weight: 400;
|
||
color: #333;
|
||
font-size: 28rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.btnExit {
|
||
color: #FFF;
|
||
background-color: #5C5EC3;
|
||
padding-left: 10rpx;
|
||
padding-right: 10rpx;
|
||
padding-top: 5rpx;
|
||
padding-bottom: 5rpx;
|
||
position: absolute;
|
||
right: 40rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
</style>
|