lukeyan
2 years ago
parent
2401af74fb
commit
774bba94df
|
After Width: | Height: | Size: 2.2 KiB |
@ -0,0 +1,10 @@
|
||||
// 应用超市 ---> 警情通报
|
||||
import request from '@/utils/request'
|
||||
// 警情通报主页查询
|
||||
export function get_report_data(params) {
|
||||
return request({
|
||||
url: '/safety/store/personnelReview/safeCompanyInstantAlarm',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
@ -0,0 +1,432 @@
|
||||
<!-- 网络反诈 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 查询 -->
|
||||
<div class="item_search">
|
||||
<el-form :model="search" class="search_form">
|
||||
<el-form-item label="通报时间">
|
||||
<el-date-picker
|
||||
v-model="search.search_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 class="item_list">
|
||||
<div
|
||||
v-for="item in counterfraud_list"
|
||||
:key="item.id"
|
||||
class="counterfraud_item"
|
||||
>
|
||||
<div class="counterfraud_title">
|
||||
<div class="text">通报概述</div>
|
||||
<div class="counterfraud_content">
|
||||
<!-- 警情简要 -->
|
||||
<div class="counterfraud_glossary">
|
||||
<div class="counterfraud_glossary_icon">
|
||||
<div class="icon_green"></div>
|
||||
</div>
|
||||
<div class="counterfraud_glossary_text">警情简要:</div>
|
||||
<div class="counterfraud_glossary_value">
|
||||
{{ item.counterfraud }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 警情时间 -->
|
||||
<div class="counterfraud_time">
|
||||
<div class="counterfraud_time_icon">
|
||||
<i class="el-icon-alarm-clock"></i>
|
||||
</div>
|
||||
<div class="counterfraud_time_text">警情时间:</div>
|
||||
<div class="counterfraud_time_value">{{ item.time }}</div>
|
||||
<!-- 查看详情按钮 -->
|
||||
<div class="counterfraud_btn">
|
||||
<el-button size="small" icon="el-icon-s-promotion"
|
||||
>查看详情</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import { get_counterfraud_data } from "@/api/applySupermarket/policecounterfraud";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
search_time: [this.get_today(), this.get_tomorrow()],
|
||||
word: "",
|
||||
},
|
||||
counterfraud_list: [
|
||||
{
|
||||
id: "2",
|
||||
counterfraud: "于该日在辖区内发生两起盗窃事件",
|
||||
time: "2023 08 29",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
},
|
||||
{
|
||||
id: "9",
|
||||
},
|
||||
{
|
||||
id: "10",
|
||||
},
|
||||
{
|
||||
id: "11",
|
||||
},
|
||||
{
|
||||
id: "12",
|
||||
},
|
||||
{
|
||||
id: "13",
|
||||
},
|
||||
{
|
||||
id: "14",
|
||||
},
|
||||
{
|
||||
id: "15",
|
||||
},
|
||||
],
|
||||
pageSize: 16,
|
||||
pageNum: 1,
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
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;
|
||||
},
|
||||
// 查询
|
||||
search_data() {
|
||||
// get_counterfraud_data().then();
|
||||
},
|
||||
// 重置查询
|
||||
reset() {
|
||||
this.search.course_time = [this.get_today(), this.get_tomorrow()];
|
||||
this.search.word = "";
|
||||
this.search_data();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.item_search {
|
||||
width: 94vw;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
/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;
|
||||
}
|
||||
}
|
||||
.item_list {
|
||||
width: 94vw;
|
||||
height: 62vh;
|
||||
border: 0.1px solid #28847e;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
.counterfraud_item {
|
||||
width: 22vw;
|
||||
height: 14vh;
|
||||
border: 0.1px solid #28847e;
|
||||
margin-left: 0.7vw;
|
||||
margin-right: 0.7vw;
|
||||
margin-top: 0.7vh;
|
||||
margin-bottom: 0.7vh;
|
||||
.counterfraud_title {
|
||||
width: 22vw;
|
||||
height: 4vh;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(0, 255, 247, 0.37),
|
||||
rgba(0, 255, 247, 0)
|
||||
);
|
||||
.text {
|
||||
color: aliceblue;
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
width: 5vw;
|
||||
text-align: center;
|
||||
height: 4vh;
|
||||
line-height: 4vh;
|
||||
}
|
||||
.counterfraud_content {
|
||||
width: 22vw;
|
||||
height: 10vh;
|
||||
.counterfraud_glossary {
|
||||
width: 22vw;
|
||||
height: 5vh;
|
||||
display: flex;
|
||||
.counterfraud_glossary_icon {
|
||||
width: 2vw;
|
||||
height: 5vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.icon_green {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: url("~@/assets/applySupermarket/green.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
animation-name: scale, high;
|
||||
animation-duration: 3s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
@keyframes scale {
|
||||
/*定义关键帧、scale是需要绑定到选择器的关键帧名称*/
|
||||
0% {
|
||||
transform: scale(0.8); /*开始为原始大小*/
|
||||
}
|
||||
25% {
|
||||
transform: scale(1); /*放大1.1倍*/
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
75% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
@keyframes high {
|
||||
0% {
|
||||
filter: brightness(80%);
|
||||
}
|
||||
25% {
|
||||
filter: brightness(200%);
|
||||
}
|
||||
50% {
|
||||
filter: brightness(80%);
|
||||
}
|
||||
75% {
|
||||
filter: brightness(200%);
|
||||
}
|
||||
100% {
|
||||
filter: brightness(80%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.counterfraud_glossary_text {
|
||||
width: 4.3vw;
|
||||
height: 5vh;
|
||||
line-height: 5vh;
|
||||
color: aliceblue;
|
||||
text-align: center;
|
||||
}
|
||||
.counterfraud_glossary_value {
|
||||
width: 15.7vw;
|
||||
height: 5vh;
|
||||
line-height: 5vh;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.counterfraud_time {
|
||||
width: 22vw;
|
||||
height: 5vh;
|
||||
display: flex;
|
||||
.counterfraud_time_icon {
|
||||
width: 2vw;
|
||||
height: 5vh;
|
||||
text-align: center;
|
||||
line-height: 5vh;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
font-size: 20px;
|
||||
}
|
||||
.counterfraud_time_text {
|
||||
width: 4.3vw;
|
||||
height: 5vh;
|
||||
line-height: 5vh;
|
||||
color: aliceblue;
|
||||
text-align: center;
|
||||
}
|
||||
.counterfraud_time_value {
|
||||
width: 8.7vw;
|
||||
height: 5vh;
|
||||
line-height: 5vh;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
}
|
||||
.counterfraud_btn {
|
||||
width: 7vw;
|
||||
height: 5vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.el-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
height: 4vh;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: 0.1px solid 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:hover {
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue