运营模块-任务评估，台账异常，任务报表-油站报表

apps/web-ele/src/views/operationRadar/accountAnalysis/index.vue

@@ -1,17 +1,512 @@
 <script lang="ts" setup>
+// 导入部分
+import type { EchartsUIType } from '@vben/plugins/echarts';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { ref, watch, onMounted } from 'vue';
 import { Page } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ElSelect, ElOption, ElButton, ElSpace, ElRadioGroup, ElRadioButton } from 'element-plus';
+
+// 类型定义
+interface TabOption {
+  label: string;
+  value: 'station' | 'area';
+}
+
+interface StationOption {
+  label: string;
+  value: string;
+}
+
+interface AccountOption {
+  label: string;
+  value: 'operation' | 'hidden';
+}
+
+interface ExceptionType {
+  id: number;
+  name: string;
+  count: number;
+  percentage: string;
+}
+
+interface StationException {
+  id: number;
+  station: string;
+  area: string;
+  total: number;
+  transferred: number;
+  completed: number;
+  pending: number;
+  unhandled: number;
+  equipment: number;
+  none: number;
+  hygiene: number;
+  compliance: number;
+}
+
+// 响应式数据
+// Tab切换数据
+const activeTab = ref<'station' | 'area'>('station');
+const tabOptions: TabOption[] = [
+  { label: '油站', value: 'station' },
+  { label: '片区', value: 'area' },
+];
+
+// 搜索相关数据
+const periodType = ref<'week' | 'month'>('week');
+const currentPeriod = ref('12月4日-12月11日');
+const selectedStation = ref('');
+const selectedAccount = ref('operation');
+
+const stationOptions: StationOption[] = [
+  { label: '油站1', value: 'station1' },
+  { label: '油站2', value: 'station2' },
+  { label: '油站3', value: 'station3' },
+  { label: '油站4', value: 'station4' },
+  { label: '油站5', value: 'station5' },
+];
+
+const accountOptions: AccountOption[] = [
+  { label: '运营台账', value: 'operation' },
+  { label: '隐患台账', value: 'hidden' },
+];
+
+// 图表相关数据
+const pieChartRef = ref<EchartsUIType>();
+const barChartRef = ref<EchartsUIType>();
+const { renderEcharts: renderPieEcharts } = useEcharts(pieChartRef);
+const { renderEcharts: renderBarEcharts } = useEcharts(barChartRef);
+
+// 辅助函数
+// 格式化日期为中文格式（MM月dd日）
+const formatDate = (date: Date): string => {
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  return `${month}月${day}日`;
+};
+
+// 更新时间范围的函数
+const updateTimeRange = (type: 'week' | 'month'): void => {
+  const today = new Date();
+  const endDate = today;
+  let startDate: Date;
+
+  if (type === 'week') {
+    // 计算最近一周（今天往前推7天）
+    startDate = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
+  } else {
+    // 计算最近一个月（上个月的今天到今天）
+    startDate = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
+  }
+
+  currentPeriod.value = `${formatDate(startDate)}-${formatDate(endDate)}`;
+};
+
+// 图表和数据配置
+// 统一的图表颜色配置 - 确保图表颜色风格一致
+const CHART_COLORS = {
+  EQUIPMENT: '#5ab1ef', // 设备设施异常颜色
+  HYGIENE: '#52c41a', // 卫生异常颜色
+  COMPLIANCE: '#faad14', // 合规异常颜色
+  OTHER: '#f5222d', // 其他异常颜色
+  NONE: '#722ed1', // 无异常颜色
+  TRANSFERRED: '#5ab1ef', // 转任务颜色
+  COMPLETED: '#52c41a', // 已完成颜色
+  PENDING: '#faad14', // 待处理颜色
+  UNHANDLED: '#f5222d', // 未处理颜色
+};
+
+// Mock数据配置
+// 异常类型数据
+const MOCK_EXCEPTION_TYPES: ExceptionType[] = [
+  { id: 1, name: '设备设施', count: 120, percentage: '35%' },
+  { id: 2, name: '卫生', count: 80, percentage: '23%' },
+  { id: 3, name: '合规', count: 60, percentage: '17%' },
+  { id: 4, name: '其他', count: 50, percentage: '15%' },
+  { id: 5, name: '无', count: 35, percentage: '10%' },
+];
+
+// 油站异常数据
+const MOCK_STATION_EXCEPTIONS: StationException[] = [
+  { id: 1, station: '油站1', area: '片区1', total: 150, transferred: 80, completed: 40, pending: 20, unhandled: 10, equipment: 60, none: 20, hygiene: 40, compliance: 30 },
+  { id: 2, station: '油站2', area: '片区1', total: 120, transferred: 70, completed: 30, pending: 15, unhandled: 5, equipment: 50, none: 15, hygiene: 30, compliance: 25 },
+  { id: 3, station: '油站3', area: '片区2', total: 180, transferred: 90, completed: 50, pending: 30, unhandled: 10, equipment: 70, none: 25, hygiene: 50, compliance: 35 },
+  { id: 4, station: '油站4', area: '片区2', total: 90, transferred: 50, completed: 25, pending: 10, unhandled: 5, equipment: 35, none: 10, hygiene: 25, compliance: 20 },
+  { id: 5, station: '油站5', area: '片区3', total: 200, transferred: 100, completed: 60, pending: 30, unhandled: 10, equipment: 80, none: 30, hygiene: 55, compliance: 35 },
+];
+
+// 表格配置
+// 异常类型表格配置
+const exceptionColumns: VxeGridProps['columns'] = [
+  { title: '标签名', field: 'name' },
+  { title: '数量', field: 'count' },
+  { title: '占比', field: 'percentage' },
+];
+
+const exceptionGridOptions: VxeGridProps = {
+  columns: exceptionColumns,
+  size: 'medium',
+  height: '250px',
+  useSearchForm: false,
+  proxyConfig: {
+    enabled: true,
+    autoLoad: true,
+    ajax: {
+      query: async () => {
+        return { items: MOCK_EXCEPTION_TYPES, total: MOCK_EXCEPTION_TYPES.length };
+      },
+    },
+  },
+  rowConfig: { keyField: 'id' },
+  toolbarConfig: {},
+  id: 'exception-type-table',
+};
+
+// 油站异常表格配置
+const stationExceptionColumns: VxeGridProps['columns'] = [
+  { title: '油站', minWidth: 120, field: 'station' },
+  { title: '片区', minWidth: 120, field: 'area' },
+  { title: '总数', minWidth: 100, field: 'total' },
+  { title: '转任务', minWidth: 100, field: 'transferred' },
+  { title: '已完成', minWidth: 100, field: 'completed' },
+  { title: '未处理', minWidth: 100, field: 'unhandled' },
+  { title: '待处理', minWidth: 100, field: 'pending' },
+  { title: '设备设施', minWidth: 120, field: 'equipment' },
+  { title: '无', minWidth: 80, field: 'none' },
+  { title: '卫生', minWidth: 80, field: 'hygiene' },
+  { title: '合规', minWidth: 80, field: 'compliance' },
+];
+
+const stationExceptionGridOptions: VxeGridProps = {
+  columns: stationExceptionColumns,
+  size: 'medium',
+  height: '400px',
+  useSearchForm: false,
+  proxyConfig: {
+    enabled: true,
+    autoLoad: true,
+    ajax: {
+      query: async () => {
+        return { items: MOCK_STATION_EXCEPTIONS, total: MOCK_STATION_EXCEPTIONS.length };
+      },
+    },
+  },
+  rowConfig: { keyField: 'id' },
+  toolbarConfig: {},
+  id: 'station-exception-table',
+};
+
+// 创建表格实例
+const [ExceptionTable] = useVbenVxeGrid({ gridOptions: exceptionGridOptions });
+const [StationExceptionTable] = useVbenVxeGrid({ gridOptions: stationExceptionGridOptions });
+
+// 图表更新函数
+// 更新饼图 - 各类异常占比
+const updatePieChart = () => {
+  const pieData = MOCK_EXCEPTION_TYPES.map(item => ({
+    name: item.name,
+    value: item.count,
+  }));
+
+  renderPieEcharts({
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)',
+    },
+    legend: {
+      orient: 'vertical',
+      right: 10,
+      top: 'center',
+    },
+    series: [
+      {
+        name: '异常类型',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#fff',
+          borderWidth: 2,
+        },
+        label: {
+          show: false,
+          position: 'center',
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 20,
+            fontWeight: 'bold',
+          },
+        },
+        labelLine: {
+          show: false,
+        },
+        data: pieData,
+        color: [CHART_COLORS.EQUIPMENT, CHART_COLORS.HYGIENE, CHART_COLORS.COMPLIANCE, CHART_COLORS.OTHER, CHART_COLORS.NONE],
+      },
+    ],
+  });
+};
+
+// 更新柱状图 - 油站异常数量
+const updateBarChart = () => {
+  const stationNames = MOCK_STATION_EXCEPTIONS.map(item => item.station);
+  const exceptionData = MOCK_STATION_EXCEPTIONS.map(item => item.total);
+
+  renderBarEcharts({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: stationNames,
+        axisTick: {
+          alignWithLabel: true,
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '异常数量',
+      },
+    ],
+    series: [
+      {
+        name: '异常总数',
+        type: 'bar',
+        barWidth: '10%',
+        data: exceptionData,
+        itemStyle: {
+          color: CHART_COLORS.TRANSFERRED,
+        },
+      },
+    ],
+  });
+};
+
+// 事件处理函数
+// 查询按钮点击事件
+const handleQuery = () => {
+  console.log('查询条件:', {
+    tab: activeTab.value,
+    station: selectedStation.value,
+    account: selectedAccount.value,
+    periodType: periodType.value,
+    period: currentPeriod.value,
+  });
+  // TODO: 这里可以添加实际的查询逻辑，调用API获取真实数据
+  updatePieChart();
+  updateBarChart();
+};
+
+// 导出按钮点击事件
+const handleExport = () => {
+  console.log('导出数据');
+  // TODO: 这里可以添加导出逻辑
+};
+
+// 生命周期钩子和监听
+// 监听时间类型变化 - 更新当前时段显示
+watch(periodType, (newType) => {
+  updateTimeRange(newType);
+});
+
+// 监听标签页变化 - 重新加载数据和图表
+watch(activeTab, () => {
+  updatePieChart();
+  updateBarChart();
+});
+
+// 组件初始化 - 设置默认数据和图表
+onMounted(() => {
+  updateTimeRange(periodType.value); // 初始化时间范围
+  updatePieChart(); // 初始化饼图
+  updateBarChart(); // 初始化柱状图
+});
 </script>
