//监管用户
<template>
	<view style="min-height: 100vh;">
		<view :style="{background: 'url('+applet+'/jg/banner.png) no-repeat',height:'30vh',backgroundSize:'100%'}">
			<image :src="applet+'/close.png'" style="width: 35px;height: 35px;margin-top: 40px;margin-left: 10px;"
				@tap="close"></image>
		</view>
		<view style="height: calc(100vh - 30vh);padding: 10px;"
			:style="{background: 'url('+applet+'/jg/bg.png) no-repeat',backgroundSize:'100% 100%'}">
			<view class="charts-box">
				<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
			</view>
			<view class="home-left-bottom">
				<view class="home-left-bottom-item"
					:style="{background: 'url('+applet+'/jg/unit1_bg.png) no-repeat',backgroundSize:'100% 100%'}"
					@click="gourl('/pages/massif/addMassif')">
					<view class="text">
						<view class="ttt1" >567</view>
						<view class="ttt">联网单位</view>
					</view>
				</view>
				<view class="home-left-bottom-item"
					:style="{background: 'url('+applet+'/jg/unit2_bg.png) no-repeat',backgroundSize:'100% 100%'}"
					@click="gourl('/pages/device/binding')">
					<view class="text">
						<view class="ttt1" >567</view>
						<view class="ttt">已打卡单位</view>
					</view>
				</view>
				<view class="home-left-bottom-item"
					:style="{background: 'url('+applet+'/jg/unit3_bg.png) no-repeat',backgroundSize:'100% 100%'}"
					@click="gourl('/pages/task/add')">
					<view class="text">
						<view class="ttt1" >567</view>
						<view class="ttt">未完全打卡单位</view>
					</view>
				</view>
				<view class="home-left-bottom-item"
					:style="{background: 'url('+applet+'/jg/unit4_bg.png) no-repeat',backgroundSize:'100% 100%'}"
					@click="gourl('/pages/device/perceptionConf')">
					<view class="text">
						<view class="ttt1" >567</view>
						<view class="ttt">未打卡单位</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				applet: this.$url.data.applet,
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					title: {
						name: "80%",
						fontSize: 35,
						color: "#2fc25b"
					},
					subtitle: {
						name: "正确率",
						fontSize: 25,
						color: "#666666"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 12,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2,
							linearType: "custom"
						}
					}
				}
			}
		},
		onLoad() {
			this.loadCharts()
		},
		methods: {
			loadCharts() {
				let res = {
					series: [{
						name: "正确率",
						color: "#2fc25b",
						data: 0.8
					}]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			},
			gourl(){
				
			},
			close() {
				uni.removeStorageSync("token")
				uni.redirectTo({
					url: '/pages/login/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.charts-box {
		width: 50%;
		height: 200px;
		margin: 0 auto;
	}
	.home-left-bottom {
		width: 100%;
		height: 22vh;
		margin-top: 30px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between
	}
	
	.home-left-bottom-item {
		height: 45%;
		width: 48%;
		.text{
			width: 60%;
			height: 100%;
			margin-left: 40%;
			.ttt{
				text-align: center;
				margin-top: 14%;
				color: #fff;
				font-size: 12px;
			}
			.ttt1{
				text-align: center;
				margin-top: 14%;
				color: #fff;
			}
		}
	}
</style>