添加select

report-ui/src/components/AnjiPlus/anji-select.vue

@@ -68,62 +68,62 @@ export default {
     url: null,
     allowCreate: {
       type: Boolean,
-      default: false
+      default: false,
     },
     method: {
       type: String,
-      default: "get"
+      default: "get",
     },
     queryParam: {
       type: Object,
       default: () => {
         return {};
-      }
+      },
     },
     value: null,
     placeholder: null,
     label: {
       type: String,
-      default: "text"
+      default: "text",
     },
     option: {
       type: String,
-      default: "id"
+      default: "id",
     },
     multiple: null,
     localOptions: null,
     disabled: null,
     clearable: {
       type: Boolean,
-      default: true
+      default: true,
     },
     collapseTags: {
       type: Boolean,
-      default: false
+      default: false,
     },
     mergeLabel: {
       type: Boolean,
-      default: true
+      default: true,
     },
     // 禁用的下拉选项
     disabledOptions: {
       type: String,
       default: () => {
         return "";
-      }
+      },
     },
     // 使用远程搜索
     remoteFilter: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
       options: null,
       selectValue: null,
       // 如果是分页的，
-      totalPage: 0
+      totalPage: 0,
     };
   },
   computed: {
@@ -146,7 +146,7 @@ export default {
         return `/meta/gaeaDict/select/${this.dictCode}`;
       }
       return null;
-    }
+    },
   },
   watch: {
     dictCode(val) {
@@ -181,13 +181,13 @@ export default {
           }
         }
       },
-      immediate: true
+      immediate: true,
     },
     url() {
       setTimeout(() => {
         this.queryData();
       }, 500);
-    }
+    },
   },
   created() {
     if (this.multiple != null) {
@@ -225,7 +225,7 @@ export default {
       this.$emit("input", value);
 
       // 根据当前值，找出对应的选项
-      let optionItem = this.options.find(item => item[this.option] == value);
+      let optionItem = this.options.find((item) => item[this.option] == value);
       this.$emit("change", value, optionItem);
     },
     // 根据用户配置的label，生成对应的标签
@@ -257,7 +257,7 @@ export default {
         options.push({
           id: dictItem.id.toString(),
           text: dictItem.text,
-          extend: dictItem.extend
+          extend: dictItem.extend,
         });
       }
       return options;
@@ -291,8 +291,8 @@ export default {
       request({
         url: this.requestUrl,
         headers: { noPrompt: true },
-        params: param
-      }).then(response => {
+        params: param,
+      }).then((response) => {
         this.setOptions(response.data);
       });
     },
@@ -305,8 +305,8 @@ export default {
         url: this.requestUrl,
         method: "post",
         headers: { noPrompt: true },
-        data: param
-      }).then(response => {
+        data: param,
+      }).then((response) => {
         this.setOptions(response.data);
       });
     },
@@ -343,8 +343,8 @@ export default {
           this.queryDataByGet(keyword);
         }
       }, 200);
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>

report-ui/src/views/bigscreenDesigner/designer/index.vue

