diff --git a/src/jmapNew/map.js b/src/jmapNew/map.js index 7184e2d03..ad9dba79e 100644 --- a/src/jmapNew/map.js +++ b/src/jmapNew/map.js @@ -37,6 +37,9 @@ class Jlmap { // 设备数据 this.mapDevice = {}; + // 大屏配置 + this.splitList = []; + // 默认状态 this.defaultStateDict = this.loadDefaultState(); @@ -143,6 +146,7 @@ class Jlmap { setOptions(opts) { const options = this.pullBack(opts); if (this.screenFlag) { + this.$options.update(options); this.$painter.updateScreen(options); } else { this.$options.update(options); @@ -216,8 +220,6 @@ class Jlmap { setUpdateScreen(opts) { this.setRecover({ scaleRate: 1, offsetX: 0, offsetY: 0 }); this.screenFlag = true; - const screenList = []; - const rectList = []; let rect = ''; for (const i in this.mapDevice) { const element = this.mapDevice[i]; @@ -233,31 +235,56 @@ class Jlmap { opts.offsetList = []; } const screenSplit = opts.list.length ? opts.list : Vue.prototype.$theme.loadPropConvert(this.lineCode).screenSplit; - const screenDifference = Vue.prototype.$theme.loadPropConvert(this.lineCode).screenDifference || 160; - const splitList = JSON.parse(JSON.stringify(screenSplit)); + this.splitList = JSON.parse(JSON.stringify(screenSplit)); const num = screenSplit.length + 1; - const offsetY = (opts.height - 100) / num; // 高度差 const maxWidth = rect.width; - splitList.push(maxWidth); + this.splitList.push(maxWidth); const scaleX = Math.floor((((opts.width - 200) * num) / rect.width) * 100) / 100; const scaleY = Math.floor(((opts.height - 100) / (rect.height * num)) * 100) / 100; - const scale = Math.min(scaleX, scaleY); + this.screenScale = Math.min(scaleX, scaleY); - for (let i = 0; i < splitList.length; i++) { + this.optsWidth = opts.width; + this.optsHeight = opts.height; + this.optsOffsetList = opts.offsetList; + + const scaleBili = this.screenScale; + + this.$options.scaleRate = this.screenScale || 1; + this.$options.scaleIndex = 0; + this.$options.offsetX = 0; + this.$options.offsetY = 0; + // 更新视图大小 + // this.$painter.updateTransform({ scaleRate: this.$options.scaleRate, offsetX: this.$options.offsetX, offsetY: this.$options.offsetY }); + + const {screenList, rectList} = this.calculateScreenPosition(scaleBili); + this.$painter.updateTransform1(screenList, rectList); + } + + calculateScreenPosition(scaleBili) { + const screenList = []; + const rectList = []; + const screenDifference = Vue.prototype.$theme.loadPropConvert(this.lineCode).screenDifference || 160; + const bili = scaleBili / this.screenScale; + const offsetY = (this.optsHeight - 100) / this.splitList.length; // 高度差 + + for (let i = 0; i < this.splitList.length; i++) { let offsetX = ''; if (i == 0) { - offsetX = -(opts.width - splitList[0] * scale) / 2; + offsetX = -(this.optsWidth - this.splitList[0] * scaleBili) / 2; } else { - const dx = (opts.width - (splitList[i] - splitList[i - 1]) * scale) / 2; // 居中计算偏移值 - offsetX = splitList[i - 1] * scale - dx; + const dx = (this.optsWidth - (this.splitList[i] - this.splitList[i - 1]) * scaleBili) / 2; // 居中计算偏移值 + offsetX = this.splitList[i - 1] * scaleBili - dx; } - const offset = opts.offsetList[i] || 0; - const param = { scaleRateX: scale, scaleRateY: scale, offsetX: offsetX, offsetY: -screenDifference - (offsetY * i) - offset }; + const offset = this.optsOffsetList[i] || 0; + const param = { scaleRateX: scaleBili, scaleRateY: scaleBili, offsetX: offsetX, offsetY: (-screenDifference - (offsetY * i) - offset) * bili }; screenList.push(param); - const rect = {x: 0, y: 0, width: Number(splitList[i]) + 5, height: opts.height}; + const rect = {x: 0, y: 0, width: Number(this.splitList[i]) + 5, height: this.optsHeight}; rectList.push(rect); } - this.$painter.updateTransform1(screenList, rectList); + return { + screenList, + rectList + }; } setLevelVisible(list) { diff --git a/src/jmapNew/painter.js b/src/jmapNew/painter.js index 970c8a776..d8f8f4765 100644 --- a/src/jmapNew/painter.js +++ b/src/jmapNew/painter.js @@ -225,6 +225,11 @@ class Painter { this.screenFlag = true; this.$transformHandleScreen.updateTransform(list, opts); } + + updateScreenZoom(bili) { + return this.$jmap.calculateScreenPosition(bili); + } + /** * 更新zrender尺寸 * @param {*} opt diff --git a/src/jmapNew/transformHandleScreen.js b/src/jmapNew/transformHandleScreen.js index f85a545a3..7de040eda 100644 --- a/src/jmapNew/transformHandleScreen.js +++ b/src/jmapNew/transformHandleScreen.js @@ -1,9 +1,24 @@ import {createTransform1, createBoundingRect} from './utils/parser'; + class TransformHandle { constructor(painter) { this.$painter = painter; + this.scale = ''; + this.scaleIndex = 0; + this.scaleList = [ + 0.2, 0.4, 0.6, 0.8, 0.9, + 1, 1.2, 1.4, 1.6, 1.8, + 2, 2.2, 2.4, 2.6, 2.8, + 3, 3.2, 3.4, 3.6, 3.8, + 4, 4.2, 4.4, 4.6, 4.8, + 5, 5.2, 5.4, 5.6, 5.8, + 6, 6.2, 6.4, 6.6, 6.8, + 7, 7.2, 7.4, 7.6, 7.8, + 8 + ]; + this.parentLevel = painter.getParentLevel(); this.rect = { x: 0, y: 0, width: 0, height: 0 }; @@ -79,6 +94,7 @@ class TransformHandle { // 更新偏移量 updateTransform(list, rectList) { this.rectList = rectList; + // this.scale = list[0].scaleRateX; this.transform = []; list.forEach(item => { this.transform.push(createTransform1(item)); @@ -87,10 +103,24 @@ class TransformHandle { this.transformAll(); } updataOffset(opt) { - this.transform.forEach(item => { - item[4] = item[4] + opt.dx; - item[5] = item[5] + opt.dy; - }); + if (opt.scale) { + if (opt.scale <= 0) { + this.scaleIndex = this.scaleIndex <= 0 ? 0 : this.scaleIndex - 1; + } else { + this.scaleIndex = this.scaleIndex >= 40 ? 40 : this.scaleIndex + 1; + } + const {screenList, rectList} = this.$painter.updateScreenZoom(this.scaleList[this.scaleIndex]); + this.rectList = rectList; + this.transform = []; + screenList.forEach(item => { + this.transform.push(createTransform1(item)); + }); + } else { + this.transform.forEach(item => { + item[4] = item[4] + opt.dx; + item[5] = item[5] + opt.dy; + }); + } this.transformAll1(); } updataOffsetNum(opts) { diff --git a/src/utils/baseUrl.js b/src/utils/baseUrl.js index cda1b5c90..1d7f89989 100644 --- a/src/utils/baseUrl.js +++ b/src/utils/baseUrl.js @@ -2,9 +2,9 @@ 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.8.107:9000'; // 袁琪 - BASE_API = 'http://192.168.8.167:9000'; // 旭强 + // BASE_API = 'http://192.168.8.167:9000'; // 旭强 // BASE_API = 'http://192.168.2.183:9000'; // 张赛 // BASE_API = 'http://192.168.8.140:9000'; // 杜康 // BASE_API = 'http://b29z135112.zicp.vip'; diff --git a/src/views/designPlatform/bigScreen.vue b/src/views/designPlatform/bigScreen.vue index 2257960e9..7af525824 100644 --- a/src/views/designPlatform/bigScreen.vue +++ b/src/views/designPlatform/bigScreen.vue @@ -62,7 +62,7 @@ export default { }, '$store.state.map.mapViewLoadedCount':function() { this.$store.dispatch('map/setTrainWindowShow', false); - this.$jlmap.off('zoom'); + // this.$jlmap.off('zoom'); this.handleUpdateScreen(); if (this.$route.query.group && !this.$route.path.includes('displayIscs')) { this.subscribe();