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','team_leader_zxgl'];

// ✅ 修复：用户角色数组 和 黑名单数组 存在交集 → 隐藏养护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);
// 日期选择确认回调
const handleDateConfirm = async (range: string[]) => {
  console.log('选择的日期范围：', range);
  dateRange.value = range;
  const [startDate, endDate] = range;
  // 1. 更新图表数据
  // await initChartData(startDate, endDate);

  // 2. 刷新组织指标卡片（数字指标4格卡片）
  if(value1.value){
    await fetchOrgIndicator(Number(value1.value), startDate, endDate);
  }
};

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() );
  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: 88rpx;
  }
  .task-name-text {
    flex: 1;
    font-size: 28rpx;
    color: $text-color;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  &__name {
    font-size: 28rpx;
    color: $text-color;
    display: inline-block;
  }
  &__footer {
    display: flex;
    align-items: flex-start;
    gap: 6rpx;
    font-size: 26rpx;
    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>