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

添加锁定 解除锁定

Browse Source
qianlishi 2 years ago
parent 6cab29368a
commit 9ba35a1a6c
4 changed files with 171 additions and 155 deletions
Show Stats Download Patch File Download Diff File

26
report-ui/src/views/bigscreenDesigner/designer/components/contentMenu.vue
Unescape Escape View File

@ -3,6 +3,12 @@
<div class="contentmenu__item" @click="deleteLayer"> <div class="contentmenu__item" @click="deleteLayer">
<i class="iconfont iconguanbi"></i> 删除图层 <i class="iconfont iconguanbi"></i> 删除图层
</div> </div>
<div class="contentmenu__item" @click="lockLayer">
<i class="iconfont iconfuzhi1"></i> 锁定图层
</div>
<div class="contentmenu__item" @click="noLockLayer">
<i class="iconfont iconfuzhi1"></i> 解除锁定
</div>
<div class="contentmenu__item" @click="copyLayer"> <div class="contentmenu__item" @click="copyLayer">
<i class="iconfont iconfuzhi1"></i> 复制图层 <i class="iconfont iconfuzhi1"></i> 复制图层
</div> </div>
@ -24,7 +30,7 @@
export default { export default {
props: { props: {
styleObj: Object, styleObj: Object,
visible: Boolean visible: Boolean,
}, },
data() { data() {
return {}; return {};
@ -36,7 +42,7 @@ export default {
} else { } else {
document.body.removeEventListener("click", this.closeMenu); document.body.removeEventListener("click", this.closeMenu);
} }
} },
}, },
methods: { methods: {
closeMenu() { closeMenu() {
@ -46,22 +52,28 @@ export default {
this.$confirm("是否删除所选图层?", "提示", { this.$confirm("是否删除所选图层?", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning",
}) })
.then(() => { .then(() => {
this.$emit("deletelayer"); this.$emit("deletelayer");
this.$message({ this.$message({
type: "success", type: "success",
message: "删除成功!" message: "删除成功!",
}); });
}) })
.catch(() => { .catch(() => {
this.$message({ this.$message({
type: "info", type: "info",
message: "已取消删除" message: "已取消删除",
}); });
}); });
}, },
lockLayer() {
this.$emit("lockLayer");
},
noLockLayer() {
this.$emit("noLockLayer");
},
copyLayer() { copyLayer() {
this.$emit("copylayer"); this.$emit("copylayer");
}, },
@ -76,8 +88,8 @@ export default {
}, },
movedownLayer() { movedownLayer() {
this.$emit("movedownLayer"); this.$emit("movedownLayer");
} },
} },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

