调整大屏显示

This commit is contained in:
zyy 2020-05-11 15:29:25 +08:00
parent 942510398a
commit 811ec26af1
5 changed files with 52 additions and 21 deletions

View File

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

View File

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

View File

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

View File

@ -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] = {

View File

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