Skip to content

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

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

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