From 81469d42620a94b0ac78760d37290dd77d2e2b65 Mon Sep 17 00:00:00 2001
From: qianming <isqianming@163.com>
Date: Tue, 7 Feb 2023 09:01:01 +0800
Subject: [PATCH] =?UTF-8?q?feat-=E8=A1=A8=E5=8D=95=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tools/configure/form/widget-input.js      | 100 ++++++++++++++++++
 .../bigscreenDesigner/designer/tools/main.js  |   6 +-
 .../designer/widget/form/widgetInput.vue      |  81 ++++++++++++++
 .../designer/widget/temp.vue                  |   2 +
 .../designer/widget/widget.vue                |   2 +
 5 files changed, 189 insertions(+), 2 deletions(-)
 create mode 100644 report-ui/src/views/bigscreenDesigner/designer/tools/configure/form/widget-input.js
 create mode 100644 report-ui/src/views/bigscreenDesigner/designer/widget/form/widgetInput.vue

diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/form/widget-input.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/form/widget-input.js
new file mode 100644
index 00000000..720502c9
--- /dev/null
+++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/form/widget-input.js
@@ -0,0 +1,100 @@
+export const widgetInput = {
+  code: 'widget-input',
+  type: 'form',
+  tabName: '表单',
+  label: '输入框',
+  icon: 'iconchaolianjie',
+  options: {
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '输入框',
+      },
+      {
+        type: 'el-input-text',
+        label: '字段属性值',
+        name: 'field',
+        required: false,
+        placeholder: '请输入',
+        value: '',
+      },
+      {
+        type: 'vue-color',
+        label: '字体颜色',
+        name: 'color',
+        required: false,
+        placeholder: '',
+        value: '#FAD400',
+      },
+      {
+        type: 'vue-color',
+        label: '字体背景',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: 'rgba(115,170,229,.5)',
+      },
+      {
+        type: 'el-select',
+        label: '关联图表',
+        name: 'assChart',
+        required: false,
+        placeholder: '',
+        multiple: true,
+        selectOptions: [],
+        value: '',
+      },
+      {
+        type: 'el-select',
+        label: '触发事件',
+        name: 'event',
+        required: false,
+        placeholder: '',
+        selectOptions: [
+          {code: 'change', name: 'change'},
+          {code: 'blur', name: 'blur'},
+          {code: 'focus', name: 'focus'},
+        ],
+        value: 'change',
+      }
+    ],
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在1920px大屏中的宽度',
+        value: 100,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 40,
+      },
+    ],
+  }
+}
diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/main.js b/report-ui/src/views/bigscreenDesigner/designer/tools/main.js
index 0890cdef..660c04cc 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/tools/main.js
+++ b/report-ui/src/views/bigscreenDesigner/designer/tools/main.js
@@ -38,7 +38,8 @@ import { widgetWordCloud } from "./configure/wordcloudCharts/widget-word-cloud";
 import { widgetHeatmap } from "./configure/heatmap/widget-heatmap";
 import { widgetRadar } from "./configure/radarCharts/widget-radar";
 import { widgetBarLineStack } from "./configure/barlineCharts/widget-bar-line-stack";
-import { widgetSelect } from "./configure/form/widget-select"
+import { widgetSelect } from "./configure/form/widget-select";
+import {widgetInput} from "./configure/form/widget-input";
 
 export const widgetTool = [
   // type=html类型的组件
@@ -73,5 +74,6 @@ export const widgetTool = [
   widgetHeatmap,
   widgetRadar,
   widgetBarLineStack,
-  widgetSelect
+  widgetSelect,
+  widgetInput
 ]
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/form/widgetInput.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/form/widgetInput.vue
new file mode 100644
index 00000000..e1a27c64
--- /dev/null
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/form/widgetInput.vue
@@ -0,0 +1,81 @@
+<template>
+  <el-input
+    ref="input"
+    :style="styleObj"
+    v-model="inputValue" placeholder="请输入内容"
+    @[eventChange]="change"
+  />
+</template>
+<script>
+import {eventBus} from "@/utils/eventBus";
+
+export default {
+  name: "WidgetInput",
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  data() {
+    return {
+      inputValue: "",
+      optionsStyle: {},
+      optionsData: {},
+      optionsSetup: {},
+      options:{}
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+      };
+    },
+    eventChange() {
+      return this.optionsSetup.event || "change";
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsSetup = val.setup;
+        this.optionsData = val.data;
+        this.optionsStyle = val.position;
+        this.setOptions()
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.optionsSetup = this.value.setup;
+    this.optionsData = this.value.data;
+    this.optionsStyle = this.value.position;
+    this.setOptions()
+  },
+  methods: {
+    change(event) {
+      const optionsSetup = this.optionsSetup;
+      const params = {};
+      params[optionsSetup.field] = event;
+      params["assChart"] = optionsSetup.assChart;
+      eventBus.$emit("eventParams", params);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+/deep/ .el-select {
+  height: 100%;
+
+  .el-input {
+    height: 100%;
+
+    .el-input__inner {
+      height: 100%;
+    }
+  }
+}
+</style>
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue
index eb6733ce..a9e29d42 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue
@@ -42,6 +42,7 @@ import widgetHeatmap from "./heatmap/widgetHeatmap";
 import widgetRadar from "./radar/widgetRadar";
 import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
 import widgetSelect from "./form/widgetSelect";
+import widgetInput from "./form/widgetInput.vue";
 
 export default {
   name: "WidgetTemp",
@@ -77,6 +78,7 @@ export default {
     widgetRadar,
     widgetBarLineStackChart,
     widgetSelect,
+    widgetInput
   },
   model: {
     prop: "value",
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue
index 8d3ec7a9..9c0ab9d6 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue
@@ -53,6 +53,7 @@ import widgetHeatmap from "./heatmap/widgetHeatmap";
 import widgetRadar from "./radar/widgetRadar";
 import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
 import widgetSelect from "./form/widgetSelect";
+import widgetInput from "./form/widgetInput.vue";
 
 export default {
   name: "Widget",
@@ -88,6 +89,7 @@ export default {
     widgetRadar,
     widgetBarLineStackChart,
     widgetSelect,
+    widgetInput
   },
   model: {
     prop: "value",