Skip to content

F
FTT_Board
Commit ce95bc3d authored by 王文琼's avatar 王文琼
Browse files
Options

www

parent ad094813
Hide whitespace changes
Inline Side-by-side
Showing with 397 additions and 2 deletions
FTT.Board.VueUI/src/config/comboxstore.js
View file @ ce95bc3d
......@@ -50,7 +50,8 @@ export default {
{ ID: 7, Text: "radar" ,name:"雷达图",src:require("@/assets/image/table1.jpg")},
{ ID: 8, Text: "bar" ,name:"柱状图",src:require("@/assets/image/table1.jpg")},
{ ID: 9, Text: "scatter" ,name:"散点图",src:require("@/assets/image/table1.jpg")},
{ ID: 10, Text: "chartLine" ,name:"折线图",src:require("@/assets/image/table1.jpg")},
{ ID: 10, Text: "chartLine" ,name:"折线图",src:require("@/assets/image/table1.jpg")},
{ ID: 11, Text: "Table2" ,name:"table2",src:require("@/assets/image/table1.jpg")},
],
RefreshTypeCombox: [
......
FTT.Board.VueUI/src/views/board/index.vue
View file @ ce95bc3d
......@@ -83,6 +83,7 @@ import comFoot from "@/views/chart/foot";
import Panle1 from "@/views/chart/Panle1";
import Panle2 from "@/views/chart/Panle2";
import Table1 from "@/views/chart/Table1";
import Table2 from "@/views/chart/Table2";
import pie from "@/views/chart/echarts/pie/index";
import radar from "@/views/chart/echarts/radar/index";
import bar from "@/views/chart/echarts/bar/index";
......@@ -100,7 +101,8 @@ export default {
radar,
bar,
scatter,
chartLine
chartLine,
Table2
},
data() {
return {
......
FTT.Board.VueUI/src/views/chart/Table2.vue 0 → 100644
View file @ ce95bc3d
<template>
<div style="font-size:30px" :style="{color:chart.FontColor,background:chart.BackgroundColor}">
<div style="width:100%">
<table style="width:100%;height:100%">
<tr style="height:8%" :style="{fontSize:chart.FontSize1!=0?chart.FontSize1+'px':'30px'}">
<td
v-for="(item,index) in titlestore"
class="tableclass"
:key="index"
:style="{color:item.Color,width:item.Width+'%'}"
>{{item.Key}}</td>
</tr>
<template v-for="(item,index) in itemdata">
<tr
:key="index"
:style="{fontSize:chart.FontSize2!=0?chart.FontSize2+'px':'30px',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>
</template>
<template v-if="itemdata.length<chart.PageSize">
<tr v-for="(tt,index) in (chart.PageSize-itemdata.length)" :key="'tt'+index" :style="{fontSize:chart.FontSize2!=0?chart.FontSize2+'px':'30px'}">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td></td>
</tr>
</template>
</table>
</div>
</div>
</template>
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var _this;
export default {
name: "charttable1",
inject: ["reload"],
props: ["boardstore", "chart", "Api"],
data() {
return {
store: null,
titlestore: [],
bodystore: [],
// marqueewidth: 0,
pageindex: 1,
timer: null, //获取数据时间
timer1: null, //换行时间
itemdata: [],
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 <= 0
? 1000
: (this.chart.PageSize * this.chart.RefreshTime - 5) * 1000;
}
}
},
laodDataTime: function(val, oldval) {
console.log("加载时间变化,new:" + val + " old:" + oldval);
if (val != oldval) {
}
},
"chart.RefreshTime": function(val, oldval) {
// console.log("new: " + val);
// console.log("oldval: " + oldval);
if (val != oldval) {
if (this.timer1) {
this.timer1 = null;
clearInterval(this.timer1);
this._itemRefreshTime();
} else {
this._itemRefreshTime();
}
}
},
"chart.RefreshType": (val, oldval) => {
if (val != oldval) {
_this._refreshPage();
}
},
bodystore: val => {
console.log("bodystore.Length" + val.length);
}
},
computed: {},
mounted() {
//换页时间 获取数据
var _this = this;
if (this.chart.RefreshType == 1) {
var time =
this.chart.RefreshTime != 0
? this.chart.RefreshTime
: this.boardstore.RefreshTime;
console.log(this.chart.PositionIndex + "获取数据时间" + time);
this.timer = setInterval(function() {
_this.loadData();
}, time * 1000);
}
//换行 获取数据
if (this.chart.RefreshType == 2) {
var changeRowTime =
this.chart.RefreshTime != 0
? this.chart.RefreshTime
: this.boardstore.RefreshTime;
//换行时间*每页条数 -3 就是获取数据时间
var time = changeRowTime * this.chart.PageSize - 3;
console.log(this.chart.PositionIndex + "获取数据时间" + time);
this.timer = setInterval(function() {
_this.loadData();
}, time * 1000);
//3秒后开始执行换行定时器
setTimeout(() => {
var timerow =
(this.chart.RefreshTime != 0
? this.chart.RefreshTime
: this.boardstore.RefreshTime) * 1000;
this.timer1 = setInterval(() => {
_this._changeItemData();
}, timerow);
}, 3000);
}
},
methods: {
//数据换行/换页时间
_itemRefreshTime() {},
//刷新页面
_refreshPage() {
if (this.timer) {
clearInterval(this.timer); //在vue实例销毁钱，清除我们的定时器
}
if (this.timer1) {
clearInterval(this.timer1); //在vue实例销毁钱，清除我们的定时器
}
this.reload();
},
loadData() {
var me = this;
if (!this.chart.IsShow) {
return;
}
var url = me.Api.url;
var data = {
ProcName: me.boardstore.ProcName,
PageSize: me.chart.PageSize,
PageIndex: me.pageindex,
Flag: me.chart.Flag,
WorkTeamID: me.chart.WorkTeamID,
CharTypeID: me.chart.ChartType,
ConnStr: me.boardstore.ConnectionString
};
Axios({
method: "post",
url: url,
transformRequest: [
function(data) {
return qs.stringify(data);
}
],
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++;
}
console.log("位置：" + this.chart.PositionIndex + "加载数据");
if (this.chart.RefreshType == 2) {
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);
}
}
if (this.chart.RefreshType == 1) {
this.itemdata = me._changeDataType(res.rows);
}
} else {
console.log(res.message);
}
});
},
_getTitle(row) {
var titlename = new Array();
for (var name in row) {
if (name.indexOf("_") > 0) {
var arr = name.split("_");
var titleobj = { Key: arr[0], Width: arr[1], Color: "red" };
titlename.push(titleobj);
} else {
for (var item in titlename) {
if (name.indexOf("_Color") == 0) {
titlename[item].Color = name.split("_")[2];
}
}
}
}
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];
me.bodystore.push(element);
}
} else if (this.chart.RefreshType == 1) {
this.bodystore = data;
}
},
_changeDataType(data) {
var arr = [];
if (data.length == 0) return arr;
data.forEach(elem => {
var itemarr = [];
for (var item in elem) {
var obj = new Object();
obj.Key = item;
obj.Value = elem[item];
itemarr.push(obj);
}
arr.push(itemarr);
});
return arr;
},
//换行
_changeItemData() {
if (this.chart.RefreshType == 2) {
console.log(this.chart.PositionIndex + "换行");
if (this.itemdata.length == 0) return;
var rowdata = this.bodystore.shift();
this.itemdata.push(rowdata);
this.itemdata.shift(); //移除第一条
} else if (this.chart.RefreshType == 1) {
this.itemdata = this.bodystore;
}
},
getfontcolor(data) {
var color = "red";
if (data == null) return;
data.forEach(item => {
if (item.Key.indexOf("_Color") >= 0) {
color = item.Value;
}
});
return color;
},
getwidth(obj) {
for (let index = 0; index < this.titlestore.length; index++) {
const element = this.titlestore[index];
if (obj.Key.indexOf(element.Key) >= 0) {
return element.Width;
}
}
}
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer); //在vue实例销毁钱，清除我们的定时器
}
if (this.timer1) {
clearInterval(this.timer1); //在vue实例销毁钱，清除我们的定时器
}
},
created() {
console.log("位置" + this.chart.PositionIndex);
_this = this;
this.loadData();
this.laodDataTime =
(this.chart.RefreshTime != 0
? this.chart.RefreshTime
: this.boardstore.RefreshTime) * 1000;
setTimeout(() => {
console.log("第一次加载");
// _this._loadDataInterval();
}, 1000);
if (this.chart.RefreshType == 2) {
//执行换行/换页程序
setTimeout(() => {
_this._itemRefreshTime();
}, 3000);
}
}
};
</script>
<style >
.seamless-warp {
height: 95%;
overflow: hidden;
}
li {
width: 100%;
list-style-type: none;
}
.seamspan {
text-align: center;
/* border:1px solid blue; */
width: 200px;
display: inline-block;
/* 不换行 */
word-break: keep-all;
/* 不换行 */
white-space: nowrap;
/* 内容超出宽度时隐藏超出部分的内容 */
overflow: hidden;
/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
text-overflow: ellipsis;
}
table {
table-layout: fixed;
}
.tableclass {
text-align: center;
/* border:1px solid blue; */
/* display: inline-block; */
/* 不换行 */
/* word-break: keep-all; */
/* 不换行 */
/* white-space: nowrap; */
/* 内容超出宽度时隐藏超出部分的内容 */
/* overflow: hidden; */
/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
word-break: keep-all;
}
@keyframes rowup {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, -307px, 0);
transform: translate3d(0, -307px, 0);
}
}
.rollBox {
-webkit-animation: 10s rowup linear infinite normal;
animation: 10s rowup linear infinite normal;
position: relative;
}
.el-carousel__container button {
display: none;
}
.item li {
list-style-type: none;
height: auto;
}
/* .seamless-warp {
width: 100%;
overflow: hidden;
color: red;
} */
</style>
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