feat(project): 重构甘特图为vue-ganttastic组件并更新项目统计卡片
Some checks failed
Lint Code / Lint Code (push) Failing after 1m35s
Some checks failed
Lint Code / Lint Code (push) Failing after 1m35s
- 替换原有甘特图任务条样式计算，改用vue-ganttastic库渲染任务条和里程碑 - 根据任务状态和进度生成不同颜色，支持关键里程碑标识 - 实现甘特图日期范围计算及任务、里程碑数据格式转换 - 优化甘特图和里程碑的布局与样式，提升交互体验 - 移除右侧项目AI助手相关代码及样式 - 项目首页统计卡片文字和图标调整，展示项目总数、进行中、已完成等状态 - 平均进度条样式优化，补充高风险项目数量显示
This commit is contained in:
@@ -128,38 +128,43 @@ function getRiskType(risk?: string): "success" | "warning" | "danger" {
|
||||
<el-card shadow="hover" class="stat-card">
|
||||
<div class="flex-bc">
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">进行中项目</p>
|
||||
<p class="text-gray-500 text-sm">项目总数</p>
|
||||
<p class="text-2xl font-bold mt-1">
|
||||
{{ statistics.totalCount }}
|
||||
</p>
|
||||
<p class="text-xs text-blue-500 mt-1">
|
||||
<el-icon
|
||||
><component :is="useRenderIcon('ri/folder-line')"
|
||||
/></el-icon>
|
||||
包含各状态项目
|
||||
</p>
|
||||
</div>
|
||||
<div class="stat-icon bg-blue-100">
|
||||
<el-icon :size="24" color="#409eff">
|
||||
<component :is="useRenderIcon('ri/folders-line')" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<el-card shadow="hover" class="stat-card">
|
||||
<div class="flex-bc">
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">进行中</p>
|
||||
<p class="text-2xl font-bold mt-1">
|
||||
{{ statistics.ongoingCount }}
|
||||
</p>
|
||||
<p class="text-xs text-green-500 mt-1">
|
||||
<el-icon
|
||||
><component :is="useRenderIcon('ri/arrow-up-line')"
|
||||
><component :is="useRenderIcon('ri/play-circle-line')"
|
||||
/></el-icon>
|
||||
较上月增加2个
|
||||
{{ statistics.planningCount }} 个规划中
|
||||
</p>
|
||||
</div>
|
||||
<div class="stat-icon bg-blue-100">
|
||||
<el-icon :size="24" color="#409eff">
|
||||
<component :is="useRenderIcon('ri/folder-line')" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<el-card shadow="hover" class="stat-card">
|
||||
<div class="flex-bc">
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">已完成项目</p>
|
||||
<p class="text-2xl font-bold mt-1">
|
||||
{{ statistics.completedCount }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-400 mt-1">本年度累计完成</p>
|
||||
</div>
|
||||
<div class="stat-icon bg-green-100">
|
||||
<el-icon :size="24" color="#67c23a">
|
||||
<component :is="useRenderIcon('ri/check-line')" />
|
||||
<component :is="useRenderIcon('ri/play-circle-line')" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
@@ -169,41 +174,50 @@ function getRiskType(risk?: string): "success" | "warning" | "danger" {
|
||||
<el-card shadow="hover" class="stat-card">
|
||||
<div class="flex-bc">
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">高风险项目</p>
|
||||
<p class="text-2xl font-bold mt-1 text-orange-500">
|
||||
{{ statistics.highRiskCount }}
|
||||
</p>
|
||||
<p class="text-xs text-orange-400 mt-1">需要重点关注</p>
|
||||
</div>
|
||||
<div class="stat-icon bg-orange-100">
|
||||
<el-icon :size="24" color="#e6a23c">
|
||||
<component :is="useRenderIcon('ri/alert-line')" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<el-card shadow="hover" class="stat-card">
|
||||
<div class="flex-bc">
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">平均完成率</p>
|
||||
<p class="text-gray-500 text-sm">已完成</p>
|
||||
<p class="text-2xl font-bold mt-1">
|
||||
{{ Math.round(statistics.averageProgress || 0) }}%
|
||||
{{ statistics.completedCount }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-400 mt-1">
|
||||
{{ statistics.pausedCount }} 个已暂停 |
|
||||
{{ statistics.cancelledCount }} 个已取消
|
||||
</p>
|
||||
<el-progress
|
||||
:percentage="Math.round(statistics.averageProgress || 0)"
|
||||
:show-text="false"
|
||||
class="mt-2"
|
||||
style="width: 100px"
|
||||
/>
|
||||
</div>
|
||||
<div class="stat-icon bg-purple-100">
|
||||
<el-icon :size="24" color="#9b59b6">
|
||||
<component :is="useRenderIcon('ri/check-double-line')" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<el-card shadow="hover" class="stat-card">
|
||||
<div class="flex-bc">
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">平均进度</p>
|
||||
<p class="text-2xl font-bold mt-1">
|
||||
{{ Math.round(statistics.averageProgress || 0) }}%
|
||||
</p>
|
||||
<p class="text-xs text-orange-400 mt-1">
|
||||
<el-icon
|
||||
><component :is="useRenderIcon('ri/alert-line')"
|
||||
/></el-icon>
|
||||
{{ statistics.highRiskCount }} 个高风险项目
|
||||
</p>
|
||||
</div>
|
||||
<div class="stat-icon bg-orange-100">
|
||||
<el-icon :size="24" color="#e6a23c">
|
||||
<component :is="useRenderIcon('ri/bar-chart-line')" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<el-progress
|
||||
:percentage="Math.round(statistics.averageProgress || 0)"
|
||||
:show-text="false"
|
||||
class="mt-2"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
Reference in New Issue
Block a user