Skip to content

G
gassafety
Commit 8edec1e3 authored by 王晓倩's avatar 王晓倩
Browse files
Options

报警信息详情页面

parent 8de0c153
Hide whitespace changes
Inline Side-by-side
Showing with 80 additions and 66 deletions
gassafety-web/src/views/dataMonitoring/alarmdetail/index.vue
View file @ 8edec1e3
......@@ -63,48 +63,80 @@
</el-form>
</el-col>
</el-row>
<!-- <div style="width: 100%;height: 100px;"> -->
<!-- </div> -->
<el-divider></el-divider>
<el-row>
<el-col :span="16" style="padding: 10px;">
<div style="width: 100%;float: left;height: 100%;">
<el-table :data="dataListdetail1" style="width: 100%">
<div style="width: 100%;float: left;height: 100%;" v-if="form.deviceType != '管道'">
<el-table :data="dataListdetail" style="width: 100%">
<el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column label="设备编号" align="center" prop="deviceCode" />
<el-table-column label="报警类型" align="center" prop="alarmType" />
<el-table-column label="设备类型" align="center" prop="deviceType" >
<template slot-scope="scope">
<span v-if="scope.row.deviceType == 1">调压阀</span>
<span v-if="scope.row.deviceType == 2">阀门井</span>
<span v-if="scope.row.deviceType == 3">流量计</span>
<span v-if="scope.row.deviceType == 4">压力表</span>
</template>
</el-table-column>
<el-table-column label="设备型号" align="center" prop="deviceModel" />
</el-table>
<el-table :data="dataListdetail" style="width: 100%;margin-top: 20px;">
<el-table-column label="物联网编号" align="center" prop="iotNo" />
<el-table-column label="所在地址" align="center" prop="deviceAddr" />
<el-table-column label="联系人" align="center" prop="linkman" />
<el-table-column label="联系电话" align="center" prop="phone" />
</el-table>
<el-table :data="dataListdetail2" style="width: 100%;margin-top: 20px;">
<el-table-column label="报警值" align="center" prop="alarmValue" />
<el-table-column label="报警开始时间" align="center" prop="startTime" />
<el-table :data="dataListdetail" style="width: 100%;margin-top: 20px;">
<el-table-column label="安装日期" align="center" prop="installationTime" />
<el-table-column label="最后巡检日期" align="center" prop="inspectionTime" />
<el-table-column label="图片" align="center" prop="iconUrl" >
<template slot-scope="scope">
<el-image :src="scope.row.iconUrl" :preview-src-list="[scope.row.iconUrl]" v-if="scope.row.iconUrl != '' && scope.row.iconUrl != null" style="width: 16px;"></el-image>
</template>
</el-table-column>
</el-table>
</div>
<div style="width: 100%;float: left;height: 100%;" v-if="form.deviceType == '管道'">
<el-table :data="dataListdetail" style="width: 100%">
<el-table-column label="管道名称" align="center" prop="pipeName" />
<el-table-column label="管道编号" align="center" prop="pipeCode" />
<el-table-column label="管道类型" align="center" prop="pipeType" >
<template slot-scope="scope">
<span v-if="scope.row.pipeType == 1">地埋管线</span>
<span v-if="scope.row.pipeType == 2">地表管线</span>
</template>
</el-table-column>
</el-table>
<el-table :data="dataListdetail3" style="width: 100%;margin-top: 20px;">
<el-table-column label="报警结束时间" align="center" prop="endTime" />
<el-table-column label="处理状态" align="center" prop="dealStatus">
<el-table :data="dataListdetail" style="width: 100%;margin-top: 20px;">
<el-table-column label="管道压力" align="center" prop="pipePressure" >
<template slot-scope="scope">
<span v-if="scope.row.orderId == null || scope.row.orderId == ''">未生成工单</span>
<span v-if="(scope.row.dealStatus == null || scope.row.dealStatus == '') &&
scope.row.orderId != null && scope.row.orderId != ''">暂未处理</span>
<span v-if="scope.row.dealStatus == 1">不需处理</span>
<span v-if="scope.row.dealStatus == 2">已处理完成</span>
<span v-if="scope.row.dealStatus == 3">未处理完成</span>
<span v-if="scope.row.pipePressure == 1">低压</span>
<span v-if="scope.row.pipePressure == 2">中压</span>
<span v-if="scope.row.pipePressure == 3">次高压</span>
<span v-if="scope.row.pipePressure == 4">高压</span>
</template>
</el-table-column>
<el-table-column label="管道长度" align="center" prop="pipeLength" />
<el-table-column label="管道地址" align="center" prop="pipeAddr" />
</el-table>
<el-table :data="dataListdetail" style="width: 100%;margin-top: 20px;">
<el-table-column label="安装日期" align="center" prop="installationTime" />
<el-table-column label="最后巡检日期" align="center" prop="inspectionTime" />
<el-table-column label="图片" align="center" prop="iconUrl" >
<template slot-scope="scope">
<el-image :src="scope.row.iconUrl" :preview-src-list="[scope.row.iconUrl]" v-if="scope.row.iconUrl != '' && scope.row.iconUrl != null" style="width: 16px;"></el-image>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
<el-col :span="8" style="padding: 10px;padding-left: 0px;">
<div id="marbox" style="width: 100%;height: 304px; border: 1px solid rgb(218, 213, 213);float: right;">
<div style="width: 100%;height: 100%" id="container"></div>
......@@ -112,10 +144,7 @@
</el-col>
</el-row>
<template v-if="$route.query.deviceType!='管道'">
<el-row v-if="form.deviceType != '压力表'">
<el-col :span="12" style="padding: 10px;">
<div id="main1" style="height:300px;background-color: rgb(247 247 247);padding: 5px;">
......@@ -148,22 +177,8 @@
</div>
</el-col>
</el-row>
<!-- <div v-if="form.deviceType != '压力表'" style="height: 320p x;width: 100%;margin-top: 15px;padding: 10px;"> -->
<!-- </div> -->
<!-- <div style="height: 320px;width: 100%;padding: 10px;margin-top: 10px;"> -->
<!-- </div> -->
</template>
</div>
</div>
</template>
......@@ -182,9 +197,7 @@ export default {
},
data() {
return {
dataListdetail1: [],
dataListdetail2: [],
dataListdetail3: [],
dataListdetail: [],
alarmId:'',
// 折线图标题
title: "",
......@@ -524,32 +537,33 @@ export default {
},
/** 详细信息跳转 */
showDetail(orderId) {
this.$router.push({
path: '/workOrder/detail',
query:{
orderId : orderId
}
}) //带参跳转
},
showDetail(orderId) {
this.$router.push({
path: '/workOrder/detail',
query:{
orderId : orderId
}
}) //带参跳转
},
getDetail (){
getDeviceAlarm(this.alarmId).then(response =>{
const { deviceName, deviceCode, alarmType,alarmValue,startTime,endTime,deviceStatus} = response.data;
const obj1 = {deviceName,deviceCode,alarmType};
const obj2 = {alarmValue,startTime};
const obj3 = {endTime,deviceStatus};
this.dataListdetail1.push(obj1);
this.dataListdetail2.push(obj2);
this.dataListdetail3.push(obj3);
this.form = response.data;
console.log("this.form", this.form)
this.active = parseInt(response.data.orderStatus) + 1;
this.gaoMap.resetMapCenter([this.form.longitude, this.form.latitude]);
this.gaoMap.addMarker(DEVICE_TYPE.WORKORDER, this.form);
console.log("this.form", this.form);
this.form.pipeName = this.form.deviceName;
this.gaoMap.onlyLine(this.form);
if(this.form.pipeList != null){
let pipe = this.form.pipeList[0];
console.log("pipe", pipe);
this.dataListdetail.push(pipe);
this.gaoMap.onlyLine(pipe);
}
if(this.form.deviceList != null){
let device = this.form.deviceList[0];
console.log("device", device);
this.dataListdetail.push(device);
this.gaoMap.resetMapCenter([device.longitude, device.latitude]);
this.gaoMap.addMarker(DEVICE_TYPE.WORKORDER, device);
}
var getData1 = [];
var getData2 = [];
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment