|
|
@@ -7,29 +7,26 @@
|
|
|
<template>
|
|
|
<div class="visual-con hz_body">
|
|
|
<!--主体-->
|
|
|
- <div class="con_left" style="height: 83%;">
|
|
|
+ <div class="con_left" style="height: 83%;top: 141px;">
|
|
|
<div class="list_tit">应急中心</div>
|
|
|
<el-input
|
|
|
placeholder="请输入事件名称"
|
|
|
suffix-icon="el-icon-search"
|
|
|
- v-model="listParams.deviceName">
|
|
|
+ v-model="eventParams.eventTitle">
|
|
|
<template #append></template>
|
|
|
</el-input>
|
|
|
<dl class="sp_list">
|
|
|
<dt>
|
|
|
- <span class="dt1">序号</span>
|
|
|
- <span class="dt2">设备名称</span>
|
|
|
- <span class="dt3">定位</span>
|
|
|
+ <span style="width: 40px;text-align: center;">序号</span>
|
|
|
+ <span style="width: 128px;text-indent: 20px;">事件名称</span>
|
|
|
+ <span style="width: 128px;text-align: center;">事件描述</span>
|
|
|
</dt>
|
|
|
<div class="hei_scroll hei56">
|
|
|
- <dd v-for="(e,idx) in deviceListSearch" :key="idx" @click="dropLocation(e.latitude,e.longitude)">
|
|
|
- <span class="dt1">{{ idx + 1 }}</span>
|
|
|
- <span class="dt2">{{ e.deviceName }}</span>
|
|
|
- <span class="dt3">
|
|
|
- <img
|
|
|
- style="cursor: pointer;"
|
|
|
- src="../assets/images/sentinel/hz_list_d.png"
|
|
|
- />
|
|
|
+ <dd v-for="(e,idx) in deviceListSearch" :key="idx" @click="getEventDetail(e.eventId,e.latitude,e.longitude)">
|
|
|
+ <span style="width: 40px;text-align: center;">{{ idx + 1 }}</span>
|
|
|
+ <span style="width: 128px;text-wrap: nowrap;overflow: hidden;text-overflow: ellipsis;" :title="e.eventTitle">{{ e.eventTitle }}</span>
|
|
|
+ <span style="width: 128px;text-wrap: nowrap;overflow: hidden;text-overflow: ellipsis;" :title="e.eventDescription">
|
|
|
+ {{ e.eventDescription }}
|
|
|
</span>
|
|
|
</dd>
|
|
|
</div>
|
|
|
@@ -38,11 +35,12 @@
|
|
|
background
|
|
|
style="justify-content: space-between;display: flex;"
|
|
|
layout="prev, pager, next"
|
|
|
- :current-page.sync="listParams.pageNum"
|
|
|
+ :current-page.sync="eventParams.pageNum"
|
|
|
@current-change="pageNumHasChanged"
|
|
|
:total="deviceTotal">
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
+ <div class="setEmergencyEvent" @click="setEmergencyEvent">发起应急事件</div>
|
|
|
<div class="visual-body">
|
|
|
<!--弹框演示模板 开始-->
|
|
|
<!-- <img src="../assets/images/sentinel/hz_qy.png" class="qydw1"/>
|
|
|
@@ -74,30 +72,36 @@
|
|
|
<supermap ref="supermap" style="width: 100%;height: 100vh;" @preview="preview">
|
|
|
</supermap>
|
|
|
</div>
|
|
|
- <div class="con_left" style="left: 1572px;height: 83%;">
|
|
|
+ <div class="con_left" style="left: 1572px;height: 87%;">
|
|
|
<div class="list_tit">应急预案列表</div>
|
|
|
<el-input
|
|
|
placeholder="请输入应急预案名称"
|
|
|
suffix-icon="el-icon-search"
|
|
|
- v-model="listParams.deviceName">
|
|
|
+ v-model="planParams.contingencyPlanName">
|
|
|
<template #append></template>
|
|
|
</el-input>
|
|
|
<dl class="sp_list">
|
|
|
- <div class="hei_scroll hei56">
|
|
|
- <!-- <dd v-for="(e,idx) in deviceListSearch" :key="idx" @click="dropLocation(e.latitude,e.longitude)">
|
|
|
- <span class="dt1">{{ idx + 1 }}</span>
|
|
|
- <span class="dt2">{{ e.deviceName }}</span>
|
|
|
- <span class="dt3">
|
|
|
- <img
|
|
|
- style="cursor: pointer;"
|
|
|
- src="../assets/images/sentinel/hz_list_d.png"
|
|
|
- />
|
|
|
- </span>
|
|
|
- </dd> -->
|
|
|
+ <div class="hei_scroll hei67">
|
|
|
+ <dd v-for="(e,idx) in planListSearch" :key="idx" @click="dropLocation(e.latitude,e.longitude)" class="planItem">
|
|
|
+ <div style="width: 100%;" :title=" '预案内容：' + e.contingencyPlanContent">
|
|
|
+ <img src="@/assets/images/planIcon.png">
|
|
|
+ <div>
|
|
|
+ <div :title="e.contingencyPlanName">{{ e.contingencyPlanName }}</div>
|
|
|
+ <div style="height: 36%;line-height: 1;">{{ e.createTime }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dd>
|
|
|
</div>
|
|
|
</dl>
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ style="justify-content: space-between;display: flex;"
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :current-page.sync="planParams.pageNum"
|
|
|
+ @current-change="planPageNumHasChanged"
|
|
|
+ :total="planTotal">
|
|
|
+ </el-pagination>
|
|
|
</div>
|
|
|
-
|
|
|
<!-- 应急事件详情弹窗 -->
|
|
|
<el-dialog
|
|
|
title="应急事件详情"
|
|
|
@@ -106,39 +110,244 @@
|
|
|
style="margin-top: 5vh !important;"
|
|
|
>
|
|
|
<div class="transferBg d1">
|
|
|
- <h4>事件基本信息</h4>
|
|
|
+ <h3>事件基本信息</h3>
|
|
|
<div class="eventInfo_contain">
|
|
|
- <div>事件名称：超级大街燃气泄漏</div>
|
|
|
- <div>事件类型：燃气</div>
|
|
|
- <div>事件发起时间：2025/02/06 11:45:11</div>
|
|
|
- <div>事件发起人：张三</div>
|
|
|
- <div>事件发生位置：紫气大街19号5694</div>
|
|
|
- <div>事件发起原因：燃气管道泄漏</div>
|
|
|
+ <div>事件名称：{{ emergencyEventDetails.eventTitle || '' }}</div>
|
|
|
+ <div>事件类型：{{ emergencyEventDetails.eventTypeName || '' }}</div>
|
|
|
+ <div>事件发起时间：{{ emergencyEventDetails.createTime || '' }}</div>
|
|
|
+ <div>事件办结时间：{{ emergencyEventDetails.updateTime || '' }}</div>
|
|
|
+ <div>事件发起人：{{ emergencyEventDetails.processingPerson || '' }}</div>
|
|
|
+ <div>事件发生位置：{{ emergencyEventDetails.eventLocation || '' }}</div>
|
|
|
+ <div>事件发起原因：{{ emergencyEventDetails.eventReason || '' }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="transferBg d2">
|
|
|
- <h4>事件处理流程</h4>
|
|
|
+ <h3>事件处理流程</h3>
|
|
|
+ <div class="progress_contain">
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="e1">
|
|
|
+ <img src="@/assets/images/eventLogo.png">
|
|
|
+ <div>事件发起</div>
|
|
|
+ </div>
|
|
|
+ <div class="e2">
|
|
|
+ <img src="@/assets/images/eventLogo.png">
|
|
|
+ <div>事件签收</div>
|
|
|
+ </div>
|
|
|
+ <div class="e3">
|
|
|
+ <img src="@/assets/images/eventLogo.png">
|
|
|
+ <div>事件处理</div>
|
|
|
+ </div>
|
|
|
+ <div class="e4">
|
|
|
+ <img src="@/assets/images/eventLogo.png">
|
|
|
+ <div>事件办结</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="d3">
|
|
|
<div class="transferBg video">
|
|
|
- <h4>现场画面</h4>
|
|
|
+ <h3>现场画面</h3>
|
|
|
+ <video
|
|
|
+ controls
|
|
|
+ width="650"
|
|
|
+ height="380"
|
|
|
+ :src="emergencyEventDetails.videoPath"
|
|
|
+ class="video_context"
|
|
|
+ id="video"
|
|
|
+ ref="video"
|
|
|
+ >
|
|
|
+ </video>
|
|
|
</div>
|
|
|
<div class="mid">
|
|
|
- <div class="transferBg info"></div>
|
|
|
- <div class="transferBg pics"></div>
|
|
|
+ <div class="transferBg info">
|
|
|
+ <h3>现场状况</h3>
|
|
|
+ <div>
|
|
|
+ <div>事件当前伤亡：{{ emergencyEventDetails.eventCasualties || '' }}人</div>
|
|
|
+ <div>事件预警影响：{{ emergencyEventDetails.eventEarlyWarning || '' }}人</div>
|
|
|
+ <div>预计解决时间：{{ emergencyEventDetails.eventResolutionTime || '' }}</div>
|
|
|
+ <div>当前处理人员：{{ emergencyEventDetails.processingPerson || '' }}</div>
|
|
|
+ <div>处理人员电话：{{ emergencyEventDetails.personPhone || '' }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="transferBg pics">
|
|
|
+ <h3>其他画面</h3>
|
|
|
+ <div class="otherPics">
|
|
|
+ <img
|
|
|
+ v-for="(e,idx) in emergencyEventDetails.attachPath ? emergencyEventDetails.attachPath.concat(emergencyEventDetails.attachPath).concat(emergencyEventDetails.attachPath).concat(emergencyEventDetails.attachPath) : []"
|
|
|
+ :key="idx"
|
|
|
+ :src="e"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="right transferBg">
|
|
|
-
|
|
|
+ <h3>各部门在线情况</h3>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+ <!-- 发起应急事件弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ title="发起应急事件"
|
|
|
+ :visible.sync="setEventDialogVisible"
|
|
|
+ custom-class="emergencyEventDialog"
|
|
|
+ style="margin-top: 5vh !important;"
|
|
|
+ >
|
|
|
+
|
|
|
+ <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
|
|
+ <h3 style="margin-left: 1%;">事件基本信息</h3>
|
|
|
+ <div style="margin-top: 2%;"></div>
|
|
|
+ <div style="display: flex;width: 100%;height: 30%;flex-wrap: wrap;align-content: flex-start;">
|
|
|
+ <el-form-item label="事件名称" prop="eventTitle" style="width: 350px;height: 40px;">
|
|
|
+ <el-input v-model="ruleForm.eventTitle">
|
|
|
+ <template #prepend></template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item label="事件发起人" prop="createName" style="width: 350px;height: 40px;">
|
|
|
+ <el-input v-model="ruleForm.createName"></el-input>
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item label="经度" prop="longitude" style="width: 350px;height: 40px;">
|
|
|
+ <el-input v-model="ruleForm.longitude"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="纬度" prop="latitude" style="width: 350px;height: 40px;">
|
|
|
+ <el-input v-model="ruleForm.latitude"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="图片" prop="fileList" style="width: 1200px;height: 40px;">
|
|
|
+ <el-upload
|
|
|
+ multiple
|
|
|
+ :action="uploadFileUrl"
|
|
|
+ :before-upload="handleBeforeUpload"
|
|
|
+ :file-list="fileList"
|
|
|
+ :limit="limit"
|
|
|
+ accept="image/*"
|
|
|
+ :on-error="handleUploadError"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ :on-success="handleUploadSuccess"
|
|
|
+ :show-file-list="false"
|
|
|
+ :headers="headers"
|
|
|
+ class="upload-file-uploader"
|
|
|
+ ref="upload"
|
|
|
+ >
|
|
|
+ <!-- 上传按钮 -->
|
|
|
+ <el-button size="mini" type="primary">选取图片</el-button>
|
|
|
+
|
|
|
+ <!-- 文件列表 -->
|
|
|
+ <transition-group class="upload-file-list el-upload-list el-upload-list--text fileUls" name="el-fade-in-linear" tag="ul">
|
|
|
+ <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content"
|
|
|
+ v-for="(file, index) in fileList">
|
|
|
+ <el-link :href="file.url" :underline="false" target="_blank">
|
|
|
+ <span class="el-icon-document"> {{ file.webName }} </span>
|
|
|
+ </el-link>
|
|
|
+ <div class="ele-upload-list__item-content-action">
|
|
|
+ <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </transition-group>
|
|
|
+ <!-- 上传提示 -->
|
|
|
+ <div class="el-upload__tip" slot="tip" v-if="showTip">
|
|
|
+ 请上传
|
|
|
+ <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
|
|
|
+ <!-- <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b></template>-->
|
|
|
+ 的文件
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="事件描述" prop="eventDescription" style="width: 1000px;height: 100px;">
|
|
|
+ <el-input type="textarea" v-model="ruleForm.eventDescription" class="descInput"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <h3 style="margin:2% 0 0 1%;">现场状况信息</h3>
|
|
|
+ <div style="margin-top: 2%;"></div>
|
|
|
+ <div style="display: flex;width: 100%;height: 44%;flex-wrap: wrap;align-content: flex-start;">
|
|
|
+ <el-form-item label="事件发生位置" prop="contingencyDetail.eventLocation" style="width: 350px;height: 40px;">
|
|
|
+ <el-input v-model="ruleForm.contingencyDetail.eventLocation">
|
|
|
+ <template #prepend></template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="事件发起原因" prop="contingencyDetail.eventReason" style="width: 350px;height: 40px;">
|
|
|
+ <el-input v-model="ruleForm.contingencyDetail.eventReason">
|
|
|
+ <template #prepend></template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="事件当前伤亡" prop="contingencyDetail.eventCasualties" style="width: 350px;height: 40px;">
|
|
|
+ <el-input v-model="ruleForm.contingencyDetail.eventCasualties" type="number">
|
|
|
+ <template #prepend></template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="事件预警影响" prop="contingencyDetail.eventEarlyWarning" style="width: 350px;height: 40px;">
|
|
|
+ <el-input v-model="ruleForm.contingencyDetail.eventEarlyWarning" type="number">
|
|
|
+ <template #prepend></template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="当前处理人员" prop="contingencyDetail.processingPerson" style="width: 350px;height: 40px;">
|
|
|
+ <el-input v-model="ruleForm.contingencyDetail.processingPerson">
|
|
|
+ <template #prepend></template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="处理人员电话" prop="contingencyDetail.personPhone" style="width: 350px;height: 40px;">
|
|
|
+ <el-input v-model="ruleForm.contingencyDetail.personPhone">
|
|
|
+ <template #prepend></template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="预计解决时间" prop="contingencyDetail.eventResolutionTime" style="width: 350px;height: 40px;">
|
|
|
+ <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="预计解决时间" v-model="ruleForm.contingencyDetail.eventResolutionTime" style="width: 100%;"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="视频" prop="contingencyDetail.videoPath" style="width: 350px;height: 40px;">
|
|
|
+ <el-upload
|
|
|
+ multiple
|
|
|
+ :action="uploadFileUrl"
|
|
|
+ :before-upload="handleVideoBeforeUpload"
|
|
|
+ :file-list="videoList"
|
|
|
+ limit="1"
|
|
|
+ :on-error="handleUploadError"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ :on-success="handleVideoUploadSuccess"
|
|
|
+ :show-file-list="false"
|
|
|
+ :headers="headers"
|
|
|
+ class="upload-file-uploader"
|
|
|
+ ref="upload"
|
|
|
+ >
|
|
|
+ <!-- 上传按钮 -->
|
|
|
+ <el-button size="mini" type="primary">选取视频</el-button>
|
|
|
+ <!-- 上传提示 -->
|
|
|
+ <!-- 文件列表 -->
|
|
|
+ <transition-group class="upload-file-list el-upload-list el-upload-list--text videoUls" name="el-fade-in-linear" tag="ul">
|
|
|
+ <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content"
|
|
|
+ v-for="(file, index) in videoList">
|
|
|
+ <el-link :href="file.url" :underline="false" target="_blank">
|
|
|
+ <span class="el-icon-document"> {{ file.webName }} </span>
|
|
|
+ </el-link>
|
|
|
+ <div class="ele-upload-list__item-content-action">
|
|
|
+ <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </transition-group>
|
|
|
+ <!-- <div class="el-upload__tip" slot="tip" v-if="showTip">
|
|
|
+ 请上传
|
|
|
+ <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
|
|
|
+ 的文件
|
|
|
+ </div> -->
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <el-form-item style="float: right;">
|
|
|
+ <el-button type="primary" @click="submitForm('ruleForm')">发起</el-button>
|
|
|
+ <el-button @click="resetForm('ruleForm')">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import Cookies from 'js-cookie'
|
|
|
+ import { getToken } from '@/utils/auth'
|
|
|
import supermap from '@/components/supermap-2.5d' //超图
|
|
|
import {getUserProfile} from "@/api/system/user";
|
|
|
+ import {
|
|
|
+ getEventList,
|
|
|
+ getPlanList,
|
|
|
+ getDescriptionByContingency,
|
|
|
+ eventReport
|
|
|
+ } from "@/api/event.js"
|
|
|
import {
|
|
|
listDeviceAll,
|
|
|
selectBrandList,
|
|
|
@@ -171,7 +380,8 @@
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- this.getListDeviceAll()
|
|
|
+ this.getEventList()
|
|
|
+ this.getPlanList()
|
|
|
// 查询品牌
|
|
|
selectBrandList().then(res => {
|
|
|
if(res.data){
|
|
|
@@ -200,8 +410,20 @@
|
|
|
input1: '',
|
|
|
title:'四平市智慧哨兵监管平台',
|
|
|
deviceList:[], // 设备列表
|
|
|
- deviceListSearch:[], // 设备列表检索
|
|
|
+ deviceListSearch:[], // 设备列表检索,
|
|
|
+ uploadFileUrl: process.env.VUE_APP_BASE_API + '/file/upload', // 上传的图片服务器地址
|
|
|
+ headers: {
|
|
|
+ Authorization: 'Bearer ' + getToken()
|
|
|
+ },
|
|
|
+ // 数量限制
|
|
|
+ limit: 5,
|
|
|
+ fileList:[],
|
|
|
+ videoList:[],
|
|
|
+ uploadList:[],
|
|
|
+ videoUploadList:[],
|
|
|
deviceTotal:0,
|
|
|
+ number: 0,
|
|
|
+ videoNumber: 0,
|
|
|
listParams:{
|
|
|
brand:'',
|
|
|
deviceName:'',
|
|
|
@@ -212,10 +434,149 @@
|
|
|
value: '',
|
|
|
isDetailVisible:false, // 设备弹窗显隐flag
|
|
|
detailInfo:{}, // 设备详情信息
|
|
|
- dialogVisible:true
|
|
|
+ dialogVisible:false,
|
|
|
+ setEventDialogVisible:false,
|
|
|
+ eventParams:{
|
|
|
+ pageNum:1,
|
|
|
+ pageSize:10,
|
|
|
+ eventTypeCode:'2',
|
|
|
+ eventTitle:''
|
|
|
+ },
|
|
|
+ planParams:{
|
|
|
+ pageNum:1,
|
|
|
+ pageSize:10,
|
|
|
+ contingencyPlanName:''
|
|
|
+ },
|
|
|
+ ruleForm: {
|
|
|
+ eventTitle: '',
|
|
|
+ latitude:'',
|
|
|
+ longitude:'',
|
|
|
+ eventStatus: "event_report", //事件状态
|
|
|
+ eventSource:'artificial',
|
|
|
+ eventDescription:'',
|
|
|
+ eventType: {
|
|
|
+ eventTypeCode: "2" //内部自定义编码
|
|
|
+ },
|
|
|
+ "deptList": [
|
|
|
+ {
|
|
|
+ "mapDeptId": "370", //部门id
|
|
|
+ "mapDeptName": "铁东区" //部门名称
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "mapDeptId": "365", //部门id
|
|
|
+ "mapDeptName": "四平市" //部门名称
|
|
|
+ }
|
|
|
+ ], //事件接受部门集合
|
|
|
+ contingencyDetail:{
|
|
|
+ eventLocation:'',
|
|
|
+ eventReason:'',
|
|
|
+ eventCasualties:'',
|
|
|
+ eventEarlyWarning:'',
|
|
|
+ processingPerson:'',
|
|
|
+ personPhone:'',
|
|
|
+ eventResolutionTime:'',
|
|
|
+ videoPath:''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ eventTitle: [
|
|
|
+ { required: true, message: '请输入事件名称', trigger: 'blur' },
|
|
|
+ { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ eventDescription: [
|
|
|
+ { required: true, message: '请填写事件描述', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ reportParams:{}, // 发起事件参数
|
|
|
+ planTotal:null,
|
|
|
+ planList:[],
|
|
|
+ planListSearch:[],
|
|
|
+ emergencyEventDetails:{}, // 应急事件详情信息
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 发起应急事件
|
|
|
+ setEmergencyEvent(){
|
|
|
+ this.setEventDialogVisible = true
|
|
|
+ },
|
|
|
+ getEventDetail(eventId,latitude,longitude){
|
|
|
+ getDescriptionByContingency(eventId).then(res => {
|
|
|
+ if(res.code == 200){
|
|
|
+ this.emergencyEventDetails = res.data
|
|
|
+ this.dialogVisible = true
|
|
|
+ setTimeout(() => {
|
|
|
+ const container = document.querySelector('.otherPics');
|
|
|
+ container.addEventListener('wheel', function (e) {
|
|
|
+ e.preventDefault(); // 阻止默认纵向滚动
|
|
|
+ container.scrollLeft += e.deltaY; // 把纵向滚动量应用到横向
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return
|
|
|
+ this.dropLocation(latitude ,longitude)
|
|
|
+ },
|
|
|
+ submitForm(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.reportParams = this.ruleForm
|
|
|
+ // 整理附件
|
|
|
+ let attachList = []
|
|
|
+ if(this.fileList.length > 0){
|
|
|
+ this.fileList.forEach(e => {
|
|
|
+ attachList.push({
|
|
|
+ attachPath:e.url,
|
|
|
+ fileName:e.webName
|
|
|
+ })
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ attachList = []
|
|
|
+ }
|
|
|
+ // 整理上传视频
|
|
|
+ if(this.videoList.length > 0){
|
|
|
+ this.reportParams.contingencyDetail.videoPath = this.videoList[0].url
|
|
|
+ }
|
|
|
+ this.reportParams.attachList = attachList
|
|
|
+ console.log('this.params',this.reportParams)
|
|
|
+ // return
|
|
|
+ eventReport(this.reportParams).then(res => {
|
|
|
+ this.setEventDialogVisible = false
|
|
|
+ // 重置表单状态
|
|
|
+ this.$refs.ruleForm.resetFields();
|
|
|
+ if(res.code == 200){
|
|
|
+ this.fileList = [],
|
|
|
+ this.videoList = [],
|
|
|
+ this.uploadList = [],
|
|
|
+ this.videoUploadList = []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ resetForm(formName) {
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ this.fileList = [],
|
|
|
+ this.videoList = [],
|
|
|
+ this.uploadList = [],
|
|
|
+ this.videoUploadList = []
|
|
|
+ },
|
|
|
+ getEventList(){
|
|
|
+ getEventList(this.eventParams).then(res => {
|
|
|
+ this.deviceList = res.rows
|
|
|
+ this.deviceListSearch = res.rows
|
|
|
+ this.deviceTotal = res.total
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getPlanList(){
|
|
|
+ getPlanList(this.planParams).then(res => {
|
|
|
+ this.planList = res.rows
|
|
|
+ this.planListSearch = res.rows
|
|
|
+ this.planTotal = res.total
|
|
|
+ })
|
|
|
+ },
|
|
|
closeDetail(){
|
|
|
this.isDetailVisible = false
|
|
|
this.isVisible = false
|
|
|
@@ -224,7 +585,99 @@
|
|
|
this.$parent.$refs.supermap.dropLocation(lat*1, lng*1)
|
|
|
},
|
|
|
pageNumHasChanged(e){
|
|
|
- this.getListDeviceAll()
|
|
|
+ this.getEventList()
|
|
|
+ },
|
|
|
+ planPageNumHasChanged(e){
|
|
|
+ this.getPlanList()
|
|
|
+ },
|
|
|
+ // 上传前校检格式和大小
|
|
|
+ handleBeforeUpload(file) {
|
|
|
+ // 校检文件类型
|
|
|
+ if (false) {
|
|
|
+ let fileExtension = ''
|
|
|
+ if (file.name.lastIndexOf('.') > -1) {
|
|
|
+ fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
|
|
|
+ }
|
|
|
+ const isTypeOk = this.fileType.some((type) => {
|
|
|
+ if (file.type.indexOf(type) > -1) return true
|
|
|
+ if (fileExtension && fileExtension.indexOf(type) > -1) return true
|
|
|
+ return false
|
|
|
+ })
|
|
|
+ if (!isTypeOk) {
|
|
|
+ this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('/')}格式文件!`)
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 校检文件大小
|
|
|
+ if (this.fileSize) {
|
|
|
+ const isLt = file.size / 1024 / 1024 < this.fileSize
|
|
|
+ if (!isLt) {
|
|
|
+ this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`)
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$modal.loading('正在上传文件，请稍候...')
|
|
|
+ this.number++
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ handleVideoBeforeUpload(file) {
|
|
|
+ // 校检文件类型
|
|
|
+ if (false) {
|
|
|
+ let fileExtension = ''
|
|
|
+ if (file.name.lastIndexOf('.') > -1) {
|
|
|
+ fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
|
|
|
+ }
|
|
|
+ const isTypeOk = this.fileType.some((type) => {
|
|
|
+ if (file.type.indexOf(type) > -1) return true
|
|
|
+ if (fileExtension && fileExtension.indexOf(type) > -1) return true
|
|
|
+ return false
|
|
|
+ })
|
|
|
+ if (!isTypeOk) {
|
|
|
+ this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('/')}格式文件!`)
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 校检文件大小
|
|
|
+ if (this.fileSize) {
|
|
|
+ const isLt = file.size / 1024 / 1024 < this.fileSize
|
|
|
+ if (!isLt) {
|
|
|
+ this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`)
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$modal.loading('正在上传文件，请稍候...')
|
|
|
+ this.videoNumber++
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ handleUploadError(err) {
|
|
|
+ this.$modal.msgError('上传失败，请重试')
|
|
|
+ this.$modal.closeLoading()
|
|
|
+ },
|
|
|
+ // 文件个数超出
|
|
|
+ handleExceed() {
|
|
|
+ this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`)
|
|
|
+ },
|
|
|
+ // 上传成功回调
|
|
|
+ handleUploadSuccess(res) {
|
|
|
+ this.uploadList.push({ name: res.data.url, url: res.data.url, webName: res.data.webName })
|
|
|
+ if (this.uploadList.length === this.number) {
|
|
|
+ this.fileList = this.fileList.concat(this.uploadList)
|
|
|
+ this.uploadList = []
|
|
|
+ this.number = 0
|
|
|
+ this.$emit('input', this.listToString(this.fileList))
|
|
|
+ this.$modal.closeLoading()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 上传成功回调
|
|
|
+ handleVideoUploadSuccess(res) {
|
|
|
+ this.videoUploadList.push({ name: res.data.url, url: res.data.url, webName: res.data.webName })
|
|
|
+ if (this.videoUploadList.length === this.videoNumber) {
|
|
|
+ this.videoList = this.videoList.concat(this.videoUploadList)
|
|
|
+ this.videoUploadList = []
|
|
|
+ this.videoNumber = 0
|
|
|
+ this.$emit('input', this.listToString(this.videoList))
|
|
|
+ this.$modal.closeLoading()
|
|
|
+ }
|
|
|
},
|
|
|
// 查询设备列表
|
|
|
getListDeviceAll(){
|
|
|
@@ -483,11 +936,28 @@
|
|
|
],
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
+ },
|
|
|
+ // 删除文件
|
|
|
+ handleDelete(index) {
|
|
|
+ this.fileList.splice(index, 1)
|
|
|
+ this.$emit('input', this.listToString(this.fileList))
|
|
|
+ },
|
|
|
+ // 对象转成指定字符串分隔
|
|
|
+ listToString(list, separator) {
|
|
|
+ let strs = "";
|
|
|
+ separator = separator || ",";
|
|
|
+ for (let i in list) {
|
|
|
+ strs += list[i].url + separator;
|
|
|
+ }
|
|
|
+ return strs != '' ? strs.substr(0, strs.length - 1) : '';
|
|
|
}
|
|
|
},
|
|
|
watch:{
|
|
|
- ['listParams.deviceName'](){
|
|
|
- this.getListDeviceAll()
|
|
|
+ ['eventParams.eventTitle'](){
|
|
|
+ this.getEventList()
|
|
|
+ },
|
|
|
+ ['planParams.contingencyPlanName'](){
|
|
|
+ this.getPlanList()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -498,7 +968,20 @@
|
|
|
background-color: rgba(20, 107, 115, 0.3);
|
|
|
color: #fff;
|
|
|
}
|
|
|
+ .demo-ruleForm{
|
|
|
+ height: 100%;
|
|
|
+ .el-form-item__label{
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ .descInput{
|
|
|
+ .el-textarea__inner{
|
|
|
+ height: 100px;
|
|
|
+ border: 1px solid #3bb8a4 !important;
|
|
|
+ background-color: rgba(20, 107, 115, 0.3) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.hz_body{
|
|
|
position: relative;
|
|
|
@@ -508,6 +991,38 @@
|
|
|
text-decoration: none;
|
|
|
}
|
|
|
|
|
|
+ .planItem{
|
|
|
+ height: 13% !important;
|
|
|
+ border-left: 5px solid #50A09E;
|
|
|
+ padding-top: 2% !important;
|
|
|
+ >div{
|
|
|
+ position: relative;
|
|
|
+ >div{
|
|
|
+ position: absolute;
|
|
|
+ width: 60%;
|
|
|
+ height: 100%;
|
|
|
+ left: 28%;
|
|
|
+ top: 0%;
|
|
|
+ >div:nth-child(1){
|
|
|
+ overflow: hidden;
|
|
|
+ text-wrap: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ >div{
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ margin: 3% 0 0 8%;
|
|
|
+ width: 17%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__wrapper{
|
|
|
+ overflow: hidden !important;
|
|
|
+ }
|
|
|
+
|
|
|
.emergencyEventDialog{
|
|
|
width: 97%;
|
|
|
height: 95%;
|
|
|
@@ -517,15 +1032,63 @@
|
|
|
color: #fff;
|
|
|
}
|
|
|
.transferBg{
|
|
|
+ padding: 15px 0 0 15px;
|
|
|
background: linear-gradient(to bottom, rgba(29,57,58,.9) ,rgba(35,42,48,.9));
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
.d1{
|
|
|
height: 20%;
|
|
|
+ .eventInfo_contain{
|
|
|
+ display: flex;
|
|
|
+ height: 60%;
|
|
|
+ width: 80%;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 1.5%;
|
|
|
+ >div{
|
|
|
+ width: 250px;
|
|
|
+ }
|
|
|
+ >div:not(:nth-child(4n+1)){
|
|
|
+ margin-left: 10%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.d2{
|
|
|
height: 20%;
|
|
|
margin-top: 1%;
|
|
|
+ .progress_contain{
|
|
|
+ height: 60%;
|
|
|
+ margin-top: 1.5%;
|
|
|
+ .line{
|
|
|
+ width: 99%;
|
|
|
+ height: 2px;
|
|
|
+ margin-top: 3%;
|
|
|
+ background-color: #09C2C4;
|
|
|
+ }
|
|
|
+ .e1{
|
|
|
+ width: 60px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 55%;
|
|
|
+ left: 8%;
|
|
|
+ }
|
|
|
+ .e2{
|
|
|
+ width: 60px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 55%;
|
|
|
+ left: 33%;
|
|
|
+ }
|
|
|
+ .e3{
|
|
|
+ width: 60px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 55%;
|
|
|
+ left: 57%;
|
|
|
+ }
|
|
|
+ .e4{
|
|
|
+ width: 60px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 55%;
|
|
|
+ left: 80%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.d3{
|
|
|
display: flex;
|
|
|
@@ -540,11 +1103,33 @@
|
|
|
.info{
|
|
|
width: 100%;
|
|
|
height: 48.5%;
|
|
|
+ >div{
|
|
|
+ margin-top: 2.5%;
|
|
|
+ height: 76%;
|
|
|
+ >div:not(:nth-child(1)){
|
|
|
+ margin-top: 2%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.pics{
|
|
|
width: 100%;
|
|
|
height: 48.5%;
|
|
|
margin-top: 2%;
|
|
|
+ >div{
|
|
|
+ overflow-x: auto; /* 横向滚动条 */
|
|
|
+ overflow-y: hidden; /* 隐藏纵向滚动条 */
|
|
|
+ white-space: nowrap; /* 防止换行（如果不是 flex） */
|
|
|
+ display: flex;
|
|
|
+ padding-top: 2%;
|
|
|
+ img{
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 200px;
|
|
|
+ height: 140px;
|
|
|
+ }
|
|
|
+ >img:not(:nth-child(1)){
|
|
|
+ margin-left: 3%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.right{
|
|
|
@@ -554,6 +1139,22 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .setEmergencyEvent{
|
|
|
+ width: 122px;
|
|
|
+ height: 22px;
|
|
|
+ position: absolute;
|
|
|
+ top: 18.5%;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 23px;
|
|
|
+ left: 10.9%;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ background: url('~@/assets/images/emergency.png') 0 0 no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ z-index: 999;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
.qydw1{
|
|
|
position: absolute;
|
|
|
@@ -655,7 +1256,31 @@
|
|
|
width: 100%;
|
|
|
height: 91%;
|
|
|
}
|
|
|
+ .fileUls{
|
|
|
+ position: absolute;
|
|
|
+ width: 1200px;
|
|
|
+ height: 60px;
|
|
|
+ left: 6%;
|
|
|
+ top: -26%;
|
|
|
+ display: flex;
|
|
|
+ li{
|
|
|
+ width: 200px;
|
|
|
+ margin-top:1%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ .videoUls{
|
|
|
+ position: absolute;
|
|
|
+ width: 800px;
|
|
|
+ height: 60px;
|
|
|
+ left: 35%;
|
|
|
+ top: -26%;
|
|
|
+ display: flex;
|
|
|
+ li{
|
|
|
+ width: 200px;
|
|
|
+ margin-top:1%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
|
|
|
</style>
|
yhfu
