fix: 修复物联概览页面线图中预警量月份数据不全导致的数据显示异常

src/views/iot/alarm/dashboard/index.vue

@@ -172,12 +172,7 @@
 import { unref, reactive, getCurrentInstance, ref } from "vue";
 import { VueUiXy, VueUiDonut, VueUiSkeleton } from "vue-data-ui";
 import "vue-data-ui/style.css";
-import {
-  getBarData,
-  getLineData,
-  getPieData,
-  getPieSmallData,
-} from "/@/utils/dataUiOptions";
+import { getBarData, getPieSmallData } from "/@/utils/dataUiOptions";
 import api from "/@/api/alarm";
 import { useThemeChange } from "/@/hooks/useCommon";
 import dayjs from "dayjs";

src/views/iot/iotmanager/dashboard.vue

@@ -1,112 +1,207 @@
 <template>
-	<div class="home-container">
-		<el-row :gutter="15" class="home-card-one mb15">
-			<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(v, k) in homeOne" :key="k" :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }">
-				<div class="home-card-top-part">
-					<div class="top">
-						<img :src="'/imgs/' + v.icoimg" class="icoimg">
-						<div class="card-right">
-							<span class="font30">{{ v.allnum }}</span>
-							<div class="label">{{ v.num3 }}</div>
-						</div>
-					</div>
-					<div class="divider"></div>
-					<div class="card-bottom">
-						<div class="flex" style="gap:10px">
-							<img src="/@/assets/ok.svg" v-if="k < 2" alt="" class="icon">
-							<img src="/@/assets/date.svg" v-else alt="" class="icon">
-							<span class="info" :style="{ color: v.title1_bgcolor }">{{ v.title1 }}</span>
-							<div class="num"> {{ v.num1 }}</div>
-						</div>
-						<div class="split"></div>
-						<div class="flex" style="gap:10px">
-							<img src="/@/assets/stop.svg" v-if="k < 2" alt="" class="icon">
-							<img src="/@/assets/today.svg" v-else alt="" class="icon">
-							<span class="info" :style="{ color: v.title2_bgcolor }">{{ v.title2 }}</span>
-							<div class="num"> {{ v.num2 }}</div>
-						</div>
-					</div>
-				</div>
-			</el-col>
-		</el-row>
-		<div class="chart-wrapper">
-			<div class="chart-item" style="flex: 2">
-				<div class="chart-title">设备消息</div>
-				<VueUiXy :dataset="dataset" :config="config" />
-			</div>
-			<div class="chart-item">
-				<div class="chart-title">预警类型</div>
-				<VueUiDonut :dataset="pieDataset" :config="pieConfig" />
-			</div>
-		</div>
-		<el-row :gutter="15" class="home-card-three">
-			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-				<div class="home-card-item" style="height: auto;">
-					<div class="home-card-item-title">
-						<span>告警消息</span>
-						<el-button size="small" text type="primary" @click="toMore()">更多信息</el-button>
-					</div>
-					<el-table :data="tableData.data" style="width: 100%" v-loading="loading">
-						<el-table-column label="ID" align="center" prop="id" width="100" v-col="'ID'" />
-						<el-table-column label="告警类型" width="120" prop="type" align="center" show-overflow-tooltip v-col="'type'">
-							<template #default="scope">
-								<span v-if="scope.row.type == 1">规则告警</span>
-								<span v-else-if="scope.row.type == 2">设备自主告警</span>
-								<span v-else-if="scope.row.type == 3">规侧告警升级</span>
-								<span v-else>设备自主告警</span>
-							</template>
-						</el-table-column>
-						<el-table-column label="规则级别" width="120" align="center" prop="alarmLevel.name" show-overflow-tooltip v-col="'alarmLevel'" />
-						<el-table-column label="规则名称" prop="ruleName" show-overflow-tooltip v-col="'ruleName'" />
-						<el-table-column label="产品标识" prop="productKey" show-overflow-tooltip v-col="'productKey'" />
-						<el-table-column label="设备标识" prop="deviceKey" show-overflow-tooltip v-col="'deviceKey'" />
-
-						<el-table-column prop="status" label="告警状态" width="100" align="center" v-col="'status'">
-							<template #default="scope">
-								<el-tag type="success" size="small" v-if="scope.row.status">已处理</el-tag>
-								<el-tag type="info" size="small" v-else>未处理</el-tag>
-							</template>
-						</el-table-column>
-						<el-table-column prop="createdAt" label="告警时间" align="center" width="170" v-col="'createdAt'"></el-table-column>
-						<el-table-column label="操作" width="130" align="center" fixed="right" v-col="'handle'">
-							<template #default="scope">
-								<el-button v-auth="'detail'" size="small" text type="primary" @click="onOpenDetailDic(scope.row)">详情</el-button>
-								<el-button v-auth="'edit'" size="small" text type="warning" @click="onOpenEditDic(scope.row)" v-if="scope.row.status == 0">处理</el-button>
-							</template>
-						</el-table-column>
-					</el-table>
-				</div>
-			</el-col>
-		</el-row>
-
-		<EditDic ref="editDicRef" @dataList="getAlarmList" />
-		<DetailDic ref="detailRef" @dataList="getAlarmList" />
-	</div>
+  <div class="home-container">
+    <el-row :gutter="15" class="home-card-one mb15">
+      <el-col
+        :xs="24"
+        :sm="12"
+        :md="12"
+        :lg="6"
+        :xl="6"
+        v-for="(v, k) in homeOne"
+        :key="k"
+        :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }"
+      >
+        <div class="home-card-top-part">
+          <div class="top">
+            <img :src="'/imgs/' + v.icoimg" class="icoimg" />
+            <div class="card-right">
+              <span class="font30">{{ v.allnum }}</span>
+              <div class="label">{{ v.num3 }}</div>
+            </div>
+          </div>
+          <div class="divider"></div>
+          <div class="card-bottom">
+            <div class="flex" style="gap: 10px">
+              <img src="/@/assets/ok.svg" v-if="k < 2" alt="" class="icon" />
+              <img src="/@/assets/date.svg" v-else alt="" class="icon" />
+              <span class="info" :style="{ color: v.title1_bgcolor }">{{
+                v.title1
+              }}</span>
+              <div class="num">{{ v.num1 }}</div>
+            </div>
+            <div class="split"></div>
+            <div class="flex" style="gap: 10px">
+              <img src="/@/assets/stop.svg" v-if="k < 2" alt="" class="icon" />
+              <img src="/@/assets/today.svg" v-else alt="" class="icon" />
+              <span class="info" :style="{ color: v.title2_bgcolor }">{{
+                v.title2
+              }}</span>
+              <div class="num">{{ v.num2 }}</div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <div class="chart-wrapper">
+      <div class="chart-item" style="flex: 2">
+        <div class="chart-title">设备消息</div>
+        <VueUiXy :dataset="dataset" :config="config" />
+      </div>
+      <div class="chart-item">
+        <div class="chart-title">预警类型</div>
+        <VueUiDonut :dataset="pieDataset" :config="pieConfig" />
+      </div>
+    </div>
+    <el-row :gutter="15" class="home-card-three">
+      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+        <div class="home-card-item" style="height: auto">
+          <div class="home-card-item-title">
+            <span>告警消息</span>
+            <el-button size="small" text type="primary" @click="toMore()"
+              >更多信息</el-button
+            >
+          </div>
+          <el-table :data="tableData.data" style="width: 100%" v-loading="loading">
+            <el-table-column
+              label="ID"
+              align="center"
+              prop="id"
+              width="100"
+              v-col="'ID'"
+            />
+            <el-table-column
+              label="告警类型"
+              width="120"
+              prop="type"
+              align="center"
+              show-overflow-tooltip
+              v-col="'type'"
+            >
+              <template #default="scope">
+                <span v-if="scope.row.type == 1">规则告警</span>
+                <span v-else-if="scope.row.type == 2">设备自主告警</span>
+                <span v-else-if="scope.row.type == 3">规侧告警升级</span>
+                <span v-else>设备自主告警</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="规则级别"
+              width="120"
+              align="center"
+              prop="alarmLevel.name"
+              show-overflow-tooltip
+              v-col="'alarmLevel'"
+            />
+            <el-table-column
+              label="规则名称"
+              prop="ruleName"
+              show-overflow-tooltip
+              v-col="'ruleName'"
+            />
+            <el-table-column
+              label="产品标识"
+              prop="productKey"
+              show-overflow-tooltip
+              v-col="'productKey'"
+            />
+            <el-table-column
+              label="设备标识"
+              prop="deviceKey"
+              show-overflow-tooltip
+              v-col="'deviceKey'"
+            />
+
+            <el-table-column
+              prop="status"
+              label="告警状态"
+              width="100"
+              align="center"
+              v-col="'status'"
+            >
+              <template #default="scope">
+                <el-tag type="success" size="small" v-if="scope.row.status"
+                  >已处理</el-tag
+                >
+                <el-tag type="info" size="small" v-else>未处理</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="createdAt"
+              label="告警时间"
+              align="center"
+              width="170"
+              v-col="'createdAt'"
+            ></el-table-column>
+            <el-table-column
+              label="操作"
+              width="130"
+              align="center"
+              fixed="right"
+              v-col="'handle'"
+            >
+              <template #default="scope">
+                <el-button
+                  v-auth="'detail'"
+                  size="small"
+                  text
+                  type="primary"
+                  @click="onOpenDetailDic(scope.row)"
+                  >详情</el-button
+                >
+                <el-button
+                  v-auth="'edit'"
+                  size="small"
+                  text
+                  type="warning"
+                  @click="onOpenEditDic(scope.row)"
+                  v-if="scope.row.status == 0"
+                  >处理</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-col>
+    </el-row>
+
+    <EditDic ref="editDicRef" @dataList="getAlarmList" />
+    <DetailDic ref="detailRef" @dataList="getAlarmList" />
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { toRefs, reactive, onMounted, ref, watch, nextTick, onActivated, getCurrentInstance, onUnmounted } from 'vue';
-import { useRouter } from 'vue-router';
+import {
+  toRefs,
+  reactive,
+  onMounted,
+  ref,
+  watch,
+  nextTick,
+  onActivated,
+  getCurrentInstance,
+  onUnmounted,
+} from "vue";
+import { useRouter } from "vue-router";
 import { VueUiXy, VueUiDonut } from "vue-data-ui";
 import "vue-data-ui/style.css";
 import { getLineData, getPieData } from "/@/utils/dataUiOptions";
