124 lines
3.6 KiB
Vue
124 lines
3.6 KiB
Vue
|
<template>
|
||
|
|
<el-dialog
|
||
|
|
v-dialogDrag
|
||
|
|
:visible.sync="dialogShow"
|
||
|
|
class="graphic_element_dialog"
|
||
|
|
width="480px"
|
||
|
|
:before-close="doClose"
|
||
|
|
:z-index="2000"
|
||
|
|
:modal="false"
|
||
|
|
border
|
||
|
|
:close-on-click-modal="false"
|
||
|
|
>
|
||
|
|
<div style="width: 100%;color: #0DC8DE;font-size: 22px; margin: 10px 0; text-align: center;"><span>{{ title }}</span></div>
|
||
|
|
<el-table :data="tableData" :cell-style="styleObject" :header-cell-style="styleObject" style="border-left: 2px solid #FFF;border-top: 2px solid #FFF;">
|
||
|
|
<el-table-column
|
||
|
|
prop="graphicEle"
|
||
|
|
label="图元"
|
||
|
|
>
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<img style="height: 30px" :src="graphicEleMap[scope.row.graphicEle]">
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="deviceType" label="设备类型" />
|
||
|
|
</el-table>
|
||
|
|
<div style="color: #0DC8DE;font-size: 14px;margin-top: 20px;"><span>注:图元颜色含义</span></div>
|
||
|
|
<div style="color: #0DC8DE;font-size: 14px;margin-left: 20px;"><span>绿色:正常。红色:报警</span></div>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import ManualAlarm from '@/assets/iscs_icon/manual_alarm.png';
|
||
|
|
import FireHydrant from '@/assets/iscs_icon/fire_hydrant.png';
|
||
|
|
import SmokeDetector from '@/assets/iscs_icon/smoke_detector.png';
|
||
|
|
import GasFireControl from '@/assets/iscs_icon/gas_fire_control.png';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'GraphicEle',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
dialogShow: false,
|
||
|
|
loading: false,
|
||
|
|
standFASData: [
|
||
|
|
{graphicEle: 'manualAlarm', deviceType: '手动报警按钮'},
|
||
|
|
{graphicEle: 'fireHydrant', deviceType: '消火栓按钮'},
|
||
|
|
{graphicEle: 'smokeDetector', deviceType: '点型火灾探测器'},
|
||
|
|
{graphicEle: 'gasFireControl', deviceType: '气体灭火控制器'}
|
||
|
|
],
|
||
|
|
graphicEleMap: {
|
||
|
|
manualAlarm: ManualAlarm,
|
||
|
|
fireHydrant: FireHydrant,
|
||
|
|
smokeDetector: SmokeDetector,
|
||
|
|
gasFireControl: GasFireControl
|
||
|
|
},
|
||
|
|
styleObject: {
|
||
|
|
background: '#465F79',
|
||
|
|
color: '#0DC8DE',
|
||
|
|
borderBottom: '2px solid #FFF',
|
||
|
|
borderRight: '2px solid #FFF',
|
||
|
|
textAlign: 'center'
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
title() {
|
||
|
|
let title = '';
|
||
|
|
switch (this.$route.params.mode) {
|
||
|
|
case 'standFAS':
|
||
|
|
title = 'fAS火灾图元详情';
|
||
|
|
}
|
||
|
|
return title;
|
||
|
|
},
|
||
|
|
tableData() {
|
||
|
|
let tableData = [];
|
||
|
|
switch (this.$route.params.mode) {
|
||
|
|
case 'standFAS':
|
||
|
|
case 'stationHallFAS':
|
||
|
|
tableData = this.standFASData;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return tableData;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
doShow() {
|
||
|
|
this.dialogShow = true;
|
||
|
|
},
|
||
|
|
doClose() {
|
||
|
|
this.loading = false;
|
||
|
|
this.dialogShow = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.graphic_element_dialog .el-dialog .el-dialog__header {
|
||
|
|
width: 100%;
|
||
|
|
height: 30px;
|
||
|
|
background-image: linear-gradient(#F0DBCE,#ECB85E, #F0DBCE);
|
||
|
|
}
|
||
|
|
.graphic_element_dialog .el-dialog .el-dialog__headerbtn{
|
||
|
|
position: absolute;
|
||
|
|
top: 5px;
|
||
|
|
right: 10px;
|
||
|
|
padding: 0;
|
||
|
|
background: 0 0;
|
||
|
|
outline: 0;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 16px;
|
||
|
|
border: 1px solid #FFF;
|
||
|
|
width: 20px;
|
||
|
|
height: 18px;
|
||
|
|
}
|
||
|
|
.graphic_element_dialog .el-dialog .el-dialog__body {
|
||
|
|
padding: 30px 20px;
|
||
|
|
color: #606266;
|
||
|
|
font-size: 14px;
|
||
|
|
word-break: break-all;
|
||
|
|
background: #465F79;
|
||
|
|
border: 3px solid #FFF;
|
||
|
|
}
|
||
|
|
</style>
|