rt-sim-training-client/src/views/iscs/iscsSystem/config/graphicEle.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: '气体灭火控制器'}
            ],
            basData: [
                {graphicEle: 'AirConditioner', deviceType: '组合式空调机组、空调器'},
                {graphicEle: 'Ventilator', deviceType: '普通风机'},
                {graphicEle: '', deviceType: '隧道风机'},
                {graphicEle: '', deviceType: '排热风机'},
                {graphicEle: 'FireDamper', deviceType: '防火阀'},
                {graphicEle: 'SmookExhaustFd', deviceType: '排烟防火阀'},
                {graphicEle: 'VolumeControlDamper', deviceType: '电动风阀'},
                {graphicEle: 'SmookProofFd', deviceType: '防烟防火阀'},
                {graphicEle: '', deviceType: '冷却塔'},
                {graphicEle: '', deviceType: '冷水机组'},
                {graphicEle: '', deviceType: '电动蝶阀'},
                {graphicEle: '', deviceType: '动态平衡电动调节阀'},
                {graphicEle: '', 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>