宫格，查询完成

code/VideoAccess-VCMP/api/app/lib/controllers/camera/index.js

@@ -43,7 +43,7 @@ async function getCameraProject (ctx, next) {
       }
       let gbCameraOption = {
          model: models.GbCamera,
-         attributes: ['id', 'online', 'playUrl'],
+         attributes: ['id', 'online', 'playUrl','did'],
          required: false
       }
       if (limit) {
@@ -183,7 +183,7 @@ async function getCamera (ctx) {
             attributes: ['token']
          }, {
             model: models.GbCamera,
-            attributes: ['id', 'online', 'playUrl'],
+            attributes: ['id', 'online', 'playUrl',],
             required: false
          }, {
             model: models.CameraRemark,

code/VideoAccess-VCMP/api/app/lib/models/gb_camera.js

@@ -149,6 +149,15 @@ module.exports = dc => {
          primaryKey: false,
          field: "playUrl",
          autoIncrement: false
+      },
+      did: {
+         type: DataTypes.INTEGER,
+         allowNull: true,
+         defaultValue: null,
+         comment: null,
+         primaryKey: false,
+         field: "did",
+         autoIncrement: false
       }
    }, {
       tableName: "gbCamera",

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

@@ -5,26 +5,39 @@ import { VideoPlay } from "$components";
 import { useState } from 'react';
 
 
-const Container = ({ videoObj }) => {
+const Container = ({ videoObj, pageSize }) => {
    const [videoWidth, setVideoWidth] = useState()
    const [videoHeight, setVideoHeight] = useState()
+   useEffect(() => {
+
+      const resize_ = () => {
+         setVideoWidth(document.getElementById('videoo').clientWidth)
+         setVideoHeight(document.getElementById('videoo').clientHeight)
+      }
+      resize_()
+      window.addEventListener('resize', resize_);  //只要窗口殴大小发生像素变化就会触发
+      return () => {
+         window.removeEventListener('resize', resize_);
+      }
+
+   }, [])
    useEffect(() => {
       setVideoWidth(document.getElementById('videoo').clientWidth)
       setVideoHeight(document.getElementById('videoo').clientHeight)
-   }, [])
-
+   }, [pageSize])
+   console.log(videoWidth, videoHeight);
    return (
-      <div style={{ width: videoWidth || '100%', height: videoHeight || '100%', border: ' 1px solid #D9D9D9', }}>
-         {/* <VideoPlay sizeWh={{
-            width: 600,
-            height: 400,
-            parentWidth: 600,
-            parentHeight: 400,
+      <div style={{ width: videoWidth || '100%', height: videoHeight || '100%',  padding: 5 }}>
+         <VideoPlay sizeWh={{
+            width: videoWidth - 10,
+            height: videoHeight - 10,
+            parentWidth: videoWidth - 10,
+            parentHeight: videoHeight - 10,
          }}
             videoObj={videoObj}
-            height={400}
-            local={true} /> */}
-
+            videoStyle='true'
+            containerId={videoObj.name}
+            local={true} />
       </div>
    )
 }

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

@@ -1,39 +1,42 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef,useState } from 'react';
 import { connect } from 'react-redux';
 import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Col } from '@douyinfe/semi-ui';
 import Container from "./container";
 
 
