From 044c5b6fa190f51343b12bd952a644b33ab6cea8 Mon Sep 17 00:00:00 2001
From: qianlishi <1432731663@qq.com>
Date: Mon, 28 Jun 2021 15:07:01 +0800
Subject: [PATCH 1/2] update

---
 report-ui/package.json                        |   1 +
 report-ui/src/main.js                         |   4 +
 .../bigscreen/designer/form/dynamicForm.vue   | 507 ++++++++++--------
 .../views/report/bigscreen/designer/index.vue |  44 +-
 .../bigscreen/designer/widget/widget.vue      |  68 +--
 .../designer/widget/widgetBarchart.vue        |   2 -
 .../bigscreen/designer/widget/widgetText.vue  |   1 -
 7 files changed, 338 insertions(+), 289 deletions(-)

diff --git a/report-ui/package.json b/report-ui/package.json
index 179bcd1f..6f803ba1 100644
--- a/report-ui/package.json
+++ b/report-ui/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@ckeditor/ckeditor5-build-decoupled-document": "^23.1.0",
+    "@smallwei/avue": "^2.8.14",
     "axios": "0.18.0",
     "chokidar": "^3.5.2",
     "codemirror": "^5.58.1",
diff --git a/report-ui/src/main.js b/report-ui/src/main.js
index 410b359f..2f43b247 100644
--- a/report-ui/src/main.js
+++ b/report-ui/src/main.js
@@ -27,6 +27,10 @@ import '@/permission'
 
 import '@/extend'
 
+import Avue from '@smallwei/avue';
+import '@smallwei/avue/lib/index.css';
+Vue.use(Avue);
+
 // enable element zh-cn
 Vue.use(ElementUI, { zhLocale })
 
diff --git a/report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue b/report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue
index d83924e4..e03b5fea 100644
--- a/report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue
+++ b/report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue
@@ -7,182 +7,242 @@
  !-->
 <template>
   <div class="collapse-input-style">
-    <el-form label-width="80px"
-             label-position="left">
+    <el-form label-width="80px" label-position="left">
       <template v-for="(item, index) in options">
-        <div v-if="isShowForm(item, '[object Object]')"
-             :key="index">
-          <el-form-item v-if="inputShow[item.name]"
-                        :label="item.label"
-                        :prop="item.name"
-                        :required="item.required">
-            <el-input-number v-if="item.type == 'el-input-number'"
-                             size="mini"
-                             style="width:100%"
-                             v-model="formData[item.name]"
-                             controls-position="right"
-                             :placeholder="item.placeholder"
-                             @change="changed($event, item.name)" />
+        <div v-if="isShowForm(item, '[object Object]')" :key="index">
+          <el-form-item
+            v-if="inputShow[item.name]"
+            :label="item.label"
+            :prop="item.name"
+            :required="item.required"
+          >
+            <el-input-number
+              v-if="item.type == 'el-input-number'"
+              size="mini"
+              style="width:100%"
+              v-model="formData[item.name]"
+              controls-position="right"
+              :placeholder="item.placeholder"
+              @change="changed($event, item.name)"
+            />
 
-            <el-input v-if="item.type == 'el-input-text'"
-                      v-model.trim="formData[item.name]"
-                      type="text"
-                      size="mini"
-                      placeholder="请输入内容"
-                      clearable
-                      @change="changed($event, item.name)" />
+            <el-input
+              v-if="item.type == 'el-input-text'"
+              v-model.trim="formData[item.name]"
+              type="text"
+              size="mini"
+              placeholder="请输入内容"
+              clearable
+              @change="changed($event, item.name)"
+            />
 
-            <el-input v-if="item.type == 'el-input-textarea'"
-                      v-model.trim="formData[item.name]"
-                      type="textarea"
-                      size="mini"
-                      rows="2"
-                      placeholder="请输入内容"
-                      @change="changed($event, item.name)" />
+            <el-input
+              v-if="item.type == 'el-input-textarea'"
+              v-model.trim="formData[item.name]"
+              type="textarea"
+              size="mini"
+              rows="2"
+              placeholder="请输入内容"
+              @change="changed($event, item.name)"
+            />
 
