diff --git a/code/VideoAccess-VCMP/web/client/src/sections/offline/components/pushModal.jsx b/code/VideoAccess-VCMP/web/client/src/sections/offline/components/pushModal.jsx new file mode 100644 index 0000000..1c722db --- /dev/null +++ b/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("测试校验"); //ok弹框text 右边 + 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 ( + <> +
{modalName == "add" ? "创建推送" : "修改"}
+ + +
+
console.log(values)} + getFormApi={(formApi) => (form.current = formApi)} + > + + + + + + `${value}`.replace(/\D/g, "")} + hideButtons={true} + maxLength="15" + field="regionCode" + label="行政区区码:" + initValue={pushData.regionCode || ""} + placeholder="请输入行政区区码" + style={{ width: 149 }} + /> + + + + + + + {vender.map((item, index) => ( + + {item.name} + + ))} + + + + +
+ +
+ + +
+
+ +
+
+ +
+
+ 是否确认创建推送？ +
+
+ + + + ); +} + +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); diff --git a/code/VideoAccess-VCMP/web/client/src/sections/offline/containers/carrierpigeon.jsx b/code/VideoAccess-VCMP/web/client/src/sections/offline/containers/carrierpigeon.jsx index cab4296..48a9755 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/offline/containers/carrierpigeon.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/offline/containers/carrierpigeon.jsx @@ -4,7 +4,8 @@ import moment from "moment"; import { Button, Form, Table, Pagination, Skeleton, Popconfirm, Popover, Tag, } from "@douyinfe/semi-ui"; import "../style.less"; import { ApiTable } from "$utils"; -import {Setup} from "$components"; +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:'状态码信息', - list:[ - { name: "常规解决方案", value: "manufactor" }, - { name: "状态频率", value: "accountNumber" }, + title: '推送信息', + list: [ + { 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); + console.log("r:" + r.name); return r.name }, }, - { - title: "监听设备数量", - dataIndex: "owner", - render: (_, r, index) => { - console.log(r); - 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 (
{ 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: "port", - key: "port", + title: "累计推送次数", + dataIndex: "PushNum", + key: "PushNumber", + render: (_, r, index) => { + return (r.name + '次') + }, }, + { - 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)}
); }, }, - { - 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 ? 1 ?
{dataSet.map((v, index) =>
{v}
)}
: "" - } - > - {dataSet.length > 1 ? `${dataSet[0]}...` : dataSet.length > 0 ? dataSet[0] : ""} - : "" + // 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 ? 1 ?
{dataSet.map((v, index) =>
{v}
)}
: "" + // } + // > + // {dataSet.length > 1 ? `${dataSet[0]}...` : dataSet.length > 0 ? dataSet[0] : ""} + // : "" - } + // } //条件赛选样式 const screen = { @@ -355,7 +303,9 @@ const Carrierpigeon = (props) => { cursor: "pointer", }} > - 创建推送 + {/* { { }); }} > - 搜素 + 搜索