lukeyan
2 years ago
parent
d2e931b2ba
commit
2401af74fb
|
After Width: | Height: | Size: 3.7 KiB |
@ -0,0 +1,166 @@
|
|||||||
|
<!-- 警情通报 -->
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 查询 -->
|
||||||
|
<div class="item_search">
|
||||||
|
<el-form :model="search" class="search_form">
|
||||||
|
<el-form-item label="通报时间">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="search.course_time"
|
||||||
|
type="datetimerange"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="关键字">
|
||||||
|
<el-input v-model="search.word" placeholder="请选择关键词"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button icon="el-icon-search" @click="search_data">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh-right" @click="reset"
|
||||||
|
>重置</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
search: {
|
||||||
|
search_time: [this.get_today(), this.get_tomorrow()],
|
||||||
|
word: "",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 转换时间格式
|
||||||
|
dateConversion(value) {
|
||||||
|
let date = new Date(value);
|
||||||
|
let y = date.getFullYear();
|
||||||
|
let m = date.getMonth() + 1;
|
||||||
|
m = m < 10 ? "0" + m : m;
|
||||||
|
let d = date.getDate();
|
||||||
|
d = d < 10 ? "0" + d : d;
|
||||||
|
let h = date.getHours();
|
||||||
|
h = h < 10 ? "0" + h : h;
|
||||||
|
let M = date.getMinutes();
|
||||||
|
M = M < 10 ? "0" + M : M;
|
||||||
|
let s = date.getSeconds();
|
||||||
|
s = s < 10 ? "0" + s : s;
|
||||||
|
let dateTime = y + "-" + m + "-" + d + " " + h + ":" + M + ":" + s;
|
||||||
|
return dateTime;
|
||||||
|
},
|
||||||
|
// 获取当前时间
|
||||||
|
get_today() {
|
||||||
|
let date = new Date();
|
||||||
|
let y = date.getFullYear();
|
||||||
|
let m = date.getMonth() + 1;
|
||||||
|
m = m < 10 ? "0" + m : m;
|
||||||
|
let d = date.getDate();
|
||||||
|
d = d < 10 ? "0" + d : d;
|
||||||
|
let dateTime =
|
||||||
|
y + "-" + m + "-" + d + " " + "00" + ":" + "00" + ":" + "00";
|
||||||
|
return dateTime;
|
||||||
|
},
|
||||||
|
// 获取明天时间
|
||||||
|
get_tomorrow() {
|
||||||
|
let date = new Date();
|
||||||
|
let y = date.getFullYear();
|
||||||
|
let m = date.getMonth() + 1;
|
||||||
|
m = m < 10 ? "0" + m : m;
|
||||||
|
let d = date.getDate() + 1;
|
||||||
|
d = d < 10 ? "0" + d : d;
|
||||||
|
let dateTime =
|
||||||
|
y + "-" + m + "-" + d + " " + "00" + ":" + "00" + ":" + "00";
|
||||||
|
return dateTime;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.item_search {
|
||||||
|
width: 94vw;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
// /deep/.el-range-input {
|
||||||
|
// background: rgba(0, 0, 0, 0);
|
||||||
|
// color: aliceblue;
|
||||||
|
// }
|
||||||
|
/deep/.el-form {
|
||||||
|
display: flex;
|
||||||
|
.el-form-item {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 0.5vw;
|
||||||
|
.el-date-editor--daterange.el-input__inner {
|
||||||
|
width: 440px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-form-item__label {
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-form-item__content {
|
||||||
|
.el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange {
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
border: 0.1px solid #28847e;
|
||||||
|
}
|
||||||
|
.el-input__inner {
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
border: 0.1px solid #28847e;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 查询框点击颜色变化 */
|
||||||
|
.el-input__inner:focus,
|
||||||
|
.el-input__inner:hover {
|
||||||
|
border-color: #2a968f;
|
||||||
|
}
|
||||||
|
.el-range-input {
|
||||||
|
color: #fff;
|
||||||
|
background: #283436;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-button {
|
||||||
|
border: 0.1px solid #28847e;
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -100%;
|
||||||
|
left: -50%;
|
||||||
|
width: 150%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 0 4px 1px #fff;
|
||||||
|
transform: rotateZ(-45deg);
|
||||||
|
}
|
||||||
|
&:hover::before {
|
||||||
|
transition: 0.7s;
|
||||||
|
top: 200%;
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-button:focus,
|
||||||
|
.el-button:hover {
|
||||||
|
color: #34e1b3;
|
||||||
|
background: #4d8f89;
|
||||||
|
border: 0.1px solid #137868;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/deep/.el-range-separator {
|
||||||
|
color: #fff;
|
||||||
|
width: 10%;
|
||||||
|
}
|
||||||
|
/deep/.el-input__icon.el-range__close-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue