@gientech/modual 2.2.3-fix.5 → 2.2.3-fix.6

package/src/modules/chatCompare/components/components/DrawerContent.tsx

@@ -0,0 +1,138 @@
+import { uid } from 'uid';
+import { useMemo } from 'react';
+import {
+  dealMinioUrl,
+  getFileName,
+  getFilePath,
+  getFileType,
+} from '../../../../utils/gientechCommon/utils/index';
+import { GientechStreamReader } from '../../../streamFilesReader';
+export const DrawerContent = ({
+  content,
+  onClose,
+  token,
+}: {
+  token: string;
+  content: {
+    file_source: string;
+    contents: any[];
+    curMark: string;
+    file_type: string;
+    title: string;
+    metadata: any;
+    pdfPages: number | undefined;
+    url: string;
+    parse_url: string;
+  } | null;
+  onClose: any;
+}) => {
+  const getAnnotations: any = (content: any) => {
+    if (!content?.metadata) return;
+    const fileType = getFileType(content, '');
+    const { page_number, page_size, position, offset, chunk_type } = content.metadata;
+    if (fileType === 'markdown_table') {
+      if (offset?.length) {
+        return {
+          annotations: [{ id: uid(), offsets: offset }],
+          initialPage: 1,
+        };
+      } else {
+        return {};
+      }
+    } else {
+      if (!page_size || !position) {
+        console.log('%c缺少文件size或者文件坐标', 'color: red');
+        return {};
+      }
+      const pageSizes = Array.isArray(page_size) ? page_size : JSON.parse(page_size);
+      if (!pageSizes.length) {
+        console.log('%c缺少文件size', 'color: red');
+        return {};
+      }
+      const positions = Array.isArray(position) ? position : JSON.parse(position);
+      if (!positions.length || !page_number) {
+        console.log('%c缺少文件坐标或者文件页数', 'color: red');
+        return {};
+      }
+      const anno = positions.map((item: any, index: number) => {
+        return {
+          id: uid(),
+          pageNumber: page_number[index],
+          x: +(item[0][0] / pageSizes[0][0]).toFixed(4),
+          y: +(item[0][1] / pageSizes[0][1]).toFixed(4),
+          width: +((item[1][0] - item[0][0]) / pageSizes[0][0]).toFixed(4),
+          height: +((item[2][1] - item[0][1]) / pageSizes[0][1]).toFixed(4),
+          content: '',
+          color: chunk_type === 'image' ? '#60f74f' : '#4FC3F7',
+        };
+      });
+      return { annotations: anno, initialPage: page_number[0] };
+    }
+  };
+
+  const curData = useMemo(() => {
+    console.log('content88888888888', content);
+    if (content && token) {
+      console.log('content999', content);
+      const { annotations, initialPage } = getAnnotations(content);
+      const curContent = {
+        ...content,
+        metadata: {
+          source: content?.metadata?.source || content.parse_url || content.url,
+        },
+      };
+
+      const filePath = dealMinioUrl(getFilePath(curContent));
+      return {
+        filePath,
+        fileName: getFileName(curContent),
+        fileType: getFileType(curContent, filePath),
+        totalPages: curContent.pdfPages || 0,
+        token,
+        annotations,
+        initialPage,
+      };
+    } else {
+      return {};
+    }
+  }, [content]);
+
+  const renderFileCom = useMemo(() => {
+    if (!curData.filePath) return <></>;
+    console.log('curData', curData);
+    return (
+      <GientechStreamReader
+        convertedFilePath={curData.filePath}
+        fileName={curData.fileName}
+        fileType={curData.fileType}
+        initialPage={curData.initialPage}
+        totalPages={curData.totalPages}
+        authorization={curData.token}
+        annotations={curData.annotations}
+        streamApiUrl="/proxy/index/knowledgeBase/file/stream"
+        eventsEmit={name => {
+          switch (name) {
+            case 'viewer:close':
+              onClose();
+              break;
+          }
+        }}
+        tools={{
+          close: true,
+        }}
+      />
+    );
+  }, [curData]);
+
+  return (
+    <div
+      style={{
+        fontFamily: 'Source Han Sans CN',
+        fontSize: '12px',
+      }}
+      className="h-full w-full"
+    >
+      {renderFileCom}
+    </div>
+  );
+};

