<template>
	<div class="Vbox">
		<div class="head">
			<div class="VisTitle"></div>
		</div>
		<div class="container">
			<div class="center">
				<div ref="mapContainer" class="allmap"></div>
			</div>
			<div class="left" v-if="activeTab === 0">
				<div class="rightParkBox">
					<div class="rightParkTtile">
						<div>整体指标</div>
						<div @click="dialogTableVisible = true">列表配置></div>
					</div>
					<div class="rightParkContent">
						<div class="SBZT_right">
							<div class="SBZT_onLine">
								<img src="../../assets/visualizationimg/onLine.png" alt="" />
								<div style="color: #44eefb;font-size: 20px;font-weight: bold;">煤气:351</div>
							</div>
							<div class="SBZT_onLine">
								<img src="../../assets/visualizationimg/offline.png" alt="" />
								<div style="color: #ccc;font-size: 20px;font-weight: bold;">电力:20</div>
							</div>
						</div>
						<div class="SBZT_center">
							<PieEcharts :message="PieChartData"></PieEcharts>
						</div>
						<div class="SBZT_left">
							<div class="SBZT_onLine">
								<img src="../../assets/visualizationimg/warn.png" alt="" />
								<div style="color: #5470c6;font-size: 20px;font-weight: bold;">天然气:50</div>
							</div>
							<div class="SBZT_onLine">
								<img src="../../assets/visualizationimg/fault.png" alt="" />
								<div style="color: #5470c6;font-size: 20px;font-weight: bold;">水利:30</div>
							</div>
						</div>
					</div>
				</div>
				<div class="leftTwoBox">
					<div class="leftGDPTitle">碳排放监测</div>
					<div class="leftGDPContent">
						
						<div class="SBZT_center">
							<BarEcharts :message="PieChartData"></BarEcharts>
						</div>
					</div>
				</div>
				<div class="leftThreeBox">
					<div class="leftTaxationTitle">能耗排名</div>
					<el-scrollbar height="calc(100% - 40px)">
						<div class="leftTaxationContent">
							<div class="GJXX_table">
								<div class="GJXX_name" v-for="(item, index) in GJXXData"
									:style="{ backgroundImage: 'url(' + item.img + ')' }">
									<div class="">
										{{ item.id }}
									</div>
									<div class="">
										{{ item.text }}
									</div>
									<div class="" style='cursor:pointer;'>
										{{ item.stateData }}
									</div>
								</div>
							</div>
						</div>
					</el-scrollbar>
				</div>
			</div>

			<div class="left" v-if="activeTab === 1">
				<div class="rightParkBox">
					<div class="rightParkTtile">
						<div>省级风电设备</div>
						<div @click="dialogTableVisible = true">列表配置></div>
					</div>
					<div class="rightParkContent">
						<div class="SBZT_right">
							<div class="SBZT_onLine">
								<img src="../../assets/visualizationimg/onLine.png" alt="" />
								<div style="color: #44eefb;font-size: 20px;font-weight: bold;">运行:351</div>
							</div>
							<div class="SBZT_onLine">
								<img src="../../assets/visualizationimg/offline.png" alt="" />
								<div style="color: #ccc;font-size: 20px;font-weight: bold;">安装:20</div>
							</div>
						</div>
						<div class="SBZT_center">
							<PieEcharts :message="PieChartData"></PieEcharts>
						</div>
						<div class="SBZT_left">
							<div class="SBZT_onLine">
								<img src="../../assets/visualizationimg/warn.png" alt="" />
								<div style="color: #5470c6;font-size: 20px;font-weight: bold;">故障:50</div>
							</div>
							<div class="SBZT_onLine">
								<img src="../../assets/visualizationimg/fault.png" alt="" />
								<div style="color: #5470c6;font-size: 20px;font-weight: bold;">维修:30</div>
							</div>
						</div>
					</div>
				</div>
				<div class="leftTwoBox">
					<div class="leftGDPTitle">可再生资源年产值</div>
					<div class="leftGDPContent">
						
						<div class="SBZT_center">
							<!-- <BarEcharts :message="PieChartData"></BarEcharts> -->
							<LinEcharts :message="PieChartData"></LinEcharts>
						</div>
					</div>
				</div>
				<div class="leftThreeBox">
					<div class="leftTaxationTitle">水库产值排名</div>
					<el-scrollbar height="calc(100% - 40px)">
						<div class="leftTaxationContent">
							<div class="GJXX_table">
								<div class="GJXX_name" style="font-size: 20px;">
									<div class="">
										排名
									</div>
									<div class="">
										名称
									</div>
									<div class="">
										产能
									</div>
								</div>
								<div class="GJXX_name" v-for="(item, index) in GJXXData"
									:style="{ backgroundImage: 'url(' + item.img + ')' }">
									<div class="">
										{{ item.id }}
									</div>
									<div class="">
										水库名称{{ item.id }}
									</div>
									<div class="" style='cursor:pointer;'>
										54525
									</div>
								</div>
							</div>
						</div>
					</el-scrollbar>
				</div>
			</div>

			<div class="boxBottom">
				<div class="Vgradation">
					<div class="tab" v-for="(item, index) in gradationMun" :key="index"
						:class="{ active: activeTab === index }" @click="setActiveTab(index, item)">
						{{ item.name }}
					</div>
				</div>
			</div>

			<div class="right" v-if="activeTab === 0">
				<div class="leftOneBox">
					<div class="leftOBTitle">运行状态</div>
					<div class="leftOBContent">
						<div class="SBZT_right">
							<div class="SBZT_onLine">
								<img src="../../assets/visualizationimg/kq.png" alt="" />
								<div style="color: #44eefb;font-size: 20px;font-weight: bold;">开启:351</div>
							</div>
							<div class="SBZT_onLine">
								<img src="../../assets/visualizationimg/hd.png" alt="" />
								<div style="color: #ccc;font-size: 20px;font-weight: bold;">晃动:20</div>
							</div>
						</div>
						<div class="SBZT_center">
							<PieEcharts :message="PieChartDataTwo"></PieEcharts>
						</div>
						<div class="SBZT_left">
							<div class="SBZT_onLine">
								<img src="../../assets/visualizationimg/qs.png" alt="" />
								<div style="color: #5470c6;font-size: 20px;font-weight: bold;">潜水:50</div>
							</div>
							<div class="SBZT_onLine">
								<img src="../../assets/visualizationimg/fg.png" alt="" />
								<div style="color: #5470c6;font-size: 20px;font-weight: bold;">翻盖:30</div>
							</div>
						</div>
					</div>
				</div>
				<div class="leftTwo_GDCL">
					<div class="leftOBTitle">碳排放量</div>
					<el-scrollbar height="calc(100% - 90px)">
						<div class="GJXX_table">
							<div class="GJXX_name" v-for="(item, index) in GDCLData" :key="index"
								:style="{ backgroundImage: 'url(' + item.img + ')' }">
								
								<!-- :class="{ 'active': item.stateNumber === 0 }" -->
								<div class="">
									{{ item.id }}
								</div>
								<div class="">
									{{ item.text }}
								</div>
								<div class="">
									{{ item.text }}
								</div>
								<div class="">
									{{ item.stateData }}
								</div>
							</div>
						</div>
					</el-scrollbar>
				</div>
			</div>

			<div class="right" v-if="activeTab === 1">
				<div class="leftOneBox">
					<div class="leftOBTitle">省级光伏设备</div>
					<div class="leftOBContent">
						<div class="SBZT_right">
							<div class="SBZT_onLine">
								<img src="../../assets/visualizationimg/kq.png" alt="" />
								<div style="color: #44eefb;font-size: 20px;font-weight: bold;">开启:351</div>
							</div>
							<div class="SBZT_onLine">
								<img src="../../assets/visualizationimg/hd.png" alt="" />
								<div style="color: #ccc;font-size: 20px;font-weight: bold;">晃动:20</div>
							</div>
						</div>
						<div class="SBZT_center">
							<PieEcharts :message="PieChartDataTwo"></PieEcharts>
						</div>
						<div class="SBZT_left">
							<div class="SBZT_onLine">
								<img src="../../assets/visualizationimg/qs.png" alt="" />
								<div style="color: #5470c6;font-size: 20px;font-weight: bold;">潜水:50</div>
							</div>
							<div class="SBZT_onLine">
								<img src="../../assets/visualizationimg/fg.png" alt="" />
								<div style="color: #5470c6;font-size: 20px;font-weight: bold;">翻盖:30</div>
							</div>
						</div>
					</div>
				</div>
				<div class="leftTwo_GDCL">
					<div class="leftOBTitle">地区光伏产能</div>
					<el-scrollbar height="calc(100% - 90px)">
						<div class="GJXX_table">
							<div class="GJXX_name" style="font-size: 18px;">
									<div class="">
										名称
									</div>
									<div class="">
										光伏数量
									</div>
									<div class="">
										产能
									</div>
								</div>

							<div class="GJXX_name" v-for="(item, index) in GDCLData" :key="index"
								:style="{ backgroundImage: 'url(' + item.img + ')' }"
								style="font-weight: bold;">
								<div class="">
									地区{{ item.id }}
								</div>
								<div class="">
									101
								</div>
								<div class="">
									{{ item.text }}
								</div>
							</div>
						</div>
					</el-scrollbar>
				</div>
			</div>
		</div>
	</div>
	<el-dialog v-model="dialogTableVisible" title="设备列表">
		<el-table ref="tableRef" row-key="date" :data="tableData" style="width: 100%">
			<el-table-column prop="id" label="序号" width="80" />
			<el-table-column prop="SBBH" label="设备编号" />
			<el-table-column prop="address" label="地址" width="300" />
			<el-table-column prop="tag" label="状态" :filters="[
				{ text: '在线', value: 'onLine' },
				{ text: '离线', value: 'offLine' },
				{ text: '故障', value: 'fault' },
				{ text: '告警', value: 'alarm' },
			]" :filter-method="filterTag" filter-placement="bottom-end">
				<template #default="scope">
					<el-tag v-if="scope.row.tag === 'onLine'" type="success" disable-transitions>{{ scope.row.tagtext
					}}</el-tag>
					<el-tag v-if="scope.row.tag === 'offLine'" type="info" disable-transitions>{{ scope.row.tagtext
					}}</el-tag>
					<el-tag v-if="scope.row.tag === 'fault'" type="error" disable-transitions>{{ scope.row.tagtext
					}}</el-tag>
					<el-tag v-if="scope.row.tag === 'alarm'" type="warning" disable-transitions>{{ scope.row.tagtext
					}}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="date" label="时间" sortable column-key="date" :filters="[
					{ text: '2016-05-01', value: '2016-05-01' },
					{ text: '2016-05-02', value: '2016-05-02' },
					{ text: '2016-05-03', value: '2016-05-03' },
					{ text: '2016-05-04', value: '2016-05-04' },
				]" :filter-method="filterHandler" />
			<!-- <el-table-column prop="address" label="操作" /> -->
		</el-table>
	</el-dialog>
