<template>
	<view style="background:#f1f1f1;height:1450rpx" class="padding-sm">
		<view class="section1 section bg-white padding-xs">
			<view class=" static-tabs grid margin-bottom text-center col-3 margin-top-sm margin-bottom-sm">
				<view :class="['padding-sm ',Inv==0?'active':'']" @click="Inv=0">报警信息统计</view>
				<view :class="['padding-sm ',Inv==1?'active':'']" @click="Inv=1">数据等级统计</view>
				<view :class="['padding-sm ',Inv==2?'active':'']" @click="Inv=2">设备运行状态</view>
			</view>
			<view class="time text-center">统计时段：2020年09月12日～2020年11月11日
			</view>
			<view>
				<view v-if="Inv == 0">
					<chart></chart>
				</view>
				<view v-if="Inv == 1">
					
					<chart2></chart2>
				</view>
				<view v-if="Inv == 2" class="chart3-box">
					<ul class="chart3-icon">
						<li><image src="../../static/chart3-1.png" style="width:64rpx;height:64rpx"></image></li>
						<li><image src="../../static/chart3-2.png" style="width:64rpx;height:64rpx"></image></li>
						<li><image src="../../static/chart3-3.png" style="width:64rpx;height:64rpx"></image></li>
						<li><image src="../../static/chart3-4.png" style="width:64rpx;height:64rpx"></image></li>
						<li><image src="../../static/chart3-5.png" style="width:64rpx;height:64rpx"></image></li>
					</ul>
					<chart3>
						
					</chart3>
				</view>
			</view>
		</view>


		<!-- 宫格列表 -->
		<view class="section2 section  bg-white margin-top-sm margin-bottom-sm">
			<view class="cu-list grid col-3 no-border">
				<!-- <navigator url="/pages/siteList/siteList">
				</navigator> -->
				<view class="cu-item justify-center align-center" @tap="goSiteList">
					<image src="../../static/square1.png" style="width:100rpx;height:100rpx"></image>
					<view class="cu-tag badge">99+
					</view>
					<text>综合报警</text>
				</view>
				<view class="cu-item justify-center align-center">
					<image src="../../static/square2.png" style="width:100rpx;height:100rpx"></image>
					<text>运行监测</text>
				</view>
				<view class="cu-item justify-center align-center">
					<image src="../../static/square-wb.png" style="width:100rpx;height:100rpx"></image>
					<text>维保</text>
				</view>
				<view class="cu-item justify-center align-center">
					<image src="../../static/square-bx.png" style="width:100rpx;height:100rpx"></image>
					<text>报修</text>
				</view>
				<view class="cu-item justify-center align-center">
					<image src="../../static/square-rl.png" style="width:100rpx;height:100rpx"></image>
					<text>人脸识别</text>
				</view>
				<view class="cu-item justify-center align-center">
					<image src="../../static/square-xj.png" style="width:100rpx;height:100rpx"></image>
					<text>巡检</text>
				</view>
				<view class="cu-item justify-center align-center">
					<image src="../../static/square-sp.png" style="width:100rpx;height:100rpx"></image>
					<text>视频监测</text>
				</view>
				<view class="cu-item justify-center align-center">
					<image src="../../static/square-bz.png" style="width:100rpx;height:100rpx"></image>
					<text>风险保障</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import chart from './components/chart/chart.vue';
	import chart2 from './components/chart2/chart2.vue';
	import chart3 from './components/chart3/chart3.vue';

	export default {
		components: {
			chart,
			chart2,
			chart3
		},
		data() {
			return {

				Inv: 0,



			};

		},
		onLoad() {},
		methods: {
			changeTab(Inv) {
				that.navIdx = Inv;

			},
			goSiteList() {
				uni.navigateTo({
					url: '/pages/siteList/siteList',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}






		}
	}
</script>

<style>
	body {
		background: #f1f1f1 !important;
	}



	.static-tabs {
		border-radius: 50rpx;
		border: 1rpx solid #4074E7;
	}

	.static-tabs>view {
		color: #4074E7;
		font-size: 30rpx;
	}

	.static-tabs>view.active {
		color: #fff;
		background: #4074E7
	}

	.static-tabs>view:first-child {
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
	}

	.static-tabs>view:nth-child(2) {
		border-left: 1px solid #4074E7;
		border-right: 1px solid #4074E7
	}

	.static-tabs>view:last-child {
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
	}


	/* 检测时间 */
	.time {
		border-radius: 50rpx;
		background: #FAFCFF;
		border: 1px solid #E8F1FF;
		padding: 20rpx;
		color: #666666;
		font-size: 28rpx;

	}
	
	.chart3-box{
		position:relative
	}
	.chart3-icon{
		position:absolute;
		top:60rpx;
		left:30rpx
	}
	.chart3-icon li{
		padding-top:25rpx
	}
	ul,li{ padding:0;margin:0;list-style:none}


	
</style>
