|
|
|
|
@ -0,0 +1,468 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="main">
|
|
|
|
|
<div class="box">
|
|
|
|
|
<div class="title">实时预警</div>
|
|
|
|
|
<div class="leftBox">
|
|
|
|
|
<zhmap class="map" :waringList="waringList" @zhuanchuzhi="chuzhi" v-if="waringList && waringList.length">
|
|
|
|
|
</zhmap>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="rightBox">
|
|
|
|
|
<div class="totalTitle">
|
|
|
|
|
<div class="titleText">预警列表</div><span> （ <span class="redText">{{ total }}</span> ）</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottomBody">
|
|
|
|
|
<div class="yujingItem" v-for="(item, index) in waringList" :key="index">
|
|
|
|
|
<div class="yujingTop">
|
|
|
|
|
<div class="companyName">{{ item.companyName }}</div>
|
|
|
|
|
<div class="impBtnList">
|
|
|
|
|
|
|
|
|
|
<div :class="{ 'shewei': a == '剧毒' || a == '易制毒', 'zhongdian': a == '消防重点' || a == '所管消防', 'zhibao': a == '放射源' || a == '易制爆', 'zhian': a == '治安重点' || a == '创安单位' }"
|
|
|
|
|
v-for="a in item.companyTypeList" :key="a">{{ a }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="yujingBottom">
|
|
|
|
|
<div class="bottomTOP">
|
|
|
|
|
一级指标：<span class="numValue">{{ item.levelIndexOne }}</span> 预警指标：<span
|
|
|
|
|
class="numValue">“{{ item.levelIndexThree }}”异常</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottomTOP">
|
|
|
|
|
预警时间：<span class="numValue">{{ item.alarmTime }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chuzhi" @click="chuzhi(item)">转处置</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<el-dialog title="选择处置部门" :visible.sync="diaVisible" class="picForm">
|
|
|
|
|
<div class="czTitle">可选择多个部门联合处置：</div>
|
|
|
|
|
<div class="czBody" v-if="deptList && deptList.length">
|
|
|
|
|
<el-checkbox-group v-model="checkedDepts">
|
|
|
|
|
<el-checkbox v-for="city in deptList" :label="city.deptId" :key="city.deptId">{{ city.deptName
|
|
|
|
|
}}</el-checkbox>
|
|
|
|
|
</el-checkbox-group>
|
|
|
|
|
</div>
|
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="diaVisible = false">取 消
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button type="primary" @click="addForm()">确 定</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { mapList, deptList, addCommonApprovalProcess } from '@/api/realtimeWarning'
|
|
|
|
|
import zhmap from './map.vue'
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
zhmap,
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
total: 0,
|
|
|
|
|
waringList: [],
|
|
|
|
|
diaVisible: false,
|
|
|
|
|
checkedDepts: [],
|
|
|
|
|
deptList: [],
|
|
|
|
|
chuzhiData: {},
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getList()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getList() {
|
|
|
|
|
mapList({ pageSize: 10, pageNum: 1 }).then(res => {
|
|
|
|
|
this.waringList = res.data
|
|
|
|
|
this.total = res.total
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
chuzhi(val) {
|
|
|
|
|
//console.log(val)
|
|
|
|
|
this.chuzhiData = val
|
|
|
|
|
deptList().then(res => {
|
|
|
|
|
console.log(res, 'res');
|
|
|
|
|
this.deptList = res.data
|
|
|
|
|
this.diaVisible = true
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
addForm() {
|
|
|
|
|
console.log(this.checkedDepts, 'this.checkedDepts');
|
|
|
|
|
addCommonApprovalProcess({ approveDeptCodes: this.checkedDepts, safeCompanyAlarm: { id: this.chuzhiData.id } }).then(res => {
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
this.$message.success(res.msg)
|
|
|
|
|
this.diaVisible = false
|
|
|
|
|
this.getList()
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.msg)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.main {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100% - 80px);
|
|
|
|
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
|
|
|
|
.box {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
padding: 70px 25px 20px;
|
|
|
|
|
background: url('~@/assets/realtimeWarning/231.png') no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 25px;
|
|
|
|
|
left: 25px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.leftBox {
|
|
|
|
|
width: calc(100% - 590px);
|
|
|
|
|
height: 100%;
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
background: url('~@/assets/realtimeWarning/矩形备份 289981.png') no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
|
|
|
|
.map {
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rightBox {
|
|
|
|
|
width: 570px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
background: url('~@/assets/realtimeWarning/矩形备份 289981.png') no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
|
|
.totalTitle {
|
|
|
|
|
height: 60px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
border-bottom: 1px solid rgba(91, 116, 140, 0.6);
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
color: #EBFFF4;
|
|
|
|
|
|
|
|
|
|
.titleText {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #EBFFF4;
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
|
|
|
|
|
text-shadow: 0 0 9px rgba(21, 255, 195, 0.60);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.redText {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #FF9191;
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
|
|
|
|
|
font-weight: 400
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottomBody {
|
|
|
|
|
height: calc(100% - 60px);
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 14px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
|
width: 6px;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 滚动条里面默认的小方块,自定义样式
|
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
|
|
background: rgba(255, 255, 255, 0.44);
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 滚动条里面的轨道
|
|
|
|
|
&::-webkit-scrollbar-track {
|
|
|
|
|
background: transparent;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.yujingItem {
|
|
|
|
|
height: 138px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: rgba(108, 128, 151, 0.20);
|
|
|
|
|
border: 1px solid rgba(73, 84, 97, 1);
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.yujingTop {
|
|
|
|
|
border-bottom: 1px solid #495461;
|
|
|
|
|
height: 54px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 0 14px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.companyName {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #30C4FF;
|
|
|
|
|
letter-spacing: 1.14px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
width: 220px;
|
|
|
|
|
|
|
|
|
|
//white-space: nowrap; //禁止换行
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.impBtnList {
|
|
|
|
|
height: 40px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap; //禁止换行
|
|
|
|
|
width: 270px;
|
|
|
|
|
text-overflow: ellipsis; //...
|
|
|
|
|
|
|
|
|
|
.shewei {
|
|
|
|
|
height: 26px;
|
|
|
|
|
line-height: 26px;
|
|
|
|
|
width: auto;
|
|
|
|
|
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: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.zhongdian {
|
|
|
|
|
height: 26px;
|
|
|
|
|
line-height: 26px;
|
|
|
|
|
width: auto;
|
|
|
|
|
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: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.zhibao {
|
|
|
|
|
height: 26px;
|
|
|
|
|
line-height: 26px;
|
|
|
|
|
width: auto;
|
|
|
|
|
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: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.zhian {
|
|
|
|
|
height: 26px;
|
|
|
|
|
line-height: 26px;
|
|
|
|
|
width: auto;
|
|
|
|
|
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: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chuzhi {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 14px;
|
|
|
|
|
bottom: 14px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
height: 20px;
|
|
|
|
|
width: 50px;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #30C4FF;
|
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.yujingBottom {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 84px;
|
|
|
|
|
padding: 0 14px;
|
|
|
|
|
|
|
|
|
|
.bottomTOP {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 50%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
font-family: PingFangSC-Regular;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: rgba(255, 255, 255, 0.8);
|
|
|
|
|
letter-spacing: 0;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
|
.numValue {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
letter-spacing: 0;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.picForm {
|
|
|
|
|
/deep/ .el-dialog {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
|
|
background: url('~@/assets/realtimeWarning/导入弹窗.png') no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
width: 461px;
|
|
|
|
|
height: 412px;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.el-dialog__title {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #EBFFF4;
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
|
|
|
|
|
text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-dialog__body {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 14px 10px;
|
|
|
|
|
height: 300px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
.czTitle {
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
font-family: PingFangSC-Regular;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #EAF6FF;
|
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.czBody {
|
|
|
|
|
width: 440px;
|
|
|
|
|
height: 232px;
|
|
|
|
|
background: rgba(108, 128, 151, 0.20);
|
|
|
|
|
border: 1px solid #495461;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
|
width: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 滚动条里面默认的小方块,自定义样式
|
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
|
|
background: rgba(255, 255, 255, 0.44);
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 滚动条里面的轨道
|
|
|
|
|
&::-webkit-scrollbar-track {
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-checkbox {
|
|
|
|
|
width: 80%;
|
|
|
|
|
height: 34px;
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
background-image: linear-gradient(180deg, rgba(234, 241, 248, 0.10) 0%, rgba(208, 222, 238, 0.10) 100%);
|
|
|
|
|
border: 1px solid #5B748C;
|
|
|
|
|
|
|
|
|
|
margin: 16px 15px 0;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #EAF6FF;
|
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
padding: 7px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.is-checked {
|
|
|
|
|
color: #37FDC7;
|
|
|
|
|
background: rgba(13, 251, 246, 0.10);
|
|
|
|
|
border: 1px solid #37FDC7;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-checkbox__input.is-checked+.el-checkbox__label {
|
|
|
|
|
color: #37FDC7;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-checkbox__input.is-checked .el-checkbox__inner,
|
|
|
|
|
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
|
|
|
|
background-color: rgba(13, 251, 246, 0.10);
|
|
|
|
|
border-color: rgba(255, 251, 246, 0.6);
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-dialog__footer {
|
|
|
|
|
padding: 0px 30px 20px;
|
|
|
|
|
|
|
|
|
|
.el-button--default {
|
|
|
|
|
width: 96px;
|
|
|
|
|
height: 35px;
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
background: rgba(0, 0, 0, 0);
|
|
|
|
|
background-image: linear-gradient(180deg, rgba(234, 241, 248, 0.10) 0%, rgba(208, 222, 238, 0.10) 100%);
|
|
|
|
|
border: 1px solid rgba(91, 116, 140, 1);
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
color: #E3DEFF
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-button--primary {
|
|
|
|
|
width: 96px;
|
|
|
|
|
height: 35px;
|
|
|
|
|
background: rgba(0, 0, 0, 0);
|
|
|
|
|
border: 0;
|
|
|
|
|
background: url('~@/assets/realtimeWarning/2121.png') no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</style>
|
xuhaoyun
1 year ago
