补充图表
This commit is contained in:
parent
fb832df8e1
commit
68a9b29458
@ -29,16 +29,7 @@
|
|||||||
<a-row :gutter="20">
|
<a-row :gutter="20">
|
||||||
<!-- 构建状态图表 -->
|
<!-- 构建状态图表 -->
|
||||||
<a-col :xs="24" :md="16">
|
<a-col :xs="24" :md="16">
|
||||||
<a-card title="构建状态统计" :bordered="false" class="chart-card">
|
<BuildStatusChar />
|
||||||
<template #extra>
|
|
||||||
<a-select v-model="buildTimeRange" size="small" style="width: 120px">
|
|
||||||
<a-option value="week">最近一周</a-option>
|
|
||||||
<a-option value="month">最近一月</a-option>
|
|
||||||
<a-option value="quarter">最近三月</a-option>
|
|
||||||
</a-select>
|
|
||||||
</template>
|
|
||||||
<BuildStatusChar :data="buildData" />
|
|
||||||
</a-card>
|
|
||||||
</a-col>
|
</a-col>
|
||||||
|
|
||||||
<!-- 活动流水线 -->
|
<!-- 活动流水线 -->
|
||||||
@ -76,9 +67,7 @@
|
|||||||
<a-row :gutter="20">
|
<a-row :gutter="20">
|
||||||
<!-- 部署统计 -->
|
<!-- 部署统计 -->
|
||||||
<a-col :xs="24" :md="12">
|
<a-col :xs="24" :md="12">
|
||||||
<a-card title="部署统计" :bordered="false" class="chart-card">
|
<DeployChart />
|
||||||
<DeployChart :data="deployData" />
|
|
||||||
</a-card>
|
|
||||||
</a-col>
|
</a-col>
|
||||||
|
|
||||||
<!-- 最近活动 -->
|
<!-- 最近活动 -->
|
||||||
@ -117,11 +106,6 @@ import {
|
|||||||
import DeployChart from './components/DeployChart.vue';
|
import DeployChart from './components/DeployChart.vue';
|
||||||
import BuildStatusChar from './components/BuildStatusChar.vue';
|
import BuildStatusChar from './components/BuildStatusChar.vue';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 数据
|
|
||||||
const buildTimeRange = ref('week');
|
|
||||||
|
|
||||||
const metrics = ref([
|
const metrics = ref([
|
||||||
{
|
{
|
||||||
title: '成功构建',
|
title: '成功构建',
|
||||||
@ -189,7 +173,7 @@ const activePipelines = ref([
|
|||||||
{
|
{
|
||||||
id: '2354',
|
id: '2354',
|
||||||
name: 'mobile-app',
|
name: 'mobile-app',
|
||||||
status: 'error',
|
status: 'danger',
|
||||||
duration: '3m 28s',
|
duration: '3m 28s',
|
||||||
stage: '构建失败',
|
stage: '构建失败',
|
||||||
tagColor: 'red'
|
tagColor: 'red'
|
||||||
@ -204,9 +188,6 @@ const activePipelines = ref([
|
|||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const buildData = ref({/* 图表数据 */ });
|
|
||||||
const deployData = ref({/* 图表数据 */ });
|
|
||||||
|
|
||||||
const recentActivities = ref([
|
const recentActivities = ref([
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
|
|||||||
@ -1,9 +1,193 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="height: 300px">构建状态图表</div>
|
<a-card class="chart-card" title="构建状态统计" :bordered="false">
|
||||||
|
<template #extra>
|
||||||
|
<a-select v-model="buildTimeRange" size="small" style="width: 120px">
|
||||||
|
<a-option value="week">最近一周</a-option>
|
||||||
|
<a-option value="month">最近一月</a-option>
|
||||||
|
<a-option value="quarter">最近三月</a-option>
|
||||||
|
</a-select>
|
||||||
|
</template>
|
||||||
|
<div class="chart-wrapper">
|
||||||
|
<v-chart class="chart" :option="buildOption" autoresize />
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { computed, ref } from 'vue';
|
||||||
|
import { use } from 'echarts/core';
|
||||||
|
import { CanvasRenderer } from 'echarts/renderers';
|
||||||
|
import { BarChart } from 'echarts/charts';
|
||||||
|
import {
|
||||||
|
GridComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent,
|
||||||
|
TitleComponent
|
||||||
|
} from 'echarts/components';
|
||||||
|
import VChart from 'vue-echarts';
|
||||||
|
|
||||||
|
// 注册必要的组件
|
||||||
|
use([
|
||||||
|
CanvasRenderer,
|
||||||
|
BarChart,
|
||||||
|
GridComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent,
|
||||||
|
TitleComponent
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Arco Design 标准颜色值（亮色主题）
|
||||||
|
const colors = {
|
||||||
|
success: 'rgb(76,210,99)', // --green-4
|
||||||
|
danger: 'rgb(249,137,129)', // --red-4
|
||||||
|
warning: 'rgb(255,182,93)', // --orange-4
|
||||||
|
text1: '#1D2129', // --color-text-1
|
||||||
|
text2: '#4E5969', // --color-text-2
|
||||||
|
border: '#E5E6EB' // --color-border
|
||||||
|
};
|
||||||
|
|
||||||
|
const buildTimeRange = ref('week');
|
||||||
|
|
||||||
|
// 构建数据（根据时间范围动态生成）
|
||||||
|
const buildData = computed(() => {
|
||||||
|
const dataMap = {
|
||||||
|
week: {
|
||||||
|
dates: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||||
|
success: [32, 45, 38, 52, 47, 60, 42],
|
||||||
|
fail: [2, 3, 1, 0, 2, 1, 3],
|
||||||
|
running: [5, 3, 6, 4, 7, 2, 4]
|
||||||
|
},
|
||||||
|
month: {
|
||||||
|
dates: Array.from({ length: 30 }, (_, i) => `${i + 1}日`),
|
||||||
|
success: Array.from({ length: 30 }, () => Math.floor(Math.random() * 50) + 30),
|
||||||
|
fail: Array.from({ length: 30 }, () => Math.floor(Math.random() * 5)),
|
||||||
|
running: Array.from({ length: 30 }, () => Math.floor(Math.random() * 8) + 2)
|
||||||
|
},
|
||||||
|
quarter: {
|
||||||
|
dates: ['1月', '2月', '3月'],
|
||||||
|
success: [1420, 1560, 1890],
|
||||||
|
fail: [45, 32, 28],
|
||||||
|
running: [120, 95, 110]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return dataMap[buildTimeRange.value];
|
||||||
|
});
|
||||||
|
|
||||||
|
// 构建图表配置
|
||||||
|
const buildOption = computed(() => ({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['成功', '失败', '进行中'],
|
||||||
|
right: 10,
|
||||||
|
top: 0,
|
||||||
|
textStyle: {
|
||||||
|
color: colors.text1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: buildData.value.dates,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: colors.border
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: colors.text2,
|
||||||
|
interval: buildTimeRange.value === 'month' ? 4 : 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '构建次数',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: colors.text2
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: colors.border
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: colors.text2
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: colors.border
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '成功',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'total',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: buildData.value.success,
|
||||||
|
itemStyle: {
|
||||||
|
color: colors.success
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '失败',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'total',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: buildData.value.fail,
|
||||||
|
itemStyle: {
|
||||||
|
color: colors.danger
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '进行中',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'total',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: buildData.value.running,
|
||||||
|
itemStyle: {
|
||||||
|
color: colors.warning
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}));
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style scoped>
|
||||||
|
.chart-card {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-card :deep(.arco-card-body) {
|
||||||
|
padding: 0;
|
||||||
|
height: calc(100% - 56px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-wrapper {
|
||||||
|
padding: 16px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,9 +1,189 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="height: 300px">部署统计图表</div>
|
<a-card title="部署统计" :bordered="false" class="chart-card">
|
||||||
|
<v-chart class="chart" :option="deployOption" autoresize />
|
||||||
|
</a-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import { use } from 'echarts/core';
|
||||||
|
import { CanvasRenderer } from 'echarts/renderers';
|
||||||
|
import { BarChart, LineChart } from 'echarts/charts';
|
||||||
|
import {
|
||||||
|
GridComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent,
|
||||||
|
TitleComponent
|
||||||
|
} from 'echarts/components';
|
||||||
|
import VChart from 'vue-echarts';
|
||||||
|
|
||||||
|
// 注册必要的组件
|
||||||
|
use([
|
||||||
|
CanvasRenderer,
|
||||||
|
BarChart,
|
||||||
|
LineChart,
|
||||||
|
GridComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent,
|
||||||
|
TitleComponent
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Arco Design 颜色配置（使用您调整后的颜色）
|
||||||
|
const colors = {
|
||||||
|
primary: 'rgb(45,140,240)', // --blue-6
|
||||||
|
success: 'rgb(76,210,99)', // --green-4
|
||||||
|
danger: 'rgb(249,137,129)', // --red-4
|
||||||
|
warning: 'rgb(255,182,93)', // --orange-4
|
||||||
|
text1: '#1D2129', // --color-text-1
|
||||||
|
text2: '#4E5969', // --color-text-2
|
||||||
|
border: '#E5E6EB' // --color-border
|
||||||
|
};
|
||||||
|
|
||||||
|
// 部署数据
|
||||||
|
const deployData = ref({
|
||||||
|
environments: ['开发', '测试', '预发', '生产'],
|
||||||
|
counts: [120, 85, 45, 32],
|
||||||
|
successRate: [98.5, 95.2, 99.1, 99.8]
|
||||||
|
});
|
||||||
|
|
||||||
|
// 部署图表配置
|
||||||
|
const deployOption = computed(() => ({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
crossStyle: {
|
||||||
|
color: colors.border
|
||||||
|
}
|
||||||
|
},
|
||||||
|
formatter: params => {
|
||||||
|
const count = params[0].value;
|
||||||
|
const rate = params[1].value;
|
||||||
|
return `
|
||||||
|
<div style="font-weight:bold;margin-bottom:5px">${params[0].axisValue}</div>
|
||||||
|
<div>部署次数: <span style="color:${colors.primary}">${count}</span></div>
|
||||||
|
<div>成功率: <span style="color:${colors.success}">${rate}%</span></div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['部署次数', '成功率'],
|
||||||
|
right: 10,
|
||||||
|
top: 0,
|
||||||
|
textStyle: {
|
||||||
|
color: colors.text1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: deployData.value.environments,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: colors.border
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: colors.text2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '部署次数',
|
||||||
|
min: 0,
|
||||||
|
max: Math.max(...deployData.value.counts) * 1.2,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: colors.border
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: colors.text2
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: colors.border
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '成功率',
|
||||||
|
min: 90,
|
||||||
|
max: 100,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: colors.border
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: colors.text2,
|
||||||
|
formatter: '{value}%'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '部署次数',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 20,
|
||||||
|
data: deployData.value.counts,
|
||||||
|
itemStyle: {
|
||||||
|
color: colors.primary
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
color: colors.text1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '成功率',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 1,
|
||||||
|
data: deployData.value.successRate,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
itemStyle: {
|
||||||
|
color: colors.success
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
width: 3
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
formatter: '{c}%',
|
||||||
|
color: colors.text1,
|
||||||
|
position: 'top'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}));
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style scoped>
|
||||||
|
.chart-card {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-card :deep(.arco-card-body) {
|
||||||
|
padding: 0;
|
||||||
|
height: calc(100% - 56px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 300px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user