调整地图大屏编辑，宁波线路道岔操作

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;
+        this.setRecover({ scaleRate: 1, offsetX: 0, offsetY: 0 });
-        const offsetY = (opts.height - 100) / num; // 高度差
         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;
             }
         }
     }

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

src/jmapNew/shape/Automactic/index.js

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

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

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;

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

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;

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) {

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:{
             // 道岔封锁

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 (view.screenShow) {
-                    if (propConvert.handleScreenProps && propConvert.handleScreenProps(view)) {
+                        view.screenShow();
-                        view.hide();
+                    } else {
-                        return;
+                        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 => {

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

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'; // 杜康

src/views/newMap/jlmapNew/screen.vue

@@ -1,24 +1,19 @@
 <template>
-  <div class="jlmap-canvas" :style="{ width: width+'px', height: height+'px' }">
+  <div>
-    <div v-show="maskOpen" class="mask" />
+    <jlmap-canvas @onOffset="onDataZoom" @onSelect="onSelected" @onMenu="onContextMenu" @mapViewLoaded="mapViewLoaded" />
-    <div :id="canvasId" style="background: #000;" class="display_canvas" />
-    <progress-bar ref="progressBar" />
   </div>
 </template>
 
 <script>
-import Vue from 'vue';
+import JlmapCanvas from './cnavas';
-import Jlmap from '@/jmapNew/map';
-import ProgressBar from '@/views/components/progressBar/index';
 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() {
+        ...mapGetters('config', [
-            const canvasId = ['map', (Math.random().toFixed(5)) * 100000].join('_');
+            'canvasId'
-            this.$store.dispatch('config/setCurrentCancasId', { id: canvasId });
+        ]),
-            return 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
+        onDataZoom() {
-        initLoadPage() {
+
-            document.getElementById(this.canvasId).oncontextmenu = function (e) {
+        },
-                return false;
+        onSelected() {
-            };
+
-            const mouseWheelFlag = true;
+        },
-            const prdType = this.$store.state.training.prdType;
+        onContextMenu() {
-            // Vue.prototype.$theme = new Theme();
+
-            Vue.prototype.$jlmap = new Jlmap({
+        },
-                dom: document.getElementById(this.canvasId),
+        mapViewLoaded() {
-                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
-                }
-            });
 
-            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) {
         }
     }
 };

src/views/newMap/newMapdraft/mapoperate/config/previewScreen.vue

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

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