Milesight-IoT · indredK · Nov 30, 2024
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -29,6 +29,7 @@
         "dayjs": "^1.11.13",
         "immer": "^10.1.1",
         "lodash-es": "^4.17.21",
+        "pica": "^9.0.1",
         "qs": "^6.13.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -37,9 +38,14 @@
         "react-intl-universal": "^2.11.1",
         "react-router": "^6.26.1",
         "react-router-dom": "^6.26.1",
+        "video.js": "^8.19.1",
         "zustand": "^4.5.5"
     },
     "devDependencies": {
+        "@types/pica": "^9.0.4",
+        "@types/video.js": "^7.3.58",
+
+
         "@milesight/scripts": "workspace:*",
         "@milesight/spec": "workspace:*",
         "@types/lodash-es": "^4.17.12",

diff --git a/apps/web/src/components/date-time-picker/index.tsx b/apps/web/src/components/date-time-picker/index.tsx
@@ -0,0 +1,30 @@
+import { useRef } from 'react';
+import * as React from 'react';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import dayjs from 'dayjs';
+
+const BasicDateTimePicker: React.FC<{
+    playbackEntity: any;
+    onSuccess: (data: any) => void;
+}> = props => {
+    const dateTimePickerRef = useRef<any>(null);
+
+    const { onSuccess, ...rest } = props;
+
+    // 设置该日期组件，不能选择当前时间之后的未来，以及限定在一个月以内，并且可以清空时间
+    return (
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <DateTimePicker
+                ref={dateTimePickerRef}
+                onAccept={onSuccess}
+                minDateTime={dayjs().add(-1, 'month')}
+                maxDateTime={dayjs()}
+                {...rest}
+            />
+        </LocalizationProvider>
+    );
+};
+
+export default BasicDateTimePicker;
diff --git a/apps/web/src/components/index.ts b/apps/web/src/components/index.ts
@@ -8,3 +8,4 @@ export { default as Tooltip } from './tooltip';
 export { default as DateRangePicker } from './date-range-picker';
 export { default as RouteLoadingIndicator } from './route-loading-indicator';
 export { default as Empty } from './empty';
+export { default as DateTimePicker } from './date-time-picker';
diff --git a/apps/web/src/plugin/plugins/video-card/config.json b/apps/web/src/plugin/plugins/video-card/config.json
@@ -0,0 +1,91 @@
+{
+    "type": "videoCard",
+    "name": "Video Card",
+    "class": "data_card",
+    "icon": "./icon.png",
+    "defaultRow": 9,
+    "defaultCol": 12,
+    "minRow": 9,
+    "minCol": 12,
+    "configProps": [
+        {
+            "style": "width: 100%",
+            "components": [
+                {
+                    "type": "entitySelect",
+                    "title": "Entity",
+                    "key": "entity",
+                    "style": "width: 100%",
+                    "componentProps": {
+                        "size": "small",
+                        "entityType": ["SERVICE"],
+                        "accessMods": ["W", "RW"],
+                        "entityExcludeChildren": true
+                    },
+                    "rules": {
+                        "required": true
+                    }
+                }
+            ]
+        },
+        {
+            "style": "width: 100%",
+            "components": [
+                {
+                    "type": "input",
+                    "title": "Label",
+                    "key": "title",
+                    "style": "width: 100%",
+                    "defaultValue": "Label",
+                    "componentProps": {
+                        "size": "small",
+                        "inputProps": {
+                            "maxLength": 30
+                        }
+                    }
+                }
+            ]
+        },
+        {
+            "style": "width: 100%",
+            "components": [
+                {
+                    "type": "entitySelect",
+                    "title": "playbackEntity",
+                    "key": "playbackEntity",
+                    "style": "width: 100%",
+                    "componentProps": {
+                        "size": "small",
+                        "entityType": ["SERVICE"],
+                        "accessMods": ["W", "RW"],
+                        "entityExcludeChildren": true
+                    },
+                    "rules": {
+                        "required": true
+                    }
+                }
+            ]
+        }
+    ],
+    "view": [
+        {
+            "tag": "div",
+            "themes": {
+                "default": {
+                    "class": "video-view__container"
+                }
+            },
+            "children": [
+                {
+                    "tag": "span",
+                    "themes": {
+                        "default": {
+                            "class": "video-view__content"
+                        }
+                    },
+                    "params": ["entity"]
+                }
+            ]
+        }
+    ]
+}
diff --git a/apps/web/src/plugin/plugins/video-card/configure/index.tsx b/apps/web/src/plugin/plugins/video-card/configure/index.tsx
@@ -0,0 +1,27 @@
+import { forwardRef } from 'react';
+import { RenderConfig } from '../../../render';
+import { useConnect } from '../runtime';
+import type { ConfigureType, ViewConfigProps } from '../typings';
+
+interface ConfigPluginProps {
+    value: ViewConfigProps;
+    config: ConfigureType;
+    onOk: (data: ViewConfigProps) => void;
+    onChange: (data: ViewConfigProps) => void;
+}
+const Plugin = forwardRef((props: ConfigPluginProps, ref: any) => {
+    const { value, config, onOk, onChange } = props;
+    const { configure, handleChange } = useConnect({ value, config, onChange });
+
+    return (
+        <RenderConfig
+            value={value}
+            config={configure}
+            ref={ref}
+            onOk={onOk}
+            onChange={handleChange}
+        />
+    );
+});
+
+export default Plugin;
diff --git a/apps/web/src/plugin/plugins/video-card/icon.png b/apps/web/src/plugin/plugins/video-card/icon.png
diff --git a/apps/web/src/plugin/plugins/video-card/runtime/action/index.tsx b/apps/web/src/plugin/plugins/video-card/runtime/action/index.tsx
@@ -0,0 +1,15 @@
+import { useTrigger } from './useTrigger';
+import type { ViewConfigProps, ConfigureType } from '../../typings';
+
+interface IProps {
+    value: ViewConfigProps;
+    config: ConfigureType;
+    onChange: (data: ViewConfigProps) => void;
+}
+export const useAction = ({ onChange }: IProps) => {
+    const { handleChange } = useTrigger({ onChange });
+
+    return {
+        handleChange,
+    };
+};
diff --git a/apps/web/src/plugin/plugins/video-card/runtime/action/useTrigger.tsx b/apps/web/src/plugin/plugins/video-card/runtime/action/useTrigger.tsx
@@ -0,0 +1,29 @@
+// import { useRef } from 'react';
+import type { ViewConfigProps } from '../../typings';
+
+interface IProps {
+    onChange: (data: ViewConfigProps) => void;
+}
+export const useTrigger = ({ onChange }: IProps) => {
+    // const prevStateRef = useRef<ViewConfigProps>();
+
+    const handleChange = (value: ViewConfigProps) => {
+        // const { entity } = value || {};
+        // const { value: entityValue, rawData } = entity || {};
+        // const prevEntityValue = prevStateRef.current?.entity?.value;
+
+        // // 如果实体变化时，更新title为当前选中实体名称
+        // if (prevEntityValue !== entityValue) {
+        //     // 当前选中实体
+        //     const { entityName } = rawData || {};
+        //     entityName && (value.title = entityName);
+        // }
+
+        // prevStateRef.current = value;
+        onChange(value);
+    };
+
+    return {
+        handleChange,
+    };
+};
diff --git a/apps/web/src/plugin/plugins/video-card/runtime/index.tsx b/apps/web/src/plugin/plugins/video-card/runtime/index.tsx
@@ -0,0 +1,18 @@
+import { useAction } from './action';
+import { useReducer } from './reducer';
+import type { ConfigureType, ViewConfigProps } from '../typings';
+
+interface IProps {
+    value: ViewConfigProps;
+    config: ConfigureType;
+    onChange: (data: ViewConfigProps) => void;
+}
+export const useConnect = ({ value, config, onChange }: IProps) => {
+    const { handleChange } = useAction({ value, config, onChange });
+    const { configure } = useReducer({ value, config });
+
+    return {
+        configure,
+        handleChange,
+    };
+};
diff --git a/apps/web/src/plugin/plugins/video-card/runtime/reducer/index.tsx b/apps/web/src/plugin/plugins/video-card/runtime/reducer/index.tsx
@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import { cloneDeep } from 'lodash-es';
+import { useDynamic } from './useDynamic';
+import type { ConfigureType, ViewConfigProps } from '../../typings';
+
+interface IProps {
+    value: ViewConfigProps;
+    config: ConfigureType;
+}
+export const useReducer = ({ value, config }: IProps) => {
+    const { updateDynamicForm } = useDynamic();
+
+    // /** config实时保存value */
+    // const updateConfigState = (value: ViewConfigProps, config: ConfigureType) => {
+    //     config.config = value || {};
+
+    //     return config;
+    // };
+
+    /** 生成新的configure */
+    const configure = useMemo(() => {
+        // 按顺序执行回调，返回最新的configure
+        const ChainCallList = [updateDynamicForm];
+
+        const newConfig = ChainCallList.reduce((config, fn) => {
+            return fn(value, cloneDeep(config));
+        }, config);
+
+        return { ...newConfig };
+    }, [value, config]);
+
+    return {
+        configure,
+    };
+};
diff --git a/apps/web/src/plugin/plugins/video-card/runtime/reducer/useDynamic.tsx b/apps/web/src/plugin/plugins/video-card/runtime/reducer/useDynamic.tsx
@@ -0,0 +1,79 @@
+import type { ConfigureType, ViewConfigProps } from '../../typings';
+
+export const useDynamic = () => {
+    /**
+     * 动态生成的每一项表单
+     */
+    const generateFormItem = (title: string, index: string, value: Record<string, any>) => {
+        return {
+            $$type: 'dynamic',
+            title,
+            style: 'display: flex;margin-bottom: 20px;',
+            components: [
+                // {
+                //     type: 'iconSelect',
+                //     key: `Icon_${index}`,
+                //     style: 'flex: 1;padding-right: 12px;',
+                //     defaultValue: value[`Icon_${index}`] || undefined,
+                //     componentProps: {
+                //         size: 'small',
+                //     },
+                // },
+                // {
+                //     type: 'iconColorSelect',
+                //     key: `IconColor_${index}`,
+                //     style: 'flex: 1;',
+                //     defaultValue: value[`IconColor_${index}`] || undefined,
+                //     componentProps: {
+                //         size: 'small',
+                //     },
+                // },
+            ],
+        };
+    };
+
+    /**
+     * 生成动态configure逻辑
+     */
+    const dynamicConfigure = (
+        currentEntity: Required<EntityOptionType>['rawData'],
+        value: Record<string, any>,
+    ) => {
+        const { entityValueAttribute, entityId } = currentEntity || {};
+        const { enum: enumStruct } = entityValueAttribute || {};
+
+        // 非枚举类型
+        if (!enumStruct) return [generateFormItem(`Appearance`, entityId?.toString(), value)];
+
+        // 枚举类型
+        return Object.keys(enumStruct || {}).map(enumKey => {
+            const enumValue = enumStruct[enumKey];
+            return generateFormItem(`Appearance of ${enumValue}`, enumKey, value);
+        });
+    };
+
+    /** 动态渲染表单 */
+    const updateDynamicForm = (value: ViewConfigProps, config: ConfigureType) => {
+        const { entity } = value || {};
+        // 获取当前选中实体
+        const { rawData: currentEntity } = entity || {};
+        if (!currentEntity) return config;
+
+        // 渲染动态表单
+        const result = dynamicConfigure(currentEntity, value);
+        if (!result) return config;
+
+        // 动态渲染表单
+        const { configProps } = config || {};
+        const newConfigProps = [
+            ...configProps.filter((item: any) => item.$$type !== 'dynamic'),
+            ...result,
+        ];
+        config.configProps = newConfigProps;
+        return config;
+    };
+
+    return {
+        updateDynamicForm,
+    };
+};
diff --git a/apps/web/src/plugin/plugins/video-card/typings.d.ts b/apps/web/src/plugin/plugins/video-card/typings.d.ts
@@ -0,0 +1,8 @@
+export interface ViewConfigProps {
+    title: string;
+    entity: EntityOptionType;
+    playbackEntity: EntityOptionType;
+    [key: string]: string;
+}
+
+export type ConfigureType = any;