1068 lines
57 KiB
HTML
1068 lines
57 KiB
HTML
<!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" />
|
|
<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;
|
|
}
|
|
|
|
.el-table--enable-row-hover .el-table__body tr:hover>td {
|
|
background: #002d56;
|
|
}
|
|
|
|
.el-table__body-wrapper::-webkit-scrollbar {
|
|
width: 0px;
|
|
height: 0px;
|
|
}
|
|
|
|
.el-table::before {
|
|
background: none;
|
|
}
|
|
|
|
.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="'head-title'">
|
|
<div class="head-title-label">
|
|
数字化集成管控平台
|
|
</div>
|
|
</div>
|
|
<div class="screen-content">
|
|
<el-row>
|
|
<el-col :span="6">
|
|
<module-one-1-1 label="监控概况" :amplify="false" name="amplify-xmkg">
|
|
<div class="project-number">
|
|
<div>监测设备<span v-cloak>{{block1.total}}</span> 个</div>
|
|
<div>在线设备：<span v-cloak>{{block1.online}}</span> 个</div>
|
|
</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">{{block1.DailyElectricity}}</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">{{block1.MonthlyElectricity}}</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">{{block1.MonthAvgDailyElectricity}}</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">{{block1.YearAvgDailyElectricity}}</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 :key="regionElKey" v-model="eleLoadSelArea" placeholder="请选择"
|
|
class="ele-load-area-sel" clearable @change="loadEleLoad" style="width: 100px">
|
|
<el-option v-for="(it,idx) in regions" :key="it.regionId" :label="it.regionName"
|
|
:value="it.regionId">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div :key="block2.elKey">
|
|
<div v-if="!block2.datas || block2.datas.length==0" class="pw-no-data"
|
|
style="margin-top: 20px;">
|
|
暂无数据
|
|
</div>
|
|
<power-chart ref="chart2" v-else 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" @change="loadEleTrend" clearable>
|
|
<el-option v-for="(it,idx) in regions" :key="it.regionId" :label="it.regionName"
|
|
:value="it.regionId">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div>
|
|
<div v-if="!block3.datas || block3.datas.length==0" class="pw-no-data"
|
|
style="margin-top: 20px;">
|
|
暂无数据
|
|
</div>
|
|
<power-chart ref="chart3" v-else :key="block3.elKey" id="ele-trendChart"
|
|
className="ele-trend-chart" width="100%" height="240px"
|
|
:render="renderEleTrendSel" />
|
|
</div>
|
|
</div>
|
|
</module-one-1-1>
|
|
</el-col>
|
|
<el-col :span="18">
|
|
<el-row>
|
|
<el-col :span="16" style="height: 640px; margin-bottom: 20px" class="power-center power-map">
|
|
<module-two-2-2 label="场布图">
|
|
<div :style="'background-image:url('+mapInfo.url+')'" class="map-image">
|
|
<el-popover v-for="(it,idx) in mapInfo.regions" popper-class="power-pop"
|
|
placement="top-start"
|
|
:title="it.regionName"
|
|
trigger="click"
|
|
>
|
|
<div class="pop-body">
|
|
<div v-if="it.data">
|
|
<div><span>今日电量：</span><span>{{it.dailyElectricity||'暂无'}}</span></div>
|
|
<div><span>用电负荷：</span><span>{{it.load||'暂无'}}</span></div>
|
|
<div><span>用电状态：</span><span :style="'color:'+(it.CurrentType=='正常'?'#05ff5e':'red')">{{it.CurrentType||'暂无'}}</span></div>
|
|
</div>
|
|
<div v-else>
|
|
{{it.dailyElectricity}}
|
|
</div>
|
|
</div>
|
|
<i slot="reference" @click="getRegionMapInfo(it)" class="el-icon-location map-location" :style="'top:'+it.y+'px;left:'+it.x+'px'"></i>
|
|
</el-popover>
|
|
</div>
|
|
</module-two-2-2>
|
|
</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="block6.todayWarningCount"></span>次</div>
|
|
</div>
|
|
<div class="time-study-value">
|
|
<p>本周报警数</p>
|
|
<div class="analyse-num"><span v-cloak
|
|
v-html="block6.monthWarningCount"></span> 次</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="16" class="warning-list">
|
|
<div v-for="(it,idx) in block6.typeWarningList" 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 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-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.timeStamp)}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-c-row2">
|
|
<div><span class="w-c-row2-l">区域:</span><span class="w-c-row2-t"
|
|
: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>
|
|
</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"
|
|
@change="loadCurrentTrend" clearable>
|
|
<el-option v-for="(it,idx) in regions" :key="it.regionId"
|
|
:label="it.regionName" :value="it.regionId">
|
|
</el-select>
|
|
</div>
|
|
<div>
|
|
<div v-if="!block4.datas || block4.datas.length==0" class="pw-no-data"
|
|
style="margin-top: 20px;">
|
|
暂无数据
|
|
</div>
|
|
<power-chart ref="chart4" v-else :key="block4.elKey" 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="区域用电趋势">
|
|
<div v-if="!block5.datas || block5.datas.length==0" class="pw-no-data"
|
|
style="margin-top: 20px;">
|
|
暂无数据
|
|
</div>
|
|
<power-chart ref="chart5" v-else :key="block5.elKey" 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>
|
|
</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 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>
|
|
<script src="./power/powerChart.js"></script>
|
|
|
|
<!-- 请求依赖 -->
|
|
<script src="https://cdn.makalu.cc/js/axios/axios.min.js"></script>
|
|
<script>
|
|
var mapDatas = [
|
|
{
|
|
projectId: 1912,
|
|
url: './power/prj3.png',
|
|
regions: []
|
|
}
|
|
]
|
|
</script>
|
|
<script>
|
|
let baseUrl = 'https://aqzg-t.makalu.cc';
|
|
let projectId = 1912;
|
|
let regionId = 1;
|
|
var vm = new Vue({
|
|
el: "#app",
|
|
data() {
|
|
return {
|
|
mapInfo:null,
|
|
eleLoadSel: 0,
|
|
regions: [],
|
|
regionElKey: 0,
|
|
eleLoadSelArea: "",
|
|
eleTrendSel: "",
|
|
eleTrendSelArea: "",
|
|
currentTrendSel: "",
|
|
currentTrendSelArea: "",
|
|
block1: {
|
|
total: 0,
|
|
online: 0,
|
|
DailyElectricity: 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: [
|
|
{ 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, 1000 * 60);
|
|
this.loadRegions();
|
|
this.loadMap();
|
|
this.init();
|
|
},
|
|
|
|
methods: {
|
|
loadMap(){
|
|
let maps=mapDatas.filter(d=>d.projectId==projectId);
|
|
let map=maps.length>0?maps[0]:{regions:[]};
|
|
map.regions=map.regions.map(it=>{
|
|
it.data=null;
|
|
it.CurrentType='';
|
|
it.dailyElectricity='';
|
|
it.load='';
|
|
return it;
|
|
});
|
|
this.mapInfo=map;
|
|
},
|
|
loadRegions() {
|
|
let url = '/api/device/smart_meter/region_information';
|
|
this.post(url, { projectId: projectId }).then(d => {
|
|
this.regions = d.data?.data || [];
|
|
this.mapInfo.regions=this.regions.map(it=>{
|
|
it.data=null;
|
|
it.CurrentType='';
|
|
it.dailyElectricity='加载中...';
|
|
it.load='';
|
|
return it;
|
|
})
|
|
this.regionElKey++;
|
|
});
|
|
},
|
|
//报警类型
|
|
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() {
|
|
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 = [];
|
|
}
|
|
|
|
if(this.$refs.chart2 && this.block2.datas.length>0){
|
|
this.$refs.chart2.reLoad();
|
|
}else{
|
|
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 = [];
|
|
}
|
|
if(this.$refs.chart3 && this.block3.datas.length>0){
|
|
this.$refs.chart3.reLoad();
|
|
}else{
|
|
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;
|
|
if(this.$refs.chart4 && this.block4.datas.length>0){
|
|
this.$refs.chart4.reLoad();
|
|
}else{
|
|
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 && data[0].list && data[0].list.length>0) {
|
|
this.block5.areas=data.map(it=>it.regionName);
|
|
this.block5.titles=data[0].list.map(it=>it.time);
|
|
this.block5.datas=data.map(it=>{
|
|
return {
|
|
name:it.regionName,
|
|
type:"line",
|
|
smooth:true,
|
|
data:it.list.map(item=>item.statistics)
|
|
}
|
|
});
|
|
}else{
|
|
this.block5.areas=[];
|
|
this.block5.titles=[];
|
|
this.block5.datas=[];
|
|
}
|
|
if(this.$refs.chart5 && this.block5.datas.length>0){
|
|
this.$refs.chart5.reLoad();
|
|
}else{
|
|
this.block5.elKey++;
|
|
}
|
|
});
|
|
},
|
|
//获取智能电表警告计数【预警概况】
|
|
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;
|
|
tmps.forEach(d => {
|
|
if (d.count > tmp) {
|
|
tmp = d.count;
|
|
}
|
|
});
|
|
tmp = tmp + 2;
|
|
tmps.forEach(d => {
|
|
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)
|
|
});
|
|
},
|
|
getRegionMapInfo(it){
|
|
let url="/api/device/smart_meter/region_electricity_information";
|
|
let postData={
|
|
projectId:projectId,
|
|
regionId:it.regionId
|
|
};
|
|
it.dailyElectricity="加载中..."
|
|
this.post(url,postData).then(d=>{
|
|
let datas=d.data?.data||[];
|
|
if(datas.length>0){
|
|
let data=datas[0];
|
|
it.CurrentType=data.CurrentType||'';
|
|
it.dailyElectricity=data.dailyElectricity||'';
|
|
it.load=data.load||'';
|
|
it.data=data
|
|
}else{
|
|
it.data=null;
|
|
it.dailyElectricity="暂无数据"
|
|
}
|
|
});
|
|
},
|
|
doEleLoadSel(n) {
|
|
this.eleLoadSel = n;
|
|
this.loadEleLoad();
|
|
},
|
|
doEleTrendSel(n) {
|
|
this.eleTrendSel = n;
|
|
this.loadEleTrend();
|
|
},
|
|
doCurrentTrendSel(n) {
|
|
this.currentTrendSel = n;
|
|
this.loadCurrentTrend();
|
|
},
|
|
renderEleLoad(opt) {
|
|
let option = {
|
|
grid: {
|
|
left: "5%",
|
|
right: "5%",
|
|
bottom: "10%",
|
|
top: "10%",
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: false,
|
|
data: this.block2.titles,
|
|
axisLabel: { color: "#a2c8f9", rotate: this.block2.rotate, },
|
|
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: this.block2.datas,
|
|
},
|
|
],
|
|
};
|
|
return option;
|
|
},
|
|
renderEleTrendSel(opt) {
|
|
option = {
|
|
grid: {
|
|
left: "5%",
|
|
right: "5%",
|
|
bottom: "10%",
|
|
top: "15%",
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: this.block3.areas,
|
|
textStyle: { color: "#a2c8f9" },
|
|
|
|
},
|
|
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: this.block3.titles,
|
|
axisLabel: { color: "#a2c8f9", rotate: this.block3.rotate, },
|
|
splitLine: {
|
|
lineStyle: {
|
|
opacity: 0.1
|
|
}
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
axisLabel: { color: "#a2c8f9" },
|
|
splitLine: {
|
|
lineStyle: {
|
|
opacity: 0.1
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series: this.block3.datas
|
|
};
|
|
|
|
|
|
return option;
|
|
},
|
|
renderCurrentTrendSel(opt) {
|
|
option = {
|
|
grid: {
|
|
left: "5%",
|
|
right: "5%",
|
|
bottom: "10%",
|
|
top: "25%",
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['A相', 'B相', 'C相'],
|
|
textStyle: { color: "#a2c8f9" },
|
|
|
|
},
|
|
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: this.block4.titles,
|
|
axisLabel: { color: "#a2c8f9", rotate: this.block4.rotate, },
|
|
splitLine: {
|
|
lineStyle: {
|
|
opacity: 0.1
|
|
}
|
|
},
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
axisLabel: { color: "#a2c8f9" },
|
|
max: this.block4.max,
|
|
splitLine: {
|
|
lineStyle: {
|
|
opacity: 0.1
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series: this.block4.datas
|
|
};
|
|
|
|
|
|
return option;
|
|
},
|
|
renderAreaEleTrendSel(opt) {
|
|
option = {
|
|
grid: {
|
|
left: "5%",
|
|
right: "5%",
|
|
bottom: "10%",
|
|
top: "15%",
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data:this.block5.areas,
|
|
textStyle: { color: "#a2c8f9" },
|
|
|
|
},
|
|
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: this.block5.titles,
|
|
axisLabel: { color: "#a2c8f9" },
|
|
splitLine: {
|
|
lineStyle: {
|
|
opacity: 0.1
|
|
}
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
axisLabel: { color: "#a2c8f9" },
|
|
splitLine: {
|
|
lineStyle: {
|
|
opacity: 0.1
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series: this.block5.datas
|
|
};
|
|
|
|
|
|
return option;
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
</html> |