</template>

<script setup>
import {
	onMounted,
	ref
} from 'vue';
import PieEcharts from '@/components/baseEcharts/pieChart.vue'
import BarEcharts from '@/components/baseEcharts/barChart.vue'
import LinEcharts from '@/components/baseEcharts/LinChart.vue'

import GJXXYCL from '@/assets/visualizationimg/GJXXYCL.png';
import GJXXDCL from '@/assets/visualizationimg/GJXXDCL.png';
import ALL from '@/assets/visualizationimg/allh.png';
const mapContainer = ref(null);
const dialogTableVisible = ref(false)

const filterTag = (value, row) => {
	return row.tag === value
}
const filterHandler = (value, row, column) => {
	const property = column['property']
	return row[property] === value
}

const tableData = [{
	id: 1,
	SBBH: 'ZTD95588',
	address: '东方大道与三号路交叉处',
	state: '0',
	date: '2016-05-03',
	CLState: '',
	tagtext: '在线',
	tag: 'onLine',
},
{
	id: 1,
	SBBH: 'ZTD95588',
	address: '东方大道与三号路交叉处',
	state: '0',
	date: '2016-05-03',
	CLState: '',
	tagtext: '离线',
	tag: 'offLine',
},
{
	id: 1,
	SBBH: 'ZTD95588',
	address: '东方大道与三号路交叉处',
	state: '0',
	date: '2016-05-03',
	CLState: '',
	tagtext: '故障',
	tag: 'fault',
},
{
	id: 1,
	SBBH: 'ZTD95588',
	address: '东方大道与三号路交叉处',
	state: '0',
	date: '2016-05-03',
	CLState: '',
	tagtext: '告警',
	tag: 'alarm',
},
]
const gradationMun = [{
	name: "全景监测",
	state: 3,
	type: 'A'
}, {
	name: "再生能源",
	state: 2,
	type: 'B'
}
	// , {
	// 	name: "晃动",
	// 	state: 1,
	// 	type: 'C'
	// }, {
	// 	name: "溢水",
	// 	state: 4,
	// 	type: 'D'
	// }, {
	// 	name: "甲烷",
	// 	state: 5,
	// 	type: 'E'
	// }
]

