rt-sim-training-client/src/views/iscs/iscsSystem/config/graphicEle.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>