ibp盘调整

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

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 });
return true;
} else if (this.isAllowDragging) {
if (this.eventTarget._type === deviceType.Clock || this.eventTarget._type === deviceType.Elevator) {
this.eventTarget.grouper.drift(dx, dy, e);
} else {
this.eventTarget.drift(dx, dy, e);
}
}
} else {
return true;

View File

@ -15,25 +15,29 @@ export default class alarm extends Group {
}
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({
zlevel: this.zlevel,
z: this.z,
draggable: false,
style: {
image: alarmpic,
x: model.point.x,
y: model.point.y,
x: 0,
y: 0,
width: 71,
height: 74
}
});
this.add(this.imageBg);
this.grouper.add(this.imageBg);
this.add(this.grouper);
this.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.dirty();
}

View File

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

View File

@ -13,19 +13,24 @@ class Arrow extends Group {
create() {
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({
zlevel: model.zlevel,
z: model.z,
draggable: false,
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: {
stroke: model.stroke,
fill: model.fill
}
});
this.add(this.arrow);
this.grouper.add(this.arrow);
this.add(this.grouper);
this.getOrientate();
}

View File

@ -34,26 +34,30 @@ export default class button extends Group {
this.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({
zlevel: this.zlevel,
z: this.z,
draggable: false,
style: {
image: this.getImagePic(),
x: model.point.x,
y: model.point.y,
x: 0,
y: 0,
width: 70,
height: 80
}
});
this.add(this.imageBg);
this.grouper.add(this.imageBg);
this.add(this.grouper);
this.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.dirty();
}

View File

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

View File

@ -13,14 +13,18 @@ export default class ibpText extends Group {
}
create() {
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({
zlevel: model.zlevel,
z: model.z,
silent: model.silent || false,
draggable: false,
style: {
x: model.point.x,
y: model.point.y,
x: 0,
y: 0,
fontWeight: model.fontWeight,
fontSize: model.fontSize,
fontFamily: model.fontFamily,
@ -30,10 +34,18 @@ export default class ibpText extends Group {
textAlign: model.textAlign,
textPosition: model.textPosition || 'inside',
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) {
this.model.point.x+=dx;

View File

@ -24,6 +24,24 @@
<el-form-item label="Y轴坐标">
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
</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-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
@ -50,7 +68,13 @@
fontSize: '',
fontWeight: '',
x: 10,
y: 10
y: 10,
hasRect: false,
xBg: 10,
yBg: 10,
bgWidth: 0,
bgHeight: 0,
textBackgroundColor: ''
},
rules: {
code: [
@ -77,6 +101,7 @@
watch: {
'$store.state.ibp.rightClickCount': function (val) {
const model = this.$store.getters['ibp/updateDeviceData'];
console.log(model);
if (model._type === 'IbpText' ){
this.buttonText = '修改';
this.showDeleteButton = true;
@ -88,6 +113,12 @@
this.form.fontWeight = model.fontWeight;
this.form.x = model.point.x;
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,
fontSize: this.form.fontSize ,
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.initPage();
@ -116,21 +156,6 @@
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() {
const textModel = {
@ -146,7 +171,16 @@
textFill: this.form.textFill,
fontSize: this.form.fontSize ,
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.initPage();
@ -168,6 +202,10 @@
generateCode() {
const mydate = new Date();
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);
}
}
};