<template> <div class="test-5" style="height: 100%;overflow:auto;overflow-x:hidden"> <!-- 预警信息 --> <div> <div class="item1" > <!--<span class="dot">--> <!--<span class="dot-inner"></span>--> <!--</span>--> <span style="letter-spacing: 3px; color: #000000; cursor: pointer" >事件接报列表</span > </div> <div style="width: 100%" v-for="item in receiveList"> <div class="el-form-div title-div"> <div style="width: 80%;margin-left: 5px;"> <img v-if="(item.governmentRead==0&&userType==-2)||(item.companyRead==0&&userType!=-2)" style="vertical-align:middle;" src="@/assets/images/new.png" alt="" /> 事件名称:{{item.eventName}} </div> <!--<div v-if="item.status==2" style="width: 80%;margin-left: 5px;">待处置<span--> <!--v-if="(item.governmentRead==0&&userType==-2)||(item.companyRead==0&&userType!=-2)" class="massage"> (您有新消息)</span>--> <!--</div>--> <!--<div v-if="item.status==3" style="width: 80%;margin-left: 5px;">已处置<span--> <!--v-if="(item.governmentRead==0&&userType==-2)||(item.companyRead==0&&userType!=-2)" class="massage"> (您有新消息)</span>--> <!--</div>--> <!--<div v-if="item.status==4" style="width: 80%;margin-left: 5px;">已完结</div>--> <!--<div style="height:30px;color: red;cursor:pointer;" v-if="userType==-2" @click="handleDelete(item.id)">关闭事件</div>--> </div> <div class="content-div el-form-div" style="margin-top: 10px;overflow:hidden;"> <div style="width: 60%; ">事件状态: <span style="color: #ff0000" v-if="item.status==1">未指派</span> <span style="color: #ff0000" v-if="item.status==2">待处置</span> <span style="color: #ff0000" v-if="item.status==3">处理中</span> <span v-if="item.status==4">已完结</span> </div> <div>事件分类:{{item.eventTypeName}}</div> </div> <div class="content-div el-form-div"> <div style="width: 60%">发生时间:{{item.inforTime}}</div> <div>事件级别:{{item.eventGradeName}}</div> </div> <div class="content-div">事件地点:{{item.address}}</div> <div class="content-div">最新进展:<span v-if="item.handleList!=null">{{item.handleList.management}}</span></div> <div class="el-form-div"> <div v-if="item.status==1 && userType==-2" class="button-div" @click="assignTask(item)">任务指派</div> <div v-if="userType==-2" class="button-div" @click="showList(item)" >预案指引</div> <div v-if="item.status==3 && userType==-2" class="button-div" @click="endevent(item.id)">事件结案</div> <div v-if="userType!=-2" class="button-div" @click="showList(item)">信息处置</div> <div class="button-div" @click="showDetail(item.id,item.eventName)">详情</div> <div class="button-div" style="background: #FA6767;" v-if="userType==-2" @click="handleDelete(item.id)">关闭事件</div> </div> </div> <div id = "detail" class="show-detail" style="display: none;margin-top: 15px;margin-bottom: 20px;position:fixed;right: 470px;width: 300px; background: #ffffff;top: 110px;border-right:1px solid #99a9bf"> <div class="el-form-div detail-back" style="height: 30px;"> <div class="detail-title" >事件详情</div> <div style="cursor: pointer;" @click="closeDetail()"> <img style="width: 14px;height: 14px;margin-top: 7px;" src="@/assets/mapImages/close.png" alt="" /> </div> </div> <timeline :timeline-list="handleList" :nowItem="nowItem"></timeline> <div style="height: 40px;"> </div> </div> </div> <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body> <div class="el-form-div" style="width: 100%;margin-bottom: 20px;overflow-y:hidden;"> <div style="width: 140px;"> <div class="el-form-div" > <div class="num-div" @click="switchForm(nowItem,$event)">1</div> <div v-if="handleList.length>0" class="num-line"></div> </div> <div class="num-title"> 事件发布 </div> <div class="num-title"> {{dataTime}} </div> </div> <div v-for="(item,index) in handleList" style="width: 140px;"> <div class="el-form-div" > <div class="num-div" @click="switchForm(item,$event)">{{index+2}}</div> <div v-if="index<handleList.length-1" class="num-line"></div> </div> <div v-if="item.eventType==1" class="num-title"> 处置信息 </div> <div v-if="item.eventType==2" class="num-title"> 预案指引 </div> <div class="num-title"> {{item.createTime}} </div> </div> </div> <el-row :gutter="10" class="mb8"> <el-col :span="1.5" v-if="userType!=-2"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" >新增处置信息</el-button> </el-col> <el-col :span="1.5" v-if="userType==-2"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleUpdate" >新增预案指引</el-button> </el-col> </el-row> <el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form-item label="事件名称" v-if="form.eventType==3"> <el-input v-model="form.eventName" :readonly="readonly" /> </el-form-item> <el-form-item label="事件分类" v-if="form.eventType==3"> <el-input v-model="form.eventTypeName" :readonly="readonly"/> </el-form-item> <el-form-item label="事件等级" v-if="form.eventType==3"> <el-input v-model="form.eventGradeName" :readonly="readonly"/> </el-form-item> <el-form-item label="发生时间" v-if="form.eventType==3"> <el-input v-model="form.inforTime" :readonly="readonly"/> </el-form-item> <el-form-item label="发生地点" v-if="form.eventType==3"> <el-input v-model="form.address" :readonly="readonly"/> </el-form-item> <el-form-item label="处置信息" prop="management" v-if="form.eventType==1"> <el-input v-model="form.management" type="textarea" placeholder="请输入处置信息" /> </el-form-item> <el-form-item label="指导意见" prop="management" v-if="form.eventType==2"> <el-input v-model="form.management" type="textarea" placeholder="请输入指导意见" /> </el-form-item> <el-form-item label="预案附件" :style="display2" v-if="form.eventType==2"> <span class="dbtn" @click="checkFile(form.managementEvent)" v-if="form.managementEvent != null && form.managementEvent!=''" > <i class="el-icon el-icon-view"></i>查看/下载 </span> <span v-else>-</span> </el-form-item> <el-form-item label="处置信息附件" :style="display2" v-if="form.eventType==1"> <span class="dbtn" @click="checkFile(form.managementEvent)" v-if="form.managementEvent != null && form.managementEvent!=''" > <i class="el-icon el-icon-view"></i>查看/下载 </span> <span v-else>-</span> </el-form-item> <el-form-item label="操作时间" :style="display2"> <el-input v-model="form.createTime" :readonly="readonly"/> </el-form-item> <el-form-item label="应急预案" prop="planId" :style="display" v-if="form.eventType==2"> <el-select v-model="form.planId" placeholder="请选择预案等级" @change="fananchange" > <el-option v-for = "dict in planInfoList" :key = "dict.planId" :label = "dict.planTitle" :value = "dict.planId" /> </el-select> </el-form-item> <el-form-item label="处置附件" prop="managementEvent" :style="display" v-if="form.eventType==1"> <FileUpload listType="picture" :fileType="fileType" @resFun="getFileInfo" @remove="listRemove" :fileArr="fileList" /> <el-input v-show="false" disabled v-model="form.managementEvent"></el-input> <!--<el-input v-model="form.iconUrl" type="textarea" placeholder="请输入内容" />--> </el-form-item> </el-form> <div slot="footer" class="dialog-footer" :style="display"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> <!-- 添加或修改事件处置对话框 --> </div> </template> <script> import { mapGetters } from 'vuex' import { listReceive, getReceive, delReceive, addReceive, updateReceive } from "@/api/system/receive"; import { listHandle, getHandle, delHandle, addHandle, updateHandle, exportHandle } from "@/api/system/handle"; import { listPlanInfo } from "@/api/system/planInfo"; import Timeline from "./Timeline"; import { getUserProfile } from "@/api/system/user"; import FileUpload from '@/components/FileUpload'; let uploadfile = require("@/assets/uploadfile.png"); // 当不轮播时候的刷新时间 export default { components: { // RightPic, FileUpload, Timeline }, data() { return { readonly:true, fileType:['png', 'jpg', 'jpeg',"doc", "xls", "ppt", "txt", "pdf"], dataTime:"", // 是否显示弹出层 open: false, open2: false, fileList:[], receiveList:[], userType:"", display:"display:none", display2:"", //方案列表 planInfoList:[], // 查询参数 queryParams: { pageNum: 1, pageSize: 100, status:5, enterpriseId:"" }, detailTitle:"", form:'', // 遮罩层 loading: true, title:"", title2:"", // 总条数 total: 0, // 事件处置表格数据 handleList: [], // 查询参数 queryParams2: { pageNum: 1, pageSize: 10, eventId: null, }, dongtai:[ ], // 表单校验 rules: { management: [ { required: true, message: "请输入处置信息", trigger: "blur" }, ], }, eventTypeOptions:[], eventGradeOptions:[], nowItem:{}, }; }, computed:{ ...mapGetters([ "emergencyData" ]), }, created(){ this.getDicts("event_type").then(response => { this.eventTypeOptions = response.data; }); this.getDicts("event_grade").then(response => { this.eventGradeOptions = response.data; }); }, mounted() { // this.$nextTick(()=>{ // this.getScrollHeight(); // }) getUserProfile().then(response => { this.userType = response.data.deptId; if(this.userType!=-2){ this.queryParams.enterpriseId = response.data.deptId; } this.getList(1); }); this.socket(); // //定时检测新消息 // setInterval(() => { // // }, 5000); }, watch:{ emergencyData:{ handler (val) { this.showDetail(val.eventId,val.eventName); console.log('深度监听:', val); }, deep: true } }, methods: { socket() { console.log("socket执行"); this.ws = new WebSocket( "ws://222.223.203.154:8902/gassafety/websocketServer" ); this.ws.onopen = (evt) => { console.log("WebSockets开启"); }; this.ws.onmessage = (evt) => { console.log("推送", evt); const obj = JSON.parse(evt.data); console.log("接受socketobj", obj); this.getNow(); }; this.ws.onclose = () => { console.log("ws协议关闭"); }; }, getNow(){ var params = this.queryParams; if(this.userType==-2){ params.governmentRead=0 }else { params.companyRead=0 } listReceive(params).then(response => { var newList = response.rows; newList.forEach((model) => { this.receiveList.forEach((item) => { //判断登录账户等级 if(item.id == model.id){ if(this.userType==-2){ item.governmentRead =0; item.status=3; }else { item.companyRead =0; } } }); }); }); }, /** 查询事件接报列表 */ getList(type) { listReceive(this.queryParams).then(response => { this.receiveList = response.rows; if(type==1){ if(this.$route.query.eventId!=undefined){ this.showDetail(this.$route.query.eventId,this.$route.query.eventName); } } // this.receiveList.forEach((item) => { //console.log("ggg"+item.eventGrade, this.eventGradeOptions[item.eventGrade-1].dictLabel) item.eventGradeName = this.eventGradeOptions[item.eventGrade-1].dictLabel; item.eventTypeName = this.eventTypeOptions[item.eventType-1].dictLabel; console.log(item) }); //this.total = response.total; //console.log(this.receiveList) }); }, //获取事件处置列表 getHandleList() { this.loading = true; listHandle(this.queryParams2).then(response => { this.handleList = response.rows; if(this.handleList.length>0){ this.form = this.handleList[this.handleList.length-1] } this.total = response.total; this.loading = false; this.$nextTick(() => { this.showlast(); }) }); }, showlast(){ if(document.getElementsByClassName("num-div2").length>0){ document.getElementsByClassName("num-div2")[0].setAttribute("class","num-div") } document.getElementsByClassName("num-div")[this.handleList.length].setAttribute("class","num-div2") }, showList(item) { this.closeDetail(); item.eventType=3; this.nowItem = item; this.dataTime = item.createTime; this.form = item; this.open = true; this.title = "事件处置"; this.queryParams2.eventId= item.id // if(this.userType==-2){ // this.queryParams2.eventType= 2; // }else { // this.queryParams2.eventType= 1; // } this.getHandleList(); }, choice() { this.getList(); }, getType(row){ if(row.eventType==1){ return "处置信息" } return "预案指引" }, /** 新增按钮操作 */ handleAdd() { this.reset(); this.fileList=[] this.form.eventType=1; this.display2="display:none"; this.display=""; //this.title2 = "添加事件处置"; this.form.eventId = this.queryParams2.eventId }, /** 新增预案 */ handleUpdate() { this.reset(); this.display2="display:none"; this.display=""; //this.form = row; // this.open2 = true; // this.title2 = "预案指引"; this.form.eventId = this.queryParams2.eventId this.form.eventType=2; this.yuanList(); }, yuanList(){ var params ={pageNum: 1, pageSize: 1000}; listPlanInfo(params).then(response => { this.planInfoList = response.rows; }); }, fananchange(value){ let obj = {}; obj = this.planInfoList.find((item)=>{ return item.planId === value; ``}); this.form.planTitle = obj.planTitle; this.form.managementEvent = obj.iconUrl; this.form.planId = value; }, // 表单重置 reset() { this.form = { handleId: null, eventId: null, enterpriseId: null, enterpriseName: null, management: null, managementEvent:null, planId: null, planTitle:'', planUrl:'', guidanceOpinion: null, }; this.resetForm("form"); }, /** 提交按钮 处置信息*/ submitForm() { this.display2=""; this.display="display:none"; this.$refs["form"].validate(valid => { if (valid) { if (this.form.handleId != null) { updateHandle(this.form).then(response => { this.msgSuccess("修改成功"); this.getHandleList(); }); } else { addHandle(this.form).then(response => { this.msgSuccess("新增成功"); this.getHandleList(); this.upReceive(this.form.eventId); }); } } }); }, upReceive(id){ var receiveform = {id:id} if(this.form.eventType==2){ receiveform.companyRead=0; }else { receiveform.status=3; receiveform.governmentRead=0; } updateReceive(receiveform).then(response => { }); }, updateend(id){ var receiveform = {id:id,status:4} updateReceive(receiveform).then(response => { }); }, // 取消按钮 cancel() { this.display2=""; this.display="display:none"; //this.reset(); this.getHandleList(); }, endevent(id){ var that = this; this.$confirm('是否确认事件结案?', "警告", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(function() { return that.updateend(id); }).then(() => { this.getList(); this.msgSuccess("处理成功"); }).catch(() => {}); }, /** 删除按钮操作 */ handleDelete2(row) { const handleIds = row.handleId || this.ids; this.$confirm('是否确认删除事件处置数据项?', "警告", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(function() { return delHandle(handleIds); }).then(() => { this.getHandleList(); this.msgSuccess("删除成功"); }).catch(() => {}); }, /** 删除按钮操作 */ handleDelete(id) { this.$confirm('是否确认取消事件接报数据项?', "警告", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(function() { return delReceive(id); }).then(() => { this.getList(); this.msgSuccess("删除成功"); }).catch(() => {}); }, assignTask(item){ this.$parent.handleUpdate(item); }, async showDetail(id,title){ //列表信息 this.receiveList.forEach((item) => { if(item.id==id){ this.nowItem = item; } }); //详情 var that = this; that.detailTitle=title; that.queryParams2.eventId= id that.queryParams2.pageSize=100; await listHandle(that.queryParams2).then(response => { this.handleList = response.rows; // if(response.total==0){ // this.msgSuccess("暂无详情"); // }else{ document.getElementById("detail").style.display=""; that.updateRead(id); //} }); }, closeDetail(id,event){ document.getElementById("detail").style.display="none"; }, //更改读取状态 updateRead(id){ var receiveform = {id:id} if(this.userType==-2){ receiveform.governmentRead = 1; }else { receiveform.companyRead = 1; } updateReceive(receiveform).then(response => { }); this.receiveList.forEach((item) => { if(item.id == id){ if(this.userType==-2){ item.governmentRead =1; }else { item.companyRead =1; } } }); }, switchForm(item,$event){ if(document.getElementsByClassName("num-div2")[0]!=undefined){ document.getElementsByClassName("num-div2")[0].setAttribute("class","num-div") } $event.target.setAttribute("class","num-div2"); if(item!=null){ this.form = item; } }, //上传 getFileInfo(res){ //this.form.dealPlan = res.fileName; this.form.managementEvent = res.url; this.fileList.push({ name: res.fileName, url: uploadfile, }); }, listRemove(e) { this.form.managementEvent = ""; this.fileList = []; }, checkFile(url) { window.open(url,'_blank'); }, }, }; </script> <style lang="scss" scoped> .item1 { height: 30px; font-size: 15px; line-height: 30px; font-weight: 700; background: url(../../assets/images/chuzhilist.png) repeat-x 50px 10px; background-size:360px 7px; background-repeat: no-repeat; text-align: center; } .dot { display: inline-block; position: relative; width: 10px; height: 10px; background: rgb(30, 185, 190); border-radius: 50%; margin-right: 10px; margin-left: 10px; margin-bottom: 2px; } .dot-inner { background: #44d7dc; position: absolute; top: 0; left: 0; box-sizing: border-box; display: block; width: 100%; height: 100%; border-radius: 50%; -webkit-animation: vabDot 1.2s ease-in-out infinite; animation: vabDot 1.2s ease-in-out infinite; } .content-div{ color: #000000; font-size: 14px; height: 25px; line-height: 25px; margin-left: 15px; } .el-form-div{ display:flex; flex-direction:row; justify-content:flex-start; width: 100%; } .button-div{ cursor:pointer; color: #ffffff; margin-bottom: 8px; border-radius: 2px; width: 88px; height: 32px; line-height: 32px; text-align: center; font-size: 14px; margin-left: 22px; margin-top: 10px; background: #4091F7; } .title-div{ width: 100%; margin-left: 12px; height: 30px; color: #ffffff; line-height: 30px; background: url(../../assets/images/yjcz.png); background-size:450px 30px; background-repeat: no-repeat; } .detail-back{ background: url(../../assets/images/yjcz.png); background-size:300px 30px; } .test-5::-webkit-scrollbar { /*滚动条整体样式*/ width : 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .test-5::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius : 10px; background-color: #1c84c6; background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent ); } .dbtn { display: inline-block; line-height: normal; padding-left: 2px; padding-right: 2px; cursor: pointer; border-radius: 3px; border-style: solid; border-width: 0; color: rgb(48, 180, 107); } .detail-title{ height: 100%; width: 270px; color: #ffffff; margin-top: 3px; margin-left: 10px; } .massage{ color: #00ffff; } .test-5::-webkit-scrollbar-track { /*滚动条里面轨道*/ box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); background : #112238; border-radius: 10px; } .num-div{ width: 30px; height: 30px; border:2px solid #b0b0b0; color: #b0b0b0; border-radius: 15px; text-align: center; font-size: 18px; line-height: 26px; margin-left: 5px; cursor:pointer; } .num-div2{ width: 30px; height: 30px; border:2px solid #000000; color: #000000; border-radius: 15px; text-align: center; font-size: 18px; line-height: 26px; margin-left: 5px; cursor:pointer; } .num-line{ margin-left: 5px; width: 100px; height: 1px; border:1px solid #b0b0b0; margin-top: 14px; } .num-title{ width: 140px; height: 30px; line-height: 30px; } .show-detail{ overflow-y: scroll; max-height: 800px; } .show-detail::-webkit-scrollbar { width:0px; } ::v-deep .el-dialog:not(.is-fullscreen) { margin-top: 13vh !important; min-height: 500px; } </style>