Skip to content

F
FTT_Board
Commit 61b62c94 authored by zhangboyang's avatar zhangboyang
Browse files
Options

代码优化，在CFG_Board中添加BoderColor边框颜色控制

parent 9cb16310
Show whitespace changes
Inline Side-by-side
Showing with 138 additions and 131 deletions
FTT.Board.VueUI/src/views/board/boardlist/detail.vue
View file @ 61b62c94
......@@ -44,9 +44,14 @@
</el-form-item>
<el-form-item label="容器类型" prop="ChartType">
<el-select v-model="ruleForm.ChartType" placeholder="请选择容器类型">
<el-popover width="160" placement="right-end" trigger="hover" v-for="item in comboxstore.ChartTypeCombox" :key="item.ID">
<p>这是一段内容这是一段内容确定删除吗？{{item.ID}}</p>
<img :src="item.src" class="image">
<el-popover
width="160"
placement="right-end"
trigger="hover"
v-for="item in comboxstore.ChartTypeCombox"
:key="item.ID"
>
<img :src="item.src" class="charttypeimage" >
<el-option
:key="item.ID"
:label="item.Text"
......@@ -95,7 +100,6 @@
</el-form-item>
<el-form-item label="刷新类别" v-if="ruleForm.ChartType==5">
<el-select v-model="ruleForm.RefreshType" placeholder="请选择容器刷新类别">
<el-option
v-for="item in comboxstore.RefreshTypeCombox"
......@@ -162,8 +166,6 @@
</div>
</div>
</el-dialog>
</el-card>
</div>
</template>
......@@ -527,6 +529,12 @@ export default {
};
</script>
<style>
.charttypeimage{
width:100%;
height:auto;
}
.box-card {
height: 100%;
}
......
FTT.Board.VueUI/src/views/chart/Table1.vue
View file @ 61b62c94
......@@ -3,9 +3,9 @@
style="height:100%;font-size:30px"
:style="{color:chart.FontColor,background:chart.BackgroundColor}"
>
<div style="height:100%">
<div style="width:100%;height:5%">
<ul>
<div style="height:100%;width:100%">
<!-- <div style="width:100%;height:5%">
<ul class="headul">
<li>
<template v-for="(item,index) in titlestore">
<span
......@@ -16,10 +16,10 @@
</template>
</li>
</ul>
</div>
</div> -->
<template v-if="chart.RefreshType==1">
<div>
<ul class="item">
<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
......@@ -27,27 +27,42 @@
class="seamspan"
:style="{width:getwidth(obj)+'%'}"
v-if="obj.Key.indexOf('_')>0"
>{{obj.Value}}</span>
></span>
</template>
</li>
</ul>
</div>
</template>
<template v-else>
<vue-seamless-scroll :data="bodystore" class="seamless-warp" :class-option="optionset">
<ul class="item">
<li v-for="(item,index) in bodystore" :key="index" :style="{color:getfontcolor(item)}">
<table style="width:100%">
<tr>
<td
v-for="(item,index) in titlestore"
class="tableclass"
:key="index"
:style="{color:item.Color,width:item.Width+'%'}"
>{{item.Key}}</td>
</tr>
<tr v-for="(item,index) in bodystore" :key="index" :style="{color:getfontcolor(item)}">
<template v-for="(obj,index1) in item">
<span
<td
:key="index1"
class="seamspan"
class="tableclass"
:style="{width:getwidth(obj)+'%'}"
v-if="obj.Key.indexOf('_')>0"
>{{obj.Value}}</span>
>{{obj.Value}}</td>
</template>
</li>
</ul>
</vue-seamless-scroll>
</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>
......@@ -56,6 +71,7 @@
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var _this;
export default {
name: "charttable1",
data() {
......@@ -63,53 +79,35 @@ export default {
store: null,
titlestore: [],
bodystore: [],
marqueewidth: 0,
// marqueewidth: 0,
pageindex: 1,
timer: null
timer: null,
itemdata: [],
index: 0
};
},
props: ["boardstore", "chart", "Api"],
computed: {
optionset() {
if (this.chart) {
if (this.chart.RefreshType == 2) {
//换行
return {
hoverStop: false,
singleHeight: 47,
waitTime: 2500
};
} else if (this.chart.RefreshType == 3) {
//滚动
return {
hoverStop: false,
step: 3
};
}
}
// return {
// hoverStop: false,
// singleHeight: 47
// };
}
},
computed: {},
mounted() {
var tdodywidth = document.getElementById("tdodywidth");
if (tdodywidth) {
this.marqueewidth = tdodywidth.offsetWidth;
}
// var tdodywidth = document.getElementById("tdodywidth");
// if (tdodywidth) {
// this.marqueewidth = tdodywidth.offsetWidth;
// }
setInterval(() => {
_this._changeItemData();
}, 1000);
var time =
(this.chart.RefreshTime != 0
? this.chart.RefreshTime
: this.boardstore.RefreshTime) * 1000;
var _this = this; //声明一个变量指向vue实例this,保证作用域一致
this.timer = setInterval(function() {
_this.loadData(1, 2);
_this.loadData();
}, time);
},
methods: {
loadData(id, workteamid) {
loadData() {
var me = this;
if (!this.chart.IsShow) {
return;
......@@ -135,8 +133,16 @@ export default {
data: data
}).then(res => {
if (res.success) {
this._getData(res.rows);
} else {
console.log(res.message);
}
});
},
_getData(rows) {
var me = this;
var titlename = new Array();
for (var name in res.rows[0]) {
for (var name in rows[0]) {
if (name.indexOf("_") > 0) {
var arr = name.split("_");
var titleobj = { Key: arr[0], Width: arr[1], Color: "red" };
......@@ -149,31 +155,24 @@ export default {
}
}
}
me.titlestore = titlename;
var data = me.changedata(res.rows);
// me.bodystore = res.rows;
if (res.rows.length < me.chart.PageSize) {
me.pageindex = 1;
me.bodystore = data;
} else {
me.pageindex++;
if (this.chart.RefreshType == 1) {
me.bodystore = data;
_this.titlestore = titlename;
if (rows.length < me.chart.PageSize) {
_this.pageindex = 1;
} else {
me.bodystore = data;
// for (let index = 0; index < data.length; index++) {
// const element = data[index];
// me.bodystore.push(element);
// }
_this.pageindex++;
}
var data = _this._changeDataType(rows);
if (this.chart.RefreshType == 2) {
for (let index = 0; index < data.length; index++) {
let element = data[index];
_this.bodystore.push(element);
}
} else {
console.log(res.message);
} else if (this.chart.RefreshType == 1) {
this.bodystore = data;
}
});
},
changedata(data) {
_changeDataType(data) {
var arr = [];
if (data.length == 0) return arr;
data.forEach(elem => {
......@@ -204,6 +203,21 @@ export default {
return element.Width;
}
}
},
_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();
} else if (this.chart.RefreshType == 1) {
this.itemdata = this.bodystore;
}
}
},
......@@ -213,6 +227,7 @@ export default {
}
},
created() {
_this = this;
this.loadData();
}
};
......@@ -239,43 +254,26 @@ li {
/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
text-overflow: ellipsis;
}
table {
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
tr {
/* height: 50px; */
max-height: 60px;
}
td {
padding-top: 0px;
padding-bottom: 0px;
table{
table-layout:fixed;
}
.tr > div {
.tableclass{
text-align: center;
display: table-cell;
vertical-align: middle;
}
table {
table-layout: fixed; /* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
thead {
background: black !important;
}
td {
width: 100%;
/* border:1px solid blue; */
/* display: inline-block; */
/* 不换行 */
word-break: keep-all;
/* word-break: keep-all; */
/* 不换行 */
white-space: nowrap;
/* white-space: nowrap; */
/* 内容超出宽度时隐藏超出部分的内容 */
overflow: hidden;
/* 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);
......@@ -292,7 +290,13 @@ td {
animation: 10s rowup linear infinite normal;
position: relative;
}
.el-carousel__container button {
display: none;
}
.item li {
list-style-type: disc;
height: auto;
}
/* .seamless-warp {
width: 100%;
overflow: hidden;
......
FTT.Board.VueUI/src/views/home/menutree.vue
View file @ 61b62c94
......@@ -55,11 +55,6 @@ export default {
text: "看板",
name: "board",
path: "board"
},
{
text: "看板1",
name: "boardlistdetail",
path: 'boardlist_detail'
},
]
}
......@@ -68,10 +63,10 @@ export default {
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
// console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
// console.log(key, keyPath);
}
}
};
......
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