From ba6dbe9086564667ef1fdac2d0100fb83c86e170 Mon Sep 17 00:00:00 2001 From: wangyunfei888 <1224056307@qq.com> Date: Fri, 12 Dec 2025 19:46:07 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Frame 427319422.svg | 10 + .../content_component_bbtz/LedgerCenter.js | 2 +- .../content_component_bbtz/ReportTask.js | 2 +- .../content_component_bbtz/TemplateLibrary.js | 147 ++++++++++++- .../TemplateLibrary.less | 198 +++++++++++++++++- 5 files changed, 351 insertions(+), 8 deletions(-) create mode 100644 src/assets/business_envmonitoring/Frame 427319422.svg diff --git a/src/assets/business_envmonitoring/Frame 427319422.svg b/src/assets/business_envmonitoring/Frame 427319422.svg new file mode 100644 index 0000000..6450d06 --- /dev/null +++ b/src/assets/business_envmonitoring/Frame 427319422.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/pages/business_envInformation_monthly/components/content_component_bbtz/LedgerCenter.js b/src/pages/business_envInformation_monthly/components/content_component_bbtz/LedgerCenter.js index 36a1471..b3dee27 100644 --- a/src/pages/business_envInformation_monthly/components/content_component_bbtz/LedgerCenter.js +++ b/src/pages/business_envInformation_monthly/components/content_component_bbtz/LedgerCenter.js @@ -1,6 +1,6 @@ import React from 'react'; import './LedgerCenter.less'; -const LedgerCenter = () =>
待开发三个字
; +const LedgerCenter = () =>
33待开发三个字
; export default LedgerCenter; diff --git a/src/pages/business_envInformation_monthly/components/content_component_bbtz/ReportTask.js b/src/pages/business_envInformation_monthly/components/content_component_bbtz/ReportTask.js index e40b7d2..ead8b05 100644 --- a/src/pages/business_envInformation_monthly/components/content_component_bbtz/ReportTask.js +++ b/src/pages/business_envInformation_monthly/components/content_component_bbtz/ReportTask.js @@ -1,6 +1,6 @@ import React from 'react'; import './ReportTask.less'; -const ReportTask = () =>
待开发三个字
; +const ReportTask = () =>
待开2发三个字
; export default ReportTask; diff --git a/src/pages/business_envInformation_monthly/components/content_component_bbtz/TemplateLibrary.js b/src/pages/business_envInformation_monthly/components/content_component_bbtz/TemplateLibrary.js index d38fe32..5bb9b29 100644 --- a/src/pages/business_envInformation_monthly/components/content_component_bbtz/TemplateLibrary.js +++ b/src/pages/business_envInformation_monthly/components/content_component_bbtz/TemplateLibrary.js @@ -1,6 +1,149 @@ -import React from 'react'; +import React, { useState } from 'react'; +import { Button, Select, Row, Col, Pagination } from 'antd'; +import { PlusOutlined } from '@ant-design/icons'; +import templateImg from '@/assets/business_envmonitoring/Frame 427319422.svg'; import './TemplateLibrary.less'; -const TemplateLibrary = () =>
待开发三个字
; +const { Option } = Select; + +const TemplateLibrary = () => { + const [category, setCategory] = useState(undefined); + const [templateName, setTemplateName] = useState(undefined); + const [currentPage, setCurrentPage] = useState(6); + + // 模拟数据 + const mockData = Array(6).fill(null).map((_, index) => ({ + id: index + 1, + title: '污染治理设施运行台账及维护记录', + createTime: '2025-08-24 18:24:25', + useCount: 3, + thumbnail: '/img/template-preview.png', + })); + + const handleCreate = () => { + console.log('创建模板'); + }; + + const handleSearch = () => { + console.log('查找', { category, templateName }); + }; + + const handleUse = (item) => { + console.log('使用模板', item); + }; + + const handlePreview = (item) => { + console.log('预览模板', item); + }; + + return ( +
+ {/* A块：顶部操作栏 */} +
+ + + + + +
+ 模板分类 + + + 模板名称 + + + +
+ + +
+ + {/* B块：卡片列表区域 */} +
+
+ {mockData.map((item) => ( +
+
+
+

污染治理设施运行台及维护记录

+
+
+
+
+ 创建时间 + {item.createTime} +
+
+ 使用次数 + {item.useCount} +
+
+ + +
+
+
+ 预览图 +
+
+
+
+ ))} +
+ + {/* 分页 */} +
+ setCurrentPage(page)} + /> +
+
+
+ ); +}; export default TemplateLibrary; diff --git a/src/pages/business_envInformation_monthly/components/content_component_bbtz/TemplateLibrary.less b/src/pages/business_envInformation_monthly/components/content_component_bbtz/TemplateLibrary.less index a4d398e..bfcc8c7 100644 --- a/src/pages/business_envInformation_monthly/components/content_component_bbtz/TemplateLibrary.less +++ b/src/pages/business_envInformation_monthly/components/content_component_bbtz/TemplateLibrary.less @@ -1,6 +1,196 @@ .template-library { - font-size: 20px; - color: #888; - text-align: center; - padding: 40px 0; + height: 100%; + display: flex; + flex-direction: column; + // padding: 20px; + // background: #f5f5f5; + + // A块：顶部操作栏 + .template-header { + // background: #fff; + // padding: 16px 24px; + border-radius: 4px; + margin-bottom: 20px; + // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + + .create-btn { + background: rgba(0, 212, 138, 1); + border-color: rgba(0, 212, 138, 1); + color: #fff; + height: 32px; + font-size: 14px; + + &:hover { + background: rgba(0, 232, 151, 1); + border-color: rgba(0, 232, 151, 1); + } + } + + .filter-group { + display: flex; + align-items: center; + gap: 12px; + + .filter-label { + color: #333; + font-size: 14px; + white-space: nowrap; + } + + .ant-select { + min-width: 150px; + } + + .ant-btn-primary { + background: #1890ff; + border-color: #1890ff; + + &:hover { + background: #40a9ff; + border-color: #40a9ff; + } + } + } + } + + // B块：内容区域 + .template-content { + flex: 1; + // background: #fff; + // padding: 24px; + // border-radius: 4px; + overflow-y: auto; + // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + .card-container { + display: flex; + flex-wrap: wrap; + gap: 15px; + height: 100%; + } + + .card-wrapper { + width: 32%; + height:44%; + } + .template-card { + height: 100%; + background: #fff; + border-radius: 2px; + // transition: all 0.3s; + border: 1px solid #3333; + padding: 15px; + display: flex; + flex-direction: column; + + &:hover { + // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + // transform: translateY(-2px); + } + + .card-header { + margin-bottom: 12px; + .card-title { + font-size: 16px; + font-weight: 500; + color: #333; + margin: 0; + line-height: 1.5; + } + } + .card-body { + flex: 1; + display: flex; + gap: 12px; + } + + .card-left { + width: 60%; + display: flex; + flex-direction: column; + gap: 10px; + } + + .info-item { + display: flex; + align-items: center; + font-size: 14px; + color: #333; + + .info-label { + color: #666; + margin-right: 8px; + white-space: nowrap; + } + + .info-value { + color: #333; + } + } + + .card-actions { + margin-top: auto; + display: flex; + gap: 12px; + + .ant-btn { + flex: 1; + height: 32px; + font-size: 14px; + } + + .use-btn { + background: rgba(0, 212, 138, 1); + border-color: rgba(0, 212, 138, 1); + color: #fff; + + &:hover { + background: rgba(0, 232, 151, 1); + border-color: rgba(0, 232, 151, 1); + } + } + + .preview-btn { + color: #13c2c2; + border-color: #13c2c2; + + &:hover { + color: #36cfc9; + border-color: #36cfc9; + } + } + } + + .card-right { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + + img { + width: 100%; + height: 100%; + object-fit: contain; + } + } + } + + .pagination-wrapper { + display: flex; + justify-content: flex-end; + margin-top: 32px; + padding-top: 24px; + border-top: 1px solid #f0f0f0; + + .ant-pagination { + .ant-pagination-item-active { + border-color: rgba(0, 212, 138, 1); + background-color: rgba(0, 212, 138, 1); + + a { + color: #fff; + } + } + } + } + } }