Browse Source

宫格,查询完成

release_1.3.0
wenlele 2 years ago
parent
commit
35f4535618
  1. 4
      code/VideoAccess-VCMP/api/app/lib/controllers/camera/index.js
  2. 9
      code/VideoAccess-VCMP/api/app/lib/models/gb_camera.js
  3. 37
      code/VideoAccess-VCMP/web/client/src/sections/journaling/components/container.jsx
  4. 37
      code/VideoAccess-VCMP/web/client/src/sections/journaling/components/videoCard.jsx
  5. 211
      code/VideoAccess-VCMP/web/client/src/sections/journaling/components/videoScreen.jsx
  6. 2
      code/VideoAccess-VCMP/web/package.json

4
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,

9
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",

37
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>
)
}

37
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>
</>
)

211
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>

2
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"

Loading…
Cancel
Save