ibp盘调整
This commit is contained in:
parent
7f0d548cb4
commit
fa604188b0
@ -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;
|
||||
|
@ -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();
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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();
|
||||
}
|
||||
|
||||
|
@ -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();
|
||||
}
|
||||
|
@ -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) {
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user