<template>
	<div class="wrap">
		<div class="left">
			<div class="box1">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">典型阶段耗时</div>
					<div class="header-right">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon1.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box1-main">
					<div class="box1-main-center" id="chart1"></div>
					<div class="box1-main-footer">
						<div class="box-footer-left">
							<img src="../assets/icons/right-icon1.png" alt="" />
						</div>
						<div class="box-footer-center">
							从立法耗时角度分析，大而美法案从提交到签署仅39天，远快于历史同类法案（通常需6个月以上），立法速度极快。
						</div>
						<div class="box-footer-right">
							<img src="../assets/icons/arrow-right.png" alt="" />
						</div>
					</div>
				</div>
			</div>
			<div class="box2">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">修正案次数分析</div>
					<div class="header-right">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon1.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box2-main">
					<div class="box2-main-center" id="chart2"></div>
					<div class="box2-main-footer">
						<div class="box-footer-left">
							<img src="../assets/icons/right-icon1.png" alt="" />
						</div>
						<div class="box-footer-center">
							法案本质是共和党与资本集团的深度联盟，共和党获超
							​80%利益集团献金，以减税、松监管、军工扩张为核心回报。
						</div>
						<div class="box-footer-right">
							<img src="../assets/icons/arrow-right.png" alt="" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="right">
			<div class="box3">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">投票分析</div>
					<div class="header-right">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon1.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box3-main">
					<div class="box3-main-center">
						<div class="box3-main-center-header">
							<div class="box3-main-center-header-box1">立法阶段</div>
							<div class="box3-main-center-header-box2">票数</div>
							<div class="box3-main-center-header-box3">平均区间</div>
							<div class="box3-main-center-header-box4">占比</div>
							<div class="box3-main-center-header-box5">
								倒戈人数<span style="font-weight: normal; display: inline-block">(平均区间)</span>
							</div>
							<div class="box3-main-center-header-box6">关键议员</div>
						</div>
						<div class="box3-main-center-content">
							<div class="box3-main-center-content-box" v-for="item in voteAnalysisList" :key="item.actionId">
								<div class="item">
									<div class="item-box1">
										<div class="box1-left">
											<div style="width: 100%; display: flex; flex-direction: column; align-items: flex-end;">
												<div class="name nameBlod" :title="item.actionTitle" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
													{{ item.actionTitle }}
												</div>
												<div class="time">
													{{ formatDate(item.actionDate) }}
												</div>
											</div>
										</div>
										<div class="box1-right">
											<div class="box1-right-top">
												<el-progress :percentage="Number(item.agreePercent)" :show-text="false" color="#1677FF"> </el-progress>
											</div>
											<div class="box1-right-bottom">
												<el-progress :percentage="Number(item.againstPercent)" :show-text="false" color="#FF9054"> </el-progress>
											</div>
										</div>
									</div>
									<div class="item-box2">
										<div class="box2-1" style="color: #1677FF">{{ item.agreeCount + "票" }}</div>
										<div class="box2-2" style="color: #FF9054">{{ item.againstCount + "票" }}</div>
									</div>
									<div class="item-box3">
										<div class="box3-1"></div>
										<div class="box3-2"></div>
									</div>
									<div class="item-box4">
										<div class="box4-1" style="color: #1677FF">{{ item.agreePercent + "%" }}</div>
										<div class="box4-2" style="color: #FF9054">{{ item.againstPercent + "%" }}</div>
									</div>
									<div class="item-box5"></div>
									<div class="item-box6">
										<el-icon size="20" color="#555"><ArrowDownBold /></el-icon>
									</div>
								</div>
								<div class="item">
									<div class="item-box1">
										<div class="box1-left">
											<div class="icon">
												<img :src="MZD" alt="" />
											</div>
											<div class="name">民主党</div>
										</div>
										<div class="box1-right">
											<div class="box1-right-top">
												<el-progress :percentage="Number(item.dagreePercent)" :show-text="false" color="#85b4ff"> </el-progress>
											</div>
											<div class="box1-right-bottom">
												<el-progress :percentage="Number(item.dagainstPercent)" :show-text="false" color="#FF9054"> </el-progress>
											</div>
										</div>
									</div>
									<div class="item-box2">
										<div class="box2-1" style="color: #1677FF">{{ item.dagreeCount + "票" }}</div>
										<div class="box2-2" style="color: #FF9054">{{ item.dagainstCount + "票" }}</div>
									</div>
									<div class="item-box3"></div>
									<div class="item-box4">
										<div class="box4-1" style="color: #1677FF">{{ item.dagreePercent + "%" }}</div>
										<div class="box4-2" style="color: #FF9054">{{ item.dagainstPercent + "%" }}</div>
									</div>
									<div class="item-box5">
										<div class="box5-1" style="color: #CE4F51">{{ item.dreverseCount + "人" }}</div>
									</div>
									<div class="item-box6">
										<div class="img-box" v-if="item.dpersonImageUrl">
											<img :src="item.dpersonImageUrl" alt="" />
										</div>
									</div>
								</div>
								<div class="item">
									<div class="item-box1">
										<div class="box1-left">
											<div class="icon">
												<img :src="GHD" alt="" />
											</div>
											<div class="name">共和党</div>
										</div>
										<div class="box1-right">
											<div class="box1-right-top">
												<el-progress :percentage="Number(item.ragreePercent)" :show-text="false" color="#1677FF"> </el-progress>
											</div>
											<div class="box1-right-bottom">
												<el-progress :percentage="Number(item.ragainstPercent)" :show-text="false" color="#ffdcc8"> </el-progress>
											</div>
										</div>
									</div>
									<div class="item-box2">
										<div class="box2-1" style="color: #1677FF">{{ item.ragreeCount + "票" }}</div>
										<div class="box2-2" style="color: #FF9054">{{ item.ragainstCount + "票" }}</div>
									</div>
									<div class="item-box3"></div>
									<div class="item-box4">
										<div class="box4-1" style="color: #1677FF">{{ item.ragreePercent + "%" }}</div>
										<div class="box4-2" style="color: #FF9054">{{ item.ragainstPercent + "%" }}</div>
									</div>
									<div class="item-box5">
										<div class="box5-1" style="color: #CE4F51">{{ item.rreverseCount + "人" }}</div>
									</div>
									<div class="item-box6">
										<div class="img-box" v-if="item.rpersonImageUrl">
											<img :src="item.rpersonImageUrl" alt="" />
										</div>
									</div>
								</div>
							</div>
							<!-- <div class="box3-main-center-content-box">
								<div class="item" v-for="(item, index) in voteAnalysisList2" :key="index">
									<div class="item-box1">
										<div class="box1-left">
											<div class="icon" v-if="item.nameIcon">
												<img :src="item.nameIcon" alt="" />
											</div>
											<div>
												<div class="name" :class="{ nameBlod: item.nameBold }">
													{{ item.name }}
												</div>
												<div class="time">
													{{ item.time }}
												</div>
											</div>
										</div>
										<div class="box1-right">
											<div class="box1-right-top">
												<el-progress :percentage="item.supportRate" :show-text="false"> </el-progress>
											</div>
											<div class="box1-right-bottom">
												<el-progress :percentage="item.againistRate" :show-text="false"> </el-progress>
											</div>
										</div>
									</div>
									<div class="item-box2">
										<div class="box2-1">{{ item.support + "票" }}</div>
										<div class="box2-2">{{ item.againist + "票" }}</div>
									</div>
									<div class="item-box3">
										<div class="box3-1">{{ item.supportRank }}</div>
										<div class="box3-2">{{ item.againistRank }}</div>
									</div>
									<div class="item-box4">
										<div class="box4-1">{{ item.supportRate + "%" }}</div>
										<div class="box4-2">{{ item.againistRate + "%" }}</div>
									</div>
									<div class="item-box5">
										<div class="box5-1" v-if="item.people">{{ item.people+' 人' }}</div>
										<div class="box5-2" v-if="item.peopleRank">{{ `( ${item.peopleRank} )` }}</div>
									</div>
									<div class="item-box6">
										<div class="img-box" v-if="item.keyUser">
											<img :src="item.keyUser" alt="" />
										</div>
										<div v-else>
											<el-icon size="20" color="#555"><ArrowDownBold /></el-icon>
										</div>
									</div>
								</div>
							</div> -->
							<!-- <div class="box3-main-center-content-box">
								<div class="item" v-for="(item, index) in voteAnalysisList3" :key="index">
									<div class="item-box1">
										<div class="box1-left">
											<div class="icon" v-if="item.nameIcon">
												<img :src="item.nameIcon" alt="" />
											</div>
											<div>
												<div class="name" :class="{ nameBlod: item.nameBold }">
													{{ item.name }}
												</div>
												<div class="time">
													{{ item.time }}
												</div>
											</div>
										</div>
										<div class="box1-right">
											<div class="box1-right-top">
												<el-progress :percentage="item.supportRate" :show-text="false"> </el-progress>
											</div>
											<div class="box1-right-bottom">
												<el-progress :percentage="item.againistRate" :show-text="false"> </el-progress>
											</div>
										</div>
									</div>
									<div class="item-box2">
										<div class="box2-1">{{ item.support + "票" }}</div>
										<div class="box2-2">{{ item.againist + "票" }}</div>
									</div>
									<div class="item-box3">
										<div class="box3-1">{{ item.supportRank }}</div>
										<div class="box3-2">{{ item.againistRank }}</div>
									</div>
									<div class="item-box4">
										<div class="box4-1">{{ item.supportRate + "%" }}</div>
										<div class="box4-2">{{ item.againistRate + "%" }}</div>
									</div>
									<div class="item-box5">
										<div class="box5-1" v-if="item.people">{{ item.people+' 人' }}</div>
										<div class="box5-2" v-if="item.peopleRank">{{ `( ${item.peopleRank} )` }}</div>
									</div>
									<div class="item-box6">
										<div class="img-box" v-if="item.keyUser">
											<img :src="item.keyUser" alt="" />
										</div>
										<div v-else>
											<el-icon size="20" color="#555"><ArrowDownBold /></el-icon>
										</div>
									</div>
								</div>
							</div>
							<div class="box3-main-center-content-box">
								<div class="item" v-for="(item, index) in voteAnalysisList4" :key="index">
									<div class="item-box1">
										<div class="box1-left">
											<div class="icon" v-if="item.nameIcon">
												<img :src="item.nameIcon" alt="" />
											</div>
											<div>
												<div class="name" :class="{ nameBlod: item.nameBold }">
													{{ item.name }}
												</div>
												<div class="time">
													{{ item.time }}
												</div>
											</div>
										</div>
										<div class="box1-right">
											<div class="box1-right-top">
												<el-progress :percentage="item.supportRate" :show-text="false"> </el-progress>
											</div>
											<div class="box1-right-bottom">
												<el-progress :percentage="item.againistRate" :show-text="false"> </el-progress>
											</div>
										</div>
									</div>
									<div class="item-box2">
										<div class="box2-1">{{ item.support + "票" }}</div>
										<div class="box2-2">{{ item.againist + "票" }}</div>
									</div>
									<div class="item-box3">
										<div class="box3-1">{{ item.supportRank }}</div>
										<div class="box3-2">{{ item.againistRank }}</div>
									</div>
									<div class="item-box4">
										<div class="box4-1">{{ item.supportRate + "%" }}</div>
										<div class="box4-2">{{ item.againistRate + "%" }}</div>
									</div>
									<div class="item-box5">
										<div class="box5-1" v-if="item.people">{{ item.people+' 人' }}</div>
										<div class="box5-2" v-if="item.peopleRank">{{ `( ${item.peopleRank} )` }}</div>
									</div>
									<div class="item-box6">
										<div class="img-box" v-if="item.keyUser">
											<img :src="item.keyUser" alt="" />
										</div>
										<div v-else>
											<el-icon size="20" color="#555"><ArrowDownBold /></el-icon>
										</div>
									</div>
								</div>
							</div> -->
						</div>
					</div>
					<div class="box3-main-footer">
						<div class="box-footer-left">
							<img src="../assets/icons/right-icon1.png" alt="" />
						</div>
						<div class="box-footer-center">
							法案以218:214​（众议院）和51:50​（副总统决胜票）微弱优势强行通过，暴露两党极端对立、党内倒戈频发的特点。
						</div>
						<div class="box-footer-right">
							<img src="../assets/icons/arrow-right.png" alt="" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getBillTimeAnalyze, getBillAmeAnalyzeCount, getBillTp } from "@/api/deepdig";
