Browse Source

信鸽页面未完成

release_1.1.1
yangsen 2 years ago
parent
commit
eded873264
  1. 299
      code/VideoAccess-VCMP/web/client/src/sections/offline/components/pushModal.jsx
  2. 166
      code/VideoAccess-VCMP/web/client/src/sections/offline/containers/carrierpigeon.jsx

299
code/VideoAccess-VCMP/web/client/src/sections/offline/components/pushModal.jsx

@ -0,0 +1,299 @@
import React, { useState, useRef, useEffect, useImperativeHandle } from "react";
import { connect } from "react-redux";
import { Modal, Form, Row, Col, Spin } from "@douyinfe/semi-ui";
import { IconTickCircle } from "@douyinfe/semi-icons";
import moment from "moment";
function pushModal (props) {
const { modalName, pushRef } = props;
const { dispatch, actions, vender, close } = props;
const pushData = props.pushData || {}; //
const form = useRef();
const [visible, setVisible] = useState(false); //
const [isloading, setloading] = useState(false); //loading
const [loadingTip, setloadingTip] = useState("获取中...请稍后..."); //loading tip
const [step, setstep] = useState("none"); //
const [okText, setokText] = useState("测试校验"); //oktext
const [cancelText, setcancelText] = useState("取消"); //text
const [formObj, setformObj] = useState(); //
function showDialog () {
//
setVisible(true);
}
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 "";
}
}
function handleOk () {
//
if (step == "none") {
form.current
.validate()
.then((values) => {
//
console.log(values)
let valuesObj = JSON.parse(JSON.stringify(values));
valuesObj.longitude = values.position.split(",")[0];
valuesObj.latitude = values.position.split(",")[1];
delete valuesObj.position;
if (pushData.id) {
valuesObj.id = pushData.id;
}
var front = new moment(); //
setloading(true);
dispatch(
actions.equipmentWarehouse.getCheck({
serialNo: valuesObj.serialNo,
})
).then((res) => {
var after = new moment(); //
var duration = moment.duration(after.diff(front))._data.milliseconds;
if (res.success) {
setTimeout(
() => {
setloadingTip("已完成");
setTimeout(() => {
setstep("block");
setloading(false);
setokText("确认");
setcancelText("上一步");
setloadingTip("获取中...请稍后...");
}, 1000);
},
duration > 2000 ? 0 : 2000 - duration
);
} else {
setTimeout(
() => {
setloadingTip("校验失败");
setTimeout(() => {
setstep("none");
setloading(false);
setokText("测试校验");
setcancelText("取消");
setloadingTip("获取中...请稍后...");
}, 1000);
},
duration > 2000 ? 0 : 2000 - duration
);
}
});
setformObj(valuesObj);
})
.catch((errors) => {
//
console.log("errors", errors);
});
} else {
dispatch(actions.equipmentWarehouse.addchangepush(formObj)).then((res) => {
setVisible(false);
close();
});
}
}
function handleAfterClose () {
//
setstep("none");
setokText("测试校验");
setcancelText("取消");
}
function handleCancel () {
//
if (step == "none") {
setVisible(false);
} else {
setstep("none");
setokText("测试校验");
setcancelText("取消");
}
}
function handleLocation () {
//
window.open("https://lbs.amap.com/tools/picker", "_blank");
}
useImperativeHandle(pushRef, () => ({
//
//aa
pushNumber: () => formObj.serialNo
}));
return (
<>
<div onClick={showDialog}>{modalName == "add" ? "创建推送" : "修改"}</div>
<Modal
title={modalName == "add" ? "创建推送" : "修改"}
okText={okText}
cancelText={cancelText} //
visible={visible}
onOk={handleOk}
width={782}
height={720}
afterClose={handleAfterClose}
onCancel={handleCancel}
>
<Spin tip={loadingTip} spinning={isloading}>
<div
style={{
paddingLeft: 16,
display: step == "none" ? "block" : "none",
}}
>
<Form
allowEmpty
labelPosition="left"
labelAlign="left"
labelWidth="90px"
onValueChange={(values) => console.log(values)}
getFormApi={(formApi) => (form.current = formApi)}
>
<Row>
<Col span={12}>
<Form.Input
maxLength="39"
field="serialNo"
label="设备编号:"
initValue={pushData.serialNo || ""}
placeholder="请输入设备编号"
style={{ width: 149 }}
rules={[{ required: true, message: "请输入设备编号" }]}
/>
</Col>
<Col span={12}>
<Form.InputNumber
formatter={(value) => `${value}`.replace(/\D/g, "")}
hideButtons={true}
maxLength="15"
field="regionCode"
label="行政区区码:"
initValue={pushData.regionCode || ""}
placeholder="请输入行政区区码"
style={{ width: 149 }}
/>
</Col>
<Col span={24}>
<Form.Input
maxLength="36"
field="name"
label="设备名称:"
initValue={pushData.name || ""}
placeholder="请输入设备名称"
style={{ width: 421 }}
rules={[
{
required: true,
message: "请输入设备名称、常用项目或位置定义",
},
]}
/>
</Col>
<Col span={24}>
<Form.Select
label="设备厂家:"
field="venderId"
initValue={pushData.venderId || null}
placeholder="请选择设备厂家"
style={{ width: 421 }}
rules={[{ required: true, message: "请选择设备厂家" }]}
>
{vender.map((item, index) => (
<Form.Select.Option key={index} value={item.id}>
{item.name}
</Form.Select.Option>
))}
</Form.Select>
</Col>
<Col span={24} style={{ display: "flex" }}>
<Form.Input
maxLength="39"
field="position"
label="安装位置:"
initValue={
pushData.longitude && pushData.latitude
? pushData.longitude + "," + pushData.latitude
: ""
}
placeholder="请输入或拾取高德经纬度坐标"
style={{ width: 386 }}
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>
</Col>
</Row>
</Form>
</div>
<div style={{ height: 224, display: step }}>
<div
style={{
paddingTop: 50,
display: "flex",
justifyContent: "center",
}}
>
<IconTickCircle style={{ color: "#04B234", fontSize: 60 }} />
</div>
<div
style={{
marginTop: 20,
display: "flex",
justifyContent: "center",
}}
>
是否确认创建推送
</div>
</div>
</Spin>
</Modal>
</>
);
}
function mapStateToProps (state) {
const { auth, global, members, vender } = state;
return {
loading: members.isRequesting,
user: auth.user,
actions: global.actions,
members: members.data,
vender: vender.data || [], //
};
}
export default connect(mapStateToProps)(pushModal);

