<template>
	<div class="industry-wrap">
		<div class="left">
			<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="left-top" id="chart1"></div>
			<div class="left-center">
				<div class="left-center-btn-box">
					<div
						class="left-center-btn"
						:class="{ btnActive: box1BtnActive === index }"
						v-for="(item, index) in industryList"
						:key="index"
						@click="handleClickBox1Btn(item, index)"
					>
						{{ item.name }}
					</div>
				</div>
			</div>
			<div class="left-footer">
				<div class="item-box">
					<div
						class="item"
						:class="{ itemActive: companyActiveIndex === idx }"
						@click="handleClickCompany(val, idx)"
						v-for="(val, idx) in curCompanyList"
						:key="idx"
					>
						<div class="id">{{ (currentPage - 1) * pageSize + idx + 1 }}</div>
						<div class="title" :class="{ titleActive: companyActiveIndex === ((currentPage - 1) * pageSize + idx) }">
							{{ val.name }}
						</div>
						<div class="icon">
							<img v-if="val.status === 'up'" :src="upIcon" alt="" />
							<img v-if="val.status === 'down'" :src="downIcon" alt="" />
						</div>
					</div>
				</div>
				<div class="footer-box">
					<div class="left">{{ `共${companyList.length}家企业` }}</div>
					<div class="right">
						<el-pagination
							@current-change="handleCurrentChange"
							:pageSize="pageSize"
							:current-page="currentPage"
							size="small"
							background
							layout="prev, pager, next"
							:total="companyList.length"
						/>
					</div>
				</div>
			</div>
		</div>
		<div class="right">
			<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="right-main">
				<div class="right-main-content" id="chartGraph">
					<div class="right-main-content-header">
						<div class="header-item1">
							<div class="header-item1-top">{{ "基础支撑" }}</div>
							<div class="header-item1-bottom">
								<div class="icon">
									<img src="./assets/images/warning.png" alt="" />
								</div>
								<div class="text">
									{{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
								</div>
							</div>
						</div>
						<div class="header-item2">
							<div class="header-item2-top">{{ "软件算法" }}</div>
							<div class="header-item2-bottom">
								<div class="icon">
									<img src="./assets/images/warning.png" alt="" />
								</div>
								<div class="text">
									{{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
								</div>
							</div>
						</div>
						<div class="header-item3">
							<div class="header-item3-top">{{ "行业应用" }}</div>
							<div class="header-item3-bottom">
								<div class="icon">
									<img src="./assets/images/warning.png" alt="" />
								</div>
								<div class="text">
									{{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
								</div>
							</div>
						</div>
					</div>
					<div class="right-main-content-main">
						<Fishbone />
					</div>
				</div>
				<div class="box-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 class="graph-dialog" v-if="isShowCompanyDialog">
				<div class="tool-box">
					<div class="tool" @click="handleChangeChart(0)">
						<img src="./assets/images/tool1.png" alt="" />
					</div>
					<div class="tool1" @click="handleChangeChart(1)">
						<img src="./assets/images/tool2.png" alt="" />
					</div>
					<div class="tool" @click="handleChangeChart(0)">
						<img src="./assets/images/tool3.png" alt="" />
					</div>
				</div>
				<div class="chart-box" id="graphChart"></div>
			</div>
			<div class="company-dialog" v-if="isShowCompanyDialog">
				<div class="dialog-header">
					<div class="logo">
						<img :src="companyInfo.logo" alt="" />
					</div>
					<div class="company-title">{{ companyInfo.name }}</div>
					<div class="status-icon">
						<img v-if="companyInfo.status === 'up'" :src="upIcon" alt="" />
						<img v-if="companyInfo.status === 'down'" :src="downIcon" alt="" />
					</div>
					<div class="status-rate">
						{{ companyInfo.changeRate + "%" }}
					</div>
					<div class="close" @click="isShowCompanyDialog = false">
						<img :src="closeIcon" alt="" />
					</div>
				</div>
				<div class="dialog-main">
					<div class="dialog-box1">
						<div class="dialog-box1-header">
							<div class="icon">
								<img :src="companyInfo.data1?.icon" alt="" />
							</div>
							<div class="dialog-box1-title">{{ companyInfo.data1?.title }}</div>
						</div>
						<div class="dialog-box1-main">
							<div class="item" v-for="(val, idx) in companyInfo.data1?.list" :key="idx">
								<div class="item-left">
									<!-- <img :src="uncheckIcon" alt=""> -->
									<img :src="checkedIcon" alt="" />
								</div>
								<div class="item-right">
									<CommonPrompt :content="val">{{ val }}</CommonPrompt>
								</div>
							</div>
						</div>
					</div>
					<div class="dialog-box2">
						<div class="dialog-box2-header">
							<div class="icon">
								<img :src="companyInfo.data2?.icon" alt="" />
							</div>
							<div class="dialog-box2-title">{{ companyInfo.data2?.title }}</div>
						</div>
						<div class="dialog-box2-main" id="chart2"></div>
					</div>
					<div class="dialog-box3">
						<div class="dialog-box3-header">
							<div class="icon">
								<img :src="companyInfo.data3?.icon" alt="" />
							</div>
							<div class="dialog-box3-title">{{ companyInfo.data3?.title }}</div>
						</div>
						<div class="dialog-box3-main" id="chart3"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, nextTick, computed } from "vue";
import { useRoute } from "vue-router";
import * as echarts from "echarts";

const route = useRoute();
import { getCompanyList, getIndustryHyly, getHylyList, getCompanyDetail } from "@/api/influence";
import getBarChart from "./utils/barChart";
import getLineChart from "./utils/lineChart";
import getBarChart1 from "./utils/barChart1";
import getGraph from "./utils/graph";
import getGraphChart from "./utils/graphChart";
import getTreeChart from "./utils/treeChart";

import downIcon from "./assets/images/down.png";
import upIcon from "./assets/images/up.png";
import CompanyLogo from "./assets/images/company-logo.png";
import icon1 from "./assets/images/icon1.png";
import icon2 from "./assets/images/icon2.png";
import icon3 from "./assets/images/icon3.png";
import uncheckIcon from "./assets/images/uncheck.png";
import checkedIcon from "./assets/images/checked.png";
import closeIcon from "./assets/images/close.png";

import Fishbone from "./components/fishbone.vue";
import CommonPrompt from "../../commonPrompt/index.vue";

import CompanyImg from "./assets/images/symbol.png";

const isShowCompanyDialog = ref(false);

const box1BtnActive = ref(0);

const handleClickBox1Btn = (industry, index) => {
	box1BtnActive.value = index;
	curHylyId.value = industry.id;
	handleGetCompanyListById();
};

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

const chart1Data = ref({
	name: [],
	value: [],
});

const showAllChart1 = ref(false);
const fullChart1Data = ref({ name: [], value: [] });

// const handleToggleChart1 = () => {
// 	showAllChart1.value = !showAllChart1.value;
// 	renderChart1();
// };

const renderChart1 = () => {
	let dataName = fullChart1Data.value.name;
	let dataValue = fullChart1Data.value.value;

	// if (!showAllChart1.value && dataName.length > 5) {
	// 	dataName = dataName.slice(0, 5);
	// 	dataValue = dataValue.slice(0, 5);
	// }

	let chart1 = getBarChart(dataName, dataValue);
	setChart(chart1, "chart1");
};

const industryActiveIndex = ref(0);
const companyActiveIndex = ref(0);
const curCompanyId = ref("");

const handleClickCompany = (val, index) => {
	companyActiveIndex.value = (currentPage.value - 1) * pageSize.value + index;
	if (val) {
		curCompanyId.value = val.id;
		handleGetCompanyDetail();
		companyInfo.value.name = val.name;
		companyInfo.value.status = val.status || companyInfo.value.status;
	}
	isShowCompanyDialog.value = true;

};

const pageSize = ref(10);
const currentPage = ref(1);

const companyList = ref([]); // 企业列表
// 当前企业列表
const curCompanyList = computed(() => {
	const startIndex = (currentPage.value - 1) * pageSize.value;
	const endIndex = startIndex + pageSize.value;
	return companyList.value.slice(startIndex, endIndex);
});

// 处理页码改变事件
const handleCurrentChange = page => {
	currentPage.value = page;
};

const industryList = ref([
	//  {
	//     "id": 1,
	//     "hylyid": "0100",
	//     "hylymc": "风电"
	//   }
]);

const companyInfo = ref({
	// logo: CompanyLogo,
	// name: "宁德时代新能源科技股份有限公司",
	// status: "down",
	// changeRate: 0.16,
	// data1: {
	// 	icon: icon1,
	// 	title: "影响条款",
	// 	list: [
	// 		"严格限制外国敏感实体（FEOC）参与补贴",
	// 		"取消电动汽车补贴（2025年底生效）",
	// 		"任何实体若与被禁止外国实体签订超100万美元的关键技术许可协议，则不得向其提供联邦补贴"
	// 	]
	// },
	// data2: {
	// 	icon: icon2,
	// 	title: "融资情况",
	// 	data: {
	// 		time: ["2025-06", "2025-07", "2025-08"],
	// 		value: [1.12, 1.42, 1.5]
	// 	}
	// },
	// data3: {
	// 	icon: icon3,
	// 	title: "研发投入",
	// 	data: {
	// 		time: ["2023Q3", "2023Q4", "2024Q1", "2024Q2", "2024Q3", "2024Q4", "2025Q1", "2025Q2"],
	// 		value: [50, 53, 52, 54, 58, 60, 51, 56, 64]
	// 	}
	// }
});

// 获取行业领域列表
const handleGetHylyList = async () => {
	try {
		const res = await getHylyList();
		// console.log("行业领域字典列表", res);
		industryList.value = res.data
		if (res.data && res.data.length > 0) {
			curHylyId.value = res.data[0].id;
		}
	} catch (error) {}
};

const curHylyId = ref("");

// 根据行业领域id获取公司列表
const handleGetCompanyListById = async () => {
	const params = {
		id: curHylyId.value
	};
	try {
		const res = await getCompanyList(params);
		// console.log('根据行业id获取公司里列表', res);
		if (res.code === 200 && res.data.length) {
			companyList.value = res.data;
			currentPage.value = 1;
			nextTick(() => {
				handleClickCompany(companyList.value[0], 0);
			});
		} else {
			companyList.value = [];
		}
	} catch (error) {}
};

// 根据法案ID 获取行业领域统计
const handleGetIndustryHyly = async () => {
	const params = {
		id: window.sessionStorage.getItem("billId")
	};
	try {
		const res = await getIndustryHyly(params);
		// console.log('行业领域统计', res);
		const data = res.data || [];
		data.sort((a, b) => b.companyNum - a.companyNum);
		fullChart1Data.value.name = data.map(item => {
			return item.hylyName;
		});
		fullChart1Data.value.value = data.map(item => {
			return item.companyNum;
		});
		renderChart1();
	} catch (error) {}
};

// 根据法案id，公司id，行业领域id获取公司的详情
const handleGetCompanyDetail = async () => {
	const params = {
		billId: window.sessionStorage.getItem("billId"),
		companyId: curCompanyId.value,
		id: curHylyId.value
	};
	try {
		const res = await getCompanyDetail(params);
		console.log('根据法案id，公司id，行业领域id获取公司的详情', res);
		if (res.code === 200 && res.data) {
			const data = res.data;
			companyInfo.value = {
				logo: data.imageUrl || CompanyLogo,
				name: data.name || "",
				status: "", // 接口未返回，暂时留空或保留默认
				changeRate: 0, // 接口未返回，暂时留空
				data1: {
					icon: icon1,
					title: "影响条款",
					list: (data.tkContentList || []).filter(item => item) // 过滤掉 null
				},
				data2: {
					icon: icon2,
					title: "融资情况",
					data: {
						time: (data.marketCapList || []).map(item => item.time),
						value: (data.marketCapList || []).map(item => item.marketCap)
					}
				},
				data3: {
					icon: icon3,
					title: "研发投入",
					data: {
						time: (data.investmentList || []).map(item => item.time),
						value: (data.investmentList || []).map(item => item.investment)
					}
				}
			};

			// 更新左侧关系图表数据
			const relationList = data.relationNameList || [];
			
			// 更新树形图数据
			const treeChildren = relationList.map((name, index) => ({
				id: index,
				name: name,
				symbolSize: 30,
				value: 5,
				symbol: `image://${CompanyImg}`
			}));
			
			treeData.value = [{
				id: relationList.length,
				name: data.name,
				symbolSize: 50,
				value: 10,
				symbol: `image://${CompanyImg}`,
				children: treeChildren
			}];

			if (relationList.length > 0) {
				const centerNode = {
					id: relationList.length, // 中心节点 ID
					name: data.name,
					symbolSize: 50,
					value: 10, // 权重
					symbol: `image://${CompanyImg}`,
					x: 400, // 假设容器宽度800，中心点x坐标
					y: 300, // 假设容器高度600，中心点y坐标
					fixed: true // 固定中心点位置
				};
				
				const radius = 200; // 圆的半径
				const newNodes = relationList.map((name, index) => {
					const angle = (index / relationList.length) * 2 * Math.PI; // 计算每个节点的角度
					return {
						id: index,
						name: name,
						symbolSize: 30,
						value: 5,
						symbol: `image://${CompanyImg}`,
						x: 400 + radius * Math.cos(angle), // 计算x坐标
						y: 300 + radius * Math.sin(angle), // 计算y坐标
						fixed: true // 固定位置，形成圆形布局
					};
				});
				newNodes.push(centerNode);

				const newLinks = relationList.map((_, index) => ({
					source: index,
					target: relationList.length // 指向中心节点
				}));

				nodes.value = newNodes;
				links.value = newLinks;
			} else {
				// 列表为空，只展示中心节点
				nodes.value = [{
					id: 0,
					name: data.name,
					symbolSize: 50,
					value: 10,
					symbol: `image://${CompanyImg}`,
					x: 400,
					y: 300,
					fixed: true
				}];
				links.value = [];
			}
			
			// 重新渲染图表
			nextTick(() => {
				const chart2Data = companyInfo.value.data2.data;
				if (chart2Data.time && chart2Data.time.length > 0) {
					let chart2 = getLineChart(chart2Data.time, chart2Data.value);
					setChart(chart2, "chart2");
				} else {
					let chartDom = document.getElementById("chart2");
					if (chartDom) {
						echarts.dispose(chartDom);
						chartDom.innerHTML = ""; // 清空容器内容
					}
				}

				const chart3Data = companyInfo.value.data3.data;
				if (chart3Data.time && chart3Data.time.length > 0) {
					let chart3 = getBarChart1(chart3Data.time, chart3Data.value);
					setChart(chart3, "chart3");
				} else {
					let chartDom = document.getElementById("chart3");
					if (chartDom) {
						echarts.dispose(chartDom);
						chartDom.innerHTML = ""; // 清空容器内容
					}
				}

				let graphChart = getGraphChart(nodes.value, links.value);
				setChart(graphChart, "graphChart");
			});

		} else {
			companyInfo.value = {};
		}
	} catch (error) {}
};



const nodes = ref([
	// {
	// 	id: 0,
	// 	name: "泰丰先行",
	// 	// category: 0,
	// 	symbolSize: 30,
	// 	value: 8,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 1,
	// 	name: "国轩高科",
	// 	// category: 0,
	// 	symbolSize: 30,
	// 	value: 9,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 2,
	// 	name: "智方纳米",
	// 	// category: 2,
	// 	symbolSize: 30,
	// 	value: 7,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 3,
	// 	name: "香百科技",
	// 	// category: 1,
	// 	symbolSize: 30,
	// 	value: 6,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 4,
	// 	name: "格林滨",
	// 	// category: 2,
	// 	symbolSize: 30,
	// 	value: 6,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 5,
	// 	name: "江西紫宸",
	// 	// category: 2,
	// 	symbolSize: 30,
	// 	value: 7,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 6,
	// 	name: "紫江企业",
	// 	// category: 4,
	// 	symbolSize: 30,
	// 	value: 6,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 7,
	// 	name: "大而美法案",
	// 	// category: 4,
	// 	symbolSize: 50,
	// 	value: 5,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 8,
	// 	name: "比亚迪",
	// 	// category: 0,
	// 	symbolSize: 30,
	// 	value: 10,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 9,
	// 	name: "铜陵有色",
	// 	// category: 3,
	// 	symbolSize: 30,
	// 	value: 8,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 10,
	// 	name: "长盛精密",
	// 	// category: 1,
	// 	symbolSize: 30,
	// 	value: 7,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 11,
	// 	name: "天合光能",
	// 	// category: 0,
	// 	symbolSize: 30,
	// 	value: 8,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 12,
	// 	name: "昆仑化学",
	// 	// category: 2,
	// 	symbolSize: 30,
	// 	value: 6,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 13,
	// 	name: "嘉源科技",
	// 	// category: 1,
	// 	symbolSize: 30,
	// 	value: 6,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 14,
	// 	name: "华阳集团",
	// 	// category: 4,
	// 	symbolSize: 30,
	// 	value: 7,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 15,
	// 	name: "海辰智能",
	// 	// category: 1,
	// 	symbolSize: 30,
	// 	value: 7,
	// 	symbol: `image://${CompanyImg}`
	// }
]);

const links = ref([
	// { source: 0, target: 7 },
	// { source: 1, target: 7 },
	// { source: 1, target: 7 },
	// { source: 8, target: 7 },
	// { source: 8, target: 7 },
	// { source: 2, target: 7 },
	// { source: 2, target: 7 },
	// { source: 3, target: 7 },
	// { source: 3, target: 7 },
	// { source: 3, target: 7 },
	// { source: 4, target: 7 },
	// { source: 4, target: 7 },
	// { source: 5, target: 7 },
	// { source: 6, target: 7 },
	// { source: 9, target: 7 },
	// { source: 10, target: 7 },
	// { source: 11, target: 7 },
	// { source: 12, target: 7 },
	// { source: 13, target: 7 },
	// { source: 14, target: 7 },
	// { source: 15, target: 7 }
	// { source: 0, target: 1, value: 1 },
	// { source: 1, target: 8, value: 2 },
	// { source: 1, target: 2, value: 1 },
	// { source: 8, target: 11, value: 1 },
	// { source: 8, target: 9, value: 1 },
	// { source: 2, target: 5, value: 1 },
	// { source: 2, target: 12, value: 1 },
	// { source: 3, target: 10, value: 1 },
	// { source: 3, target: 15, value: 1 },
	// { source: 3, target: 13, value: 1 },
	// { source: 4, target: 5, value: 1 },
	// { source: 4, target: 12, value: 1 },
	// { source: 5, target: 6, value: 1 },
	// { source: 6, target: 14, value: 1 },
	// { source: 7, target: 14, value: 1 },
	// { source: 9, target: 10, value: 1 },
	// { source: 10, target: 15, value: 1 },
	// { source: 11, target: 13, value: 1 },
	// { source: 12, target: 14, value: 1 },
]);

const treeData = ref([]);

const handleChangeChart = index => {
	if (index === 0) {
		let graphChart = getGraphChart(nodes.value, links.value);
		setChart(graphChart, "graphChart");
	} else if (index === 1) {
		let treeChart = getTreeChart(treeData.value);
		setChart(treeChart, "graphChart");
	}
};

onMounted(async () => {
	let graphChart = getGraphChart(nodes.value, links.value);
	setChart(graphChart, "graphChart");
	await handleGetHylyList();
	handleGetCompanyListById();
	await handleGetIndustryHyly();
	
	// let chart1 = getBarChart(chart1Data.value.name, chart1Data.value.value);
	// setChart(chart1, "chart1");
});
</script>

<style lang="scss" scoped>
.industry-wrap {
	width: 100%;
	height: 100%;
	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-right {
			position: absolute;
			top: 14px;
			right: 12px;
			display: flex;
			justify-content: flex-end;
			gap: 4px;
			.more-btn {
				font-size: 14px;
				color: #1677ff;
				cursor: pointer;
				line-height: 28px;
			}
			.icon {
				width: 28px;
				height: 28px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.left {
		margin-top: 16px;
		width: 480px;
		height: 848px;
		background: rgba(255, 255, 255);
		border-radius: 4px;
		.left-top {
			margin: 0 auto;
			width: 446px;
			height: 200px;
			box-sizing: border-box;
			border: 1px solid rgba(231, 241, 255, 1);
			border-radius: 4px;
			background: linear-gradient(180deg, rgba(246, 251, 255, 1), rgba(246, 251, 255, 0) 100%);
		}
		.left-center {
			margin-top: 12px;
			height: 56px;
			margin-left: 17px;
			overflow-x: hidden;
			width: 445px;
			overflow-x: auto;
			.left-center-btn-box {
				width: 1000px;
				margin-top: 10px;
				height: 28px;
				display: flex;
				flex-wrap: nowrap;
				.left-center-btn {
					margin-right: 4px;
					height: 28px;
					// width: 70px;
					text-align: center;
					padding: 0 5px;
					box-sizing: border-box;
					border-radius: 4px;
					border: 1px solid var(--btn-plain-border-color);
					background: var(--btn-plain-bg-color);
					color: var(--btn-plain-text-color);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 28px;
					cursor: pointer;
					// overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.btnActive {
					border: 1px solid var(--btn-active-border-color);
					background: var(--btn-active-bg-color);
					color: var(--btn-active-text-color);
				}
			}
		}
		.left-footer {
			margin: 0 auto;
			width: 446px;
			height: 520px;
			overflow: hidden;
			.item-box {
				height: 480px;
				overflow: hidden;
				.item {
					width: 100%;
					height: 48px;
					border-radius: 4px;
					border-bottom: 1px solid rgba(243, 243, 244, 1);
					display: flex;
					cursor: pointer;
					&:hover {
						background: rgba(246, 251, 255, 1);
					}
					.id {
						margin-left: 12px;
						margin-top: 8px;
						width: 24px;
						height: 24px;
						border-radius: 12px;
						background: rgba(231, 241, 255);
						text-align: center;
						line-height: 24px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 12px;
						font-weight: 400;
					}
					.title {
						margin-top: 9px;
						margin-left: 10px;
						height: 22px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 600;
						line-height: 22px;
						text-align: left;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.icon {
						margin-left: 7px;
						margin-top: 6px;
						width: 8px;
						height: 6px;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
				.itemActive {
					background: rgba(246, 251, 255, 1);
				}
				.titleActive {
					color: rgba(22, 119, 255, 1) !important;
				}
			}
			.footer-box {
				display: flex;
				justify-content: space-between;
				.left {
					width: 100px;
					height: 20px;
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}
				.right {
					flex: 300px;
				}
			}
		}
	}
	.right {
		margin-top: 16px;
		margin-left: 16px;
		width: 1247px;
		height: 847px;
		background: rgba(255, 255, 255);
		border-radius: 4px;
		position: relative;
		.graph-dialog {
			width: 740px;
			height: 723px;
			position: absolute;
			right: 500px;
			top: 55px;
			z-index: 99999;
			background: #fff;
			.tool-box {
				position: absolute;
				left: 11px;
				top: 10px;
				width: 96px;
				height: 28px;
				box-sizing: border-box;
				border: 1px solid rgba(234, 236, 238, 1);
				border-radius: 4px;
				background: rgba(255, 255, 255, 1);
				z-index: 9999;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.tool {
					width: 14px;
					height: 14px;
					cursor: pointer;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.tool1 {
					width: 16px;
					height: 16px;
					cursor: pointer;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
			.chart-box {
				width: 640px;
				height: 640px;
				margin: 50px auto;
			}
		}
		.company-dialog {
			position: absolute;
			z-index: 999999;
			right: 33px;
			top: 55px;
			width: 480px;
			height: 723px;
			box-sizing: border-box;
			border: 1px solid rgba(230, 231, 232, 1);
			border-radius: 4px;
			background: rgba(255, 255, 255, 1);
			.dialog-header {
				height: 54px;
				box-sizing: border-box;
				border-bottom: 1px solid rgba(243, 243, 244, 1);
				display: flex;
				position: relative;
				.logo {
					width: 48px;
					height: 48px;
					margin-left: 18px;
					margin-top: 3px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.company-title {
					margin-left: 16px;
					margin-top: 16px;
					height: 22px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 600;
					line-height: 22px;
				}
				.status-icon {
					margin-left: 12px;
					margin-top: 12px;
					width: 8px;
					height: 6px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.status-rate {
					width: 41px;
					margin-left: 4px;
					margin-top: 16px;
					height: 22px;
					color: rgba(92, 181, 48, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 22px;
				}
				.close {
					position: absolute;
					right: 15px;
					top: 19px;
					width: 16px;
					height: 16px;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
			.dialog-main {
				margin-top: 13px;
				.dialog-box1 {
					.dialog-box1-header {
						margin-top: 10px;
						display: flex;
						.icon {
							margin-left: 16px;
							width: 18px;
							height: 18px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.dialog-box1-title {
							margin-top: 2px;
							margin-left: 6px;
							height: 14px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 600;
							line-height: 14px;
							text-align: left;
						}
					}
					.dialog-box1-main {
						margin-top: 4px;
						margin-left: 18px;
						max-height: 120px;
						overflow-y: auto;
						&::-webkit-scrollbar {
							width: 4px;
						}
						&::-webkit-scrollbar-thumb {
							border-radius: 10px;
							background: rgba(0, 0, 0, 0.2);
						}
						&::-webkit-scrollbar-track {
							border-radius: 0;
							background: rgba(0, 0, 0, 0.1);
						}
						.item {
							display: flex;
							.item-left {
								margin-top: 13px;
								width: 14px;
								height: 14px;
								border-radius: 4px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.item-right {
								margin-top: 8px;
								margin-left: 9px;
								width: 400px;
								height: 22px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 22px;
							}
						}
					}
				}
				.dialog-box2 {
					margin-left: 16px;
					margin-top: 50px;
					.dialog-box2-header {
						margin-top: 10px;
						display: flex;
						.icon {
							margin-left: 16px;
							width: 18px;
							height: 18px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.dialog-box2-title {
							margin-top: 2px;
							margin-left: 6px;
							height: 14px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 600;
							line-height: 14px;
							text-align: left;
						}
					}
					.dialog-box2-main {
						margin-top: 16px;
						width: 446px;
						height: 180px;
						box-sizing: border-box;
						border: 1px solid rgba(231, 241, 255, 1);
						border-radius: 4px;
						background: linear-gradient(180deg, rgba(246, 251, 255, 1), rgba(246, 251, 255, 0) 100%);
					}
				}
				.dialog-box3 {
					margin-top: 16px;
					margin-left: 16px;
					.dialog-box3-header {
						margin-top: 10px;
						display: flex;
						.icon {
							margin-left: 16px;
							width: 18px;
							height: 18px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.dialog-box3-title {
							margin-top: 2px;
							margin-left: 6px;
							height: 14px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 600;
							line-height: 14px;
							text-align: left;
						}
					}
					.dialog-box3-main {
						margin-top: 16px;
						width: 446px;
						height: 180px;
						box-sizing: border-box;
						border: 1px solid rgba(231, 241, 255, 1);
						border-radius: 4px;
						background: linear-gradient(180deg, rgba(246, 251, 255, 1), rgba(255, 255, 255, 0) 100%);
					}
				}
			}
		}

		.right-main {
			width: 1218px;
			height: 784px;
			margin: 5px auto;
			.right-main-content {
				width: 1150px;
				height: 720px;
				margin: 4px 0 10px;
				.right-main-content-header {
					height: 84px;
					margin-left: 14px;
					margin-top: 16px;
					// background: orange;
					display: flex;
					.header-item1 {
						width: 408px;
						.header-item1-top {
							position: relative;
							z-index: 3;
							height: 28px;
							text-align: center;
							line-height: 28px;
							background: url("./assets/images/bg3.png");
							background-size: 100% 100%;
							color: rgba(22, 119, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 28px;
						}
						.header-item1-bottom {
							display: flex;
							justify-content: center;
							.icon {
								margin-top: 9px;
								width: 16px;
								height: 16px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.text {
								margin-top: 7px;
								margin-left: 8px;
								height: 22px;
								color: rgba(206, 79, 81, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 22px;
							}
						}
					}
					.header-item2 {
						margin-left: -8px;
						width: 408px;
						.header-item2-top {
							position: relative;
							z-index: 2;
							height: 28px;
							text-align: center;
							line-height: 28px;
							background: url("./assets/images/bg2.png");
							background-size: 100% 100%;
							color: rgba(19, 168, 168, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 28px;
						}
						.header-item2-bottom {
							display: flex;
							justify-content: center;
							.icon {
								margin-top: 9px;
								width: 16px;
								height: 16px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.text {
								margin-top: 7px;
								margin-left: 8px;
								height: 22px;
								color: rgba(206, 79, 81, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 22px;
							}
						}
					}
					.header-item3 {
						margin-left: -8px;
						width: 408px;
						.header-item3-top {
							position: relative;
							z-index: 1;
							height: 28px;
							text-align: center;
							line-height: 28px;
							background: url("./assets/images/bg1.png");
							background-size: 100% 100%;
							color: rgba(146, 84, 222, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 28px;
						}
						.header-item3-bottom {
							display: flex;
							justify-content: center;
							.icon {
								margin-top: 9px;
								width: 16px;
								height: 16px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.text {
								margin-top: 7px;
								margin-left: 8px;
								height: 22px;
								color: rgba(206, 79, 81, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 22px;
							}
						}
					}
				}
				.right-main-content-main {
					height: 600px;
					margin-top: 20px;
				}
				// background: orange;
			}
			.box-footer {
				width: 1218px;
				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: 1119px;
					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%;
					}
				}
			}
		}
	}
}
</style>
