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

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

release_0.0.2
巴林闲侠 2 years ago
parent
6c646018a6 bccf70dec1
commit
faf23bb4f6
10 changed files with 544 additions and 451 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 39
      code/VideoAccess-VCMP/web/client/src/layout/components/sider/index.jsx
  2. 17
      code/VideoAccess-VCMP/web/client/src/layout/containers/layout/index.jsx
  3. 17
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx
  4. 54
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx
  5. 17
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx
  6. 806
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/ipcCamera.jsx
  7. 35
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrCamera.jsx
  8. 2
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx
  9. 6
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
  10. 2
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx

39
code/VideoAccess-VCMP/web/client/src/layout/components/sider/index.jsx
View File

@ -45,6 +45,7 @@ const Sider = props => {
}
}
}
console.log(nextItems)
setItems(nextItems)
const { selectedKeys, openKeys } = initKeys(
@ -74,16 +75,52 @@ const Sider = props => {
}
}, [])
useEffect(()=>{
console.log(1)
let pathname_ = pathname == '/' ? homePath : pathname
const initKeys = (items, lastKeys) => {
for (let it of items) {
if (it.to && it.to == pathname_) {
lastKeys.selectedKeys.push(it.itemKey)
return lastKeys
} else if (it.items && it.items.length) {
const preLastKeys = JSON.parse(JSON.stringify(lastKeys))
preLastKeys.openKeys.push(it.itemKey)
const nextKeys = initKeys(it.items, JSON.parse(JSON.stringify(preLastKeys)))
if (nextKeys.selectedKeys.length > preLastKeys.selectedKeys.length || nextKeys.openKeys.length > preLastKeys.openKeys.length) {
return nextKeys
}
}
}
return lastKeys
return {
selectedKeys: [],
openKeys: []
}
}
const lastSelectedKeys = localStorage.getItem('vcmp_selected_sider')
console.log(lastSelectedKeys)
if (lastSelectedKeys) {
setSelectedKeys(JSON.parse(lastSelectedKeys))
}
const lastOpenKeys = localStorage.getItem('vcmp_open_sider')
if (lastOpenKeys) {
setOpenKeys(JSON.parse(lastOpenKeys))
}
},[window.localStorage.vcmp_open_sider,window.localStorage.vcmp_selected_sider])
useEffect(() => {
if (scrollbar) {
scrollbar.update();
}
})
console.log(selectedKeys,openKeys)
return (
<div id={'page-slider'} style={{ height: clientHeight, position: 'relative' }}>
<Nav
style={{}}
// defaultOpenKeys={openKeys}
// defaultSelectedKeys ={selectedKeys}
selectedKeys={selectedKeys}
openKeys={openKeys}
onSelect={({ selectedItems, selectedKeys, }) => {

17
code/VideoAccess-VCMP/web/client/src/layout/containers/layout/index.jsx
View File

@ -86,9 +86,20 @@ const LayoutContainer = props => {
if (socket) {
socket.on('CAMERA_ONLINE', function (msg) {
console.info(msg);
});
socket.on('TEST', function (msg) {
console.info(msg);
if (msg.online=='ON') {
Notification.success({
title: 'Hi',
content: (<div><div>{msg.name}</div><div style={{marginTop:5}}>已上线。</div></div>),
duration: 2,
})
}
if (msg.online=='OFF') {
Notification.error({
title: 'Hi',
content: (<div><div>{msg.name}</div><div style={{marginTop:5}}>发生离线。</div></div>),
duration: 2,
})
}
});
return () => {
socket.off("CAMERA_ONLINE");

17
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx
View File

@ -35,6 +35,7 @@ function cameraModal (props) {
const [loadingTip, setloadingTip] = useState("测试中..."); //loading tip的值
const [okText, setokText] = useState("确定"); //ok弹框text 右边
const [cancelText, setcancelText] = useState("取消"); //取消弹框text 左边
const [ash, setAsh] = useState(false); //置灰
const testComplete = useRef(false) //测试完成
const [clickNum, setclickNum] = useState(
cameraData.type == "yingshi"
@ -72,6 +73,7 @@ function cameraModal (props) {
break
}
}
cameraData.id ? setAsh(true) : ""
}, []);
const cameraList = [
//循环摄像头列表
@ -540,6 +542,7 @@ function cameraModal (props) {
border: "1px solid #1859C1",
borderRadius: "3px",
color: "#1859C1",
backgroundColor: ash ? "" : "rgba(151, 151, 151, .2)",
display: "flex",
justifyContent: "center",
alignItems: "center",
@ -567,6 +570,8 @@ function cameraModal (props) {
CameraKind={CameraKind}
CameraAbility={CameraAbility}
cameraData={cameraData}
ashTrue={() => setAsh(true)}
ashFalse={() => setAsh(false)}
/>
</Spin>
) : clickNum == 2 ? (
@ -581,11 +586,21 @@ function cameraModal (props) {
CameraAbility={CameraAbility}
venderList={venderList}
cameraData={cameraData}
ashTrue={() => setAsh(true)}
ashFalse={() => setAsh(false)}
/>
</Spin>
) : (
<Spin tip={loadingTip} spinning={isloading}>
<CascadeCamera dRef={cascadeRef} cameraData={cameraData} parentCamera={parentCamera} testComplete={testComplete.current} close={()=>testComplete.current = false} />
<CascadeCamera
dRef={cascadeRef}
cameraData={cameraData}
parentCamera={parentCamera}
testComplete={testComplete.current}
close={() => testComplete.current = false}
ashTrue={() => setAsh(true)}
ashFalse={() => setAsh(false)}
/>
</Spin>
)}
</div>

54
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx
View File

@ -6,7 +6,7 @@ import "./cameraModal.less";
import PerfectScrollbar from "perfect-scrollbar";
let equipmentScrollbar;
function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, testComplete, close }) {
function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, testComplete, close, ashTrue, ashFalse }) {
const form = useRef();
const { equipmentWarehouse } = actions;
const [sip, setSip] = useState([]);
@ -14,33 +14,27 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes
const [CheckList, setCheckList] = useState([]); //nvr视频流多选
const [isAllChoose, setIsAllChoose] = useState(false); //全选
const [formData, setFormData] = useState() //表单数据
console.log(cameraData.externalDomain)
useEffect(() => {
dispatch(equipmentWarehouse.getCascadeSIP()).then((res) => {
setSip(res.payload.data);
if (cameraData) {
let sip=res.payload.data.find((item)=>item.streamid==cameraData.topSerialNo)
setSip(res.payload.data);
if (cameraData.id) {
let sip = res.payload.data.find((item) => item.streamid == cameraData.topSerialNo)
dispatch(equipmentWarehouse.getCascadeStream({ sip: sip.sipip })).then((res) => {
console.log(res.payload.data);
let oneData = res.payload.data[0];
let modifyData = res.payload.data.find(
(item) => item.id == cameraData.gbId
);
console.log(modifyData)
let data = res.payload.data.map((item, index) => {
if (item.camera) {
item.name = item.camera.name;
}
if (item.id == cameraData.gbId) {
item = oneData;
}
if (index == 0) {
item = modifyData;
}
if (
item.camera&&item.camera.name == cameraData.name
) {
item = oneData;
}
return item;
})
setCascadeList(data)
@ -69,7 +63,9 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes
console.log(res.payload.data);
let chooseList = [];
let data = res.payload.data.map((item, index) => {
item.change = false;
if (item.camera) {
item.name = item.camera.name;
}
return item;
})
setCascadeList(data)
@ -119,9 +115,10 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes
function NvrChangeName (e, index, id) {
//级联摄像头视频流获取修改名称
let NvrchangeList = JSON.parse(JSON.stringify(cascadeList));
if (!cameraData||cameraData.gbId==id) {
NvrchangeList[index].change = true;
setCascadeList(NvrchangeList);
console.log(!cameraData.gbId)
if (!cameraData.gbId || cameraData.gbId == id) {
NvrchangeList[index].change = true;
setCascadeList(NvrchangeList);
}
e.stopPropagation();
}
@ -158,7 +155,7 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes
e.stopPropagation();
}
function onDisabled (id) {
if (id==cameraData.gbId) {
if (id == cameraData.gbId || !cameraData.gbId) {
return false;
} else {
return true;
@ -180,15 +177,27 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes
return (
<>
<Form
allowEmpty
labelPosition="left"
labelAlign="left"
labelWidth="115px"
onValueChange={(values) => {
console.log(values);
console.log(values)
setFormData(values)
let setting = ["externalDomain", "cascadeType", "sip"]
let b = {}
setting.map((item) => {
if (values.hasOwnProperty(item)) {
return b.true = values.hasOwnProperty(item)
} else {
return b.false = values.hasOwnProperty(item)
}
})
Object.keys(b).length == 1 ? ashTrue() : ashFalse()
}}
initValues={{
externalDomain: cameraData.externalDomain || ""
}}
getFormApi={(formApi) => (form.current = formApi)}
>
<Row>
@ -197,7 +206,6 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes
field="externalDomain"
label="外域名称:"
maxLength="36"
initValue={cameraData.externalDomain || ""}
placeholder="请输入外域 名称，例如“xxx市级平台”"
style={{ width: 307 }}
rules={[{ required: true, message: "请输入外域名称" }]}
@ -246,7 +254,7 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes
<Radio
checked={isAllChoose}
mode="advanced"
disabled={cameraData ? true : false}
disabled={cameraData.gbId ? true : false}
onChange={(e) => allChoose(e)}
aria-label="全选"
>

17
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx
View File

@ -1,8 +1,8 @@
import React, { useState, useRef, useEffect, useImperativeHandle } from "react";
import { connect } from "react-redux";
import { Form, Row, Col,Spin } from "@douyinfe/semi-ui";
import { Form, Row, Col, Spin } from "@douyinfe/semi-ui";
import "./cameraModal.less";
function fluoriteCamera ({ cRef, CameraKind, CameraAbility, cameraData }) {
function fluoriteCamera ({ cRef, CameraKind, CameraAbility, cameraData, ashTrue, ashFalse }) {
const { TextArea } = Form;
const form = useRef();
const [cloud, setcloud] = useState(""); //云台支持
@ -81,7 +81,18 @@ function fluoriteCamera ({ cRef, CameraKind, CameraAbility, cameraData }) {
labelPosition="left"
labelAlign="left"
labelWidth="115px"
onValueChange={(values) => console.log(values)}
onValueChange={(values) => {
let setting = ["abilityId", "cloudControl", "highDefinition", "kindId", "name", "position", "rtmp", "serialNo",]
let b = {}
setting.map((item) => {
if (values.hasOwnProperty(item)) {
return b.true = values.hasOwnProperty(item)
} else {
return b.false = values.hasOwnProperty(item)
}
})
Object.keys(b).length == 1 ? ashTrue() : ashFalse()
}}
initValues={{
name: cameraData.name || "",
highDefinition: cameraData.highDefinition || "",

806
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/ipcCamera.jsx
View File

@ -2,411 +2,427 @@ 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 ipcCamera({
aRef,
CameraKind,
CameraAbility,
venderList,
cameraData,
function ipcCamera ({
aRef,
CameraKind,
CameraAbility,
venderList,
cameraData,
ashTrue,
ashFalse
}) {
const { TextArea } = Form;
const form = useRef();
const [cloud, setcloud] = useState(""); //云台支持
const [voice, setvoice] = 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",
},
]); //内存卡列表
const { TextArea } = Form;
const form = useRef();
const [cloud, setcloud] = useState(""); //云台支持
const [voice, setvoice] = 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 || "");
}, []);
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 || "");
}, []);
function handleLocation () {
//高德经纬度
window.open("https://lbs.amap.com/tools/picker", "_blank");
}
}
useImperativeHandle(aRef, () => ({
//传给父组件方法
//子组件暴露给父组件的方法
ipcCameraForm: form.current.validate,
resetIpcCamera: form.current.reset,
toempty: empty,
}));
function empty() {
setcloud(null);
setvoice(null);
}
return (
<>
<Form
labelPosition="left"
labelAlign="left"
labelWidth="115px"
onValueChange={(values) => console.log(values)}
initValues={{
name: cameraData ? cameraData.name : "",
venderId: cameraData ? cameraData.venderId : "",
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="设备名称:"
maxLength="36"
placeholder="请输入设备名称、常用项目或位置定义"
style={{ width: 307 }}
rules={[{ required: true, message: "请输入设备名称" }]}
/>
<Form.Select
field="venderId"
label="设备厂家:"
placeholder="请选择设备厂家"
style={{ width: 307 }}
>
{venderList.map((item, index) => (
<Form.Select.Option key={index} value={item.id}>
{item.name}
</Form.Select.Option>
))}
</Form.Select>
<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="安装位置:"
maxLength="39"
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>
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(aRef, () => ({
//传给父组件方法
//子组件暴露给父组件的方法
ipcCameraForm: form.current.validate,
resetIpcCamera: form.current.reset,
toempty: empty,
}));
function empty () {
setcloud(null);
setvoice(null);
}
return (
<>
<Form
labelPosition="left"
labelAlign="left"
labelWidth="115px"
onValueChange={(values) => {
let setting = ["abilityId", "cloudControl", "highDefinition", "kindId", "name", "position", "rtmp", "serialNo"]
let b = {}
setting.map((item) => {
if (values.hasOwnProperty(item)) {
return b.true = values.hasOwnProperty(item)
} else {
return b.false = values.hasOwnProperty(item)
}
})
Object.keys(b).length == 1 ? ashTrue() : ashFalse()
<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) => {
console.log(checked.target.value);
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",
initValues={{
name: cameraData ? cameraData.name : "",
venderId: cameraData ? cameraData.venderId : "",
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 : "",
}}
>
<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
label="语音支持:"
field="voice"
type="pureCard"
direction="horizontal"
style={{ padding: 0 }}
onChange={(checked) => {
if (checked.target.value == true) {
setvoice(true);
} else {
setvoice(false);
}
}}
getFormApi={(formApi) => (form.current = formApi)}
>
<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>
<div>
<Form.Input
field="serialNo"
label="设备编号接入:"
maxLength="39"
placeholder="请输入设备编号"
style={{ width: 307 }}
/>
</div>
<TextArea
style={{ width: 320, height: 90 }}
field="rtmp"
label="RTMP地址接入:"
placeholder="请输入RTMP地址接入"
/>
</Col>
{/* <Col span={18}>
<Row>
<Col span={12}>
<Form.Input
field="name"
label="设备名称:"
maxLength="36"
placeholder="请输入设备名称、常用项目或位置定义"
style={{ width: 307 }}
rules={[{ required: true, message: "请输入设备名称" }]}
/>
<Form.Select
field="venderId"
label="设备厂家:"
placeholder="请选择设备厂家"
style={{ width: 307 }}
>
{venderList.map((item, index) => (
<Form.Select.Option key={index} value={item.id}>
{item.name}
</Form.Select.Option>
))}
</Form.Select>
<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="安装位置:"
maxLength="39"
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="设备能力:"
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) => {
console.log(checked.target.value);
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
label="语音支持:"
field="voice"
type="pureCard"
direction="horizontal"
style={{ padding: 0 }}
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>
<div>
<Form.Input
field="serialNo"
label="设备编号接入:"
maxLength="39"
placeholder="请输入设备编号"
style={{ width: 307 }}
rules={[{ required: true, message: "请输入设备编号" }]}
/>
</div>
<TextArea
style={{ width: 320, height: 90 }}
field="rtmp"
label="RTMP地址接入:"
placeholder="请输入RTMP地址接入"
rules={[{ required: true, message: "请输入RTMP地址" }]}
/>
</Col>
{/* <Col span={18}>
</Col> */}
</Row>
</Form>
</>
);
</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)(ipcCamera);

35
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrCamera.jsx
View File

@ -15,6 +15,7 @@ import { IconEdit, IconPlayCircle, IconTickCircle } from "@douyinfe/semi-icons";
import "./cameraModal.less";
import PerfectScrollbar from "perfect-scrollbar";
import { isIndexed } from "immutable";
import { useId } from "react";
let equipmentScrollbar;
function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber }) {
@ -52,24 +53,18 @@ function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber }
streamId: cameraDataNvr.serialNo,
})
).then((res) => {
console.log(res)
let oneData = res.payload.data[0];
let modifyData = res.payload.data.find(
(item) => item.camera == null ? false : item.camera.name == cameraData.name
);
(item) =>item.id == cameraData.gbId);
let data = res.payload.data.map((item, index) => {
if (index == 0) {
item = modifyData;
if (item.camera) {
item.name = item.camera.name;
}
if (
item.camera
? item.camera.name == cameraData.name && index > 0
: index < 0
) {
if (item.id == cameraData.gbId) {
item = oneData;
}
if (item.camera) {
item.name = item.camera.name;
if (index == 0) {
item = modifyData;
}
return item;
});
@ -121,10 +116,10 @@ function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber }
}
}, []);
function NvrChangeName (e, index, name) {
function NvrChangeName (e, index, id) {
//nvr摄像头视频流获取修改名称
let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList));
if (!cameraDataNvr || cameraData.name == name) {
if (!cameraData.gbId || cameraData.gbId == id) {
NvrchangeList[index].change = true;
setNVRcameraList(NvrchangeList);
}
@ -209,8 +204,8 @@ function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber }
console.log("22222222222222222");
e.stopPropagation();
}
function onDisabled (name) {
if ((cameraDataNvr && cameraData.name == name) || !cameraDataNvr) {
function onDisabled (id) {
if (cameraData.gbId == id || !cameraData.gbId) {
return false;
} else {
return true;
@ -269,7 +264,7 @@ function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber }
<Radio
checked={isAllChoose}
mode="advanced"
disabled={cameraDataNvr ? true : false}
disabled={cameraData.gbId ? true : false}
onChange={(e) => allChoose(e)}
aria-label="全选"
>
@ -314,7 +309,7 @@ function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber }
>
<Checkbox
value={item.id}
disabled={onDisabled(item.name)}
disabled={onDisabled(item.id)}
extra={
<div>
<div
@ -354,7 +349,7 @@ function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber }
color: "#1859C1",
}}
onClick={(e) =>
NvrChangeName(e, index, item.name)
NvrChangeName(e, index, item.id)
}
/>
</div>
@ -378,7 +373,7 @@ function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber }
<Radio
checked={item.support}
mode="advanced"
disabled={onDisabled(item.name)}
disabled={onDisabled(item.id)}
onChange={(e) => toggle(e, index)}
aria-label="单选"
>

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

@ -393,6 +393,8 @@ function SideSheets (props) {
});
}
//接入信息/复制直播地址
let broadcast=nvrDetails.gbCamera?nvrDetails.gbCamera.playUrl?nvrDetails.gbCamera.playUrl.liveUrl:"":""
console.log(broadcast)
if (index == 1) {
(cameraSetup ? item.liveBroadcast : item.access).map(
(item, index) => {

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

@ -46,7 +46,6 @@ const CameraHeader = (props) => {
const CAMERAS = "cameras";
useEffect(() => {
console.log(props)
//安心云传参
let isAxyData = props.location.search
if (isAxyData) {
@ -119,7 +118,7 @@ const CameraHeader = (props) => {
return (
<div>
{row.name}
<sapn style={{ color: "blue" }}
<span style={{ color: "blue" }}
onClick={() => {
if (deviceClickb.current) {
if (row.type == "nvr") {
@ -139,7 +138,7 @@ const CameraHeader = (props) => {
}}
>
{row.type == "nvr" ? `@${row.nvr.name}` : row.type == "cascade" ? `@${row.externalDomain}` : ""}
</sapn>
</span>
</div >
);
},
@ -149,7 +148,6 @@ const CameraHeader = (props) => {
width: "20%",
dataIndex: "",
render: (_, row) => {
console.log(row)
return (
<div style={{ display: "flex" }}>
<Button

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

@ -109,7 +109,6 @@ const NvrHeader = (props) => {
width: "20%",
dataIndex: "",
render: (_, row) => {
console.log(row)
return (
<div style={{ display: "flex" }}>
<Button theme="borderless">
@ -599,6 +598,7 @@ const NvrHeader = (props) => {
USER={USER}
onOk={() => {
history.push({ pathname: '/equipmentWarehouse/camera', query: { addNvr: true, serialNo: nvrRef.current.nvrNumber() } });
localStorage.setItem('vcmp_selected_sider', JSON.stringify("camera"))
setReminder(false)
}}
close={() => {

Write Preview
Loading…
Cancel
Save