192 lines
7.5 KiB
Vue
192 lines
7.5 KiB
Vue
<template>
|
|
<el-dialog
|
|
v-dialogDrag
|
|
:visible.sync="dialogShow"
|
|
class="graphic_element_dialog"
|
|
:width="width"
|
|
: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]">
|
|
<div class="shorthand">{{ scope.row.shorthand }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="deviceType" label="设备类型" />
|
|
<el-table-column
|
|
v-if="isDoubleRow"
|
|
prop="graphicEle1"
|
|
label="图元"
|
|
>
|
|
<template slot-scope="scope">
|
|
<img style="height: 30px" :src="graphicEleMap[scope.row.graphicEle1]">
|
|
<div class="shorthand">{{ scope.row.shorthand1 }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column v-if="isDoubleRow" prop="deviceType1" 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>{{ meaning }}</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';
|
|
import AirConditioner from '@/assets/iscs_icon/air_conditioner.png';
|
|
import Ventilator from '@/assets/iscs_icon/ventilator.png';
|
|
import TunnelFan from '@/assets/iscs_icon/tunnel_fan.png';
|
|
import OrbitalVentilator from '@/assets/iscs_icon/orbital_ventilator.png';
|
|
import FireDamper from '@/assets/iscs_icon/fire_damper.png';
|
|
import SmookExhaustFd from '@/assets/iscs_icon/smook_exhaust_fd.png';
|
|
import VolumeControlDamper from '@/assets/iscs_icon/volume_control_damper.png';
|
|
import SmookProofFd from '@/assets/iscs_icon/smook_proof_fd.png';
|
|
import CoolTower from '@/assets/iscs_icon/cool_tower.png';
|
|
import Chiller from '@/assets/iscs_icon/chiller.png';
|
|
import ElectricButterflyValve from '@/assets/iscs_icon/electric_butterfly_value.png';
|
|
import BalancedElectric from '@/assets/iscs_icon/balanced_electric.png';
|
|
import FrozenPump from '@/assets/iscs_icon/frozen_pump.png';
|
|
|
|
export default {
|
|
name: 'GraphicEle',
|
|
data() {
|
|
return {
|
|
dialogShow: false,
|
|
loading: false,
|
|
standFASData: [
|
|
{graphicEle: 'manualAlarm', deviceType: '手动报警按钮', shorthand: ''},
|
|
{graphicEle: 'fireHydrant', deviceType: '消火栓按钮', shorthand: ''},
|
|
{graphicEle: 'smokeDetector', deviceType: '点型火灾探测器', shorthand: ''},
|
|
{graphicEle: 'gasFireControl', deviceType: '气体灭火控制器', shorthand: ''}
|
|
],
|
|
basData: [
|
|
{graphicEle: 'AirConditioner', deviceType: '组合式空调机组、空调器', shorthand: '', graphicEle1: 'CoolTower', deviceType1: '冷却塔', shorthand1: ''},
|
|
{graphicEle: 'Ventilator', deviceType: '普通风机', shorthand: '', graphicEle1: 'Chiller', deviceType1: '冷水机组', shorthand1: ''},
|
|
{graphicEle: 'TunnelFan', deviceType: '隧道风机', shorthand: '', graphicEle1: 'ElectricButterflyValve', deviceType1: '电动蝶阀', shorthand1: 'MV'},
|
|
{graphicEle: 'OrbitalVentilator', deviceType: '排热风机', shorthand: '', graphicEle1: 'BalancedElectric', deviceType1: '动态平衡电动调节阀', shorthand1:'BV'},
|
|
{graphicEle: 'FireDamper', deviceType: '防火阀', shorthand: 'FD1', graphicEle1: 'FrozenPump', deviceType1: '冷冻泵、冷却泵', shorthand1: 'LD、LQ'},
|
|
{graphicEle: 'SmookExhaustFd', deviceType: '排烟防火阀', shorthand: 'FD2', graphicEle1: 'SmookProofFd', deviceType1: '防烟防火阀', shorthand1: 'SFD'},
|
|
{graphicEle: 'VolumeControlDamper', deviceType: '电动风阀', shorthand: 'MD'}
|
|
],
|
|
graphicEleMap: {
|
|
manualAlarm: ManualAlarm,
|
|
fireHydrant: FireHydrant,
|
|
smokeDetector: SmokeDetector,
|
|
gasFireControl: GasFireControl,
|
|
AirConditioner: AirConditioner,
|
|
Ventilator: Ventilator,
|
|
TunnelFan: TunnelFan,
|
|
OrbitalVentilator: OrbitalVentilator,
|
|
FireDamper: FireDamper,
|
|
SmookExhaustFd: SmookExhaustFd,
|
|
VolumeControlDamper: VolumeControlDamper,
|
|
SmookProofFd: SmookProofFd,
|
|
CoolTower: CoolTower,
|
|
Chiller: Chiller,
|
|
ElectricButterflyValve: ElectricButterflyValve,
|
|
BalancedElectric: BalancedElectric,
|
|
FrozenPump:FrozenPump
|
|
},
|
|
styleObject: {
|
|
background: '#465F79',
|
|
color: '#0DC8DE',
|
|
borderBottom: '2px solid #FFF',
|
|
borderRight: '2px solid #FFF',
|
|
textAlign: 'center'
|
|
},
|
|
tableData: [],
|
|
title: '',
|
|
meaning: '',
|
|
width: '480px',
|
|
doubleRowList: ['bigSystem', 'waterSystem', 'tunnelVentilation']
|
|
};
|
|
},
|
|
computed: {
|
|
isDoubleRow() {
|
|
return this.doubleRowList.includes(this.$route.params.mode);
|
|
}
|
|
},
|
|
watch: {
|
|
'$route.params.mode':function() {
|
|
this.initData();
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initData();
|
|
},
|
|
methods: {
|
|
doShow() {
|
|
this.dialogShow = true;
|
|
},
|
|
doClose() {
|
|
this.loading = false;
|
|
this.dialogShow = false;
|
|
},
|
|
initData() {
|
|
switch (this.$route.params.mode) {
|
|
case 'standFAS':
|
|
case 'stationHallFAS':
|
|
this.title = 'fAS火灾图元详情';
|
|
this.tableData = this.standFASData;
|
|
this.meaning = '绿色:正常。红色:报警';
|
|
this.width = '480px';
|
|
break;
|
|
case 'bigSystem':
|
|
case 'waterSystem':
|
|
case 'tunnelVentilation' :
|
|
this.title = 'BAS通风空调图元详情';
|
|
this.width = '600px';
|
|
this.tableData = this.basData;
|
|
this.meaning = '白色：关闭/停止。绿色：打开/运行。红色：报警。黄色：故障。';
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</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;
|
|
}
|
|
.shorthand {
|
|
display: inline-block ;
|
|
color: #0DC8DE;
|
|
font-size: 14px;
|
|
margin-right: 5px;
|
|
}
|
|
</style>
|