|
|
@@ -51,33 +51,38 @@
|
|
|
<!--左侧资产盘点 ps:资产盘点单元格内是竖向的流式布局，数据要竖向循环-->
|
|
|
<div class="left-content">
|
|
|
<div class="title-bar m-t-3">
|
|
|
- <span>设备报警列表</span>
|
|
|
+ <span>预警列表</span>
|
|
|
</div>
|
|
|
<div class="content-box h-730 p-15">
|
|
|
<div class="box-row flex-c">
|
|
|
<div style="width: 100%;">
|
|
|
- <el-date-picker v-model="valueTime" type="date" placeholder="选择日期" class="sj-data-picker w-140 sj-select-50" style="width: 50% !important;">
|
|
|
- </el-date-picker>
|
|
|
- <el-select v-model="valueSJ1" placeholder="请选择行业" class="sj-select-50" style="margin-left: 5px;" popper-class="sj-s-pop">
|
|
|
- <el-option v-for="item in optionsSJ1" :key="item.value" :label="item.label"
|
|
|
+ <el-select v-model="industry" placeholder="请选择行业" class="sj-select-50" style="margin-left: 5px;" popper-class="sj-s-pop">
|
|
|
+ <el-option v-for="item in industryList" :key="item.value" :label="item.label"
|
|
|
:value="item.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
+ <el-select v-model="eventType" placeholder="请选择" class="sj-select-50" popper-class="sj-s-pop">
|
|
|
+ <el-option v-for="item in eventTypeList" :key="item.value" :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
- <el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input2"
|
|
|
- class="sj-input-style ">
|
|
|
+ <el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="eventName" class="sj-input-style ">
|
|
|
</el-input>
|
|
|
<div class="list-ul-style-tit list-ul-100-tit">
|
|
|
- <span style="width: 30% !important">设备名称</span>
|
|
|
- <span style="width: 10% !important">行业</span>
|
|
|
- <span style="width: 50% !important">事件名称</span>
|
|
|
+ <span style="width: 80%;">事件名称</span>
|
|
|
+ <span style="width: 70px;">催办情况</span>
|
|
|
+ <span style="width: 65px;">处理情况</span>
|
|
|
+ <span style="width: 30px;">定位</span>
|
|
|
</div>
|
|
|
<ul class="list-ul-style list-ul-100" style="height:580px!important; overflow-y:scroll ; ">
|
|
|
- <li v-for="(e,idx) in eventList" :key="idx">
|
|
|
- <span style="width: 30% !important">{{ e.name }}</span>
|
|
|
- <span style="width: 10% !important">{{ e.hy }}</span>
|
|
|
- <span style="width: 50% !important">{{ e.eventLabel }}</span>
|
|
|
- </li>
|
|
|
+ <li v-for="item in eventList" :key="item.id" @click="openEventDetail(item)">
|
|
|
+ <span style="width: 80%;">{{ item.eventTitle }}</span>
|
|
|
+ <span style="width: 70px;">{{ item.expediteStatusLabel}}</span>
|
|
|
+ <span style="width: 65px;"
|
|
|
+ :class=" item.eventStatusLabel == '已完成' ? 'green-txt' : 'blue-txt' ">{{ item.eventStatusLabel }}</span>
|
|
|
+ <span style="width: 30px;"><img src="../../assets/index_img/dw-icon.png" alt="" @click="flyTo(item.longitude,item.latitude)"></span>
|
|
|
+ </li>
|
|
|
<strong></strong>
|
|
|
</ul>
|
|
|
|
|
|
@@ -89,138 +94,15 @@
|
|
|
<supermap ref="supermap" style="width: 100%;height: 100vh;">
|
|
|
</supermap>
|
|
|
</div>
|
|
|
- <el-dialog title="事件详情" :visible.sync="dialogVisibleSj" width="90%" class="sj-dialog-newstyle">
|
|
|
- <div class="sj-jcxx">
|
|
|
- <div class="tit">
|
|
|
- 事件基本信息
|
|
|
- </div>
|
|
|
- <div class="sj-jcxx-con">
|
|
|
- <div class="con-20">
|
|
|
- <img src="../../assets/index_img/d-icon-tit-img.png">
|
|
|
- 事件名称：超级大街燃气泄漏
|
|
|
- </div>
|
|
|
- <div class="con-20">
|
|
|
- <img src="../../assets/index_img/d-icon-tit-img.png">
|
|
|
- 所属行业：燃气
|
|
|
- </div>
|
|
|
- <div class="con-20">
|
|
|
- <img src="../../assets/index_img/d-icon-tit-img.png">
|
|
|
- 事件等级：一级
|
|
|
- </div>
|
|
|
- <div class="con-20">
|
|
|
- <img src="../../assets/index_img/d-icon-tit-img.png">
|
|
|
- 事件状态：已处理
|
|
|
- </div>
|
|
|
- <div class="con-20">
|
|
|
- <img src="../../assets/index_img/d-icon-tit-img.png">
|
|
|
- 事件类型：？？？
|
|
|
- </div>
|
|
|
- <div class="con-20">
|
|
|
- <img src="../../assets/index_img/d-icon-tit-img.png">
|
|
|
- 事件时间：2025/02/06 13:45:11
|
|
|
- </div>
|
|
|
- <div class="con-20">
|
|
|
- <img src="../../assets/index_img/d-icon-tit-img.png">
|
|
|
- 报警来源：压力传感器0025332
|
|
|
- </div>
|
|
|
- <div class="con-20 con-50">
|
|
|
- <img src="../../assets/index_img/d-icon-tit-img.png">
|
|
|
- 报警原因：燃气泄漏
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="sj-jcxx">
|
|
|
- <div class="tit">
|
|
|
- 事件处理流程
|
|
|
- </div>
|
|
|
- <div class="sj-jcxx-con" style="height: 85px; margin-top: 20px;">
|
|
|
- <div class="z-line"></div>
|
|
|
- <div class="triangle"></div>
|
|
|
- <div class="z-lc m60">
|
|
|
- <img src="../../assets/index_img/jslc-icon.png" />
|
|
|
- 事件发起
|
|
|
- <div class="z-lc-time">
|
|
|
- 2025/02/06 11:45:11
|
|
|
- </div>
|
|
|
- <el-tooltip class="item" v-if="true" placement="top" popper-class="sj-tooltip">
|
|
|
- <div slot="content" class="info-list">
|
|
|
- <span>处理意见：案例手动封口机案例谁都快放假</span>
|
|
|
- <span>处理意见：案例手动封口机案例谁都快案例手动封口放假</span>
|
|
|
- <span>处理意见：案例手动封口机案例手动封口机案例谁都快放假快放假</span>
|
|
|
- <span>处理意见：案例手动封口机案例谁都快放假案例手动封口机案例谁都快放假</span>
|
|
|
- </div>
|
|
|
- <div class="z-clyj">
|
|
|
- <img src="../../assets/index_img/clyj-icon.png" />
|
|
|
- </div>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- <div class="z-lc">
|
|
|
- <img src="../../assets/index_img/jslc-icon.png" />
|
|
|
- 事件签收
|
|
|
- </div>
|
|
|
- <div class="z-lc">
|
|
|
- <img src="../../assets/index_img/jslc-icon.png" />
|
|
|
- 事件处理
|
|
|
- </div>
|
|
|
- <div class="z-lc">
|
|
|
- <img src="../../assets/index_img/jslc-icon.png" />
|
|
|
- 事件办结
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="sj-jcxx" style="width:40%">
|
|
|
- <div class="tit">
|
|
|
- 现场画面
|
|
|
- </div>
|
|
|
- <div class="sj-jcxx-con" style="width: 100%; height: 435px; margin-top: 20px;">
|
|
|
- <img src="../../assets/index_img/temp-sp.png" width="100%" height="435px" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="sj-jcxx" style="width:59%">
|
|
|
- <div class="tit">
|
|
|
- 监测数值
|
|
|
- </div>
|
|
|
- <div class="sj-jcxx-con"
|
|
|
- style="margin-top: 20px; display: flex; flex-direction: column; align-items: flex-start;">
|
|
|
- <div class="con-20 con-100">
|
|
|
- <img src="../../assets/index_img/d-icon-tit-img.png">
|
|
|
- 报警设备：压力传感器0025332
|
|
|
- </div>
|
|
|
- <div class="con-20 con-100">
|
|
|
- <img src="../../assets/index_img/d-icon-tit-img.png">
|
|
|
- 报警原因：<span class="or">压力值异常</span>
|
|
|
- </div>
|
|
|
- <div class="con-20 con-100">
|
|
|
- <img src="../../assets/index_img/d-icon-tit-img.png">
|
|
|
- 异常数值：<span class="or">压力12</span>
|
|
|
- </div>
|
|
|
- <div class="con-20 con-100">
|
|
|
- <img src="../../assets/index_img/d-icon-tit-img.png">
|
|
|
- 事件预警影响：208户
|
|
|
- </div>
|
|
|
- <div class="con-20 con-100">
|
|
|
- <img src="../../assets/index_img/d-icon-tit-img.png">
|
|
|
- 应急预案匹配：<span class="bl">附件1应急预案</span>
|
|
|
- </div>
|
|
|
- <div class="con-20 con-100">
|
|
|
- <img src="../../assets/index_img/d-icon-tit-img.png">
|
|
|
- 当前处理人员：张三
|
|
|
- </div>
|
|
|
- <div class="con-20 con-100">
|
|
|
- <img src="../../assets/index_img/d-icon-tit-img.png">
|
|
|
- 处理人员电话：188277639002
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
+ <!-- 事件详情弹窗 -->
|
|
|
+ <EventDetail ref="eventDetail" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import Cookies from 'js-cookie'
|
|
|
import supermap from '@/components/supermap-2.5d' //超图
|
|
|
+ import EventDetail from "@/components/DetailDialog/eventDetail.vue";
|
|
|
import {
|
|
|
getUserProfile
|
|
|
} from "@/api/system/user";
|
|
|
@@ -232,11 +114,13 @@
|
|
|
} from "@/api/system/config";
|
|
|
|
|
|
import * as echarts from 'echarts'
|
|
|
+ import { selectEventList } from '@/api/eventLifeLine'
|
|
|
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
supermap,
|
|
|
+ EventDetail
|
|
|
},
|
|
|
metaInfo() {
|
|
|
return {
|
|
|
@@ -254,117 +138,27 @@
|
|
|
created() {
|
|
|
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ eventName(newVal) {
|
|
|
+ this.selectEventList()
|
|
|
+ },
|
|
|
+ industry(newVal) {
|
|
|
+ this.selectEventList()
|
|
|
+ },
|
|
|
+ eventType(newVal) {
|
|
|
+ this.selectEventList()
|
|
|
+ },
|
|
|
+ },
|
|
|
mounted() {
|
|
|
// 初始化地图数据
|
|
|
this.getSuperMapUrl();
|
|
|
setTimeout(() => {
|
|
|
+ this.selectEventList()
|
|
|
this.title = '四平市城市生命线'
|
|
|
}, 1000)
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- eventList: [{
|
|
|
- hy: '排水',
|
|
|
- eventLabel: '紫气大街66号3号管道改造',
|
|
|
- name: 'XB090123834'
|
|
|
- },
|
|
|
- {
|
|
|
- hy: '排水',
|
|
|
- eventLabel: '解放路32号支线维修工程',
|
|
|
- name: 'XB090123834'
|
|
|
- },
|
|
|
- {
|
|
|
- hy: '排水',
|
|
|
- eventLabel: '站前街68号2号燃气管道改造',
|
|
|
- name: 'XB090123834'
|
|
|
- },
|
|
|
- {
|
|
|
- hy: '排水',
|
|
|
- eventLabel: '迎宾大街30号排水系统升级',
|
|
|
- name: 'XB090123834'
|
|
|
- },
|
|
|
- {
|
|
|
- hy: '排水',
|
|
|
- eventLabel: '东环路25号1号供热主管道抢修',
|
|
|
- name: 'XB090123834'
|
|
|
- },
|
|
|
- {
|
|
|
- hy: '排水',
|
|
|
- eventLabel: '胜利南街3号管网检修',
|
|
|
- name: 'XB090123834'
|
|
|
- },
|
|
|
- {
|
|
|
- hy: '排水',
|
|
|
- eventLabel: '文化路15号老旧管线改造',
|
|
|
- name: 'XB090123834'
|
|
|
- },
|
|
|
- {
|
|
|
- hy: '排水',
|
|
|
- eventLabel: '和平街48号地下管廊巡检',
|
|
|
- name: 'XB090123834'
|
|
|
- },
|
|
|
- {
|
|
|
- hy: '排水',
|
|
|
- eventLabel: '新华大街88号自来水管更新',
|
|
|
- name: 'XB090123834'
|
|
|
- },
|
|
|
- {
|
|
|
- hy: '排水',
|
|
|
- eventLabel: '中央西路22号热力分支改造',
|
|
|
- name: 'XB090123834'
|
|
|
- },
|
|
|
- {
|
|
|
- hy: '排水',
|
|
|
- eventLabel: '建设南路19号排污管更换',
|
|
|
- name: 'XB090123834'
|
|
|
- },
|
|
|
- {
|
|
|
- hy: '排水',
|
|
|
- eventLabel: '友谊街56号燃气阀门更换',
|
|
|
- name: 'XB090123834'
|
|
|
- },
|
|
|
- {
|
|
|
- hy: '排水',
|
|
|
- eventLabel: '铁西一路9号供水管网检测',
|
|
|
- name: 'XB090123834'
|
|
|
- },
|
|
|
- {
|
|
|
- hy: '排水',
|
|
|
- eventLabel: '英雄大街120号通信井整修',
|
|
|
- name: 'XB090123834'
|
|
|
- },
|
|
|
- {
|
|
|
- hy: '排水',
|
|
|
- eventLabel: '平西路10号道路附属管线改造',
|
|
|
- name: 'XB090123834'
|
|
|
- },
|
|
|
- {
|
|
|
- hy: '排水',
|
|
|
- eventLabel: '长征街77号地下热力管检修',
|
|
|
- name: 'XB090123834'
|
|
|
- },
|
|
|
- {
|
|
|
- hy: '排水',
|
|
|
- eventLabel: '中兴路45号2号排水井修复',
|
|
|
- name: 'XB090123834'
|
|
|
- },
|
|
|
- {
|
|
|
- hy: '排水',
|
|
|
- eventLabel: '四平路36号3号供气支线维护',
|
|
|
- name: 'XB090123834'
|
|
|
- },
|
|
|
- {
|
|
|
- hy: '排水',
|
|
|
- eventLabel: '康宁街20号老旧管道改造',
|
|
|
- name: 'XB090123834'
|
|
|
- },
|
|
|
- {
|
|
|
- hy: '排水',
|
|
|
- eventLabel: '建设北路100号雨污分流改造',
|
|
|
- name: 'XB090123834'
|
|
|
- },
|
|
|
- ],
|
|
|
-
|
|
|
activeNameSblx: '1',
|
|
|
options: [{
|
|
|
value: '选项1',
|
|
|
@@ -380,45 +174,45 @@
|
|
|
label: '年度'
|
|
|
}],
|
|
|
value: '周',
|
|
|
- optionsSJ1: [{
|
|
|
- value: '燃气',
|
|
|
- label: '燃气'
|
|
|
- }, {
|
|
|
- value: '热力',
|
|
|
- label: '热力'
|
|
|
- }, {
|
|
|
- value: '供水',
|
|
|
- label: '供水'
|
|
|
- }, {
|
|
|
- value: '排水',
|
|
|
- label: '排水'
|
|
|
- }, {
|
|
|
- value: '管廊',
|
|
|
- label: '管廊'
|
|
|
- },
|
|
|
- {
|
|
|
- value: '桥梁',
|
|
|
- label: '桥梁'
|
|
|
- }
|
|
|
- ],
|
|
|
- valueSJ1: '',
|
|
|
- optionsSJ2: [{
|
|
|
- value: '全部',
|
|
|
- label: '全部'
|
|
|
- }, {
|
|
|
- value: '设备上报',
|
|
|
- label: '设备上报'
|
|
|
- }, {
|
|
|
- value: '年度改造',
|
|
|
- label: '年度改造'
|
|
|
- }, {
|
|
|
- value: '风险预警',
|
|
|
- label: '风险预警'
|
|
|
- }, {
|
|
|
- value: '企业运行',
|
|
|
- label: '企业运行'
|
|
|
- }, ],
|
|
|
- valueSJ2: '',
|
|
|
+ eventList:[],
|
|
|
+ industryList: [
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ label: '热力'
|
|
|
+ }, {
|
|
|
+ value: '2',
|
|
|
+ label: '排水'
|
|
|
+ }, {
|
|
|
+ value: '3',
|
|
|
+ label: '桥梁'
|
|
|
+ }, {
|
|
|
+ value: '4',
|
|
|
+ label: '管廊'
|
|
|
+ }, {
|
|
|
+ value: '5',
|
|
|
+ label: '燃气'
|
|
|
+ }, {
|
|
|
+ value: '6',
|
|
|
+ label: '供水'
|
|
|
+ }],
|
|
|
+ industry: '',
|
|
|
+ eventTypeList: [
|
|
|
+ {
|
|
|
+ value: '100',
|
|
|
+ label: '城市体检'
|
|
|
+ }, {
|
|
|
+ value: '200',
|
|
|
+ label: '日常监管'
|
|
|
+ }, {
|
|
|
+ value: '300',
|
|
|
+ label: '基础事件'
|
|
|
+ }, {
|
|
|
+ value: '400',
|
|
|
+ label: '设备预警'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ eventType: '',
|
|
|
+ eventName:'',
|
|
|
|
|
|
}
|
|
|
},
|
|
|
@@ -426,11 +220,56 @@
|
|
|
goToHomePage() {
|
|
|
window.location.href = '/homePage';
|
|
|
},
|
|
|
- //设备报警表单点击后跳转新页面
|
|
|
- toSbList() {
|
|
|
- this.$router.push('')
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 预警列表
|
|
|
+ */
|
|
|
+ selectEventList() {
|
|
|
+ selectEventList({industry: this.industry,eventTitle: this.eventName,eventTypeDl:this.eventType}).then(res => {
|
|
|
+ this.eventList = res.rows
|
|
|
+ this.setMakersHandler('longitude', 'latitude', res.rows)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setMakersHandler(lonKey, latKey, rows) {
|
|
|
+ let ListMarkersList = []
|
|
|
+ this.latKey = latKey
|
|
|
+ this.lonKey = lonKey
|
|
|
+ for (let i = 0; i < rows.length; i++) {
|
|
|
+ let markersMap = {
|
|
|
+ lng: 124.59,
|
|
|
+ lat: 43.02,
|
|
|
+ icon: "marker",
|
|
|
+ bindPopupHtml: "",
|
|
|
+ keepBindPopup: false,
|
|
|
+ isAggregation: false,
|
|
|
+ click: 'previewPointDetail',
|
|
|
+ parameter: ''
|
|
|
+ };
|
|
|
+ markersMap.icon = "yujing";
|
|
|
+ markersMap.lng = rows[i][lonKey] * 1;
|
|
|
+ markersMap.lat = rows[i][latKey] * 1;
|
|
|
+ markersMap.radius = rows[i].cameraRadius || '';
|
|
|
+ markersMap.parameter = {
|
|
|
+ type: this.currentResourceTile,
|
|
|
+ params: rows[i]
|
|
|
+ };
|
|
|
+ ListMarkersList.push(markersMap);
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$refs.supermap.clearM();
|
|
|
+ this.$refs.supermap.setMarkers(ListMarkersList);
|
|
|
+ }, 2000)
|
|
|
|
|
|
+ },
|
|
|
+ previewPointDetail(params) {
|
|
|
+ this.openEventDetail(params.params)
|
|
|
+ },
|
|
|
+ // 打开事件详情弹窗
|
|
|
+ openEventDetail(obj) {
|
|
|
+ this.$refs.eventDetail.openEventDetail(obj.eventId)
|
|
|
+ },
|
|
|
+ flyTo(longitude, latitude) {
|
|
|
+ this.$refs.supermap.dropLocation(latitude * 1, longitude * 1);
|
|
|
+ },
|
|
|
getSuperMapUrl() {
|
|
|
getUserProfile().then(response => {
|
|
|
let mapDeptId = response.mapDeptId
|
