优化仪表盘页面代码

src/views/iot/iotmanager/dashboard.vue

@@ -90,10 +90,10 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated, getCurrentInstance, onUnmounted } from 'vue';
+<script lang="ts" setup>
+import { toRefs, reactive, onMounted, ref, watch, nextTick, onActivated, getCurrentInstance, onUnmounted } from 'vue';
 import * as echarts from 'echarts';
-import { useRouter, useRoute } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { useStore } from '/@/store/index';
 import { VueUiXy } from "vue-data-ui";
 import "vue-data-ui/style.css";
@@ -112,543 +112,501 @@ let global: any = {
 	dispose: [null, '', undefined]
 };
 
-export default defineComponent({
-	name: 'home',
-	components: { EditDic, DetailDic, VueUiXy },
-	setup() {
-		// 页面是显示状态
-		let isActice = true
-		const config = ref({
-			type: "line",
-			style: {
-				maxHeight: 250,
-			},
-			height: 250,
-			width: 1000,
-		});
-
-		const dataset = ref<any[]>([]);
-
-		onUnmounted(() => {
-			isActice = false
-		})
+// 页面是显示状态
+let isActice = true
+const config = ref({
+	type: "line",
+	style: {
+		maxHeight: 250,
+	},
+	height: 250,
+	width: 1000,
+});
 
-		const { proxy } = getCurrentInstance() as any;
-		const { alarm_type } = proxy.useDict('alarm_type');
-		const alarmTypeMap: any = {}
-
-		// 监听告警类型是否获取成功
-		watch(() => alarm_type.value, (list) => {
-			if (!list.length) return
-			list.forEach((item: any) => {
-				alarmTypeMap[item.value] = item.label
-			});
-
-			// 预警类型需要类型返回后才能请求
-			getDeviceAlarmLevelCount()
-		}, {
-			immediate: true
-		})
+const dataset = ref<any[]>([]);
+
+onUnmounted(() => {
+	isActice = false
+})
+
+const { proxy } = getCurrentInstance() as any;
+const { alarm_type } = proxy.useDict('alarm_type');
+const alarmTypeMap: any = {}
+
+// 监听告警类型是否获取成功
+watch(() => alarm_type.value, (list) => {
+	if (!list.length) return
+	list.forEach((item: any) => {
+		alarmTypeMap[item.value] = item.label
+	});
+
+	// 预警类型需要类型返回后才能请求
+	getDeviceAlarmLevelCount()
+}, {
+	immediate: true
+})
+
+const editDicRef = ref();
+const detailRef = ref();
+const homeLineRef = ref();
+const homePieRef = ref();
+const store = useStore();
+const router = useRouter();
+const state = reactive({
+	loading: false,
+	tableData: {
+		data: [],
+		total: 0,
+		loading: false,
+		param: {
+			pageNum: 1,
+			pageSize: 20,
+			status: '',
+			dateRange: [],
+		},
+	},
+	homeOne: [
+		{
+			allnum: 0,
+			num1: 0,
+			num2: 0,
+			num3: '产品',
+			num4: 'icon-zidingyibuju',
+			color1: '#6690F9',
+			color2: '--el-color-warning-lighter',
+			color3: '--el-color-warning',
+			icoimg: 'dashboard-icon1.svg',
+			title1: '启用',
+			title2: '停用',
+			title1_bgcolor: '#3cd357',
+			title2_bgcolor: '#FFBB73',
+		},
+		{
+			allnum: 0,
+			num1: 0,
+			num2: 0,
+			num3: '在线设备',
+			num4: 'icon-putong',
+			color1: '#FF6462',
+			color2: '--next-color-primary-lighter',
+			color3: '--el-color-primary',
+			icoimg: 'dashboard-icon2.svg',
+			title1: '启用',
+			title2: '停用',
+			title1_bgcolor: '#3cd357',
+			title2_bgcolor: '#FFBB73',
+		},
+		{
+			allnum: 0,
+			num1: 0,
+			num2: 0,
+			num3: '设备消息',
+			num4: 'icon-shidu',
+			color1: '#6690F9',
+			color2: '--el-color-success-lighter',
+			color3: '--el-color-success',
+			icoimg: 'dashboard-icon3.svg',
+			title1: '本月',
+			title2: '今日',
+			title1_bgcolor: '#4285F4',
+			title2_bgcolor: '#FFBB73',
+		},
+		{
+			allnum: 0,
+			num1: 0,
+			num2: 0,
+			num3: '设备告警',
+			num4: 'icon-zaosheng',
+			color1: '#6690F9',
+			color2: '--el-color-warning-lighter',
+			color3: '--el-color-warning',
+			icoimg: 'dashboard-icon4.svg',
+			title1: '本月',
+			title2: '今日',
+			title1_bgcolor: '#4285F4',
+			title2_bgcolor: '#FFBB73',
+		},
+	],
+	myCharts: [],
+	charts: {
+		theme: '',
+		bgColor: '',
+		color: '#303133',
+	},
+	lineChartXAxisData: [],
+	lineChartMsgTotalData: [],
+	lineChartAlarmTotalData: [],
+	pieChartLegend: [],
+	pieChartLevel: [],
+	pieChartData: []
+});
 
-		const editDicRef = ref();
-		const detailRef = ref();
-		const homeLineRef = ref();
-		const homePieRef = ref();
-		const homeBarRef = ref();
-		const store = useStore();
-		const router = useRouter();
-		const state = reactive({
-			loading: false,
-			tableData: {
-				data: [],
-				total: 0,
-				loading: false,
-				param: {
-					pageNum: 1,
-					pageSize: 20,
-					status: '',
-					dateRange: [],
+const { loading, tableData, homeOne } = toRefs(state)
+
+// 折线图
+const initLineChart = () => {
+	if (!global.dispose.some((b: any) => b === global.homeChartOne)) global.homeChartOne.dispose();
+	global.homeChartOne = <any>echarts.init(homeLineRef.value, state.charts.theme);
+	const option = {
+		backgroundColor: state.charts.bgColor,
+		title: {
+			text: '设备消息',
+			x: 5,
+			textStyle: { fontSize: '15', color: state.charts.color },
+		},
+		grid: { top: 70, right: 20, bottom: 30, left: 50 },
+		tooltip: { trigger: 'axis' },
+		legend: { data: ['消息量', '预警量'], right: 0 },
+		xAxis: {
+			data: state.lineChartXAxisData
+		},
+		yAxis: [
+			{
+				type: 'value',
+				name: '条数',
+				splitLine: { show: true, lineStyle: { type: 'dashed', color: 'rgba(0, 0, 0, 0.03)' } },
+				axisLabel: {
+					margin: 2,
+					formatter: function (value: any) {
+						if (value >= 10000 && value < 10000000) {
+							value = value / 10000 + "W";
+						} else if (value >= 10000000) {
+							value = value / 10000000 + "KW";
+						}
+						return value;
+					}
 				},
 			},
-			homeOne: [
-				{
-					allnum: 0,
-					num1: 0,
-					num2: 0,
-					num3: '产品',
-					num4: 'icon-zidingyibuju',
-					color1: '#6690F9',
-					color2: '--el-color-warning-lighter',
-					color3: '--el-color-warning',
-					icoimg: 'dashboard-icon1.svg',
-					title1: '启用',
-					title2: '停用',
-					title1_bgcolor: '#3cd357',
-					title2_bgcolor: '#FFBB73',
-
-				},
-				{
-					allnum: 0,
-					num1: 0,
-					num2: 0,
-					num3: '在线设备',
-					num4: 'icon-putong',
-					color1: '#FF6462',
-					color2: '--next-color-primary-lighter',
-					color3: '--el-color-primary',
-					icoimg: 'dashboard-icon2.svg',
-					title1: '启用',
-					title2: '停用',
-					title1_bgcolor: '#3cd357',
-					title2_bgcolor: '#FFBB73',
-				},
-				{
-					allnum: 0,
-					num1: 0,
-					num2: 0,
-					num3: '设备消息',
-					num4: 'icon-shidu',
-					color1: '#6690F9',
-					color2: '--el-color-success-lighter',
-					color3: '--el-color-success',
-					icoimg: 'dashboard-icon3.svg',
-					title1: '本月',
-					title2: '今日',
-					title1_bgcolor: '#4285F4',
-					title2_bgcolor: '#FFBB73',
-				},
-				{
-					allnum: 0,
-					num1: 0,
-					num2: 0,
-					num3: '设备告警',
-					num4: 'icon-zaosheng',
-					color1: '#6690F9',
-					color2: '--el-color-warning-lighter',
-					color3: '--el-color-warning',
-					icoimg: 'dashboard-icon4.svg',
-					title1: '本月',
-					title2: '今日',
-					title1_bgcolor: '#4285F4',
-					title2_bgcolor: '#FFBB73',
+		],
+		series: [
+			{
+				name: '消息量',
+				type: 'line',
+				symbolSize: 0,
+				symbol: 'circle',
+				smooth: true,
+				data: state.lineChartMsgTotalData,
+				lineStyle: { color: '#4285F4', width: 3 },
+				itemStyle: { color: '#4285F4', borderColor: '#4285F4' },
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{ offset: 0, color: 'rgba(66, 133, 244, 0.3)' },
+						{ offset: 1, color: 'rgba(66, 133, 244, 0)' },
+					]),
 				},
-			],
-			myCharts: [],
-			charts: {
-				theme: '',
-				bgColor: '',
-				color: '#303133',
 			},
-			lineChartXAxisData: [],
-			lineChartMsgTotalData: [],
-			lineChartAlarmTotalData: [],
-			pieChartLegend: [],
-			pieChartLevel: [],
-			pieChartData: []
-		});
-		// 折线图
-		const initLineChart = () => {
-			if (!global.dispose.some((b: any) => b === global.homeChartOne)) global.homeChartOne.dispose();
-			global.homeChartOne = <any>echarts.init(homeLineRef.value, state.charts.theme);
-			const option = {
-				backgroundColor: state.charts.bgColor,
-				title: {
-					text: '设备消息',
-					x: 5,
-					textStyle: { fontSize: '15', color: state.charts.color },
-				},
-				grid: { top: 70, right: 20, bottom: 30, left: 50 },
-				tooltip: { trigger: 'axis' },
-				legend: { data: ['消息量', '预警量'], right: 0 },
-				xAxis: {
-					data: state.lineChartXAxisData
+			{
+				name: '预警量',
+				type: 'line',
+				symbolSize: 6,
+				symbol: 'circle',
+				smooth: true,
+				data: state.lineChartAlarmTotalData,
+				lineStyle: { color: '#FBBB04', width: 3 },
+				itemStyle: { color: '#FBBB04', borderColor: '#FBBB04' },
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{ offset: 0, color: 'rgba(251, 187, 4, 0.3)' },
+						{ offset: 1, color: 'rgba(251, 187, 4, 0)' },
+					]),
 				},
-				yAxis: [
-					{
-						type: 'value',
-						name: '条数',
-						splitLine: { show: true, lineStyle: { type: 'dashed', color: 'rgba(0, 0, 0, 0.03)' } },
-						axisLabel: {
-							margin: 2,
-							formatter: function (value: any) {
-								if (value >= 10000 && value < 10000000) {
-									value = value / 10000 + "W";
-								} else if (value >= 10000000) {
-									value = value / 10000000 + "KW";
-								}
-								return value;
-							}
-						},
-					},
-				],
-				series: [
-					{
-						name: '消息量',
-						type: 'line',
-						symbolSize: 0,
-						symbol: 'circle',
-						smooth: true,
-						data: state.lineChartMsgTotalData,
-						lineStyle: { color: '#4285F4', width: 3 },
-						itemStyle: { color: '#4285F4', borderColor: '#4285F4' },
-						areaStyle: {
-							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-								{ offset: 0, color: 'rgba(66, 133, 244, 0.3)' },
-								{ offset: 1, color: 'rgba(66, 133, 244, 0)' },
-							]),
+				emphasis: {
+					itemStyle: {
+						color: {
+							type: 'radial',
+							x: 0.5,
+							y: 0.5,
+							r: 0.5,
+							colorStops: [
+								{ offset: 0, color: '#9E87FF' },
+								{ offset: 0.4, color: '#9E87FF' },
+								{ offset: 0.5, color: '#fff' },
+								{ offset: 0.7, color: '#fff' },
+								{ offset: 0.8, color: '#fff' },
+								{ offset: 1, color: '#fff' },
+							],
 						},
+						borderColor: '#9E87FF',
+						borderWidth: 2,
 					},
-					{
-						name: '预警量',
-						type: 'line',
-						symbolSize: 6,
-						symbol: 'circle',
-						smooth: true,
-						data: state.lineChartAlarmTotalData,
-						lineStyle: { color: '#FBBB04', width: 3 },
-						itemStyle: { color: '#FBBB04', borderColor: '#FBBB04' },
-						areaStyle: {
-							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-								{ offset: 0, color: 'rgba(251, 187, 4, 0.3)' },
-								{ offset: 1, color: 'rgba(251, 187, 4, 0)' },
-							]),
-						},
-						emphasis: {
-							itemStyle: {
-								color: {
-									type: 'radial',
-									x: 0.5,
-									y: 0.5,
-									r: 0.5,
-									colorStops: [
-										{ offset: 0, color: '#9E87FF' },
-										{ offset: 0.4, color: '#9E87FF' },
-										{ offset: 0.5, color: '#fff' },
-										{ offset: 0.7, color: '#fff' },
-										{ offset: 0.8, color: '#fff' },
-										{ offset: 1, color: '#fff' },
-									],
-								},
-								borderColor: '#9E87FF',
-								borderWidth: 2,
-							},
-						},
-					},
-				],
-			};
-			(<any>global.homeChartOne).setOption(option);
-			(<any>state.myCharts).push(global.homeChartOne);
-		};
-		// 饼图
-		const initPieChart = () => {
-			if (!global.dispose.some((b: any) => b === global.homeChartTwo)) global.homeChartTwo.dispose();
-			global.homeChartTwo = <any>echarts.init(homePieRef.value, state.charts.theme);
-			var getname = state.pieChartLegend;
-			var getvalue = state.pieChartData;
-			var data = [];
-
-			for (var i = 0; i < getname.length; i++) {
-				data.push({ name: getname[i], value: getvalue[i] });
-			}
-			const colorList = ['#4285F4', '#2ecc71', '#FBBB04', '#e67e22', '#FF0000'].reverse()
-
-			const color = state.pieChartLevel.map(level => colorList[level - 1])
-
-			const option = {
-				color,
-				backgroundColor: state.charts.bgColor,
-				title: {
-					text: '预警类型',
-					x: 5,
-					textStyle: { fontSize: '15', color: state.charts.color },
-				},
-				// tooltip: { trigger: 'item', formatter: '{b} <br/> {c}%' },
-				tooltip: { trigger: 'item' },
-				graphic: {
-					elements: [
-						{
-							type: 'image',
-							z: -1,
-							left: '16.5%',
-							top: 'center',
-						},
-					],
 				},
-				legend: {
-					type: 'scroll',
-					orient: 'vertical',
-					right: '0%',
-					left: '65%',
+			},
+		],
+	};
+	(<any>global.homeChartOne).setOption(option);
+	(<any>state.myCharts).push(global.homeChartOne);
+};
+// 饼图
+const initPieChart = () => {
+	if (!global.dispose.some((b: any) => b === global.homeChartTwo)) global.homeChartTwo.dispose();
+	global.homeChartTwo = <any>echarts.init(homePieRef.value, state.charts.theme);
+	var getname = state.pieChartLegend;
+	var getvalue = state.pieChartData;
+	var data = [];
+
+	for (var i = 0; i < getname.length; i++) {
+		data.push({ name: getname[i], value: getvalue[i] });
+	}
+	const colorList = ['#4285F4', '#2ecc71', '#FBBB04', '#e67e22', '#FF0000'].reverse()
+
+	const color = state.pieChartLevel.map(level => colorList[level - 1])
+
+	const option = {
+		color,
+		backgroundColor: state.charts.bgColor,
+		title: {
+			text: '预警类型',
+			x: 5,
+			textStyle: { fontSize: '15', color: state.charts.color },
+		},
+		// tooltip: { trigger: 'item', formatter: '{b} <br/> {c}%' },
+		tooltip: { trigger: 'item' },
+		graphic: {
+			elements: [
+				{
+					type: 'image',
+					z: -1,
+					left: '16.5%',
 					top: 'center',
-					itemWidth: 14,
-					itemHeight: 14,
-					data: getname,
-					textStyle: {
-						rich: {
-							name: {
-								fontSize: 14,
-								fontWeight: 400,
-								width: 200,
-								height: 35,
-								padding: [0, 0, 0, 60],
-								color: state.charts.color,
-							},
-							rate: {
-								fontSize: 15,
-								fontWeight: 500,
-								height: 35,
-								width: 40,
-								padding: [0, 0, 0, 30],
-								color: state.charts.color,
-							},
-						},
-					},
 				},
-				series: [
-					{
-						type: 'pie',
-						radius: ['70', '90'],
-						center: ['32%', '50%'],
-						padAngle: 1,
-						label: { show: false },
-						labelLine: { show: false },
-						data: data,
+			],
+		},
+		legend: {
+			type: 'scroll',
+			orient: 'vertical',
+			right: '0%',
+			left: '65%',
+			top: 'center',
+			itemWidth: 14,
+			itemHeight: 14,
+			data: getname,
+			textStyle: {
+				rich: {
+					name: {
+						fontSize: 14,
+						fontWeight: 400,
+						width: 200,
+						height: 35,
+						padding: [0, 0, 0, 60],
+						color: state.charts.color,
 					},
-				],
-			};
-			(<any>global.homeChartTwo).setOption(option);
-			(<any>state.myCharts).push(global.homeChartTwo);
-		};
-		// 批量设置 echarts resize
-		const initEchartsResizeFun = () => {
-			nextTick(() => {
-				for (let i = 0; i < state.myCharts.length; i++) {
-					setTimeout(() => {
-						(<any>state.myCharts[i]).resize();
-					}, i * 1000);
-				}
-			});
-		};
-		// 批量设置 echarts resize
-		const initEchartsResize = () => {
-			window.addEventListener('resize', initEchartsResizeFun);
-		};
-
-		// 定时获取设备，在线信息，告警数量更新
-		const getOverviewData = () => {
-			getProductCount()
-			getDeviceDataTotalCount()
-			getDeviceDataTotalCountMonth()
-			getDeviceDataTotalCountDay()
-			getDeviceOnlineOfflineCount()
-			getDeviceAlarmLevelCountYear()
-			getDeviceAlarmLevelCountMonth()
-			getDeviceAlarmLevelCountDay()
-			// 图形数据
-			getDeviceDataCount()
-		};
-
-		// 普通数据3秒更新
-		const intervalTimeLong = 3000
-
-		function loopRquest(fun: Function, timeLong?: number) {
+					rate: {
+						fontSize: 15,
+						fontWeight: 500,
+						height: 35,
+						width: 40,
+						padding: [0, 0, 0, 30],
+						color: state.charts.color,
+					},
+				},
+			},
+		},
+		series: [
+			{
+				type: 'pie',
+				radius: ['70', '90'],
+				center: ['32%', '50%'],
+				padAngle: 1,
+				label: { show: false },
+				labelLine: { show: false },
+				data: data,
+			},
+		],
+	};
+	(<any>global.homeChartTwo).setOption(option);
+	(<any>state.myCharts).push(global.homeChartTwo);
+};
+// 批量设置 echarts resize
+const initEchartsResizeFun = () => {
+	nextTick(() => {
+		for (let i = 0; i < state.myCharts.length; i++) {
 			setTimeout(() => {
-				isActice && fun()
-			}, timeLong || intervalTimeLong)
+				(<any>state.myCharts[i]).resize();
+			}, i * 1000);
 		}
+	});
+};
+// 批量设置 echarts resize
+const initEchartsResize = () => {
+	window.addEventListener('resize', initEchartsResizeFun);
+};
 
-		// 获取告警告警数量和消息数量绘图
-		function getDeviceDataCount() {
-			// 获取年度消息，年度告警数量
-			Promise.all([api.iotManage.deviceDataCount('year'), api.iotManage.deviceAlertCountByYearMonth(dayjs().format('YYYY'))]).then(([msg, alarm]: any) => {
-				const msgArr = msg?.data || []
-				const alarmArr = alarm?.data || []
-				// console.log(alarmArr)
-				state.lineChartMsgTotalData = msgArr.map((item: any) => item.Value)
-				state.lineChartXAxisData = msgArr.map((item: any) => item.Title)
-				state.lineChartAlarmTotalData = alarmArr.map((item: any) => item.Value)
-
-				const chartData = getLineData({
-					xAxis: msgArr.map((item: any) => item.Title),
-					legend: ['消息量', '预警量'],
-					datas: [
-						msgArr.map((item: any) => item.Value),
-						alarmArr.map((item: any) => item.Value)
-					]
-				})
-
-				config.value = chartData.config
-				dataset.value = chartData.dataset
-
-			}).finally(() => loopRquest(getDeviceDataCount, 60000))
-		}
+// 定时获取设备，在线信息，告警数量更新
+const getOverviewData = () => {
+	getProductCount()
+	getDeviceDataTotalCount()
+	getDeviceDataTotalCountMonth()
+	getDeviceDataTotalCountDay()
+	getDeviceOnlineOfflineCount()
+	getDeviceAlarmLevelCountYear()
+	getDeviceAlarmLevelCountMonth()
+	getDeviceAlarmLevelCountDay()
+	// 图形数据
+	getDeviceDataCount()
+};
 
-		// 获取告警告警数量和消息数量绘图
-		function getDeviceAlarmLevelCount() {
-			// 按告警级别统计 绘制饼图
-			api.iotManage.deviceAlarmLevelCount('year', dayjs().format('YYYY')).then((res: any) => {
-				const list = (res.data || []).sort((a: any, b: any) => b.Title - a.Title)
-				state.pieChartLegend = list.map((item: any) => alarmTypeMap[item.Title])
-				state.pieChartLevel = list.map((item: any) => item.Title)
-				state.pieChartData = list.map((item: any) => item.Value)
-			}).finally(() => loopRquest(getDeviceAlarmLevelCount, 60000))
-		}
+// 普通数据3秒更新
+const intervalTimeLong = 3000
 
-		// 产品数量
-		function getProductCount() {
-			api.iotManage.productCount().then((res: any) => {
-				state.homeOne[0].allnum = res.total;
-				state.homeOne[0].num1 = res.enable
-				state.homeOne[0].num2 = res.disable
-			}).finally(() => loopRquest(getProductCount))
-		}
+function loopRquest(fun: Function, timeLong?: number) {
+	setTimeout(() => {
+		isActice && fun()
+	}, timeLong || intervalTimeLong)
+}
 
-		// 设备数据总数
-		function getDeviceDataTotalCount() {
-			api.iotManage.deviceDataTotalCount('year').then((res: any) => {
-				state.homeOne[2].allnum = res.number;
-			}).finally(() => loopRquest(getDeviceDataTotalCount))
-		}
+// 获取告警告警数量和消息数量绘图
+function getDeviceDataCount() {
+	// 获取年度消息，年度告警数量
+	Promise.all([api.iotManage.deviceDataCount('year'), api.iotManage.deviceAlertCountByYearMonth(dayjs().format('YYYY'))]).then(([msg, alarm]: any) => {
+		const msgArr = msg?.data || []
+		const alarmArr = alarm?.data || []
+		// console.log(alarmArr)
+		state.lineChartMsgTotalData = msgArr.map((item: any) => item.Value)
+		state.lineChartXAxisData = msgArr.map((item: any) => item.Title)
+		state.lineChartAlarmTotalData = alarmArr.map((item: any) => item.Value)
+
+		const chartData = getLineData({
+			xAxis: msgArr.map((item: any) => item.Title),
+			legend: ['消息量', '预警量'],
+			datas: [
+				msgArr.map((item: any) => item.Value),
+				alarmArr.map((item: any) => item.Value)
+			]
+		})
 
-		// 设备数据总数-月
-		function getDeviceDataTotalCountMonth() {
-			api.iotManage.deviceDataTotalCount('month').then((res: any) => {
-				state.homeOne[2].num1 = res.number;
-			}).finally(() => loopRquest(getDeviceDataTotalCountMonth))
-		}
+		config.value = chartData.config
+		dataset.value = chartData.dataset
 
-		// 设备数据总数-月
-		function getDeviceDataTotalCountDay() {
-			api.iotManage.deviceDataTotalCount('day').then((res: any) => {
-				state.homeOne[2].num2 = res.number;
-			}).finally(() => loopRquest(getDeviceDataTotalCountDay))
-		}
+	}).finally(() => loopRquest(getDeviceDataCount, 60000))
+}
 
-		// 设备数量
-		function getDeviceOnlineOfflineCount() {
-			api.iotManage.deviceOnlineOfflineCount().then((res: any) => {
-				state.homeOne[1].allnum = res.online;
-				state.homeOne[1].num1 = res.total - res.disable
-				state.homeOne[1].num2 = res.disable
-			}).finally(() => loopRquest(getDeviceOnlineOfflineCount))
-		}
+// 获取告警告警数量和消息数量绘图
+function getDeviceAlarmLevelCount() {
+	// 按告警级别统计 绘制饼图
+	api.iotManage.deviceAlarmLevelCount('year', dayjs().format('YYYY')).then((res: any) => {
+		const list = (res.data || []).sort((a: any, b: any) => b.Title - a.Title)
+		state.pieChartLegend = list.map((item: any) => alarmTypeMap[item.Title])
+		state.pieChartLevel = list.map((item: any) => item.Title)
+		state.pieChartData = list.map((item: any) => item.Value)
+	}).finally(() => loopRquest(getDeviceAlarmLevelCount, 60000))
+}
 
-		// 告警数量-年
-		function getDeviceAlarmLevelCountYear() {
-			api.iotManage.deviceAlarmLevelCount('year', dayjs().format('YYYY')).then((res: any) => {
-				const list = (res.data || [])
-				const total = list.reduce((a: any, b: any) => a + b.Value, 0)
-				state.homeOne[3].allnum = total;
-			}).finally(() => loopRquest(getDeviceAlarmLevelCountYear))
-		}
+// 产品数量
+function getProductCount() {
+	api.iotManage.productCount().then((res: any) => {
+		state.homeOne[0].allnum = res.total;
+		state.homeOne[0].num1 = res.enable
+		state.homeOne[0].num2 = res.disable
+	}).finally(() => loopRquest(getProductCount))
+}
 
-		// 告警数量-月
-		function getDeviceAlarmLevelCountMonth() {
-			api.iotManage.deviceAlarmLevelCount('month', dayjs().format('M')).then((res: any) => {
-				const total = (res.data || []).reduce((a: any, b: any) => a + b.Value, 0)
-				state.homeOne[3].num1 = total;
-			}).finally(() => loopRquest(getDeviceAlarmLevelCountMonth))
-		}
+// 设备数据总数
+function getDeviceDataTotalCount() {
+	api.iotManage.deviceDataTotalCount('year').then((res: any) => {
+		state.homeOne[2].allnum = res.number;
+	}).finally(() => loopRquest(getDeviceDataTotalCount))
+}
 
-		// 告警数量-日
-		function getDeviceAlarmLevelCountDay() {
-			api.iotManage.deviceAlarmLevelCount('day', dayjs().format('D')).then((res: any) => {
-				const total = (res.data || []).reduce((a: any, b: any) => a + b.Value, 0)
-				state.homeOne[3].num2 = total;
-			}).finally(() => loopRquest(getDeviceAlarmLevelCountDay))
-		}
+// 设备数据总数-月
+function getDeviceDataTotalCountMonth() {
+	api.iotManage.deviceDataTotalCount('month').then((res: any) => {
+		state.homeOne[2].num1 = res.number;
+	}).finally(() => loopRquest(getDeviceDataTotalCountMonth))
+}
 
-		const getAlarmList = () => {
-			api.iotManage.getAlarmList(state.tableData.param).then((res: any) => {
-				state.tableData.data = res.list;
-				state.tableData.total = res.Total;
-			})
-		}
-		//打开详情页
-		const onOpenDetailDic = (row: any) => {
-			detailRef.value.openDialog(row);
-		};
-		// 打开修改产品弹窗
-		const onOpenEditDic = (row: any) => {
-			editDicRef.value.openDialog(row);
-		};
-		// 告警信息-更多信息
-		const toMore = () => {
-			router.push({ path: '/iotmanager/alarm/log' });
-		};
-		// 页面加载时
-		onMounted(() => {
-			initEchartsResize();
-			getOverviewData();
-			getAlarmList();
-		});
-		// 由于页面缓存原因，keep-alive
-		onActivated(() => {
-			initEchartsResizeFun();
-		});
-		// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
-		watch(
-			() => store.state.tagsViewRoutes.isTagsViewCurrenFull,
-			() => {
-				initEchartsResizeFun();
-			}
-		);
-		watch(
-			() => state.lineChartAlarmTotalData,
-			() => {
+// 设备数据总数-月
+function getDeviceDataTotalCountDay() {
+	api.iotManage.deviceDataTotalCount('day').then((res: any) => {
+		state.homeOne[2].num2 = res.number;
+	}).finally(() => loopRquest(getDeviceDataTotalCountDay))
+}
+
+// 设备数量
+function getDeviceOnlineOfflineCount() {
+	api.iotManage.deviceOnlineOfflineCount().then((res: any) => {
+		state.homeOne[1].allnum = res.online;
+		state.homeOne[1].num1 = res.total - res.disable
+		state.homeOne[1].num2 = res.disable
+	}).finally(() => loopRquest(getDeviceOnlineOfflineCount))
+}
+
+// 告警数量-年
+function getDeviceAlarmLevelCountYear() {
+	api.iotManage.deviceAlarmLevelCount('year', dayjs().format('YYYY')).then((res: any) => {
+		const list = (res.data || [])
+		const total = list.reduce((a: any, b: any) => a + b.Value, 0)
+		state.homeOne[3].allnum = total;
+	}).finally(() => loopRquest(getDeviceAlarmLevelCountYear))
+}
+
+// 告警数量-月
+function getDeviceAlarmLevelCountMonth() {
+	api.iotManage.deviceAlarmLevelCount('month', dayjs().format('M')).then((res: any) => {
+		const total = (res.data || []).reduce((a: any, b: any) => a + b.Value, 0)
+		state.homeOne[3].num1 = total;
+	}).finally(() => loopRquest(getDeviceAlarmLevelCountMonth))
+}
+
+// 告警数量-日
+function getDeviceAlarmLevelCountDay() {
+	api.iotManage.deviceAlarmLevelCount('day', dayjs().format('D')).then((res: any) => {
+		const total = (res.data || []).reduce((a: any, b: any) => a + b.Value, 0)
+		state.homeOne[3].num2 = total;
+	}).finally(() => loopRquest(getDeviceAlarmLevelCountDay))
+}
+
+const getAlarmList = () => {
+	api.iotManage.getAlarmList(state.tableData.param).then((res: any) => {
+		state.tableData.data = res.list;
+		state.tableData.total = res.Total;
+	})
+}
+//打开详情页
+const onOpenDetailDic = (row: any) => {
+	detailRef.value.openDialog(row);
+};
+// 打开修改产品弹窗
+const onOpenEditDic = (row: any) => {
+	editDicRef.value.openDialog(row);
+};
+// 告警信息-更多信息
+const toMore = () => {
+	router.push({ path: '/iotmanager/alarm/log' });
+};
+// 页面加载时
+onMounted(() => {
+	initEchartsResize();
+	getOverviewData();
+	getAlarmList();
+});
+// 由于页面缓存原因，keep-alive
+onActivated(initEchartsResizeFun);
+// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
+watch(() => store.state.tagsViewRoutes.isTagsViewCurrenFull, initEchartsResizeFun);
+watch(() => state.lineChartAlarmTotalData, initLineChart);
+watch(() => state.pieChartData, initPieChart);
+// 监听 vuex 中是否开启深色主题
+watch(
+	() => store.state.themeConfig.themeConfig.isIsDark,
+	(isIsDark) => {
+		nextTick(() => {
+			state.charts.theme = isIsDark ? 'dark' : '';
+			state.charts.bgColor = isIsDark ? 'transparent' : '';
+			state.charts.color = isIsDark ? '#dadada' : '#303133';
+			setTimeout(() => {
 				initLineChart();
-			}
-		);
-		watch(
-			() => state.pieChartData,
-			() => {
+			}, 500);
+			setTimeout(() => {
 				initPieChart();
-			}
-		);
-		// 监听 vuex 中是否开启深色主题
-		watch(
-			() => store.state.themeConfig.themeConfig.isIsDark,
-			(isIsDark) => {
-				nextTick(() => {
-					state.charts.theme = isIsDark ? 'dark' : '';
-					state.charts.bgColor = isIsDark ? 'transparent' : '';
-					state.charts.color = isIsDark ? '#dadada' : '#303133';
-					setTimeout(() => {
-						initLineChart();
-					}, 500);
-					setTimeout(() => {
-						initPieChart();
-					}, 700);
-				});
-			},
-			{
-				deep: true,
-				immediate: true,
-			}
-		);
-		watch(
-			() => state.lineChartMsgTotalData,
-			() => {
-				initLineChart();
-			}
-		);
-		return {
-			homeLineRef,
-			config,
-			dataset,
-			homePieRef,
-			homeBarRef,
-			detailRef,
-			editDicRef,
-			toMore,
-			onOpenEditDic,
-			getAlarmList,
-			onOpenDetailDic,
-			getOverviewData,
-			...toRefs(state),
-		};
+			}, 700);
+		});
 	},
-});
+	{
+		deep: true,
+		immediate: true,
+	}
+);
+watch(() => state.lineChartMsgTotalData, initLineChart);
 </script>
 
 <style scoped lang="scss">