iot-applet/pages/supervise/supervise.vue

//监管用户
<template>
	<view>
		<view :style="{background: 'url('+applet+'/jg/banner.png) no-repeat',height:'23vh',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 - 24vh);padding: 10px;margin-top: -12px;"
			: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" :canvas2d="true"/>
			</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/supervise/superviseList?type=')">
					<view class="text">
						<view class="ttt1" >{{val.unitCount}}</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/supervise/superviseList?type=0')">
					<view class="text">
						<view class="ttt1" >{{val.qualified}}</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/supervise/superviseList?type=1')">
					<view class="text">
						<view class="ttt1" >{{val.imperfect}}</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/supervise/superviseList?type=2')">
					<view class="text">
						<view class="ttt1" >{{val.unqualified}}</view>
						<view class="ttt">未打卡单位</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		formatterDateTime
	} from "@/common/utils.js"
	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"
					],
					title: {
						name: "0%",
						fontSize: 25,
						color: "#3971ff"
					},
					padding: undefined,
					subtitle: {
						name: "在岗率",
						fontSize: 18,
						color: "#333"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 12,
							backgroundColor: "#ffffff",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2,
							linearType: "custom"
						}
					}
				},
				val:{},
				date:formatterDateTime(new Date(), 'Y-M-D'),
				dateTime:formatterDateTime(new Date(), 'Y-M-D h:min:s'),
				regionId:uni.getStorageSync("regionId")
			}
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			loadData(){
				this.$http.get("/fire-customer/sign/record/supervise",{
					date:this.date,dateTime:this.dateTime,regionId:this.regionId
					},{}).then(res =>{  
					this.val = res.data
					this.opts.title.name = res.data.rate != 'NaN' ? res.data.rate.toFixed(2) *100 +"%" : '0%'
					this.loadCharts(res.data.rate)
				})
			},
			loadCharts(e) {
				let res = {
					title:{
						name:e
					},
					series: [{
						name: "在岗率",
						color: "#3971ff",
						data: e
					}]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			},
			gourl(e){
				uni.navigateTo({
					url:e+ "&date="+this.date+ "&dateTime="+this.dateTime
				})
			},
			close() {
				uni.removeStorageSync("token")
				uni.redirectTo({
					url: '/pages/login/index'
				})
			}
		},
		onPullDownRefresh() {
			this.loadData()
			//下拉刷新
			uni.stopPullDownRefresh();
		},
	}
</script>

<style scoped lang="scss">
	.charts-box {
		width: 200px;
		height: 200px;
		margin: 30px auto;
		// background-color: #fff;
		// border-radius: 50%;
	}
	.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>