@@ -491,6 +491,7 @@ export default {
       this.widgets = record;
     },
     handlerLayerWidget(val) {
+      console.log(val)
       const layerWidgetArr = [];
       for (let i = 0; i < val.length; i++) {
         const obj = {};
@@ -504,6 +505,7 @@ export default {
         layerWidgetArr.push(obj);
       }
       this.layerWidget = layerWidgetArr;
+      console.log(this.layerWidget);
     },
     async initEchartData() {
       const reportCode = this.$route.query.reportCode;
@@ -742,6 +744,8 @@ export default {
       this.widgets.push(this.deepClone(widgetJsonValue));
       // 激活新组件的配置属性
       this.setOptionsOnClickWidget(this.widgets.length - 1);
+
+      console.log("123", this.widgets);
     },
 
     // 对组件默认值处理

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js

@@ -4,7 +4,7 @@
  * @Author: qianlishi
  * @Date: 2021-08-29 07:21:45
  * @LastEditors: qianlishi qianlishi@anji-plus.com
- * @LastEditTime: 2023-01-09 09:53:31
+ * @LastEditTime: 2023-01-09 13:01:34
  */
 export const widgetBarchart = {
   code: 'widget-barchart',
@@ -654,18 +654,18 @@ export const widgetBarchart = {
     ],
     // 事件
     methods: [
-      {
-        type: 'methods',
-        label: '前置钩子',
-        name: 'beforeMethods',
-        value: 'function beforeMethods(data){\n\t//自定义脚本内容1\n\treturn data;\n}',
-      },
-      {
-        type: 'methods',
-        label: '后置钩子',
-        name: 'afterMethods',
-        value: 'function afterMethods(data){\n\t//自定义脚本内容2\n\treturn data;\n}',
-      },
+      // {
+      //   type: 'methods',
+      //   label: '前置钩子',
+      //   name: 'beforeMethods',
+      //   value: 'function beforeMethods(data){\n\t//自定义脚本内容1\n\treturn data;\n}',
+      // },
+      // {
+      //   type: 'methods',
+      //   label: '后置钩子',
+      //   name: 'afterMethods',
+      //   value: 'function afterMethods(data){\n\t//自定义脚本内容2\n\treturn data;\n}',
+      // },
     ]
   }
 }

report-ui/src/views/bigscreenDesigner/designer/tools/configure/form/widget-select.js

@@ -0,0 +1,160 @@
+/*
+ * @Descripttion: 下拉框
+ * @Author: qianlishi qianlishi@anji-plus.com
+ * @Date: 2023-01-09 13:02:59
+ * @LastEditors: qianlishi qianlishi@anji-plus.com
+ * @LastEditTime: 2023-01-10 09:40:53
+ */
+
+export const widgetSelect = {
+  code: 'widget-select',
+  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: 'text',
+        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: '',
+        selectOptions: [
+          { code: 'center', name: '居中' },
+          { code: 'left', name: '左对齐' },
+          { code: 'right', name: '右对齐' },
+        ],
+        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',
+      }
+    ],
+    data: [
+      {
+        type: 'el-radio-group',
+        label: '数据类型',
+        name: 'dataType',
+        require: false,
+        placeholder: '',
+        selectValue: true,
+        selectOptions: [
+          {
+            code: 'staticData',
+            name: '静态数据',
+          },
+          {
+            code: 'dynamicData',
+            name: '动态数据',
+          },
+        ],
+        value: 'staticData',
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: [
+          { "axis": "苹果", "data": 1000 },
+          { "axis": "三星", "data": 2229 },
+          { "axis": "小米", "data": 3879 },
+          { "axis": "oppo", "data": 2379 },
+          { "axis": "vivo", "data": 4079 },
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        chartType: 'widget-barchart',
+        dictKey: 'BAR_PROPERTIES',
+        value: '',
+      },
+    ],
+    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,
+      },
+    ],
+  }
+}

report-ui/src/views/bigscreenDesigner/designer/tools/main.js

@@ -4,7 +4,7 @@
  * @Author: qianlishi
  * @Date: 2021-08-29 07:46:46
  * @LastEditors: qianlishi qianlishi@anji-plus.com
- * @LastEditTime: 2022-11-07 15:34:02
+ * @LastEditTime: 2023-01-09 13:16:19
  */
 
 import { widgetText } from "./configure/texts/widget-text"
@@ -38,6 +38,7 @@ 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"
 
 export const widgetTool = [
   // type=html类型的组件
@@ -71,5 +72,6 @@ export const widgetTool = [
   widgetWordCloud,
   widgetHeatmap,
   widgetRadar,
-  widgetBarLineStack
+  widgetBarLineStack,
+  widgetSelect
 ]

report-ui/src/views/bigscreenDesigner/designer/widget/form/widgetSelect.vue

@@ -0,0 +1,87 @@
+<template>
+  <anji-select
+    ref="select"
+    :style="styleObj"
+    v-model="selectValue"
+    :localOptions="options"
+    label="text"
+    option="id"
+  />
+</template>
+<script>
+export default {
+  name: "WidgetSelect",
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  data() {
+    return {
+      options: [
+        {
+          id: "选项1",
+          text: "黄金糕",
+        },
+        {
+          id: "选项2",
+          text: "双皮奶",
+        },
+        {
+          id: "选项3",
+          text: "蚵仔煎",
+        },
+        {
+          id: "选项4",
+          text: "龙须面",
+        },
+        {
+          id: "选项5",
+          text: "北京烤鸭",
+        },
+      ],
+      selectValue: "",
+      optionsStyle: {},
+      optionsData: {},
+      optionsSetup: {},
+    };
+  },
+  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",
+      };
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsSetup = val.setup;
+        this.optionsData = val.data;
+        this.optionsStyle = val.position;
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.optionsSetup = this.value.setup;
+    this.optionsData = this.value.data;
+    this.optionsStyle = this.value.position;
+  },
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+/deep/.el-select {
+  height: 100%;
+  .el-input {
+    height: 100%;
+    .el-input__inner {
+      height: 100%;
+    }
+  }
+}
+</style>

report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue

@@ -6,7 +6,7 @@
  !-->
 <template>
   <div>
-    <component :is="type" :value="value" :ispreview="true"/>
+    <component :is="type" :value="value" :ispreview="true" />
   </div>
 </template>
 