import getBoxPlotChcart from "./utils/boxplot";
import * as echarts from "echarts";

import icon1 from "./assets/images/icon1.png";
import icon2 from "./assets/images/icon2.png";
import icon3 from "./assets/images/icon3.png";
import icon4 from "./assets/images/icon4.png";
import icon5 from "./assets/images/icon5.png";
import icon6 from "./assets/images/icon6.png";
import icon7 from "./assets/images/icon7.png";
import icon8 from "./assets/images/icon8.png";
import keyUser from "./assets/images/keyUser.png";
import iconA from "./assets/images/icon-a.png";
import iconB from "./assets/images/icon-b.png";

import user1 from "./assets/images/user1.png";
import user2 from "./assets/images/user2.png";
import user3 from "./assets/images/user3.png";
import user4 from "./assets/images/user4.png";
import user5 from "./assets/images/user5.png";
import userIcon1 from "./assets/images/user-icon1.png";
import userIcon2 from "./assets/images/user-icon2.png";

import getPieChart from "./utils/pieChart";

import CYY from "@/assets/icons/cyy.png";
import ZYY from "@/assets/icons/zyy.png";
import MZD from "@/assets/icons/mzd.png";
import GHD from "@/assets/icons/ghd.png";

const voteAnalysisList1 = ref([
	{
		nameIcon: null,
		name: "委员会审议",
		time: "2025年5月20日",
		nameBold: true,
		support: 17,
		againist: 16,
		supportRank: "(15-20)",
		againistRank: "(14-19)",
		supportRate: 51.5,
		againistRate: 48.5,
		people: "",
		keyUser: null
	},
	{
		nameIcon: iconA,
		name: "民主党",
		support: 1,
		againist: 15,
		supportRank: "",
		againistRank: "",
		supportRate: 7.3,
		againistRate: 92.7,
		people: 1,
		peopleRank: "0-1",
		keyUser: keyUser
	},
	{
		nameIcon: iconB,
		name: "共和党",
		support: 16,
		againist: 1,
		supportRank: "",
		againistRank: "",
		supportRate: 94.5,
		againistRate: 5.5,
		people: 1,
		peopleRank: "1-2",
		keyUser: keyUser
	}
]);

