econtrol-tools-calendar 1.0.0

package/README.md

@@ -0,0 +1,368 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+import FullCalendarDemo from "./components/FullCalendarDemo.vue";
+import type { EventInput } from "@fullcalendar/core";
+
+// 控制占用状态（示例：可以从其他地方获取）
+const isOccupied = ref(false);
+// 控制是否允许时间冲突，false 表示不允许事件时间重合
+const allowOverlap = ref(true);
+// 当前用户ID（示例：可以从登录状态获取）
+const userid = ref("张三"); // 只有 organizer 为 "张三" 的事件才能被修改
+
+// 节假日数据：格式 { "YYYY-MM-DD": "节假日名称" }
+interface HolidayData {
+  [date: string]: string;
+}
+
+// 2025年节假日数据
+const holidays2025: HolidayData = {
+  // 元旦
+  "2025-01-01": "元旦",
+
+  // 春节
+  "2025-01-28": "春节",
+  "2025-01-29": "春节",
+  "2025-01-30": "春节",
+  "2025-01-31": "春节",
+  "2025-02-01": "春节",
+  "2025-02-02": "春节",
+  "2025-02-03": "春节",
+
+  // 清明节
+  "2025-04-04": "清明节",
+  "2025-04-05": "清明节",
+  "2025-04-06": "清明节",
+
+  // 劳动节
+  "2025-05-01": "劳动节",
+  "2025-05-02": "劳动节",
+  "2025-05-03": "劳动节",
+  "2025-05-04": "劳动节",
+  "2025-05-05": "劳动节",
+
+  // 端午节
+  "2025-05-31": "端午节",
+  "2025-06-01": "端午节",
+  "2025-06-02": "端午节",
+
+  // 中秋节
+  "2025-10-06": "中秋节",
+  "2025-10-07": "中秋节",
+  "2025-10-08": "中秋节",
+
+  // 国庆节
+  "2025-10-01": "国庆节",
+  "2025-10-02": "国庆节",
+  "2025-10-03": "国庆节",
+  "2025-10-04": "国庆节",
+  "2025-10-05": "国庆节",
+};
+
+// 2026年节假日数据
+const holidays2026: HolidayData = {
+  // 元旦
+  "2026-01-01": "元旦",
+  "2026-01-02": "元旦",
+  "2026-01-03": "元旦",
+
+  // 春节
+  "2026-02-16": "春节",
+  "2026-02-17": "春节",
+  "2026-02-18": "春节",
+  "2026-02-19": "春节",
+  "2026-02-20": "春节",
+  "2026-02-21": "春节",
+  "2026-02-22": "春节",
+
+  // 清明节
+  "2026-04-04": "清明节",
+  "2026-04-05": "清明节",
+  "2026-04-06": "清明节",
+
+  // 劳动节
+  "2026-05-01": "劳动节",
+  "2026-05-02": "劳动节",
+  "2026-05-03": "劳动节",
+  "2026-05-04": "劳动节",
+  "2026-05-05": "劳动节",
+
+  // 端午节
+  "2026-06-19": "端午节",
+  "2026-06-20": "端午节",
+  "2026-06-21": "端午节",
+
+  // 中秋节
+  "2026-09-25": "中秋节",
+  "2026-09-26": "中秋节",
+  "2026-09-27": "中秋节",
+
+  // 国庆节
+  "2026-10-01": "国庆节",
+  "2026-10-02": "国庆节",
+  "2026-10-03": "国庆节",
+  "2026-10-04": "国庆节",
+  "2026-10-05": "国庆节",
+  "2026-10-06": "国庆节",
+  "2026-10-07": "国庆节",
+  "2026-10-08": "国庆节",
+};
+
+// 合并所有年份的节假日数据到一个对象中
+const allHolidays: HolidayData = {
+  ...holidays2025,
+  ...holidays2026,
+  // 可以继续添加其他年份的数据，例如：
+  // ...holidays2027,
+  // ...holidays2028,
+};
+
+// 设备列表（示例：可以从API获取）
+interface Device {
+  id: string;
+  name: string;
+}
+
+const devices = ref<Device[]>([
+  { id: "device-001", name: "设备1" },
+  { id: "device-002", name: "设备2" },
+  { id: "device-003", name: "设备3" },
+]);
+
+// Mock 事件数据
+const getMockEvents = (deviceId: string): EventInput[] => {
+  const today = new Date();
+  const todayStr = today.toISOString().split("T")[0];
+
+  return [
+    {
+      id: `${deviceId}-event-1`,
+      title: "团队会议",
+      start: `${todayStr}T10:00:00`,
+      end: `${todayStr}T11:30:00`,
+      backgroundColor: "#000000",
+      borderColor: "#000000",
+      editable: true,
+      extendedProps: {
+        organizer: "张三",
+        description: "每周团队例会",
+        deviceId: deviceId,
+        colorIndex: -1,
+      },
+    },
+    {
+      id: `${deviceId}-event-2`,
+      title: "项目评审",
+      start: `${todayStr}T14:00:00`,
+      end: `${todayStr}T16:00:00`,
+      backgroundColor: "#4A90E2",
+      borderColor: "#4A90E2",
+      editable: true,
+      extendedProps: {
+        organizer: "李四",
+        description: "项目进度评审会议",
+        deviceId: deviceId,
+        colorIndex: 0,
+      },
+    },
+    {
+      id: `${deviceId}-event-3`,
+      title: "客户沟通",
+      start: (() => {
+        const date = new Date(today);
+        date.setDate(date.getDate() + 1);
+        return date.toISOString().split("T")[0] + "T09:00:00";
+      })(),
+      end: (() => {
+        const date = new Date(today);
+        date.setDate(date.getDate() + 1);
+        return date.toISOString().split("T")[0] + "T10:30:00";
+      })(),
+      backgroundColor: "#000000",
+      borderColor: "#000000",
+      editable: true,
+      extendedProps: {
+        organizer: "张三",
+        description: "与重要客户进行项目沟通",
+        deviceId: deviceId,
+        colorIndex: -1,
+      },
+    },
+    {
+      id: `${deviceId}-event-4`,
+      title: "技术培训",
+      start: (() => {
+        const date = new Date(today);
+        date.setDate(date.getDate() + 1);
+        return date.toISOString().split("T")[0] + "T14:00:00";
+      })(),
+      end: (() => {
+        const date = new Date(today);
+        date.setDate(date.getDate() + 1);
+        return date.toISOString().split("T")[0] + "T17:00:00";
+      })(),
+      backgroundColor: "#50C878",
+      borderColor: "#50C878",
+      editable: true,
+      extendedProps: {
+        organizer: "王五",
+        description: "团队技术培训会议",
+        deviceId: deviceId,
+        colorIndex: 1,
+      },
+    },
+    {
+      id: `${deviceId}-event-5`,
+      title: "产品演示",
+      start: (() => {
+        const date = new Date(today);
+        date.setDate(date.getDate() + 2);
+        return date.toISOString().split("T")[0] + "T10:00:00";
+      })(),
+      end: (() => {
+        const date = new Date(today);
+        date.setDate(date.getDate() + 2);
+        return date.toISOString().split("T")[0] + "T11:30:00";
+      })(),
+      backgroundColor: "#FFA500",
+      borderColor: "#FFA500",
+      editable: true,
+      extendedProps: {
+        organizer: "赵六",
+        description: "新产品功能演示",
+        deviceId: deviceId,
+        colorIndex: 2,
+      },
+    },
+    {
+      id: `${deviceId}-event-6`,
+      title: "代码审查",
+      start: (() => {
+        const date = new Date(today);
+        date.setDate(date.getDate() + 2);
+        return date.toISOString().split("T")[0] + "T15:00:00";
+      })(),
+      end: (() => {
+        const date = new Date(today);
+        date.setDate(date.getDate() + 2);
+        return date.toISOString().split("T")[0] + "T16:30:00";
+      })(),
+      backgroundColor: "#000000",
+      borderColor: "#000000",
+      editable: true,
+      extendedProps: {
+        organizer: "张三",
+        description: "代码审查会议",
+        deviceId: deviceId,
+        colorIndex: -1,
+      },
+    },
+  ];
+};
+
+// 为每个设备创建事件列表
+const deviceEvents = ref<Record<string, EventInput[]>>({
+  "device-001": getMockEvents("device-001"),
+  "device-002": getMockEvents("device-002"),
+  "device-003": getMockEvents("device-003"),
+});
+
+// 事件处理函数
+function handleEventAdded(deviceId: string, event: EventInput) {
+  if (!deviceEvents.value[deviceId]) {
+    deviceEvents.value[deviceId] = [];
+  }
+  deviceEvents.value[deviceId].push(event);
+  ElMessage.success("事件已添加");
+}
+
+function handleEventUpdated(deviceId: string, event: EventInput) {
+  if (deviceEvents.value[deviceId]) {
+    const index = deviceEvents.value[deviceId].findIndex(
+      (e) => e.id === event.id
+    );
+    if (index !== -1) {
+      const originalEvent = deviceEvents.value[deviceId][index];
+      deviceEvents.value[deviceId][index] = event;
+      // 判断是调整大小还是更新（通过比较开始和结束时间）
+      const isResize =
+        originalEvent.start !== event.start || originalEvent.end !== event.end;
+      ElMessage.success(isResize ? "事件已调整" : "事件已更新");
+    } else {
+      ElMessage.success("事件已更新");
+    }
+  }
+}
+
+function handleEventDeleted(deviceId: string, eventId: string) {
+  if (deviceEvents.value[deviceId]) {
+    deviceEvents.value[deviceId] = deviceEvents.value[deviceId].filter(
+      (e) => e.id !== eventId
+    );
+    ElMessage.success("事件已删除");
+  }
+}
+
+function handleEventsChange(deviceId: string, events: EventInput[]) {
+  deviceEvents.value[deviceId] = events;
+}
+</script>
+
+<template>
+  <div class="app-container">
+    <div class="calendars-grid">
+      <FullCalendarDemo
+        v-for="device in devices"
+        :key="device.id"
+        :is-occupied="isOccupied"
+        :allow-overlap="allowOverlap"
+        :userid="userid"
+        :device-id="device.id"
+        taskid="2"
+        :quickAddTimeRange="{
+          start: '2026-01-16T10:00:00',
+          end: '2026-01-16T12:00:00',
+        }"
+        quickAddTaskName="会议"
+        :holidays="allHolidays"
+        :events="deviceEvents[device.id] || []"
+        @event-added="(event) => handleEventAdded(device.id, event)"
+        @event-updated="(event) => handleEventUpdated(device.id, event)"
+        @event-deleted="(eventId) => handleEventDeleted(device.id, eventId)"
+        @events-change="(events) => handleEventsChange(device.id, events)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.app-container {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  width: 100vw;
+}
+
+.calendars-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+h1 {
+  text-align: center;
+  color: #409eff;
+}
+
+/* 响应式布局 */
+@media (max-width: 1200px) {
+  .calendars-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 1900px) {
+  .calendars-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+</style>