<!-- StatisticsMain.vue -->
|
<template>
|
<div class="statistics-main">
|
<el-tabs v-model="activeTab" @tab-click="handleTabChange">
|
<el-tab-pane label="满意度随访统计" name="followup">
|
<followup-statistics v-if="activeTab === 'followup'" ref="followupRef" />
|
</el-tab-pane>
|
<el-tab-pane label="满意度明细统计" name="satisfaction">
|
<satisfaction-statistics v-if="activeTab === 'satisfaction'" ref="satisfactionRef" />
|
</el-tab-pane>
|
<el-tab-pane label="统计数据总览" name="dataOverview">
|
<data-overview v-if="activeTab === 'dataOverview'" />
|
</el-tab-pane>
|
<el-tab-pane label="各项统计表" name="chartsPanel">
|
<charts-panel v-if="activeTab === 'chartsPanel'" />
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</template>
|
|
<script>
|
import FollowupStatistics from "./components/FollowupStatistics.vue";
|
import SatisfactionStatistics from "./components/SatisfactionStatistics.vue";
|
import DataOverview from "./components/DataOverview.vue";
|
import ChartsPanel from "./components/ChartsPanel.vue";
|
|
export default {
|
name: "Satisfaction",
|
components: {
|
FollowupStatistics,
|
SatisfactionStatistics,
|
DataOverview,
|
ChartsPanel,
|
},
|
data() {
|
return {
|
activeTab: "followup",
|
};
|
},
|
methods: {
|
handleTabChange(tab) {
|
console.log("切换到:", tab.name);
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.statistics-main {
|
padding: 20px;
|
background: #fff;
|
min-height: calc(100vh - 84px);
|
|
::v-deep .el-tabs__header {
|
margin-bottom: 20px;
|
}
|
|
::v-deep .el-tabs__item {
|
font-size: 16px;
|
font-weight: 500;
|
}
|
|
::v-deep .el-tabs__nav-wrap::after {
|
height: 1px;
|
}
|
}
|
</style>
|
