Skip to content

H
HRM-admin
Commit a6e5ef9a authored by FionaChen's avatar FionaChen
Browse files
Options

圖表修正

parent b82a145f
Hide whitespace changes
Inline Side-by-side
Showing with 192 additions and 162 deletions
edu-manage.html
View file @ a6e5ef9a
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>訂閱管理後台</title> <title>訂閱管理後台</title>
<!--共用css--> <!--共用css-->
<link rel="stylesheet" type="text/css" href="libary/bootstrap-4.5.0-dist/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="libary/bootstrap-4.5.0-dist/css/bootstrap.min.css">
...@@ -64,11 +64,10 @@ ...@@ -64,11 +64,10 @@
<div class="login-cont"> <div class="login-cont">
<label>admin456，您好！</label> <label>admin456，您好！</label>
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<button type="button" class="btn-wt mr-2" data-toggle="modal" <button type="button" class="btn-wt mr-2" data-toggle="modal" data-target="#confirmBackToCalendarMgnt"
data-target="#confirmBackToCalendarMgnt" data-dismiss="modal">修改密碼</button> data-dismiss="modal">修改密碼</button>
<button type="button" class="btn-wt mr-2" onclick="location.href='#'">登出</button> <button type="button" class="btn-wt mr-2" onclick="location.href='#'">登出</button>
</div> </div>
</div> </div>
<!-- menu 底圖 --> <!-- menu 底圖 -->
...@@ -78,7 +77,10 @@ ...@@ -78,7 +77,10 @@
</header> </header>
<article> <article class="chart">
<div class="article-topic">
<img src="images/icon/icon-edu.svg"><label>教育平台管理</label>
</div>
<div class="tab-cont"> <div class="tab-cont">
<ul class="nav-tabs nav" id="myTab" role="tablist"> <ul class="nav-tabs nav" id="myTab" role="tablist">
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
...@@ -95,57 +97,86 @@ ...@@ -95,57 +97,86 @@
<!-- 統計與資訊 start --> <!-- 統計與資訊 start -->
<div class="tab-pane fade show active" id="adminMeb" role="tabpanel" aria-labelledby="adminMeb-tab"> <div class="tab-pane fade show active" id="adminMeb" role="tabpanel" aria-labelledby="adminMeb-tab">
<div class="row HC-area"> <div class="row HC-area">
<div class="col-md-8 col-sm-12 col-12">
<div class="col-lg-7 col-md-7 col-sm-12 col-12">
<div class="chart-topic"> <div class="chart-topic">
<label>總註冊人數</label> <label>總註冊人數</label>
<label class="math">1,000人</label> <label class="math">1,000人</label>
</div> </div>
<!-- 圖表 --> <!-- 圖表 -->
<div class="tab-pane fade show active" id="adminMeb" role="tabpanel" aria-labelledby="adminMeb-tab"> <div class="tab-pane fade show active" id="adminMeb" role="tabpanel"
<div id="container" style="height: 600px; margin: 0" class="chart-cont"> aria-labelledby="adminMeb-tab">
<div id="container" class="chart-cont">
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-12 col-12"> <div class="col-lg-5 col-md-5 col-sm-12 col-12">
<div class="row HC-list"> <div class="HC-list">
<div class="col-12 topic">各縣市學校數量</div> <div class="topic">各縣市學校數量</div>
<div class="col-xl-4 col-sm-6 col-12"> <div class="HC-cont">
基隆市：25<br> <div class="cont-city">
臺北市：67<br> 基隆市：25<br>
新北市：82<br> 臺北市：67<br>
桃園市：53<br> 新北市：82<br>
新竹縣：26<br> 桃園市：53<br>
新竹市：45<br> 新竹縣：26<br>
苗栗縣：18<br> 新竹市：45<br>
南投縣：9<br> 苗栗縣：18<br>
臺中市：32<br> 南投縣：9<br>
彰化縣：16<br> 臺中市：32<br>
雲林縣：6 彰化縣：16<br>
雲林縣：6
</div>
<div>
基隆市：25<br>
臺北市：67<br>
新北市：82<br>
桃園市：53<br>
新竹縣：26<br>
新竹市：45<br>
苗栗縣：18<br>
南投縣：9<br>
臺中市：32<br>
彰化縣：16<br>
雲林縣：6
</div>
</div> </div>
<div class="col-xl-4 col-sm-6 col-12">
基隆市：25<br> <div class="fam-order">
臺北市：67<br> <div class="d-flex justify-content-start">
新北市：82<br> <lable class="title">家長訂閱方式統計</lable>
桃園市：53<br> </div>
新竹縣：26<br>
新竹市：45<br> <div class="row mt-2 fam-cont">
苗栗縣：18<br> <div class="order-cont col-lg-4 col-md-6 col-sm-3 col-12">
南投縣：9<br> <img src="images/icon/icon-atm.jpg">
臺中市：32<br> <label>ATM</label>
彰化縣：16<br> <label>70人</label>
雲林縣：6 </div>
<div class="order-cont col-lg-4 col-md-6 col-sm-3 col-12">
<img src="images/icon/icon-atm.jpg">
<label>信用卡</label>
<label>70人</label>
</div>
<div class="order-cont col-lg-4 col-md-6 col-sm-3 col-12">
<img src="images/icon/icon-atm.jpg">
<label>Apple pay</label>
<label>70人</label>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 統計與資訊 end --> <!-- 統計與資訊 end -->
<!-- -------------------- --> <!-- -------------------- -->
...@@ -171,14 +202,14 @@ ...@@ -171,14 +202,14 @@
</div> </div>
</div> </div>
<button type="button" class="btn-wt blue"><img src="images/icon/icon-search.svg">搜尋</button> <button type="button" class="btn-wt blue"><img src="images/icon/icon-search.svg">搜尋</button>
</div> </div>
<table class="table table-bordered table-striped table-hrm table-rwd"> <table class="table table-bordered table-striped table-hrm table-rwd">
<thead> <thead>
<tr class="tr-rwd-hide"> <tr class="tr-rwd-hide">
<th class="sortable sorter">學校名稱</th> <th class="sortable sorter">學校名稱</th>
...@@ -253,8 +284,8 @@ ...@@ -253,8 +284,8 @@
</div> </div>
</div> </div>
<!-- 各學校資訊 end --> <!-- 各學校資訊 end -->
</div> </div>
...@@ -305,22 +336,10 @@ ...@@ -305,22 +336,10 @@
</div> </div>
<div class="d-flex justify-content-center mt-5"> <div class="d-flex justify-content-center mt-5">
<button type="button" class="btn btn-wt mr-3" data-dismiss="modal">取消</button> <button type="button" class="btn btn-wt mr-3" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-wt blue" data-toggle="modal" data-dismiss="modal" data-target="#SuccessModal">確認</button> <button type="button" class="btn btn-wt blue" data-toggle="modal" data-dismiss="modal"
data-target="#SuccessModal">確認</button>
</div> </div>
<!-- <div class="message-group">
<label>舊密碼</label>
<div class="col-12 col-noPadding text-center">
<p>是否返回？</p>
<div class="submitBlock">
<div class="d-flex justify-content-around">
<button type="button" class="btn btn-wt" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-wt blue" onclick="window.location.href='">確認</button>
</div>
</div>
</div>
</div> -->
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
...@@ -332,8 +351,7 @@ ...@@ -332,8 +351,7 @@
<!-- 修改成功 --> <!-- 修改成功 -->
<div class="modal fade" id="SuccessModal" tabindex="-1" aria-labelledby="SuccessModal" <div class="modal fade" id="SuccessModal" tabindex="-1" aria-labelledby="SuccessModal" aria-hidden="true">
aria-hidden="true">
<div class="modal-dialog success modal-dialog-centered" role="document"> <div class="modal-dialog success modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header whitebg"> <div class="modal-header whitebg">
...@@ -356,8 +374,7 @@ ...@@ -356,8 +374,7 @@
<!-- 修改成功 --> <!-- 修改成功 -->
<!-- 修改失敗 --> <!-- 修改失敗 -->
<div class="modal fade" id="FailModal" tabindex="-1" aria-labelledby="FailModalModal" <div class="modal fade" id="FailModal" tabindex="-1" aria-labelledby="FailModalModal" aria-hidden="true">
aria-hidden="true">
<div class="modal-dialog success modal-dialog-centered" role="document"> <div class="modal-dialog success modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header whitebg"> <div class="modal-header whitebg">
...@@ -398,10 +415,12 @@ ...@@ -398,10 +415,12 @@
<!-- <div class="item-bg"></div> --> <!-- <div class="item-bg"></div> -->
</li> </li>
<li> <li>
<a href="edu-manage.html" class="items active"><img src="images/icon/side-HRM.svg">教育平台管理</a> <a href="edu-manage.html" class="items active"><img
src="images/icon/side-HRM.svg">教育平台管理</a>
</li> </li>
<li> <li>
<a href="HRMS-manage.html" class="items"><img src="images/icon/side-member.svg">HRMS管理</a> <a href="HRMS-manage.html" class="items"><img
src="images/icon/side-member.svg">HRMS管理</a>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -441,81 +460,92 @@ ...@@ -441,81 +460,92 @@
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script>
<!-- <script src="../js/highcharts.js"></script> --> <!-- <script src="../js/highcharts.js"></script> -->
<script src="js/sortable.min.js"></script> <script src="js/sortable.min.js"></script>
<script language="JavaScript"> <script language="JavaScript">
$(document).ready(function() { $(document).ready(function () {
var chart = { var chart = {
plotBackgroundColor: null, plotBackgroundColor: null,
plotBorderWidth: null, plotBorderWidth: null,
// width: 685, // width: 685,
// height: 600, // height: 600,
plotShadow: false plotShadow: false
}; };
var title = { var title = {
text: '' text: ''
}; };
var tooltip = { var tooltip = {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' backgroundColor: 'rgba(53, 169, 255, 1)',
}; borderColor: 'rgba(53, 169, 255, 1)',
var plotOptions = { headerFormat: '<span style="font-size: 24px">{point.key}</span><br/>',
pie: { style: { // 文字內容相關樣式
allowPointSelect: false, color: '#fff',
cursor: 'pointer', fontSize: '24px',
dataLabels: { fontWeight: 'blod',
enabled: false },
},
showInLegend: false pointFormat: '{point.key} <b>{point.percentage:.1f}%</b>'
}
}; // pointFormat: '{series.name}<b>{point.percentage:.1f}%</b>'
var series= [{ //數據 };
type: 'pie', var plotOptions = {
name: 'Browser share', pie: {
innerSize: '65%', allowPointSelect: false,
cursor: 'pointer',
data: [ dataLabels: {
['老師', 33.3], enabled: false
['學生', 33.3], },
// { showInLegend: false
// name: 'Chrome', }
// y: 12.8, };
// sliced: true, var series = [{ //數據
// selected: true type: 'pie',
// }, name: '',
// ['Safari', 8.5], innerSize: '65%',
// ['Opera', 6.2],
['家長', 33.4] data: [
] ['老師', 33.3],
}]; ['學生', 33.3],
// {
Highcharts.setOptions({ //設定圖表底圖顏色 // name: 'Chrome',
// y: 12.8,
// sliced: true,
// selected: true
// },
// ['Safari', 8.5],
// ['Opera', 6.2],
['家長', 33.4]
]
}];
Highcharts.setOptions({ //設定圖表底圖顏色
colors: ['#6a4c93', '#ffca3a', '#ff595e'] colors: ['#6a4c93', '#ffca3a', '#ff595e']
}); });
var json = {}; var json = {};
json.chart = chart; json.chart = chart;
json.title = title; json.title = title;
json.tooltip = tooltip; json.tooltip = tooltip;
json.series = series; json.series = series;
json.plotOptions = plotOptions; json.plotOptions = plotOptions;
$('#container').highcharts(json); $('#container').highcharts(json);
}); });
chart.reflowNow = function(){ chart.reflowNow = function () {
this.containerHeight = this.options.chart.height || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'height'); this.containerHeight = this.options.chart.height || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'height');
this.containerWidth = this.options.chart.width || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'width'); this.containerWidth = this.options.chart.width || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'width');
this.setSize(this.containerWidth, this.containerHeight, false); this.setSize(this.containerWidth, this.containerHeight, false);
this.hasUserSize = null; this.hasUserSize = null;
} }
</script> </script>
<script> <script>
...@@ -553,50 +583,50 @@ ...@@ -553,50 +583,50 @@
$("#Editselect_role").on('change', function () { $("#Editselect_role").on('change', function () {
var Editselect_role = $("#Editselect_role").val(); var Editselect_role = $("#Editselect_role").val();
var EditHRMmainAdmin = $("#EditHRMmainAdmin"); var EditHRMmainAdmin = $("#EditHRMmainAdmin");
var EditHRMSuperAdmin = $("#EditHRMSuperAdmin"); var EditHRMSuperAdmin = $("#EditHRMSuperAdmin");
var EditHRMadmin = $("#EditHRMadmin"); var EditHRMadmin = $("#EditHRMadmin");
if (Editselect_role == "總管理員") { if (Editselect_role == "總管理員") {
EditHRMmainAdmin.removeClass("d-none"); EditHRMmainAdmin.removeClass("d-none");
EditHRMadmin.addClass("d-none"); EditHRMadmin.addClass("d-none");
EditHRMSuperAdmin.addClass("d-none"); EditHRMSuperAdmin.addClass("d-none");
} else if (Editselect_role == '超級管理員') { } else if (Editselect_role == '超級管理員') {
EditHRMSuperAdmin.removeClass("d-none"); EditHRMSuperAdmin.removeClass("d-none");
EditHRMmainAdmin.addClass("d-none"); EditHRMmainAdmin.addClass("d-none");
EditHRMadmin.addClass("d-none"); EditHRMadmin.addClass("d-none");
} else if (Editselect_role == '一般管理員') { } else if (Editselect_role == '一般管理員') {
EditHRMadmin.removeClass("d-none"); EditHRMadmin.removeClass("d-none");
EditHRMSuperAdmin.addClass("d-none"); EditHRMSuperAdmin.addClass("d-none");
EditHRMmainAdmin.addClass("d-none"); EditHRMmainAdmin.addClass("d-none");
} else { } else {
EditHRMadmin.addClass("d-none"); EditHRMadmin.addClass("d-none");
EditHRMmainAdmin.addClass("d-none"); EditHRMmainAdmin.addClass("d-none");
EditHRMSuperAdmin.addClass("d-none"); EditHRMSuperAdmin.addClass("d-none");
} }
}); });
</script> </script>
<script> <script>
// 修正打開新的modal並關閉上一個modal時，modal內容高度超過螢幕時scrollbar不會出現的問題... // 修正打開新的modal並關閉上一個modal時，modal內容高度超過螢幕時scrollbar不會出現的問題...
$(function(){ $(function () {
// 使用bootstrap modal的shown.bs.modal這個event就可以顯示scrollbar // 使用bootstrap modal的shown.bs.modal這個event就可以顯示scrollbar
$('.modal').on('shown.bs.modal', function () { $('.modal').on('shown.bs.modal', function () {
$('body').addClass('modal-open'); $('body').addClass('modal-open');
}) })
$(".modal [data-toggle='modal']").click(function(){ $(".modal [data-toggle='modal']").click(function () {
$(this).closest(".modal").modal('hide'); $(this).closest(".modal").modal('hide');
// 修正關閉新modal時，modal scrollbar位置會留下寬度17px空白的問題 // 修正關閉新modal時，modal scrollbar位置會留下寬度17px空白的問題
$('body').css("overflow","hidden").css("padding-right","0"); $('body').css("overflow", "hidden").css("padding-right", "0");
});
}); });
});
</script> </script>
</body> </body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment