<template>
	<view>
		<u-sticky>
			<HeaderNav title="绩效"></HeaderNav>
		</u-sticky>
		<view class="per-title" @click="changeOpen" style="margin-top: 10px;">
			<view class="personal-choose">
				<view class="personal-big">个人绩效</view>
				<view class="personal-small">（近6个月）</view>
			</view>
			<view>
				<view v-if="openPerson===false">
					<u-icon name="arrow-up"></u-icon>
				</view>
				<view v-if="openPerson===true">
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<!-- <view :class="chooseIndex === false?'tissue-choose':'tissue'" @click="changeTisIndex">组织绩效</view> -->
		</view>
		<!-- </u-sticky> -->
		<view class="performance" v-if="openPerson===true">


			<view>
				<view class="task-num">
					<!-- <view style="font-size: 20px;font-weight: bold;margin-bottom: 20px;">
				我的数据
			</view> -->
					<view class="data-content">
						<view class="data-wrap">
							<view class="data-title">
								<!-- <view class="data-badge" style="background-color: #000000E6"></view> -->
								<text class="data-text">总任务数</text>
							</view>

							<view class="data-num">{{chartData.TotalCount || 0}}</view>

						</view>
						<view class="data-wrap">
							<view class="data-title">
								<!-- <view class="data-badge" style="background-color: #91CB74"></view> -->
								<text class="data-text">待办数</text>
							</view>
							<view class="data-num" style="color: #91CB74">{{chartData.unfinishCount || 0}}</view>

						</view>
						<view class="data-wrap">
							<view class="data-title">
								<!-- <view class="data-badge" style="background-color: #FAC858"></view> -->
								<text class="data-text">超时待办数</text>
							</view>
							<view class="data-num" style="color: #FAC858">{{chartData.timeOverWaitCount || 0}}</view>

						</view>
						<view class="data-wrap">
							<view class="data-title">
								<!-- <view class="data-badge" style="background-color: #EE6666"></view> -->
								<text class="data-text">已办事项</text>
							</view>
							<view class="data-num" style="color: #EE6666">{{
		  				(chartData.doneCount || 0) + (chartData.timeOverCount || 0)
		  			}}</view>

						</view>
						<view class="data-wrap">
							<view class="data-title">
								<!-- <view class="data-badge" style="background-color: #73C0DE"></view> -->
								<text class="data-text">完成率</text>
							</view>
							<view style="display: flex;flex-direction: row;align-items: flex-end;">
								<view class="data-num" style="color: #73C0DE">{{allFinishRate}}</view>
								<view style="font-size: 12px;margin-bottom: 3px;margin-left: 2px;">%</view>
							</view>


						</view>
						<view class="data-wrap">
							<view class="data-title">
								<!-- <view class="data-badge" style="background-color: #3CA272"></view> -->
								<text class="data-text">及时完成率</text>
							</view>
							<view style="display: flex;flex-direction: row;align-items: flex-end;">
								<view class="data-num" style="color: #3CA272">{{finishRate}}</view>
								<view style="font-size: 12px;margin-bottom: 3px;margin-left: 2px;">%</view>
							</view>

						</view>
						<view class="data-wrap">
							<view class="data-title">
								<!-- <view class="data-badge" style="background-color: #3CA272"></view> -->
								<text class="data-text">个人学时</text>
							</view>
							<view style="display: flex;flex-direction: row;align-items: flex-end;">
								<view class="data-num" style="color: #3CA272">{{trainHours}}</view>
								<view style="font-size: 12px;margin-bottom: 3px;margin-left: 2px;"></view>
							</view>

						</view>

					</view>
				</view>
				<view class="line-chart">
					<view class="line-chart-title">
						<i class="iconfont icon-zhexiantu1" style="font-size: 16px;margin-right: 5px;"></i>
						任务及时完成率
					</view>
					<view class="charts-view">
						<qiun-data-charts type="line" :opts="lineOpts" :chartData="lineChartData" />
					</view>

				</view>
				<!-- <view style="font-size: 20px;font-weight: bold;margin: 20px 0px;">
			数据分析
		</view> -->
				<view class="table">
					<uni-table style="width: 100%;border-radius: 8px;" border stripe emptyText="暂无更多数据">
						<!-- 表头行 -->
						<uni-tr style="background-color: #e6f8ff;">
							<uni-th width="100" align="center">月份</uni-th>
							<uni-th width="60" align="center">任务数</uni-th>
							<uni-th width="60" align="center">完成率</uni-th>
							<uni-th width="90" align="center">及时完成率</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item, key) in tableData" :key="key">
							<uni-td align="center">{{item.MONTHStr}}</uni-td>
							<uni-td align="center">{{item.TOTAL_QTY}}</uni-td>
							<uni-td align="center">{{item.FINISH_RATE}}%</uni-td>
							<uni-td align="center">{{item.NORMAL_FINISH_RATE}}%</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
		</view>
		<view v-if="this.localMintype.length !== 0">
			<view class="per-title">
				<!-- <view :class="chooseIndex === true? 'personal-choose':'personal'" @click="changePerIndex">个人绩效</view> -->
				<view class="tissue-choose">组织绩效</view>
				<view class="tissue-pro" @click="changePicker">
					<view>
						<view class="production" v-if="MineType === '10'">生产单元：选矿厂</view>
						<view class="production" v-if="MineType === '20'">生产单元：尾矿库</view>
						<view class="production" v-if="MineType === '30'">生产单元：露天矿</view>
					</view>
					<view class="production" v-if="MineType==null">生产单元：{{columns[0][0]}}</view>

					<u-icon name="arrow-down" size="12"></u-icon>
				</view>
			</view>
			<view class="performance">
				<view>
					<view class="standard-content" v-if="standardScore != ''">
						<view class="standard-wrap">
							<view class="standard-left">
								<view>标准化得分</view>
								<view v-if="MineType === '10'">选矿厂</view>
								<view v-if="MineType === '20'">尾矿库</view>
								<view v-if="MineType === '30'">露天矿</view>
							</view>
							<view class="standard-right">
								<view>{{standardScore}}</view>
							</view>

						</view>
					</view>

					<view class="line-chart">
						<view class="line-chart-title">
							<i class="iconfont icon-bingtu" style="font-size: 16px;margin-right: 5px;"></i>
							风险等级占比
						</view>
						<view class="charts-view">
							<qiun-data-charts type="ring" :opts="riskOpts" :chartData="riskChartData" />
						</view>

					</view>
					<view class="line-chart">
						<view class="line-chart-title">
							<i class="iconfont icon-zhuzhuangtu" style="font-size: 16px;margin-right: 5px;"></i>
							班组活动完成率
						</view>
						<view class="charts-view" :style="{'height':cHeight}">
							<qiun-data-charts type="bar" :opts="classOpts" :chartData="classChartData" />
						</view>

					</view>
					<!-- <view class="line-chart"> -->
					<view class="line-chart-bottom">
						<view class="line-chart-title">
							<i class="iconfont icon-zhuzhuangtu" style="font-size: 16px;margin-right: 5px;"></i>
							工作票完成数
						</view>
						<view class="charts-view" :style="{'height':wHeight}">
							<qiun-data-charts type="bar" :opts="workOpts" :chartData="workChartData" />
						</view>

					</view>
					<!-- <view class="line-chart">
						<view class="line-chart-title">
							<i class="iconfont icon-zhuzhuangtu" style="font-size: 16px;margin-right: 5px;"></i>
							安全检查次数统计
						</view>
						<view class="charts-view">
							<qiun-data-charts type="column" :opts="safeOpts" :chartData="safeChartData" />
						</view>
					</view> -->
					<!-- <view class="line-chart-bottom">
						<view class="line-chart-title">
							<i class="iconfont icon-zhuzhuangtu" style="font-size: 16px;margin-right: 5px;"></i>
							月度隐患整改情况
						</view>
						<view class="charts-view">
							<qiun-data-charts type="column" :opts="dangerOpts" :chartData="dangerChartData" />
						</view>
					</view> -->

				</view>
			</view>
		</view>

		<u-picker :show="modalShow" :columns="columns" @confirm="confirm" @change="changeHandler"
			@cancel="cancel"></u-picker>
	</view>

