调整大屏显示

src/jmapNew/map.js

@@ -11,6 +11,7 @@ import { selectLineCode } from './config/deviceStyle';
 import { deviceFactory, createBoundingRect, calculateDCenter } from './utils/parser';
 import { deepAssign } from '@/utils/index';
 import store from '@/store/index_APP_TARGET';
+import Vue from 'vue';
 
 const renderer = 'canvas';
 const devicePixelRatio = 1;
@@ -160,6 +161,7 @@ class Jlmap {
         const num = opts.num;
         const offsetY = (opts.height - 100) / num; // 高度差
         const arr = [];
+        const rectList = [];
         let rect = '';
         for (const i in this.mapDevice) {
             const element = this.mapDevice[i];
@@ -171,16 +173,36 @@ class Jlmap {
                 }
             }
         }
-        const scaleWidth = Math.floor((((opts.width - 100) * num) / rect.width) * 100) / 100;
-        const scaleHeight = Math.floor(((opts.height - 100) / (rect.height * num)) * 100) / 100;
-        const scale = Math.min(scaleWidth, scaleHeight);
-        const spliceWidth = (rect.width + 100) / num * scale;
-        const dx = (opts.width - spliceWidth) / 2;
-        for (let index = 0; index < num; index++) {
-            const param = { scaleRate: scale, offsetX: ((spliceWidth) * index) - dx, offsetY: -100 - (offsetY * index) };
-            arr.push(param);
+        // 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 spliceWidth = (rect.width + 100) / num * scale;
+        // const dx = (opts.width - spliceWidth) / 2;
+
+        // for (let index = 0; index < num; index++) {
+        //     const param = { scaleRate: scale, offsetX: ((spliceWidth) * index) - dx, offsetY: -100 - (offsetY * index) };
+        //     arr.push(param);
+        // }
+
+        const splitList = Vue.prototype.$theme.loadPropConvert(store.state.map.map.skinVO.code).screenSplit;
+        const scale = 0.3;
+        const maxWidth = rect.width + 30;
+        splitList.push(maxWidth);
+        for (let i = 0; i < splitList.length; i++) {
+            let offsetX = '';
+            if (i == 0) {
+                offsetX = -(opts.width - splitList[i] * scale) / 2;
+            } else {
+                const dx = (opts.width - (splitList[i] - splitList[i - 1]) * scale) / 2; // 居中计算偏移值
+                offsetX = splitList[i - 1] * scale - dx;
             }
-        this.$painter.updateTransform1(arr, {x: dx, y: 0, width: spliceWidth, height: opts.height});
+            const param = { scaleRate: scale, offsetX: offsetX, offsetY: -100 - (offsetY * i) };
+            arr.push(param);
+            const rect = {x: 0, y: 0, width: Number(splitList[i]) + 10, height: opts.height};
+            rectList.push(rect);
+        }
+        this.$painter.updateTransform1(arr, rectList);
     }
 
     setLevelVisible(list) {

src/jmapNew/shape/Section/index.js

@@ -768,7 +768,7 @@ export default class Section extends Group {
         if (this.section) {
             return this.section.getBoundingRect();
         } else {
-            return super.getBoundingRect();
+            return this.name.getBoundingRect();
         }
     }
 

src/jmapNew/theme/factory.js

@@ -3,7 +3,6 @@ class Theme {
         this._code = '02';
         this._mapMenu = {
             '01': 'chengdu_01',
-            // '01': 'xian_02',
             '02': 'fuzhou_01',
             '03': 'beijing_01',
             '04': 'chengdu_03',

src/jmapNew/theme/ningbo_01/model.js

@@ -3,6 +3,7 @@ import deviceType from '../../constant/deviceType';
 class Model {
     constructor() {
         this.screenLine = 3;
+        this.screenSplit = ['5165', '10303'];
         // 公共字段部分默认初始值
         this['public'] = {};
         this['public'][deviceType.Signal] = {

src/jmapNew/transformHandleScreen.js

@@ -10,17 +10,21 @@ class TransformHandle {
         this.parentLevel = painter.getParentLevel();
 
         this.rect = { x: 0, y: 0, width: 0, height: 0 };
+        this.rectList = [];
         this.transform = [createTransform({ scaleRate: 1, offsetX: 0, offsetY: 0 })];
     }
 
-    checkVisible(view) {
-        return createBoundingRect(view).intersect(this.rect); // 判断是否相交
+    checkVisible(view, rect) {
+        // return createBoundingRect(view).intersect(this.rect); // 判断是否相交
+        return createBoundingRect(view).intersect(rect); // 判断是否相交
     }
 
     // 视图进行缩放/平移
     transformView(view) {
         if (view) {
             for (let i = 0; i < this.transform.length; i++) {
+                const rect = this.rectList[i];
+                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);
@@ -28,7 +32,10 @@ class TransformHandle {
                         view.hide();
                         return;
                     }
-                if (this.checkVisible(view)) { view.show(); return; } else { view.hide(); }
+                    view.show(); return;
+                }
+                // console.log(view, rect);
+                // if (this.checkVisible(view, rect)) { view.show(); return; } else { view.hide(); }
             }
             view.dirty(); // 更新
         }
@@ -45,12 +52,14 @@ class TransformHandle {
     }
 
     // 更新偏移量
-    updateTransform(list, opts) {
-        this.rect = { x: opts.x, y: opts.y, width: opts.width, height: opts.height };
+    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 => {
             this.transform.push(createTransform(item));
         });
+        console.log(this.transform, this.rectList, '------');
         this.transformAll();
     }