<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" onclick="goElectricMeter()">電錶系統 </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> <script> /* defined datas */ var dataTargetProfit = [ [1354586000000, 153], [1364587000000, 658], [1374588000000, 198], [1384589000000, 663], [1394590000000, 801], [1404591000000, 1080], [1414592000000, 353], [1424593000000, 749], [1434594000000, 523], [1444595000000, 258], [1454596000000, 688], [1464597000000, 364] ] var dataProfit = [ [1354586000000, 53], [1364587000000, 65], [1374588000000, 98], [1384589000000, 83], [1394590000000, 980], [1404591000000, 808], [1414592000000, 720], [1424593000000, 674], [1434594000000, 23], [1444595000000, 79], [1454596000000, 88], [1464597000000, 36] ] var dataSignups = [ [1354586000000, 647], [1364587000000, 435], [1374588000000, 784], [1384589000000, 346], [1394590000000, 487], [1404591000000, 463], [1414592000000, 479], [1424593000000, 236], [1434594000000, 843], [1444595000000, 657], [1454596000000, 241], [1464597000000, 341] ] var dataSet1 = [ [0, 10], [100, 8], [200, 7], [300, 5], [400, 4], [500, 6], [600, 3], [700, 2] ]; var dataSet2 = [ [0, 9], [100, 6], [200, 5], [300, 3], [400, 3], [500, 5], [600, 2], [700, 1] ]; $(document).ready(function () { /* init datatables */ $('#dt-basic-example').dataTable( { responsive: true, dom: "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'B>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>", buttons: [ { extend: 'colvis', text: 'Column Visibility', titleAttr: 'Col visibility', className: 'btn-outline-default' }, { extend: 'csvHtml5', text: 'CSV', titleAttr: 'Generate CSV', className: 'btn-outline-default' }, { extend: 'copyHtml5', text: 'Copy', titleAttr: 'Copy to clipboard', className: 'btn-outline-default' }, { extend: 'print', text: '<i class="fal fa-print"></i>', titleAttr: 'Print Table', className: 'btn-outline-default' } ], columnDefs: [ { targets: -1, title: '', orderable: false, render: function (data, type, full, meta) { /* -- ES6 -- convert using https://babeljs.io online transpiler return ` <a href='javascript:void(0);' class='btn btn-sm btn-icon btn-outline-danger rounded-circle mr-1' title='Delete Record'> <i class="fal fa-times"></i> </a> <div class='dropdown d-inline-block dropleft '> <a href='#'' class='btn btn-sm btn-icon btn-outline-primary rounded-circle shadow-0' data-toggle='dropdown' aria-expanded='true' title='More options'> <i class="fal fa-ellipsis-v"></i> </a> <div class='dropdown-menu'> <a class='dropdown-item' href='javascript:void(0);'>Change Status</a> <a class='dropdown-item' href='javascript:void(0);'>Generate Report</a> </div> </div>`; ES5 example below: */ return "\n\t\t\t\t\t\t<a href='javascript:void(0);' class='btn btn-sm btn-icon btn-outline-danger rounded-circle mr-1' title='Delete Record'>\n\t\t\t\t\t\t\t<i class=\"fal fa-times\"></i>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t\t<div class='dropdown d-inline-block dropleft'>\n\t\t\t\t\t\t\t<a href='#'' class='btn btn-sm btn-icon btn-outline-primary rounded-circle shadow-0' data-toggle='dropdown' aria-expanded='true' title='More options'>\n\t\t\t\t\t\t\t\t<i class=\"fal fa-ellipsis-v\"></i>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t<div class='dropdown-menu'>\n\t\t\t\t\t\t\t\t<a class='dropdown-item' href='javascript:void(0);'>Change Status</a>\n\t\t\t\t\t\t\t\t<a class='dropdown-item' href='javascript:void(0);'>Generate Report</a>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>"; }, }, ] }); /* flot toggle example */ var flot_toggle = function () { var data = [ { label: "Target Profit", data: dataTargetProfit, color: color.info._400, bars: { show: true, align: "center", barWidth: 30 * 30 * 60 * 1000 * 80, lineWidth: 0, /*fillColor: { colors: [color.primary._500, color.primary._900] },*/ fillColor: { colors: [ { opacity: 0.9 }, { opacity: 0.1 }] } }, highlightColor: 'rgba(255,255,255,0.3)', shadowSize: 0 }, { label: "Actual Profit", data: dataProfit, color: color.warning._500, lines: { show: true, lineWidth: 2 }, shadowSize: 0, points: { show: true } }, { label: "User Signups", data: dataSignups, color: color.success._500, lines: { show: true, lineWidth: 2 }, shadowSize: 0, points: { show: true } }] var options = { grid: { hoverable: true, clickable: true, tickColor: 'rgba(0,0,0,0.05)', borderWidth: 1, borderColor: 'rgba(0,0,0,0.05)' }, tooltip: true, tooltipOpts: { cssClass: 'tooltip-inner', defaultTheme: false }, xaxis: { mode: "time", tickColor: 'rgba(0,0,0,0.05)', }, yaxes: { tickColor: 'rgba(0,0,0,0.05)', tickFormatter: function (val, axis) { return "$" + val; }, max: 1200 } }; var plot2 = null; function plotNow() { var d = []; $("#js-checkbox-toggles").find(':checkbox').each(function () { if ($(this).is(':checked')) { d.push(data[$(this).attr("name").substr(4, 1)]); } }); if (d.length > 0) { if (plot2) { plot2.setData(d); plot2.draw(); } else { plot2 = $.plot($("#flot-toggles"), d, options); } } }; $("#js-checkbox-toggles").find(':checkbox').on('change', function () { plotNow(); }); plotNow() } flot_toggle(); /* flot toggle example -- end*/ /* flot area */ var flotArea = $.plot($('#flot-area'), [ { data: dataSet1, label: 'New Customer', color: color.success._200 }, { data: dataSet2, label: 'Returning Customer', color: color.info._200 }], { series: { lines: { show: true, lineWidth: 2, fill: true, fillColor: { colors: [ { opacity: 0 }, { opacity: 0.5 }] } }, shadowSize: 0 }, points: { show: true, }, legend: { noColumns: 1, position: 'nw' }, grid: { hoverable: true, clickable: true, borderColor: '#ddd', tickColor: 'rgba(0,0,0,0.05)', aboveData: true, borderWidth: 0, labelMargin: 5, backgroundColor: 'transparent' }, yaxis: { tickLength: 1, min: 0, max: 15, color: '#eee', tickColor: 'rgba(0,0,0,0.05)', font: { size: 0, color: '#999' } }, xaxis: { tickLength: 1, color: '#eee', tickColor: 'rgba(0,0,0,0.05)', font: { size: 10, color: '#999' } } }); /* flot area -- end */ var flotVisit = $.plot('#flotVisit', [ { data: [ [3, 0], [4, 1], [5, 3], [6, 3], [7, 10], [8, 11], [9, 12], [10, 9], [11, 12], [12, 8], [13, 5] ], color: color.success._200 }, { data: [ [1, 0], [2, 0], [3, 1], [4, 2], [5, 2], [6, 5], [7, 8], [8, 12], [9, 9], [10, 11], [11, 5] ], color: color.info._200 }], { series: { shadowSize: 0, lines: { show: true, lineWidth: 2, fill: true, fillColor: { colors: [ { opacity: 0 }, { opacity: 0.12 }] } } }, grid: { borderWidth: 0 }, yaxis: { min: 0, max: 15, tickColor: 'rgba(0,0,0,0.05)', ticks: [ [0, ''], [5, '100K'], [10, '200K'], [15, '300K'] ], font: { color: '#444', size: 10 } }, xaxis: { tickColor: 'rgba(0,0,0,0.05)', ticks: [ [2, '2am'], [3, '3am'], [4, '4am'], [5, '5am'], [6, '6am'], [7, '7am'], [8, '8am'], [9, '9am'], [10, '1pm'], [11, '2pm'], [12, '3pm'], [13, '4pm'] ], font: { color: '#999', size: 9 } } }); }); function goElectricMeter() { pageAct.sysMainTag = $('#subSysBtnE4').data("subSysObj").main_system_tag; pageAct.sysSubTag = $('#subSysBtnE4').data("subSysObj").sub_system_tag; pageAct.sysSubName = $('#subSysBtnE4').data("subSysObj").full_name; pageAct.sysSubObj = $('#subSysBtnE4').data("subSysObj"); $("#js-page-content").load("_sysMonAll.html", loadCallback); } </script>