From 5bcf6aa3b784c81aad353b3cefb433493f05f4a0 Mon Sep 17 00:00:00 2001 From: Alvin Li Date: Thu, 15 Aug 2013 00:20:55 +0800 Subject: * updated 'apps/indicator/templates/indicator/' pages, extends "base.html", make use of the django template system * added 'static_url', 'indicator_url' js variables * implemented the AJAX function for 'apps/indicator/templates/' pages TODO: * finish 'indicator.views': get_card_data_chart(), get_card_data_table() * link the front pages with the django models, forms and search! --- .../apps/indicator/static/javascripts/load_card.js | 602 +++++++++++---------- 1 file changed, 302 insertions(+), 300 deletions(-) (limited to '97suifangqa/apps/indicator/static/javascripts/load_card.js') diff --git a/97suifangqa/apps/indicator/static/javascripts/load_card.js b/97suifangqa/apps/indicator/static/javascripts/load_card.js index bea4f29..4db48a4 100644 --- a/97suifangqa/apps/indicator/static/javascripts/load_card.js +++ b/97suifangqa/apps/indicator/static/javascripts/load_card.js @@ -1,300 +1,302 @@ -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 '' + Highcharts.dateFormat('%b %e', this.x) + '' +'
' + '' + this.y + 'mmol/L' + '' + '
' + '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 '' + Highcharts.dateFormat('%b %e', this.x) + '' +'
' + '' + this.y + 'mmol/L' + '' + '
' + '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 +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 '' + Highcharts.dateFormat('%b %e', this.x) + '' +'
' + '' + this.y + 'mmol/L' + '' + '
' + '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 '' + Highcharts.dateFormat('%b %e', this.x) + '' +'
' + '' + this.y + 'mmol/L' + '' + '
' + '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, indicator_url + 'popup/edithistorydata?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: indicator_url + 'ajax/get_card_data_chart', + 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: indicator_url + 'ajax/get_card_data_table', + 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); + } + }); +} + +// vim: set ts=8 sw=4 tw=0 fenc=utf-8 ft=javascript: // -- cgit v1.2.2