rt-sim-training-client/src/views/iscs/iscsSystem/config/deviceControl.vue

<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogShow"
    class="iscs_device_control_dialog"
    width="600px"
    :before-close="doClose"
    :z-index="2000"
    :modal="false"
    border
    :close-on-click-modal="false"
  >
    <div style="position:relative; width: 90%; left: 5%;">
      <el-row style="font-size: 14px;color: #6F49FE; height: 30px; line-height: 30px;">
        <el-col :span="4"><div>设备名称</div></el-col>
        <el-col :span="4"><div style="width: 100%; background: #FFF; padding-left: 5px;">{{ modeName }}</div></el-col>
        <el-col :span="8"><div style="width: 100%; background: #FFF;">{{ stationName }}</div></el-col>
        <el-col :span="8"><div style="width: 100%; background: #FFF;">{{ deviceType }}</div></el-col>
      </el-row>
      <el-row v-if="operation==='home'" style="margin-top: 10px;font-size: 14px;color: #6F49FE; height: 30px; line-height: 30px;">
        <el-col :span="4"><div>状态</div></el-col>
        <el-col :span="20"><div style="width: 100%; background: #FFF;padding-left: 5px;">运行</div></el-col>
      </el-row>
      <el-row v-if="operation==='control'" style="margin-top: 40px;font-size: 14px;color: #6F49FE;">
        <el-col :span="7" :offset="2">
          <div style="border: 1px solid #AAA7A4; border-radius: 4px;text-align: center; height: 80px;">
            <el-row style="height: 40px; line-height: 40px;"><div>当前运行状况</div></el-row>
            <el-row><div style="height: 25px;width: 80px;background: #FFF;margin: auto; line-height: 25px;">运行</div></el-row>
          </div>
        </el-col>
        <el-col :span="14" :offset="1">
          <div style="border: 1px solid #AAA7A4; border-radius: 4px;text-align: center; height: 80px;">
            <el-row style="height: 40px; line-height: 40px;"><div>目标状况</div></el-row>
            <el-row><el-button style="margin-right: 15px">运行</el-button><el-button>停止</el-button></el-row>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="operation==='detail'" style="margin-top: 40px;font-size: 14px;color: #6F49FE;">
        <div style="position: relative;border: 1px solid #000; border-radius: 4px;background-image: linear-gradient(#CFCDCE,#EBEBE9);height: 150px;">
          <div style="position: absolute; width: 96%; left: 2%;background: #CDC5BF;height: 86%; top: 7%;padding: 20px 15px">
            <el-row style="height: 33%;line-height: 25px;">
              <el-col :span="12">读卡器非法尝试</el-col>
              <el-col :span="12">子控制器电池电量</el-col>
            </el-row>
            <el-row style="height: 33%;line-height: 25px;">
              <el-col :span="12">玻璃破碎</el-col>
              <el-col :span="12">子控制器防拆开关</el-col>
            </el-row>
            <el-row style="height: 33%;line-height: 25px;">
              <el-col :span="12">&nbsp</el-col>
              <el-col :span="12">子控制器状态</el-col>
            </el-row>
          </div>
        </div>
      </el-row>
      <el-row v-if="operation==='home'" style="margin-top: 20px">
        <el-button style="margin-right: 13px;" @click="clickEvent('control')">控制</el-button>
        <el-button style="margin-right: 13px;" @click="clickEvent('sign')">标记</el-button>
        <el-button style="margin-right: 13px;" @click="clickEvent('detail')">详情</el-button>
        <el-button style="margin-right: 13px;">锁闭详情</el-button>
        <el-button style="margin-right: 12px;">指派趋势</el-button>
        <el-button @click="doClose">取消</el-button>
      </el-row>
      <el-row v-if="operation==='control'" style="margin-top: 20px; text-align: center;">
        <el-button style="margin-right: 13px;" @click="clickEvent('home')">取消</el-button>
        <el-button @click="clickEvent('home')">执行</el-button>
      </el-row>
      <el-row v-if="operation==='sign'" style="margin-top: 20px; text-align: center;">
        <el-button style="margin-right: 13px;">人工状态</el-button>
        <el-button style="margin-right: 13px;">报警停用</el-button>
        <el-button style="margin-right: 13px;">故障设备</el-button>
        <el-button style="margin-right: 13px;">挂牌检修</el-button>
        <el-button @click="clickEvent('home')">取消</el-button>
      </el-row>
      <el-row v-if="operation==='detail'" style="margin-top: 20px; text-align: center;">
        <el-button @click="clickEvent('home')">确定</el-button>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>

