132 lines
5.8 KiB
HTML
132 lines
5.8 KiB
HTML
<style>
|
||
/* 保持 form-inline 中子元素水平排列 */
|
||
#chart-filter-table > div {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
/* 城市选择的容器，定位弹层基准 */
|
||
#select_city_wrapper {
|
||
position: relative; /* 弹层相对定位 */
|
||
width: 250px;
|
||
display: inline-block;
|
||
}
|
||
|
||
/* city-picker 弹层，确保宽度和输入框一致 */
|
||
.city-picker-dropdown {
|
||
position: absolute !important;
|
||
top: 100% !important; /* 紧贴输入框下方 */
|
||
left: 0 !important;
|
||
width: 100% !important;
|
||
max-height: 400px !important;
|
||
overflow: auto !important;
|
||
background: #fff !important;
|
||
border: 1px solid #ccc !important;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
|
||
z-index: 9999 !important;
|
||
}
|
||
</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，改成一个div包裹 -->
|
||
<div id="select_city_wrapper">
|
||
<input style="padding-left: 5px;" 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" style="width: 200px;">
|
||
<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" style="width: 200px;">
|
||
<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" style="width: 200px;">
|
||
<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>
|
||
|
||
|