视频图片

code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx

@@ -5,7 +5,7 @@ import { VideoPlay } from "$components";
 import { useState } from 'react';
 
 
-const Container = ({ videoObj, pageSize }) => {
+const Container = ({ videoObj, pageSize, showHeader, videoPlay }) => {
    const [videoWidth, setVideoWidth] = useState()
    const [videoHeight, setVideoHeight] = useState()
    // console.log(videoObj);
@@ -25,11 +25,11 @@ const Container = ({ videoObj, pageSize }) => {
    useEffect(() => {
       setVideoWidth(document.getElementById('video' + videoObj.key).clientWidth)
       setVideoHeight(document.getElementById('video' + videoObj.key).clientHeight)
-   }, [pageSize])
+   }, [pageSize, showHeader])
    // console.log(videoWidth, videoHeight);
    return (
       <div style={{ width: videoWidth || '100%', height: videoHeight || '100%', padding: 5 }}>
-         {videoWidth && videoHeight ?
+         {videoWidth && videoHeight ? videoPlay ?
             <VideoPlay sizeWh={{
                width: videoWidth - 10,
                height: videoHeight - 40,
@@ -39,7 +39,13 @@ const Container = ({ videoObj, pageSize }) => {
                videoObj={videoObj.camera}
                videoStyle='true'
                containerId={videoObj.key}
-               local={true} /> : ""}
+               local={true} /> :
+            <img src={`/assets/images/openness/${pageSize == 1 || pageSize == 4 ? 'blue2' : 'blue1.5'}.png`} style={{
+               display: 'inline-block', width: videoWidth - 10,
+               height: videoHeight - 40,
+               parentWidth: videoWidth - 10,
+               parentHeight: videoHeight - 40,
+            }} /> : ""}
          <div style={{ lineHeight: '30px', paddingLeft: 6 }}>{videoObj?.label}</div>
       </div>
    )

code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoCard.jsx

@@ -4,7 +4,7 @@ import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Col }
 import Container from "./container";
 
 
-const VideoCard = ({ data, pageSize , key}) => {
+const VideoCard = ({ data, pageSize ,showHeader, key,videoPlay}) => {
 
 
    let span = 8
@@ -33,6 +33,8 @@ const VideoCard = ({ data, pageSize , key}) => {
             <Container
                videoObj={data}
                pageSize={pageSize}
+               showHeader={showHeader}
+               videoPlay={videoPlay}
             />
          </Col>
       </>

code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx

@@ -3,14 +3,16 @@ import { connect } from 'react-redux';
 import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Pagination, Checkbox, InputNumber } from '@douyinfe/semi-ui';
 import './videoScreen.less'
 import VideoCard from './videoCard'
-import { version } from 'less';
+import { ReminderBox } from "../../../components/index";
+import PerfectScrollbar from "perfect-scrollbar";
 
 let timing
+let projectScrollbar;
 const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, showHeader }) => {
    // console.log({ 视频: treeData });
    // console.log(filterGroup);
    // console.log(headerName);
-   // console.log(videoPlay);
+   console.log(videoPlay);
    // console.log(template);
    // console.log(showHeader);
 
@@ -112,12 +114,25 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
    const [searchs, setSearchs] = useState({}) //搜索
    const [polling, setPolling] = useState(false) //轮询
    const [pollingTime, setPollingTime] = useState(1) //轮询时间
+   const [reminder, setReminder] = useState(false); //提醒弹框
 
    const api = useRef();
    const pageRef = useRef(page);
+   const GONGGESCREEN = 'gonggeScreen'
    const chooseAll = useRef(true);
 
 
+   useEffect(() => {
+      projectScrollbar = new PerfectScrollbar("#tree", {
+         suppressScrollX: true,
+      });
+   }, [])
+   useEffect(() => {
+      const domProject = document.getElementById("tree");
+      if (domProject && projectScrollbar) {
+         projectScrollbar.update();
+      }
+   })
    useEffect(() => {
       console.log(45464);
       let query = []
@@ -213,19 +228,26 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
       })
       console.log(videoData);
 
-      let nameData = videoData?.find(v => v?.label.includes(searchs.name))
+      if (searchs?.name) {
-      console.log(nameData);
+         videoData = videoData?.filter(v => v.label.includes(searchs.name))
-
+      }
-      filterGroup
-
       if (searchs?.field0) {
-         let videoId = [] //视频id
+         videoData = videoData?.filter(({ cameraId }) => searchs?.field0.some(v => v == cameraId))
-         for (let i in searchs) {
-            console.log(i, searchs[i]);
-
       }
-
+      if (searchs?.field1) {
+         videoData = videoData?.filter(({ cameraId }) => searchs?.field1.some(v => v == cameraId))
+      }
+      if (searchs?.field2) {
+         videoData = videoData?.filter(({ cameraId }) => searchs?.field2.some(v => v == cameraId))
+      }
+      if (searchs?.field3) {
+         videoData = videoData?.filter(({ cameraId }) => searchs?.field3.some(v => v == cameraId))
+      }
+      if (searchs?.field4) {
+         videoData = videoData?.filter(({ cameraId }) => searchs?.field4.some(v => v == cameraId))
       }
+      console.log(videoData);
+      setPlayData(videoData)
 
    }, [searchs])
 
@@ -249,6 +271,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
       }
    }, [polling, playData, pollingTime])
 
