diff --git a/src/jmapNew/map.js b/src/jmapNew/map.js index 4cc2ba8b1..8e8ad970f 100644 --- a/src/jmapNew/map.js +++ b/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) }; + // 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; + } + 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, {x: dx, y: 0, width: spliceWidth, height: opts.height}); + this.$painter.updateTransform1(arr, rectList); } setLevelVisible(list) { diff --git a/src/jmapNew/shape/Section/index.js b/src/jmapNew/shape/Section/index.js index c981f37f1..60d7fd065 100644 --- a/src/jmapNew/shape/Section/index.js +++ b/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(); } } diff --git a/src/jmapNew/theme/factory.js b/src/jmapNew/theme/factory.js index f9b2178d6..3f21fcace 100644 --- a/src/jmapNew/theme/factory.js +++ b/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', diff --git a/src/jmapNew/theme/ningbo_01/model.js b/src/jmapNew/theme/ningbo_01/model.js index c63bbaad6..60299dbbe 100644 --- a/src/jmapNew/theme/ningbo_01/model.js +++ b/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] = { diff --git a/src/jmapNew/transformHandleScreen.js b/src/jmapNew/transformHandleScreen.js index 19b77af4f..e8c76c604 100644 --- a/src/jmapNew/transformHandleScreen.js +++ b/src/jmapNew/transformHandleScreen.js @@ -10,25 +10,32 @@ 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++) { - 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; + 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); + if (propConvert.handleScreenProps && propConvert.handleScreenProps(view)) { + view.hide(); + return; + } + view.show(); return; } - if (this.checkVisible(view)) { view.show(); return; } else { view.hide(); } + // 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(); }