From d39cadd8f39f6e966e8bf0ef8fca475c8fc9eeb0 Mon Sep 17 00:00:00 2001
From: donghao <donghao@supervision.ltd>
Date: Tue, 27 Feb 2024 10:27:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=91=8A=E8=AD=A6=E9=80=9A=E7=9F=A5?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84=E5=88=9D=E5=A7=8B=E5=8C=96=E3=80=81=E5=A4=A7?=
 =?UTF-8?q?=E5=B1=8F=E9=BB=98=E8=AE=A4=E8=AE=BE=E7=BD=AE=E6=9A=97=E8=89=B2?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CustomTable/src/baseTable.tsx  |  17 +-
 src/components/DsBox/index.ts                 |   4 +-
 src/components/DsBox/src/dsBox1.tsx           |   8 -
 src/components/DsBox/src/dsBox2.scss          |   3 +
 src/components/DsBox/src/dsBox2.tsx           |  75 +++++
 src/layout/components/navbar.vue              |   8 +-
 src/layout/dataScreenIndex.vue                |   2 +-
 src/layout/hooks/useDataThemeChange.ts        |   8 +-
 src/pages/dataScreen/app.scss                 |  17 +
 src/pages/dataScreen/main.ts                  |   3 +-
 src/pages/dataScreen/router/modules/alarm.ts  |   4 +-
 .../views/alarm/alarmInfoIndex.scss           |   6 +
 .../dataScreen/views/alarm/alarmInfoIndex.vue | 310 ++++++++++++++++++
 .../views/alarmInfo/alarmInfoIndex.vue        |  11 -
 src/style/dark.scss                           |   7 +
 src/style/element-plus.scss                   |   8 +
 16 files changed, 461 insertions(+), 30 deletions(-)
 create mode 100644 src/components/DsBox/src/dsBox2.scss
 create mode 100644 src/components/DsBox/src/dsBox2.tsx
 create mode 100644 src/pages/dataScreen/app.scss
 create mode 100644 src/pages/dataScreen/views/alarm/alarmInfoIndex.scss
 create mode 100644 src/pages/dataScreen/views/alarm/alarmInfoIndex.vue
 delete mode 100644 src/pages/dataScreen/views/alarmInfo/alarmInfoIndex.vue