const PieChartData = [{
	value: 351,
	name: '煤气'
}, {
	value: 20,
	name: '电力'
}, {
	value: 50,
	name: '天然气'
}, {
	value: 30,
	name: '水利'
}]

const PieChartDataTwo = [{
	value: 50,
	name: '潜水'
}, {
	value: 20,
	name: '晃动'
}, {
	value: 351,
	name: '开启'
}, {
	value: 30,
	name: '翻盖'
}]

const JgjkData = [{
	value: 351,
	name: '一号监控'
}, {
	value: 20,
	name: '二号监控'
}, {
	value: 50,
	name: '三号监控'
}, {
	value: 30,
	name: '四号监控'
}, {
	value: 30,
	name: '五号监控'
}]
const GJXXData = [{
	id: 1,
	stateData: '待处理',
	stateNumber: 1,
	text: '艾欧里特种玻璃有限公司',
	img: GJXXDCL
}, {
	id: 2,
	stateData: '待处理',
	stateNumber: 1,
	text: '海克斯科技飞门有限公司',
	img: GJXXDCL
}, {
	id: 3,
	stateData: '待处理',
	stateNumber: 1,
	text: '艾欧里特种玻璃有限公司',
	img: GJXXDCL
}, {
	id: 4,
	stateData: '查看详情',
	stateNumber: 0,
	text: '艾欧里特种玻璃有限公司',
	img: GJXXYCL
}, {
	id: 5,
	stateData: '待处理',
	stateNumber: 1,
	text: '艾欧里特种玻璃有限公司',
	img: GJXXDCL
}, {
	id: 6,
	stateData: '待处理',
	stateNumber: 1,
	text: '艾欧里特种玻璃有限公司',
	img: GJXXDCL
}, {
	id: 7,
	stateData: '查看详情',
	stateNumber: 0,
	text: '艾欧里特种玻璃有限公司',
	img: GJXXYCL
}, {
	id: 8,
	stateData: '待处理',
	stateNumber: 1,
	text: '艾欧里特种玻璃有限公司',
	img: GJXXDCL
}, {
	id: 9,
	stateData: '待处理',
	stateNumber: 1,
	text: '艾欧里特种玻璃有限公司',
	img: GJXXDCL
}]