</template>

<script>
	import {
		getChartData,
		getStandardScore,
		getRiskLevel,
		getClassActive,
		getWorkTicket,
		getDangerTotal,
		getTrainHours
	} from '../../services/app'
	import {
		initFilter,
		extendOrder,
		extendRule
	} from '../../utils/common'
	import HeaderNav from '@/components/custom/head-nav.vue';

	let uChartsInstance = {}
	export default {
		components: {
			HeaderNav
		},
		data() {
			return {
				trainHours: '',
				chooseIndex: true,
				modalShow: false,
				columns: [],
				chartData: {},
				tableData: [],
				lineChartData: {},
				wordChartData: {},
				wordOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					enableScroll: false,
					extra: {
						word: {
							type: "normal",
							autoColors: false
						}
					}
				},
				lineOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [35, 10, 0, 10],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						unit: '%'
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				MineType: '',
				MineCurrentType: '',
				localMintype: [],
				standardScore: 0,
				openPerson: true,
				allNum: 0,
				riskChartData: {},
				classChartData: {},
				riskColor: [],
				riskOpts: {

				},
				classOpts: {
					// height:300,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [25, 60, 25, 5],
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disabled: true,
						boundaryGap: "justify",
						disableGrid: true,
						min: 0,
						axisLine: false,
						max: 40,
					},
					yAxis: {
						axisLine: false,
						disableGrid: true,
						gridColor: '#fff',
					},
					extra: {
						bar: {
							// type: "group",
							type: "group",
							width: 10,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							// linearType: "custom",
							barBorderCircle: true,
							// seriesGap: 2,
							categoryGap: 2
						}
					}
				},
				workChartData: {},
				workOpts: {
					color: ["#1890FF", "#f6841a", "#cc0404"],

					padding: [25, 40, 25, 5],
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disabled: true,
						boundaryGap: "justify",
						disableGrid: true,
						min: 0,
						axisLine: false,
						max: 40,
					},
					yAxis: {
						axisLine: false,
						disableGrid: true,
						gridColor: '#fff',
					},
					extra: {
						bar: {
							type: "group",
							width: 10,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							// linearType: "custom",
							barBorderCircle: true,
							// seriesGap: 2,
							categoryGap: 2
						}
					}
				},
				safeChartData: {},
				safeOpts: {
					color: ["#4285F4", "#72b85b", "#c92a2a", "#ffa94d"],
					dataLabel: false,
					padding: [25, 15, 0, 15],
					enableScroll: false,
					legend: {
						float: 'left',
						lineHeight: 20,
					},
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: false,
					},
					extra: {
						column: {
							type: "stack",
							width: 20,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							labelPosition: "center"
						}
					}
				},
				dangerChartData: {},
				dangerOpts: {
					color: ["#72b85b", "#f6841a", "#cc0404"],
					padding: [25, 15, 0, 15],
					enableScroll: false,
					legend: {
						float: 'left',
						lineHeight: 20,
					},
					xAxis: {
						disableGrid: true,
						// title: "单位：年"
					},
					yAxis: {
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: false,
					},
					extra: {
						column: {
							type: "group",
							width: 10,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							seriesGap: 4,

						}
					}
				},
				cHeight: '',
				wHeight: '',
			}

		},
		onReady() {
			// this.getLineServerData();
			// this.getWordServerData();
		},
		async onShow() {
			this.getTrainHours()
			this.MineType = uni.getStorageSync('MineType')
			// this.MineCurrentType =uni.getStorageSync('MineType')
			const orgId = uni.getStorageSync('orgId')
			const {
				User
			} = uni.getStorageSync('appInfo')


			let newarr = [];
			if (User.MineType) {
				this.localMintype = User.MineType.split(",");
				if (this.localMintype.length !== 0) {
					if (uni.getStorageSync('MineType') == '') {
						uni.setStorageSync('MineType', this.localMintype[0])
						this.MineType = this.localMintype[0]
						// this.MineType = this.localMintype[0]
					}
					if (User.MineType.split(",").indexOf("10") > -1) {
						newarr.push('选矿厂')
						this.columns = [newarr]
					}
					if (User.MineType.split(",").indexOf("20") > -1) {

						newarr.push('尾矿库')
						this.columns = [newarr]
					}
					if (User.MineType.split(",").indexOf("30") > -1) {
						newarr.push('露天矿')
						this.columns = [newarr]
					}

					if (this.MineType === '10' || this.MineType === '20') {
						this.MineCurrentType = '10'
					} else {
						this.MineCurrentType = '30'
					}
				}
			}

			const curDate = new Date()
			const curYear = curDate.getFullYear()
			const curMonth = curDate.getMonth()
			let y, m, d;
			if (curMonth > 5) {
				y = curYear
				m = curMonth - 5
			} else {
				y = curYear - 1
				m = 12 + (curMonth - 5)
			}
			d = curDate.getDate()

			const startTime = uni.$u.timeFormat(new Date(y, m, d), 'yyyy-mm-dd')
			const endTime = uni.$u.timeFormat(new Date(), 'yyyy-mm-dd')
			let json = initFilter(orgId, User.NAME, "", "", "", startTime, endTime);
			const res = await getChartData(json)
			if (res.IsSuccessful) {
				this.chartData = res.Data
				const preLineChartData = (res.Data?.groupDataLine || []).splice(-6, 6)
				const lineChartConfig = {
					categories: preLineChartData.map(i => i.MONTHStr.split('年')[1]),
					series: [{
							name: "完成率",
							data: preLineChartData.map(i => i.FINISH_RATE)
						},
						{
							name: "及时完成率",
							data: preLineChartData.map(i => i.NORMAL_FINISH_RATE)
						}
					]
				}
				this.lineChartData = JSON.parse(JSON.stringify(lineChartConfig));
				this.tableData = res.Data?.groupData || []
			}
			this.getStandard()
			this.getRiskLevel()
			this.getClassActive()
			this.getWorkTicket()
			// this.getDangerTotal()

		},
		methods: {
			changePicker() {
				this.modalShow = true
			},
			changeOpen() {
				this.openPerson = !this.openPerson
			},
			confirm(e) {
				this.modalShow = false
				if (e.value[0] === '选矿厂') {
					uni.setStorageSync('MineType', '10')
					uni.reLaunch({
						url: '/pages/performance/index1'
					})
				}
				if (e.value[0] === '尾矿库') {
					uni.setStorageSync('MineType', '20')
					uni.reLaunch({
						url: '/pages/performance/index1'
					})

				}
				if (e.value[0] === '露天矿') {
					uni.setStorageSync('MineType', '30')
					uni.reLaunch({
						url: '/pages/performance/index1'
					})
				}

			},
			cancel() {
				this.modalShow = false
			},
			changeHandler(e) {
				console.log(e, 'eeeee')
			},
			async getTrainHours() {
				let json = initFilter();
				const res = await getTrainHours(json)
				if (res.IsSuccessful) {
					let nums = res.Data.TOTAL_HOURS
					this.trainHours = nums.toFixed(2)
				}
			},
			async getStandard() {
				const orgId = uni.getStorageSync('orgId')
				let json = initFilter(orgId, this.MineCurrentType);
				const res = await getStandardScore(json)
				if (res.IsSuccessful && res.Data && res.Data.RESULT_TOTAL && res.Data.STAND_TOTAL != 0) {
					debugger
					this.standardScore = (Number(res.Data.RESULT_TOTAL / res.Data.STAND_TOTAL) * 100).toFixed(2);
				} else {
					this.standardScore = ''
				}

			},
			async getRiskLevel() {
				const orgId = uni.getStorageSync('orgId')
				let json = initFilter(orgId);
				extendOrder(json, "CREATE_TIME", 0);
				extendRule(json, "COLOR", 1, this.MineCurrentType);
				const res = await getRiskLevel(json)
				if (res.IsSuccessful) {
					let riskLevel = [];
					let showData = [];
					let color = [];
					res.Data.forEach((item) => {
						riskLevel.push(item.RISK_LEVEL);
						// color.push(item.COLOR);
						showData.push({
							value: item.COUNT,
							name: item.RISK_LEVEL,
							// labelShow:false
						});
					});
					showData.map((item) => {
						this.allNum = Number(this.allNum + item.value)
					})
					setTimeout(() => {
						let riskLevelConfig = {
							series: [{
								data: showData,
							}],
						};
						this.riskOpts = {
								rotate: false,
								rotateLock: false,
								color: ['#c92a2a', '#ffa94d', '#ffe066', '#4285F4'],
								padding: [5, 5, 5, 5],
								dataLabel: true,
								enableScroll: false,
								legend: {
									show: true,
									position: "bottom",
									lineHeight: 25,
									formatter: function(val) {
										return val + '000000'
									}
								},
								title: {
									name: "",
									fontSize: 15,
									color: "#666666"
								},
								subtitle: {
									name: this.allNum,
									fontSize: 25,
									color: "#666666"
								},
								extra: {
									ring: {
										ringWidth: 20,
										activeOpacity: 0.5,
										activeRadius: 10,
										offsetAngle: 0,
										labelWidth: 15,
										border: true,
										borderWidth: 3,
										borderColor: "#FFFFFF"
									}
								}
							},

							this.riskChartData = JSON.parse(JSON.stringify(riskLevelConfig));
					}, 500)


				}
			},
			async getClassActive() {
				const orgId = uni.getStorageSync('orgId')
				let json = initFilter(
					orgId,
					this.MineCurrentType,
					"NUM",
					"desc",
					undefined,
					10
				);
				const res = await getClassActive(json)
				if (res.IsSuccessful) {
					this.cHeight = res.Data.length * 30 + 20 + 'px'
					let teamName = [];
					let finishQty = [];
					res.Data.forEach((item) => {
						teamName.push(item.TEAM_NAME);
						let finishData = Number(item.CALC * 100).toFixed(2);
						finishQty.push(finishData);
					});
					setTimeout(() => {
						let classActiveConfig = {
							categories: teamName,
							series: [{
								name: "完成率",
								data: finishQty,
							}],
						};

						this.classChartData = JSON.parse(JSON.stringify(classActiveConfig));
					}, 500)
				}
			},
			async getWorkTicket() {
				const orgId = uni.getStorageSync('orgId')
				let json = initFilter(
					orgId,
					this.MineCurrentType,
					"NUM",
					"desc",
				);
				const res = await getWorkTicket(json)
				if (res.IsSuccessful) {
					this.wHeight = res.Data.length * 30 + 20 + 'px'
					let teamName = [];
					let wattingQty = [];
					let finishQty = [];
					let overFinishQty = [];
					let totalQty = [];
					res.Data.forEach((item) => {
						teamName.push(item.TEAM_NAME);
						wattingQty.push(item.WAITTING_COUNT);
						finishQty.push(item.FINISH_COUNT);
						overFinishQty.push(item.OVER_FINISH_COUNT);
						totalQty.push(item.TOTAL_COUNT);
					});
					setTimeout(() => {
						let workTicketConfig = {
							categories: teamName,
							series: [{
								name: "正常已办",
								data: finishQty,
							}],
						};

						this.workChartData = JSON.parse(JSON.stringify(workTicketConfig));
					}, 500)
				}
			},
			// async getDangerTotal() {
			// 	const orgId = uni.getStorageSync('orgId')
			// 	let json = initFilter(
			// 		orgId,
			// 		this.MineCurrentType,
			// 		"NUM",
			// 	);
			// 	const res = await getDangerTotal(json)
			// 	if (res.IsSuccessful) {
			// 		let xData = [];
			// 		let data1 = [];
			// 		let data2 = [];
			// 		let data3 = [];
			// 		let seriesName = [];
			// 		if (res.Data.ListSafeCheckYearMonth) {
			// 			let ListSafeCheckYearMonth = res.Data.ListSafeCheckYearMonth.slice(-6)
			// 			ListSafeCheckYearMonth.forEach((item) => {
			// 				xData.push(item.MONTH + '月')
			// 				seriesName = item.listSOURCENAME
			// 				data1.push(item.listListCount);
			// 			});
			// 			for (var i = 0; i < ListSafeCheckYearMonth[0].listListCount.length; i++) {
			// 				for (var j = 0; j < ListSafeCheckYearMonth.length; j++) {
			// 					data2.push(data1[j][i]);
			// 				}
			// 			}
			// 			for (var i = 0; i < data2.length; i += ListSafeCheckYearMonth.length) {
			// 				data3.push(data2.slice(i, i + ListSafeCheckYearMonth.length))
			// 			}
			// 			setTimeout(() => {
			// 				let safeCheckConfig = {
			// 					categories: xData,
			// 					series: [{
			// 						name: seriesName[0],
			// 						data: data3[0],
			// 					}, {
			// 						name: seriesName[1],
			// 						data: data3[1],
			// 					}, {
			// 						name: seriesName[2],
			// 						data: data3[2],
			// 					}, {
			// 						name: seriesName[3],
			// 						data: data3[3],
			// 					}],
			// 				};

			// 				this.safeChartData = JSON.parse(JSON.stringify(safeCheckConfig));
			// 			}, 500);
			// 		}

			// 		let xName = [];
			// 		let yName = [];
			// 		let legendName = [];
			// 		res.Data.ListC.forEach((item) => {
			// 			let name = item.NAME.split(",");
			// 			xName.push(name);
			// 			legendName.push(item.SOURCENAME);
			// 			let valu = item.Val.split(",");
			// 			yName.push(valu);
			// 		});
			// 		let month = xName[0].map((item) => {
			// 			return item.replace("月", "");
			// 		});

			// 		setTimeout(() => {
			// 			let monthDangerConfig = {
			// 				categories: xName[0],
			// 				series: [{
			// 						name: legendName[0],
			// 						// index: 1,
			// 						type: "column",
			// 						data: yName[0]
			// 					},
			// 					{
			// 						name: legendName[1],
			// 						// index: 1,
			// 						type: "column",
			// 						data: yName[1]
			// 					},
			// 					{
			// 						name: legendName[2],
			// 						// index: 1,
			// 						type: "column",
			// 						data: yName[2]
			// 					},

			// 				],
			// 			};

			// 			this.dangerChartData = JSON.parse(JSON.stringify(monthDangerConfig));
			// 		}, 500)

			// 	}
			// }
		},
		computed: {
			allFinishRate() {
				const {
					TotalCount,
					timeOverCount,
					doneCount
				} = this.chartData
				if (TotalCount) {
					return ((doneCount + timeOverCount) / TotalCount * 100).toFixed(1)
				}
				return 0
			},
			finishRate() {
				const {
					TotalCount,
					doneCount
				} = this.chartData
				if (TotalCount) {
					return (doneCount / TotalCount * 100).toFixed(1)
				}
				return 0
			},
		}
	}
