<template>
	<div class="box">
		<div class="left">
			<div class="left_top">
				<div class="title1">
					<span style="margin-left:13px;font-weight: bold;font-size: 15px;">接入总览</span>
				</div>
				<div style="display: flex;align-items: center;justify-content: center;padding: 10px 0px;">
					<img style="width:15%;height:15%;" src="./indeximag/图2.png" alt="" />
					<div style="text-align: center;">
						<p style="font-size: 13px;margin-bottom: 10px;">接入数量</p>
						<span class="fp">{{getNthChar(data1.alarmPointTotal+'',5)}}</span>
						<span class="fp">{{getNthChar(data1.alarmPointTotal+'',4)}}</span>
						<span class="fp">{{getNthChar(data1.alarmPointTotal+'',3)}}</span>
						<span class="fp">{{getNthChar(data1.alarmPointTotal+'',2)}}</span>
						<span class="fp">{{getNthChar(data1.alarmPointTotal+'',1)}}</span>
						<span class="fp">{{getNthChar(data1.alarmPointTotal+'',0)}}</span>
					</div>
				</div>
				<div id="EcharRef" style="width:98%; height:54%;"></div>
			</div>
			<div class="left_cen">
				<div class="title1">
					<span style="margin-left:13px;font-weight: bold;font-size: 15px;">运营单位</span>
				</div>
				<div style="display: flex;justify-content:space-between;margin-top: 10px;">
					<div style="margin-left:30px;">
						<span style="margin-right:5px;font-size: 13px;">接入数量</span>
						<span class="fp">{{getNthChar(config.data.length+'',2)}}</span>
						<span class="fp">{{getNthChar(config.data.length+'',1)}}</span>
						<span class="fp">{{getNthChar(config.data.length+'',0)}}</span>
					</div>
					<div style="margin-right:30px;padding-top:6px;">
						<span style="display:inline-block;font-size: 13px;">在线率</span>
						<div style="display:inline-block;">
							<el-progress
								style="width:65px;display: inline-block;vertical-align: middle;margin-left:10px;margin-top: -5px;"
								:percentage="(i/config.data.length).toFixed(2)*100" :stroke-width="15"
								:text-inside="true"></el-progress>
						</div>
					</div>
				</div>
				<div style="width:100%;height:70%;margin-top: 5px;">
					<dv-scroll-board :config="config" @click="row1" style="" />
				</div>
			</div>
			<div class="left_bottm">
				<div class="title1">
					<span style="margin-left:13px;font-weight: bold;font-size: 15px;">重点单位</span>
				</div>
				<div id="EcharRef1" style="width:98%; height:44%;">

				</div>
				<div style="width:100%;height:30%;margin-top: 10px;">
					<dv-scroll-board :config="config1" style="" />
				</div>
			</div>
		</div>
		<div class="cen" id="myMap">
			<!-- <el-button icon="el-icon-search" circle></el-button> -->
		</div>
		<div class="right" style="position: relative;">
			<span style="position: absolute;left:-180px;top:12px;z-index:9;font-size:23px;font-weight: bold;">{{maptitle}}</span>
			<el-tooltip class="item" effect="dark" content="返回上一级" placement="top-start">
				 <el-button @click="hy()" type="primary" icon="refresh-left" circle
					style="position: absolute;left:-48px;top:4px;z-index:9;"></el-button>
			</el-tooltip>
			

				<div class="right_top">
					<div class="title1">
						<span style="margin-left:13px;font-weight: bold;font-size: 15px;">今日警情</span>
						<img src="" alt="" />
					</div>
					<div style="width:100%;display:flex;justify-content: center;align-items: center;margin-top:15px;">
						<div>
							<span style="margin-right:5px;font-size: 13px;">报警次数</span>
							<span class="fp">{{getNthChar(drzs.countAlarm+'',2)}}</span>
							<span class="fp">{{getNthChar(drzs.countAlarm+'',1)}}</span>
							<span class="fp">{{getNthChar(drzs.countAlarm+'',0)}}</span>
						</div>
						<div style="margin-left:30px;">
							<span style="margin-right:5px;font-size: 13px;">警情数量</span>
							<span class="fp">{{getNthChar(drzs.countCase+'',1)}}</span>
							<span class="fp">{{getNthChar(drzs.countCase+'',0)}}</span>
						</div>
					</div>
					<div id="EcharRef2" style="width:98%; height:73%;margin-top:10px;">

					</div>
				</div>
				<div class="right_cen">
					<div class="title1">
						<span style="margin-left:13px;font-weight: bold;font-size: 15px;">今日报警</span>
					</div>
					<div style="width:100%;height:80%;margin-top: 10px;">
						<el-empty v-if="config2.data.length==0" :image-size="100" description="暂无数据"></el-empty>
						<dv-scroll-board v-else :config="config2" @click="row2" style="" />
					</div>
				</div>
				<div class="right_bottm">
					<div class="title1">
						<span style="margin-left:13px;font-weight: bold;font-size: 15px;">今日预警</span>
					</div>
					<div style="width:100%;height:70%;margin-top: 10px;">
						<el-empty v-if="config3.data.length==0" :image-size="100" description="暂无数据"></el-empty>
						<dv-scroll-board v-else :config="config3" @click="row3" style="" />
					</div>
				</div>
		</div>

		<el-dialog title="运营单位" v-model="dialogVisible1" width="800" :before-close="handleClose">
			<div class="uploadBtn" style="text-align: right;margin-right: 10px;">
				<el-button><el-icon>
						<Printer />
					</el-icon>导出</el-button>
			</div>
			<el-descriptions title="" border direction="" :column="2">
				<el-descriptions-item label="平台名称">{{showrow1data.name}}</el-descriptions-item>
				<el-descriptions-item label="公司">{{showrow1data.company}}</el-descriptions-item>
				<el-descriptions-item label="城市">{{showrow1data.city}}</el-descriptions-item>
				<el-descriptions-item label="区县">{{showrow1data.district}}</el-descriptions-item>
				<el-descriptions-item label="IP">{{showrow1data.ip}}</el-descriptions-item>
				<el-descriptions-item label="平台公钥">{{showrow1data.platKey}}</el-descriptions-item>
				<el-descriptions-item label="视频系统">{{showrow1data.ipcSystem}}</el-descriptions-item>
				<el-descriptions-item label="在线状态">{{showrow1data.lineState}}</el-descriptions-item>
				<el-descriptions-item label="启用状态">{{showrow1data.useState}}</el-descriptions-item>
				<el-descriptions-item label="联系人">{{showrow1data.userName1}}</el-descriptions-item>
				<el-descriptions-item label="电话">{{showrow1data.userPhone2}}</el-descriptions-item>
			</el-descriptions>
		</el-dialog>

		<el-dialog title="今日报警" v-model="dialogVisible2" width="800" :before-close="handleClose">
			<div class="uploadBtn" style="text-align: right;margin-right: 10px;">
				<el-button><el-icon>
						<Printer />
					</el-icon>导出</el-button>
			</div>
			<el-descriptions title="" border direction="" :column="2">
				<el-descriptions-item label="时间">{{showrow2data.timestamp}}</el-descriptions-item>
				<el-descriptions-item label="类型">{{showrow2data.alarmCode}}</el-descriptions-item>
				<el-descriptions-item label="报警单位">{{showrow2data.alarmTarget}}</el-descriptions-item>
				<el-descriptions-item label="地点">{{showrow2data.address}}</el-descriptions-item>
				<el-descriptions-item label="城市">{{showrow2data.city}}</el-descriptions-item>
				<el-descriptions-item label="区县">{{showrow2data.district}}</el-descriptions-item>
				<el-descriptions-item label="乡镇">{{showrow2data.town}}</el-descriptions-item>
				<el-descriptions-item label="报警类型">{{showrow2data.alarmType}}</el-descriptions-item>
				<el-descriptions-item label="设备类型">{{showrow2data.deviceType}}</el-descriptions-item>
				<el-descriptions-item label="设备号">{{showrow2data.alarmSource}}</el-descriptions-item>
				<el-descriptions-item label="描述信息">{{showrow2data.description}}</el-descriptions-item>
				<el-descriptions-item label="核验状态">{{totypecn(showrow2data.fakeState) }}</el-descriptions-item>
				<el-descriptions-item label="联系人">{{showrow2data.user1Name}}</el-descriptions-item>
				<el-descriptions-item label="联系人号码">{{showrow2data.user1Phone}}</el-descriptions-item>
			</el-descriptions>
		</el-dialog>

		<el-dialog title="今日预警" v-model="dialogVisible3" width="800" :before-close="handleClose">
			<div class="uploadBtn" style="text-align: right;margin-right: 10px;">
				<el-button><el-icon>
						<Printer />
					</el-icon>导出</el-button>
			</div>
			<el-descriptions title="" border direction="" :column="2">
				<el-descriptions-item label="时间">{{showrow3data.timestamp}}</el-descriptions-item>
				<el-descriptions-item label="类型">{{showrow3data.alarmCode}}</el-descriptions-item>
				<el-descriptions-item label="报警单位">{{showrow3data.alarmTarget}}</el-descriptions-item>
				<el-descriptions-item label="地点">{{showrow3data.address}}</el-descriptions-item>
				<el-descriptions-item label="城市">{{showrow3data.city}}</el-descriptions-item>
				<el-descriptions-item label="区县">{{showrow3data.district}}</el-descriptions-item>
				<el-descriptions-item label="乡镇">{{showrow3data.town}}</el-descriptions-item>
				<el-descriptions-item label="报警类型">{{showrow3data.alarmType}}</el-descriptions-item>
				<el-descriptions-item label="设备类型">{{showrow3data.deviceType}}</el-descriptions-item>
				<el-descriptions-item label="设备号">{{showrow3data.alarmSource}}</el-descriptions-item>
				<el-descriptions-item label="描述信息">{{showrow3data.description}}</el-descriptions-item>
				<el-descriptions-item label="核验状态">{{totypecn(showrow3data.fakeState) }}</el-descriptions-item>
				<el-descriptions-item label="联系人">{{showrow3data.user1Name}}</el-descriptions-item>
				<el-descriptions-item label="联系人号码">{{showrow3data.user1Phone}}</el-descriptions-item>
			</el-descriptions>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	import 'echarts-gl';
	import { getAreaCode } from './js/area';
	import { Ref, ref, watch, onMounted, deleted, onBeforeMount, reactive, getCurrentInstance, nextTick } from 'vue';
	import * as echarts from "echarts";
	import api from "@/axios";
	const { proxy } = getCurrentInstance() as any;
	const day = proxy.day;
	onMounted(
		() => {
			// gettotal();
			seach();
			initMapdt(localStorage.getItem('mapdata'), JSON.parse(localStorage.getItem('totaldata')),JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue']);
			get1(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '');
			get3(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '');
			getaiyuji(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '');
			getdayline(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '');
			getAi(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '');
		}
	);
	//详情
	const row1data = ref();
	const showrow1data = ref();
	const dialogVisible1 = ref(false);
	const row1 = (row) => {
		showrow1data.value = row1data.value[row.rowIndex]
		dialogVisible1.value = true;
	};
	const totypecn = (data) => {
		if (data == '0') {
			return '未核验'
		} else if (data == '1') {
			return '核验为假'
		} else if (data == '2') {
			return '核验为真'
		}
	};
	//查询运营商
	const config = reactive({
		header: ['名称', 'ip', '地区', '状态'],
		headerHeight: 28,
		columnWidth: [150, 150, 180, 80],
		waitTime: 3000,
		data: [

		],
		headerBGC: '#174F8A',
		oddRowBGC: '#2C5784',
		evenRowBGC: 'F3FDFF',
		index: false,
		align: ['left', 'left', 'left', 'center'],
	});

	const i = ref(0)
	const seach = (obj) => {
		api.post('/multialarm/client/platform/getlist', obj).then((res) => {
			if (res.code == 0) {
				row1data.value = res.data;
				let arr = [];
				res.data.forEach((x) => {
					if (x.lineState == "online") {
						i.value++;
						arr.push([x.name, x.ip, x.address, '<span style="background:#038E4C;padding:2px 3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'])
					} else {
						arr.push([x.name, x.ip, x.address, '<span style="background:red;padding:2px 3px;color:#fff;font-size:12px;border-radius:3px">离线</span>'])
					}
				})
				config.data = arr;
			}

		})
	};
	//还原
	const hy = () => {
		var tree4data = flattenTree(JSON.parse(localStorage.getItem('tree4data')));
		// maptitle.value = tree4data.find(element => element.code == JSON.parse(data)['name'])['title'];
		if (localStorage.getItem('nowCode') == JSON.parse(localStorage.getItem('user-stores'))['userInfo']['geoCode']) {
			return
		} else {
			let fhcode = getAreaCode(localStorage.getItem('nowCode'))['codes'][0];
			let ado = echarts.init(document.getElementById('myMap'));
			ado.showLoading({
				text: '地图加载中',
				color: '#09A2DC',	//设置加载颜色
				textColor: '#09A2DC',
				maskColor: 'rgba(255, 255, 255, 0.2)',
				zlevel: 0
			})
			// const url = 'https://www.hndyjqrh.cn:8083/multialarm/pic/download?creator=geo&file=' + fhcode + '.geojson'
			const url = 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=' + fhcode + '.geojson'
			fetch(url).then(response => {
				var status = response["status"]
				if (status == "500") {
					return new Promise((resovle) => {
						resovle("无数据");
					})
				} else {
					return response.text();
				}
			}).then(data => {
				api.post('multialarm/system/alarm/total', {
					name: localStorage.getItem('loginname'),
					parent: fhcode,
				}).then((res) => {
					if (res.code == 0) {
						const myChart = echarts.init(document.getElementById('myMap'));
						myChart.dispose();
						initMapdt(data, res.data,tree4data.find(element => element.code == fhcode)['title'])
						// ado.hideLoading()
					}

				})
			});
		}

	};

	//详情
	const row3data = ref();
	const showrow3data = ref();
	const dialogVisible3 = ref(false);
	const row3 = (row) => {
		showrow3data.value = row3data.value[row.rowIndex]
		dialogVisible3.value = true;
	};
	//查询当日预警
	const config3 = reactive({
		header: ['时间', '事件', '位置'],
		waitTime: 3000,
		rowNum: 6,
		columnWidth: [220, 150, 200],
		headerHeight: 38,
		data: [
		],
		headerBGC: '#174F8A',
		oddRowBGC: '#2C5784',
		evenRowBGC: 'F3FDFF',
		index: false,
		align: ['left', 'center', 'center', 'center'],
	});
	const getAi = (city, district, town) => {
		api.post('/multialarm/ai/alarm/getlist/today', {
			name: localStorage.getItem('loginname'),
			city: city == '湖南省' ? null : city,
			district: district,
			town: town,
		}).then((res) => {
			if (res.code == 0) {
				row3data.value = res.data;
				let arr = [];
				res.data.forEach((x) => {
					arr.push([x.timestamp, x.alarmName, x.address])
				})
				// res.data.forEach((x)={
				// })
				config3.data = arr;
			} else {
			}
		})
	};
	//2.3.5查询近7天报警数量
	const drzs = ref({});
	const getdayline = (city, district, town) => {
		api.post('multialarm/system/alarm/count/dayline', {
			name: localStorage.getItem('loginname'),
			city: city == '湖南省' ? null : city,
			district: district,
			town: town,
			start: day().format('YYYY-MM-DD HH:mm:ss'),
			before: 1,
		}).then((res) => {
			if (res.code == 0) {
				drzs.value = res.data[6];
				initMap2(res.data);
			} else {
			}
		})
	};
	//详情
	const dialogVisible2 = ref(false);
	const row2data = ref();
	const showrow2data = ref();
	const row2 = (row) => {
		showrow2data.value = row2data.value[row.rowIndex]
		dialogVisible2.value = true;
	};
	//查询指定区域的当天所有警报事件列表
	const config2 = reactive({
		header: ['时间', '类型', '报警单位', '地点'],
		waitTime: 3000,
		rowNum: 6,
		columnWidth: [180, 100, 130, 180],
		headerHeight: 38,
		data: [

		],
		headerBGC: '#174F8A',
		oddRowBGC: '#2C5784',
		evenRowBGC: 'F3FDFF',
		index: false,
		align: ['left', 'left', 'left', 'left'],
	});
	const getaiyuji = (city, district, town) => {
		api.post('multialarm/client/sensor/alarm_event/getlist/today', {
			name: localStorage.getItem('loginname'),
			city: city == '湖南省' ? '' : city,
			district: district,
			town: town,
		}).then((res) => {
			if (res.code == 0) {
				row2data.value = res.data;
				let arr = [];
				res.data.forEach((x) => {
					arr.push([x.timestamp, x.alarmCode, x.station, x.address])
				})
				config2.data = arr;
			} else {
			}
		})
	};
	//01
	const getNthChar = (str, n) => {
		let str1 = str.split("").reverse().join("")
		return str1.charAt(n) || '0';
	};
	const data1 = ref({});
	const get1 = (city, district, town) => {
		api.post('multialarm/system/count/devices', {
			name: localStorage.getItem('loginname'),
			city: city,
			district: district,
			town: town,
		}).then((res) => {
			if (res.code == 0) {
				data1.value = res.data;
				initMap(res.data);
			} else {
			}
		})
	};
	const config1 = ref({});
	const get3 = (city, district, town) => {
		api.post('/multialarm/system/station/summary', {
			name: localStorage.getItem('loginname'),
			city: city,
			district: district,
			town: town,
		}).then((res) => {
			if (res.code == 0) {
				initMap1(res.data)
				config1.value = {
					header: ['行业名称', '总数', '在线总数', '在线率'],
					waitTime: 3000,
					rowNum: 2,
					columnWidth: [150, 120, 180, 120],
					headerHeight: 28,
					data: [
						['党政机关', res.data[0]['total'], res.data[0]['lineOnTotal'], res.data[0]['lineOnTotal'] == 0 ? '0%' : (res.data[0]['lineOnTotal'] / res.data[0]['total']) * 100 + '%'],
						['金融机构', res.data[2]['total'], res.data[2]['lineOnTotal'], res.data[2]['lineOnTotal'] == 0 ? '0%' : (res.data[2]['lineOnTotal'] / res.data[2]['total']) * 100 + '%'],
						['医疗单位', res.data[3]['total'], res.data[3]['lineOnTotal'], res.data[3]['lineOnTotal'] == 0 ? '0%' : (res.data[3]['lineOnTotal'] / res.data[3]['total']) * 100 + '%'],
						['中小学', res.data[1]['total'], res.data[1]['lineOnTotal'], res.data[1]['lineOnTotal'] == 0 ? '0%' : (res.data[1]['lineOnTotal'] / res.data[1]['total']) * 100 + '%'],
						['其他', res.data[4]['total'], res.data[4]['lineOnTotal'], res.data[4]['lineOnTotal'] == 0 ? '0%' : (res.data[4]['lineOnTotal'] / res.data[4]['total']) * 100 + '%'],
					],
					headerBGC: '#174F8A',
					oddRowBGC: '#2C5784',
					evenRowBGC: 'F3FDFF',
					index: false,
					align: ['left', 'left', 'left', 'left'],
				}
				// initMap(res.data);
			} else {
			}
		})
	};
	const convertData = (data) => {
		var res = [];
		for (var i = 0; i < data.length; i++) {
			var dataItem = data[i];
			var fromCoord = chinaGeoCoordMap[dataItem[0].name];
			var toCoord = [116.4551, 40.2539];
			if (fromCoord && toCoord) {
				res.push([{
					coord: fromCoord,
					value: dataItem[0].value
				}, {
					coord: toCoord,
				}]);
			}
		}
		return res;
	};
	var mapJson = '';
	const flattenTree = (treeData) => {
		const result = [];
		function traverse(node) {
			if (node.children && node.children.length > 0) {
				for (const child of node.children) {
					traverse(child);
				}
			}
			delete node.children
			result.push(node);
		}

		traverse(treeData);
		return result;
	};
	const maptitle = ref('');
	const initMapdt = (data, podat,nameb) => {
		var tree4data = flattenTree(JSON.parse(localStorage.getItem('tree4data')));
		// maptitle.value = tree4data.find(element => element.code == JSON.parse(data)['name'])['title'];
		maptitle.value = nameb;
		localStorage.setItem('nowCode', JSON.parse(data)['name'])
		const myChart = echarts.init(document.getElementById('myMap'));
		// myChart.showLoading();
		// myChart.hideLoading();
		let langarr = JSON.parse(data)['features'];
		langarr.forEach((x, i) => {
		})

		echarts.registerMap('myMap', data);
		var option = {
			tooltip: {
				trigger: 'item',
				textStyle: { fontSize: '14', color: '#fff', fontFamily: 'Arial' },
				backgroundColor: '#092b6a',
				formatter: (params) => {
					let datat = podat;
					let itemWithId2 = datat.children.find(item => item.grope === params.name);
					if (itemWithId2 == null || itemWithId2 == undefined) {
						return '<br /> 报警:' + '0' + '<br /> 警情:' + '0' + ' <br /> AI预警:' + '0'
					} else {
						return '<br /> 报警:' + itemWithId2.alarmCount + '<br /> 警情:' + itemWithId2.caseCount + ' <br /> AI预警:' + itemWithId2.aiCount
					}
				}

			},
			series: [
				{
					type: 'map3D',
					name: '地图',
					selectedMode: 'single', // 地图高亮单选
					regionHeight: 1, // 地图高度
					map: 'myMap',
					viewControl: {
						distance: 168, // 地图视角 控制初始大小
						alpha: 180,// 倾斜角度
						rotateSensitivity: 0,
					},
					label: {
						show: true, // 是否显示名字
						color: '#fff', // 文字颜色
						fontSize: 15, // 文字大小
						fontWeight: 'bold', // 文字大小
					},
					itemStyle: {
						color: '#0A3E77', // 地图背景颜色
						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
						}
					},
					lines3D: {
						show: true,
						data: [
							{
								coords: [
									[111.51, 29.02],    // 起点坐标
									[109.22793, 29.12239]     // 终点坐标
								],
								lineStyle: {
									width: 2,
									color: '#fff'
								}
							}
							// 可以添加更多的线条
						]
					}
				},

			]
		};


		myChart.setOption(option);

		window.addEventListener('resize', function () {
			myChart.resize();
		});
		myChart.on('click', (x) => {
			// let tree4data = flattenTree(JSON.parse(localStorage.getItem('tree4data')));
			tree4data.forEach((item) => {
				if (item.stationId === undefined) {
					if (item.code.length < 9) {
						if (x.name == item.title) {
							myChart.dispose();
							let ado = echarts.init(document.getElementById('myMap'));
							ado.showLoading({
								text: '地图加载中',
								color: '#09A2DC',	//设置加载颜色
								textColor: '#09A2DC',
								maskColor: 'rgba(255, 255, 255, 0.2)',
								zlevel: 0
							})
							get1(x.name, '', '');
							get3(x.name, '', '');
							getaiyuji(x.name, '', '');
							getdayline(x.name, '', '');
							getAi(x.name, '', '');
							//item.code
							// const url = 'https://www.hndyjqrh.cn:8083/multialarm/pic/download?creator=geo&file=' + item.code + '.geojson'
							const url = 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=' + item.code + '.geojson'
							fetch(url).then(response => {
								var status = response["status"]
								if (status == "500") {
									return new Promise((resovle) => {
										resovle("无数据");
									})
								} else {
									return response.text();
								}
							}).then(data => {
								api.post('multialarm/system/alarm/total', {
									name: localStorage.getItem('loginname'),
									parent: item.code,
								}).then((res) => {
									if (res.code == 0) {
										initMapdt(data, res.data,x.name)
										ado.hideLoading();
									}

								})
							});
						}
					}
				}

			})
		})
	};

	const initMap = (data1) => {
		const domMap = document.getElementById("EcharRef");
		domMap.removeAttribute("_echarts_instance_");
		const myChart = echarts.init(domMap);
		var option = {
			tooltip: {
				trigger: 'item'
			},
			legend: {
				top: '15px',
				left: '230px',
				orient: 'vertical',
				type: 'scroll',
				itemHeight: 5,
				textStyle: {
					color: '#fff'
				}
			},
			series: [
				{
					type: 'pie',
					radius: ['45%', '70%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'right'
					},

					emphasis: {
						label: {
							show: true,
							fontSize: 12,
							fontWeight: 'bold',
							color: '#fff'
						}
					},
					labelLine: {
						show: true,
					},
					center: ['35%', '50%'],
					data: [
						{ value: data1.alarmPointZone, name: '防区报警' },
						{ value: data1.alarmPointTalk, name: '对讲报警' },
						{ value: data1.mdevTotal, name: '移动报警' },
						{ value: data1.alarmPointPushButton, name: '一键报警' },
						{ value: data1.ipcTotal, name: '报警复合' }
					]
				}
			]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	};
	const initMap1 = (data1) => {
		const domMap = document.getElementById("EcharRef1");
		domMap.removeAttribute("_echarts_instance_");
		const myChart = echarts.init(domMap);
		var option = {
			tooltip: {
				trigger: 'item'
			},
			xAxis: {
				type: 'category',
				splitLine: {
					show: false //去掉网格线
				},
				axisLine: {//这是y轴文字颜色
					lineStyle: {
						color: "#fff",
					},
				},
				data: ['党政机关', '金融机构', '医疗单位', '中小学', '其他'],
				axisLabel: {
					formatter: val => {
						let txt = val
						if (val.length > 4) {
							txt = val.substr(0, 4) + '...'
						}
						return txt
					}
				}
			},
			grid: {
				top: '8%',
				left: '1%',
				right: '1%',
				bottom: '3%',
				containLabel: true
			},
			yAxis: {
				type: 'value',
				axisLine: {//这是y轴文字颜色
					lineStyle: {
						color: "#fff",
					},
				},
				splitLine: { // 设置x轴轴线相关配置
					show: false // 不显示x轴轴线
				},
			},
			series: [
				{
					barWidth: '24%',
					data: [data1[0]['total'], data1[2]['total'], data1[3]['total'], data1[1]['total'], data1[4]['total']],
					type: 'bar',
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#0386F6' // 起始颜色（红）
							}, {
								offset: 1,
								color: '#0FBBC4' // 结束颜色（蓝）
							}])
						}
					}
				}
			]
		};
		myChart.setOption(option);
	};
	const initMap2 = (arr) => {
		let time = [];
		let data1 = [];
		let data2 = [];
		arr.forEach(x => {
			time.push(x.month + '-' + x.day);
			data1.push(parseInt(x.countAlarm))
			data2.push(parseInt(x.countCase))
		})
		const domMap = document.getElementById("EcharRef2");
		domMap.removeAttribute("_echarts_instance_");
		const myChart = echarts.init(domMap);
		var option = {
			tooltip: {
				trigger: 'item',
				formatter: (params) => {
					return '警情数量:' + params.seriesIndex + '<br /> 报警次数:' + params.data
				}
			},
			grid: {
				top: '15%',
				left: '1%',
				right: '1%',
				bottom: '3%',
				containLabel: true
			},
			legend: {
				data: [{
					name: '报警次数',
					textStyle: {
						color: '#fff'
					},

				}, {
					name: '警情数量',
					textStyle: {
						color: '#fff'
					},

				}]
			},
			xAxis: [
				{
					type: 'category',
					splitLine: {
						show: false //去掉网格线
					},
					data: time,
					axisLine: {//这是y轴文字颜色
						lineStyle: {
							color: "#fff",
						},
					},
					axisPointer: {
						type: 'shadow'
					}
				}
			],
			yAxis: [
				{
					type: 'value',
					name: '',
					min: 0,
					// max: 250,
					interval: 50,
					splitLine: { // 设置x轴轴线相关配置
						show: false // 不显示x轴轴线
					},
					axisLine: {//这是y轴文字颜色
						lineStyle: {
							color: "#fff",
						},
					},
					axisLabel: {
						formatter: '{value}次'
					}
				},
				{
					type: 'value',
					min: 0,
					splitLine: { // 设置x轴轴线相关配置
						show: false // 不显示x轴轴线
					},
					max: 25,
					interval: 5,
					axisLabel: {
						formatter: ''
					}
				}
			],
			series: [
				{
					name: '报警次数',
					type: 'bar',
					tooltip: {
						valueFormatter: function (value) {
							// return value + ' ml';
						}
					},
					barWidth: '24%',
					itemStyle: {
						color: '#3F7AD1' // 设置折线的颜色为红色
					},
					data: data1,
				},
				{
					name: '警情数量',
					type: 'line',
					smooth: true,
					yAxisIndex: 1,
					tooltip: {
						valueFormatter: function (value) {
							// return value + '°C';
						}
					},
					itemStyle: {
						color: '#81A2CF' // 设置折线的颜色为红色
					},
					data: data2,
				}
			]
		};
		myChart.setOption(option);
	};
