<template>
<div class="home-container">
<el-tabs @tab-click="handleTabChange">
<el-tab-pane label="总览">
<div class="tab-content">
<div class="stats-row">
<el-col :span="6">
<el-card class="stat-card danger">
<div class="stat-title">当前通话数</div>
<div class="stat-value">0</div>
<div class="stat-sub">
较昨日: <span style="color: #f56c6c">0</span>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="stat-card">
<div class="stat-title">今日通话数</div>
<div class="stat-value">0</div>
<div class="stat-sub">
较昨日: <span style="color: #67c23a">0</span>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="stat-card">
<div class="stat-title">历史通话数</div>
<div class="stat-value">0</div>
<div class="stat-sub">
较昨日: <span style="color: #67c23a">0</span>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="stat-card">
<div class="stat-title">当前线路数</div>
<div class="stat-value">0</div>
<div class="stat-sub">
较昨日: <span style="color: #67c23a">0</span>
</div>
</el-card>
</el-col>
</div>
<div class="table-card">
<el-table :data="summaryTable" border>
<el-table-column prop="label" label="指标"></el-table-column>
<el-table-column prop="value" label="数值"></el-table-column>
</el-table>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="省份统计">
<div class="tab-content">
<el-table :data="provinceTable" border>
<el-table-column prop="province" label="省份"></el-table-column>
<el-table-column
prop="currentCall"
label="当前通话数"
></el-table-column>
<el-table-column
prop="todayCall"
label="今日通话数"
></el-table-column>
<el-table-column
prop="historyCall"
label="历史通话数"
></el-table-column>
<el-table-column
prop="currentLine"
label="当前线路数"
></el-table-column>
<el-table-column
prop="circuit"
label="电路线路数"
></el-table-column>
<el-table-column
prop="network"
label="网络线路数"
></el-table-column>
<el-table-column
prop="todayLine"
label="今日线路数"
></el-table-column>
<el-table-column
prop="todayCircuit"
label="今日电路线路数"
></el-table-column>
<el-table-column
prop="todayNetwork"
label="今日网络线路数"
></el-table-column>
<el-table-column
prop="historyLine"
label="历史线路数"
></el-table-column>
<el-table-column
prop="historyCircuit"
label="历史电路线路数"
></el-table-column>
<el-table-column
prop="historyNetwork"
label="历史网络线路数"
></el-table-column>
</el-table>
</div>
</el-tab-pane>
<el-tab-pane label="趋势分析">
<div class="tab-content">
<div class="chart-placeholder">
<div class="mock-chart">
<div class="chart-line-container">
<div class="chart-line通话"></div>
<div class="chart-line线路"></div>
</div>
<div class="chart-legend">
<span style="color: teal">通话数</span> |
<span style="color: purple">线路数</span>
</div>
<div class="chart-buttons">
<el-button size="mini">近7天</el-button>
<el-button size="mini">近30天</el-button>
</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { userlist, getsuperes } from "@/utils/https.js";
export default {
name: "HomeView",
data() {
return {
summaryTable: [],
provinceTable: [
{
province: "江苏",
currentCall: 0,
todayCall: 0,
historyCall: 0,
currentLine: 0,
circuit: 0,
network: 0,
todayLine: 0,
todayCircuit: 0,
todayNetwork: 0,
historyLine: 0,
historyCircuit: 0,
historyNetwork: 0,
},
{
province: "上海",
currentCall: 0,
todayCall: 0,
historyCall: 0,
currentLine: 0,
circuit: 0,
network: 0,
todayLine: 0,
todayCircuit: 0,
todayNetwork: 0,
historyLine: 0,
historyCircuit: 0,
historyNetwork: 0,
},
{
province: "浙江",
currentCall: 0,
todayCall: 0,
historyCall: 0,
currentLine: 0,
circuit: 0,
network: 0,
todayLine: 0,
todayCircuit: 0,
todayNetwork: 0,
historyLine: 0,
historyCircuit: 0,
historyNetwork: 0,
},
{
province: "安徽",
currentCall: 0,
todayCall: 0,
historyCall: 0,
currentLine: 0,
circuit: 0,
network: 0,
todayLine: 0,
todayCircuit: 0,
todayNetwork: 0,
historyLine: 0,
historyCircuit: 0,
historyNetwork: 0,
},
],
superEnterpriseList: [], // 新增的超级企业列表数据
};
},
mounted() {
this.loadHomeData();
this.loadSuperEnterpriseList(); // 调用获取超级企业列表的方法
},
methods: {
loadHomeData() {
userlist()
.then(data => {
this.summaryTable = data.summary || [];
this.provinceTable = data.provinces || this.provinceTable;
})
.catch(error => {
console.error("加载首页数据失败:", error);
this.$message.error("加载数据失败");
});
},
loadSuperEnterpriseList() {
getsuperes()
.then(response => {
this.superEnterpriseList = response.data || [];
console.log('超级企业列表:', this.superEnterpriseList);
})
.catch(error => {
console.error('获取超级企业列表失败:', error);
this.$message.error('获取超级企业列表失败');
});
},
handleTabChange(tab) {
console.log("切换到:", tab.name);
},
handleSizeChange(val) {
this.pageSize = val;
},
handleCurrentChange(val) {
this.currentPage = val;
},
},
};
</script>
<style scoped>
:root {
--main-bg-color: #f5f7fa;
--tab-bg-color: #ffffff;
--stat-border-color: #f56c6c;
}
.home-container {
padding: 20px;
background: var(--main-bg-color);
min-height: calc(100vh - 64px);
}
.tab-wrapper {
background: var(--tab-bg-color);
border: 1px solid #ebeef5;
border-radius: 4px;
}
.tab-content {
padding: 20px;
border-top: none;
}
.stats-row {
margin-top: 10px;
}
.stat-card {
height: 160px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.stat-card.danger {
border-left: 4px solid var(--stat-border-color);
}
.stat-title {
font-size: 16px;
font-weight: 500;
margin-bottom: 10px;
}
.stat-value {
font-size: 24px;
color: #303133;
margin-bottom: 10px;
}
.stat-sub {
font-size: 14px;
color: #909399;
}
.table-card {
padding: 20px;
}
.chart-placeholder {
text-align: center;
padding: 40px 0;
}
.mock-chart {
position: relative;
height: 300px;
width: 100%;
}
.chart-line-container {
position: absolute;
bottom: 40px;
left: 10%;
width: 80%;
height: 200px;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
}
.chart-line通话 {
position: absolute;
bottom: 0;
width: 100%;
height: 30%;
background: linear-gradient(to top, rgba(0, 128, 128, 0.2) 0%, teal 100%);
clip-path: polygon(
0% 100%,
5% 80%,
10% 60%,
15% 70%,
20% 50%,
25% 60%,
30% 40%,
35% 50%,
40% 30%,
45% 40%,
50% 20%,
55% 30%,
60% 10%,
65% 20%,
70% 0%,
75% 10%,
80% 30%,
85% 20%,
90% 40%,
95% 30%,
100% 50%,
100% 100%
);
}
.chart-line线路 {
position: absolute;
bottom: 0;
width: 100%;
height: 60%;
background: linear-gradient(to top, rgba(128, 0, 128, 0.2) 0%, purple 100%);
clip-path: polygon(
0% 100%,
5% 90%,
10% 70%,
15% 80%,
20% 60%,
25% 70%,
30% 50%,
35% 60%,
40% 40%,
45% 50%,
50% 30%,
55% 40%,
60% 20%,
65% 30%,
70% 10%,
75% 20%,
80% 40%,
85% 30%,
90% 50%,
95% 40%,
100% 60%,
100% 100%
);
}
.chart-legend {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.chart-buttons {
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
}
.server-select,
.province-select {
width: 160px;
margin-bottom: 20px;
}
</style>纠错
最新发布