صفحهٔ اصلی گشت‌و‌گذار راهنما
ثبت نام ورود
VBDSM
/
UI
2
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

Add 完成大屏

YueYunyun 2 سال پیش
والد
6ccb927f0a
کامیت
89f563dae5
3فایلهای تغییر یافته به همراه952 افزوده شده و 136 حذف شده
نمای یکپارچه نمایش آمار تفاوت ها
  1. 829 44
      VbdsmUI_V2.1.1/src/pc/powerservice/bigScreen/01.html
  2. 31 0
      VbdsmUI_V2.1.1/src/pc/powerservice/bigScreen/js/echarts.js
  3. 92 92
      VbdsmUI_V2.1.1/src/pc/powerservice/powerMgnt/js/index.js

+ 829 - 44
VbdsmUI_V2.1.1/src/pc/powerservice/bigScreen/01.html
مشاهده فایل 

@@ -178,12 +178,148 @@
 
 				height: calc(100% + 22px);
 
 				height: calc(100% + 22px);
 
 			}
 
 			}
 
 		</style>
 
 		</style>
 
+		<style>
 
+			.amap-marker-label {
 
+				border: none;
 
+				background: transparent;
 
+				color: #eee;
 
+			}
 
+			.infoBox-content {
 
+				padding: 10px;
 
+			}
 
+			.infoBox-content .text {
 
+				color: #ddd;
 
+				display: flex;
 
+			}
 
+			.infoBox-content .text span {
 
+				width: 100%;
 
+			}
 
+			.infoBox-content .splite {
 
+				margin: 10px 0;
 
+				height: 0;
 
+				width: 100%;
 
+				border-top: 1px dashed #666;
 
+			}
 
+		</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: #d5d5d7;
 
+				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: #05224d;
 
+				font-size: 30px;
 
+				color: #d5d5d7;
 
+				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, #00fdff 0, #016dc0 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: #d5d5d7;
 
+				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: #fff;
 
+				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: #aaa;
 
+			}
 
+			.log-box .log .info {
 
+				color: #ddd;
 
+			}
 
+		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 		<div class="main flex-column">
 
 		<div class="main flex-column">
 
 			<div class="d-flex flex-column-auto header" style="height: 60px">
 
 			<div class="d-flex flex-column-auto header" style="height: 60px">
 
 				<div class="flex-row-auto" style="width: 20%">
 
 				<div class="flex-row-auto" style="width: 20%">
 
-					<span class="time" id="time">
 
+					<span class="time" id="time" style="display: none">
 
 						<span class="h"></span>
 
 						<span class="h"></span>
 
 						:
 
 						:
 
 						<span class="m"></span>
 
 						<span class="m"></span>
 
@@ -198,7 +334,7 @@
 
 					<div class="title">电力运维平台</div>
 
 					<div class="title">电力运维平台</div>
 
 				</div>
 
 				</div>
 
 				<div class="flex-row-auto" style="width: 20%">
 
 				<div class="flex-row-auto" style="width: 20%">
 
-					<span class="date" id="date">
 
+					<span class="date" id="date" style="display: none">
 
 						<span class="w"></span>
 
 						<span class="w"></span>
 
 						<span class="d"></span>
 
 						<span class="d"></span>
 
 					</span>
 
 					</span>
 
@@ -219,29 +355,95 @@
 
 					</div>
 
 					</div>
 
 				</div>
 
 				</div>
 
 				<div class="box margin-x flex-column flex-row-auto" style="width: 30%">
 
 				<div class="box margin-x flex-column flex-row-auto" style="width: 30%">
 
-					<div class="box flex-column-auto mb" style="height: 70%">
 
+					<div class="box flex-column-auto mb" style="height: 650px">
 
 						<div class="box-card">
 
 						<div class="box-card">
 
 							<div class="box_header">
 
 							<div class="box_header">
 
-								<div class="title">全局概览</div>
 
+								<div class="title">数据监测</div>
 
 								<div class="svg-box">
 
 								<div class="svg-box">
 
 									<img src="./images/dec/1.svg" alt="" />
 
 									<img src="./images/dec/1.svg" alt="" />
 
 								</div>
 
 								</div>
 
 							</div>
 
 							</div>
 
-							<div class="box_body" style="padding: 0; overflow: hidden">
 
