diff --git a/src/pages/OutRoadMgm/OutDeviceMgm/OutDevice/loadable.jsx b/src/pages/OutRoadMgm/OutDeviceMgm/OutDevice/loadable.jsx index af291e7..3a5926b 100644 --- a/src/pages/OutRoadMgm/OutDeviceMgm/OutDevice/loadable.jsx +++ b/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 })} - /> - - {/*
-
区域
- setFormData({ ...formData, areaIds: e })} + placeholder="全部" + value={formData?.areaId || undefined} + onChange={(e) => setFormData({ ...formData, areaId: e })} /> -
*/} +
商户名称
- setFormData({ ...formData, advertId: e.target.value }) - } + allowClear + placeholder="全部" + options={storeData || []} + value={formData?.park_name || undefined} + onChange={(e) => setFormData({ ...formData, park_name: e })} />
@@ -400,14 +303,10 @@ function OutDevice() { setFormData({ ...formData, putStatuses: e })} + options={failArr || []} + value={formData?.is_fail || undefined} + onChange={(e) => setFormData({ ...formData, is_fail: e })} />
@@ -464,13 +363,6 @@ function OutDevice() {
- {/* 详情 */} -
-
- -
-
暂无设备
-
); } diff --git a/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/index.scss b/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/index.scss index b033217..b3111ea 100644 --- a/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/index.scss +++ b/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/index.scss @@ -149,56 +149,37 @@ $color-primary : var(--color-primary); } .cc-result-flow { - flex: 1; - } - - .result-data { - @include flex-columns; - } - - .yisa-table { - flex: 1; + width: 100%; + height: calc(100% - 34px - 13px); + + .yisa-table { + width: 100%; + height: calc(100% - 32px - 15px); + overflow-y: auto !important; + @include scrollBar(var(--color-user-list-bg), #3B97FF); + + .ant-table-thead { + th { + background: var(--color-table-header-bg) !important; + } + } - .ant-table-body { - @include scrollBar(#616b83, #bebebe); + .ant-table-tbody { + td { + background: var(--color-table-body-bg) !important; + border-bottom-color: var(--color-table-border-bottom-color); + } + + tr:nth-child(even) { + td { + background: var(--color-table-body-bg-nth-child-even) !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.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; - } - - .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; - } } } diff --git a/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/loadable.jsx b/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/loadable.jsx index 4fb5860..ad5869f 100644 --- a/src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/loadable.jsx +++ b/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: 查看监控 }, + { key: "2", label: 编辑 }, + { key: "3", label: 删除 }, + ]; + //列表 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 ( - <> -
-
- + { + return clickDropDown(key, row); + }, + }} + > + + ); }, }, ]; - //编辑按钮 - 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, - }); - } 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 })); - } - }; - //切换每页条数 - 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 clickDropDown = (param, record) => { + // console.log(param.key, record); + // setRowData(record); + if (param.key == "1") { + // 查看监控 + handlePlay(record); + } else if (param.key == "2") { + // 编辑 + handleEdit(record); + } else { + // 删除 + handleDel(record); } }; + 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) {
查询条件
- +
- + 所属车场 + setFormData({ ...formData, operator: v })} />
- - 车场名称 + - setFormData({ ...formData, address: e.target.value }) - } + onChange={(v) => setFormData({ ...formData, road_name: v })} />
- -
@@ -550,31 +475,19 @@ function OutNvrMgm(props) {
record.cap_id + "_" + record.bk_id} + rowKey={(row) => row.id} + dataSource={resultData?.list || []} + columns={tableColumns} pagination={false} - loading={ajaxLoading} - /> - `共 ${resultData.total_records} 条`} - total={resultData.total_records} - current={lastFormData.pn} - pageSize={lastFormData.length} - pageSizeOptions={pageSizeOptions} - onChange={changePn} - onShowSizeChange={changeLength} + loading={tabLoading} /> +