Browse Source

列表展开与勾选

dev_trial
wenlele 2 years ago
parent
commit
245245a69a
  1. 8
      code/VideoAccess-VCMP/api/app/lib/controllers/mirror/index.js
  2. 9
      code/VideoAccess-VCMP/api/app/lib/models/mirror.js
  3. 6
      code/VideoAccess-VCMP/script/1.6.3.1/achema/1.update_mirror.sql
  4. 35
      code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx
  5. 6
      code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx
  6. 54
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/callService.jsx
  7. 175
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx

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

@ -9,7 +9,7 @@ async function edit (ctx) {
const { userId } = ctx.fs.api
const data = ctx.request.body
const timeNow = moment()
const { mirrorId, tree = [], filterGroup = [], listOpen = false } = data
const { mirrorId, tree = [], filterGroup = [], listOpen = false ,check=[] } = data
let mirrorId_ = mirrorId
if (mirrorId_) {
@ -18,7 +18,8 @@ async function edit (ctx) {
updateTime: timeNow.format(),
title: data.title,
showHeader: Boolean(data.showHeader),
listOpen:listOpen
listOpen:listOpen,
check:check
}
if (data.publish) {
upData.publish = true
@ -64,7 +65,8 @@ async function edit (ctx) {
showHeader: Boolean(data.showHeader),
publish: false,
mid: timeNow.format(`ssmmHHDDMMYY${Math.floor(Math.random() * 89 + 10)}`),
listOpen: listOpen
listOpen: listOpen,
check:check
}
if (data.publish) {
createData.publish = true

9
code/VideoAccess-VCMP/api/app/lib/models/mirror.js

@ -87,6 +87,15 @@ module.exports = dc => {
field: "publish",
autoIncrement: false
},
check: {
type: DataTypes.ARRAY(DataTypes.INTEGER),
allowNull: true,
defaultValue: null,
comment: null,
primaryKey: false,
field: "check",
autoIncrement: false
},
mid: {
type: DataTypes.STRING,
allowNull: false,

6
code/VideoAccess-VCMP/script/1.6.3.1/achema/1.update_mirror.sql

@ -2,3 +2,9 @@ alter table mirror
add list_open boolean;
comment on column mirror.list_open is '镜像大屏列表是否折叠';
alter table mirror
add "check" integer[];
comment on column mirror."check" is '分组勾选';

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

@ -12,22 +12,18 @@ const Container = ({ videoObj, pageSize, showHeader, videoPlay, mould }) => {
// console.log(videoObj);
useEffect(() => {
// const resize_ = async () => {
// try {
// let video = document.getElementById('video' + videoObj.key)
// if (video) {
// await setVideoWidth(video.clientWidth)
// await setVideoHeight(video.clientHeight)
// }
// } catch (error) {
// console.error(error)
// }
// }
// resize_()
// window.addEventListener('resize', resize_); //
// return () => {
// window.removeEventListener('resize', resize_);
// }
const resize_ = async () => {
try {
let video = document.getElementById('video' + videoObj.key)
if (video) {
await setVideoWidth(video.clientWidth)
await setVideoHeight(video.clientHeight)
}
} catch (error) {
console.error(error)
}
}
const div = document.getElementById('rearProjection');
@ -42,7 +38,14 @@ const Container = ({ videoObj, pageSize, showHeader, videoPlay, mould }) => {
};
document.addEventListener('fullscreenchange', handleFullscreenChange);
resize_()
window.addEventListener('resize', resize_); //
return () => {
window.removeEventListener('resize', resize_);
document.removeEventListener('fullscreenchange', handleFullscreenChange);
};
}, [])

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

@ -8,7 +8,7 @@ import PerfectScrollbar from "perfect-scrollbar";
let timing
let projectScrollbar;
const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, showHeader, listOpen }) => {
const VideoScreen = ({ treeData, filterGroup, videoPlay, template, treeValue, headerName, showHeader, listOpen }) => {
// console.log('', treeData);
// console.log('', filterGroup);
// console.log(headerName);
@ -112,9 +112,9 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
let values = treeData.map(v => v.value)
videoData(treeData, values)
setLefTtree(treeData)
setLeftValue(treeData.map(v => v.value))
setLeftValue(treeValue)
api.current?.reset()
}, [treeData, filterGroup])
}, [treeValue,treeData, filterGroup])
useEffect(() => {

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

@ -18,6 +18,7 @@ const CallService = (props) => {
const [videoPlay, setVideoPlay] = useState(true) //
const [listOpen, setlistOpen] = useState(false)//
const [loading, setLoading] = useState(false)
const [treeValue, setTreeValue] = useState([])
useEffect(async () => {
@ -40,6 +41,58 @@ const CallService = (props) => {
setlistOpen(data.listOpen || false)
setFilterGroup(filterGrouplist)
setTemplate(data.template)
if (data?.check?.length > 0) {
let checks = data?.check
let vlaue = []
data?.tree?.map(f => {
if (f.children?.length > 0) { //1
f.children?.map(d => {
if (checks.includes(d.cameraId)) {
vlaue.push(d.key);
} else if (d.children?.length > 0) { //2
d.children?.map(s => {
if (checks.includes(s.cameraId)) {
vlaue.push(s.key);
} else if (s.children?.length > 0) {
s.children?.map(g => { //3
if (checks.includes(g.cameraId)) {
vlaue.push(g.key);
}
})
}
})
}
})
}
})
setTreeValue(vlaue)
} else {
let vlaue = []
data?.tree?.map(f => {
if (f.children?.length > 0) { //1
f.children?.map(d => {
if (d.cameraId) {
vlaue.push(d.key);
} else if (d.children?.length > 0) { //2
d.children?.map(s => {
if (s.cameraId) {
vlaue.push(s.key);
} else if (s.children?.length > 0) {
s.children?.map(g => { //3
if (g.cameraId) {
vlaue.push(g.key);
}
})
}
})
}
})
}
})
console.log(vlaue);
setTreeValue(vlaue)
}
} else {
dispatch(push('/noMatch'))
Notification.error({
@ -57,6 +110,7 @@ const CallService = (props) => {
{treeData && loading ? <VideoScreen
treeData={treeData}
treeValue={treeValue}
headerName={headerName}
showHeader={showHeader}
filterGroup={filterGroup}

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

@ -1,12 +1,16 @@
import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'react-redux';
import '../style.less'
import { Tree, Popconfirm, Typography, Input, Switch, Modal, Checkbox, CheckboxGroup, Select, Toast, Button, Notification } from "@douyinfe/semi-ui"
import { Popconfirm, Typography, Input, Tree, Switch, Modal, Checkbox, CheckboxGroup, Select, Toast, Button, Notification } from "@douyinfe/semi-ui"
import VideoScreen from '../components/videoScreen';
import { set } from 'nprogress';
import PerfectScrollbar from "perfect-scrollbar";
let checksScrollbar
export const tree = (res) => {
let mytreeData = res
let mytreeData = [...res]
for (let i = 0; i < mytreeData.length; i++) {//
mytreeData[i].value = mytreeData[i].key
for (let j = 0; j < mytreeData[i].children.length; j++) {//
@ -86,13 +90,86 @@ const MirroringDetail = (props) => {
let mytreeDatas = tree(res.payload.data.tree)
setTreeData(mytreeDatas);
if (res.payload.data?.check?.length > 0) {
setCheckResult(res.payload.data.check)
let checks = res.payload.data.check
let vlaue = []
mytreeDatas?.map(f => {
if (f.children?.length > 0) { //1
f.children?.map(d => {
if (checks.includes(d.cameraId)) {
vlaue.push(d.key);
} else if (d.children?.length > 0) { //2
d.children?.map(s => {
if (checks.includes(s.cameraId)) {
vlaue.push(s.key);
} else if (s.children?.length > 0) {
s.children?.map(g => { //3
if (checks.includes(g.cameraId)) {
vlaue.push(g.key);
}
})
}
})
}
})
}
})
setTreeValue(vlaue)
} else {
let data = []
let vlaue = []
mytreeDatas?.map(f => {
if (f.children?.length > 0) { //1
f.children?.map(d => {
if (d.cameraId) {
data.push(d.cameraId);
vlaue.push(d.key);
} else if (d.children?.length > 0) { //2
d.children?.map(s => {
if (s.cameraId) {
data.push(s.cameraId);
vlaue.push(s.key);
} else if (s.children?.length > 0) {
s.children?.map(g => { //3
if (g.cameraId) {
data.push(g.cameraId);
vlaue.push(g.key);
}
})
}
})
}
})
}
})
setTreeValue(vlaue)
setCheckResult(data)
}
})
}
equipmentGetCamera();
}, []);
useEffect(() => {
if (groupChecked) {
const dom = document.getElementById("checkss");
if (dom && checksScrollbar) {
checksScrollbar.update();
}
}
})
const [hasModify, sethasModify] = useState(false)//
const [showHeader, setShowHeader] = useState(false)//
const [listOpen, setlistOpen] = useState(false)//
const [groupChecked, setGroupChecked] = useState(false)//
const [checkResult, setCheckResult] = useState([])//id
const [treeValue, setTreeValue] = useState([])
const [mirrorId, setMirrorId] = useState(null)//id
const [backVisible, setBackVisible] = useState(false)//
@ -131,6 +208,9 @@ const MirroringDetail = (props) => {
const [headerName, setHeaderName] = useState('我的镜像服务01');//
const [editHeaderName, setEditHeaderName] = useState(false)//
const [videoPlay, setVideoPlay] = useState(false);//
function changeHeaderName () {//
setEditHeaderName(true)
}
@ -233,7 +313,8 @@ const MirroringDetail = (props) => {
publish: publish,
tree: treeData,
filterGroup: filterGroup,
listOpen:listOpen
listOpen: listOpen,
check: checkResult
}
dispatch(openness.putMirror(mirrordata)).then((res) => {
if (res.success) {
@ -559,6 +640,7 @@ const MirroringDetail = (props) => {
setMykeyword('');
setAddScreen(false);
setAddLabel(false);
setGroupChecked(false)
}
function addMainNode () {//
let mainData = JSON.parse(JSON.stringify(treeData))
@ -763,6 +845,7 @@ const MirroringDetail = (props) => {
}
function addScreenGroup () {//
setAddScreen(true)
setGroupChecked(false)
}
function addLabelGroup (index) {//
let myAllCameraList = []
@ -1129,6 +1212,29 @@ const MirroringDetail = (props) => {
/>
</div>
</div>
<div style={{ height: 40, display: 'flex', padding: '0px 12px 0px 20px', alignItems: 'center', justifyContent: 'space-between', background: 'rgb(246, 250, 255)', cursor: 'pointer' }} onClick={
() => {
setGroupChecked(true)
setAddScreen(false)
setAddLabel(false)
setTimeout(() => {
checksScrollbar = new PerfectScrollbar("#checkss", {
suppressScrollX: true,
});
}, 200);
}}>
<div style={{ marginLeft: 9, fontSize: 15, color: 'rgba(0,0,0,0.65)' }}>
分组勾选
</div>
<div style={{ width: 16, height: 16 }}>
<img
src="/assets/images/imageImg/toright.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
</div>
</div>
{addScreen ? (
<div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 200, background: '#FFFFFF', zIndex: 1 }}>
@ -1139,7 +1245,7 @@ const MirroringDetail = (props) => {
{filterGroup.length}/5
</div>
</div>
<div style={{ width: 16, height: 16, cursor: 'pointer' }} onClick={() => { setAddScreen(false); setAddLabel(false); }}>
<div style={{ width: 16, height: 16, cursor: 'pointer' }} onClick={() => { setAddScreen(false); setAddLabel(false) }}>
<img
src="/assets/images/imageImg/close.png"
alt="设置"
@ -1210,6 +1316,65 @@ const MirroringDetail = (props) => {
</div>
</div>
) : ('')}
{groupChecked ? (
<div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 200, background: '#FFFFFF', zIndex: 1 }}>
<div style={{ background: 'linear-gradient(180deg, #1859C1 0%, #2C66E7 100%)', display: 'flex', height: 49, padding: '0px 12px 0px 10px', alignItems: 'center', justifyContent: 'space-between', }}>
<div style={{ fontSize: 14, color: '#F9F9F9' }}>分组勾选设置</div>
<div style={{ width: 16, height: 16, cursor: 'pointer' }} onClick={() => {
setGroupChecked(false)
}}>
<img
src="/assets/images/imageImg/close.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
</div>
<div id='checkss' style={{ borderLeft: '1px solid rgba(226,226,226,0.5)', height: `calc(100% - 120px)`, position: "relative", }} >
<Tree
multiple
treeData={treeData || []}
value={treeValue || []}
blockNode={false}
defaultExpandAll={true}
expandAll={true}
leafOnly={true}
onChange={(e) => {
sethasModify(true)
setTreeValue(e)
let cameraId = []
treeData?.map(f => {
if (f.children?.length > 0) { //1
f.children?.map(d => {
if (e.includes(d.value) && d.cameraId) {
cameraId.push(d.cameraId);
} else if (d.children?.length > 0) { //2
d.children?.map(s => {
if (e.includes(s.value) && s.cameraId) {
cameraId.push(s.cameraId);
} else if (s.children?.length > 0) {
s.children?.map(g => { //3
if (e.includes(g.value) && g.cameraId) {
cameraId.push(g.cameraId);
}
})
}
})
}
})
}
})
setCheckResult(cameraId)
}}
onSelect={(e) => {
// console.log(e);
}}
style={{ color: '#FFFFFF' }}
/>
</div>
</div>
) : ('')}
{addLabel ? (
<div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 464, background: '#FFFFFF', zIndex: 120 }}>
<div style={{ background: 'linear-gradient(180deg, #1859C1 0%, #2C66E7 100%)', display: 'flex', height: 49, padding: '0px 12px 0px 10px', alignItems: 'center', justifyContent: 'space-between', }}>
@ -1284,7 +1449,7 @@ const MirroringDetail = (props) => {
}
</div>
<div style={{ flex: 1 }}>
<VideoScreen treeData={treeData} headerName={headerName} listOpen={listOpen} showHeader={showHeader} filterGroup={filterGroup} template={template} videoPlay={videoPlay} />
<VideoScreen treeData={treeData} treeValue={treeValue} headerName={headerName} listOpen={listOpen} showHeader={showHeader} filterGroup={filterGroup} template={template} videoPlay={videoPlay} />
</div>
</div>
<Modal

Loading…
Cancel
Save