Merget pu branch 'test' of https://git.code.tencent.com/lian-cbtc/jl-client into test
This commit is contained in:
sunzhenyu
commit
7288644258
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -202,10 +202,6 @@ class Painter {
|
||||
this.screenFlag = true;
|
||||
this.$transformHandleScreen.updateTransform(list, opts);
|
||||
}
|
||||
|
||||
// trainScreen() {
|
||||
// this.$transformHandleScreen.updateTransform(list, opts);
|
||||
// }
|
||||
/**
|
||||
* 更新zrender尺寸
|
||||
* @param {*} opt
|
||||
|
||||
@ -209,4 +209,7 @@ export default class Automactic extends Group {
|
||||
this.text.setStyle('textFill', color);
|
||||
}
|
||||
}
|
||||
screenShow() {
|
||||
this.hideMode();
|
||||
}
|
||||
}
|
||||
|
||||
@ -71,4 +71,7 @@ export default class OutFrame extends Group {
|
||||
this.isShowShape = false;
|
||||
}
|
||||
}
|
||||
screenShow() {
|
||||
this.box && this.box.hide();
|
||||
}
|
||||
}
|
||||
|
||||
@ -147,10 +147,8 @@ class EMouse extends Group {
|
||||
points.unshift(param);
|
||||
} else {
|
||||
const param = [ele.x + directx * this.triangle.getAbsSin(switchWidth), ele.y - directy * this.triangle.getAbsCos(switchWidth)];
|
||||
|
||||
points.unshift(param);
|
||||
}
|
||||
|
||||
});
|
||||
this.lineBorder = new Polygon({
|
||||
zlevel: this.device.zlevel,
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -77,4 +77,7 @@ export default class Text2 extends Group {
|
||||
this.isShowShape = false;
|
||||
}
|
||||
}
|
||||
screenShow() {
|
||||
this.text && this.text.hide();
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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:{
|
||||
// 道岔封锁
|
||||
|
||||
@ -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 => {
|
||||
|
||||
@ -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: '封锁'},
|
||||
/** 解封 */
|
||||
|
||||
@ -367,6 +367,13 @@ const map = {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
bigScreenSplitConfig: (state) => {
|
||||
if (state.map) {
|
||||
return state.map.bigScreenSplitConfig || [];
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
indicatorLightList: (state) => {
|
||||
if (state.map) {
|
||||
return state.map.indicatorLightList || [];
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div class="map-view">
|
||||
<div v-show="maskOpen" class="mask" :style="{'width': maskWidth}" />
|
||||
<jlmap-visual ref="jlmapVisual" />
|
||||
<div class="display-draft">
|
||||
<div v-show="disPlay" class="display-draft">
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="back">{{ $t('scriptRecord.scriptBack') }}</el-button>
|
||||
</el-button-group>
|
||||
@ -11,6 +12,7 @@
|
||||
<script>
|
||||
import JlmapVisual from '@/views/newMap/jlmapNew/index';
|
||||
import { loadNewMapDataByGroup, loadMapDataById } from '@/utils/loaddata';
|
||||
import { clearSimulation } from '@/api/simulation';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { creatSubscribe, clearSubscribe, displayTopic} from '@/utils/stomp';
|
||||
@ -32,7 +34,10 @@ export default {
|
||||
size: {
|
||||
width: document.documentElement.clientWidth - 400,
|
||||
height: document.documentElement.clientHeight - 80
|
||||
}
|
||||
},
|
||||
maskOpen: false,
|
||||
maskWidth: '100%',
|
||||
disPlay: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -42,6 +47,9 @@ export default {
|
||||
height() {
|
||||
return this.$store.state.app.height - 50 - 30;
|
||||
},
|
||||
...mapGetters('map', [
|
||||
'bigScreenSplitConfig'
|
||||
]),
|
||||
...mapGetters('config', [
|
||||
'canvasId'
|
||||
])
|
||||
@ -63,7 +71,9 @@ export default {
|
||||
this.$jlmap.off('zoom');
|
||||
this.$jlmap.off('pan');
|
||||
this.handleUpdateScreen();
|
||||
this.subscribe();
|
||||
if (this.$route.query.group) {
|
||||
this.subscribe();
|
||||
}
|
||||
},
|
||||
'$store.state.socket.equipmentStatus': function (val) {
|
||||
if (val.length && this.$route.query.group) {
|
||||
@ -77,47 +87,42 @@ export default {
|
||||
async mounted() {
|
||||
await this.setWindowSize();
|
||||
await this.initLoadData();
|
||||
this.disPlay = true;
|
||||
if (this.$route.path.includes('design/bigScreen')) {
|
||||
this.disPlay = false;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async initLoadData() { // 加载地图数据
|
||||
if (this.$route.query.group) {
|
||||
await loadNewMapDataByGroup(this.$route.query.group);
|
||||
} else {
|
||||
await loadMapDataById(this.$route.params.mapId);
|
||||
this.loadMapDataById(this.$route.params.mapId);
|
||||
}
|
||||
},
|
||||
// 通过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();
|
||||
}
|
||||
},
|
||||
async statusMessage(list) {
|
||||
await this.$store.dispatch('training/updateMapState', list);
|
||||
await this.$store.dispatch('socket/setEquipmentStatus');
|
||||
},
|
||||
// 通过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);
|
||||
});
|
||||
},
|
||||
setWindowSize() {
|
||||
this.$nextTick(() => {
|
||||
if (this.widthLeft) {
|
||||
const width = this.$store.state.app.width - (this.widthLeft || 450) - 2;
|
||||
this.maskWidth = `calc(100% - ${this.widthLeft || 450}px)`;
|
||||
const height = this.height;
|
||||
this.$store.dispatch('config/resize', { width, height });
|
||||
} else {
|
||||
@ -128,24 +133,35 @@ export default {
|
||||
});
|
||||
},
|
||||
handleUpdateScreen() {
|
||||
if (this.widthLeft) {
|
||||
const size = {
|
||||
width: this.$store.state.app.width - (this.widthLeft || 450) - 2,
|
||||
height: this.height,
|
||||
num: this.$theme.loadPropConvert(this.$store.state.map.map.skinVO.code).screenLine
|
||||
};
|
||||
this.$jlmap.setUpdateScreen(size);
|
||||
this.maskOpen = false;
|
||||
if (this.bigScreenSplitConfig.length) {
|
||||
if (this.widthLeft) {
|
||||
const size = {
|
||||
width: this.$store.state.app.width - (this.widthLeft || 450) - 2,
|
||||
height: this.height,
|
||||
list: this.bigScreenSplitConfig.map(ele => ele.position)
|
||||
};
|
||||
this.$jlmap.setUpdateScreen(size);
|
||||
} else {
|
||||
|
||||
const size = {
|
||||
width: this.$store.state.app.width - 2,
|
||||
height: this.$store.state.app.height,
|
||||
list: this.bigScreenSplitConfig.map(ele => ele.position)
|
||||
};
|
||||
this.$jlmap.setUpdateScreen(size);
|
||||
}
|
||||
this.$refs.jlmapVisual.handleStateLoaded();
|
||||
} else {
|
||||
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.maskOpen = true;
|
||||
this.$messageBox('该线路没有大屏切割位置信息, 请前往地图绘制编辑');
|
||||
}
|
||||
this.$refs.jlmapVisual.handleStateLoaded();
|
||||
},
|
||||
back() {
|
||||
async back() {
|
||||
if (this.$route.query.group) {
|
||||
await clearSimulation(this.$route.query.group);
|
||||
this.clearSubscribe();
|
||||
}
|
||||
this.$store.dispatch('training/over').then(() => {
|
||||
EventBus.$emit('runPlanStop');
|
||||
EventBus.$emit('chatSubscribeStop');
|
||||
@ -169,11 +185,22 @@ export default {
|
||||
.map-view {
|
||||
float: left;
|
||||
width: auto;
|
||||
}
|
||||
.mask{
|
||||
opacity: 1;
|
||||
background: #000;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9;
|
||||
}
|
||||
.display-draft {
|
||||
position: absolute;
|
||||
float: right;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
z-index: 19;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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) {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -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>
|
||||
@ -9,7 +9,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="换行位置">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.width }}</span>
|
||||
<span style="margin-left: 10px">{{ scope.row.position }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
@ -34,8 +34,8 @@
|
||||
</div>
|
||||
<div>
|
||||
<el-form ref="hostileForm" :model="addModel" label-width="135px" size="mini" style="margin-top: 15px">
|
||||
<el-form-item label="区段:" prop="section">
|
||||
<el-select v-model="addModel.section" clearable :filterable="true">
|
||||
<el-form-item label="区段:" prop="sectionCode">
|
||||
<el-select v-model="addModel.sectionCode" clearable :filterable="true">
|
||||
<el-option
|
||||
v-for="item in sectionList"
|
||||
:key="item.code"
|
||||
@ -51,22 +51,21 @@
|
||||
</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';
|
||||
import { saveMap } from '@/api/jmap/mapdraft';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PreviewScreen
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
@ -80,16 +79,18 @@ export default {
|
||||
return {
|
||||
tableData: [],
|
||||
addModel: {
|
||||
section: ''
|
||||
sectionCode: ''
|
||||
},
|
||||
field: '',
|
||||
cardMode: 'generate',
|
||||
index: ''
|
||||
index: '',
|
||||
isPreview: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'sectionList'
|
||||
'sectionList',
|
||||
'bigScreenSplitConfig'
|
||||
]),
|
||||
cardTitle() {
|
||||
if (this.cardMode === 'generate') {
|
||||
@ -104,6 +105,11 @@ export default {
|
||||
watch: {
|
||||
selected: function (val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
},
|
||||
bigScreenSplitConfig: function(val) {
|
||||
if (val.length) {
|
||||
this.handleList(val);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -115,11 +121,23 @@ export default {
|
||||
this.$refs.make && this.$refs.make.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'selectSection'.toUpperCase()) {
|
||||
if (selected.type === '01' || selected.type === '03') {
|
||||
this.addModel.section = selected.code;
|
||||
this.addModel.sectionCode = selected.code;
|
||||
this.field = '';
|
||||
}
|
||||
}
|
||||
},
|
||||
handleList(list) {
|
||||
this.tableData = [];
|
||||
list.forEach(item => {
|
||||
const section = this.$store.getters['map/getDeviceByCode'](item.sectionCode);
|
||||
const param = {
|
||||
position: String(section.points[section.points.length - 1].x),
|
||||
name: `${section.name}(${section.code})`,
|
||||
sectionCode: section.code
|
||||
};
|
||||
this.tableData.push(param);
|
||||
});
|
||||
},
|
||||
hover(field) {
|
||||
this.field = field == this.field ? '' : field;
|
||||
},
|
||||
@ -129,7 +147,7 @@ export default {
|
||||
this.cardMode = 'generate';
|
||||
},
|
||||
editModel(list, index) {
|
||||
this.addModel.section = list[index].code;
|
||||
this.addModel.sectionCode = list[index].sectionCode;
|
||||
this.index = index;
|
||||
this.cardMode = 'edit';
|
||||
},
|
||||
@ -139,14 +157,14 @@ export default {
|
||||
},
|
||||
updateOverlab() {
|
||||
if (this.index || this.index == 0) {
|
||||
if (!this.addModel.section) {
|
||||
if (!this.addModel.sectionCode) {
|
||||
this.$messageBox('请选择区段!');
|
||||
} else {
|
||||
const section = this.$store.getters['map/getDeviceByCode'](this.addModel.section);
|
||||
const section = this.$store.getters['map/getDeviceByCode'](this.addModel.sectionCode);
|
||||
const param = {
|
||||
width: section.points[section.points.length - 1].x,
|
||||
position: String(section.points[section.points.length - 1].x),
|
||||
name: `${section.name}(${section.code})`,
|
||||
code: section.code
|
||||
sectionCode: section.code
|
||||
};
|
||||
this.tableData.splice(this.index, 1, param);
|
||||
}
|
||||
@ -155,25 +173,59 @@ export default {
|
||||
}
|
||||
},
|
||||
save() {
|
||||
console.log(this.tableData); // 保存
|
||||
if (this.tableData.length) {
|
||||
const map = this.$store.state.map.map;
|
||||
const param = {
|
||||
bigScreenSplitConfig: this.tableData,
|
||||
mapId: this.$route.params.mapId
|
||||
};
|
||||
saveMap(Object.assign(map, param)).then(response => {
|
||||
this.$message.success('保存大屏分割位置成功');
|
||||
}).catch(() => {
|
||||
this.$messageBox('保存大屏分割位置失败');
|
||||
});
|
||||
}
|
||||
},
|
||||
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.position)
|
||||
};
|
||||
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();
|
||||
this.addModel.section = '';
|
||||
this.addModel.sectionCode = '';
|
||||
this.index = '';
|
||||
},
|
||||
generateOverlab() {
|
||||
if (!this.addModel.section) {
|
||||
if (!this.addModel.sectionCode) {
|
||||
this.$messageBox('请选择区段!');
|
||||
} else {
|
||||
const section = this.$store.getters['map/getDeviceByCode'](this.addModel.section);
|
||||
const section = this.$store.getters['map/getDeviceByCode'](this.addModel.sectionCode);
|
||||
this.tableData.push({
|
||||
width: section.points[section.points.length - 1].x,
|
||||
position: String(section.points[section.points.length - 1].x),
|
||||
name: `${section.name}(${section.code})`,
|
||||
code: section.code
|
||||
sectionCode: section.code
|
||||
});
|
||||
this.clear();
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user