<template>
	<view class="container">
		<view  class="u-demo-block">
		    <u-swiper height="200"
		        :list="list3"
		        previousMargin="30"
		        nextMargin="30"
				indicator
				indicatorMode="line"
		        circular
		        :autoplay="true"
		        radius="5"
		        bgColor="#ffffff"
		    ></u-swiper>
		</view>
		
		<uni-card :isShadow="false"  padding="0">
			<template v-slot:title>
				<u-row customStyle="margin-bottom: 10px; margin-top: 10px" @click="departmentSubmitted">
				    <u-col span="8" class="card_header_title" style="padding-left: 15rpx;">
				        <view class="">待提交</view>
				    </u-col>
				    <u-col span="4">
				        <view class="card_header_mone">查看详情</view>
				    </u-col>
				</u-row>
			</template>
			<uni-list>
				<view class="" v-for="item in departmentWaitSubList.slice(0,4)" @click="lookWaitSub(item.id)">
					<uni-list-item  ellipsis="1" :title="item.title"  />
				</view>
				
				
			</uni-list>
		</uni-card>
		<uni-card :isShadow="false"  padding="0">
			<template v-slot:title>
				<u-row customStyle="margin-bottom: 10px; margin-top: 10px" @click="departmentWaitRatify">
				    <u-col span="8" class="card_header_title" style="padding-left: 15rpx;">
				        <view class="">待审核</view>
				    </u-col>
				    <u-col span="4">
				        <view class="card_header_mone">查看详情</view>
				    </u-col>
				</u-row>
			</template>
			<uni-list>
				<uni-list-item v-for="items in departmentWaitRatifyList.slice(0,4)" ellipsis="1" :title="items.tittle"/>
			</uni-list>
		</uni-card>
		<uni-card :title="chareTitle"   padding="0" >
			<picker mode="date" fields="month" v-model="pickerCurrentTime" @change="bindDateChange">
				<uni-easyinput prefixIcon="search" :value="pickerCurrentTime"  :clearable ="false"></uni-easyinput>
			</picker>
			
			<view class="swiper-box-cont">
				
					<swiper circular class="swiper-box" @change="chareChange" :current="charCurrent" :indicator-dots="false" :autoplay="false">
						
							<swiper-item :key="0">
								<u-loading-icon class="load_icon" :show="charIsShow[0].loading" color="#19be6b"
									:vertical="true"
									text="加载中"
								></u-loading-icon>
								<view v-show="charIsShow[0].charview" class="charts-box" id="anquan"></view>
							</swiper-item>
						
							<swiper-item :key="1">
								<u-loading-icon class="load_icon" :show="charIsShow[1].loading" color="#19be6b"
									:vertical="true"
									text="加载中"
								></u-loading-icon>
								<view v-show="charIsShow[1].charview" class="charts-box" id="huanbao"></view>
							</swiper-item>
						
							<swiper-item :key="2">
								<u-loading-icon class="load_icon" :show="charIsShow[2].loading" color="#19be6b"
									:vertical="true"
									text="加载中"
								></u-loading-icon>
								<view v-show="charIsShow[2].charview" class="charts-box" id="zhiyeweisheng"></view>
							</swiper-item>
						
							<swiper-item :key="3">
								<u-loading-icon class="load_icon" :show="charIsShow[3].loading" color="#19be6b"
									:vertical="true"
									text="加载中"
								></u-loading-icon>
								<view v-show="charIsShow[3].charview" class="charts-box" id="shengchandiaodu"></view>
							</swiper-item>
						
							<swiper-item :key="4">
								<u-loading-icon class="load_icon" :show="charIsShow[4].loading" color="#19be6b"
									:vertical="true"
									text="加载中"
								></u-loading-icon>
								<view v-show="charIsShow[4].charview" class="charts-box" id="gongyiguanli"></view>
							</swiper-item>
						
							<swiper-item :key="5">
								<u-loading-icon class="load_icon" :show="charIsShow[5].loading" color="#19be6b"
									:vertical="true"
									text="加载中"
								></u-loading-icon>
								<view v-show="charIsShow[5].charview" class="charts-box" id="shebeidianyi"></view>
							</swiper-item>
						
							<swiper-item :key="6">
								<u-loading-icon class="load_icon" :show="charIsShow[6].loading" color="#19be6b"
									:vertical="true"
									text="加载中"
								></u-loading-icon>
								<view v-show="charIsShow[6].charview" class="charts-box" id="laodongjilv"></view>
							</swiper-item>
						
							<swiper-item :key="7">
								<u-loading-icon class="load_icon" :show="charIsShow[7].loading" color="#19be6b"
									:vertical="true"
									text="加载中"
								></u-loading-icon>
								<view v-show="charIsShow[7].charview" class="charts-box" id="peixunjiaoyu"></view>
							</swiper-item>
						
						
						
						<!-- <uni-icons class='prev arrow' type="left" :color="'#5e6d82'" size="30" />
						<uni-icons  class='next arrow' type="right" :color="'#5e6d82'" size="30" /> -->
					</swiper>
					<uni-icons class='prev arrow' type="left" :color="'#5e6d82'" size="30" @click="prevCharIndex" />
					<uni-icons  class='next arrow' type="right" :color="'#5e6d82'" size="30"  @click="nextCharIndex" />
			</view>
			
			
			
			<view class="charts-box" id="chengji"></view>
		</uni-card>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chareTitle:'安全管理',
				charIsShow:[
					{
						loading:false,
						charview:true,
						title:"安全管理",
						target:"6",
						charKey:'anquan',
						data:[
						]
					},
					{
						loading:false,
						charview:true,
						title:"环保管理",
						target:"84",
						charKey:'huanbao',
						data:[]
					},
					{
						loading:false,
						charview:true,
						title:"职业卫生",
						target:"85",
						charKey:'zhiyeweisheng',
						data:[]
					},
					{
						loading:false,
						charview:true,
						title:"生产调度",
						target:"7",
						charKey:'shengchandiaodu',
						data:[]
					},
					{
						loading:false,
						charview:true,
						title:"工艺管理",
						target:"9",
						charKey:'gongyiguanli',
						data:[]
					},
					{
						loading:false,
						charview:true,
						title:"设备电仪",
						target:"8",
						charKey:'shebeidianyi',
						data:[]
					},
					{
						loading:false,
						charview:true,
						title:"劳动纪律",
						target:"10",
						charKey:'laodongjilv',
						data:[]
					},
					{
						loading:false,
						charview:true,
						title:"培训教育",
						target:"11",
						charKey:'peixunjiaoyu',
						data:[]
					}
					
				],
				charCurrent:0,
				title:"待提交",
				tispShow:false,
				tispTitle:"",
				list3: [
				    'http://new.hxgk.group/sj/1.png',
				    'http://new.hxgk.group/sj/2.png',
				    'http://new.hxgk.group/sj/3.png',
				],
				pickerCurrentTime:this.getCurrentMonth(),
				yserDate:0,
				monthDate:0,
				headerVerify:{
					userkey:"",
					token:"",
					userCont:""
				},
				departmentWaitSubList:[
					{
						id:"",
						title:""
					}
				],				//待提交
				departmentWaitRatifyList:[
					{
						id:"",
						title:""
					}
				]				//待审核
				
			}
		},
		onLoad () {
			let _this = this
			let systemCache = _this.$commonMethod.getSystemCacheDate('myCache')
			if(!systemCache){
				_this.$commonMethod.JumpUrl('/pages/login/login')
			}else{
				let currentTime = new Date().getTime() - systemCache.tokenTime
				if (currentTime >= 10000000){
					_this.$commonMethod.verifyPowerIsTrue('myCache')
				}
				console.log("_this.headerVerify------------>",currentTime)
			}
			_this.headerVerify.userkey = systemCache.userKey
			_this.headerVerify.token = systemCache.token
			_this.headerVerify.userCont = systemCache.userInfo
			_this.getCurrentMonth()
			
		},
		onReady(){	//页面加载完毕后启用
			let _this = this
			_this.getCurrentMonth()			//获取年月
			
			// _this.securityStatistics()						//安全管理
			_this.monthStatistics()		//月份绩效成绩
			_this.getDepartmentWaitSubmitted()			//待提交的定性考核
			_this.getDepartmentWaitRatify()				//待审核
			_this.getTargetChare(0)			//获取默认图表数据
		},
		methods: {
			//上一项
			prevCharIndex(){
				let prevDate = this.charCurrent - 1
				if(prevDate  >= 0){
					this.charCurrent = prevDate
				}else{
					this.charCurrent = 7
				}
				this.chareTitle = this.charIsShow[this.charCurrent].title
			},
			//下一项
			nextCharIndex(){
				let prevDate = this.charCurrent + 1
				if(prevDate  <= 7){
					this.charCurrent = prevDate
				}else{
					this.charCurrent = 0
				}
				this.chareTitle = this.charIsShow[this.charCurrent].title
			},
			//图表轮播变更事件
			chareChange(e) {
				this.charCurrent = e.detail.current;
				console.log("e-----1223123----->", e.detail.current)
				// for(let icp=0;icp<=7;icp++){
				// 	if(icp != this.charCurrent){
				// 		this.charIsShow[icp].loading = true
				// 		this.charIsShow[icp].charview = false
				// 	}
				// }
				this.getTargetChare(this.charCurrent)
			},
			//部门待提交项查看更多
			departmentSubmitted(){
				let _this = this
				_this.$commonMethod.JumpUrl('/pages/task/task')
			},
			//部门待审核项查看更多
			departmentWaitRatify(){
				let _this = this
				_this.$commonMethod.JumpUrl('/pages/login/login')
			},
			//日期改变
			bindDateChange(e){
				console.log('日期改变事件:', e.detail.value);
				this.pickerCurrentTime = e.detail.value
				let timeDay = e.detail.value+"-01 00:00:00"
				let timeVal = this.$timetostring.default.timeProcessing(timeDay)
				let date = new Date(timeVal);
				this.yserDate = date.getFullYear();
				this.monthDate = date.getMonth() + 1
				console.log(timeDay,"--------------->",timeVal,"--------------->",date,"--------------->",this.yserDate,"--------------->",this.monthDate)
				this.getTargetChare(this.charCurrent)
				// this.securityStatistics()
				this.monthStatistics()
			},
			//获取年月
			getCurrentMonth () {
				const date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth()
				this.yserDate = year
				this.monthDate = month
				month = month > 9 ? month : '0' + month
				return `${year}-${month}`
			},
			//安全管理
			securityStatistics(){
				let _this = this
				//获取安全管理数据
				uni.request({
					url:_this.$commonMethod.localhostUrl+'/api/quant/quantechart',
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						// 'User-Agent':250,
						'user-key': _this.headerVerify.userkey,
						'user-token': _this.headerVerify.token
					},
					method:'POST',//请求方式，必须为大写
					data:{
						// group:_this.headerVerify.userCont.company,
						targetid:['6'],	//指标id
						org: [
							"115",
							"282",
							"116",
							"349",
							"354",
							"126",
						],			//行政组织编号
						year:[_this.yserDate.toString()],		//年
						timeattribute:{		//时间辅助
							class:3,			//0：全年；1：半年；2：季度；3：月度
							time:[_this.monthDate]	//class->0(0),Time->1(1:上半年，2：下半年),class->2(1：第一季度，2：第二季度，3：第三季度，4：第四季度),class->3(1：1月....12：12月)
						}		,//月
						AccMethod:[1],
						analysisangle:1
					},
					success: (res) => {
						console.log('接口返回--login--3--',res.data);
						let callBackDate = res.data
						if(callBackDate.code == 0){
							let minVal = 0
							let maxVal = 0
							let chartMapDate = _this.$echartsMethod.echartsStruct
							chartMapDate.series=[]
							let chartDate = callBackDate.data
							chartMapDate.title.text = chartDate.legend[0]
							chartMapDate.xAxis.data = chartDate.xAxis
							
							
							chartDate.series.forEach(item=>{
								console.log("--------------->",item)
								let zhuAry = new Array
								item.data.forEach((datItem,index)=>{
									if(minVal == 0 || minVal > datItem){
										minVal = datItem
									}
									if(maxVal == 0 || maxVal < datItem){
										maxVal = datItem
									}
									let backColor = _this.$commonMethod.randomHexColor()
									if(_this.$commonMethod.colorCommon[index]){
										backColor  = _this.$commonMethod.colorCommon[index]
									}
									let zhuCont = {
										value: datItem,
										itemStyle: {
										    color:backColor
										},
										label: {
											show: true,
											position: 'top',
											color:'black'
										},
									}
									zhuAry.push(zhuCont)
								});
								let seriesDate = {
									name:item.name,
									data: zhuAry,
									type: 'bar',
									showBackground: true,
								}
								console.log(minVal)
								maxVal = 0
								// chartMapDate.yAxis.min=minVal
								// chartMapDate.yAxis.max=maxVal
								chartMapDate.series.push(seriesDate)
							})
							console.log("chartMapDate--->",chartMapDate)
							let myChart = _this.$echarts.init(document.getElementById('anquan'));
							// 绘制图表
							myChart.clear();
							myChart.setOption(chartMapDate)
							
						}else{
							_this.$refs.uToast.show({
								message: callBackDate.msg,
								duration: 1000 * 2,
								position:'bottom',
							})
						}
						
					},
					fail:function(e){
						console.log('接口返回--login--2--',e);
						_this.$refs.uToast.show({
							message: e,
							duration: 1000 * 2,
							position:'bottom',
						})
					}
				})
			},
			//月份绩效成绩
			monthStatistics(){
				let _this = this
				console.log(_this.headerVerify.userCont.company,"公司")
				//获取月份绩效成绩
				uni.request({
					url:_this.$commonMethod.localhostUrl+'/api/ststic/departmenttranscript',
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						// 'User-Agent':250,
						'user-key': _this.headerVerify.userkey,
						'user-token': _this.headerVerify.token
					},
					method:'POST',//请求方式，必须为大写
					data:{
						// group:_this.headerVerify.userCont.company,
						// department: [
						// 	"115",
						// 	"282",
						// 	"116",
						// 	"349",
						// 	"354",
						// 	"126",
						// ],			//行政组织编号
						year:[_this.yserDate.toString()],		//年
						month:[_this.monthDate],//月
					},
					success: (res) => {
						console.log('接口返回--绩效成绩--3--',res.data);
						let callBackDate = res.data
						if(callBackDate.code == 0){
							let minVal = 0
							let maxVal = 0
							let chartMapDateJixiao = _this.$echartsMethod.echartsStruct
							chartMapDateJixiao.series=[]
							let chartDateJx = callBackDate.data
							chartMapDateJixiao.title.text =_this.yserDate+"年"+_this.monthDate+ "份绩效成绩"
							chartMapDateJixiao.title.top =10
							console.log('接口返回--绩效成绩--4--',chartDateJx.echarsListOrg);
							chartMapDateJixiao.xAxis.data = chartDateJx.echarsListOrg.xline
							chartMapDateJixiao.xAxis.axisLabel.rotate = 60
							chartMapDateJixiao.grid.bottom = 70
							chartDateJx.echarsListOrg.cylindricaldata.forEach(item=>{
								console.log("--------------->",item)
								let zhuAry = new Array
								item.data.forEach((datItem,index)=>{
									if(minVal == 0 || minVal > datItem){
										minVal = datItem
									}
									if(maxVal == 0 || maxVal < datItem){
										maxVal = datItem
									}
									let backColor = _this.$commonMethod.randomHexColor()
									if(_this.$commonMethod.colorCommon[index]){
										backColor  = _this.$commonMethod.colorCommon[index]
									}
									let zhuCont = {
										value: datItem,
										itemStyle: {
										    color:backColor
										},
										label: {
											show: true,
											rotate: 70, // 旋转70度
											position: 'top',
											color:'black',
											distance: 20, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
											verticalAlign: 'middle',
											textStyle: { // 数值样式
												color: 'black',
												fontSize: 10
											}
										},
									}
									zhuAry.push(zhuCont)
								});
								let seriesDate = {
									name:item.name,
									data: zhuAry,
									type: 'bar',
									showBackground: true,
								}
								minVal = Math.trunc(minVal)-1
								chartMapDateJixiao.yAxis.min=minVal
								chartMapDateJixiao.yAxis.max=maxVal
								chartMapDateJixiao.series.push(seriesDate)
							})
							console.log("chartMapDateJixiao--绩效成绩->",chartMapDateJixiao)
							let myChart = _this.$echarts.init(document.getElementById('chengji'));
							// 绘制图表
							myChart.clear();
							myChart.setOption(chartMapDateJixiao)
							
						}else{
							_this.$refs.uToast.show({
								message: callBackDate.msg,
								duration: 1000 * 2,
								position:'bottom',
							})
						}
						
					},
					fail:function(e){
						console.log('接口返回--login--2--',e);
						_this.$refs.uToast.show({
							message: e,
							duration: 1000 * 2,
							position:'bottom',
						})
					}
				})
			},
			
			//获取部门待提交项目
			getDepartmentWaitSubmitted(){
				let _this = this
				uni.request({
					url:_this.$commonMethod.localhostUrl+'/api/eval/newqualitative',
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						// 'User-Agent':250,
						'user-key': _this.headerVerify.userkey,
						'user-token': _this.headerVerify.token
					},
					method:'POST',//请求方式，必须为大写
					data:{
						// group:_this.headerVerify.userCont.company,				//公司
						// department:_this.headerVerify.userCont.maindeparment,	//部门
						// tittle:""		//指标名称
					},
					success: (res) => {
						console.log("待提交的定性考核",res)
						let callBackDate = res.data
						if (callBackDate.code == 0){
							_this.departmentWaitSubList = callBackDate.data
						}
					},
					fail:function(e){
						console.log('接口返回--login--2--',e);
						_this.$refs.uToast.show({
							message: e,
							duration: 1000 * 2,
							position:'bottom',
						})
					},
				})
			},
			//查看待提交项目详情
			lookWaitSub(idval){
				let _this = this
				_this.$refs.uToast.show({
					message: idval,
					duration: 1000 * 2,
					position:'bottom',
				})
			},
			//获取待审核项目
			getDepartmentWaitRatify(){
				let _this = this
				uni.request({
					url:_this.$commonMethod.localhostUrl+'/api/eval/seeflowlog',
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						// 'User-Agent':250,
						'user-key': _this.headerVerify.userkey,
						'user-token': _this.headerVerify.token
					},
					method:'POST',//请求方式，必须为大写
					data:{
						isset: 2,	//0:未处理	1:已审核;2:未审核
						page: 1,
						pagesize: 1000000,
					},
					success: (res) => {
						console.log("待审核",res)
						let callBackDate = res.data
						if (callBackDate.code == 0){
							_this.departmentWaitRatifyList = callBackDate.data.list
						}
					},
					fail:function(e){
						console.log('接口返回--login--2--',e);
						_this.$refs.uToast.show({
							message: e,
							duration: 1000 * 2,
							position:'bottom',
						})
					},
				})
			},
			
			
			//获取指标图表数据
			getTargetChare(ind){
				let _this = this
				let dateLength = _this.charIsShow[ind].data
				let charKey = _this.yserDate.toString()+_this.monthDate .toString()
				if(dateLength.length > 0){
					
					if(dateLength[charKey] == undefined ){
						_this.getChartApiDate(ind)
					}else if(dateLength[charKey].length <= 0){
						_this.getChartApiDate(ind)
					}else{
						console.log("dateLength-----学习--3---->",charKey,dateLength[charKey])
						let charAry = dateLength[charKey]
						_this.drawTable(ind,charAry.title,charAry.xAxis,charAry.series)
					}
				}else{ //当前节点没有数据
					console.log("dateLength--->",dateLength.length)
					
					_this.getChartApiDate(ind)
					
				}
				console.log("dateLength-----结果------>",_this.charIsShow[ind])
				
			},
			//请求API获取图表数据
			getChartApiDate(ind){
				let _this=this
				let dateLength = _this.charIsShow[ind].data
				let charKey = _this.yserDate.toString()+_this.monthDate .toString()
				
				
				
				uni.request({
					url:_this.$commonMethod.localhostUrl+'/api/quant/quantechart',
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						// 'User-Agent':250,
						'user-key': _this.headerVerify.userkey,
						'user-token': _this.headerVerify.token
					},
					method:'POST',//请求方式，必须为大写
					data:{
						// group:_this.headerVerify.userCont.company,
						targetid:[_this.charIsShow[ind].target],	//指标id
						org: [
							"115",
							"282",
							"116",
							"349",
							"354",
							"126",
						],			//行政组织编号
						year:[_this.yserDate.toString()],		//年
						timeattribute:{		//时间辅助
							class:3,			//0：全年；1：半年；2：季度；3：月度
							time:[_this.monthDate]	//class->0(0),Time->1(1:上半年，2：下半年),class->2(1：第一季度，2：第二季度，3：第三季度，4：第四季度),class->3(1：1月....12：12月)
						}		,//月
						AccMethod:[1],
						analysisangle:1
					},
					success: (res) => {
						console.log(res)
						let callBackDate = res.data
						if(callBackDate.code == 0){
							let chartDate = callBackDate.data
							let charCallBackData = {
								title:chartDate.legend[0],
								xAxis:chartDate.xAxis,
								series:chartDate.series
							}
							dateLength[charKey] = charCallBackData
							_this.drawTable(ind,chartDate.legend[0],chartDate.xAxis,chartDate.series)
						}else{
							_this.$refs.uToast.show({
								message: callBackDate.msg,
								duration: 1000 * 2,
								position:'bottom',
							})
						}
					},
					fail:function(e){
						console.log('接口返回--login--2--',e);
						_this.$refs.uToast.show({
							message: e,
							duration: 1000 * 2,
							position:'bottom',
						})
					},
				})
			},
			//画统计图表
			drawTable(ind,title,xAxis,series){
				let _this = this
				let minVal = 0
				let maxVal = 0
				let chartMapDate = _this.$echartsMethod.echartsStruct
				chartMapDate.series=[]
				// let chartDate = callBackDate.data
				chartMapDate.title.text = title
				chartMapDate.xAxis.data = xAxis
				
				series.forEach(item=>{
					console.log("--------------->",item)
					let zhuAry = new Array
					item.data.forEach((datItem,index)=>{
						if(minVal == 0 || minVal > datItem){
							minVal = datItem
						}
						if(maxVal == 0 || maxVal < datItem){
							maxVal = datItem
						}
						let backColor = _this.$commonMethod.randomHexColor()
						if(_this.$commonMethod.colorCommon[index]){
							backColor  = _this.$commonMethod.colorCommon[index]
						}
						let zhuCont = {
							value: datItem,
							itemStyle: {
							    color:backColor
							},
							label: {
								show: true,
								position: 'top',
								color:'black'
							},
						}
						zhuAry.push(zhuCont)
					});
					let seriesDate = {
						name:item.name,
						data: zhuAry,
						type: 'bar',
						showBackground: true,
					}
					// console.log(minVal)
					// maxVal = 0
					if(minVal <= 0){
						if(maxVal < 0){
							maxVal = minVal-0.1
							minVal = 0
						}else if(maxVal > 0){
							maxVal = maxVal+0.1
							minVal = minVal - 0.1
						}
						
					}else{
						maxVal = maxVal+1
					}
					chartMapDate.yAxis.min=minVal
					chartMapDate.yAxis.max=maxVal
					chartMapDate.series.push(seriesDate)
				})
			
				
				console.log("chartMapDate--->",chartMapDate)
			
				let muChartKey = _this.charIsShow[ind].charKey
				let myChart = _this.$echarts.init(document.getElementById(muChartKey));
					console.log("muChartKey--->",muChartKey)
						console.log("myChart--->",myChart)
				// 绘制图表
				myChart.clear();
				myChart.setOption(chartMapDate)
				_this.charIsShow[ind].loading = false
				_this.charIsShow[ind].charview = true
			}
			
			
			
			
			
			
			
			
			
			
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.u-demo-block{
		/* height:350rpx; */
		margin-top: 20rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
	.load_icon{
		margin-top: 25%;
	}
	.text-area {
		display: flex;
		justify-content: center;
	}
	
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.charts-box {
		margin-top: 20rpx;
	    width: 100%;
		max-width: 100%;
	    height: 300px;
	}
	.card_header_mone{
		text-align: right;
		font-size: 12rpx;
		color: #909399;
		padding-right: 15rpx;
	}
	.card_header_title{
		font-size: 30rpx;
		color: #3a3a3a;
		
	}
	/* .swiper-box {
		height: 300px;
	} */
	.swiper-box{
	  position: relative;
	  height: 300px;
	}
	
	
	.swiper-box-cont .arrow{
	  width: 30rpx;
	  height: 46rpx;
	  display: block;
	  /* width: 100%;
	  height: 300rpx; */
	  cursor: pointer;
	  
	}
	
	.swiper-box-cont .prev{
	  position: absolute;
	  left: 0;
	  top: 45%;
	  border-radius: 50%;
	  width: 70rpx;
	  height: 70rpx;
	  line-height: 70rpx;
	  /* transform: translate(0, -50%); */
	  cursor: pointer;
	  background-color: rgba(204, 204, 204, 0.6);
	}
	
	.swiper-box-cont .next{
	  position: absolute;
	  right: 15px;
	  top: 45%;
	  border-radius: 50%;
	  width: 70rpx;
	  height: 70rpx;
	  line-height: 70rpx;
	  background-color: rgba(204, 204, 204, 0.6);
	  /* transform: translate(0, -50%); */
	}

</style>
