告警统计页面显示基本完成

src/utils/dataUiOptions.ts

@@ -99,9 +99,7 @@ export function getLineData({ xAxis = [] as any[], datas = [] as number[][], leg
   return { config, dataset }
 }
 
-export function getBarData({ xAxis = [] as any[], datas = [] as number[][], legend = [] as string[], suffix = '', width = 1000, height = 400, responsive = false, zoom = false, modulo = 10, padding = 30, useArea = true }) {
-  const colors = ['#6376DD', '#FBBB04']
-
+export function getBarData({ xAxis = [] as any[], datas = [] as number[][], legend = [] as string[], suffix = '', width = 1000, height = 400, responsive = false, zoom = false, modulo = 10, padding = 30, colors = ['#6376DD', '#FBBB04'] }) {
   const config = {
     theme: getTheme(),
     responsive,
@@ -129,6 +127,7 @@ export function getBarData({ xAxis = [] as any[], datas = [] as number[][], lege
           },
           "yAxis": {
             "commonScaleSteps": 10,
+            "scaleMin": 0,
           },
           "xAxisLabels": {
             "show": true,
@@ -372,7 +371,7 @@ export function getPieData({ datas = [] as number[][], legend = [] as string[],
   return { config, dataset }
 }
 
-export function getPieSmallData({ datas = [] as number[][], legend = [] as string[], colorList = ['#4285F4', '#2ecc71', '#FBBB04', '#e67e22', '#FF0000'].reverse() as string[], width = 500, height = 1300, responsive = false }) {
+export function getPieSmallData({ datas = [] as number[][], legend = [] as string[], colorList = ['#2ecc71', '#4285F4', '#FBBB04', '#FF0000', '#e67e22'].reverse() as string[], width = 500, height = 1300, responsive = false }) {
 
   const config = {
     theme: getTheme(),
@@ -393,7 +392,7 @@ export function getPieSmallData({ datas = [] as number[][], legend = [] as strin
           "left": 0
         },
         "title": {
-          "text": " ",
+          "text": "",
           "show": false,
         },
         "legend": {
@@ -405,7 +404,19 @@ export function getPieSmallData({ datas = [] as number[][], legend = [] as strin
           "roundingPercentage": 0
         },
         "layout": {
+          "donut": {
+            "strokeWidth": "40",
+            "borderWidth": "2",
+            "useShadow": false,
+          },
           "labels": {
+            "dataLabels": {
+              "show": true,
+              "useLabelSlots": false,
+              "hideUnderValue": 0,
+              "prefix": "",
+              "suffix": ""
+            },
             value: { rounding: 0, show: true, formatter: null },
             percentage: {
               bold: true,

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

@@ -2,8 +2,16 @@
   <div class="page">
     <div class="flex-row" style="gap: 12px">
       <el-card shadow="nover">
-        <div class="title">今日告警</div>
-        <VueUiSkeleton class="flex1" :config="{ type: 'bar' }" />
+        <div class="title">
+          <div>
+            今日告警 <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>
@@ -54,9 +62,12 @@
             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" />
@@ -69,9 +80,12 @@
             v-model="analyzeTrendDate"
             type="month"
             @change="getAnalyzeTrend"
+            format="YYYY-MM"
+            value-format="YYYY-MM"
             size="small"
             style="max-width: 100px"
             :clearable="false"
+            :disabledDate="disabledDate"
           />
         </div>
         <VueUiDonut v-if="dataset5?.length" :config="config5" :dataset="dataset5" />
@@ -87,9 +101,12 @@
             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" />
@@ -107,9 +124,12 @@
             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" />
@@ -124,10 +144,13 @@
             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" />
@@ -142,10 +165,13 @@
             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" />
@@ -172,6 +198,8 @@ import dayjs from "dayjs";
 const { proxy } = getCurrentInstance() as any;
 const { alarm_type } = proxy.useDict("alarm_type");
 
+const disabledDate = (time: any) => time.getTime() > Date.now();
+
 function typeFormat(type: string) {
   return proxy.selectDictLabel(unref(alarm_type), type);
 }
@@ -184,6 +212,7 @@ 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[]>([]);
@@ -202,42 +231,40 @@ const todayCount = reactive({
 
 const alarmNewList = ref<any[]>([]);
 
-const defaultStartDate = dayjs().subtract(7, "day").toDate();
-const defaultEndDate = dayjs().toDate();
-const dateRange = ref([defaultStartDate, defaultEndDate]);
-const analyzeTrendDate = ref(dayjs().format("YYYY-MM"));
-const deptAlarmDate = ref([
+const defaultDateRange = [
   dayjs().subtract(7, "day").format("YYYY-MM-DD"),
   dayjs().format("YYYY-MM-DD"),
-]);
-const alarmStatusDate = ref([
-  dayjs().subtract(7, "day").format("YYYY-MM-DD"),
-  dayjs().format("YYYY-MM-DD"),
-]);
-const alarmTypeDate = ref([
-  dayjs().subtract(7, "day").format("YYYY-MM-DD"),
-  dayjs().format("YYYY-MM-DD"),
-]);
-const alarmLevelDate = ref([
-  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();
 
 function getData() {
   // 今日告警信息
   api.dashboard.getCurrentDayInfo().then((res: any) => {
-    const list = res.alarmList || [];
-    todayCount.currentDayCount = res.currentDayCount;
-    todayCount.currentMonthCount = res.currentMonthCount;
+    const list = res?.data.alarmList || [];
+    todayCount.currentDayCount = res?.data?.currentDayCount;
+    todayCount.currentMonthCount = res?.data?.currentMonthCount;
 
-    console.log(res);
-    console.log(list);
+    const chartData = getBarData({
+      xAxis: list.map((item: any) => item.alarmDate),
+      legend: ["今日告警"],
+      datas: [list.map((item: any) => item.alarmCount)],
+      width: 300,
+      height: 300,
+      modulo: 3,
+      responsive: true,
+    });
+    config.value = chartData.config;
+    dataset.value = chartData.dataset;
   });
   // 最新告警
   api.dashboard.getAlarmNewList().then((res: any) => {
-    console.log(res);
     alarmNewList.value = res || [];
   });
   // 告警统计
@@ -259,8 +286,7 @@ function getData() {
       xAxis: list.map((item: any) => item.deviceName),
       legend: ["告警设备top10"],
       datas: [list.map((item: any) => item.alarmCount)],
-      width: 300,
-      height: 300,
+      colors: ["#ff9900"],
       responsive: true,
     });
     config2.value = chartData.config;
@@ -271,17 +297,15 @@ function getData() {
 function getAlarmStatistics() {
   api.dashboard
     .getAlarmStatistics({
-      startDate: dayjs(dateRange.value[0]).format("YYYY-MM-DD"),
-      endDate: dayjs(dateRange.value[1]).format("YYYY-MM-DD"),
+      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)],
-        width: 300,
-        height: 300,
+        datas: [list.map((item: any) => item.alarmCount || 0)],
         modulo: 3,
         responsive: true,
       });
@@ -297,19 +321,10 @@ function getAnalyzeTrend() {
     })
     .then((res: any) => {
       const list = res || [];
-      console.log({
-        legend: list.map((item: any) => item.month),
-        datas: list.map((item: any) => [item.alarmCount]),
-        width: 300,
-        height: 300,
-        responsive: false,
-      });
       const chartData = getPieSmallData({
-        legend: list.map((item: any) => item.month),
+        legend: list.map((item: any) => item.month + "告警"),
         datas: list.map((item: any) => [item.alarmCount]),
-        width: 300,
-        height: 300,
-        responsive: false,
+        responsive: true,
       });
       config5.value = chartData.config;
       dataset5.value = chartData.dataset;
@@ -329,8 +344,6 @@ function getDeptAlarm() {
         xAxis: list.map((item: any) => item.deptName),
         legend: ["部门告警"],
         datas: [list.map((item: any) => item.alarmCount)],
-        width: 300,
-        height: 300,
         modulo: 3,
         responsive: true,
       });
@@ -346,15 +359,10 @@ function getAlarmStatus() {
       endDate: alarmStatusDate.value[1],
     })
     .then((res: any) => {
-      console.log(res);
       const list = res || [];
-      const chartData = getBarData({
-        xAxis: list.map((item: any) => (item.status ? "已处理" : "未处理")),
-        legend: ["告警状态"],
-        datas: [list.map((item: any) => item.alarmCount)],
-        width: 300,
-        height: 300,
-        modulo: 3,
+      const chartData = getPieSmallData({
+        legend: list.map((item: any) => (item.status === "1" ? "已处理" : "未处理")),
+        datas: list.map((item: any) => [item.alarmCount]),
         responsive: true,
       });
       config7.value = chartData.config;
@@ -369,25 +377,14 @@ function getAlarmType() {
       endDate: alarmTypeDate.value[1],
     })
     .then((res: any) => {
-      console.log(res);
       const list = res || [];
-      console.log({
-        legend: list.map((item: any) =>
-          item.alarmType === "1" ? "规则告警" : "自助上报告警"
-        ),
-        datas: list.map((item: any) => [item.alarmCount]),
-        width: 300,
-        height: 300,
-        responsive: true,
-      });
+      console.log(list);
       const chartData = getPieSmallData({
         legend: list.map((item: any) =>
           item.alarmType === "1" ? "规则告警" : "自助上报告警"
         ),
         datas: list.map((item: any) => [item.alarmCount]),
-        width: 300,
-        height: 300,
-        responsive: false,
+        responsive: true,
       });
       config8.value = chartData.config;
       dataset8.value = chartData.dataset;
@@ -406,9 +403,8 @@ function getAlarmLevel() {
         xAxis: list.map((item: any) => item.levelName),
         legend: ["告警等级"],
         datas: [list.map((item: any) => item.alarmCount)],
-        width: 300,
-        height: 300,
         modulo: 3,
+        colors: ["#4095E5"],
         responsive: true,
       });
       config9.value = chartData.config;
@@ -437,6 +433,9 @@ function getAlarmLevel() {
     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;
@@ -448,20 +447,34 @@ function getAlarmLevel() {
     .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%;
-        gap: 10px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+        // overflow: hidden;
 
         .vue-ui-xy,
         .vue-ui-donut,
         .vue-ui-skeleton {
-          flex: 1;
-          height: 100%;
+          // 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 {