@ -1,10 +1,3 @@
<!--
* @Descripttion: 大屏设计器
* @Author: lide1202@hotmail.com
* @Date: 2021-3-13 11:04:24
* @Last Modified by: lide1202@hotmail.com
* @Last Modified time: 2021-3-13 11:04:24
!-->
<template> <template>
<div class="layout"> <div class="layout">
<div <div
@ -125,8 +118,8 @@
<span <span
:class="{ :class="{
'btn': true, btn: true,
'btn-disable': currentSizeRangeIndex === 0 'btn-disable': currentSizeRangeIndex === 0,
}" }"
@click="setSize(0)" @click="setSize(0)"
> >
@ -138,7 +131,7 @@
placement="bottom" placement="bottom"
> >
<!-- <svg-icon style="font-size:16px;" icon-class="jianhao" class-name="icon" /> --> <!-- <svg-icon style="font-size:16px;" icon-class="jianhao" class-name="icon" /> -->
<i class="el-icon-minus" style="font-size:16px;" /> <i class="el-icon-minus" style="font-size: 16px" />
</el-tooltip> </el-tooltip>
</span> </span>
<!-- <!--
@ -146,9 +139,9 @@
:style="currentSizeRangeIndex === defaultSize.index ? 'cursor: no-drop;' : ''" --> :style="currentSizeRangeIndex === defaultSize.index ? 'cursor: no-drop;' : ''" -->
<span <span
:class="{ :class="{
'btn': true, btn: true,
'scale-num': true, 'scale-num': true,
'btn-disable': currentSizeRangeIndex === defaultSize.index 'btn-disable': currentSizeRangeIndex === defaultSize.index,
}" }"
@click="setSize(2)" @click="setSize(2)"
> >
@ -159,15 +152,13 @@
content="默认比例" content="默认比例"
placement="bottom" placement="bottom"
> >
<span> <span> {{ parseInt(scaleNum) }}% </span>
{{ parseInt(scaleNum) }}%
</span>
</el-tooltip> </el-tooltip>
</span> </span>
<span <span
:class="{ :class="{
'btn': true, btn: true,
'btn-disable': currentSizeRangeIndex === 8 'btn-disable': currentSizeRangeIndex === 8,
}" }"
@click="setSize(1)" @click="setSize(1)"
> >
@ -179,7 +170,7 @@
placement="bottom" placement="bottom"
> >
<!-- <svg-icon style="font-size:16px;" icon-class="jiahao" class-name="icon" /> --> <!-- <svg-icon style="font-size:16px;" icon-class="jiahao" class-name="icon" /> -->
<i class="el-icon-plus" style="font-size:16px;" /> <i class="el-icon-plus" style="font-size: 16px" />
</el-tooltip> </el-tooltip>
</span> </span>
@ -241,14 +232,11 @@
width: bigscreenWidthInWorkbench + 'px', width: bigscreenWidthInWorkbench + 'px',
height: bigscreenHeightInWorkbench + 'px', height: bigscreenHeightInWorkbench + 'px',
}" --> }" -->
<div <div class="workbench-container" @mousedown="handleMouseDown">
class="workbench-container"
@mousedown="handleMouseDown"
>
<div <div
:style="{ :style="{
width: ((+bigscreenWidth + 18) * bigscreenScaleInWorkbench) + 'px', width: (+bigscreenWidth + 18) * bigscreenScaleInWorkbench + 'px',
height: ((+bigscreenHeight + 18) * bigscreenScaleInWorkbench) + 'px' height: (+bigscreenHeight + 18) * bigscreenScaleInWorkbench + 'px',
}" }"
class="vue-ruler-tool-wrap" class="vue-ruler-tool-wrap"
> >
@ -264,9 +252,12 @@
:visible.sync="dashboard.presetLineVisible" :visible.sync="dashboard.presetLineVisible"
:style="{ :style="{
width: +bigscreenWidth + 18 + 'px', width: +bigscreenWidth + 18 + 'px',
height: +bigscreenHeight + 18 +'px', height: +bigscreenHeight + 18 + 'px',
transform: currentSizeRangeIndex === defaultSize.index ? workbenchTransform : `scale(${sizeRange[currentSizeRangeIndex]/100})`, transform:
transformOrigin: '0 0' currentSizeRangeIndex === defaultSize.index
? workbenchTransform
: `scale(${sizeRange[currentSizeRangeIndex] / 100})`,
transformOrigin: '0 0',
}" }"
> >
<div <div
@ -356,6 +347,8 @@
:visible.sync="visibleContentMenu" :visible.sync="visibleContentMenu"
:style-obj="styleObj" :style-obj="styleObj"
@deletelayer="deletelayer" @deletelayer="deletelayer"
@lockLayer="lockLayer"
@noLockLayer="noLockLayer"
@copylayer="copylayer" @copylayer="copylayer"
@istopLayer="istopLayer" @istopLayer="istopLayer"
@setlowLayer="setlowLayer" @setlowLayer="setlowLayer"
@ -507,19 +500,19 @@ export default {
defaultSize() { defaultSize() {
const obj = { const obj = {
index: -1, index: -1,
size: '50' size: "50",
} };
this.sizeRange.some((item, index) => { this.sizeRange.some((item, index) => {
if (item <= (100 * this.bigscreenScaleInWorkbench)) { if (item <= 100 * this.bigscreenScaleInWorkbench) {
obj.index = index obj.index = index;
obj.size = 100 * this.bigscreenScaleInWorkbench // item obj.size = 100 * this.bigscreenScaleInWorkbench; // item
} }
}) });
if (obj.index === -1) { if (obj.index === -1) {
obj.index = 0 obj.index = 0;
obj.size = this.sizeRange[0] obj.size = this.sizeRange[0];
} }
return obj return obj;
}, },
// 大屏在设计模式的大小 // 大屏在设计模式的大小
bigscreenWidthInWorkbench() { bigscreenWidthInWorkbench() {
@ -535,7 +528,7 @@ export default {
widgets: { widgets: {
handler(val) { handler(val) {
this.handlerLayerWidget(val); this.handlerLayerWidget(val);
this.handlerdynamicDataParamsConfig(val) this.handlerdynamicDataParamsConfig(val);
//以下部分是记录历史 //以下部分是记录历史
this.$nextTick(() => { this.$nextTick(() => {
this.revoke.push(this.widgets); this.revoke.push(this.widgets);
@ -546,18 +539,18 @@ export default {
defaultSize: { defaultSize: {
handler(val) { handler(val) {
if (val !== -1) { if (val !== -1) {
this.currentSizeRangeIndex = val.index this.currentSizeRangeIndex = val.index;
this.scaleNum = val.size this.scaleNum = val.size;
} }
}, },
immediate: true immediate: true,
}, },
bigscreenWidth() { bigscreenWidth() {
this.initVueRulerTool() this.initVueRulerTool();
}, },
bigscreenHeight() { bigscreenHeight() {
this.initVueRulerTool() this.initVueRulerTool();
} },
}, },
created() { created() {
/* 以下是记录历史的 */ /* 以下是记录历史的 */
@ -571,8 +564,8 @@ export default {
this.grade = false; this.grade = false;
}); });
this.$nextTick(() => { this.$nextTick(() => {
this.initVueRulerTool() // 初始化 修正插件样式 this.initVueRulerTool(); // 初始化 修正插件样式
}) });
}, },
methods: { methods: {
/** /**
@ -580,41 +573,51 @@ export default {
* sizeRange: [20, 40, 60, 72, 100, 150, 200, 300, 400] * sizeRange: [20, 40, 60, 72, 100, 150, 200, 300, 400]
*/ */
setSize(num) { setSize(num) {
if (num === 0) { // 缩小 if (num === 0) {
if (this.currentSizeRangeIndex === 0) return // 缩小
this.currentSizeRangeIndex -= 1 if (this.currentSizeRangeIndex === 0) return;
} else if (num === 1) { // 放大 this.currentSizeRangeIndex -= 1;
if (this.currentSizeRangeIndex === 8) return } else if (num === 1) {
this.currentSizeRangeIndex += 1 // 放大
} else if (num === 2) { // 正常比例 if (this.currentSizeRangeIndex === 8) return;
this.currentSizeRangeIndex = this.defaultSize.index this.currentSizeRangeIndex += 1;
} } else if (num === 2) {
this.scaleNum = this.currentSizeRangeIndex === this.defaultSize.index ? this.defaultSize.size : this.sizeRange[this.currentSizeRangeIndex] // 正常比例
this.currentSizeRangeIndex = this.defaultSize.index;
}
this.scaleNum =
this.currentSizeRangeIndex === this.defaultSize.index
? this.defaultSize.size
: this.sizeRange[this.currentSizeRangeIndex];
}, },
// 初始化 修正插件样式 // 初始化 修正插件样式
initVueRulerTool() { initVueRulerTool() {
const vueRulerToolDom = this.$refs['vue-ruler-tool'].$el // 操作面板 第三方插件工具 const vueRulerToolDom = this.$refs["vue-ruler-tool"].$el; // 操作面板 第三方插件工具
const contentDom = vueRulerToolDom.querySelector('.vue-ruler-content') const contentDom = vueRulerToolDom.querySelector(".vue-ruler-content");
const vueRulerX = vueRulerToolDom.querySelector('.vue-ruler-h') // 横向标尺 const vueRulerX = vueRulerToolDom.querySelector(".vue-ruler-h"); // 横向标尺
const vueRulerY = vueRulerToolDom.querySelector('.vue-ruler-v') // 纵向标尺 const vueRulerY = vueRulerToolDom.querySelector(".vue-ruler-v"); // 纵向标尺
// vueRulerToolDom.style.cssText += ';width:' + (this.bigscreenWidth + 18) + 'px !important;height:' + (this.bigscreenHeight + 18) + 'px !important;' // vueRulerToolDom.style.cssText += ';width:' + (this.bigscreenWidth + 18) + 'px !important;height:' + (this.bigscreenHeight + 18) + 'px !important;'
contentDom.style.width = '100%' contentDom.style.width = "100%";
contentDom.style.height = '100%' contentDom.style.height = "100%";
let xHtmlContent = '' // '<span class="n" style="left: 2px;">0</span>' let xHtmlContent = ""; // '<span class="n" style="left: 2px;">0</span>'
let yHtmlContent = '' // '<span class="n" style="top: 2px;">0</span>' let yHtmlContent = ""; // '<span class="n" style="top: 2px;">0</span>'
let currentNum = 0 let currentNum = 0;
while (currentNum < +this.bigscreenWidth) { while (currentNum < +this.bigscreenWidth) {
xHtmlContent += `<span class="n" style="left: ${currentNum + 2}px;">${currentNum}</span>` xHtmlContent += `<span class="n" style="left: ${
currentNum += 50 currentNum + 2
}px;">${currentNum}</span>`;
currentNum += 50;
} }
currentNum = 0 currentNum = 0;
while (currentNum < +this.bigscreenHeight) { while (currentNum < +this.bigscreenHeight) {
yHtmlContent += `<span class="n" style="top: ${currentNum + 2}px;">${currentNum}</span>` yHtmlContent += `<span class="n" style="top: ${
currentNum += 50 currentNum + 2
}px;">${currentNum}</span>`;
currentNum += 50;
} }
vueRulerX.innerHTML = xHtmlContent vueRulerX.innerHTML = xHtmlContent;
vueRulerY.innerHTML = yHtmlContent vueRulerY.innerHTML = yHtmlContent;
}, },
/** /**
* @description: 恢复 * @description: 恢复
@ -644,12 +647,12 @@ export default {
const layerWidgetArr = []; const layerWidgetArr = [];
for (let i = 0; i < val.length; i++) { for (let i = 0; i < val.length; i++) {
const obj = {}; const obj = {};
const myItem = getToolByCode(val[i].type) const myItem = getToolByCode(val[i].type);
obj.icon = myItem.icon; obj.icon = myItem.icon;
obj.code = myItem.code // 组件类型code obj.code = myItem.code; // 组件类型code
obj.widgetId = val[i].value.widgetId || '' // 唯一id obj.widgetId = val[i].value.widgetId || ""; // 唯一id
if (val[i].value.paramsKeys) { if (val[i].value.paramsKeys) {
obj.paramsKeys = val[i].value.paramsKeys obj.paramsKeys = val[i].value.paramsKeys;
} }
const options = val[i].options["setup"]; const options = val[i].options["setup"];
options.forEach((el) => { options.forEach((el) => {
@ -663,9 +666,9 @@ export default {
}, },
// 返回每个组件的动态数据集参数配置情况 // 返回每个组件的动态数据集参数配置情况
handlerdynamicDataParamsConfig(val) { handlerdynamicDataParamsConfig(val) {
this.widgetParamsConfig = val.map(item => { this.widgetParamsConfig = val.map((item) => {
return item.value.data return item.value.data;
}) });
}, },
async initEchartData() { async initEchartData() {
const reportCode = this.$route.query.reportCode; const reportCode = this.$route.query.reportCode;
@ -690,7 +693,8 @@ export default {
} }
this.setOptionsOnClickScreen(); this.setOptionsOnClickScreen();
return { return {
backgroundColor: (data && data.backgroundColor) || (!data ? '#1e1e1e' : ''), backgroundColor:
(data && data.backgroundColor) || (!data ? "#1e1e1e" : ""),
backgroundImage: (data && data.backgroundImage) || "", backgroundImage: (data && data.backgroundImage) || "",
height: (data && data.height) || "1080", height: (data && data.height) || "1080",
title: (data && data.title) || "", title: (data && data.title) || "",
@ -708,19 +712,21 @@ export default {
data: widgets[i].value.data, data: widgets[i].value.data,
position: widgets[i].value.position, position: widgets[i].value.position,
}; };
const tool = this.deepClone(getToolByCode(widgets[i].type)) const tool = this.deepClone(getToolByCode(widgets[i].type));
if (!tool) { if (!tool) {
const message = '暂未提供该组件或该组件下线了，组件code: ' + widgets[i].type const message =
console.error(message) "暂未提供该组件或该组件下线了，组件code: " + widgets[i].type;
if (process.env.NODE_ENV === 'development') { // 40@remarks 看生产要不要提示 console.error(message);
this.$message.error(message) if (process.env.NODE_ENV === "development") {
// 40@remarks 看生产要不要提示
this.$message.error(message);
} }
continue // 找不到就跳过，避免整个报表都加载不出来 continue; // 找不到就跳过，避免整个报表都加载不出来
} }
const option = tool.options; const option = tool.options;
const options = this.handleOptionsData(widgets[i].value, option); const options = this.handleOptionsData(widgets[i].value, option);
obj.options = options; obj.options = options;
obj.value.widgetId = obj.value.setup.widgetId obj.value.widgetId = obj.value.setup.widgetId;
widgetsData.push(obj); widgetsData.push(obj);
} }
return widgetsData; return widgetsData;
@ -780,9 +786,9 @@ export default {
}, },
widgets: this.widgets, widgets: this.widgets,
}; };
screenData.widgets.forEach(widget => { screenData.widgets.forEach((widget) => {
widget.value.setup.widgetId = widget.value.widgetId widget.value.setup.widgetId = widget.value.widgetId;
}) });
const { code, data } = await insertDashboard(screenData); const { code, data } = await insertDashboard(screenData);
if (code == "200") { if (code == "200") {
this.$message.success("保存成功！"); this.$message.success("保存成功！");
@ -861,24 +867,30 @@ export default {
}, },
dragStart(widgetCode) { dragStart(widgetCode) {
this.dragWidgetCode = widgetCode; this.dragWidgetCode = widgetCode;
this.currentWidgetTotal = this.widgets.length // 当前操作面板上有多少各组件 this.currentWidgetTotal = this.widgets.length; // 当前操作面板上有多少各组件
}, },
dragEnd() { dragEnd() {
this.dragWidgetCode = "";/** this.dragWidgetCode = "";
/**
* 40@remarks 新增组件到操作面板后，右边的配置有更新，但是当前选中的组件没更新，导致配置错乱的bug; * 40@remarks 新增组件到操作面板后，右边的配置有更新，但是当前选中的组件没更新，导致配置错乱的bug;
* 由于拖动组件拖到非操作面板上是不会添加组件，还需判断是否添加组件到操作面板上; * 由于拖动组件拖到非操作面板上是不会添加组件，还需判断是否添加组件到操作面板上;
*/ */
this.$nextTick(()=>{ this.$nextTick(() => {
if (this.widgets.length === this.currentWidgetTotal + 1) { // 确实新增了一个组件到操作面板上 if (this.widgets.length === this.currentWidgetTotal + 1) {
console.log(`新添加 '${this.widgets[this.currentWidgetTotal].value.setup.layerName}' 组件到操作面板`) // 确实新增了一个组件到操作面板上
const uuid = Number(Math.random().toString().substr(2)).toString(36) console.log(
this.widgets[this.currentWidgetTotal].value.widgetId = uuid `新添加 '${
this.layerWidget[this.currentWidgetTotal].widgetId = uuid this.widgets[this.currentWidgetTotal].value.setup.layerName
const index = this.widgets.length - 1 }' 组件到操作面板`
this.layerClick(index) // 选中当前新增的组件 );
this.grade = false // 去除网格线 const uuid = Number(Math.random().toString().substr(2)).toString(36);
} this.widgets[this.currentWidgetTotal].value.widgetId = uuid;
}) this.layerWidget[this.currentWidgetTotal].widgetId = uuid;
const index = this.widgets.length - 1;
this.layerClick(index); // 选中当前新增的组件
this.grade = false; // 去除网格线
}
});
}, },
dragOver(evt) { dragOver(evt) {
evt.preventDefault(); evt.preventDefault();
@ -900,12 +912,12 @@ export default {
const targetScale = const targetScale =
this.currentSizeRangeIndex === this.defaultSize.index this.currentSizeRangeIndex === this.defaultSize.index
? this.bigscreenScaleInWorkbench ? this.bigscreenScaleInWorkbench
: this.sizeRange[this.currentSizeRangeIndex] / 100 : this.sizeRange[this.currentSizeRangeIndex] / 100;
// 计算在缩放模式下的x y // 计算在缩放模式下的x y
// const x = widgetLeftInWorkbench / this.bigscreenScaleInWorkbench // const x = widgetLeftInWorkbench / this.bigscreenScaleInWorkbench
// const y = widgetTopInWorkbench / this.bigscreenScaleInWorkbench // const y = widgetTopInWorkbench / this.bigscreenScaleInWorkbench
const x = widgetLeftInWorkbench / targetScale const x = widgetLeftInWorkbench / targetScale;
const y = widgetTopInWorkbench / targetScale const y = widgetTopInWorkbench / targetScale;
// 复制一个组件 // 复制一个组件
let tool = getToolByCode(widgetType); let tool = getToolByCode(widgetType);
@ -1122,16 +1134,28 @@ export default {
deletelayer() { deletelayer() {
this.widgets.splice(this.rightClickIndex, 1); this.widgets.splice(this.rightClickIndex, 1);
}, },
// 锁定
lockLayer() {
const obj = this.widgets[this.rightClickIndex];
this.$set(obj.value.position, "disabled", true);
},
// 解除锁定
noLockLayer() {
const obj = this.widgets[this.rightClickIndex];
this.$set(obj.value.position, "disabled", false);
},
// 复制 // 复制
copylayer() { copylayer() {
const obj = this.deepClone(this.widgets[this.rightClickIndex]); const obj = this.deepClone(this.widgets[this.rightClickIndex]);
obj.value.position.top += 40 // 复制的元素向右下角偏移一点 obj.value.position.top += 40; // 复制的元素向右下角偏移一点
obj.value.position.left += 40 obj.value.position.left += 40;
obj.value.widgetId = Number(Math.random().toString().substr(2)).toString(36) obj.value.widgetId = Number(Math.random().toString().substr(2)).toString(
36
);
this.widgets.splice(this.widgets.length, 0, obj); this.widgets.splice(this.widgets.length, 0, obj);
this.$nextTick(() => { this.$nextTick(() => {
this.layerClick(this.widgets.length - 1) // 复制后定位到最新的组件 this.layerClick(this.widgets.length - 1); // 复制后定位到最新的组件
}) });
}, },
// 置顶 // 置顶
istopLayer() { istopLayer() {
@ -1328,7 +1352,7 @@ export default {
&.btn-disable { &.btn-disable {
cursor: no-drop; cursor: no-drop;
&:hover { &:hover {
background: #20262C background: #20262c;
} }
} }
} }
@ -1433,7 +1457,6 @@ export default {
&::-webkit-scrollbar-track-piece { &::-webkit-scrollbar-track-piece {
/*修改滚动条的背景和圆角*/ /*修改滚动条的背景和圆角*/
background: #29405c; background: #29405c;
-webkit-border-radius: 7px;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
@ -1453,13 +1476,13 @@ export default {
/*修改垂直滚动条的样式*/ /*修改垂直滚动条的样式*/
&::-webkit-scrollbar-thumb:vertical { &::-webkit-scrollbar-thumb:vertical {
background-color: #00113a; background-color: #00113a;
-webkit-border-radius: 7px; // -webkit-border-radius: 7px;
} }
/*修改水平滚动条的样式*/ /*修改水平滚动条的样式*/
&::-webkit-scrollbar-thumb:horizontal { &::-webkit-scrollbar-thumb:horizontal {
background-color: #00113a; background-color: #00113a;
-webkit-border-radius: 7px; // -webkit-border-radius: 7px;
} }
} }
} }
@ -1661,22 +1684,6 @@ li {
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0; width: 0;
} height: 10px;
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255, 0, 0, 0.4);
} }
</style> </style>

9
report-ui/src/views/bigscreenDesigner/designer/widget/form/widgetInput.vue
Unescape Escape View File

@ -2,12 +2,13 @@
<el-input <el-input
ref="input" ref="input"
:style="styleObj" :style="styleObj"
v-model="inputValue" placeholder="请输入内容" v-model="inputValue"
placeholder="请输入内容"
@[eventChange]="change" @[eventChange]="change"
/> />
</template> </template>
<script> <script>
import {eventBus} from "@/utils/eventBus"; import { eventBus } from "@/utils/eventBus";
export default { export default {
name: "WidgetInput", name: "WidgetInput",
@ -21,7 +22,7 @@ export default {
optionsStyle: {}, optionsStyle: {},
optionsData: {}, optionsData: {},
optionsSetup: {}, optionsSetup: {},
options:{} options: {},
}; };
}, },
computed: { computed: {
@ -44,7 +45,6 @@ export default {
this.optionsSetup = val.setup; this.optionsSetup = val.setup;
this.optionsData = val.data; this.optionsData = val.data;
this.optionsStyle = val.position; this.optionsStyle = val.position;
this.setOptions()
}, },
deep: true, deep: true,
}, },
@ -53,7 +53,6 @@ export default {
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.optionsData = this.value.data; this.optionsData = this.value.data;
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
this.setOptions()
}, },
methods: { methods: {
change(event) { change(event) {

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

@ -1,14 +1,9 @@
<!--
* @Author: lide1202@hotmail.com
* @Date: 2021-3-13 11:04:24
* @Last Modified by: lide1202@hotmail.com
* @Last Modified time: 2021-3-13 11:04:24
!-->
<template> <template>
<avue-draggable <avue-draggable
:step="step" :step="step"
:width="widgetsWidth" :width="widgetsWidth"
:height="widgetsHeight" :height="widgetsHeight"
:disabled="widgetDisabled"
:left="widgetsLeft" :left="widgetsLeft"
:top="widgetsTop" :top="widgetsTop"
ref="draggable" ref="draggable"
@ -17,7 +12,7 @@
@blur="handleBlur" @blur="handleBlur"
> >
<!-- :z-index="-1" --> <!-- :z-index="-1" -->
<component :is="type":widget-index="index" :value="value" /> <component :is="type" :widget-index="index" :value="value" />
</avue-draggable> </avue-draggable>
</template> </template>
@ -89,7 +84,7 @@ export default {
widgetRadar, widgetRadar,
widgetBarLineStackChart, widgetBarLineStackChart,
widgetSelect, widgetSelect,
widgetInput widgetInput,
}, },
model: { model: {
prop: "value", prop: "value",
@ -136,6 +131,9 @@ export default {
widgetsZIndex() { widgetsZIndex() {
return this.value.position.zIndex || 1; return this.value.position.zIndex || 1;
}, },
widgetDisabled() {
return this.value.position.disabled || false;
},
}, },
mounted() {}, mounted() {},
methods: { methods: {

Write Preview
Loading…
Cancel
Save