export default {
    name: 'GraphicEle',
    data() {
        return {
            dialogShow: false,
            loading: false,
            deviceType: '',
            stationName: '',
            modeName: '',
            status: '',
            operation: 'home',
            deviceMap: {
                ManualAlarmButton:'手动报警按钮',
                SmokeDetector: '消火栓按钮',
                FireHydranAlarmButton: '点型火灾探测器',
                GasFireControl:'气体灭火控制器'
            },
            modeMap: {
                standFAS: '火灾报警',
                stationHallFAS: '火灾报警',
                systemFAS: '火灾报警',
                bigSystem: '机电',
                smallSystem: '机电',
                waterSystem: '机电',
                lighting: '机电',
                electricEscalator: '机电',
                waterSupply: '机电',
                controlBAS: '机电',
                tunnelVentilation: '机电',
                schedules: '机电',
                controlPermissionBAS: '机电',
                sensor: '机电',
                stationNetwork: '机电',
                mainScreenPA: '广播',
                radioListeningPA: '广播',
                timePreviewPA: '广播',
                MainScreen: '乘客信息',
                LCDcontrol: '乘客信息',
                TimePreview: '乘客信息',
                StationNetwork: '乘客信息',
                EmergencyRelease: '乘客信息',
                controlCCTV: '闭路电视',
                timeCCTV: '闭路电视',
                timeEditCCTV: '闭路电视',
                statusCCTV: '闭路电视',
                centerStatusCCTV: '闭路电视',
                PSD: '屏蔽门',
                AFC: '售检票',
                stationHallACS: '门禁',
                standACS: '门禁',
                doorFG: '防淹门'
            }
        };
    },
    computed: {

    },
    mounted() {
    },
    methods: {
        doShow(device) {
            this.deviceType = this.deviceMap[device._type];
            this.modeName = this.modeMap[this.$route.params.mode];
            this.stationName = this.$route.query.stationName;
            this.dialogShow = true;
        },
        doClose() {
            this.loading = false;
            this.dialogShow = false;
        },
        clickEvent(type) {
        	this.operation = type;
        }
    }
};
</script>
<style>
    .iscs_device_control_dialog .el-dialog .el-dialog__header {
		width: 100%;
		height: 30px;
		background-image: linear-gradient(#F0DBCE,#ECB85E, #F0DBCE);
    }
	.iscs_device_control_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;
	}
	.iscs_device_control_dialog .el-dialog .el-dialog__body {
		padding: 30px 20px;
		color: #606266;
		font-size: 14px;
		word-break: break-all;
		background: #CDC6C0;
	}
	.iscs_device_control_dialog .el-dialog .el-button {
		display: inline-block;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		background: #CACACA;
		border-top: 1px solid #3D3B39;
		border-left: 1px solid #3D3B39;
		border-bottom: 1px solid #847B77;
		border-right: 1px solid #847B77;
		color: #000;
		-webkit-appearance: none;
		text-align: center;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		outline: 0;
		margin: 0;
		-webkit-transition: .1s;
		transition: .1s;
		padding: 0;
		font-weight: 500;
		font-size: 12px;
		height: 30px;
		width: 70px;
		border-radius: 0;
		position: relative;
	}
	.iscs_device_control_dialog .el-dialog .el-button :before {
		content: '';
		width: 70px;
		height: 30px;
		border-top: 1px solid #FFF;
		border-left: 1px solid #FFF;
		position: absolute;
		top: -2px;
		left: -2px;
	}
	.iscs_device_control_dialog .el-dialog .el-button:hover {
		background-image: linear-gradient(#E2E4E5,#D5D6D8,#E2E4E5);
	}
</style>