rt-sim-training-client/src/views/system/deviceManage/editConfigScreen.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: 'code', 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>