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]">
        </template>
      </el-table-column>
      <el-table-column prop="deviceType" label="设备类型" />
      <el-table-column
        v-if="this.$route.params.mode==='bigSystem'"
        prop="graphicEle1"
        label="图元"
      >
        <template slot-scope="scope">
          <img style="height: 30px" :src="graphicEleMap[scope.row.graphicEle1]">
        </template>
      </el-table-column>
      <el-table-column v-if="this.$route.params.mode==='bigSystem'" 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: '手动报警按钮'},
                {graphicEle: 'fireHydrant', deviceType: '消火栓按钮'},
                {graphicEle: 'smokeDetector', deviceType: '点型火灾探测器'},
                {graphicEle: 'gasFireControl', deviceType: '气体灭火控制器'}
            ],
            basData: [
                {graphicEle: 'AirConditioner', deviceType: '组合式空调机组、空调器', graphicEle1: 'CoolTower', deviceType1: '冷却塔', height: 60},
                {graphicEle: 'Ventilator', deviceType: '普通风机', graphicEle1: 'Chiller', deviceType1: '冷水机组', height: 60},
                {graphicEle: 'TunnelFan', deviceType: '隧道风机', graphicEle1: 'ElectricButterflyValve', deviceType1: '电动蝶阀'},
                {graphicEle: 'OrbitalVentilator', deviceType: '排热风机', graphicEle1: 'BalancedElectric', deviceType1: '动态平衡电动调节阀'},
                {graphicEle: 'FireDamper', deviceType: '防火阀', graphicEle1: 'FrozenPump', deviceType1: '冷冻泵、冷却泵'},
                {graphicEle: 'SmookExhaustFd', deviceType: '排烟防火阀'},
                {graphicEle: 'VolumeControlDamper', deviceType: '电动风阀'},
                {graphicEle: 'SmookProofFd', deviceType: '防烟防火阀'}
                // {graphicEle: 'CoolTower', deviceType: '冷却塔', height: 60},
                // {graphicEle: 'Chiller', deviceType: '冷水机组', height: 60},
                // {graphicEle: 'ElectricButterflyValve', deviceType: '电动蝶阀'},
                // {graphicEle: 'BalancedElectric', deviceType: '动态平衡电动调节阀'},
                // {graphicEle: 'FrozenPump', deviceType: '冷冻泵、冷却泵'}
            ],
            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'
        };
    },
    computed: {
        // title() {
        //     let title = '';
        //     switch (this.$route.params.mode) {
        //     case 'standFAS':
        //         title = 'fAS火灾图元详情';
        //         break;
        //     case 'bigSystem':
        //         title = 'BAS通风空调图元详情';
        //         break;
        //     }
        //     return title;
        // },
        // tableData() {
        //     let tableData = [];
        //     switch (this.$route.params.mode) {
        //     case 'standFAS':
        //     case 'stationHallFAS':
        //         tableData = this.standFASData;
        //         break;
        //     case 'bigSystem':
        //         tableData = this.basData;
        //         break;
        //     }
        //     return tableData;
        // },
        // meaning() {
        //     let meaning = '';
        //     switch (this.$route.params.mode) {
        //     case 'standFAS':
        //     case 'stationHallFAS':
        //         meaning = '绿色:正常。红色:报警';
        //         break;
        //     case 'bigSystem':
        //         meaning = '白色：关闭/停止。绿色：打开/运行。红色：报警。黄色：故障。';
        //         break;
        //     }
        //     return meaning;
        // }
    },
    watch: {
        '$route.params.mode':function() {
            switch (this.$route.params.mode) {
            case 'standFAS':
            case 'stationHallFAS':
                this.title = 'fAS火灾图元详情';
                this.tableData = this.standFASData;
                this.meaning = '绿色:正常。红色:报警';
                this.width = '480px';
                break;
            case 'bigSystem':
                this.title = 'BAS通风空调图元详情';
                this.width = '600px';
                this.tableData = this.basData;
                this.meaning = '白色：关闭/停止。绿色：打开/运行。红色：报警。黄色：故障。';
                break;
            }
        }
    },
    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>