You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
412 lines
12 KiB
412 lines
12 KiB
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,
|
|
}) {
|
|
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 "";
|
|
}
|
|
}
|
|
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>
|
|
|
|
<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 }}
|
|
/>
|
|
</div>
|
|
<TextArea
|
|
style={{ width: 320, height: 90 }}
|
|
field="rtmp"
|
|
label="RTMP地址接入:"
|
|
placeholder="请输入RTMP地址接入"
|
|
/>
|
|
</Col>
|
|
{/* <Col span={18}>
|
|
|
|
</Col> */}
|
|
</Row>
|
|
</Form>
|
|
</>
|
|
);
|
|
}
|
|
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);
|
|
|