JCSS / jcss-miniprogram

<template>
  <view class="home-page">
    <!-- 用户信息栏 -->
    <view class="user-info-bar">
      <view class="user-info">
        <image class="avatar" src="../../static/imgs/default-avatar.png" mode="widthFix"></image>
        <view class="user-text">
          <view class="username">林晓明</view>
          <view class="login-time">上次登录1天前</view>
        </view>
      </view>
      <view class="msg-icon">
        <u-icon name="message" color="#fff" size="32rpx" />
        <view class="msg-badge">5</view>
      </view>
    </view>

    <!-- 任务完成情况卡片 -->
    <view class="task-card">
      <view class="card-title">任务完成情况</view>
      <view class="card-header">
        <view class="unit">单位: 个</view>
        <!-- ✅ 核心修改：日期范围改为可点击的选择器 -->
        <view class="date-range" @click="openDatePicker">
<!--          {{ dateText }}-->
          <neo-datetime-pro
              v-model="dateRange"
              type="daterange"
              placeholder="请选择日期范围"
          />
        </view>
      </view>
      <!-- 折线图 -->
      <view class="chart-wrap">
        <!--        <u-line-chart-->
        <!--            :chart-data="chartData"-->
        <!--            :x-axis="xAxis"-->
        <!--            :y-axis="yAxis"-->
        <!--            :legend="legend"-->
        <!--            height="300rpx"-->
        <!--        ></u-line-chart>-->
      </view>
    </view>

    <!-- 待办/已办切换栏 -->
    <view class="tab-bar">
      <view
          class="tab-item"
          :class="{ active: currentTab === 'todo' }"
          @click="currentTab = 'todo'"
      >
        待办事项(5)
        <view class="tab-active-line" v-if="currentTab === 'todo'"></view>
      </view>
      <view
          class="tab-item"
          :class="{ active: currentTab === 'done' }"
          @click="currentTab = 'done'"
      >
        已办事项(89)
        <view class="tab-active-line" v-if="currentTab === 'done'"></view>
      </view>
    </view>

    <!-- 事项列表 -->
    <view class="task-list">
      <view class="task-item" v-for="(item, index) in currentTaskList" :key="index">
        <view class="task-name">事项名称: {{ item.name }}{{ item.name }}{{ item.name }}{{ item.name }}{{ item.name }}{{ item.name }}</view>
        <view class="task-desc">
          <view>紧急程度: {{ item.urgency }}</view>
          <view class="task-time">{{ item.time }}</view>
        </view>
      </view>
    </view>


  </view>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';

// 折线图数据
const chartData = reactive([
  {
    name: '已完成任务数',
    data: [5, 35, 55, 40, 65, 50, 70],
    color: '#4CAF50'
  },
  {
    name: '待完成总任务数',
    data: [5, 70, 75, 70, 75, 75, 90],
    color: '#E53935'
  }
]);
const xAxis = reactive(['12.28', '12.29', '12.30', '12.31', '01.01', '01.02', '01.03']);
const yAxis = reactive([0, 25, 50, 75, 100]);
const legend = reactive(['已完成任务数', '待完成总任务数']);

// 标签切换
const currentTab = ref('todo');
const dateRange=ref( [])
// ✅ 核心新增：时间选择器相关数据
const showDatePicker = ref(false);
// 默认显示的时间文本
const dateText = ref('2025/12/28—2026/01/04');
// 选中的开始/结束时间
const selectStartDate = ref('');
const selectEndDate = ref('');

// 打开时间选择器
const openDatePicker = () => {
  showDatePicker.value = true;
};

// 确认选择时间
const confirmDate = (e) => {
  // 格式化选中的时间
  selectStartDate.value = formatDate(e.value[0]);
  selectEndDate.value = formatDate(e.value[1]);
  dateText.value = `${selectStartDate.value}—${selectEndDate.value}`;
  showDatePicker.value = false;
  // 这里可以加：时间改变后重新请求图表数据的逻辑
  // getChartData(selectStartDate.value, selectEndDate.value)
};

