视频

code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx

@@ -8,7 +8,7 @@ import { Button, ToastFactory, } from '@douyinfe/semi-ui';
 import VideoHeader from './voiceHeader'
 import VideoOperation from './videoOperation'
 import './videoPlay.less';
-import EZUIKit from 'ezuikit-js'
+import EZUIKit, { log } from 'ezuikit-js'
 import { done } from "nprogress";
 
 const timeFormat = 'YYYY-MM-DD HH:mm:ss'
@@ -65,7 +65,7 @@ const VideoPlay = ({
    iotVideoServer,
    local, //是否本地调用视频
 }) => {
-   console.log(videoObj);
+   // console.log(sizeWh,videoObj); 
    if (videoObj.type == 'yingshi') {
       videoObj = {
          ...videoObj,
@@ -167,11 +167,13 @@ const VideoPlay = ({
          let videoplay = document.getElementById('vcmp_videoplay')
          if (screenfull.isEnabled) {
             screenfull.toggle(videoplay);
-                if (videoObj?.type == 'yingshi') {
+            if (videoObj?.type == 'yingshi' && player) {
-                    console.log(operationRef.current);
                if (operationRef.current?.fullScreen.select) {
+                  console.log(5515);
                   player.reSize(screen.width, screen.height);
                } else {
+                  console.log(5515);
+
                   player.reSize(size?.width, size?.height);
                }
             }
@@ -226,11 +228,12 @@ const VideoPlay = ({
       //     window.addEventListener('resize', resize_);  //只要窗口殴大小发生像素变化就会触发
       // }
       return () => {
+         console.log(854453453);
          if (jessibuca) {
             jessibuca.destroy()
          }
-            if (player && videoObj.type == 'yingshi' && player) {
+         if (player && videoObj.type == 'yingshi') {
-                console.log(11111111111);
+            console.log(854453453);
             player.stop()
          }
          // if (local) {
@@ -346,7 +349,6 @@ const VideoPlay = ({
             },
          })
          setPlayer(player)
-            player_.current = player
       }
    }
 
@@ -417,7 +419,7 @@ const VideoPlay = ({
                player.reSize(videoWidth, videoHeight)
             }
          } else {
-                if (videoObj.type == 'yingshi' && player) {
+            if (videoObj.type == 'yingshi' && player?.pluginStatus) {
                player.reSize(width || sizeWh?.parentWidth, height || sizeWh?.parentHeight)
             }
          }
@@ -425,7 +427,6 @@ const VideoPlay = ({
          return data == 'width' ? videoWidth : data == 'height' ? videoHeight : ''
       }
    }
-
    useEffect(() => {
       setupSize()
    }, [sizeWh])

code/VideoAccess-VCMP/web/client/src/sections/journaling/containers/journalingCenter.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
 import { Coming } from '$components'
-import  VideoScreen  from '../components/videoScreen'
+
 
 
 import '../style.less'
@@ -9,10 +9,8 @@ import '../style.less'
 const JournalingCenter = (props) => {
 
     return (
-        //   <Coming />
+          <Coming />
-        <>
+       
-         <VideoScreen />
-        </>
        
     )
 }

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

@@ -8,6 +8,7 @@ import { useState } from 'react';
 const Container = ({ videoObj, pageSize }) => {
    const [videoWidth, setVideoWidth] = useState()
    const [videoHeight, setVideoHeight] = useState()
+   // console.log(videoObj);
    useEffect(() => {
 
       const resize_ = () => {
@@ -25,19 +26,21 @@ const Container = ({ videoObj, pageSize }) => {
       setVideoWidth(document.getElementById('videoo').clientWidth)
       setVideoHeight(document.getElementById('videoo').clientHeight)
    }, [pageSize])
-   console.log(videoWidth, videoHeight);
+   // console.log(videoWidth, videoHeight);
    return (
       <div style={{ width: videoWidth || '100%', height: videoHeight || '100%', padding: 5 }}>
+         {videoWidth && videoHeight ?
             <VideoPlay sizeWh={{
                width: videoWidth - 10,
-            height: videoHeight - 10,
+               height: videoHeight - 40,
                parentWidth: videoWidth - 10,
-            parentHeight: videoHeight - 10,
+               parentHeight: videoHeight - 40,
             }}
-            videoObj={videoObj}
+               videoObj={videoObj.videoData}
                videoStyle='true'
-            containerId={videoObj.name}
+               containerId={videoObj.label}
-            local={true} />
+               local={true} /> : ""}
+         <div style={{lineHeight:'30px',paddingLeft:6}}>{videoObj?.label}</div>
       </div>
    )
 }

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

@@ -7,9 +7,6 @@ import Container from "./container";
 const VideoCard = ({ data, pageSize }) => {
 
 
-
-
-
    let span = 8
    let rowsCount = 2
    if (pageSize === 1) {
@@ -29,7 +26,7 @@ const VideoCard = ({ data, pageSize }) => {
       rowsCount = 3
    }
    let cheight = Math.floor(100 / rowsCount) + "%"
-console.log(pageSize,span,cheight);
+
    return (
       <>
          <Col id="videoo" span={span} style={{ height: cheight, }}>

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

@@ -1,12 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { connect } from 'react-redux';
-import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row } from '@douyinfe/semi-ui';
+import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Pagination, Checkbox } from '@douyinfe/semi-ui';
 import './videoScreen.less'
 import VideoCard from './videoCard'
 
 
 const VideoScreen = (props) => {
-   const treeData = [{
+   const treeData = [
+      {
          label: '公司',
          value: '公司',
          key: '0-1',
@@ -20,7 +21,7 @@ const VideoScreen = (props) => {
                   content: ['5442542542', '452345', '234524525'],
                   serialNo: "F61504020",
                   type: "yingshi",
-               yingshiToken: "at.7pl4c5orb9fpndtlbjpsn5m11szujnf7-1laxxre0ob-010o8fw-kqeuwthva"
+                  yingshiToken: "at.6vznnc23bv51vzjt7lnkj7e19bb2z61f-3gnj7m5lxp-10666cy-bgwcjkekk"
                }
             }, {
                label: '机房',
@@ -31,22 +32,23 @@ const VideoScreen = (props) => {
                   content: ['5442542542', '452345', '234524525'],
                   serialNo: "F61504020",
                   type: "yingshi",
-               yingshiToken: "at.7pl4c5orb9fpndtlbjpsn5m11szujnf7-1laxxre0ob-010o8fw-kqeuwthva"
+                  yingshiToken: "at.6vznnc23bv51vzjt7lnkj7e19bb2z61f-3gnj7m5lxp-10666cy-bgwcjkekk"
                }
             }, {
                label: '后门',
                value: '后门',
                key: '0-1-3',
                videoData: {
-               channelNo: 1,
+                  channelNo: 2,
                   content: ['5442542542', '452345', '234524525'],
                   serialNo: "F61504020",
                   type: "yingshi",
-               yingshiToken: "at.7pl4c5orb9fpndtlbjpsn5m11szujnf7-1laxxre0ob-010o8fw-kqeuwthva"
+                  yingshiToken: "at.6vznnc23bv51vzjt7lnkj7e19bb2z61f-3gnj7m5lxp-10666cy-bgwcjkekk"
                }
             },
          ]
-   }, {
+      },
+      {
          label: '外部',
          value: '外部',
          key: '0-2',
@@ -61,11 +63,11 @@ const VideoScreen = (props) => {
                      value: '房子',
                      key: '0-2-1-1',
                      videoData: {
-                     channelNo: 1,
+                        channelNo: null,
                         content: ['5442542542', '452345', '234524525'],
-                     serialNo: "F61504020",
+                        serialNo: "G56384764",
                         type: "yingshi",
-                     yingshiToken: "at.7pl4c5orb9fpndtlbjpsn5m11szujnf7-1laxxre0ob-010o8fw-kqeuwthva",
+                        yingshiToken: "at.c7dnknnvd4irh8zddul3dgkpb4f3oz83-4n6u7zv8st-1gxz7ny-lgffyh25z",
                      }
                   },
                ]
@@ -93,10 +95,10 @@ const VideoScreen = (props) => {
 
    const [pageSize, setPageSize] = useState(4) //每页视频数量
    const [queryData, setQueryData] = useState([{ label: '全部', value: '全部', key: '0' }]) //查询树状数据
-   const [leftTree, setLefTtree] = useState([{ label: '全部', value: '全部', key: '0', children: treeData}]) //左侧树状数据
+   const [leftTree, setLefTtree] = useState(treeData) //左侧树状数据
    const [playData, setPlayData] = useState([]) //视频数据
    const [queryValue, setQueryValue] = useState(['全部']) //查询条件
-   const [leftValue, setLeftValue] = useState() //
+   const [leftValue, setLeftValue] = useState(treeData.map(v => v.value)) //树状被选中的视频
 
    const api = useRef();
 
@@ -106,28 +108,53 @@ const VideoScreen = (props) => {
          query.push({ label: v.label, value: v.value, key: v.key })
       ])
       setQueryData([{ label: '全部', value: '全部', key: '0', children: query }])
+      let playVideo = []
+      const playVideoData = (data) => {
+         // console.log(data);
+         data.map(v => {
+            if (v.videoData) playVideo.push(v)
+            if (v.children) playVideoData(v.children)
+         })
+
+      }
+      playVideoData(treeData)
+      setPlayData(playVideo)
+      // console.log(playVideo);
    }, [])
 
    useEffect(() => {
       if (treeData && queryValue.includes('全部')) {
          setLefTtree(treeData)
+
       } else {
          let leftData = []
-         queryValue.map(item => leftData.push(treeData?.find(({ value }) => item == value)))  //获取左侧树状数据
+         queryValue.map(item => {
-         setLefTtree([{ label: '全部', value: '全部', key: '0', children: leftData }])
+            leftData.push(treeData?.find(({ value }) => item == value))
+         })  //获取左侧树状数据
+         console.log(leftData);
+         setLefTtree(leftData)
+         let playVideo = []
+         const playVideoData = (data) => {
+            // console.log(data);
+            data.map(v => {
+               if (v.videoData) playVideo.push(v)
+               if (v.children) playVideoData(v.children)
+            })
+
+         }
+         playVideoData(leftData)
+         setPlayData(playVideo)
       }
 
 
-   }, [queryData, queryValue])
+   }, [queryData, queryValue, leftValue])
 
 
    useEffect(() => {
-      setLeftValue()
    }, [])
 
 
 
-
    //搜索条件赛选样式
    const screen = { width: 193, marginRight: 20, marginBottom: 16, color: "#fff", };
 
@@ -162,7 +189,7 @@ const VideoScreen = (props) => {
                background: 'url(/assets/images/application/background.png) 100% 100%',
                backgroundSize: '100% 100%',
                color: '#FFFFFF',
-               position: 'absolute', minWidth: 1000,
+               //  minWidth: 1000,
             }}>
             {/* 头部标题 */}
             <div style={{
@@ -185,9 +212,9 @@ const VideoScreen = (props) => {
             </div>
 
             <div style={{
-               height: "calc(100% - 112px)", margin: '16px', display: 'flex',
+               height: "calc(100% - 116px)", margin: '16px', display: 'flex',
             }}>
-               <div style={{ width: 300, height: "100%", border: '2px solid #003D9E', }}>
+               <div style={{ width: 300, height: "100%", border: '2px solid #003D9E', position: 'relative' }}>
                   <div>查询：
                      <TreeSelect
                         style={{ width: 150, }}
@@ -208,17 +235,18 @@ const VideoScreen = (props) => {
                      multiple
                      treeData={leftTree}
                      defaultExpandAll
-                     defaultValue={['公司','外部']}
+                     value={leftValue}
                      blockNode={false}
                      onChange={(e) => {
                         console.log(e);
                         setLeftValue(e)
                      }}
-                     onSelect={(e)=>{
+                     onSelect={(e) => {
                         console.log(e);
                      }}
                      style={{ width: 150, color: '#FFFFFF' }}
                   />
+                  <Checkbox defaultChecked onChange={checked => console.log(checked)} aria-label="Checkbox 示例" style={{ position: 'absolute', right: 0, bottom: 60 }}>全选</Checkbox>
                </div>
                <div style={{
                   flex: 1, marginLeft: '10px', border: '2px solid #003D9E',
@@ -292,15 +320,35 @@ const VideoScreen = (props) => {
                         </Button> */}
                      </div>
                   </div>
-                  <div style={{ display: 'flex', height: `calc( 100% - 160px )` }}>
+                  <div style={{ display: 'flex', height: '100%' }}>
                      {/* 视频 */}
                      <div style={{ flex: 1, height: '100%' }}>
-                        <Row style={{ height: '100%' }}>
+                        <Row style={{ height: `calc( 100% - 160px )` }}>
-                           {/* {data.map((v, index) => {
+                           {playData?.map((v, index) => {
-                              console.log(v);
                               return <VideoCard key={'VideoCard' + index} data={v} pageSize={pageSize} />
-                           })} */}
+                           })}
                         </Row>
+                        <div
+                           style={{
+                              display: "flex",
+                              justifyContent: 'space-between',
+                              padding: "10px",
+                           }}
+                        >
+                           <span style={{ lineHeight: "30px" }}>
+                              共{10}个设备
+                           </span>
+                           <Pagination
+                              total={100}
+
+                              // currentPage={1}
+                              style={{ color: 'white' }}
+                              onChange={(currentPage, pageSize) => {
+                                 // setQuery({ limit: pageSize, page: currentPage - 1 });
+                                 // page.current = currentPage - 1
+                              }}
+                           />
+                        </div>
                      </div>
                      {/* 视频设置 */}
                      <div style={{
@@ -313,7 +361,6 @@ const VideoScreen = (props) => {
                            return <div key={index}>
                               <Popover
                                  position='left'
-                                 trigger='click'
                                  content={() => {
                                     switch (v.value) {
                                        case '宫格设置':

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

@@ -1,6 +1,7 @@
 .KJBlue {
   .semi-tree-option,
   .semi-icon,
+  .semi-checkbox-addon, //全选文字
   .semi-form-field-label-text {
     color: #fff;
   }

code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef } from 'react';
 import { connect } from 'react-redux';
 import '../style.less'
 import { Tree, Popconfirm, Typography, Input, Switch, Modal, Checkbox, CheckboxGroup } from "@douyinfe/semi-ui";
+import VideoScreen from '../components/videoScreen'
 
 const MirroringDetail = (props) => {
    const { history, dispatch, actions, user, loading, StatusPushList } = props;
@@ -331,7 +332,7 @@ const MirroringDetail = (props) => {
                </div>
             </div>
          </div>
-            <div style={{display:'flex',height:'100%'}}>
+         <div style={{ display: 'flex', height: '100%' }}>
             <div style={{ height: "100%", width: 200, background: '#FFFFFF' }}>
                <div style={{ display: 'flex', height: 49, background: '#1859C1', border: '1px solid #1859C1', color: 'rgba(255,255,255,0.65)', fontSize: 14, width: '100%' }}>
                   {chooseList.map((item, index) => {
@@ -425,7 +426,10 @@ const MirroringDetail = (props) => {
                   </div>
                </div>
             </div>
-                <div style={{flex:1}}>
+            <div style={{ flex: 1,height:'100%'}}>
+
+               <VideoScreen />
+
             </div>
          </div>
          <Modal

code/VideoAccess-VCMP/web/client/src/utils/webapi.js

@@ -13,7 +13,6 @@ const { basicAction, RouteRequest } = webUtils
 export {
    basicAction, RouteRequest
 }
-console.log(basicAction, RouteRequest);
 
 export const ApiTable = {
    login: "login",