Milesight-IoT · yizhihuamao · Dec 24, 2024
diff --git a/.env b/.env
@@ -5,9 +5,15 @@ WEB_API_ORIGIN=/
 # Websocket Host 地址
 WEB_WS_HOST=/
 # 接口 API 代理地址
+<<<<<<< HEAD
 WEB_API_PROXY=https://beaver-iot.milesight.com/api/v1
 # WebSocket 代理地址
 WEB_SOCKET_PROXY=wss://beaver-iot.milesight.com
+=======
+WEB_API_PROXY=https://demo.beaver-iot.com/api/v1
+# WebSocket 代理地址
+WEB_SOCKET_PROXY=wss://demo.beaver-iot.com
+>>>>>>> 1e22786 (feat: Integrate with cloud ecosystem platform to develop complex and reusable components that support:)
 
 # Oauth client ID
 OAUTH_CLIENT_ID=iab

diff --git a/README.md b/README.md
@@ -1,6 +1,10 @@
 # Beaver IoT Web
 
+<<<<<<< HEAD
 Beaver IoT Web is a Monorepo-based frontend project that encompasses the web application and its dependent build scripts, project specifications, internationalization, and common code libraries. It is managed using Pnpm Workspace, providing a unified development environment and build process for ease of development and maintenance.
+=======
+Beaver IoT Web 是基于 Monorepo 的前端项目，包含了 Web 应用及其依赖的构建脚本、项目规范、国际化、公共代码等子库，利用 Pnpm Workspace 进行管理，提供了统一的开发环境和构建流程，方便开发和维护。
+>>>>>>> 1e22786 (feat: Integrate with cloud ecosystem platform to develop complex and reusable components that support:)
 
 ## Directory Structure
 

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -28,13 +28,16 @@
         "classnames": "^2.5.1",
         "dayjs": "^1.11.13",
         "immer": "^10.1.1",
+        "konva": "^9.3.16",
         "lodash-es": "^4.17.21",
+        "mqtt": "^5.10.2",
         "qs": "^6.13.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-grid-layout": "^1.5.0",
         "react-hook-form": "^7.53.0",
         "react-intl-universal": "^2.11.1",
+        "react-konva": "^18.2.10",
         "react-router": "^6.26.1",
         "react-router-dom": "^6.26.1",
         "zustand": "^4.5.5"

