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:
joylink_cuiweidong 2021-04-22 16:28:57 +08:00
parent c1356549ec
commit 85de91411e
5 changed files with 539 additions and 463 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

670
src/iscs_new/map.js
View File

@ -6,7 +6,7 @@ import Eventful from 'zrender/src/mixin/Eventful';
import Painter from './painter'; import Painter from './painter';
import Option from './option'; import Option from './option';
import Controller from './controller'; import Controller from './controller';
import StateHandle from './stateHandle'; import StateHandle from './stateHandle';
import ShapeFactory from './factory'; import ShapeFactory from './factory';
import orders from './utils/orders'; import orders from './utils/orders';
import shapeType from './constant/shapeType'; import shapeType from './constant/shapeType';
@ -14,393 +14,399 @@ import shapeType from './constant/shapeType';
const renderer = 'canvas'; const renderer = 'canvas';
const devicePixelRatio = 1; const devicePixelRatio = 1;
class JMap { class JMap {
constructor(opts) { constructor(opts) {
// 内部鼠标事件 // 内部鼠标事件
this.events = { this.events = {
__Pan: '__pan__', __Pan: '__pan__',
__Zoom: '__zoom__', __Zoom: '__zoom__',
__DragStart: '__dragStart__', __DragStart: '__dragStart__',
__Dragging: '__dragging__', __Dragging: '__dragging__',
__DragEnd: '__dragEnd__', __DragEnd: '__dragEnd__',
__SelectStart: '__selectStart__', __SelectStart: '__selectStart__',
__Selecting: '__selecting__', __Selecting: '__selecting__',
__SelectEnd: '__selectEnd__', __SelectEnd: '__selectEnd__',
__Selected: '__selected__', __Selected: '__selected__',
__Keyup: '__keyup__', __Keyup: '__keyup__',
__Keydown: '__keydown__' __Keydown: '__keydown__'
}; };
// 初始化Map实例 // 初始化Map实例
this.initMapInstance(opts); this.initMapInstance(opts);
} }
// 初始化属性有鼠标事件 缩放等 // 初始化属性有鼠标事件 缩放等
initMapInstance(opts) { initMapInstance(opts) {
const width = opts.dom.clientWidth; const width = opts.dom.clientWidth;
const height = opts.dom.clientHeight; const height = opts.dom.clientHeight;
const optionHandler = this.setOption.bind(this); const optionHandler = this.setOption.bind(this);
this.draw = opts.draw; this.draw = opts.draw;
// 实例化zr // 实例化zr
this.$zr = zrender.init(opts.dom, { renderer, devicePixelRatio, width, height, ...utils.deepClone(opts.config||{})}); this.$zr = zrender.init(opts.dom, { renderer, devicePixelRatio, width, height, ...utils.deepClone(opts.config || {})});
this.$zr.dom.setAttribute('tabIndex', -1); this.$zr.dom.setAttribute('tabIndex', -1);
this.$zr.dom.style.cursor = 'auto'; this.$zr.dom.style.cursor = 'auto';
// 实例化缩放偏移缩放参数 // 实例化缩放偏移缩放参数
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); }); // 缩放
// 实例化绘图模块 // 实例化绘图模块
this.$painter = new Painter(this); this.$painter = new Painter(this);
this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()}); this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()});
this.$painter.updateTransform(this.$option); this.$painter.updateTransform(this.$option);
// 实例化事件分发模块 // 实例化事件分发模块
this.$controller = new Controller(this); this.$controller = new Controller(this);
this.$controller.enable(); this.$controller.enable();
this.$controller.on(this.events.__Pan, optionHandler); this.$controller.on(this.events.__Pan, optionHandler);
this.$controller.on(this.events.__Zoom, optionHandler); this.$controller.on(this.events.__Zoom, optionHandler);
// 名声周期发射器 // 名声周期发射器
this.$eventEmitter = new Eventful({}); this.$eventEmitter = new Eventful({});
// 数据容器工厂 // 数据容器工厂
this.$shapeFactory = new ShapeFactory(this); this.$shapeFactory = new ShapeFactory(this);
// 状态处理器 // 状态处理器
this.$stateHandle = new StateHandle(this); this.$stateHandle = new StateHandle(this);
this.disable = function() { this.disable = function() {
this.off(this.events.Pan, optionHandler); this.off(this.events.Pan, optionHandler);
this.off(this.events.Zoom, optionHandler); this.off(this.events.Zoom, optionHandler);
}; };
// 加载插件 // 加载插件
this.plugins = opts.plugins||[]; this.plugins = opts.plugins || [];
this.plugins.forEach(el => { this.use(el); }); this.plugins.forEach(el => { this.use(el); });
} }
setMap(templates=[], source={}, eventOpts={}) { setMap(templates = [], source = {}, eventOpts = {}) {
// 清楚数据 // 清楚数据
this.$shapeFactory.clear(); this.$shapeFactory.clear();
this.$painter.clear(); this.$painter.clear();
// 绑定事件 // 绑定事件
this.$controller.enable(eventOpts); this.$controller.enable(eventOpts);
// 更新视图位置 // 更新视图位置
this.$painter.updateTransform(this.$option); this.$painter.updateTransform(this.$option);
// 解析模板 // 解析模板
this.$shapeFactory.parseTemplates(templates) this.$shapeFactory.parseTemplates(templates);
// 数据加载完成 回调 // 数据加载完成 回调
this.$eventEmitter.trigger(events.DataLoaded); this.$eventEmitter.trigger(events.DataLoaded);
// 初次渲染视图 // 初次渲染视图
this.repaint(source); this.repaint(source);
// 设置默认状态 // 设置默认状态
this.setDefaultState(); this.setDefaultState();
// 视图加载完成 回调 // 视图加载完成 回调
this.$eventEmitter.trigger(events.ViewLoaded); this.$eventEmitter.trigger(events.ViewLoaded);
// 返回视图缩放偏移 // 返回视图缩放偏移
this.$option.notice(this.$option); this.$option.notice(this.$option);
return this; return this;
} }
setDefaultState() { setDefaultState() {
this.$eventEmitter.trigger(events.StateLoaded); this.$eventEmitter.trigger(events.StateLoaded);
return this; return this;
} }
setOption(opts={}) { setOption(opts = {}) {
this.$option.update(opts.type == this.events.__Zoom? pullBack(this.$zr, this.$option, opts):opts); this.$option.update(opts.type == this.events.__Zoom ? pullBack(this.$zr, this.$option, opts) : opts);
this.$painter.updateTransform(this.$option); this.$painter.updateTransform(this.$option);
this.$controller.disable(); this.$controller.disable();
this.$controller.enable(); this.$controller.enable();
this.$eventEmitter.trigger(events.OptionUpdate); this.$eventEmitter.trigger(events.OptionUpdate);
return this; return this;
} }
setCenter(code) { setCenter(code) {
const shape = this.$shapeFactory.getShapeByCode(code); const shape = this.$shapeFactory.getShapeByCode(code);
if (shape && shape) { if (shape && shape) {
var rect = utils.createBoundingRect(shape); var rect = utils.createBoundingRect(shape);
var center = utils.calculateDCenter(rect, { width: this.$zr.getWidth(), height: this.$zr.getHeight() }); var center = utils.calculateDCenter(rect, { width: this.$zr.getWidth(), height: this.$zr.getHeight() });
this.setOption(center); this.setOption(center);
} }
return this; return this;
} }
setBackgroundColor(color) { setBackgroundColor(color) {
this.$zr.setBackgroundColor(color); this.$zr.setBackgroundColor(color);
return this; return this;
} }
setCursorStyle(cursorStyle='auto') { setCursorStyle(cursorStyle = 'auto') {
this.$zr.setCursorStyle(cursorStyle); this.$zr.setCursorStyle(cursorStyle);
return this; return this;
} }
repaint(source={}) { repaint(source = {}) {
this.$shapeFactory.parse(source, shape => { this.$shapeFactory.parse(source, shape => {
if (shape) { if (shape) {
this.$painter.add(shape) this.$painter.add(shape);
} }
}); });
return this; return this;
} }
render(list=[]) { render(list = []) {
list.forEach(({model, action}) => { list.forEach(({model, action}) => {
let updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(model, action): model; let updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(model, action) : model;
let curShape = this.$shapeFactory.getShapeByCode(updateModel.code); let curShape = this.$shapeFactory.getShapeByCode(updateModel.code);
let deps = null; let deps = null;
let oldShape = null let oldShape = null;
let newShape = null; let newShape = null;
if (updateModel) { if (updateModel) {
this.$controller.clear(); this.$controller.clear();
switch(action.order) { switch (action.order) {
case orders.Binding: case orders.Binding:
case orders.Add: case orders.Add:
newShape = this.$shapeFactory.createShape(updateModel, action.shapeType); newShape = this.$shapeFactory.createShape(updateModel, action.shapeType);
this.$shapeFactory.addShape(newShape) this.$shapeFactory.addShape(newShape);
this.$painter.add(newShape); this.$painter.add(newShape);
break; break;
case orders.Delete: case orders.Delete:
deps = curShape.getDepShapes(); deps = curShape.getDepShapes();
deps.forEach(el => { deps.forEach(el => {
updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(el, {...action, shapeType: el.shapeType}): el; updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(el, {...action, shapeType: el.shapeType}) : el;
if (updateModel) { if (updateModel) {
curShape = this.$shapeFactory.getShapeByCode(updateModel.code); curShape = this.$shapeFactory.getShapeByCode(updateModel.code);
oldShape = this.$shapeFactory.removeShape(curShape); oldShape = this.$shapeFactory.removeShape(curShape);
this.$painter.remove(oldShape); this.$painter.remove(oldShape);
} }
}); });
break; break;
case orders.Update: case orders.Update:
oldShape = this.$shapeFactory.removeShape(curShape); oldShape = this.$shapeFactory.removeShape(curShape);
this.$painter.remove(oldShape); this.$painter.remove(oldShape);
newShape = this.$shapeFactory.createShape(updateModel, action.shapeType); newShape = this.$shapeFactory.createShape(updateModel, action.shapeType);
this.$shapeFactory.addShape(newShape) this.$shapeFactory.addShape(newShape);
this.$painter.add(newShape); this.$painter.add(newShape);
break; break;
case orders.Unbinding: case orders.Unbinding:
oldShape = this.$shapeFactory.removeShape(curShape); oldShape = this.$shapeFactory.removeShape(curShape);
this.$painter.remove(oldShape); this.$painter.remove(oldShape);
this.$shapeFactory.addShape(oldShape); this.$shapeFactory.addShape(oldShape);
this.$painter.add(oldShape); this.$painter.add(oldShape);
break; break;
} case orders.changeStatus:
} debugger;
}); break;
case orders.ResetStatus:
debugger;
break;
}
}
});
this.$eventEmitter.trigger(events.ViewUpdate, list); this.$eventEmitter.trigger(events.ViewUpdate, list);
return this; return this;
} }
update(list=[]) { update(list = []) {
this.$painter.update(this.$stateHandle.update(this.$shapeFactory, list)); this.$painter.update(this.$stateHandle.update(this.$shapeFactory, list));
this.$eventEmitter.trigger(events.StateUpdate, list); this.$eventEmitter.trigger(events.StateUpdate, list);
return this; return this;
} }
getEvents() { getEvents() {
return this.events; return this.events;
} }
getZr() { getZr() {
return this.$zr; return this.$zr;
} }
getOption() { getOption() {
return this.$option; return this.$option;
} }
getPainter() { getPainter() {
return this.$painter; return this.$painter;
} }
getController() { getController() {
return this.$controller; return this.$controller;
} }
getStorage() { getStorage() {
return this.$controller.getStorage(); return this.$controller.getStorage();
} }
getShapeFactory() { getShapeFactory() {
return this.$shapeFactory; return this.$shapeFactory;
} }
getShapeByCode(code) { getShapeByCode(code) {
return this.$shapeFactory.getShapeByCode(code); return this.$shapeFactory.getShapeByCode(code);
} }
getSource() { getSource() {
return this.$shapeFactory.getSource(); return this.$shapeFactory.getSource();
} }
getMapShape() { getMapShape() {
return this.$shapeFactory.getMapShape(); return this.$shapeFactory.getMapShape();
} }
getMapTemplate() { getMapTemplate() {
return this.$shapeFactory.getMapTemplate(); return this.$shapeFactory.getMapTemplate();
} }
resize(opt) { resize(opt) {
this.$zr.resize(opt); this.$zr.resize(opt);
this.$painter.updateZrSize(opt); this.$painter.updateZrSize(opt);
} }
refresh() { refresh() {
this.$painter.refresh(); this.$painter.refresh();
} }
isDrawing() { isDrawing() {
return this.draw; return this.draw;
} }
clear() { clear() {
this.$shapeFactory.clear(); this.$shapeFactory.clear();
this.$controller.clear(); this.$controller.clear();
this.$painter.clear(); this.$painter.clear();
this.$zr.refresh() this.$zr.refresh();
} }
use(el) { use(el) {
this.plugins.includes(el)||this.plugins.push(el) this.plugins.includes(el) || this.plugins.push(el);
el.install(this); el.install(this);
} }
destroy() { destroy() {
this.disable(); this.disable();
this.clear(); this.clear();
this.$shapeFactory.destroy(); this.$shapeFactory.destroy();
this.$controller.destroy(); this.$controller.destroy();
this.$painter.destroy(); this.$painter.destroy();
this.$zr && this.$zr.dispose(); this.$zr && this.$zr.dispose();
this.plugins.forEach(el => { this.plugins.forEach(el => {
el.uninstall(this); el.uninstall(this);
}) });
this.plugins = []; this.plugins = [];
} }
on(name, cb, context) { on(name, cb, context) {
const idx = Object.values(events).indexOf(name); const idx = Object.values(events).indexOf(name);
if (idx >= 0) { if (idx >= 0) {
switch (name) { switch (name) {
case events.DataLoaded: case events.DataLoaded:
this.$eventEmitter.on(events.DataLoaded, cb, context); this.$eventEmitter.on(events.DataLoaded, cb, context);
break; break;
case events.ViewLoaded: case events.ViewLoaded:
this.$eventEmitter.on(events.ViewLoaded, cb, context); this.$eventEmitter.on(events.ViewLoaded, cb, context);
break; break;
case events.StateLoaded: case events.StateLoaded:
this.$eventEmitter.on(events.StateLoaded, cb, context); this.$eventEmitter.on(events.StateLoaded, cb, context);
break; break;
case events.ViewUpdate: case events.ViewUpdate:
this.$eventEmitter.on(events.ViewUpdate, cb, context); this.$eventEmitter.on(events.ViewUpdate, cb, context);
break; break;
case events.StateUpdate: case events.StateUpdate:
this.$eventEmitter.on(events.StateUpdate, cb, context); this.$eventEmitter.on(events.StateUpdate, cb, context);
break; break;
case events.OptionUpdate: case events.OptionUpdate:
this.$eventEmitter.on(events.OptionUpdate, cb, context); this.$eventEmitter.on(events.OptionUpdate, cb, context);
break; break;
case events.Click: case events.Click:
this.$controller.on(events.Click, cb, context); this.$controller.on(events.Click, cb, context);
break; break;
case events.ContextMenu: case events.ContextMenu:
this.$controller.on(events.ContextMenu, cb, context); this.$controller.on(events.ContextMenu, cb, context);
break; break;
case events.Reflect: case events.Reflect:
this.$controller.on(events.Reflect, _.throttle(cb, 200), context); this.$controller.on(events.Reflect, _.throttle(cb, 200), context);
break; break;
case events.DataZoom: case events.DataZoom:
this.$controller.on(events.DataZoom, cb, context); this.$controller.on(events.DataZoom, cb, context);
break; break;
case events.Keydown: case events.Keydown:
this.$controller.on(events.Keydown, cb, context); this.$controller.on(events.Keydown, cb, context);
break; break;
case events.Keypress: case events.Keypress:
this.$controller.on(events.Keypress, cb, context); this.$controller.on(events.Keypress, cb, context);
break; break;
case events.Keyup: case events.Keyup:
this.$controller.on(events.Keyup, cb, context); this.$controller.on(events.Keyup, cb, context);
break; break;
} }
} }
} }
off(name, cb) { off(name, cb) {
const idx = Object.values(events).indexOf(name); const idx = Object.values(events).indexOf(name);
if (idx >= 0) { if (idx >= 0) {
switch (name) { switch (name) {
case events.DataLoaded: case events.DataLoaded:
this.$eventEmitter.off(events.DataLoaded, cb, context); this.$eventEmitter.off(events.DataLoaded, cb, context);
break; break;
case events.ViewLoaded: case events.ViewLoaded:
this.$eventEmitter.off(events.ViewLoaded, cb, context); this.$eventEmitter.off(events.ViewLoaded, cb, context);
break; break;
case events.StateLoaded: case events.StateLoaded:
this.$eventEmitter.off(events.StateLoaded, cb, context); this.$eventEmitter.off(events.StateLoaded, cb, context);
break; break;
case events.ViewUpdate: case events.ViewUpdate:
this.$eventEmitter.off(events.ViewUpdate, cb, context); this.$eventEmitter.off(events.ViewUpdate, cb, context);
break; break;
case events.StateUpdate: case events.StateUpdate:
this.$eventEmitter.off(events.StateUpdate, cb, context); this.$eventEmitter.off(events.StateUpdate, cb, context);
break; break;
case events.OptionUpdate: case events.OptionUpdate:
this.$eventEmitter.off(events.OptionUpdate, cb, context); this.$eventEmitter.off(events.OptionUpdate, cb, context);
break; break;
case events.Click: case events.Click:
this.$controller.off(events.Click, cb); this.$controller.off(events.Click, cb);
break; break;
case events.ContextMenu: case events.ContextMenu:
this.$controller.off(events.ContextMenu, cb); this.$controller.off(events.ContextMenu, cb);
break; break;
case events.Reflect: case events.Reflect:
this.$controller.off(events.Reflect, _.throttle(cb, 200)); this.$controller.off(events.Reflect, _.throttle(cb, 200));
break; break;
case events.DataZoom: case events.DataZoom:
this.$controller.off(events.DataZoom, cb); this.$controller.off(events.DataZoom, cb);
break; break;
case events.Keydown: case events.Keydown:
this.$controller.off(events.Keydown, cb); this.$controller.off(events.Keydown, cb);
break; break;
case events.Keypress: case events.Keypress:
this.$controller.off(events.Keypress, cb); this.$controller.off(events.Keypress, cb);
break; break;
case events.Keyup: case events.Keyup:
this.$controller.off(events.Keyup, cb); this.$controller.off(events.Keyup, cb);
break; break;
} }
} }
} }
} }
function pullBack(zr, option={}, payload={}) { function pullBack(zr, option = {}, payload = {}) {
const zrWidth = zr.getWidth(); const zrWidth = zr.getWidth();
const zrHeight = zr.getHeight(); const zrHeight = zr.getHeight();
const originX = payload.originX || zrWidth / 2; const originX = payload.originX || zrWidth / 2;
const originY = payload.originY || zrHeight / 2; const originY = payload.originY || zrHeight / 2;
const x = (option.offsetX + originX) / option.scaleRate; const x = (option.offsetX + originX) / option.scaleRate;
const y = (option.offsetY + originY) / option.scaleRate; const y = (option.offsetY + originY) / option.scaleRate;
const newScaleRate = option.getScaleRate(payload.scale); const newScaleRate = option.getScaleRate(payload.scale);
const dx = originX - (x * newScaleRate - option.offsetX); const dx = originX - (x * newScaleRate - option.offsetX);
const dy = originY - (y * newScaleRate - option.offsetY); const dy = originY - (y * newScaleRate - option.offsetY);
return {...payload, dx, dy}; return {...payload, dx, dy};
} }
export default JMap; export default JMap;

