From d29c72492019e52d7d5720ea43044adccae953b4 Mon Sep 17 00:00:00 2001
From: zhaohy <1695786511@qq.com>
Date: Tue, 16 Jul 2024 15:42:49 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E8=81=94=E7=B3=BB=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hx-ai-intelligent/src/router/alarmManagement.ts    |  20 ++
 .../energyAlarm/editConfigureEnergyAlarm.vue       |   6 +-
 .../equipmentAlarm/editConfigureDeviceAlarm.vue    |   5 +-
 .../alarmSettings/notificationManagement/index.vue | 166 +++-------
 .../notificationManagement/linkPeople/config.ts    |  22 ++
 .../notificationManagement/linkPeople/index.vue    | 347 +++++++++++++++++----
 .../view/alarmManagement/equipmentAlarm/index.vue  |  28 ++
 .../view/alarmManagement/equipmentAlarm/look.vue   | 283 +++++++++++++++++
 .../equipmentAlarm/notificationManagementMock.json | 108 +++++++
 .../view/alarmManagement/equipmentAlarm/status.vue |  39 +++
 .../alarmManagement/equipmentAlarm/ts/config.ts    | 164 ++++++++++
 11 files changed, 997 insertions(+), 191 deletions(-)
 create mode 100644 hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/linkPeople/config.ts
 create mode 100644 hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/index.vue
 create mode 100644 hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/look.vue
 create mode 100644 hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/notificationManagementMock.json
 create mode 100644 hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/status.vue
 create mode 100644 hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/ts/config.ts