-import api from '/@/api/datahub';
-import dayjs from 'dayjs';
-import EditDic from '../alarm/log/component/edit.vue';
-import DetailDic from '../alarm/log/component/detail.vue';
-import { useThemeChange } from '/@/hooks/useCommon';
+import api from "/@/api/datahub";
+import dayjs from "dayjs";
+import EditDic from "../alarm/log/component/edit.vue";
+import DetailDic from "../alarm/log/component/detail.vue";
+import { useThemeChange } from "/@/hooks/useCommon";
 
 // 页面是显示状态
-let isActice = true
+let isActice = true;
 
 //#region 线图
 
 // 获取默认图形配置数据
 const chartData = getLineData({
-	xAxis: [],
-	legend: ['消息量', '预警量'],
-	datas: [[], []]
-})
+  xAxis: [],
+  legend: ["消息量", "预警量"],
+  datas: [[], []],
+});
 
 const config = ref<any>(chartData.config);
 const dataset = ref<any[]>(chartData.dataset);
@@ -117,555 +212,596 @@ const dataset = ref<any[]>(chartData.dataset);
 
 // 获取默认图形配置数据
 const pieData = getPieData({
-	legend: [' '],
-	datas: [[]]
-})
+  legend: [" "],
+  datas: [[]],
+});
 
 const pieConfig = ref<any>(pieData.config);
 const pieDataset = ref<any[]>(pieData.dataset);
 
 // 监听暗黑模式变化，将 vue-data-ui 的 config 传进来，就能自动更新主题
-useThemeChange([config, pieConfig])
+useThemeChange([config, pieConfig]);
 
 //#endregion
 
 onUnmounted(() => {
-	isActice = false
-})
+  isActice = false;
+});
 
 const { proxy } = getCurrentInstance() as any;
-const { alarm_type } = proxy.useDict('alarm_type');
-const alarmTypeMap: 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
-})
+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 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',
-	},
+  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",
+  },
 });
 
-const { loading, tableData, homeOne } = toRefs(state)
+const { loading, tableData, homeOne } = toRefs(state);
 
 // 定时获取设备，在线信息，告警数量更新
 const getOverviewData = () => {
-	getProductCount()
-	getDeviceDataTotalCount()
-	getDeviceDataTotalCountMonth()
-	getDeviceDataTotalCountDay()
-	getDeviceOnlineOfflineCount()
-	getDeviceAlarmLevelCountYear()
-	getDeviceAlarmLevelCountMonth()
-	getDeviceAlarmLevelCountDay()
-	// 图形数据
-	getDeviceDataCount()
+  getProductCount();
+  getDeviceDataTotalCount();
+  getDeviceDataTotalCountMonth();
+  getDeviceDataTotalCountDay();
+  getDeviceOnlineOfflineCount();
+  getDeviceAlarmLevelCountYear();
+  getDeviceAlarmLevelCountMonth();
+  getDeviceAlarmLevelCountDay();
+  // 图形数据
+  getDeviceDataCount();
 };
 
 // 普通数据3秒更新
