update code
parent
c620055d68
commit
5446181dee
1026
index.html
1026
index.html
File diff suppressed because it is too large
Load Diff
672
power.html
672
power.html
|
|
@ -1,12 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<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">
|
||||
<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" />
|
||||
<title>数字化集成管控平台</title>
|
||||
<style type="text/css">
|
||||
.el-table {
|
||||
|
|
@ -26,7 +27,7 @@
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-table--enable-row-hover .el-table__body tr:hover > td {
|
||||
.el-table--enable-row-hover .el-table__body tr:hover>td {
|
||||
background: #002d56;
|
||||
}
|
||||
|
||||
|
|
@ -41,71 +42,220 @@
|
|||
|
||||
.el-carousel__container {
|
||||
height: 510px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<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">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<module-one-1-1 label="监控概况" :amplify="false" name="amplify-xmkg">
|
||||
<div class="company-name-max">
|
||||
|
||||
</div>
|
||||
</module-one-1-1>
|
||||
<module-one-1-1 label="用电负荷" :amplify="false" name="amplify-lwrygk">
|
||||
|
||||
</module-one-1-1>
|
||||
<module-one-1-1 label="用电量趋势" :amplify="false" name="amplify-sbgk">
|
||||
|
||||
</module-one-1-1>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="analyse-title">
|
||||
<div class="analyse-text">正在发生</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<module-one-1-1 label="电流趋势">
|
||||
|
||||
</module-one-1-1>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<module-one-1-2 label="区域用电趋势">
|
||||
|
||||
</module-one-1-2>
|
||||
<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>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-col>
|
||||
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="https://cdn.makalu.cc/js/moment/2.24.0/moment.min.js"></script>
|
||||
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=5M76qMCiVjSG7bGOTcYmZdg0MQinsKve"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=5M76qMCiVjSG7bGOTcYmZdg0MQinsKve"></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/element-ui/index.js"></script>
|
||||
|
|
@ -123,33 +273,407 @@
|
|||
<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>
|
||||
|
||||
<!-- 请求依赖 -->
|
||||
<script src="https://cdn.makalu.cc/js/axios/axios.min.js"></script>
|
||||
<script>
|
||||
let requestUrl = "https://jzgj.crfeb.com.cn/largeScreen/digitalConstruction/";
|
||||
let requestUrl =
|
||||
"https://jzgj.crfeb.com.cn/largeScreen/digitalConstruction/";
|
||||
let deptId = 131;
|
||||
var vm = new Vue({
|
||||
el: '#app',
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
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,
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
//预警类型 定时器
|
||||
this.warningTypeInterval = setInterval(this.automaticRollType,5000);
|
||||
this.init();
|
||||
},
|
||||
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
|
||||
//报警类型
|
||||
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");
|
||||
},
|
||||
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;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
182
power/power.css
182
power/power.css
|
|
@ -4,3 +4,185 @@
|
|||
.app-power .power-center .screen-module .screen-two-2-2 {
|
||||
height: 100%;
|
||||
}
|
||||
.app-power .mon-over {
|
||||
position: relative;
|
||||
}
|
||||
.app-power .mon-over .mon-over-bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
}
|
||||
.app-power .mon-over .mon-over-bg svg {
|
||||
position: absolute;
|
||||
left: calc(50% - 20px);
|
||||
top: 100px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
.app-power .mon-over .mon-over-bg .chart-gif {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
top: 30px;
|
||||
left: calc(50% - 90px);
|
||||
}
|
||||
.app-power .mon-over .mon-over-content .mon-over-content-item {
|
||||
display: inline-flex;
|
||||
width: calc(48% - 90px);
|
||||
height: 115px;
|
||||
justify-content: center;
|
||||
flex-flow: column;
|
||||
}
|
||||
.app-power .mon-over .mon-over-content .mon-over-content-item.one {
|
||||
align-items: end;
|
||||
padding-right: 90px;
|
||||
}
|
||||
.app-power .mon-over .mon-over-content .mon-over-content-item.two {
|
||||
align-items: start;
|
||||
padding-left: 90px;
|
||||
}
|
||||
.app-power .mon-over .mon-over-content .mon-over-content-item .mv-title {
|
||||
color: #a2c8f9;
|
||||
line-height: 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.app-power .mon-over .mon-over-content .mon-over-content-item .mv-num {
|
||||
color: #63baff;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
.app-power .mon-over .mon-over-content .mon-over-content-item .mv-unit {
|
||||
margin-left: 4px;
|
||||
color: #a2c8f9;
|
||||
}
|
||||
.app-power .ele-load .ele-load-title {
|
||||
position: relative;
|
||||
}
|
||||
.app-power .ele-load .ele-load-title .ele-load-area-sel {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
.app-power .ele-trend .ele-trend-title {
|
||||
position: relative;
|
||||
}
|
||||
.app-power .ele-trend .ele-trend-title .ele-trend-area-sel {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
.app-power .current-trend .current-trend-title {
|
||||
position: relative;
|
||||
}
|
||||
.app-power .current-trend .current-trend-title .current-trend-area-sel {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
.app-power .warning-list .warning-item {
|
||||
line-height: 36px;
|
||||
}
|
||||
.app-power .warning-list .warning-item .warning-text {
|
||||
position: relative;
|
||||
color: #a2c8f9;
|
||||
}
|
||||
.app-power .warning-list .warning-item .warning-text i {
|
||||
color: yellow;
|
||||
}
|
||||
.app-power .warning-list .warning-item .warning-text .w-data {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
font-style: italic;
|
||||
}
|
||||
.app-power .warning-list .warning-item .warning-text .w-data span {
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
.app-power .warning-list .warning-item .warning-chart {
|
||||
position: relative;
|
||||
}
|
||||
.app-power .warning-list .warning-item .warning-chart .w-chart-bg {
|
||||
background: #192c64c7;
|
||||
border-radius: 4px;
|
||||
height: 8px;
|
||||
}
|
||||
.app-power .warning-list .warning-item .warning-chart .w-chart-bg .w-chart-prc {
|
||||
position: absolute;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: #810707;
|
||||
}
|
||||
.app-power .warn-list {
|
||||
max-height: 310px;
|
||||
overflow-y: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.app-power .warn-list .warn-item {
|
||||
color: #c0dafb9c;
|
||||
padding: 0px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.app-power .warn-list .warn-item.active {
|
||||
background: #097fca3b;
|
||||
}
|
||||
.app-power .warn-list .warn-item .warn-item-title {
|
||||
font-size: 18px;
|
||||
margin: 10px 0px;
|
||||
color: #a2c8f9;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px -1px 1px #e11f1f;
|
||||
}
|
||||
.app-power .warn-list .warn-item .w-c-row1 {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.app-power .warn-list .warn-item .w-c-row1 .w-c-bg {
|
||||
background: url("wc_bg.png") no-repeat;
|
||||
background-size: 100%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
.app-power .warn-list .warn-item .w-c-row1 .w-c-bg .icon {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
width: 50px !important;
|
||||
height: 50px !important;
|
||||
}
|
||||
.app-power .warn-list .warn-item .w-c-row1 .w-c-bg .icon path {
|
||||
fill: #32aabf !important;
|
||||
}
|
||||
.app-power .warn-list .warn-item .w-c-row1 .w-c-row1-t {
|
||||
color: #a15050;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.app-power .warn-list .warn-item .w-c-row2 {
|
||||
line-height: 24px;
|
||||
}
|
||||
.app-power .warn-list .warn-item .w-c-row2 .w-c-row2-l {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.app-power .warn-list .warn-item .w-c-row2 .w-c-row2-t {
|
||||
display: inline-block;
|
||||
width: calc(100% - 100px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.app-power .el-select .el-input__inner {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #a2c8f9;
|
||||
}
|
||||
.app-power .scroll::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
.app-power .scroll::-webkit-scrollbar-thumb {
|
||||
background-color: #01a9ff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
|
|
|||
198
power/power.less
198
power/power.less
|
|
@ -7,4 +7,202 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.mon-over {
|
||||
position: relative;
|
||||
.mon-over-bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
svg {
|
||||
position: absolute;
|
||||
left: calc(50% - 20px);
|
||||
top: 100px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chart-gif {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
top: 30px;
|
||||
left: calc(50% - 90px);
|
||||
}
|
||||
}
|
||||
.mon-over-content {
|
||||
.mon-over-content-item {
|
||||
display: inline-flex;
|
||||
width: calc(48% - 90px);
|
||||
height: 115px;
|
||||
justify-content: center;
|
||||
flex-flow: column;
|
||||
|
||||
&.one {
|
||||
align-items: end;
|
||||
padding-right: 90px;
|
||||
}
|
||||
&.two {
|
||||
align-items: start;
|
||||
padding-left: 90px;
|
||||
}
|
||||
.mv-title {
|
||||
color: #a2c8f9;
|
||||
line-height: 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.mv-num {
|
||||
color: #63baff;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
.mv-unit {
|
||||
margin-left: 4px;
|
||||
color: #a2c8f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ele-load {
|
||||
.ele-load-title {
|
||||
position: relative;
|
||||
.ele-load-area-sel {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ele-trend {
|
||||
.ele-trend-title {
|
||||
position: relative;
|
||||
.ele-trend-area-sel {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.current-trend {
|
||||
.current-trend-title {
|
||||
position: relative;
|
||||
.current-trend-area-sel {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.warning-list {
|
||||
.warning-item {
|
||||
line-height: 36px;
|
||||
.warning-text {
|
||||
position: relative;
|
||||
color: #a2c8f9;
|
||||
i {
|
||||
color: yellow;
|
||||
}
|
||||
.w-data {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
font-style: italic;
|
||||
span {
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.warning-chart {
|
||||
position: relative;
|
||||
.w-chart-bg {
|
||||
background: #192c64c7;
|
||||
border-radius: 4px;
|
||||
height: 8px;
|
||||
.w-chart-prc {
|
||||
position: absolute;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: #810707;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warn-list {
|
||||
max-height: 310px;
|
||||
overflow-y: auto;
|
||||
margin-top: 20px;
|
||||
|
||||
.warn-item {
|
||||
color: #c0dafb9c;
|
||||
padding:0px 10px;
|
||||
cursor: pointer;
|
||||
&.active{
|
||||
background: #097fca3b;
|
||||
}
|
||||
.warn-item-title {
|
||||
font-size: 18px;
|
||||
margin: 10px 0px;
|
||||
color: #a2c8f9;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px -1px 1px #e11f1f;
|
||||
}
|
||||
.w-c-row1 {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
.w-c-bg {
|
||||
background: url("./wc_bg.png") no-repeat;
|
||||
background-size: 100%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
width: 50px !important;
|
||||
height: 50px !important;
|
||||
path {
|
||||
fill: #32aabf !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.w-c-row1-t {
|
||||
color: #a15050;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.w-c-row2 {
|
||||
line-height: 24px;
|
||||
.w-c-row2-l {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.w-c-row2-t {
|
||||
display: inline-block;
|
||||
width: calc(100% - 100px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-select {
|
||||
.el-input__inner {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #a2c8f9;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
.scroll::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(1, 169, 255);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
Vue.component("power-chart", {
|
||||
template: `
|
||||
<div>
|
||||
<div :id="id" :class="className" :style="{ height, width }"></div>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: "barChart1",
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "400px",
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: "400px",
|
||||
},
|
||||
render: {
|
||||
type: Function,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.chart = window.echarts.init(document.getElementById(this.id));
|
||||
setTimeout(() => {
|
||||
this.setOption({});
|
||||
}, 400);
|
||||
// 大小自适应
|
||||
window.addEventListener("resize", () => {
|
||||
this.chart.resize();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
setOption(opt) {
|
||||
if (this.render) {
|
||||
opt = this.render(opt);
|
||||
}
|
||||
this.chart.setOption(opt);
|
||||
},
|
||||
},
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue