238 lines
7.8 KiB
Vue
238 lines
7.8 KiB
Vue
<template>
|
||
<div class="container" style="padding-bottom: 50px; width: 100%; height: 100%" v-loading="loading" >
|
||
<p style="color: #333;">暂未开启，敬请等待</p>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
loading: false
|
||
};
|
||
},
|
||
components: {
|
||
|
||
},
|
||
async created() {
|
||
|
||
},
|
||
methods: {
|
||
handleRefresh() {},
|
||
async getEchartsData() {
|
||
await this.getCharts('year');
|
||
await this.getCharts('month');
|
||
this.$forceUpdate();
|
||
},
|
||
async getCharts(type) {
|
||
var optionsData = await this.getdata(type);
|
||
console.log('🚀 ~ getCharts ~ optionsData:', optionsData);
|
||
|
||
const chartBox = await this.$echarts.init(document.getElementById(`${type}chart`));
|
||
var option = {};
|
||
option = {
|
||
title: {
|
||
text: this.$t(`journalArticleCount.${type}Title`)
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
}
|
||
},
|
||
// legend: {
|
||
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
||
// },
|
||
toolbox: {
|
||
// feature: {
|
||
// // dataZoom: {
|
||
// // yAxisIndex: 'none'
|
||
// // },
|
||
// restore: {},
|
||
// }
|
||
},
|
||
dataZoom:
|
||
type == 'month'
|
||
? [
|
||
{
|
||
show: true,
|
||
realtime: true,
|
||
start: 1,
|
||
end: 100,
|
||
xAxisIndex: [0, 1]
|
||
},
|
||
{
|
||
type: 'inside',
|
||
realtime: true,
|
||
start: 1,
|
||
end: 100,
|
||
xAxisIndex: [0, 1]
|
||
}
|
||
]
|
||
: [],
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: type == 'month' ? '20%' : '4%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
axisLabel: {},
|
||
// axisLabel:
|
||
// type == 'year'
|
||
// ? {}
|
||
// : {
|
||
// interval: 0,
|
||
// rotate: 30
|
||
// },
|
||
boundaryGap: false,
|
||
data: optionsData.xAxisData
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value'
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: this.$t(`journalArticleCount.dataTitle`),
|
||
type: 'line',
|
||
stack: 'Total',
|
||
areaStyle: {
|
||
opacity: 0.8,
|
||
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: type == 'year' ? 'rgb(0, 221, 255)' : 'rgb(0, 102, 153)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: type == 'month' ? 'rgb(77, 119, 255)' : 'rgb(1, 191, 236)'
|
||
}
|
||
])
|
||
},
|
||
smooth: true,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: optionsData.seriesData
|
||
}
|
||
]
|
||
};
|
||
chartBox.clear();
|
||
chartBox.setOption(option, true);
|
||
// 根据页面大小自动响应图表大小
|
||
window.addEventListener('resize', function () {
|
||
chartBox.resize();
|
||
});
|
||
this.$forceUpdate();
|
||
},
|
||
|
||
// 获取文章列表数据
|
||
async getdata(type) {
|
||
var data = {};
|
||
var url = '';
|
||
if (type == 'month') {
|
||
url = '/api/Monitor/getArticleNumByMonth';
|
||
} else if (type == 'year') {
|
||
url = '/api/Monitor/getArticleNumByYear';
|
||
}
|
||
await this.$api
|
||
.post(url)
|
||
.then((res) => {
|
||
var that = this;
|
||
if (res.code == 0) {
|
||
console.log('🚀 ~ .then ~ res1998:' + type, res.data.articles);
|
||
var xAxisData = [];
|
||
var seriesData = [];
|
||
Object.entries(res.data.articles).forEach(([key, value]) => {
|
||
xAxisData.push(key);
|
||
seriesData.push(value);
|
||
|
||
data = { type: type, xAxisData: xAxisData, seriesData: seriesData };
|
||
});
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
});
|
||
return data;
|
||
},
|
||
// 获取文章列表数据
|
||
async getTableData() {
|
||
this.$nextTick(async () => {
|
||
await this.getTableDataInfo('year');
|
||
await this.getTableDataInfo('month');
|
||
});
|
||
},
|
||
async getTableDataInfo(type) {
|
||
var that = this;
|
||
var data = {};
|
||
var timeData = [];
|
||
var tableData = [];
|
||
var url = '';
|
||
if (type == 'month') {
|
||
url = '/api/Monitor/getArticleNumByMonthForJournal';
|
||
} else if (type == 'year') {
|
||
url = '/api/Monitor/getArticleNumByYearForJournal';
|
||
}
|
||
await this.$api
|
||
.post(url)
|
||
.then(async (res) => {
|
||
var that = this;
|
||
if (res.code == 0) {
|
||
for (let i in res.data.data) {
|
||
tableData.push({ ...res.data.data[i].journal, ...res.data.data[i].articles });
|
||
}
|
||
|
||
for (let i in res.data.data[0].articles) {
|
||
timeData.push(i);
|
||
}
|
||
|
||
data = { tableData: tableData, timeData: timeData };
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log(err, '989898');
|
||
this.loading = false;
|
||
});
|
||
console.log(data, type, '98999');
|
||
if (type == 'year') {
|
||
this.$refs.yearTableData.getTableInfo(type, data);
|
||
} else if (type == 'month') {
|
||
this.$refs.monthTableData.getTableInfo(type, data);
|
||
setTimeout(() => {
|
||
that.loading = false;
|
||
}, 50);
|
||
}
|
||
|
||
return data;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.container {
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
.refresh {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 0px;
|
||
z-index: 10;
|
||
}
|
||
</style>
|