fix: 修复告警页面的多余文字

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

@@ -1,475 +1,447 @@
 <template>
-  <div class="page">
-    <div class="flex-row" style="gap: 12px">
-      <el-card shadow="nover">
-        <div class="title flex-row">
-          <div class="">
-            今日告警 <el-tag size="small">{{ todayCount.currentDayCount }}</el-tag>
-          </div>
-          <div>
-            本月告警 <el-tag size="small">{{ todayCount.currentMonthCount }}</el-tag>
-          </div>
-        </div>
-        <VueUiXy v-if="dataset?.length" :config="config" :dataset="dataset" />
-        <VueUiSkeleton v-else :config="{ type: 'bar' }" />
-      </el-card>
-      <el-card shadow="nover">
-        <div class="title">告警设备top10</div>
-        <VueUiXy v-if="dataset2?.length" :config="config2" :dataset="dataset2" />
-        <VueUiSkeleton v-else :config="{ type: 'bar' }" /> </el-card
-      >ƒ
-      <el-card shadow="nover">
-        <div class="title">最新告警</div>
-        <el-table
-          class="flex1"
-          :data="alarmNewList"
-          border
-          style="width: 100%"
-          size="small"
-        >
-          <el-table-column prop="createdAt" label="告警日期" width="140" align="center" />
-          <el-table-column
-            prop="status"
-            :formatter="(row:any) => (row.status ? '已处理' : '未处理')"
-            label="告警状态"
-            width="70"
-            align="center"
-          />
-          <el-table-column
-            prop="level"
-            label="告警等级"
-            :formatter="(row:any) => typeFormat(row.level)"
-            width="100"
-            align="center"
-          />
-          <el-table-column
-            prop="ruleName"
-            label="告警说明"
-            show-overflow-tooltip
-            aign="center"
-          />
-        </el-table>
-      </el-card>
-    </div>
-    <div class="flex-row" style="gap: 12px">
-      <el-card shadow="nover">
-        <div class="title">
-          告警统计
-          <el-date-picker
-            v-model="dateRange"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            @change="getAlarmStatistics"
-            format="YYYY-MM-DD"
-            value-format="YYYY-MM-DD"
-            size="small"
-            style="max-width: 200px"
-            :clearable="false"
-            :disabledDate="disabledDate"
-          />
-        </div>
-        <VueUiXy v-if="dataset4?.length" :config="config4" :dataset="dataset4" />
-        <VueUiSkeleton v-else :config="{ type: 'bar' }" />
-      </el-card>
-      <el-card shadow="nover">
-        <div class="title">告警增长趋势</div>
-        <VueUiXy v-if="dataset5?.length" :config="config5" :dataset="dataset5" />
-        <VueUiSkeleton v-else :config="{ type: 'donut' }" />
-      </el-card>
-      <el-card shadow="nover">
-        <div class="title">
-          部门告警分析
-          <el-date-picker
-            v-model="deptAlarmDate"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            @change="getDeptAlarm"
-            format="YYYY-MM-DD"
-            value-format="YYYY-MM-DD"
-            size="small"
-            style="max-width: 200px"
-            :clearable="false"
-            :disabledDate="disabledDate"
-          />
-        </div>
-        <VueUiXy v-if="dataset6?.length" :config="config6" :dataset="dataset6" />
-        <VueUiSkeleton v-else :config="{ type: 'bar' }" />
-      </el-card>
-    </div>
-    <div class="flex-row" style="gap: 12px">
-      <el-card shadow="nover">
-        <div class="title">
-          告警状态
-          <el-date-picker
-            v-model="alarmStatusDate"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            @change="getAlarmStatus"
-            format="YYYY-MM-DD"
-            value-format="YYYY-MM-DD"
-            size="small"
-            style="max-width: 200px"
-            :clearable="false"
-            :disabledDate="disabledDate"
-          />
-        </div>
-        <VueUiDonut v-if="dataset7?.length" :config="config7" :dataset="dataset7" />
-        <VueUiSkeleton v-else :config="{ type: 'donut' }" />
-      </el-card>
-      <el-card shadow="nover">
-        <div class="title">
-          告警等级
-          <el-date-picker
-            v-model="alarmLevelDate"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            format="YYYY-MM-DD"
-            value-format="YYYY-MM-DD"
-            @change="getAlarmLevel"
-            size="small"
-            style="max-width: 200px"
-            :clearable="false"
-            :disabledDate="disabledDate"
-          />
-        </div>
-        <VueUiXy v-if="dataset9?.length" :config="config9" :dataset="dataset9" />
-        <VueUiSkeleton v-else :config="{ type: 'bar' }" />
-      </el-card>
-      <el-card shadow="nover">
-        <div class="title">
-          告警类型
-          <el-date-picker
-            v-model="alarmTypeDate"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            format="YYYY-MM-DD"
-            value-format="YYYY-MM-DD"
-            @change="getAlarmType"
-            size="small"
-            style="max-width: 200px"
-            :clearable="false"
-            :disabledDate="disabledDate"
-          />
-        </div>
-        <VueUiDonut v-if="dataset8?.length" :config="config8" :dataset="dataset8" />
-        <VueUiSkeleton v-else :config="{ type: 'donut' }" />
-      </el-card>
-    </div>
-  </div>
+	<div class="page">
+		<div class="flex-row" style="gap: 12px">
+			<el-card shadow="nover">
+				<div class="title flex-row">
+					<div class="">
+						今日告警 <el-tag size="small">{{ todayCount.currentDayCount }}</el-tag>
+					</div>
+					<div>
+						本月告警 <el-tag size="small">{{ todayCount.currentMonthCount }}</el-tag>
+					</div>
+				</div>
+				<VueUiXy v-if="dataset?.length" :config="config" :dataset="dataset" />
+				<VueUiSkeleton v-else :config="{ type: 'bar' }" />
+			</el-card>
+			<el-card shadow="nover">
+				<div class="title">告警设备top10</div>
+				<VueUiXy v-if="dataset2?.length" :config="config2" :dataset="dataset2" />
+				<VueUiSkeleton v-else :config="{ type: 'bar' }" />
+			</el-card>
+			<el-card shadow="nover">
+				<div class="title">最新告警</div>
+				<el-table class="flex1" :data="alarmNewList" border style="width: 100%" size="small">
+					<el-table-column prop="createdAt" label="告警日期" width="140" align="center" />
+					<el-table-column prop="status" :formatter="(row:any) => (row.status ? '已处理' : '未处理')" label="告警状态" width="70" align="center" />
+					<el-table-column prop="level" label="告警等级" :formatter="(row:any) => typeFormat(row.level)" width="100" align="center" />
+					<el-table-column prop="ruleName" label="告警说明" show-overflow-tooltip aign="center" />
+				</el-table>
+			</el-card>
+		</div>
+		<div class="flex-row" style="gap: 12px">
+			<el-card shadow="nover">
+				<div class="title">
+					告警统计
+					<el-date-picker
+						v-model="dateRange"
+						type="daterange"
+						range-separator="至"
+						start-placeholder="开始日期"
+						end-placeholder="结束日期"
+						@change="getAlarmStatistics"
+						format="YYYY-MM-DD"
+						value-format="YYYY-MM-DD"
+						size="small"
+						style="max-width: 200px"
+						:clearable="false"
+						:disabledDate="disabledDate"
+					/>
+				</div>
+				<VueUiXy v-if="dataset4?.length" :config="config4" :dataset="dataset4" />
+				<VueUiSkeleton v-else :config="{ type: 'bar' }" />
+			</el-card>
+			<el-card shadow="nover">
+				<div class="title">告警增长趋势</div>
+				<VueUiXy v-if="dataset5?.length" :config="config5" :dataset="dataset5" />
+				<VueUiSkeleton v-else :config="{ type: 'donut' }" />
+			</el-card>
+			<el-card shadow="nover">
+				<div class="title">
+					部门告警分析
+					<el-date-picker
+						v-model="deptAlarmDate"
+						type="daterange"
+						range-separator="至"
+						start-placeholder="开始日期"
+						end-placeholder="结束日期"
+						@change="getDeptAlarm"
+						format="YYYY-MM-DD"
+						value-format="YYYY-MM-DD"
+						size="small"
+						style="max-width: 200px"
+						:clearable="false"
+						:disabledDate="disabledDate"
+					/>
+				</div>
+				<VueUiXy v-if="dataset6?.length" :config="config6" :dataset="dataset6" />
+				<VueUiSkeleton v-else :config="{ type: 'bar' }" />
+			</el-card>
+		</div>
+		<div class="flex-row" style="gap: 12px">
+			<el-card shadow="nover">
+				<div class="title">
+					告警状态
+					<el-date-picker
+						v-model="alarmStatusDate"
+						type="daterange"
+						range-separator="至"
+						start-placeholder="开始日期"
+						end-placeholder="结束日期"
+						@change="getAlarmStatus"
+						format="YYYY-MM-DD"
+						value-format="YYYY-MM-DD"
+						size="small"
+						style="max-width: 200px"
+						:clearable="false"
+						:disabledDate="disabledDate"
+					/>
+				</div>
+				<VueUiDonut v-if="dataset7?.length" :config="config7" :dataset="dataset7" />
+				<VueUiSkeleton v-else :config="{ type: 'donut' }" />
+			</el-card>
+			<el-card shadow="nover">
+				<div class="title">
+					告警等级
+					<el-date-picker
+						v-model="alarmLevelDate"
+						type="daterange"
+						range-separator="至"
+						start-placeholder="开始日期"
+						end-placeholder="结束日期"
+						format="YYYY-MM-DD"
+						value-format="YYYY-MM-DD"
+						@change="getAlarmLevel"
+						size="small"
+						style="max-width: 200px"
+						:clearable="false"
+						:disabledDate="disabledDate"
+					/>
+				</div>
+				<VueUiXy v-if="dataset9?.length" :config="config9" :dataset="dataset9" />
+				<VueUiSkeleton v-else :config="{ type: 'bar' }" />
+			</el-card>
+			<el-card shadow="nover">
+				<div class="title">
+					告警类型
+					<el-date-picker
+						v-model="alarmTypeDate"
+						type="daterange"
+						range-separator="至"
+						start-placeholder="开始日期"
+						end-placeholder="结束日期"
+						format="YYYY-MM-DD"
+						value-format="YYYY-MM-DD"
+						@change="getAlarmType"
+						size="small"
+						style="max-width: 200px"
+						:clearable="false"
+						:disabledDate="disabledDate"
+					/>
+				</div>
+				<VueUiDonut v-if="dataset8?.length" :config="config8" :dataset="dataset8" />
+				<VueUiSkeleton v-else :config="{ type: 'donut' }" />
+			</el-card>
+		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { unref, reactive, getCurrentInstance, ref } from "vue";
-import { VueUiXy, VueUiDonut, VueUiSkeleton } from "vue-data-ui";
-import "vue-data-ui/style.css";
-import { getBarData, getPieSmallData } from "/@/utils/dataUiOptions";
-import api from "/@/api/alarm";
-import { useThemeChange } from "/@/hooks/useCommon";
-import dayjs from "dayjs";
+import { unref, reactive, getCurrentInstance, ref } from 'vue'
+import { VueUiXy, VueUiDonut, VueUiSkeleton } from 'vue-data-ui'
+import 'vue-data-ui/style.css'
+import { getBarData, getPieSmallData } from '/@/utils/dataUiOptions'
+import api from '/@/api/alarm'
+import { useThemeChange } from '/@/hooks/useCommon'
+import dayjs from 'dayjs'
 
