perf: 设备列表新增告警状态提示 && 变更收藏样式

ww
1 parent 8ab764f6
Showing 6 changed files with 85 additions and 17 deletions
src/api/device/model/deviceModel.ts
src/components/Table/src/components/TableAction.vue
src/components/Table/src/types/tableAction.ts
src/views/device/list/config/device.data.ts
src/views/device/list/cpns/modal/DeviceDetailDrawer.vue
src/views/device/list/index.vue
--- a/src/api/device/model/deviceModel.ts
View file @edc2a8b
+++ b/src/api/device/model/deviceModel.ts
View file @edc2a8b
@@ -187,6 +187,7 @@ export interface DeviceRecord {
   brand?: string;
   deviceProfileId: string;
   organizationId: string;
+  alarmStatus: number;
   deviceProfile: {
     default: boolean;
     name: string;
--- a/src/components/Table/src/components/TableAction.vue
View file @edc2a8b
+++ b/src/components/Table/src/components/TableAction.vue
View file @edc2a8b
@@ -4,12 +4,12 @@
       <Tooltip v-if="action.tooltip" v-bind="getTooltip(action.tooltip)">
         <PopConfirmButton v-bind="action">
           <Icon :icon="action.icon" :class="{ 'mr-1': !!action.label }" v-if="action.icon" />
-          <template v-if="action.label">{{ action.label }}</template>
+          <template v-if="action.label"><Label :label="action.label" /></template>
         </PopConfirmButton>
       </Tooltip>
       <PopConfirmButton v-else v-bind="action">
         <Icon :icon="action.icon" :class="{ 'mr-1': !!action.label }" v-if="action.icon" />
-        <template v-if="action.label">{{ action.label }}</template>
+        <template v-if="action.label"><Label :label="action.label" /> </template>
       </PopConfirmButton>
       <Divider
         type="vertical"
@@ -36,7 +36,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, PropType, computed, toRaw, unref } from 'vue';
+  import { defineComponent, PropType, computed, toRaw, unref, VNode } from 'vue';
   // import { MoreOutlined } from '@ant-design/icons-vue';
   import { Divider, Tooltip, TooltipProps } from 'ant-design-vue';
   import Icon from '/@/components/Icon/index';
@@ -52,7 +52,14 @@
   export default defineComponent({
     name: 'TableAction',
-    components: { Icon, PopConfirmButton, Divider, Dropdown, Tooltip },
+    components: {
+      Icon,
+      PopConfirmButton,
+      Divider,
+      Dropdown,
+      Tooltip,
+      Label: (props: { label: VNode | string }) => props.label,
+    },
     props: {
       actions: {
         type: Array as PropType<ActionItem[]>,
--- a/src/components/Table/src/types/tableAction.ts
View file @edc2a8b
+++ b/src/components/Table/src/types/tableAction.ts
View file @edc2a8b
 import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
 import { TooltipProps } from 'ant-design-vue/es/tooltip/Tooltip';
 import { RoleEnum } from '/@/enums/roleEnum';
+import { VNode } from 'vue';
 export interface ActionItem extends ButtonProps {
   onClick?: Fn;
-  label?: string;
+  label?: string | VNode;
   color?: 'success' | 'error' | 'warning';
   icon?: string;
   popConfirm?: PopConfirm;
--- a/src/views/device/list/config/device.data.ts
View file @edc2a8b
+++ b/src/views/device/list/config/device.data.ts
View file @edc2a8b
@@ -70,6 +70,7 @@ export const columns: BasicColumn[] = [
     title: '状态',
     dataIndex: 'deviceState',
     width: 110,
+    className: 'device-status',
     slots: { customRender: 'deviceState' },
   },
   {
--- a/src/views/device/list/cpns/modal/DeviceDetailDrawer.vue
View file @edc2a8b
+++ b/src/views/device/list/cpns/modal/DeviceDetailDrawer.vue
View file @edc2a8b
@@ -19,7 +19,20 @@
       <Tabs.TabPane key="modelOfMatter" tab="物模型数据">
         <ModelOfMatter :deviceDetail="deviceDetail" />
       </Tabs.TabPane>
-      <Tabs.TabPane key="3" tab="告警">
+      <Tabs.TabPane key="3">
+        <template #tab>
+          <Badge :offset="[2, -5]" style="color: inherit">
+            <span>告警</span>
+            <template #count>
+              <div
+                :style="{ visibility: deviceDetail.alarmStatus ? 'visible' : 'hidden' }"
+                class="w-3.5 h-3.5 !flex justify-center items-center rounded-1 border-red-400 border"
+              >
+                <Icon icon="mdi:bell-warning" color="#f46161" :size="12" class="!mr-0" />
+              </div>
+            </template>
+          </Badge>
+        </template>
         <AlarmLog :device-id="deviceDetail.id" class="bg-gray-100" />
       </Tabs.TabPane>
       <Tabs.TabPane key="4" tab="子设备" v-if="deviceDetail?.deviceType === 'GATEWAY'">
@@ -51,7 +64,7 @@
 <script lang="ts" setup>
   import { ref, computed } from 'vue';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-  import { Tabs } from 'ant-design-vue';
+  import { Tabs, Badge } from 'ant-design-vue';
   import Detail from '../tabs/Detail.vue';
   import ChildDevice from '../tabs/ChildDevice.vue';
   import TBoxDetail from '../tabs/TBoxDetail.vue';
@@ -62,6 +75,7 @@
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import Task from '../tabs/Task.vue';
   import AlarmLog from '/@/views/alarm/log/index.vue';
+  import { Icon } from '/@/components/Icon';
   const emit = defineEmits(['reload', 'register', 'openTbDeviceDetail', 'openGatewayDeviceDetail']);
--- a/src/views/device/list/index.vue
View file @edc2a8b
+++ b/src/views/device/list/index.vue
View file @edc2a8b
@@ -106,13 +106,17 @@
           </Tag>
         </template>
         <template #deviceState="{ record }">
-          <!-- <HeartOutlined v-if="!record.isCollect" class="mr-1" style="color: red" /> -->
-          <Tooltip>
-            <template #title> 我的收藏</template>
-            <HeartTwoTone v-if="record.isCollect" class="mr-1" twoToneColor="#3B82F6" />
-          </Tooltip>
+          <div v-if="record.isCollect">
+            <div class="absolute top-0 left-0 device-collect"> </div>
+            <Icon
+              icon="ph:star-fill"
+              class="fill-light-50 absolute top-0.5 left-0.5"
+              color="#fff"
+              :size="12"
+            />
+          </div>
+
           <Tag
-            :style="{ marginLeft: !record.isCollect ? '17px' : '' }"
             :color="
               record.deviceState == DeviceState.INACTIVE
                 ? 'warning'
@@ -135,7 +139,7 @@
           <TableAction
             :actions="[
               {
-                label: '详情',
+                label: AlarmDetailActionButton({ hasAlarm: !!record.alarmStatus }),
                 icon: 'ant-design:eye-outlined',
                 auth: DeviceListAuthEnum.DETAIL,
                 onClick: handleDetail.bind(null, record),
@@ -232,7 +236,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { reactive, onMounted, ref } from 'vue';
+  import { reactive, onMounted, ref, h, CSSProperties } from 'vue';
   import {
     DeviceModel,
     DeviceRecord,
@@ -241,8 +245,7 @@
   } from '/@/api/device/model/deviceModel';
   import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
   import { columns, DeviceListAuthEnum, searchFormSchema } from './config/device.data';
-  import { Tag, Popover, Button, Tooltip } from 'ant-design-vue';
-  import { HeartTwoTone } from '@ant-design/icons-vue';
+  import { Tag, Popover, Button, Badge } from 'ant-design-vue';
   import {
     deleteDevice,
     devicePage,
@@ -278,6 +281,7 @@
   } from './cpns/modal/BatchUpdateProductModal';
   import { DataActionModeEnum } from '/@/enums/toolEnum';
   import { AuthDropDown } from '/@/components/Widget';
+  import Icon from '/@/components/Icon';
   const { isCustomer } = useAuthDeviceDetail();
   const { createMessage } = useMessage();
@@ -294,6 +298,32 @@
   const [registerImportModal, { openModal: openImportModal }] = useModal();
   const [registerBatchUpdateProductModal, { openModal: openBatchUpdateProductModal }] = useModal();
+  const AlarmDetailActionButton = ({ hasAlarm }: { hasAlarm?: boolean }) =>
+    h(
+      Badge,
+      { offset: [0, -5] },
+      {
+        default: () => h('span', { style: { color: '#377dff' } }, '详情'),
+        count: () =>
+          h(
+            'div',
+            {
+              style: {
+                visibility: hasAlarm ? 'visible' : 'hidden',
+                width: '14px',
+                height: '14px',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                border: '1px solid #f46161',
+                borderRadius: '50%',
+              } as CSSProperties,
+            },
+            h(Icon, { icon: 'mdi:bell-warning', color: '#f46161', size: 12 })
+          ),
+      }
+    );
+
   const batchUpdateProductFlag = ref(true);
   const [
@@ -336,6 +366,7 @@
     rowKey: 'id',
     searchInfo: searchInfo,
     clickToRowSelect: false,
+    rowClassName: (record) => ((record as DeviceRecord).alarmStatus ? 'device-alarm-badge' : ''),
     actionColumn: {
       width: 200,
       title: '操作',
@@ -566,3 +597,16 @@
     }
   }
 </style>
+
+<style lang="less">
+  .device-status {
+    position: relative;
+
+    .device-collect {
+      width: 0;
+      height: 0;
+      border-top: 30px solid #377dff;
+      border-right: 30px solid transparent;
+    }
+  }
+</style>