update code
parent
5446181dee
commit
18a68a12a1
646
power.html
646
power.html
|
|
@ -58,8 +58,8 @@
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<module-one-1-1 label="监控概况" :amplify="false" name="amplify-xmkg">
|
<module-one-1-1 label="监控概况" :amplify="false" name="amplify-xmkg">
|
||||||
<div class="project-number">
|
<div class="project-number">
|
||||||
<div>项目总数：<span v-cloak>{{100}}</span> 个</div>
|
<div>监测设备<span v-cloak>{{block1.total}}</span> 个</div>
|
||||||
<div>在建项目数：<span v-cloak>{{86}}</span> 个</div>
|
<div>在线设备：<span v-cloak>{{block1.online}}</span> 个</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mon-over">
|
<div class="mon-over">
|
||||||
<div class="mon-over-bg">
|
<div class="mon-over-bg">
|
||||||
|
|
@ -75,25 +75,29 @@
|
||||||
<div class="mon-over-content-item one">
|
<div class="mon-over-content-item one">
|
||||||
<div class="mv-title">本日用电</div>
|
<div class="mv-title">本日用电</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="mv-num">100.56</span><span class="mv-unit">w</span>
|
<span class="mv-num">{{block1.DailyElectricity}}</span><span
|
||||||
|
class="mv-unit">w</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mon-over-content-item two">
|
<div class="mon-over-content-item two">
|
||||||
<div class="mv-title">本月用电</div>
|
<div class="mv-title">本月用电</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="mv-num">100.56</span><span class="mv-unit">w</span>
|
<span class="mv-num">{{block1.MonthlyElectricity}}</span><span
|
||||||
|
class="mv-unit">w</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mon-over-content-item one">
|
<div class="mon-over-content-item one">
|
||||||
<div class="mv-title">本日用电</div>
|
<div class="mv-title">本月日均用电</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="mv-num">100.56</span><span class="mv-unit">w</span>
|
<span class="mv-num">{{block1.MonthAvgDailyElectricity}}</span><span
|
||||||
|
class="mv-unit">w</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mon-over-content-item two">
|
<div class="mon-over-content-item two">
|
||||||
<div class="mv-title">本月用电</div>
|
<div class="mv-title">本年日均用电</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="mv-num">100.56</span><span class="mv-unit">w</span>
|
<span class="mv-num">{{block1.YearAvgDailyElectricity}}</span><span
|
||||||
|
class="mv-unit">w</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -108,16 +112,21 @@
|
||||||
<div :class="eleLoadSel==1?'active':''" @click="doEleLoadSel(1)">
|
<div :class="eleLoadSel==1?'active':''" @click="doEleLoadSel(1)">
|
||||||
近七天
|
近七天
|
||||||
</div>
|
</div>
|
||||||
<el-select v-model="eleLoadSelArea" placeholder="请选择" class="ele-load-area-sel"
|
<el-select :key="regionElKey" v-model="eleLoadSelArea" placeholder="请选择"
|
||||||
style="width: 100px">
|
class="ele-load-area-sel" clearable @change="loadEleLoad" style="width: 100px">
|
||||||
<el-option v-for="(item,idx) in eleLoadArea" :key="idx" :label="item"
|
<el-option v-for="(it,idx) in regions" :key="it.regionId" :label="it.regionName"
|
||||||
:value="item">
|
:value="it.regionId">
|
||||||
</el-option>
|
</el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div :key="block2.elKey">
|
||||||
<power-chart id="eleLoadChart" className="ele-load-chart" width="100%"
|
<div v-if="!block2.datas || block2.datas.length==0" class="pw-no-data"
|
||||||
|
style="margin-top: 20px;">
|
||||||
|
暂无数据
|
||||||
|
</div>
|
||||||
|
<power-chart v-else id="eleLoadChart" className="ele-load-chart" width="100%"
|
||||||
height="240px" :render="renderEleLoad" />
|
height="240px" :render="renderEleLoad" />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</module-one-1-1>
|
</module-one-1-1>
|
||||||
|
|
@ -131,23 +140,39 @@
|
||||||
近七天
|
近七天
|
||||||
</div>
|
</div>
|
||||||
<el-select v-model="eleTrendSelArea" placeholder="请选择" class="ele-trend-area-sel"
|
<el-select v-model="eleTrendSelArea" placeholder="请选择" class="ele-trend-area-sel"
|
||||||
style="width: 100px">
|
style="width: 100px" @change="loadEleTrend" clearable>
|
||||||
<el-option v-for="(item,idx) in eleLoadArea" :key="idx" :label="item"
|
<el-option v-for="(it,idx) in regions" :key="it.regionId" :label="it.regionName"
|
||||||
:value="item">
|
:value="it.regionId">
|
||||||
</el-option>
|
</el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<power-chart id="ele-trendChart" className="ele-trend-chart" width="100%"
|
<div v-if="!block3.datas || block3.datas.length==0" class="pw-no-data"
|
||||||
height="240px" :render="renderEleTrendSel" />
|
style="margin-top: 20px;">
|
||||||
|
暂无数据
|
||||||
|
</div>
|
||||||
|
<power-chart v-else :key="block3.elKey" id="ele-trendChart"
|
||||||
|
className="ele-trend-chart" width="100%" height="240px"
|
||||||
|
:render="renderEleTrendSel" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</module-one-1-1>
|
</module-one-1-1>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="18">
|
<el-col :span="18">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="16" style="height: 640px; margin-bottom: 20px" class="power-center">
|
<el-col :span="16" style="height: 640px; margin-bottom: 20px" class="power-center power-map">
|
||||||
<module-two-2-2 label="场布图"> </module-two-2-2>
|
<module-two-2-2 label="场布图">
|
||||||
|
<div :style="'background-image:url('+mapInfo.url+')'" class="map-image">
|
||||||
|
<el-popover v-for="(it,idx) in mapInfo.regions"
|
||||||
|
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>
|
||||||
|
</el-popover>
|
||||||
|
</div>
|
||||||
|
</module-two-2-2>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<div style="padding: 10px">
|
<div style="padding: 10px">
|
||||||
|
|
@ -158,15 +183,18 @@
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<div class="time-study-value">
|
<div class="time-study-value">
|
||||||
<p>今日报警数</p>
|
<p>今日报警数</p>
|
||||||
<div class="analyse-num"><span v-cloak v-html="100"></span>次</div>
|
<div class="analyse-num"><span v-cloak
|
||||||
|
v-html="block6.todayWarningCount"></span>次</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="time-study-value">
|
<div class="time-study-value">
|
||||||
<p>本周报警数</p>
|
<p>本周报警数</p>
|
||||||
<div class="analyse-num"><span v-cloak v-html="2000"></span> 次</div>
|
<div class="analyse-num"><span v-cloak
|
||||||
|
v-html="block6.monthWarningCount"></span> 次</div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="16" class="warning-list">
|
<el-col :span="16" class="warning-list">
|
||||||
<div v-for="(it,idx) in warningData" class="warning-item" :key="idx">
|
<div v-for="(it,idx) in block6.typeWarningList" class="warning-item"
|
||||||
|
:key="idx">
|
||||||
<div class="warning-text">
|
<div class="warning-text">
|
||||||
<i class="el-icon-caret-top"></i>
|
<i class="el-icon-caret-top"></i>
|
||||||
<span class="w-title">{{it.title}}</span>
|
<span class="w-title">{{it.title}}</span>
|
||||||
|
|
@ -185,30 +213,88 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div v-if="warningList==null||warningList.length==0" class="not-data">暂无预警数据</div>
|
<div v-if="warningList==null||warningList.length==0" class="not-data">暂无预警数据</div>
|
||||||
<div id="warnListDiv" class="warn-list scroll" @mouseout="listMinMouseoutType" @mouseover="listMinMouseoverType">
|
<div id="warnListDiv" class="warn-list scroll" @mouseout="listMinMouseoutType"
|
||||||
<div :class="warningTypeIndex==idx?'active':''" v-for="(it,idx) in warningList" :key="idx" class="warn-item">
|
@mouseover="listMinMouseoverType">
|
||||||
<div class="warn-item-title">{{it.type=="t1"?'断相':it.type=="t2"?"电压不平衡":it.type=="t3"?"失流":"失压"}}</div>
|
<div :class="warningTypeIndex==idx?'active':''"
|
||||||
|
v-for="(it,idx) in block6.warningList" :key="idx" class="warn-item">
|
||||||
|
<div class="warn-item-title">
|
||||||
|
{{it.type=="t1"?'断相':it.type=="t2"?"电压不平衡":it.type=="t3"?"失流":"失压"}}
|
||||||
|
</div>
|
||||||
<div class="w-c-row1">
|
<div class="w-c-row1">
|
||||||
<div class="w-c-bg">
|
<div class="w-c-bg">
|
||||||
<svg v-if="it.type=='t1'" class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6371"><path d="M0 1024V0h1024v1024z m69.12-439.296v326.656a44.544 44.544 0 0 0 45.056 45.056H911.36c37.376 0 45.056-7.68 45.056-44.544v-302.08-25.6h-202.752v-68.096h204.8V112.128a44.544 44.544 0 0 0-44.544-44.544H113.152c-38.4 0-45.568 7.168-45.568 46.592V517.12h232.448a124.928 124.928 0 0 0 48.64-11.264c127.488-58.368 256-118.272 384-178.688l28.16 61.44c-15.872 8.192-26.624 13.312-41.472 19.456a2494.976 2494.976 0 0 0-233.472 111.104 512 512 0 0 1-307.2 66.56c-34.816-4.096-71.68-1.024-109.568-1.024z" p-id="6372"></path></svg>
|
<svg v-if="it.type=='t1'" class="icon"
|
||||||
<svg v-if="it.type=='t2'" class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7515"><path d="M773.743 804.865c-21.478 0-40.363-9.873-56.134-29.344-11.993-14.809-21.051-33.447-29.81-51.473-16.783-34.536-29.202-57.174-48.168-57.174-18.963 0-31.382 22.638-48.163 57.173-8.76 18.025-17.816 36.664-29.81 51.473-15.77 19.472-34.655 29.345-56.132 29.345-21.477 0-40.362-9.873-56.132-29.345-11.993-14.808-21.05-33.447-29.809-51.472-16.782-34.536-29.201-57.174-48.165-57.174-18.963 0-31.382 22.638-48.164 57.173-8.759 18.025-17.815 36.664-29.809 51.473-15.769 19.472-34.655 29.345-56.131 29.345s-40.362-9.873-56.131-29.345c-11.993-14.809-21.049-33.447-29.808-51.473-16.781-34.535-29.2-57.173-48.163-57.173v-42c21.477 0 40.362 9.873 56.131 29.345 11.993 14.809 21.049 33.447 29.808 51.473 16.781 34.535 29.2 57.173 48.163 57.173s31.382-22.638 48.164-57.173c8.759-18.025 17.815-36.664 29.809-51.473 15.769-19.472 34.655-29.345 56.131-29.345 21.477 0 40.363 9.873 56.132 29.345 11.993 14.809 21.05 33.447 29.809 51.473 16.782 34.535 29.201 57.173 48.165 57.173s31.383-22.638 48.165-57.174c8.759-18.025 17.815-36.664 29.808-51.472 15.77-19.472 34.655-29.345 56.132-29.345 21.478 0 40.363 9.873 56.134 29.344 11.993 14.809 21.051 33.447 29.81 51.473 16.783 34.536 29.202 57.174 48.168 57.174s31.385-22.638 48.168-57.174c8.759-18.025 17.816-36.664 29.81-51.473 15.77-19.471 34.655-29.344 56.133-29.344v42c-18.965 0-31.384 22.638-48.167 57.173-8.759 18.025-17.816 36.665-29.81 51.474-15.771 19.471-34.657 29.344-56.134 29.344zM773.743 552.779c-21.478 0-40.363-9.873-56.134-29.344-11.993-14.809-21.051-33.448-29.81-51.473-16.783-34.536-29.202-57.173-48.168-57.173-18.963 0-31.382 22.637-48.163 57.173-8.76 18.025-17.816 36.664-29.81 51.473-15.77 19.472-34.655 29.345-56.132 29.345-21.477 0-40.362-9.873-56.132-29.345-11.993-14.808-21.05-33.447-29.809-51.472-16.782-34.536-29.201-57.173-48.165-57.173-18.963 0-31.382 22.637-48.164 57.173-8.759 18.025-17.815 36.664-29.809 51.472-15.769 19.472-34.655 29.345-56.131 29.345s-40.362-9.873-56.131-29.345c-11.993-14.808-21.049-33.447-29.808-51.472-16.781-34.536-29.2-57.173-48.163-57.173v-42c21.477 0 40.362 9.873 56.131 29.345 11.993 14.808 21.049 33.447 29.808 51.472 16.781 34.536 29.2 57.173 48.163 57.173s31.382-22.637 48.164-57.173c8.759-18.025 17.815-36.664 29.809-51.472 15.769-19.472 34.655-29.345 56.131-29.345 21.477 0 40.363 9.873 56.132 29.344 11.993 14.809 21.05 33.448 29.809 51.473 16.782 34.536 29.201 57.173 48.165 57.173s31.383-22.638 48.165-57.173c8.759-18.025 17.815-36.664 29.808-51.473 15.77-19.471 34.655-29.344 56.132-29.344 21.478 0 40.363 9.873 56.134 29.344 11.993 14.808 21.051 33.447 29.81 51.473 16.783 34.536 29.202 57.173 48.168 57.173s31.385-22.638 48.168-57.174c8.759-18.025 17.816-36.664 29.81-51.473 15.77-19.471 34.655-29.344 56.133-29.344v42c-18.965 0-31.384 22.637-48.167 57.173-8.759 18.025-17.816 36.664-29.81 51.473-15.771 19.471-34.657 29.344-56.134 29.344z" fill="#040000" p-id="7516"></path><path d="M820.635 339.512l-62.4-174.578h38.227l44.18 129.207 42.752-129.207h37.393l-62.52 174.578h-37.632z" p-id="7517"></path></svg>
|
style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
|
||||||
<svg v-if="it.type=='t3'" class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10342"><path d="M796.444 924.444v33.195a66.36 66.36 0 0 1-66.36 66.361H293.916a66.36 66.36 0 0 1-66.36-66.36v-33.196h-45.74A124.928 124.928 0 0 1 56.89 799.516V124.928A124.928 124.928 0 0 1 181.817 0h660.366a124.928 124.928 0 0 1 124.928 124.928v674.588a124.928 124.928 0 0 1-124.928 124.928h-45.739zM181.817 85.334a39.595 39.595 0 0 0-39.595 39.594v674.588a39.595 39.595 0 0 0 39.595 39.595h660.366a39.595 39.595 0 0 0 39.595-39.595V124.928a39.595 39.595 0 0 0-39.595-39.595H181.817zM413.81 481.578l-62.663 89.301H225.678v-56.889h95.886l99.84-142.222 102.585 199.95 76.743-134.741 54.756 109.824h171.278v56.889H620.288l-22.898-45.91-76.018 133.462L413.81 481.607zM629.675 199.11l-42.966 65.678h81.735L535.552 412.444l48.398-102.5h-57.728l40.676-110.833h62.777z" p-id="10343"></path></svg>
|
viewBox="0 0 1024 1024" version="1.1"
|
||||||
<svg v-if="it.type=='t4'" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11150" class="icon" style="width: 1em; height: 1em; vertical-align: middle; fill: currentcolor; overflow: hidden;"><path d="M512 768c143.4 0 256 56.3 256 128s-112.6 128-256 128-256-56.3-256-128 112.6-128 256-128z" fill="#F4A214" opacity=".25" p-id="11151" style=""></path><path d="M512 853.5c71.7 0 128 18.9 128 42.5s-56.3 42.5-128 42.5-128-18.9-128-42.5 56.3-42.5 128-42.5z" fill="#F4A214" opacity=".502" p-id="11152"></path><path d="M800.8 217.1c45.6 116.7 14.3 249.9-78.3 334.3L512 917.5 297 546.8c-90.6-86.5-118.8-220.2-70.7-335.9C292.9 52.7 475.1-21 632.8 46.1c76.8 32.2 137.2 93.7 168 171z" fill="#F4A214" p-id="11153" style="
|
xmlns="http://www.w3.org/2000/svg" p-id="6371">
|
||||||
fill: transparent !important;">
|
<path
|
||||||
</path><path d="M512 0h3.6c66 0.5 130.6 21 184.8 58.4 54.3 36.9 96.3 89.6 119.8 151 48.1 123.9 16.4 264.7-81.4 355.8L512 960 280.1 560.1c-129-125.4-131.6-331.3-6.1-459.8 16.4-16.9 34.8-31.7 54.3-45.1C382.5 18.9 446.5 0 512 0z m0 874.5l193.5-336.9 2.6-2C823.3 430.1 831.5 251.4 726 136.2c-14.8-16.4-31.7-30.7-49.7-43-97.8-66.6-225.8-67.6-324.6-2.6-47.1 31.2-84.5 75.8-106 128-44.5 107.5-18.4 231.9 66 312.3l2 2L512 874.5z" fill="#FFFFFF" p-id="11154"></path><path d="M256 341.5c0-141.3 114.7-256 256-256s256 114.7 256 256-114.7 256-256 256-256-114.7-256-256z m469.5 0C725.5 223.7 629.8 128 512 128s-213.5 95.7-213.5 213.5 95.7 213 213.5 213 213.5-95.2 213.5-213z" fill="#FFFFFF" p-id="11155"></path><path d="M648.2 199.4v28.2H424.7v72.2c-1.2 73.4-12.3 131.9-33.2 175.5l-22.3-19.8c16.7-37.2 25.4-89.1 26-155.6V199.4h253z m-208 105h83.1v-59.2h29.1v59.2h86.5v28.8h-86.5v101.1H656v28.8H423.5v-28.8h99.8v-101h-83.1v-28.9z m154.4 41.9c17.2 24 30.6 45.2 40.3 63.6l-23.6 16.4c-9.5-19-22.7-40.8-39.7-65.4l23-14.6z" fill="#FFFFFF" p-id="11156"></path><path d="M693.4 376c-61 0-110.4 49.2-110.4 110s49.4 110 110.4 110S803 546.8 803 486s-49.5-110-109.6-110z" fill="#FFFFFF" p-id="11157" style="
|
d="M0 1024V0h1024v1024z m69.12-439.296v326.656a44.544 44.544 0 0 0 45.056 45.056H911.36c37.376 0 45.056-7.68 45.056-44.544v-302.08-25.6h-202.752v-68.096h204.8V112.128a44.544 44.544 0 0 0-44.544-44.544H113.152c-38.4 0-45.568 7.168-45.568 46.592V517.12h232.448a124.928 124.928 0 0 0 48.64-11.264c127.488-58.368 256-118.272 384-178.688l28.16 61.44c-15.872 8.192-26.624 13.312-41.472 19.456a2494.976 2494.976 0 0 0-233.472 111.104 512 512 0 0 1-307.2 66.56c-34.816-4.096-71.68-1.024-109.568-1.024z"
|
||||||
|
p-id="6372"></path>
|
||||||
|
</svg>
|
||||||
|
<svg v-if="it.type=='t2'" class="icon"
|
||||||
|
style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
|
||||||
|
viewBox="0 0 1024 1024" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" p-id="7515">
|
||||||
|
<path
|
||||||
|
d="M773.743 804.865c-21.478 0-40.363-9.873-56.134-29.344-11.993-14.809-21.051-33.447-29.81-51.473-16.783-34.536-29.202-57.174-48.168-57.174-18.963 0-31.382 22.638-48.163 57.173-8.76 18.025-17.816 36.664-29.81 51.473-15.77 19.472-34.655 29.345-56.132 29.345-21.477 0-40.362-9.873-56.132-29.345-11.993-14.808-21.05-33.447-29.809-51.472-16.782-34.536-29.201-57.174-48.165-57.174-18.963 0-31.382 22.638-48.164 57.173-8.759 18.025-17.815 36.664-29.809 51.473-15.769 19.472-34.655 29.345-56.131 29.345s-40.362-9.873-56.131-29.345c-11.993-14.809-21.049-33.447-29.808-51.473-16.781-34.535-29.2-57.173-48.163-57.173v-42c21.477 0 40.362 9.873 56.131 29.345 11.993 14.809 21.049 33.447 29.808 51.473 16.781 34.535 29.2 57.173 48.163 57.173s31.382-22.638 48.164-57.173c8.759-18.025 17.815-36.664 29.809-51.473 15.769-19.472 34.655-29.345 56.131-29.345 21.477 0 40.363 9.873 56.132 29.345 11.993 14.809 21.05 33.447 29.809 51.473 16.782 34.535 29.201 57.173 48.165 57.173s31.383-22.638 48.165-57.174c8.759-18.025 17.815-36.664 29.808-51.472 15.77-19.472 34.655-29.345 56.132-29.345 21.478 0 40.363 9.873 56.134 29.344 11.993 14.809 21.051 33.447 29.81 51.473 16.783 34.536 29.202 57.174 48.168 57.174s31.385-22.638 48.168-57.174c8.759-18.025 17.816-36.664 29.81-51.473 15.77-19.471 34.655-29.344 56.133-29.344v42c-18.965 0-31.384 22.638-48.167 57.173-8.759 18.025-17.816 36.665-29.81 51.474-15.771 19.471-34.657 29.344-56.134 29.344zM773.743 552.779c-21.478 0-40.363-9.873-56.134-29.344-11.993-14.809-21.051-33.448-29.81-51.473-16.783-34.536-29.202-57.173-48.168-57.173-18.963 0-31.382 22.637-48.163 57.173-8.76 18.025-17.816 36.664-29.81 51.473-15.77 19.472-34.655 29.345-56.132 29.345-21.477 0-40.362-9.873-56.132-29.345-11.993-14.808-21.05-33.447-29.809-51.472-16.782-34.536-29.201-57.173-48.165-57.173-18.963 0-31.382 22.637-48.164 57.173-8.759 18.025-17.815 36.664-29.809 51.472-15.769 19.472-34.655 29.345-56.131 29.345s-40.362-9.873-56.131-29.345c-11.993-14.808-21.049-33.447-29.808-51.472-16.781-34.536-29.2-57.173-48.163-57.173v-42c21.477 0 40.362 9.873 56.131 29.345 11.993 14.808 21.049 33.447 29.808 51.472 16.781 34.536 29.2 57.173 48.163 57.173s31.382-22.637 48.164-57.173c8.759-18.025 17.815-36.664 29.809-51.472 15.769-19.472 34.655-29.345 56.131-29.345 21.477 0 40.363 9.873 56.132 29.344 11.993 14.809 21.05 33.448 29.809 51.473 16.782 34.536 29.201 57.173 48.165 57.173s31.383-22.638 48.165-57.173c8.759-18.025 17.815-36.664 29.808-51.473 15.77-19.471 34.655-29.344 56.132-29.344 21.478 0 40.363 9.873 56.134 29.344 11.993 14.808 21.051 33.447 29.81 51.473 16.783 34.536 29.202 57.173 48.168 57.173s31.385-22.638 48.168-57.174c8.759-18.025 17.816-36.664 29.81-51.473 15.77-19.471 34.655-29.344 56.133-29.344v42c-18.965 0-31.384 22.637-48.167 57.173-8.759 18.025-17.816 36.664-29.81 51.473-15.771 19.471-34.657 29.344-56.134 29.344z"
|
||||||
|
fill="#040000" p-id="7516"></path>
|
||||||
|
<path
|
||||||
|
d="M820.635 339.512l-62.4-174.578h38.227l44.18 129.207 42.752-129.207h37.393l-62.52 174.578h-37.632z"
|
||||||
|
p-id="7517"></path>
|
||||||
|
</svg>
|
||||||
|
<svg v-if="it.type=='t3'" class="icon"
|
||||||
|
style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
|
||||||
|
viewBox="0 0 1024 1024" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" p-id="10342">
|
||||||
|
<path
|
||||||
|
d="M796.444 924.444v33.195a66.36 66.36 0 0 1-66.36 66.361H293.916a66.36 66.36 0 0 1-66.36-66.36v-33.196h-45.74A124.928 124.928 0 0 1 56.89 799.516V124.928A124.928 124.928 0 0 1 181.817 0h660.366a124.928 124.928 0 0 1 124.928 124.928v674.588a124.928 124.928 0 0 1-124.928 124.928h-45.739zM181.817 85.334a39.595 39.595 0 0 0-39.595 39.594v674.588a39.595 39.595 0 0 0 39.595 39.595h660.366a39.595 39.595 0 0 0 39.595-39.595V124.928a39.595 39.595 0 0 0-39.595-39.595H181.817zM413.81 481.578l-62.663 89.301H225.678v-56.889h95.886l99.84-142.222 102.585 199.95 76.743-134.741 54.756 109.824h171.278v56.889H620.288l-22.898-45.91-76.018 133.462L413.81 481.607zM629.675 199.11l-42.966 65.678h81.735L535.552 412.444l48.398-102.5h-57.728l40.676-110.833h62.777z"
|
||||||
|
p-id="10343"></path>
|
||||||
|
</svg>
|
||||||
|
<svg v-if="it.type=='t4'" viewBox="0 0 1024 1024" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" p-id="11150" class="icon"
|
||||||
|
style="width: 1em; height: 1em; vertical-align: middle; fill: currentcolor; overflow: hidden;">
|
||||||
|
<path
|
||||||
|
d="M512 768c143.4 0 256 56.3 256 128s-112.6 128-256 128-256-56.3-256-128 112.6-128 256-128z"
|
||||||
|
fill="#F4A214" opacity=".25" p-id="11151" style=""></path>
|
||||||
|
<path
|
||||||
|
d="M512 853.5c71.7 0 128 18.9 128 42.5s-56.3 42.5-128 42.5-128-18.9-128-42.5 56.3-42.5 128-42.5z"
|
||||||
|
fill="#F4A214" opacity=".502" p-id="11152"></path>
|
||||||
|
<path
|
||||||
|
d="M800.8 217.1c45.6 116.7 14.3 249.9-78.3 334.3L512 917.5 297 546.8c-90.6-86.5-118.8-220.2-70.7-335.9C292.9 52.7 475.1-21 632.8 46.1c76.8 32.2 137.2 93.7 168 171z"
|
||||||
|
fill="#F4A214" p-id="11153" style="
|
||||||
fill: transparent !important;">
|
fill: transparent !important;">
|
||||||
</path>
|
</path>
|
||||||
<path d="M693.4 376c60.1 0 109.6 49.2 109.6 110s-48.6 110-109.6 110S583 546.8 583 486s49.4-110 110.4-110m0-18c-34.3 0-66.5 13.3-90.8 37.5-24.3 24.1-37.6 56.3-37.6 90.5s13.4 66.4 37.6 90.5c24.3 24.2 56.5 37.5 90.8 37.5s66.4-13.3 90.4-37.5c23.9-24.1 37.1-56.2 37.1-90.5 0.1-70.6-57.1-128-127.5-128z" fill="#F4A214" p-id="11158"></path>
|
<path
|
||||||
<path d="M707.3 495.1c11.3 24.6 31.8 41.3 63.2 48.1-3.2 3.4-7.9 9.9-9.9 14.1-32.6-8.6-53-26.6-65.8-54.4-8.3 21.9-26.6 41.6-65.3 54.3-1.8-3.6-6.2-10-9.6-13 36.8-12 53.3-29.6 60.4-49.1h-58v-15.2h61.9c1.1-7 1.5-14.1 1.5-21.1v-7.9h-34c-4.5 9.1-9.6 17-14.7 23.3-3.1-2.4-10.5-6.2-14.4-7.9 12-13.1 21.7-34.3 27.4-55.6l15.9 3.4c-2.1 7.3-4.5 14.6-7.5 21.5h27.4v-27.1h15.7v27.1h51.4v15.2h-51.4v8.1c0 7-0.3 13.9-1.1 20.9h65.9V495h-59z" p-id="11159"></path>
|
d="M512 0h3.6c66 0.5 130.6 21 184.8 58.4 54.3 36.9 96.3 89.6 119.8 151 48.1 123.9 16.4 264.7-81.4 355.8L512 960 280.1 560.1c-129-125.4-131.6-331.3-6.1-459.8 16.4-16.9 34.8-31.7 54.3-45.1C382.5 18.9 446.5 0 512 0z m0 874.5l193.5-336.9 2.6-2C823.3 430.1 831.5 251.4 726 136.2c-14.8-16.4-31.7-30.7-49.7-43-97.8-66.6-225.8-67.6-324.6-2.6-47.1 31.2-84.5 75.8-106 128-44.5 107.5-18.4 231.9 66 312.3l2 2L512 874.5z"
|
||||||
</svg></div>
|
fill="#FFFFFF" p-id="11154"></path>
|
||||||
|
<path
|
||||||
|
d="M256 341.5c0-141.3 114.7-256 256-256s256 114.7 256 256-114.7 256-256 256-256-114.7-256-256z m469.5 0C725.5 223.7 629.8 128 512 128s-213.5 95.7-213.5 213.5 95.7 213 213.5 213 213.5-95.2 213.5-213z"
|
||||||
|
fill="#FFFFFF" p-id="11155"></path>
|
||||||
|
<path
|
||||||
|
d="M648.2 199.4v28.2H424.7v72.2c-1.2 73.4-12.3 131.9-33.2 175.5l-22.3-19.8c16.7-37.2 25.4-89.1 26-155.6V199.4h253z m-208 105h83.1v-59.2h29.1v59.2h86.5v28.8h-86.5v101.1H656v28.8H423.5v-28.8h99.8v-101h-83.1v-28.9z m154.4 41.9c17.2 24 30.6 45.2 40.3 63.6l-23.6 16.4c-9.5-19-22.7-40.8-39.7-65.4l23-14.6z"
|
||||||
|
fill="#FFFFFF" p-id="11156"></path>
|
||||||
|
<path
|
||||||
|
d="M693.4 376c-61 0-110.4 49.2-110.4 110s49.4 110 110.4 110S803 546.8 803 486s-49.5-110-109.6-110z"
|
||||||
|
fill="#FFFFFF" p-id="11157" style="
|
||||||
|
fill: transparent !important;">
|
||||||
|
</path>
|
||||||
|
<path
|
||||||
|
d="M693.4 376c60.1 0 109.6 49.2 109.6 110s-48.6 110-109.6 110S583 546.8 583 486s49.4-110 110.4-110m0-18c-34.3 0-66.5 13.3-90.8 37.5-24.3 24.1-37.6 56.3-37.6 90.5s13.4 66.4 37.6 90.5c24.3 24.2 56.5 37.5 90.8 37.5s66.4-13.3 90.4-37.5c23.9-24.1 37.1-56.2 37.1-90.5 0.1-70.6-57.1-128-127.5-128z"
|
||||||
|
fill="#F4A214" p-id="11158"></path>
|
||||||
|
<path
|
||||||
|
d="M707.3 495.1c11.3 24.6 31.8 41.3 63.2 48.1-3.2 3.4-7.9 9.9-9.9 14.1-32.6-8.6-53-26.6-65.8-54.4-8.3 21.9-26.6 41.6-65.3 54.3-1.8-3.6-6.2-10-9.6-13 36.8-12 53.3-29.6 60.4-49.1h-58v-15.2h61.9c1.1-7 1.5-14.1 1.5-21.1v-7.9h-34c-4.5 9.1-9.6 17-14.7 23.3-3.1-2.4-10.5-6.2-14.4-7.9 12-13.1 21.7-34.3 27.4-55.6l15.9 3.4c-2.1 7.3-4.5 14.6-7.5 21.5h27.4v-27.1h15.7v27.1h51.4v15.2h-51.4v8.1c0 7-0.3 13.9-1.1 20.9h65.9V495h-59z"
|
||||||
|
p-id="11159"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
<div style="margin-left: 10px;">
|
<div style="margin-left: 10px;">
|
||||||
<div class="w-c-row1-t">{{it.title}}</div>
|
<div class="w-c-row1-t">{{it.title}}</div>
|
||||||
<div class="w-c-row1-date">{{toDateTime(it.date)}}</div>
|
<div class="w-c-row1-date">{{toDateTime(it.timeStamp)}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-c-row2">
|
<div class="w-c-row2">
|
||||||
<div><span class="w-c-row2-l">区域:</span><span class="w-c-row2-t" :title="it.area">{{it.area}}</span></div>
|
<div><span class="w-c-row2-l">区域:</span><span class="w-c-row2-t"
|
||||||
<div><span class="w-c-row2-l">地点:</span><span class="w-c-row2-t" :title="it.addr">{{it.addr}}</span></div>
|
:title="it.region">{{it.region}}</span></div>
|
||||||
|
<div><span class="w-c-row2-l">地点:</span><span class="w-c-row2-t"
|
||||||
|
:title="it.address">{{it.address}}</span></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -226,16 +312,21 @@
|
||||||
<div :class="currentTrendSel==1?'active':''" @click="doCurrentTrendSel(1)">
|
<div :class="currentTrendSel==1?'active':''" @click="doCurrentTrendSel(1)">
|
||||||
近七天
|
近七天
|
||||||
</div>
|
</div>
|
||||||
<el-select v-model="currentTrendSelArea" placeholder="请选择" class="current-trend-area-sel"
|
<el-select v-model="currentTrendSelArea" placeholder="请选择"
|
||||||
style="width: 100px">
|
class="current-trend-area-sel" style="width: 100px"
|
||||||
<el-option v-for="(item,idx) in currentLoadArea" :key="idx" :label="item"
|
@change="loadCurrentTrend" clearable>
|
||||||
:value="item">
|
<el-option v-for="(it,idx) in regions" :key="it.regionId"
|
||||||
</el-option>
|
:label="it.regionName" :value="it.regionId">
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<power-chart id="current-trendChart" className="current-trend-chart" width="100%"
|
<div v-if="!block4.datas || block4.datas.length==0" class="pw-no-data"
|
||||||
height="240px" :render="renderCurrentTrendSel" />
|
style="margin-top: 20px;">
|
||||||
|
暂无数据
|
||||||
|
</div>
|
||||||
|
<power-chart v-else :key="block4.elKey" id="current-trendChart"
|
||||||
|
className="current-trend-chart" width="100%" height="240px"
|
||||||
|
:render="renderCurrentTrendSel" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</module-one-1-1>
|
</module-one-1-1>
|
||||||
|
|
@ -278,26 +369,91 @@
|
||||||
<!-- 请求依赖 -->
|
<!-- 请求依赖 -->
|
||||||
<script src="https://cdn.makalu.cc/js/axios/axios.min.js"></script>
|
<script src="https://cdn.makalu.cc/js/axios/axios.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
let requestUrl =
|
var mapDatas = [
|
||||||
"https://jzgj.crfeb.com.cn/largeScreen/digitalConstruction/";
|
{
|
||||||
let deptId = 131;
|
projectId: 3,
|
||||||
|
url: './power/prj3.png',
|
||||||
|
regions: [
|
||||||
|
{
|
||||||
|
"regionId": 1,
|
||||||
|
"regionName": "区域1",
|
||||||
|
x:400,
|
||||||
|
y:300
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"regionId": 2,
|
||||||
|
"regionName": "区域1245",
|
||||||
|
x:470,
|
||||||
|
y:490
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"regionId": 3,
|
||||||
|
"regionName": "区域2",
|
||||||
|
x:770,
|
||||||
|
y:160
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
let baseUrl = 'https://aqzg-t.makalu.cc';
|
||||||
|
let projectId = 3;
|
||||||
|
let regionId = 1;
|
||||||
var vm = new Vue({
|
var vm = new Vue({
|
||||||
el: "#app",
|
el: "#app",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
mapInfo:null,
|
||||||
eleLoadSel: 0,
|
eleLoadSel: 0,
|
||||||
eleLoadArea: ["全部区域", "区域A", "区域B", "区域C"],
|
regions: [],
|
||||||
|
regionElKey: 0,
|
||||||
eleLoadSelArea: "",
|
eleLoadSelArea: "",
|
||||||
eleTrendSel: "",
|
eleTrendSel: "",
|
||||||
eleTrendSelArea: "",
|
eleTrendSelArea: "",
|
||||||
currentTrendSel: "",
|
currentTrendSel: "",
|
||||||
currentTrendSelArea: "",
|
currentTrendSelArea: "",
|
||||||
warningData:[
|
block1: {
|
||||||
{title:'断相',count:10,w:0},
|
total: 0,
|
||||||
{title:'电压不平衡',count:12,w:0},
|
online: 0,
|
||||||
{title:'失流',count:15,w:0},
|
DailyElectricity: 0,
|
||||||
{title:'失压',count:18,w:0},
|
MonthlyElectricity: 0,
|
||||||
],
|
MonthAvgDailyElectricity: 0,
|
||||||
|
YearAvgDailyElectricity: 0,
|
||||||
|
},
|
||||||
|
block2: {
|
||||||
|
elKey: 0,
|
||||||
|
titles: [],
|
||||||
|
datas: [],
|
||||||
|
rotate: 0
|
||||||
|
},
|
||||||
|
block3: {
|
||||||
|
elKey: 0,
|
||||||
|
areas: [],
|
||||||
|
titles: [],
|
||||||
|
datas: [],
|
||||||
|
rotate: 0
|
||||||
|
},
|
||||||
|
block4: {
|
||||||
|
elKey: 0,
|
||||||
|
max: 0,
|
||||||
|
titles: [],
|
||||||
|
datas: [],
|
||||||
|
rotate: 0
|
||||||
|
},
|
||||||
|
block5: {
|
||||||
|
elKey: 0,
|
||||||
|
areas: [],
|
||||||
|
titles: [],
|
||||||
|
datas: [],
|
||||||
|
rotate: 0
|
||||||
|
},
|
||||||
|
block6: {
|
||||||
|
todayWarningCount: 0,
|
||||||
|
monthWarningCount: 0,
|
||||||
|
typeWarningList: [],
|
||||||
|
warningList: []
|
||||||
|
},
|
||||||
warningList: [
|
warningList: [
|
||||||
{ type: 't1', title: '当前区域断相', date: new Date(), area: '区域A', addr: '3号线2期-5分部-工区西场地-广州市荔湾区华飞捷诚汽车服务中心-停车场 ' },
|
{ type: 't1', title: '当前区域断相', date: new Date(), area: '区域A', addr: '3号线2期-5分部-工区西场地-广州市荔湾区华飞捷诚汽车服务中心-停车场 ' },
|
||||||
{ type: 't2', title: '当前区域电压不平衡', date: new Date(), area: '区域B', addr: '3号线2期-5分部-工区西场地-广州市荔湾区' },
|
{ type: 't2', title: '当前区域电压不平衡', date: new Date(), area: '区域B', addr: '3号线2期-5分部-工区西场地-广州市荔湾区' },
|
||||||
|
|
@ -313,11 +469,24 @@
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
//预警类型 定时器
|
//预警类型 定时器
|
||||||
this.warningTypeInterval = setInterval(this.automaticRollType,5000);
|
this.warningTypeInterval = setInterval(this.automaticRollType, 1000 * 60);
|
||||||
|
this.loadRegions();
|
||||||
|
this.loadMap();
|
||||||
this.init();
|
this.init();
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
loadMap(){
|
||||||
|
let maps=mapDatas.filter(d=>d.projectId==projectId);
|
||||||
|
this.mapInfo=maps.length>0?maps[0]:null;
|
||||||
|
},
|
||||||
|
loadRegions() {
|
||||||
|
let url = '/api/device/smart_meter/region_information';
|
||||||
|
this.post(url, { projectId: projectId }).then(d => {
|
||||||
|
this.regions = d.data?.data || [];
|
||||||
|
this.regionElKey++;
|
||||||
|
});
|
||||||
|
},
|
||||||
//报警类型
|
//报警类型
|
||||||
automaticRollType() {
|
automaticRollType() {
|
||||||
var height = $("#warnListDiv .warn-item").innerHeight()
|
var height = $("#warnListDiv .warn-item").innerHeight()
|
||||||
|
|
@ -338,26 +507,285 @@
|
||||||
return moment(dt).format("YYYY年MM月DD日 HH:mm:ss");
|
return moment(dt).format("YYYY年MM月DD日 HH:mm:ss");
|
||||||
},
|
},
|
||||||
init() {
|
init() {
|
||||||
|
this.loadCount();
|
||||||
|
this.loadElectricity_information();
|
||||||
|
this.loadEleLoad();
|
||||||
|
this.loadEleTrend();
|
||||||
|
this.loadCurrentTrend();
|
||||||
|
this.loadAreaEleTrendSel();
|
||||||
|
this.loadWarningCount();
|
||||||
|
this.loadWarningList();
|
||||||
|
setTimeout(this.init, 10000)
|
||||||
|
},
|
||||||
|
getDates(n) {
|
||||||
|
let dt1 = moment(new Date()).format("YYYY-MM-DD 23:59:59");
|
||||||
|
if (n == 0) {
|
||||||
|
return {
|
||||||
|
dtStart: moment(new Date()).format("YYYY-MM-DD 00:00:00"),
|
||||||
|
dtEnd: dt1
|
||||||
|
}
|
||||||
|
} else if (n == 365) {
|
||||||
|
let dt2 = moment(new Date()).add(-1, "years").format("YYYY-MM-DD 00:00:00");
|
||||||
|
return {
|
||||||
|
dtStart: dt2,
|
||||||
|
dtEnd: dt1
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
let dt2 = moment(new Date()).add(-1 * n, "days").format("YYYY-MM-DD 00:00:00");
|
||||||
|
return {
|
||||||
|
dtStart: dt2,
|
||||||
|
dtEnd: dt1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//用电负荷
|
||||||
|
loadEleLoad() {
|
||||||
|
let postData = {
|
||||||
|
projectId: projectId,
|
||||||
|
isRegion: false,
|
||||||
|
};
|
||||||
|
if (this.eleLoadSel == 0) {
|
||||||
|
//今日
|
||||||
|
let dts = this.getDates(0);
|
||||||
|
postData.startTime = dts.dtStart;
|
||||||
|
postData.endTime = dts.dtEnd;
|
||||||
|
this.block2.rotate = 0;
|
||||||
|
} else {
|
||||||
|
//近七天
|
||||||
|
let dts = this.getDates(7);
|
||||||
|
postData.startTime = dts.dtStart;
|
||||||
|
postData.endTime = dts.dtEnd;
|
||||||
|
this.block2.rotate = 45;
|
||||||
|
}
|
||||||
|
if (this.eleLoadSelArea) {
|
||||||
|
postData.regionId = this.eleLoadSelArea;
|
||||||
|
}
|
||||||
|
let url = '/api/device/smart_meter/electricity_load';
|
||||||
|
this.post(url, postData).then(d => {
|
||||||
|
let data = d.data?.data || [];
|
||||||
|
if (data.length > 0) {
|
||||||
|
let list = (data[0].list || []);
|
||||||
|
this.block2.titles = list.map(it => it.time);
|
||||||
|
this.block2.datas = list.map(it => it.load);
|
||||||
|
} else {
|
||||||
|
this.block2.titles = [];
|
||||||
|
this.block2.datas = [];
|
||||||
|
}
|
||||||
|
this.block2.elKey++;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
loadEleTrend() {
|
||||||
|
let postData = {
|
||||||
|
projectId: projectId,
|
||||||
|
isRegion: false,
|
||||||
|
};
|
||||||
|
if (this.eleTrendSel == 0) {
|
||||||
|
//今日
|
||||||
|
let dts = this.getDates(0);
|
||||||
|
postData.startTime = dts.dtStart;
|
||||||
|
postData.endTime = dts.dtEnd;
|
||||||
|
this.block3.rotate = 0;
|
||||||
|
} else {
|
||||||
|
//近七天
|
||||||
|
let dts = this.getDates(7);
|
||||||
|
postData.startTime = dts.dtStart;
|
||||||
|
postData.endTime = dts.dtEnd;
|
||||||
|
this.block3.rotate = 45;
|
||||||
|
}
|
||||||
|
if (this.eleTrendSelArea) {
|
||||||
|
postData.regionId = this.eleTrendSelArea;
|
||||||
|
}
|
||||||
|
let url = '/api/device/smart_meter/electricity_consumption_trend';
|
||||||
|
this.post(url, postData).then(d => {
|
||||||
|
let data = d.data?.data || [];
|
||||||
|
if (data.length > 0) {
|
||||||
|
let list = data[0].list || [];
|
||||||
|
this.block3.areas = data.map(it => it.regionName);
|
||||||
|
this.block3.titles = list.map(it => it.time);
|
||||||
|
this.block3.datas = data.map(it => {
|
||||||
|
return {
|
||||||
|
name: it.regionName,
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
data: it.list.map(item => item.statistics)
|
||||||
|
};
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.block3.areas = [];
|
||||||
|
this.block3.titles = [];
|
||||||
|
this.block3.datas = [];
|
||||||
|
}
|
||||||
|
this.block3.elKey++;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
loadCurrentTrend() {
|
||||||
|
let postData = {
|
||||||
|
projectId: projectId,
|
||||||
|
isRegion: false,
|
||||||
|
};
|
||||||
|
if (this.currentTrendSel == 0) {
|
||||||
|
//今日
|
||||||
|
let dts = this.getDates(0);
|
||||||
|
postData.startTime = dts.dtStart;
|
||||||
|
postData.endTime = dts.dtEnd;
|
||||||
|
} else {
|
||||||
|
//近七天
|
||||||
|
let dts = this.getDates(7);
|
||||||
|
postData.startTime = dts.dtStart;
|
||||||
|
postData.endTime = dts.dtEnd;
|
||||||
|
}
|
||||||
|
if (this.currentTrendSelArea) {
|
||||||
|
postData.regionId = this.currentTrendSelArea;
|
||||||
|
}
|
||||||
|
let url = '/api/device/smart_meter/current_tendency';
|
||||||
|
this.post(url, postData).then(d => {
|
||||||
|
let data = d.data?.data || [];
|
||||||
|
if (data.length > 0) {
|
||||||
|
let list = data[0].list || [];
|
||||||
|
this.block4.titles = list.map(it => it.time);
|
||||||
|
let tmps = [{
|
||||||
|
name: "A相",
|
||||||
|
type: "bar",
|
||||||
|
data: [],
|
||||||
|
stack: 'A相',
|
||||||
|
barWidth: 10,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'B相',
|
||||||
|
type: 'bar',
|
||||||
|
data: [],
|
||||||
|
stack: 'A相',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'C相',
|
||||||
|
type: 'bar',
|
||||||
|
data: [],
|
||||||
|
stack: 'A相',
|
||||||
|
}
|
||||||
|
];
|
||||||
|
let max = 0;
|
||||||
|
list.forEach(it => {
|
||||||
|
tmps[0].data.push(it.A);
|
||||||
|
tmps[1].data.push(it.B);
|
||||||
|
tmps[2].data.push(it.C);
|
||||||
|
let curMax = Math.floor(it.A + it.B + it.C) + 1
|
||||||
|
if (curMax > max) {
|
||||||
|
max = curMax;
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
this.block4.max = max;
|
||||||
|
this.block4.datas = tmps;
|
||||||
|
} else {
|
||||||
|
this.block4.titles = [];
|
||||||
|
this.block4.datas = [];
|
||||||
|
}
|
||||||
|
this.block4.rotate = this.currentTrendSel == 0 ? 0 : 45;
|
||||||
|
this.block4.elKey++;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
loadAreaEleTrendSel() {
|
||||||
|
let postData = {
|
||||||
|
projectId: projectId,
|
||||||
|
isRegion: false,
|
||||||
|
};
|
||||||
|
let dts = this.getDates(365);
|
||||||
|
postData.startTime = dts.dtStart;
|
||||||
|
postData.endTime = dts.dtEnd;
|
||||||
|
let url = '/api/device/smart_meter/electricity_consumption_trend'
|
||||||
|
this.post(url, postData).then(d => {
|
||||||
|
let data = d.data?.data || [];
|
||||||
|
if (data.length > 0) { }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//获取智能电表警告计数【预警概况】
|
||||||
|
loadWarningCount() {
|
||||||
|
let url = "/api/device/smart_meter/warning_count";
|
||||||
|
let postData = { projectId: projectId };
|
||||||
|
this.post(url, postData).then(d => {
|
||||||
|
let data = d.data?.data || {};
|
||||||
|
this.block6.todayWarningCount = data.todayWarningCount || 0;
|
||||||
|
this.block6.monthWarningCount = data.monthWarningCount || 0;
|
||||||
|
let tmps = (data.typeWarningList || []).map((it, idx) => {
|
||||||
|
return {
|
||||||
|
count: it.count,
|
||||||
|
w: 0,
|
||||||
|
title: ["断相", "电压不平衡", "失流", "失压"][idx]
|
||||||
|
}
|
||||||
|
});
|
||||||
let tmp = 2;
|
let tmp = 2;
|
||||||
this.warningData.forEach(d=>{
|
tmps.forEach(d => {
|
||||||
if (d.count > tmp) {
|
if (d.count > tmp) {
|
||||||
tmp = d.count;
|
tmp = d.count;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
tmp = tmp + 2;
|
tmp = tmp + 2;
|
||||||
this.warningData.forEach(d=>{
|
tmps.forEach(d => {
|
||||||
d.w = (d.count * 100.0 / tmp).toFixed(2);
|
d.w = (d.count * 100.0 / tmp).toFixed(2);
|
||||||
});
|
});
|
||||||
|
this.block6.typeWarningList = tmps;
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
//获取智能电表警告列表【预警概况】
|
||||||
|
loadWarningList() {
|
||||||
|
let url = "/api/device/smart_meter/warning_list?pageNum=1&pageSize=10";
|
||||||
|
let postData = { projectId: projectId };
|
||||||
|
this.post(url, postData).then(d => {
|
||||||
|
this.block6.warningList = (d.data?.data?.rows || []).map(it => {
|
||||||
|
if (it.warningType == "yiyi") {
|
||||||
|
it.type = "t1";
|
||||||
|
it.title = "当前区域断相";
|
||||||
|
}
|
||||||
|
if (it.warningType == "erer") {
|
||||||
|
it.type = "t2";
|
||||||
|
it.title = "当前区域电压不平衡";
|
||||||
|
}
|
||||||
|
if (it.warningType == "sn") {
|
||||||
|
it.type = "t3";
|
||||||
|
it.title = "当前区域失流";
|
||||||
|
}
|
||||||
|
if (it.warningType == "ss") {
|
||||||
|
it.type = "t4";
|
||||||
|
it.title = "当前区域失压";
|
||||||
|
}
|
||||||
|
it.address = it.address || "暂无";
|
||||||
|
return it;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
post(url, data) {
|
||||||
|
return axios.post(baseUrl + url, data);
|
||||||
|
},
|
||||||
|
loadCount() {
|
||||||
|
let url = '/api/device/smart_meter/count'
|
||||||
|
this.post(url, { projectId: projectId }).then(d => {
|
||||||
|
let data = d?.data?.data || {};
|
||||||
|
this.block1.total = data.total || 0;
|
||||||
|
this.block1.online = data.online || 0;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
loadElectricity_information() {
|
||||||
|
let url = '/api/device/smart_meter/electricity_information'
|
||||||
|
this.post(url, { projectId: projectId }).then(d => {
|
||||||
|
let data = d?.data?.data || {};
|
||||||
|
this.block1.DailyElectricity = (data.DailyElectricity || 0).toFixed(2);
|
||||||
|
this.block1.MonthlyElectricity = (data.MonthlyElectricity || 0).toFixed(2)
|
||||||
|
this.block1.MonthAvgDailyElectricity = (data.MonthAvgDailyElectricity || 0).toFixed(2)
|
||||||
|
this.block1.YearAvgDailyElectricity = (data.YearAvgDailyElectricity || 0).toFixed(2)
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
doEleLoadSel(n) {
|
doEleLoadSel(n) {
|
||||||
this.eleLoadSel = n;
|
this.eleLoadSel = n;
|
||||||
|
this.loadEleLoad();
|
||||||
},
|
},
|
||||||
doEleTrendSel(n) {
|
doEleTrendSel(n) {
|
||||||
this.eleTrendSel = n;
|
this.eleTrendSel = n;
|
||||||
|
this.loadEleTrend();
|
||||||
},
|
},
|
||||||
doCurrentTrendSel(n) {
|
doCurrentTrendSel(n) {
|
||||||
this.currentTrendSel = n;
|
this.currentTrendSel = n;
|
||||||
|
this.loadCurrentTrend();
|
||||||
},
|
},
|
||||||
renderEleLoad(opt) {
|
renderEleLoad(opt) {
|
||||||
let option = {
|
let option = {
|
||||||
|
|
@ -365,7 +793,7 @@
|
||||||
left: "5%",
|
left: "5%",
|
||||||
right: "5%",
|
right: "5%",
|
||||||
bottom: "10%",
|
bottom: "10%",
|
||||||
top: "5%",
|
top: "10%",
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
|
|
@ -376,16 +804,8 @@
|
||||||
{
|
{
|
||||||
type: "category",
|
type: "category",
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
data: [
|
data: this.block2.titles,
|
||||||
"08:00",
|
axisLabel: { color: "#a2c8f9", rotate: this.block2.rotate, },
|
||||||
"10:00",
|
|
||||||
"12:00",
|
|
||||||
"14:00",
|
|
||||||
"16:00",
|
|
||||||
"18:00",
|
|
||||||
"20:00",
|
|
||||||
],
|
|
||||||
axisLabel: { color: "#a2c8f9" },
|
|
||||||
splitLine: {
|
splitLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
opacity: 0.1
|
opacity: 0.1
|
||||||
|
|
@ -419,11 +839,10 @@
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: { areaStyle: { type: "default", color: "#63baff" } },
|
normal: { areaStyle: { type: "default", color: "#63baff" } },
|
||||||
},
|
},
|
||||||
data: [10, 12, 21, 54, 260, 830, 710],
|
data: this.block2.datas,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
console.log("--->",option)
|
|
||||||
return option;
|
return option;
|
||||||
},
|
},
|
||||||
renderEleTrendSel(opt) {
|
renderEleTrendSel(opt) {
|
||||||
|
|
@ -439,7 +858,7 @@
|
||||||
trigger: 'axis'
|
trigger: 'axis'
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['区域A', '区域B', '区域C', '区域D'],
|
data: this.block3.areas,
|
||||||
textStyle: { color: "#a2c8f9" },
|
textStyle: { color: "#a2c8f9" },
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
@ -449,16 +868,8 @@
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
data: [
|
data: this.block3.titles,
|
||||||
"08:00",
|
axisLabel: { color: "#a2c8f9", rotate: this.block3.rotate, },
|
||||||
"10:00",
|
|
||||||
"12:00",
|
|
||||||
"14:00",
|
|
||||||
"16:00",
|
|
||||||
"18:00",
|
|
||||||
"20:00",
|
|
||||||
],
|
|
||||||
axisLabel: { color: "#a2c8f9" },
|
|
||||||
splitLine: {
|
splitLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
opacity: 0.1
|
opacity: 0.1
|
||||||
|
|
@ -477,32 +888,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
series: [
|
series: this.block3.datas
|
||||||
{
|
|
||||||
name: '区域A',
|
|
||||||
type: 'line',
|
|
||||||
data: [120, 132, 101, 134, 90, 230, 210],
|
|
||||||
smooth:true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '区域B',
|
|
||||||
type: 'line',
|
|
||||||
data: [220, 182, 191, 234, 290, 330, 310],
|
|
||||||
smooth:true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '区域C',
|
|
||||||
type: 'line',
|
|
||||||
data: [150, 232, 201, 154, 190, 330, 410],
|
|
||||||
smooth:true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '区域D',
|
|
||||||
type: 'line',
|
|
||||||
data: [320, 332, 301, 334, 390, 330, 320],
|
|
||||||
smooth:true,
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -514,7 +900,7 @@
|
||||||
left: "5%",
|
left: "5%",
|
||||||
right: "5%",
|
right: "5%",
|
||||||
bottom: "10%",
|
bottom: "10%",
|
||||||
top: "15%",
|
top: "25%",
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
|
|
@ -530,28 +916,20 @@
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: [
|
data: this.block4.titles,
|
||||||
"08:00",
|
axisLabel: { color: "#a2c8f9", rotate: this.block4.rotate, },
|
||||||
"10:00",
|
|
||||||
"12:00",
|
|
||||||
"14:00",
|
|
||||||
"16:00",
|
|
||||||
"18:00",
|
|
||||||
"20:00",
|
|
||||||
],
|
|
||||||
axisLabel: { color: "#a2c8f9" },
|
|
||||||
splitLine: {
|
splitLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
opacity: 0.1
|
opacity: 0.1
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
axisLabel: { color: "#a2c8f9" },
|
axisLabel: { color: "#a2c8f9" },
|
||||||
|
max: this.block4.max,
|
||||||
splitLine: {
|
splitLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
opacity: 0.1
|
opacity: 0.1
|
||||||
|
|
@ -559,27 +937,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
series: [
|
series: this.block4.datas
|
||||||
{
|
|
||||||
name: 'A相',
|
|
||||||
type: 'bar',
|
|
||||||
data: [120, 132, 101, 134, 90, 230, 210],
|
|
||||||
stack: 'A相',
|
|
||||||
barWidth:10,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'B相',
|
|
||||||
type: 'bar',
|
|
||||||
data: [220, 182, 191, 234, 290, 330, 310],
|
|
||||||
stack: 'A相',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'C相',
|
|
||||||
type: 'bar',
|
|
||||||
data: [150, 232, 201, 154, 190, 330, 410],
|
|
||||||
stack: 'A相',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<svg viewBox="0 0 79 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="linearGradient-1-1" x1="38.8503086%" y1="0%" x2="61.1496914%" y2="100%"><stop stop-color="#FCFCFD" offset="0%"></stop><stop stop-color="#EEEFF3" offset="100%"></stop></linearGradient><linearGradient id="linearGradient-2-1" x1="0%" y1="9.5%" x2="100%" y2="90.5%"><stop stop-color="#FCFCFD" offset="0%"></stop><stop stop-color="#E9EBEF" offset="100%"></stop></linearGradient><rect id="path-3-1" x="0" y="0" width="17" height="36"></rect></defs><g id="Illustrations" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="B-type" transform="translate(-1268.000000, -535.000000)"><g id="Group-2" transform="translate(1268.000000, 535.000000)"><path id="Oval-Copy-2" d="M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z" fill="#F7F8FC"></path><polygon id="Rectangle-Copy-14" fill="#E5E7E9" transform="translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) " points="13 58 53 58 42 45 2 45"></polygon><g id="Group-Copy" transform="translate(34.500000, 31.500000) scale(-1, 1) rotate(-25.000000) translate(-34.500000, -31.500000) translate(7.000000, 10.000000)"><polygon id="Rectangle-Copy-10" fill="#E5E7E9" transform="translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) " points="2.84078316e-14 3 18 3 23 7 5 7"></polygon><polygon id="Rectangle-Copy-11" fill="#EDEEF2" points="-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43"></polygon><rect id="Rectangle-Copy-12" fill="url(#linearGradient-1-1)" transform="translate(46.500000, 25.000000) scale(-1, 1) translate(-46.500000, -25.000000) " x="38" y="7" width="17" height="36"></rect><polygon id="Rectangle-Copy-13" fill="#F8F9FB" transform="translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) " points="24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12"></polygon></g><rect id="Rectangle-Copy-15" fill="url(#linearGradient-2-1)" x="13" y="45" width="40" height="36"></rect><g id="Rectangle-Copy-17" transform="translate(53.000000, 45.000000)"><mask id="mask-4-1" fill="white"><use xlink:href="#path-3-1"></use></mask><use id="Mask" fill="#E0E3E9" transform="translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) " xlink:href="#path-3-1"></use><polygon id="Rectangle-Copy" fill="#D5D7DE" mask="url(#mask-4-1)" transform="translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) " points="7 0 24 0 20 18 -1.70530257e-13 16"></polygon></g><polygon id="Rectangle-Copy-18" fill="#F8F9FB" transform="translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) " points="62 45 79 45 70 58 53 58"></polygon></g></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.8 KiB |
|
|
@ -186,3 +186,31 @@
|
||||||
background-color: #01a9ff;
|
background-color: #01a9ff;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
.app-power .pw-no-data {
|
||||||
|
text-align: center;
|
||||||
|
color: #eee;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.app-power .pw-no-data::before {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
background-image: url(nodata.svg);
|
||||||
|
height: 100px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
opacity: 0.4;
|
||||||
|
display: block;
|
||||||
|
content: " ";
|
||||||
|
}
|
||||||
|
.app-power .power-map .map-image {
|
||||||
|
height: calc(100% - 23px);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.app-power .power-map .map-image .map-location {
|
||||||
|
position: absolute;
|
||||||
|
color: #09f781;
|
||||||
|
font-size: 40px;
|
||||||
|
text-shadow: 1px 1px 8px #010b2d;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -205,4 +205,34 @@
|
||||||
background-color: rgb(1, 169, 255);
|
background-color: rgb(1, 169, 255);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
.pw-no-data{
|
||||||
|
text-align: center;
|
||||||
|
color: #eee;
|
||||||
|
font-size: 12px;
|
||||||
|
&::before{
|
||||||
|
margin-bottom: 10px;
|
||||||
|
background-image: url(./nodata.svg);
|
||||||
|
height: 100px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
opacity: 0.4;
|
||||||
|
display:block;
|
||||||
|
content:" ";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.power-map{
|
||||||
|
.map-image{
|
||||||
|
height: calc(100% - 23px);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: center;
|
||||||
|
position: relative;
|
||||||
|
.map-location {
|
||||||
|
position: absolute;
|
||||||
|
color: #09f781;
|
||||||
|
font-size: 40px;
|
||||||
|
text-shadow: 1px 1px 8px #010b2d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
Loading…
Reference in New Issue