@@ -41,6 +41,7 @@ import widgetWordCloud from "./wordcloud/widgetWordCloud";
 import widgetHeatmap from "./heatmap/widgetHeatmap";
 import widgetRadar from "./radar/widgetRadar";
 import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
+import widgetSelect from "./form/widgetSelect";
 
 export default {
   name: "WidgetTemp",
@@ -74,26 +75,25 @@ export default {
     widgetWordCloud,
     widgetHeatmap,
     widgetRadar,
-    widgetBarLineStackChart
+    widgetBarLineStackChart,
+    widgetSelect,
   },
   model: {
     prop: "value",
-    event: "input"
+    event: "input",
   },
   props: {
     type: String,
     value: {
       type: [Object],
-      default: () => {
-      }
-    }
+      default: () => {},
+    },
   },
   data() {
     return {};
   },
-  mounted() {
-  },
-  methods: {}
+  mounted() {},
+  methods: {},
 };
 </script>
 

report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue

@@ -52,6 +52,7 @@ import widgetWordCloud from "./wordcloud/widgetWordCloud";
 import widgetHeatmap from "./heatmap/widgetHeatmap";
 import widgetRadar from "./radar/widgetRadar";
 import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
+import widgetSelect from "./form/widgetSelect";
 
 export default {
   name: "Widget",
@@ -85,11 +86,12 @@ export default {
     widgetWordCloud,
     widgetHeatmap,
     widgetRadar,
-    widgetBarLineStackChart
+    widgetBarLineStackChart,
+    widgetSelect,
   },
   model: {
     prop: "value",
-    event: "input"
+    event: "input",
   },
   props: {
     /*
@@ -101,9 +103,9 @@ export default {
     bigscreen: Object,
     value: {
       type: [Object],
-      default: () => {}
+      default: () => {},
     },
-    step: Number
+    step: Number,
   },
   data() {
     return {
@@ -111,9 +113,9 @@ export default {
         setup: {},
         data: {},
         position: {},
-/*        leftMargin: null,
+        /*        leftMargin: null,
         topMargin: null*/
-      }
+      },
     };
   },
   computed: {
@@ -124,14 +126,14 @@ export default {
       return this.value.position.height;
     },
     widgetsLeft() {
-      return this.value.position.left// >= this.leftMargin ? this.leftMargin : this.value.position.left;
+      return this.value.position.left; // >= this.leftMargin ? this.leftMargin : this.value.position.left;
     },
     widgetsTop() {
-      return this.value.position.top// >= this.topMargin ? this.topMargin : this.value.position.top;
+      return this.value.position.top; // >= this.topMargin ? this.topMargin : this.value.position.top;
     },
     widgetsZIndex() {
       return this.value.position.zIndex || 1;
-    }
+    },
   },
   mounted() {},
   methods: {
@@ -146,23 +148,42 @@ export default {
       // 计算workbench的X轴边界值
       // 组件距离左侧宽度 + 组件宽度 > 大屏总宽度时，右侧边界值 = (大屏宽度 - 组件宽度)；左侧边界值 = 0
       const { bigscreenWidth, bigscreenHeight } = this.bigscreen;
-      const xBoundaryValue = (left + width) > bigscreenWidth ? bigscreenWidth - width : left < 0 ? 0 : left;
+      const xBoundaryValue =
+        left + width > bigscreenWidth
+          ? bigscreenWidth - width
+          : left < 0
+          ? 0
+          : left;
       // 初始化X轴边界值
       this.leftMargin = left;
       // 计算Y轴边界值
-      const yBoundaryValue = (top + height) > bigscreenHeight ? bigscreenHeight - height : top < 0 ? 0 : top;
+      const yBoundaryValue =
+        top + height > bigscreenHeight
+          ? bigscreenHeight - height
+          : top < 0
+          ? 0
+          : top;
       // 初始化Y轴边界值
       this.topMargin = top;
       // 若位置超出边界值则重新设置位置
-      if (this.leftMargin != xBoundaryValue || this.topMargin != yBoundaryValue) {
+      if (
+        this.leftMargin != xBoundaryValue ||
+        this.topMargin != yBoundaryValue
+      ) {
         this.$nextTick(() => {
           this.leftMargin = xBoundaryValue;
           this.topMargin = yBoundaryValue;
-          this.$emit("onActivated", { index, left: xBoundaryValue, top: yBoundaryValue, width, height });
-        })
+          this.$emit("onActivated", {
+            index,
+            left: xBoundaryValue,
+            top: yBoundaryValue,
+            width,
+            height,
+          });
+        });
       }
-    }
-  }
+    },
+  },
 };
 </script>