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:
zyy 2020-05-13 15:31:12 +08:00
parent 0a09f6a79b
commit cd229f7f81
15 changed files with 97 additions and 304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/jmapNew/map.js
View File

@ -54,7 +54,6 @@ class Jlmap {
this.$options = new Options(deepAssign({ scaleRate: 1, offsetX: 0, offsetY: 0 }, opts.options || {}), (dataZoom) => { this.$mouseController.trigger(this.events.DataZoom, dataZoom); }); // 缩放
this.$painter = new Painter(this);
this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()});
this.$painter.updateTransform(this.$options);
this.optionsHandler = this.setOptions.bind(this);
@ -157,9 +156,12 @@ class Jlmap {
}
}
setRecover(opts) {
this.$painter.updateTransform({ scaleRate: opts.scaleRate, offsetX: opts.offsetX, offsetY: opts.offsetY });
}
setUpdateScreen(opts) {
const num = opts.num;
const offsetY = (opts.height - 100) / num; // 高度差
this.setRecover({ scaleRate: 1, offsetX: 0, offsetY: 0 });
const arr = [];
const rectList = [];
let rect = '';
@ -173,13 +175,16 @@ class Jlmap {
}
}
}
const screenSplit = opts.list.length ? opts.list : Vue.prototype.$theme.loadPropConvert(store.state.map.map.skinVO.code).screenSplit;
const splitList = JSON.parse(JSON.stringify(screenSplit));
const num = screenSplit.length + 1;
const offsetY = (opts.height - 100) / num; // 高度差
const maxWidth = rect.width;
splitList.push(maxWidth);
const scaleWidth = Math.floor((((opts.width - 200) * num) / rect.width) * 100) / 100;
const scaleHeight = Math.floor(((opts.height - 100) / (rect.height * num)) * 100) / 100;
const scale = Math.min(scaleWidth, scaleHeight);
const splitList = Vue.prototype.$theme.loadPropConvert(store.state.map.map.skinVO.code).screenSplit;
const maxWidth = rect.width;
splitList.push(maxWidth);
for (let i = 0; i < splitList.length; i++) {
let offsetX = '';
if (i == 0) {
@ -533,6 +538,12 @@ class Jlmap {
case this.events.Keyboard:
this.$keyboardController.on(this.events.Keyboard, cb, context);
break;
case this.events.__Pan:
this.$mouseController.on(this.events.__Pan, this.optionsHandler);
break;
case this.events.__Zoom:
this.$mouseController.on(this.events.__Zoom, this.optionsHandler);
break;
}
}
}

4
src/jmapNew/painter.js
View File

@ -202,10 +202,6 @@ class Painter {
this.screenFlag = true;
this.$transformHandleScreen.updateTransform(list, opts);
}
// trainScreen() {
// this.$transformHandleScreen.updateTransform(list, opts);
// }
/**
* 更新zrender尺寸
* @param {*} opt

3
src/jmapNew/shape/Automactic/index.js
View File

@ -209,4 +209,7 @@ export default class Automactic extends Group {
this.text.setStyle('textFill', color);
}
}
screenShow() {
this.hideMode();
}
}

3
src/jmapNew/shape/OutFrame/index.js
View File

@ -71,4 +71,7 @@ export default class OutFrame extends Group {
this.isShowShape = false;
}
}
screenShow() {
this.box && this.box.hide();
}
}

2
src/jmapNew/shape/StationStand/index.js
View File

@ -42,7 +42,7 @@ class StationStand extends Group {
create() {
const model = this.model;
const style = this.style;
const drict = 1;
// const drict = 1;
/** 列车站台*/
const standX = model.position.x - model.width / 2;

3
src/jmapNew/shape/Text/index.js
View File

@ -77,4 +77,7 @@ export default class Text2 extends Group {
this.isShowShape = false;
}
}
screenShow() {
this.text && this.text.hide();
}
}

2
src/jmapNew/theme/ningbo_01/menus/dialog/switchUnLock.vue
View File