-const VideoCard = ({ data, pageSize = 9 }) => {
+const VideoCard = ({ data, pageSize }) => {
+
+
+
+
 
    let span = 8
+   let rowsCount = 2
    if (pageSize === 1) {
       span = 24
+      rowsCount = 1
    }
-
    if (pageSize === 4) {
       span = 12
+      rowsCount = 2
    }
-
-   let rowsCount = 2
-   if (pageSize == 1) {
-      rowsCount = 1
+   if (pageSize == 6) {
+      span = 8
+      rowsCount = 2
    }
-
-   if (pageSize == 9) {
+   if (pageSize == 12) {
+      span = 6
       rowsCount = 3
    }
    let cheight = Math.floor(100 / rowsCount) + "%"
-
+console.log(pageSize,span,cheight);
    return (
       <>
-         <Col span={6} style={{ height: cheight, }}>
-            <div id="videoo" style={{ width: '100%', height: '100%', }}>
-               <Container
-                  videoObj={data}
-               />
-            </div>
-
+         <Col id="videoo" span={span} style={{ height: cheight, }}>
+            <Container
+               videoObj={data}
+               pageSize={pageSize}
+            />
          </Col>
       </>
    )

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+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 './videoScreen.less'
@@ -6,61 +6,151 @@ import VideoCard from './videoCard'
 
 
 const VideoScreen = (props) => {
+   const [pageSize, setPageSize] = useState(4) //每页视频数量
+   const [queryData, setQueryData] = useState([{ label: '全部', value: '全部', key: '0' }]) //查询树状数据
+   const [leftTree, setLefTtree] = useState([]) //左侧树状数据
+   const [playData, setPlayData] = useState([]) //视频数据
+   const [queryValue, setQueryValue] = useState(['全部']) //查询条件
 
    const api = useRef();
 
+   useEffect(() => {
+      let query = []
+      treeData?.map(v => [
+         query.push({ label: v.label, value: v.value, key: v.key })
+      ])
+      setQueryData([{ label: '全部', value: '全部', key: '0', children: query }])
+
+   }, [])
+
+   useEffect(() => {
+      if (treeData && queryValue.includes('全部')) {
+         setLefTtree(treeData)
+      } else {
+         let leftData = []
+         queryValue.map(item => leftData.push(treeData?.find(({ value }) => item == value)))  //获取左侧树状数据
+         setLefTtree(leftData)
+      }
+
+
+   }, [queryData, queryValue])
+
+
+   useEffect(() => {
+
+
+   }, [])
+
+
    const treeData = [{
-      label: '全部',
-      value: '全部',
-      key: '0',
-      children: [{
-         label: '公司',
-         value: '公司',
-         key: '0-1',
-         children: [
-            {
-               label: '大门',
-               value: '大门',
-               key: '0-1-1',
-            }, {
-               label: '机房',
-               value: '机房',
-               key: '0-1-2',
-            }, {
-               label: '后门',
-               value: '后门',
-               key: '0-1-3',
-            },
-         ]
-      }, {
-         label: '外部',
-         value: '外部',
-         key: '0-2',
-         children: [
-            {
-               label: '门口',
-               value: '门口',
-               key: '0-2-1',
-            },
-         ]
-      }]
+      label: '公司',
+      value: '公司',
+      key: '0-1',
+      children: [
+         {
+            label: '大门',
+            value: '大门',
+            key: '0-1-1',
+            videoData: {
+               channelNo: 1,
+               content: ['5442542542', '452345', '234524525'],
+               serialNo: "F61504020",
+               type: "yingshi",
+               yingshiToken: "at.7pl4c5orb9fpndtlbjpsn5m11szujnf7-1laxxre0ob-010o8fw-kqeuwthva"
+            }
+         }, {
+            label: '机房',
+            value: '机房',
+            key: '0-1-2',
+            videoData: {
+               channelNo: 3,
+               content: ['5442542542', '452345', '234524525'],
+               serialNo: "F61504020",
+               type: "yingshi",
+               yingshiToken: "at.7pl4c5orb9fpndtlbjpsn5m11szujnf7-1laxxre0ob-010o8fw-kqeuwthva"
+            }
+         }, {
+            label: '后门',
+            value: '后门',
+            key: '0-1-3',
+            videoData: {
+               channelNo: 1,
+               content: ['5442542542', '452345', '234524525'],
+               serialNo: "F61504020",
+               type: "yingshi",
+               yingshiToken: "at.7pl4c5orb9fpndtlbjpsn5m11szujnf7-1laxxre0ob-010o8fw-kqeuwthva"
+            }
+         },
+      ]
+   }, {
+      label: '外部',
+      value: '外部',
+      key: '0-2',
+      children: [
+         {
+            label: '水库',
+            value: '水库',
+            key: '0-2-1',
+            children: [
+               {
+                  label: '房子',
+                  value: '房子',
+                  key: '0-2-1-1',
+                  videoData: {
+                     channelNo: 1,
+                     content: ['5442542542', '452345', '234524525'],
+                     serialNo: "F61504020",
+                     type: "yingshi",
+                     yingshiToken: "at.7pl4c5orb9fpndtlbjpsn5m11szujnf7-1laxxre0ob-010o8fw-kqeuwthva"
+                  }
+               },
+            ]
+         },
+      ]
+   }, {
+      label: '外',
+      value: '外',
+      key: '0-3',
+      children: [
+         {
+            label: '库',
+            value: '库',
+            key: '0-3-1',
+            children: [
+               {
+                  label: '子',
+                  value: '子',
+                  key: '0-3-1-1',
+               },
+            ]
+         },
+      ]
    }]
 
-   //条件赛选样式
-   const screen = {
-      width: 193,
-      marginRight: 20,
-      marginBottom: 16,
-      color: "#fff",
-   };
+   //搜索条件赛选样式
+   const screen = { width: 193, marginRight: 20, marginBottom: 16, color: "#fff", };
+
+   //宫格设置点击
+   const flipScreens = (data) => {
+      console.log(data);
+      switch (data) {
+         case "单屏":
+            setPageSize(1)
+            break;
+         case "4分屏":
+            setPageSize(4)
+            break;
+         case "6分屏":
+            setPageSize(6)
+            break;
+         case "12分屏":
+            setPageSize(12)
+            break;
+         default:
+            break
+      }
+   }
 
-   const data = [{
-      channelNo: 1,
-      content: ['5442542542', '452345', '234524525'],
-      serialNo: "G75922040",
-      type: "yingshi",
-      yingshiToken: "at.02vgv9vn19rek6hh6a9k35r61rf2orw5-6pmmn2tu6v-040zcc8-xj4tdjtau"
-   },]
 
    return (
       <>
@@ -101,21 +191,25 @@ const VideoScreen = (props) => {
                      <TreeSelect
                         style={{ width: 150, }}
                         dropdownStyle={{ maxHeight: 300, overflow: 'auto', color: '#FFFFFF', }}
-                        treeData={treeData}
+                        treeData={queryData}
                         placeholder="请选择"
                         multiple={true}
                         defaultValue={['全部']}
                         maxTagCount={1}
                         onChange={(e) => {
                            console.log(e)
+                           setQueryValue(e)
                         }}
                      />
                   </div>
 
                   <Tree
                      multiple
-                     treeData={treeData}
+                     treeData={leftTree}
                      defaultExpandAll
+                     onChange={(e) => {
+                        console.log(e);
+                     }}
                      style={{ width: 150, color: '#FFFFFF' }}
                   />
                </div>
@@ -191,13 +285,14 @@ const VideoScreen = (props) => {
                         </Button> */}
                      </div>
                   </div>
-                  <div style={{ display: 'flex', height: '100%' }}>
+                  <div style={{ display: 'flex', height: `calc( 100% - 160px )` }}>
                      {/* 视频 */}
                      <div style={{ flex: 1, height: '100%' }}>
-                        <Row style={{ height: `calc( 100% - 160px )` }}>
-                           {data.map((v, index) => {
-                              return <VideoCard key={'VideoCard' + index} data={v} />
-                           })}
+                        <Row style={{ height: '100%' }}>
+                           {/* {data.map((v, index) => {
+                              console.log(v);
+                              return <VideoCard key={'VideoCard' + index} data={v} pageSize={pageSize} />
+                           })} */}
                         </Row>
                      </div>
                      {/* 视频设置 */}
@@ -211,13 +306,13 @@ const VideoScreen = (props) => {
                            return <div key={index}>
                               <Popover
                                  position='left'
-                                 // trigger='click'
+                                 trigger='click'
                                  content={() => {
                                     switch (v.value) {
                                        case '宫格设置':
                                           return <div style={{ height: 69, background: '#01185F', boxShadow: ' inset 0px 0px 5px 1px rgba(28,96,254,0.2500)', display: 'flex', justifyContent: 'space-evenly', alignItems: 'center' }}>
                                              {v.screen.map((item) => {
-                                                return <div key={item.img}>
+                                                return <div key={item.img} onClick={() => flipScreens(item.value)}>
                                                    <img src={`/assets/images/application/${item.img}.png`} alt="" style={{ width: 40, height: 40, }} />
                                                    <div style={{ width: 40, fontWeight: 400, color: ' #D9D9D9', fontSize: 12, textAlign: 'center' }}>{item.value}</div>
                                                 </div>

code/VideoAccess-VCMP/web/package.json

@@ -7,7 +7,7 @@
       "test": "mocha",
       "start-vite": "cross-env NODE_ENV=developmentVite npm run start-params",
       "start": "cross-env NODE_ENV=development npm run start-params",
-      "start-params": "node server -p 5000 -u http://10.8.30.112:4000 --apiVcmpUrl http://localhost:4000 --apiAuthUrl http://10.8.30.112:4200 --apiAnxinyunUrl http://10.8.30.112:4100  --iotAuthWeb http://localhost:5200 --iotVideoServer http://221.230.55.27:8081",
+      "start-params": "node server -p 5000 -u http://localhost:4000 --apiVcmpUrl http://localhost:4000 --apiAuthUrl http://localhost:4200 --apiAnxinyunUrl http://localhost:4100  --iotAuthWeb http://localhost:5200 --iotVideoServer http://221.230.55.27:8081",
       "deploy": "export NODE_ENV=production&& npm run build && node server",
       "build-dev": "cross-env NODE_ENV=development&&webpack --config webpack.config.js",
       "build": "cross-env NODE_ENV=production&&webpack --config webpack.config.prod.js"