130 lines
5.3 KiB
HTML
130 lines
5.3 KiB
HTML
<style>
|
||
/* 容器用flex布局 */
|
||
#chart-filter-table {
|
||
display: flex;
|
||
align-items: center; /* 垂直居中 */
|
||
gap: 10px; /* 间距 */
|
||
flex-wrap: wrap; /* 宽度不够时自动换行 */
|
||
}
|
||
|
||
/* 每个表单元素的容器 */
|
||
#chart-filter-table > div {
|
||
flex-shrink: 0; /* 不自动缩小 */
|
||
}
|
||
|
||
/* 输入框和选择框固定宽度 */
|
||
#select_city {
|
||
width: 300px;
|
||
}
|
||
|
||
#source, #item_id, #daterange-table {
|
||
width: 200px;
|
||
}
|
||
|
||
/* 按钮高度与输入框对齐 */
|
||
#filter-btn-table {
|
||
height: 34px;
|
||
}
|
||
</style>
|
||
|
||
|
||
<div class="panel panel-default panel-intro">
|
||
<div class="panel-heading">
|
||
<ul class="nav nav-tabs">
|
||
<li class="active"><a data-val="first" href="#first" data-toggle="tab">统计图表</a></li>
|
||
<li><a href="#second" data-val="second" data-toggle="tab">统计列表</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<div class="panel-body">
|
||
<div id="myTabContent" class="tab-content">
|
||
<div class="tab-pane fade active in" id="first">
|
||
<section class="connectedSortable">
|
||
|
||
<div class="nav-tabs-custom charts-custom">
|
||
<!-- Tabs within a box -->
|
||
<ul class="nav nav-tabs pull-right">
|
||
<li class="active"><a href="#bar-chart" data-toggle="tab">柱状图</a></li>
|
||
<!-- <li><a href="#pie-chart" data-toggle="tab">饼图</a></li>-->
|
||
|
||
<li class="pull-left header"><i class="fa fa-inbox"></i> 服务项目</li>
|
||
</ul>
|
||
|
||
<div>
|
||
|
||
<div class="form-inline" id="chart-filter" style="margin-top:20px;margin-bottom: 30px;">
|
||
<!-- 时间范围 -->
|
||
<div class="form-group" style="margin-left: 15px;">
|
||
<input type="text" class="form-control datetimerange" value = "{$default_daterange}" data-locale='{"format":"YYYY-MM-DD"}' placeholder="指定日期" name="filter[daterange]" id="daterange" autocomplete="off" style="width: 200px;">
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<!-- 查询按钮 -->
|
||
<button class="btn btn-default" id="filter-btn" style="margin-left: 15px;">查询</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="tab-content no-padding">
|
||
<div class="chart tab-pane active" id="bar-chart" style="width: 100%; height: 500px;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
</div>
|
||
<div class="tab-pane fade" id="second">
|
||
<div id="chart-filter-table" class="form-inline">
|
||
|
||
<!-- 城市选择去掉 input-group，改用 form-group -->
|
||
<div id="select_city_wrapper" class="form-group">
|
||
<input id="select_city" class="form-control" data-toggle="city-picker" type="text" placeholder="选择城市" />
|
||
<input id="select_area_id" type="hidden" class="operate" name="area_id" />
|
||
</div>
|
||
|
||
<!-- 渠道选择 -->
|
||
<div class="input-group">
|
||
<select id="source" data-live-search="true" title="订单渠道" name="filter[source]" class="form-control selectpicker show-tick">
|
||
<option value="">--订单渠道--</option>
|
||
{foreach $sources as $item}
|
||
<option value="{$item['id']}">【{$item['ptitle']}】{$item['title']}</option>
|
||
{/foreach}
|
||
</select>
|
||
</div>
|
||
|
||
<!-- 项目组选择 -->
|
||
<div class="input-group">
|
||
<select id="item_id" data-live-search="true" title="项目组" name="filter[item_id]" class="form-control selectpicker show-tick">
|
||
<option value="">--项目组--</option>
|
||
{foreach $items as $item}
|
||
<option value="{$item['id']}">{$item['title']}</option>
|
||
{/foreach}
|
||
</select>
|
||
</div>
|
||
|
||
<!-- 日期选择 -->
|
||
<div class="input-group">
|
||
<input type="text" class="form-control datetimerange"
|
||
data-locale='{"format":"YYYY-MM-DD"}'
|
||
value="{$default_daterange}"
|
||
placeholder="指定日期"
|
||
name="filter[daterange]"
|
||
id="daterange-table"
|
||
autocomplete="off">
|
||
</div>
|
||
|
||
<!-- 查询按钮 -->
|
||
<div class="input-group">
|
||
<button class="btn btn-default" id="filter-btn-table">查询</button>
|
||
</div>
|
||
|
||
</div>
|
||
<table id="table2" class="table table-striped table-bordered table-hover">
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|