@ -227,7 +227,7 @@ export default {
};
if (this.operation == OperationEvent.Switch.unlock.menu.operation) {
operate.operation = OperationEvent.Switch.unlock.confirm2.operation;
operate.cmdType = CMD.Switch.CMD_SWITCH_SINGLE_UNLOCK;
operate.cmdType = CMD.Switch.CMD_SWITCH_SINGLE_UNLOCK_CHAIN;
} else if (this.operation == OperationEvent.Switch.unblock.menu.operation) {
operate.operation = OperationEvent.Switch.unblock.confirm2.operation;
operate.cmdType = CMD.Switch.CMD_SWITCH_UNBLOCK;

6
src/jmapNew/theme/ningbo_01/menus/menuSwitch.vue
View File

@ -60,12 +60,12 @@ export default {
{
label: '道岔单锁',
handler: this.lock,
cmdType: CMD.Switch.CMD_SWITCH_SINGLE_LOCK
cmdType: CMD.Switch.CMD_SWITCH_SINGLE_LOCK_CHAIN
},
{
label: '道岔单解',
handler: this.unlock,
cmdType: CMD.Switch.CMD_SWITCH_SINGLE_UNLOCK
cmdType: CMD.Switch.CMD_SWITCH_SINGLE_UNLOCK_CHAIN
},
{
label: '道岔封锁',
@ -252,7 +252,7 @@ export default {
}
});
},
// 道岔解锁
// 道岔单解
unlock() {
commitOperate(menuOperate.Switch.unlock, {switchCode:this.selected.code}, 0).then(({valid, operate})=>{
if (valid) {

10
src/jmapNew/theme/ningbo_01/menus/utils/menuOperate.js
View File

@ -125,14 +125,16 @@ export const menuOperate = {
},
Switch:{
lock:{
// 道岔单锁
// 道岔单锁(联锁)
operation: OperationEvent.Switch.lock.menu.operation,
cmdType: CMD.Switch.CMD_SWITCH_SINGLE_LOCK
// cmdType: CMD.Switch.CMD_SWITCH_SINGLE_LOCK
cmdType: CMD.Switch.CMD_SWITCH_SINGLE_LOCK_CHAIN
},
unlock:{
// 道岔解锁
// 道岔解锁(联锁)
operation: OperationEvent.Switch.unlock.menu.operation,
cmdType: CMD.Switch.CMD_SWITCH_SINGLE_UNLOCK
// cmdType: CMD.Switch.CMD_SWITCH_SINGLE_UNLOCK
cmdType: CMD.Switch.CMD_SWITCH_SINGLE_UNLOCK_CHAIN
},
block:{
// 道岔封锁

15
src/jmapNew/transformHandleScreen.js
View File

@ -1,7 +1,5 @@
import {createTransform, createBoundingRect} from './utils/parser';
import Vue from 'vue';
import store from '@/store/index_APP_TARGET';
class TransformHandle {
constructor(painter) {
@ -34,12 +32,12 @@ class TransformHandle {
if (this.checkVisible(view, rect)) {
view.transform = this.transform[i];
view.decomposeTransform(); // 修改 transform 后同步位置
const propConvert = Vue.prototype.$theme.loadPropConvert(store.state.map.map.skinVO.code);
if (propConvert.handleScreenProps && propConvert.handleScreenProps(view)) {
view.hide();
return;
if (view.screenShow) {
view.screenShow();
} else {
view.show();
}
view.show(); return;
return;
}
}
view.dirty(); // 更新
@ -53,12 +51,11 @@ class TransformHandle {
// 重新计算显示图形
revisibleAll() {
this.traverse(this.revisibleView, this);
this.traverse(this.transformView, this);
}
// 更新偏移量
updateTransform(list, rectList) {
// this.rect = { x: opts.x, y: opts.y, width: opts.width, height: opts.height };
this.rectList = rectList;
this.transform = [];
list.forEach(item => {

4
src/scripts/cmdPlugin/CommandEnum.js
View File

@ -8,6 +8,10 @@ export default {
CMD_SWITCH_SINGLE_LOCK: {value:'Switch_Single_Lock', label: '单锁'},
/** 单解 */
CMD_SWITCH_SINGLE_UNLOCK: {value:'Switch_Single_Unlock', label: '单解'},
/** 单锁(联动) */
CMD_SWITCH_SINGLE_LOCK_CHAIN: {value:'Switch_Single_Lock_Chain', label: '单锁(联动)'},
/** 单解(联动) */
CMD_SWITCH_SINGLE_UNLOCK_CHAIN: {value:'Switch_Single_Unlock_Chain', label: '单解(联动)'},
/** 封锁 */
CMD_SWITCH_BLOCK: {value:'Switch_Block', label: '封锁'},
/** 解封 */

4
src/utils/baseUrl.js
View File

@ -2,11 +2,11 @@ export function getBaseUrl() {
let BASE_API;
if (process.env.NODE_ENV === 'development') {
// BASE_API = 'https://joylink.club/jlcloud';
// BASE_API = 'https://test.joylink.club/jlcloud';
BASE_API = 'https://test.joylink.club/jlcloud';
// BASE_API = 'http://192.168.3.5:9000'; // 袁琪
// BASE_API = 'http://192.168.3.6:9000'; // 旭强
// BASE_API = 'http://192.168.3.41:9000'; // 张赛
BASE_API = 'http://192.168.3.82:9000'; // 杜康
// BASE_API = 'http://192.168.3.82:9000'; // 杜康
// BASE_API = 'http://192.168.3.41:9000'; // 张赛
// BASE_API = 'http://b29z135112.zicp.vip';
// BASE_API = 'http://2925963m2a.zicp.vip'; // 杜康

135
src/views/newMap/jlmapNew/screen.vue
View File

@ -1,24 +1,19 @@
<template>
<div class="jlmap-canvas" :style="{ width: width+'px', height: height+'px' }">
<div v-show="maskOpen" class="mask" />
<div :id="canvasId" style="background: #000;" class="display_canvas" />
<progress-bar ref="progressBar" />
<div>
<jlmap-canvas @onOffset="onDataZoom" @onSelect="onSelected" @onMenu="onContextMenu" @mapViewLoaded="mapViewLoaded" />
</div>
</template>
<script>
import Vue from 'vue';
import Jlmap from '@/jmapNew/map';
import ProgressBar from '@/views/components/progressBar/index';
import JlmapCanvas from './cnavas';
import { mapGetters } from 'vuex';
import { TrainingMode } from '@/scripts/ConstDic';
import { EventBus } from '@/scripts/event-bus';
// import Theme from '@/jmapNew/theme/factory';
export default {
name: 'JlmapVisual',
components: {
ProgressBar
JlmapCanvas
},
data() {
return {
@ -36,11 +31,9 @@ export default {
'mode',
'offsetStationCode'
]),
canvasId() {
const canvasId = ['map', (Math.random().toFixed(5)) * 100000].join('_');
this.$store.dispatch('config/setCurrentCancasId', { id: canvasId });
return canvasId;
},
...mapGetters('config', [
'canvasId'
]),
width() {
return this.$store.state.app.width;
},
@ -61,51 +54,17 @@ export default {
}
},
watch: {
'$store.state.map.map': function (val, old) {
try {
if (val) {
this.setMap(val);
}
} catch (error) {
console.log('[ERROR] ', error);
this.mapViewLoaded(false);
}
},
'$store.state.training.rezoomCount': function (val, old) {
// 单独处理 自动折返
let code = this.$store.state.training.offsetStationCode;
if (code && code.includes('TurnedAround')) {
const buttonList = this.$store.state.map.map.cycleButtonList;
if (buttonList && buttonList.length > 0) {
buttonList.forEach(element => {
if (code == element.cycleCode) {
code = element.code;
}
});
}
}
},
$route() {
this.mapViewLoaded(true);
}
},
created() {
EventBus.$on('viewLoading', (loading) => {
this.mapViewLoaded(loading);
});
EventBus.$on('viewProgressAt', (percentage) => {
this.mapViewProgressAt(percentage);
});
EventBus.$on('refresh', () => {
this.refresh(this.$store.state.map.map);
});
},
mounted() {
this.initLoadPage();
// this.initLoadPage();
},
beforeDestroy() {
EventBus.$off('refresh');
EventBus.$off('viewLoading');
EventBus.$off('viewProgressAt');
this.$store.dispatch('map/mapClear');
if (this.$jlmap) {
@ -113,42 +72,17 @@ export default {
}
},
methods: {
// 初始化jlmap
initLoadPage() {
document.getElementById(this.canvasId).oncontextmenu = function (e) {
return false;
};
const mouseWheelFlag = true;
const prdType = this.$store.state.training.prdType;
// Vue.prototype.$theme = new Theme();
Vue.prototype.$jlmap = new Jlmap({
dom: document.getElementById(this.canvasId),
config: {
renderer: 'canvas',
width: this.width,
height: this.height
},
options: {
scaleRate: 1,
offsetX: 0,
offsetY: 0,
zoomOnMouseWheel: mouseWheelFlag
},
showConfig: {
prdType: prdType,
previewOrMapDraw: false,
showMode: '03'
},
methods: {
dataLoaded: this.handleDataLoaded,
viewLoaded: this.handleViewLoaded,
stateLoaded: this.handleStateLoaded
}
});
onDataZoom() {
},
onSelected() {
},
onContextMenu() {
},
mapViewLoaded() {
window.document.oncontextmenu = function () {
return false;
};
},
// 重置jlmap宽高
resetWidth(opt) {
@ -165,42 +99,11 @@ export default {
// }, 100);
// });
},
// 地图数据加载完成
handleDataLoaded() {
this.$store.dispatch('map/mapDataLoaded');
},
// 地图视图加载完成
handleViewLoaded() {
this.$store.dispatch('map/mapViewScreenLoaded');
if (!this.$store.state.training.prdType) {
this.mapViewLoaded(false);
}
},
// 地图状态加载完成
handleStateLoaded() {
this.mapViewLoaded(false);
},
// 设置地图加载状态
mapViewLoaded(loading) {
this.loading = loading;
if (loading) {
this.$refs.progressBar && this.$refs.progressBar.start();
} else {
this.$refs.progressBar && this.$refs.progressBar.end(true);
}
},
// 设置地图加载进度
mapViewProgressAt(percentage) {
this.$nextTick(() => {
this.$refs.progressBar.progressAt(percentage);
});
},
// 设置新的地图数据
setMap(map) {
this.$jlmap.setMap(map, this.$store.state.map.mapDevice, {routeData:this.$store.state.map.routeData, autoReentryData: this.$store.state.map.autoReentryData});
},
// 刷新地图数据
refresh(map) {
}
}
};

151
src/views/newMap/newMapdraft/mapoperate/config/previewScreen.vue
View File

@ -1,151 +0,0 @@
<template>
<el-dialog
title="大屏预览"
:visible.sync="dialogShow"
width="100%"
:before-close="doClose"
:close-on-click-modal="false"
:modal="false"
fullscreen
>
<div class="map-view">
<jlmap-visual ref="jlmapVisual" />
<div class="display-draft">
<el-button-group>
<el-button type="primary" @click="doClose">{{ $t('scriptRecord.scriptBack') }}</el-button>
</el-button-group>
</div>
</div>
</el-dialog>
</template>
<script>
import JlmapVisual from '@/views/newMap/jlmapNew/screen';
import { loadMapDataById } from '@/utils/loaddata';
import { EventBus } from '@/scripts/event-bus';
import { mapGetters } from 'vuex';
// 运行图预览
export default {
name: 'RunPlanView',
components: {
JlmapVisual
},
props: {
},
data() {
return {
dialogShow: false,
size: {
width: this.$store.state.app.width,
height: this.$store.state.app.height - 90
}
};
},
computed: {
mapId() {
return this.$route.params.mapId;
},
height() {
return this.$store.state.app.height - 50 - 30;
},
...mapGetters('config', [
'canvasId'
])
},
watch: {
'$store.state.map.mapDataLoadedScreenCount':function() {
this.$store.dispatch('map/setTrainWindowShow', false);
this.$jlmap.off('zoom');
this.$jlmap.off('pan');
this.handleUpdateScreen();
}
},
async beforeDestroy() {
await this.$store.dispatch('map/mapClear');
},
async mounted() {
// await this.setWindowSize();
},
methods: {
async doShow() {
try {
this.dialogShow = true;
const size = {
width: this.$store.state.app.width - 2,
height: this.$store.state.app.height
};
console.log(size, '------');
this.$refs.jlmapVisual && this.$refs.jlmapVisual.resetWidth(size);
await this.initLoadData();
} catch (e) {
console.error(e);
}
},
async doClose() {
this.$store.dispatch('training/over').then(() => {
EventBus.$emit('runPlanStop');
EventBus.$emit('chatSubscribeStop');
});
this.dialogShow = false;
},
async initLoadData() { // 加载地图数据
if (this.$route.params.mapId) {
await loadMapDataById('34');
} else {
this.endViewLoading();
}
},
// 通过id加载地图数据
async loadMapDataById(mapId) {
try {
await this.$store.dispatch('training/changeMode', { mode: null });
loadMapDataById(mapId).then(()=>{
this.$store.dispatch('training/over');
this.$store.dispatch('training/setMapDefaultState');
this.$store.dispatch('map/clearJlmapTrainView');
});
} catch (error) {
this.$messageBox(`获取地图数据失败: ${error.message}`);
this.endViewLoading();
}
},
// 结束加载状态
endViewLoading(isSuccess) {
if (!isSuccess) {
this.$store.dispatch('map/mapClear');
}
this.$nextTick(() => {
EventBus.$emit('viewLoading', false);
});
},
handleUpdateScreen() {
const size = {
width: this.$store.state.app.width - 2,
height: this.$store.state.app.height,
num: this.$theme.loadPropConvert(this.$store.state.map.map.skinVO.code).screenLine
};
this.$jlmap.setUpdateScreen(size);
this.$refs.jlmapVisual.handleStateLoaded(); // 加载完成
}
}
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
/deep/ {
.el-dialog__body {
padding: 0px !important;
background-color: floralwhite !important;
}
}
.map-view {
float: left;
width: 100%;
}
.display-draft {
position: absolute;
float: right;
right: 15px;
bottom: 15px;
}
</style>

36
src/views/newMap/newMapdraft/mapoperate/splitScreen.vue
View File

@ -51,22 +51,20 @@
</el-form>
</div>
</el-card>
<div style="display: table; margin-left: 90px; margin-top: 12px; margin-bottom: 10px;">
<div style="display: table; margin-left: 90px; margin-top: 12px; margin-bottom: 20px;">
<el-button type="primary" @click="save">保存</el-button>
<!-- <el-button type="primary" @click="preview">预览</el-button> -->
<el-button v-if="isPreview" type="primary" @click="preview">预览</el-button>
<el-button v-if="!isPreview" type="primary" @click="recover">重置</el-button>
</div>
</el-scrollbar>
<preview-screen ref="previewScreen" />
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import PreviewScreen from './config/previewScreen';
export default {
components: {
PreviewScreen
},
props: {
selected: {
@ -84,7 +82,8 @@ export default {
},
field: '',
cardMode: 'generate',
index: ''
index: '',
isPreview: true
};
},
computed: {
@ -158,7 +157,30 @@ export default {
console.log(this.tableData); // 保存
},
preview() { // 预览
this.$refs.previewScreen.doShow();
if (this.tableData.length) {
this.isPreview = false;
this.$jlmap && this.$jlmap.off('zoom');
this.$jlmap && this.$jlmap.off('pan');
const size = {
width: this.$jlmap.$zr.getWidth(),
height: this.$jlmap.$zr.getHeight(),
list: this.tableData.map(ele => ele.width)
};
this.$jlmap && this.$jlmap.setUpdateScreen(size);
} else {
this.$messageBox('请输入换行位置信息');
}
},
recover() { // 恢复缩放比
this.isPreview = true;
this.$jlmap && this.$jlmap.on('zoom');
this.$jlmap && this.$jlmap.on('pan');
const param = {
scaleRate: this.$store.state.map.dataZoom.scaleRate,
offsetX: this.$store.state.map.dataZoom.offsetX,
offsetY: this.$store.state.map.dataZoom.offsetY
};
this.$jlmap && this.$jlmap.setRecover(param);
},
clear() {
this.$refs.hostileForm.resetFields();