Skip to content

F
FTT_Board
Commit 97ed1de2 authored by 崔婷婷's avatar 崔婷婷
Browse files
Options

【编号:16753】看板优化，table2

parent 7c0a6199
Hide whitespace changes
Inline Side-by-side
Showing with 89 additions and 19 deletions
FTT.Board.VueUI/src/views/board/boardlist/detail.vue
View file @ 97ed1de2
......@@ -23,20 +23,20 @@
</template>
</page-table>
<el-dialog
class="dialogBoard"
:title="getDialogTitle()"
:visible.sync="dialogVisible"
width="35%"
width="850px"
:before-close="handleClose"
>
<div style="overflow-y:auto;height:70vh">
<div style="overflow-y:auto;height:55vh;">
<div>
<el-form
:inline="true"
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
label-width="110px"
class="demo-ruleForm"
>
<el-row>
......@@ -128,7 +128,6 @@
</template>
</el-input>
</el-form-item>
<el-form-item label="刷新频率">
<el-input-number v-model="ruleForm.RefreshTime" :min="0"></el-input-number>
</el-form-item>
......@@ -146,34 +145,34 @@
</el-row>
<el-row>
<el-form-item label="字号1颜色" v-if="ruleForm.ChartType!=5 && ruleForm.ChartType!=11">
<el-form-item label="表头颜色" v-if="ruleForm.ChartType!=5 && ruleForm.ChartType!=11">
<el-input v-model="ruleForm.FontColor1">
<template slot="append">
<el-color-picker size="mini" v-model="ruleForm.FontColor1"></el-color-picker>
</template>
</el-input>
</el-form-item>
<el-form-item label="字号1大小">
<el-form-item label="表头大小">
<el-input-number v-model="ruleForm.FontSize1" :min="0"></el-input-number>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="字号2颜色" v-if="ruleForm.ChartType!=5 && ruleForm.ChartType!=11">
<el-form-item label="内容颜色" v-if="ruleForm.ChartType!=5 && ruleForm.ChartType!=11">
<el-input v-model="ruleForm.FontColor2">
<template slot="append">
<el-color-picker size="mini" v-model="ruleForm.FontColor2"></el-color-picker>
</template>
</el-input>
</el-form-item>
<el-form-item label="字号2大小">
<el-form-item label="内容大小">
<el-input-number v-model="ruleForm.FontSize2" :min="0"></el-input-number>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="高度">
<el-form-item label="表头高度(%)">
<el-input-number v-model="ruleForm.Height" :min="0" :precision="1" :step="1"></el-input-number>
</el-form-item>
<el-form-item label="宽度">
<el-form-item label="表头宽度(%)">
<el-input-number v-model="ruleForm.Width" :min="0" :precision="1" :step="1"></el-input-number>
</el-form-item>
</el-row>
......@@ -591,6 +590,17 @@ input::-webkit-inner-spin-button {
input[type="number"] {
-moz-appearance: textfield;
}
</style>
<style lang="scss" scoped>
/deep/.dialogBoard .el-dialog__headerbtn {
position: absolute;
top: 12px;
right: 15px;
}
/deep/.dialogBoard .el-dialog__body {
padding: 10px 20px;
}
</style>
FTT.Board.VueUI/src/views/board/index.vue
View file @ 97ed1de2
......@@ -284,6 +284,9 @@ export default {
) {
maxheight = cha.Height;
}
if(this.GetChart(element)=='Table2'){
maxheight="100"
}
}
var row = { key: index, height: maxheight };
rowsArr.push(row);
......
FTT.Board.VueUI/src/views/chart/Table2.vue
View file @ 97ed1de2
<template>
<div style="font-size:30px" :style="{color:chart.FontColor,background:chart.BackgroundColor}">
<div class="CustomTable" 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'}">
<table style="width:100%;height:100%;border-collapse: collapse;">
<tr :style="{
height:chart.Height?titleLv1Arr.length > 0?chart.Height/2+'%':chart.Height+'%':'8%',
fontSize: chart.FontSize1 != 0 ? chart.FontSize1 + 'px' : '30px',
}" v-if="titleLv1Arr.length > 0">
<th
v-for="item in titleLv1Arr"
:key="item.Key"
:colspan="item.colspan"
:rowspan="item.rowspan"
class="tableclass"
:style="{
color: chart.FontColor1?chart.FontColor1:white,
border: '1px' + ' solid ' + item.Color,
fontSize: chart.FontSize1 != 0 ? chart.FontSize1 + 'px' : '30px',
borderColor:
chart.BorderColor == null ? 'red' : chart.BorderColor,
}"
>
{{ item.Key }}
</th>
</tr>
<tr :style="{fontSize:chart.FontSize1!=0?chart.FontSize1+'px':'30px',height:chart.Height?titleLv1Arr.length > 0?chart.Height/2+'%':chart.Height+'%':'8%'}" >
<td
v-for="(item,index) in titlestore"
class="tableclass"
:key="index"
:style="{color:item.Color,width:item.Width+'%'}"
:style="{color:chart.FontColor1?chart.FontColor1:white,border:
'1px' + ' solid ' + (chart.BorderColor == null
? 'red'
: chart.BorderColor)}"
>{{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)}"
:style="{fontSize:chart.FontSize2!=0?chart.FontSize2+'px':'30px',color:chart.FontColor2?chart.FontColor2:white}"
>
<template v-for="(obj,index1) in item">
<td
......@@ -55,9 +79,9 @@ export default {
data() {
return {
store: null,
titleLv1Arr: [],
titlestore: [],
bodystore: [],
// marqueewidth: 0,
pageindex: 1,
timer: null, //获取数据时间
timer1: null, //换行时间
......@@ -217,20 +241,45 @@ export default {
},
_getTitle(row) {
var titlename = new Array();
var titleLv1Arr = 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);
var thLv = arr.length - 1;
if (thLv > 1) {
//判断是多级表头，目前支持2级，后续可扩展
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.titleLv1Arr = titleLv1Arr;
},
_getData(rows) {
var me = this;
......@@ -324,6 +373,14 @@ export default {
};
</script>
<style scoped>
.CustomTable div {
height:100%;
/* height: auto; */
}
.CustomTable th{
font-weight: normal!important;
width: 100%;
}
.seamless-warp {
height: 95%;
overflow: hidden;
......
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