Browse Source

表格设备名称的条件搜索

release_0.0.2
wenlele 2 years ago
parent
commit
53515f4a3d
  1. 4
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx
  2. 941
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx
  3. 10
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx
  4. 1088
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx
  5. 46
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
  6. 1171
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx

4
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx

@ -99,8 +99,8 @@ function cascadeCamera({ dRef, dispatch, actions }) {
rules={[{ required: true, message: "请选择SIP编号" }]}
>
{sip.map((item, index) => (
<Form.Select.Option key={index} value={item.streamid}>
{item.streamid}
<Form.Select.Option key={index} value={item.sipip}>
{item.sipip}
</Form.Select.Option>
))}
</Form.Select>

941
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx

@ -2,484 +2,483 @@ import React, { useState, useRef, useEffect, useImperativeHandle } from "react";
import { connect } from "react-redux";
import { Form, Row, Col } from "@douyinfe/semi-ui";
import "./cameraModal.less";
function fluoriteCamera({ cRef, CameraKind, CameraAbility, cameraData }) {
const { TextArea } = Form;
const form = useRef();
const [cloud, setcloud] = useState(""); //
const [voice, setvoice] = useState(""); //
const [switching, setSwitching] = useState(""); //
const [memoryList, setMemoryList] = useState([
{
id: 1,
value: "8g",
},
{
id: 2,
value: "16g",
},
{
id: 3,
value: "32g",
},
{
id: 4,
value: "64g",
},
{
id: 5,
value: "128g",
},
{
id: 6,
value: "256g",
},
{
id: 7,
value: ">256g",
},
]); //
function fluoriteCamera ({ cRef, CameraKind, CameraAbility, cameraData }) {
const { TextArea } = Form;
const form = useRef();
const [cloud, setcloud] = useState(""); //
const [voice, setvoice] = useState(""); //
const [switching, setSwitching] = useState(""); //
const [memoryList, setMemoryList] = useState([
{
id: 1,
value: "8g",
},
{
id: 2,
value: "16g",
},
{
id: 3,
value: "32g",
},
{
id: 4,
value: "64g",
},
{
id: 5,
value: "128g",
},
{
id: 6,
value: "256g",
},
{
id: 7,
value: ">256g",
},
]); //
useEffect(() => {
setcloud(cameraData.cloudControl || "");
setvoice(cameraData.voice || "");
setSwitching(cameraData.highDefinition || "");
}, []);
function handleLocation() {
//
window.open("https://lbs.amap.com/tools/picker", "_blank");
}
function positionForm(val) {
//
let zz = /^(-?\d+)(\.\d+)?$/;
if (!val) {
return "请输入或拾取高德经纬度坐标";
} else if (val.split(",").length != 2) {
return "请输入格式为116.354169,39.835452的经纬度坐标";
} else if (!zz.test(val.split(",")[0])) {
return "只能填写数字";
} else if (!zz.test(val.split(",")[1])) {
return "只能填写数字";
} else {
return "";
useEffect(() => {
setcloud(cameraData.cloudControl || "");
setvoice(cameraData.voice || "");
setSwitching(cameraData.highDefinition || "");
}, []);
function handleLocation () {
//
window.open("https://lbs.amap.com/tools/picker", "_blank");
}
}
useImperativeHandle(cRef, () => ({
//
//
fluoriteCameraForm: form.current.validate,
resetFluoriteCamera: form.current.reset,
toempty: empty,
}));
function empty() {
setcloud("");
setvoice("");
setSwitching("");
}
return (
<>
<Form
labelPosition="left"
labelAlign="left"
labelWidth="115px"
onValueChange={(values) => console.log(values)}
initValues={{
name: cameraData ? cameraData.name : "",
highDefinition: cameraData ? cameraData.highDefinition : "",
memoryCard: cameraData ? cameraData.memoryCard : "",
position: cameraData.longitude
? `${cameraData.longitude},${cameraData.latitude}`
: "",
kindId: cameraData ? cameraData.kindId : "",
abilityId: cameraData
? cameraData.cameraAbilities
? cameraData.cameraAbilities.map((item) => item.id)
: ""
: "",
cloudControl: cameraData ? cameraData.cloudControl : "",
voice: cameraData ? cameraData.voice : "",
serialNo: cameraData ? cameraData.serialNo : "",
rtmp: cameraData ? cameraData.rtmp : "",
}}
getFormApi={(formApi) => (form.current = formApi)}
>
<Row>
<Col span={12}>
{/* 设备名称 */}
<Form.Input
field="name"
label="设备名称:"
placeholder="请输入设备名称、常用项目或位置定义"
style={{ width: 307 }}
rules={[{ required: true, message: "请输入设备名称" }]}
/>
{/* 高清切换 */}
<Form.RadioGroup
label="高清切换:"
field="highDefinition"
type="pureCard"
direction="horizontal"
style={{ padding: 0, paddingTop: 1, paddingBottom: 1 }}
rules={[{ required: true, message: "请选择高清切换" }]}
onChange={(checked) => {
if (checked.target.value == true) {
setSwitching(true);
} else {
setSwitching(false);
}
}}
>
<Form.Radio
value={true}
style={{
width: 58,
height: 30,
padding: 0,
margin: 0,
background: "#F9F9F9",
}}
>
<div
className="switching"
style={{
width: 58,
height: 30,
textAlign: "center",
lineHeight: "30px",
}}
>
支持
</div>
{switching == true ? (
<div
style={{ position: "absolute", top: "-2px", right: "-1px" }}
>
<img
src="/assets/images/background/formchoose.png"
alt="1"
/>
</div>
) : (
""
)}
</Form.Radio>
<Form.Radio
value={false}
style={{
width: 58,
height: 30,
padding: 0,
margin: 0,
marginLeft: 18,
background: "#F9F9F9",
function positionForm (val) {
//
let zz = /^(-?\d+)(\.\d+)?$/;
if (!val) {
return "请输入或拾取高德经纬度坐标";
} else if (val.split(",").length != 2) {
return "请输入格式为116.354169,39.835452的经纬度坐标";
} else if (!zz.test(val.split(",")[0])) {
return "只能填写数字";
} else if (!zz.test(val.split(",")[1])) {
return "只能填写数字";
} else {
return "";
}
}
useImperativeHandle(cRef, () => ({
//
//
fluoriteCameraForm: form.current.validate,
resetFluoriteCamera: form.current.reset,
toempty: empty,
}));
function empty () {
setcloud("");
setvoice("");
setSwitching("");
}
return (
<>
<Form
labelPosition="left"
labelAlign="left"
labelWidth="115px"
onValueChange={(values) => console.log(values)}
initValues={{
name: cameraData.name || "",
highDefinition: cameraData.highDefinition || "",
memoryCard: cameraData.memoryCard || "",
position: cameraData.longitude
? `${cameraData.longitude},${cameraData.latitude}`
: "",
kindId: cameraData.kindId || "",
abilityId: cameraData.cameraAbilities
? cameraData.cameraAbilities.map((item) => item.id)
: ""
,
cloudControl: cameraData.cloudControl || "",
voice: cameraData.voice || "",
serialNo: cameraData.serialNo || "",
rtmp: cameraData.rtmp || "",
}}
>
<div
className="switching"
style={{
width: 58,
height: 30,
textAlign: "center",
lineHeight: "30px",
}}
>
不支持
</div>
{switching == false && switching !== "" ? (
<div
style={{ position: "absolute", top: "-2px", right: "-1px" }}
>
<img
src="/assets/images/background/formchoose.png"
alt="1"
/>
</div>
) : (
""
)}
</Form.Radio>
</Form.RadioGroup>
{/* 内存 */}
<Form.Select
label="内存:"
field="memoryCard"
placeholder="未安装"
style={{ width: 307 }}
getFormApi={(formApi) => (form.current = formApi)}
>
{memoryList.map((item, index) => (
<Form.Select.Option key={index} value={item.value}>
{item.value}
</Form.Select.Option>
))}
</Form.Select>
{/* 安装位置 */}
<div style={{ display: "flex" }}>
<Form.Input
field="position"
label="安装位置:"
placeholder="请输入或拾取高德经纬度坐标"
style={{ width: 270 }}
validate={positionForm}
rules={[
{ required: true, message: "请输入或拾取高德经纬度坐标" },
]}
/>
<div
style={{
width: 32,
height: 32,
background: "#1859C1",
marginLeft: 4,
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
marginTop: 12,
borderRadius: 3 + "px",
}}
onClick={handleLocation}
>
<img
src="../../../assets/images/background/location.png"
width={16}
height={20}
/>
</div>
</div>
{/* 设备类型 */}
<Row>
<Col span={12}>
{/* 设备名称 */}
<Form.Input
field="name"
label="设备名称:"
placeholder="请输入设备名称、常用项目或位置定义"
style={{ width: 307 }}
rules={[{ required: true, message: "请输入设备名称" }]}
/>
{/* 高清切换 */}
<Form.RadioGroup
label="高清切换:"
field="highDefinition"
type="pureCard"
direction="horizontal"
style={{ padding: 0, paddingTop: 1, paddingBottom: 1 }}
rules={[{ required: true, message: "请选择高清切换" }]}
onChange={(checked) => {
if (checked.target.value == true) {
setSwitching(true);
} else {
setSwitching(false);
}
}}
>
<Form.Radio
value={true}
style={{
width: 58,
height: 30,
padding: 0,
margin: 0,
background: "#F9F9F9",
}}
>
<div
className="switching"
style={{
width: 58,
height: 30,
textAlign: "center",
lineHeight: "30px",
}}
>
支持
</div>
{switching == true ? (
<div
style={{ position: "absolute", top: "-2px", right: "-1px" }}
>
<img
src="/assets/images/background/formchoose.png"
alt="1"
/>
</div>
) : (
""
)}
</Form.Radio>
<Form.Radio
value={false}
style={{
width: 58,
height: 30,
padding: 0,
margin: 0,
marginLeft: 18,
background: "#F9F9F9",
}}
>
<div
className="switching"
style={{
width: 58,
height: 30,
textAlign: "center",
lineHeight: "30px",
}}
>
不支持
</div>
{switching == false && switching !== "" ? (
<div
style={{ position: "absolute", top: "-2px", right: "-1px" }}
>
<img
src="/assets/images/background/formchoose.png"
alt="1"
/>
</div>
) : (
""
)}
</Form.Radio>
</Form.RadioGroup>
{/* 内存 */}
<Form.Select
label="内存:"
field="memoryCard"
placeholder="未安装"
style={{ width: 307 }}
>
{memoryList.map((item, index) => (
<Form.Select.Option key={index} value={item.value}>
{item.value}
</Form.Select.Option>
))}
</Form.Select>
{/* 安装位置 */}
<div style={{ display: "flex" }}>
<Form.Input
field="position"
label="安装位置:"
placeholder="请输入或拾取高德经纬度坐标"
style={{ width: 270 }}
validate={positionForm}
rules={[
{ required: true, message: "请输入或拾取高德经纬度坐标" },
]}
/>
<div
style={{
width: 32,
height: 32,
background: "#1859C1",
marginLeft: 4,
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
marginTop: 12,
borderRadius: 3 + "px",
}}
onClick={handleLocation}
>
<img
src="../../../assets/images/background/location.png"
width={16}
height={20}
/>
</div>
</div>
{/* 设备类型 */}
<Form.Select
label="设备类型:"
field="kindId"
placeholder="请选择摄像头类型"
style={{ width: 180 }}
rules={[{ required: true, message: "请选择摄像头类型" }]}
>
{CameraKind.map((item, index) => (
<Form.Select.Option key={index} value={item.id}>
{item.kind}
</Form.Select.Option>
))}
</Form.Select>
<Form.Select
label="设备类型:"
field="kindId"
placeholder="请选择摄像头类型"
style={{ width: 180 }}
rules={[{ required: true, message: "请选择摄像头类型" }]}
>
{CameraKind.map((item, index) => (
<Form.Select.Option key={index} value={item.id}>
{item.kind}
</Form.Select.Option>
))}
</Form.Select>
<Form.Select
label="设备能力:"
multiple
maxTagCount={1}
field="abilityId"
placeholder="请选择能力"
style={{ width: 180 }}
rules={[{ required: true, message: "请选择能力" }]}
>
{CameraAbility.map((item, index) => (
<Form.Select.Option key={index} value={item.id}>
{item.ability}
</Form.Select.Option>
))}
</Form.Select>
</Col>
<Col span={12}>
{/* 云台支持 */}
<Form.RadioGroup
label="云台支持:"
field="cloudControl"
type="pureCard"
direction="horizontal"
style={{ padding: 0, paddingTop: 1, paddingBottom: 1 }}
rules={[{ required: true, message: "请选择云台支持" }]}
onChange={(checked) => {
if (checked.target.value == true) {
setcloud(true);
} else {
setcloud(false);
}
}}
>
<Form.Radio
value={true}
style={{
width: 58,
height: 30,
padding: 0,
margin: 0,
background: "#F9F9F9",
}}
>
<div
className="cloud"
style={{
width: 58,
height: 30,
textAlign: "center",
lineHeight: "30px",
}}
>
支持
</div>
{cloud == true ? (
<div
style={{ position: "absolute", top: "-2px", right: "-1px" }}
>
<img
src="/assets/images/background/formchoose.png"
alt="1"
/>
</div>
) : (
""
)}
</Form.Radio>
<Form.Radio
value={false}
style={{
width: 58,
height: 30,
padding: 0,
margin: 0,
marginLeft: 18,
background: "#F9F9F9",
}}
>
<div
className="cloud"
style={{
width: 58,
height: 30,
textAlign: "center",
lineHeight: "30px",
}}
>
不支持
</div>
{cloud == false && cloud !== "" ? (
<div
style={{ position: "absolute", top: "-2px", right: "-1px" }}
>
<img
src="/assets/images/background/formchoose.png"
alt="1"
/>
</div>
) : (
""
)}
</Form.Radio>
</Form.RadioGroup>
{/* 语音支持 */}
<Form.RadioGroup
// labelWidth= '76px'
label="语音支持:"
field="voice"
type="pureCard"
direction="horizontal"
style={{ padding: 0, paddingTop: 1, paddingBottom: 1 }}
onChange={(checked) => {
if (checked.target.value == true) {
setvoice(true);
} else {
setvoice(false);
}
}}
>
<Form.Radio
value={true}
style={{
width: 58,
height: 30,
padding: 0,
margin: 0,
background: "#F9F9F9",
}}
>
<div
className="voice"
style={{
width: 58,
height: 30,
textAlign: "center",
lineHeight: "30px",
}}
>
支持
</div>
{voice == true ? (
<div
style={{ position: "absolute", top: "-2px", right: "-1px" }}
>
<img
src="/assets/images/background/formchoose.png"
alt="1"
/>
</div>
) : (
""
)}
</Form.Radio>
<Form.Radio
value={false}
style={{
width: 58,
height: 30,
padding: 0,
margin: 0,
marginLeft: 18,
background: "#F9F9F9",
}}
>
<div
className="voice"
style={{
width: 58,
height: 30,
textAlign: "center",
lineHeight: "30px",
}}
>
不支持
</div>
{voice == false && voice !== "" ? (
<div
style={{ position: "absolute", top: "-2px", right: "-1px" }}
>
<img
src="/assets/images/background/formchoose.png"
alt="1"
/>
</div>
) : (
""
)}
</Form.Radio>
</Form.RadioGroup>
{/* 设备名称 */}
<Form.Input
field="serialNo"
label="设备序列号:"
placeholder="请输入设备序列号"
style={{ width: 307 }}
rules={[{ required: true, message: "请输入设备序列号" }]}
/>
{/* RTMP地址接入 */}
<TextArea
style={{ width: 320, height: 90 }}
field="rtmp"
label="RTMP地址接入:"
placeholder="请输入RTMP地址接入"
rules={[{ required: true, message: "请输入RTMP地址接入" }]}
/>
</Col>
</Row>
</Form>
</>
);
<Form.Select
label="设备能力:"
multiple
maxTagCount={1}
field="abilityId"
placeholder="请选择能力"
style={{ width: 180 }}
rules={[{ required: true, message: "请选择能力" }]}
>
{CameraAbility.map((item, index) => (
<Form.Select.Option key={index} value={item.id}>
{item.ability}
</Form.Select.Option>
))}
</Form.Select>
</Col>
<Col span={12}>
{/* 云台支持 */}
<Form.RadioGroup
label="云台支持:"
field="cloudControl"
type="pureCard"
direction="horizontal"
style={{ padding: 0, paddingTop: 1, paddingBottom: 1 }}
rules={[{ required: true, message: "请选择云台支持" }]}
onChange={(checked) => {
if (checked.target.value == true) {
setcloud(true);
} else {
setcloud(false);
}
}}
>
<Form.Radio
value={true}
style={{
width: 58,
height: 30,
padding: 0,
margin: 0,
background: "#F9F9F9",
}}
>
<div
className="cloud"
style={{
width: 58,
height: 30,
textAlign: "center",
lineHeight: "30px",
}}
>
支持
</div>
{cloud == true ? (
<div
style={{ position: "absolute", top: "-2px", right: "-1px" }}
>
<img
src="/assets/images/background/formchoose.png"
alt="1"
/>
</div>
) : (
""
)}
</Form.Radio>
<Form.Radio
value={false}
style={{
width: 58,
height: 30,
padding: 0,
margin: 0,
marginLeft: 18,
background: "#F9F9F9",
}}
>
<div
className="cloud"
style={{
width: 58,
height: 30,
textAlign: "center",
lineHeight: "30px",
}}
>
不支持
</div>
{cloud == false && cloud !== "" ? (
<div
style={{ position: "absolute", top: "-2px", right: "-1px" }}
>
<img
src="/assets/images/background/formchoose.png"
alt="1"
/>
</div>
) : (
""
)}
</Form.Radio>
</Form.RadioGroup>
{/* 语音支持 */}
<Form.RadioGroup
// labelWidth= '76px'
label="语音支持:"
field="voice"
type="pureCard"
direction="horizontal"
style={{ padding: 0, paddingTop: 1, paddingBottom: 1 }}
onChange={(checked) => {
if (checked.target.value == true) {
setvoice(true);
} else {
setvoice(false);
}
}}
>
<Form.Radio
value={true}
style={{
width: 58,
height: 30,
padding: 0,
margin: 0,
background: "#F9F9F9",
}}
>
<div
className="voice"
style={{
width: 58,
height: 30,
textAlign: "center",
lineHeight: "30px",
}}
>
支持
</div>
{voice == true ? (
<div
style={{ position: "absolute", top: "-2px", right: "-1px" }}
>
<img
src="/assets/images/background/formchoose.png"
alt="1"
/>
</div>
) : (
""
)}
</Form.Radio>
<Form.Radio
value={false}
style={{
width: 58,
height: 30,
padding: 0,
margin: 0,
marginLeft: 18,
background: "#F9F9F9",
}}
>
<div
className="voice"
style={{
width: 58,
height: 30,
textAlign: "center",
lineHeight: "30px",
}}
>
不支持
</div>
{voice == false && voice !== "" ? (
<div
style={{ position: "absolute", top: "-2px", right: "-1px" }}
>
<img
src="/assets/images/background/formchoose.png"
alt="1"
/>
</div>
) : (
""
)}
</Form.Radio>
</Form.RadioGroup>
{/* 设备名称 */}
<Form.Input
field="serialNo"
label="设备序列号:"
placeholder="请输入设备序列号"
style={{ width: 307 }}
rules={[{ required: true, message: "请输入设备序列号" }]}
/>
{/* RTMP地址接入 */}
<TextArea
style={{ width: 320, height: 90 }}
field="rtmp"
label="RTMP地址接入:"
placeholder="请输入RTMP地址接入"
rules={[{ required: true, message: "请输入RTMP地址接入" }]}
/>
</Col>
</Row>
</Form>
</>
);
}
function mapStateToProps(state) {
const { auth, global, members } = state;
return {
loading: members.isRequesting,
user: auth.user,
actions: global.actions,
members: members.data,
};
function mapStateToProps (state) {
const { auth, global, members } = state;
return {
loading: members.isRequesting,
user: auth.user,
actions: global.actions,
members: members.data,
};
}
export default connect(mapStateToProps)(fluoriteCamera);

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

@ -46,9 +46,7 @@ function nvrModal(props) {
form.current
.validate()
.then((values) => {
//
console.log(values);
//
let valuesObj = JSON.parse(JSON.stringify(values));
valuesObj.longitude = values.position.split(",")[0];
valuesObj.latitude = values.position.split(",")[1];
@ -56,7 +54,7 @@ function nvrModal(props) {
if (nvrData.id) {
valuesObj.id = nvrData.id;
}
var x = new moment();
var front = new moment(); //
setloading(true);
dispatch(
actions.equipmentWarehouse.getCheck({
@ -64,8 +62,8 @@ function nvrModal(props) {
})
).then((res) => {
console.log(res);
var y = new moment();
var duration = moment.duration(y.diff(x))._data.milliseconds;
var after = new moment(); //
var duration = moment.duration(after.diff(front))._data.milliseconds;
if (res.success) {
setTimeout(
() => {

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

File diff suppressed because it is too large

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

@ -35,6 +35,7 @@ const CameraHeader = (props) => {
const [search, setearch] = useState({}); //
const [rowId, setRowId] = useState(); //id
const [cameraData, setCameraData] = useState({}); //
const [deviceClick, setDeviceClick] = useState(false); //
const { equipmentWarehouse } = actions;
const api = useRef();
@ -63,31 +64,28 @@ const CameraHeader = (props) => {
dispatch(equipmentWarehouse.getCamera({ ...query, ...search }));
}
const equipmentStatus = { ON: "在线", ONLINE: "在线", OFF: "离线", Alarmed: "未知状态" }
const columns = [
{
title: "序号",
render: (text, record, index) => {
dataIndex: "",
render: (text, r, index) => {
return index + 1;
},
},
{
title: "设备名称",
dataIndex: "name",
render: (text, record, index) => {
render: (_, row) => {
return (
<div>
<span
style={{
backgroundColor: record.avatarBg,
width: "10px",
height: "10px",
borderRadius: "50%",
display: "inline-block",
marginRight: "10px",
}}
/>
{record.name}
</div>
{row.name}
<sapn style={{ color: "blue" }}
onClick={() =>device_(row)}
>
{row.type == "nvr" ? `@${row.nvr.name}` : row.type == "cascade" ? `@${row.externalDomain}` : ""}
</sapn>
</div >
);
},
},
@ -191,6 +189,26 @@ const CameraHeader = (props) => {
},
];
const device_ = (r) => {
console.log(deviceClick)
if (deviceClick) {
// if (r.type == "nvr") {
// console.log(search)
// setearch({ ...search, nvrId: r.nvr.id })
// } else {
// setearch({ ...search, externalDomain: r.externalDomain })
// }
setDeviceClick(false)
} else {
// if (r.type == "nvr") {
// setearch({ ...search, nvrId: null })
// } else {
// setearch({ ...search, externalDomain: null })
// }
setDeviceClick(true)
}
}
//
function attribute (data) {
const arr = localStorage.getItem(CAMERAS)

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

File diff suppressed because it is too large
Loading…
Cancel
Save