rt-sim-training-client/src/views/newMap/displayNew/demon/addFault.vue

<template>
  <div class="addRules">
    <div class="addRulesInner">
      <div class="addRulesInnerTitle">新增故障</div>
      <div class="closeAddRulesInner" @click="addRulesClose">
        <span class="el-icon-close closeAddRulesIn" />
      </div>
      <el-form ref="form" :model="faultRule" label-width="100px" style="margin-left:15px;">
        <el-form-item label="触发设备">
          <!-- faultRule.condition.triggerDeviceCode -->
          <el-input v-model="triggerDevice" size="small" disabled class="inputModelClass" />
          <el-button :type="field === 'triggerActive' ? 'danger' : 'primary'" size="small" @click="hover('triggerActive')">{{ $t('map.activate') }}</el-button>
        </el-form-item>
        <el-form-item label="触发状态">
          <!-- <el-input v-model="faultRule.condition.triggerDeviceStatus" size="small" class="inputModelClass" /> -->
          <el-select v-model="faultRule.condition.triggerDeviceStatus" placeholder="请选择" class="inputModelClass">
            <el-option
              v-for="item in triggerStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="目标设备">
          <!-- faultRule.targetDeviceCode -->
          <el-input v-model="targetDevice" disabled size="small" class="inputModelClass" />
          <el-button :type="field === 'targetActive' ? 'danger' : 'primary'" size="small" @click="hover('targetActive')">{{ $t('map.activate') }}</el-button>
        </el-form-item>
        <el-form-item label="故障类型">
          <el-select v-model="faultRule.faultType" placeholder="请选择" class="inputModelClass">
            <el-option
              v-for="item in faultTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!-- <el-input v-model="faultRule.faultType" size="small" class="inputModelClass" /> -->
        </el-form-item>
      </el-form>
      <span class="addRulesFooter">
        <el-button size="medium" type="primary" @click="addRulesCreate">{{ $t('global.confirm') }}</el-button>
        <el-button size="medium" @click="addRulesClose">{{ $t('global.cancel') }}</el-button>
      </span>
    </div>
  </div>
