视频图片

3 years ago · 57d5122333
6 changed files with 108 additions and 48 deletions
--- a/code/VideoAccess-VCMP/web/client/assets/images/openness/blue1.5.png
+++ b/code/VideoAccess-VCMP/web/client/assets/images/openness/blue1.5.png
--- a/code/VideoAccess-VCMP/web/client/assets/images/openness/blue2.png
+++ b/code/VideoAccess-VCMP/web/client/assets/images/openness/blue2.png
--- 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>
   )
--- 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>
      </>
--- 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)
+            }}
+         />
      </>

   )
--- 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);