修改期刊计数总量
This commit is contained in:
262
src/components/page/journalArticleCount.vue
Normal file
262
src/components/page/journalArticleCount.vue
Normal file
@@ -0,0 +1,262 @@
|
||||
<template>
|
||||
<div class="container" style="padding-bottom: 50px; width: 100%; height: auto">
|
||||
<div style="width: 100%; height: 38vh; margin-bottom: 2vh; position: relative">
|
||||
<i class="el-icon-refresh refresh" @click="getCharts('year')"></i>
|
||||
<div id="yearchart" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
<div style="width: 100%; height: 44vh; position: relative; margin-bottom: 80px">
|
||||
<i class="el-icon-refresh refresh" @click="getCharts('month')"></i>
|
||||
<div id="monthchart" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
<div style="width: 100%; height: auto; margin-bottom: 50px">
|
||||
<jAtableY type="year" ref="yearTableData"></jAtableY>
|
||||
</div>
|
||||
<div style="width: 100%; height: auto; margin-bottom: 50px !important">
|
||||
<jAtableM type="month" ref="monthTableData"></jAtableM>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const jAtableY = () => import('@/components/common/journalArticleTable');
|
||||
const jAtableM = () => import('@/components/common/journalArticleTable');
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: null
|
||||
};
|
||||
},
|
||||
components: {
|
||||
jAtableY,
|
||||
jAtableM
|
||||
},
|
||||
async created() {
|
||||
this.loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
await this.getCharts('year');
|
||||
await this.getCharts('month');
|
||||
await this.getTableData();
|
||||
|
||||
this.$forceUpdate();
|
||||
},
|
||||
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);
|
||||
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.close();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user