iscs 新版预览界面调整
This commit is contained in:
joylink_cuiweidong
parent
624b06fe85
commit
00359591b5
@ -4,7 +4,6 @@ import ELimitLines from './ELimitLines'; // 区段限速 (私有)
|
||||
import ELines from './ELines'; // 创建多线条 曲线 (私有)
|
||||
import EblockLines from './EblockLines'; // 区段封锁特有
|
||||
import ESeparator from './ESeparator'; // 分隔符 (私有)
|
||||
import EDerailer from './EDerailer'; // 脱轨器
|
||||
import EMouse from './EMouse';
|
||||
import EAxle from './EAxle'; // 创建计轴
|
||||
// import { EBackArrow, EBackArrowTriangle } from './EBackArrow'; // 折返进路箭头
|
||||
@ -62,8 +61,7 @@ export default class Section extends Group {
|
||||
'separator': ESeparator, // 分隔符
|
||||
'speedLimit': ELimitLines, // 限速线
|
||||
'speedLimitName': ELimitName, // 限速线名称
|
||||
'shuttleBack': EBackArrowGroup, // 折返箭头 (成都三号线显示)
|
||||
'derailer': EDerailer, //脱轨器
|
||||
'shuttleBack': EBackArrowGroup // 折返箭头 (成都三号线显示)
|
||||
};
|
||||
// 遍历当前线路下的绘图元素
|
||||
const model = this.model;
|
||||
|
||||
@ -62,6 +62,8 @@ const IscsStationConfig = () => import('@/views/iscs/iscsSystem/stationConfig/in
|
||||
|
||||
const IscsNewDesign = () => import('@/views/iscs_new/iscsDesign/index');
|
||||
const IscsNewDraw = () => import('@/views/iscs_new/iscsDraw/index');
|
||||
const IscsNewPreview = () => import('@/views/iscs_new/iscsPreview/index');
|
||||
|
||||
|
||||
const NewMapDraft = () => import('@/views/newMap/newMapdraft/index');
|
||||
const NewDesignPlatformUser = () => import('@/views/newMap/newDesignUser/index');
|
||||
@ -225,6 +227,15 @@ export const constantRoutes = [
|
||||
i18n: 'router.iscsDraw',
|
||||
roles: [admin]
|
||||
}
|
||||
},
|
||||
{
|
||||
path:'/iscs_new/design/compose/preview',
|
||||
hidden: true,
|
||||
component: IscsNewPreview,
|
||||
meta: {
|
||||
i18n: 'router.iscsDraw',
|
||||
roles: [admin]
|
||||
}
|
||||
},
|
||||
{
|
||||
path:'/iscs_new/design/map/edit',
|
||||
|
||||
@ -13,6 +13,12 @@
|
||||
style="float: right; padding: 3px 0; margin-right: 5px;"
|
||||
@click="onSave"
|
||||
>保存</el-button>
|
||||
<el-button
|
||||
v-if=" composeElemList.length>0"
|
||||
type="text"
|
||||
style="float: right; padding: 3px 0; margin-right: 5px;"
|
||||
@click="onPreview"
|
||||
>预览</el-button>
|
||||
</div>
|
||||
<el-tabs id="cardTab" v-model="cardTab" class="card" type="border-card" @tab-click="onSelectCardTab">
|
||||
<el-tab-pane label="元素绘制" name="first">
|
||||
@ -200,18 +206,21 @@ export default {
|
||||
this.composeElemList = source.elementList;
|
||||
this.statusTab = this.composeElemList[0].code;
|
||||
} else {
|
||||
this.composeElemList = [];
|
||||
}
|
||||
this.composeElemList = [];
|
||||
}
|
||||
},
|
||||
onSaveStatus() {
|
||||
this.$refs['tableform' + this.statusTab][0].$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
const model = utils.deepClone(this.$refs['tableform' + this.statusTab][0].formModel);
|
||||
const model = utils.deepClone(this.$refs['tableform' + this.statusTab][0].formModel);
|
||||
model.stateList.map(state=>{ delete state.defaultStyleSelect; delete state.defaultShapeSelect; });
|
||||
this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.Update}}]);
|
||||
this.onSave();
|
||||
}
|
||||
});
|
||||
},
|
||||
onPreview() {
|
||||
this.$router.push({ path: `/iscs_new/design/compose/preview`, query:{id:this.$route.query.id} });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
102
src/views/iscs_new/iscsPreview/index.vue
Normal file
102
src/views/iscs_new/iscsPreview/index.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<transition name="el-zoom-in-center">
|
||||
<div class="mapPaint">
|
||||
<div class="map-view">
|
||||
<iscs-canvas ref="iscsCanvas" @selected="onSelected" />
|
||||
</div>
|
||||
<div class="right-card">
|
||||
<!-- :class="{'hide': draftShow}" -->
|
||||
<el-card type="border-card" class="heightClass">
|
||||
<div slot="header" class="clearfix">
|
||||
<!-- 组件id为{{ $route.query.id }} -->
|
||||
状态预览
|
||||
</div>
|
||||
<div class="stateList">
|
||||
<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-table>
|
||||
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
import iscsCanvas from './iscsCanvas';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
export default {
|
||||
name:'IscsPreview',
|
||||
components: {
|
||||
iscsCanvas
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
draftShow: false,
|
||||
selected: null,
|
||||
statusTab:'',
|
||||
composeElemList:[]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
EventBus.$on('getComposeElemList', () => {
|
||||
this.getComposeElemList();
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
onSelectTab() {
|
||||
|
||||
},
|
||||
getComposeElemList() {
|
||||
const source = this.$iscs.getSource();
|
||||
if (source &&
|
||||
source.elementList &&
|
||||
source.elementList.length) {
|
||||
this.composeElemList = source.elementList;
|
||||
this.statusTab = this.composeElemList[0].code;
|
||||
debugger;
|
||||
} else {
|
||||
this.composeElemList = [];
|
||||
}
|
||||
},
|
||||
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>
|
||||
<style lang="scss" scoped>
|
||||
.mapPaint{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
width:100%;
|
||||
position:absolute;
|
||||
left:0;top:0;
|
||||
}
|
||||
.right-card{
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top:0;
|
||||
transition: all 0.5s;
|
||||
background: #fff;
|
||||
z-index: 9;
|
||||
}
|
||||
</style>
|
||||
185
src/views/iscs_new/iscsPreview/iscsCanvas.vue
Normal file
185
src/views/iscs_new/iscsPreview/iscsCanvas.vue
Normal file
@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div>
|
||||
<div :id="iscsId" v-loading="loading" :style="{ width: width +'px', height: height +'px',background:'#425a74' }" class="iscs-canvas" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import Iscs from '@/iscs_new/map';
|
||||
import Idb from '../utils/indexedDb.js';
|
||||
import ShapeBuilder from '@/iscs_new/plugins/shapeBuilder';
|
||||
import ShapeProperty from '@/iscs_new/plugins/shapeProperty';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import ShapeContextMenu from '@/iscs_new/plugins/shapeContextMenu';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dataZoom: {
|
||||
offsetX: '0',
|
||||
offsetY: '0',
|
||||
scaleRate: '1'
|
||||
},
|
||||
config: {
|
||||
scaleRate: '1',
|
||||
origin: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('iscs', [
|
||||
'iscs'
|
||||
]),
|
||||
iscsId() {
|
||||
return ['iscs', (Math.random().toFixed(5)) * 100000].join('_');
|
||||
},
|
||||
width() {
|
||||
return document.documentElement.clientWidth;
|
||||
},
|
||||
height() {
|
||||
return document.documentElement.clientHeight;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.config.canvasSizeCount': function (val) {
|
||||
this.resize();
|
||||
},
|
||||
'$store.state.socket.equipmentStatus': function (val) {
|
||||
if (val.length) {
|
||||
this.stateMessage(val);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.destroy();
|
||||
},
|
||||
methods: {
|
||||
// 初始化窗口
|
||||
init() {
|
||||
document.getElementById(this.iscsId).oncontextmenu = function (e) {
|
||||
return false;
|
||||
};
|
||||
|
||||
this.$iscs = new Iscs({
|
||||
dom: document.getElementById(this.iscsId),
|
||||
draw: true,
|
||||
config: {
|
||||
renderer: 'canvas',
|
||||
width: this.width,
|
||||
height: this.height
|
||||
},
|
||||
options: {
|
||||
scaleRate: 1,
|
||||
offsetX: 0,
|
||||
offsetY: 0
|
||||
},
|
||||
plugins: [
|
||||
// ShapeBuilder,
|
||||
// ShapeProperty,
|
||||
// ShapeContextMenu
|
||||
]
|
||||
});
|
||||
|
||||
const option = {
|
||||
panEnable: true,
|
||||
zoomEnable: true,
|
||||
keyEnable: true,
|
||||
draggle: false,
|
||||
selecting: false,
|
||||
selectable: false,
|
||||
reflect: true
|
||||
}
|
||||
if (this.$route.query.id) {
|
||||
setTimeout(_ => {
|
||||
Idb.select('composeList', this.$route.query.id).then(resp => {
|
||||
this.$iscs.setMap([], {
|
||||
elementList: resp.elementList||[],
|
||||
composeList: resp.composeList||[]
|
||||
}, option);
|
||||
EventBus.$emit('getComposeElemList');
|
||||
}).catch(error => {
|
||||
this.$iscs.setMap([], {
|
||||
elementList: [],
|
||||
composeList: []
|
||||
}, option);
|
||||
})
|
||||
}, 1000)
|
||||
} else {
|
||||
this.$iscs.setMap([], {
|
||||
elementList: [],
|
||||
composeList: []
|
||||
}, option);
|
||||
}
|
||||
|
||||
Vue.prototype.$iscs = this.$iscs;
|
||||
this.$iscs.on('viewLoaded', this.onViewLoaded, this);
|
||||
this.$iscs.on('contextmenu', this.onContextMenu, this);
|
||||
// this.$iscs.on('click', this.onClick, this);
|
||||
this.$iscs.on('reflect', this.onReflect, this);
|
||||
this.$iscs.on('keyboard', this.onKeyboard, this);
|
||||
window.document.oncontextmenu = function () {
|
||||
return false;
|
||||
};
|
||||
},
|
||||
// 视图加载完成
|
||||
onViewLoaded(e) {
|
||||
},
|
||||
// 键盘快捷键事件
|
||||
onKeyboard(hook) {
|
||||
console.log(hook);
|
||||
},
|
||||
// 点击选择事件
|
||||
onClick(em={}) {
|
||||
this.$emit('selected', em);
|
||||
},
|
||||
onReflect(em={}) {
|
||||
this.$emit('selected', this.$iscs.getShapeByCode(em.code));
|
||||
},
|
||||
// 右键点击事件
|
||||
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();
|
||||
this.$iscs = null;
|
||||
Vue.prototype.$iscs = null;
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.iscs-button{
|
||||
position: absolute;
|
||||
float: right;
|
||||
right: 20px;
|
||||
bottom: 15px;
|
||||
}
|
||||
.iscs-canvas{
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user