-const { proxy } = getCurrentInstance() as any;
-const { alarm_type } = proxy.useDict("alarm_type");
+const { proxy } = getCurrentInstance() as any
+const { alarm_type } = proxy.useDict('alarm_type')
 
-const disabledDate = (time: any) => time.getTime() > Date.now();
+const disabledDate = (time: any) => time.getTime() > Date.now()
 
 function typeFormat(type: string) {
-  return proxy.selectDictLabel(unref(alarm_type), type);
+	return proxy.selectDictLabel(unref(alarm_type), type)
 }
 
-const config = ref<any>({});
-const config2 = ref<any>({});
-const config4 = ref<any>({});
-const config5 = ref<any>({});
-const config6 = ref<any>({});
-const config7 = ref<any>({});
-const config8 = ref<any>({});
-const config9 = ref<any>({});
-const dataset = ref<any[]>([]);
-const dataset2 = ref<any[]>([]);
-const dataset4 = ref<any[]>([]);
-const dataset5 = ref<any[]>([]);
-const dataset6 = ref<any[]>([]);
-const dataset7 = ref<any[]>([]);
-const dataset8 = ref<any[]>([]);
-const dataset9 = ref<any[]>([]);
+const config = ref<any>({})
+const config2 = ref<any>({})
+const config4 = ref<any>({})
+const config5 = ref<any>({})
+const config6 = ref<any>({})
+const config7 = ref<any>({})
+const config8 = ref<any>({})
+const config9 = ref<any>({})
+const dataset = ref<any[]>([])
+const dataset2 = ref<any[]>([])
+const dataset4 = ref<any[]>([])
+const dataset5 = ref<any[]>([])
+const dataset6 = ref<any[]>([])
+const dataset7 = ref<any[]>([])
+const dataset8 = ref<any[]>([])
+const dataset9 = ref<any[]>([])
 
 // 监听暗黑模式变化，将 vue-data-ui 的 config 传进来，就能自动更新主题