const voteAnalysisList2 = ref([
	{
		nameIcon: null,
		name: "众议院投票",
		time: "2025年5月20日",
		nameBold: true,
		support: 215,
		againist: 214,
		supportRank: "(210-220)",
		againistRank: "(200-215)",
		supportRate: 50.1,
		againistRate: 49.9,
		people: "",
		keyUser: null
	},
	{
		nameIcon: iconA,
		name: "民主党",
		support: 0,
		againist: 212,
		supportRank: "",
		againistRank: "",
		supportRate: 0,
		againistRate: 92.7,
		people: 0,
		peopleRank: "0-1",
		keyUser: keyUser
	},
	{
		nameIcon: iconB,
		name: "共和党",
		support: 215,
		againist: 3,
		supportRank: "",
		againistRank: "",
		supportRate: 98.7,
		againistRate: 1.3,
		people: 3,
		peopleRank: "1-3",
		keyUser: keyUser
	}
]);

const voteAnalysisList3 = ref([
	{
		nameIcon: null,
		name: "参议院投票",
		time: "2025年5月20日",
		nameBold: true,
		support: 51,
		againist: 50,
		supportRank: "(48-51)",
		againistRank: "(49-50)",
		supportRate: 50.5,
		againistRate: 49.5,
		people: "",
		keyUser: null
	},
	{
		nameIcon: iconA,
		name: "民主党",
		support: 1,
		againist: 15,
		supportRank: "",
		againistRank: "",
		supportRate: 7.3,
		againistRate: 92.7,
		people: 1,
		peopleRank: "0-1",
		keyUser: keyUser
	},
	{
		nameIcon: iconB,
		name: "共和党",
		support: 16,
		againist: 1,
		supportRank: "",
		againistRank: "",
		supportRate: 94.5,
		againistRate: 5.5,
		people: 1,
		peopleRank: "1-2",
		keyUser: keyUser
	}
]);

