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