pull/86/head
xuhaoyun 1 year ago
parent 501e920359
commit 9c35b6e797

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

@ -7,3 +7,19 @@ export function mapList(params) {
params
})
}
//部门信息列表
export function deptList(params) {
return request({
url: '/system/dept/list',
method: 'get',
params
})
}
//处置请求
export function addCommonApprovalProcess(data) {
return request({
url: '/closedloopdisposal/workflow/addCommonApprovalProcess',
method: 'post',
data
})
}

@ -27,7 +27,6 @@ export default {
this.companyList = res.data
this.initMap()
})
topMapOne({ companyId: 4, companyName: '宁波顺帆净水剂有限公司' })
},
methods: {
@ -181,8 +180,76 @@ export default {
label.setStyle({ backgroundColor: ' rgba(0, 0, 0, 0)', border: '0', color: '#0060ce', fontSize: '16px' })
map.addOverlay(label);
marker.addEventListener("click", function () {
// Cookies.set('village_current', item.villageCode)
// window.open(window.location.origin + '/#/communityShow', '_blank');
topMapOne({ companyId: item.companyId, companyName: item.companyName }).then(res => {
var label = new BMap.Label();
label.setStyle({
color: 'blue',
borderRadius: '5px',
borderColor: '#ccc',
padding: '10px',
fontSize: '16px',
fontFamily: '微软雅黑',
transform: 'translateX(-50%) translateY(calc(-100% - 10px))'
});
label.setPosition(new BMap.Point(item.longitude, item.latitude));
label.setOffset(new BMap.Size(130, -10))
label.setStyle({ width: '372px', height: '242px', background: 'url(pbImg/bz49.png) no-repeat', backgroundSize: '100% 100%', border: '0', color: '#fff', padding: '13px 20px' })
label.setContent(`
<div style='width:100%;display:flex;justify-content: space-between;align-items: center;border-bottom:1px solid #657E83;'> <h4 style='margin:12px;font-size: 14px;color: #EBFFF4;letter-spacing: 1px;line-height: 24px;text-shadow: 0 0 9px rgba(21,255,195,0.77);'>${res.data.companyName}</h4><div class='closeBtn' style='font-size: 14px;color: #30C4FF;letter-spacing: 1px;font-weight: 400;'>企业看板<i style='display:inline-block; background: url(pbImg/跳转.png) no-repeat;width:16px;height:14px;background-size: 100% 100%;"'></i></div></div>
<div style='height:70px;width:100%;margin-top:15px;background: url(pbImg/编组.png);display:flex;justify-content: space-around;align-items: center;'>
<div style='width:80px;height:80%;text-align:center;padding:15px 0;'>
<div style='font-size: 18px;color: #FFFCEB;letter-spacing: 2.25px;line-height: 16px;text-shadow: 0 0 9px rgba(255,236,21,0.41);'>${res.data.scoreMonth}</div>
<div style='font-size: 14px;color: #EBF9FF;letter-spacing: 1.75px;font-weight: 400;'>月度得分</div>
</div>
<div style='width:80px;height:80%;text-align:center;padding:15px 0;'>
<div style='font-size: 18px;color: #FFFCEB;letter-spacing: 2.25px;line-height: 16px;text-shadow: 0 0 9px rgba(255,236,21,0.41);'>${res.data.scoreSeason}</div>
<div style='font-size: 14px;color: #EBF9FF;letter-spacing: 1.75px;font-weight: 400;'>季度得分</div>
</div>
<div style='width:80px;height:80%;text-align:center;padding:15px 0;'>
<div style='font-size: 18px;color: #FFFCEB;letter-spacing: 2.25px;line-height: 16px;text-shadow: 0 0 9px rgba(255,236,21,0.41);'>${res.data.scoreYear}</div>
<div style='font-size: 14px;color: #EBF9FF;letter-spacing: 1.75px;font-weight: 400;'>年度得分</div>
</div>
</div>
<div style='height:90px;width:100%;display:flex;justify-content: space-around;align-items: center;'>
<div style='width:22%;height:100%;'>
<div style='width:70px;height:70px;background: url(pbImg/hong_00004.png);background-size: 100% 100%;'>
</div>
<div style='width:70px;height:20px;font-size: 16px;color: #FF7272;letter-spacing: 0;text-align:center;'>
${res.data.alarmRed}
</div>
</div>
<div style='width:22%;height:100%;'>
<div style='width:70px;height:70px;background: url(pbImg/黄色_00004.png);background-size: 100% 100%;'>
</div>
<div style='width:70px;height:20px;font-size: 16px;color: #FFC464;letter-spacing: 0;text-align:center;'>
${res.data.alarmYellow}
</div>
</div>
<div style='width:22%;height:100%;'>
<div style='width:70px;height:70px;background: url(pbImg/蓝色_00001.png);background-size: 100% 100%;'>
</div>
<div style='width:70px;height:20px;font-size: 16px;color: #6BABFF;letter-spacing: 0;text-align:center;'>
${res.data.alarmBlue}
</div>
</div>
<div style='width:22%;height:100%;'>
<div style='width:70px;height:70px;background: url(pbImg/绿色_00004.png);background-size: 100% 100%;'>
</div>
<div style='width:70px;height:20px;font-size: 16px;color: #71FFE5;letter-spacing: 0;text-align:center;'>
${res.data.alarmGreen}
</div>
</div>
</div>
`);
map.addOverlay(label);
let closebtn = document.querySelector('.closeBtn')
//console.log(btn, 'btn');
closebtn.addEventListener('click', () => {
that.$emit('toArchives', item)
map.removeOverlay(label);
})
})
});
})
polygon.removeEventListener('mousemove')