</script>

<style scoped lang="scss">
	:deep(.dv-scroll-board .header) {
		font-size: 13px;
	}

	:deep(.dv-scroll-board .rows .row-item) {
		font-size: 12px;
	}

	:deep(.el-descriptions) {
		width: 98%;
		margin: 10px auto;
		text-align: center;
		border: 1px solid #1F9BD9;

		--el-descriptions-table-border: {
			1px solid #1F9BD9
		}

		;

		--el-descriptions-item-bordered-label-background: {
			transparent
		}

		;
	}

	:deep(.el-descriptions__body) {
		background: transparent;
	}

	:deep(.el-descriptions__label) {
		width: 130px;
		color: rgb(12, 214, 254);
		background: transparent;
	}

	:deep(.el-descriptions__content.el-descriptions__cell.is-bordered-content) {
		color: #fff;
	}

	:deep(.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell) {
		border: 1px solid #1F9BD9;
	}

	:deep(.el-dialog__body) {
		padding: 10px;
		color: #fff;
	}

	.uploadBtn .el-button {
		background-color: transparent;
		border-color: #1F9BD9;
		color: #1F9BD9;
	}

	.uploadBtn .el-button i {
		font-size: 16px;
		margin-right: 3px;
	}

	.uploadBtn .el-button:hover {
		color: rgb(12, 214, 254);
		border: 1px solid rgb(12, 214, 254);
	}

	:deep(.el-dialog) {
		--el-dialog-bg-color: #071D4D;
		border: 3px solid #387dbf;
	}

	:deep(.el-dialog__header) {
		padding: 13px;
		border-bottom: 1px solid #3374b4 !important;
		margin-right: 0px;
	}

	:deep(.el-dialog__title) {
		color: #067bc1 !important;
		font-weight: 500;
	}

	:deep(.el-input__inner) {
		color: #000;
	}

	:deep(.el-dialog__headerbtn .el-dialog__close) {
		color: #fff;
		font-weight: 500;
		font-size: 18px;
	}

	.tabs_a {
		background-image: url(./indeximag/able.jpg);
		background-size: 100% 100%;
	}

	:deep(.el-tabs__nav-wrap) {
		margin-bottom: 1px;
	}

	:deep(.el-tabs--border-card>.el-tabs__content) {
		height: calc(100% - 40px);
		background: red;
		padding: 0px;
	}

	:deep(.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active) {
		color: #d1dbe5;
		background-color: #29d;
		border-right-color: #29d;
		border-left-color: #29d;
	}

	:deep(.el-tabs--border-card>.el-tabs__header) {
		background-color: transparent;
		border-bottom: none;
	}

	:deep(.el-tabs--border-card) {
		background: #022C54;
		border: none;
	}

	:deep(.el-progress-bar__outer) {
		background-color: #174771;
	}

	:deep(.el-progress-bar__inner) {
		background-color: #3BC5F3;
	}

	.title1 {
		width: 100%;
		height: 30px;
		background-image: url(./indeximag/一级标题.png);
		background-size: 100% 100%;
		line-height: 30px;
	}

	.fp {
		background-image: url(./indeximag/数字背景.png);
		width: 15px;
		height: 22px;
		display: inline-block;
		background-size: 100% 100%;
		line-height: 22px;
		text-align: center;
		margin-right: 10px;
		font-size: 13px;
		font-weight: 500;
	}

	.box {
		width: 100%;
		height: 100%;
		display: flex;
		background-color: #022C54;

		.left {
			width: 450px;
			height: 98%;
			margin-top: 0.5%;
			margin-left: 0.5%;
			border: 1px solid #3876B9;

			.left_top {
				width: 97%;
				height: 33%;
				padding: 5px;
			}

			.left_cen {
				width: 97%;
				height: 33%;
				padding: 5px;
			}

			.left_bottm {
				width: 97%;
				height: 33%;
				padding: 5px;
			}
		}

		.right {
			width: 450px;
			height: 98%;
			margin-top: 0.5%;
			border: 1px solid #3876B9;
			margin-right: 5px;

			.right_top {
				width: 97%;
				height: 33%;
				padding: 5px;
			}

			.right_cen {
				width: 97%;
				height: 33%;
				padding: 5px;
			}

			.right_bottm {
				width: 97%;
				height: 35%;
				padding: 5px;
			}
		}

		.cen {
			width: calc(100% - 900px);
			height: 98%;
			margin-top: 0.5%;
			margin-left: 0.5%;
			margin-right: 0.5%;
			border: 1px solid #3876B9;
			background-image: url(./indeximag/able.jpg);
			background-size: 100% 100%;
		}
	}
</style>