-const intervalTimeLong = 3000
+const intervalTimeLong = 3000;
 
 function loopRquest(fun: Function, timeLong?: number) {
-	setTimeout(() => {
-		isActice && fun()
-	}, timeLong || intervalTimeLong)
+  setTimeout(() => {
+    isActice && fun();
+  }, timeLong || intervalTimeLong);
 }
 
 // 获取告警告警数量和消息数量绘图
 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 || []
-
-		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))
+  // 获取年度消息，年度告警数量
+  Promise.all([
+    api.iotManage.deviceDataCount("year"),
+    api.iotManage.deviceAlertCountByYearMonth(dayjs().format("YYYY")),
+  ])
+    .then(([msg, alarm]: any) => {
+      const msgArr = msg?.data || [];
+      const alarmArr = alarm?.data || [];
+
+      const dataNull = new Array(12).fill(0);
+      const month = dataNull.map((_, i) => i + 1);
+
+      const list1 = [...dataNull];
+      const list2 = [...dataNull];
+
+      msgArr.forEach((item: any) => {
+        list1[item.Title - 1] = item.Value;
+      });
+      alarmArr.forEach((item: any) => {
+        list2[item.Title - 1] = item.Value;
+      });
+
+      const chartData = getLineData({
+        xAxis: month,
+        legend: ["消息量", "预警量"],
+        datas: [list1, list2],
+      });
+
+      config.value = chartData.config;
+      dataset.value = chartData.dataset;
+    })
+    .finally(() => loopRquest(getDeviceDataCount, 60000));
 }
 
 // 获取告警告警数量和消息数量绘图
 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)
-
-		const pieData = getPieData({
-			legend: list.map((item: any) => alarmTypeMap[item.Title]),
-			types: list.map((item: any) => item.Title),
-			datas: list.map((item: any) => [item.Value])
-		})
-		pieConfig.value = pieData.config
-		pieDataset.value = pieData.dataset
-	}).finally(() => loopRquest(getDeviceAlarmLevelCount, 60000))
+  // 按告警级别统计 绘制饼图
+  api.iotManage
+    .deviceAlarmLevelCount("year", dayjs().format("YYYY"))
+    .then((res: any) => {
+      const list = (res.data || []).sort((a: any, b: any) => b.Title - a.Title);
+
+      const pieData = getPieData({
+        legend: list.map((item: any) => alarmTypeMap[item.Title]),
+        types: list.map((item: any) => item.Title),
+        datas: list.map((item: any) => [item.Value]),
+      });
+      pieConfig.value = pieData.config;
+      pieDataset.value = pieData.dataset;
+    })
+    .finally(() => loopRquest(getDeviceAlarmLevelCount, 60000));
 }
 
 // 产品数量
 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))
