update
lj7788@126.com
parent
18a68a12a1
commit
54c4869233
100
power.html
100
power.html
|
|
@ -4,10 +4,10 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="https://cdn.makalu.cc/css/element-ui/index.css" />
|
||||
<link rel="stylesheet" href="/css/largeScreenLayout.css" />
|
||||
<link rel="stylesheet" href="/css/largeScreenStyle.css" />
|
||||
<link rel="stylesheet" href="/css/amplifyModuleStyle.css" />
|
||||
<link rel="stylesheet" href="/power/power.css" />
|
||||
<link rel="stylesheet" href="./css/largeScreenLayout.css" />
|
||||
<link rel="stylesheet" href="./css/largeScreenStyle.css" />
|
||||
<link rel="stylesheet" href="./css/amplifyModuleStyle.css" />
|
||||
<link rel="stylesheet" href="./power/power.css" />
|
||||
<title>数字化集成管控平台</title>
|
||||
<style type="text/css">
|
||||
.el-table {
|
||||
|
|
@ -52,7 +52,13 @@
|
|||
<background-video></background-video>
|
||||
<!--大屏内容-->
|
||||
<div class="screen-content-max">
|
||||
<screen-header :nav="1"></screen-header>
|
||||
<!--
|
||||
<screen-header :nav="1"></screen-header>-->
|
||||
<div :class="'head-title'">
|
||||
<div class="head-title-label">
|
||||
数字化集成管控平台
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen-content">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
|
|
@ -163,13 +169,23 @@
|
|||
<el-col :span="16" style="height: 640px; margin-bottom: 20px" class="power-center power-map">
|
||||
<module-two-2-2 label="场布图">
|
||||
<div :style="'background-image:url('+mapInfo.url+')'" class="map-image">
|
||||
<el-popover v-for="(it,idx) in mapInfo.regions"
|
||||
<el-popover v-for="(it,idx) in mapInfo.regions" popper-class="power-pop"
|
||||
placement="top-start"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
<i slot="reference" class="el-icon-location map-location" :style="'top:'+it.y+'px;left:'+it.x+'px'"></i>
|
||||
:title="it.regionName"
|
||||
|
||||
trigger="click"
|
||||
>
|
||||
<div class="pop-body">
|
||||
<div v-if="it.data">
|
||||
<div><span>今日电量：</span><span>{{it.dailyElectricity||'暂无'}}</span></div>
|
||||
<div><span>用电负荷：</span><span>{{it.load||'暂无'}}</span></div>
|
||||
<div><span>用电状态：</span><span :style="'color:'+(it.CurrentType=='正常'?'#05ff5e':'red')">{{it.CurrentType||'暂无'}}</span></div>
|
||||
</div>
|
||||
<div v-else>
|
||||
{{it.dailyElectricity}}
|
||||
</div>
|
||||
</div>
|
||||
<i slot="reference" @click="getRegionMapInfo(it)" class="el-icon-location map-location" :style="'top:'+it.y+'px;left:'+it.x+'px'"></i>
|
||||
</el-popover>
|
||||
</div>
|
||||
</module-two-2-2>
|
||||
|
|
@ -350,20 +366,21 @@
|
|||
<script src="https://cdn.makalu.cc/js/moment/2.24.0/moment.min.js"></script>
|
||||
<script src="https://cdn.makalu.cc/js/vue/vue.js"></script>
|
||||
<script src="https://cdn.makalu.cc/js/element-ui/index.js"></script>
|
||||
<script src="/js/jquery-3.0.0.min.js"></script>
|
||||
<script src="/js/echarts.js"></script>
|
||||
<script src="./js/jquery-3.0.0.min.js"></script>
|
||||
<script src="./js/echarts.js"></script>
|
||||
|
||||
<!--module-->
|
||||
<script src="/components/module/module-one-1-1.js"></script>
|
||||
<script src="/components/module/module-one-1-2.js"></script>
|
||||
<script src="/components/module/module-two-2-2.js"></script>
|
||||
<script src="./components/module/module-one-1-1.js"></script>
|
||||
<script src="./components/module/module-one-1-2.js"></script>
|
||||
<script src="./components/module/module-two-2-2.js"></script>
|
||||
<!--组件-->
|
||||
<script src="/components/background_video.js"></script>
|
||||
<script src="./components/background_video.js"></script>
|
||||
<!--
|
||||
<script src="/components/header.js"></script>
|
||||
<script src="/components/header-btn.js"></script>
|
||||
<script src="/components/staff-survey-chart.js"></script>
|
||||
<script src="/components/machinery-baidu-map.js"></script>
|
||||
<script src="/components/people-number.js"></script>
|
||||
<script src="/components/header-btn.js"></script>-->
|
||||
<script src="./components/staff-survey-chart.js"></script>
|
||||
<script src="./components/machinery-baidu-map.js"></script>
|
||||
<script src="./components/people-number.js"></script>
|
||||
<script src="./power/powerChart.js"></script>
|
||||
|
||||
<!-- 请求依赖 -->
|
||||
|
|
@ -478,7 +495,15 @@
|
|||
methods: {
|
||||
loadMap(){
|
||||
let maps=mapDatas.filter(d=>d.projectId==projectId);
|
||||
this.mapInfo=maps.length>0?maps[0]:null;
|
||||
let map=maps.length>0?maps[0]:{regions:[]};
|
||||
map.regions=map.regions.map(it=>{
|
||||
it.data=null;
|
||||
it.CurrentType='';
|
||||
it.dailyElectricity='';
|
||||
it.load='';
|
||||
return it;
|
||||
});
|
||||
this.mapInfo=map;
|
||||
},
|
||||
loadRegions() {
|
||||
let url = '/api/device/smart_meter/region_information';
|
||||
|
|
@ -515,6 +540,7 @@
|
|||
this.loadAreaEleTrendSel();
|
||||
this.loadWarningCount();
|
||||
this.loadWarningList();
|
||||
//this.loadMapInfo();
|
||||
setTimeout(this.init, 10000)
|
||||
},
|
||||
getDates(n) {
|
||||
|
|
@ -694,6 +720,7 @@
|
|||
postData.endTime = dts.dtEnd;
|
||||
let url = '/api/device/smart_meter/electricity_consumption_trend'
|
||||
this.post(url, postData).then(d => {
|
||||
//debugger
|
||||
let data = d.data?.data || [];
|
||||
if (data.length > 0) { }
|
||||
});
|
||||
|
|
@ -774,7 +801,34 @@
|
|||
this.block1.YearAvgDailyElectricity = (data.YearAvgDailyElectricity || 0).toFixed(2)
|
||||
});
|
||||
},
|
||||
|
||||
loadMapInfo(){
|
||||
let url="/api/device/smart_meter/region_electricity_information";
|
||||
let postData={
|
||||
projectId:projectId,
|
||||
regionId:1
|
||||
};
|
||||
this.post(url,postData).then(d=>{
|
||||
|
||||
});
|
||||
},
|
||||
getRegionMapInfo(it){
|
||||
let url="/api/device/smart_meter/region_electricity_information";
|
||||
let postData={
|
||||
projectId:projectId,
|
||||
regionId:it.regionId
|
||||
};
|
||||
it.dailyElectricity="加载中..."
|
||||
this.post(url,postData).then(d=>{
|
||||
let data=d.data?.data||{};
|
||||
it.CurrentType=data.CurrentType||'';
|
||||
it.dailyElectricity=data.dailyElectricity||'';
|
||||
it.load=data.load||'';
|
||||
it.data=d.data?.data||null;
|
||||
if(it.data==null){
|
||||
it.dailyElectricity="暂无数据"
|
||||
}
|
||||
});
|
||||
},
|
||||
doEleLoadSel(n) {
|
||||
this.eleLoadSel = n;
|
||||
this.loadEleLoad();
|
||||
|
|
|
|||
|
|
@ -214,3 +214,27 @@
|
|||
font-size: 40px;
|
||||
text-shadow: 1px 1px 8px #010b2d;
|
||||
}
|
||||
.power-pop {
|
||||
background: #082b4fbd;
|
||||
border-color: #097fca91;
|
||||
color: #afb6e8;
|
||||
padding: 0px;
|
||||
}
|
||||
.power-pop .el-popover__title {
|
||||
color: #cbdaff;
|
||||
margin-bottom: 0px;
|
||||
background: linear-gradient(90deg, #00aaff 0%, #097fca91 100%);
|
||||
line-height: 24px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.power-pop .pop-body {
|
||||
padding: 10px;
|
||||
line-height: 24px;
|
||||
min-height: 72px;
|
||||
}
|
||||
.power-pop .popper__arrow {
|
||||
border-top-color: #097fca91 !important;
|
||||
}
|
||||
.power-pop .popper__arrow::after {
|
||||
border-top-color: #082b4fbd !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -236,3 +236,27 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.power-pop{
|
||||
background: #082b4fbd;
|
||||
border-color: #097fca91;
|
||||
color: #afb6e8;
|
||||
padding: 0px;
|
||||
.el-popover__title{
|
||||
color: #cbdaff;
|
||||
margin-bottom: 0px;
|
||||
background: linear-gradient(90deg, #00aaff 0%, #097fca91 100%);
|
||||
line-height: 24px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.pop-body{
|
||||
padding:10px;
|
||||
line-height: 24px;
|
||||
min-height:72px;
|
||||
}
|
||||
.popper__arrow{
|
||||
border-top-color:#097fca91 !important ;
|
||||
&::after{
|
||||
border-top-color:#082b4fbd !important ;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue