ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

【pr】大屏设计器添加缩放

Browse Source
程序员世林 2 years ago
parent d372f9bf16
commit afbc639913
2 changed files with 232 additions and 74 deletions
Show Stats Download Patch File Download Diff File

220
report-ui/src/views/bigscreenDesigner/designer/index.vue
Unescape Escape View File

@ -123,6 +123,66 @@
</el-tooltip> </el-tooltip>
</span> </span>
<span
:class="{
'btn': true,
'btn-disable': currentSizeRangeIndex === 0
}"
@click="setSize(0)"
>
<el-tooltip
class="item"
:disabled="currentSizeRangeIndex === 0"
effect="dark"
content="缩小"
placement="bottom"
>
<!-- <svg-icon style="font-size:16px;" icon-class="jianhao" class-name="icon" /> -->
<i class="el-icon-minus" style="font-size:16px;" />
</el-tooltip>
</span>
<!--
class="btn scale-num"
:style="currentSizeRangeIndex === defaultSize.index ? 'cursor: no-drop;' : ''" -->
<span
:class="{
'btn': true,
'scale-num': true,
'btn-disable': currentSizeRangeIndex === defaultSize.index
}"
@click="setSize(2)"
>
<el-tooltip
class="item"
:disabled="currentSizeRangeIndex === defaultSize.index"
effect="dark"
content="默认比例"
placement="bottom"
>
<span>
{{ parseInt(scaleNum) }}%
</span>
</el-tooltip>
</span>
<span
:class="{
'btn': true,
'btn-disable': currentSizeRangeIndex === 8
}"
@click="setSize(1)"
>
<el-tooltip
class="item"
:disabled="currentSizeRangeIndex === 8"
effect="dark"
content="放大"
placement="bottom"
>
<!-- <svg-icon style="font-size:16px;" icon-class="jiahao" class-name="icon" /> -->
<i class="el-icon-plus" style="font-size:16px;" />
</el-tooltip>
</span>
<span class="btn" v-permission="'bigScreenManage:export'"> <span class="btn" v-permission="'bigScreenManage:export'">
<el-tooltip <el-tooltip
class="item" class="item"
@ -176,15 +236,25 @@
</ul> </ul>
</span> </span>
</div> </div>
<!-- 中间操作内容 主体 -->
<!-- :style="{
width: bigscreenWidthInWorkbench + 'px',
height: bigscreenHeightInWorkbench + 'px',
}" -->
<div <div
class="workbench-container" class="workbench-container"
@mousedown="handleMouseDown"
>
<div
:style="{ :style="{
width: bigscreenWidthInWorkbench + 'px', width: ((+bigscreenWidth + 18) * bigscreenScaleInWorkbench) + 'px',
height: bigscreenHeightInWorkbench + 'px', height: ((+bigscreenHeight + 18) * bigscreenScaleInWorkbench) + 'px'
}" }"
@mousedown="handleMouseDown" class="vue-ruler-tool-wrap"
> >
<!-- 大屏设计页面的标尺插件 -->
<vue-ruler-tool <vue-ruler-tool
ref="vue-ruler-tool"
v-model="dashboard.presetLine" v-model="dashboard.presetLine"
class="vueRuler" class="vueRuler"
:step-length="50" :step-length="50"
@ -192,12 +262,17 @@
:position="'relative'" :position="'relative'"
:is-scale-revise="true" :is-scale-revise="true"
:visible.sync="dashboard.presetLineVisible" :visible.sync="dashboard.presetLineVisible"
:style="{
width: +bigscreenWidth + 18 + 'px',
height: +bigscreenHeight + 18 +'px',
transform: currentSizeRangeIndex === defaultSize.index ? workbenchTransform : `scale(${sizeRange[currentSizeRangeIndex]/100})`,
transformOrigin: '0 0'
}"
> >
<div <div
id="workbench" id="workbench"
class="workbench" class="workbench"
:style="{ :style="{
transform: workbenchTransform,
width: bigscreenWidth + 'px', width: bigscreenWidth + 'px',
height: bigscreenHeight + 'px', height: bigscreenHeight + 'px',
'background-color': dashboard.backgroundColor, 'background-color': dashboard.backgroundColor,
@ -232,6 +307,7 @@
</vue-ruler-tool> </vue-ruler-tool>
</div> </div>
</div> </div>
</div>
<div class="layout-right" :style="{ width: widthLeftForOptions + 'px' }"> <div class="layout-right" :style="{ width: widthLeftForOptions + 'px' }">
<el-tabs v-model="activeName" type="border-card" :stretch="true"> <el-tabs v-model="activeName" type="border-card" :stretch="true">
@ -270,17 +346,6 @@
@onChanged="(val) => widgetValueChanged('position', val)" @onChanged="(val) => widgetValueChanged('position', val)"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane
v-if="isNotNull(widgetOptions.methods)"
name="four"
label="方法"
>
<dynamicForm
ref="formData"
:options="widgetOptions.methods"
@onChanged="(val) => widgetValueChanged('methods', val)"
/>
</el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
@ -312,7 +377,6 @@ import VueRulerTool from "vue-ruler-tool"; // 大屏设计页面的标尺插件
import contentMenu from "./components/contentMenu"; import contentMenu from "./components/contentMenu";
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
import { Revoke } from "@/utils/revoke"; //处理历史记录 2022-02-22 import { Revoke } from "@/utils/revoke"; //处理历史记录 2022-02-22
import { setAssChartData } from "@/utils/screen.js";
export default { export default {
name: "Login", name: "Login",
@ -372,7 +436,6 @@ export default {
top: 0, top: 0,
zIndex: 0, zIndex: 0,
}, },
methods: {},
}, },
// options属性是从工具栏中拿到的tools中拿到 // options属性是从工具栏中拿到的tools中拿到
options: [], options: [],
@ -395,6 +458,9 @@ export default {
visibleContentMenu: false, visibleContentMenu: false,
rightClickIndex: -1, rightClickIndex: -1,
activeName: "first", activeName: "first",
scaleNum: 0, // 当前缩放百分比的值
sizeRange: [20, 40, 60, 80, 100, 150, 200, 300, 400], // 缩放百分比
currentSizeRangeIndex: -1 // 当前是哪个缩放比分比
}; };
}, },
computed: { computed: {
@ -432,6 +498,24 @@ export default {
workbenchTransform() { workbenchTransform() {
return `scale(${this.bigscreenScaleInWorkbench}, ${this.bigscreenScaleInWorkbench})`; return `scale(${this.bigscreenScaleInWorkbench}, ${this.bigscreenScaleInWorkbench})`;
}, },
// 初始的缩放百分比 和 下标
defaultSize() {
const obj = {
index: -1,
size: '50'
}
this.sizeRange.some((item, index) => {
if (item <= (100 * this.bigscreenScaleInWorkbench)) {
obj.index = index
obj.size = 100 * this.bigscreenScaleInWorkbench // item
}
})
if (obj.index === -1) {
obj.index = 0
obj.size = this.sizeRange[0]
}
return obj
},
// 大屏在设计模式的大小 // 大屏在设计模式的大小
bigscreenWidthInWorkbench() { bigscreenWidthInWorkbench() {
return this.getPXUnderScale(this.bigscreenWidth) + this.widthPaddingTools; return this.getPXUnderScale(this.bigscreenWidth) + this.widthPaddingTools;
@ -445,6 +529,7 @@ export default {
watch: { watch: {
widgets: { widgets: {
handler(val) { handler(val) {
this.handlerLayerWidget(val);
//以下部分是记录历史 //以下部分是记录历史
this.$nextTick(() => { this.$nextTick(() => {
this.revoke.push(this.widgets); this.revoke.push(this.widgets);
@ -452,6 +537,21 @@ export default {
}, },
deep: true, deep: true,
}, },
defaultSize: {
handler(val) {
if (val !== -1) {
this.currentSizeRangeIndex = val.index
this.scaleNum = val.size
}
},
immediate: true
},
bigscreenWidth() {
this.initVueRulerTool()
},
bigscreenHeight() {
this.initVueRulerTool()
}
}, },
created() { created() {
/* 以下是记录历史的 */ /* 以下是记录历史的 */
@ -464,8 +564,52 @@ export default {
window.addEventListener("mouseup", () => { window.addEventListener("mouseup", () => {
this.grade = false; this.grade = false;
}); });
this.$nextTick(() => {
this.initVueRulerTool() // 初始化 修正插件样式
})
}, },
methods: { methods: {
/**
* @param num: 0缩小 1放大 2默认比例
* sizeRange: [20, 40, 60, 72, 100, 150, 200, 300, 400]
*/
setSize(num) {
if (num === 0) { // 缩小
if (this.currentSizeRangeIndex === 0) return
this.currentSizeRangeIndex -= 1
} else if (num === 1) { // 放大
if (this.currentSizeRangeIndex === 8) return
this.currentSizeRangeIndex += 1
} else if (num === 2) { // 正常比例
this.currentSizeRangeIndex = this.defaultSize.index
}
this.scaleNum = this.currentSizeRangeIndex === this.defaultSize.index ? this.defaultSize.size : this.sizeRange[this.currentSizeRangeIndex]
},
// 初始化 修正插件样式
initVueRulerTool() {
const vueRulerToolDom = this.$refs['vue-ruler-tool'].$el // 操作面板 第三方插件工具
const contentDom = vueRulerToolDom.querySelector('.vue-ruler-content')
const vueRulerX = vueRulerToolDom.querySelector('.vue-ruler-h') // 横向标尺
const vueRulerY = vueRulerToolDom.querySelector('.vue-ruler-v') // 纵向标尺
// vueRulerToolDom.style.cssText += ';width:' + (this.bigscreenWidth + 18) + 'px !important;height:' + (this.bigscreenHeight + 18) + 'px !important;'
contentDom.style.width = '100%'
contentDom.style.height = '100%'
let xHtmlContent = '' // '<span class="n" style="left: 2px;">0</span>'
let yHtmlContent = '' // '<span class="n" style="top: 2px;">0</span>'
let currentNum = 0
while (currentNum < +this.bigscreenWidth) {
xHtmlContent += `<span class="n" style="left: ${currentNum + 2}px;">${currentNum}</span>`
currentNum += 50
}
currentNum = 0
while (currentNum < +this.bigscreenHeight) {
yHtmlContent += `<span class="n" style="top: ${currentNum + 2}px;">${currentNum}</span>`
currentNum += 50
}
vueRulerX.innerHTML = xHtmlContent
vueRulerY.innerHTML = yHtmlContent
},
/** /**
* @description: 恢复 * @description: 恢复
* @param {*} * @param {*}
@ -491,7 +635,6 @@ export default {
this.widgets = record; this.widgets = record;
}, },
handlerLayerWidget(val) { handlerLayerWidget(val) {
console.log(val);
const layerWidgetArr = []; const layerWidgetArr = [];
for (let i = 0; i < val.length; i++) { for (let i = 0; i < val.length; i++) {
const obj = {}; const obj = {};
@ -501,14 +644,10 @@ export default {
if (el.name == "layerName") { if (el.name == "layerName") {
obj.label = el.value; obj.label = el.value;
} }
if (el.name == "uuid") {
obj.uuid = el.value;
}
}); });
layerWidgetArr.push(obj); layerWidgetArr.push(obj);
} }
this.layerWidget = layerWidgetArr; this.layerWidget = layerWidgetArr;
setAssChartData(this.widgets, this.layerWidget);
}, },
async initEchartData() { async initEchartData() {
const reportCode = this.$route.query.reportCode; const reportCode = this.$route.query.reportCode;
@ -520,7 +659,6 @@ export default {
this.dashboard = screenData; this.dashboard = screenData;
this.bigscreenWidth = this.dashboard.width; this.bigscreenWidth = this.dashboard.width;
this.bigscreenHeight = this.dashboard.height; this.bigscreenHeight = this.dashboard.height;
this.handlerLayerWidget(this.widgets);
}, },
handleBigScreen(data) { handleBigScreen(data) {
const optionScreen = getToolByCode("screen").options; const optionScreen = getToolByCode("screen").options;
@ -714,9 +852,15 @@ export default {
let widgetTopInWorkbench = eventY - workbenchPosition.top; let widgetTopInWorkbench = eventY - workbenchPosition.top;
let widgetLeftInWorkbench = eventX - workbenchPosition.left; let widgetLeftInWorkbench = eventX - workbenchPosition.left;
const targetScale =
this.currentSizeRangeIndex === this.defaultSize.index
? this.bigscreenScaleInWorkbench
: this.sizeRange[this.currentSizeRangeIndex] / 100
// 计算在缩放模式下的x y // 计算在缩放模式下的x y
let x = widgetLeftInWorkbench / this.bigscreenScaleInWorkbench; // const x = widgetLeftInWorkbench / this.bigscreenScaleInWorkbench
let y = widgetTopInWorkbench / this.bigscreenScaleInWorkbench; // const y = widgetTopInWorkbench / this.bigscreenScaleInWorkbench
const x = widgetLeftInWorkbench / targetScale
const y = widgetTopInWorkbench / targetScale
// 复制一个组件 // 复制一个组件
let tool = getToolByCode(widgetType); let tool = getToolByCode(widgetType);
@ -748,9 +892,6 @@ export default {
this.widgets.push(this.deepClone(widgetJsonValue)); this.widgets.push(this.deepClone(widgetJsonValue));
// 激活新组件的配置属性 // 激活新组件的配置属性
this.setOptionsOnClickWidget(this.widgets.length - 1); this.setOptionsOnClickWidget(this.widgets.length - 1);
console.log("123", this.widgets);
this.handlerLayerWidget(this.widgets);
}, },
// 对组件默认值处理 // 对组件默认值处理
@ -869,7 +1010,7 @@ export default {
el.value = this.bigscreenWidth; el.value = this.bigscreenWidth;
} else if (el.name == "height") { } else if (el.name == "height") {
el.value = this.bigscreenHeight; el.value = this.bigscreenHeight;
} else if (this.dashboard.hasOwn(el.name)) { } else if (this.dashboard.hasOwnProperty(el.name)) {
el["value"] = this.dashboard[el.name]; el["value"] = this.dashboard[el.name];
} }
newSetup.push(el); newSetup.push(el);
@ -1125,6 +1266,21 @@ export default {
} }
} }
} }
.btn-disable {
opacity: 0.3;
cursor: no-drop;
}
.scale-num {
color: #788994;
opacity: 1;
cursor: pointer;
&.btn-disable {
cursor: no-drop;
&:hover {
background: #20262C
}
}
}
} }
.workbench-container { .workbench-container {
@ -1135,10 +1291,12 @@ export default {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: auto;
.vueRuler { .vueRuler {
width: 100%; // width: 100%;
padding: 18px 0px 0px 18px; // padding: 18px 0px 0px 18px;
padding: 0;
} }
.workbench { .workbench {

2
report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue
Unescape Escape View File

@ -13,10 +13,10 @@
:top="widgetsTop" :top="widgetsTop"
ref="draggable" ref="draggable"
:index="index" :index="index"
:z-index="-1"
@focus="handleFocus" @focus="handleFocus"
@blur="handleBlur" @blur="handleBlur"
> >
<!-- :z-index="-1" -->
<component :is="type" :value="value" /> <component :is="type" :value="value" />
</avue-draggable> </avue-draggable>
</template> </template>

Write Preview
Loading…
Cancel
Save