166
code/VideoAccess-VCMP/web/client/src/sections/offline/containers/carrierpigeon.jsx

@ -5,6 +5,7 @@ import { Button, Form, Table, Pagination, Skeleton, Popconfirm, Popover, Tag, }
import "../style.less";
import { ApiTable } from "$utils";
import { Setup } from "$components";
import PushModal from "../components/pushModal";
// import SideSheets from "../components/sideSheet";
// import { skeletonScreen } from "../components/skeletonScreen";
// import { ReminderBox } from "../../../components/index";
@ -36,10 +37,12 @@ const Carrierpigeon = (props) => {
const nvrRef = useRef(); //
const tableList = [//
{
title:'状态码信息',
title: '推送信息',
list: [
{ name: "常规解决方案", value: "manufactor" },
{ name: "状态频率", value: "accountNumber" },
{ name: "策略类型", value: "PolicyType" },
{ name: "推送机制", value: "PushMechanism" },
{ name: "监听设备数量", value: "DevicesNumber" },
{ name: "累计推送次数", value: "PushNumber" },
]
},
];
@ -52,7 +55,7 @@ const Carrierpigeon = (props) => {
localStorage.getItem(PIGEON) == null
? localStorage.setItem(
PIGEON,
JSON.stringify(["manufactor", "type", "state", "support"])
JSON.stringify(["PolicyType", "PushMechanism", "DevicesNumber", "PushNumber"])
)
: "";
}, []);
@ -70,12 +73,10 @@ const Carrierpigeon = (props) => {
function equipmentStatus (data) {
switch (data) {
case "ON":
return "在线"
case "ONLINE":
return "在线"
case "OFF":
return "离线"
case "email":
return "邮件通知"
case "note":
return "短信通知"
default:
return "未知"
}F
@ -104,26 +105,10 @@ const Carrierpigeon = (props) => {
title: "策略名称",
dataIndex: "name",
render: (_, r, index) => {
console.log(r);
return r.name
},
},
{
title: "监听设备数量",
dataIndex: "owner",
render: (_, r, index) => {
console.log(r);
console.log("r:" + r.name);
return r.name
},
},
{
title: "累计推送次数",
dataIndex: "owner",
render: (_, r, index) => {
console.log(r);
return (r.name + '次')
},
},
{
title: "操作",
width: "20%",
@ -132,7 +117,9 @@ const Carrierpigeon = (props) => {
return (
<div style={{ display: "flex" }}>
<Button theme="borderless">
修改
<PushModal
modalName="revise"
/>
</Button>
<Button
theme="borderless"
@ -144,7 +131,7 @@ const Carrierpigeon = (props) => {
禁用
</Button>
<Popconfirm
title="删除NVR会删除端口下的所有摄像头,是否确定删除?"
title="是否确定删除?"
arrowPointAtCenter={false}
showArrow={true}
position="topRight"
@ -180,36 +167,35 @@ const Carrierpigeon = (props) => {
const column = [
{
title: "策略类型",
title: "推送机制",
dataIndex: "venderId",
key: "manufactor",
key: "PushMechanism",
render: (_, r, index) => {
let manufactorName = data.find((item) => item.id == r.venderId);
return manufactorName ? manufactorName.name : "";
},
},
{
title: "添加账号",
dataIndex: "createUserId",
key: "accountNumber",
title: "监听设备数量",
dataIndex: "DevicesNum",
key: "DevicesNumber",
render: (_, r, index) => {
return r?.createUser?.name
return r.name
},
},
{
title: "通道数",
dataIndex: "channelCount",
key: "passageway",
title: "累计推送次数",
dataIndex: "PushNum",
key: "PushNumber",
render: (_, r, index) => {
return (r.name + '次')
},
{
title: "端口",
dataIndex: "port",
key: "port",
},
{
title: "推送机制",
title: "策略类型",
dataIndex: "size",
key: "state",
key: "PolicyType",
render: (_, r, index) => {
let status = r.gbNvr;
return (
@ -224,49 +210,11 @@ const Carrierpigeon = (props) => {
margin: "0 8px 0 0",
}}
/>
{status ? equipmentStatus(status.online) : ""}
{status ? "邮件通知" : equipmentStatus(status.email)}
</div>
);
},
},
{
title: "创建时间",
dataIndex: "createTime",
key: "time",
render: (_, r, index) => {
return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS");
},
},
{
title: "项目名称",
dataIndex: "",
key: "name",
render: (_, r, index) => {
return r.station.length == 0
? ""
: station(r, "name", "projects")
},
},
{
title: "pcode",
dataIndex: "",
key: "pcode",
render: (_, r, index) => {
return r.station.length == 0
? ""
: station(r, "url", "projects")
},
},
{
title: "结构物",
dataIndex: "",
key: "structure",
render: (_, r, index) => {
return r.station.length == 0
? ""
: station(r, "name")
},
},
];
for (let i = 0; i < arr.length; i++) {
let colum = column.filter((item) => {
@ -278,29 +226,29 @@ const Carrierpigeon = (props) => {
}
//station
function station (r, name, projects) {
let data = []
if (projects == "projects") {
r.station.map((v) => {
if (v.structure.projects.length > 0) {
v.structure.projects.map((item) => data.push(item[name]))
}
})
} else {
r.station.map((v, index) => data.push(v.structure[name]))
}
let dataSet = [...(new Set(data))]
return dataSet.length > 0 ? <Popover
key="updateTime"
position="top"
content={
dataSet.length > 1 ? <article style={{ padding: 12 }}>{dataSet.map((v, index) => <div key={index}>{v}</div>)}</article> : ""
}
>
<Tag>{dataSet.length > 1 ? `${dataSet[0]}...` : dataSet.length > 0 ? dataSet[0] : ""}</Tag>
</Popover> : ""
// function station (r, name, projects) {
// let data = []
// if (projects == "projects") {
// r.station.map((v) => {
// if (v.structure.projects.length > 0) {
// v.structure.projects.map((item) => data.push(item[name]))
// }
// })
// } else {
// r.station.map((v, index) => data.push(v.structure[name]))
// }
// let dataSet = [...(new Set(data))]
// return dataSet.length > 0 ? <Popover
// key="updateTime"
// position="top"
// content={
// dataSet.length > 1 ? <article style={{ padding: 12 }}>{dataSet.map((v, index) => <div key={index}>{v}</div>)}</article> : ""
// }
// >
// <Tag>{dataSet.length > 1 ? `${dataSet[0]}...` : dataSet.length > 0 ? dataSet[0] : ""}</Tag>
// </Popover> : ""
}
// }
//
const screen = {
@ -355,7 +303,9 @@ const Carrierpigeon = (props) => {
cursor: "pointer",
}}
>
创建推送
<PushModal
modalName="add"
/>
{/* <NvrModal
modalName="add"
venderList={venderList}
@ -413,7 +363,7 @@ const Carrierpigeon = (props) => {
<Form.Select
label="策略类型:"
labelPosition="left"
field="state"
field="PolicyType"
style={screen}
placeholder="全部"
showClear
@ -448,7 +398,7 @@ const Carrierpigeon = (props) => {
});
}}
>
</Button>
<Button
theme="light"

Loading…
Cancel
Save