118 lines
24 KiB
HTML
118 lines
24 KiB
HTML
<html><head><title>云控曲线</title><link href="img/favicon.png" rel="shortcut icon" type="image/x-icon"><link type="text/css" rel="stylesheet" href="../../lib/css/themes/jquery-ui/default/jquery-ui.min.css"><link type="text/css" rel="stylesheet" href="../../lib/css/fancytree/ui.fancytree.min.css"><link type="text/css" rel="stylesheet" href="css/jquery.colorpicker.css"><link rel="stylesheet" type="text/css" href="../../lib/css/iob/selectID.css"><script type="text/javascript" src="../../lib/js/jquery-1.11.1.min.js"></script><script type="text/javascript" src="../../lib/js/jquery-ui-1.10.3.full.min.js"></script><script type="text/javascript" src="../../lib/js/jquery.fancytree-all.min.js"></script><script type="text/javascript" src="../../lib/js/translate.js"></script><script type="text/javascript" src="../../lib/js/selectID.js"></script><script type="text/javascript" src="../../lib/js/socket.io.js"></script><script type="text/javascript" src="../../_socket/info.js"></script><style>.ui-resizable-s {
|
|
cursor: s-resize;
|
|
height: 10px;
|
|
width: 100%;
|
|
bottom: -6px;
|
|
background: #a0a0a0;
|
|
left: 0;
|
|
}
|
|
.save {
|
|
/*position: absolute;
|
|
top: 10px;
|
|
right: 130px;*/
|
|
margin-top: 1px;
|
|
margin-left: 10px;
|
|
}
|
|
.save[aria-disabled="false"] {
|
|
background: #ff7474;
|
|
color: white;
|
|
border-color: #8e8e8e;
|
|
}
|
|
|
|
.input {
|
|
/*width: 150px;*/
|
|
}
|
|
|
|
.input_time {
|
|
width: 80px;
|
|
}
|
|
|
|
.label {
|
|
width: 130px;
|
|
}
|
|
|
|
.ui-widget input {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.header {
|
|
background: white;
|
|
color: black;
|
|
}
|
|
|
|
body {
|
|
font-family: Arial,PingFangSC-Light,"Microsoft YaHei",sans-serif;;
|
|
}
|
|
|
|
h3 {
|
|
line-height: 0.3!important;
|
|
font-size: 15px!important;
|
|
}
|
|
|
|
.ui-accordion-content {
|
|
padding: 5px 10px !important;
|
|
}
|
|
|
|
#accordion {
|
|
font-size: 14px !important;
|
|
height: 100%;
|
|
}
|
|
|
|
#accordion>div {
|
|
padding: 3px;
|
|
}
|
|
|
|
table.fixed td { overflow: hidden; }
|
|
table.fixed th { overflow: hidden; }
|
|
|
|
.no-spaces {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
/*.ui-resizable-s {
|
|
cursor: s-resize;
|
|
height: 10px;
|
|
bottom: -5px;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: gray;
|
|
}*/
|
|
.version {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 10px;
|
|
color: white;
|
|
}
|
|
|
|
.presets_table_all {
|
|
width: 100%
|
|
}
|
|
.presets_table_all th {
|
|
background: grey;
|
|
color: white;
|
|
text-align: left;
|
|
padding: 5px;
|
|
}
|
|
.presets_table_all td {
|
|
padding: 5px;
|
|
}
|
|
|
|
.presets_table_all tr:nth-child(even) {
|
|
background: #dcdbdb;
|
|
}
|
|
.presets-selected {
|
|
background: #7598b9 !important;
|
|
}
|
|
.presets_table_th_load {
|
|
width: 70px;
|
|
}
|
|
.presets_table_th_name {
|
|
width: 20%;
|
|
}
|
|
.presets_table_th_ids {
|
|
width: calc(80 - 150px);
|
|
}
|
|
.presets_table_th_buttons {
|
|
width: 70px;
|
|
}</style></head><body style="height: calc(100% - 16px); width: 100%; margin: 0; padding: 0;"><div id="resizable1" style="overflow: hidden; height: 360px"><div style="height: calc(100% - 75px); position: relative; overflow: hidden;"><div id="accordion"><ul><li><a href="#chapter_presets" class="translate">Presets</a></li><li><a href="#chapter_ids" class="translate">Input data</a></li><li><a href="#chapter_markline" class="translate">Markings</a></li><li><a href="#chapter_time" class="translate">Time</a></li><li><a href="#chapter_options" class="translate">Options</a></li><li><button class="save">Save</button></li></ul><div id="chapter_presets" style="width: 100%; height: calc(100% - 50px); overflow: auto;"><table class="presets_table_all"><thead><tr><th class="presets_table_th_load"></th><th class="presets_table_th_name translate">Name</th><th class="presets_table_th_ids translate">IDs</th><th class="presets_table_th_buttons"></th></tr></thead><tbody id="presets_table"></tbody></table></div><div id="chapter_ids" style="width: 100%; height: calc(100% - 50px); overflow: auto;"><table><tr><td colspan="7"><button style="margin-left: 1px" id="ids_add" class="translateB">Add new line</button> <button id="clear" title="Reset settings" class="translateT" style="float: left;">Clear</button> <label class="translate" style="padding-left: 20px" for="autoUpdate">Auto-update:</label><input type="checkbox" id="autoUpdate"> <button id="arrangeBools" class="translateB button_arrange_bools">Arrange bools</button></td></tr></table><div style="width: 100%;"><table style="table-layout: fixed;" class="fixed" id="idslist_table" border="0" cellspacing="0" cellpadding="0"><tbody id="idslist"></tbody></table></div></div><div id="chapter_markline" class="markline-option" style="width: 100%; height: calc(100% - 50px); overflow: auto;"><table style="width: 100%"><tr><td colspan="7"><button style="margin-left: 1px" id="markline_add" class="translateB">Add new markings</button></td></tr></table><div style="width: 100%; height: 100%"><table style="table-layout: fixed;" class="fixed" id="markline_table" border="0" cellspacing="0" cellpadding="0"><thead id="markline_head"><tr class="header"><td class="translate" style="width: 30%; white-space: nowrap">Line ID</td><td class="translate" style="width: 130px; white-space: nowrap">Upper value or ID</td><td class="translate" style="width: 40px;"></td><td class="translate" style="width: 130px; white-space: nowrap">Lower value or ID</td><td class="translate" style="width: 40px;"></td><td class="translate" style="width: 180px">Color</td><td class="translate" style="width: 80px">Fill</td><td class="translate" style="width: 80px">ØL</td><td class="translate" style="width: 80px">ØS</td><td class="translate" style="width: 30%">Text</td><td class="translate" style="width: 150px; white-space: nowrap">Text position</td><td class="translate" style="width: 100px; white-space: nowrap">Text offset</td><td class="translate" style="width: 100px; white-space: nowrap">Text size</td><td class="translate" style="width: 180px; white-space: nowrap">Text color</td><td class="translate" style="width: 80px"></td></tr></thead><tbody id="markline_list"></tbody></table></div></div><div id="chapter_time" style="display: flex; height: calc(100% - 50px); overflow: auto;" class="chapter_time"><table><tr><td class="translate header" colspan="2" style="text-align: center">Time Span</td></tr><tr class="time_timeType"><td><label class="translate" for="timeType">Aggregation:</label></td><td><select id="timeType" class="input value"><option value="relative" class="translate">relative</option><option value="static" class="translate">static</option></select></td></tr><tr class="relative time_relativeEnd"><td><label class="translate" for="relativeEnd">End:</label></td><td><select id="relativeEnd" class="input value"><option value="now" class="translate">now</option><option value="1minute" class="translate">end of minute</option><option value="5minutes" class="translate">end of 5 minutes</option><option value="10minutes" class="translate">end of 10 minutes</option><option value="30minutes" class="translate">end of 30 minutes</option><option value="1hour" class="translate">end of hour</option><option value="2hours" class="translate">end of 2 hours</option><option value="3hours" class="translate">end of 3 hours</option><option value="4hours" class="translate">end of 4 hours</option><option value="6hours" class="translate">end of 6 hours</option><option value="8hours" class="translate">end of 8 hours</option><option value="12hours" class="translate">end of 12 hours</option><option value="today" class="translate">end of day</option><option value="weekEurope" class="translate">end of sunday</option><option value="weekUsa" class="translate">end of saturday</option><option value="month" class="translate">this month</option><option value="year" class="translate">this year</option></select></td></tr><tr class="relative time_range"><td><label class="translate" for="range">Range:</label></td><td><select id="range" class="value input"><option value="10" class="translate">10 minutes</option><option value="30" class="translate">30 minutes</option><option value="60" class="translate">1 hour</option><option value="120" class="translate">2 hours</option><option value="180" class="translate">3 hours</option><option value="360" class="translate">6 hours</option><option value="720" class="translate">12 hours</option><option value="1440" class="translate">1 day</option><option value="2880" class="translate">2 days</option><option value="4320" class="translate">3 days</option><option value="10080" class="translate">7 days</option><option value="20160" class="translate">14 days</option><option value="1m" class="translate">1 month</option><option value="2m" class="translate">2 months</option><option value="3m" class="translate">3 months</option><option value="6m" class="translate">6 months</option><option value="1y" class="translate">1 year</option><option value="2y" class="translate">2 years</option></select></td></tr><tr class="relative time_live"><td><label class="translate" for="live">Live update every:</label></td><td><select class="value" id="live"><option value="" class="translate">none</option><option value="5" class="translate">5 seconds</option><option value="10" class="translate">10 seconds</option><option value="15" class="translate">15 seconds</option><option value="20" class="translate">20 seconds</option><option value="30" class="translate">30 seconds</option><option value="60" class="translate">1 minute</option><option value="120" class="translate">2 minutes</option><option value="300" class="translate">5 minutes</option><option value="600" class="translate">10 minutes</option><option value="900" class="translate">15 minutes</option><option value="1200" class="translate">20 minutes</option><option value="1800" class="translate">30 minutes</option><option value="3600" class="translate">1 hour</option><option value="7200" class="translate">2 hours</option><option value="10800" class="translate">3 hours</option><option value="21600" class="translate">6 hours</option><option value="43200" class="translate">12 hours</option><option value="86400" class="translate">1 day</option></select></td></tr><tr class="static time_start"><td><label class="translate" for="start">Start:</label></td><td><input type="date" id="start" class="value input"> <input type="time" id="start_time" class="value input_time"></td></tr><tr class="static time_end"><td><label class="translate" for="end">End:</label></td><td><input type="date" id="end" class="value input"> <input type="time" id="end_time" class="value input_time"></td></tr></table><table style="margin-left: 25px"><tr><td class="translate header" colspan="2" style="text-align: center">Aggregate</td></tr><tr class="time_aggregateType"><td><label class="translate" for="aggregateType">Step type:</label></td><td><select id="aggregateType" class="value input"><option value="count" class="translate">counts</option><option value="step" class="translate">seconds</option></select></td></tr><tr class="time_aggregateSpan"><td><label id="spanName" class="translate" for="aggregateSpan">Step span:</label></td><td><input id="aggregateSpan" value="300" class="value input"></td></tr><tr class="time_ticks"><td><label class="translate" for="ticks">Ticks from:</label></td><td><table class="no-spaces"><tr><td><input id="ticks" class="value input" style="display: inline;"></td><td><button style="display: inline; margin-right: 15px;" id="ticks_select"></button></td></tr></table></td></tr></table></div><div id="chapter_options" style="display: flex; height: calc(100% - 50px); overflow: auto;" class="chapter_options"><table style="width: 380px"><tr><td class="translate header" colspan="2" style="text-align: center">Appearance</td></tr><tr class="options_width"><td style="width: 270px"><label class="translate" for="width">Width:</label></td><td><input id="width" class="value input spinner"></td></tr><tr class="options_height"><td><label class="translate" for="height">Height:</label></td><td><input id="height" class="value input spinner"></td></tr><tr class="options_noborder"><td><label class="translate" for="noBorder">No border:</label></td><td><select class="value input" id="noBorder"><option value="" class="translate"></option><option value="noborder" class="translate">yes</option></select></td></tr><tr class="options_window_bg"><td class="label"><label class="translate" for="window_bg">Window background:</label></td><td><table class="no-spaces"><tr><td><input id="window_bg" class="value input input-static-color" style="display: inline-block"></td><td><button data-clear="window_bg" class="clear-button" style="display: inline-block"></button></td></tr></table></td></tr><tr class="options_bg_custom"><td class="label"><label class="translate" for="bg_custom">Custom chart background:</label></td><td><input type="checkbox" id="bg_custom"></td></tr><tr class="options_bg"><td class="label"><label class="bg_predefined" for="bg_predefined">Chart background:</label></td><td><select id="bg_predefined"><option value="" class="translate">default</option><option value="0">Portrait</option><option value="1">Instagram</option><option value="2">ServQuick</option><option value="3">Metallic Toad</option><option value="4">Clouds</option><option value="5">Mirage</option><option value="6">Steel Gray</option><option value="7">Horizon</option><option value="8">Koko Caramel</option><option value="9">Turquoise flow</option></select> <input id="bg" class="value input" style="display: none"></td></tr><tr class="options_x_labels_color"><td class="label"><label class="translate" for="x_labels_color">X axis labels color:</label></td><td><table class="no-spaces"><tr><td><input class="value input input-static-color" id="x_labels_color"></td><td><button data-clear="x_labels_color" class="clear-button" style="display: inline-block"></button></td></tr></table></td></tr><tr class="options_y_labels_color"><td class="label">><label class="translate" for="y_labels_color">Y axis labels color:</label></td><td><table class="no-spaces"><tr><td><input class="value input input-static-color" id="y_labels_color"></td><td><button data-clear="y_labels_color" class="clear-button" style="display: inline-block"></button></td></tr></table></td></tr><tr class="options_border_color"><td><label class="translate label" for="border_color">Border color:</label></td><td><table class="no-spaces"><tr><td><input class="value input input-static-color" id="border_color"></td><td><button data-clear="border_color" class="clear-button" style="display: inline-block"></button></td></tr></table></td></tr><tr class="options_grid_color"><td class="label"><label class="translate" for="grid_color">Grid color:</label></td><td><table class="no-spaces"><tr><td><input class="value input input-static-color" id="grid_color"></td><td><button data-clear="grid_color" class="clear-button" style="display: inline-block"></button></td></tr></table></td></tr><tr class="options_border_width"><td class="label"><label class="translate" for="border_width">Border width:</label></td><td><input class="value input" id="border_width"></td></tr></table><table style="width: 340px" class="options-bar"><tr><td class="translate header" colspan="2" style="text-align: center">Bar settings</td></tr><tr class="options_barColor"><td><label class="translate" for="barColor">Fill color:</label></td><td><table class="no-spaces"><tr><td><input class="value input input-static-color" id="barColor"></td><td><button data-clear="barColor" class="clear-button" style="display: inline-block"></button></td></tr></table></td></tr><tr class="options_barLabels"><td><label class="translate" for="barLabels">Show labels:</label></td><td><select id="barLabels" class="value input"><option value="" class="translate">none</option><option value="topover" class="translate">top over</option><option value="topunder" class="translate">top under</option><option value="bottom" class="translate">bottom</option><option value="middle" class="translate">middle</option></select></td></tr><tr class="options_barWidth"><td><label class="translate" for="barWidth">Bars width:</label></td><td><input id="barWidth" class="value input"></td></tr><tr class="options_barFontSize"><td><label class="translate" for="barFontSize">Label font size:</label></td><td><input id="barFontSize" class="value input"></td></tr><tr class="options_barFontColor"><td><label class="translate" for="barFontColor">Label color:</label></td><td><table class="no-spaces"><tr><td><input class="value input input-static-color" id="barFontColor"></td><td><button data-clear="barFontColor" class="clear-button" style="display: inline-block"></button></td></tr></table></td></tr></table><table style="margin-left: 25px; width: 300px"><tr><td class="translate header" colspan="2" style="text-align: center">Title</td></tr><tr class="options_title"><td><label for="title" class="translate">Title:</label></td><td><input id="title" class="value input"></td></tr><tr class="options_titlePos"><td><label for="titlePos" class="translate">Title position:</label></td><td><select class="value input" id="titlePos"><option value="" class="translate">none</option><option value="top:35;left:65" class="translate">Top, left, inside</option><option value="top:35;right:5" class="translate">Top, right, inside</option><option value="top:35;left:50" class="translate">Top, center, inside</option><option value="top:50;left:65" class="translate">Middle, left, inside</option><option value="top:50;right:5" class="translate">Middle, right, inside</option><option value="bottom:5;left:65" class="translate">Bottom, left, inside</option><option value="bottom:5;right:5" class="translate">Bottom, right, inside</option><option value="bottom:5;left:50" class="translate">Bottom, center, inside</option><option value="top:5;right:-5" class="translate">Top, right, outside</option><option value="top:50;right:-5" class="translate">Middle, right, outside</option><option value="bottom:5;right:-5" class="translate">Bottom, right, outside</option><option value="bottom:-5;left:50" class="translate">Bottom, center, outside</option></select></td></tr><tr class="options_titleColor"><td><label class="translate" for="titleColor">Title color:</label></td><td><table class="no-spaces"><tr><td><input id="titleColor" class="value input input-static-color"></td><td><button data-clear="titleColor" class="clear-button" style="display: inline-block"></button></td></tr></table></td></tr><tr class="options_titleSize"><td><label for="titleSize" class="translate">Title size:</label></td><td><input id="titleSize" class="value input"></td></tr></table><table style="margin-left: 25px; width: 400px"><tr><td class="translate header" colspan="2" style="text-align: center">Options</td></tr><tr class="options_legend"><td><label class="translate" for="legend">Show legend:</label></td><td><select class="value input" id="legend"><option value="" class="translate">none</option><option value="nw" class="translate">Top, left</option><option value="ne" class="translate">Top, right</option><option value="sw" class="translate">Bottom, left</option><option value="se" class="translate">Bottom, right</option></select></td></tr><tr class="options_legColumns"><td><label class="translate" for="legColumns">Legend columns:</label></td><td><input type="number" class="value" id="legColumns"></td></tr><tr class="options_legBgOpacity"><td><label class="translate" for="legBgOpacity">Legend opacity (from 0 to 1):</label></td><td><input class="value input" id="legBgOpacity"></td></tr><tr class="options_legBg"><td><label class="translate" for="legBg">Legend background:</label></td><td><table class="no-spaces"><tr><td><input class="value input input-static-color" id="legBg" style="display: inline-block"></td><td><button data-clear="legBg" class="clear-button" style="display: inline-block"></button></td></tr></table></td></tr><tr class="options_hoverDetail"><td><label class="translate" for="hoverDetail">Hover details:</label></td><td><input type="checkbox" class="value" id="hoverDetail"></td></tr><tr class="options_timeFormat"><td><label class="translate" for="timeFormat">Time format:</label></td><td><select class="value input" id="timeFormat"><option value="" class="translate">Default</option><option value="%H:%M %d.%m">HH:MM dd.mm</option><option value="%H:%M %d.%m.">HH:MM dd.mm.</option><option value="%H:%M <br> %d.%m">HH:MM / dd.mm</option><option value="%H:%M <br> %d.%m.">HH:MM / dd.mm.</option><option value="%H:%M <br> %d.%m.%y">HH:MM / dd.mm.yy</option><option value="%H:%M:%S %d.%m.%y">HH:MM:SS dd.mm.yy</option><option value="%H:%M %d.%m.%y">HH:MM dd.mm.yy</option><option value="%I:%M:%S %x %p">HH:MM:SS mm/dd/yy am (US)</option><option value="%H:%M:%S %d/%m/%y">HH:MM:SS dd/mm/yy (UK)</option><option value="%H:%M:%S %m.%d.%y">HH:MM:SS mm.dd.yy</option><option value="%H:%M %a">HH:MM dow</option><option value="%H:%M:%S %a">HH:MM:SS dow</option><option value="%H:%M %m.%d">HH:MM mm.dd</option><option value="%H:%M:%S">HH:MM:SS</option><option value="%H:%M">HH:MM</option><option value="%d.%m">dd.mm</option><option value="%d.%m.">dd.mm.</option><option value="%m/%d">mm/dd</option><option value="%d">dd</option><option value="%m">mm</option><option value="%y">y</option><option value="%H">HH</option><option value="%M">MM</option><option value="%a">dow</option><option value="%d.%m.%y">dd.mm.yy</option></select></td></tr><tr class="options_smoothing"><td><label class="translate" for="smoothing">Smoothing:</label></td><td><input class="value input" id="smoothing"></td></tr><tr class="options_useComma"><td><label class="translate" for="useComma">Use comma:</label></td><td><input type="checkbox" class="value" id="useComma"></td></tr><tr class="options_zoom"><td><label class="translate" for="zoom">Enable zoom and pan:</label></td><td><input type="checkbox" class="value" id="zoom"></td></tr><tr class="options_noedit"><td><label class="translate" for="noedit">Hide edit button:</label></td><td><input type="checkbox" class="value" id="noedit"></td></tr><tr class="options_animation"><td><label class="translate" for="animation">Animation:</label></td><td><select class="value input" id="animation"><option value="0" class="translate">no</option><option value="300" class="translate">300ms</option><option value="500" class="translate">500ms</option><option value="1000" class="translate">1s</option><option value="2000" class="translate">2s</option><option value="3000" class="translate">3s</option><option value="5000" class="translate">5s</option><option value="10000" class="translate">10s</option></select></td></tr></table></div></div><div class="version">Version: 1.9.2</div></div><div style="height: 70px; display: flex; justify-content: space-around; align-items: center; margin-top: 4px; margin-bottom: 0"><label class="translate" for="link">Link</label> <textarea id="link" style="width: calc(100% - 260px); height: 55px; word-break: break-all; resize: none"></textarea> <button style="padding-left: 2px" id="open" class="translateB">Open</button> <button style="padding-left: 5px" id="updatePreview" class="translateB">update Preview</button></div></div><iframe style="width: calc(100% - 20px); bottom: 0; height: calc(100% - 380px); border: 1px solid #afafaf; border-radius: 2px" id="chart"></iframe><div id="dialog-select-member" style="display: none"></div><div id="dialog-line-options" style="display: none"><table></table></div><div id="dialog-new-preset" style="display: none"><table><tr id="dialog-new-preset-info-tr"><td><label for="dialog-new-preset-into" class="translate">Save into:</label></td><td><select id="dialog-new-preset-into" style="width: 100%;"></select></td></tr><tr id="dialog-new-preset-name-tr"><td><label for="dialog-new-preset-name" class="translate">Name:</label></td><td><input id="dialog-new-preset-name" style="width: 100%;"></td></tr></table></div><script type="text/javascript" src="js/edit.js"></script></body></html> |