Browse Source

Merge branch 'dev_trial' of https://gitea.anxinyun.cn/free-sun/FS-IOT into dev_trial

release_1.3.0
巴林闲侠 2 years ago
parent
commit
c49bde63ad
  1. 140
      code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx
  2. 19
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx
  3. 2
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx
  4. 14
      code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx
  5. 4
      code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoCard.jsx
  6. 347
      code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx
  7. 12
      code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.less
  8. 12
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroring.jsx
  9. 189
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx

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

@ -3,77 +3,77 @@ import moment from 'moment'
import './textScroll.less' import './textScroll.less'
function TextScroll (props) { function TextScroll (props) {
const { content, duration, roll } = props const { content, duration, roll, videoObj } = props
const [showContent, setShowContent] = useState('') const [showContent, setShowContent] = useState('')
const showIndex = useRef(0) const showIndex = useRef(0)
const initialization = useRef(false) const initialization = useRef(false)
const cancel = useRef(false) const cancel = useRef(false)
useEffect(() => { useEffect(() => {
if (content.length) { if (content.length) {
if (roll) { if (roll) {
let contentParent = document.getElementById('marquee_box') let contentParent = document.getElementById("marquee_box" + videoObj.id)
document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px' document.getElementById('contentPMakeUp' + videoObj.id).style.width = contentParent.clientWidth + 'px'
const contentP = document.getElementById('contentP') const contentP = document.getElementById('contentP' + videoObj.id)
contentP.style.visibility = 'visible' contentP.style.visibility = 'visible'
setShowContent(content[0]) setShowContent(content[0])
window.cancelAnimationFrame(cancel.current) window.cancelAnimationFrame(cancel.current)
contentParent.scrollLeft = 0 contentParent.scrollLeft = 0
initialization.current = false initialization.current = false
showIndex.current = 0 showIndex.current = 0
}
else {
let repeatTime = moment()
let refreshTime = moment()
const scroll = () => {
let contentParent = document.getElementById("marquee_box" + videoObj.id)
document.getElementById('contentPMakeUp' + videoObj.id).style.width = contentParent.clientWidth + 'px'
//
// if(!showContent&&!initialization.current){
if (!initialization.current) {
const contentP = document.getElementById('contentP' + videoObj.id)
contentParent.scrollLeft = 0
setShowContent(content[showIndex.current])
showIndex.current = (showIndex.current + 1) % content.length
contentP.style.visibility = 'visible'
initialization.current = true
}
//
if (moment().diff(refreshTime) > 1000 / 60) {
const contentP = document.getElementById('contentP' + videoObj.id)
//
if (moment().diff(repeatTime) > 1000 * 1.5) {
contentP.style.visibility = 'visible'
}
//
if (moment().diff(repeatTime) > 1000 * 3) {
contentParent.scrollLeft = contentParent.scrollLeft + 1
}
//
if (contentParent.scrollLeft >= contentP.clientWidth + 24) {
contentParent.scrollLeft = 0
repeatTime = moment()
setShowContent(content[showIndex.current])
showIndex.current = (showIndex.current + 1) % content.length
contentP.style.visibility = 'hidden'
}
refreshTime = moment()
}
let text = null
text = window.requestAnimationFrame(scroll)
cancel.current = text
} }
else { window.requestAnimationFrame(scroll)
let repeatTime = moment() }
let refreshTime = moment() }
const scroll = () => { }, [content, roll])
let contentParent = document.getElementById('marquee_box') return (
document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px' <div className="marquee_box" id={"marquee_box" + videoObj.id} style={{ overflow: 'hidden', color: '#F9F9F9' }} >
// <div style={{ position: 'relative', left: 24 }}>
// if(!showContent&&!initialization.current){ <div id={'contentP' + videoObj.id} style={{ display: 'inline-block', visibility: 'hidden' }}>{showContent}</div>
if (!initialization.current) { <div id={'contentPMakeUp' + videoObj.id} style={{ width: 0, display: 'inline-block' }}></div>
const contentP = document.getElementById('contentP') </div>
contentParent.scrollLeft = 0 </div>
setShowContent(content[showIndex.current]) )
showIndex.current = (showIndex.current + 1) % content.length
contentP.style.visibility = 'visible'
initialization.current = true
}
//
if (moment().diff(refreshTime) > 1000 / 60) {
const contentP = document.getElementById('contentP')
//
if (moment().diff(repeatTime) > 1000 * 1.5) {
contentP.style.visibility = 'visible'
}
//
if (moment().diff(repeatTime) > 1000 * 3) {
contentParent.scrollLeft = contentParent.scrollLeft + 1
}
//
if (contentParent.scrollLeft >= contentP.clientWidth + 24) {
contentParent.scrollLeft = 0
repeatTime = moment()
setShowContent(content[showIndex.current])
showIndex.current = (showIndex.current + 1) % content.length
contentP.style.visibility = 'hidden'
}
refreshTime = moment()
}
let text = null
text = window.requestAnimationFrame(scroll)
cancel.current = text
}
window.requestAnimationFrame(scroll)
}
}
}, [content, roll])
return (
<div className="marquee_box" id='marquee_box' style={{ overflow: 'hidden', color: '#F9F9F9' }} >
<div style={{ position: 'relative', left: 24 }}>
<div id='contentP' style={{ display: 'inline-block', visibility: 'hidden' }}>{showContent}</div>
<div id='contentPMakeUp' style={{ width: 0, display: 'inline-block' }}></div>
</div>
</div>
)
} }
export default React.memo(TextScroll) export default React.memo(TextScroll)

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

