<template>
	<ScaleBox
	    :width="1920"
	    :height="1080"
	    bgc="transparent"
	    :delay="100"
	    :isFlat="false"
	  >
	    <div class="cont" >
	    	<div class="left_cont">
	    		<div class="top">
	    			<div class="title">
	    				报警资源
	    			</div>
	    			<div style="display:flex;margin-top:5px;">
	    				<div style="width:45%;margin-left:3%;border: 1px solid #E9EBEC;padding:5px 0px;">
	    					<div style="display:flex;width:100%;">
	    						<el-icon color="#3D409A" size="39" style="vertical-align: middle;margin-left:20px;">
	    							<set-up />
	    						</el-icon>
	    						<div style="vertical-align: middle;margin-left:10px;text-align: center;">
	    							<p style="color:#727373;font-size:14px;">接入数量</p>
	    							<div style="margin-top:10px;">
	    								<span class="fp">0</span>
	    								<span class="fp">3</span>
	    								<span class="fp">1</span>
	    								<span class="fp">2</span>
	    								<span class="fp">5</span>
	    							</div>
	    						</div>
	    					</div>
	    					<div style="text-align: center;margin-top:10px;">
	    						<span
	    							style="display: inline-block;color: #3F3F3F;vertical-align: middle;font-size:12px;">真实率</span>
	    						<el-progress
	    							style="width:60px;display: inline-block;vertical-align: middle;margin-left:10px;"
	    							:text-inside="true" color="#8C98B2" :stroke-width="16" :percentage="70"></el-progress>
	    					</div>
	    				</div>
	    				<div style="width:45%;margin-left:3%;border: 1px solid #E9EBEC;padding:5px 0px;">
	    					<div style="display:flex;width:100%;">
	    						<el-icon color="#3D409A" size="39" style="vertical-align: middle;margin-left:20px;">
	    							<set-up />
	    						</el-icon>
	    						<div style="vertical-align: middle;margin-left:10px;text-align: center;">
	    							<p style="color:#727373;font-size:14px;">运营单位</p>
	    							<div style="margin-top:10px;">
	    								<span class="fp">0</span>
	    								<span class="fp">3</span>
	    								<span class="fp">1</span>
	    								<span class="fp">2</span>
	    								<span class="fp">5</span>
	    							</div>
	    						</div>
	    					</div>
	    					<div style="text-align: center;margin-top:10px;">
	    						<span
	    							style="display: inline-block;color: #3F3F3F;vertical-align: middle;font-size:12px;">真实率</span>
	    						<el-progress
	    							style="width:60px;display: inline-block;vertical-align: middle;margin-left:10px;"
	    							:text-inside="true" color="#8C98B2" :stroke-width="16" :percentage="70"></el-progress>
	    					</div>
	    				</div>
	    			</div>
	    			<div style="display:flex;margin-top:10px;">
	    				<div style="width:45%;margin-left:3%;border: 1px solid #E9EBEC;padding:4px 0px;">
	    					<div style="width:100%;">
	    						<span
	    							style="width:4px;height:14px;background: #2E3192;margin-left:4px;display: inline-block;vertical-align: middle;"></span>
	    						<span
	    							style="color: #404040;margin-left:10px;vertical-align: middle;font-size:14px;">报警点位</span>
	    					</div>
	    					<div style="width:40px;height:40px;margin:0 auto;margin-top:3px;">
	    						<img style="width:100%;height:100%;" src="../../assets/images/index/photo.png" alt="" />
	    					</div>
	    					<div style="display:flex;justify-content: center;margin-top:10px;">
	    						<div style="margin-right:30px;text-align:center;">
	    							<p
	    								style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;">
	    								总数</p>
	    							<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
	    						</div>
	    						<div style="text-align:center;">
	    							<p
	    								style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;">
	    								在线</p>
	    							<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
	    						</div>
	    					</div>
	    					<div style="text-align: center;margin-top:5px;">
	    						<span
	    							style="display: inline-block;color: #3F3F3F;vertical-align: middle;font-size:12px;">真实率</span>
	    						<el-progress
	    							style="width:60px;display: inline-block;vertical-align: middle;margin-left:10px;"
	    							:text-inside="true" color="#8C98B2" :stroke-width="14" :percentage="70"></el-progress>
	    					</div>
	    				</div>
	    				<div style="width:45%;margin-left:3%;border: 1px solid #E9EBEC;padding:4px 0px;">
	    					<div style="width:100%;">
	    						<span
	    							style="width:4px;height:14px;background: #2E3192;margin-left:4px;display: inline-block;vertical-align: middle;"></span>
	    						<span
	    							style="color: #404040;margin-left:10px;vertical-align: middle;font-size:14px;">安保人员</span>
	    					</div>
	    					<div style="width:40px;height:40px;margin:0 auto;margin-top:3px;">
	    						<img style="width:100%;height:100%;" src="../../assets/images/index/photo.png" alt="" />
	    					</div>
	    					<div style="display:flex;justify-content: center;margin-top:10px;">
	    						<div style="margin-right:30px;text-align:center;">
	    							<p
	    								style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;">
	    								总数</p>
	    							<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
	    						</div>
	    						<div style="text-align:center;">
	    							<p
	    								style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;">
	    								在线</p>
	    							<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
	    						</div>
	    					</div>
	    					<div style="text-align: center;margin-top:5px;">
	    						<span
	    							style="display: inline-block;color: #3F3F3F;vertical-align: middle;font-size:12px;">真实率</span>
	    						<el-progress
	    							style="width:60px;display: inline-block;vertical-align: middle;margin-left:10px;"
	    							:text-inside="true" color="#8C98B2" :stroke-width="14" :percentage="70"></el-progress>
	    					</div>
	    				</div>
	    			</div>
	    			<div style="display:flex;margin-top:10px;">
	    				<div style="width:45%;margin-left:3%;border: 1px solid #E9EBEC;padding:4px 0px;">
	    					<div style="width:100%;">
	    						<span
	    							style="width:4px;height:14px;background: #2E3192;margin-left:4px;display: inline-block;vertical-align: middle;"></span>
	    						<span
	    							style="color: #404040;margin-left:10px;vertical-align: middle;font-size:14px;">报警复核</span>
	    					</div>
	    					<div style="width:40px;height:40px;margin:0 auto;margin-top:3px;">
	    						<img style="width:100%;height:100%;" src="../../assets/images/index/photo.png" alt="" />
	    					</div>
	    					<div style="display:flex;justify-content: center;margin-top:10px;">
	    						<div style="margin-right:30px;text-align:center;">
	    							<p
	    								style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;">
	    								总数</p>
	    							<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
	    						</div>
	    						<div style="text-align:center;">
	    							<p
	    								style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;">
	    								在线</p>
	    							<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
	    						</div>
	    					</div>
	    					<div style="text-align: center;margin-top:5px;">
	    						<span
	    							style="display: inline-block;color: #3F3F3F;vertical-align: middle;font-size:12px;">真实率</span>
	    						<el-progress
	    							style="width:60px;display: inline-block;vertical-align: middle;margin-left:10px;"
	    							:text-inside="true" color="#8C98B2" :stroke-width="14" :percentage="70"></el-progress>
	    					</div>
	    				</div>
	    				<div style="width:45%;margin-left:3%;border: 1px solid #E9EBEC;padding:4px 0px;">
	    					<div style="width:100%;">
	    						<span
	    							style="width:4px;height:14px;background: #2E3192;margin-left:4px;display: inline-block;vertical-align: middle;"></span>
	    						<span
	    							style="color: #404040;margin-left:10px;vertical-align: middle;font-size:14px;">智能预警</span>
	    					</div>
	    					<div style="width:40px;height:40px;margin:0 auto;margin-top:3px;">
	    						<img style="width:100%;height:100%;" src="../../assets/images/index/photo.png" alt="" />
	    					</div>
	    					<div style="display:flex;justify-content: center;margin-top:10px;">
	    						<div style="margin-right:30px;text-align:center;">
	    							<p
	    								style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;">
	    								总数</p>
	    							<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
	    						</div>
	    						<div style="text-align:center;">
	    							<p
	    								style="background: #E3E8FD;padding:3px 15px;border-radius:2px;font-size:12px;color: #B7BDCF;">
	    								在线</p>
	    							<p style="color: #3F3F3F;font-weight:500;margin-top:5px;font-size:12px;">8563</p>
	    						</div>
	    					</div>
	    					<div style="text-align: center;margin-top:5px;">
	    						<span
	    							style="display: inline-block;color: #3F3F3F;vertical-align: middle;font-size:12px;">真实率</span>
	    						<el-progress
	    							style="width:60px;display: inline-block;vertical-align: middle;margin-left:10px;"
	    							:text-inside="true" color="#8C98B2" :stroke-width="14" :percentage="70"></el-progress>
	    					</div>
	    				</div>
	    			</div>
	    		</div>
	    		<div class="bttom">
	    			<div class="title">
	    				行业单位
	    			</div>
	    			<div id="ecarts" style="width:100%;height:100px;">
	    		
	    			</div>
	    			<div>
	    				<el-table :data="tableData" stripe style="width: 100%;" height="90">
	    					<el-table-column prop="a" label="行业名称" align="center" />
	    					<el-table-column prop="b" label="总数" align="center" />
	    					<el-table-column prop="c" label="在线总数" align="center" />
	    					<el-table-column prop="d" label="在线率" align="center" />
	    				</el-table>
	    			</div>
	    		</div>
	    		<div class="cen">
	    			<div style="width:100%;display: flex;">
	    				<div class="title">
	    					运营单位
	    				</div>
	    				<div style="margin-left:30%;margin-top:10px;">
	    					<span class="fp1">0</span>
	    					<span class="fp1">3</span>
	    					<span class="fp1">5</span>
	    				</div>
	    				<div style="text-align: center;margin-top:3px;">
	    					<p style="color:rgb(63, 63, 63);">在线率</p>
	    					<el-progress style="width:60px;display: inline-block;vertical-align: middle;margin-left:10px;"
	    						:text-inside="true" color="#8C98B2" :stroke-width="16" :percentage="70"></el-progress>
	    				</div>
	    			</div>
	    			<div style="margin-top:5px;">
	    				<dv-scroll-board :config="config" style="width:100%;height:180px" />
	    			</div>
	    		</div>
	    		
	    	</div>
	    	<div class="cont" id="myMap">
	    
	    	</div>
	    	<div
	    		style="width:40%;position: absolute;left:32%;bottom:20px;z-index: 999999;color: #000;display: flex;background:#7584A3;color:#fff;padding:5px;">
	    		<div @click="totab('1')" :class="indexdb=='1'?'top': 'tops'">长沙市</div>
	    		<div @click="totab('2')" :class="indexdb=='2'?'top': 'tops'">株洲市 </div>
	    		<div @click="totab('3')" :class="indexdb=='3'?'top': 'tops'">湘潭市</div>
	    		<div @click="totab('4')" :class="indexdb=='4'?'top': 'tops'">邵阳市 </div>
	    		<div @click="totab('5')" :class="indexdb=='5'?'top': 'tops'">娄底市</div>
	    		<div @click="totab('6')" :class="indexdb=='6'?'top': 'tops'">常德市</div>
	    		<div @click="totab('7')" :class="indexdb=='7'?'top': 'tops'">岳阳市</div>
	    		<div @click="totab('8')" :class="indexdb=='8'?'top': 'tops'">衡阳市</div>
	    		<div @click="totab('9')" :class="indexdb=='9'?'top': 'tops'">永州市</div>
	    		<div @click="totab('10')" :class="indexdb=='10'?'top': 'tops'">郴州市</div>
	    		<div @click="totab('11')" :class="indexdb=='11'?'top': 'tops'">怀化市</div>
	    		<div @click="totab('12')" :class="indexdb=='12'?'top': 'tops'">张家界市</div>
	    		<div @click="totab('13')" :class="indexdb=='13'?'top': 'tops'">湘西</div>
	    		<div @click="totab('14')" :class="indexdb=='14'?'top': 'tops'">益阳市</div>
	    	</div>
	    
	    	<div class="right_cont">
	    		<div class="top">
	    			<div style="width:100%;display: flex;">
	    				<div class="title">
	    					今日警情
	    				</div>
	    				<div style="margin-left:28%;">
	    					<a-segmented style="display:inline-block;width:125px" v-model:value="value" :options="data"
	    						size="small" />
	    				</div>
	    			</div>
	    			<div style="width:100%;text-align: center;margin:10px 0px;">
	    				<div>
	    					<span class="fp12">0</span>
	    					<span class="fp12">0</span>
	    					<span class="fp12">3</span>
	    					<span class="fp12">5</span>
	    				</div>
	    				<div style="margin: 10px 0px;width:100%;text-align: center;">
	    					<div style="display:inline-block;text-align: center;">
	    						<span style="color: #363635;">同比</span>
	    						<a-statistic :value="11.28" :precision="2" suffix="%"
	    							:value-style="{ color: '#3f8600',fontSize:'15px' }"
	    							style="display: inline-block;margin-right:50px;">
	    							<template #prefix>
	    								<arrow-up-outlined />
	    							</template>
	    						</a-statistic>
	    					</div>
	    					<div style="display:inline-block;text-align: center;">
	    						<span style="color: #363635;">环比</span>
	    						<a-statistic :value="11.28" :precision="2" suffix="%"
	    							:value-style="{ color: '#ff0000',fontSize:'15px' }" style="display: inline-block;">
	    							<template #prefix>
	    								<arrow-down-outlined />
	    							</template>
	    						</a-statistic>
	    					</div>
	    				</div>
	    			</div>
	    			<div style="margin-top:5px;">
	    				<div style="width:90px;background: #DFECFC;color:#A6B2C3;height:20px;line-height:20px;padding-left:5px;display:inline-block;">实时预警</div>
	    				<a-dropdown style="display:inline-block;width:150px">
	    					<template #overlay>
	    						<a-menu @click="handleMenuClick">
	    							<a-menu-item key="1">
	    								<UserOutlined />
	    								1st menu item
	    							</a-menu-item>
	    							<a-menu-item key="2">
	    								<UserOutlined />
	    								2nd menu item
	    							</a-menu-item>
	    							<a-menu-item key="3">
	    								<UserOutlined />
	    								3rd item
	    							</a-menu-item>
	    						</a-menu>
	    					</template>
	    					<a-button size="small" style="margin-left:45%;background: #DFECFC;color:#A6B2C3;">
	    						全部类型
	    						<DownOutlined />
	    					</a-button>
	    				</a-dropdown>
	    			</div>
	    			<div style="margin-top:5px;">
	    				<dv-scroll-board :config="config1" style="width:100%;height:200px" />
	    			</div>
	    		</div>
	    		<div class="cen">
	    			<div style="width:100%;display: flex;">
	    				<div class="title">
	    					智能预警
	    				</div>
	    				<div style="margin-left:43%;margin-top:10px;">
	    					<span class="fp1">0</span>
	    					<span class="fp1">3</span>
	    					<span class="fp1">5</span>
	    				</div>
	    			</div>
	    			<div style="margin-top:5px;">
	    				<div
	    					style="width:90px;background: #DFECFC;color:#A6B2C3;height:20px;line-height:20px;padding-left:5px;display:inline-block;">
	    					实时预警</div>
	    				<a-segmented style="display:inline-block;width:150px;margin-left:95px;" v-model:value="value"
	    					:options="data" size="small" />
	    			</div>
	    			<div style="margin-top:5px;">
	    				<dv-scroll-board :config="config1" style="width:100%;height:180px" />
	    			</div>
	    		</div>
	    		<div class="bttom">
	    			<div style="width:100%;display: flex;">
	    				<div class="title">
	    					智能布控
	    				</div>
	    				<div style="margin-left:43%;margin-top:10px;">
	    					<span class="fp1">0</span>
	    					<span class="fp1">3</span>
	    					<span class="fp1">5</span>
	    				</div>
	    			</div>
	    			<div style="margin-top:5px;">
	    				<a-segmented style="display:inline-block;width:210px;" v-model:value="value" :options="data1"
	    					size="small" />
	    				<a-segmented style="display:inline-block;width:110px;margin-left:15px;" v-model:value="value"
	    					:options="data" size="small" />
	    			</div>
	    			<div style="margin-top:5px;">
	    				<dv-scroll-board :config="config1" style="width:100%;height:170px" />
	    			</div>
	    		</div>
	    	</div>
	    </div>
	  </ScaleBox>
	
