-
-
+
+
-
+
-
{{ widget.label }}
@@ -28,14 +30,15 @@
+
-
{{ item.label }}
@@ -43,40 +46,49 @@
+
-
+ ![]()
+
-
@@ -192,7 +227,7 @@ export default {
dynamicForm,
contentMenu
},
- data () {
+ data() {
return {
layerWidget: [],
widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域
@@ -259,7 +294,7 @@ export default {
},
computed: {
// 左侧折叠切换时，动态计算中间区的宽度
- middleWidth () {
+ middleWidth() {
var widthLeftAndRight = 0;
if (this.toolIsShow) {
widthLeftAndRight += this.widthLeftForTools; // 左侧工具栏宽度
@@ -270,36 +305,37 @@ 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();
@@ -308,7 +344,7 @@ export default {
this.widgets = [];
},
methods: {
- handlerLayerWidget (val) {
+ handlerLayerWidget(val) {
const layerWidgetArr = [];
for (let i = 0; i < val.length; i++) {
const obj = {};
@@ -323,7 +359,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;
@@ -332,7 +368,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) {
@@ -350,7 +386,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++) {
@@ -370,7 +406,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];
@@ -409,7 +445,7 @@ export default {
return option;
},
// 保存数据
- async saveData () {
+ async saveData() {
if (!this.widgets || this.widgets.length == 0) {
this.$message.error("请添加组件");
return;
@@ -431,7 +467,7 @@ export default {
}
},
// 预览
- viewScreen () {
+ viewScreen() {
var routeUrl = this.$router.resolve({
path: "/bigscreen/viewer",
query: { reportCode: this.$route.query.reportCode }
@@ -439,12 +475,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;
// 获取结束坐标和列名
@@ -485,7 +521,7 @@ export default {
},
// 对组件默认值处理
- handleDefaultValue (widgetJson) {
+ handleDefaultValue(widgetJson) {
for (const key in widgetJson) {
if (key == "options") {
// collapse、data、position、setup
@@ -525,12 +561,12 @@ export default {
}
return widgetJson;
},
- layerClick (index) {
+ layerClick(index) {
this.widgetIndex = index;
this.widgetsClick(index);
},
// 如果是点击大屏设计器中的底层，加载大屏底层属性
- setOptionsOnClickScreen () {
+ setOptionsOnClickScreen() {
this.screenCode = "screen";
// 选中不同的组件 右侧都显示第一栏
this.activeName = "first";
@@ -538,7 +574,7 @@ export default {
},
// 如果是点击某个组件，获取该组件的配置项
- setOptionsOnClickWidget (obj) {
+ setOptionsOnClickWidget(obj) {
this.screenCode = "";
if (typeof obj == "number") {
this.widgetOptions = this.deepClone(this.widgets[obj]["options"]);
@@ -558,7 +594,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) {
@@ -569,14 +605,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 {
@@ -588,7 +624,7 @@ export default {
}
}
},
- rightClick (event, index) {
+ rightClick(event, index) {
this.rightClickIndex = index;
const left = event.clientX;
const top = event.clientY;
@@ -602,10 +638,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) {
diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js
index 5aed4c27..17f20bf4 100644
--- a/report-ui/src/views/report/bigscreen/designer/tools.js
+++ b/report-ui/src/views/report/bigscreen/designer/tools.js
@@ -666,12 +666,12 @@ const widgetTools = [
value: '0'
},
{
- type: 'el-input-text',
+ type: 'custom-upload',
label: '图片地址',
name: 'imageAdress',
required: false,
placeholder: '',
- value: 'http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095508.jpg',
+ value: [{url: 'http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095508.jpg'}],
},
{
type: 'vue-color',
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetImage.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetImage.vue
index 1abf8667..bab0c0ce 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/widgetImage.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetImage.vue
@@ -1,5 +1,12 @@
-
-
-
-
+
+
-
-
-
+
+
-
-
-
+
-
-
+
-
+ ![]()
+