<template>
	<view class="content">
		<headersVue :titles="titles">
			<u-icon name="arrow-left" color="#fff" size="18"></u-icon>
		</headersVue>
		<view class="container">
			<view class="title_">检测数量统计</view>
			<view class="box_">
				<common-time-select v-model="ranges"
					@subsection-change="slectRangeInspectionCount"></common-time-select>
				<view class="d_b"
					style="border-top: 1px solid #F5F5F5; margin-top: 30rpx;box-sizing: border-box;padding-top: 30rpx;">
					<view class="three_" @click="goOrderList">
						<view class="text_">订单数量</view>
						<view class="">{{ data2.allNum || 0 }}</view>
					</view>
					<view class="three_">
						<view class="text_">完成数量</view>
						<view class="">{{ data2.ywcNum || 0 }}</view>
					</view>
					<view class="three_">
						<view class="text_">检测中数量</view>
						<view class="">{{ data2.jxzNum || 0 }}</view>
					</view>
				</view>
				<view class="d_b"
					style="border-top: 1px solid #F5F5F5; margin-top: 30rpx;box-sizing: border-box;padding-top: 30rpx;">
					<view class="three_" @click="goOrderList">
						<view class="text_">重检数量</view>
						<view class="">{{ data2.reinspectNum|| 0 }}</view>
					</view>
					<view class="three_">
						<view class="text_">复检数量</view>
						<view class="">{{ data2.recheckNum || 0 }}</view>
					</view>
					<view class="three_">
						<view class="text_">退办理数量</view>
						<view class="">{{ data2.tblNum || 0 }}</view>
					</view>
				</view>
			</view>
			<view class="title_">营业额统计</view>
			<view class="box_">
				<common-time-select v-model="rangeYYE" @subsection-change="slectRangeYYECount"></common-time-select>
				<view class="d_b"
					style="border-top: 1px solid #F5F5F5; margin-top: 30rpx;box-sizing: border-box;padding-top: 30rpx;">
					<view class="four_">
						<view class="text_">公示价格</view>
						<view class="">{{ data1.gsAmount || 0 }}</view>
					</view>
					<view class="four_">
						<view class="text_">应收款</view>
						<view class="">{{ data1.ysAmount || 0 }}</view>
					</view>
					<view class="four_">
						<view class="text_">已收款</view>
						<view class="">{{ data1.yjsAmount || 0 }}</view>
					</view>
					<view class="four_">
						<view class="text_">待收款</view>
						<view class="">{{ data1.dsAmount || 0 }}</view>
					</view>
				</view>
			</view>
			<view class="title_">业务渠道统计</view>
			<view class="box_" v-if="data3.length > 0">
				<common-time-select v-model="rangeBusiness"
					@subsection-change="slectRangeBusinessCount"></common-time-select>
				<view class="box_top">
					<view class="l_">业务渠道</view>
					<view class="n_">数量</view>
					<view class="r_">公示金额</view>
				</view>
				<view class="box_cont" v-for="(item,index) in data3" @click="goxiangqing(5,item.id)">
					<view class="hang_">
						<view class="l_">
							<view :class="'jt_' + (index % 4)">{{ item.name }}</view>
						</view>
						<view class="n_">{{ item.theNum }}</view>
						<view class="r_">{{ item.theAmount }}</view>
					</view>
				</view>
			</view>
			<view class="box_" v-else>
				<common-time-select v-model="rangeBusiness"
					@subsection-change="slectRangeBusinessCount"></common-time-select>
				<view style="margin-top: 20rpx;">
					暂无数据…
				</view>
			</view>
			<view class="title_">资料统计</view>
			<view class="box_">
				<common-time-select v-model="rangeZL" @subsection-change="slectRangeZLCount"></common-time-select>
				<view class="d_b" style="display: flex; flex-wrap: wrap;">
					<view class="three_" @click="goxiangqing2(6,'add')">
						<view class="text_">新增</view>
						<view class=""> {{fileRes.addCount || 0}}</view>
					</view>
					<view class="three_" @click="goxiangqing2(6,'update')">
						<view class="text_">修改</view>
						<view class=""> {{fileRes.updateCount || 0}}</view>
					</view>
				</view>
			</view>
			<view class="title_d">检测车型统计
				<view class="sm_" @click="goxiangqing(2)">更多 ></view>
			</view>
			<view class="box_">
				<common-time-select v-model="rangeGoods" @subsection-change="slectRangeGoodsCount"></common-time-select>
				<view class="d_b" v-if="data4.length > 0">
					<view class="four_t" v-for="(item,index) in data4">
						<view class="text_">{{ item.goodsTitle || '' }}</view>
						<view class="">{{ item.theNum || '' }}</view>
					</view>
				</view>
				<view class="d_b" v-else>
					暂无数据…
				</view>
			</view>
			<view class="title_d">检测类型统计
				<view class="sm_" @click="goxiangqing(4)">更多 ></view>
			</view>
			<view class="box_">
				<common-time-select v-model="rangeSku" @subsection-change="slectRangeSkuCount"></common-time-select>
				<view class="d_b" style="display: flex; flex-wrap: wrap;" v-if="skuList.length > 0">
					<view class="three_" v-for="(skuData) in skuList">
						<view class="text_">{{ skuData.skuName }}</view>
						<view class=""> {{ skuData.orderCount || 0 }}</view>
					</view>
				</view>
				<view class="d_b" v-else>
					暂无数据…
				</view>
			</view>
			<view class="title_d">代收款
				<view class="sm_" @click="goxiangqing(3)">更多 ></view>
			</view>
			<view class="box_">
				<common-time-select v-model="rangeDsk" @subsection-change="slectRangeDskCount"></common-time-select>
				<view class="d_b" v-if="data5.length == 0">
					暂无数据…
				</view>
				<view class="d_b" v-else>
					<view class="three_" v-for="(item) in data5">
						<view class="text_">{{ item.theName || '' }}</view>
						<view class="t-num">{{ item.theAmount || '' }}</view>
					</view>
				</view>
			</view>
			<view class="title_">成交金额（已收款）</view>
			<view class="box_">
				<common-time-select v-model="rangeCjAmount"
					@subsection-change="slectRangeCjAmount"></common-time-select>
				<qiun-data-charts type="area" :opts="opts" :ontouch='true' :chartData="chartData" />
			</view>
			<view class="title_">检测数量</view>
			<view class="box_">
				<common-time-select v-model="rangeInspectionCount"
					@subsection-change="slectRangeInspectionCountNew"></common-time-select>
				<qiun-data-charts type="area" :opts="opts2" :chartData="chartData1" />
			</view>
			<view class="title_">已收款金额</view>
			<view class="lan-you">
				<view class="yi" :class="{'er' : qhindex2 == index}" v-for="(item,index) in zilist" :key="index"
					@click="gbindex2(index,item.unit)"> {{ item.text }}
				</view>
			</view>
			<view class="box_">
				<qiun-data-charts type="line" :opts="opts1" :chartData="chartData2" />
			</view>

		</view>
		<u-datetime-picker :show="show" v-model="value1" mode="date"></u-datetime-picker>
	</view>
