<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>
