276 lines
13 KiB
PHTML
276 lines
13 KiB
PHTML
<?php
|
||
$this->headTitle($this->config->title->site);
|
||
$this->headTitle('后台管理');
|
||
$this->headTitle()->setSeparator(' - ');
|
||
$this->breadcrumb('<a href="/">首页</a>');
|
||
$this->breadcrumb('<a href="/admin">后台首页</a>');
|
||
$this->breadcrumb('<a href="/admin/data">数据管理</a>');
|
||
$this->breadcrumb()->setSeparator(' > ');
|
||
?>
|
||
<div class="row-fluid">
|
||
<div class="span2">
|
||
<?= $this->partial('data/left.phtml'); ?>
|
||
</div>
|
||
|
||
<div class="span10">
|
||
<h3>添加可视化要素</h3>
|
||
<hr />
|
||
<?php if(!empty($this->error)) {?>
|
||
<div class="alert alert-error">
|
||
<?= $this->error ?>
|
||
</div>
|
||
<?php }?>
|
||
|
||
<form class="form-horizontal" method="post" action="">
|
||
|
||
<div class="control-group">
|
||
<label class="control-label" for="inputUUID">UUID</label>
|
||
<div class="controls">
|
||
<input type="text" id="inputUUID" placeholder="UUID" value="<?= $this->data['uuid'] ?>" class="input-block-level" name="uuid">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label class="control-label">状态</label>
|
||
<div class="controls">
|
||
<label class="radio inline">
|
||
<?php $checked = function(){
|
||
if(isset($this->info['status']))
|
||
{
|
||
if($this->info['status'] == 1)
|
||
{
|
||
return 'checked="checked"';
|
||
}
|
||
}else{
|
||
return 'checked="checked"';
|
||
}
|
||
}; ?>
|
||
<input type="radio" name="status" id="optionsRadios1" value="1" <?= $checked() ?>>
|
||
启用
|
||
</label>
|
||
<label class="radio inline">
|
||
<input type="radio" name="status" id="optionsRadios2" value="0"
|
||
<?= isset($this->info['status']) && $this->info['status'] == 0 ? 'checked="checked"':"" ?>>
|
||
禁用
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label class="control-label">绘图插件</label>
|
||
<div class="controls">
|
||
<label class="radio inline">
|
||
<input type="radio" name="chartjs" id="optionsRadios1" value="highcharts" <?= (isset($this->info['chartjs']) && $this->info['chartjs']=='highcharts') ? "checked":"" ?>>
|
||
Highcharts（适合分类数据展示和三维展示）
|
||
</label>
|
||
<label class="radio inline">
|
||
<input type="radio" name="chartjs" id="optionsRadios2" value="highstock"
|
||
<?= (isset($this->info['chartjs']) && $this->info['chartjs'] == 'highstock') || empty($this->info['chartjs']) ? 'checked="checked"':"" ?>>
|
||
Highstock（适合时间序列数据可视化）
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label class="control-label">默认绘制类型</label>
|
||
<div class="controls">
|
||
<label class="radio inline">
|
||
<input type="radio" name="charttype" id="optionsRadios1" value="line" <?= (isset($this->info['charttype']) && $this->info['charttype']=='line') || empty($this->info['charttype']) ? "checked":"" ?>>
|
||
折线图
|
||
</label>
|
||
<label class="radio inline">
|
||
<input type="radio" name="charttype" id="optionsRadios2" value="column"
|
||
<?= isset($this->info['charttype']) && $this->info['charttype'] == 'column' ? 'checked="checked"':"" ?>>
|
||
柱状图
|
||
</label>
|
||
<label class="radio inline">
|
||
<input type="radio" name="charttype" id="optionsRadios3" value="spline"
|
||
<?= isset($this->info['charttype']) && $this->info['charttype'] == 'spline' ? 'checked="checked"':"" ?>>
|
||
样条线图
|
||
</label>
|
||
<label class="radio inline">
|
||
<input type="radio" name="charttype" id="optionsRadios4" value="area"
|
||
<?= isset($this->info['charttype']) && $this->info['charttype'] == 'area' ? 'checked="checked"':"" ?>>
|
||
面积图
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group" style="display: none;">
|
||
<label class="control-label">数据表</label>
|
||
<div class="controls">
|
||
<select name="visual_datatable" id="data-table">
|
||
<option value="0">请选择</option>
|
||
<?php foreach($this->visualTable as $k=>$v){ ?>
|
||
<?php if(isset($this->info['visual_datatable']) && $this->info['visual_datatable']==$v){ ?>
|
||
<option value="<?= $v ?>" selected="selected"><?= $v ?></option>
|
||
<?php }else{ ?>
|
||
<option value="<?= $v ?>"><?= $v ?></option>
|
||
<?php } ?>
|
||
<?php } ?>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label class="control-label" for="inputData">数据读取SQL或表名</label>
|
||
<div class="controls">
|
||
<textarea name="data" rows="4" class="input-block-level" id="inputData"><?= !isset($this->info['data']) ? "":$this->info['data']?></textarea>
|
||
<p class="help-block">如果设置了某个字段的读取sql会自动忽略此项设置</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group time-field-select">
|
||
<label class="control-label">X轴取值</label>
|
||
<div class="controls">
|
||
<input type="text" name="xaxis" placeholder="时间字段读取SQL" class="input-block-level" value="<?= isset($this->info['xaxis']) ? $this->info['xaxis']:'' ?>" />
|
||
<p class="help-block">例如: utctime, times , (year||'-'||month||'-1')::timestamp without time zone ,不需要在最外层加括号或者双引号。如果是制作分类图，则X轴必须是category，请在数据读取SQL中用将所需字段命名为category。</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<?php if(!empty($this->info['variable'])) { ?>
|
||
<?php $vars = array() ?>
|
||
<?php $encoder = new \Westdc\Visual\VariableEncoder; ?>
|
||
<?php $vars = $encoder->decode($this->info['variable']);?>
|
||
<?php foreach($vars as $index=>$value) { ?>
|
||
<div class="control-group var-group">
|
||
<label class="control-label" for="inputVariable">可视化要素 <small><a href="javascript:void(0);" onclick="delVar(this)">删除</a></small></label>
|
||
<div class="controls">
|
||
<input type="text" placeholder="字段名" class="" name="var[<?= $index ?>][name]" value="<?= $value['name'] ?>">
|
||
<input type="text" placeholder="显示名" class="" name="var[<?= $index ?>][title]" value="<?= $value['title'] ?>">
|
||
<input type="text" placeholder="字段sql" class="" name="var[<?= $index ?>][sql]" value="<?= (isset($value['sql']))?$value['sql']:'' ?>">
|
||
<input type="text" placeholder="查询条件" name="var[<?= $index ?>][condition]" value="<?= isset($value['condition']) && is_string($value['condition']) ? $value['condition']:"" ?><?= isset($value['condition']) && is_array($value['condition']) ? join(";",$value['condition']):"" ?>">
|
||
</div>
|
||
</div>
|
||
<?php } ?>
|
||
<?php } ?>
|
||
|
||
|
||
<div class="control-group" id="last-control-group">
|
||
<div class="controls">
|
||
<button type="button" class="btn btn-defualt" id="addVariable">添加要素</button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="control-group" id="last-control-group">
|
||
<div class="controls">
|
||
<input type="hidden" name="submit" value="1" />
|
||
<button type="submit" class="btn btn-primary">提交</button>
|
||
</div>
|
||
</div>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript">
|
||
var fieldData,fieldHtml,varHtml,current_count;
|
||
|
||
function makeVarSelectHtml(field_data){
|
||
|
||
current_count = $('.var-group').length;
|
||
|
||
fieldHtml = []
|
||
|
||
varHtml = '<input type="text" placeholder="字段名" class="" name="var['+current_count+'][name]">'
|
||
+ '<input type="text" placeholder="显示名" class="" name="var['+current_count+'][title]">'
|
||
+ '<input type="text" placeholder="字段sql" class="" name="var['+current_count+'][sql]">'
|
||
+ '<input type="text" placeholder="查询条件" class="" name="var['+current_count+'][condition]">';
|
||
|
||
html = '<div class="control-group var-group">'
|
||
+ '<label class="control-label" for="inputVariable">可视化要素 <small><a href="javascript:void(0);" onclick="delVar(this)">删除</a></small></label>'
|
||
+ '<div class="controls">'
|
||
+ varHtml
|
||
+ '</div>'
|
||
+'</div>';
|
||
return html;
|
||
}
|
||
|
||
function delVar(dom){
|
||
$(dom).parent().parent().parent('.control-group').remove();
|
||
};
|
||
|
||
$(document).ready(function(){
|
||
$('#data-table').change(function(){
|
||
$('.var-group').remove();
|
||
$.ajax({
|
||
type:"POST",
|
||
url:'',
|
||
data:'tablename='+ $(this).val(),
|
||
success:function(data){
|
||
fieldData = data;
|
||
html = [];
|
||
for(i in data)
|
||
{
|
||
html.push('<option value="' + data[i] + '">' + data[i] + '</option>');
|
||
}
|
||
html = '<select name="visual_timefield">' + html.join('')+'</select>';
|
||
$('#field-time').html(html);
|
||
},
|
||
beforeSend:function(){
|
||
$('#field-time').html('加载中');
|
||
}
|
||
});
|
||
});
|
||
<?php if(!empty($this->info['ts_created']) && !empty($this->info['visual_datatable'])) { ?>
|
||
$.ajax({
|
||
type:"POST",
|
||
url:'',
|
||
data:'tablename=<?= $this->info['visual_datatable'] ?>',
|
||
success:function(data){
|
||
fieldData = data;
|
||
html = [];
|
||
for(i in data)
|
||
{
|
||
if('<?= $this->info['visual_timefield'] ?>' == data[i])
|
||
html.push('<option value="' + data[i] + '" selected="selected">' + data[i] + '</option>');
|
||
else
|
||
html.push('<option value="' + data[i] + '">' + data[i] + '</option>');
|
||
}
|
||
html = '<select name="visual_timefield">' + html.join('')+'</select>';
|
||
$('#field-time').html(html);
|
||
},
|
||
beforeSend:function(){
|
||
$('#field-time').html('加载中');
|
||
}
|
||
});
|
||
<?php } ?>
|
||
|
||
$('#addVariable').click(function(e) {
|
||
if($('#var-group').length > 0)
|
||
$('#var-group').append(makeVarSelectHtml(fieldData));
|
||
else
|
||
$('#last-control-group').prepend(makeVarSelectHtml(fieldData));
|
||
});
|
||
|
||
$('#open-field-helper').click(function(){
|
||
if(null == fieldData || $('#data-table').val() == '0')
|
||
{
|
||
alert('请先选择数据表和时间字段');
|
||
return false;
|
||
}
|
||
|
||
$('.modal-body p').html(fieldData.join(','));
|
||
|
||
$('#modal-show-field').modal('show');
|
||
|
||
});
|
||
|
||
|
||
});
|
||
</script>
|
||
<div id="modal-show-field" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<h3 id="myModalLabel">字段列表</h3>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p></p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
|
||
</div>
|
||
</div>
|