666 lines
15 KiB
Vue
666 lines
15 KiB
Vue
<template>
|
||
<div>
|
||
<div class="crumbs">
|
||
<el-breadcrumb separator="/">
|
||
<el-breadcrumb-item>
|
||
<i class="el-icon-data-analysis"></i> {{ $route.meta.title }}
|
||
</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
</div>
|
||
<div class="container" v-loading="loading" element-loading-text="Loading..." element-loading-spinner="el-icon-loading"
|
||
element-loading-background="rgba(0, 0, 0, 0.8)">
|
||
<div class="handle-box">
|
||
<el-select v-model="query.journal_id" filterable placeholder="Please select a Journal" value-key="groupID" style="width: 300px;"
|
||
@change="chan_id">
|
||
<el-option v-for="item in df_jour" :label="item.title" :key="item.journal_id" :value="item.journal_id"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<!-- 国家内外(饼状图) -->
|
||
<div class="schart-box">
|
||
<div id="myChart1" class="schart" style="width: 500px;margin: 0 auto;"></div>
|
||
</div>
|
||
<!-- 领域（学科）(柱状图) -->
|
||
<div class="schart-box">
|
||
<div id="myChart2" class="schart" style="height: 400px;"></div>
|
||
</div>
|
||
<!-- 关键词(柱状图) -->
|
||
<div class="schart-box">
|
||
<div id="myChart3" class="schart" style="height: 400px;"></div>
|
||
</div>
|
||
<!-- 关键词(折线图) -->
|
||
<div class="schart-box">
|
||
<div id="myChart4" class="schart" style=""></div>
|
||
</div>
|
||
<!-- 文章类型(饼状图) -->
|
||
<div class="schart-box">
|
||
<div id="myChart5" class="schart" style="width: 800px;margin: 0 auto;"></div>
|
||
</div>
|
||
<!-- 阅读量下载量(表格) -->
|
||
<h4 class="ta_tit">阅读量下载统计</h4>
|
||
<el-table :data="tab_le6" border class="table" ref="multipleTable" header-cell-class-name="table-header" empty-text="New messages (0)">
|
||
<el-table-column prop="title" label="期刊" width="420px"></el-table-column>
|
||
<el-table-column prop="read_num" label="阅读量"></el-table-column>
|
||
<el-table-column prop="cite_num" label="引用数"></el-table-column>
|
||
</el-table>
|
||
<!-- 标题吸引力程度(表格) -->
|
||
<h4 class="ta_tit">标题吸引力程度统计</h4>
|
||
<el-table :data="tab_le7_1" border class="table" ref="multipleTable" header-cell-class-name="table-header" empty-text="New messages (0)">
|
||
<el-table-column prop="title" label="期刊" width="420px"></el-table-column>
|
||
<el-table-column prop="cite_num" label="字数"></el-table-column>
|
||
</el-table>
|
||
<el-table :data="tab_le7_2" border class="table" ref="multipleTable" header-cell-class-name="table-header" empty-text="New messages (0)">
|
||
<el-table-column prop="title" label="期刊" width="420px"></el-table-column>
|
||
<el-table-column prop="cite_num" label="字符"></el-table-column>
|
||
</el-table>
|
||
<!-- 摘要吸引力程度(表格) -->
|
||
<h4 class="ta_tit">摘要吸引力程度统计</h4>
|
||
<el-table :data="tab_le8_1" border class="table" ref="multipleTable" header-cell-class-name="table-header" empty-text="New messages (0)">
|
||
<el-table-column prop="title" label="期刊" width="420px"></el-table-column>
|
||
<el-table-column prop="cite_num" label="字数"></el-table-column>
|
||
</el-table>
|
||
<el-table :data="tab_le8_2" border class="table" ref="multipleTable" header-cell-class-name="table-header" empty-text="New messages (0)">
|
||
<el-table-column prop="title" label="期刊" width="420px"></el-table-column>
|
||
<el-table-column prop="cite_num" label="字符"></el-table-column>
|
||
</el-table>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
user_id: localStorage.getItem('U_id'),
|
||
user_cap: localStorage.getItem('U_role'),
|
||
loading: false,
|
||
df_jour: [],
|
||
tableData: [],
|
||
query: {
|
||
journal_id: ''
|
||
},
|
||
myChart1: '',
|
||
Ech_1: [{
|
||
value: 0,
|
||
name: '国内'
|
||
},
|
||
{
|
||
value: 0,
|
||
name: '国外'
|
||
}
|
||
],
|
||
Ech_2: [],
|
||
Ech_3: [],
|
||
Ech_4_1: [],
|
||
Ech_4_2: [],
|
||
Ech_5: [],
|
||
tab_le6: [],
|
||
tab_le7_1: [],
|
||
tab_le7_2: [],
|
||
tab_le8_1: [],
|
||
tab_le8_2: []
|
||
};
|
||
},
|
||
watch: {
|
||
// df_jour: function(val) {
|
||
// var _this = this;
|
||
// _this.$nextTick(function() {
|
||
// this.drawLine1();
|
||
// this.drawLine2();
|
||
// this.drawLine3();
|
||
// this.drawLine4();
|
||
// this.drawLine5();
|
||
// });
|
||
// },
|
||
},
|
||
mounted() {
|
||
// this.drawLine();
|
||
},
|
||
created() {
|
||
this.getTable();
|
||
},
|
||
computed: {
|
||
opened() {
|
||
return this.df_jour.map((i) => {
|
||
return i.journal_id;
|
||
});
|
||
}
|
||
},
|
||
methods: {
|
||
// 获取数据
|
||
getTable() {
|
||
if (this.user_cap.includes('chief')) {
|
||
this.$api
|
||
.post('api/Chief/getJournalsFromChief', {
|
||
'user_id': this.user_id
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.df_jour = res.data.journals;
|
||
this.query.journal_id = this.df_jour[0].journal_id
|
||
this.getData();
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
} else {
|
||
this.$api
|
||
.post('api/Chief/getJournalsByEditor', {
|
||
'user_id': this.user_id
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.df_jour = res.data.journals;
|
||
this.query.journal_id = this.df_jour[0].journal_id
|
||
this.getData();
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
}
|
||
},
|
||
|
||
// 下拉分类搜索
|
||
chan_id(event) {
|
||
this.$echarts.init(document.getElementById('myChart1')).clear()
|
||
this.$echarts.init(document.getElementById('myChart2')).clear()
|
||
this.$echarts.init(document.getElementById('myChart3')).clear()
|
||
this.$echarts.init(document.getElementById('myChart4')).clear()
|
||
this.$echarts.init(document.getElementById('myChart5')).clear()
|
||
this.getData();
|
||
},
|
||
|
||
getData() {
|
||
this.loading = true;
|
||
this.$api
|
||
.post('journalsuper/Publish/getCiteDate', this.query)
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.tableData = res.data;
|
||
this.drawLine1();
|
||
this.drawLine2();
|
||
this.drawLine3();
|
||
this.drawLine4();
|
||
this.drawLine5();
|
||
this.dataTable6();
|
||
this.dataTable7();
|
||
this.dataTable8();
|
||
this.loading = false;
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
},
|
||
|
||
//图表初始化
|
||
drawLine1() {
|
||
this.Ech_1 = [{
|
||
value: 0,
|
||
name: '国内'
|
||
},
|
||
{
|
||
value: 0,
|
||
name: '国外'
|
||
}
|
||
];
|
||
let data_num = this.tableData.country
|
||
this.Ech_1[0].value = data_num.n
|
||
this.Ech_1[1].value = data_num.w
|
||
|
||
// 基于准备好的dom，初始化echarts实例
|
||
this.myChart1 = this.$echarts.init(document.getElementById('myChart1'))
|
||
|
||
// 绘制折现图
|
||
this.myChart1.setOption({
|
||
title: {
|
||
text: '国内外统计',
|
||
x: '49%',
|
||
y: 'top',
|
||
textAlign: 'center'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
bottom: '1%',
|
||
// type: 'scroll',
|
||
orient: 'vertical',
|
||
right: 10,
|
||
top: 20,
|
||
},
|
||
color: ['#FD9E06', '#768BFF'],
|
||
series: [{
|
||
name: '来源',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 10,
|
||
borderColor: '#fff',
|
||
borderWidth: 2
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: '40',
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: this.Ech_1
|
||
}]
|
||
}, true);
|
||
},
|
||
|
||
drawLine2() {
|
||
this.Ech_2 = [];
|
||
let data_num = this.tableData.topic
|
||
for (let i in data_num) {
|
||
this.Ech_2.push([i, data_num[i]])
|
||
}
|
||
|
||
// 基于准备好的dom，初始化echarts实例
|
||
this.myChart2 = this.$echarts.init(document.getElementById('myChart2'))
|
||
|
||
// 绘制折现图
|
||
this.myChart2.setOption({
|
||
title: {
|
||
text: '领域统计',
|
||
x: '49%',
|
||
y: 'top',
|
||
textAlign: 'center'
|
||
},
|
||
grid: {
|
||
bottom: '30%',
|
||
},
|
||
dataset: [{
|
||
dimensions: ['name', 'value'],
|
||
source: this.Ech_2
|
||
}, {
|
||
transform: {
|
||
type: 'sort',
|
||
config: {
|
||
dimension: 'value',
|
||
order: 'desc'
|
||
}
|
||
}
|
||
}],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: function(params) {
|
||
return params[0].value[0] + "<br>" + params[0].value[1];
|
||
},
|
||
textStyle: {
|
||
align: 'left'
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 30
|
||
},
|
||
},
|
||
yAxis: {},
|
||
series: {
|
||
type: 'bar',
|
||
itemStyle: {
|
||
normal: {
|
||
color: function(params) {
|
||
var colorList = ['#5470c6',
|
||
'#91cc75',
|
||
'#fac858',
|
||
'#ee6666',
|
||
'#73c0de',
|
||
'#3ba272',
|
||
'#fc8452',
|
||
'#9a60b4',
|
||
'#ea7ccc',
|
||
'#45C2E0',
|
||
'#C1EBDD',
|
||
'#FFC851',
|
||
'#768BFF',
|
||
'#12ED93',
|
||
'#1869A0',
|
||
'#FF9393',
|
||
'#4B7CF3',
|
||
'#dd3ee5',
|
||
'#fe8104',
|
||
'#01C2F9',
|
||
'#F4CB29',
|
||
'#FD9E06',
|
||
'#4962FC',
|
||
'#d223e7',
|
||
'#f376e0',
|
||
'#3F77FE',
|
||
'#02CBF9',
|
||
'#18D070',
|
||
'#01C2F9', '#5470c6',
|
||
'#91cc75',
|
||
'#fac858',
|
||
'#ee6666',
|
||
'#73c0de',
|
||
'#3ba272',
|
||
'#fc8452',
|
||
'#9a60b4',
|
||
'#ea7ccc',
|
||
'#45C2E0',
|
||
'#C1EBDD',
|
||
'#FFC851'
|
||
];
|
||
return colorList[params.dataIndex]
|
||
}
|
||
|
||
}
|
||
},
|
||
encode: {
|
||
x: 'name',
|
||
y: 'value'
|
||
},
|
||
datasetIndex: 1
|
||
}
|
||
}, true);
|
||
},
|
||
|
||
drawLine3() {
|
||
this.Ech_3 = [];
|
||
let data_num = this.tableData.gjz
|
||
for (let i in data_num) {
|
||
if (data_num[i] < 6) {
|
||
delete(data_num[i]);
|
||
if (i == 0) {
|
||
i = 0
|
||
} else {
|
||
i = i - 1
|
||
}
|
||
}
|
||
}
|
||
|
||
for (let i in data_num) {
|
||
this.Ech_3.push([i, data_num[i]])
|
||
}
|
||
|
||
// 基于准备好的dom，初始化echarts实例
|
||
this.myChart3 = this.$echarts.init(document.getElementById('myChart3'))
|
||
|
||
// 绘制折现图
|
||
this.myChart3.setOption({
|
||
title: {
|
||
text: '关键字统计',
|
||
x: '49%',
|
||
y: 'top',
|
||
textAlign: 'center'
|
||
},
|
||
grid: {
|
||
bottom: '30%',
|
||
},
|
||
dataset: [{
|
||
dimensions: ['name', 'value'],
|
||
source: this.Ech_3
|
||
}, {
|
||
transform: {
|
||
type: 'sort',
|
||
config: {
|
||
dimension: 'value',
|
||
order: 'desc'
|
||
}
|
||
}
|
||
}],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: function(params) {
|
||
return params[0].value[0] + "<br>" + params[0].value[1];
|
||
},
|
||
textStyle: {
|
||
align: 'left'
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 30
|
||
},
|
||
},
|
||
yAxis: {},
|
||
series: {
|
||
type: 'bar',
|
||
itemStyle: {
|
||
normal: {
|
||
color: function(params) {
|
||
var colorList = ['#5470c6',
|
||
'#91cc75',
|
||
'#fac858',
|
||
'#ee6666',
|
||
'#73c0de',
|
||
'#3ba272',
|
||
'#fc8452',
|
||
'#9a60b4',
|
||
'#ea7ccc',
|
||
'#45C2E0',
|
||
'#C1EBDD',
|
||
'#FFC851',
|
||
'#768BFF',
|
||
'#12ED93',
|
||
'#1869A0',
|
||
'#FF9393',
|
||
'#4B7CF3',
|
||
'#dd3ee5',
|
||
'#fe8104',
|
||
'#01C2F9',
|
||
'#F4CB29',
|
||
'#FD9E06',
|
||
'#4962FC',
|
||
'#d223e7',
|
||
'#f376e0',
|
||
'#3F77FE',
|
||
'#02CBF9',
|
||
'#18D070',
|
||
'#01C2F9', '#5470c6',
|
||
'#91cc75',
|
||
'#fac858',
|
||
'#ee6666',
|
||
'#73c0de',
|
||
'#3ba272',
|
||
'#fc8452',
|
||
'#9a60b4',
|
||
'#ea7ccc',
|
||
'#45C2E0',
|
||
'#C1EBDD',
|
||
'#FFC851'
|
||
];
|
||
return colorList[params.dataIndex]
|
||
}
|
||
|
||
}
|
||
},
|
||
encode: {
|
||
x: 'name',
|
||
y: 'value'
|
||
},
|
||
datasetIndex: 1
|
||
}
|
||
}, true);
|
||
},
|
||
|
||
drawLine4() {
|
||
this.Ech_4_1 = [];
|
||
this.Ech_4_2 = [];
|
||
|
||
let data_num = this.tableData.time
|
||
for (let i in data_num) {
|
||
this.Ech_4_1.push(i)
|
||
this.Ech_4_2.push(data_num[i])
|
||
}
|
||
|
||
// 基于准备好的dom，初始化echarts实例
|
||
this.myChart4 = this.$echarts.init(document.getElementById('myChart4'))
|
||
|
||
// 绘制折现图
|
||
this.myChart4.setOption({
|
||
title: {
|
||
text: '时间统计',
|
||
x: '49%',
|
||
y: 'top',
|
||
textAlign: 'center'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: function(params) {
|
||
return params[0].axisValueLabel + "<br>" + params[0].data;
|
||
},
|
||
textStyle: {
|
||
align: 'left'
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: this.Ech_4_1
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [{
|
||
data: this.Ech_4_2,
|
||
type: 'line',
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#edae21", //折线点的颜色
|
||
lineStyle: {
|
||
color: "#fac858" //折线的颜色
|
||
}
|
||
}
|
||
},
|
||
}]
|
||
}, true);
|
||
},
|
||
|
||
|
||
drawLine5() {
|
||
this.Ech_5 = [];
|
||
let data_num = this.tableData.type
|
||
for (let i in data_num) {
|
||
this.Ech_5.push({
|
||
name: i,
|
||
value: data_num[i]
|
||
})
|
||
}
|
||
|
||
// 基于准备好的dom，初始化echarts实例
|
||
this.myChart5 = this.$echarts.init(document.getElementById('myChart5'))
|
||
|
||
// 绘制折现图
|
||
this.myChart5.setOption({
|
||
title: {
|
||
text: '文章类型统计',
|
||
x: '49%',
|
||
y: 'top',
|
||
textAlign: 'center'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
bottom: '1%',
|
||
// type: 'scroll',
|
||
orient: 'vertical',
|
||
right: 10,
|
||
top: 20,
|
||
},
|
||
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de',
|
||
'#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#45C2E0',
|
||
'#C1EBDD', '#FFC851', '#768BFF', '#12ED93',
|
||
'#1869A0', '#FF9393', '#4B7CF3', '#dd3ee5', '#fe8104',
|
||
'#01C2F9', '#F4CB29', '#FD9E06', '#4962FC', '#d223e7',
|
||
'#f376e0', '#3F77FE', '#02CBF9', '#18D070', '#01C2F9'
|
||
],
|
||
series: [{
|
||
name: '来源',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 10,
|
||
borderColor: '#fff',
|
||
borderWidth: 2
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: '40',
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: this.Ech_5
|
||
}]
|
||
}, true);
|
||
},
|
||
|
||
dataTable6() {
|
||
this.tab_le6 = this.tableData.read
|
||
},
|
||
|
||
dataTable7() {
|
||
this.tab_le7_1 = this.tableData.zs_title
|
||
this.tab_le7_2 = this.tableData.zf_title
|
||
},
|
||
|
||
dataTable8() {
|
||
this.tab_le8_1 = this.tableData.zs_abstract
|
||
this.tab_le8_2 = this.tableData.zf_abstract
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.handle-box {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
font-size: 14px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.ta_tit {
|
||
text-align: center;
|
||
margin: 50px 0 20px 0;
|
||
}
|
||
|
||
.schart-box {
|
||
width: 100%;
|
||
margin-bottom: 50px;
|
||
/* display: inline-block; */
|
||
}
|
||
|
||
.schart-box .schart {
|
||
width: 100%;
|
||
height: 300px;
|
||
|
||
}
|
||
</style>
|