diff --git a/apps/web/src/pages/dashboard/components/widgets/index.tsx b/apps/web/src/pages/dashboard/components/widgets/index.tsx
@@ -99,13 +99,23 @@ const Widgets = (props: WidgetProps) => {
                 const id = (data.widget_id || data.tempId) as ApiKey;
                 const pos = {
                     ...data.data.pos,
+<<<<<<< HEAD
                     w: data.data?.pos?.w || data.data.minCol || 3,
                     h: data.data?.pos?.h || data.data.minRow || 2,
                     minW: data.data.minCol || 3,
                     minH: data.data.minRow || 2,
                     i: data?.widget_id || data.data.tempId,
                     x: data.data.pos?.x || 0,
                     y: data.data.pos?.y || 0,
+=======
+                    w: data.data?.pos?.w || data.data.minCol,
+                    h: data.data?.pos?.h || data.data.minRow,
+                    minW: data.data.minCol || 3,
+                    minH: data.data.minRow || 2,
+                    i: data?.widget_id || data.data.tempId,
+                    x: data.data.pos.x || 0,
+                    y: data.data.pos.y || 0,
+>>>>>>> 1e22786 (feat: Integrate with cloud ecosystem platform to develop complex and reusable components that support:)
                 };
                 return (
                     <div

diff --git a/apps/web/src/pages/dashboard/components/widgets/widget.tsx b/apps/web/src/pages/dashboard/components/widgets/widget.tsx
@@ -48,33 +48,37 @@ const Widget = (props: WidgetProps) => {
                     </span>
                 </div>
             )}
-            {ComponentView ? (
-                <div ref={widgetRef} className="dashboard-content-widget-main">
-                    <Suspense>
-                        <ComponentView
-                            config={data.data.config}
-                            configJson={data.data}
-                            isEdit={isEdit}
-                            mainRef={mainRef}
-                        />
-                    </Suspense>
-                    {isEdit && (
-                        <span
-                            className="dashboard-custom-resizable-handle dashboard-custom-resizable-handle-se"
-                            onClick={(e: any) => e.stopPropagation()}
-                        />
-                    )}
-                </div>
+            {!(plugins as any)[`${data.data.type}`] ? (
+                ComponentView ? (
+                    <div ref={widgetRef} className="dashboard-content-widget-main">
+                        <Suspense>
+                            <ComponentView
+                                config={data.data.config}
+                                configJson={data.data}
+                                isEdit={isEdit}
+                                mainRef={mainRef}
+                            />
+                        </Suspense>
+                        {isEdit && (
+                            <span
+                                className="dashboard-custom-resizable-handle dashboard-custom-resizable-handle-se"
+                                onClick={(e: any) => e.stopPropagation()}
+                            />
+                        )}
+                    </div>
+                ) : (
+                    <div ref={widgetRef} className="dashboard-content-widget-main">
+                        <RenderView configJson={data.data as any} config={data.data.config} />
+                        {isEdit && (
+                            <span
+                                className="dashboard-custom-resizable-handle dashboard-custom-resizable-handle-se"
+                                onClick={(e: any) => e.stopPropagation()}
+                            />
+                        )}
+                    </div>
+                )
             ) : (
-                <div ref={widgetRef} className="dashboard-content-widget-main">
-                    <RenderView configJson={data.data as any} config={data.data.config} />
-                    {isEdit && (
-                        <span
-                            className="dashboard-custom-resizable-handle dashboard-custom-resizable-handle-se"
-                            onClick={(e: any) => e.stopPropagation()}
-                        />
-                    )}
-                </div>
+                <div>11</div>
             )}
         </div>
     );

diff --git a/apps/web/src/pages/dashboard/index.tsx b/apps/web/src/pages/dashboard/index.tsx
@@ -1,5 +1,9 @@
 import { useState, useEffect } from 'react';
 import { Tabs, Tab, Toolbar } from '@mui/material';
+import Chart from 'chart.js/auto'; // 引入 Chart.js
+import { registerables } from 'chart.js';
+import 'chartjs-adapter-date-fns'; // 引入日期适配器
+import zoomPlugin from 'chartjs-plugin-zoom';
 import { AddIcon, toast } from '@milesight/shared/src/components';
 import { useI18n, usePreventLeave } from '@milesight/shared/src/hooks';
 import { dashboardAPI, awaitWrap, isRequestSuccess, getResponseData } from '@/services/http';
@@ -9,6 +13,8 @@ import DashboardContent from './components/dashboard-content';
 import AddDashboard from './components/add-dashboard';
 import './style.less';
 
+Chart.register(...registerables, zoomPlugin); // 注册所有组件和适配器
+
 export default () => {
     const { getIntlText } = useI18n();
     const confirm = useConfirm();

diff --git a/apps/web/src/pages/dashboard/style.less b/apps/web/src/pages/dashboard/style.less
@@ -26,7 +26,11 @@
     &-fullscreen {
         padding: 5px;
         line-height: 0;
+<<<<<<< HEAD
         border: 1px solid var(--primary-color-5);
+=======
+        border: 1px solid rgba(52 145 250 / 0.5);
+>>>>>>> 1e22786 (feat: Integrate with cloud ecosystem platform to develop complex and reusable components that support:)
         border-radius: @border-radius-base;
         cursor: pointer;
 
@@ -46,7 +50,10 @@
         height: 100%;
         padding: 24px 20px 0 0;
         line-height: 1;
+<<<<<<< HEAD
         background: var(--component-background);
+=======
+>>>>>>> 1e22786 (feat: Integrate with cloud ecosystem platform to develop complex and reusable components that support:)
         border-bottom: 1px solid var(--border-color-base);
         cursor: pointer;
 
@@ -153,11 +160,14 @@
                     }
                 }
 
+<<<<<<< HEAD
                 &-dark &-img {
                     color: var(--white);
                 }
             }
 
+=======
+>>>>>>> 1e22786 (feat: Integrate with cloud ecosystem platform to develop complex and reusable components that support:)
             &:hover &-icon-edit {
                 display: block;
             }

diff --git a/apps/web/src/plugin/config-plugin/index.tsx b/apps/web/src/plugin/config-plugin/index.tsx
@@ -86,6 +86,7 @@ const ConfigPlugin = (props: ConfigPluginProps) => {
                                     <ComponentView
                                         config={formValues}
                                         configJson={{ ...config, isPreview: true }}
+                                        onChange={handleChange}
                                     />
                                 </Suspense>
                             ) : (

diff --git a/apps/web/src/plugin/config-plugin/style.less b/apps/web/src/plugin/config-plugin/style.less
@@ -10,6 +10,7 @@
         align-items: center;
         justify-content: center;
         padding: @padding-xl;
+        overflow: auto;
         background-color: var(--gray-color-2);
         border: @border-base;
 

diff --git a/apps/web/src/plugin/plugins/toilet/api.ts b/apps/web/src/plugin/plugins/toilet/api.ts
@@ -0,0 +1,21 @@
+import { API_PREFIX, client, attachAPI } from '@/services/http/client';
+
+/**
+ * 设备相关接口定义
+ */
+export interface ToiletAPISchema extends APISchema {
+    /** 更新组件 */
+    uploadImg: {
+        request: Record<string, any>;
+        response: unknown;
+    };
+}
+
+/**
+ * 设备相关 API 服务
+ */
+export default attachAPI<ToiletAPISchema>(client, {
+    apis: {
+        uploadImg: `POST ${API_PREFIX}/public/integration/lavatory/file/upload`,
+    },
+});
diff --git a/apps/web/src/plugin/plugins/toilet/components/ImageEditor/MarkerModal.tsx b/apps/web/src/plugin/plugins/toilet/components/ImageEditor/MarkerModal.tsx
@@ -0,0 +1,104 @@
+/* eslint-disable check-file/folder-naming-convention */
+import React from 'react';
+import {
+    Box,
+    Typography,
+    Stack,
+    Modal,
+    TextField,
+    Select,
+    MenuItem,
+    FormControl,
+    InputLabel,
+    Button,
+} from '@mui/material';
+import { ViewConfigToiletProps } from '../../view/typings';
+
+interface FormData {
+    locationId: string;
+    deviceId: string;
+}
+
+interface MarkerModalProps {
+    open: boolean;
+    onClose: () => void;
+    formData: FormData;
+    onChange: (e: any) => void;
+    onSubmit: (e: React.FormEvent) => void;
+    config?: ViewConfigToiletProps;
+}
+
+const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 400,
+    bgcolor: 'background.paper',
+    boxShadow: 24,
+    p: 4,
+};
+
+const MarkerModal = ({ open, onClose, formData, onChange, onSubmit, config }: MarkerModalProps) => {
+    return (
+        <Modal
+            open={open}
+            onClose={onClose}
+            aria-labelledby="modal-modal-title"
+            aria-describedby="modal-modal-description"
+        >
+            <Box sx={style}>
+                <Typography id="modal-modal-title" variant="h6" component="h2" sx={{ mb: 2 }}>
+                    设置标记信息
+                </Typography>
+                <form onSubmit={onSubmit}>
+                    <Stack spacing={2}>
+                        <TextField
+                            fullWidth
+                            label="位置ID"
+                            name="locationId"
+                            value={formData.locationId}
+                            onChange={onChange}
+                            required
+                        />
+                        <FormControl fullWidth required>
+                            <InputLabel id="device-select-label">设备</InputLabel>
+                            <Select
+                                labelId="device-select-label"
+                                id="device-select"
+                                name="deviceId"
+                                value={formData.deviceId}
+                                label="设备"
+                                onChange={onChange}
+                            >
+                                {config?.entity?.map(item => (
+                                    <MenuItem
+                                        key={item.value}
+                                        value={item.value}
+                                        sx={{
+                                            whiteSpace: 'normal',
+                                            '& .description': {
+                                                fontSize: '0.8em',
+                                                color: 'text.secondary',
+                                            },
+                                        }}
+                                    >
+                                        <div>
+                                            <div>{item.rawData.deviceName}</div>
+                                            <div className="description">{item.description}</div>
+                                        </div>
+                                    </MenuItem>
+                                ))}
+                            </Select>
+                        </FormControl>
+                        <Button type="submit" variant="contained">
+                            保存
+                        </Button>
+                    </Stack>
+                </form>
+            </Box>
+        </Modal>
+    );
+};
+
+export default MarkerModal;