const GDCLData = [{
	id: 2010+'年',
	stateData: '工业',
	stateNumber: 1,
	text: '24501',
	img: GJXXYCL
},{
	id: 2010+'年',
	stateData: '电力',
	stateNumber: 1,
	text: '24501',
	img: GJXXYCL
},{
	id: 2010+'年',
	stateData: '风力',
	stateNumber: 1,
	text: '24501',
	img: GJXXYCL
},{
	id: 2010+'年',
	stateData: '运输',
	stateNumber: 1,
	text: '24501',
	img: GJXXYCL
},{
	id: 2010+'年',
	stateData: '工业',
	stateNumber: 1,
	text: '24501',
	img: GJXXYCL
},{
	id: 2010+'年',
	stateData: '电力',
	stateNumber: 1,
	text: '12123',
	img: GJXXYCL
},{
	id: 2010+'年',
	stateData: '风力',
	stateNumber: 1,
	text: '23435',
	img: GJXXYCL
},{
	id: 2010+'年',
	stateData: '运输',
	stateNumber: 1,
	text: '23435',
	img: GJXXYCL
},{
	id: 2010+'年',
	stateData: '风力',
	stateNumber: 1,
	text: '634324',
	img: GJXXYCL
},{
	id: 2010+'年',
	stateData: '风力',
	stateNumber: 1,
	text: '232423',
	img: GJXXYCL
},{
	id: 2010+'年',
	stateData: '风力',
	stateNumber: 1,
	text: '642432',
	img: GJXXYCL
},{
	id: 2010+'年',
	stateData: '风力',
	stateNumber: 1,
	text: '2423542',
	img: GJXXYCL
}]
const activeTab = ref(0); // 默认激活第一个tab  
const jgjkactiveTab = ref(0); // 默认激活第一个tab
let IMGICon = ALL;

