Merge branch 'master' of https://gitea.mjm-staging.developers-homelab.net/BIMS/BIMS
708
Frontend/_dashboard.html
Normal file
@ -0,0 +1,708 @@
|
|||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
265
Frontend/_systemMonitor.html
Normal file
@ -0,0 +1,265 @@
|
|||||||
|
<style>
|
||||||
|
[id^=yt_tooltip] {
|
||||||
|
width: 450px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row bg-dark">
|
||||||
|
<h1 class="p-2 mx-5 mb-0">電錶系統</h1>
|
||||||
|
<div class="btn-group my-2">
|
||||||
|
<button type="button" class="btn btn-secondary waves-effect waves-themed">總覽</button>
|
||||||
|
<button type="button" class="btn btn-secondary waves-effect waves-themed">19 F</button>
|
||||||
|
<button type="button" class="btn btn-secondary waves-effect waves-themed">21 F</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<main id="js-page-content" role="main" class="page-content">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12 col-xl-5">
|
||||||
|
<div class="d-flex justify-content-start mb-6">
|
||||||
|
<button type="button" class="btn btn-primary waves-effect waves-themed mr-5">19 F</button>
|
||||||
|
<div id="floor19" class="mr-5">
|
||||||
|
<span class="status status-success d-inline-block">
|
||||||
|
<img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
|
||||||
|
</span> 19F 門口東
|
||||||
|
</div>
|
||||||
|
<div class="mr-5">
|
||||||
|
<span class="status status-danger d-inline-block">
|
||||||
|
<img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
|
||||||
|
</span> 19F 戶外門口中間
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex justify-content-start mb-6">
|
||||||
|
<button type="button" class="btn btn-primary waves-effect waves-themed mr-5">21 F</button>
|
||||||
|
<div class=" mr-5">
|
||||||
|
<span class="status status-success d-inline-block">
|
||||||
|
<img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
|
||||||
|
</span> 21F 電錶01
|
||||||
|
</div>
|
||||||
|
<div class="mr-5">
|
||||||
|
<span class="status status-danger d-inline-block">
|
||||||
|
<img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
|
||||||
|
</span> 21F 電錶02
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12 col-xl-7">
|
||||||
|
<img src="img/clouds.png" class="img-fluid" style="min-height: 520px;">
|
||||||
|
<!--<a href="javascript:;" data-toggle="modal" data-target=".default-example-modal-right-lg">
|
||||||
|
<span class="badge border border-light bg-primary-700 position-absolute pos-top pos-left"><i class="fal fa-image fa-3x"></i></span></a>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
initPopover();
|
||||||
|
})
|
||||||
|
|
||||||
|
function drawStateTabBlo() {
|
||||||
|
let strHtml = `<table class="table table-bordered table-striped text-center m-0">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>電壓 V</td>
|
||||||
|
<td>113</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>電流 A</td>
|
||||||
|
<td>8</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>功率 W</td>
|
||||||
|
<td>203</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>今日用電 kWh</td>
|
||||||
|
<td>58</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>`
|
||||||
|
return strHtml;
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawInfoTabBlo() {
|
||||||
|
let strHtml = `<table class="table table-bordered table-striped text-center m-0">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>設備編號</td>
|
||||||
|
<td>B01-B2-19F-CR-001</td>
|
||||||
|
<td>3D 座標</td>
|
||||||
|
<td>113</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>設備名稱</td>
|
||||||
|
<td>A區迴路001</td>
|
||||||
|
<td>forge dbid</td>
|
||||||
|
<td>101</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>廠牌</td>
|
||||||
|
<td>飛利浦 Philip</td>
|
||||||
|
<td>IP</td>
|
||||||
|
<td>192.168.1.105</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>型號</td>
|
||||||
|
<td>BH065</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>原廠文件</td>
|
||||||
|
<td><a href="#">2022使用手冊.pdf</a></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>型號</td>
|
||||||
|
<td>BH065</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>`
|
||||||
|
return strHtml;
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawErrRecTabBlo() {
|
||||||
|
let strHtml = `<table class="table table-bordered table-striped text-center m-0">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>設備編號</td>
|
||||||
|
<td>B01-B2-19F-CR-001</td>
|
||||||
|
<td>3D 座標</td>
|
||||||
|
<td>113</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>設備名稱</td>
|
||||||
|
<td>A區迴路001</td>
|
||||||
|
<td>forge dbid</td>
|
||||||
|
<td>101</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>廠牌</td>
|
||||||
|
<td>飛利浦 Philip</td>
|
||||||
|
<td>IP</td>
|
||||||
|
<td>192.168.1.105</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>型號</td>
|
||||||
|
<td>BH065</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>原廠文件</td>
|
||||||
|
<td><a href="#">2022使用手冊.pdf</a></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>型號</td>
|
||||||
|
<td>BH065</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>`
|
||||||
|
return strHtml;
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawOpeRecTabBlo() {
|
||||||
|
let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
|
||||||
|
|
||||||
|
</table>`
|
||||||
|
return strHtml;
|
||||||
|
}
|
||||||
|
|
||||||
|
function initPopover() {
|
||||||
|
$("#floor19").YTTooltip({
|
||||||
|
html: `<div class="card m-1 border device-wrap">
|
||||||
|
<div class="card-header p-2 px-3">
|
||||||
|
<div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
|
||||||
|
<button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
|
||||||
|
<button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
|
||||||
|
<button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
|
||||||
|
<button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body p-2 tab-content">
|
||||||
|
|
||||||
|
<div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
|
||||||
|
${drawStateTabBlo() }
|
||||||
|
</div>
|
||||||
|
<div id="info" data-tabname="cardTab" data-tabrole="child">
|
||||||
|
${drawInfoTabBlo() }
|
||||||
|
</div>
|
||||||
|
<div id="errRec" data-tabname="cardTab" data-tabrole="child">
|
||||||
|
${drawErrRecTabBlo() }
|
||||||
|
</div>
|
||||||
|
<div id="opeRec" data-tabname="cardTab" data-tabrole="child">
|
||||||
|
${drawOpeRecTabBlo() }
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>`,
|
||||||
|
onShow: function () {
|
||||||
|
|
||||||
|
var tab = new YT.Tab({ tabName: "cardTab" })
|
||||||
|
|
||||||
|
loadOpeRecTable();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function loadOpeRecTable() {
|
||||||
|
let url = "https://api.npoint.io/31e717774a0f5822cc7b";
|
||||||
|
let tag = "#opeRecTable";
|
||||||
|
|
||||||
|
let column_defs = [
|
||||||
|
{ "targets": [0], "width": "8%", "sortable": true },
|
||||||
|
{ "targets": [1], "width": "8%", "sortable": true },
|
||||||
|
{ "targets": [2], "width": "7%", "sortable": true},
|
||||||
|
{ "targets": [3], "width": "7%", "sortable": true},
|
||||||
|
];
|
||||||
|
|
||||||
|
let columns = [
|
||||||
|
{
|
||||||
|
"title": "異常ID",
|
||||||
|
"data": "errId",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "異常原因",
|
||||||
|
"data": "errReason",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "ACK確認",
|
||||||
|
"data": "ackCheck",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "發生/賦歸時間",
|
||||||
|
"data": "time",
|
||||||
|
},
|
||||||
|
|
||||||
|
];
|
||||||
|
|
||||||
|
let callback = function () {
|
||||||
|
$('#opeRecTable').wrap("<div class='scrolledTable'></div>"); //不採用datatable內建scrollbody，會導致thead跑掉
|
||||||
|
let api = this.api();
|
||||||
|
api.columns.adjust();
|
||||||
|
}
|
||||||
|
|
||||||
|
opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, callback, null, null, null, null, null, "tpi");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
8
Frontend/css/yourteam/plugins/yt-tooltip/yt-tooltip.css
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
[id^=yt_tooltip] {
|
||||||
|
background-color: var(--yt-main-color);
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0px 0px 11px 3px rgb(0 0 0 / 20%);
|
||||||
|
min-width:100px;
|
||||||
|
}
|
||||||
|
|
||||||
@ -1,185 +0,0 @@
|
|||||||
|
|
||||||
<div class="row d-flex justify-content-between mx-3 mt-3">
|
|
||||||
<!-- 天氣圖 -->
|
|
||||||
<div class="col-sm-12 col-xl-4">
|
|
||||||
<img src="..\assets\img\clouds.png"
|
|
||||||
class="img-fluid"
|
|
||||||
style="min-height: 520px; background-color: aquamarine" />
|
|
||||||
</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-info rounded position-relative text-white">
|
|
||||||
<h3 class="display-6 d-block m-0">21.5k</h3>
|
|
||||||
<small class="m-0">users signed up</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 col-xl-6">
|
|
||||||
<div class="p-3 bg-warning rounded position-relative text-white">
|
|
||||||
<h3 class="display-6 d-block m-0">$10,203</h3>
|
|
||||||
<small class="m-0">Visual Index Figure</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-12 mt-4">
|
|
||||||
<div class="card text-white bg-dark" style="min-height: 390px">
|
|
||||||
<div class="card-header">昨日／今日用電比較</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title">Dark card title</h5>
|
|
||||||
<p class="card-text">
|
|
||||||
Some quick example text to build on the card title and make up the
|
|
||||||
bulk of the card's content.
|
|
||||||
</p>
|
|
||||||
</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 rounded position-relative text-white">
|
|
||||||
<h3 class="display-6 d-block m-0 fw-500">- 103.72</h3>
|
|
||||||
<small class="m-0">Offset Balance Ratio</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 col-xl-6">
|
|
||||||
<div class="p-3 bg-secondary rounded position-relative text-white">
|
|
||||||
<h3 class="display-6 d-block m-0 fw-500">+40%</h3>
|
|
||||||
<small class="m-0">Product level increase</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-12 mt-4">
|
|
||||||
<div class="card text-white bg-dark" style="min-height: 390px">
|
|
||||||
<div class="card-header">本週／上週用電比較</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title">Dark card title</h5>
|
|
||||||
<p class="card-text">
|
|
||||||
Some quick example text to build on the card title and make up the
|
|
||||||
bulk of the card's content.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 按鈕組 卡片組 -->
|
|
||||||
<div class="row d-flex justify-content-between col mx-3 my-3">
|
|
||||||
<!-- 按鈕組 -->
|
|
||||||
<div class="col-sm-12 col-lg-8">
|
|
||||||
<div class="row">
|
|
||||||
<div class="btn-group btn-group-lg col-lg-3 mb-4"
|
|
||||||
v-for="btn in btns"
|
|
||||||
:key="btn">
|
|
||||||
<button type="button" class="btn btn-secondary col-6">
|
|
||||||
<i :class="btn.icon"></i>
|
|
||||||
</button>
|
|
||||||
<button type="button" class="btn btn-secondary col-6">
|
|
||||||
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 卡片組 -->
|
|
||||||
<div class="col-sm-12 col-lg-4">
|
|
||||||
<!-- 異常狀態 -->
|
|
||||||
<div class="mb-1">
|
|
||||||
<div class="card text-white bg-dark">
|
|
||||||
<div class="card-header">異常狀態</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title">Dark card title</h5>
|
|
||||||
<p class="card-text">
|
|
||||||
Some quick example text to build on the card title and make up the
|
|
||||||
bulk of the card's content.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 工單進度 -->
|
|
||||||
<div class="">
|
|
||||||
<div class="card text-white bg-dark">
|
|
||||||
<div class="card-header">工單進度</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title">Dark card title</h5>
|
|
||||||
<p class="card-text">
|
|
||||||
Some quick example text to build on the card title and make up the
|
|
||||||
bulk of the card's content.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { useStore } from 'vuex';
|
|
||||||
export default {
|
|
||||||
setup() {
|
|
||||||
const store = useStore();
|
|
||||||
|
|
||||||
return { store }
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
btns: [
|
|
||||||
{
|
|
||||||
name: "照明系統",
|
|
||||||
icon: "fa-regular fa-lightbulb fa-2x",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "環境感測系統",
|
|
||||||
icon: "fa-solid fa-temperature-three-quarters fa-2x",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "電表系統",
|
|
||||||
icon: "fa-solid fa-bolt fa-2x",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "空調系統",
|
|
||||||
icon: "fa-solid fa-wind fa-2x",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "電梯系統",
|
|
||||||
icon: "fa-solid fa-elevator fa-2x",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "門禁系統",
|
|
||||||
icon: "fa-sharp fa-solid fa-door-closed fa-2x",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "照明系統",
|
|
||||||
icon: "fa-regular fa-lightbulb fa-2x",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "環境感測系統",
|
|
||||||
icon: "fa-solid fa-temperature-three-quarters fa-2x",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "電表系統",
|
|
||||||
icon: "fa-solid fa-bolt fa-2x",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "空調系統",
|
|
||||||
icon: "fa-solid fa-wind fa-2x",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "電梯系統",
|
|
||||||
icon: "fa-solid fa-elevator fa-2x",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "門禁系統",
|
|
||||||
icon: "fa-sharp fa-solid fa-door-closed fa-2x",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
4
Frontend/img/demo/_notes/dwsync.xml
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8" ?>
|
||||||
|
<dwsync>
|
||||||
|
<file name="s-1.png" server="//mnas/web/wsp/" local="132338994700000000" remote="132338994700000000" Dst="0" />
|
||||||
|
</dwsync>
|
||||||
BIN
Frontend/img/demo/ajax.png
Normal file
|
After Width: | Height: | Size: 2.4 KiB |
BIN
Frontend/img/demo/angular.png
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
BIN
Frontend/img/demo/authors/josh.png
Normal file
|
After Width: | Height: | Size: 38 KiB |
BIN
Frontend/img/demo/authors/jovanni.png
Normal file
|
After Width: | Height: | Size: 44 KiB |
BIN
Frontend/img/demo/authors/roberto.png
Normal file
|
After Width: | Height: | Size: 30 KiB |
BIN
Frontend/img/demo/authors/sunny.png
Normal file
|
After Width: | Height: | Size: 43 KiB |
13
Frontend/img/demo/avatars/_notes/dwsync.xml
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8" ?>
|
||||||
|
<dwsync>
|
||||||
|
<file name="avatar-admin.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
|
||||||
|
<file name="avatar-d.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
|
||||||
|
<file name="avatar-b.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
|
||||||
|
<file name="avatar-e.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
|
||||||
|
<file name="avatar-g.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
|
||||||
|
<file name="avatar-h.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
|
||||||
|
<file name="avatar-a.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
|
||||||
|
<file name="avatar-j.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
|
||||||
|
<file name="avatar-c.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
|
||||||
|
<file name="avatar-m.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
|
||||||
|
</dwsync>
|
||||||
BIN
Frontend/img/demo/avatars/avatar-a.png
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
35
Frontend/img/demo/avatars/avatar-admin.txt
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
LICENSE CERTIFICATE : Envato Market Item
|
||||||
|
==============================================
|
||||||
|
|
||||||
|
This document certifies the purchase of:
|
||||||
|
ONE PHOTODUNE EXTENDED LICENSE
|
||||||
|
as defined in the standard terms and conditions on Envato Market.
|
||||||
|
|
||||||
|
Licensor's Author Username:
|
||||||
|
ollyi
|
||||||
|
|
||||||
|
Licensee:
|
||||||
|
Sunnyat A.
|
||||||
|
|
||||||
|
Item Title:
|
||||||
|
Computer programmer (aka "img/demo/avatars/avatar-admin.png")
|
||||||
|
|
||||||
|
Item URL:
|
||||||
|
https://photodune.net/item/computer-programmer/2360811
|
||||||
|
|
||||||
|
Item ID:
|
||||||
|
2360811
|
||||||
|
|
||||||
|
Item Purchase Code:
|
||||||
|
c37c52b4-2d0b-4742-993e-ef2f771251ae
|
||||||
|
|
||||||
|
Purchase Date:
|
||||||
|
2014-03-06 12:23:06 UTC
|
||||||
|
|
||||||
|
For any queries related to this document or license please contact Help Team via https://help.market.envato.com
|
||||||
|
|
||||||
|
Envato Pty. Ltd. (ABN 11 119 159 741)
|
||||||
|
PO Box 16122, Collins Street West, VIC 8007, Australia
|
||||||
|
|
||||||
|
==== THIS IS NOT A TAX RECEIPT OR INVOICE ====
|
||||||
|
|
||||||
BIN
Frontend/img/demo/avatars/avatar-b.png
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
Frontend/img/demo/avatars/avatar-c.png
Normal file
|
After Width: | Height: | Size: 2.7 KiB |
BIN
Frontend/img/demo/avatars/avatar-d.png
Normal file
|
After Width: | Height: | Size: 2.6 KiB |
BIN
Frontend/img/demo/avatars/avatar-e.png
Normal file
|
After Width: | Height: | Size: 2.9 KiB |
BIN
Frontend/img/demo/avatars/avatar-f.png
Normal file
|
After Width: | Height: | Size: 284 B |
BIN
Frontend/img/demo/avatars/avatar-g.png
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
BIN
Frontend/img/demo/avatars/avatar-h.png
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
BIN
Frontend/img/demo/avatars/avatar-i.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
Frontend/img/demo/avatars/avatar-j.png
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
BIN
Frontend/img/demo/avatars/avatar-k.png
Normal file
|
After Width: | Height: | Size: 2.7 KiB |
BIN
Frontend/img/demo/avatars/avatar-m.png
Normal file
|
After Width: | Height: | Size: 268 B |
10
Frontend/img/demo/avatars/cc.txt
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
CC0 License
|
||||||
|
|
||||||
|
- Free for personal and commercial use
|
||||||
|
- No attribution required
|
||||||
|
|
||||||
|
https://www.pexels.com
|
||||||
|
https://www.pexels.com/photo-license/
|
||||||
|
|
||||||
|
Search case:
|
||||||
|
https://www.pexels.com/search/profile/
|
||||||
BIN
Frontend/img/demo/avatars/ng.jpg
Normal file
|
After Width: | Height: | Size: 5.2 KiB |
BIN
Frontend/img/demo/chromedevtools-1.png
Normal file
|
After Width: | Height: | Size: 61 KiB |
BIN
Frontend/img/demo/chromedevtools-2.png
Normal file
|
After Width: | Height: | Size: 66 KiB |
BIN
Frontend/img/demo/chromedevtools-3.png
Normal file
|
After Width: | Height: | Size: 66 KiB |
BIN
Frontend/img/demo/chromedevtools-4.png
Normal file
|
After Width: | Height: | Size: 44 KiB |
BIN
Frontend/img/demo/debounce-at_begin.png
Normal file
|
After Width: | Height: | Size: 3.5 KiB |
BIN
Frontend/img/demo/debounce.png
Normal file
|
After Width: | Height: | Size: 3.5 KiB |
BIN
Frontend/img/demo/demo-panel.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
Frontend/img/demo/gallery/1.jpg
Normal file
|
After Width: | Height: | Size: 103 KiB |
BIN
Frontend/img/demo/gallery/10.jpg
Normal file
|
After Width: | Height: | Size: 69 KiB |
BIN
Frontend/img/demo/gallery/11.jpg
Normal file
|
After Width: | Height: | Size: 66 KiB |
BIN
Frontend/img/demo/gallery/12.jpg
Normal file
|
After Width: | Height: | Size: 65 KiB |
BIN
Frontend/img/demo/gallery/13.jpg
Normal file
|
After Width: | Height: | Size: 58 KiB |
BIN
Frontend/img/demo/gallery/14.jpg
Normal file
|
After Width: | Height: | Size: 58 KiB |
BIN
Frontend/img/demo/gallery/15.jpg
Normal file
|
After Width: | Height: | Size: 55 KiB |
BIN
Frontend/img/demo/gallery/16.jpg
Normal file
|
After Width: | Height: | Size: 54 KiB |
BIN
Frontend/img/demo/gallery/17.jpg
Normal file
|
After Width: | Height: | Size: 54 KiB |
BIN
Frontend/img/demo/gallery/18.jpg
Normal file
|
After Width: | Height: | Size: 53 KiB |
BIN
Frontend/img/demo/gallery/19.jpg
Normal file
|
After Width: | Height: | Size: 52 KiB |
BIN
Frontend/img/demo/gallery/2.jpg
Normal file
|
After Width: | Height: | Size: 94 KiB |
BIN
Frontend/img/demo/gallery/20.jpg
Normal file
|
After Width: | Height: | Size: 51 KiB |
BIN
Frontend/img/demo/gallery/21.jpg
Normal file
|
After Width: | Height: | Size: 51 KiB |
BIN
Frontend/img/demo/gallery/22.jpg
Normal file
|
After Width: | Height: | Size: 51 KiB |
BIN
Frontend/img/demo/gallery/23.jpg
Normal file
|
After Width: | Height: | Size: 50 KiB |
BIN
Frontend/img/demo/gallery/24.jpg
Normal file
|
After Width: | Height: | Size: 50 KiB |
BIN
Frontend/img/demo/gallery/25.jpg
Normal file
|
After Width: | Height: | Size: 48 KiB |
BIN
Frontend/img/demo/gallery/26.jpg
Normal file
|
After Width: | Height: | Size: 48 KiB |
BIN
Frontend/img/demo/gallery/27.jpg
Normal file
|
After Width: | Height: | Size: 46 KiB |
BIN
Frontend/img/demo/gallery/28.jpg
Normal file
|
After Width: | Height: | Size: 46 KiB |
BIN
Frontend/img/demo/gallery/29.jpg
Normal file
|
After Width: | Height: | Size: 46 KiB |
BIN
Frontend/img/demo/gallery/3.jpg
Normal file
|
After Width: | Height: | Size: 93 KiB |
BIN
Frontend/img/demo/gallery/30.jpg
Normal file
|
After Width: | Height: | Size: 45 KiB |
BIN
Frontend/img/demo/gallery/31.jpg
Normal file
|
After Width: | Height: | Size: 45 KiB |
BIN
Frontend/img/demo/gallery/32.jpg
Normal file
|
After Width: | Height: | Size: 43 KiB |
BIN
Frontend/img/demo/gallery/33.jpg
Normal file
|
After Width: | Height: | Size: 42 KiB |
BIN
Frontend/img/demo/gallery/34.jpg
Normal file
|
After Width: | Height: | Size: 41 KiB |
BIN
Frontend/img/demo/gallery/35.jpg
Normal file
|
After Width: | Height: | Size: 40 KiB |
BIN
Frontend/img/demo/gallery/36.jpg
Normal file
|
After Width: | Height: | Size: 39 KiB |
BIN
Frontend/img/demo/gallery/37.jpg
Normal file
|
After Width: | Height: | Size: 39 KiB |
BIN
Frontend/img/demo/gallery/38.jpg
Normal file
|
After Width: | Height: | Size: 37 KiB |
BIN
Frontend/img/demo/gallery/39.jpg
Normal file
|
After Width: | Height: | Size: 37 KiB |
BIN
Frontend/img/demo/gallery/4.jpg
Normal file
|
After Width: | Height: | Size: 88 KiB |
BIN
Frontend/img/demo/gallery/40.jpg
Normal file
|
After Width: | Height: | Size: 36 KiB |
BIN
Frontend/img/demo/gallery/41.jpg
Normal file
|
After Width: | Height: | Size: 35 KiB |
BIN
Frontend/img/demo/gallery/42.jpg
Normal file
|
After Width: | Height: | Size: 32 KiB |
BIN
Frontend/img/demo/gallery/43.jpg
Normal file
|
After Width: | Height: | Size: 32 KiB |
BIN
Frontend/img/demo/gallery/44.jpg
Normal file
|
After Width: | Height: | Size: 31 KiB |
BIN
Frontend/img/demo/gallery/45.jpg
Normal file
|
After Width: | Height: | Size: 31 KiB |
BIN
Frontend/img/demo/gallery/46.jpg
Normal file
|
After Width: | Height: | Size: 30 KiB |
BIN
Frontend/img/demo/gallery/47.jpg
Normal file
|
After Width: | Height: | Size: 29 KiB |
BIN
Frontend/img/demo/gallery/48.jpg
Normal file
|
After Width: | Height: | Size: 29 KiB |
BIN
Frontend/img/demo/gallery/49.jpg
Normal file
|
After Width: | Height: | Size: 29 KiB |
BIN
Frontend/img/demo/gallery/5.jpg
Normal file
|
After Width: | Height: | Size: 85 KiB |
BIN
Frontend/img/demo/gallery/50.jpg
Normal file
|
After Width: | Height: | Size: 27 KiB |
BIN
Frontend/img/demo/gallery/51.jpg
Normal file
|
After Width: | Height: | Size: 26 KiB |
BIN
Frontend/img/demo/gallery/52.jpg
Normal file
|
After Width: | Height: | Size: 24 KiB |
BIN
Frontend/img/demo/gallery/53.jpg
Normal file
|
After Width: | Height: | Size: 23 KiB |
BIN
Frontend/img/demo/gallery/54.jpg
Normal file
|
After Width: | Height: | Size: 23 KiB |
BIN
Frontend/img/demo/gallery/55.jpg
Normal file
|
After Width: | Height: | Size: 22 KiB |
BIN
Frontend/img/demo/gallery/56.jpg
Normal file
|
After Width: | Height: | Size: 22 KiB |
BIN
Frontend/img/demo/gallery/57.jpg
Normal file
|
After Width: | Height: | Size: 21 KiB |
BIN
Frontend/img/demo/gallery/58.jpg
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
Frontend/img/demo/gallery/59.jpg
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
Frontend/img/demo/gallery/6.jpg
Normal file
|
After Width: | Height: | Size: 79 KiB |
BIN
Frontend/img/demo/gallery/7.jpg
Normal file
|
After Width: | Height: | Size: 75 KiB |
BIN
Frontend/img/demo/gallery/8.jpg
Normal file
|
After Width: | Height: | Size: 71 KiB |
BIN
Frontend/img/demo/gallery/9.jpg
Normal file
|
After Width: | Height: | Size: 70 KiB |
7
Frontend/img/demo/gallery/source.txt
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
License
|
||||||
|
All photos published on Unsplash can be used for free. You can use them for commercial and noncommercial purposes. You do not need to ask permission from or provide credit to the photographer or Unsplash, although it is appreciated when possible.
|
||||||
|
|
||||||
|
More precisely, Unsplash grants you an irrevocable, nonexclusive, worldwide copyright license to download, copy, modify, distribute, perform, and use photos from Unsplash for free, including for commercial purposes, without permission from or attributing the photographer or Unsplash. This license does not include the right to compile photos from Unsplash to replicate a similar or competing service.
|
||||||
|
|
||||||
|
|
||||||
|
https://unsplash.com/license
|
||||||
BIN
Frontend/img/demo/gallery/thumb/1.jpg
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
Frontend/img/demo/gallery/thumb/10.jpg
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
Frontend/img/demo/gallery/thumb/11.jpg
Normal file
|
After Width: | Height: | Size: 8.6 KiB |
BIN
Frontend/img/demo/gallery/thumb/12.jpg
Normal file
|
After Width: | Height: | Size: 8.3 KiB |
BIN
Frontend/img/demo/gallery/thumb/13.jpg
Normal file
|
After Width: | Height: | Size: 9.3 KiB |
BIN
Frontend/img/demo/gallery/thumb/14.jpg
Normal file
|
After Width: | Height: | Size: 8.1 KiB |