diff --git a/src/components/CustomTable/src/baseTable.tsx b/src/components/CustomTable/src/baseTable.tsx
index 0737e76..5f01f7b 100644
--- a/src/components/CustomTable/src/baseTable.tsx
+++ b/src/components/CustomTable/src/baseTable.tsx
@@ -133,6 +133,14 @@ export default defineComponent({
     visibleColumn: {
       type: Boolean,
       default: undefined
+    },
+
+    /**
+     * 固定分页器
+     */
+    isFixedPagination: {
+      type: Boolean,
+      default: true
     }
 
     // handleDel: {
@@ -383,7 +391,14 @@ export default defineComponent({
       };
 
       return (
-        <div class="x-table-pagination pagination_wrap">
+        <div
+          class={[
+            "x-table-pagination pagination_wrap",
+            props.isFixedPagination
+              ? "fixed_pagination"
+              : "noneFixed_pagination"
+          ]}
+        >
           <ElPagination {...paginationProps} />
         </div>
       );
diff --git a/src/components/DsBox/index.ts b/src/components/DsBox/index.ts
index 5ce1b1b..43ae2e7 100644
--- a/src/components/DsBox/index.ts
+++ b/src/components/DsBox/index.ts
@@ -2,12 +2,14 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-02-23 11:38:23
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-02-26 10:36:35
+ * @LastEditTime: 2024-02-26 17:27:17
  * @FilePath: \General-AI-Platform-Web-Client\src\components\DsBox\index.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 import dsBox1 from "./src/dsBox1";
+import dsBox2 from "./src/dsBox2";
 import dsTag1 from "./src/dsTag1";
 
 export const DsBox1 = dsBox1;
+export const DsBox2 = dsBox2;
 export const DsTag1 = dsTag1;
diff --git a/src/components/DsBox/src/dsBox1.tsx b/src/components/DsBox/src/dsBox1.tsx
index 252cbab..1b6a6ef 100644
--- a/src/components/DsBox/src/dsBox1.tsx
+++ b/src/components/DsBox/src/dsBox1.tsx
@@ -27,14 +27,6 @@ export default defineComponent({
   },
 
   setup(props, { slots }) {
-    // const count = ref<number>(1);
-    // const treeData = reactive({
-    //   list: testDeviceTreeData
-    // });
-    /**
-     * 渲染内层内容
-     */
-
     return () => {
       let options = {
         width: "430px",
diff --git a/src/components/DsBox/src/dsBox2.scss b/src/components/DsBox/src/dsBox2.scss
new file mode 100644
index 0000000..4e7fab0
--- /dev/null
+++ b/src/components/DsBox/src/dsBox2.scss
@@ -0,0 +1,3 @@
+.dsBox2_wrap {
+  //  暂无内容
+}
diff --git a/src/components/DsBox/src/dsBox2.tsx b/src/components/DsBox/src/dsBox2.tsx
new file mode 100644
index 0000000..e0c8851
--- /dev/null
+++ b/src/components/DsBox/src/dsBox2.tsx
@@ -0,0 +1,75 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-02-26 17:24:07
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-02-26 17:42:29
+ * @FilePath: \General-AI-Platform-Web-Client\src\components\DsBox\src\dsBox2.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+/**
+ * @背景框尺寸说明
+ *
+ * 1、整体框
+ * w1 1856px
+ * h1 763px
+ * 默认标题
+ *
+ *
+ */
+
+import { defineComponent } from "vue";
+import "./dsBox2.scss";
+
+export default defineComponent({
+  name: "DsBox2",
+  props: {
+    type: {
+      type: String,
+      default: "default"
+    },
+    title: {
+      type: String,
+      default: ""
+    }
+  },
+
+  setup(props, { slots }) {
+    return () => {
+      let options = {
+        width: "1856px",
+        height: "763px"
+      };
+      switch (props.type) {
+        case "w1h1":
+          options = {
+            width: "430px",
+            height: "288px"
+          };
+          break;
+        default:
+          options = {
+            width: "100%",
+            height: "100%"
+          };
+          break;
+      }
+      return (
+        <div class="dsBox2_wrap w-full h-full">
+          <dv-border-box-10
+            style={{ width: options.width, height: options.height }}
+          >
+            <div class="w-full h-full">
+              <div
+                class="w-full"
+                style={{ height: `calc(${options.height} - 50px)` }}
+              >
+                {/* 主体内容 */}
+                {slots.default()}
+              </div>
+            </div>
+          </dv-border-box-10>
+        </div>
+      );
+    };
+  }
+});
diff --git a/src/layout/components/navbar.vue b/src/layout/components/navbar.vue
index 1253d28..7948270 100644
--- a/src/layout/components/navbar.vue
+++ b/src/layout/components/navbar.vue
@@ -8,14 +8,14 @@ import { useNav } from "@/layout/hooks/useNav";
 import { useTranslationLang } from "../hooks/useTranslationLang";
 // import globalization from "@/assets/svg/globalization.svg?component";
 import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
-// import Setting from "@iconify-icons/ri/settings-3-line";
+import Setting from "@iconify-icons/ri/settings-3-line";
 // import Check from "@iconify-icons/ep/check";
 
 const {
   layout,
   // device,
   logout,
-  // onPanel,
+  onPanel,
   // pureApp,
   username,
   userAvatar,
@@ -99,13 +99,13 @@ const {
           </el-dropdown-menu>
         </template>
       </el-dropdown>
-      <!-- <span
+      <span
         class="set-icon navbar-bg-hover"
         :title="t('buttons.hssystemSet')"
         @click="onPanel"
       >
         <IconifyIconOffline :icon="Setting" />
-      </span> -->
+      </span>
     </div>
   </div>
 </template>
diff --git a/src/layout/dataScreenIndex.vue b/src/layout/dataScreenIndex.vue
index 8f7d0e3..e5a749d 100644
--- a/src/layout/dataScreenIndex.vue
+++ b/src/layout/dataScreenIndex.vue
@@ -106,7 +106,7 @@ onMounted(() => {
 });
 
 onBeforeMount(() => {
-  useDataThemeChange().dataThemeChange();
+  useDataThemeChange().setThemeByType("dark"); // 设置夜间主题
 });
 </script>
 
diff --git a/src/layout/hooks/useDataThemeChange.ts b/src/layout/hooks/useDataThemeChange.ts
index 6a08b6d..84149c6 100644
--- a/src/layout/hooks/useDataThemeChange.ts
+++ b/src/layout/hooks/useDataThemeChange.ts
@@ -94,6 +94,11 @@ export function useDataThemeChange() {
     }
   }
 
+  /**设置日间、夜间主题 */
+  function setThemeByType(themeType: string) {
+    document.documentElement.classList.add(themeType);
+  }
+
   return {
     body,
     dataTheme,
@@ -101,6 +106,7 @@ export function useDataThemeChange() {
     themeColors,
     dataThemeChange,
     setEpThemeColor,
-    setLayoutThemeColor
+    setLayoutThemeColor,
+    setThemeByType
   };
 }
diff --git a/src/pages/dataScreen/app.scss b/src/pages/dataScreen/app.scss
new file mode 100644
index 0000000..e482214
--- /dev/null
+++ b/src/pages/dataScreen/app.scss
@@ -0,0 +1,17 @@
+// 标题
+// 标题样式1
+.ds_title_1 {
+  font-family: "DouyinSansBold";
+  font-weight: bold;
+  font-size: 28px;
+  line-height: 33px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  background: linear-gradient(to bottom, #ffffff 15%, #3397f4 99%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+$--el-text-color-regular: red;
diff --git a/src/pages/dataScreen/main.ts b/src/pages/dataScreen/main.ts
index e0b3add..cde2725 100644
--- a/src/pages/dataScreen/main.ts
+++ b/src/pages/dataScreen/main.ts
@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-02-22 14:04:38
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-02-22 17:48:10
+ * @LastEditTime: 2024-02-27 10:04:19
  * @FilePath: \General-AI-Platform-Web-Client\src\pages\dataScreen\main.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -31,6 +31,7 @@ import "element-plus/dist/index.css";
 // 导入字体图标
 import "@/assets/iconfont/iconfont.js";
 import "@/assets/iconfont/iconfont.css";
+import "./app.scss";
 
 const app = createApp(App);
 
diff --git a/src/pages/dataScreen/router/modules/alarm.ts b/src/pages/dataScreen/router/modules/alarm.ts
index e5c77b8..4697e42 100644
--- a/src/pages/dataScreen/router/modules/alarm.ts
+++ b/src/pages/dataScreen/router/modules/alarm.ts
@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-02-23 11:00:08
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-02-26 14:18:27
+ * @LastEditTime: 2024-02-26 17:23:22
  * @FilePath: \General-AI-Platform-Web-Client\src\pages\dataScreen\router\modules\device.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -16,6 +16,6 @@ export default {
     rank: 5,
     roles: ["admin", "common"]
   },
-  component: () => import("@/pages/dataScreen/views/device/deviceList.vue"),
+  component: () => import("@/pages/dataScreen/views/alarm/alarmInfoIndex.vue"),
   name: "alarmInfo"
 } as RouteConfigsTable;
diff --git a/src/pages/dataScreen/views/alarm/alarmInfoIndex.scss b/src/pages/dataScreen/views/alarm/alarmInfoIndex.scss
new file mode 100644
index 0000000..3ba0e08
--- /dev/null
+++ b/src/pages/dataScreen/views/alarm/alarmInfoIndex.scss
@@ -0,0 +1,6 @@
+.alarmInfoIndex_wrap {
+  padding: 32px;
+  .alarm_main_info {
+    height: 763px;
+  }
+}
diff --git a/src/pages/dataScreen/views/alarm/alarmInfoIndex.vue b/src/pages/dataScreen/views/alarm/alarmInfoIndex.vue
new file mode 100644
index 0000000..6d65162
--- /dev/null
+++ b/src/pages/dataScreen/views/alarm/alarmInfoIndex.vue
@@ -0,0 +1,310 @@
+<!--
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-02-23 09:55:26
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-02-27 09:58:59
+ * @FilePath: \General-AI-Platform-Web-Client\src\pages\dataScreen\views\alarm\alarmInfoIndex.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<script setup lang="ts">
+import { DsBox2 } from "@/components/DsBox";
+import { getAlarmList } from "@/api/list";
+import { onMounted, ref, reactive, h } from "vue";
+import { BaseTable } from "@/components/CustomTable";
+import { getConfig } from "@/config";
+
+import setting from "@/layout/components/setting/index.vue";
+
+defineOptions({
+  name: "alarmInfoIndex"
+});
+const { EpThemeColor } = getConfig();
+
+// TODO 根据需要提取到全局 告警等级~
+const alarmLevelStatusEnum: Record<string, any>[] = [
+  {
+    color: "rgba(232, 13, 13, 1)",
+    value: "1",
+    label: "紧急",
+    isDelete: false,
+    icon: "ArrowUpOutlined",
+    id: "1"
+  },
+  {
+    color: "rgba(255, 136, 0, 1)",
+    value: "2",
+    label: "较高",
+    isDelete: false,
+    id: "2"
+  },
+  {
+    color: "rgba(68, 139, 245, 1)",
+    value: "3",
+    label: "一般",
+    isDelete: false,
+    id: "3"
+  },
+  {
+    color: "rgba(179, 214, 0, 1)",
+    value: "4",
+    label: "低",
+    isDelete: true,
+    id: "4"
+  },
+  {
+    color: "rgba(81, 177, 6, 1)",
+    value: "5",
+    label: "较低",
+    isDelete: true,
+    id: "5"
+  },
+  {
+    color: "rgba(43, 183, 136, 1)",
+    value: "6",
+    label: "非常低",
+    isDelete: true,
+    id: "6"
+  }
+];
+
+function handleDelete(row) {
+  console.log(row, "handleDelete_row");
+}
+
+const columns = [
+  {
+    type: "selection"
+  },
+  {
+    label: "告警名称",
+    property: "name"
+  },
+  {
+    label: "告警代码",
+    property: "code"
+  },
+  {
+    label: "告警等级",
+    property: "level",
+    formatter: val => {
+      const currentLevelObj = alarmLevelStatusEnum[Number(val?.level) - 1];
+      return h(
+        "div",
+        {
+          style: {
+            fontSize: "14px",
+            color: currentLevelObj.color
+          }
+        },
+        [
+          h("i", {
+            class: `iconfont pr-[8px] ${
+              currentLevelObj.value === "1"
+                ? "icon-xiangshangjiantouquan"
+                : "icon-xiala"
+            }`
+          }),
+          h(
+            "span",
+            {
+              fontSize: "14px"
+            },
+            currentLevelObj.label
+          )
+        ]
+      );
+    }
+  },
+  {
+    label: "设备组",
+    property: "deviceGroup",
+    formatter: val => {
+      return h(
+        "div",
+        {
+          style: {
+            fontSize: "14px",
+            color: EpThemeColor
+          }
+        },
+        [
+          h("i", {
+            class: `iconfont icon-zishebeizu pr-[8px]`
+          }),
+          h(
+            "span",
+            {
+              fontSize: "14px",
+              class: "pf-1"
+            },
+            val.deviceGroup
+          )
+        ]
+      );
+    }
+  },
+  {
+    label: "告警日期",
+    property: "createTime"
+  },
+  // TODO 需要封装操作按钮
+  {
+    type: "action",
+    label: "操作"
+  }
+];
+
+const svg = `
+        <path class="path" d="
+          M 30 15
+          L 28 17
+          M 25.61 25.61
+          A 15 15, 0, 0, 1, 15 30
+          A 15 15, 0, 1, 1, 27.99 7.5
+          L 15 15
+        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
+      `;
+
+const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
+
+const listData = ref([]);
+
+// const searchValue = ref("");
+
+const formData = reactive({
+  name: "",
+  level: ""
+});
+
+const dataLoading = ref(true);
+
+const getList = async () => {
+  const { currentPage, pageSize } = pagination.value;
+  const { data } = await getAlarmList({ page: currentPage, pageSize });
+  listData.value = data.list;
+  console.log(data.list);
+  pagination.value = {
+    ...pagination.value,
+    total: data.total
+  };
+  dataLoading.value = false;
+  // try {
+
+  // } catch (e) {
+  //   console.log(e);
+  // } finally {
+  //   setTimeout(() => {
+  //     dataLoading.value = false;
+  //   }, 500);
+  // }
+};
+
+function handleTableChange(record) {
+  console.log("handleTableChange_record", record);
+  pagination.value = {
+    ...pagination.value,
+    currentPage: record.page,
+    pageSize: record.pageSize
+  };
+  getList();
+}
+/**操作栏事件 */
+function handleDel(row) {
+  console.log(row, "handleDel");
+}
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <div class="alarmInfoIndex_wrap">
+    <!-- 系统设置 -->
+
+    <p class="ds_title_1 pb-[16px]">设备告警通知</p>
+    <div class="alarm_main_info">
+      <DsBox2>
+        <template #default>
+          <!-- <div class="w-full h-full">表格</div> -->
+          <div class="main alarm_wrap pt-[18px] px-[24px]">
+            <el-form
+              :inline="true"
+              :model="formData"
+              class="demo-form-inline ds_form"
+            >
+              <el-form-item label="告警名称">
+                <el-select
+                  v-model="formData.name"
+                  placeholder="告警名称"
+                  clearable
+                >
+                  <el-option label="名称1" value="1" />
+                  <el-option label="名称2" value="2" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="告警等级">
+                <el-select
+                  v-model="formData.level"
+                  placeholder="告警等级"
+                  clearable
+                >
+                  <el-option
+                    v-for="(v, k) in alarmLevelStatusEnum"
+                    :key="k"
+                    :label="v.label"
+                    :value="v.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-form>
+            <div
+              class="alarm_table"
+              v-loading="dataLoading"
+              :element-loading-svg="svg"
+              element-loading-svg-view-box="-10, -10, 50, 50"
+            >
+              <template v-if="pagination.total > 0">
+                <BaseTable
+                  :total="pagination.total"
+                  :pageSize="pagination.pageSize"
+                  :dataSource="listData"
+                  :isFixedPagination="false"
+                  :columns="columns"
+                  @actions="handleDelete"
+                  :page="pagination.currentPage"
+                  @change="handleTableChange"
+                >
+                  <template v-slot:actionBar="{ row }">
+                    <ul class="table_action_box">
+                      <li class="flex items-center" @click="handleDel(row)">
+                        <el-button text>
+                          <i
+                            class="iconfont icon-shanchu pr-[8px]"
+                            :style="{ fontSize: '14px', color: '#E80D0D' }"
+                          />
+                          <span
+                            :style="{
+                              fontSize: '14px',
+                              color: '#E80D0D'
+                            }"
+                          >
+                            删除
+                          </span>
+                        </el-button>
+                      </li>
+                    </ul>
+                  </template>
+                </BaseTable>
+              </template>
+            </div>
+          </div>
+        </template>
+      </DsBox2>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import "./alarmInfoIndex.scss";
+</style>
diff --git a/src/pages/dataScreen/views/alarmInfo/alarmInfoIndex.vue b/src/pages/dataScreen/views/alarmInfo/alarmInfoIndex.vue
deleted file mode 100644
index 2c41af7..0000000
--- a/src/pages/dataScreen/views/alarmInfo/alarmInfoIndex.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  name: ""
-});
-</script>
-
-<template>
-  <div>告警通知</div>
-</template>
-
-<style lang="scss" scoped></style>
diff --git a/src/style/dark.scss b/src/style/dark.scss
index 5954983..4c970a6 100644
--- a/src/style/dark.scss
+++ b/src/style/dark.scss
@@ -139,3 +139,10 @@ html.dark {
     }
   }
 }
+
+/* 深色系样式 */
+// 深色表单
+.ds_form {
+}
+
+// 深色列表
diff --git a/src/style/element-plus.scss b/src/style/element-plus.scss
index c83cd20..d0ee51d 100644
--- a/src/style/element-plus.scss
+++ b/src/style/element-plus.scss
@@ -172,6 +172,8 @@
 
 /* 分页栏 */
 .pagination_wrap {
+}
+.fixed_pagination {
   width: calc(100% - 136px);
   background-color: white;
   z-index: 9;
@@ -183,6 +185,12 @@
   bottom: 0;
   padding: 20px 40px 40px;
 }
+.noneFixed_pagination {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 20px 0;
+}
 
 /* table */