iscs 矩形和文字 右键操作修改

This commit is contained in:
joylink_cuiweidong 2020-02-05 17:05:57 +08:00
parent fd09e2aae5
commit e560ee0e02
12 changed files with 45 additions and 113 deletions

View File

@ -1,9 +1,9 @@
const iscsData = {
'11': { "iscsLineList": [{ "point1": { "x": 22, "y": 238 }, "point2": { "x": 22, "y": 506 }, "code": "IscsLine_2", "_type": "IscsLine", "lineWidth": 2, "fillColor": "#fff", "zlevel": 1, "z": 4, "point": { "x": 22, "y": 238 } }, { "point1": { "x": 21, "y": 505 }, "point2": { "x": 283, "y": 505 }, "code": "IscsLine_3", "_type": "IscsLine", "lineWidth": 2, "fillColor": "#fff", "zlevel": 1, "z": 4, "point": { "x": 21, "y": 505 } }, { "point1": { "x": 23, "y": 239 }, "point2": { "x": 285, "y": 239 }, "code": "IscsLine_1", "_type": "IscsLine", "lineWidth": 2, "fillColor": "#fff", "zlevel": 1, "z": 4, "point": { "x": 23, "y": 239 } }], "iscsRectList": [{ "point": { "x": 41, "y": 240 }, "code": "IscsRect_1", "_type": "IscsRect", "fillColor": "rgba(181, 181, 181, 0)", "borderWidth": 2, "strokeColor": "#B5B5B5", "width": 86, "height": 89, "zlevel": 1, "z": 3 }] },
'12': {},
'21': {},
'31': {},
'41': { "vidiconList": [{ "_type": "Vidicon", "code": "Vidicon_1", "width": 40, "right": true, "point": { "x": 178, "y": 73 }, "zlevel": 1, "z": 4 }, { "_type": "Vidicon", "code": "Vidicon_2", "width": 40, "right": true, "point": { "x": 309, "y": 147 }, "zlevel": 1, "z": 4 }, { "_type": "Vidicon", "code": "Vidicon_3", "width": 40, "right": true, "point": { "x": 308, "y": 72 }, "zlevel": 1, "z": 4 }], "iscsRectList": [{ "point": { "x": 25, "y": 176 }, "code": "IscsRect_1", "_type": "IscsRect", "fillColor": "rgba(239, 231, 231, 0)", "borderWidth": 2, "strokeColor": "#F7F1F1", "width": 70, "height": 90, "zlevel": 1, "z": 3 }, { "point": { "x": 96, "y": 176 }, "code": "IscsRect_2", "_type": "IscsRect", "fillColor": "rgba(239, 231, 231, 0)", "borderWidth": 2, "strokeColor": "#F7F1F1", "width": 70, "height": 90, "zlevel": 1, "z": 3 }, { "point": { "x": 167, "y": 176 }, "code": "IscsRect_3", "_type": "IscsRect", "fillColor": "rgba(239, 231, 231, 0)", "borderWidth": 2, "strokeColor": "#F7F1F1", "width": 70, "height": 90, "zlevel": 1, "z": 3 }, { "point": { "x": 238, "y": 176 }, "code": "IscsRect_4", "_type": "IscsRect", "fillColor": "rgba(239, 231, 231, 0)", "borderWidth": 2, "strokeColor": "#F7F1F1", "width": 70, "height": 90, "zlevel": 1, "z": 3 }, { "point": { "x": 309, "y": 149 }, "code": "IscsRect_5", "_type": "IscsRect", "fillColor": "rgba(239, 231, 231, 0)", "borderWidth": 2, "strokeColor": "#F7F1F1", "width": 70, "height": 90, "zlevel": 1, "z": 3 }], "vidiconCloudList": [{ "_type": "VidiconCloud", "code": "VidiconCloud_1", "r": 18, "point": { "x": 50, "y": 61 }, "zlevel": 1, "z": 4 }, { "_type": "VidiconCloud", "code": "VidiconCloud_2", "r": 18, "point": { "x": 121, "y": 206 }, "zlevel": 1, "z": 4 }, { "_type": "VidiconCloud", "code": "VidiconCloud_3", "r": 18, "point": { "x": 192, "y": 206 }, "zlevel": 1, "z": 4 }, { "_type": "VidiconCloud", "code": "VidiconCloud_4", "r": 18, "point": { "x": 262, "y": 207 }, "zlevel": 1, "z": 4 }], "iscsLineList": [{ "point1": { "x": 375, "y": 50 }, "point2": { "x": 1075, "y": 50 }, "code": "IscsLine_1", "_type": "IscsLine", "lineWidth": 10, "fillColor": "#F7F1F1", "zlevel": 1, "z": 4, "point": { "x": 375, "y": 50 } }, { "point1": { "x": 376, "y": 306 }, "point2": { "x": 1076, "y": 306 }, "code": "IscsLine_2", "_type": "IscsLine", "lineWidth": 10, "fillColor": "#F7F1F1", "zlevel": 1, "z": 4, "point": { "x": 376, "y": 306 } }] },
'11': { 'manualAlarmButtonList': [{ 'point': { 'x': 560, 'y': 100 }, 'code': 'ManualAlarmButton_1', '_type': 'ManualAlarmButton', 'width': 25, 'zlevel': 1, 'z': 4 }], 'fireHydranAlarmButtonList': [{ 'point': { 'x': 562, 'y': 234 }, 'code': 'FireHydranAlarmButton_1', '_type': 'FireHydranAlarmButton', 'width': 25, 'zlevel': 1, 'z': 4 }, { 'point': { 'x': 201, 'y': 242 }, 'code': 'FireHydranAlarmButton_2', '_type': 'FireHydranAlarmButton', 'width': 25, 'zlevel': 1, 'z': 4 }, { 'point': { 'x': 391, 'y': 127 }, 'code': 'FireHydranAlarmButton_3', '_type': 'FireHydranAlarmButton', 'width': 25, 'zlevel': 1, 'z': 4 }] },
'12':{},
'21':{},
'31':{},
'41': {"vidiconList":[{"_type":"Vidicon","code":"Vidicon_1","width":40,"right":true,"point":{"x":178,"y":73},"zlevel":1,"z":4},{"_type":"Vidicon","code":"Vidicon_2","width":40,"right":true,"point":{"x":309,"y":147},"zlevel":1,"z":4},{"_type":"Vidicon","code":"Vidicon_3","width":40,"right":true,"point":{"x":308,"y":72},"zlevel":1,"z":4}],"iscsRectList":[{"point":{"x":25,"y":176},"code":"IscsRect_1","_type":"IscsRect","fillColor":"rgba(239, 231, 231, 0)","borderWidth":2,"strokeColor":"#F7F1F1","width":70,"height":90,"zlevel":1,"z":3},{"point":{"x":96,"y":176},"code":"IscsRect_2","_type":"IscsRect","fillColor":"rgba(239, 231, 231, 0)","borderWidth":2,"strokeColor":"#F7F1F1","width":70,"height":90,"zlevel":1,"z":3},{"point":{"x":167,"y":176},"code":"IscsRect_3","_type":"IscsRect","fillColor":"rgba(239, 231, 231, 0)","borderWidth":2,"strokeColor":"#F7F1F1","width":70,"height":90,"zlevel":1,"z":3},{"point":{"x":238,"y":176},"code":"IscsRect_4","_type":"IscsRect","fillColor":"rgba(239, 231, 231, 0)","borderWidth":2,"strokeColor":"#F7F1F1","width":70,"height":90,"zlevel":1,"z":3},{"point":{"x":309,"y":149},"code":"IscsRect_5","_type":"IscsRect","fillColor":"rgba(239, 231, 231, 0)","borderWidth":2,"strokeColor":"#F7F1F1","width":70,"height":90,"zlevel":1,"z":3}],"vidiconCloudList":[{"_type":"VidiconCloud","code":"VidiconCloud_1","r":18,"point":{"x":50,"y":61},"zlevel":1,"z":4},{"_type":"VidiconCloud","code":"VidiconCloud_2","r":18,"point":{"x":121,"y":206},"zlevel":1,"z":4},{"_type":"VidiconCloud","code":"VidiconCloud_3","r":18,"point":{"x":192,"y":206},"zlevel":1,"z":4},{"_type":"VidiconCloud","code":"VidiconCloud_4","r":18,"point":{"x":262,"y":207},"zlevel":1,"z":4}],"iscsLineList":[{"point1":{"x":375,"y":50},"point2":{"x":1075,"y":50},"code":"IscsLine_1","_type":"IscsLine","lineWidth":10,"fillColor":"#F7F1F1","zlevel":1,"z":4,"point":{"x":375,"y":50}},{"point1":{"x":376,"y":306},"point2":{"x":1076,"y":306},"code":"IscsLine_2","_type":"IscsLine","lineWidth":10,"fillColor":"#F7F1F1","zlevel":1,"z":4,"point":{"x":376,"y":306}}]},
'42': {},
'51': {},
'61': {},

View File

@ -14,6 +14,7 @@ export default class line extends Group {
}
create() {
const model = this.model;
console.log(model);
this.grouper = new Group({
id: model.code,
position: [model.point1.x, model.point1.y]

View File

@ -88,6 +88,7 @@ export default {
},
methods: {
createDataModel(model) {
console.log(model);
const newModel = deviceFactory(model._type, model);
this.$store.dispatch('iscs/updateIscsDevices', newModel.model);
},

View File

@ -41,7 +41,7 @@ export default {
form: {
code: '',
lineWidth: '',
fillColor: '#fff',
fillColor: '#000000',
x1: 10,
y1: 10,
x2: 20,
@ -54,18 +54,6 @@ export default {
fillColor: [
{ required: true, message: '请输入线段颜色', trigger: 'blur' }
],
x1: [
{ required: true, message: '请输入数值', trigger: 'blur' }
],
y1: [
{ required: true, message: '请输入数值', trigger: 'blur' }
],
x2: [
{ required: true, message: '请输入数值', trigger: 'blur' }
],
y2: [
{ required: true, message: '请输入数值', trigger: 'blur' }
]
}
};
},
@ -74,22 +62,20 @@ export default {
'iscs'
])
},
watch: {
watch:{
'$store.state.iscs.rightClickCount': function (val) {
const model = this.$store.getters['iscs/updateDeviceData'];
if (model._type === 'IscsLine' ) {
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form = {
code: model.code,
lineWidth: model.lineWidth,
fillColor: model.fillColor,
x1: model.point1.x,
y1: model.point1.y,
x2: model.point2.x,
y2: model.point2.y
};
this.form.code = model.code;
this.form.lineWidth = model.lineWidth;
this.form.fillColor = model.fillColor;
this.form.x1 = model.point1.x;
this.form.y1 = model.point1.y;
this.form.x1 = model.point2.x;
this.form.y2 = model.point2.y;
}
}
},
@ -112,9 +98,6 @@ export default {
lineWidth: this.form.lineWidth,
fillColor: this.form.fillColor
};
if (this.isUpdate) {
this.deleteDevice();
}
this.$emit('createDataModel', lineModel);
this.initPage();
} else {

View File

@ -69,24 +69,6 @@ export default {
])
},
watch: {
'$store.state.iscs.rightClickCount': function (val) {
const model = this.$store.getters['iscs/updateDeviceData'];
if (model._type === 'IscsRect' ) {
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form = {
code: model.code,
fillColor: model.fillColor,
borderWidth: model.borderWidth,
strokeColor: model.strokeColor,
width: model.width,
height: model.height,
x: model.point.x,
y: model.point.y
};
}
}
},
mounted() {},
methods: {
@ -106,9 +88,6 @@ export default {
width: this.form.width,
height: this.form.height
};
if (this.isUpdate) {
this.deleteDevice();
}
this.$emit('createDataModel', rectModel);
this.initPage();
} else {

View File

@ -74,23 +74,6 @@ export default {
])
},
watch: {
'$store.state.iscs.rightClickCount': function (val) {
const model = this.$store.getters['iscs/updateDeviceData'];
if (model._type === 'IscsText' ) {
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form = {
code: model.code,
context: model.context,
textFill: model.textFill,
fontSize: model.fontSize,
fontWeight: model.fontWeight,
x: model.point.x,
y: model.point.y
};
}
}
},
mounted() {},
methods: {
@ -110,9 +93,6 @@ export default {
fontWeight: this.form.fontWeight,
fontFamily: 'consolas'
};
if (this.isUpdate) {
this.deleteDevice();
}
this.$emit('createDataModel', textModel);
this.initPage();
} else {

View File

@ -72,13 +72,10 @@ export default {
x: this.addModel.x,
y: this.addModel.y
},
code: this.isUpdate ? this.addModel.code : getUID('FireHydranAlarmButton', this.iscs.fireHydranAlarmButtonList),
code: this.isUpdate ? this.form.code : getUID('FireHydranAlarmButton', this.iscs.fireHydranAlarmButtonList),
_type: 'FireHydranAlarmButton',
width: this.addModel.width
};
if (this.isUpdate) {
this.deleteDevice();
}
this.$emit('createDataModel', maButtonModel);
this.initPage();
} else {

View File

@ -73,13 +73,10 @@ export default {
x: this.addModel.x,
y: this.addModel.y
},
code: this.isUpdate ? this.addModel.code : getUID('GasFireControl', this.iscs.gasFireControlList),
code: this.isUpdate ? this.form.code : getUID('GasFireControl', this.iscs.gasFireControlList),
_type: 'GasFireControl',
width: this.addModel.width
};
if (this.isUpdate) {
this.deleteDevice();
}
this.$emit('createDataModel', maButtonModel);
this.initPage();
} else {

View File

@ -50,27 +50,30 @@
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="文字" name="IscsText">
<iscs-text
ref="iscsText"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel">
</iscs-text>
</el-tab-pane>
<el-tab-pane label="线段" name="IscsLine">
<iscs-line
ref="iscsLine"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel">
</iscs-line>
</el-tab-pane>
<el-tab-pane label="矩形" name="IscsRect">
<iscs-rect
ref="iscsRect"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel">
</iscs-rect>
</el-tab-pane>
<el-tab-pane label="文字" name="IscsText">
<iscs-text
ref="iscsText"
style="width: 90%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel">
</iscs-text>
</el-tab-pane>
<el-tab-pane label="线段" name="IscsLine">
<iscs-line
ref="iscsLine"
style="width: 90%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel">
</iscs-line>
</el-tab-pane>
<el-tab-pane label="矩形" name="IscsRect">
<iscs-rect
ref="iscsRect"
style="width: 90%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel">
</iscs-rect>
</el-tab-pane>
</el-tabs>
</el-card>
</div>

View File

@ -73,13 +73,10 @@ export default {
x: this.addModel.x,
y: this.addModel.y
},
code: this.isUpdate ? this.addModel.code : getUID('ManualAlarmButton', this.iscs.manualAlarmButtonList),
code: this.isUpdate ? this.form.code : getUID('ManualAlarmButton', this.iscs.manualAlarmButtonList),
_type: 'ManualAlarmButton',
width: this.addModel.width
};
if (this.isUpdate) {
this.deleteDevice();
}
this.$emit('createDataModel', maButtonModel);
this.initPage();
} else {

View File

@ -73,13 +73,10 @@ export default {
x: this.addModel.x,
y: this.addModel.y
},
code: this.isUpdate ? this.addModel.code : getUID('SmokeDetector', this.iscs.smokeDetectorList),
code: this.isUpdate ? this.form.code : getUID('SmokeDetector', this.iscs.smokeDetectorList),
_type: 'SmokeDetector',
width: this.addModel.width
};
if (this.isUpdate) {
this.deleteDevice();
}
this.$emit('createDataModel', maButtonModel);
this.initPage();
} else {

View File

@ -73,13 +73,10 @@ export default {
x: this.addModel.x,
y: this.addModel.y
},
code: this.isUpdate ? this.addModel.code : getUID('TemperatureDetector', this.iscs.temperatureDetectorList),
code: this.isUpdate ? this.form.code : getUID('TemperatureDetector', this.iscs.temperatureDetectorList),
_type: 'TemperatureDetector',
width: this.addModel.width
};
if (this.isUpdate) {
this.deleteDevice();
}
this.$emit('createDataModel', maButtonModel);
this.initPage();
} else {