From cd229f7f810169034ae99b52201537f8dbcfc9b3 Mon Sep 17 00:00:00 2001
From: zyy <1787816799@qq.com>
Date: Wed, 13 May 2020 15:31:12 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=9C=B0=E5=9B=BE?=
 =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E7=BC=96=E8=BE=91=EF=BC=8C=E5=AE=81=E6=B3=A2?=
 =?UTF-8?q?=E7=BA=BF=E8=B7=AF=E9=81=93=E5=B2=94=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/jmapNew/map.js                            |  23 ++-
 src/jmapNew/painter.js                        |   4 -
 src/jmapNew/shape/Automactic/index.js         |   3 +
 src/jmapNew/shape/OutFrame/index.js           |   3 +
 src/jmapNew/shape/StationStand/index.js       |   2 +-
 src/jmapNew/shape/Text/index.js               |   3 +
 .../ningbo_01/menus/dialog/switchUnLock.vue   |   2 +-
 .../theme/ningbo_01/menus/menuSwitch.vue      |   6 +-
 .../ningbo_01/menus/utils/menuOperate.js      |  10 +-
 src/jmapNew/transformHandleScreen.js          |  15 +-
 src/scripts/cmdPlugin/CommandEnum.js          |   4 +
 src/utils/baseUrl.js                          |   4 +-
 src/views/newMap/jlmapNew/screen.vue          | 135 +++-------------
 .../mapoperate/config/previewScreen.vue       | 151 ------------------
 .../newMapdraft/mapoperate/splitScreen.vue    |  36 ++++-
 15 files changed, 97 insertions(+), 304 deletions(-)
 delete mode 100644 src/views/newMap/newMapdraft/mapoperate/config/previewScreen.vue

diff --git a/src/jmapNew/map.js b/src/jmapNew/map.js
index 094d1a958..b1b8e3a3a 100644
--- a/src/jmapNew/map.js
+++ b/src/jmapNew/map.js
@@ -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;
             }
         }
     }
diff --git a/src/jmapNew/painter.js b/src/jmapNew/painter.js
index 66eee626b..e057d87ff 100644
--- a/src/jmapNew/painter.js
+++ b/src/jmapNew/painter.js
@@ -202,10 +202,6 @@ class Painter {
         this.screenFlag = true;
         this.$transformHandleScreen.updateTransform(list, opts);
     }
-
-    // trainScreen() {
-    //     this.$transformHandleScreen.updateTransform(list, opts);
-    // }
     /**
 	 * 更新zrender尺寸
 	 * @param {*} opt
diff --git a/src/jmapNew/shape/Automactic/index.js b/src/jmapNew/shape/Automactic/index.js
index 48a5cf1b6..942029bab 100644
--- a/src/jmapNew/shape/Automactic/index.js
+++ b/src/jmapNew/shape/Automactic/index.js
@@ -209,4 +209,7 @@ export default class Automactic extends Group {
             this.text.setStyle('textFill', color);
         }
     }
+    screenShow() {
+        this.hideMode();
+    }
 }
diff --git a/src/jmapNew/shape/OutFrame/index.js b/src/jmapNew/shape/OutFrame/index.js
index ef39d016f..23875e2dd 100644
--- a/src/jmapNew/shape/OutFrame/index.js
+++ b/src/jmapNew/shape/OutFrame/index.js
@@ -71,4 +71,7 @@ export default class OutFrame extends Group {
             this.isShowShape = false;
         }
     }
+    screenShow() {
+        this.box && this.box.hide();
+    }
 }
diff --git a/src/jmapNew/shape/StationStand/index.js b/src/jmapNew/shape/StationStand/index.js
index 1c334e498..2ce6b4d69 100644
--- a/src/jmapNew/shape/StationStand/index.js
+++ b/src/jmapNew/shape/StationStand/index.js
@@ -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;
diff --git a/src/jmapNew/shape/Text/index.js b/src/jmapNew/shape/Text/index.js
index cb08c7846..56b3d4a22 100644
--- a/src/jmapNew/shape/Text/index.js
+++ b/src/jmapNew/shape/Text/index.js
@@ -77,4 +77,7 @@ export default class Text2 extends Group {
             this.isShowShape = false;
         }
     }
+    screenShow() {
+        this.text && this.text.hide();
+    }
 }
diff --git a/src/jmapNew/theme/ningbo_01/menus/dialog/switchUnLock.vue b/src/jmapNew/theme/ningbo_01/menus/dialog/switchUnLock.vue
index 4ab887b2e..19a9f14dd 100644
--- a/src/jmapNew/theme/ningbo_01/menus/dialog/switchUnLock.vue
+++ b/src/jmapNew/theme/ningbo_01/menus/dialog/switchUnLock.vue
@@ -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;
diff --git a/src/jmapNew/theme/ningbo_01/menus/menuSwitch.vue b/src/jmapNew/theme/ningbo_01/menus/menuSwitch.vue
index 3e79b0650..6cbcd77fc 100644
--- a/src/jmapNew/theme/ningbo_01/menus/menuSwitch.vue
+++ b/src/jmapNew/theme/ningbo_01/menus/menuSwitch.vue
@@ -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) {
diff --git a/src/jmapNew/theme/ningbo_01/menus/utils/menuOperate.js b/src/jmapNew/theme/ningbo_01/menus/utils/menuOperate.js
index 5dcae4248..cac3beffe 100644
--- a/src/jmapNew/theme/ningbo_01/menus/utils/menuOperate.js
+++ b/src/jmapNew/theme/ningbo_01/menus/utils/menuOperate.js
@@ -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:{
             // 道岔封锁
diff --git a/src/jmapNew/transformHandleScreen.js b/src/jmapNew/transformHandleScreen.js
index d655a4390..07f17fc9f 100644
--- a/src/jmapNew/transformHandleScreen.js
+++ b/src/jmapNew/transformHandleScreen.js
@@ -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 => {
diff --git a/src/scripts/cmdPlugin/CommandEnum.js b/src/scripts/cmdPlugin/CommandEnum.js
index 05f0a4760..13bde0d94 100644
--- a/src/scripts/cmdPlugin/CommandEnum.js
+++ b/src/scripts/cmdPlugin/CommandEnum.js
@@ -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: '封锁'},
         /** 解封 */
