feat: 生产线详情-预览功能：mp4(单个与批量)

@@ -15,6 +15,7 @@
     "axios": "^1.7.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-pdf": "^9.2.1",
     "react-router-dom": "^7.1.1"
   },
   "devDependencies": {

@@ -38,4 +38,16 @@ export function getFilePreview(fileId?: string) {
         {
         }
     );
+}
+
+/**生产线信息--轮播图设置
+ * **/
+export function getCarouselSettings() {
+    return post(
+        `/open/qx-apaas-lowcode/getCarouselSettings`,
+        {
+        },
+        {
+        }
+    );
 }
\ No newline at end of file

@@ -6,7 +6,7 @@ import { useNavigate } from 'react-router-dom';
 interface NavBarProps {
   rightInfo?: any;
   showBack?: any;
-  title?: any;
+  title?: string;
   isWhite?: any; // 是否是白色返回箭头
   style?: any;
   backContent?: any;
@@ -27,6 +27,9 @@ const NavBarSec: React.FC<NavBarProps> = (props) => {
 
   const style = props?.style;
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [])
 
   const back = () => {
     navigate(-1); // 回退到上一个页面

+import React, {useEffect, useRef, useState} from 'react';
+
+type VideoPlayProps = {
+    key: string;
+    url: string;
+    className: string;
+};
+// 视频自动播放组件
+const VideoPlay: React.FC<VideoPlayProps> = (props) => {
+
+    const videoRef = useRef<HTMLVideoElement>(null);
+    const [isPlaying, setIsPlaying] = useState(true);
+
+    useEffect(() => {
+        if (videoRef.current) {
+            videoRef.current.onended = () => {
+                setIsPlaying(true);
+            };
+        }
+    }, [props?.key]);
+
+    useEffect(() => {
+        if (isPlaying && videoRef.current) {
+            videoRef.current.play().catch(() => {
+                setIsPlaying(false);
+            });
+        }
+    }, [isPlaying]);
+
+    return (
+        <>
+            {
+                props?.url ? <video
+                    id={props?.url}
+                    ref={videoRef}
+                    autoPlay
+                    loop
+                    muted
+                    playsInline
+                    className={`${props?.className}`}
+                >
+                    <source src={props?.url} type="video/mp4" />
+                </video> : ''
+            }
+        </>
+    );
+};
+
+export default VideoPlay;

-import React from 'react'
+import React, {useEffect, useState} from 'react'
 import './style.less'
 import NavBar from '@/components/nav-bar'
-import {baseColorPrimary} from "@/utils/common";
-import {hexToRgba} from "@/utils/utils";
+import VideoPlay from '@/components/videoPlay'
+import {useSearchParams} from "react-router-dom";
+import { Document, Page, pdfjs } from "react-pdf";
+import 'react-pdf/dist/esm/Page/AnnotationLayer.css'
+import 'react-pdf/dist/esm/Page/TextLayer.css';
+import {getCarouselSettings} from "@/api/apiConfig";
+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
 
 
-const ProductionManagement: React.FC = () => {
+const ProductionDetail: React.FC = () => {
+    const [title, setTitle] = useState<string>('');
+    const [filePathItem, setFilePathItem] = useState();
+    // 自动预览 定时器
+    const [preViewTimer, setPreViewTimer] = useState<any>(null);
 
-    const list = [
-        {
-            id: '1',
-            name: '车顶生产线A'
-        },
-        {
-            id: '2',
-            name: '车顶生产线B'
-        },
-        {
-            id: '3',
-            name: '车顶生产线C'
-        },
-        {
-            id: '4',
-            name: '车顶生产线D'
-        },
-        {
-            id: '5',
-            name: '车顶生产线E'
-        },
-        {
-            id: '6',
-            name: '车顶生产线F'
-        },
-        {
-            id: '7',
-            name: '车顶生产线G'
-        },
-        {
-            id: '8',
-            name: '车顶生产线H'
-        },
-        {
-            id: '9',
-            name: '车顶生产线I'
-        },
-        {
-            id: '10',
-            name: '车顶生产线J'
-        },
-        {
-            id: '11',
-            name: '车顶生产线K'
-        },
-        {
-            id: '12',
-            name: '车顶生车顶生车顶生产线L'
-        },
-        {
-            id: '13',
-            name: '车顶生产线M'
-        },
-        {
-            id: '14',
-            name: '车顶生产线N'
+    // // 因是hook，必须写在组件的顶部执行，useSearchParams() 返回的是数组
+    const [params] = useSearchParams();
+    // // 通过 get 方法获取目标参数
+    const name = params.get("name") || "";
+
+    const sxPreViewList = localStorage.getItem('sxPreViewListStorage') ? JSON.parse(localStorage.getItem('sxPreViewListStorage')) : [];
+
+    console.log('sxPreViewList', sxPreViewList)
+
+    useEffect(() => {
+        if (sxPreViewList?.length) {
+            const _isLoop = sxPreViewList?.length > 1;
+            const loopPreView = (index: number, interval: number) => {
+                setFilePathItem(sxPreViewList?.[index]);
+                clearInterval(preViewTimer);
+                // 3秒调一次
+                let _preViewTimer = setInterval(() => {
+                    index = index + 1;
+                    if (index > sxPreViewList?.length - 1) {
+                        index = 0;
+                    }
+                    setFilePathItem(sxPreViewList?.[index]);
+                }, interval * 1000);
+                setPreViewTimer(_preViewTimer);
+            }
+            if (_isLoop) {
+                getCarouselSettings().then((res: any) => {
+                    const interval = res?.carousel?.interval || 10;
+                    loopPreView(0, interval);
+                }).catch(() => {
+                    loopPreView(0, 10)
+                })
+            } else {
+                setFilePathItem(sxPreViewList?.[0]);
+            }
+        }
+    }, [JSON.stringify(sxPreViewList)])
+
+    useEffect(() => {
+        if (name) {
+            setTitle(name)
         }
-    ]
+    }, [name])
+
+    useEffect(() => {
+        return () => {
+            clearInterval(preViewTimer);
+        };
+    }, [])
+
+    useEffect(() => {
+        console.log('filePathItem', filePathItem)
+    }, [filePathItem])
+
 
 
     return (
         <div className={'sxjx-content-main sxjx-layout-main-unfoot'}>
-            <div className={'production-management'}>
-                <NavBar title={'上产线管理'}/>
-                <div className={'production-management_list'}>
-                    {
-                        list?.map((item: any) => {
-                            return  <div
-                                key={item?.id}
-                                className={'production-management_list-item'}
-                                style={{backgroundColor: hexToRgba(baseColorPrimary, 0.6)}}
-                            >
-                                {item?.name}
-                            </div>
-                        })
-                    }
-                </div>
+            <div className={'production-detail'}>
+                <NavBar showBack={true} title={title}/>
+                {
+                    filePathItem?.type === 'mp4' ? <div className={'production-detail-video-box'}>
+                        <VideoPlay
+                            key={filePathItem?.url}
+                            url={filePathItem?.url || ''}
+                            className={'production-detail-video'}
+                        />
+                    </div> : <>
+                    </>
+                }
             </div>
         </div>
     )
 }
 
-export default ProductionManagement;
+export default ProductionDetail;

-.production-management {
+.production-detail {
   background: #f7f7f7;
-
-  &_list {
-    padding: 60px;
+  position: relative;
+  width: 100%;
+  height: calc(100vh - 88px);
+  &-video-box {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     display: flex;
-    flex-wrap: wrap;
-
-    &-item {
-      font-size: 28px;
-      width: 312px;
-      height: 312px;
-      color: #fff;
-      margin-right: 60px;
-      margin-bottom: 60px;
-      cursor: pointer;
-      border-radius: 12px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      line-height: 40px;
-      padding: 20px;
-      box-sizing: border-box;
-      text-align: center;
-
-      &:nth-child(5n) {
-        margin-right: 0;
-      }
-    }
+    align-items: center;
+    justify-content: center;
+  }
+  &-video {
+    width: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    height: auto;
   }
 }
\ No newline at end of file

@@ -7,16 +7,18 @@ import _preview from './preview.png';
 
 import {useSearchParams} from "react-router-dom";
 import {getFilePreview, getProductBook} from "@/api/apiConfig";
-import {SpinLoading, Checkbox} from 'antd-mobile'
+import {SpinLoading, Checkbox, Toast} from 'antd-mobile'
 import { useNavigate } from "react-router-dom";
+import {a} from "vite/dist/node/types.d-aGj9QkWt";
 
 interface ListType {
     id: string;
+    fileId: string;
     name: string;
     type: 'pdf' | 'mp4' | string
 }
 
-type CheckboxValue = string | number
+type CheckboxValue = string;
 
 const ProductionList: React.FC = () => {
     const [title, setTitle] = useState<string>('');
@@ -26,6 +28,7 @@ const ProductionList: React.FC = () => {
     const navigate = useNavigate();
     const [checkItems, setCheckItems] = useState<CheckboxValue[]>([])
     const [checkValues, setCheckValues] = useState<CheckboxValue[]>([])
+    // const [sxPreViewList, setSxPreViewList] = useState<ListType[]>([])
 
 
     // 因是hook，必须写在组件的顶部执行，useSearchParams() 返回的是数组
@@ -36,6 +39,10 @@ const ProductionList: React.FC = () => {
     const id = params.get("id") || "";
 
     useEffect(() => {
+        localStorage.setItem('sxPreViewListStorage', '');
+    }, [])
+
+    useEffect(() => {
         if (name) {
             setTitle(name)
         }
@@ -51,7 +58,8 @@ const ProductionList: React.FC = () => {
                     _checkItems.push(item?.guide_book_file_info_?.[0]?.fileId);
                     const _arr = item?.guide_book_file_info_?.[0]?.name?.split('.') || [];
                     return {
-                        id: item?.guide_book_file_info_?.[0]?.fileId || '',
+                        id: item?.id || '',
+                        fileId: item?.guide_book_file_info_?.[0]?.fileId || '',
                         name: _arr?.[0] || '',
                         type: _arr?.[1] || '',
                     }
@@ -78,20 +86,58 @@ const ProductionList: React.FC = () => {
         console.log('checkboxChange-value', value)
         setCheckValues(value)
     }
-    const toDetail = (ids: CheckboxValue[]) => {
+
+    // 假设这是你的API调用函数
+    const fetchData = async (item: ListType) => {
+        // 替换为你的实际API URL和请求逻辑
+        const res = await getFilePreview(item?.fileId);
+        return res;
+    }
+
+
+    const toDetail = async (ids: CheckboxValue[]) => {
         console.log('toDetail-ids', ids)
-        if (ids?.[0]) {
-            const _id: string = ids?.[0].toString() || '';
-            getFilePreview(_id).then((res: any) => {
-                console.log('res', res)
-                window.open(res, '_blank')
-            }).catch((err: any) => {
-                console.log('err', err)
+        if (ids?.length) {
+            let _arr = list?.filter((item: ListType) => ids?.includes(item?.id || '')) || [];
+            console.log('_arr', _arr)
+            // 创建一个promise数组，每个promise都是对API的一次调用
+            const promises = _arr?.map((item: ListType) => fetchData(item));
+            // 使用Promise.all来并行地解决这些promise
+            Promise.all(promises)
+                .then((results: any) => {
+                    let sxPreViewList = _arr?.map((it: ListType, index: number) => {
+                        return {
+                            ...it,
+                            url: results?.[index]
+                        }
+                    })
+                    console.log('sxPreViewList', sxPreViewList)
+                    localStorage.setItem('sxPreViewListStorage', JSON.stringify(sxPreViewList));
+                    navigate(`/production/detail?name=${sxPreViewList?.[0]?.name}`);
+                })
+                .catch(err => {
+                    localStorage.setItem('sxPreViewListStorage', '');
+                    console.log('err', err)
+                });
+        } else {
+            localStorage.setItem('sxPreViewListStorage', '');
+            Toast.show({
+                content: '请先选择数据！',
+                maskClassName: 'to-detail-mask',
             })
         }
-        // navigate(`/production/detail?id=${item?.id}&name=${item?.name}`);
+
     }
 
+    // useEffect(() => {
+    //     console.log('sxPreViewList', sxPreViewList)
+    //     if (sxPreViewList?.length) {
+    //         const _name = sxPreViewList?.[0]?.name;
+    //         console.log('_name', _name)
+    //         navigate(`/production/detail?name=${_name}`);
+    //     }
+    // }, [sxPreViewList])
+
     return (
         <div className={'sxjx-content-main sxjx-layout-main-unfoot'}>
             <div className={`production-list ${showBatch ? 'production-list--batch' : ''}`}>
@@ -107,7 +153,7 @@ const ProductionList: React.FC = () => {
                                     list?.map((item: ListType) => {
                                         return <div
                                             key={item?.id}
-                                            className={`production-list_list-item ${item?.id}`}
+                                            className={`production-list_list-item`}
                                             style={{backgroundColor: '#fff'}}
                                             onClick={() => {
                                                 if (!showBatch) {
@@ -156,13 +202,13 @@ const ProductionList: React.FC = () => {
                             >取消</div>
                         </div>
                         <div className={'production-list--batch_info-bottom'}>
-                            <div className={'production-list--batch_info-bottom_item'}>
+                            <div className={'production-list--batch_info-bottom_item'}
+                                 onClick={() => {
+                                     toDetail(checkValues)
+                                 }}
+                            >
                                 <img className={'production-list--batch_info-bottom_item-icon'} src={_preview} alt=""/>
-                                <span className={'production-list--batch_info-bottom_item-info'}
-                                      onClick={() => {
-                                          toDetail(checkValues)
-                                      }}
-                                >预览</span>
+                                <span className={'production-list--batch_info-bottom_item-info'}>预览</span>
                             </div>
                         </div>
                     </div> : ''

@@ -114,8 +114,8 @@
         position: absolute;
         top: 0;
         left: 30px;
-        width: 100%;
-        height: 100%;
+        width: calc(100% - 30px);
+        height: calc(100% - 30px);
         --icon-size: 30px;
         display: flex;
         align-items: start;
@@ -133,4 +133,10 @@
       padding: 0 10px;
     }
   }
+}
+
+.to-detail-mask {
+  .adm-auto-center-content {
+    font-size: 28px !important;
+  }
 }
\ No newline at end of file