Merge branch 'sqy_dev' into 'main'

feat:实时数据，告警...

See merge request huang/yun-teng-iot-front!52

@@ -103,3 +103,15 @@ export const getDeviceAlarm = (params?: DeviceProfileQueryParam) => {
     params,
   });
 };
+
+// 如果是flag为true 就是清除报警,否则是处理报警
+export const clearOrAckAlarm = (id: string, flag: boolean) => {
+  return defHttp.post(
+    {
+      url: `${DeviceManagerApi.DEVICE_ALARM_URL}/${id}/${flag ? 'clear' : 'ack'}`,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};

@@ -15,7 +15,6 @@
         :title="getMergeProps.title"
         @dblclick="handleTitleDbClick"
       />
-      <slot name="titleSlot" v-if="!getMergeProps.title"></slot>
     </template>
 
     <template #footer v-if="!$slots.footer">

+import { formatToDateTime } from '/@/utils/dateUtil';
 import { FormSchema } from '/@/components/Form';
 import { BasicColumn } from '/@/components/Table';
 import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
+import {} from '';
 
 export const columns: BasicColumn[] = [
   {
@@ -48,78 +50,183 @@ export const realTimeDataSearchSchemas: FormSchema[] = [
     field: 'key',
     label: '键 / 值',
     component: 'Input',
-    colProps: { span: 12 },
+    colProps: { span: 8 },
   },
 ];
 export const realTimeDataColumns: BasicColumn[] = [
   {
-    title: '最后更新时间',
-    dataIndex: 'update',
-    width: 120,
-  },
-  {
     title: '键',
-    dataIndex: 'label',
+    dataIndex: 'key',
     width: 100,
   },
   {
     title: '值',
-    dataIndex: 'name',
+    dataIndex: 'value',
     width: 160,
   },
+  {
+    title: '最后更新时间',
+    dataIndex: 'time',
+    width: 120,
+    format: (text) => formatToDateTime(text, 'YYYY-MM-DD HH:mm:ss'),
+  },
 ];
 
 // 告警
 export const alarmSearchSchemas: FormSchema[] = [
   {
-    field: 'icon',
+    field: 'status',
     label: '告警状态',
     component: 'Select',
     colProps: { span: 6 },
+    componentProps: {
+      options: [
+        {
+          label: '清除未确认',
+          value: 'CLEARED_UNACK',
+        },
+        {
+          label: '激活未确认',
+          value: 'ACTIVE_UNACK',
+        },
+        {
+          label: '清除已确认',
+          value: 'CLEARED_ACK',
+        },
+        {
+          label: '激活已确认',
+          value: 'ACTIVE_ACK',
+        },
+      ],
+    },
   },
   {
-    field: 'icon',
+    field: 'type',
     label: '告警类型',
     component: 'Input',
     colProps: { span: 6 },
   },
   {
-    field: 'icon',
+    field: 'startTime',
     label: '      ',
     component: 'DatePicker',
+    componentProps: {
+      format: (value) => dayjs(value).valueOf(),
+    },
     colProps: { span: 6 },
   },
 ];
 export const alarmColumns: BasicColumn[] = [
   {
     title: '告警时间',
-    dataIndex: 'aaa',
+    dataIndex: 'createdTime',
     width: 120,
   },
   {
     title: '告警设备',
-    dataIndex: 'label',
+    dataIndex: 'deviceName',
     width: 100,
   },
   {
     title: '类型',
-    dataIndex: 'ccc',
+    dataIndex: 'type',
     width: 160,
   },
   {
     title: '告警级别',
-    dataIndex: 'ddd',
+    dataIndex: 'severity',
     width: 160,
+    format: (text) => alarmLevel(text),
   },
   {
     title: '状态',
-    dataIndex: 'eee',
+    dataIndex: 'status',
+    format: (text) => statusType(text),
     width: 160,
   },
+];
+const alarmLevel = (type: string): string => {
+  if (type === 'CRITICAL') {
+    return '危险';
+  } else if (type === 'MAJOR') {
+    return '重要';
+  } else if (type === 'MINOR') {
+    return '次要';
+  } else if (type === 'WARNING') {
+    return '警告';
+  } else {
+    return '不确定';
+  }
+};
+const statusType = (type: string): string => {
+  if (type === 'CLEARED_UNACK') {
+    return '清除未确认';
+  } else if (type === 'CLEARED_ACK') {
+    return '清除已确认';
+  } else if (type === 'ACTIVE_ACK') {
+    return '激活已确认';
+  } else {
+    return '激活未确认';
+  }
+};
+
+export const alarmSchemasForm: FormSchema[] = [
   {
-    title: '操作',
-    dataIndex: 'name',
-    width: 160,
+    field: 'deviceName',
+    label: '告警设备',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+
+  {
+    field: 'startTs',
+    label: '开始时间',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'endTs',
+    label: '结束时间',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'type',
+    label: '告警类型',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'severity',
+    label: '严重程度',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'details',
+    label: '详情',
+    component: 'InputTextArea',
+    componentProps: {
+      disabled: true,
+    },
   },
 ];
 

+<template>
+  <BasicModal
+    v-bind="$attrs"
+    title="告警详情"
+    @register="registerModal"
+    :canFullscreen="false"
+    :footer="null"
+  >
+    <BasicForm @register="registerForm" />
+    <div class="flex justify-end">
+      <a-button type="primary" class="mr-4" @click="handleAlarm">处理</a-button>
+      <a-button type="danger" @click="clearAlarm">清除</a-button>
+    </div>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { alarmSchemasForm } from '../../config/detail.config';
+  import { clearOrAckAlarm } from '/@/api/device/deviceManager';
+  export default defineComponent({
+    name: 'AlarmDetailDrawer',
+    components: {
+      BasicModal,
+      BasicForm,
+    },
+    setup() {
+      const [registerForm, { setFieldsValue, resetFields }] = useForm({
+        showActionButtonGroup: false,
+        schemas: alarmSchemasForm,
+      });
+      const alarmId = ref('');
+      const [registerModal, { closeModal }] = useModalInner(async (data) => {
+        await resetFields();
+        await setFieldsValue(data);
+        alarmId.value = data.id;
+        console.log(data);
+      });
+      // 处理报警
+      const handleAlarm = async () => {
+        await clearOrAckAlarm(unref(alarmId), false);
+        closeModal();
+      };
+      // 清除报警
+      const clearAlarm = async () => {
+        await clearOrAckAlarm(unref(alarmId), true);
+        closeModal();
+      };
+      return {
+        registerModal,
+        registerForm,
+        clearAlarm,
+        handleAlarm,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped></style>

@@ -6,15 +6,16 @@
     :destroyOnClose="true"
     @close="closeDrawer"
     :title="deviceDetail.name"
+    width="78%"
   >
     <Tabs v-model:activeKey="activeKey" :size="size" type="card">
       <TabPane key="1" tab="详情"
         ><Detail ref="deviceDetailRef" :deviceDetail="deviceDetail"
       /></TabPane>
       <TabPane key="2" tab="实时数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'"
-        ><RealTimeData
+        ><RealTimeData :deviceDetail="deviceDetail"
       /></TabPane>
-      <TabPane key="3" tab="告警"><Alarm :id="tbDeviceId" /></TabPane>
+      <TabPane key="3" tab="告警"><Alarm :id="deviceDetail.id" /></TabPane>
       <TabPane key="4" tab="子设备" v-if="deviceDetail?.deviceType === 'GATEWAY'"
         ><ChildDevice
       /></TabPane>
@@ -49,13 +50,12 @@
       const size = ref('small');
       const deviceDetailRef = ref();
       const deviceDetail: any = ref({});
-      const tbDeviceId = ref('');
+
       // 详情回显
       const [register] = useDrawerInner(async (data) => {
-        const { id, tbDeviceId: tbId } = data;
+        const { id } = data;
         const res = await getDeviceDetail(id);
         deviceDetail.value = res;
-        tbDeviceId.value = tbId;
         const { latitude, longitude, address } = res.deviceInfo;
         if (latitude) {
           deviceDetailRef.value.initMap(longitude, latitude, address);
@@ -72,7 +72,6 @@
         closeDrawer,
         deviceDetail,
         deviceDetailRef,
-        tbDeviceId,
       };
     },
   });

@@ -56,7 +56,7 @@
       const DeviceStep1Ref = ref<InstanceType<typeof DeviceStep1>>();
       const DeviceStep2Ref = ref<InstanceType<typeof DeviceStep2>>();
       const { createMessage } = useMessage();
-      const current = ref(1);
+      const current = ref(0);
       const isUpdate = ref<Boolean>();
       const deviceInfo = ref({});
       const getTitle = computed(() => (!unref(isUpdate) ? '新增设备' : '编辑设备'));

 <template>
-  <BasicTable @register="registerTable" />
+  <div>
+    <BasicTable @register="registerTable">
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '详情',
+              icon: 'ant-design:eye-outlined',
+              onClick: handleDetail.bind(null, record),
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <AlarmDetailModal @register="registerDetailModal" />
+  </div>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import { BasicTable, useTable } from '/@/components/Table';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { alarmColumns, alarmSearchSchemas } from '../../config/detail.config';
   import { getDeviceAlarm } from '/@/api/device/deviceManager';
+  import AlarmDetailModal from '../modal/AlarmDetailModal.vue';
+  import { useModal } from '/@/components/Modal';
   export default defineComponent({
     name: 'DeviceManagement',
     components: {
       BasicTable,
+      TableAction,
+      AlarmDetailModal,
     },
     props: {
       id: {
@@ -26,15 +45,33 @@
           schemas: alarmSearchSchemas,
         },
         useSearchForm: true,
-        showTableSetting: true,
         bordered: true,
         showIndexColumn: false,
-        beforeFetch: (data) => Reflect.set(data, 'deviceId', props.id),
+        beforeFetch: (data) => {
+          Reflect.set(data, 'deviceId', props.id);
+        },
+        actionColumn: {
+          width: 200,
+          title: '操作',
+          slots: { customRender: 'action' },
+          fixed: 'right',
+        },
       });
-
+      const [registerDetailModal, { openModal }] = useModal();
+      const handleDetail = (record: Recordable) => {
+        openModal(true, record);
+      };
       return {
         registerTable,
+        registerDetailModal,
+        handleDetail,
       };
     },
   });
 </script>
+
+<style>
+  .aaa {
+    position: absolute;
+  }
+</style>

@@ -86,6 +86,7 @@
         }
       };
       const copyDeviceToken = () => {
+        // TODO:此处需要动态修改
         clipboardRef.value = props.deviceDetail.deviceToken;
         if (unref(clipboardRef)) {
           createMessage.success('复制成功~');

@@ -2,18 +2,42 @@
   <BasicTable @register="registerTable" />
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, onMounted, onUnmounted } from 'vue';
+  import { defineComponent, reactive } from 'vue';
   import { BasicTable, useTable } from '/@/components/Table';
   import { realTimeDataColumns, realTimeDataSearchSchemas } from '../../config/detail.config';
   import { useWebSocket } from '@vueuse/core';
   import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
   import { getAuthCache } from '/@/utils/auth';
+  import type { socketDataType } from '../../types';
+  import { useMessage } from '/@/hooks/web/useMessage';
   export default defineComponent({
-    name: 'DeviceManagement',
+    name: 'RealTimeData',
     components: {
       BasicTable,
     },
-    setup(_) {
+    props: {
+      deviceDetail: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup(props) {
+      const token = getAuthCache(JWT_TOKEN_KEY);
+      const state = reactive({
+        server: `ws://101.133.234.90:8080/api/ws/plugins/telemetry?token=${token}`,
+        sendValue: JSON.stringify({
+          tsSubCmds: [
+            {
+              entityType: 'DEVICE',
+              entityId: props.deviceDetail.tbDeviceId,
+              scope: 'LATEST_TELEMETRY',
+              cmdId: 1,
+            },
+          ],
+        }),
+        recordList: Array<socketDataType>(),
+      });
+      const { createMessage } = useMessage();
       const [registerTable] = useTable({
         columns: realTimeDataColumns,
         formConfig: {
@@ -21,48 +45,52 @@
           schemas: realTimeDataSearchSchemas,
         },
         useSearchForm: true,
-        showTableSetting: true,
+        showTableSetting: false,
         bordered: true,
         showIndexColumn: false,
+        dataSource: state.recordList,
       });
-      const token = getAuthCache(JWT_TOKEN_KEY);
 
-      const state = reactive({
-        server: `ws://192.168.10.139:8080/api/ws/plugins/telemetry?token=${token}`,
-        sendValue: '',
-        recordList: [] as { id: number; time: number; res: string }[],
-      });
-      const { status, data, send, close, open } = useWebSocket(state.server, {
-        autoReconnect: false,
-        heartbeat: true,
-      });
-      onMounted(() => {
-        open();
-        send(
-          JSON.stringify({
-            attrSubCmds: [],
-            tsSubCmds: [
-              {
-                entityType: 'DEVICE',
-                entityId: '3199a500-6302-11ec-ba36-417bcc842c0a',
-                scope: 'LATEST_TELEMETRY',
-                cmdId: 1,
-              },
-            ],
-            historyCmds: [],
-            entityDataCmds: [],
-            entityDataUnsubscribeCmds: [],
-            alarmDataCmds: [],
-            alarmDataUnsubscribeCmds: [],
-            entityCountCmds: [],
-            entityCountUnsubscribeCmds: [],
-          })
-        );
-
-        console.log(JSON.parse(data.value));
-      });
-      onUnmounted(() => {
-        close();
+      const { send } = useWebSocket(state.server, {
+        onConnected() {
+          send(state.sendValue);
+        },
+        onMessage(_, e) {
+          const { data } = JSON.parse(e.data);
+          console.log('来新消息了');
+          const newArray: any = [];
+          for (const key in data) {
+            const newData = data[key].flat(1);
+            let obj = {
+              key,
+              time: newData[0],
+              value: newData[1],
+            };
+            if (state.recordList.length === 0) {
+              state.recordList.push(obj);
+            } else {
+              newArray.push(obj);
+            }
+          }
+          newArray.forEach((item) => {
+            let flag = false;
+            state.recordList.forEach((item1) => {
+              if (item.key === item1.key) {
+                item1.time = item.time;
+                item1.value = item.value;
+                console.log('哈哈哈', item, item1, state.recordList);
+                flag = true;
+              }
+            });
+            if (!flag) {
+              state.recordList.unshift(item);
+            }
+          });
+        },
+        onDisconnected() {},
+        onError() {
+          createMessage.error('webSocket连接超时,请联系管理员');
+        },
       });
 
       return {

@@ -18,3 +18,9 @@ export interface DeviceType {
   tenantCode: string;
   updateTime: string;
 }
+
+export interface socketDataType {
+  key: string;
+  value: string;
+  time: number;
+}