You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
368 lines
10 KiB
368 lines
10 KiB
<template>
|
|
<view class="report">
|
|
<!-- Tabs 栏 -->
|
|
<view class="cc-tabs tabs">
|
|
<view class="tab" :class="{ active: currentTab === 0 }" @click="switchTab(0)"><view class="tab-text">报告生成</view></view>
|
|
<view class="tab" :class="{ active: currentTab === 1 }" @click="switchTab(1)"><view class="tab-text">报告记录</view></view>
|
|
</view>
|
|
|
|
<!-- 报告生成 Tab 内容 -->
|
|
<view v-if="currentTab === 0" class="report-generation">
|
|
<!-- 选择框部分 -->
|
|
<view class="cc-card select-card">
|
|
<view class="select-area">
|
|
<text class="select-text">请选择</text>
|
|
<view class="select-all-btn" @click="selectAll">全选</view>
|
|
</view>
|
|
|
|
<!-- 复选框列表 -->
|
|
<view class="checkbox-list">
|
|
<uni-data-checkbox multiple v-model="selectedItems" :localdata="checkboxItems" @change="change"></uni-data-checkbox>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 固定操作栏 -->
|
|
<view class="cc-operation-buttons operation-bar">
|
|
<view>
|
|
<text class="selected-count">已选择<text class="flag-text">{{ selectedItems.length }}项</text></text>
|
|
<view class="view-selected-btn" @click="showSelectedItems">点击查看</view>
|
|
</view>
|
|
<view class="primary-button generate-report-btn" @click="generateReport">生成报告</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 报告记录 Tab 内容 -->
|
|
<!-- <view v-if="currentTab === 1" class="report-list">
|
|
<view class="report-item" v-for="(report, index) in reportRecords" :key="index">
|
|
<view class="cc-card">
|
|
<view class="report-name">{{ report.name }}</view>
|
|
<view class="report-time">{{ report.generateTime }}</view>
|
|
<view class="report-actions">
|
|
<button class="view-btn" @click="viewReport(report)">查看</button>
|
|
<button class="push-btn" @click="pushReport(report)">推送</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<view v-if="currentTab === 1" class="cc-project-list">
|
|
<view v-for="(report, index) in reportRecords" :key="index" class="project-card">
|
|
<view class="attr-item project-title">{{ report.name }}</view>
|
|
<view class="attr-item">
|
|
<view class="attr-title">生成时间</view>
|
|
<view class="attr-value">{{ report.generateTime }}</view>
|
|
</view>
|
|
<view class="operate-buttons">
|
|
<view class="buttons-group">
|
|
<view class="primary-button__text button" @click="viewReport(report)">查看</view>
|
|
<view class="primary-button__text button" @click="pushReport(report)">推送</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 已选项弹窗 -->
|
|
<view v-if="showPopup" class="popup">
|
|
<view class="popup-content">
|
|
<view class="popup-title">已选项{{ selectedItems.length }}项</view>
|
|
<view class="popup-list">
|
|
<view class="checkbox-list">
|
|
<uni-data-checkbox multiple v-model="selectedItems" :localdata="checkboxItems" @change="change"></uni-data-checkbox>
|
|
</view>
|
|
</view>
|
|
<view class="popup-footer">
|
|
<view class="cc-btn cc-default-btn" @click="closePopup">取消</view>
|
|
<view class="cc-btn cc-primary-btn" @click="closePopup">确定</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 推送弹窗 -->
|
|
<view v-if="showPushPopup" class="popup">
|
|
<!-- <view class="popup-content">
|
|
<text class="popup-title">选择推送项</text>
|
|
<view class="checkbox-list">
|
|
<uni-data-checkbox multiple v-model="selectedItems" :localdata="checkboxItems" @change="change"></uni-data-checkbox>
|
|
</view>
|
|
<view class="popup-actions">
|
|
<button class="cancel-btn" @click="closePushPopup">取消</button>
|
|
<button class="confirm-btn" @click="confirmPush">确定</button>
|
|
</view>
|
|
</view> -->
|
|
<view class="popup-content">
|
|
<view class="popup-title">已选项{{ selectedPeoples.length }}项</view>
|
|
<view class="popup-list">
|
|
<view class="checkbox-list">
|
|
<uni-data-checkbox multiple v-model="selectedPeoples" :localdata="peopleCheckboxItems" @change="change"></uni-data-checkbox>
|
|
</view>
|
|
</view>
|
|
<view class="popup-footer">
|
|
<view class="cc-btn cc-default-btn" @click="closePushPopup">取消</view>
|
|
<view class="cc-btn cc-primary-btn" @click="confirmPush">确定</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// import { UniCard, UniCheckbox, UniCheckboxGroup } from '@dcloudio/uni-ui';
|
|
|
|
export default {
|
|
// components: {
|
|
// UniCard,
|
|
// UniCheckbox,
|
|
// UniCheckboxGroup,
|
|
// },
|
|
data() {
|
|
return {
|
|
currentTab: 0, // 当前选中的Tab索引
|
|
selectedItems: [], // 存储选中的复选框项
|
|
checkboxItems: [ // 复选框列表项
|
|
{ text: '项目投资统计', value: 'v1' },
|
|
{ text: '项目分类统计', value: 'v2' },
|
|
{ text: '项目类型统计', value: 'v3' },
|
|
{ text: '项目状态统计', value: 'v4' },
|
|
{ text: '项目行政区划分布统计', value: 'v5' },
|
|
{ text: '项目预警统计', value: 'v6' }
|
|
],
|
|
reportRecords: [ // 报告记录数据
|
|
{ name: '报告1', generateTime: '2024-10-01 10:00' },
|
|
{ name: '报告2', generateTime: '2024-10-02 14:30' },
|
|
{ name: '报告3', generateTime: '2024-10-03 16:15' }
|
|
],
|
|
showPopup: false, // 弹窗显示状态
|
|
showPushPopup: false, // 推送弹窗显示状态
|
|
pushSelectedItems: [], // 推送时选中的项
|
|
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}],
|
|
selectedPeoples: [],
|
|
peopleCheckboxItems: [
|
|
{ text: '张三', value: 'v1' },
|
|
{ text: '李四', value: 'v2' },
|
|
{ text: '王五', value: 'v3' },
|
|
{ text: '赵六', value: 'v4' },
|
|
{ text: '孙七', value: 'v5' }
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
// 切换 Tab
|
|
switchTab(index) {
|
|
this.currentTab = index;
|
|
},
|
|
// 全选功能
|
|
selectAll() {
|
|
if (this.selectedItems.length === this.checkboxItems.length) {
|
|
this.selectedItems = []; // 全选状态时点击全选按钮取消选择
|
|
} else {
|
|
this.selectedItems = this.checkboxItems.map(item => item.value); // 全选
|
|
}
|
|
},
|
|
// 生成报告按钮点击事件
|
|
generateReport() {
|
|
uni.showToast({
|
|
title: '报告生成中...',
|
|
icon: 'none'
|
|
});
|
|
},
|
|
// 显示已选项的弹窗
|
|
showSelectedItems() {
|
|
this.showPopup = true;
|
|
},
|
|
// 关闭已选项弹窗
|
|
closePopup() {
|
|
this.showPopup = false;
|
|
},
|
|
// 查看报告
|
|
viewReport(report) {
|
|
uni.showToast({
|
|
title: `查看报告: ${report.name}`,
|
|
icon: 'none'
|
|
});
|
|
},
|
|
// 推送报告
|
|
pushReport(report) {
|
|
this.showPushPopup = true;
|
|
},
|
|
// 关闭推送弹窗
|
|
closePushPopup() {
|
|
this.showPushPopup = false;
|
|
},
|
|
// 确定推送
|
|
confirmPush() {
|
|
uni.showToast({
|
|
title: `推送报告成功`,
|
|
icon: 'none'
|
|
});
|
|
this.showPushPopup = false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.report {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
.report-generation {
|
|
padding: 16px 20px;
|
|
::v-deep {
|
|
.uni-card {
|
|
border-radius: 8px;
|
|
margin: 0 !important;
|
|
}
|
|
}
|
|
.select-area {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.select-text {
|
|
font-size: 16px;
|
|
color: #333;
|
|
}
|
|
|
|
.select-all-btn {
|
|
color: #00b39d;
|
|
border: none;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
.operation-bar {
|
|
height: 80px;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
padding: 10px 16px;
|
|
background-color: #fff;
|
|
border-top: 1px solid #f0f0f0;
|
|
.flag-text {
|
|
color: #00b39d;
|
|
margin-left: 2px;
|
|
}
|
|
.view-selected-btn {
|
|
color: #8C8C8C;
|
|
margin-top: 2px;
|
|
}
|
|
.generate-report-btn {
|
|
width: 180px;
|
|
height: 48px;
|
|
line-height: 48px;
|
|
color: #fff;
|
|
text-align: center;
|
|
background: #00b39d;
|
|
border-radius: 8px;
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.checkbox-list {
|
|
::v-deep {
|
|
.uni-data-checklist {
|
|
.checklist-group{
|
|
display: block;
|
|
.checklist-box {
|
|
font-size: 16px;
|
|
padding: 16px 0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.checkbox-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.checkbox-item uni-checkbox {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.checkbox-item .border {
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
|
|
|
|
/* 弹窗样式 */
|
|
.popup {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100vh;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
// background-color: white;
|
|
// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
background: rgba(0, 0, 0, 0.7);
|
|
// transform: translateY(100%);
|
|
// transition: transform 0.3s ease-out;
|
|
.popup-content {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
// padding: 20px;
|
|
background-color: white;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
border-radius: 8px 8px 0 0;
|
|
.popup-title {
|
|
font-size: 18px;
|
|
color: #262626;
|
|
padding: 15px 20px;
|
|
margin-bottom: 10px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
.popup-list {
|
|
padding: 0 20px;
|
|
margin-bottom: 20px;
|
|
.checkbox-list {
|
|
padding: 0;
|
|
}
|
|
}
|
|
.popup-footer {
|
|
display: flex;
|
|
padding: 15px 20px;
|
|
.cc-btn {
|
|
flex: 1;
|
|
&:nth-child(1) {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.popup-item {
|
|
font-size: 16px;
|
|
color: #333;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.close-btn {
|
|
padding: 8px 16px;
|
|
background-color: #00b39d;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
width: 100%;
|
|
}
|
|
|
|
// .popup[style*="transform: translateY(0)"] {
|
|
// transform: translateY(0);
|
|
// }
|
|
</style>
|