|
|
@@ -0,0 +1,1112 @@
|
|
|
+<!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.szbydk.com/js/lib/jquery-1.8.0.min.js" type="text/javascript"></script>
|
|
|
+ <script src="http://static.szbydk.com/js/lib/jquery.query-2.1.7.js"></script>
|
|
|
+ <script src="http://static.szbydk.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>
|
