<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> 录用率 &lt; 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>综述比例 &lt; 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>综述比例 &lt; 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>
