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

Merge branch 'iscs' of https://git.code.tencent.com/lian-cbtc/jl-client into iscs

Browse Source 
# Conflicts:
#	src/iscs_new/core/form/form2Base.js
This commit is contained in:
joylink_cuiweidong 2021-04-08 11:22:37 +08:00
commit 73caf6074b
10 changed files with 151 additions and 187 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; 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) { if (shape.subType) {

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

@ -10,6 +10,7 @@ function shapeStyleBuilder({subType, model}) {
subType: subType, subType: subType,
...shapeRender, ...shapeRender,
code: model.code, code: model.code,
type: model.type,
z: 9998, z: 9998,
cursor: 'pointer', cursor: 'pointer',
shape: { shape: {
@ -39,15 +40,19 @@ class AbstractShape extends Group {
// 拖动 // 拖动
drift({dx, dy}) { drift({dx, dy}) {
this.model.position[0] = this.model.position[0] + dx; this.model.base.position[0] = this.model.base.position[0] + dx;
this.model.position[1] = this.model.position[1] + dy; this.model.base.position[1] = this.model.base.position[1] + dy;
this.instance.origin = utils.createOrigin(this.instance); 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) { attr(attrs) {
if (this.instance) {
this.instance.attr(attrs); this.instance.attr(attrs);
} else {
super.attr(attrs);
}
} }
// 设置显隐 // 设置显隐

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

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

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

@ -67,5 +67,19 @@ export default [
], ],
value: [1, 1], value: [1, 1],
description: '控制图形的缩放。' 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({ this.instance = new Group({
...shapeRender, ...shapeRender,
...this.model, ...this.model.base,
code: this.model.code,
type: this.model.type,
shape: {...this.model.shape},
style: {...this.model.style},
onmouseover, onmouseover,
onmousemove, onmousemove,
onmouseout onmouseout
@ -42,11 +46,11 @@ class Compose extends AbstractShape {
this.instance.add(el); this.instance.add(el);
} }
}) })
this.instance.scale = this.model.scale; this.instance.scale = this.model.base.scale;
this.instance.rotation = this.model.rotation; this.instance.position = this.model.base.position;
this.instance.position = this.model.position; this.instance.rotation = this.model.base.rotation*Math.PI/180;
this.instance.origin = utils.createOrigin(this.instance); 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.add(this.instance);
this.setInvisible(this.model.sightless) this.setInvisible(this.model.sightless)
} }
@ -77,7 +81,7 @@ class Compose extends AbstractShape {
el.model) { el.model) {
this.shapeFactory.removeFromLayer(el.type)(el); this.shapeFactory.removeFromLayer(el.type)(el);
this.instance.add(el); this.instance.add(el);
el.model.composeCode = this.model.code; el.model.composeCode = this.type;
el.attr(el.model); el.attr(el.model);
} }
}) })

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

@ -13,7 +13,7 @@ class Element extends AbstractShape {
create() { create() {
const that = this; const that = this;
const elementBuilder = graphic[this.model.type]; const elementBuilder = graphic[this.type];
if (elementBuilder) { if (elementBuilder) {
// mouse进入事件 // mouse进入事件
function onmouseover(e) { function onmouseover(e) {
@ -32,17 +32,21 @@ class Element extends AbstractShape {
this.instance = new elementBuilder({ this.instance = new elementBuilder({
...shapeRender, ...shapeRender,
...this.model, ...this.model.base,
code: this.model.code,
type: this.model.type,
shape: {...this.model.shape},
style: {...this.model.style},
onmouseover, onmouseover,
onmousemove, onmousemove,
onmouseout onmouseout
}); });
this.instance.scale = this.model.scale; this.instance.scale = this.model.base.scale;
this.instance.rotation = this.model.rotation; this.instance.position = this.model.base.position;
this.instance.position = this.model.position; this.instance.rotation = this.model.base.rotation*Math.PI/180;
this.instance.origin = utils.createOrigin(this.instance); 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.add(this.instance);
this.setInvisible(this.model.sightless) this.setInvisible(this.model.sightless)
} }
@ -72,9 +76,9 @@ class Element extends AbstractShape {
if (compose && if (compose &&
compose.model && compose.model &&
compose.model.elementCodes) { compose.model.elementCodes) {
const index = compose.model.elementCodes.findIndex(this.model.code); const index = compose.model.elementCodes.findIndex(this.type);
if (index < 0) { if (index < 0) {
compose.model.elementCodes.push(this.model.code); compose.model.elementCodes.push(this.type);
this.shapeFactory.removeFormLayer(el.type, this); this.shapeFactory.removeFormLayer(el.type, this);
compose.add(this); compose.add(this);
} }
@ -89,7 +93,7 @@ class Element extends AbstractShape {
if (compose && if (compose &&
compose.model && compose.model &&
compose.model.elementCodes) { compose.model.elementCodes) {
const index = compose.model.elementCodes.findIndex(this.model.code); const index = compose.model.elementCodes.findIndex(this.type);
if (index >= 0) { if (index >= 0) {
compose.model.elementCodes.splice(index, 1); compose.model.elementCodes.splice(index, 1);
compose.remove(this); 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.setAttribute('tabIndex', -1);
this.$zr.dom.style.cursor = 'auto'; 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); }); // 缩放 this.$option = new Option({ scaleRate: 1, offsetX: 0, offsetY: 0, ...utils.deepClone(opts.option||{})}, (dataZoom) => { this.$controller.trigger(events.DataZoom, dataZoom); }); // 缩放

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

@ -107,12 +107,12 @@ export default {
}; };
}, },
mounted() {
},
methods: { methods: {
checkFieldType(field, type) { checkFieldType(field, type) {
return field.type === type; return field.type === type;
}, },
init() {
},
changeNumber(type, index, form, prop) { changeNumber(type, index, form, prop) {
if (form[prop][index][type] == undefined || parseFloat(form[prop][index][type])) { if (form[prop][index][type] == undefined || parseFloat(form[prop][index][type])) {
const newForm = Object.assign([], form[prop]); const newForm = Object.assign([], form[prop]);

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

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

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

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