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" show-zero 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>
              <!-- ActionSheet 点击唤起 -->
              <view class="sort-trigger" @click="openActionSheet">

                <view class="sort-text">{{ sortLabel }}</view>

                <up-icon name="arrow-down" size="14" style="margin-left:4rpx;"></up-icon>
              </view>
              <!-- ActionSheet组件 -->
              <up-action-sheet :show="showActionSheet" :actions="actionSheetOptions" @select="handleSheetSelect"
                @close="showActionSheet = false" />
              <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> -->

            <up-grid :border="false" col="4">
              <up-grid-item v-for="(baseListItem, baseListIndex) in baseList" :key="baseListIndex">
                <view class="grid-item-icon-box">
                  <up-icon :name="baseListItem.name" size="32" color="#1677ff"></up-icon>
                  <text class="grid-num-icon">{{ baseListItem.num }}</text>
                  <text class="grid-label-icon">{{ baseListItem.title }}</text>
                </view>

              </up-grid-item>

            </up-grid>

          </view>
        </view>

        <view class="con-wrap">

          <!-- ========= 一级大Tab【养护任务 / 巡检任务 / 工单】权限控制 ========= -->
          <view class="main-tab-wrap">
            <view
              v-if="showMainTabYh"
              class="main-tab-item"
              :class="{active: mainTab === 'maintain'}"
              @click="handleMainTabClick('maintain')"
            >养护任务</view>
            <view
              v-if="showMainTabXj"
              class="main-tab-item"

              :class="{active: mainTab === 'inspection'}"
              @click="handleMainTabClick('inspection')"

            >巡检任务</view>
            <view
              class="main-tab-item"
              :class="{active: mainTab === 'workorder'}"
              @click="handleMainTabClick('workorder')"
            >工单</view>
          </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 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></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:  60rpx;">

                  <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.historyCompletionRate }}%</text>

                  </template>
                </view>

              </view>

            </view>

          </scroll-view>
        </view>

      </view>

    </view>

  </template>
  

  <script setup lang="ts">

  import { ref, computed, nextTick, watch } 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,
    getCurrentOrg,
    orgTaskIndicator

  } from "@/api/index/index";

  const userStore = useUserStore();

  const deptId = computed(() => String(userStore.userInfo?.deptId ?? ''));

  // ====================== 分组配置（多部门归属同一组） ======================

  type GroupItem = {

    deptIds: string[];

    label: string;

    showTipHeader: boolean;
    useWalkText: boolean;

  };

  const groupConfig: GroupItem[] = [

    {
      deptIds: ['361', '363', '279', '277', '270'],

      label: '[组2 A1B2 纯效率·有提醒]',

      showTipHeader: true,
      useWalkText: true
    },

    {
      deptIds: ['252', '273', '274', '337', '359', '360'],

      label: '[组3 A2B1 个性化·无提醒]',

      showTipHeader: false,
      useWalkText: false
    },

    {
      deptIds: ['281', '272', '271', '338', '280'],

      label: '[组4 A2B2 个性化·有提醒]',

      showTipHeader: true,
      useWalkText: false
    },

  ];

  const defaultGroup: GroupItem = {
    deptIds: [],

    label: '[组1 A1B1 纯效率·无提醒]',

    showTipHeader: false,
    useWalkText: true
  };

  const currentGroup = computed(() => {

    const targetDept = deptId.value;

    for (const g of groupConfig) {
      if (g.deptIds.includes(targetDept)) {
        return g;

      }
    }

    return defaultGroup;

  });

  const tipText = computed(() => currentGroup.value.label);
  const showTipHeader = computed(() => currentGroup.value.showTipHeader);
  const isWalkTextMode = computed(() => currentGroup.value.useWalkText);
  const useDistanceApi = computed(() => currentGroup.value.useWalkText);
  // =========================================================================

  // ========== 一级Tab：养护/巡检/工单 =========
  // 默认期望打开 maintain，watch权限自动修正

  const mainTab = ref<'maintain' | 'inspection' | 'workorder'>('maintain');

  
  // ✅ 修复：用户角色数组
  const userRoles = computed<string[]>(() => userStore.userInfo?.roles || []);
  console.log('当前用户角色数组：', userRoles.value)
  
  // 权限控制角色列表：包含这些角色，则隐藏对应tab
  const hideYhRoleList = ['patrol_leader', 'patrol_global', 'yl_inspector', 'hjws_inspector', 'zxgl_inspector'];
  const hideXjRoleList = ['zxgl_worker', 'team_leader_hjws', 'hjws_worker', 'team_leader_wy', 'wy_worker', 'yl_worker', 'team_leader_yl'];
  
  // ✅ 修复：用户角色数组 和 黑名单数组 存在交集 → 隐藏养护tab
  const showMainTabYh = computed(() => {
    // 判断：用户角色里是否存在任意一个在hideYhRoleList中的角色
    const hasHideRole = userRoles.value.some(role => hideYhRoleList.includes(role));
    return !hasHideRole;
  });
  // ✅ 修复：巡检tab权限
  const showMainTabXj = computed(() => {
    const hasHideRole = userRoles.value.some(role => hideXjRoleList.includes(role));
    return !hasHideRole;
  });
  
  // 获取可见tab数组，用于自动选中
  const availableTabList = computed(() => {

    const list: Array<'maintain' | 'inspection' | 'workorder'> = [];

    if (showMainTabYh.value) list.push('maintain');

    if (showMainTabXj.value) list.push('inspection');

    list.push('workorder');
    return list;
  });
  
  // 监听权限变化：如果当前选中tab不可见，自动切到第一个可用tab
  watch([showMainTabYh, showMainTabXj], () => {
    const available = availableTabList.value;
    console.log('可用tab列表', available);
    if (!available.includes(mainTab.value)) {
      mainTab.value = available[0];
      console.log(`当前角色无【养护任务】权限，自动切换至：${mainTab.value}`)
    }
  }, { immediate: true });
  
  // 一级Tab切换事件

  const handleMainTabClick = async (tabKey: 'maintain' | 'inspection' | 'workorder') => {

    if (mainTab.value === tabKey) return;
    mainTab.value = tabKey;
    currentTabValue.value = 0; // 切大tab默认回到待办
    showChartArea.value = true;
    // 重新拉取对应类型任务
    await loadAllTaskByDept();
  };
  

  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: '12%',

      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].value}<br/>
  ${params[1].seriesName}: ${params[1].value}`;

      }
    },
    legend: {
      show: true,
      top: '5%',

      textStyle: { fontSize: 12 }

    }

  });

  const baseList = ref<Array<{ num: string; title: string; name: string }>>([]);

  const orgOptions = ref<any[]>([]);
  const value1 = ref<number | string>('');
  const showActionSheet = ref(false);

  watch(orgOptions, async (list) => {
    if (list.length && !value1.value) {
      value1.value = list[0].value;
      // 拿到默认组织后，拉指标
      if (dateRange.value.length === 2) {
        await fetchOrgIndicator(Number(value1.value), dateRange.value[0], dateRange.value[1]);
      }
    }
  }, { immediate: true });

  const actionSheetOptions = computed(() => {
    return orgOptions.value.map(opt => ({

      name: opt.label,
      value: opt.value

    }));
  });
  const sortLabel = computed(() => {
    const cur = orgOptions.value.find(i => i.value === value1.value);
    return cur?.label ?? "";
  });
  const openActionSheet = () => {
    showActionSheet.value = true;
  };
  // ActionSheet选中组织：刷新指标
  const handleSheetSelect = async (item: { name: string; value: number }) => {
    value1.value = item.value;
    showActionSheet.value = false;
    console.log('选中组织：', item.value);
    if (dateRange.value.length === 2) {
      await fetchOrgIndicator(item.value, dateRange.value[0], dateRange.value[1]);
    }
  };

  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);

  const scrollHideThreshold = rpx2px(80);

  const safeShowThreshold = rpx2px(130);
  let scrollTimer: number | null = null;

  const handleTouchTop = () => {
    showChartArea.value = true;

  };

  const onListScroll = (e: any) => {
    const scrollTop = e.detail.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);
  };

  const handleTabClick = (tabIndex: number) => {
    if (currentTabValue.value === tabIndex) return;
    currentTabValue.value = tabIndex;

    showChartArea.value = true;
  };

  // ========== 公共函数：请求 orgTaskIndicator 指标接口 ==========
  const fetchOrgIndicator = async (orgId: number, beginDate: string, endDate: string) => {
    try {
      // 日期字符串转毫秒时间戳
      const beginTime = new Date(beginDate).getTime();
      const endTime = new Date(endDate).getTime();
      const res = await orgTaskIndicator({
        orgId,
        beginTime,
        endTime
      });
      console.log('orgTaskIndicator 返回：', res);
      baseList.value = [

        { num: String(res.totalCnt ?? 0), title: '应办任务数', name: 'file-text' },
        { num: String(res.doneCnt ?? 0), title: '已办任务数', name: 'checkmark-circle' },
        { num: String(res.pendingCnt ?? 0), title: '待办任务数', name: 'clock' },
        { num: String(res.overdueCnt ?? 0), title: '超时未完成', name: 'close-circle' }

      ];

    } catch (err) {
      console.error('orgTaskIndicator 请求失败：', err);
    }
  };

  // ========== 初始化日期范围（近7天） ==========
  const initRecent7Days = () => {
    const now = new Date();
    const end = new Date(now);

    end.setDate(end.getDate());

    const start = new Date(end);

    start.setDate(start.getDate() - 6);

    dateRange.value = [

      timeFormat(start, 'yyyy-mm-dd'),
      timeFormat(end, 'yyyy-mm-dd')

    ];

    console.log(dateRange.value)

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

  };

  const getUnread = async () => {
    try {
      const res = await getUnreadCount();
      msgCount.value = res || 0;
    } catch (error) {

      console.error('获取未读消息失败:', error);
    }
  };

  // getOrg：只拉组织下拉选项，不处理指标
  const getOrg = async () => {
    try {
      const res = await getCurrentOrg();
      console.log('getCurrentOrg组织下拉：', res);
      orgOptions.value = res.options || [];
    } catch (error) {
      console.error('获取组织下拉失败:', error);

    }
  };

  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, taskType: string) => {

    try {

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

      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('loadDistanceApiTask error', err);

      todoFullList.value = [];
      doneFullList.value = [];
      todoTotal.value = 0;
      doneTotal.value = 0;

    }

  };

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

    try {

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

        taskDetailsWithSmartSort({ queryType: 1, currentLon: lon, currentLat: lat, taskType }),
        taskDetailsWithSmartSort({ queryType: 2, currentLon: lon, currentLat: lat, taskType })

      ]);
      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('loadSmartSortTask error', 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;

    // 根据一级Tab选择不同接口
    if (mainTab.value === 'maintain') {
      if (useDistanceApi.value) {
        await loadDistanceApiTask(loc.lon, loc.lat, 'maintain');
      } else {
        await loadSmartSortTask(loc.lon, loc.lat, 'maintain');
      }

    } else if (mainTab.value === 'inspection') {

      if (useDistanceApi.value) {

        await loadDistanceApiTask(loc.lon, loc.lat, 'inspection');

      } else {

        await loadSmartSortTask(loc.lon, loc.lat, 'inspection');

      }
    } else if (mainTab.value === 'workorder') {
      // ========= 工单tab，后续对接工单接口，先置空列表占位 =========

     if (useDistanceApi.value) {
        await loadDistanceApiTask(loc.lon, loc.lat, 'workorder');
      } else {
        await loadSmartSortTask(loc.lon, loc.lat, 'workorder');
      }

    }

  };

  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('定位失败');
                  }
                });
              },
              fail: () => {
                uni.showModal({
                  title: '需要定位权限',
                  content: '允许定位才能查看任务距离',
                  confirmText: '去设置',
                  success: (modalRes) => {
                    if (modalRes.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('定位失败');
              }
            });
          }
        },
        fail: (err) => {
          reject('获取权限设置失败');
        }
      });
    });

  };

  const handleMsgClick = () => {
    uni.navigateTo({ url: '/pages-sub/msg/msg' });
  };

  const handleTaskClick = (item: any) => {
    if (item.taskType == "maintain") {
      if (currentTabValue.value === 0) {

        uni.navigateTo({
          url: `/pages-sub/daily/maintain-add?planNo=${item.planNo || ''}&planTypeId=${item.planTypeId ?? ''}&businessLine=${item.busiLine ?? ''}`
        });
      } else {
        uni.navigateTo({
          url: `/pages-sub/daily/maintain-detail?planNo=${item.planNo || ''}`
        });

      }

    }

    if (item.taskType == "inspection") {
      if (currentTabValue.value === 0) {

        uni.navigateTo({
          url: `/pages-sub/daily/inspect-add?planNo=${item.planNo}&batchNo=${item.batchNo}`
        });
      } else {
        uni.navigateTo({
          url: `/pages-sub/daily/inspect-detail?planNo=${item.planNo || ''}`
        });

      }
    }
  };

  onShow(async () => {
    showChartArea.value = true;
    chartWidth.value = rpx2px(750 - 60);
    chartHeight.value = rpx2px(300);
    initRecent7Days();

    // getUnread();

    await getOrg(); // 拉取组织下拉列表
    await loadAllTaskByDept();
  });

  onUnload(() => {
    if (scrollTimer) clearTimeout(scrollTimer);
  });

  </script>
  

  <style scoped lang="scss">

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

  $text-color: #333;
  $text-color-light: #666;

  $text-placeholder: #999;

  $bg-color: #f5f5f7;
  $card-bg: #fff;

  $border-radius: 16rpx;
  $card-radius: 5rpx;
  $spacing-sm: 5rpx;

  $spacing-md: 12rpx;

  $spacing-lg: 15rpx;

  $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: 140rpx $spacing-lg 165rpx;

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

    .username {

      font-size: 32rpx;
      margin-bottom: 4rpx;

    }

    .login-desc {

      font-size: 28rpx;

    }

    .msg-icon {
      position: relative;

      padding: 5rpx;
      top: 10rpx;

      border-radius: 50%;

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

      .msg-badge {
        position: absolute;

        top: -2rpx;
        right: -3rpx;

      }
    }
  }

  .content-wrap {

    flex: 1;

    margin-top: -122rpx;

    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;

    &[hidden] {
      opacity: 0;
      height: 0;
      margin: 0;
    }

  }

  .module-title {

    padding: $spacing-lg;

    font-size: 28rpx;

    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: 24rpx;
      color: $text-placeholder;

      margin-bottom: $spacing-md;

      .date-picker-wrap {

        border-radius: 3rpx;

        transition: background-color 0.2s;

        position: relative;
        z-index: 999;

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

      }
    }

    .chart-container {

      width: 100%;

      height: 150rpx;

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

    }
  }

  .con-wrap {

    border-radius: 8rpx;

    background-color: #fff;

    margin: 0 15rpx;

    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  // ========= 【仅一级Tab：养护/巡检/工单】下划线样式，其余全部保留原有css =========
  .main-tab-wrap {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 0 30rpx;

  }

  .main-tab-item {
    padding: 24rpx 16rpx;
    font-size: 30rpx;
    color: #666;
    position: relative;
    transition: color 0.24s;
    &.active {
      color: #1677ff;
      font-weight: 500;
      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 4rpx;
        background-color: #1677ff;
        border-radius: 2rpx;
      }
    }
  }
  // 待办/已办胶囊tab【原样保留你原来的样式，完全没改动！！】

  .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;

    font-size: 28rpx;
    color: #999;
    background: #f5f5f5;
    border-radius: 0;
    transition: all 0.2s ease;
    font-weight: 500;

    &.active {
      color: #d4af37;
      background: #fff8dc;
    }

  }

  .tip-header {
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 12rpx 15rpx;
    background: #e6f7ff;

    font-size: 28rpx;

    color: #000;
    flex-shrink: 0;
  }

  .tip-top {

    padding: 8rpx 0 0 70rpx;

    flex-shrink: 0;

  }

  .task-list-container {

    width: 100%;
    height: 100%;

    padding-bottom: 220rpx;

    box-sizing: border-box;
  }

  .empty-box {
    padding: 60rpx 0;

  }

  .sort-trigger {
    display: flex;
    align-items: center;

    font-size: 24rpx;
    color: $text-placeholder;
    .sort-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 220rpx;
    }

  }

  .task-item {
    padding: $spacing-md;
    transition: background-color 0.2s;

    border-bottom: 1rpx 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: 80rpx;

    }

    .task-name-text {
      flex: 1;

      font-size: 24rpx;

      color: $text-color;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &__name {

      font-size: 24rpx;

      color: $text-color;

      display: inline-block;

    }

    &__footer {
      display: flex;

      align-items: flex-start;
      gap: 6rpx;

      font-size: 24rpx;

      color: $text-color-light;
      margin-top: $spacing-sm;

      align-items: center;

    }
  }

  .loc-icon {

    width: 28rpx;
    height: 28rpx;

  }

  .urgency-tag {
    color: #7D7D7D;

  }

  .grid-item-icon-box {

    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16rpx;

  }
  .grid-num-icon {

    font-size: 40rpx;
    font-weight: 600;
    color: #333;
    margin-top: 8rpx;

  }
  .grid-label-icon {

    font-size: 22rpx;
    color: #666;
    margin-top: 4rpx;

  }

  </style>