</template>

<script>
	import headersVue from '../../components/header/headers.vue';
	import request from "@/utils/request";
	import {
		getDateRange
	} from "@/utils/utils";
	import CommonTimeSelect from "@/components/commonTimeSelect.vue";

	export default {
		data() {
			return {
				data1: '',
				data2: '',
				data3: [],
				data4: '',
				data5: '',
				fileRes: {},
				range: ['2023-9-28', '2023-10-7'],
				businessRange: ['2023-9-28', '2023-10-7'],
				ranges: ['2023-9-28', '2023-10-7'],
				rangeYYE: ['2023-9-28', '2023-10-7'],
				rangeBusiness: ['2023-9-28', '2023-10-7'],
				rangeZL: ['2023-9-28', '2023-10-7'],
				rangeGoods: ['2023-9-28', '2023-10-7'],
				rangeSku: ['2023-9-28', '2023-10-7'],
				rangeDsk: ['2023-9-28', '2023-10-7'],
				rangeCjAmount: ['2023-9-28', '2023-10-7'],
				rangeInspectionCount: ['2023-9-28', '2023-10-7'],
				//检测类型统计
				skuList: [],
				unit: 'week',
				unit1: 'week',
				unit2: 'week',
				qhindex2: 0,
				selected: 'week',
				dateRangeList: [{
						label: "本周",
						value: "week"
					},
					{
						label: "本月",
						value: "month"
					}
				],
				zilist: [{
						text: '日',
						unit: 'day'
					},
					{
						text: '周',
						unit: 'week'
					},
					{
						text: '月',
						unit: 'month'
					},
					{
						text: '年',
						unit: 'year'
					},

				],

				titles: "业务统计",
				value1: Number(new Date()),
				List: [],
				show: false,
				status: 'loading',
				chartData: {},
				chartData1: {},
				chartData2: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['area'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						labelCount: 4, //默认显示个数
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
				},
				opts1: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						labelCount: 3, //默认显示个数
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				opts2: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						labelCount: 1, //默认显示个数
					},
					yAxis: {
						gridType: "dash",
						dashLength: 4
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
				},
			}
		},
		components: {
			CommonTimeSelect,
			headersVue
		},
		mounted() {
			// this.getServerData();
		},
		watch: {
			range(newval) {
				this.getfive()
			},
			// ranges(newval) {
			// 	this.getfive()
			// },
			businessRange(newval) {
				this.getfive()
			},
		},
		async onLoad() {
			//显示加载框
			uni.showLoading({
				title: '加载中'
			});
			await this.gettime()
			this.partnerId = uni.getStorageSync('partnerId')
			// this.getServerData();
			await this.getServerData1();
			await this.getServerData2();
			await this.getServerData3();
			await this.chartLineInspectionAmount()
			await this.chartLineInspectionNum()
			await this.getInspectionSku()
			// this.sanxiang()
			await this.getfive()

			//隐藏加载框
			uni.hideLoading();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
						series: [{
							name: "近7天",
							data: [35, 8, 25, 37, 4, 20]
						}, ],
						xAxis: {
							disableGrid: true, // 不绘制纵向网格(即默认绘制网格)
							scrollShow: true, // 不显示滚动条
							scrollColor: '#08B66D',
							itemCount: 6, // x轴显示数据个数
							fontColor: '#8C8C8C',
							axisLineColor: "#828282",
							gridColor: "#828282",
							// x轴文字倾斜
							rotateLabel: true
						},
					};
					let res1 = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
						series: [{
								name: "总数量",
								data: [35, 8, 25, 37, 4, 20]
							},
							{
								name: "合格数",
								data: [100, 80, 95, 150, 112, 132]
							}

						]
					};
					let res2 = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
						series: [{
								name: "小型汽车",
								data: [35, 8, 25, 37, 4, 20]
							},
							{
								name: "中型汽车",
								data: [70, 40, 65, 100, 44, 68]
							},
							{
								name: "大型汽车",
								data: [100, 80, 95, 150, 112, 132]
							}
						]
					};
					// this.chartData = JSON.parse(JSON.stringify(res));
					// this.chartData1 = JSON.parse(JSON.stringify(res1));
					// this.chartData2 = JSON.parse(JSON.stringify(res2));
				}, 500);
			},
			async slectRangeInspectionCount(e) {
				this.ranges = e
				console.log(this.ranges);
				let data2 = {
					startTime: this.ranges[0],
					endTime: this.ranges[1]
				}
				// 根据时间范围查询
				let res2 = await request({
					url: '/partnerOwn/partner/staticsTable2',
					method: 'get',
					params: data2
				})
				this.data2 = res2.data
			},
			async slectRangeYYECount(e) {
				this.rangeYYE = e
				this.data1 = {}
				console.log(this.rangeYYE);
				let data1 = {
					startTime: this.rangeYYE[0],
					endTime: this.rangeYYE[1]
				}
				let res1 = await request({
					url: '/partnerOwn/partner/staticsTable1',
					method: 'get',
					params: data1
				})
				this.data1 = res1.data
			},
			async slectRangeBusinessCount(e) {
				this.data3 = []
				this.rangeBusiness = e
				console.log(this.rangeBusiness);
				let data1 = {
					startTime: this.rangeBusiness[0],
					endTime: this.rangeBusiness[1]
				}
				let res3 = await request({
					url: '/partnerOwn/partner/staticsTable3',
					method: 'get',
					params: data1
				})
				this.data3 = res3.data
			},
			async slectRangeZLCount(e) {
				this.rangeZL = e
				console.log(this.rangeZL);
				let data1 = {
					startTime: this.rangeZL[0],
					endTime: this.rangeZL[1]
				}
				let fileRes = await request({
					url: '/partnerOwn/partner/fileStatistics',
					method: 'get',
					params: {
						servicePackageId: 'jiance',
						startTime: this.rangeZL[0],
						endTime: this.rangeZL[1]
					}
				})
				this.fileRes = fileRes.data
			},
			async slectRangeGoodsCount(e) {
				this.rangeGoods = e
				let data4 = {
					startTime: this.rangeGoods[0],
					endTime: this.rangeGoods[1]
				}
				let res4 = await request({
					url: '/partnerOwn/partner/staticsTable4',
					method: 'get',
					params: data4
				})
				this.data4 = res4.data
			},
			async slectRangeSkuCount(e) {
				this.rangeSku = e
				let data4 = {
					startTime: this.rangeSku[0],
					endTime: this.rangeSku[1]
				}
				request({
					url: '/partnerOwn/partner/queryInspectionSkuList',
					method: 'get',
					params: data4
				}).then((res) => {
					this.skuList = res.data
				})
			},
			async slectRangeDskCount(e) {
				this.rangeDsk = e
				let data5 = {
					startTime: this.rangeDsk[0],
					endTime: this.rangeDsk[1]
				}
				let res5 = await request({
					url: '/partnerOwn/partner/staticsTable5',
					method: 'get',
					params: data5
				})
				this.data5 = res5.data
			},
			async slectRangeCjAmount(e) {
				this.rangeCjAmount = e
				let data5 = {
					startTime: this.rangeCjAmount[0],
					endTime: this.rangeCjAmount[1]
				}
				this.chartLineInspectionAmount()
			},
			async slectRangeInspectionCountNew(e) {
				this.rangeInspectionCount = e
				let data5 = {
					startTime: this.rangeInspectionCount[0],
					endTime: this.rangeInspectionCount[1]
				}
				this.chartLineInspectionNum()
			},
			goCustomerDetail(remark) {
				uni.navigateTo({
					url: '/pages/statistics/statislist?id=1&remark=' + remark
				})
			},
			gettime() {
				// 获取当前时间
				var now = new Date();

				// 获取年份
				var year = now.getFullYear();

				// 获取月份
				var month = now.getMonth() + 1; // 月份从 0 开始，需要加 1
				if (month < 10) {
					var month = "0" + month
				}

				// 获取日期
				var date = now.getDate();

				// 格式化时间
				var currentTime = year + '-' + month + '-' + date
				this.range[0] = currentTime
				this.range[1] = currentTime
				this.businessRange[0] = currentTime
				this.businessRange[1] = currentTime
				this.ranges[0] = currentTime
				this.ranges[1] = currentTime
				this.rangeYYE[0] = currentTime
				this.rangeYYE[1] = currentTime
				this.rangeBusiness[0] = currentTime
				this.rangeBusiness[1] = currentTime
				this.rangeZL[0] = currentTime
				this.rangeZL[1] = currentTime
				this.rangeGoods[0] = currentTime
				this.rangeGoods[1] = currentTime
				this.rangeSku[0] = currentTime
				this.rangeSku[1] = currentTime
				this.rangeDsk[0] = currentTime
				this.rangeDsk[1] = currentTime
				this.rangeCjAmount[0] = currentTime
				this.rangeCjAmount[1] = currentTime
				this.rangeInspectionCount[0] = currentTime
				this.rangeInspectionCount[1] = currentTime
			},
			// 五条
			async getfive() {
				let data1 = {
					startTime: this.range[0],
					endTime: this.range[1]
				}
				let res1 = await request({
					url: '/partnerOwn/partner/staticsTable1',
					method: 'get',
					params: data1
				})
				this.data1 = res1.data
				// 2
				let data2 = {
					startTime: this.ranges[0],
					endTime: this.ranges[1]
				}
				let res2 = await request({
					url: '/partnerOwn/partner/staticsTable2',
					method: 'get',
					params: data2
				})
				this.data2 = res2.data
				// 3
				let data3 = {
					startTime: this.rangeBusiness[0],
					endTime: this.rangeBusiness[1]
				}
				let res3 = await request({
					url: '/partnerOwn/partner/staticsTable3',
					method: 'get',
					params: data3
				})
				this.data3 = res3.data
				console.log('业务渠道数据', this.data3);
				// 4
				let data4 = {
					startTime: this.rangeGoods[0],
					endTime: this.rangeGoods[1]
				}
				let res4 = await request({
					url: '/partnerOwn/partner/staticsTable4',
					method: 'get',
					params: data4
				})
				this.data4 = res4.data
				// 5
				let data5 = {
					startTime: this.rangeDsk[0],
					endTime: this.rangeDsk[1]
				}
				let res5 = await request({
					url: '/partnerOwn/partner/staticsTable5',
					method: 'get',
					params: data5
				})
				this.data5 = res5.data
				let fileRes = await request({
					url: '/partnerOwn/partner/fileStatistics',
					method: 'get',
					params: {
						startTime: this.rangeZL[0],
						servicePackageId: 'jiance',
						endTime: this.rangeZL[1]
					}
				})
				this.fileRes = fileRes.data

			},
			//
			goxiangqing(id, dataId) {
				if (dataId) {
					uni.navigateTo({
						url: '/pages/statistics/statislist?id=' + id + '&dataId=' + dataId
					})
				} else {
					uni.navigateTo({
						url: '/pages/statistics/statislist?id=' + id
					})
				}
			},
			//
			goxiangqing2(id, type) {
				uni.navigateTo({
					url: '/pages/statistics/statislist?id=' + id + '&type=' + type
				})
			},
			goOrderList() {
				uni.navigateTo({
					url: '/pages/index/ordermanage'
				})
			},
			// 检测类型统计
			getInspectionSku() {
				let data = {
					startTime: this.rangeSku[0],
					endTime: this.rangeSku[1]
				}
				request({
					url: '/partnerOwn/partner/queryInspectionSkuList',
					method: 'get',
					params: data
				}).then((res) => {
					this.skuList = res.data
				})
			},
			maskClick(e) {},
			maskBusinessClick() {

			},
			// 折线图
			async chartLineInspectionAmount() {
				let data = {
					// partnerId: this.partnerId,
					// unit: this.unit,
					startTime: this.rangeCjAmount[0],
					endTime: this.rangeCjAmount[1],
				}
				let rex = await request({
					url: '/partnerOwn/partner/chartLineInspectionAmount',
					method: 'get',
					params: data
				})
				let res = rex.data

				this.chartData = JSON.parse(JSON.stringify(res));
				this.opts.xAxis.itemCount = res.categories.length //x轴数据的长度

			},
			// 折线图
			async chartLineInspectionNum() {
				let data = {
					startTime: this.rangeInspectionCount[0],
					endTime: this.rangeInspectionCount[1],
				}
				let rex = await request({
					url: '/partnerOwn/partner/chartLineInspectionNum',
					method: 'get',
					params: data
				})
				let res = rex.data

				this.chartData1 = JSON.parse(JSON.stringify(res));

			},

			gbindex(index, unit) {
				this.qhindex = index
				this.unit = unit
				this.getServerData1()
			},
			gbindex1(index, unit) {
				this.qhindex1 = index
				this.unit1 = unit
				this.getServerData2()
			},
			gbindex2(index, unit) {
				this.qhindex2 = index
				this.unit = unit
				this.getServerData1()
			},
			getback() {
				uni.navigateBack()
			},
			xinxuanze(name) {
				this.name = name
				this.xling = false
				this.getServerData1()

			},
			async sanxiang() {
				let res = await request({
					url: '/partnerOwn/partner/statisticsInfo?partnerId=' + this.partnerId,
					method: 'get',
				})
				let nums = {
					orderAmount: Math.trunc(res.data.orderAmount / 100),
					orderNum: res.data.orderNum,
					todayOrderAmount: res.data.todayOrderAmount / 100,
					todayOrderNum: res.data.todayOrderNum,
					workedNum: res.data.workedNum,
					workingNum: res.data.workingNum
				}
				this.threenum = nums
			},
			async getstatisticsTop() {
				let res = await request({
					url: '/appInspection/order/statisticsTop',
					method: 'get',
				})
				// this.chartData.series[0].data =  res.data.list
			},
			async getstatisticsMid() {
				let res = await request({
					url: '/appInspection/order/statisticsMid',
					method: 'get',
				})
				this.carlist = res.data
			},


			async getgetPartnerList() {
				let data = {
					partnerName: this.searchValue
				}
				let res = await request({
					url: '/appInspection/order/getPartnerList',
					method: 'get',
					params: data
				})
				this.qubu = res.data

			},
			async getstatisticsZXT() {
				let data = {
					partnerId: this.partnerId,
					type: this.value
				}
				let res = await request({
					url: '/appInspection/order/statisticsZXT',
					method: 'get',
					params: data
				})

			},
			async getstatisticsOrder() {
				let res = await request({
					url: '/appInspection/order/statisticsOrder',
					method: 'get',
				})
				this.phb = res.data

			},
			// 123123
			closexl(e) {
				this.xling = false

			},
			openxl(e) {},

			// 金额
			async getServerData1() {
				let data = {
					partnerId: this.partnerId,
					unit: this.unit,
				}
				let rex = await request({
					url: '/partnerOwn/partner/chartInfoAmount',
					method: 'get',
					params: data
				})
				let res = rex.data

				this.chartData2 = JSON.parse(JSON.stringify(res));
				this.opts1.xAxis.itemCount = res.categories.length

			},
			// 数量
			async getServerData2() {
				let data = {
					partnerId: this.partnerId,
					unit: this.unit1,
				}
				let rex = await request({
					url: '/partnerOwn/partner/chartInfoNum',
					method: 'get',
					params: data
				})
				let res = rex.data

				this.chartData2 = JSON.parse(JSON.stringify(res));

			},
			// 合格率
			async getServerData3() {
				let data = {
					partnerId: this.partnerId,
					unit: this.unit2,
				}
				let rex = await request({
					url: '/partnerOwn/partner/chartInfoRatio',
					method: 'get',
					params: data
				})
				let res = rex.data

				this.chartData3 = JSON.parse(JSON.stringify(res));

			},
		}

	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		box-sizing: border-box;
		padding-top: 200rpx;
		background: #f4f5f6;
		height: 100vh;
	}

	.container {
		box-sizing: border-box;
		padding: 30rpx;
		background: #f4f5f6;
	}

	.title_ {
		font-size: 32rpx;
		color: #101A3E;
		margin: 30rpx 0px;
	}

	.title_d {
		font-size: 32rpx;
		color: #101A3E;
		margin: 30rpx 0px;
		display: flex;
		justify-content: space-between;
	}

	.box_ {
		//width: 100%;
		box-sizing: border-box;
		padding: 10px;
		background: #FFFFFF;
		border-radius: 12rpx;
	}

	.box_cont {
		box-sizing: border-box;
		padding: 20rpx;
		background: #F7F8FC;
		border-radius: 0rpx 0rpx 12rpx 12rpx;
	}

	.sm_ {
		font-size: 24rpx;
		color: #8D90A6;
	}

	.hang_ {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 15rpx 0px;
		margin: 15rpx 0rpx;
		border-bottom: 1px solid #E3ECFB;
		font-size: 32rpx;
		color: #101A3E;
	}

	.box_top {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		color: #101A3E;
		box-sizing: border-box;
		padding: 20rpx;
		background: #F7F8FC;
		border-radius: 12rpx 12rpx 0rpx 0rpx;

	}

	.d_b {
		display: flex;
		flex-wrap: wrap;
		/* 允许自动换行 */
		align-items: center;
		justify-content: space-between;
	}


	.d_s {
		display: flex;
		align-items: center;
	}

	.icon_ {
		width: 38rpx;
		height: 38rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.three_ {
		width: 196rpx;
		height: 116rpx;
		background: #F7F8FC;
		text-align: center;
		font-size: 24rpx;
		color: #101A3E;
		margin-bottom: 10rpx;
	}

	.three_k {
		width: 196rpx;
		height: 116rpx;
	}

	.four_ {
		width: 142rpx;
		height: 116rpx;
		background: #F7F8FC;
		text-align: center;
		font-size: 24rpx;
		color: #101A3E;
	}

	.four_t {
		width: 142rpx;
		height: 190rpx;
		box-sizing: border-box;
		padding: 15rpx;
		background: #F7F8FC;
		text-align: center;
		font-size: 24rpx;
		color: #101A3E;
	}

	.text_ {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.l_ {
		width: 33%;
	}

	.n_ {
		width: 33%;
		text-align: center;
	}

	.r_ {
		width: 33%;
		text-align: right;
	}

	.jt_0 {
		width: 144rpx;
		height: 48rpx;
		background: #f6f0e5;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #101A3E;
		border-radius: 8px;
	}

	.jt_1 {
		width: 144rpx;
		height: 48rpx;
		background: #e6e6f9;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #101A3E;
		border-radius: 8px;
	}

	.jt_2 {
		width: 144rpx;
		height: 48rpx;
		background: #e2ebfb;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #101A3E;
		border-radius: 8px;
	}

	.jt_3 {
		width: 144rpx;
		height: 48rpx;
		background: #e4eff1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #101A3E;
		border-radius: 8px;
	}

	.charts-box {
		width: 100%;
		height: 452rpx;
	}

	.yi {
		font-size: 15px;
		font-weight: 400;
		color: #666666;
		line-height: 15px;
		padding: 5rpx;
		border: 2rpx solid #327DFB;
	}

	.er {
		//width: 25px;
		//height: 25px;
		background: #327DFB;
		border-radius: 3px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white !important;
	}

	.lan-you {
		display: flex;
		align-items: center;
	}
</style>