diff --git a/apps/web/src/plugin/components/index.ts b/apps/web/src/plugin/components/index.ts index 7ba37a68..8ee5121b 100644 --- a/apps/web/src/plugin/components/index.ts +++ b/apps/web/src/plugin/components/index.ts @@ -7,3 +7,4 @@ 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 meetingRoom } from './switch'; diff --git a/apps/web/src/plugin/components/meeting-room/config.json b/apps/web/src/plugin/components/meeting-room/config.json new file mode 100644 index 00000000..a0fb07b7 --- /dev/null +++ b/apps/web/src/plugin/components/meeting-room/config.json @@ -0,0 +1,70 @@ +{ + "type": "meetingRoom", + "name": "Meeting Room", + "class": "meeting_room", + "icon": "./icon.png", + "defaultRow": 3, + "defaultCol": 5, + "minRow": 2, + "minCol": 4, + "configProps": [ + { + "style": "width: 100%", + "components": [ + { + "type": "entitySelect", + "title": "Entity", + "key": "entity", + "style": "width: 100%", + "componentProps": { + "size": "small", + "entityType": ["PROPERTY"], + "entityValueTypes": ["STRING", "LONG", "DOUBLE", "BOOLEAN"] + }, + "rules": { + "required": true + } + } + ] + }, + { + "style": "width: 100%", + "components": [ + { + "type": "input", + "title": "Label", + "key": "title", + "style": "width: 100%", + "defaultValue": "Label", + "componentProps": { + "size": "small", + "inputProps": { + "maxLength": 15 + } + } + } + ] + } + ], + "view": [ + { + "tag": "div", + "themes": { + "default": { + "class": "data-view__container" + } + }, + "children": [ + { + "tag": "span", + "themes": { + "default": { + "class": "data-view__content" + } + }, + "params": ["entity"] + } + ] + } + ] +} diff --git a/apps/web/src/plugin/components/meeting-room/configure/index.tsx b/apps/web/src/plugin/components/meeting-room/configure/index.tsx new file mode 100644 index 00000000..1dc2220a --- /dev/null +++ b/apps/web/src/plugin/components/meeting-room/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 ( + + ); +}); + +export default Plugin; diff --git a/apps/web/src/plugin/components/meeting-room/icon.png b/apps/web/src/plugin/components/meeting-room/icon.png new file mode 100644 index 00000000..231d2275 Binary files /dev/null and b/apps/web/src/plugin/components/meeting-room/icon.png differ diff --git a/apps/web/src/plugin/components/meeting-room/runtime/action/index.tsx b/apps/web/src/plugin/components/meeting-room/runtime/action/index.tsx new file mode 100644 index 00000000..cbc39a58 --- /dev/null +++ b/apps/web/src/plugin/components/meeting-room/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/components/meeting-room/runtime/action/useTrigger.tsx b/apps/web/src/plugin/components/meeting-room/runtime/action/useTrigger.tsx new file mode 100644 index 00000000..8a237bb8 --- /dev/null +++ b/apps/web/src/plugin/components/meeting-room/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(); + + 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/components/meeting-room/runtime/index.tsx b/apps/web/src/plugin/components/meeting-room/runtime/index.tsx new file mode 100644 index 00000000..dc404956 --- /dev/null +++ b/apps/web/src/plugin/components/meeting-room/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/components/meeting-room/runtime/reducer/index.tsx b/apps/web/src/plugin/components/meeting-room/runtime/reducer/index.tsx new file mode 100644 index 00000000..e0342053 --- /dev/null +++ b/apps/web/src/plugin/components/meeting-room/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/components/meeting-room/runtime/reducer/useDynamic.tsx b/apps/web/src/plugin/components/meeting-room/runtime/reducer/useDynamic.tsx new file mode 100644 index 00000000..b0ab1189 --- /dev/null +++ b/apps/web/src/plugin/components/meeting-room/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) => { + 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['rawData'], + value: Record, + ) => { + 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/components/meeting-room/typings.d.ts b/apps/web/src/plugin/components/meeting-room/typings.d.ts new file mode 100644 index 00000000..861d4c0e --- /dev/null +++ b/apps/web/src/plugin/components/meeting-room/typings.d.ts @@ -0,0 +1,7 @@ +export interface ViewConfigProps { + title: string; + entity: EntityOptionType; + [key: string]: string; +} + +export type ConfigureType = any; diff --git a/apps/web/src/plugin/components/meeting-room/view/hooks/index.tsx b/apps/web/src/plugin/components/meeting-room/view/hooks/index.tsx new file mode 100644 index 00000000..f8c59354 --- /dev/null +++ b/apps/web/src/plugin/components/meeting-room/view/hooks/index.tsx @@ -0,0 +1 @@ +export { useSource } from './useSource'; diff --git a/apps/web/src/plugin/components/meeting-room/view/hooks/useSource.tsx b/apps/web/src/plugin/components/meeting-room/view/hooks/useSource.tsx new file mode 100644 index 00000000..c2ee149a --- /dev/null +++ b/apps/web/src/plugin/components/meeting-room/view/hooks/useSource.tsx @@ -0,0 +1,43 @@ +import { useEffect, useMemo } from 'react'; +import { useRequest } from 'ahooks'; +import ws, { getExChangeTopic } from '@/services/ws'; +import { awaitWrap, entityAPI, getResponseData, isRequestSuccess } from '@/services/http'; +import type { ViewConfigProps } from '../../typings'; + +interface IProps { + entity: ViewConfigProps['entity']; +} +export const useSource = (props: IProps) => { + const { entity } = props; + + const { data: entityStatusValue, runAsync: getEntityStatusValue } = useRequest( + async () => { + if (!entity) return; + const { value } = entity || {}; + + const [error, resp] = await awaitWrap(entityAPI.getEntityStatus({ id: value })); + if (error || !isRequestSuccess(resp)) return; + + return getResponseData(resp)?.value; + }, + { manual: true }, + ); + useEffect(() => { + getEntityStatusValue(); + }, [entity]); + + const topic = useMemo(() => { + const entityKey = entity?.rawData?.entityKey?.toString(); + return entityKey && getExChangeTopic(entityKey); + }, [entity]); + // 订阅 WS 主题 + useEffect(() => { + if (!topic) return; + + return ws.subscribe(topic, getEntityStatusValue); + }, [topic]); + + return { + entityStatusValue, + }; +}; diff --git a/apps/web/src/plugin/components/meeting-room/view/index.tsx b/apps/web/src/plugin/components/meeting-room/view/index.tsx new file mode 100644 index 00000000..4dbcf9f8 --- /dev/null +++ b/apps/web/src/plugin/components/meeting-room/view/index.tsx @@ -0,0 +1,126 @@ +import { useMemo } from 'react'; +import * as Icons from '@milesight/shared/src/components/icons'; +import { Tooltip } from '@/plugin/view-components'; +import { useSource } from './hooks'; +import type { ViewConfigProps } from '../typings'; +import MeetingSchedule from './meeting'; +import './style.less'; + +interface Props { + config: ViewConfigProps; + configJson: CustomComponentProps; +} + +interface Entity { + description: string; + label: string; + rawData: RawData; + value: number; + valueType: string; +} + +interface RawData { + deviceName: string; + entityAccessMod: string; + entityId: string; + entityKey: string; +} + +const View = (props: Props) => { + const { config, configJson } = props; + const { title, entity } = config || {}; + const { entityStatusValue } = useSource({ entity }); + const { isPreview } = configJson || {}; + + const meetingData: RawData = { + deviceName: '', + entityAccessMod: 'R', + entityId: "", + entityKey: '' + }; + const entityData: Entity = { + description: '', + label: '', + rawData: { + deviceName: '', + entityAccessMod: 'R', + entityId: "", + entityKey: '' + }, + value: 1, + valueType: '' + }; + + if (config?.entity) { + const { description, label, rawData, value, valueType } = config.entity; + entity.label = label; + entity.rawData = rawData; + entity.value = value; + entity.valueType = valueType; + const { deviceName, entityAccessMod, entityId, entityKey } = entity.rawData; + meetingData.deviceName = deviceName; + meetingData.entityAccessMod = entityAccessMod; + meetingData.entityId = entityId; + meetingData.entityKey = entityKey; + console.log(config) + } + + // 当前实体实时数据 + const currentEntityData = useMemo(() => { + const { rawData: currentEntity, value: entityValue } = entity || {}; + if (!currentEntity) return; + + // 获取当前选中实体 + const { entityValueAttribute } = currentEntity || {}; + const { enum: enumStruct, unit } = entityValueAttribute || {}; + const currentEntityStatus = entityStatusValue?.toString(); + + // 枚举类型 + if (enumStruct) { + const currentKey = Object.keys(enumStruct).find(enumKey => { + return enumKey === currentEntityStatus; + }); + if (!currentKey) return; + + return { + label: enumStruct[currentKey], + value: currentKey, + }; + } + + // 非枚举类型 + return { + label: unit ? `${currentEntityStatus ?? '- '}${unit}` : `${currentEntityStatus ?? ''}`, + value: entityValue, + }; + }, [entity, entityStatusValue]); + // 当前实体图标 + const { Icon, iconColor } = useMemo(() => { + const { value } = currentEntityData || {}; + const iconType = config?.[`Icon_${value}`]; + const Icon = iconType && Icons[iconType as keyof typeof Icons]; + const iconColor = config?.[`IconColor_${value}`]; + + return { + Icon, + iconColor, + }; + }, [config, currentEntityData]); + + return ( +
+ + {/* + {Icon && ( + + )}
+ +
+ {currentEntityData?.label || '-'} +
+
*/} +
+ ); +}; + +export default View; diff --git a/apps/web/src/plugin/components/meeting-room/view/meeting/index.tsx b/apps/web/src/plugin/components/meeting-room/view/meeting/index.tsx new file mode 100644 index 00000000..346edaec --- /dev/null +++ b/apps/web/src/plugin/components/meeting-room/view/meeting/index.tsx @@ -0,0 +1,520 @@ +import React, { useState, useEffect } from 'react'; +import { Modal, toast } from '@milesight/shared/src/components'; +import { TextField, Select, MenuItem, FormControl, InputLabel, Button } from '@mui/material'; +import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers'; +import { meetingAPI, entityAPI } from '@/services/http'; +import './style.less'; +import { AxiosResponse } from 'axios'; + +const daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; +const timeSlots = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']; + +interface Entity { + description: string; + label: string; + rawData: string; + value: number; + valueType: string; +} + +interface RawData { + deviceName: string; + entityAccessMod: string; + entityId: string; + entityKey: string; +} + +interface MeetingRoomScheduleProps { + meetingData: RawData; +} + +interface Meeting { + meeting: string; + subject: string; + firstStartTime: number; + lastEndTime: number; + createTime: number; + meetingId?: string; +} + +interface ApiResponse { + data: T[]; + status: string; + message: string; +} + +const MeetingRoomSchedule: React.FC = ({ meetingData }) => { + const [meetingOffset, setMeetingOffset] = useState(0); // 86400 + const [modalIsOpen, setModalIsOpen] = useState(false); + const [selectedMeetingId, setSelectedMeetingId] = useState(''); + const [selectedDay, setSelectedDay] = useState(''); + const [selectedDate, setSelectedDate] = useState(null); + const [selectedStartTime, setSelectedStartTime] = useState(''); + const [selectedEndTime, setSelectedEndTime] = useState(''); + const [meetingId, setMeetingId] = useState(meetingData.deviceName + "预约"); + const [meetingTitle, setMeetingTitle] = useState(meetingData.deviceName + "预约"); + const [meetingRoomKey, setMeetingRoomKey] = useState(meetingData.entityKey); + const [dragging, setDragging] = useState(false); + const [allHistoryData, setAllHistoryData] = useState([]); + const [filteredHistoryData, setFilteredHistoryData] = useState([]); + const [currentWeek, setCurrentWeek] = useState(0); + const [editingMeeting, setEditingMeeting] = useState(null); + const [deleteConfirmVisible, setDeleteConfirmVisible] = useState(false); + const [meetingToDelete, setMeetingToDelete] = useState(null); + + const openModal = () => { + setModalIsOpen(true); + }; + + const closeModal = () => { + setModalIsOpen(false); + setMeetingTitle(meetingData.deviceName + "预约"); + setEditingMeeting(null); + }; + + const handleScheduleMeeting = async () => { + const sortedTimes = [selectedStartTime, selectedEndTime].sort(); + const startTime = sortedTimes[0]; + const endTime = sortedTimes[1]; + + const [startHour, startMinute] = startTime.split(':').map(Number); + const [endHour, endMinute] = endTime.split(':').map(Number); + const startTotalMinutes = startHour * 60 + startMinute; + const endTotalMinutes = endHour * 60 + endMinute; + if (endTotalMinutes - startTotalMinutes < 60) { + toast.warning('请选择至少1小时的时间段'); + return; + } + if (endTotalMinutes - startTotalMinutes > 180) { + toast.warning('请选择最多3小时的时间段'); + return; + } + const first = Math.floor(new Date(selectedDate?.toISOString().split('T')[0] + " " + selectedStartTime).getTime() / 1000); + const last = Math.floor(new Date(selectedDate?.toISOString().split('T')[0] + " " + selectedEndTime).getTime() / 1000); + const meetingDataToSend = { + type: !editingMeeting?0:1, + subject: meetingTitle, + meeting: meetingId, + id: meetingData.entityId, + key: meetingRoomKey, + time: selectedStartTime, + date: selectedDate?.toISOString().split('T')[0], + first: !editingMeeting?first:first+ meetingOffset, + last: !editingMeeting?last:last+ meetingOffset, + }; + try { + await meetingAPI.addMeeting(meetingDataToSend); + // 显示成功通知 + toast.success('Meeting scheduled successfully'); + } catch (error) { + console.error('Error scheduling meeting:', error); + toast.error('Failed to schedule meeting'); + } + closeModal(); + fetchHistoryData(currentWeek); // Refresh the history data + }; + + const handleDeleteMeeting = async () => { + console.error('Error deleting meeting:', selectedStartTime); + const meetingDataToSend = { + type: 2, + subject: meetingTitle, + meeting: meetingId, + id: meetingData.entityId, + key: meetingRoomKey, + time: selectedStartTime, + date: selectedDate?.toISOString().split('T')[0], + first: Math.floor(new Date(selectedDate?.toISOString().split('T')[0] + " " + selectedStartTime).getTime() / 1000 + meetingOffset), + last: Math.floor(new Date(selectedDate?.toISOString().split('T')[0] + " " + selectedEndTime).getTime() / 1000 + meetingOffset), + }; + try { + await meetingAPI.addMeeting(meetingDataToSend); + // 显示成功通知 + toast.success('Delete Meeting scheduled successfully'); + } catch (error) { + console.error('Error scheduling meeting:', error); + toast.error('Failed to schedule meeting'); + } + closeModal(); + fetchHistoryData(currentWeek); // Refresh the history data + }; + + const isPastTimeSlot = (day: string, time: string, weekOffset: number) => { + const now = new Date(); + const [hours, minutes] = time.split(':').map(Number); + const slotDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes); + const currentDayIndex = now.getDay() - 1; + const slotDayIndex = daysOfWeek.indexOf(day); + slotDate.setDate(now.getDate() + (slotDayIndex - currentDayIndex) + (weekOffset * 7)); + return slotDate < now; + }; + + const handleMouseDown = (day: string, time: string) => { + if (!isPastTimeSlot(day, time, currentWeek)) { + const meeting = getMeetingByTime(day, time); + if (meeting) { + // Edit existing meeting + setEditingMeeting(meeting); + setMeetingTitle(meeting.subject); + console.log("=======meeting.meeting======", meeting) + setMeetingId(meeting.meeting); + setSelectedStartTime(new Date(meeting.firstStartTime * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })); + setSelectedEndTime(new Date(meeting.lastEndTime * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })); + setSelectedDate(new Date(meeting.firstStartTime * 1000)); + openModal(); + } else { + // Schedule new meeting + setDragging(true); + // setSelectedMeetingId(); + setSelectedDay(day); + setSelectedStartTime(time); + setSelectedEndTime(time); + const weekDates = getWeekDates(currentWeek); + setSelectedDate(weekDates[daysOfWeek.indexOf(day)]); + } + } + }; + + const handleMouseUp = (day: string, time: string) => { + if (dragging) { + setDragging(false); + const sortedTimes = [selectedStartTime, time].sort(); + const startTime = sortedTimes[0]; + const endTime = sortedTimes[1]; + + const [startHour, startMinute] = startTime.split(':').map(Number); + const [endHour, endMinute] = endTime.split(':').map(Number); + const startTotalMinutes = startHour * 60 + startMinute; + const endTotalMinutes = endHour * 60 + endMinute; + + if (endTotalMinutes - startTotalMinutes < 60) { + toast.warning('请选择至少1小时的时间段'); + return; + } + if (endTotalMinutes - startTotalMinutes > 180) { + toast.warning('请选择最多3小时的时间段'); + return; + } + + setSelectedStartTime(startTime); + setSelectedEndTime(endTime); + openModal(); + } + }; + + const handleMouseEnter = (day: string, time: string) => { + if (dragging && day === selectedDay) { + setSelectedEndTime(time); + } + }; + + const getWeekStartAndEnd = (weekOffset: number) => { + const now = new Date(); + const currentDayOfWeek = now.getDay(); + const startOfWeek = new Date(now); + startOfWeek.setDate(now.getDate() - currentDayOfWeek + 1 + (weekOffset * 7)); + startOfWeek.setHours(0, 0, 0, 0); // 设置为当天的开始时间 + + const endOfWeek = new Date(startOfWeek); + endOfWeek.setDate(startOfWeek.getDate() + 6); + endOfWeek.setHours(23, 59, 59, 999); // 设置为当天的结束时间 + + return { + startOfWeek: startOfWeek.getTime(), + endOfWeek: endOfWeek.getTime(), + }; + }; + + const handleDateChange = (data: any) => { + console.log("-----------==--=", data) + const tomorrow = new Date(data); + tomorrow.setDate(tomorrow.getDate() + 1); + setSelectedDate(tomorrow) + }; + + +// 转换 response 数据 +const transformApiResponse = (response) => { + return response.data.data.content.map(item => { + const value = item.value.match(/subject=([^,]+),.*meetingId=([^,]+),.*firstStartTime=([^,]+),.*lastEndTime=([^,]+)/); + if (value) { + const subject = value[1].trim(); + const meetingId = value[2].trim(); + const startTime = value[3].trim(); + const endTime = value[4].trim(); + // const startDateTime = new Date(`${startDate}T${startTime}`).getTime(); + // const endDateTime = startDateTime + (3 * 60 * 60 * 1000); // 假设会议持续3小时 + + return { + meetingId, + meeting: meetingId, + subject, + firstStartTime: startTime, + lastEndTime: endTime, + id: item.timestamp.toString(), + }; + } + return null; + }).filter(item => item !== null); +}; + const fetchHistoryData = async (weekOffset: number) => { + const { startOfWeek, endOfWeek } = getWeekStartAndEnd(weekOffset); + try { + + const response = await entityAPI.getHistory({ + entity_id: meetingData.entityId, + start_timestamp: startOfWeek, + end_timestamp: endOfWeek, + page_number: 1, + page_size: 999, + }); + const unifiedApiData = transformApiResponse(response); + // 模拟从后端获取的数据 + const mockResponse: AxiosResponse> = { + data: { + data: unifiedApiData, + status: 'success', + message: 'Fetched successfully', + }, + status: 200, + statusText: 'OK', + headers: {}, + config: {}, + }; + const result = mockResponse.data; + setAllHistoryData(result.data); + filterMeetingsForCurrentWeek(result.data); + } catch (error) { + console.error('Error fetching history data:', error); + } + }; + + const filterMeetingsForCurrentWeek = (meetings: Meeting[]) => { + const weekDates = getWeekDates(currentWeek); + const startOfWeek = weekDates[0].getTime() / 1000; + const endOfWeek = weekDates[6].getTime() / 1000 + 24 * 60 * 60 - 1; // End of the last day of the week + + // 过滤出当前周的会议 + const filteredMeetings = meetings.filter(meeting => { + return meeting.firstStartTime >= startOfWeek && meeting.lastEndTime <= endOfWeek; + }); + + console.log('filteredMeetings=================', filteredMeetings); + // 按 firstStartTime 分组，并在每个分组内根据 createTime 进行排序，取出最大的值 + const meetingMap = new Map(); + + + filteredMeetings.forEach(meeting => { + const existingMeeting = meetingMap.get(meeting.firstStartTime); + if (!existingMeeting || meeting.createTime > existingMeeting.createTime) { + meetingMap.set(meeting.firstStartTime, meeting); + } + }); + + // 将 Map 转换为数组 + const uniqueMeetings = Array.from(meetingMap.values()); + console.log('uniqueMeetings=================', uniqueMeetings); + // 过滤出当前周的会议 + const uniqueMeetingss = uniqueMeetings.filter(meeting => { + return meeting.subject !="" &&meeting.subject !="null"; + }); + + setFilteredHistoryData(uniqueMeetingss); + }; + + useEffect(() => { + fetchHistoryData(currentWeek); + const intervalId = setInterval(fetchHistoryData, 60000); + return () => clearInterval(intervalId); + }, []); + + useEffect(() => { + filterMeetingsForCurrentWeek(allHistoryData); + }, [currentWeek, allHistoryData]); + + const getWeekDates = (weekOffset: number) => { + const now = new Date(); + const currentDayOfWeek = now.getDay(); + const startOfWeek = new Date(now); + startOfWeek.setDate(now.getDate() - currentDayOfWeek + 1 + (weekOffset * 7)); + const dates = []; + for (let i = 0; i < 7; i++) { + const date = new Date(startOfWeek); + date.setDate(startOfWeek.getDate() + i); + dates.push(date); + } + return dates; + }; + + const weekDates = getWeekDates(currentWeek); + + const handleWeekChange = (weekOffset: number) => { + fetchHistoryData(weekOffset); // Fetch history data for the new week + setCurrentWeek(weekOffset); + }; + + const getTimeSlotClass = (day: string, time: string) => { + const pastTimeSlot = isPastTimeSlot(day, time, currentWeek); + const isSelected = dragging && day === selectedDay && ( + (time >= selectedStartTime && time <= selectedEndTime) || + (time >= selectedEndTime && time <= selectedStartTime) + ); + + let className = `time-slot ${pastTimeSlot ? 'past-time-slot' : ''} ${isSelected ? 'selected-time-slot' : ''}`; + return className; + }; + + const getMeetingByTime = (day: string, time: string): Meeting | null => { + for (const meeting of filteredHistoryData) { + const meetingDay = new Date(meeting.firstStartTime * 1000).toLocaleDateString(); + const meetingStartTime = new Date(meeting.firstStartTime * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); + const meetingEndTime = new Date(meeting.lastEndTime * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); + + if (meetingDay === weekDates[daysOfWeek.indexOf(day)].toLocaleDateString() && + time >= meetingStartTime && time < meetingEndTime) { + return meeting; + } + } + return null; + }; + + const renderHistoryMeetings = () => { + console.log("=============", filteredHistoryData) + return filteredHistoryData.map((meeting, index) => { + const startDate = new Date(meeting.firstStartTime * 1000); + const endDate = new Date(meeting.lastEndTime * 1000); + const dayIndex = startDate.getDay() - 1; + const startTime = startDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); + const endTime = endDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); + + const top = parseInt(startTime.split(':')[0], 10) * 26 + parseInt(startTime.split(':')[1], 10) * 0.5 + 46; + const height = ((parseInt(endTime.split(':')[0], 10) * 26 + parseInt(endTime.split(':')[1], 10) * 0.5) - + (parseInt(startTime.split(':')[0], 10) * 26 + parseInt(startTime.split(':')[1], 10) * 0.5)) + 23; + + const isPast = endDate < new Date(); + + return ( +
handleMouseDown(daysOfWeek[(dayIndex<0?6:dayIndex)], startTime)} + > +
+
{meeting.subject}
+
{startTime} - {endTime}
+
+
+ ); + }); + }; + + return ( +
+
+
+

{meetingData.deviceName}日程

+
+
+ + + +
+
+
+ {daysOfWeek.map((day, index) => ( +
+
{day} - {weekDates[index].toLocaleDateString()}
+ {timeSlots.map(time => ( +
handleMouseDown(day, time)} + onMouseUp={() => handleMouseUp(day, time)} + onMouseEnter={() => handleMouseEnter(day, time)} + > + +
+ ))} +
+ ))} + {renderHistoryMeetings()} +
+ + 取消, + editingMeeting && , + , + ]} + > +
+ setMeetingTitle(e.target.value)} + fullWidth + margin="normal" + /> + {/* + 会议日期 + handleDateChange(e)} + /> + */} + + 开始时间 + + + + 结束时间 + + +
+ + + setDeleteConfirmVisible(false)} + onOk={handleDeleteMeeting} + title="确认删除" + onOkText="删除" + onCancelText="取消" + > +
+

