112 lines
4.2 KiB
Vue
112 lines
4.2 KiB
Vue
<template>
|
|
<el-dialog
|
|
title="提示"
|
|
:visible.sync="centerDialogVisible"
|
|
width="350px"
|
|
center
|
|
>
|
|
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
|
|
<el-form-item label="画面名称：" prop="name">
|
|
<el-input v-model="ruleForm.name" />
|
|
</el-form-item>
|
|
<el-form-item label="画面类型：" prop="type">
|
|
<el-select v-model="ruleForm.type" placeholder="请选择画面类型">
|
|
<el-option label="站间透明" value="lucency" />
|
|
<el-option label="连锁车站" value="chainStation" />
|
|
<el-option label="大屏显示" value="bigScreen" />
|
|
<el-option label="区域批量操作" value="regionBatchOperation" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item v-if="ruleForm.type !== 'bigScreen'" label="所属车站：" prop="stationCode">
|
|
<el-select v-model="ruleForm.stationCode" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in stationList"
|
|
:key="item.code"
|
|
:label="item.name"
|
|
:value="item.code"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="显示风格：" prop="lineCode">
|
|
<el-select v-model="ruleForm.lineCode" placeholder="请选择">
|
|
<el-option v-for="item in skinCodeList" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="submitForm('ruleForm')">创建</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapGetters} from 'vuex';
|
|
import { saveMap } from '@/api/jmap/mapdraft';
|
|
import { getLineCodeList } from '@/api/management/mapline';
|
|
export default {
|
|
name: 'CreatePicture',
|
|
data() {
|
|
return {
|
|
centerDialogVisible: false,
|
|
skinCodeList: [],
|
|
ruleForm: { name: '', type: '', stationCode: '', lineCode: '' },
|
|
rules: {
|
|
name: [{ required: true, message: '请输入画面名称', trigger: 'blur' }],
|
|
type: [{ required: true, message: '请选择画面类型', trigger: 'change' }],
|
|
stationCode: [{ required: true, message: '请选择车站', trigger: 'change' }],
|
|
lineCode: [{ required: true, message: '请选择线路', trigger: 'change' }]
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters('map', [
|
|
'stationList'
|
|
])
|
|
},
|
|
mounted() {
|
|
this.skinCodeList = [];
|
|
getLineCodeList().then(response => {
|
|
this.skinCodeList = response.data.map(item => {
|
|
const params = {};
|
|
params.label = item.name;
|
|
params.value = item.code;
|
|
return params;
|
|
});
|
|
});
|
|
},
|
|
methods: {
|
|
submitForm() {
|
|
this.$refs.ruleForm.validate((valid) => {
|
|
if (valid) {
|
|
const map = this.$store.state.map.map;
|
|
if (map && map.pictureList && map.pictureList.length) {
|
|
map.pictureList.push({...this.ruleForm, deviceMap: {}, scaling: map.scaling || '1', origin: { x: map.origin ? map.origin.x : 0, y: map.origin ? map.origin.y : 0 }});
|
|
} else {
|
|
map.pictureList = [{...this.ruleForm, deviceMap: {}, scaling: map.scaling || '1', origin: { x: map.origin ? map.origin.x : 0, y: map.origin ? map.origin.y : 0 }}];
|
|
}
|
|
if (map && parseInt(this.$route.params.mapId)) {
|
|
saveMap(Object.assign(map, { mapId: this.$route.params.mapId })).then(() => {
|
|
this.$message.success('创建画面成功！');
|
|
this.doClose();
|
|
}).catch(() => {
|
|
this.$message.error('创建画面失败！');
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
doClose() {
|
|
this.$refs.ruleForm.resetFields();
|
|
this.centerDialogVisible = false;
|
|
},
|
|
doShow() {
|
|
this.centerDialogVisible = true;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|