// 时间格式化函数：YYYY/MM/DD 格式
const formatDate = (dateVal) => {
  const year = dateVal.getFullYear();
  const month = (dateVal.getMonth() + 1).toString().padStart(2, '0');
  const day = dateVal.getDate().toString().padStart(2, '0');
  return `${year}/${month}/${day}`;
};

// 待办事项数据
const todoList = reactive([
  {
    name: '绿地卫生验收',
    urgency: '特急',
    time: '2025-12-31 15:45:23'
  },
  {
    name: '阜成门内大街年度计划巡检',
    urgency: '--',
    time: '2025-12-31 09:02:00'
  },
  {
    name: '金融街年度计划巡检',
    urgency: '--',
    time: '2025-12-31 09:02:00'
  },
  {
    name: '金融街年度计划巡检',
    urgency: '--',
    time: '2025-12-31 09:02:00'
  },
  {
    name: '示例事项',
    urgency: '一般',
    time: '2026-01-04 10:00:00'
  }
]);

// 已办事项数据（示例）
const doneList = reactive([
  {
    name: '道路清洁验收',
    urgency: '普通',
    time: '2025-12-30 14:20:00'
  }
]);

// 当前显示的事项列表
const currentTaskList = ref(todoList);
// 监听标签切换
watch(currentTab, (newVal) => {
  currentTaskList.value = newVal === 'todo' ? todoList : doneList;
});
</script>

<style scoped lang="scss">
.home-page {
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 用户信息栏 */
.user-info-bar {
  background-color: #1677ff;
  padding: 180rpx 30rpx 120rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  z-index: 1;
  position: relative;

  .user-info {
    display: flex;
    align-items: center;

    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .username {
      font-size: 32rpx;
      font-weight: 500;
    }

    .login-time {
      font-size: 24rpx;
      opacity: 0.8;
    }
  }

  .msg-icon {
    position: relative;

    .msg-badge {
      position: absolute;
      top: -10rpx;
      right: -10rpx;
      background-color: #ff3d00;
      color: #fff;
      font-size: 20rpx;
      width: 28rpx;
      height: 28rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

/* 任务完成情况卡片 */
.task-card {
  background-color: #fff;
  margin: 0 30rpx;
  margin-top: -60rpx;
  border-radius: 16rpx 16rpx 0 0;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  position: relative;
  z-index: 2;

  .card-title {
    font-size: 30rpx;
    font-weight: 600;
    margin-bottom: 15rpx;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: #999;
    margin-bottom: 10rpx;
    align-items: center;
  }

  // ✅ 日期选择器样式
  .date-range {
    display: flex;
    align-items: center;
    gap: 6rpx;
    padding: 4rpx 8rpx;
    border-radius: 6rpx;
    &:active {
      background-color: #f5f5f5;
    }
  }
  .date-icon {
    margin-top: 2rpx;
  }

  .chart-wrap {
    width: 100%;
    height: 300rpx;
  }
}

/* 待办/已办切换栏 */
.tab-bar {
  display: flex;
  background-color: #fff;
  margin: 0 30rpx;
  border-radius: 0;
  overflow: hidden;

  .tab-item {
    flex: 1;
    text-align: center;
    padding: 20rpx 0;
    font-size: 28rpx;
    color: #666;
    position: relative;

    &.active {
      color: #1677ff;
      font-weight: 500;
    }

    .tab-active-line {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 4rpx;
      background-color: #1677ff;
    }
  }
}

/* 事项列表 */
.task-list {
  background-color: #fff;
  margin: 0 30rpx ;
  border-radius: 0 0 16rpx 16rpx;
  padding: 10rpx 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);

  .task-item {
    padding: 20rpx 0;
    border-bottom: 1px solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    .task-name {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 10rpx;
      // ✅ 修复超长文字溢出：单行显示+超出省略
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .task-desc {
      display: flex;
      justify-content: space-between;
      font-size: 24rpx;
      color: #666;

      .task-time {
        color: #999;
      }
    }
  }
}
</style>