+  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 getDeviceDataTotalCount() {
-	api.iotManage.deviceDataTotalCount('year').then((res: any) => {
-		state.homeOne[2].allnum = res.number;
-	}).finally(() => loopRquest(getDeviceDataTotalCount))
+  api.iotManage
+    .deviceDataTotalCount("year")
+    .then((res: any) => {
+      state.homeOne[2].allnum = res.number;
+    })
+    .finally(() => loopRquest(getDeviceDataTotalCount));
 }
 
 // 设备数据总数-月
 function getDeviceDataTotalCountMonth() {
-	api.iotManage.deviceDataTotalCount('month').then((res: any) => {
-		state.homeOne[2].num1 = res.number;
-	}).finally(() => loopRquest(getDeviceDataTotalCountMonth))
+  api.iotManage
+    .deviceDataTotalCount("month")
+    .then((res: any) => {
+      state.homeOne[2].num1 = res.number;
+    })
+    .finally(() => loopRquest(getDeviceDataTotalCountMonth));
 }
 
 // 设备数据总数-月
 function getDeviceDataTotalCountDay() {
-	api.iotManage.deviceDataTotalCount('day').then((res: any) => {
-		state.homeOne[2].num2 = res.number;
-	}).finally(() => loopRquest(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))
+  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))
+  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))
+  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))
+  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;
-	})
-}
+  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);
+  detailRef.value.openDialog(row);
 };
 // 打开修改产品弹窗
 const onOpenEditDic = (row: any) => {
-	editDicRef.value.openDialog(row);
+  editDicRef.value.openDialog(row);
 };
 // 告警信息-更多信息
 const toMore = () => {
-	router.push({ path: '/iotmanager/alarm/log' });
+  router.push({ path: "/iotmanager/alarm/log" });
 };
 // 页面加载时
 onMounted(() => {
-	getOverviewData();
-	getAlarmList();
+  getOverviewData();
+  getAlarmList();
 });
