westdc-zf1/application/admin/views/scripts/data/visual-add.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('同步GEONETWORK元数据</a>');
	$this->breadcrumb()->setSeparator(' > ');
?>
<div class="row">
    <div class="span3">
    	<?= $this->partial('data/left.phtml'); ?>
    </div>
    
    <div class="span9">
    	<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="visual_type" id="optionsRadios1" value="line" <?= (isset($this->info['visual_type']) && $this->info['visual_type']=='line') || empty($this->info['visual_type']) ? "checked":"" ?>>
                        折线图
                    </label>
                    <label class="radio inline">
                        <input type="radio" name="visual_type" id="optionsRadios2" value="column"
                            <?= isset($this->info['visual_type']) && $this->info['visual_type'] == 'column' ? 'checked="checked"':"" ?>>
                        柱状图
                    </label>
                </div>
            </div>

            <div class="control-group">
                <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">时间字段模式</label>
                <div class="controls" id="field-time-model">
                    <label class="radio inline">
                        <input type="radio" name="visual_timefield_model" id="model-single" value="single" <?= (isset($this->info['visual_timefield_model']) && $this->info['visual_timefield_model']=='single') || !isset($this->info['visual_timefield_model']) || empty($this->info['visual_timefield_model']) ? 'checked="checked"':'' ?>  /> 单字段
                    </label>
                    <label class="radio inline">
                        <input type="radio"  name="visual_timefield_model" id="model-multiple" value="multiple" <?= isset($this->info['visual_timefield_model']) && $this->info['visual_timefield_model']=='multiple' ? 'checked="checked"':'' ?> /> 多字段拼接
                    </label>
                    <label class="radio inline">
                        <input type="radio"  name="visual_timefield_model" id="model-custom" value="custom" <?= isset($this->info['visual_timefield_model']) && $this->info['visual_timefield_model']=='custom' ? 'checked="checked"':'' ?>/> 自定义
                    </label>
                    <p class="help-block">时间字段支持单字段或者“年月日“字段拼接模式</p>
                </div>
            </div>

            <div class="control-group time-field-select">
                <label class="control-label">时间字段</label>
                <!-- 单字段 -->
                <div class="controls" id="field-time" style="<?= isset($this->info['visual_timefield_model']) && $this->info['visual_timefield_model']!='single' && !empty($this->info['visual_timefield_model']) ? 'display:none':'' ?>">

                </div>
                <!-- 多字段 -->
                <div class="controls" id="field-time-multiple" style="<?= (isset($this->info['visual_timefield_model']) && $this->info['visual_timefield_model']!='multiple') || empty($this->info['visual_timefield_model']) ? 'display:none':'' ?>">
                    <input type="text" name="visual_timefield_year" placeholder="年字段" value="<?= isset($this->info['visual_timefield_year']) ? $this->info['visual_timefield_year']:'' ?>" /> -
                    <input type="text" name="visual_timefield_month" placeholder="月字段" value="<?= isset($this->info['visual_timefield_month']) ? $this->info['visual_timefield_month']:'' ?>" /> -
                    <input type="text" name="visual_timefield_day" placeholder="日字段" value="<?= isset($this->info['visual_timefield_day']) ? $this->info['visual_timefield_day']:'' ?>" />
                    <p class="help-block">请填写正确的字段名称，如果没有对应字段请留空(<a href="javascript:void(0);" id="open-field-helper">查看字段提示</a>)</p>
                </div>
                <!-- 自定义 -->
                <div class="controls" id="field-time-custom" style="<?= (isset($this->info['visual_timefield_model']) && $this->info['visual_timefield_model']!='custom') || empty($this->info['visual_timefield_model'])  ? 'display:none':'' ?>">
                    <input type="text" name="visual_timefield_custom" placeholder="时间字段读取SQL" class="input-block-level" value="<?= isset($this->info['visual_timefield_custom']) ? $this->info['visual_timefield_custom']:'' ?>" />
                    <p class="help-block">例如: times , (year||'-'||month||'-1')::timestamp without time zone ,不需要在最外层加括号或者双引号</p>
                </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，程序将自动从这个SQL</p>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="inputValuefilter">过滤值</label>
                <div class="controls">
                    <input type="text" name="visual_valuefilter" class="" id="inputValuefilter" value="<?= !isset($this->info['visual_valuefilter']) ? "":$this->info['visual_valuefilter']?>" />
                    <p class="help-block">不予显示的值，仅数字</p>
                </div>
            </div>

            <?php if(!empty($this->info['vars'])) { ?>
            <?php $vars = array() ?>
            <?php $encoder = new \Westdc\Visual\VariableEncoder; ?>
            <?php $vars = $encoder->decode($this->info['vars']);?>
            <?php foreach($vars as $k=>$v) { ?>
            <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" name="var[<?=$k?>][field]" value="<?= $v['field'] ?>" readonly />
                    显示名<input type="text" name="var[<?= $k ?>][name]" value="<?= $v['name'] ?>">
                </div>
            </div>
            <?php } ?>
            <?php } ?>

            <div class="control-group" id="last-control-group">
                <div class="controls">
                	<input type="hidden" name="submit" value="1" />
                	<button type="button" class="btn btn-defualt" id="addVariable">添加要素</button>
                    <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 = []

        for(i in field_data)
        {
            fieldHtml.push('<option value="'+ fieldData[i] +'">'+ fieldData[i] +'</option>');
        }

        varHtml = '<select name="var['+current_count+'][field]">' + fieldHtml.join('') + '</select>';
        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
        +  ' 显示名 <input type="text" placeholder="Variable" class="input-small" name="var['+current_count+'][name]">'
        +  '</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'])) { ?>
        $.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(null == fieldData || $('#data-table').val() == '0')
            {
                alert('请先选择数据表和时间字段');
                return false;
            }

            if($('#var-group').length > 0)
                $('#var-group').append(makeVarSelectHtml(fieldData));
            else
                $('#last-control-group').prepend(makeVarSelectHtml(fieldData));
        });

        $('#model-single').change(function(){
            if($(this).checked = "checked")
            {
                $('#field-time').show();
                $('#field-time-multiple').hide();
                $('#field-time-custom').hide();
            }
        });

        $('#model-multiple').change(function(){
            if($(this).checked = "checked")
            {
                $('#field-time').hide();
                $('#field-time-multiple').show();
                $('#field-time-custom').hide();
            }
        });

        $('#model-custom').change(function(){
            if($(this).checked = "checked")
            {
                $('#field-time').hide();
                $('#field-time-multiple').hide();
                $('#field-time-custom').show();
            }
        });

        $('#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>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>