分屏，轮询

code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx

@@ -4,7 +4,6 @@ import './textScroll.less'
 
 function TextScroll (props) {
     const { content, duration, roll } = props
-    console.log(content, roll);
     const [showContent, setShowContent] = useState('')
     const showIndex = useRef(0)
     const initialization = useRef(false)
@@ -13,7 +12,6 @@ function TextScroll (props) {
         if (content.length) {
             if (roll) {
                 let contentParent = document.getElementById('marquee_box')
-                console.log(document.getElementById('contentPMakeUp'));
                 document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px'
                 const contentP = document.getElementById('contentP')
                 contentP.style.visibility = 'visible'
@@ -28,7 +26,6 @@ function TextScroll (props) {
                 let refreshTime = moment()
                 const scroll = () => {
                     let contentParent = document.getElementById('marquee_box')
-                    console.log(document.getElementById('contentPMakeUp'));
                     document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px'
                     //初始化
                     // if(!showContent&&!initialization.current){

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

@@ -65,6 +65,7 @@ const VideoPlay = ({
     iotVideoServer,
     local, //是否本地调用视频
 }) => {
+   console.log(videoObj);
     if (videoObj.type == 'yingshi') {
         videoObj = {
             ...videoObj,
@@ -386,7 +387,6 @@ const VideoPlay = ({
 
     const setupSize = (data) => {
         if (!operationRef.current?.fullScreen.select) {
-            console.log(sizeWh);
             let containerWidth = sizeWh?.parentWidth    //容器的宽高和视频的宽高
             let containerHeight = sizeWh?.parentHeight
             let videoWidth = width || sizeWh?.width
@@ -500,7 +500,6 @@ const VideoPlay = ({
 
 function mapStateToProps (state) {
     const { auth, global } = state;
-    console.log(global);
     return {
         user: auth.user,
         iotVideoServer: global.iotVideoServer,

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

@@ -14,8 +14,6 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
     const upTimeInterval = useRef(null)
     const [showTime_, setShowTime] = useState('     ')
 
-    console.log(11212111313131);
-
     const updateTime = () => {
         if (!showTime) {
             setShowTime('')

code/VideoAccess-VCMP/web/client/src/sections/application/containers/applicationCenter.jsx

@@ -196,7 +196,7 @@ const ApplicationCenter = (props) => {
    const details = (data) => {
       pageLimit.current = query
       dispatch(applicationCenter.getApplication(pageLimit.current)).then((res) => {
-         limits.current = res.payload.data.data.length
+         limits.current = res.payload?.data?.data.length
       });
    }
    useEffect(() => {

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

@@ -0,0 +1,39 @@
+import React, { useEffect, useRef } from 'react';
+import { connect } from 'react-redux';
+import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Col } from '@douyinfe/semi-ui';
+import { VideoPlay } from "$components";
+import { useState } from 'react';
+
+
+const Container = ({ videoObj }) => {
+   const [videoWidth, setVideoWidth] = useState()
+   const [videoHeight, setVideoHeight] = useState()
+   useEffect(() => {
+      setVideoWidth(document.getElementById('videoo').clientWidth)
+      setVideoHeight(document.getElementById('videoo').clientHeight)
+   }, [])
+
+   return (
+      <div style={{ width: videoWidth || '100%', height: videoHeight || '100%', border: ' 1px solid #D9D9D9', }}>
+         {/* <VideoPlay sizeWh={{
+            width: 600,
+            height: 400,
+            parentWidth: 600,
+            parentHeight: 400,
+         }}
+            videoObj={videoObj}
+            height={400}
+            local={true} /> */}
+
+      </div>
+   )
+}
+
+function mapStateToProps (state) {
+   const { auth } = state;
+   return {
+      user: auth.user,
+   };
+}
+
+export default connect(mapStateToProps)(Container)

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

@@ -0,0 +1,49 @@
+import React, { useEffect, useRef } 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 }) => {
+
+   let span = 8
+   if (pageSize === 1) {
+      span = 24
+   }
+
+   if (pageSize === 4) {
+      span = 12
+   }
+
+   let rowsCount = 2
+   if (pageSize == 1) {
+      rowsCount = 1
+   }
+
+   if (pageSize == 9) {
+      rowsCount = 3
+   }
+   let cheight = Math.floor(100 / rowsCount) + "%"
+
+   return (
+      <>
+         <Col span={6} style={{ height: cheight, }}>
+            <div id="videoo" style={{ width: '100%', height: '100%', }}>
+               <Container
+                  videoObj={data}
+               />
+            </div>
+
+         </Col>
+      </>
+   )
+}
+
+function mapStateToProps (state) {
+   const { auth } = state;
+   return {
+      user: auth.user,
+   };
+}
+
+export default connect(mapStateToProps)(VideoCard)

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

@@ -1,91 +1,260 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { connect } from 'react-redux';
-import { TreeSelect, Tree } from '@douyinfe/semi-ui';
+import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row } from '@douyinfe/semi-ui';
+import './videoScreen.less'
+import VideoCard from './videoCard'
 
 
 const VideoScreen = (props) => {
 
-    const treeData = [{
+   const api = useRef();
-        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',
-                },
-            ]
-        }]
-    }]
 
+   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',
+            },
+         ]
+      }]
+   }]
 
+   //条件赛选样式
+   const screen = {
+      width: 193,
+      marginRight: 20,
+      marginBottom: 16,
+      color: "#fff",
+   };
 
-    return (
+   const data = [{
-        <>
+      channelNo: 1,
-            {/* 头部标题及搜索 */}
+      content: ['5442542542', '452345', '234524525'],
-            <div>智慧小蓝视频融合监管中心</div>
+      serialNo: "G75922040",
-            <div>
+      type: "yingshi",
-                <div style={{ width: 200, }}>
+      yingshiToken: "at.02vgv9vn19rek6hh6a9k35r61rf2orw5-6pmmn2tu6v-040zcc8-xj4tdjtau"
-                    <div>查询：
+   },]
-                        <TreeSelect
-                            style={{ width: 150 }}
-                            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-                            treeData={treeData}
-                            placeholder="请选择"
-                            multiple={true}
-                            defaultValue={['全部']}
-                            maxTagCount={1}
-                            onChange={(e) => {
-                                console.log(e)
-                            }}
-                        />
-                    </div>
 
-                    <Tree
+   return (
-                        treeData={treeData}
+      <>
-                        defaultExpandAll
+         <div
-                        style={{ width: 150 }}
+            className='KJBlue'
-                    />
+            style={{
-                </div>
+               width: '100%', height: '100%',
-                <div style={{flex: 1}}>
+               background: 'url(/assets/images/application/background.png) 100% 100%',
+               backgroundSize: '100% 100%',
+               color: '#FFFFFF',
+               position: 'absolute', minWidth: 1000,
+            }}>
+            {/* 头部标题 */}
+            <div style={{
+               width: '100%', height: 80,
+               textAlign: 'center',
+            }}>
+               <div style={{
+                  height: 80,
+                  padding: '0 10px',
+                  display: 'inline-block',
+                  fontSize: '36px',
+                  fontFamily: 'SourceHanSansCN - Heavy, SourceHanSansCN',
+                  fontWeight: 800,
+                  color: '#FFFFFF',
+                  lineHeight: '70px',
+                  letterSpacing: '5px',
+                  background: 'url(/assets/images/application/titleBottom.png) 100% 100%',
+                  backgroundSize: '100% 100%',
+               }} > 智慧小蓝视频融合监管中心</div>
+            </div>
 
-                </div>
+            <div style={{
+               height: "calc(100% - 112px)", margin: '16px', display: 'flex',
+            }}>
+               <div style={{ width: 300, height: "100%", border: '2px solid #003D9E', }}>
+                  <div>查询：
+                     <TreeSelect
+                        style={{ width: 150, }}
+                        dropdownStyle={{ maxHeight: 300, overflow: 'auto', color: '#FFFFFF', }}
+                        treeData={treeData}
+                        placeholder="请选择"
+                        multiple={true}
+                        defaultValue={['全部']}
+                        maxTagCount={1}
+                        onChange={(e) => {
+                           console.log(e)
+                        }}
+                     />
+                  </div>
 
+                  <Tree
+                     multiple
+                     treeData={treeData}
+                     defaultExpandAll
+                     style={{ width: 150, color: '#FFFFFF' }}
+                  />
+               </div>
+               <div style={{
+                  flex: 1, marginLeft: '10px', border: '2px solid #003D9E',
+               }}>
+                  <div style={{ display: 'flex', }}>
+                     <div style={{ flex: 1, marginTop: '10px', }}>
+                        <Form
+                           onSubmit={(values) => console.log(values)}
+                           // onValueChange={values=>console.log(values)}
+                           getFormApi={(formApi) => (api.current = formApi)}
+                           layout="horizontal"
+                           style={{ position: "relative", width: "100%", flex: 1 }}
+                        >
+                           <Form.Input label="设备搜索：" field="keyword" maxLength="36" placeholder="请输入设备名称" labelPosition="left" style={screen} />
+                           {/* <Form.Select
+                            label="状态查询："
+                            labelPosition="left"
+                            field="state"
+                            style={screen}
+                            placeholder="全部"
+                            showClear
+                        >
+                            <Form.Select.Option value="ON">在线</Form.Select.Option>
+                            <Form.Select.Option value="OFF">离线</Form.Select.Option>
+                            <Form.Select.Option value="UNKONW">未知</Form.Select.Option>
+                            <Form.Select.Option value="DISABLED">禁用</Form.Select.Option>
+                        </Form.Select>
+                       */}
+                        </Form>
+                     </div>
+                     <div
+                        style={{
+                           marginTop: '10px',
+                           // width: 150,
+                           // display: "flex",
+                           // justifyContent: "flex-end",
+                           // alignItems: "flex-end",
+                        }}
+                     >
+                        <Button
+                           theme="solid"
+                           type="primary"
+                           style={{ width: 65, height: 30, borderRadius: 3, marginRight: 16, }}
+                           onClick={() => {
+                              // api.current.validate().then((v) => {
+                              //    setSearch(v);
+                              //    setQuery({ limit: 10, page: 0 })
+                              // });
+                           }}
+                        >
+                           搜索
+                        </Button>
+                        {/* <Button
+                           theme="light"
+                           type="primary"
+                           style={{
+                              width: 65,
+                              height: 30,
+                              backGround: "#FFFFFF",
+                              borderRadius: 3,
+                              border: "1px solid #D9D9D9",
+                              marginBottom: 20,
+                           }}
+                           onClick={() => {
+                              api.current.reset();
+                              // setSearch({});
+                              // setQuery({ limit: 10, page: 0 })
+                           }}
+                        >
+                           重置
+                        </Button> */}
+                     </div>
+                  </div>
+                  <div style={{ display: 'flex', height: '100%' }}>
+                     {/* 视频 */}
+                     <div style={{ flex: 1, height: '100%' }}>
+                        <Row style={{ height: `calc( 100% - 160px )` }}>
+                           {data.map((v, index) => {
+                              return <VideoCard key={'VideoCard' + index} data={v} />
+                           })}
+                        </Row>
+                     </div>
+                     {/* 视频设置 */}
+                     <div style={{
+                        width: 64, height: 476, background: ' #01185F', boxShadow: 'inset 0px 0px 5px 1px rgba(28,96,254,0.4000)', borderRadius: ' 1px', textAlign: 'center',
+                     }}>
+                        {[{ img: 'gongge', value: '宫格设置', screen: [{ img: 'screen1', value: '单屏' }, { img: 'screen4', value: '4分屏' }, { img: 'screen6', value: '6分屏' }, { img: 'screen12', value: '12分屏' },] },
+                        { img: 'polling', value: '轮询设置' },
+                        { img: 'back', value: '背投' },
+                        { img: 'monitor', value: '监控地图' },].map((v, index) => {
+                           return <div key={index}>
+                              <Popover
+                                 position='left'
+                                 // 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}>
+                                                   <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>
+                                             })}
+                                          </div>
+                                       case '轮询设置':
+                                          return <div style={{ height: 48, background: '#01185F', boxShadow: ' inset 0px 0px 5px 1px rgba(28,96,254,0.2500)', color: ' #D9D9D9', display: 'flex', justifyContent: 'space-evenly', alignItems: 'center' }}>
+                                             <Switch onChange={(v, e) => console.log(v)} aria-label="a switch for demo" style={{ border: ' 1px solid #D9D9D9', }} />
+                                             轮询间隔
+                                             <Input style={{ width: 80, color: ' #D9D9D9', border: ' 1px solid #D9D9D9', }} defaultValue='1' />
+                                             分钟
+                                          </div>
+                                       default:
+                                          break;
+                                    }
+                                 }}
+                              >
+                                 <img src={`/assets/images/application/${v.img}.png`} alt="" style={{ width: 54, height: 54, margin: '20px 0 0px 10px' }} />
+                              </Popover>
+                              <div style={{ width: 32, marginLeft: 16 }}>{v.value}</div>
+                           </div>
+                        })}
+                     </div>
+                  </div>
+               </div>
             </div>
+         </div >
+      </>
 
-        </>
+   )
-    )
 }
 
 function mapStateToProps (state) {
-    const { auth } = state;
+   const { auth } = state;
-    return {
+   return {
-        user: auth.user,
+      user: auth.user,
-    };
+   };
 }
 
 export default connect(mapStateToProps)(VideoScreen)

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

@@ -0,0 +1,18 @@
+.KJBlue {
+  .semi-tree-option,
+  .semi-icon,
+  .semi-form-field-label-text {
+    color: #fff;
+  }
+  .semi-checkbox-inner-display {
+    //树状多选框
+    border: 1px solid #fff;
+  }
+  input {
+    background: #01185f;
+    box-shadow: inset 0px 0px 5px 1px rgba(28, 96, 254, 0.4);
+  }
+  input::placeholder {
+    color: #fff;
+  }
+}

code/VideoAccess-VCMP/web/client/src/sections/monitor/containers/videoPlayCross.jsx

@@ -47,7 +47,6 @@ const VideoPlayCross = (props) => {
             window.removeEventListener('resize', resize_);
         }
     }, [])
-    console.log(videoParams);
     return (
         <>
             {

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

@@ -51,14 +51,14 @@ export const ApiTable = {
    delPush: 'status/push/{configId}',//删除推送配置
    putPushBanned: 'status/push/banned',//禁用推送配置
    getPushCopy: 'status/push/{configId}/copy',//复制推送配置
-   getPushLog: '/status/push/{configId}/log',//获取推送记录
+   getPushLog: 'status/push/{configId}/log',//获取推送记录
 
 
    //应用管理
-   getApplication: '/application',   //获取应用信息
+   getApplication: 'application',   //获取应用信息
-   putApplication: '/application',   //禁用应用
+   putApplication: 'application',   //禁用应用
-   delApplication: '/application/{appId}',   //删除应用
+   delApplication: 'application/{appId}',   //删除应用
-   postApplication: '/application',   //创建/修改应用
+   postApplication: 'application',   //创建/修改应用
 };
 
 export const VideoServeApi = {