diff options
Diffstat (limited to '97suifangqa/apps/indicator/static/javascripts/load_card.js')
| -rw-r--r-- | 97suifangqa/apps/indicator/static/javascripts/load_card.js | 300 |
1 files changed, 300 insertions, 0 deletions
diff --git a/97suifangqa/apps/indicator/static/javascripts/load_card.js b/97suifangqa/apps/indicator/static/javascripts/load_card.js new file mode 100644 index 0000000..bea4f29 --- /dev/null +++ b/97suifangqa/apps/indicator/static/javascripts/load_card.js @@ -0,0 +1,300 @@ +var detail_chart;
+$(document).ready(function(){
+ var startDate = '2013-07-13';
+ startDate = new Date(startDate.replace(/-/g,"/"));
+ var start_date_UTC_time = startDate.getTime() - startDate.getTimezoneOffset() * 60 * 1000;
+ var chart3 = new Highcharts.Chart({
+ chart: {
+ renderTo: 'chart_3',
+ type: 'area',
+ marginLeft: 15,
+ height: 223,
+ spacingTop: 10,
+ spacingBottom: 0,
+ overflow: false,
+ zIndex: 5
+ },
+ credits: {
+ enabled: false
+ },
+ title: {
+ text: ' '
+ },
+ colors: ['#31B6AD'],
+ xAxis: {
+ type: 'datetime',
+ dateTimeLabelFormats: {
+ day: '%e/%m'
+ },
+ lineColor: '#CECECE',
+ gridLineColor: '#EFECEF',
+ gridLineWidth: 1,
+ tickWidth: 0,
+ labels:{
+ step: 2,
+ maxStaggerLines: 1
+ },
+ tickInterval: (4 * 24 * 3600 * 1000),
+ tickColor: '#FFFFFF'
+ },
+ yAxis: {
+ title: {
+ text: ''
+ },
+ allowDecimals: false,
+ endOnTick: false,
+ tickInterval: 1,
+ lineColor: '#CECECE',
+ lineWidth: 2,
+ gridLineColor: '#EFECEF',
+ gridLineWidth: 1,
+ minPadding: 0.3,
+ maxPadding: 1.2
+ },
+ legend: {
+ enabled: false
+ },
+ tooltip: {
+ formatter: function() {
+ return '<span style="color:#969696;font-weight:bold;">' + Highcharts.dateFormat('%b %e', this.x) + '</span>' +'<br />' + '<span style="color:#464646;font-weight:bold;">' + this.y + 'mmol/L' + '</span>' + '<br />' + 'click for more info';
+ },
+// positioner: function (boxWidth, boxHeight, point) {
+// return { x: point.plotX+80, y: point.plotY-20 };
+// },
+ style: {
+ padding: '7px'
+ },
+ borderColor: '#EAEAEA'
+ },
+ plotOptions: {
+ series: {
+ marker: {
+ enabled: true, //false false的时候就不会突出显示点
+ lineColor: '#31B6AD',
+ lineWidth: 1,
+ radius: 3, // 点的大小
+ fillColor: '#FFFFFF' // 设置点中间填充的颜色
+ },
+ fillOpacity: 0.12,
+ lineWidth: 1,
+ threshold: null,
+ shadow: false
+ }
+ },
+ series: [{
+ data: [6.0, 5.9, 5.5, 4.5, 6.2, 6.5, 5.2, 6.0, 5.9, 5.5, 4.5, 6.2, 6.5, 5.2, 6.0, 5.9, 5.5, 4.5, 6.2, 6.5],
+ pointStart: start_date_UTC_time,
+ pointInterval:1 * 24 * 3600 * 1000
+ }]
+ });
+
+ detail_chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'detail_chart',
+ type: 'area',
+ marginLeft: 25,
+ width: 562,
+ height: 303,
+ spacingTop: 10,
+ spacingBottom: 0,
+ overflow: false,
+ zIndex: 5
+ },
+ credits: {
+ enabled: false
+ },
+ title: {
+ text: ' '
+ },
+ colors: ['#31B6AD'],
+ xAxis: {
+ type: 'datetime',
+ dateTimeLabelFormats: {
+ day: '%e/%m'
+ },
+ lineColor: '#CECECE',
+ gridLineColor: '#EFECEF',
+ gridLineWidth: 1,
+ tickWidth: 0,
+ labels:{
+ step: 2
+ },
+ tickInterval: (2 * 24 * 3600 * 1000),
+ tickColor: '#FFFFFF'
+ },
+ yAxis: {
+ title: {
+ text: ''
+ },
+ allowDecimals: true,
+ endOnTick: false,
+ tickInterval: 0.5,
+ lineColor: '#CECECE',
+ lineWidth: 2,
+ gridLineColor: '#EFECEF',
+ gridLineWidth: 1,
+ minPadding: 0.3,
+ maxPadding: 1.2,
+ labels: {
+ formatter: function() {
+ var originYValue = this.value+'';
+ if (originYValue.length == 1){
+ originYValue += '.0';
+ }
+ return originYValue;
+ }
+ }
+ },
+ legend: {
+ enabled: false
+ },
+ tooltip: {
+ formatter: function() {
+ return '<span style="color:#969696;font-weight:bold;">' + Highcharts.dateFormat('%b %e', this.x) + '</span>' +'<br />' + '<span style="color:#464646;font-weight:bold;">' + this.y + 'mmol/L' + '</span>' + '<br />' + 'click for more info';
+ },
+// positioner: function (boxWidth, boxHeight, point) {
+// return { x: point.plotX+80, y: point.plotY-20 };
+// },
+ style: {
+ padding: '7px'
+ },
+ borderColor: '#EAEAEA'
+ },
+ plotOptions: {
+ series: {
+ marker: {
+ enabled: true, //false false的时候就不会突出显示点
+ lineColor: '#31B6AD',
+ lineWidth: 1,
+ radius: 3, // 点的大小
+ fillColor: '#FFFFFF', // 设置点中间填充的颜色
+ symbol: 'circle'
+ },
+ fillOpacity: 0.12,
+ lineWidth: 1,
+ threshold: null,
+ shadow: false,
+ point: {
+ events: {
+ click: function() {
+ alert(this.x);
+ alert(this.y);
+ TB_show(false, '../pages/popup/EditHistoryData.html?TB_iframe=true&no1_title&transfer_params&height=351&width=630&card_id=3', false);
+ }
+ }
+ }
+ }
+ },
+ series: []
+ });
+
+ //详细历史记录
+ $(".detail_history").bind("click", function(){
+ card_detail_id = $(this).closest(".index_card").attr("id").replace('index_card_', '');
+ var startDateLog = '2013-08-04';
+ var endDateLog = '2013-08-10';
+ var date = new Date();
+ var time = date.getTime();
+ redraw_chart(detail_chart, startDateLog, endDateLog);
+ $(".act_card_container").addClass("move_div_2_left");
+ return false;
+ });
+
+ //切换日期
+ $(".shift_week").bind("click", function(){
+ $(".shift_week").addClass("unselected");
+ $(this).removeClass("unselected");
+ var startDateLog = $(this).attr("start_date");
+ var endDateLog = $(this).attr("end_date");
+ redraw_chart(detail_chart, startDateLog, endDateLog);
+ return false;
+ });
+
+ //根据日期搜索
+ $("#search_start_date, #search_end_date").bind("change", function(){
+ var startDateLog = $("#search_start_date").val();
+ var endDateLog = $("#search_end_date").val();
+ redraw_chart(detail_chart, startDateLog, endDateLog);
+ return false;
+ });
+
+ //浏览更多
+ $(".see_more_btn").bind("click", function(){
+ var btn = $(".see_more_btn");
+ var end = "2013-08-10";
+ get_card_data_table(null, end, false);
+ return false;
+ });
+
+ //收起历史记录
+ $(".collapse_btn").bind("click", function(){
+ //删除图表数据
+ var serieses = detail_chart.series;
+ for (series_key in serieses){
+ serieses[series_key].remove();
+ }
+ //删除表格数据
+ $("tr").not(".first_line").remove();
+ //隐藏div
+ $(".detail_card_info").hide();
+ //初始化详细卡片id
+ card_detail_id = 0;
+ //添加删除div位置初始化
+ $(".act_card_container").removeClass("move_div_2_left");
+ return false;
+ });
+});
+
+//重画历史记录图表
+function redraw_chart(detail_chart, start, end){
+ var date = new Date();
+ var time = date.getTime();
+ $.ajax({
+ type: 'get',
+ url: '../ajax/getCardDataChart',
+ data: 'card_detail_id='+card_detail_id+'&start='+start+'&end='+end+'&time='+time,
+ dataType: 'json',
+ success: function(dataJson){ //每一天都要有数据，否则x轴刻度时间对不上
+ var startDateLogFormat = new Date(start.replace(/-/g,"/"));
+ var start_date_log_UTC_time = startDateLogFormat.getTime() - startDateLogFormat.getTimezoneOffset() * 60 * 1000;
+ var pointStart = start_date_log_UTC_time;
+ var pointInterval = 1 * 24 * 3600 * 1000;
+
+ //设置默认起始结束时间
+ $("#search_start_date").datepicker( "setDate", start);
+ $("#search_end_date").datepicker( "setDate", end);
+
+ //删除chart已有数据
+ var serieses = detail_chart.series;
+ for (series_key in serieses){
+ serieses[series_key].remove();
+ }
+ //更新chart数据
+ detail_chart.addSeries({
+ data: dataJson,
+ pointStart: start_date_log_UTC_time,
+ pointInterval: pointInterval
+ });
+ //更新table数据
+ get_card_data_table(start, end, true);
+ //显示
+ $(".detail_card_info").show();
+ }
+ });
+}
+
+function get_card_data_table(start, end, redraw){
+ var date = new Date();
+ var time = date.getTime();
+ $.ajax({
+ type: 'get',
+ url: '../ajax/getCardDataTable',
+ data: 'card_detail_id='+card_detail_id+'&start='+start+'&end='+end+'&time='+time,
+ success: function(data){
+ if(redraw){
+ $("tr").not(".first_line").remove();
+ }
+ $("table").append(data);
+ }
+ });
+}
\ No newline at end of file |