Browse Source

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

pull/3/head
yuan_yi 3 years ago
parent
commit
54737dba51
  1. BIN
      code/VideoAccess-VCMP/web/client/assets/images/background/backGround.png
  2. BIN
      code/VideoAccess-VCMP/web/client/assets/images/background/camera.png
  3. BIN
      code/VideoAccess-VCMP/web/client/assets/images/background/copy1.png
  4. BIN
      code/VideoAccess-VCMP/web/client/assets/images/background/copy2.png
  5. BIN
      code/VideoAccess-VCMP/web/client/assets/images/background/header.png
  6. BIN
      code/VideoAccess-VCMP/web/client/assets/images/background/logo.png
  7. BIN
      code/VideoAccess-VCMP/web/client/assets/images/background/notice.png
  8. BIN
      code/VideoAccess-VCMP/web/client/assets/images/background/projectIcon0.png
  9. BIN
      code/VideoAccess-VCMP/web/client/assets/images/background/projectIcon1.png
  10. BIN
      code/VideoAccess-VCMP/web/client/assets/images/background/projectIcon2.png
  11. BIN
      code/VideoAccess-VCMP/web/client/assets/images/background/projectIcon3.png
  12. BIN
      code/VideoAccess-VCMP/web/client/assets/images/background/sewage_camera1.png
  13. BIN
      code/VideoAccess-VCMP/web/client/assets/images/background/sewage_camera2.png
  14. BIN
      code/VideoAccess-VCMP/web/client/assets/images/background/store1.png
  15. BIN
      code/VideoAccess-VCMP/web/client/assets/images/background/store2.png
  16. BIN
      code/VideoAccess-VCMP/web/client/assets/images/background/straightline.png
  17. 94
      code/VideoAccess-VCMP/web/client/src/layout/components/header/index.jsx
  18. 2
      code/VideoAccess-VCMP/web/client/src/sections/auth/containers/login.jsx
  19. 0
      code/VideoAccess-VCMP/web/client/src/sections/auth/style.less
  20. 1
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js
  21. 160
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx
  22. 315
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx
  23. 471
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
  24. 56
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx
  25. 3
      code/VideoAccess-VCMP/web/package.json

BIN
code/VideoAccess-VCMP/web/client/assets/images/background/backGround.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
code/VideoAccess-VCMP/web/client/assets/images/background/camera.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 712 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/background/copy1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 173 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/background/copy2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 169 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/background/header.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 226 KiB

BIN
code/VideoAccess-VCMP/web/client/assets/images/background/logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
code/VideoAccess-VCMP/web/client/assets/images/background/notice.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 576 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/background/projectIcon0.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 434 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/background/projectIcon1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 258 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/background/projectIcon2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 453 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/background/projectIcon3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 300 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/background/sewage_camera1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
code/VideoAccess-VCMP/web/client/assets/images/background/sewage_camera2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
code/VideoAccess-VCMP/web/client/assets/images/background/store1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 853 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/background/store2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
code/VideoAccess-VCMP/web/client/assets/images/background/straightline.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

94
code/VideoAccess-VCMP/web/client/src/layout/components/header/index.jsx

