feat: 增加告警统计页面接口对接完善

.vscode/settings.json

@@ -24,7 +24,7 @@
   },
   "editor.minimap.enabled": false,
   "html.format.wrapLineLength": 260,
-  "html.format.wrapAttributes": "auto",
+  "html.format.wrapAttributes": "preserve",
   "git.autofetch": true,
   "typescript.locale": "zh-CN",
   "git.confirmSync": false,
@@ -52,8 +52,7 @@
   },
   "minapp-vscode.disableAutoConfig": true,
   "editor.suggestSelection": "first",
-  "[vue]": {
-  },
+  "[vue]": {},
   "git.ignoreMissingGitWarning": true,
   "workbench.editorAssociations": {
     "*.ipynb": "jupyter-notebook"
@@ -162,5 +161,11 @@
   "git.openRepositoryInParentFolders": "always",
   "prettier.semi": false,
   "diffEditor.ignoreTrimWhitespace": false,
-  "workbench.editor.empty.hint": "hidden"
+  "workbench.editor.empty.hint": "hidden",
+  "i18n-ally.localesPaths": [
+    "src/i18n",
+    "src/i18n/lang",
+    "src/components/vue3cron/language"
+  ],
+  "vue.format.wrapAttributes": "preserve"
 }

src/utils/dataUiOptions.ts

@@ -371,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 = ['#2ecc71', '#4285F4', '#FBBB04', '#FF0000', '#e67e22'].reverse() as string[], width = 500, height = 1300, responsive = false }) {
+export function getPieSmallData({ datas = [] as number[][], legend = [] as string[], colors = ['#2ecc71', '#4285F4', '#FBBB04', '#FF0000', '#e67e22'].reverse() as string[], width = 500, height = 1300, responsive = false }) {
 
   const config = {
     theme: getTheme(),
@@ -450,7 +450,7 @@ export function getPieSmallData({ datas = [] as number[][], legend = [] as strin
   // const dataset = [{ "name": "Series 1", "values": [100] }, { "name": "Series 2", "values": [50] }, { "name": "Series 3", "values": [25] }, { "name": "Series 4", "values": [12.5] }]
 
   const dataset = datas.map((data, i) => {
-    return { "name": legend[i], "values": data, color: colorList[i] }
+    return { "name": legend[i], "values": data, color: colors[i] }
   })
 
   return { config, dataset }

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

@@ -2,8 +2,8 @@
   <div class="page">
     <div class="flex-row" style="gap: 12px">
       <el-card shadow="nover">
-        <div class="title">
-          <div>
+        <div class="title flex-row">
+          <div class="">
             今日告警 <el-tag size="small">{{ todayCount.currentDayCount }}</el-tag>
           </div>
           <div>
@@ -16,8 +16,8 @@
       <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>
+        <VueUiSkeleton v-else :config="{ type: 'bar' }" /> </el-card
+      >ƒ
       <el-card shadow="nover">
         <div class="title">最新告警</div>
         <el-table
@@ -74,21 +74,8 @@
         <VueUiSkeleton v-else :config="{ type: 'bar' }" />
       </el-card>
       <el-card shadow="nover">
-        <div class="title">
-          告警增长趋势
-          <el-date-picker
-            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" />
+        <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">
@@ -257,6 +244,7 @@ function getData() {
       datas: [list.map((item: any) => item.alarmCount)],
       width: 300,
       height: 300,
+      colors: ["#4B79F2"],
       modulo: 3,
       responsive: true,
     });
@@ -286,7 +274,7 @@ function getData() {
       xAxis: list.map((item: any) => item.deviceName),
       legend: ["告警设备top10"],
       datas: [list.map((item: any) => item.alarmCount)],
-      colors: ["#ff9900"],
+      colors: ["#FF7D5C"],
       responsive: true,
     });
     config2.value = chartData.config;
@@ -307,6 +295,7 @@ function getAlarmStatistics() {
         legend: ["告警统计"],
         datas: [list.map((item: any) => item.alarmCount || 0)],
         modulo: 3,
+        colors: ["#5AD8A6"],
         responsive: true,
       });
       config4.value = chartData.config;
@@ -321,9 +310,12 @@ function getAnalyzeTrend() {
     })
     .then((res: any) => {
       const list = res || [];
-      const chartData = getPieSmallData({
-        legend: list.map((item: any) => item.month + "告警"),
-        datas: list.map((item: any) => [item.alarmCount]),
+      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;
@@ -338,13 +330,13 @@ function getDeptAlarm() {
       endDate: deptAlarmDate.value[1],
     })
     .then((res: any) => {
-      console.log(res);
       const list = res || [];
       const chartData = getBarData({
         xAxis: list.map((item: any) => item.deptName),
         legend: ["部门告警"],
         datas: [list.map((item: any) => item.alarmCount)],
-        modulo: 3,
+        modulo: 5,
+        colors: ["#5B8FF9"],
         responsive: true,
       });
       config6.value = chartData.config;
@@ -363,6 +355,7 @@ function getAlarmStatus() {
       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;
@@ -378,12 +371,12 @@ function getAlarmType() {
     })
     .then((res: any) => {
       const list = res || [];
-      console.log(list);
       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;
@@ -404,7 +397,7 @@ function getAlarmLevel() {
         legend: ["告警等级"],
         datas: [list.map((item: any) => item.alarmCount)],
         modulo: 3,
-        colors: ["#4095E5"],
+        colors: ["#269A99"],
         responsive: true,
       });
       config9.value = chartData.config;