您确定要删除这个会议吗？

+
+ +
+ ); +}; + +export default MeetingRoomSchedule; diff --git a/apps/web/src/plugin/components/meeting-room/view/meeting/style.less b/apps/web/src/plugin/components/meeting-room/view/meeting/style.less new file mode 100644 index 00000000..054e6667 --- /dev/null +++ b/apps/web/src/plugin/components/meeting-room/view/meeting/style.less @@ -0,0 +1,280 @@ + +.modal-content { + margin-bottom: 66px; +} + +.meeting-button-cancel{ + position: absolute; + right: 300px; + bottom: 12px; + width: 23%; + height: 40px; + padding: 2px 32px; /* 内边距 */ + margin: 4px 20px; /* 外边距 */ + font-size: 16px; /* 字体大小 */ + color: white; /* 字体颜色 */ + text-align: center; /* 文字居中 */ + text-decoration: none; /* 去掉下划线 */ + background-color: #3d3f4141; /* 背景颜色 */ + border: none; /* 去掉默认边框 */ + border-radius: 12px; /* 圆角半径 */ + cursor: pointer; /* 鼠标指针 */ + transition: background-color 0.3s; /* 背景颜色过渡效果 */ +} + +/* 鼠标悬停时的效果 */ +.meeting-button-cancel:hover { + background-color: #3d3f41af; /* 更深的绿色 */ +} + +.meeting-button-delete{ + position: absolute; + right: 150px; + bottom: 12px; + width: 23%; + height: 40px; + padding: 2px 32px; /* 内边距 */ + margin: 4px 20px; /* 外边距 */ + font-size: 16px; /* 字体大小 */ + color: white; /* 字体颜色 */ + text-align: center; /* 文字居中 */ + text-decoration: none; /* 去掉下划线 */ + background-color: #f80b6e80; /* 背景颜色 */ + border: none; /* 去掉默认边框 */ + border-radius: 12px; /* 圆角半径 */ + cursor: pointer; /* 鼠标指针 */ + transition: background-color 0.3s; /* 背景颜色过渡效果 */ +} + +/* 鼠标悬停时的效果 */ +.meeting-button-delete:hover { + background-color: #e9072dd3; /* 更深的绿色 */ +} + +.meeting-button-primary{ + position: absolute; + right: 0; + bottom: 12px; + width: 23%; + height: 40px; + padding: 2px 32px; /* 内边距 */ + margin: 4px 20px; /* 外边距 */ + font-size: 16px; /* 字体大小 */ + color: white; /* 字体颜色 */ + text-align: center; /* 文字居中 */ + text-decoration: none; /* 去掉下划线 */ + background-color: #0b7af880; /* 背景颜色 */ + border: none; /* 去掉默认边框 */ + border-radius: 12px; /* 圆角半径 */ + cursor: pointer; /* 鼠标指针 */ + transition: background-color 0.3s; /* 背景颜色过渡效果 */ +} + +/* 鼠标悬停时的效果 */ +.meeting-button-primary:hover { + background-color: #0770e9d3; /* 更深的绿色 */ +} + + + +.modal { + position: absolute; + inset: 50% auto auto 50%; + padding: 20px; + margin-right: -50%; + background: white; + border: 1px solid #ccc; + border-radius: 4px; + outline: none; + transform: translate(-50%, -50%); +} + +.modal-overlay { + position: fixed; + inset: 0; + background-color: rgba(0, 0, 0, 0.75); +} + +.meeting-room-schedule { + cursor: pointer; /* 鼠标指针 */ + user-select: none; /* 禁用文本选择 */ + + + .week-top{ + display: flex; + height: 110px; + + + button.rounded-button1 { + top: 60px; + right: 20%; + } + + button.rounded-button2 { + top: 60px; + right: 13%; + } + + button.rounded-button3 { + top: 60px; + right: 6%; + } + + .week-controls-top { + display: flex; + align-items: center; /* 垂直居中 */ + justify-content: center; /* 水平居中 */ + width: 100%; + + .data-view-icon { + top: 26px; + right: 50%; + font-size: 26px; + text-align: center; + } + } + + .week-controls { + display: flex; + align-items: center; /* 垂直居中 */ + justify-content: center; /* 水平居中 */ + width: 30%; + margin-right: -2%; + + .rounded-button1, + .rounded-button2, + .rounded-button3 { + padding: 10px 20px; + margin-left: 10%; + color: white; + background-color: #007bff; + border: none; + border-radius: 5px; + cursor: pointer; + + &:hover { + background-color: #0056b3; + } + } + } + } + + .schedule-grid { + position: relative; + display: flex; + flex-direction: row; + margin-top: -20px; + + .day-column { + position: relative; + flex: 1; + border-left: 1px solid #ccc; + + &:first-child { + border-left: none; + } + + .day-header { + padding: 10px; + font-size: 14px; + font-weight: bold; + text-align: center; + background-color: #f5f5f5; + border-bottom: 1px solid #ccc; + } + + .time-slot { + position: relative; + height: 26px; + border-bottom: 1px solid #eee; + + &.past-time-slot { + background-color: #f5f5f5; + } + + &.selected-time-slot { + background-color: #d3e0ff; + } + + .meeting-room-label { + position: absolute; + top: 50%; + left: 10px; + font-size: 12px; + transform: translateY(-50%); + } + } + } + } + + .history-meeting { + position: absolute; + padding: 5px; + color: white; + background-color: rgba(0, 123, 255, 0.8); + border-left: 4px solid #007bff; + cursor: pointer; + + &.past-meeting { + margin: 2px; + background-color: rgba(108, 117, 125, 8); + border-left-color: #6c757d; + } + + .meeting-info { + .meeting-subject { + font-weight: bold; + } + + .meeting-time { + font-size: 12px; + } + } + } + + .modal-content { + display: flex; + flex-direction: column; + margin-bottom: 66px; + + .meeting-button-cancel { + position: absolute; + right: 0; + bottom: 12px; + width: 23%; + color: white; + background-color: #6c757d; + + &:hover { + background-color: #5a6268; + } + } + + .meeting-button-delete { + position: absolute; + right: 0; + bottom: 12px; + width: 23%; + color: white; + background-color: #dc3545; + + &:hover { + background-color: #c82333; + } + } + + .meeting-button-primary { + position: absolute; + right: 0; + bottom: 12px; + width: 23%; + color: white; + background-color: #007bff; + + &:hover { + background-color: #0069d9; + } + } + } +} + diff --git a/apps/web/src/plugin/components/meeting-room/view/style.less b/apps/web/src/plugin/components/meeting-room/view/style.less new file mode 100644 index 00000000..ed79389d --- /dev/null +++ b/apps/web/src/plugin/components/meeting-room/view/style.less @@ -0,0 +1,65 @@ +.meeting-data-view_icon { + height: 50px; + padding: 12px; + margin-right: 16px; + background-color: var(--gray-color-1); + border-radius: 4px; +} + +.meeting-data-view_icon svg { + display: block; + height: 100%; +} + +.data-view { + display: inline-grid; + align-items: center; + width: 100%; + min-width: 100%; + height: 100%; + padding: 1% 3%; + overflow: hidden; + background: var(--main-background); + + &-preview { + flex: none; + width: 312px; + min-width: auto; + height: 96px; + } + + &__icon { + padding: @padding-sm; + margin-right: @margin-md; + background-color: var(--gray-color-1); + border-radius: @border-radius-base; + + svg { + display: block; + height: 100%; + } + } + + &-text { + flex: 1; + } + + &__title { + margin-bottom: @margin-xxs; + font-size: @font-size-lg; + font-weight: @font-weight-bold; + line-height: 1; + color: var(--text-color-base); + + .ms-tooltip-cont { + display: inline-block; + .text-size(@font-size-sm); + } + } + + &__content { + display: inline-block; + color: var(--text-color-secondary); + .text-size(@font-size-xxl); + } +} diff --git a/apps/web/src/plugin/constant.ts b/apps/web/src/plugin/constant.ts index eee1dec4..739bb23a 100644 --- a/apps/web/src/plugin/constant.ts +++ b/apps/web/src/plugin/constant.ts @@ -12,6 +12,10 @@ export const COMPONENTCLASS = { name: 'dashboard.plugin_class_data_card', value: 'data_card', }, + meeting_room: { + name: 'Meeting Room', + value: 'meeting_room', + }, other: { name: 'dashboard.plugin_class_other', value: 'other', diff --git a/apps/web/src/services/http/index.ts b/apps/web/src/services/http/index.ts index f779281c..9780bad8 100644 --- a/apps/web/src/services/http/index.ts +++ b/apps/web/src/services/http/index.ts @@ -1,6 +1,7 @@ export { isRequestSuccess, getResponseData, awaitWrap, API_PREFIX } from './client'; export { default as deviceAPI, type DeviceDetail, type DeviceAPISchema } from './device'; +export { default as meetingAPI, type MeetingDetail, type MeetingAPISchema } from './meeting'; export { default as entityAPI, type EntityAPISchema } from './entity'; export { default as integrationAPI, type IntegrationAPISchema } from './integration'; diff --git a/apps/web/src/services/http/meeting.ts b/apps/web/src/services/http/meeting.ts new file mode 100644 index 00000000..553fccb1 --- /dev/null +++ b/apps/web/src/services/http/meeting.ts @@ -0,0 +1,62 @@ +import { client, attachAPI, API_PREFIX } from './client'; + +/** + * 会议详情定义 + */ +export interface MeetingDetail { + /** ID */ + id: ApiKey; + /** model */ + model: string; + /** 类型 */ + type: string; + /** 输入 */ + input: string; + /** 额外数据（通常为后端使用，前端暂不开放） */ + // additional_data?: Record; +} + +/** + * 会议相关接口定义 + */ +export interface MeetingAPISchema extends APISchema { + /** 保存会议 */ + addMeeting: { + request: { + id?: string; + /** 预约名称 */ + subject?: string; + /** 会议室id */ + meeting?: string; + key?: string; + /** 开始时间 */ + first?: string; + /** 结束时间 */ + last?: string; + time?: string; + date?: string; + /** 集成新增会议需要的额外信息 */ + param_entities: Record; + }; + response: unknown; + }; + + + /** 删除会议 */ + deleteMeeting: { + request: { + meeting_id: string; + }; + response: unknown; + }; +} + +/** + * 会议相关 API 服务 + */ +export default attachAPI(client, { + apis: { + addMeeting: `POST ${API_PREFIX}/meeting`, + deleteMeeting: `POST ${API_PREFIX}/meeting/delete`, + }, +});