const voteAnalysisList4 = ref([
	{
		nameIcon: null,
		name: "众议院二次投票",
		time: "2025年5月20日",
		nameBold: true,
		support: 17,
		againist: 16,
		supportRank: "(15-20)",
		againistRank: "(14-19)",
		supportRate: 51.5,
		againistRate: 48.5,
		people: "",
		keyUser: null
	},
	{
		nameIcon: iconA,
		name: "民主党",
		support: 1,
		againist: 15,
		supportRank: "",
		againistRank: "",
		supportRate: 7.3,
		againistRate: 92.7,
		people: 1,
		peopleRank: "0-1",
		keyUser: keyUser
	},
	{
		nameIcon: iconB,
		name: "共和党",
		support: 16,
		againist: 1,
		supportRank: "",
		againistRank: "",
		supportRate: 94.5,
		againistRate: 5.5,
		people: 1,
		peopleRank: "1-2",
		keyUser: keyUser
	}
]);

// 绘制echarts图表
const setChart = (option, chartId) => {
	let chartDom = document.getElementById(chartId);
	chartDom.removeAttribute("_echarts_instance_");
	let chart = echarts.init(chartDom);
	chart.setOption(option);
	return chart;
};

const chartData1 = ref({
	dataX: ["众议院通过", "参议院通过", "两院协商", "总统签署"],
	dataY: [
		[23, 28, 92, 81, 64, 54, 72, 38, 39, 66, 90, 55, 68, 69, 82, 42, 47, 49, 85, 81],
		[31, 35, 67, 37, 80, 92, 110, 28, 55, 46, 81, 35, 46, 47, 49, 85, 84, 89, 55, 43],
		[20, 18, 62, 51, 33, 37, 39, 48, 59, 35, 36, 38, 60, 49, 42, 32, 25, 39, 55, 41],
		[20, 9, 18, 21, 28, 33, 30, 17, 12, 13, 20, 29, 28, 26, 12, 28, 26, 21, 32, 35]
	]
});

