feat: Add new map component

apps/web/package.json

@@ -37,7 +37,8 @@
         "react-intl-universal": "^2.11.1",
         "react-router": "^6.26.1",
         "react-router-dom": "^6.26.1",
-        "zustand": "^4.5.5"
+        "zustand": "^4.5.5",
+        "ol": "^10.2.1"
     },
     "devDependencies": {
         "@milesight/scripts": "workspace:*",

apps/web/src/plugin/components/address-select/index.tsx

@@ -0,0 +1,78 @@
+import { useMemo } from 'react';
+import { MenuItem, Autocomplete, TextField } from '@mui/material';
+import type { AutocompleteProps } from '@mui/material';
+import { useI18n } from '@milesight/shared/src/hooks';
+import { useAddressOptions } from '../../hooks';
+
+import './style.less';
+
+type EntitySelectProps = AutocompleteProps<AdressType, undefined, false, undefined> &
+    EntitySelectCommonProps<AdressType>;
+
+/**
+ * 实体选择下拉框组件（单选）
+ */
+const AddressSelect = (props: EntitySelectProps) => {
+    const { value, onChange, ...restProps } = props;
+
+    const { getIntlText } = useI18n();
+
+    /**
+     * 动态从服务器获取 options
+     */
+    const { loading, getAddrLists, options = [] } = useAddressOptions();
+
+    const renderOption: EntitySelectProps['renderOption'] = (optionProps, option) => {
+        const { label, value } = option || {};
+
+        return (
+            <MenuItem {...(optionProps || {})} key={value}>
+                <div className="ms-entity-select-item">
+                    <div className="ms-entity-select-item__label" title={label}>
+                        {label}
+                    </div>
+                </div>
+            </MenuItem>
+        );
+    };
+
+    // const handleChange = (val: any, val2: any) => {
+    //     console.log(val2, "🚀 ~ handleChange ~ val:", val)
+    //     onChange(val2)
+    // }
+
+    return (
+        <Autocomplete
+            {...restProps}
+            value={value}
+            onChange={(_, option) => onChange(option)}
+            options={options}
+            renderInput={params => (
+                <TextField
+                    {...params}
+                    error={(restProps as any).error}
+                    helperText={
+                        (restProps as any).error ? (
+                            <div style={{ marginLeft: -14 }}>
+                                {(restProps as any).error.message}
+                            </div>
+                        ) : (
+                            ''
+                        )
+                    }
+                    label={getIntlText('common.label.address')}
+                />
+            )}
+            renderOption={renderOption}
+            getOptionLabel={option => option?.label || ''}
+            loading={loading}
+            filterOptions={options => options}
+            onInputChange={(_, keyword, reason) => {
+                getAddrLists(keyword);
+            }}
+            isOptionEqualToValue={(option, currentVal) => option.value === currentVal.value}
+        />
+    );
+};
+
+export default AddressSelect;

apps/web/src/plugin/components/address-select/style.less

@@ -0,0 +1,6 @@
+.ms-entity-select-item {
+    &__description {
+        color: var(--text-color-tertiary);
+        .text-size(@font-size-md);
+    }
+}

apps/web/src/plugin/components/index.ts

@@ -7,3 +7,6 @@ export { default as ChartTimeSelect } from './chart-time-select';
 export { default as entitySelect } from './entity-select';
 export { default as chartMetricsSelect } from './chart-metrics-select';
 export { default as multiEntitySelect } from './multi-entity-select';
+export { default as multiDeviceSelect } from './multi-device-select';
+export { default as addressSelect } from './address-select';
+export { default as multiEntitySelectByDevice } from './multi-entity-select-by-device';

apps/web/src/plugin/components/multi-device-select/index.tsx

@@ -0,0 +1,106 @@
+import { Autocomplete, TextField, Checkbox, Tooltip, Chip } from '@mui/material';
+
+import type { AutocompleteProps } from '@mui/material';
+
+import { useI18n } from '@milesight/shared/src/hooks';
+import { useDeviceSelectOptions } from '../../hooks';
+
+import './style.less';
+
+type DeviceSelectProps = AutocompleteProps<DeviceOptionType, true, false, undefined> &
+    DeviceSelectCommonProps<DeviceOptionType[]>;
+
+/**
+ * 实体选择下拉框组件（多选）
+ */
+const MultiDeviceSelect = (props: DeviceSelectProps) => {
+    const {
+        value,
+        onChange,
+        /**
+         * 默认最大可选择 5 个
+         */
+        maxCount = 5,
+        ...restProps
+    } = props;
+
+    const { getIntlText } = useI18n();
+
+    /**
+     * 动态从服务器获取 options
+     */
+    const { loading, getDeviceLists, options = [] } = useDeviceSelectOptions();
+
+    const renderOption: DeviceSelectProps['renderOption'] = (optionProps, option, { selected }) => {
+        const { label, value } = option || {};
+
+        return (
+            <li {...(optionProps || {})} key={value}>
+                <div className="ms-multi-entity-select">
+                    <Checkbox style={{ marginRight: 8 }} checked={selected} />
+                    <div className="ms-entity-select-item">
+                        <div className="ms-entity-select-item__label" title={label}>
+                            {label}
+                        </div>
+                    </div>
+                </div>
+            </li>
+        );
+    };
+    return (
+        <Autocomplete
+            {...restProps}
+            value={value}
+            multiple
+            onChange={(_, option) => onChange(option)}
+            options={options}
+            getOptionDisabled={option => {
+                const currentValue = value || [];
+                /**
+                 * 默认实体最多只能选择 5 个
+                 */
+                if (currentValue.length < maxCount) {
+                    return false;
+                }
+
+                return currentValue.every(e => e.value !== option.value);
+            }}
+            renderInput={params => (
+                <TextField
+                    {...params}
+                    label={getIntlText('common.label.device')}
+                    error={(restProps as any).error}
+                    helperText={
+                        (restProps as any).error ? (
+                            <div style={{ marginLeft: -14 }}>
+                                {(restProps as any).error.message}
+                            </div>
+                        ) : (
+                            ''
+                        )
+                    }
+                />
+            )}
+            renderOption={renderOption}
+            getOptionLabel={option => option?.label || ''}
+            loading={loading}
+            filterOptions={options => options}
+            onInputChange={(_, keyword, reason) => {
+                getDeviceLists(keyword);
+            }}
+            isOptionEqualToValue={(option, currentVal) => option.value === currentVal.value}
+            renderTags={(value, getTagProps) =>
+                value.map((option, index) => {
+                    const { key, ...tagProps } = getTagProps({ index });
+                    return (
+                        <Tooltip key={key} title={option.label}>
+                            <Chip label={option.label} {...tagProps} />
+                        </Tooltip>
+                    );
+                })
+            }
+        />
+    );
+};
+
+export default MultiDeviceSelect;

apps/web/src/plugin/components/multi-device-select/style.less

@@ -0,0 +1,5 @@
+.ms-multi-entity-select {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+}

apps/web/src/plugin/components/multi-entity-select-by-device/index.tsx

@@ -0,0 +1,109 @@
+import { Autocomplete, TextField, Checkbox, Tooltip, Chip } from '@mui/material';
+
+import type { AutocompleteProps } from '@mui/material';
+
+import { useI18n } from '@milesight/shared/src/hooks';
+import { useEntitySelectOptionsByDevice } from '../../hooks';
+
+import './style.less';
+
+type EntitySelectProps = AutocompleteProps<EntityOptionTypeForDevice, true, false, undefined> &
+    EntitySelectCommonProps<EntityOptionTypeForDevice[]>;
+
+/**
+ * 实体选择下拉框组件（多选）
+ */
+const MultiEntitySelectByDevice = (props: EntitySelectProps) => {
+    const {
+        value,
+        onChange,
+        entityType,
+        entityValueTypes,
+        customFilterEntity,
+        /**
+         * 默认最大可选择 5 个
+         */
+        maxCount = 5,
+        deviceId,
+        ...restProps
+    } = props;
+
+    const { getIntlText } = useI18n();
+
+    /**
+     * 动态从服务器获取 options
+     */
+    const {
+        loading,
+        options = [],
+        filterOptions,
+    } = useEntitySelectOptionsByDevice({
+        entityType,
+        entityValueTypes,
+        customFilterEntity,
+        deviceId,
+    });
+
+    const renderOption: EntitySelectProps['renderOption'] = (optionProps, option, { selected }) => {
+        const { label, value } = option || {};
+
+        return (
+            <li {...(optionProps || {})} key={value}>
+                <div className="ms-multi-entity-select">
+                    <Checkbox style={{ marginRight: 8 }} checked={selected} />
+                    <div className="ms-entity-select-item">
+                        <div className="ms-entity-select-item__label" title={label}>
+                            {label}
+                        </div>
+                    </div>
+                </div>
+            </li>
+        );
+    };
+    return (
+        <Autocomplete
+            {...restProps}
+            value={value}
+            multiple
+            onChange={(_, option) => onChange(option)}
+            options={options}
+            getOptionDisabled={option => {
+                const currentValue = value || [];
+                /**
+                 * 默认实体最多只能选择 5 个
+                 */
+                if (currentValue.length < maxCount) {
+                    return false;
+                }
+
+                return currentValue.every(e => e.value !== option.value);
+            }}
+            renderInput={params => (
+                <TextField
+                    {...params}
+                    label={getIntlText('common.label.entity')}
+                    error={(restProps as any).error}
+                    helperText={
+                        (restProps as any).error ? (
+                            <div style={{ marginLeft: -14 }}>
+                                {(restProps as any).error.message}
+                            </div>
+                        ) : (
+                            ''
+                        )
+                    }
+                />
+            )}
+            renderOption={renderOption}
+            getOptionLabel={option => option?.label || ''}
+            loading={loading}
+            filterOptions={options => options}
+            onInputChange={(_, keyword, reason) => {
+                filterOptions(keyword);
+            }}
+            isOptionEqualToValue={(option, currentVal) => option.value === currentVal.value}
+        />
+    );
+};
+
+export default MultiEntitySelectByDevice;

apps/web/src/plugin/components/multi-entity-select-by-device/style.less

@@ -0,0 +1,6 @@
+.ms-multi-entity-select {
+    display: flex;
+    align-items: flex-start;
+    align-items: center;
+    justify-content: flex-start;
+}

apps/web/src/plugin/hooks/index.ts

@@ -1,3 +1,6 @@
 export * from './useEntitySelectOptions';
 export * from './useBasicChartEntity';
 export * from './useEntityApi';
+export * from './useDeviceSelectOptions';
+export * from './useAddressOptions';
+export * from './useEntitySelectOptionsByDevice';