diff --git a/src/utils/baseUrl.js b/src/utils/baseUrl.js
index 568f6a628..e9046878d 100644
--- a/src/utils/baseUrl.js
+++ b/src/utils/baseUrl.js
@@ -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'; // 杜康
diff --git a/src/views/newMap/jlmapNew/screen.vue b/src/views/newMap/jlmapNew/screen.vue
index 6ffd893b0..1632342b2 100644
--- a/src/views/newMap/jlmapNew/screen.vue
+++ b/src/views/newMap/jlmapNew/screen.vue
@@ -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) {
         }
     }
 };
diff --git a/src/views/newMap/newMapdraft/mapoperate/config/previewScreen.vue b/src/views/newMap/newMapdraft/mapoperate/config/previewScreen.vue
deleted file mode 100644
index c0ddd6b32..000000000
--- a/src/views/newMap/newMapdraft/mapoperate/config/previewScreen.vue
+++ /dev/null
@@ -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>
diff --git a/src/views/newMap/newMapdraft/mapoperate/splitScreen.vue b/src/views/newMap/newMapdraft/mapoperate/splitScreen.vue
index 57595819a..d17396fb0 100644
--- a/src/views/newMap/newMapdraft/mapoperate/splitScreen.vue
+++ b/src/views/newMap/newMapdraft/mapoperate/splitScreen.vue
@@ -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();

From ecf563e8de475a82d086df154c19fa29704d5c93 Mon Sep 17 00:00:00 2001
From: zyy <1787816799@qq.com>
Date: Wed, 13 May 2020 16:29:10 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=A4=A7=E5=B1=8F?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E4=BF=9D=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/jmapNew/shape/Section/EMouse.js           |  2 -
 src/store/modules/map.js                      |  7 ++
 src/views/designPlatform/bigScreen.vue        | 54 ++++++++++-----
 .../newMapdraft/mapoperate/splitScreen.vue    | 66 ++++++++++++++-----
 4 files changed, 94 insertions(+), 35 deletions(-)

diff --git a/src/jmapNew/shape/Section/EMouse.js b/src/jmapNew/shape/Section/EMouse.js
index 375efe15e..6b51b4889 100644
--- a/src/jmapNew/shape/Section/EMouse.js
+++ b/src/jmapNew/shape/Section/EMouse.js
@@ -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,
diff --git a/src/store/modules/map.js b/src/store/modules/map.js
index ac70accf7..eb5687328 100644
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@@ -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 || [];
diff --git a/src/views/designPlatform/bigScreen.vue b/src/views/designPlatform/bigScreen.vue
index c4b191f2d..7aa0c68c3 100644
--- a/src/views/designPlatform/bigScreen.vue
+++ b/src/views/designPlatform/bigScreen.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="map-view">
+    <div v-show="maskOpen" class="mask" :style="{'width': maskWidth}" />
     <jlmap-visual ref="jlmapVisual" />
     <div class="display-draft">
       <el-button-group>
@@ -32,7 +33,9 @@ export default {
             size: {
                 width: document.documentElement.clientWidth - 400,
                 height: document.documentElement.clientHeight - 80
-            }
+            },
+            maskOpen: false,
+            maskWidth: '100%'
         };
     },
     computed: {
@@ -42,6 +45,9 @@ export default {
         height() {
             return this.$store.state.app.height - 50 - 30;
         },
+        ...mapGetters('map', [
+            'bigScreenSplitConfig'
+        ]),
         ...mapGetters('config', [
             'canvasId'
         ])
@@ -118,6 +124,7 @@ export default {
             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,22 +135,29 @@ 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() {
             this.$store.dispatch('training/over').then(() => {
@@ -169,6 +183,16 @@ 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;
diff --git a/src/views/newMap/newMapdraft/mapoperate/splitScreen.vue b/src/views/newMap/newMapdraft/mapoperate/splitScreen.vue
index d17396fb0..545c84657 100644
--- a/src/views/newMap/newMapdraft/mapoperate/splitScreen.vue
+++ b/src/views/newMap/newMapdraft/mapoperate/splitScreen.vue
@@ -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"
@@ -62,6 +62,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import { saveMap } from '@/api/jmap/mapdraft';
 
 export default {
     components: {
@@ -78,7 +79,7 @@ export default {
         return {
             tableData: [],
             addModel: {
-                section: ''
+                sectionCode: ''
             },
             field: '',
             cardMode: 'generate',
@@ -88,7 +89,8 @@ export default {
     },
     computed: {
         ...mapGetters('map', [
-            'sectionList'
+            'sectionList',
+            'bigScreenSplitConfig'
         ]),
         cardTitle() {
             if (this.cardMode === 'generate') {
@@ -103,6 +105,11 @@ export default {
     watch: {
         selected: function (val, oldVal) {
             this.deviceSelect(val);
+        },
+        bigScreenSplitConfig: function(val) {
+            if (val.length) {
+                this.handleList(val);
+            }
         }
     },
     mounted() {
@@ -114,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;
         },
@@ -128,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';
         },
@@ -138,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);
                 }
@@ -154,7 +173,18 @@ 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() { // 预览
             if (this.tableData.length) {
@@ -164,7 +194,7 @@ export default {
                 const size = {
                     width: this.$jlmap.$zr.getWidth(),
                     height: this.$jlmap.$zr.getHeight(),
-                    list: this.tableData.map(ele => ele.width)
+                    list: this.tableData.map(ele => ele.position)
                 };
                 this.$jlmap && this.$jlmap.setUpdateScreen(size);
             } else {
@@ -184,18 +214,18 @@ export default {
         },
         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();
             }

From 98a4a7b622d30b7cd3949475feb54e6a1a46e9cf Mon Sep 17 00:00:00 2001
From: zyy <1787816799@qq.com>
Date: Wed, 13 May 2020 17:34:38 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=A4=A7=E5=B1=8F?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E6=8E=A8=E5=87=BA=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/designPlatform/bigScreen.vue | 61 ++++++++++++++------------
 1 file changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/views/designPlatform/bigScreen.vue b/src/views/designPlatform/bigScreen.vue
index 7aa0c68c3..f3a8ba32d 100644
--- a/src/views/designPlatform/bigScreen.vue
+++ b/src/views/designPlatform/bigScreen.vue
@@ -2,7 +2,7 @@
   <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>
@@ -12,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';
@@ -35,7 +36,8 @@ export default {
                 height: document.documentElement.clientHeight - 80
             },
             maskOpen: false,
-            maskWidth: '100%'
+            maskWidth: '100%',
+            disPlay: false
         };
     },
     computed: {
@@ -69,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) {
@@ -83,43 +87,37 @@ 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) {
@@ -159,7 +157,11 @@ export default {
                 this.$messageBox('该线路没有大屏切割位置信息, 请前往地图绘制编辑');
             }
         },
-        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');
@@ -199,5 +201,6 @@ export default {
         float: right;
         right: 15px;
         bottom: 15px;
+		z-index: 19;
     }
 </style>