|
|
|
|
@ -67,14 +67,56 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 学员统计卡片 -->
|
|
|
|
|
<div class="stats-container">
|
|
|
|
|
<div class="stats-card" :class="stat.cardClass" v-for="(stat, index) in studentStats" :key="index">
|
|
|
|
|
<i class="el-icon-download stats-download" @click.stop="exportStat(stat)"></i>
|
|
|
|
|
<div class="stats-icon">
|
|
|
|
|
<i :class="stat.icon"></i>
|
|
|
|
|
<div class="stats-categories-container">
|
|
|
|
|
<!-- 全宽分类 -->
|
|
|
|
|
<div
|
|
|
|
|
class="stats-category stats-category-full"
|
|
|
|
|
v-for="(category, categoryIndex) in fullCategories"
|
|
|
|
|
:key="'full-' + categoryIndex">
|
|
|
|
|
<h4 class="category-title">{{ category.title }}</h4>
|
|
|
|
|
<div
|
|
|
|
|
class="stats-container"
|
|
|
|
|
:class="{
|
|
|
|
|
'stats-container-full': category.layout !== 'half',
|
|
|
|
|
'stats-container-half': category.layout === 'half'
|
|
|
|
|
}">
|
|
|
|
|
<div class="stats-card" :class="stat.cardClass" v-for="(stat, index) in category.stats" :key="stat.key || index">
|
|
|
|
|
<i class="el-icon-download stats-download" @click.stop="exportStat(stat)"></i>
|
|
|
|
|
<div class="stats-icon">
|
|
|
|
|
<i :class="stat.icon"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<h3>{{ stat.value }}</h3>
|
|
|
|
|
<p>{{ stat.label }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 半宽分类,每行两个 -->
|
|
|
|
|
<div
|
|
|
|
|
class="stats-half-row"
|
|
|
|
|
v-for="(row, rowIndex) in halfCategoryRows"
|
|
|
|
|
:key="'half-row-' + rowIndex">
|
|
|
|
|
<div
|
|
|
|
|
class="stats-category stats-category-half"
|
|
|
|
|
v-for="(category, categoryIndex) in row"
|
|
|
|
|
:key="'half-' + rowIndex + '-' + categoryIndex">
|
|
|
|
|
<h4 class="category-title">{{ category.title }}</h4>
|
|
|
|
|
<div
|
|
|
|
|
class="stats-container"
|
|
|
|
|
:class="{
|
|
|
|
|
'stats-container-full': category.layout !== 'half',
|
|
|
|
|
'stats-container-half': category.layout === 'half'
|
|
|
|
|
}">
|
|
|
|
|
<div class="stats-card" :class="stat.cardClass" v-for="(stat, index) in category.stats" :key="stat.key || index">
|
|
|
|
|
<i class="el-icon-download stats-download" @click.stop="exportStat(stat)"></i>
|
|
|
|
|
<div class="stats-icon">
|
|
|
|
|
<i :class="stat.icon"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<h3>{{ stat.value }}</h3>
|
|
|
|
|
<p>{{ stat.label }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<h3>{{ stat.value }}</h3>
|
|
|
|
|
<p>{{ stat.label }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@ -98,19 +140,19 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="detail-table">
|
|
|
|
|
<el-table :data="courseDetailData" :span-method="objectSpanMethod" :header-cell-style="headerCellStyle">
|
|
|
|
|
<el-table
|
|
|
|
|
:data="courseDetailData"
|
|
|
|
|
:span-method="objectSpanMethod"
|
|
|
|
|
:header-cell-style="headerCellStyle"
|
|
|
|
|
show-summary
|
|
|
|
|
:summary-method="getCourseDetailSummary">
|
|
|
|
|
<el-table-column prop="courseSystem" label="课程体系" width="200" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="totalPeople" label="培养人数(未去重)" width="200" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="uniquePeople" label="培养人数(课程体系内已去重)" width="280" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="courseIndex" label="期数" width="120" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="courseName" label="开课" min-width="200"></el-table-column>
|
|
|
|
|
<el-table-column prop="coursePeople" label="课程培养人数" width="150" align="center"></el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div class="table-summary">
|
|
|
|
|
<span>累计:</span>
|
|
|
|
|
<span>培养人数(未去重):{{ courseDetailSummary.totalPeople }}</span>
|
|
|
|
|
<span>培养人数(课程体系内已去重):{{ courseDetailSummary.uniquePeople }}</span>
|
|
|
|
|
<span>课程培养人数:{{ courseDetailSummary.coursePeople }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
@ -132,16 +174,16 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="detail-table">
|
|
|
|
|
<el-table :data="regionData" style="width: 100%" :header-cell-style="headerCellStyle">
|
|
|
|
|
<el-table
|
|
|
|
|
:data="regionData"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
:header-cell-style="headerCellStyle"
|
|
|
|
|
show-summary
|
|
|
|
|
:summary-method="getRegionSummary">
|
|
|
|
|
<el-table-column prop="region" label="区域" width="200" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="totalPeople" label="培养人数(未去重)" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="uniquePeople" label="培养人数(已去重)" align="center"></el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div class="table-summary">
|
|
|
|
|
<span>累计:</span>
|
|
|
|
|
<span>培养人数(未去重):{{ regionSummary.totalPeople }}</span>
|
|
|
|
|
<span>培养人数(已去重):{{ regionSummary.uniquePeople }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
@ -160,6 +202,19 @@ export default {
|
|
|
|
|
name: 'Statistics',
|
|
|
|
|
mixins: [formMixin],
|
|
|
|
|
components: {},
|
|
|
|
|
computed: {
|
|
|
|
|
fullCategories() {
|
|
|
|
|
return this.statsCategories.filter(category => category.layout !== 'half')
|
|
|
|
|
},
|
|
|
|
|
halfCategoryRows() {
|
|
|
|
|
const halves = this.statsCategories.filter(category => category.layout === 'half')
|
|
|
|
|
const rows = []
|
|
|
|
|
for (let i = 0; i < halves.length; i += 2) {
|
|
|
|
|
rows.push(halves.slice(i, i + 2))
|
|
|
|
|
}
|
|
|
|
|
return rows
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
chartLoading: false,
|
|
|
|
|
@ -172,69 +227,134 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
courseOptions: [],
|
|
|
|
|
courseTypeList: [], // 课程体系列表
|
|
|
|
|
studentStats: [
|
|
|
|
|
{
|
|
|
|
|
key: 'course_signs_invested',
|
|
|
|
|
icon: 'el-icon-user-solid',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '被投企业数',
|
|
|
|
|
cardClass: 'student-card-1'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'course_signs_pass',
|
|
|
|
|
icon: 'el-icon-s-check',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '培养人数(未去重)',
|
|
|
|
|
cardClass: 'student-card-2'
|
|
|
|
|
},
|
|
|
|
|
statsCategories: [
|
|
|
|
|
{
|
|
|
|
|
key: 'course_signs_pass_unique',
|
|
|
|
|
icon: 'el-icon-s-custom',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '培养人数(已去重)',
|
|
|
|
|
cardClass: 'student-card-3'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'course_total',
|
|
|
|
|
icon: 'el-icon-date',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '开课场次',
|
|
|
|
|
cardClass: 'student-card-4'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'course_day_total',
|
|
|
|
|
icon: 'el-icon-c-scale-to-original',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '开课天数',
|
|
|
|
|
cardClass: 'student-card-5'
|
|
|
|
|
layout: 'full',
|
|
|
|
|
title: '培养数据',
|
|
|
|
|
stats: [
|
|
|
|
|
{
|
|
|
|
|
key: 'course_signs_pass',
|
|
|
|
|
icon: 'el-icon-s-check',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '培养人次(未去重)',
|
|
|
|
|
cardClass: 'student-card-1'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'course_signs_pass_unique',
|
|
|
|
|
icon: 'el-icon-s-custom',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '培养人数(已去重)',
|
|
|
|
|
cardClass: 'student-card-2'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'ganbu_total',
|
|
|
|
|
icon: 'el-icon-s-opportunity',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '跟班学员数',
|
|
|
|
|
cardClass: 'student-card-3'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'company_ganbu_total',
|
|
|
|
|
icon: 'el-icon-s-check',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '全市干部参与数',
|
|
|
|
|
cardClass: 'student-card-4'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'company_join_total',
|
|
|
|
|
icon: 'el-icon-s-promotion',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '元禾员工参与数',
|
|
|
|
|
cardClass: 'student-card-5'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'company_market_total',
|
|
|
|
|
icon: 'el-icon-office-building',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '上市公司数',
|
|
|
|
|
cardClass: 'student-card-1'
|
|
|
|
|
layout: 'half',
|
|
|
|
|
title: '开课数据',
|
|
|
|
|
stats: [
|
|
|
|
|
{
|
|
|
|
|
key: 'course_total',
|
|
|
|
|
icon: 'el-icon-date',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '开课场次',
|
|
|
|
|
cardClass: 'student-card-1'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'course_day_total',
|
|
|
|
|
icon: 'el-icon-c-scale-to-original',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '开课天数',
|
|
|
|
|
cardClass: 'student-card-2'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'company_market_year_total',
|
|
|
|
|
icon: 'el-icon-s-finance',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '今年上市公司数',
|
|
|
|
|
cardClass: 'student-card-2'
|
|
|
|
|
layout: 'half',
|
|
|
|
|
title: '上市数据',
|
|
|
|
|
stats: [
|
|
|
|
|
{
|
|
|
|
|
key: 'company_market_total',
|
|
|
|
|
icon: 'el-icon-office-building',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '上市公司数',
|
|
|
|
|
cardClass: 'student-card-1'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'company_market_after_enrollment_total',
|
|
|
|
|
icon: 'el-icon-s-marketing',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '入学后上市公司数',
|
|
|
|
|
cardClass: 'student-card-2'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'company_market_year_total',
|
|
|
|
|
icon: 'el-icon-s-finance',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '今年上市公司数',
|
|
|
|
|
cardClass: 'student-card-3'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'company_market_after_enrollment_total',
|
|
|
|
|
icon: 'el-icon-s-marketing',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '入学后上市公司数',
|
|
|
|
|
cardClass: 'student-card-3'
|
|
|
|
|
layout: 'half',
|
|
|
|
|
title: '被投数据',
|
|
|
|
|
stats: [
|
|
|
|
|
{
|
|
|
|
|
key: 'course_signs_invested',
|
|
|
|
|
icon: 'el-icon-user-solid',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '被投企业数',
|
|
|
|
|
cardClass: 'student-card-1'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'ganbu_total',
|
|
|
|
|
icon: 'el-icon-s-opportunity',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '跟班学员数',
|
|
|
|
|
cardClass: 'student-card-4'
|
|
|
|
|
layout: 'half',
|
|
|
|
|
title: '三个全覆盖数据',
|
|
|
|
|
stats: [
|
|
|
|
|
{
|
|
|
|
|
key: 'cover_head_total',
|
|
|
|
|
icon: 'el-icon-s-shop',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '苏州头部科技企业数',
|
|
|
|
|
cardClass: 'student-card-1'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'cover_rencai_total',
|
|
|
|
|
icon: 'el-icon-s-custom',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '苏州高层次科技人才数',
|
|
|
|
|
cardClass: 'student-card-2'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'cover_stock_total',
|
|
|
|
|
icon: 'el-icon-s-opportunity',
|
|
|
|
|
value: '0',
|
|
|
|
|
label: '苏州重点上市公司数',
|
|
|
|
|
cardClass: 'student-card-3'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
courseDetailData: [],
|
|
|
|
|
@ -685,12 +805,14 @@ export default {
|
|
|
|
|
// 根据API返回的数据更新统计卡片
|
|
|
|
|
if (data && data.list) {
|
|
|
|
|
const statsData = data.list
|
|
|
|
|
this.studentStats.forEach(stat => {
|
|
|
|
|
if (stat.key && statsData.hasOwnProperty(stat.key)) {
|
|
|
|
|
stat.value = statsData[stat.key] ?? '0'
|
|
|
|
|
} else {
|
|
|
|
|
stat.value = '0'
|
|
|
|
|
}
|
|
|
|
|
this.statsCategories.forEach(category => {
|
|
|
|
|
category.stats.forEach(stat => {
|
|
|
|
|
if (stat.key && Object.prototype.hasOwnProperty.call(statsData, stat.key)) {
|
|
|
|
|
stat.value = statsData[stat.key] ?? '0'
|
|
|
|
|
} else {
|
|
|
|
|
stat.value = '0'
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -728,6 +850,7 @@ export default {
|
|
|
|
|
courseSystem: group.courseSystem,
|
|
|
|
|
totalPeople: group.totalPeople,
|
|
|
|
|
uniquePeople: group.uniquePeople,
|
|
|
|
|
courseIndex: index + 1,
|
|
|
|
|
courseName: course.courseName,
|
|
|
|
|
coursePeople: course.coursePeople,
|
|
|
|
|
isFirstRow: index === 0 // 标记是否为该课程体系的第一行
|
|
|
|
|
@ -762,7 +885,7 @@ export default {
|
|
|
|
|
this.regionSummary = { totalPeople: 0, uniquePeople: 0 }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
console.log('统计数据已更新:', this.studentStats)
|
|
|
|
|
console.log('统计数据已更新:', this.statsCategories)
|
|
|
|
|
console.log('课程分类明细数据已更新:', this.courseDetailData)
|
|
|
|
|
console.log('区域明细数据已更新:', this.regionData)
|
|
|
|
|
},
|
|
|
|
|
@ -840,6 +963,55 @@ export default {
|
|
|
|
|
fontSize: '0.99rem',
|
|
|
|
|
textAlign: 'center'
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 课程分类明细表格合计方法
|
|
|
|
|
getCourseDetailSummary({ columns, data }) {
|
|
|
|
|
const sums = []
|
|
|
|
|
columns.forEach((column, index) => {
|
|
|
|
|
if (index === 0) {
|
|
|
|
|
// 第一列显示"累计"
|
|
|
|
|
sums[index] = '累计'
|
|
|
|
|
} else if (index === 1) {
|
|
|
|
|
// 培养人数(未去重)
|
|
|
|
|
sums[index] = this.courseDetailSummary.totalPeople
|
|
|
|
|
} else if (index === 2) {
|
|
|
|
|
// 培养人数(课程体系内已去重)
|
|
|
|
|
sums[index] = this.courseDetailSummary.uniquePeople
|
|
|
|
|
} else if (index === 3) {
|
|
|
|
|
// 期数:统计总行数
|
|
|
|
|
sums[index] = data.length
|
|
|
|
|
} else if (index === 4) {
|
|
|
|
|
// 开课列不显示合计
|
|
|
|
|
sums[index] = ''
|
|
|
|
|
} else if (index === 5) {
|
|
|
|
|
// 课程培养人数
|
|
|
|
|
sums[index] = this.courseDetailSummary.coursePeople
|
|
|
|
|
} else {
|
|
|
|
|
sums[index] = ''
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
return sums
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 区域明细表格合计方法
|
|
|
|
|
getRegionSummary({ columns, data }) {
|
|
|
|
|
const sums = []
|
|
|
|
|
columns.forEach((column, index) => {
|
|
|
|
|
if (index === 0) {
|
|
|
|
|
// 第一列显示"累计"
|
|
|
|
|
sums[index] = '累计'
|
|
|
|
|
} else if (index === 1) {
|
|
|
|
|
// 培养人数(未去重)
|
|
|
|
|
sums[index] = this.regionSummary.totalPeople
|
|
|
|
|
} else if (index === 2) {
|
|
|
|
|
// 培养人数(已去重)
|
|
|
|
|
sums[index] = this.regionSummary.uniquePeople
|
|
|
|
|
} else {
|
|
|
|
|
sums[index] = ''
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
return sums
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -947,31 +1119,69 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stats-container {
|
|
|
|
|
.stats-categories-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 20px;
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stats-category-full {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stats-half-row {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 20px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stats-category-half {
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.category-title {
|
|
|
|
|
color: #0f4c75;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-size: 1.2rem;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
border-left: 4px solid #00a8ff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stats-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
gap: 15px;
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stats-container-full {
|
|
|
|
|
width: 100%;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stats-container-half {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stats-card {
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
padding: 28px 20px;
|
|
|
|
|
border-radius: 15px;
|
|
|
|
|
padding: 20px 15px;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
|
|
|
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
|
|
|
|
transition: all 0.4s ease;
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-align: center;
|
|
|
|
|
height: 200px;
|
|
|
|
|
height: 150px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex: 0 0 calc(20% - 16px);
|
|
|
|
|
min-width: calc(20% - 16px);
|
|
|
|
|
flex: 1 1 calc(20% - 15px);
|
|
|
|
|
min-width: 180px;
|
|
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
|
content: '';
|
|
|
|
|
@ -989,28 +1199,28 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h3 {
|
|
|
|
|
font-size: 2.24rem;
|
|
|
|
|
font-size: 1.6rem;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
font-size: 1.08rem;
|
|
|
|
|
font-size: 0.85rem;
|
|
|
|
|
opacity: 0.95;
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
margin-bottom:15px;
|
|
|
|
|
line-height: 1.3;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stats-download {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 12px;
|
|
|
|
|
right: 12px;
|
|
|
|
|
font-size: 1.1rem;
|
|
|
|
|
top: 8px;
|
|
|
|
|
right: 8px;
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
color: rgba(255, 255, 255, 0.8);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: color 0.2s ease;
|
|
|
|
|
@ -1022,9 +1232,9 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stats-icon {
|
|
|
|
|
font-size: 2.8rem;
|
|
|
|
|
font-size: 2rem;
|
|
|
|
|
opacity: 0.9;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
@ -1141,6 +1351,21 @@ export default {
|
|
|
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 合计行样式 */
|
|
|
|
|
.detail-table .el-table .el-table__footer-wrapper {
|
|
|
|
|
.el-table__footer {
|
|
|
|
|
background: rgba(15, 76, 117, 0.05) !important;
|
|
|
|
|
|
|
|
|
|
td {
|
|
|
|
|
background: rgba(15, 76, 117, 0.05) !important;
|
|
|
|
|
color: #0f4c75 !important;
|
|
|
|
|
font-weight: 600 !important;
|
|
|
|
|
border-top: 1px solid rgba(15, 76, 117, 0.12) !important;
|
|
|
|
|
border-bottom: 1px solid rgba(15, 76, 117, 0.12) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table-summary {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
@ -1195,6 +1420,12 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 响应式布局 */
|
|
|
|
|
@media (max-width: 1024px) {
|
|
|
|
|
.stats-half-row {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 767.98px) {
|
|
|
|
|
.stats-container {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
@ -1202,7 +1433,8 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stats-card {
|
|
|
|
|
width: 100%;
|
|
|
|
|
width: 100% !important;
|
|
|
|
|
max-width: 100% !important;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|