package/src/modules/chatCompare/components/components/DrawerDatabase.tsx

@@ -0,0 +1,110 @@
+import { Empty, Table, Pagination } from 'antd';
+import { useEffect, useState } from 'react';
+import { getUrlPrefix } from '../../../../utils/gientechCommon/utils';
+import axios from 'axios';
+
+const DrawerDatabase = ({ curFileInfo }: any) => {
+  const [pageNo, setPageNo] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [columns, setColumn] = useState([]);
+  const [dataList, setDataList] = useState([]);
+  const [totalData, setTotalData] = useState(0);
+
+  useEffect(() => {
+    const url = curFileInfo?.metadata?.fetchUrl || curFileInfo?.fetchUrl;
+    if (url) {
+      toGetDataBaseData(url);
+    }
+  }, [curFileInfo, pageNo, pageSize]);
+
+  const getDataBaseData = async ({ url, params }: any) => {
+    try {
+      const res = await axios.get(
+        `${getUrlPrefix()}${url}?${new URLSearchParams(params).toString()}`
+      );
+      const data = res?.data;
+      if (data) {
+        const { columns, dataList, totalData } = data;
+        setColumn(
+          (columns?.slice(1) || []).map((col: any) => ({
+            title: col.businessName,
+            dataIndex: col.physicalName,
+            key: col.physicalName,
+          }))
+        );
+        setDataList(dataList || []);
+        setTotalData(totalData || []);
+      }
+    } catch (error) {
+      console.log('error', error);
+    }
+  };
+
+  const toGetDataBaseData = async (url: string) => {
+    getDataBaseData({
+      url: `${url}`,
+      params: {
+        pageNo,
+        pageSize,
+      },
+    });
+  };
+
+  const renderTitle = () => {
+    const { file, metadata } = curFileInfo;
+    const { dataSourceType, databaseName, tableName, businessTableName } = metadata;
+    if (dataSourceType == 'DataTable') {
+      return `${databaseName} - ${businessTableName}`;
+    }
+
+    if (dataSourceType == 'DirectDB') {
+      return `${databaseName} - ${tableName}`;
+    }
+
+    return file;
+  };
+
+  return (
+    <div>
+      <div className="h-[52px] leading-[52px] font-bold text-[16px] px-[15px] overflow-hidden border-t-none border-l-none border-b-[1px] border-solid border-[rgb(222,226,230)]">
+        {renderTitle()}
+      </div>
+
+      {columns?.length > 0 ? (
+        <div>
+          <div className="p-4 overflow-auto h-[calc(100vh-120px)]">
+            <Table
+              columns={columns}
+              dataSource={dataList}
+              pagination={false}
+              scroll={{ x: 'max-content' }}
+            />
+          </div>
+          <div className="flex justify-end px-[18px]">
+            <Pagination
+              current={pageNo}
+              pageSize={pageSize}
+              responsive
+              simple
+              total={totalData}
+              showSizeChanger
+              showQuickJumper
+              onChange={(page, size) => {
+                setPageNo(page);
+                setPageSize(size || 10);
+              }}
+              onShowSizeChange={(current, size) => {
+                setPageNo(1);
+                setPageSize(size);
+              }}
+            />
+          </div>
+        </div>
+      ) : (
+        <Empty />
+      )}
+    </div>
+  );
+};
+
+export default DrawerDatabase;

package/src/modules/chatCompare/components/components/DrawerGraphPreview.tsx

