Browse Source

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

pull/3/head
yuan_yi 2 years ago
parent
commit
c61d69a720
  1. 5
      code/VideoAccess-VCMP/web/.vscode/extensions.json
  2. 5
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx
  3. 8
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx
  4. 463
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx
  5. 6
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
  6. 7
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx

5
code/VideoAccess-VCMP/web/.vscode/extensions.json

@ -0,0 +1,5 @@
{
"recommendations": [
"formulahendry.code-runner"
]
}

5
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx

@ -135,7 +135,10 @@ function nvrModal(props){
]}/>
</Col>
<Col span={24}>
<Form.Select label="设备厂家:" field='venderId' initValue={nvrData.venderId||''} placeholder='请选择设备厂家' style={{ width: 421 }}>
<Form.Select label="设备厂家:" field='venderId' initValue={nvrData.venderId||null} placeholder='请选择设备厂家' style={{ width: 421 }}
rules={[
{ required: true, message: '请选择设备厂家' }
]}>
{vender.map((item,index)=>(
<Form.Select.Option key={index} value={item.id}>{item.name}</Form.Select.Option>
))}

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

@ -24,12 +24,12 @@ function Setup(props) {
useEffect(() => {
//
const ISgetItem1 = localStorage.getItem(SETUPS);
const ISgetItem2 = localStorage.getItem(CAMERAS);
const nvrItem = localStorage.getItem(SETUPS);
const cameraItem = localStorage.getItem(CAMERAS);
if (cameraSetup) {
setCheck(ISgetItem2 ? JSON.parse(ISgetItem2) : []);
setCheck(cameraItem ? JSON.parse(cameraItem) : []);
} else {
setCheck(ISgetItem1 ? JSON.parse(ISgetItem1) : []);
setCheck(nvrItem ? JSON.parse(nvrItem) : []);
}
ischeck();
}, []);

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

@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react";
import { SideSheet, Tabs, TabPane } from "@douyinfe/semi-ui";
import { SideSheet, Tabs, TabPane, Button } from "@douyinfe/semi-ui";
import copy from "copy-to-clipboard";
function SideSheets(props) {
@ -19,25 +19,39 @@ function SideSheets(props) {
name: "项目名称",
a: "南昌县智慧环保",
b: "南昌县智慧环保",
c: "南昌市市政隧道综合管理平台cbj次哦爱吃此课程实地考察大检查的吃点【",
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 IFname = [
const information = {
nvr: [
{
name: "基础信息",
basics: [
{ name: "设备名称:", value: "消火栓呼呼呼呼" },
{ name: "设备编号:", value: "D50F2049010B" },
{ name: "接入方式:", value: "NJBJ858G68H" },
{ name: "厂商:", value: "哇哇哇哇哇" },
{ name: "添加账号:", value: "Superadmin" },
{ name: "添加时间:", value: "2022-09-09" },
{ name: "行政区别:", value: "江西省-南昌市-南昌县" },
{
name: "行政区别:",
value: "江西省-南昌市-南昌县",
difference: "difference",
},
{
name: "设备安装位置:",
value: "江西省南昌县小蓝经开区江西飞尚科技有限公司",
difference: "line",
},
],
},
{
name: "接入信息",
access: [
{ name: "SIP服务编号:", value: "1111111111" },
{ name: "SIP域:", value: "KGU876J87" },
{ name: "SIP端口号:", value: "KGU876J87" },
@ -47,14 +61,28 @@ function SideSheets(props) {
{ name: "注册密码:", value: "**********" },
{ name: "注册有效期::", value: "3600s" },
{ name: "接入识别模块:", value: "sssss" },
],
},
{
name: "摄像头信息",
CameraInformation: [
{
name: "通道1",
value1: "145641201564-1",
value2: "哦哦哦我我我喔噢喔喔我",
},
{ name: "通道2", value1: "145641201564-2", value2: "哦哦哦哦哦噢噢欧欧哦" },
];
const sewage = [
{
name: "通道2",
value1: "145641201564-2",
value2: "哦哦哦哦哦噢噢欧欧哦",
},
],
},
],
camera: [
{
name: "基础信息",
basics: [
{ name: "设备名称:", value: "消火栓呼呼呼呼" },
{ name: "SIP编号/设备编号:", value: "D50F2049010B" },
{ name: "接入方式:", value: "NJBJ858G68H" },
@ -64,80 +92,146 @@ function SideSheets(props) {
{
name: "设备安装位置:",
value: "江西省南昌县小蓝经开区江西飞尚科技有限公司",
difference: "line",
},
],
},
{
name: "复制直播地址",
liveBroadcast: [
{ name: "HLS地址", value: "" },
{ name: "FLV地址", value: "" },
{ name: "RTMP地址", value: "" },
{ name: "EZOPEN地址", value: "" },
{ name: "ONVIF地址", value: "" },
],
},
{
name: "复制回收地址",
recovery: [
{ name: "云储存地址", value: "" },
{ name: "本地储存地址", value: "" },
];
function pp() {
let str = [];
for (let i = 0; i < (cameraSetup ? sewage : IFname).length; i++) {
if (i === 0) {
str.push(
],
},
],
};
const styles = {
width: 180,
height: 64,
textAlign: "center",
background: "url(/assets/images/background/backGround.png)",
backgroundSize: "100% 100%",
padding: "12px 17px 12px 17px",
margin: "30px 0 0 10px",
lineHeight: "24px",
overflow: "hidden",
textOverflow: "ellipsis",
display: "-webkit-box",
WebkitLineClamp: "2",
WebkitBoxOrient: "vertical",
zIndex: 5,
};
useEffect(() => {}, []);
return (
<SideSheet
visible={visible}
title={cameraSetup ? "污水管理出出口" : "智慧设备NVR"}
style={{ background: "#F9FBFF" }}
size="large"
onCancel={() => {
close();
}}
>
<Tabs type="line">
<TabPane tab="项目信息" itemKey="1">
<div style={{ display: "flex", justifyContent: "space-evenly" }}>
{list.map((item, index) => {
return (
<div
key="Basic_information"
key={item.name}
style={{
fontWeight: "600",
color: "#1859C1",
margin: "15px 0 0 40px",
width: 200,
margin: "12px 8px",
}}
>
基础信息
</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",
lineHeight: "32px",
background: "#1859C1",
color: "#FFFFFF",
borderRadius: 3,
textAlign: "center",
}}
>
{cameraSetup ? "复制直播地址" : "接入信息"}
<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>
</div>
);
}
if (cameraSetup ? i == 12 : i == 17) {
})}
</div>
</TabPane>
<TabPane tab="设备信息" itemKey="2">
{(cameraSetup ? information.camera : information.nvr).map(
(item, index) => {
let str = [];
if (index > 0) {
str.push(
<div key="Camera_information">
<img
src="/assets/images/background/straightline.png"
alt="1"
key={"img" + index}
alt="无法显示"
style={{ width: 872, display: "block", marginTop: 24 }}
/>
);
}
str.push(
<div
key={"name" + index}
style={{
fontWeight: "600",
color: "#1859C1",
margin: "15px 0 0 40px",
margin: "15px 0 12px 40px",
}}
>
{cameraSetup ? "复制回收地址" : "摄像头信息"}
{item.name}
{cameraSetup ? (
index == 1 ? (
<div
style={{
display: "inline-block",
float: "right",
marginRight: 20,
}}
>
<Button style={{ marginRight: 20 }} theme="solid">
高清
</Button>
<Button>标清</Button>
</div>
) : (
""
)
) : (
""
)}
</div>
);
}
if (
cameraSetup ? 0 <= i && i < 6 : (0 <= i && i < 6) || (i > 7 && i <= 16)
) {
//
if (index == 0) {
item.basics.map((item, index) => {
if (item.difference == "line") {
str.push(
<div
key={i}
style={{ width: "50%", display: "inline-block", marginTop: 20 }}
>
<div key={"basics" + index} style={{ marginTop: 14 }}>
<span
style={{
width: 150,
@ -147,17 +241,23 @@ function SideSheets(props) {
color: "rgba(0, 0, 0, 0.45)",
}}
>
{(cameraSetup ? sewage : IFname)[i].name}
{item.name}
</span>
<span style={{ fontWeight: "600", color: " #34383E" }}>
{(cameraSetup ? sewage : IFname)[i].value}
{item.value}
</span>
</div>
);
}
if (cameraSetup ? i == 6 : i > 5 && i < 8) {
} else {
str.push(
<div key={i} style={{ marginTop: 14 }}>
<div
key={"basics" + index}
style={{
width: "50%",
display: "inline-block",
marginTop: 20,
}}
>
<span
style={{
width: 150,
@ -167,21 +267,26 @@ function SideSheets(props) {
color: "rgba(0, 0, 0, 0.45)",
}}
>
{(cameraSetup ? sewage : IFname)[i].name}
{item.name}
</span>
<span style={{ fontWeight: "600", color: " #34383E" }}>
{(cameraSetup ? sewage : IFname)[i].value}
{item.value}
</span>
</div>
);
}
if (cameraSetup ? i > 6 && i < 14 : i > 16) {
return str;
});
}
///
if (index == 1) {
(cameraSetup ? item.liveBroadcast : item.access).map(
(item, index) => {
if (cameraSetup) {
str.push(
<div
key={i}
style={
cameraSetup
? {
key={"liveBroadcast" + index}
style={{
width: 120,
height: 130,
display: "inline-block",
@ -189,70 +294,29 @@ function SideSheets(props) {
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);
color: clickStyle == item.name ? "white" : "",
background:
clickStyle == item.name ? "#1859C1" : "",
}}
onClick={() => {
copy(item.name);
// alert("");
setclickStyle(sewage[i].name);
}
: ""
}
>
<div
style={
cameraSetup
? {}
: {
padding: "8px 10px",
borderBottom: "1px solid rgba(151, 151, 151, 0.2)",
}
}
setclickStyle(item.name);
}}
>
<img
src={`/assets/images/background/${
cameraSetup
? i < 12
? clickStyle == sewage[i].name
clickStyle == item.name
? "sewage_camera2"
: "sewage_camera1"
: clickStyle == sewage[i].name
? "store2"
: "store1"
: "camera"
}.png`}
style={
cameraSetup ? { margin: "20px 0 8px 0" } : { marginRight: 10 }
}
style={{ margin: "20px 0 8px 0" }}
/>
<div
style={
cameraSetup
? {}
: {
display: "inline-block",
}
}
>
{cameraSetup ? (
<>
{sewage[i].name}
<div>
{item.name}
<img
src={`/assets/images/background/${
clickStyle == sewage[i].name ? "copy2" : "copy1"
clickStyle == item.name ? "copy2" : "copy1"
}.png`}
style={{
paddingBottom: 10,
@ -261,95 +325,140 @@ function SideSheets(props) {
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>
</>
)}
);
} else {
str.push(
<div
key={"access" + index}
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)",
}}
>
{item.name}
</span>
<span
style={{ fontWeight: "600", color: " #34383E" }}
>
{item.value}
</span>
</div>
);
}
}
return str;
}
const styles = {
width: 180,
height: 64,
);
}
///
if (index == 2) {
(cameraSetup ? item.recovery : item.CameraInformation).map(
(item, index) => {
if (cameraSetup) {
str.push(
<div
key={"liveBroadcast" + index}
style={{
width: 120,
height: 130,
display: "inline-block",
borderRadius: 4,
border: "1px solid #D9D9D9",
margin: "20px 0 0 40px",
textAlign: "center",
background: "url(/assets/images/background/backGround.png)",
backgroundSize: "100% 100%",
padding: "12px 17px 12px 17px",
margin: "30px 0 0 10px",
lineHeight: "24px",
overflow: "hidden",
textOverflow: "ellipsis",
display: "-webkit-box",
WebkitLineClamp: "2",
WebkitBoxOrient: "vertical",
zIndex: 5,
};
useEffect(() => {}, []);
return (
<SideSheet
visible={visible}
title={cameraSetup ? "污水管理出出口" : "智慧设备NVR"}
style={{ background: "#F9FBFF" }}
size="large"
onCancel={() => {
close();
color: clickStyle == item.name ? "white" : "",
background:
clickStyle == item.name ? "#1859C1" : "",
}}
onClick={() => {
copy(item.name);
// alert("");
setclickStyle(item.name);
}}
>
<Tabs type="line">
<TabPane tab="项目信息" itemKey="1">
<div style={{ display: "flex", justifyContent: "space-evenly" }}>
{list.map((item, index) => {
return (
<img
src={`/assets/images/background/${
clickStyle == item.name ? "store2" : "store1"
}.png`}
style={{ margin: "20px 0 8px 0" }}
/>
<div>
{item.name}
<img
src={`/assets/images/background/${
clickStyle == item.name ? "copy2" : "copy1"
}.png`}
style={{
paddingBottom: 10,
display: "inline-block",
width: 10,
height: 20,
}}
/>
</div>
</div>
);
} else {
str.push(
<div
key={item.name}
key={"access" + index}
style={{
width: 200,
margin: "12px 8px",
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",
}}
>
<div
style={{
lineHeight: "32px",
background: "#1859C1",
color: "#FFFFFF",
borderRadius: 3,
textAlign: "center",
padding: "8px 10px",
borderBottom:
"1px solid rgba(151, 151, 151, 0.2)",
}}
>
<img
src={`/assets/images/background/projectIcon${index}.png`}
src={`/assets/images/background/camera.png`}
style={{ marginRight: 10 }}
/>
<div
style={{
display: "inline-block",
}}
>
{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>
</div>
);
})}
<p style={{ margin: "16px 0 0 30px " }}>
{item.value1}
</p>
<p style={{ margin: "16px 0 20px 30px " }}>
{item.value2}
</p>
</div>
</TabPane>
<TabPane tab="设备信息" itemKey="2">
{pp()}
);
}
return str;
}
);
}
return str;
}
)}
</TabPane>
</Tabs>
</SideSheet>

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

@ -26,10 +26,12 @@ const CameraHeader = (props) => {
setvenderList(res.payload.data);
});
//
localStorage.setItem(
localStorage.getItem(CAMERAS) == null
? localStorage.setItem(
CAMERAS,
JSON.stringify(["state", "type", "manufactor"])
);
)
: "";
attribute();
}, []);

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

@ -23,10 +23,12 @@ const NvrHeader = (props) => {
setvenderList(res.payload.data);
});
//
localStorage.setItem(SETUPS, JSON.stringify(["a", "c", "d", "e"]));
localStorage.getItem(SETUPS) == null
? localStorage.setItem(SETUPS, JSON.stringify(["a", "c", "d", "e"]))
: "";
// ;
attribute();
}, []);
useEffect(() => {
equipmentGetNvr();
}, [query]);
@ -441,7 +443,6 @@ const NvrHeader = (props) => {
{equipmentWarehouseNvr.total}个设备
</span>
<Pagination
className="22"
total={equipmentWarehouseNvr.total}
showSizeChanger
currentPage={query.page + 1}

Loading…
Cancel
Save