|
|
@@ -0,0 +1,2215 @@
|
|
|
+<template>
|
|
|
+ <div class="task-stats-container stats-page">
|
|
|
+ <!-- 顶部筛选条 -->
|
|
|
+ <div class="filter-section stats-card" style="margin-bottom: 16px;">
|
|
|
+ <!-- 快捷时间选择 -->
|
|
|
+ <div class="time-shortcuts">
|
|
|
+ <span class="shortcuts-label">快速选择：</span>
|
|
|
+ <div class="shortcut-pills">
|
|
|
+ <button
|
|
|
+ v-for="shortcut in timeShortcuts"
|
|
|
+ :key="shortcut.value"
|
|
|
+ :class="['shortcut-pill', { active: currentShortcut === shortcut.value }]"
|
|
|
+ @click="handleShortcutClick(shortcut)"
|
|
|
+ >
|
|
|
+ {{ shortcut.label }}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="filter-divider"></div>
|
|
|
+
|
|
|
+ <el-form
|
|
|
+ :model="filters"
|
|
|
+ ref="filterForm"
|
|
|
+ :inline="true"
|
|
|
+ size="small"
|
|
|
+ label-width="80px"
|
|
|
+ class="filter-form"
|
|
|
+ >
|
|
|
+ <el-form-item label="时间范围" prop="dateRange">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="filters.dateRange"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ style="width: 300px"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ @change="handleDateRangeChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="农场" prop="farms">
|
|
|
+ <el-select
|
|
|
+ v-model="filters.farms"
|
|
|
+ placeholder="请选择农场"
|
|
|
+ multiple
|
|
|
+ collapse-tags
|
|
|
+ style="width: 180px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in farmOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="地块" prop="plots">
|
|
|
+ <el-select
|
|
|
+ v-model="filters.plots"
|
|
|
+ placeholder="请选择地块"
|
|
|
+ multiple
|
|
|
+ collapse-tags
|
|
|
+ style="width: 180px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in plotOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="作物" prop="crops">
|
|
|
+ <el-select
|
|
|
+ v-model="filters.crops"
|
|
|
+ placeholder="请选择作物"
|
|
|
+ multiple
|
|
|
+ collapse-tags
|
|
|
+ style="width: 180px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in cropOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="任务类型" prop="taskTypes">
|
|
|
+ <el-select
|
|
|
+ v-model="filters.taskTypes"
|
|
|
+ placeholder="请选择任务类型"
|
|
|
+ multiple
|
|
|
+ collapse-tags
|
|
|
+ style="width: 180px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in taskTypeOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="执行人" prop="executors">
|
|
|
+ <el-select
|
|
|
+ v-model="filters.executors"
|
|
|
+ placeholder="请选择执行人"
|
|
|
+ multiple
|
|
|
+ collapse-tags
|
|
|
+ style="width: 180px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in executorOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="状态" prop="statuses">
|
|
|
+ <el-select
|
|
|
+ v-model="filters.statuses"
|
|
|
+ placeholder="请选择状态"
|
|
|
+ multiple
|
|
|
+ collapse-tags
|
|
|
+ style="width: 180px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in statusOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <div class="action-buttons">
|
|
|
+ <el-button type="primary" icon="el-icon-search" @click="handleQuery" class="btn-primary">
|
|
|
+ 查询
|
|
|
+ </el-button>
|
|
|
+ <el-button icon="el-icon-refresh" @click="handleReset" class="btn-secondary">
|
|
|
+ 重置
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- KPI 卡片区域 -->
|
|
|
+ <div class="kpi-section stats-card">
|
|
|
+ <div class="kpi-grid">
|
|
|
+ <div
|
|
|
+ v-for="(kpi, index) in kpiData"
|
|
|
+ :key="index"
|
|
|
+ class="kpi-card"
|
|
|
+ @click="handleKpiClick(kpi.key)"
|
|
|
+ >
|
|
|
+ <div class="kpi-card__icon" :style="{ backgroundColor: kpi.iconBg }">
|
|
|
+ <i :class="kpi.icon" :style="{ color: kpi.color }"></i>
|
|
|
+ </div>
|
|
|
+ <div class="kpi-card__content">
|
|
|
+ <div class="kpi-card__meta">{{ kpi.title }}</div>
|
|
|
+ <div class="kpi-card__value">
|
|
|
+ <span class="kpi-number">
|
|
|
+ <count-to
|
|
|
+ :start-val="0"
|
|
|
+ :end-val="kpi.value"
|
|
|
+ :duration="1500"
|
|
|
+ :decimals="kpi.type === 'percent' || kpi.type === 'duration' ? 1 : 0"
|
|
|
+ :suffix="kpi.type === 'percent' ? '%' : ''"
|
|
|
+ class="animated-number"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ <span v-if="kpi.unit" class="kpi-unit">{{ kpi.unit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dropdown trigger="click" @command="handleKpiAction" class="kpi-card__menu">
|
|
|
+ <span class="kpi-menu-trigger">
|
|
|
+ <i class="el-icon-more"></i>
|
|
|
+ </span>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item :command="{ action: 'export', key: kpi.key }">
|
|
|
+ <i class="el-icon-download"></i> 导出数据
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item :command="{ action: 'detail', key: kpi.key }">
|
|
|
+ <i class="el-icon-view"></i> 查看明细
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 主内容区域 -->
|
|
|
+ <el-row :gutter="16" class="main-content">
|
|
|
+ <!-- 左侧主栏 -->
|
|
|
+ <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="19">
|
|
|
+ <!-- 趋势图 -->
|
|
|
+ <div class="chart-section stats-card" style="margin-bottom: 16px;">
|
|
|
+ <div class="chart-header">
|
|
|
+ <h3 class="chart-title">任务趋势</h3>
|
|
|
+ <div class="chart-controls">
|
|
|
+ <div class="metric-segment">
|
|
|
+ <button
|
|
|
+ v-for="metric in trendMetrics"
|
|
|
+ :key="metric.value"
|
|
|
+ :class="['segment-btn', { active: trendMetric === metric.value }]"
|
|
|
+ @click="handleTrendMetricChange(metric.value)"
|
|
|
+ >
|
|
|
+ {{ metric.label }}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="chart-tools">
|
|
|
+ <el-tooltip content="下载图片" placement="top">
|
|
|
+ <el-button size="mini" circle icon="el-icon-download" @click="downloadChart('trend')" />
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="全屏显示" placement="top">
|
|
|
+ <el-button size="mini" circle icon="el-icon-full-screen" @click="fullscreenChart('trend')" />
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ ref="trendChart"
|
|
|
+ v-loading="trendLoading"
|
|
|
+ class="chart-container"
|
|
|
+ style="height: 380px"
|
|
|
+ >
|
|
|
+ <div v-if="!trendLoading && trendEmpty" class="chart-empty">
|
|
|
+ <i class="el-icon-s-data chart-empty-icon"></i>
|
|
|
+ <p class="chart-empty-text">暂无数据</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 维度对比图 -->
|
|
|
+ <div class="chart-section stats-card" style="margin-top: 16px">
|
|
|
+ <div class="chart-header">
|
|
|
+ <h3 class="chart-title">维度对比</h3>
|
|
|
+ <div class="chart-controls">
|
|
|
+ <div class="dimension-controls">
|
|
|
+ <div class="control-group">
|
|
|
+ <span class="control-label">维度：</span>
|
|
|
+ <div class="metric-segment">
|
|
|
+ <button
|
|
|
+ v-for="dimension in dimensionTypes"
|
|
|
+ :key="dimension.value"
|
|
|
+ :class="['segment-btn', { active: dimensionType === dimension.value }]"
|
|
|
+ @click="handleDimensionTypeChange(dimension.value)"
|
|
|
+ >
|
|
|
+ {{ dimension.label }}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group">
|
|
|
+ <span class="control-label">指标：</span>
|
|
|
+ <div class="metric-segment">
|
|
|
+ <button
|
|
|
+ v-for="metric in dimensionMetrics"
|
|
|
+ :key="metric.value"
|
|
|
+ :class="['segment-btn', { active: dimensionMetric === metric.value }]"
|
|
|
+ @click="handleDimensionMetricChange(metric.value)"
|
|
|
+ >
|
|
|
+ {{ metric.label }}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chart-tools">
|
|
|
+ <el-tooltip content="下载图片" placement="top">
|
|
|
+ <el-button size="mini" circle icon="el-icon-download" @click="downloadChart('dimension')" />
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="全屏显示" placement="top">
|
|
|
+ <el-button size="mini" circle icon="el-icon-full-screen" @click="fullscreenChart('dimension')" />
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ ref="dimensionChart"
|
|
|
+ v-loading="dimensionLoading"
|
|
|
+ class="chart-container"
|
|
|
+ style="height: 380px"
|
|
|
+ >
|
|
|
+ <div v-if="!dimensionLoading && dimensionEmpty" class="chart-empty">
|
|
|
+ <i class="el-icon-s-data chart-empty-icon"></i>
|
|
|
+ <p class="chart-empty-text">暂无数据</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <!-- 右侧固钉侧栏 -->
|
|
|
+ <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="5">
|
|
|
+ <div class="sidebar-sticky">
|
|
|
+ <!-- 今日到期 -->
|
|
|
+ <div class="todo-section stats-card">
|
|
|
+ <div class="todo-header" @click="toggleTodoSection('today')">
|
|
|
+ <div class="todo-title-wrapper">
|
|
|
+ <h4>今日到期</h4>
|
|
|
+ <el-badge :value="todoData.today.length" class="todo-badge" />
|
|
|
+ </div>
|
|
|
+ <i :class="['el-icon-arrow-down', 'toggle-icon', { collapsed: collapsedSections.today }]"></i>
|
|
|
+ </div>
|
|
|
+ <el-collapse-transition>
|
|
|
+ <div v-show="!collapsedSections.today" class="todo-list">
|
|
|
+ <div class="timeline-container">
|
|
|
+ <div
|
|
|
+ v-for="task in todoData.today"
|
|
|
+ :key="task.id"
|
|
|
+ class="todo-item today"
|
|
|
+ @click="handleTodoClick(task)"
|
|
|
+ @mouseenter="showTodoAction(task.id)"
|
|
|
+ @mouseleave="hideTodoAction"
|
|
|
+ >
|
|
|
+ <div class="timeline-dot today-dot"></div>
|
|
|
+ <div class="todo-content">
|
|
|
+ <div class="task-name">{{ task.taskName }}</div>
|
|
|
+ <div class="task-meta">
|
|
|
+ <span>{{ task.plotName }}</span> |
|
|
|
+ <span>{{ task.executor }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="task-time">{{ task.deadline }}</div>
|
|
|
+ </div>
|
|
|
+ <div v-show="hoveredTaskId === task.id" class="todo-action">
|
|
|
+ <el-button size="mini" type="text" class="action-btn">查看</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-transition>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 未来3天到期 -->
|
|
|
+ <div class="todo-section stats-card" style="margin-top: 16px">
|
|
|
+ <div class="todo-header" @click="toggleTodoSection('next3Days')">
|
|
|
+ <div class="todo-title-wrapper">
|
|
|
+ <h4>未来3天到期</h4>
|
|
|
+ <el-badge :value="todoData.next3Days.length" class="todo-badge" />
|
|
|
+ </div>
|
|
|
+ <i :class="['el-icon-arrow-down', 'toggle-icon', { collapsed: collapsedSections.next3Days }]"></i>
|
|
|
+ </div>
|
|
|
+ <el-collapse-transition>
|
|
|
+ <div v-show="!collapsedSections.next3Days" class="todo-list">
|
|
|
+ <div class="timeline-container">
|
|
|
+ <div
|
|
|
+ v-for="task in todoData.next3Days"
|
|
|
+ :key="task.id"
|
|
|
+ class="todo-item next"
|
|
|
+ @click="handleTodoClick(task)"
|
|
|
+ @mouseenter="showTodoAction(task.id)"
|
|
|
+ @mouseleave="hideTodoAction"
|
|
|
+ >
|
|
|
+ <div class="timeline-dot next-dot"></div>
|
|
|
+ <div class="todo-content">
|
|
|
+ <div class="task-name">{{ task.taskName }}</div>
|
|
|
+ <div class="task-meta">
|
|
|
+ <span>{{ task.plotName }}</span> |
|
|
|
+ <span>{{ task.executor }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="task-time">{{ task.deadline }}</div>
|
|
|
+ </div>
|
|
|
+ <div v-show="hoveredTaskId === task.id" class="todo-action">
|
|
|
+ <el-button size="mini" type="text" class="action-btn">查看</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-transition>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 已逾期 -->
|
|
|
+ <div class="todo-section stats-card" style="margin-top: 16px">
|
|
|
+ <div class="todo-header" @click="toggleTodoSection('overdue')">
|
|
|
+ <div class="todo-title-wrapper">
|
|
|
+ <h4>已逾期</h4>
|
|
|
+ <el-badge :value="todoData.overdue.length" class="todo-badge danger" />
|
|
|
+ </div>
|
|
|
+ <i :class="['el-icon-arrow-down', 'toggle-icon', { collapsed: collapsedSections.overdue }]"></i>
|
|
|
+ </div>
|
|
|
+ <el-collapse-transition>
|
|
|
+ <div v-show="!collapsedSections.overdue" class="todo-list">
|
|
|
+ <div class="timeline-container">
|
|
|
+ <div
|
|
|
+ v-for="task in todoData.overdue"
|
|
|
+ :key="task.id"
|
|
|
+ class="todo-item overdue"
|
|
|
+ @click="handleTodoClick(task)"
|
|
|
+ @mouseenter="showTodoAction(task.id)"
|
|
|
+ @mouseleave="hideTodoAction"
|
|
|
+ >
|
|
|
+ <div class="timeline-dot overdue-dot"></div>
|
|
|
+ <div class="todo-content">
|
|
|
+ <div class="task-name">{{ task.taskName }}</div>
|
|
|
+ <div class="task-meta">
|
|
|
+ <span>{{ task.plotName }}</span> |
|
|
|
+ <span>{{ task.executor }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="task-time danger">{{ task.deadline }}</div>
|
|
|
+ </div>
|
|
|
+ <div v-show="hoveredTaskId === task.id" class="todo-action">
|
|
|
+ <el-button size="mini" type="text" class="action-btn">查看</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-transition>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 任务明细抽屉 -->
|
|
|
+ <el-drawer
|
|
|
+ :title="drawerTitle"
|
|
|
+ :visible.sync="drawerVisible"
|
|
|
+ direction="rtl"
|
|
|
+ size="70%"
|
|
|
+ :before-close="handleDrawerClose"
|
|
|
+ >
|
|
|
+ <div class="drawer-content">
|
|
|
+ <el-table
|
|
|
+ v-loading="drawerLoading"
|
|
|
+ :data="drawerData"
|
|
|
+ border
|
|
|
+ style="width: 100%; margin-bottom: 20px"
|
|
|
+ >
|
|
|
+ <el-table-column label="任务名称" prop="taskName" min-width="180" />
|
|
|
+ <el-table-column label="类型" prop="taskType" width="90">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag size="mini" :type="getTaskTypeTagType(scope.row.taskType)">
|
|
|
+ {{ getTaskTypeName(scope.row.taskType) }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="作物" prop="cropName" width="90" />
|
|
|
+ <el-table-column label="地块" prop="plotName" min-width="140" />
|
|
|
+ <el-table-column label="执行人" prop="executor" width="90" />
|
|
|
+ <el-table-column label="计划开始" prop="startTime" width="140" />
|
|
|
+ <el-table-column label="计划结束" prop="endTime" width="140" />
|
|
|
+ <el-table-column label="状态" prop="status" width="110">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag size="mini" :type="getStatusTagType(scope.row.status)">
|
|
|
+ {{ getStatusName(scope.row.status) }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <el-pagination
|
|
|
+ :current-page="drawerPagination.page"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ :page-size="drawerPagination.size"
|
|
|
+ :total="drawerPagination.total"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ @size-change="handleDrawerSizeChange"
|
|
|
+ @current-change="handleDrawerCurrentChange"
|
|
|
+ />
|
|
|
+
|
|
|
+ <div class="drawer-actions" style="margin-top: 20px">
|
|
|
+ <el-button type="primary" @click="handleExportCsv">
|
|
|
+ <i class="el-icon-download"></i>
|
|
|
+ 导出CSV
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import * as echarts from 'echarts'
|
|
|
+import seedrandom from 'seedrandom'
|
|
|
+import CountTo from 'vue-count-to'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'TaskStats',
|
|
|
+ components: {
|
|
|
+ CountTo
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 快捷时间选择
|
|
|
+ timeShortcuts: [
|
|
|
+ { label: '近7天', value: 7 },
|
|
|
+ { label: '近30天', value: 30 },
|
|
|
+ { label: '近90天', value: 90 }
|
|
|
+ ],
|
|
|
+ currentShortcut: 30,
|
|
|
+
|
|
|
+ // 趋势图指标选项
|
|
|
+ trendMetrics: [
|
|
|
+ { label: '创建数', value: 'created' },
|
|
|
+ { label: '完成数', value: 'completed' },
|
|
|
+ { label: '完成率', value: 'completion_rate' }
|
|
|
+ ],
|
|
|
+
|
|
|
+ // 维度对比选项
|
|
|
+ dimensionTypes: [
|
|
|
+ { label: '地块', value: 'plot' },
|
|
|
+ { label: '作物', value: 'crop' },
|
|
|
+ { label: '任务类型', value: 'taskType' }
|
|
|
+ ],
|
|
|
+ dimensionMetrics: [
|
|
|
+ { label: '完成率', value: 'completion_rate' },
|
|
|
+ { label: '准时率', value: 'ontime_rate' }
|
|
|
+ ],
|
|
|
+
|
|
|
+ // 侧栏折叠状态
|
|
|
+ collapsedSections: {
|
|
|
+ today: false,
|
|
|
+ next3Days: false,
|
|
|
+ overdue: false
|
|
|
+ },
|
|
|
+ hoveredTaskId: null,
|
|
|
+
|
|
|
+ // 图表空状态
|
|
|
+ trendEmpty: false,
|
|
|
+ dimensionEmpty: false,
|
|
|
+
|
|
|
+ // 筛选参数
|
|
|
+ filters: {
|
|
|
+ dateRange: [],
|
|
|
+ farms: [],
|
|
|
+ plots: [],
|
|
|
+ crops: [],
|
|
|
+ taskTypes: [],
|
|
|
+ executors: [],
|
|
|
+ statuses: []
|
|
|
+ },
|
|
|
+
|
|
|
+ // 下拉选项
|
|
|
+ farmOptions: [],
|
|
|
+ plotOptions: [],
|
|
|
+ cropOptions: [],
|
|
|
+ taskTypeOptions: [
|
|
|
+ { label: '施肥', value: 'fertilize' },
|
|
|
+ { label: '灌溉', value: 'irrigate' },
|
|
|
+ { label: '打药', value: 'spray' },
|
|
|
+ { label: '采摘', value: 'harvest' },
|
|
|
+ { label: '巡检', value: 'inspect' },
|
|
|
+ { label: '除草', value: 'weed' },
|
|
|
+ { label: '其他', value: 'other' }
|
|
|
+ ],
|
|
|
+ executorOptions: [],
|
|
|
+ statusOptions: [
|
|
|
+ { label: '未开始', value: 'not_started' },
|
|
|
+ { label: '进行中', value: 'in_progress' },
|
|
|
+ { label: '已完成', value: 'completed' },
|
|
|
+ { label: '已逾期', value: 'overdue' },
|
|
|
+ { label: '已取消', value: 'cancelled' }
|
|
|
+ ],
|
|
|
+
|
|
|
+ // 日期选择器配置
|
|
|
+ pickerOptions: {
|
|
|
+ shortcuts: [
|
|
|
+ {
|
|
|
+ text: '近7天',
|
|
|
+ onClick: (picker) => {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
|
|
+ picker.$emit('pick', [start, end])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '近30天',
|
|
|
+ onClick: (picker) => {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
|
|
+ picker.$emit('pick', [start, end])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '近90天',
|
|
|
+ onClick: (picker) => {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
|
|
+ picker.$emit('pick', [start, end])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+
|
|
|
+ // KPI 数据
|
|
|
+ kpiData: [],
|
|
|
+
|
|
|
+ // 趋势图
|
|
|
+ trendChart: null,
|
|
|
+ trendMetric: 'created',
|
|
|
+ trendLoading: false,
|
|
|
+
|
|
|
+ // 维度对比图
|
|
|
+ dimensionChart: null,
|
|
|
+ dimensionType: 'plot',
|
|
|
+ dimensionMetric: 'completion_rate',
|
|
|
+ dimensionLoading: false,
|
|
|
+
|
|
|
+ // 待办数据
|
|
|
+ todoData: {
|
|
|
+ today: [],
|
|
|
+ next3Days: [],
|
|
|
+ overdue: []
|
|
|
+ },
|
|
|
+
|
|
|
+ // 抽屉
|
|
|
+ drawerVisible: false,
|
|
|
+ drawerTitle: '任务明细',
|
|
|
+ drawerData: [],
|
|
|
+ drawerLoading: false,
|
|
|
+ drawerPagination: {
|
|
|
+ page: 1,
|
|
|
+ size: 20,
|
|
|
+ total: 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ this.initDefaultFilters()
|
|
|
+ this.initOptions()
|
|
|
+ this.loadAllData()
|
|
|
+ this.initCharts()
|
|
|
+
|
|
|
+ // 监听窗口大小变化
|
|
|
+ window.addEventListener('resize', this.handleResize)
|
|
|
+ },
|
|
|
+
|
|
|
+ beforeDestroy() {
|
|
|
+ if (this.trendChart) {
|
|
|
+ this.trendChart.dispose()
|
|
|
+ }
|
|
|
+ if (this.dimensionChart) {
|
|
|
+ this.dimensionChart.dispose()
|
|
|
+ }
|
|
|
+ window.removeEventListener('resize', this.handleResize)
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ // 初始化默认筛选条件
|
|
|
+ initDefaultFilters() {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30) // 默认近30天
|
|
|
+
|
|
|
+ this.filters.dateRange = [
|
|
|
+ this.formatDate(start),
|
|
|
+ this.formatDate(end)
|
|
|
+ ]
|
|
|
+ },
|
|
|
+
|
|
|
+ // 初始化选项数据
|
|
|
+ initOptions() {
|
|
|
+ this.farmOptions = this.mockFarms()
|
|
|
+ this.plotOptions = this.mockPlots()
|
|
|
+ this.cropOptions = this.mockCrops()
|
|
|
+ this.executorOptions = this.mockExecutors()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 加载所有数据
|
|
|
+ loadAllData() {
|
|
|
+ this.loadKpiData()
|
|
|
+ this.loadTrendData()
|
|
|
+ this.loadDimensionData()
|
|
|
+ this.loadTodoData()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 初始化图表
|
|
|
+ initCharts() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initTrendChart()
|
|
|
+ this.initDimensionChart()
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理查询
|
|
|
+ handleQuery() {
|
|
|
+ this.loadAllData()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理重置
|
|
|
+ handleReset() {
|
|
|
+ this.$refs.filterForm.resetFields()
|
|
|
+ this.initDefaultFilters()
|
|
|
+ this.loadAllData()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理快捷时间选择
|
|
|
+ handleShortcutClick(shortcut) {
|
|
|
+ this.currentShortcut = shortcut.value
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * shortcut.value)
|
|
|
+
|
|
|
+ this.filters.dateRange = [
|
|
|
+ this.formatDate(start),
|
|
|
+ this.formatDate(end)
|
|
|
+ ]
|
|
|
+ this.loadAllData()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理日期范围变更
|
|
|
+ handleDateRangeChange() {
|
|
|
+ this.currentShortcut = null
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理KPI菜单操作
|
|
|
+ handleKpiAction(command) {
|
|
|
+ if (command.action === 'export') {
|
|
|
+ this.exportKpiData(command.key)
|
|
|
+ } else if (command.action === 'detail') {
|
|
|
+ this.handleKpiClick(command.key)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 导出KPI数据
|
|
|
+ exportKpiData(key) {
|
|
|
+ const kpi = this.kpiData.find(item => item.key === key)
|
|
|
+ if (kpi) {
|
|
|
+ this.$message.success(`导出 ${kpi.title} 数据成功`)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 下载图表
|
|
|
+ downloadChart(type) {
|
|
|
+ const chart = type === 'trend' ? this.trendChart : this.dimensionChart
|
|
|
+ if (chart) {
|
|
|
+ const url = chart.getDataURL({
|
|
|
+ type: 'png',
|
|
|
+ backgroundColor: '#fff'
|
|
|
+ })
|
|
|
+ const link = document.createElement('a')
|
|
|
+ link.href = url
|
|
|
+ link.download = `${type === 'trend' ? '任务趋势' : '维度对比'}.png`
|
|
|
+ link.click()
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 全屏显示图表
|
|
|
+ fullscreenChart(type) {
|
|
|
+ this.$message.info('全屏功能开发中...')
|
|
|
+ },
|
|
|
+
|
|
|
+ // 切换侧栏折叠状态
|
|
|
+ toggleTodoSection(section) {
|
|
|
+ this.collapsedSections[section] = !this.collapsedSections[section]
|
|
|
+ },
|
|
|
+
|
|
|
+ // 显示待办操作按钮
|
|
|
+ showTodoAction(taskId) {
|
|
|
+ this.hoveredTaskId = taskId
|
|
|
+ },
|
|
|
+
|
|
|
+ // 隐藏待办操作按钮
|
|
|
+ hideTodoAction() {
|
|
|
+ this.hoveredTaskId = null
|
|
|
+ },
|
|
|
+
|
|
|
+ // 加载KPI数据
|
|
|
+ loadKpiData() {
|
|
|
+ const kpi = this.mockKpi(this.filters)
|
|
|
+ this.kpiData = [
|
|
|
+ {
|
|
|
+ title: '任务总数',
|
|
|
+ value: kpi.total,
|
|
|
+ type: 'number',
|
|
|
+ color: '#1F2937',
|
|
|
+ key: 'total',
|
|
|
+ icon: 'el-icon-s-data',
|
|
|
+ iconBg: 'rgba(74, 144, 226, 0.12)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '已完成',
|
|
|
+ value: kpi.done,
|
|
|
+ type: 'number',
|
|
|
+ color: '#3BB44A',
|
|
|
+ key: 'completed',
|
|
|
+ icon: 'el-icon-circle-check',
|
|
|
+ iconBg: 'rgba(59, 180, 74, 0.12)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '完成率',
|
|
|
+ value: kpi.doneRate * 100,
|
|
|
+ type: 'percent',
|
|
|
+ color: '#3BB44A',
|
|
|
+ key: 'completion_rate',
|
|
|
+ icon: 'el-icon-pie-chart',
|
|
|
+ iconBg: 'rgba(59, 180, 74, 0.12)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '准时率',
|
|
|
+ value: kpi.ontimeRate * 100,
|
|
|
+ type: 'percent',
|
|
|
+ color: '#4A90E2',
|
|
|
+ key: 'ontime_rate',
|
|
|
+ icon: 'el-icon-timer',
|
|
|
+ iconBg: 'rgba(74, 144, 226, 0.12)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '平均完成时长',
|
|
|
+ value: kpi.avgDuration,
|
|
|
+ type: 'duration',
|
|
|
+ color: '#20B2AA',
|
|
|
+ key: 'avg_duration',
|
|
|
+ icon: 'el-icon-stopwatch',
|
|
|
+ iconBg: 'rgba(32, 178, 170, 0.12)',
|
|
|
+ unit: kpi.durationUnit
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '逾期数',
|
|
|
+ value: kpi.overdue,
|
|
|
+ type: 'number',
|
|
|
+ color: '#E85D75',
|
|
|
+ key: 'overdue',
|
|
|
+ icon: 'el-icon-warning',
|
|
|
+ iconBg: 'rgba(232, 93, 117, 0.12)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '进行中',
|
|
|
+ value: kpi.inProgress,
|
|
|
+ type: 'number',
|
|
|
+ color: '#4A90E2',
|
|
|
+ key: 'in_progress',
|
|
|
+ icon: 'el-icon-loading',
|
|
|
+ iconBg: 'rgba(74, 144, 226, 0.12)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '未开始',
|
|
|
+ value: kpi.notStarted,
|
|
|
+ type: 'number',
|
|
|
+ color: '#8B949E',
|
|
|
+ key: 'not_started',
|
|
|
+ icon: 'el-icon-time',
|
|
|
+ iconBg: 'rgba(139, 148, 158, 0.12)'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+
|
|
|
+ // 加载趋势数据
|
|
|
+ loadTrendData() {
|
|
|
+ this.trendLoading = true
|
|
|
+ setTimeout(() => {
|
|
|
+ const data = this.mockTrend(this.filters, this.trendMetric)
|
|
|
+ this.updateTrendChart(data)
|
|
|
+ this.trendLoading = false
|
|
|
+ }, 500)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 加载维度对比数据
|
|
|
+ loadDimensionData() {
|
|
|
+ this.dimensionLoading = true
|
|
|
+ setTimeout(() => {
|
|
|
+ const data = this.mockDimension(this.filters, this.dimensionType, this.dimensionMetric)
|
|
|
+ this.updateDimensionChart(data)
|
|
|
+ this.dimensionLoading = false
|
|
|
+ }, 500)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 加载待办数据
|
|
|
+ loadTodoData() {
|
|
|
+ this.todoData = this.mockTodo(this.filters)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 初始化趋势图
|
|
|
+ initTrendChart() {
|
|
|
+ this.trendChart = echarts.init(this.$refs.trendChart)
|
|
|
+ this.loadTrendData()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 更新趋势图
|
|
|
+ updateTrendChart(data) {
|
|
|
+ if (!this.trendChart) return
|
|
|
+
|
|
|
+ const isPercent = this.trendMetric === 'completion_rate'
|
|
|
+
|
|
|
+ const option = {
|
|
|
+ grid: {
|
|
|
+ left: '6%',
|
|
|
+ right: '6%',
|
|
|
+ bottom: '12%',
|
|
|
+ top: '20%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
|
|
+ borderColor: '#E4E7ED',
|
|
|
+ borderWidth: 1,
|
|
|
+ textStyle: {
|
|
|
+ color: '#606266'
|
|
|
+ },
|
|
|
+ formatter: (params) => {
|
|
|
+ const param = params[0]
|
|
|
+ const value = isPercent ? (param.value * 100).toFixed(1) + '%' : param.value
|
|
|
+ return `${param.axisValue}<br/>${param.seriesName}: ${value}`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: data.map(item => item.date),
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLabel: {
|
|
|
+ color: '#909399',
|
|
|
+ fontSize: 12
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#E4E7ED'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ min: isPercent ? 0 : undefined,
|
|
|
+ max: isPercent ? 1 : undefined,
|
|
|
+ axisLabel: {
|
|
|
+ color: '#909399',
|
|
|
+ fontSize: 12,
|
|
|
+ formatter: isPercent ? (value) => (value * 100) + '%' : undefined
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#F5F7FA'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: this.getTrendMetricName(this.trendMetric),
|
|
|
+ type: 'line',
|
|
|
+ data: data.map(item => item.value),
|
|
|
+ smooth: true,
|
|
|
+ symbolSize: 5,
|
|
|
+ symbol: 'circle',
|
|
|
+ lineStyle: {
|
|
|
+ width: 2,
|
|
|
+ color: '#12B67F'
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: 'rgba(18, 182, 127, 0.25)' },
|
|
|
+ { offset: 1, color: 'rgba(18, 182, 127, 0)' }
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#12B67F',
|
|
|
+ borderColor: '#fff',
|
|
|
+ borderWidth: 2
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series',
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowColor: 'rgba(18, 182, 127, 0.3)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+
|
|
|
+ this.trendChart.setOption(option)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 初始化维度对比图
|
|
|
+ initDimensionChart() {
|
|
|
+ this.dimensionChart = echarts.init(this.$refs.dimensionChart)
|
|
|
+ this.loadDimensionData()
|
|
|
+
|
|
|
+ // 添加点击事件
|
|
|
+ this.dimensionChart.on('click', (params) => {
|
|
|
+ this.openDrawer({
|
|
|
+ type: 'dimension',
|
|
|
+ dimension: this.dimensionType,
|
|
|
+ name: params.name,
|
|
|
+ metric: this.dimensionMetric
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 更新维度对比图
|
|
|
+ updateDimensionChart(data) {
|
|
|
+ if (!this.dimensionChart) return
|
|
|
+
|
|
|
+ const option = {
|
|
|
+ grid: {
|
|
|
+ left: '5%',
|
|
|
+ right: '8%',
|
|
|
+ bottom: '8%',
|
|
|
+ top: '5%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: { type: 'shadow' },
|
|
|
+ backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
|
|
+ borderColor: '#E4E7ED',
|
|
|
+ borderWidth: 1,
|
|
|
+ textStyle: {
|
|
|
+ color: '#606266'
|
|
|
+ },
|
|
|
+ formatter: (params) => {
|
|
|
+ const param = params[0]
|
|
|
+ const value = (param.value * 100).toFixed(1) + '%'
|
|
|
+ return `${param.axisValue}<br/>${param.seriesName}: ${value}`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ max: 1,
|
|
|
+ axisLabel: {
|
|
|
+ color: '#909399',
|
|
|
+ fontSize: 12,
|
|
|
+ formatter: v => (v * 100).toFixed(0) + '%'
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#F5F7FA'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: data.map(item => item.name),
|
|
|
+ axisLabel: {
|
|
|
+ color: '#606266',
|
|
|
+ fontSize: 12,
|
|
|
+ width: 100,
|
|
|
+ overflow: 'truncate'
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#E4E7ED'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: this.getDimensionMetricName(this.dimensionMetric),
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 18,
|
|
|
+ data: data.map(item => item.value),
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
+ { offset: 0, color: '#3BB44A' },
|
|
|
+ { offset: 1, color: '#66CC6A' }
|
|
|
+ ]),
|
|
|
+ borderRadius: [0, 8, 8, 0],
|
|
|
+ shadowBlur: 6,
|
|
|
+ shadowColor: 'rgba(59, 180, 74, 0.3)',
|
|
|
+ shadowOffsetX: 2
|
|
|
+ },
|
|
|
+ backgroundStyle: {
|
|
|
+ color: 'rgba(0, 0, 0, 0.05)',
|
|
|
+ borderRadius: [0, 8, 8, 0]
|
|
|
+ },
|
|
|
+ showBackground: true,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'right',
|
|
|
+ formatter: p => (p.value * 100).toFixed(1) + '%',
|
|
|
+ color: '#4B5563',
|
|
|
+ fontSize: 12,
|
|
|
+ fontWeight: 500,
|
|
|
+ backgroundColor: '#fff',
|
|
|
+ borderRadius: 6,
|
|
|
+ padding: [4, 8],
|
|
|
+ borderColor: '#E5E7EB',
|
|
|
+ borderWidth: 1,
|
|
|
+ shadowBlur: 4,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.1)'
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
+ { offset: 0, color: '#2D9A3A' },
|
|
|
+ { offset: 1, color: '#5ABF60' }
|
|
|
+ ]),
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowColor: 'rgba(59, 180, 74, 0.5)',
|
|
|
+ shadowOffsetX: 3
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+
|
|
|
+ this.dimensionChart.setOption(option)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理趋势指标变更
|
|
|
+ handleTrendMetricChange(metric) {
|
|
|
+ if (metric) {
|
|
|
+ this.trendMetric = metric
|
|
|
+ }
|
|
|
+ this.loadTrendData()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理维度类型变更
|
|
|
+ handleDimensionTypeChange(type) {
|
|
|
+ if (type) {
|
|
|
+ this.dimensionType = type
|
|
|
+ }
|
|
|
+ this.loadDimensionData()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理维度指标变更
|
|
|
+ handleDimensionMetricChange(metric) {
|
|
|
+ if (metric) {
|
|
|
+ this.dimensionMetric = metric
|
|
|
+ }
|
|
|
+ this.loadDimensionData()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理KPI点击
|
|
|
+ handleKpiClick(key) {
|
|
|
+ this.openDrawer({ type: 'kpi', key })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理待办点击
|
|
|
+ handleTodoClick(task) {
|
|
|
+ this.openDrawer({ type: 'todo', task })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理维度图点击
|
|
|
+ handleDimensionClick(params) {
|
|
|
+ this.openDrawer({
|
|
|
+ type: 'dimension',
|
|
|
+ dimension: this.dimensionType,
|
|
|
+ name: params.name,
|
|
|
+ metric: this.dimensionMetric
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 打开抽屉
|
|
|
+ openDrawer(params) {
|
|
|
+ this.drawerVisible = true
|
|
|
+ this.drawerTitle = this.getDrawerTitle(params)
|
|
|
+ this.loadDrawerData(params)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取抽屉标题
|
|
|
+ getDrawerTitle(params) {
|
|
|
+ if (params.type === 'kpi') {
|
|
|
+ const kpi = this.kpiData.find(item => item.key === params.key)
|
|
|
+ return `任务明细 - ${kpi ? kpi.title : ''}`
|
|
|
+ } else if (params.type === 'todo') {
|
|
|
+ return `任务明细 - ${params.task.taskName}`
|
|
|
+ } else if (params.type === 'dimension') {
|
|
|
+ return `任务明细 - ${params.name}`
|
|
|
+ }
|
|
|
+ return '任务明细'
|
|
|
+ },
|
|
|
+
|
|
|
+ // 加载抽屉数据
|
|
|
+ loadDrawerData(params) {
|
|
|
+ this.drawerLoading = true
|
|
|
+ setTimeout(() => {
|
|
|
+ const data = this.mockDetail(params)
|
|
|
+ this.drawerData = data.slice(
|
|
|
+ (this.drawerPagination.page - 1) * this.drawerPagination.size,
|
|
|
+ this.drawerPagination.page * this.drawerPagination.size
|
|
|
+ )
|
|
|
+ this.drawerPagination.total = data.length
|
|
|
+ this.drawerLoading = false
|
|
|
+ }, 500)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理抽屉分页大小变更
|
|
|
+ handleDrawerSizeChange(size) {
|
|
|
+ this.drawerPagination.size = size
|
|
|
+ this.drawerPagination.page = 1
|
|
|
+ // 重新加载数据
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理抽屉页码变更
|
|
|
+ handleDrawerCurrentChange(page) {
|
|
|
+ this.drawerPagination.page = page
|
|
|
+ // 重新加载数据
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理抽屉关闭
|
|
|
+ handleDrawerClose() {
|
|
|
+ this.drawerVisible = false
|
|
|
+ this.drawerPagination.page = 1
|
|
|
+ this.drawerPagination.size = 20
|
|
|
+ },
|
|
|
+
|
|
|
+ // 导出CSV
|
|
|
+ handleExportCsv() {
|
|
|
+ const csvContent = this.generateCsvContent(this.drawerData)
|
|
|
+ this.downloadCsv(csvContent, '任务明细.csv')
|
|
|
+ },
|
|
|
+
|
|
|
+ // 生成CSV内容
|
|
|
+ generateCsvContent(data) {
|
|
|
+ const headers = ['任务名称', '类型', '作物', '地块', '执行人', '计划开始', '计划结束', '状态']
|
|
|
+ const rows = data.map(item => [
|
|
|
+ item.taskName,
|
|
|
+ this.getTaskTypeName(item.taskType),
|
|
|
+ item.cropName,
|
|
|
+ item.plotName,
|
|
|
+ item.executor,
|
|
|
+ item.startTime,
|
|
|
+ item.endTime,
|
|
|
+ this.getStatusName(item.status)
|
|
|
+ ])
|
|
|
+
|
|
|
+ return [headers, ...rows].map(row => row.join(',')).join('\n')
|
|
|
+ },
|
|
|
+
|
|
|
+ // 下载CSV
|
|
|
+ downloadCsv(content, filename) {
|
|
|
+ const blob = new Blob(['\ufeff' + content], { type: 'text/csv;charset=utf-8;' })
|
|
|
+ const link = document.createElement('a')
|
|
|
+ const url = URL.createObjectURL(blob)
|
|
|
+ link.setAttribute('href', url)
|
|
|
+ link.setAttribute('download', filename)
|
|
|
+ link.style.visibility = 'hidden'
|
|
|
+ document.body.appendChild(link)
|
|
|
+ link.click()
|
|
|
+ document.body.removeChild(link)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理窗口大小变更
|
|
|
+ handleResize() {
|
|
|
+ if (this.trendChart) {
|
|
|
+ this.trendChart.resize()
|
|
|
+ }
|
|
|
+ if (this.dimensionChart) {
|
|
|
+ this.dimensionChart.resize()
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 格式化KPI值
|
|
|
+ formatKpiValue(value, type) {
|
|
|
+ if (type === 'percent') {
|
|
|
+ return (value * 100).toFixed(1) + '%'
|
|
|
+ }
|
|
|
+ return value.toLocaleString()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取趋势指标名称
|
|
|
+ getTrendMetricName(metric) {
|
|
|
+ const names = {
|
|
|
+ created: '创建数',
|
|
|
+ completed: '完成数',
|
|
|
+ completion_rate: '完成率'
|
|
|
+ }
|
|
|
+ return names[metric] || metric
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取维度指标名称
|
|
|
+ getDimensionMetricName(metric) {
|
|
|
+ const names = {
|
|
|
+ completion_rate: '完成率',
|
|
|
+ ontime_rate: '准时率'
|
|
|
+ }
|
|
|
+ return names[metric] || metric
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取任务类型名称
|
|
|
+ getTaskTypeName(type) {
|
|
|
+ const names = {
|
|
|
+ fertilize: '施肥',
|
|
|
+ irrigate: '灌溉',
|
|
|
+ spray: '打药',
|
|
|
+ harvest: '采摘',
|
|
|
+ inspect: '巡检',
|
|
|
+ weed: '除草',
|
|
|
+ other: '其他'
|
|
|
+ }
|
|
|
+ return names[type] || type
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取任务类型标签类型
|
|
|
+ getTaskTypeTagType(type) {
|
|
|
+ const types = {
|
|
|
+ fertilize: 'success',
|
|
|
+ irrigate: 'primary',
|
|
|
+ spray: 'warning',
|
|
|
+ harvest: 'danger',
|
|
|
+ inspect: 'info',
|
|
|
+ weed: '',
|
|
|
+ other: 'default'
|
|
|
+ }
|
|
|
+ return types[type] || ''
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取状态名称
|
|
|
+ getStatusName(status) {
|
|
|
+ const names = {
|
|
|
+ not_started: '未开始',
|
|
|
+ in_progress: '进行中',
|
|
|
+ completed: '已完成',
|
|
|
+ overdue: '已逾期',
|
|
|
+ cancelled: '已取消'
|
|
|
+ }
|
|
|
+ return names[status] || status
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取状态标签类型
|
|
|
+ getStatusTagType(status) {
|
|
|
+ const types = {
|
|
|
+ not_started: 'info',
|
|
|
+ in_progress: 'primary',
|
|
|
+ completed: 'success',
|
|
|
+ overdue: 'danger',
|
|
|
+ cancelled: 'default'
|
|
|
+ }
|
|
|
+ return types[status] || ''
|
|
|
+ },
|
|
|
+
|
|
|
+ // 格式化日期
|
|
|
+ formatDate(date) {
|
|
|
+ const d = new Date(date)
|
|
|
+ const year = d.getFullYear()
|
|
|
+ const month = String(d.getMonth() + 1).padStart(2, '0')
|
|
|
+ const day = String(d.getDate()).padStart(2, '0')
|
|
|
+ return `${year}-${month}-${day}`
|
|
|
+ },
|
|
|
+
|
|
|
+ // 生成哈希种子
|
|
|
+ generateSeed(filters) {
|
|
|
+ const str = JSON.stringify(filters)
|
|
|
+ let hash = 0
|
|
|
+ for (let i = 0; i < str.length; i++) {
|
|
|
+ const char = str.charCodeAt(i)
|
|
|
+ hash = ((hash << 5) - hash) + char
|
|
|
+ hash = hash & hash // Convert to 32bit integer
|
|
|
+ }
|
|
|
+ return Math.abs(hash)
|
|
|
+ },
|
|
|
+
|
|
|
+ // Mock 数据生成方法
|
|
|
+ mockFarms() {
|
|
|
+ return [
|
|
|
+ { label: '阳光农场', value: 'farm1' },
|
|
|
+ { label: '绿野农场', value: 'farm2' },
|
|
|
+ { label: '丰收农场', value: 'farm3' },
|
|
|
+ { label: '田园农场', value: 'farm4' },
|
|
|
+ { label: '科技农场', value: 'farm5' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+
|
|
|
+ mockPlots() {
|
|
|
+ return [
|
|
|
+ { label: '东区1号田', value: 'plot1' },
|
|
|
+ { label: '西区2号田', value: 'plot2' },
|
|
|
+ { label: '南区果园', value: 'plot3' },
|
|
|
+ { label: '北区菜地', value: 'plot4' },
|
|
|
+ { label: '温室大棚A区', value: 'plot5' },
|
|
|
+ { label: '智能温室B区', value: 'plot6' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+
|
|
|
+ mockCrops() {
|
|
|
+ return [
|
|
|
+ { label: '水稻', value: 'rice' },
|
|
|
+ { label: '玉米', value: 'corn' },
|
|
|
+ { label: '小麦', value: 'wheat' },
|
|
|
+ { label: '番茄', value: 'tomato' },
|
|
|
+ { label: '黄瓜', value: 'cucumber' },
|
|
|
+ { label: '草莓', value: 'strawberry' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+
|
|
|
+ mockExecutors() {
|
|
|
+ return [
|
|
|
+ { label: '张三', value: 'user1' },
|
|
|
+ { label: '李四', value: 'user2' },
|
|
|
+ { label: '王五', value: 'user3' },
|
|
|
+ { label: '赵六', value: 'user4' },
|
|
|
+ { label: '钱七', value: 'user5' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+
|
|
|
+ mockKpi(filters) {
|
|
|
+ const seed = this.generateSeed(filters)
|
|
|
+ const random = seedrandom(seed)
|
|
|
+
|
|
|
+ const total = Math.floor(random() * 500) + 200
|
|
|
+ const done = Math.floor(random() * total * 0.8)
|
|
|
+ const overdue = Math.floor(random() * total * 0.1)
|
|
|
+ const inProgress = Math.floor(random() * (total - done - overdue) * 0.6)
|
|
|
+ const notStarted = total - done - overdue - inProgress
|
|
|
+
|
|
|
+ const doneRate = total > 0 ? done / total : 0
|
|
|
+ const ontimeRate = done > 0 ? (done - Math.floor(random() * done * 0.2)) / done : 0
|
|
|
+
|
|
|
+ // 生成平均完成时长数据
|
|
|
+ const duration = random() * 96 + 4 // 4-100小时
|
|
|
+ let avgDuration, durationUnit
|
|
|
+
|
|
|
+ if (duration >= 24) {
|
|
|
+ avgDuration = Number((duration / 24).toFixed(1))
|
|
|
+ durationUnit = '天'
|
|
|
+ } else {
|
|
|
+ avgDuration = Number(duration.toFixed(1))
|
|
|
+ durationUnit = '小时'
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ total,
|
|
|
+ done,
|
|
|
+ doneRate,
|
|
|
+ ontimeRate,
|
|
|
+ overdue,
|
|
|
+ inProgress,
|
|
|
+ notStarted,
|
|
|
+ avgDuration,
|
|
|
+ durationUnit
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ mockTrend(filters, metric) {
|
|
|
+ const seed = this.generateSeed({ ...filters, metric })
|
|
|
+ const random = seedrandom(seed)
|
|
|
+
|
|
|
+ const data = []
|
|
|
+ const days = 30
|
|
|
+ const startDate = new Date(filters.dateRange[0])
|
|
|
+
|
|
|
+ for (let i = 0; i < days; i++) {
|
|
|
+ const date = new Date(startDate)
|
|
|
+ date.setDate(date.getDate() + i)
|
|
|
+
|
|
|
+ let value
|
|
|
+ if (metric === 'completion_rate') {
|
|
|
+ value = 0.6 + random() * 0.3 // 60%-90%
|
|
|
+ } else {
|
|
|
+ value = Math.floor(random() * 50) + 10 // 10-60
|
|
|
+ }
|
|
|
+
|
|
|
+ data.push({
|
|
|
+ date: this.formatDate(date),
|
|
|
+ value
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ return data
|
|
|
+ },
|
|
|
+
|
|
|
+ mockDimension(filters, type, metric) {
|
|
|
+ const seed = this.generateSeed({ ...filters, type, metric })
|
|
|
+ const random = seedrandom(seed)
|
|
|
+
|
|
|
+ let names = []
|
|
|
+ if (type === 'plot') {
|
|
|
+ names = this.plotOptions.map(item => item.label)
|
|
|
+ } else if (type === 'crop') {
|
|
|
+ names = this.cropOptions.map(item => item.label)
|
|
|
+ } else if (type === 'taskType') {
|
|
|
+ names = this.taskTypeOptions.map(item => item.label)
|
|
|
+ }
|
|
|
+
|
|
|
+ return names.map(name => ({
|
|
|
+ name,
|
|
|
+ value: 0.5 + random() * 0.4 // 50%-90%
|
|
|
+ }))
|
|
|
+ },
|
|
|
+
|
|
|
+ mockTodo(filters) {
|
|
|
+ const seed = this.generateSeed(filters)
|
|
|
+ const random = seedrandom(seed)
|
|
|
+
|
|
|
+ const today = []
|
|
|
+ const next3Days = []
|
|
|
+ const overdue = []
|
|
|
+
|
|
|
+ // 生成今日到期任务
|
|
|
+ for (let i = 0; i < 3; i++) {
|
|
|
+ today.push({
|
|
|
+ id: `today_${i}`,
|
|
|
+ taskName: `任务${i + 1}`,
|
|
|
+ plotName: this.plotOptions[Math.floor(random() * this.plotOptions.length)].label,
|
|
|
+ executor: this.executorOptions[Math.floor(random() * this.executorOptions.length)].label,
|
|
|
+ deadline: '今日 18:00'
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 生成未来3天到期任务
|
|
|
+ for (let i = 0; i < 5; i++) {
|
|
|
+ next3Days.push({
|
|
|
+ id: `next_${i}`,
|
|
|
+ taskName: `任务${i + 4}`,
|
|
|
+ plotName: this.plotOptions[Math.floor(random() * this.plotOptions.length)].label,
|
|
|
+ executor: this.executorOptions[Math.floor(random() * this.executorOptions.length)].label,
|
|
|
+ deadline: `${i + 1}天后`
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 生成逾期任务
|
|
|
+ for (let i = 0; i < 2; i++) {
|
|
|
+ overdue.push({
|
|
|
+ id: `overdue_${i}`,
|
|
|
+ taskName: `逾期任务${i + 1}`,
|
|
|
+ plotName: this.plotOptions[Math.floor(random() * this.plotOptions.length)].label,
|
|
|
+ executor: this.executorOptions[Math.floor(random() * this.executorOptions.length)].label,
|
|
|
+ deadline: `逾期${i + 1}天`
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ return { today, next3Days, overdue }
|
|
|
+ },
|
|
|
+
|
|
|
+ mockDetail(params) {
|
|
|
+ const seed = this.generateSeed(params)
|
|
|
+ const random = seedrandom(seed)
|
|
|
+
|
|
|
+ const data = []
|
|
|
+ const count = Math.floor(random() * 30) + 20
|
|
|
+
|
|
|
+ for (let i = 0; i < count; i++) {
|
|
|
+ data.push({
|
|
|
+ id: i + 1,
|
|
|
+ taskName: `任务${i + 1}`,
|
|
|
+ taskType: this.taskTypeOptions[Math.floor(random() * this.taskTypeOptions.length)].value,
|
|
|
+ cropName: this.cropOptions[Math.floor(random() * this.cropOptions.length)].label,
|
|
|
+ plotName: this.plotOptions[Math.floor(random() * this.plotOptions.length)].label,
|
|
|
+ executor: this.executorOptions[Math.floor(random() * this.executorOptions.length)].label,
|
|
|
+ startTime: '2024-01-15 08:00',
|
|
|
+ endTime: '2024-01-15 18:00',
|
|
|
+ status: this.statusOptions[Math.floor(random() * this.statusOptions.length)].value
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ return data
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* 页面背景与容器 */
|
|
|
+.stats-page {
|
|
|
+ background: #F7F8FA;
|
|
|
+ min-height: 100vh;
|
|
|
+ padding: 16px;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+/* 通用卡片底板 */
|
|
|
+.stats-card {
|
|
|
+ --card-bg: #fff;
|
|
|
+ --card-radius: 10px;
|
|
|
+ --card-border: 1px solid #EEF1F5;
|
|
|
+ --card-shadow: 0 6px 18px rgba(22,31,41,.06);
|
|
|
+ --card-shadow-hover: 0 10px 24px rgba(22,31,41,.10);
|
|
|
+
|
|
|
+ background: var(--card-bg);
|
|
|
+ border: var(--card-border);
|
|
|
+ border-radius: var(--card-radius);
|
|
|
+ box-shadow: var(--card-shadow);
|
|
|
+ padding: 20px;
|
|
|
+ margin-left: 0;
|
|
|
+ margin-right: 0;
|
|
|
+ transition: box-shadow .2s ease, transform .2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.stats-card:hover {
|
|
|
+ box-shadow: var(--card-shadow-hover);
|
|
|
+ transform: translateY(-2px);
|
|
|
+}
|
|
|
+
|
|
|
+/* KPI 卡片区域 */
|
|
|
+.kpi-section {
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+/* KPI 网格布局 */
|
|
|
+.kpi-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(8, 1fr);
|
|
|
+ gap: 12px;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.kpi-card {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ padding: 12px;
|
|
|
+ border: 1px solid #E5E7EB;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.25s ease;
|
|
|
+ position: relative;
|
|
|
+ min-height: 68px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.kpi-card:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), 0 3px 10px rgba(0, 0, 0, 0.1);
|
|
|
+ border-color: #D1D5DB;
|
|
|
+}
|
|
|
+
|
|
|
+.kpi-card__icon {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ border-radius: 6px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 14px;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.kpi-card__content {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.kpi-card__meta {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #6B7280;
|
|
|
+ line-height: 16px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.kpi-card__value {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ gap: 4px;
|
|
|
+ line-height: 1.2;
|
|
|
+}
|
|
|
+
|
|
|
+.kpi-number {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #111827;
|
|
|
+}
|
|
|
+
|
|
|
+.kpi-unit {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #6B7280;
|
|
|
+ margin-left: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.kpi-card__menu {
|
|
|
+ position: absolute;
|
|
|
+ top: 8px;
|
|
|
+ right: 8px;
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 0.2s ease;
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
+
|
|
|
+.kpi-card:hover .kpi-card__menu {
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.kpi-menu-trigger {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #9CA3AF;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.kpi-menu-trigger:hover {
|
|
|
+ background: #F3F4F6;
|
|
|
+ color: #6B7280;
|
|
|
+}
|
|
|
+
|
|
|
+/* 保底措施 */
|
|
|
+.el-card {
|
|
|
+ border: 1px solid #EEF1F5 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.el-card__body {
|
|
|
+ padding: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 筛选区域 */
|
|
|
+.time-shortcuts {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.shortcuts-label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ margin-right: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.shortcut-pills {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.shortcut-pill {
|
|
|
+ padding: 6px 12px;
|
|
|
+ border: 1px solid #EEF1F5;
|
|
|
+ border-radius: 16px;
|
|
|
+ background: #fff;
|
|
|
+ color: #606266;
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.shortcut-pill:hover {
|
|
|
+ border-color: #12B67F;
|
|
|
+ color: #12B67F;
|
|
|
+}
|
|
|
+
|
|
|
+.shortcut-pill.active {
|
|
|
+ background: #12B67F;
|
|
|
+ border-color: #12B67F;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.filter-divider {
|
|
|
+ height: 1px;
|
|
|
+ background: #EFF2F7;
|
|
|
+ margin: 16px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.filter-form .el-form-item {
|
|
|
+ margin-right: 12px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.action-buttons {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-primary {
|
|
|
+ background: linear-gradient(135deg, #12B67F 0%, #21ba45 100%) !important;
|
|
|
+ border: none !important;
|
|
|
+ border-radius: 8px !important;
|
|
|
+ font-weight: 600;
|
|
|
+ padding: 8px 20px !important;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ transform: translateY(0);
|
|
|
+}
|
|
|
+
|
|
|
+.btn-primary:hover {
|
|
|
+ transform: translateY(-1px);
|
|
|
+ box-shadow: 0 4px 12px rgba(18, 182, 127, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.btn-secondary {
|
|
|
+ background: #fff !important;
|
|
|
+ border: 1px solid #EEF1F5 !important;
|
|
|
+ color: #606266 !important;
|
|
|
+ border-radius: 8px !important;
|
|
|
+ font-weight: 500;
|
|
|
+ padding: 8px 20px !important;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ transform: translateY(0);
|
|
|
+}
|
|
|
+
|
|
|
+.btn-secondary:hover {
|
|
|
+ transform: translateY(-1px);
|
|
|
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
|
+ border-color: #12B67F !important;
|
|
|
+ color: #12B67F !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 图表区域 */
|
|
|
+.main-content {
|
|
|
+ margin-bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* 响应式调整 */
|
|
|
+@media (max-width: 1400px) {
|
|
|
+ .kpi-grid {
|
|
|
+ grid-template-columns: repeat(4, 1fr);
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .kpi-card {
|
|
|
+ padding: 10px;
|
|
|
+ gap: 6px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 992px) {
|
|
|
+ .kpi-grid {
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .kpi-card {
|
|
|
+ padding: 14px;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .kpi-card__icon {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .kpi-number {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .stats-page {
|
|
|
+ padding: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .kpi-grid {
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .kpi-card {
|
|
|
+ padding: 12px;
|
|
|
+ gap: 8px;
|
|
|
+ min-height: 70px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .kpi-card__icon {
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .kpi-card__meta {
|
|
|
+ font-size: 11px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .kpi-number {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .kpi-unit {
|
|
|
+ font-size: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart-container {
|
|
|
+ height: 300px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 480px) {
|
|
|
+ .kpi-grid {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .kpi-card {
|
|
|
+ padding: 10px;
|
|
|
+ min-height: 60px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .kpi-card__icon {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ font-size: 11px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .kpi-number {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.chart-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-bottom: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.chart-title {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1F2329;
|
|
|
+ margin-bottom: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.chart-controls {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.dimension-controls {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.control-group {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.control-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #606266;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.metric-segment {
|
|
|
+ display: flex;
|
|
|
+ background: #F7F8FA;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 2px;
|
|
|
+ border: 1px solid #EEF1F5;
|
|
|
+}
|
|
|
+
|
|
|
+.segment-btn {
|
|
|
+ padding: 6px 12px;
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+ color: #606266;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.segment-btn:hover {
|
|
|
+ color: #12B67F;
|
|
|
+}
|
|
|
+
|
|
|
+.segment-btn.active {
|
|
|
+ background: #fff;
|
|
|
+ color: #12B67F;
|
|
|
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.chart-tools {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.chart-container {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+/* 确保图表在卡片中居中 */
|
|
|
+.chart-section .chart-container > div {
|
|
|
+ width: 100% !important;
|
|
|
+ height: 100% !important;
|
|
|
+}
|
|
|
+
|
|
|
+.chart-empty {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 300px;
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
+
|
|
|
+.chart-empty-icon {
|
|
|
+ font-size: 48px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ opacity: 0.5;
|
|
|
+}
|
|
|
+
|
|
|
+.chart-empty-text {
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 右侧侧栏 */
|
|
|
+.sidebar-sticky {
|
|
|
+ position: sticky;
|
|
|
+ top: 88px;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* 主内容区域对齐 */
|
|
|
+.main-content > .el-col {
|
|
|
+ padding-left: 8px;
|
|
|
+ padding-right: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.main-content > .el-col:first-child {
|
|
|
+ padding-left: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.main-content > .el-col:last-child {
|
|
|
+ padding-right: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 统一对齐样式 - 确保所有区域都完全对齐 */
|
|
|
+.main-content {
|
|
|
+ margin-left: 0 !important;
|
|
|
+ margin-right: 0 !important;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* 确保待办卡片完全撑满容器 */
|
|
|
+.todo-section {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.todo-section:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 992px) {
|
|
|
+ .sidebar-sticky {
|
|
|
+ position: static;
|
|
|
+ margin-top: 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.todo-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.todo-title-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.todo-header h4 {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1F2329;
|
|
|
+}
|
|
|
+
|
|
|
+.todo-badge {
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.toggle-icon {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.toggle-icon.collapsed {
|
|
|
+ transform: rotate(-90deg);
|
|
|
+}
|
|
|
+
|
|
|
+.todo-list {
|
|
|
+ max-height: 300px;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.timeline-container {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.todo-item {
|
|
|
+ padding: 12px 0;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ border-bottom: 1px dashed #EFF2F7;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.todo-item:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+
|
|
|
+.todo-item:hover {
|
|
|
+ background-color: #F7F8FA;
|
|
|
+ margin: 0 -12px;
|
|
|
+ padding: 12px;
|
|
|
+ border-radius: 6px;
|
|
|
+ border-bottom: 1px dashed #EFF2F7;
|
|
|
+}
|
|
|
+
|
|
|
+.todo-item:last-child:hover {
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+
|
|
|
+.todo-item.overdue {
|
|
|
+ background: #FFF2F0;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 8px 10px;
|
|
|
+ margin: 4px 0;
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+
|
|
|
+.todo-item.overdue:hover {
|
|
|
+ background: #FFE8E6;
|
|
|
+ margin: 4px -12px;
|
|
|
+ padding: 8px 22px;
|
|
|
+}
|
|
|
+
|
|
|
+.todo-content {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.task-name {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1F2329;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ line-height: 1.4;
|
|
|
+}
|
|
|
+
|
|
|
+.task-meta {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #606266;
|
|
|
+ margin-bottom: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.task-time {
|
|
|
+ font-size: 11px;
|
|
|
+ color: #909399;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.task-time.danger {
|
|
|
+ color: #F56C6C;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.todo-action {
|
|
|
+ flex-shrink: 0;
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.todo-item:hover .todo-action {
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.action-btn {
|
|
|
+ padding: 4px 8px;
|
|
|
+ font-size: 11px;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #12B67F;
|
|
|
+}
|
|
|
+
|
|
|
+.action-btn:hover {
|
|
|
+ background: rgba(18, 182, 127, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.drawer-content {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.drawer-content .el-table {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.drawer-content .el-table th {
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.drawer-content .el-table td {
|
|
|
+ padding: 12px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.drawer-actions {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|
