279 lines
12 KiB
Vue
279 lines
12 KiB
Vue
<template>
|
|
<div style="overflow-y: scroll;height: calc(100% - 46px); width: 100%;">
|
|
<el-form ref="form" :rules="rules" :model="form" label-width="100px" style="width: 100%;padding: 10px 50px;">
|
|
<el-form-item label="图层:" prop="z2">
|
|
<el-input-number v-model="form.z2" controls-position="right" size="small" />
|
|
</el-form-item>
|
|
<el-form-item v-if="isUpdate" label="按钮编号:" prop="code">
|
|
<el-input v-model="form.code" size="small" :disabled="true" />
|
|
</el-form-item>
|
|
<el-form-item label="X轴坐标:" prop="x">
|
|
<el-input-number v-model="form.x" size="small" controls-position="right" :min="1" />
|
|
</el-form-item>
|
|
<el-form-item label="Y轴坐标:" prop="y">
|
|
<el-input-number v-model="form.y" size="small" controls-position="right" :min="1" />
|
|
</el-form-item>
|
|
<el-form-item label="是否透明" prop="isTransparent">
|
|
<el-checkbox v-model="form.isTransparent" size="small" />
|
|
</el-form-item>
|
|
<el-form-item label="按钮文字:" prop="context">
|
|
<el-input v-model="form.context" size="small" />
|
|
</el-form-item>
|
|
<el-form-item label="文字颜色:" prop="textColor">
|
|
<el-color-picker v-model="form.textColor" show-alpha size="small" />
|
|
</el-form-item>
|
|
<el-form-item label="选中文字颜色:" prop="textColorActive">
|
|
<el-color-picker v-model="form.textColorActive" show-alpha size="small" />
|
|
</el-form-item>
|
|
<el-form-item label="背景颜色:" prop="textColor">
|
|
<el-color-picker v-model="form.fillColor" show-alpha size="small" />
|
|
</el-form-item>
|
|
<el-form-item label="选中背景颜色:" prop="textColor">
|
|
<el-color-picker v-model="form.fillColorActive" show-alpha size="small" />
|
|
</el-form-item>
|
|
<el-form-item label="文字大小:" prop="fontSize">
|
|
<el-input-number v-model="form.fontSize" size="small" controls-position="right" :min="1" />
|
|
</el-form-item>
|
|
<el-form-item label="左右内距:" prop="levelPadding">
|
|
<el-input-number v-model="form.levelPadding" size="small" controls-position="right" :min="1" />
|
|
</el-form-item>
|
|
<el-form-item label="上下内距:" prop="verticalPadding">
|
|
<el-input-number v-model="form.verticalPadding" size="small" controls-position="right" :min="1" />
|
|
</el-form-item>
|
|
<el-form-item label="按钮功能:" prop="function">
|
|
<el-select v-model="form.function" size="small">
|
|
<el-option
|
|
v-for="item in functionList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item v-if="form.function=== 'ElementShow'" label="隐藏元素类型:" prop="hideType">
|
|
<el-select v-model="form.hideType" size="small">
|
|
<el-option
|
|
v-for="item in hideTypeList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" size="small" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
|
<el-button v-show="showDeleteButton" size="small" type="danger" @click="deleteDevice">删除</el-button>
|
|
<el-button v-show="showDeleteButton" size="small" @click="initPage">取消</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
import {getUID} from '@/iscs/utils/Uid';
|
|
export default {
|
|
name: 'IscsButton',
|
|
components: {
|
|
},
|
|
data() {
|
|
return {
|
|
isUpdate: false,
|
|
buttonText: '立即创建',
|
|
showDeleteButton: false,
|
|
functionList: [
|
|
{label: '图元说明', value: 'GraphicEle'},
|
|
{label: '公共区域', value: 'PublicArea'},
|
|
{label: '操作按钮', value: 'OperatingButton'},
|
|
{label: '返回', value: 'GoBack'},
|
|
{label: '至EPS系统及导向照明', value: 'GoEPS'},
|
|
{label: '射流风机图', value: 'GoJetFan'},
|
|
{label: '至B端小系统', value: 'GoBMiniSystem'},
|
|
{label: '至A端小系统(一)', value: 'GoAMiniSystem1'},
|
|
{label: '至A端小系统(二)', value: 'GoAMiniSystem2'}
|
|
],
|
|
form: {
|
|
code: '',
|
|
z2: 0,
|
|
levelPadding: 10,
|
|
verticalPadding: 5,
|
|
fontSize: 10,
|
|
x: 10,
|
|
y: 10,
|
|
isTransparent: false,
|
|
context: '',
|
|
function: '',
|
|
textColor: '',
|
|
textColorActive: '#000',
|
|
fillColor: 'rgba(0,0,0,0)',
|
|
fillColorActive: 'rgba(0,0,0,0)',
|
|
hideType: ''
|
|
},
|
|
hideTypeList: [
|
|
{ label: '温感器', value: 'alarmLamp' },
|
|
{ label: '烟感器', value: 'smokeDetector' },
|
|
{ label: '防火阀', value: 'fireDamper' },
|
|
{ label: '报警按钮', value: 'alarmButton' }
|
|
// { label: '消火栓按钮', value: 'zanwu' },
|
|
// { label: '标签', value: '' }
|
|
],
|
|
rules: {
|
|
context: [
|
|
{ required: true, message: '请填写按钮文字', trigger: 'blur' }
|
|
],
|
|
function: [
|
|
{ required: true, message: '请选择按钮功能', trigger: 'change'}
|
|
],
|
|
hideType: [
|
|
{ required: true, message: '请选择显隐元素类型', trigger: 'change' }
|
|
]
|
|
}
|
|
};
|
|
},
|
|
computed:{
|
|
...mapGetters('iscs', [
|
|
'iscs'
|
|
])
|
|
},
|
|
watch:{
|
|
'$store.state.iscs.rightClickCount': function (val) {
|
|
const model = this.$store.getters['iscs/updateDeviceData'];
|
|
if (model._type === 'IscsButton' ) {
|
|
this.buttonText = '修改';
|
|
this.showDeleteButton = true;
|
|
this.isUpdate = true;
|
|
this.form.code = model.code;
|
|
this.form.z2 = model.z2;
|
|
this.form.levelPadding = model.levelPadding;
|
|
this.form.verticalPadding = model.verticalPadding;
|
|
this.form.isTransparent = model.isTransparent;
|
|
this.form.x = model.point.x;
|
|
this.form.y = model.point.y;
|
|
this.form.context = model.context;
|
|
this.form.function = model.function;
|
|
this.form.fontSize = model.fontSize;
|
|
this.form.textColor = model.textColor || '#fff';
|
|
this.form.textColorActive = model.textColorActive || '#000';
|
|
this.form.fillColor = model.fillColor;
|
|
this.form.fillColorActive = model.fillColorActive;
|
|
this.form.hideType = model.hideType;
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.$route.query.lineCode == '02') {
|
|
this.functionList = [
|
|
{label: '操作按钮', value: 'OperatingButton'},
|
|
{label: '门禁站台层', value: 'goToStand'},
|
|
{label: '门禁站厅层', value: 'goToStation'},
|
|
{label: '火灾报警系统-站厅层A端', value: 'goFireStation-Two'},
|
|
{label: '火灾报警系统-站厅层B端', value: 'goFireStation-Three'},
|
|
{label: '火灾报警系统-站厅层C端', value: 'goFireStation-Four'},
|
|
{label: '火灾报警系统-站厅层D端', value: 'goFireStation-Five'},
|
|
{label: '火灾报警系统-站厅层E端', value: 'goFireStation-Six'},
|
|
{label: '火灾报警系统-站厅层F端', value: 'goFireStation-Seven'},
|
|
{label: '火灾报警系统-站台层A端', value: 'goFireStand-Two'},
|
|
{label: '火灾报警系统-站台层B端', value: 'goFireStand-Three'},
|
|
{label: '火灾报警系统-站台层公共区段', value: 'goFireStand-Four'},
|
|
{label: '元素显隐', value: 'ElementShow'},
|
|
{label: '返回', value: 'GoBack'}
|
|
];
|
|
} else if (this.$route.query.lineCode == '07') {
|
|
this.functionList = [
|
|
{label: '图元说明', value: 'GraphicEle'},
|
|
{label: '公共区域', value: 'PublicArea'},
|
|
{label: '操作按钮', value: 'OperatingButton'},
|
|
{label: '返回', value: 'GoBack'},
|
|
{label: '至EPS系统及导向照明', value: 'GoEPS'},
|
|
{label: '射流风机图', value: 'GoJetFan'},
|
|
{label: '至B端小系统', value: 'GoBMiniSystem'},
|
|
{label: '至A端小系统(一)', value: 'GoAMiniSystem1'},
|
|
{label: '至A端小系统(二)', value: 'GoAMiniSystem2'}
|
|
];
|
|
}
|
|
},
|
|
methods: {
|
|
onSubmit(form) {
|
|
this.$refs[form].validate((valid) => {
|
|
if (valid) {
|
|
const rectModel = {
|
|
point: {
|
|
x: this.form.x,
|
|
y: this.form.y
|
|
},
|
|
code: this.isUpdate ? this.form.code : getUID('IscsButton', this.iscs.iscsButtonList),
|
|
_type: 'IscsButton',
|
|
z2: this.form.z2,
|
|
levelPadding: this.form.levelPadding,
|
|
verticalPadding: this.form.verticalPadding,
|
|
isTransparent: this.form.isTransparent,
|
|
context: this.form.context,
|
|
function: this.form.function,
|
|
fontSize: this.form.fontSize,
|
|
textColor: this.form.textColor,
|
|
textColorActive: this.form.textColorActive,
|
|
fillColor: this.form.fillColor,
|
|
fillColorActive: this.form.fillColorActive,
|
|
hideType: this.form.hideType
|
|
};
|
|
this.$emit('createDataModel', rectModel);
|
|
this.initPage();
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
deleteDevice() {
|
|
const rectModel = {
|
|
point: {
|
|
x: this.form.x,
|
|
y: this.form.y
|
|
},
|
|
code: this.form.code,
|
|
_type: 'IscsButton',
|
|
levelPadding: this.form.levelPadding,
|
|
verticalPadding: this.form.verticalPadding,
|
|
isTransparent: this.form.isTransparent,
|
|
context: this.form.context,
|
|
function: this.form.function,
|
|
fontSize: this.form.fontSize,
|
|
fillColor: this.form.fillColor,
|
|
fillColorActive: this.form.fillColorActive,
|
|
hideType: this.form.hideType
|
|
};
|
|
this.$emit('deleteDataModel', rectModel);
|
|
},
|
|
initPage() {
|
|
this.isUpdate = false;
|
|
this.buttonText = '立即创建';
|
|
this.showDeleteButton = false;
|
|
this.form = {
|
|
code: '',
|
|
z2: '',
|
|
levelPadding: 10,
|
|
verticalPadding: 2,
|
|
fontSize: 10,
|
|
x: 10,
|
|
y: 10,
|
|
context: '',
|
|
function: '',
|
|
textColor: '',
|
|
isTransparent: false,
|
|
textColorActive: '#000',
|
|
fillColor: '',
|
|
fillColorActive: '',
|
|
hideType: ''
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
@import "src/styles/mixin.scss";
|
|
.button_box{
|
|
width: 100%;
|
|
background: #f0f0f0;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|