diff --git a/code/VideoAccess-VCMP/web/client/assets/images/openness/blue1.5.png b/code/VideoAccess-VCMP/web/client/assets/images/openness/blue1.5.png
new file mode 100644
index 0000000..8cd3c59
Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/openness/blue1.5.png differ
diff --git a/code/VideoAccess-VCMP/web/client/assets/images/openness/blue2.png b/code/VideoAccess-VCMP/web/client/assets/images/openness/blue2.png
new file mode 100644
index 0000000..2401b2e
Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/openness/blue2.png differ
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx b/code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx
index c196a3b..9c93378 100644
--- a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx
+++ b/code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx
@@ -5,15 +5,15 @@ 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);
    useEffect(() => {
 
       const resize_ = () => {
-            setVideoWidth(document.getElementById('video' + videoObj.key).clientWidth)
-            setVideoHeight(document.getElementById('video' + videoObj.key).clientHeight)
+         setVideoWidth(document.getElementById('video' + videoObj.key).clientWidth)
+         setVideoHeight(document.getElementById('video' + videoObj.key).clientHeight)
       }
       resize_()
       window.addEventListener('resize', resize_);  //只要窗口殴大小发生像素变化就会触发
@@ -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>
    )
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoCard.jsx b/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoCard.jsx
index 16de5bf..3f44c54 100644
--- a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoCard.jsx
+++ b/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>
       </>
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx b/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx
index 3428566..37d20c7 100644
--- a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx
+++ b/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))
-      console.log(nameData);
-
-      filterGroup
-
+      if (searchs?.name) {
+         videoData = videoData?.filter(v => v.label.includes(searchs.name))
+      }
       if (searchs?.field0) {
-         let videoId = [] //视频id
-         for (let i in searchs) {
-            console.log(i, searchs[i]);
-
-         }
-
+         videoData = videoData?.filter(({ cameraId }) => searchs?.field0.some(v => v == cameraId))
+      }
+      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])
 
@@ -237,21 +259,22 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
       if (timing) clearInterval(timing)
       if (polling) {
          timing = setInterval(() => {
-            let pages =  pageRef.current + 1
+            let pages = pageRef.current + 1
             if (pages > Math.ceil(playData?.length / pageSize)) {
                setPage(1)
-               pageRef.current=1
+               pageRef.current = 1
             } else {
                setPage(pages)
-               pageRef.current=pages
+               pageRef.current = pages
             }
          }, pollingTimes * 1000 * 5)
       }
-   }, [polling, playData,pollingTime])
+   }, [polling, playData, pollingTime])
+
 
    useEffect(() => {
       setPage(1)
-      pageRef.current=1
+      pageRef.current = 1
    }, [pageSize])
 
    //确定查询条件下视频总数
@@ -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,27 +372,34 @@ 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={true}
+                        expandedKeys={leftValue}
+                        onChange={(e) => {
+                           // console.log(e);
+                           setLeftValue(e)
+                        }}
+                        onSelect={(e) => {
+                           // console.log(e);
+                        }}
+                        style={{ color: '#FFFFFF' }}
+                     />
+                  </div>
 
-                  <Tree
-                     multiple
-                     treeData={leftTree}
-                     value={leftValue}
-                     blockNode={false}
-                     defaultExpandAll
-                     onChange={(e) => {
-                        // console.log(e);
-                        setLeftValue(e)
-                     }}
-                     onSelect={(e) => {
-                        // console.log(e);
-                     }}
-                     style={{ color: '#FFFFFF' }}
-                  />
                   <Checkbox
                      checked={selectAll}
                      onChange={checked => {
-                        setSelectAll(!selectAll)
-                        chooseAll.current = !chooseAll.current
+                        setSelectAll(checked?.target.checked)
+                        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,10 +495,10 @@ 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
+                                 pageRef.current = currentPage
                               }}
                            /> : ""}
                         </div>
@@ -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)
+            }}
+         />
       </>
 
    )
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.less b/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.less
index c4b9e35..bfb7c13 100644
--- a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.less
+++ b/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);