Front_Team/CID
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cid首页卡片界面编写，全部使用假数据，后续接口等待更新，共新增四个卡片

Browse Source
This commit is contained in:
zhouyang
2025-10-31 17:18:00 +08:00
parent 70bfa87ba3
commit a597971772
8 changed files with 585 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/i18n/temp/en.json
View File

@@ -2269,10 +2269,18 @@
"dropFileHereOrClickToUpload": "Drop file here or click to upload",
"uploadSuccess": "Upload Success",
"fileUploadError50": "File size exceeds 50M!",
"components.BomRelErp.materialCode":"Material Code",
"components.BomRelErp.materialName":"Material Name",
"components.BomRelErp.materialGroup":"Material Group",
"components.BomRelErp.createTime":"CreateTime",
"components.BomRelErp.materialGroupDesc":"Material Group Desc",
"components.BomRelErp.materialUnit":"Unit"
}
"components.BomRelErp.materialCode": "Material Code",
"components.BomRelErp.materialName": "Material Name",
"components.BomRelErp.materialGroup": "Material Group",
"components.BomRelErp.createTime": "CreateTime",
"components.BomRelErp.materialGroupDesc": "Material Group Desc",
"components.BomRelErp.materialUnit": "Unit",
"components.task-info.251031-0": "Task execution",
"components.task-info.251031-1": "Regarding the task-related information of users",
"components.task-list.251031-0": "Task list",
"components.task-list.251031-1": "The list of tasks that the user is performing",
"components.task-compare-chart.251031-0": "Task completion statistics",
"components.task-compare-chart.251031-1": "Make statistics on the completion of all tasks",
"components.task-trend-chart.251031-0": "Task trend chart",
"components.task-trend-chart.251031-1": ""
}

22
src/i18n/temp/zh-cn.json
View File

@@ -2269,10 +2269,18 @@
"dropFileHereOrClickToUpload": "在这里放下文件或点击上传",
"uploadSuccess": "上传成功",
"fileUploadError50": "上传文件大小不能超过50M!",
"components.BomRelErp.materialCode":"物料编码",
"components.BomRelErp.materialName":"物料名称",
"components.BomRelErp.materialGroup":"物料组",
"components.BomRelErp.createTime":"创建时间",
"components.BomRelErp.materialGroupDesc":"物料组描述",
"components.BomRelErp.materialUnit":"基本单位"
}
"components.BomRelErp.materialCode": "物料编码",
"components.BomRelErp.materialName": "物料名称",
"components.BomRelErp.materialGroup": "物料组",
"components.BomRelErp.createTime": "创建时间",
"components.BomRelErp.materialGroupDesc": "物料组描述",
"components.BomRelErp.materialUnit": "基本单位",
"components.task-info.251031-0": "任务执行",
"components.task-info.251031-1": "关于用户的任务相关情况，包括发起任务数量，执行任务数量，关注任务数量和所有任务数量",
"components.task-list.251031-0": "任务列表",
"components.task-list.251031-1": "用户正在执行任务的列表",
"components.task-compare-chart.251031-0": "任务完成情况统计",
"components.task-compare-chart.251031-1": "对于所有的任务完成的情况进行统计",
"components.task-trend-chart.251031-0": "任务完成趋势图",
"components.task-trend-chart.251031-1": ""
}

1
src/views/home/widgets/components/index.ts
View File

@@ -12,5 +12,6 @@ Object.keys(files).forEach((fileName) => {
resultComps[key] = files[fileName];
}
});
console.log(resultComps, 'resultComps');
export default markRaw(resultComps);

99
src/views/home/widgets/components/task-compare-chart.vue Normal file
View File

