(function ($) { /*constant*/ var MINPANWIDTH = 110; var SLIDEHEIGHT = 30; var PANMAG = 5; var PANHEAD = 10; var INDICTWIDTH = 12; var PERMSEC = 10000; var PERSEC = 10000000; var PERMINUTE = (PERSEC * 60); var PERHOUR = (PERMINUTE * 60); var PERDAY = (PERHOUR * 24); var SPANPAD = 6; var SPANLINEHEIGHT = 16; var BOTTOMBUTTONLEFT = 80; var SHOWTHUMBSHEIGHT = 32; var SLIDHLIMIT = 160; var SHOWTHUMBSHLIMT = 200; var SHOWTOOLBARHLIMIT = 232; var SHOWLISTHLIMT = 250; var TOOLBARHEIGHT = 32; var TIMELABELHEIGHT = 32; var MINLISTHEIGHT = 80; var HSPLITHEIGHT = 10; var ButtonImage = $(new Image()).attr('src', 'htm/rtchart/chartbuttons.png'); var penColors = ['#00A8F0', '#5DB75D', '#FFFF00', '#FFA62F', '#E41B17', '#000066', '#A0D2FF', '#FF96FF', '#E0FFFF', '#388E8E', '#00EE00', '#CD3700', '#EEAD0E', '#6600CC', '#ADFF2F', '#663300' ]; var COLOR_NAMES = { aqua: [0, 255, 255], azure: [240, 255, 255], beige: [245, 245, 220], black: [0, 0, 0], blue: [0, 0, 255], brown: [165, 42, 42], cyan: [0, 255, 255], darkblue: [0, 0, 139], darkcyan: [0, 139, 139], darkgrey: [169, 169, 169], darkgreen: [0, 100, 0], darkkhaki: [189, 183, 107], darkmagenta: [139, 0, 139], darkolivegreen: [85, 107, 47], darkorange: [255, 140, 0], darkorchid: [153, 50, 204], darkred: [139, 0, 0], darksalmon: [233, 150, 122], darkviolet: [148, 0, 211], fuchsia: [255, 0, 255], gold: [255, 215, 0], green: [0, 128, 0], indigo: [75, 0, 130], khaki: [240, 230, 140], lightblue: [173, 216, 230], lightcyan: [224, 255, 255], lightgreen: [144, 238, 144], lightgrey: [211, 211, 211], lightpink: [255, 182, 193], lightyellow: [255, 255, 224], lime: [0, 255, 0], magenta: [255, 0, 255], maroon: [128, 0, 0], navy: [0, 0, 128], olive: [128, 128, 0], orange: [255, 165, 0], pink: [255, 192, 203], purple: [128, 0, 128], violet: [128, 0, 128], red: [255, 0, 0], silver: [192, 192, 192], white: [255, 255, 255], yellow: [255, 255, 0] }; dhtmlXCalendarObject.prototype.langData["cn"] = { dateformat: '%Y-%m-%d %H:%i:%s', monthesFNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], monthesSNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], daysFNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], daysSNames: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], weekstart: 1, weekname: "d" }; var WebLink = function (weburl) { this.weburl = weburl; }; var TrendPen = function (rtchart, options) { this.rtChart = rtchart; this.options = $.extend({ URI: null, Num: 2, penColor: rtchart.getNextPenColor(), penWidth: 2, linkReTryTime: 1000, hisReTryTime: 20000, lockRange: false, expandAll: false, stepLine: null, //true|false drawTag: false, drawLine: true, webURL: GoldenRtWeb.getWebURL() }, options || {}); this.hisRequestSeed = 1; if (this.options.rageMax != null) this.rageMax = this.options.rageMax; if (this.options.rageMin != null) this.rageMin = this.options.rageMin; var r = Math.abs(this.rageMax - this.rageMin); if (r < 1) { if (r > 0.1) { if (this.options.Num < 3) this.options.Num = 3; } else if (r > 0.01) { if (this.options.Num < 4) this.options.Num = 4; } else if (r > 0.001) { if (this.options.Num < 5) this.options.Num = 5; } else if (this.options.Num < 6) this.options.Num = 6; } }; var TrendColor = function (r, g, b, a) { this.rgba = ['r', 'g', 'b', 'a']; var x = 4; while (-1 < --x) { this[this.rgba[x]] = arguments[x] || ((x == 3) ? 1.0 : 0); } this.normalize(); } TrendColor.parse = function (color) { if (color instanceof TrendColor) return color; var result; // #a0b1c2 if ((result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))) return new TrendColor(parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)); // rgb(num,num,num) if ((result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))) return new TrendColor(parseInt(result[1], 10), parseInt(result[2], 10), parseInt(result[3], 10)); // #fff if ((result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))) return new TrendColor(parseInt(result[1] + result[1], 16), parseInt(result[2] + result[2], 16), parseInt(result[3] + result[3], 16)); // rgba(num,num,num,num) if ((result = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(color))) return new TrendColor(parseInt(result[1], 10), parseInt(result[2], 10), parseInt(result[3], 10), parseFloat(result[4])); // rgb(num%,num%,num%) if ((result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))) return new TrendColor(parseFloat(result[1]) * 2.55, parseFloat(result[2]) * 2.55, parseFloat(result[3]) * 2.55); // rgba(num%,num%,num%,num) if ((result = /rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(color))) return new TrendColor(parseFloat(result[1]) * 2.55, parseFloat(result[2]) * 2.55, parseFloat(result[3]) * 2.55, parseFloat(result[4])); // Otherwise, we're most likely dealing with a named color. var name = (color + '').replace(/^\s*([\S\s]*?)\s*$/, '$1').toLowerCase(); if (name == 'transparent') { return new TrendColor(255, 255, 255, 0); } return (result = COLOR_NAMES[name]) ? new TrendColor(result[0], result[1], result[2]) : new TrendColor(0, 0, 0, 0); }; TrendColor.processColor = function (color, options) { var opacity = options.opacity; if (!color) return 'rgba(0, 0, 0, 0)'; if (color instanceof TrendColor) return color.alpha(opacity).toString(); if (_.isString(color)) return TrendColor.parse(color).alpha(opacity).toString(); var grad = color.colors ? color : { colors: color }; if (!options.ctx) { if (!_.isArray(grad.colors)) return 'rgba(0, 0, 0, 0)'; return TrendColor.parse(_.isArray(grad.colors[0]) ? grad.colors[0][1] : grad.colors[0]).alpha(opacity).toString(); } grad = _.extend({ start: 'top', end: 'bottom' }, grad); if (/top/i.test(grad.start)) options.x1 = 0; if (/left/i.test(grad.start)) options.y1 = 0; if (/bottom/i.test(grad.end)) options.x2 = 0; if (/right/i.test(grad.end)) options.y2 = 0; var i, c, stop, gradient = options.ctx.createLinearGradient(options.x1, options.y1, options.x2, options.y2); for (i = 0; i < grad.colors.length; i++) { c = grad.colors[i]; if (_.isArray(c)) { stop = c[0]; c = c[1]; } else stop = i / (grad.colors.length - 1); gradient.addColorStop(stop, TrendColor.parse(c).alpha(opacity)); } return gradient; }; $.widget("rtinfo.trendChart", { options: { rtRefresh: true, showAxis: true, showGrid: true, showThumbs: true, showList: true, panShow: true, listExpand: true, reservePrevData: 10, spanSec: 10 * 60, //200s pointGroupName: null, freeRange: true, // 自由量程 panWidth: MINPANWIDTH + 50, listHeight: MINLISTHEIGHT + 50, activeShadowSize: 4, tooltipDelay: 1000, gridColor: 'rgba(91,91,91,1.0)', borderColor: 'rgba(120,120,120,1.0)', timeLabelColor: 'rgba(214,214,214,1.0)', indicatorColor: 'rgba(210,210,210,0.5)', bkColor: 'rgba(0,0,0,1.0)', buttonImage: ButtonImage, resolution: 1 // => resolution of the graph, to have printer-friendly graphs ! }, btipShow: false, tipShowPen: null, vIndicator: null, hIndicator: null, chartWidth: 0, chartHeight: 0, ftBeginTime: 0, ftTimeLabelBeg: null, ctx: null, canvas: null, buttonsDrawed: false, trendPens: null, webLinks: null, _create: function () { console.log('_create'); //判断测点组 var configs = localStorage.getItem("goldenTrendConfig"); if (configs) { try { configs = JSON.parse(configs); } catch (ex) { localStorage.removeItem("goldenTrendConfig"); configs = null; } var config = configs[groupName]; if (config != null && typeof (config) != "undefined") { // groupName = Object.keys(configs)[0]; // config = configs[groupName]; this.options.bDeafult = config.bDeafult; this.options.bkColor = config.bkColor; this.options.borderColor = config.borderColor; this.options.gridColor = config.gridColor; this.options.indicatorColor = config.indicatorColor; this.options.listExpand = config.listExpand; this.options.listHeight = config.listHeight; this.options.panShow = config.panShow; this.options.panWidth = config.panWidth; this.options.rtRefresh = config.rtRefresh; this.options.showAxis = config.showAxis; this.options.showGrid = config.showGrid; this.options.showList = config.showList; this.options.showThumbs = config.showThumbs; this.options.spanSec = config.spanSec; this.options.timeLabelColor = config.timeLabelColor; this.options.tooltipDelay = config.tooltipDelay; this.options.freeRange = config.freeRange; } } this.options.spanSec = this.options.spanSec || 1; if (!this.options.spanSec || this.options.spanSec < 1) this.options.spanSec = 1; var date = new Date(); date.setMilliseconds(0); date = this.DateToFileTime(date); date += PERSEC; date -= this.options.spanSec * PERSEC; this.setBeginTime(date); this._buildChart(); this.element.uniqueId(); $(window).resize(this, function (e) { e.data._onResize(); }); this.yScroll = 0; var rtchart = this; var X, Y; $(document).bind('mousemove.rtChart_' + this.element.attr('id'), function (e) { if (X === e.clientX && Y === e.clientY) return; X = e.clientX; Y = e.clientY; if (rtchart.mouseTimer) { window.clearTimeout(rtchart.mouseTimer); rtchart.mouseTimer = null; } if (rtchart.tooltipTimer && e.target != rtchart.vIndicator[0] && e.target != rtchart.hIndicator[0]) { window.clearTimeout(rtchart.tooltipTimer); rtchart.tooltipTimer = null; } if (e.target == rtchart.canvas[0]) { rtchart.mouseTimer = window.setTimeout(function () { window.clearTimeout(rtchart.mouseTimer); rtchart.mouseTimer = null; rtchart._onMouseMove(e); }, 200); } }); $(window).bind('keydown.rtChart_' + this.element.attr('id'), function (e) { rtchart._onKeyDown(e); }); var url = location.href; var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&"); var paraObj = {} for (i = 0; j = paraString[i]; i++) { paraObj[decodeURIComponent(j.substring(0, j.indexOf("=")))] = decodeURIComponent(j.substring(j.indexOf("=") + 1, j.length)); } if (paraObj.pointGroupName != null) this.options.pointGroupName = paraObj.pointGroupName; if (this.options.pointGroupName == null) { if (paraObj.pointGroupName != null) this.options.pointGroupName = paraObj.pointGroupName; else if (paraObj.newPointGroup != null) { this.isNewPage = true; var d = dialog({ content: "可以在新打开的页中进行点组的设置操作,然后保存点组,
从而创建新的点组。", quickClose: true }); d.show(); window.setTimeout(function () { d.close().remove(); d = null; }, 2000); } } if (typeof (Flag) != "undefined" && Flag != null || Flag != "") { if (Flag == "tagName") { if (typeof (tagName) != "undefined" && tagName != null || tagName != "") { var that = this; (function () { tagName = decodeURIComponent(tagName); var tagNameArr = tagName.split(','); for (var i = 0, len = tagNameArr.length; i < len; i++) { tagName = tagNameArr[i]; var itemDef = new GoldenRtWeb.RtItemDefine(0, 0, 0); that.AddPen({ URI: tagName, itemDef: itemDef }); that.requestHisData({ URI: tagName, itemDef: itemDef }, 100); } })(); } } else { if (typeof (groupName) != "undefined" && groupName != null || groupName != "") { if (Flag == "pointGroupName") { var that = this; (function () { groupName = decodeURIComponent(groupName); var pointGroups = JSON.parse(localStorage.getItem("goldenTrendConfig")); //console.log(pointGroups); for (var key in pointGroups) { if (groupName == key) { for (var i = 0; i < pointGroups[key].trendPens.length; i++) { // tagName=pointGroups[key].trendPens[i].URI; that.AddPen(pointGroups[key].trendPens[i]); } } } })(); } } } } //if(!this.isNewPage) //this._loadPointGroup(); }, _loadPointGroup: function () { var groupName = ""; if (this.options.pointGroupName != null) groupName = this.options.pointGroupName; var rtchart = this; var configs = localStorage.getItem("goldenTrendConfig"); if (configs == null) return; if (configs) { try { configs = JSON.parse(configs); } catch (ex) { localStorage.removeItem("goldenTrendConfig"); configs = null; } } var config = configs[groupName]; if (config == null) { groupName = Object.keys(configs)[0]; config = configs[groupName]; } this.loadConfig(groupName, config); }, _init: function () { console.log('_init'); }, _destroy: function () { console.log('_destroy'); $(document).unbind('mousemove.rtChart_' + this.element.attr('id')); $(document).unbind('keydown.rtChart_' + this.element.attr('id')); this._clear(); if (this.webLinks) { for (i in this.webLinks) { var link = this.webLinks[i]; link.destroy(); delete link; } delete this.webLinks; } if (this.trendPens) { for (i in this.trendPens) { var pen = this.trendPens[i]; pen.destroy(); delete pen; } delete this.trendPens; } }, _isTouch: function () { return document.ontouchstart !== undefined; }, _buildChart: function () { this._clear(); this._bulidCanvas(); console.log('chartBuided'); }, _clear: function () { this.btipShow = false; if (this.artTooltip) this.artTooltip.close().remove(); if (this.tooltipTimer) { window.clearTimeout(this.tooltipTimer); this.tooltipTimer = null; } if (this.updateDataTimer) { window.clearTimeout(this.updateDataTimer); this.updateDataTimer = null; } if (this.updatePanTimer) { window.clearTimeout(this.updatePanTimer); this.updatePanTimer = null; } if (this.prepareTimer) { window.clearTimeout(this.prepareTimer); this.prepareTimer = null; } if (this.mouseTimer) { window.clearTimeout(this.mouseTimer); this.mouseTimer = null; } if (this.options.buttonImage) this.options.buttonImage.unbind(); if (this.tipShowPen) { this.tipShowPen.onTooltipHided(); this.tipShowPen = null; } if (this.activePen) { this.activePen.setActive(false); this.activePen = null; if (this.toolBar) this.toolBar.disableItem("deletePoint"); } if (this.colorPicker) { $('.colorpicker-ind', this.colorPicker).colorpicker('destroy'); this.colorPicker.draggable("destroy"); this.colorPicker.empty(); delete this.colorPicker; } if (this.vSplite) { if (this.vSplite.data('drag') === true) this.vSplite.draggable("destroy"); this.vSplite.unbind(); this.vSplite = null; } if (this.hSplite) { if (this.hSplite.data('drag') === true) this.hSplite.draggable("destroy"); this.hSplite.unbind(); this.hSplite = null; } if (this.vIndicator) { this.vIndicator.unbind(); this.vIndicator.draggable("destroy"); this.vIndicator = null; } if (this.hIndicator) { this.hIndicator.unbind(); this.hIndicator.draggable("destroy"); this.hIndicator = null; } if (this.ctx) delete this.ctx; if (this.canvas) { this.canvas.unbind(); delete this.canvas; } if (this.toolCalendar) { this.toolCalendar.unload(); delete this.toolCalendar; } if (this.toolBar) { this.toolBar.unload(); this.toolBar = null; } if (this.toolBarContainer) { this.toolBarContainer.remove(); this.toolBarContainer = null; } if (this.artTooltip) { this.artTooltip.remove(); delete this.artTooltip; } if (this.positionDiv) { this.positionDiv.unbind(); this.positionDiv.draggable("destroy"); this.positionDiv.remove(); this.positionDiv = null; } if (this.thumbBegDiv) { this.thumbBegDiv.unbind(); this.thumbBegDiv.draggable("destroy"); this.thumbBegDiv.remove(); this.thumbBegDiv = null; } if (this.thumbEndDiv) { this.thumbEndDiv.unbind(); this.thumbEndDiv.draggable("destroy"); this.thumbEndDiv.remove(); this.thumbEndDiv = null; } this.buttonsDrawed = false; if (this.listGrid) { this.listGrid.clearAll(true); this.listGrid.destructor(); delete this.listGrid; } if (this.listContainer) { this.listContainer.remove(); this.listContainer = null; } this.element.empty(); }, _bulidCanvas: function () { this.chartWidth = this.element.width(); this.chartHeight = this.element.height(); if (!this.chartWidth || !this.chartHeight) throw 'container not visable\'t exist'; var gw = this.getGridWidth(); var gh = this.getGridHeight(); var gt = this.toolBarCanShow() ? TOOLBARHEIGHT : 0; var cavansHight = gh; if (this.slidCanShow()) cavansHight += SLIDEHEIGHT; if (this.thumbsCanshow()) cavansHight += SHOWTHUMBSHEIGHT; if (this.listCanshow()) if (this.chartWidth < 100 + this.options.panWidth || this.options.panWidth < MINPANWIDTH) this.options.panShow = false; var rtchart = this; if (!this.canvas) { this.canvas = $(document.createElement('canvas')); this.element.append(this.canvas); this.canvas.bind('click', function (e) { rtchart._onClick(e); }); this.canvas.bind('dblclick', function (e) { rtchart._ondbClick(e); }); this.canvas.bind('mousedown', function (e) { rtchart._onMouseDown(e); }); this.canvas.bind('mousewheel', function (e) { e.preventDefault(); rtchart._onMouseWheel(e); }); this.canvas.bind('mousemove', function (e) { rtchart._onRtchartMouseMove(e); }); if (this._isTouch()) { this.canvas.bind('touchstart', function (e) { rtchart._onTouchStart(e); }); } } this.canvas.css("position", "absolute") .css("left", 0) .css("top", gt) .css("right", 0) .css("height", cavansHight); if (this.options.bkColor != null) this.canvas.css('background-color', this.options.bkColor); this.canvas.attr("width", this.chartWidth * this.options.resolution); this.canvas.attr("height", cavansHight * this.options.resolution); var node = this.canvas.get(0); if (window.G_vmlCanvasManager) window.G_vmlCanvasManager.initElement(node); // For ExCanvas this.ctx = node.getContext('2d'); if (!window.G_vmlCanvasManager) this.ctx.scale(this.options.resolution, this.options.resolution); if (this.positionDiv) { this.positionDiv.draggable("destroy"); this.positionDiv.unbind(); this.positionDiv.remove(); this.positionDiv = null; } if (this.thumbBegDiv) { this.thumbBegDiv.draggable("destroy"); this.thumbBegDiv.unbind(); this.thumbBegDiv.remove(); this.thumbBegDiv = null; } if (this.thumbEndDiv) { this.thumbEndDiv.draggable("destroy"); this.thumbEndDiv.unbind(); this.thumbEndDiv.remove(); this.thumbEndDiv = null; } if (this.toolBarContainer == null) { this.toolBarContainer = $(document.createElement('div')); this.element.append(this.toolBarContainer); } this.toolBarContainer.css("position", "absolute") .css("left", 0) .css("top", -2) .css("right", 0) .css("height", TOOLBARHEIGHT) .addClass('unselectable'); this.calendarShowed = false; this.timerFocus = false; if (this.toolBar == null) { this.toolBar = new dhtmlXToolbarObject(this.toolBarContainer.get(0), "dhx_web"); this.toolBar.setIconsPath("htm/codebase/dhtmlxToolbar/codebase/icon/"); this.toolBar.addButton("addPoint", 0, null, "plus.png", "plus_dis.png"); this.toolBar.setItemToolTip("addPoint", "添加新点"); this.toolBar.addButton("deletePoint", 1, null, "deletepen.png", "deletepen_dis.png"); this.toolBar.setItemToolTip("deletePoint", "移除当前选定点"); this.toolBar.disableItem("deletePoint"); if (this.options.showAxis) { this.toolBar.addButtonTwoState("showAxis", 2, null, "axis.png", "axis_dis.png"); this.toolBar.setItemState("showAxis", true); this.toolBar.setItemToolTip("showAxis", "当前为值轴显示模式,单击转变为数据板显示模式"); } else { this.toolBar.addButtonTwoState("showAxis", 2, null, "datapan.png", "datapan_dis.png"); this.toolBar.setItemState("showAxis", false); this.toolBar.setItemToolTip("showAxis", "当前为数据板显示模式,单击转变为值轴显示模式"); } if (this.options.freeRange) { this.toolBar.addButtonTwoState("toggleRange", 3, null, "view_type_free.png", "view_type_free.png"); this.toolBar.setItemState("toggleRange", true); this.toolBar.setItemToolTip("toggleRange", "当前量程为自由量程,点击切换到固定量程"); } else { this.toolBar.addButtonTwoState("toggleRange", 3, null, "view_type.png", "view_type.png"); this.toolBar.setItemState("toggleRange", false); this.toolBar.setItemToolTip("toggleRange", "当前量程为固定量程,点击切换到自由量程"); } this.toolBar.addButton("colorPicker", 4, null, "colorpicker.png", "colorpicker_dis.png"); this.toolBar.setItemToolTip("colorPicker", "设置颜色"); this.toolBar.addButton("saveConfig", 4, null, "save.png", "save.png"); this.toolBar.setItemToolTip("saveConfig", "保存设置(如改变点组名称,可另存新建点组)"); var opts = [ ['newPiointGroup', 'obj', '新建点组', 'window_new.png'], ['editorPointGroup', 'obj', '编辑点组...', 'tag_blue_edit.png'], ['refreshPointGroup', 'obj', '刷新点组列表', 'reload.png'], ['idsep', 'sep'] ]; this.toolBar.addButtonSelect("pointGroup", 5, "点组", opts, "tag.png"); this.toolBar.addSeparator("rtSep", 6); //this.toolBar.addButtonTwoState("fullScreen", 7, null, "fullscreen.png", "fullscreen_dis.png"); //this.toolBar.setItemState("fullScreen", false); //this.toolBar.setItemToolTip("fullScreen", "单击进入全屏显示模式(F11)"); this.toolBar.addButton("zoomToool", 8, null, "zoom.png", "zoom_dis.png"); this.toolBar.setItemToolTip("zoomToool", "趋势缩放"); this.toolBar.addButton("zoomResume", 9, null, "zoom_resume.png", "zoom_resume_dis.png"); this.toolBar.setItemToolTip("zoomResume", "恢复缩放"); this.toolBar.disableItem("zoomResume"); this.toolBar.addSeparator("rtSep4", 10); if (this.options.rtRefresh) { this.toolBar.addButtonTwoState("reRefresh", 11, null, "refresh.png", "refresh_dis.png"); this.toolBar.setItemState("reRefresh", true); this.toolBar.setItemToolTip("reRefresh", "当前为实时刷新模式,单击转变为静态查询模式"); } else { this.toolBar.addButtonTwoState("reRefresh", 11, null, "query.png", "query_dis.png"); this.toolBar.setItemState("reRefresh", false); this.toolBar.setItemToolTip("reRefresh", "当前为静态查询模式,单击转变为实时刷新模式"); } this.toolBar.addSeparator("rtSep1", 12); this.toolBar.addButton("timePrev", 13, null, "previous.png", "previous_dis.png"); this.toolBar.setItemToolTip("timePrev", "前翻半个时间跨度"); var spanopts = [ ['b1m', 'obj', '当前时间 10分钟前', "left.png"], ['b3m', 'obj', '当前时间 30分钟前', "left.png"], ['b1h', 'obj', '当前时间 1小时前', "left.png"], ['b2h', 'obj', '当前时间 2小时前', "left.png"], ['b8h', 'obj', '当前时间 8小时前', "left.png"], ['b12h', 'obj', '当前时间 12小时前', "left.png"], ['spansep', 'sep'], ['b1d', 'obj', '当前时间 1天 前', "left.png"], ['b2d', 'obj', '当前时间 2天 前', "left.png"], ['b7d', 'obj', '当前时间 7天 前', "left.png"], // //['a1m', 'obj', '当前查询起始时间 10分钟后', "right.png"], //['a1h', 'obj', '当前查询起始时间 1小时后', "right.png"], //['a2h', 'obj', '当前查询起始时间 2小时后', "right.png"], //['a8h', 'obj', '当前查询起始时间 8小时后', "right.png"], //['a1d', 'obj', '当前查询起始时间 1天 后', "right.png"], //['a2d', 'obj', '当前查询起始时间 2天 后', "right.png"], //['a7d', 'obj', '当前查询起始时间 7天 后', "right.png"], ]; this.toolBar.addButtonSelect("timeSpan", 14, this.getTimeSpanString(), spanopts, null); this.toolBar.addButton("timeNext", 15, null, "next.png", "next_dis.png"); this.toolBar.setItemToolTip("timeNext", "后翻半个时间跨度"); this.toolBar.addSeparator("rtSep2", 16); this.toolBar.addInput("date_from", 17, "", 128); this.toolBar.addInput("date_to", 18, "", 128); this._updateTimeDisplay(); this.toolBar.addButton("goDate", 19, null, "find.png", "find_dis.png"); this.toolBar.setItemToolTip("goDate", "点击执行查询"); var from = this.toolBar.getInput("date_from"); var to = this.toolBar.getInput("date_to"); $(from).focusin(function () { rtchart.timerFocus = true; }); $(to).focusin(function () { rtchart.timerFocus = true; }); $(from).focusout(function () { rtchart.timerFocus = false; }); $(to).focusout(function () { rtchart.timerFocus = false; }); this.toolCalendar = new dhtmlXCalendarObject([from, to]); this.toolCalendar.setDateFormat("%Y-%m-%d %H:%i:%s"); //.%u this.toolCalendar.setMinutesInterval(1); this.toolCalendar.loadUserLanguage("cn"); this._updateTimeDisplay(); this.toolCalendar.attachEvent("onShow", function () { rtchart.calendarShowed = true; }); this.toolCalendar.attachEvent("onHide", function () { rtchart.calendarShowed = false; }); this.toolCalendar.attachEvent("onClick", function (date) { if (document.activeElement == $(from)[0]) { var button = document.activeElement.parentElement.nextElementSibling.nextElementSibling; var d = dialog({ content: "点击按钮进行查询操作或进行其他查询设置,\n点击工具条空白处取消文本框编辑状态。", quickClose: true }); d.show(button); window.setTimeout(function () { d.close().remove(); d = null; }, 2000); } else if (document.activeElement == $(to)[0]) { var button = document.activeElement.parentElement.nextElementSibling; var d = dialog({ content: "点击按钮进行查询操作或进行其他查询设置,\n点击工具条空白处取消文本框编辑状态。", quickClose: true }); d.show(button); window.setTimeout(function () { d.close().remove(); d = null; }, 2000); } }); var excelopts = [ ['exportToExcelInterpo', 'obj', '导出统一时间坐标的内插值', null], ['exportExcel', 'obj', '导出时间坐标不同的归档值', null] // ['exportImg', 'obj', '导出图片', null] ]; this.toolBar.addButtonSelect("exportExceltool", 20, null, excelopts, "excel.png", "excel_dis.png"); this.toolBar.setItemToolTip("exportExceltool", "导出"); // this.toolBar.addButton("addGroup", 21, null, "tag_blue.png", "tag_blue.png"); // this.toolBar.setItemToolTip("addGroup", "新建组"); // this.toolBar.addButton("saveGroup", 22, null, "save.png", "save_dis.png"); // this.toolBar.setItemToolTip("saveGroup", "保存组"); // this.toolBar.addButton("queryGroup", 23, null, "tags.png", "tags.png"); // this.toolBar.setItemToolTip("queryGroup", "测点组"); this.toolBar.addButton("exportPng", 21, null, "mime_png.png", "mime_png.png"); this.toolBar.setItemToolTip("exportPng", "导出打印位图"); this.toolBar.addSeparator("rtSep3", 22); /*Button Command*/ this.toolBar.attachEvent("onClick", function (id) { rtchart.timerFocus = false; rtchart.calendarShowed = false; $(from).blur(); $(to).blur(); switch (id) { case "addPoint": rtchart._onAddPoint(); break; case "addGroup": if (rtchart.listGrid.getRowsNum()) { var pens = rtchart.listGrid.getRowsNum(); for (var i = 1; i <= pens; i++) { var rowid = i; var pen = rtchart.getPenByRowId(rowid); if (pen) rtchart.removePen(pen); } } if (rtchart.artTooltip) rtchart.artTooltip.close().remove(); break; case "saveGroup": rtchart._onSaveGroup(); break; case "deletePoint": if (rtchart.listGrid.getSelectedRowId()) { var pens = rtchart.listGrid.getSelectedRowId(); pens = pens.split(','); if (pens) { for (var i = 0; i < pens.length; i++) { var rowid = pens[i]; var pen = rtchart.getPenByRowId(rowid); if (pen) rtchart.removePen(pen); } } } break; case "editorPointGroup": rtchart._onEditorPointGroup(); break; case "colorPicker": rtchart._onSetColors(); break; case "saveConfig": rtchart._onSaveConfig(); break; case "exportExcel": rtchart._onExportExcel(); break; case "exportToExcelInterpo": rtchart._onExportToExcelInterpo(); break; case "exportPng": rtchart._onExportPng(); break; case "mpass": rtchart._onModifyPassWord(); break; case "accmag": rtchart._onUserMagement(); break; case "login": rtchart.requestLogin("_login", true); break; case "logout": rtchart.logout(); break; case "goDate": rtchart._queryHisData($(from), $(to)); break; case "refreshPointGroup": rtchart._loadPointGroupNames(); break; case "newPiointGroup": var url = location.href; if (url.indexOf("?") > 0) url = url.substr(0, url.indexOf("?")); url += "?webServiceIP=" + webServiceIP + "&webServicePort=" + webServicePort + ""; url += "&newPointGroup=1"; window.open(url, "_blank"); break; case "zoomToool": rtchart._toggleZoom(); break; case "zoomResume": rtchart._onReZoom(); break; case "timePrev": rtchart.updateBeginTime(rtchart.getBegTime() - 0.5 * rtchart.options.spanSec * PERSEC); break; case "timeNext": rtchart.updateBeginTime(rtchart.getBegTime() + 0.5 * rtchart.options.spanSec * PERSEC); break; case 'b1m': var date = new Date(); date.setMilliseconds(0); date = rtchart.DateToFileTime(date); date += PERSEC; date -= 600 * PERSEC; rtchart.setBegTimeAndSpan(date, 600); break; case 'b3m': var date = new Date(); date.setMilliseconds(0); date = rtchart.DateToFileTime(date); date += PERSEC; date -= 1800 * PERSEC; rtchart.setBegTimeAndSpan(date, 1800); break; case 'b1h': var date = new Date(); date.setMilliseconds(0); date = rtchart.DateToFileTime(date); date += PERSEC; date -= 3600 * PERSEC; rtchart.setBegTimeAndSpan(date, 3600); break; case 'b2h': var date = new Date(); date.setMilliseconds(0); date = rtchart.DateToFileTime(date); date += PERSEC; date -= 2 * 3600 * PERSEC; rtchart.setBegTimeAndSpan(date, 2 * 3600); break; case 'b8h': var date = new Date(); date.setMilliseconds(0); date = rtchart.DateToFileTime(date); date += PERSEC; date -= 8 * 3600 * PERSEC; rtchart.setBegTimeAndSpan(date, 8 * 3600); break; case 'b12h': var date = new Date(); date.setMilliseconds(0); date = rtchart.DateToFileTime(date); date += PERSEC; date -= 12 * 3600 * PERSEC; rtchart.setBegTimeAndSpan(date, 12 * 3600); break; case 'b1d': var date = new Date(); date.setMilliseconds(0); date = rtchart.DateToFileTime(date); date += PERSEC; date -= 24 * 3600 * PERSEC; rtchart.setBegTimeAndSpan(date, 24 * 3600); break; case 'b2d': var date = new Date(); date.setMilliseconds(0); date = rtchart.DateToFileTime(date); date += PERSEC; date -= 2 * 24 * 3600 * PERSEC; rtchart.setBegTimeAndSpan(date, 2 * 24 * 3600); break; case 'b7d': var date = new Date(); date.setMilliseconds(0); date = rtchart.DateToFileTime(date); date += PERSEC; date -= 7 * 24 * 3600 * PERSEC; rtchart.setBegTimeAndSpan(date, 7 * 24 * 3600); break; case 'a1m': rtchart.setTimeSpan(600, false); break; case 'a1h': rtchart.setTimeSpan(3600, false); break; case 'a2h': rtchart.setTimeSpan(2 * 3600, false); break; case 'a8h': rtchart.setTimeSpan(8 * 3600, false); break; case 'a1d': rtchart.setTimeSpan(24 * 3600, false); break; case 'a2d': rtchart.setTimeSpan(2 * 24 * 3600, false); break; case 'a7d': rtchart.setTimeSpan(7 * 24 * 3600, false); break; default: if (rtchart.pointGroups) { for (var n in rtchart.pointGroups) { var config = rtchart.pointGroups[n]; if (id == config.Id) { var gName = n; if (gName && gName.length) { var url = location.href; if (url.indexOf("?") > 0) url = url.substr(0, url.indexOf("?")); url += "?webServiceIP=" + webServiceIP + "&webServicePort=" + webServicePort + ""; url += "&pointGroupName=" + encodeURI(gName); if (rtchart.isFullScreen() === true) window.location.href = url; else window.open(url, "_blank"); } break; } } break; } } }); this.toolBar.attachEvent("onStateChange", function (id) { switch (id) { case "reRefresh": if (rtchart.toolBar.getItemState("reRefresh")) rtchart.setRtrefresh(true); else rtchart.setRtrefresh(false); break; case "showAxis": if (rtchart.toolBar.getItemState("showAxis")) rtchart.setShowAxis(true); else rtchart.setShowAxis(false); break; case "fullScreen": rtchart.onFullScreenSet(); break; case "toggleRange": rtchart.toggleRangeMode(); break; } }); this._loadPointGroupNames(); var elem = document.documentElement; if (elem.requestFullscreen) { this.requestFullScreen = function () { var docElm = document.documentElement; docElm.requestFullscreen(); } this.isFullScreen = function () { return document.fullscreen; } } else if (elem.mozRequestFullScreen) { this.requestFullScreen = function () { var docElm = document.documentElement; docElm.mozRequestFullScreen(); } this.isFullScreen = function () { return document.mozFullScreen; } } else if (elem.webkitRequestFullScreen) { this.requestFullScreen = function () { var docElm = document.documentElement; docElm.webkitRequestFullScreen(); } this.isFullScreen = function () { return document.webkitIsFullScreen; } } else if (elem.msRequestFullscreen) { this.requestFullScreen = function () { var docElm = document.documentElement; docElm.msRequestFullscreen(); } this.isFullScreen = function () { return document.msFullscreenElement; } } if (document.exitFullscreen) { this.cancelFullScreen = function () { document.exitFullscreen(); } } else if (document.mozCancelFullScreen) { this.cancelFullScreen = function () { document.mozCancelFullScreen(); } } else if (document.webkitCancelFullScreen) { this.cancelFullScreen = function () { document.webkitCancelFullScreen(); } } else if (document.msExitFullscreen) { this.cancelFullScreen = function () { document.msExitFullscreen(); } } } this.positionDiv = $(document.createElement('div')); this.element.append(this.positionDiv); this.positionDiv.css("position", "absolute") .css("left", 0) .css("top", gt) .css("width", 6) .css("height", 6) .css(" z-index", 200) .addClass('unselectable') .draggable({ disabled: true, scroll: false, containment: [ this.canvas.offset().left - 2, this.canvas.offset().top + gt, this.canvas.offset().left + this.canvas.width() - 5, this.canvas.offset().top + gt + this.canvas.height() ] }); if (this.thumbsCanshow()) { gt += gh + TIMELABELHEIGHT; var h = SHOWTHUMBSHEIGHT + 3; this.thumbBegDiv = $(document.createElement('div')); this.element.append(this.thumbBegDiv); this.thumbBegDiv.css("position", "absolute") .css("left", -3) .css("top", gt) .css("width", 7) .css("height", h) .css("cursor", "e-resize") .css(" z-index", 200) .addClass('unselectable') .addClass('hspelit') .draggable({ containment: [this.canvas.offset().left - 3, 0, this.canvas.offset().left + this.chartWidth - 18, gh], axis: "x", scroll: false, drag: function (event, ui) { rtchart._onThumbsChanged(); } }); this.thumbEndDiv = $(document.createElement('div')); this.element.append(this.thumbEndDiv); this.thumbEndDiv.css("position", "absolute") .css("left", this.chartWidth - 3) .css("top", gt) .css("width", 7) .css("height", h) .css("cursor", "e-resize") .css(" z-index", 200) .addClass('unselectable') .addClass('hspelit') .draggable({ containment: [this.canvas.offset().left + 18, 0, this.canvas.offset().left + this.chartWidth - 3, gh], axis: "x", scroll: false, drag: function (event, ui) { rtchart._onThumbsChanged(); } }); gt += h; } if (this.listContainer) { this.listContainer.remove(); this.listContainer = null; } if (this.listCanshow() && this.options.listExpand) { gt += 4; this.listContainer = $(document.createElement('div')); this.element.append(this.listContainer); this.listContainer.css("position", "absolute") .css("left", 0) .css("right", 0) .css("top", gt) .css("bottom", 0) .css("border", "1px solid rgb(60,60,60)") .addClass('unselectable'); this.listGrid = new dhtmlXGridObject(this.listContainer.get(0)); this.listGrid.setImagePath("htm/codebase/dhtmlxGrid/codebase/imgs/"); //the path to images required by grid this.listGrid.setHeader("点名称,线宽,描述,显示,数据时间,数据值,量程下限,量程上限,量程锁定,阶跃,标记,实时值,最大值,最小值,平均值"); //the headers of columns this.listGrid.setColAlign("left,center,left,center,right,right,right,right,center,center,right,right,center,right,right"); //the alignment of columns this.listGrid.setInitWidths("160,50,180,45,140,120,100,100,65,45,45,110,110,110,110"); //the widths of columns this.listGrid.setColTypes("clrlabel,combo,ro,ch,ro,ro,edn,edn,ch,ch,ch,vqtcell,vqtcellclick,vqtcellclick,unitval"); //the types of columns this.listGrid.setColSorting("str,str,str,na,na,na,na,na,na,na,na,na,na,na,na"); //the sorting types this.listGrid.enableColumnMove(true); this.listGrid.enableDragAndDrop(true); this.listGrid.setSkin("dhx_web"); //dhx_terrace this.listGrid.enableColumnAutoSize(true); this.listGrid.enableMultiselect(true); this.listGrid.init(); var combo = this.listGrid.getColumnCombo(1); combo.addOption("1", "1"); combo.addOption("2", "2"); combo.addOption("3", "3"); combo.addOption("4", "4"); combo.addOption("5", "5"); combo.addOption("6", "6"); combo.addOption("7", "7"); combo.addOption("8", "8"); this.listGrid.onSetLabelColor = function (e, rowid) { (e || event).cancelBubble = true; var pen = rtchart.getPenByRowId(rowid); if (pen) { rtchart.setPenColor(pen, e); } }; this.listGrid.onPosVQT = function (e, rowid, tip) { (e || event).cancelBubble = true; var pen = rtchart.getPenByRowId(rowid); if (pen) { pen.posVQT(tip); } }; this.listGrid.attachEvent("onSelectStateChanged", function (rowid) { if (rowid && rowid != "") { var pens = rowid.split(","); if (pens && pens.length) { var pen = rtchart.getPenByRowId(pens[0]); if (pen != rtchart.activePen) rtchart.requestActive(pen); } else rtchart.requestActive(null); } else rtchart.requestActive(null); }); this.listGrid.attachEvent("onAfterSorting", function (index, type, direction) { rtchart._onListSorted(); }); this.listGrid.attachEvent("onCheck", function (rowid, cInd, state) { var pen = rtchart.getPenByRowId(rowid); if (pen != null) { var col = rtchart.listGrid.getColumnLabel(cInd); switch (col) { case "显示": pen.setDisplay(state, false); break; case "阶跃": pen.setStepLine(state, false); break; case "标记": pen.setDrawTag(state, false); break; case "插值": pen.setInterpolate(state, false); break; case "量程锁定": pen.setRangeLock(state, false); break; } } }); this.listGrid.attachEvent("onDrop", function (sId, tId, dId, sObj, tObj, sCol, tCol) { rtchart._onListSorted(); }); this.listGrid.attachEvent("onCellChanged", function (rId, cInd, nValue) { var pen = rtchart.getPenByRowId(rId); if (pen != null) { var col = rtchart.listGrid.getColumnLabel(cInd); switch (col) { case "量程下限": pen.onSetMinRange(nValue); break; case "量程上限": pen.onSetMaxRange(nValue); break; case "线宽": pen.onSetLineWidth(nValue, true); break; } } }); this._synList(); } this._reDrawAll(); }, onFullScreenSet: function () { if (this.isFullScreen()) { this.cancelFullScreen(); this.toolBar.setItemState("fullScreen", false); this.toolBar.setItemToolTip("fullScreen", "单击进入全屏显示模式(F11)"); this.toolBar.setItemImage("fullScreen", "fullscreen.png"); } else { this.requestFullScreen(); this.toolBar.setItemState("fullScreen", true); //this.toolBar.setItemToolTip("fullScreen", "单击退出全屏显示模式(F11)"); this.toolBar.setItemImage("fullScreen", "leave_fullscreen.png"); } }, logout: function () { var xhr = $.ajax({ url: GoldenRtWeb.getWebURL() + '/Logout', type: "GET", processData: false, complete: function (xhr, ts) { var url = window.location.href; var index = url.lastIndexOf('?'); if (index > 0) url = url.substr(0, index); window.location = url; } }); }, _onExportPng: function () { // var image = new Image(); // image.setAttribute('crossOrigin', 'anonymous'); // // image.crossOrigin = ""; // image.name = "ddd.jpg"; // image.id = "ddd.jpg"; // image = this.canvas[0].toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"); // window.location.href = image; this. _downloadFile('趋势图.png', this.canvas[0].toDataURL("image/png")); }, _downloadFile: function (fileName, content) { var aLink = document.createElement('a'); var blob =this._base64Img2Blob(content); //new Blob([content]); var evt = document.createEvent("HTMLEvents"); evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错 aLink.download = fileName; aLink.href = URL.createObjectURL(blob); aLink.dispatchEvent(evt); aLink.click(); }, _base64Img2Blob: function (code) { var parts = code.split(';base64,'); var contentType = parts[0].split(':')[1]; var raw = window.atob(parts[1]); var rawLength = raw.length; var uInt8Array = new Uint8Array(rawLength); for (var i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } return new Blob([uInt8Array], { type: contentType }); }, _onExportToExcelInterpo: function () { if (!this.trendPens || !this.trendPens.length) { var d = dialog({ content: "目前尚未加载点信息,因此无法进行导出操作。", quickClose: true }); d.show(); window.setTimeout(function () { d.close(); d.remove(); d = null; }, 2000); return; } var pens = []; for (var i = 0; i < this.trendPens.length; i++) { var pen = this.trendPens[i]; pens.push(pen.getURI()); } pens = pens.join(';'); var uri = "beginTime=" + this.getBegTime(); uri += "&endTime=" + this.getEndTime(); uri += "&point=" + pens; var link = document.createElement("a"); link.download = "exportExcel"; link.href = this.getWebURL() + "ExportToExcelInterpo?" + encodeURI(uri); link.click(); }, _onExportExcel: function () { if (!this.trendPens || !this.trendPens.length) { var d = dialog({ content: "目前尚未加载点信息,因此无法进行导出操作。", quickClose: true }); d.show(); window.setTimeout(function () { d.close(); d.remove(); d = null; }, 2000); return; } var pens = []; for (var i = 0; i < this.trendPens.length; i++) { var pen = this.trendPens[i]; pens.push(pen.getURI()); } pens = pens.join(';'); var uri = "beginTime=" + this.getBegTime(); uri += "&endTime=" + this.getEndTime(); uri += "&point=" + pens; var link = document.createElement("a"); link.download = "exportExcel"; link.href = this.getWebURL() + "ExportToExcel?" + encodeURI(uri); link.click(); }, _queryHisData: function (from, to) { var beg = from.val(); beg = this.parseDate(beg); if (beg == null) { from.focus(); var d = dialog({ content: "查询起始时间设置有误,请重新设置。", quickClose: true }); window.setTimeout(function () { d.close().remove(); d = null; from.focus(); }, 2000); d.show(from[0]); return; } beg = this.DateToFileTime(beg); var end = to.val(); end = this.parseDate(end); if (end == null) { to.focus(); var d = dialog({ content: "查询截止时间设置有误,请重新设置。", quickClose: true }); window.setTimeout(function () { d.close().remove(); d = null; to.focus(); }, 2000); d.show(to[0]); return; } end = this.DateToFileTime(end); if (end <= beg) { to.focus(); var d = dialog({ content: "查询截止时间不能小于等于查询起始时间,请重新设置。", quickClose: true }); window.setTimeout(function () { d.close().remove(); d = null; to.focus(); }, 2000); d.show(to[0]); return; } this.setBegTimeAndSpan(beg, (end - beg) / PERSEC); }, getPenByRowId: function (rowId) { if (this.trendPens) { for (var k in this.trendPens) { var pen = this.trendPens[k]; if (pen.rowId == rowId) return pen; } } return null; }, _bindPenList: function (pen) { if (this.listGrid) { var rowId = this.listRowSeed++; this.listGrid.addRow(rowId, ""); pen._setListRowId(rowId); } }, _synList: function () { this.listGrid.clearAll(); this.listRowSeed = 1; if (this.trendPens && this.trendPens.length) { for (i in this.trendPens) this._bindPenList(this.trendPens[i]); } }, _updateList: function (rowId, colName, val) { if (this.listGrid && rowId && colName) { var num = this.listGrid.getColumnsNum(); for (var i = 0; i < num; i++) { if (this.listGrid.getColumnLabel(i) == colName) { var cell = this.listGrid.cells(rowId, i); if (cell) cell.setValue(val); break; } } } }, getWebURL: function () { return GoldenRtWeb.getWebURL(); }, _reDrawAll: function () { var node = this.canvas.get(0); this.ctx.clearRect(0, 0, node.width, node.height); this.buttonsDrawed = false; this.updateDataArea(); this.UpdatePan(true); this._drawIndicator(); this._drawButtons(); }, _onResize: function () { if (this.artTooltip) this.artTooltip.close().reset().remove(); if (this.element.width() != this.chartWidth || this.element.height() != this.chartHeight) this._bulidCanvas(); }, _onListSorted: function () { var ids = this.listGrid.getAllRowIds(); var arry = ids.split(","); if (arry && arry.length) { var newPens = []; for (var i = 0; i < arry.length; i++) { var pen = this.getPenByRowId(arry[i]); if (pen) newPens.push(pen); } if (newPens.length) { this.trendPens = newPens; this.updateDataArea(); this.UpdatePan(); } } }, _drawIndicator: function () { var gw = this.getGridWidth(); var gh = this.getGridHeight(); var gt = this.toolBarCanShow() ? TOOLBARHEIGHT : 0; var rtchart = this; var hw; if (this.options.showAxis) hw = this.chartWidth; else hw = gw + 12; if (!this.hIndicator) { this.hIndicator = $(document.createElement('canvas')); this.element.append(this.hIndicator); bNew = true; } this.hIndicator.css("position", "absolute") .css("left", 0) .css("top", 25) .css("width", hw) .css("height", INDICTWIDTH) .css("cursor", "n-resize"); this.hIndicator.attr("width", (hw) * this.options.resolution); this.hIndicator.attr("height", INDICTWIDTH * this.options.resolution); var node = this.hIndicator.get(0); if (window.G_vmlCanvasManager) window.G_vmlCanvasManager.initElement(node); // For ExCanvas var hctx = node.getContext('2d'); if (!window.G_vmlCanvasManager) hctx.scale(this.options.resolution, this.options.resolution); hctx.save(); hctx.translate(0.5, 0.5); hctx.clearRect(0, 0, (hw), INDICTWIDTH); hctx.lineWidth = 3.0; hctx.strokeStyle = this.options.indicatorColor; hctx.beginPath(); hctx.moveTo(1, 5); hctx.lineTo(hw, 5); hctx.stroke(); hctx.restore(); if (bNew) this.hIndicator.draggable({ containment: [0, this.canvas.offset().top - 5, hw, this.canvas.offset().top + gh - 5], scroll: false, axis: "y", drag: function (event, ui) { rtchart._onhIndicatorMove(event); }, stop: function (event, ui) { rtchart._onhIndicatorMoveEnd(event); } }); else this.hIndicator.draggable('option', 'containment', [0, this.canvas.offset().top - 5, gw, this.canvas.offset().top + gh - 5]); this.hIndicator.hover( function (e) { rtchart.hIndicator.focus(); rtchart._onhIndicatorHover(e); }); if (this.vSplite) { if (this.vSplite.data('drag') === true) this.vSplite.draggable("destroy"); this.vSplite.unbind(); this.vSplite.remove(); this.vSplite = null; } if (this.hSplite) { if (this.hSplite.data('drag') === true) this.hSplite.draggable("destroy"); this.hSplite.unbind(); this.hSplite.remove(); this.hSplite = null; } bNew = false; if (!this.vIndicator) { this.vIndicator = $(document.createElement('canvas')); this.element.append(this.vIndicator); bNew = true; } this.vIndicator.css("position", "absolute") .css("left", 20) .css("top", gt) .css("width", INDICTWIDTH) .css("height", (gh + 16)) .css("pointer-events", 'none'); // .css("cursor", "e-resize"); this.vIndicator.attr("width", INDICTWIDTH * this.options.resolution); this.vIndicator.attr("height", (gh + 16) * this.options.resolution); node = this.vIndicator.get(0); if (window.G_vmlCanvasManager) window.G_vmlCanvasManager.initElement(node); // For ExCanvas var vctx = node.getContext('2d'); if (!window.G_vmlCanvasManager) vctx.scale(this.options.resolution, this.options.resolution); vctx.save(); vctx.translate(0.5, 0.5); vctx.clearRect(0, 0, INDICTWIDTH, node.height); vctx.lineWidth = 1.0; vctx.setLineDash([3, 6]); vctx.strokeStyle = this.options.indicatorColor; vctx.beginPath(); vctx.moveTo(5, 1); vctx.lineTo(5, gh + 10); vctx.stroke(); vctx.restore(); if (bNew) this.vIndicator.draggable({ containment: [this.canvas.offset().left - 5, 0, this.canvas.offset().left + gw - 5, gh], axis: "x", scroll: false, drag: function (event, ui) { rtchart._onvIndicatorMove(event); }, stop: function (event, ui) { rtchart._onvIndicatorMoveEnd(event); } }); else this.vIndicator.draggable('option', 'containment', [this.canvas.offset().left - 5, 0, this.canvas.offset().left + gw - 5, gh]); this.vIndicator.hover( function (e) { rtchart.vIndicator.focus(); rtchart._onvIndicatorHover(e); }); if (this.options.panShow) { this.vSplite = $(document.createElement('canvas')); this.hIndicator.before(this.vSplite); this.vSplite.css("position", "absolute") .css("left", gw) .css("top", gt) .css("width", PANMAG * 2) .css("height", (gh + 1)) .css("cursor", "e-resize") .addClass('unselectable'); this.vSplite.attr("width", PANMAG * 2 * this.options.resolution); this.vSplite.attr("height", (gh + 1) * this.options.resolution); node = this.vSplite.get(0); if (window.G_vmlCanvasManager) window.G_vmlCanvasManager.initElement(node); // For ExCanvas var spctx = node.getContext('2d'); if (!window.G_vmlCanvasManager) spctx.scale(this.options.resolution, this.options.resolution); spctx.clearRect(0, 0, node.width, node.height); this.vSplite.draggable({ containment: [this.canvas.offset().left + 200, 0, this.chartWidth - 5, gh], axis: "x", scroll: false, start: function (event, ui) { var ctx = this.getContext('2d'); ctx.clearRect(0, 0, this.width, this.height); var gradient = ctx.createLinearGradient(0, 0, this.width, 0); gradient.addColorStop("0", "rgba(120,120,120,0.5)"); gradient.addColorStop(".50", "rgba(180,180,180,0.7)"); gradient.addColorStop("1.0", "rgba(120,120,120,0.5)"); ctx.fillStyle = gradient; ctx.fillRect(0, 0, this.width, this.height); ctx.beginPath(); ctx.lineWidth = "1"; ctx.strokeStyle = "rgb(30,30,30)"; ctx.rect(.5, .5, this.width - 1, this.height - 1); ctx.stroke(); }, stop: function (event, ui) { var ctx = this.getContext('2d'); ctx.clearRect(0, 0, this.width, this.height); var l = $(this).position().left; rtchart.setPanWidth(rtchart.chartWidth - l); } }); this.vSplite.data('drag', true); this.vSplite.hover( function (e) { var o = $(this).offset(); var x = e.pageX - o.left; var y = e.pageY - o.top; if (y > this.height / 2 - 18 && y < this.height / 2 - 18 + 35) { $(this).attr('title', '收回数据板'); $(this).css('cursor', 'pointer'); } else { $(this).attr('title', null); $(this).css('cursor', "e-resize"); } }, function (e) { $(this).css("cursor", "e-resize"); }); this.vSplite.click(function (e) { var o = $(this).offset(); var x = e.pageX - o.left; var y = e.pageY - o.top; if (y > this.height / 2 - 18 && y < this.height / 2 - 18 + 35) rtchart.setPanShow(false); }); } else if (this.panCanShow()) { this.vSplite = $(document.createElement('canvas')); this.hIndicator.before(this.vSplite); this.vSplite.css("position", "absolute") .css("left", this.chartWidth - 5) .css("top", gh / 2 + 15) .css("width", 5) .css("height", 35) .css("cursor", "pointer") .attr("title", "展开数据板"); this.vSplite.attr("width", 5 * this.options.resolution); this.vSplite.attr("height", 35 * this.options.resolution); node = this.vSplite.get(0); if (window.G_vmlCanvasManager) window.G_vmlCanvasManager.initElement(node); // For ExCanvas var spctx = node.getContext('2d'); if (!window.G_vmlCanvasManager) spctx.scale(this.options.resolution, this.options.resolution); spctx.clearRect(0, 0, node.width, node.height); this.vSplite.click(function (e) { rtchart.setPanShow(true); }); } if (this.listCanshow()) { this.hSplite = $(document.createElement('canvas')); this.element.append(this.hSplite); var t; if (this.listCanshow() && this.options.listExpand) t = this.chartHeight - this.options.listHeight; else t = this.chartHeight - 11; this.hSplite.css("position", "absolute") .css("left", 0) .css("top", t) .css("right", 0) .css("height", 10) .css("cursor", "n-resize") .css("z-index", 1000) .addClass('unselectable'); this.hSplite.attr("width", this.chartWidth * this.options.resolution); this.hSplite.attr("height", 10 * this.options.resolution); node = this.hSplite.get(0); if (window.G_vmlCanvasManager) window.G_vmlCanvasManager.initElement(node); // For ExCanvas var hpctx = node.getContext('2d'); if (!window.G_vmlCanvasManager) hpctx.scale(this.options.resolution, this.options.resolution); hpctx.clearRect(0, 0, node.width, node.height); this.hSplite.draggable({ containment: [0, this.element.offset().top + 210, 0, this.element.offset().top + this.element.height() - 30], axis: "y", scroll: false, start: function (event, ui) { var ctx = this.getContext('2d'); ctx.clearRect(0, 0, this.width, this.height); var gradient = ctx.createLinearGradient(0, 0, 0, this.height); gradient.addColorStop("0", "rgba(120,120,120,0.5)"); gradient.addColorStop(".50", "rgba(200,200,200,0.7)"); gradient.addColorStop("1.0", "rgba(120,120,120,0.5)"); ctx.fillStyle = gradient; ctx.fillRect(0, 0, this.width - 3, this.height); ctx.beginPath(); ctx.lineWidth = "1"; ctx.strokeStyle = "rgb(30,30,30)"; ctx.rect(.5, .5, this.width - 3, this.height - 1); ctx.stroke(); }, stop: function (event, ui) { var ctx = this.getContext('2d'); ctx.clearRect(0, 0, this.width, this.height); var t = rtchart.chartHeight - $(this).offset().top + rtchart.element.offset().top; rtchart.setListHeight(t); } }); this.hSplite.data('drag', true); this.hSplite.hover( function (e) { var o = $(this).offset(); var x = e.pageX - o.left; var y = e.pageY - o.top; if (x > this.width / 2 - 18 && x < this.width / 2 + 18) { if (rtchart.options.listExpand) $(this).attr('title', '收回数据列表'); else $(this).attr('title', '展开数据列表'); $(this).css('cursor', 'pointer'); } else { $(this).attr('title', null); $(this).css('cursor', "n-resize"); } }, function (e) { $(this).css("cursor", "n-resize"); } ); this.hSplite.click(function (e) { var o = $(this).offset(); var x = e.pageX - o.left; var y = e.pageY - o.top; if (x > this.width / 2 - 18 && x < this.width / 2 + 18) { if (rtchart.options.listExpand) rtchart.setListExpand(false); else rtchart.setListExpand(true); } }); } }, _drawButtons: function () { if (this.buttonsDrawed === true || !this.options.buttonImage) return; if (this.options.buttonImage.get(0).complete === true) { var img = this.options.buttonImage.get(0); var gw = this.getGridWidth(); var gh = this.getGridHeight(); this.buttonsDrawed = true; var canvas = this.vIndicator.get(0); var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, 11, 11, 0, gh - 3, 11, 11); canvas = this.hIndicator.get(0); ctx = canvas.getContext("2d"); ctx.drawImage(img, 11, 0, 11, 11, gw - 3, 0, 11, 11); if (this.vSplite) { canvas = this.vSplite.get(0); ctx = canvas.getContext("2d"); if (this.options.panShow) ctx.drawImage(img, 0, 11, 5, 35, 0, canvas.height / 2 - 18, 5, 35); else ctx.drawImage(img, 5, 11, 5, 35, 0, 0, 5, 35); } if (this.hSplite) { canvas = this.hSplite.get(0); ctx = canvas.getContext("2d"); if (this.options.listExpand) ctx.drawImage(img, 10, 11, 35, 5, canvas.width / 2 - 18, 0, 35, 5); else ctx.drawImage(img, 10, 15, 35, 5, canvas.width / 2 - 18, 0, 35, 5); } } else { var me = this; this.options.buttonImage.load(function () { if (me) { me._drawButtons(); me.UpdateDataPan(true); me = null; } }); } }, updateDataArea: function () { if (this.updateDataAreaTimer == null) { var self = this; this.updateDataAreaTimer = window.setTimeout(function () { window.clearTimeout(self.updateDataAreaTimer) self.updateDataAreaTimer = null; self._drawDataArea(); self = null; }, 20); } }, _drawDataArea: function () { if (this.thumbsCanshow()) this._drawThumbs(); this._drawTimeLabel(); this._drawTrendLines(); }, _drawTrendLines: function () { var gw = this.getGridWidth(); var gh = this.getGridHeight(); var ctx = this.ctx; ctx.save(); ctx.clearRect(0, 0, gw, gh); ctx.translate(0.5, 0.5); var begTime = this.getDrawBegTime(); var endTime = this.getDrawEndTime(); var timeScale = gw / (endTime - begTime); if (this.options.showGrid) { var y = gh / 20.0; ctx.beginPath(); ctx.lineWidth = 1; ctx.strokeStyle = this.options.gridColor; for (var i = 0; i < 19; i++) { var iy = Math.floor(y); ctx.moveTo(0, iy); ctx.lineTo(gw, iy); y += gh / 20.0; } var t = this.ftTimeLabelBeg; var x = (t - begTime) * timeScale; for (var i = 0; i < 4; i++) { var ix = Math.floor(x); ctx.moveTo(ix, 0); ctx.lineTo(ix, gh); t += (endTime - begTime) / 4; x = (t - begTime) * timeScale; } ctx.stroke(); } if (this.trendPens && this.trendPens.length) { ctx.rect(1, 1, gw - 1, gh - 1); ctx.clip(); ctx.lineWidth = 1; for (k in this.trendPens) { var pen = this.trendPens[k]; if (pen != this.activePen) pen.drawTrendLine(ctx, begTime, endTime, gw, gh, timeScale); } if (this.activePen) { var shadowSize = this.options.activeShadowSize; var lineWidth = 2; ctx.lineWidth = shadowSize / 2; var offset = lineWidth / 2 + ctx.lineWidth / 2; ctx.strokeStyle = "rgba(0,0,0,0.4)"; this.activePen.drawTrendLine(ctx, begTime, endTime, gw, gh, timeScale, offset + shadowSize / 2); ctx.strokeStyle = "rgba(0,0,0,0.5)"; this.activePen.drawTrendLine(ctx, begTime, endTime, gw, gh, timeScale, offset); ctx.lineWidth = lineWidth; this.activePen.drawTrendLine(ctx, begTime, endTime, gw, gh, timeScale); } } if (this.zoomRect) { ctx.lineWidth = 1; ctx.strokeStyle = "rgb(180,180,180)"; ctx.fillStyle = "rgba(10,10,10,0.2)"; ctx.beginPath(); ctx.rect(this.zoomRect.x, this.zoomRect.y, this.zoomRect.w, this.zoomRect.h); ctx.fill(); ctx.stroke(); } ctx.restore(); if (this.options.borderColor != null) { ctx.lineWidth = 1; ctx.beginPath(); ctx.strokeStyle = this.options.borderColor; ctx.rect(0.5, 0.5, gw, gh); ctx.stroke(); } }, _onThumbsChanged: function () { this.thumbBegDiv.draggable("option", "containment", [this.canvas.offset().left - 3, 0, this.canvas.offset().left + this.thumbEndDiv.position().left - 20, 0]); this.thumbEndDiv.draggable("option", "containment", [this.canvas.offset().left + this.thumbBegDiv.position().left + 20, 0, this.canvas.offset().left + this.chartWidth - 3, 0]); this._drawThumbs(); this._drawTimeLabel(); this._drawTrendLines(); }, _resetTumbs: function () { if (this.thumbBegDiv) { this.thumbBegDiv .css("left", -3) .draggable("option", "containment", [this.canvas.offset().left - 3, 0, this.canvas.offset().left + this.chartWidth - 18, 0]); } if (this.thumbEndDiv) { this.thumbEndDiv .css("left", this.chartWidth - 3) .draggable("option", "containment", [this.canvas.offset().left + 18, 0, this.canvas.offset().left + this.chartWidth - 18, 0]); } }, _drawThumbs: function () { var thw = this.chartWidth; var gh = this.getGridHeight(); var gt = gh + TIMELABELHEIGHT; var h = SHOWTHUMBSHEIGHT - 3; var ctx = this.ctx; ctx.save(); ctx.clearRect(0, gt, thw, h); ctx.translate(0.5, 0.5); if (this.trendPens && this.trendPens.length) { var begTime = this.getBegTime(); var endTime = this.getEndTime(); var timeScale = thw / this.options.spanSec / PERSEC; ctx.rect(1, gt, thw - 1, h - 1); ctx.clip(); ctx.lineWidth = 1; for (k in this.trendPens) { var pen = this.trendPens[k]; pen.drawThumbsTrendLine(ctx, begTime, endTime, gh, gt, h, timeScale); } } ctx.fillStyle = "rgba(100,100,100,0.7)"; var ix = this.thumbBegDiv.position().left + 6; ctx.fillRect(0, gt, ix, h); ix = this.thumbEndDiv.position().left; ctx.fillRect(ix, gt, thw - ix, h); ctx.restore(); if (this.options.borderColor != null) { ctx.lineWidth = 1; ctx.beginPath(); ctx.strokeStyle = this.options.borderColor; ctx.rect(0.5, 0.5 + gt, thw - 1, h); ctx.stroke(); } }, _drawTimeLabel: function () { if (!this.ctx || !this.slidCanShow()) return; var begTime = this.getDrawBegTime(); var endTime = this.getDrawEndTime(); var timeSpan = (endTime - begTime); var span = timeSpan / 4; var changed = false; if (this.ftTimeLabelBeg == null || Math.abs(this.ftTimeLabelBeg - this.ftBeginTime) > this.options.spanSec * PERSEC) { if (span >= PERDAY) { var ft = begTime + PERDAY; ft = this.FileTimeToDate(ft); ft.setHours(0); ft.setMinutes(0); ft.setSeconds(0); ft.setMilliseconds(0); this.ftTimeLabelBeg = this.DateToFileTime(ft); } else if (span > PERHOUR) { var ft = begTime + PERHOUR; ft = this.FileTimeToDate(ft); ft.setMinutes(0); ft.setSeconds(0); ft.setMilliseconds(0); this.ftTimeLabelBeg = this.DateToFileTime(ft); } else if (span > PERMINUTE) { var ft = begTime + PERMINUTE; ft = this.FileTimeToDate(ft); ft.setSeconds(0); ft.setMilliseconds(0); this.ftTimeLabelBeg = this.DateToFileTime(ft); } else if (span > PERSEC) { var ft = begTime + PERSEC; ft = this.FileTimeToDate(ft); ft.setMilliseconds(0); this.ftTimeLabelBeg = this.DateToFileTime(ft); } else this.ftTimeLabelBeg = begTime + span; changed = true; } while (begTime < this.ftTimeLabelBeg + span) { this.ftTimeLabelBeg -= span; changed = true; } while (begTime > this.ftTimeLabelBeg) { this.ftTimeLabelBeg += span; changed = true; } if (changed) this._updatevIndicatorTooltip(); var ctx = this.ctx; ctx.save(); ctx.translate(0.5, 0.5); ctx.fillStyle = this.options.timeLabelColor; ctx.textBaseline = "top"; ctx.textAlign = "left"; ctx.font = "12px sans-serif"; var gw = this.getGridWidth(); var gh = this.getGridHeight(); ctx.clearRect(0, gh + 0.5, gw, 13); var len = 60; var str; if (timeSpan / PERSEC > 10) str = this.FileTimeToTimeString(begTime, false); else { str = this.FileTimeToTimeString(begTime, true); len = 80; } ctx.fillText(str, 0, gh); str = this.FileTimeToDateString(begTime); ctx.clearRect(0, gh + 14, 70, 16); ctx.fillText(str, 0, gh + 16); var time = this.ftTimeLabelBeg; var x = (time - begTime) * gw / timeSpan; var px = 0; for (var i = 1; i < 5; i++) { var ix = Math.floor(x); if ((ix > px + len) && (ix + len < gw - len)) { if (this.options.spanSec > 10) str = this.FileTimeToTimeString(time, false); else str = this.FileTimeToTimeString(time, true); ctx.fillText(str, ix, gh); px = x; } time += timeSpan / 4; x += gw / 4; } if (timeSpan / PERSEC > 10) str = this.FileTimeToTimeString(endTime, false); else str = this.FileTimeToTimeString(endTime, true); ctx.textAlign = "right"; ctx.fillText(str, gw, gh); str = this.FileTimeToDateString(endTime); ctx.clearRect(gw - 70, gh + 14, 72, 16); ctx.fillText(str, gw, gh + 16); ctx.restore(); }, UpdatePan: function (bReDraw) { if (bReDraw) this.panReDraw = bReDraw; if (this.updatePanTimer == null) { var self = this; this.updatePanTimer = window.setTimeout(function () { window.clearTimeout(self.updatePanTimer) self.updatePanTimer = null; self._drawPan(); self = null; }, 100); } }, UpdateDataPan: function (bReDraw) { if (this.options.showAxis || !this.options.panShow) return; this.UpdatePan(bReDraw); }, UpdateAxisPan: function (bReDraw) { if (!this.options.showAxis || !this.options.panShow) return; this.UpdatePan(bReDraw); }, _drawPan: function (bReDraw) { this.options if (this.options.panShow) { var l = this.getGridWidth() + PANMAG; var w = this.options.panWidth - PANMAG; if (this.options.showAxis) { var h = this.getGridHeight() + TIMELABELHEIGHT; var ctx = this.ctx; ctx.save(); ctx.font = "12px sans-serif"; ctx.textBaseline = "top"; ctx.lineWidth = 1.0; ctx.lineJoin = 'miter'; ctx.clearRect(l, 0, w + 1, h); ctx.rect(l, 0, w + 1, h - 2); ctx.clip(); ctx.translate(0.5, 0.5); if (this.trendPens) { for (var i = 0; i < this.trendPens.length; i++) this.trendPens[i].resetAxisDrawed(); var pl = this.getGridWidth() + PANMAG; var ph = this.getGridHeight(); var pw = this.options.panWidth - PANMAG; var begX = pl + 1; for (var i = 0; i < this.trendPens.length; i++) { ctx.strokeStyle = this.options.borderColor; ctx.fillStyle = this.options.timeLabelColor; var drawPen = this.trendPens[i]; var x = drawPen.drawAxis(begX, ph, ctx); if (isNaN(x)) x = 0; begX += x + 2; if (begX >= this.chartWidth) break; } } ctx.restore(); } else { var h = this.getGridHeight(); if (this.yScroll == null || this.yScroll < 0) this.yScroll = 0; else if (!this.trendPens || h > PANHEAD + this._getPanTotalHeight()) this.yScroll = 0; else if (this.yScroll + (h - PANHEAD) > this._getPanTotalHeight()) this.yScroll = this._getPanTotalHeight() - h + PANHEAD; var ctx = this.ctx; ctx.save(); ctx.font = "14px sans-serif"; ctx.textBaseline = "top"; bReDraw = this.panReDraw || bReDraw; this.panReDraw = false; if (bReDraw) ctx.clearRect(l + 0.5, 0.5, w, h + TIMELABELHEIGHT); ctx.rect(l, 0, w + 1, h - 2); ctx.clip(); if (this.trendPens) { var t = PANHEAD - this.yScroll; var pl = this.getGridWidth() + PANMAG; var ph = this.getGridHeight(); var pw = this.options.panWidth - PANMAG; for (var i = 0; i < this.trendPens.length; i++) { ctx.save(); ctx.translate(pl, t); if (this.newPenPos == i) { ctx.lineWidth = 4.0; ctx.lineJoin = 'round'; ctx.strokeStyle = "rgb(0,210,210)"; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(pw, 0); ctx.stroke(); } var drawPen = this.trendPens[i]; drawPen.drawPan(bReDraw, ctx, t, pw); ctx.restore(); t += drawPen.getPanHeight(); if (t > ph) break; } } if (this._showAxisToggle === true) { this._showAxisToggle = false; ctx.clearRect(l + 0.5, h, w, TIMELABELHEIGHT); } ctx.restore(); ctx.beginPath(); ctx.lineWidth = 1; ctx.strokeStyle = this.options.borderColor; ctx.rect(l + 0.5, 0.5, w, h); ctx.stroke(); } } }, _setOption: function (key, value) { switch (key) { case "rtRefresh": this.setRtrefresh(value); break; } this._super(key, value); }, toggleRtRefresh: function () { this.setRtrefresh(!this.options.rtRefresh); }, setRtrefresh: function (brtRefresh) { if (this.options.rtRefresh == brtRefresh) return; this.options.rtRefresh = brtRefresh; if (this.options.rtRefresh) { this.toolBar.setItemImage("reRefresh", "refresh.png"); this.toolBar.setItemState("reRefresh", true); this.toolBar.setItemToolTip("reRefresh", "当前为实时刷新模式,单击转变为静态查询模式"); } else { this.toolBar.setItemImage("reRefresh", "query.png"); this.toolBar.setItemState("reRefresh", false); this.toolBar.setItemToolTip("reRefresh", "当前为静态查询模式,单击转变为实时刷新模式"); } if (this.options.rtRefresh) { if (Math.abs(this.DateToFileTime(new Date()) - this.getEndTime()) > this.options.spanSec * PERSEC) { var begTime = new Date(); begTime.setMilliseconds(0); begTime = this.DateToFileTime(begTime); begTime += PERSEC; begTime -= this.options.spanSec * PERSEC; this.ftTimeLabelBeg = null; if (this.ftBeginTime == begTime) this.ftBeginTime = 0; this.setBeginTime(begTime); } else if (this.webLinks) { for (var i in this.webLinks) this.webLinks[i].requestHisData(); } } }, toggleShowAxis: function () { this.setShowAxis(!this.options.showAxis); }, setShowAxis: function (bShowAxis) { if (this.options.showAxis == bShowAxis) return; this.options.showAxis = bShowAxis; if (this.options.showAxis) { this.toolBar.setItemImage("showAxis", "axis.png"); this.toolBar.setItemState("showAxis", true); this.toolBar.setItemToolTip("showAxis", "当前为值轴显示模式,单击转变为数据板显示模式"); } else { this.toolBar.setItemImage("showAxis", "datapan.png"); this.toolBar.setItemState("showAxis", false); this.toolBar.setItemToolTip("showAxis", "当前为数据板显示模式,单击转变为值轴显示模式"); } this._showAxisToggle = true; var gw = this.getGridWidth(); var hw; if (this.options.showAxis) hw = this.chartWidth; else hw = gw + 12; this.hIndicator.css("width", hw); this.hIndicator.attr("width", (hw) * this.options.resolution); var node = this.hIndicator.get(0); if (window.G_vmlCanvasManager) window.G_vmlCanvasManager.initElement(node); // For ExCanvas var hctx = node.getContext('2d'); if (!window.G_vmlCanvasManager) hctx.scale(this.options.resolution, this.options.resolution); hctx.save(); hctx.translate(0.5, 0.5); hctx.clearRect(0, 0, (hw), INDICTWIDTH); hctx.lineWidth = 3.0; hctx.strokeStyle = this.options.indicatorColor; hctx.beginPath(); hctx.moveTo(1, 5); hctx.lineTo(hw, 5); hctx.stroke(); if (this.options.buttonImage && this.options.buttonImage.get(0).complete === true) { var img = this.options.buttonImage.get(0); hctx.drawImage(img, 11, 0, 11, 11, gw - 3, -0.5, 11, 11); } hctx.restore(); this.UpdatePan(true); }, toggleRangeMode: function () { this.setRangeMode(!this.options.freeRange); }, setRangeMode: function (rangeMode) { if (this.options.freeRange === rangeMode) return; this.options.freeRange = rangeMode; if (this.options.freeRange) { this.toolBar.setItemImage("toggleRange", "view_type_free.png"); this.toolBar.setItemState("toggleRange", true); this.toolBar.setItemToolTip("toggleRange", "当前量程为自由量程,点击切换到固定量程"); } else { this.toolBar.setItemImage("toggleRange", "view_type.png"); this.toolBar.setItemState("toggleRange", false); this.toolBar.setItemToolTip("toggleRange", "当前量程为固定量程,点击切换到自由量程"); } // 如果是固定量程 var pen if (!rangeMode) { for (var i = 0, len = this.trendPens.length; i < len; i++) { pen = this.trendPens[i]; pen.setRange(0, 1000, null); } } }, setCursor: function (cursor) { this.canvas.css("cursor", cursor); }, showTooltip: function (opt, pen) { if (this.artTooltip) this.artTooltip.close().remove(); if (this.tipShowPen) this.tipShowPen.onTooltipHided(); if (this.tooltipTimer) { window.clearTimeout(this.tooltipTimer); this.tooltipTimer = null; } var rtChart = this; this.tooltipTimer = window.setTimeout( function () { var o = rtChart.getOffset(); if (opt.x == null || opt.x < 0) opt.x = 0; else if (opt.x + rtChart.positionDiv.width() + 2 > o.left + rtChart.chartWidth) opt.x = o.left + rtChart.chartWidth - rtChart.positionDiv.width() - 2; if (opt.y == null || opt.y < 0) opt.y = 0; else if (opt.y + rtChart.positionDiv.height() + 2 > o.top + rtChart.chartHeight) opt.y = o.top + rtChart.chartHeight - rtChart.positionDiv.height() - 2; rtChart.positionDiv.offset({ left: opt.x, top: opt.y }); $.extend(opt, { padding: 10, onremove: function () { rtChart._onTootipHided(); rtChart = null; } }); rtChart.artTooltip = dialog(opt); rtChart.artTooltip.show(rtChart.positionDiv.get(0)); rtChart.btipShow = true; rtChart.tipShowPen = pen; if (rtChart.tipShowPen) rtChart.tipShowPen.onTooltipShowed(); }, this.options.tooltipDelay || 200); }, UpdateTooltip: function (content) { if (this.artTooltip) this.artTooltip.content(content) }, _onTootipHided: function () { this.btipShow = false; if (this.tipShowPen) { this.tipShowPen.onTooltipHided(); this.tipShowPen = null; } this.tootipAt = null; if (this.artTooltip) delete this.artTooltip; this.positionDiv.offset({ left: this.canvas.offset().left, top: this.canvas.offset().top }); }, getTooltipPen: function () { return this.tipShowPen; }, _onhIndicatorHover: function (e) { if (this.loginning === true) return; if (this.artTooltip && this.tootipAt == "HI" && this.artTooltip.__popup) return; if (this.artTooltip) this.artTooltip.close().remove(); if (this.tooltipTimer) { window.clearTimeout(this.tooltipTimer); this.tooltipTimer = null; } var rtChart = this; this.tooltipTimer = window.setTimeout( function () { if (rtChart.tooltipTimer) { window.clearTimeout(rtChart.tooltipTimer); rtChart.tooltipTimer = null; } var gh = rtChart.getGridHeight(); var o = rtChart.canvas.offset(); var y = e.pageY - o.top; var ta = (y > gh / 2) ? 'bottom' : 'top'; var opt = { title: "值线", content: rtChart._gethIndicatorTooltipContent(), align: ta, padding: 10, width: 300, skin: 'tooltipTans' }; rtChart.artTooltip = dialog(opt); rtChart.artTooltip.show(rtChart.hIndicator.get(0)); rtChart.btipShow = true; rtChart.tootipAt = "HI"; rtChart = null; }, this.options.tooltipDelay || 1000); }, _onhIndicatorMove: function (event) { if (this.artTooltip && this.tootipAt == "HI" && this.artTooltip.__popup) this.artTooltip.content(this._gethIndicatorTooltipContent()); }, _onhIndicatorMoveEnd: function (event) { if (this.artTooltip && this.tootipAt == "HI" && this.artTooltip.__popup) this.artTooltip.content(this._gethIndicatorTooltipContent()); }, _gethIndicatorTooltipContent: function () { var gh = this.getGridHeight(); var iy = this.hIndicator.offset().top - this.canvas.offset().top + 5; var content = null; if (this.trendPens) { var arr = []; for (var i in this.trendPens) arr.push(this.trendPens[i].getValueLine(iy)); if (arr.length) content = arr.join(""); } return content; }, _onvIndicatorHover: function (e) { if (this.loginning === true) return; if (this.artTooltip && this.tootipAt == "VI" && this.artTooltip.__popup) return; if (this.tooltipTimer) { window.clearTimeout(this.tooltipTimer); this.tooltipTimer = null; } var rtChart = this; var gw = rtChart.getGridWidth(); var o = rtChart.canvas.offset(); var x = e.pageX - o.left; var ta = (x > gw / 2) ? 'left top' : 'left top'; var currentTime = {}; var opt = { title: rtChart._getvIndicatorTooltipTitle(currentTime), content: rtChart._getvIndicatorTooltipContent(currentTime), align: ta, padding: 10, width: 320, skin: 'tooltipTans' }; if (opt.content != null) { rtChart.artTooltip = dialog(opt); rtChart.artTooltip.show(rtChart.vIndicator.get(0)); rtChart.btipShow = true; rtChart.tootipAt = "VI"; } rtChart = null; }, _onvIndicatorMove: function (e) { if (this.artTooltip && this.tootipAt == "VI" && this.artTooltip.__popup) { this.artTooltip.reset(); this._updatevIndicatorTooltip(); } }, _onvIndicatorMoveEnd: function (e) { this._updatevIndicatorTooltip(); }, _updatevIndicatorTooltip: function () { if (this.artTooltip && this.tootipAt == "VI" && this.artTooltip.__popup) { if (this.vTooltipTimer == null) { var rtChart = this; this.vTooltipTimer = window.setTimeout(function () { window.clearTimeout(rtChart.vTooltipTimer); rtChart.vTooltipTimer = null; var currTime = {}; rtChart.artTooltip.title(rtChart._getvIndicatorTooltipTitle(currTime)); rtChart.artTooltip.content(rtChart._getvIndicatorTooltipContent(currTime)); rtChart = null; }, 100); } } if (this.trendPens) { for (var i in this.trendPens) this.trendPens[i].updateDataReader(); } }, _getvIndicatorTooltipTitle: function (currTime) { var gw = this.getGridWidth(); var ix = this.vIndicator.position().left + 5; var begTime = this.getDrawBegTime(); var endTime = this.getDrawEndTime(); var span = endTime - begTime; var timeScale = span / gw; var ft = begTime + ix * timeScale; var title = ""; var date = this.FileTimeToDate(ft); if (span > 28 * PERDAY) title += date.getFullYear() + "年"; if (span > PERDAY) title += (date.getMonth() + 1) + "月"; if (span > PERHOUR) title += date.getDate() + "日"; title += this.FileTimeToTimeString(ft, true); title += " 附近的值"; currTime.ft = ft; return title; }, _getvIndicatorTooltipContent: function (currentTime) { var ft = currentTime.ft; if (this.trendPens) { var content = []; for (var i in this.trendPens) content.push(this.trendPens[i].getValueTooltipAtTime(ft)); if (content.length) return content.join(""); else return null; } else return null; }, posvIndicator: function (ft) { if (ft >= this.getBegTime() && ft <= this.getEndTime()) { if (this.options.rtRefresh) this.setRtrefresh(false); if (ft <= this.getDrawBegTime() || ft >= this.getDrawEndTime()) { this._resetTumbs(); this.updateDataArea(); } var begTime = this.getDrawBegTime(); var endTime = this.getDrawEndTime(); var gw = this.getGridWidth(); var span = endTime - begTime; var timeScale = span / gw; var posX = Math.floor((ft - this.getDrawBegTime()) / timeScale) - 6; while (1) { this.vIndicator.css("left", posX - 5); var ix = this.vIndicator.position().left + 5; if (begTime + ix * timeScale >= ft) break; posX++; } } }, getReaderTimer: function () { var gw = this.getGridWidth(); var ix = this.vIndicator.position().left + 5; var begTime = this.getDrawBegTime(); var endTime = this.getDrawEndTime(); var span = endTime - begTime; var timeScale = span / gw; var ft = begTime + ix * timeScale; return ft; }, getHisRefreshing: function () { return this.options.rtRefresh; }, panCanShow: function () { if (!this.options.panWidth || this.options.panWidth < MINPANWIDTH) this.options.panWidth = MINPANWIDTH; if (this.chartWidth < 100 + this.options.panWidth) return false; else return true; }, thumbsCanshow: function () { if (this.options.showThumbs && this.chartHeight > SHOWTHUMBSHLIMT) return true; else return false; }, thumbsShow: function () { if (this.options.showThumbs && this.chartHeight > SHOWTHUMBSHLIMT) { var beg = this.thumbBegDiv.position().left + 3; var end = this.thumbEndDiv.position().left + 3; if (beg > 0 || end < this.chartWidth) return true; else return false; } else return false; }, _tumbsCanDrag: function (x) { var beg = this.thumbBegDiv.position().left + 3; var end = this.thumbEndDiv.position().left + 3; if ((x > beg && x < end) && (beg > 0 || end < this.chartWidth)) return true; else return false; }, listCanshow: function () { if (this.options.showList && (this.chartHeight - this.options.listHeight) > 200) return true; else return false; }, toolBarCanShow: function () { if (this.chartHeight > SHOWTOOLBARHLIMIT) return true; else return false; }, slidCanShow: function () { if (this.chartHeight > SLIDHLIMIT) return true; else return false; }, setListHeight: function (h) { if (this.options.listHeight == h) { if (this.hSplite) { var canvas = this.hSplite.get(0); var ctx = canvas.getContext("2d"); if (this.options.buttonImage && this.options.buttonImage.get(0).complete === true) { var img = this.options.buttonImage.get(0); if (this.options.listExpand) ctx.drawImage(img, 10, 11, 35, 5, canvas.width / 2 - 18, 0, 35, 5); else ctx.drawImage(img, 10, 15, 35, 5, canvas.width / 2 - 18, 0, 35, 5); } } return; } this.options.listHeight = h; if (this.options.listHeight < 30) this.options.listExpand = false; else this.options.listExpand = true; if (this.artTooltip) this.artTooltip.close().reset().remove(); this._bulidCanvas(); }, setListExpand: function (bExpand) { if (this.options.listExpand == bExpand) return; if (bExpand) { if (!this.listCanshow()) return; } this.options.listExpand = bExpand; if (this.artTooltip) this.artTooltip.close().reset().remove(); this._bulidCanvas(); }, getPanShow: function () { return this.options.panShow; }, setPanShow: function (bShow) { if (this.options.panShow == bShow) return; if (bShow) { if (!this.panCanShow()) return; } this.options.panShow = bShow; this._reDrawAll(); }, setPanWidth: function (w) { if (this.options.panWidth == w) return; this.options.panWidth = w; if (this.chartWidth < 100 + this.options.panWidth || this.options.panWidth < MINPANWIDTH) this.options.panShow = false; this._reDrawAll(); }, getPanWidth: function () { return this.options.panWidth - PANMAG; }, getOffset: function () { return this.canvas.offset(); }, getGridWidth: function () { return this.chartWidth - (this.options.panShow ? this.options.panWidth : 0) - 1; }, getGridHeight: function () { var h = this.chartHeight; if (this.toolBarCanShow()) h -= TOOLBARHEIGHT; if (this.listCanshow()) { if (this.options.listExpand) h -= this.options.listHeight; else h -= HSPLITHEIGHT; } if (this.slidCanShow()) h -= SLIDEHEIGHT; if (this.thumbsCanshow()) h -= SHOWTHUMBSHEIGHT; h--; return h; }, getNextPenColor: function () { var i = 0; if (this.trendPens) { if (this.trendPens.length < penColors.length) { i = this.trendPens.length; return penColors[i]; } else { i = this.trendPens.length % penColors.length; var c = TrendColor.parse(penColors[i]); var sign = (this.trendPens.length % 2 == 1 ? -1 : 1); var factor = 1 + sign * Math.ceil(this.trendPens.length / 2) * 0.2; c.scale(factor, factor, factor); return c.toString(); } } else return penColors[i]; }, getButtonImage: function () { if (this.options.buttonImage) return this.options.buttonImage.get(0); else return null; }, _updateTimeDisplay: function () { if (!this.toolBar || this.calendarShowed === true || this.timerFocus === true) return; this.toolBar.setValue("date_from", this.FileTimeToDateString(this.getBegTime()) + " " + this.FileTimeToTimeString(this.getBegTime(), this.options.spanSec < 10)); this.toolBar.setValue("date_to", this.FileTimeToDateString(this.getEndTime()) + " " + this.FileTimeToTimeString(this.getEndTime(), this.options.spanSec < 10)); }, getTimeSpanString: function () { var spanStr = "时间跨度:"; var span = this.options.spanSec * PERSEC; if (this.options.spanSec > PERDAY) { var d = Math.floor(span / PERDAY); span -= d * PERDAY; spanStr += d + "天"; } if (this.options.spanSec * PERSEC > PERHOUR) { var h = Math.floor(span / PERHOUR); span -= h * PERHOUR; spanStr += h + "时"; } if (this.options.spanSec * PERSEC > PERMINUTE) { var m = Math.floor(span / PERMINUTE); span -= m * PERMINUTE; spanStr += m + "分"; } var s = Math.floor(span / PERSEC); span -= s * PERSEC; spanStr += s + "秒"; if (this.options.spanSec <= 10) { var ms = (span / PERMSEC).toFixed(2); spanStr += ms + "毫秒"; } return spanStr; }, setBegTimeAndSpan: function (begTime, span) { span = span || 1; if (this.options.spanSec == span && this.ftBeginTime == begTime) return; this.ftTimeLabelBeg = null; this.options.spanSec = span; if (this.ftBeginTime == begTime) this.ftBeginTime = 0; this.updateBeginTime(begTime); if (this.toolBar) this.toolBar.setItemText("timeSpan", this.getTimeSpanString()); this._updateTimeDisplay(); }, setTimeSpan: function (span, fixEnd) { span = span || 1; if (this.options.spanSec == span) return; var newBeginTime; if (fixEnd) newBeginTime = this.getEndTime() - span * PERSEC; else newBeginTime = this.getBegTime(); this.ftTimeLabelBeg = null; this.options.spanSec = span; if (this.ftBeginTime == newBeginTime) this.ftBeginTime = 0; this.updateBeginTime(newBeginTime); if (this.toolBar) this.toolBar.setItemText("timeSpan", this.getTimeSpanString()); this._updateTimeDisplay(); }, updateBeginTime: function (ft) { this.setBeginTime(ft); if (this.dataLoadTimer) { window.clearTimeout(this.dataLoadTimer); this.dataLoadTimer = null; } var rtchart = this; this.dataLoadTimer = window.setTimeout(function () { window.clearTimeout(rtchart.dataLoadTimer); rtchart.dataLoadTimer = null; if (rtchart.trendPens) { for (i in rtchart.trendPens) { var pen = rtchart.trendPens[i]; pen.refreshHisData(true); } } rtchart = null; }, 500); this.updateDataArea(); this._updatevIndicatorTooltip(); }, setBeginTime: function (ft) { if (this.ftBeginTime == ft) return; var old = this.ftBeginTime; this.ftBeginTime = ft; if (this.getHisRefreshing()) { if (ft < old) { this.autoRefresh = true; this.setRtrefresh(false); } } this._updateTimeDisplay(); }, setBegTime: function (begTime, fixEnd) { var ft = this.DateToFileTime(begTime); if (fixEnd) { if (this.getEndTime() > ft) { var span = this.getEndTime() - ft; span /= PERSEC; this.setBegTimeAndSpan(ft, span); } else { var d = dialog({ content: '设置的起始时间不能大于截至时间' }); d.show(); setTimeout(function () { d.close().remove(); d = null; }, 2000); } } else { this.ftTimeLabelBeg = null; if (this.ftBeginTime == ft) this.ftBeginTime = 0; this.updateBeginTime(ft); } }, setEndTime: function (endTime, fixBeg) { var ft = this.DateToFileTime(endTime); if (fixBeg) { if (ft > this.getBegTime()) { var span = ft - this.getBegTime(); span /= PERSEC; ft -= this.options.spanSec * PERSEC; this.setBegTimeAndSpan(ft, span); } else { var d = dialog({ content: '设置的截至时间不能大于起始时间' }); d.show(); setTimeout(function () { d.close().remove(); d = null; }, 2000); } } else { ft -= this.options.spanSec * PERSEC; this.ftTimeLabelBeg = null; if (this.ftBeginTime == ft) this.ftBeginTime = 0; this.updateBeginTime(ft); } }, getBegTime: function () { return this.ftBeginTime; }, getEndTime: function () { return this.ftBeginTime + (this.options.spanSec * PERSEC); }, getTimeSlot: function () { var slotTime = this.options.spanSec * PERSEC; slotTime /= this.getGridWidth(); return slotTime; }, getTimeSpan: function () { return this.options.spanSec * PERSEC; }, getDrawBegTime: function () { var begTime = this.getBegTime(); if (this.thumbsShow()) { var beg = this.thumbBegDiv.position().left + 3; if (beg > 0) { var w = this.chartWidth - 1; begTime += beg * this.options.spanSec * PERSEC / w; } } return begTime; }, getDrawEndTime: function () { var endTime = this.getEndTime(); if (this.thumbsShow()) { var end = this.thumbEndDiv.position().left + 3; var w = this.chartWidth - 1; if (end < w) { endTime -= (w - end) * this.options.spanSec * PERSEC / w; } } return endTime; }, _setNewLastTime: function (lastft) { if (lastft <= this.getEndTime()) return; var newTimeBegin = lastft - (this.options.spanSec * PERSEC); if (!this.newTimeBegin || this.newTimeBegin < newTimeBegin) this.newTimeBegin = newTimeBegin; }, _onNewHisData: function () { if (!this.prepareTimer) { var me = this; this.prepareTimer = window.setTimeout(function () { window.clearTimeout(me.prepareTimer); me.prepareTimer = null; me._prepareHisData(); me = null; }, 10); } }, _prepareHisData: function () { if (!this.trendPens || !this.trendPens.length) return; var begTime, endTime; var baseChanged = false; var newTimeBeg = this.newTimeBegin; if (newTimeBeg > this.getBegTime()) { baseChanged = true; begTime = this.newTimeBegin; endTime = begTime + (this.options.spanSec * PERSEC); this.newTimeBegin = null; } if (!baseChanged) { begTime = this.getBegTime(); endTime = this.getEndTime(); } for (k in this.trendPens) { var pen = this.trendPens[k]; pen.prepareHisData(begTime, endTime); } if (baseChanged) { this.setBeginTime(begTime); if (!this.getHisRefreshing()) this.setRtrefresh(true); this._drawTimeLabel(); } else if (!this.getHisRefreshing()) { if (newTimeBeg >= this.getBegTime() - (this.options.spanSec * PERSEC) * 20 / this.getGridWidth()) this.setRtrefresh(true); } this.updateDataArea(); }, _getPanTotalHeight: function () { if (!this.trendPens || !this.trendPens.length) return 0; var t = 0; for (var i = 0; i < this.trendPens.length; i++) { var pen = this.trendPens[i]; t += pen.getPanHeight(); } return t; }, _findDragThing: function (e) { this.dargWho = null; var gw = this.getGridWidth(); var gh = this.getGridHeight(); var o = this.getOffset(); var dragEvent = e; if (e.originalEvent && e.originalEvent.changedTouches && e.originalEvent.changedTouches[0]) dragEvent = e.originalEvent.changedTouches[0]; var x = dragEvent.pageX - o.left; var y = dragEvent.pageY - o.top; if (this.options.panShow && !this.options.showAxis && x > gw + PANMAG && y < gh) //@pan { var t = PANHEAD; x -= (gw + PANMAG); if (y < t) { } else if (this.trendPens) { y -= t; y += this.yScroll; t = 0; var dargPen = null; for (var i = 0; i < this.trendPens.length; i++) { var pen = this.trendPens[i]; if (y >= t && y <= t + pen.getPanHeight() && pen == this.activePen) { dargPen = pen; break; } else t += pen.getPanHeight(); } if (dargPen) { this.dargWho = "penPan"; this.origVal = this.getPenIndex(dargPen); } else if (t > gh - PANHEAD) { this.dargWho = "pan"; this.origVal = this.yScroll; } } } else if (x > 0) { var activeDrag = false; if (y >= 0 && y <= gh) { if (this.trendPens) { var ft = this._getXTime(x); for (var i in this.trendPens) { var pen = this.trendPens[i]; if (pen == this.activePen && pen.hasDataAtTime(ft, y)) { activeDrag = true; break; } } } if (this.zooming === true) { this.dargWho = "dataArea"; this.origVal = this.getBegTime(); } else if (activeDrag) { this.origSecVal = dragEvent.pageY; this.dargWho = "activePen"; this.origVal = this.getBegTime(); } else { this.dargWho = "dataArea"; this.origVal = this.getBegTime(); } } else if (y > gh && y < gh + TIMELABELHEIGHT) { this.dargWho = "timeLabel"; this.origVal = this.getBegTime(); } else if (y > gh + TIMELABELHEIGHT && this.thumbsCanshow(x)) { if (this._tumbsCanDrag(x)) { this.dargWho = "tumbsDrag"; } } } }, _getPanPenAtMouse: function (e) { if (this.options.panShow) { if (this.trendPens) { var gw = this.getGridWidth(); var gh = this.getGridHeight(); var o = this.getOffset(); var dragEvent = e; if (e.originalEvent && e.originalEvent.changedTouches && e.originalEvent.changedTouches[0]) dragEvent = e.originalEvent.changedTouches[0]; var x = dragEvent.pageX - o.left; var y = dragEvent.pageY - o.top; if (this.options.panShow && x > gw + PANMAG && y < gh) //@pan { var t = PANHEAD; x -= (gw + PANMAG); if (y < t) { } else { y -= t; y += this.yScroll; t = 0; for (var i = 0; i < this.trendPens.length; i++) { var pen = this.trendPens[i]; if (y >= t && y <= t + pen.getPanHeight()) return pen; else t += pen.getPanHeight(); } } } } } return null; }, _getXTime: function (x) { return this.getDrawBegTime() + (this.getDrawEndTime() - this.getDrawBegTime()) * x / this.getGridWidth(); }, _onMouseWheel: function (e) { var gw = this.getGridWidth(); var gh = this.getGridHeight(); var o = this.getOffset(); var x = e.pageX - o.left; var y = e.pageY - o.top; if (this.options.panShow && x > gw + PANMAG && y < gh) //@pan { if (gh < PANHEAD + this._getPanTotalHeight()) { this.yScroll += ((e.deltaY * 10) * -1); this.UpdateDataPan(true); } } else if (x > 0 && x < gw) { if (y >= 0 && y <= gh) { if (this.trendPens) { var ft = this._getXTime(x); for (var i in this.trendPens) { var pen = this.trendPens[i]; if (pen == this.activePen) { pen.expendY(e.deltaY * -2); break; } } } } } }, _onRtchartMouseMove: function (e) { if (this._isTouch()) return; var rtchart = this var vSplite = this.vSplite, vsLeft = parseInt(vSplite.css('left')) - 10; this.vIndicator.offset({ // 不超过分割线 left: e.pageX > vsLeft ? vsLeft : e.pageX }); // this._updatevIndicatorTooltip(); // 节流 this.__timer__ && clearTimeout(this.__timer__); (function (e) { if (e.pageX > vsLeft) return; this.__timer__ = setTimeout(function () { rtchart._onvIndicatorHover(e); }, 300) })(e); // this.vIndicator.trigger(e); // } }, _onMouseDown: function (e) { if (this._isTouch()) return; if (this.artTooltip) this.artTooltip.close().remove(); if (this.tooltipTimer) { window.clearTimeout(this.tooltipTimer); this.tooltipTimer = null; } var rtchart = this this._findDragThing(e); if (this.dargWho) { this.dragStartEvent = e; this.positionDiv.draggable("option", "disabled", false); this.positionDiv.bind("drag", function (event, ui) { rtchart._dragMove(event); }); this.positionDiv.bind("dragstop", function (event, ui) { rtchart._unDarg(); rtchart = null; }); this.positionDiv.offset({ left: e.pageX - 2, top: e.pageY - 2 }); this.positionDiv.trigger(e); if (this.dargWho == 'dataArea' && this.zooming) this.positionDiv.addClass('zoomcur'); this.dragTimer = window.setTimeout(function () { var dargWho = rtchart.dargWho; window.clearTimeout(rtchart.dragTimer); rtchart.dragTimer = null; rtchart._unDarg(); if (dargWho == "tumbsDrag") rtchart._ondbClick(e); else rtchart._onClick(e); rtchart = null; }, 200); } }, _dragMove: function (e) { if (this.dragTimer) { window.clearTimeout(this.dragTimer); this.dragTimer = null; } if (this.dragStartEvent && this.dargWho) { var gw = this.getGridWidth(); var gh = this.getGridHeight(); var startEvent = this.dragStartEvent; var detX = e.clientX - startEvent.clientX; var detY = e.clientY - startEvent.clientY; switch (this.dargWho) { case 'pan': this.yScroll = this.origVal - detY; this.UpdateDataPan(true); break; case 'penPan': var pen = this._getPanPenAtMouse(e); if (pen) { var newPos = this.getPenIndex(pen) if (newPos != this.origVal && newPos != this.newPenPos) { this.newPenPos = newPos; this.UpdateDataPan(true); } else if (this.trendPens && this.getGridHeight() < PANHEAD + this._getPanTotalHeight()) { var gh = this.getGridHeight(); var o = this.getOffset(); var y = e.pageY - o.top; if (y < 20) { if (this.yScroll > 0) { this.yScroll -= pen.getPanHeight(); this.UpdateDataPan(true); } } else if (y > gh - 10) { this.yScroll += pen.getPanHeight(); this.UpdateDataPan(true); } } } break; case 'timeLabel': this.setBeginTime(this.origVal - detX * (this.getDrawEndTime() - this.getDrawBegTime()) / gw); this.updateDataArea(); break; case 'activePen': if (this.activePen && this.origSecVal) { var dY = e.pageY - this.origSecVal; if (Math.abs(detY) > 5) { this.activePen.moveY(dY); this.origSecVal = e.pageY; } } if (Math.abs(detX) > 30) { this.acvtimePenTimeOffset = true; this.setBeginTime(this.origVal - detX * (this.getDrawEndTime() - this.getDrawBegTime()) / gw); this.updateDataArea(); } break; case 'dataArea': if (this.zooming) { var o = this.canvas.offset(); var x = startEvent.pageX - o.left; var y = startEvent.pageY - o.top; var gw = this.getGridWidth(); var gh = this.getGridHeight(); if (x > 0 && x < gw && y > 0 && y < gh) { this.zoomRect = { x: x, y: y, w: detX, h: detY }; var x = this.zoomRect.x; if (this.zoomRect.w < 0) x += this.zoomRect.w; this.zoomRect.begTime = this._getXTime(x); this.updateDataArea(); } } else { this.setBeginTime(this.origVal - detX * (this.getDrawEndTime() - this.getDrawBegTime()) / gw); this.updateDataArea(); } break; case 'tumbsDrag': if (detX > 0) { var end = this.thumbEndDiv.position().left + 3; if (end < this.chartWidth - 3) { var l = parseInt(this.thumbEndDiv.css('left')) + detX; if (l > this.chartWidth - 3) l = this.chartWidth - 3; this.thumbEndDiv.css('left', l); l = parseInt(this.thumbBegDiv.css('left')) + detX; this.thumbBegDiv.css('left', l); this._onThumbsChanged(); } } else if (detX < 0) { var beg = this.thumbBegDiv.position().left + 3; if (beg > 0) { var l = parseInt(this.thumbBegDiv.css('left')) + detX; if (l < -3) l = -3; this.thumbBegDiv.css('left', l); l = parseInt(this.thumbEndDiv.css('left')) + detX; this.thumbEndDiv.css('left', l); this._onThumbsChanged(); } } this.dragStartEvent = e; break; } } else this._unDarg(); }, _unDarg: function () { if (this.dragTimer) { window.clearTimeout(this.dragTimer); this.dragTimer = null; } switch (this.dargWho) { case 'penPan': if (this.newPenPos != null) { var pen = this.trendPens[this.newPenPos]; this.trendPens[this.newPenPos] = this.getPenByIndex(this.origVal); this.trendPens[this.origVal] = pen; this.newPenPos = null; this.UpdateDataPan(true); this._synList(); } break; case 'timeLabel': if (this.trendPens) { for (i in this.trendPens) { var pen = this.trendPens[i]; pen.refreshHisData(); } } break; case 'dataArea': if (this.zooming) { this._toggleZoom(); this.positionDiv.removeClass('zoomcur'); if (this.zoomRect) { if (this.zoomRect.w < 0) { this.zoomRect.x += this.zoomRect.w; this.zoomRect.w *= -1; } if (this.zoomRect.h < 0) { this.zoomRect.y += this.zoomRect.h; this.zoomRect.h *= -1; } if (this.zoomStack == null) this.zoomStack = []; var zoomItem = {}; zoomItem.begTime = this.getBegTime(); zoomItem.spanTime = this.options.spanSec; this.zoomStack.push(zoomItem); this._updateReZoom(); var begTime = this.zoomRect.begTime; var span = (this.getDrawEndTime() - this.getDrawBegTime()) * this.zoomRect.w / this.getGridWidth(); if (span < 1) span = 1; var endTime = begTime + span; if (this.trendPens) { for (i in this.trendPens) { var pen = this.trendPens[i]; if (pen.hasDataBetweenTime(begTime, endTime)) { if (zoomItem.pens == null) zoomItem.pens = []; zoomItem.pens.pushpen } } } this.zoomRect = null; this._resetTumbs(); this.setBegTimeAndSpan(begTime, span / PERSEC); } } else if (this.trendPens) { for (i in this.trendPens) { var pen = this.trendPens[i]; pen.refreshHisData(); } } break; case 'activePen': if (this.acvtimePenTimeOffset && this.trendPens) { for (i in this.trendPens) { var pen = this.trendPens[i]; pen.refreshHisData(); } } break; } this.origSecVal = null; this.dargWho = null; this.origVal = null; this.dragStartEvent = null; this.positionDiv.draggable("option", "disabled", true); this.positionDiv.unbind("drag"); this.positionDiv.unbind("dragstop"); this.positionDiv.offset({ left: this.canvas.offset().left, top: this.canvas.offset().top }); }, _onTouchStart: function (e) { if (this.artTooltip) this.artTooltip.close().remove(); if (this.tooltipTimer) { window.clearTimeout(this.tooltipTimer); this.tooltipTimer = null; } this._findDragThing(e); if (this.dargWho) { this.dragStartEvent = e; var rtchart = this; this.canvas.bind('touchmove', function (e) { rtchart._onTouchMove(e); }); this.canvas.bind('touchend', function (e) { rtchart._onTouchEnd(e); rtchart = null; }); this.dragTimer = window.setTimeout(function () { window.clearTimeout(rtchart.dragTimer); rtchart.dragTimer = null; if (rtchart.tooltipTimer) { window.clearTimeout(rtchart.tooltipTimer); rtchart.tooltipTimer = null; } rtchart._onTouchEnd(); rtchart = null; }, 800); } }, _onTouchMove: function (e) { if (this.dragTimer) { window.clearTimeout(this.dragTimer); this.dragTimer = null; } if (this.dragStartEvent && this.dargWho) { var startEvent = this.dragStartEvent.originalEvent.changedTouches[0]; var currEvent = e.originalEvent.changedTouches[0]; var detX = currEvent.clientX - startEvent.clientX; var detY = currEvent.clientY - startEvent.clientY; switch (this.dargWho) { case 'pan': this.yScroll = this.origVal - detY; this.UpdateDataPan(true); break; case 'penPan': var pen = this._getPanPenAtMouse(e); if (pen) { var newPos = this.getPenIndex(pen) if (newPos != this.origVal && newPos != this.newPenPos) { this.newPenPos = newPos; this.UpdateDataPan(true); } else if (this.trendPens && this.getGridHeight() < PANHEAD + this._getPanTotalHeight()) { var gh = this.getGridHeight(); var o = this.getOffset(); var y = currEvent.pageY - o.top; if (y < 20) { if (this.yScroll > 0) { this.yScroll -= pen.getPanHeight(); this.UpdateDataPan(true); } } else if (y > gh - 10) { this.yScroll += pen.getPanHeight(); this.UpdateDataPan(true); } } } break; default: this._onTouchEnd(); return; } } else this._onTouchEnd(); }, _onTouchEnd: function (e) { if (this.dragTimer) { window.clearTimeout(this.dragTimer); this.dragTimer = null; } if (this.newPenPos != null) { var pen = this.trendPens[this.newPenPos]; this.trendPens[this.newPenPos] = this.getPenByIndex(this.origVal); this.trendPens[this.origVal] = pen; this.newPenPos = null; this.UpdateDataPan(true); } this.canvas.unbind('touchmove'); this.canvas.unbind('touchend'); this.dargWho = null; this.origVal = null; this.dragStartEvent = null; }, _onKeyDown: function (e) { switch (e.which) { case 39: //right if (this.artTooltip && this.tootipAt == "VI" && this.artTooltip.__popup) { if (this.thumbsShow()) { var x = this.vIndicator.position().left + 5; var endTime = this._getXTime(x + 2); var limit = this.getDrawEndTime(); if (endTime >= limit) { var l = parseInt(this.thumbEndDiv.css('left')); var s = l + 10; if (s > this.chartWidth - 3) s = this.chartWidth - 3; if (s > l) { this.thumbEndDiv.css('left', s); s = parseInt(this.thumbBegDiv.css('left')) + s - l; if (s > this.chartWidth - 13) s = this.chartWidth - 13; this.thumbBegDiv.css('left', s); this._onThumbsChanged(); } } } var gw = this.getGridWidth(); var off = this.vIndicator.offset(); if (off.left + 1 <= this.canvas.offset().left + gw - 5) { this.vIndicator.offset({ left: off.left + 1, top: off.top }); this.artTooltip.reset(); this._updatevIndicatorTooltip(); } } else { var gw = this.getGridWidth(); var begTime = this.getDrawBegTime(); var endTime = this.getDrawEndTime(); var det = (endTime - begTime) / gw; this.updateBeginTime(this.getBegTime() - det); } break; case 37: //left if (this.artTooltip && this.tootipAt == "VI" && this.artTooltip.__popup) { if (this.thumbsShow()) { var x = this.vIndicator.position().left + 5; var begTime = this._getXTime(x - 2); var limit = this.getDrawBegTime(); if (begTime <= limit) { var l = parseInt(this.thumbBegDiv.css('left')); var s = l - 10; if (s < -3) s = -3; if (s < l) { this.thumbBegDiv.css('left', s); s = parseInt(this.thumbEndDiv.css('left')) - (l - s); if (s < 13) s = 13; this.thumbEndDiv.css('left', s); this._onThumbsChanged(); } } } var gw = this.getGridWidth(); var off = this.vIndicator.offset(); if (off.left - 1 >= this.canvas.offset().left - 5) { this.vIndicator.offset({ left: off.left - 1, top: off.top }); this.artTooltip.reset(); this._updatevIndicatorTooltip(); } } else { var gw = this.getGridWidth(); var begTime = this.getDrawBegTime(); var endTime = this.getDrawEndTime(); var det = (endTime - begTime) / gw; this.updateBeginTime(this.getBegTime() + det); } break; case 38: //up if (this.artTooltip && this.tootipAt == "HI" && this.artTooltip.__popup) { var gh = this.getGridHeight(); var off = this.hIndicator.offset(); if (off.top - 1 >= this.canvas.offset().top - 5) { this.hIndicator.offset({ left: off.left, top: off.top - 1 }); this.artTooltip.content(this._gethIndicatorTooltipContent()); this.artTooltip.reset(); } } else if (this.activePen) this.activePen.moveY(-1); break; case 40: //down if (this.artTooltip && this.tootipAt == "HI" && this.artTooltip.__popup) { var gh = this.getGridHeight(); var off = this.hIndicator.offset(); if (off.top + 1 <= this.canvas.offset().top + gh - 5) { this.hIndicator.offset({ left: off.left, top: off.top + 1 }); this.artTooltip.content(this._gethIndicatorTooltipContent()); this.artTooltip.reset(); } } else if (this.activePen) this.activePen.moveY(1); break; } }, _ondbClick: function (e) { var gw = this.getGridWidth(); var gh = this.getGridHeight(); var o = this.getOffset(); var x = e.pageX - o.left; var y = e.pageY - o.top; if (y > gh + TIMELABELHEIGHT && this.thumbsCanshow()) { this._resetTumbs(); this.updateDataArea(); } }, _onClick: function (e) { this.canvas.attr("title", null); this.canvas.css("cursor", "default"); if (this.btipShow === true && this.tipShowPen && this.tipShowPen.getpreventTooltipUpdate() === true) { if (this.artTooltip) this.artTooltip.close().remove(); return; } if (!this.trendPens || !this.trendPens.length) return; if (this.zooming) this._toggleZoom(e); var gw = this.getGridWidth(); var gh = this.getGridHeight(); var o = this.getOffset(); var x = e.pageX - o.left; var y = e.pageY - o.top; var clientx = x; var clienty = y if (this.options.panShow && x > gw + PANMAG && y < gh) //@pan { if (!this.options.showAxis) { var t = PANHEAD; x -= (gw + PANMAG); if (y < t) { } else { y -= t; y += this.yScroll; t = 0; for (var i = 0; i < this.trendPens.length; i++) { var pen = this.trendPens[i]; if (y >= t && y <= t + pen.getPanHeight()) { if (pen.onClick(x, y - t, e) === true) { } break; } else t += pen.getPanHeight(); } } } else { for (var i = 0; i < this.trendPens.length; i++) { var pen = this.trendPens[i]; var beg = pen.axisBeg; var end = pen.axisEnd; if (clientx >= beg && clientx <= end) { if (this.btipShow) { if (this.artTooltip) this.artTooltip.close().remove(); } pen.onSetCommAxis(e); break; } } } } else if (y >= 0 && y < gh) { if (this.trendPens) { var ft = this._getXTime(x); var oldActive = this.activePen; var bFind = false; var first = null; for (var i in this.trendPens) { pen = this.trendPens[i]; if (pen == oldActive) { bFind = true; this.requestActive(null); } else if (pen.hasDataAtTime(ft, y)) { if (bFind || oldActive == null) { pen.activePen(); return; } else if (first == null) first = pen; } } if (first) first.activePen(); } } else if (y > gh && y < gh + TIMELABELHEIGHT) { if (x < 70) this._onSetBegTime(e); else if (x > gw - 80 && x < gw) this._onSetEndTime(e); } }, _onMouseMove: function (e) { if (this.colorPicker && this.colorPicker.is(":visible")) return; if (this.btipShow === true && this.tipShowPen && this.tipShowPen.getpreventTooltipUpdate() === true) return; if (!this.trendPens || !this.trendPens.length) return; if (this.tooltipTimer) { window.clearTimeout(this.tooltipTimer); this.tooltipTimer = null; } var oldShow = this.btipShow; var bClearCursor = true; var bClearNativeTooltip = true; this.btipShow = false; var gw = this.getGridWidth(); var gh = this.getGridHeight(); var o = this.getOffset(); var x = e.pageX - o.left; var y = e.pageY - o.top; var clientx = x; var clienty = y if (clientx > 0 && clientx < this.chartWidth && clienty > 0 && clienty < this.chartHeight) { if (this.options.panShow && x > gw + PANMAG && y < gh) //@pan { if (this.zooming) this.canvas.removeClass('zoomcur'); if (!this.options.showAxis) { var t = PANHEAD; x -= (gw + PANMAG); if (y < t) { } else { y -= t; y += this.yScroll; t = 0; for (var i = 0; i < this.trendPens.length; i++) { var pen = this.trendPens[i]; if (y >= t && y <= t + pen.getPanHeight()) { if (pen.onMouseMove(x, y - t, e, clientx, clienty, gh) === true) bClearCursor = false; break; } else t += pen.getPanHeight(); } } } else { for (var i = 0; i < this.trendPens.length; i++) { var pen = this.trendPens[i]; var beg = pen.axisBeg; var end = pen.axisEnd; if (clientx >= beg && clientx <= end) { bClearCursor = false; bClearNativeTooltip = false; this.canvas.css("cursor", "pointer"); this.canvas.attr("title", "点击进行 " + pen.getLabel() + " 的共轴设置"); break; } } } } else if (y >= 0 && y < gh) { if (this.zooming) this.canvas.addClass('zoomcur'); } else if (y > gh && y < gh + TIMELABELHEIGHT) { if (this.zooming) this.canvas.removeClass('zoomcur'); if (x < 70) { bClearCursor = false; bClearNativeTooltip = false; this.canvas.css("cursor", "pointer"); this.canvas.attr("title", "点击设置查询起始时间"); } else if (x > gw - 80 && x < gw) { bClearCursor = false; bClearNativeTooltip = false; this.canvas.css("cursor", "pointer"); this.canvas.attr("title", "点击设置查询截至时间"); } } else if (y > gh + TIMELABELHEIGHT && this.thumbsCanshow()) { if (this._tumbsCanDrag(x)) { bClearCursor = false; this.canvas.css("cursor", "e-resize"); } } } if (bClearNativeTooltip) this.canvas.attr("title", null); if (bClearCursor && !this.zooming) this.canvas.css("cursor", "default"); if (oldShow && !this.btipShow) { if (this.artTooltip) this.artTooltip.close().remove(); } if (!this.btipShow && this.tipShowPen) { this.tipShowPen.onTooltipHided(); this.tipShowPen = null; } }, _linkData: function (pen) { if (!this.webLinks) this.webLinks = []; var url = pen.getWebURL().toLowerCase(); var webLink = this.webLinks[url]; if (webLink == null) { webLink = new WebLink(url); this.webLinks[url] = webLink; } webLink.addPen(pen); }, _buildColorPicker: function () { if (this.colorPicker) return; this.colorPicker = $(document.createElement('div')); this.colorPicker.css("position", "absolute") .addClass("dropdown-menu") .addClass("colorpicker-title"); this.element.append(this.colorPicker); this.colorPicker.append(document.createElement('div')); $('div:first', this.colorPicker) .attr("data-color", "rgb(255, 255, 255)") .addClass("colorpicker-ind") .colorpicker({ align: 'left' }); this.colorPicker.draggable({ drag: function (event, ui) { $('.colorpicker-ind', this).colorpicker('reposition'); } }); var label = $(document.createElement('span')); this.colorPicker.append(label); label.addClass("colorpicker-label"); var prev = $(document.createElement('div')); prev.html('
') this.colorPicker.append(prev); prev .addClass("colorpicker-prev") .attr('title', '点击恢复到上次设置'); var resume = $(document.createElement('div')); resume.html('
') this.colorPicker.append(resume); resume .addClass("colorpicker-resume") .attr('title', '点击恢复初始设置'); }, AddPen: function (options) { if (!this.trendPens) this.trendPens = []; var pen = new TrendPen(this, options); for (var i = 0; i < this.trendPens.length; i++) { if (this.trendPens[i].options.URI == pen.options.URI) { alert(pen.options.URI + "已存在"); return; } } this.trendPens.push(pen); this._bindPenList(pen); this._linkData(pen); this._drawPan(false); }, removePen: function (pen) { if (this.tipShowPen == pen) { if (this.artTooltip) this.artTooltip.close().remove(); } if (this.activePen) { this.activePen.setActive(false); this.activePen = null; if (this.toolBar) this.toolBar.disableItem("deletePoint"); } var bFind = false; if (this.trendPens) { var len = this.trendPens.length; for (var i = 0; i < len; i++) { if (this.trendPens[i] == pen) { bFind = true; this.trendPens.splice(i, 1); break; } } } if (pen.rowId != null && this.listGrid) { this.listGrid.deleteRow(pen.rowId); } pen.destroy(); if (bFind) { this.UpdatePan(true); this.updateDataArea(); } }, getPenIndex: function (pen) { if (this.trendPens) { for (var i = 0; i < this.trendPens.length; i++) { if (this.trendPens[i] == pen) return i; } } return -1; }, getPenByIndex: function (i) { if (!this.trendPens) return null; else return this.trendPens[i]; }, requestLogin: function (from, notCloseAutoLogClose) { if (this.artTooltip) this.artTooltip.close().remove(); if (this.loginning === true) return; this.loginning = true; var rtChart = this; }, getActivePen: function () { return this.activePen; }, ensurePenPanVisble: function (pen) { if (this.options.panShow && !this.options.showAxis) { var t = 0; var gh = this.getGridHeight(); for (var i = 0; i < this.trendPens.length; i++) { var findPen = this.trendPens[i]; if (findPen == pen) { if (t < this.yScroll) { this.yScroll = t; this.UpdateDataPan(true); } else if (t - this.yScroll + pen.getPanHeight() + PANHEAD > gh) { this.yScroll = t + pen.getPanHeight() + PANHEAD - gh; this.UpdateDataPan(true); } break; } else t += pen.getPanHeight(); } } }, requestActive: function (pen) { if (this.activePen == pen) return; if (this.activePen) this.activePen.setActive(false); this.activePen = pen; if (this.activePen) { this.activePen.setActive(true); this.ensurePenPanVisble(this.activePen); if (this.activePen.rowId && this.listGrid && this.activePen.rowId != this.listGrid.getSelectedRowId()) this.listGrid.selectRow(this.listGrid.getRowIndex(this.activePen.rowId), false, false, true); if (this.toolBar) this.toolBar.enableItem("deletePoint"); } else { if (this.toolBar) this.toolBar.disableItem("deletePoint"); if (this.listGrid && this.listGrid.getSelectedRowId() != null) this.listGrid.clearSelection(); } this._drawDataArea(); }, setPenColor: function (pen, e) { if (this.btipShow) { if (this.artTooltip) this.artTooltip.close().remove(); } if (!this.colorPicker) this._buildColorPicker(); var colorpicker = this.colorPicker; if (colorpicker.prevColor != null) { $('.colorpicker-prev', colorpicker).show(); $('.colorpicker-prevbk', colorpicker).css('background-color', colorpicker.prevColor); $('.colorpicker-prev', colorpicker).bind("click", function () { if (colorpicker) { $('.colorpicker-ind', colorpicker).colorpicker('setValue', colorpicker.prevColor); } }); } else $('.colorpicker-prev', colorpicker).hide(); colorpicker.resumeColor = pen.getPenColor(); $('.colorpicker-resume', colorpicker).bind("click", function () { if (colorpicker) { $('.colorpicker-ind', colorpicker).colorpicker('setValue', colorpicker.resumeColor); } }); var o = this.getOffset(); var x = e.pageX - o.left; var y = e.pageY - o.top; var at; if (x < this.chartWidth / 2) at = "left+15"; else at = "right-10"; if (y < this.chartHeight / 2) at += " top+15"; else at += " bottom-140"; $('.colorpicker-label', colorpicker).text("设置趋势笔颜色:" + pen.getLabel()); colorpicker.show() .position({ my: at, of: e, collision: "fit" }); $('.colorpicker-resumebk', colorpicker).css('background-color', pen.getPenColor()); $('.colorpicker-ind', colorpicker) .colorpicker('setValue', pen.getPenColor()) .colorpicker('show') .off() .on('changeColor.colorpicker', function (event) { if (pen) pen.setPenColor(event.color.toString()); }) .on('hidePicker.colorpicker', function (event) { if (colorpicker) { colorpicker.prevColor = $(this).data('colorpicker').color.toString(); colorpicker.hide(); $('.colorpicker-ind', colorpicker).off(); $('.colorpicker-resume', colorpicker).unbind(); $('.colorpicker-prev', colorpicker).unbind(); colorpicker = null; } if (pen) pen = null; }); }, setColors: function (who, clr) { switch (who) { case 'bkColor': this.options.bkColor = clr; this.canvas.css('background-color', clr); break; case 'gridColor': if (this.options.gridColor != clr) { this.options.gridColor = clr; this.updateDataArea(); this.UpdateAxisPan(true); } break; case 'indColor': if (this.options.indicatorColor != clr) { var img = this.options.buttonImage; if (img) { img = img.get(0); if (img.complete !== true) img = null; } var gw = this.getGridWidth(); var gh = this.getGridHeight(); var hw; if (this.options.showAxis) hw = this.chartWidth; else hw = gw + 12; this.options.indicatorColor = clr; var node = this.hIndicator.get(0); var hctx = node.getContext('2d'); hctx.clearRect(0, 0, node.width, node.height); hctx.save(); hctx.translate(0.5, 0.5); hctx.lineWidth = 3.0; hctx.strokeStyle = this.options.indicatorColor; hctx.beginPath(); hctx.moveTo(1, 5); hctx.lineTo(hw, 5); hctx.stroke(); hctx.restore(); if (img) hctx.drawImage(img, 11, 0, 11, 11, gw - 3, 0, 11, 11); node = this.vIndicator.get(0); var vctx = node.getContext('2d'); vctx.clearRect(0, 0, node.width, node.height); vctx.save(); vctx.translate(0.5, 0.5); vctx.lineWidth = 3.0; vctx.strokeStyle = this.options.indicatorColor; vctx.beginPath(); vctx.moveTo(5, 1); vctx.lineTo(5, gh + 10); vctx.stroke(); vctx.restore(); if (img) vctx.drawImage(img, 0, 0, 11, 11, 0, gh - 3, 11, 11); } break; case 'bordrColor': if (this.options.borderColor != clr) { this.options.borderColor = clr; this._reDrawAll(); } break; case 'timeLabelColor': if (this.options.timeLabelColor != clr) { this.options.timeLabelColor = clr; this._drawTimeLabel(); } break; } }, parseDate: function (datestr) { var date = null; var indate = datestr.split(" "); if (indate.length > 0) { var d = indate[0].split("-"); if (d.length == 3) { do { var y = parseInt(d[0]); if (isNaN(y) || y < 0) break; if (d[0].length <= 2) y += 2000; var m = parseInt(d[1]); if (isNaN(m)) break; if (m < 1 || m > 12) break; m--; var day = parseInt(d[2]); if (isNaN(day)) break; if (day < 1 || day > 31) break; date = new Date(y, m, day, 0, 0, 0, 0); if (indate.length < 2) break; d = indate[1].split(":"); if (d.length == 3) { var h = parseInt(d[0]); if (isNaN(h) || h < 0 || h > 23) break; date.setHours(h); var m = parseInt(d[1]); if (isNaN(m) || m < 0 || h > 59) break; date.setMinutes(m); var s = parseInt(d[2]); if (isNaN(s) || s < 0 || s > 59) break; date.setSeconds(s); var ms = parseFloat(d[2]); if (ms != s) { ms -= s; ms *= 1000; ms = ms.toFixed(0); date.setMilliseconds(ms); } } } while (false); } } return date; }, _onSetBegTime: function (e) { if (this.btipShow) { if (this.artTooltip) this.artTooltip.close().remove(); } var rtChart = this; var d = dialog({ title: '设置查询起始时间', quickClose: true, content: '
', onshow: function () { var set = $('input[name=dateSet]', this.__popup) .val(rtChart.FileTimeToDateString(rtChart.getBegTime()) + " " + rtChart.FileTimeToTimeString(rtChart.getBegTime())) .datetimepicker({ changeMonth: true, changeYear: true }); $('input[name=dateSet]', this.__popup).keydown(this, function (e) { switch (e.which) { case 13: d.ok(); break; case 27: d.close().remove(); d = null; rtChart = null; break; } }); $('#ui-datepicker-div').draggable(); }, okValue: '确定', ok: function () { var date = rtChart.parseDate($('input[name=dateSet]', this.__popup).val()); if (date != null) { var fixEnd = $('input[name=fixEnd]', this.__popup)[0].checked; rtChart.setBegTime(date, fixEnd); } d.close().remove(); d = null; }, onclose: function () { $('input[name=dateSet]', this.__popup) .datetimepicker("hide"); $('#ui-datepicker-div').draggable("destroy"); rtChart = null; } }); e.pageX += 10; e.pageY -= 30; d.show(e); }, _onSetEndTime: function (e) { if (this.btipShow) { if (this.artTooltip) this.artTooltip.close().remove(); } var rtChart = this; var d = dialog({ title: '设置查询截至时间', quickClose: true, content: '
', onshow: function () { var set = $('input[name=dateSet]', this.__popup) .val(rtChart.FileTimeToDateString(rtChart.getEndTime()) + " " + rtChart.FileTimeToTimeString(rtChart.getEndTime())) .datetimepicker({ changeMonth: true, changeYear: true }); $('input[name=dateSet]', this.__popup).keydown(this, function (e) { switch (e.which) { case 13: d.ok(); break; case 27: d.close().remove(); d = null; rtChart = null; break; } }); $('#ui-datepicker-div').draggable(); }, okValue: '确定', ok: function () { var date = rtChart.parseDate($('input[name=dateSet]', this.__popup).val()); if (date != null) { var fixBeg = $('input[name=fixBeg]', this.__popup)[0].checked; rtChart.setEndTime(date, fixBeg); } d.close().remove(); d = null; }, onclose: function () { $('input[name=dateSet]', this.__popup) .datetimepicker("hide"); $('#ui-datepicker-div').draggable("destroy"); rtChart = null; } }); e.pageX += 10; e.pageY -= 30; d.show(e); }, _loadPoints: function (dia, grid, info, start, count, tabfilter, tagfilter, totalCount, descfilter) { info.css("color", "rgb(0,0,100)"); info.text("正在获取数据..."); var rtchart = this; this._loadAddPoints = true; //注意标签点中有#号问题 var str = "http://" + webServiceIP + ":" + webServicePort + "/api/Point?start=" + start + "&count=" + count + "&filter=" + tagfilter + "&tabfilter=" + tabfilter + "&desc=" + descfilter; $.ajax({ url: str, type: 'GET', dataType: 'json', cache: false, success: function (data) { // if (data == null) return; if (data.Count == 0) { totalCount.Num = 0; info.css("color", "rgb(0,0,100)"); info.text("未查询到相关数据点"); info.attr("title", "未查询到相关数据点)"); return; } totalCount.Num = data.Count; var ind = start; if (data.PointsPros && data.PointsPros.length > 0) { info.css("color", "rgb(0,0,100)"); info.text("请选择一个或多个数据点:(总共:" + totalCount.Num + " 个数据点)"); info.attr("title", "(共有:" + totalCount.Num + " 个数据点)"); var pointspros = data.PointsPros; var len = data.PointsPros.length; var newind = 1; var append = false; if (grid.getRowsNum() == 0) append = true; for (var i = 0; i < len; i++) { var id, name, des, unit, type; id = pointspros[i].Id; name = pointspros[i].TagName; des = pointspros[i].Desc; unit = pointspros[i].Uint; type = pointspros[i].Type; if (append === true) { grid.addRow(i, [false, newind++, id, name, des, unit, type]); } else { var pid = 'p_' + ind; grid.cells(pid, 2).setValue(id); grid.cells(pid, 3).setValue(name); grid.cells(pid, 4).setValue(des); grid.cells(pid, 5).setValue(unit); grid.cells(pid, 6).setValue(type); grid.changeRowId(pid, id); ind++; } } } else { info.css("color", "rgb(0,0,100)"); info.text("没有符合搜索条件的数据点"); info.attr("title", null); } } }) }, _loadTableNames: function (comBox) { if (typeof (tableNameStr) != "undefined") { if (tableNameStr.length > 0) { for (var i = 0; i < tableNames.length; i++) { comBox.addOption(tableNames[i], tableNames[i]); } comBox.setComboText(tableNames[0]); return; } } var str = "http://" + webServiceIP + ":" + webServicePort + "/api/Table?isAllTalbleInfo=all"; $.ajax({ url: str, type: 'GET', dataType: 'json', cache: false, success: function (data) { for (var i = 0; i < data.length; i++) { comBox.addOption(data[i], data[i]); } } }) }, _onAddPoint: function () { var rtChart = this; var w = 660; var h = 480; if (w > this.canvas.width() - 60) w = this.canvas.width() - 60; if (h > this.canvas.height() - 110) h = this.canvas.height() - 110; var content = '
'; content += '