This commit is contained in:
fan 2021-09-06 17:50:01 +08:00
commit abf36ad841
5 changed files with 84 additions and 22 deletions

View File

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

View File

@ -225,6 +225,11 @@ class Painter {
this.screenFlag = true;
this.$transformHandleScreen.updateTransform(list, opts);
}
updateScreenZoom(bili) {
return this.$jmap.calculateScreenPosition(bili);
}
/**
* 更新zrender尺寸
* @param {*} opt

View File

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

View File

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

View File

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