<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="../public/plugins/bootstrap-5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="../public/plugins/bootstrap-icons-1.9.1/bootstrap-icons.css" rel="stylesheet" />
<link href="../public/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
</head>
<body class="bg-light">
<div class="container-fluid">
<!-- content ------------------------------------- -->
<div class="row">
<div class="col-12">
<div class="card mt-2">
<div class="card-header d-flex justify-content-between align-items-center">
<div class="d-flex justify-content-center align-items-center">
<i class="bi bi-search"></i>
<span>条件筛选</span>
</div>
<button type="button" class="" style="border: none" data-card-toggle="collapse">
<i class="bi bi-dash"></i>
</button>
</div>
<div class="card-body collapse show" id="collapseOne">
<form class="row g-3">
<div class="col-12 col-lg-3">
<div class="input-group" id="dateRange">
<span class="input-group-text" id="basic-addon1">起止日期</span>
<input type="text" required class="form-control" id="startDate" value="" />
<input type="text" required class="form-control" id="endDate" value="" />
</div>
</div>
<div class="col-6 col-lg-2">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">日期</span>
<input type="text" required class="form-control" id="date" />
</div>
</div>
<div class="col-auto">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">tex12</span>
<select class="form-select" required>
<option selected value="">---</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div class="col-auto">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">tex13</span>
<select class="form-select" required>
<option selected value="">---</option>
<option>all</option>
<option>day</option>
<option>night</option>
</select>
</div>
</div>
<div class="col-auto">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-9">
<div class="card" id="main" style="height: 500px"></div>
</div>
<div class="col-3">
<div class="card">
<div class="card-header">
<button class="btn btn-primary align-self-end" type="button">Export</button>
</div>
<div class="card-body">
<table class="table table-bordered">
<thead>
<tr class="text-center">
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../public/plugins/bootstrap-5.1.3/js/bootstrap.bundle.js"></script>
<script src="../public/plugins/jquery-1.9.1.js"></script>
<script src="../public/plugins/echarts.min.js"></script>
<script src="../public/plugins/jquery-ui/jquery-ui.min.js"></script>
<script>
var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
var option;
option = {
darkMode: true,
// textStyle: { color: "#fff" },
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
grid: {
left: "3%",
right: "3%",
bottom: "3%",
containLabel: true,
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
itemStyle: { color: "#FF8000" },
},
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
itemStyle: { color: "#FFE500" },
},
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
itemStyle: { color: "#FFDFBF" },
},
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
itemStyle: { color: "#C0C0EC" },
},
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
itemStyle: { color: "#DFD9A7" },
},
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
itemStyle: { color: "#BFB660" },
},
],
};
option && myChart.setOption(option);
window.onresize = function () {
myChart.resize();
};
</script>
<script>
$.widget.bridge("uibutton", $.ui.button);
jQuery(function ($) {
$.datepicker.regional["zh-CN"] = {
closeText: "关闭",
prevText: "<上月",
nextText: "下月>",
currentText: "今天",
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
weekHeader: "周",
dateFormat: "yy-mm-dd",
firstDay: 1,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: "年",
};
$.datepicker.setDefaults($.datepicker.regional["zh-CN"]);
});
$(function () {
$("#startDate").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: "yy-mm-dd",
onClose: function (selectedDate) {
$("#endDate").datepicker("option", "minDate", selectedDate);
},
});
$("#endDate").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: "yy-mm-dd",
onClose: function (selectedDate) {
$("#startDate").datepicker("option", "maxDate", selectedDate);
},
});
$("#date").datepicker();
});
</script>
</html>
