<template>
	<div class="Vbox">
		<div class="head">
			<div class="VisTitle"></div>
			<div class="Vgradation">
				<div class="tab" v-for="(item, index) in HeadgradationMun" :key="index"
					:class="{ active: headactiveTab === index }" @click="HeadsetActiveTab(index, item)">
					{{ item.name }}
				</div>
			</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" style="height:calc(100% - 40px)">
						<div class="GJXX_table" style="height:100%;">
							<BarEcharts :message="PieChartData"></BarEcharts>
						</div>
					</div>
					<!-- </el-scrollbar> -->
				</div>
			</div>

			<div class="left" v-if="activeTab === 1">
				<div class="rightParkBox">
					<div class="rightParkTtile">
						<div>省级发电及结构</div>
					</div>
					<div class="rightParkContent">
						<div class="SBZT_center">
							<sjfdjjgChart :message="PieChartData"></sjfdjjgChart>
						</div>
					</div>
				</div>
				<div class="leftTwoBox">
					<div class="leftGDPTitle">行业用电里</div>
					<div class="leftGDPContent">
						<div class="SBZT_center">
							<LinEcharts></LinEcharts>
						</div>
					</div>
				</div>
				<div class="leftThreeBox">
					<div class="leftTaxationTitle">省级用电量</div>
					<div class="leftTaxationContent" style="height:calc(100% - 40px)">
						<sjydlEcharts></sjydlEcharts>
					</div>
				</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">
							<nyxfzlChart></nyxfzlChart>
						</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" style="height:calc(100% - 90px)">
						<tpfzlChart :message="PieChartDataTwo"></tpfzlChart>
					</div>
					<!-- </el-scrollbar> -->
				</div>
			</div>

			<div class="right" v-if="activeTab === 1" style="display:block">
				<div class="leftOneBox" style="height:30%">
					<div class="leftOBTitle">省级电源装机容量及结构</div>

					<div class="leftOBContent" style="display:flex">
						<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="PieChartDataTwoTwo"></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" style="height:30%">
					<div class="leftOBTitle">再生能源电力占比</div>
					<div class="GJXX_table" style="height:calc(100% - 40px)">
						<zslyzbEcharts></zslyzbEcharts>

					</div>
				</div>

				<div class="leftTwo_GDCL" style="height:30%">
					<div class="leftOBTitle">电力自给率</div>
					<div class="GJXX_table" style="height:calc(100% - 40px)">
						<dlzjlEcharts></dlzjlEcharts>
					</div>
				</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 nyxfzlChart from '@/components/baseEcharts/nyxfzlChart.vue'
import tpfzlChart from '@/components/baseEcharts/tpfzlChart.vue'
import sjfdjjgChart from '@/components/baseEcharts/sjfdjjgChart.vue'
import sjydlEcharts from '@/components/baseEcharts/sjydlEcharts.vue'
import dlzjlEcharts from '@/components/baseEcharts/dlzjlEcharts.vue'
import zslyzbEcharts from '@/components/baseEcharts/zslyzbEcharts.vue'


import GJXXYCL from '@/assets/visualizationimg/GJXXYCL.png';
import GJXXDCL from '@/assets/visualizationimg/GJXXDCL.png';
import ALL from '@/assets/visualizationimg/allh.png';

import MQ from '@/assets/visualizationimg/MQ.png';
import TRQ from '@/assets/visualizationimg/TRQ.png';
import SY from '@/assets/visualizationimg/SY.png';
import GT from '@/assets/visualizationimg/GT.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 HeadgradationMun = [{
	name: "全部",
	state: 0,
	type: 0
}, {
	name: "煤气",
	state: 1,
	type: 1
}, {
	name: "石油",
	state: 2,
	type: 2
}, {
	name: "天然气",
	state: 3,
	type: 3
}, {
	name: "钢铁",
	state: 4,
	type: 4
}]

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 PieChartDataTwoTwo = [{
	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 headactiveTab = ref(0); // 默认激活第一个tab  
const activeTab = ref(0); // 默认激活第一个tab  
let IMGICon = ALL;

let map = null;
let marker = null;
let ttwo = [];
let points = [];
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)'
	}
});

var proname = '湖南省';
var prokind = 1;
var dist = null;
var siqu = ["长沙市", "株洲市", "湘潭市", "衡阳市", "邵阳市", "岳阳市", "常德市", "张家界市", "益阳市", "娄底市", "怀化市", "永州市", "郴州市", "湘西土家族苗族自治州"]
var zsnyColor = ["#E3F2FD", "#BBDEFB", "#90CAF9", "#64B5F6", "#42A5F5", "#2196F3", "#1E88E5", "#1976D2", "#1565C0", "#0D47A1", '#4AD66D', '#6EDE8A', '#92E6A7', '#B7EFC5', '#25A244']
var qjjcColor = ["#F94144", "#F3722C", "#F8961E", "#F9844A", "#F9C74F", "#90BE6D", "#43AA8B", "#4D908E", "#577590", "#277DA1", "#34A0A4", "#168AAD", "#1A759F", "#1E6091", "#184E77"]


