lukeyan
1 year ago
parent
70afcb9910
commit
e667fba66b
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 226 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
@ -0,0 +1,513 @@
|
|||||||
|
<!-- 全部预警 -->
|
||||||
|
<template>
|
||||||
|
<div class="main_box">
|
||||||
|
<div class="list_body">
|
||||||
|
<!-- 公司列表展示 -->
|
||||||
|
<div
|
||||||
|
class="list_item"
|
||||||
|
v-for="item in warn_comapny_list"
|
||||||
|
:key="item.id"
|
||||||
|
:style="{ 'border-color': border_change(item.color) }"
|
||||||
|
>
|
||||||
|
<!-- 预警公司名 + 公司类型 -->
|
||||||
|
<div class="item_top">
|
||||||
|
<!-- 预警公司 -->
|
||||||
|
<div class="item_company">
|
||||||
|
<div class="item_icon">
|
||||||
|
<!-- 红色预警 -->
|
||||||
|
<div v-if="item.color == 'red'" class="icon_red"></div>
|
||||||
|
<!-- 黄色预警 -->
|
||||||
|
<div v-else-if="item.color == 'yellow'" class="icon_yellow"></div>
|
||||||
|
<!-- 绿色预警 -->
|
||||||
|
<div v-else-if="item.color == 'green'" class="icon_green"></div>
|
||||||
|
<!-- 蓝色预警 -->
|
||||||
|
<div v-else class="icon_blue"></div>
|
||||||
|
</div>
|
||||||
|
<div class="company_name">{{ item.companyName }}</div>
|
||||||
|
</div>
|
||||||
|
<!-- 公司类型 -->
|
||||||
|
<div class="item_types">
|
||||||
|
<div
|
||||||
|
:class="{
|
||||||
|
shewei: val == '剧毒' || val == '易制毒',
|
||||||
|
zhongdian: val == '消防重点' || val == '所管消防',
|
||||||
|
zhibao: val == '放射源' || val == '易制爆',
|
||||||
|
zhian:
|
||||||
|
val == '治安重点' || val == '创安单位' || val == '外资合资',
|
||||||
|
}"
|
||||||
|
v-for="(val, index) in item.companyTypeList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
{{ val }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 公司详情 -->
|
||||||
|
<div class="item_bottom">
|
||||||
|
<div class="item_bottom_one">
|
||||||
|
<div class="item_level">
|
||||||
|
<div class="item_level_text">一级指标:</div>
|
||||||
|
<div class="item_levle_value">{{ item.levelIndexOne }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_warn">
|
||||||
|
<div class="item_warn_text">预警指标:</div>
|
||||||
|
<div :title="item.levelIndexThree" class="item_warn_value">
|
||||||
|
{{ item.levelIndexThree }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_bottom_two">
|
||||||
|
<div class="item_time">
|
||||||
|
<div class="item_time_text">预警时间:</div>
|
||||||
|
<div class="item_time_value">{{ item.alarmTime }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_btn">
|
||||||
|
<el-button icon="el-icon-s-promotion" @click="change(item)">转处置</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="pagination_box">
|
||||||
|
<el-pagination
|
||||||
|
:background="true"
|
||||||
|
@size-change="handle_size_change"
|
||||||
|
@current-change="handle_current_change"
|
||||||
|
:page-sizes="[10]"
|
||||||
|
:page-size="pageSize"
|
||||||
|
:pager-count="5"
|
||||||
|
:current-page="pageNum"
|
||||||
|
layout="total, prev, pager, next, jumper"
|
||||||
|
:total="total"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
<ChangeDialog ref="changeDialog" @reset="reset"></ChangeDialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { mapList } from "@/api/realtimeWarning";
|
||||||
|
import ChangeDialog from "./changeDialog";
|
||||||
|
export default {
|
||||||
|
name: "AllWarn",
|
||||||
|
components:{
|
||||||
|
ChangeDialog
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
// 预警公司
|
||||||
|
search_company: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.search();
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
warn_comapny_list: [], // 预警总数
|
||||||
|
pageSize: 10,
|
||||||
|
pageNum: 1,
|
||||||
|
total: 0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 预警公司查询
|
||||||
|
search() {
|
||||||
|
let param = {
|
||||||
|
pageSize: this.pageSize,
|
||||||
|
pageNum: this.pageNum,
|
||||||
|
searchParams: this.search_company,
|
||||||
|
};
|
||||||
|
mapList(param).then((res) => {
|
||||||
|
this.warn_comapny_list = res.data;
|
||||||
|
// 预警企业合计数量
|
||||||
|
this.total = res.total;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 转处置弹窗
|
||||||
|
change(val) {
|
||||||
|
this.$refs.changeDialog.open(val)
|
||||||
|
},
|
||||||
|
handle_size_change(val) {
|
||||||
|
this.pageNum = 1;
|
||||||
|
this.pageSize = val;
|
||||||
|
this.search();
|
||||||
|
},
|
||||||
|
handle_current_change(val) {
|
||||||
|
this.pageNum = val;
|
||||||
|
this.search();
|
||||||
|
},
|
||||||
|
// 刷新
|
||||||
|
reset() {
|
||||||
|
this.search()
|
||||||
|
// 去刷新整体查询
|
||||||
|
this.$emit('reset_search')
|
||||||
|
},
|
||||||
|
// 根据后端返回字段判断边框颜色
|
||||||
|
border_change(val) {
|
||||||
|
switch (val) {
|
||||||
|
case "red":
|
||||||
|
return "#e55b5b";
|
||||||
|
case "yellow":
|
||||||
|
return "#FDA722";
|
||||||
|
case "green":
|
||||||
|
return "#3eba75";
|
||||||
|
case "blue":
|
||||||
|
return "#2eb9ef";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.main_box {
|
||||||
|
.list_body {
|
||||||
|
width: 100%;
|
||||||
|
height: 57vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-y: scroll;
|
||||||
|
// border: 0.1px solid #54a972;
|
||||||
|
.list_item {
|
||||||
|
width: 100%;
|
||||||
|
height: 18vh;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 2px solid;
|
||||||
|
margin-bottom: 1vh;
|
||||||
|
background: rgba(108, 128, 151, 0.2);
|
||||||
|
/* 上方高度活动变化 */
|
||||||
|
.item_top {
|
||||||
|
width: 100%;
|
||||||
|
.item_company {
|
||||||
|
display: flex;
|
||||||
|
height: 4vh;
|
||||||
|
.item_icon {
|
||||||
|
width: 10%;
|
||||||
|
height: 4vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.icon_red {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background: url("~@/assets/realtimeWarning/red.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;
|
||||||
|
}
|
||||||
|
.icon_yellow {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background: url("~@/assets/realtimeWarning/yellow.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;
|
||||||
|
}
|
||||||
|
.icon_green {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background: url("~@/assets/realtimeWarning/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;
|
||||||
|
}
|
||||||
|
.icon_blue {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background: url("~@/assets/realtimeWarning/blue.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.1倍*/
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: scale(1.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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.company_name {
|
||||||
|
width: 90%;
|
||||||
|
height: 4vh;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: #30c4ff;
|
||||||
|
font-family: 黑体;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 高度不确定 */
|
||||||
|
.item_types {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
z-index: 2;
|
||||||
|
margin-left: 10px;
|
||||||
|
.shewei {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 60px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11991.png") no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #b5ebff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.zhongdian {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 80px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11222221.png") no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e3deff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.zhibao {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 60px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11991备份 10.png")
|
||||||
|
no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e3deff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.zhian {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 80px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11991备份 21.png")
|
||||||
|
no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e3deff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_bottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 10vh;
|
||||||
|
.item_bottom_one {
|
||||||
|
width: 100%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_level {
|
||||||
|
width: 50%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_level_text {
|
||||||
|
width: 30%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
color: #e3deff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.item_levle_value {
|
||||||
|
width: 70%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
text-align: left;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_warn {
|
||||||
|
width: 50%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_warn_text {
|
||||||
|
width: 30%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
color: #e3deff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.item_warn_value {
|
||||||
|
width: 70%;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
line-height: 5vh;
|
||||||
|
text-align: left;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_bottom_two {
|
||||||
|
width: 100%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_time {
|
||||||
|
width: 50%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_time_text {
|
||||||
|
width: 30%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
color: #e3deff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.item_time_value {
|
||||||
|
width: 70%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
text-align: left;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_btn {
|
||||||
|
width: 42%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
.el-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 13px;
|
||||||
|
height: 4vh;
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
border: 0.1px solid #54a972;
|
||||||
|
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 {
|
||||||
|
background: #4d8f89;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list_body::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
width: 6px;
|
||||||
|
background-color: #5e666a;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.list_body::-webkit-scrollbar-thumb {
|
||||||
|
display: none;
|
||||||
|
width: 5px;
|
||||||
|
background-color: #3c4b4a;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.pagination_box {
|
||||||
|
width: 100%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
margin-top: 1vh;
|
||||||
|
/deep/.el-pagination.is-background .btn-next,
|
||||||
|
/deep/.el-pagination.is-background .btn-prev,
|
||||||
|
/deep/.el-pagination.is-background .el-pager li {
|
||||||
|
margin: 0 5px;
|
||||||
|
background-color: rgba(255, 255, 255, 0);
|
||||||
|
color: #eaeff7;
|
||||||
|
min-width: 30px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(40, 132, 126, 1);
|
||||||
|
}
|
||||||
|
/deep/.el-pagination__total {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
/deep/.el-input__inner {
|
||||||
|
background-color: rgba(255, 255, 255, 0);
|
||||||
|
border: 1px solid rgba(40, 132, 126, 1);
|
||||||
|
color: #eaeff7;
|
||||||
|
}
|
||||||
|
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||||
|
background-color: rgba(64, 158, 255, 0);
|
||||||
|
color: #ccc;
|
||||||
|
border: 1px solid #76eae4;
|
||||||
|
}
|
||||||
|
/deep/.btn-prev {
|
||||||
|
margin: 0 5px;
|
||||||
|
background-color: rgba(255, 255, 255, 0);
|
||||||
|
color: #eaeff7;
|
||||||
|
min-width: 30px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(40, 132, 126, 1);
|
||||||
|
}
|
||||||
|
/deep/.el-pagination__jump {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,467 @@
|
|||||||
|
<!-- 蓝色预警 -->
|
||||||
|
<template>
|
||||||
|
<div class="main_box">
|
||||||
|
<div class="list_body">
|
||||||
|
<!-- 公司列表展示 -->
|
||||||
|
<div
|
||||||
|
class="list_item"
|
||||||
|
v-for="item in blue_warn_comapny_list"
|
||||||
|
:key="item.id"
|
||||||
|
>
|
||||||
|
<!-- 预警公司名 + 公司类型 -->
|
||||||
|
<div class="item_top">
|
||||||
|
<!-- 预警公司 -->
|
||||||
|
<div class="item_company">
|
||||||
|
<div class="item_icon">
|
||||||
|
<!-- 蓝色预警 -->
|
||||||
|
<div class="icon_blue"></div>
|
||||||
|
</div>
|
||||||
|
<div class="company_name">{{ item.companyName }}</div>
|
||||||
|
</div>
|
||||||
|
<!-- 公司类型 -->
|
||||||
|
<div class="item_types">
|
||||||
|
<div
|
||||||
|
:class="{
|
||||||
|
shewei: val == '剧毒' || val == '易制毒',
|
||||||
|
zhongdian: val == '消防重点' || val == '所管消防',
|
||||||
|
zhibao: val == '放射源' || val == '易制爆',
|
||||||
|
zhian:
|
||||||
|
val == '治安重点' || val == '创安单位' || val == '外资合资',
|
||||||
|
}"
|
||||||
|
v-for="(val, index) in item.companyTypeList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
{{ val }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 公司详情 -->
|
||||||
|
<div class="item_bottom">
|
||||||
|
<div class="item_bottom_one">
|
||||||
|
<div class="item_level">
|
||||||
|
<div class="item_level_text">一级指标:</div>
|
||||||
|
<div class="item_levle_value">{{ item.levelIndexOne }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_warn">
|
||||||
|
<div class="item_warn_text">预警指标:</div>
|
||||||
|
<div :title="item.levelIndexThree" class="item_warn_value">
|
||||||
|
{{ item.levelIndexThree }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_bottom_two">
|
||||||
|
<div class="item_time">
|
||||||
|
<div class="item_time_text">预警时间:</div>
|
||||||
|
<div class="item_time_value">{{ item.alarmTime }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_btn">
|
||||||
|
<el-button icon="el-icon-s-promotion" @click="change(item)"
|
||||||
|
>转处置</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="pagination_box">
|
||||||
|
<el-pagination
|
||||||
|
:background="true"
|
||||||
|
@size-change="handle_size_change"
|
||||||
|
@current-change="handle_current_change"
|
||||||
|
:page-sizes="[10]"
|
||||||
|
:page-size="pageSize"
|
||||||
|
:pager-count="5"
|
||||||
|
:current-page="pageNum"
|
||||||
|
layout="total, prev, pager, next, jumper"
|
||||||
|
:total="total"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
<ChangeDialog ref="changeDialog" @reset="reset"></ChangeDialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { mapList } from "@/api/realtimeWarning";
|
||||||
|
import ChangeDialog from "./changeDialog";
|
||||||
|
export default {
|
||||||
|
name: "BlueWarn",
|
||||||
|
components: {
|
||||||
|
ChangeDialog,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
// 预警公司
|
||||||
|
search_company: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.search();
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
blue_warn_comapny_list: [], // 预警总数
|
||||||
|
pageSize: 10,
|
||||||
|
pageNum: 1,
|
||||||
|
total: 0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 蓝色预警公司查询
|
||||||
|
search() {
|
||||||
|
let param = {
|
||||||
|
pageSize: this.pageSize,
|
||||||
|
pageNum: this.pageNum,
|
||||||
|
searchParams: this.search_company,
|
||||||
|
color: "blue",
|
||||||
|
};
|
||||||
|
mapList(param).then((res) => {
|
||||||
|
console.log("22222222");
|
||||||
|
this.blue_warn_comapny_list = res.data;
|
||||||
|
// 蓝色预警企业合计数量
|
||||||
|
this.total = res.total;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 转处置弹窗
|
||||||
|
change(val) {
|
||||||
|
this.$refs.changeDialog.open(val);
|
||||||
|
},
|
||||||
|
handle_size_change(val) {
|
||||||
|
this.pageNum = 1;
|
||||||
|
this.pageSize = val;
|
||||||
|
this.search();
|
||||||
|
},
|
||||||
|
handle_current_change(val) {
|
||||||
|
this.pageNum = val;
|
||||||
|
this.search();
|
||||||
|
},
|
||||||
|
// 刷新
|
||||||
|
reset() {
|
||||||
|
this.search()
|
||||||
|
// 去刷新整体查询
|
||||||
|
this.$emit('reset_search')
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.main_box {
|
||||||
|
.list_body {
|
||||||
|
width: 100%;
|
||||||
|
height: 57vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-y: scroll;
|
||||||
|
// border: 0.1px solid #54a972;
|
||||||
|
.list_item {
|
||||||
|
width: 100%;
|
||||||
|
height: 18vh;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 2px solid #2eb9ef;
|
||||||
|
margin-bottom: 1vh;
|
||||||
|
background: rgba(108, 128, 151, 0.2);
|
||||||
|
/* 上方高度活动变化 */
|
||||||
|
.item_top {
|
||||||
|
width: 100%;
|
||||||
|
.item_company {
|
||||||
|
display: flex;
|
||||||
|
height: 4vh;
|
||||||
|
.item_icon {
|
||||||
|
width: 10%;
|
||||||
|
height: 4vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.icon_blue {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background: url("~@/assets/realtimeWarning/blue.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.1倍*/
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: scale(1.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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.company_name {
|
||||||
|
width: 90%;
|
||||||
|
height: 4vh;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: #30c4ff;
|
||||||
|
font-family: 黑体;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 高度不确定 */
|
||||||
|
.item_types {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
z-index: 2;
|
||||||
|
margin-left: 10px;
|
||||||
|
.shewei {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 60px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11991.png") no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #b5ebff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.zhongdian {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 80px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11222221.png") no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e3deff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.zhibao {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 60px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11991备份 10.png")
|
||||||
|
no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e3deff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.zhian {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 80px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11991备份 21.png")
|
||||||
|
no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e3deff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_bottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 10vh;
|
||||||
|
.item_bottom_one {
|
||||||
|
width: 100%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_level {
|
||||||
|
width: 50%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_level_text {
|
||||||
|
width: 30%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
color: #e3deff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.item_levle_value {
|
||||||
|
width: 70%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
text-align: left;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_warn {
|
||||||
|
width: 50%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_warn_text {
|
||||||
|
width: 30%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
color: #e3deff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.item_warn_value {
|
||||||
|
width: 70%;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
line-height: 5vh;
|
||||||
|
text-align: left;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_bottom_two {
|
||||||
|
width: 100%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_time {
|
||||||
|
width: 50%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_time_text {
|
||||||
|
width: 30%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
color: #e3deff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.item_time_value {
|
||||||
|
width: 70%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
text-align: left;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_btn {
|
||||||
|
width: 42%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
.el-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 13px;
|
||||||
|
height: 4vh;
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
border: 0.1px solid #54a972;
|
||||||
|
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 {
|
||||||
|
background: #4d8f89;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list_body::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
width: 6px;
|
||||||
|
background-color: #5e666a;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.list_body::-webkit-scrollbar-thumb {
|
||||||
|
display: none;
|
||||||
|
width: 5px;
|
||||||
|
background-color: #3c4b4a;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.pagination_box {
|
||||||
|
width: 100%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
margin-top: 1vh;
|
||||||
|
/deep/.el-pagination.is-background .btn-next,
|
||||||
|
/deep/.el-pagination.is-background .btn-prev,
|
||||||
|
/deep/.el-pagination.is-background .el-pager li {
|
||||||
|
margin: 0 5px;
|
||||||
|
background-color: rgba(255, 255, 255, 0);
|
||||||
|
color: #eaeff7;
|
||||||
|
min-width: 30px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(40, 132, 126, 1);
|
||||||
|
}
|
||||||
|
/deep/.el-pagination__total {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
/deep/.el-input__inner {
|
||||||
|
background-color: rgba(255, 255, 255, 0);
|
||||||
|
border: 1px solid rgba(40, 132, 126, 1);
|
||||||
|
color: #eaeff7;
|
||||||
|
}
|
||||||
|
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||||
|
background-color: rgba(64, 158, 255, 0);
|
||||||
|
color: #ccc;
|
||||||
|
border: 1px solid #76eae4;
|
||||||
|
}
|
||||||
|
/deep/.btn-prev {
|
||||||
|
margin: 0 5px;
|
||||||
|
background-color: rgba(255, 255, 255, 0);
|
||||||
|
color: #eaeff7;
|
||||||
|
min-width: 30px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(40, 132, 126, 1);
|
||||||
|
}
|
||||||
|
/deep/.el-pagination__jump {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,464 @@
|
|||||||
|
<!-- 绿色预警 -->
|
||||||
|
<template>
|
||||||
|
<div class="main_box">
|
||||||
|
<div class="list_body">
|
||||||
|
<!-- 公司列表展示 -->
|
||||||
|
<div
|
||||||
|
class="list_item"
|
||||||
|
v-for="item in green_warn_comapny_list"
|
||||||
|
:key="item.id"
|
||||||
|
>
|
||||||
|
<!-- 预警公司名 + 公司类型 -->
|
||||||
|
<div class="item_top">
|
||||||
|
<!-- 预警公司 -->
|
||||||
|
<div class="item_company">
|
||||||
|
<div class="item_icon">
|
||||||
|
<!-- 红色预警 -->
|
||||||
|
<div class="icon_green"></div>
|
||||||
|
</div>
|
||||||
|
<div class="company_name">{{ item.companyName }}</div>
|
||||||
|
</div>
|
||||||
|
<!-- 公司类型 -->
|
||||||
|
<div class="item_types">
|
||||||
|
<div
|
||||||
|
:class="{
|
||||||
|
shewei: val == '剧毒' || val == '易制毒',
|
||||||
|
zhongdian: val == '消防重点' || val == '所管消防',
|
||||||
|
zhibao: val == '放射源' || val == '易制爆',
|
||||||
|
zhian:
|
||||||
|
val == '治安重点' || val == '创安单位' || val == '外资合资',
|
||||||
|
}"
|
||||||
|
v-for="(val, index) in item.companyTypeList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
{{ val }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 公司详情 -->
|
||||||
|
<div class="item_bottom">
|
||||||
|
<div class="item_bottom_one">
|
||||||
|
<div class="item_level">
|
||||||
|
<div class="item_level_text">一级指标:</div>
|
||||||
|
<div class="item_levle_value">{{ item.levelIndexOne }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_warn">
|
||||||
|
<div class="item_warn_text">预警指标:</div>
|
||||||
|
<div :title="item.levelIndexThree" class="item_warn_value">
|
||||||
|
{{ item.levelIndexThree }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_bottom_two">
|
||||||
|
<div class="item_time">
|
||||||
|
<div class="item_time_text">预警时间:</div>
|
||||||
|
<div class="item_time_value">{{ item.alarmTime }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_btn">
|
||||||
|
<el-button icon="el-icon-s-promotion" @click="change(item)">转处置</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="pagination_box">
|
||||||
|
<el-pagination
|
||||||
|
:background="true"
|
||||||
|
@size-change="handle_size_change"
|
||||||
|
@current-change="handle_current_change"
|
||||||
|
:page-sizes="[10]"
|
||||||
|
:page-size="pageSize"
|
||||||
|
:pager-count="5"
|
||||||
|
:current-page="pageNum"
|
||||||
|
layout="total, prev, pager, next, jumper"
|
||||||
|
:total="total"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
<ChangeDialog ref="changeDialog" @reset="reset"></ChangeDialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { mapList } from "@/api/realtimeWarning";
|
||||||
|
import ChangeDialog from "./changeDialog";
|
||||||
|
export default {
|
||||||
|
name: "GreenWarn",
|
||||||
|
components:{
|
||||||
|
ChangeDialog
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
// 预警公司
|
||||||
|
search_company: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.search();
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
green_warn_comapny_list: [], // 预警总数
|
||||||
|
pageSize: 10,
|
||||||
|
pageNum: 1,
|
||||||
|
total: 0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 绿色预警公司查询
|
||||||
|
search() {
|
||||||
|
let param = {
|
||||||
|
pageSize: this.pageSize,
|
||||||
|
pageNum: this.pageNum,
|
||||||
|
searchParams: this.search_company,
|
||||||
|
color:"green"
|
||||||
|
};
|
||||||
|
mapList(param).then((res) => {
|
||||||
|
this.green_warn_comapny_list = res.data;
|
||||||
|
// 绿色预警企业合计数量
|
||||||
|
this.total = res.total;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 转处置弹窗
|
||||||
|
change(val) {
|
||||||
|
this.$refs.changeDialog.open(val)
|
||||||
|
},
|
||||||
|
handle_size_change(val) {
|
||||||
|
this.pageNum = 1;
|
||||||
|
this.pageSize = val;
|
||||||
|
this.search();
|
||||||
|
},
|
||||||
|
handle_current_change(val) {
|
||||||
|
this.pageNum = val;
|
||||||
|
this.search();
|
||||||
|
},
|
||||||
|
// 刷新
|
||||||
|
reset() {
|
||||||
|
this.search()
|
||||||
|
// 去刷新整体查询
|
||||||
|
this.$emit('reset_search')
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.main_box {
|
||||||
|
.list_body {
|
||||||
|
width: 100%;
|
||||||
|
height: 57vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-y: scroll;
|
||||||
|
// border: 0.1px solid #54a972;
|
||||||
|
.list_item {
|
||||||
|
width: 100%;
|
||||||
|
height: 18vh;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 2px solid #3eba75;
|
||||||
|
margin-bottom: 1vh;
|
||||||
|
background: rgba(108, 128, 151, 0.2);
|
||||||
|
/* 上方高度活动变化 */
|
||||||
|
.item_top {
|
||||||
|
width: 100%;
|
||||||
|
.item_company {
|
||||||
|
display: flex;
|
||||||
|
height: 4vh;
|
||||||
|
.item_icon {
|
||||||
|
width: 10%;
|
||||||
|
height: 4vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.icon_green {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background: url("~@/assets/realtimeWarning/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.1倍*/
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: scale(1.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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.company_name {
|
||||||
|
width: 90%;
|
||||||
|
height: 4vh;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: #30c4ff;
|
||||||
|
font-family: 黑体;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 高度不确定 */
|
||||||
|
.item_types {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
z-index: 2;
|
||||||
|
margin-left: 10px;
|
||||||
|
.shewei {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 60px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11991.png") no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #b5ebff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.zhongdian {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 80px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11222221.png") no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e3deff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.zhibao {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 60px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11991备份 10.png")
|
||||||
|
no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e3deff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.zhian {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 80px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11991备份 21.png")
|
||||||
|
no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e3deff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_bottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 10vh;
|
||||||
|
.item_bottom_one {
|
||||||
|
width: 100%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_level {
|
||||||
|
width: 50%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_level_text {
|
||||||
|
width: 30%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
color: #e3deff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.item_levle_value {
|
||||||
|
width: 70%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
text-align: left;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_warn {
|
||||||
|
width: 50%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_warn_text {
|
||||||
|
width: 30%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
color: #e3deff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.item_warn_value {
|
||||||
|
width: 70%;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
line-height: 5vh;
|
||||||
|
text-align: left;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_bottom_two {
|
||||||
|
width: 100%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_time {
|
||||||
|
width: 50%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_time_text {
|
||||||
|
width: 30%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
color: #e3deff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.item_time_value {
|
||||||
|
width: 70%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
text-align: left;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_btn {
|
||||||
|
width: 42%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
.el-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 13px;
|
||||||
|
height: 4vh;
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
border: 0.1px solid #54a972;
|
||||||
|
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 {
|
||||||
|
background: #4d8f89;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list_body::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
width: 6px;
|
||||||
|
background-color: #5e666a;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.list_body::-webkit-scrollbar-thumb {
|
||||||
|
display: none;
|
||||||
|
width: 5px;
|
||||||
|
background-color: #3c4b4a;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.pagination_box {
|
||||||
|
width: 100%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
margin-top: 1vh;
|
||||||
|
/deep/.el-pagination.is-background .btn-next,
|
||||||
|
/deep/.el-pagination.is-background .btn-prev,
|
||||||
|
/deep/.el-pagination.is-background .el-pager li {
|
||||||
|
margin: 0 5px;
|
||||||
|
background-color: rgba(255, 255, 255, 0);
|
||||||
|
color: #eaeff7;
|
||||||
|
min-width: 30px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(40, 132, 126, 1);
|
||||||
|
}
|
||||||
|
/deep/.el-pagination__total {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
/deep/.el-input__inner {
|
||||||
|
background-color: rgba(255, 255, 255, 0);
|
||||||
|
border: 1px solid rgba(40, 132, 126, 1);
|
||||||
|
color: #eaeff7;
|
||||||
|
}
|
||||||
|
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||||
|
background-color: rgba(64, 158, 255, 0);
|
||||||
|
color: #ccc;
|
||||||
|
border: 1px solid #76eae4;
|
||||||
|
}
|
||||||
|
/deep/.btn-prev {
|
||||||
|
margin: 0 5px;
|
||||||
|
background-color: rgba(255, 255, 255, 0);
|
||||||
|
color: #eaeff7;
|
||||||
|
min-width: 30px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(40, 132, 126, 1);
|
||||||
|
}
|
||||||
|
/deep/.el-pagination__jump {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,466 @@
|
|||||||
|
<!-- 红色预警 -->
|
||||||
|
<template>
|
||||||
|
<div class="main_box">
|
||||||
|
<div class="list_body">
|
||||||
|
<!-- 公司列表展示 -->
|
||||||
|
<div
|
||||||
|
class="list_item"
|
||||||
|
v-for="item in red_warn_comapny_list"
|
||||||
|
:key="item.id"
|
||||||
|
>
|
||||||
|
<!-- 预警公司名 + 公司类型 -->
|
||||||
|
<div class="item_top">
|
||||||
|
<!-- 预警公司 -->
|
||||||
|
<div class="item_company">
|
||||||
|
<div class="item_icon">
|
||||||
|
<!-- 红色预警 -->
|
||||||
|
<div class="icon_red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="company_name">{{ item.companyName }}</div>
|
||||||
|
</div>
|
||||||
|
<!-- 公司类型 -->
|
||||||
|
<div class="item_types">
|
||||||
|
<div
|
||||||
|
:class="{
|
||||||
|
shewei: val == '剧毒' || val == '易制毒',
|
||||||
|
zhongdian: val == '消防重点' || val == '所管消防',
|
||||||
|
zhibao: val == '放射源' || val == '易制爆',
|
||||||
|
zhian:
|
||||||
|
val == '治安重点' || val == '创安单位' || val == '外资合资',
|
||||||
|
}"
|
||||||
|
v-for="(val, index) in item.companyTypeList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
{{ val }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 公司详情 -->
|
||||||
|
<div class="item_bottom">
|
||||||
|
<div class="item_bottom_one">
|
||||||
|
<div class="item_level">
|
||||||
|
<div class="item_level_text">一级指标:</div>
|
||||||
|
<div class="item_levle_value">{{ item.levelIndexOne }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_warn">
|
||||||
|
<div class="item_warn_text">预警指标:</div>
|
||||||
|
<div :title="item.levelIndexThree" class="item_warn_value">
|
||||||
|
{{ item.levelIndexThree }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_bottom_two">
|
||||||
|
<div class="item_time">
|
||||||
|
<div class="item_time_text">预警时间:</div>
|
||||||
|
<div class="item_time_value">{{ item.alarmTime }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_btn">
|
||||||
|
<el-button icon="el-icon-s-promotion" @click="change(item)"
|
||||||
|
>转处置</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="pagination_box">
|
||||||
|
<el-pagination
|
||||||
|
:background="true"
|
||||||
|
@size-change="handle_size_change"
|
||||||
|
@current-change="handle_current_change"
|
||||||
|
:page-sizes="[10]"
|
||||||
|
:page-size="pageSize"
|
||||||
|
:pager-count="5"
|
||||||
|
:current-page="pageNum"
|
||||||
|
layout="total, prev, pager, next, jumper"
|
||||||
|
:total="total"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
<ChangeDialog ref="changeDialog" @reset="reset"></ChangeDialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { mapList } from "@/api/realtimeWarning";
|
||||||
|
import ChangeDialog from "./changeDialog";
|
||||||
|
export default {
|
||||||
|
name: "redWarn",
|
||||||
|
components:{
|
||||||
|
ChangeDialog
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
// 预警公司
|
||||||
|
search_company: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.search();
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
red_warn_comapny_list: [], // 预警总数
|
||||||
|
pageSize: 10,
|
||||||
|
pageNum: 1,
|
||||||
|
total: 0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 红色预警公司查询
|
||||||
|
search() {
|
||||||
|
let param = {
|
||||||
|
pageSize: this.pageSize,
|
||||||
|
pageNum: this.pageNum,
|
||||||
|
searchParams: this.search_company,
|
||||||
|
color: "red",
|
||||||
|
};
|
||||||
|
mapList(param).then((res) => {
|
||||||
|
this.red_warn_comapny_list = res.data;
|
||||||
|
// 红色预警企业合计数量
|
||||||
|
this.total = res.total;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 转处置弹窗
|
||||||
|
change(val) {
|
||||||
|
this.$refs.changeDialog.open(val)
|
||||||
|
},
|
||||||
|
handle_size_change(val) {
|
||||||
|
this.pageNum = 1;
|
||||||
|
this.pageSize = val;
|
||||||
|
this.search();
|
||||||
|
},
|
||||||
|
handle_current_change(val) {
|
||||||
|
this.pageNum = val;
|
||||||
|
this.search();
|
||||||
|
},
|
||||||
|
// 刷新
|
||||||
|
reset() {
|
||||||
|
this.search()
|
||||||
|
// 去刷新整体查询
|
||||||
|
this.$emit('reset_search')
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.main_box {
|
||||||
|
.list_body {
|
||||||
|
width: 100%;
|
||||||
|
height: 57vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-y: scroll;
|
||||||
|
// border: 0.1px solid #54a972;
|
||||||
|
.list_item {
|
||||||
|
width: 100%;
|
||||||
|
height: 18vh;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 2px solid #e55b5b;
|
||||||
|
margin-bottom: 1vh;
|
||||||
|
background: rgba(108, 128, 151, 0.2);
|
||||||
|
/* 上方高度活动变化 */
|
||||||
|
.item_top {
|
||||||
|
width: 100%;
|
||||||
|
.item_company {
|
||||||
|
display: flex;
|
||||||
|
height: 4vh;
|
||||||
|
.item_icon {
|
||||||
|
width: 10%;
|
||||||
|
height: 4vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.icon_red {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background: url("~@/assets/realtimeWarning/red.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.1倍*/
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: scale(1.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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.company_name {
|
||||||
|
width: 90%;
|
||||||
|
height: 4vh;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: #30c4ff;
|
||||||
|
font-family: 黑体;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 高度不确定 */
|
||||||
|
.item_types {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
z-index: 2;
|
||||||
|
margin-left: 10px;
|
||||||
|
.shewei {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 60px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11991.png") no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #b5ebff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.zhongdian {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 80px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11222221.png") no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e3deff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.zhibao {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 60px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11991备份 10.png")
|
||||||
|
no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e3deff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.zhian {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 80px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11991备份 21.png")
|
||||||
|
no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e3deff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_bottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 10vh;
|
||||||
|
.item_bottom_one {
|
||||||
|
width: 100%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_level {
|
||||||
|
width: 50%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_level_text {
|
||||||
|
width: 30%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
color: #e3deff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.item_levle_value {
|
||||||
|
width: 70%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
text-align: left;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_warn {
|
||||||
|
width: 50%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_warn_text {
|
||||||
|
width: 30%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
color: #e3deff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.item_warn_value {
|
||||||
|
width: 70%;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
line-height: 5vh;
|
||||||
|
text-align: left;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_bottom_two {
|
||||||
|
width: 100%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_time {
|
||||||
|
width: 50%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_time_text {
|
||||||
|
width: 30%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
color: #e3deff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.item_time_value {
|
||||||
|
width: 70%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
text-align: left;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_btn {
|
||||||
|
width: 42%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
.el-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 13px;
|
||||||
|
height: 4vh;
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
border: 0.1px solid #54a972;
|
||||||
|
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 {
|
||||||
|
background: #4d8f89;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list_body::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
width: 6px;
|
||||||
|
background-color: #5e666a;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.list_body::-webkit-scrollbar-thumb {
|
||||||
|
display: none;
|
||||||
|
width: 5px;
|
||||||
|
background-color: #3c4b4a;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.pagination_box {
|
||||||
|
width: 100%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
margin-top: 1vh;
|
||||||
|
/deep/.el-pagination.is-background .btn-next,
|
||||||
|
/deep/.el-pagination.is-background .btn-prev,
|
||||||
|
/deep/.el-pagination.is-background .el-pager li {
|
||||||
|
margin: 0 5px;
|
||||||
|
background-color: rgba(255, 255, 255, 0);
|
||||||
|
color: #eaeff7;
|
||||||
|
min-width: 30px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(40, 132, 126, 1);
|
||||||
|
}
|
||||||
|
/deep/.el-pagination__total {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
/deep/.el-input__inner {
|
||||||
|
background-color: rgba(255, 255, 255, 0);
|
||||||
|
border: 1px solid rgba(40, 132, 126, 1);
|
||||||
|
color: #eaeff7;
|
||||||
|
}
|
||||||
|
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||||
|
background-color: rgba(64, 158, 255, 0);
|
||||||
|
color: #ccc;
|
||||||
|
border: 1px solid #76eae4;
|
||||||
|
}
|
||||||
|
/deep/.btn-prev {
|
||||||
|
margin: 0 5px;
|
||||||
|
background-color: rgba(255, 255, 255, 0);
|
||||||
|
color: #eaeff7;
|
||||||
|
min-width: 30px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(40, 132, 126, 1);
|
||||||
|
}
|
||||||
|
/deep/.el-pagination__jump {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,464 @@
|
|||||||
|
<!-- 黄色预警 -->
|
||||||
|
<template>
|
||||||
|
<div class="main_box">
|
||||||
|
<div class="list_body">
|
||||||
|
<!-- 公司列表展示 -->
|
||||||
|
<div
|
||||||
|
class="list_item"
|
||||||
|
v-for="item in yellow_warn_comapny_list"
|
||||||
|
:key="item.id"
|
||||||
|
>
|
||||||
|
<!-- 预警公司名 + 公司类型 -->
|
||||||
|
<div class="item_top">
|
||||||
|
<!-- 预警公司 -->
|
||||||
|
<div class="item_company">
|
||||||
|
<div class="item_icon">
|
||||||
|
<!-- 红色预警 -->
|
||||||
|
<div class="icon_yellow"></div>
|
||||||
|
</div>
|
||||||
|
<div class="company_name">{{ item.companyName }}</div>
|
||||||
|
</div>
|
||||||
|
<!-- 公司类型 -->
|
||||||
|
<div class="item_types">
|
||||||
|
<div
|
||||||
|
:class="{
|
||||||
|
shewei: val == '剧毒' || val == '易制毒',
|
||||||
|
zhongdian: val == '消防重点' || val == '所管消防',
|
||||||
|
zhibao: val == '放射源' || val == '易制爆',
|
||||||
|
zhian:
|
||||||
|
val == '治安重点' || val == '创安单位' || val == '外资合资',
|
||||||
|
}"
|
||||||
|
v-for="(val, index) in item.companyTypeList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
{{ val }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 公司详情 -->
|
||||||
|
<div class="item_bottom">
|
||||||
|
<div class="item_bottom_one">
|
||||||
|
<div class="item_level">
|
||||||
|
<div class="item_level_text">一级指标:</div>
|
||||||
|
<div class="item_levle_value">{{ item.levelIndexOne }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_warn">
|
||||||
|
<div class="item_warn_text">预警指标:</div>
|
||||||
|
<div :title="item.levelIndexThree" class="item_warn_value">
|
||||||
|
{{ item.levelIndexThree }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_bottom_two">
|
||||||
|
<div class="item_time">
|
||||||
|
<div class="item_time_text">预警时间:</div>
|
||||||
|
<div class="item_time_value">{{ item.alarmTime }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_btn">
|
||||||
|
<el-button icon="el-icon-s-promotion" @click="change(item)">转处置</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="pagination_box">
|
||||||
|
<el-pagination
|
||||||
|
:background="true"
|
||||||
|
@size-change="handle_size_change"
|
||||||
|
@current-change="handle_current_change"
|
||||||
|
:page-sizes="[10]"
|
||||||
|
:page-size="pageSize"
|
||||||
|
:pager-count="5"
|
||||||
|
:current-page="pageNum"
|
||||||
|
layout="total, prev, pager, next, jumper"
|
||||||
|
:total="total"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
<ChangeDialog ref="changeDialog" @reset="reset"></ChangeDialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { mapList } from "@/api/realtimeWarning";
|
||||||
|
import ChangeDialog from "./changeDialog";
|
||||||
|
export default {
|
||||||
|
name: "YellowWarn",
|
||||||
|
components:{
|
||||||
|
ChangeDialog
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
// 预警公司
|
||||||
|
search_company: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.search();
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
yellow_warn_comapny_list: [], // 预警总数
|
||||||
|
pageSize: 10,
|
||||||
|
pageNum: 1,
|
||||||
|
total: 0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 黄色预警公司查询
|
||||||
|
search() {
|
||||||
|
let param = {
|
||||||
|
pageSize: this.pageSize,
|
||||||
|
pageNum: this.pageNum,
|
||||||
|
searchParams: this.search_company,
|
||||||
|
color:"yellow"
|
||||||
|
};
|
||||||
|
mapList(param).then((res) => {
|
||||||
|
this.yellow_warn_comapny_list = res.data;
|
||||||
|
// 黄色预警企业合计数量
|
||||||
|
this.total = res.total;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 转处置弹窗
|
||||||
|
change(val) {
|
||||||
|
this.$refs.changeDialog.open(val)
|
||||||
|
},
|
||||||
|
handle_size_change(val) {
|
||||||
|
this.pageNum = 1;
|
||||||
|
this.pageSize = val;
|
||||||
|
this.search();
|
||||||
|
},
|
||||||
|
handle_current_change(val) {
|
||||||
|
this.pageNum = val;
|
||||||
|
this.search();
|
||||||
|
},
|
||||||
|
// 刷新
|
||||||
|
reset() {
|
||||||
|
this.search()
|
||||||
|
// 去刷新整体查询
|
||||||
|
this.$emit('reset_search')
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.main_box {
|
||||||
|
.list_body {
|
||||||
|
width: 100%;
|
||||||
|
height: 57vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-y: scroll;
|
||||||
|
// border: 0.1px solid #54a972;
|
||||||
|
.list_item {
|
||||||
|
width: 100%;
|
||||||
|
height: 18vh;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 2px solid #FDA722;
|
||||||
|
margin-bottom: 1vh;
|
||||||
|
background: rgba(108, 128, 151, 0.2);
|
||||||
|
/* 上方高度活动变化 */
|
||||||
|
.item_top {
|
||||||
|
width: 100%;
|
||||||
|
.item_company {
|
||||||
|
display: flex;
|
||||||
|
height: 4vh;
|
||||||
|
.item_icon {
|
||||||
|
width: 10%;
|
||||||
|
height: 4vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.icon_yellow {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background: url("~@/assets/realtimeWarning/yellow.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.1倍*/
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: scale(1.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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.company_name {
|
||||||
|
width: 90%;
|
||||||
|
height: 4vh;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: #30c4ff;
|
||||||
|
font-family: 黑体;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 高度不确定 */
|
||||||
|
.item_types {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
z-index: 2;
|
||||||
|
margin-left: 10px;
|
||||||
|
.shewei {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 60px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11991.png") no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #b5ebff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.zhongdian {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 80px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11222221.png") no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e3deff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.zhibao {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 60px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11991备份 10.png")
|
||||||
|
no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e3deff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.zhian {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 80px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11991备份 21.png")
|
||||||
|
no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e3deff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_bottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 10vh;
|
||||||
|
.item_bottom_one {
|
||||||
|
width: 100%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_level {
|
||||||
|
width: 50%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_level_text {
|
||||||
|
width: 30%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
color: #e3deff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.item_levle_value {
|
||||||
|
width: 70%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
text-align: left;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_warn {
|
||||||
|
width: 50%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_warn_text {
|
||||||
|
width: 30%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
color: #e3deff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.item_warn_value {
|
||||||
|
width: 70%;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
line-height: 5vh;
|
||||||
|
text-align: left;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_bottom_two {
|
||||||
|
width: 100%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_time {
|
||||||
|
width: 50%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.item_time_text {
|
||||||
|
width: 30%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
color: #e3deff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.item_time_value {
|
||||||
|
width: 70%;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
text-align: left;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_btn {
|
||||||
|
width: 42%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
.el-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 13px;
|
||||||
|
height: 4vh;
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
border: 0.1px solid #54a972;
|
||||||
|
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 {
|
||||||
|
background: #4d8f89;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list_body::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
width: 6px;
|
||||||
|
background-color: #5e666a;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.list_body::-webkit-scrollbar-thumb {
|
||||||
|
display: none;
|
||||||
|
width: 5px;
|
||||||
|
background-color: #3c4b4a;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.pagination_box {
|
||||||
|
width: 100%;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
margin-top: 1vh;
|
||||||
|
/deep/.el-pagination.is-background .btn-next,
|
||||||
|
/deep/.el-pagination.is-background .btn-prev,
|
||||||
|
/deep/.el-pagination.is-background .el-pager li {
|
||||||
|
margin: 0 5px;
|
||||||
|
background-color: rgba(255, 255, 255, 0);
|
||||||
|
color: #eaeff7;
|
||||||
|
min-width: 30px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(40, 132, 126, 1);
|
||||||
|
}
|
||||||
|
/deep/.el-pagination__total {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
/deep/.el-input__inner {
|
||||||
|
background-color: rgba(255, 255, 255, 0);
|
||||||
|
border: 1px solid rgba(40, 132, 126, 1);
|
||||||
|
color: #eaeff7;
|
||||||
|
}
|
||||||
|
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||||
|
background-color: rgba(64, 158, 255, 0);
|
||||||
|
color: #ccc;
|
||||||
|
border: 1px solid #76eae4;
|
||||||
|
}
|
||||||
|
/deep/.btn-prev {
|
||||||
|
margin: 0 5px;
|
||||||
|
background-color: rgba(255, 255, 255, 0);
|
||||||
|
color: #eaeff7;
|
||||||
|
min-width: 30px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(40, 132, 126, 1);
|
||||||
|
}
|
||||||
|
/deep/.el-pagination__jump {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue