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

提交代码

Browse Source
This commit is contained in:
ival 2021-04-08 11:18:01 +08:00
parent dcefdfab33
commit 53008131c6
10 changed files with 115 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/iscs_new/controller.js
View File

@ -24,7 +24,8 @@ class MouseEvent {
composeCode = compose.model.composeCode;
}
this.code = compose? compose.model.code: shape.code;
this.code = compose? compose.code: shape.code;
this.type = compose? compose.type: shape.type;
}
if (shape.subType) {

13
src/iscs_new/core/abstractShape.js
View File

@ -10,6 +10,7 @@ function shapeStyleBuilder({subType, model}) {
subType: subType,
...shapeRender,
code: model.code,
type: model.type,
z: 9998,
cursor: 'pointer',
shape: {
@ -39,15 +40,19 @@ class AbstractShape extends Group {
// 拖动
drift({dx, dy}) {
this.model.position[0] = this.model.position[0] + dx;
this.model.position[1] = this.model.position[1] + dy;
this.model.base.position[0] = this.model.base.position[0] + dx;
this.model.base.position[1] = this.model.base.position[1] + dy;
this.instance.origin = utils.createOrigin(this.instance);
this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation});
this.instance.transform = utils.createTransform({scale: this.model.base.scale, position: this.model.base.position, rotation: this.model.base.rotation*Math.PI/180});
}
// 修改属性
attr(attrs) {
this.instance.attr(attrs);
if (this.instance) {
this.instance.attr(attrs);
} else {
super.attr(attrs);
}
}
// 设置显隐

12
src/iscs_new/core/form/elementConst.js
View File

@ -448,7 +448,7 @@ export const elementConst = {
precision: 0,
step:1,
min: 0,
max: Math.PI*2,
max: 360,
rules:[
{ required: true, message:'请输入起始弧度', trigger: 'blur' }
],
@ -462,11 +462,11 @@ export const elementConst = {
precision: 0,
step:1,
min: 0,
max: Math.PI*2,
max: 360,
rules:[
{ required: true, message:'请输入终止弧度', trigger: 'blur' }
],
value: Math.PI,
value: 180,
description: '终止弧度'
},
{
@ -555,7 +555,7 @@ export const elementConst = {
precision: 0,
step:1,
min: 0,
max: Math.PI*2,
max: 360,
rules:[
{ required: true, message:'请输入起始弧度', trigger: 'blur' }
],
@ -569,11 +569,11 @@ export const elementConst = {
precision: 0,
step:1,
min: 0,
max: Math.PI*2,
max: 360,
rules:[
{ required: true, message:'请输入终止弧度', trigger: 'blur' }
],
value: Math.PI,
value: 180,
description: '终止弧度'
},
{

18
src/iscs_new/core/form/form2Base.js
View File

@ -49,7 +49,7 @@ export default [
rules:[
{ required: true, message:'请输入位置', trigger: 'blur' }
],
value: 0,
value: [0,0],
description: '控制图形的位置。'
},
{
@ -63,7 +63,21 @@ export default [
rules:[
{ required: true, message:'请输入缩放', trigger: 'blur' }
],
value: 1,
value: [1,1],
description: '控制图形的缩放。'
},
{
prop: 'rotation',
label: '旋转',
type: types.Number,
precision: 0,
min:0,
max:360,
step:1,
rules:[
{ required: true, message:'请输入旋转', trigger: 'blur' }
],
value: 0,
description: '控制图形的旋转。'
}
];

16
src/iscs_new/factory/compose.js
View File

@ -29,7 +29,11 @@ class Compose extends AbstractShape {
this.instance = new Group({
...shapeRender,
...this.model,
...this.model.base,
code: this.model.code,
type: this.model.type,
shape: {...this.model.shape},
style: {...this.model.style},
onmouseover,
onmousemove,
onmouseout
@ -42,11 +46,11 @@ class Compose extends AbstractShape {
this.instance.add(el);
}
})
this.instance.scale = this.model.scale;
this.instance.rotation = this.model.rotation;
this.instance.position = this.model.position;
this.instance.scale = this.model.base.scale;
this.instance.position = this.model.base.position;
this.instance.rotation = this.model.base.rotation*Math.PI/180;
this.instance.origin = utils.createOrigin(this.instance);
this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation});
this.instance.transform = utils.createTransform({scale: this.model.base.scale, position: this.model.base.position, rotation: this.model.base.rotation*Math.PI/180});
this.add(this.instance);
this.setInvisible(this.model.sightless)
}
@ -77,7 +81,7 @@ class Compose extends AbstractShape {
el.model) {
this.shapeFactory.removeFromLayer(el.type)(el);
this.instance.add(el);
el.model.composeCode = this.model.code;
el.model.composeCode = this.type;
el.attr(el.model);
}
})

22
src/iscs_new/factory/element.js
View File

@ -13,7 +13,7 @@ class Element extends AbstractShape {
create() {
const that = this;
const elementBuilder = graphic[this.model.type];
const elementBuilder = graphic[this.type];
if (elementBuilder) {
// mouse进入事件
function onmouseover(e) {
@ -32,17 +32,21 @@ class Element extends AbstractShape {
this.instance = new elementBuilder({
...shapeRender,
...this.model,
...this.model.base,
code: this.model.code,
type: this.model.type,
shape: {...this.model.shape},
style: {...this.model.style},
onmouseover,
onmousemove,
onmouseout
});
this.instance.scale = this.model.scale;
this.instance.rotation = this.model.rotation;
this.instance.position = this.model.position;
this.instance.scale = this.model.base.scale;
this.instance.position = this.model.base.position;
this.instance.rotation = this.model.base.rotation*Math.PI/180;
this.instance.origin = utils.createOrigin(this.instance);
this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation});
this.instance.transform = utils.createTransform({scale: this.model.base.scale, position: this.model.base.position, rotation: this.model.base.rotation*Math.PI/180});
this.add(this.instance);
this.setInvisible(this.model.sightless)
}
@ -72,9 +76,9 @@ class Element extends AbstractShape {
if (compose &&
compose.model &&
compose.model.elementCodes) {
const index = compose.model.elementCodes.findIndex(this.model.code);
const index = compose.model.elementCodes.findIndex(this.type);
if (index < 0) {
compose.model.elementCodes.push(this.model.code);
compose.model.elementCodes.push(this.type);
this.shapeFactory.removeFormLayer(el.type, this);
compose.add(this);
}
@ -89,7 +93,7 @@ class Element extends AbstractShape {
if (compose &&
compose.model &&
compose.model.elementCodes) {
const index = compose.model.elementCodes.findIndex(this.model.code);
const index = compose.model.elementCodes.findIndex(this.type);
if (index >= 0) {
compose.model.elementCodes.splice(index, 1);
compose.remove(this);

2
src/iscs_new/map.js
View File

@ -46,8 +46,6 @@ class JMap {
this.$zr.dom.setAttribute('tabIndex', -1);
this.$zr.dom.style.cursor = 'auto';
console.log(this.$zr, 111);
// 实例化缩放偏移缩放参数
this.$option = new Option({ scaleRate: 1, offsetX: 0, offsetY: 0, ...utils.deepClone(opts.option||{})}, (dataZoom) => { this.$controller.trigger(events.DataZoom, dataZoom); }); // 缩放

7
src/views/iscs_new/components/dataForm.vue
View File

@ -87,12 +87,13 @@ export default {
};
},
mounted() {
},
methods: {
checkFieldType(field, type) {
return field.type === type;
}
},
init() {
}
}
};
</script>

102
src/views/iscs_new/iscsDraw/index.vue
View File

@ -2,48 +2,41 @@
<transition name="el-zoom-in-center">
<div class="mapPaint">
<div class="map-view">
<iscs-canvas ref="iscsCanvas" />
<!-- @iscsChange="iscsChange" -->
<iscs-canvas ref="iscsCanvas" @selected="onSelected" />
</div>
<div class="right-card" :class="{'hide': draftShow}">
<div class="btn_draft_box" @click="clickDraftBtn"><i :class="draftShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
<div class="btn_draft_box" @click="draftShow = !draftShow"><i :class="draftShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
<el-card type="border-card" class="heightClass">
<div slot="header" class="clearfix">
<el-button
type="text"
style="float: right; padding: 3px 0; margin-right: 5px;"
@click="handleSave"
@click="onSave"
>保存</el-button>
</div>
<el-tabs v-model="enabledTab" class="card" type="card" @tab-click="handleTabClick">
<el-tabs v-model="enabledTab" class="card" type="card" @tab-click="onSelectTab">
<el-tab-pane v-for="(element,index) in elementList" :key="index" :label="element.name" :name="element.code" :lazy="true">
<data-form :ref="'dataform'+element.code" :form="element" :form-model="element.model" :rules="element.rules" />
</el-tab-pane>
</el-tabs>
<div class="bottomBtnGroup">
<el-button type="primary" size="small" @click="onSubmit">添加</el-button>
<el-button v-show="showDeleteButton" size="small" type="warning" @click="onModify">修改</el-button>
<el-button v-show="showDeleteButton" size="small" type="danger" @click="onDelete">删除</el-button>
<el-button v-show="showDeleteButton" size="small" @click="initPage">取消</el-button>
<el-button v-show="!selected" type="primary" size="small" @click="onSubmit">添加</el-button>
<el-button v-show="selected" type="warning" size="small" @click="onModify">修改</el-button>
<el-button v-show="selected" type="danger" size="small" @click="onDelete">删除</el-button>
</div>
</el-card>
</div>
<!-- <div class="right-card" :class="{'hide': tableShow}">
<div class="btn_table_box" @click="clickTableBtn"><i :class="tableShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
</div> -->
</div>
</transition>
</template>
<script>
import localStore from 'storejs';
import iscsCanvas from './iscsCanvas';
// import {allElements} from '@/iscs_new/core/form/allElments';
import BuilderFactory from '@/iscs_new/core/form/builderFactory';
import DataForm from '../components/dataForm';
import orders from '@/iscs_new/utils/orders';
import * as utils from '@/iscs_new/utils/utils';
import shapeType from '@/iscs_new/constant/shapeType.js';
// import { saveIscsElement } from '@/api/iscs';
export default {
name: 'IscsView',
@ -59,7 +52,7 @@ export default {
},
widthLeft: Number(localStore.get('LeftWidth')) || 450,
draftShow: false,
// tableShow: false,
selected: null,
enabledTab:'',
showDeleteButton:false,
elementList:[]
@ -72,15 +65,10 @@ export default {
},
watch: {
$route(val) {
this.iscsChange(this.$route.query.mode, this.$route.query.system, this.$route.query.part);
this.onIscsChange(this.$route.query.mode, this.$route.query.system, this.$route.query.part);
}
},
mounted() {
// this.$refs.iscsPlate.show(this.$route.query.mode, this.$route.query.system, this.$route.query.part);
// this.$refs.iscsPlate.drawIscsInit();
// debugger;
// this.elementList = allElements.elementsList;
// this.enabledTab = this.elementList[0].code;
this.composeName = this.$route.query.composeName;
this.elementList = new BuilderFactory().getFormList();
this.enabledTab = this.elementList[0].code;
@ -89,70 +77,54 @@ export default {
},
methods: {
iscsChange(mode, system, part) {
this.$refs.iscsPlate.show(mode, system, part);
this.$refs.iscsPlate.drawIscsInit();
onIscsChange(mode, system, part) {
// this.$refs.iscsPlate.show(mode, system, part);
// this.$refs.iscsPlate.drawIscsInit();
},
clickDraftBtn() {
this.draftShow = !this.draftShow;
onSave(data) {
},
// clickTableBtn() {
// this.tableShow = !this.tableShow;
// },
handleSave(data) {
// const param = {
// graphData: data,
// mapId: this.$route.query.mapId,
// system: this.$route.query.system,
// totalSystem: this.$route.query.mode,
// userInterface: this.$route.query.part
// };
// saveIscsElement(param).then(resp => {
// this.$message.success('ISCS数据保存成功！');
// }).catch(() => {
// this.$message.error('ISCS数据保存异常！');
// });
},
handleTabClick() {
onSelectTab() {
},
onSelected(val) {
if (val) {
this.selected = JSON.parse(JSON.stringify(val));
} else {
this.selected = null;
}
},
onSubmit(){
let that=this;
that.$refs['dataform'+that.enabledTab][0].$refs['form'].validate((valid) => {
this.$refs['dataform'+this.enabledTab][0].$refs['form'].validate((valid) => {
if (valid) {
let formModel=that.$refs['dataform'+that.enabledTab][0].formModel;
let newModel=Object.assign({},formModel.base);
newModel.type = that.enabledTab;
newModel.code = utils.getUID()
newModel.position = [0, 0];
newModel.scale = [1, 1];
newModel.style=Object.assign({},formModel.style);
newModel.shape=Object.assign({},formModel.shape);
let formModel=this.$refs['dataform'+this.enabledTab][0].formModel;
let newModel=JSON.parse(JSON.stringify(formModel));
newModel.type = this.enabledTab;
newModel.code = utils.getUID(this.enabledTab)
this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.ADD}}]);
}
});
},
onModify() {
let that=this;
that.$refs['dataform'+that.enabledTab][0].$refs['form'].validate((valid) => {
this.$refs['dataform'+this.enabledTab][0].$refs['form'].validate((valid) => {
if (valid) {
let model = that.$refs['dataform'+that.enabledTab][0].formModel;
let model = this.$refs['dataform'+this.enabledTab][0].formModel;
model.code = this.selected.code;
model.type = this.selected.type;
this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.UPDATE}}]);
}
});
},
onDelete(){
let that=this;
that.$refs['dataform'+that.enabledTab][0].$refs['form'].validate((valid) => {
this.$refs['dataform'+this.enabledTab][0].$refs['form'].validate((valid) => {
if (valid) {
let model = that.$refs['dataform'+that.enabledTab][0].formModel;
let model = this.$refs['dataform'+this.enabledTab][0].formModel;
model.code = this.selected.code;
model.type = this.selected.type;
this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.DELETE}}]);
this.$refs['dataform'+this.enabledTab][0].init();
this.selected = null;
}
});
},
initPage(){
},
}
}
};
</script>

70
src/views/iscs_new/iscsDraw/iscsCanvas.vue
View File

@ -1,13 +1,5 @@
<template>
<div>
<!-- <div>
<el-row>
<el-input v-model="json" type="textarea" :rows="4" />
<el-button @click="doRemove"> 删除 </el-button>
<el-button @click="doUnbinding">解绑</el-button>
<el-button @click="doSource"> 源数据 </el-button>
</el-row>
</div> -->
<div :id="iscsId" v-loading="loading" :style="{ width: width +'px', height: height +'px',background:'#425a74' }" class="iscs-canvas" />
</div>
</template>
@ -15,15 +7,11 @@
<script>
import Vue from 'vue';
import Iscs from '@/iscs_new/map';
// import orders from '@/iscs_new/utils/orders';
// import shapeType from '@/iscs_new/constant/shapeType';
import { mapGetters } from 'vuex';
// import { exitFullscreen } from '@/utils/screen';
export default {
data() {
return {
json: '{}',
dataZoom: {
offsetX: '0',
offsetY: '0',
@ -36,7 +24,6 @@ export default {
y: 0
}
},
selected: null, // 选择复制元素
loading: false
};
},
@ -71,6 +58,7 @@ export default {
this.destroy();
},
methods: {
// 初始化窗口
init() {
document.getElementById(this.iscsId).oncontextmenu = function (e) {
return false;
@ -105,7 +93,7 @@ export default {
});
Vue.prototype.$iscs = this.$iscs;
this.$iscs.on('viewLoaded', this.onUpdate, this);
this.$iscs.on('viewLoaded', this.onViewLoaded, this);
this.$iscs.on('contextmenu', this.onContextMenu, this);
this.$iscs.on('selected', this.onSelected, this);
this.$iscs.on('keyboard', this.onKeyboard, this);
@ -113,27 +101,36 @@ export default {
return false;
};
},
onUpdate(e) {
// 视图加载完成
onViewLoaded(e) {
},
// 键盘快捷键事件
onKeyboard(hook) {
console.log(hook);
},
// 点击选择事件
onSelected(em) {
this.selected = em;
console.log(em, 'selected');
onSelected(em={}) {
this.$emit('selected', em.model);
},
// 右键点击事件
onContextMenu(em) {
this.selected = em;
console.log(em, 'contextMenu');
onContextMenu(em={}) {
this.$emit('contextMenu', em.model);
},
// 执行操作
doAction(list) {
this.$iscs && this.$iscs.render(list);
},
// 消息处理
stateMessage(val) {
this.$iscs && this.$iscs.setDeviceStatus(val);
},
// 充值窗口大小
resize() {
this.$nextTick(() => {
this.$iscs && this.$iscs.resize({ width: this.width, height: this.height });
});
},
// 销毁
destroy() {
if (this.$iscs) {
this.$iscs.destroy();
@ -141,37 +138,6 @@ export default {
Vue.prototype.$iscs = null;
}
},
stateMessage(val) {
this.$iscs && this.$iscs.setDeviceStatus(val);
},
doAction(list) {
console.log(list, this.$iscs);
this.$iscs && this.$iscs.render(list);
},
// doRemove() {
// if (this.selected) {
// this.$iscs.render([
// {
// model: this.selected.model,
// action: { order: orders.DELETE, shapeType: shapeType.Compose }
// }
// ]);
// }
// },
// doUnbinding() {
// if (this.selected) {
// this.$iscs.render([
// {
// model: this.selected.model,
// action: { order: orders.UNBINDING, shapeType: shapeType.Compose }
// }
// ]);
// }
// },
// doSource() {
// console.log(this.$iscs.getSource());
// this.json = JSON.stringify(this.$iscs.getSource());
// }
}
};
</script>