<template>
	<view class="content">
		<!-- <headers class="fixedheader" :showBack="true">
			<view class="headerName">
				质量管理
			</view>
		</headers> -->
		<view class="count-statistics">
			<view class="top-title">
				<view class="line"></view>
				<text>检查统计</text>
				<view class="right-date">
					<uni-datetime-picker v-model="timeCombo.timeRange1" type="daterange" rangeSeparator="至"
						@change="e => confirmTimeRange(e,1)" />
				</view>
			</view>
			<view class="bottom-content">
				<div class="count-type-list" v-for="(item,index) in typeList" :key="index"
					:style="{backgroundColor: item.backgroundColor}">
					<text :style="{color: item.color}">{{item.value}}</text>
					<text>{{item.name}}</text>
				</div>
			</view>
		</view>
		<view class="count-statistics">
			<view class="top-title">
				<view class="line"></view>
				<text>分包单位质量隐患统计</text>
				<view class="right-date">
					<uni-datetime-picker v-model="timeCombo.timeRange2" type="daterange" rangeSeparator="至"
						@change="e => confirmTimeRange(e,2)" />
				</view>
			</view>
			<view class="count-content">
				<div class="chart-content">
					<qiun-data-charts type="column" :ontouch="true" :opts="opts" :chartData="chartData" v-if="chartData.categories && chartData.categories.length > 0"/>
					<view class="noData" v-else>
						<image class="noDataImg" src="../../../static/noData.png"></image>
						<view>暂无数据</view>
					</view>
				</div>
			</view>
		</view>
		<view class="count-statistics">
			<view class="top-title">
				<view class="line"></view>
				<text>风险统计</text>
			</view>
			<view class="risk-content">
				<view class="risk-count">
					<view class="count-title">{{riskDataObj.dangerNum || 0}}个</view>
					<view class="risk-all-title">风险总数</view>
				</view>
				<view class="risk-type">
					<view class="risk-type-item" v-for="(item,index) in riskTypeList" :key="index"
						:style="{backgroundColor: item.backgroundColor}">
						<text>{{item.name}}</text>
						<view>{{item.value}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="count-statistics">
			<view class="top-title">
				<view class="line"></view>
				<text>隐患分析</text>
			</view>
			<view class="hidden-content">
				<view class="chart-hidden-content">
					<qiun-data-charts type="radar" :opts="radarOpts" :chartData="radarChartData" v-if="radarChartData.categories"/>
					<view class="noData" v-else>
						<image class="noDataImg" src="../../../static/noData.png"></image>
						<view>暂无数据</view>
					</view>
					<view class="chart-tip-legend">
						<view class="color-zfx"></view>
						<text>质量检查</text>
					</view>
				</view>
			</view>
		</view>
		<view class="count-statistics">
			<view class="top-title">
				<view class="line"></view>
				<text>风险走势图
				<!-- <text class="subTitle">(44%↓比上个月(4月))</text> -->
				</text>
				<!-- <view class="right-date">
					<uni-datetime-picker v-model="timeCombo.timeRange3" type="daterange" rangeSeparator="至"
						@change="e => confirmTimeRange(e,3)" />
				</view> -->
			</view>
			<view class="trend-content">
				<view class="chart-trend-content">
					<qiun-data-charts type="line" :opts="lineOpts" :chartData="lineChartData" :ontouch="true" @touchend="tapChart" v-if="lineChartData.categories"/>
					<view class="noData" v-else>
						<image class="noDataImg" src="../../../static/noData.png"></image>
						<view>暂无数据</view>
					</view>
				</view>
			</view>
		</view>
		<view class="count-statistics">
			<view class="top-title">
				<view class="line"></view>
				<text>隐患数量展示</text>
				<view class="right-date">
					<uni-datetime-picker v-model="timeCombo.timeRange4" type="daterange" rangeSeparator="至"
						@change="e => confirmTimeRange(e,4)" />
				</view>
			</view>
			<view class="hidden-sum-content">
				<view class="title-one">隐患超期未整改</view>
				<view class="title-two" v-for="(item,index) in noChangeTypeList" :key="'隐患超期未整改' + index" v-show="index<2">{{item.name}}未整改隐患{{item.value}}个，占比{{item.percent}}%</view>
				<view class="hidden-chart-content">
					<view class="hidden-chart-left">
						<view class="left-legend-diy">
							<view class="diy-item" v-for="(item,index) in noChangeTypeList" :key="index">
								<view class="zfx" :style="{backgroundColor: item.backgroundColor}"></view>
								<text>{{item.name}}</text>
								<text>{{item.value}}</text>
							</view>
						</view>
					</view>
					<view class="hidden-chart-right">
						<qiun-data-charts type="arcbar" :opts="noChangeOpts" :chartData="noChangeChartData" v-if="noChangeChartData.series"/>
						<view class="noData" v-else>
							<image class="noDataImg" src="../../../static/noData.png"></image>
							<view>暂无数据</view>
						</view>
					</view>
				</view>
				<view class="divider-line"></view>
				<view class="title-one">未销项隐患</view>
				<view class="title-two" v-for="(item,index) in noDestroyTypeList" :key="'未销项隐患' + index" v-show="index<2">{{item.name}}未销项{{item.value}}个，占比{{item.percent}}%</view>
				<view class="hidden-chart-content">
					<view class="hidden-chart-left">
						<view class="left-legend-diy">
							<view class="diy-item" v-for="(item,index) in noDestroyTypeList" :key="index">
								<view class="zfx" :style="{backgroundColor: item.backgroundColor}"></view>
								<text>{{item.name}}</text>
								<text>{{item.value}}</text>
							</view>
						</view>
					</view>
					<view class="hidden-chart-right">
						<qiun-data-charts type="arcbar" :opts="noDestroyOpts" :chartData="noDestroyChartData" v-if="noDestroyChartData.series"/>
						<view class="noData" v-else>
							<image class="noDataImg" src="../../../static/noData.png"></image>
							<view>暂无数据</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="count-statistics">
			<view class="top-title">
				<view class="line"></view>
				<text>责任区域问题统计 TOP10</text>
				<view class="right-option">
					<view class="option-item" v-for="(item,index) in optionList" :key="index"
						:style="{backgroundColor: checkIndex == index?'#268DFF':'#fff'}" @click="optionClick(index)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="question-content">
				<qiun-data-charts type="bar" :opts="questionOpts" :chartData="questionChartData" v-show="questionChartData.categories"/>
				<view class="noData" v-show="!questionChartData.categories">
					<image class="noDataImg" src="../../../static/noData.png"></image>
					<view>暂无数据</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import headers from "../../../components/headers/headers.vue"
	export default {
		name: "standardScheduleNewsHome",
		data() {
			return {
				questionOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 30, 0, 5],
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						boundaryGap: "justify",
						disableGrid: false,
						min: 0,
						axisLine: false
					},
					yAxis: {},
					extra: {
						bar: {
							type: "stack",
							width: 30,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							categoryGap: 2
						}
					}
				},
				questionChartData: {},
				checkIndex: 0,
				optionList: [{
						name: "全部",
						value: 1
					},
					{
						name: "重大",
						value: 2
					},
					{
						name: "较大",
						value: 3
					},
					{
						name: "一般",
						value: 4
					},
					{
						name: "低",
						value: 5
					}
				],
				noDestroyTypeList: [{
						name: "重大隐患",
						backgroundColor: "#FF0303",
						value: 0,
						percent: 0
					},
					{
						name: "严重隐患",
						backgroundColor: "#FF9901",
						value: 0,
						percent: 0
					},
					{
						name: "一般隐患",
						backgroundColor: "#FFE500",
						value: 0,
						percent: 0
					},
					{
						name: "其他隐患",
						backgroundColor: "#3A3AE7",
						value: 0,
						percent: 0
					},
				],
				noDestroyChartData: {},
				noDestroyOpts: {
					color: ["#3A3AE7", "#FFE500", "#FF9901", "#FF0303"],
					padding: undefined,
					title: {
						name: "隐患未销项",
						fontSize: 12,
						color: "#000000"
					},
					subtitle: {
						name: "9个",
						fontSize: 22,
						color: "#000000"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 12,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},
				noChangeTypeList: [{
						name: "重大延期",
						backgroundColor: "#FF0303",
						value: 0,
						percent: 0
					},
					{
						name: "严重隐患超期",
						backgroundColor: "#FF9901",
						value: 0,
						percent: 0
					},
					{
						name: "一般隐患超期",
						backgroundColor: "#FFE500",
						value: 0,
						percent: 0
					},
					{
						name: "其他隐患超期",
						backgroundColor: "#3A3AE7",
						value: 0,
						percent: 0
					},
				],
				noChangeChartData: {},
				noChangeOpts: {
					color: ["#3A3AE7", "#FFE500", "#FF9901", "#FF0303"],
					padding: undefined,
					title: {
						name: "超期未整改",
						fontSize: 12,
						color: "#000000"
					},
					subtitle: {
						name: "7个",
						fontSize: 22,
						color: "#000000"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 12,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},
				lineChartData: {},
				lineOpts: {
					color: ["#5EE4DA", "#FF0303", "#FF9A04", "#FFE603", "#3C3CE8"],
					padding: [-10,0,0,0],
					enableScroll: true,
					legend: {
						position: "top",
						float: "left",
						fontSize: 11,
						margin: 20
					},
					xAxis: {
						disableGrid: true,
						itemCount: 6,
						scrollShow: true
						// rotateLabel: true,
						// rotateAngle: 90
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				radarChartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['radar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				radarOpts: {
					color: ["#5470C6"
					],
					padding: [5, 5, 5, 5],
					dataLabel: false,
					enableScroll: false,
					legend: {
						show: false,
						position: "right",
						lineHeight: 25
					},
					extra: {
						radar: {
							gridType: "radar",
							gridColor: "#CCCCCC",
							gridCount: 3,
							opacity: 0.2,
							max: 10,
							labelShow: true,
							border: true,
							axisLabel: true
						}
					}
				},
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: true,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						itemCount: 5,
						scrollShow: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				typeList: [{
						name: "检查总数",
						value: 0,
						color: "#70CEC8",
						backgroundColor: "#ECF8F7"
					},
					{
						name: "隐患总数",
						value: 0,
						color: "#EAC131",
						backgroundColor: "#FCF8E8"
					},
					{
						name: "重大隐患",
						value: 0,
						color: "#FC7D81",
						backgroundColor: "#FFEDED"
					},
					{
						name: "超期未闭合",
						value: 0,
						color: "#B859A3",
						backgroundColor: "#E6C3DE"
					}
				],
				riskTypeList: [{
						name: "重大风险",
						value: 0,
						backgroundColor: "#FF0000"
					},
					{
						name: "较大风险",
						value: 0,
						backgroundColor: "#FF9901"
					},
					{
						name: "一般风险",
						value: 0,
						backgroundColor: "#FFE500"
					},
					{
						name: "低风险",
						value: 0,
						backgroundColor: "#3A3AE7"
					}
				],
				timeCombo: {
					timeRange1: [],
					timeRange2: [],
					timeRange3: [],
					timeRange4: []
				},
				riskDataObj: {}
			};
		},
		onLoad() {
			// for(let i in this.timeCombo){
			// 	this.timeCombo[i] = [this.$formatDates(new Date().getTime(), 'yyyy-MM-dd'), this.$formatDates(new Date()
			// 	.getTime(), 'yyyy-MM-dd')]
			// }
			this.getStatisticsNumFn();
			this.getStatsByEnterpriseFn();
			this.getRiskStatisticsFn();
			this.getHiddenAnalysisFn();
			this.getRiskTrendFn();
			this.getNoChangeHiddenNumFn();
			this.getNoDestroyNumFn();
			this.getRecordRegionNumFn();
		},
		methods: {
			// 图例交互
			tapChart(e){
				console.log(e,777)
			},
			// 责任区域问题统计TOP10
			getRecordRegionNumFn() {
				let that = this
				let requestData = {
					projectSn: uni.getStorageSync("dept")
				}
				if(this.checkIndex != 0){
					requestData.enumType = this.checkIndex;
				}
				this.sendRequest({
					url: "xmgl/qualityInspectionRecord/countQualityInspectionRecordRegion",
					data: requestData,
					method: "post",
					success(res) {
						console.log(res, "责任区域问题统计")
						let responseData = res.result;
						let xArr = [];
						let yArr = [];
						responseData.map(item => {
							xArr.push(+item.y)
							yArr.push(item.x)
						})
						let chartObj = {
							categories: yArr,
							series: [{
									name: "数据值",
									data: xArr
								}
							]
						};
						that.questionChartData = JSON.parse(JSON.stringify(chartObj));
						setTimeout(function(){
							that.$forceUpdate();
						},500)
					}
				})
			},
			// 隐患数量未销项展示
			getNoDestroyNumFn() {
				let that = this
				let requestData = {
					projectSn: uni.getStorageSync("dept"),
					isNotQualified: 1
				}
				if(this.timeCombo.timeRange4 && this.timeCombo.timeRange4){
					requestData.inspectStartTime = this.timeCombo.timeRange4[0]
					requestData.inspectEndTime = this.timeCombo.timeRange4[1]
				}
				this.sendRequest({
					url: "xmgl/qualityInspectionRecord/countDangerLevel",
					data: requestData,
					method: "post",
					success(res) {
						console.log(res, "隐患数量未销项展示")
						let responseData = res.result;
						that.noDestroyOpts.subtitle.name = responseData.count + "个"
						let dataArr = [];
						responseData.data.map((item,index) => {
							dataArr.push({
								name: item.name,
								data: Number(item.percent) / 100
							})
							that.noDestroyTypeList[index].name = item.name
							that.noDestroyTypeList[index].value = +item.count
							that.noDestroyTypeList[index].percent = +item.percent
						})
						let chartObj = {
							series: dataArr
						};
						that.noDestroyChartData = JSON.parse(JSON.stringify(chartObj));
					}
				})
			},
			// 隐患数量超期未整改展示
			getNoChangeHiddenNumFn() {
				let that = this
				let requestData = {
					projectSn: uni.getStorageSync("dept"),
					isOverdueRectification: 1
				}
				if(this.timeCombo.timeRange4 && this.timeCombo.timeRange4){
					requestData.inspectStartTime = this.timeCombo.timeRange4[0]
					requestData.inspectEndTime = this.timeCombo.timeRange4[1]
				}
				this.sendRequest({
					url: "xmgl/qualityInspectionRecord/countDangerLevel",
					data: requestData,
					method: "post",
					success(res) {
						console.log(res, "隐患数量超期未整改展示")
						let responseData = res.result;
						that.noChangeOpts.subtitle.name = responseData.count + "个"
						let dataArr = [];
						responseData.data.map((item,index) => {
							dataArr.push({
								name: item.name,
								data: Number(item.percent) / 100
							})
							that.noChangeTypeList[index].name = item.name
							that.noChangeTypeList[index].value = +item.count
							that.noChangeTypeList[index].percent = +item.percent
						})
						let chartObj = {
							series: dataArr
						};
						that.noChangeChartData = JSON.parse(JSON.stringify(chartObj));
					}
				})
			},
			// 风险走势图
			getRiskTrendFn() {
				let that = this
				let requestData = {
					projectSn: uni.getStorageSync("dept")
				}
				this.sendRequest({
					url: "xmgl/qualityInspectionRecord/riskChart",
					data: requestData,
					method: "post",
					success(res) {
						console.log(res, "风险走势图")
						let responseData = res.result;
						let categoriesArr = [];
						let allArr = [];
						let oneArr = [];
						let twoArr = [];
						let threeArr = [];
						let fourArr = [];
						responseData.map(item => {
							categoriesArr.push(item.yearMonth)
							allArr.push(+item.dangerNum)
							oneArr.push(+item.greatFaultLevelNum)
							twoArr.push(+item.largerRiskNum)
							threeArr.push(+item.generalRiskNum)
							fourArr.push(+item.lowRiskNum)
						})
						let chartObj = {
							categories: categoriesArr,
							series: [{
									name: "全部",
									data: allArr
								},
								{
									name: "重大风险",
									data: oneArr
								},
								{
									name: "较大风险",
									data: twoArr
								},
								{
									name: "一般风险",
									data: threeArr
								},
								{
									name: "低风险",
									data: fourArr
								}
							]
						};
						that.lineChartData = JSON.parse(JSON.stringify(chartObj));
					}
				})
			},
			// 隐患分析
			getHiddenAnalysisFn() {
				let that = this
				let requestData = {
					projectSn: uni.getStorageSync("dept")
				}
				this.sendRequest({
					url: "xmgl/qualityInspectionRecord/selectQualityStatisticsNum",
					data: requestData,
					method: "post",
					success(res) {
						console.log(res, "获取隐患分析")
						let responseData = res.result;
						//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
						let chartObj = {
							categories: ["排查记录", "待核验", "待复查", "待整改", "超期未关闭", "未闭合"],
							series: [{
								name: "数量",
								data: [responseData.investigateNum, responseData.verificationNum, responseData.reviewNum, responseData.rectificationNum, responseData.overdueNotCloseNum, responseData.notCloseNum]
							}]
						};
						that.radarOpts.extra.radar.max = +responseData.totalNum;
						that.radarChartData = JSON.parse(JSON.stringify(chartObj));
					}
				})
			},
			// 风险统计
			getRiskStatisticsFn() {
				let that = this
				let requestData = {
					projectSn: uni.getStorageSync("dept")
				}
				this.sendRequest({
					url: "xmgl/qualityInspectionRecord/selectQualityStatisticsNum",
					data: requestData,
					method: "post",
					success(res) {
						console.log(res, "获取风险统计")
						let responseData = res.result;
						that.riskDataObj = responseData;
						if(res.result){
							that.riskTypeList[0].value = responseData.greatFaultLevelNum
							that.riskTypeList[1].value = responseData.largerRiskNum
							that.riskTypeList[2].value = responseData.generalRiskNum
							that.riskTypeList[3].value = responseData.lowRiskNum
						}
					}
				})
			},
			// 分包单位质量隐患统计
			getStatsByEnterpriseFn() {
				let that = this
				let requestData = {
					projectSn: uni.getStorageSync("dept"),
					pageSize: -1
				}
				if(this.timeCombo.timeRange2 && this.timeCombo.timeRange2){
					requestData.inspectTime_begin = this.timeCombo.timeRange2[0]
					requestData.inspectTime_end = this.timeCombo.timeRange2[1]
				}
				this.sendRequest({
					url: "xmgl/qualityInspectionRecord/statsByEnterprise",
					data: requestData,
					method: "post",
					success(res) {
						console.log(res, "获取分包单位质量隐患统计")
						let responseData = res.result.records;
						let categoriesArr = [];
						let dataArr = [];
						responseData.map(item => {
							if(item.enterpriseName.length == 4){
								categoriesArr.push(item.enterpriseName)
							} else {
								categoriesArr.push(item.enterpriseName.substring(0,4) + '...')
							}
							dataArr.push(item.totalNum)
						})
						let chartObj = {
							categories: categoriesArr,
							series: [{
								name: "总数",
								data: dataArr
							}]
						};
						that.chartData = JSON.parse(JSON.stringify(chartObj));
					}
				})
			},
			// 检查统计
			getStatisticsNumFn() {
				let that = this
				let requestData = {
					projectSn: uni.getStorageSync("dept")
				}
				if(this.timeCombo.timeRange1 && this.timeCombo.timeRange1){
					requestData.inspectStartTime = this.timeCombo.timeRange1[0]
					requestData.inspectEndTime = this.timeCombo.timeRange1[1]
				}
				// 获取检查统计
				this.sendRequest({
					url: "xmgl/qualityInspectionRecord/selectQualityStatisticsNum",
					data: requestData,
					method: "post",
					success(res) {
						console.log(res, "获取检查统计")
						let responseData = res.result;
						if(res.result){
							console.log(that.typeList)
							that.typeList[0].value = responseData.totalNum
							that.typeList[1].value = responseData.dangerNum
							that.typeList[2].value = responseData.greatFaultLevelNum
							that.typeList[3].value = responseData.overdueNotCloseNum
						}
					}
				})
			},
			optionClick(index) {
				this.checkIndex = index;
				this.getRecordRegionNumFn();
			},
			confirmTimeRange(e,index) {
				console.log(e,index)
				if(index == 1){
					this.timeCombo.timeRange1 = e;
					this.getStatisticsNumFn();
				} else if(index == 2){
					this.timeCombo.timeRange2 = e;
					this.getStatsByEnterpriseFn();
				} else if(index == 3){
					this.timeCombo.timeRange3 = e;
					this.getStatsByEnterpriseFn();
				} else if(index == 4){
					this.timeCombo.timeRange4 = e;
					this.getNoChangeHiddenNumFn();
					this.getNoDestroyNumFn();
				}
				// this.form.plannedMakeBeamBeginTime = e[0]
				// this.form.plannedMakeBeamEndTime = e[1]
				// console.log("制梁时间选择", e)
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: auto;
		padding: 30rpx 20rpx;
		display: flex;
		flex-direction: column;
		background-color: #F4F5FD;
		.fixedheader {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 2;

			/deep/.headerBox {
				background: #2b8df3;
				color: #fff;
			}
		}

		.count-statistics {
			padding: 20rpx 22rpx;
			background: #FFFFFF;
			box-shadow: 0px 8rpx 16rpx 0px rgba(219, 229, 255, 0.6);
			border-radius: 10rpx;
			.noData {
				text-align: center;
				font-size: 32rpx;
				margin-top: 30px;
				color: #bed0fb;
				.noDataImg{
					width: 200rpx;
					height: 160rpx;
				}
			}
			.top-title {
				width: 100%;
				display: flex;
				align-items: center;

				.line {
					width: 6rpx;
					height: 44rpx;
					background: #268DFF;
					border-radius: 0rpx;
					margin-right: 10rpx;
				}

				>text {
					font-family: Inter, Inter;
					font-weight: bold;
					font-size: 28rpx;
					color: #272D45;
					margin-right: auto;
				}

				.subTitle {
					font-family: Inter, Inter;
					font-weight: 500;
					font-size: 18rpx;
					color: #76777F;
					margin-left: 10rpx;
				}

				.right-date {
					margin-top: 8rpx;

					/deep/.uni-date-range {
						height: 40rpx;
					}

					/deep/.uni-icons {
						font-size: 36rpx !important;
						margin-bottom: 3rpx;
					}

					/deep/.uni-date__x-input {
						font-size: 22rpx;
					}

					/deep/.range-separator {
						font-size: 22rpx;
					}
				}

				.right-option {
					display: flex;
					align-items: center;
					border-radius: 4rpx;
					border: 1px solid #D9D9D9;

					.option-item {
						width: 60rpx;
						height: 36rpx;
						line-height: 36rpx;
						color: #D9D9D9;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						text-align: center;
					}

					.option-item:not(:last-child) {
						border-right: 1px solid #D9D9D9;
					}
				}
			}

			.bottom-content {
				display: grid;
				grid-gap: 10px;
				grid-template-columns: repeat(4, 1fr);
				margin-top: 90rpx;
				margin-bottom: 80rpx;

				.count-type-list {
					height: 195rpx;
					background: #ECF8F7;
					border-radius: 5rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					text:nth-child(2) {
						font-family: Inter, Inter;
						font-weight: 400;
						font-size: 24rpx;
						color: #000000;
					}
				}

			}

			.count-content {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 40rpx;
				margin-bottom: 44rpx;

				/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
				.chart-content {
					width: 100%;
					// height: 300px;
				}
			}

			.risk-content {
				margin-top: 42rpx;
				margin-bottom: 40rpx;

				.risk-count {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 100%;

					.count-title,
					.risk-all-title {
						width: 100%;
						text-align: center;
						font-family: Inter, Inter;
						font-weight: bold;
						font-size: 36rpx;
						color: #000000;
					}
				}

				.risk-type {
					display: grid;
					grid-gap: 10px;
					grid-template-columns: repeat(2, 1fr);
					margin-top: 44rpx;

					&-item {
						// width: 364rpx;
						height: 190rpx;
						border-radius: 10rpx;
						font-family: Inter, Inter;
						font-weight: 500;
						color: #FFFFFF;

						text {
							font-size: 24rpx;
							margin-left: 10rpx;
						}

						view {
							font-size: 40rpx;
							margin-top: 32rpx;
							text-align: center;
						}
					}
				}
			}

			.hidden-content {
				display: flex;
				align-items: center;
				justify-content: center;

				/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
				.chart-hidden-content {
					width: 100%;
					margin-top: 6rpx;
					position: relative;

					// height: 300px;
					.chart-tip-legend {
						position: absolute;
						right: 0px;
						bottom: 0px;
						display: flex;
						align-items: center;

						.color-zfx {
							width: 42rpx;
							height: 20rpx;
							background: #5470C6;
						}

						text {
							font-family: Inter, Inter;
							font-weight: 400;
							font-size: 22rpx;
							color: #000000;
							margin-left: 10rpx;
						}
					}
				}
			}

			.trend-content {
				margin-top: 28rpx;
				margin-bottom: 52rpx;

				/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
				.chart-trend-content {
					width: 100%;
					// height: 600rpx;
				}
			}

			.hidden-sum-content {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;

				.title-one {
					font-family: Inter, Inter;
					font-weight: normal;
					font-size: 30rpx;
					color: #666363;
					margin-bottom: 10rpx;
				}

				.title-two {
					font-family: Inter, Inter;
					font-weight: normal;
					font-size: 24rpx;
					color: #666363;
					margin-bottom: 10rpx;
				}

				.hidden-chart-content {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.hidden-chart-left {
						width: 30%;
						margin-right: 56rpx;

						.left-legend-diy {
							display: flex;
							flex-direction: column;

							.diy-item {
								display: flex;
								align-items: center;

								.zfx {
									width: 20rpx;
									height: 20rpx;
									margin-right: 6rpx;
								}

								text {
									font-family: Inter, Inter;
									font-weight: normal;
									font-size: 20rpx;
									color: #AAABAE;
									margin-right: 8rpx;
								}
							}

							.diy-item:not(:last-child) {
								margin-bottom: 10rpx;
							}
						}
					}

					.hidden-chart-right {
						width: 60%;
						height: 100%;
					}
				}

				.divider-line {
					width: 500rpx;
					height: 0;
					border: 1px dashed #D1D2D8;
					margin-bottom: 62rpx;
				}
			}

			.question-content {
				width: 100%;
			}
		}

		.count-statistics:not(:last-child) {
			margin-bottom: 25rpx;
		}

		.svgImage {
			position: absolute;
			left: -3rpx;
			top: -3rpx;
		}

		.big-progressr {
			width: 100%;
			display: flex;
			justify-content: center;
			position: relative;
			transform: rotate(130deg);
			$offset: 30rpx;

			.u-progress-content {
				transform: rotate(-130deg);
				position: absolute;
				left: $offset;
				right: $offset;
				top: $offset;
				bottom: $offset;
				border-radius: 50%;
				padding: 70rpx;
				box-shadow: 0 0 50rpx 0rpx rgba(114, 231, 209, .5);


				.u-progress-box {
					border-radius: 50%;
					background-color: #fff;
					width: 100%;
					height: 100%;
					box-shadow: 0 0 15rpx 0rpx #eee;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					color: #3570FF;

					.value {
						font-size: 60rpx;
					}

					.title {
						font-size: 30rpx;
					}
				}
			}
		}

		.boxs {
			position: relative;
			margin-top: 30rpx;
			z-index: 10;
			display: flex;
			justify-content: space-between;

			image {
				width: 80rpx;
				height: 80rpx;
			}

			.box {
				display: flex;
				justify-content: space-between;
				padding: 20rpx;
				width: calc(50% - 15rpx);
				box-shadow: 0 0 20rpx 1rpx rgba(99, 225, 214, .5);
				border-radius: 12rpx;
				align-items: center;

				.box-content {
					font-size: 25rpx;
					text-align: right;

					.box-title {}

					.box-value {
						font-size: 50rpx;

						&.v1 {
							color: #e15057;
						}

						&.v2 {
							color: #e38a38;
						}
					}
				}
			}
		}
	}
</style>