Skip to content

F
FTT_Board
Commit 3c7f7ad7 authored by 崔婷婷's avatar 崔婷婷
Browse files
Options

【编号:16715】看板功能优化

parent 330ad1e6
Hide whitespace changes
Inline Side-by-side
Showing with 159 additions and 42 deletions
FTT.Board.VueUI/src/views/chart/Table1.vue
View file @ 3c7f7ad7
<template>
<div style="font-size:30px" :style="{color:chart.FontColor,background:chart.BackgroundColor}">
<div style="width:100%">
<table style="width:100%;height:100%;border-collapse:collapse">
<tr style="height:8%" :style="{fontSize:chart.FontSize1!=0?chart.FontSize1+'px':'30px'}">
<div
style="font-size: 30px"
:style="{ color: chart.FontColor, background: chart.BackgroundColor }"
>
<div style="width: 100%">
<table style="width: 100%; height: 100%; border-collapse: collapse">
<tr v-if="titleLv1Arr.length > 0">
<td
v-for="(item,index) in titlestore"
v-for="item in titleLv1Arr"
:key="item.Key"
:colspan="item.colspan"
:rowspan="item.rowspan"
class="tableclass"
:style="{
color: item.Color,
width: item.Width + '%',
border: '1px' + ' solid ' + item.Color,
borderColor:
boardstore.BorderColor == null ? 'red' : boardstore.BorderColor,
}"
>
{{ item.Key }}
</td>
</tr>
<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+'%',border:'1px'+' solid '+item.Color,borderColor:boardstore.BorderColor==null?'red':boardstore.BorderColor}"
>{{item.Key}}</td>
:style="{
color: item.Color,
width: item.Width + '%',
border: '1px' + ' solid ' + item.Color,
borderColor:
boardstore.BorderColor == null ? 'red' : boardstore.BorderColor,
}"
>
{{ item.Key }}
</td>
</tr>
<!-- <el-progress :text-inside="true" :stroke-width="20" color="#000" :percentage="90" status="exception"></el-progress> -->
<template v-for="(item,index) in itemdata">
<!-- <el-progress :text-inside="true" :stroke-width="20" color="#000" :percentage="90" status="exception"></el-progress> -->
<template v-for="(item, index) in itemdata">
<tr
:key="index"
:style="{fontSize:chart.FontSize2!=0?chart.FontSize2+'px':'30px',color:getfontcolor(item)}"
:style="{
fontSize: chart.FontSize2 != 0 ? chart.FontSize2 + 'px' : '30px',
color: getfontcolor(item),
}"
>
<template v-for="(obj,index1) in item">
<template v-for="(obj, index1) in item">
<td
:key="index1"
class="tableclass"
:style="{width:getwidth(obj)+'%',border:'1px'+' solid '+boardstore.BorderColor==null?'red':boardstore.BorderColor}"
v-if="obj.Key.indexOf('_')>0 && obj.Key.indexOf('_percent')<0"
>{{obj.Value}}</td>
:style="{
width: getwidth(obj) + '%',
border:
'1px' + ' solid ' + boardstore.BorderColor == null
? 'red'
: boardstore.BorderColor,
}"
v-if="
obj.Key.indexOf('_') > 0 && obj.Key.indexOf('_percent') < 0
"
>
{{ obj.Value }}
</td>
<td
:key="index1"
class="tableclass"
:style="{width:getwidth(obj)+'%',border:'1px'+' solid '+boardstore.BorderColor==null?'red':boardstore.BorderColor}"
v-if="obj.Key.indexOf('_percent')>0"
:style="{
width: getwidth(obj) + '%',
border:
'1px' + ' solid ' + boardstore.BorderColor == null
? 'red'
: boardstore.BorderColor,
}"
v-if="obj.Key.indexOf('_percent') > 0"
>
<el-progress :text-inside="true" :style="{color:getfontcolor(item)}" :stroke-width="20" type="line" :color="obj.Key.indexOf('#') ? '#'+obj.Value.split('#')[1] : '#409EFF'" :percentage="obj.Key.indexOf('#') ? parseInt(obj.Value.split('#')[0]) : parseInt(obj.Value)" status="exception"></el-progress>
<el-progress
:text-inside="true"
:style="{ color: getfontcolor(item) }"
:stroke-width="20"
type="line"
:color="
obj.Key.indexOf('#')
? '#' + obj.Value.split('#')[1]
: '#409EFF'
"
:percentage="
obj.Key.indexOf('#')
? parseInt(obj.Value.split('#')[0])
: parseInt(obj.Value)
"
status="exception"
></el-progress>
</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'}">
<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>
......@@ -60,6 +136,7 @@ export default {
data() {
return {
store: null,
titleLv1Arr: [],
titlestore: [],
bodystore: [],
// marqueewidth: 0,
......@@ -68,11 +145,11 @@ export default {
timer1: null, //换行时间
itemdata: [],
index: 0,
laodDataTime: 0
laodDataTime: 0,
};
},
watch: {
itemdata: function(val) {
itemdata: function (val) {
if (val != null && this.chart.RefreshType == 2) {
if (val.length == 0) {
this.laodDataTime = 99999999;
......@@ -87,12 +164,12 @@ export default {
}
}
},
laodDataTime: function(val, oldval) {
laodDataTime: function (val, oldval) {
console.log("加载时间变化,new:" + val + " old:" + oldval);
if (val != oldval) {
}
},
"chart.RefreshTime": function(val, oldval) {
"chart.RefreshTime": function (val, oldval) {
// console.log("new: " + val);
// console.log("oldval: " + oldval);
if (val != oldval) {
......@@ -110,9 +187,9 @@ export default {
_this._refreshPage();
}
},
bodystore: val => {
bodystore: (val) => {
console.log("bodystore.Length" + val.length);
}
},
},
computed: {},
......@@ -125,7 +202,7 @@ export default {
? this.chart.RefreshTime
: this.boardstore.RefreshTime;
console.log(this.chart.PositionIndex + "获取数据时间" + time);
this.timer = setInterval(function() {
this.timer = setInterval(function () {
_this.loadData();
}, time * 1000);
}
......@@ -138,7 +215,7 @@ export default {
//换行时间*每页条数 -3 就是获取数据时间
var time = changeRowTime * this.chart.PageSize - 3;
console.log(this.chart.PositionIndex + "获取数据时间" + time);
this.timer = setInterval(function() {
this.timer = setInterval(function () {
_this.loadData();
}, time * 1000);
......@@ -181,18 +258,18 @@ export default {
Flag: me.chart.Flag,
WorkTeamID: me.chart.WorkTeamID,
CharTypeID: me.chart.ChartType,
ConnStr: me.boardstore.ConnectionString
ConnStr: me.boardstore.ConnectionString,
};
Axios({
method: "post",
url: url,
transformRequest: [
function(data) {
function (data) {
return qs.stringify(data);
}
},
],
data: data
}).then(res => {
data: data,
}).then((res) => {
if (res.success) {
me._getTitle(res.rows[0]);
if (res.rows.length < me.chart.PageSize) {
......@@ -205,7 +282,7 @@ export default {
if (this.itemdata.length == 0) {
this.loadData();
var data = me._changeDataType(res.rows);
data.forEach(item => {
data.forEach((item) => {
this.itemdata.push(item);
});
} else {
......@@ -215,11 +292,11 @@ export default {
if (this.chart.RefreshType == 1) {
this.itemdata = me._changeDataType(res.rows);
}
if(me.itemdata.length == 0) {
me.pageindex = 1
this.loadData()
if (me.itemdata.length == 0) {
me.pageindex = 1;
this.loadData();
}
console.warn('itemdata'+JSON.stringify(me.itemdata))
console.warn("itemdata" + JSON.stringify(me.itemdata));
} else {
console.log(res.message);
}
......@@ -227,20 +304,60 @@ export default {
},
_getTitle(row) {
var titlename = new Array();
var titleLv1Arr = new Array();
// for (var name in row) {
// if (name.indexOf("_") > 0) {
// console.error(name,"namenamenamename")
// 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];
// }
// }
// }
// }
// console.error(row);
for (var name in row) {
// console.error(name, "namenamenamenamename")
if (name.indexOf("_") > 0) {
var arr = name.split("_");
var thLv = arr.length - 1;
if (thLv > 1) {
//判断是多级表头，目前公支持2级，后续可扩展
// titleLv1Arr.push(
// { Key: arr[2], Color: "red" }
// )
const existItem = titleLv1Arr.find((item) => item.Key == arr[2]);
if (existItem) {
existItem.colspan++;
} else {
titleLv1Arr.push({ Key: arr[2], Color: "red", colspan: 1 });
}
var titleobj = { Key: arr[0], Width: arr[1], Color: "red" };
titlename.push(titleobj);
} else {
titleLv1Arr.push({ Key: arr[0], Color: "red", colspan: 1,rowspan: 2 });
}
} else {
for (var item in titlename) {
if (name.indexOf("_Color") == 0) {
titlename[item].Color = name.split("_")[2];
}
}
for (var item in titleLv1Arr) {
if (name.indexOf("_Color") == 0) {
titleLv1Arr[item].Color = name.split("_")[2];
}
}
}
}
// this.titlestore = titlename;
this.titlestore = titlename;
this.titleLv1Arr = titleLv1Arr;
},
_getData(rows) {
var me = this;
......@@ -258,7 +375,7 @@ export default {
_changeDataType(data) {
var arr = [];
if (data.length == 0) return arr;
data.forEach(elem => {
data.forEach((elem) => {
var itemarr = [];
for (var item in elem) {
var obj = new Object();
......@@ -286,7 +403,7 @@ export default {
getfontcolor(data) {
var color = "red";
if (data == null) return;
data.forEach(item => {
data.forEach((item) => {
if (item.Key.indexOf("_Color") >= 0) {
color = item.Value;
}
......@@ -300,7 +417,7 @@ export default {
return element.Width;
}
}
}
},
},
beforeDestroy() {
......@@ -329,7 +446,7 @@ export default {
_this._itemRefreshTime();
}, 3000);
}
}
},
};
</script>
<style scoped>
......@@ -361,7 +478,7 @@ table {
.tableclass {
text-align: center;
box-sizing: border-box;
padding:0 10px;
padding: 0 10px;
/* border:1px solid blue; */
/* display: inline-block; */
/* 不换行 */
......
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