273 lines
12 KiB
Vue
273 lines
12 KiB
Vue
<template>
|
|
<el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" width="500px" :before-close="handleClose" center :close-on-click-modal="false">
|
|
<data-form ref="dataForm" :form="formItem" :form-model="formData" :rules="rules" />
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="doSave">{{ $t('global.confirm') }}</el-button>
|
|
<el-button @click="handleClose">{{ $t('global.cancel') }}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { getDevicesByType, getDeviceDetail, setLswConfig, setCctvConfig, setVrPsdConfig, setPlcConfig, setSandboxConfig } from '@/api/project';
|
|
import { getAllMapOnline, getStationListNeedAttendant, getPsdListByStandCode, getStandListByStationCode } from '@/api/jmap/map';
|
|
|
|
export default {
|
|
name: 'EditConfigScreen',
|
|
data() {
|
|
return {
|
|
dialogVisible: false,
|
|
data: {},
|
|
screenList: [
|
|
{ label: '第一屏', value: 1 },
|
|
{ label: '第二屏', value: 2 },
|
|
{ label: '第三屏', value: 3 },
|
|
{ label: '第四屏', value: 4 },
|
|
{ label: '第五屏', value: 5 },
|
|
{ label: '第六屏', value: 6 },
|
|
{ label: '全部', value: 99 }
|
|
],
|
|
deviceList: [],
|
|
formData: {
|
|
addr: '',
|
|
quantity: '',
|
|
quadrant: '',
|
|
deviceCode: '',
|
|
psdCode: '',
|
|
mapId: '',
|
|
stationCode: '',
|
|
standCode: ''
|
|
},
|
|
rules: {
|
|
addr: [
|
|
{ required: true, message: '请填写读取开始位地址', trigger: 'blur'}
|
|
],
|
|
quantity: [
|
|
{ required: true, message: '请填写数量', trigger: 'blur'}
|
|
],
|
|
quadrant: [
|
|
{ required: true, message: '请选择显示屏幕', trigger: 'change' }
|
|
],
|
|
deviceCode: [
|
|
{ required: true, message: '请选择教员机', trigger: 'change'}
|
|
],
|
|
psdCode: [
|
|
{ required: true, message: '请选择关联屏蔽门', trigger: 'change'}
|
|
]
|
|
},
|
|
mapList: [],
|
|
stationList: [],
|
|
standList: [],
|
|
psdList: []
|
|
};
|
|
},
|
|
computed: {
|
|
title() {
|
|
return '编辑设备配置';
|
|
},
|
|
formItem() {
|
|
let form = {labelWidth: '150px', item: []};
|
|
if (this.data.type === 'PLC_GATEWAY') {
|
|
form = {
|
|
labelWidth: '150px',
|
|
items: [
|
|
{ prop:'addr', label: '读取开始位地址:', type: 'number', min: 0, max: 20000, step: 1, precisionFlag: true, precision: 0, noControls: true},
|
|
{ prop: 'quantity', label: '位数量:', type: 'number', min: 0, max: 20000, step: 1, precisionFlag: true, precision: 0, noControls: true }
|
|
]
|
|
};
|
|
} else if (this.data.type === 'VR_PSD') {
|
|
form = {
|
|
labelWidth: '150px',
|
|
items: [
|
|
{ prop: 'deviceCode', label: '教研机:', type: 'select', options: this.deviceList, optionLabel: 'code', optionValue: 'code' },
|
|
{ prop: 'mapId', label: '关联地图:', type: 'select', options: this.mapList, optionLabel: 'name', optionValue: 'id', deviceChange: this.mapIdChange},
|
|
{ prop: 'stationCode', label: '关联车站:', type: 'select', options: this.stationList, optionLabel: 'name', optionValue: 'code', deviceChange: this.stationCodeChange},
|
|
{ prop: 'standCode', label: '关联站台:', type: 'select', options: this.standList, optionLabel: 'name', optionValue: 'code', deviceChange: this.standCodeChange},
|
|
{ prop: 'psdCode', label: '关联屏蔽门:', type: 'select', options: this.psdList, optionLabel: 'name', optionValue: 'code' }
|
|
]
|
|
};
|
|
} else if (this.data.type === 'LSW') {
|
|
form = {
|
|
labelWidth: '150px',
|
|
items: [
|
|
{ prop: 'deviceCode', label: '教研机:', type: 'select', options: this.deviceList, optionLabel: 'code', optionValue: 'code' },
|
|
{ prop: 'quadrant', label: '屏幕配置:', type: 'select', options: this.screenList, optionLabel: 'label', optionValue: 'value'}
|
|
]
|
|
};
|
|
} else if (this.data.type === 'CCTV') {
|
|
form = {
|
|
labelWidth: '150px',
|
|
items: [
|
|
{ prop: 'deviceCode', label: '教研机:', type: 'select', options: this.deviceList, optionLabel: 'code', optionValue: 'code' }
|
|
]
|
|
};
|
|
} else if ( this.data.type === 'SANDBOX') {
|
|
form = {
|
|
labelWidth: '150px',
|
|
items: [
|
|
{ prop: 'deviceCode', label: '教研机', type: 'select', options: this.deviceList, optionLabel: 'code', optionValue: 'code'}
|
|
]
|
|
};
|
|
}
|
|
return form;
|
|
}
|
|
},
|
|
methods: {
|
|
initData(row) {
|
|
getDevicesByType('IM').then(resp => {
|
|
this.deviceList = resp.data;
|
|
}).catch(()=> {
|
|
this.$message.error('获取项目设备详情失败！');
|
|
});
|
|
},
|
|
doShow(row) {
|
|
this.initData(row);
|
|
this.dialogVisible = true;
|
|
this.data = row;
|
|
getDeviceDetail(this.data.id).then(res => {
|
|
const data = res.data.config ? JSON.parse(res.data.config) : {};
|
|
this.formData = {
|
|
quadrant: data.quadrant,
|
|
deviceCode: data.deviceCode,
|
|
psdCode: data.psdCode,
|
|
addr: data.addr,
|
|
quantity: data.quantity
|
|
};
|
|
});
|
|
if (row.type === 'VR_PSD') {
|
|
getAllMapOnline().then(resp => {
|
|
if (resp.data && resp.data.length) {
|
|
this.mapList = resp.data;
|
|
this.formData.mapId = this.mapList[0].id;
|
|
this.mapIdChange(this.mapList[0].id);
|
|
}
|
|
}).catch(() => {
|
|
this.$message.error('获取地图列表失败');
|
|
});
|
|
}
|
|
},
|
|
mapIdChange(mapId) {
|
|
this.stationList = [];
|
|
if (mapId) {
|
|
getStationListNeedAttendant(mapId).then(resp => {
|
|
if (resp.data && resp.data.length) {
|
|
this.stationList = resp.data;
|
|
}
|
|
}).catch(() => {
|
|
this.$message.error('获取车站列表失败');
|
|
});
|
|
}
|
|
},
|
|
stationCodeChange(stationCode) {
|
|
this.standList = [];
|
|
if (stationCode) {
|
|
getStandListByStationCode(this.formData.mapId, stationCode).then(resp => {
|
|
if (resp.data && resp.data.length) {
|
|
this.standList = resp.data;
|
|
}
|
|
}).catch(() => {
|
|
this.$message.error('获取站台列表失败');
|
|
});
|
|
}
|
|
},
|
|
standCodeChange(standCode) {
|
|
this.psdList = [];
|
|
if (standCode) {
|
|
getPsdListByStandCode(this.formData.mapId, standCode).then(resp => {
|
|
if (resp.data && resp.data.length) {
|
|
this.psdList = resp.data;
|
|
}
|
|
}).catch(() => {
|
|
this.$message.error('获取屏蔽门列表失败');
|
|
});
|
|
}
|
|
},
|
|
doSave() {
|
|
const self = this;
|
|
if (this.data.type == 'LSW') {
|
|
this.$refs.dataForm.validateForm(() => {
|
|
const param = {
|
|
deviceCode: this.formData.deviceCode,
|
|
quadrant: this.formData.quadrant
|
|
};
|
|
setLswConfig(this.data.id, param).then(() => {
|
|
self.$message.success('设置大屏工作站配置成功');
|
|
self.handleClose();
|
|
self.$emit('reloadTable');
|
|
}).catch(error => {
|
|
self.$message.error(this.$t('tip.modifyTheFailure') + error.message);
|
|
});
|
|
});
|
|
} else if (this.data.type == 'CCTV') {
|
|
this.$refs.dataForm.validateForm(() => {
|
|
const param = {
|
|
deviceCode: this.formData.deviceCode
|
|
};
|
|
setCctvConfig(this.data.id, param).then(() => {
|
|
self.$message.success('设置CCTV工作站配置成功');
|
|
self.handleClose();
|
|
self.$emit('reloadTable');
|
|
}).catch(error => {
|
|
self.$message.error(this.$t('tip.modifyTheFailure') + error.message);
|
|
});
|
|
});
|
|
} else if (this.data.type == 'VR_PSD') {
|
|
this.$refs.dataForm.validateForm(() => {
|
|
const param = {
|
|
deviceCode: this.formData.deviceCode,
|
|
psdCode: this.formData.psdCode
|
|
};
|
|
setVrPsdConfig(this.data.id, param).then(() => {
|
|
self.$message.success('设置虚拟屏蔽门工作站配置成功');
|
|
self.handleClose();
|
|
self.$emit('reloadTable');
|
|
}).catch(error => {
|
|
self.$message.error(this.$t('tip.modifyTheFailure') + error.message);
|
|
});
|
|
});
|
|
} else if (this.data.type == 'PLC_GATEWAY') {
|
|
this.$refs.dataForm.validateForm(() => {
|
|
const param = {
|
|
addr: this.formData.addr,
|
|
quantity: this.formData.quantity
|
|
};
|
|
setPlcConfig(this.data.id, param).then(() => {
|
|
self.$message.success('设置PLC配置成功');
|
|
self.handleClose();
|
|
self.$emit('reloadTable');
|
|
}).catch(error => {
|
|
self.$message.error(this.$t('tip.modifyTheFailure') + error.message);
|
|
});
|
|
});
|
|
} else if (this.data.type === 'SANDBOX') {
|
|
this.$refs.dataForm.validateForm(() => {
|
|
const param = {
|
|
deviceCode: this.formData.deviceCode
|
|
};
|
|
setSandboxConfig(this.data.id, param).then(() => {
|
|
self.$message.success('设置电子沙盘配置成员');
|
|
self.handleClose();
|
|
self.$emit('reloadTable');
|
|
}).catch(error => {
|
|
self.$message.error(this.$t('tip.modifyTheFailure') + error.message);
|
|
});
|
|
});
|
|
}
|
|
},
|
|
handleClose() {
|
|
this.dialogVisible = false;
|
|
this.data = {};
|
|
this.mapList = [];
|
|
this.stationList = [];
|
|
this.standList = [];
|
|
this.psdList = [];
|
|
this.mapId = '';
|
|
this.stationCode = '';
|
|
this.standCode = '';
|
|
this.deviceList = [];
|
|
this.$refs.dataForm.resetForm();
|
|
}
|
|
}
|
|
};
|
|
</script>
|