Browse Source

级联摄像头的修改,表格项目信息

release_0.0.2
wenlele 3 years ago
parent
commit
4cb212cbcf
  1. 10
      code/VideoAccess-VCMP/web/client/src/components/reminderBox.jsx
  2. 12
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/camera.js
  3. 44
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx
  4. 12
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx
  5. 86
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
  6. 65
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx
  7. 1
      code/VideoAccess-VCMP/web/client/src/utils/webapi.js

10
code/VideoAccess-VCMP/web/client/src/components/reminderBox.jsx

@ -1,7 +1,7 @@
import { Button, Checkbox, Modal } from "@douyinfe/semi-ui"; import { Button, Checkbox, Modal } from "@douyinfe/semi-ui";
import React from "react"; import React from "react";
const ReminderBox = ({title, wait, toadd,visible,onOk}) => { const ReminderBox = ({ title, wait, toadd, visible, onOk }) => {
return ( return (
<Modal <Modal
title={ title={
@ -12,7 +12,7 @@ const ReminderBox = ({title, wait, toadd,visible,onOk}) => {
icon={ icon={
<img <img
src="../../assets/images/logo/figure.png" src="../../assets/images/logo/figure.png"
style={{ width: 50, height: 50 }} style={{ width: 40, height: 40 }}
/> />
} }
footer={ footer={
@ -32,11 +32,13 @@ const ReminderBox = ({title, wait, toadd,visible,onOk}) => {
</Checkbox> </Checkbox>
<div> <div>
<Button>{wait}</Button> <Button>{wait}</Button>
<Button theme="solid" onClick={onOk()}>{toadd}</Button> <Button theme="solid" onClick={() => {
onOk()
}}>{toadd}</Button>
</div> </div>
</div> </div>
} }
// visible={false} // visible={true}
visible={visible} visible={visible}
></Modal> ></Modal>
); );

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

@ -149,3 +149,15 @@ export function postAddCascade(data) {
msg: { option: "" }, //添加级联摄像头 msg: { option: "" }, //添加级联摄像头
}); });
} }
export function getParentCamera(query) {
return (dispatch) =>
basicAction({
type: "get",
dispatch: dispatch,
query,
actionType: "GET_PARENT_CASCADE",
url: `${ApiTable.getParentCamera}`,
msg: { option: "" }, //获取级联摄像头父级设备
});
}

44
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx

@ -8,7 +8,7 @@ import IpcCamera from "./ipcCamera";
import CascadeCamera from "./cascadeCamera"; import CascadeCamera from "./cascadeCamera";
import "./cameraModal.less"; import "./cameraModal.less";
function cameraModal(props) { function cameraModal (props) {
const { const {
dispatch, dispatch,
actions, actions,
@ -19,6 +19,8 @@ function cameraModal(props) {
CameraKind, CameraKind,
CameraAbility, CameraAbility,
cameraData, // cameraData, //
modify,
parentCamera
} = props; } = props;
const { equipmentWarehouse } = actions; const { equipmentWarehouse } = actions;
const fluoriteRef = useRef(); const fluoriteRef = useRef();
@ -29,6 +31,7 @@ function cameraModal(props) {
const [loadingTip, setloadingTip] = useState("获取中...请稍后..."); //loading tip const [loadingTip, setloadingTip] = useState("获取中...请稍后..."); //loading tip
const [okText, setokText] = useState("确定"); //oktext const [okText, setokText] = useState("确定"); //oktext
const [cancelText, setcancelText] = useState("取消"); //text const [cancelText, setcancelText] = useState("取消"); //text
const [clickNum, setclickNum] = useState( const [clickNum, setclickNum] = useState(
cameraData.type == "yingshi" cameraData.type == "yingshi"
? 1 ? 1
@ -74,7 +77,7 @@ function cameraModal(props) {
}, },
]; ];
const [showcameraList, setcameraList] = useState(cameraList.slice(0, 3)); // const [showcameraList, setcameraList] = useState(cameraList.slice(0, 3)); //
function handleOk() { function handleOk () {
// //
if (clickNum == 1) { if (clickNum == 1) {
// //
@ -137,26 +140,33 @@ function cameraModal(props) {
}); });
} }
} }
function handleAfterClose() { function handleAfterClose () {
// //
} }
function handleCancel() { function handleCancel () {
onReset(); onReset();
// //
} }
function handleChoose(id) { function handleChoose (id) {
// //
if (!modify) {
setclickNum(id); setclickNum(id);
} }
function turnLift() {
}
function turnLift () {
// //
if (!modify) {
setcameraList(cameraList.slice(0, 3)); setcameraList(cameraList.slice(0, 3));
} }
function turnRight() { }
function turnRight () {
// //
if (!modify) {
setcameraList(cameraList.slice(1, 4)); setcameraList(cameraList.slice(1, 4));
} }
function onReset() { }
function onReset () {
if (clickNum == 1) { if (clickNum == 1) {
fluoriteRef.current.resetFluoriteCamera(); fluoriteRef.current.resetFluoriteCamera();
fluoriteRef.current.toempty(); fluoriteRef.current.toempty();
@ -174,7 +184,7 @@ function cameraModal(props) {
} }
} }
// //
function reset() { function reset () {
if (clickNum == 1) { if (clickNum == 1) {
fluoriteRef.current.resetFluoriteCamera(); fluoriteRef.current.resetFluoriteCamera();
fluoriteRef.current.toempty(); fluoriteRef.current.toempty();
@ -188,7 +198,7 @@ function cameraModal(props) {
} }
} }
function toTest() { function toTest () {
if (clickNum == 1) { if (clickNum == 1) {
fluoriteRef.current fluoriteRef.current
.fluoriteCameraForm() .fluoriteCameraForm()
@ -327,6 +337,14 @@ function cameraModal(props) {
}} }}
onClick={() => handleChoose(item.id)} onClick={() => handleChoose(item.id)}
> >
{modify ? item.id == clickNum ? "" : <div style={{
width: 266,
height: 146,
borderRadius: 3,
backgroundColor: "rgba(151, 151, 151, 0.1)",
position: "absolute",
top: 0,
}}></div> : ""}
<div <div
style={{ style={{
marginTop: 5, marginTop: 5,
@ -377,7 +395,9 @@ function cameraModal(props) {
"" ""
)} )}
</div> </div>
))} ))}
</div> </div>
<IconChevronRight <IconChevronRight
style={{ style={{
@ -480,7 +500,7 @@ function cameraModal(props) {
cameraData={cameraData} cameraData={cameraData}
/> />
) : ( ) : (
<CascadeCamera dRef={cascadeRef} cameraData={cameraData} /> <CascadeCamera dRef={cascadeRef} cameraData={cameraData} parentCamera={parentCamera} />
)} )}
</div> </div>
</Spin> </Spin>
@ -488,7 +508,7 @@ function cameraModal(props) {
</> </>
); );
} }
function mapStateToProps(state) { function mapStateToProps (state) {
const { auth, global, members, CameraKind, CameraAbility } = state; const { auth, global, members, CameraKind, CameraAbility } = state;
return { return {
loading: members.isRequesting, loading: members.isRequesting,

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

@ -3,16 +3,16 @@ import { connect } from "react-redux";
import { Form, Row, Col } from "@douyinfe/semi-ui"; import { Form, Row, Col } from "@douyinfe/semi-ui";
import "./cameraModal.less"; import "./cameraModal.less";
function cascadeCamera({ dRef, dispatch, actions ,cameraData}) { function cascadeCamera ({ dRef, dispatch, actions, cameraData ,parentCamera}) {
const form = useRef(); const form = useRef();
const { equipmentWarehouse } = actions; const { equipmentWarehouse } = actions;
const [sip, setSip] = useState([]); const [sip, setSip] = useState([]);
useEffect(() => { useEffect(() => {
dispatch(equipmentWarehouse.getCascadeSIP()).then((res) => { dispatch(equipmentWarehouse.getCascadeSIP()).then((res) => {
console.log(res)
setSip(res.payload.data); setSip(res.payload.data);
}); });
}, []); }, []);
// //
@ -71,7 +71,7 @@ function cascadeCamera({ dRef, dispatch, actions ,cameraData}) {
<Form.Input <Form.Input
field="externalDomain" field="externalDomain"
label="外域名称:" label="外域名称:"
initValue={cameraData.externalDomain||""}v initValue={cameraData.externalDomain || ""} v
placeholder="请输入外域名称" placeholder="请输入外域名称"
style={{ width: 307 }} style={{ width: 307 }}
rules={[{ required: true, message: "请输入外域名称" }]} rules={[{ required: true, message: "请输入外域名称" }]}
@ -81,7 +81,7 @@ function cascadeCamera({ dRef, dispatch, actions ,cameraData}) {
<Form.Select <Form.Select
label="级联方式:" label="级联方式:"
field="cascadeType" field="cascadeType"
initValue={cameraData.cascadeType||"上级域"} initValue={cameraData.cascadeType || "上级域"}
style={{ width: 307 }} style={{ width: 307 }}
rules={[{ required: true, message: "请选择输入级联方式" }]} rules={[{ required: true, message: "请选择输入级联方式" }]}
> >
@ -94,7 +94,7 @@ function cascadeCamera({ dRef, dispatch, actions ,cameraData}) {
<Form.Select <Form.Select
label="SIP编号:" label="SIP编号:"
field="sip" field="sip"
initValue={cameraData.cascadeType||""} initValue={parentCamera || ""}
placeholder="请选择SIP编号" placeholder="请选择SIP编号"
style={{ width: 307 }} style={{ width: 307 }}
rules={[{ required: true, message: "请选择SIP编号" }]} rules={[{ required: true, message: "请选择SIP编号" }]}
@ -111,7 +111,7 @@ function cascadeCamera({ dRef, dispatch, actions ,cameraData}) {
</> </>
); );
} }
function mapStateToProps(state) { function mapStateToProps (state) {
const { auth, global, members } = state; const { auth, global, members } = state;
return { return {
loading: members.isRequesting, loading: members.isRequesting,

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

@ -35,6 +35,8 @@ const CameraHeader = (props) => {
const [search, setearch] = useState({}); // const [search, setearch] = useState({}); //
const [rowId, setRowId] = useState(); //id const [rowId, setRowId] = useState(); //id
const [cameraData, setCameraData] = useState({}); // const [cameraData, setCameraData] = useState({}); //
const [modify, setModify] = useState(false); //
const [parentCamera, setParentCamera] = useState(""); //
const { equipmentWarehouse } = actions; const { equipmentWarehouse } = actions;
const api = useRef(); const api = useRef();
const searchb = useRef(search) const searchb = useRef(search)
@ -42,6 +44,8 @@ const CameraHeader = (props) => {
const CAMERAS = "cameras"; const CAMERAS = "cameras";
useEffect(() => { useEffect(() => {
console.log(props)
dispatch(actions.equipmentWarehouse.getVender()).then((res) => { dispatch(actions.equipmentWarehouse.getVender()).then((res) => {
setvenderList(res.payload.data); setvenderList(res.payload.data);
attribute(res.payload.data); attribute(res.payload.data);
@ -53,7 +57,6 @@ const CameraHeader = (props) => {
JSON.stringify(["state", "type", "manufactor"]) JSON.stringify(["state", "type", "manufactor"])
) )
: ""; : "";
console.log(equipmentWarehouseCamera);
}, []); }, []);
useEffect(() => { useEffect(() => {
@ -89,14 +92,14 @@ const CameraHeader = (props) => {
} else { } else {
setearch({ ...searchb.current, externalDomain: row.externalDomain }) setearch({ ...searchb.current, externalDomain: row.externalDomain })
} }
deviceClickb.current=false deviceClickb.current = false
} else { } else {
if (row.type == "nvr") { if (row.type == "nvr") {
setearch({ ...searchb.current, nvrId: null }) setearch({ ...searchb.current, nvrId: null })
} else { } else {
setearch({ ...searchb.current, externalDomain: null }) setearch({ ...searchb.current, externalDomain: null })
} }
deviceClickb.current=true deviceClickb.current = true
} }
}} }}
> >
@ -118,8 +121,19 @@ const CameraHeader = (props) => {
<Button <Button
theme="borderless" theme="borderless"
onClick={() => { onClick={() => {
setCameraModal(true);
setCameraData(row); setCameraData(row);
if (row.type == "cascade") {
dispatch(equipmentWarehouse.getParentCamera({ cameraSerialNo: row.serialNo })).then((res) => {
setParentCamera(res.payload.data.sipip)
if (res.success) {
setCameraModal(true);
setModify(true)
}
})
} else {
setCameraModal(true);
setModify(true)
}
}} }}
> >
修改 修改
@ -290,15 +304,7 @@ const CameraHeader = (props) => {
render: (_, r, index) => { render: (_, r, index) => {
return r.station.length == 0 return r.station.length == 0
? "" ? ""
: r.station.map((item, index) => { : station(r, "name", _, "projects")
return item.structure.projects.length == 0
? ""
: station(
r.station[0].structure.projects[0].name,
item.structure.projects,
"name"
);
});
}, },
}, },
{ {
@ -308,15 +314,7 @@ const CameraHeader = (props) => {
render: (_, r, index) => { render: (_, r, index) => {
return r.station.length == 0 return r.station.length == 0
? "" ? ""
: r.station.map((item, index) => { : station(r, "url", _, "projects")
return item.structure.projects.length == 0
? ""
: station(
r.station[0].structure.projects[0].url,
item.structure.projects,
"url"
);
});
}, },
}, },
{ {
@ -326,7 +324,7 @@ const CameraHeader = (props) => {
render: (_, r, index) => { render: (_, r, index) => {
return r.station.length == 0 return r.station.length == 0
? "" ? ""
: station(r.station[0].structure.name, r.station, "structure.name"); : station(r, "name", r.station[0].structure.name, _, "structure")
}, },
}, },
{ {
@ -336,7 +334,7 @@ const CameraHeader = (props) => {
render: (_, r, index) => { render: (_, r, index) => {
return r.station.length == 0 return r.station.length == 0
? "" ? ""
: station(r.station[0].name, r.station, "name"); : station(r, "name", r.station[0].name, _, "point")
}, },
}, },
{ {
@ -346,7 +344,7 @@ const CameraHeader = (props) => {
render: (_, r, index) => { render: (_, r, index) => {
return r.station.length == 0 return r.station.length == 0
? "" ? ""
: station(r.station[0].factor.name, r.station, "factor.name"); : station(r, "name", r.station[0].factor.name)
}, },
}, },
]; ];
@ -360,39 +358,22 @@ const CameraHeader = (props) => {
} }
//station //station
function station (first, whole, name) { function station (r, name, data, projects, exhibition) {
return ( return <Popover
<Popover
key="updateTime" key="updateTime"
position="top" position="top"
content={ content={
<article style={{ padding: 12 }}> <article style={{ padding: 12 }}>
{whole.map((v, index) => { {projects == "projects" ?
let names = ""; r.station.map((v) => v.structure.projects.length == 0 ? "" : v.structure.projects.map((item, index) => <div key={index}>{item[name]}</div>))
switch (name) { : r.station.map((v, index) => <div key={index}>{exhibition == "structure" ? v.structure.name : exhibition == "point" ? v.name : v.factor.name}</div>)
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> </article>
} }
> >
<Tag>{first}...</Tag> <Tag>{projects == "projects" && r.station[0].structure.projects.length > 0 ? r.station[0].structure.projects[0][name] : data}...</Tag>
</Popover> </Popover>
);
} }
// //
const screen = { const screen = {
@ -724,10 +705,15 @@ const CameraHeader = (props) => {
visible={true} visible={true}
venderList={venderList} venderList={venderList}
cameraData={cameraData} cameraData={cameraData}
modify={modify}
parentCamera={parentCamera}
close={() => { close={() => {
setCameraModal(false); setCameraModal(false);
setCameraData({}); setCameraData({});
setModify(false)
setParentCamera("")
equipmentGetCamera(); equipmentGetCamera();
}} }}
modalName={modalName} modalName={modalName}
/> />
@ -735,7 +721,7 @@ const CameraHeader = (props) => {
"" ""
)} )}
{ {
<VideoPlayModal visible={true} /> // <VideoPlayModal visible={true} />
} }
</> </>
); );

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

@ -40,7 +40,7 @@ const NvrHeader = (props) => {
const [search, setearch] = useState({}); // const [search, setearch] = useState({}); //
const [rowId, setRowId] = useState(); //id const [rowId, setRowId] = useState(); //id
const [reminder, setReminder] = useState(true); // const [reminder, setReminder] = useState(false); //
const api = useRef(); const api = useRef();
const SETUPS = "setups"; const SETUPS = "setups";
@ -56,7 +56,6 @@ const NvrHeader = (props) => {
JSON.stringify(["manufactor", "passageway", "port", "state"]) JSON.stringify(["manufactor", "passageway", "port", "state"])
) )
: ""; : "";
// ;
}, []); }, []);
useEffect(() => { useEffect(() => {
@ -218,18 +217,9 @@ const NvrHeader = (props) => {
dataIndex: "", dataIndex: "",
key: "name", key: "name",
render: (_, r, index) => { render: (_, r, index) => {
console.log(r)
return r.station.length == 0 return r.station.length == 0
? "" ? ""
: r.station.map((item, index) => { : station(r, "name", "projects")
return item.structure.projects.length == 0
? ""
: station(
r.station[0].structure.projects[0].name,
item.structure.projects,
"name"
);
});
}, },
}, },
{ {
@ -239,15 +229,7 @@ const NvrHeader = (props) => {
render: (_, r, index) => { render: (_, r, index) => {
return r.station.length == 0 return r.station.length == 0
? "" ? ""
: r.station.map((item, index) => { : station(r, "url", "projects")
return item.structure.projects.length == 0
? ""
: station(
r.station[0].structure.projects[0].url,
item.structure.projects,
"url"
);
});
}, },
}, },
{ {
@ -257,7 +239,7 @@ const NvrHeader = (props) => {
render: (_, r, index) => { render: (_, r, index) => {
return r.station.length == 0 return r.station.length == 0
? "" ? ""
: station(r.station[0].structure.name, r.station, "structure.name"); : station(r, "name")
}, },
}, },
]; ];
@ -271,39 +253,22 @@ const NvrHeader = (props) => {
} }
//station //station
function station (first, whole, name) { function station (r, name, projects) {
return ( return <Popover
<Popover
key="updateTime" key="updateTime"
position="top" position="top"
content={ content={
<article style={{ padding: 12 }}> <article style={{ padding: 12 }}>
{whole.map((v, index) => { {projects == "projects" ?
let names = ""; r.station.map((v) => v.structure.projects.length == 0 ? "" : v.structure.projects.map((item, index) => <div key={index}>{item[name]}</div>))
switch (name) { : r.station.map((v, index) => <div key={index}>{v.structure[name]}</div>)
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> </article>
} }
> >
<Tag>{first}...</Tag> <Tag>{projects == "projects" ? r.station[0].structure.projects[0][name] : r.station[0].structure[name]}...</Tag>
</Popover> </Popover>
);
} }
// //
@ -621,16 +586,16 @@ const NvrHeader = (props) => {
) : ( ) : (
[] []
)} )}
{/* <ReminderBox <ReminderBox
title="是否继续添加NVR摄像头?" title="是否继续添加NVR摄像头?"
wait="再等等" wait="再等等"
toadd="去添加" toadd="去添加"
visible={reminder} visible={reminder}
onOk={()=>{ onOk={() => {
// dispatch(push('/equipmentWarehouse/camera')); dispatch(push('/equipmentWarehouse/camera/:addNvr=true'));
setReminder(false) setReminder(false)
}} }}
/> */} />
</div> </div>
</> </>
); );

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

@ -30,6 +30,7 @@ export const ApiTable = {
postCameraNvr: "camera/create/nvr", //记录NVR摄像头 postCameraNvr: "camera/create/nvr", //记录NVR摄像头
getCascadeSIP: "camera/sip_list/cascade", //获取级联摄像头sip列表 getCascadeSIP: "camera/sip_list/cascade", //获取级联摄像头sip列表
postAddCascade: "camera/create/cascade", //添加级联摄像头 postAddCascade: "camera/create/cascade", //添加级联摄像头
getParentCamera:"camera/cascade_device", //获取级联摄像头父级设备
}; };

Loading…
Cancel
Save