|
@@ -11,18 +11,20 @@
|
|
|
<div class="stat-summary-item">
|
|
|
<h4>当前考试中人数</h4>
|
|
|
<p>
|
|
|
- <animate-number :value="summary.examingCount"></animate-number>
|
|
|
+ <animate-number :value="summary.examCount"></animate-number>
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="stat-summary-item">
|
|
|
<h4>累计考试科次</h4>
|
|
|
<p>
|
|
|
- <animate-number :value="summary.stdExamCount"></animate-number>
|
|
|
+ <animate-number :value="summary.examRecordCount"></animate-number>
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="stat-summary-item">
|
|
|
<h4>累计服务考生</h4>
|
|
|
- <p><animate-number :value="summary.studentCount"></animate-number></p>
|
|
|
+ <p>
|
|
|
+ <animate-number :value="summary.examStudentCount"></animate-number>
|
|
|
+ </p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -30,9 +32,17 @@
|
|
|
<div class="data-stat-table">
|
|
|
<div class="data-stat-table-title">机构考生分布</div>
|
|
|
<el-table :data="tableData" stripe>
|
|
|
- <el-table-column label="机构名称"></el-table-column>
|
|
|
- <el-table-column width="80" label="在线人数"></el-table-column>
|
|
|
- <el-table-column width="80" label="在考人数"></el-table-column>
|
|
|
+ <el-table-column label="机构名称" prop="name"></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ width="80"
|
|
|
+ label="在线人数"
|
|
|
+ prop="onlineCount"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ width="80"
|
|
|
+ label="在考人数"
|
|
|
+ prop="examCount"
|
|
|
+ ></el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
<div class="data-stat-chart">
|
|
@@ -48,84 +58,127 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {
|
|
|
- statSummary,
|
|
|
- statOrgStudent,
|
|
|
- statAreaStudent,
|
|
|
-} from "../../../api/system";
|
|
|
+import timeMixin from "@/mixins/timeMixin";
|
|
|
+import { sysStatisticsData } from "../../../api/system";
|
|
|
+import VueCharts from "@/plugins/VueCharts";
|
|
|
|
|
|
export default {
|
|
|
name: "DataStatistics",
|
|
|
+ components: { VueCharts },
|
|
|
+ mixins: [timeMixin],
|
|
|
data() {
|
|
|
return {
|
|
|
summary: {
|
|
|
onlineCount: 0,
|
|
|
- examingCount: 0,
|
|
|
- stdExamCount: 0,
|
|
|
- studentCount: 0,
|
|
|
+ examCount: 0,
|
|
|
+ examRecordCount: 0,
|
|
|
+ examStudentCount: 0,
|
|
|
},
|
|
|
tableData: [],
|
|
|
areaChartOption: null,
|
|
|
- // setTs
|
|
|
- setTsMap: {
|
|
|
- summary: [],
|
|
|
- areaMap: [],
|
|
|
- },
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
- // this.initData();
|
|
|
+ this.getData();
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
this.clearSetTs();
|
|
|
},
|
|
|
methods: {
|
|
|
- addSetTime(typeName, action, time = 1 * 1000) {
|
|
|
- this.setTsMap[typeName].push(setTimeout(action, time));
|
|
|
- },
|
|
|
- clearSetTs(typeName) {
|
|
|
- if (typeName) {
|
|
|
- if (!this.setTsMap[typeName] || !this.setTsMap[typeName].length) return;
|
|
|
- this.setTsMap[typeName].forEach((t) => clearTimeout(t));
|
|
|
- this.setTsMap[typeName] = [];
|
|
|
- return;
|
|
|
- }
|
|
|
- Object.keys(this.setTsMap).forEach((k) => {
|
|
|
- this.setTsMap[k].forEach((t) => clearTimeout(t));
|
|
|
- this.setTsMap[k] = [];
|
|
|
- });
|
|
|
- },
|
|
|
- initData() {
|
|
|
- this.intervalSummary();
|
|
|
- this.intervalStudent();
|
|
|
- },
|
|
|
- async getSummary() {
|
|
|
- const res = await statSummary();
|
|
|
- this.summary = res.data;
|
|
|
- },
|
|
|
- async getStatOrgStudent() {
|
|
|
- const res = await statOrgStudent();
|
|
|
- this.tableData = res.data;
|
|
|
- },
|
|
|
- async getStatAreaStudent() {
|
|
|
- const res = await statAreaStudent();
|
|
|
- // todo:
|
|
|
- this.areaChartOption = res.data;
|
|
|
- },
|
|
|
- async intervalSummary() {
|
|
|
- const typeName = "summary";
|
|
|
- this.clearSetTs(typeName);
|
|
|
+ async getData() {
|
|
|
+ this.clearSetTs();
|
|
|
+
|
|
|
+ const res = await sysStatisticsData();
|
|
|
+ const data = res.data.data || {};
|
|
|
+
|
|
|
+ this.summary = {
|
|
|
+ onlineCount: data.onlineCount,
|
|
|
+ examCount: data.examCount,
|
|
|
+ examRecordCount: data.examRecordCount,
|
|
|
+ examStudentCount: data.examStudentCount,
|
|
|
+ };
|
|
|
|
|
|
- await this.getSummary();
|
|
|
- this.addSetTime(typeName, this.intervalSummary, 5 * 1000);
|
|
|
+ this.tableData = data.orgDataCountBeanList || [];
|
|
|
+ this.areaChartOption = this.getInviMapOption(data.mapDataCountBeanList);
|
|
|
+
|
|
|
+ this.addSetTime(this.getData, 10 * 1000);
|
|
|
},
|
|
|
- async intervalStudent() {
|
|
|
- const typeName = "areaMap";
|
|
|
- this.clearSetTs(typeName);
|
|
|
+ getInviMapOption(dataList) {
|
|
|
+ // if (!dataList.length) return;
|
|
|
+
|
|
|
+ let countData = dataList.map((item) => {
|
|
|
+ return {
|
|
|
+ name: item.province,
|
|
|
+ ...item,
|
|
|
+ itemStyle: {
|
|
|
+ areaColor: "rgba(45, 153, 255, 0.5)",
|
|
|
+ },
|
|
|
+ };
|
|
|
+ });
|
|
|
+ // 隐藏南海诸岛
|
|
|
+ countData.push({
|
|
|
+ name: "南海诸岛",
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 0,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 0,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
|
|
|
- await this.getStatOrgStudent();
|
|
|
- await this.getStatAreaStudent();
|
|
|
- this.addSetTime(typeName, this.intervalStudent, 10 * 1000);
|
|
|
+ return {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ formatter(params) {
|
|
|
+ if (!params.data) return;
|
|
|
+ const { name, onlineCount } = params.data;
|
|
|
+ return `<span style="color:#2D99FF">${name}</span><br />在线人数:${onlineCount}`;
|
|
|
+ },
|
|
|
+ backgroundColor: "rgba(63,67,87,0.9)",
|
|
|
+ padding: 10,
|
|
|
+ triggerOn: "click",
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: "#E1E6EF",
|
|
|
+ fontWeight: 500,
|
|
|
+ lineHeight: 18,
|
|
|
+ rich: {
|
|
|
+ n: {
|
|
|
+ color: "#2D99FF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "数量",
|
|
|
+ type: "map",
|
|
|
+ mapType: "china",
|
|
|
+ layoutCenter: ["50%", "50%"],
|
|
|
+ layoutSize: "100%",
|
|
|
+ data: countData,
|
|
|
+ itemStyle: {
|
|
|
+ areaColor: "rgba(45, 153, 255, 0.2)",
|
|
|
+ borderColor: "#2D99FF",
|
|
|
+ borderWidth: 1,
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ areaColor: "rgba(22, 206, 185, 1)",
|
|
|
+ borderColor: "rgba(45, 153, 255, 0.3)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
},
|
|
|
},
|
|
|
};
|