shuili_manager/jwtech-h5-page/pages/statistics/generate.vue

<template>
  <view class="report">
    <view class="cc-header">
      <!-- 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>
    </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"></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" style="padding: 48px 20px 20px;">
      <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"></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">
        <view class="popup-title">已选项{{ selectedPeoples.length }}项</view>
        <view class="popup-list">
          <view class="checkbox-list">
            <uni-data-checkbox multiple v-model="selectedPeoples" :localdata="peopleCheckboxItems"></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>

    <!-- 提示信息弹窗 -->
    <uni-popup ref="popup" background-color="#fff">
      <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"></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="confirmGenerate">确定</view>
        </view>
      </view>
    </uni-popup>

    <!-- 提示信息弹窗 -->
    <uni-popup ref="pushPopup" background-color="#fff">
      <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"></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>
    </uni-popup>
  </view>
</template>

<script>
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;
      this.$refs.popup.open('bottom')
    },
    // 关闭已选项弹窗
    closePopup() {
      this.$refs.popup.close()
    },
    confirmGenerate() {
      uni.showToast({
        title: `生成报告`,
        icon: 'none'
      })
      this.$refs.popup.close()
    },
    // 查看报告
    viewReport(report) {
      uni.showToast({
        title: `查看报告: ${report.name}`,
        icon: 'none'
      });
    },
    // 推送报告
    pushReport(report) {
      this.$refs.pushPopup.open('bottom')
      // this.showPushPopup = true;
    },
    // 关闭推送弹窗
    closePushPopup() {
      // this.showPushPopup = false;
      this.$refs.pushPopup.close()
    },
    // 确定推送
    confirmPush() {
      uni.showToast({
        title: `推送报告成功`,
        icon: 'none'
      });
      // this.showPushPopup = false;
      this.$refs.pushPopup.close()
    }
  }
};
</script>

<style lang="scss" scoped>
.report {
  display: flex;
  flex-direction: column;
  height: 100%;
  .report-generation {
    padding: 64px 20px 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;
        }
      }
    }
  }
}

.uni-popup {
  .uni-popup__wrapper {
    display: none !important;
  }
  uni-view[name="content"] {
    display: none !important;
  }
  .popup-content {
    width: 100%;
    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%;
}
</style>