JCSS / jcss-miniprogram

  <template>

    <view class="page-container">

      <!-- 用户信息栏 -->
      <view class="user-info-bar">
        <view class="user-info">

          <view class="user-text">

            <view class="username">你好{{ userName }}</view>
            <view class="login-desc">蓟城山水全域智能运营管理平台</view>

          </view>
        </view>

        <view class="msg-icon" @click="handleMsgClick" hover-class="msg-icon--hover">

          <up-icon name="chat" color="#fff" size="24" />

          <view class="msg-badge">

            <up-badge type="error" showZero="true" max="999" :value="msgCount"></up-badge>

          </view>

        </view>
      </view>
  

      <view class="content-wrap">

        <!-- 图表区域 增加平滑动画容器 -->
        <view class="chart-wrap" v-show="showChartArea">
          <!-- 任务完成情况标题 -->
          <view class="module-title">任务完成情况</view>
  
          <!-- 任务完成情况卡片 -->
          <view class="task-chart-card">
            <view class="card-header">
              <view class="unit-tip">单位: 个</view>
              <view class="date-picker-wrap">
                <neo-datetime-pro v-model="dateRange" type="daterange" :clearable="false" placeholder="请选择日期范围"
                  @confirm="handleDateConfirm" :max-date="maxDate" @popup-show="handlePopupShow"
                  @popup-hide="handlePopupHide" />
              </view>

            </view>

            <!-- 双折线K线图 -->
            <view class="chart-container">
              <uni-charts v-if="!isDatePickerOpen" type="line" :data="klineChartData" :categories="klineCategories"
                :option="klineOption" :width="chartWidth" :height="chartHeight" />
            </view>

          </view>
        </view>

        <view class="con-wrap">
          <view class="con-title">养护任务 </view>
  
          <!-- 手写Tab切换：胶囊分段样式 -->
          <view class="custom-tab-wrap">
            <view class="tab-capsule" :class="{ active: currentTabValue === 0 }" @click="handleTabClick(0)">
              待办事项({{ todoTotal }})
            </view>
            <view class="tab-capsule" :class="{ active: currentTabValue === 1 }" @click="handleTabClick(1)">
              已办事项({{ doneTotal }})
            </view>
          </view>
  
  
          <!-- 动态组信息文案 -->
          <view class="tip-top" style="padding: 8px 0  0 70px;">
            <text>{{ tipText }}</text>
          </view>
  
          <!-- 顶部进度提示栏 -->
          <view v-if="showTipHeader" class="tip-header">
            <up-icon name="checkmark-circle" color="#00b42a" size="20"></up-icon>
            <text style="color: #1677ff;">今日组内：您已经完成{{ finishNum }}项，小组均值{{ avgNum }}项</text>
          </view>
  
  
          <scroll-view 
            class="task-list-container" 
            scroll-y 
            @scroll="onListScroll" 
            @scrolltoupper="handleTouchTop"
            enhanced
          >
            <view v-if="taskList.length === 0" class="empty-box">
              <up-empty />
            </view>
            <view class="task-item" v-for="(item, index) in taskList" :key="`${item.taskName}_${index}`"
              hover-class="task-item--hover" @click="handleTaskClick(item)">

              <view class="task-item__content">

                <view class="name-fixed-wrap">
                  <view class="task-item__name ">
                    事项{{ index + 1 }} 

                  </view>

                  <view class="task-name-text">
                    {{ item.taskName || '无' }}

                  </view>
                </view>

  
                <view v-if="currentTabValue === 0" class="task-item__footer" style="padding-left:  60px;">
                  <image class="loc-icon" src="https://img.jichengshanshui.com.cn:28207/appimg/定位icon@3x.png" mode="aspectFit"></image>
                  <template v-if="isWalkTextMode">
                    <text>距离当前{{ item.distance }}m ·约{{ item.estimatedWalkingMinutes }}分钟步行</text>
                  </template>
                  <template v-else>
                    <text>{{ item.distance }}m ·</text>
                    <up-icon name="star-fill" color="#ffd21d" size="20"></up-icon>
                    <text>历史完成率{{ item.efficiencyPercent }}%</text>
                  </template>
                </view>

              </view>

            </view>

          </scroll-view>
        </view>

      </view>

    </view>

  </template>
  

  <script setup lang="ts">

  import { ref, computed, nextTick } from 'vue';
  import { onShow,onUnload } from '@dcloudio/uni-app'
  import { useUserStore } from '@/pinia/user';
  import { timeFormat } from '@/uni_modules/uview-plus';

  import uniCharts from '@/components/uni-charts/uni-charts.vue';

  import { getUnreadCount } from "@/api/user";
  import {
    getTaskCompletionSummary,
    taskDetailsWithDistance,
    taskDetailsWithSmartSort
  } from "@/api/index/index";

  const userStore = useUserStore();
  const deptId = computed(() => String(userStore.userInfo?.user?.deptId ?? ''));
  
  // ====================== 只需要在这里统一维护分组配置 ======================
  type GroupItem = {
    deptId: string;
    label: string;
    showTipHeader: boolean; // 是否展示顶部进度条
    useWalkText: boolean;   // 是否展示步行距离文案
  };
  const groupConfig: GroupItem[] = [
    { deptId: '364', label: '[组2  A1B2 纯效率·有提醒]', showTipHeader: true, useWalkText: true },
    { deptId: '337', label: '[组3  A2B1 个性化·无提醒]', showTipHeader: false, useWalkText: false },
    { deptId: '338', label: '[组4  A2B2 个性化·有提醒]', showTipHeader: true, useWalkText: false },
  ];
  // 默认组1配置
  const defaultGroup: GroupItem = { deptId: '', label: '[组1  A1B1 纯效率·无提醒]', showTipHeader: false, useWalkText: true };
  
  // 获取当前部门配置对象
  const currentGroup = computed(() => {
    const target = groupConfig.find(item => item.deptId === deptId.value);
    return target ?? defaultGroup;
  });
  
  // 下面全部自动读取配置，无需写if/switch
  const tipText = computed(() => currentGroup.value.label);
  const showTipHeader = computed(() => currentGroup.value.showTipHeader);
  const isWalkTextMode = computed(() => currentGroup.value.useWalkText);
  const useDistanceApi = computed(() => currentGroup.value.useWalkText);
  // =========================================================================

  const finishNum = ref(0);
  const avgNum = ref(0);

  const msgCount = ref(0);

  const currentTabValue = ref(0);
  
  const dateRange = ref<string[]>([]);

  const yesterday = new Date();

  yesterday.setDate(yesterday.getDate() - 1);

  const maxDate = ref(timeFormat(yesterday, 'yyyy-mm-dd'));

  const minDate = '2026-01-06';

  const isDatePickerOpen = ref(false);

  const handlePopupShow = () => {
    isDatePickerOpen.value = true;
  };

  const handlePopupHide = () => {
    isDatePickerOpen.value = false;
  };

  const todoTotal = ref(0);
  const doneTotal = ref(0);
  const todoFullList = ref<any[]>([]);
  const doneFullList = ref<any[]>([]);
  const taskList = computed(() => {
    return currentTabValue.value === 0 ? todoFullList.value : doneFullList.value;
  });
  
  const chooseOptions = computed(() => [
    { title: `待办事项(${todoTotal.value})`, id: 'todo' },
    { title: `已办事项(${doneTotal.value})`, id: 'done' }
  ]);

  const currentLon = ref<string>('');
  const currentLat = ref<string>('');

  const chartWidth = ref(0);
  const chartHeight = ref(300);

  
  const klineCategories = ref<string[]>([]);

  const klineChartData = ref([

    {

      name: '已完成任务数',

      data: [] as number[],

      color: '#25AF69'

    },
    {

      name: '总任务数',

      data: [] as number[],

      color: '#B34C17'
    }
  ]);

  const klineOption = ref({
    grid: {
      top: '25%',

      left: '12%',

      right: '8%',

      bottom: '16%'

    },

    xAxis: {

      axisLabel: { fontSize: 12, color: '#666' }

    },

    yAxis: {
      min: 0,

      splitLine: { lineStyle: { color: '#f5f5f7' } },
      axisLabel: { fontSize: 12, color: '#666' }

    },

    tooltip: {
      trigger: 'axis',

      formatter: (params: any[]) => {

        return `${params[0].name}<br/>
        ${params[0].seriesName}: ${params[0].data}<br/>

        ${params[1].seriesName}: ${params[1].data}`;
      }
    },
    legend: {
      show: true,
      top: '5%',

      textStyle: { fontSize: 12 }

    }

  });
  

  const userName = computed(() => userStore.userInfo?.user?.nickname || '用户');

  const rpx2px = (rpx: number) => {

    const systemInfo = uni.getSystemInfoSync();

    return Math.floor(systemInfo.screenWidth / 750 * rpx);
  };
  
  // ========== 滚动逻辑 终极优化 ==========
  const showChartArea = ref(true);
  // 隐藏阈值：超过80rpx收起
  const scrollHideThreshold = rpx2px(80);
  // 安全显示区间：≤80rpx一律显示，覆盖所有回弹残留(70/80/90)
  const safeShowThreshold = rpx2px(130);
  let scrollTimer: number | null = null;
  
  // 下拉触顶强制展示
  const handleTouchTop = () => {
    showChartArea.value = true;

  };
  

  const onListScroll = (e: any) => {
    const scrollTop = e.detail.scrollTop;
    console.log('scrollTop', scrollTop)
    if (scrollTimer) clearTimeout(scrollTimer);
  
    // 实时：只要在安全区间立刻显示
    if (scrollTop <= safeShowThreshold) {
      showChartArea.value = true;
    } else if (scrollTop > scrollHideThreshold) {
      showChartArea.value = false;
    }
  
    // 滚动停止兜底二次校验
    scrollTimer = setTimeout(() => {
      if (scrollTop <= safeShowThreshold) {
        showChartArea.value = true;
      }
    }, 100);
  };
  
  // 切换tab重置图表显示
  const handleTabClick = (tabIndex: number) => {
    if (currentTabValue.value === tabIndex) return;
    currentTabValue.value = tabIndex;
    // 切换tab强制显示图表
    showChartArea.value = true;
  };
  
  // 页面每次显示强制重置图表为显示状态
  onShow(async () => {
    showChartArea.value = true;
    chartWidth.value = rpx2px(750 - 60);
    chartHeight.value = rpx2px(300);
    initRecent7Days();
    getUnread();
    await loadAllTaskByDept();
  });
  
  // 页面销毁清除定时器
  onUnload(() => {
    if (scrollTimer) clearTimeout(scrollTimer);
  });
  // ======================================
  
  const getCurrentLocation = (): Promise<{ lon: string; lat: string }> => {
    return new Promise((resolve, reject) => {
      uni.getSetting({
        success: (settingRes) => {
          if (!settingRes.authSetting['scope.userLocation']) {
            uni.authorize({
              scope: 'scope.userLocation',
              success: () => {
                uni.getLocation({
                  type: 'gcj02',
                  success: (loc) => {
                    resolve({
                      lon: loc.longitude.toFixed(6),
                      lat: loc.latitude.toFixed(6)
                    })
                  },
                  fail: (err) => {
                    uni.showToast({ title: '获取位置失败，请打开手机定位', icon: 'none' })
                    reject(err)
                  }
                })
              },
              fail: () => {
                uni.showModal({
                  title: '需要定位权限',
                  content: '请允许获取位置才能正常使用',
                  confirmText: '去设置',
                  success: (modal) => {
                    if (modal.confirm) {
                      uni.openSetting()
                    }
                  }
                })
                reject('用户拒绝定位权限')
              }
            })
          } else {
            uni.getLocation({
              type: 'gcj02',
              success: (loc) => {
                resolve({
                  lon: loc.longitude.toFixed(6),
                  lat: loc.latitude.toFixed(6)
                })
              },
              fail: (err) => {
                uni.showToast({ title: '获取位置失败，请打开手机定位', icon: 'none' })
                reject(err)
              }
            })
          }
        },
        fail: (err) => {
          reject('获取权限失败：' + err.errMsg)
        }
      })
    })
  }

  const initRecent7Days = async () => {

    const yesterday = new Date();

    yesterday.setDate(yesterday.getDate() - 1);

    const sevenDaysAgo = new Date(yesterday);

    sevenDaysAgo.setDate(yesterday.getDate() - 6);

    dateRange.value = [
      timeFormat(sevenDaysAgo, 'yyyy-mm-dd'),

      timeFormat(yesterday, 'yyyy-mm-dd')

    ];

    initChartData(dateRange.value[0], dateRange.value[1]);

  };
  

  const getUnread = async () => {
    try {
      const res = await getUnreadCount();
      msgCount.value = res || 0;
    } catch (error) {
      console.error('获取未读消息数失败:', error);
      msgCount.value = 0;
    }
  };

  const initChartData = async (beginTime: string, endTime: string) => {

    try {

      const postData = { beginTime, endTime };

      const res = await getTaskCompletionSummary(postData);

      klineCategories.value = res.map((item: any) => item.currentDate);
      klineChartData.value[0].data = res.map((item: any) => item.completedNum);
      klineChartData.value[1].data = res.map((item: any) => item.countpendingNum);

    } catch (error) {
      console.error('获取图表数据失败:', error);
    }
  };

  const loadDistanceApiTask = async (lon: string, lat: string) => {

    try {

      const paramsTodo = { queryType: 1, currentLon: lon, currentLat: lat };
      const paramsDone = { queryType: 2, currentLon: lon, currentLat: lat };

      const [todoRes, doneRes] = await Promise.all([

        taskDetailsWithDistance(paramsTodo),
        taskDetailsWithDistance(paramsDone)

      ]);

      todoFullList.value = todoRes?.sortedTasks || [];
      doneFullList.value = doneRes?.sortedTasks || [];
      todoTotal.value = Number(todoRes?.totalPendingTasks) || 0;
      doneTotal.value = Number(doneRes?.totalPendingTasks) || 0;
      finishNum.value = todoRes?.teamProgress?.userCompletedCount ?? 0;
      avgNum.value = doneRes?.teamProgress?.teamAverage ?? 0;
      await nextTick();
    } catch (err) {
      uni.showToast({ title: '加载任务失败', icon: 'none' });
      console.error('加载distance接口任务报错', err);
      todoFullList.value = [];
      doneFullList.value = [];
      todoTotal.value = 0;
      doneTotal.value = 0;

    }

  };
  

  const loadSmartSortTask = async (lon: string, lat: string) => {

    try {

      const [todoRes, doneRes] = await Promise.all([
        taskDetailsWithSmartSort({
          queryType: 1,
          currentLon: lon,
          currentLat: lat
        }),
        taskDetailsWithSmartSort({
          queryType: 2,
          currentLon: lon,
          currentLat: lat
        })
      ]);
      todoFullList.value = todoRes?.sortedTasks || [];
      doneFullList.value = doneRes?.sortedTasks || [];
      todoTotal.value = Number(todoRes?.totalPendingTasks) || 0;
      doneTotal.value = Number(doneRes?.totalPendingTasks) || 0;
      finishNum.value = todoRes?.teamProgress?.userCompletedCount ?? 0;
      avgNum.value = doneRes?.teamProgress?.teamAverage ?? 0;
      await nextTick();
    } catch (err) {
      uni.showToast({ title: '加载任务失败', icon: 'none' });
      console.error('加载smartSort接口任务报错', err);
      todoFullList.value = [];
      doneFullList.value = [];
      todoTotal.value = 0;
      doneTotal.value = 0;

    }
  };
  

  const loadAllTaskByDept = async () => {
    const loc = await getCurrentLocation();
    currentLon.value = loc.lon;
    currentLat.value = loc.lat;
    if (useDistanceApi.value) {
      await loadDistanceApiTask(loc.lon, loc.lat);
    } else {
      await loadSmartSortTask(loc.lon, loc.lat);
    }
  };

  const handleDateConfirm = (e: string[]) => {

    dateRange.value = e;

    initChartData(e[0], e[1]);

  };

  const handleMsgClick = () => {

    uni.navigateTo({ url: '/pages-sub/msg/index' });

  };
  

  const handleTaskClick = (item: any) => {
    if (item.taskType == "maintain") {
      if (currentTabValue.value === 0) {
        uni.navigateTo({ url: `/pages-sub/daily/maintain-manage/add-record?planNo=${item.planNo || ''}` });
      }
      if (currentTabValue.value === 1) {
        uni.navigateTo({ url: `/pages-sub/daily/maintain-manage/finish-plan-detail?planNo=${item.planNo || ''}` });
      }

    }

    if (item.taskType == "inspection") {
      if (currentTabValue.value === 0) {
        uni.navigateTo({ url: `/pages-sub/daily/patrol-manage/add-patrol-record?planNo=${item.planNo}&batchNo=${item.batchNo}` });
      }
      if (currentTabValue.value === 1) {
        uni.navigateTo({ url: `/pages-sub/daily/patrol-manage/finish-plan-detail?planNo=${item.planNo || ''}` });
      }
    }
  };

  </script>
  

  <style scoped lang="scss">

  $primary-color: #1677ff;
  $danger-color: #E53935;

  $text-color: #333;
  $text-color-light: #666;
  $text-color-placeholder: #999;
  $bg-color: #f5f5f7;
  $card-bg: #fff;

  $border-radius: 16px;
  $card-radius: 5px;
  $spacing-sm: 5px;
  $spacing-md: 10px;
  $spacing-lg: 15px;

  $border-color: #e5e5e5;

  
  .page-container {

    height: 100vh;

    background-color: $bg-color;

    overflow: hidden;
    display: flex;
    flex-direction: column;

  }
  

  .user-info-bar {

    flex-shrink: 0;

    background: url("https://img.jichengshanshui.com.cn:28207/appimg/bg.jpg") no-repeat;
    background-size: 100% 100%;

    padding: 80px $spacing-lg 135px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;

    .username {

      font-size: 16px;

      margin-bottom: 4px;

    }

    .login-desc {

      font-size: 16px;

    }

    .msg-icon {
      position: relative;

      padding: 5px;

      top: 10px;

      border-radius: 50%;

      &--hover {
        background-color: rgba(255, 255, 255, 0.2);
      }

      .msg-badge {
        position: absolute;

        top: -2px;
        right: -3px;

      }
    }
  }
  

  .content-wrap {

    flex: 1;

    margin-top: -122px;

    border-radius: $border-radius $border-radius 0 0;
    background-color: $bg-color;

    overflow: hidden;

    display: flex;
    flex-direction: column;
  }
  
  .chart-wrap {
    flex-shrink: 0;
    transition: all 0.35s ease-out;
    opacity: 1;
    overflow: hidden;
  }
  .chart-wrap[hidden] {
    opacity: 0;
    height: 0;
    margin: 0;

  }

  .module-title {

    padding: $spacing-lg;

    font-size: 14px;

    font-weight: 600;
    color: $text-color-light;

    flex-shrink: 0;

  }
  
  .task-chart-card {
    background-color: $card-bg;
    border-radius: $card-radius;
    margin: 0 $spacing-lg $spacing-md;
    padding: $spacing-md;

    flex-shrink: 0;

    .card-header {
      display: flex;
      justify-content: space-between;

      align-items: center;

      font-size: 12px;

      color: $text-color-placeholder;
      margin-bottom: $spacing-md;

      .date-picker-wrap {

        padding: 2px 4px;
        border-radius: 3px;

        transition: background-color 0.2s;

        position: relative;
        z-index: 999;

        &:active {
          background-color: $bg-color;
        }

      }
    }

    .chart-container {

      width: 100%;

      height: 150px;

      display: flex;
      align-items: center;
      justify-content: center;

    }
  }

  .con-wrap {
    border-radius: 8px;
    background-color: #fff;
    margin: 0 15px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .con-title {
    padding: 10px 15px;
    border-bottom: 1px solid #f0e9e9;
    flex-shrink: 0;
  }
  
  .custom-tab-wrap {
    display: flex;
    align-items: center;
    gap: 20rpx;
    padding: 20rpx 0 20rpx 20rpx;
    background: #fff;
    flex-shrink: 0;
  }
  
  .tab-capsule {
    padding: 10rpx 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #999;
    background: #f5f5f5;
    border-radius: 0;
    transition: all 0.2s ease;
    font-weight: 500;
  }
  .tab-capsule.active {
    color: #d4af37;
    background: #fff8dc;
  }
  
  .tip-header {
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 12rpx 15rpx;
    background: #e6f7ff;
    font-size: 14px;
    color: #000;
    flex-shrink: 0;
  }
  
  .tip-top {
    padding: 8px 0  0 70px;
    flex-shrink: 0;

  }
  

  .task-list-container {

    width: 100%;
    height: 100%;
    padding-bottom: 300rpx;
    box-sizing: border-box;
  }
  
  .empty-box {
    padding: 60rpx 0;

  }

  .task-item {
    padding: $spacing-md;
    transition: background-color 0.2s;
    border-bottom: 1px solid $border-color;

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

    &--hover {
      background-color: $bg-color;
    }

    &__content {
      width: 100%;
    }

    .name-fixed-wrap {
      display: flex;
    }
    .task-item__name {
      width: 60px;
    }
    .task-name-text {
      flex: 1;
      font-size: 14px;
      color: $text-color;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    &__name {

      font-size: 15px;

      color: $text-color;

      display: inline-block;

    }

    &__footer {
      display: flex;

      align-items: flex-start;
      gap: 6rpx;
      font-size: 13px;
      color: $text-color-light;
      margin-top: $spacing-sm;

      align-items: center;

    }
  }

  .loc-icon {
    width: 20px;
    height: 20px;
  }

  .urgency-tag {
    color: #7D7D7D;

  }
  </style>