VBDSM
/
UI


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112
							<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<script src="https://webapi.amap.com/loader.js"></script>
	<title>数据看板</title>
	<style>
		* {
			box-sizing: border-box;
		}

		body {
			margin: 0;
			padding: 0;
			width: 100%;
			background-color: rgba(255, 255, 255, 0.2);
			/* background-image: url(./images/bg.png); */
			display: flex;
			color: #fff;
			/* overflow: hidden; */
			box-sizing: border-box;
			--margin: 5px;
			--padding: 10px;
			--color: #1f449a;
			--border-color: var(--color);
			--color1: #27b484;
			--h-color: #3ba9f6;
		}

		.border-svg-container {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}

		.margin {
			margin: var(--margin);
		}

		.margin-x {
			margin-left: var(--margin);
			margin-right: var(--margin);
		}

		.mt {
			margin-top: var(--margin);
		}

		.mb {
			margin-bottom: var(--margin);
		}

		.margin-y {
			margin-top: var(--margin);
			margin-bottom: var(--margin);
		}

		.padding {
			padding: var(--padding);
		}

		.main {
			margin: 0;
			width: 100%;
			/* height: calc(100vh - 120px); */
			height: 100vh;
			display: flex;
			flex: 1 auto;
		}

		.box {
			padding: 0;
			/* border: 1px solid var(--border-color); */
		}

		.d-flex {
			display: flex;
		}

		.flex-center {
			justify-content: center;
			align-items: center;
		}

		.flex-row {
			display: flex;
			flex-direction: row;
		}

		.flex-column {
			display: flex;
			flex-direction: column;
		}

		.flex-column-auto {
			flex: none;
		}

		.flex-column-fluid {
			flex: 1 0 auto;
		}

		.flex-row-auto {
			flex: 0 0 auto;
		}

		.flex-row-fluid {
			flex: 1 auto;
		}


		.box-card {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 100%;
			background-color: #f5f5f5;
			border: none;
			color: #221e1e;
			/* border-radius: 11px 11px 0 0; */
			border: 1px solid var(--border-color);
		}

		.box-card .box_header {
			display: flex;
			align-items: center;
			background: #1f449a;
			color: #fff;
			justify-content: space-between;
			flex: none;
			padding-left: 15px;
			height: 40px;
			border-bottom: 2px solid var(--border-color);
			font-weight: 600;
			/* border-radius: 10px 10px 0 0; */
			font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
		}

		.box-card .box_header .svg-box {
			height: 100%;
			width: 300px;
		}

		.box-card .box_header .svg-box img {
			width: 100%;
			height: 100%;
		}

		.box-card .box_body {
			padding: 10px;
			flex: 1 0 auto;
		}

		.map-container {
			width: 100%;
			height: calc(100% + 22px);

		}
	</style>
	<style>
		.amap-marker-label {
			border: none;
			border-radius: 10px;
			/* background: transparent; */
			background-color: rgba(255, 255, 255, 0.5);
			color: #1f449a;
			font-weight: 600;
		}

		.infoBox-content {
			padding: 10px;
		}

		.infoBox-content .text {
			color: #3c3c3c;
			display: flex;
		}

		.infoBox-content .text span {
			width: 100%;
		}

		.infoBox-content .splite {
			margin: 10px 0;
			height: 0;
			width: 100%;
			border-top: 1px dashed #666;
		}

		.infoBox-title {
			color: #fff;
		}
	</style>
	<style>
		#company_name {
			text-align: center;
			font-size: 18px;
			margin: 5px 8px;
			font-weight: 600;
			color: #c6c600;
		}

		.count-panel {
			display: flex;
			flex-direction: column;
		}

		.count-panel .panel-title,
		.count-panel .panel-time {
			font-size: 14px;
			color: #353540;
			line-height: 1.5em;
			text-align: center;
		}

		.count-panel .panel-title span {
			font-weight: 600;
		}

		.count-panel .panel-body {
			display: flex;
			justify-content: center;
		}

		.count-panel .count-group {
			margin-top: 5px;
			display: flex;
		}

		.count-panel .count-group>div {
			padding: 5px;
			background-color: #4e8eee;
			font-size: 30px;
			color: #1b1b25;
			margin-right: 3px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: center;
		}

		.count-panel .count-group>div>span {
			font-weight: bold;
			font-family: helvetica;
			text-align: center;
			background: linear-gradient(180deg, #eff4f4 0, #b5d5ed 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.circle-group {
			margin: 5px;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.circle-group .label {
			width: 100%;
			font-size: 12px;
			color: #353540;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: center;
			overflow: visible;
		}

		.circle-group .value {
			margin: 5px;
			margin-top: 13px;
			width: 80px;
			height: 80px;
			font-size: 25px;
			color: #3c3c3c;
			border: 10px solid #177fd6;
			border-radius: 50%;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: visible;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.company #jcyh {
			display: none;
		}

		.company .circle-group {
			margin-left: 20px;
			margin-right: 20px;
		}

		.log-box {
			color: var(--h-color);
		}

		.log-box .empty {
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 20px;
			font-weight: 600;
		}

		.log-box .log {
			margin: 3px 0;
		}

		.log-box .log .name {
			color: #434242;
		}

		.log-box .log .info {
			color: #3e3838;
		}
	</style>
</head>

<body>
	<div class="main flex-column">
		<div class="d-flex flex-column-fluid mb">
			<div class="box margin-x flex-row-fluid">
				<div class="box-card">
					<div class="box_header">
						<div class="title">全局概览</div>
						<div class="svg-box">
							<img src="./images/dec/1.svg" alt="" />
						</div>
					</div>
					<div class="box_body" style="padding: 0; overflow: hidden">
						<div class="map-container" id="map-container"></div>
					</div>
				</div>
			</div>
			<div class="box margin-x flex-column flex-row-auto" style="width: 40%">
				<div class="box flex-column-auto mb" style="height: 650px">
					<div class="box-card">
						<div class="box_header">
							<div class="title">数据监测</div>
							<div class="svg-box">
								<img src="./images/dec/1.svg" alt="" />
							</div>
						</div>
						<div class="box_body d-flex flex-column" style="overflow: hidden">
							<div id="company_name"></div>
							<div class="d-flex margin-y flex-column-auto">
								<div class="count-panel flex-row-auto" style="width: 33%">
									<span class="panel-title"><span>最大</span>负荷(兆瓦)</span>
									<!-- <span class="panel-time"> 发生于 <span>16:05:00</span></span> -->
									<div class="panel-body">
										<div class="count-group clearfix" id="max-power">
											<div><span>0</span></div>
											<div><span>0</span></div>
											<div><span>0</span></div>
											<div><span>0</span></div>
											<div><span>0</span></div>
											<div><span>0</span></div>
										</div>
									</div>
								</div>
								<div class="count-panel flex-row-fluid">
									<span class="panel-title"><span>最小</span>负荷(兆瓦)</span>
									<!-- <span class="panel-time"> 发生于 <span>16:05:00</span></span> -->
									<div class="panel-body">
										<div class="count-group clearfix" id="min-power">
											<div><span>0</span></div>
											<div><span>0</span></div>
											<div><span>0</span></div>
											<div><span>0</span></div>
											<div><span>0</span></div>
											<div><span>0</span></div>
										</div>
									</div>
								</div>
								<div class="count-panel flex-row-auto" style="width: 33%">
									<span class="panel-title"><span>平均</span>负荷(兆瓦)</span>
									<!-- <span class="panel-time"> 发生于 <span>16:05:00</span></span> -->
									<div class="panel-body">
										<div class="count-group clearfix" id="avg-power">
											<div><span>0</span></div>
											<div><span>0</span></div>
											<div><span>0</span></div>
											<div><span>0</span></div>
											<div><span>0</span></div>
											<div><span>0</span></div>
										</div>
									</div>
								</div>
							</div>
							<div class="d-flex margin-y flex-column-auto">
								<div class="flex-row-auto" style="width: 200px; height: 115px">
									<div id="pieMonitorContainer" style="width: 100%; height: 100%"></div>
								</div>
								<div class="flex-row-fluid d-flex flex-center">
									<div class="flex-row-auto circle-group" id="jcyh">
										<div class="label">监测用户</div>
										<div class="value"></div>
									</div>
									<div class="flex-row-auto circle-group" id="jcrl">
										<div class="label">监测容量(<span>KVA</span>)</div>
										<div class="value"></div>
									</div>
									<div class="flex-row-auto circle-group" id="jcds">
										<div class="label">监测点数</div>
										<div class="value"></div>
									</div>
								</div>
							</div>
							<div class="d-flex margin-y flex-column-fluid" id="power-chart-box" style="width: 100%">
								<div id="powerDataContainer" style="width: 100%; height: 100%"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="box flex-column-fluid mt d-flex" style="height: 20%">
					<div class="box-card" style="height: 100%">
						<div class="box_header">
							<div class="title">告警记录</div>
							<div class="svg-box">
								<img src="./images/dec/1.svg" alt="" />
							</div>
						</div>
						<div class="box_body" style="overflow: hidden; width: 100%; height: calc(100% - 40px)">
							<div id="warning-box" class="d-flex flex-column log-box"
								style="width: calc(100% + 30px); max-height: 110px; overflow-y: auto"></div>
						</div>
					</div>
				</div>
			</div>
			<!-- <div class="box margin flex-column flex-row-auto" style="width: 20%"></div> -->
		</div>
	</div>
	<script src="http://static.vbdsm.com/js/lib/jquery-1.8.0.min.js" type="text/javascript"></script>
	<script src="http://static.vbdsm.com/js/lib/jquery.query-2.1.7.js"></script>
	<script src="http://static.vbdsm.com/js/util.js" type="text/javascript"></script>
	<script src="./js/echarts.js"></script>

	<script>
		const cid = $.query.get('auth_cid')
		$('body').append('<script src="/system/lang/desktop/config.json?script=1&auth_cid=' + cid + '"><\/script>')
		//var host = jQuery.parseJSON(AUTH.site.config).platform['01200009'] + '.' + AUTH.site.domain
		//console.log(AUTH)
		let warnInfoList = []
		let isService = 0,
			curCompanyId = ''
		$(function () {

			initMonitor()
		})
		ajax({
			url: '/web/sys/altips/getWarnInfoList.json',
			type: 'post',
			dataType: 'json',
			success: function (res) {
				warnInfoList = res.data
			},
		})


	</script>

	<script id="map">
		let map
		window._AMapSecurityConfig = {
			securityJsCode: 'b815cb3bb6aa8516fcfe8c506abe9da2',
		}
		AMapLoader.load({
			key: '0da67b4ef98b3975eed48e8f8d42f9cd', //申请好的Web端开发者 Key，调用 load 时必填
			version: '2.0', //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
			plugins: ['AMap.Scale', 'AMap.HawkEye', 'AMap.ToolBar', 'AMap.ControlBar'],
		})
			.then((AMap) => {
				const _map = new AMap.Map('map-container', {
					//设置地图容器id
					viewMode: '3D', //是否为3D地图模式
					rotation: 45,
					pitch: 65,
					zoom: 10, //初始化地图级别
				})
				const scale = new AMap.Scale(),
					toolBar = new AMap.ToolBar({
						position: {
							top: '110px',
							right: '40px',
						},
					}),
					controlBar = new AMap.ControlBar({
						position: {
							top: '10px',
							right: '10px',
						},
					}),
					overView = new AMap.HawkEye({
						opened: false,
					})
				_map.addControl(scale)
				_map.addControl(toolBar)
				_map.addControl(controlBar)
				_map.addControl(overView)
				overView.hide()
				//_map.setMapStyle('amap://styles/1f1485e5beb2382bd068587d161155a2')
				map = _map
				getCompanyList()
			})
			.catch((e) => {
				console.error(e) //加载错误提示
			})
		let pageNumber = 1,
			pageSize = 10
		let isInitMap = false
		let companyData = [],
			mapMarkers = []
		function getCompanyList() {
			ajax({
				url: `/web/screen/getCompanyList.json`,
				type: 'post',
				dataType: 'json',
				data: {
					pageNo: pageNumber,
					pageSize: pageSize,
				},
				success: function (res) {
					//console.log('--------', res)
					companyData = res.rows
					renderCompany()
				},
			})
		}

		function renderCompany() {
			mapMarkers = []
			companyData.forEach((v) => {
				const coordinate = v.coordinate
				const coordinateArr = coordinate.split(',')
				v.longitude = Number(coordinateArr[0])
				v.latitude = coordinateArr.length > 1 ? Number(coordinateArr[1]) : null
				if (!isInitMap) {
					isInitMap = true
					if (v.latitude || v.longitude) {
						map.setZoomAndCenter(13, [v.longitude, v.latitude])
					}
				}
				renderMark(v)
			})
			//console.log('-mapMarkers-', mapMarkers)
		}

		function renderMark(data) {
			if (!data.latitude || !data.longitude) {
				return
			}
			//console.log('---', data)
			const infoWindow = new window.AMap.InfoWindow({
				isCustom: true,
				//anchor: "top-center",
				offset: new window.AMap.Pixel(0, -25),
				//content: "2", //getInfoBoxHtml(item), //传入 dom 对象，或者 html 字符串
			})
			infoWindow.on('open', function () {
				document.querySelector('.close-btn_info-box')?.addEventListener('click', function () {
					infoWindow.close()
					getCompanyMonitor()
					$('#company_name').text('').hide()
				})
			})
			const oldMark = mapMarkers.find((a) => a.id == data.id)
			if (oldMark) {
				map.remove(oldMark.marker)
			}
			// mapMarkers.splice(
			// 	mapMarkers.findIndex((a) => a.id == data.id),
			// 	1
			// )
			const mkIcon = new window.AMap.Icon({
				size: new window.AMap.Size(35, 35),
				image: '/bigScreen/images/map/blue-location.png',
				imageOffset: new window.AMap.Pixel(0, 0),
				imageSize: new window.AMap.Size(35, 35),
			})
			const marker = new window.AMap.Marker({
				position: new window.AMap.LngLat(data.longitude, data.latitude),
				offset: new window.AMap.Pixel(0, 1),
				icon: mkIcon, // 添加 Icon 实例
				anchor: 'bottom-center',
				label: {
					content: `<span>${data.name}</span>`,
					direction: 'bottom',
				},
			})
			marker.id = data.id
			map.add(marker)
			let timer
			marker.on('click', () => {
				clearTimeout(timer)
				companyMarkOpen(data, false)
			})
			// marker.on('mouseover', () => {
			// 	console.log('mouseover', data)
			// 	clearTimeout(timer)
			// 	timer = setTimeout(() => {
			// 		companyMarkOpen(data, false)
			// 	}, 800)
			// })
			// marker.on('mouseout', () => {
			// 	clearTimeout(timer)
			// })
			mapMarkers.push({
				id: data.id,
				marker,
				infoWindow,
			})
		}

		function companyMarkOpen(item, moveCenter) {
			mapMarkers.forEach((v) => {
				if (item && v.id == item.id) {
					//console.log('--ID', item.id, v.id)
					$('#company_name').text(item.name).show()
					getCompanyMonitor(item.id)
					renderInfoWindow(v, item, moveCenter)
				} else {
					v.infoWindow.close()
				}
			})
		}

		function renderInfoWindow(mapMarker, item, moveCenter) {
			ajax({
				url: `/web/screen/getCompanyDetail.json`,
				type: 'post',
				dataType: 'json',
				data: {
					orgId: item.id,
				},
				success: function (res) {
					const content = getInfoBoxHtml(res.data, item)
					mapMarker.infoWindow.setContent(content)
					mapMarker.infoWindow.open(map, [item.longitude, item.latitude])
					if (moveCenter || moveCenter == undefined) {
						map.setZoomAndCenter(13, [item.longitude, item.latitude + 0.01])
					}
				},
			})
		}

		function getInfoBoxHtml(data, item) {
			console.log('___###', data, item)
			return `<div class="infoBox" style="width:500px;height:auto;border:0px solid rgb(11, 44, 114);">
						<div class="infoBox-title d-flex flex-center"style="height:40px;font-weight:600;background:#000c31;border-radius:10px 10px 0 0;position: relative;">
							<span>${item.name}</span>	
							<div class="close-btn_info-box" style="position: absolute; right: 10px;top: 4px; width: 30px;height: 30px;border-radius: 50%;display: flex;justify-content: center;align-items: center;background: transparent; cursor: pointer;    background-repeat: no-repeat; background-size: 90%;background-position: center;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB0PSIxNjU1MzY1ODQ3ODQwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIyNzgiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNNTEyIDk2MEMyNjQuOTYgOTYwIDY0IDc1OS4wNCA2NCA1MTJTMjY0Ljk2IDY0IDUxMiA2NHM0NDggMjAwLjk2IDQ0OCA0NDhTNzU5LjA0IDk2MCA1MTIgOTYwek01MTIgMTI4LjI4OEMzMDAuNDE2IDEyOC4yODggMTI4LjI4OCAzMDAuNDE2IDEyOC4yODggNTEyYzAgMjExLjU1MiAxNzIuMTI4IDM4My43MTIgMzgzLjcxMiAzODMuNzEyIDIxMS41NTIgMCAzODMuNzEyLTE3Mi4xNiAzODMuNzEyLTM4My43MTJDODk1LjcxMiAzMDAuNDE2IDcyMy41NTIgMTI4LjI4OCA1MTIgMTI4LjI4OHoiIHAtaWQ9IjIyNzkiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48cGF0aCBkPSJNNTU3LjA1NiA1MTMuMzc2bDEzOC4zNjgtMTM2Ljg2NGMxMi41NzYtMTIuNDE2IDEyLjY3Mi0zMi42NzIgMC4yNTYtNDUuMjQ4LTEyLjQxNi0xMi41NzYtMzIuNzA0LTEyLjY3Mi00NS4yNDgtMC4yNTZsLTEzOC41NiAxMzcuMDI0LTEzNi40NDgtMTM2Ljg2NGMtMTIuNTEyLTEyLjUxMi0zMi43MzYtMTIuNTc2LTQ1LjI0OC0wLjA2NC0xMi41MTIgMTIuNDgtMTIuNTQ0IDMyLjczNi0wLjA2NCA0NS4yNDhsMTM2LjI1NiAxMzYuNjcyLTEzNy4zNzYgMTM1LjkwNGMtMTIuNTc2IDEyLjQ0OC0xMi42NzIgMzIuNjcyLTAuMjU2IDQ1LjI0OCA2LjI3MiA2LjMzNiAxNC40OTYgOS41MDQgMjIuNzUyIDkuNTA0IDguMTI4IDAgMTYuMjU2LTMuMTA0IDIyLjQ5Ni05LjI0OGwxMzcuNTY4LTEzNi4wNjQgMTM4LjY4OCAxMzkuMTM2YzYuMjQgNi4yNzIgMTQuNDMyIDkuNDA4IDIyLjY1NiA5LjQwOCA4LjE5MiAwIDE2LjM1Mi0zLjEzNiAyMi41OTItOS4zNDQgMTIuNTEyLTEyLjQ4IDEyLjU0NC0zMi43MDQgMC4wNjQtNDUuMjQ4TDU1Ny4wNTYgNTEzLjM3NnoiIHAtaWQ9IjIyODAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=');"></div>
							</div>
						<div class="infoBox-content" style="width:100%;overflow:hidden; padding:15px;border-radius: 0 0 10px 10px; background:rgba(255,255,255,.8);color:#3c3c3c;">
							<div class="text">
								<span style="">详细地址：${item.address}</span>
              </div>
							<div class="splite"></div>
							<div class="text">
								<span style="">主变数量：${data._zbsl} 台</span>
              </div>
							<div class="splite"></div>
							<div class="text">
								<span style="">报装容量：${data._applyLoad} kVA</span>
								<span style="">监测容量：${data._jcrl} kVA</span>
              </div>
							<div class="splite"></div>
							<div class="text">
								<span style="">基本电费：${data._jbdj} kVA</span>
								<span style="">计费方式：${data._jffs == 1 ? '容量' : data._jffs == 2 ? '需量' : data._jffs == 3 ? '单一电价' : ''} </span>
              </div>
						</div>
					</div>`
		}
	</script>

	<script id="Monitor">
		function initMonitor() {
			getCompanyMonitor()
			setInterval(() => {
				getCompanyMonitor(curCompanyId)
			}, 1000 * 60 * 1)
		}

		function getCompanyMonitor(id) {
			if (!id) {
				isService = 1
				curCompanyId = ''
			} else {
				isService = 0
				curCompanyId = id
			}
			ajax({
				url: `/web/screen/getCompanyMonitor.json`,
				type: 'post',
				dataType: 'json',
				data: {
					orgId: curCompanyId,
				},
				success: function (res) {
					//console.log('--monitor--', res)
					renderMonitor(res.data, isService)
					let pieData = [
						{ name: '在线', value: res.data.onlineCount || 0 },
						{ name: '离线', value: res.data.notOnlineCount || 0 },
					]
					renderMonitorPieChart(pieData)
				},
			})
			ajax({
				url: `/web/screen/getMaxPower.json`,
				type: 'post',
				dataType: 'json',
				data: {
					orgId: curCompanyId,
				},
				success: function (res) {
					//console.log('min', res)
					rendMinMaxPower(res.data)
				},
			})
			ajax({
				url: `/web/screen/getCompanyLoadData.json`,
				type: 'post',
				dataType: 'json',
				data: {
					orgId: curCompanyId,
				},
				success: function (res) {
					console.log('chart', res)

					renderPowerDataChart(res.data)
				},
			})
			ajax({
				url: `/web/screen/getWarnInfoList.json`,
				type: 'post',
				dataType: 'json',
				data: {
					orgId: curCompanyId,
					pageSize: 20,
				},
				success: function (res) {
					renderWarnings(res.data)
				},
			})
		}

		function rendMinMaxPower(data) {
			let i = 0
			render('max')
			render('min')
			render('avg')
			function render(idStr) {
				const $that = $('#' + idStr + '-power')
				$that.hide()
				let time,
					val,
					str = ''

				if (data) {
					if (idStr == 'max') {
						time = data.maxTime
						val = data.mmax
					} else if (idStr == 'min') {
						time = data.minTime
						val = data.mmin
					} else if (idStr == 'avg') {
						val = data.mavg
					}
					if (val) {
						val = (val / 1000).toFixed(2) + ''

						while (val.length < 6) {
							val += '0'
						}
						if (val.length > 6) {
							val = (val / 1000).toFixed(0)
							if (val.length > 5) {
								val = (val / 1000).toFixed(0)
								while (val.length < 5) {
									val += '0'
								}
								val += 'M'
							} else {
								while (val.length < 5) {
									val += '0'
								}
								val += 'K'
							}
						}
						val = val.split('')
						val.forEach((v) => {
							str += `<div><span>${v}</span></div>`
						})
					}
				} else {
					for (let i = 0; i < 6; i++) {
						str += `<div><span>0</span></div>`
					}
				}
				$that.html(str).fadeIn(500)
			}
		}

		function renderMonitor(data) {
			if (isService) {
				$('#jcyh').parent().removeClass('company')
			} else {
				$('#jcyh').parent().addClass('company')
			}
			$('#jcyh .value').text(data.companyCount)
			if (data.jcrl > 10000) {
				let val = (data.jcrl / 10000).toFixed(1) + ''
				if (val.length > 4) {
					let val = (data.jcrl / 10000).toFixed(0) + ''
				}
				$('#jcrl span').text('万KVA')
				$('#jcrl .value').text(val)
			} else {
				$('#jcrl span').text('KVA')
				$('#jcrl .value').text(data.jcrl)
			}

			$('#jcds .value').text(data.totalCount)
		}

		function renderWarnings(data) {
			if (data && data.length > 0) {
				$('#warning-box').html('')
				data.forEach((v) => {
					renderWarning(v)
				})
			} else {
				$('#warning-box').html('<div class="empty">暂无告警</div>')
			}
		}

		function renderWarning(data) {
			let str = `<div class="log">
						<span class="time">[ ${getTime(data.warningTimeStart)} ]</span>
						<span class="name">${data.companyName}</span>
						的
						<span class="info">${getWarnInfo(data.warningInfoId)}</span>
						发生
						<span class="flag">${getFlag(data.overFlag)}</span>
						告警。
					</div>`
			$('#warning-box').append(str)
			function getFlag(value) {
				return 1 == value ? '<span style="color:#F95639">越上限↑</span>' : '<span style="color:#3378E0">越下限↓</span>'
			}
			function getTime(value) {
				var val = ''
				if (value) {
					val = '' + value
					val = val.substr(0, 4) + '-' + val.substr(4, 2) + '-' + val.substr(6, 2) + ' ' + val.substr(8, 2) + ':' + val.substr(10, 2) + ':' + val.substr(12, 2)
				}
				return val
			}
			function getWarnInfo(value) {
				let info = warnInfoList.find((v) => v.id == value)
				if (info) {
					return info.text
				}
				return '未知类型'
			}
			return str
		}
	</script>

	<script id="chart">
		const color = ['#177fd6', '#c23531', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']
		function renderMonitorPieChart(data) {
			let option = {
				color: ['#177fd6', '#05224d'],
				title: {
					text: '监测点运行情况',
					left: 'center',
					top: 5,
					textStyle: {
						fontSize: 12,
						color: '#353545',
					},
				},
				tooltip: {
					show: false,
					trigger: 'item',
				},
				legend: {
					orient: 'vertical',
					right: '0',
					bottom: '10',
					textStyle: {
						color: '#353545',
					},
					selectedMode: false,
				},
				series: [
					{
						type: 'pie',
						radius: '70%',
						center: ['35%', '60%'],
						data: data,
						label: {
							position: 'inside',
							formatter: '{c}台',
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)',
							},
						},
					},
				],
			}
			const pieMonitorChart = echarts.init(document.getElementById('pieMonitorContainer'))
			pieMonitorChart.setOption(option)
		}
		let powerChart = echarts.init(document.getElementById('powerDataContainer'))

		function renderPowerDataChart(data) {
			let dataSet = []
			for (let i = 0; i < data.date1.length; i++) {
				const item1 = $.extend(true, {}, data.date1[i])
				item1.name = 'd1'
				item1.y = item1.y == -9999 ? null : item1.y
				item1.timestamp = formaDate(item1.timestamp)
				dataSet.push(item1)
				const item2 = $.extend(true, {}, data.date2[i])
				item2.name = 'd2'
				item2.y = item2.y == -9999 ? null : item2.y
				item2.timestamp = formaDate(item2.timestamp)
				dataSet.push(item2)
				const item3 = $.extend(true, {}, data.date3[i])
				item3.name = 'd3'
				item3.y = item3.y == -9999 ? null : item3.y
				item3.timestamp = formaDate(item3.timestamp)
				dataSet.push(item3)
			}
			// 定义格式化封装函数
			function formaDate(timer) {
				let date = new Date(timer)
				//const year = date.getFullYear()
				//const month = date.getMonth() + 1 // 由于月份从0开始，因此需加1
				//const day = date.getDate()
				const hour = date.getHours()
				const minute = date.getMinutes()
				//const second = date.getSeconds()
				return `${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}`
			}
			//console.log('DS', dataSet)

			let option = {
				color: ['#3ba9f6', '#fc6444', '#27b484'],
				dataset: [
					{
						source: dataSet,
					},
					{
						transform: [
							{
								type: 'filter',
								config: { dimension: 'name', value: 'd1' },
							},
							{
								type: 'sort',
								config: { dimension: 'timestamp', order: 'asc' },
							},
						],
					},
					{
						transform: [
							{
								type: 'filter',
								config: { dimension: 'name', value: 'd2' },
							},
							{
								type: 'sort',
								config: { dimension: 'timestamp', order: 'asc' },
							},
						],
					},
					{
						transform: [
							{
								type: 'filter',
								config: { dimension: 'name', value: 'd3' },
							},
							{
								type: 'sort',
								config: { dimension: 'timestamp', order: 'asc' },
							},
						],
					},
				],
				title: {
					text: '负荷波动情况',
					left: 'center',
					top: 5,
					textStyle: {
						fontSize: 14,
						color: '#353545',
					},
				},
				legend: {
					show: true,
					bottom: 10,
					textStyle: {
						fontSize: 12,
						color: '#353545',
					},
				},
				xAxis: {
					//name: 'timestamp',
					type: 'category',
					interval: 8,
					axisLine: {
						lineStyle: {
							color: '#353545',
							width: 1,
						},
					},
					axisLabel: {
						textStyle: {
							fontSize: 12,
							color: '#353545',
						},
					},
				},
				yAxis: {
					name: 'KW',
					splitNumber: 4,
					max: function (value) {
						return ((value.max + 50) / 100).toFixed(0) * 100
					},
					min: function (value) {
						return ((value.min - 50) / 100).toFixed(0) * 100
					},
					axisLine: {
						lineStyle: {
							color: '#353545',
							width: 1,
						},
					},
					axisLabel: {
						textStyle: {
							fontSize: 12,
							color: '#353545',
						},
					},
					splitLine: {
						lineStyle: {
							type: 'dashed',
							color: '#363e4f',
						},
					},
				},
				series: [
					{
						type: 'line',
						name: '今日',
						datasetIndex: 1,
						symbol: 'none',
						encode: {
							x: 'timestamp',
							y: 'y',
						},
					},
					{
						type: 'line',
						name: '昨日',
						datasetIndex: 2,
						symbol: 'none',
						encode: {
							x: 'timestamp',
							y: 'y',
						},
					},
					{
						type: 'line',
						name: '前日',
						datasetIndex: 3,
						symbol: 'none',
						encode: {
							x: 'timestamp',
							y: 'y',
						},
					},
				],
			}

			powerChart.dispose()
			powerChart = echarts.init(document.getElementById('powerDataContainer'))
			powerChart.setOption(option)
		}
	</script>
</body>

</html>