rt-sim-training-client/src/views/newMap/displayNew/demon/addFault.vue
2020-10-12 14:25:33 +08:00

285 lines
10 KiB
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>