Browse Source

表格查看和其它功能的数据对接

release_0.0.2
wenlele 2 years ago
parent
commit
cf93351a5a
  1. 42
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/camera.js
  2. 3
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/index.js
  3. 12
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js
  4. 19
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx
  5. 255
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx
  6. 143
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
  7. 81
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx
  8. 6
      code/VideoAccess-VCMP/web/client/src/utils/webapi.js

42
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/camera.js

@ -0,0 +1,42 @@
"use strict";
import { basicAction } from "@peace/utils";
import { ApiTable } 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" },
});
}
export function putForbidden(data) {
return (dispatch) =>
basicAction({
type: "put",
dispatch: dispatch,
actionType: "PUT_FORBIDDEN",
data,
url: `${ApiTable.putForbidden}`,
msg: { option: "" }, //禁用摄像头
reducer: {},
});
}
export function getCameraDetails(orgId) {
return (dispatch) =>
basicAction({
type: "get",
dispatch: dispatch,
actionType: "GET_CAMREA_DETAILS",
url: `${ApiTable.getCameraDetails.replace("{cameraId}", orgId)}`,
msg: { option: "" }, //获取摄像头详情
reducer: { name: "nvrDetails" },
});
}

3
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/index.js

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

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

@ -27,6 +27,18 @@ export function getNvr(query) {
reducer: { name: "equipmentWarehouseNvr" },
});
}
export function getNvrDetails(orgId) {
return (dispatch) =>
basicAction({
type: "get",
dispatch: dispatch,
actionType: "GET_NVR_DETAILS",
url: `${ApiTable.getNvrDetails.replace("{nvrId}", orgId)}`,
msg: { option: "" }, //获取nvr详情
reducer: { name: "nvrDetails" },
});
}
export function delNvr(orgId) {
return (dispatch) =>
basicAction({

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

@ -20,6 +20,7 @@ function Setup(props) {
cameraSetup,
} = props;
const [check, setCheck] = useState([]);
const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" };
useEffect(() => {
@ -35,17 +36,17 @@ function Setup(props) {
}, []);
const equipmentNVR = [
{ name: "设备厂家", value: "a" },
{ name: "添加账号", value: "b" },
{ name: "通道数", value: "c" },
{ name: "端口", value: "d" },
{ name: "设备状态", value: "e" },
{ name: "创建时间", value: "f" },
{ name: "设备厂家", value: "manufactor" },
{ name: "添加账号", value: "accountNumber" },
{ name: "通道数", value: "passageway" },
{ name: "端口", value: "port" },
{ name: "设备状态", value: "state" },
{ name: "创建时间", value: "time" },
];
const projectNVR = [
{ name: "项目名称", value: "g" },
{ name: "things名称", value: "h" },
{ name: "things数量", value: "i" },
{ name: "项目名称", value: "name" },
{ name: "pcode", value: "pcode" },
{ name: "结构物", value: "structure" },
];
const equipmentCamera = [
{ name: "设备厂家", value: "manufactor" },

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

@ -1,6 +1,12 @@
import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { SideSheet, Tabs, TabPane, Button } from "@douyinfe/semi-ui";
import copy from "copy-to-clipboard";
import moment from "moment";
import PerfectScrollbar from "perfect-scrollbar";
let projectScrollbar;
let equipmentScrollbar;
function SideSheets(props) {
const {
@ -12,39 +18,38 @@ function SideSheets(props) {
close,
SETUPS,
cameraSetup,
rowId,
venderList,
} = props;
const { equipmentWarehouse } = actions;
const [clickStyle, setclickStyle] = useState();
const list = [
{
name: "项目名称",
a: "南昌县智慧环保",
b: "南昌县智慧环保",
c: "南昌市市政隧道综合管理 哦哦哦哦哦 哦哦哦哦 哦哦哦哦 哦哦哦哦哦哦哦哦哦 哦",
d: "C",
},
{ name: "关联结构物", a: "a", b: "B", c: "C", d: "C" },
{ name: "关联测点", a: "a", b: "B", c: "C", d: "C" },
{ name: "关联监测因素", a: "a", b: "B", c: "C", d: "C" },
const [nvrDetails, setNvrDetails] = useState("");
const list = ["项目名称", "关联结构物", "关联测点", "关联监测因素"];
const type = [
{ name: "萤石", key: "yingshi" },
{ name: "NVR摄像头", key: "nvr" },
{ name: "IPC 网络摄像头", key: "ipc" },
{ name: "级联摄像头", key: "cascade" },
];
const information = {
nvr: [
{
name: "基础信息",
basics: [
{ name: "设备名称:", value: "消火栓呼呼呼呼" },
{ name: "设备编号:", value: "D50F2049010B" },
{ name: "接入方式:", value: "NJBJ858G68H" },
{ name: "厂商:", value: "哇哇哇哇哇" },
{ name: "添加账号:", value: "Superadmin" },
{ name: "添加时间:", value: "2022-09-09" },
{ name: "设备名称:", key: "name" },
{ name: "设备编号:", key: "serialNo" },
{ name: "接入方式:", key: "NJBJ858G68H" },
{ name: "厂商:", key: "venderId" },
{ name: "添加账号:", key: "createUser" },
{ name: "添加时间:", key: "createTime" },
{
name: "行政区别:",
value: "江西省-南昌市-南昌县",
key: "江西省-南昌市-南昌县",
difference: "difference",
},
{
name: "设备安装位置:",
value: "江西省南昌县小蓝经开区江西飞尚科技有限公司",
key: "江西省南昌县小蓝经开区江西飞尚科技有限公司",
difference: "line",
},
],
@ -52,15 +57,15 @@ function SideSheets(props) {
{
name: "接入信息",
access: [
{ 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: "SIP服务编号:", key: "1111111111" },
{ name: "SIP域:", key: "KGU876J87" },
{ name: "SIP端口号:", key: "port" },
{ name: "通道数量:", key: "channelCount" },
{ name: "心跳周期:", key: "3600s" },
{ name: "最大心跳次数:", key: "3次" },
{ name: "注册密码:", key: "**********" },
{ name: "注册有效期::", key: "3600s" },
{ name: "接入识别模块:", key: "sssss" },
],
},
{
@ -83,15 +88,18 @@ function SideSheets(props) {
{
name: "基础信息",
basics: [
{ name: "设备名称:", value: "消火栓呼呼呼呼" },
{ name: "SIP编号/设备编号:", value: "D50F2049010B" },
{ name: "接入方式:", value: "NJBJ858G68H" },
{ name: "厂商:", value: "哇哇哇哇哇" },
{ name: "添加账号:", value: "Superadmin" },
{ name: "添加时间:", value: "2022-09-09" },
{ name: "设备名称:", key: "name" },
{
name: "SIP编号/设备编号:",
key: nvrDetails.serialNo ? "serialNo" : "sip",
},
{ name: "接入方式:", key: "type" },
{ name: "厂商:", key: "venderId" },
{ name: "添加账号:", key: "createUser" },
{ name: "添加时间:", key: "createTime" },
{
name: "设备安装位置:",
value: "江西省南昌县小蓝经开区江西飞尚科技有限公司",
key: "江西省南昌县小蓝经开区江西飞尚科技有限公司",
difference: "line",
},
],
@ -99,11 +107,11 @@ function SideSheets(props) {
{
name: "复制直播地址",
liveBroadcast: [
{ name: "HLS地址", value: "" },
{ name: "FLV地址", value: "" },
{ name: "RTMP地址", value: "" },
{ name: "EZOPEN地址", value: "" },
{ name: "ONVIF地址", value: "" },
{ name: "HLS地址", key: "" },
{ name: "FLV地址", key: "" },
{ name: "RTMP地址", key: "" },
{ name: "EZOPEN地址", key: "" },
{ name: "ONVIF地址", key: "" },
],
},
{
@ -132,8 +140,33 @@ function SideSheets(props) {
zIndex: 5,
};
useEffect(() => {}, []);
useEffect(() => {
dispatch(
equipmentWarehouse[cameraSetup ? "getCameraDetails" : "getNvrDetails"](
rowId
)
).then((res) => {
setNvrDetails(res.payload.data);
projectScrollbar = new PerfectScrollbar("#project_information", {
suppressScrollX: true,
});
equipmentScrollbar = new PerfectScrollbar("#equipment_information", {
suppressScrollX: true,
});
});
console.log(nvrDetails);
}, []);
useEffect(() => {
const domProject = document.getElementById("project_information");
if (domProject && projectScrollbar) {
projectScrollbar.update();
}
const domEquipment = document.getElementById("equipment_information");
if (domEquipment && equipmentScrollbar) {
projectScrollbar.update();
}
});
return (
<SideSheet
visible={visible}
@ -146,16 +179,14 @@ function SideSheets(props) {
>
<Tabs type="line">
<TabPane tab="项目信息" itemKey="1">
<div style={{ display: "flex", justifyContent: "space-evenly" }}>
{list.map((item, index) => {
return (
<div
key={item.name}
style={{
width: 200,
margin: "12px 8px",
display: "flex",
justifyContent: "space-evenly",
}}
>
{list.map((item, index) => {
return (
<div
style={{
lineHeight: "32px",
@ -163,25 +194,58 @@ function SideSheets(props) {
color: "#FFFFFF",
borderRadius: 3,
textAlign: "center",
width: 200,
margin: "12px 8px",
}}
key={item}
>
<img
src={`/assets/images/background/projectIcon${index}.png`}
style={{ marginRight: 10 }}
/>
{item.name}
</div>
<div style={styles}>{item.a}</div>
<div style={styles}>{item.b}</div>
<div style={styles}>{item.c}</div>
<div style={styles}>{item.d}</div>
{item}
</div>
);
})}
</div>
<div
id="project_information"
style={{
height: document.body.clientHeight - 182,
// position: "relative",
}}
>
{nvrDetails
? nvrDetails.station.map((item, index) => {
return item.structure.projects.map((v, i) => {
return (
<div
key={v.name}
style={{
display: "flex",
justifyContent: "space-evenly",
}}
>
<div style={styles}>{v.name}</div>
<div style={styles}>{item.structure.name}</div>
<div style={styles}>{item.name}</div>
<div style={styles}>{item.factor.name}</div>
</div>
);
});
})
: ""}
</div>
</TabPane>
<TabPane tab="设备信息" itemKey="2">
{(cameraSetup ? information.camera : information.nvr).map(
<div
id="equipment_information"
style={{
height: document.body.clientHeight - 126,
}}
>
{nvrDetails
? (cameraSetup ? information.camera : information.nvr).map(
(item, index) => {
let str = [];
if (index > 0) {
@ -190,7 +254,11 @@ function SideSheets(props) {
src="/assets/images/background/straightline.png"
key={"img" + index}
alt="无法显示"
style={{ width: 872, display: "block", marginTop: 24 }}
style={{
width: 872,
display: "block",
marginTop: 24,
}}
/>
);
}
@ -231,7 +299,10 @@ function SideSheets(props) {
item.basics.map((item, index) => {
if (item.difference == "line") {
str.push(
<div key={"basics" + index} style={{ marginTop: 14 }}>
<div
key={"basics" + index}
style={{ marginTop: 14 }}
>
<span
style={{
width: 150,
@ -243,8 +314,10 @@ function SideSheets(props) {
>
{item.name}
</span>
<span style={{ fontWeight: "600", color: " #34383E" }}>
{item.value}
<span
style={{ fontWeight: "600", color: " #34383E" }}
>
{nvrDetails[item.key]}
</span>
</div>
);
@ -269,8 +342,23 @@ function SideSheets(props) {
>
{item.name}
</span>
<span style={{ fontWeight: "600", color: " #34383E" }}>
{item.value}
<span
style={{ fontWeight: "600", color: " #34383E" }}
>
{item.key == "type"
? type.find((v) => v.key == nvrDetails.type)
.name
: item.key == "venderId"
? venderList.find(
(v) => v.id == nvrDetails.venderId
).name
: item.key == "createUser"
? nvrDetails.createUser.namePresent
: item.key == "createTime"
? moment(nvrDetails.createTime).format(
"YYYY-MM-DD HH:MM:SS"
)
: nvrDetails[item.key]}
</span>
</div>
);
@ -316,7 +404,9 @@ function SideSheets(props) {
{item.name}
<img
src={`/assets/images/background/${
clickStyle == item.name ? "copy2" : "copy1"
clickStyle == item.name
? "copy2"
: "copy1"
}.png`}
style={{
paddingBottom: 10,
@ -350,9 +440,12 @@ function SideSheets(props) {
{item.name}
</span>
<span
style={{ fontWeight: "600", color: " #34383E" }}
style={{
fontWeight: "600",
color: " #34383E",
}}
>
{item.value}
{nvrDetails[item.key]}
</span>
</div>
);
@ -363,7 +456,7 @@ function SideSheets(props) {
}
///
if (index == 2) {
(cameraSetup ? item.recovery : item.CameraInformation).map(
(cameraSetup ? item.recovery : nvrDetails.camera).map(
(item, index) => {
if (cameraSetup) {
str.push(
@ -389,7 +482,9 @@ function SideSheets(props) {
>
<img
src={`/assets/images/background/${
clickStyle == item.name ? "store2" : "store1"
clickStyle == item.name
? "store2"
: "store1"
}.png`}
style={{ margin: "20px 0 8px 0" }}
/>
@ -397,7 +492,9 @@ function SideSheets(props) {
{item.name}
<img
src={`/assets/images/background/${
clickStyle == item.name ? "copy2" : "copy1"
clickStyle == item.name
? "copy2"
: "copy1"
}.png`}
style={{
paddingBottom: 10,
@ -439,14 +536,14 @@ function SideSheets(props) {
display: "inline-block",
}}
>
{item.name}
{item.channelName}
</div>
</div>
<p style={{ margin: "16px 0 0 30px " }}>
{item.value1}
<p style={{ margin: "16px 0 0 32px " }}>
{item.id}
</p>
<p style={{ margin: "16px 0 20px 30px " }}>
{item.value2}
<p style={{ margin: "16px 0 20px 32px " }}>
{item.name}
</p>
</div>
);
@ -458,11 +555,23 @@ function SideSheets(props) {
return str;
}
)}
)
: ""}
</div>
</TabPane>
</Tabs>
</SideSheet>
);
}
export default SideSheets;
function mapStateToProps(state) {
const { auth, global, members } = state;
return {
loading: members.isRequesting,
user: auth.user,
actions: global.actions,
global: global,
members: members.data,
};
}
export default connect(mapStateToProps)(SideSheets);

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

@ -1,6 +1,16 @@
import React, { useState, useEffect, useRef } from "react";
import { connect } from "react-redux";
import { Button, Form, Input, Row, Table, Pagination } from "@douyinfe/semi-ui";
import moment from "moment";
import {
Button,
Form,
Input,
Row,
Table,
Pagination,
Popover,
Tag,
} from "@douyinfe/semi-ui";
import "../style.less";
import CameraModal from "../components/cameraModal";
import NvrModal from "../components/nvrModal";
@ -8,7 +18,7 @@ import Setup from "../components/setup";
import SideSheets from "../components/sideSheet";
const CameraHeader = (props) => {
const { dispatch, actions, user, loading, equipmentWarehouseNvr } = props;
const { dispatch, actions, user, loading, equipmentWarehouseCamera } = props;
const [cameraModal, setCameraModal] = useState(false);
const [modalName, setModalName] = useState("");
const [setup, setSetup] = useState(false);
@ -17,6 +27,8 @@ const CameraHeader = (props) => {
const [setupp, setSetupp] = useState([]);
const [venderList, setvenderList] = useState([]); //
const [query, setQuery] = useState({ limit: 10, page: 0 });
const [rowId, setRowId] = useState(); //id
const { equipmentWarehouse } = actions;
const api = useRef();
const CAMERAS = "cameras";
@ -24,6 +36,7 @@ const CameraHeader = (props) => {
useEffect(() => {
dispatch(actions.equipmentWarehouse.getVender()).then((res) => {
setvenderList(res.payload.data);
attribute(res.payload.data);
});
//
localStorage.getItem(CAMERAS) == null
@ -32,15 +45,14 @@ const CameraHeader = (props) => {
JSON.stringify(["state", "type", "manufactor"])
)
: "";
attribute();
}, []);
useEffect(() => {
equipmentGetNvr();
}, [query]);
equipmentGetCamera();
}, []);
function equipmentGetNvr() {
dispatch(equipmentWarehouse.getNvr(query));
function equipmentGetCamera() {
dispatch(equipmentWarehouse.getCamera(query));
}
const columns = [
{
@ -76,7 +88,6 @@ const CameraHeader = (props) => {
width: "20%",
dataIndex: "",
render: (_, row) => {
// console.log(row);
return (
<div style={{ display: "flex" }}>
<Button theme="borderless">
@ -94,12 +105,27 @@ const CameraHeader = (props) => {
onClick={() => {
setSideSheet(true);
setcameraSetup(true);
setRowId(row.id);
console.log(row.id);
}}
>
查看
</Button>
<Button theme="borderless">播放</Button>
<Button theme="borderless">禁用</Button>
<Button
theme="borderless"
onClick={() => {
console.log(row.id,!row.forbidden);
dispatch(
equipmentWarehouse.putForbidden({
cameraId: row.id,
forbidden: !row.forbidden,
})
);
}}
>
{row.forbidden ? "启用" : "禁用"}
</Button>
<Button
theme="borderless"
onClick={() => {
@ -116,7 +142,7 @@ const CameraHeader = (props) => {
];
//
function attribute() {
function attribute(data) {
const arr = localStorage.getItem(CAMERAS)
? JSON.parse(localStorage.getItem(CAMERAS))
: [];
@ -126,10 +152,14 @@ const CameraHeader = (props) => {
title: "设备厂家",
dataIndex: "venderId",
key: "manufactor",
render: (_, r, index) => {
let manufactorName = data.find((item) => item.id == r.venderId);
return manufactorName ? manufactorName.name : "";
},
},
{
title: "接入类型",
dataIndex: "createUserId",
dataIndex: "cameraAbility.ability",
key: "type",
},
{
@ -144,13 +174,16 @@ const CameraHeader = (props) => {
},
{
title: "内存卡信息",
dataIndex: "size",
dataIndex: "memoryCard",
key: "memoryCard",
},
{
title: "设备创建时间",
dataIndex: "createTime",
key: "time",
render: (text, r, index) => {
return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS");
},
},
{
title: "设备添加账号",
@ -161,26 +194,57 @@ const CameraHeader = (props) => {
title: "项目名称",
dataIndex: "updateTime",
key: "name",
render: (_, r, index) => {
return r.station.map((item, index) =>
station(
item.structure.projects[0].name,
item.structure.projects,
"name"
)
);
},
},
{
title: "pcode",
dataIndex: "updateTime",
key: "pcode",
render: (_, r, index) => {
return r.station.map((item, index) =>
station(
item.structure.projects[0].url,
item.structure.projects,
"url"
)
);
},
},
{
title: "结构物",
dataIndex: "updateTime",
key: "structure",
render: (_, r, index) => {
return station(
r.station[0].structure.name,
r.station,
"structure.name"
);
},
},
{
title: "测点",
dataIndex: "updateTime",
key: "measuringPoint",
render: (_, r, index) => {
return station(r.station[0].name, r.station, "name");
},
},
{
title: "监测因素",
dataIndex: "updateTime",
key: "factor",
render: (_, r, index) => {
return station(r.station[0].factor.name, r.station, "factor.name");
},
},
];
for (let i = 0; i < arr.length; i++) {
@ -192,6 +256,41 @@ const CameraHeader = (props) => {
setSetupp(columns);
}
//station
function station(first, whole, name) {
return (
<Popover
key="updateTime"
position="top"
content={
<article style={{ padding: 12 }}>
{whole.map((v, index) => {
let names = "";
switch (name) {
case "name":
names = v[name];
break;
case "url":
names = v[name];
break;
case "structure.name":
names = v.structure.name;
break;
case "factor.name":
names = v.factor.name;
break;
default:
break;
}
return <div key={index}>{names}</div>;
})}
</article>
}
>
<Tag>{first}...</Tag>
</Popover>
);
}
//
const screen = {
width: 193,
@ -297,6 +396,7 @@ const CameraHeader = (props) => {
field="type1"
style={screen}
placeholder="全部"
showClear
>
<Form.Select.Option value="12">111</Form.Select.Option>
<Form.Select.Option value="11">111111</Form.Select.Option>
@ -307,6 +407,7 @@ const CameraHeader = (props) => {
style={screen}
field="venderId"
placeholder="全部"
showClear
>
{venderList.map((item) => {
return (
@ -322,6 +423,7 @@ const CameraHeader = (props) => {
field="type2"
style={screen}
placeholder="全部"
showClear
>
<Form.Select.Option value="yes">在线</Form.Select.Option>
<Form.Select.Option value="no">离线</Form.Select.Option>
@ -332,6 +434,7 @@ const CameraHeader = (props) => {
field="type3"
style={screen}
placeholder="全部"
showClear
>
<Form.Select.Option value="智慧环保">
飞尚科技1
@ -372,7 +475,7 @@ const CameraHeader = (props) => {
})
);
});
console.log(equipmentWarehouseNvr.data);
console.log(equipmentWarehouseCamera.data);
}}
>
搜素
@ -453,7 +556,7 @@ const CameraHeader = (props) => {
</div>
<Table
columns={setupp}
dataSource={equipmentWarehouseNvr.data}
dataSource={equipmentWarehouseCamera.data}
bordered={false}
empty="暂无数据"
style={{
@ -469,11 +572,11 @@ const CameraHeader = (props) => {
}}
>
<span style={{ lineHeight: "30px" }}>
{equipmentWarehouseNvr.total}个设备
{equipmentWarehouseCamera.total}个设备
</span>
<Pagination
className="22"
total={equipmentWarehouseNvr.total}
total={equipmentWarehouseCamera.total}
showSizeChanger
currentPage={query.page + 1}
pageSizeOpts={[10, 20, 30, 40]}
@ -490,7 +593,7 @@ const CameraHeader = (props) => {
cameraSetup={cameraSetup}
close={() => {
setSetup(false);
attribute();
attribute(venderList);
setcameraSetup(false);
}}
/>
@ -501,6 +604,8 @@ const CameraHeader = (props) => {
{sideSheet ? (
<SideSheets
visible={true}
rowId={rowId}
venderList={venderList}
cameraSetup={cameraSetup}
close={() => {
setSideSheet(false);
@ -529,13 +634,13 @@ const CameraHeader = (props) => {
};
function mapStateToProps(state) {
const { auth, global, members, equipmentWarehouseNvr } = state;
const { auth, global, members, equipmentWarehouseCamera } = state;
return {
loading: members.isRequesting,
user: auth.user,
actions: global.actions,
members: members.data,
equipmentWarehouseNvr: equipmentWarehouseNvr.data || [],
equipmentWarehouseCamera: equipmentWarehouseCamera.data || [],
};
}

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

@ -14,27 +14,33 @@ const NvrHeader = (props) => {
const [sideSheet, setSideSheet] = useState(false);
const [setupp, setSetupp] = useState([]);
const [venderList, setvenderList] = useState([]); //
const [query, setQuery] = useState({ limit: 10, page: 0 });
const [query, setQuery] = useState({ limit: 10, page: 0 }); //
const [search, setearch] = useState({}); //
const [rowId, setRowId] = useState(); //id
const api = useRef();
const SETUPS = "setups";
useEffect(() => {
dispatch(actions.equipmentWarehouse.getVender()).then((res) => {
setvenderList(res.payload.data);
attribute(res.payload.data);
});
//
localStorage.getItem(SETUPS) == null
? localStorage.setItem(SETUPS, JSON.stringify(["a", "c", "d", "e"]))
? localStorage.setItem(
SETUPS,
JSON.stringify(["manufactor", "passageway", "port", "state"])
)
: "";
// ;
attribute();
}, []);
useEffect(() => {
equipmentGetNvr();
}, [query]);
}, [query, search]);
function equipmentGetNvr() {
dispatch(equipmentWarehouse.getNvr(query));
dispatch(equipmentWarehouse.getNvr({ ...query, ...search }));
}
const columns = [
{
@ -46,12 +52,12 @@ const NvrHeader = (props) => {
{
title: "设备名称",
dataIndex: "name",
render: (text, record, index) => {
render: (text, r, index) => {
return (
<div>
<span
style={{
backgroundColor: record.avatarBg,
backgroundColor: r.avatarBg,
width: "10px",
height: "10px",
borderRadius: "50%",
@ -59,7 +65,7 @@ const NvrHeader = (props) => {
marginRight: "10px",
}}
/>
{record.name}
{r.name}
</div>
);
},
@ -73,7 +79,6 @@ const NvrHeader = (props) => {
width: "20%",
dataIndex: "",
render: (_, row) => {
// console.log(row);
return (
<div style={{ display: "flex" }}>
<Button theme="borderless">
@ -90,6 +95,7 @@ const NvrHeader = (props) => {
theme="borderless"
onClick={() => {
setSideSheet(true);
setRowId(row.id);
}}
>
查看
@ -110,7 +116,7 @@ const NvrHeader = (props) => {
];
//
function attribute() {
function attribute(data) {
const arr = localStorage.getItem(SETUPS)
? JSON.parse(localStorage.getItem(SETUPS))
: [];
@ -119,50 +125,54 @@ const NvrHeader = (props) => {
{
title: "设备厂家",
dataIndex: "venderId",
key: "a",
key: "manufactor",
render: (_, r, index) => {
let manufactorName = data.find((item) => item.id == r.venderId);
return manufactorName ? manufactorName.name : "";
},
},
{
title: "添加账号",
dataIndex: "createUserId",
key: "b",
key: "accountNumber",
},
{
title: "通道数",
dataIndex: "channelCount",
key: "c",
key: "passageway",
},
{
title: "端口",
dataIndex: "port",
key: "d",
key: "port",
},
{
title: "设备状态",
dataIndex: "size",
key: "e",
key: "state",
},
{
title: "创建时间",
dataIndex: "createTime",
key: "f",
key: "time",
render: (text, r, index) => {
return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS");
},
},
{
title: "项目名称",
dataIndex: "size",
key: "g",
dataIndex: "",
key: "name",
},
{
title: "things名称",
dataIndex: "updateTime",
key: "h",
title: "pcode",
dataIndex: "",
key: "pcode",
},
{
title: "things数量",
dataIndex: "updateTime",
key: "i",
title: "结构物",
dataIndex: "",
key: "structure",
},
];
for (let i = 0; i < arr.length; i++) {
@ -269,7 +279,7 @@ const NvrHeader = (props) => {
>
<Form.Input
label="设备搜索:"
field="name"
field="keyword"
placeholder="请输入设备名称"
labelPosition="left"
style={screen}
@ -280,6 +290,7 @@ const NvrHeader = (props) => {
style={screen}
field="venderId"
placeholder="全部"
showClear
>
{venderList.map((item) => {
return (
@ -295,6 +306,7 @@ const NvrHeader = (props) => {
field="type2"
style={screen}
placeholder="全部"
showClear
>
<Form.Select.Option value="yes">在线</Form.Select.Option>
<Form.Select.Option value="no">离线</Form.Select.Option>
@ -305,6 +317,7 @@ const NvrHeader = (props) => {
field="type3"
style={screen}
placeholder="全部"
showClear
>
<Form.Select.Option value="智慧环保">
飞尚科技1
@ -333,18 +346,10 @@ const NvrHeader = (props) => {
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
);
})
);
api.current.validate().then((v) => {
setearch(v);
});
console.log(equipmentWarehouseNvr.data);
equipmentGetNvr();
}}
>
搜素
@ -459,7 +464,7 @@ const NvrHeader = (props) => {
SETUPS={SETUPS}
close={() => {
setSetup(false);
attribute();
attribute(venderList);
}}
/>
) : (
@ -469,6 +474,8 @@ const NvrHeader = (props) => {
{sideSheet ? (
<SideSheets
visible={true}
rowId={rowId}
venderList={venderList}
close={() => {
setSideSheet(false);
}}

6
code/VideoAccess-VCMP/web/client/src/utils/webapi.js

@ -13,6 +13,12 @@ export const ApiTable = {
getVender:'vender',
nvr:'nvr',
delNvr:'nvr/{nvrId}',
getNvrDetails:'nvr/detail/{nvrId}', //获取nvr详情
getCamera:"camera/project", // 获取摄像头列表
putForbidden:"camera/banned", //禁用摄像头
getCameraDetails:"camera/{cameraId}/detail", //获取摄像头详情
};
export const RouteTable = {

Loading…
Cancel
Save