joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

ibp盘调整

Browse Source
This commit is contained in:
fan 2019-09-06 09:55:16 +08:00
parent 7f0d548cb4
commit fa604188b0
8 changed files with 114 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/ibp/mouseController.js
View File

@ -124,12 +124,7 @@ class MouseController extends Eventful {
this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y }); this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
return true; return true;
} else if (this.isAllowDragging) { } else if (this.isAllowDragging) {
if (this.eventTarget._type === deviceType.Clock || this.eventTarget._type === deviceType.Elevator) { this.eventTarget.grouper.drift(dx, dy, e);
this.eventTarget.grouper.drift(dx, dy, e);
} else {
this.eventTarget.drift(dx, dy, e);
}
} }
} else { } else {
return true; return true;

14
src/ibp/shape/alarm.js
View File

@ -15,25 +15,29 @@ export default class alarm extends Group {
} }
create() { create() {
const model = this.model; this.grouper=new Group({
id: this.model.code,
position: [this.model.point.x, this.model.point.y]
});
this.imageBg = new Image({ this.imageBg = new Image({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
draggable: false, draggable: false,
style: { style: {
image: alarmpic, image: alarmpic,
x: model.point.x, x: 0,
y: model.point.y, y: 0,
width: 71, width: 71,
height: 74 height: 74
} }
}); });
this.add(this.imageBg); this.grouper.add(this.imageBg);
this.add(this.grouper);
this.transformScale(); this.transformScale();
} }
/** 缩放按钮 */ /** 缩放按钮 */
transformScale() { transformScale() {
this.imageBg.origin = [this.model.point.x, this.model.point.y]; this.imageBg.origin = [0, 0];
this.imageBg.scale =[this.model.width/71, this.model.width/71]; this.imageBg.scale =[this.model.width/71, this.model.width/71];
this.imageBg.dirty(); this.imageBg.dirty();
} }

11
src/ibp/shape/appendageBox.js
View File

