Browse Source

fix(): 设备管理页面修改

tags/PMS_Frontend_v1.0.6-develop
fengxiang 2 years ago
parent
commit
a0b3afb110
  1. 196
      src/pages/OutRoadMgm/OutDeviceMgm/OutDevice/loadable.jsx
  2. 57
      src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/index.scss
  3. 411
      src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/loadable.jsx
  4. 56
      src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/index.scss
  5. 469
      src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/loadable.jsx

196
src/pages/OutRoadMgm/OutDeviceMgm/OutDevice/loadable.jsx

@ -17,9 +17,7 @@ import ajaxCom from "@/services";
import ajax from "@/services/OperationCenter/OperationMarket";
import { dictionary } from "@/config/common";
import moment from "moment";
import { getToken } from "@/config/cookie";
import "./index.scss";
import errorImg from "@/assets/images/layout/error.png";
//
function OutDevice() {
@ -27,15 +25,11 @@ function OutDevice() {
const [pageType, setPageType] = useState("1");
//
const defaultData = {
moduleId: "", //
location: [], // id
areaIds: [], //
categoryIds: [], //
putStatuses: [], //
showTimes: "", //
updateTimes: "", //
advertId: "", // 广ID
title: "", //
areaId: "", //
operator: "", //
park_name: "", //
park_type: "", //
is_fail: "", //
};
//
const [pageInfo, setPageInfo] = useState({
@ -57,55 +51,18 @@ function OutDevice() {
total: 0,
list: [],
});
//
const defRowData = {
title: "", // 广
categoryId: "", // 广 id
areaIds: [], // id
moduleId: "", // 广id
location: "", // id
imgUrl: "", // 广
jumpUrlType: "1", // 广 url 1 URL 2
jumpUrl: "", // URL
//
publishList: [
{
startDate: "",
endDate: "",
lowerTime: "",
upperTime: "",
},
],
};
//
const [rowData, setRowData] = useState(defRowData);
//
const [uploading, setUploading] = useState(false);
//
const [moduleArr, setModuleArr] = useState([]);
//
const [showArr, setShowArr] = useState([]);
//
const [showArr1, setShowArr1] = useState([]);
const [rowData, setRowData] = useState({});
//
const [storeData, setStoreData] = useState([]);
//
const [areaList, setAreaList] = useState([]);
// 广
const [pathList, setPathList] = useState([]);
//
const [sortArr, setSortArr] = useState([]);
//
const [modalObj, setModalObj] = useState({
visible: false, //
title: "修改标签", //
index: 0, //
name: "", //
});
//
const [parkList, setParkList] = useState([]);
// 访
useEffect(() => {
getSelectList();
getModuleList();
getTypeList();
}, []);
// 访
@ -113,12 +70,11 @@ function OutDevice() {
getData();
}, [isAjax]);
// -
const statusArr = [
{ value: "0", label: "已保存" },
{ value: "1", label: "待上架" },
{ value: "2", label: "已上架" },
{ value: "3", label: "已下架" },
// -
const failArr = [
{ value: "0", label: "全部" },
{ value: "1", label: "是" },
{ value: "2", label: "否" },
];
// -
@ -196,7 +152,7 @@ function OutDevice() {
setRowData(record);
if (param.key == "1") {
//
setPageType("3");
message.warn("暂无设备");
}
};
@ -228,18 +184,9 @@ function OutDevice() {
if (!loading) {
postData = { ...holdData };
}
//
const newObj = {
moduleId: postData?.moduleId,
areaIds: postData?.areaIds,
categoryIds: postData?.categoryIds,
putStatuses: postData?.putStatuses,
advertId: postData?.advertId,
title: postData?.title,
};
// console.log(postData, newObj);
// console.log(postData);
setTabLoading(true);
ajax.getAdvertList({ ...newObj, ...pageInfo }).then(
ajax.getAdvertList({ ...postData, ...pageInfo }).then(
(res) => {
if (parseInt(res?.status) === 20000) {
setResultData(res?.data || {});
@ -273,30 +220,11 @@ function OutDevice() {
//
const getSelectList = () => {
// 广
ajax.getAdvertPathList().then(
(res) => {
if (parseInt(res?.status) === 20000) {
setPathList(res?.data || []);
} else {
message.error(res?.message);
}
},
(err) => {
console.log(err);
}
);
};
//
const getModuleList = (id, setObj) => {
ajax.getAdvertShowList(id ? { moduleId: id } : undefined).then(
//
ajaxCom.getAreaTree().then(
(res) => {
if (parseInt(res?.status) === 20000) {
if (id) {
setObj(res?.data?.list || []);
} else {
setModuleArr(res?.data?.list || []);
}
setAreaList(res?.data || []);
} else {
message.error(res?.message);
}
@ -305,14 +233,11 @@ function OutDevice() {
console.log(err);
}
);
};
//
const getTypeList = () => {
ajax.getAdvertTypeList().then(
//
ajaxCom.getOperator().then(
(res) => {
if (parseInt(res?.status) === 20000) {
setSortArr(res?.data?.list || []);
setStoreData(res?.data || []);
} else {
message.error(res?.message);
}
@ -342,57 +267,35 @@ function OutDevice() {
className="form-con"
allowClear
fieldNames={{
value: "moduleId",
label: "moduleName",
}}
options={moduleArr || []}
placeholder="全部"
value={formData?.moduleId || undefined}
onChange={(e) => setFormData({ ...formData, moduleId })}
/>
</div>
{/* <div className="form-box">
<div className="form-txt">区域</div>
<Cascader
className="form-con"
allowClear
placeholder="全部"
multiple
maxTagCount="responsive"
fieldNames={{
label: "name",
value: "id",
children: "children",
label: "name",
}}
options={areaList || []}
value={formData?.areaIds || []}
onChange={(e) => setFormData({ ...formData, areaIds: e })}
placeholder="全部"
value={formData?.areaId || undefined}
onChange={(e) => setFormData({ ...formData, areaId: e })}
/>
</div> */}
</div>
<div className="form-box">
<div className="form-txt">商户名称</div>
<Select
className="form-con"
allowClear
fieldNames={{
value: "moduleId",
label: "moduleName",
}}
options={showArr || []}
placeholder="全部"
value={formData?.location || undefined}
onChange={(e) => setFormData({ ...formData, location: e })}
options={storeData || []}
value={formData?.operator || undefined}
onChange={(e) => setFormData({ ...formData, operator: e })}
/>
</div>
<div className="form-box">
<div className="form-txt">停车场名称</div>
<Input
<Select
className="form-con"
placeholder="请输入准确信息"
value={formData?.advertId}
onChange={(e) =>
setFormData({ ...formData, advertId: e.target.value })
}
allowClear
placeholder="全部"
options={storeData || []}
value={formData?.park_name || undefined}
onChange={(e) => setFormData({ ...formData, park_name: e })}
/>
</div>
<div className="form-box">
@ -400,14 +303,10 @@ function OutDevice() {
<Select
className="form-con"
allowClear
fieldNames={{
value: "categoryId",
label: "name",
}}
options={sortArr || []}
placeholder="全部"
value={formData?.categoryIds || undefined}
onChange={(e) => setFormData({ ...formData, categoryIds: e })}
options={parkList || []}
value={formData?.park_type || undefined}
onChange={(e) => setFormData({ ...formData, park_type: e })}
/>
</div>
<div className="form-box">
@ -415,10 +314,10 @@ function OutDevice() {
<Select
className="form-con"
allowClear
options={statusArr || []}
placeholder="全部"
value={formData?.putStatuses || undefined}
onChange={(e) => setFormData({ ...formData, putStatuses: e })}
options={failArr || []}
value={formData?.is_fail || undefined}
onChange={(e) => setFormData({ ...formData, is_fail: e })}
/>
</div>
<div className="form-btn">
@ -464,13 +363,6 @@ function OutDevice() {
</ResultFlowResult>
</div>
</div>
{/* 详情 */}
<div className={pageType === "3" ? "wraper" : "wraper hidden"}>
<div className="row-operate">
<Button onClick={() => handleBack()}>返回</Button>
</div>
<div className="full-group">暂无设备</div>
</div>
</div>
);
}

57
src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/index.scss

@ -149,57 +149,38 @@ $color-primary : var(--color-primary);
}
.cc-result-flow {
flex: 1;
}
.result-data {
@include flex-columns;
}
width: 100%;
height: calc(100% - 34px - 13px);
.yisa-table {
flex: 1;
width: 100%;
height: calc(100% - 32px - 15px);
overflow-y: auto !important;
@include scrollBar(var(--color-user-list-bg), #3B97FF);
.ant-table-body {
@include scrollBar(#616b83, #bebebe);
.ant-table-thead {
th {
background: var(--color-table-header-bg) !important;
}
}
.yisa-table .ant-table-thead .ant-table-cell {
background-color: #616b83 !important;
color: #ffffff !important;
font-size: 14px;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
font-weight: 700;
text-align: center;
border-right: none !important;
border-top-color: #888f9d !important;
border-color: #888f9d !important;
.ant-table-tbody {
td {
background: var(--color-table-body-bg) !important;
border-bottom-color: var(--color-table-border-bottom-color);
}
.ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table,
.ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table {
border-top: none !important;
border-left: none !important;
tr:nth-child(even) {
td {
background: var(--color-table-body-bg-nth-child-even) !important;
}
.ant-table-tbody .ant-table-row .ant-table-cell {
background-color: #3e4557 !important;
color: #ffffff !important;
text-align: center;
font-size: 14px;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
border-right: none !important;
border-left: none !important;
border-bottom-color: #626b7e !important;
}
}
.editMap {
color: #3aa8fe;
cursor: pointer;
}
}
}
}
}

411
src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/loadable.jsx

@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect } from "react";
import { ResultFlowResult, BaseMap, Marker } from "@/components";
import { ResultFlowResult } from "@/components";
import {
Select,
Input,
@ -9,7 +9,7 @@ import {
Pagination,
Cascader,
Modal,
TreeSelect,
Dropdown,
Form,
Row,
Col,
@ -18,26 +18,39 @@ import {
import { pageSizeOptions } from "@/config/character.config.js";
import moment from "moment";
import "./index.scss";
import {
SearchOutlined,
DeleteOutlined,
PlayCircleOutlined,
EditOutlined,
PlusCircleOutlined,
} from "@ant-design/icons";
import { DeleteOutlined } from "@ant-design/icons";
import ajax from "@/services";
function OutMonitorMgm(props) {
const [form] = Form.useForm();
const [ajaxLoading, setAjaxLoading] = useState(false);
const [getModalData, setGetModalData] = useState({
attendDistance: "",
effective: "",
//
const defaultData = {
address: "",
device_code: "",
road_name: "", //
operator: -1, //
};
//
const [pageInfo, setPageInfo] = useState({
pageNum: 1,
pageSize: 15,
});
const [getEditModal, setGetEditModal] = useState({
attendDistance: "",
attend: "",
attendName: "",
//
const [formData, setFormData] = useState(defaultData);
// -
const [holdData, setHoldData] = useState(formData);
// 访isAjax
const [isAjax, setIsAjax] = useState(false);
//
const [loading, setLoading] = useState(false);
//
const [tabLoading, setTabLoading] = useState(false);
//
const [resultData, setResultData] = useState({
total: 0,
list: [],
});
const [nvrData, setNvrData] = useState([]);
const [berthData, setBerthData] = useState([]);
const [berthSelectData, setBerthSelectData] = useState([]);
@ -45,43 +58,87 @@ function OutMonitorMgm(props) {
const [editModalVisible, setEditModalVisible] = useState(false);
const [editStatus, setEditStatus] = useState(false);
const [storeData, setStoreData] = useState([{ label: "全部", value: -1 }]); //
const [getStatus, setGetStatus] = useState(2);
const [getMap, setGetMap] = useState(2);
const [getScope, setGetScope] = useState(2);
const [editId, setEditId] = useState("");
const [resultData, setResultData] = useState({
data: [],
total_records: 0,
export_url: "",
process_url: "",
});
const parameter = {
address: "",
device_code: "",
road_name: "", //
operator: -1, //
export: false,
pn: 1,
length: Number(pageSizeOptions[0]), //
useEffect(() => {
getNvrList();
getSelectList();
}, []);
// 访
useEffect(() => {
getData();
}, [isAjax]);
const getSelectList = () => {
ajax.getOperator().then(
(res) => {
setStoreData([...storeData, ...res.data]);
},
(err) => {
console.log(err);
}
);
};
const [formData, setFormData] = useState(parameter);
const [lastFormData, setLastFormData] = useState(formData);
const lastFormDataRef = useRef(formData);
const [attendanceVisible, setAttendanceVisible] = useState(false);
const [markers, setMarkers] = useState([]);
//
const onChangeList = (value) => {
setFormData({ ...formData, region: value });
//
const getData = () => {
let postData = { ...formData };
if (!loading) {
postData = { ...holdData };
}
// console.log(postData);
setTabLoading(true);
ajax.getMonitorList({ ...postData, ...pageInfo }).then(
(res) => {
if (parseInt(res?.status) === 20000) {
setResultData(res?.data || {});
} else {
message.error(res?.message);
}
setLoading(false);
setTabLoading(false);
},
(err) => {
console.log(err);
setLoading(false);
setTabLoading(false);
}
);
};
const getOperatorData = () => {
ajax.getOperator().then((e) => {
setStoreData([...storeData, ...e.data]);
//
const handleSearch = () => {
setLoading(true);
setPageInfo({ ...pageInfo, ...{ pageNum: 1 } });
setHoldData(formData);
setIsAjax(!isAjax);
};
//
const paginationProps = {
className: "pagination-common",
// position: ["bottomCenter"],
showQuickJumper: true,
showSizeChanger: true,
current: pageInfo.pageNum,
total: resultData?.total,
// showTotal: () => ` ${resultData.total || 0} `,
pageSize: pageInfo.pageSize,
pageSizeOptions: Array.from(new Set([...[15], ...(pageSizeOptions || [])])),
onChange: (current, size) => {
setPageInfo({
...pageInfo,
...{ pageNum: pageInfo.pageSize == size ? current : 1, pageSize: size },
});
setIsAjax(!isAjax);
},
};
const handlePlay = (item) => {
message.error(`播放数据暂未对接`);
};
const handleDel = (item, index) => {
const handleDel = (item) => {
Modal.confirm({
title: "确认删除?",
content: `是否确认删除监控设备:${item.device_name}`,
@ -90,12 +147,6 @@ function OutMonitorMgm(props) {
handleDelToServer(item.id)
.then((msg) => {
message.success(msg || "删除成功");
let copyData = resultData.data;
copyData.splice(index, 1);
setResultData({
...resultData,
data: [...copyData],
});
})
.catch((err) => {
message.error(err);
@ -164,188 +215,94 @@ function OutMonitorMgm(props) {
const onTransferSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
};
//
const handleColumns = (tab) => {
let result = [...tableColumns];
switch (tab) {
case "1":
result.splice(9, 1);
break;
}
return result;
};
// -
const items = [
{ key: "1", label: <span>查看监控</span> },
{ key: "2", label: <span>编辑</span> },
{ key: "3", label: <span>删除</span> },
];
//
const tableColumns = [
{
title: "序号",
width: 60,
render: (_, record, index) => {
return index + 1;
align: "center",
render: (val, row, index) => {
return <>{index + 1 + pageInfo.pageSize * (pageInfo.pageNum - 1)}</>;
},
},
{
title: "所属路段",
title: "所属车场",
dataIndex: "road_name",
align: "center",
},
{
title: "所属商户",
dataIndex: "operator",
},
{
title: "设备名称",
title: "运营商名称",
dataIndex: "device_name",
align: "center",
},
{
title: "所属NVR",
dataIndex: "nvr_name",
align: "center",
},
{
title: "设备号/通道编号",
title: "设备编号",
dataIndex: "device_code",
align: "center",
},
{
title: "泊位号",
title: "通道号",
dataIndex: "berth_codes",
align: "center",
},
{
title: "创建日期",
dataIndex: "create_time",
align: "center",
width: 110,
},
{
title: "操作",
width: 135,
render: (text, record, index) => {
align: "center",
width: 140,
render: (val, row, index) => {
return (
<>
<div className="action-wrapper">
<Button
type="primary"
style={{ background: "red", borderColor: "red" }}
shape="circle"
size="middle"
icon={<DeleteOutlined />}
onClick={() => handleDel(record, index)}
/>
<Button
type="primary"
shape="circle"
size="middle"
icon={<PlayCircleOutlined />}
onClick={() => handlePlay(record)}
/>
<Button
type="primary"
shape="circle"
s
size="middle"
icon={<EditOutlined />}
onClick={() => handleEdit(record)}
/>
</div>
</>
<Dropdown
arrow
placement="bottomLeft"
menu={{
items,
onClick: (key) => {
return clickDropDown(key, row);
},
}}
>
<Button type="primary">操作</Button>
</Dropdown>
);
},
},
];
//
const [getRecordID, setGetRecordId] = useState({});
const editBtn = (record) => {
setGetRecordId(record.id);
setGetEditModal(
Object.assign({}, getEditModal, {
attendName: record.attendName,
})
);
setAttendanceVisible(true);
setMarkers([
{
lng: record.attendanceLng,
lat: record.attendanceLat,
},
]);
};
//
const getData = (data = formData) => {
setAjaxLoading(true);
ajax.getMonitorList(data).then(
(res) => {
setAjaxLoading(false);
if (res.status === 20000) {
let resDataArr = res?.data?.list?.length
? res.data.list.map((item) => {
item.key = item.id;
return item;
})
: [];
setResultData({
...resultData,
data: resDataArr,
total_records: res.data.total,
});
//
const clickDropDown = (param, record) => {
// console.log(param.key, record);
// setRowData(record);
if (param.key == "1") {
//
handlePlay(record);
} else if (param.key == "2") {
//
handleEdit(record);
} else {
setResultData({
data: [],
total_records: 0,
export_url: "",
process_url: "",
});
message.error(res.message);
}
},
(err) => {
console.log(err);
}
);
};
//
const changePn = (pn, length) => {
if (lastFormData.length === length) {
setLastFormData(Object.assign({}, lastFormData, { pn: pn }));
lastFormDataRef.current = Object.assign({}, lastFormData, { pn: pn });
getData(Object.assign({}, lastFormData, { pn: pn }));
//
handleDel(record);
}
};
//
const changeLength = (pn, length) => {
setFormData(Object.assign({}, formData, { pn: 1, length: length }));
setLastFormData(Object.assign({}, lastFormData, { pn: 1, length: length }));
lastFormDataRef.current = Object.assign({}, lastFormData, {
pn: 1,
length: length,
});
getData(Object.assign({}, lastFormData, { pn: 1, length: length }));
};
//
const getSearchData = (data = formData) => {
getData(data);
};
//
const formReset = () => {
setFormData({
...parameter,
});
getData({ ...parameter });
};
const handleAttendDistance = (v) => {
setGetModalData({ attendDistance: v });
if (v == 1) {
setGetStatus(2);
}
if (v == 2) {
setGetStatus(1);
}
};
const handleDistance = (v) => {
setGetEditModal({ attendDistance: v });
if (v == 1) {
setGetMap(2);
}
if (v == 2) {
setGetMap(1);
}
};
const handleEditFinish = () => {
console.log("form finish");
};
@ -400,11 +357,6 @@ function OutMonitorMgm(props) {
});
}
};
useEffect(() => {
getData();
getNvrList();
getOperatorData();
}, []);
return (
<>
@ -413,7 +365,7 @@ function OutMonitorMgm(props) {
<div className="title">查询条件</div>
<div className="form-Wrap">
<div className="yisa-search">
<label>设备/通道编号</label>
<label>设备编号</label>
<Input
className="form-con"
placeholder="请输入设备号/通道编号"
@ -424,31 +376,38 @@ function OutMonitorMgm(props) {
/>
</div>
<div className="yisa-search">
<label>名称</label>
<label>运营商名称</label>
<Select
className="form-con"
placeholder="请选择"
options={storeData || []}
value={formData.operator}
options={storeData}
onChange={(v) => setFormData({ ...formData, operator: v })}
onChange={(e) => setFormData({ ...formData, operator: e })}
/>
</div>
<div className="yisa-search">
<label>所属路段</label>
<Input
<label>所属车场</label>
<Select
className="form-con"
placeholder="请输入所属路段"
placeholder="请选择"
options={storeData || []}
value={formData.road_name}
onChange={(e) =>
setFormData({ ...formData, road_name: e.target.value })
}
onChange={(e) => setFormData({ ...formData, road_name: e })}
/>
</div>
<div className="form-btn">
<Button className="reset" onClick={() => formReset()}>
<Button
className="reset"
onClick={() => setFormData(defaultData)}
>
重置
</Button>
<Button className="submit" type="primary" onClick={getSearchData}>
<Button
className="submit"
type="primary"
onClick={handleSearch}
loading={loading}
>
查询
</Button>
</div>
@ -474,31 +433,19 @@ function OutMonitorMgm(props) {
</div>
</div>
<ResultFlowResult
ajaxLoad={ajaxLoading}
resultData={resultData.data ? resultData.data : []}
ajaxLoad={tabLoading}
resultData={resultData?.list || []}
>
<Table
bordered
// bordered
className="yisa-table"
dataSource={resultData.data}
columns={handleColumns()}
scroll={{ y: 660 }}
// rowKey={record => record.cap_id + "_" + record.bk_id}
rowKey={(row) => row.id}
dataSource={resultData?.list || []}
columns={tableColumns}
pagination={false}
loading={ajaxLoading}
/>
<Pagination
className="pagination-common"
showSizeChanger
showQuickJumper
showTotal={() => `${resultData.total_records}`}
total={resultData.total_records}
current={lastFormData.pn}
pageSize={lastFormData.length}
pageSizeOptions={pageSizeOptions}
onChange={changePn}
onShowSizeChange={changeLength}
loading={tabLoading}
/>
<Pagination {...paginationProps} className="pagination-common" />
</ResultFlowResult>
</div>
</div>

56
src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/index.scss

@ -151,55 +151,35 @@ $color-primary : var(--color-primary);
}
.cc-result-flow {
flex: 1;
}
.result-data {
@include flex-columns;
}
width: 100%;
height: calc(100% - 34px - 13px);
.yisa-table {
flex: 1;
width: 100%;
height: calc(100% - 32px - 15px);
overflow-y: auto !important;
@include scrollBar(var(--color-user-list-bg), #3B97FF);
.ant-table-body {
@include scrollBar(#616b83, #bebebe);
.ant-table-thead {
th {
background: var(--color-table-header-bg) !important;
}
}
.yisa-table .ant-table-thead .ant-table-cell {
background-color: #616b83 !important;
color: #ffffff !important;
font-size: 14px;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
font-weight: 700;
text-align: center;
border-right: none !important;
border-top-color: #888f9d !important;
border-color: #888f9d !important;
.ant-table-tbody {
td {
background: var(--color-table-body-bg) !important;
border-bottom-color: var(--color-table-border-bottom-color);
}
.ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table,
.ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table {
border-top: none !important;
border-left: none !important;
tr:nth-child(even) {
td {
background: var(--color-table-body-bg-nth-child-even) !important;
}
}
}
.ant-table-tbody .ant-table-row .ant-table-cell {
background-color: #3e4557 !important;
color: #ffffff !important;
text-align: center;
font-size: 14px;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
border-right: none !important;
border-left: none !important;
border-bottom-color: #626b7e !important;
}
}
.editMap {
color: #3aa8fe;
cursor: pointer;
}
}

469
src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/loadable.jsx

@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect } from "react";
import { ResultFlowResult, BaseMap, Marker } from "@/components";
import { ResultFlowResult } from "@/components";
import {
Select,
Input,
@ -9,7 +9,7 @@ import {
Pagination,
Cascader,
Modal,
TreeSelect,
Dropdown,
Form,
Row,
Col,
@ -17,54 +17,46 @@ import {
import { pageSizeOptions } from "@/config/character.config.js";
import moment from "moment";
import "./index.scss";
import {
SearchOutlined,
DeleteOutlined,
PlayCircleOutlined,
EditOutlined,
PlusCircleOutlined,
} from "@ant-design/icons";
import { DeleteOutlined } from "@ant-design/icons";
import ajax from "@/services";
function OutNvrMgm(props) {
// const configData = props.sysConfig["lib-deploy"] || {};
const [form] = Form.useForm();
const [ajaxLoading, setAjaxLoading] = useState(false);
const [getModalData, setGetModalData] = useState({
attendDistance: "",
effective: "",
//
const defaultData = {
address: "",
device_name: "",
road_name: "", //
operator: -1, //
};
//
const [pageInfo, setPageInfo] = useState({
pageNum: 1,
pageSize: 15,
});
const [getEditModal, setGetEditModal] = useState({
attendDistance: "",
attend: "",
attendName: "",
//
const [formData, setFormData] = useState(defaultData);
// -
const [holdData, setHoldData] = useState(formData);
// 访isAjax
const [isAjax, setIsAjax] = useState(false);
//
const [loading, setLoading] = useState(false);
//
const [tabLoading, setTabLoading] = useState(false);
//
const [resultData, setResultData] = useState({
total: 0,
list: [],
});
const [getCanCaDer, setGetCanCaDer] = useState([]);
const roadSelectRef = useRef();
const [editModalVisible, setEditModalVisible] = useState(false);
const [editStatus, setEditStatus] = useState(false);
const [storeData, setStoreData] = useState([{ label: "全部", value: -1 }]); //
const [getStatus, setGetStatus] = useState(2);
const [getMap, setGetMap] = useState(2);
const [getScope, setGetScope] = useState(2);
const [getPark, setGetPark] = useState([]);
const [roadData, setRoadData] = useState([]);
const [deviceTypeData, setDeviceTypeData] = useState([]);
const [resultData, setResultData] = useState({
data: [],
total_records: 0,
export_url: "",
process_url: "",
});
const parameter = {
address: "",
device_name: "",
road_name: "", //
operator: -1, //
export: false,
pn: 1,
length: Number(pageSizeOptions[0]), //
};
const [formData, setFormData] = useState(parameter);
const [formSubmitData, setFormSubmitData] = useState({
address: "",
create_time: "",
@ -80,23 +72,87 @@ function OutNvrMgm(props) {
user_name: "",
video_port: "",
});
const [lastFormData, setLastFormData] = useState(formData);
const lastFormDataRef = useRef(formData);
const [attendanceVisible, setAttendanceVisible] = useState(false);
const [markers, setMarkers] = useState([]);
//
const onChangeList = (value) => {
setFormData({ ...formData, region: value });
useEffect(() => {
getSelectList();
getDeviceType();
}, []);
// 访
useEffect(() => {
getData();
}, [isAjax]);
const getSelectList = () => {
ajax.getOperator().then(
(res) => {
setStoreData([...storeData, ...res.data]);
},
(err) => {
console.log(err);
}
);
};
//
const getData = () => {
let postData = { ...formData };
if (!loading) {
postData = { ...holdData };
}
// console.log(postData);
setTabLoading(true);
ajax.getNVRListData({ ...postData, ...pageInfo }).then(
(res) => {
if (parseInt(res?.status) === 20000) {
setResultData(res?.data || {});
} else {
message.error(res?.message);
}
setLoading(false);
setTabLoading(false);
},
(err) => {
console.log(err);
setLoading(false);
setTabLoading(false);
}
);
};
const getOperatorData = () => {
ajax.getOperator().then((e) => {
setStoreData([...storeData, ...e.data]);
//
const handleSearch = () => {
setLoading(true);
setPageInfo({ ...pageInfo, ...{ pageNum: 1 } });
setHoldData(formData);
setIsAjax(!isAjax);
};
//
const paginationProps = {
className: "pagination-common",
// position: ["bottomCenter"],
showQuickJumper: true,
showSizeChanger: true,
current: pageInfo.pageNum,
total: resultData?.total,
// showTotal: () => ` ${resultData.total || 0} `,
pageSize: pageInfo.pageSize,
pageSizeOptions: Array.from(new Set([...[15], ...(pageSizeOptions || [])])),
onChange: (current, size) => {
setPageInfo({
...pageInfo,
...{ pageNum: pageInfo.pageSize == size ? current : 1, pageSize: size },
});
setIsAjax(!isAjax);
},
};
const handlePlay = (item) => {
message.error(`播放数据暂未对接`);
};
const handleDel = (item, index) => {
const handleDel = (item) => {
Modal.confirm({
title: "确认删除?",
content: `是否确认删除设备:${item.device_name}`,
@ -105,12 +161,6 @@ function OutNvrMgm(props) {
handleDelToServer(item.id)
.then((msg) => {
message.success(msg || "删除成功");
let copyData = resultData.data;
copyData.splice(index, 1);
setResultData({
...resultData,
data: [...copyData],
});
})
.catch((err) => {
message.error(err);
@ -118,6 +168,7 @@ function OutNvrMgm(props) {
},
});
};
const getRoadById = (id) => {
return new Promise((resolved, rejected) => {
ajax
@ -133,6 +184,7 @@ function OutNvrMgm(props) {
});
});
};
const handleDelToServer = (id) => {
return new Promise((resolved, rejected) => {
ajax
@ -158,240 +210,119 @@ function OutNvrMgm(props) {
setEditModalVisible(false);
form.resetFields();
};
//
const handleColumns = (tab) => {
let result = [...tableColumns];
switch (tab) {
case "1":
result.splice(9, 1);
break;
}
return result;
};
// -
const items = [
{ key: "1", label: <span>查看监控</span> },
{ key: "2", label: <span>编辑</span> },
{ key: "3", label: <span>删除</span> },
];
//
const tableColumns = [
{
title: "序号",
width: 60,
render: (_, record, index) => {
return index + 1;
align: "center",
render: (val, row, index) => {
return <>{index + 1 + pageInfo.pageSize * (pageInfo.pageNum - 1)}</>;
},
},
{
title: "设备名称",
dataIndex: "device_name",
align: "center",
},
{
title: "所属商户",
dataIndex: "operqator",
},
{
title: "所属路段",
title: "区域",
dataIndex: "road_name",
align: "center",
},
{
title: "地址",
dataIndex: "address",
},
{
title: "网络模式",
dataIndex: "network_mode",
title: "所属车场",
dataIndex: "operqator",
align: "center",
},
{
title: "IP地址/设备编码",
width: 145,
title: "IP地址",
dataIndex: "ip_address",
align: "center",
},
{
title: "端口号",
dataIndex: "port",
align: "center",
},
{
title: "视频端口号",
width: 110,
dataIndex: "video_port",
align: "center",
},
{
title: "用户名",
dataIndex: "user_name",
align: "center",
},
{
title: "密码",
dataIndex: "password",
align: "center",
},
{
title: "创建日期",
title: "更新时间",
dataIndex: "create_time",
align: "center",
width: 110,
},
{
title: "操作",
width: 135,
render: (text, record, index) => {
align: "center",
width: 140,
render: (val, row, index) => {
return (
<>
<div className="action-wrapper">
<Button
type="primary"
style={{ background: "red", borderColor: "red" }}
shape="circle"
size="middle"
icon={<DeleteOutlined />}
onClick={() => handleDel(record, index)}
/>
<Button
type="primary"
shape="circle"
size="middle"
icon={<PlayCircleOutlined />}
onClick={() => handlePlay(record)}
/>
<Button
type="primary"
shape="circle"
s
size="middle"
icon={<EditOutlined />}
onClick={() => handleEdit(record)}
/>
</div>
</>
<Dropdown
arrow
placement="bottomLeft"
menu={{
items,
onClick: (key) => {
return clickDropDown(key, row);
},
}}
>
<Button type="primary">操作</Button>
</Dropdown>
);
},
},
];
//
const [getRecordID, setGetRecordId] = useState({});
const editBtn = (record) => {
setGetRecordId(record.id);
setGetEditModal(
Object.assign({}, getEditModal, {
attendName: record.attendName,
})
);
setAttendanceVisible(true);
setMarkers([
{
lng: record.attendanceLng,
lat: record.attendanceLat,
},
]);
};
//
const getData = (data = formData) => {
setAjaxLoading(true);
ajax.getNVRListData(data).then(
(res) => {
setAjaxLoading(false);
if (res.status === 20000) {
let resDataArr = res?.data?.list?.length
? res.data.list.map((item) => {
item.key = item.id;
return item;
})
: [];
setResultData({
...resultData,
data: resDataArr,
total_records: res.data.total,
});
//
const clickDropDown = (param, record) => {
// console.log(param.key, record);
// setRowData(record);
if (param.key == "1") {
//
handlePlay(record);
} else if (param.key == "2") {
//
handleEdit(record);
} else {
setResultData({
data: [],
total_records: 0,
export_url: "",
process_url: "",
});
message.error(res.message);
//
handleDel(record);
}
},
(err) => {
console.log(err);
}
);
};
const getDeviceType = () => {
ajax.getDeviceTypeList().then((e) => {
setDeviceTypeData([...deviceTypeData, ...e.data]);
});
};
//
const changePn = (pn, length) => {
if (lastFormData.length === length) {
setLastFormData(Object.assign({}, lastFormData, { pn: pn }));
lastFormDataRef.current = Object.assign({}, lastFormData, { pn: pn });
getData(Object.assign({}, lastFormData, { pn: pn }));
}
};
//
const changeLength = (pn, length) => {
setFormData(Object.assign({}, formData, { pn: 1, length: length }));
setLastFormData(Object.assign({}, lastFormData, { pn: 1, length: length }));
lastFormDataRef.current = Object.assign({}, lastFormData, {
pn: 1,
length: length,
});
getData(Object.assign({}, lastFormData, { pn: 1, length: length }));
};
//
const getSearchData = (data = formData) => {
getData(data);
};
//
const formReset = () => {
setFormData({
...parameter,
});
getData({ ...parameter });
};
const getCascaderList = () => {
ajax.cascaderList().then((res) => {
if (res.status === 20000) {
setGetCanCaDer(res.data);
}
});
};
const handleAttendDistance = (v) => {
setGetModalData({ attendDistance: v });
if (v == 1) {
setGetStatus(2);
}
if (v == 2) {
setGetStatus(1);
}
};
const handleDistance = (v) => {
setGetEditModal({ attendDistance: v });
if (v == 1) {
setGetMap(2);
}
if (v == 2) {
setGetMap(1);
}
};
const handleType = (v) => {
setGetModalData({ attendDistance: v.target.value });
};
const handleMapType = (v) => {
setGetEditModal({ attend: v.target.value });
};
const handleScope = (value) => {
setGetModalData({
...getModalData,
effective: value,
});
if (value == 1) {
setGetScope(2);
}
if (value == 2) {
setGetScope(1);
}
};
const handleEditFinish = () => {
console.log("form finish");
};
const nvrUpdate = (params) => {
return new Promise((resolved, rejected) => {
ajax
@ -420,11 +351,13 @@ function OutNvrMgm(props) {
});
});
};
const handleAdd = () => {
setEditStatus(false);
form.resetFields();
setEditModalVisible(true);
};
const handleRoadChange = (v) => {
ajax.getRoadInfo({ road_id: v }).then((e) => {
if (e.status == 20000) {
@ -433,6 +366,7 @@ function OutNvrMgm(props) {
}
});
};
const handleOperaChange = (id) => {
// let roadSelect = document.querySelectorAll('.fenceModal .road-selector .ant-select-selection-item')
// if (roadSelect.length) {
@ -447,6 +381,7 @@ function OutNvrMgm(props) {
setRoadData(data);
});
};
const handleSubmit = () => {
if (editStatus) {
//
@ -464,12 +399,6 @@ function OutNvrMgm(props) {
});
}
};
useEffect(() => {
getData();
getCascaderList();
getOperatorData();
getDeviceType();
}, []);
return (
<>
@ -478,7 +407,7 @@ function OutNvrMgm(props) {
<div className="title">查询条件</div>
<div className="form-Wrap">
<div className="yisa-search">
<label>设备名称</label>
<label>视频设备名称</label>
<Input
className="form-con"
placeholder="请输入设备名称"
@ -493,38 +422,34 @@ function OutNvrMgm(props) {
<Select
className="form-con"
placeholder="请选择"
options={storeData || []}
value={formData.operator}
options={storeData}
onChange={(v) => setFormData({ ...formData, operator: v })}
/>
</div>
<div className="yisa-search">
<label>路段名称</label>
<Input
<label>车场名称</label>
<Select
className="form-con"
placeholder="请输入路段名称"
placeholder="请选择"
options={storeData || []}
value={formData.road_name}
onChange={(e) =>
setFormData({ ...formData, road_name: e.target.value })
}
/>
</div>
<div className="yisa-search">
<label>地址</label>
<Input
className="form-con"
placeholder="请输入地址"
value={formData.address}
onChange={(e) =>
setFormData({ ...formData, address: e.target.value })
}
onChange={(v) => setFormData({ ...formData, road_name: v })}
/>
</div>
<div className="form-btn">
<Button className="reset" onClick={() => formReset()}>
<Button
className="reset"
onClick={() => setFormData(defaultData)}
>
重置
</Button>
<Button className="submit" type="primary" onClick={getSearchData}>
<Button
className="submit"
type="primary"
onClick={handleSearch}
loading={loading}
>
查询
</Button>
</div>
@ -550,31 +475,19 @@ function OutNvrMgm(props) {
</div>
</div>
<ResultFlowResult
ajaxLoad={ajaxLoading}
resultData={resultData.data ? resultData.data : []}
ajaxLoad={tabLoading}
resultData={resultData?.list || []}
>
<Table
bordered
// bordered
className="yisa-table"
dataSource={resultData.data}
columns={handleColumns()}
scroll={{ y: 660 }}
// rowKey={record => record.cap_id + "_" + record.bk_id}
rowKey={(row) => row.id}
dataSource={resultData?.list || []}
columns={tableColumns}
pagination={false}
loading={ajaxLoading}
/>
<Pagination
className="pagination-common"
showSizeChanger
showQuickJumper
showTotal={() => `${resultData.total_records}`}
total={resultData.total_records}
current={lastFormData.pn}
pageSize={lastFormData.length}
pageSizeOptions={pageSizeOptions}
onChange={changePn}
onShowSizeChange={changeLength}
loading={tabLoading}
/>
<Pagination {...paginationProps} className="pagination-common" />
</ResultFlowResult>
</div>
</div>

Loading…
Cancel
Save