diff --git a/hx-ai-intelligent/src/router/alarmManagement.ts b/hx-ai-intelligent/src/router/alarmManagement.ts
index 6b8a490..dd930f3 100644
--- a/hx-ai-intelligent/src/router/alarmManagement.ts
+++ b/hx-ai-intelligent/src/router/alarmManagement.ts
@@ -26,6 +26,26 @@ const alarmManagement = {
       ],
     },
     {
+      path: 'equipmentAlarm ',
+      name: 'EquipmentAlarm',
+      meta: { title: '设备告警', hideChildren: true, icon: 'gaojingguanli' },
+      component: Base,
+      redirect: { name: 'equipmentAlarmIndex' },
+      children: [
+        {
+          path: 'index',
+          name: 'equipmentAlarmIndex',
+          // component: () => import('/nerv-lib/saas/view/menuManage/index.vue'),
+          component: () => import('/@/view/alarmManagement/equipmentAlarm/index.vue'),
+          meta: {
+            title: '设备告警',
+            keepAlive: true,
+            // backApi: [],
+          },
+        },
+      ],
+    },
+    {
       path: 'alarmSettings',
       name: 'AlarmSettings',
       meta: { title: '告警设置', hideChildren: true, icon: 'gaojingguanli' },
diff --git a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/energyAlarm/editConfigureEnergyAlarm.vue b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/energyAlarm/editConfigureEnergyAlarm.vue
index 2043200..eb35977 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/energyAlarm/editConfigureEnergyAlarm.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/energyAlarm/editConfigureEnergyAlarm.vue
@@ -229,7 +229,7 @@
         .post(device.queryDevicePage, {
           pageNum: 1,
           pageSize: 999,
-          energyType: selectedOptions[0].cnValue,
+          energyType: selectedOptions[0].dicKey,
           orgId: orgId.value,
         })
         .then((res) => {
@@ -241,7 +241,7 @@
         .post(group.queryDeviceGroupTree, {
           pageNum: 1,
           pageSize: 999,
-          energyType: selectedOptions[0].cnValue,
+          energyType: selectedOptions[0].dicKey,
           orgId: orgId.value,
         })
         .then((res) => {
@@ -502,7 +502,7 @@
   .grey-background.ant-switch .ant-switch-handle {
     background-color: grey !important;
   }
-  /deep/ .ant-form-item-label {
+  :deep(.ant-form-item-label) {
     z-index: 20;
     text-align: right;
     width: 23%;
diff --git a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue
index 39920f9..2ccca11 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue
@@ -146,7 +146,7 @@
 </template>
 <script lang="ts" setup>
   import { NsMessage } from '/nerv-lib/component';
-  import { ref, toRaw } from 'vue';
+  import { ref } from 'vue';
   import type { SelectProps } from 'ant-design-vue';
   import type { ShowSearchType } from 'ant-design-vue/es/cascader';
   import { device } from '/@/api/deviceManage';
@@ -154,7 +154,6 @@
 
   import { http } from '/nerv-lib/util';
 
-  import type { Rule } from 'ant-design-vue/es/form';
   import { async } from '@antv/x6/lib/registry/marker/async';
 
   const visible = ref(false);
@@ -505,7 +504,7 @@
   .grey-background.ant-switch .ant-switch-handle {
     background-color: grey !important;
   }
-  /deep/ .ant-form-item-label {
+  :deep(.ant-form-item-label) {
     z-index: 20;
     text-align: right;
     width: 23%;
diff --git a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/index.vue b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/index.vue
index cc564a3..fd33883 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/index.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/index.vue
@@ -73,7 +73,11 @@
         </a-table>
       </div>
     </div>
-    <linkPeople v-show="visibleModel" ref="linkPeoples" @handleCancel="handleCancel" />
+    <linkPeople
+      v-show="visibleModel"
+      ref="linkPeoples"
+      @handleCancel="handleCancel"
+      @handleOk="handleOk" />
   </ns-drawer>
 </template>
 <script lang="ts" setup>
@@ -98,10 +102,10 @@
     },
     {
       title: '姓名',
-      dataIndex: 'name',
+      dataIndex: 'deviceName',
       width: 80,
       fixed: 'left',
-      key: 'name',
+      key: 'deviceName',
     },
     {
       title: '性别',
@@ -127,127 +131,7 @@
     },
   ];
   const visibleModel = ref(false);
-  const dataSource = ref([
-    {
-      id: 1,
-      name: '张三1',
-      sex: '男',
-      site: '济阳站',
-      department: '济阳站/产品/产品经理',
-    },
-    {
-      id: 2,
-      name: '张三2',
-      sex: '男',
-      site: '济阳站',
-      department: '济阳站/产品/产品经理',
-    },
-    {
-      id: 3,
-      name: '张三3',
-      sex: '男',
-      site: '济阳站',
-      department: '济阳站/产品/产品经理',
-    },
-    {
-      id: 4,
-      name: '张三',
-      sex: '男',
-      site: '济阳站',
-      department: '济阳站/产品/产品经理',
-    },
-    {
-      id: 5,
-      name: '张三',
-      sex: '男',
-      site: '济阳站',
-      department: '济阳站/产品/产品经理',
-    },
-    {
-      id: 6,
-      name: '张三',
-      sex: '男',
-      site: '济阳站',
-      department: '济阳站/产品/产品经理',
-    },
-    {
-      id: 7,
-      name: '张三',
-      sex: '男',
-      site: '济阳站',
-      department: '济阳站/产品/产品经理',
-    },
-    {
-      id: 8,
-      name: '张三',
-      sex: '男',
-      site: '济阳站',
-      department: '济阳站/产品/产品经理',
-    },
-    {
-      id: 9,
-      name: '张三',
-      sex: '男',
-      site: '济阳站',
-      department: '济阳站/产品/产品经理',
-    },
-    {
-      id: 10,
-      name: '张三',
-      sex: '男',
-      site: '济阳站',
-      department: '济阳站/产品/产品经理',
-    },
-    {
-      id: 11,
-      name: '张三',
-      sex: '男',
-      site: '济阳站',
-      department: '济阳站/产品/产品经理',
-    },
-    {
-      id: 12,
-      name: '张三',
-      sex: '男',
-      site: '济阳站',
-      department: '济阳站/产品/产品经理',
-    },
-    {
-      id: 13,
-      name: '张三',
-      sex: '男',
-      site: '济阳站',
-      department: '济阳站/产品/产品经理',
-    },
-    {
-      id: 14,
-      name: '张三',
-      sex: '男',
-      site: '济阳站',
-      department: '济阳站/产品/产品经理',
-    },
-    {
-      id: 15,
-      name: '张三',
-      sex: '男',
-      site: '济阳站',
-      department: '济阳站/产品/产品经理',
-    },
-    {
-      id: 16,
-      name: '张三',
-      sex: '男',
-      site: '济阳站',
-      department: '济阳站/产品/产品经理',
-    },
-    {
-      id: 17,
-      name: '张三',
-      sex: '男',
-      site: '济阳站',
-      department: '济阳站/产品/产品经理',
-    },
-  ]);
+  const dataSource = ref([]);
   const visible = ref(false);
   const linkPeoples = ref(null);
   const handleChangePage = (current: number, pageSize: number) => {
@@ -269,12 +153,21 @@
   //点击联系人
   const chengUser = () => {
     visibleModel.value = true;
-    linkPeoples.value.getData();
+    let ids = [];
+    dataSource.value.forEach((item) => {
+      ids.push(item.id);
+    });
+    linkPeoples.value.getData({ id: ids, data: dataSource });
   };
   //取消弹窗
   const handleCancel = () => {
     visibleModel.value = false;
   };
+  //确定选择人
+  const handleOk = (data: any) => {
+    visibleModel.value = false;
+    dataSource.value = data.data;
+  };
   //表单数据
   const infoObject = ref({
     enableRules: 0,
@@ -306,10 +199,20 @@
   const toggle = (value: any) => {
     //判断 是新增 还是修改
     if (value) {
-      // infoObject.value = value;
+      // 获取接口
       infoObject.value = {
         enableRules: 0,
       };
+      // await http
+      //   .post(group.queryDeviceGroupTree, {
+      //     pageNum: 1,
+      //     pageSize: 999,
+      //     energyType: selectedOptions[0].dicKey,
+      //     orgId: orgId.value,
+      //   })
+      //   .then((res) => {
+      //     jdTreeData.value = res.data;
+      //   });
     } else {
       infoObject.value = {
         enableRules: 0,
@@ -328,6 +231,15 @@
   };
   const btnClick = () => {
     console.log(infoObject.value);
+    //发送请求数据
+    let obj = {};
+    obj.selectList = [];
+    dataSource.value.forEach((item) => {
+      obj.selectList.push({
+        people: item.id,
+      });
+    });
+    console.log(obj, '数据');
     //表单校验
     formRef.value.validate().then(() => {
       //调用接口
@@ -381,7 +293,7 @@
   .grey-background.ant-switch .ant-switch-handle {
     background-color: grey !important;
   }
-  /deep/ .ant-form-item-label {
+  :deep(.ant-form-item-label) {
     z-index: 20;
     text-align: left;
     width: 20%;
diff --git a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/linkPeople/config.ts b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/linkPeople/config.ts
new file mode 100644
index 0000000..2202a5e
--- /dev/null
+++ b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/linkPeople/config.ts
@@ -0,0 +1,22 @@
+import { department } from '/@/api/origanizemanage';
+
+export const editTreeConfig = (orgId) => ({
+  selectedKeys: ['0-0'],
+  defaultExpandAll: true,
+  api: department.queryDeptTree,
+  params: { orgId },
+  resultField: 'data.orgInfos',
+  fieldNames: { title: 'orgName', key: 'orgId' },
+  formConfig: {
+    schemas: [
+      {
+        field: 'orgName',
+        component: 'NsInput',
+        autoSubmit: true,
+        componentProps: {
+          placeholder: '请输入企业名称',
+        },
+      },
+    ],
+  },
+});
diff --git a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/linkPeople/index.vue b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/linkPeople/index.vue
index dfa6878..a496735 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/linkPeople/index.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/linkPeople/index.vue
@@ -2,75 +2,63 @@
   <a-modal
     v-model:visible="show"
     width="1100px"
-    style="top: 50%; transform: translateY(-50%)"
+    style="top: 50%; transform: translateY(-50%); overflow-y: hidden"
     title="添加联系人"
     @ok="handleOk"
     @cancel="handleCancel">
-    <div style="width: 100%; height: 480px; display: flex">
-      <div style="width: 300px; height: 100%; overflow-y: auto; padding: 0, 12px; gap: 5px">
+    <div class="box">
+      <div class="box-left">
         <div style="width: 100%; display: flex; position: relative">
-          <div
-            style="
-              border-width: 0px;
-              position: absolute;
-              left: 0px;
-              top: 5px;
-              width: 5px;
-              height: 15px;
-              background: inherit;
-              background-color: rgba(251, 156, 67, 1);
-              border: none;
-              border-radius: 5px;
-              -moz-box-shadow: none;
-              -webkit-box-shadow: none;
-              box-shadow: none;
-            "></div>
+          <div class="border-card"></div>
           <span style="margin-left: 24px; color: #333333">联系人名单</span>
         </div>
         <img
-          style="width: 100%; margin-top: -10px"
+          style="width: 100%; height: 2px"
           src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" />
         <a-input-search
           v-model:value="searchValue"
           style="margin-bottom: 8px"
           placeholder="请输入关键字" />
         <img
-          style="width: 100%; margin-top: -10px"
+          style="width: 100%; height: 2px"
           src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" />
-        <a-tree
-          :expanded-keys="expandedKeys"
-          :auto-expand-parent="autoExpandParent"
-          :tree-data="gData"
-          @expand="onExpand">
-          <template #title="{ title }">
-            <span v-if="title.indexOf(searchValue) > -1">
-              {{ title.substr(0, title.indexOf(searchValue)) }}
-              <span style="color: #f50">{{ searchValue }}</span>
-              {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
-            </span>
-            <span v-else>{{ title }}</span>
-          </template>
-        </a-tree>
+        <div style="width: 100%; height: 370px; overflow-y: auto">
+          <a-tree
+            :expanded-keys="expandedKeys"
+            :auto-expand-parent="autoExpandParent"
+            :tree-data="gData"
+            @select="onSelect"
+            @expand="onExpand"
+        /></div>
+        <!-- <ns-tree-api v-bind="config" @select="treeSelect" /> -->
       </div>
-      <div style="width: calc(100% - 200px); height: 100%; padding: 0, 24px; overflow-y: auto">
+      <div class="box-right">
         <div style="width: 100%; display: flex; position: relative">
-          <div
-            style="
-              border-width: 0px;
-              position: absolute;
-              left: 0px;
-              top: 5px;
-              width: 5px;
-              height: 15px;
-              background: inherit;
-              background-color: rgba(251, 156, 67, 1);
-              border: none;
-              border-radius: 5px;
-              -moz-box-shadow: none;
-              -webkit-box-shadow: none;
-              box-shadow: none;
-            "></div>
-          <span style="margin-left: 24px; color: #333333">人员列表</span>
+          <div class="border-card"></div>
+          <span style="margin-left: 24px; color: #333333">人员列表 </span>
+          <a-input-search
+            v-model:value="name"
+            style="margin-bottom: 8px; width: 280px; position: absolute; right: 20px"
+            placeholder="请输入"
+            allowClear="true"
+            @search="onSearch" />
+        </div>
+        <img
+          style="width: 100%; height: 2px"
+          src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" />
+        <div style="width: 100%; height: 450px; overflow-y: auto; padding: 12px 0">
+          <a-table
+            :row-selection="{
+              selectedRowKeys: selectedRowKey,
+              preserveSelectedRowKeys: true,
+              onChange: onSelectChange,
+            }"
+            :columns="columns"
+            :data-source="dataSource"
+            :rowKey="(record: any) => record.id"
+            :pagination="pagination"
+            :bordered="true"
+            :size="'middle'" />
         </div>
       </div>
     </div>
@@ -78,33 +66,276 @@
 </template>
 
 <script lang="ts">
-  import { ref } from 'vue';
+  import { ref, watch, computed } from 'vue';
   import { defineComponent } from 'vue';
+  import type { TreeProps } from 'ant-design-vue';
+  import { device } from '/@/api/deviceManage';
+  import { http } from '/nerv-lib/util';
+  // import { editTreeConfig } from './config';
+
+  const x = 3;
+  const y = 2;
+  const z = 1;
+  const genData: TreeProps['treeData'] = [];
+
+  const generateData = (_level: number, _preKey?: string, _tns?: TreeProps['treeData']) => {
+    const preKey = _preKey || '0';
+    const tns = _tns || genData;
 
+    const children = [];
+    for (let i = 0; i < x; i++) {
+      const key = `${preKey}-${i}`;
+      tns.push({ title: key, key });
+      if (i < y) {
+        children.push(key);
+      }
+    }
+    if (_level < 0) {
+      return tns;
+    }
+    const level = _level - 1;
+    children.forEach((key, index) => {
+      tns[index].children = [];
+      return generateData(level, key, tns[index].children);
+    });
+  };
+  generateData(z);
+
+  const dataList: TreeProps['treeData'] = [];
+  const generateList = (data: TreeProps['treeData']) => {
+    for (let i = 0; i < data.length; i++) {
+      const node = data[i];
+      const key = node.key;
+      dataList.push({ key, title: key });
+      if (node.children) {
+        generateList(node.children);
+      }
+    }
+  };
+  generateList(genData);
+
+  const getParentKey = (
+    key: string | number,
+    tree: TreeProps['treeData'],
+  ): string | number | undefined => {
+    let parentKey;
+    for (let i = 0; i < tree.length; i++) {
+      const node = tree[i];
+      if (node.children) {
+        if (node.children.some((item) => item.key === key)) {
+          parentKey = node.key;
+        } else if (getParentKey(key, node.children)) {
+          parentKey = getParentKey(key, node.children);
+        }
+      }
+    }
+    return parentKey;
+  };
   export default defineComponent({
     setup(props, { emit }) {
+      // const config = computed(() => {
+      //   return editTreeConfig(result);
+      // });
+      //组织数
+      const orgId = ref('');
+      const result = JSON.parse(sessionStorage.getItem('ORGID')!);
+      orgId.value = result;
+      const dataSource = ref([]);
+      const selectedRowKey = ref([]);
+      const selectedRow = ref([]);
+      const name = ref(null);
+      const onSearch = () => {
+        http
+          .post(device.queryDevicePage, {
+            pageNum: pagination.value.current,
+            pageSize: pagination.value.pageSize,
+            deviceName: name.value,
+            orgId: orgId.value,
+          })
+          .then((res) => {
+            dataSource.value = res.data.records;
+            pagination.value.total = res.data.total;
+          });
+      };
+      const onSelect = (selectedKeys: any, info: any) => {
+        console.log('selected', selectedKeys, info.node.dataRef);
+        pagination.value.current = 1;
+        onSearch();
+      };
+
+      const handleChangePage = (current: number, pageSize: number) => {
+        pagination.value.current = current;
+        pagination.value.pageSize = pageSize;
+        http
+          .post(device.queryDevicePage, {
+            pageNum: pagination.value.current,
+            pageSize: pagination.value.pageSize,
+            orgId: orgId.value,
+          })
+          .then((res) => {
+            dataSource.value = res.data.records;
+            pagination.value.total = res.data.total;
+          });
+        console.log(selectedRowKey.value, selectedRow.value);
+      };
+      const onSelectChange = (selectedRowKeys: any, selectedRows: any) => {
+        console.log(selectedRowKeys, selectedRows);
+        console.log(selectedRows, '数据');
+
+        selectedRowKey.value = selectedRowKeys;
+        selectedRow.value = selectedRows;
+      };
+      const pagination = ref({
+        total: 0,
+        size: 'small',
+        current: 1,
+        pageSize: 10,
+        showQuickJumper: true,
+        showLessItems: true,
+        // showSizeChanger: true,
+        showTotal: (total: number, range: any) =>
+          total && range ? `显示第${range[0]}到${range[1]}条记录,共 ${total} 条记录` : '',
+        onChange: handleChangePage,
+      });
+      const columns = [
+        {
+          title: '序号',
+          dataIndex: 'address',
+          customRender: (text: any) => {
+            return text.index + 1;
+          },
+        },
+        {
+          title: '姓名',
+          dataIndex: 'deviceName',
+        },
+        {
+          title: '性别',
+          dataIndex: 'sex',
+        },
+        {
+          title: '组织关系',
+          dataIndex: 'address',
+        },
+        {
+          title: '部门  ',
+          dataIndex: 'address',
+        },
+      ];
       const handleOk = () => {
         // 处理确定按钮的逻辑
-        console.log('点击了确定按钮');
+        emit('handleOk', { id: selectedRowKey.value, data: selectedRow.value });
+        show.value = false;
+        pagination.value.current = 1;
       };
-      const searchValue = ref<string>('');
-      const getData = () => {
+      const getData = (data: any) => {
+        selectedRow.value = data.data;
+        selectedRowKey.value = data.id;
         show.value = true;
+        http
+          .post(device.queryDevicePage, {
+            pageNum: pagination.value.current,
+            pageSize: pagination.value.pageSize,
+            orgId: orgId.value,
+          })
+          .then((res) => {
+            dataSource.value = res.data.records;
+            pagination.value.total = res.data.total;
+          });
       };
       const show = ref(false);
       const handleCancel = () => {
         // 处理取消按钮的逻辑
-        console.log('点击了取消按钮');
+        pagination.value.current = 1;
         emit('handleCancel', null);
         show.value = false;
       };
+      // 树方法
+      const expandedKeys = ref<(string | number)[]>([]);
+      const searchValue = ref<string>('');
+      const deviceName = ref<string>('');
+      const autoExpandParent = ref<boolean>(true);
+      const gData = ref<TreeProps['treeData']>(genData);
+
+      const onExpand = (keys: string[]) => {
+        expandedKeys.value = keys;
+        autoExpandParent.value = false;
+        console.log(keys, '数据');
+      };
+      watch(searchValue, (value) => {
+        console.log(gData.value, '数据');
+
+        const expanded = dataList
+          .map((item: TreeProps['treeData'][number]) => {
+            if (item.title.indexOf(value) > -1) {
+              return getParentKey(item.key, gData.value);
+            }
+            return null;
+          })
+          .filter((item, i, self) => item && self.indexOf(item) === i);
+        expandedKeys.value = expanded;
+        searchValue.value = value;
+        autoExpandParent.value = true;
+        console.log(expandedKeys.value, '数据');
+      });
       return {
+        columns,
+        name,
+        orgId,
+        // config,
+        onSearch,
+        dataSource,
+        onSelect,
+        gData,
+        onExpand,
+        selectedRow,
+        selectedRowKey,
+        autoExpandParent,
+        expandedKeys,
+        onSelectChange,
+        pagination,
         handleOk,
         show,
         getData,
         searchValue,
+        deviceName,
         handleCancel,
       };
     },
   });
 </script>
+<style scoped lang="less">
+  .border-card {
+    border-width: 0px;
+    position: absolute;
+    left: 0px;
+    top: 5px;
+    width: 5px;
+    height: 15px;
+    background: inherit;
+    background-color: rgba(251, 156, 67, 1);
+    border: none;
+    border-radius: 5px;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+  .box {
+    width: 100%;
+    height: 500px;
+    display: flex;
+    .box-left {
+      width: 300px;
+      height: 100%;
+      overflow-y: auto;
+      padding: 0, 12px;
+      gap: 5px;
+    }
+    .box-right {
+      width: calc(100% - 200px);
+      height: 100%;
+      padding: 0 12px;
+      overflow-y: auto;
+    }
+  }
+</style>
diff --git a/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/index.vue b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/index.vue
new file mode 100644
index 0000000..59d78bf
--- /dev/null
+++ b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/index.vue
@@ -0,0 +1,28 @@
+<template>
+  <ns-view-list-table v-bind="config" ref="mainRef" />
+  <!-- 详情页面 -->
+  <Look ref="look" />
+  <!-- 状态页面 -->
+  <Status ref="status" />
+</template>
+<script lang="ts">
+  import { notificationtableConfig } from './ts/config';
+  import Look from './look.vue';
+  import Status from './status.vue';
+  import { ref } from 'vue';
+
+  export default {
+    components: { Look, Status },
+
+    setup() {
+      const look = ref(null);
+      const status = ref(null);
+      const config = notificationtableConfig(look, status);
+      return {
+        config,
+        look,
+        status,
+      };
+    },
+  };
+</script>
diff --git a/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/look.vue b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/look.vue
new file mode 100644
index 0000000..62e9a31
--- /dev/null
+++ b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/look.vue
@@ -0,0 +1,283 @@
+<template>
+  <ns-drawer
+    v-model:visible="visible"
+    width="520"
+    :title="' '"
+    :footer-style="{ textAlign: 'right' }"
+    :ok="btnClick"
+    :cancel="handleClose"
+    placement="right"
+    @close="handleClose">
+    <div style="width: 100%; height: 100%; overflow-y: auto">
+      <!-- top -->
+      <div
+        style="
+          width: 100%;
+          height: 35px;
+          display: flex;
+          position: relative;
+          font-size: 16px;
+          border-bottom: 1px solid rgb(255, 118, 2); /* 设置底部边框为1像素实线，并指定颜色 */
+        ">
+        <div class="card"></div>
+        <div style="left: 25px; position: absolute; height: 35px; line-height: 35px">
+          告警编号：20230310001
+        </div>
+        <div style="right: 20px; position: absolute; height: 35px; line-height: 35px">
+          15点08分
+        </div>
+      </div>
+      <!-- center -->
+      <div style="width: 100%; height: 300px; border: 1px solid red" ref="graphChart"></div>
+    </div>
+  </ns-drawer>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { ref } from 'vue';
+  import * as echarts from 'echarts';
+  export default defineComponent({
+    setup() {
+      let chartInstance = null;
+      const graphChart = ref(null);
+      const visible = ref(false);
+      const handleClose = () => {
+        visible.value = false;
+      };
+      const btnClick = () => {
+        console.log('btnClick');
+      };
+      const toggle = (data) => {
+        console.log(data, 'data');
+        visible.value = true;
+        getChatr();
+      };
+      const getChatr = () => {
+        let dayData = [];
+        let energyAlarm = [];
+        let wgAlarm = [];
+        let equipmentAlarm = [];
+        let total = [];
+
+        // Extend data for 30 days
+        for (let i = 1; i < 30; i++) {
+          dayData.push(`3/${i}`);
+          energyAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity
+          wgAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity
+          equipmentAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity
+          total.push(0); // Assuming the same value for simplicity
+        }
+        if (chartInstance) {
+          chartInstance.dispose();
+        }
+        chartInstance = echarts.init(graphChart.value);
+        const option = {
+          title: {
+            text: '告警趋势/ 近30天',
+            textStyle: {
+              fontSize: 16,
+              fontWeight: 'normal',
+              color: '#aaaaaa',
+            },
+            left: '1%',
+            top: '2%',
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow',
+            },
+            formatter: function (params) {
+              let res =
+                params[0].axisValue +
+                '<br/>' +
+                params[0].marker +
+                '    ' +
+                params[0].seriesName +
+                '  :  ' +
+                params[0].data +
+                '<br/>' +
+                params[1].marker +
+                '    ' +
+                params[1].seriesName +
+                ' :  ' +
+                params[1].data +
+                '<br/>' +
+                params[2].marker +
+                '    ' +
+                params[2].seriesName +
+                '  :  ' +
+                params[2].data +
+                '<br/>';
+              return res;
+            },
+          },
+          grid: {
+            left: '2%', // 设置图表距离左边的距离
+            right: '2%', // 设置图表距离右边的距离
+            borderWidth: 0,
+            y2: 60, // 距离底边
+          },
+          legend: [
+            {
+              top: 5,
+              left: 'center', // 将图例居中显示
+              textStyle: {
+                color: 'rgb(89, 89, 89)',
+                fontSize: '14',
+                fontWeight: 'normal',
+              }, // 注意这里的颜色值要用引号括起来
+              data: ['设备告警', '网关告警', '能源告警'],
+              itemGap: 30, // 这里可以调整图例项之间的间距，单位为像素
+            },
+          ],
+          toolbox: {
+            show: true,
+            feature: {
+              restore: {},
+              saveAsImage: {},
+            },
+          },
+          calculable: true,
+          xAxis: [
+            {
+              type: 'category',
+              splitLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              splitArea: {
+                show: false,
+              },
+              data: dayData,
+            },
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              shwo: false,
+              splitLine: {
+                show: true,
+              },
+              axisLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              splitArea: {
+                show: false,
+              },
+              axisLabel: {
+                show: false, // 不显示刻度值
+              },
+            },
+          ],
+          dataZoom: [
+            {
+              height: 12,
+              start: 0,
+              end: 100,
+              handleSize: '300%', // 设置滑块的大小
+              bottom: 15,
+            },
+          ],
+          series: [
+            {
+              name: '能源告警',
+              type: 'bar',
+              stack: '能源告警',
+              barMaxWidth: 40,
+              barGap: '10%',
+              itemStyle: {
+                normal: {
+                  barBorderRadius: 0,
+                  color: 'rgb(246, 189, 22)',
+                },
+              },
+              data: energyAlarm,
+            },
+            {
+              name: '网关告警',
+              type: 'bar',
+              stack: '能源告警',
+              barMaxWidth: 40,
+              barGap: '10%',
+              itemStyle: {
+                normal: {
+                  barBorderRadius: 0,
+                  color: 'rgb(91, 143, 249)',
+                },
+              },
+              data: wgAlarm,
+            },
+            {
+              name: '设备告警',
+              type: 'bar',
+              stack: '能源告警',
+              barMaxWidth: 40,
+              barGap: '10%',
+              itemStyle: {
+                normal: {
+                  barBorderRadius: 0,
+                  color: 'rgb(48, 191, 120)',
+                },
+              },
+              data: equipmentAlarm,
+            },
+            {
+              name: '总数',
+              type: 'bar',
+              stack: '能源告警',
+              barMaxWidth: 40,
+              barHight: 0,
+              itemStyle: {
+                normal: {
+                  barBorderRadius: 0,
+                  color: 'rgba(0,0,0,0)',
+                },
+              },
+              label: {
+                show: true,
+                color: '#000000',
+                position: 'top',
+                top: '10',
+                formatter: function (value) {
+                  return (
+                    Number(energyAlarm[value.dataIndex]) +
+                    Number(wgAlarm[value.dataIndex]) +
+                    Number(equipmentAlarm[value.dataIndex])
+                  );
+                },
+              },
+              data: total,
+            },
+          ],
+        };
+        chartInstance = echarts.init(graphChart.value);
+        chartInstance.setOption(option);
+      };
+      return {
+        btnClick,
+        visible,
+        chartInstance,
+        handleClose,
+        toggle,
+        graphChart,
+        getChatr,
+      };
+    },
+  });
+</script>
+<style scoped lang="less">
+  .card {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 5px;
+    height: 35px;
+    background-color: rgb(254, 118, 2);
+  }
+</style>
diff --git a/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/notificationManagementMock.json b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/notificationManagementMock.json
new file mode 100644
index 0000000..6f442ed
--- /dev/null
+++ b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/notificationManagementMock.json
@@ -0,0 +1,108 @@
+{
+  "listData":[
+    {
+      "id": "d4",
+      "isDel": "0",
+      "officesId": "84",
+      "deviceCode": "37430200143",
+      "deviceName": "地听测试电表",
+      "category": "1",
+      "type": "1001",
+      "energyCount": "1",
+      "serialNumber": "69",
+      "pidCode": null,
+      "brand": "",
+      "types": "",
+      "manufacturer": "elit non in",
+      "contacts": "ad reprehenderit",
+      "phonenumber": "34",
+      "position": "in esse commodo1",
+      "activeState": "1",
+      "measurementDirection": "1",
+      "deviceMagnification": 62,
+      "deviceAccuracy": "89",
+      "frequency": "anim consequat irure",
+      "standardFrequency": "ut elit",
+      "deviceHead": "pariatur ex velit",
+      "constructor": "84566",
+      "voltageType": "cillum aliquip reprehenderit",
+      "pt": 61,
+      "ct": 64,
+      "communicationProtocol": "cupidatat nisi ea ad",
+      "ip": "",
+      "port": "",
+      "com": "",
+      "slaveAddress": "",
+      "dlt": "",
+      "conversionIdentifier": "48",
+      "multiplicationAdjustment": "1",
+      "accessMethod": "1",
+      "replacementFrequency": "0",
+      "dataDetail": "sit",
+      "insertTime": null,
+      "children": null,
+      "devicePointList": null,
+      "insertUser": null,
+      "priority": "1",
+      "alarmTitle": "电压异常告警",
+      "errorCode": "A001",
+      "monitorTime":"1",
+      "repetitions":"1",
+      "monitorTimeUnit": "分",
+      "enableRules": "1",
+      "isUse":true
+    }   , {
+      "id": "d5",
+      "isDel": "0",
+      "officesId": "84",
+      "deviceCode": "37430200143",
+      "deviceName": "地听测试电表",
+      "category": "1",
+      "type": "1001",
+      "energyCount": "1",
+      "serialNumber": "69",
+      "pidCode": null,
+      "brand": "",
+      "types": "",
+      "manufacturer": "elit non in",
+      "contacts": "ad reprehenderit",
+      "phonenumber": "34",
+      "position": "in esse commodo2",
+      "activeState": "1",
+      "measurementDirection": "1",
+      "deviceMagnification": 62,
+      "deviceAccuracy": "89",
+      "frequency": "anim consequat irure",
+      "standardFrequency": "ut elit",
+      "deviceHead": "pariatur ex velit",
+      "constructor": "84566",
+      "voltageType": "cillum aliquip reprehenderit",
+      "pt": 61,
+      "ct": 64,
+      "communicationProtocol": "cupidatat nisi ea ad",
+      "ip": "",
+      "port": "",
+      "com": "",
+      "slaveAddress": "",
+      "dlt": "",
+      "conversionIdentifier": "48",
+      "multiplicationAdjustment": "1",
+      "accessMethod": "1",
+      "replacementFrequency": "0",
+      "dataDetail": "sit",
+      "insertTime": null,
+      "children": null,
+      "devicePointList": null,
+      "insertUser": null,
+      "priority": "1",
+      "alarmTitle": "电压异常告警",
+      "errorCode": "A001",
+      "monitorTime":"1",
+      "repetitions":"1",
+      "monitorTimeUnit": "分",
+      "enableRules": "0",
+      "isUse":true
+    }
+  ]
+  
+}
\ No newline at end of file
diff --git a/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/status.vue b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/status.vue
new file mode 100644
index 0000000..d6cb122
--- /dev/null
+++ b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/status.vue
@@ -0,0 +1,39 @@
+<template>
+  <ns-drawer
+    v-model:visible="visible"
+    width="520"
+    :title="' '"
+    :footer-style="{ textAlign: 'right' }"
+    :ok="btnClick"
+    :cancel="handleClose"
+    placement="right"
+    @close="handleClose">
+    状态
+  </ns-drawer>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const visible = ref(false);
+      const handleClose = () => {
+        visible.value = false;
+      };
+      const btnClick = () => {
+        console.log('btnClick');
+      };
+      const toggle = (data) => {
+        console.log(data, 'data');
+        visible.value = true;
+      };
+      return {
+        btnClick,
+        visible,
+        handleClose,
+        toggle,
+      };
+    },
+  });
+</script>
diff --git a/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/ts/config.ts b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/ts/config.ts
new file mode 100644
index 0000000..8adc472
--- /dev/null
+++ b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/ts/config.ts
@@ -0,0 +1,164 @@
+import { dateUtil } from '/nerv-lib/util/date-util';
+import data from '../notificationManagementMock.json';
+import { http } from '/nerv-lib/util';
+import { ref } from 'vue';
+const tableKeyMap = [
+  {
+    title: '序号',
+    dataIndex: 'address',
+    customRender: (text: any) => {
+      return text.index + 1;
+    },
+  },
+  {
+    title: '告警编号',
+    dataIndex: 'id',
+  },
+  {
+    title: '告警描述',
+    dataIndex: 'deviceCode',
+  },
+  {
+    title: '优先级',
+    dataIndex: 'deviceName',
+  },
+  {
+    title: '状态',
+    dataIndex: 'position',
+  },
+  {
+    title: '错误码',
+    dataIndex: 'position',
+    textEllipsis: true,
+  },
+  {
+    title: '设备信息',
+    dataIndex: 'position',
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'enableRules',
+  },
+  {
+    title: '重复次数',
+    dataIndex: 'enableRules',
+  },
+];
+const mockData = ref(data.listData);
+export const notificationtableConfig = (look: any, status: any) => {
+  return {
+    title: '告警记录',
+    // api: '/carbon_emission/device/getDeviceList',
+    value: mockData.value,
+    headerActions: [{}],
+    columns: tableKeyMap,
+    // rowSelection: null, 选择按钮
+    columnActions: {
+      title: '操作',
+      actions: [
+        {
+          label: '详情',
+          name: 'FeedBackDetail',
+          dynamicParams: ['uuid', 'appealType'],
+          handle: (data: any) => {
+            console.log(look.value);
+            look.value.toggle(data);
+          },
+        },
+        {
+          label: '状态',
+          name: 'FeedBackDetail',
+          dynamicParams: ['uuid', 'appealType'],
+          handle: (data: any) => {
+            status.value.toggle(data);
+          },
+        },
+      ],
+    },
+
+    formConfig: {
+      schemas: [
+        {
+          field: 'name',
+          label: '告警类型',
+          component: 'NsSelect',
+          componentProps: {
+            placeholder: '请选择告警优先级',
+            options: [
+              {
+                label: '紧急',
+                value: '1',
+              },
+              {
+                label: '重要',
+                value: '2',
+              },
+              {
+                label: '一般',
+                value: '3',
+              },
+            ],
+          },
+        },
+        {
+          field: 'provider',
+          label: '状态',
+          component: 'NsSelect',
+          componentProps: {
+            placeholder: '请选择状态',
+            options: [
+              {
+                label: '待处理',
+                value: '1',
+              },
+              {
+                label: '处理中',
+                value: '2',
+              },
+              {
+                label: '已完成',
+                value: '3',
+              },
+              {
+                label: '超时',
+                value: '4',
+              },
+              {
+                label: '关闭',
+                value: '5',
+              },
+            ],
+          },
+        },
+        {
+          field: 'provider',
+          label: '告警标题',
+          component: 'NsInput',
+          componentProps: {
+            placeholder: '请输入告警标题关键字',
+          },
+        },
+        {
+          field: 'provider',
+          label: '错误码',
+          component: 'NsInputApi',
+          componentProps: {
+            placeholder: '请输入告警错误码',
+          },
+        },
+        {
+          field: 'createTime',
+          label: '生产日期',
+          component: 'NsRangePicker',
+          fieldMap: ['manufactureBeginDate', 'manufactureEndDate'],
+          componentProps: {
+            valueFormat: 'YYYY-MM-DD',
+            placeholder: ['设备生产开始日期', '设备生产结束日期'],
+          },
+        },
+      ],
+    },
+    // pagination: { pageSizeOptions: false },
+    rowKey: 'id',
+  };
+};