252 lines
9.6 KiB
Vue
252 lines
9.6 KiB
Vue
<template>
|
|
<div>
|
|
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
|
|
<el-form-item :label="this.$t('ibp.buttonCode')" prop="code">
|
|
<el-input v-model="form.code" :disabled="true">
|
|
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{
|
|
$t("ibp.generateCode")
|
|
}}</el-button>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item :label="this.$t('ibp.buttonColor')" prop="buttonColor">
|
|
<el-select v-model="form.buttonColor" :placeholder="this.$t('ibp.selectTheButtonColor')">
|
|
<el-option
|
|
v-for="item in colors"
|
|
:key="`btn${item}`"
|
|
:label="`${$t(`ibp.${item}`)}${$t('ibp.button')}`"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item :label="this.$t('ibp.buttonLightColor')" prop="buttonLightColor">
|
|
<el-select v-model="form.buttonLightColor">
|
|
<el-option label="默认" value="" />
|
|
<el-option
|
|
v-for="item in colors"
|
|
:key="`light${item}`"
|
|
:label="`${$t(`ibp.${item}`)}`"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item :label="this.$t('ibp.buttonWidth')" prop="buttonWidth">
|
|
<el-input-number v-model="form.buttonWidth" controls-position="right" :min="1" />
|
|
</el-form-item>
|
|
<el-form-item :label="this.$t('ibp.xCoordinate')">
|
|
<el-input-number v-model="form.x" controls-position="right" :min="1" />
|
|
</el-form-item>
|
|
<el-form-item :label="this.$t('ibp.yCoordinate')">
|
|
<el-input-number v-model="form.y" controls-position="right" :min="1" />
|
|
</el-form-item>
|
|
<el-form-item label="操作">
|
|
<el-select v-model="form.mean" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in operateMeanList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item v-if="'AXLE_PRE_RESET' === form.mean" label="关联区段" prop="sectionCode">
|
|
<el-select v-model="form.sectionCode" filterable placeholder="请选择">
|
|
<el-option
|
|
v-for="item in sectionList"
|
|
:key="item.code"
|
|
:label="item.name + '(' + item.code + ')'"
|
|
:value="item.code"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item v-if="needDirectionItem" label="方向">
|
|
<el-select v-model="form.direction" placeholder="请选择">
|
|
<el-option
|
|
v-for="(item, i) in directions"
|
|
:key="i"
|
|
:label="item.name"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
|
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{
|
|
$t("global.delete")
|
|
}}</el-button>
|
|
<el-button v-show="showDeleteButton" @click="initPage">{{ $t("global.cancel") }}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getSectionListByCenStationCode, getSectionListByMapId } from '@/api/jmap/map';
|
|
export default {
|
|
name: 'ButtonDraft',
|
|
components: {},
|
|
data() {
|
|
return {
|
|
isUpdate: false,
|
|
buttonText: this.$t('ibp.createNow'),
|
|
showDeleteButton: false,
|
|
operateMeanList: [
|
|
{ label: '扣车', value: 'KC' },
|
|
{ label: '终止扣车', value: 'ZZKC' },
|
|
{ label: '紧急停车', value: 'JJTC' },
|
|
{ label: '取消紧急停车', value: 'QXJJTC' },
|
|
{ label: '报警切除', value: 'BJQC' },
|
|
{ label: '屏蔽门报警切除', value: 'PSD_BJQC'},
|
|
{ label: '屏蔽门开门', value: 'KM' },
|
|
{ label: '屏蔽门关门', value: 'GM' },
|
|
{ label: '计轴复位', value: 'AXLE_RESET' },
|
|
{ label: '计轴区段复位', value: 'AXLE_PRE_RESET' },
|
|
{ label: '计轴预复位', value: 'PRERESET_Z' },
|
|
{ label: '试灯', value: 'SD' },
|
|
{ label: '首末开门', value: 'PSD_SMKM' },
|
|
{ label: '屏蔽门试灯', value: 'PSD_SD' }
|
|
],
|
|
colors: ['red', 'yellow', 'blue', 'green', 'gray'],
|
|
operateWithoutDirections: ['AXLE_RESET', 'AXLE_PRE_RESET', 'PRERESET_Z', 'SD'],
|
|
form: {
|
|
code: '',
|
|
buttonColor: 'red',
|
|
buttonLightColor: '',
|
|
buttonWidth: 25,
|
|
x: 10,
|
|
y: 10,
|
|
sectionCode: '',
|
|
mean: '',
|
|
direction: null
|
|
},
|
|
rules: {
|
|
code: [{ required: true, message: this.$t('ibp.enterTheButtonCode'), trigger: 'blur' }],
|
|
buttonColor: [{ required: true, message: this.$t('ibp.selectTheButtonColor'), trigger: 'change' }],
|
|
buttonWidth: [{ required: true, message: this.$t('ibp.enterTheButtonWidth'), trigger: 'blur' }],
|
|
sectionCode: [{ required: true, message: '请选择关联区段', trigger: 'blur' }]
|
|
},
|
|
sectionList: [],
|
|
directions: [{ name: '全部', value: null }, { name: '上行', value: true }, { name: '下行', value: false }]
|
|
};
|
|
},
|
|
computed: {
|
|
needDirectionItem() {
|
|
return !this.operateWithoutDirections.includes(this.form.mean);
|
|
}
|
|
},
|
|
watch: {
|
|
'$store.state.ibp.rightClickCount': function(val) {
|
|
const model = this.$store.getters['ibp/updateDeviceData'];
|
|
if (model._type === 'SquareButton') {
|
|
this.buttonText = this.$t('global.modify');
|
|
this.showDeleteButton = true;
|
|
this.isUpdate = true;
|
|
this.form.code = model.code;
|
|
this.form.buttonColor = model.color;
|
|
this.form.buttonLightColor = model.lightColor;
|
|
this.form.buttonWidth = model.width;
|
|
this.form.x = model.point.x;
|
|
this.form.y = model.point.y;
|
|
this.form.mean = model.mean;
|
|
this.form.sectionCode = model.sectionCode;
|
|
this.form.direction = model.direction;
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.$route.query.stationCode) {
|
|
getSectionListByCenStationCode(this.$route.query.mapId, this.$route.query.stationCode)
|
|
.then(resp => {
|
|
this.sectionList = resp.data;
|
|
// console.log(resp.data);
|
|
})
|
|
.catch(() => {
|
|
this.$message.error('获取区段列表失败！');
|
|
});
|
|
} else {
|
|
getSectionListByMapId(this.$route.query.mapId)
|
|
.then(resp => {
|
|
this.sectionList = resp.data;
|
|
console.log(resp.data);
|
|
})
|
|
.catch(() => {
|
|
this.$message.error('获取区段列表失败！');
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
onSubmit(form) {
|
|
this.$refs[form].validate(valid => {
|
|
if (valid) {
|
|
const buttonModel = {
|
|
point: {
|
|
x: this.form.x,
|
|
y: this.form.y
|
|
},
|
|
_type: 'SquareButton',
|
|
code: this.form.code,
|
|
color: this.form.buttonColor,
|
|
lightColor: this.form.buttonLightColor,
|
|
status: 'off',
|
|
width: this.form.buttonWidth,
|
|
mean: this.form.mean,
|
|
sectionCode: this.form.sectionCode,
|
|
direction: this.form.direction
|
|
};
|
|
this.$emit('createData', buttonModel);
|
|
this.initPage();
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
deleteDevice() {
|
|
const buttonModel = {
|
|
point: {
|
|
x: this.form.x,
|
|
y: this.form.y
|
|
},
|
|
_type: 'SquareButton',
|
|
code: this.form.code,
|
|
color: this.form.buttonColor,
|
|
lightColor: this.form.buttonLightColor,
|
|
status: 'off',
|
|
width: this.form.buttonWidth,
|
|
mean: this.form.mean,
|
|
sectionCode: this.form.sectionCode,
|
|
direction: this.form.direction
|
|
};
|
|
this.$emit('deleteDataModel', buttonModel);
|
|
this.initPage();
|
|
},
|
|
initPage() {
|
|
this.isUpdate = false;
|
|
this.buttonText = this.$t('ibp.createNow');
|
|
this.showDeleteButton = false;
|
|
this.form = {
|
|
code: '',
|
|
buttonColor: 'red',
|
|
buttonLightColor: '',
|
|
buttonWidth: 25,
|
|
x: 10,
|
|
y: 10,
|
|
mean: '',
|
|
sectionCode: '',
|
|
direction: null
|
|
};
|
|
},
|
|
generateCode() {
|
|
const mydate = new Date();
|
|
this.form.code =
|
|
'sButton_' +
|
|
mydate.getDay() +
|
|
mydate.getHours() +
|
|
mydate.getMinutes() +
|
|
mydate.getSeconds() +
|
|
mydate.getMilliseconds() +
|
|
Math.round(Math.random() * 10000);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss" scoped></style>
|