@ -65,7 +65,7 @@ const VideoPlay = ({
iotVideoServer, iotVideoServer,
local, // local, //
}) => { }) => {
// console.log(sizeWh,videoObj); // console.log(containerId, videoObj);
if (videoObj.type == 'yingshi') { if (videoObj.type == 'yingshi') {
videoObj = { videoObj = {
...videoObj, ...videoObj,
@ -103,7 +103,7 @@ const VideoPlay = ({
// ifream // ifream
const yingshiPrepareRef = useRef(null) const yingshiPrepareRef = useRef(null)
const playState = useRef(false) // const playState = useRef(false) //
const player_ = useRef(null) const yingshiPlayer = useRef(null)
useEffect(() => { useEffect(() => {
setRoll(false) setRoll(false)
@ -169,11 +169,8 @@ const VideoPlay = ({
screenfull.toggle(videoplay); screenfull.toggle(videoplay);
if (videoObj?.type == 'yingshi' && player) { if (videoObj?.type == 'yingshi' && player) {
if (operationRef.current?.fullScreen.select) { if (operationRef.current?.fullScreen.select) {
console.log(5515);
player.reSize(screen.width, screen.height); player.reSize(screen.width, screen.height);
} else { } else {
console.log(5515);
player.reSize(size?.width, size?.height); player.reSize(size?.width, size?.height);
} }
} }
@ -228,17 +225,12 @@ const VideoPlay = ({
// window.addEventListener('resize', resize_); // // window.addEventListener('resize', resize_); //
// } // }
return () => { return () => {
console.log(854453453);
if (jessibuca) { if (jessibuca) {
jessibuca.destroy() jessibuca.destroy()
} }
if (player && videoObj.type == 'yingshi') { if (yingshiPlayer.current && videoObj.type == 'yingshi') {
console.log(854453453); yingshiPlayer.current.stop()
player.stop()
} }
// if (local) {
// window.removeEventListener('resize', resize_);
// }
} }
}, []) }, [])
@ -349,6 +341,7 @@ const VideoPlay = ({
}, },
}) })
setPlayer(player) setPlayer(player)
yingshiPlayer.current = player
} }
} }
@ -430,7 +423,7 @@ const VideoPlay = ({
useEffect(() => { useEffect(() => {
setupSize() setupSize()
}, [sizeWh]) }, [sizeWh])
return ( return (
<> <>
<div className="vcmp_videoplay" style={{ width: size?.parentWidth || '100%', height: size?.parentHeight || '100%', backgroundColor: 'black', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', }}> <div className="vcmp_videoplay" style={{ width: size?.parentWidth || '100%', height: size?.parentHeight || '100%', backgroundColor: 'black', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', }}>

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

@ -96,7 +96,7 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
</Col> </Col>
<Col span={videoStyle == 'true' ? 24 : 15} style={{}}> <Col span={videoStyle == 'true' ? 24 : 15} style={{}}>
<div style={{ paddingRight: 12 }}> <div style={{ paddingRight: 12 }}>
{content ? <TextScroll content={content || []} duration={6} /> : ""} {content ? <TextScroll content={content || []} duration={6} videoObj={videoObj} /> : ""}
</div> </div>
</Col> </Col>
</Row> </Row>

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

@ -12,8 +12,8 @@ const Container = ({ videoObj, pageSize }) => {
useEffect(() => { useEffect(() => {
const resize_ = () => { const resize_ = () => {
setVideoWidth(document.getElementById('videoo').clientWidth) setVideoWidth(document.getElementById('video' + videoObj.key).clientWidth)
setVideoHeight(document.getElementById('videoo').clientHeight) setVideoHeight(document.getElementById('video' + videoObj.key).clientHeight)
} }
resize_() resize_()
window.addEventListener('resize', resize_); // window.addEventListener('resize', resize_); //
@ -23,8 +23,8 @@ const Container = ({ videoObj, pageSize }) => {
}, []) }, [])
useEffect(() => { useEffect(() => {
setVideoWidth(document.getElementById('videoo').clientWidth) setVideoWidth(document.getElementById('video' + videoObj.key).clientWidth)
setVideoHeight(document.getElementById('videoo').clientHeight) setVideoHeight(document.getElementById('video' + videoObj.key).clientHeight)
}, [pageSize]) }, [pageSize])
// console.log(videoWidth, videoHeight); // console.log(videoWidth, videoHeight);
return ( return (
@ -36,11 +36,11 @@ const Container = ({ videoObj, pageSize }) => {
parentWidth: videoWidth - 10, parentWidth: videoWidth - 10,
parentHeight: videoHeight - 40, parentHeight: videoHeight - 40,
}} }}
videoObj={videoObj.videoData} videoObj={videoObj.camera}
videoStyle='true' videoStyle='true'
containerId={videoObj.label} containerId={videoObj.key}
local={true} /> : ""} local={true} /> : ""}
<div style={{lineHeight:'30px',paddingLeft:6}}>{videoObj?.label}</div> <div style={{ lineHeight: '30px', paddingLeft: 6 }}>{videoObj?.label}</div>
</div> </div>
) )
} }

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

@ -4,7 +4,7 @@ import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Col }
import Container from "./container"; import Container from "./container";
const VideoCard = ({ data, pageSize }) => { const VideoCard = ({ data, pageSize , key}) => {
let span = 8 let span = 8
@ -29,7 +29,7 @@ const VideoCard = ({ data, pageSize }) => {
return ( return (
<> <>
<Col id="videoo" span={span} style={{ height: cheight, }}> <Col id={'video'+data.key} key={key} span={span} style={{ height: cheight, }}>
<Container <Container
videoObj={data} videoObj={data}
pageSize={pageSize} pageSize={pageSize}

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

@ -3,95 +3,103 @@ import { connect } from 'react-redux';
import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Pagination, Checkbox } from '@douyinfe/semi-ui'; import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Pagination, Checkbox } from '@douyinfe/semi-ui';
import './videoScreen.less' import './videoScreen.less'
import VideoCard from './videoCard' import VideoCard from './videoCard'
import { version } from 'less';
const VideoScreen = (props) => { const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, showHeader }) => {
const treeData = [ console.log({ 视频: treeData });
{ console.log(filterGroup);
label: '公司', console.log(headerName);
value: '公司', console.log(videoPlay);
key: '0-1', console.log(template);
children: [ console.log(showHeader);
{
label: '大门', // const treeData = [
value: '大门', // {
key: '0-1-1', // label: '',
videoData: { // value: '',
channelNo: 1, // key: '524252542',
content: ['5442542542', '452345', '234524525'], // children: [
serialNo: "F61504020", // {
type: "yingshi", // label: '',
yingshiToken: "at.6vznnc23bv51vzjt7lnkj7e19bb2z61f-3gnj7m5lxp-10666cy-bgwcjkekk" // value: '',
} // key: '2451245',
}, { // videoData: {
label: '机房', // channelNo: 1,
value: '机房', // content: ['5442542542', '452345', '234524525'],
key: '0-1-2', // serialNo: "F61504020",
videoData: { // type: "yingshi",
channelNo: 3, // yingshiToken: "at.6vznnc23bv51vzjt7lnkj7e19bb2z61f-3gnj7m5lxp-10666cy-bgwcjkekk"
content: ['5442542542', '452345', '234524525'], // }
serialNo: "F61504020", // }, {
type: "yingshi", // label: '',
yingshiToken: "at.6vznnc23bv51vzjt7lnkj7e19bb2z61f-3gnj7m5lxp-10666cy-bgwcjkekk" // value: '',
} // key: '54252542',
}, { // videoData: {
label: '后门', // channelNo: 3,
value: '后门', // content: ['5442542542', '452345', '234524525'],
key: '0-1-3', // serialNo: "F61504020",
videoData: { // type: "yingshi",
channelNo: 2, // yingshiToken: "at.6vznnc23bv51vzjt7lnkj7e19bb2z61f-3gnj7m5lxp-10666cy-bgwcjkekk"
content: ['5442542542', '452345', '234524525'], // }
serialNo: "F61504020", // }, {
type: "yingshi", // label: '',
yingshiToken: "at.6vznnc23bv51vzjt7lnkj7e19bb2z61f-3gnj7m5lxp-10666cy-bgwcjkekk" // value: '',
} // key: '52425425642',
}, // videoData: {
] // channelNo: 2,
}, // content: ['5442542542', '452345', '234524525'],
{ // serialNo: "F61504020",
label: '外部', // type: "yingshi",
value: '外部', // yingshiToken: "at.6vznnc23bv51vzjt7lnkj7e19bb2z61f-3gnj7m5lxp-10666cy-bgwcjkekk"
key: '0-2', // }
children: [ // },
{ // ]
label: '水库', // },
value: '水库', // {
key: '0-2-1', // label: '',
children: [ // value: '',
{ // key: '25425425',
label: '房子', // children: [
value: '房子', // {
key: '0-2-1-1', // label: '',
videoData: { // value: '',
channelNo: null, // key: '2542542542542',
content: ['5442542542', '452345', '234524525'], // children: [
serialNo: "G56384764", // {
type: "yingshi", // label: '',
yingshiToken: "at.c7dnknnvd4irh8zddul3dgkpb4f3oz83-4n6u7zv8st-1gxz7ny-lgffyh25z", // value: '',
} // key: '2542542542542',
}, // videoData: {
] // channelNo: null,
}, // content: ['5442542542', '452345', '234524525'],
] // serialNo: "G56384764",
}, { // type: "yingshi",
label: '外', // yingshiToken: "at.c7dnknnvd4irh8zddul3dgkpb4f3oz83-4n6u7zv8st-1gxz7ny-lgffyh25z",
value: '外', // }
key: '0-3', // },
children: [ // ]
{ // },
label: '库', // ]
value: '库', // }, {
key: '0-3-1', // label: '',
children: [ // value: '',
{ // key: '0-3',
label: '子', // children: [
value: '子', // {
key: '0-3-1-1', // label: '',
}, // value: '',
] // key: '0-3-1',
}, // children: [
] // {
}] // label: '',
// value: '',
// key: '0-3-1-1',
// },
// ]
// },
// ]
// }]
const [pageSize, setPageSize] = useState(4) // const [pageSize, setPageSize] = useState(4) //
const [queryData, setQueryData] = useState([{ label: '全部', value: '全部', key: '0' }]) // const [queryData, setQueryData] = useState([{ label: '全部', value: '全部', key: '0' }]) //
@ -99,64 +107,101 @@ const VideoScreen = (props) => {
const [playData, setPlayData] = useState([]) // const [playData, setPlayData] = useState([]) //
const [queryValue, setQueryValue] = useState(['全部']) // const [queryValue, setQueryValue] = useState(['全部']) //
const [leftValue, setLeftValue] = useState(treeData.map(v => v.value)) // const [leftValue, setLeftValue] = useState(treeData.map(v => v.value)) //
const [selectAll, setSelectAll] = useState(true) //
const api = useRef(); const api = useRef();
const chooseAll = useRef(true);
useEffect(() => { useEffect(() => {
console.log(45464);
let query = [] let query = []
treeData?.map(v => [ treeData?.map(v => [
query.push({ label: v.label, value: v.value, key: v.key }) query.push({ label: v.label, value: v.value, key: v.key })
]) ])
setQueryData([{ label: '全部', value: '全部', key: '0', children: query }]) setQueryData([{ label: '全部', value: '全部', key: '00', children: query }])
let playVideo = [] let values = treeData.map(v => v.value)
const playVideoData = (data) => { videoData(treeData, values)
// console.log(data); setLefTtree(treeData)
data.map(v => { setLeftValue(treeData.map(v => v.value))
if (v.videoData) playVideo.push(v) }, [treeData])
if (v.children) playVideoData(v.children)
})
}
playVideoData(treeData)
setPlayData(playVideo)
// console.log(playVideo);
}, [])
useEffect(() => { useEffect(() => {
console.log(queryValue);
if (treeData && queryValue.includes('全部')) { if (treeData && queryValue.includes('全部')) {
console.log(54254);
setLefTtree(treeData) setLefTtree(treeData)
let values = treeData.map(v => v.value)
videoData(treeData, values)
} else { } else {
console.log(3);
let leftData = [] let leftData = []
queryValue.map(item => { queryValue.map(item => {
leftData.push(treeData?.find(({ value }) => item == value)) leftData.push(treeData?.find(({ value }) => item == value))
}) // }) //
console.log(leftData);
setLefTtree(leftData) setLefTtree(leftData)
let playVideo = [] videoData(treeData, queryValue)
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)
} }
}, [queryValue]) //
useEffect(() => {
let playVideo = []
const videoPlay = (data, values) => {
data?.map(v => {
if (values?.find(vv => vv == v.value)) {
if (v.camera) playVideo.push(v)
if (v.children) {
v.children.map(vv => {
if (vv.camera) playVideo.push(vv)
if (vv.children) {
vv.children.map(c => {
if (c.camera) playVideo.push(c)
if (c.children) {
vv.children.map(cc => {
if (c.camera) playVideo.push(cc)
})
}
})
}
})
}
}
if (v.children) {
videoPlay(v.children, leftValue)
}
})
}
videoPlay(leftTree, leftValue)
console.log(playVideo);
setPlayData(playVideo);
}, [queryData, queryValue, leftValue]) for (let v of treeData) { //
if (!leftValue.includes(v.value)) {
setSelectAll(false)
return
} else {
setSelectAll(true)
}
}
}, [leftValue])
useEffect(() => {
}, [])
//
const videoData = (d, v) => {
let playVideo = []
let videos = v.map(item => d.find(vv => vv.value == item))
const playVideoData = (data) => {
data.map(c => {
if (c.videoData) playVideo.push(c)
if (c.children) playVideoData(c.children)
})
}
playVideoData(videos)
setPlayData(playVideo)
}
//
const screen = { width: 193, marginRight: 20, marginBottom: 16, color: "#fff", };
// //
const flipScreens = (data) => { const flipScreens = (data) => {
@ -179,7 +224,7 @@ const VideoScreen = (props) => {
} }
} }
console.log(queryValue);
return ( return (
<> <>
<div <div
@ -192,7 +237,7 @@ const VideoScreen = (props) => {
// minWidth: 1000, // minWidth: 1000,
}}> }}>
{/* 头部标题 */} {/* 头部标题 */}
<div style={{ {showHeader ? <div style={{
width: '100%', height: 80, width: '100%', height: 80,
textAlign: 'center', textAlign: 'center',
}}> }}>
@ -208,24 +253,24 @@ const VideoScreen = (props) => {
letterSpacing: '5px', letterSpacing: '5px',
background: 'url(/assets/images/application/titleBottom.png) 100% 100%', background: 'url(/assets/images/application/titleBottom.png) 100% 100%',
backgroundSize: '100% 100%', backgroundSize: '100% 100%',
}} > 智慧小蓝视频融合监管中心</div> }} >{headerName}</div>
</div> </div> : ""}
<div style={{ <div style={{
height: "calc(100% - 116px)", margin: '16px', display: 'flex', height: `calc(100% - ${showHeader ? 80 : 0}px)`, padding: '8px', display: 'flex',
}}> }}>
<div style={{ width: 300, height: "100%", border: '2px solid #003D9E', position: 'relative' }}> <div style={{ width: 300, height: "100%", border: '2px solid #003D9E', position: 'relative', padding: 5 }}>
<div>查询 <div>查询
<TreeSelect <TreeSelect
style={{ width: 150, }} style={{ width: 230, border: '1px solid rgba(255, 255, 255, 0.488)' }}
dropdownStyle={{ maxHeight: 300, overflow: 'auto', color: '#FFFFFF', }} dropdownStyle={{ maxHeight: 300, overflow: 'auto', color: '#FFFFFF', }}
treeData={queryData} treeData={queryData}
placeholder="请选择" placeholder="请选择"
multiple={true} multiple={true}
defaultValue={['全部']} value={queryValue}
maxTagCount={1} maxTagCount={1}
onChange={(e) => { onChange={(e) => {
console.log(e)
setQueryValue(e) setQueryValue(e)
}} }}
/> />
@ -234,22 +279,30 @@ const VideoScreen = (props) => {
<Tree <Tree
multiple multiple
treeData={leftTree} treeData={leftTree}
defaultExpandAll
value={leftValue} value={leftValue}
blockNode={false} blockNode={false}
onChange={(e) => { onChange={(e) => {
console.log(e); // console.log(e);
setLeftValue(e) setLeftValue(e)
}} }}
onSelect={(e) => { onSelect={(e) => {
console.log(e); // console.log(e);
}} }}
style={{ width: 150, color: '#FFFFFF' }} style={{ width: 150, color: '#FFFFFF' }}
/> />
<Checkbox defaultChecked onChange={checked => console.log(checked)} aria-label="Checkbox 示例" style={{ position: 'absolute', right: 0, bottom: 60 }}>全选</Checkbox> <Checkbox
checked={selectAll}
onChange={checked => {
setSelectAll(!selectAll)
chooseAll.current = !chooseAll.current
}}
ria-label="Checkbox 示例"
style={{ position: 'absolute', right: 10, bottom: 10 }}
>
全选</Checkbox>
</div> </div>
<div style={{ <div style={{
flex: 1, marginLeft: '10px', border: '2px solid #003D9E', flex: 1, marginLeft: '4px', border: '2px solid #003D9E',
}}> }}>
<div style={{ display: 'flex', }}> <div style={{ display: 'flex', }}>
<div style={{ flex: 1, marginTop: '10px', }}> <div style={{ flex: 1, marginTop: '10px', }}>
@ -260,7 +313,19 @@ const VideoScreen = (props) => {
layout="horizontal" layout="horizontal"
style={{ position: "relative", width: "100%", flex: 1 }} style={{ position: "relative", width: "100%", flex: 1 }}
> >
<Form.Input label="设备搜索:" field="keyword" maxLength="36" placeholder="请输入设备名称" labelPosition="left" style={screen} /> <Form.Input label={<span style={{ marginRight: -14, display: 'inline-block' }}>设备搜索:</span>} field="keyword" maxLength="36" placeholder="请输入设备名称" labelPosition="left" style={{ width: 125, color: "#fff", }} />
{filterGroup?.map(v => {
return <Form.Select
label={<span style={{ marginRight: -14, display: 'inline-block' }} title={v.name}>我的...:</span>}
labelPosition="left"
field={"field" + v.num}
style={{ width: 75, color: "#fff", background: "#01185f", boxShadow: " inset 0px 0px 5px 1px rgba(28, 96, 254, 0.4)" }}
placeholder="全部"
showClear
>
{v.filters.map(vv => <Form.Select.Option value={vv.num}>{vv.name}</Form.Select.Option>)}
</Form.Select>
})}
{/* <Form.Select {/* <Form.Select
label="状态查询:" label="状态查询:"
labelPosition="left" labelPosition="left"
@ -289,7 +354,7 @@ const VideoScreen = (props) => {
<Button <Button
theme="solid" theme="solid"
type="primary" type="primary"
style={{ width: 65, height: 30, borderRadius: 3, marginRight: 16, }} style={{ width: 48, height: 30, borderRadius: 3, marginRight: 8, }}
onClick={() => { onClick={() => {
// api.current.validate().then((v) => { // api.current.validate().then((v) => {
// setSearch(v); // setSearch(v);
@ -324,8 +389,8 @@ const VideoScreen = (props) => {
{/* 视频 */} {/* 视频 */}
<div style={{ flex: 1, height: '100%' }}> <div style={{ flex: 1, height: '100%' }}>
<Row style={{ height: `calc( 100% - 160px )` }}> <Row style={{ height: `calc( 100% - 160px )` }}>
{playData?.map((v, index) => { {playData?.map(v => {
return <VideoCard key={'VideoCard' + index} data={v} pageSize={pageSize} /> return <VideoCard key={'VideoCard' + v.key} data={v} pageSize={pageSize} />
})} })}
</Row> </Row>
<div <div
@ -336,10 +401,10 @@ const VideoScreen = (props) => {
}} }}
> >
<span style={{ lineHeight: "30px" }}> <span style={{ lineHeight: "30px" }}>
{10}个设备 {playData.length}个设备
</span> </span>
<Pagination {playData.length > 0 ? <Pagination
total={100} total={playData.length}
// currentPage={1} // currentPage={1}
style={{ color: 'white' }} style={{ color: 'white' }}
@ -347,7 +412,7 @@ const VideoScreen = (props) => {
// setQuery({ limit: pageSize, page: currentPage - 1 }); // setQuery({ limit: pageSize, page: currentPage - 1 });
// page.current = currentPage - 1 // page.current = currentPage - 1
}} }}
/> /> : ""}
</div> </div>
</div> </div>
{/* 视频设置 */} {/* 视频设置 */}

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

