1007 lines
25 KiB
Vue
1007 lines
25 KiB
Vue
<template>
|
||
<div>
|
||
<div class="crumbs">
|
||
<el-breadcrumb separator="/">
|
||
<el-breadcrumb-item>
|
||
<i class="el-icon-document-copy"></i> <span class="top_dao"> List of articles in progress</span>
|
||
</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
</div>
|
||
<div class="container_l">
|
||
<!-- 期刊下拉菜单 -->
|
||
<el-select v-model="query.journal_id" filterable placeholder="Please select a journal" @change="handlejournal" style="width: 350px;">
|
||
<el-option v-for="item in cate_jour" :key="item.journal_id" :label="item.title" :value="item.journal_id"></el-option>
|
||
</el-select><br><br>
|
||
<el-row :gutter="20">
|
||
<el-col :span="16">
|
||
<!-- <div v-if="this.query.journal_id==18||this.query.journal_id==16" style="line-height: 28px;font-size: 15px;color: #ff200d;font-weight: bold;">
|
||
{{qikna}}为预警期刊，责令限期整改<br />
|
||
时间: {{daojishi}}<br />
|
||
倒计时: {{day}}天 {{hour}}:{{min}}:{{second}}<br />
|
||
整改事项: <br />
|
||
<p v-html="shixiang">{{shixiang}}</p>
|
||
</div> -->
|
||
<el-card class="box-card">
|
||
<div class="ma_title">
|
||
<h2>
|
||
<!-- <img src="../../assets/img/icon_1.png" alt="" class="icon_img"> -->
|
||
The manuscripts are ready to get final decisions.
|
||
</h2>
|
||
</div>
|
||
<ul class="ta1_uli">
|
||
<li v-for="item in tableData1">
|
||
<h3><span>{{item.type}}</span>{{item.title}}
|
||
<router-link :to="{path:'/man_text',query:{Art_id:item.article_id}}">
|
||
<el-button type="primary" plain style="float: right;">Detail</el-button>
|
||
</router-link>
|
||
</h3>
|
||
<h6>{{item.author}}</h6>
|
||
<h4><span>{{head_line}}.</span><br><span style="color: #888;">Submitted time: {{item.ctime}}</span><span>{{item.accept_sn}}</span></h4>
|
||
</li>
|
||
<p v-if="tableData1==''" style="color:#6f6f6f;font-size: 14px;margin-top: 20px;">No article</p>
|
||
</ul>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="whit_card" style="margin-left: 30px;">
|
||
<div class="ma_title">
|
||
<h2>
|
||
<img src="../../assets/img/icon_6.png" alt="" class="icon_img">
|
||
Statistical Analysis.
|
||
</h2>
|
||
</div>
|
||
<div class="handle-box">
|
||
<el-date-picker v-model="jzoon.start" type="date" placeholder="Select month" value-format="yyyy-MM-dd" @change="serch_Month"
|
||
:clearable="false" style="width: 150px;"></el-date-picker>
|
||
<span style="margin: 0 20px;">to</span>
|
||
<el-date-picker v-model="jzoon.end" type="date" placeholder="Select month" value-format="yyyy-MM-dd" @change="serch_Month"
|
||
:clearable="false" style="width: 150px;"></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 journal subscribed：</b>
|
||
<span v-if="this.tableData!=''">{{this.tableData.HG.SUBJOURNAL}}</span>
|
||
<i> 订阅量 > 1000人 </i>
|
||
</div>
|
||
|
||
<!-- 订阅话题数 -->
|
||
<div>
|
||
<b>Number of topics 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>
|
||
<i> 审稿人数量 > 100人 </i>
|
||
</div>
|
||
|
||
<!-- 录用率 -->
|
||
<div>
|
||
<b>Acceptance：</b>
|
||
<el-progress v-if="this.tableData!=''" :text-inside="true" :stroke-width="24" :percentage="per_tage1" :color="cusColorMet"
|
||
class="pro_ges">></el-progress>
|
||
<i> 录用率 < 50% </i>
|
||
</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: 600px;">
|
||
<div id="myChart2" class="schart"></div>
|
||
</div>
|
||
</div> -->
|
||
|
||
<!-- 引用数 -->
|
||
<div>
|
||
<b>Cited times：</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：
|
||
<br><br>
|
||
<span style="color: #fd9e06;font-size: 14px;margin-right: 10px;">发文量 > 30篇/年</span>
|
||
</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>
|
||
<i>综述比例 < 30% ; 论著比例 > 50%</i>
|
||
</div> -->
|
||
|
||
<!-- 文章国际化 -->
|
||
<!-- <div>
|
||
<b>Article analysis：</b>
|
||
<div class="schart-box lei_xing" style="width: 400px;">
|
||
<div id="myChart7" class="schart"></div>
|
||
</div>
|
||
</div> -->
|
||
|
||
<!-- 国际化 -->
|
||
<!-- <div>
|
||
<b>Authors analysis：</b>
|
||
<div class="schart-box lei_xing" style="width: 400px;">
|
||
<div id="myChart5" class="schart"></div>
|
||
</div>
|
||
<i> 作者来源 > 10个国家 </i>
|
||
</div> -->
|
||
|
||
<!-- 编委 -->
|
||
<!-- <div>
|
||
<b>Editorial board members analysis：</b>
|
||
<div class="schart-box lei_xing" style="width: 400px;">
|
||
<div id="myChart6" class="schart"></div>
|
||
</div>
|
||
<i>编委国际化 > 70%，区域期刊编委国际化 > 60%</i>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="20">
|
||
<el-col :span="7">
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<span>Processing time</span>
|
||
</div>
|
||
<div class="text item">
|
||
<div class="schart-box" style="width: 600px;">
|
||
<div id="myChart2" class="schart"></div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="10">
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<span>Document statistics</span>
|
||
</div>
|
||
<div class="text item">
|
||
<div class="schart-box" style="width: 50%;">
|
||
<div id="myChart3" class="schart"></div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="7">
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<span>Article type</span>
|
||
</div>
|
||
<div class="text item">
|
||
<div class="schart-box lei_xing" style="width: 400px;">
|
||
<div id="myChart4" class="schart"></div>
|
||
</div>
|
||
<i>综述比例 < 30% ; 论著比例 > 50%</i>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<span>Article analysis</span>
|
||
</div>
|
||
<div class="text item">
|
||
<div class="schart-box lei_xing" style="width: 400px;">
|
||
<div id="myChart7" class="schart"></div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<span>Authors analysis</span>
|
||
</div>
|
||
<div class="text item">
|
||
<div class="schart-box lei_xing" style="width: 400px;">
|
||
<div id="myChart5" class="schart"></div>
|
||
</div>
|
||
<i> 作者来源 > 10个国家 </i>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<span>Editorial board members analysis</span>
|
||
</div>
|
||
<div class="text item">
|
||
<div class="schart-box lei_xing" style="width: 400px;">
|
||
<div id="myChart6" class="schart"></div>
|
||
</div>
|
||
<i>编委国际化 > 70%，区域期刊编委国际化 > 60%</i>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
Direct_log: this.$route.query.act,
|
||
head_line: "",
|
||
issn_id: "",
|
||
query: {
|
||
user_id: localStorage.getItem('U_id')
|
||
},
|
||
loading: false,
|
||
jzoon: {
|
||
issn: '',
|
||
start: new Date(),
|
||
end: new Date()
|
||
},
|
||
tableData1: [],
|
||
cate_jour: [],
|
||
tableData: '',
|
||
per_tage1: 0,
|
||
per_tage2: 0,
|
||
myChart1: '',
|
||
myChart2: '',
|
||
myChart3: '',
|
||
Ech1_D: [],
|
||
Ech2_D: [],
|
||
Ech3_D1: [],
|
||
Ech3_D2: [],
|
||
Ech4_D: [],
|
||
Ech5_D: [],
|
||
Ech6_D: [],
|
||
Ech7_D: [],
|
||
curStartTime: '2019-07-31 08:00:00',
|
||
qikna: '',
|
||
shixiang: '',
|
||
daojishi: '',
|
||
day: '0',
|
||
hour: '00',
|
||
min: '00',
|
||
second: '00',
|
||
};
|
||
},
|
||
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();
|
||
this.drawLine7();
|
||
}
|
||
});
|
||
},
|
||
},
|
||
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')
|
||
this.jzoon.start = year + '-01-01';
|
||
this.jzoon.end = year + '-' + month + '-' + date;
|
||
|
||
if (this.Direct_log == null) {
|
||
this.getTable();
|
||
} else {
|
||
this.$api
|
||
.post('api/Chief/autoLoginForChief ', {
|
||
'code': this.Direct_log
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
localStorage.setItem('U_role', res.data.roles);
|
||
localStorage.setItem('U_name', res.data.user.account);
|
||
localStorage.setItem('U_id', res.data.user.user_id);
|
||
localStorage.setItem('U_relname', res.data.user.realname);
|
||
this.getTable();
|
||
this.curStartTime = '2021-10-01 00:00:00'
|
||
this.countTime();
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
}
|
||
},
|
||
methods: {
|
||
// 获取数据
|
||
getTable() {
|
||
this.$api
|
||
.post('api/Chief/getJournalsFromChief', this.query)
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.cate_jour = res.data.journals;
|
||
this.head_line = this.cate_jour[0].title;
|
||
this.query.journal_id = this.cate_jour[0].journal_id;
|
||
this.jzoon.issn = this.cate_jour[0].issn;
|
||
|
||
this.getData();
|
||
this.getMonthDase();
|
||
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
},
|
||
getData() {
|
||
this.$api
|
||
.post('api/Chief/getPArticlesForChief', this.query)
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
for (let i = 0; i < res.data.articles.length; i++) {
|
||
let date = new Date(parseInt(res.data.articles[i].ctime) * 1000);
|
||
let Y = date.getFullYear() + '-';
|
||
let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
|
||
let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
|
||
res.data.articles[i].ctime = Y + M + D;
|
||
}
|
||
this.tableData1 = res.data.articles;
|
||
|
||
if (this.query.journal_id == 18) {
|
||
this.qikna = 'TMR Theory and Hypothesis'
|
||
this.daojishi = '2021.9.3 - 2021.9.30'
|
||
this.curStartTime = '2021-10-01 00:00:00'
|
||
this.shixiang =
|
||
'1. 底栏政策需要完善，标准，细节要求同TMR。<br/>2. 补充编委会栏目，编委人数大于20人。<br/>3. 将每篇文章已出版文章配合适摘要图。<br/>4. 选择合适得期刊主题色。<br/>5. 12.20上线前10天，文章online文章需要大于5篇。<br/>6. 2022年第一期不再实行页码编码，改为文章编码。<br/><br>'
|
||
this.countTime();
|
||
}
|
||
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
},
|
||
|
||
// 期刊下拉菜单点击
|
||
handlejournal() {
|
||
// this.jzoon.issn = this.jzoon.issn;
|
||
this.getData();
|
||
this.getMonthDase();
|
||
},
|
||
|
||
// 倒计时
|
||
countTime() {
|
||
// 获取当前时间
|
||
let date = new Date()
|
||
let now = date.getTime()
|
||
// 设置截止时间
|
||
let endDate = new Date(this.curStartTime) // this.curStartTime需要倒计时的日期
|
||
let end = endDate.getTime()
|
||
// 时间差
|
||
let leftTime = end - now
|
||
// 定义变量 d,h,m,s保存倒计时的时间
|
||
if (leftTime >= 0) {
|
||
// 天
|
||
this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24)
|
||
// 时
|
||
let h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
|
||
this.hour = h < 10 ? '0' + h : h
|
||
// 分
|
||
let m = Math.floor(leftTime / 1000 / 60 % 60)
|
||
this.min = m < 10 ? '0' + m : m
|
||
// 秒
|
||
let s = Math.floor(leftTime / 1000 % 60)
|
||
this.second = s < 10 ? '0' + s : s
|
||
} else {
|
||
this.day = 0
|
||
this.hour = '00'
|
||
this.min = '00'
|
||
this.second = '00'
|
||
}
|
||
// 等于0的时候不调用
|
||
if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
|
||
return
|
||
} else {
|
||
// 递归每秒调用countTime方法，显示动态时间效果,
|
||
setTimeout(this.countTime, 1000)
|
||
}
|
||
},
|
||
|
||
|
||
// 获取分析数据
|
||
getMonthDase() {
|
||
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.drawLine7(); //文章国际化
|
||
}
|
||
|
||
this.loading = false;
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
this.loading = false;
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
this.loading = false;
|
||
});
|
||
},
|
||
|
||
// 数据---月份查询
|
||
serch_Month() {
|
||
if (this.jzoon.dastar > this.jzoon.datend) {
|
||
this.jzoon.datend = this.jzoon.dastar
|
||
}
|
||
this.tableData = '';
|
||
this.getMonthDase();
|
||
},
|
||
|
||
// 录用率进度条
|
||
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';
|
||
}
|
||
},
|
||
|
||
|
||
//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: 'Qualified'
|
||
}, {
|
||
value: mess_txt.j15,
|
||
name: 'Acceptance less than 15 days'
|
||
}, {
|
||
value: mess_txt.j120,
|
||
name: 'Received for more than 4 months'
|
||
}, {
|
||
value: mess_txt.t48,
|
||
name: 'Submitted for more than 48 days and not accepted'
|
||
});
|
||
// 基于准备好的dom，初始化echarts实例
|
||
let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
|
||
// 绘制饼状图
|
||
myChart2.setOption({
|
||
title: {
|
||
subtext: mess_txt.mq + ' articles in total',
|
||
x: '49%',
|
||
y: 'top',
|
||
textAlign: 'center'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{b}: {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
bottom: '1%',
|
||
// type: 'scroll',
|
||
orient: 'vertical',
|
||
right: 10,
|
||
top: 40,
|
||
},
|
||
series: [{
|
||
name: 'Processing time',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
center: ["25%", "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: '{b}: {c}piece ({d}%)'
|
||
formatter: function(params) {
|
||
if (params.name == "Review") {
|
||
return params.name + ': ' + params.value + ' (' + params.percent + '%)【< 30%】'
|
||
} else if (params.name == "Article") {
|
||
return params.name + ': ' + params.value + ' (' + params.percent + '%)【＞50%】'
|
||
} else {
|
||
return params.name + ': ' + params.value + ' (' + params.percent + '%)'
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
bottom: '1%',
|
||
type: 'scroll',
|
||
orient: 'vertical',
|
||
right: 10,
|
||
top: 40,
|
||
},
|
||
series: [{
|
||
name: 'Article type',
|
||
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 + ' countries in total',
|
||
x: '49%',
|
||
y: 'top',
|
||
textAlign: 'center'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{b}: {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
bottom: '1%',
|
||
type: 'scroll',
|
||
orient: 'vertical',
|
||
right: 10,
|
||
top: 40,
|
||
},
|
||
series: [{
|
||
name: 'Author internationalization',
|
||
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 + ' Editorial board member in total',
|
||
x: '49%',
|
||
y: 'top',
|
||
textAlign: 'center'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{b}: {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
bottom: '1%',
|
||
type: 'scroll',
|
||
orient: 'vertical',
|
||
right: 10,
|
||
top: 40,
|
||
},
|
||
series: [{
|
||
name: 'Internationalization of editorial board',
|
||
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);
|
||
},
|
||
|
||
|
||
//777文章国际化--图表初始化
|
||
drawLine7() {
|
||
this.Ech7_D = [];
|
||
let mess_txt = this.tableData.ZL.GNW;
|
||
this.Ech7_D.push({
|
||
value: mess_txt.n,
|
||
name: 'Domestic'
|
||
}, {
|
||
value: mess_txt.w,
|
||
name: 'Abroad'
|
||
});
|
||
// 基于准备好的dom，初始化echarts实例
|
||
let myChart7 = this.$echarts.init(document.getElementById('myChart7'))
|
||
// 绘制饼状图
|
||
myChart7.setOption({
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{b}: {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
bottom: '1%',
|
||
type: 'scroll',
|
||
orient: 'vertical',
|
||
right: 10,
|
||
top: 40,
|
||
},
|
||
color: ['#FD9E06', '#768BFF'],
|
||
series: [{
|
||
name: 'Article internationalization',
|
||
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.Ech7_D
|
||
}]
|
||
}, true);
|
||
},
|
||
},
|
||
computed: {
|
||
onRoutes() {
|
||
0
|
||
return this.$route.path.replace('/', '');
|
||
}
|
||
},
|
||
watch: {
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.ma_title {
|
||
margin-bottom: 5px;
|
||
/* font-weight: bold; */
|
||
color: #006699;
|
||
}
|
||
|
||
.ma_title h2 {
|
||
font-size: 20px;
|
||
color: #006699;
|
||
margin: 10px 0;
|
||
/* white-space: nowrap; */
|
||
}
|
||
|
||
.ma_title .icon_img {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 10px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.ta1_uli li {
|
||
list-style: none;
|
||
border-bottom: 1px dashed #e0e0e0;
|
||
/* box-shadow: 0 0 10px #e1e1e1; */
|
||
padding: 10px 20px 20px 20px;
|
||
background-color: #fff;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.ta1_uli li:hover {
|
||
/* background: #fafafa; */
|
||
}
|
||
|
||
.ta1_uli li h3 {
|
||
color: #000;
|
||
margin-top: 8px;
|
||
font-family: "Helvetica Neue", Helvetica, Georgia, sans-serif;
|
||
}
|
||
|
||
.ta1_uli li h3>span {
|
||
font-size: 12px;
|
||
color: #fff;
|
||
background-color: #1e93cd;
|
||
margin-right: 10px;
|
||
display: inline-block;
|
||
padding: 3px 5px;
|
||
vertical-align: bottom;
|
||
}
|
||
|
||
|
||
.ta1_uli li h3:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.ta1_uli li h4 {
|
||
/* color: #6f6f6f; */
|
||
margin-top: 8px;
|
||
font-weight: normal;
|
||
font-size: 15px;
|
||
line-height: 22px;
|
||
}
|
||
|
||
.ta1_uli li h4 span {
|
||
margin-right: 10px;
|
||
/* display: block; */
|
||
/* margin-bottom: 2px; */
|
||
}
|
||
|
||
.ta1_uli li h5 {
|
||
color: #006699;
|
||
margin-top: 5px;
|
||
padding-bottom: 10px;
|
||
font-weight: normal;
|
||
border-bottom: 1px solid #f1f1f1;
|
||
}
|
||
|
||
.ta1_uli li h6 {
|
||
font-weight: normal;
|
||
font-family: Calibri;
|
||
font-size: 16px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.handle-box {
|
||
margin-top: 35px;
|
||
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: 150px;
|
||
display: inline-block;
|
||
text-align: right;
|
||
margin-right: 5px;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.data_p>div>i {
|
||
font-style: normal;
|
||
margin-left: 16px;
|
||
display: inline-block;
|
||
color: #fd9e06;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.whit_card {
|
||
background-color: #fff;
|
||
padding: 20px 30px;
|
||
}
|
||
</style>
|