<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 期刊管理</el-breadcrumb-item>
				<el-breadcrumb-item>分析报告</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="title_header">
				<span>{{title_header}}</span>
			</div>
			<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>创刊时间：</b>
					<span v-if="this.tableData!=''">{{this.tableData.ZL.CK}}</span>
				</div>

				<!-- 订阅期刊数 -->
				<div>
					<b>订阅期刊数：</b>
					<span v-if="this.tableData!=''">{{this.tableData.HG.SUBJOURNAL}}</span>
					<i> 订阅量 > 1000人 </i>
				</div>

				<!-- 订阅话题数 -->
				<div>
					<b>订阅话题数：</b>
					<span v-if="this.tableData!=''">{{this.tableData.HG.SUBTOPIC}}</span>
				</div>

				<!-- 审稿人数量 -->
				<div>
					<b>审稿人数：</b>
					<span v-if="this.tableData!=''">{{this.tableData.HG.SGRSL}}</span>
					<i> 审稿人数量 > 100人 </i>
				</div>

				<!-- 录用率 -->
				<div>
					<b>录用率：</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>查重：</b>
								<div class="schart-box" style="width: 400px;">
									<div id="myChart1" class="schart"></div>
								</div>
							</div>

							<!-- 外审合格率 -->
							<div>
								<b>外审合格率：</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>处理时间：</b>
								<div class="schart-box" style="width: 400px;">
									<div id="myChart2" class="schart"></div>
								</div>
							</div>

							<!-- 引用数 -->
							<div>
								<b>引用数：</b>
								<span v-if="this.tableData!=''">{{this.tableData.ZL.YY}}</span>
							</div>

							<!-- 投稿量 -->
							<div>
								<b>投稿量：</b>
								<span v-if="this.tableData!=''">{{this.tableData.ZL.TGL}}</span>
							</div>

							<!-- 发文量 myChart3 -->
							<div>
								<b>发文统计量：
									<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>文章类型：</b>
								<div class="schart-box lei_xing" style="width: 400px;">
									<div id="myChart4" class="schart"></div>
								</div>
								<i>综述比例 < 30% ; 论著比例> 50%</i>
							</div>

							<!-- 文章国际化 -->
							<div>
								<b>文章国际化：</b>
								<div class="schart-box lei_xing" style="width: 400px;">
									<div id="myChart7" class="schart"></div>
								</div>
							</div>

							<!-- 国际化 -->
							<div>
								<b>作者国际化：</b>
								<div class="schart-box lei_xing" style="width: 400px;">
									<div id="myChart5" class="schart"></div>
								</div>
								<i> 作者来源 > 10个国家 </i>
							</div>

							<!-- 编委 -->
							<div>
								<b>编委国际化：</b>
								<div class="schart-box lei_xing" style="width: 400px;">
									<div id="myChart6" class="schart"></div>
								</div>
								<i>编委国际化 > 70%，区域期刊编委国际化 > 60%</i>
							</div>


				</div>

			</div>
		</div>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				title_header: '',
				jzoon: {
					issn: this.$route.query.is_sn,
					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: [],
				Ech7_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();
						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')
			// var toData = year + month + date;
			this.jzoon.start = year + '-01-01';
			this.jzoon.end = year + '-' + month + '-' + date;

			this.getData();
		},
		methods: {
			// 获取分析数据
			getData() {
				this.loading = true;
				this.$api
					.post('super/Publish/getAllDateForJournal', this.jzoon)
					.then(res => {
						if (res.code == 0) {
							this.title_header = res.data.title;
							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.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: '{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: '{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: '{b}: {c}篇 ({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: '文章类型',
						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: '{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: '{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);
			},



			//777文章国际化--图表初始化
			drawLine7() {
				this.Ech7_D = [];
				let mess_txt = this.tableData.ZL.GNW;
				this.Ech7_D.push({
					value: mess_txt.n,
					name: '国内'
				}, {
					value: mess_txt.w,
					name: '国外'
				});
				// 基于准备好的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: '文章国际化',
						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);
			},


		}
	};
</script>

<style>
	.title_header {
		margin-bottom: 20px;
	}

	.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 {
		width: 120px;
		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;
	}

	.lei_xing .schart {
		height: 220px;
	}
</style>