-            <el-switch v-if="item.type == 'el-switch'"
-                       v-model="formData[item.name]"
-                       size="mini"
-                       placeholder="请输入内容"
-                       @change="changed($event, item.name)" />
+            <el-switch
+              v-if="item.type == 'el-switch'"
+              v-model="formData[item.name]"
+              size="mini"
+              placeholder="请输入内容"
+              @change="changed($event, item.name)"
+            />
 
-            <ColorPicker v-if="item.type == 'vue-color'"
-                         v-model="formData[item.name]"
-                         @change="(val) => changed(val, item.name)" />
+            <ColorPicker
+              v-if="item.type == 'vue-color'"
+              v-model="formData[item.name]"
+              @change="val => changed(val, item.name)"
+            />
 
-            <el-upload v-if="item.type == 'el-upload-picture'"
-                       size="mini"
-                       action="https://jsonplaceholder.typicode.com/posts/"
-                       list-type="picture-card" />
+            <el-upload
+              v-if="item.type == 'el-upload-picture'"
+              size="mini"
+              action="https://jsonplaceholder.typicode.com/posts/"
+              list-type="picture-card"
+            />
 
-            <el-radio-group v-if="item.type == 'el-radio-group'"
-                            v-model="formData[item.name]"
-                            @change="(val) => changed(val, item.name)">
-              <el-radio v-for="itemChild in item.selectOptions"
-                        :key="itemChild.code"
-                        :label="itemChild.code">{{ itemChild.name }}</el-radio>
+            <el-radio-group
+              v-if="item.type == 'el-radio-group'"
+              v-model="formData[item.name]"
+              @change="val => changed(val, item.name)"
+            >
+              <el-radio
+                v-for="itemChild in item.selectOptions"
+                :key="itemChild.code"
+                :label="itemChild.code"
+                >{{ itemChild.name }}</el-radio
+              >
             </el-radio-group>
 
-            <el-select v-if="item.type == 'el-select'"
-                       size="mini"
-                       v-model="formData[item.name]"
-                       clearable
-                       placeholder="请选择"
-                       @change="(val) => changed(val, item.name)">
-              <el-option v-for="itemChild in item.selectOptions"
-                         :key="itemChild.code"
-                         :label="itemChild.name"
-                         :value="itemChild.code" />
+            <el-select
+              v-if="item.type == 'el-select'"
+              size="mini"
+              v-model="formData[item.name]"
+              clearable
+              placeholder="请选择"
+              @change="val => changed(val, item.name)"
+            >
+              <el-option
+                v-for="itemChild in item.selectOptions"
+                :key="itemChild.code"
+                :label="itemChild.name"
+                :value="itemChild.code"
+              />
             </el-select>
 
-            <el-slider v-if="item.type == 'el-slider'"
-                       v-model="formData[item.name]"
-                       @change="(val) => changed(val, item.name)" />
+            <el-slider
+              v-if="item.type == 'el-slider'"
+              v-model="formData[item.name]"
+              @change="val => changed(val, item.name)"
+            />
 
-            <el-button v-if="item.type == 'el-button'"
-                       type="primary"
-                       plain
-                       @click="addStaticData">编辑</el-button>
+            <el-button
+              v-if="item.type == 'el-button'"
+              type="primary"
+              plain
+              @click="addStaticData"
+              >编辑</el-button
+            >
 
             <!-- 弹窗 -->
-            <el-dialog title="代码编辑"
-                       :visible.sync="dialogVisibleStaticData"
-                       width="50%"
-                       :before-close="handleClose">
-              <codemirror v-model.trim="formData[item.name]"
-                          class="code-mirror"
-                          :options="optionsJavascript"
-                          style="height: 190px" />
-              <span slot="footer"
-                    class="dialog-footer">
-                <el-button @click="dialogVisibleStaticData = false">取 消</el-button>
-                <el-button type="primary"
-                           @click="saveData">确 定</el-button>
+            <el-dialog
+              title="代码编辑"
+              :visible.sync="dialogVisibleStaticData"
+              width="50%"
+              :before-close="handleClose"
+            >
+              <codemirror
+                v-model.trim="formData[item.name]"
+                class="code-mirror"
+                :options="optionsJavascript"
+                style="height: 190px"
+              />
+              <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisibleStaticData = false"
+                  >取 消</el-button
+                >
+                <el-button type="primary" @click="saveData">确 定</el-button>
               </span>
             </el-dialog>
           </el-form-item>
