fix: 兼容物联概览饼图没数据情况在的显示

src/utils/dataUiOptions.ts

@@ -324,7 +324,7 @@ export function getPieData({ datas = [] as number[][], legend = [] as string[],
           "show": false,
         },
         "legend": {
-          "show": true,
+          "show": legend.length > 1,
           "bold": false,
           "backgroundColor": "transparent",
           "fontSize": 14,

src/views/iot/iotmanager/dashboard.vue

@@ -1,210 +1,126 @@
 <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 { 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 { 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'
 
 // 页面是显示状态
-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);
+const config = ref<any>(chartData.config)
+const dataset = ref<any[]>(chartData.dataset)
 
 //#endregion
 
@@ -212,596 +128,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);
+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 { 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 router = useRouter();
+	() => 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",
-  },
-});
-
-const { loading, tableData, homeOne } = toRefs(state);
+	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 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 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));
+	// 获取年度消息，年度告警数量
+	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)
+			console.log(list)
+
+			if (list.length) {
+				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>