feat(master/device-detail && alarm): Enhance device detail page with alarm list and binary sensors integration, update iconfont URLs, and improve alarm confirmation handling

2026-01-27 20:56:54 +07:00
parent ed5751002b
commit ea07d0c99e
16 changed files with 497 additions and 104 deletions
--- a/src/pages/Manager/Device/Detail/components/BinarySensors.tsx
+++ b/src/pages/Manager/Device/Detail/components/BinarySensors.tsx
@@ -0,0 +1,105 @@
+import IconFont from '@/components/IconFont';
+import { StatisticCard } from '@ant-design/pro-components';
+import { Flex, GlobalToken, Grid, theme } from 'antd';
+
+type BinarySensorsProps = {
+  nodeConfigs: MasterModel.NodeConfig[];
+};
+
+export const getBinaryEntities = (
+  nodeConfigs: MasterModel.NodeConfig[] = [],
+): MasterModel.Entity[] =>
+  nodeConfigs.flatMap((nodeConfig) =>
+    nodeConfig.type === 'din'
+      ? nodeConfig.entities.filter(
+          (entity) => entity.type === 'bin' && entity.active === 1,
+        )
+      : [],
+  );
+interface IconTypeResult {
+  iconType: string;
+  color: string;
+}
+
+const getIconTypeByEntity = (
+  entity: MasterModel.Entity,
+  token: GlobalToken,
+): IconTypeResult => {
+  if (!entity.config || entity.config.length === 0) {
+    return {
+      iconType: 'icon-device-setting',
+      color: token.colorPrimary,
+    };
+  }
+  switch (entity.config[0].subType) {
+    case 'smoke':
+      return {
+        iconType: 'icon-fire',
+        color: entity.value === 0 ? token.colorSuccess : token.colorWarning,
+      };
+    case 'heat':
+      return {
+        iconType: 'icon-fire',
+        color: entity.value === 0 ? token.colorSuccess : token.colorWarning,
+      };
+    case 'motion':
+      return {
+        iconType: 'icon-motion',
+        color: entity.value === 0 ? token.colorTextBase : token.colorInfoActive,
+      };
+    case 'flood':
+      return {
+        iconType: 'icon-water-ingress',
+        color: entity.value === 0 ? token.colorSuccess : token.colorWarning,
+      };
+    case 'door':
+      return {
+        iconType: entity.value === 0 ? 'icon-door' : 'icon-door-open',
+        color: entity.value === 0 ? token.colorText : token.colorWarning,
+      };
+    case 'button':
+      return {
+        iconType: 'icon-alarm-button',
+        color: entity.value === 0 ? token.colorText : token.colorSuccess,
+      };
+    default:
+      return {
+        iconType: 'icon-door',
+        color: token.colorPrimary,
+      };
+  }
+};
+
+const StatisticCardItem = (entity: MasterModel.Entity, token: GlobalToken) => {
+  const { iconType, color } = getIconTypeByEntity(entity, token);
+  return (
+    <StatisticCard
+      key={entity.entityId}
+      statistic={{
+        title: entity.name,
+        icon: (
+          <IconFont type={iconType} style={{ color: color, fontSize: 24 }} />
+        ),
+        value: entity.active === 1 ? 'Active' : 'Inactive',
+      }}
+    />
+  );
+};
+
+const BinarySensors = ({ nodeConfigs }: BinarySensorsProps) => {
+  const binarySensors = getBinaryEntities(nodeConfigs);
+  console.log('BinarySensor: ', binarySensors);
+
+  const { token } = theme.useToken();
+  const { useBreakpoint } = Grid;
+  const screens = useBreakpoint();
+  return (
+    <Flex wrap="wrap">
+      <StatisticCard.Group direction={screens.sm ? 'row' : 'column'}>
+        {binarySensors.map((entity) => StatisticCardItem(entity, token))}
+      </StatisticCard.Group>
+    </Flex>
+  );
+};
+
+export default BinarySensors;