diff options
Diffstat (limited to '97suifangqa/apps/indicator/static/javascripts')
4 files changed, 279 insertions, 337 deletions
diff --git a/97suifangqa/apps/indicator/static/javascripts/card_chart.js b/97suifangqa/apps/indicator/static/javascripts/card_chart.js new file mode 100644 index 0000000..42a5220 --- /dev/null +++ b/97suifangqa/apps/indicator/static/javascripts/card_chart.js @@ -0,0 +1,272 @@ +// set global options for hightcharts {{{ +$(function() { + Highcharts.setOptions ({ + //chart: { + // type: 'areaspline' + // //marginLeft: 25, + // //height: 223, + // //spacingTop: 10, + // //spacingBottom: 4 + // //overflow: false, + // //zIndex: 5 + //}, + colors: ['#31B6AD'], + credits: { + enabled: false + }, + legend: { + enabled: false + }, + plotOptions: { + series: { + fillOpacity: 0.12, + lineWidth: 1, + marker: { + enabled: true, //false false的时候就不会突出显示点 + lineColor: '#31B6AD', + lineWidth: 1, + radius: 3, // 点的大小 + fillColor: '#FFFFFF' // 设置点中间填充的颜色 + }, + shadow: false + //threshold: null + } + }, + title: { + text: null + }, + tooltip: { + useHTML: true, + style: { + padding: '7px' + }, + borderColor: '#EAEAEA' + }, + xAxis: { + type: 'datetime', + dateTimeLabelFormats: { + day: '%m-%e', + month: '%Y-%m' + }, + lineColor: '#CECECE', + gridLineColor: '#EFECEF', + gridLineWidth: 1, + tickWidth: 0, + labels: { + step: 2, + maxStaggerLines: 1 + }, + startOnTick: false, + endOnTick: false, + //tickInterval: (7 * 24 * 3600 * 1000), // 7 days + tickInterval: null, + tickPixelInterval: 50, + tickColor: '#FFFFFF' + }, + yAxis: { + title: { + text: null + }, + min: null, + max: null, + //allowDecimals: false, + startOnTick: false, + endOnTick: false, + tickInterval: null, + tickPixelInterval: 40, + lineColor: '#CECECE', + lineWidth: 2, + gridLineColor: '#EFECEF', + gridLineWidth: 1, + minPadding: 0.3, + maxPadding: 1.2 + } + }); +}); +// }}} + +$(document).ready(function(){ + //详细历史记录 + $(".detail_history").bind("click", function(){ + // update 'detail_card_id' + detail_card_id = $(this).closest(".index_card").attr("id").replace('index_card_', ''); + // check if this card has data + // if has no data, then exists div class="edit_icon_container" + if ($("#index_card_"+detail_card_id + " .edit_icon_container").length) { + $(".detail_card_info").hide(); + return false; + } + // get the index title and set for the 'detail card' + var index_title = $("#index_card_"+detail_card_id + " .card_title").html(); + $(".detail_card_info .card_title .title").html(index_title); + // set date for the 'shift_date' buttons + var date_fmt = 'YYYY-MM-DD'; + var today_mm = moment(); + var today_str = today_mm.format(date_fmt); + var three_month_ago_str = today_mm.clone().subtract('months', 3).format(date_fmt); + var six_month_ago_str = today_mm.clone().subtract('months', 6).format(date_fmt); + $(".recent_three_month").attr('end_date', today_str); + $(".recent_three_month").attr('begin_date', three_month_ago_str); + $(".recent_six_month").attr('end_date', today_str); + $(".recent_six_month").attr('begin_date', six_month_ago_str); + // draw chart + // pass default global var 'begin_date_str' and 'end_date_str' + // detail_chart global var: 'detail_chart' + // options for chart global var: 'options_chart_<id>' + // update global var 'detail_chart_options' + detail_chart_options = 'options_chart_' + detail_card_id; + redraw_chart(detail_chart_str, detail_chart_options, + begin_date_str, end_date_str + ); + $(".act_card_container").addClass("move_div_2_left"); + return false; + }); + + //切换日期 + $(".shift_date").bind("click", function(){ + $(".shift_date").addClass("unselected"); + $(this).removeClass("unselected"); + var begin_str = $(this).attr("begin_date"); + var end_str = $(this).attr("end_date"); + redraw_chart(detail_chart_str, detail_chart_options, + begin_str, end_str + ); + return false; + }); + + //根据日期搜索 + $("#search_begin_date, #search_end_date").bind("change", function(){ + $(".shift_date").addClass("unselected"); + var begin_str = $("#search_begin_date").val(); + var end_str = $("#search_end_date").val(); + redraw_chart(detail_chart_str, detail_chart_options, + begin_str, end_str + ); + return false; + }); + + //浏览更多 + $(".see_more_btn").bind("click", function(){ + var btn = $(".see_more_btn"); + var end_str = end_date_str; + get_card_data_table(null, end_str, false); + return false; + }); + + //收起历史记录 + $(".collapse_btn").bind("click", function(){ + // //删除图表数据 + // var serieses = detail_chart.series; + // for (series_key in serieses){ + // serieses[series_key].remove(); + // } + //删除图表 + if (window[detail_chart_str] != null) { + window[detail_chart_str].destroy(); + window[detail_chart_str] = null; + } + //删除表格数据 + $("tr").not(".first_line").remove(); + //隐藏div + $(".detail_card_info").hide(); + //初始化详细卡片id + detail_card_id = "-1"; + //添加删除div位置初始化 + $(".act_card_container").removeClass("move_div_2_left"); + return false; + }); +}); + +// 重画历史记录图表 +// destroy the original chart and new. +// chart_str: (string), +// name of global var of chart to draw; +// and the div id to contain the chart. +// options_str: (string), +// name of global var of the chart options for drawing, +// used to draw the detail chart by updating its data. +// begin, end: (string), 'YYYY-MM-DD' +function redraw_chart(chart_str, options_str, begin, end){ + var time = moment().valueOf(); + $.ajax({ + type: 'get', + url: indicator_url + 'ajax/get_card_data_chart', + data: 'card_id='+detail_card_id + '&begin='+begin + '&end='+end + '&time='+time, + dataType: 'json', + success: function(dataJson) { + // 设置默认起始结束时间 + //console.log(begin); + //console.log(end); + var begin_date_js = $.datepicker.parseDate('yy-mm-dd', begin); + var end_date_js = $.datepicker.parseDate('yy-mm-dd', end); + $("#search_begin_date").datepicker("setDate", begin_date_js); + $("#search_end_date").datepicker("setDate", end_date_js); + + //显示 + $(".detail_card_info").show(); + + //删除chart已有数据 + //var serieses = detail_chart.series; + //for (series_key in serieses){ + // serieses[series_key].remove(); + //} + //更新chart数据 + //detail_chart.addSeries({ + // data: dataJson, + // pointStart: begin_date_log_UTC_time, + // pointInterval: pointInterval + //}); + + // destroy original chart and + // redraw with new options and data + var begin_dt = moment(begin); + var end_dt = moment(end); + window[options_str].chart.renderTo = chart_str; + window[options_str].xAxis.min = begin_dt.valueOf(); + window[options_str].xAxis.max = end_dt.valueOf(); + window[options_str].series[0].data = dataJson; + // clickable data point + window[options_str].plotOptions = { + series: { + cursor: 'pointer', + point: { + events: { + click: function(event) { + //console.log(event); + //console.log(this); + var date = moment(this.x).utc().format('YYYY-MM-DD'); + TB_show(false, indicator_url+'popup/edithistorydata?card_id='+detail_card_id+'&date='+date+'&TB_iframe=true&transfer_params&height=351&width=630', false); + } + } + } + } + } + if (window[chart_str] != null) { + window[chart_str].destroy(); + window[chart_str] = null; + } + window[chart_str] = new Highcharts.Chart(window[options_str]); + + //更新table数据 + //TODO + get_card_data_table(begin, end, true); + } + }); +} + +function get_card_data_table(begin, end, redraw){ + var time = moment().valueOf(); + $.ajax({ + type: 'get', + url: indicator_url + 'ajax/get_card_data_table', + data: 'card_id='+detail_card_id + '&begin='+begin + '&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: // diff --git a/97suifangqa/apps/indicator/static/javascripts/edit_history_data.js b/97suifangqa/apps/indicator/static/javascripts/edit_history_data.js index 03c62e9..204f404 100644 --- a/97suifangqa/apps/indicator/static/javascripts/edit_history_data.js +++ b/97suifangqa/apps/indicator/static/javascripts/edit_history_data.js @@ -1,4 +1,9 @@ $(document).ready(function(){ + //点大叉，关闭弹层页面 + $(".edit_history_data_close").bind("click", function(){ + parent.TB_remove(); + return false; + }); $("#edit_btn").bind("click", function(){ var this_edit_data_div = $(this).parent(); var data_fir = $(this).siblings(".data_fir").text(); diff --git a/97suifangqa/apps/indicator/static/javascripts/load_card.js b/97suifangqa/apps/indicator/static/javascripts/load_card.js deleted file mode 100644 index 160273b..0000000 --- a/97suifangqa/apps/indicator/static/javascripts/load_card.js +++ /dev/null @@ -1,333 +0,0 @@ -var detail_chart; - -// set global options for hightcharts {{{ -$(function() { - Highcharts.setOptions ({ - chart: { - type: 'area', - marginLeft: 15, - height: 223, - spacingTop: 10, - spacingBottom: 0 - //overflow: false, - //zIndex: 5 - }, - colors: ['#31B6AD'], - credits: { - enabled: false - }, - legend: { - enabled: false - }, - plotOptions: { - series: { - fillOpacity: 0.12, - lineWidth: 1, - marker: { - enabled: true, //false false的时候就不会突出显示点 - lineColor: '#31B6AD', - lineWidth: 1, - radius: 3, // 点的大小 - fillColor: '#FFFFFF' // 设置点中间填充的颜色 - }, - shadow: false - //threshold: null - } - }, - //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 // one day - //}], - title: { - text: null - }, - 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' - }, - 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), // 4 days - 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 - } - }); -}); -// }}} - -$(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' - }, - yAxis: { - title: { - text: '' - } - }, - 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 }; - // }, - }, - 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, 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: // diff --git a/97suifangqa/apps/indicator/static/javascripts/sheetdefault.js b/97suifangqa/apps/indicator/static/javascripts/sheetdefault.js index 55dfcd5..7b95631 100644 --- a/97suifangqa/apps/indicator/static/javascripts/sheetdefault.js +++ b/97suifangqa/apps/indicator/static/javascripts/sheetdefault.js @@ -1,5 +1,3 @@ -var card_2_delete_id; -var card_detail_id; $(document).ready(function(){ //不允许input框复制，减少验证粘帖的交互 $("input[type='text']").bind("paste", function(){ @@ -151,7 +149,7 @@ $(document).ready(function(){ }); //时间范围控制（开始时间<结束时间） - $("#search_start_date").datepicker({ + $("#search_begin_date").datepicker({ showOn: "both", buttonImage: static_url + "plugins/datepicker/images/calendar.png", buttonImageOnly: true, @@ -161,7 +159,7 @@ $(document).ready(function(){ }); $("#search_end_date").datepicker({ onClose: function( selectedDate ) { - $("#search_start_date").datepicker("option", "maxDate", selectedDate); + $("#search_begin_date").datepicker("option", "maxDate", selectedDate); } }); }); |