let map = null;
let marker = null;
let ttwo = [];
var whiteLayer = new mapvgl.HeatPointLayer({
	blend: 'lighter',
	style: 'grid',
	shape: 'square',
	size: 1,
	min: 0,
	max: 1000,
	gradient: {
		0: 'rgb(200, 200, 200, 0)',
		0.2: 'rgb(200, 200, 200, 0.5)',
		0.5: 'rgb(200, 200, 200, 0.8)',
		0.51: 'rgb(200, 200, 200, 0)',
		1: 'rgb(200, 200, 200, 0)'
	}
});
var yellowLayer = new mapvgl.HeatPointLayer({
	blend: 'lighter',
	style: 'grid',
	max: 1000,
	gradient: {
		0: 'rgb(200, 200, 200,0)',
		0.2: 'rgb(200, 200, 200, 0)',
		0.5: 'rgb(226, 95, 0, 0.9)',
		1: 'rgb(239, 209, 19, 0.9)'
	}
});
const setActiveTab = (index, value) => {
	activeTab.value = index;
	// map.clearOverlays();
	let proname = '湖南省'
	let prokind = 1
	let dist = null
	if (value.type === 'B') {
		addRelitu();
		getImgType()

		// addDis(proname, prokind, dist)
	} else if (value.type === 'A') {
		getImgType()
		// addDis(proname, prokind, dist)
		whiteLayer.setData([])
		yellowLayer.setData([])
		// HeatPointLayer.removeDistrictLayer(yellowLayer)
	}
};

const JgjksetActiveTab = (index, value) => {
	jgjkactiveTab.value = index;
};


//添加区域点
const getImgType = () => {
	if (activeTab.value == '0') {
		fetch('hunanzuobiaotu.json').then(response => response.json()).then(data => {
			let points = data.list;
			// for (var j = 0; j < points.length; j++) {
			for (var j = 0; j < points.length; j++) {
				var lng = points[j].lng;
				var lat = points[j].lat;
				let markers = new BMapGL.Point(lng, lat)

				var icon = new BMapGL.Icon(IMGICon, new BMapGL.Size(23, 25), {
					anchor: new BMapGL.Size(10, 25),
				});
				marker = new BMapGL.Marker(markers, {
					icon: icon
				})
				// 创建信息窗口
				var opts = {
					width: 300,
					// height: 100,
					title: '艾欧里特种玻璃有限公司'
				};
				var infoWindow = new BMapGL.InfoWindow("排放总量：" + '1880' + "<br/>" +
					"煤排放：" + '3.6' + "<br/>" +
					"信噪比：" + '16db' + "<br/>" +
					"负责人：" + '张三' + "<br/>" +
					"联系方式：" + '121234564', opts);
				// 点标记添加点击事件
				marker.addEventListener('click', function (e) {
					map.openInfoWindow(infoWindow, markers); // 开启信息窗口
				});
				map.addOverlay(marker);
				ttwo.push(marker)
			}
		})
	} else {
		for (var i = 0; i < ttwo.length; i++) {
			map.removeOverlay(ttwo[i]); // 从地图上移除标记点
		}
		ttwo = []; // 清空数组，以便下次可以重新添加标记点
	}

}