-useThemeChange([config, config2, config4, config5, config6, config7, config8, config9]);
+useThemeChange([config, config2, config4, config5, config6, config7, config8, config9])
 
 const todayCount = reactive({
-  currentDayCount: "-",
-  currentMonthCount: "-",
-});
+	currentDayCount: '-',
+	currentMonthCount: '-',
+})
 
-const alarmNewList = ref<any[]>([]);
+const alarmNewList = ref<any[]>([])
 
-const defaultDateRange = [
-  dayjs().subtract(7, "day").format("YYYY-MM-DD"),
-  dayjs().format("YYYY-MM-DD"),
-];
-const dateRange = ref([...defaultDateRange]);
-const analyzeTrendDate = ref(dayjs().format("YYYY-MM"));
-const deptAlarmDate = ref([...defaultDateRange]);
-const alarmStatusDate = ref([...defaultDateRange]);
-const alarmTypeDate = ref([...defaultDateRange]);
-const alarmLevelDate = ref([...defaultDateRange]);
+const defaultDateRange = [dayjs().subtract(7, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
+const dateRange = ref([...defaultDateRange])
+const analyzeTrendDate = ref(dayjs().format('YYYY-MM'))
+const deptAlarmDate = ref([...defaultDateRange])
+const alarmStatusDate = ref([...defaultDateRange])
+const alarmTypeDate = ref([...defaultDateRange])
+const alarmLevelDate = ref([...defaultDateRange])
 
-getData();
+getData()
 
 function getData() {
-  // 今日告警信息
-  api.dashboard.getCurrentDayInfo().then((res: any) => {
-    const list = res?.data.alarmList || [];
-    todayCount.currentDayCount = res?.data?.currentDayCount;
-    todayCount.currentMonthCount = res?.data?.currentMonthCount;
+	// 今日告警信息
+	api.dashboard.getCurrentDayInfo().then((res: any) => {
+		const list = res?.data.alarmList || []
+		todayCount.currentDayCount = res?.data?.currentDayCount
+		todayCount.currentMonthCount = res?.data?.currentMonthCount
 
-    const chartData = getBarData({
-      xAxis: list.map((item: any) => item.alarmDate),
-      legend: ["今日告警"],
-      datas: [list.map((item: any) => item.alarmCount)],
-      width: 300,
-      height: 300,
-      colors: ["#4B79F2"],
-      modulo: 3,
-      responsive: true,
-    });
-    config.value = chartData.config;
-    dataset.value = chartData.dataset;
-  });
-  // 最新告警
-  api.dashboard.getAlarmNewList().then((res: any) => {
-    alarmNewList.value = res || [];
-  });
-  // 告警统计
-  getAlarmStatistics();
-  // 告警趋势统计
-  getAnalyzeTrend();
-  // 部门告警统计
-  getDeptAlarm();
-  // 告警状态统计
-  getAlarmStatus();
-  // 告警类型统计
-  getAlarmType();
-  // 告警等级统计
-  getAlarmLevel();
-  // 告警设备top10
-  api.dashboard.getDeviceAlarmTop10().then((res: any) => {
-    const list = res || [];
-    const chartData = getBarData({
-      xAxis: list.map((item: any) => item.deviceName),
-      legend: ["告警设备top10"],
-      datas: [list.map((item: any) => item.alarmCount)],
-      colors: ["#FF7D5C"],
-      responsive: true,
-    });
-    config2.value = chartData.config;
-    dataset2.value = chartData.dataset;
-  });
+		const chartData = getBarData({
+			xAxis: list.map((item: any) => item.alarmDate),
+			legend: ['今日告警'],
+			datas: [list.map((item: any) => item.alarmCount)],
+			width: 300,
+			height: 300,
+			colors: ['#4B79F2'],
+			modulo: 3,
+			responsive: true,
+		})
+		config.value = chartData.config
+		dataset.value = chartData.dataset
+	})
+	// 最新告警
+	api.dashboard.getAlarmNewList().then((res: any) => {
+		alarmNewList.value = res || []
+	})
+	// 告警统计
+	getAlarmStatistics()
+	// 告警趋势统计
+	getAnalyzeTrend()
+	// 部门告警统计
+	getDeptAlarm()
+	// 告警状态统计
+	getAlarmStatus()
+	// 告警类型统计
+	getAlarmType()
+	// 告警等级统计
+	getAlarmLevel()
+	// 告警设备top10
+	api.dashboard.getDeviceAlarmTop10().then((res: any) => {
+		const list = res || []
+		const chartData = getBarData({
+			xAxis: list.map((item: any) => item.deviceName),
+			legend: ['告警设备top10'],
+			datas: [list.map((item: any) => item.alarmCount)],
+			colors: ['#FF7D5C'],
+			responsive: true,
+		})
+		config2.value = chartData.config
+		dataset2.value = chartData.dataset
+	})
 }
 
 function getAlarmStatistics() {
-  api.dashboard
-    .getAlarmStatistics({
-      startDate: dateRange.value[0],
-      endDate: dateRange.value[1],
-    })
-    .then((res: any) => {
-      const list = res || [];
-      const chartData = getBarData({
-        xAxis: list.map((item: any) => item.alarmDate),
-        legend: ["告警统计"],
-        datas: [list.map((item: any) => item.alarmCount || 0)],
-        modulo: 3,
-        colors: ["#5AD8A6"],
-        responsive: true,
-      });
-      config4.value = chartData.config;
-      dataset4.value = chartData.dataset;
-    });
+	api.dashboard
+		.getAlarmStatistics({
+			startDate: dateRange.value[0],
+			endDate: dateRange.value[1],
+		})
+		.then((res: any) => {
+			const list = res || []
+			const chartData = getBarData({
+				xAxis: list.map((item: any) => item.alarmDate),
+				legend: ['告警统计'],
+				datas: [list.map((item: any) => item.alarmCount || 0)],
+				modulo: 3,
+				colors: ['#5AD8A6'],
+				responsive: true,
+			})
+			config4.value = chartData.config
+			dataset4.value = chartData.dataset
+		})
 }
 
 function getAnalyzeTrend() {
-  api.dashboard
-    .getAnalyzeTrend({
-      searchMonth: analyzeTrendDate.value,
-    })
-    .then((res: any) => {
-      const list = res || [];
-      const chartData = getBarData({
-        xAxis: list.map((item: any) => item.month),
-        legend: ["部门告警"],
-        datas: [list.map((item: any) => item.alarmCount)],
-        modulo: 5,
-        colors: ["#FFB64D"],
-        responsive: true,
-      });
-      config5.value = chartData.config;
-      dataset5.value = chartData.dataset;
-    });
+	api.dashboard
+		.getAnalyzeTrend({
+			searchMonth: analyzeTrendDate.value,
+		})
+		.then((res: any) => {
+			const list = res || []
+			const chartData = getBarData({
+				xAxis: list.map((item: any) => item.month),
+				legend: ['部门告警'],
+				datas: [list.map((item: any) => item.alarmCount)],
+				modulo: 5,
+				colors: ['#FFB64D'],
+				responsive: true,
+			})
+			config5.value = chartData.config
+			dataset5.value = chartData.dataset
+		})
 }
 
 function getDeptAlarm() {
-  api.dashboard
-    .getDeptAlarm({
-      startDate: deptAlarmDate.value[0],
-      endDate: deptAlarmDate.value[1],
-    })
-    .then((res: any) => {
-      const list = res || [];
-      const chartData = getBarData({
-        xAxis: list.map((item: any) => item.deptName),
-        legend: ["部门告警"],
-        datas: [list.map((item: any) => item.alarmCount)],
-        modulo: 5,
-        colors: ["#5B8FF9"],
-        responsive: true,
-      });
-      config6.value = chartData.config;
-      dataset6.value = chartData.dataset;
-    });
+	api.dashboard
+		.getDeptAlarm({
+			startDate: deptAlarmDate.value[0],
+			endDate: deptAlarmDate.value[1],
+		})
+		.then((res: any) => {
+			const list = res || []
+			const chartData = getBarData({
+				xAxis: list.map((item: any) => item.deptName),
+				legend: ['部门告警'],
+				datas: [list.map((item: any) => item.alarmCount)],
+				modulo: 5,
+				colors: ['#5B8FF9'],
+				responsive: true,
+			})
+			config6.value = chartData.config
+			dataset6.value = chartData.dataset
+		})
 }
 
 function getAlarmStatus() {
-  api.dashboard
-    .getAlarmStatus({
-      startDate: alarmStatusDate.value[0],
-      endDate: alarmStatusDate.value[1],
-    })
-    .then((res: any) => {
-      const list = res || [];
-      const chartData = getPieSmallData({
-        legend: list.map((item: any) => (item.status === "1" ? "已处理" : "未处理")),
-        datas: list.map((item: any) => [item.alarmCount]),
-        colors: ["#5AD8A6", "#E86452"],
-        responsive: true,
-      });
-      config7.value = chartData.config;
-      dataset7.value = chartData.dataset;
-    });
+	api.dashboard
+		.getAlarmStatus({
+			startDate: alarmStatusDate.value[0],
+			endDate: alarmStatusDate.value[1],
+		})
+		.then((res: any) => {
+			const list = res || []
+			const chartData = getPieSmallData({
+				legend: list.map((item: any) => (item.status === '1' ? '已处理' : '未处理')),
+				datas: list.map((item: any) => [item.alarmCount]),
+				colors: ['#5AD8A6', '#E86452'],
+				responsive: true,
+			})
+			config7.value = chartData.config
+			dataset7.value = chartData.dataset
+		})
 }
 
 function getAlarmType() {
-  api.dashboard
-    .getAlarmType({
-      startDate: alarmTypeDate.value[0],
-      endDate: alarmTypeDate.value[1],
-    })
-    .then((res: any) => {
-      const list = res || [];
-      const chartData = getPieSmallData({
-        legend: list.map((item: any) =>
-          item.alarmType === "1" ? "规则告警" : "自助上报告警"
-        ),
-        datas: list.map((item: any) => [item.alarmCount]),
-        colors: ["#7453E5", "#FFB64D"],
-        responsive: true,
-      });
-      config8.value = chartData.config;
-      dataset8.value = chartData.dataset;
-    });
+	api.dashboard
+		.getAlarmType({
+			startDate: alarmTypeDate.value[0],
+			endDate: alarmTypeDate.value[1],
+		})
+		.then((res: any) => {
+			const list = res || []
+			const chartData = getPieSmallData({
+				legend: list.map((item: any) => (item.alarmType === '1' ? '规则告警' : '自助上报告警')),
+				datas: list.map((item: any) => [item.alarmCount]),
+				colors: ['#7453E5', '#FFB64D'],
+				responsive: true,
+			})
+			config8.value = chartData.config
+			dataset8.value = chartData.dataset
+		})
 }
 
 function getAlarmLevel() {
-  api.dashboard
-    .getAlarmLevel({
-      startDate: alarmLevelDate.value[0],
-      endDate: alarmLevelDate.value[1],
-    })
-    .then((res: any) => {
-      const list = res || [];
-      const chartData = getBarData({
-        xAxis: list.map((item: any) => item.levelName),
-        legend: ["告警等级"],
-        datas: [list.map((item: any) => item.alarmCount)],
-        modulo: 3,
-        colors: ["#269A99"],
-        responsive: true,
-      });
-      config9.value = chartData.config;
-      dataset9.value = chartData.dataset;
-    });
+	api.dashboard
+		.getAlarmLevel({
+			startDate: alarmLevelDate.value[0],
+			endDate: alarmLevelDate.value[1],
+		})
+		.then((res: any) => {
+			const list = res || []
+			const chartData = getBarData({
+				xAxis: list.map((item: any) => item.levelName),
+				legend: ['告警等级'],
+				datas: [list.map((item: any) => item.alarmCount)],
+				modulo: 3,
+				colors: ['#269A99'],
+				responsive: true,
+			})
+			config9.value = chartData.config
+			dataset9.value = chartData.dataset
+		})
 }
 </script>
 
 <style scoped lang="scss">
 .page {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: 12px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	gap: 12px;
 
-  .vue-ui-skeleton {
-    height: 100%;
+	.vue-ui-skeleton {
+		height: 100%;
 
-    & ::v-deep > svg {
-      height: 100%;
-    }
-  }
+		& ::v-deep > svg {
+			height: 100%;
+		}
+	}
 
-  .title {
-    font-size: 14px;
-    color: #333;
-    font-weight: 500;
-    line-height: 1;
-    height: 24px;
-    min-height: 24px;
-    margin-bottom: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
+	.title {
+		font-size: 14px;
+		color: #333;
+		font-weight: 500;
+		line-height: 1;
+		height: 24px;
+		min-height: 24px;
+		margin-bottom: 6px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
 
-  .flex-row {
-    flex: 1;
+	.flex-row {
+		flex: 1;
 
-    .el-card {
-      height: 100%;
-      flex: 1;
-      // overflow: hidden;
-      box-sizing: border-box;
+		.el-card {
+			height: 100%;
+			flex: 1;
+			// overflow: hidden;
+			box-sizing: border-box;
 
-      & ::v-deep .el-card__body {
-        padding: 1.5vh 1vw;
-        // gap: 10px;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        // overflow: hidden;
+			& ::v-deep .el-card__body {
+				padding: 1.5vh 1vw;
+				// gap: 10px;
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				// overflow: hidden;
 
-        .vue-ui-xy,
-        .vue-ui-donut,
-        .vue-ui-skeleton {
-          // flex: 1 !important;
-          height: calc(100% - 30px) !important;
-          // overflow: auto;
-          // display: flex;
-          // flex-direction: column;
-          // justify-content: center;
-          // align-items: center;
-          &-svg {
-            height: 100%;
-          }
-          .vue-data-ui-fulscreen--off {
-            height: 100%;
-          }
-        }
+				.vue-ui-xy,
+				.vue-ui-donut,
+				.vue-ui-skeleton {
+					// flex: 1 !important;
+					height: calc(100% - 30px) !important;
+					// overflow: auto;
+					// display: flex;
+					// flex-direction: column;
+					// justify-content: center;
+					// align-items: center;
+					&-svg {
+						height: 100%;
+					}
+					.vue-data-ui-fulscreen--off {
+						height: 100%;
+					}
+				}
 
-        .vue-ui-skeleton {
-          overflow: hidden;
-        }
-      }
-    }
-  }
+				.vue-ui-skeleton {
+					overflow: hidden;
+				}
+			}
+		}
+	}
 }
 </style>