-          <dynamicComponents v-if="item.type == 'dycustComponents' && inputShow[item.name]"
-                             v-model="formData[item.name]"
-                             :chart-type="item.chartType" />
+          <dynamicComponents
+            v-if="item.type == 'dycustComponents' && inputShow[item.name]"
+            v-model="formData[item.name]"
+            :chart-type="item.chartType"
+          />
         </div>
-        <div v-else-if="isShowForm(item, '[object Array]')"
-             :key="'a-' + index">
+        <div v-else-if="isShowForm(item, '[object Array]')" :key="'a-' + index">
           <el-collapse accordion>
-            <el-collapse-item v-for="(itemChild, indexChild) in item"
-                              :key="indexChild"
-                              :title="itemChild.name"
-                              :name="indexChild">
+            <el-collapse-item
+              v-for="(itemChild, indexChild) in item"
+              :key="indexChild"
+              :title="itemChild.name"
+              :name="indexChild"
+            >
               <template v-for="(itemChildList, idx) in itemChild.list">
-                <el-form-item :key="idx"
-                              :label="itemChildList.label"
-                              :prop="itemChildList.name"
-                              :required="itemChildList.required">
-                  <el-input-number v-if="itemChildList.type == 'el-input-number'"
-                                   size="mini"
-                                   style="width:100%"
-                                   v-model="formData[itemChildList.name]"
-                                   controls-position="right"
-                                   :placeholder="itemChildList.placeholder"
-                                   @change="changed($event, itemChildList.name)" />
+                <el-form-item
+                  :key="idx"
+                  :label="itemChildList.label"
+                  :prop="itemChildList.name"
+                  :required="itemChildList.required"
+                >
+                  <el-input-number
+                    v-if="itemChildList.type == 'el-input-number'"
+                    size="mini"
+                    style="width:100%"
+                    v-model="formData[itemChildList.name]"
+                    controls-position="right"
+                    :placeholder="itemChildList.placeholder"
+                    @change="changed($event, itemChildList.name)"
+                  />
 
-                  <el-input v-if="itemChildList.type == 'el-input-text'"
-                            v-model.trim="formData[itemChildList.name]"
-                            type="text"
-                            size="mini"
-                            placeholder="请输入内容"
-                            clearable
-                            @change="changed($event, itemChildList.name)" />
+                  <el-input
+                    v-if="itemChildList.type == 'el-input-text'"
+                    v-model.trim="formData[itemChildList.name]"
+                    type="text"
+                    size="mini"
+                    placeholder="请输入内容"
+                    clearable
+                    @change="changed($event, itemChildList.name)"
+                  />
 
-                  <el-input v-if="itemChildList.type == 'el-input-textarea'"
-                            v-model.trim="formData[itemChildList.name]"
-                            size="mini"
-                            type="textarea"
-                            rows="2"
-                            placeholder="请输入内容"
-                            @change="changed($event, itemChildList.name)" />
+                  <el-input
+                    v-if="itemChildList.type == 'el-input-textarea'"
+                    v-model.trim="formData[itemChildList.name]"
+                    size="mini"
+                    type="textarea"
+                    rows="2"
+                    placeholder="请输入内容"
+                    @change="changed($event, itemChildList.name)"
+                  />
 
-                  <el-switch v-if="itemChildList.type == 'el-switch'"
-                             v-model="formData[itemChildList.name]"
-                             placeholder="请输入内容"
-                             size="mini"
-                             @change="changed($event, itemChildList.name)" />
+                  <el-switch
+                    v-if="itemChildList.type == 'el-switch'"
+                    v-model="formData[itemChildList.name]"
+                    placeholder="请输入内容"
+                    size="mini"
+                    @change="changed($event, itemChildList.name)"
+                  />
 
