diff --git a/src/views/report/Overvoewnew.vue b/src/views/report/Overvoewnew.vue
index 402c4293..0479f700 100644
--- a/src/views/report/Overvoewnew.vue
+++ b/src/views/report/Overvoewnew.vue
@@ -364,6 +364,247 @@ export default {
name: "OvervoeW",
components: {OfficeSelect, PostSelectNew, draggable},
setup() {
+ // 组织树数据
+ const orgId = ref(null);
+
+ // 漏斗图数据
+ const funnelChart = ref(null);
+ let myFunnelChart = null;
+
+ // 柱状图数据
+ const chart = ref(null);
+ let myChart = null;
+
+ // 饼状图数据
+ const pieChart = ref(null);
+ let myPieChart = null;
+
+ onMounted(() => {
+ // 初始化漏斗图
+ myFunnelChart = echarts.init(funnelChart.value);
+ const funnelOption = {
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b}: {c} 人 ({d}%)'
+ },
+ legend: {
+ orient: 'horizontal',
+ bottom: 0,
+ data: ['参加人数', '学习人数', '完成人数']
+ },
+ series: [
+ {
+ name: '学员完成项目漏斗',
+ type: 'funnel',
+ left: '10%',
+ top: '50%',
+ bottom: '5%',
+ width: '80%',
+ min: 0,
+ max: 100,
+ minSize: '0%',
+ maxSize: '100%',
+ sort: 'descending',
+ gap: 2,
+ label: {
+ show: true,
+ position: 'inside',
+ formatter: '{b}: {c} 人'
+ },
+ labelLine: {
+ length: 10,
+ lineStyle: {
+ width: 1,
+ type: 'solid'
+ }
+ },
+ itemStyle: {
+ borderColor: '#fff',
+ borderWidth: 1
+ },
+ emphasis: {
+ label: {
+ fontSize: 14
+ }
+ },
+ data: [
+ {value: 100, name: '参加人数', itemStyle: {color: '#5470c6'}},
+ {value: 50, name: '学习人数', itemStyle: {color: '#91cc75'}},
+ {value: 20, name: '完成人数', itemStyle: {color: '#fac858'}}
+ ]
+ }
+ ]
+ };
+ myFunnelChart.setOption(funnelOption);
+
+ // 初始化柱状图
+ myChart = echarts.init(chart.value);
+
+ const option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {
+ data: ['学习率', '平均学习率', '整体完成率'],
+ bottom: 0
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '10%',
+ top: '15%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: ['0.8']
+ },
+ yAxis: {
+ type: 'value',
+ min: 0.4,
+ max: 0.9,
+ interval: 0.025,
+ axisLabel: {
+ formatter: '{value}'
+ }
+ },
+ series: [
+ {
+ name: '学习率',
+ type: 'bar',
+ data: [0.775],
+ itemStyle: {
+ color: '#5470c6'
+ },
+ label: {
+ show: true,
+ position: 'top',
+ formatter: '{c}'
+ }
+ },
+ {
+ name: '平均学习率',
+ type: 'bar',
+ data: [0.65],
+ itemStyle: {
+ color: '#91cc75'
+ },
+ label: {
+ show: true,
+ position: 'top',
+ formatter: '{c}'
+ }
+ },
+ {
+ name: '整体完成率',
+ type: 'bar',
+ data: [0.5],
+ itemStyle: {
+ color: '#fac858'
+ },
+ label: {
+ show: true,
+ position: 'top',
+ formatter: '{c}'
+ }
+ }
+ ]
+ };
+
+ myChart.setOption(option);
+
+ // 初始化环形图
+ myPieChart = echarts.init(pieChart.value);
+ const pieOption = {
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a}
{b}: {c} ({d}%)'
+ },
+ legend: {
+ orient: 'horizontal',
+ bottom: 0,
+ data: ['面授课程数', '在线课程数']
+ },
+ series: [
+ {
+ name: '项目概览',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ center: ['50%', '50%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: '18',
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ {value: 707.1, name: '面授课程数', itemStyle: {color: '#5470c6'}},
+ {value: 292.9, name: '在线课程数', itemStyle: {color: '#91cc75'}}
+ ]
+ }
+ ]
+ };
+
+ // 添加环形图中心文本
+ const centerText = {
+ name: '概览总数',
+ value: 1028,
+ itemStyle: {
+ normal: {
+ color: 'transparent',
+ label: {
+ show: true,
+ position: 'center',
+ formatter: function () {
+ return '{a|概览总数}\n{b|1,028}';
+ },
+ rich: {
+ a: {
+ color: '#333',
+ fontSize: 14,
+ lineHeight: 20
+ },
+ b: {
+ color: '#333',
+ fontSize: 16,
+ fontWeight: 'bold',
+ lineHeight: 20
+ }
+ }
+ }
+ }
+ }
+ };
+ pieOption.series[0].data.push(centerText);
+
+ myPieChart.setOption(pieOption);
+
+ // 窗口大小变化时重新调整图表大小
+ window.addEventListener('resize', () => {
+ myChart?.resize();
+ myPieChart?.resize();
+ myFunnelChart?.resize();
+ });
+ });
+
+ onUnmounted(() => {
+ // 组件销毁前移除事件监听器
+ window.removeEventListener('resize', () => {
+ });
+ });
+
const store = useStore();
const sysTypeOptions = store.state.content_type;
// const sysTypeOptions = fl;
@@ -2054,248 +2295,6 @@ export default {
return recursiveSearch(data, value, '');
}
-
- // 组织树数据
- const orgId = ref(null);
-
- // 漏斗图数据
- const funnelChart = ref(null);
- let myFunnelChart = null;
-
- // 柱状图数据
- const chart = ref(null);
- let myChart = null;
-
- // 饼状图数据
- const pieChart = ref(null);
- let myPieChart = null;
-
- onMounted(() => {
- // 初始化漏斗图
- myFunnelChart = echarts.init(funnelChart.value);
- const funnelOption = {
- tooltip: {
- trigger: 'item',
- formatter: '{b}: {c} 人 ({d}%)'
- },
- legend: {
- orient: 'horizontal',
- bottom: 0,
- data: ['参加人数', '学习人数', '完成人数']
- },
- series: [
- {
- name: '学员完成项目漏斗',
- type: 'funnel',
- left: '10%',
- top: '50%',
- bottom: '5%',
- width: '80%',
- min: 0,
- max: 100,
- minSize: '0%',
- maxSize: '100%',
- sort: 'descending',
- gap: 2,
- label: {
- show: true,
- position: 'inside',
- formatter: '{b}: {c} 人'
- },
- labelLine: {
- length: 10,
- lineStyle: {
- width: 1,
- type: 'solid'
- }
- },
- itemStyle: {
- borderColor: '#fff',
- borderWidth: 1
- },
- emphasis: {
- label: {
- fontSize: 14
- }
- },
- data: [
- {value: 100, name: '参加人数', itemStyle: {color: '#5470c6'}},
- {value: 50, name: '学习人数', itemStyle: {color: '#91cc75'}},
- {value: 20, name: '完成人数', itemStyle: {color: '#fac858'}}
- ]
- }
- ]
- };
- myFunnelChart.setOption(funnelOption);
-
- // 初始化柱状图
- myChart = echarts.init(chart.value);
-
- const option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- legend: {
- data: ['学习率', '平均学习率', '整体完成率'],
- bottom: 0
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '10%',
- top: '15%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- data: ['0.8']
- },
- yAxis: {
- type: 'value',
- min: 0.4,
- max: 0.9,
- interval: 0.025,
- axisLabel: {
- formatter: '{value}'
- }
- },
- series: [
- {
- name: '学习率',
- type: 'bar',
- data: [0.775],
- itemStyle: {
- color: '#5470c6'
- },
- label: {
- show: true,
- position: 'top',
- formatter: '{c}'
- }
- },
- {
- name: '平均学习率',
- type: 'bar',
- data: [0.65],
- itemStyle: {
- color: '#91cc75'
- },
- label: {
- show: true,
- position: 'top',
- formatter: '{c}'
- }
- },
- {
- name: '整体完成率',
- type: 'bar',
- data: [0.5],
- itemStyle: {
- color: '#fac858'
- },
- label: {
- show: true,
- position: 'top',
- formatter: '{c}'
- }
- }
- ]
- };
-
- myChart.setOption(option);
-
- // 初始化环形图
- myPieChart = echarts.init(pieChart.value);
- const pieOption = {
- tooltip: {
- trigger: 'item',
- formatter: '{a}
{b}: {c} ({d}%)'
- },
- legend: {
- orient: 'horizontal',
- bottom: 0,
- data: ['面授课程数', '在线课程数']
- },
- series: [
- {
- name: '项目概览',
- type: 'pie',
- radius: ['40%', '70%'],
- center: ['50%', '50%'],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: '18',
- fontWeight: 'bold'
- }
- },
- labelLine: {
- show: false
- },
- data: [
- {value: 707.1, name: '面授课程数', itemStyle: {color: '#5470c6'}},
- {value: 292.9, name: '在线课程数', itemStyle: {color: '#91cc75'}}
- ]
- }
- ]
- };
-
- // 添加环形图中心文本
- const centerText = {
- name: '概览总数',
- value: 1028,
- itemStyle: {
- normal: {
- color: 'transparent',
- label: {
- show: true,
- position: 'center',
- formatter: function () {
- return '{a|概览总数}\n{b|1,028}';
- },
- rich: {
- a: {
- color: '#333',
- fontSize: 14,
- lineHeight: 20
- },
- b: {
- color: '#333',
- fontSize: 16,
- fontWeight: 'bold',
- lineHeight: 20
- }
- }
- }
- }
- }
- };
- pieOption.series[0].data.push(centerText);
-
- myPieChart.setOption(pieOption);
-
- // 窗口大小变化时重新调整图表大小
- window.addEventListener('resize', () => {
- myChart?.resize();
- myPieChart?.resize();
- myFunnelChart?.resize();
- });
- });
-
- onUnmounted(() => {
- // 组件销毁前移除事件监听器
- window.removeEventListener('resize', () => {
- });
- });
-
return {
exportClickAll,
getTabData,
@@ -2570,4 +2569,117 @@ export default {
.ant-table-tbody > tr > td {
user-select: text !important;
}
+.stat-cards {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 20px;
+
+ .stat-card {
+ flex: 1;
+ margin-right: 15px;
+ border-radius: 4px;
+ overflow: hidden;
+ background: #fff;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+
+ :deep(.ant-card-head) {
+ padding: 16px 24px;
+ border-bottom: none;
+ }
+
+ :deep(.ant-card-body) {
+ padding: 16px 24px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
+}
+
+.charts-row {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 20px;
+ flex-wrap: wrap;
+
+ .chart-card {
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ border-radius: 4px;
+ overflow: hidden;
+ flex: 1;
+ min-width: 200px;
+ margin-right: 15px;
+ margin-bottom: 15px;
+ background: #fff;
+
+ :deep(.ant-card-head) {
+ padding: 16px 24px;
+ border-bottom: none;
+ }
+
+ .chart {
+ height: 200px;
+ }
+
+ .chart-content {
+ padding: 16px 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ margin-bottom: 16px;
+ }
+
+ .funnel-item {
+ display: flex;
+ justify-content: flex-start;
+ padding: 5px 0;
+ }
+
+ .funnel-label {
+ background: rgba(0, 0, 0, 0.05);
+ padding: 5px 10px;
+ border-radius: 4px;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ }
+
+ .legend {
+ display: flex;
+ justify-content: center;
+ gap: 20px;
+ padding: 16px;
+ margin-top: auto;
+ }
+
+ .legend-item {
+ font-size: 12px;
+ color: #666;
+ }
+
+ .center-text {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 20px;
+ font-weight: bold;
+ }
+ }
+
+ .tags-cloud {
+ padding: 16px 24px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+
+ .tag {
+ padding: 5px 10px;
+ background: #f0faff;
+ border-radius: 20px;
+ font-size: 14px;
+ cursor: pointer;
+ }
+ }
+}