This commit is contained in:
joylink_cuiweidong 2020-05-07 11:21:16 +08:00
commit 260bc0a69e
10 changed files with 332 additions and 90 deletions

View File

@ -219,6 +219,13 @@ deviceRender[deviceType.ArcStatus] = {
_type: deviceType.ArcStatus,
zlevel: 1,
z: 4
}
};
/** 按钮 */
deviceRender[deviceType.IscsButton] = {
_type: deviceType.IscsButton,
zlevel: 1,
z: 4
};
export default deviceRender;

View File

@ -33,7 +33,8 @@ const deviceType = {
FasBrakeMachine:'FasBrakeMachine',
Staircase:'Staircase',
SingleStaircase: 'SingleStaircase',
ArcStatus: 'ArcStatus'
ArcStatus: 'ArcStatus',
IscsButton: 'IscsButton'
};
export default deviceType;

61
src/iscs/shape/button.js Normal file
View File

@ -0,0 +1,61 @@
import Group from 'zrender/src/container/Group';
import Rect from 'zrender/src/graphic/shape/Rect';
import Text from 'zrender/src/graphic/Text';
export default class Button extends Group {
constructor(device) {
super();
this.model = device.model;
this._type = device.model._type;
this._code = device.model.code;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.create();
}
create() {
const model = this.model;
this.grouper = new Group({
id: model.code,
position: [model.point.x, model.point.y]
});
this.buttonRect = new Rect({
zlevel: model.zlevel,
z: model.z,
shape: {
x: 0,
y: 0,
width: model.width,
height: model.height
},
style: {
fill: model.fillColor,
stroke: model.strokeColor,
lineWidth: model.borderWidth
}
});
this.buttonText = new Text({
zlevel: model.zlevel,
z: model.z,
style: {
x: model.width / 2,
y: model.height / 2,
fontWeight: 'normal',
fontSize: model.height - 2,
fontFamily: 'consolas',
text: model.context,
textFill: model.textFill,
textAlign: 'center',
textPosition: 'inside',
textVerticalAlign: 'middle',
textLineHeight: model.height
}
});
this.grouper.add(this.buttonRect);
this.grouper.add(this.buttonText);
this.add(this.grouper);
}
setModel(dx, dy) {
this.model.point.x += dx;
this.model.point.y += dy;
}
}

View File

@ -148,6 +148,9 @@ export function parser(data) {
zrUtil.each(data.singleStaircaseList || [], elem=> {
iscsDevice[elem.code] = deviceFactory(deviceType.SingleStaircase, elem);
});
zrUtil.each(data.iscsButtonList || [], elem=> {
iscsDevice[elem.code] = deviceFactory(deviceType.IscsButton, elem);
});
}
return iscsDevice;
@ -275,6 +278,9 @@ export function updateIscsData(state, device) {
case deviceType.ArcStatus:
updateIscsListByDevice(state, 'arcStatusList', device);
break;
case deviceType.IscsButton:
updateIscsListByDevice(state, 'iscsButtonList', device);
break;
}
// store.dispatch('iscs/setIscsData', state.iscs);
}

View File