@@ -0,0 +1,99 @@
<script lang="ts">
export default {
title: 'components.task-compare-chart.251031-0', // '请求折线图'
icon: 'DocumentCopy',
description: 'components.task-compare-chart.251031-1', // '折线图示例'
};
</script>
<template>
<el-card class="relative h-full">
<div id="task-compare-chart" class="chart-content"></div>
</el-card>
</template>
<script setup lang="ts" name="task-compare-chart">
import * as echarts from 'echarts';
const option = ref<any>({})
const initChartFn = () => {
const chartDom = document.getElementById('task-compare-chart')!;
const myChart = echarts.init(chartDom);
option.value = {
title: {
text: '系统任务完成状态'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['未开始', '进行中', '已完成', '不合格']
},
yAxis: {
type: 'value'
},
series: [
{
data: [
{
value: 280,
itemStyle: {
color: 'grey'
}
},
{
value: 1650,
itemStyle: {
color: '#6d9cf8'
}
},
{
value: 2345,
itemStyle: {
color: '#53b997'
}
},
{
value: 415,
itemStyle: {
color: '#fd9595'
}
}
],
type: 'bar',
barWidth: 30
}
]
};
option && myChart.setOption(option.value);
}
onMounted(() => {
initChartFn()
})
</script>
<style scoped lang="scss">
.chart-content {
width: 100%;
min-height: 260px;
height: 100%;
}
</style>

154
src/views/home/widgets/components/task-info.vue Normal file
View File

@@ -0,0 +1,154 @@
<script lang="ts">
export default {
title: 'components.task-info.251031-0', // '任务管理'
icon: 'DocumentCopy',
description: 'components.task-info.251031-1', // '任务管理示例'
};
</script>
<template>
<el-card class="relative h-full">
<div class="task-content">
<div v-for="item in userTaskInfos" :key="item.num" class="task-item">
<div class="task-image" :style="{ backgroundColor: getImgBgColorFn(item.name) }">
<el-icon v-if="item.name === '发起任务'">
<DocumentAdd />
</el-icon>
<el-icon v-if="item.name === '执行任务'">
<DocumentChecked />
</el-icon>
<el-icon v-if="item.name === '关注任务'">
<StarFilled />
</el-icon>
<el-icon v-if="item.name === '所有任务'">
<Tickets />
</el-icon>
</div>
<div class="task-inner">
<div class="task-type">{{ item.name }}</div>
<div class="task-num">{{ item.num }}</div>
</div>
</div>
</div>
</el-card>
</template>
<script setup lang="ts" name="taskInfo">
const userTaskInfos = ref<any[]>([
])
const setTaskInfoFn = () => {
const num1 = Math.floor(Math.random() * 91) + 10;
const num2 = Math.floor(Math.random() * 91) + 10;
const num3 = Math.floor(Math.random() * 91) + 10;
const num4 = num1 + num2 + num3;
userTaskInfos.value = [{
name: '发起任务',
num: num1,
},
{
name: '执行任务',
num: num2,
},
{
name: '关注任务',
num: num3,
},
{
name: '所有任务',
num: num4,
},]
}
const getImgBgColorFn = (name: string) => {
let color: string = '';
if (name === '发起任务') {
color = '#6d9cf8'
} else if (name === '执行任务') {
color = '#53b997'
} else if (name === '关注任务') {
color = '#fd9595'
} else {
color = '#efd769'
}
return color
}
onMounted(() => {
setTaskInfoFn()
})
</script>
<style scoped lang="scss">
.task-content {
width: 100%;
height: 100%;
min-height: 100px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding: 5px;
.task-item {
width: calc(25% - 20px);
height: 80px;
display: flex;
align-items: center;
.task-image {
width: 60px;
height: 60px;
border-radius: 5px;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: #fff;
}
.task-inner {
width: calc(100% - 70px);
height: 100%;
.task-type,
.task-num {
width: 100%;
height: 50%;
display: flex;
align-items: center;
}
.task-type {
font-size: 22px;
// font-weight: 600;
}
.task-num {
font-size: 20px;
color: rgb(138, 136, 136);
}
}
}
}
</style>

212
src/views/home/widgets/components/task-list.vue Normal file
View File

