增加时间筛选

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

@@ -45,7 +45,20 @@
     </div>
     <div class="flex-row" style="gap: 12px">
       <el-card shadow="nover">
-        <div class="title">告警统计</div>
+        <div class="title">
+          告警统计
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-value="[defaultStartDate, defaultEndDate]"
+            @change="handleDateChange"
+            size="small"
+            style="margin-left: 10px; width: 240px"
+          />
+        </div>
         <VueUiXy v-if="dataset4?.length" :config="config4" :dataset="dataset4" />
         <VueUiSkeleton v-else :config="{ type: 'bar' }" />
       </el-card>
@@ -131,6 +144,14 @@ const todayCount = reactive({
 
 const alarmNewList = ref<any[]>([]);
 
+const defaultStartDate = dayjs().subtract(7, "day").toDate();
+const defaultEndDate = dayjs().toDate();
+const dateRange = ref([defaultStartDate, defaultEndDate]);
+
+const handleDateChange = () => {
+  getAlarmStatistics();
+};
+
 getData();
 
 function getData() {
@@ -149,10 +170,28 @@ function getData() {
     alarmNewList.value = res || [];
   });
   // 告警统计
+  getAlarmStatistics();
+  // 告警设备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)],
+      width: 300,
+      height: 300,
+      responsive: true,
+    });
+    config2.value = chartData.config;
+    dataset2.value = chartData.dataset;
+  });
+}
+
+function getAlarmStatistics() {
   api.dashboard
     .getAlarmStatistics({
-      startDate: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
-      endDate: dayjs().format("YYYY-MM-DD"),
+      startDate: dayjs(dateRange.value[0]).format("YYYY-MM-DD"),
+      endDate: dayjs(dateRange.value[1]).format("YYYY-MM-DD"),
     })
     .then((res: any) => {
       console.log(res);
@@ -170,20 +209,6 @@ function getData() {
       config4.value = chartData.config;
       dataset4.value = chartData.dataset;
     });
-  // 告警设备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)],
-      width: 300,
-      height: 300,
-      responsive: true,
-    });
-    config2.value = chartData.config;
-    dataset2.value = chartData.dataset;
-  });
 }
 </script>