@ -1,46 +1,84 @@
'use strict';
import React from 'react';
import { connect } from 'react-redux';
import { Nav } from '@douyinfe/semi-ui';
"use strict";
import React from "react";
import { connect } from "react-redux";
import { Nav, Avatar, Dropdown } from "@douyinfe/semi-ui";
const Header = props => {
const { dispatch, history, user, actions, socket } = props
const Header = (props) => {
const { dispatch, history, user, actions, socket } = props;
return (
<div style={{ position: 'relative', height: 60, minWidth: 520 }}>
<div style={{ float: 'left', paddingLeft: 32, fontSize: 16 }}>
<div style={{
lineHeight: '60px', display: 'inline-block', fontSize: 20, textShadow: '0 4px 3px rgba(0, 0, 0, 0.2)',
userSelect: 'none'
}}>
飞尚物联
</div>
</div>
<div id="nav" style={{ float: 'right' }}>
<Nav mode={'horizontal'} onClick={({ itemKey }) => {
if (itemKey == 'logout') {
<>
<Nav
mode={"horizontal"}
onClick={({ itemKey }) => {
if (itemKey == "logout") {
dispatch(actions.auth.logout(user));
if (socket) {
socket.disconnect()
socket.disconnect();
}
history.push(`/signin`);
}
}}>
<Nav.Sub itemKey={'user'} text={<div style={{ display: 'inline-block' }}>{user && user.namePresent}</div>}>
<Nav.Item itemKey={'logout'} text={'退出'} />
</Nav.Sub>
</Nav>
</div>
}}
style={{
height: 60,
minWidth: 520,
background: "url(/assets/images/background/header.png)",
backgroundSize: "100% 100%",
color: "white",
}}
header={{
logo: (
<img
src="/assets/images/background/logo.png"
style={{ display: "inline-block", width: 280, height: 52}}
/>
),
text: "",
}}
footer={
<Nav.Sub
itemKey={"user"}
text={
<div
style={{
marginLeft: 20,
display: "inline-block",
color: "white",
}}
>
<img
src="/assets/images/background/notice.png"
style={{
display: "inline-block",
width: 18,
height: 18,
position: "relative",
top: 6,
left: -10,
}}
/>
<Avatar size="small" color="light-blue" style={{ margin: 4 }}>
<img src="/assets/images/avatar/6.png" />
</Avatar>
{user && user.namePresent}
</div>
)
}
>
<Nav.Item itemKey={"logout"} text={"退出"} />
</Nav.Sub>
}
/>
</>
);
};
function mapStateToProps (state) {
function mapStateToProps(state) {
const { global, auth, webSocket } = state;
return {
actions: global.actions,
user: auth.user,
socket: webSocket.socket
socket: webSocket.socket,
};
}

2
code/VideoAccess-VCMP/web/client/src/sections/auth/containers/login.jsx

@ -5,7 +5,7 @@ import { push } from 'react-router-redux';
import { Form, Button, Toast } from '@douyinfe/semi-ui';
import { login, LOGIN_SUCCESS } from '../actions/auth';
import { IconLock,IconUser } from '@douyinfe/semi-icons';
import './login.less'
import '../style.less'
const Login = props => {
const { dispatch, user, error, actions, apiRoot, isRequesting } = props

0
code/VideoAccess-VCMP/web/client/src/sections/auth/containers/login.less → code/VideoAccess-VCMP/web/client/src/sections/auth/style.less

1
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js

@ -45,6 +45,7 @@ export function addchangeNvr(data) {
dispatch: dispatch,
data,
actionType: "ADD_CHANGE_NVR",
msg: { option: "添加/修改" },
url: `${ApiTable.nvr}`,
});
}

160
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx

@ -8,28 +8,102 @@ import {
} from "@douyinfe/semi-ui";
function Setup(props) {
const { dispatch, actions, user, loading, visible, close, SETUPS } = props;
const [checkeds, setCheckeds] = useState([]);
const {
dispatch,
actions,
user,
loading,
visible,
close,
SETUPS,
CAMERAS,
cameraSetup,
} = props;
const [check, setCheck] = useState([]);
const checkboxcss = { width: "21%", height: 16, marginBottom: "20px" };
const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" };
useEffect(() => {
//
const ISgetItem = localStorage.getItem(SETUPS);
setCheck(ISgetItem ? JSON.parse(ISgetItem):[]);
const ISgetItem1 = localStorage.getItem(SETUPS);
const ISgetItem2 = localStorage.getItem(CAMERAS);
if (cameraSetup) {
setCheck(ISgetItem2 ? JSON.parse(ISgetItem2) : []);
} else {
setCheck(ISgetItem1 ? JSON.parse(ISgetItem1) : []);
}
ischeck();
}, []);
const equipmentNVR = [
{ name: "设备厂家", value: "a" },
{ name: "添加账号", value: "b" },
{ name: "通道数", value: "c" },
{ name: "端口", value: "d" },
{ name: "设备状态", value: "e" },
{ name: "创建时间", value: "f" },
];
const projectNVR = [
{ name: "项目名称", value: "g" },
{ name: "things名称", value: "h" },
{ name: "things数量", value: "i" },
];
const equipmentCamera = [
{ name: "设备厂家", value: "manufactor" },
{ name: "接入类型", value: "type" },
{ name: "设备状态", value: "state" },
{ name: "云台支持", value: "support" },
{ name: "内存卡信息", value: "memoryCard" },
{ name: "设备创建时间", value: "time" },
{ name: "设备添加账号", value: "account" },
];
const projectCamera = [
{ name: "项目名称", value: "name" },
{ name: "pcode", value: "pcode" },
{ name: "结构物", value: "structure" },
{ name: "测点", value: "measuringPoint" },
{ name: "监测因素", value: "factor" },
];
function ischeck(value) {
if (check.length >= 8) {
if (check.includes(value)) {
return false;
} else {
return true;
}
}
}
return (
<Modal
title="表格属性设置"
title={
<div>
表格属性设置
<span
style={{
width: 50,
lineHeight: "19px",
display: "inline-block",
color: "white",
textAlign: "center",
marginLeft: 6,
background:
check.length == 8
? "rgba(40, 123, 255, 1)"
: "rgba(176, 176, 176, 1)",
}}
>
{check.length}/8
</span>
</div>
}
visible={visible}
style={{ width: 580 }}
style={{ width: 600 }}
onOk={() => {
localStorage.setItem(SETUPS, JSON.stringify(checkeds));
cameraSetup
? localStorage.setItem(CAMERAS, JSON.stringify(check))
: localStorage.setItem(SETUPS, JSON.stringify(check));
close();
}}
onCancel={() => {
@ -42,14 +116,14 @@ function Setup(props) {
direction="horizontal"
defaultValue={check}
aria-label="表格属性设置"
onChange={(checked) => {
setCheckeds(checked);
onChange={(check) => {
setCheck(check);
ischeck();
}}
>
<div
style={{
width: 529,
height: 121,
width: 550,
border: "1px solid #EAEAEA",
padding: "0px 5px",
borderRadius: 4,
@ -65,32 +139,25 @@ function Setup(props) {
>
设备信息
</div>
<div style={{ padding: "15px 30px" }}>
<Checkbox value="a" style={checkboxcss}>
设备厂家
</Checkbox>
<Checkbox value="b" style={checkboxcss}>
添加账号
</Checkbox>
<Checkbox value="c" style={checkboxcss}>
通道数
</Checkbox>
<Checkbox value="d" style={checkboxcss}>
端口
</Checkbox>
<Checkbox value="e" style={checkboxcss}>
设备状态
</Checkbox>
<Checkbox value="f" style={checkboxcss}>
创建时间
<div style={{ padding: "15px 12px", width: 530 }}>
{(cameraSetup ? equipmentCamera : equipmentNVR).map((item) => {
return (
<Checkbox
key={item.value}
value={item.value}
style={checkboxcss}
disabled={ischeck(item.value)}
>
{item.name}
</Checkbox>
);
})}
</div>
</div>
<div
style={{
width: 529,
height: 92,
width: 550,
border: "1px solid #EAEAEA",
padding: "0px 5px",
borderRadius: 4,
@ -106,16 +173,19 @@ function Setup(props) {
>
项目信息
</div>
<div style={{ padding: "15px 30px" }}>
<Checkbox value="g" style={checkboxcss}>
项目名称
</Checkbox>
<Checkbox value="h" style={checkboxcss}>
things名称
</Checkbox>
<Checkbox value="i" style={checkboxcss}>
things数量
<div style={{ padding: "15px 12px", width: 530 }}>
{(cameraSetup ? projectCamera : projectNVR).map((item) => {
return (
<Checkbox
key={item.value}
value={item.value}
style={checkboxcss}
disabled={ischeck(item.value)}
>
{item.name}
</Checkbox>
);
})}
</div>
</div>
</CheckboxGroup>

315
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx

@ -1,16 +1,25 @@
import React, { useState, useEffect } from "react";
import { SideSheet, Tabs, TabPane } from "@douyinfe/semi-ui";
import copy from "copy-to-clipboard";
function SideSheets(props) {
const { dispatch, actions, user, loading, visible, close, SETUPS } = props;
const [checkeds, setCheckeds] = useState([]);
const [check, setCheck] = useState([]);
const {
dispatch,
actions,
user,
loading,
visible,
close,
SETUPS,
cameraSetup,
} = props;
const [clickStyle, setclickStyle] = useState();
const list = [
{
name: "项目名称",
a: "南昌县智慧环保",
b: "南昌县智慧环保",
c: "南昌市市政隧道综合管理平台",
c: "南昌市市政隧道综合管理平台cbj次哦爱吃此课程实地考察大检查的吃点【",
d: "C",
},
{ name: "关联结构物", a: "a", b: "B", c: "C", d: "C" },
@ -18,35 +27,276 @@ function SideSheets(props) {
{ name: "关联监测因素", a: "a", b: "B", c: "C", d: "C" },
];
const IFname = [
"设备名称:",
"设备编号:",
"接入方式:",
"厂商:",
"添加账号:",
"添加时间:",
"行政区别:",
"设备安装位置:",
"SIP服务编号:",
"SIP域:",
"SIP端口号:",
"通道数量:",
"心跳周期:",
"最大心跳次数:",
"注册密码:",
"注册有效期::",
"接入识别模块:",
{ name: "设备名称:", value: "消火栓呼呼呼呼" },
{ name: "设备编号:", value: "D50F2049010B" },
{ name: "接入方式:", value: "NJBJ858G68H" },
{ name: "厂商:", value: "哇哇哇哇哇" },
{ name: "添加账号:", value: "Superadmin" },
{ name: "添加时间:", value: "2022-09-09" },
{ name: "行政区别:", value: "江西省-南昌市-南昌县" },
{
name: "设备安装位置:",
value: "江西省南昌县小蓝经开区江西飞尚科技有限公司",
},
{ name: "SIP服务编号:", value: "1111111111" },
{ name: "SIP域:", value: "KGU876J87" },
{ name: "SIP端口号:", value: "KGU876J87" },
{ name: "通道数量:", value: "16通道" },
{ name: "心跳周期:", value: "3600s" },
{ name: "最大心跳次数:", value: "3次" },
{ name: "注册密码:", value: "**********" },
{ name: "注册有效期::", value: "3600s" },
{ name: "接入识别模块:", value: "sssss" },
{
name: "通道1",
value1: "145641201564-1",
value2: "哦哦哦我我我喔噢喔喔我",
},
{ name: "通道2", value1: "145641201564-2", value2: "哦哦哦哦哦噢噢欧欧哦" },
];
const sewage = [
{ name: "设备名称:", value: "消火栓呼呼呼呼" },
{ name: "SIP编号/设备编号:", value: "D50F2049010B" },
{ name: "接入方式:", value: "NJBJ858G68H" },
{ name: "厂商:", value: "哇哇哇哇哇" },
{ name: "添加账号:", value: "Superadmin" },
{ name: "添加时间:", value: "2022-09-09" },
{
name: "设备安装位置:",
value: "江西省南昌县小蓝经开区江西飞尚科技有限公司",
},
{ name: "HLS地址", value: "" },
{ name: "FLV地址", value: "" },
{ name: "RTMP地址", value: "" },
{ name: "EZOPEN地址", value: "" },
{ name: "ONVIF地址", value: "" },
{ name: "云储存地址", value: "" },
{ name: "本地储存地址", value: "" },
];
console.log(IFname);
function pp() {
let str = [];
for (let i = 0; i < (cameraSetup ? sewage : IFname).length; i++) {
if (i === 0) {
str.push(
<div
key="Basic_information"
style={{
fontWeight: "600",
color: "#1859C1",
margin: "15px 0 0 40px",
}}
>
基础信息
</div>
);
}
if (cameraSetup ? i == 7 : i == 8) {
str.push(
<div key="Access_information">
<img
src="/assets/images/background/straightline.png"
alt="1"
style={{ width: 872, display: "block", marginTop: 24 }}
/>
<div
style={{
fontWeight: "600",
color: "#1859C1",
margin: "15px 0 0 40px",
}}
>
{cameraSetup ? "复制直播地址" : "接入信息"}
</div>
</div>
);
}
if (cameraSetup ? i == 12 : i == 17) {
str.push(
<div key="Camera_information">
<img
src="/assets/images/background/straightline.png"
alt="1"
style={{ width: 872, display: "block", marginTop: 24 }}
/>
<div
style={{
fontWeight: "600",
color: "#1859C1",
margin: "15px 0 0 40px",
}}
>
{cameraSetup ? "复制回收地址" : "摄像头信息"}
</div>
</div>
);
}
if (
cameraSetup ? 0 <= i && i < 6 : (0 <= i && i < 6) || (i > 7 && i <= 16)
) {
str.push(
<div
key={i}
style={{ width: "50%", display: "inline-block", marginTop: 20 }}
>
<span
style={{
width: 150,
display: "inline-block",
textAlign: "right",
fontWeight: "600",
color: "rgba(0, 0, 0, 0.45)",
}}
>
{(cameraSetup ? sewage : IFname)[i].name}
</span>
<span style={{ fontWeight: "600", color: " #34383E" }}>
{(cameraSetup ? sewage : IFname)[i].value}
</span>
</div>
);
}
if (cameraSetup ? i == 6 : i > 5 && i < 8) {
str.push(
<div key={i} style={{ marginTop: 14 }}>
<span
style={{
width: 150,
display: "inline-block",
textAlign: "right",
fontWeight: "600",
color: "rgba(0, 0, 0, 0.45)",
}}
>
{(cameraSetup ? sewage : IFname)[i].name}
</span>
<span style={{ fontWeight: "600", color: " #34383E" }}>
{(cameraSetup ? sewage : IFname)[i].value}
</span>
</div>
);
}
if (cameraSetup ? i > 6 && i < 14 : i > 16) {
str.push(
<div
key={i}
style={
cameraSetup
? {
width: 120,
height: 130,
display: "inline-block",
borderRadius: 4,
border: "1px solid #D9D9D9",
margin: "20px 0 0 40px",
textAlign: "center",
color: clickStyle == sewage[i].name ? "white" : "",
background: clickStyle == sewage[i].name ? "#1859C1" : "",
}
: {
width: "40%",
display: "inline-block",
borderRadius: 4,
border: "1px solid rgba(151, 151, 151, 0.2)",
margin: "16px 0 0 36px",
color: "rgba(0, 0, 0, 0.85)",
fontWeight: "600",
}
}
onClick={
cameraSetup
? (e) => {
copy(sewage[i].name);
// alert("");
setclickStyle(sewage[i].name);
}
: ""
}
>
<div
style={
cameraSetup
? {}
: {
padding: "8px 10px",
borderBottom: "1px solid rgba(151, 151, 151, 0.2)",
}
}
>
<img
src={`/assets/images/background/${
cameraSetup
? i < 12
? clickStyle == sewage[i].name
? "sewage_camera2"
: "sewage_camera1"
: clickStyle == sewage[i].name
? "store2"
: "store1"
: "camera"
}.png`}
style={
cameraSetup ? { margin: "20px 0 8px 0" } : { marginRight: 10 }
}
/>
<div
style={
cameraSetup
? {}
: {
display: "inline-block",
}
}
>
{cameraSetup ? (
<>
{sewage[i].name}
<img
src={`/assets/images/background/${
clickStyle == sewage[i].name ? "copy2" : "copy1"
}.png`}
style={{
paddingBottom: 10,
display: "inline-block",
width: 10,
height: 20,
}}
/>
</>
) : (
IFname[i].name
)}
</div>
</div>
{cameraSetup ? (
""
) : (
<>
<p style={{ margin: "16px 0 0 30px " }}>{IFname[i].value1}</p>
<p style={{ margin: "16px 0 20px 30px " }}>
{IFname[i].value2}
</p>
</>
)}
</div>
);
}
}
return str;
}
const styles = {
width: 180,
height: 64,
textAlign: "center",
// background: "#FFFFFF",
background: "url(/assets/images/background/backGround.png)",
backgroundSize: "100% 100%",
padding: "12px 17px",
padding: "12px 17px 12px 17px",
margin: "30px 0 0 10px",
lineHeight: "20px",
position: "relative",
lineHeight: "24px",
overflow: "hidden",
textOverflow: "ellipsis",
display: "-webkit-box",
WebkitLineClamp: "2",
WebkitBoxOrient: "vertical",
zIndex: 5,
};
@ -55,7 +305,7 @@ function SideSheets(props) {
return (
<SideSheet
visible={visible}
title="智慧设备NVR"
title={cameraSetup ? "污水管理出出口" : "智慧设备NVR"}
style={{ background: "#F9FBFF" }}
size="large"
onCancel={() => {
@ -65,7 +315,7 @@ function SideSheets(props) {
<Tabs type="line">
<TabPane tab="项目信息" itemKey="1">
<div style={{ display: "flex", justifyContent: "space-evenly" }}>
{list.map((item) => {
{list.map((item, index) => {
return (
<div
key={item.name}
@ -78,10 +328,15 @@ function SideSheets(props) {
style={{
lineHeight: "32px",
background: "#1859C1",
color: "#FFFFFF",
borderRadius: 3,
textAlign: "center",
}}
>
<img
src={`/assets/images/background/projectIcon${index}.png`}
style={{ marginRight: 10 }}
/>
{item.name}
</div>
<div style={styles}>{item.a}</div>
@ -94,9 +349,7 @@ function SideSheets(props) {
</div>
</TabPane>
<TabPane tab="设备信息" itemKey="2">
{IFname.map((item, index) => {
return index;
})}
{pp()}
</TabPane>
</Tabs>
</SideSheet>

471
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx

@ -1,12 +1,203 @@
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useRef } from "react";
import { connect } from "react-redux";
import { Button, Form, Input, Row, Table } from "@douyinfe/semi-ui";
import { Button, Form, Input, Row, Table, Pagination } from "@douyinfe/semi-ui";
import "../style.less";
import CameraModal from "../components/cameraModal";
import NvrModal from "../components/nvrModal";
import Setup from "../components/setup";
import SideSheets from "../components/sideSheet";
const CameraHeader = (props) => {
const [cameraModal,setCameraModal] = useState(false)
const [modalName,setModalName] = useState('')
const { dispatch, actions, user, loading, equipmentWarehouseNvr } = props;
const [cameraModal, setCameraModal] = useState(false);
const [modalName, setModalName] = useState("");
const [setup, setSetup] = useState(false);
const [sideSheet, setSideSheet] = useState(false);
const [cameraSetup, setcameraSetup] = useState(false);
const [setupp, setSetupp] = useState([]);
const [venderList, setvenderList] = useState([]); //
const [query, setQuery] = useState({ limit: 10, page: 0 });
const { equipmentWarehouse } = actions;
const api = useRef();
const CAMERAS = "cameras";
useEffect(() => {
dispatch(actions.equipmentWarehouse.getVender()).then((res) => {
setvenderList(res.payload.data);
});
//
localStorage.setItem(
CAMERAS,
JSON.stringify(["state", "type", "manufactor"])
);
attribute();
}, []);
useEffect(() => {
equipmentGetNvr();
}, [query]);
function equipmentGetNvr() {
dispatch(equipmentWarehouse.getNvr(query));
}
const columns = [
{
title: "序号",
render: (text, record, index) => {
return index + 1;
},
},
{
title: "设备名称",
dataIndex: "name",
render: (text, record, index) => {
return (
<div>
<span
style={{
backgroundColor: record.avatarBg,
width: "10px",
height: "10px",
borderRadius: "50%",
display: "inline-block",
marginRight: "10px",
}}
/>
{record.name}
</div>
);
},
},
{
title: "操作",
width: "20%",
dataIndex: "",
render: (_, row) => {
// console.log(row);
return (
<div style={{ display: "flex" }}>
<Button theme="borderless">
<NvrModal
nvrData={row}
modalName="revise"
venderList={venderList}
close={() => {
equipmentGetNvr();
}}
/>
</Button>
<Button
theme="borderless"
onClick={() => {
setSideSheet(true);
setcameraSetup(true);
}}
>
查看
</Button>
<Button theme="borderless">播放</Button>
<Button theme="borderless">禁用</Button>
<Button
theme="borderless"
onClick={() => {
dispatch(equipmentWarehouse.delNvr(row.id));
equipmentGetNvr();
}}
>
删除
</Button>
</div>
);
},
},
];
//
function attribute() {
const arr = localStorage.getItem(CAMERAS)
? JSON.parse(localStorage.getItem(CAMERAS))
: [];
const column = [
{
title: "设备厂家",
dataIndex: "venderId",
key: "manufactor",
},
{
title: "接入类型",
dataIndex: "createUserId",
key: "type",
},
{
title: "设备状态",
dataIndex: "channelCount",
key: "state",
},
{
title: "云台支持",
dataIndex: "port",
key: "support",
},
{
title: "内存卡信息",
dataIndex: "size",
key: "memoryCard",
},
{
title: "设备创建时间",
dataIndex: "createTime",
key: "time",
},
{
title: "设备添加账号",
dataIndex: "size",
key: "account",
},
{
title: "项目名称",
dataIndex: "updateTime",
key: "name",
},
{
title: "pcode",
dataIndex: "updateTime",
key: "pcode",
},
{
title: "结构物",
dataIndex: "updateTime",
key: "structure",
},
{
title: "测点",
dataIndex: "updateTime",
key: "measuringPoint",
},
{
title: "监测因素",
dataIndex: "updateTime",
key: "factor",
},
];
for (let i = 0; i < arr.length; i++) {
let colum = column.filter((item) => {
return item.key === arr[i];
});
columns.splice(i + 2, 0, colum[0]);
}
setSetupp(columns);
}
//
const screen = {
width: 193,
marginRight: 20,
marginBottom: 16,
color: "rgba(0, 0, 0, 0.65)",
};
return (
<>
<div style={{ position: "" }}>
@ -52,7 +243,7 @@ const CameraHeader = (props) => {
cursor: "pointer",
}}
onClick={() => {
setModalName('add')
setModalName("add");
setCameraModal(true);
}}
>
@ -60,25 +251,289 @@ const CameraHeader = (props) => {
</div>
</div>
</div>
{cameraModal?
<div
style={{
width: "100%",
background: "#FFFFFF",
borderRadius: 3,
padding: "8px 20px",
marginTop: 20,
}}
>
<div
style={{
height: 22,
fontSize: 16,
fontFamily: "PingFangSC-Medium, PingFang SC",
fontWeight: "bold",
color: " rgba(0, 0, 0, 0.85)",
lineHeight: "22px",
marginBottom: 16,
}}
>
筛选条件
</div>
<div style={{ display: "flex" }}>
<Form
onSubmit={(values) => console.log(values)}
// onValueChange={values=>console.log(values)}
getFormApi={(formApi) => (api.current = formApi)}
layout="horizontal"
style={{ position: "relative", width: "100%", flex: 1 }}
>
<Form.Input
label="设备搜索:"
field="name"
placeholder="请输入设备名称"
labelPosition="left"
style={screen}
/>
<Form.Select
label="接入类型:"
labelPosition="left"
field="type1"
style={screen}
placeholder="全部"
>
<Form.Select.Option value="12">111</Form.Select.Option>
<Form.Select.Option value="11">111111</Form.Select.Option>
</Form.Select>
<Form.Select
label="厂家筛选:"
labelPosition="left"
style={screen}
field="venderId"
placeholder="全部"
>
{venderList.map((item) => {
return (
<Form.Select.Option key={item.id} value={item.id}>
{item.name}
</Form.Select.Option>
);
})}
</Form.Select>
<Form.Select
label="状态查询:"
labelPosition="left"
field="type2"
style={screen}
placeholder="全部"
>
<Form.Select.Option value="yes">在线</Form.Select.Option>
<Form.Select.Option value="no">离线</Form.Select.Option>
</Form.Select>
{/* <Form.Select
label="关联项目:"
labelPosition="left"
field="type3"
style={screen}
placeholder="全部"
>
<Form.Select.Option value="智慧环保">
飞尚科技1
</Form.Select.Option>
<Form.Select.Option value="智慧水务">
飞尚科技2
</Form.Select.Option>
</Form.Select> */}
</Form>
<div
style={{
width: 150,
display: "flex",
justifyContent: "flex-end",
alignItems: "flex-end",
}}
>
<Button
theme="solid"
type="primary"
style={{
width: 65,
height: 30,
borderRadius: 3,
marginBottom: 20,
marginRight: 20,
}}
onClick={() => {
api.current.validate().then((values) => {
console.log(values);
console.log(
equipmentWarehouseNvr.data.filter((item) => {
return (
item.name.indexOf(values.name) > -1 &&
item.venderId === values.venderId
);
// return item.venderId === values.venderId;
})
);
});
console.log(equipmentWarehouseNvr.data);
}}
>
搜素
</Button>
<Button
theme="light"
type="primary"
style={{
width: 65,
height: 30,
backGround: "#FFFFFF",
borderRadius: 3,
border: "1px solid #D9D9D9",
marginBottom: 20,
}}
>
重置
</Button>
</div>
</div>
</div>
<div style={{ background: "#FFFFFF", marginTop: 5 }}>
<div
style={{
width: "100%",
display: "flex",
justifyContent: "space-between",
padding: "13px 20px",
}}
>
<div
style={{
width: 64,
height: 22,
fontSize: 16,
fontfAmily: "PingFangSC-Medium, PingFang SC",
fontWeight: "bold",
color: "rgba(0, 0, 0, 0.85)",
lineHeight: "22px",
}}
>
设备列表
</div>
<div>
<Button
style={{
width: 32,
height: 32,
background: "#D9D9D9",
borderadius: 3,
marginRight: 20,
}}
type="primary"
key="primary"
onClick={() => {
setSetup(true);
setcameraSetup(true);
}}
>
<img
src="/assets/images/background/setup.png"
alt="设置"
style={{ width: 18, height: 18 }}
/>
</Button>
<Button
style={{
width: 65,
height: 32,
background: "#FFFFFF",
borderRadius: 3,
border: "1px solid #1859C1",
}}
>
导出
</Button>
</div>
</div>
<Table
columns={setupp}
dataSource={equipmentWarehouseNvr.data}
bordered={false}
empty="暂无数据"
style={{
padding: "0px 20px",
}}
pagination={false}
/>
<div
style={{
display: "flex",
justifyContent: "flex-end",
padding: "20px 20px",
}}
>
<span style={{ lineHeight: "30px" }}>
{equipmentWarehouseNvr.total}个设备
</span>
<Pagination
className="22"
total={equipmentWarehouseNvr.total}
showSizeChanger
currentPage={query.page + 1}
pageSizeOpts={[10, 20, 30, 40]}
onChange={(currentPage, pageSize) => {
setQuery({ limit: pageSize, page: currentPage - 1 });
}}
/>
</div>
{setup ? (
<Setup
visible={true}
CAMERAS={CAMERAS}
cameraSetup={cameraSetup}
close={() => {
setSetup(false);
attribute();
setcameraSetup(false);
}}
/>
) : (
""
)}
{sideSheet ? (
<SideSheets
visible={true}
cameraSetup={cameraSetup}
close={() => {
setSideSheet(false);
setcameraSetup(false);
}}
/>
) : (
[]
)}
</div>
{cameraModal ? (
<CameraModal
visible={true}
close={() => {
setCameraModal(false);
// setEditData(null)
}}
modalName={modalName} />:''}
modalName={modalName}
/>
) : (
""
)}
</>
);
};
function mapStateToProps(state) {
const { auth, global, members } = state;
const { auth, global, members, equipmentWarehouseNvr } = state;
return {
loading: members.isRequesting,
user: auth.user,
actions: global.actions,
members: members.data,
equipmentWarehouseNvr: equipmentWarehouseNvr.data || [],
};
}

56
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx

@ -1,5 +1,6 @@
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useRef } from "react";
import { connect } from "react-redux";
import moment from "moment";
import { Button, Form, Input, Row, Table, Pagination } from "@douyinfe/semi-ui";
import "../style.less";
import NvrModal from "../components/nvrModal";
@ -14,6 +15,7 @@ const NvrHeader = (props) => {
const [setupp, setSetupp] = useState([]);
const [venderList, setvenderList] = useState([]); //
const [query, setQuery] = useState({ limit: 10, page: 0 });
const api = useRef();
const SETUPS = "setups";
useEffect(() => {
@ -71,7 +73,7 @@ const NvrHeader = (props) => {
render: (_, row) => {
// console.log(row);
return (
<>
<div style={{ display: "flex" }}>
<Button theme="borderless">
<NvrModal
nvrData={row}
@ -90,11 +92,16 @@ const NvrHeader = (props) => {
>
查看
</Button>
<Button theme="borderless" onClick={()=>{
<Button
theme="borderless"
onClick={() => {
dispatch(equipmentWarehouse.delNvr(row.id));
equipmentGetNvr();
}}>删除</Button>
</>
}}
>
删除
</Button>
</div>
);
},
},
@ -136,6 +143,9 @@ const NvrHeader = (props) => {
title: "创建时间",
dataIndex: "createTime",
key: "f",
render: (text, r, index) => {
return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS");
},
},
{
title: "项目名称",
@ -250,11 +260,14 @@ const NvrHeader = (props) => {
<div style={{ display: "flex" }}>
<Form
onSubmit={(values) => console.log(values)}
// onValueChange={values=>console.log(values)}
getFormApi={(formApi) => (api.current = formApi)}
layout="horizontal"
style={{ position: "relative", width: "100%", flex: 1 }}
>
<Form.Input
field="设备搜索:"
label="设备搜索:"
field="name"
placeholder="请输入设备名称"
labelPosition="left"
style={screen}
@ -263,7 +276,7 @@ const NvrHeader = (props) => {
label="厂家筛选:"
labelPosition="left"
style={screen}
field="type1"
field="venderId"
placeholder="全部"
>
{venderList.map((item) => {
@ -284,16 +297,20 @@ const NvrHeader = (props) => {
<Form.Select.Option value="yes">在线</Form.Select.Option>
<Form.Select.Option value="no">离线</Form.Select.Option>
</Form.Select>
<Form.Select
{/* <Form.Select
label="关联项目:"
labelPosition="left"
field="type3"
style={screen}
placeholder="全部"
>
<Form.Select.Option value="oper ">飞尚科技1</Form.Select.Option>
<Form.Select.Option value="r">飞尚科技2</Form.Select.Option>
</Form.Select>
<Form.Select.Option value="智慧环保">
飞尚科技1
</Form.Select.Option>
<Form.Select.Option value="智慧水务">
飞尚科技2
</Form.Select.Option>
</Form.Select> */}
</Form>
<div
style={{
@ -313,7 +330,20 @@ const NvrHeader = (props) => {
marginBottom: 20,
marginRight: 20,
}}
onClick={() => {}}
onClick={() => {
api.current.validate().then((values) => {
console.log(values);
console.log(
equipmentWarehouseNvr.data.filter((item) => {
return (
item.name.indexOf(values.name) > -1 &&
item.venderId === values.venderId
);
})
);
});
console.log(equipmentWarehouseNvr.data);
}}
>
搜素
</Button>
@ -414,10 +444,10 @@ const NvrHeader = (props) => {
className="22"
total={equipmentWarehouseNvr.total}
showSizeChanger
currentPage={query.page + 1}
pageSizeOpts={[10, 20, 30, 40]}
onChange={(currentPage, pageSize) => {
setQuery({ limit: pageSize, page: currentPage - 1 });
console.log(currentPage, pageSize);
}}
/>
</div>

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

@ -60,12 +60,13 @@
"@vitejs/plugin-react": "^1.3.1",
"@vitejs/plugin-react-refresh": "^1.3.6",
"args": "^5.0.1",
"copy-to-clipboard": "^3.3.1",
"cross-env": "^7.0.3",
"fs-web-server-scaffold": "^1.0.6",
"koa-better-http-proxy": "^0.2.5",
"koa-proxy": "^1.0.0-alpha.3",
"koa-view": "^2.1.4",
"moment": "^2.22.0",
"moment": "^2.29.3",
"npm": "^7.20.6",
"perfect-scrollbar": "^1.5.5",
"socket.io-client": "^4.5.0",

Loading…
Cancel
Save