</template>
<script>
import { FaultStatusEnum } from '@/scripts/FaultDicNew';
import { addFailureRule} from '@/api/simulation';
import { deviceFaultType} from '@/scripts/cmdPlugin/Config';
// 添加故障
export default {
    name: 'AddChoose',
    data() {
        return {
            field:'',
            triggerStatusList:[],
            faultTypeList:[],
            faultRule:{
                targetDeviceCode:'',
                targetDeviceType:'',
                lineCode:'',
                faultType:'',
                condition:{
                    triggerDeviceCode:'',
                    triggerDeviceStatus:'',
                    triggerDeviceType :'',
                    type:''
                }
            },
            targetDevice:'',
            triggerDevice:''
            // rules:{
            //     targetDevice:[
            //         { required: true, message:'请选择目标设备', trigger: 'blur' }
            //     ],
            //     triggerDevice:[
            //         { required: true, message:'请选择触发设备', trigger: 'blur' }
            //     ],
            //     faultRule:{
            //         faultType:[
            //             { required: true, message:'请选择故障类型', trigger: 'blur' },
            //             { required: true, message:'请选择故障类型', trigger: 'change' }
            //         ]
            //     }
            // }
        };
    },
    watch: {
        '$store.state.menuOperation.selectedCount':function(em) {
            const device = this.$store.state.menuOperation.selected;
            if (device.code) {
                this.deviceSelect(device);
            }
        }
    },
    mounted() {
        this.faultRule.lineCode = this.$route.query.lineCode;
    },
    methods:{
        deviceSelect(em) {
            if (this.field.toUpperCase() === 'targetActive'.toUpperCase()) {
                if (em._type == 'Station') {
                    em = this.$store.getters['map/getDeviceByCode'](em.zcCode);
                }
                this.faultRule.targetDeviceType = this.covertType(em._type);
                this.faultRule.targetDeviceCode = em.code;
                if (em._type.toUpperCase() === 'Section'.toUpperCase() && em.parentName) {
                    this.targetDevice = em._type + '-' + em.parentName + '-' + em.name;
                } else {
                    this.targetDevice = em._type + '-' + em.name;
                }
                this.field = '';
                this.faultRule.faultType = '';
                this.faultTypeList = deviceFaultType[em._type];
            } else if (this.field.toUpperCase() === 'triggerActive'.toUpperCase()) {
                this.faultRule.condition.triggerDeviceType = this.covertType(em._type);
                this.faultRule.condition.triggerDeviceCode = em.code;
                if (em._type.toUpperCase() === 'Section'.toUpperCase() && em.parentName) {
                    this.triggerDevice = em._type + '-' + em.parentName + '-' + em.name;
                } else {
                    this.triggerDevice = em._type + '-' + em.name;
                }
                this.triggerStatusList = [];
                const faultStatus = FaultStatusEnum[this.faultRule.condition.triggerDeviceType];
                if (faultStatus) {
                    const list = Object.keys(faultStatus);
                    list.forEach(key=>{
                        this.triggerStatusList.push({label:faultStatus[key], value:key});
                    });
                }
                this.field = '';
                this.faultRule.condition.triggerDeviceStatus = '';
            }
        },
        covertType(type) {
            switch (type) {
            case 'Section':return 'SECTION';
            case 'Signal':return 'SIGNAL';
            case 'Switch':return 'SWITCH';
            case 'Station':return 'STATION';
            case 'ZcControl':return 'ZC';
            case 'StationStand':return 'STAND';
            case 'Train':return 'TRAIN';
            }
        },
        hover(field) {
            if (this.field == '') {
                this.field = field;
            } else {
                this.field = '';
            }
        },
        addRulesCreate() {
            if (this.triggerDevice == '') {
                this.$messageBox('请选择触发设备');
                return;
            }
            if (this.faultRule.condition.triggerDeviceStatus == '') {
                this.$messageBox('请选择触发状态');
                return;
            }
            if (this.targetDevice == '') {
                this.$messageBox('请选择目标设备');
                return;
            }
            if (this.faultRule.faultType == '') {
                this.$messageBox('请选择故障类型');
                return;
            }
            addFailureRule(this.faultRule).then(res=>{
                this.$emit('closeAddRules');
                this.$emit('reload');
            }).catch((error)=>{
                this.$messageBox('创建故障失败: ' + error.message);
            });
        },
        addRulesClose() {
            this.resetForm();
            this.$emit('closeAddRules');
        },
        resetForm() {
            this.targetDevice = '';
            this.triggerDevice = '';
            this.faultRule = {
                targetDeviceCode:'',
                targetDeviceType:'',
                lineCode:this.$route.query.lineCode,
                faultType:'',
                condition:{
                    triggerDeviceCode:'',
                    triggerDeviceStatus:'',
                    triggerDeviceType :'',
                    type:''
                }
            };
        }
    }
};
</script>
<style lang="scss" scoped>
    .addRules{
        position: absolute;
        width: 100%;
        left: 0;
        top: 40px;
        height: 410px;
    }
    .addRulesInner{
        position: relative;
        width: 380px;
        height: 345px;
        margin-top:6px;
        background: #fff;
        border-radius: 10px;
        border: 1px #ccc solid;
        margin-left: auto;
        margin-right: auto;
        box-shadow: 3px 3px 3px #a0a0a0;
        z-index:2;
    }
    .queryList{
        height: 300px;
        overflow: auto;
    }
    .inputModelClass{
        width:150px;
    }
    .addRulesInnerTitle{
        padding: 10px;
        font-size: 14px;
    }
    .closeAddRulesInner{
        position: absolute;
        right: 10px;
        top: 9px;
        width: 19px;
        height: 19px;
        cursor: pointer;
    }
    .closeAddRulesIn{
        font-size: 19px;
    }
    .addRulesFooter{
        margin-left: 116px;
        display: inline-block;
    }
</style>