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

679 lines
39 KiB
HTML
Raw Normal View History

update code
2024-11-19 00:17:04 +08:00
<!DOCTYPE html>
<html lang="en">
update code
2024-11-21 00:03:34 +08:00
update code
2024-11-19 00:17:04 +08:00
<head>
update code
2024-11-21 00:03:34 +08:00
<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" />
update code
2024-11-19 00:17:04 +08:00
<title>数字化集成管控平台</title>
<style type="text/css">
.el-table {
background: none;
}
.el-table td {
border: none;
color: #c9d9fa;
}
.el-table th {
background: #1a3956;
}
.el-table thead {
color: #ffffff;
}
update code
2024-11-21 00:03:34 +08:00
.el-table--enable-row-hover .el-table__body tr:hover>td {
update code
2024-11-19 00:17:04 +08:00
background: #002d56;
}
.el-table__body-wrapper::-webkit-scrollbar {
width: 0px;
height: 0px;
}
.el-table::before {
background: none;
}
.el-carousel__container {
height: 510px;
update code
2024-11-21 00:03:34 +08:00
}
update code
2024-11-19 00:17:04 +08:00
</style>
</head>
update code
2024-11-21 00:03:34 +08:00
update code
2024-11-19 00:17:04 +08:00
<body>
update code
2024-11-21 00:03:34 +08:00
<div id="app" class="app-power">
<!--大屏背景-->
<background-video></background-video>
<!--大屏内容-->
<div class="screen-content-max">
<screen-header :nav="1"></screen-header>
<div class="screen-content">
update code
2024-11-19 00:17:04 +08:00
<el-row>
update code
2024-11-21 00:03:34 +08:00
<el-col :span="6">
<module-one-1-1 label="监控概况" :amplify="false" name="amplify-xmkg">
<div class="project-number">
<div>项目总数：<span v-cloak>{{100}}</span> 个</div>
<div>在建项目数：<span v-cloak>{{86}}</span> 个</div>
update code
2024-11-19 00:17:04 +08:00
</div>
update code
2024-11-21 00:03:34 +08:00
<div class="mon-over">
<div class="mon-over-bg">
<svg class="icon" style="width: 40px; height: 40px" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1240">
<path
d="M384 170.666667V128a42.666667 42.666667 0 0 1 42.666667-42.666667h170.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v42.666667h128a42.666667 42.666667 0 0 1 42.666667 42.666666v682.666667a42.666667 42.666667 0 0 1-42.666667 42.666667H256a42.666667 42.666667 0 0 1-42.666667-42.666667V213.333333a42.666667 42.666667 0 0 1 42.666667-42.666666h128z m170.666667 341.333333V298.666667l-213.333334 298.666666h128v213.333334l213.333334-298.666667h-128z"
fill="#2CA2FD" p-id="1241"></path>
</svg>
<div class="chart-gif" style="position: relative"></div>
</div>
<div class="mon-over-content">
<div class="mon-over-content-item one">
<div class="mv-title">本日用电</div>
<div>
<span class="mv-num">100.56</span><span class="mv-unit">w</span>
</div>
</div>
<div class="mon-over-content-item two">
<div class="mv-title">本月用电</div>
<div>
<span class="mv-num">100.56</span><span class="mv-unit">w</span>
</div>
</div>
<div class="mon-over-content-item one">
<div class="mv-title">本日用电</div>
<div>
<span class="mv-num">100.56</span><span class="mv-unit">w</span>
</div>
</div>
<div class="mon-over-content-item two">
<div class="mv-title">本月用电</div>
<div>
<span class="mv-num">100.56</span><span class="mv-unit">w</span>
</div>
</div>
</div>
</div>
</module-one-1-1>
<module-one-1-1 label="用电负荷" :amplify="false" name="amplify-lwrygk">
<div class="warning-info ele-load">
<div class="ele-load-title warning-info-title">
<div :class="eleLoadSel==0?'active':''" @click="doEleLoadSel(0)">
今日
</div>
<div :class="eleLoadSel==1?'active':''" @click="doEleLoadSel(1)">
近七天
</div>
<el-select v-model="eleLoadSelArea" placeholder="请选择" class="ele-load-area-sel"
style="width: 100px">
<el-option v-for="(item,idx) in eleLoadArea" :key="idx" :label="item"
:value="item">
</el-option>
</el-select>
</div>
<div>
<power-chart id="eleLoadChart" className="ele-load-chart" width="100%"
height="240px" :render="renderEleLoad" />
</div>
</div>
</module-one-1-1>
<module-one-1-1 label="用电量趋势" :amplify="false" name="amplify-sbgk">
<div class="warning-info ele-trend">
<div class="ele-trend-title warning-info-title">
<div :class="eleTrendSel==0?'active':''" @click="doEleTrendSel(0)">
今日
</div>
<div :class="eleTrendSel==1?'active':''" @click="doEleTrendSel(1)">
近七天
</div>
<el-select v-model="eleTrendSelArea" placeholder="请选择" class="ele-trend-area-sel"
style="width: 100px">
<el-option v-for="(item,idx) in eleLoadArea" :key="idx" :label="item"
:value="item">
</el-option>
</el-select>
</div>
<div>
<power-chart id="ele-trendChart" className="ele-trend-chart" width="100%"
height="240px" :render="renderEleTrendSel" />
</div>
update code
2024-11-19 00:17:04 +08:00
</div>
</module-one-1-1>
</el-col>
update code
2024-11-21 00:03:34 +08:00
<el-col :span="18">
<el-row>
<el-col :span="16" style="height: 640px; margin-bottom: 20px" class="power-center">
<module-two-2-2 label="场布图"> </module-two-2-2>
</el-col>
<el-col :span="8">
<div style="padding: 10px">
<div class="analyse-title">
<div class="analyse-text">预警概况</div>
</div>
<el-row>
<el-col :span="8">
<div class="time-study-value">
<p>今日报警数</p>
<div class="analyse-num"><span v-cloak v-html="100"></span>次</div>
</div>
<div class="time-study-value">
<p>本周报警数</p>
<div class="analyse-num"><span v-cloak v-html="2000"></span> 次</div>
</div>
</el-col>
<el-col :span="16" class="warning-list">
<div v-for="(it,idx) in warningData" class="warning-item" :key="idx">
<div class="warning-text">
<i class="el-icon-caret-top"></i>
<span class="w-title">{{it.title}}</span>
<span class="w-data"><span>{{it.count}}</span>次</span>
</div>
<div class="warning-chart">
<div class="w-chart-bg">
<div class="w-chart-prc" :style="'width:'+(it.w)+'%'"></div>
</div>
</div>
</div>
</el-col>
</el-row>
<div class="analyse-title" style="margin-top: 40px;">
<div class="analyse-text">正在发生</div>
</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 :class="warningTypeIndex==idx?'active':''" v-for="(it,idx) in 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-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=='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;">
</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="
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 class="w-c-row1-t">{{it.title}}</div>
<div class="w-c-row1-date">{{toDateTime(it.date)}}</div>
</div>
</div>
<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" :title="it.addr">{{it.addr}}</span></div>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<module-one-1-1 label="电流趋势">
<div class="warning-info current-trend">
<div class="current-trend-title warning-info-title">
<div :class="currentTrendSel==0?'active':''" @click="doCurrentTrendSel(0)">
今日
</div>
<div :class="currentTrendSel==1?'active':''" @click="doCurrentTrendSel(1)">
近七天
</div>
<el-select v-model="currentTrendSelArea" placeholder="请选择" class="current-trend-area-sel"
style="width: 100px">
<el-option v-for="(item,idx) in currentLoadArea" :key="idx" :label="item"
:value="item">
</el-option>
</el-select>
</div>
<div>
<power-chart id="current-trendChart" className="current-trend-chart" width="100%"
height="240px" :render="renderCurrentTrendSel" />
</div>
</div>
</module-one-1-1>
</el-col>
<el-col :span="16">
<module-one-1-2 label="区域用电趋势">
<power-chart id="area-ele-trendChart" className="area-ele-trend-chart" width="100%"
height="300px" :render="renderAreaEleTrendSel" />
</module-one-1-2>
</el-col>
</el-row>
update code
2024-11-19 00:17:04 +08:00
</el-col>
</el-row>
update code
2024-11-21 00:03:34 +08:00
</div>
update code
2024-11-19 00:17:04 +08:00
</div>
</div>
</body>
<script src="https://cdn.makalu.cc/js/moment/2.24.0/moment.min.js"></script>
update code
2024-11-21 00:03:34 +08:00
<script type="text/javascript"
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=5M76qMCiVjSG7bGOTcYmZdg0MQinsKve"></script>
update code
2024-11-19 00:17:04 +08:00
<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>
<!--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/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>
update code
2024-11-21 00:03:34 +08:00
<script src="./power/powerChart.js"></script>
update code
2024-11-19 00:17:04 +08:00
<!-- 请求依赖 -->
<script src="https://cdn.makalu.cc/js/axios/axios.min.js"></script>
<script>
update code
2024-11-21 00:03:34 +08:00
let requestUrl =
"https://jzgj.crfeb.com.cn/largeScreen/digitalConstruction/";
update code
2024-11-19 00:17:04 +08:00
let deptId = 131;
var vm = new Vue({
update code
2024-11-21 00:03:34 +08:00
el: "#app",
update code
2024-11-19 00:17:04 +08:00
data() {
return {
update code
2024-11-21 00:03:34 +08:00
eleLoadSel: 0,
eleLoadArea: ["全部区域", "区域A", "区域B", "区域C"],
eleLoadSelArea: "",
eleTrendSel: "",
eleTrendSelArea: "",
currentTrendSel: "",
currentTrendSelArea: "",
warningData:[
{title:'断相',count:10,w:0},
{title:'电压不平衡',count:12,w:0},
{title:'失流',count:15,w:0},
{title:'失压',count:18,w:0},
],
warningList:[
{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:'t3', title:'当前区域失流',date:new Date(),area:'区域C',addr:'3号线2期-5分部-工区西场地-广州市荔湾区'},
{type:'t4', title:'当前区域失压',date:new Date(),area:'区域D',addr:'3号线2期-5分部-工区西场地-广州市荔湾区'},
],
//报警分析
warningTypeInterval:undefined,
warningTypeIndex:0,
};
update code
2024-11-19 00:17:04 +08:00
},
update code
2024-11-21 00:03:34 +08:00
created() {
//预警类型 定时器
this.warningTypeInterval = setInterval(this.automaticRollType,5000);
this.init();
update code
2024-11-19 00:17:04 +08:00
},
update code
2024-11-21 00:03:34 +08:00
update code
2024-11-19 00:17:04 +08:00
methods: {
update code
2024-11-21 00:03:34 +08:00
//报警类型
automaticRollType(){
var height = $("#warnListDiv .warn-item").innerHeight()
if($("#warnListDiv").scrollTop() == height*this.warningList.length - $("#warnListDiv").innerHeight()){
this.warningTypeIndex = 0
}else{
this.warningTypeIndex = this.warningTypeIndex + 1
}
$("#warnListDiv").animate({scrollTop:(height*this.warningTypeIndex)+'px'})
},
listMinMouseoverType(){
clearInterval(this.warningTypeInterval);
},
listMinMouseoutType(){
this.warningTypeInterval=setInterval(this.automaticRollType,5000);
},
toDateTime(dt){
return moment(dt).format("YYYY年MM月DD日 HH:mm:ss");
update code
2024-11-19 00:17:04 +08:00
},
update code
2024-11-21 00:03:34 +08:00
init() {
let tmp=2;
this.warningData.forEach(d=>{
if(d.count>tmp){
tmp=d.count;
}
});
tmp=tmp+2;
this.warningData.forEach(d=>{
d.w=(d.count*100.0/tmp).toFixed(2);
});
},
doEleLoadSel(n) {
this.eleLoadSel = n;
},
doEleTrendSel(n) {
this.eleTrendSel = n;
},
doCurrentTrendSel(n) {
this.currentTrendSel = n;
},
renderEleLoad(opt) {
let option = {
grid: {
left: "5%",
right: "5%",
bottom: "10%",
top: "5%",
containLabel: true,
},
tooltip: {
trigger: "axis",
},
calculable: true,
xAxis: [
{
type: "category",
boundaryGap: false,
data: [
"08:00",
"10:00",
"12:00",
"14:00",
"16:00",
"18:00",
"20:00",
],
axisLabel: { color: "#a2c8f9" },
splitLine:{
lineStyle:{
opacity:0.1
}
}
},
],
yAxis: [
{
type: "value",
axisLabel: { color: "red" },
splitLine:{
lineStyle:{
opacity:0.1
}
}
},
],
series: [
{
name: "用电负荷",
type: "line",
smooth: true,
label: {
show: true,
color: "#4DAAFC",
},
lineStyle: {
color: "#4DAAFC",
},
itemStyle: {
normal: { areaStyle: { type: "default", color: "#63baff" } },
},
data: [10, 12, 21, 54, 260, 830, 710],
},
],
};
console.log("--->",option)
return option;
},
renderEleTrendSel(opt) {
option = {
grid: {
left: "5%",
right: "5%",
bottom: "10%",
top: "15%",
containLabel: true,
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['区域A', '区域B', '区域C', '区域D'],
textStyle: { color: "#a2c8f9" },
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
data: [
"08:00",
"10:00",
"12:00",
"14:00",
"16:00",
"18:00",
"20:00",
],
axisLabel: { color: "#a2c8f9" },
splitLine:{
lineStyle:{
opacity:0.1
}
}
}
],
yAxis: [
{
type: 'value',
axisLabel: { color: "#a2c8f9" },
splitLine:{
lineStyle:{
opacity:0.1
}
}
}
],
series: [
{
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,
}
]
};
return option;
},
renderCurrentTrendSel(opt) {
option = {
grid: {
left: "5%",
right: "5%",
bottom: "10%",
top: "15%",
containLabel: true,
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['A相', 'B相', 'C相'],
textStyle: { color: "#a2c8f9" },
},
calculable: true,
xAxis: [
{
type: 'category',
data: [
"08:00",
"10:00",
"12:00",
"14:00",
"16:00",
"18:00",
"20:00",
],
axisLabel: { color: "#a2c8f9" },
splitLine:{
lineStyle:{
opacity:0.1
}
}
}
],
yAxis: [
{
type: 'value',
axisLabel: { color: "#a2c8f9" },
splitLine:{
lineStyle:{
opacity:0.1
}
}
}
],
series: [
{
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相',
}
]
};
return option;
},
renderAreaEleTrendSel(opt) {
option = {
grid: {
left: "5%",
right: "5%",
bottom: "10%",
top: "15%",
containLabel: true,
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['区域A', '区域B', '区域C', '区域D'],
textStyle: { color: "#a2c8f9" },
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
axisLabel: { color: "#a2c8f9" },
splitLine:{
lineStyle:{
opacity:0.1
}
}
}
],
yAxis: [
{
type: 'value',
axisLabel: { color: "#a2c8f9" },
splitLine:{
lineStyle:{
opacity:0.1
}
}
}
],
series: [
{
name: '区域A',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
smooth:true,
},
{
name: '区域B',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310],
smooth:true,
},
{
name: '区域C',
type: 'line',
data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410],
smooth:true,
},
{
name: '区域D',
type: 'line',
data: [320, 332, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320],
smooth:true,
}
]
};
return option;
},
},
});
update code
2024-11-19 00:17:04 +08:00
</script>
update code
2024-11-21 00:03:34 +08:00
update code
2024-11-19 00:17:04 +08:00
</html>