文本组件可从静态数据中获取数据；多选图片地址选择可记录选择状态；全局数据保存样式错误问题解决；

zhangzzzz
1 parent dfda9e28
Showing 7 changed files with 172 additions and 87 deletions
src/store/index.js
src/store/modules/dataSource.js
src/views/bigscreenDesigner/designer/components/customUploadMulti.vue
src/views/bigscreenDesigner/designer/components/dynamicForm.vue
src/views/bigscreenDesigner/designer/index.vue
src/views/bigscreenDesigner/designer/tools/configure/texts/widget-text.js
src/views/bigscreenDesigner/designer/widget/text/widgetText.vue
@@ -7,6 +7,7 @@ import app from &#39;./modules/app&#39;
 import user from './modules/user'
 import cacheView from './modules/cachaView'
 import help from './modules/help'
+import dataSource from './modules/dataSource'
 Vue.use(Vuex)
@@ -18,7 +19,8 @@ const store = new Vuex.Store({
     app,
     user,
     cacheView,
-    help
+    help,
+    dataSource
   },
   state: { },
   plugins: [initPlugin],
+const dataSource = {
+  namespaced: true,
+  state: {
+    staticData: {},
+    dynamicData: {}
+  },
+
+  mutations: {
+    SET_STATIC_DATA: (state, data) => {
+      state.staticData = data;
+    },
+    SET_DYNAMIC_DATA: (state, data) => {
+      state.dynamicData = data;
+    }
+  },
+
+  actions: {}
+};
+
+export default dataSource;
 <template>
   <div>
-    <el-input clearable v-model.trim="uploadImgUrl" size="mini" @change="changeInput">
+    <el-input clearable v-model="uploadImgUrl" size="mini" @change="changeInput">
       <template slot="append">
         <i class="iconfont iconfolder-o" @click="dialogVisible = true"></i>
       </template>
@@ -58,9 +58,10 @@ export default {
       uploadImgUrl: ""
     };
   },
-  created() {
-    this.uploadImgUrl = this.value;
-    this.getFielList();
+  async created() {
+    this.uploadImgUrl = this.value.trim();
+    await this.getFielList();
+    this.getSelectedFileList();
   },
   methods: {
     // 获取图片列表
@@ -72,6 +73,14 @@ export default {
         this.fileList = fileList;
       }
     },
+    // 获取已选中图片列表
+    getSelectedFileList() {
+      const urlPathList = this.uploadImgUrl.split(',');
+      urlPathList.forEach(url => {
+        const temp = this.fileList.find(item => item.urlPath === url);
+        temp && this.selectedFileList.push(temp);
+      });
+    },
     uploadHandler() {
       this.$refs.files.click();
     },
@@ -111,6 +111,22 @@
               />
             </el-select>
+            <el-select
+              v-if="item.type == 'el-select-static'"
+              size="mini"
+              v-model="formData[item.name]"
+              clearable
+              placeholder="请选择"
+              @change="val => changed(val, item.name)"
+            >
+              <el-option
+                v-for="(val, key) in staticData"
+                :key="key"
+                :label="key"
+                :value="key"
+              />
+            </el-select>
+
             <el-slider
               v-if="item.type == 'el-slider'"
               v-model="formData[item.name]"
@@ -301,6 +317,7 @@ import dynamicAddRadar from &quot;./dynamicAddRadar&quot;;
 import CustomUploadNew from "./customUploadNew";
 import DatasourceSelect from "./datasourceSelect";
 import CustomUploadMulti from "./customUploadMulti";
+import { mapState } from 'vuex';
 export default {
   name: "DynamicForm",
   components: {
@@ -342,9 +359,12 @@ export default {
         hintOptions: {
           completeSingle: true // 当匹配只有一项的时候是否自动补全
         }
-      }
+      },
     };
   },