14
src/iscs_new/utils/orders.js
View File

@ -1,7 +1,9 @@
export default { export default {
Add: '&Add', Add: '&Add',
Delete: '&DEL', Delete: '&DEL',
Update: '&UPT', Update: '&UPT',
Binding: '&Binding', Binding: '&Binding',
Unbinding: '&Unbinding', Unbinding: '&Unbinding',
} ChangeStatus:'&ChangeStatus',
ResetStatus:'&ResetStatus'
};

38
src/views/iscs_new/iscsDraw/statusList.vue
View File

@ -66,7 +66,7 @@
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="success" size="mini" @click="modifyStatus(scope.$index,scope.row)">编辑状态组合</el-button> <el-button type="success" size="mini" @click="modifyStatus(scope.$index,scope.row)">编辑状态组合</el-button>
<el-button type="danger" size="mini" style="margin-top:5px;" @click="deleteStatus(scope.$index,scope.row)">删除</el-button> <el-button type="danger" size="mini" style="margin-top:5px;" @click="deleteStatus(scope.$index,scope.row)">删除</el-button>
<el-button type="primary" size="mini" style="margin-top:5px;" @click="previewStatus(scope.$index,scope.row)">预览</el-button> <!-- <el-button type="primary" size="mini" style="margin-top:5px;" @click="previewStatus(scope.$index,scope.row)">预览</el-button> -->
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -333,25 +333,25 @@ export default {
}); });
} }
},
previewStatus(index, row) {
// const that = this;
// if(needDefault)
const list = Object.values(row.covertStatusList);
list.forEach(each=>{
if (each.loop) {
} else {
const frameList = each.frameList;
frameList.forEach(frame=>{
// frame.name;
// frame.status;
// this.$iscs.
});
}
});
// this.show = false;
} }
// previewStatus(index, row) {
// // const that = this;
// // if(needDefault)
// const list = Object.values(row.covertStatusList);
// list.forEach(each=>{
// if (each.loop) {
// } else {
// const frameList = each.frameList;
// frameList.forEach(frame=>{
// // frame.name;
// // frame.status;
// // this.$iscs.
// });
// }
// });
// // this.show = false;
// }
} }
}; };
</script> </script>