// --- 添加行政区 ---
const addDis = (proname, prokind, dist) => {
	// map.removeDistrictLayer(dist);
	dist = new BMapGL.DistrictLayer({
		name: '(' + proname + ')',
		kind: prokind,
		fillColor: '#618bf8',
		strokeColor: '#daeafa',
		viewport: true
	});
	// --- 行政区划添加鼠标事件 ---
	dist.addEventListener('mouseover', function (e) {
		e.currentTarget.setFillColor('#9169db');
	});
	dist.addEventListener('mouseout', function (e) {
		e.currentTarget.setFillColor(e.currentTarget.style.fillColor);
	});
	map.addDistrictLayer(dist);
}

const addRelitu = () => {
	var view = new mapvgl.View({
		effects: [
			new mapvgl.BloomEffect({
				threshold: 0.2,
				blurSize: 2.0
			}),
		],
		map: map
	});

	var result = [];
	fetch('hunanrelitu.json').then(response => response.json()).then(rs => {
		result = rs.list;
		var data = [];

		for (var i = 0; i < result.length; i++) {
			data.push({
				geometry: {
					type: 'POINT',
					coordinates: [result[i].lng, result[i].lat]
				},
				properties: {
					count: Math.floor(Math.random() * 200) + 1
				}
			});
		}
		// console.log(333, data)

		view.addLayer(yellowLayer);
		view.addLayer(whiteLayer);
		whiteLayer.setData(data);
		yellowLayer.setData(data);
	});
}
onMounted(async () => {
	// 初始化地图
	map = new BMapGL.Map(mapContainer.value);
	var point = new BMapGL.Point(116.404, 39.915);
	// var point = new BMapGL.Point(112.03713729689034, 27.64071783209287);
	var zoomCtrl = new BMapGL.ZoomControl();
	var proname = '湖南省';
	var prokind = 1;
	var dist = null;
	map.centerAndZoom(point, 7); // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true);
	map.setMaxZoom(19);
	map.setMapStyleV2({
		styleId: '62ce43ad2a1362c23e612b783d7406e7'
	});
	// 视角倾斜角度
	// map.setTilt(50);
	map.disableInertialDragging();

	map.addControl(zoomCtrl);

	map.addEventListener("click", function (e) {
		getImgType()
		if (e.overlay) {
			console.log('你点击的是覆盖物:' + e.overlay.toString());
		} else {
			// 点击的是地图本身
			map.clearOverlays();
			var pt = e.latlng; // 获取点击位置的点坐标
			var geoc = new BMapGL.Geocoder(); // 创建地址解析器实例
			geoc.getLocation(pt, function (rs) {
				var addComp = rs.addressComponents; // 获取地址组件信息
				if (addComp.province == "湖南省") {
					// 显示行政区域名称，例如：省、市、区/县
					// var administrativeArea = addComp.province + (addComp.city ? addComp.city :
					// 	"") + (addComp.district ? addComp.district : "");
					// console.log("您点击的行政区域是：" + addComp.province);
					proname = addComp.city;
					addDis(proname, prokind, dist);
				} else {
					addDis(proname, prokind, dist);
					alert("暂无其他省份数据")
				}
			});
		}
	});


	// 导入JSON文件
	try {
		addDis(proname, prokind, dist);
		getImgType()
	} catch (error) {
		// console.error('Error loading JSON data:', error);
	}
});
</script>