@ -14,19 +14,24 @@ export default class AppendageBox extends Group {
} }
create() { create() {
this.grouper=new Group({
id: this.model.code,
position: [this.model.point.x, this.model.point.y]
});
this.appendageBox = new Image({ this.appendageBox = new Image({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
draggable: false, draggable: false,
style: { style: {
image: AppendageBoxImage, image: AppendageBoxImage,
x: this.model.point.x, x: 0,
y: this.model.point.y, y: 0,
width: this.model.width, width: this.model.width,
height: this.model.height height: this.model.height
} }
}); });
this.add(this.appendageBox); this.grouper.add(this.appendageBox);
this.add(this.grouper);
} }
setModel(dx, dy) { setModel(dx, dy) {
this.model.point.x+=dx; this.model.point.x+=dx;

9
src/ibp/shape/arrow.js
View File

@ -13,19 +13,24 @@ class Arrow extends Group {
create() { create() {
const model = this.model; const model = this.model;
this.grouper=new Group({
id: this.model.code,
position: [this.model.point.x, this.model.point.y]
});
this.arrow = new Polygon({ this.arrow = new Polygon({
zlevel: model.zlevel, zlevel: model.zlevel,
z: model.z, z: model.z,
draggable: false, draggable: false,
shape: { shape: {
points: arrow(this.model.point.x, this.model.point.y, this.model.length, this.model.width) points: arrow(0, 0, this.model.length, this.model.width)
}, },
style: { style: {
stroke: model.stroke, stroke: model.stroke,
fill: model.fill fill: model.fill
} }
}); });
this.add(this.arrow); this.grouper.add(this.arrow);
this.add(this.grouper);
this.getOrientate(); this.getOrientate();
} }

14
src/ibp/shape/button.js
View File

@ -34,26 +34,30 @@ export default class button extends Group {
this.create(); this.create();
} }
create() { create() {
const model = this.model; this.grouper=new Group({
id: this.model.code,
position: [this.model.point.x, this.model.point.y]
});
this.imageBg = new Image({ this.imageBg = new Image({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
draggable: false, draggable: false,
style: { style: {
image: this.getImagePic(), image: this.getImagePic(),
x: model.point.x, x: 0,
y: model.point.y, y: 0,
width: 70, width: 70,
height: 80 height: 80
} }
}); });
this.add(this.imageBg); this.grouper.add(this.imageBg);
this.add(this.grouper);
this.transformScale(); this.transformScale();
} }
/** 缩放按钮 */ /** 缩放按钮 */
transformScale() { transformScale() {
this.imageBg.origin = [this.model.point.x, this.model.point.y]; this.imageBg.origin = [0, 0];
this.imageBg.scale =[this.model.width/70, this.model.width/70]; this.imageBg.scale =[this.model.width/70, this.model.width/70];
this.imageBg.dirty(); this.imageBg.dirty();
} }

11
src/ibp/shape/circularLamp.js
View File

@ -14,20 +14,25 @@ export default class CircularLamp extends Group {
} }
create() { create() {
this.grouper=new Group({
id: this.model.code,
position: [this.model.point.x, this.model.point.y]
});
this.lamp = new Circle({ this.lamp = new Circle({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
draggable: false, draggable: false,
shape: { shape: {
cx: this.model.point.x, cx: 0,
cy: this.model.point.y, cy: 0,
r: this.model.r r: this.model.r
}, },
style: { style: {
fill: this.model.fillColor fill: this.model.fillColor
} }
}); });
this.add(this.lamp); this.grouper.add(this.lamp);
this.add(this.grouper);
} }
setCircularLampColor(color) { setCircularLampColor(color) {

20
src/ibp/shape/ibpText.js
View File

@ -13,14 +13,18 @@ export default class ibpText extends Group {
} }
create() { create() {
const model = this.model; const model = this.model;
this.grouper=new Group({
id: this.model.code,
position: [this.model.point.x, this.model.point.y]
});
this.textName = new Text({ this.textName = new Text({
zlevel: model.zlevel, zlevel: model.zlevel,
z: model.z, z: model.z,
silent: model.silent || false, silent: model.silent || false,
draggable: false, draggable: false,
style: { style: {
x: model.point.x, x: 0,
y: model.point.y, y: 0,
fontWeight: model.fontWeight, fontWeight: model.fontWeight,
fontSize: model.fontSize, fontSize: model.fontSize,
fontFamily: model.fontFamily, fontFamily: model.fontFamily,
@ -30,10 +34,18 @@ export default class ibpText extends Group {
textAlign: model.textAlign, textAlign: model.textAlign,
textPosition: model.textPosition || 'inside', textPosition: model.textPosition || 'inside',
textVerticalAlign: model.textVerticalAlign || null, textVerticalAlign: model.textVerticalAlign || null,
textLineHeight: model.fontSize textLineHeight: model.fontSize,
textRect: model.textRect?{
x: model.textRect.x,
y: model.textRect.y,
width: model.textRect.width,
height: model.textRect.height
}: '',
textBackgroundColor: model.textBackgroundColor
} }
}); });
this.add(this.textName); this.grouper.add(this.textName);
this.add(this.grouper);
} }
setModel(dx, dy) { setModel(dx, dy) {
this.model.point.x+=dx; this.model.point.x+=dx;

74
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpText.vue
View File

@ -24,6 +24,24 @@
<el-form-item label="Y轴坐标"> <el-form-item label="Y轴坐标">
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number> <el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="文字背景">
<el-switch v-model="form.hasRect" @change="handleChange"></el-switch>
</el-form-item>
<el-form-item v-show="form.hasRect" label="背景X轴坐标">
<el-input-number v-model="form.xBg" controls-position="right" :min="0"></el-input-number>
</el-form-item>
<el-form-item v-show="form.hasRect" label="背景Y轴坐标">
<el-input-number v-model="form.yBg" controls-position="right" :min="0"></el-input-number>
</el-form-item>
<el-form-item v-show="form.hasRect" label="背景宽度">
<el-input-number v-model="form.bgWidth" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item v-show="form.hasRect" label="背景高度">
<el-input-number v-model="form.bgHeight" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item v-show="form.hasRect" label="背景颜色" prop="elevatorColor">
<el-color-picker v-model="form.textBackgroundColor"></el-color-picker>
</el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button> <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" @click="deleteDevice" type="danger">删除</el-button>
@ -50,7 +68,13 @@
fontSize: '', fontSize: '',
fontWeight: '', fontWeight: '',
x: 10, x: 10,
y: 10 y: 10,
hasRect: false,
xBg: 10,
yBg: 10,
bgWidth: 0,
bgHeight: 0,
textBackgroundColor: ''
}, },
rules: { rules: {
code: [ code: [
@ -77,6 +101,7 @@
watch: { watch: {
'$store.state.ibp.rightClickCount': function (val) { '$store.state.ibp.rightClickCount': function (val) {
const model = this.$store.getters['ibp/updateDeviceData']; const model = this.$store.getters['ibp/updateDeviceData'];
console.log(model);
if (model._type === 'IbpText' ){ if (model._type === 'IbpText' ){
this.buttonText = '修改'; this.buttonText = '修改';
this.showDeleteButton = true; this.showDeleteButton = true;
@ -88,6 +113,12 @@
this.form.fontWeight = model.fontWeight; this.form.fontWeight = model.fontWeight;
this.form.x = model.point.x; this.form.x = model.point.x;
this.form.y = model.point.y; this.form.y = model.point.y;
this.form.hasRect = model.hasRect;
this.form.xBg = model.textRect ? model.textRect.x : 10;
this.form.yBg = model.textRect ? model.textRect.y : 10;
this.form.bgWidth = model.textRect ? model.textRect.width : 0;
this.form.bgHeight = model.textRect ? model.textRect.height : 0;
this.form.textBackgroundColor = model.textRect ? model.textRect.textBackgroundColor : '';
} }
} }
}, },
@ -108,7 +139,16 @@
textFill: this.form.textFill, textFill: this.form.textFill,
fontSize: this.form.fontSize , fontSize: this.form.fontSize ,
fontWeight: this.form.fontWeight, fontWeight: this.form.fontWeight,
fontFamily: 'consolas' fontFamily: 'consolas',
hasRect: this.form.hasRect,
textRect: this.form.hasRect ?
{
x: this.form.xBg,
y: this.form.yBg,
width: this.form.bgWidth,
height: this.form.bgHeight
}:'',
textBackgroundColor: this.form.hasRect?this.form.textBackgroundColor: ''
}; };
this.$emit('createText', textModel); this.$emit('createText', textModel);
this.initPage(); this.initPage();
@ -116,21 +156,6 @@
return false; return false;
} }
}); });
const textModel = {
point: {
x: this.form.x,
y: this.form.y
},
code: this.form.code,
_type: 'IbpText',
context: this.form.context,
textFill: this.form.textFill,
fontSize: this.form.fontSize ,
fontWeight: this.form.fontWeight,
fontFamily: 'consolas'
};
this.$emit('createText', textModel);
this.initPage();
}, },
deleteDevice() { deleteDevice() {
const textModel = { const textModel = {
@ -146,7 +171,16 @@
textFill: this.form.textFill, textFill: this.form.textFill,
fontSize: this.form.fontSize , fontSize: this.form.fontSize ,
fontWeight: this.form.fontWeight, fontWeight: this.form.fontWeight,
fontFamily: 'consolas' fontFamily: 'consolas',
hasRect: this.form.hasRect,
textRect: this.form.hasRect ?
{
x: this.form.xBg,
y: this.form.yBg,
width: this.form.bgWidth,
height: this.form.bgHeight
}:'',
textBackgroundColor: this.form.hasRect?this.form.textBackgroundColor: ''
}; };
this.$emit('deleteDataModel',textModel); this.$emit('deleteDataModel',textModel);
this.initPage(); this.initPage();
@ -168,6 +202,10 @@
generateCode() { generateCode() {
const mydate = new Date(); const mydate = new Date();
this.form.code = "text_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000); this.form.code = "text_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
},
handleChange(e) {
// this.form.hasRect = !this.form.hasRect;
console.log('-------',e,this.form.hasRect);
} }
} }
}; };