const chartData2 = ref({
	dataX: ["委员会审议", "辩论", "表决"],
	dataY: [
		[12, 15, 32, 42, 37, 33, 21, 20, 14, 15, 18, 25, 35, 36, 37, 33, 44],
		[23, 33, 21, 16, 18, 25, 28, 36, 33, 31, 30, 15, 16, 25, 23, 24, 20],
		[20, 18, 33, 21, 20, 18, 19, 18, 29, 30, 27, 22, 21, 20, 22, 13, 17]
	]
});

// 耗时分析
const handleGetBillTimeAnalyze = async () => {
	const params = {
		id: window.sessionStorage.getItem("billId")
	};
	try {
		const res = await getBillTimeAnalyze(params);
		console.log("耗时分析", res);
		chartData1.value.dataX = res.data.map(item => {
			return item.lcmc;
		});
		chartData1.value.dataY = res.data.map(item => {
			return [item.zshs, item.pjx, item.zws, item.pjs, item.zdhs, item.dysc];
		});
	} catch (error) {}
};

// 修正案次数分析
const handleGetBillAmeAnalyzeCount = async () => {
	const params = {
		id: window.sessionStorage.getItem("billId")
	};
	try {
		const res = await getBillAmeAnalyzeCount(params);
		console.log("修正案次数分析", res);
		chartData2.value.dataX = res.data.map(item => {
			return item.lcmc;
		});
		chartData2.value.dataY = res.data.map(item => {
			// 兼容多种字段名，防止字段不存在导致图表消失
			// 顺序：最小(min), Q1(小), 中位数(median), Q3(大), 最大(max), 该法案(current)
			return [
				item.zsCount || item.zscs || item.zshs || 0, 
				item.jsx || item.pjx || 0, 
				item.zws || item.zwcs || 0, 
				item.pjs || item.pjcs || 0, 
				item.zdCount || item.zdcs || item.zdhs || 0, 
				item.dysc || item.dycs || 0
			];
		});
	} catch (error) {
        console.error("修正案次数分析 error", error);
    }
};

// 获取投票分析
const voteAnalysisList = ref([]);
const formatDate = (dateStr) => {
	if (!dateStr) return "";
	const date = new Date(dateStr);
	const y = date.getFullYear();
	const m = date.getMonth() + 1;
	const d = date.getDate();
	return `${y}年${m}月${d}日`;
};
const handleGetBillVoteAnalyze = async () => {
	const params = {
		id: window.sessionStorage.getItem("billId")
	};
	try {
		const res = await getBillTp(params);
		console.log("投票分析", res);
		voteAnalysisList.value = res.data;
	} catch (error) {
        console.error("投票分析 error", error);
    }
};

onMounted(async () => {
	await handleGetBillTimeAnalyze();
	await handleGetBillAmeAnalyzeCount();
	await handleGetBillVoteAnalyze();
		
	let chart1 = getBoxPlotChcart(chartData1.value, "天");
	setChart(chart1, "chart1");

    const countLabels = {
        max: '最大次数',
        q3: '平均次数大',
        median: '次数中位数',
        q1: '平均次数小',
        min: '最小次数',
        current: '该法案修正案数量'
    };
	let chart2 = getBoxPlotChcart(chartData2.value, "次", countLabels);
	setChart(chart2, "chart2");
});
</script>