+  computed: {
+    ...mapState('dataSource', ['staticData']),
+  },
   watch: {
     value(newValue, oldValue) {
       this.formData = newValue || {};
@@ -352,7 +372,7 @@ export default {
     options(val) {
       this.setDefaultValue();
       this.isShowData();
-    }
+    },
   },
   created() {
     this.isShowData();
@@ -297,6 +297,7 @@ import VueRulerTool from &quot;vue-ruler-tool&quot;; // 大屏设计页面的标尺插件
 import contentMenu from "./components/contentMenu";
 import { getToken } from "@/utils/auth";
 import { Revoke } from "@/utils/revoke"; //处理历史记录 2022-02-22
+import { mapMutations } from 'vuex';
 export default {
   name: "Login",
@@ -331,11 +332,12 @@ export default {
         height: 1080, // 大屏设计高度
         backgroundColor: "", // 大屏背景色
         backgroundImage: "", // 大屏背景图片
-        master: null, // 全局数据源
-        refreshMasterTime: 600000, // 刷新时间(毫秒)
+        // master: null, // 全局数据源
+        // refreshMasterTime: 600000, // 刷新时间(毫秒)
         refreshSeconds: null, // 大屏刷新时间间隔
         presetLine: [], // 辅助线
         presetLineVisible: true, // 辅助线是否显示
+        data: [],
       },
       masterData:{"sName1":"测试文本1","sName2":"测试文本2"},
       // 大屏的标记
@@ -450,6 +452,7 @@ export default {
     });
   },
   methods: {
+    ...mapMutations('dataSource', ['SET_STATIC_DATA']),
     /**
      * @description: 恢复
      * @param {*}
@@ -785,13 +788,18 @@ export default {
       // 选中不同的组件 右侧都显示第一栏
       this.activeName = "first";
       this.widgetOptions = getToolByCode("screen")["options"];
+      this.SET_STATIC_DATA(this.widgetOptions.data.find(item => item.name === 'staticData').value);
     },
     // 如果是点击某个组件，获取该组件的配置项
     setOptionsOnClickWidget(obj) {
       this.screenCode = "";
       if (typeof obj == "number") {
-        this.widgetOptions = this.deepClone(this.widgets[obj]["options"]);
+        this.widgetOptions = {};
+        // 直接赋值数据不刷新。。。
+        this.$nextTick(() => {
+          this.widgetOptions = this.deepClone(this.widgets[obj]["options"]);
+        });
         return;
       }
       if (obj.index < 0 || obj.index >= this.widgets.length) {
@@ -831,32 +839,43 @@ export default {
     },
     // 将当前选中的组件，右侧属性值更新
     widgetValueChanged(key, val) {
-      // console.log("key", key);
-      // console.log("val", val);
-      // console.log(this.widgetOptions);
       if (this.screenCode == "screen") {
-        let newSetup = new Array();
-        this.dashboard = this.deepClone(val);
-        // console.log("asd", this.dashboard);
-        // console.log(this.widgetOptions);
-        if (this.bigscreenWidth != this.dashboard.width) {
-          this.bigscreenWidth = this.dashboard.width;
-        }
-        if (this.bigscreenHeight != this.dashboard.height) {
-          this.bigscreenHeight = this.dashboard.height;
-        }
-        this.widgetOptions.setup.forEach((el) => {
-          if (el.name == "width") {
-            el.value = this.bigscreenWidth;
-          } else if (el.name == "height") {
-            el.value = this.bigscreenHeight;
-          } else if (this.hasOwn(el.name)) {
-            el["value"] = this.dashboard[el.name];
+        if (key === 'setup') {
+          // 全局配置更改
+          let newSetup = new Array();
+          this.dashboard = this.deepClone(val);
+          if (this.bigscreenWidth !== this.dashboard.width && this.dashboard.width) {
+            this.bigscreenWidth = this.dashboard.width;
           }
-          newSetup.push(el);
-        });
-        // console.log(newSetup);
-        this.widgetOptions.setup = newSetup;
+          if (this.bigscreenHeight !== this.dashboard.height && this.dashboard.height) {
+            this.bigscreenHeight = this.dashboard.height;
+          }
+
+          this.widgetOptions.setup.forEach((el) => {
+            if (el.name == "width") {
+              el.value = this.bigscreenWidth;
+            } else if (el.name == "height") {
+              el.value = this.bigscreenHeight;
+            } else if (Object.hasOwn(this.dashboard, el.name)) {
+              el["value"] = this.dashboard[el.name];
+            }
+            newSetup.push(el);
+          });
+          this.widgetOptions.setup = newSetup;
+        } else if (key === 'data') {
+          // 全局数据更改
+            val.staticData && this.SET_STATIC_DATA(val.staticData);
+            let newData = new Array();
+            const cloneVal = this.deepClone(val);
+            this.widgetOptions.data.forEach((el) => {
+            if (Object.hasOwn(cloneVal, el.name)) {
+              el["value"] = cloneVal[el.name];
+            }
+            newData.push(el);
+          });
+          this.widgetOptions.data = newData;
+        }
+        
       } else {
         for (let i = 0; i < this.widgets.length; i++) {
           if (this.widgetIndex == i) {
@@ -32,6 +32,15 @@ export const widgetText =  {
           value: '文本框',
         },
         {
+          type: 'el-select-static',
+          label: '全局静态数据选择',
+          name: 'slectedDataType',
+          require: false,
+          placeholder: '',
+          selectOptions: [],
+          value: '',
+        },
+        {
           type: 'el-input-number',
           label: '字体字号',
           name: 'fontSize',
@@ -92,57 +101,57 @@ export const widgetText =  {
         },
       ],
       // 数据
-      data: [
-        {
-          type: 'el-radio-group',
-          label: '数据类型',
-          name: 'dataType',
-          require: false,
-          placeholder: '',
-          selectValue: true,
-          selectOptions: [
-            {
-              code: 'staticData',
-              name: '静态数据',
-            },
-            {
-              code: 'dynamicData',
-              name: '动态数据',
-            },
-          ],
-          value: 'staticData',
-        },
-        {
-          type: 'el-input-number',
-          label: '刷新时间(毫秒)',
-          name: 'refreshTime',
-          relactiveDom: 'dataType',
-          relactiveDomValue: 'dynamicData',
-          value: 5000
-        },
-        {
-          type: 'el-button',
-          label: '静态数据',
-          name: 'staticData',
-          required: false,
-          placeholder: '',
-          relactiveDom: 'dataType',
-          relactiveDomValue: 'staticData',
-          value: '文本框',
-        },
-        {
-          type: 'dycustComponents',
-          label: '',
-          name: 'dynamicData',
-          required: false,
-          placeholder: '',
-          relactiveDom: 'dataType',
-          relactiveDomValue: 'dynamicData',
-          chartType: 'widget-text',
-          dictKey: 'TEXT_PROPERTIES',
-          value: '',
-        }
-      ],
+      // data: [
+      //   {
+      //     type: 'el-radio-group',
+      //     label: '数据类型',
+      //     name: 'dataType',
+      //     require: false,
+      //     placeholder: '',
+      //     selectValue: true,
+      //     selectOptions: [
+      //       {
+      //         code: 'staticData',
+      //         name: '静态数据',
+      //       },
+      //       {
+      //         code: 'dynamicData',
+      //         name: '动态数据',
+      //       },
+      //     ],
+      //     value: 'staticData',
+      //   },
+      //   {
+      //     type: 'el-input-number',
+      //     label: '刷新时间(毫秒)',
+      //     name: 'refreshTime',
+      //     relactiveDom: 'dataType',
+      //     relactiveDomValue: 'dynamicData',
+      //     value: 5000
+      //   },
+      //   {
+      //     type: 'el-button',
+      //     label: '静态数据',
+      //     name: 'staticData',
+      //     required: false,
+      //     placeholder: '',
+      //     relactiveDom: 'dataType',
+      //     relactiveDomValue: 'staticData',
+      //     value: '文本框',
+      //   },
+      //   {
+      //     type: 'dycustComponents',
+      //     label: '',
+      //     name: 'dynamicData',
+      //     required: false,
+      //     placeholder: '',
+      //     relactiveDom: 'dataType',
+      //     relactiveDomValue: 'dynamicData',
+      //     chartType: 'widget-text',
+      //     dictKey: 'TEXT_PROPERTIES',
+      //     value: '',
+      //   }
+      // ],
       // 坐标
       position: [
 <template>
-  <div class="text" :style="styleColor">{{ styleColor.text }}</div>
+  <div class="text" :style="styleColor">{{ showText }}</div>
 </template>
 <script>
+import { mapState } from 'vuex';
 export default {
   name: "WidgetText",
   components: {},
@@ -17,6 +18,7 @@ export default {
     };
   },
   computed: {
+    ...mapState('dataSource', ['staticData']),
     transStyle() {
       return this.objToOne(this.options);
     },
@@ -36,6 +38,10 @@ export default {
         top: this.transStyle.top + "px",
         right: this.transStyle.right + "px"
       };
+    },
+    showText() {
+      const {text, slectedDataType} = this.transStyle;
+      return this.staticData[slectedDataType] || text;
     }
   },
   watch: {
@@ -46,7 +52,7 @@ export default {
         this.setOptionsData();
       },
       deep: true
-    }
+    },
   },
   mounted() {
     this.options = this.value;