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