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

Merget pu branch 'test' of https://git.code.tencent.com/lian-cbtc/jl-client into test

Browse Source
This commit is contained in:
sunzhenyu 2020-05-13 17:39:33 +08:00
commit 7288644258
17 changed files with 219 additions and 364 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/Section/EMouse.js
View File

@ -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,

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: '封锁'},
/** 解封 */

7
src/store/modules/map.js
View File

@ -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 || [];

113
src/views/designPlatform/bigScreen.vue
View File

@ -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>

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>

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

@ -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();
}