-                  <ColorPicker v-if="itemChildList.type == 'vue-color'"
-                               v-model="formData[itemChildList.name]"
-                               @change="(val) => changed(val, itemChildList.name)" />
+                  <ColorPicker
+                    v-if="itemChildList.type == 'vue-color'"
+                    v-model="formData[itemChildList.name]"
+                    @change="val => changed(val, itemChildList.name)"
+                  />
 
-                  <el-upload v-if="itemChildList.type == 'el-upload-picture'"
-                             size="mini"
-                             action="https://jsonplaceholder.typicode.com/posts/"
-                             list-type="picture-card" />
+                  <el-upload
+                    v-if="itemChildList.type == 'el-upload-picture'"
+                    size="mini"
+                    action="https://jsonplaceholder.typicode.com/posts/"
+                    list-type="picture-card"
+                  />
 
-                  <el-radio-group v-if="itemChildList.type == 'el-radio-group'"
-                                  v-model="formData[itemChildList.name]"
-                                  @change="(val) => changed(val, itemChildList.name)">
-                    <el-radio v-for="it in itemChildList.selectOptions"
-                              :key="it.code"
-                              :label="it.code">{{ it.name }}</el-radio>
+                  <el-radio-group
+                    v-if="itemChildList.type == 'el-radio-group'"
+                    v-model="formData[itemChildList.name]"
+                    @change="val => changed(val, itemChildList.name)"
+                  >
+                    <el-radio
+                      v-for="it in itemChildList.selectOptions"
+                      :key="it.code"
+                      :label="it.code"
+                      >{{ it.name }}</el-radio
+                    >
                   </el-radio-group>
 
-                  <el-select v-if="itemChildList.type == 'el-select'"
-                             size="mini"
-                             v-model="formData[itemChildList.name]"
-                             clearable
-                             placeholder="请选择"
-                             @change="(val) => changed(val, itemChildList.name)">
-                    <el-option v-for="it in itemChildList.selectOptions"
-                               :key="it.code"
-                               :label="it.name"
-                               :value="it.code" />
+                  <el-select
+                    v-if="itemChildList.type == 'el-select'"
+                    size="mini"
+                    v-model="formData[itemChildList.name]"
+                    clearable
+                    placeholder="请选择"
+                    @change="val => changed(val, itemChildList.name)"
+                  >
+                    <el-option
+                      v-for="it in itemChildList.selectOptions"
+                      :key="it.code"
+                      :label="it.name"
+                      :value="it.code"
+                    />
                   </el-select>
 
-                  <el-slider v-if="itemChildList.type == 'el-slider'"
-                             v-model="formData[itemChildList.name]"
-                             @change="(val) => changed(val, itemChildList.name)" />
+                  <el-slider
+                    v-if="itemChildList.type == 'el-slider'"
+                    v-model="formData[itemChildList.name]"
+                    @change="val => changed(val, itemChildList.name)"
+                  />
                 </el-form-item>
-                <customColorComponents v-if="itemChildList.type == 'customColor'"
-                                       :key="'b-' + idx"
-                                       v-model="formData[itemChildList.name]" />
+                <customColorComponents
+                  v-if="itemChildList.type == 'customColor'"
+                  :key="'b-' + idx"
+                  v-model="formData[itemChildList.name]"
+                />
               </template>
             </el-collapse-item>
           </el-collapse>
@@ -193,44 +253,44 @@
 </template>
 
 <script>
-import ColorPicker from './colorPicker.vue'
-import { codemirror } from 'vue-codemirror' // 引入codeMirror全局实例
-import 'codemirror/lib/codemirror.css' // 核心样式
-import 'codemirror/theme/cobalt.css' // 引入主题后还需要在 options 中指定主题才会生效
+import ColorPicker from "./colorPicker.vue";
+import { codemirror } from "vue-codemirror"; // 引入codeMirror全局实例
+import "codemirror/lib/codemirror.css"; // 核心样式
+import "codemirror/theme/cobalt.css"; // 引入主题后还需要在 options 中指定主题才会生效
 // language