<style lang="scss" scoped>
.wrap {
	display: flex;
	.box-header {
		height: 56px;
		display: flex;
		position: relative;
		.header-left {
			margin-top: 18px;
			width: 8px;
			height: 20px;
			border-radius: 0 4px 4px 0;
			background: var(--color-main-active);
		}
		.title {
			margin-left: 14px;
			margin-top: 14px;
			height: 26px;
			line-height: 26px;
			color: var(--color-main-active);
			font-family: Microsoft YaHei;
			font-size: 20px;
			font-weight: 700;
		}
		.header-switch-box {
			position: absolute;
			top: 14px;
			right: 349px;
			width: 160px;
			height: 28px;
			background: url("./assets/images/chartActive.png");
			background-size: 100% 100%;
			display: flex;
			cursor: pointer;
			.header-switch-box-left {
				width: 80px;
			}
			.header-switch-box-right {
				width: 80px;
			}
		}
		.headerSwitchBox1 {
			background: url("./assets/images/dataActive.png") !important;
			background-size: 100% 100% !important;
		}
		.header-btn-box {
			position: absolute;
			top: 14px;
			right: 52px;
			display: flex;
			.btn {
				margin-left: 20px;
			}
		}
		.header-right {
			position: absolute;
			top: 14px;
			right: 12px;
			display: flex;
			justify-content: flex-end;
			gap: 4px;
			.icon {
				width: 28px;
				height: 28px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.left {
		margin-top: 16px;
		.box1 {
			width: 860px;
			height: 415px;
			background: rgb(255, 255, 255);
			border-radius: 10px;
			box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
			.box1-main {
				height: 359px;
				.box1-main-center {
					height: 300px;
					margin: 0 5px;
					overflow: hidden;
					.box1-main-table {
						display: flex;
						margin-top: 30px;
						width: 758px;
						height: 240px;
						border-radius: 4px;
						border: 1px solid #e7f1ff;
						.table-name {
							flex: 1;
							text-align: center;
							.name-item {
								height: 48px;
								display: flex;
								align-items: center;
								justify-content: center;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
							}
							.name-item:nth-child(2n-1) {
								background: rgba(246, 251, 255, 1);
							}
						}
						.table-item {
							flex: 1;
							.item {
								height: 48px;
								display: flex;
								align-items: center;
								justify-content: center;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
							}
							.item:first-child {
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
							}
							.item:nth-child(3) {
								color: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
							}
							.item:nth-child(5) {
								color: rgba(206, 79, 81, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
							}
							.item:nth-child(2n-1) {
								background: rgba(246, 251, 255, 1);
							}
						}
					}
				}
				.box1-main-footer {
					width: 830px;
					height: 40px;
					display: flex;
					box-sizing: border-box;
					margin: 0 auto;
					margin-top: 6px;
					background: rgba(246, 251, 255, 1);
					.box-footer-left {
						margin-top: 10px;
						margin-left: 12px;
						width: 19px;
						height: 20px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.box-footer-center {
						margin-left: 13px;
						margin-top: 8px;
						width: 749px;
						height: 24px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 24px;
					}
					.box-footer-right {
						margin-left: 13px;
						margin-top: 8px;
						width: 24px;
						height: 24px;
						background: rgba(231, 241, 255, 1);
						border-radius: 12px;
						background: #e7f1ff;
						box-sizing: border-box;
						padding: 3px;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
		.box2 {
			margin-top: 17px;
			width: 860px;
			height: 415px;
			background: rgb(255, 255, 255);
			border-radius: 10px;
			box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
			.box2-main {
				height: 359px;
				.box2-main-center {
					height: 300px;
					margin: 0 5px;
					display: flex;
					.box2-main-center-left {
						width: 480px;
						height: 300px;
						.left-item {
							width: 480px;
							height: 54px;
							box-sizing: border-box;
							border: 1px solid rgba(241, 243, 246, 1);
							border-radius: 4px;
							margin-bottom: 8px;
							display: flex;
							.left-item-left {
								width: 40px;
								height: 40px;
								margin-left: 14px;
								margin-top: 8px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.left-item-center {
								margin-left: 14px;
								width: 240px;
								.left-item-center-top {
									display: flex;
									.name {
										margin-top: 5px;
										height: 24px;
										color: rgba(59, 65, 75, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 700;
										line-height: 24px;
									}
									.icon1 {
										margin-left: 6px;
										margin-top: 9px;
										width: 16px;
										height: 16px;
										img {
											width: 100%;
											height: 100%;
										}
									}
									.icon2 {
										margin-left: 2px;
										margin-top: 9px;
										width: 16px;
										height: 16px;
										img {
											width: 100%;
											height: 100%;
										}
									}
								}
								.left-item-center-bottom {
									color: rgba(132, 136, 142, 1);
									font-family: Microsoft YaHei;
									font-size: 14px;
									font-weight: 400;
									line-height: 20px;
								}
							}
							.left-item-right {
								width: 150px;
								text-align: right;
								.left-item-right-top {
									height: 24px;
									margin-top: 5px;
									color: rgba(206, 79, 81, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
									line-height: 24px;
								}
								.left-item-right-bottom {
									height: 20px;
									color: rgba(132, 136, 142, 1);
									font-family: Microsoft YaHei;
									font-size: 14px;
									font-weight: 400;
									line-height: 20px;
								}
							}
						}
					}
					.box2-main-center-right {
						width: 330px;
						margin: 0 auto;
						position: relative;
						#chart2 {
							position: relative;
							width: 330px;
							height: 300px;
							z-index: 0;
						}
						.info-box {
							position: absolute;
							z-index: 99;
							left: 90px;
							top: 75px;
							width: 150px;
							height: 150px;
							border-radius: 50px;
							.item {
								margin: 15px 0;

								.item-top {
									display: flex;
									justify-content: center;
									height: 24px;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									.icon {
										width: 20px;
										height: 20px;
										margin-top: 2px;
										margin-right: 2px;
										img {
											width: 100%;
											height: 100%;
										}
									}
								}
								.item-footer {
									color: rgba(206, 79, 81, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
									line-height: 24px;
									text-align: center;
								}
								.item-footer1 {
									color: rgba(22, 119, 255, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
									line-height: 24px;
									text-align: center;
								}
							}
						}
					}
					// .box2-main-center-content {
					//   height: 264px;
					//   display: flex;
					//   flex-wrap: wrap;
					//   justify-content: space-between;
					//   .box2-item {
					//     width: 402px;
					//     height: 58px;
					//     box-sizing: border-box;
					//     border: 1px solid rgba(243, 243, 244, 1);
					//     border-radius: 4px;
					//     margin-bottom: 8px;
					//     display: flex;
					//     .box2-item-left {
					//       width: 36px;
					//       height: 36px;
					//       margin-left: 16px;
					//       margin-top: 11px;
					//       img {
					//         width: 100%;
					//         height: 100%;
					//       }
					//     }
					//     .box2-item-center {
					//       margin-left: 14px;
					//       margin-top: 5px;
					//       width: 220px;
					//       .box2-item-center-top {
					//         height: 24px;
					//         color: rgba(59, 65, 75, 1);
					//         font-family: Microsoft YaHei;
					//         font-size: 14px;
					//         font-weight: 600;
					//         line-height: 24px;
					//       }
					//       .box2-item-center-bottom {
					//         height: 24px;
					//         color: rgba(132, 136, 142, 1);
					//         font-family: Microsoft YaHei;
					//         font-size: 14px;
					//         font-weight: 400;
					//         line-height: 24px;
					//       }
					//     }
					//     .box2-item-right {
					//       margin-left: 2px;
					//       .box2-item-right-top {
					//         height: 24px;
					//         color: rgba(206, 79, 81, 1);
					//         font-family: Microsoft YaHei;
					//         font-size: 14px;
					//         font-weight: 600;
					//         line-height: 24px;
					//       }
					//       .box2-item-right-bottom {
					//         height: 24px;
					//         color: rgba(132, 136, 142, 1);
					//         font-family: Microsoft YaHei;
					//         font-size: 14px;
					//         font-weight: 400;
					//         line-height: 24px;
					//         text-align: right;
					//       }
					//     }
					//   }
					// }
					// .box2-main-center-footer {
					//   height: 36px;
					//   display: flex;
					//   justify-self: center;
					// }
				}
				.box2-main-footer {
					width: 830px;
					height: 40px;
					display: flex;
					box-sizing: border-box;
					margin: 0 auto;
					margin-top: 6px;
					background: rgba(246, 251, 255, 1);
					.box-footer-left {
						margin-top: 10px;
						margin-left: 12px;
						width: 19px;
						height: 20px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.box-footer-center {
						margin-left: 13px;
						margin-top: 8px;
						width: 749px;
						height: 24px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 24px;
					}
					.box-footer-right {
						margin-left: 13px;
						margin-top: 8px;
						width: 24px;
						height: 24px;
						background: rgba(231, 241, 255, 1);
						border-radius: 12px;
						background: #e7f1ff;
						box-sizing: border-box;
						padding: 3px;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
	.right {
		margin-left: 16px;
		margin-top: 16px;
		width: 860px;
		height: 847px;
		background: rgb(255, 255, 255);
		.box3 {
			width: 100%;
			height: 100%;
			border-radius: 10px;
			box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
			.box3-main {
				height: 791px;
				.box3-main-center {
					height: 732px;
					margin: 0 23px;
					.box3-main-center-header {
						height: 50px;
						display: flex;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 600;
						line-height: 22px;
						padding: 0 20px;
						.box3-main-center-header-box1 {
							width: 370px;
							text-align: center;
						}
						.box3-main-center-header-box2 {
							width: 60px;
							text-align: center;
						}
						.box3-main-center-header-box3 {
							width: 75px;
							text-align: center;
						}
						.box3-main-center-header-box4 {
							width: 70px;
							text-align: center;
						}
						.box3-main-center-header-box5 {
							width: 100px;
							text-align: center;
						}
						.box3-main-center-header-box6 {
							width: 90px;
							text-align: center;
						}
					}
					.box3-main-center-content {
						height: 682px;
						overflow: auto;
						.box3-main-center-content-box {
							width: 805px;
							height: 160px;
							box-sizing: border-box;
							border: 1px solid rgba(243, 243, 244, 1);
							border-radius: 4px;
							background: rgba(255, 255, 255, 1);
							margin-bottom: 10px;
							padding: 20px;
							.item {
								display: flex;
								height: 45px;
								.item-box1 {
									width: 370px;
									display: flex;
									.box1-left {
										width: 130px;
										display: flex;
										justify-content: flex-end;
										.icon {
											width: 16px;
											height: 16px;
											img {
												width: 100%;
												height: 100%;
											}
										}
										.name {
											margin-left: 10px;
											height: 22px;
											color: rgba(59, 65, 75, 1);
											font-family: Microsoft YaHei;
											font-size: 16px;
											line-height: 22px;
											text-align: right;
										}
										.nameBlod {
											font-weight: 600;
										}
										.time {
											height: 22px;
											color: rgba(95, 101, 108, 1);
											font-family: Microsoft YaHei;
											font-size: 14px;
											font-weight: 400;
											line-height: 22px;
											text-align: right;
										}
									}
									.box1-right {
										// border-left: 1px solid rgba(243, 243, 244, 1);
										// border-right: 1px solid rgba(243, 243, 244, 1);
										width: 240px;
										.box1-right-top {
											:deep(.el-progress-bar__inner) {
												background: rgba(22, 119, 255, 1);
												border-radius: 0;
											}
											:deep(.el-progress-bar__outer) {
												background: rgba(22, 119, 255, 0.1);
												border-radius: 0;
											}
										}
										.box1-right-bottom {
											:deep(.el-progress-bar__inner) {
												background: rgba(255, 172, 77, 1);
												border-radius: 0;
											}
											:deep(.el-progress-bar__outer) {
												background: rgba(255, 172, 77, 0.1);
												border-radius: 0;
											}
										}
									}
								}
								.item-box2 {
									width: 60px;
									text-align: center;
									.box2-1 {
										height: 14px;
										color: rgba(22, 119, 255, 1);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										line-height: 14px;
										text-align: center;
									}
									.box2-2 {
										margin-top: 5px;
										height: 14px;
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										line-height: 14px;
										text-align: center;
										color: rgba(255, 172, 77, 1);
									}
								}
								.item-box3 {
									width: 75px;
									text-align: center;
									.box3-1 {
										height: 14px;
										color: rgba(22, 119, 255, 1);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										line-height: 14px;
										text-align: center;
									}
									.box3-2 {
										margin-top: 5px;
										height: 14px;
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										line-height: 14px;
										text-align: center;
										color: rgba(255, 172, 77, 1);
									}
								}
								.item-box4 {
									width: 70px;
									text-align: center;
									.box4-1 {
										height: 14px;
										color: rgba(22, 119, 255, 1);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										line-height: 14px;
										text-align: center;
									}
									.box4-2 {
										margin-top: 5px;
										height: 14px;
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										line-height: 14px;
										text-align: center;
										color: rgba(255, 172, 77, 1);
									}
								}
								.item-box5 {
									width: 100px;
									text-align: center;
									.box5-1 {
										height: 14px;
										color: rgba(206, 79, 81, 1);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 600;
										line-height: 14px;
									}
									.box5-2 {
										margin-top: 5px;
										height: 14px;
										color: rgba(206, 79, 81, 1);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										line-height: 14px;
									}
								}
								.item-box6 {
									width: 90px;
									text-align: center;
									.img-box {
										width: 30px;
										height: 30px;
										margin-left: 30px;
										img {
											width: 100%;
											height: 100%;
										}
									}
								}
							}
						}
					}
				}
				.box3-main-footer {
					width: 830px;
					height: 40px;
					display: flex;
					box-sizing: border-box;
					margin: 0 auto;
					margin-top: 6px;
					background: rgba(246, 251, 255, 1);
					.box-footer-left {
						margin-top: 10px;
						margin-left: 12px;
						width: 19px;
						height: 20px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.box-footer-center {
						margin-left: 13px;
						margin-top: 8px;
						width: 749px;
						height: 24px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 24px;
					}
					.box-footer-right {
						margin-left: 13px;
						margin-top: 8px;
						width: 24px;
						height: 24px;
						background: rgba(231, 241, 255, 1);
						border-radius: 12px;
						background: #e7f1ff;
						box-sizing: border-box;
						padding: 3px;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
}

:deep(.el-progress-bar__outer) {
	height: 8px !important;
	margin-bottom: 8px;
	width: 230px;
	margin-left: 10px;
}
</style>