</template>

<script lang="ts" setup>
	import ScaleBox from "vue3-scale-box";
	import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue';
	import { Ref, ref, watch, onMounted, reactive } from 'vue';
	import * as echarts from "echarts";
	import 'echarts-gl';
	import mapJson from "./js/hunan.json";
	import api from "@/axios";
	onMounted(
		() => {
			init();
			initMap();
		}
	);
	const tableData = ref([{
		a: '党政机关',
		b: '1010',
		c: '988',
		d: '70%'
	}, {
		a: '党政机关',
		b: '1010',
		c: '988',
		d: '70%'
	}]);
	const indexdb = ref('1')
	const totab = (data) => {
		indexdb.value = data;
	};
	const init = () => {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('ecarts'));
		// 指定图表的配置项和数据
		var  option = {
			xAxis: {
				type: 'category',
				data: ['党政机关', '医疗机构', '高等院校', '中小学幼儿园', '商场超市',]
			},
			yAxis: {
				type: 'value'
			},
			grid: {
				left: "2%",
				right: "4%",
				top: "10%",
				bottom: "1%",
				containLabel: true,
			},
			series: [
				{
					data: [120, 200, 150, 80, 70, 110, 130],
					type: 'bar'
				}
			]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	};
	const size = ref('small');
	const data1 = reactive(['人脸布控', '车辆布控', '信息布控']);
	const data = reactive(['日', '周', '月', '年']);
	const value = ref(data[0]);
	const config1 = reactive({
		header: ['事件', '时间', '位置', '状态'],
		data: [
			['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">未转发</span>'],
			['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
			['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
			['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
			['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
			['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
			['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
			['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">已转发</span>'],
			['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">未转发</span>'],
			['人脸预警', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">未转发</span>'],
		],
		headerBGC: '#F3FDFF',
		oddRowBGC: '#FAFBFD',
		evenRowBGC: 'F3FDFF',
		index: false,
		columnWidth: [120, 100, 80, 80],
		align: ['center','center','center','center'],
	})
	const config12 = reactive({
		header: ['事件', '时间', '位置', '状态'],
		data: [
			['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
			['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
			['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
			['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
			['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
			['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
			['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
			['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
			['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
			['人脸预警', '2024-1-24', '长沙望城区', '已转发'],
		],
		headerHeight: '20',
		headerBGC: '#F3FDFF',
		oddRowBGC: '#FAFBFD',
		evenRowBGC: 'F3FDFF',
		index: false,
		columnWidth: [50],
		align: ['center','center','center','center'],
	})
	const config = reactive({
		header: ['名称', '时间', '地区', '状态'],
		columnWidth: [120, 100, 80, 80],
		data: [
			['隆吉平台', '2024-1-24', '长沙望城区',  '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'],
			['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'],
			['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'],
			['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'],
			['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">离线</span>'],
			['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">离线</span>'],
			['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">离线</span>'],
			['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:red;padding:3px;color:#fff;font-size:12px;border-radius:3px">离线</span>'],
			['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'],
			['隆吉平台', '2024-1-24', '长沙望城区', '<span style="background:#038E4C;padding:3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'],
		],
		headerBGC: '#F3FDFF',
		oddRowBGC: '#FAFBFD',
		evenRowBGC: 'F3FDFF',
		index: false,
		align: ['center','center','center','center'],
	})
	const initMap = () => {
		let myChart = echarts.init(document.getElementById('myMap'));
		myChart.showLoading();
		myChart.hideLoading();
		echarts.registerMap('myMap', mapJson);
		var option = {
			tooltip: {
				trigger: 'item',
				textStyle: { fontSize: '14', color: '#fff', fontFamily: 'Arial' },
				backgroundColor: '#092b6a',
				formatter: '{b0}<br /> 幼儿园:88 <br /> 小学:88 <br /> 中学:88 ',

			},
			series: [
				{
					type: 'map3D',
					name: '地图',
					selectedMode: 'single', // 地图高亮单选
					regionHeight: 4, // 地图高度
					map: 'myMap',
					viewControl: {
						distance: 168, // 地图视角 控制初始大小
						alpha: 50,// 倾斜角度
						rotateSensitivity: [1, 1]
					},
					label: {
						show: true, // 是否显示名字
						color: '#333f5a', // 文字颜色
						fontSize: 18, // 文字大小
						fontWeight: 'bold', // 文字大小
					},
					itemStyle: {
						color: '#9bcafc', // 地图背景颜色
						borderWidth: 1, // 分界线wdith
						borderColor: '#a4d8f0', // 分界线颜色
						opacity: 0.9
					},
					emphasis: {
						label: {
							show: true, // 是否显示高亮
							textStyle: {
								color: '#fff' // 高亮文字颜色
							}
						},
						itemStyle: {
							color: '#3a69c1', // 地图高亮颜色
							borderWidth: 10, // 分界线wdith
							borderColor: '#6BECF5'// 分界线颜色
						}
					},
					light: {
						main: {
							color: '#fff',
							intensity: 1,
							shadow: true,
							shadowQuality: 'high',
							alpha: 25, //
							beta: 20
						},
						ambient: {
							color: '#fff',
							intensity: 0.6
						}
					}
				}
			]
		};
		myChart.setOption(option);
		window.addEventListener('resize', function () {
			myChart.resize();
		});
	};
</script>

<style scoped lang="scss">
	:deep(.el-table) {
		background-color: transparent;
		color: #000;

		--el-table-border: {
			none
		}

		;

		--el-table-border-color: {
			none
		}

		;
	}

	:deep(.el-table th.el-table__cell) {
		background-color: #F3FDFF;
	}

	:deep(.el-table thead) {
		color: #000000;
	}

	:deep(.el-table tr) {
		background-color: #fff;
	}

	:deep(.el-table__body tr.current-row > td) {
		// background: #2cabff !important;
	}

	:deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
		// background-color:  #13306A !important;
	}

	:deep(.el-table th.el-table__cell) {
		// background-color:#13306A;
	}

	:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-segmented .ant-segmented-item-selected) {
		background-color: #DFECFC;
		color: #000;
	}

	:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-segmented) {
		background-color: #E1E8FC;
		color: #BEC6DA;
	}

	:deep(.dv-scroll-board) {
		color: #000;
	}

	:deep(.dv-scroll-board .header) {
		border-bottom: 1px solid #E8E8E9;
	}

	:deep(.dv-scroll-board .rows .row-item) {
		border-bottom: 1px solid #E8E8E9;
	}

	:deep(.el-table .el-table__cell) {
		padding: 2px 0;
	}

	.tops {
		margin-right: 10px;
		padding: 8px 5px;
		text-align: center;
		// border-bottom: 2px solid #2B78C0;
	}

	.top {
		margin-right: 10px;
		// padding: 8px 5px;
		text-align: center;
		border-bottom: 2px solid #2B78C0;
	}

	.title {
		background: #DFECFC;
		color: #8892AD;
		width: 30%;
		height: 30px;
		line-height: 30px;
		// margin: 0 auto;
		text-align: center;
		border-radius: 0 0 10px 10px;
	}

	.fp {
		background: #EAF2FF;
		color: #9CA5B6;
		font-size: 12px;
		padding: 3px 2px;
		font-size: 12px;
		font-weight: 500;
		margin-right: 2px;
		border-radius: 2px;
	}

	.fp1 {
		background: #8C98B2;
		font-size: 12px;
		padding: 5px 4px;
		font-size: 12px;
		font-weight: 500;
		margin-right: 2px;
		border-radius: 2px;
	}

	.fp12 {
		background: #8C98B2;
		font-size: 20px !important;
		padding: 5px 4px;
		font-size: 12px;
		font-weight: 500;
		margin-right: 2px;
		border-radius: 2px;
	}

	.cont {
		width: 100%;
		height: 100%;
		background: #E5F1F7;

		.left_cont {
			width: 450px;
			height: 98%;
			z-index: 999;
			position: absolute;
			top: 2px;
			left: 5px;
			.top {
				width: 100%;
				height: 408px;
				background: #fff;
				border: 1px solid #E9EBEC;
				overflow: auto;
			}

			.cen {
				margin-top: 1%;
				width: 100%;
				height: 26%;
				background: #fff;
				border: 1px solid #E9EBEC;
				overflow: auto;
			}

			.bttom {
				margin-top: 1%;
				width: 100%;
				height: 26%;
				background: #fff;
				border: 1px solid #E9EBEC;
				overflow: auto;
			}
		}

		.cont {
			width: calc(100% - 920px);
			height: 98%;
			z-index: 999;
			position: absolute;
			left: 460px;
			top: 0.5%;
			// background: red;
		}

		.right_cont {
			width: 450px;
			height: 98%;
			z-index: 999;
			position: absolute;
			right: 5px;
			top: 2px;

			.top {
				width: 100%;
				height: 40%;
				background: #fff;
				border: 1px solid #E9EBEC;
				overflow: auto;
			}

			.cen {
				margin-top: 1%;
				width: 100%;
				height: 30%;
				background: #fff;
				border: 1px solid #E9EBEC;
				overflow: auto;
			}

			.bttom {
				margin-top: 1%;
				width: 100%;
				height: 30%;
				background: #fff;
				border: 1px solid #E9EBEC;
				overflow: auto;
			}
		}
	}
</style>