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