mkl
/
mkl_power_box
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

main
lj7788@126.com 2024-11-23 16:49:31 +08:00
parent 18a68a12a1
commit 54c4869233
3 changed files with 125 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
power.html
View File

@ -4,10 +4,10 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="stylesheet" href="https://cdn.makalu.cc/css/element-ui/index.css" /> <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/largeScreenLayout.css" />
<link rel="stylesheet" href="/css/largeScreenStyle.css" /> <link rel="stylesheet" href="./css/largeScreenStyle.css" />
<link rel="stylesheet" href="/css/amplifyModuleStyle.css" /> <link rel="stylesheet" href="./css/amplifyModuleStyle.css" />
<link rel="stylesheet" href="/power/power.css" /> <link rel="stylesheet" href="./power/power.css" />
<title>数字化集成管控平台</title> <title>数字化集成管控平台</title>
<style type="text/css"> <style type="text/css">
.el-table { .el-table {
@ -52,7 +52,13 @@
<background-video></background-video> <background-video></background-video>
<!--大屏内容--> <!--大屏内容-->
<div class="screen-content-max"> <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"> <div class="screen-content">
<el-row> <el-row>
<el-col :span="6"> <el-col :span="6">
@ -163,13 +169,23 @@
<el-col :span="16" style="height: 640px; margin-bottom: 20px" class="power-center power-map"> <el-col :span="16" style="height: 640px; margin-bottom: 20px" class="power-center power-map">
<module-two-2-2 label="场布图"> <module-two-2-2 label="场布图">
<div :style="'background-image:url('+mapInfo.url+')'" class="map-image"> <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" placement="top-start"
title="标题" :title="it.regionName"
width="200"
trigger="hover" trigger="click"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"> >
<i slot="reference" class="el-icon-location map-location" :style="'top:'+it.y+'px;left:'+it.x+'px'"></i> <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> </el-popover>
</div> </div>
</module-two-2-2> </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/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/vue/vue.js"></script>
<script src="https://cdn.makalu.cc/js/element-ui/index.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/jquery-3.0.0.min.js"></script>
<script src="/js/echarts.js"></script> <script src="./js/echarts.js"></script>
<!--module--> <!--module-->
<script src="/components/module/module-one-1-1.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-one-1-2.js"></script>
<script src="/components/module/module-two-2-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.js"></script>
<script src="/components/header-btn.js"></script> <script src="/components/header-btn.js"></script>-->
<script src="/components/staff-survey-chart.js"></script> <script src="./components/staff-survey-chart.js"></script>
<script src="/components/machinery-baidu-map.js"></script> <script src="./components/machinery-baidu-map.js"></script>
<script src="/components/people-number.js"></script> <script src="./components/people-number.js"></script>
<script src="./power/powerChart.js"></script> <script src="./power/powerChart.js"></script>
<!-- 请求依赖 --> <!-- 请求依赖 -->
@ -478,7 +495,15 @@
methods: { methods: {
loadMap(){ loadMap(){
let maps=mapDatas.filter(d=>d.projectId==projectId); 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() { loadRegions() {
let url = '/api/device/smart_meter/region_information'; let url = '/api/device/smart_meter/region_information';
@ -515,6 +540,7 @@
this.loadAreaEleTrendSel(); this.loadAreaEleTrendSel();
this.loadWarningCount(); this.loadWarningCount();
this.loadWarningList(); this.loadWarningList();
//this.loadMapInfo();
setTimeout(this.init, 10000) setTimeout(this.init, 10000)
}, },
getDates(n) { getDates(n) {
@ -694,6 +720,7 @@
postData.endTime = dts.dtEnd; postData.endTime = dts.dtEnd;
let url = '/api/device/smart_meter/electricity_consumption_trend' let url = '/api/device/smart_meter/electricity_consumption_trend'
this.post(url, postData).then(d => { this.post(url, postData).then(d => {
//debugger
let data = d.data?.data || []; let data = d.data?.data || [];
if (data.length > 0) { } if (data.length > 0) { }
}); });
@ -774,7 +801,34 @@
this.block1.YearAvgDailyElectricity = (data.YearAvgDailyElectricity || 0).toFixed(2) 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) { doEleLoadSel(n) {
this.eleLoadSel = n; this.eleLoadSel = n;
this.loadEleLoad(); this.loadEleLoad();

24
power/power.css
View File

@ -214,3 +214,27 @@
font-size: 40px; font-size: 40px;
text-shadow: 1px 1px 8px #010b2d; 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;
}

24
power/power.less
View File

@ -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 ;
}
}
}