const HeadsetActiveTab = (index, value) => {
	//获取地图上所有的覆盖物
	var allOverlay = map.getOverlays();
	let statev = value.type;
	for (var i = 0; i < allOverlay.length; i++) {
		if (allOverlay[i].toString() == "Marker") {
			map.removeOverlay(allOverlay[i]);
		}
	}
	getImgType(statev);
	headactiveTab.value = index;
};
const setActiveTab = (index, value) => {
	activeTab.value = index;
	headactiveTab.value = 0;
	var allOverlay = map.getOverlays();
	for (var i = 0; i < allOverlay.length; i++) {
		if (allOverlay[i].toString() == "Polygon") {
			map.removeOverlay(allOverlay[i]);
		}
	}
	if (value.type === 'B') {
		addRelitu();
		getImgType();
		addDisXZQY(zsnyColor)
	} else if (value.type === 'A') {
		getImgType()
		addDisXZQY(qjjcColor)
		whiteLayer.setData([])
		yellowLayer.setData([])
	}
};

//添加区域点
const getImgType = (getImgTypestate = 0) => {
	if (activeTab.value == '0') {
		fetch('hunanzuobiaotu.json').then(response => response.json()).then(data => {
			if (getImgTypestate == 0) {
				points = data.list;
			} else {
				points = []
				for (var i = 0; i < data.list.length; i++) {
					if (data.list[i].type == getImgTypestate) {
						points.push(data.list[i])
					}
				}
			}
			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)
				let pointsType = points[j].type;
				let aa = ''
				switch (pointsType) {
					case 1:
						IMGICon = MQ;
						aa = "煤气"
						break;
					case 2:
						IMGICon = SY;
						aa = "石油"
						break;
					case 3:
						IMGICon = TRQ;
						aa = "天然气"
						break;
					case 4:
						IMGICon = GT;
						aa = "钢铁"
						break;
				}
				var icon = new BMapGL.Icon(IMGICon, new BMapGL.Size(15, 15), {
					anchor: new BMapGL.Size(15, 15),
				});
				marker = new BMapGL.Marker(markers, {
					icon: icon
				})
				// 创建信息窗口
				var opts = {
					width: 300,
					title: '艾欧里特种玻璃有限公司'
				};
				// 点标记添加点击事件
				marker.addEventListener('click', function (e) {
					map.openInfoWindow(new BMapGL.InfoWindow(
						"排放总量：" + '1880' + "<br/>" +
						"类型：" + aa + "<br/>" +
						"能源消费总量：" + '3.6' + "<br/>" +
						"信噪比：" + '16db' + "<br/>" +
						"负责人：" + '张三' + "<br/>" +
						"联系方式：" + '121234564', opts), markers); // 开启信息窗口
				});
				map.addOverlay(marker);
				ttwo.push(marker)
			}
		})
	} else {
		for (var i = 0; i < ttwo.length; i++) {
			map.removeOverlay(ttwo[i]); // 从地图上移除标记点
		}
		ttwo = []; // 清空数组，以便下次可以重新添加标记点
	}

}


const createDOM = (config) => {
	var canvas = document.createElement('canvas');
	var dpr = window.devicePixelRatio || 1;
	canvas.style.width = 150 + 'px'
	canvas.style.height = 150 + 'px'
	canvas.setAttribute('width', 150 * dpr);
	canvas.setAttribute('height', 150 * dpr);

	var ctx = canvas.getContext('2d');
	ctx.scale(dpr, dpr);
	ctx.save();
	ctx.beginPath();
	ctx.fillStyle = '#fff';
	ctx.arc(75, 75, 40, 0, Math.PI * 2, true);
	ctx.closePath();
	ctx.fill();

	ctx.save();
	ctx.beginPath();
	ctx.translate(75, 75);
	ctx.rotate(0.6 * Math.PI);
	ctx.lineWidth = config.lineWidth;
	ctx.lineCap = 'round';
	ctx.strokeStyle = config.bgBase;
	ctx.arc(0, 0, config.radius, 0, 1.8 * Math.PI);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(0, 0, config.radius, 0, 1.8 * Math.PI * config.data);
	ctx.strokeStyle = config.bgFill;
	ctx.stroke();
	ctx.restore();

	ctx.save();
	ctx.beginPath();
	ctx.fillStyle = '#000';
	ctx.font = '26px Arial';
	ctx.textAlign = 'center';
	ctx.textBaseline = 'middle';
	ctx.fillText(config.data * 100 + '%', config.width * 1.5, config.height * 1.5);
	ctx.restore();

	return canvas;
}
// 绑定点击事件
// customOverlay.addEventListener('click', function (e) {
// 	var data = e.target.properties.data * 100;
// 	alert(data);
// });

// --- 添加行政区 ---
const addDisXZQY = (color) => {
	for (var i = 0; i < siqu.length; i++) {
		dist = new BMapGL.DistrictLayer({
			name: '(' + siqu[i] + ')',
			kind: 0,
			fillColor: color[i],
			fillOpacity: 0.5
		});
		map.addDistrictLayer(dist);
		// // --- 行政区划添加鼠标事件 ---
		dist.addEventListener('mouseover', function (e) {
			e.currentTarget.setFillColor('#9169db');
		});
		dist.addEventListener('mouseout', function (e) {
			e.currentTarget.setFillColor(e.currentTarget.style.fillColor);
		});
	}
}

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
				}
			});
		}

		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();
	map.centerAndZoom(point, 8); // 初始化地图,设置中心点坐标和地图级别

	map.enableKeyboard();
	map.enableScrollWheelZoom(true);
	map.setMaxZoom(19);
	map.setMapStyleV2({
		styleId: '62ce43ad2a1362c23e612b783d7406e7'
	});
	// 视角倾斜角度
	// map.setTilt(50);
	map.disableInertialDragging();

	map.addControl(zoomCtrl);

	// 实例化自定义canvas图层
	var canvasLayer = new BMapGL.CustomHtmlLayer(createDOM, {
		offsetX: 0,
		offsetY: 0,
		minZoom: 10,
		maxZoom: 19,
		enableDraggingMap: true
	});
	var data = {
		type: 'FeatureCollection',
		features: [
			{
				type: 'Feature',
				geometry: {
					type: 'Point',
					coordinates: [113.038599, 28.136759]
				},
				properties: {
					width: 50,
					height: 50,
					radius: 50,
					lineWidth: 20,
					bgBase: '#add',
					bgFill: '#9d55ef',
					data: 0.5
				}
			},
			{
				type: 'Feature',
				geometry: {
					type: 'Point',
					coordinates: [113.234714, 28.342484]
				},
				properties: {
					width: 50,
					height: 50,
					radius: 50,
					lineWidth: 20,
					bgBase: '#add',
					bgFill: '#91cc75',
					data: 0.3
				}
			},
			{
				type: 'Feature',
				geometry: {
					type: 'Point',
					coordinates: [112.825298, 28.351380]
				},
				properties: {
					width: 50,
					height: 50,
					radius: 50,
					lineWidth: 20,
					bgBase: '#add',
					bgFill: 'red',
					data: 0.8
				}
			}
		]
	};
	canvasLayer.setData(data);
	// 添加自定义canvas图层到地图上
	map.addCustomHtmlLayer(canvasLayer);


	map.addEventListener("click", function (e) {
		// getImgType()
		if (e.overlay) {
		} else {
			var pt = e.latlng; // 获取点击位置的点坐标
			var geoc = new BMapGL.Geocoder(); // 创建地址解析器实例
			geoc.getLocation(pt, function (rs) {
				var addComp = rs.addressComponents; // 获取地址组件信息

				if (addComp.province == "湖南省") {
					// 点击的是地图本身
					var allOverlay = map.getOverlays();
					for (var i = 0; i < allOverlay.length; i++) {
						if (allOverlay[i].toString() == "Polygon") {
							map.removeOverlay(allOverlay[i]);
						}
					}
					// 显示行政区域名称，例如：省","市","区/县
					// var administrativeArea = addComp.province + (addComp.city ? addComp.city :
					// 	"") + (addComp.district ? addComp.district : "");
					proname = addComp.city;
					let colorThis = '';
					if(activeTab.value === 0){
						colorThis = qjjcColor[0]
					}else{
						colorThis = zsnyColor[0]
					}
					let sdist = new BMapGL.DistrictLayer({
						name: "(" + proname + ")",
						kind: prokind,
						fillColor: colorThis,
						fillOpacity: 0.5,
						viewport: true,
					});
					map.addDistrictLayer(sdist);

				} else {
					alert("暂无其他省份数据")
				}
			});
		}
	});
	// 导入JSON文件
	try {
		addDisXZQY(qjjcColor);
		getImgType()
	} catch (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");
		}


		.Vgradation {
			height: 60px;
			width: 40vw;
			margin-left: 30vw;
			display: flex;
			justify-content: center;
			align-items: center;

			.tab {
				width: 100px;
				height: 40px;
				margin: 0 10px;
				text-align: center;
				line-height: 40px;
				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%;
			}
		}
	}

	.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 {

					.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>