29 changed files with 1462 additions and 687 deletions
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 226 KiB |
|
After Width: | Height: | Size: 384 B |
|
After Width: | Height: | Size: 316 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 536 B |
|
After Width: | Height: | Size: 528 B |
|
After Width: | Height: | Size: 628 B |
|
After Width: | Height: | Size: 177 B |
|
After Width: | Height: | Size: 426 B |
|
After Width: | Height: | Size: 284 B |
|
After Width: | Height: | Size: 718 B |
|
After Width: | Height: | Size: 788 B |
|
After Width: | Height: | Size: 1.4 KiB |
@ -1,5 +1,7 @@ |
|||
'use strict'; |
|||
|
|||
export default { |
|||
import * as mirroring from './mirroring' |
|||
|
|||
export default { |
|||
...mirroring |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
"use strict"; |
|||
|
|||
import { ApiTable,basicAction } from "$utils"; |
|||
|
|||
export function getCamera(query) { |
|||
return (dispatch) => |
|||
basicAction({ |
|||
type: "get", |
|||
dispatch: dispatch, |
|||
actionType: "GET_CAMREA", |
|||
query: query, |
|||
url: `${ApiTable.getCamera}`, |
|||
msg: { option: "获取摄像头列表信息" }, |
|||
reducer: { name: "equipmentWarehouseCamera", params: { noClear: true } }, |
|||
}); |
|||
} |
|||
@ -1,6 +1,7 @@ |
|||
.KJBlue { |
|||
.semi-tree-option, |
|||
.semi-icon, |
|||
.semi-checkbox-addon, //全选文字 |
|||
.semi-form-field-label-text { |
|||
color: #fff; |
|||
} |
|||
@ -1,5 +1,6 @@ |
|||
'use strict'; |
|||
|
|||
import Mirroring from './mirroring'; |
|||
import MirroringDetail from './mirroringDetail'; |
|||
|
|||
export { Mirroring}; |
|||
export { Mirroring,MirroringDetail}; |
|||
@ -0,0 +1,672 @@ |
|||
import React, { useEffect, useState, useRef } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import '../style.less' |
|||
import { Tree, Popconfirm, Typography, Input, Switch, Modal, Checkbox, CheckboxGroup } from "@douyinfe/semi-ui" |
|||
import VideoScreen from '../components/videoScreen'; |
|||
|
|||
|
|||
const MirroringDetail = (props) => { |
|||
const { history, dispatch, actions, user, loading, StatusPushList } = props; |
|||
const { openness } = actions; |
|||
useEffect(() => { |
|||
|
|||
}, []); |
|||
// const = useRef(0) |
|||
|
|||
const [chooseNum, setChooseNum] = useState(0);//当前选择tab |
|||
const [chooseList, setChooseList] = useState(['节点', '样式', '功能']); |
|||
const [editKey, setEditKey] = useState('') |
|||
const [comingVisible, setComingVisible] = useState(false) |
|||
const [treeData, setTreeData] = useState([//树形控件数据 |
|||
{ |
|||
label: '主要节点1', |
|||
value: '0', |
|||
key: '0', |
|||
}, |
|||
]); |
|||
const [indeterminate, setIndeterminate] = useState(false);//全选 |
|||
const [checkAll, setCheckall] = useState(false);//全选是否 |
|||
const [plainOptions, setPlainOptions] = useState([]);//摄像头选择 |
|||
const [checkedList, setCheckedList] = useState([]);//选中的摄像头列表 |
|||
const [mykeyword, setMykeyword] = useState('');//摄像头搜索 |
|||
const [showCameraList, setShowCameraList] = useState([])//展示的摄像头列表 |
|||
const [addCamera, setAddCamera] = useState(false);//添加视频弹框 |
|||
const [addCameraKey, setAddCameraKey] = useState('');//添加视频弹框 |
|||
|
|||
function onCheckAllChange (e) {//全选 |
|||
if (e.target.checked) { |
|||
let mycheckList = [] |
|||
for (let i = 0; i < showCameraList.length; i++) { |
|||
mycheckList.push(showCameraList[i].value) |
|||
} |
|||
setCheckedList(mycheckList) |
|||
} |
|||
else { |
|||
setCheckedList([]) |
|||
} |
|||
setIndeterminate(false); |
|||
setCheckall(e.target.checked); |
|||
} |
|||
function equipmentGetCamera () {//查询摄像头 |
|||
dispatch(openness.getCamera()).then((res) => { |
|||
let resList = res.payload.data.data |
|||
let optionsList = [] |
|||
for (let i = 0; i < resList.length; i++) { |
|||
optionsList.push({ |
|||
label: resList[i].name, |
|||
value: resList[i].id, |
|||
extra: 'DID:' + resList[i].gbCamera.did || '', |
|||
}) |
|||
} |
|||
setShowCameraList(optionsList) |
|||
setPlainOptions(optionsList) |
|||
}); |
|||
} |
|||
function onChange (checkedList) {//摄像头选择 |
|||
setCheckedList(checkedList); |
|||
setIndeterminate(!!checkedList.length && checkedList.length < showCameraList.length); |
|||
setCheckall(checkedList.length === showCameraList.length); |
|||
} |
|||
useEffect(() => { |
|||
equipmentGetCamera(); |
|||
}, []); |
|||
function nodeDelete (item) {//删除树状子节点 |
|||
let mainData = JSON.parse(JSON.stringify(treeData)) |
|||
let nodeKeyArr = item.key.split('-') |
|||
if (nodeKeyArr.length == 1) { |
|||
mainData.splice( |
|||
mainData.indexOf(mainData.find(function (element) { |
|||
return element.key === item.key |
|||
})), 1) |
|||
} else if (nodeKeyArr.length == 2) { |
|||
for (let index = 0; index < mainData.length; index++) { |
|||
mainData[index].children.splice( |
|||
mainData[index].children.indexOf(mainData[index].children.find(function (element) { |
|||
return element.key === item.key |
|||
})), 1) |
|||
} |
|||
} else if (nodeKeyArr.length == 3) { |
|||
for (let j = 0; j < mainData.length; j++) { |
|||
for (let i = 0; i < mainData[j].children.length; i++) { |
|||
mainData[j].children[i].children.splice( |
|||
mainData[j].children[i].children.indexOf(mainData[j].children[i].children.find(function (element) { |
|||
return element.key === item.key |
|||
})), 1) |
|||
} |
|||
} |
|||
} else if (nodeKeyArr.length == 4) { |
|||
for (let k = 0; k < mainData.length; k++) { |
|||
for (let j = 0; j < mainData[k].children.length; j++) { |
|||
for (let i = 0; i < mainData[k].children[j].children.length; i++) { |
|||
mainData[k].children[j].children[i].children.splice( |
|||
mainData[k].children[j].children[i].children.indexOf(mainData[k].children[j].children[i].children.find(function (element) { |
|||
return element.key === item.key |
|||
})), 1) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
setTreeData(mainData) |
|||
} |
|||
function nodeAdd (item) {//添加树状子节点 |
|||
let mainData = JSON.parse(JSON.stringify(treeData)) |
|||
let nodeKeyArr = item.key.split('-') |
|||
if (nodeKeyArr.length == 1) { |
|||
for (let index = 0; index < mainData.length; index++) { |
|||
if (mainData[index].key == item.key) { |
|||
if (mainData[index].children && mainData[index].children.length > 0) { |
|||
let mainKey = mainData[index].children[mainData[index].children.length - 1].key |
|||
let thekeyarr = mainKey.split('-') |
|||
mainData[index].children.push({ |
|||
label: '二级节点' + (Number(thekeyarr[1]) + 2), |
|||
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1), |
|||
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1), |
|||
}) |
|||
} |
|||
else { |
|||
let mainKey = mainData[index].key |
|||
let thekeyarr = mainKey.split('-') |
|||
mainData[index].children = [{ |
|||
label: '二级节点1', |
|||
value: (Number(thekeyarr[0])) + '-0', |
|||
key: (Number(thekeyarr[0])) + '-0', |
|||
}] |
|||
} |
|||
} |
|||
} |
|||
} else if (nodeKeyArr.length == 2) { |
|||
for (let index = 0; index < mainData.length; index++) { |
|||
if (mainData[index].children) { |
|||
for (let j = 0; j < mainData[index].children.length; j++) { |
|||
if (mainData[index].children[j].key == item.key) { |
|||
if (mainData[index].children[j].children && mainData[index].children[j].children.length > 0) { |
|||
let mainKey = mainData[index].children[j].children[mainData[index].children[j].children.length - 1].key |
|||
let thekeyarr = mainKey.split('-') |
|||
mainData[index].children[j].children.push({ |
|||
label: '三级节点' + (Number(thekeyarr[2]) + 2), |
|||
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1), |
|||
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1), |
|||
}) |
|||
} |
|||
else { |
|||
let mainKey = mainData[index].children[j].key |
|||
let thekeyarr = mainKey.split('-') |
|||
mainData[index].children[j].children = [{ |
|||
label: '三级节点1', |
|||
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0', |
|||
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0', |
|||
}] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
setTreeData(mainData) |
|||
} |
|||
function changeLable (value, item) {//编辑摄像头名称 |
|||
let mainData = JSON.parse(JSON.stringify(treeData)) |
|||
let nodeKeyArr = item.key.split('-') |
|||
if (nodeKeyArr.length == 1) { |
|||
for (let index = 0; index < mainData.length; index++) { |
|||
if (mainData[index].key == item.key) { |
|||
mainData[index].label = value |
|||
} |
|||
} |
|||
} else if (nodeKeyArr.length == 2) { |
|||
for (let index = 0; index < mainData.length; index++) { |
|||
for (let j = 0; j < mainData[index].children.length; j++) { |
|||
if (mainData[index].children[j].key == item.key) { |
|||
mainData[index].children[j].label = value |
|||
} |
|||
} |
|||
} |
|||
} else if (nodeKeyArr.length == 3) { |
|||
for (let index = 0; index < mainData.length; index++) { |
|||
for (let j = 0; j < mainData[index].children.length; j++) { |
|||
for (let k = 0; k < mainData[index].children[j].children.length; k++) { |
|||
if (mainData[index].children[j].children[k].key == item.key) { |
|||
mainData[index].children[j].children[k].label = value |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
setTreeData(mainData) |
|||
} |
|||
function lableBlur () { |
|||
setEditKey('') |
|||
} |
|||
function cameraAdd (item) {//添加摄像头 |
|||
let myplainOptions = JSON.parse(JSON.stringify(plainOptions)) |
|||
for (let i = 0; i < myplainOptions.length; i++) {//摄像头列表 |
|||
for (let j = 0; j < treeData.length; j++) {//第一级 |
|||
if (treeData[j].children) {//有没有子集 |
|||
for (let k = 0; k < treeData[j].children.length; k++) {//第二级 |
|||
if (treeData[j].children[k].children) {//有没有子集 |
|||
for (let l = 0; l < treeData[j].children[k].children.length; l++) {//第三级 |
|||
if (treeData[j].children[k].children[l].children) {//有没有子集 |
|||
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 (myplainOptions[i].value == treeData[j].children[k].children[l].children[p].cameraId) { |
|||
myplainOptions.splice(i, 1) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
else if (treeData[j].children[k].children[l].cameraId) {//有没有摄像头 |
|||
if (myplainOptions[i].value == treeData[j].children[k].children[l].cameraId) { |
|||
myplainOptions.splice(i, 1) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
else if (treeData[j].children[k].cameraId) {//有没有摄像头 |
|||
if (myplainOptions[i].value == treeData[j].children[k].cameraId) { |
|||
myplainOptions.splice(i, 1) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
console.log('myplainOptionsmyplainOptions', myplainOptions); |
|||
setCheckedList([]) |
|||
setShowCameraList(myplainOptions) |
|||
setAddCamera(true) |
|||
setAddCameraKey(item.key) |
|||
} |
|||
const renderLabel = (label, item) => {//树状展示 |
|||
let keyArr = item.key.split('-') |
|||
return ( |
|||
<div style={{ display: 'flex', justifyContent: 'space-between' }}> |
|||
{ |
|||
keyArr.length == 1 ? ( |
|||
<div style={{ display: 'flex' }}> |
|||
<div style={{ width: 13, height: 10 }}> |
|||
<img |
|||
src="/assets/images/imageImg/folder.png" |
|||
alt="设置" |
|||
style={{ width: '100%' }} |
|||
/> |
|||
</div> |
|||
<div style={{ marginLeft: 8, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}> |
|||
{ |
|||
editKey == item.key ? ( |
|||
<Input value={label} onBlur={lableBlur} onChange={(value) => changeLable(value, item)} style={{ width: 65 }} className='inputpadding' size='small'></Input> |
|||
) : |
|||
( |
|||
<Typography.Text |
|||
ellipsis={{ showTooltip: true }} |
|||
> |
|||
{label} |
|||
</Typography.Text>) |
|||
} |
|||
</div> |
|||
</div> |
|||
) : ( |
|||
<div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}> |
|||
{ |
|||
editKey == item.key ? ( |
|||
<Input value={label} onBlur={lableBlur} onChange={(value) => changeLable(value, item)} style={{ width: 65 }} className='inputpadding' size='small'></Input> |
|||
) : |
|||
( |
|||
<Typography.Text |
|||
ellipsis={{ showTooltip: true }} |
|||
> |
|||
{label} |
|||
</Typography.Text>) |
|||
} |
|||
</div> |
|||
) |
|||
} |
|||
<div style={{ display: 'flex', paddingRight: 13 }}> |
|||
{ |
|||
(!item.children || item.children.length < 1 || item.children[0].cameraId) && !item.cameraId ? ( |
|||
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => cameraAdd(item)}> |
|||
<img |
|||
src="/assets/images/imageImg/nodeCamera.png" |
|||
alt="添加摄像头" |
|||
style={{ width: '100%' }} |
|||
/> |
|||
</div> |
|||
) : ('') |
|||
} |
|||
{ |
|||
item.cameraId ? ('') : ( |
|||
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => { setEditKey(item.key) }}> |
|||
<img |
|||
src="/assets/images/imageImg/nodeEdit.png" |
|||
alt="编辑" |
|||
style={{ width: '100%' }} |
|||
/> |
|||
</div> |
|||
) |
|||
} |
|||
<Popconfirm |
|||
title="删除节点也会删除节点下的从属节点和视频，是否继续？" |
|||
arrowPointAtCenter={false} |
|||
showArrow={true} |
|||
position="topRight" |
|||
onConfirm={() => nodeDelete(item)}> |
|||
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }}> |
|||
<img |
|||
src="/assets/images/imageImg/nodeDel.png" |
|||
alt="删除" |
|||
style={{ width: '100%' }} |
|||
/> |
|||
</div> |
|||
</Popconfirm> |
|||
{ |
|||
keyArr.length > 2||(item.children&&item.children[0].cameraId) ? ('') : ( |
|||
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => nodeAdd(item)}> |
|||
<img |
|||
src="/assets/images/imageImg/nodeadd.png" |
|||
alt="添加子节点" |
|||
style={{ width: '100%' }} |
|||
/> |
|||
</div> |
|||
) |
|||
} |
|||
</div> |
|||
</div> |
|||
) |
|||
}; |
|||
function toback () {//返回上一个页面 |
|||
history.goBack() |
|||
} |
|||
function tochange (index) {//节点样式功能切换 |
|||
setChooseNum(index) |
|||
} |
|||
function addMainNode () {//增加主要节点 |
|||
let mainData = JSON.parse(JSON.stringify(treeData)) |
|||
if (mainData.length > 0) { |
|||
let mainKey = mainData[mainData.length - 1].key |
|||
mainKey = Number(mainKey) + 2 |
|||
mainData.push({ |
|||
label: '主要节点' + mainKey, |
|||
value: String(mainKey - 1), |
|||
key: String(mainKey - 1), |
|||
}) |
|||
} |
|||
else { |
|||
mainData.push({ |
|||
label: '主要节点1', |
|||
value: '0', |
|||
key: '0', |
|||
}) |
|||
} |
|||
setTreeData(mainData) |
|||
} |
|||
function searchCamera () {//查询摄像头 |
|||
if (mykeyword !== '') { |
|||
console.log('111111111', mykeyword); |
|||
} |
|||
else { |
|||
console.log('22222222222', mykeyword); |
|||
// setShowCameraList(plainOptions) |
|||
} |
|||
} |
|||
function finishAdd () {//完成添加摄像头 |
|||
console.log('checkedList', checkedList); |
|||
let mainData = JSON.parse(JSON.stringify(treeData)) |
|||
let nodeKeyArr = addCameraKey.split('-') |
|||
if (nodeKeyArr.length == 1) { |
|||
for (let q = 0; q < plainOptions.length; q++) { |
|||
for (let w = 0; w < checkedList.length; w++) { |
|||
if (plainOptions[q].value == checkedList[w]) { |
|||
for (let index = 0; index < mainData.length; index++) { |
|||
if (mainData[index].key == addCameraKey) { |
|||
if (mainData[index].children && mainData[index].children.length > 0) { |
|||
let mainKey = mainData[index].children[mainData[index].children.length - 1].key |
|||
let thekeyarr = mainKey.split('-') |
|||
mainData[index].children.push({ |
|||
label: plainOptions[q].label, |
|||
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1), |
|||
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1), |
|||
cameraId: plainOptions[q].value |
|||
}) |
|||
} |
|||
else { |
|||
let mainKey = mainData[index].key |
|||
let thekeyarr = mainKey.split('-') |
|||
mainData[index].children = [{ |
|||
label: plainOptions[q].label, |
|||
value: (Number(thekeyarr[0])) + '-0', |
|||
key: (Number(thekeyarr[0])) + '-0', |
|||
cameraId: plainOptions[q].value |
|||
}] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} else if (nodeKeyArr.length == 2) { |
|||
for (let q = 0; q < plainOptions.length; q++) { |
|||
for (let w = 0; w < checkedList.length; w++) { |
|||
if (plainOptions[q].value == checkedList[w]) { |
|||
for (let index = 0; index < mainData.length; index++) {//第一级 |
|||
if (mainData[index].children) {//有没有子集 |
|||
for (let j = 0; j < mainData[index].children.length; j++) {//第二级 |
|||
if (mainData[index].children[j].key == addCameraKey) { |
|||
if (mainData[index].children[j].children && mainData[index].children[j].children.length > 0) { |
|||
let mainKey = mainData[index].children[j].children[mainData[index].children[j].children.length - 1].key |
|||
let thekeyarr = mainKey.split('-') |
|||
mainData[index].children[j].children.push({ |
|||
label: plainOptions[q].label, |
|||
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1), |
|||
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1), |
|||
cameraId: plainOptions[q].value |
|||
}) |
|||
} |
|||
else { |
|||
let mainKey = mainData[index].key |
|||
let thekeyarr = mainKey.split('-') |
|||
mainData[index].children[j].children = [{ |
|||
label: plainOptions[q].label, |
|||
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0', |
|||
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0', |
|||
cameraId: plainOptions[q].value |
|||
}] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} else if (nodeKeyArr.length == 3) { |
|||
for (let q = 0; q < plainOptions.length; q++) { |
|||
for (let w = 0; w < checkedList.length; w++) { |
|||
if (plainOptions[q].value == checkedList[w]) { |
|||
for (let index = 0; index < mainData.length; index++) {//第一级 |
|||
if (mainData[index].children) {//有没有子集 |
|||
for (let j = 0; j < mainData[index].children.length; j++) {//第二级 |
|||
if (mainData[index].children[j].children) {//有没有子集 |
|||
for (let k = 0; k < mainData[index].children[j].children.length; k++) {//第三级 |
|||
if (mainData[index].children[j].children[k].key == addCameraKey) { |
|||
if (mainData[index].children[j].children[k].children && mainData[index].children[j].children[k].children.length > 0) { |
|||
let mainKey = mainData[index].children[j].children[k].children[mainData[index].children[j].children[k].children.length - 1].key |
|||
let thekeyarr = mainKey.split('-') |
|||
mainData[index].children[j].children[k].children.push({ |
|||
label: plainOptions[q].label, |
|||
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2])) + '-' + (Number(thekeyarr[3]) + 1), |
|||
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2])) + '-' + (Number(thekeyarr[3]) + 1), |
|||
cameraId: plainOptions[q].value |
|||
}) |
|||
} |
|||
else { |
|||
let mainKey = mainData[index].key |
|||
let thekeyarr = mainKey.split('-') |
|||
mainData[index].children[j].children[k].children = [{ |
|||
label: plainOptions[q].label, |
|||
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2])) + '-0', |
|||
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2])) + '-0', |
|||
cameraId: plainOptions[q].value |
|||
}] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
setTreeData(mainData); |
|||
setAddCamera(false); |
|||
setAddCameraKey(''); |
|||
} |
|||
return ( |
|||
<div style={{ background: 'rgb(246, 250, 255)', height: '100%', width: '100%' }}> |
|||
<div style={{ |
|||
height: 64, background: "url(/assets/images/imageImg/banner.png)", backgroundSize: "100% 100%", display: 'flex', alignItems: 'center', justifyContent: 'space-between' |
|||
}}> |
|||
<div style={{ display: 'flex', }}> |
|||
<div style={{ width: 20, height: 20, marginLeft: 19, cursor: 'pointer' }} onClick={toback}> |
|||
<img |
|||
src="/assets/images/imageImg/toback.png" |
|||
alt="设置" |
|||
style={{ width: '100%' }} |
|||
/> |
|||
</div> |
|||
<div style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 20 }}> |
|||
智慧小蓝智慧排涝视频融合系统 |
|||
</div> |
|||
<div style={{ width: 12, height: 12, marginLeft: 8, marginTop: 1, cursor: 'pointer' }}> |
|||
<img |
|||
src="/assets/images/imageImg/nameChange.png" |
|||
alt="设置" |
|||
style={{ width: '100%' }} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div style={{ display: 'flex', }}> |
|||
<div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }}> |
|||
<img |
|||
src="/assets/images/imageImg/save.png" |
|||
alt="设置" |
|||
style={{ width: '100%' }} |
|||
/> |
|||
</div> |
|||
<div style={{ width: 22, height: 22, marginRight: 44, cursor: 'pointer' }}> |
|||
<img |
|||
src="/assets/images/imageImg/upload.png" |
|||
alt="设置" |
|||
style={{ width: '100%' }} |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div style={{ display: 'flex', height: 'calc(100% - 64px)', }}> |
|||
<div style={{ height: "100%", width: 200, background: '#FFFFFF' }}> |
|||
<div style={{ display: 'flex', height: 49, background: '#1859C1', border: '1px solid #1859C1', color: 'rgba(255,255,255,0.65)', fontSize: 14, width: '100%' }}> |
|||
{chooseList.map((item, index) => { |
|||
return ( |
|||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '33.3333%', cursor: 'pointer' }} |
|||
key={index} |
|||
className={index == chooseNum ? 'onchoose' : ''} |
|||
onClick={() => tochange(index)} > |
|||
{item} |
|||
</div> |
|||
) |
|||
})} |
|||
</div> |
|||
{/* 节点 */} |
|||
<div style={{ display: chooseNum == "0" ? "block" : "none",height:'100%' }}> |
|||
<div style={{ height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgb(246, 250, 255)', cursor: 'pointer' }} onClick={addMainNode}> |
|||
<div style={{ width: 20, height: 20 }}> |
|||
<img |
|||
src="/assets/images/imageImg/addMainNodes.png" |
|||
alt="设置" |
|||
style={{ width: '100%' }} |
|||
/> |
|||
</div> |
|||
<div style={{ marginLeft: 9, fontSize: 15, color: 'rgba(0,0,0,0.65)' }}> |
|||
增加主要节点 |
|||
</div> |
|||
</div> |
|||
{/* <div > */} |
|||
<Tree |
|||
style={{height: 'calc(100% - 89px)',overflowY: 'auto',}} |
|||
treeData={treeData} |
|||
renderLabel={renderLabel} |
|||
/> |
|||
{/* </div> */} |
|||
</div> |
|||
{/* 添加视频 */} |
|||
{addCamera ? ( |
|||
<div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 200, background: '#FFFFFF' }}> |
|||
<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={() => { setAddCamera(false); setAddCameraKey('') }}> |
|||
<img |
|||
src="/assets/images/imageImg/close.png" |
|||
alt="设置" |
|||
style={{ width: '100%' }} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div style={{ borderBottom: '1px solid rgba(226,226,226,0.5)', background: '#FFFFFF' }}> |
|||
<div style={{ display: 'flex', padding: "8px 10px 10px 10px", alignItems: 'center' }}> |
|||
<div style={{ fontSize: 12 }}>摄像头名称</div> |
|||
<div> |
|||
<Input |
|||
style={{ width: 140, marginLeft: 10 }} |
|||
value={mykeyword} |
|||
onChange={(value) => { setMykeyword(value) }} |
|||
placeholder="请输入摄像头名称" |
|||
showClear> |
|||
</Input> |
|||
</div> |
|||
<div style={{ width: 32, height: 32, cursor: 'pointer' }} onClick={searchCamera}> |
|||
<img |
|||
src="/assets/images/imageImg/find.png" |
|||
alt="设置" |
|||
style={{ width: '100%' }} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div style={{ display: 'flex', marginBottom: 9, justifyContent: 'space-between' }}> |
|||
<div style={{ marginLeft: 20 }}> |
|||
<Checkbox |
|||
indeterminate={indeterminate} |
|||
onChange={onCheckAllChange} |
|||
checked={checkAll} |
|||
aria-label="全选" |
|||
> |
|||
全选 |
|||
</Checkbox> |
|||
</div> |
|||
<div style={{ marginRight: 20, color: '#1859C1', cursor: 'pointer' }} onClick={finishAdd}> |
|||
完成 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div style={{ padding: '10px 20px', overflowY: 'scroll', height: 'calc(100% - 193px)' }}> |
|||
<CheckboxGroup |
|||
style={{ marginTop: 6 }} |
|||
className='my_CheckboxGroup' |
|||
options={showCameraList} |
|||
value={checkedList} |
|||
onChange={onChange} |
|||
aria-label="text" |
|||
/> |
|||
</div> |
|||
</div> |
|||
) : ('')} |
|||
{/* 样式 */} |
|||
<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={{ marginLeft: 20 }}>header</div> |
|||
<div style={{ marginRight: 13 }}><Switch onChange={(v, e) => console.log(v)} size="small" aria-label="是否有头部"></Switch></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={{ marginLeft: 20 }}>自定义样式</div> |
|||
<div style={{ marginRight: 13, width: 9, height: 5, display: 'flex', alignItems: 'center', }}> |
|||
<img |
|||
src="/assets/images/imageImg/down.png" |
|||
alt="设置" |
|||
style={{ width: '100%' }} |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div style={{ flex: 1 }}> |
|||
<VideoScreen/> |
|||
</div> |
|||
</div> |
|||
<Modal |
|||
title="提醒" |
|||
visible={comingVisible} |
|||
onOk={() => { |
|||
setComingVisible(false) |
|||
}} |
|||
width={610} |
|||
onCancel={() => { |
|||
setComingVisible(false) |
|||
}} |
|||
okText="确定" |
|||
cancelText="取消" |
|||
closeOnEsc={true} |
|||
> |
|||
开发中，敬请期待~ |
|||
</Modal> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global } = state; |
|||
return { |
|||
user: auth.user, |
|||
actions: global.actions, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(MirroringDetail); |
|||
@ -0,0 +1,27 @@ |
|||
.onchoose{ |
|||
background: linear-gradient(180deg, #1859C1 0%, #2C66E7 100%); |
|||
color: #F9F9F9; |
|||
font-weight: 600; |
|||
border-bottom: 2px solid #729BFF; |
|||
} |
|||
.inputpadding{ |
|||
.semi-input-small{ |
|||
padding: 0px; |
|||
} |
|||
} |
|||
.my_CheckboxGroup{ |
|||
.semi-checkbox-addon{ |
|||
font-size: 12px; |
|||
} |
|||
.semi-checkbox-extra{ |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
.hasHeader{ |
|||
.semi-switch-checked{ |
|||
background-color:#2F53EA |
|||
} |
|||
.semi-switch-checked:hover{ |
|||
background-color:#2F53EA |
|||
} |
|||
} |
|||
Loading…
Reference in new issue