@@ -0,0 +1,212 @@
<script lang="ts">
export default {
title: 'components.task-list.251031-0', // '任务管理'
icon: 'DocumentCopy',
description: 'components.task-list.251031-1', // '任务管理示例'
};
</script>
<template>
<el-card class="relative h-full">
<div class="table-content">
<div class="title-content"></div>
<div class="table-inner">
<TableRender style="width: 100%" row-key="id" border :data="tableData" :columns="tableColumns">
</TableRender>
<pagination v-bind="paginationInfo" @current-change="currentChangeHandle" @size-change="sizeChangeHandle" />
</div>
</div>
</el-card>
</template>
<script setup lang="ts" name="taskList">
import TableRender from '/@/components/TableRender/index.vue';
const tableData = ref<any[]>([
{
"id": 1,
"taskName": "搭建用户登录模块数据库表结构",
"taskStatus": "进行中",
"taskRisk": "低（技术方案已确认，无明确风险）",
"taskProgress": "70%（已完成核心字段设计，待优化索引）",
"beginTime": "2025-10-28",
"endTime": "2025-11-01",
"project": "XX用户管理系统开发",
"phase": "开发阶段"
},
{
"id": 2,
"taskName": "设计双11促销活动海报",
"taskStatus": "待开始",
"taskRisk": "中（需与运营确认活动主题，可能影响设计进度）",
"taskProgress": "0%",
"beginTime": "2025-11-02",
"endTime": "2025-11-05",
"project": "2025双11电商促销项目",
"phase": "策划设计阶段"
},
{
"id": 3,
"taskName": "测试APP订单支付异常场景",
"taskStatus": "已完成",
"taskRisk": "低（测试用例覆盖全面）",
"taskProgress": "100%（发现2个bug已修复）",
"beginTime": "2025-10-25",
"endTime": "2025-10-27",
"project": "XX电商APP V3.5迭代",
"phase": "测试阶段"
},
{
"id": 4,
"taskName": "整理Q3用户运营数据报告",
"taskStatus": "进行中",
"taskRisk": "低（数据已收集完毕，仅需汇总分析）",
"taskProgress": "80%（已完成数据清洗，待生成可视化图表）",
"beginTime": "2025-10-30",
"endTime": "2025-11-03",
"project": "Q3用户运营复盘项目",
"phase": "数据复盘阶段"
},
{
"id": 5,
"taskName": "开发商品分类筛选功能前端页面",
"taskStatus": "已暂停",
"taskRisk": "高（UI设计稿临时变更，需重新调整布局）",
"taskProgress": "40%（已完成基础框架，待对接新设计资源）",
"beginTime": "2025-10-26",
"endTime": "2025-11-01",
"project": "XX电商小程序优化",
"phase": "开发阶段"
},
{
"id": 6,
"taskName": "撰写新品上市推广软文",
"taskStatus": "待开始",
"taskRisk": "中（需等待产品部提供核心卖点，可能延期）",
"taskProgress": "0%",
"beginTime": "2025-11-04",
"endTime": "2025-11-06",
"project": "XX新品上市推广项目",
"phase": "内容准备阶段"
},
{
"id": 7,
"taskName": "修复用户反馈的APP闪退问题",
"taskStatus": "进行中",
"taskRisk": "低（已定位问题原因，正在编写修复代码）",
"taskProgress": "60%（修复方案已确定，待测试验证）",
"beginTime": "2025-10-29",
"endTime": "2025-11-02",
"project": "XXAPP紧急bug修复项目",
"phase": "紧急修复阶段"
},
{
"id": 8,
"taskName": "统计双11预热期用户点击量",
"taskStatus": "已完成",
"taskRisk": "低（数据统计工具正常，无异常）",
"taskProgress": "100%（数据已同步给运营团队）",
"beginTime": "2025-10-24",
"endTime": "2025-10-26",
"project": "2025双11电商促销项目",
"phase": "预热数据监控阶段"
},
{
"id": 9,
"taskName": "设计用户个人中心新版界面",
"taskStatus": "进行中",
"taskRisk": "中（用户调研反馈未完全收集，可能需调整设计）",
"taskProgress": "50%（已完成初稿设计，待收集反馈）",
"beginTime": "2025-10-31",
"endTime": "2025-11-04",
"project": "XX用户管理系统开发",
"phase": "UI设计阶段"
},
{
"id": 10,
"taskName": "编写APP版本更新说明文档",
"taskStatus": "待开始",
"taskRisk": "低（功能变更清单已确认，无不确定因素）",
"taskProgress": "0%",
"beginTime": "2025-11-05",
"endTime": "2025-11-07",
"project": "XX电商APP V3.5迭代",
"phase": "上线准备阶段"
},
{
"id": 11,
"taskName": "测试用户注册短信验证码功能",
"taskStatus": "进行中",
"taskRisk": "低（短信接口已调试完成，测试环境稳定）",
"taskProgress": "90%（已测试正常场景，待验证异常场景）",
"beginTime": "2025-10-27",
"endTime": "2025-10-29",
"project": "XX用户管理系统开发",
"phase": "测试阶段"
},
]);
const tableColumns = ref([
{
// t('hooks.requirement.09115201-21')
label: '任务名称',
prop: 'taskName',
},
{
label: '任务状态',
prop: 'taskStatus',
},
{
label: '风险情况',
prop: 'taskRisk',
},
{
label: '任务进度',
prop: 'taskProgress',
},
{
label: '开始时间',
prop: 'beginTime',
},
{
label: '计划完成时间',
prop: 'endTime',
},
{
label: '项目',
prop: 'project',
},
{
label: '阶段',
prop: 'phase',
},
])
const paginationInfo = ref({
size: 20,
total:15
})
const currentChangeHandle = (val:any)=>{
}
const sizeChangeHandle = (val:any)=>{
}
</script>
<style scoped lang="scss">
.table-content {
width: 100%;
height: 100%;
min-height: 500px;
}
</style>

81
src/views/home/widgets/components/task-trend-chart.vue Normal file
View File

@@ -0,0 +1,81 @@
<script lang="ts">
export default {
title: 'components.task-trend-chart.251031-0', // '请求折线图'
icon: 'DocumentCopy',
description: 'components.task-trend-chart.251031-1', // '折线图示例'
};
</script>
<template>
<el-card class="relative h-full">
<div id="task-trend-chart" class="chart-content"></div>
</el-card>
</template>
<script setup lang="ts" name="task-trend-chart">
import * as echarts from 'echarts';
const option = ref<any>({})
const initChartFn = () => {
const chartDom = document.getElementById('task-trend-chart')!;
const myChart = echarts.init(chartDom);
option.value = {
title: {
text: '用户任务统计'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
legend: {
data: ['分配任务', '完成任务',]
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',]
},
yAxis: {
type: 'value'
},
series: [
{
name: '分配任务',
type: 'line',
stack: 'Total1',
data: [120, 132, 101, 134, 90, 111, 121,86,65,55,40,23]
},
{
name: '完成任务',
type: 'line',
stack: 'Total2',
data: [15, 65, 100, 166, 135, 165, 155,100,134,121,85,78]
},
]
};
option && myChart.setOption(option.value);
}
onMounted(() => {
initChartFn()
})
</script>
<style scoped lang="scss">
.chart-content {
width: 100%;
min-height: 260px;
height: 100%;
}
</style>

12
src/views/home/widgets/index.vue
View File

@@ -2,22 +2,22 @@
基于 SCUI 重构适配 vite 加载和适配相关业务页面。https://gitee.com/lolicode/scui/tree/master/src/views/home
-->
<template>
<div :class="['widgets-home', customizing ? 'customizing' : '']" ref="main">
<div ref="main" :class="['widgets-home', customizing ? 'customizing' : '']">
<div class="widgets-content">
<TopNav />
<!-- <TopNav /> -->
<div class="widgets-top">
<div class="flex justify-end custom_btn">
<el-button v-if="customizing" type="primary" round @click="save">{{ $t('widgets.index.0910663-0') }}</el-button>
<el-button v-else type="primary" round @click="custom">{{ $t('Crontab.index.7634731-6') }}</el-button>
</div>
</div>
<div class="widgets" ref="widgets">
<div ref="widgets" class="widgets">
<div class="widgets-wrapper">
<div v-if="nowComponentList.length <= 0" class="no-widgets">
<el-empty :description="$t('widgets.index.0910663-2')" :image-size="280"></el-empty>
</div>
<el-row :gutter="16">
<el-col :gutter="16" v-for="(item, index) in grid.layout" v-bind:key="index" :md="item" :xs="24">
<el-col v-for="(item, index) in grid.layout" v-bind:key="index" :gutter="16" :md="item" :xs="24">
<draggable
v-model="grid.copmsList[index]"
animation="200"
@@ -161,6 +161,10 @@ const myCompsList = computed(() => {
'sys-log-line',
'demo-chart1',
'demo-chart2',
'task-info',
'task-list',
'task-compare-chart',
'task-trend-chart'
];
return allComponentList.value.filter((item) => !item.disabled && myGrid.includes(item.key));
});