代码拉取完成，页面将自动刷新
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--当前页面的三要素-->
<title>大屏展示页面</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type='text/css' href="./css/index.css"><!-- 引入css代码文件 -->
<link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="./css/normalize.css">
<link rel="stylesheet" type="text/css" href="./css/htmleaf-demo.css">
<style>
.wrap{
font-family: Roboto;
text-align: center;
}
.tank{
margin:0 50px;
display: inline-block;
}
.middle .m_center .imgicon.img_normal.shenzhen {/*广东深圳 #normal1 #normal4 #normal16 #normal21*/
left:60%;
top:78%;
z-index:30;
}
.middle .m_center .imgicon.img_normal.zhongshan {/*广东中山 #normal2 #normal3 */
left:58.3%;
top:78%;
z-index:40;
}
.middle .m_center .imgicon.img_normal.zhuhai {/*广东珠海 #normal5 #normal6 ##normal9 ##normal20 ##normal22 */
left:58.5%;
top:80%;
z-index:50;
}
.middle .m_center .imgicon.img_normal.yunnan {/*云南楚雄 #normal7 #normal13 ##normal14 */
left:36%;
top:70%;
}
.middle .m_center .imgicon.img_normal.qiaotou {/*广东东莞桥头 #normal8 #normal9 #normal10 #normal11 */
left:58.9%;
top:76%;
z-index:20;
}
.middle .m_center .imgicon.img_normal.guangzhou {/*广东广州 #normal12 #normal17 #normal18 */
left:57.5%;
top:76%;
z-index:11;
}
.middle .m_center .imgicon.img_normal.shanwei {/* 广东汕尾 #normal15 */
left:63%;
top:78.5%;
z-index:10;
}
.middle .m_center .imgicon.img_normal.qingyuan {/* 广东清远 */
left:57%;
top:75%;
z-index:10;
}
.middle .m_center .imgicon.img_normal.longyan {/* 福建龙岩 */
left:65.5%;
top:73.5%;
z-index:10;
}
.middle .m_center .imgicon.img_normal.yanan { /* 陕西延安 */
left:56%;
top:44.5%;
z-index:10;
}
.middle .m_center .imgicon.img_normal.yangjiang {/* 广东阳江 */
left:55.5%;
top:80%;
z-index:10;
}
.middle .m_center .imgicon.img_normal.heyuan {/* 广东河源 */
left:61%;
top:76%;
z-index:10;
}
.middle .m_center .imgicon.img_normal.beijing {/* 北京 */
left:67.5%;
top:37.5%;
z-index:10;
}
.middle .m_center .imgicon.img_normal.sichuan {/* 四川乐山 */
left:42%;
top:59%;
z-index:10;
}
.middle .m_center .imgicon.img_normal.shanxi {/* 山西黎光 */
left:58.5%;
top:45.5%;
z-index:10;
}
.middle .m_center .imgicon.img_normal.jinan {/* 山东济南 */
left:67.5%;
top:45.5%;
z-index:10;
}
.middle .m_center .imgicon.img_normal.kelamayi {/* 新疆 克拉玛依 */
left:29.5%;
top:14.5%;
z-index:10;
}
.middle .m_center .imgicon.img_normal.yixian {/* 河北 易县 */
left:65.5%;
top:39.5%;
z-index:10;
}
.middle .m_center .imgicon.img_normal.shanghai {/* 上海 */
left:74%;
top:59%;
z-index:10;
}
.middle .m_center .imgicon.img_normal.fuzhou {/* 福建福州 */
left:69.5%;
top:71.5%;
z-index:10;
}
.middle .m_center .imgicon.img_normal.yulin {/* 广西玉林 */
left:52.5%;
top:77.5%;
z-index:10;
}
.middle .m_center .imgicon.img_normal.yecheng {/* 新疆叶城 */
left:10.5%;
top:27.5%;
z-index:10;
}
.layui-layer.layui-layer-rim{
background-color: rgba(32,57,88,0.9);
/* border:1px solid #3D507B; */
border:none !important;
}
/* 弹框的标题行 */
.layui-layer-rim .layui-layer-title{
background-color: rgba(32,57,88,0.9);
font-family: MicrosoftYaHei;
font-size: 14px;
color: #FFFFFF;
letter-spacing: 1.67px;
font-weight: 400;
border-bottom:none;
border-radius:5px 5px 0 0;
overflow:hidden;
}
/* 弹框的退出叉叉 */
.layui-layer-rim .layui-layer-setwin .layui-layer-ico{
background: url('./images/close.svg') no-repeat center/cover;
width:12px;
height:12px;
}
/* 弹框的主要文本部分 */
.layui-layer-rim .layui-layer-content{
text-align: center;
padding:10px 10px 20px;
background-color: rgba(32,57,88,0.9);
border-radius:0 0 5px 5px;
}
.layui-layer-rim .layui-layer-content .layui-btn-normal{
border: 1px solid #3D8BFF;
border-radius: 15px;
background:transparent;
color:#3D8BFF;
}
.layui-layer-rim .layui-layer-content .layui-btn-danger{
border: 1px solid #E61C46;
border-radius: 15px;
background:transparent;
color:#E61C46;
}
</style>
</head>
<body id='body'>
<div id="container">
<div class="top">
<div class="top_wrap">
<div class="top_content">
<img class="top_img" src="./images/logo.svg" alt="" width="100%">
<span class="top_span">智能运维云平台</span>
</div>
<div class="top_bg">
<div class="com_title">
xxxxxxx科技有限公司
</div>
<div class="show_time" id="realTime">
</div>
</div>
</div>
</div>
<div class="middle">
<div class="m_left">
<div class="l_top leftdiv">
<div class="l_title first">
<img class="tit_img" src="./images/ssgl.svg" alt="">
<span class="tit_content">实时功率 / 发电量</span>
<span class="tit_encontent">Real-time Power/Power Generation</span>
</div>
<div class="l_content t_content">
<div class="t_tit ssgl">
<p>实时功率</p>
<div class="c_number">
<div><span>0</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>1</span></div>
<div><span>.</span></div>
<div><span>0</span></div>
<div><span>7</span></div>
<div><span>kW</span></div>
</div>
</div>
<div class="t_tit drfd">
<p>当日发电量</p>
<div class="c_number ">
<div><span>0</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>1</span></div>
<div><span>.</span></div>
<div><span>0</span></div>
<div><span>7</span></div>
<div><span id="drfddw">kWh</span></div>
</div>
</div>
<div class="t_tit zfd">
<p>总发电量</p>
<div class="c_number">
<div><span>0</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>1</span></div>
<div><span>.</span></div>
<div><span>0</span></div>
<div><span>7</span></div>
<div><span>MWh</span></div>
</div>
</div>
</div>
</div>
<!-- <div class="l_middle leftdiv">
<div class="l_title">
<img class="tit_img" src="./images/fadl.png" alt="">
<span class="tit_content">发电量</span>
<span class="tit_encontent">Power Generation</span>
</div>
<div class="l_content m_content">
<div class="c_content">
<div class="theday">
<p>当日发电量</p>
<div class="daydata">0441.13</div>
<span class="danfei">万度</span>
</div>
<div class="theall">
<p>总发电量</p>
<div class="alldata">0441.13</div>
<span class="danfei">万度</span class="danwei">
</div>
</div>
</div>
</div> -->
<div class="l_bottom leftdiv">
<div class="l_title">
<img class="tit_img" src="./images/jnjp.svg" alt="">
<span class="tit_content">节能减排</span>
<span class="tit_encontent">Emission Reduction</span>
</div>
<div class="l_content b_content">
<div class="c_content">
<div class="biaozhun">
<img src="./images/bzm.svg" alt="">
<p>累计节约柴油</p>
<span class="dun">吨</span>
<div class="bzdata">300181.754</div>
</div>
<div class="eyht">
<img src="./images/eyht.svg" alt="">
<p>累计减少碳排放</p>
<span class="dun">吨</span>
<div class="eydata">748203.021</div>
</div>
</div>
</div>
</div>
</div>
<div class="m_center" id="centerid">
<img class="themap" src="./images/map.svg" alt="">
<div class="maptips">
<div class="tipsline">
<span class="normalrun"></span>
<p>正常运行</p>
</div>
<div class="tipsline">
<span class="wranrun"></span>
<p>告警运行</p>
</div>
<div class="tipsline">
<span class="norun"></span>
<p>已完成</p>
</div>
</div>
<img class="img_normal imgicon shenzhen" data-name="shenzhen" src="./images/normal.svg" alt="深圳" title="深圳">
<img class="img_normal imgicon zhongshan" data-name="zhongshan" src="./images/normal.svg" alt="中山" title="中山">
<img class="img_normal imgicon zhuhai" data-name="zhuhai" src="./images/normal.svg" alt="珠海" title="珠海">
<img class="img_normal imgicon yunnan" data-name="yunnan" src="./images/normal.svg" alt="云南楚雄" title="云南楚雄">
<img class="img_normal imgicon qiaotou" data-name="qiaotou" src="./images/normal.svg" alt="广东东莞桥头" title="广东东莞桥头">
<img class="img_normal imgicon guangzhou" data-name="guangzhou" src="./images/normal.svg" alt="广东广州" title="广东广州">
<img class="img_normal imgicon shanwei" data-name="shanwei" src="./images/normal.svg" alt="广东汕尾" title="广东汕尾">
<img class="img_normal imgicon qingyuan" data-name="qingyuan" src="./images/normal.svg" alt="广东清远" title="广东清远">
<!-- <img class="img_normal imgicon xian" data-name="xian" src="./images/normal.svg" alt="西安" title="西安"> -->
<img class="img_normal imgicon yanan" data-name="yanan" src="./images/normal.svg" alt="陕西延安" title="陕西延安">
<img class="img_normal imgicon yangjiang" data-name="yangjiang" src="./images/normal.svg" alt="广东阳江" title="广东阳江">
<img class="img_normal imgicon heyuan" data-name="heyuan" src="./images/normal.svg" alt="广东河源" title="广东河源">
<img class="img_normal imgicon beijing" data-name="beijing" src="./images/normal.svg" alt="北京" title="北京">
<img class="img_normal imgicon sichuan" data-name="sichuan" src="./images/normal.svg" alt="四川乐山" title="四川乐山">
<img class="img_normal imgicon shanxi" data-name="shanxi" src="./images/normal.svg" alt="山西黎光" title="山西黎光">
<img class="img_normal imgicon jinan" data-name="jinan" src="./images/normal.svg" alt="山东济南" title="山东济南">
<img class="img_normal imgicon kelamayi" data-name="kelamayi" src="./images/normal.svg" alt="新疆克拉玛依" title="新疆克拉玛依">
<img class="img_normal imgicon yixian" data-name="yixian" src="./images/normal.svg" alt="河北易县" title="河北易县">
<img class="img_normal imgicon shanghai" data-name="shanghai" src="./images/normal.svg" alt="上海" title="上海">
<img class="img_normal imgicon fuzhou" data-name="fuzhou" src="./images/normal.svg" alt="福建福州" title="福建福州">
<img class="img_normal imgicon yulin" data-name="yulin" src="./images/normal.svg" alt="广西玉林" title="广西玉林">
<img class="img_normal imgicon yecheng" data-name="yecheng" src="./images/normal.svg" alt="新疆叶城" title="新疆叶城">
</div>
<div class="m_right">
<div class="r_top rightdiv">
<div class="l_title">
<img class="tit_img" src="./images/dztj.svg" alt="">
<span class="tit_content">电站统计</span>
<span class="tit_encontent">Costruction</span>
</div>
<div class="l_content t_content">
<div class="dzsl">
<img src="./images/dzsl.svg" alt="">
<p class="title">电站数量</p>
<div class="data" id='projectnum'></div>
<span class="danwei">座</span>
</div>
<div class="cnrl">
<img src="./images/cnrl.svg" alt="">
<p class="title">储能容量</p>
<div class="data" id="cnrl"></div>
<span class="danwei">kWh</span>
</div>
<div class="fdjrl">
<img src="./images/power.svg" alt="">
<p class="title">发电机容量</p>
<div class="data" id="fdjl"></div>
<span class="danwei">kW</span>
</div>
<!-- <div class="xnyrl">
<img src="./images/newenerge.svg" alt="">
<p class="title">新能源容量</p>
<div class="data">98.23</div>
<span class="danwei">kW</span>
</div> -->
</div>
</div>
<div class="r_bottom rightdiv">
<div class="l_title">
<img class="tit_img" src="./images/jjxy.svg" alt="">
<span class="tit_content">经济效益</span>
<span class="tit_encontent">Economic Benefit</span>
</div>
<div class="l_content b_content">
<div class="c_left div_content">
<div class="jj_top">
<div>
<span class="price" id="drjy">76.01</span>
<span class="danwei">万元</span>
</div>
<p>当日节约电费</p>
</div>
<div class="jj_bottom drjy"></div>
</div>
<div class="c_middle div_content">
<div class="jj_top">
<div>
<span class="price" id="dyjy">123.09</span>
<span class="danwei">万元</span>
</div>
<p>当月节约电费</p>
</div>
<div class="jj_bottom dyjy"></div>
</div>
<div class="c_right div_content">
<div class="jj_top">
<div>
<span class="price" id="qbjy">1092.12</span>
<span class="danwei">万元</span>
</div>
<p>总节约电费</p>
</div>
<div class="jj_bottom qbjy"></div>
</div>
</div>
</div>
</div>
</div>
<div class="bootom">
<div class="b_left b_div">
<div class="l_title">
<img class="tit_img" src="./images/ssglline.svg" alt="">
<span class="tit_content">实时功率曲线</span>
<span class="tit_encontent">Real-time Power Curve</span>
</div>
<div id="sjglq" class="l_content"></div>
</div>
<div class="b_center_l b_div">
<div class="l_title">
<img class="tit_img" src="./images/dianliang.svg" alt="">
<span class="tit_content">月每日电量统计</span>
<span class="tit_encontent">Daily Electricity Statistics</span>
</div>
<div id="ydltj" class="l_content"></div>
</div>
<div class="b_center_r b_div">
<div class="l_title">
<img class="tit_img" src="./images/dianliang.svg" alt="">
<span class="tit_content">年每月电量统计</span>
<span class="tit_encontent">Monthly Electricity Statistics</span>
</div>
<div id="ndltj" class="l_content"></div>
</div>
<div class="b_right b_div">
<div class="l_title last">
<img class="tit_img" src="./images/jydl.svg" alt="">
<span class="tit_content">月节约费用统计</span>
<span class="tit_encontent">Monthly Electricity Saving Statistics</span>
</div>
<div id="yjydl" class="l_content"></div>
</div>
</div>
</div>
<script src="./js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="./layer/layer.js"></script>
<script src="./js/echarts.js"></script>
<script src="./js/waterTank.js"></script>
<script>
$(document).ready(function() {
updateline();// 首次加载立即请求数据
setInterval(updateline,10*60*1000); // 首次加载之后，每十分钟重新请求一次数据
function updateline (){
$.ajax({
type: "get",
dataType: "json",
url: 'http://112.74.169.99:21021/api/TokenAuth/GetDigitalData',
success: function (data) {
const dataa = {
result: {
realtimelist:[3,4,5,8,2,6,10,23,45,33,2,5],
realtimedata:[3,4,5,8,2,6,10,23,45,33,2,5],
dailyelectricity:[3,4,5,8,2,6,10,23,45,33,2,5],
monthlyelectricity:[3,4,5,8,2,6,10,23,45,33,2,5],
monthlysave:[3,4,5,8,2,6,10,23,45,33,2,5,45,33,46,7,8,9,3,45,33,22,11,22,44,45,67,77,55,3,33],
totalDevice:23,
totalBMS:224,
totalDG:100,
}
}
// console.log(dataa);
// console.log(data);
var realtimelist = dataa.result.realtimelist; //实时功率曲线时间 x轴
var realtimedata = dataa.result.realtimedata; //实时功率曲线时间 y轴
var dailyelectricity = dataa.result.dailyelectricity; //月每日电量统计 y轴
var monthlyelectricity = dataa.result.monthlyelectricity; //年每月电量统计 y轴
var monthlysave = dataa.result.monthlysave; //月节约费用统计 y轴
var projectnum = dataa.result.totalDevice;// 电站数量
var cnrl = dataa.result.totalBMS;// 储能容量
var fdjl = dataa.result.totalDG;// 发电机容量
// 1
let ec_sjglq = echarts.init(document.getElementById('sjglq'));
let data1x = realtimelist;
let data1y = realtimedata;
let op_sjglq = {
backgroundColor: 'rgba(255,255,255,0)',
tooltip: {//提示框组件
trigger: 'axis',
formatter: '时间:{b}<br />{a0}:{c0}',
axisPointer: {
lineStyle: {
fontFamily: 'MicrosoftYaHei',
fontStyle: 'normal',
fontSize: 12,
color: '#57617B'
}
}
},
grid: {// 网格
left: '10%',
right: '6%',
bottom: '20%',
top: '20%',
containLabel: false
},
legend: {//图例组件，颜色和名字
icon: 'rect',
itemWidth: 6,
itemHeight: 6,
data: ['功率'],
right: '6%',
top: '10%',
textStyle: {// 文字样式的设置
fontSize: 12,
color: 'rgba(255,255,255,0.7)',
fontStyle: 'normal',
fontFamily: 'MicrosoftYaHei'
},
},
xAxis: [{
type: 'category',//类目轴 需要设置data
boundaryGap: false,//坐标轴两边留白，控制曲线是否从0点开始
data: data1x,
axisLabel: {//坐标轴文字的设置
interval: 1,
rotate: 50,
textStyle: {
fontFamily: 'MicrosoftYaHei',
color: 'rgba(255,255,255,0.8)',
fontStyle: 'normal',
fontSize: 12
}
},
axisLine: {//坐标轴线的设置
lineStyle: {
fontFamily: 'MicrosoftYaHei',
color: 'rgba(255,255,255,0.8)',
fontStyle: 'normal',
fontSize: 12
}
},
axisTick: {//坐标轴刻度线的设置
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.2)'
},
},
}],
yAxis: [{
type: 'value',//'value' 数值轴，适用于连续数据
name: 'kW',
// interval: 100,
// max: 500,
axisLabel: {// 坐标轴文字的设置
textStyle: {
color: 'rgba(255,255,255,0.8)',
fontStyle: 'normal',
fontFamily: 'MicrosoftYaHei',
fontSize: 12,
}
},
axisLine: {// 坐标轴线的设置
lineStyle: {
color: 'rgba(255,255,255,0.8)',
fontStyle: 'normal',
fontFamily: 'MicrosoftYaHei',
fontSize: 12,
}
},
axisTick: {//坐标轴刻度线的设置
show: false
},
splitLine: { // 网格线的设置
lineStyle: {
// y轴方向的网格线颜色
fontStyle: 'normal',
fontFamily: 'MicrosoftYaHei',
fontSize: 12,
color: 'rgba(255,255,255,0.05)'
}
},
splitArea: { // 网格区域的设置
show: true,
// 背景颜色
areaStyle: {
fontStyle: 'normal',
fontFamily: 'MicrosoftYaHei',
fontSize: 12,
color: ['rgba(20,49,105,0.21)']
}
},
scale: true
}],
series: [
{
name: '功率',
symbol: "none",//去掉折线图上的小点点
type: 'line',
smooth: false,// 控制曲线形状
itemStyle: {
normal: {
color: '#16CCDC',
borderColor: '#e48b4c'
},
},
lineStyle: {// 线条样式设置
normal: {
width: 1
}
},
areaStyle: {// 区域样式设置
normal: {
color:
// echarts内置的渐变色生成器
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#03B8C8'
},
{
offset: 1,
color: 'rgba(3,184,200,0.00)'
}
], false),
shadowColor: 'rgba(228, 139, 76, 0.1)',
shadowBlur: 20,
}
},
symbolSize: 4,
data: data1y,
smooth: true
}
]
};
ec_sjglq.setOption(op_sjglq);
// 2
let ec_ydltj = echarts.init(document.getElementById('ydltj'));
var data2x = [];
data2x = outmouth(dailyelectricity, data2x);
let data2y = dailyelectricity;
var op_ydltj = {
backgroundColor: 'rgba(255,255,255,0)',
tooltip: { // 提示框组件
trigger: 'axis',
formatter: '{b}日<br />{a0}:{c0}',
axisPointer: {
type: 'shadow',
// type: 'none',
label: {
backgroundColor: '#6a7985'
}
},
textStyle: {
color: '#BCC5E3',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
}
},
grid: { // 网格
left: '15%',
right: '6%',
bottom: '12%',
top: '20%',
containLabel: false,
},
legend: { //图例组件，颜色和名字
icon: 'rect',
itemWidth: 6,
itemHeight: 6,
data: ['发电量'],
right: '6%',
top: '10%',
textStyle: {// 文字样式的设置
fontSize: 12,
color: 'rgba(255,255,255,0.7)',
fontStyle: 'normal',
fontFamily: 'MicrosoftYaHei'
}
},
xAxis: [{
type: 'category',//类目轴 需要设置data
boundaryGap: true, //坐标轴两边留白，控制曲线是否从0点开始
data: data2x,
axisLabel: { //坐标轴文字的相关设置
interval: 1, //设置为 1，表示『隔一个标签显示一个标签』
textStyle: {// 文字样式的设置
fontFamily: 'MicrosoftYaHei',
color: 'rgba(255,255,255,0.8)',
fontStyle: 'normal',
fontSize: 12
}
},
axisLine: { //坐标轴轴线相关设置
lineStyle: {
fontFamily: 'MicrosoftYaHei',
color: 'rgba(255,255,255,0.6)',
fontStyle: 'normal',
fontSize: 12
}
},
axisTick: { //坐标轴刻度相关设置
show: false,
},
splitLine: { //坐标轴在 grid 区域中的分隔线。
show: false,
}
}],
yAxis: [{
type: 'value',
name: 'kWh',
axisLabel: {// 坐标轴文字的设置
textStyle: {
color: 'rgba(255,255,255,0.8)',
fontStyle: 'normal',
fontFamily: 'MicrosoftYaHei',
fontSize: 10,
}
},
axisLine: {// 坐标轴线的设置
lineStyle: {
color: 'rgba(255,255,255,0.8)'
}
},
axisTick: {//坐标轴刻度线的设置
show: false
},
splitLine: {// 网格线的设置
lineStyle: {
fontStyle: 'normal',
fontFamily: 'MicrosoftYaHei',
fontSize: 12,
color: 'rgba(255,255,255,0.05)'
}
},
splitArea: {// 网格区域的设置
show: true,
areaStyle: {
fontStyle: 'normal',
fontFamily: 'MicrosoftYaHei',
fontSize: 12,
color: ['rgba(20,49,105,0.21)']
}
}
// scale: true
}],
series: [
{
name: '发电量',
type: 'bar',
data: data2y,
barWidth: 8,
barGap: 0, //柱间距离
itemStyle: { // 图形样式的设置
normal: {
color:
// echarts内置的渐变色生成器
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#FF7D23'
},
{
offset: 1,
color: 'rgba(255,125,35,0)'
}
], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10,
},
}
},
]
};
ec_ydltj.setOption(op_ydltj);
// 3
let ec_ndltj = echarts.init(document.getElementById('ndltj'));
let data3x = generateArray(1, 12);
let data3y = monthlyelectricity;
var op_ndltj = {
backgroundColor: 'rgba(255,255,255,0)',
tooltip: { // 提示框组件
trigger: 'axis',
formatter: '{b}月<br />{a0}:{c0}',
axisPointer: {
type: 'shadow',
label: {
backgroundColor: '#6a7985'
}
},
textStyle: {
color: '#BCC5E3',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
}
},
grid: { // 网格
left: '15%',
right: '6%',
bottom: '12%',
top: '20%',
containLabel: false,
},
legend: { //图例组件，颜色和名字
icon: 'rect',
itemWidth: 6,
itemHeight: 6,
data: ['发电量'],
right: '6%',
top: '10%',
textStyle: {// 文字样式的设置
fontSize: 12,
color: 'rgba(255,255,255,0.7)',
fontStyle: 'normal',
fontFamily: 'MicrosoftYaHei'
}
},
xAxis: [{
type: 'category',//类目轴 需要设置data
boundaryGap: true, //坐标轴两边留白，控制曲线是否从0点开始
data: data3x,
axisLabel: { //坐标轴文字的相关设置
interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
textStyle: {// 文字样式的设置
fontFamily: 'MicrosoftYaHei',
color: 'rgba(255,255,255,0.8)',
fontStyle: 'normal',
fontSize: 12
}
},
axisLine: { //坐标轴轴线相关设置
lineStyle: {
fontFamily: 'MicrosoftYaHei',
color: 'rgba(255,255,255,0.6)',
fontStyle: 'normal',
fontSize: 12
}
},
axisTick: { //坐标轴刻度相关设置
show: false,
},
splitLine: { //坐标轴在 grid 区域中的分隔线。
show: false,
}
}],
yAxis: [{
type: 'value',
name: 'kWh',
axisLabel: {// 坐标轴文字的设置
textStyle: {
color: 'rgba(255,255,255,0.8)',
fontStyle: 'normal',
fontFamily: 'MicrosoftYaHei',
fontSize: 10,
}
},
axisLine: {// 坐标轴线的设置
lineStyle: {
color: 'rgba(255,255,255,0.8)'
}
},
axisTick: {//坐标轴刻度线的设置
show: false
},
splitLine: {// 网格线的设置
lineStyle: {
fontStyle: 'normal',
fontFamily: 'MicrosoftYaHei',
fontSize: 12,
color: 'rgba(255,255,255,0.05)'
}
},
splitArea: {// 网格区域的设置
show: true,
areaStyle: {
fontStyle: 'normal',
fontFamily: 'MicrosoftYaHei',
fontSize: 12,
color: ['rgba(20,49,105,0.21)']
}
},
scale: true
}],
series: [
{
name: '发电量',
type: 'bar',
data: data3y,
barWidth: 8,
barGap: 0, //柱间距离
itemStyle: { // 图形样式的设置
normal: {
color:
// echarts内置的渐变色生成器
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#FF6E94'
},
{
offset: 1,
color: 'rgba(255,125,35,0)'
}
], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10,
},
}
},
]
};
ec_ndltj.setOption(op_ndltj);
// 4
let ec_yjydl = echarts.init(document.getElementById('yjydl'));
let data4x = [];
data4x = outmouth(monthlysave, data4x);
let datar = [];
datar = outonehandrand();
let datal = monthlysave;
let op_yjydl = {
backgroundColor: 'rgba(255,255,255,0)',
tooltip: {//提示框组件
trigger: 'axis',
axisPointer: {
// type: 'none',
type: 'line',
lineStyle: {
fontFamily: 'MicrosoftYaHei',
fontStyle: 'normal',
fontSize: 12,
color: '#57617B'
}
},
},
grid: {// 网格
left: '15%',
right: '6%',
bottom: '12%',
top: '20%',
containLabel: false,
},
legend: {//图例组件，颜色和名字
icon: 'rect',
itemWidth: 6,
itemHeight: 6,
data: ["节约费用"],
right: '6%',
top: '10%',
textStyle: {// 文字样式的设置
fontSize: 12,
color: 'rgba(255,255,255,0.7)',
fontStyle: 'normal',
fontFamily: 'MicrosoftYaHei'
},
},
xAxis: [{
type: 'category',
boundaryGap: true, // 坐标轴两边留白
gridIndex: 0,
data: data4x,
axisLabel: {//坐标轴文字的设置
interval: 1, //设置为 1，表示『隔一个标签显示一个标签』
textStyle: {
fontFamily: 'MicrosoftYaHei',
color: 'rgba(255,255,255,0.8)',
fontStyle: 'normal',
fontSize: 12
}
},
axisLine: {//坐标轴线的设置
show: false
},
axisTick: {//坐标轴刻度线的设置
show: false
},
}],
yAxis: [
{
type: 'value',//'value' 数值轴，适用于连续数据
name: '元',
// interval: 3000,
// max: 15000,
axisLabel: {// 坐标轴文字的设置
textStyle: {
color: 'rgba(255,255,255,0.8)',
fontStyle: 'normal',
fontFamily: 'MicrosoftYaHei',
fontSize: 10
}
},
axisLine: {// 坐标轴线的设置
show: false
},
axisTick: {//坐标轴刻度线的设置
show: false
},
splitLine: {// 网格线的设置
lineStyle: {
color: 'rgba(255,255,255,0)'
}
},
nameTextStyle: {
color: "rgba(255,255,255,0.6)" // 万kWh颜色
},
gridIndex: 0
// scale: true
},
{
type: 'value',
gridIndex: 0,
axisLabel: {// 坐标轴文字的设置
show: false
},
axisLine: {// 坐标轴线的设置
show: false
},
axisTick: {//坐标轴刻度线的设置
show: false
},
splitLine: {// 网格线的设置
show: false
},
}
],
series: [
{
name: '节约费用',
type: 'bar',
data: datal,
barWidth: 8,
xAxisIndex: 0,
yAxisIndex: 0,
itemStyle: {
normal: {
color: '#2BCE67',
barBorderRadius: [20, 20, 20, 20]
}
}
},
{
// name: '背景',
type: 'bar',
data: datar,
barWidth: 8,
xAxisIndex: 0,
yAxisIndex: 1,
barGap: '-100%',
itemStyle: {
normal: {
color: 'rgba(255,255,255,0.1)',
barBorderRadius: [20, 20, 20, 20]
},
},
tooltip: {
show: false
},
},
]
};
ec_yjydl.setOption(op_yjydl);
console.log("请求成功");
// 电站数量
$("#projectnum").html(changeTwoDecimal(projectnum));
// 储能容量
$("#cnrl").html(changeTwoDecimal(cnrl));
// 发电机容量
$("#fdjl").html(changeTwoDecimal(fdjl));
},
error: function (err) {
console.log(err);
console.log("请求失败");
}
});
}
function outmouth(oldarr, datax) {
let myDate = new Date();
let themonth = myDate.getMonth() + 1;//获取当前月份(0-11,0代表1月)
let month_len;
if (themonth == 1 || themonth == 3 || themonth == 5 || themonth == 7 || themonth == 8 || themonth == 10 || themonth == 12) {
month_len = 31;
datax = generateArray(1, 31);
} else if (themonth == 4 || themonth == 6 || themonth == 9 || themonth == 11) {
month_len = 30;
datax = generateArray(1, 30);
} else if (themonth == 2) {
month_len = 28;
datax = generateArray(1, 28);
}
return datax;
}
function outonehandrand() {
let myDate = new Date();
let themonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
let month_len;
if (themonth % 2 == 1) {
month_len = 31;
} else if (themonth % 2 == 0 && themonth != 2) {
month_len = 30;
} else if (themonth == 2) {
month_len = 28;
}
var datar = new Array(month_len).fill(100);
return datar;
}
function generateArray(start, end) {
return Array.from(new Array(end + 1).keys()).slice(start)
}
updateData();// 首次加载立即请求数据
setInterval(updateData,1000); // 首次加载之后，每1s重新请求一次数据
function updateData (){// 请求数据
$.ajax({
type: "get",
dataType: "json",
url: 'http://112.74.169.99:21021/api/TokenAuth/GetRealDigitalData',
success: function (data) {
var realpower = data.result.realpower;// 实时功率
var dgeneration = data.result.dgeneration;// 当日发电量
var tgeneration = data.result.tgeneration;// 总发电量
var dsavemoney = data.result.dsavemoney;// 当日节约费用
var msavemoney = data.result.msavemoney;// 当月节约费用
var tsavemoney = data.result.tsavemoney;// 总节约费用
var savecoal = data.result.savecoal;// 累计节约标准煤
var saveco2 = data.result.saveco2;// 累计减排CO2
// 实时功率
var therealpower = getFloatStr(realpower.toString());
var arrrealpower = therealpower.split('');
if (arrrealpower.length == 6) {
$(".ssgl span").get(0).innerHTML = '0';
$(".ssgl span").get(1).innerHTML = arrrealpower[0];
$(".ssgl span").get(2).innerHTML = arrrealpower[1];
$(".ssgl span").get(3).innerHTML = arrrealpower[2];
$(".ssgl span").get(4).innerHTML = arrrealpower[3];
$(".ssgl span").get(5).innerHTML = arrrealpower[4];
$(".ssgl span").get(6).innerHTML = arrrealpower[5];
} else if (arrrealpower.length >= 7) {
$(".ssgl span").get(0).innerHTML = arrrealpower[0];
$(".ssgl span").get(1).innerHTML = arrrealpower[1];
$(".ssgl span").get(2).innerHTML = arrrealpower[2];
$(".ssgl span").get(3).innerHTML = arrrealpower[3];
$(".ssgl span").get(4).innerHTML = arrrealpower[4];
$(".ssgl span").get(5).innerHTML = arrrealpower[5];
$(".ssgl span").get(6).innerHTML = arrrealpower[6];
} else if (arrrealpower.length == 5) {
$(".ssgl span").get(0).innerHTML = '0';
$(".ssgl span").get(1).innerHTML = '0';
$(".ssgl span").get(2).innerHTML = arrrealpower[0];
$(".ssgl span").get(3).innerHTML = arrrealpower[1];
$(".ssgl span").get(4).innerHTML = arrrealpower[2];
$(".ssgl span").get(5).innerHTML = arrrealpower[3];
$(".ssgl span").get(6).innerHTML = arrrealpower[4];
}
// 当日发电量
var thedgeneration = changeTwoDecimal(dgeneration).toString();// 四舍五入到小数点后两位
var thedgenerationLast = getFloatStr(thedgeneration.toString());// 小数点后两位补0
var arrdgeneration = thedgenerationLast.split(''); // 切割字符串
// 小数点前面位数不够补0
var theindex = arrdgeneration.indexOf('.');
if (arrdgeneration.length == 6) { // 整数部分 补1个0
$(".drfd span").get(0).innerHTML = '0';
$(".drfd span").get(1).innerHTML = arrdgeneration[0];
$(".drfd span").get(2).innerHTML = arrdgeneration[1];
$(".drfd span").get(3).innerHTML = arrdgeneration[2];
$(".drfd span").get(4).innerHTML = arrdgeneration[3];
$(".drfd span").get(5).innerHTML = arrdgeneration[4];
$(".drfd span").get(6).innerHTML = arrdgeneration[5];
} else if (arrdgeneration.length >= 7) {// 整数部分 不补0
if(theindex >= 6){
var changegeneration = dgeneration/1000;
var splitchange = changegeneration.toString().split('');
if(splitchange[0]){
$(".drfd span").get(0).innerHTML = splitchange[0];
}else{
$(".drfd span").get(0).innerHTML = '0';
}
if(splitchange[1]){
$(".drfd span").get(1).innerHTML = splitchange[1];
}else{
$(".drfd span").get(1).innerHTML = '0';
}
if(splitchange[2]){
$(".drfd span").get(2).innerHTML = splitchange[2];
}else{
$(".drfd span").get(2).innerHTML = '0';
}
if(splitchange[3]){
$(".drfd span").get(3).innerHTML = splitchange[3];
}else{
$(".drfd span").get(3).innerHTML = '0';
}
if(splitchange[4]){
$(".drfd span").get(4).innerHTML = splitchange[4];
}else{
$(".drfd span").get(4).innerHTML = '0';
}
if(splitchange[5]){
$(".drfd span").get(5).innerHTML = splitchange[5];
}else{
$(".drfd span").get(5).innerHTML = '0';
}
if(splitchange[6]){
$(".drfd span").get(6).innerHTML = splitchange[6];
}else{
$(".drfd span").get(6).innerHTML = '0';
}
$("#drfddw").html("");
$("#drfddw").html("MWh");
}else{
$(".drfd span").get(0).innerHTML = arrdgeneration[0];
$(".drfd span").get(1).innerHTML = arrdgeneration[1];
$(".drfd span").get(2).innerHTML = arrdgeneration[2];
$(".drfd span").get(3).innerHTML = arrdgeneration[3];
$(".drfd span").get(4).innerHTML = arrdgeneration[4];
$(".drfd span").get(5).innerHTML = arrdgeneration[5];
$(".drfd span").get(6).innerHTML = arrdgeneration[6];
$("#drfddw").html("");
$("#drfddw").html("kWh");
}
} else if (arrdgeneration.length == 5) {// 整数部分 补2个0
$(".drfd span").get(0).innerHTML = '0';
$(".drfd span").get(1).innerHTML = '0';
$(".drfd span").get(2).innerHTML = arrdgeneration[0];
$(".drfd span").get(3).innerHTML = arrdgeneration[1];
$(".drfd span").get(4).innerHTML = arrdgeneration[2];
$(".drfd span").get(5).innerHTML = arrdgeneration[3];
$(".drfd span").get(6).innerHTML = arrdgeneration[4];
}
// 总发电量
var thetgeneration = changeTwoDecimal(tgeneration).toString();// 四舍五入到小数点后两位
var thetgenerationLast = getFloatStr(thetgeneration.toString());// 小数点后两位补0
var arrtgeneration = thetgenerationLast.split('');// 切割字符串
// 小数点前面位数不够补0
if (arrtgeneration.length == 6) {// 整数部分 补1个0
$(".zfd span").get(0).innerHTML = '0';
$(".zfd span").get(1).innerHTML = arrtgeneration[0];
$(".zfd span").get(2).innerHTML = arrtgeneration[1];
$(".zfd span").get(3).innerHTML = arrtgeneration[2];
$(".zfd span").get(4).innerHTML = arrtgeneration[3];
$(".zfd span").get(5).innerHTML = arrtgeneration[4];
$(".zfd span").get(6).innerHTML = arrtgeneration[5];
} else if (arrtgeneration.length >= 7) {// 整数部分 不补0
$(".zfd span").get(0).innerHTML = arrtgeneration[0];
$(".zfd span").get(1).innerHTML = arrtgeneration[1];
$(".zfd span").get(2).innerHTML = arrtgeneration[2];
$(".zfd span").get(3).innerHTML = arrtgeneration[3];
$(".zfd span").get(4).innerHTML = arrtgeneration[4];
$(".zfd span").get(5).innerHTML = arrtgeneration[5];
$(".zfd span").get(6).innerHTML = arrtgeneration[6];
} else if (arrtgeneration.length == 5) {// 整数部分 补2个0
$(".zfd span").get(0).innerHTML = '0';
$(".zfd span").get(1).innerHTML = '0';
$(".zfd span").get(2).innerHTML = arrtgeneration[0];
$(".zfd span").get(3).innerHTML = arrtgeneration[1];
$(".zfd span").get(4).innerHTML = arrtgeneration[2];
$(".zfd span").get(5).innerHTML = arrtgeneration[3];
$(".zfd span").get(6).innerHTML = arrtgeneration[4];
}
// 当日节约费用
$("#drjy").html(changeTwoDecimal(dsavemoney));
// 当月节约费用
$("#dyjy").html(changeTwoDecimal(msavemoney));
// 总节约费用
$("#qbjy").html(changeTwoDecimal(tsavemoney));
// 累计节约标准煤
$(".bzdata").html(changeTwoDecimal(savecoal));
// 累计减排CO2
$(".eydata").html(changeTwoDecimal(saveco2));
// console.log("请求成功");
},
error: function (err) {
// console.log("请求失败");
}
});
}
// 小数点后两位补0
function getFloatStr(num) {
num += '';
num = num.replace(/[^0-9|\.]/g, ''); //清除字符串中的非数字非.字符
if (/^0+/) //清除字符串开头的0
num = num.replace(/^0+/, '');
if (!/\./.test(num)) //为整数字符串在末尾添加.00
num += '.00';
if (/^\./.test(num)) //字符以.开头时,在开头添加0
num = '0' + num;
num += '00'; //在字符串末尾补零
num = num.match(/\d+\.\d{2}/)[0];
return num;
};
// 四舍五入到小数点后两位
function changeTwoDecimal(x) {
var f_x = parseFloat(x);
if (isNaN(f_x)) {
return false;
}
f_x = Math.round(f_x * 100) / 100;
return f_x;
}
// 经济效益
$('.drjy').waterTank({
width: 40,
height: 150,
color: '#0068FF',
level: 56
});
$('.dyjy').waterTank({
width: 40,
height: 150,
color: '#00C864',
level: 46
});
$('.qbjy').waterTank({
width: 40,
height: 150,
color: '#7A3BCD',
level: 42
});
var drjy_count = $('<p class="count c_drjy">27%</p>');
var drjy_countname = $('<p class="tips t_drjy">当日节省率</p>');
$('.drjy').append(drjy_countname);
$('.drjy').prepend(drjy_count);
var dyjy_count = $('<p class="count c_dyjy">22%</p>');
var dyjy_countname = $('<p class="tips t_dyjy">当月节省率</p>');
$('.dyjy').append(dyjy_countname);
$('.dyjy').prepend(dyjy_count);
var qbjy_count = $('<p class="count c_qbjy">20%</p>');
var qbjy_countname = $('<p class="tips t_qbjy">总节省率</p>');
$('.qbjy').append(qbjy_countname);
$('.qbjy').prepend(qbjy_count);
function getDate(){
var myDate = new Date();
//获取当前年
var year = myDate.getFullYear();
//获取当前月
var month = myDate.getMonth() + 1;
//获取当前日
var date = myDate.getDate();
var h = myDate.getHours(); //获取当前小时数(0-23)
var m = myDate.getMinutes(); //获取当前分钟数(0-59)
var s = myDate.getSeconds();
//获取当前时间
var now = year + '年' + conver(month) + "月" + conver(date) + "日 " + conver(h) + ':' + conver(m) + ":" + conver(s);
return now;
}
//日期时间处理
function conver(s) {
return s < 10 ? '0' + s : s;
}
// console.log();
setInterval(function(){
document.getElementById("realTime").innerHTML = getDate();
},1000);
//打印输出
// 线上userid accessToken
// var userid = getCookie('userId');
// var accessToken = getCookie('accessToken');
// 本地测试userid accessToken
var userid = 1;
var accessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjEiLCJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiYWRtaW4iLCJBc3BOZXQuSWRlbnRpdHkuU2VjdXJpdHlTdGFtcCI6ImNiNDg4NjNkLWRjNzEtYmEzMC0zNjM5LTM5ZjMzYTBkN2Q1NCIsImh0dHA6Ly9zY2hlbWFzLm1pY3Jvc29mdC5jb20vd3MvMjAwOC8wNi9pZGVudGl0eS9jbGFpbXMvcm9sZSI6IkFkbWluIiwic3ViIjoiMSIsImp0aSI6IjA3ZmUyMGNkLTFlMTUtNGM4ZS1iNGVlLTc5ZmM4MzAxOTkxZSIsImlhdCI6MTYxMDA5MjExOSwibmJmIjoxNjEwMDkyMTE5LCJleHAiOjE2MTAxNzg1MTksImlzcyI6IkpOWVlTZXJ2aWNlIiwiYXVkIjoiSk5ZWVNlcnZpY2UifQ.LAwpwXlqoE3MKBhT8JPG4P_Nmuolc0pAC_HXk2LpKiM';
// 请求项目数据
$.ajax({
type: "get",
dataType: "json",
url: 'http://112.74.169.99:21021/api/services/app/ProjectService/GetProjectInfosByUserid?userid=' + userid,
beforeSend: function (xhr) {
xhr.setRequestHeader("Accept",
"application/json, text/javascript, */*; q=0.01"
);
xhr.setRequestHeader("Authorization", accessToken);
xhr.setRequestHeader('.AspNetCore.Culture',
'zh-Hans');
},
success: function (res) {
if(res.success){
var data = res.result;
console.log(data);
var zhongshan = [],shenzhen=[],zhuhai=[],yunnan=[],qiaotou=[],guangzhou=[],shanwei=[],qingyuan=[],longyan=[],yangjiang=[],heyuan=[],beijing=[],sichuan=[],shanxi=[],yanan=[],jinan=[],kelamayi=[],yixian=[],shanghai=[],fuzhou=[],yulin=[],yecheng=[];
// xian=[],
for(var i=0;i<data.length;i++){
if(data[i].city == '中山'){
zhongshan.push(data[i]);
}else if(data[i].city == '深圳'){
shenzhen.push(data[i]);
}else if(data[i].city == '珠海'){
zhuhai.push(data[i]);
}else if(data[i].city == '楚雄' || data[i].city == '云南'){
yunnan.push(data[i]);
}else if(data[i].city == '桥头' || data[i].city == '东莞'){
qiaotou.push(data[i]);
}else if(data[i].city == '广州'){
guangzhou.push(data[i]);
}else if(data[i].city == '汕尾'){
shanwei.push(data[i]);
}else if(data[i].city == '清远'){
qingyuan.push(data[i]);
}else if(data[i].city == '延安'){
yanan.push(data[i]);
}else if(data[i].city == '阳江'){
yangjiang.push(data[i]);
}else if(data[i].city == '河源'){
heyuan.push(data[i]);
}else if(data[i].city == '北京'){
beijing.push(data[i]);
}else if(data[i].city == '乐山'){ //四川
sichuan.push(data[i]);
}else if(data[i].city == '临汾'){ //山西
shanxi.push(data[i]);
}else if(data[i].city == '济南'){ //山东
jinan.push(data[i]);
}else if(data[i].city == '克拉玛依'){ //新疆
kelamayi.push(data[i]);
}else if(data[i].city == '易县'){ //河北
yixian.push(data[i]);
}else if(data[i].city == '上海'){ //上海
shanghai.push(data[i]);
}else if(data[i].city == '福州'){ //福建
fuzhou.push(data[i]);
}else if(data[i].city == '玉林'){ //广西
yulin.push(data[i]);
}else if(data[i].city == '叶城'){ //新疆
yecheng.push(data[i]);
}
}
$(".imgicon").click(function(arguments){
var cityname;
var dataname = $(arguments.target).attr("data-name");
if( dataname == 'zhongshan' ){ cityname = zhongshan; }
else if( dataname == 'shenzhen'){ cityname = shenzhen; }
else if( dataname == 'zhuhai'){ cityname = zhuhai; }
else if( dataname == 'yunnan'){ cityname = yunnan; }
else if( dataname == 'qiaotou'){ cityname = qiaotou; }
else if( dataname == 'guangzhou'){ cityname = guangzhou; }
else if( dataname == 'shanwei'){ cityname = shanwei; }
else if( dataname == 'qingyuan'){ cityname = qingyuan; }
// else if( dataname == 'longyan'){ cityname = longyan; }
// else if( dataname == 'xian'){ cityname = xian; }
else if( dataname == 'yanan'){ cityname = yanan; }
else if( dataname == 'yangjiang'){ cityname = yangjiang; }
else if( dataname == 'heyuan'){ cityname = heyuan; }
else if( dataname == 'beijing'){ cityname = beijing; }
else if( dataname == 'sichuan'){ cityname = sichuan; }
else if( dataname == 'shanxi'){ cityname = shanxi; }
else if( dataname == 'jinan'){ cityname = jinan; }
else if( dataname == 'kelamayi'){ cityname = kelamayi; }
else if( dataname == 'yixian'){ cityname = yixian; }
else if( dataname == 'shanghai'){ cityname = shanghai; }
else if( dataname == 'fuzhou'){ cityname = fuzhou; }
else if( dataname == 'yulin'){ cityname = yulin; }
else if( dataname == 'yecheng'){ cityname = yecheng; }
layer.open({
type: 1,
title: '详细信息', //显示标题
skin: 'layui-layer-rim', //加上边框
area: ['420px'], //宽高
content: eachprogram(cityname)
});
});
}
},
error: function(err){
console.log(err)
}
});
function getCookie(key){
var str_cookie = document.cookie;
var pattern = '\\b' + key + '[^;]+';
var reg = new RegExp(pattern);
var arr_name = reg.exec(str_cookie);
var val = arr_name[0].split('=');
return val[1];
}
function eachprogram(data){
// console.log(data);
var str = '';
for(var k=0;k<data.length;k++){
if(data[k].status == '通讯异常'){
str += `<span onclick="window.location.href='http://112.74.169.99:18001/#/` + data[k].projectRemark + `?projectid=`+ data[k].id +`'" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger" style="margin:10px;font-size:14px;">` + data[k].projectNameCN + `<span style="font-size:12px;">(通讯异常)</span>` + `</span>`;
}else if(data[k].status == '运行中'){
str += `<span onclick="window.location.href='http://112.74.169.99:18001/#/` + data[k].projectRemark + `?projectid=`+ data[k].id +`'" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" style="margin:10px;font-size:14px;">` + data[k].projectNameCN + `<span style="font-size:12px;">(运行中)</span>` + `</span>`;
}
// else if(data[k].status == '已完成'){
// str += `<span onclick="window.location.href='http://112.74.169.99:18001/#/` + data[k].projectRemark + `?projectid=`+ data[k].id +`'" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" style="margin:10px;font-size:14px;">` + data[k].projectNameCN + `<span style="font-size:12px;">(已完成)</span>` + `</span>`;
// }
}
return str;
}
});
</script>
</body>
</html>
举报
请认真填写举报原因，尽可能描述详细。
请选择举报类型
误判申诉
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化