@ -217,7 +217,7 @@ export default {
this.examDetails.examDefinitionRulesVOList[index].name = v.name;
if (res.operateType) {
this.trainingOperateTypeMap[res.trainingType].forEach(item => {
if (item.code == res.operateType) {
if ((item.code || item.value) === res.operateType) {
this.examDetails.examDefinitionRulesVOList[index].name = `${this.examDetails.examDefinitionRulesVOList[index].name}-${item.name || item.label}`;
return;
}

View File

@ -85,13 +85,13 @@ export default {
type: 'system',
children: [
{
name: '站报警',
name: '站报警',
mode: 'fas',
id: '11',
type: 'interface'
},
{
name: '站报警',
name: '站报警',
mode: 'fas',
id: '12',
type: 'interface'

View File

@ -0,0 +1,167 @@
<template>
<div>
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
<el-form-item v-if="isUpdate" label="按钮编号" prop="code">
<el-input v-model="from.code" :disabled="true" />
</el-form-item>
<el-form-item label="宽度" prop="width">
<el-input-number v-model="form.width" controls-position="right" :min="1" />
</el-form-item>
<el-form-item label="高度" prop="height">
<el-input-number v-model="form.height" controls-position="right" :min="1" />
</el-form-item>
<el-form-item label="X轴坐标" prop="x">
<el-input-number v-model="form.x" controls-position="right" :min="1" />
</el-form-item>
<el-form-item label="Y轴坐标" prop="y">
<el-input-number v-model="form.y" controls-position="right" :min="1" />
</el-form-item>
<el-form-item label="按钮文字" prop="context">
<el-input v-model="form.context" />
</el-form-item>
<el-form-item label="按钮功能" prop="function">
<el-select v-model="form.function">
<el-option
v-for="item in functionList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">删除</el-button>
<el-button v-show="showDeleteButton" @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: 'Text',
components: {
},
data() {
return {
isUpdate: false,
buttonText: '立即创建',
showDeleteButton: false,
functionList: [
{label: '图元说明', value: 'GraphicEle'},
{label: '公共区', value: 'PublicArea'},
{label: '返回', value: 'GoBack'}
],
form: {
code: '',
fillColor: '',
borderWidth: '',
strokeColor: '',
width: 1,
height: 1,
x: 10,
y: 10
},
rules: {
strokeColor: [
{ required: true, message: '请选择边框颜色', trigger: 'change' }
],
fillColor: [
{ 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.fillColor = model.fillColor;
this.form.borderWidth = model.borderWidth;
this.form.strokeColor = model.strokeColor;
this.form.width = model.width;
this.form.height = model.height;
this.form.x = model.point.x;
this.form.y = model.point.y;
}
}
},
mounted() {},
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',
fillColor: this.form.fillColor,
borderWidth: this.form.borderWidth,
strokeColor: this.form.strokeColor,
width: this.form.width,
height: this.form.height
};
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',
fillColor: this.form.fillColor,
borderWidth: this.form.borderWidth,
strokeColor: this.form.strokeColor,
width: this.form.width,
height: this.form.height
};
this.$emit('deleteDataModel', rectModel);
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code: '',
fillColor: '',
borderWidth: '',
strokeColor: '',
width: 1,
height: 1,
x: 10,
y: 10
};
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.button_box{
width: 100%;
background: #f0f0f0;
overflow: hidden;
}
</style>

View File

@ -2,26 +2,26 @@
<div>
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
<el-form-item label="线段宽度" prop="lineWidth">
<el-input-number v-model="form.lineWidth" controls-position="right" :min="1" :max="50"></el-input-number>
<el-input-number v-model="form.lineWidth" controls-position="right" :min="1" :max="50" />
</el-form-item>
<el-form-item label="线段颜色" prop="fillColor">
<el-color-picker v-model="form.fillColor"></el-color-picker>
<el-color-picker v-model="form.fillColor" />
</el-form-item>
<el-form-item label="起始X轴坐标">
<el-input-number v-model="form.x1" controls-position="right" :min="0"></el-input-number>
<el-input-number v-model="form.x1" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="起始Y轴坐标">
<el-input-number v-model="form.y1" controls-position="right" :min="0"></el-input-number>
<el-input-number v-model="form.y1" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="终止X轴坐标">
<el-input-number v-model="form.x2" controls-position="right" :min="0"></el-input-number>
<el-input-number v-model="form.x2" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="终止Y轴坐标">
<el-input-number v-model="form.y2" controls-position="right" :min="0"></el-input-number>
<el-input-number v-model="form.y2" controls-position="right" :min="0" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">删除</el-button>
<el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
</el-form-item>
</el-form>
@ -53,7 +53,7 @@ export default {
],
fillColor: [
{ required: true, message: '请输入线段颜色', trigger: 'blur' }
],
]
}
};
},

View File

@ -8,13 +8,13 @@
<el-input-number v-model="form.height" controls-position="right" :min="1" />
</el-form-item>
<el-form-item label="填充色" prop="fillColor">
<el-color-picker v-model="form.fillColor" show-alpha></el-color-picker>
<el-color-picker v-model="form.fillColor" show-alpha />
</el-form-item>
<el-form-item label="边框宽度" prop="borderWidth">
<el-input-number v-model="form.borderWidth" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="边框色" prop="strokeColor">
<el-color-picker v-model="form.strokeColor"></el-color-picker>
<el-color-picker v-model="form.strokeColor" />
</el-form-item>
<el-form-item label="X轴坐标">
<el-input-number v-model="form.x" controls-position="right" :min="1" />

View File

@ -5,7 +5,7 @@
<el-input v-model="form.context" type="textarea" />
</el-form-item>
<el-form-item label="文字颜色" prop="textFill">
<el-color-picker v-model="form.textFill"></el-color-picker>
<el-color-picker v-model="form.textFill" />
</el-form-item>
<el-form-item label="文字大小" prop="fontSize">
<el-input-number v-model="form.fontSize" controls-position="right" :min="1" :max="100" />