-
 </script>
 
 <style scoped lang="scss">
 $homeNavLengh: 8;
 
 .chart-wrapper {
-	display: flex;
-	justify-content: space-between;
-	align-items: stretch;
-	gap: 16px;
-
-	.chart-item {
-		background-color: var(--el-color-white);
-		padding: 12px 15px;
-		border-radius: 8px;
-		margin-bottom: 16px;
-		flex: 1;
-		min-width: 200px;
-	}
-
-	.chart-title {
-		font-size: 15px;
-		font-weight: bold;
-		padding-left: 5px;
-	}
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  gap: 16px;
+
+  .chart-item {
+    background-color: var(--el-color-white);
+    padding: 12px 15px;
+    border-radius: 8px;
+    margin-bottom: 16px;
+    flex: 1;
+    min-width: 200px;
+  }
+
+  .chart-title {
+    font-size: 15px;
+    font-weight: bold;
+    padding-left: 5px;
+  }
 }
 
 .home-card-top-part {
-	background-color: var(--el-color-white);
-	border-radius: 8px;
-	padding: 20px 20px;
-
-	.top {
-		display: flex;
-		justify-content: space-around;
-		overflow: hidden;
-		align-items: center;
-	}
-
-	.icoimg {
-		width: 54px !important;
-		height: 54px !important;
-		margin-right: 12px;
-	}
-
-	.label {
-		font-size: 14px;
-		font-weight: 500;
-	}
-
-	.divider {
-		border-top: 1px solid var(--el-border-color-light);
-		margin: 12px 0 15px;
-
-	}
-
-	.card-right {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		white-space: nowrap;
-		line-height: 1;
-		height: 54px;
-
-		.font30 {
-			color: #4285F4;
-			font-weight: bold;
-			font-size: 30px;
-		}
-
-	}
-
-	.card-bottom {
-		font-size: 12px;
-		display: flex;
-		align-items: center;
-		justify-content: space-around;
-		gap: 12px;
-		white-space: nowrap;
-
-		.split {
-			border-right: 1px solid var(--el-border-color-light);
-			height: 20px;
-		}
-
-		.icon {
-			width: 17px;
-			height: 17px;
-
-		}
-
-		.info {
-			font-size: 12px;
-			font-weight: 500;
-		}
-	}
+  background-color: var(--el-color-white);
+  border-radius: 8px;
+  padding: 20px 20px;
+
+  .top {
+    display: flex;
+    justify-content: space-around;
+    overflow: hidden;
+    align-items: center;
+  }
+
+  .icoimg {
+    width: 54px !important;
+    height: 54px !important;
+    margin-right: 12px;
+  }
+
+  .label {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .divider {
+    border-top: 1px solid var(--el-border-color-light);
+    margin: 12px 0 15px;
+  }
+
+  .card-right {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    white-space: nowrap;
+    line-height: 1;
+    height: 54px;
+
+    .font30 {
+      color: #4285f4;
+      font-weight: bold;
+      font-size: 30px;
+    }
+  }
+
+  .card-bottom {
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    gap: 12px;
+    white-space: nowrap;
+
+    .split {
+      border-right: 1px solid var(--el-border-color-light);
+      height: 20px;
+    }
+
+    .icon {
+      width: 17px;
+      height: 17px;
+    }
+
+    .info {
+      font-size: 12px;
+      font-weight: 500;
+    }
+  }
 }
 
 .home-container {
-	overflow: hidden;
-
-	.home-card-one,
-	.home-card-two,
-	.home-card-three {
-		.icoimg {
-			width: 75px;
-			height: 75px;
-		}
-
-		.title_status {
-			width: 7px;
-			height: 7px;
-			background: #c1bbbb;
-			border-radius: 50px;
-			margin-right: 5px;
-		}
-
-		.home-card-item,
-		.home-card-top {
-			width: 100%;
-			border-radius: 8px;
-			transition: all ease 0.3s;
-			padding: 10px 20px;
-			overflow: hidden;
-			background: var(--el-color-white);
-			color: var(--el-text-color-primary);
-
-			// border: 1px solid var(--next-border-color-light);
-			&:hover {
-				// box-shadow: 0 2px 12px var(--next-color-dark-hover);
-				transition: all ease 0.3s;
-			}
-
-			&-icon {
-				width: 70px;
-				height: 70px;
-				border-radius: 100%;
-				flex-shrink: 1;
-
-				i {
-					color: var(--el-text-color-placeholder);
-				}
-			}
-
-			&-title {
-				font-size: 15px;
-				font-weight: bold;
-				height: 30px;
-			}
-		}
-	}
-
-	.home-card-three {
-		.home-card-item-title {
-			display: flex;
-			justify-content: space-between;
-			// span:nth-child(2) {
-			// 	color: #409eff;
-			// }
-		}
-	}
-
-	.home-card-one {
-		@for $i from 0 through 3 {
-			.home-one-animation#{$i} {
-				opacity: 0;
-				animation-name: error-num;
-				animation-duration: 0.5s;
-				animation-fill-mode: forwards;
-				animation-delay: calc($i/10) + s;
-			}
-		}
-	}
-
-	.home-card-two,
-	.home-card-three {
-		.home-card-top {
-			height: 250px;
-
-			.box-card {
-				padding: 15px 20px 20px 10px;
-
-				p {
-					margin-bottom: 10px;
-				}
-
-				&-item {
-					margin-bottom: 10px;
-				}
-			}
-		}
-
-		.home-card-item,
-		.home-card-top {
-			width: 100%;
-			overflow: hidden;
-
-			.home-monitor {
-				height: 100%;
-
-				.flex-warp-item {
-					width: 25%;
-					height: 111px;
-					display: flex;
-
-					.flex-warp-item-box {
-						margin: auto;
-						text-align: center;
-						color: var(--el-text-color-primary);
-						display: flex;
-						border-radius: 5px;
-						background: var(--next-bg-color);
-						cursor: pointer;
-						transition: all 0.3s ease;
-
-						&:hover {
-							background: var(--el-color-primary-light-9);
-							transition: all 0.3s ease;
-						}
-					}
-
-					@for $i from 0 through $homeNavLengh {
-						.home-animation#{$i} {
-							opacity: 0;
-							animation-name: error-num;
-							animation-duration: 0.5s;
-							animation-fill-mode: forwards;
-							animation-delay: calc($i/10) + s;
-						}
-					}
-				}
-			}
-		}
-	}
-
-	.text-info {
-		color: #23c6c8;
-	}
-
-	.text-danger {
-		color: #ed5565;
-	}
-
-	.git-res {
-		margin-top: 20px;
-	}
-
-	.git-res .el-link {
-		margin-right: 30px;
-	}
-
-	ul,
-	li {
-		padding: 0;
-		margin: 0;
-		list-style: none
-	}
-
-	.product {
-		margin-top: 50px;
-
-		h3 {
-			margin-bottom: 15px;
-		}
-	}
-
-	.product li {
-		margin-bottom: 20px;
-		float: left;
-		width: 150px;
-	}
-
-	.box-card.xx {
-		margin-top: 20px;
-	}
+  overflow: hidden;
+
+  .home-card-one,
+  .home-card-two,
+  .home-card-three {
+    .icoimg {
+      width: 75px;
+      height: 75px;
+    }
+
+    .title_status {
+      width: 7px;
+      height: 7px;
+      background: #c1bbbb;
+      border-radius: 50px;
+      margin-right: 5px;
+    }
+
+    .home-card-item,
+    .home-card-top {
+      width: 100%;
+      border-radius: 8px;
+      transition: all ease 0.3s;
+      padding: 10px 20px;
+      overflow: hidden;
+      background: var(--el-color-white);
+      color: var(--el-text-color-primary);
+
+      // border: 1px solid var(--next-border-color-light);
+      &:hover {
+        // box-shadow: 0 2px 12px var(--next-color-dark-hover);
+        transition: all ease 0.3s;
+      }
+
+      &-icon {
+        width: 70px;
+        height: 70px;
+        border-radius: 100%;
+        flex-shrink: 1;
+
+        i {
+          color: var(--el-text-color-placeholder);
+        }
+      }
+
+      &-title {
+        font-size: 15px;
+        font-weight: bold;
+        height: 30px;
+      }
+    }
+  }
+
+  .home-card-three {
+    .home-card-item-title {
+      display: flex;
+      justify-content: space-between;
+      // span:nth-child(2) {
+      // 	color: #409eff;
+      // }
+    }
+  }
+
+  .home-card-one {
+    @for $i from 0 through 3 {
+      .home-one-animation#{$i} {
+        opacity: 0;
+        animation-name: error-num;
+        animation-duration: 0.5s;
+        animation-fill-mode: forwards;
+        animation-delay: calc($i/10) + s;
+      }
+    }
+  }
+
+  .home-card-two,
+  .home-card-three {
+    .home-card-top {
+      height: 250px;
+
+      .box-card {
+        padding: 15px 20px 20px 10px;
+
+        p {
+          margin-bottom: 10px;
+        }
+
+        &-item {
+          margin-bottom: 10px;
+        }
+      }
+    }
+
+    .home-card-item,
+    .home-card-top {
+      width: 100%;
+      overflow: hidden;
+
+      .home-monitor {
+        height: 100%;
+
+        .flex-warp-item {
+          width: 25%;
+          height: 111px;
+          display: flex;
+
+          .flex-warp-item-box {
+            margin: auto;
+            text-align: center;
+            color: var(--el-text-color-primary);
+            display: flex;
+            border-radius: 5px;
+            background: var(--next-bg-color);
+            cursor: pointer;
+            transition: all 0.3s ease;
+
+            &:hover {
+              background: var(--el-color-primary-light-9);
+              transition: all 0.3s ease;
+            }
+          }
+
+          @for $i from 0 through $homeNavLengh {
+            .home-animation#{$i} {
+              opacity: 0;
+              animation-name: error-num;
+              animation-duration: 0.5s;
+              animation-fill-mode: forwards;
+              animation-delay: calc($i/10) + s;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .text-info {
+    color: #23c6c8;
+  }
+
+  .text-danger {
+    color: #ed5565;
+  }
+
+  .git-res {
+    margin-top: 20px;
+  }
+
+  .git-res .el-link {
+    margin-right: 30px;
+  }
+
+  ul,
+  li {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .product {
+    margin-top: 50px;
+
+    h3 {
+      margin-bottom: 15px;
+    }
+  }
+
+  .product li {
+    margin-bottom: 20px;
+    float: left;
+    width: 150px;
+  }
+
+  .box-card.xx {
+    margin-top: 20px;
+  }
 }
 
 .home-card-item.chart {
-	padding: 10px !important;
+  padding: 10px !important;
 }
 </style>