@@ -0,0 +1,95 @@
+import axios from 'axios';
+import { useEffect, useMemo, useState } from 'react';
+import { KnowledgeGraphPreview, registerPreviewViewer } from '@mxmweb/nodegraph';
+import close from '../../../../assets/img/close.png';
+registerPreviewViewer();
+
+const DrawerGraphPreview = ({
+  curFileInfo,
+  onClose,
+  token,
+}: {
+  curFileInfo: any;
+  onClose: any;
+  token: string;
+}) => {
+  const config = {
+    title: '',
+    subtitle: '',
+    backgroundColor: '#f8f9fa',
+    showGrid: false,
+    showLegend: false,
+    showTooltip: false,
+    showFullscreen: false,
+    showMinimap: false,
+  };
+  const [graphList, setGraphList] = useState<any>({
+    nodeList: [],
+    edgeList: [],
+  });
+
+  useEffect(() => {
+    console.log('curFileInfo', curFileInfo);
+  }, [curFileInfo]);
+
+  const getGraphData = async (curFileInfo: any) => {
+    if (!curFileInfo?.id || !curFileInfo?.cyphers || !curFileInfo?.fetchUrl) return;
+    try {
+      const { cyphers, fetchUrl, id } = curFileInfo || {};
+      //   [
+      //   "match (n:`疾病`)-[e]-(m) where id(n) == \"疾病上睑下垂\" return n,e,m;"
+      // ]
+      console.log('getGraphData params', cyphers, fetchUrl, id);
+
+      const res = await axios.post(
+        fetchUrl,
+        { cyphers, ontologyId: id },
+        {
+          headers: { Authorization: token },
+        }
+      );
+      console.log('getGraphData res', res);
+      setGraphList(res?.data || {});
+    } catch (error) {
+      console.log('error', error);
+    }
+  };
+  useEffect(() => {
+    getGraphData(curFileInfo);
+  }, [curFileInfo]);
+
+  return (
+    <div>
+      <div className="flex justify-between h-[52px] leading-[52px] font-bold text-[16px] px-[15px] overflow-hidden border-t-none border-l-none border-b-[1px] border-solid border-[rgb(222,226,230)]">
+        <div>{curFileInfo?.name || '图谱预览'}</div>
+        <img src={close} className="cursor-pointer" onClick={() => onClose()} />
+      </div>
+      <div
+        className="w-full h-[calc(100vh-52)]"
+        style={{ width: '100%', height: 'calc(100vh - 52px)' }}
+      >
+        <KnowledgeGraphPreview
+          centerNode={{
+            vid: curFileInfo?.traceNode?.vid,
+          }}
+          data={graphList}
+          layout={{ type: 'force', linkDistance: 190 }}
+          title={config.title}
+          subtitle={config.subtitle}
+          backgroundColor={config.backgroundColor}
+          showGrid={false}
+          showLegend={config.showLegend}
+          showTooltip={config.showTooltip}
+          showFullscreen={config.showFullscreen}
+          showMinimap={config.showMinimap}
+          customPlugins={{}}
+          onReady={(graph: any) => {
+            console.log('KnowledgeGraphPreview ready:', graph);
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DrawerGraphPreview;

package/src/modules/chatCompare/components/components/DrawerPreview.tsx

@@ -0,0 +1,75 @@
+import { useMemo } from 'react';
+import { GientechStreamReader } from '../../../streamFilesReader';
+import {
+  dealMinioUrl,
+  getFileName,
+  getFilePath,
+  getFileType,
+} from '../../../../utils/gientechCommon/utils';
+
+const DrawerPreview = ({
+  curFileInfo,
+  onClose,
+  token,
+}: {
+  curFileInfo: any;
+  onClose: any;
+  token: any;
+}) => {
+  const curData = useMemo(() => {
+    if (curFileInfo && token) {
+      console.log('content999', curFileInfo);
+      const content = {
+        file_source: curFileInfo.parse_url || curFileInfo.parsedFilePath || curFileInfo.url,
+        file_type: curFileInfo.file_type,
+        metadata: {
+          source: curFileInfo?.metadata?.source || curFileInfo.filePath || curFileInfo.url || '',
+        },
+        pdfPages: curFileInfo.pdfPages,
+      };
+      const filePath = dealMinioUrl(getFilePath(content));
+      return {
+        filePath,
+        fileName: getFileName(content),
+        fileType: getFileType(content, filePath),
+        totalPages: content.pdfPages || 0,
+        token,
+      };
+    } else {
+      return {};
+    }
+  }, [curFileInfo]);
+
+  const renderFileCom = useMemo(() => {
+    console.log('curData', curData);
+    if (!curData.filePath) return <></>;
+    return (
+      <GientechStreamReader
+        convertedFilePath={curData.filePath}
+        fileName={curData.fileName}
+        fileType={curData.fileType}
+        initialPage={1}
+        totalPages={curData.totalPages}
+        authorization={curData.token}
+        streamApiUrl="/proxy/index/knowledgeBase/file/stream"
+        eventsEmit={type => {
+          switch (type) {
+            case 'viewer:close':
+              onClose();
+              break;
+          }
+        }}
+        tools={{
+          close: true,
+        }}
+      />
+    );
+  }, [curData]);
+  return (
+    <div id="pdfBox" className="h-full overflow-y-auto">
+      {renderFileCom}
+    </div>
+  );
+};
+
+export default DrawerPreview;

package/src/modules/chatCompare/components/components/DrawerTitle.tsx

@@ -0,0 +1,26 @@
+import Close from '../../../../assets/img/close.png';
+const DrawerTitle = ({ title, setOpen }: { title: string; setOpen: (arg: boolean) => void }) => {
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '60px',
+        borderBottom: '1px solid #EBEBEB',
+        padding: '20px',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        fontSize: '16px',
+        fontWeight: 600,
+      }}
+    >
+      <div>{title}</div>
+      <img
+        src={Close}
+        style={{ width: '16px', height: '16px', cursor: 'pointer' }}
+        onClick={() => setOpen(false)}
+      />
+    </div>
+  );
+};
+export default DrawerTitle;

package/src/modules/chatCompare/components/components/DrawerVideo.tsx

@@ -0,0 +1,85 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import close from '../../../../assets/img/close.png';
+import { uid } from 'uid';
+import { VideoPlayer, VideoPlayerRef } from '@mxmweb/veoviewer';
+
+const timeToSeconds = (timeStr: string) => {
+  const [h, m, s] = timeStr.split(':');
+  return parseInt(h) * 3600 + parseInt(m) * 60 + parseInt(s);
+};
+
+const DrawerVideo = ({ curFileInfo, onClose }: any) => {
+  const chunk = useMemo(
+    () => ({
+      id: uid(4),
+      start: timeToSeconds(curFileInfo.begin_date),
+      end: timeToSeconds(curFileInfo.end_date),
+      color: '#ef2345',
+    }),
+    [curFileInfo]
+  );
+
+  const playerRef = useRef<VideoPlayerRef>(null);
+
+  useEffect(() => {
+    if (curFileInfo.displayType == 'retrive' && chunk) {
+      setTimeout(() => {
+        playerRef.current?.segments.play(chunk, { autostop: true });
+      }, 1000);
+    }
+  }, [chunk]);
+
+  const playerConfig = {
+    aspectRatio: '1:1', // 宽高比: '16:9' | '4:3' | '1:1' | '21:9'
+    theme: 'default' as const, // 主题: 'default' | 'dark' | 'minimal'
+    showControls: true, // 显示控制条
+    showTimeline: false, // 显示时间轴
+    showTimelineSegments: true, // 显示时间轴上的段落标记
+    showSegments: false, // 显示段落列表
+    showDebugInfo: false, // 显示调试信息
+    showPlayerState: false, // 显示播放器状态
+    useLocalVideo: false, // 使用本地视频
+  };
+
+  return (
+    <div>
+      <div className="h-[52px] flex justify-between leading-[52px] font-bold text-[16px] px-[15px] overflow-hidden border-t-none border-l-none border-b-[1px] border-solid border-[rgb(222,226,230)]">
+        {curFileInfo?.source_name || '-'}
+        <div onClick={onClose}>
+          <img src={close} className="cursor-pointer" onClick={() => onClose()} />
+        </div>
+      </div>
+      <div className="h-[calc(100vh-60px)] p-[20px] flex items-center justify-center">
+        <div
+          style={{
+            background: 'white',
+            borderRadius: '8px',
+            boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+            overflow: 'hidden',
+            position: 'relative',
+            width: '100%',
+            height: '400px', // 固定高度，播放器会根据宽高比自适应
+            // maxWidth: "800px", // 最大宽度限制
+            margin: 'auto', // 居中显示
+          }}
+        >
+          <VideoPlayer
+            ref={playerRef}
+            src={curFileInfo.link}
+            segments={[chunk]}
+            showControls={playerConfig.showControls}
+            showTimeline={playerConfig.showTimeline}
+            showTimelineSegments={playerConfig.showTimelineSegments}
+            showSegments={false} // 不在播放器内显示段落列表
+            theme={playerConfig.theme}
+            showDebugInfo={playerConfig.showDebugInfo}
+            showPlayerState={playerConfig.showPlayerState}
+            // 响应式尺寸控制
+            aspectRatio={playerConfig.aspectRatio}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+export default DrawerVideo;