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.targetDeviceCode -->
          <el-input v-model="targetDevice.name" 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="triggerMode" @change="changeTriggerMode">
            <el-option
              v-for="item in triggerModeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </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-form-item>
        <el-form-item v-if="triggerMode === 'DEVICE'" 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 v-if="triggerMode === 'DEVICE'" 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 v-if="triggerMode === 'DEVICE'" label="关联设备">
          <el-input v-model="triggerAssociatedDevice" size="small" disabled class="inputModelClass" />
          <el-button :type="field === 'triggerAssociated'? 'danger': 'primary'" size="small" @click="hover('triggerAssociated')">{{ $t('map.activate') }}</el-button>
        </el-form-item>
        <el-form-item v-if="triggerMode === 'TIME'" label="触发时间">
          <el-date-picker
            v-model="faultRule.condition.triggeringTime"
            type="datetime"
            placeholder="选择日期时间"
          />
        </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 { setFailureModeNew} from '@/api/simulation';
import { deviceFaultType} from '@/scripts/cmdPlugin/Config';
// 添加故障
export default {
    name: 'AddChoose',
    props: {
        targetDevice: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            field:'',
            triggerStatusList:[],
            faultTypeList:[],
            faultRule:{
                targetDeviceCode:'',
                targetDeviceType:'',
                faultType:'',
                condition:{
                    triggerDeviceCode:'',
                    triggerDeviceStatus:'',
                    triggerDeviceType :'',
                    type:'DEVICE',
                    triggeringTime: '',
                    triggerAssociatedDeviceCode: ''
                }
            },
            // targetDevice:'',
            triggerDevice:'',
            triggerAssociatedDevice: '',
            triggerMode: 'DEVICE',
            triggerModeList: [
                {label: '设备触发', value: 'DEVICE'},
                {label: '时间触发', value: 'TIME'}
            ]
            // 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() {
    },
    methods:{
        deviceSelect(em) {
            if (this.field.toUpperCase() === 'triggerAssociated'.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.triggerAssociatedDevice = em._type + '-' + em.parentName + '-' + em.name;
                } else {
                    this.triggerAssociatedDevice = em._type + '-' + em.name;
                }
                this.faultRule.condition.triggerAssociatedDeviceCode = em.code;
            } 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 if (em._type.toUpperCase() === 'Train'.toUpperCase()) {
                    this.triggerDevice = em._type + '-' + em.code;
                } 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.faultRule.faultType == '') {
                this.$messageBox('请选择故障类型');
                return;
            }
            console.log(this.faultRule, '-------------');
            setFailureModeNew(this.faultRule, this.$route.query.group).then(res=>{
                this.$emit('closeAddRules');
                this.$emit('reload');
            }).catch((error)=>{
                this.$messageBox('创建故障失败: ' + error.message);
            });
        },
        addRulesClose() {
            this.resetForm();
            this.$emit('closeAddRules');
        },

        initValue() {
            this.faultTypeList = deviceFaultType[this.targetDevice._type];
            this.faultRule.targetDeviceCode = this.targetDevice.code;
            this.faultRule.targetDeviceType = this.covertType(this.targetDevice._type);
        },
        resetForm() {
            this.triggerDevice = '';
            this.faultRule = {
                targetDeviceCode:'',
                targetDeviceType:'',
                faultType:'',
                condition:{
                    triggerDeviceCode:'',
                    triggerDeviceStatus:'',
                    triggerDeviceType :'',
                    type:'DEVICE',
                    triggeringTime: '',
                    triggerAssociatedDeviceCode: ''
                }
            };
        }
    }
};
</script>
<style lang="scss" scoped>
    .addRules{
        position: absolute;
        width: 100%;
        left: 0;
        top: 40px;
    }
    .addRulesInner{
        position: relative;
        width: 380px;
        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;
		margin-bottom: 20px;
    }
</style>