|
|
@ -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); |
|
|
|