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">
    <el-form ref="form" :model="formData" label-width="100px" :rules="rules">
      <el-form-item label="教员机:" prop="deviceCode">
        <el-select v-model="formData.deviceCode" placeholder="请选择" size="small">
          <el-option
            v-for="item in deviceList"
            :key="item.code"
            :label="item.code"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-show="data.type === 'LSW'" label="屏目配置:" prop="quadrant" size="small">
        <el-select v-model="formData.quadrant" placeholder="请选择" size="small">
          <el-option
            v-for="item in screenList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-show="data.type === 'VR_PSD'" label="关联地图:" prop="mapId">
        <el-select v-model="mapId" placeholder="请选择" size="small" @change="mapIdChange">
          <el-option
            v-for="item in mapList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-show="data.type === 'VR_PSD'" label="关联车站:" prop="stationCode">
        <el-select v-model="stationCode" placeholder="请选择" size="small" @change="stationCodeChange">
          <el-option
            v-for="item in stationList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-show="data.type === 'VR_PSD'" label="关联站台:" prop="standCode">
        <el-select v-model="standCode" placeholder="请选择" size="small" @change="standCodeChange">
          <el-option
            v-for="item in standList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-show="data.type === 'VR_PSD'" label="关联屏蔽门:" prop="psdCode">
        <el-select v-model="formData.psdCode" placeholder="请选择" size="small">
          <el-option
            v-for="item in psdList"
            :key="item.code"
            :label="item.code"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <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 } 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 }
            ],
            deviceList: [],
            formData: {
                quadrant: '',
                deviceCode: '',
                psdCode: ''
            },
            rules: {
                quadrant: [
                    { required: true, message: '请选择显示屏幕', trigger: 'change' }
                ],
                deviceCode: [
                    { required: true, message: '请选择教员机', trigger: 'change'}
                ],
                psdCode: [
                    { required: true, message: '请选择关联屏蔽门', trigger: 'change'}
                ]
            },
            mapId: '',
            mapList: [],
            stationCode: '',
            stationList: [],
            standList: [],
            standCode: '',
            psdList: []
        };
    },
    computed: {
        title() {
            return '编辑设备配置';
        }
    },
    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
                };
            });
            getAllMapOnline().then(resp => {
                if (resp.data && resp.data.length) {
                    this.mapList = resp.data;
                    this.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.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.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.form.validate(() => {
                    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.form.validate(() => {
                    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.form.validate(() => {
                    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);
                    });
                });
            }
        },
        handleClose() {
            this.dialogVisible = false;
            this.data = {};
            this.mapList = [];
            this.stationList = [];
            this.standList = [];
            this.psdList = [];
            this.mapId = '';
            this.stationCode = '';
            this.standCode = '';
            this.deviceList = [];
            this.$refs.form.resetFields();
        }
    }
};
</script>