-								<div class="map-container" id="map-container"></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>
 
 					</div>
 
 					</div>
 
-					<div class="box flex-column-fluid mt">
 
-						<div class="box-card">
 
+					<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="box_header">
 
-								<div class="title">全局概览</div>
 
+								<div class="title">告警记录</div>
 
 								<div class="svg-box">
 
 								<div class="svg-box">
 
 									<img src="./images/dec/1.svg" alt="" />
 
 									<img src="./images/dec/1.svg" alt="" />
 
 								</div>
 
 								</div>
 
 							</div>
 
 							</div>
 
-							<div class="box_body" style="padding: 0; overflow: hidden">
 
-								<div class="map-container" id="map-container"></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: 270px; overflow-y: auto"></div>
 
 							</div>
 
 							</div>
 
 						</div>
 
 						</div>
 
 					</div>
 
 					</div>
 
@@ -249,16 +451,52 @@
 
 				<!-- <div class="box margin flex-column flex-row-auto" style="width: 20%"></div> -->
 
 				<!-- <div class="box margin flex-column flex-row-auto" style="width: 20%"></div> -->
 
 			</div>
 
 			</div>
 
 		</div>
 
 		</div>
 
-		<script src="http://static.shvber.com/js/lib/jquery-1.8.0.min.js" type="text/javascript"></script>
 
+		<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/lib/jquery.query-2.1.7.js"></script>
 
 		<script src="http://static.vbdsm.com/js/util.js" type="text/javascript"></script>
 
 		<script src="http://static.vbdsm.com/js/util.js" type="text/javascript"></script>
 
+		<script src="./js/echarts.js"></script>
 
 
 
 		<script>
 
 		<script>
 
-			var cid = $.query.get('auth_cid')
 
+			const cid = $.query.get('auth_cid')
 
 			$('body').append('<script src="/system/lang/desktop/config.json?script=1&auth_cid=' + cid + '"><\/script>')
 
 			$('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
 
 			//var host = jQuery.parseJSON(AUTH.site.config).platform['01200009'] + '.' + AUTH.site.domain
 
-			//console.log(host)
 
+			//console.log(AUTH)
 
+			let warnInfoList = []
 
+			let isService = 0,
 
+				curCompanyId = ''
 
+			$(function () {
 
+				initCurrentDateTime()
 
+				initMonitor()
 
+			})
 
+			ajax({
 
+				url: '/web/sys/altips/getWarnInfoList.json',
 
+				type: 'post',
 
+				dataType: 'json',
 
+				success: function (res) {
 
+					warnInfoList = res.data
 
+				},
 
+			})
 
+			function initCurrentDateTime() {
 
+				setInterval(() => {
 
+					var date = new Date()
 
+					var d = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`,
 
+						w = `星期${'日一二三四五六'.charAt(date.getDay())}`,
 
+						h = (date.getHours() + '').padStart(2, '0'),
 
+						m = (date.getMinutes() + '').padStart(2, '0'),
 
+						s = (date.getSeconds() + '').padStart(2, '0')
 
+					$('#date .w').html(w)
 
+					$('#date .d').html(d)
 
+					$('#time .h').html(h)
 
+					$('#time .m').html(m)
 
+					$('#time .s').html(s)
 
+					$('#time').show()
 
+					$('#date').show()
 
+				}, 1000)
 
+			}
 
+		</script>
 
 
 
+		<script id="map">
 
+			let map
 
 			window._AMapSecurityConfig = {
 
 			window._AMapSecurityConfig = {
 
 				securityJsCode: 'b815cb3bb6aa8516fcfe8c506abe9da2',
 
 				securityJsCode: 'b815cb3bb6aa8516fcfe8c506abe9da2',
 
 			}
 
 			}
 
@@ -297,54 +535,601 @@
 
 					_map.addControl(overView)
 
 					_map.addControl(overView)
 
 					overView.hide()
 
 					overView.hide()
 
 					_map.setMapStyle('amap://styles/1f1485e5beb2382bd068587d161155a2')
 
 					_map.setMapStyle('amap://styles/1f1485e5beb2382bd068587d161155a2')
 
+					map = _map
 
+					getCompanyList()
 
 				})
 
 				})
 
 				.catch((e) => {
 
 				.catch((e) => {
 
 					console.error(e) //加载错误提示
 
 					console.error(e) //加载错误提示
 
 				})
 
 				})
 
-			console.log('---', AUTH.site)
 
 			let pageNumber = 1,
 
 			let pageNumber = 1,
 
 				pageSize = 10
 
 				pageSize = 10
 
-
 
-			function getCompany() {
 
-				var url = `/web/powerservice/getList.json`
 
-				console.log(url)
 
+			let isInitMap = false
 
+			let companyData = [],
 
+				mapMarkers = []
 
+			function getCompanyList() {
 
 				ajax({
 
 				ajax({
 
-					url: url,
 
+					url: `/web/screen/getCompanyList.json`,
 
 					type: 'post',
 
 					type: 'post',
 
 					dataType: 'json',
 
 					dataType: 'json',
 
 					data: {
 
 					data: {
 
-						name: '',
 
 						pageNo: pageNumber,
 
 						pageNo: pageNumber,
 
 						pageSize: pageSize,
 
 						pageSize: pageSize,
 
-						province: '',
 
-						city: '',
 
-						district: '',
 
 					},
 
 					},
 
-					success: function (data) {
 
-						console.log(data)
 
+					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:1px 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(0,0,0,.5);">
 
+							<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>
 
-		<script>
 
-			$(function () {
 
-				initCurrentDateTime()
 
-				getCompany()
 
-			})
 
-			function initCurrentDateTime() {
 
+
 
+		<script id="Monitor">
 
+			function initMonitor() {
 
+				getCompanyMonitor()
 
 				setInterval(() => {
 
 				setInterval(() => {
 
-					var date = new Date()
 
-					var d = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`,
 
-						w = `星期${'日一二三四五六'.charAt(date.getDay())}`,
 
-						h = (date.getHours() + '').padStart(2, '0'),
 
-						m = (date.getMinutes() + '').padStart(2, '0'),
 
-						s = (date.getSeconds() + '').padStart(2, '0')
 
-					$('#date .w').html(w)
 
-					$('#date .d').html(d)
 
-					$('#time .h').html(h)
 
-					$('#time .m').html(m)
 
-					$('#time .s').html(s)
 
-				}, 1000)
 
+					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: '#d5d5d7',
 
+						},
 
+					},
 
