<template>
|
<div class="dataStatistics">
|
<My-bread :list="[
|
`${$t('dataManage.dataManage')}`,
|
`${$t('dataManage.projectManage')}`,
|
]"></My-bread>
|
<el-divider />
|
<div class="contentBox ">
|
<div class="content_Left subpage_Div">
|
<el-tree
|
:data="treeData"
|
@node-click="handleNodeClick"
|
node-key="id"
|
ref="tree"
|
highlight-current
|
:props="defaultProps"
|
>
|
</el-tree>
|
</div>
|
<div class="content_Right subpage_Div">
|
<div>
|
<el-button
|
icon="el-icon-c-scale-to-original"
|
@click="setCountFlagChange(1)"
|
></el-button>
|
<el-button
|
icon="el-icon-pie-chart"
|
@click="setCountFlagChange(2)"
|
></el-button>
|
<el-divider />
|
</div>
|
<div
|
class="contentTable"
|
v-show="setCountFlag"
|
>
|
<el-table
|
:data="tableData"
|
style="width: 100%"
|
height="calc(100% - 50px)"
|
>
|
<el-table-column
|
prop="m1"
|
label="一级模块"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="m2"
|
label="二级模块"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="count"
|
label="统计数量"
|
>
|
</el-table-column>
|
</el-table>
|
<!-- <div class="pagination_box">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="listData.pageIndex"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="listData.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="listData.count"
|
>
|
</el-pagination>
|
</div> -->
|
</div>
|
<div
|
|
class="contentTable"
|
v-show="!setCountFlag"
|
>
|
<div id="countEchart" style = "width:100%;height:100%; ">
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts';
|
import MyBread from "../../components/MyBread.vue";
|
import { dataCount_selectByPageAndCount, dataCount_selectCountOperates } from '../../api/api.js'
|
export default {
|
name: "DataStatistics",
|
components: { MyBread },
|
data() {
|
return {
|
treeData: [{
|
id: 1,
|
label: '服务调用量统计',
|
value: 'countServices',
|
children: []
|
}, {
|
id: 2,
|
label: '数据量统计',
|
value: 'countSizes',
|
children: []
|
}, {
|
id: 3,
|
label: '用户流量统计',
|
value: 'countOperates',
|
children: []
|
}],
|
|
defaultProps: {
|
children: 'children',
|
label: 'label'
|
},
|
listData: {
|
pageIndex: 1,
|
pageSize: 10,
|
code: '',
|
name: '',
|
count: 0,
|
},
|
tableData: [],
|
queryData: null,
|
setCountFlag: true,
|
|
}
|
},
|
mounted() {
|
this.setStartDataCount();
|
},
|
methods: {
|
//Echart图表显示
|
showCountEchart(){
|
|
var chartDom = document.getElementById('countEchart');
|
var myChart = echarts.init(chartDom);
|
var option;
|
var dataAxis=[];
|
var data=[];
|
var yMax =0;
|
let dataShadow = [];
|
for(var i in this.tableData){
|
if( this.tableData[i].count >yMax){
|
yMax= this.tableData[i].count
|
}
|
data.push(this.tableData[i].count)
|
}
|
yMax = yMax+100;
|
for (let i = 0; i < data.length; i++) {
|
dataShadow.push(yMax);
|
}
|
option = {
|
|
xAxis: {
|
data: dataAxis,
|
axisLabel: {
|
color: '#000000'
|
},
|
|
axisLine: {
|
show: true
|
},
|
z: 10
|
},
|
yAxis: {
|
axisLine: {
|
show: false
|
},
|
axisTick: {
|
show: false
|
},
|
axisLabel: {
|
color: '#999'
|
}
|
},
|
dataZoom: [
|
{
|
type: 'inside'
|
}
|
],
|
series: [
|
{
|
type: 'bar',
|
showBackground: true,
|
itemStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: '#83bff6' },
|
{ offset: 0.5, color: '#188df0' },
|
{ offset: 1, color: '#188df0' }
|
])
|
},
|
emphasis: {
|
itemStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: '#2378f7' },
|
{ offset: 0.7, color: '#2378f7' },
|
{ offset: 1, color: '#83bff6' }
|
])
|
}
|
},
|
data: data
|
}
|
]
|
};
|
// Enable data zoom when user click bar.
|
const zoomSize = 6;
|
myChart.on('click', function (params) {
|
|
myChart.dispatchAction({
|
type: 'dataZoom',
|
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
|
endValue:
|
dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
|
});
|
});
|
|
},
|
//统计切换
|
setCountFlagChange(res) {
|
switch (res) {
|
case 1:
|
this.setCountFlag = true;
|
break;
|
case 2:
|
this.setCountFlag = false;
|
this.showCountEchart();
|
break;
|
}
|
},
|
//系统初始化
|
setStartDataCount() {
|
this.queryData = this.treeData[0];
|
this.$nextTick(() => {
|
this.$refs.tree.setCurrentKey(this.queryData.id) // 默认选中节点第一个
|
});
|
this.listData.code = this.queryData.value;
|
this.setQueryCountData();
|
},
|
//树点击事件
|
handleNodeClick(data, node, prop) {
|
this.setCountFlag = true;
|
this.queryData = data;
|
this.listData.code = data.value;
|
this.listData.pageIndex = 1;
|
this.listData.pageSize = 10;
|
this.setQueryCountData();
|
},
|
//查询统计信息
|
async setQueryCountData() {
|
const data = await dataCount_selectCountOperates();
|
if (data.code != 200) {
|
return
|
}
|
this.tableData = data.result;
|
this.listData.count = data.count
|
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.dataStatistics {
|
height: 98%;
|
width: 98%;
|
padding: 1%;
|
.contentBox {
|
height: calc(98% - 63px);
|
width: 100%;
|
display: flex;
|
justify-content: space-around;
|
.content_Left {
|
width: 18%;
|
height: calc(95% - 2px);
|
border-radius: 5px;
|
padding: 1%;
|
}
|
.content_Right {
|
width: 77%;
|
height: calc(95% - 2px);
|
border-radius: 5px;
|
padding: 1%;
|
.contentTable {
|
width: 100%;
|
height: 88%;
|
}
|
}
|
}
|
}
|
</style>
|
