diff --git a/app/label/page.tsx b/app/label/page.tsx
new file mode 100644
index 0000000..1eaa356
--- /dev/null
+++ b/app/label/page.tsx
@@ -0,0 +1,36 @@
+"use client"
+
+import LabelContent from "@/components/label"
+import { Paper } from "@mantine/core"
+import { useSearchParams } from "next/navigation"
+import { useMemo } from "react"
+
+export default function LabelPage() {
+ const searchParams = useSearchParams()
+ const projectId = useMemo(() => {
+ const value = Number(searchParams.get("project_id"))
+ return Number.isFinite(value) ? value : -1
+ }, [searchParams])
+ const taskId = useMemo(() => {
+ const value = Number(searchParams.get("task_id"))
+ return Number.isFinite(value) ? value : -1
+ }, [searchParams])
+
+ return (
+
+
+
+ )
+}
diff --git a/components/label/LabelNossr.tsx b/components/label/LabelNossr.tsx
new file mode 100644
index 0000000..f246eab
--- /dev/null
+++ b/components/label/LabelNossr.tsx
@@ -0,0 +1,1910 @@
+"use client"
+
+import {
+ useCallback,
+ useEffect,
+ useMemo,
+ useReducer,
+ useRef,
+ useState,
+} from "react"
+import ScaleComponent from "./components/ScaleComponent"
+
+import { Box, Button, Flex, LoadingOverlay, Stack } from "@mantine/core"
+import { notifications, showNotification } from "@mantine/notifications"
+import { getLabelResult, getServerImage } from "./api/label"
+import {
+ Comment,
+ ImageObjects,
+ LabelResult,
+ WorkLoad,
+} from "./api/label/typing"
+import { getProjectDetail } from "./api/project"
+import { Project } from "./api/project/typing"
+import { getTaskList, getTaskWorkFlow } from "./api/task"
+import { Task } from "./api/task/typing"
+import BottomTools from "./components/BottomTools"
+import ConfirmModal from "./components/ConfirmModal"
+import { splitWord } from "./components/EditorContainer"
+import PaperContainer from "./components/PaperContainer"
+import RightDescTools from "./components/RightDescTools"
+import RightGroupTools from "./components/RightGroupTools"
+import RightObjectTools from "./components/RightObjectTools"
+import RightQATools from "./components/RightQATools"
+import RightTaskTools from "./components/RightTaskTools"
+import ScaleToolContainer from "./components/ScaleToolContainer"
+import TopTools from "./components/TopTools"
+import { processVideo } from "./ffmpeg/processVideo"
+import {
+ useImagesStore,
+ useKeyEventStore,
+ useLabelStore,
+ useObjectStore,
+ useVideoFrameStore,
+} from "./store"
+import { usePermissionStore } from "./store/auth"
+import { useBottomToolsStore } from "./useBottomToolsStore"
+import { useDescToolsStore } from "./useDescToolsStore"
+import { useKeyboardStore } from "./useKeyBoardStore"
+import { usePaperStore } from "./usePaperStore"
+import { useRightToolsStore } from "./useRightToolsStore"
+import {
+ useIntervalStore,
+ useLabelTimeStore,
+ useTimerStore,
+} from "./useTimerStore"
+import { useTopToolsStore } from "./useTopToolsStore"
+import { findGroupKey } from "./util"
+import { safeClone } from "./utils/clone"
+import { labelTypeMap } from "./utils/constants"
+
+// Splitter component - will need custom implementation or alternative
+
+// 定义状态的类型
+export type LabelState = Map
+
+// 定义操作的类型
+type Action =
+ | {
+ type: "INIT_IMAGES"
+ imageIds: string[]
+ objectOperations: Project.LabelSchemaList[]
+ }
+ | { type: "REMOVE_IMAGE"; imageId: string }
+
+// 定义初始状态
+const initialState: LabelState = new Map()
+
+const operationTypeList = [101, 102, 103, 104]
+let latestProjectDetailRequestSeq = 0
+let latestTaskDetailRequestSeq = 0
+
+// utils
+const getRectPoints = ([sx, sy, w, h]: number[]) => {
+ return [
+ [sx, sy + h],
+ [sx, sy],
+ [sx + w, sy],
+ [sx + w, sy + h],
+ ]
+}
+
+const getSegmentPoints = (arr: Array) => {
+ return arr.map((item) => [item[0], item[1]])
+}
+
+const videoExtPattern = /\.(mp4|mov|avi|mkv|webm|h264|264|ts|m4v)$/i
+const GLOBAL_LOADING_Z_INDEX = 900
+const videoMimeByExt: Record = {
+ mp4: "video/mp4",
+ mov: "video/quicktime",
+ webm: "video/webm",
+ mkv: "video/x-matroska",
+ avi: "video/x-msvideo",
+ h264: "video/h264",
+ "264": "video/h264",
+ ts: "video/mp2t",
+ m4v: "video/x-m4v",
+}
+const streamingFrameArgs = [
+ "-vf",
+ "fps=1,scale='min(640,iw)':-2:flags=bilinear,format=yuv420p",
+ "-q:v",
+ "5",
+ "frame_%03d.jpg",
+]
+
+const getFileExt = (fileName: string) => {
+ const segments = fileName.split(".")
+ if (segments.length <= 1) return ""
+ return segments[segments.length - 1].toLowerCase()
+}
+
+const normalizeBase64 = (text: string) => {
+ if (!text) return ""
+ const raw = text.includes(",") ? text.split(",").slice(1).join(",") : text
+ return raw.replace(/\s+/g, "")
+}
+
+const normalizeNamePrefix = (name: string) => {
+ const value = name
+ .replace(/[^a-zA-Z0-9_-]+/g, "_")
+ .replace(/_+/g, "_")
+ .replace(/^_|_$/g, "")
+ return value || "video"
+}
+
+const isVideoTaskDetail = (detail: Task.DataProps) => {
+ const sourceNames = detail.data_name
+ .map((item) => item?.name?.[0] || "")
+ .filter((name) => !!name)
+ if (!sourceNames.length) return false
+ const taskDataType = Number(
+ (detail as { [key: string]: any })?.data_type ??
+ (detail as { [key: string]: any })?.task_data_type ??
+ -1
+ )
+ return (
+ taskDataType === 2 ||
+ taskDataType === 7 ||
+ sourceNames.some((name) => videoExtPattern.test(name))
+ )
+}
+
+interface ResultImageEntry {
+ frameName: string
+ imageObjects: ImageObjects
+}
+
+const expandLabelResultImages = (item: LabelResult): ResultImageEntry[] => {
+ if (item.image_objects) {
+ return [
+ {
+ frameName: item.data_name,
+ imageObjects: item.image_objects,
+ },
+ ]
+ }
+ if (!item.video_objects) return []
+ return Object.entries(item.video_objects).map(([frameName, imageObjects]) => {
+ return {
+ frameName,
+ imageObjects,
+ }
+ })
+}
+
+interface LabelProps {
+ headerHeight: number
+ leftWidth: number
+ project_id: number
+ task_id: number
+}
+
+const LabelPage = ({
+ headerHeight = 0,
+ leftWidth = 0,
+ project_id = -1,
+ task_id = -1,
+}: LabelProps) => {
+ const projectId = useMemo(() => {
+ return project_id
+ }, [project_id])
+ const taskId = useMemo(() => {
+ return task_id
+ }, [task_id])
+ // const searchParams = useSearchParams()
+ // const id1 = searchParams.get("project_id")
+ // const projectId =
+ // typeof id1 === "string" && !isNaN(Number(id1)) ? Number(id1) : 1
+ // const id2 = searchParams.get("task_id")
+ // const taskId =
+ // typeof id2 === "string" && !isNaN(Number(id2)) ? Number(id2) : 2
+
+ const user_id = usePermissionStore.getState().user_id
+ const [projectDetail, setProjectDetail] = useState()
+ const [taskDetail, setTaskDetail] = useState()
+ const [oldWorkLoad, setOldWorkLoad] = useState(null)
+ // const [objectOperations, setObjectOperations] = useState<
+ // Project.LabelSchemaList[]
+ // >([]);
+ const topRef = useRef(null)
+ const autoSaveTimerRef = useRef | null>(null)
+ const autoSaveInProgressRef = useRef(false)
+ const paperContainerRef = useRef(null)
+ const qaToolContainerRef = useRef(null)
+ const [isConfirmSave, setIsConfirmSave] = useState(false)
+ const [loading, setLoading] = useState(false)
+ const [sizes, setSizes] = useState([])
+ const [videoFetchPendingCount, setVideoFetchPendingCount] = useState(0)
+ const [hasReadyVideoFrame, setHasReadyVideoFrame] = useState(false)
+ const [sourceVideoNames, setSourceVideoNames] = useState([])
+ const [downloadingVideoName, setDownloadingVideoName] = useState<
+ string | null
+ >(null)
+
+ const labelData = useLabelStore((state) => state.label)
+ const setLabel = useLabelStore((state) => state.setLabel)
+ const setStateStack = useLabelStore((state) => state.setStateStack)
+ const setLabelTime = useLabelTimeStore((state) => state.setLabelTime)
+ const isAutoSave = useIntervalStore((state) => state.isAutoSave)
+ const autoSaveGap = useIntervalStore((state) => state.autoSaveGap)
+
+ const {
+ editMode,
+ setEditMode,
+ setPressA,
+ activeOperation,
+ setActiveOperation,
+ showObjectList,
+ showGroupList,
+ showTaskList,
+ showDescList,
+ showMultiFrame,
+ setShowMultiFrame,
+ isView,
+ setIsView,
+ scale,
+ setScale,
+ objectOperations,
+ setObjectOperations,
+ } = useTopToolsStore()
+ const { activeImage } = useBottomToolsStore()
+ const {
+ setDescOperations,
+ metaOperation,
+ setMetaOperation,
+ setQaOperations,
+ setQaData,
+ resetData,
+ } = useDescToolsStore()
+
+ const asyncGetProjectDetail = useCallback(async () => {
+ if (projectId) {
+ const requestSeq = ++latestProjectDetailRequestSeq
+ try {
+ const res = await getProjectDetail(projectId)
+ if (requestSeq !== latestProjectDetailRequestSeq) {
+ console.warn("[LabelNossr] ignore stale project detail response", {
+ projectId,
+ requestSeq,
+ latestRequestSeq: latestProjectDetailRequestSeq,
+ })
+ return
+ }
+ setProjectDetail(res)
+ let operations: Project.LabelSchemaList[] = []
+ let textOperations: Project.LabelSchemaList[] = []
+ let metaOperation: Project.LabelSchemaList | null = null
+ res.label_schema_list?.forEach((schema) => {
+ if (operationTypeList.includes(schema.label_type)) {
+ operations.push(schema)
+ } else if ([201].includes(schema.label_type)) {
+ if (schema.label_class === "元操作序列") metaOperation = schema
+ else textOperations.push(schema)
+ }
+ })
+ setObjectOperations(operations)
+ if (res.label_type === 5) {
+ setDescOperations(textOperations)
+ if (metaOperation) setMetaOperation(metaOperation)
+ } else {
+ setDescOperations([])
+ setMetaOperation(null)
+ }
+ if (res.label_type === 6) {
+ let obj: any = {}
+ textOperations.forEach((item) => {
+ let arr = item.sub_attributes_describe.map((sub) => {
+ return {
+ [sub.chinese_name]: {
+ value: "",
+ id: sub.round_id,
+ is_pre: true,
+ tag: 0,
+ uid: 0,
+ create_timestamp: 0,
+ modify_uid: 0,
+ modify_timestamp: 0,
+ comment: "",
+ flag: 0,
+ },
+ }
+ })
+ obj[item.label_class] = arr
+ })
+ let map = new Map()
+ map.set("init", obj)
+ console.log(map)
+ setQaData(map)
+ setQaOperations(textOperations)
+ } else {
+ setQaOperations([])
+ }
+ resetData()
+ } catch {}
+ }
+ }, [
+ projectId,
+ resetData,
+ setDescOperations,
+ setMetaOperation,
+ setObjectOperations,
+ setQaData,
+ setQaOperations,
+ ])
+
+ const normalizeVideoTaskData = useCallback(
+ async (detail: Task.DataProps, requestSeq: number) => {
+ const isStaleRequest = () => requestSeq !== latestTaskDetailRequestSeq
+
+ // 后端任务可能是视频（单条 data_name），这里统一展开为可渲染的“帧列表任务”。
+ const sourceNames = detail.data_name
+ .map((item) => item?.name?.[0] || "")
+ .filter((name) => !!name)
+ if (!sourceNames.length || !projectId || !taskId) return detail
+
+ const isVideoTask = isVideoTaskDetail(detail)
+ if (!isVideoTask) {
+ setSourceVideoNames([])
+ setHasReadyVideoFrame(true)
+ return detail
+ }
+ setSourceVideoNames(sourceNames)
+
+ const appendFramesToPage = (frameNames: string[]) => {
+ if (isStaleRequest() || !frameNames.length) return
+
+ const bottomStore = useBottomToolsStore.getState()
+ const nextAllItems = [...bottomStore.allItems]
+ const existedItems = new Set(nextAllItems)
+ const appendNames: string[] = []
+
+ frameNames.forEach((name) => {
+ if (!name || existedItems.has(name)) return
+ existedItems.add(name)
+ nextAllItems.push(name)
+ appendNames.push(name)
+ })
+ if (!appendNames.length) return
+
+ bottomStore.setAllItems(nextAllItems)
+ setTaskDetail((prev) => {
+ const baseDetail = prev ?? { ...detail, data_name: [] }
+ const existedFrameNames = new Set(
+ baseDetail.data_name.map((item) => item?.name?.[0] || "")
+ )
+ const additions = appendNames
+ .filter((name) => !existedFrameNames.has(name))
+ .map((name) => ({
+ name: [name] as [string],
+ related_images: [] as [],
+ }))
+ if (!additions.length) {
+ return baseDetail === prev ? prev : baseDetail
+ }
+ return {
+ ...baseDetail,
+ data_name: [...baseDetail.data_name, ...additions],
+ }
+ })
+ }
+
+ const imagesMap = new Map(useImagesStore.getState().images)
+ const frameMapUpdates = new Map()
+ let imageMapUpdated = false
+ const normalizedDataName: Task.DataProps["data_name"] = []
+
+ for (const videoName of sourceNames) {
+ // 任务级缓存键：相同 project/task/video 可复用历史抽帧结果，避免重复解码。
+ const cacheKey = `${projectId}:${taskId}:${videoName}`
+ let frameNames =
+ useVideoFrameStore.getState().videoFrames.get(cacheKey) ?? []
+
+ const hasAllCachedFrames =
+ frameNames.length > 0 &&
+ frameNames.every((frameName) => {
+ const cache = imagesMap.get(frameName)
+ return typeof cache === "string" && cache.length > 0
+ })
+
+ if (!hasAllCachedFrames) {
+ let frameData: Awaited> = []
+ const noticeId = `video-process-${cacheKey}`
+ const fetchStartedAt = Date.now()
+ let decodeStartedAt: number | null = null
+ let fetchNoticeTicker: ReturnType | null = null
+ let progress = 0
+ let firstFrameDelaySec: string | null = null
+ const streamFrameNames: string[] = []
+ const streamFrameNameSet = new Set()
+ let lastNoticeUpdateAt = 0
+ let noticeTicker: ReturnType | null = null
+ const getFetchSec = (anchorTs?: number) => {
+ const endTs = decodeStartedAt ?? anchorTs ?? Date.now()
+ return ((endTs - fetchStartedAt) / 1000).toFixed(1)
+ }
+
+ const updateProgressNotice = (force = false) => {
+ if (isStaleRequest()) return
+ const now = Date.now()
+ if (!force && now - lastNoticeUpdateAt < 500) return
+ lastNoticeUpdateAt = now
+ const decodeElapsedSec = decodeStartedAt
+ ? ((now - decodeStartedAt) / 1000).toFixed(1)
+ : "0.0"
+ const fetchSec = getFetchSec(now)
+ const progressPct = Math.max(0, Math.min(100, progress * 100))
+ const progressText =
+ progressPct < 1
+ ? `${progressPct.toFixed(1)}%`
+ : `${Math.round(progressPct)}%`
+ const firstFrameText = firstFrameDelaySec
+ ? `，首帧解码 ${firstFrameDelaySec}s`
+ : decodeStartedAt && now - decodeStartedAt >= 8000
+ ? "，首帧生成中"
+ : ""
+ notifications.update({
+ id: noticeId,
+ loading: true,
+ autoClose: false,
+ withCloseButton: false,
+ title: "视频抽帧中",
+ message: `${videoName} ${progressText}，已生成 ${streamFrameNames.length} 帧，解码用时 ${decodeElapsedSec}s，拉取 ${fetchSec}s${firstFrameText}`,
+ })
+ }
+
+ const applyFrameBatch = (
+ batchFrames: Awaited>
+ ) => {
+ if (isStaleRequest() || !batchFrames.length) return
+ const appendNames: string[] = []
+ batchFrames.forEach((frame) => {
+ if (!frame?.name || streamFrameNameSet.has(frame.name)) return
+ streamFrameNameSet.add(frame.name)
+ streamFrameNames.push(frame.name)
+ appendNames.push(frame.name)
+ imagesMap.set(frame.name, frame.dataUrl)
+ })
+ if (!appendNames.length) return
+
+ if (!firstFrameDelaySec) {
+ const anchor = decodeStartedAt ?? Date.now()
+ const firstDelayMs = Date.now() - anchor
+ firstFrameDelaySec = (firstDelayMs / 1000).toFixed(1)
+ progress = Math.max(progress, 0.01)
+ setHasReadyVideoFrame(true)
+ }
+ imageMapUpdated = true
+ useImagesStore.getState().setImages(new Map(imagesMap))
+ useVideoFrameStore
+ .getState()
+ .setVideoFrames(cacheKey, [...streamFrameNames])
+ appendFramesToPage(appendNames)
+ updateProgressNotice(true)
+ }
+
+ // 用计数器驱动全局 LoadingOverlay，仅在首帧未到达前阻塞页面。
+ setVideoFetchPendingCount((prev) => prev + 1)
+ notifications.show({
+ id: noticeId,
+ loading: true,
+ autoClose: false,
+ withCloseButton: false,
+ title: "视频加载中",
+ message: `正在获取 ${videoName}，拉取用时 0.0s`,
+ })
+ fetchNoticeTicker = setInterval(() => {
+ if (isStaleRequest()) return
+ notifications.update({
+ id: noticeId,
+ loading: true,
+ autoClose: false,
+ withCloseButton: false,
+ title: "视频加载中",
+ message: `正在获取 ${videoName}，拉取用时 ${getFetchSec()}s`,
+ })
+ }, 1000)
+ try {
+ const base64Video = await getServerImage({
+ data_names: [videoName],
+ data_type: 2,
+ project_id: projectId,
+ })
+ if (isStaleRequest()) return detail
+ decodeStartedAt = Date.now()
+ const fetchSecAtDecode = getFetchSec(decodeStartedAt)
+ if (fetchNoticeTicker) {
+ clearInterval(fetchNoticeTicker)
+ fetchNoticeTicker = null
+ }
+
+ notifications.update({
+ id: noticeId,
+ loading: true,
+ autoClose: false,
+ withCloseButton: false,
+ title: "视频抽帧中",
+ message: `正在快速提取并持续抽帧 ${videoName}，拉取 ${fetchSecAtDecode}s`,
+ })
+ noticeTicker = setInterval(() => {
+ updateProgressNotice(true)
+ }, 1000)
+
+ frameData = await processVideo({
+ base64Data: String(base64Video || ""),
+ fileName: videoName,
+ // 输出帧名带 project/task 前缀，降低跨任务重名覆盖风险。
+ namePrefix: normalizeNamePrefix(
+ `${projectId}_${taskId}_${videoName.replace(/\.[^.]+$/, "")}`
+ ),
+ args: streamingFrameArgs,
+ quickFirstFrame: true,
+ continueAfterQuickFirstFrame: true,
+ onProgress: (value) => {
+ if (isStaleRequest()) return
+ progress = Math.max(0, Math.min(1, Number(value) || 0))
+ updateProgressNotice(false)
+ },
+ onFrames: (batchFrames) => {
+ applyFrameBatch(batchFrames)
+ },
+ })
+ if (isStaleRequest()) return detail
+
+ const totalSec = ((Date.now() - fetchStartedAt) / 1000).toFixed(1)
+ const fetchSecFinal = decodeStartedAt
+ ? ((decodeStartedAt - fetchStartedAt) / 1000).toFixed(1)
+ : "未统计"
+ notifications.update({
+ id: noticeId,
+ loading: false,
+ color: "teal",
+ title: "视频处理完成",
+ message: `${videoName} 已生成 ${frameData.length} 帧（首帧解码 ${firstFrameDelaySec || "未统计"}s，总耗时 ${totalSec}s，拉取 ${fetchSecFinal}s）`,
+ autoClose: 2600,
+ withCloseButton: true,
+ })
+ } catch (error) {
+ const message = error instanceof Error ? error.message : "未知错误"
+ const fetchSec = getFetchSec()
+ notifications.update({
+ id: noticeId,
+ loading: false,
+ color: "red",
+ title: "视频处理失败",
+ message: `${videoName}（${message}，拉取 ${fetchSec}s）`,
+ autoClose: 5000,
+ withCloseButton: true,
+ })
+ throw new Error(`视频帧生成失败：${videoName}（${message}）`)
+ } finally {
+ if (fetchNoticeTicker) {
+ clearInterval(fetchNoticeTicker)
+ fetchNoticeTicker = null
+ }
+ if (noticeTicker) {
+ clearInterval(noticeTicker)
+ noticeTicker = null
+ }
+ setVideoFetchPendingCount((prev) => Math.max(prev - 1, 0))
+ }
+ frameNames = frameData.map((frame) => frame.name)
+ if (!frameNames.length) {
+ throw new Error(`视频帧生成失败：${videoName}`)
+ }
+ frameData.forEach((frame) => {
+ if (!imagesMap.has(frame.name)) {
+ imagesMap.set(frame.name, frame.dataUrl)
+ }
+ })
+ imageMapUpdated = true
+ frameMapUpdates.set(cacheKey, frameNames)
+ appendFramesToPage(frameNames)
+ } else {
+ // 已命中缓存时也立即解锁页面并展示帧列表。
+ setHasReadyVideoFrame(true)
+ appendFramesToPage(frameNames)
+ }
+
+ if (!frameNames.length) {
+ throw new Error(`视频帧映射为空：${videoName}`)
+ }
+
+ frameNames.forEach((frameName) => {
+ // 将视频帧映射回 Task.DataProps 结构，复用现有图片标注渲染逻辑。
+ normalizedDataName.push({
+ name: [frameName] as [string],
+ related_images: [],
+ })
+ })
+ }
+
+ if (!normalizedDataName.length) {
+ throw new Error("未生成可用视频帧")
+ }
+
+ if (imageMapUpdated) {
+ // 批量写入，避免每帧 setState 触发频繁重渲染。
+ useImagesStore.getState().setImages(imagesMap)
+ }
+ frameMapUpdates.forEach((frameNames, cacheKey) => {
+ useVideoFrameStore.getState().setVideoFrames(cacheKey, frameNames)
+ })
+ setHasReadyVideoFrame(true)
+
+ return {
+ ...detail,
+ data_name: normalizedDataName,
+ }
+ },
+ [projectId, taskId]
+ )
+
+ const downloadVideoToLocal = useCallback(
+ (base64Video: string, name: string) => {
+ // 调试入口：把服务端 base64 视频还原成本地文件，便于和抽帧结果对比。
+ const payload = normalizeBase64(String(base64Video || ""))
+ if (!payload) throw new Error("视频数据为空")
+ const binary = atob(payload)
+ const bytes = new Uint8Array(binary.length)
+ for (let i = 0; i < binary.length; i += 1) {
+ bytes[i] = binary.charCodeAt(i)
+ }
+ const ext = getFileExt(name)
+ const blob = new Blob([bytes], {
+ type: videoMimeByExt[ext] || "video/mp4",
+ })
+ const url = URL.createObjectURL(blob)
+ const anchor = document.createElement("a")
+ anchor.href = url
+ anchor.download = name
+ document.body.appendChild(anchor)
+ anchor.click()
+ document.body.removeChild(anchor)
+ URL.revokeObjectURL(url)
+ },
+ []
+ )
+
+ const handleDownloadSourceVideo = useCallback(async () => {
+ const videoName = sourceVideoNames[0]
+ if (!videoName || !projectId) return
+ const noticeId = `video-download-${projectId}-${taskId || 0}-${videoName}`
+ const fetchStartedAt = Date.now()
+ let fetchNoticeTicker: ReturnType | null = null
+ setDownloadingVideoName(videoName)
+ setVideoFetchPendingCount((prev) => prev + 1)
+ notifications.show({
+ id: noticeId,
+ loading: true,
+ autoClose: false,
+ withCloseButton: false,
+ title: "准备下载视频",
+ message: `正在获取 ${videoName}，拉取用时 0.0s`,
+ })
+ fetchNoticeTicker = setInterval(() => {
+ const fetchSec = ((Date.now() - fetchStartedAt) / 1000).toFixed(1)
+ notifications.update({
+ id: noticeId,
+ loading: true,
+ autoClose: false,
+ withCloseButton: false,
+ title: "准备下载视频",
+ message: `正在获取 ${videoName}，拉取用时 ${fetchSec}s`,
+ })
+ }, 1000)
+ try {
+ const base64Video = await getServerImage({
+ data_names: [videoName],
+ data_type: 2,
+ project_id: projectId,
+ })
+ if (fetchNoticeTicker) {
+ clearInterval(fetchNoticeTicker)
+ fetchNoticeTicker = null
+ }
+ const fetchSec = ((Date.now() - fetchStartedAt) / 1000).toFixed(1)
+ downloadVideoToLocal(String(base64Video || ""), videoName)
+ notifications.update({
+ id: noticeId,
+ loading: false,
+ color: "teal",
+ title: "下载已开始",
+ message:
+ sourceVideoNames.length > 1
+ ? `${videoName}（当前任务共 ${sourceVideoNames.length} 个视频，拉取 ${fetchSec}s）`
+ : `${videoName}（拉取 ${fetchSec}s）`,
+ autoClose: 2500,
+ withCloseButton: true,
+ })
+ } catch (error) {
+ const message = error instanceof Error ? error.message : "未知错误"
+ const fetchSec = ((Date.now() - fetchStartedAt) / 1000).toFixed(1)
+ notifications.update({
+ id: noticeId,
+ loading: false,
+ color: "red",
+ title: "下载失败",
+ message: `${videoName}（${message}，拉取 ${fetchSec}s）`,
+ autoClose: 5000,
+ withCloseButton: true,
+ })
+ } finally {
+ if (fetchNoticeTicker) {
+ clearInterval(fetchNoticeTicker)
+ fetchNoticeTicker = null
+ }
+ setDownloadingVideoName(null)
+ setVideoFetchPendingCount((prev) => Math.max(prev - 1, 0))
+ }
+ }, [downloadVideoToLocal, projectId, sourceVideoNames, taskId])
+
+ const asyncGetTaskDetail = useCallback(async () => {
+ if (taskId) {
+ const requestSeq = ++latestTaskDetailRequestSeq
+ try {
+ usePaperStore.getState().setLoadingData(true)
+ setHasReadyVideoFrame(false)
+ setSourceVideoNames([])
+ // 获取当前任务全量数据
+ const res = await getTaskList({
+ id: [taskId],
+ get_data: true,
+ page_number: 1,
+ page_size: 1,
+ })
+ if (requestSeq !== latestTaskDetailRequestSeq) {
+ console.warn("[LabelNossr] ignore stale task list response", {
+ taskId,
+ requestSeq,
+ latestRequestSeq: latestTaskDetailRequestSeq,
+ })
+ return
+ }
+ let detail = res.task_list[0]
+ if (isVideoTaskDetail(detail)) {
+ // 视频任务先清空帧列表占位，首帧到达后再逐步追加并可立即开始操作。
+ setTaskDetail({
+ ...detail,
+ data_name: [],
+ })
+ useBottomToolsStore.getState().setAllItems([])
+ } else {
+ setHasReadyVideoFrame(true)
+ }
+ detail = await normalizeVideoTaskData(detail, requestSeq)
+ if (requestSeq !== latestTaskDetailRequestSeq) {
+ console.warn("[LabelNossr] ignore stale normalized task response", {
+ taskId,
+ requestSeq,
+ latestRequestSeq: latestTaskDetailRequestSeq,
+ })
+ return
+ }
+ setTaskDetail(detail)
+ // 帧列表
+ useBottomToolsStore
+ .getState()
+ .setAllItems(detail.data_name.map((item) => item.name[0] || ""))
+ // 获取当前任务流转记录
+ let flowCommentArr: Comment[] = []
+ let turn1time = 1
+ let turn2time = 1
+ const flowRes = await getTaskWorkFlow(taskId)
+ if (requestSeq !== latestTaskDetailRequestSeq) {
+ console.warn("[LabelNossr] ignore stale workflow response", {
+ taskId,
+ requestSeq,
+ latestRequestSeq: latestTaskDetailRequestSeq,
+ })
+ return
+ }
+ flowRes.forEach((item) => {
+ if (item.task_status_src !== 4 && item.task_status_dst === 4) {
+ flowCommentArr.push({
+ uid: item.new_uid,
+ turn: 1,
+ times: turn1time,
+ check_box_comments: [],
+ text_comments: [],
+ comment_type: 0,
+ date: 0,
+ scene_info: {
+ type: 0,
+ },
+ })
+ turn1time++
+ } else if (item.task_status_src !== 6 && item.task_status_dst === 6) {
+ flowCommentArr.push({
+ uid: item.new_uid,
+ turn: 2,
+ times: turn2time,
+ check_box_comments: [],
+ text_comments: [],
+ comment_type: 0,
+ date: 0,
+ scene_info: {
+ type: 0,
+ },
+ })
+ turn2time++
+ }
+ })
+ console.log(flowCommentArr)
+ useLabelStore.getState().setLabelDefaultComments(flowCommentArr)
+ const { work_time, label_status } = detail
+ setLabelTime({
+ label: work_time.label_work_time,
+ review1: work_time.first_review_work_time,
+ review2: work_time.second_review_work_time,
+ })
+ // 获取并处理当前任务标注结果数据
+ const dataRes = await getLabelResult(taskId)
+ if (requestSeq !== latestTaskDetailRequestSeq) {
+ console.warn("[LabelNossr] ignore stale label result response", {
+ taskId,
+ requestSeq,
+ latestRequestSeq: latestTaskDetailRequestSeq,
+ })
+ return
+ }
+ const { results } = dataRes
+ const resultImageEntries = results.flatMap((item) =>
+ expandLabelResultImages(item)
+ )
+
+ let currentWorkTime = 0
+ if (label_status === 2) {
+ currentWorkTime = work_time.label_work_time
+ } else if (label_status === 4) {
+ currentWorkTime = work_time.first_review_work_time
+ } else if (label_status === 6) {
+ currentWorkTime = work_time.second_review_work_time
+ }
+
+ // 生成当前workload
+ const workLoad: WorkLoad = {
+ object_size: {},
+ prelabel_modify_size: {},
+ review_size: 0,
+ comment_size: 0,
+ work_time: currentWorkTime,
+ dynamic_size: {},
+ static_size: {},
+ review_dynamic_size: {},
+ review_static_size: {},
+ review_question_size: {},
+ key_frame_size: {},
+ review_key_frame_size: {},
+ question_size: {},
+ }
+ resultImageEntries.forEach(({ frameName, imageObjects }) => {
+ const { annotations, images, key_frame, desc } = imageObjects
+ const rasterName = frameName || images.file_name
+ if (rasterName) {
+ usePaperStore
+ .getState()
+ .setRasterSize(rasterName, [images.width, images.height])
+ }
+ annotations.forEach((annotation) => {
+ let reviewed = false
+ const { comment, prelabel, uid } = annotation
+ if (prelabel)
+ workLoad.prelabel_modify_size[uid]
+ ? workLoad.prelabel_modify_size[uid]++
+ : (workLoad.prelabel_modify_size[uid] = 1)
+ else
+ workLoad.object_size[uid]
+ ? workLoad.object_size[uid]++
+ : (workLoad.object_size[uid] = 1)
+ if (comment) {
+ comment.forEach((c) => {
+ if (c.comment_type > 0 && c.uid === user_id) reviewed = true
+ if (c.comment_type === 2 && c.uid === user_id)
+ workLoad.comment_size++
+ })
+ }
+ if (reviewed) workLoad.review_size++
+ })
+ if (key_frame) {
+ if (label_status === 2) {
+ let id = imageObjects.label1_uid!
+ if (id)
+ workLoad.key_frame_size[id]
+ ? workLoad.key_frame_size[id]++
+ : (workLoad.key_frame_size[id] = 1)
+ } else if (label_status === 4) {
+ let id = imageObjects.review1_uid!
+ if (id)
+ workLoad.review_key_frame_size[id]
+ ? workLoad.review_key_frame_size[id]++
+ : (workLoad.review_key_frame_size[id] = 1)
+ } else if (label_status === 6) {
+ let id = imageObjects.review2_uid!
+ if (id)
+ workLoad.review_key_frame_size[id]
+ ? workLoad.review_key_frame_size[id]++
+ : (workLoad.review_key_frame_size[id] = 1)
+ }
+ }
+ if (useDescToolsStore.getState().qaOperations.length) {
+ if (desc) {
+ const { other_desc } = desc
+ const descData = other_desc ? JSON.parse(other_desc) : {}
+ Object.values(descData).forEach((questionArr: any) => {
+ questionArr.forEach((q: any) => {
+ const v: any = Object.values(q)[0]
+ if (v.uid) {
+ workLoad.question_size[v.uid]
+ ? workLoad.question_size[v.uid]++
+ : (workLoad.question_size[v.uid] = 1)
+ }
+ if (v.tag) {
+ const uid = usePermissionStore.getState().user_id
+ workLoad.review_question_size[uid]
+ ? workLoad.review_question_size[uid]++
+ : (workLoad.review_question_size[uid] = 1)
+ }
+ })
+ })
+ }
+ }
+ })
+ console.log("获取时计算的工作量统计", workLoad)
+ setOldWorkLoad(workLoad)
+ const taskLabelData = new Map()
+ const pathGroupData = new Map()
+ // 重置 PathIds
+ useRightToolsStore.getState().setPathIds([])
+ // 重置 PathGroupIds
+ useRightToolsStore.getState().setPathGroupIds([])
+ // 生成标注结果
+ resultImageEntries.forEach(({ frameName, imageObjects }) => {
+ const key = frameName
+ if (!key) return
+ const categoryMap = new Map()
+ const { annotations, image_groups, desc } = imageObjects
+ // 赋值用过的 id
+ annotations.map((annotation) => {
+ useRightToolsStore.getState().pushPathId(annotation.id)
+ })
+ // 赋值用过的 groupId
+ image_groups &&
+ Object.keys(image_groups)?.map((groupId) => {
+ useRightToolsStore.getState().pushPathGroupId(+groupId)
+ })
+ annotations.forEach((annotation) => {
+ const { id, category_id, comment } = annotation
+ let current_comment: Comment[] = []
+ if (comment) {
+ current_comment = flowCommentArr.map((c) => {
+ const { turn, times } = c
+ let modified_comment = null
+ comment.forEach((item) => {
+ if (item.turn === turn && item.times === times)
+ modified_comment = item
+ })
+ return modified_comment ? modified_comment : c
+ })
+ } else {
+ current_comment = [...flowCommentArr]
+ }
+ let detail: any = {
+ ...annotation,
+ comment: current_comment,
+ }
+ // group info
+ if (image_groups) {
+ const key = findGroupKey(image_groups as any, id)
+ if (key !== -1) detail.parentGroupId = key
+ }
+ const categoryKey = `${category_id}`
+ let arr = categoryMap.has(categoryKey)
+ ? categoryMap.get(categoryKey)
+ : []
+ if (annotation.rect) {
+ // arr.push([id, getRectPoints(annotation.rect), detail, []]);
+ arr.push([id, [getRectPoints(annotation.rect)], detail, []])
+ }
+
+ if (annotation.line_segment) {
+ arr.push([
+ id,
+ annotation.line_segment.map((item) => getSegmentPoints(item)),
+ detail,
+ [],
+ ])
+ }
+
+ if (annotation.segmentation) {
+ arr.push([
+ id,
+ // getSegmentPoints(annotation.segmentation[0]),
+ annotation.segmentation.map((item) => getSegmentPoints(item)),
+ detail,
+ annotation.hollow_segmentation?.map((item) =>
+ getSegmentPoints(item)
+ ) || [],
+ ])
+ }
+ if (annotation.key_points) {
+ arr.push([
+ id,
+ // getSegmentPoints(annotation.segmentation[0]),
+ [
+ getSegmentPoints(
+ annotation.key_points.map((item) => item.point)
+ ),
+ ],
+ Object.assign(detail, {
+ circles: annotation.key_points,
+ }),
+ [],
+ ])
+ }
+
+ categoryMap.set(categoryKey, arr)
+ })
+ taskLabelData.set(key, categoryMap)
+ // 关键帧信息
+ const keyFrame = {
+ key_frame: imageObjects.key_frame || false,
+ label1_ts: imageObjects.label1_ts || 0,
+ label1_uid: imageObjects.label1_uid || 0,
+ review1_ts: imageObjects.review1_ts || 0,
+ review1_uid: imageObjects.review1_uid || 0,
+ review2_ts: imageObjects.review2_ts || 0,
+ review2_uid: imageObjects.review2_uid || 0,
+ }
+ useBottomToolsStore.getState().setKeyFrameData(key, keyFrame)
+ // 大语言模型 两种数据情况
+ if (useDescToolsStore.getState().qaOperations.length) {
+ if (desc) {
+ const { other_desc } = desc
+ let current_data: any = {}
+ const descData = other_desc ? JSON.parse(other_desc) : {}
+ Object.entries(descData).forEach(
+ ([label_class, questionArr]: any) => {
+ let arr = questionArr.map((question: any) => {
+ let [name, val]: any = Object.entries(question)[0]
+ return {
+ [name]: {
+ ...val,
+ value: val.value
+ ? `${val.value}${splitWord}${val.value}`
+ : undefined,
+ comment: val.comment
+ ? `${val.comment}${splitWord}${val.comment}`
+ : undefined,
+ },
+ }
+ })
+ current_data[label_class] = arr
+ }
+ )
+ const qaData = useDescToolsStore.getState().qaData
+ // 无文本描述时 赋予预设值
+ if (JSON.stringify(current_data) === "{}") {
+ current_data = qaData.get("init")
+ }
+ const qaMap = safeClone(qaData)
+ qaMap.set(key, current_data)
+ useDescToolsStore.getState().setQaData(qaMap)
+ }
+ } else if (useDescToolsStore.getState().descOperations.length) {
+ if (desc) {
+ const { meta_operation, other_desc } = desc
+ const currentMetaMap = safeClone(
+ useDescToolsStore.getState().metaData
+ )
+ currentMetaMap.set(key, meta_operation || [])
+ useDescToolsStore.getState().setMetaData(currentMetaMap)
+ const currentDescMap = safeClone(
+ useDescToolsStore.getState().descData
+ )
+ let descMap = new Map()
+ const descData = other_desc ? JSON.parse(other_desc) : {}
+ console.log(descData)
+ Object.entries(descData).forEach(
+ ([label_class, { value, is_correct, comment }]: any) => {
+ descMap.set(label_class, {
+ value:
+ (typeof value === "string"
+ ? `${value}${splitWord}${value}`
+ : value) || undefined,
+ is_correct: is_correct || undefined,
+ comment: comment || undefined,
+ })
+ }
+ )
+ currentDescMap.set(key, descMap)
+ useDescToolsStore.getState().setDescData(currentDescMap)
+ }
+ }
+ image_groups &&
+ pathGroupData.set(
+ key,
+ new Map(
+ Object.entries(image_groups).map(([key, value]: any) => [
+ key * 1,
+ value,
+ ])
+ )
+ )
+ })
+ setLabel(taskLabelData)
+ // 获取任务详情时设置状态栈初始值
+ setStateStack([taskLabelData])
+ useDescToolsStore.getState().updateFlag(true)
+ useRightToolsStore.getState().setPathGroupMap(pathGroupData)
+ } catch (err) {
+ if (requestSeq !== latestTaskDetailRequestSeq) return
+ console.log(err)
+ setSourceVideoNames([])
+ setOldWorkLoad(null)
+ setTaskDetail(undefined)
+ useBottomToolsStore.getState().setAllItems([])
+ setLabel(new Map())
+ setStateStack([])
+ useRightToolsStore.getState().setPathGroupMap(new Map())
+ if (err instanceof Error && err.message.includes("视频")) {
+ showNotification({
+ color: "red",
+ title: "视频解码失败",
+ message: err.message,
+ })
+ }
+ } finally {
+ if (requestSeq === latestTaskDetailRequestSeq) {
+ usePaperStore.getState().setLoadingData(false)
+ }
+ }
+ }
+ }, [
+ normalizeVideoTaskData,
+ setLabel,
+ setLabelTime,
+ setStateStack,
+ taskId,
+ user_id,
+ ])
+
+ // 保存时更新当前workload
+ const updateOldWorkLoad = (data: WorkLoad) => {
+ setOldWorkLoad(data)
+ }
+
+ useEffect(() => {
+ asyncGetProjectDetail()
+ asyncGetTaskDetail()
+ }, [asyncGetProjectDetail, asyncGetTaskDetail])
+
+ // 定义 reducer 函数
+ const reducer = useCallback(
+ (state: LabelState, action: Action): LabelState => {
+ switch (action.type) {
+ case "INIT_IMAGES":
+ const newState = new Map() // 创建状态的副本
+ action.imageIds.forEach((imageId) => {
+ newState.set(
+ imageId,
+ action.objectOperations.map((item) => item.category_id.toString())
+ ) // 将操作列表添加到新状态中
+ })
+ return newState
+
+ case "REMOVE_IMAGE":
+ const stateAfterRemoval = new Map(state)
+ if (stateAfterRemoval.has(action.imageId)) {
+ stateAfterRemoval.delete(action.imageId) // 删除该图片的条目
+ }
+ return stateAfterRemoval
+
+ default:
+ return state // 返回当前状态
+ }
+ },
+ []
+ )
+
+ const [labelState, dispatch] = useReducer(reducer, initialState)
+
+ const initImages = (
+ imageIds: string[],
+ objectOperations: Project.LabelSchemaList[]
+ ) => {
+ dispatch({
+ type: "INIT_IMAGES",
+ imageIds,
+ objectOperations,
+ })
+ }
+
+ const [isLabelTask, setIsLabelTask] = useState(false)
+
+ useEffect(() => {
+ if (!taskDetail || !projectDetail) {
+ setIsLabelTask(false)
+ setIsView(true)
+ setEditMode(false)
+ return
+ }
+ if (taskDetail) {
+ if (
+ ![201, 202, 203, 500].includes(projectDetail!.status) ||
+ ![2, 4, 6, 7].includes(taskDetail.label_status) ||
+ taskDetail.current_uid !== user_id
+ ) {
+ // 如果不是能标注的任务
+ setIsLabelTask(false)
+ setIsView(true)
+ setEditMode(false)
+ } else {
+ setIsLabelTask(true)
+ setIsView(false)
+ }
+
+ initImages(
+ taskDetail.data_name.map((item) => item.name?.[0]),
+ objectOperations
+ )
+
+ if (taskDetail.data_name?.length) setShowMultiFrame(true)
+ }
+ }, [
+ objectOperations,
+ setIsView,
+ setShowMultiFrame,
+ user_id,
+ taskDetail,
+ projectDetail,
+ setEditMode,
+ ])
+
+ const { setPaperMode, setToolOption, setGroupScale } = usePaperStore()
+
+ // @ts-expect-error to_do
+ const forceUpdate = useReducer((bool) => !bool)[1]
+
+ const getOperationSchema = useCallback(
+ (operationId: string) => {
+ return (
+ projectDetail?.label_schema_list?.find(
+ (item) => item.category_id === +operationId && item.label_type !== 201
+ ) || null
+ )
+ },
+ [projectDetail?.label_schema_list]
+ )
+
+ const setDrawType = useCallback(() => {
+ if (isView) {
+ setPaperMode("pan")
+ } else {
+ let operationSchema = getOperationSchema(activeOperation)
+ if (operationSchema) {
+ let strokeColor = `rgb(${operationSchema.color[0]},${operationSchema.color[1]},${operationSchema.color[2]})`
+ let fillColor = `rgba(${operationSchema.color[0]},${operationSchema.color[1]},${operationSchema.color[2]},0.3)`
+ let blankColor = `rgba(${operationSchema.color[0]},${operationSchema.color[1]},${operationSchema.color[2]},0.01)`
+
+ if (editMode) {
+ switch (
+ operationSchema &&
+ labelTypeMap.get(operationSchema.label_type)
+ ) {
+ case "多边形":
+ setToolOption({
+ strokeColor: strokeColor,
+ strokeWidth: 2,
+ fillColor: fillColor,
+ blankColor: blankColor,
+ })
+ setPaperMode("polygon")
+ return
+ case "关键点":
+ setToolOption({
+ strokeColor: strokeColor,
+ strokeWidth: 2,
+ fillColor: fillColor,
+ blankColor: blankColor,
+ })
+ setPaperMode("point")
+ return
+ case "多线段":
+ setToolOption({
+ strokeColor: strokeColor,
+ strokeWidth: 2,
+ fillColor: fillColor,
+ blankColor: blankColor,
+ })
+ setPaperMode("brush")
+ return
+ case "2D框":
+ setToolOption({
+ strokeColor: strokeColor,
+ strokeWidth: 2,
+ fillColor: fillColor,
+ blankColor: blankColor,
+ })
+ setPaperMode("rectangle")
+ return
+ default:
+ setPaperMode("polygon")
+ return
+ }
+ } else {
+ setPaperMode("pan")
+ }
+ }
+ }
+ }, [
+ activeOperation,
+ editMode,
+ getOperationSchema,
+ isView,
+ setPaperMode,
+ setToolOption,
+ ])
+
+ useEffect(() => {
+ setDrawType()
+ }, [editMode, setDrawType])
+
+ const { setShift, focusInput } = useKeyEventStore()
+
+ const handleShortcut = useCallback(
+ (key: string, ctrl: boolean) => {
+ let checkOperation = getOperationSchema(key)
+ const mode = usePaperStore.getState().mode
+ // 标注方案里面存在的非文本类型标注才能切换
+ if (checkOperation) {
+ // 辅助标注模式下非多边形类型不能切换
+ if (mode === "support" && checkOperation.label_type !== 102) return
+ if (ctrl) {
+ setActiveOperation((+key + 10).toString())
+ } else {
+ setActiveOperation(key)
+ }
+ }
+ },
+ [getOperationSchema, setActiveOperation]
+ )
+
+ useEffect(() => {
+ const down = (e: KeyboardEvent) => {
+ // console.log(e, e.key);
+ if (focusInput || isView) return
+
+ console.log(e.key)
+ const mode = usePaperStore.getState().mode
+
+ if (e.key === "Alt" && mode !== "support") {
+ e.preventDefault()
+ // console.log(e.key);
+ setEditMode(!editMode)
+ if (!editMode) setPressA(false)
+ }
+
+ if (e.key === "Shift") {
+ e.preventDefault()
+ setShift(true)
+ useKeyboardStore.getState().setShift(true)
+ }
+
+ if (mode !== "support")
+ if (Number(e.key)) {
+ handleShortcut(e.key, e.ctrlKey)
+ } else if (Number(e.key) === 0) {
+ handleShortcut("10", e.ctrlKey)
+ }
+
+ if (e.key === "s" && (e.metaKey || e.ctrlKey)) {
+ e.preventDefault()
+ setIsConfirmSave(true)
+ }
+
+ if (e.key === "g" && (e.metaKey || e.ctrlKey)) {
+ e.preventDefault()
+ paperContainerRef.current.handleCreatePathGroup()
+ }
+
+ if (e.key === "a") {
+ e.preventDefault()
+ setPressA(true)
+ }
+
+ if (e.key === "Control") {
+ e.preventDefault()
+ useKeyboardStore.getState().setCtrl(true)
+ }
+ // 辅助标注 分割
+ if (e.key === "F1") {
+ // 判断类型
+ e.preventDefault()
+ const schema = getOperationSchema(
+ useTopToolsStore.getState().activeOperation
+ )
+ console.log(schema)
+ if (schema?.label_type !== 102) {
+ showNotification({
+ title: "错误",
+ message: "当前类型不支持辅助标注！",
+ color: "red",
+ })
+ } else {
+ if (mode === "support") {
+ // 辅助标注生成对应标注结果
+ paperContainerRef.current.saveSupportAnnotationData()
+ } else {
+ usePaperStore.getState().setPaperMode("support")
+ }
+ }
+ }
+
+ // 追踪
+ if (e.key === "i") {
+ e.preventDefault()
+ paperContainerRef.current.renderTrackingAnnotation()
+ }
+
+ // 复制
+ if (e.key === "c" && e.ctrlKey) {
+ e.preventDefault()
+ useKeyboardStore
+ .getState()
+ .setCopyDataIds(
+ useObjectStore.getState().selectedPath[
+ useBottomToolsStore.getState().activeImage
+ ]
+ )
+ }
+
+ // 粘贴
+ if (e.key === "v" && e.ctrlKey) {
+ e.preventDefault()
+ paperContainerRef.current.copyAnnotationDataToMultiFrame()
+ }
+
+ // 撤回
+ if (e.key === "z" && e.ctrlKey) {
+ e.preventDefault()
+ // 清除当前页数据
+ const clear = () => {
+ usePaperStore
+ .getState()
+ .group!.getItems({})
+ .filter((item) => item.data.id)
+ .forEach((item) => {
+ item.remove()
+ })
+ }
+ const data = useLabelStore.getState().popStateStack()
+ console.log("弹出栈的数据", data)
+ if (data) {
+ clear()
+ const imageId = useBottomToolsStore.getState().activeImage
+ const pathGroupMap = new Map()
+ for (const [imageKey, categories] of data) {
+ const groupMap = new Map()
+ for (const [key, value] of categories) {
+ value.forEach((item) => {
+ const vId = item[2].parentGroupId
+ if (vId)
+ if (groupMap.has(vId)) groupMap.get(vId).push(item[0])
+ else groupMap.set(vId, [item[0]])
+ })
+ if (imageId === imageKey)
+ paperContainerRef.current.renderPolygons(key, categories)
+ }
+ pathGroupMap.set(imageKey, groupMap)
+ }
+ useRightToolsStore.getState().setPathGroupMap(pathGroupMap)
+
+ console.log(pathGroupMap)
+ // if (data.size) {
+ // if (data.has(imageId)) {
+ // const map = data.get(imageId);
+ // if (map) {
+ // for (const [key, value] of map) {
+ // console.log(key, value);
+ // paperContainerRef.current.renderPolygons(key, map);
+ // }
+ // }
+ // }
+ // }
+ // 更新当前数据
+ useLabelStore.getState().setLabel(safeClone(data))
+ }
+ }
+
+ if (e.key === "p") {
+ e.preventDefault()
+ if (projectDetail?.label_type === 6 && qaToolContainerRef.current)
+ qaToolContainerRef.current.checkWrongWords()
+ }
+
+ // if (e.key === "=" && (e.metaKey || e.ctrlKey)) {
+ // e.preventDefault();
+ // setScale((num) => {
+ // let newScale = num + 0.1;
+ // return newScale;
+ // });
+ // } else if (e.key === "-" && (e.metaKey || e.ctrlKey)) {
+ // e.preventDefault();
+ // setScale((num) => {
+ // if (num <= 1) {
+ // let newScale = num * 0.9;
+ // return newScale;
+ // } else {
+ // let newScale = num - 0.1;
+ // return newScale;
+ // }
+ // });
+ // } else if (e.key === "3") {
+ // e.preventDefault();
+ // } else if (e.key === "4") {
+ // e.preventDefault();
+ // } else if (e.key === "5") {
+ // e.preventDefault();
+ // } else if (e.key === "a" && (e.metaKey || e.ctrlKey)) {
+ // e.preventDefault();
+ // }
+ }
+ const up = (e: KeyboardEvent) => {
+ // console.log("键盘抬起", e);
+ if (e.key === "Shift") {
+ setShift(false)
+ useKeyboardStore.getState().setShift(false)
+ }
+ if (e.key === "Control") {
+ useKeyboardStore.getState().setCtrl(false)
+ }
+ }
+ const wheel = (e: WheelEvent) => {
+ e.preventDefault()
+ const currentScale = useTopToolsStore.getState().scale
+ let newScale = e.deltaY < 0 ? currentScale * 1.1 : currentScale * 0.9
+ if (newScale >= 100) return
+ setScale(newScale)
+ setGroupScale(newScale)
+ }
+
+ const mouseclick = (_e: MouseEvent) => {
+ useTopToolsStore.getState().setSubAttrPresetShow(false)
+ }
+
+ const mousemove = (event: { clientX: number; clientY: number }) => {
+ paperContainerRef.current.handleCrosshairMove(event)
+ }
+
+ let element = document.getElementById("resize-container")
+ document.addEventListener("keydown", down)
+ document.addEventListener("keyup", up)
+ element?.addEventListener("wheel", wheel)
+ element?.addEventListener("mousedown", mouseclick)
+ element?.addEventListener("mousemove", mousemove)
+
+ return () => {
+ document.removeEventListener("keydown", down)
+ document.removeEventListener("keyup", up)
+ element?.removeEventListener("wheel", wheel)
+ element?.removeEventListener("mousedown", mouseclick)
+ element?.removeEventListener("mousemove", mousemove)
+ }
+ }, [
+ editMode,
+ focusInput,
+ getOperationSchema,
+ handleShortcut,
+ isView,
+ projectDetail?.label_type,
+ setEditMode,
+ setGroupScale,
+ setPressA,
+ setScale,
+ setShift,
+ ])
+
+ const setGlobalLoading = useCallback((flag: boolean) => {
+ setLoading(flag)
+ }, [])
+
+ // 切换图片时清空复制保存的数组
+ useEffect(() => {
+ useKeyboardStore.getState().setCopyDataIds([])
+ }, [activeImage])
+
+ const handleBeforeUnload = (e: any) => {
+ e.preventDefault()
+ // 备份
+ topRef.current.handleBackup("auto_backup")
+ // 清空操作栏状态
+ useObjectStore.getState().resetPathAndOperationStatus()
+ }
+
+ // 更新Splitter状态
+ const updateSplitterSizes = useCallback(() => {
+ console.log(
+ "document.documentElement.clientWidth",
+ document.documentElement.clientWidth
+ )
+
+ const len = document.documentElement.clientWidth - 4
+ let arr = [len, 0, 0, 0, 0, 0]
+ const flags = [
+ showTaskList,
+ showGroupList,
+ showDescList && projectDetail && projectDetail.label_type === 5,
+ showDescList && projectDetail && projectDetail.label_type === 6,
+ showDescList && projectDetail && projectDetail.label_type === 7,
+ showObjectList,
+ ]
+ let count = 0
+ flags.forEach((flag) => {
+ if (flag) count++
+ })
+ if (count === 1 || count === 2) {
+ arr[0] = count === 1 ? len * 0.8 : len * 0.6
+ flags.forEach((flag, index) => {
+ if (flag) {
+ arr[index + 1] = len * 0.2
+ }
+ })
+ } else if (count === 3) {
+ arr[0] = len * 0.55
+ flags.forEach((flag, index) => {
+ if (flag) {
+ arr[index + 1] = len * 0.15
+ }
+ })
+ } else if (count === 4) {
+ arr[0] = len * 0.6
+ flags.forEach((flag, index) => {
+ if (flag) {
+ arr[index + 1] = len * 0.1
+ }
+ })
+ }
+ setSizes(arr)
+ }, [projectDetail, showDescList, showGroupList, showObjectList, showTaskList])
+
+ useEffect(() => {
+ updateSplitterSizes()
+ }, [updateSplitterSizes])
+
+ useEffect(() => {
+ if (!isView) {
+ const delay = 10 * 60000
+ // 编辑模式下，修改labelData时启动或更新定时器
+ useTimerStore.getState().startTimer(() => {
+ useTopToolsStore.getState().setIsView(true)
+ }, delay)
+ } else {
+ useTimerStore.getState().clearTimer()
+ }
+
+ // 组件卸载时清理定时器
+ return () => {
+ useTimerStore.getState().clearTimer()
+ }
+ }, [isView, labelData])
+
+ // auto save
+ useEffect(() => {
+ let cancelled = false
+ if (autoSaveTimerRef.current !== null) {
+ clearTimeout(autoSaveTimerRef.current)
+ autoSaveTimerRef.current = null
+ }
+ if (!isAutoSave || isView) return
+
+ const minute = 60 * 1000
+ const delay = autoSaveGap * minute
+ const scheduleNext = () => {
+ autoSaveTimerRef.current = setTimeout(async () => {
+ if (cancelled) return
+ if (autoSaveInProgressRef.current) {
+ scheduleNext()
+ return
+ }
+ autoSaveInProgressRef.current = true
+ try {
+ await topRef.current?.handleSave?.()
+ } catch (error) {
+ console.error("[LabelNossr] auto save failed", error)
+ } finally {
+ autoSaveInProgressRef.current = false
+ if (!cancelled) scheduleNext()
+ }
+ }, delay)
+ }
+ scheduleNext()
+ return () => {
+ cancelled = true
+ if (autoSaveTimerRef.current !== null) {
+ clearTimeout(autoSaveTimerRef.current)
+ autoSaveTimerRef.current = null
+ }
+ }
+ }, [autoSaveGap, isAutoSave, isView])
+
+ useEffect(() => {
+ window.addEventListener("beforeunload", handleBeforeUnload)
+ return () => {
+ window.removeEventListener("beforeunload", handleBeforeUnload)
+ }
+ }, [])
+
+ const mainBoxHeight = useMemo(() => {
+ if (projectDetail?.label_type === 5 && metaOperation) {
+ let h = `calc(100% - ${headerHeight}px - 198px)`
+ return h
+ } else if (showMultiFrame) {
+ let h = `calc(100% - ${headerHeight}px - 150px)`
+ return h
+ }
+ let h = `calc(100% - ${headerHeight}px - 70px)`
+ return h
+ }, [projectDetail?.label_type, metaOperation, showMultiFrame, headerHeight])
+
+ const fullscreenRef = useRef(null)
+
+ return (
+
+ 0 && !hasReadyVideoFrame)}
+ zIndex={GLOBAL_LOADING_Z_INDEX}
+ overlayProps={{ radius: "sm", blur: 2 }}
+ />
+
+
+ {sourceVideoNames.length > 0 && (
+
+
+
+ )}
+
+
+ {/* */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {showTaskList && (
+
+
+
+ )}
+ {showGroupList && (
+
+
+
+ )}
+ {showDescList && projectDetail && projectDetail.label_type === 5 && (
+
+
+
+ )}
+ {showDescList && projectDetail && projectDetail.label_type === 6 && (
+
+
+
+ )}
+ {showObjectList && (
+
+
+
+ )}
+ {/* */}
+
+
+
+
+ {isConfirmSave && (
+ {
+ try {
+ await topRef.current?.handleSave()
+ setIsConfirmSave(false)
+ } catch {}
+ }}
+ onCancel={() => {
+ setIsConfirmSave(false)
+ }}
+ />
+ )}
+
+ )
+}
+
+export default LabelPage
diff --git a/components/label/OptStore.tsx b/components/label/OptStore.tsx
new file mode 100644
index 0000000..b1b0743
--- /dev/null
+++ b/components/label/OptStore.tsx
@@ -0,0 +1,114 @@
+"use client"
+import { getName } from "@tauri-apps/api/app"
+import { getCurrentWindow } from "@tauri-apps/api/window"
+import { usePathname } from "next/navigation"
+import { useEffect } from "react"
+import { getProjectAdminList } from "./api/project"
+import { getUserAll, getUserGroupTree } from "./api/user"
+import {
+ useAllTaskStore,
+ useAllUserStore,
+ usePermissionStore,
+} from "./store/auth"
+
+export function OptStore() {
+ const detectEnvironment = async () => {
+ try {
+ const result = await getName()
+ console.log("Running in Tauri environment", result)
+ return true
+ } catch {
+ console.log("Not running in Tauri environment")
+ return false
+ }
+ }
+ const user_id = usePermissionStore.getState().user_id
+ const { needUpdate, setUserOpts, setTreeData, setAdminOpts, setFlag } =
+ useAllUserStore()
+ const pathname = usePathname()
+
+ useEffect(() => {
+ if (user_id) {
+ const getData = async () => {
+ const res = await getUserAll()
+ setUserOpts(res)
+ const gRes = await getUserGroupTree()
+ const getTreeData = (data: any, parentHasDisabledChild = false) => {
+ let hasDisabledChild = parentHasDisabledChild
+
+ const newData: any = {
+ title: data.name,
+ value: data.id,
+ key: data.id,
+ children: [],
+ disabled: false,
+ }
+
+ if (data.members && data.members.length) {
+ data.members.forEach((member: any) => {
+ newData.children.push({
+ title: member.name,
+ value: member.id,
+ key: member.id,
+ })
+ })
+ }
+
+ if (data.children && data.children.length) {
+ data.children.forEach((child: any) => {
+ const childData = getTreeData(child, hasDisabledChild)
+ newData.children.push(childData)
+ if (childData.disabled) {
+ hasDisabledChild = true
+ }
+ })
+ }
+ if (
+ data.id.includes("-") &&
+ (!data.members || !data.members.length) &&
+ (!data.children || !data.children.length || hasDisabledChild)
+ ) {
+ newData.disabled = true
+ }
+
+ return newData
+ }
+ let arr: any[] = []
+ gRes.forEach((g: any) => {
+ arr.push(getTreeData(g))
+ })
+ const aRes = await getProjectAdminList()
+ setAdminOpts(aRes)
+ setTreeData(arr)
+ setFlag(false)
+ }
+ if (needUpdate) getData()
+ }
+ }, [user_id, setTreeData, setUserOpts, needUpdate, setFlag, setAdminOpts])
+
+ // 全局监听 重置项目详情中任务列表搜索缓存
+ useEffect(() => {
+ if (pathname !== "/project/info/detail" && pathname !== "/label") {
+ useAllTaskStore.getState().resetParams()
+ }
+ }, [pathname])
+
+ // tauri://close-requested
+ useEffect(() => {
+ ;(async () => {
+ if (await detectEnvironment()) {
+ const window = getCurrentWindow()
+ const unlisten = await window.onCloseRequested(async (_event) => {
+ usePermissionStore.getState().logout()
+ // event.preventDefault();
+ })
+
+ return () => {
+ unlisten()
+ }
+ }
+ })()
+ }, [])
+
+ return <>
+}
diff --git a/components/label/api/const.ts b/components/label/api/const.ts
new file mode 100644
index 0000000..25355ce
--- /dev/null
+++ b/components/label/api/const.ts
@@ -0,0 +1,4 @@
+export const BASE_LABEL_API =
+ process.env.NEXT_PUBLIC_ENV === "production"
+ ? "https://label.cowarobot.com"
+ : "https://label.softtest.cowarobot.com"
diff --git a/components/label/api/daily/index.ts b/components/label/api/daily/index.ts
new file mode 100644
index 0000000..b3011f9
--- /dev/null
+++ b/components/label/api/daily/index.ts
@@ -0,0 +1,49 @@
+import httpFetch from "@/api/fetch"
+import { Daily } from "./typing"
+import { BASE_LABEL_API } from "../const"
+
+export const getSelfDailyWorkList = (data: Daily.Request) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/daily_work/list/self",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+export const getTeamDailyWorkList = (data: Daily.Request) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/daily_work/list/team",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+export const addDailyWorkData = (data: Daily.CreateProps) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/daily_work/add",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+export const editDailyWorkData = (data: Daily.CreateProps, id: number) => {
+ return httpFetch({
+ url: BASE_LABEL_API + `/api/v1/label_server/daily_work/edit/${id}`,
+ method: "put",
+ body: JSON.stringify(data),
+ })
+}
+
+export const deleteDailyWorkData = (id: number) => {
+ return httpFetch({
+ url: BASE_LABEL_API + `/api/v1/label_server/daily_work/delete/${id}`,
+ method: "delete",
+ })
+}
+
+export const lockDailyWorkData = (lock_status: boolean, id: number) => {
+ return httpFetch({
+ url: BASE_LABEL_API + `/api/v1/label_server/daily_work/lock/${id}`,
+ method: "put",
+ body: JSON.stringify({ lock_status }),
+ })
+}
diff --git a/components/label/api/daily/typing.ts b/components/label/api/daily/typing.ts
new file mode 100644
index 0000000..df920ae
--- /dev/null
+++ b/components/label/api/daily/typing.ts
@@ -0,0 +1,84 @@
+export namespace Daily {
+ export interface Request {
+ date_end?: string
+ date_start?: string
+ /**
+ * 0-个人日报 1-团队日报
+ */
+ flag?: number
+ name?: string
+ order_by?: string
+ page_number?: number
+ page_size?: number
+ [property: string]: any
+ }
+
+ export interface Summary {
+ total_work_time: number
+ total_standard_size: number
+ total_completed_size: number
+ total_residual_size: number
+ total_residual_work_time: number
+ }
+
+ export interface Response {
+ daily_work_list: DailyWorkList[]
+ total_items: number
+ total_pages: number
+ total_summary: Summary
+ [property: string]: any
+ }
+
+ export interface DailyWorkList {
+ accounting_type?: string | null
+ actual_type?: string
+ completed_size?: number
+ date?: string
+ end_time?: string
+ id?: number
+ leader_name?: string | null
+ leader_uid?: number | null
+ lock_status?: boolean
+ obj_type?: number | null
+ performance_accounting?: boolean | null
+ project_id?: number | null
+ project_name?: string | null
+ rate?: number
+ remarks?: string | null
+ residual_pm?: boolean | null
+ residual_size?: number
+ residual_work_time?: number
+ set_type?: string
+ standard_size?: number
+ start_time?: string
+ uid?: number
+ username?: string
+ work_time?: number
+ work_type?: string | null
+ [property: string]: any
+ }
+
+ export interface CreateProps {
+ accounting_type?: string
+ actual_type: string
+ completed_size?: number
+ date: string
+ end_time?: string
+ leader_uid?: number
+ obj_type?: number
+ performance_accounting?: boolean
+ project_id?: number
+ rate?: number
+ remarks?: string
+ residual_pm?: boolean
+ residual_size?: number
+ residual_work_time?: number
+ set_type: string
+ standard_size?: number
+ start_time?: string
+ uid: number
+ work_time?: number
+ work_type?: string
+ [property: string]: any
+ }
+}
diff --git a/components/label/api/label/index.ts b/components/label/api/label/index.ts
new file mode 100644
index 0000000..d328016
--- /dev/null
+++ b/components/label/api/label/index.ts
@@ -0,0 +1,142 @@
+import httpFetch from "@/api/fetch"
+import { BASE_LABEL_API } from "../const"
+import {
+ LabelResult,
+ LoginInfo,
+ RequestLabelResult,
+ ServerResponse,
+} from "./typing"
+
+// 获取标注结果
+export const getLabelResult = (task_id: number) => {
+ return httpFetch<{
+ task_id: number
+ results: LabelResult[]
+ }>({
+ url:
+ BASE_LABEL_API +
+ `/api/v1/label_server/task/label_result?task_id=${task_id}`,
+ method: "GET",
+ })
+}
+
+export const saveLabelResult = (data: RequestLabelResult) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/task/label_result",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+export const getServerImage = async (data: {
+ data_names: string[]
+ /**
+ * 0-图片 1-点云 2-视频
+ */
+ data_type: number
+ flag?: number
+ project_id: number
+}) => {
+ const res = await httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/data/list",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+
+ if (res.proxy) {
+ throw new Error(`get_data_list requires proxy=${res.proxy}`)
+ }
+
+ const first = res.data_list?.[0]
+ if (!first) {
+ throw new Error(
+ `get_data_list empty data_list, data_name=${data.data_names?.[0] || ""}`
+ )
+ }
+
+ const payload =
+ data.data_type === 0
+ ? first.image_data
+ : data.data_type === 2
+ ? first.video_data
+ : first.pointcloud_data
+
+ if (payload == null) {
+ throw new Error(
+ `get_data_list missing payload type=${data.data_type}, data_name=${first.data_name || data.data_names?.[0] || ""}`
+ )
+ }
+ if (typeof payload === "string" && !payload.trim()) {
+ throw new Error(
+ `get_data_list empty payload type=${data.data_type}, data_name=${first.data_name || data.data_names?.[0] || ""}`
+ )
+ }
+
+ return payload
+ // .catch(async ({ proxy, params }) => {
+ // try {
+ // const res = await httpFetch({
+ // url: `/http://${proxy}:9112/api/v1/label_sync/get_data_list`,
+ // method: "POST",
+ // body: JSON.stringify(params),
+ // })
+ // return res.data.data_list?.[0].image_data || ""
+ // } catch (error: unknown) {
+ // console.log(error)
+ // const res = await httpFetch({
+ // url: BASE_LABEL_API + "/api/v1/label_server/data/list",
+ // method: "POST",
+ // body: JSON.stringify({ ...params, flag: 1 }),
+ // })
+ // return res.data_list?.[0].image_data || ""
+ // }
+ // })
+}
+
+// 获取标注图片
+export const getLabelImage = (activeImage: string, path: string) => {
+ return httpFetch({
+ url:
+ BASE_LABEL_API +
+ `/api/v1/label_server/data/image?data_name=${encodeURIComponent(
+ activeImage
+ )}&project_path=${encodeURIComponent(path)}`,
+ method: "GET",
+ headerAttr: {
+ responseType: "blob",
+ },
+ })
+}
+
+// 辅助标注
+export const getAuxiliaryAnnotation = (data: any) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/model_server/sam2/sa",
+ method: "POST",
+ body: JSON.stringify(data),
+ headerAttr: {
+ responseType: "arraybuffer",
+ },
+ })
+}
+
+// 模型标注 追踪
+export const getTrackingAuxiliaryAnnotation = (data: any) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/model_server/sam2/vos",
+ method: "POST",
+ body: JSON.stringify(data),
+ headerAttr: {
+ responseType: "arraybuffer",
+ },
+ })
+}
+
+// 用户登录
+export const userLogin = (data: { name: string; password: string }) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/user/login",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
diff --git a/components/label/api/label/typing.ts b/components/label/api/label/typing.ts
new file mode 100644
index 0000000..5d41646
--- /dev/null
+++ b/components/label/api/label/typing.ts
@@ -0,0 +1,171 @@
+export interface LabelResult {
+ data_name: string
+ image_objects?: ImageObjects
+ video_objects?: {
+ [key: string]: ImageObjects
+ }
+ pc_box_objects?: { [key: string]: any }[]
+ pc_segment_objects?: { [key: string]: any }[]
+ pc_vegetation_objects?: { [key: string]: any }[]
+}
+
+export interface ImageObjects {
+ annotations: Annotation[]
+ categories: Category[]
+ desc?: Desc
+ image_groups: ImageGroups
+ images: Images
+ key_frame?: boolean
+ label1_ts?: number
+ label1_uid?: number
+ review1_ts?: number
+ review1_uid?: number
+ review2_ts?: number
+ review2_uid?: number
+}
+
+export interface Annotation {
+ bbox?: number[]
+ category_id: number
+ comment?: Comment[]
+ create_timestamp: number
+ first_modified_timestamp: number
+ first_modified_uid: number
+ hollow_segmentation?: Array>
+ id: number
+ image_id: number
+ key_points?: KeyPoint[]
+ last_modified_timestamp: number
+ last_modified_uid: number
+ line_segment?: Array>
+ prelabel: boolean
+ rect?: number[]
+ segmentation?: Array>
+ sub_attributes?: { [key: string]: any }
+ uid: number
+}
+
+export interface Comment {
+ check_box_comments: string[]
+ comment_type: number
+ date: number
+ scene_info: SceneInfo
+ text_comments: string[]
+ times: number
+ turn: number
+ uid: number
+}
+
+export interface SceneInfo {
+ phi?: number
+ point_idx?: number[]
+ theta?: number
+ type: number
+ vfov_factor?: number
+ x?: number
+ x_offset?: number
+ y?: number
+ y_offset?: number
+ z?: number
+ zoom?: number
+}
+
+export interface KeyPoint {
+ attributes?: { [key: string]: any }
+ point: [number, number]
+}
+
+export interface Category {
+ id: number
+ name: string
+ supercategory: string
+}
+
+export interface Desc {
+ meta_operation: string[]
+ other_desc: string
+}
+
+export interface ImageGroups {
+ // "01J4GZMQ2G8KKQVF52S6EXBGRA": string;
+}
+
+export interface Images {
+ file_name: string
+ height: number
+ id: number
+ width: number
+}
+
+export interface RequestLabelResult {
+ label_object_size: { [key: string]: any }
+ results: LabelResult[]
+ task_id: number
+ uid: number
+ work_load: WorkLoad
+ work_time: { [key: string]: any }
+}
+
+export interface WorkLoad {
+ comment_size: number
+ dynamic_size: { [key: number]: number }
+ key_frame_size: { [key: number]: number }
+ object_size: { [key: number]: number }
+ prelabel_modify_size: { [key: number]: number }
+ question_size: { [key: number]: number }
+ review_dynamic_size: { [key: number]: number }
+ review_key_frame_size: { [key: number]: number }
+ review_question_size: { [key: number]: number }
+ review_size: number
+ review_static_size: { [key: number]: number }
+ static_size: { [key: number]: number }
+ work_time: number
+}
+
+export interface ServerResponse {
+ data_list?: DataList[]
+ proxy?: string
+ [property: string]: any
+}
+
+export interface DataList {
+ data_name: string
+ data_type: string
+ image_data?: string
+ video_data?: string
+ pointcloud_data?: PointcloudDatum[]
+ [property: string]: any
+}
+
+export interface PointcloudDatum {
+ intensity: number
+ time_offset: number
+ x: number
+ y: number
+ z: number
+ [property: string]: any
+}
+
+export interface AuxiliaryParams {
+ project_id: number
+ file_name: string
+ image_hw: [number, number]
+ points_and_box: Array<[number, number]>
+ tags: number[]
+ clear_previous_state?: boolean
+}
+
+interface UserInfo {
+ uid: number
+ name: string
+ all_projects: { [x: number]: number[] }
+ collect_projects: number[]
+ group_name: string
+ work_status: number
+ base_city: string
+}
+
+export interface LoginInfo extends UserInfo {
+ token: string
+ refresh_token: string
+}
diff --git a/components/label/api/project/index.ts b/components/label/api/project/index.ts
new file mode 100644
index 0000000..efdb526
--- /dev/null
+++ b/components/label/api/project/index.ts
@@ -0,0 +1,198 @@
+import httpFetch from "@/api/fetch"
+import { Project, ProjectDetail, ReviewUsers } from "./typing"
+import { BASE_LABEL_API } from "../const"
+
+// 获取项目列表
+export const getProjectList = (data: Project.ListRequest) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/project/list",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 获取项目详情
+export const getProjectDetailById = (id: number) => {
+ return httpFetch({
+ url: BASE_LABEL_API + `/api/v1/label_server/project/detail/${id}`,
+ method: "GET",
+ })
+}
+
+// 校验项目源数据
+export const checkLabelDataSource = (data: Project.CheckRequest) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/project/check_data",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 创建项目
+export const projectAdd = (data: Project.CreateProps) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/project/add",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 审核项目
+export const projectReview = (data: Project.CreateProps) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/project/review",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 配置项目
+export const projectConfig = (data: Project.ConfigProps) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/project/config",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 编辑项目
+export const projectEditById = (data: any, id: number) => {
+ return httpFetch({
+ url: BASE_LABEL_API + `/api/v1/label_server/project/edit/${id}`,
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 审核试标项目
+export const projectPreLabelReview = (data: Project.PreLabelProps) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/project/prototype_review",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 提交验收
+export const projectDeliver = (data: { project_id: number }) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/project/deliver",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 完成项目
+export const projectAccept = (data: { project_id: number; pass: boolean }) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/project/accept",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 收藏项目
+export const projectCollect = (data: {
+ project_id: number
+ is_collect: boolean
+}) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/project/collect",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 获取项目抽检比例
+export const getReviewScaleList = (params: { project_id: number }) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/review_scale/list",
+ method: "GET",
+ data: params,
+ })
+}
+
+// 保存抽检比例
+export const saveUserReviewScale = (data: Project.ReviewScaleProps) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/review_scale/save",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+export const getProjectDetail = (id: number) => {
+ return httpFetch({
+ url: BASE_LABEL_API + `/api/v1/label_server/project/detail/${id}`,
+ method: "GET",
+ })
+}
+
+// 重新生成Embedding
+export const regenerateProjectEmbedding = (data: { project_id: number }) => {
+ return httpFetch({
+ url: BASE_LABEL_API + `/api/v1/label_server/project/regenerate_embedding`,
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 获取个人参与项目
+export const getPersonProjectDashBoard = () => {
+ return httpFetch>({
+ url:
+ BASE_LABEL_API + `/api/v1/label_server/data_statistics/personal_project`,
+ method: "GET",
+ })
+}
+
+// 获取个人看板数据
+export const getCurrentPersonData = (params: { date: string }) => {
+ return httpFetch<{
+ label_data_size: number
+ label_work_time: number
+ review1_data_size: number
+ review1_work_time: number
+ review2_data_size: number
+ review2_work_time: number
+ }>({
+ url:
+ BASE_LABEL_API +
+ "/api/v1/label_server/data_statistics/personal_dashboard",
+ method: "GET",
+ data: params,
+ })
+}
+
+/* ****************************** Options ****************************** */
+// 获取项目所属业务列表
+export const getProjectTypeList = () => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/project/type_list",
+ method: "GET",
+ })
+}
+
+// 获取项目管理员列表
+export const getProjectAdminList = () => {
+ return httpFetch>({
+ url: BASE_LABEL_API + "/api/v1/label_server/project/admin_list",
+ method: "GET",
+ })
+}
+
+// 获取项目审核员
+export const getProjectReviewers = () => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/project/reviewer_map",
+ method: "GET",
+ })
+}
+
+// 获取用户有权限的项目
+export const getSelfProjectList = () => {
+ return httpFetch>({
+ url: BASE_LABEL_API + "/api/v1/label_server/project/self",
+ method: "GET",
+ })
+}
diff --git a/components/label/api/project/typing.ts b/components/label/api/project/typing.ts
new file mode 100644
index 0000000..a3b8e42
--- /dev/null
+++ b/components/label/api/project/typing.ts
@@ -0,0 +1,474 @@
+export namespace Project {
+ export interface DataProps {
+ key: React.Key
+ id: number // 项目ID
+ name: string // 项目名称
+ is_collect: boolean // 是否收藏
+ project_type?: string // 所属业务
+ label_schema_name?: string // 标注方案
+ label_schema_version?: string
+ status: number // 项目状态
+ labeled_scale?: number // 标注完成比例
+ reviewed_scale?: number // 审核完成比例
+ data_size?: number // 总数据量
+ rate_speed?: number // 额定倍速
+ create_user: string // 创建人
+ owner: string // 项目负责人
+ label_process?: string[] // 工序
+ admin_user: number[] // 标注管理员id
+ data_source?: string // 数据源
+ remarks?: string // 备注
+ // reviewer_user?: string; // 审核人
+ // reviewer_comment?: string; // 审核意见
+ create_at?: string // 创建时间
+ update_at?: string // 更新时间
+ modify?: number //0=可以发起变更，无变更 1=正在变更，无变更 2=可以发起变更，有变更 3=正在变更，有变更
+ }
+
+ export interface CheckRequest {
+ project_type: string
+ nfs_path: string
+ flag: number
+ }
+
+ export interface CheckResponse {
+ data_size: number
+ error_code: number
+ }
+
+ export interface CreateProps {
+ admin_user: string[]
+ create_user: string
+ data_size: number
+ data_source: string
+ label_schema_name: string
+ label_schema_version: string
+ project_name: string
+ project_type: string
+ related_task?: number[]
+ remarks?: string
+ [property: string]: any
+ }
+
+ export interface ReviewProps {
+ pass: boolean
+ project_id: number
+ project_name: string
+ review_comment?: string
+ review_user: string
+ test_proportion?: number
+ }
+
+ export interface ListRequest {
+ admin_user?: string
+ create_user?: string
+ end_date?: string
+ page_number: number
+ page_size: number
+ project_id?: number
+ project_name?: string
+ project_type?: string
+ review_user?: string
+ start_date?: string
+ status?: number[]
+ [property: string]: any
+ }
+
+ export interface ListResponse {
+ project_list: DataProps[]
+ total_pages: number
+ total_items: number
+ }
+
+ export interface LabelConfig {
+ acquire_mode: number
+ acquire_size: number
+ avg_remind_threshold: number
+ dynamic_label_speed: number
+ filter_pre_label: boolean
+ fix_remind_threshold: number
+ label_accuracy_rate: number
+ label_update_month: number
+ max_size: number
+ pre_label_confirm: boolean
+ static_label_speed: number
+ }
+
+ export interface Review1Config {
+ acquire_mode: number
+ acquire_size: number
+ dynamic_review1_speed: number
+ end_date?: string
+ filter_label_first_sub: boolean
+ filter_objs: boolean
+ filter_rework: boolean
+ filter_task_batch: boolean
+ filter_track_user: boolean
+ is_rework?: boolean
+ label_first_sub_end_date?: string
+ label_first_sub_start_date?: string
+ max_objs?: number
+ max_size: number
+ min_objs?: number
+ review1_accuracy_rate: number
+ review1_update_month: number
+ start_date?: string
+ static_review1_speed: number
+ track_user_list?: number[]
+ }
+
+ export interface Review2Config {
+ acquire_mode: number
+ acquire_size: number
+ dynamic_review2_speed: number
+ end_date?: string
+ filter_objs: boolean
+ filter_review1_first_sub: boolean
+ filter_review1_user: boolean
+ filter_rework: boolean
+ filter_task_batch: boolean
+ filter_track_user: boolean
+ is_rework?: boolean
+ max_objs?: number
+ max_size: number
+ min_objs?: number
+ review1_first_sub_end_date?: string
+ review1_first_sub_start_date?: string
+ review1_user_list?: number[]
+ review2_update_month: number
+ start_date?: string
+ static_review2_speed: number
+ track_user_list?: number[]
+ }
+
+ export interface ConfigProps {
+ admin_user?: number[]
+ check_frame?: boolean
+ check_task?: boolean
+ comment_rule?: { [key: string]: any }
+ default_pose?: string
+ is_lock_object?: boolean
+ label_config?: LabelConfig
+ label_users?: number[]
+ modifiable_types?: string[]
+ project_id: number
+ project_name?: string
+ project_remark?: string
+ review1_config?: Review1Config
+ review1_users?: number[]
+ review2_config?: Review2Config
+ review2_users?: number[]
+ user_grade?: { [key: string]: any }
+ }
+
+ // 试标审核
+ export interface PreLabelProps {
+ id: number
+ review_user: string
+ action: number // 1-试标完成，2-试标通过，3-试标不通过
+ detail?: string
+ }
+
+ export interface ReviewScaleProps {
+ frame_scale?: number
+ grade?: string
+ project_id: number
+ task_scale?: number
+ uids: number[]
+ }
+ /**
+ * DetailResponse
+ */
+ export interface DetailResponse {
+ admin_user: string[]
+ alarm_threshold: AlarmThreshold
+ check_frame: boolean
+ check_task: boolean
+ comment_rule: CommentRule
+ create_at: string
+ create_user: string
+ data_size: number
+ default_pose: null
+ id: number
+ is_lock_object: boolean
+ label_process: LabelProcess
+ label_schema_list: LabelSchemaList[]
+ label_type: number
+ labeled_multiplier: LabeledMultiplier
+ modifiable_types: string[]
+ name: string
+ project_progress: ProjectProgress
+ remarks: string
+ rpath: string
+ status: number
+ task_size: number
+ user_grade: UserGrade
+ }
+
+ export interface AlarmThreshold {
+ avg_remind_threshold: number
+ fix_remind_threshold: number
+ }
+
+ export interface CommentRule {
+ check_box_rules: {
+ create_date: string
+ create_user: string
+ text: string
+ }[]
+ text_rules: string[]
+ }
+
+ export interface LabelProcess {
+ filter_pre_label: boolean
+ filter_task_info: string[]
+ pre_label_confirm: boolean
+ step_detail: StepDetail[]
+ }
+
+ export interface StepDetail {
+ acquire_mode: number
+ acquire_size: number
+ action: number
+ max_size: number
+ user_list: number[]
+ }
+
+ export interface LabelSchemaList {
+ bbox_range: number[]
+ bbox_size: number[]
+ bbox_type: number
+ category_id: number
+ color: [number, number, number]
+ label_class: string
+ label_type: number
+ radius: number
+ sensor_list: string[]
+ sub_attributes: string[]
+ sub_attributes_describe: SubAttributesDescribe[]
+ super_category: string
+ }
+
+ export interface SubAttributesDescribe {
+ chinese_name: string
+ english_name: string
+ isrequired: number
+ optional_item: string[]
+ round_id: number
+ select_mode: number
+ }
+
+ export interface LabeledMultiplier {
+ dynamic_label_speed: null
+ dynamic_review1_speed: null
+ dynamic_review2_speed: null
+ label_accuracy_rate: null
+ label_update_month: null
+ review1_accuracy_rate: null
+ review1_update_month: null
+ review2_update_month: null
+ static_label_speed: null
+ static_review1_speed: null
+ static_review2_speed: null
+ }
+
+ export interface ProjectProgress {
+ normal_labeled_task_size: number
+ normal_reviewed1_task_size: number
+ normal_reviewed2_task_size: number
+ rework_labeled_task_size: number
+ rework_reviewed1_task_size: number
+ rework_reviewed2_task_size: number
+ unlabeled_task_size: number
+ }
+
+ export interface UserGrade {
+ A: {
+ frame: number
+ task: number
+ }
+ B: {
+ frame: number
+ task: number
+ }
+ C: {
+ frame: number
+ task: number
+ }
+ }
+ /**
+ * DetailResponse
+ */
+
+ export interface PersonProjectDashboardResponseItem {
+ project_id: number
+ project_label_type: string
+ project_name: string
+ project_type: string
+ work_time: number
+ }
+}
+
+export interface ReviewUsers {
+ reviewer1: string[]
+ reviewer2: string[]
+ reviewer3: string[]
+}
+
+export namespace ProjectDetail {
+ export interface DataProps {
+ admin_user: number[]
+ alarm_threshold: AlarmThreshold
+ check_frame: boolean
+ check_task: boolean
+ comment_rule: CommentRule
+ create_at: string
+ create_user: string
+ data_size: number
+ default_pose: null
+ id: number
+ is_lock_object: boolean
+ label_process: LabelProcess
+ label_schema_list: LabelSchemaList[]
+ label_type: number
+ labeled_multiplier: LabeledMultiplier
+ modifiable_types: string[]
+ name: string
+ project_progress: ProjectProgress
+ remarks: string
+ rpath: string
+ status: number
+ task_size: number
+ user_grade: UserGrade
+ [property: string]: any
+ }
+
+ export interface AlarmThreshold {
+ avg_remind_threshold: number
+ fix_remind_threshold: number
+ [property: string]: any
+ }
+
+ export interface CommentRule {
+ check_box_rules: string[]
+ text_rules: string[]
+ [property: string]: any
+ }
+
+ export interface LabelProcess {
+ filter_pre_label: boolean
+ filter_task_info: FilterTaskInfo[]
+ pre_label_confirm: boolean
+ step_detail: StepDetail[]
+ [property: string]: any
+ }
+
+ export interface FilterTaskInfo {
+ action: number
+ end_date: string
+ filter_label_first_sub: boolean
+ filter_objs: boolean
+ filter_review1_first_sub: boolean
+ filter_review1_user: boolean
+ filter_rework: boolean
+ filter_task_batch: boolean
+ filter_track_user: boolean
+ is_rework: boolean
+ label_first_sub_end_date: string
+ label_first_sub_start_date: string
+ max_objs: number
+ min_objs: number
+ review1_first_sub_end_date: string
+ review1_first_sub_start_date: string
+ review1_user_list: number[]
+ start_date: string
+ track_user_list: number[]
+ [property: string]: any
+ }
+
+ export interface StepDetail {
+ acquire_mode: number
+ acquire_size: number
+ action: number
+ max_size: number
+ user_list: number[]
+ [property: string]: any
+ }
+
+ export interface LabelSchemaList {
+ bbox_range: number[]
+ bbox_size: number[]
+ bbox_type: number
+ category_id: number
+ color: number[]
+ label_class: string
+ label_type: number
+ radius: number
+ sensor_list: string[]
+ sub_attributes: string[]
+ sub_attributes_describe: SubAttributesDescribe[]
+ super_category: string
+ [property: string]: any
+ }
+
+ export interface SubAttributesDescribe {
+ chinese_name: string
+ english_name: string
+ isrequired: number
+ optional_item: string[]
+ round_id: number
+ select_mode: number
+ [property: string]: any
+ }
+
+ export interface LabeledMultiplier {
+ dynamic_label_speed: number
+ dynamic_review1_speed: number
+ dynamic_review2_speed: number
+ label_accuracy_rate: number
+ label_update_month: number
+ review1_accuracy_rate: number
+ review1_update_month: number
+ review2_update_month: number
+ static_label_speed: number
+ static_review1_speed: number
+ static_review2_speed: number
+ [property: string]: any
+ }
+
+ export interface ProjectProgress {
+ normal_labeled_task_size: number
+ normal_reviewed1_task_size: number
+ normal_reviewed2_task_size: number
+ rework_labeled_task_size: number
+ rework_reviewed1_task_size: number
+ rework_reviewed2_task_size: number
+ unlabeled_task_size: number
+ [property: string]: any
+ }
+
+ export interface UserGrade {
+ A: A
+ B: B
+ C: C
+ [property: string]: any
+ }
+
+ export interface A {
+ frame: number
+ task: number
+ [property: string]: any
+ }
+
+ export interface B {
+ frame: number
+ task: number
+ [property: string]: any
+ }
+
+ export interface C {
+ frame: number
+ task: number
+ [property: string]: any
+ }
+}
diff --git a/components/label/api/scheme/index.ts b/components/label/api/scheme/index.ts
new file mode 100644
index 0000000..445f9fd
--- /dev/null
+++ b/components/label/api/scheme/index.ts
@@ -0,0 +1,61 @@
+import httpFetch from "@/api/fetch"
+import { Scheme } from "./typing"
+import { BASE_LABEL_API } from "../const"
+
+// 获取标注方案列表
+export const getLabelSchemeList = (params: Scheme.ListRequest) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/label_schema/list",
+ method: "GET",
+ data: params,
+ })
+}
+
+// 新增标注方案
+export const addNewPlan = (data: Scheme.CreateProps) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/label_schema/add",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 获取某一标注方案版本列表
+export const getAllVersionByName = (name: string) => {
+ return httpFetch({
+ url:
+ BASE_LABEL_API +
+ `/api/v1/label_server/label_schema/version/list?name=${name}`,
+ method: "GET",
+ })
+}
+
+// 删除标注方案
+export const deleteLabelPlan = (data: { name: string; version?: string }) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/label_schema/delete",
+ method: "delete",
+ body: JSON.stringify(data),
+ })
+}
+
+// 保存错词库
+export const saveWrongWordList = (data: {
+ data: { error: string; correct: string }[]
+}) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/error_repository/save",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 查询错词库
+export const getWrongWordList = () => {
+ return httpFetch<{
+ data: { error: string; correct: string }[]
+ }>({
+ url: BASE_LABEL_API + "/api/v1/label_server/error_repository/query",
+ method: "GET",
+ })
+}
diff --git a/components/label/api/scheme/typing.ts b/components/label/api/scheme/typing.ts
new file mode 100644
index 0000000..3c32728
--- /dev/null
+++ b/components/label/api/scheme/typing.ts
@@ -0,0 +1,45 @@
+export namespace Scheme {
+ export interface ListRequest {
+ create_user?: string
+ end_date?: string
+ name?: string
+ page_number?: number
+ page_size?: number
+ start_date?: string
+ }
+
+ interface ListDataProps {
+ name: string
+ create_at: string
+ create_user: string
+ version_size: number
+ }
+
+ export interface ListResponse {
+ label_schema_list: ListDataProps[]
+ number_of_items: number
+ number_of_pages: number
+ }
+
+ export interface CreateProps {
+ create_user: string
+ flag: number // 0-新增标注方案 1-新增标注方案版本
+ json: any[]
+ name: string
+ version: string
+ version_desc: string
+ }
+
+ interface VersionListDataProps {
+ id: number
+ version: string
+ version_desc: string
+ create_at: string
+ create_user: string
+ json: any[]
+ }
+
+ export interface VersionListResponse {
+ label_schema_version_list: VersionListDataProps[]
+ }
+}
diff --git a/components/label/api/sync/index.ts b/components/label/api/sync/index.ts
new file mode 100644
index 0000000..f85717a
--- /dev/null
+++ b/components/label/api/sync/index.ts
@@ -0,0 +1,66 @@
+import httpFetch from "@/api/fetch"
+import { BASE_LABEL_API } from "../const"
+import { Params, Response } from "./typing"
+
+// 获取同步服务列表
+export const getDataSyncServerList = (params: Params.ServerRequest) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/data_sync/list",
+ method: "GET",
+ data: params,
+ })
+}
+
+// 更新同步服务所在地
+export const updateSyncServerLocation = (location: string, id: number) => {
+ return httpFetch({
+ url: BASE_LABEL_API + `/api/v1/label_server/data_sync/update/${id}`,
+ method: "PUT",
+ body: JSON.stringify({ location }),
+ })
+}
+
+// 获取所有同步服务
+export const getAllSyncServerList = () => {
+ return httpFetch<
+ {
+ id: number
+ ip: string
+ is_online: 0 | 1
+ }[]
+ >({
+ url: BASE_LABEL_API + "/api/v1/label_server/data_sync/all",
+ method: "GET",
+ })
+}
+
+// 获取同步任务列表
+export const getDataSyncTaskList = (params: Params.TaskRequest) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/data_sync/sync_task_list",
+ method: "GET",
+ data: params,
+ })
+}
+
+// 新增同步任务
+export const newSyncTask = (data: {
+ project_id: number
+ sync_server_id: number
+}) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/data_sync/add_sync_task",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 更新同步任务状态
+export const updateSyncTaskStatus = (id: number, status: number) => {
+ return httpFetch({
+ url:
+ BASE_LABEL_API + `/api/v1/label_server/data_sync/update_sync_task/${id}`,
+ method: "PUT",
+ body: JSON.stringify({ status }),
+ })
+}
diff --git a/components/label/api/sync/typing.ts b/components/label/api/sync/typing.ts
new file mode 100644
index 0000000..1bc9ea6
--- /dev/null
+++ b/components/label/api/sync/typing.ts
@@ -0,0 +1,64 @@
+export interface TimeFilter {
+ start_date: string
+ end_date: string
+}
+
+export namespace Params {
+ export interface ServerRequest {
+ is_online?: boolean
+ location?: string
+ page_number: number
+ page_size: number
+ [property: string]: any
+ }
+
+ export interface TaskRequest {
+ location?: string
+ page_number: number
+ page_size: number
+ project_id?: number
+ status?: number
+ sync_server_id?: number
+ [property: string]: any
+ }
+}
+
+export namespace Response {
+ export interface SyncServerRes {
+ sync_servers: SyncServer[]
+ total_items: number
+ total_pages: number
+ [property: string]: any
+ }
+
+ export interface SyncServer {
+ create_at?: string
+ id?: number
+ ip?: string
+ is_online?: boolean
+ location?: string
+ update_at?: string
+ [property: string]: any
+ }
+
+ export interface SyncTaskRes {
+ sync_tasks: SyncTask[]
+ total_items: number
+ total_pages: number
+ [property: string]: any
+ }
+
+ export interface SyncTask {
+ create_at?: string
+ id?: number
+ ip?: string
+ location?: string
+ project_id?: number
+ project_name?: string
+ status?: number
+ sync_server_id?: number
+ update_at?: string
+ uuid?: string
+ [property: string]: any
+ }
+}
diff --git a/components/label/api/task/index.ts b/components/label/api/task/index.ts
new file mode 100644
index 0000000..a02c752
--- /dev/null
+++ b/components/label/api/task/index.ts
@@ -0,0 +1,77 @@
+import httpFetch from "@/api/fetch"
+import { Task } from "./typing"
+import { BASE_LABEL_API } from "../const"
+
+// 获取任务列表
+export const getTaskList = (data: Task.ListRequest) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/task/list",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 领取任务
+export const taskAcquire = (data: Task.AcquireReqProps) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/task/acquire",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 调度任务
+export const taskDispatch = (data: Task.DispatchReqProps) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/task/dispatch",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 释放任务
+export const taskRelease = (data: Task.ReleaseReqProps) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/task/release",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 获取下一个任务
+export const getNextTaskId = (data: Task.NextReqProps) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/task/next",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 提交任务
+export const taskCommit = (data: Task.CommitReqProps) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/task/commit",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 获取任务的工作流程
+export const getTaskWorkFlow = (id: number) => {
+ return httpFetch({
+ url: BASE_LABEL_API + `/api/v1/label_server/task/workflow/${id}`,
+ method: "GET",
+ })
+}
+
+// 获取个人任务列表
+export const getUserTaskList = (params: {
+ page_size: number
+ page_number: number
+}) => {
+ return httpFetch({
+ url: BASE_LABEL_API + `/api/v1/label_server/task/list_by_user`,
+ method: "GET",
+ data: params,
+ })
+}
diff --git a/components/label/api/task/typing.ts b/components/label/api/task/typing.ts
new file mode 100644
index 0000000..3ca89f2
--- /dev/null
+++ b/components/label/api/task/typing.ts
@@ -0,0 +1,179 @@
+export namespace Task {
+ export interface DataProps {
+ id: number
+ create_date: string
+ data_type?: number
+ data_name: {
+ name: [string]
+ related_images: []
+ }[]
+ project_id: number
+ project_name: string
+ project_uuid: string
+ label_status: number
+ current_uid?: number
+ current_username?: string
+ label_user?: number
+ label_username?: string
+ review_user1?: number
+ review1_username?: string
+ review_user2?: number
+ review2_username?: string
+ rejected: boolean
+ work_time: {
+ label_work_time: number
+ first_review_work_time: number
+ second_review_work_time: number
+ }
+ label_object_size: {
+ object_size: number
+ valid_size: number
+ first_comment_size: number
+ second_comment_size: number
+ new_size: number
+ prelabel_size: number
+ prelabel_modify_size: number
+ dynamic_size: number
+ static_size: number
+ review_size: number
+ review_dynamic_size: number
+ review_static_size: number
+ key_frame_size: number
+ question_size: number
+ total_qa_group_size: number
+ single_qa_group_size: number
+ multiple_qa_group_size: number
+ new_qa_group_size: number
+ new_single_qa_group_size: number
+ new_multiple_qa_group_size: number
+ review_question_size: number
+ comment_question_size: number
+ }
+ first_commit_label_time?: string
+ first_commit_review1_time?: string
+ reject_times: number
+ review_rate: {
+ review1_rate: number
+ review2_rate: number
+ }
+ label_first_work_time: number
+ review1_first_work_time: number
+ review2_first_work_time: number
+ first_reject_label_time?: string
+ }
+
+ export interface ListRequest {
+ data_type?: number
+ current_uid?: number[]
+ data_name?: string
+ first_commit_label_time_end?: string
+ first_commit_label_time_start?: string
+ first_commit_review1_time_end?: string
+ first_commit_review1_time_start?: string
+ get_data: boolean
+ id?: number[]
+ label_status?: number[]
+ label_user?: number[]
+ order_by?: string
+ page_number: number
+ page_size: number
+ project_id?: number[]
+ rejected?: number
+ review_user1?: number[]
+ review_user2?: number[]
+ }
+
+ export interface SizeProps {
+ object_size: number
+ valid_size: number
+ first_comment_size: number
+ second_comment_size: number
+ new_size: number
+ prelabel_size: number
+ prelabel_modify_size: number
+ dynamic_size: number
+ static_size: number
+ review_size: number
+ review_dynamic_size: number
+ review_static_size: number
+ key_frame_size: number
+ question_size: number
+ total_qa_group_size: number
+ single_qa_group_size: number
+ multiple_qa_group_size: number
+ new_qa_group_size: number
+ new_single_qa_group_size: number
+ new_multiple_qa_group_size: number
+ review_question_size: number
+ comment_question_size: number
+ }
+
+ export interface ListResponse {
+ task_list: DataProps[]
+ total_items: number
+ total_pages: number
+ total_size: SizeProps
+ }
+
+ export interface AcquireReqProps {
+ uid: number
+ project_id: number
+ label_action: 1 | 2 | 3 // 1-领取标注任务 2-领取审核任务 3-领取复审任务
+ }
+
+ export interface DispatchReqProps {
+ operation_uid: number
+ reject: boolean
+ task_ids: number[]
+ task_status_dst: number
+ task_status_src: number
+ uid_dst: number | null
+ uid_src: number | null
+ }
+
+ export interface ReleaseReqProps {
+ operation_uid: number
+ reject: boolean
+ task_ids: number[]
+ task_status: number
+ uid: number
+ }
+
+ export interface NextReqProps {
+ project_id: number
+ task_status: number
+ rejected: boolean
+ last_task_id: number
+ }
+
+ export interface NextResProps {
+ project_id: number
+ task_id: number | null
+ }
+
+ export interface CommitReqProps {
+ task_id: number
+ uid: number
+ commit_action: number //1-提交标注 2-提交审核1 3-提交审核2 4-驳回 5-无法标注
+ work_time: number
+ comment_question_size?: number
+ }
+
+ export interface ResGetUserTaskList {
+ simple_task_list: SimpleTaskItem[]
+ total_items: number
+ total_pages: number
+ }
+
+ export interface SimpleTaskItem {
+ id: number
+ label_status: number
+ label_type: number
+ label_username?: string
+ project_id: number
+ project_name: string
+ rejected: boolean
+ review1_username?: string
+ review2_username?: string
+ }
+}
diff --git a/components/label/api/user/index.ts b/components/label/api/user/index.ts
new file mode 100644
index 0000000..50de510
--- /dev/null
+++ b/components/label/api/user/index.ts
@@ -0,0 +1,98 @@
+import httpFetch from "@/api/fetch"
+import { BASE_LABEL_API } from "../const"
+import { Organization, User } from "./typing"
+
+// 获取用户列表
+export const getUserList = (data: User.ListRequest) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/user/list",
+ method: "POST",
+ body: JSON.stringify({ ...data, tenant: "cowarobot" }),
+ })
+}
+
+// 新增用户
+export const userAdd = (data: User.CreateProps) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/user/add",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 批量导入用户
+export const userImport = (data: { user_infos: any[] }) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/user/batch_add",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 编辑用户
+export const userEditById = (data: User.EditProps, id: number) => {
+ return httpFetch({
+ url: BASE_LABEL_API + `/api/v1/label_server/user/edit/${id}`,
+ method: "PUT",
+ body: JSON.stringify(data),
+ })
+}
+
+// 编辑用户组织
+export const userUpdateGroup = (data: User.UpdateGroupProps) => {
+ return httpFetch({
+ url: BASE_LABEL_API + `/api/v1/label_server/user/update/group`,
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 获取用户组织树
+export const getUserGroupTree = () => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/user/group/tree",
+ method: "GET",
+ })
+}
+
+// 新增用户组
+export const userGroupAdd = (data: Organization.CreateProps) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/user/group/add",
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+}
+
+// 修改用户密码
+export const modifyUserPassword = (data: {
+ old_password: string
+ new_password: string
+}) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/user/modify_password",
+ method: "PUT",
+ body: JSON.stringify(data),
+ })
+}
+
+/* ****************************** Options ****************************** */
+interface Option {
+ label: string
+ value: string
+}
+// 获取所有用户组
+export const getUserGroupAll = () => {
+ return httpFetch>({
+ url: BASE_LABEL_API + `/api/v1/label_server/user/group/all`,
+ method: "GET",
+ })
+}
+
+// 获取所有用户
+export const getUserAll = () => {
+ return httpFetch>({
+ url: BASE_LABEL_API + "/api/v1/label_server/user/all",
+ method: "GET",
+ })
+}
diff --git a/components/label/api/user/typing.ts b/components/label/api/user/typing.ts
new file mode 100644
index 0000000..6e4c62b
--- /dev/null
+++ b/components/label/api/user/typing.ts
@@ -0,0 +1,76 @@
+export namespace User {
+ export interface UserInfo {
+ uid: number
+ name: string
+ all_projects: { [x: number]: number[] }
+ collect_projects: number[]
+ group_name: string
+ group_uuid: string
+ work_status: number
+ base_city: string
+ }
+
+ export interface LoginInfo extends UserInfo {
+ token: string
+ refresh_token: string
+ }
+
+ export interface ListRequest {
+ name?: string
+ page_number?: number
+ page_size?: number
+ }
+
+ export interface ListResponse {
+ user_list: UserInfo[]
+ total_pages: number
+ total_items: number
+ }
+
+ export interface CreateProps {
+ user_name: string
+ group_uuid: string
+ base_city: string
+ }
+
+ export interface EditProps {
+ user_name?: string
+ password?: string
+ group_uuid?: string
+ base_city?: string
+ work_status?: number
+ }
+
+ export interface UpdateGroupProps {
+ user_id: number
+ group_uuid: string
+ }
+}
+
+export namespace Organization {
+ export interface CreateProps {
+ group_name: string
+ leader_uid: number
+ parent_group_uuid: string
+ }
+
+ interface Member {
+ base_city: string
+ id: number
+ name: string
+ work_status: number
+ }
+
+ export interface Response {
+ children?: Response[]
+ create_at?: string
+ create_user?: string
+ group_uuid: string
+ leader_uid?: number
+ leader_name?: string
+ members?: Member[]
+ name: string
+ parent_group_uuid: string
+ [key: string]: boolean | string | number | Response[] | Member[] | undefined
+ }
+}
diff --git a/components/label/api/workload/index.ts b/components/label/api/workload/index.ts
new file mode 100644
index 0000000..7ed353f
--- /dev/null
+++ b/components/label/api/workload/index.ts
@@ -0,0 +1,65 @@
+import httpFetch from "@/api/fetch"
+import { BASE_LABEL_API } from "../const"
+import { TimeFilter, WorkLoad } from "./typing"
+
+// 标注工作量统计
+export const getLabelStatisticsList = (params: TimeFilter) => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/workload/label_statistics/list",
+ method: "GET",
+ data: params,
+ })
+}
+
+// 审核1工作量统计
+export const getReview1StatisticsList = (params: TimeFilter) => {
+ return httpFetch({
+ url:
+ BASE_LABEL_API + "/api/v1/label_server/workload/review1_statistics/list",
+ method: "GET",
+ data: params,
+ })
+}
+
+// 审核2工作量统计
+export const getReview2StatisticsList = (params: TimeFilter) => {
+ return httpFetch({
+ url:
+ BASE_LABEL_API + "/api/v1/label_server/workload/review2_statistics/list",
+ method: "GET",
+ data: params,
+ })
+}
+
+// 结算表格列表
+export const getDownloadLog = () => {
+ return httpFetch({
+ url: BASE_LABEL_API + "/api/v1/label_server/workload/settlement_form/list",
+ method: "GET",
+ })
+}
+
+// 导出结算表格
+export const exportSettlementForm = (params: {
+ year: number
+ month: number
+}) => {
+ return httpFetch({
+ url:
+ BASE_LABEL_API + "/api/v1/label_server/workload/settlement_form/export",
+ method: "GET",
+ data: params,
+ isDownload: true,
+ })
+}
+
+// 下载结算表格
+export const downloadSettlementForm = (params: { id: number }) => {
+ return httpFetch({
+ url:
+ BASE_LABEL_API + "/api/v1/label_server/workload/settlement_form/download",
+ method: "GET",
+ data: params,
+ isDownload: true,
+ })
+}
diff --git a/components/label/api/workload/typing.ts b/components/label/api/workload/typing.ts
new file mode 100644
index 0000000..b5e0767
--- /dev/null
+++ b/components/label/api/workload/typing.ts
@@ -0,0 +1,107 @@
+export interface TimeFilter {
+ start_date: string
+ end_date: string
+}
+
+export namespace WorkLoad {
+ export interface LabelData {
+ commented_question_size: number
+ commented_size: number
+ commit_label_1: number
+ commit_reviewed_1: number
+ confirmed_prelabel_size: number
+ dynamic_size: number
+ group_name?: string
+ key_frame_size: number
+ object_size: number
+ prelabel_object_size: number
+ project_id: number
+ project_name: string
+ project_type: string
+ question_size: number
+ rejected_label_1: number
+ reviewed_question_size: number
+ reviewed_size: number
+ static_size: number
+ total_reviewed_size: number
+ uid: number
+ user_name: string
+ work_time: number
+ [property: string]: any
+ }
+
+ export interface LabelResponse {
+ all: LabelData[]
+ order_by_group_name: any[]
+ order_by_project_name: any[]
+ order_by_project_type: any[]
+ order_by_user_name: any[]
+ }
+
+ export interface Review1Data {
+ comment_size: number
+ commented_size: number
+ commit_review_1: number
+ commit_reviewed_2: number
+ confirmed_prelabel_size: number
+ group_name?: string
+ object_size: number
+ prelabel_object_size: number
+ project_id: number
+ project_name: string
+ project_type: string
+ reject_review_1: number
+ rejected_review_1: number
+ review_dynamic_size: number
+ review_key_frame_size: number
+ review_question_size: number
+ review_size: number
+ review_static_size: number
+ reviewed_size: number
+ total_review_size: number
+ total_reviewed_size: number
+ uid: number
+ user_name: string
+ work_time: number
+ [property: string]: any
+ }
+
+ export interface Review1Response {
+ all: Review1Data[]
+ order_by_group_name: any[]
+ order_by_project_name: any[]
+ order_by_project_type: any[]
+ order_by_user_name: any[]
+ }
+
+ export interface Review2Data {
+ comment_size: number
+ commit_review_2: number
+ confirmed_prelabel_size: number
+ group_name?: string
+ object_size: number
+ prelabel_object_size: number
+ project_id: number
+ project_name: string
+ project_type: string
+ reject_review_2: number
+ review_dynamic_size: number
+ review_key_frame_size: number
+ review_question_size: number
+ review_size: number
+ review_static_size: number
+ total_review_size: number
+ uid: number
+ user_name: string
+ work_time: number
+ [property: string]: any
+ }
+
+ export interface Review2Response {
+ all: Review2Data[]
+ order_by_group_name: any[]
+ order_by_project_name: any[]
+ order_by_project_type: any[]
+ order_by_user_name: any[]
+ }
+}
diff --git a/components/label/components/BackConfirmModal.tsx b/components/label/components/BackConfirmModal.tsx
new file mode 100644
index 0000000..5760753
--- /dev/null
+++ b/components/label/components/BackConfirmModal.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import CustomModal from "./CustomModal"
+import { IconInfoCircle } from "@tabler/icons-react"
+import { Button, Group, Text, Flex, ThemeIcon } from "@mantine/core"
+
+interface ComponentProps {
+ open: boolean
+ handleOk: () => void
+ handleCancel: () => void
+ onClose: () => void
+}
+
+const BackConfirmModal = ({
+ open,
+ handleOk,
+ handleCancel,
+ onClose,
+}: ComponentProps) => {
+ return (
+
+
+
+
+
+ }
+ onCancel={onClose}>
+
+
+
+
+ 未保存当前标注结果，是否确认保存并退出？
+
+
+ )
+}
+
+export default BackConfirmModal
diff --git a/components/label/components/BackupModal.tsx b/components/label/components/BackupModal.tsx
new file mode 100644
index 0000000..88f60ee
--- /dev/null
+++ b/components/label/components/BackupModal.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import CustomModal from "./CustomModal"
+import { TextInput } from "@mantine/core"
+import { useForm } from "@mantine/form"
+
+interface ComponentProps {
+ open: boolean
+ handleCancel: () => void
+ handleOk: (name: string) => void
+}
+
+const BackupModal = ({ open, handleCancel, handleOk }: ComponentProps) => {
+ const form = useForm({
+ initialValues: {
+ backup_name: "",
+ },
+ validate: {
+ backup_name: (value) => (value.length < 1 ? "请输入备份名称" : null),
+ },
+ })
+
+ const handleSubmit = () => {
+ const { hasErrors } = form.validate()
+ if (!hasErrors) {
+ handleOk(form.values.backup_name)
+ }
+ }
+
+ return (
+
+
+
+ )
+}
+
+export default BackupModal
diff --git a/components/label/components/BottomTools.tsx b/components/label/components/BottomTools.tsx
new file mode 100644
index 0000000..35b382d
--- /dev/null
+++ b/components/label/components/BottomTools.tsx
@@ -0,0 +1,734 @@
+"use client"
+
+import {
+ ActionIcon,
+ Box,
+ Button,
+ Flex,
+ Group,
+ ScrollArea,
+ Text,
+ TextInput,
+} from "@mantine/core"
+import { showNotification } from "@mantine/notifications"
+import {
+ IconChevronLeft,
+ IconChevronRight,
+ IconChevronsLeft,
+ IconChevronsRight,
+ IconFlag,
+} from "@tabler/icons-react"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { Project } from "../api/project/typing"
+import { Task } from "../api/task/typing"
+import { LabelState } from "../LabelNossr"
+import { useLabelStore } from "../store"
+import { usePermissionStore } from "../store/auth"
+import { useBottomToolsStore } from "../useBottomToolsStore"
+import { useDescToolsStore } from "../useDescToolsStore"
+import { useKeyboardStore } from "../useKeyBoardStore"
+import { useOtherToolsStore } from "../useOtherToolsStore"
+import { usePaperStore } from "../usePaperStore"
+import { useLabelTimeStore } from "../useTimerStore"
+import { useTopToolsStore } from "../useTopToolsStore"
+import { getSubAttrStatus } from "../util"
+import { safeClone } from "../utils/clone"
+import CustomModal from "./CustomModal"
+import MetaOperationTool from "./MetaOperationTool"
+
+interface BottomToolsComponentProps {
+ labelState: LabelState
+ taskDetail?: Task.DataProps
+ projectDetail?: Project.DetailResponse
+ renderPolygons: (
+ operationId: string,
+ imageData: Map | undefined
+ ) => void | null
+}
+
+const BottomTools: React.FC = (props) => {
+ const { labelState, projectDetail, taskDetail, renderPolygons } = props
+
+ const itemRefs = useRef>({})
+
+ const storeLabel = useLabelStore((state) => state.label)
+ const setLabel = useLabelStore((state) => state.setLabel)
+ const pushStateStack = useLabelStore((state) => state.pushStateStack)
+ const {
+ inputNumber,
+ setInputNumber,
+ activeImage,
+ setActiveImage,
+ setActiveImageId,
+ onlyKeyFrame,
+ setOnlyKeyFrame,
+ keyFrameData,
+ setKeyFrameData,
+ selectedItems,
+ setSelectedItems,
+ } = useBottomToolsStore()
+ const { metaOperation } = useDescToolsStore()
+ const { ctrl: ctrlKey, shift: shiftKey } = useKeyboardStore()
+
+ const [open, setOpen] = useState(false)
+ const [conflictOpen, setConflictOpen] = useState(false)
+ const isShowKeyFrame =
+ projectDetail &&
+ [5, 6].includes(projectDetail.label_type) &&
+ Array.from(labelState.keys()).some(
+ (k) => keyFrameData.has(k) && keyFrameData.get(k)?.key_frame
+ ) &&
+ onlyKeyFrame
+ const currentKeys = Array.from(labelState.keys()).filter((k) =>
+ isShowKeyFrame
+ ? keyFrameData.has(k) && keyFrameData.get(k)?.key_frame
+ : true
+ )
+ // 上一帧图片id
+ const previousFrameKey = useMemo(() => {
+ let key = ""
+ const keys = Array.from(labelState.keys()).filter((k) =>
+ isShowKeyFrame
+ ? keyFrameData.has(k) && keyFrameData.get(k)?.key_frame
+ : true
+ )
+ keys.forEach((k, index) => {
+ if (k === activeImage && index > 0) key = keys[index - 1]
+ })
+ return key
+ }, [activeImage, isShowKeyFrame, keyFrameData, labelState])
+
+ useEffect(() => {
+ const keys = Array.from(labelState.keys())
+ if (!keys.length) {
+ setActiveImage("")
+ setInputNumber("")
+ setActiveImageId(0)
+ return
+ }
+
+ const currentIndex = activeImage
+ ? keys.findIndex((k) => k === activeImage)
+ : -1
+ if (currentIndex >= 0) {
+ setInputNumber(String(currentIndex + 1))
+ setActiveImageId(currentIndex + 1)
+ return
+ }
+
+ const firstKey = keys[0]
+ setActiveImage(firstKey)
+ setInputNumber("1")
+ setActiveImageId(1)
+ }, [
+ activeImage,
+ labelState,
+ setActiveImage,
+ setActiveImageId,
+ setInputNumber,
+ ])
+
+ const scrollToIndex = (index: number) => {
+ const key = currentKeys[index]
+ if (key && itemRefs.current[key]) {
+ itemRefs.current[key]?.scrollIntoView({
+ behavior: "smooth",
+ block: "nearest",
+ inline: "center",
+ })
+ }
+ }
+
+ const closeRightContext = useCallback(() => {
+ useOtherToolsStore.getState().setShowContextMenu({
+ showContextMenu: false,
+ position: {
+ top: 0,
+ left: 0,
+ },
+ imageId: useOtherToolsStore.getState().imageId,
+ operationId: useOtherToolsStore.getState().operationId,
+ id: useOtherToolsStore.getState().id,
+ })
+ }, [])
+
+ const getOperationSchema = useCallback(
+ (operationId: string) => {
+ return (
+ projectDetail?.label_schema_list?.find(
+ (item) => item.category_id === +operationId
+ ) || null
+ )
+ },
+ [projectDetail?.label_schema_list]
+ )
+
+ // child 是否存在不符合要求的子属性
+ const getOperationSubAttrStatus = useCallback(
+ (imageId: string) => {
+ let parentBool = labelState.get(imageId)?.some((operationId) => {
+ let bool = storeLabel
+ .get(imageId)
+ ?.get(operationId)
+ ?.some((child) => {
+ return getSubAttrStatus(
+ getOperationSchema(operationId),
+ child[2]?.sub_attributes
+ )
+ })
+ return bool
+ })
+ return parentBool
+ },
+ [getOperationSchema, labelState, storeLabel]
+ )
+
+ // 获取上一帧和当前帧标注对象数组
+ const getLabelObjectsData = () => {
+ let map1 =
+ storeLabel.get(previousFrameKey) ??
+ new Map()
+ let arr1 = []
+ for (const value of map1.values()) arr1.push(...value)
+ let map2 =
+ storeLabel.get(activeImage) ??
+ new Map()
+ let arr2 = []
+ for (const value of map2.values()) arr2.push(...value)
+ return [arr1, arr2]
+ }
+
+ // 上一帧是否有文本描述
+ const prevFramehasTextDesc = () => {
+ if (projectDetail?.label_type === 5) {
+ let flag = false
+ const currentDescData = safeClone(useDescToolsStore.getState().descData)
+ const prevData1 = currentDescData.get(previousFrameKey) ?? new Map()
+ flag = prevData1.size ? true : false
+ if (flag) return true
+ const currentMetaData = safeClone(useDescToolsStore.getState().metaData)
+ const prevData2 = currentMetaData.get(previousFrameKey) ?? []
+ flag = prevData2.length ? true : false
+ return flag
+ } else if (projectDetail?.label_type === 6) {
+ const currentQaData = safeClone(useDescToolsStore.getState().qaData)
+ const prevData = currentQaData.get(previousFrameKey) ?? {}
+ return JSON.stringify(prevData) === "{}" ? false : true
+ }
+ return false
+ }
+
+ // 更新数据绘制
+ const updateDataRender = (
+ data: Map
+ ) => {
+ if (!renderPolygons) return
+ const list = usePaperStore.getState().group?.getItems({})
+ list?.forEach((item) => {
+ if (item.data.id) {
+ item.remove()
+ }
+ })
+
+ useTopToolsStore.getState().objectOperations?.forEach((item) => {
+ renderPolygons(item.category_id.toString(), data)
+ })
+ }
+
+ // 大语言标注继承上一帧时数据处理
+ const handleLLMData = () => {
+ // LLM
+ if (projectDetail?.label_type === 5) {
+ // 文本描述
+ const currentDescData = safeClone(useDescToolsStore.getState().descData)
+ const prevData1 = currentDescData.get(previousFrameKey) ?? new Map()
+ currentDescData.set(activeImage, prevData1)
+ useDescToolsStore.getState().setDescData(currentDescData)
+ useDescToolsStore.getState().updateFlag(true)
+ // 元操作序列
+ const currentMetaData = safeClone(useDescToolsStore.getState().metaData)
+ const prevData2 = currentMetaData.get(previousFrameKey) ?? []
+ currentMetaData.set(activeImage, prevData2)
+ useDescToolsStore.getState().setMetaData(currentMetaData)
+ }
+ // QA
+ if (projectDetail?.label_type === 6) {
+ const currentQaData = safeClone(useDescToolsStore.getState().qaData)
+ const prevData = currentQaData.get(previousFrameKey) ?? {}
+ currentQaData.set(activeImage, prevData)
+ useDescToolsStore.getState().setQaData(currentQaData)
+ useDescToolsStore.getState().updateFlag(true)
+ }
+ }
+
+ // 继承上一帧的数据
+ const handleCopyData = () => {
+ // 图形绘制
+ const [perviousData] = getLabelObjectsData()
+ let map =
+ storeLabel.get(activeImage) ??
+ new Map()
+ perviousData.forEach((item) => {
+ const id = item[2].category_id.toString()
+ if (map.has(id)) {
+ let data = map.get(id)
+ data!.push(item)
+ map.set(id, data as any)
+ } else {
+ map.set(id, [item])
+ }
+ })
+ let updateData = new Map()
+ for (const [key, value] of storeLabel) {
+ if (key === activeImage) updateData.set(key, map)
+ else updateData.set(key, value)
+ }
+ if (!storeLabel.has(activeImage)) updateData.set(activeImage, map)
+ updateDataRender(updateData.get(activeImage)!)
+ setLabel(updateData)
+ pushStateStack(updateData)
+ handleLLMData()
+ setOpen(false)
+ }
+
+ const handleCopyConflictData = (flag: boolean) => {
+ const [perviousData, nowData] = getLabelObjectsData()
+
+ let map = new Map()
+ let arr = flag
+ ? [
+ ...perviousData,
+ ...nowData.filter(
+ (item) => !perviousData.map((p) => p[0]).includes(item[0])
+ ),
+ ]
+ : [
+ ...perviousData.filter(
+ (item) => !nowData.map((d) => d[0]).includes(item[0])
+ ),
+ ...nowData,
+ ]
+ arr.forEach((item) => {
+ const id = item[2].category_id.toString()
+ if (map.has(id)) {
+ let data = map.get(id)
+ data!.push(item)
+ map.set(id, data as any)
+ } else {
+ map.set(id, [item])
+ }
+ })
+ let updateData = new Map()
+ for (const [key, value] of storeLabel) {
+ if (key === activeImage) updateData.set(key, map)
+ else updateData.set(key, value)
+ }
+ updateDataRender(updateData.get(activeImage)!)
+ setLabel(updateData)
+ pushStateStack(updateData)
+ handleLLMData()
+ setConflictOpen(false)
+ }
+
+ return (
+
+ {projectDetail?.label_type === 5 && metaOperation ? (
+
+
+ 元操作序列
+
+
+
+
+
+ ) : null}
+
+
+
+
+ {
+ scrollToIndex(0)
+ currentKeys.length && setActiveImage(currentKeys[0])
+ setInputNumber("1")
+ setActiveImageId(1)
+ closeRightContext()
+ }}>
+
+
+ {
+ if (inputNumber !== "1") {
+ let newActiveIndex = +inputNumber - 1
+ setInputNumber(newActiveIndex.toString())
+ setActiveImageId(newActiveIndex)
+ scrollToIndex(newActiveIndex - 1)
+
+ setActiveImage(currentKeys?.[newActiveIndex - 1])
+ closeRightContext()
+ }
+ }}>
+
+
+ {
+ setInputNumber(e.target.value)
+ }}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ scrollToIndex(+inputNumber - 1)
+ setActiveImage(currentKeys?.[+inputNumber - 1])
+ setActiveImageId(+inputNumber)
+ closeRightContext()
+ }
+ }}
+ />
+ / {currentKeys.length}
+ {
+ if (+inputNumber < currentKeys.length) {
+ let newActiveIndex = +inputNumber + 1
+ setInputNumber(newActiveIndex.toString())
+ setActiveImageId(newActiveIndex)
+ scrollToIndex(newActiveIndex - 1)
+ setActiveImage(currentKeys?.[newActiveIndex - 1])
+ closeRightContext()
+ }
+ }}>
+
+
+ {
+ scrollToIndex(currentKeys.length - 1)
+ setInputNumber(currentKeys.length.toString())
+ setActiveImageId(currentKeys.length)
+ setActiveImage(currentKeys?.[currentKeys.length - 1])
+ closeRightContext()
+ }}>
+
+
+
+
+ {projectDetail && [5, 6].includes(projectDetail.label_type) ? (
+ <>
+ {isShowKeyFrame ? (
+
+ ) : (
+
+ )}
+ {keyFrameData.has(activeImage) &&
+ keyFrameData.get(activeImage)?.key_frame ? (
+
+ ) : (
+
+ )}
+
+ ) : null}
+
+
+
+
+
+
+
+ {currentKeys.map((key, index) => {
+ const isActive = activeImage === key
+ const isSelected =
+ selectedItems.length && selectedItems.includes(key)
+ const isHighlight = isActive || isSelected
+
+ let textColor = "inherit"
+ if (getOperationSubAttrStatus(key)) {
+ textColor = "red"
+ } else if (isHighlight) {
+ textColor = "white"
+ }
+
+ return (
+ {
+ itemRefs.current[key] = el
+ }}>
+ {
+ if (e.shiftKey) {
+ e.preventDefault()
+ }
+ if (ctrlKey || shiftKey) {
+ setSelectedItems(key, ctrlKey, shiftKey)
+ } else {
+ setInputNumber(index + 1 + "")
+ setActiveImage(key)
+ setActiveImageId(index + 1)
+ setSelectedItems("", false, false)
+ }
+ closeRightContext()
+ }}>
+ {keyFrameData.has(key) &&
+ keyFrameData.get(key)?.key_frame ? (
+
+
+
+ ) : null}
+
+ {index + 1}
+
+
+
+ )
+ })}
+
+
+
+ {
+ setOpen(false)
+ }}
+ onOk={handleCopyData}>
+ 确实要复制上一帧数据吗？
+
+ {
+ setConflictOpen(false)
+ }}
+ footer={
+
+
+
+
+
+ }>
+ 与上一帧数据存在冲突，是否要复制上一帧数据并覆盖吗？
+
+
+ )
+}
+
+export default BottomTools
diff --git a/components/label/components/ConfirmModal.tsx b/components/label/components/ConfirmModal.tsx
new file mode 100644
index 0000000..c155452
--- /dev/null
+++ b/components/label/components/ConfirmModal.tsx
@@ -0,0 +1,37 @@
+import { IconInfoCircle } from "@tabler/icons-react"
+import CustomModal from "./CustomModal"
+import { Flex, Text, ThemeIcon } from "@mantine/core"
+
+interface ComponentProps {
+ open: boolean
+ title: string
+ content: string
+ onOk: () => void
+ onCancel: () => void
+}
+
+const ConfirmModal = ({
+ open,
+ title,
+ content,
+ onOk,
+ onCancel,
+}: ComponentProps) => {
+ return (
+
+
+
+
+
+ {content}
+
+
+ )
+}
+
+export default ConfirmModal
diff --git a/components/label/components/CrosshairComponent.tsx b/components/label/components/CrosshairComponent.tsx
new file mode 100644
index 0000000..68d960e
--- /dev/null
+++ b/components/label/components/CrosshairComponent.tsx
@@ -0,0 +1,175 @@
+"use client"
+import React, {
+ forwardRef,
+ useCallback,
+ useEffect,
+ useImperativeHandle,
+ useRef,
+} from "react"
+import { useTopToolsStore } from "../useTopToolsStore"
+
+interface CrosshairComponentProps {
+ isCarved: boolean
+}
+
+const CrosshairComponent = (
+ props: CrosshairComponentProps,
+ ref: React.Ref | undefined
+) => {
+ const { isCarved } = props
+
+ const { scale } = useTopToolsStore()
+
+ const canvasRef = useRef(null)
+
+ const getFixed = (sparsity: number) => {
+ const pointIdx = String(sparsity).indexOf(".")
+ const len = String(sparsity).length
+ return pointIdx < 0 ? 0 : len - pointIdx - 1
+ }
+
+ const isCloseToInteger = (num: number) => {
+ return Math.abs(num - Math.round(num)) < 0.0000001
+ }
+
+ const getSparsity = (scale: number) => {
+ if (scale <= 1) {
+ return Math.round(100 / scale)
+ } else if (scale <= 3) {
+ return 50
+ } else if (scale <= 4) {
+ return 20
+ } else if (scale <= 5) {
+ return 10
+ }
+ return 5
+ }
+
+ // 绘制十字线的函数
+ const drawCrosshair = useCallback(
+ (centerX: number, centerY: number) => {
+ const lineWidth = 2
+
+ const tickLength = 10
+
+ const canvas = canvasRef.current
+ const ctx = canvas?.getContext("2d")
+ if (ctx && canvas) {
+ // 清空画布
+ ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+ // 绘制水平和垂直线
+ ctx.beginPath()
+ // 水平
+ ctx.moveTo(centerX - canvas.width, centerY - lineWidth / 2)
+ ctx.lineTo(centerX + canvas.width, centerY - lineWidth / 2)
+ // 垂直
+ ctx.moveTo(centerX - lineWidth / 2, centerY - canvas.height)
+ ctx.lineTo(centerX - lineWidth / 2, centerY + canvas.height)
+ //
+ ctx.lineWidth = lineWidth
+ ctx.strokeStyle = "#EF4444"
+ ctx.setLineDash([5, 2])
+ ctx.stroke()
+
+ if (isCarved) {
+ ctx.beginPath()
+ ctx.setLineDash([])
+ ctx.strokeStyle = "#EF4444"
+ let carveLineWidth = 1
+ ctx.lineWidth = carveLineWidth
+
+ // 间隔
+ const sparsity = getSparsity(scale)
+ const part = 10
+ const pixelPerUnit = scale * sparsity
+ const gap = pixelPerUnit / part
+
+ const fixed = getFixed(sparsity)
+
+ // 横向刻度
+ let indexX =
+ centerX % gap > 0 ? gap - (centerX % gap) : -centerX % gap
+ do {
+ const num = ((centerX + indexX) / pixelPerUnit) * sparsity
+ if (isCloseToInteger(num / sparsity)) {
+ ctx.moveTo(indexX, centerY - tickLength * 0.7 - carveLineWidth)
+ ctx.lineTo(indexX, centerY + tickLength * 0.7)
+ const text = (
+ ((indexX - centerX) / pixelPerUnit) *
+ sparsity
+ ).toFixed(fixed)
+ const textWidth = ctx.measureText(text).width
+ ctx.fillText(text, indexX - textWidth / 2, centerY - tickLength)
+ } else {
+ ctx.moveTo(indexX, centerY - tickLength / 2 - carveLineWidth)
+ ctx.lineTo(indexX, centerY + tickLength / 2)
+ }
+ indexX += gap
+ } while (indexX < 2 * canvas.width)
+ // 纵向刻度
+ let indexY =
+ centerY % gap > 0 ? gap - (centerY % gap) : -centerY % gap
+ do {
+ const num = ((centerY + indexY) / pixelPerUnit) * sparsity
+ if (isCloseToInteger(num / sparsity)) {
+ ctx.moveTo(centerX - tickLength * 0.7 - carveLineWidth, indexY)
+ ctx.lineTo(centerX + tickLength * 0.7, indexY)
+ const text = (
+ ((-indexY + centerY) / pixelPerUnit) *
+ sparsity
+ ).toFixed(fixed)
+ const textWidth = ctx.measureText(text).width
+ ctx.fillStyle = "#EF4444"
+ ctx.fillText(text, centerX + tickLength, indexY - textWidth / 2)
+ } else {
+ ctx.moveTo(centerX - tickLength / 2 - carveLineWidth, indexY)
+ ctx.lineTo(centerX + tickLength / 2, indexY)
+ }
+ indexY += gap
+ } while (indexY < 2 * canvas.height)
+
+ ctx.stroke()
+ }
+ }
+ },
+ [isCarved, scale]
+ )
+
+ useEffect(() => {
+ const canvas = canvasRef.current
+ if (canvas) {
+ // 设置canvas尺寸
+ canvas.width = window.innerWidth
+ canvas.height = window.innerHeight
+ const rect = canvas.getBoundingClientRect()
+ drawCrosshair(rect.width / 2, rect.height / 2)
+ }
+ }, [drawCrosshair])
+
+ const updateCrosshair = (event: { clientX: number; clientY: number }) => {
+ const canvas = canvasRef.current
+ if (canvas) {
+ const rect = canvas.getBoundingClientRect()
+ const centerX = event.clientX - rect.left
+ const centerY = event.clientY - rect.top
+ drawCrosshair(centerX, centerY)
+ }
+ }
+
+ useImperativeHandle(ref, () => ({ updateCrosshair }))
+
+ return (
+
+ )
+}
+
+export default forwardRef(CrosshairComponent)
diff --git a/components/label/components/CustomModal.tsx b/components/label/components/CustomModal.tsx
new file mode 100644
index 0000000..b70ee55
--- /dev/null
+++ b/components/label/components/CustomModal.tsx
@@ -0,0 +1,67 @@
+import { Modal, Button, Group, ModalProps, Flex, Box } from "@mantine/core"
+import { ReactNode } from "react"
+
+type BaseModalProps = Omit
+
+interface CustomModalProps extends BaseModalProps {
+ open: boolean
+ onCancel: () => void
+ onOk?: () => void
+ title?: ReactNode
+ footer?: ReactNode
+ okText?: string
+ cancelText?: string
+ confirmLoading?: boolean
+ width?: string | number
+}
+
+const CustomModal = ({
+ open,
+ onCancel,
+ onOk,
+ title,
+ children,
+ footer,
+ okText = "确定",
+ cancelText = "取消",
+ confirmLoading,
+ width,
+ ...props
+}: CustomModalProps) => {
+ return (
+
+ {/* Preserving potential decorative intent with a Box if needed,
+ but for now assuming title text is sufficient or passed as Node.
+ If the original had a blue bar, we could add:
+
+ */}
+ {title}
+
+ }
+ size={width || "md"}
+ centered
+ {...props}>
+ {children}
+ {footer === undefined ? (
+
+
+ {onOk && (
+
+ )}
+
+ ) : (
+ footer
+ )}
+
+ )
+}
+
+export default CustomModal
diff --git a/components/label/components/EditorContainer.md b/components/label/components/EditorContainer.md
new file mode 100644
index 0000000..79f6f20
--- /dev/null
+++ b/components/label/components/EditorContainer.md
@@ -0,0 +1,32 @@
+# EditorContainer
+
+A rich text editor component based on `@mantine/tiptap`.
+
+## Features
+- Basic formatting (Bold, Italic, Underline, Strike, Code)
+- Headings (H1-H4)
+- Lists (Bullet, Ordered)
+- Blockquote, Horizontal Rule
+- Links
+- Image Upload (Data URI)
+
+## Usage
+
+```tsx
+import EditorContainer from './EditorContainer';
+
+ console.log(val)}
+ disabled={false}
+/>
+```
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `string` | HTML content of the editor. |
+| `onChange` | `(value: string) => void` | Callback when content changes. Returns `html@1024-text`. |
+| `disabled` | `boolean` | Whether the editor is read-only. |
+| `color` | `string` | Class name for the container border/style. |
diff --git a/components/label/components/EditorContainer.tsx b/components/label/components/EditorContainer.tsx
new file mode 100644
index 0000000..b72d431
--- /dev/null
+++ b/components/label/components/EditorContainer.tsx
@@ -0,0 +1,148 @@
+"use client"
+
+import { useEditor } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Underline from "@tiptap/extension-underline"
+import Link from "@tiptap/extension-link"
+import Image from "@tiptap/extension-image"
+import Placeholder from "@tiptap/extension-placeholder"
+import { RichTextEditor } from "@mantine/tiptap"
+import { useTopToolsStore } from "../useTopToolsStore"
+import { useKeyEventStore } from "../store"
+import { useEffect, useRef } from "react"
+import { Box } from "@mantine/core"
+import { IconPhoto } from "@tabler/icons-react"
+import "@mantine/tiptap/styles.css"
+
+export const splitWord = "@1024-"
+
+interface EditorContainerProps {
+ value: string
+ onChange: (value: string) => void
+ color?: string
+ disabled?: boolean
+}
+
+const EditorContainer = ({
+ value,
+ onChange,
+ color,
+ disabled,
+}: EditorContainerProps) => {
+ const { isView } = useTopToolsStore()
+ const fileInputRef = useRef(null)
+
+ const editor = useEditor({
+ extensions: [
+ StarterKit,
+ Underline,
+ Link,
+ Image,
+ Placeholder.configure({ placeholder: "请输入内容..." }),
+ ],
+ content: value,
+ editable: !disabled && !isView,
+ onUpdate: ({ editor }) => {
+ // Preserve splitWord format
+ onChange(`${editor.getHTML()}${splitWord}${editor.getText()}`)
+ },
+ onFocus: () => {
+ useKeyEventStore.getState().setFocusInput(true)
+ },
+ onBlur: () => {
+ useKeyEventStore.getState().setFocusInput(false)
+ },
+ })
+
+ useEffect(() => {
+ if (editor) {
+ editor.setEditable(!disabled && !isView)
+ }
+ }, [disabled, isView, editor])
+
+ useEffect(() => {
+ // Sync external value changes to editor
+ // Check if editor content differs from value to avoid cursor jump and loops
+ if (editor && value && editor.getHTML() !== value) {
+ // Only set content if it's substantially different.
+ // Note: editor.getHTML() might return different string than value (e.g. attribute order).
+ // Ideally we should compare content, but string comparison is a basic check.
+ // If value is empty string, we should clear.
+ editor.commands.setContent(value)
+ }
+ }, [value, editor])
+
+ const handleImageUpload = (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0]
+ if (file && editor) {
+ const reader = new FileReader()
+ reader.onload = (e) => {
+ const result = e.target?.result as string
+ editor.chain().focus().setImage({ src: result }).run()
+ }
+ reader.readAsDataURL(file)
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ fileInputRef.current?.click()}
+ aria-label="Upload image"
+ title="Upload image">
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default EditorContainer
diff --git a/components/label/components/Icon.tsx b/components/label/components/Icon.tsx
new file mode 100644
index 0000000..404c552
--- /dev/null
+++ b/components/label/components/Icon.tsx
@@ -0,0 +1,946 @@
+import { SVGProps } from "react"
+
+export type IconSvgProps = SVGProps & {
+ size?: number
+}
+
+export const Logo: React.FC = () => (
+
+)
+
+export const LoginUserIcon = () => (
+
+)
+
+export const LoginPasswordIcon = () => (
+
+)
+
+export const LoginCodeIcon = () => (
+
+)
+
+export const DashboardMenuIcon = () => (
+
+)
+
+export const TaskMenuIcon = () => (
+
+)
+
+export const DeviceMenuIcon = () => (
+
+)
+
+export const CountMenuIcon = () => (
+
+)
+
+export const UserMenuIcon = () => (
+
+)
+
+export const AuthMenuIcon = () => (
+
+)
+
+export const PersonalMenuIcon = () => (
+
+)
+
+export const DevLogo = ({ ...props }) => (
+
+)
+
+export const ExportIcon = () => (
+
+)
+
+export const BasicInfoIcon = () => (
+
+)
+
+export const BankCardIcon = () => (
+
+)
+
+export const BusinessCardIcon = () => (
+
+)
+
+export const CollectionCardIcon = () => (
+
+)
+
+export const BillRecordCardIcon = () => (
+
+)
+
+export const ToolTipIcon = () => (
+
+)
+
+export const IDLogoIcon = () => (
+
+)
+
+export const ChevronLeftIcon: React.FC = ({ ...props }) => (
+
+)
+
+export const DesktopIcon: React.FC = ({ ...props }) => (
+
+)
+
+export const LabelStatusIcon: React.FC = ({ ...props }) => (
+
+)
+
+export const LabelStatusWaitIcon = ({ ...props }) => (
+
+)
+
+// 待验收
+export const LabelStatusAcceptanceIcon = ({ ...props }) => (
+
+)
+
+// 审核失败
+export const LabelStatusFailIcon = ({ ...props }) => (
+
+)
+
+// 试标
+export const LabelPretestIcon = () => (
+
+)
+
+export const LabelStatusStopIcon = ({ ...props }) => (
+
+)
+
+export const InfoCircleIcon = ({ ...props }) => (
+
+)
+
+/************************* 标注状态icon ****************************/
+// 待领取
+export const TaskIcon1 = ({ ...props }) => (
+
+)
+
+// 标注中
+export const TaskIcon2 = ({ ...props }) => (
+
+)
+
+// 标注完成
+export const TaskIcon3 = ({ ...props }) => (
+
+)
+
+// 审核中
+export const TaskIcon4 = ({ ...props }) => (
+
+)
+
+// 审核完成
+export const TaskIcon5 = ({ ...props }) => (
+
+)
+
+// 复审中 / 复审完成
+export const TaskIcon6 = ({ ...props }) => (
+
+)
+
+// 无法标注
+export const TaskIcon7 = ({ ...props }) => (
+
+)
+
+export const DispatchTaskIcon = () => (
+
+)
+
+export const FreeTaskIcon = () => (
+
+)
diff --git a/components/label/components/MetaOperationTool.tsx b/components/label/components/MetaOperationTool.tsx
new file mode 100644
index 0000000..6423f3a
--- /dev/null
+++ b/components/label/components/MetaOperationTool.tsx
@@ -0,0 +1,204 @@
+import { Box, Flex, HoverCard } from "@mantine/core"
+import { ArrowBigRightDashIcon, MinusCircleIcon } from "lucide-react"
+import { useCallback } from "react"
+import { useBottomToolsStore } from "../useBottomToolsStore"
+import { useDescToolsStore } from "../useDescToolsStore"
+import { useTopToolsStore } from "../useTopToolsStore"
+
+const MetaOperationTool = () => {
+ const { metaOperation, metaData } = useDescToolsStore()
+ const { activeImage } = useBottomToolsStore()
+ const currentImageData = metaData.get(activeImage) || []
+
+ const HoverContent = useCallback(
+ (index?: number) => {
+ if (!metaOperation) return <>
+ const { sub_attributes_describe } = metaOperation
+
+ return (
+
+
+ 子属性选择
+
+ {sub_attributes_describe.length ? (
+
+ {sub_attributes_describe.map((subDesc) => (
+
+
+ {subDesc.chinese_name}
+
+
+ {subDesc.optional_item.map((option) => (
+ {
+ e.currentTarget.style.backgroundColor =
+ "var(--mantine-color-gray-1)"
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.backgroundColor = "transparent"
+ }}
+ onClick={() => {
+ const map = useDescToolsStore.getState().metaData
+ if (map.has(activeImage)) {
+ let arr = map.get(activeImage) || []
+ if (index || index === 0) arr[index] = option
+ else arr.push(option)
+ map.set(activeImage, arr)
+ } else {
+ map.set(activeImage, [option])
+ }
+ useDescToolsStore.getState().setMetaData(map)
+ }}>
+ {option}
+
+ ))}
+
+
+ ))}
+
+ ) : (
+
+ 无
+
+ )}
+
+ )
+ },
+ [activeImage, metaOperation]
+ )
+
+ const handleDelete = (index: number) => {
+ const map = useDescToolsStore.getState().metaData
+ let arr = (map.get(activeImage) || []).filter((_v, i) => i !== index)
+ map.set(activeImage, arr)
+ useDescToolsStore.getState().setMetaData(map)
+ }
+
+ return (
+
+ {currentImageData.map((text, index) =>
+ !useTopToolsStore.getState().isView ? (
+
+ {/* Replaced Popover with HoverCard for better hover interaction */}
+
+
+
+ {text}
+ {
+ e.stopPropagation()
+ handleDelete(index)
+ }}>
+
+
+
+
+ {HoverContent(index)}
+
+ {index < currentImageData.length - 1 ? (
+
+
+
+ ) : null}
+
+ ) : (
+
+
+ {text}
+
+ {index < currentImageData.length - 1 ? (
+
+
+
+ ) : null}
+
+ )
+ )}
+ {!useTopToolsStore.getState().isView ? (
+
+ {/* Replaced Popover with HoverCard */}
+
+
+
+ 新增
+
+
+ {HoverContent()}
+
+
+ ) : null}
+
+ )
+}
+
+export default MetaOperationTool
diff --git a/components/label/components/PaperContainer.tsx b/components/label/components/PaperContainer.tsx
new file mode 100644
index 0000000..3efc9ab
--- /dev/null
+++ b/components/label/components/PaperContainer.tsx
@@ -0,0 +1,2233 @@
+"use client"
+
+import {
+ Box,
+ Button,
+ Card,
+ Checkbox,
+ Group,
+ Modal,
+ Radio,
+ ScrollArea,
+ Select,
+ Stack,
+ Text,
+ Textarea,
+ TextInput,
+} from "@mantine/core"
+import { useForm } from "@mantine/form"
+import { notifications } from "@mantine/notifications"
+import dayjs from "dayjs"
+import msgpack from "msgpack-lite"
+import paper from "paper"
+import React, {
+ DispatchWithoutAction,
+ forwardRef,
+ useCallback,
+ useEffect,
+ useImperativeHandle,
+ useMemo,
+ useRef,
+ useState,
+} from "react"
+import {
+ getAuxiliaryAnnotation,
+ getServerImage,
+ getTrackingAuxiliaryAnnotation,
+} from "../api/label"
+import { Project } from "../api/project/typing"
+import { LabelState } from "../LabelNossr"
+import {
+ initialDetail,
+ useImagesStore,
+ useKeyEventStore,
+ useLabelStore,
+ useObjectStore,
+} from "../store"
+import { usePermissionStore } from "../store/auth"
+import { useBottomToolsStore } from "../useBottomToolsStore"
+import { useKeyboardStore } from "../useKeyBoardStore"
+import { useOtherToolsStore } from "../useOtherToolsStore"
+import { clearSupportAnnotationItem, usePaperStore } from "../usePaperStore"
+import { renderGroupPath } from "../useRenderGroupPath"
+import useRenderTag from "../useRenderTag"
+import { useRightToolsStore } from "../useRightToolsStore"
+import { useTopToolsStore } from "../useTopToolsStore"
+import { checkCommentsIsSame } from "../util"
+import { labelTypeMap } from "../utils/constants"
+import { safeClone } from "../utils/clone"
+import { adjustPoints } from "../utils/paperjs"
+import CrosshairComponent from "./CrosshairComponent"
+import { renderOperationIcon } from "./RightObjectTools"
+
+interface PaperComponentProps {
+ imgSrc: string
+ forceUpdate: DispatchWithoutAction
+ projectDetail?: Project.DetailResponse
+ labelState: LabelState
+ updateLoadingFlag: (flag: boolean) => void
+}
+
+const renderPath = (paperGroup: paper.Group, option: any) => {
+ return new paper.Path(
+ Object.assign({ parent: paperGroup, closed: true }, option)
+ )
+}
+
+const renderCompoundPath = (paperGroup: paper.Group, option: any) => {
+ return new paper.CompoundPath(
+ Object.assign({ parent: paperGroup, closed: true }, option)
+ )
+}
+
+const renderRectangle = (paperGroup: paper.Group, option: any) => {
+ return new paper.Path.Rectangle(Object.assign({ parent: paperGroup }, option))
+}
+
+const renderCircle = (paperGroup: paper.Group, option: any) => {
+ return new paper.Path.Circle(Object.assign({ parent: paperGroup }, option))
+}
+
+const renderRaster = (paperGroup: paper.Group, option: any) => {
+ return new paper.Raster(Object.assign({ parent: paperGroup }, option))
+}
+
+const PaperContainer = (
+ props: PaperComponentProps,
+ ref: React.Ref | undefined
+) => {
+ const { forceUpdate, projectDetail, labelState, updateLoadingFlag } = props
+ const containerRef = useRef(null)
+ const [imgSize, setImageSize] = useState<{
+ clientWidth: number
+ clientHeight: number
+ }>()
+
+ const [firstRender, setFirstRender] = useState(false)
+ const [confirmModalOpened, setConfirmModalOpened] = useState(false)
+ const [confirmModalCallback, setConfirmModalCallback] = useState<
+ ((flag?: boolean) => void) | null
+ >(null)
+
+ // 监听画布容器宽高变化
+ useEffect(() => {
+ const container = containerRef.current
+ const resizeObserver = new ResizeObserver((entries) => {
+ for (let entry of entries) {
+ if (entry.target === container) {
+ setImageSize({
+ clientWidth: entry.contentRect.width,
+ clientHeight: entry.contentRect.height,
+ })
+ if (!firstRender) setFirstRender(true)
+ }
+ }
+ })
+ if (container) {
+ resizeObserver.observe(container)
+ }
+
+ return () => {
+ if (container) {
+ resizeObserver.unobserve(container)
+ }
+ }
+ }, [firstRender])
+
+ const canvasElem = useRef(null)
+
+ const {
+ init,
+ initViewTool,
+ initPanTool,
+ initPolygonTool,
+ initRectangleTool,
+ initBrushTool,
+ initPointTool,
+ initSupportTool,
+ addPolygon,
+ addBrush,
+ addPointLine,
+ addPoint,
+ addCompoundPath,
+ addRectangle,
+ setRasterPath,
+ setRasterSize,
+ setRasterScale,
+ loadingData,
+ } = usePaperStore()
+
+ const { activeImage } = useBottomToolsStore()
+
+ const storeLabel = useLabelStore((state) => state.label)
+ const deleteOperation = useLabelStore((state) => state.deleteOperation)
+ const setOperation = useLabelStore((state) => state.setOperation)
+ const getLabelDetailDataByKeys = useLabelStore(
+ (state) => state.getLabelDetailDataByKeys
+ )
+
+ const {
+ objectOperations,
+ imageFilter,
+ crosshairStatus,
+ showTags,
+ showTagsConfigs,
+ } = useTopToolsStore()
+
+ const {
+ pathStatus: paperPathStatus,
+ selectedPath,
+ updateSelectedPath,
+ } = useObjectStore()
+
+ const {
+ showContextMenu,
+ position,
+ operationId,
+ id,
+ setContextMenuId,
+ setContextMenuOperationId,
+ } = useOtherToolsStore()
+ const { renderTag } = useRenderTag()
+
+ const [setup, setSetup] = useState(false)
+
+ const paperScope = useRef(null)
+ useEffect(() => {
+ if (firstRender) {
+ paperScope.current = new paper.PaperScope()
+ if (canvasElem.current) {
+ paperScope.current.setup(canvasElem.current)
+ setSetup(true)
+ }
+ }
+ }, [firstRender])
+
+ useEffect(() => {
+ const pScope = paperScope.current
+ if (pScope) {
+ const view = pScope.view
+ view.bounds.height = imgSize!.clientHeight
+ view.bounds.width = imgSize!.clientWidth
+ // 调整可见图层大小
+ const layer = pScope.project.activeLayer
+ layer.view.viewSize = new paper.Size(
+ imgSize!.clientWidth,
+ imgSize!.clientHeight
+ )
+ view.center = new paper.Point(
+ view.bounds.width / 2,
+ view.bounds.height / 2
+ )
+ }
+ }, [imgSize])
+
+ const renderSupportAnnotation = useCallback(
+ async (
+ points: Array<[number, number]>,
+ tags: number[],
+ clear_previous_state = false
+ ) => {
+ try {
+ notifications.show({
+ id: "sam2",
+ message: "模型生成中",
+ loading: true,
+ autoClose: false,
+ })
+ const operationSchema =
+ projectDetail?.label_schema_list?.find(
+ (item) =>
+ item.category_id === +useTopToolsStore.getState().activeOperation
+ ) || null
+ const strokeColor = operationSchema
+ ? `rgb(${operationSchema.color[0]},${operationSchema.color[1]},${operationSchema.color[2]})`
+ : "rgb(0,0,0)"
+ const fillColor = operationSchema
+ ? `rgba(${operationSchema.color[0]},${operationSchema.color[1]},${operationSchema.color[2]},0.3)`
+ : "rgba(0,0,0,0.3)"
+ const blankColor = operationSchema
+ ? `rgba(${operationSchema.color[0]},${operationSchema.color[1]},${operationSchema.color[2]},0.01)`
+ : "rgba(0,0,0,0.01)"
+ const currentScale =
+ usePaperStore.getState().rasterScale[activeImage] ?? 1
+
+ const draw = () => {
+ points.forEach((point, index) => {
+ const drawPoint = new paper.Path.Circle({
+ center: point,
+ radius: 2,
+ fillColor: tags[index] === 1 ? "red" : "blue",
+ strokeColor: tags[index] === 1 ? "red" : "blue",
+ data: {
+ id: "support",
+ type: "point",
+ },
+ })
+ drawPoint.parent = usePaperStore.getState().group!
+ const raster = usePaperStore
+ .getState()
+ .group!.getItems({ data: { name: "pic" } })[0]
+ if (!raster.contains(drawPoint.position)) {
+ throw new Error("点位超出图片范围")
+ }
+ })
+ }
+ console.log(points, tags)
+ // 绘制点位
+ clearSupportAnnotationItem()
+ draw()
+
+ const picSize = usePaperStore.getState().rasterSize[activeImage]
+
+ const params = {
+ project_id: projectDetail?.id || 0,
+ file_name: activeImage,
+ image_hw:
+ picSize && picSize.length ? [picSize[1], picSize[0]] : [0, 0],
+ points_and_box: points.map(([x, y]) => [
+ Math.round(x / currentScale),
+ Math.round(y / currentScale),
+ ]),
+ tags,
+ clear_previous_state,
+ }
+ console.log("传参", params)
+ try {
+ const res = await getAuxiliaryAnnotation(
+ msgpack.encode(params) as any
+ )
+ const data = msgpack.decode(new Uint8Array(res))
+ console.log(data)
+ if (data.msg === "success") {
+ const { contours, hollows } = data
+ const outerPaths: any[] = []
+ const innerPaths: any[] = []
+ contours.forEach((contour: any, index: number) => {
+ if (contour.length > 3) {
+ const path = new paper.Path({
+ segments: contour.map(([x, y]: [number, number]) => [
+ x * currentScale,
+ y * currentScale,
+ ]),
+ fillColor: blankColor,
+ strokeColor: strokeColor,
+ closed: true,
+ data: {
+ id: "support",
+ type: "polygon",
+ isHollowPolygon: false,
+ fillColor,
+ strokeColor,
+ blankColor,
+ },
+ parent: usePaperStore.getState().group,
+ strokeScaling: false,
+ })
+ if (
+ Math.abs(path.area) < useTopToolsStore.getState().checkSize
+ ) {
+ path.remove()
+ } else {
+ // path.scaling = usePaperStore.getState().group!.scaling;
+ if (hollows[index]) {
+ // 更新标志位
+ path.data.isHollowPolygon = true
+ innerPaths.push(path)
+ } else {
+ // 上色
+ path.fillColor = new paper.Color(fillColor)
+ outerPaths.push(path)
+ }
+ }
+ }
+ })
+ const compoundPath = new paper.CompoundPath({
+ children: [...outerPaths, ...innerPaths],
+ data: {
+ id: "support",
+ type: "parent",
+ },
+ strokeColor: strokeColor,
+ strokeWidth: 2,
+ fillColor: fillColor,
+ })
+ compoundPath.parent = usePaperStore.getState().group!
+ notifications.show({
+ id: "sam2",
+ message: "模型生成成功",
+ color: "green",
+ })
+ }
+ } catch (error) {
+ console.log(error)
+ }
+ } catch (error: any) {
+ console.log(error)
+ notifications.show({
+ id: "sam2",
+ message: error.message ?? "模型生成失败",
+ color: "red",
+ })
+ if (error.message === "点位超出图片范围") {
+ usePaperStore
+ .getState()
+ .supportTool?.emit("keydown", { key: "escape" })
+ }
+ }
+ },
+ [activeImage, projectDetail]
+ )
+
+ const renderTrackingAnnotation = useCallback(async () => {
+ updateLoadingFlag(true)
+ try {
+ notifications.show({
+ id: "sam2",
+ message: "模型生成中",
+ loading: true,
+ autoClose: false,
+ })
+ const ids =
+ useObjectStore.getState().selectedPath[
+ useBottomToolsStore.getState().activeImage
+ ]
+ const picArr = useBottomToolsStore.getState().selectedItems
+ const [width, height] = usePaperStore.getState().rasterSize[
+ activeImage
+ ] ?? [0, 0]
+ const currentScale =
+ usePaperStore.getState().rasterScale[activeImage] ?? 1
+ if (ids.length === 1) {
+ const id = ids[0]
+ let categoryId: any = null
+ let data: any = null
+ const activeImageData = useLabelStore.getState().label.get(activeImage)!
+ for (let [category, objArr] of activeImageData.entries()) {
+ objArr.forEach((item) => {
+ if (item[0] === id) {
+ categoryId = category
+ data = item
+ }
+ })
+ }
+ console.log(data)
+ if (categoryId && data) {
+ const contours: [number, number][] = []
+ const tags: boolean[] = []
+ data[1].forEach((item: any) => {
+ contours.push(
+ item.map(([x, y]: any) => [
+ Math.round(x / currentScale),
+ Math.round(y / currentScale),
+ ])
+ )
+ tags.push(false)
+ })
+ data[3].forEach((item: any) => {
+ contours.push(
+ item.map(([x, y]: any) => [
+ Math.round(x / currentScale),
+ Math.round(y / currentScale),
+ ])
+ )
+ tags.push(true)
+ })
+ const file_names = [...new Set([activeImage, ...picArr])]
+ const params = {
+ project_id: projectDetail?.id || 0,
+ file_names,
+ image_hw: [height, width],
+ contours,
+ hollows: tags,
+ }
+ console.log("传参", params)
+ try {
+ const res = await getTrackingAuxiliaryAnnotation(
+ msgpack.encode(params)
+ )
+ const resData = msgpack.decode(new Uint8Array(res))
+ console.log(resData)
+ if (resData.msg === "success") {
+ const {
+ future_contours,
+ }: {
+ future_contours: {
+ contours: [number, number][][]
+ hollows: boolean[]
+ }[]
+ } = resData
+ const nowTaskData = safeClone(useLabelStore.getState().label)
+ future_contours.forEach(({ contours, hollows }, index) => {
+ const fileName = file_names[index + 1]
+ const imgScale =
+ usePaperStore.getState().rasterScale[fileName] ?? 1
+ let newId =
+ useRightToolsStore
+ .getState()
+ .pathIds.reduce((a, b) => Math.max(a, b), 0) + 1
+ useRightToolsStore.getState().pushPathId(newId)
+ // 处理点位数据
+ let segmentation: Array<[number, number][]> = []
+ let hollow_segmentation: Array<[number, number][]> = []
+ contours.forEach((contour, index) => {
+ if (!hollows[index])
+ segmentation.push(
+ contour.map(([x, y]: any) => [x * imgScale, y * imgScale])
+ )
+ else
+ hollow_segmentation.push(
+ contour.map(([x, y]: any) => [x * imgScale, y * imgScale])
+ )
+ })
+ // 详情数据
+ let detail = {
+ ...initialDetail,
+ uid: usePermissionStore.getState().user_id,
+ comment: [...useLabelStore.getState().labelDefaultComments],
+ create_timestamp: dayjs().unix(),
+ sub_attributes: {},
+ image_id: activeImage,
+ category_id: categoryId,
+ }
+ const updateData: any = [
+ newId,
+ segmentation,
+ detail,
+ hollow_segmentation,
+ ]
+ if (nowTaskData.has(fileName)) {
+ const categoryMap = nowTaskData.get(fileName)!
+ if (categoryMap.has(categoryId)) {
+ const existArr = categoryMap.get(categoryId)
+ existArr?.push(updateData)
+ } else {
+ categoryMap.set(categoryId, [updateData])
+ }
+ } else {
+ let m = new Map()
+ m.set(categoryId, [updateData])
+ nowTaskData.set(fileName, m)
+ }
+ })
+ console.log(nowTaskData)
+ useLabelStore.getState().setLabel(nowTaskData)
+ useLabelStore.getState().pushStateStack(nowTaskData)
+ notifications.show({
+ id: "sam2",
+ message: "模型生成成功",
+ color: "green",
+ })
+ }
+ } catch (error) {
+ console.log(error)
+ }
+ }
+ } else if (!ids.length) {
+ notifications.show({
+ id: "sam2",
+ message: "请先选中标注对象后再进行模型调用",
+ color: "red",
+ })
+ } else {
+ notifications.show({
+ id: "sam2",
+ message: "请勿选择多个标注对象进行模型调用",
+ color: "red",
+ })
+ }
+ } catch (error) {
+ console.log(error)
+ notifications.show({
+ id: "sam2",
+ message: "模型生成失败",
+ color: "red",
+ })
+ } finally {
+ updateLoadingFlag(false)
+ }
+ }, [activeImage, projectDetail?.id, updateLoadingFlag])
+
+ // const getBase64 = (file: any): Promise =>
+ // new Promise((resolve, reject) => {
+ // const reader = new FileReader();
+ // reader.readAsDataURL(file);
+ // reader.onload = () => resolve(reader.result as string);
+ // reader.onerror = (error) => reject(error);
+ // });
+
+ useEffect(() => {
+ if (setup) {
+ const newGroup = new paper.Group({
+ applyMatrix: false,
+ selected: true,
+ strokeScaling: false,
+ })
+
+ if (canvasElem.current && paper) {
+ init(canvasElem.current, paperScope.current!, newGroup)
+ canvasElem.current.oncontextmenu = (e) => {
+ e.preventDefault()
+ }
+ let viewTool = new paper.Tool()
+ initViewTool(viewTool)
+ let panTool = new paper.Tool()
+ initPanTool(panTool, renderRectangle, forceUpdate)
+ let polygonTool = new paper.Tool()
+ initPolygonTool(
+ polygonTool,
+ renderPath,
+ renderCompoundPath,
+ forceUpdate
+ )
+ let rectangleTool = new paper.Tool()
+ initRectangleTool(rectangleTool, renderRectangle, forceUpdate)
+ let brushTool = new paper.Tool()
+ initBrushTool(brushTool, renderPath, renderCompoundPath, forceUpdate)
+ let pointTool = new paper.Tool()
+ initPointTool(pointTool, renderCircle, renderPath, forceUpdate)
+ let supportTool = new paper.Tool()
+ initSupportTool(supportTool, renderSupportAnnotation)
+ }
+ return () => {
+ newGroup.remove()
+ }
+ }
+ }, [
+ forceUpdate,
+ init,
+ initBrushTool,
+ initPanTool,
+ initPointTool,
+ initPolygonTool,
+ initRectangleTool,
+ initSupportTool,
+ initViewTool,
+ renderSupportAnnotation,
+ setup,
+ ])
+
+ const [paperSelectedPath] = useState<{
+ // key = imageId
+ [key: string]: number[]
+ }>(selectedPath)
+
+ const getOperationSchema = useCallback(
+ (operationId: string) => {
+ return (
+ projectDetail?.label_schema_list?.find(
+ (item) => item.category_id === +operationId
+ ) || null
+ )
+ },
+ [projectDetail?.label_schema_list]
+ )
+
+ const { getItemById, getItemsById } = usePaperStore()
+
+ const renderPolygons = useCallback(
+ (
+ operationId: string,
+ imageData: Map | undefined
+ ) => {
+ let operationSchema = getOperationSchema(operationId)
+
+ if (operationSchema && imageData) {
+ const toPaperPoint = (segment: any): paper.Point | null => {
+ if (segment instanceof paper.Point) return segment
+ if (segment instanceof paper.Segment) {
+ return new paper.Point(segment.point)
+ }
+ if (
+ Array.isArray(segment) &&
+ segment.length >= 2 &&
+ typeof segment[0] === "number" &&
+ typeof segment[1] === "number"
+ ) {
+ return new paper.Point(segment[0], segment[1])
+ }
+ if (
+ Array.isArray(segment) &&
+ Array.isArray(segment[0]) &&
+ segment[0].length >= 2 &&
+ typeof segment[0][0] === "number" &&
+ typeof segment[0][1] === "number"
+ ) {
+ return new paper.Point(segment[0][0], segment[0][1])
+ }
+ if (
+ segment?.point &&
+ typeof segment.point.x === "number" &&
+ typeof segment.point.y === "number"
+ ) {
+ return new paper.Point(segment.point.x, segment.point.y)
+ }
+ if (
+ segment?.point &&
+ Array.isArray(segment.point) &&
+ segment.point.length >= 2 &&
+ typeof segment.point[0] === "number" &&
+ typeof segment.point[1] === "number"
+ ) {
+ return new paper.Point(segment.point[0], segment.point[1])
+ }
+ return null
+ }
+ const toPaperPoints = (segments: any[]) => {
+ return segments
+ .map((segment) => toPaperPoint(segment))
+ .filter((point): point is paper.Point => point !== null)
+ }
+
+ let strokeColor = `rgb(${operationSchema.color[0]},${operationSchema.color[1]},${operationSchema.color[2]})`
+ let fillColor = `rgba(${operationSchema.color[0]},${operationSchema.color[1]},${operationSchema.color[2]},0.3)`
+ let blankColor = `rgba(${operationSchema.color[0]},${operationSchema.color[1]},${operationSchema.color[2]},0.01)`
+
+ let paths = imageData.get(operationId)
+
+ switch (
+ operationSchema &&
+ labelTypeMap.get(operationSchema.label_type)
+ ) {
+ case "多边形":
+ paths?.forEach((item) => {
+ let outerPaths =
+ item[1]
+ ?.map((child) => {
+ const points = toPaperPoints(child)
+ if (!points.length) return null
+ return addPolygon(
+ renderPath,
+ points,
+ {
+ strokeColor: strokeColor,
+ strokeWidth: 2,
+ // fillColor: fillColor,
+ fillColor: blankColor,
+ visible:
+ !paperPathStatus[activeImage + item[0]]?.["HIDE"],
+ },
+ {
+ type: "polygon",
+ id: item[0],
+ imageId: activeImage,
+ operationId: operationId,
+ fillColor: fillColor,
+ blankColor: blankColor,
+ selected: paperSelectedPath[activeImage]?.includes(
+ item[0]
+ ),
+ }
+ )
+ })
+ .filter((path): path is paper.Path => !!path) || []
+ let innerPaths =
+ item[3]
+ ?.map((child) => {
+ const points = toPaperPoints(child)
+ if (!points.length) return null
+ return addPolygon(
+ renderPath,
+ points,
+ {
+ strokeColor: strokeColor,
+ strokeWidth: 2,
+ fillColor: fillColor,
+ visible:
+ !paperPathStatus[activeImage + item[0]]?.["HIDE"],
+ },
+ {
+ type: "polygon",
+ id: item[0],
+ imageId: activeImage,
+ operationId: operationId,
+ fillColor: fillColor,
+ blankColor: blankColor,
+ selected: paperSelectedPath[activeImage]?.includes(
+ item[0]
+ ),
+ isHollowPolygon: true,
+ }
+ )
+ })
+ .filter((path): path is paper.Path => !!path) || []
+
+ addCompoundPath(
+ renderCompoundPath,
+ [...outerPaths, ...innerPaths],
+ {
+ strokeColor: strokeColor,
+ strokeWidth: 2,
+ // fillColor: fillColor,
+ fillColor: blankColor,
+ visible: !paperPathStatus[activeImage + item[0]]?.["HIDE"],
+ },
+ {
+ type: "polygon",
+ id: item[0],
+ imageId: activeImage,
+ operationId: operationId,
+ fillColor: fillColor,
+ blankColor: blankColor,
+ selected: paperSelectedPath[activeImage]?.includes(item[0]),
+ }
+ )
+
+ // renderCompoundPath(usePaperStore.getState().group!, { children });
+ // item[1].forEach((child) => {
+ // addPolygon(
+ // renderPath,
+ // child.map((segment: any) => {
+ // if (segment instanceof paper.Point) {
+ // return segment;
+ // } else {
+ // return new paper.Point(segment[0], segment[1]);
+ // }
+ // }),
+ // {
+ // strokeColor: strokeColor,
+ // strokeWidth: 2,
+ // // fillColor: fillColor,
+ // fillColor: blankColor,
+ // visible: !paperPathStatus[activeImage + item[0]]?.["HIDE"],
+ // selected: paperSelectedPath[activeImage]?.includes(item[0]),
+ // },
+ // {
+ // type: "polygon",
+ // id: item[0],
+ // imageId: activeImage,
+ // operationId: operationId,
+ // fillColor: fillColor,
+ // blankColor: blankColor,
+ // }
+ // );
+ // });
+ })
+ return
+ case "关键点":
+ paths?.forEach((item) => {
+ item[1]?.forEach((child) => {
+ // 保存前排好序
+ child.forEach((segment: any, segmentIndex: number) => {
+ let point = toPaperPoint(segment)
+ if (!point) return
+ addPoint(
+ renderCircle,
+ point,
+ {
+ fillColor: null,
+ strokeColor: strokeColor,
+ radius: 3,
+ },
+ {
+ imageId: useBottomToolsStore.getState().activeImage,
+ operationId: useTopToolsStore.getState().activeOperation,
+ text: segmentIndex + 1,
+ id: item[0],
+ attributes: item[2]?.circles?.[segmentIndex]?.attributes,
+ }
+ )
+ })
+ const points = toPaperPoints(child)
+ if (!points.length) return
+ addPointLine(
+ renderPath,
+ points,
+ {
+ strokeColor: strokeColor,
+ strokeWidth: 2,
+ // fillColor: fillColor,
+ fillColor: blankColor,
+ visible: !paperPathStatus[activeImage + item[0]]?.["HIDE"],
+ },
+ {
+ id: item[0],
+ imageId: activeImage,
+ operationId: operationId,
+ fillColor: fillColor,
+ blankColor: blankColor,
+ selected: paperSelectedPath[activeImage]?.includes(item[0]),
+ }
+ )
+ })
+ })
+ return
+ case "多线段":
+ paths?.forEach((item) => {
+ let outerPaths =
+ item[1]
+ ?.map((child) => {
+ const points = toPaperPoints(child)
+ if (!points.length) return null
+ return addBrush(
+ renderPath,
+ points,
+ {
+ strokeColor: strokeColor,
+ strokeWidth: 2,
+ // fillColor: fillColor,
+ fillColor: blankColor,
+ visible:
+ !paperPathStatus[activeImage + item[0]]?.["HIDE"],
+ },
+ {
+ type: "brush",
+ id: item[0],
+ imageId: activeImage,
+ operationId: operationId,
+ fillColor: fillColor,
+ blankColor: blankColor,
+ selected: paperSelectedPath[activeImage]?.includes(
+ item[0]
+ ),
+ }
+ )
+ })
+ .filter((path): path is paper.Path => !!path) || []
+
+ addCompoundPath(
+ renderCompoundPath,
+ outerPaths,
+ {
+ strokeColor: strokeColor,
+ strokeWidth: 2,
+ // fillColor: fillColor,
+ fillColor: blankColor,
+ visible: !paperPathStatus[activeImage + item[0]]?.["HIDE"],
+ },
+ {
+ type: "brush",
+ id: item[0],
+ imageId: activeImage,
+ operationId: operationId,
+ fillColor: fillColor,
+ blankColor: blankColor,
+ selected: paperSelectedPath[activeImage]?.includes(item[0]),
+ }
+ )
+ })
+ return
+ case "2D框":
+ paths?.forEach((item) => {
+ item[1].forEach((child) => {
+ let p = toPaperPoint(child[1])
+ let dp = toPaperPoint(child[3])
+ if (!p || !dp) {
+ console.warn(
+ "[PaperContainer] skip invalid rectangle segment",
+ {
+ id: item[0],
+ child,
+ }
+ )
+ return
+ }
+
+ addRectangle(
+ renderRectangle,
+ {
+ from: p,
+ to: dp,
+ strokeColor: strokeColor,
+ strokeWidth: 2,
+ // fillColor: fillColor,
+ fillColor: blankColor,
+ visible: !paperPathStatus[activeImage + item[0]]?.["HIDE"],
+ },
+ {
+ type: "rectangle",
+ id: item[0],
+ imageId: activeImage,
+ operationId: operationId,
+ fillColor: fillColor,
+ blankColor: blankColor,
+ selected: paperSelectedPath[activeImage]?.includes(item[0]),
+ }
+ )
+ })
+ })
+ return
+ default:
+ return
+ }
+ }
+ },
+ [
+ activeImage,
+ addBrush,
+ addCompoundPath,
+ addPoint,
+ addPointLine,
+ addPolygon,
+ addRectangle,
+ getOperationSchema,
+ paperPathStatus,
+ paperSelectedPath,
+ ]
+ )
+
+ // 生成辅助标注结果数据并绘制
+ const saveSupportAnnotationData = useCallback(() => {
+ const group = usePaperStore.getState().group
+ if (!group) return
+ const compoundPath = group.getItems({
+ data: { id: "support", type: "parent" },
+ })?.[0]
+ if (compoundPath) {
+ console.log(compoundPath)
+ const children = compoundPath.children as paper.Path[]
+ const id =
+ useRightToolsStore
+ .getState()
+ .pathIds.reduce((a, b) => Math.max(a, b), 0) + 1
+ useRightToolsStore.getState().pushPathId(id)
+ // 处理点位数据
+ let segmentation: Array<[number, number][]> = []
+ let hollow_segmentation: Array<[number, number][]> = []
+ children.forEach((child) => {
+ if (child.data.isHollowPolygon) {
+ hollow_segmentation.push(
+ child.segments.map((seg) => [seg.point.x, seg.point.y])
+ )
+ } else {
+ segmentation.push(
+ child.segments.map((seg) => [seg.point.x, seg.point.y])
+ )
+ }
+ })
+ console.log(segmentation, hollow_segmentation)
+ // 处理详情数据
+ let category = useTopToolsStore
+ .getState()
+ .objectOperations.find(
+ (item) =>
+ item.category_id.toString() ===
+ useTopToolsStore.getState().activeOperation
+ )
+ let label_class = category?.label_class || ""
+ let subAttr = Object.assign(
+ {},
+ useTopToolsStore.getState().subAttributes[label_class]
+ )
+ let detail = {
+ ...initialDetail,
+ uid: usePermissionStore.getState().user_id,
+ comment: [...useLabelStore.getState().labelDefaultComments],
+ create_timestamp: dayjs().unix(),
+ sub_attributes: subAttr,
+ image_id: activeImage,
+ category_id: Number(useTopToolsStore.getState().activeOperation),
+ }
+ // 清空support对象
+ clearSupportAnnotationItem()
+ setOperation(activeImage, useTopToolsStore.getState().activeOperation, [
+ id,
+ segmentation,
+ detail,
+ hollow_segmentation,
+ ])
+ console.log(usePaperStore.getState().group)
+ // console.log(first)
+ // 更新当前页绘制数据
+ usePaperStore
+ .getState()
+ .group!.getItems({})
+ .filter((item) => item.data.id)
+ .forEach((item) => {
+ item.remove()
+ })
+ const imgMap = useLabelStore.getState().label.get(activeImage)!
+ for (const key of imgMap.keys()) {
+ renderPolygons(key, imgMap)
+ }
+ // 模型数据生成完毕 调整绘制模式
+ usePaperStore.getState().setPaperMode("pan")
+ }
+ }, [activeImage, renderPolygons, setOperation])
+
+ const copyAnnotationDataToMultiFrame = useCallback(() => {
+ const picArr = useBottomToolsStore
+ .getState()
+ .selectedItems.filter((k) => k !== activeImage)
+ const copyArr = useKeyboardStore.getState().copyDataIds
+ if (picArr.length && copyArr.length) {
+ const data = safeClone(useLabelStore.getState().label)
+ // 先判断是否有重复的id
+ let existedIds: number[] = []
+ picArr.forEach((imageId) => {
+ if (data.has(imageId) && data.get(imageId)?.size) {
+ for (let arr of data.get(imageId)!.values()) {
+ arr.forEach((i) => existedIds.push(i[0]))
+ }
+ }
+ })
+
+ const handleData = (flag = false) => {
+ try {
+ const activeData = data.get(activeImage) ?? new Map()
+ const activeScale =
+ usePaperStore.getState().rasterScale[activeImage] ?? 1
+ const needCopyMap = new Map()
+ for (let [key, value] of activeData.entries()) {
+ let arr = value.filter(([id]: any) => copyArr.includes(id))
+ console.log(arr)
+ if (arr.length)
+ needCopyMap.set(
+ key,
+ arr.map(([id, seg, detail, hollow]: any) => [
+ id,
+ seg.map((item: any) =>
+ item.map((p: any) => {
+ if (p instanceof paper.Point) {
+ return [p.x / activeScale, p.y / activeScale]
+ } else {
+ return [p[0] / activeScale, p[1] / activeScale]
+ }
+ })
+ ),
+ {
+ ...detail,
+ uid: usePermissionStore.getState().user_id,
+ create_timestamp: dayjs().unix(),
+ first_modified_timestamp: 0,
+ first_modified_uid: 0,
+ last_modified_timestamp: 0,
+ last_modified_uid: 0,
+ },
+ hollow.map((item: any) =>
+ item.map((p: any) => {
+ if (paper instanceof paper.Segment) {
+ return [
+ p.point.x / activeScale,
+ p.point.y / activeScale,
+ ]
+ } else {
+ return [p[0] / activeScale, p[1] / activeScale]
+ }
+ })
+ ),
+ ])
+ )
+ }
+
+ picArr.forEach((imageId) => {
+ const picScale = usePaperStore.getState().rasterScale[imageId] ?? 1
+
+ if (data.has(imageId)) {
+ const categoryMap = data.get(imageId)
+ if (categoryMap?.size) {
+ let needCopyIds: number[] = []
+ let needCopyCategoryIds: string[] = []
+ for (let [key, needCopyItemsArr] of needCopyMap.entries()) {
+ // console.log(key);
+ needCopyItemsArr.forEach((item: any) => {
+ needCopyIds.push(item[0])
+ needCopyCategoryIds.push(key)
+ })
+ // let arr = needCopyItemsArr.map((item: any) => [
+ // item[0],
+ // item[1].map((path: any) =>
+ // path.map(([x, y]: any) => [x * picScale, y * picScale])
+ // ),
+ // item[2],
+ // item[3].map((path: any) =>
+ // path.map(([x, y]: any) => [x * picScale, y * picScale])
+ // ),
+ // ]);
+ // needCopyMap.set(key, arr);
+ }
+ let currentImageItemIds: number[] = []
+ let currentImageCategoryIds: string[] = []
+ for (let [key, items] of categoryMap.entries()) {
+ items.forEach((item) => {
+ currentImageItemIds.push(item[0])
+ currentImageCategoryIds.push(key)
+ })
+ }
+ let finalArr: number[] = []
+ let finalCategory: string[] = []
+ needCopyIds.forEach((id, index) => {
+ const findIndex = currentImageItemIds.findIndex(
+ (i) => i === id
+ )
+ if (findIndex !== -1) {
+ if (flag) {
+ console.log(findIndex)
+ // 确认覆盖
+ finalArr.push(id)
+ finalCategory.push(needCopyCategoryIds[index])
+ let categoryId = currentImageCategoryIds[findIndex]
+ let arr = categoryMap.get(categoryId)!
+ let findIndexInArr = arr.findIndex((v) => v[0] === id)
+ let oldData = arr.find((a) => a[0] === id)!
+ let arr2 = needCopyMap.get(needCopyCategoryIds[index])!
+ let newData = {
+ ...arr2.find((b: any) => b[0] === id),
+ uid: oldData[2].uid,
+ create_timestamp: oldData[2].create_timestamp,
+ first_modified_timestamp:
+ oldData[2].first_modified_timestamp || dayjs().unix(),
+ first_modified_uid:
+ oldData[2].first_modified_uid ||
+ usePermissionStore.getState().user_id,
+ last_modified_timestamp: dayjs().unix(),
+ last_modified_uid:
+ usePermissionStore.getState().user_id,
+ }
+ let updateArr = arr2.map((b: any) => {
+ return b[0] === id ? [b[0], b[1], newData, b[3]] : b
+ })
+ needCopyMap.set(needCopyCategoryIds[index], updateArr)
+ categoryMap.set(
+ categoryId,
+ arr.filter((_v, i) => i !== findIndexInArr)
+ )
+ }
+ } else {
+ finalArr.push(id)
+ finalCategory.push(needCopyCategoryIds[index])
+ }
+ })
+
+ finalCategory.forEach((category, index) => {
+ const categoryArr = categoryMap.get(category) ?? []
+ const copyCategoryArr = needCopyMap.get(category)!
+ let copyId = finalArr[index]
+
+ let newData = copyCategoryArr.find(
+ (copyItem: any) => copyItem[0] === copyId
+ )
+ newData = [
+ newData[0],
+ newData[1].map((path: any) =>
+ path.map(([x, y]: any) => [x * picScale, y * picScale])
+ ),
+ newData[2],
+ newData[3].map((path: any) =>
+ path.map(([x, y]: any) => [x * picScale, y * picScale])
+ ),
+ ]
+ categoryArr.push(newData)
+ categoryMap.set(category, categoryArr)
+ })
+ } else {
+ // categoryMap实际没有值 需要重新生成
+ let newCategoryMap = new Map()
+ for (let [key, needCopyItemsArr] of needCopyMap) {
+ let arr = needCopyItemsArr.map((item: any) => [
+ item[0],
+ item[1].map((path: any) =>
+ path.map(([x, y]: any) => [x * picScale, y * picScale])
+ ),
+ item[2],
+ item[3].map((path: any) =>
+ path.map(([x, y]: any) => [x * picScale, y * picScale])
+ ),
+ ])
+ newCategoryMap.set(key, arr)
+ }
+ data.set(imageId, newCategoryMap)
+ }
+ } else {
+ data.set(imageId, needCopyMap)
+ }
+ })
+ notifications.show({ message: "复制成功", color: "green" })
+ useLabelStore.getState().setLabel(data)
+ useLabelStore.getState().pushStateStack(data)
+ useBottomToolsStore.getState().setSelectedItems("", false, false)
+ setConfirmModalOpened(false)
+ } catch (error) {
+ console.log(error)
+ notifications.show({ message: "复制失败", color: "red" })
+ }
+ }
+
+ let flag = existedIds.find((item) => copyArr.includes(item))
+ if (flag) {
+ setConfirmModalCallback(() => handleData)
+ setConfirmModalOpened(true)
+ return
+ } else {
+ handleData()
+ }
+ }
+ }, [activeImage])
+
+ const [rasterInited, setRasterInited] = useState(false)
+ const rasterLoadRequestIdRef = useRef(0)
+
+ const renderAndScaleRaster = useCallback(
+ async (paperGroup: paper.Group) => {
+ // const raster = renderRaster(paperGroup, {
+ // source: `${process.env.NEXT_PUBLIC_URL}/api/v1/label_server/data/image?data_name=${activeImage}&project_path=${projectDetail?.rpath}`,
+ // });
+
+ if (activeImage && projectDetail?.id) {
+ const requestId = ++rasterLoadRequestIdRef.current
+ const requestImage = activeImage
+ const isStaleRasterRequest = () => {
+ const currentImage = useBottomToolsStore.getState().activeImage
+ const stale =
+ requestId !== rasterLoadRequestIdRef.current ||
+ currentImage !== requestImage
+ if (stale) {
+ console.warn("[PaperContainer] ignore stale raster callback", {
+ requestId,
+ latestRequestId: rasterLoadRequestIdRef.current,
+ requestImage,
+ currentImage,
+ })
+ }
+ return stale
+ }
+
+ console.log(usePaperStore.getState().paperScope)
+ // console.log(activeImage, projectDetail?.rpath);
+ notifications.show({
+ message: "图片加载中...",
+ loading: true,
+ autoClose: false,
+ id: "loadingRaster",
+ })
+ try {
+ let raster
+ let text
+ const images = useImagesStore.getState().images
+ const currentImageBase64Text = images.get(activeImage)
+ if (currentImageBase64Text) {
+ text = currentImageBase64Text
+ } else {
+ const response = await getServerImage({
+ data_names: [activeImage],
+ data_type: 0,
+ project_id: projectDetail?.id,
+ })
+ if (isStaleRasterRequest()) return
+ text = `data:image/jpeg;base64,${response}`
+ images.set(activeImage, text)
+ useImagesStore.getState().setImages(images)
+ }
+ if (isStaleRasterRequest()) return
+ if (!text) return
+ raster = renderRaster(paperGroup, {
+ source: text,
+ data: {
+ name: "pic",
+ },
+ })
+ if (!raster) return
+
+ raster.onLoad = function () {
+ if (isStaleRasterRequest()) {
+ raster.remove()
+ return
+ }
+ // Scale the raster to fit the canvas while maintaining aspect ratio
+ let canvasWidth =
+ imgSize?.clientWidth ?? paperScope.current?.view.bounds.width
+ let canvasHeight =
+ imgSize?.clientHeight ?? paperScope.current?.view.bounds.height
+
+ if (!canvasWidth || !canvasHeight) {
+ console.warn(
+ "[PaperContainer] skip raster scale: invalid canvas",
+ {
+ requestId,
+ requestImage,
+ canvasWidth,
+ canvasHeight,
+ }
+ )
+ raster.remove()
+ return
+ }
+
+ let scaleX = canvasWidth! / raster.bounds.width
+ let scaleY = canvasHeight! / raster.bounds.height
+ setRasterSize(activeImage, [
+ raster.bounds.width,
+ raster.bounds.height,
+ ])
+
+ let scale = Math.min(scaleX, scaleY) // Maintain aspect ratio
+ if (!Number.isFinite(scale) || scale <= 0) {
+ console.warn(
+ "[PaperContainer] skip raster scale: invalid scale",
+ {
+ requestId,
+ requestImage,
+ scale,
+ scaleX,
+ scaleY,
+ }
+ )
+ raster.remove()
+ return
+ }
+
+ // 将raster以（0，0）为中心点进行缩放
+ raster.scale(scale, new paper.Point(0, 0))
+ const currentImgScale =
+ usePaperStore.getState().rasterScale[activeImage]
+ console.debug("[PaperContainer] raster scale reconcile", {
+ image: activeImage,
+ currentImgScale,
+ nextScale: scale,
+ branch: !currentImgScale
+ ? "init-scale"
+ : currentImgScale !== scale
+ ? "rescale"
+ : "keep",
+ })
+ // 当前图片无缩放比例或缩放比例不等于上次记录比例时
+ if (!currentImgScale) {
+ setRasterScale(activeImage, scale)
+ const newData = adjustPoints(
+ activeImage,
+ useLabelStore.getState().label,
+ scale
+ )
+ // 处理hollowPoints
+ useLabelStore.getState().setLabel(newData)
+ let stack = useLabelStore.getState().stateStack
+ if (stack.length) {
+ useLabelStore
+ .getState()
+ .setStateStack(
+ stack.map((item) => adjustPoints(activeImage, item, scale))
+ )
+ }
+ } else if (currentImgScale !== scale) {
+ // 先将相关数据恢复到原始比例
+ const restoreScale =
+ usePaperStore.getState().reciprocalRasterScale[activeImage]
+ const restoreData = adjustPoints(
+ activeImage,
+ useLabelStore.getState().label,
+ restoreScale
+ )
+ setRasterScale(activeImage, scale)
+ const newData = adjustPoints(activeImage, restoreData, scale)
+ useLabelStore.getState().setLabel(newData)
+ let stack = useLabelStore.getState().stateStack
+ if (stack.length) {
+ useLabelStore
+ .getState()
+ .setStateStack(
+ stack.map((item) => adjustPoints(activeImage, item, scale))
+ )
+ }
+ }
+ // 调整raster的左上角到（0，0）
+ raster.position = new paper.Point(
+ raster.bounds.width / 2,
+ raster.bounds.height / 2
+ )
+ // if (!useTopToolsStore.getState().saveCurrentScale)
+ usePaperStore.getState().group!.position = raster.position
+ setRasterPath(new paper.Path.Rectangle(raster.bounds))
+ // 将raster置底
+ raster.sendToBack()
+ setRasterInited(true)
+ console.log(usePaperStore.getState().group)
+ usePaperStore.getState().group?.bringToFront()
+ }
+ } catch (error) {
+ console.log(error)
+ } finally {
+ notifications.hide("loadingRaster")
+ }
+ }
+ },
+ [
+ activeImage,
+ imgSize?.clientHeight,
+ imgSize?.clientWidth,
+
+ projectDetail?.id,
+ setRasterPath,
+ setRasterScale,
+ setRasterSize,
+ ]
+ )
+
+ const loadImageAndPolygons = useCallback(
+ async (
+ // imageData: Map | undefined,
+ group: paper.Group
+ ) => {
+ // 清除当前的 raster 和多边形
+ group.removeChildren()
+ // 添加新的 raster
+ setRasterInited(false)
+ renderAndScaleRaster(group)
+ // if (imageData) {
+ // objectOperations?.forEach((item) => {
+ // renderPolygons(item.category_id.toString(), imageData);
+ // });
+ // }
+ },
+ [renderAndScaleRaster]
+ )
+
+ useEffect(() => {
+ const hasCachedImage = !!useImagesStore.getState().images.get(activeImage)
+ if (loadingData && !hasCachedImage) return
+ if (!imgSize?.clientWidth || !imgSize?.clientHeight) return
+ const currentGroup = usePaperStore.getState().group
+ if (currentGroup && projectDetail) {
+ if (!useTopToolsStore.getState().saveCurrentScale) {
+ currentGroup.scaling = new paper.Point(1, 1)
+ useTopToolsStore.getState().setScale(1)
+ } else {
+ usePaperStore
+ .getState()
+ .setGroupScale(useTopToolsStore.getState().scale)
+ }
+ loadImageAndPolygons(
+ // storeLabel.get(activeImage),
+ currentGroup
+ )
+ }
+ }, [
+ activeImage,
+ imgSize?.clientHeight,
+ imgSize?.clientWidth,
+ loadImageAndPolygons,
+ loadingData,
+ projectDetail,
+ ])
+
+ useEffect(() => {
+ if (rasterInited) {
+ if (storeLabel.get(activeImage)) {
+ objectOperations?.forEach((item) => {
+ renderPolygons(
+ item.category_id.toString(),
+ storeLabel.get(activeImage)
+ )
+ })
+ renderGroupPath()
+ renderTag()
+ }
+ setRasterInited(false)
+ }
+ }, [
+ activeImage,
+ objectOperations,
+ rasterInited,
+ renderPolygons,
+ renderTag,
+ storeLabel,
+ ])
+
+ useEffect(() => {
+ renderGroupPath()
+ }, [storeLabel])
+
+ useEffect(() => {
+ renderTag()
+ }, [showTags, showTagsConfigs, storeLabel, renderTag])
+
+ const [ids, setIds] = useState([])
+ const [existIds, setExistIds] = useState([])
+ // select use existIds todo
+ false && console.log(existIds)
+
+ const [comments, setComments] = useState([])
+
+ const form = useForm({
+ initialValues: {
+ id: undefined,
+ operation: undefined,
+ sub_attributes: {},
+ check_box_comments: [],
+ text_comments: "",
+ },
+ })
+ const checkboxComments = form.values.check_box_comments
+ const textComment = form.values.text_comments
+
+ const filterOperations = useMemo(() => {
+ let currentLabelType = objectOperations.find(
+ (operation) => operation.category_id.toString() === operationId
+ )?.label_type
+
+ return objectOperations.filter(
+ (operation) => operation.label_type === currentLabelType
+ )
+ }, [objectOperations, operationId])
+
+ useEffect(() => {
+ if (projectDetail?.comment_rule) {
+ if (projectDetail?.comment_rule?.check_box_rules?.length) {
+ setComments(
+ projectDetail?.comment_rule?.check_box_rules.map((item) => item.text)
+ )
+ }
+ }
+ }, [projectDetail?.comment_rule])
+
+ const pathItem = useMemo(() => {
+ return storeLabel
+ .get(activeImage)
+ ?.get(operationId)
+ ?.find((item) => item[0] === id)
+ }, [activeImage, id, operationId, storeLabel])
+
+ // 打开弹窗时，初始化form数据
+ useEffect(() => {
+ if (showContextMenu) {
+ form.reset()
+
+ const labelData = useLabelStore.getState().label
+ const currentPath = labelData
+ .get(activeImage)
+ ?.get(operationId)
+ ?.find((item) => item[0] === id)
+
+ form.setFieldValue("id", id)
+ form.setFieldValue("operation", operationId)
+ if (currentPath?.[2].sub_attributes) {
+ let operationSchema = getOperationSchema(operationId)
+ let obj: {
+ [key: string]: string | string[]
+ } = {}
+ Object.entries(currentPath?.[2].sub_attributes).map(([key, value]) => {
+ let select_mode = operationSchema?.sub_attributes_describe?.find(
+ (item) => item.chinese_name === key
+ )?.select_mode
+ switch (select_mode) {
+ case 2:
+ obj[key] = (value as string).split(",")
+ return
+ default:
+ obj[key] = value as string
+ return
+ }
+ })
+ form.setFieldValue("sub_attributes", obj)
+ }
+ if (currentPath?.[2].comment) {
+ const nowComment =
+ currentPath?.[2].comment[currentPath?.[2].comment.length - 1]
+ form.setFieldValue(
+ "check_box_comments",
+ nowComment && nowComment.check_box_comments.length
+ ? nowComment.check_box_comments
+ : []
+ )
+ form.setFieldValue(
+ "text_comments",
+ nowComment && nowComment.text_comments.length
+ ? nowComment.text_comments[0]
+ : ""
+ )
+ }
+ // 可选的ids
+ let images = Array.from(labelState.keys()).filter(
+ (key) => key !== activeImage
+ )
+ let ids: number[] = [id]
+ images.map((imageId) => {
+ // 可切换成其他图片同一类型的id
+ filterOperations.map((operation) => {
+ labelData
+ .get(imageId)
+ ?.get(operation.category_id.toString())
+ ?.map((arr) => arr[0])?.length &&
+ ids.push(
+ ...labelData
+ .get(imageId)
+ ?.get(operation.category_id.toString())
+ ?.map((arr) => arr[0])!
+ )
+ })
+ })
+ let existIds: number[] = []
+ objectOperations.forEach((operation) => {
+ labelData
+ .get(activeImage)
+ ?.get(operation.category_id.toString())
+ ?.map((arr) => arr[0])?.length &&
+ existIds.push(
+ ...labelData
+ .get(activeImage)
+ ?.get(operation.category_id.toString())
+ ?.map((arr) => arr[0])!
+ )
+ })
+ setExistIds(Array.from(new Set(existIds)))
+
+ ids.push(
+ useRightToolsStore
+ .getState()
+ .pathIds.reduce((a, b) => Math.max(a, b), 0) + 1
+ )
+ let selectIds = ids.filter((id) => !existIds.includes(id))
+
+ setIds(Array.from(new Set(selectIds)))
+ } else {
+ // console.log(form.getFieldValue("id"), id);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [
+ activeImage,
+ filterOperations,
+ getOperationSchema,
+ id,
+ labelState,
+ objectOperations,
+ operationId,
+ showContextMenu,
+ ])
+
+ // 监听当前标注对象批注值变化
+ useEffect(() => {
+ if (!showContextMenu) return
+ if (!id || !operationId || !activeImage) return
+ if (useTopToolsStore.getState().currentTimeKey === "label") return
+ const currentDetail = useLabelStore
+ .getState()
+ .getLabelDetailDataByKeys(activeImage, operationId, id)
+ if (!currentDetail) return
+ const { comment } = currentDetail
+ let updatedComment: any[] = []
+ // 当表单当前值跟标注对象detail中comment值相同时不更新detail中comment状态
+ if (
+ checkCommentsIsSame(
+ comment[comment.length - 1].check_box_comments,
+ comment[comment.length - 1].text_comments,
+ checkboxComments,
+ textComment ? [textComment] : []
+ )
+ )
+ return
+ // 无批注
+ if ((!checkboxComments || !checkboxComments.length) && !textComment) {
+ updatedComment = comment.map((item: Comment, index: number) =>
+ index < comment.length - 1
+ ? item
+ : {
+ ...item,
+ comment_type: 1,
+ date: dayjs().unix(),
+ check_box_comments: [],
+ text_comments: [],
+ }
+ )
+ } else {
+ let latestItem = comment[comment.length - 1]
+ latestItem = {
+ ...latestItem,
+ comment_type: 2,
+ date: dayjs().unix(),
+ check_box_comments:
+ checkboxComments && checkboxComments.length ? checkboxComments : [],
+ text_comments: textComment ? [textComment] : [],
+ }
+ updatedComment = comment.map((item: Comment, index: number) =>
+ index < comment.length - 1 ? item : latestItem
+ )
+ }
+ useLabelStore
+ .getState()
+ .updateLabelDetailDataByKeys(activeImage, operationId, id, {
+ ...currentDetail,
+ comment: updatedComment,
+ })
+ }, [
+ activeImage,
+ checkboxComments,
+ id,
+ operationId,
+ showContextMenu,
+ textComment,
+ ])
+
+ const newDetail = useMemo(() => {
+ const currentDetail = getLabelDetailDataByKeys(activeImage, operationId, id)
+ const detail = currentDetail
+ ? {
+ ...currentDetail,
+ first_modified_timestamp:
+ currentDetail.first_modified_timestamp || dayjs().unix(),
+ first_modified_uid:
+ currentDetail.first_modified_uid ||
+ usePermissionStore.getState().user_id,
+ last_modified_timestamp: dayjs().unix(),
+ last_modified_uid: usePermissionStore.getState().user_id,
+ }
+ : {
+ ...initialDetail,
+ create_timestamp: dayjs().unix(),
+ }
+ return detail
+ }, [activeImage, getLabelDetailDataByKeys, id, operationId])
+
+ const handleChangeContextMenuId = useCallback(
+ (newId: number) => {
+ // 设置选中id
+ updateSelectedPath(activeImage, "DELETE", id)
+ updateSelectedPath(activeImage, "ADD", newId)
+ // 修改多边形data.id storelabel中 id detail
+ if (getItemById(id)) getItemById(id)!.data.id = newId
+ setOperation(activeImage, operationId, [
+ newId,
+ pathItem?.[1] || [],
+ newDetail,
+ pathItem?.[3] || [],
+ ])
+ deleteOperation(activeImage, operationId, id)
+ // 设置菜单id
+ setContextMenuId(newId)
+ useRightToolsStore.getState().pushPathId(newId)
+ },
+ [
+ activeImage,
+ deleteOperation,
+ getItemById,
+ id,
+ newDetail,
+ operationId,
+ pathItem,
+ setContextMenuId,
+ setOperation,
+ updateSelectedPath,
+ ]
+ )
+
+ const handleChangeContextMenuOperation = useCallback(
+ (newOperation: string) => {
+ const operationSchema = getOperationSchema(newOperation)
+ const strokeColor = operationSchema
+ ? `rgb(${operationSchema.color[0]},${operationSchema.color[1]},${operationSchema.color[2]})`
+ : "rgb(0,0,0)"
+ const fillColor = operationSchema
+ ? `rgba(${operationSchema.color[0]},${operationSchema.color[1]},${operationSchema.color[2]},0.3)`
+ : "rgba(0,0,0,0.3)"
+ const blankColor = operationSchema
+ ? `rgba(${operationSchema.color[0]},${operationSchema.color[1]},${operationSchema.color[2]},0.01)`
+ : "rgba(0,0,0,0.01)"
+ if (getItemsById(id)) {
+ getItemsById(id).forEach((item) => {
+ const data = item.data
+ if (data.operationId) {
+ data.operationId = newOperation
+ if (data.type !== "text")
+ item.strokeColor = new paper.Color(strokeColor)
+ if (data.type !== "brush" && data.type !== "point")
+ item.fillColor = new paper.Color(fillColor)
+ item.data =
+ data.type !== "mask" && data.type !== "text"
+ ? Object.assign(data || {}, {
+ fillColor,
+ blankColor,
+ strokeColor,
+ })
+ : data
+ // // 如果是组合类型 则遍历将children的data变更
+ // if (item instanceof paper.CompoundPath) {
+ // item.children.forEach((path) => {
+ // path.strokeColor = new paper.Color(strokeColor);
+ // path.fillColor = new paper.Color(fillColor);
+ // path.data = Object.assign(path.data || {}, {
+ // operationId: newOperation,
+ // fillColor,
+ // blankColor,
+ // strokeColor,
+ // });
+ // });
+ // }
+ }
+ })
+ }
+ // newOperation的subAttributes
+ let subAttr = Object.assign(
+ {},
+ useTopToolsStore.getState().subAttributes[
+ operationSchema?.label_class ?? ""
+ ]
+ )
+ // 修改labeldata
+ setOperation(activeImage, newOperation, [
+ id,
+ pathItem?.[1] || [],
+ { ...newDetail, sub_attributes: subAttr },
+ pathItem?.[3] || [],
+ ])
+ deleteOperation(activeImage, operationId, id)
+ // 修改context的operationId
+ setContextMenuOperationId(newOperation)
+ },
+ [
+ activeImage,
+ deleteOperation,
+ getItemsById,
+ getOperationSchema,
+ id,
+ newDetail,
+ operationId,
+ pathItem,
+ setContextMenuOperationId,
+ setOperation,
+ ]
+ )
+
+ const handleChangeContextMenuSubAttr = useCallback(
+ (key: string, value: string) => {
+ setOperation(activeImage, operationId, [
+ id,
+ pathItem?.[1] || [],
+ {
+ ...newDetail,
+ ...(pathItem?.[2] || {}),
+ sub_attributes: Object.assign(newDetail.sub_attributes || {}, {
+ [key]: value,
+ }),
+ },
+ pathItem?.[3] || [],
+ ])
+ },
+ [activeImage, id, newDetail, operationId, pathItem, setOperation]
+ )
+
+ const contextMenu = useMemo(() => {
+ let operationSchema = getOperationSchema(operationId)
+ const currentType = useTopToolsStore.getState().currentTimeKey
+
+ return (
+
+
+
+