iailab-plat-ui-vue2.git

houzhongjian

2024-07-23 8501060c4f921d1e744c477e4dc08eb47b52693c

提交 \| 用户 \| 时间
850106	1	<template>
H	2	<div id="data-evaluate-body">
	3	<div id="data-upper">
	4	<div class="data-upper-1">
	5	<img :src="img_upper_1" style="width: 130%;"/>
	6	<div class="data-upper-1-1">
	7	<div class="data-upper-content-1">
	8	<span>{{Number(allEvaluation.zong_level[0][0] \|\| 0).toFixed(1) \|\| 0}}</span>
	9	</div>
	10	<div class="data-upper-content-2">
	11	<span>今日评分</span>
	12	<span>{{allEvaluation.runTime}}</span>
	13	</div>
	14	<div class="data-upper-content-3">
	15	<el-rate v-model="evaluationRate" :disabled="true"></el-rate>
	16	</div>
	17	</div>
	18	<div class="data-upper-1-2">
	19	<img :src="img_upper_2" style="width: 130%;padding-left: 15px;"/>
	20	<div style="width: 130%;margin-top: -60px;padding-left: 80px;">
	21	<span style="font-size: 16px;color: #80D8FE;">{{allEvaluation.zong_level[1][0]}}</span>
	22	</div>
	23	</div>
	24	</div>
	25	<div class="data-upper-2">
	26	<div ref="chartUpper1" class="chart-line"></div>
	27	</div>
	28	<div class="data-upper-3">
	29	<div ref="chartUpper2" class="chart-line"></div>
	30	</div>
	31	<div class="data-upper-4">
	32	<dv-scroll-board :config="config" style="height: 100%;"/>
	33	</div>
	34	</div>
	35	<div class="data-title">
	36	<div class="data-title-sub">
	37	<img :src="img_title_1"/>
	38	</div>
	39	<div class="data-title-sub">
	40	<img :src="img_title_2"/>
	41	</div>
	42	<div class="data-title-sub">
	43	<img :src="img_title_3"/>
	44	</div>
	45	</div>
	46	<div id="data-middle">
	47	<div class="data-middle-sub">
	48	<div ref="chartMiddle1" class="chart-line"></div>
	49	</div>
	50	<div class="data-middle-sub">
	51	<div ref="chartMiddle2" class="chart-line-1"></div>
	52	<div class="pf-text">
	53	<span v-if="alarm.sl.isAlarm" style="color: #FFAA5D">
	54	今日数量得分：{{alarm.sl.fen}}。{{alarm.sl.alarmMsg}}。{{alarm.sl.adjust}}。
	55	</span>
	56	<span v-else style="color: #5BFD9E">
	57	今日数量得分：{{alarm.sl.fen}}。{{alarm.sl.alarmMsg}}。{{alarm.sl.adjust}}。
	58	</span>
	59	</div>
	60	</div>
	61	<div class="data-middle-sub">
	62	<div ref="chartMiddle3" class="chart-line-1"></div>
	63	<div class="pf-text">
	64	<span v-if="alarm.zl.isAlarm" style="color: #FFAA5D">
	65	今日质量得分：{{alarm.zl.fen}}。{{alarm.zl.alarmMsg}}。{{alarm.zl.adjust}}。
	66	</span>
	67	<span v-else style="color: #5BFD9E">
	68	今日质量得分：{{alarm.zl.fen}}。{{alarm.zl.alarmMsg}}。{{alarm.zl.adjust}}。
	69	</span>
	70	</div>
	71	</div>
	72	</div>
	73	<div class="data-title">
	74	<div class="data-title-sub">
	75	<img :src="img_title_4"/>
	76	</div>
	77	<div class="data-title-sub">
	78	<img :src="img_title_5"/>
	79	</div>
	80	<div class="data-title-sub">
	81	<img :src="img_title_6"/>
	82	</div>
	83	</div>
	84	<div id="data-under">
	85	<div class="data-under-sub">
	86	<div ref="chartUnder1" class="chart-line-1"></div>
	87	<div class="pf-text">
	88	<span v-if="alarm.xh.isAlarm" style="color: #FFAA5D">
	89	今日生产消耗得分：{{alarm.xh.fen}}。{{alarm.xh.alarmMsg}}。{{alarm.xh.adjust}}。
	90	</span>
	91	<span v-else style="color: #5BFD9E">
	92	今日生产消耗得分：{{alarm.xh.fen}}。{{alarm.xh.alarmMsg}}。{{alarm.xh.adjust}}。
	93	</span>
	94	</div>
	95	</div>
	96	<div class="data-under-sub">
	97	<div ref="chartUnder2" class="chart-line-1"></div>
	98	<div class="pf-text">
	99	<span v-if="alarm.kz.isAlarm" style="color: #FFAA5D">
	100	今日过程控制得分：{{alarm.kz.fen}}。{{alarm.kz.alarmMsg}}。{{alarm.kz.adjust}}。
	101	</span>
	102	<span v-else style="color: #5BFD9E">
	103	今日过程控制得分：{{alarm.kz.fen}}。{{alarm.kz.alarmMsg}}。{{alarm.kz.adjust}}。
	104	</span>
	105	</div>
	106	</div>
	107	<div class="data-under-sub">
	108	<div ref="chartUnder3" class="chart-line-1"></div>
	109	<div class="pf-text">
	110	<span v-if="alarm.gl.isAlarm" style="color: #FFAA5D">
	111	今日管理得分：{{alarm.gl.fen}}。{{alarm.gl.alarmMsg}}。{{alarm.gl.adjust}}。
	112	</span>
	113	<span v-else style="color: #5BFD9E">
	114	今日管理得分：{{alarm.gl.fen}}。{{alarm.gl.alarmMsg}}。{{alarm.gl.adjust}}。
	115	</span>
	116	</div>
	117	</div>
	118	</div>
	119	</div>
	120	</template>
	121	<script>
	122	import {reWriteUrlSVG} from '@/utils/hostUtil'
	123	import {stringToJSON} from '@/utils/jsonUtils'
	124
	125	export default {
	126	components: {},
	127	data() {
	128	return {
	129
	130	img_upper_1: this.doEeWriteUrlSVG('svg/边框.svg'),
	131	img_upper_2: this.doEeWriteUrlSVG('svg/今日评价.svg'),
	132	img_title_1: this.doEeWriteUrlSVG('svg/历史评分趋势.svg'),
	133	img_title_2: this.doEeWriteUrlSVG('svg/数量评分.svg'),
	134	img_title_3: this.doEeWriteUrlSVG('svg/质量评分.svg'),
	135	img_title_4: this.doEeWriteUrlSVG('svg/生产消耗评分.svg'),
	136	img_title_5: this.doEeWriteUrlSVG('svg/过程控制评分.svg'),
	137	img_title_6: this.doEeWriteUrlSVG('svg/管理评分.svg'),
	138	chartUpper1: {},
	139	chartUpper2: {},
	140	chartMiddle1: {},
	141	chartMiddle2: {},
	142	chartMiddle3: {},
	143	chartUnder1: {},
	144	chartUnder2: {},
	145	chartUnder3: {},
	146	config: {
	147	header: ['日期', '分数', '生产指标评价'],
	148	rowNum: 4,
	149	waitTime: 10000,
	150	columnWidth: [350, 200, 500],
	151	align: ['center'],
	152	headerBGC: 'rgba(1,109,149,0.18)',
	153	headerHeight: 40,
	154	oddRowBGC: 'rgba(0, 44, 81, 0.8)',
	155	evenRowBGC: 'rgba(10, 29, 50, 0.8)',
	156	data: []
	157	},
	158	evaluationRate: 1,
	159	allEvaluation: {
	160	runTime: '',
	161	zong_level: [[],[]],
	162	first_level: [[],[],[],[]],
	163	guan_li_fen: [[],[]],
	164	guo_cheng_fen: [[],[]],
	165	zhi_liang_fen: [[],[]],
	166	shu_liang_fen: [[],[]]
	167	},
	168	alarm: {
	169	sl: {
	170	fen: 0,
	171	isAlarm: false,
	172	alarmMsg: '',
	173	adjust: ''
	174	},
	175	zl: {
	176	fen: 0,
	177	isAlarm: false,
	178	alarmMsg: '',
	179	adjust: ''
	180	},
	181	xh: {
	182	fen: 0,
	183	isAlarm: false,
	184	alarmMsg: '',
	185	adjust: ''
	186	},
	187	kz: {
	188	fen: 0,
	189	isAlarm: false,
	190	alarmMsg: '',
	191	adjust: ''
	192	},
	193	gl: {
	194	fen: 0,
	195	isAlarm: false,
	196	alarmMsg: '',
	197	adjust: ''
	198	},
	199	}
	200	}
	201	},
	202	mounted() {
	203	this.chartUpper1 = this.$echarts.init(this.$refs.chartUpper1)
	204	this.chartUpper2 = this.$echarts.init(this.$refs.chartUpper2)
	205	this.chartMiddle1 = this.$echarts.init(this.$refs.chartMiddle1)
	206	this.chartMiddle2 = this.$echarts.init(this.$refs.chartMiddle2)
	207	this.chartMiddle3 = this.$echarts.init(this.$refs.chartMiddle3)
	208	this.chartUnder1 = this.$echarts.init(this.$refs.chartUnder1)
	209	this.chartUnder2 = this.$echarts.init(this.$refs.chartUnder2)
	210	this.chartUnder3 = this.$echarts.init(this.$refs.chartUnder3)
	211	let that = this;
	212	that.init()
	213	},
	214	methods: {
	215	doEeWriteUrlSVG(url) {
	216	return reWriteUrlSVG(url)
	217	},
	218	init() {
	219	this.getAllEvaluation()
	220	this.getChartRingData(this.chartUpper1)
	221	this.getLog()
	222	this.getChartData()
	223	},
	224	getAllEvaluation() {
	225	this.$http.get(`/iailab-ntt-model/api/model/model-result/all_evaluation`).then(({data: res}) => {
	226	if (res.code !== 0) {
	227	return this.$message.error(res.msg)
	228	}
	229	this.allEvaluation.runTime = res.data.runTime
	230	this.allEvaluation.zong_level = stringToJSON(res.data.zong_level)
	231	this.allEvaluation.first_level = stringToJSON(res.data.first_level)
	232	this.allEvaluation.guan_li_fen = stringToJSON(res.data.guan_li_fen)
	233	this.allEvaluation.guo_cheng_fen = stringToJSON(res.data.guo_cheng_fen)
	234	this.allEvaluation.zhi_liang_fen = stringToJSON(res.data.zhi_liang_fen)
	235	this.allEvaluation.shu_liang_fen = stringToJSON(res.data.shu_liang_fen)
	236
	237	this.alarm.sl.fen = Number(this.allEvaluation.first_level[0][0] \|\| 0).toFixed(0) \|\| 0
	238	this.alarm.zl.fen = Number(this.allEvaluation.first_level[0][1] \|\| 0).toFixed(0) \|\| 0
	239	this.alarm.xh.fen = Number(this.allEvaluation.first_level[0][2] \|\| 0).toFixed(0) \|\| 0
	240	this.alarm.kz.fen = Number(this.allEvaluation.first_level[0][3] \|\| 0).toFixed(0) \|\| 0
	241	this.alarm.gl.fen = Number(this.allEvaluation.first_level[0][4] \|\| 0).toFixed(0) \|\| 0
	242
	243	this.alarm.sl.isAlarm = this.allEvaluation.first_level[1][0] + '' === '1'
	244	this.alarm.zl.isAlarm = this.allEvaluation.first_level[1][1] + '' === '1'
	245	this.alarm.xh.isAlarm = this.allEvaluation.first_level[1][2] + '' === '1'
	246	this.alarm.kz.isAlarm = this.allEvaluation.first_level[1][3] + '' === '1'
	247	this.alarm.gl.isAlarm = this.allEvaluation.first_level[1][4] + '' === '1'
	248
	249	this.alarm.sl.alarmMsg = this.allEvaluation.first_level[2][0]
	250	this.alarm.zl.alarmMsg = this.allEvaluation.first_level[2][1]
	251	this.alarm.xh.alarmMsg = this.allEvaluation.first_level[2][2]
	252	this.alarm.kz.alarmMsg = this.allEvaluation.first_level[2][3]
	253	this.alarm.gl.alarmMsg = this.allEvaluation.first_level[2][4]
	254
	255	this.alarm.sl.adjust = this.allEvaluation.first_level[3][0]
	256	this.alarm.zl.adjust = this.allEvaluation.first_level[3][1]
	257	this.alarm.xh.adjust = this.allEvaluation.first_level[3][2]
	258	this.alarm.kz.adjust = this.allEvaluation.first_level[3][3]
	259	this.alarm.gl.adjust = this.allEvaluation.first_level[3][4]
	260
	261	this.evaluationRate = ((this.allEvaluation.zong_level[0][0] \|\| 0) / 20).toFixed(1)
	262	let radarData = [
	263	Number(this.allEvaluation.first_level[0][0] \|\| 0).toFixed(0) \|\| 0,
	264	Number(this.allEvaluation.first_level[0][1] \|\| 0).toFixed(0) \|\| 0,
	265	Number(this.allEvaluation.first_level[0][2] \|\| 0).toFixed(0) \|\| 0,
	266	Number(this.allEvaluation.first_level[0][3] \|\| 0).toFixed(0) \|\| 0,
	267	Number(this.allEvaluation.first_level[0][4] \|\| 0).toFixed(0) \|\| 0]
	268	let option = {
	269	tooltip: {},
	270	radar: {
	271	radius: "80%", //大小
	272	nameGap: 2, // 图中工艺等字距离图的距离
	273	splitNumber: 3,
	274	center: ["50%", "50%"], // 图的位置
	275	name: {
	276	textStyle: {
	277	color: "#19C4FF",
	278	fontSize: 14
	279	},
	280	formatter: function (name) {
	281	return name;
	282	}
	283	},
	284	indicator: [
	285	{"name": '数量', "max": 100, min: 0},
	286	{"name": '质量', "max": 100, min: 0},
	287	{"name": '生产消耗', "max": 100, min: 0},
	288	{"name": '过程控制', "max": 100, min: 0},
	289	{"name": '管理', "max": 100, min: 0},
	290	],
	291	axisLine: {
	292	lineStyle: {
	293	color: "rgba(153, 209, 246, 0.2)"
	294	}
	295	},
	296	splitArea: {
	297	show: false,
	298	areaStyle: {
	299	color: "rgba(255,0,0,0)" // 图表背景的颜色
	300	}
	301	},
	302	splitLine: {
	303	show: true,
	304	lineStyle: {
	305	width: 1,
	306	color: "rgba(153, 209, 246, 0.2)" // 设置网格的颜色
	307	}
	308	}
	309	},
	310	series: [
	311	{
	312	name: "指标体系评分",
	313	type: "radar",
	314	symbol: "angle",
	315	itemStyle: {
	316	normal: {
	317	areaStyle: {type: "default"}
	318	}
	319	},
	320	label: {
	321	show: true,
	322	formatter: '{b}{c}'
	323	},
	324	data: [
	325	{
	326	symbol: "circle",
	327	symbolSize: 5,
	328	value: radarData,
	329	label: {
	330	show: true,
	331	fontSize: 14,
	332	color: '#19C4FF'
	333	},
	334	areaStyle: {color: "rgba(64, 205, 241, 0.2)"},
	335	lineStyle: {
	336	color: "rgba(146, 225, 255, 1)",
	337	width: 1
	338	}
	339	}
	340	]
	341	}
	342	]
	343	}
	344	this.chartUpper2.setOption(option);
	345	}).catch(() => {
	346	})
	347	},
	348	getChartRingData(chart) {
	349	this.$http.get(`/iailab-ntt-model/index/evaluate/chart/0`).then(({data: res}) => {
	350	if (res.code !== 0) {
	351	return this.$message.error(res.msg)
	352	}
	353	let systemChartData = res.data.series[0].data[0]
	354	let systemCharLegend = res.data.legend
	355	let option = {
	356	tooltip: {
	357	trigger: 'item',
	358	formatter: '{b}:({d}%)',
	359	},
	360	legend: [
	361	{
	362	top: 'center',
	363	orient: 'vertical',
	364	right: '0%',
	365	icon: 'square',
	366	itemGap: 14,
	367	textStyle: {
	368	color: '#19C4FF',
	369	fontSize: 14,
	370	padding: [0, 0, 0, 0],
	371	},
	372	data: systemCharLegend,
	373	}],
	374	grid: {
	375	containLabel: true,
	376	},
	377	title: {
	378	text: `{a\| 指标体系}`,
	379	textStyle: {
	380	rich: {
	381	a: {
	382	fontSize: 14,
	383	color: '#19C4FF',
	384	},
	385	},
	386	},
	387	subtext: `{a\|权重}`,
	388	subtextStyle: {
	389	rich: {
	390	a: {
	391	fontSize: 14,
	392	color: '#19C4FF',
	393	padding: [0, 0, 0, 18],
	394	},
	395	},
	396	},
	397	x: '42%',
	398	y: '40%',
	399	},
	400	series: [
	401	{
	402	type: 'pie',
	403	radius: ['50%', '66%'],
	404	center: ['50%', '50%'],
	405	color: [
	406	'#A871E3',
	407	'#86DF6C',
	408	'#0E42D2',
	409	'#FF7D00',
	410	'#F7BA1E',
	411	],
	412	label: {
	413	position: 'outside',
	414	show: true,
	415	color: '#19C4FF',
	416	fontSize: 14,
	417	formatter: function (params) {
	418	if (params.name !== '') {
	419	return params.percent + '%';
	420	}
	421	},
	422	},
	423	data: systemChartData,
	424	},
	425	],
	426	}
	427	chart.setOption(option);
	428	}).catch(() => {
	429	})
	430
	431
	432	},
	433	getLog() {
	434	this.$http.get(`/iailab-ntt-model/api/model/model-result/list`, {
	435	params: {
	436	modelCode: 'all_evaluation',
	437	lastHour: 24 * 4,
	438	isAsc: false
	439	}
	440	}).then(({data: res}) => {
	441	let data = []
	442	res.data.forEach(function (item) {
	443	data.push([
	444	item.resultTime,
	445	Number(stringToJSON(item.zong_level)[0][0]).toFixed(1),
	446	stringToJSON(item.zong_level)[1][0]])
	447	})
	448	this.config = {
	449	header: ['日期', '分数', '生产指标评价'],
	450	rowNum: 4,
	451	waitTime: 10000,
	452	columnWidth: [350, 100, 500],
	453	align: ['center', 'center', 'center'],
	454	headerBGC: 'rgba(0,133,255,0.29)',
	455	headerHeight: 50,
	456	oddRowBGC: 'rgba(0, 44, 81, 0.8)',
	457	evenRowBGC: 'rgba(10, 29, 50, 0.8)',
	458	data: data
	459	}
	460
	461	})
	462	},
	463	getChartData() {
	464	this.$http.get(`/iailab-ntt-model/api/model/model-result/list`, {
	465	params: {
	466	modelCode: 'all_evaluation',
	467	lastHour: 24 * 4,
	468	isAsc: true
	469	}
	470	}).then(({data: res}) => {
	471	let xData = []
	472	let zongPf = []
	473	let sl_xx = []
	474	let sl_zq = []
	475	let zl_xzk_hf = []
	476	let zl_xzk_sf = []
	477	let zl_xzk_rz = []
	478	let zl_hm_hf = []
	479	let zl_hm_sf = []
	480	let zl_hm_rz = []
	481	let scxh_jh = []
	482	let scxh_yh = []
	483	let scxh_dh = []
	484	let scxh_sh = []
	485
	486	let gckz_kmhf = []
	487	let gckz_mmhf = []
	488	let gckz_1FJ = []
	489	let gckz_2FJ = []
	490	let gckz_401DL = []
	491	let gckz_402DL = []
	492	let gckz_501DL = []
	493	let gckz_HHM_RZ = []
	494	// let gckz_HHM_HF = []
	495	// let gckz_HHM_SF = []
	496	let gl_jxl = []
	497	let gl_kjl = []
	498	let gl_kql = []
	499	res.data.forEach(function (item) {
	500	xData.push(item.resultTime.toString().substr(0, 10))
	501	zongPf.push(stringToJSON(item.zong_level)[0][0])
	502
	503	let shu_liang_fen = stringToJSON(item.shu_liang_fen)
	504	sl_xx.push(shu_liang_fen[0][0])
	505	sl_zq.push(shu_liang_fen[0][1])
	506
	507	let zhi_liang_fen = stringToJSON(item.zhi_liang_fen)
	508	zl_xzk_hf.push(zhi_liang_fen[0][3])
	509	zl_xzk_sf.push(zhi_liang_fen[0][4])
	510	zl_xzk_rz.push(zhi_liang_fen[0][5])
	511	zl_hm_hf.push(zhi_liang_fen[0][6])
	512	zl_hm_sf.push(zhi_liang_fen[0][7])
	513	zl_hm_rz.push(zhi_liang_fen[0][8])
	514
	515
	516	let sheng_chan_fen = stringToJSON(item.sheng_chan_fen)
	517	scxh_jh.push(sheng_chan_fen[0][0])
	518	scxh_yh.push(sheng_chan_fen[0][1])
	519	scxh_dh.push(sheng_chan_fen[0][2])
	520	scxh_sh.push(sheng_chan_fen[0][3])
	521
	522
	523	let guo_cheng_fen = stringToJSON(item.guo_cheng_fen)
	524	gckz_kmhf.push(guo_cheng_fen[0][0])
	525	gckz_mmhf.push(guo_cheng_fen[0][1])
	526	gckz_1FJ.push(guo_cheng_fen[0][2])
	527	gckz_2FJ.push(guo_cheng_fen[0][3])
	528	gckz_401DL.push(guo_cheng_fen[0][4])
	529	gckz_402DL.push(guo_cheng_fen[0][5])
	530	gckz_501DL.push(guo_cheng_fen[0][6])
	531	gckz_HHM_RZ.push(guo_cheng_fen[0][7])
	532	// gckz_HHM_HF.push(guo_cheng_fen[8][0])
	533	// gckz_HHM_SF.push(guo_cheng_fen[9][0])
	534
	535	let guan_li_fen = stringToJSON(item.guan_li_fen)
	536	gl_jxl.push(guan_li_fen[0][0])
	537	gl_kjl.push(guan_li_fen[0][1])
	538	gl_kql.push(guan_li_fen[0][2])
	539	})
	540
	541	let optionZong = {
	542	title: {
	543	show: false
	544	},
	545	tooltip: {
	546	trigger: 'axis'
	547	},
	548	legend: {
	549	right: '70',
	550	textStyle: {
	551	// 图例文字的样式
	552	color: '#fff',
	553	fontSize: 14,
	554	padding: [2, 0, 0, 2],
	555	fontWeight: 100,
	556	},
	557	},
	558	grid: {
	559	top: '25%',
	560	left: '3%',
	561	right: '4%',
	562	bottom: '3%',
	563	containLabel: true
	564	},
	565	xAxis: {
	566	type: 'category',
	567	boundaryGap: false,
	568	axisLabel: {
	569	color: "#DEDEDE"
	570	},
	571	data: xData
	572	},
	573	yAxis: {
	574	type: 'value',
	575	splitLine: {
	576	show: false
	577	},
	578
	579	axisLine: {
	580	show: true,
	581	onZero: false,
	582	color: '#FFFFFF',
	583	},
	584	axisTick: {show: true},
	585	axisLabel: {
	586	formatter: '{value}',
	587	color: "#DEDEDE"
	588	}
	589	},
	590	series: [
	591	{
	592	data: zongPf,
	593	type: 'line',
	594	smooth: true,
	595	showSymbol: true,
	596	color: 'rgba(0,194,255,0.44)',
	597	areaStyle: {}
	598	}
	599	]
	600	};
	601	this.chartMiddle1.setOption(optionZong);
	602
	603	let optionSl = {
	604	tooltip: {//提示框组件
	605	trigger: 'axis',//触发类型柱状图
	606	axisPointer: {type: 'shadow'} //触发效果移动上去背景效果
	607	},
	608	grid: {
	609	top: '15%',
	610	left: '3%',
	611	right: '4%',
	612	bottom: '3%',
	613	containLabel: true
	614	},
	615	xAxis: [//x轴
	616	{
	617	type: 'category',//坐标轴类型离散
	618	data: xData,//数据
	619	axisTick: false,//是否显示刻度
	620	axisLine: {//坐标轴样式
	621	show: true,//是否显示
	622	lineStyle: {//线的样式
	623	type: 'dashed'//线的类型虚线
	624	},
	625	},
	626	axisLabel: {
	627	color: "#DEDEDE"
	628	}
	629	},
	630	],
	631	yAxis: [//y轴
	632	{
	633	min: 0,//最小
	634	max: 100,//最大
	635	interval: 100,//相差
	636	type: 'value',//连续类型
	637	axisLine: {//坐标轴样式
	638	show: false, //不显示
	639	},
	640	splitLine: {//分隔辅助线
	641	lineStyle: {
	642	type: 'dashed',//线的类型虚线0
	643	opacity: 0.2//透明度
	644	},
	645	},
	646	axisLabel: {
	647	color: "#DEDEDE"
	648	}
	649	},
	650	],
	651	series: [
	652	{
	653	name: '原煤入洗达成率',
	654	type: 'bar',
	655	barWidth: 11,
	656	data: sl_xx,
	657	z: 1,
	658	itemStyle: {
	659	color: {
	660	x: 0,
	661	y: 0,
	662	x2: 0,
	663	y2: 1,
	664	type: 'linear',
	665	global: false,
	666	colorStops: [
	667	{
	668	offset: 0,
	669	color: 'rgba(3, 181, 243)',
	670	},
	671	{
	672	offset: 1,
	673	color: 'rgba(2, 190, 251,0)',
	674	},
	675	],
	676
	677	},
	678	},
	679	},
	680	{
	681	name: '栈桥运输达成率',//名称
	682	type: 'bar',//类型
	683	barWidth: 11,//宽度
	684	data: sl_zq,//数值
	685	z: 2,
	686	itemStyle: {
	687	color: {//渐变色
	688	x: 0,
	689	y: 0,
	690	x2: 0,
	691	y2: 1,
	692	type: 'linear',
	693	global: false,
	694	colorStops: [
	695	{
	696	offset: 0,
	697	color: 'rgba(6, 244, 231)',
	698	},
	699	{
	700	offset: 1,
	701	color: 'rgba(6, 244, 231,0)',
	702	},
	703	],
	704	},
	705	},
	706	}
	707	],
	708	legend: {
	709	right: '70',
	710	textStyle: {
	711	// 图例文字的样式
	712	color: '#fff',
	713	fontSize: 14,
	714	padding: [2, 0, 0, 2],
	715	fontWeight: 100,
	716	},
	717	},
	718	};
	719	this.chartMiddle2.setOption(optionSl);
	720
	721	let optionZl = {
	722	tooltip: {//提示框组件
	723	trigger: 'axis',//触发类型柱状图
	724	axisPointer: {type: 'shadow'} //触发效果移动上去背景效果
	725	},
	726	grid: {
	727	top: '15%',
	728	left: '3%',
	729	right: '4%',
	730	bottom: '3%',
	731	containLabel: true
	732	},
	733	xAxis: [//x轴
	734	{
	735	type: 'category',//坐标轴类型离散
	736	data: xData,//数据
	737	axisTick: false,//是否显示刻度
	738	axisLine: {//坐标轴样式
	739	show: true,//是否显示
	740	lineStyle: {//线的样式
	741	type: 'dashed'//线的类型虚线
	742	},
	743	},
	744	axisLabel: {
	745	color: "#DEDEDE"
	746	}
	747	},
	748	],
	749	yAxis: [//y轴
	750	{
	751	min: 0,//最小
	752	max: 100,//最大
	753	interval: 100,//相差
	754	type: 'value',//连续类型
	755	axisLine: {//坐标轴样式
	756	show: false, //不显示
	757	},
	758	splitLine: {//分隔辅助线
	759	lineStyle: {
	760	type: 'dashed',//线的类型虚线0
	761	opacity: 0.2//透明度
	762	},
	763	},
	764	axisLabel: {
	765	color: "#DEDEDE"
	766	}
	767	},
	768	],
	769	series: [//系统列表
	770	{
	771	name: '洗中块灰分',
	772	type: 'bar',
	773	barWidth: 11,
	774	data: zl_xzk_hf,
	775	z: 1,
	776	itemStyle: {
	777	color: {
	778	x: 0,
	779	y: 0,
	780	x2: 0,
	781	y2: 1,
	782	type: 'linear',
	783	global: false,
	784	colorStops: [
	785	{
	786	offset: 0,
	787	color: 'rgba(3, 181, 243)',
	788	},
	789	{
	790	offset: 1,
	791	color: 'rgba(2, 190, 251,0)',
	792	},
	793	],
	794
	795	},
	796	},
	797	},
	798	{
	799	name: '洗中块水分',//名称
	800	type: 'bar',//类型
	801	barWidth: 11,//宽度
	802	data: zl_xzk_sf,//数值
	803	z: 2,
	804	itemStyle: {
	805	color: {//渐变色
	806	x: 0,
	807	y: 0,
	808	x2: 0,
	809	y2: 1,
	810	type: 'linear',
	811	global: false,
	812	colorStops: [
	813	{
	814	offset: 0,
	815	color: 'rgba(6, 244, 231)',
	816	},
	817	{
	818	offset: 1,
	819	color: 'rgba(6, 244, 231,0)',
	820	},
	821	],
	822	},
	823	},
	824	},
	825	{
	826	name: '洗中块热值',//名称
	827	type: 'bar',//类型
	828	barWidth: 11,//宽度
	829	data: zl_xzk_rz,//数值
	830	z: 2,
	831	itemStyle: {
	832	color: {//渐变色
	833	x: 0,
	834	y: 0,
	835	x2: 0,
	836	y2: 1,
	837	type: 'linear',
	838	global: false,
	839	colorStops: [
	840	{
	841	offset: 0,
	842	color: '#FFAA5D',
	843	},
	844	{
	845	offset: 1,
	846	color: 'rgba(255,170,93,0.14)',
	847	},
	848	],
	849	},
	850	},
	851	},
	852	{
	853	name: '混煤灰分',
	854	type: 'bar',
	855	barWidth: 11,
	856	data: zl_hm_hf,
	857	z: 1,
	858	itemStyle: {
	859	color: {
	860	x: 0,
	861	y: 0,
	862	x2: 0,
	863	y2: 1,
	864	type: 'linear',
	865	global: false,
	866	colorStops: [
	867	{
	868	offset: 0,
	869	color: 'rgb(182,93,246)',
	870	},
	871	{
	872	offset: 1,
	873	color: 'rgba(182,93,246,0)',
	874	},
	875	],
	876
	877	},
	878	},
	879	},
	880	{
	881	name: '混煤水分',//名称
	882	type: 'bar',//类型
	883	barWidth: 11,//宽度
	884	data: zl_hm_sf,//数值
	885	z: 2,
	886	itemStyle: {
	887	color: {//渐变色
	888	x: 0,
	889	y: 0,
	890	x2: 0,
	891	y2: 1,
	892	type: 'linear',
	893	global: false,
	894	colorStops: [
	895	{
	896	offset: 0,
	897	color: 'rgb(248,109,202)',
	898	},
	899	{
	900	offset: 1,
	901	color: 'rgba(248,109,202,0)',
	902	},
	903	],
	904	},
	905	},
	906	},
	907	{
	908	name: '混煤热值',//名称
	909	type: 'bar',//类型
	910	barWidth: 11,//宽度
	911	data: zl_hm_rz,//数值
	912	z: 2,
	913	itemStyle: {
	914	color: {//渐变色
	915	x: 0,
	916	y: 0,
	917	x2: 0,
	918	y2: 1,
	919	type: 'linear',
	920	global: false,
	921	colorStops: [
	922	{
	923	offset: 0,
	924	color: 'rgb(143,208,141)',
	925	},
	926	{
	927	offset: 1,
	928	color: 'rgba(143,208,141,0)',
	929	},
	930	],
	931	},
	932	},
	933	}
	934	],
	935	legend: {
	936	type: 'scroll',
	937	right: '70',
	938	textStyle: {
	939	// 图例文字的样式
	940	color: '#fff',
	941	fontSize: 14,
	942	padding: [2, 0, 0, 2],
	943	fontWeight: 100,
	944	},
	945	},
	946	};
	947	this.chartMiddle3.setOption(optionZl);
	948
	949	let optionScxh = {
	950	tooltip: {//提示框组件
	951	trigger: 'axis',//触发类型柱状图
	952	axisPointer: {type: 'shadow'} //触发效果移动上去背景效果
	953	},
	954	grid: {
	955	top: '15%',
	956	left: '3%',
	957	right: '4%',
	958	bottom: '3%',
	959	containLabel: true
	960	},
	961	xAxis: [//x轴
	962	{
	963	type: 'category',//坐标轴类型离散
	964	data: xData,//数据
	965	axisTick: false,//是否显示刻度
	966	axisLine: {//坐标轴样式
	967	show: true,//是否显示
	968	lineStyle: {//线的样式
	969	type: 'dashed'//线的类型虚线
	970	},
	971	},
	972	axisLabel: {
	973	color: "#DEDEDE"
	974	}
	975	},
	976	],
	977	yAxis: [//y轴
	978	{
	979	min: 0,//最小
	980	max: 100,//最大
	981	interval: 100,//相差
	982	type: 'value',//连续类型
	983	axisLine: {//坐标轴样式
	984	show: false, //不显示
	985	},
	986	splitLine: {//分隔辅助线
	987	lineStyle: {
	988	type: 'dashed',//线的类型虚线0
	989	opacity: 0.2//透明度
	990	},
	991	},
	992	axisLabel: {
	993	color: "#DEDEDE"
	994	}
	995	},
	996	],
	997	series: [//系统列表
	998	{
	999	name: '介耗',
	1000	type: 'bar',
	1001	barWidth: 11,
	1002	data: scxh_jh,
	1003	z: 1,
	1004	itemStyle: {
	1005	color: {
	1006	x: 0,
	1007	y: 0,
	1008	x2: 0,
	1009	y2: 1,
	1010	type: 'linear',
	1011	global: false,
	1012	colorStops: [
	1013	{
	1014	offset: 0,
	1015	color: 'rgba(3, 181, 243)',
	1016	},
	1017	{
	1018	offset: 1,
	1019	color: 'rgba(2, 190, 251,0)',
	1020	},
	1021	],
	1022
	1023	},
	1024	},
	1025	},
	1026	{
	1027	name: '药耗',//名称
	1028	type: 'bar',//类型
	1029	barWidth: 11,//宽度
	1030	data: scxh_yh,//数值
	1031	z: 2,
	1032	itemStyle: {
	1033	color: {//渐变色
	1034	x: 0,
	1035	y: 0,
	1036	x2: 0,
	1037	y2: 1,
	1038	type: 'linear',
	1039	global: false,
	1040	colorStops: [
	1041	{
	1042	offset: 0,
	1043	color: 'rgba(6, 244, 231)',
	1044	},
	1045	{
	1046	offset: 1,
	1047	color: 'rgba(6, 244, 231,0)',
	1048	},
	1049	],
	1050	},
	1051	},
	1052	},
	1053	{
	1054	name: '电耗',//名称
	1055	type: 'bar',//类型
	1056	barWidth: 11,//宽度
	1057	data: scxh_dh,//数值
	1058	z: 2,
	1059	itemStyle: {
	1060	color: {//渐变色
	1061	x: 0,
	1062	y: 0,
	1063	x2: 0,
	1064	y2: 1,
	1065	type: 'linear',
	1066	global: false,
	1067	colorStops: [
	1068	{
	1069	offset: 0,
	1070	color: '#FFAA5D',
	1071	},
	1072	{
	1073	offset: 1,
	1074	color: 'rgba(255,170,93,0.14)',
	1075	},
	1076	],
	1077	},
	1078	},
	1079	},
	1080	{
	1081	name: '水耗',//名称
	1082	type: 'bar',//类型
	1083	barWidth: 11,//宽度
	1084	data: scxh_sh,//数值
	1085	z: 2,
	1086	itemStyle: {
	1087	color: {//渐变色
	1088	x: 0,
	1089	y: 0,
	1090	x2: 0,
	1091	y2: 1,
	1092	type: 'linear',
	1093	global: false,
	1094	colorStops: [
	1095	{
	1096	offset: 0,
	1097	color: 'rgb(220,141,248)',
	1098	},
	1099	{
	1100	offset: 1,
	1101	color: 'rgba(220,141,248,0.1)',
	1102	},
	1103	],
	1104	},
	1105	},
	1106	}
	1107	],
	1108	legend: {
	1109	type: 'scroll',
	1110	right: '70',
	1111	textStyle: {
	1112	// 图例文字的样式
	1113	color: '#fff',
	1114	fontSize: 14,
	1115	padding: [2, 0, 0, 2],
	1116	fontWeight: 100,
	1117	},
	1118	},
	1119	};
	1120	this.chartUnder1.setOption(optionScxh);
	1121
	1122	let optionGckz = {
	1123	tooltip: {//提示框组件
	1124	trigger: 'axis',//触发类型柱状图
	1125	axisPointer: {type: 'shadow'} //触发效果移动上去背景效果
	1126	},
	1127	grid: {
	1128	top: '15%',
	1129	left: '3%',
	1130	right: '4%',
	1131	bottom: '3%',
	1132	containLabel: true
	1133	},
	1134	xAxis: [//x轴
	1135	{
	1136	type: 'category',//坐标轴类型离散
	1137	data: xData,//数据
	1138	axisTick: false,//是否显示刻度
	1139	axisLine: {//坐标轴样式
	1140	show: true,//是否显示
	1141	lineStyle: {//线的样式
	1142	type: 'dashed'//线的类型虚线
	1143	},
	1144	},
	1145	axisLabel: {
	1146	color: "#DEDEDE"
	1147	}
	1148	},
	1149	],
	1150	yAxis: [//y轴
	1151	{
	1152	min: 0,//最小
	1153	max: 100,//最大
	1154	interval: 100,//相差
	1155	type: 'value',//连续类型
	1156	axisLine: {//坐标轴样式
	1157	show: false, //不显示
	1158	},
	1159	splitLine: {//分隔辅助线
	1160	lineStyle: {
	1161	type: 'dashed',//线的类型虚线0
	1162	opacity: 0.2//透明度
	1163	},
	1164	},
	1165	axisLabel: {
	1166	color: "#DEDEDE"
	1167	}
	1168	},
	1169	],
	1170	series: [//系统列表
	1171	{
	1172	name: '块煤灰分',
	1173	type: 'bar',
	1174	barWidth: 10,
	1175	data: gckz_kmhf,
	1176	z: 1,
	1177	itemStyle: {
	1178	color: {
	1179	x: 0,
	1180	y: 0,
	1181	x2: 0,
	1182	y2: 1,
	1183	type: 'linear',
	1184	global: false,
	1185	colorStops: [
	1186	{
	1187	offset: 0,
	1188	color: 'rgba(3, 181, 243)',
	1189	},
	1190	{
	1191	offset: 1,
	1192	color: 'rgba(2, 190, 251,0)',
	1193	},
	1194	],
	1195
	1196	},
	1197	},
	1198	},
	1199	{
	1200	name: '末煤灰分',//名称
	1201	type: 'bar',//类型
	1202	barWidth: 10,//宽度
	1203	data: gckz_mmhf,//数值
	1204	z: 2,
	1205	itemStyle: {
	1206	color: {//渐变色
	1207	x: 0,
	1208	y: 0,
	1209	x2: 0,
	1210	y2: 1,
	1211	type: 'linear',
	1212	global: false,
	1213	colorStops: [
	1214	{
	1215	offset: 0,
	1216	color: 'rgba(6, 244, 231)',
	1217	},
	1218	{
	1219	offset: 1,
	1220	color: 'rgba(6, 244, 231,0)',
	1221	},
	1222	],
	1223	},
	1224	},
	1225	},
	1226	{
	1227	name: '1#低压风机',//名称
	1228	type: 'bar',//类型
	1229	barWidth: 10,//宽度
	1230	data: gckz_1FJ,//数值
	1231	z: 2,
	1232	itemStyle: {
	1233	color: {//渐变色
	1234	x: 0,
	1235	y: 0,
	1236	x2: 0,
	1237	y2: 1,
	1238	type: 'linear',
	1239	global: false,
	1240	colorStops: [
	1241	{
	1242	offset: 0,
	1243	color: '#FFAA5D',
	1244	},
	1245	{
	1246	offset: 1,
	1247	color: 'rgba(255,170,93,0.14)',
	1248	},
	1249	],
	1250	},
	1251	},
	1252	},
	1253	{
	1254	name: '2#低压风机',
	1255	type: 'bar',
	1256	barWidth: 10,
	1257	data: gckz_2FJ,
	1258	z: 1,
	1259	itemStyle: {
	1260	color: {
	1261	x: 0,
	1262	y: 0,
	1263	x2: 0,
	1264	y2: 1,
	1265	type: 'linear',
	1266	global: false,
	1267	colorStops: [
	1268	{
	1269	offset: 0,
	1270	color: 'rgba(182,93,246)',
	1271	},
	1272	{
	1273	offset: 1,
	1274	color: 'rgba(182,93,246,0)',
	1275	},
	1276	],
	1277
	1278	},
	1279	},
	1280	},
	1281	{
	1282	name: '401底流浓度',//名称
	1283	type: 'bar',//类型
	1284	barWidth: 10,//宽度
	1285	data: gckz_401DL,//数值
	1286	z: 2,
	1287	itemStyle: {
	1288	color: {//渐变色
	1289	x: 0,
	1290	y: 0,
	1291	x2: 0,
	1292	y2: 1,
	1293	type: 'linear',
	1294	global: false,
	1295	colorStops: [
	1296	{
	1297	offset: 0,
	1298	color: 'rgba(248,109,202)',
	1299	},
	1300	{
	1301	offset: 1,
	1302	color: 'rgba(248,109,202,0)',
	1303	},
	1304	],
	1305	},
	1306	},
	1307	},
	1308	{
	1309	name: '402底流浓度',//名称
	1310	type: 'bar',//类型
	1311	barWidth: 10,//宽度
	1312	data: gckz_402DL,//数值
	1313	z: 2,
	1314	itemStyle: {
	1315	color: {//渐变色
	1316	x: 0,
	1317	y: 0,
	1318	x2: 0,
	1319	y2: 1,
	1320	type: 'linear',
	1321	global: false,
	1322	colorStops: [
	1323	{
	1324	offset: 0,
	1325	color: 'rgb(143,208,141)',
	1326	},
	1327	{
	1328	offset: 1,
	1329	color: 'rgba(143,208,141,0)',
	1330	},
	1331	],
	1332	},
	1333	},
	1334	},
	1335	{
	1336	name: '501底流浓度',
	1337	type: 'bar',
	1338	barWidth: 10,
	1339	data: gckz_501DL,
	1340	z: 1,
	1341	itemStyle: {
	1342	color: {
	1343	x: 0,
	1344	y: 0,
	1345	x2: 0,
	1346	y2: 1,
	1347	type: 'linear',
	1348	global: false,
	1349	colorStops: [
	1350	{
	1351	offset: 0,
	1352	color: 'rgba(3, 181, 243)',
	1353	},
	1354	{
	1355	offset: 1,
	1356	color: 'rgba(2, 190, 251,0)',
	1357	},
	1358	],
	1359
	1360	},
	1361	},
	1362	},
	1363	{
	1364	name: '配煤混合煤热值',//名称
	1365	type: 'bar',//类型
	1366	barWidth: 10,//宽度
	1367	data: gckz_HHM_RZ,//数值
	1368	z: 2,
	1369	itemStyle: {
	1370	color: {//渐变色
	1371	x: 0,
	1372	y: 0,
	1373	x2: 0,
	1374	y2: 1,
	1375	type: 'linear',
	1376	global: false,
	1377	colorStops: [
	1378	{
	1379	offset: 0,
	1380	color: 'rgb(248,84,109)',
	1381	},
	1382	{
	1383	offset: 1,
	1384	color: 'rgba(248,84,109,0)',
	1385	},
	1386	],
	1387	},
	1388	},
	1389	},
	1390	],
	1391	legend: {
	1392	type: 'scroll',
	1393	right: '70',
	1394	textStyle: {
	1395	// 图例文字的样式
	1396	color: '#fff',
	1397	fontSize: 14,
	1398	padding: [2, 0, 0, 2],
	1399	fontWeight: 100,
	1400	},
	1401	},
	1402	};
	1403	this.chartUnder2.setOption(optionGckz);
	1404
	1405	let optionGl = {
	1406	tooltip: {//提示框组件
	1407	trigger: 'axis',//触发类型柱状图
	1408	axisPointer: {type: 'shadow'} //触发效果移动上去背景效果
	1409	},
	1410	grid: {
	1411	top: '15%',
	1412	left: '3%',
	1413	right: '4%',
	1414	bottom: '3%',
	1415	containLabel: true
	1416	},
	1417	xAxis: [//x轴
	1418	{
	1419	type: 'category',//坐标轴类型离散
	1420	data: xData,//数据
	1421	axisTick: false,//是否显示刻度
	1422	axisLine: {//坐标轴样式
	1423	show: true,//是否显示
	1424	lineStyle: {//线的样式
	1425	type: 'dashed'//线的类型虚线
	1426	},
	1427	},
	1428	axisLabel: {
	1429	color: "#DEDEDE"
	1430	}
	1431	},
	1432	],
	1433	yAxis: [//y轴
	1434	{
	1435	min: 0,//最小
	1436	max: 100,//最大
	1437	interval: 100,//相差
	1438	type: 'value',//连续类型
	1439	axisLine: {//坐标轴样式
	1440	show: false, //不显示
	1441	},
	1442	splitLine: {//分隔辅助线
	1443	lineStyle: {
	1444	type: 'dashed',//线的类型虚线0
	1445	opacity: 0.2//透明度
	1446	},
	1447	},
	1448	axisLabel: {
	1449	color: "#DEDEDE"
	1450	}
	1451	},
	1452	],
	1453	series: [//系统列表
	1454	{
	1455	name: '检修率',
	1456	type: 'bar',
	1457	barWidth: 11,
	1458	data: gl_jxl,
	1459	z: 1,
	1460	itemStyle: {
	1461	color: {
	1462	x: 0,
	1463	y: 0,
	1464	x2: 0,
	1465	y2: 1,
	1466	type: 'linear',
	1467	global: false,
	1468	colorStops: [
	1469	{
	1470	offset: 0,
	1471	color: 'rgba(3, 181, 243)',
	1472	},
	1473	{
	1474	offset: 1,
	1475	color: 'rgba(2, 190, 251,0)',
	1476	},
	1477	],
	1478
	1479	},
	1480	},
	1481	},
	1482	{
	1483	name: '生产运行评价',//名称
	1484	type: 'bar',//类型
	1485	barWidth: 11,//宽度
	1486	data: gl_kjl,//数值
	1487	z: 2,
	1488	itemStyle: {
	1489	color: {//渐变色
	1490	x: 0,
	1491	y: 0,
	1492	x2: 0,
	1493	y2: 1,
	1494	type: 'linear',
	1495	global: false,
	1496	colorStops: [
	1497	{
	1498	offset: 0,
	1499	color: 'rgba(6, 244, 231)',
	1500	},
	1501	{
	1502	offset: 1,
	1503	color: 'rgba(6, 244, 231,0)',
	1504	},
	1505	],
	1506	},
	1507	},
	1508	},
	1509	{
	1510	name: '考勤率',//名称
	1511	type: 'bar',//类型
	1512	barWidth: 11,//宽度
	1513	data: gl_kql,//数值
	1514	z: 2,
	1515	itemStyle: {
	1516	color: {//渐变色
	1517	x: 0,
	1518	y: 0,
	1519	x2: 0,
	1520	y2: 1,
	1521	type: 'linear',
	1522	global: false,
	1523	colorStops: [
	1524	{
	1525	offset: 0,
	1526	color: '#FFAA5D',
	1527	},
	1528	{
	1529	offset: 1,
	1530	color: 'rgba(255,170,93,0.14)',
	1531	},
	1532	],
	1533	},
	1534	},
	1535	}
	1536	],
	1537	legend: {
	1538	right: '70',
	1539	textStyle: {
	1540	// 图例文字的样式
	1541	color: '#fff',
	1542	fontSize: 14,
	1543	padding: [2, 0, 0, 2],
	1544	fontWeight: 100,
	1545	},
	1546	},
	1547	};
	1548	this.chartUnder3.setOption(optionGl);
	1549	})
	1550	}
	1551	}
	1552	}
	1553
	1554	</script>
	1555	<style scoped>
	1556	#data-evaluate-body {
	1557	width: 100%;
	1558	height: 100%;
	1559	padding: 10px;
	1560	display: flex;
	1561	flex-direction: column;
	1562	}
	1563
	1564	#data-upper {
	1565	width: 100%;
	1566	height: 32%;
	1567	display: flex;
	1568	flex-direction: row;
	1569	}
	1570
	1571	.data-upper-1 {
	1572	width: 20%;
	1573	height: 100%;
	1574	display: flex;
	1575	flex-direction: column;
	1576	padding-left: 15px;
	1577	margin-top: -16px;
	1578	}
	1579
	1580	.data-upper-1-1 {
	1581	width: 100%;
	1582	height: 30%;
	1583	display: flex;
	1584	flex-direction: row;
	1585	margin-top: -48px;
	1586	padding-left: 30px;
	1587	}
	1588
	1589	.data-upper-1-2 {
	1590	width: 100%;
	1591	height: 70%;
	1592	}
	1593
	1594	.data-upper-content-1 {
	1595	width: 30%;
	1596	height: 100%;
	1597	font-size: 40px;
	1598	font-weight: bold;
	1599	color: #5BFD9E;
	1600	}
	1601
	1602	.data-upper-content-2 {
	1603	width: 50%;
	1604	height: 100%;
	1605	font-size: 14px;
	1606	color: #80D8FE;
	1607	display: flex;
	1608	flex-direction: column;
	1609	padding-top: 10px;
	1610	}
	1611
	1612	.data-upper-content-3 {
	1613	padding-top: 14px;
	1614	margin-right: -70px;
	1615	}
	1616
	1617	.data-upper-2 {
	1618	width: 30%;
	1619	height: 100%;
	1620	padding-top: 15px;
	1621	padding-left: 5px;
	1622	}
	1623
	1624	.data-upper-3 {
	1625	width: 20%;
	1626	height: 100%;
	1627	padding-top: 15px;
	1628	padding-left: 5px;
	1629	}
	1630
	1631	.data-upper-4 {
	1632	width: 29%;
	1633	height: 100%;
	1634	}
	1635
	1636	#data-middle {
	1637	width: 100%;
	1638	height: 27%;
	1639	padding: 0 10px 10px 10px;
	1640	display: flex;
	1641	flex-direction: row;
	1642	}
	1643
	1644	.data-middle-sub {
	1645	width: 33%;
	1646	height: 100%;
	1647	display: flex;
	1648	flex-direction: column;
	1649	}
	1650
	1651	#data-under {
	1652	width: 100%;
	1653	height: 27%;
	1654	display: flex;
	1655	flex-direction: row;
	1656	}
	1657
	1658	.data-under-sub {
	1659	width: 33%;
	1660	height: 100%;
	1661	padding: 5px 10px 5px 10px;
	1662	margin-bottom: 5px;
	1663	}
	1664
	1665	.data-title {
	1666	width: 100%;
	1667	height: 7%;
	1668	padding: 10px;
	1669	display: flex;
	1670	flex-direction: row;
	1671	}
	1672
	1673	.data-title-sub {
	1674	width: 33%;
	1675	height: 100%;
	1676	padding-left: 20px;
	1677	}
	1678
	1679	.chart-line {
	1680	width: 100%;
	1681	height: 100%;
	1682	}
	1683	.chart-line-1 {
	1684	width: 100%;
	1685	height: 80%;
	1686	}
	1687	.pf-text {
	1688	width: 90%;
	1689	height: 20%;
	1690	margin: 0 20px -5px 20px;
	1691	padding: 5px;
	1692	background-color: rgba(135, 206, 235, 0.2);
	1693	font-size: 14px;
	1694	}
	1695
	1696	</style>