主数据源刷新，子数据源跟着定时刷新（text、文本）

qianbao
1 parent e08dd4d5
Showing 4 changed files with 88 additions and 32 deletions
src/store/modules/dataSource.js
src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue
src/views/bigscreenDesigner/designer/widget/text/widgetText.vue
src/views/bigscreenDesigner/viewer/index.vue
@@ -2,13 +2,17 @@ const dataSource = {
   namespaced: true,
   state: {
     staticData: {},
-    dynamicData: {}
+    dynamicData: {},
+    staticRefreshTime: 6000000
   },
   mutations: {
     SET_STATIC_DATA: (state, data) => {
       state.staticData = data;
     },
+    SET_REFRESHTIME: (state, data) => {
+      state.staticRefreshTime = data;
+    },
     SET_DYNAMIC_DATA: (state, data) => {
       state.dynamicData = data;
     }
@@ -44,11 +44,15 @@ export default {
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
-      optionsSetup: {}
+      optionsSetup: {},
+      flagInter: null,
     };
   },
+  beforeDestroy() {
+    clearInterval(this.flagInter);
+  },
   computed: {
-    ...mapState('dataSource', ['staticData']),
+    ...mapState('dataSource', ['staticData','staticRefreshTime']),
     styleObj() {
       /*数字初始化*/
       const {slectedDataType,numberText} = this.optionsSetup;
@@ -100,20 +104,28 @@ export default {
   methods: {
     // 修改图标options属性
     editorOptions() {
-      //显示内容
-      this.showText();
-
       //数据修改
       this.setOptionsData();
       //字体样式修改
       this.setFontStyle();
+
+      //显示内容
+      this.showText();
     },
     //显示的内容
     showText() {
       const {slectedDataType,numberText} = this.optionsSetup;
       let datav = this.staticData[slectedDataType] || numberText;
+      if(this.isNotBlank(slectedDataType)){
+        const refreshTime = this.staticRefreshTime || 300000;
+        this.dynamicDataFn(refreshTime);
+      }else{
+        this.setShowText(datav);
+      }
+    },
+    setShowText(datav) {
       let dataArray = datav.toString().split(",");
       const numArray=[];
       if(this.isNotBlankArray(dataArray)){
@@ -122,6 +134,7 @@ export default {
         });
       }
       this.options.number = numArray;
+      this.options={...this.options};
     },
     //字体修改
     setFontStyle() {
@@ -134,7 +147,6 @@ export default {
       fontStyle.fontFamily=this.optionsSetup.fontFamily;
       this.options.textAlign =optionsSetup.textAlign;
       this.options.style = fontStyle;
-      this.options={...this.options};
     },
     //千为分隔符
     formatterNum (number) {
@@ -158,8 +170,23 @@ export default {
       this.options.toFixed=optionsSetup.toFixed;
       this.options.textAlign= this.options.style.textAlign;
       this.options.animationFrame=optionsSetup.animationFrame;
-     // this.options={...this.options};
     },
+    //定时动态数据获取
+    dynamicDataFn(refreshTime) {
+      if (this.ispreview) {
+        this.flagInter = setInterval(() => {
+          this.getEchartData();
+        }, refreshTime);
+      } else {
+        this.getEchartData();
+      }
+    },
+    getEchartData() {
+      const {slectedDataType,numberText} = this.optionsSetup;
+      const datav = this.staticData[slectedDataType] || numberText;
+      // console.log("翻牌数值",datav)
+      this.setShowText(datav);
+    }
   }
 };
 <template>
-  <div class="text" :style="styleColor">{{ showText }}</div>
+  <div class="text" :style="styleColor"  v-if="isRouterAlive" v-html="showText" ></div>
 </template>
 <script>
@@ -11,16 +11,31 @@ export default {
     value: Object,
     ispreview: Boolean
   },
+  provide(){
+    return{
+      reload:this.reload
+    }
+  },
   data() {
     return {
       options: {},
-      optionsData: {}
+      optionsData: {},
+      flagInter: null,
+      isRouterAlive:true,
+      showText:''
     };
   },
+  beforeDestroy() {
+    clearInterval(this.flagInter);
+  },
   computed: {
-    ...mapState('dataSource', ['staticData']),
+    ...mapState('dataSource', ['staticData','staticRefreshTime']),
     transStyle() {
-      return this.objToOne(this.options);
+      const obj = this.objToOne(this.options);
+      const {text, slectedDataType} = obj;
+      const val = this.staticData[slectedDataType] || text;
+      this.showText = val;
+      return obj;
     },
     styleColor() {
       return {
@@ -39,10 +54,6 @@ export default {
         right: this.transStyle.right + "px"
       };
     },
-    showText() {
-      const {text, slectedDataType} = this.transStyle;
-      return this.staticData[slectedDataType] || text;
-    }
   },
   watch: {
     value: {
@@ -50,6 +61,7 @@ export default {
         this.options = val;
         this.optionsData = val.data;
         this.setOptionsData();
+        this.setShowText();
       },
       deep: true
     },
@@ -62,28 +74,39 @@ export default {
   methods: {
     // 数据解析
     setOptionsData() {
-      const optionsData = this.optionsData; // 数据类型 静态 or 动态
-      if (optionsData.dataType == "dynamicData") {
-        this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
-      };
+      const {slectedDataType} = this.transStyle;
+      if(this.isNotBlank(slectedDataType)){
+          const refreshTime = this.staticRefreshTime || 300000;
+          this.dynamicDataFn(refreshTime);
+      }
+    },
+    setShowTextRolad(){
+      this.setShowText();
+      this.reload();
+    },
+    setShowText() {
+      const {text, slectedDataType} = this.transStyle;
+      const val = this.staticData[slectedDataType] || text;
+      this.showText = val;
+    },
+    // vue hack 之强制刷新组件
+    reload(){
+      this.isRouterAlive=false;
+      this.$nextTick(function(){
+        this.isRouterAlive=true;
+      })
     },
-    dynamicDataFn(val, refreshTime) {
-      if (!val) return;
+    dynamicDataFn(refreshTime) {
       if (this.ispreview) {
-        this.getEchartData(val);
         this.flagInter = setInterval(() => {
-          this.getEchartData(val);
+          this.getEchartData();
         }, refreshTime);
       } else {
-        this.getEchartData(val);
+        this.getEchartData();
       }
     },
-    getEchartData(val) {
-      const data = this.queryEchartsData(val);
-      data.then(res => {
-        this.styleColor.text = res[0].value;
-        this.$forceUpdate();
-      });
+    getEchartData() {
+      this.setShowTextRolad();
     }
   }
 };
@@ -34,7 +34,7 @@ export default {
     this.getData();
   },
   methods: {
-    ...mapMutations('dataSource', ['SET_STATIC_DATA']),
+    ...mapMutations('dataSource', ['SET_STATIC_DATA','SET_REFRESHTIME']),
     async getData() {
       const reportCode = this.$route.query.reportCode;
       const { code, data } = await detailDashboard(reportCode);
@@ -65,6 +65,7 @@ export default {
       // 数据类型 静态 or 动态
       const screenD = screenData.data;
       const refreshTime =  screenD["refreshTime"]||60000*30;
+      this.SET_REFRESHTIME(refreshTime);
       screenD.dataType == "staticData"
         ? this.staticDataFn(screenD.staticData)
         : this.dynamicDataFn(screenD.dynamicData, refreshTime);
@@ -100,6 +101,7 @@ export default {
           }
         }
       }
+      // console.log("著数据源。。。。",this.masterData)
       this.SET_STATIC_DATA(this.masterData);
     },
   },