</script>

<style scoped>
	.performance {
		padding: 16px;
	}

	.per-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 10px 30px;
		background-color: #fff;
		/* box-shadow: 0px 0px 10px #dddddd; */

	}

	.personal-choose {
		font-size: 20px;
		color: #333;
		/* margin-right: 15px; */
		/* font-weight: bold; */
		display: flex;
		flex-direction: row;
		align-items: flex-end;
	}

	.personal-big {
		font-size: 20px;
		font-weight: bold;
	}

	.personal-small {
		font-size: 12px;
		/* font-weight: bold; */
	}

	.tissue-choose {
		font-size: 20px;
		color: #333;
		/* margin-left: 15px; */
		font-weight: bold;

	}

	.task-num {
		display: flex;
		flex-direction: column;
		padding-bottom: 20px;
		border-bottom: 1px solid #e5e5e5;
	}

	.data-content {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		/* background-color: #f6faf8; */
		/* border: 1px solid #e5e5e5; */
	}

	.data-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 8px 10px;
		/* background-color: #f6faf8; */
		margin: 5px;
		border-radius: 5px;
		border: 1px solid #e5e5e5;
	}

	.data-title {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.data-badge {
		width: 2px;
		height: 8px;
		/* background-color: #91CB74; */
		margin-right: 4px;
	}

	.data-num {
		font-size: 24px;
		/* margin-left: 4px; */
		margin-top: 5px;
		font-weight: bold;
	}

	.data-text {
		font-size: 14px;
	}

	.word-chart {
		border: 1px solid #e5e5e5;
		padding: 10px;
		margin-bottom: 16px;
	}

	.line-chart {
		margin-top: 26px;
		margin-bottom: 26px;
		width: 100%;
		padding-bottom: 40px;
		border-bottom: 1px solid #e5e5e5;
		/* border: 1px solid #e5e5e5;
		border-radius: 10px; */
	}

	.line-chart-bottom {
		margin-top: 26px;
		margin-bottom: 26px;
		width: 100%;
		padding-bottom: 20px;
		/* border-bottom: 1px solid #e5e5e5; */
		/* border: 1px solid #e5e5e5;
		border-radius: 10px; */
	}

	.charts-view {
		border: 1px solid #e5e5e5;
		border-radius: 10px;
		/* height: 500px; */
	}

	.charts-view-work {
		border: 1px solid #e5e5e5;
		border-radius: 10px;
		height: 500px;
	}

	.charts-view-class {
		border: 1px solid #e5e5e5;
		border-radius: 10px;
	}

	.line-chart-title {
		font-weight: bold;
		font-size: 16px;
		/* text-align: center; */
		margin-bottom: 16px;
		margin-left: 14px;
		color: #333;
	}

	.grid-card {
		margin-bottom: 26px;
		border: 1px solid #e5e5e5;
		border-radius: 8px;
		padding: 8px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box .num {
		font-size: 30px;
		font-weight: bold;
	}

	.grid-item-box .text {
		color: rgba(0, 0, 0, .65);
		font-size: 14px;
	}

	.table {
		padding-bottom: 40px;
		border-bottom: 1px solid #e5e5e5;

	}

	.tissue-pro {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.production {
		font-size: 14px;
		margin-right: 15px;
		color: #999;
	}

	.open {
		font-size: 14px;
		/* margin-right: 15px; */
		color: #999;
		font-weight: bold;
		/* border: 1px solid #e5e5e5; */
		padding: 3px 15px;
		border-radius: 10px;
		background-color: #e5e5e5;
	}

	.standard-content {
		padding-bottom: 40px;
		border-bottom: 1px solid #e5e5e5;
	}

	.standard-wrap {
		display: flex;
		flex-direction: row;
		/* justify-content: center; */
		width: 100%;
		height: 100px;
		border: 1px solid #e5e5e5;
		border-radius: 15px;
		/* background-color: #386AF6; */
		/* box-shadow: 1px 1px 10px #386AF6; */
		/* padding-bottom: 40px;
		border-bottom: 1px solid #e5e5e5; */
	}

	.standard-left {
		/* border: 1px solid #e5e5e5; */
		padding: 20px 0px;
		border-radius: 20px;
		width: 45%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
		color: #333333;
		font-size: 14px;
		font-weight: bold;
	}

	.standard-right {
		/* border: 1px solid #e5e5e5; */
		/* padding: 20px 40px; */
		/* border-radius: 20px; */
		width: 55%;
		color: #eb0404;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40px;
		border-left: 1px dashed #e5e5e5;
		border-left-width: 2px;

		/* height: 300px; */
	}
</style>