Browse Source

镜像管理详情页面

release_1.3.0
deartibers 2 years ago
parent
commit
b055eb5f18
  1. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/addMainNodes.png
  2. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/banner.png
  3. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/close.png
  4. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/down.png
  5. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/find.png
  6. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/folder.png
  7. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/nameChange.png
  8. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/nodeCamera.png
  9. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/nodeDel.png
  10. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/nodeEdit.png
  11. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/nodeadd.png
  12. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/save.png
  13. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/toback.png
  14. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/upload.png
  15. 4
      code/VideoAccess-VCMP/web/client/src/sections/openness/actions/index.js
  16. 16
      code/VideoAccess-VCMP/web/client/src/sections/openness/actions/mirroring.js
  17. 3
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/index.js
  18. 176
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroring.jsx
  19. 459
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx
  20. 9
      code/VideoAccess-VCMP/web/client/src/sections/openness/routes.js
  21. 19
      code/VideoAccess-VCMP/web/client/src/sections/openness/style.less
  22. 2
      code/VideoAccess-VCMP/web/package.json

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/addMainNodes.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/banner.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 226 KiB

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/close.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 384 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/down.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 316 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/find.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/folder.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 536 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/nameChange.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 528 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/nodeCamera.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 628 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/nodeDel.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 177 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/nodeEdit.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 426 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/nodeadd.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 284 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/save.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 718 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/toback.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 788 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/upload.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

4
code/VideoAccess-VCMP/web/client/src/sections/openness/actions/index.js

@ -1,5 +1,7 @@
'use strict';
export default {
import * as mirroring from './mirroring'
export default {
...mirroring
}

16
code/VideoAccess-VCMP/web/client/src/sections/openness/actions/mirroring.js

@ -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 } },
});
}

3
code/VideoAccess-VCMP/web/client/src/sections/openness/containers/index.js

@ -1,5 +1,6 @@
'use strict';
import Mirroring from './mirroring';
import MirroringDetail from './mirroringDetail';
export { Mirroring};
export { Mirroring,MirroringDetail};

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