+
 <template>
-<Page>
-<div class="wrap">
-         空空如也
-</div>
-</Page>
+  <Page :auto-content-height="true">
+    <div class="account-analysis">
+      <!-- Tab切换区域 -->
+      <div class="tab-container">
+        <el-tabs v-model="activeTab">
+          <el-tab-pane v-for="tab in tabOptions" :key="tab.value" :label="tab.label" :name="tab.value">
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+
+      <!-- 搜索栏区域 -->
+      <div class="search-container">
+        <ElSpace>
+          <div class="search-item">
+            <label>油站：</label>
+            <ElSelect v-model="selectedStation" placeholder="请选择油站" style="width: 150px;">
+              <ElOption v-for="station in stationOptions" :key="station.value" :label="station.label" :value="station.value" />
+            </ElSelect>
+          </div>
+          <div class="search-item">
+            <label>运营台账：</label>
+            <ElSelect v-model="selectedAccount" placeholder="请选择台账" style="width: 150px;">
+              <ElOption v-for="account in accountOptions" :key="account.value" :label="account.label" :value="account.value" />
+            </ElSelect>
+          </div>
+          <div class="search-item">
+            <label>时间：</label>
+            <ElRadioGroup v-model="periodType" size="large">
+              <ElRadioButton label="week" value="week">周</ElRadioButton>
+              <ElRadioButton label="month" value="month">月</ElRadioButton>
+            </ElRadioGroup>
+          </div>
+          <div class="search-item">
+            <label>当前时段：</label>
+            <span>{{ currentPeriod }}</span>
+          </div>
+        </ElSpace>
+      </div>
+
+      <!-- 操作按钮区域 -->
+      <div class="button-container">
+        <ElSpace>
+          <ElButton type="primary" @click="handleQuery">查询</ElButton>
+        </ElSpace>
+      </div>
+
+      <!-- 各类异常占比模块 -->
+      <div class="exception-type-container">
+        <h3>各类异常占比</h3>
+        <div class="exception-type-content">
+          <!-- 饼图区域 -->
+          <div class="pie-chart">
+            <EchartsUI ref="pieChartRef" style="width: 100%; height: 300px;" />
+          </div>
+          <!-- 异常类型表格 -->
+          <div class="exception-type-table">
+            <ExceptionTable />
+          </div>
+        </div>
+      </div>
+
+      <!-- 油站异常报表模块 -->
+      <div class="station-exception-container">
+        <div class="station-exception-header">
+          <h3>油站异常报表</h3>
+          <ElButton @click="handleExport">导出</ElButton>
+        </div>
+        <!-- 柱状图区域 -->
+        <div class="bar-chart">
+          <EchartsUI ref="barChartRef" style="width: 100%; height: 300px;" />
+        </div>
+        <!-- 油站异常表格 -->
+        <div class="station-exception-table">
+          <StationExceptionTable />
+        </div>
+      </div>
+    </div>
+  </Page>
 </template>