172
src/views/iscs_new/iscsPreview/index.vue
View File

@ -2,22 +2,37 @@
<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" @selected="onSelected" /> <iscs-canvas ref="iscsCanvas" @selected="onSelected" @setData="setData" />
</div> </div>
<div class="right-card"> <div class="right-card">
<!-- :class="{'hide': draftShow}" --> <!-- :class="{'hide': draftShow}" -->
<el-card type="border-card" class="heightClass"> <el-card type="border-card" class="heightClass">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<!-- 组件id为{{ $route.query.id }} --> <!-- 组件id为{{ $route.query.id }} -->
状态编辑 状态预览
<!-- -->
<el-button
type="text"
style="float: right; padding: 3px 0; margin-right: 5px;"
@click="resetDefaultStatus"
>重置状态</el-button>
</div> </div>
<div class="stateList"> <div class="stateList">
<el-tabs v-model="statusTab" class="card" type="card" @tab-click="onSelectTab"> <!-- <el-card style="margin-top:10px;height:100%"> -->
<el-tab-pane v-for="(composeElem,index) in composeElemList" :key="index" :label="composeElem.name" :name="composeElem.code" :lazy="true"> <div v-for="(state,index) in stateList" :key="index" class="eachStatus">
<!-- <table-form :ref="'tableform'+composeElem.code" :compose-elem="composeElem" /> --> <div>状态属性：{{ state.status }}</div>
<!-- stateList --> <div>状态描述：{{ state.description }}</div>
</el-tab-pane> <div>状态权重：{{ state.weight }}</div>
</el-tabs> <div>状态是否可以初始化：{{ state.needDefault?'是':'否' }}</div>
<el-button type="primary" size="mini" style="margin-top:5px;" @click="previewStatus(state)">预览</el-button>
</div>
<!-- </el-card> -->
<!-- <el-tabs v-model="statusTab" class="card" type="card" @tab-click="onSelectTab"> -->
<!-- <el-tab-pane v-for="(composeElem,index) in composeElemList" :key="index" :label="composeElem.name" :name="composeElem.code" :lazy="true"> -->
<!-- <table-form :ref="'tableform'+composeElem.code" :compose-elem="composeElem" /> -->
<!-- stateList -->
<!-- </el-tab-pane> -->
<!-- </el-tabs> -->
</div> </div>
</el-card> </el-card>
</div> </div>
@ -25,8 +40,10 @@
</transition> </transition>
</template> </template>
<script> <script>
import * as utils from '@/iscs_new/utils/utils';
import iscsCanvas from './iscsCanvas'; import iscsCanvas from './iscsCanvas';
import { EventBus } from '@/scripts/event-bus'; import orders from '@/iscs_new/utils/orders';
import shapeType from '@/iscs_new/constant/shapeType.js';
export default { export default {
name:'IscsPreview', name:'IscsPreview',
components: { components: {
@ -37,62 +54,113 @@ export default {
draftShow: false, draftShow: false,
selected: null, selected: null,
statusTab:'', statusTab:'',
composeElemList:[] stateList:[],
elementList:[]
}; };
}, },
mounted() { mounted() {
EventBus.$on('getComposeElemList', () => {
this.getComposeElemList();
});
}, },
methods:{ methods:{
onSelectTab() { onSelectTab() {
}, },
getComposeElemList() { setData(data ) {
const source = this.$iscs.getSource(); this.stateList = data.stateList;
if (source && this.elementList = utils.deepClone(data.shapeList);
source.elementList &&
source.elementList.length) {
this.composeElemList = source.elementList;
this.statusTab = this.composeElemList[0].code;
} else {
this.composeElemList = [];
}
}, },
previewStatus(data) {
this.resetDefaultStatus();
const that = this;
const list = Object.values(data.covertStatusList);
list.forEach(each=>{
if (each.loop) {
debugger;
// ChangeStatus
} else {
const frameList = each.frameList;
frameList.forEach(frame=>{
const element = that.elementList.find(ele=>{ return ele.name == frame.name; });
if (element) {
const elementStyle = element.stateList.find(state=>{ return state.status == frame.status; });
if (elementStyle) {
const model = utils.deepClone(element);
const style = elementStyle.style || {};
// model.changeStyle =
// if (style && JSON.stringify(style) != '{}') {
// const keys = Object.keys(style);
// keys.forEach(eachKey=>{
// model.style[eachKey] = style[eachKey];
// });
// }
const shape = elementStyle.shape || {};
// if (shape && JSON.stringify(shape) != '{}') {
// const keys = Object.keys(shape);
// keys.forEach(eachShape=>{
// model.shape[eachShape] = style[eachShape];
// });
// }
// this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.ChangeStatus}}]);
}
}
});
}
});
},
resetDefaultStatus() {
this.elementList.forEach(element=>{
const model = utils.deepClone(element);
// this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.ResetStatus}}]);
});
},
// getComposeElemList() {
// const source = this.$iscs.getSource();
// if (source &&
// source.elementList &&
// source.elementList.length) {
// this.composeElemList = source.elementList;
// this.statusTab = this.composeElemList[0].code;
// } else {
// this.composeElemList = [];
// }
// },
onSelected(em) { onSelected(em) {
// if (em.model) {
// this.selected = JSON.parse(JSON.stringify(em.model));
// const elem = this.elementList.find(el => el.type == this.selected.type);
// if (elem) {
// elem.model = this.selected;
// this.enabledTab = this.selected.type;
// this.cardTab = 'first';
// }
// } else {
// this.selected = null;
// this.clear(this.enabledTab);
// }
} }
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.mapPaint{ .mapPaint{
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
width:100%; width:100%;
position:absolute; position:absolute;
left:0;top:0; left:0;top:0;
} }
.right-card{ .right-card{
width: 500px; width: 500px;
height: 100%; height: 100%;
position: absolute; position: absolute;
right: 0; right: 0;
top:0; top:0;
transition: all 0.5s; transition: all 0.5s;
background: #fff; background: #fff;
z-index: 9; z-index: 9;
} }
.heightClass{height:100%;overflow:hidden;display:flex;width: 100%;flex-direction: column;}
.eachStatus{
padding: 15px 30px;
border-bottom: 1px #ccc solid;
line-height: 150%;
}
.statelist{
height: 100%;
overflow: auto;
}
</style>
<style lang="scss">
.heightClass .el-card__body{
flex:1;
height: 100%;
overflow: hidden;
}
</style> </style>

108
src/views/iscs_new/iscsPreview/iscsCanvas.vue
View File

@ -63,7 +63,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;
@ -82,55 +82,55 @@ export default {
offsetX: 0, offsetX: 0,
offsetY: 0 offsetY: 0
}, },
plugins: [ plugins: [
// ShapeBuilder, // ShapeBuilder,
// ShapeProperty, // ShapeProperty,
// ShapeContextMenu // ShapeContextMenu
] ]
}); });
const option = { const option = {
panEnable: true, panEnable: true,
zoomEnable: true, zoomEnable: true,
keyEnable: true, keyEnable: true,
draggle: false, draggle: false,
selecting: false, selecting: false,
selectable: false, selectable: false,
reflect: true reflect: true
} };
if (this.$route.query.id) { if (this.$route.query.id) {
setTimeout(_ => { setTimeout(_ => {
Idb.select('composeList', this.$route.query.id).then(resp => { Idb.select('composeTemplateList', this.$route.query.id).then(resp => {
this.$iscs.setMap([], { this.$iscs.setMap([], {
elementList: resp.elementList||[], elementList: resp.shapeList || [],
composeList: resp.composeList||[] composeList: resp.composeList || []
}, option); }, option);
EventBus.$emit('getComposeElemList'); this.$emit('setData', resp);
}).catch(error => { }).catch(error => {
this.$iscs.setMap([], { this.$iscs.setMap([], {
elementList: [], elementList: [],
composeList: [] composeList: []
}, option); }, option);
}) });
}, 1000) }, 1000);
} else { } else {
this.$iscs.setMap([], { this.$iscs.setMap([], {
elementList: [], elementList: [],
composeList: [] composeList: []
}, option); }, option);
} }
Vue.prototype.$iscs = this.$iscs; Vue.prototype.$iscs = this.$iscs;
this.$iscs.on('viewLoaded', this.onViewLoaded, 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('click', this.onClick, this); // this.$iscs.on('click', this.onClick, this);
this.$iscs.on('reflect', this.onReflect, this); this.$iscs.on('reflect', this.onReflect, this);
this.$iscs.on('keyboard', this.onKeyboard, this); this.$iscs.on('keyboard', this.onKeyboard, this);
window.document.oncontextmenu = function () { window.document.oncontextmenu = function () {
return false; return false;
}; };
}, },
// 视图加载完成 // 视图加载完成
onViewLoaded(e) { onViewLoaded(e) {
}, },
// 键盘快捷键事件 // 键盘快捷键事件
@ -138,38 +138,38 @@ export default {
console.log(hook); console.log(hook);
}, },
// 点击选择事件 // 点击选择事件
onClick(em={}) { onClick(em = {}) {
this.$emit('selected', em); this.$emit('selected', em);
},
onReflect(em = {}) {
this.$emit('selected', this.$iscs.getShapeByCode(em.code));
}, },
onReflect(em={}) {
this.$emit('selected', this.$iscs.getShapeByCode(em.code));
},
// 右键点击事件 // 右键点击事件
onContextMenu(em={}) { onContextMenu(em = {}) {
this.$emit('contextMenu', em.model); this.$emit('contextMenu', em.model);
}, },
// 执行操作 // 执行操作
doAction(list) { doAction(list) {
this.$iscs && this.$iscs.render(list); this.$iscs && this.$iscs.render(list);
}, },
// 消息处理 // 消息处理
stateMessage(val) { stateMessage(val) {
this.$iscs && this.$iscs.setDeviceStatus(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();
this.$iscs = null; this.$iscs = null;
Vue.prototype.$iscs = null; Vue.prototype.$iscs = null;
} }
}, }
} }
}; };
</script> </script>