+
    useEffect(() => {
       setPage(1)
       pageRef.current = 1
@@ -274,7 +297,9 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
 
    //宫格设置点击
    const flipScreens = (data) => {
-      console.log(data);
+      const remind = localStorage.getItem(GONGGESCREEN) || 'false'
+      console.log(remind);
+      console.log(true);
       switch (data) {
          case "单屏":
             setPageSize(1)
@@ -284,9 +309,11 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
             break;
          case "6分屏":
             setPageSize(6)
+            if (remind == 'false') setReminder(true)
             break;
          case "12分屏":
             setPageSize(12)
+            if (remind == 'false') setReminder(true)
             break;
          default:
             break
@@ -345,13 +372,14 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                         }}
                      />
                   </div>
-
+                  <div id='tree' style={{ height: `calc(100% - 62px)`, position: "relative", }}>
                      <Tree
                         multiple
                         treeData={leftTree}
                         value={leftValue}
                         blockNode={false}
-                     defaultExpandAll
+                        defaultExpandAll={true}
+                        expandedKeys={leftValue}
                         onChange={(e) => {
                            // console.log(e);
                            setLeftValue(e)
@@ -361,11 +389,17 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                         }}
                         style={{ color: '#FFFFFF' }}
                      />
+                  </div>
+
                   <Checkbox
                      checked={selectAll}
                      onChange={checked => {
-                        setSelectAll(!selectAll)
+                        setSelectAll(checked?.target.checked)
-                        chooseAll.current = !chooseAll.current
+                        if (checked?.target.checked) {
+                           setLeftValue(treeData.map(v => v.value))
+                        } else {
+                           setLeftValue([])
+                        }
                      }}
                      ria-label="Checkbox 示例"
                      style={{ position: 'absolute', right: 10, bottom: 10 }}
@@ -442,9 +476,9 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                   <div style={{ display: 'flex', height: '100%' }}>
                      {/* 视频 */}
                      <div style={{ flex: 1, height: '100%' }}>
-                        <Row style={{ height: `calc( 100% - 160px )` }}>
+                        <Row style={{ height: `calc( 100% - 90px)` }}>
                            {playData?.slice((page - 1) * pageSize, page * pageSize)?.map(v => {
-                              return <VideoCard key={'VideoCard' + v.key} data={v} pageSize={pageSize} />
+                              return <VideoCard key={'VideoCard' + v.key} data={v} pageSize={pageSize} showHeader={showHeader} videoPlay={videoPlay} />
                            })}
                         </Row>
                         <div
@@ -461,7 +495,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                               total={playData.length}
                               currentPage={page}
                               pageSize={pageSize}
-                              style={{ color: 'white' }}
+                              style={{ color: '#D9D9D9' }}
                               onChange={(currentPage, pageSize) => {
                                  setPage(currentPage)
                                  pageRef.current = currentPage
@@ -499,7 +533,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                                                 setPolling(v)
                                              }} aria-label="a switch for demo" style={{ border: ' 1px solid #D9D9D9', }} checked={polling} />
                                              轮询间隔
-                                             <Input value={pollingTime} style={{ width: 80, color: "#D9D9D9", border: ' 1px solid #D9D9D9', }}
+                                             <Input value={pollingTime} disabled={polling ? false : true} style={{ width: 80, color: "#D9D9D9", border: ' 1px solid #D9D9D9', }}
                                                 onChange={(value) => {
                                                    setPollingTime(Number(value.replace(/[^0-9]/ig, '')))
                                                 }} />
@@ -520,6 +554,20 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                </div>
             </div>
          </div >
+
+         <ReminderBox
+            title="分屏过多会导致浏览器内存不足，请根据您的电脑性能选择合适的分屏数量。"
+            wait="取消"
+            toadd="确定"
+            visible={reminder}
+            USER={GONGGESCREEN}
+            onOk={() => {
+               setReminder(false)
+            }}
+            close={() => {
+               setReminder(false)
+            }}
+         />
       </>
 
    )

code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.less

@@ -3,9 +3,13 @@
   .semi-icon,
   .semi-checkbox-addon, //全选文字
   .semi-form-field-label-text,
+  .semi-page-item,
   span {
     color: #fff;
   }
+  .semi-page-item-active{
+   color: rgb(17, 17, 17);
+  }
   .semi-checkbox-inner-display {
     //树状多选框
     border: 1px solid rgba(255, 255, 255, 0.488);