@{
ViewBag.Title = "Index";
}
<main id="js-page-content" role="main" class="page-content">
<div class="row">
<div class="col-sm-12 col-xl-4">
<img src="img/clouds.png" class="img-fluid" style="min-height: 520px;">
</div>
<div class="col-sm-12 col-xl-4">
<div class="row">
<div class="col-sm-6 col-xl-6">
<div class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g">
<div class="">
<h3 class="display-4 d-block l-h-n m-0 fw-500">
21.5k
<small class="m-0 l-h-n">users signed up</small>
</h3>
</div>
<i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
</div>
</div>
<div class="col-sm-6 col-xl-6">
<div class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g">
<div class="">
<h3 class="display-4 d-block l-h-n m-0 fw-500">
$10,203
<small class="m-0 l-h-n">Visual Index Figure</small>
</h3>
</div>
<i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4" style="font-size: 6rem;"></i>
</div>
</div>
<div class="col-lg-12">
<div id="panel-2" class="panel panel-locked" data-panel-sortable data-panel-collapsed data-panel-close>
<div class="panel-hdr">
<h2>
昨日／今日用電比較
</h2>
</div>
<div class="panel-container show">
<div class="panel-content poisition-relative" style="min-height: 346.84px;">
<div class="p-1 position-absolute pos-right pos-top mt-3 mr-3 z-index-cloud d-flex align-items-center justify-content-center">
<div class="border-faded border-top-0 border-left-0 border-bottom-0 py-2 pr-4 mr-3 hidden-sm-down">
<div class="text-right fw-500 l-h-n d-flex flex-column">
<div class="h3 m-0 d-flex align-items-center justify-content-end">
<div class='icon-stack mr-2'>
<i class="base base-7 icon-stack-3x opacity-100 color-success-600"></i>
<i class="base base-7 icon-stack-2x opacity-100 color-success-500"></i>
<i class="fal fa-arrow-up icon-stack-1x opacity-100 color-white"></i>
</div>
$44.34 / GE
</div>
<span class="m-0 fs-xs text-muted">Increased Profit as per redux margins and estimates</span>
</div>
</div>
<div class="js-easy-pie-chart color-info-400 position-relative d-inline-flex align-items-center justify-content-center" data-percent="35" data-piesize="95" data-linewidth="10" data-scalelength="5">
<div class="js-easy-pie-chart color-success-400 position-relative position-absolute pos-left pos-right pos-top pos-bottom d-flex align-items-center justify-content-center" data-percent="65" data-piesize="60" data-linewidth="5" data-scalelength="1" data-scalecolor="#fff">
<div class="position-absolute pos-top pos-left pos-right pos-bottom d-flex align-items-center justify-content-center fw-500 fs-xl text-dark">78%</div>
</div>
</div>
</div>
<div id="flot-area" style="width:100%; height:300px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-xl-4">
<div class="row">
<div class="col-sm-6 col-xl-6">
<div class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g">
<div class="">
<h3 class="display-4 d-block l-h-n m-0 fw-500">
- 103.72
<small class="m-0 l-h-n">Offset Balance Ratio</small>
</h3>
</div>
<i class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6" style="font-size: 8rem;"></i>
</div>
</div>
<div class="col-sm-6 col-xl-6">
<div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g">
<div class="">
<h3 class="display-4 d-block l-h-n m-0 fw-500">
+40%
<small class="m-0 l-h-n">Product level increase</small>
</h3>
</div>
<i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4" style="font-size: 6rem;"></i>
</div>
</div>
<div class="col-lg-12">
<div id="panel-3" class="panel panel-locked" data-panel-sortable data-panel-collapsed data-panel-close>
<div class="panel-hdr">
<h2>
本週／上週用電比較
</h2>
</div>
<div class="panel-container show">
<div class="panel-content poisition-relative">
<div class="pb-5 pt-3">
<div class="row">
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
<div class="p-2 mr-3 bg-info-200 rounded">
<span class="peity-bar" data-peity="{"fill": ["#fff"], "width": 27, "height": 27 }">3,4,5,8,2</span>
</div>
<div>
<label class="fs-sm mb-0">Bounce Rate</label>
<h4 class="font-weight-bold mb-0">37.56%</h4>
</div>
</div>
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
<div class="p-2 mr-3 bg-info-300 rounded">
<span class="peity-bar" data-peity="{"fill": ["#fff"], "width": 27, "height": 27 }">5,3,1,7,9</span>
</div>
<div>
<label class="fs-sm mb-0">Sessions</label>
<h4 class="font-weight-bold mb-0">759</h4>
</div>
</div>
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
<div class="p-2 mr-3 bg-success-300 rounded">
<span class="peity-bar" data-peity="{"fill": ["#fff"], "width": 27, "height": 27 }">3,4,3,5,5</span>
</div>
<div>
<label class="fs-sm mb-0">New Sessions</label>
<h4 class="font-weight-bold mb-0">12.17%</h4>
</div>
</div>
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
<div class="p-2 mr-3 bg-success-500 rounded">
<span class="peity-bar" data-peity="{"fill": ["#fff"], "width": 27, "height": 27 }">6,4,7,5,6</span>
</div>
<div>
<label class="fs-sm mb-0">Clickthrough</label>
<h4 class="font-weight-bold mb-0">19.77%</h4>
</div>
</div>
</div>
</div>
<div id="flotVisit" style="width:100%; height:208px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="row">
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-lightbulb-on fa-2x blink"></i></button>
<button type="button" class="btn btn-secondary">照明系統 </button>
</div>
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-thermometer-full fa-2x"></i></button>
<button type="button" class="btn btn-secondary">環境感測系統</button>
</div>
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-car-battery fa-2x"></i></button>
<button type="button" class="btn btn-secondary">電錶系統 </button>
</div>
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-wind fa-2x"></i></button>
<button type="button" class="btn btn-secondary">空調系統 </button>
</div>
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-window-restore fa-2x"></i></button>
<button type="button" class="btn btn-secondary">電梯系統 </button>
</div>
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-door-closed fa-2x"></i></button>
<button type="button" class="btn btn-secondary">門禁系統 </button>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="row">
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-lightbulb-on fa-2x"></i></button>
<button type="button" class="btn btn-secondary">照明系統 </button>
</div>
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-thermometer-full fa-2x"></i></button>
<button type="button" class="btn btn-secondary">環境感測系統</button>
</div>
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-car-battery fa-2x"></i></button>
<button type="button" class="btn btn-secondary">電錶系統 </button>
</div>
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-wind fa-2x"></i></button>
<button type="button" class="btn btn-secondary">空調系統 </button>
</div>
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-window-restore fa-2x"></i></button>
<button type="button" class="btn btn-secondary">電梯系統 </button>
</div>
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-door-closed fa-2x"></i></button>
<button type="button" class="btn btn-secondary">門禁系統 </button>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="row">
<div class="col-lg-6">
<div id="panel-3" class="panel panel-locked" data-panel-sortable data-panel-collapsed data-panel-close>
<div class="panel-hdr">
<h2>
異常狀態
</h2>
</div>
<div class="panel-container show">
<div class="panel-content poisition-relative">
<div class="pb-5 pt-3">
<div class="d-flex mr-4">
<div class="mr-2">
<span class="peity-donut" data-peity="{ "fill": ["#967bbd", "#ccbfdf"], "innerRadius": 14, "radius": 20 }">7/10</span>
</div>
<div>
<label class="fs-sm mb-0 mt-2 mt-md-0">New Sessions</label>
<h4 class="font-weight-bold mb-0">70.60%</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div id="panel-3" class="panel panel-locked" data-panel-sortable data-panel-collapsed data-panel-close>
<div class="panel-hdr">
<h2>
工單進度
</h2>
</div>
<div class="panel-container show">
<div class="panel-content poisition-relative">
<div class="pb-5 pt-3">
<div class="d-flex mr-0">
<div class="mr-2">
<span class="peity-donut" data-peity="{ "fill": ["#2196F3", "#9acffa"], "innerRadius": 14, "radius": 20 }">3/10</span>
</div>
<div>
<label class="fs-sm mb-0 mt-2 mt-md-0">Page Views</label>
<h4 class="font-weight-bold mb-0">14,134</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>