From e8c437ba077e075e33bee437a72167503be6f408 Mon Sep 17 00:00:00 2001 From: fengxiang <361798944@qq.com> Date: Mon, 18 Sep 2023 15:08:18 +0800 Subject: [PATCH] =?UTF-8?q?fix():=20=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../OutRoadMgm/OutDeviceMgm/OutDevice/index.scss | 226 -------- .../OutRoadMgm/OutDeviceMgm/OutDevice/loadable.jsx | 56 +- .../OutDeviceMgm/OutMonitorMgm/index.scss | 139 +---- .../OutDeviceMgm/OutMonitorMgm/loadable.jsx | 427 +++++++------- .../OutRoadMgm/OutDeviceMgm/OutNvrMgm/index.scss | 125 +--- .../OutRoadMgm/OutDeviceMgm/OutNvrMgm/loadable.jsx | 641 +++++++++------------ src/services/OutRoadMgm/OutNVRMgm.js | 17 + src/services/OutRoadMgm/index.js | 2 + 8 files changed, 599 insertions(+), 1034 deletions(-) create mode 100644 src/services/OutRoadMgm/OutNVRMgm.js diff --git a/src/pages/OutRoadMgm/OutDeviceMgm/OutDevice/index.scss b/src/pages/OutRoadMgm/OutDeviceMgm/OutDevice/index.scss index 7ea0b3b..64faba2 100644 --- a/src/pages/OutRoadMgm/OutDeviceMgm/OutDevice/index.scss +++ b/src/pages/OutRoadMgm/OutDeviceMgm/OutDevice/index.scss @@ -195,232 +195,6 @@ } } } - - .row-pic { - width: 100%; - display: flex; - align-items: center; - justify-content: flex-start; - - .ant-image { - margin-right: 3px; - } - } - } - } - } - - .full-group { - display: flex; - - .ant-select-selector, - .ant-picker, - .ant-input { - border-color: var(--color-search-list-item-bd) !important; - } - - .lt-box, - .rt-box { - width: 50%; - padding-right: 10px; - - .row-line { - width: 100%; - display: flex; - margin-bottom: 30px; - - .r-txt { - min-width: 100px; - text-align: right; - - &.required::before { - margin-right: 4px; - color: #f56c6c; - font-family: SimSun, sans-serif; - content: "*"; - } - } - - .r-con { - flex: 1; - - >.row-lg { - width: 100%; - } - - >.row-sm { - width: 40%; - } - } - } - } - - &.form-group { - .rt-box { - margin-left: 50px; - } - - .r-txt { - padding-top: 5px; - } - - .pic-box { - border-radius: 6px; - width: 148px; - height: 148px; - background-color: var(--color-container-bg); - border: 1px solid var(--color-search-list-item-bd); - overflow: hidden; - position: relative; - - .delete-btn { - position: absolute; - top: 2px; - right: 2px; - font-size: 20px; - color: rgb(245, 76, 76); - display: none; - cursor: pointer; - } - - &:hover { - .delete-btn { - display: block; - } - } - } - - .upload-btn { - border-radius: 6px; - width: 148px; - height: 148px; - background-color: var(--color-container-bg); - border: 1px dashed var(--color-search-list-item-bd); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - cursor: pointer; - - &:hover { - opacity: 0.9; - } - - .anticon { - font-size: 28px; - color: #8c939d; - } - - >div { - opacity: 0.65; - } - } - - .tip-text { - margin-top: 20px; - } - - .ant-radio-group { - padding: 5px 0; - } - - .row-box+.row-box { - margin-top: 10px; - } - - .row-box { - display: flex; - background-color: var(--color-container-bg); - padding: 6px; - width: fit-content; - - .r-date { - width: 240px; - } - - .r-time { - width: 190px; - margin-left: 10px; - } - - .r-tool { - width: 65px; - display: flex; - align-items: center; - padding: 0 10px; - - .anticon { - font-size: 18px; - cursor: pointer; - - &.anticon-plus-circle { - color: #409eff; - } - - &.anticon-minus-circle { - color: red; - margin-left: 10px; - } - } - } - } - } - - .ul-list { - width: 300px; - margin: 10px auto 20px; - border: 1px solid var(--color-search-list-item-bd); - - li { - width: 100%; - height: 40px; - border-bottom: 1px solid var(--color-search-list-item-bd); - display: flex; - align-items: center; - justify-content: space-between; - - >span { - .anticon { - cursor: pointer; - margin-left: 10px; - - &.anticon-edit, - &.anticon-plus-circle { - color: rgb(64, 158, 255); - } - - &.anticon-minus-circle { - display: none; - color: rgb(245, 108, 108); - } - } - - &:nth-last-child(3) { - width: 40px; - text-align: center; - } - - &:nth-last-child(2) { - flex: 1; - text-align: center; - @include textEllipsis("one"); - } - - &:nth-last-child(1) { - width: 60px; - } - } - - &:last-child { - border-bottom: unset; - cursor: pointer; - } - - &:hover { - >span .anticon-minus-circle { - display: inline-block; - } - } } } } diff --git a/src/pages/OutRoadMgm/OutDeviceMgm/OutDevice/loadable.jsx b/src/pages/OutRoadMgm/OutDeviceMgm/OutDevice/loadable.jsx index 3a5926b..809ec89 100644 --- a/src/pages/OutRoadMgm/OutDeviceMgm/OutDevice/loadable.jsx +++ b/src/pages/OutRoadMgm/OutDeviceMgm/OutDevice/loadable.jsx @@ -25,9 +25,9 @@ function OutDevice() { const [pageType, setPageType] = useState("1"); // 默认数据 const defaultData = { - areaId: "", // 区域 - operator: "", // 商户名称 - park_name: "", // 停车场名称 + area_id: "", // 区域 + operator_id: "", // 商户名称 + road_id: "", // 停车场名称 park_type: "", // 停车场类型 is_fail: "", // 是否有故障 }; @@ -55,6 +55,7 @@ function OutDevice() { const [rowData, setRowData] = useState({}); // 商户名称 const [storeData, setStoreData] = useState([]); + const [roadData, setRoadData] = useState([]); // 区域的下拉数据 const [areaList, setAreaList] = useState([]); // 停车场类型下拉 @@ -212,10 +213,15 @@ function OutDevice() { setIsAjax(!isAjax); }; - // 获取状态文本 - const getStatusText = (val) => { - const obj = statusArr.filter((v, i) => v.value == val); - return obj?.length ? obj[0].label : "-"; + const getAllRoad = (id, setData) => { + ajaxCom.getAllRoadByOperatort({ operator_id: id }).then( + (res) => { + setData(res?.data || []); + }, + (err) => { + console.log(err); + } + ); }; // 获取下拉菜单 @@ -246,6 +252,19 @@ function OutDevice() { console.log(err); } ); + // 停车场类型下拉 + ajaxCom.getOperator().then( + (res) => { + if (parseInt(res?.status) === 20000) { + setParkList(res?.data || []); + } else { + message.error(res?.message); + } + }, + (err) => { + console.log(err); + } + ); }; // 返回并刷新列表 @@ -272,8 +291,8 @@ function OutDevice() { }} options={areaList || []} placeholder="全部" - value={formData?.areaId || undefined} - onChange={(e) => setFormData({ ...formData, areaId: e })} + value={formData?.area_id || undefined} + onChange={(e) => setFormData({ ...formData, area_id: e })} />
@@ -283,8 +302,15 @@ function OutDevice() { allowClear placeholder="全部" options={storeData || []} - value={formData?.operator || undefined} - onChange={(e) => setFormData({ ...formData, operator: e })} + value={formData?.operator_id || undefined} + onChange={(v) => { + setFormData({ ...formData, operator_id: v, road_id: "" }); + if (v) { + getAllRoad(v, setRoadData); + } else { + setRoadData([]); + } + }} />
@@ -293,9 +319,11 @@ function OutDevice() { className="form-con" allowClear placeholder="全部" - options={storeData || []} - value={formData?.park_name || undefined} - onChange={(e) => setFormData({ ...formData, park_name: e })} + showSearch + optionFilterProp="label" + options={roadData || []} + value={formData?.road_id || undefined} + onChange={(e) => setFormData({ ...formData, road_id: e })} />
diff --git a/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/index.scss b/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/index.scss index b3111ea..69fbf30 100644 --- a/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/index.scss +++ b/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/index.scss @@ -184,148 +184,65 @@ $color-primary : var(--color-primary); } -.fence { - width: 660px !important; +.modal-monitor { - .fenceModal { + .row-line { + width: 100%; + display: flex; - .selectSearch { - margin: 10px 0 0 10px; - } - } + >.ant-form-item { + width: 50%; - .submitBtn { - text-align: center; - margin-top: 20px; - - .submit { - width: 80px; - height: 35px; - background: #409eff; - border: none; - border-radius: 4px; - cursor: pointer; - color: #fff; + .ant-form-item-label { + min-width: 110px; + } } - .cancel { - width: 80px; - height: 35px; - background: #fff; - border: none; - border-radius: 4px; - color: #3e4557; - cursor: pointer; - margin-left: 20px; + label .required::before { + margin-right: 4px; + color: #a61d24; + font-family: SimSun, sans-serif; + content: "*"; } } - .attend { - display: flex; - - .yisaSearch { - margin-left: 20px; - margin-top: 8px; + .berth-container { + >.ant-form-item { + width: 100%; } - } -} - -.fenceMap { - width: 900px !important; + // .ant-form-item-label { + // flex: 0 0 129px !important; + // } - .editFenceMap { - margin-top: 20px; - height: 400px; - } - - .attend { - display: flex; + .ant-transfer-list-content { + @include scrollBar(#616b83, #bebebe); + } } .submitBtn { text-align: center; margin-top: 20px; - .submit { + .ant-btn { width: 80px; height: 35px; - background: #409eff; border: none; border-radius: 4px; - cursor: pointer; - color: #fff; - } - .cancel { - width: 80px; - height: 35px; - background: #fff; - border: none; - border-radius: 4px; - color: #3e4557; - cursor: pointer; - margin-left: 20px; + span { + color: #ffffff; + } } - } -} - -.berth-container { - .ant-form-item-label { - flex: 0 0 129px !important; - } - - .ant-transfer-list-content { - @include scrollBar(#616b83, #bebebe); - } -} - -.placeModal { - .yisaSearch { - margin-left: 109px; - } - - .submitBtn { - text-align: center; - margin-top: 20px; .submit { - width: 80px; - height: 35px; background: #409eff; - border: none; - border-radius: 4px; - cursor: pointer; - color: #fff; } .cancel { - width: 80px; - height: 35px; - background: #fff; - border: none; - border-radius: 4px; - color: #3e4557; - cursor: pointer; + background: var(--button-default-bg); margin-left: 20px; } } - .tip { - margin: 20px 0 0 100px; - - div { - color: #878787; - } - } -} - -.action-wrapper { - >button { - margin-right: 2px; - - &:last-child { - margin: 0; - } - } } \ No newline at end of file diff --git a/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/loadable.jsx b/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/loadable.jsx index ad5869f..2609c69 100644 --- a/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/loadable.jsx +++ b/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/loadable.jsx @@ -7,15 +7,12 @@ import { Table, message, Pagination, - Cascader, Modal, Dropdown, Form, - Row, - Col, Transfer, } from "antd"; -import { pageSizeOptions } from "@/config/character.config.js"; +import { dictionary } from "@/config/common"; import moment from "moment"; import "./index.scss"; import { DeleteOutlined } from "@ant-design/icons"; @@ -25,15 +22,14 @@ function OutMonitorMgm(props) { // 默认数据 const defaultData = { - address: "", - device_code: "", - road_name: "", //路段名称 - operator: -1, //运营商 + device_code: "", // 设备编号 + operator_id: "", //运营商 + road_id: "", //路段名称 }; // 分页数据 const [pageInfo, setPageInfo] = useState({ - pageNum: 1, - pageSize: 15, + pn: 1, + page_size: 15, }); // 表单数据 const [formData, setFormData] = useState(defaultData); @@ -50,15 +46,23 @@ function OutMonitorMgm(props) { total: 0, list: [], }); + const [visible, setVisible] = useState(false); + const [storeData, setStoreData] = useState([]); //所属商户 + const [roadData, setRoadData] = useState([]); const [nvrData, setNvrData] = useState([]); const [berthData, setBerthData] = useState([]); const [berthSelectData, setBerthSelectData] = useState([]); const [selectedKeys, setSelectedKeys] = useState([]); - const [editModalVisible, setEditModalVisible] = useState(false); - const [editStatus, setEditStatus] = useState(false); - const [storeData, setStoreData] = useState([{ label: "全部", value: -1 }]); //所属商户 - const [editId, setEditId] = useState(""); + + const defRowData = { + device_name: "", + nvr_id: "", + device_code: "", + berth_ids: "", + }; + // 行数据 + const [rowData, setRowData] = useState(defRowData); useEffect(() => { getNvrList(); @@ -81,6 +85,17 @@ function OutMonitorMgm(props) { ); }; + const getAllRoad = (id, setData) => { + ajax.getAllRoadByOperatort({ operator_id: id }).then( + (res) => { + setData(res?.data || []); + }, + (err) => { + console.log(err); + } + ); + }; + // 获取列表数据 const getData = () => { let postData = { ...formData }; @@ -110,7 +125,7 @@ function OutMonitorMgm(props) { // 检索数据 const handleSearch = () => { setLoading(true); - setPageInfo({ ...pageInfo, ...{ pageNum: 1 } }); + setPageInfo({ ...pageInfo, ...{ pn: 1 } }); setHoldData(formData); setIsAjax(!isAjax); }; @@ -121,15 +136,17 @@ function OutMonitorMgm(props) { // position: ["bottomCenter"], showQuickJumper: true, showSizeChanger: true, - current: pageInfo.pageNum, + current: pageInfo.pn, total: resultData?.total, // showTotal: () => `共 ${resultData.total || 0} 条`, - pageSize: pageInfo.pageSize, - pageSizeOptions: Array.from(new Set([...[15], ...(pageSizeOptions || [])])), + pageSize: pageInfo.page_size, + pageSizeOptions: Array.from( + new Set([...[15], ...(dictionary?.pageSizeOptions || [])]) + ), onChange: (current, size) => { setPageInfo({ ...pageInfo, - ...{ pageNum: pageInfo.pageSize == size ? current : 1, pageSize: size }, + ...{ pn: pageInfo.page_size == size ? current : 1, page_size: size }, }); setIsAjax(!isAjax); }, @@ -138,28 +155,31 @@ function OutMonitorMgm(props) { const handlePlay = (item) => { message.error(`播放数据暂未对接`); }; + const handleDel = (item) => { Modal.confirm({ title: "确认删除？", content: `是否确认删除监控设备：${item.device_name} ？`, icon: , onOk: () => { - handleDelToServer(item.id) - .then((msg) => { - message.success(msg || "删除成功"); - }) - .catch((err) => { - message.error(err); - }); + handleDelToServer(item.id); }, }); }; const getNvrList = () => { - ajax.getAllNvrList().then((e) => { - if (e.status == 20000) { - setNvrData(e.data); + ajax.getAllNvrList().then( + (res) => { + if (res.status == 20000) { + setNvrData(res?.data || []); + } else { + message.error(res.message); + } + }, + (err) => { + console.log(err); + message.error("服务器异常"); } - }); + ); }; const getBerthDataByNvr = (nvr) => { ajax @@ -167,50 +187,61 @@ function OutMonitorMgm(props) { Object.assign( {}, { nvr_id: nvr }, - editStatus ? {} : { is_bind_monitor_device: 1 } + rowData?.id ? {} : { is_bind_monitor_device: 1 } ) ) - .then((e) => { - if (e.status == 20000) { - setBerthData( - e.data.map((item) => ({ key: item.value, title: item.label })) - ); + .then( + (res) => { + if (res?.status == 20000) { + const newData = res?.data || []; + if (newData?.length) { + setBerthData( + newData.map((item) => ({ key: item.value, title: item.label })) + ); + } else { + setBerthData([]); + } + } else { + message.error(res.message); + } + }, + (err) => { + console.log(err); + message.error("服务器异常"); } - }); + ); }; const handleDelToServer = (id) => { - return new Promise((resolved, rejected) => { - ajax - .monitorDel({ id: id }) - .then((e) => { - if (e.status == 20000) { - resolved(e.message); - } - }) - .catch((err) => { - rejected(err); - }); - }); + ajax.monitorDel({ id: id }).then( + (res) => { + if (res.status == 20000) { + message.success(res.message || "删除成功"); + } else { + message.error(res.message); + } + }, + (err) => { + console.log(err); + message.error("服务器异常"); + } + ); }; const handleEdit = (item) => { - setEditStatus(true); - form.setFieldsValue({ - ...item, - }); - setEditId(item.id); + setRowData(item); + form.setFieldsValue(item); getBerthDataByNvr(item.nvr_id); setBerthSelectData( - item.berth_ids ? item.berth_ids.split(",").map((v) => Number(v)) : [] + item?.berth_ids ? item.berth_ids.split(",").map((v) => Number(v)) : [] ); - setEditModalVisible(true); + setVisible(true); }; - const editModalCancel = () => { - setEditModalVisible(false); - form.resetFields(); + // 取消 + const onCancel = () => { + setVisible(false); }; const onTransferChange = (nextTargetKeys, direction, moveKeys) => { setBerthSelectData(nextTargetKeys); - form.setFieldValue("berth_ids", nextTargetKeys.join(",")); + setRowData({ ...rowData, berth_ids: nextTargetKeys.join(",") }); }; const onTransferSelectChange = (sourceSelectedKeys, targetSelectedKeys) => { setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]); @@ -230,7 +261,7 @@ function OutMonitorMgm(props) { width: 60, align: "center", render: (val, row, index) => { - return <>{index + 1 + pageInfo.pageSize * (pageInfo.pageNum - 1)}; + return <>{index + 1 + pageInfo.page_size * (pageInfo.pn - 1)}; }, }, { @@ -290,7 +321,7 @@ function OutMonitorMgm(props) { // 操作 const clickDropDown = (param, record) => { // console.log(param.key, record); - // setRowData(record); + setRowData(record); if (param.key == "1") { // 查看监控 handlePlay(record); @@ -303,59 +334,60 @@ function OutMonitorMgm(props) { } }; - const handleEditFinish = () => { - console.log("form finish"); - }; - const monitorEdit = (params) => { - return new Promise((resolved, rejected) => { - ajax - .monitorEdit(params) - .then((e) => { - if (e.status == 20000) { - resolved(e.message); - } - }) - .catch((err) => { - rejected(err); - }); - }); + // 表单改变事件 + const handleForm = async (changedValues, allValues) => { + // console.log(changedValues, allValues); + let obj = {}; + let key = Object.keys(changedValues)[0]; + let val = Object.values(changedValues)[0]; + switch (key) { + case "nvr_id": + obj[key] = val; + getBerthDataByNvr(val); + break; + + default: + obj[key] = val; + break; + } + form.setFieldsValue({ ...allValues, ...obj }); }; - const monitorAdd = (params) => { - return new Promise((resolved, rejected) => { - ajax - .monitorAdd(params) - .then((e) => { - if (e.status == 20000) { - resolved(e.message); - } - }) - .catch((err) => { - rejected(err); - }); - }); + + // 表单提交 + const onFinish = (values) => { + // console.log(values); + if (!rowData?.berth_ids) { + message.error("请选择泊位"); + return; + } + ajax[values?.id ? "monitorEdit" : "monitorAdd"]({ + ...values, + berth_ids: rowData?.berth_ids, + }).then( + (res) => { + if (res?.status == 20000) { + message.success(res.message); + // setPageInfo({ ...pageInfo, ...{ pn: 1 } }); + setVisible(false); + setIsAjax(!isAjax); + } else { + message.error(res.message); + } + }, + (err) => { + console.log(err); + } + ); }; + + // 添加按钮 const handleAdd = () => { - setEditStatus(false); - form.resetFields(); + setRowData(defRowData); + form.setFieldsValue(defRowData); + setSelectedKeys([]); setBerthSelectData([]); - setEditModalVisible(true); - }; - const handleSubmit = () => { - if (editStatus) { - // 编辑 - monitorEdit({ ...form.getFieldsValue(), id: editId }).then((msg) => { - message.success(msg || "监控设备更新成功"); - setEditModalVisible(false); - getData(); - }); - } else { - // 新增 - monitorAdd(form.getFieldsValue()).then((msg) => { - message.success(msg || "监控设备添加成功"); - setEditModalVisible(false); - getData(); - }); - } + // form.resetFields(); + setVisible(true); }; return ( @@ -380,9 +412,17 @@ function OutMonitorMgm(props) { setFormData({ ...formData, road_name: e })} + allowClear + showSearch + optionFilterProp="label" + options={roadData || []} + value={formData.road_id || undefined} + onChange={(v) => setFormData({ ...formData, road_id: v })} />
@@ -418,9 +461,7 @@ function OutMonitorMgm(props) {
共查询到 - - {resultData.total_records || 0}{" "} - + {resultData.total || 0} 条结果
@@ -450,94 +491,70 @@ function OutMonitorMgm(props) {
-
-
-
- - - - - - - - - - - - - - - - item.title} - /> - - - -
-
- -
- - -
+
+
+ +
+ + + + + + +
+
+ 泊位}> + item.title} + /> + +
+ + + + +
diff --git a/src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/index.scss b/src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/index.scss index 7ba56c9..f016fc4 100644 --- a/src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/index.scss +++ b/src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/index.scss @@ -185,138 +185,51 @@ $color-primary : var(--color-primary); } -.fence { - width: 660px !important; +.modal-nvr { - .fenceModal { - - .selectSearch { - margin: 10px 0 0 10px; - } - } - - .submitBtn { - text-align: center; - margin-top: 20px; + .row-line { + width: 100%; + display: flex; - .submit { - width: 80px; - height: 35px; - background: #409eff; - border: none; - border-radius: 4px; - cursor: pointer; - color: #fff; - } + >.ant-form-item { + width: 50%; - .cancel { - width: 80px; - height: 35px; - background: #fff; - border: none; - border-radius: 4px; - color: #3e4557; - cursor: pointer; - margin-left: 20px; + .ant-form-item-label { + min-width: 110px; + } } - } - .attend { - display: flex; - - .yisaSearch { - margin-left: 20px; - margin-top: 8px; + label .required::before { + margin-right: 4px; + color: #a61d24; + font-family: SimSun, sans-serif; + content: "*"; } } -} - -.fenceMap { - - width: 900px !important; - - .editFenceMap { - margin-top: 20px; - height: 400px; - } - - .attend { - display: flex; - } .submitBtn { text-align: center; margin-top: 20px; - .submit { + .ant-btn { width: 80px; height: 35px; - background: #409eff; border: none; border-radius: 4px; - cursor: pointer; - color: #fff; - } - .cancel { - width: 80px; - height: 35px; - background: #fff; - border: none; - border-radius: 4px; - color: #3e4557; - cursor: pointer; - margin-left: 20px; + span { + color: #ffffff; + } } - } -} - -.placeModal { - .yisaSearch { - margin-left: 109px; - } - - .submitBtn { - text-align: center; - margin-top: 20px; .submit { - width: 80px; - height: 35px; background: #409eff; - border: none; - border-radius: 4px; - cursor: pointer; - color: #fff; } .cancel { - width: 80px; - height: 35px; - background: #fff; - border: none; - border-radius: 4px; - color: #3e4557; - cursor: pointer; + background: var(--button-default-bg); margin-left: 20px; } } - .tip { - margin: 20px 0 0 100px; - - div { - color: #878787; - } - } -} - -.action-wrapper { - >button { - margin-right: 2px; - - &:last-child { - margin: 0; - } - } } \ No newline at end of file diff --git a/src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/loadable.jsx b/src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/loadable.jsx index 1ba3e85..7cc0fe8 100644 --- a/src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/loadable.jsx +++ b/src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/loadable.jsx @@ -7,14 +7,11 @@ import { Table, message, Pagination, - Cascader, Modal, Dropdown, Form, - Row, - Col, } from "antd"; -import { pageSizeOptions } from "@/config/character.config.js"; +import { dictionary } from "@/config/common"; import moment from "moment"; import "./index.scss"; import { DeleteOutlined } from "@ant-design/icons"; @@ -24,15 +21,14 @@ function OutNvrMgm(props) { // 默认数据 const defaultData = { - address: "", - device_name: "", - road_name: "", //路段名称 - operator: -1, //运营商 + name: "", // 设备名称 + operator_id: "", //运营商 + road_id: "", //路段名称 }; // 分页数据 const [pageInfo, setPageInfo] = useState({ - pageNum: 1, - pageSize: 15, + pn: 1, + page_size: 15, }); // 表单数据 const [formData, setFormData] = useState(defaultData); @@ -50,32 +46,30 @@ function OutNvrMgm(props) { list: [], }); - const roadSelectRef = useRef(); - const [editModalVisible, setEditModalVisible] = useState(false); - const [editStatus, setEditStatus] = useState(false); - const [storeData, setStoreData] = useState([{ label: "全部", value: -1 }]); //所属商户 + const [visible, setVisible] = useState(false); + const [storeData, setStoreData] = useState([]); //所属商户 const [roadData, setRoadData] = useState([]); - const [deviceTypeData, setDeviceTypeData] = useState([]); + const [roadData1, setRoadData1] = useState([]); - const [formSubmitData, setFormSubmitData] = useState({ + const defRowData = { address: "", - create_time: "", - device_name: "", + name: "", + operator_id: "", + road_id: "", ip_address: "", - network_mode: "", - operator: "", - id: "", - password: "", port: "", - road_name: "", - type: "", - user_name: "", video_port: "", - }); + network_mode: "", + user_name: "", + password: "", + lng_lat: "", + address: "", + }; + // 行数据 + const [rowData, setRowData] = useState(defRowData); useEffect(() => { getSelectList(); - getDeviceType(); }, []); // 访问接口，获取表格 @@ -86,7 +80,18 @@ function OutNvrMgm(props) { const getSelectList = () => { ajax.getOperator().then( (res) => { - setStoreData([...storeData, ...res.data]); + setStoreData(res?.data || []); + }, + (err) => { + console.log(err); + } + ); + }; + + const getAllRoad = (id, setData) => { + ajax.getAllRoadByOperatort({ operator_id: id }).then( + (res) => { + setData(res?.data || []); }, (err) => { console.log(err); @@ -94,6 +99,20 @@ function OutNvrMgm(props) { ); }; + // 获取道路详情 + async function getRoadInfo(id, callback) { + await ajax.getOrpRoadInfo({ id }).then( + (res) => { + // console.log(res?.data); + callback(res?.data || {}); + }, + (err) => { + console.log(err); + callback({}); + } + ); + } + // 获取列表数据 const getData = () => { let postData = { ...formData }; @@ -102,7 +121,7 @@ function OutNvrMgm(props) { } // console.log(postData); setTabLoading(true); - ajax.getNVRListData({ ...postData, ...pageInfo }).then( + ajax.getOutNvrList({ ...postData, ...pageInfo }).then( (res) => { if (parseInt(res?.status) === 20000) { setResultData(res?.data || {}); @@ -123,7 +142,7 @@ function OutNvrMgm(props) { // 检索数据 const handleSearch = () => { setLoading(true); - setPageInfo({ ...pageInfo, ...{ pageNum: 1 } }); + setPageInfo({ ...pageInfo, ...{ pn: 1 } }); setHoldData(formData); setIsAjax(!isAjax); }; @@ -134,15 +153,17 @@ function OutNvrMgm(props) { // position: ["bottomCenter"], showQuickJumper: true, showSizeChanger: true, - current: pageInfo.pageNum, + current: pageInfo.pn, total: resultData?.total, // showTotal: () => `共 ${resultData.total || 0} 条`, - pageSize: pageInfo.pageSize, - pageSizeOptions: Array.from(new Set([...[15], ...(pageSizeOptions || [])])), + pageSize: pageInfo.page_size, + pageSizeOptions: Array.from( + new Set([...[15], ...(dictionary?.pageSizeOptions || [])]) + ), onChange: (current, size) => { setPageInfo({ ...pageInfo, - ...{ pageNum: pageInfo.pageSize == size ? current : 1, pageSize: size }, + ...{ pn: pageInfo.page_size == size ? current : 1, page_size: size }, }); setIsAjax(!isAjax); }, @@ -155,60 +176,40 @@ function OutNvrMgm(props) { const handleDel = (item) => { Modal.confirm({ title: "确认删除？", - content: `是否确认删除设备：${item.device_name} ？`, + content: `是否确认删除设备：${item.name} ？`, icon: , onOk: () => { - handleDelToServer(item.id) - .then((msg) => { - message.success(msg || "删除成功"); - }) - .catch((err) => { - message.error(err); - }); + handleDelToServer(item.id); }, }); }; - const getRoadById = (id) => { - return new Promise((resolved, rejected) => { - ajax - .getAllRoad({ operator_id: id }) - .then((e) => { - if (e.status == 20000) { - resolved(e.data); - } - }) - .catch((err) => { - console.error(err); - rejected(err); - }); - }); - }; - const handleDelToServer = (id) => { - return new Promise((resolved, rejected) => { - ajax - .nvrDel({ id: id }) - .then((e) => { - if (e.status == 20000) { - resolved(e.message); - } - }) - .catch((err) => { - rejected(err); - }); - }); + ajax.nvrDel({ id: id }).then( + (res) => { + if (res.status == 20000) { + message.success(res.message || "删除成功"); + } else { + message.error(res.message); + } + }, + (err) => { + console.log(err); + message.error("服务器异常"); + } + ); }; + + // 编辑 const handleEdit = (item) => { - setEditStatus(true); - form.setFieldsValue({ - ...item, - }); - setEditModalVisible(true); + setRowData(item); + form.setFieldsValue(item); + setVisible(true); }; - const editModalCancel = () => { - setEditModalVisible(false); - form.resetFields(); + + // 取消 + const onCancel = () => { + setVisible(false); }; // 操作-下拉 @@ -224,22 +225,22 @@ function OutNvrMgm(props) { width: 60, align: "center", render: (val, row, index) => { - return <>{index + 1 + pageInfo.pageSize * (pageInfo.pageNum - 1)}; + return <>{index + 1 + pageInfo.page_size * (pageInfo.pn - 1)}; }, }, { title: "设备名称", - dataIndex: "device_name", + dataIndex: "name", align: "center", }, { title: "区域", - dataIndex: "road_name", + dataIndex: "area_name", align: "center", }, { title: "所属车场", - dataIndex: "operqator", + dataIndex: "road_name", align: "center", }, { @@ -270,7 +271,7 @@ function OutNvrMgm(props) { }, { title: "更新时间", - dataIndex: "create_time", + dataIndex: "update_time", align: "center", width: 110, }, @@ -313,93 +314,71 @@ function OutNvrMgm(props) { } }; - const getDeviceType = () => { - ajax.getDeviceTypeList().then((e) => { - setDeviceTypeData([...deviceTypeData, ...e.data]); - }); - }; - - const handleEditFinish = () => { - console.log("form finish"); - }; - - const nvrUpdate = (params) => { - return new Promise((resolved, rejected) => { - ajax - .nvrUpdate(params) - .then((e) => { - if (e.status == 20000) { - resolved(e.message); - } - }) - .catch((err) => { - rejected(err); - }); - }); - }; - const nvrAdd = (params) => { - return new Promise((resolved, rejected) => { - ajax - .nvrAdd(params) - .then((e) => { - if (e.status == 20000) { - resolved(e.message); - } - }) - .catch((err) => { - rejected(err); - }); - }); - }; + // 表单改变事件 + const handleForm = async (changedValues, allValues) => { + // console.log(changedValues, allValues); + let obj = {}; + let key = Object.keys(changedValues)[0]; + let val = Object.values(changedValues)[0]; + switch (key) { + case "operator_id": + obj[key] = val; + obj["road_id"] = ""; + obj["lng_lat"] = ""; + obj["address"] = ""; + if (val) { + getAllRoad(val, setRoadData1); + } else { + setRoadData1([]); + } + break; + case "road_id": + obj[key] = val; + if (val) { + await getRoadInfo(val, (e) => { + obj["lng_lat"] = e?.lng_lat || ""; + obj["address"] = e?.address || ""; + }); + } else { + obj["lng_lat"] = ""; + obj["address"] = ""; + } + break; - const handleAdd = () => { - setEditStatus(false); - form.resetFields(); - setEditModalVisible(true); + default: + obj[key] = val; + break; + } + form.setFieldsValue({ ...allValues, ...obj }); }; - const handleRoadChange = (v) => { - ajax.getRoadInfo({ road_id: v }).then((e) => { - if (e.status == 20000) { - form.setFieldValue("address", e.data.address); - form.setFieldValue("lng_lat", e.data.lng_lat); + // 表单提交 + const onFinish = (values) => { + // console.log(values); + ajax[values?.id ? "doEditOutNvr" : "doAddOutNvr"](values).then( + (res) => { + if (res?.status == 20000) { + message.success(res.message); + // setPageInfo({ ...pageInfo, ...{ pn: 1 } }); + setVisible(false); + setIsAjax(!isAjax); + } else { + message.error(res.message); + } + }, + (err) => { + console.log(err); } - }); - }; - - const handleOperaChange = (id) => { - // let roadSelect = document.querySelectorAll('.fenceModal .road-selector .ant-select-selection-item') - // if (roadSelect.length) { - // roadSelect[0].innerText = '' - // } - setFormSubmitData({ - ...formSubmitData, - road_name: undefined, - }); - form.setFieldValue("road_name", ""); - getRoadById(id).then((data) => { - setRoadData(data); - }); + ); }; - const handleSubmit = () => { - if (editStatus) { - // 编辑 - nvrUpdate(form.getFieldsValue()).then((msg) => { - message.success(msg || "设备更新成功"); - setEditModalVisible(false); - getData(); - }); - } else { - // 新增 - nvrAdd(form.getFieldsValue()).then((msg) => { - message.success(msg || "设备添加成功"); - setEditModalVisible(false); - getData(); - }); - } + // 添加按钮 + const handleAdd = () => { + setRowData(defRowData); + form.setFieldsValue(defRowData); + // form.resetFields(); + setVisible(true); }; - return ( <>
@@ -411,9 +390,9 @@ function OutNvrMgm(props) { - setFormData({ ...formData, device_name: e.target.value }) + setFormData({ ...formData, name: e.target.value }) } />
@@ -422,9 +401,17 @@ function OutNvrMgm(props) { setFormData({ ...formData, road_name: v })} + allowClear + showSearch + optionFilterProp="label" + options={roadData || []} + value={formData.road_id || undefined} + onChange={(v) => setFormData({ ...formData, road_id: v })} />
@@ -460,9 +450,7 @@ function OutNvrMgm(props) {
共查询到 - - {resultData.total_records || 0}{" "} - + {resultData.total || 0} 条结果
@@ -492,208 +480,117 @@ function OutNvrMgm(props) {
-
-
-
- - - - - - - - {/* - - */} - - - */} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
+
+
+ +
+ + + + + + + 经纬度} + name={"lng_lat"} + > + + +
+
+ 地址} + name={"address"} + > + + + + + +
+
+ + + -
- - -
+ + + +
+
+ + + + + + + +
+ + + + +
diff --git a/src/services/OutRoadMgm/OutNVRMgm.js b/src/services/OutRoadMgm/OutNVRMgm.js new file mode 100644 index 0000000..0e943ad --- /dev/null +++ b/src/services/OutRoadMgm/OutNVRMgm.js @@ -0,0 +1,17 @@ +import ajax from "@/config/ajax"; +// --NVR管理-- +export default { + // 获取商户对应的所有的路段 + getAllRoadByOperatort: (data) => + ajax({ + url: "/api/orp/road/get_all_road_by_operator", + type: "post", + data, + }), + // 列表 + getOutNvrList: (data) => + ajax({ url: "/api/orp/nvr/nvr_list", type: "post", data }), + // 新增 + doAddOutNvr: (data) => + ajax({ url: "/api/orp/nvr/add_nvr", type: "post", data }), +}; diff --git a/src/services/OutRoadMgm/index.js b/src/services/OutRoadMgm/index.js index cdafc6c..68acf4e 100644 --- a/src/services/OutRoadMgm/index.js +++ b/src/services/OutRoadMgm/index.js @@ -1,8 +1,10 @@ import OutSegment from "./OutSegment"; import ZombieCarMgm from "./ZombieCarMgm"; import OutParkingRecordInquiry from "./OutParkingRecordInquiry"; +import OutNVRMgm from "./OutNVRMgm"; export default { ...OutSegment, ...ZombieCarMgm, ...OutParkingRecordInquiry, + ...OutNVRMgm, };