@ -1,9 +1,10 @@
import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'react-redux';
import { Coming } from '$components'
import { push } from 'react-router-redux';
import '../style.less'
const Mirroring = (props) => {
const { history, dispatch, actions, user, loading, StatusPushList } = props;
const detailList = useRef([
{
title: '科技蓝',
@ -28,38 +29,41 @@ const Mirroring = (props) => {
title: '智慧小蓝视频融合中心实例实例实例实例',
img: '/assets/images/imageImg/text.png',
color: 'blue',
lastEditTime:'2022-12-22 16:00:57',
lastReleaseTime:'2022-12-22 19:20:57',
typeId:'1511444S4545'
lastEditTime: '2022-12-22 16:00:57',
lastReleaseTime: '2022-12-22 19:20:57',
typeId: '1511444S4545'
}, {
title: '智慧小蓝视频融合',
img: '/assets/images/imageImg/text.png',
color: 'blue',
lastEditTime:'2022-12-22 16:00:57',
lastReleaseTime:'2022-12-22 19:20:57',
typeId:'1511444S4545'
lastEditTime: '2022-12-22 16:00:57',
lastReleaseTime: '2022-12-22 19:20:57',
typeId: '1511444S4545'
}, {
title: '智慧小蓝视频融合小蓝视频融合',
img: '/assets/images/imageImg/text.png',
color: 'blue',
lastEditTime:'2022-12-22 16:00:57',
lastReleaseTime:'2022-12-22 19:20:57',
typeId:'1511444S4545'
lastEditTime: '2022-12-22 16:00:57',
lastReleaseTime: '2022-12-22 19:20:57',
typeId: '1511444S4545'
}, {
title: '智慧小蓝视频融合小蓝视频融合是的阿三打阿三打',
img: '/assets/images/imageImg/text.png',
color: 'blue',
lastEditTime:'2022-12-22 16:00:57',
lastReleaseTime:'2022-12-22 19:20:57',
typeId:'1511444S4545'
lastEditTime: '2022-12-22 16:00:57',
lastReleaseTime: '2022-12-22 19:20:57',
typeId: '1511444S4545'
},
]);
const [maskNum, setMaskNum] = useState(100);
const [maskNum, setMaskNum] = useState(1000);
function mouseOver (index) {
setMaskNum(index)
}
function mouseOut () {
setMaskNum(100)
setMaskNum(1000)
}
function todetail(){
dispatch(push('/mirroring_detail'));
}
return (
<>
@ -75,7 +79,7 @@ const Mirroring = (props) => {
</div>
<div style={{ marginLeft: '0.854%', marginTop: 16, width: '7.683%' }}>
<div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>创建镜像模板</div>
<div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.4500)' }}>选择样式模板</div>
<div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.45)' }}>选择样式模板</div>
</div>
<div style={{ width: '6.281%' }}>
<img
@ -93,7 +97,7 @@ const Mirroring = (props) => {
</div>
<div style={{ marginLeft: '0.854%', marginTop: 16, width: '7.683%' }}>
<div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>节点配置</div>
<div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.4500)' }}>创建节点及设备树</div>
<div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.45)' }}>创建节点及设备树</div>
</div>
<div style={{ width: '6.281%' }}>
<img
@ -111,7 +115,7 @@ const Mirroring = (props) => {
</div>
<div style={{ marginLeft: '0.854%', marginTop: 16, width: '11.464%' }}>
<div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>发布镜像</div>
<div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.4500)' }}>发布成功后获取镜像服务ID</div>
<div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.45)' }}>发布成功后获取镜像服务ID</div>
</div>
<div style={{ width: '6.281%' }}>
<img
@ -129,7 +133,7 @@ const Mirroring = (props) => {
</div>
<div style={{ marginLeft: '0.854%', marginTop: 16 }}>
<div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>调用服务</div>
<div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.4500)' }}>通过服务ID调用镜像服务</div>
<div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.45)' }}>通过服务ID调用镜像服务</div>
<div style={{ marginTop: 3, fontSize: 12, color: '#1859C1', display: 'flex', alignItems: 'center' }}>API调用镜像服务方法
<img
src="/assets/images/imageImg/question.png"
@ -152,7 +156,7 @@ const Mirroring = (props) => {
alt="设置"
style={{ width: '306px', height: 142 }}
/>
{maskNum == index ? (<div onMouseOut={() => mouseOut()} style={{ position: 'absolute', width: '100%', height: '100%', background: 'rgba(0,0,0,0.3)', top: 0, display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }}>
{maskNum == index ? (<div onMouseOut={() => mouseOut()} onClick={()=>todetail()} style={{ position: 'absolute', width: '100%', height: '100%', background: 'rgba(0,0,0,0.3)', top: 0, display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }}>
<div style={{ width: 127, height: 33, border: '1px solid #FFFFFF', borderRadius: 4, color: '#ffffff', fontSize: 14, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
使用该模版
</div>
@ -183,75 +187,74 @@ const Mirroring = (props) => {
</div>
</div>
<div style={{ display: 'flex', padding: '19px 46px 79px 64px', flexWrap: 'wrap', justifyContent: 'space-between' }}>
{myCustomList.current.map((item,index)=>{
return(
<div style={{ height: 334, width: 362, boxShadow: '1px 2px 12px 1px rgba(217,217,217,0.7)', padding: 16 }}>
<img
src={item.img}
alt="设置"
style={{ width: 330, height: 153 }}
/>
<div style={{ color: '#2F2F2F', fontSize: 16, width: 300, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>
{item.title}
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 10 }}>
<div style={{ display: 'flex', cursor: 'pointer' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<img
src="/assets/images/imageImg/release.png"
alt="设置"
style={{ width: 16, height: 16 }}
/>
</div>
<div style={{ color: '#1859C1', fontSize: 14, margin: '0px 10px' }}>
发布
</div>
</div>
<div style={{ display: 'flex', cursor: 'pointer' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<img
src="/assets/images/imageImg/copy.png"
alt="设置"
style={{ width: 16, height: 16 }}
/>
</div>
<div style={{ color: '#1859C1', fontSize: 14, margin: '0px 10px' }}>
复制
</div>
</div>
<div style={{ display: 'flex', cursor: 'pointer' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
{myCustomList.current.map((item, index) => {
return (
<div style={{ height: 334, width: 362, boxShadow: '1px 2px 12px 1px rgba(217,217,217,0.7)', padding: 16 }} key={index}>
<img
src="/assets/images/imageImg/del.png"
src={item.img}
alt="设置"
style={{ width: 16, height: 16 }}
style={{ width: 330, height: 153 }}
/>
<div style={{ color: '#2F2F2F', fontSize: 16, width: 300, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>
{item.title}
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 10 }}>
<div style={{ display: 'flex', cursor: 'pointer' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<img
src="/assets/images/imageImg/release.png"
alt="设置"
style={{ width: 16, height: 16 }}
/>
</div>
<div style={{ color: '#1859C1', fontSize: 14, margin: '0px 10px' }}>
发布
</div>
</div>
<div style={{ display: 'flex', cursor: 'pointer' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<img
src="/assets/images/imageImg/copy.png"
alt="设置"
style={{ width: 16, height: 16 }}
/>
</div>
<div style={{ color: '#1859C1', fontSize: 14, margin: '0px 10px' }}>
复制
</div>
</div>
<div style={{ display: 'flex', cursor: 'pointer' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<img
src="/assets/images/imageImg/del.png"
alt="设置"
style={{ width: 16, height: 16 }}
/>
</div>
<div style={{ color: '#1859C1', fontSize: 14, marginLeft: 10 }}>
删除
</div>
</div>
</div>
<div style={{ color: 'rgba(0,0,0,0.45)', marginTop: 10, fontSize: 12 }}>
最后编辑于{item.lastEditTime}
</div>
<div style={{ color: 'rgba(0,0,0,0.45)', marginTop: 8, fontSize: 12 }}>
最后发布于{item.lastReleaseTime}
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 12 }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<img
src="/assets/images/imageImg/idCopy.png"
alt="设置"
style={{ width: 20, height: 20 }}
/>
</div>
<div style={{ marginLeft: 4, background: '#1859C1', padding: '2px 8px', color: '#FFFFFF', fontSize: 12, borderRadius: 2 }}>
ID:{item.typeId}
</div>
</div>
</div>
<div style={{ color: '#1859C1', fontSize: 14, marginLeft: 10 }}>
删除
</div>
</div>
</div>
<div style={{ color: 'rgba(0,0,0,0.45)', marginTop: 10, fontSize: 12 }}>
最后编辑于{item.lastEditTime}
</div>
<div style={{ color: 'rgba(0,0,0,0.45)', marginTop: 8, fontSize: 12 }}>
最后发布于{item.lastReleaseTime}
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 12 }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<img
src="/assets/images/imageImg/idCopy.png"
alt="设置"
style={{ width: 20, height: 20 }}
/>
</div>
<div style={{marginLeft:4,background:'#1859C1',padding:'2px 8px',color:'#FFFFFF',fontSize:12,borderRadius:2}}>
ID:{item.typeId}
</div>
</div>
</div>
)
})}
</div>
@ -261,9 +264,10 @@ const Mirroring = (props) => {
}
function mapStateToProps (state) {
const { auth } = state;
const { auth,global } = state;
return {
user: auth.user,
actions: global.actions,
};
}

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

@ -0,0 +1,459 @@
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";
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 searchData = useRef({})//
const [search, setSearch] = useState({}); //
const [indeterminate, setIndeterminate] = useState(true);//
const [checkAll, setCheckall] = useState(false);//
const onCheckAllChange = (e) => {//
console.log(e);
setCheckedList(e.target.checked ? plainOptions : []);
setIndeterminate(false);
setCheckall(e.target.checked);
};
const equipmentGetCamera = () => {
searchData.current = { ...search }
dispatch(openness.getCamera(searchData.current)).then((res) => {
// limits.current = res.payload.data.data.length
console.log(res.payload.data.data);
});
}
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 > 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++) {
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) {//
console.log('valvalval', value);
console.log('itemitem', 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) {//
}
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 < 1 ? (
<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>
) : ('')
}
<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 ? ('') : (
<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)
}
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:'100%'}}>
<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", }}>
<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>
<Tree
treeData={treeData}
renderLabel={renderLabel}
/>
</div>
{/* 添加视频 */}
<div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 200 }}>
<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' }}>
<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 placeholder='请输入摄像头名称' style={{ width: 140, marginLeft: 10 }}></Input>
</div>
<div style={{ width: 32, height: 32 }}>
<img
src="/assets/images/imageImg/find.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
</div>
<div style={{ display: 'flex' }}>
<div>
<Checkbox
indeterminate={indeterminate}
onChange={onCheckAllChange}
checked={checkAll}
aria-label="Checkbox 示例"
>
全选
</Checkbox>
</div>
<div>
<Checkbox onChange={checked => console.log(checked)} aria-label="Checkbox 示例">隐藏添加过的</Checkbox>
</div>
</div>
</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}}>
</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);

9
code/VideoAccess-VCMP/web/client/src/sections/openness/routes.js

@ -1,5 +1,5 @@
'use strict';
import { Mirroring } from './containers';
import { Mirroring,MirroringDetail } from './containers';
export default [{
type: 'inner',
@ -15,4 +15,11 @@ export default [{
breadcrumb: '镜像服务',
}]
}
},{
type: 'outer',
route: {
path: '/mirroring_detail',
key: 'MirroringDetail',
component: MirroringDetail,
}
}];

19
code/VideoAccess-VCMP/web/client/src/sections/openness/style.less

@ -0,0 +1,19 @@
.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;
}
}
.hasHeader{
.semi-switch-checked{
background-color:#2F53EA
}
.semi-switch-checked:hover{
background-color:#2F53EA
}
}

2
code/VideoAccess-VCMP/web/package.json

@ -51,7 +51,7 @@
"@douyinfe/semi-webpack-plugin": "^2.13.0",
"@fs/attachment": "^1.0.0",
"@micro-zoe/micro-app": "^1.0.0-alpha.1",
"@peace/utils": "0.0.64",
"@peace/utils": "^0.0.64",
"@semi-bot/semi-theme-fscamera": "^1.0.0",
"@vitejs/plugin-react": "^1.3.1",
"@vitejs/plugin-react-refresh": "^1.3.6",

Loading…
Cancel
Save