<style lang="scss">
.BMap_bubble_pop {
	border: 0px !important;
	border-radius: 0 !important;
	background-image: url("../../assets/visualizationimg/eject.png");
	background-size: 100% 100%;
	background-color: rgba(0, 0, 0, 0) !important;
	padding: 0 20px !important;
	width: auto !important;

	.BMap_bubble_top {
		margin-top: 10px !important;

		.BMap_bubble_title {
			color: white !important;
			font-size: 20px;
		}
	}

	.BMap_bubble_center {
		margin-bottom: 10px !important;

		.BMap_bubble_content {
			color: white !important;
		}
	}

	img {
		display: none !important;
	}
}
</style>

<style lang="scss">
.Vbox {
	height: 100vh;
	overflow: hidden;

	.head {
		height: 120px;
		top: 0;
		width: 100%;
		position: absolute;
		z-index: 999;
		// background-color: rgba($color: #0e2a41, $alpha: .5);

		.VisTitle {
			height: 60px;
			background-image: url("../../assets/visualizationimg/title.png");
		}
	}

	.container {
		height: 100%;
		position: relative;

		.left {
			left: 20px;
			float: left;
			position: relative;
			margin-left: -100%;
			width: 26vw;
			height: 100%;
			top: 60px;
			z-index: 999;

			.rightParkBox {
				height: 30%;
				background-color: rgba($color: #000000, $alpha: .3);
				margin-bottom: 14px;

				.rightParkTtile {
					height: 40px;
					color: white;
					line-height: 40px;
					padding-left: 40px;
					font-weight: bold;
					background-image: url("../../assets/visualizationimg/boxTitle.png");
					background-size: 100% 100%;
					display: flex;
					justify-content: space-between;

					div:nth-child(2) {
						margin-right: 20px;
						font-size: 14px;
						cursor: pointer;
					}
				}

				.leftOBTitle,
				.RICBTitle {
					height: 40px;
					color: white;
					line-height: 40px;
					padding-left: 40px;
					font-weight: bold;
					background-image: url("../../assets/visualizationimg/boxTitle.png");
					background-size: 100% 100%;
				}

				.leftOBContent {
					height: calc(100% - 40px);

					.HTB_CB_List {
						width: 100%;
					}
				}

				.rightParkContent {
					height: calc(100% - 40px);
					display: flex;

					.SBZT_right,
					.SBZT_left {
						flex: 1;
						display: flex;
						justify-content: space-around;
						flex-direction: column;

						.SBZT_onLine {
							text-align: center;

							img {
								width: 30px;
								height: 30px;
							}
						}
					}

					.SBZT_center {
						flex: 2;
					}

					.SBZT_left {
						flex: 1;
					}

				}

				.RICBTContent {
					height: calc(100% - 40px);
					display: grid;
					grid-template-columns: repeat(1, 100%);
					grid-template-rows: repeat(2, 50%);
					align-items: center;
					justify-content: center;
				}
			}


			.leftTwoBox {
				height: 30%;
				background-color: rgba($color: #000000, $alpha: .3);
				margin-bottom: 14px;

				.leftOBTitle,
				.leftGDPTitle,
				.leftTaxationTitle {
					height: 40px;
					color: white;
					line-height: 40px;
					padding-left: 40px;
					font-weight: bold;
					background-image: url("../../assets/visualizationimg/boxTitle.png");
					background-size: 100% 100%;
				}

				.leftOBContent {
					height: calc(100% - 40px);
				}

				.leftGDPContent {
					height: calc(100% - 40px);

					
					.SBZT_center {
						flex: 2;
						height: 100%;
					}
				}
			}

			.leftOneBox,
			.leftThreeBox {
				height: 30%;
				background-color: rgba($color: #000000, $alpha: .3);
				margin-bottom: 14px;

				.leftOBTitle,
				.leftGDPTitle,
				.leftTaxationTitle {
					height: 40px;
					color: white;
					line-height: 40px;
					padding-left: 40px;
					font-weight: bold;
					background-image: url("../../assets/visualizationimg/boxTitle.png");
					background-size: 100% 100%;
				}

				.leftOBContent,
				.leftGDPContent {
					height: calc(100% - 40px);
				}

				.leftTaxationContent {
					height: calc(100% - 40px);

					.GJXX_table {
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.GJXX_name {
							text-align: center;
							font-size: 14px;
							color: white;
							padding: 5px 5px;
							background-image: url("../../assets/visualizationimg/jklb.png");
							background-size: 100% 100%;
							display: flex;
							flex-direction: row;
							justify-content: space-between;

							div:nth-child(1) {
								margin-left: 10px;
							}

							div:nth-child(3) {
								margin-right: 10px;
							}
						}

					}
				}
			}
		}

		.boxBottom {
			position: absolute;
			z-index: 999;
			bottom: 0;
			width: 45vw;
			left: 27.5vw;
			display: flex;
			align-items: center;
			justify-content: center;

			.Vgradation {
				display: flex;

				.tab {
					width: 150px;
					height: 60px;
					margin: 0 10px;
					text-align: center;
					line-height: 60px;
					color: white;
					font-weight: 500;
					font-size: 0.9vw;
					background-image: url("../../assets/visualizationimg/headg.png");
					background-size: 100% 100%;
				}

				.active {
					background-image: url("../../assets/visualizationimg/headgactive.png");
					background-size: 100% 100%;
				}
			}
		}

		.center {
			float: left;
			height: 100%;
			width: 100%;
			background-color: green;

			.allmap {
				/* // 注意给dom宽高，不然地图不出来 */
				width: 100%;
				height: 100%;
				margin: auto;
				padding: 0;
			}
		}

		.right {
			//right: 20px;
			left: 73vw;
			float: left;
			position: absolute;
			//margin-left: -500px;
			width: 26.5vw;
			// background-color: rgba($color: #000000, $alpha: 0.2);
			height: 100%;
			top: 60px;
			z-index: 999;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.leftOneBox {
				height: 30%;
				background-color: rgba($color: #000000, $alpha: .3);
				margin-bottom: 14px;

				.leftOBTitle,
				.RICBTitle {
					height: 40px;
					color: white;
					line-height: 40px;
					padding-left: 40px;
					font-weight: bold;
					background-image: url("../../assets/visualizationimg/boxTitle.png");
					background-size: 100% 100%;
				}

				.leftOBContent {
					height: calc(100% - 40px);

					display: flex;

					.SBZT_right,
					.SBZT_left {
						flex: 1;
						display: flex;
						justify-content: space-around;
						flex-direction: column;

						.SBZT_onLine {
							text-align: center;

							img {
								width: 30px;
								height: 30px;
							}
						}
					}

					.SBZT_center {
						flex: 2;
					}

					.SBZT_left {
						flex: 1;
					}

					.HTB_CB_List {
						width: 100%;

					}

				}

				.rightParkContent {
					height: calc(100% - 40px);
					display: grid;
					grid-template-columns: repeat(3, 33.33%);
					grid-template-rows: repeat(2, 50%);
					align-items: center;
				}

				.RICBTContent {
					height: calc(100% - 40px);
					display: grid;
					grid-template-columns: repeat(1, 100%);
					grid-template-rows: repeat(2, 50%);
					align-items: center;
					justify-content: center;
				}
			}

			.leftTwo_GDCL {
				height: calc(70% - 20px);
				background-color: rgba($color: #000000, $alpha: .3);
				margin-bottom: 14px;

				.leftOBTitle {
					height: 40px;
					color: white;
					line-height: 40px;
					padding-left: 40px;
					font-weight: bold;
					background-image: url("../../assets/visualizationimg/boxTitle.png");
					background-size: 100% 100%;
				}

				.GJXX_table {
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.GJXX_name {
						text-align: center;
						font-size: 14px;
						color: #efb336;
						padding: 14px 5px;
						background-image: url("../../assets/visualizationimg/jklb.png");
						background-size: 100% 100%;
						display: flex;
						flex-direction: row;
						justify-content: space-between;

						div:nth-child(1) {
							margin-left: 10px;
						}

						div:nth-child(3) {
							margin-right: 10px;
						}
					}

					.active {
						color: aqua;
					}
				}
			}
		}
	}
}
</style>