index.vue 5.26 KB
<template>
	<view class="index-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view>
			<!-- 基础统计 -->
			<view class="basic-sty">
				<view class="basic-text"><text class="text">基础统计</text></view>
				<view class="basic">
					<view class="basic-item">
						<view class="item-child-top u-flex">
							<image class="item-image" src="../../static/device-total.png"></image>
							<text class="item-text" style="">设备统计</text>
						</view>
						<view class="item-child-bottom u-flex">
							<view @click="navigatorDeviceStatus('ONLINE')" class="u-flex sigle-child">
								<view class="sigle-text">
									<text>{{ deviceData.onLine }}</text>
								</view>
								<view class="sigle-value"><text>在线</text></view>
							</view>
							<view @click="navigatorDeviceStatus('OFFLINE')" class="u-flex sigle-child">
								<view class="sigle-text">
									<text>{{ deviceData.unLine }}</text>
								</view>
								<view class="sigle-value"><text>离线</text></view>
							</view>
							<view @click="navigatorDeviceStatus('INACTIVE')" class="u-flex sigle-child">
								<view class="sigle-text">
									<text>{{ deviceData.noActive }}</text>
								</view>
								<view class="sigle-value"><text>待激活</text></view>
							</view>
						</view>
					</view>
					<view class="basic-item">
						<view class="item-child-top u-flex">
							<image class="item-image" src="../../static/alert.png"></image>
							<text class="item-text">告警统计</text>
						</view>
						<view class="item-child-bottom u-flex">
							<view @click="navatorAlertUnhandle()" class="u-flex sigle-child">
								<view class="sigle-text">
									<text>{{ alertData.noHandle }}</text>
								</view>
								<view class="sigle-value"><text>未处理</text></view>
							</view>
							<view @click="navatorAlertHandle('CLEARED_ACK')" class="u-flex sigle-child">
								<view class="sigle-text">
									<text>{{ alertData.doneHandle }}</text>
								</view>
								<view class="sigle-value"><text>已处理</text></view>
							</view>
							<view @click="navatorAlertFalseAlarm('CLEARED_UNACK')" class="u-flex sigle-child">
								<view class="sigle-text">
									<text>{{ alertData.errorReport }}</text>
								</view>
								<view class="sigle-value"><text>误报</text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 基础统计 -->
			<!-- 四宫格 -->
			<view class="grid-container">
				<view class="grid-item">
					<view class="item-center">
						<view class="center"><image class="image" src="../../static/form.png"></image></view>
						<view class="center-text"><text class="text">维修工单</text></view>
					</view>
				</view>
				<view @click="openCamera" class="grid-item">
					<view class="item-center">
						<view class="center"><image class="image" src="../../static/camer.png"></image></view>
						<view class="center-text"><text class="text" style="">摄像头管理</text></view>
					</view>
				</view>
				<view class="grid-item">
					<view class="item-center">
						<view class="center"><image class="image" src="../../static/device.png"></image></view>
						<view class="center-text"><text class="text">设备接入</text></view>
					</view>
				</view>
				<view @click="openOrgStatus" class="grid-item">
					<view class="item-center">
						<view class="center"><image class="image" src="../../static/status.png"></image></view>
						<view class="center-text"><text class="text">组态</text></view>
					</view>
				</view>
			</view>
			<!-- 四宫格 -->
		</view>
		<f-tabbar></f-tabbar>
	</view>
</template>

<script>
import fTabbar from '@/components/module/f-tabbar/f-tabbar';

export default {
	components: {
		fTabbar
	},
	data() {
		return {
			deviceData: {
				onLine: 0,
				unLine: 0,
				noActive: 0
			},
			alertData: {
				noHandle: 0,
				doneHandle: 0,
				errorReport: 0
			}
		};
	},
	onLoad() {
		// 隐藏原生的tabbar
		uni.hideTabBar();
		this.getDeviceTotalData();
	},
	methods: {
		getDeviceTotalData() {
			uni.$u.http
				.get('/yt/homepage/app')
				.then(res => {
					if (res) {
						this.deviceData.onLine = res.totalDevice.onLine;
						this.deviceData.unLine = res.totalDevice.offLine;
						this.deviceData.noActive = res.totalDevice.inActive;
						this.alertData.noHandle = res.totalAlarm.activedAlarm;
						this.alertData.doneHandle = res.totalAlarm.clearedAck;
						this.alertData.errorReport = res.totalAlarm.clearedUnack;
					}
				})
				.catch(e => {
					// uni.$u.toast(e.data?.message);
				});
		},
		openCamera() {
			uni.navigateTo({
				url: 'camera/camera'
			});
		},
		openOrgStatus() {
			uni.navigateTo({
				url: 'configuration/configuration'
			});
		},
		navatorAlertUnhandle() {
			let obj = ['ACTIVE_UNACK', 'ACTIVE_ACK'];
			uni.reLaunch({
				url: '../alarm/alarm?type=' + JSON.stringify(obj)
			});
		},
		navatorAlertHandle(e) {
			uni.reLaunch({
				url: '../alarm/alarm?type=' + JSON.stringify(e)
			});
		},
		navatorAlertFalseAlarm(e) {
			uni.reLaunch({
				url: '../alarm/alarm?type=' + JSON.stringify(e)
			});
		},
		//设备状态查询
		navigatorDeviceStatus(e) {
			uni.reLaunch({
				url: '../device/device?type=' + JSON.stringify(e)
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import './static/index.scss';
</style>