Skip to content

F
FTT_Board
Commit 42488b87 authored by zhangboyang's avatar zhangboyang
Browse files
Options

table换行换页

parent 197665bf
Show whitespace changes
Inline Side-by-side
Showing with 192 additions and 120 deletions
FTT.Board.VueUI/src/App.vue
View file @ 42488b87
<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
View file @ 42488b87
<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%">
<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"
......@@ -43,7 +10,7 @@
:style="{color:item.Color,width:item.Width+'%'}"
>{{item.Key}}</td>
</tr>
<tr v-for="(item,index) in bodystore" :key="index" :style="{color:getfontcolor(item)}">
<tr v-for="(item,index) in itemdata" :key="index" :style="{color:getfontcolor(item)}">
<template v-for="(obj,index1) in item">
<td
:key="index1"
......@@ -54,16 +21,6 @@
</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>
</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);
//换行时间
//
},
methods: {
//数据换行/换页时间
_itemRefreshTime() {
var time =
(this.chart.RefreshTime != 0
? this.chart.RefreshTime
: this.boardstore.RefreshTime) * 1000;
var _this = this; //声明一个变量指向vue实例this,保证作用域一致
// 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();
}, time);
}, 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);
}
},
methods: {
loadData() {
var me = this;
if (!this.chart.IsShow) {
......@@ -133,16 +159,30 @@ export default {
data: data
}).then(res => {
if (res.success) {
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,12 +308,10 @@ li {
/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
text-overflow: ellipsis;
}
table{
table-layout:fixed;
table {
table-layout: fixed;
}
.tableclass{
.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% {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment