Skip to content

Commit

Permalink
SQL 工单默认只展示最近30天的记录 #940
Browse files Browse the repository at this point in the history 
优化时间选择框的样式展示
  • Loading branch information
@hhyo
hhyo committed Oct 31, 2020
1 parent 47d1242 commit 7908a20
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 79 deletions.
92 changes: 49 additions & 43 deletions sql/templates/slowquery.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,11 @@
</select>
</div>
<div class="form-group">
<input id="reservation" type="text" readonly class="form-control"/>
<div id="reservation" class="form-control"
style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="fa fa-calendar"></i>&nbsp;
<span></span> <i class="fa fa-caret-down"></i>
</div>
</div>
</div>
</ul>
Expand Down Expand Up @@ -59,51 +63,53 @@
<!-- 选择框和切换控件 -->
<script>
// 初始化时间控件
$('#reservation').daterangepicker({
startDate: moment().startOf('day'),
endDate: moment(),
locale: {
"format": "YYYY-MM-DD",// 显示格式
"separator": " / ",// 两个日期之间的分割线
// 中文化
"applyLabel": "确定",
"cancelLabel": "取消",
"fromLabel": "开始",
"toLabel": "结束",
"customRangeLabel": "自定义",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六", "七月", "八月", "九月", "十月", "十一月", "十二月"],
"firstDay": 1
},
ranges: {
"今日": [moment().startOf('day'), moment()],
"昨日": [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
"最近7日": [moment().subtract('days', 6), moment()],
"最近30日": [moment().subtract('days', 29), moment()],
"本月": [moment().startOf("month"), moment().endOf("month")],
"上个月": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
$(function () {
let start = moment().startOf('day');
let end = moment();

function cb(start, end) {
$('#reservation span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
}
}, function (start, end, label) {
// 设置最小宽度，否则显示不全
}).css("min-width", "210px").next("i").click(function () {
// 对日期的i标签增加click事件，使其在鼠标点击时可以拉出日期选择
$(this).parent().find('input').click();
});

//时间变动保存
$('#reservation').on('apply.daterangepicker', function (ev, picker) {
sessionStorage.removeItem('SQLId');
var start_date = picker.startDate.format('YYYY-MM-DD');
var end_date = picker.endDate.format('YYYY-MM-DD');
sessionStorage.setItem('start_date', start_date);
sessionStorage.setItem('end_date', end_date);
var slowsql_active_li_id = sessionStorage.getItem('slowsql_active_li_id');
if (slowsql_active_li_id === 'slowsql_tab') {
slowquery_review()
} else if (slowsql_active_li_id === 'slowsqlinfo_tab') {
slowquery_review_history()
$('#reservation').daterangepicker({
startDate: start,
endDate: end,
locale: {
format: "YYYY-MM-DD",// 显示格式
separator: " / ",// 两个日期之间的分割线
// 中文化
applyLabel: "确定",
cancelLabel: "取消",
fromLabel: "开始",
toLabel: "结束",
customRangeLabel: "自定义",
daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
monthNames: ["一月", "二月", "三月", "四月", "五月", "六", "七月", "八月", "九月", "十月", "十一月", "十二月"],
firstDay: 1
},
ranges: {
"今日": [moment().startOf('day'), moment()],
"昨日": [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
"最近7日": [moment().subtract('days', 6), moment()],
"最近30日": [moment().subtract('days', 29), moment()],
"本月": [moment().startOf("month"), moment().endOf("month")],
"上个月": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
}
}, cb).on('apply.daterangepicker', function (ev, picker) {
sessionStorage.removeItem('SQLId');
var start_date = picker.startDate.format('YYYY-MM-DD');
var end_date = picker.endDate.format('YYYY-MM-DD');
sessionStorage.setItem('start_date', start_date);
sessionStorage.setItem('end_date', end_date);
var slowsql_active_li_id = sessionStorage.getItem('slowsql_active_li_id');
if (slowsql_active_li_id === 'slowsql_tab') {
slowquery_review()
} else if (slowsql_active_li_id === 'slowsqlinfo_tab') {
slowquery_review_history()

}
}
});
cb(start, end);
});

//实例变动自动获取数据库
Expand Down
92 changes: 56 additions & 36 deletions sql/templates/sqlworkflow.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,11 @@
</select>
</div>
<div class='form-group'>
<input type="hidden" id="start_date">
<input type="hidden" id="end_date">
<input type="text" id="reservation" value="请选择发起时间" readonly class="form-control "/>
<div id="reservation" class="form-control"
style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="fa fa-calendar"></i>&nbsp;
<span></span> <i class="fa fa-caret-down"></i>
</div>
</div>
<div class="form-group ">
<button id="btn_add" type="button" class="btn btn-default"
Expand Down Expand Up @@ -78,39 +80,48 @@ <h4 class="modal-title text-danger">工单日志</h4>
<script src="{% static 'bootstrap-table/js/tableExport.min.js' %}"></script>
<script>
// 初始化时间控件
$('#reservation').daterangepicker({
startDate: moment().startOf('day'),
endDate: moment().startOf('day'),
locale: {
format: "YYYY-MM-DD",// 显示格式
separator: " / ",// 两个日期之间的分割线
// 中文化
applyLabel: "确定",
cancelLabel: "清空",
fromLabel: "开始",
toLabel: "结束",
customRangeLabel: "自定义",
daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
monthNames: ["一月", "二月", "三月", "四月", "五月", "六", "七月", "八月", "九月", "十月", "十一月", "十二月"],
firstDay: 1
},
ranges: {
"今日": [moment().startOf('day'), moment()],
"昨日": [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
"最近7日": [moment().subtract('days', 6), moment()],
"最近30日": [moment().subtract('days', 29), moment()],
"本月": [moment().startOf("month"), moment().endOf("month")],
"上个月": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
$(function () {
let start = moment().subtract(29, 'days');
let end = moment();

function cb(start, end) {
if (start.isValid() && end.isValid()) {
$('#reservation span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
} else {
$('#reservation span').html('全部数据');
}
}
}).css("min-width", "185px").next("i").click(function () {
// 对日期的i标签增加click事件，使其在鼠标点击时可以拉出日期选择
$(this).parent().find('input').click();
});

$('#reservation').on('apply.daterangepicker', function (ev, picker) {
$("#start_date").val(picker.startDate.format('YYYY-MM-DD'));
$("#end_date").val(picker.endDate.format('YYYY-MM-DD'));
get_workflow_list()
$('#reservation').daterangepicker({
startDate: start,
endDate: end,
showDropdowns: true,
locale: {
format: "YYYY-MM-DD",// 显示格式
separator: " / ",// 两个日期之间的分割线
// 中文化
applyLabel: "确定",
cancelLabel: "取消",
fromLabel: "开始",
toLabel: "结束",
customRangeLabel: "自定义",
daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
monthNames: ["一月", "二月", "三月", "四月", "五月", "六", "七月", "八月", "九月", "十月", "十一月", "十二月"],
firstDay: 1
},
ranges: {
"全部": [null, null],
"今日": [moment().startOf('day'), moment()],
"昨日": [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
"最近7日": [moment().subtract('days', 6), moment()],
"最近30日": [moment().subtract('days', 29), moment()],
"本月": [moment().startOf("month"), moment().endOf("month")],
"上个月": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
}
}, cb).on('apply.daterangepicker', function (ev, picker) {
get_workflow_list()
});
cb(start, end);
});

</script>
Expand Down Expand Up @@ -153,14 +164,23 @@ <h4 class="modal-title text-danger">工单日志</h4>
//请求服务数据时所传参数
queryParams:
function (params) {
let start_date = $("#reservation").data('daterangepicker').startDate;
let end_date = $("#reservation").data('daterangepicker').endDate;
if (start_date.isValid() && end_date.isValid()) {
start_date = start_date.format('YYYY-MM-DD');
end_date = end_date.format('YYYY-MM-DD')
} else {
start_date = '';
end_date = ''
}
return {
limit: params.limit,
offset: params.offset,
navStatus: $("#navStatus").val(),
instance_id: $("#instance_id").val(),
group_id: $("#group_id").val(),
start_date: $("#start_date").val(),
end_date: $("#end_date").val(),
start_date: start_date,
end_date: end_date,
search: params.search
}
},
Expand Down

0 comments on commit 7908a20

Please sign in to comment.