+
-
-
-
+
+
-
+ @click.self="setOptionsOnClickScreen">
+
-
-
-
+
+
- widgetValueChanged('setup', val)"
- />
+ name="first"
+ label="配置">
+ widgetValueChanged('setup', val)" />
-
- widgetValueChanged('data', val)"
- />
+
+ widgetValueChanged('data', val)" />
-
- widgetValueChanged('position', val)"
- />
+
+ widgetValueChanged('position', val)" />
-
+
@@ -197,7 +197,7 @@ export default {
dynamicForm,
contentMenu
},
- data() {
+ data () {
return {
layerWidget: [],
widgetTools: widgetTools, // 左侧工具栏的组件图标,将js变量加入到当前作用域
@@ -264,7 +264,7 @@ export default {
},
computed: {
// 左侧折叠切换时,动态计算中间区的宽度
- middleWidth() {
+ middleWidth () {
var widthLeftAndRight = 0;
if (this.toolIsShow) {
widthLeftAndRight += this.widthLeftForTools; // 左侧工具栏宽度
@@ -275,37 +275,36 @@ export default {
var middleWidth = this.bodyWidth - widthLeftAndRight;
return middleWidth;
},
- middleHeight() {
+ middleHeight () {
return this.bodyHeight;
},
// 设计台按大屏的缩放比例
- bigscreenScaleInWorkbench() {
+ bigscreenScaleInWorkbench () {
var widthScale = this.middleWidth / this.bigscreenWidth;
var heightScale = this.middleHeight / this.bigscreenHeight;
return Math.min(widthScale, heightScale);
},
- workbenchTransform() {
- return `scale(${this.bigscreenScaleInWorkbench}, ${
- this.bigscreenScaleInWorkbench
- })`;
+ workbenchTransform () {
+ return `scale(${this.bigscreenScaleInWorkbench}, ${this.bigscreenScaleInWorkbench
+ })`;
},
// 大屏在设计模式的大小
- bigscreenWidthInWorkbench() {
+ bigscreenWidthInWorkbench () {
return this.getPXUnderScale(this.bigscreenWidth);
},
- bigscreenHeightInWorkbench() {
+ bigscreenHeightInWorkbench () {
return this.getPXUnderScale(this.bigscreenHeight);
}
},
watch: {
widgets: {
- handler(val) {
+ handler (val) {
this.handlerLayerWidget(val);
},
deep: true
}
},
- mounted() {
+ mounted () {
// 一进入时,加载屏幕配置属性
this.setOptionsOnClickScreen();
@@ -314,7 +313,7 @@ export default {
this.widgets = [];
},
methods: {
- handlerLayerWidget(val) {
+ handlerLayerWidget (val) {
const layerWidgetArr = [];
for (let i = 0; i < val.length; i++) {
const obj = {};
@@ -329,7 +328,7 @@ export default {
}
this.layerWidget = layerWidgetArr;
},
- async initEchartData() {
+ async initEchartData () {
const reportCode = this.$route.query.reportCode;
const { code, data } = await detailDashboard(reportCode);
if (code != 200) return;
@@ -338,7 +337,7 @@ export default {
this.widgets = processData;
this.dashboard = screenData;
},
- handleBigScreen(data) {
+ handleBigScreen (data) {
const optionScreen = this.deepClone(getToolByCode("screen").options);
const setup = optionScreen.setup;
for (const key in data) {
@@ -356,7 +355,7 @@ export default {
width: data.width
};
},
- handleInitEchartsData(data) {
+ handleInitEchartsData (data) {
const widgets = data.dashboard.widgets;
const widgetsData = [];
for (let i = 0; i < widgets.length; i++) {
@@ -376,7 +375,7 @@ export default {
}
return widgetsData;
},
- handleOptionsData(data, option) {
+ handleOptionsData (data, option) {
for (const key in data.setup) {
for (let i = 0; i < option.setup.length; i++) {
let item = option.setup[i];
@@ -415,7 +414,7 @@ export default {
return option;
},
// 保存数据
- async saveData() {
+ async saveData () {
if (!this.widgets || this.widgets.length == 0) {
this.$message.error("请添加组件");
return;
@@ -437,7 +436,7 @@ export default {
}
},
// 预览
- viewScreen() {
+ viewScreen () {
var routeUrl = this.$router.resolve({
path: "/bigscreen/viewer",
query: { reportCode: this.$route.query.reportCode }
@@ -445,12 +444,12 @@ export default {
window.open(routeUrl.href, "_blank");
},
// 在缩放模式下的大小
- getPXUnderScale(px) {
+ getPXUnderScale (px) {
return this.bigscreenScaleInWorkbench * px;
},
// 拖动一个组件放到工作区中去,在拖动结束时,放到工作区对应的坐标点上去
- widgetOnDragged(evt, widgetCode) {
+ widgetOnDragged (evt, widgetCode) {
var widgetType = widgetCode;
// 获取结束坐标和列名
@@ -491,7 +490,7 @@ export default {
},
// 对组件默认值处理
- handleDefaultValue(widgetJson) {
+ handleDefaultValue (widgetJson) {
for (const key in widgetJson) {
if (key == "options") {
// collapse、data、position、setup
@@ -531,12 +530,12 @@ export default {
}
return widgetJson;
},
- layerClick(index) {
+ layerClick (index) {
this.widgetIndex = index;
this.widgetsClick(index);
},
// 如果是点击大屏设计器中的底层,加载大屏底层属性
- setOptionsOnClickScreen() {
+ setOptionsOnClickScreen () {
this.screenCode = "screen";
// 选中不同的组件 右侧都显示第一栏
this.activeName = "first";
@@ -544,7 +543,7 @@ export default {
},
// 如果是点击某个组件,获取该组件的配置项
- setOptionsOnClickWidget(obj) {
+ setOptionsOnClickWidget (obj) {
this.screenCode = "";
if (typeof obj == "number") {
this.widgetOptions = this.deepClone(this.widgets[obj]["options"]);
@@ -564,7 +563,7 @@ export default {
});
this.widgetOptions = this.deepClone(this.widgets[obj.index]["options"]);
},
- widgetsClick(index) {
+ widgetsClick (index) {
const draggableArr = this.$refs.widgets;
for (let i = 0; i < draggableArr.length; i++) {
if (i == index) {
@@ -575,14 +574,14 @@ export default {
}
this.setOptionsOnClickWidget(index);
},
- handleMouseDown() {
+ handleMouseDown () {
const draggableArr = this.$refs.widgets;
for (let i = 0; i < draggableArr.length; i++) {
this.$refs.widgets[i].$refs.draggable.setActive(false);
}
},
// 将当前选中的组件,右侧属性值更新
- widgetValueChanged(key, val) {
+ widgetValueChanged (key, val) {
if (this.screenCode == "screen") {
this.dashboard = this.deepClone(val);
} else {
@@ -594,7 +593,7 @@ export default {
}
}
},
- rightClick(event, index) {
+ rightClick (event, index) {
this.rightClickIndex = index;
const left = event.clientX;
const top = event.clientY;
@@ -608,10 +607,10 @@ export default {
this.visibleContentMenu = true;
return false;
},
- deletelayer() {
+ deletelayer () {
this.widgets.splice(this.rightClickIndex, 1);
},
- setDefaultValue(options, val) {
+ setDefaultValue (options, val) {
for (let i = 0; i < options.length; i++) {
if (Object.prototype.toString.call(options[i]) == "[object Object]") {
for (const k in val) {
@@ -640,6 +639,15 @@ export default {