+					tooltip: {
 
+						show: false,
 
+						trigger: 'item',
 
+					},
 
+					legend: {
 
+						orient: 'vertical',
 
+						right: '0',
 
+						bottom: '10',
 
+						textStyle: {
 
+							color: '#ccc',
 
+						},
 
+						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: '#d5d5d7',
 
+						},
 
+					},
 
+					legend: {
 
+						show: true,
 
+						bottom: 10,
 
+						textStyle: {
 
+							fontSize: 12,
 
+							color: '#d5d5d7',
 
+						},
 
+					},
 
+					xAxis: {
 
+						//name: 'timestamp',
 
+						type: 'category',
 
+						interval: 8,
 
+						axisLine: {
 
+							lineStyle: {
 
+								color: '#d5d5d7',
 
+								width: 1,
 
+							},
 
+						},
 
+						axisLabel: {
 
+							textStyle: {
 
+								fontSize: 12,
 
+								color: '#d5d5d7',
 
+							},
 
+						},
 
+					},
 
+					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: '#d5d5d7',
 
+								width: 1,
 
+							},
 
+						},
 
+						axisLabel: {
 
+							textStyle: {
 
+								fontSize: 12,
 
+								color: '#d5d5d7',
 
+							},
 
+						},
 
+						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>
 
 		</script>
 
 	</body>
 
 	</body>

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 31 - 0
VbdsmUI_V2.1.1/src/pc/powerservice/bigScreen/js/echarts.js


+ 92 - 92
VbdsmUI_V2.1.1/src/pc/powerservice/powerMgnt/js/index.js
مشاهده فایل 