@ -2,9 +2,7 @@ import Vue from 'vue'
import VueRouter from 'vue-router'
import box from '../components/box'
// import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
@ -52,7 +50,6 @@ const routes = [
component: () => import('@/views/realtimeWarning'),
},
// 系统管理
{
path: 'systemManagement',

@ -4,10 +4,10 @@ import vm from "../main";
import { getToken } from '@/utils/auth'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
const request = axios.create({
//baseURL: 'http://172.18.113.50:8080/zhapi',
//baseURL: 'http://172.18.113.13:8080/zhapi', // 孙强
baseURL: 'http://172.18.113.50:8080/zhapi',
// baseURL: 'http://172.18.113.13:8080/zhapi', // 孙强
//baseURL: 'http://192.168.0.188:8888/zhapi',
baseURL: `http://${window.location.host}/zhapi`,
// baseURL: `http://${window.location.host}/zhapi`,
timeout: 50000,
headers: { 'content-type': 'application/json' },
})

@ -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>&nbsp; <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> &nbsp;&nbsp;预警指标<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>

@ -3,7 +3,8 @@
<div class="box">
<div class="title">实时预警</div>
<div class="leftBox">
<zhmap class="map" :waringList="waringList" v-if="waringList && waringList.length"></zhmap>
<zhmap class="map" :waringList="waringList" @zhuanchuzhi="chuzhi" v-if="waringList && waringList.length">
</zhmap>
</div>
<div class="rightBox">
<div class="totalTitle">
@ -35,11 +36,16 @@
</div>
<el-dialog title="选择处置部门" :visible.sync="diaVisible" class="picForm">
<div class="czTitle">可选择多个部门联合处置</div>
<div class="czBody"></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="dialogFormVisible = false, tableDisable = false" v-if="!tableDisable">
<el-button @click="diaVisible = false">
</el-button>
<el-button type="primary" @click="addForm('uleForm')" v-if="!tableDisable"> </el-button>
<el-button type="primary" @click="addForm()"> </el-button>
</div>
</el-dialog>
</div>
@ -47,7 +53,7 @@
</template>
<script>
import { mapList } from '@/api/realtimeWarning'
import { mapList, deptList, addCommonApprovalProcess } from '@/api/realtimeWarning'
import zhmap from './map.vue'
export default {
components: {
@ -58,19 +64,41 @@ export default {
total: 0,
waringList: [],
diaVisible: false,
checkedDepts: [],
deptList: [],
chuzhiData: {},
}
},
created() {
mapList({ pageSize: 10, pageNum: 1 }).then(res => {
this.waringList = res.data
this.total = res.total
})
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.diaVisible = true
//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)
}
})
}
}
@ -358,6 +386,54 @@ export default {
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);
}
}

@ -187,6 +187,7 @@ background: url(pbImg/2121.png) no-repeat;
margin-top:20px;
background-size: 100% 100%;
letter-spacing: 0;
margin-left:80px;
font-weight: 400;'>转处置</div>
</div>
`);
@ -194,7 +195,8 @@ font-weight: 400;'>转处置</div>
let btn = document.querySelector('.zhuanchuzhiBtn')
//console.log(btn, 'btn');
btn.addEventListener('click', () => {
console.log(item, 'item');
//console.log(item, 'item');
that.$emit('zhuanchuzhi', item)
})
let closebtn = document.querySelector('.closeBtn')
//console.log(btn, 'btn');

@ -70,7 +70,6 @@
<el-option label="地图" value="地图">
</el-option>
</el-select>
<div class="middleBox" v-if="Selectvalue == '排名'">
<el-tabs type="border-card" class="topTabs" v-model="topTabsName" @tab-click="gettopSort()">
<el-tab-pane label="月度" name="month"></el-tab-pane>
@ -134,7 +133,7 @@
</div>
</div>
</div>
<offLineMap class="middleBox2" v-else></offLineMap>
<offLineMap class="middleBox2" @toArchives="toArchives" v-else></offLineMap>
</div>
</template>
<script>
@ -186,6 +185,13 @@ export default {
goMore() {
this.$router.push({ path: '/home/enterpriseRank' })
},
toArchives(val) {
sessionStorage.setItem('companyID', val.companyId)
sessionStorage.setItem('companyName', val.companyName)
this.$router.push({
name: 'archives',
})
}
},
}
</script>

Loading…
Cancel
Save