提取下面内容的所有中文<template>
<a-card>
<a-row type="flex" justify="space-between" style="margin-bottom: 10px;">
<a-radio-group v-model:value="detailType">
<a-radio-button value="contrast">{{ $t('community_contribution.contrast') }}</a-radio-button>
<a-radio-button value="trend">{{ $t('community_contribution.trend') }}</a-radio-button>
</a-radio-group>
<
span>
<
span class="tool-style">
<
span>仓名：</
span>
<a-select style="width: 200px;">
</a-select>
</
span>
<
span v-if="detailType === 'contrast'" class="tool-style">
<
span>{{ $t('community_contribution.dimensions') }}：</
span>
<a-radio-group v-model:value="orgType">
<a-radio-button value="year_on_year">
<
span>{{ $t('community_contribution.year_on_year') }}</
span>
<a-select style="width: 120px; margin-left: 2px;" size="small" :bordered="false" placeholder="请选择年份">
</a-select>
</a-radio-button>
<a-radio-button value="month_on_month">{{ $t('community_contribution.month_on_month') }}</a-radio-button>
</a-radio-group>
</
span>
<
span class="tool-style">
<
span v-if="detailType === 'contrast'">区间：</
span>
<
span v-else>{{ $t('community_contribution.creation_date') }}：</
span>
<a-radio-group v-model:value="timeType">
<a-radio-button value="week">{{ $t('global.week') }}</a-radio-button>
<a-radio-button value="month">{{ $t('global.month') }}</a-radio-button>
<a-radio-button value="year">{{ $t('global.year') }}</a-radio-button>
</a-radio-group>
</
span>
<
span v-if="detailType === 'contrast'">
<
span>基线日期：</
span>
<a-date-picker
v-model:value="timeBase"
></a-date-picker>
</
span>
<
span v-else>
<a-range-picker
v-model:value="timeRange"
></a-range-picker>
</
span>
</
span>
</a-row>
<div v-if="detailType === 'contrast'">
<a-card size="small" title="项目活跃度度量" :head-style="{ backgroundColor: '#f2f7ff'}">
<a-row>
<a-col v-for="item in pieData.active_metric" :key="item" :
span="8">
<pieChart :id="item.id" :legend-names="item.legend_name" :title="item.title" :value="item.value"></pieChart>
</a-col>
</a-row>
</a-card>
<a-card style="margin-top: 10px;" size="small" title="项目影响力度量" :head-style="{ backgroundColor: '#f2f7ff'}">
<a-row>
<a-col v-for="item in pieData.impact_measurement" :key="item" :
span="8">
<pieChart :id="item.id" :legend-names="item.legend_name" :title="item.title" :value="item.value"></pieChart>
</a-col>
</a-row>
</a-card>
</div>
<div v-if="detailType === 'trend'">
<a-card
v-for="item in lineData"
:key="item"
size="small"
:title="item.title"
:head-style="{ backgroundColor: '#f2f7ff'}"
style="margin-top: 10px;">
<lineChart :id="item.id" :title="item.title" :value="item.value"></lineChart>
</a-card>
</div>
</a-card>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import i18n from '@/locales';
import pieChart from './components/pieChart.vue';
import lineChart from './components/lineChart.vue';
const detailType = ref<any>('contrast');
const orgType = ref<any>('year_on_year');
const timeType = ref<any>('week');
const timeRange = ref<any>([]);
const timeBase = ref<any>('');
const pieRef = ref<any>(null);
const LEGEND_NAME = ['本月', '上月'];
const pieData = ref<any>({
active_metric: [
{
id: 'chart_requests_merged',
title: '合入PR数',
legend_name: LEGEND_NAME,
value: [],
},
{
id: 'chart_issues',
title: 'Issue数',
legend_name: LEGEND_NAME,
value: [],
},
{
id: 'chart_comments',
title: '评审意见数',
legend_name: LEGEND_NAME,
value: [],
},
],
impact_measurement: [
{
id: 'chart_watch',
title: '仓Watch数',
legend_name: LEGEND_NAME,
value: [],
},
{
id: 'chart_star',
title: '仓Star数',
legend_name: LEGEND_NAME,
value: [],
},
{
id: 'chart_fork',
title: '仓Fork数',
legend_name: LEGEND_NAME,
value: [],
},
]
});
const lineData = ref<any>([
{
id: 'chart_pr_trend',
title: '合入PR数趋势',
value: {
xData: [],
yData: [],
},
},
{
id: 'chart_issue_trend',
title: 'Issue数趋势',
value: {
xData: [],
yData: [],
},
},
{
id: 'chart_comment_trend',
title: '评审意见数趋势',
value: {
xData: [],
yData: [],
},
},
]);
</script>
<style lang="less">
.tool-style {
margin-right: 20px;
}
</style>
本文介绍了HTML中<span>和<div>两个标签的基本特性和使用场景。解释了<span>作为行内元素可用于划分同一行的不同区域，而<div>作为块级元素则常用于包含如段落、标题等不同类型的内容，并自动换行。
扫一扫
8243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
