uniapp/pages/index/index.vue

<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> -->
					<chart4></chart4>
				</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>

		<!-- 宫格列表 -->
		<square :cuIconList="cuIconList"></square>
		<!-- <view class="section2 section  bg-white margin-top-sm margin-bottom-sm">
			<view class="cu-list grid col-3 no-border">
				<view class="cu-item justify-center align-center" @tap="goSiteList"  v-for="(item,index) in cuIconList" :key="index">
					<image :src="`${item.imgUrl}`" style="width:100rpx;height:100rpx"></image>
					<view class="cu-tag badge" v-if="item.badge!=0">
						<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
					</view>
					<text>{{item.name}}</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';
	import chart4 from './components/chart4/chart4.vue';
	// import square from '../../components/square/square.vue';

	export default {
		components: {
			chart,
			chart2,
			chart3,
			chart4
			// square
		},
		data() {
			return {
				
				// 宫格列表数据
				cuIconList: [{
					imgUrl:'../../static/square1.png',
					badge: 120,
					name: '综合报警',
					redirectUrl:'/pages/siteList/siteList?type=1'
				}, {
					imgUrl:'../../static/square2.png',
					badge: 0,
					name: '运行监测',
					redirectUrl:'/pages/siteList/siteList?type=2'
				}, {
					imgUrl:'../../static/square-wb.png',
					badge: 0,
					name: '维保',
					redirectUrl:''
				}, {
					imgUrl:'../../static/square-bx.png',
					badge: 22,
					name: '报修',
					redirectUrl:''
				}, {
					imgUrl:'../../static/square-rl.png',
					badge: 0,
					name: '人脸识别',
					redirectUrl:''
				}, {
					imgUrl:'../../static/square-xj.png',
					badge: 0,
					badge: 0,
					name: '巡检',
					redirectUrl:''
				},  {
					imgUrl:'../../static/square-bz.png',
					badge: 0,
					badge: 0,
					name: '风险保障',
					redirectUrl:''
				}],
				Inv: 0,



			};

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

			},

		}
	}
</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>