Skip to content

G
gassafety
Commit 928bd1ab authored by yaqizhang's avatar yaqizhang
Browse files
Options

详情样式优化

parent 482744ae
Hide whitespace changes
Inline Side-by-side
Showing with 578 additions and 488 deletions
gassafety-web/src/views/dataMonitoring/alarmdetail/index.vue
View file @ 928bd1ab
<template>
<div class="app-container detail" style="background-color: rgb(238, 241, 245);">
<div style="padding-top: 10px;background: #fff;height: 100%;">
<div>
<div style="width: 5%;height: 45px;margin-left: 20px;" @click="$router.go(-1)">
<el-button
size="medium"
type="text"
style="font-size: 18px; color: rgb(7, 63, 112);float: left;"
>返回</el-button>
<div class="app-container detail" style="background-color: rgb(238, 241, 245);">
<div style="padding-top: 10px;background: #fff;height: 100%;">
<el-row>
<el-col :span="24" style="padding-left: 15px;">
<div style="height: 45px;" @click="$router.go(-1)">
<el-button size="medium" type="text" style="font-size: 18px; color: rgb(7, 63, 112);float: left;">返回
</el-button>
<div style="float: left;margin-top: 8px;margin-left: 5px;"><img src="../../../assets/logo/fanhui.png" style="width: 25px;" alt=""></div>
</div>
</div>
</el-col>
</el-row>
<div style="width: 100%;height: 100px;">
<!-- <div style="color: #31EAEA;width: 30%;height: 30px;">
<ul><li>详细信息</li></ul>
</div> -->
<el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="float: left;margin-left: 50px;">
<el-row style="padding-left: 50px;">
<el-col :span="6">
<el-form ref="form" v-model="form" :rules="rules" style="width: 100%;">
<el-form-item label="设备类型:" prop="deviceType">
<!-- <font v-if="form.deviceType == 0">管道</font>
<font v-if="form.deviceType == 1">调压阀</font>
<font v-if="form.deviceType == 2">阀门井</font>
<font v-if="form.deviceType == 3">流量计</font>
<font v-if="form.deviceType == 4">压力表</font> -->
<font>{{form.deviceType}}</font>
<font>{{form.deviceType}}</font>
</el-form-item>
<el-form-item label="设备编号:" prop="deviceCode">
<font>{{form.deviceCode}}</font>
<font>{{form.deviceCode}}</font>
</el-form-item>
</el-form>
<el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="float: left;margin-left: 50px;">
</el-col>
<el-col :span="6">
<el-form ref="form" v-model="form" :rules="rules" style="width: 100%;">
<el-form-item label="报警类型:" prop="alarmType">
<font>{{form.alarmType}}</font>
</el-form-item>
<el-form-item label="报警值:" prop="alarmValue">
<font>{{form.alarmValue}}</font>
<font>{{form.alarmValue}}</font>
</el-form-item>
</el-form>
<el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="float: left;margin-left: 50px;">
</el-col>
<el-col :span="6">
<el-form ref="form" v-model="form" :rules="rules" style="width: 100%;">
<el-form-item label="报警开始时间:" prop="startTime">
<font>{{form.startTime}}</font>
<font>{{form.startTime}}</font>
</el-form-item>
<el-form-item label="报警结束时间:" prop="updateTime">
<font>{{form.endTime}}</font>
<font>{{form.endTime}}</font>
</el-form-item>
</el-form>
<el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="float: left;margin-left: 50px;">
</el-col>
<el-col :span="6">
<el-form ref="form" v-model="form" :rules="rules" style="width: 100%;">
<el-form-item label="工单编号:" prop="orderId">
<font>{{form.orderId}}</font>
<font>{{form.orderId}}</font>
</el-form-item>
<el-form-item label="处理状态:" prop="dealStatus">
<font v-if="form.orderId == null || form.orderId == ''">未生成工单</font>
<font v-if="(form.dealStatus == null || form.dealStatus == '') && form.orderId != null && form.orderId != ''">未处理</font>
<font
v-if="(form.dealStatus == null || form.dealStatus == '') && form.orderId != null && form.orderId != ''">
未处理</font>
<font v-if="form.dealStatus == 1">不需处理</font>
<font v-if="form.dealStatus == 2">已处理完成</font>
<font v-if="form.dealStatus == 3">未处理完成</font>
</el-form-item>
</el-form>
</div>
<el-divider></el-divider>
<div style="width: 100%;height: 350px;padding: 10px;height: 300px;">
<div style="width: 66.6%;float: left;height: 100%;">
<el-table :data="dataListdetail1" 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>
<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>
<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">
<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>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<!-- <div style="width: 100%;height: 100px;"> -->
</div>
<div id="marbox" style="width: 33%;height: 304px; border: 1px solid rgb(218, 213, 213);float: right;">
<div style="width: 100%;height: 100%" id="container"></div>
</div>
</div>
<div v-if="form.deviceType != '压力表'" style="height: 320px;width: 100%;margin-top: 15px;padding: 10px;">
<div id="main1" style="float: left;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;">
<div v-if = "form.deviceReportDataList == null" class="div-null">
<p>暂无数据</p>
</div>
<!-- </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%">
<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>
<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>
<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">
<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>
</template>
</el-table-column>
</el-table>
</div>
<div id="main2" style="float: right;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;">
<div v-if = "form.deviceReportDataList == null" class="div-null">
<p>暂无数据</p>
</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>
</div>
</div>
</div>
</el-col>
</el-row>
<template v-if="$route.query.deviceType!='管道'">
<div style="height: 320px;width: 100%;padding: 10px;margin-top: 10px;">
<div v-if="form.deviceType != '压力表'" id="main3" style="float: left;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;">
<div v-if = "form.deviceReportDataList == null" class="div-null">
<p>暂无数据</p>
</div>
</div>
<div id="main4" style="float: left;width: 49.8%;margin-left: 5px;height:300px;background-color: rgb(247 247 247);padding: 5px;">
<div v-if = "form.deviceReportDataList == null" class="div-null">
<p>暂无数据</p>
</div>
</div>
</div>
<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;">
<div v-if="form.deviceReportDataList == null" class="div-null">
<p>暂无数据</p>
</div>
</div>
</el-col>
<el-col :span="12" style="padding: 10px;">
<div id="main2" style="height:300px;background-color: rgb(247 247 247);padding: 5px;">
<div v-if="form.deviceReportDataList == null" class="div-null">
<p>暂无数据</p>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12" style="padding: 10px;" v-if="form.deviceType != '压力表'">
<div id="main3" style="height:300px;background-color: rgb(247 247 247);padding: 5px;">
<div v-if="form.deviceReportDataList == null" class="div-null">
<p>暂无数据</p>
</div>
</div>
</el-col>
<el-col :span="12" style="padding: 10px;">
<div id="main4" style="height:300px;background-color: rgb(247 247 247);padding: 5px;">
<div v-if="form.deviceReportDataList == null" class="div-null">
<p>暂无数据</p>
</div>
</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%;margin-top: 15px;padding: 10px;">
<div id="main1" style="float: left;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;">
</div>
<div id="main2" style="float: right;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;">
</div>
</div> -->
<!-- <div style="height: 320px;width: 100%;padding: 10px;margin-top: 10px;">
<div id="main3" style="float: left;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;">
</div>
<div id="main4" style="float: left;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;margin-left: 5px;">
</div>
</div> -->
<!-- <div style="height: 320px;width: 100%;padding: 10px;margin-top: 10px;"> -->
<!-- </div> -->
</template>
</div>
</div>
</template>
<script>
</div>
</template>
<script>
import { listDeviceAlarm, getDeviceAlarm } from "@/api/dataMonitoring/deviceAlarm";
import { deviceTree } from "@/api/device/deviceInfo";
import gaodeMap from "utils/gaodeMap.js";
import {map, DEVICE_TYPE} from "utils/gaodeMap.js";
import { map, DEVICE_TYPE } from "utils/gaodeMap.js";
import { inspectorList } from "@/api/system/user";
import echarts from 'echarts';
import { addBasicsInfo } from "@/api/workOrder/basicsInfo";
export default {
export default {
name: "DeviceAlarm",
components: {
},
data() {
return {
order_list:[],
order_list: [],
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},],
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},],
inspector: [],
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
rules:{},
// 报警信息表格数据
deviceAlarmList: [],
// 报警类型字典
typeOptions: [],
// 设备级联
options: [],
dataListdetail1: [],
dataListdetail2: [],
dataListdetail3: [],
props: {
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
value: "id",
label: "name",
level: "level",
children: "childList",
},
devices: null,
// 巡检员列表
inspector: [],
alarmId:'',
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
deviceId: null,
orderId: null,
alarmType: null,
alarmValue: null,
startTime: null,
endTime: null,
dealStatus: null
},
// 表单参数
form: { },
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
rules: {},
// 报警信息表格数据
deviceAlarmList: [],
// 报警类型字典
typeOptions: [],
// 设备级联
options: [],
dataListdetail1: [],
dataListdetail2: [],
dataListdetail3: [],
props: {
multiple: true,
value: "id",
label: "name",
level: "level",
children: "childList",
},
devices: null,
// 巡检员列表
inspector: [],
alarmId: '',
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
deviceId: null,
orderId: null,
alarmType: null,
alarmValue: null,
startTime: null,
endTime: null,
dealStatus: null
},
// 表单参数
form: {},
};
},
created() {
// 如果是跳转来的，则接受初始化参数
// this.user_id = this.$route.query.id; //详细信息页接收参数
this.alarmId = +this.$route.query.alarmId;
console.log("query",this.$route.query.alarmId)
this.alarmId = +this.$route.query.alarmId;
console.log("query", this.$route.query.alarmId)
this.getList();
this.getDicts("t_order_status").then(response => {
......@@ -243,24 +258,24 @@ export default {
});
this.getDeviceAlarm();
},
mounted(){
let gaoMap = new gaodeMap("石家庄");
mounted() {
let gaoMap = new gaodeMap("石家庄");
this.gaoMap = gaoMap;
// this.getDeviceAlarm();
},
methods: {
getInspectorList(){
getInspectorList() {
this.loading = true;
inspectorList().then(response => {
this.inspector = response.data;
this.loading = false;
});
},
initData(getData1, getData2, getData3) {
// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('main1'));
// 绘制图表
myChart1.setOption({
......@@ -356,7 +371,7 @@ export default {
drawPieChart(getData4, getData5, getData3) {
// 基于准备好的dom，初始化echarts实例
var myChart2 = echarts.init(document.getElementById('main2'));
// 绘制图表
myChart2.setOption({
title: {
......@@ -445,7 +460,7 @@ export default {
main3(getData6, getData3) {
// 基于准备好的dom，初始化echarts实例
var myChart3 = echarts.init(document.getElementById('main3'));
// 绘制图表
myChart3.setOption({
......@@ -588,7 +603,7 @@ export default {
},
// 点击按钮显示隐藏
// 点击按钮显示隐藏
// changeDisplay(e){
// this.isDisplay = !this.isDisplay
// let $timeline = this.$refs.timeline;
......@@ -625,27 +640,27 @@ export default {
},
/** 查询工单基础信息列表 */
getList() {
this.loading = true;
listDeviceAlarm(this.queryParams).then(response => {
this.deviceAlarmList = response.rows;
this.total = response.total;
this.loading = false;
});
},
getDeviceAlarm (){
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.loading = true;
listDeviceAlarm(this.queryParams).then(response => {
this.deviceAlarmList = response.rows;
this.total = response.total;
this.loading = false;
});
},
getDeviceAlarm() {
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)
console.log("this.form", this.form)
this.active = parseInt(response.data.orderStatus) + 1;
this.gaoMap.resetMapCenter([this.form.longitude,this.form.latitude]);
this.gaoMap.resetMapCenter([this.form.longitude, this.form.latitude]);
this.gaoMap.addMarker(DEVICE_TYPE.WORKORDER, this.form)
var getData1 = [];
......@@ -657,7 +672,7 @@ export default {
var getData7 = [];
//先进行赋值
for (let i = 0; i < this.form.deviceReportDataList.length; i++) {
getData1.push( this.form.deviceReportDataList[i].standardConditionFlow)
getData1.push(this.form.deviceReportDataList[i].standardConditionFlow)
getData2.push(this.form.deviceReportDataList[i].workingConditionFlow)
getData3.push(this.form.deviceReportDataList[i].reportTime)
getData4.push(this.form.deviceReportDataList[i].standardConditionAccumulation)
......@@ -672,12 +687,12 @@ export default {
this.main3(getData6, getData3);
this.main4(getData7, getData3);
console.log(this.form.deviceReportDataList)
console.log("getData1",getData1)
console.log("getData2",getData2)
console.log("getData3",getData3)
console.log("getData1", getData1)
console.log("getData2", getData2)
console.log("getData3", getData3)
// this.active = parseInt(response.data.orderStatus) + 1;
// if(this.form.deviceInfoList.length>0){
// this.gaoMap.resetMapCenter([this.form.deviceInfoList[0].longitude,this.form.deviceInfoList[0].latitude]);
......@@ -687,11 +702,11 @@ export default {
// this.gaoMap.addMarker(DEVICE_TYPE.WORKORDER, obj)
// }
if(this.form.orderType == '1') {
if (this.form.orderType == '1') {
// 获取设备列表树
let data = {
key1:this.form.deviceInfoList,
key2:this.form.pipeList
key1: this.form.deviceInfoList,
key2: this.form.pipeList
};
deviceTree(data).then(response => {
this.deviceOptions[0].childList = response.data;
......@@ -742,7 +757,7 @@ export default {
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.orderId)
this.single = selection.length!==1
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
......@@ -752,133 +767,147 @@ export default {
this.title = "添加工单基础信息";
},
/** 归档按钮操作 */
handleFinish(res) {
// this.reset();
getDeviceAlarm(res).then(response => {
this.form = response.data;
this.open = true;
this.title = "工单信息归档";
});
},
handleFinish(res) {
// this.reset();
getDeviceAlarm(res).then(response => {
this.form = response.data;
this.open = true;
this.title = "工单信息归档";
});
},
/** 修改按钮操作 */
handleUpdate(res) {
// this.reset();
this.getInspectorList();
getInspectorList(this.orderId).then(response => {
this.form = response.data;
this.open = true;
this.title = "工单信息修改";
});
},
// this.reset();
this.getInspectorList();
getInspectorList(this.orderId).then(response => {
this.form = response.data;
this.open = true;
this.title = "工单信息修改";
});
},
/** 提交按钮 */
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.orderStatus == '0') {
updateBasicsInfo(this.form).then(response => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else if(this.form.orderStatus == '2'){
updateOrderStatus(this.form).then(response => {
this.msgSuccess("操作成功");
this.open = false;
this.getList();
});
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.orderStatus == '0') {
updateBasicsInfo(this.form).then(response => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else if (this.form.orderStatus == '2') {
updateOrderStatus(this.form).then(response => {
this.msgSuccess("操作成功");
this.open = false;
this.getList();
});
}
}
}
});
},
});
},
/** 删除按钮操作 */
handleDelete(row) {
const orderIds = row.orderId || this.ids;
this.$confirm('是否确认删除工单基础信息编号为"' + orderIds + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return delBasicsInfo(orderIds);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
}).catch(() => {});
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return delBasicsInfo(orderIds);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
}).catch(() => { });
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有工单基础信息数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.exportLoading = true;
return exportBasicsInfo(queryParams);
}).then(response => {
this.download(response.msg);
this.exportLoading = false;
}).catch(() => {});
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.exportLoading = true;
return exportBasicsInfo(queryParams);
}).then(response => {
this.download(response.msg);
this.exportLoading = false;
}).catch(() => { });
}
}
}
</script>
<style>
.div-null{
width: 100%;
height: 300px;
text-align: center;
line-height: 250px;
}
.el-tree-node__content{
width: 150px;
}
.el-divider--horizontal {
display: block;
height: 1px;
width: 100%;
margin: 20px 0;
}
.feedbackTime-div{
float: left;margin-left: 150px;margin-top: 10px;
}
.feedbackTime{
height: 120px;
width: 120px;
float: left;
margin-left: 15px;
margin-top: 5px;
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.el-card__body {
padding: 5px 20px 20px 20px;
}
.detail .el-form{
width: 20%;
}
.detail .el-form-item{
margin-bottom: 0px;
}
.el-tree{
margin-top: 5px;
}
.avatar-uploader{
width: 25%;
float: left;
}
.avatar-uploader .el-upload {
</script>
<style>
.div-null {
width: 100%;
height: 300px;
text-align: center;
line-height: 250px;
}
.el-tree-node__content {
width: 150px;
}
.el-divider--horizontal {
display: block;
height: 1px;
width: 100%;
margin: 20px 0;
}
.feedbackTime-div {
float: left;
margin-left: 150px;
margin-top: 10px;
}
.feedbackTime {
height: 120px;
width: 120px;
float: left;
margin-left: 15px;
margin-top: 5px;
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.el-card__body {
padding: 5px 20px 20px 20px;
}
.detail .el-form {
width: 20%;
}
.detail .el-form-item {
margin-bottom: 0px;
}
.el-tree {
margin-top: 5px;
}
.avatar-uploader {
width: 25%;
float: left;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
......@@ -887,13 +916,15 @@ export default {
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
li{
li {
font-size: 15px;
font-weight: 900;
}
</style>
</style>
\ No newline at end of file
gassafety-web/src/views/dataMonitoring/deviceAlarm/index.vue
View file @ 928bd1ab
......@@ -351,7 +351,8 @@ export default {
this.$router.push({
path: '/dataMonitoring/alarmdetail',
query: {
alarmId: row.alarmId
alarmId: row.alarmId,
deviceType:row.deviceType
}
}) //带参跳转
},
......
gassafety-web/src/views/dataMonitoring/realtimeData/index.vue
View file @ 928bd1ab
......@@ -177,7 +177,8 @@ export default {
this.$router.push({
path: '/dataMonitoring/realtimedetail',
query:{
deviceId : row.deviceId
deviceId : row.deviceId,
deviceType: row.deviceType
}
}) //带参跳转
},
......
gassafety-web/src/views/dataMonitoring/realtimedetail/index.vue
View file @ 928bd1ab
<template>
<div class="app-container detail" style="background-color: rgb(238, 241, 245);">
<div style="padding-top: 10px;background: #fff;height: 100%;">
<div>
<div style="width: 5%;height: 45px;margin-left: 20px;" @click="$router.go(-1)">
<el-button size="medium" type="text" style="font-size: 18px; color: rgb(7, 63, 112);float: left;">返回
</el-button>
<div style="float: left;margin-top: 8px;margin-left: 5px;"><img src="../../../assets/logo/fanhui.png"
style="width: 25px;" alt=""></div>
</div>
</div>
<div style="width: 100%;height: 350px;padding: 10px;height: 300px;">
<div style="width: 66.6%;float: left;height: 100%;">
<el-table :data="dataListdetail1" 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="deviceType">
<template slot-scope="scope">
<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="standardConditionAccumulation" />
</el-table>
<el-table :data="dataListdetail2" style="width: 100%;margin-top: 20px;">
<el-table-column label="工况累计量" align="center" prop="workingConditionAccumulation" />
<el-table-column label="剩余量" align="center" prop="residualQuantity" />
<el-table-column label="标况流量" align="center" prop="standardConditionFlow" />
<el-table-column label="工况流量" align="center" prop="workingConditionFlow" />
</el-table>
<el-table :data="dataListdetail3" style="width: 100%;margin-top: 20px;">
<el-table-column label="温度" align="center" prop="temperature" />
<el-table-column label="压力" align="center" prop="pressure" />
<el-table-column label="上报时间" align="center" prop="reportTime" />
<el-table-column label="设备状态" align="center" prop="deviceStatus">
</el-table-column>
</el-table>
</div>
<div id="marbox" style="width: 33%;height: 350px; border: 1px solid rgb(218, 213, 213);float: right;margin-top: -45px;">
<div style="width: 100%;height: 100%" id="container"></div>
</div>
</div>
<div v-if="form.deviceType != '4'" style="height: 320px;width: 100%;margin-top: 15px;padding: 10px;">
<div id="main1" style="float: left;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;">
<div v-if = "form.deviceReportDataList == null" class="div-null">
<p>暂无数据</p>
</div>
<el-row>
<el-col :span="24" style="padding-left: 15px;">
<div style="height: 45px;" @click="$router.go(-1)">
<el-button size="medium" type="text" style="font-size: 18px; color: rgb(7, 63, 112);float: left;">返回
</el-button>
<div style="float: left;margin-top: 8px;margin-left: 5px;"><img src="../../../assets/logo/fanhui.png" style="width: 25px;" alt=""></div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="16" style="padding: 10px;">
<div style="height: 100%;">
<el-table :data="dataListdetail1" 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="deviceType">
<template slot-scope="scope">
<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="standardConditionAccumulation" />
</el-table>
<el-table :data="dataListdetail2" style="width: 100%;margin-top: 20px;">
<el-table-column label="工况累计量" align="center" prop="workingConditionAccumulation" />
<el-table-column label="剩余量" align="center" prop="residualQuantity" />
<el-table-column label="标况流量" align="center" prop="standardConditionFlow" />
<el-table-column label="工况流量" align="center" prop="workingConditionFlow" />
</el-table>
<el-table :data="dataListdetail3" style="width: 100%;margin-top: 20px;">
<el-table-column label="温度" align="center" prop="temperature" />
<el-table-column label="压力" align="center" prop="pressure" />
<el-table-column label="上报时间" align="center" prop="reportTime" />
<el-table-column label="设备状态" align="center" prop="deviceStatus">
</el-table-column>
</el-table>
</div>
<div id="main2" style="float: right;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;">
<div v-if = "form.deviceReportDataList == null" class="div-null">
<p>暂无数据</p>
</el-col>
<el-col :span="8" style="padding: 10px;padding-left: 0px;">
<div id="marbox" style="height: 350px; border: 1px solid rgb(218, 213, 213);margin-top: -45px;">
<div style="width: 100%;height: 100%" id="container"></div>
</div>
</div>
</div>
</el-col>
</el-row>
<div style="height: 320px;width: 100%;padding: 10px;margin-top: 10px;">
<div v-if="form.deviceType != '4'" id="main3" style="float: left;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;">
<div v-if = "form.deviceReportDataList == null" class="div-null">
<p>暂无数据</p>
</div>
</div>
<div id="main4" style="float: left;width: 49.8%;margin-left: 5px;height:300px;background-color: rgb(247 247 247);padding: 5px;">
<div v-if = "form.deviceReportDataList == null" class="div-null">
<p>暂无数据</p>
</div>
</div>
</div>
<template v-if="$route.query.deviceType !='0'">
<el-row v-if="form.deviceType != '4'">
<el-col :span="12" style="padding: 10px;">
<div id="main1" style="height:300px;background-color: rgb(247 247 247);padding: 5px;">
<div v-if = "form.deviceReportDataList == null" class="div-null">
<p>暂无数据</p>
</div>
</div>
</el-col>
<el-col :span="12" style="padding: 10px;">
<div id="main2" style="height:300px;background-color: rgb(247 247 247);padding: 5px;">
<div v-if = "form.deviceReportDataList == null" class="div-null">
<p>暂无数据</p>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12" style="padding: 10px;" v-if="form.deviceType != '4'">
<div id="main3" style="height:300px;background-color: rgb(247 247 247);padding: 5px;">
<div v-if = "form.deviceReportDataList == null" class="div-null">
<p>暂无数据</p>
</div>
</div>
</el-col>
<el-col :span="12" style="padding: 10px;">
<div id="main4" style="margin-left: 5px;height:300px;background-color: rgb(247 247 247);padding: 5px;">
<div v-if = "form.deviceReportDataList == null" class="div-null">
<p>暂无数据</p>
</div>
</div>
</el-col>
</el-row>
<!-- <div v-if="form.deviceType != '4'" style="height: 320px;width: 100%;margin-top: 15px;padding: 10px;"> -->
<!-- </div> -->
<!-- <div style="height: 320px;width: 100%;padding: 10px;margin-top: 10px;"> -->
<!-- </div> -->
</template>
</div>
......
gassafety-web/src/views/workOrder/detail/index.vue
View file @ 928bd1ab
......@@ -2,15 +2,16 @@
<div class="app-container detail" style="background-color: rgb(238, 241, 245);">
<!-- 工单信息 -->
<div style="padding-top: 10px;background: #fff;height: 100%;">
<div>
<div style="width: 5%;height: 45px;margin-left: 20px;" @click="$router.go(-1)">
<el-button
size="medium"
type="text"
style="font-size: 18px; color: rgb(7, 63, 112);float: left;"
>返回</el-button>
<div style="float: left;margin-top: 8px;margin-left: 5px;"><img src="../../../assets/logo/fanhui.png" style="width: 25px;" alt=""></div>
</div>
<el-row>
<el-col :span="24" style="padding-left: 15px;">
<div style="height: 45px;" @click="$router.go(-1)">
<el-button size="medium" type="text" style="font-size: 18px; color: rgb(7, 63, 112);float: left;">返回
</el-button>
<div style="float: left;margin-top: 8px;margin-left: 5px;"><img src="../../../assets/logo/fanhui.png" style="width: 25px;" alt=""></div>
</div>
</el-col>
</el-row>
<el-steps :active="active" finish-status="success" simple prop="orderStatus" style="margin-top: 5px">
<el-step title="未接收" ></el-step>
<el-step title="已接收" ></el-step>
......@@ -18,88 +19,113 @@
<el-step title="已反馈" ></el-step>
<el-step title="已归档" ></el-step>
</el-steps>
</div>
<div style="width: 100%;height: 265px;">
<el-divider></el-divider>
<div style="color: #31EAEA;width: 30%;height: 30px;">
<ul><li>详细信息</li></ul>
</div>
<el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="float: left;margin-left: 50px;">
<el-form-item label="工单类型:" prop="orderType">
<font v-if="form.orderType == 1">巡检信息</font>
<font v-if="form.orderType == 2">隐患信息</font>
<font v-if="form.orderType == 3">报警信息</font>
</el-form-item>
<el-form-item label="工单编号:" prop="orderId">
<font>{{form.orderId}}</font>
</el-form-item>
<el-form-item label="工单名称:" prop="orderName">
<font>{{form.orderName}}</font>
</el-form-item>
<el-form-item label="工单状态:" prop="orderStatus">
<font v-if="form.orderStatus == 0">未接收</font>
<font v-if="form.orderStatus == 1">已接收</font>
<font v-if="form.orderStatus == 2">已反馈</font>
<font v-if="form.orderStatus == 3">已归档</font>
</el-form-item>
<el-form-item label="指定执行人员:" prop="appointInspectorName">
<font>{{form.appointInspectorName}}</font>
</el-form-item>
<el-form-item label="工单描述:" prop="remarks">
<font>{{form.remarks}}</font>
</el-form-item>
</el-form>
<el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="float: left;width: 25%;">
<el-form-item label="设备类型:" prop="deviceType" v-if="form.orderType != 1">
<font v-if="form.deviceType == 0">管道</font>
<font v-if="form.deviceType == 1">调压阀</font>
<font v-if="form.deviceType == 2">阀门井</font>
<font v-if="form.deviceType == 3">流量计</font>
<font v-if="form.deviceType == 4">压力表</font>
</el-form-item>
<el-form-item label="设备名称:" prop="deviceName">
<font v-if="form.orderType != 1">{{form.deviceName}}</font>
<el-tree
:data="deviceOptions"
:props="defaultProps"
:expand-on-click-node="false"
ref="tree"
@node-click="handleNodeClick"
v-if="form.orderType == 1"
/>
</el-form-item>
<el-form-item label="设备位置:" v-if="form.orderType != 1">
<font>{{form.address}}</font>
</el-form-item>
<el-form-item label="工单进度:" v-if="form.orderType == 1">
<font>{{form.finishNum}}/{{form.deviceNum}}</font>
</el-form-item>
<el-form-item label="下发时间:" prop="allotTime">
<font>{{form.allotTime}}</font>
</el-form-item>
<!-- <el-form-item label="接收时间:" prop="actualTime">
<font>{{form.actualTime}}</font>
</el-form-item> -->
</el-form>
<div id="marbox" style="width: 700px;height: 250px;float: left;margin-top: -35px; border: 1px solid rgb(218, 213, 213);">
<div style="width: 100%;height: 100%" id="container"></div>
</div>
</div>
<el-row style="width: 100%;">
<el-col :span="24">
<div style="color: #31EAEA;height: 25px;">
<ul><li>详细信息</li></ul>
</div>
</el-col>
</el-row>
<el-row style="width: 100%;padding: 10px;padding-left: 40px;">
<el-col :span="6">
<el-form ref="form" v-model="form" :rules="rules">
<el-form-item label="工单类型:" prop="orderType" style="margin-bottom: 0px;">
<font v-if="form.orderType == 1">巡检信息</font>
<font v-if="form.orderType == 2">隐患信息</font>
<font v-if="form.orderType == 3">报警信息</font>
</el-form-item>
<el-form-item label="工单编号:" prop="orderId" style="margin-bottom: 0px;">
<font>{{form.orderId}}</font>
</el-form-item>
<el-form-item label="工单名称:" prop="orderName" style="margin-bottom: 0px;">
<font>{{form.orderName}}</font>
</el-form-item>
<el-form-item label="工单状态:" prop="orderStatus" style="margin-bottom: 0px;">
<font v-if="form.orderStatus == 0">未接收</font>
<font v-if="form.orderStatus == 1">已接收</font>
<font v-if="form.orderStatus == 2">已反馈</font>
<font v-if="form.orderStatus == 3">已归档</font>
</el-form-item>
<el-form-item label="指定执行人员:" prop="appointInspectorName" style="margin-bottom: 0px;">
<font>{{form.appointInspectorName}}</font>
</el-form-item>
<el-form-item label="工单描述:" prop="remarks" style="margin-bottom: 0px;">
<font>{{form.remarks}}</font>
</el-form-item>
</el-form>
</el-col>
<el-col :span="6">
<el-form ref="form" v-model="form" :rules="rules">
<el-form-item label="设备类型:" prop="deviceType" v-if="form.orderType != 1" style="margin-bottom: 0px;">
<font v-if="form.deviceType == 0">管道</font>
<font v-if="form.deviceType == 1">调压阀</font>
<font v-if="form.deviceType == 2">阀门井</font>
<font v-if="form.deviceType == 3">流量计</font>
<font v-if="form.deviceType == 4">压力表</font>
</el-form-item>
<el-form-item label="设备名称:" prop="deviceName" style="margin-bottom: 0px;">
<font v-if="form.orderType != 1">{{form.deviceName}}</font>
<el-tree
:data="deviceOptions"
:props="defaultProps"
:expand-on-click-node="false"
ref="tree"
@node-click="handleNodeClick"
v-if="form.orderType == 1"
/>
</el-form-item>
<el-form-item label="设备位置:" v-if="form.orderType != 1" style="margin-bottom: 0px;">
<font>{{form.address}}</font>
</el-form-item>
<el-form-item label="工单进度:" v-if="form.orderType == 1" style="margin-bottom: 0px;">
<font>{{form.finishNum}}/{{form.deviceNum}}</font>
</el-form-item>
<el-form-item label="下发时间:" prop="allotTime" style="margin-bottom: 0px;">
<font>{{form.allotTime}}</font>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<div id="marbox" style="width: 100%;height: 250px;margin-top: -35px; border: 1px solid rgb(218, 213, 213);">
<div style="width: 100%;height: 100%" id="container"></div>
</div>
</el-col>
</el-row>
<!-- 接单信息 -->
<div v-if="form.actualTime != '' && form.actualTime != null">
<el-divider></el-divider>
<div style="color: #31EAEA;width: 100%;height: 40px;">
<ul><li>接单信息</li></ul>
</div>
<el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="margin-left: 50px;height: 30px;width: 100%;">
<el-form-item label="接单人:" prop="actualInspectorName" style="float: left;width: 20%;">
<font>{{form.actualInspectorName}}</font>
</el-form-item>
<el-form-item label="接单时间:" prop="actualTime" style="float: left;">
<font>{{form.actualTime}}</font>
</el-form-item>
</el-form>
<el-row>
<el-col :span="24">
<div style="color: #31EAEA;width: 100%;height: 40px;">
<ul><li>接单信息</li></ul>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="height: 30px;width: 100%;">
<el-form-item label="接单人:" prop="actualInspectorName">
<font>{{form.actualInspectorName}}</font>
</el-form-item>
</el-form>
</el-col>
<el-col :span="6">
<el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="height: 30px;width: 100%;">
<el-form-item label="接单时间:" prop="actualTime">
<font>{{form.actualTime}}</font>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
<el-divider></el-divider>
<!-- 反馈信息 -->
......@@ -111,9 +137,9 @@
<el-timeline ref="timeline">
<el-timeline-item v-for="(activity, index) in form.feedbackList" v-show='index>1?false:true' :key="index" :timestamp="activity.feedbackTime">
<el-card>
<div style="width: 600px;float: left;">
<div style=" width: 600px;">
<div style="float: left;margin-left: 50px; width: 250px;">
<el-row>
<el-col :span="6">
<p>设备类型：
<span v-if="activity.deviceType == 0">管道</span>
<span v-if="activity.deviceType == 1">调压箱</span>
......@@ -136,25 +162,37 @@
<span>{{activity.contents}}</span>
</p>
</div>
</div>
<div style="float: left;margin-left: 50px; width: 250px;">
</el-col>
<el-col :span="6">
<p>设备名称：{{activity.deviceName}}</p>
<p>反馈时间：{{activity.feedbackTime}}</p>
<p>反馈时间：{{activity.feedbackTime}}</p>
</el-col>
<el-col :span="12">
<div class="feedbackTime-div">
<div class="feedbackTime">
<el-image :src="activity.pictureUrl1" :preview-src-list="[activity.pictureUrl1]" v-if="activity.pictureUrl1 != null && activity.pictureUrl1 != ''" style="width: 90px;"></el-image>
</div>
<div class="feedbackTime">
<el-image :src="activity.pictureUrl2" :preview-src-list="[activity.pictureUrl2]" v-if="activity.pictureUrl2 != null && activity.pictureUrl2 != ''" style="width: 90px;"></el-image>
</div>
<div class="feedbackTime">
<el-image :src="activity.pictureUrl3" :preview-src-list="[activity.pictureUrl3]" v-if="activity.pictureUrl3 != null && activity.pictureUrl3 != ''" style="width: 90px;"></el-image>
</div>
</div>
</el-col>
</el-row>
<!-- <div style="width: 600px;float: left;">
<div style=" width: 600px;">
<div style="float: left;margin-left: 50px; width: 250px;">
</div>
<div style="float: left;margin-left: 50px; width: 250px;">
</div>
</div>
</div>
</div>
<div class="feedbackTime-div">
<div class="feedbackTime">
<el-image :src="activity.pictureUrl1" :preview-src-list="[activity.pictureUrl1]" v-if="activity.pictureUrl1 != null && activity.pictureUrl1 != ''" style="width: 90px;"></el-image>
</div>
<div class="feedbackTime">
<el-image :src="activity.pictureUrl2" :preview-src-list="[activity.pictureUrl2]" v-if="activity.pictureUrl2 != null && activity.pictureUrl2 != ''" style="width: 90px;"></el-image>
</div>
<div class="feedbackTime">
<el-image :src="activity.pictureUrl3" :preview-src-list="[activity.pictureUrl3]" v-if="activity.pictureUrl3 != null && activity.pictureUrl3 != ''" style="width: 90px;"></el-image>
</div>
</div>
-->
</el-card>
</el-timeline-item>
</el-timeline>
......@@ -236,6 +274,7 @@
</div>
</div>
</div>
</div>
</template>
<script>
......@@ -567,12 +606,6 @@ export default {
.el-card__body {
padding: 5px 20px 20px 20px;
}
.detail .el-form{
width: 20%;
}
.detail .el-form-item{
margin-bottom: 0px;
}
.el-tree{
margin-top: 5px;
}
......
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