diff --git a/src/assets/images/icon-download-list.png b/src/assets/images/icon-download-list.png new file mode 100644 index 0000000..53b7648 Binary files /dev/null and b/src/assets/images/icon-download-list.png differ diff --git a/src/components/layout/Header/downloadModal.jsx b/src/components/layout/Header/downloadModal.jsx index 33c74e0..cf9de4e 100644 --- a/src/components/layout/Header/downloadModal.jsx +++ b/src/components/layout/Header/downloadModal.jsx @@ -1,5 +1,7 @@ import React, {useState, useEffect} from 'react' -import { Modal, Form, Input, DatePicker, TreeSelect, Button, Tabs, Table } from 'antd' +import { Modal, Form, Input, DatePicker, TreeSelect, Button, Tabs, Table, message, Pagination } from 'antd' +import { dictionary } from "@/config/common" +import ajax from "@/services" import './index.scss' function DownloadModal (props) { @@ -21,21 +23,182 @@ function DownloadModal (props) { const tableColumns = [ { - title: "序号", - width: 60, + title: '文件名', + width: 200, align: 'center', - render: (text, record, index) => (pageInfo.pn - 1) * pageInfo.length + index + 1 + dataIndex: 'name' + }, + { + title: '进度', + width: 200, + align: 'center', + dataIndex: 'progress', + render: (progress) => ((progress || 0) * 100) + '%' + }, + { + title: '文件大小', + width: 200, + align: 'center', + dataIndex: 'size' + }, + { + title: '排队位置', + width: 150, + align: 'center', + dataIndex: 'queue' + }, + { + title: '状态', + width: 100, + align: 'center', + dataIndex: 'status', + render: (status) => { + if (status == 1) { + return ( +
导出中
+ ) + } else if (status == 2) { + return ( +
已完成
+ ) + } else if (status == 3) { + return ( +
等待中
+ ) + } + } + }, + { + title: '创建时间', + width: 200, + align: 'center', + dataIndex: 'create_time' + }, + { + title: "操作", + // width: 60, + align: 'center', + render: (text, record, index) => { + return ( +
+ { + record.status == 2 ? ( +
handleDownload(record.url)}>下载
+ ) : null + } +
handleDel(record)}>删除
+
+ ) + } }, ] + const paginationProps = { + className: "pagination-common", + showQuickJumper: true, + showSizeChanger: true, + current: formData.pn, + total: resultData?.total, + pageSize: formData.length, + pageSizeOptions: dictionary.pageSizeOptions, + onChange: (current, size) => { + setFormData({ + ...formData, + ...{ pn: current == formData.pn ? 1 : current, length: size } + }) + ajaxGetDownloadList({ + ...formData, + ...{ pn: current == formData.pn ? 1 : current, length: size } + }) + }, + onShowSizeChange: (current, size) => { + setFormData({ + ...formData, + ...{ pn: current == formData.pn ? 1 : current, length: size } + }) + ajaxGetDownloadList({ + ...formData, + ...{ pn: current == formData.pn ? 1 : current, length: size } + }) + } + } + + const handleDownload = (url) => { + window.open(url) + } + + const ajaxGetDownloadList = (params=formData) => { + ajax.getDownloadList(params).then(e => { + if (e.status == 20000 && e.data.list.length) { + setResultDate({ + list: [...e.data.list], + total: e.data.total + }) + } else { + setResultDate({ + list: [], + total: 0 + }) + } + }) + } + + const ajaxDownloadDel = (id) => { + return new Promise((resolved, rejected) => { + ajax.delDownload({id: id}).then(e => { + if (e.status == 20000) { + resolved(e.message) + } else { + message.error(e.message) + } + }).catch(err => { + message.error(err) + rejected(err) + }) + }) + } + + const handleDel = (data) => { + Modal.confirm({ + title: `确认删除`, + content: `是否确认删除文件 ${data.name}？`, + onOk: () => { + ajaxDownloadDel(data.id).then(msg => { + ajaxGetDownloadList() + message.success('下载任务删除成功') + }) + } + }) + } + const handleTabChange = (v) => { setFormData({ ...formData, type: v, pn: 1 }) + ajaxGetDownloadList({ + ...formData, + type: v, + pn: 1 + }) } + useEffect(() => { + if (visible) { + setFormData({ + type: '0', + pn: 1, + length: 20 + }) + ajaxGetDownloadList({ + type: '0', + pn: 1, + length: 20 + }) + } + }, [visible]) + return (
-
+
+ +
diff --git a/src/components/layout/Header/index.jsx b/src/components/layout/Header/index.jsx index 7abb5cd..386f532 100644 --- a/src/components/layout/Header/index.jsx +++ b/src/components/layout/Header/index.jsx @@ -243,8 +243,8 @@ export default function Header(props) { -
  • setDownloadVisible(true)}> - {/* */} +
  • setDownloadVisible(true)}> +
    • {/*
  • diff --git a/src/components/layout/Header/index.scss b/src/components/layout/Header/index.scss index c754977..d461162 100644 --- a/src/components/layout/Header/index.scss +++ b/src/components/layout/Header/index.scss @@ -1,3 +1,19 @@ +$color-user-list-bg : var(--color-user-list-bg); +@mixin scrollBar($back, $item) { + &::-webkit-scrollbar-track-piece, + &::-webkit-scrollbar-corner, + &::-webkit-scrollbar-track { + background: #000; + } + &::-webkit-scrollbar { + width: 4px; + height: 4px; + } + &::-webkit-scrollbar-thumb { + background: #9da2ab; + border-radius: 2px; + } +} .cc-header-actions { > ul { display: flex; @@ -296,11 +312,36 @@ } .modal-export { .ant-modal-body { - max-height: 860px; - min-height: 400px; + height: 700px; + min-height: 0; border-radius: 4px; - box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.16); + box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.16); + .ant-table-body { + // @include scrollBar(var(--color-user-list-bg), #3B97FF); + } + .export-table-wrapper { + &::before { + content: ""; + width: 4px; + height: 56px; + background: #616b83; + position: absolute; + right: 19px; + top: 100px; + z-index: 2; + } + } .modal-export-container { + display: flex; + flex-direction: column; + min-height: 0; + height: 100%; + .modal-export-content { + flex: 1; + min-height: 0; + display: flex; + flex-direction: column; + } .ant-tabs .ant-tabs-nav-wrap .ant-tabs-nav-list .ant-tabs-tab { width: unset; padding: 12px 5px; @@ -325,5 +366,27 @@ } } } - + .export-table-wrapper { + flex: 1; + min-height: 0; + overflow-y: auto; + @include scrollBar(var(--color-user-list-bg), #3B97FF); + } + .download-list-action { + display: flex; + justify-content: center; + > div { + margin: 0 10px; + &:hover { + cursor: pointer; + } + } + } +} + +.icon-download { + .icon { + background: url('../../../assets/images/icon-download-list.png') no-repeat 100% 100%; + background-size: 100% 100%; + } } \ No newline at end of file diff --git a/src/pages/SystemMgm/MessageMgm/ConfMes/loadable.jsx b/src/pages/SystemMgm/MessageMgm/ConfMes/loadable.jsx index c16d562..53d5ff8 100644 --- a/src/pages/SystemMgm/MessageMgm/ConfMes/loadable.jsx +++ b/src/pages/SystemMgm/MessageMgm/ConfMes/loadable.jsx @@ -133,8 +133,14 @@ function ConfMes(props) { onChange: (current, size) => { setPageInfo({ ...pageInfo, - ...{ pn: current, length: size } + ...{ pn: current == pageInfo.pn ? 1 : current, length: size } }); + }, + onShowSizeChange: (current, size) => { + setPageInfo({ + ...pageInfo, + ...{ pn: current == pageInfo.pn ? 1 : current, length: size } + }); } } const toDeftime = (v) => { diff --git a/src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/loadable.jsx b/src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/loadable.jsx index b4b0125..2e0175f 100644 --- a/src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/loadable.jsx +++ b/src/pages/SystemMgm/MessageMgm/DeviceAlarmMes/loadable.jsx @@ -105,8 +105,14 @@ function NotificationMes(props) { onChange: (current, size) => { setPageInfo({ ...pageInfo, - ...{ pn: current, length: size } + ...{ pn: current == pageInfo.pn ? 1 : current, length: size } }); + }, + onShowSizeChange: (current, size) => { + setPageInfo({ + ...pageInfo, + ...{ pn: current == pageInfo.pn ? 1 : current, length: size } + }); } } const toDeftime = (v) => { diff --git a/src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/loadable.jsx b/src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/loadable.jsx index fd5bf4a..9892d58 100644 --- a/src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/loadable.jsx +++ b/src/pages/SystemMgm/MessageMgm/MonitorCarAlarmMes/loadable.jsx @@ -104,8 +104,14 @@ function MonitorCarAlarmMes(props) { onChange: (current, size) => { setPageInfo({ ...pageInfo, - ...{ pn: current, length: size } + ...{ pn: current == pageInfo.pn ? 1 : current, length: size } }); + }, + onShowSizeChange: (current, size) => { + setPageInfo({ + ...pageInfo, + ...{ pn: current == pageInfo.pn ? 1 : current, length: size } + }); } } const toDeftime = (v) => { diff --git a/src/pages/SystemMgm/MessageMgm/NotificationMes/loadable.jsx b/src/pages/SystemMgm/MessageMgm/NotificationMes/loadable.jsx index 61b44a6..011f11b 100644 --- a/src/pages/SystemMgm/MessageMgm/NotificationMes/loadable.jsx +++ b/src/pages/SystemMgm/MessageMgm/NotificationMes/loadable.jsx @@ -146,8 +146,14 @@ function NotificationMes(props) { onChange: (current, size) => { setPageInfo({ ...pageInfo, - ...{ pn: current, length: size } + ...{ pn: current == pageInfo.pn ? 1 : current, length: size } }); + }, + onShowSizeChange: (current, size) => { + setPageInfo({ + ...pageInfo, + ...{ pn: current == pageInfo.pn ? 1 : current, length: size } + }); } } const toDeftime = (v) => { diff --git a/src/services/common.js b/src/services/common.js index c1c517f..12c97f4 100644 --- a/src/services/common.js +++ b/src/services/common.js @@ -129,6 +129,22 @@ const getPlateSearch = (params) => { data: params, }); }; +//下载列表 +const getDownloadList = (params) => { + return ajax({ + url: "/api/com/common/download_list", + type: 'get', + data: params + }) +} +//下载列表 - 删除 +const delDownload = (params) => { + return ajax({ + url: "/api/com/common/download_del", + type: 'post', + data: params + }) +} export default { getSysConfig, getRoadSearch, @@ -146,4 +162,6 @@ export default { updateCache, getAreaTree, getLocationNameByLngLat, + getDownloadList, + delDownload };