@@ -7,117 +7,117 @@ $(function () {
 
  */
 
  */
 
 function loadCompanyPowerMgnt() {
 
 function loadCompanyPowerMgnt() {
 
 	ajax({
 
 	ajax({
 
-		url: "/web/powerMgnt/getCompanyPowerMgnt.json",
 
-		type: "POST",
 
-		dataType: "JSON",
 
+		url: '/web/powerMgnt/getCompanyPowerMgnt.json',
 
+		type: 'POST',
 
+		dataType: 'JSON',
 
 		success: function (json) {
 
 		success: function (json) {
 
 			//基本信息
 
 			//基本信息
 
 			var baseInfo = json.data.baseInfo
 
 			var baseInfo = json.data.baseInfo
 
-			$("#transformer").html(baseInfo.zbsl == null ? "-" : baseInfo.zbsl + "台")
 
-			$("#applyLoad").html(baseInfo.applyLoad == null ? "-" : baseInfo.applyLoad + " kVA")
 
-			$("#getPeMsg").html(baseInfo.jcrl == null ? "-" : baseInfo.jcrl + " kVA")
 
-			$("#jbdj").html(baseInfo.jbdj == null ? "-" : baseInfo.jbdj + " 元/kVA")
 
+			$('#transformer').html(baseInfo.zbsl == null ? '-' : baseInfo.zbsl + '台')
 
+			$('#applyLoad').html(baseInfo.applyLoad == null ? '-' : baseInfo.applyLoad + ' kVA')
 
+			$('#getPeMsg').html(baseInfo.jcrl == null ? '-' : baseInfo.jcrl + ' kVA')
 
+			$('#jbdj').html(baseInfo.jbdj == null ? '-' : baseInfo.jbdj + ' 元/kVA')
 
 			//1：容量、2：需量、3：单一电价
 
 			//1：容量、2：需量、3：单一电价
 
-			var jffs = "-"
 
+			var jffs = '-'
 
 			if (1 == baseInfo.jffs) {
 
 			if (1 == baseInfo.jffs) {
 
-				jffs = "容量"
 
+				jffs = '容量'
 
 			}
 
 			}
 
 			if (2 == baseInfo.jffs) {
 
 			if (2 == baseInfo.jffs) {
 
-				jffs = "需量"
 
+				jffs = '需量'
 
 			}
 
 			}
 
 			if (3 == baseInfo.jffs) {
 
 			if (3 == baseInfo.jffs) {
 
-				jffs = "单一电价"
 
+				jffs = '单一电价'
 
 			}
 
 			}
 
-			$("#jffs").html(jffs)
 
-			$("#address").html(baseInfo.address == null ? "-" : baseInfo.address)
 
+			$('#jffs').html(jffs)
 
+			$('#address').html(baseInfo.address == null ? '-' : baseInfo.address)
 
 
 
 			//负荷
 
 			//负荷
 
 			var todayCompanyOnline = {}
 
 			var todayCompanyOnline = {}
 
 			var yesterdayCompanyOnline = {}
 
 			var yesterdayCompanyOnline = {}
 
-			todayCompanyOnline["name"] = "今日"
 
-			yesterdayCompanyOnline["name"] = "昨日"
 
-			todayCompanyOnline["data"] = {}
 
-			yesterdayCompanyOnline["data"] = {}
 
+			todayCompanyOnline['name'] = '今日'
 
+			yesterdayCompanyOnline['name'] = '昨日'
 
+			todayCompanyOnline['data'] = {}
 
+			yesterdayCompanyOnline['data'] = {}
 
 			var companyOnlineChatData = json.data.companyOnlineChatData
 
 			var companyOnlineChatData = json.data.companyOnlineChatData
 
-			transform(companyOnlineChatData["今日"])
 
-			transform(companyOnlineChatData["昨日"])
 
-			todayCompanyOnline["data"] = companyOnlineChatData["今日"]
 
-			yesterdayCompanyOnline["data"] = companyOnlineChatData["昨日"]
 
-			chartFHLoad("showchartFH", [todayCompanyOnline, yesterdayCompanyOnline], { title: { text: "单位:(kW)" } })
 
+			transform(companyOnlineChatData['今日'])
 
+			transform(companyOnlineChatData['昨日'])
 
+			todayCompanyOnline['data'] = companyOnlineChatData['今日']
 
+			yesterdayCompanyOnline['data'] = companyOnlineChatData['昨日']
 
+			chartFHLoad('showchartFH', [todayCompanyOnline, yesterdayCompanyOnline], { title: { text: '单位:(kW)' } })
 
 
 
 			//电量
 
 			//电量
 
 			var currCompanyFgp = {}
 
 			var currCompanyFgp = {}
 
 			var afterCompanyFgp = {}
 
 			var afterCompanyFgp = {}
 
 			var afterCurrYearCompanyFgp = {}
 
 			var afterCurrYearCompanyFgp = {}
 
-			currCompanyFgp["name"] = "本月"
 
-			afterCompanyFgp["name"] = "上月"
 
-			afterCurrYearCompanyFgp["name"] = "去年同期"
 
-			currCompanyFgp["data"] = {}
 
-			afterCompanyFgp["data"] = {}
 
-			afterCurrYearCompanyFgp["data"] = {}
 
+			currCompanyFgp['name'] = '本月'
 
+			afterCompanyFgp['name'] = '上月'
 
+			afterCurrYearCompanyFgp['name'] = '去年同期'
 
+			currCompanyFgp['data'] = {}
 
+			afterCompanyFgp['data'] = {}
 
+			afterCurrYearCompanyFgp['data'] = {}
 
 			var companyFgpChatData = json.data.companyFgpChatData
 
 			var companyFgpChatData = json.data.companyFgpChatData
 
-			transform(companyFgpChatData["本月"])
 
-			transform(companyFgpChatData["上月"])
 
-			transform(companyFgpChatData["去年同期"])
 
-			currCompanyFgp["data"] = companyFgpChatData["本月"]
 
-			afterCompanyFgp["data"] = companyFgpChatData["上月"]
 
-			afterCurrYearCompanyFgp["data"] = companyFgpChatData["去年同期"]
 
-			chartLoad("showChartDL", [currCompanyFgp, afterCompanyFgp, afterCurrYearCompanyFgp], "单位:(千瓦时)")
 
+			transform(companyFgpChatData['本月'])
 
+			transform(companyFgpChatData['上月'])
 
+			transform(companyFgpChatData['去年同期'])
 
+			currCompanyFgp['data'] = companyFgpChatData['本月']
 
+			afterCompanyFgp['data'] = companyFgpChatData['上月']
 
+			afterCurrYearCompanyFgp['data'] = companyFgpChatData['去年同期']
 
+			chartLoad('showChartDL', [currCompanyFgp, afterCompanyFgp, afterCurrYearCompanyFgp], '单位:(千瓦时)')
 
 			var companyFgpTabData = json.data.companyFgpTabData
 
 			var companyFgpTabData = json.data.companyFgpTabData
 
-			dataGridLoad("showDataGridDL", companyFgpTabData, "千瓦时")
 
+			dataGridLoad('showDataGridDL', companyFgpTabData, '千瓦时')
 
 
 
 			//电费
 
 			//电费
 
 			var currCompanyFgpPrice = {}
 
 			var currCompanyFgpPrice = {}
 
 			var afterCompanyFgpPrice = {}
 
 			var afterCompanyFgpPrice = {}
 
 			var afterCurrYearCompanyFgpPrice = {}
 
 			var afterCurrYearCompanyFgpPrice = {}
 
-			currCompanyFgpPrice["name"] = "本月"
 
-			afterCompanyFgpPrice["name"] = "上月"
 
-			afterCurrYearCompanyFgpPrice["name"] = "去年同期"
 
-			currCompanyFgpPrice["data"] = {}
 
-			afterCompanyFgpPrice["data"] = {}
 
-			afterCurrYearCompanyFgpPrice["data"] = {}
 
+			currCompanyFgpPrice['name'] = '本月'
 
+			afterCompanyFgpPrice['name'] = '上月'
 
+			afterCurrYearCompanyFgpPrice['name'] = '去年同期'
 
+			currCompanyFgpPrice['data'] = {}
 
+			afterCompanyFgpPrice['data'] = {}
 
+			afterCurrYearCompanyFgpPrice['data'] = {}
 
 			var companyFgpPriceChatData = json.data.companyFgpPriceChatData
 
 			var companyFgpPriceChatData = json.data.companyFgpPriceChatData
 
-			transform(companyFgpPriceChatData["本月"])
 
-			transform(companyFgpPriceChatData["上月"])
 
-			transform(companyFgpPriceChatData["去年同期"])
 
-			currCompanyFgpPrice["data"] = companyFgpPriceChatData["本月"]
 
-			afterCompanyFgpPrice["data"] = companyFgpPriceChatData["上月"]
 
-			afterCurrYearCompanyFgpPrice["data"] = companyFgpPriceChatData["去年同期"]
 
-			chartLoad("showChartDF", [currCompanyFgpPrice, afterCompanyFgpPrice, afterCurrYearCompanyFgpPrice], "单位:(元)")
 
+			transform(companyFgpPriceChatData['本月'])
 
+			transform(companyFgpPriceChatData['上月'])
 
+			transform(companyFgpPriceChatData['去年同期'])
 
+			currCompanyFgpPrice['data'] = companyFgpPriceChatData['本月']
 
+			afterCompanyFgpPrice['data'] = companyFgpPriceChatData['上月']
 
+			afterCurrYearCompanyFgpPrice['data'] = companyFgpPriceChatData['去年同期']
 
+			chartLoad('showChartDF', [currCompanyFgpPrice, afterCompanyFgpPrice, afterCurrYearCompanyFgpPrice], '单位:(元)')
 
 			var companyFgpPriceTabData = json.data.companyFgpPriceTabData
 
 			var companyFgpPriceTabData = json.data.companyFgpPriceTabData
 
-			dataGridLoad("showDataGridDF", companyFgpPriceTabData, "元")
 
+			dataGridLoad('showDataGridDF', companyFgpPriceTabData, '元')
 
 		},
 
 		},
 
 	})
 
 	})
 
 }
 
 }
 
 
 
 //负荷线图加载
 
 //负荷线图加载
 
 function chartFHLoad(project, series, yAxis) {
 
 function chartFHLoad(project, series, yAxis) {
 
-	$("#" + project).mask("数据加载中...")
 
-	$("#" + project).highcharts({
 
+	$('#' + project).mask('数据加载中...')
 
+	$('#' + project).highcharts({
 
 		title: {
 
 		title: {
 
-			text: "",
 
+			text: '',
 
 			x: -20,
 
 			x: -20,
 
 		},
 
 		},
 
 		xAxis: {
 
 		xAxis: {
 
-			type: "datetime",
 
+			type: 'datetime',
 
 			tickInterval: 3 * 3600 * 1000,
 
 			tickInterval: 3 * 3600 * 1000,
 
 			gridLineWidth: 1, // 默认是0，即在图上没有纵轴间隔线
 
 			gridLineWidth: 1, // 默认是0，即在图上没有纵轴间隔线
 
 			// 自定义x刻度上显示的时间格式，根据间隔大小，以下面预设的小时/分钟/日的格式来显示
 
 			// 自定义x刻度上显示的时间格式，根据间隔大小，以下面预设的小时/分钟/日的格式来显示
 
 			dateTimeLabelFormats: {
 
 			dateTimeLabelFormats: {
 
-				hour: "%H:%M",
 
-				day: "00:00",
 
+				hour: '%H:%M',
 
+				day: '00:00',
 
 			},
 
 			},
 
 		},
 
 		},
 
 		yAxis: yAxis,
 
 		yAxis: yAxis,
 
 		tooltip: {
 
 		tooltip: {
 
 			crosshairs: {
 
 			crosshairs: {
 
 				width: 1,
 
 				width: 1,
 
-				color: "gray",
 
+				color: 'gray',
 
 			},
 
 			},
 
 			headerFormat: '<span style="font-size: 10px">时间：{point.key}</span><br/>',
 
 			headerFormat: '<span style="font-size: 10px">时间：{point.key}</span><br/>',
 
 			pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y}</b><span/><br/>',
 
 			pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y}</b><span/><br/>',
 
 			valueDecimals: 2, // 数据值保留小数位数
 
 			valueDecimals: 2, // 数据值保留小数位数
 
-			xDateFormat: "%H:%M",
 
+			xDateFormat: '%H:%M',
 
 			shared: true,
 
 			shared: true,
 
 		},
 
 		},
 
 		legend: {
 
 		legend: {
 
@@ -127,7 +127,7 @@ function chartFHLoad(project, series, yAxis) {
 
 			column: {
 
 			column: {
 
 				dataLabels: {
 
 				dataLabels: {
 
 					enabled: false,
 
 					enabled: false,
 
-					color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || "white",
 
+					color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
 
 				},
 
 				},
 
 			},
 
 			},
 
 			series: {
 
 			series: {
 
@@ -136,28 +136,28 @@ function chartFHLoad(project, series, yAxis) {
 
 		},
 
 		},
 
 		series: series,
 
 		series: series,
 
 	})
 
 	})
 
-	$("#" + project).unmask()
 
+	$('#' + project).unmask()
 
 }
 
 }
 
 
 
 //电量、电费线图加载
 
 //电量、电费线图加载
 
 function chartLoad(project, series, yText) {
 
 function chartLoad(project, series, yText) {
 
-	$("#" + project).mask("数据加载中...")
 
-	$("#" + project).highcharts({
 
+	$('#' + project).mask('数据加载中...')
 
+	$('#' + project).highcharts({
 
 		title: {
 
 		title: {
 
-			text: "",
 
+			text: '',
 
 			x: -20,
 
 			x: -20,
 
 		},
 
 		},
 
 		xAxis: {
 
 		xAxis: {
 
-			type: "datetime",
 
+			type: 'datetime',
 
 			tickInterval: 48 * 3600 * 1000,
 
 			tickInterval: 48 * 3600 * 1000,
 
 			gridLineWidth: 1, // 默认是0，即在图上没有纵轴间隔线
 
 			gridLineWidth: 1, // 默认是0，即在图上没有纵轴间隔线
 
 			// 自定义x刻度上显示的时间格式，根据间隔大小，以下面预设的小时/分钟/日的格式来显示
 
 			// 自定义x刻度上显示的时间格式，根据间隔大小，以下面预设的小时/分钟/日的格式来显示
 
 			dateTimeLabelFormats: {
 
 			dateTimeLabelFormats: {
 
-				day: "%e",
 
+				day: '%e',
 
 			},
 
 			},
 
 		},
 
 		},
 
 		yAxis: {
 
 		yAxis: {
 
-			allowDecimals: "false", //控制数轴是否显示小数。
 
+			allowDecimals: 'false', //控制数轴是否显示小数。
 
 			min: 0, //控制数轴的最小值
 
 			min: 0, //控制数轴的最小值
 
 			title: {
 
 			title: {
 
 				text: yText,
 
 				text: yText,
 
@@ -166,12 +166,12 @@ function chartLoad(project, series, yText) {
 
 		tooltip: {
 
 		tooltip: {
 
 			crosshairs: {
 
 			crosshairs: {
 
 				width: 1,
 
 				width: 1,
 
-				color: "gray",
 
+				color: 'gray',
 
 			},
 
 			},
 
 			headerFormat: '<span style="font-size: 10px">时间：{point.key}</span><br/>',
 
 			headerFormat: '<span style="font-size: 10px">时间：{point.key}</span><br/>',
 
 			pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y}</b><span/><br/>',
 
 			pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y}</b><span/><br/>',
 
 			valueDecimals: 2, // 数据值保留小数位数
 
 			valueDecimals: 2, // 数据值保留小数位数
 
-			xDateFormat: "%d",
 
+			xDateFormat: '%d',
 
 			shared: true,
 
 			shared: true,
 
 		},
 
 		},
 
 		legend: {
 
 		legend: {
 
@@ -181,7 +181,7 @@ function chartLoad(project, series, yText) {
 
 			column: {
 
 			column: {
 
 				dataLabels: {
 
 				dataLabels: {
 
 					enabled: false,
 
 					enabled: false,
 
-					color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || "white",
 
+					color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
 
 				},
 
 				},
 
 			},
 
 			},
 
 			series: {
 
 			series: {
 
@@ -190,39 +190,39 @@ function chartLoad(project, series, yText) {
 
 		},
 
 		},
 
 		series: series,
 
 		series: series,
 
 	})
 
 	})
 
-	$("#" + project).unmask()
 
+	$('#' + project).unmask()
 
 }
 
 }
 
 
 
 //电量、电费表格加载
 
 //电量、电费表格加载
 
 function dataGridLoad(project, tabData, unit) {
 
 function dataGridLoad(project, tabData, unit) {
 
-	$("#" + project + "DIV").mask("数据加载中...")
 
-	$("#" + project).datagrid({
 
+	$('#' + project + 'DIV').mask('数据加载中...')
 
+	$('#' + project).datagrid({
 
 		columns: [
 
 		columns: [
 
 			[
 
 			[
 
-				{ field: "name", title: "类型(" + unit + ")", width: "25%", align: "left" },
 
+				{ field: 'name', title: '类型(' + unit + ')', width: '25%', align: 'left' },
 
 				{
 
 				{
 
-					field: "curr",
 
-					title: "本月",
 
-					width: "25%",
 
+					field: 'curr',
 
+					title: '本月',
 
+					width: '25%',
 
 					sortable: true,
 
 					sortable: true,
 
 					formatter: function (val, rowData, rowIndex) {
 
 					formatter: function (val, rowData, rowIndex) {
 
 						if (val != null) return val.toFixed(2)
 
 						if (val != null) return val.toFixed(2)
 
 					},
 
 					},
 
 				},
 
 				},
 
 				{
 
 				{
 
-					field: "after",
 
-					title: "上月",
 
-					width: "25%",
 
+					field: 'after',
 
+					title: '上月',
 
+					width: '25%',
 
 					sortable: true,
 
 					sortable: true,
 
 					formatter: function (val, rowData, rowIndex) {
 
 					formatter: function (val, rowData, rowIndex) {
 
 						if (val != null) return val.toFixed(2)
 
 						if (val != null) return val.toFixed(2)
 
 					},
 
 					},
 
 				},
 
 				},
 
 				{
 
 				{
 
-					field: "afterCurrYear",
 
-					title: "去年同期",
 
-					width: "25%",
 
-					align: "left",
 
+					field: 'afterCurrYear',
 
+					title: '去年同期',
 
+					width: '25%',
 
+					align: 'left',
 
 					sortable: true,
 
 					sortable: true,
 
 					formatter: function (val, rowData, rowIndex) {
 
 					formatter: function (val, rowData, rowIndex) {
 
 						if (val != null) return val.toFixed(2)
 
 						if (val != null) return val.toFixed(2)
 
@@ -238,24 +238,24 @@ function dataGridLoad(project, tabData, unit) {
 
 			setGridRowHeight()
 
 			setGridRowHeight()
 
 		},
 
 		},
 
 	})
 
 	})
 
-	$("#" + project + "DIV").unmask()
 
+	$('#' + project + 'DIV').unmask()
 
 }
 
 }
 
 
 
 function setGridRowHeight() {
 
 function setGridRowHeight() {
 
-	var rows = $("#showDataGridDLDiv").find(".datagrid-row,.datagrid-header-row")
 
-	var avgHeight = $("#showChartDL").height() / rows.length
 
+	var rows = $('#showDataGridDLDiv').find('.datagrid-row,.datagrid-header-row')
 
+	var avgHeight = $('#showChartDL').height() / rows.length
 
 	rows.height(avgHeight)
 
 	rows.height(avgHeight)
 
-	$("#showDataGridDLDiv").find(".datagrid-header-row").parents(".datagrid-header").height(avgHeight)
 
-	var rows2 = $("#showDataGridDFDiv").find(".datagrid-row,.datagrid-header-row")
 
-	var avgHeight2 = $("#showChartDF").height() / rows.length
 
+	$('#showDataGridDLDiv').find('.datagrid-header-row').parents('.datagrid-header').height(avgHeight)
 
+	var rows2 = $('#showDataGridDFDiv').find('.datagrid-row,.datagrid-header-row')
 
+	var avgHeight2 = $('#showChartDF').height() / rows.length
 
 	rows2.height(avgHeight2)
 
 	rows2.height(avgHeight2)
 
-	$("#showDataGridDFDiv").find(".datagrid-header-row").parents(".datagrid-header").height(avgHeight2)
 
+	$('#showDataGridDFDiv').find('.datagrid-header-row').parents('.datagrid-header').height(avgHeight2)
 
 }
 
 }
 
 function transform(data) {
 
 function transform(data) {
 
 	if (data) {
 
 	if (data) {
 
 		$.each(data, function (i, n) {
 
 		$.each(data, function (i, n) {
 
-			if (n["y"] == -9999) {
 
-				n["y"] = null
 
+			if (n['y'] == -9999) {
 
+				n['y'] = null
 
 			}
 
 			}
 
 		})
 
 		})
 
 	}
 
 	}

برخی فایل ها در این مقایسه diff نمایش داده نمی شوند زیرا تعداد فایل ها بسیار زیاد است