-import 'codemirror/mode/vue/vue.js'
-import 'codemirror/mode/javascript/javascript.js'
-import 'codemirror/mode/sql/sql.js'
-import 'codemirror/mode/shell/shell.js'
-import dynamicComponents from './dynamicComponents.vue'
-import customColorComponents from './customColorComponents'
+import "codemirror/mode/vue/vue.js";
+import "codemirror/mode/javascript/javascript.js";
+import "codemirror/mode/sql/sql.js";
+import "codemirror/mode/shell/shell.js";
+import dynamicComponents from "./dynamicComponents.vue";
+import customColorComponents from "./customColorComponents";
 export default {
-  name: 'DynamicForm',
+  name: "DynamicForm",
   components: {
     ColorPicker,
     codemirror,
     dynamicComponents,
-    customColorComponents,
+    customColorComponents
   },
   model: {
-    prop: 'value',
-    event: 'input',
+    prop: "value",
+    event: "input"
   },
   props: {
     options: Array,
     value: {
       type: [Object],
-      default: () => { },
-    },
+      default: () => {}
+    }
   },
-  data () {
+  data() {
     return {
       formData: {},
       inputShow: {}, // 控制表单是否显示
       dialogVisibleStaticData: false,
-      validationRules: '',
+      validationRules: "",
       optionsJavascript: {
-        mode: 'text/javascript',
+        mode: "text/javascript",
         tabSize: 2, // 缩进格式
         // theme: 'cobalt', // monokai主题，对应主题库 JS 需要提前引入
         lineNumbers: true, // 显示行号
@@ -238,104 +298,107 @@ export default {
         styleActiveLine: true, // 高亮选中行
 
         hintOptions: {
-          completeSingle: true, // 当匹配只有一项的时候是否自动补全
-        },
-      },
-    }
+          completeSingle: true // 当匹配只有一项的时候是否自动补全
+        }
+      }
+    };
   },
   watch: {
-    value (newValue, oldValue) {
-      this.formData = newValue || {}
-    },
-    options () {
-      this.setDefaultValue()
-      this.isShowData()
-    },
-    formData: {
-      handler () {
-        this.$emit('onChanged', this.formData)
-      },
-      deep: true,
+    value(newValue, oldValue) {
+      this.formData = newValue || {};
     },
+    options(val) {
+      console.log(val);
+      this.setDefaultValue();
+      this.isShowData();
+    }
+    // formData: {
+    //   handler () {
+    //     this.$emit('onChanged', this.formData)
+    //   },
+    //   deep: true,
+    // },
   },
-  created () {
-    this.isShowData()
-    this.setDefaultValue()
+  created() {
+    this.isShowData();
+    this.setDefaultValue();
   },
-  mounted () { },
+  mounted() {},
   methods: {
     // 无论哪个输入框改变 都需要触发事件 将值回传
-    changed (val, key) {
+    changed(val, key) {
       if (val.extend) {
-        this.$set(this.formData, key, val.value)
+        this.$set(this.formData, key, val.value);
       } else {
-        this.$set(this.formData, key, val)
+        this.$set(this.formData, key, val);
       }
-      this.$emit('onChanged', this.formData)
+      this.$emit("onChanged", this.formData);
       // key为当前用户操作的表单组件
       for (var i = 0; i < this.options.length; i++) {
-        var item = this.options[i]
+        var item = this.options[i];
         if (item.relactiveDom == key) {
-          this.inputShow[item.name] = val == item.relactiveDomValue
-          this.inputShow = Object.assign({}, this.inputShow)
+          this.inputShow[item.name] = val == item.relactiveDomValue;
+          this.inputShow = Object.assign({}, this.inputShow);
         }
       }
     },
-    saveData () {
-      this.$emit('onChanged', this.formData)
-      this.dialogVisibleStaticData = false
+    saveData() {
+      this.$emit("onChanged", this.formData);
+      this.dialogVisibleStaticData = false;
     },
     // 静态数据
-    addStaticData () {
-      this.dialogVisibleStaticData = true
+    addStaticData() {
+      this.dialogVisibleStaticData = true;
     },
-    handleClose () {
-      this.dialogVisibleStaticData = false
+    handleClose() {
+      this.dialogVisibleStaticData = false;
     },
     // 组件属性 数据是否展示动态还是静态数据
-    isShowData () {
-      let currentData = {}
-      const data = []
+    isShowData() {
+      let currentData = {};
+      const data = [];
       for (let i = 0; i < this.options.length; i++) {
         // 添加默认的inputShow值
-        this.inputShow[this.options[i].name] = true
+        this.inputShow[this.options[i].name] = true;
         if (this.options[i].selectValue) {
-          currentData = this.options[i]
+          currentData = this.options[i];
         } else {
-          data.push(this.options[i])
+          data.push(this.options[i]);
         }
       }
-      data.forEach((el) => {
+      data.forEach(el => {
         if (el.relactiveDomValue != currentData.value) {
-          this.inputShow[el.name] = false
+          this.inputShow[el.name] = false;
         }
-      })
+      });
     },
     // 组件拖入时 赋值
-    setDefaultValue () {
+    setDefaultValue() {
       if (this.options && this.options.length > 0) {
         for (let i = 0; i < this.options.length; i++) {
-          const obj = this.options[i]
-          if (Object.prototype.toString.call(obj) == '[object Object]') {
-            this.formData[this.options[i].name] = this.deepClone(this.options[i].value)
-          } else if (Object.prototype.toString.call(obj) == '[object Array]') {
+          const obj = this.options[i];
+          if (Object.prototype.toString.call(obj) == "[object Object]") {
+            this.formData[this.options[i].name] = this.deepClone(
+              this.options[i].value
+            );
+          } else if (Object.prototype.toString.call(obj) == "[object Array]") {
             for (let j = 0; j < obj.length; j++) {
-              const list = obj[j].list
-              list.forEach((el) => {
-                this.formData[el.name] = el.value
-              })
+              const list = obj[j].list;
+              list.forEach(el => {
+                this.formData[el.name] = el.value;
+              });
             }
           }
         }
-        this.formData = Object.assign({}, this.formData)
+        this.formData = Object.assign({}, this.formData);
       }
     },
     // 是否显示 那种格式
-    isShowForm (val, type) {
-      return Object.prototype.toString.call(val) == type
-    },
-  },
-}
+    isShowForm(val, type) {
+      return Object.prototype.toString.call(val) == type;
+    }
+  }
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/report-ui/src/views/report/bigscreen/designer/index.vue b/report-ui/src/views/report/bigscreen/designer/index.vue
index 67fce076..2d4ac68d 100644
--- a/report-ui/src/views/report/bigscreen/designer/index.vue
+++ b/report-ui/src/views/report/bigscreen/designer/index.vue
@@ -110,9 +110,10 @@
               'background-origin': 'initial',
               'background-clip': 'initial'
             }"
-            @click="setOptionsOnClickScreen"
+            @click.self="setOptionsOnClickScreen"
           >
             <widget
+              ref="widgets"
               v-for="(widget, index) in widgets"
               :key="index"
               v-model="widget.value"
@@ -121,6 +122,7 @@
               :bigscreen="{ bigscreenWidth, bigscreenHeight }"
               @onActivated="setOptionsOnClickWidget"
               @contextmenu.prevent.native="rightClick($event, index)"
+              @click.prevent.native="widgetsClick(index)"
             />
           </div>
         </vue-ruler-tool>
@@ -519,27 +521,34 @@ export default {
     },
 
     // 如果是点击某个组件，获取该组件的配置项
-    setOptionsOnClickWidget(index) {
-      // 选中不同的组件 右侧都显示第一栏
-      this.activeName = "first";
-      this.screenCode = "";
-      if (typeof index == "number") {
-        if (index < 0 || index >= this.widgets.length) {
-          return;
-        }
-        this.widgetIndex = index;
-        this.widgetOptions = this.deepClone(this.widgets[index]["options"]);
+    setOptionsOnClickWidget(obj) {
+      if (obj.index < 0 || obj.index >= this.widgets.length) {
         return;
-      } else {
-        // 执行传递过来的值
-        this.widgets[index.index].value.position = index.obj;
+      }
+      this.widgetIndex = obj.index;
+      this.widgetOptions = this.deepClone(this.widgets[obj.index]["options"]);
+      this.widgets[obj.index].value.position = obj;
+      this.widgets[obj.index].options.position.forEach(el => {
+        for (const key in obj) {
+          if (el.name == key) {
+            el.value = obj[key];
+          }
+        }
+      });
+      console.log(this.widgets);
+    },
+    widgetsClick(index) {
+      const draggableArr = this.$refs.widgets;
+      for (let i = 0; i < draggableArr.length; i++) {
+        if (i == index) {
+          this.$refs.widgets[i].$refs.draggable.setActive(true);
+        } else {
+          this.$refs.widgets[i].$refs.draggable.setActive(false);
+        }
       }
     },
-
     // 将当前选中的组件，右侧属性值更新
     widgetValueChanged(key, val) {
-      console.log(key);
-      console.log(val);
       /* 更新指定 this.widgets 中第 this.widgetIndex 个组件的value
       widgets: [{
         type: 'widget-text',
@@ -559,7 +568,6 @@ export default {
           this.setDefaultValue(this.widgets[i].options[key], val);
         }
       }
-      console.log(this.widgets);
     },
     rightClick(event, index) {
       this.rightClickIndex = index;
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue
index 06415e67..44cb19d4 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue
@@ -5,47 +5,21 @@
  * @Last Modified time: 2021-3-13 11:04:24
  !-->
 <template>
-  <!-- <vue-draggable-resizable class="vue-draggalbe" :w="data.position.width" :h="data.position.height" :x="data.position.left" :y="data.position.top" :z="data.position.zIndex" :parent="true" :is-conflict-check="true" :snap="true" :resizable="true" :draggable="true" :prevent-deactivation="false" :active="true" :snap-tolerance="20" :class-name="'widget-container'" :class-name-active="'widget-active'" @activated="onActivated(index)" @resizestop="onResizstop" @dragstop="onDragstop">
+  <avue-draggable
+    :width="widgetsWidth"
+    :height="widgetsHeight"
+    :left="widgetsLeft"
+    :top="widgetsTop"
+    ref="draggable"
+    :index="index"
+    @focus="handleFocus"
+    @blur="handleBlur"
+  >
     <component :is="type" :value="value" />
-  </vue-draggable-resizable> -->
-  <div @click.stop>
-    <vue-drag-resize
-      :w="widgetsWidth"
-      :h="widgetsHeight"
-      :x="widgetsLeft"
-      :y="widgetsTop"
-      :z="widgetsZIndex"
-      :minw="10"
-      :minh="10"
-      :parent-w="bigscreen.bigscreenWidth"
-      :parent-h="bigscreen.bigscreenHeight"
-      :snap-tolerance="20"
-      :is-conflict-check="true"
-      :class-name="'widget-container'"
-      :class-name-active="'widget-active'"
-      :prevent-deactivation="false"
-      :is-active="true"
-      :is-draggable="true"
-      :is-resizable="true"
-      :parent-limitation="true"
-      :snap-to-grid="false"
-      :aspect-ratio="false"
-      @clicked="onActivated(index)"
-      @activated="onActivated(index)"
-      @dragstop="ev => onDragstop(ev, index)"
-      @resizing="ev => onResizing(ev, index)"
-    >
-      <component :is="type" :value="value" />
-    </vue-drag-resize>
-  </div>
+  </avue-draggable>
 </template>
 
 <script>
-// 大屏设计页面的拖拽插件 https://gitee.com/charact/vue-draggable-resizable-gorkys#dragstop
-// import VueDraggableResizable from 'vue-draggable-resizable-gorkys'
-// import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
-import VueDragResize from "vue-drag-resize";
-
 import widgetHref from "./widgetHref.vue";
 import widgetText from "./widgetText.vue";
 import WidgetMarquee from "./widgetMarquee.vue";
@@ -65,8 +39,6 @@ import WidgetGauge from "./widgetGauge.vue";
 export default {
   name: "Widget",
   components: {
-    // VueDraggableResizable,
-    VueDragResize,
     widgetHref,
     widgetText,
     WidgetMarquee,
@@ -129,14 +101,15 @@ export default {
   },
   mounted() {},
   methods: {
-    onActivated(index) {
-      this.$emit("onActivated", index);
-    },
-    onDragstop(obj, index) {
-      this.$emit("onActivated", { index, obj });
+    //获取焦点
+    handleFocus({ index, left, top, width, height }) {
+      // console.log(index, left, top, width, height);
     },
-    onResizing(obj, index) {
-      this.$emit("onActivated", { index, obj });
+    //失去焦点
+    handleBlur({ index, left, top, width, height }) {
+      console.log({ index, left, top, width, height });
+      this.$emit("onActivated", { index, left, top, width, height });
+      this.$refs.draggable.setActive(true);
     }
   }
 };
@@ -153,4 +126,7 @@ export default {
   border: 1px dashed #09f;
   background-color: rgba(115, 170, 229, 0.5);
 }
+.avue-draggable {
+  padding: 0 !important;
+}
 </style>
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue
index 0a375bd0..e795fdff 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue
@@ -335,8 +335,6 @@ export default {
 .echarts {
   width: 100%;
   height: 100%;
-  min-width: 200px;
-  min-height: 200px;
   overflow: hidden;
 }
 </style>
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetText.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetText.vue
index b4f85416..ba9c8afc 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/widgetText.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetText.vue
@@ -26,7 +26,6 @@ export default {
       return this.objToOne(this.options);
     },
     styleColor() {
-      console.log(this.transStyle);
       return {
         position: this.ispreview ? "absolute" : "static",
         color: this.transStyle.color,

From ddb997793d4a34b456d7d0dd4502fec58117df36 Mon Sep 17 00:00:00 2001
From: qianlishi <1432731663@qq.com>
Date: Mon, 28 Jun 2021 15:20:12 +0800
Subject: [PATCH 2/2] update

---
 .../views/report/bigscreen/designer/form/dynamicForm.vue  | 1 -
 report-ui/src/views/report/bigscreen/designer/index.vue   | 8 ++++++++
 .../src/views/report/bigscreen/designer/widget/widget.vue | 1 -
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue b/report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue
index e03b5fea..6a0c6251 100644
--- a/report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue
+++ b/report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue
@@ -308,7 +308,6 @@ export default {
       this.formData = newValue || {};
     },
     options(val) {
-      console.log(val);
       this.setDefaultValue();
       this.isShowData();
     }
diff --git a/report-ui/src/views/report/bigscreen/designer/index.vue b/report-ui/src/views/report/bigscreen/designer/index.vue
index 2d4ac68d..3ca35b33 100644
--- a/report-ui/src/views/report/bigscreen/designer/index.vue
+++ b/report-ui/src/views/report/bigscreen/designer/index.vue
@@ -84,6 +84,7 @@
           width: bigscreenWidthInWorkbench + 'px',
           height: bigscreenHeightInWorkbench + 'px'
         }"
+        @mousedown="handleMouseDown"
       >
         <vue-ruler-tool
           v-model="dashboard.presetLine"
@@ -547,6 +548,13 @@ export default {
         }
       }
     },
+    handleMouseDown() {
+      console.log(1);
+      const draggableArr = this.$refs.widgets;
+      for (let i = 0; i < draggableArr.length; i++) {
+        this.$refs.widgets[i].$refs.draggable.setActive(false);
+      }
+    },
     // 将当前选中的组件，右侧属性值更新
     widgetValueChanged(key, val) {
       /* 更新指定 this.widgets 中第 this.widgetIndex 个组件的value
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue
index 44cb19d4..5e4e26e2 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue
@@ -107,7 +107,6 @@ export default {
     },
     //失去焦点
     handleBlur({ index, left, top, width, height }) {
-      console.log({ index, left, top, width, height });
       this.$emit("onActivated", { index, left, top, width, height });
       this.$refs.draggable.setActive(true);
     }