free-sun
/
FS-IOT
15
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

表格设置和查询的修改

pull/3/head
wenlele 2 years ago
parent
64fa1bc28c
commit
70080015d7
5 changed files with 388 additions and 271 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      code/VideoAccess-VCMP/web/.vscode/extensions.json
  2. 8
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx
  3. 629
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx
  4. 10
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
  5. 7
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx

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

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

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

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

629
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react"; 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"; import copy from "copy-to-clipboard";
function SideSheets(props) { function SideSheets(props) {
@ -19,270 +19,102 @@ function SideSheets(props) {
name: "项目名称", name: "项目名称",
a: "南昌县智慧环保", a: "南昌县智慧环保",
b: "南昌县智慧环保", b: "南昌县智慧环保",
c: "南昌市市政隧道综合管理平台cbj次哦爱吃此课程实地考察大检查的吃点【", c: "南昌市市政隧道综合管理 哦哦哦哦哦 哦哦哦哦 哦哦哦哦 哦哦哦哦哦哦哦哦哦 哦",
d: "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" }, { 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 = {
{ name: "设备名称：", value: "消火栓呼呼呼呼" }, nvr: [
{ name: "设备编号：", value: "D50F2049010B" }, {
{ name: "接入方式：", value: "NJBJ858G68H" }, name: "基础信息",
{ name: "厂商：", value: "哇哇哇哇哇" }, basics: [
{ name: "添加账号：", value: "Superadmin" }, { name: "设备名称：", value: "消火栓呼呼呼呼" },
{ name: "添加时间：", value: "2022-09-09" }, { name: "设备编号：", value: "D50F2049010B" },
{ name: "行政区别：", value: "江西省-南昌市-南昌县" }, { name: "接入方式：", value: "NJBJ858G68H" },
{ { name: "厂商：", value: "哇哇哇哇哇" },
name: "设备安装位置：", { name: "添加账号：", value: "Superadmin" },
value: "江西省南昌县小蓝经开区江西飞尚科技有限公司", { name: "添加时间：", value: "2022-09-09" },
}, {
{ name: "SIP服务编号：", value: "1111111111" }, name: "行政区别：",
{ name: "SIP域：", value: "KGU876J87" }, value: "江西省-南昌市-南昌县",
{ name: "SIP端口号：", value: "KGU876J87" }, difference: "difference",
{ name: "通道数量：", value: "16通道" }, },
{ name: "心跳周期：", value: "3600s" }, {
{ name: "最大心跳次数：", value: "3次" }, name: "设备安装位置：",
{ name: "注册密码：", value: "**********" }, value: "江西省南昌县小蓝经开区江西飞尚科技有限公司",
{ name: "注册有效期：:", value: "3600s" }, difference: "line",
{ name: "接入识别模块：", value: "sssss" }, },
{ ],
name: "通道1", },
value1: "145641201564-1", {
value2: "哦哦哦我我我喔噢喔喔我", name: "接入信息",
}, access: [
{ name: "通道2", value1: "145641201564-2", value2: "哦哦哦哦哦噢噢欧欧哦" }, { name: "SIP服务编号：", value: "1111111111" },
]; { name: "SIP域：", value: "KGU876J87" },
const sewage = [ { name: "SIP端口号：", value: "KGU876J87" },
{ name: "设备名称：", value: "消火栓呼呼呼呼" }, { name: "通道数量：", value: "16通道" },
{ name: "SIP编号/设备编号：", value: "D50F2049010B" }, { name: "心跳周期：", value: "3600s" },
{ name: "接入方式：", value: "NJBJ858G68H" }, { name: "最大心跳次数：", value: "3次" },
{ name: "厂商：", value: "哇哇哇哇哇" }, { name: "注册密码：", value: "**********" },
{ name: "添加账号：", value: "Superadmin" }, { name: "注册有效期：:", value: "3600s" },
{ name: "添加时间：", value: "2022-09-09" }, { name: "接入识别模块：", value: "sssss" },
{ ],
name: "设备安装位置：", },
value: "江西省南昌县小蓝经开区江西飞尚科技有限公司", {
}, name: "摄像头信息",
{ name: "HLS地址", value: "" }, CameraInformation: [
{ name: "FLV地址", value: "" }, {
{ name: "RTMP地址", value: "" }, name: "通道1",
{ name: "EZOPEN地址", value: "" }, value1: "145641201564-1",
{ name: "ONVIF地址", value: "" }, value2: "哦哦哦我我我喔噢喔喔我",
{ name: "云储存地址", value: "" }, },
{ name: "本地储存地址", value: "" }, {
]; name: "通道2",
function pp() { value1: "145641201564-2",
let str = []; value2: "哦哦哦哦哦噢噢欧欧哦",
for (let i = 0; i < (cameraSetup ? sewage : IFname).length; i++) { },
if (i === 0) { ],
str.push( },
<div ],
key="Basic_information" camera: [
style={{ {
fontWeight: "600", name: "基础信息",
color: "#1859C1", basics: [
margin: "15px 0 0 40px", { name: "设备名称：", value: "消火栓呼呼呼呼" },
}} { name: "SIP编号/设备编号：", value: "D50F2049010B" },
> { name: "接入方式：", value: "NJBJ858G68H" },
基础信息 { name: "厂商：", value: "哇哇哇哇哇" },
</div> { name: "添加账号：", value: "Superadmin" },
); { name: "添加时间：", value: "2022-09-09" },
} {
if (cameraSetup ? i == 7 : i == 8) { name: "设备安装位置：",
str.push( value: "江西省南昌县小蓝经开区江西飞尚科技有限公司",
<div key="Access_information"> difference: "line",
<img },
src="/assets/images/background/straightline.png" ],
alt="1" },
style={{ width: 872, display: "block", marginTop: 24 }} {
/> name: "复制直播地址",
<div liveBroadcast: [
style={{ { name: "HLS地址", value: "" },
fontWeight: "600", { name: "FLV地址", value: "" },
color: "#1859C1", { name: "RTMP地址", value: "" },
margin: "15px 0 0 40px", { name: "EZOPEN地址", value: "" },
}} { name: "ONVIF地址", value: "" },
> ],
{cameraSetup ? "复制直播地址" : "接入信息"} },
</div> {
</div> name: "复制回收地址",
); recovery: [
} { name: "云储存地址", value: "" },
if (cameraSetup ? i == 12 : i == 17) { { name: "本地储存地址", value: "" },
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 = { const styles = {
width: 180, width: 180,
height: 64, height: 64,
@ -349,7 +181,284 @@ function SideSheets(props) {
</div> </div>
</TabPane> </TabPane>
<TabPane tab="设备信息" itemKey="2"> <TabPane tab="设备信息" itemKey="2">
{pp()} {(cameraSetup ? information.camera : information.nvr).map(
(item, index) => {
let str = [];
if (index > 0) {
str.push(
<img
src="/assets/images/background/straightline.png"
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 12px 40px",
}}
>
{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 (index == 0) {
item.basics.map((item, index) => {
if (item.difference == "line") {
str.push(
<div key={"basics" + index} style={{ marginTop: 14 }}>
<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>
);
} else {
str.push(
<div
key={"basics" + 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;
});
}
//接入信息/复制直播地址
if (index == 1) {
(cameraSetup ? item.liveBroadcast : item.access).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",
color: clickStyle == item.name ? "white" : "",
background:
clickStyle == item.name ? "#1859C1" : "",
}}
onClick={() => {
copy(item.name);
// alert("复制成功");
setclickStyle(item.name);
}}
>
<img
src={`/assets/images/background/${
clickStyle == item.name
? "sewage_camera2"
: "sewage_camera1"
}.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={"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;
}
);
}
//摄像头信息/复制回收地址
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",
color: clickStyle == item.name ? "white" : "",
background:
clickStyle == item.name ? "#1859C1" : "",
}}
onClick={() => {
copy(item.name);
// alert("复制成功");
setclickStyle(item.name);
}}
>
<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={"access" + index}
style={{
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={{
padding: "8px 10px",
borderBottom:
"1px solid rgba(151, 151, 151, 0.2)",
}}
>
<img
src={`/assets/images/background/camera.png`}
style={{ marginRight: 10 }}
/>
<div
style={{
display: "inline-block",
}}
>
{item.name}
</div>
</div>
<p style={{ margin: "16px 0 0 30px " }}>
{item.value1}
</p>
<p style={{ margin: "16px 0 20px 30px " }}>
{item.value2}
</p>
</div>
);
}
return str;
}
);
}
return str;
}
)}
</TabPane> </TabPane>
</Tabs> </Tabs>
</SideSheet> </SideSheet>

10
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
View File

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

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

@ -23,10 +23,12 @@ const NvrHeader = (props) => {
setvenderList(res.payload.data); 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(); attribute();
}, []); }, []);
useEffect(() => { useEffect(() => {
equipmentGetNvr(); equipmentGetNvr();
}, [query]); }, [query]);
@ -441,7 +443,6 @@ const NvrHeader = (props) => {
共{equipmentWarehouseNvr.total}个设备 共{equipmentWarehouseNvr.total}个设备
</span> </span>
<Pagination <Pagination
className="22"
total={equipmentWarehouseNvr.total} total={equipmentWarehouseNvr.total}
showSizeChanger showSizeChanger
currentPage={query.page + 1} currentPage={query.page + 1}

Write Preview
Loading…
Cancel
Save