table换行换页

FTT.Board.VueUI/src/App.vue

 <template>
   <div id="app">
-    <router-view/>
+    <router-view v-if="isRouterAlicve"/>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'App'
-}
+  name: "App",
+  provide() {
+    return { reload: this.reload };
+  },
+  data() {
+    return {
+      isRouterAlicve: true
+    };
+  },
+  methods: {
+    reload() {
+      this.isRouterAlicve = false;
+      this.$nextTick(function() {
+        this.isRouterAlicve = true;
+      });
+    }
+  }
+};
 </script>
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   /* text-align: center; */
   color: #2c3e50;
-  height:100%;
-  width: 100%
+  height: 100%;
+  width: 100%;
 }
 
-*{
+* {
   margin: 0;
   padding: 0;
 }
-body,html{
-margin:0 auto;
-height:100%;
-width: 100%;
-overflow-x: hidden; overflow-y: auto;
+body,
+html {
+  margin: 0 auto;
+  height: 100%;
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
-#app >div{
+#app > div {
   height: 100%;
 }
 </style>

FTT.Board.VueUI/src/views/chart/Table1.vue

 <template>
-  <div
-    style="height:100%;font-size:30px"
-    :style="{color:chart.FontColor,background:chart.BackgroundColor}"
-  >
-    <div style="height:100%;width:100%">
-      <!-- <div style="width:100%;height:5%">
-        <ul class="headul">
-          <li>
-            <template v-for="(item,index) in titlestore">
-              <span
-                class="seamspan"
-                :key="index"
-                :style="{color:item.Color,width:item.Width+'%'}"
-              >{{item.Key}}</span>
-            </template>
-          </li>
-        </ul>
-      </div> -->
-      <template v-if="chart.RefreshType==1">
-        <div>
-          <ul class="item" style="height:100%">
-            <li v-for="(item,index) in bodystore" :key="index" :style="{color:getfontcolor(item)}">
-              <template v-for="(obj,index1) in item">
-                <span
-                  :key="index1"
-                  class="seamspan"
-                  :style="{width:getwidth(obj)+'%'}"
-                  v-if="obj.Key.indexOf('_')>0"
-                ></span>
-              </template>
-            </li>
-          </ul>
-        </div>
-      </template>
-      <template v-else>
-        <table style="width:100%">
-          <tr>
+  <div style="font-size:30px" :style="{color:chart.FontColor,background:chart.BackgroundColor}">
+    <div style="width:100%">
+      <table style="width:100%;height:100%">
+        <tr>
+          <td
+            v-for="(item,index) in titlestore"
+            class="tableclass"
+            :key="index"
+            :style="{color:item.Color,width:item.Width+'%'}"
+          >{{item.Key}}</td>
+        </tr>
+        <tr v-for="(item,index) in itemdata" :key="index" :style="{color:getfontcolor(item)}">
+          <template v-for="(obj,index1) in item">
             <td
-              v-for="(item,index) in titlestore"
+              :key="index1"
               class="tableclass"
-              :key="index"
-              :style="{color:item.Color,width:item.Width+'%'}"
-            >{{item.Key}}</td>
-          </tr>
-          <tr v-for="(item,index) in bodystore" :key="index" :style="{color:getfontcolor(item)}">
-            <template v-for="(obj,index1) in item">
-              <td
-                :key="index1"
-                class="tableclass"
-                :style="{width:getwidth(obj)+'%'}"
-                v-if="obj.Key.indexOf('_')>0"
-              >{{obj.Value}}</td>
-            </template>
-          </tr>
-        </table>
-        <!-- <table style="color:red">
-          <tr>
-            <td>1</td>
-            <td>2</td>
-            <td>3</td>
-            <td>4</td>
-            <td>5</td>
-          </tr>
-        </table> -->
-      </template>
+              :style="{width:getwidth(obj)+'%'}"
+              v-if="obj.Key.indexOf('_')>0"
+            >{{obj.Value}}</td>
+          </template>
+        </tr>
+      </table>
     </div>
   </div>
 </template>
@@ -74,6 +31,7 @@ import qs from "qs";
 var _this;
 export default {
   name: "charttable1",
+  inject: ["reload"],
   data() {
     return {
       store: null,
@@ -81,32 +39,100 @@ export default {
       bodystore: [],
       // marqueewidth: 0,
       pageindex: 1,
-      timer: null,
+      timer: null, //获取数据时间
+      timer1: null, //换行时间
       itemdata: [],
-      index: 0
+      index: 0,
+      laodDataTime: 0
     };
   },
+  watch: {
+    itemdata: function(val) {
+      if (val != null && this.chart.RefreshType == 2) {
+        if (val.length == 0) {
+          this.laodDataTime = 99999999;
+        } else if (val.length < this.chart.PageSize) {
+          var count = val.length * this.chart.RefreshTime;
+          this.laodDataTime = (count - 5 <= 0 ? 0 : count - 5) * 1000;
+        } else {
+          this.laodDataTime =
+            (this.chart.PageSize * this.chart.RefreshTime - 5) * 1000;
+        }
+        // console.log("laodDataTime" + this.laodDataTime);
+      }
+    },
+    laodDataTime: function(val, oldval) {
+      if (val != oldval) {
+        if (this.timer) {
+          clearInterval(this.timer);
+          this._loadDataInterval();
+        } else {
+          this._loadDataInterval();
+        }
+      }
+    },
+    "chart.RefreshTime": function(val, oldval) {
+      // console.log("new: " + val);
+      // console.log("oldval: " + oldval);
+      if (val != oldval) {
+        if (this.timer1) {
+          clearInterval(this.timer1);
+          this._itemRefreshTime();
+        } else {
+          this._itemRefreshTime();
+        }
+      }
+    },
+    "chart.RefreshType": (val, oldval) => {
+      if (val != oldval) {
+        _this._refreshPage();
+      }
+    }
+  },
   props: ["boardstore", "chart", "Api"],
   computed: {},
   mounted() {
-    // var tdodywidth = document.getElementById("tdodywidth");
-    // if (tdodywidth) {
-    //   this.marqueewidth = tdodywidth.offsetWidth;
-    // }
-    setInterval(() => {
-      _this._changeItemData();
-    }, 1000);
-
-    var time =
-      (this.chart.RefreshTime != 0
-        ? this.chart.RefreshTime
-        : this.boardstore.RefreshTime) * 1000;
-    var _this = this; //声明一个变量指向vue实例this,保证作用域一致
-    this.timer = setInterval(function() {
-      _this.loadData();
-    }, time);
+    //换行时间
+    //
   },
   methods: {
+    //数据换行/换页时间
+    _itemRefreshTime() {
+      var time =
+        (this.chart.RefreshTime != 0
+          ? this.chart.RefreshTime
+          : this.boardstore.RefreshTime) * 1000;
+      // console.log("换数据时间：" + time);
+      this.timer1 = setInterval(() => {
+        _this._changeItemData();
+      }, time);
+    },
+    //刷新页面
+    _refreshPage() {
+      this.reload();
+    },
+    //获取数据定时器
+    _loadDataInterval() {
+      var me = this;
+      //换页
+      if (this.chart.RefreshType == 1) {
+        // this.laodDataTime =(this.chart.PageSize / this.chart.RefreshTime - 5) * 1000;
+        this.timer = setInterval(function() {
+          console.log("获取数据" + me.laodDataTime);
+          // console.log(new Date());
+          _this.loadData();
+        }, me.laodDataTime);
+      }
+      //换行
+      if (this.chart.RefreshType == 2) {
+        // this.laodDataTime =(this.chart.PageSize / this.chart.RefreshTime - 5) * 1000;
+        this.timer = setInterval(function() {
+          console.log("获取数据" + me.laodDataTime);
+          // console.log(new Date());
+          _this.loadData();
+        }, me.laodDataTime);
+      }
+    },
     loadData() {
       var me = this;
       if (!this.chart.IsShow) {
@@ -133,16 +159,30 @@ export default {
         data: data
       }).then(res => {
         if (res.success) {
-          this._getData(res.rows);
+          me._getTitle(res.rows[0]);
+          if (res.rows.length < me.chart.PageSize) {
+            me.pageindex = 1;
+          } else {
+            me.pageindex++;
+          }
+
+          if (this.itemdata.length == 0) {
+            this.loadData();
+            var data = me._changeDataType(res.rows);
+            data.forEach(item => {
+              this.itemdata.push(item);
+            });
+          } else {
+            this._getData(res.rows);
+          }
         } else {
           console.log(res.message);
         }
       });
     },
-    _getData(rows) {
-      var me = this;
+    _getTitle(row) {
       var titlename = new Array();
-      for (var name in rows[0]) {
+      for (var name in row) {
         if (name.indexOf("_") > 0) {
           var arr = name.split("_");
           var titleobj = { Key: arr[0], Width: arr[1], Color: "red" };
@@ -155,23 +195,24 @@ export default {
           }
         }
       }
-      _this.titlestore = titlename;
-      if (rows.length < me.chart.PageSize) {
-        _this.pageindex = 1;
-      } else {
-        _this.pageindex++;
-      }
-      var data = _this._changeDataType(rows);
+      this.titlestore = titlename;
+    },
+    _getData(rows) {
+      var me = this;
+
+      var data = me._changeDataType(rows);
 
       if (this.chart.RefreshType == 2) {
         for (let index = 0; index < data.length; index++) {
           let element = data[index];
-          _this.bodystore.push(element);
+          me.bodystore.push(element);
         }
+        //  _this.bodystore= _this.bodystore.uniquetwo();
       } else if (this.chart.RefreshType == 1) {
         this.bodystore = data;
       }
     },
+
     _changeDataType(data) {
       var arr = [];
       if (data.length == 0) return arr;
@@ -189,6 +230,7 @@ export default {
     },
     getfontcolor(data) {
       var color = "red";
+      if (data == null) return;
       data.forEach(item => {
         if (item.Key.indexOf("_Color") >= 0) {
           color = item.Value;
@@ -204,17 +246,12 @@ export default {
         }
       }
     },
-
     _changeItemData() {
       if (this.chart.RefreshType == 2) {
-        if (this.itemdata.length == 0) {
-          this.bodystore.forEach(item => {
-            this.itemdata.push(item);
-          });
-        }
         if (this.itemdata.length == 0) return;
         var rowdata = this.bodystore.shift();
-        this.itemdata.shift();
+        this.itemdata.push(rowdata);
+        this.itemdata.shift(); //移除第一条
       } else if (this.chart.RefreshType == 1) {
         this.itemdata = this.bodystore;
       }
@@ -225,10 +262,27 @@ export default {
     if (this.timer) {
       clearInterval(this.timer); //在vue实例销毁钱，清除我们的定时器
     }
+    if (this.timer1) {
+      clearInterval(this.timer1); //在vue实例销毁钱，清除我们的定时器
+    }
   },
   created() {
     _this = this;
     this.loadData();
+    // var time =
+    //   (this.chart.RefreshTime != 0
+    //     ? this.chart.RefreshTime
+    //     : this.boardstore.RefreshTime) * 1000;
+    this.laodDataTime =
+      (this.chart.RefreshTime != 0
+        ? this.chart.RefreshTime
+        : this.boardstore.RefreshTime) * 1000;
+    _this._loadDataInterval();
+
+    //执行换行/换页程序
+    setTimeout(() => {
+      _this._itemRefreshTime();
+    }, 3000);
   }
 };
 </script>
@@ -254,13 +308,11 @@ li {
   /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
   text-overflow: ellipsis;
 }
-table{
-
-table-layout:fixed;
-
+table {
+  table-layout: fixed;
 }
-.tableclass{
-   text-align: center;
+.tableclass {
+  text-align: center;
   /* border:1px solid blue; */
   /* display: inline-block; */
   /* 不换行 */
@@ -272,7 +324,9 @@ table-layout:fixed;
   /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
   text-overflow: ellipsis;
 
-  white-space:nowrap;overflow:hidden;word-break:keep-all;
+  white-space: nowrap;
+  overflow: hidden;
+  word-break: keep-all;
 }
 @keyframes rowup {
   0% {