-<style lang="scss" scoped>
-.wrap {
-padding: 16px;
-background-color: #fff;
-border-radius: 6px;
+
+<style scoped lang="scss">
+.account-analysis {
+  min-height: 100vh;
+  padding: 16px;
+  background-color: #fff;
+
+  .tab-container {
+    margin-bottom: 16px;
+  }
+
+  .search-container {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    margin-bottom: 16px;
+    background-color: #fff;
+    border-radius: 6px;
+
+    .search-item {
+      display: flex;
+      align-items: center;
+
+      label {
+        margin-right: 8px;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .button-container {
+    margin-bottom: 16px;
+  }
+
+  .exception-type-container {
+    padding: 16px;
+    margin-bottom: 16px;
+    background-color: #fff;
+    border-radius: 6px;
+
+    h3 {
+      margin-bottom: 16px;
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    .exception-type-content {
+      display: flex;
+      gap: 16px;
+
+      .pie-chart {
+        flex: 0.4;
+        min-width: 300px;
+      }
+
+      .exception-type-table {
+        flex: 0.6;
+        min-width: 300px;
+      }
+    }
+  }
+
+  .station-exception-container {
+    padding: 16px;
+    background-color: #fff;
+    border-radius: 6px;
+
+    .station-exception-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+
+      h3 {
+        font-size: 16px;
+        font-weight: 600;
+      }
+    }
+
+    .bar-chart {
+      width: 100%;
+      margin-bottom: 16px;
+    }
+
+    .station-exception-table {
+      width: 100%;
+    }
+  }
 }
 </style>

apps/web-ele/src/views/operationRadar/taskEvaluationReport/index.vue

@@ -1,17 +1,608 @@
 <script lang="ts" setup>
+// 导入部分
+import type { EchartsUIType } from '@vben/plugins/echarts';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { ref, watch, onMounted } from 'vue';
 import { Page } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ElSelect, ElOption, ElButton, ElSpace, ElRadioGroup, ElRadioButton } from 'element-plus';
+
+// 类型定义
+interface TabOption {
+  label: string;
+  value: 'station' | 'area' | 'stationManage' | 'stationStaff' | 'areaStaff' | 'headStaff';
+}
+
+interface StationOption {
+  label: string;
+  value: string;
+}
+
+interface EvaluationItem {
+  id: number;
+  dimension: string;
+  indicator: string;
+  currentScore: number;
+  currentValue: string;
+  lastValue: string;
+  comparison: '进步' | '持平' | '退步';
+  maxValue: string;
+  standard: string;
+}
+
+// 响应式数据
+// Tab切换数据
+const activeTab = ref<'station' | 'area' | 'stationManage' | 'stationStaff' | 'areaStaff' | 'headStaff'>('station');
+const tabOptions: TabOption[] = [
+  { label: '油站', value: 'station' },
+  { label: '片区', value: 'area' },
+  { label: '油站管理', value: 'stationManage' },
+  { label: '油站员工', value: 'stationStaff' },
+  { label: '片区人员', value: 'areaStaff' },
+  { label: '总部人员', value: 'headStaff' },
+];
+
+// 搜索相关数据
+const periodType = ref<'week' | 'month'>('week');
+const currentPeriod = ref('12月4日-12月11日');
+const selectedStation = ref('');
+const stationOptions: StationOption[] = [
+  { label: '油站1', value: 'station1' },
+  { label: '油站2', value: 'station2' },
+  { label: '油站3', value: 'station3' },
+];
+
+// 图表相关数据
+const radarChartRef = ref<EchartsUIType>();
+const trendChartRef = ref<EchartsUIType>();
+const { renderEcharts: renderRadarEcharts } = useEcharts(radarChartRef);
+const { renderEcharts: renderTrendEcharts } = useEcharts(trendChartRef);
+
+// 辅助函数
+// 格式化日期为中文格式（MM月dd日）
+const formatDate = (date: Date): string => {
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  return `${month}月${day}日`;
+};
+
+// 将十六进制颜色转换为带透明度的rgba颜色
+const hexToRgba = (hex: string, opacity: number): string => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+
+// 更新时间范围的函数
+const updateTimeRange = (type: 'week' | 'month'): void => {
+  const today = new Date();
+  const endDate = today;
+  let startDate: Date;
+
+  if (type === 'week') {
+    // 计算最近一周（今天往前推7天）
+    startDate = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
+  } else {
+    // 计算最近一个月（上个月的今天到今天）
+    startDate = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
+  }
+
+  currentPeriod.value = `${formatDate(startDate)}-${formatDate(endDate)}`;
+};
+
+// 图表和数据配置
+// 统一的图表颜色配置 - 确保图表颜色风格一致
+const CHART_COLORS = {
+  THIS_WEEK: '#5ab1ef', // 本周数据颜色
+  LAST_WEEK: '#faad14', // 上周数据颜色
+  LAST_MONTH: '#52c41a', // 上月同期数据颜色
+  TASK_COMPLETION: '#5ab1ef', // 任务完成率颜色
+  TASK_QUALITY: '#52c41a', // 任务质量颜色
+  PERFORMANCE_SCORE: '#faad14', // 绩效得分颜色
+  AVERAGE_SCORE: '#faad14', // 平均得分颜色
+  AUTHORIZATION: '#52c41a', // 授权完成率颜色
+  REVIEW_RATE: '#faad14', // 点评完成率颜色
+  EFFICIENCY: '#faad14', // 效率颜色
+};
+
+// Mock数据配置 - 为不同标签页提供模拟评估数据
+const MOCK_DATA_CONFIG: Record<string, EvaluationItem[]> = {
+  station: [
+    // 油站列表维度：总分，任务数量，任务质量，查阅情况，绩效，逾期
+    { id: 1, dimension: '总分', indicator: '总分值', currentScore: 95, currentValue: '95.62%', lastValue: '82.67%', comparison: '进步', maxValue: '95.62%', standard: '' },
+    { id: 2, dimension: '任务数量', indicator: '任务完成数', currentScore: 88, currentValue: '120个', lastValue: '105个', comparison: '进步', maxValue: '150个', standard: '' },
+    { id: 3, dimension: '任务质量', indicator: '任务达标率', currentScore: 92, currentValue: '98.5%', lastValue: '96.2%', comparison: '进步', maxValue: '99.0%', standard: '' },
+    { id: 4, dimension: '查阅情况', indicator: '查阅完成率', currentScore: 76, currentValue: '85.0%', lastValue: '80.0%', comparison: '进步', maxValue: '95.0%', standard: '' },
+    { id: 5, dimension: '绩效', indicator: '绩效得分', currentScore: 89, currentValue: '89分', lastValue: '85分', comparison: '进步', maxValue: '95分', standard: '' },
+    { id: 6, dimension: '逾期', indicator: '逾期率', currentScore: 72, currentValue: '5.2%', lastValue: '8.7%', comparison: '进步', maxValue: '3.0%', standard: '' },
+  ],
+  area: [
+    // 片区列表维度：总分，任务数量，任务质量，查阅情况，绩效
+    { id: 1, dimension: '总分', indicator: '总分值', currentScore: 92, currentValue: '92.35%', lastValue: '88.42%', comparison: '进步', maxValue: '95.62%', standard: '' },
+    { id: 2, dimension: '任务数量', indicator: '任务完成数', currentScore: 85, currentValue: '850个', lastValue: '780个', comparison: '进步', maxValue: '1000个', standard: '' },
+    { id: 3, dimension: '任务质量', indicator: '任务达标率', currentScore: 90, currentValue: '97.2%', lastValue: '95.8%', comparison: '进步', maxValue: '99.0%', standard: '' },
+    { id: 4, dimension: '查阅情况', indicator: '查阅完成率', currentScore: 78, currentValue: '82.5%', lastValue: '79.0%', comparison: '进步', maxValue: '95.0%', standard: '' },
+    { id: 5, dimension: '绩效', indicator: '绩效得分', currentScore: 87, currentValue: '87分', lastValue: '83分', comparison: '进步', maxValue: '95分', standard: '' },
+  ],
+  stationManage: [
+    // 油站管理列表维度：总分，任务数量，任务质量，查阅情况，授权
+    { id: 1, dimension: '总分', indicator: '总分值', currentScore: 90, currentValue: '90.45%', lastValue: '86.72%', comparison: '进步', maxValue: '95.62%', standard: '' },
+    { id: 2, dimension: '任务数量', indicator: '任务完成数', currentScore: 82, currentValue: '450个', lastValue: '420个', comparison: '进步', maxValue: '500个', standard: '' },
+    { id: 3, dimension: '任务质量', indicator: '任务达标率', currentScore: 88, currentValue: '96.8%', lastValue: '94.5%', comparison: '进步', maxValue: '99.0%', standard: '' },
+    { id: 4, dimension: '查阅情况', indicator: '查阅完成率', currentScore: 74, currentValue: '80.0%', lastValue: '76.5%', comparison: '进步', maxValue: '95.0%', standard: '' },
+    { id: 5, dimension: '授权', indicator: '授权完成率', currentScore: 85, currentValue: '92.5%', lastValue: '88.0%', comparison: '进步', maxValue: '98.0%', standard: '' },
+  ],
+  stationStaff: [
+    // 油站员工列表维度：总分，任务数量，任务质量
+    { id: 1, dimension: '总分', indicator: '总分值', currentScore: 88, currentValue: '88.72%', lastValue: '84.36%', comparison: '进步', maxValue: '95.62%', standard: '' },
+    { id: 2, dimension: '任务数量', indicator: '任务完成数', currentScore: 84, currentValue: '95个', lastValue: '88个', comparison: '进步', maxValue: '120个', standard: '' },
+    { id: 3, dimension: '任务质量', indicator: '任务达标率', currentScore: 91, currentValue: '97.8%', lastValue: '95.2%', comparison: '进步', maxValue: '99.0%', standard: '' },
+  ],
+  areaStaff: [
+    // 片区人员列表维度：总分，任务数量，任务质量，点评，逾期
+    { id: 1, dimension: '总分', indicator: '总分值', currentScore: 89, currentValue: '89.25%', lastValue: '85.68%', comparison: '进步', maxValue: '95.62%', standard: '' },
+    { id: 2, dimension: '任务数量', indicator: '任务完成数', currentScore: 86, currentValue: '780个', lastValue: '720个', comparison: '进步', maxValue: '900个', standard: '' },
+    { id: 3, dimension: '任务质量', indicator: '任务达标率', currentScore: 90, currentValue: '97.0%', lastValue: '94.8%', comparison: '进步', maxValue: '99.0%', standard: '' },
+    { id: 4, dimension: '点评', indicator: '点评完成率', currentScore: 79, currentValue: '85.5%', lastValue: '81.2%', comparison: '进步', maxValue: '95.0%', standard: '' },
+    { id: 5, dimension: '逾期', indicator: '逾期率', currentScore: 74, currentValue: '6.8%', lastValue: '9.3%', comparison: '进步', maxValue: '3.0%', standard: '' },
+  ],
+  headStaff: [
+    // 总部人员列表维度：总分，任务数量，任务质量，点评
+    { id: 1, dimension: '总分', indicator: '总分值', currentScore: 93, currentValue: '93.48%', lastValue: '89.75%', comparison: '进步', maxValue: '95.62%', standard: '' },
+    { id: 2, dimension: '任务数量', indicator: '任务完成数', currentScore: 87, currentValue: '420个', lastValue: '390个', comparison: '进步', maxValue: '500个', standard: '' },
+    { id: 3, dimension: '任务质量', indicator: '任务达标率', currentScore: 94, currentValue: '98.2%', lastValue: '96.5%', comparison: '进步', maxValue: '99.0%', standard: '' },
+    { id: 4, dimension: '点评', indicator: '点评完成率', currentScore: 83, currentValue: '89.0%', lastValue: '84.5%', comparison: '进步', maxValue: '95.0%', standard: '' },
+  ],
+};
+
+// 雷达图配置 - 定义不同标签页的雷达图维度和数据
+const RADAR_CHART_CONFIG: Record<string, { indicator: Array<{ name: string; max: number }>; radarData: number[] }> = {
+  station: {
+    indicator: [
+      { name: '任务数量', max: 100 },
+      { name: '任务质量', max: 100 },
+      { name: '查阅情况', max: 100 },
+      { name: '绩效', max: 100 },
+      { name: '逾期', max: 100 },
+    ],
+    radarData: [95, 92, 76, 89, 72],
+  },
+  area: {
+    indicator: [
+      { name: '任务数量', max: 100 },
+      { name: '任务质量', max: 100 },
+      { name: '查阅情况', max: 100 },
+      { name: '绩效', max: 100 },
+      { name: '平均得分', max: 100 },
+    ],
+    radarData: [92, 90, 78, 87, 85],
+  },
+  stationManage: {
+    indicator: [
+      { name: '任务数量', max: 100 },
+      { name: '任务质量', max: 100 },
+      { name: '查阅情况', max: 100 },
+      { name: '授权', max: 100 },
+      { name: '平均得分', max: 100 },
+    ],
+    radarData: [90, 88, 74, 85, 83],
+  },
+  stationStaff: {
+    indicator: [
+      { name: '任务数量', max: 100 },
+      { name: '任务质量', max: 100 },
+      { name: '平均得分', max: 100 },
+      { name: '效率', max: 100 },
+      { name: '合规性', max: 100 },
+    ],
+    radarData: [88, 91, 87, 82, 78],
+  },
+  areaStaff: {
+    indicator: [
+      { name: '任务数量', max: 100 },
+      { name: '任务质量', max: 100 },
+      { name: '点评', max: 100 },
+      { name: '逾期', max: 100 },
+      { name: '平均得分', max: 100 },
+    ],
+    radarData: [89, 90, 79, 74, 83],
+  },
+  headStaff: {
+    indicator: [
+      { name: '任务数量', max: 100 },
+      { name: '任务质量', max: 100 },
+      { name: '点评', max: 100 },
+      { name: '平均得分', max: 100 },
+      { name: '效率', max: 100 },
+    ],
+    radarData: [93, 94, 83, 88, 90],
+  },
+  default: {
+    indicator: [
+      { name: '任务完成率', max: 100 },
+      { name: '问题解决率', max: 100 },
+      { name: '效率提升', max: 100 },
+      { name: '合规性', max: 100 },
+      { name: '满意度', max: 100 },
+    ],
+    radarData: [95, 88, 76, 92, 85],
+  },
+};
+
+// 趋势图配置 - 定义不同标签页的趋势图数据和图例
+const TREND_CHART_CONFIG: Record<string, { series: any[]; legendData: string[] }> = {
+  station: {
+    series: [
+      { name: '任务完成率', type: 'line', data: [85, 88, 90, 87, 92, 95], itemStyle: { color: CHART_COLORS.TASK_COMPLETION } },
+      { name: '任务质量', type: 'line', data: [88, 90, 92, 91, 93, 95], itemStyle: { color: CHART_COLORS.TASK_QUALITY } },
+      { name: '绩效得分', type: 'line', data: [82, 84, 86, 85, 88, 89], itemStyle: { color: CHART_COLORS.PERFORMANCE_SCORE } },
+    ],
+    legendData: ['任务完成率', '任务质量', '绩效得分'],
+  },
+  area: {
+    series: [
+      { name: '任务完成率', type: 'line', data: [82, 85, 88, 86, 90, 92], itemStyle: { color: CHART_COLORS.TASK_COMPLETION } },
+      { name: '任务质量', type: 'line', data: [86, 88, 90, 89, 91, 93], itemStyle: { color: CHART_COLORS.TASK_QUALITY } },
+      { name: '平均得分', type: 'line', data: [80, 82, 85, 84, 86, 87], itemStyle: { color: CHART_COLORS.AVERAGE_SCORE } },
+    ],
+    legendData: ['任务完成率', '任务质量', '平均得分'],
+  },
+  stationManage: {
+    series: [
+      { name: '任务完成率', type: 'line', data: [80, 83, 85, 84, 88, 90], itemStyle: { color: CHART_COLORS.TASK_COMPLETION } },
+      { name: '授权完成率', type: 'line', data: [85, 87, 89, 88, 91, 93], itemStyle: { color: CHART_COLORS.AUTHORIZATION } },
+      { name: '平均得分', type: 'line', data: [78, 81, 83, 82, 85, 86], itemStyle: { color: CHART_COLORS.AVERAGE_SCORE } },
+    ],
+    legendData: ['任务完成率', '授权完成率', '平均得分'],
+  },
+  stationStaff: {
+    series: [
+      { name: '任务完成率', type: 'line', data: [78, 81, 83, 82, 86, 88], itemStyle: { color: CHART_COLORS.TASK_COMPLETION } },
+      { name: '任务质量', type: 'line', data: [88, 90, 92, 91, 94, 95], itemStyle: { color: CHART_COLORS.TASK_QUALITY } },
+      { name: '效率', type: 'line', data: [75, 78, 80, 79, 82, 84], itemStyle: { color: CHART_COLORS.EFFICIENCY } },
+    ],
+    legendData: ['任务完成率', '任务质量', '效率'],
+  },
+  areaStaff: {
+    series: [
+      { name: '任务完成率', type: 'line', data: [80, 83, 85, 84, 88, 89], itemStyle: { color: CHART_COLORS.TASK_COMPLETION } },
+      { name: '任务质量', type: 'line', data: [86, 88, 90, 89, 92, 94], itemStyle: { color: CHART_COLORS.TASK_QUALITY } },
+      { name: '点评完成率', type: 'line', data: [75, 78, 80, 79, 82, 84], itemStyle: { color: CHART_COLORS.REVIEW_RATE } },
+    ],
+    legendData: ['任务完成率', '任务质量', '点评完成率'],
+  },
+  headStaff: {
+    series: [
+      { name: '任务完成率', type: 'line', data: [85, 88, 90, 89, 93, 95], itemStyle: { color: CHART_COLORS.TASK_COMPLETION } },
+      { name: '任务质量', type: 'line', data: [90, 92, 94, 93, 95, 97], itemStyle: { color: CHART_COLORS.TASK_QUALITY } },
+      { name: '点评完成率', type: 'line', data: [78, 81, 83, 82, 86, 88], itemStyle: { color: CHART_COLORS.REVIEW_RATE } },
+    ],
+    legendData: ['任务完成率', '任务质量', '点评完成率'],
+  },
+  default: {
+    series: [
+      { name: '任务完成率', type: 'line', data: [85, 88, 90, 87, 92, 95], itemStyle: { color: CHART_COLORS.TASK_COMPLETION } },
+      { name: '问题解决率', type: 'line', data: [80, 82, 85, 83, 86, 88], itemStyle: { color: CHART_COLORS.TASK_QUALITY } },
+      { name: '效率提升', type: 'line', data: [70, 72, 75, 73, 76, 78], itemStyle: { color: CHART_COLORS.EFFICIENCY } },
+    ],
+    legendData: ['任务完成率', '问题解决率', '效率提升'],
+  },
+};
+
+// 数据生成函数
+// 根据标签页类型生成不同的mock数据 - 实现数据与视图的解耦
+const generateMockData = (tabType: string): EvaluationItem[] => {
+  return MOCK_DATA_CONFIG[tabType] || [];
+};
+
+// 表格配置
+const evaluationColumns: VxeGridProps['columns'] = [
+  { title: '维度', width: 100, field: 'dimension' },
+  { title: '指标', field: 'indicator' },
+  { title: '本周得分', width: 120, field: 'currentScore' },
+  { title: '本周数值', width: 120, field: 'currentValue' },
+  { title: '上周数值', width: 120, field: 'lastValue' },
+  { title: '对比结果', width: 120, field: 'comparison', scopedSlots: { default: 'comparison' } },
+  { title: '全网最高数值', width: 150, field: 'maxValue' },
+  { title: '评分标准', width: 100, field: 'standard', scopedSlots: { default: 'standard' } },
+];
+
+const evaluationGridOptions: VxeGridProps = {
+  columns: evaluationColumns,
+  size: 'medium',
+  height: '400px',
+  useSearchForm: false,
+  proxyConfig: {
+    enabled: true,
+    autoLoad: true,
+    ajax: {
+      query: async () => {
+        // 根据当前激活的标签页返回对应的数据
+        const mockData = generateMockData(activeTab.value);
+        return { items: mockData, total: mockData.length };
+      },
+    },
+  },
+  rowConfig: { keyField: 'id' },
+  toolbarConfig: {},
+  id: 'task-evaluation-report',
+};
+
+// 创建表格实例 - 使用封装的表格组件
+const [EvaluationTable, {}] = useVbenVxeGrid({
+  gridOptions: evaluationGridOptions,
+});
+
+// 图表更新函数
+// 更新雷达图 - 根据当前激活的标签页动态生成雷达图
+const updateRadarChart = () => {
+  // 获取当前标签页的雷达图配置，默认使用default配置
+  const { indicator, radarData } = RADAR_CHART_CONFIG[activeTab.value] || RADAR_CHART_CONFIG.default;
+
+  renderRadarEcharts({
+    radar: {
+      indicator,
+      radius: '70%',
+    },
+    series: [
+      {
+        type: 'radar',
+        data: [
+          {
+            value: radarData,
+            name: '本周',
+            itemStyle: { color: CHART_COLORS.THIS_WEEK },
+            areaStyle: { color: hexToRgba(CHART_COLORS.THIS_WEEK, 0.3) },
+          },
+          {
+            value: radarData.map(v => v - Math.floor(Math.random() * 10) - 3),
+            name: '上周',
+            itemStyle: { color: CHART_COLORS.LAST_WEEK },
+            areaStyle: { color: hexToRgba(CHART_COLORS.LAST_WEEK, 0.3) },
+          },
+          {
+            value: radarData.map(v => v - Math.floor(Math.random() * 15) - 5),
+            name: '上月同期',
+            itemStyle: { color: CHART_COLORS.LAST_MONTH },
+            areaStyle: { color: hexToRgba(CHART_COLORS.LAST_MONTH, 0.3) },
+          },
+        ],
+      },
+    ],
+    tooltip: {
+      trigger: 'item',
+    },
+  });
+};
+// 处理标签页点击事件 - 切换当前激活的标签页
+const handleTabClick = (tab: string) => {
+  activeTab.value = tab.paneName;
+};
+// 更新趋势图 - 根据当前激活的标签页动态生成趋势图
+const updateTrendChart = () => {
+  // 获取当前标签页的趋势图配置，默认使用default配置
+  const { series, legendData } = TREND_CHART_CONFIG[activeTab.value] || TREND_CHART_CONFIG.default;
+
+  renderTrendEcharts({
+    xAxis: {
+      type: 'category',
+      data: ['11/04', '11/11', '11/18', '11/25', '12/02', '12/09'],
+    },
+    yAxis: {
+      type: 'value',
+      name: '得分',
+      max: 100,
+    },
+    series,
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      data: legendData,
+      bottom: 0,
+    },
+  });
+};
+
+// 事件处理函数
+// 查询按钮点击事件 - 处理用户查询请求
+const handleQuery = () => {
+  console.log('查询条件:', {
+    tab: activeTab.value,
+    station: selectedStation.value,
+    periodType: periodType.value,
+    period: currentPeriod.value,
+  });
+  // TODO: 这里可以添加实际的查询逻辑，调用API获取真实数据
+  // refreshGrid(); // 刷新表格数据
+  updateRadarChart(); // 更新雷达图
+  updateTrendChart(); // 更新趋势图
+};
+
+// 指标说明点击事件 - 显示指标说明信息
+const handleIndicatorExplain = () => {
+  console.log('指标说明');
+  // TODO: 这里可以添加指标说明的逻辑，如显示弹窗或跳转到说明页面
+};
+
+// 生命周期钩子和监听
+// 监听时间类型变化 - 更新当前时段显示
+watch(periodType, (newType) => {
+  updateTimeRange(newType);
+});
+
+// 监听标签页变化 - 重新加载数据和图表
+watch(activeTab, () => {
+  // refreshGrid(); // 刷新表格数据
+  updateRadarChart(); // 更新雷达图
+  updateTrendChart(); // 更新趋势图
+});
+
+// 组件初始化 - 设置默认数据和图表
+onMounted(() => {
+  updateTimeRange(periodType.value); // 初始化时间范围
+  updateRadarChart(); // 初始化雷达图
+  updateTrendChart(); // 初始化趋势图
+});
 </script>
+
 <template>
-<Page>
-<div class="wrap">
-         空空如也
-</div>
-</Page>
+  <Page :auto-content-height="true">
+    <div class="task-evaluation-report">
+      <!-- Tab切换区域 - 根据不同标签页展示不同维度的数据 -->
+      <div class="tab-container">
+        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
+          <el-tab-pane v-for="tab in tabOptions" :key="tab.value" :label="tab.label" :name="tab.value">
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+
+      <!-- 搜索栏区域 - 提供油站选择和时间范围筛选功能 -->
+      <div class="search-container">
+        <ElSpace>
+          <div class="search-item">
+            <label>油站：</label>
+            <ElSelect v-model="selectedStation" placeholder="请选择油站" style="width: 150px;">
+              <ElOption v-for="station in stationOptions" :key="station.value" :label="station.label" :value="station.value" />
+            </ElSelect>
+          </div>
+          <div class="search-item">
+            <label>时间：</label>
+            <ElRadioGroup v-model="periodType" size="large">
+              <ElRadioButton label="week" value="week">周</ElRadioButton>
+              <ElRadioButton label="month" value="month">月</ElRadioButton>
+            </ElRadioGroup>
+          </div>
+          <div class="search-item">
+            <label>当前时段：</label>
+            <span>{{ currentPeriod }}</span>
+          </div>
+        </ElSpace>
+      </div>
+
+      <!-- 操作按钮区域 - 提供查询和指标说明功能 -->
+      <div class="button-container">
+        <ElSpace>
+          <ElButton type="primary" @click="handleQuery">查询</ElButton>
+          <ElButton @click="handleIndicatorExplain">指标说明</ElButton>
+        </ElSpace>
+      </div>
+
+      <!-- 任务评估报告区域 - 包含雷达图和详细数据表格 -->
+      <div class="evaluation-container">
+        <h3>任务评估报告</h3>
+        <div class="evaluation-content">
+          <!-- 雷达图区域 - 展示多维度评估指标的综合分析 -->
+          <div class="radar-chart">
+            <EchartsUI ref="radarChartRef" style="width: 100%; height: 400px;" />
+          </div>
+          <!-- 数据表格区域 - 展示各项评估指标的详细数值和对比结果 -->
+          <div class="evaluation-table">
+            <EvaluationTable>
+              <!-- 对比结果插槽 - 根据进步/持平/退步显示不同颜色 -->
+              <template #comparison="{ row }">
+                <span :style="{
+                  color: row.comparison === '进步' ? '#52c41a' : 
+                         row.comparison === '持平' ? '#faad14' : '#f5222d'
+                }">{{ row.comparison }}</span>
+              </template>
+              <!-- 评分标准插槽 - 提供查看详细评分标准的入口 -->
+              <template #standard>
+                <el-button type="text" size="small">查看</el-button>
+              </template>
+            </EvaluationTable>
+          </div>
+        </div>
+      </div>
+
+      <!-- 总体趋势分析区域 - 展示评估指标的历史变化趋势 -->
+      <div class="trend-container">
+        <h3>总体趋势分析</h3>
+        <div class="trend-chart">
+          <EchartsUI ref="trendChartRef" style="width: 100%; height: 400px;" />
+        </div>
+      </div>
+    </div>
+  </Page>
 </template>
-<style lang="scss" scoped>
-.wrap {
-padding: 16px;
-background-color: #fff;
-border-radius: 6px;
+
+<style scoped lang="scss">
+.task-evaluation-report {
+  min-height: 100vh;
+  padding: 16px;
+  background-color: #fff;
+
+  .tab-container {
+    margin-bottom: 16px;
+  }
+
+  .search-container {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    margin-bottom: 16px;
+    background-color: #fff;
+    border-radius: 6px;
+
+    .search-item {
+      display: flex;
+      align-items: center;
+
+      label {
+        margin-right: 8px;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .button-container {
+    margin-bottom: 16px;
+  }
+
+  .evaluation-container {
+    padding: 16px;
+    margin-bottom: 16px;
+    background-color: #fff;
+    border-radius: 6px;
+
+    h3 {
+      margin-bottom: 16px;
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    .evaluation-content {
+      display: flex;
+      gap: 16px;
+
+      .radar-chart {
+        flex: 0.4; /* 雷达图占40%宽度 */
+        min-width: 300px;
+      }
+
+      .evaluation-table {
+        flex: 0.6; /* 列表占60%宽度 */
+        min-width: 400px;
+      }
+    }
+  }
+
+  .trend-container {
+    padding: 16px;
+    background-color: #fff;
+    border-radius: 6px;
+
+    h3 {
+      margin-bottom: 16px;
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    .trend-chart {
+      width: 100%;
+    }
+  }
 }
 </style>

apps/web-ele/src/views/operationRadar/taskReport/gasStationReport/index.vue

@@ -1,17 +1,745 @@
 <script lang="ts" setup>
+// 导入部分
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { ref, watch, onMounted } from 'vue';
 import { Page } from '@vben/common-ui';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ElSelect, ElOption, ElButton, ElSpace, ElRadioGroup, ElRadioButton } from 'element-plus';
+
+// 类型定义
+interface ReportTypeOption {
+  label: string;
+  value: 'evaluation' | 'full-indicator';
+}
+
+interface PeriodTypeOption {
+  label: string;
+  value: 'week' | 'month';
+}
+
+interface StationOption {
+  label: string;
+  value: string;
+}
+
+interface AreaOption {
+  label: string;
+  value: string;
+}
+
+interface TaskReportData {
+  id: number;
+  station: string;
+  manager: string;
+  area: string;
+  totalScore: number;
+  completionRate: {
+    ratio: string;
+    score: number;
+  };
+  taskScore: {
+    score: number;
+    obtainedScore: number;
+  };
+  readRate: {
+    ratio: string;
+    score: number;
+  };
+  maxSameScoreRate: {
+    ratio: string;
+    score: number;
+  };
+  overdueCount: {
+    count: number;
+    score: number;
+  };
+}
+
+// 全指标报表数据类型
+interface FullIndicatorReportData {
+  id: number;
+  station: string;
+  manager: string;
+  area: string;
+  // 任务数量
+  taskQuantity: {
+    totalTasks: number;
+    completedOnTime: number;
+    completedOverdue: number;
+    notCompleted: number;
+    totalCompletionRate: string;
+    overdueRate: string;
+    authorizedRate: string;
+    newTaskRate: string;
+  };
+  // 任务质量
+  taskQuality: {
+    commentCount: number;
+    taskScore: number;
+    ledgerAverage: number;
+  };
+  // 授权
+  authorization: {
+    authorizedCount: number;
+    authorizedRate: string;
+    authorizationComments: number;
+  };
+  // 查阅
+ 查阅: {
+    readableCount: number;
+    readCount: number;
+    readRate: string;
+   查阅Count: number;
+  };
+  // 绩效
+  performance: {
+    maxSameScoreRate: string;
+    performanceCommentRate: string;
+  };
+}
+
+// 响应式数据
+// 报表类型切换
+const reportType = ref<'evaluation' | 'full-indicator'>('evaluation');
+const reportTypeOptions: ReportTypeOption[] = [
+  { label: '任务评估报表', value: 'evaluation' },
+  { label: '任务全指标报表', value: 'full-indicator' },
+];
+
+// 时间类型切换
+const periodType = ref<'week' | 'month'>('week');
+const periodTypeOptions: PeriodTypeOption[] = [
+  { label: '周', value: 'week' },
+  { label: '月', value: 'month' },
+];
+const currentPeriod = ref('11月13日-11月19日');
+
+// 搜索条件
+const selectedStation = ref('');
+const selectedArea = ref('');
+
+// 下拉选项数据
+const stationOptions: StationOption[] = [
+  { label: '机场油站', value: 'station1' },
+  { label: '北京东加油站', value: 'station2' },
+  { label: '北京西加油站', value: 'station3' },
+  { label: '北京南加油站', value: 'station4' },
+  { label: '北京北加油站', value: 'station5' },
+];
+
+const areaOptions: AreaOption[] = [
+  { label: '默认片区', value: 'area1' },
+  { label: '片区1', value: 'area2' },
+  { label: '片区2', value: 'area3' },
+  { label: '片区3', value: 'area4' },
+];
+
+// 辅助函数
+// 格式化日期为中文格式（MM月dd日）
+const formatDate = (date: Date): string => {
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  return `${month}月${day}日`;
+};
+
+// 更新时间范围的函数
+const updateTimeRange = (type: 'week' | 'month'): void => {
+  const today = new Date();
+  let startDate: Date;
+  let endDate = today;
+
+  if (type === 'week') {
+    // 计算最近一周（今天往前推7天）
+    startDate = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
+    currentPeriod.value = `${formatDate(startDate)}-${formatDate(endDate)}`;
+  } else {
+    // 计算最近一个月（上个月的今天到今天）
+    startDate = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
+    currentPeriod.value = `${formatDate(startDate)}-${formatDate(endDate)}`;
+  }
+};
+
+// 重置搜索条件
+const resetSearch = () => {
+  selectedStation.value = '';
+  selectedArea.value = '';
+  periodType.value = 'week';
+  updateTimeRange(periodType.value);
+};
+
+// 虚拟数据
+const MOCK_DATA: TaskReportData[] = [
+  { 
+    id: 1, 
+    station: '北京东加油站', 
+    manager: '李经理', 
+    area: '默认片区', 
+    totalScore: 44, 
+    completionRate: { ratio: '95.52%', score: 24 }, 
+    taskScore: { score: 0, obtainedScore: 0 }, 
+    readRate: { ratio: '0.00%', score: 0 }, 
+    maxSameScoreRate: { ratio: '56.11%', score: 8 }, 
+    overdueCount: { count: 3, score: 12 }
+  },
+  { 
+    id: 2, 
+    station: '北京西加油站', 
+    manager: '王经理', 
+    area: '默认片区', 
+    totalScore: 8, 
+    completionRate: { ratio: '77.14%', score: 0 }, 
+    taskScore: { score: 0, obtainedScore: 0 }, 
+    readRate: { ratio: '0.00%', score: 0 }, 
+    maxSameScoreRate: { ratio: '25%', score: 8 }, 
+    overdueCount: { count: 16, score: 0 }
+  },
+  { 
+    id: 3, 
+    station: '机场油站', 
+    manager: '张经理', 
+    area: '片区1', 
+    totalScore: 50, 
+    completionRate: { ratio: '100%', score: 25 }, 
+    taskScore: { score: 0, obtainedScore: 0 }, 
+    readRate: { ratio: '50.00%', score: 0 }, 
+    maxSameScoreRate: { ratio: '33.33%', score: 10 }, 
+    overdueCount: { count: 0, score: 15 }
+  },
+  { 
+    id: 4, 
+    station: '北京南加油站', 
+    manager: '刘经理', 
+    area: '片区2', 
+    totalScore: 38, 
+    completionRate: { ratio: '90.00%', score: 22 }, 
+    taskScore: { score: 0, obtainedScore: 0 }, 
+    readRate: { ratio: '33.33%', score: 0 }, 
+    maxSameScoreRate: { ratio: '66.67%', score: 6 }, 
+    overdueCount: { count: 2, score: 10 }
+  },
+  { 
+    id: 5, 
+    station: '北京北加油站', 
+    manager: '陈经理', 
+    area: '片区3', 
+    totalScore: 42, 
+    completionRate: { ratio: '93.33%', score: 23 }, 
+    taskScore: { score: 0, obtainedScore: 0 }, 
+    readRate: { ratio: '25.00%', score: 0 }, 
+    maxSameScoreRate: { ratio: '40.00%', score: 8 }, 
+    overdueCount: { count: 1, score: 11 }
+  },
+];
+
+// 任务全指标报表虚拟数据
+const FULL_INDICATOR_MOCK_DATA: FullIndicatorReportData[] = [
+  {
+    id: 1,
+    station: '未来路加油',
+    manager: '李玫琳',
+    area: '默认片区',
+    taskQuantity: {
+      totalTasks: 52,
+      completedOnTime: 48,
+      completedOverdue: 3,
+      notCompleted: 1,
+      totalCompletionRate: '98.08%',
+      overdueRate: '5.77%',
+      authorizedRate: '2.5%',
+      newTaskRate: '1.92%'
+    },
+    taskQuality: {
+      commentCount: 12,
+      taskScore: 4.5,
+      ledgerAverage: 85.5
+    },
+    authorization: {
+      authorizedCount: 1,
+      authorizedRate: '1.92%',
+      authorizationComments: 0
+    },
+    查阅: {
+      readableCount: 51,
+      readCount: 0,
+      readRate: '0.00%',
+      查阅Count: 2
+    },
+    performance: {
+      maxSameScoreRate: '25%',
+      performanceCommentRate: '16.67%'
+    }
+  },
+  {
+    id: 2,
+    station: '龙飞虎加',
+    manager: '安宁',
+    area: '默认片区',
+    taskQuantity: {
+      totalTasks: 67,
+      completedOnTime: 58,
+      completedOverdue: 8,
+      notCompleted: 1,
+      totalCompletionRate: '98.51%',
+      overdueRate: '11.94%',
+      authorizedRate: '33.33%',
+      newTaskRate: '1.49%'
+    },
+    taskQuality: {
+      commentCount: 8,
+      taskScore: 4.2,
+      ledgerAverage: 88.2
+    },
+    authorization: {
+      authorizedCount: 11,
+      authorizedRate: '16.42%',
+      authorizationComments: 3
+    },
+    查阅: {
+      readableCount: 80,
+      readCount: 0,
+      readRate: '0.00%',
+      查阅Count: 1
+    },
+    performance: {
+      maxSameScoreRate: '36.11%',
+      performanceCommentRate: '8.33%'
+    }
+  },
+  {
+    id: 3,
+    station: '法站',
+    manager: '张磊',
+    area: '默认片区',
+    taskQuantity: {
+      totalTasks: 125,
+      completedOnTime: 112,
+      completedOverdue: 12,
+      notCompleted: 1,
+      totalCompletionRate: '99.20%',
+      overdueRate: '9.60%',
+      authorizedRate: '16.44%',
+      newTaskRate: '0.80%'
+    },
+    taskQuality: {
+      commentCount: 15,
+      taskScore: 4.7,
+      ledgerAverage: 90.5
+    },
+    authorization: {
+      authorizedCount: 12,
+      authorizedRate: '9.60%',
+      authorizationComments: 5
+    },
+    查阅: {
+      readableCount: 131,
+      readCount: 0,
+      readRate: '0.00%',
+      查阅Count: 3
+    },
+    performance: {
+      maxSameScoreRate: '31.67%',
+      performanceCommentRate: '11.67%'
+    }
+  },
+  {
+    id: 4,
+    station: '机场油站',
+    manager: '王经理',
+    area: '片区1',
+    taskQuantity: {
+      totalTasks: 89,
+      completedOnTime: 78,
+      completedOverdue: 10,
+      notCompleted: 1,
+      totalCompletionRate: '98.88%',
+      overdueRate: '11.24%',
+      authorizedRate: '22.47%',
+      newTaskRate: '1.12%'
+    },
+    taskQuality: {
+      commentCount: 20,
+      taskScore: 4.3,
+      ledgerAverage: 87.8
+    },
+    authorization: {
+      authorizedCount: 10,
+      authorizedRate: '11.24%',
+      authorizationComments: 4
+    },
+    查阅: {
+      readableCount: 95,
+      readCount: 5,
+      readRate: '5.26%',
+      查阅Count: 2
+    },
+    performance: {
+      maxSameScoreRate: '38.33%',
+      performanceCommentRate: '13.33%'
+    }
+  },
+  {
+    id: 5,
+    station: '北京南加油',
+    manager: '刘经理',
+    area: '片区2',
+    taskQuantity: {
+      totalTasks: 45,
+      completedOnTime: 39,
+      completedOverdue: 5,
+      notCompleted: 1,
+      totalCompletionRate: '97.78%',
+      overdueRate: '11.11%',
+      authorizedRate: '15.56%',
+      newTaskRate: '2.22%'
+    },
+    taskQuality: {
+      commentCount: 7,
+      taskScore: 4.1,
+      ledgerAverage: 84.2
+    },
+    authorization: {
+      authorizedCount: 6,
+      authorizedRate: '13.33%',
+      authorizationComments: 2
+    },
+    查阅: {
+      readableCount: 48,
+      readCount: 3,
+      readRate: '6.25%',
+      查阅Count: 1
+    },
+    performance: {
+      maxSameScoreRate: '28.33%',
+      performanceCommentRate: '10.00%'
+    }
+  }
+];
+
+// 任务评估报表表格配置
+const taskReportColumns: VxeGridProps['columns'] = [
+  { title: '油站', field: 'station', minWidth: 150, align: 'center' },
+  { title: '油站经理', field: 'manager', minWidth: 120, align: 'center' },
+  { title: '片区', field: 'area', minWidth: 120, align: 'center' },
+  { title: '总分', field: 'totalScore', minWidth: 80, align: 'center' },
+  { 
+    title: '完成率', 
+    minWidth: 150, 
+    align: 'center', 
+    children: [
+      { title: '比例', field: 'completionRate.ratio', minWidth: 80, align: 'center' },
+      { title: '得分', field: 'completionRate.score', minWidth: 70, align: 'center' },
+    ]
+  },
+  { 
+    title: '任务得分', 
+    minWidth: 150, 
+    align: 'center', 
+    children: [
+      { title: '分数', field: 'taskScore.score', minWidth: 80, align: 'center' },
+      { title: '得分', field: 'taskScore.obtainedScore', minWidth: 70, align: 'center' },
+    ]
+  },
+  { 
+    title: '已阅比例', 
+    minWidth: 150, 
+    align: 'center', 
+    children: [
+      { title: '比例', field: 'readRate.ratio', minWidth: 80, align: 'center' },
+      { title: '得分', field: 'readRate.score', minWidth: 70, align: 'center' },
+    ]
+  },
+  { 
+    title: '最多相同分数率', 
+    minWidth: 180, 
+    align: 'center', 
+    children: [
+      { title: '比例', field: 'maxSameScoreRate.ratio', minWidth: 100, align: 'center' },
+      { title: '得分', field: 'maxSameScoreRate.score', minWidth: 80, align: 'center' },
+    ]
+  },
+  { 
+    title: '逾期未完成数', 
+    minWidth: 180, 
+    align: 'center', 
+    children: [
+      { title: '过期数量', field: 'overdueCount.count', minWidth: 100, align: 'center' },
+      { title: '过期分数', field: 'overdueCount.score', minWidth: 80, align: 'center' },
+    ]
+  },
+];
+
+const taskReportGridOptions: VxeGridProps = {
+  columns: taskReportColumns,
+  size: 'medium',
+  height: '500px',
+  useSearchForm: false,
+  proxyConfig: {
+    enabled: true,
+    autoLoad: true,
+    ajax: {
+      query: async () => {
+        return { items: MOCK_DATA, total: MOCK_DATA.length };
+      },
+    },
+  },
+  rowConfig: { keyField: 'id' },
+  toolbarConfig: {},
+  id: 'task-report-table',
+};
+
+// 任务全指标报表表格配置
+const fullIndicatorReportColumns: VxeGridProps['columns'] = [
+  { title: '油站', field: 'station', minWidth: 150, align: 'center', fixed: 'left' },
+  { title: '油站经理', field: 'manager', minWidth: 120, align: 'center', fixed: 'left' },
+  { title: '片区', field: 'area', minWidth: 120, align: 'center', fixed: 'left' },
+  { 
+    title: '任务数量', 
+    minWidth: 400, 
+    align: 'center', 
+    children: [
+      { title: '任务数', field: 'taskQuantity.totalTasks', minWidth: 80, align: 'center' },
+      { title: '按时完成', field: 'taskQuantity.completedOnTime', minWidth: 80, align: 'center' },
+      { title: '逾期完成', field: 'taskQuantity.completedOverdue', minWidth: 80, align: 'center' },
+      { title: '过期未完成', field: 'taskQuantity.notCompleted', minWidth: 90, align: 'center' },
+      { title: '总完成率', field: 'taskQuantity.totalCompletionRate', minWidth: 80, align: 'center' },
+      { title: '逾期率', field: 'taskQuantity.overdueRate', minWidth: 80, align: 'center' },
+      { title: '被授权率', field: 'taskQuantity.authorizedRate', minWidth: 80, align: 'center' },
+      { title: '新增任务率', field: 'taskQuantity.newTaskRate', minWidth: 80, align: 'center' },
+    ]
+  },
+  { 
+    title: '任务质量', 
+    minWidth: 250, 
+    align: 'center', 
+    children: [
+      { title: '收到的点评数', field: 'taskQuality.commentCount', minWidth: 100, align: 'center' },
+      { title: '任务得分', field: 'taskQuality.taskScore', minWidth: 80, align: 'center' },
+      { title: '台账平均数', field: 'taskQuality.ledgerAverage', minWidth: 80, align: 'center' },
+    ]
+  },
+  { 
+    title: '授权', 
+    minWidth: 250, 
+    align: 'center', 
+    children: [
+      { title: '已授权', field: 'authorization.authorizedCount', minWidth: 80, align: 'center' },
+      { title: '已授权率', field: 'authorization.authorizedRate', minWidth: 80, align: 'center' },
+      { title: '授权点评', field: 'authorization.authorizationComments', minWidth: 80, align: 'center' },
+    ]
+  },
+  { 
+    title: '查阅', 
+    minWidth: 300, 
+    align: 'center', 
+    children: [
+      { title: '可阅读', field: '查阅.readableCount', minWidth: 80, align: 'center' },
+      { title: '已阅读', field: '查阅.readCount', minWidth: 80, align: 'center' },
+      { title: '已阅读率', field: '查阅.readRate', minWidth: 80, align: 'center' },
+      { title: '被查阅数', field: '查阅.查阅Count', minWidth: 80, align: 'center' },
+    ]
+  },
+  { 
+    title: '绩效', 
+    minWidth: 250, 
+    align: 'center', 
+    children: [
+      { title: '最多相同分数率', field: 'performance.maxSameScoreRate', minWidth: 100, align: 'center' },
+      { title: '绩效评语率', field: 'performance.performanceCommentRate', minWidth: 100, align: 'center' },
+    ]
+  },
+];
+
+const fullIndicatorReportGridOptions: VxeGridProps = {
+  columns: fullIndicatorReportColumns,
+  size: 'medium',
+  height: '500px',
+  useSearchForm: false,
+  proxyConfig: {
+    enabled: true,
+    autoLoad: true,
+    ajax: {
+      query: async () => {
+        return { items: FULL_INDICATOR_MOCK_DATA, total: FULL_INDICATOR_MOCK_DATA.length };
+      },
+    },
+  },
+  rowConfig: { keyField: 'id' },
+  toolbarConfig: {},
+  id: 'full-indicator-report-table',
+  scrollX: true,
+  scrollY: true,
+};
+
+// 创建表格实例
+const [TaskReportTable] = useVbenVxeGrid({ gridOptions: taskReportGridOptions });
+const [FullIndicatorReportTable] = useVbenVxeGrid({ gridOptions: fullIndicatorReportGridOptions });
+
+// 事件处理函数
+// 查询按钮点击事件
+const handleQuery = () => {
+  console.log('查询条件:', {
+    reportType: reportType.value,
+    station: selectedStation.value,
+    area: selectedArea.value,
+    periodType: periodType.value,
+    period: currentPeriod.value,
+  });
+  // TODO: 这里可以添加实际的查询逻辑，调用API获取真实数据
+};
+
+// 重置按钮点击事件
+const handleReset = () => {
+  resetSearch();
+  console.log('重置搜索条件');
+};
+
+// 导出按钮点击事件
+const handleExport = () => {
+  console.log('导出数据');
+  // TODO: 这里可以添加导出逻辑
+};
+
+// 生命周期钩子和监听
+// 监听时间类型变化 - 更新当前时段显示
+watch(periodType, (newType) => {
+  updateTimeRange(newType);
+});
+
+// 组件初始化 - 设置默认时间范围
+onMounted(() => {
+  updateTimeRange(periodType.value);
+});
 </script>
+
 <template>
-<Page>
-<div class="wrap">
-         空空如也
-</div>
-</Page>
+  <Page :auto-content-height="true">
+    <div class="task-report-container">
+      <!-- 报表类型切换 -->
+      <div class="report-type-container">
+        <ElRadioGroup v-model="reportType" size="large">
+          <ElRadioButton 
+            v-for="option in reportTypeOptions" 
+            :key="option.value" 
+            :label="option.value"
+          >
+            {{ option.label }}
+          </ElRadioButton>
+        </ElRadioGroup>
+      </div>
+
+      <!-- 搜索区域 -->
+      <div class="search-container">
+        <ElSpace>
+          <div class="search-item">
+            <label>油站：</label>
+            <ElSelect v-model="selectedStation" placeholder="请选择油站" style="width: 180px;">
+              <ElOption 
+                v-for="option in stationOptions" 
+                :key="option.value" 
+                :label="option.label" 
+                :value="option.value" 
+              />
+            </ElSelect>
+          </div>
+          <div class="search-item">
+            <label>片区：</label>
+            <ElSelect v-model="selectedArea" placeholder="请选择片区" style="width: 180px;">
+              <ElOption 
+                v-for="option in areaOptions" 
+                :key="option.value" 
+                :label="option.label" 
+                :value="option.value" 
+              />
+            </ElSelect>
+          </div>
+          <div class="search-item">
+            <ElRadioGroup v-model="periodType" size="large">
+              <ElRadioButton 
+                v-for="option in periodTypeOptions" 
+                :key="option.value" 
+                :label="option.value"
+              >
+                {{ option.label }}
+              </ElRadioButton>
+            </ElRadioGroup>
+          </div>
+          <div class="search-item">
+            <span>{{ currentPeriod }}</span>
+          </div>
+        </ElSpace>
+      </div>
+
+      <!-- 操作按钮区域 -->
+      <div class="button-container">
+        <ElSpace>
+          <ElButton type="primary" @click="handleQuery">查询</ElButton>
+          <ElButton @click="handleReset">重置</ElButton>
+          <ElButton @click="handleExport">导出</ElButton>
+        </ElSpace>
+      </div>
+
+      <!-- 报表提示语 -->
+      <div class="notice-container">
+        <p>数据周期：次周周三早9点自动生成，按周切片，次周日早9点自动生成。</p>
+      </div>
+
+      <!-- 报表数据表格 -->
+      <div class="table-container">
+        <TaskReportTable v-if="reportType === 'evaluation'" />
+        <FullIndicatorReportTable v-else />
+      </div>
+    </div>
+  </Page>
 </template>
-<style lang="scss" scoped>
-.wrap {
-padding: 16px;
-background-color: #fff;
-border-radius: 6px;
+
+<style scoped lang="scss">
+.task-report-container {
+  min-height: calc(100vh - 120px);
+  padding: 16px;
+  background-color: #fff;
+
+  .report-type-container {
+    margin-bottom: 16px;
+  }
+
+  .search-container {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    margin-bottom: 16px;
+    border-radius: 6px;
+
+    .search-item {
+      display: flex;
+      align-items: center;
+
+      label {
+        margin-right: 8px;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .button-container {
+    margin-bottom: 16px;
+  }
+
+  .notice-container {
+    padding: 12px 16px;
+    margin-bottom: 16px;
+    font-size: 14px;
+    color: #606266;
+    background-color: #f0f5ff;
+    border-left: 4px solid #409eff;
+    border-radius: 4px;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  .table-container {
+    width: 100%;
+  }
 }
 </style>