@ -1,13 +1,17 @@
.KJBlue { .KJBlue {
.semi-tree-option, .semi-tree-option,
.semi-icon, .semi-icon,
.semi-checkbox-addon, //全选文字 .semi-checkbox-addon, //全选文字
.semi-form-field-label-text { .semi-form-field-label-text,
span {
color: #fff; color: #fff;
} }
.semi-checkbox-inner-display { .semi-checkbox-inner-display {
//树状多选框 //树状多选框
border: 1px solid #fff; border: 1px solid rgba(255, 255, 255, 0.488);
} }
input { input {
background: #01185f; background: #01185f;
@ -16,4 +20,8 @@
input::placeholder { input::placeholder {
color: #fff; color: #fff;
} }
.semi-form-field{
padding-right: 6px;
}
} }

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

@ -15,11 +15,11 @@ const Mirroring = (props) => {
img: '/assets/images/imageImg/textblue.png', img: '/assets/images/imageImg/textblue.png',
color: 'blue' color: 'blue'
}, { }, {
title: '白', title: '静谧白',
img: '/assets/images/imageImg/textwhite.png', img: '/assets/images/imageImg/textwhite.png',
color: 'white' color: 'white'
}, { }, {
title: '黑色(深灰)', title: '神秘黑',
img: '/assets/images/imageImg/textblack.png', img: '/assets/images/imageImg/textblack.png',
color: 'black' color: 'black'
}, },
@ -44,10 +44,8 @@ const Mirroring = (props) => {
function todetail (color) {// function todetail (color) {//
dispatch(push('/mirroring_detail'+'?template='+color)); dispatch(push('/mirroring_detail'+'?template='+color));
} }
function tomirrordetail(mid){ function tomirrordetail(mid,template){
dispatch(openness.getMirrorDetail(mid)).then((res) => { dispatch(push('/mirroring_detail'+'?template='+template+'&mid='+mid));
// dispatch(push('/mirroring_detail'+'?id='+item.id+'&template='+item.template))
})
} }
function todelete (id) {// function todelete (id) {//
dispatch(openness.delMirror(id)).then((res) => { dispatch(openness.delMirror(id)).then((res) => {
@ -207,7 +205,7 @@ const Mirroring = (props) => {
src={item.template == 'blue' ? '/assets/images/imageImg/textblue.png' : item.template == 'black' ? '/assets/images/imageImg/textblack.png' : '/assets/images/imageImg/textwhite.png'} src={item.template == 'blue' ? '/assets/images/imageImg/textblue.png' : item.template == 'black' ? '/assets/images/imageImg/textblack.png' : '/assets/images/imageImg/textwhite.png'}
alt="设置" alt="设置"
style={{ width: 330, height: 153, cursor: 'pointer' }} style={{ width: 330, height: 153, cursor: 'pointer' }}
onClick={() => {tomirrordetail(item.mid)}} onClick={() => {tomirrordetail(item.mid,item.template)}}
/> />
<div style={{ color: '#2F2F2F', fontSize: 16, width: 300, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}> <div style={{ color: '#2F2F2F', fontSize: 16, width: 300, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>
{item.title} {item.title}

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

@ -9,22 +9,87 @@ const MirroringDetail = (props) => {
const { history, dispatch, actions, user, loading, StatusPushList } = props; const { history, dispatch, actions, user, loading, StatusPushList } = props;
const { openness } = actions; const { openness } = actions;
useEffect(() => { useEffect(() => {
let search=props.location.search let search = props.location.search
let result = search.slice(1) let result = search.slice(1)
let searcharr=result.split('&') let searcharr = result.split('&')
if(searcharr.length==1){ if (searcharr.length == 1) {
setTemplate(searcharr[0].split('=')[1])// setTemplate(searcharr[0].split('=')[1])//
} }
else{ else {
setTemplate(searcharr[0].split('=')[1])// setTemplate(searcharr[0].split('=')[1])//
setMirrorId(searcharr[2].split('=')[1])//id dispatch(openness.getMirrorDetail(searcharr[1].split('=')[1])).then((res) => {
let filterGrouplist = res.payload.data.filterGroup
for (let i = 0; i < filterGrouplist.length; i++) {
filterGrouplist[i].num = i
if (filterGrouplist[i].filters.length > 0) {
for (let j = 0; j < filterGrouplist[i].filters.length; j++) {
filterGrouplist[i].filters[j].num = j
}
}
}
setFilterGroup(filterGrouplist);
setMirrorId(res.payload.data.id);//id
setShowHeader(res.payload.data.showHeader);
setHeaderName(res.payload.data.title);
let mytreeData = res.payload.data.tree
for (let i = 0; i < mytreeData.length; i++) {//
mytreeData[i].value = mytreeData[i].key
for (let j = 0; j < mytreeData[i].children.length; j++) {//
mytreeData[i].children[j].value = mytreeData[i].children[j].key
if (mytreeData[i].children[j].camera) {
if (mytreeData[i].children[j].camera.type == 'yingshi') {
mytreeData[i].children[j].camera.content = mytreeData[i].children[j].camera.cameraRemarks.map(v => v.remark),
mytreeData[i].children[j].camera.yingshiToken = mytreeData[i].children[j].camera.secretYingshi.token
}
else {
mytreeData[i].children[j].camera.content = mytreeData[i].children[j].camera.cameraRemarks.map(v => v.remark),
mytreeData[i].children[j].camera.yingshiToken = null
}
}
else {
for (let k = 0; k < mytreeData[i].children[j].children.length; k++) {//
mytreeData[i].children[j].children[k].value = mytreeData[i].children[j].children[k].key
if (mytreeData[i].children[j].children[k].camera) {
if (mytreeData[i].children[j].children[k].camera.type == 'yingshi') {
mytreeData[i].children[j].children[k].camera.content = mytreeData[i].children[j].children[k].camera.cameraRemarks.map(v => v.remark),
mytreeData[i].children[j].children[k].camera.yingshiToken = mytreeData[i].children[j].children[k].camera.secretYingshi.token
}
else {
mytreeData[i].children[j].children[k].camera.content = mytreeData[i].children[j].children[k].camera.cameraRemarks.map(v => v.remark),
mytreeData[i].children[j].children[k].camera.yingshiToken = null
}
}
else {
for (let l = 0; l < mytreeData[i].children[j].children[k].children.length; l++) {
mytreeData[i].children[j].children[k].children[l].value = mytreeData[i].children[j].children[k].children[l].key
if (mytreeData[i].children[j].children[k].children[l].camera) {
if (mytreeData[i].children[j].children[k].children[l].camera.type == 'yingshi') {
mytreeData[i].children[j].children[k].children[l].camera.content = mytreeData[i].children[j].children[k].children[l].camera.cameraRemarks.map(v => v.remark),
mytreeData[i].children[j].children[k].children[l].camera.yingshiToken = mytreeData[i].children[j].children[k].children[l].camera.secretYingshi.token
}
else {
mytreeData[i].children[j].children[k].children[l].camera.content = mytreeData[i].children[j].children[k].children[l].camera.cameraRemarks.map(v => v.remark),
mytreeData[i].children[j].children[k].children[l].camera.yingshiToken = null
}
}
}
}
}
}
}
}
setTreeData(mytreeData);
})
} }
equipmentGetCamera(); equipmentGetCamera();
}, []); }, []);
const [showHeader,setShowHeader] = useState(false)// const [hasModify, sethasModify] = useState(false)//
const [mirrorId,setMirrorId] = useState(null)//id const [showHeader, setShowHeader] = useState(false)//
const [mirrorId, setMirrorId] = useState(null)//id
const [template,setTemplate] = useState('')// const [backVisible, setBackVisible] = useState(false)//
const [template, setTemplate] = useState('')//
const [chooseNum, setChooseNum] = useState(0);//tab const [chooseNum, setChooseNum] = useState(0);//tab
const [chooseList, setChooseList] = useState(['节点', '样式', '功能']); const [chooseList, setChooseList] = useState(['节点', '样式', '功能']);
const [editKey, setEditKey] = useState('') const [editKey, setEditKey] = useState('')
@ -117,18 +182,18 @@ const MirroringDetail = (props) => {
setIndeterminate(!!checkedList.length && checkedList.length < showCameraList.length); setIndeterminate(!!checkedList.length && checkedList.length < showCameraList.length);
setCheckall(checkedList.length === showCameraList.length); setCheckall(checkedList.length === showCameraList.length);
} }
function topublish(publish){// function topublish (publish) {//
let mirrordata={ let mirrordata = {
mirrorId:mirrorId, mirrorId: mirrorId,
template:template, template: template,
title:headerName, title: headerName,
showHeader:showHeader, showHeader: showHeader,
publish:publish, publish: publish,
tree:treeData, tree: treeData,
filterGroup:filterGroup filterGroup: filterGroup
} }
dispatch(openness.putMirror(mirrordata)).then((res) => { dispatch(openness.putMirror(mirrordata)).then((res) => {
console.log('res',res); history.goBack()
}) })
} }
function nodeDelete (item) {// function nodeDelete (item) {//
@ -183,6 +248,7 @@ const MirroringDetail = (props) => {
} }
} }
} }
sethasModify(true)
setAddCamera(false) setAddCamera(false)
setTreeData(mainData) setTreeData(mainData)
} }
@ -240,6 +306,7 @@ const MirroringDetail = (props) => {
} }
} }
} }
sethasModify(true)
setTreeData(mainData) setTreeData(mainData)
} }
function changeLable (value, item) {// function changeLable (value, item) {//
@ -270,6 +337,7 @@ const MirroringDetail = (props) => {
} }
} }
} }
sethasModify(true)
setTreeData(mainData) setTreeData(mainData)
} }
function lableBlur () { function lableBlur () {
@ -277,29 +345,33 @@ const MirroringDetail = (props) => {
} }
function cameraAdd (item) {// function cameraAdd (item) {//
let myplainOptions = JSON.parse(JSON.stringify(plainOptions)) let myplainOptions = JSON.parse(JSON.stringify(plainOptions))
for (let i = 0; i < myplainOptions.length; i++) {// for (let j = 0; j < treeData.length; j++) {//
for (let j = 0; j < treeData.length; j++) {// if (treeData[j].children) {//
if (treeData[j].children) {// for (let k = 0; k < treeData[j].children.length; k++) {//
for (let k = 0; k < treeData[j].children.length; k++) {// if (treeData[j].children[k].children) {//
if (treeData[j].children[k].children) {// for (let l = 0; l < treeData[j].children[k].children.length; l++) {//
for (let l = 0; l < treeData[j].children[k].children.length; l++) {// if (treeData[j].children[k].children[l].children) {//
if (treeData[j].children[k].children[l].children) {// for (let p = 0; p < treeData[j].children[k].children[l].children.length; p++) {
for (let p = 0; p < treeData[j].children[k].children[l].children.length; p++) { if (treeData[j].children[k].children[l].children[p].cameraId) {
if (treeData[j].children[k].children[l].children[p].cameraId) { for (let i = 0; i < myplainOptions.length; i++) {
if (myplainOptions[i].value == treeData[j].children[k].children[l].children[p].cameraId) { if (myplainOptions[i].value == treeData[j].children[k].children[l].children[p].cameraId) {
myplainOptions.splice(i, 1) myplainOptions.splice(i, 1)
} }
} }
} }
} }
else if (treeData[j].children[k].children[l].cameraId) {// }
else if (treeData[j].children[k].children[l].cameraId) {//
for (let i = 0; i < myplainOptions.length; i++) {
if (myplainOptions[i].value == treeData[j].children[k].children[l].cameraId) { if (myplainOptions[i].value == treeData[j].children[k].children[l].cameraId) {
myplainOptions.splice(i, 1) myplainOptions.splice(i, 1)
} }
} }
} }
} }
else if (treeData[j].children[k].cameraId) {// }
else if (treeData[j].children[k].cameraId) {//
for (let i = 0; i < myplainOptions.length; i++) {
if (myplainOptions[i].value == treeData[j].children[k].cameraId) { if (myplainOptions[i].value == treeData[j].children[k].cameraId) {
myplainOptions.splice(i, 1) myplainOptions.splice(i, 1)
} }
@ -396,7 +468,7 @@ const MirroringDetail = (props) => {
</div> </div>
</Popconfirm> </Popconfirm>
{ {
(item.children && item.children.length > 0 && item.children[0].cameraId) || keyArr.length > 2||item.cameraId ? ('') : ( (item.children && item.children.length > 0 && item.children[0].cameraId) || keyArr.length > 2 || item.cameraId ? ('') : (
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => nodeAdd(item)}> <div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => nodeAdd(item)}>
<img <img
src="/assets/images/imageImg/nodeadd.png" src="/assets/images/imageImg/nodeadd.png"
@ -411,7 +483,12 @@ const MirroringDetail = (props) => {
) )
}; };
function toback () {// function toback () {//
history.goBack() if (hasModify) {
setBackVisible(true)
}
else {
history.goBack()
}
} }
function tochange (index) {// function tochange (index) {//
setChooseNum(index); setChooseNum(index);
@ -438,6 +515,7 @@ const MirroringDetail = (props) => {
key: '0', key: '0',
}) })
} }
sethasModify(true)
setTreeData(mainData) setTreeData(mainData)
} }
function searchCamera () {// function searchCamera () {//
@ -611,7 +689,7 @@ const MirroringDetail = (props) => {
} }
} }
} }
console.log('mainDatamainDatamainData',mainData); sethasModify(true)
setTreeData(mainData); setTreeData(mainData);
setAddCamera(false); setAddCamera(false);
setMykeyword('') setMykeyword('')
@ -642,22 +720,26 @@ const MirroringDetail = (props) => {
filters: [] filters: []
}) })
} }
sethasModify(true)
setFilterGroup(filterGroupList) setFilterGroup(filterGroupList)
} }
function switchOnChange (val, index) {// function switchOnChange (val, index) {//
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
filterGroupList[index].forbidden = val filterGroupList[index].forbidden = val
setFilterGroup(filterGroupList) setFilterGroup(filterGroupList)
sethasModify(true)
} }
function screenDel (index) {// function screenDel (index) {//
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
filterGroupList.splice(index, 1) filterGroupList.splice(index, 1)
setFilterGroup(filterGroupList) setFilterGroup(filterGroupList)
sethasModify(true)
} }
function toEditscreen (val, index) {// function toEditscreen (val, index) {//
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
filterGroupList[index].name = val filterGroupList[index].name = val
setFilterGroup(filterGroupList) setFilterGroup(filterGroupList)
sethasModify(true)
} }
function toAddLabel () {// function toAddLabel () {//
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
@ -675,29 +757,33 @@ const MirroringDetail = (props) => {
cameraIds: [] cameraIds: []
}) })
} }
sethasModify(true)
setFilterGroup(filterGroupList) setFilterGroup(filterGroupList)
} }
function labelDel (index) {// function labelDel (index) {//
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
filterGroupList[addLabelNum].filters.splice(index, 1) filterGroupList[addLabelNum].filters.splice(index, 1)
setFilterGroup(filterGroupList) setFilterGroup(filterGroupList)
sethasModify(true)
} }
function addFiltersCamera (val, index) { function addFiltersCamera (val, index) {//
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
filterGroupList[addLabelNum].filters[index].cameraIds = val filterGroupList[addLabelNum].filters[index].cameraIds = val
setFilterGroup(filterGroupList) setFilterGroup(filterGroupList)
sethasModify(true)
} }
function toEditLabel (val, index) { function toEditLabel (val, index) {//
let filterGroupList = JSON.parse(JSON.stringify(filterGroup)) let filterGroupList = JSON.parse(JSON.stringify(filterGroup))
filterGroupList[addLabelNum].filters[index].name = val filterGroupList[addLabelNum].filters[index].name = val
setFilterGroup(filterGroupList) setFilterGroup(filterGroupList)
sethasModify(true)
} }
return ( return (
<div style={{ background: 'rgb(246, 250, 255)', height: '100%', width: '100%' }}> <div style={{ background: 'rgb(246, 250, 255)', height: '100%', width: '100%' }}>
<div style={{ <div style={{
height: 64, background: "url(/assets/images/imageImg/banner.png)", backgroundSize: "100% 100%", display: 'flex', alignItems: 'center', justifyContent: 'space-between' height: 64, background: "url(/assets/images/imageImg/banner.png)", backgroundSize: "100% 100%", display: 'flex', alignItems: 'center', justifyContent: 'space-between'
}}> }}>
<div style={{ display: 'flex',alignItems: 'center' }}> <div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ width: 20, height: 20, marginLeft: 19, cursor: 'pointer' }} onClick={toback}> <div style={{ width: 20, height: 20, marginLeft: 19, cursor: 'pointer' }} onClick={toback}>
<img <img
src="/assets/images/imageImg/toback.png" src="/assets/images/imageImg/toback.png"
@ -708,7 +794,7 @@ const MirroringDetail = (props) => {
{ {
editHeaderName ? ( editHeaderName ? (
<div style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 20 }}> <div style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 20 }}>
<Input value={headerName} onBlur={() => { setEditHeaderName(false) }} onChange={(value) => setHeaderName(value)} style={{ width: 200,color: 'rgba(255,255,255,0.9)',background: 'rgba(0,0,0,0.2)' }} maxLength={20} className='inputpadding'></Input> <Input value={headerName} onBlur={() => { setEditHeaderName(false) }} onChange={(value) => setHeaderName(value)} style={{ width: 200, color: 'rgba(255,255,255,0.9)', background: 'rgba(0,0,0,0.2)' }} maxLength={20} className='inputpadding'></Input>
</div> </div>
) : ( ) : (
<div style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 20 }}> <div style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 20 }}>
@ -716,7 +802,7 @@ const MirroringDetail = (props) => {
</div> </div>
) )
} }
<div style={{ width: 12, height: 12, marginLeft: 8, marginTop: 1, cursor: 'pointer',display:'flex' }} onClick={changeHeaderName}> <div style={{ width: 12, height: 12, marginLeft: 8, marginTop: 1, cursor: 'pointer', display: 'flex' }} onClick={changeHeaderName}>
<img <img
src="/assets/images/imageImg/nameChange.png" src="/assets/images/imageImg/nameChange.png"
alt="设置" alt="设置"
@ -725,21 +811,21 @@ const MirroringDetail = (props) => {
</div> </div>
</div> </div>
<div style={{ display: 'flex', }}> <div style={{ display: 'flex', }}>
<div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }} onClick={()=>{setVideoPlay(!videoPlay)}}> <div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }} onClick={() => { setVideoPlay(!videoPlay) }}>
<img <img
src="/assets/images/imageImg/generate.png" src="/assets/images/imageImg/generate.png"
alt="设置" alt="设置"
style={{ width: '100%' }} style={{ width: '100%' }}
/> />
</div> </div>
<div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }} onClick={()=>{topublish(false)}}> <div style={{ width: 22, height: 22, marginRight: 30, cursor: hasModify ? 'pointer' : 'not-allowed' }} onClick={() => { hasModify ? topublish(false) : '' }}>
<img <img
src="/assets/images/imageImg/save.png" src="/assets/images/imageImg/save.png"
alt="设置" alt="设置"
style={{ width: '100%' }} style={{ width: '100%' }}
/> />
</div> </div>
<div style={{ width: 22, height: 22, marginRight: 44, cursor: 'pointer' }} onClick={()=>{topublish(true)}}> <div style={{ width: 22, height: 22, marginRight: 44, cursor: 'pointer' }} onClick={() => { topublish(true) }}>
<img <img
src="/assets/images/imageImg/upload.png" src="/assets/images/imageImg/upload.png"
alt="设置" alt="设置"
@ -848,7 +934,7 @@ const MirroringDetail = (props) => {
<div style={{ display: chooseNum == "1" ? "block" : "none", fontSize: 12 }} className="hasHeader"> <div style={{ display: chooseNum == "1" ? "block" : "none", fontSize: 12 }} className="hasHeader">
<div style={{ height: 41, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgba(226,226,226,0.2)' }}> <div style={{ height: 41, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgba(226,226,226,0.2)' }}>
<div style={{ marginLeft: 20 }}>header</div> <div style={{ marginLeft: 20 }}>header</div>
<div style={{ marginRight: 13 }}><Switch onChange={(v, e) => setShowHeader(v)} size="small" aria-label="是否有头部"></Switch></div> <div style={{ marginRight: 13 }}><Switch checked={showHeader} onChange={(v, e) => setShowHeader(v)} size="small" aria-label="是否有头部"></Switch></div>
</div> </div>
<div style={{ height: 41, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgba(226,226,226,0.2)', cursor: 'pointer' }} onClick={() => { setComingVisible(true) }}> <div style={{ height: 41, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgba(226,226,226,0.2)', cursor: 'pointer' }} onClick={() => { setComingVisible(true) }}>
<div style={{ marginLeft: 20 }}>自定义样式</div> <div style={{ marginLeft: 20 }}>自定义样式</div>
@ -1023,7 +1109,7 @@ const MirroringDetail = (props) => {
} }
</div> </div>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<VideoScreen treeData={treeData} headerName={headerName} showHeader={showHeader} filterGroup={filterGroup} template={template} videoPlay={videoPlay}/> <VideoScreen treeData={treeData} headerName={headerName} showHeader={showHeader} filterGroup={filterGroup} template={template} videoPlay={videoPlay} />
</div> </div>
</div> </div>
<Modal <Modal
@ -1042,6 +1128,23 @@ const MirroringDetail = (props) => {
> >
开发中敬请期待~ 开发中敬请期待~
</Modal> </Modal>
<Modal
title="提醒"
visible={backVisible}
onOk={() => {
topublish(false)
setBackVisible(false)
}}
width={610}
onCancel={() => {
setBackVisible(false)
}}
okText="确定"
cancelText="取消"
closeOnEsc={true}
>
是否保存修改~
</Modal>
</div> </div>
) )
} }

Loading…
Cancel
Save