693 lines
17 KiB
Vue
693 lines
17 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 期刊下拉菜单 -->
|
||
<el-dropdown class="link_jour" trigger="click" @command="handlejournal">
|
||
<span>
|
||
{{ this.cate_title }}<i class="el-icon-arrow-down el-icon--right"></i>
|
||
</span>
|
||
<el-dropdown-menu :default-active="onRoutes" router slot="dropdown">
|
||
<el-dropdown-item v-for="item in cate_jour" :command="item" :index="item.issn">
|
||
<i :class="item.icon"></i>{{ item.title }}
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
<div class="crumbs">
|
||
<el-breadcrumb separator="/">
|
||
<el-breadcrumb-item>
|
||
<svg t="1631094751843" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1661"
|
||
width="20" height="20" style="margin-bottom: -3px;">
|
||
<path d="M959 863.75c-0.69-16.22-12.36-29.93-28.12-29.93H833.5V544.44c0-15.7-13.8-30.73-30-30s-30 13.18-30 30v289.38h-132V660.94c0-15.7-13.8-30.73-30-30s-30 13.18-30 30v172.88h-132V582.94c0-15.7-13.8-30.73-30-30s-30 13.18-30 30v250.88H257.69v-134c0-15.69-13.8-30.72-30-30s-30 13.19-30 30v134h-70.43c-10.9 0-21.81-0.14-32.72 0h-1.4c-14.71 0-28.8 13.77-28.12 29.93s12.36 29.94 28.12 29.94h803.6c10.9 0 21.81 0.14 32.72 0h1.4c14.71 0 28.8-13.77 28.14-29.94z"
|
||
fill="#0071C3" p-id="1662"></path>
|
||
<path d="M874.91 130.26l-71.48 2.6-112.9 4.14-26.28 1c-15.66 0.57-30.74 13.39-30 30 0.71 15.76 13.2 30.61 30 30l71.49-2.6 58.48-2.13L741 242l-94.44 86.61-81.36 74.61c-5.95 5.46-12 10.86-18 16.29l-35-36-87.9-90.26-20.12-20.65c-11.4-11.7-30.94-11.23-42.43 0l-79.34 77.54L156.72 473l-29 28.32c-11.24 11-11.84 31.55 0 42.42 12.09 11.1 30.44 11.73 42.43 0l79.34-77.54 125.64-122.8 7.24-7.08 34.49 35.41L504.77 462l20.11 20.65c11.66 12 30.6 10.85 42.43 0l32.54-29.85 77.78-71.32 94.43-86.61L844.91 228v132.4c0 15.7 13.8 30.73 30 30s30-13.18 30-30V160.26c0-15.78-13.74-30.59-30-30z"
|
||
fill="#FD9A16" p-id="1663"></path>
|
||
</svg>
|
||
<router-link :to="{path:'/man_report'}">
|
||
<span class="top_dao" style="color: #006699;font-weight: bold;">Statistical Analysis -- {{this.head_line}}</span>
|
||
</router-link>
|
||
</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
</div>
|
||
<div class="container container_l">
|
||
<div class="handle-box">
|
||
<el-date-picker v-model="jzoon.start" type="date" placeholder="选择月" value-format="yyyy-MM-dd" @change="serch_Month"
|
||
:clearable="false"></el-date-picker>
|
||
<span style="margin: 0 20px;">至</span>
|
||
<el-date-picker v-model="jzoon.end" type="date" placeholder="选择月" value-format="yyyy-MM-dd" @change="serch_Month"
|
||
:clearable="false"></el-date-picker>
|
||
</div>
|
||
<div class="data_p" v-loading="loading" element-loading-text="Loading..." element-loading-spinner="el-icon-loading"
|
||
element-loading-background="rgba(0, 0, 0, 0.8)">
|
||
|
||
<!-- 创刊时间 -->
|
||
<div>
|
||
<b>Founding time：</b>
|
||
<span v-if="this.tableData!=''">{{this.tableData.ZL.CK}}</span>
|
||
</div>
|
||
|
||
<!-- 订阅期刊数 -->
|
||
<div>
|
||
<b>Number of periodicals subscribed：</b>
|
||
<span v-if="this.tableData!=''">{{this.tableData.HG.SUBJOURNAL}}</span>
|
||
</div>
|
||
|
||
<!-- 订阅话题数 -->
|
||
<div>
|
||
<b>Number of periodicals subscribed：</b>
|
||
<span v-if="this.tableData!=''">{{this.tableData.HG.SUBTOPIC}}</span>
|
||
</div>
|
||
|
||
<!-- 审稿人数量 -->
|
||
<div>
|
||
<b>Number of reviewers：</b>
|
||
<span v-if="this.tableData!=''">{{this.tableData.HG.SGRSL}}</span>
|
||
</div>
|
||
|
||
<!-- 录用率 -->
|
||
<div>
|
||
<b>Employment rate：</b>
|
||
<el-progress v-if="this.tableData!=''" :text-inside="true" :stroke-width="24" :percentage="per_tage1" :color="cusColorMet"
|
||
class="pro_ges">></el-progress>
|
||
</div>
|
||
|
||
<!-- 查重 -->
|
||
<div>
|
||
<b>Check duplicate：</b>
|
||
<div class="schart-box" style="width: 400px;">
|
||
<div id="myChart1" class="schart"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 外审合格率 -->
|
||
<div>
|
||
<b>Qualified rate of external audit：</b>
|
||
<el-progress v-if="this.tableData!=''" :text-inside="true" :stroke-width="24" :percentage="per_tage2" :color="cusColorMet"
|
||
class="pro_ges">></el-progress>
|
||
</div>
|
||
|
||
<!-- 时间 -->
|
||
<div>
|
||
<b>Processing time：</b>
|
||
<div class="schart-box" style="width: 400px;">
|
||
<div id="myChart2" class="schart"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 引用数 -->
|
||
<div>
|
||
<b>Number of references：</b>
|
||
<span v-if="this.tableData!=''">{{this.tableData.ZL.YY}}</span>
|
||
</div>
|
||
|
||
<!-- 投稿量 -->
|
||
<div>
|
||
<b>Contribution volume：</b>
|
||
<span v-if="this.tableData!=''">{{this.tableData.ZL.TGL}}</span>
|
||
</div>
|
||
|
||
<!-- 发文量 myChart3 -->
|
||
<div>
|
||
<b>Document statistics：</b>
|
||
<!-- (年折线) -->
|
||
<div class="schart-box" style="width: 50%;">
|
||
<div id="myChart3" class="schart"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文章类型 -->
|
||
<div>
|
||
<b>Article type：</b>
|
||
<div class="schart-box lei_xing" style="width: 400px;">
|
||
<div id="myChart4" class="schart"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 国际化 -->
|
||
<div>
|
||
<b>Author internationalization：</b>
|
||
<div class="schart-box lei_xing" style="width: 400px;">
|
||
<div id="myChart5" class="schart"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 编委 -->
|
||
<div>
|
||
<b>Internationalization of editorial board：</b>
|
||
<div class="schart-box lei_xing" style="width: 400px;">
|
||
<div id="myChart6" class="schart"></div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
query: {
|
||
user_id: localStorage.getItem('U_id')
|
||
},
|
||
cate_title: [],
|
||
cate_jour: [],
|
||
head_line: '',
|
||
loading: false,
|
||
jzoon: {
|
||
issn: '',
|
||
start: new Date(),
|
||
end: new Date()
|
||
},
|
||
tableData: '',
|
||
per_tage1: 0,
|
||
per_tage2: 0,
|
||
myChart1: '',
|
||
myChart2: '',
|
||
myChart3: '',
|
||
Ech1_D: [],
|
||
Ech2_D: [],
|
||
Ech3_D1: [],
|
||
Ech3_D2: [],
|
||
Ech4_D: [],
|
||
Ech5_D: [],
|
||
Ech6_D: [],
|
||
};
|
||
},
|
||
watch: {
|
||
tableData: function(val) {
|
||
var _this = this;
|
||
_this.$nextTick(function() {
|
||
if (this.tableData != '') {
|
||
this.drawLine1();
|
||
this.drawLine2();
|
||
this.drawLine3();
|
||
this.drawLine4();
|
||
this.drawLine5();
|
||
this.drawLine6();
|
||
}
|
||
});
|
||
},
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
created() {
|
||
// 默认时间换成标准格式
|
||
var date = new Date();
|
||
var year = date.getFullYear();
|
||
var month = String(new Date().getMonth() + 1).padStart(2, 0)
|
||
var date = new Date().getDate().toString().padStart(2, '0')
|
||
// var toData = year + month + date;
|
||
this.jzoon.start = year + '-01-01';
|
||
this.jzoon.end = year + '-' + month + '-' + date;
|
||
|
||
this.getTable();
|
||
// this.getData();
|
||
},
|
||
methods: {
|
||
// 获取数据
|
||
getTable() {
|
||
this.$api
|
||
.post('api/Board/getBoardJournals', this.query)
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.cate_jour = res.data.journals
|
||
this.cate_title = this.cate_jour[0].title
|
||
this.head_line = this.cate_jour[0].title;
|
||
this.jzoon.issn = this.cate_jour[0].issn;
|
||
|
||
this.getData();
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
},
|
||
|
||
// 获取分析数据
|
||
getData() {
|
||
this.loading = true;
|
||
this.$api
|
||
.post('journalsuper/Publish/getAllDateForJournal', this.jzoon)
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.tableData = res.data;
|
||
//利用率
|
||
this.per_tage1 = parseFloat((this.tableData.HG.LYL * 100).toFixed(2));
|
||
//外审合格率
|
||
this.per_tage2 = parseFloat(((this.tableData.HG.WS.all - this.tableData.HG.WS.np) / this.tableData.HG.WS.all *
|
||
100).toFixed(2));
|
||
|
||
if (this.tableData != '') {
|
||
this.drawLine1(); //查重
|
||
this.drawLine2(); //处理时间
|
||
this.drawLine3(); //发文量
|
||
this.drawLine4(); //文章类型
|
||
this.drawLine5(); //作者国际化
|
||
this.drawLine6(); //编委国际化
|
||
}
|
||
|
||
this.loading = false;
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
this.loading = false;
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
this.loading = false;
|
||
});
|
||
},
|
||
|
||
// 期刊下拉菜单点击
|
||
handlejournal(command) {
|
||
this.cate_title = command.title;
|
||
this.head_line = command.title;
|
||
this.jzoon.issn = command.issn;
|
||
this.tableData = '';
|
||
this.getData();
|
||
},
|
||
|
||
// 数据---月份查询
|
||
serch_Month() {
|
||
if (this.jzoon.dastar > this.jzoon.datend) {
|
||
this.jzoon.datend = this.jzoon.dastar
|
||
}
|
||
this.tableData = '';
|
||
this.getData();
|
||
},
|
||
|
||
// 录用率进度条
|
||
cusColorMet(pertage) {
|
||
if (pertage < 20) {
|
||
return '#f56c6c';
|
||
} else if (pertage < 40) {
|
||
return '#e6a23c';
|
||
} else if (pertage < 60) {
|
||
return '#6f7ad3';
|
||
} else if (pertage < 80) {
|
||
return '#409eff';
|
||
} else {
|
||
return '#67c23a';
|
||
}
|
||
},
|
||
|
||
//111查重--图表初始化
|
||
drawLine1() {
|
||
this.Ech1_D = [];
|
||
let mess_txt = this.tableData.HG.CC;
|
||
this.Ech1_D.push({
|
||
value: mess_txt.low,
|
||
name: '0 % ~20 %'
|
||
}, {
|
||
value: mess_txt.low1,
|
||
name: '20 % ~30 %'
|
||
}, {
|
||
value: mess_txt.mid,
|
||
name: '30 % ~50 %'
|
||
}, {
|
||
value: mess_txt.high,
|
||
name: '50 % ~100 %'
|
||
});
|
||
// 基于准备好的dom，初始化echarts实例
|
||
let myChart1 = this.$echarts.init(document.getElementById('myChart1'))
|
||
// 绘制饼状图
|
||
myChart1.setOption({
|
||
title: {
|
||
subtext: '共 ' + parseFloat(mess_txt.low + mess_txt.low1 + mess_txt.mid + mess_txt.high) + ' 篇文章',
|
||
x: '49%',
|
||
y: 'top',
|
||
textAlign: 'center'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c}篇 ({d}%)'
|
||
},
|
||
legend: {
|
||
bottom: '1%',
|
||
// type: 'scroll',
|
||
orient: 'vertical',
|
||
right: 10,
|
||
top: 40,
|
||
},
|
||
series: [{
|
||
name: '查重合格率',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
center: ["35%", "60%"],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: '40',
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: this.Ech1_D
|
||
}]
|
||
}, true);
|
||
},
|
||
|
||
|
||
//222处理时间--图表初始化
|
||
drawLine2() {
|
||
this.Ech2_D = [];
|
||
let mess_txt = this.tableData.HG.SJ;
|
||
this.Ech2_D.push({
|
||
value: mess_txt.mq - mess_txt.j15 - mess_txt.j120 - mess_txt.t48,
|
||
name: '合格'
|
||
}, {
|
||
value: mess_txt.j15,
|
||
name: '接收小于15天'
|
||
}, {
|
||
value: mess_txt.j120,
|
||
name: '接收大于4个月'
|
||
}, {
|
||
value: mess_txt.t48,
|
||
name: '提交超过48天未接受'
|
||
});
|
||
// 基于准备好的dom，初始化echarts实例
|
||
let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
|
||
// 绘制饼状图
|
||
myChart2.setOption({
|
||
title: {
|
||
subtext: '共 ' + mess_txt.mq + ' 篇文章',
|
||
x: '49%',
|
||
y: 'top',
|
||
textAlign: 'center'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c}篇 ({d}%)'
|
||
},
|
||
legend: {
|
||
bottom: '1%',
|
||
// type: 'scroll',
|
||
orient: 'vertical',
|
||
right: 10,
|
||
top: 40,
|
||
},
|
||
series: [{
|
||
name: '查重合格率',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
center: ["35%", "60%"],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: '40',
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: this.Ech2_D
|
||
}]
|
||
}, true);
|
||
},
|
||
|
||
//333发文统计量--图表初始化
|
||
drawLine3() {
|
||
this.Ech3_D1 = [];
|
||
this.Ech3_D2 = [];
|
||
let mess_txt = this.tableData.ZL.FWL
|
||
for (let i in mess_txt) {
|
||
if (i != 'all') {
|
||
this.Ech3_D1.push(i)
|
||
this.Ech3_D2.push(mess_txt[i])
|
||
}
|
||
}
|
||
// 基于准备好的dom，初始化echarts实例
|
||
this.myChart3 = this.$echarts.init(document.getElementById('myChart3'))
|
||
// 绘制折现图
|
||
this.myChart3.setOption({
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: this.Ech3_D1
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [{
|
||
data: this.Ech3_D2,
|
||
type: 'line',
|
||
smooth: true
|
||
}],
|
||
grid: {
|
||
x: 35,
|
||
y: 20,
|
||
x2: 0,
|
||
y2: 20
|
||
},
|
||
}, true);
|
||
},
|
||
|
||
|
||
//444文章类型--图表初始化
|
||
drawLine4() {
|
||
this.Ech4_D = [];
|
||
let mess_txt = this.tableData.ZL.LX;
|
||
for (let i in mess_txt) {
|
||
this.Ech4_D.push({
|
||
name: i,
|
||
value: mess_txt[i]
|
||
});
|
||
}
|
||
// 基于准备好的dom，初始化echarts实例
|
||
let myChart4 = this.$echarts.init(document.getElementById('myChart4'))
|
||
// 绘制饼状图
|
||
myChart4.setOption({
|
||
title: {
|
||
x: '49%',
|
||
y: 'top',
|
||
textAlign: 'center'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c}篇 ({d}%)'
|
||
},
|
||
legend: {
|
||
bottom: '1%',
|
||
type: 'scroll',
|
||
orient: 'vertical',
|
||
right: 10,
|
||
top: 40,
|
||
},
|
||
series: [{
|
||
name: '文章类型',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
center: ["35%", "60%"],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: '40',
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: this.Ech4_D
|
||
}]
|
||
}, true);
|
||
},
|
||
|
||
|
||
//555作者国际化--图表初始化
|
||
drawLine5() {
|
||
this.Ech5_D = [];
|
||
let mess_txt = this.tableData.ZL.GJH;
|
||
for (let i in mess_txt.list) {
|
||
this.Ech5_D.push({
|
||
name: i,
|
||
value: mess_txt.list[i]
|
||
});
|
||
}
|
||
// 基于准备好的dom，初始化echarts实例
|
||
let myChart5 = this.$echarts.init(document.getElementById('myChart5'))
|
||
// 绘制饼状图
|
||
myChart5.setOption({
|
||
title: {
|
||
subtext: '共 ' + mess_txt.countrys + ' 个国家',
|
||
x: '49%',
|
||
y: 'top',
|
||
textAlign: 'center'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c}篇 ({d}%)'
|
||
},
|
||
legend: {
|
||
bottom: '1%',
|
||
type: 'scroll',
|
||
orient: 'vertical',
|
||
right: 10,
|
||
top: 40,
|
||
},
|
||
series: [{
|
||
name: '作者国际化',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
center: ["35%", "60%"],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: '40',
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: this.Ech5_D
|
||
}]
|
||
}, true);
|
||
},
|
||
|
||
|
||
|
||
//666编委国际化--图表初始化
|
||
drawLine6() {
|
||
this.Ech6_D = [];
|
||
let mess_txt = this.tableData.ZL.BW;
|
||
for (let i in mess_txt.country) {
|
||
this.Ech6_D.push({
|
||
name: i,
|
||
value: mess_txt.country[i]
|
||
});
|
||
}
|
||
// 基于准备好的dom，初始化echarts实例
|
||
let myChart6 = this.$echarts.init(document.getElementById('myChart6'))
|
||
// 绘制饼状图
|
||
myChart6.setOption({
|
||
title: {
|
||
subtext: '共 ' + mess_txt.count + ' 个编委',
|
||
x: '49%',
|
||
y: 'top',
|
||
textAlign: 'center'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c}篇 ({d}%)'
|
||
},
|
||
legend: {
|
||
bottom: '1%',
|
||
type: 'scroll',
|
||
orient: 'vertical',
|
||
right: 10,
|
||
top: 40,
|
||
},
|
||
series: [{
|
||
name: '编委国际化',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
center: ["35%", "60%"],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: '40',
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: this.Ech6_D
|
||
}]
|
||
}, true);
|
||
},
|
||
|
||
},
|
||
computed: {
|
||
onRoutes() {
|
||
0
|
||
return this.$route.path.replace('/', '');
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.handle-box {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.data_p>div {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.data_p>div>span {
|
||
padding-top: 3px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.data_p>div>b {
|
||
line-height: 25px;
|
||
width: 300px;
|
||
display: inline-block;
|
||
text-align: right;
|
||
margin-right: 5px;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.pro_ges {
|
||
display: inline-block;
|
||
}
|
||
|
||
.pro_ges .el-progress-bar {
|
||
display: inline-block !important;
|
||
width: 500px !important;
|
||
/* margin-right: 1px; */
|
||
}
|
||
|
||
.schart-box {
|
||
width: 50%;
|
||
display: inline-block;
|
||
}
|
||
|
||
.schart-box .schart {
|
||
width: 100%;
|
||
height: 150px;
|
||
}
|
||
|
||
.lei_xing .schart {
|
||
height: 220px;
|
||
}
|
||
</style>
|