IOT/SourceCode/ui/fbs-ui_app2/pages/home/components/info.vue

<template>
	<view class="container">
		<qiun-title-bar title="商户统计分析" />
		<view class="charts-box"><qiun-data-charts type="ring"  canvasId="chart21" :canvas2d="isCanvas2d" :opts="{ legend: { position: 'bottom' }, title: { name: '商户数量', fontSize: 15, color: '#333' }, subtitle: { name: baseInfo.company.total, fontSize: 25, color: '#7cb5ec' }, extra: { ring: { ringWidth: 40, linearType: 'custom', centerColor: '#eee' } } }" :chartData="data1" /></view>
		<qiun-title-bar title="净化设施统计分析" />
		<view class="charts-box">
			<qiun-data-charts type="ring"  canvasId="chart22" :canvas2d="isCanvas2d" :opts="{ legend: { position: 'bottom' }, title: { name: '净化设施数量', fontSize: 15, color: '#333' }, subtitle: { name: baseInfo.facilities.total, fontSize: 25, color: '#7cb5ec' }, extra: { ring: { ringWidth: 40, linearType: 'custom', centerColor: '#eee' } } }" :chartData="data2" />
		</view>
		<qiun-title-bar title="监控仪统计分析" />
		<view class="charts-box">
			<qiun-data-charts type="ring"  canvasId="chart23" :canvas2d="isCanvas2d" :opts="{ legend: { position: 'bottom' }, title: { name: '监控仪数量', fontSize: 15, color: '#333' }, subtitle: { name: baseInfo.monitor.total, fontSize: 25, color: '#7cb5ec' }, extra: { ring: { ringWidth: 40, linearType: 'custom', centerColor: '#eee' } } }" :chartData="data3" />
			</view>
		</view>
	</view>
	
	</view>
</template>
<script>
import api from "@/common/api.js";
import { log } from "@/utils/base.js";
export default {
	data() {
		return {
			baseInfo: {
				company: {
					operate: 0,
					rest: 0,
					outlet: 0,
					stove: 0,
					total: 0,
				},
				facilities: {
					normal: 0,
					rest: 0,
					over: 0,
					abnormal: 0,
					total: 0,
				},
				monitor: {
					normal: 0,
					abnormal: 0,
					total: 0,
				},
			},
			data1: {},
			data2: {},
			data3: {},
			//#ifndef MP-WEIXIN
			isCanvas2d: false,
			//#endif
			//#ifdef MP-WEIXIN
			isCanvas2d: true,
			//#endif
		};
	},
	computed: {},
	mounted() {
		this.getInfo();
	},
	methods: {
		getInfo() {
			api.getBaseInfo().then(data => {
				this.baseInfo = data;
				this.data1 = {
					series: [
						{
							data: [
								{
									value: this.baseInfo.company.rest,
									name: "休息",
								},
								{
									value: this.baseInfo.company.operate,
									name: "营业",
								},
							],
						},
					],
				};
				this.data2 = {
					series: [
						{
							data: [
								{
									value: this.baseInfo.facilities.rest,
									name: "休息",
								},
								{
									value: this.baseInfo.facilities.normal,
									name: "正常",
								},
								{
									value: this.baseInfo.facilities.over,
									name: "超标",
								},
								{
									value: this.baseInfo.facilities.abnormal,
									name: "异常",
								},
							],
						},
					],
				};
				this.data3 = {
					series: [
						{
							data: [
								{
									value: this.baseInfo.monitor.normal,
									name: "正常",
								},
								{
									value: this.baseInfo.monitor.abnormal,
									name: "停电",
								},
							],
						},
					],
				};
				log("BASE_INFO", this.baseInfo);
			});
		},
	},
};
</script>

<style>
.container {
	padding: 10px 0;
	font-size: 14px;
	line-height: 24px;
}
.charts-box {
	width: 100%;
	height: 300px;
}
</style>