Skip to content

F
FTT_Board
Commit e8f46dc2 authored by 刘飞's avatar 刘飞
Browse files
Options

看板添加进度条

parent ad094813
Show whitespace changes
Inline Side-by-side
Showing with 456 additions and 13 deletions
FTT.Board.VueUI/src/config/comboxstore.js
View file @ e8f46dc2
...@@ -46,11 +46,12 @@ export default { ...@@ -46,11 +46,12 @@ export default {
{ ID: 3, Text: "Panle1" ,name:"panle1",src:require("@/assets/image/panle1.jpg")}, { ID: 3, Text: "Panle1" ,name:"panle1",src:require("@/assets/image/panle1.jpg")},
{ ID: 4, Text: "Panle2" ,name:"panle2",src:require("@/assets/image/panle2.jpg")}, { ID: 4, Text: "Panle2" ,name:"panle2",src:require("@/assets/image/panle2.jpg")},
{ ID: 5, Text: "Table1" ,name:"table1",src:require("@/assets/image/table1.jpg")}, { ID: 5, Text: "Table1" ,name:"table1",src:require("@/assets/image/table1.jpg")},
{ ID: 6, Text: "pie" ,name:"pie",src:require("@/assets/image/table1.jpg")}, // { ID: 6, Text: "Table2" ,name:"table2",src:require("@/assets/image/table1.jpg")},
{ ID: 7, Text: "radar" ,name:"雷达图",src:require("@/assets/image/table1.jpg")}, // { ID: 6, Text: "pie" ,name:"pie",src:require("@/assets/image/table1.jpg")},
{ ID: 8, Text: "bar" ,name:"柱状图",src:require("@/assets/image/table1.jpg")}, // { ID: 7, Text: "radar" ,name:"雷达图",src:require("@/assets/image/table1.jpg")},
{ ID: 9, Text: "scatter" ,name:"散点图",src:require("@/assets/image/table1.jpg")}, // { ID: 8, Text: "bar" ,name:"柱状图",src:require("@/assets/image/table1.jpg")},
{ ID: 10, Text: "chartLine" ,name:"折线图",src:require("@/assets/image/table1.jpg")}, // { ID: 9, Text: "scatter" ,name:"散点图",src:require("@/assets/image/table1.jpg")},
// { ID: 10, Text: "chartLine" ,name:"折线图",src:require("@/assets/image/table1.jpg")},
], ],
RefreshTypeCombox: [ RefreshTypeCombox: [
......
FTT.Board.VueUI/src/views/board/boardlist/detail.vue
View file @ e8f46dc2
...@@ -99,7 +99,7 @@ ...@@ -99,7 +99,7 @@
<el-input-number v-model="ruleForm.RefreshTime" :min="0"></el-input-number> <el-input-number v-model="ruleForm.RefreshTime" :min="0"></el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="刷新类别" v-if="ruleForm.ChartType==5"> <el-form-item label="刷新类别" v-if="ruleForm.ChartType==5 || ruleForm.ChartType==6">
<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"
......
FTT.Board.VueUI/src/views/board/index.1.vue
View file @ e8f46dc2
...@@ -80,6 +80,7 @@ import comFoot from "@/views/chart/foot"; ...@@ -80,6 +80,7 @@ import comFoot from "@/views/chart/foot";
import Panle1 from "@/views/chart/Panle1"; import Panle1 from "@/views/chart/Panle1";
import Panle2 from "@/views/chart/Panle2"; import Panle2 from "@/views/chart/Panle2";
import Table1 from "@/views/chart/Table1"; import Table1 from "@/views/chart/Table1";
import Table2 from "@/views/chart/Table1";
import pie from "@/views/chart/echarts/pie/index"; import pie from "@/views/chart/echarts/pie/index";
export default { export default {
name: "board", name: "board",
...@@ -89,6 +90,7 @@ export default { ...@@ -89,6 +90,7 @@ export default {
Panle1, Panle1,
Panle2, Panle2,
Table1, Table1,
Table2,
pie pie
}, },
data() { data() {
......
FTT.Board.VueUI/src/views/board/index.vue
View file @ e8f46dc2
...@@ -83,6 +83,7 @@ import comFoot from "@/views/chart/foot"; ...@@ -83,6 +83,7 @@ import comFoot from "@/views/chart/foot";
import Panle1 from "@/views/chart/Panle1"; import Panle1 from "@/views/chart/Panle1";
import Panle2 from "@/views/chart/Panle2"; import Panle2 from "@/views/chart/Panle2";
import Table1 from "@/views/chart/Table1"; import Table1 from "@/views/chart/Table1";
import Table2 from "@/views/chart/Table2";
import pie from "@/views/chart/echarts/pie/index"; import pie from "@/views/chart/echarts/pie/index";
import radar from "@/views/chart/echarts/radar/index"; import radar from "@/views/chart/echarts/radar/index";
import bar from "@/views/chart/echarts/bar/index"; import bar from "@/views/chart/echarts/bar/index";
...@@ -96,6 +97,7 @@ export default { ...@@ -96,6 +97,7 @@ export default {
Panle1, Panle1,
Panle2, Panle2,
Table1, Table1,
Table2,
pie, pie,
radar, radar,
bar, bar,
...@@ -155,13 +157,15 @@ export default { ...@@ -155,13 +157,15 @@ export default {
methods: { methods: {
Load(id) { Load(id) {
console.log("请求数据。。。") console.log("请求数据。。。")
// console.log('sdfsdff'+this.GetLayout().TagData);
var me = this; var me = this;
Axios({ Axios({
method: "get", method: "get",
url: me.Api.get.url, url: me.Api.get.url,
params: { MID: id } params: { MID: id }
}).then(res => { }).then(res => {
console.log('rows'+JSON.stringify(res))
if (res.success) { if (res.success) {
me.ruleForm = res.rows[0]; me.ruleForm = res.rows[0];
console.log(JSON.stringify( me.ruleForm)) console.log(JSON.stringify( me.ruleForm))
......
FTT.Board.VueUI/src/views/chart/Table1.vue
View file @ e8f46dc2
<template> <template>
<div style="font-size:30px" :style="{color:chart.FontColor,background:chart.BackgroundColor}"> <div style="font-size:30px" :style="{color:chart.FontColor,background:chart.BackgroundColor}">
<div style="width:100%"> <div style="width:100%">
<table style="width:100%;height:100%"> <table style="width:100%;height:100%;border-collapse:collapse">
<tr style="height:8%" :style="{fontSize:chart.FontSize1!=0?chart.FontSize1+'px':'30px'}"> <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+'%'}" :style="{color:item.Color,width:item.Width+'%',border:'1px'+' solid '+item.Color,borderColor:boardstore.BorderColor==null?'red':boardstore.BorderColor}"
>{{item.Key}}</td> >{{item.Key}}</td>
</tr> </tr>
<!-- <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"
...@@ -19,9 +20,17 @@ ...@@ -19,9 +20,17 @@
<td <td
:key="index1" :key="index1"
class="tableclass" class="tableclass"
:style="{width:getwidth(obj)+'%'}" :style="{width:getwidth(obj)+'%',border:'1px'+' solid '+getfontcolor(item),borderColor:boardstore.BorderColor==null?'red':boardstore.BorderColor}"
v-if="obj.Key.indexOf('_')>0" v-if="obj.Key.indexOf('_')>0 && obj.Key.indexOf('_percent')<0"
>{{obj.Value}}</td> >{{obj.Value}}</td>
<td
:key="index1"
class="tableclass"
:style="{width:getwidth(obj)+'%',border:'1px'+' solid '+getfontcolor(item),borderColor:boardstore.BorderColor==null?'red':boardstore.BorderColor}"
v-if="obj.Key.indexOf('_percent')>0"
>
<el-progress :text-inside="true" :stroke-width="20" :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> </template>
</tr> </tr>
</template> </template>
...@@ -206,6 +215,7 @@ export default { ...@@ -206,6 +215,7 @@ export default {
if (this.chart.RefreshType == 1) { if (this.chart.RefreshType == 1) {
this.itemdata = me._changeDataType(res.rows); this.itemdata = me._changeDataType(res.rows);
} }
console.log('itemdata'+JSON.stringify(me.itemdata))
} else { } else {
console.log(res.message); console.log(res.message);
} }
...@@ -319,6 +329,10 @@ export default { ...@@ -319,6 +329,10 @@ export default {
}; };
</script> </script>
<style > <style >
.el-progress-bar{
display: flex;
align-items: center;
}
.seamless-warp { .seamless-warp {
height: 95%; height: 95%;
overflow: hidden; overflow: hidden;
...@@ -346,6 +360,8 @@ table { ...@@ -346,6 +360,8 @@ table {
} }
.tableclass { .tableclass {
text-align: center; text-align: center;
box-sizing: border-box;
padding:0 10px;
/* border:1px solid blue; */ /* border:1px solid blue; */
/* display: inline-block; */ /* display: inline-block; */
/* 不换行 */ /* 不换行 */
......
FTT.Board.VueUI/src/views/chart/Table2.vue 0 → 100644
View file @ e8f46dc2
<template>
<div 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'}">
<td
v-for="(item,index) in titlestore"
class="tableclass"
:key="index"
:style="{color:item.Color,width:item.Width+'%'}"
>{{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)}"
>
<template v-for="(obj,index1) in item">
<td
:key="index1"
class="tableclass"
:style="{width:getwidth(obj)+'%'}"
v-if="obj.Key.indexOf('_')>0 && index1 % 2 == 0"
>{{obj.Value}}</td>
<td
:key="index1"
class="tableclass"
:style="{width:getwidth(obj)+'%'}"
v-if="obj.Key.indexOf('_')>0 && index1 % 2 != 0"
>
<el-progress :text-inside="true" :stroke-width="20" :percentage="index1+20" status="exception"></el-progress>
</td>
</template>
</tr>
</template>
<!-- <template>
<tr>
<template >
<td class="tableclass" >
<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
</td>
<td class="tableclass">
<el-progress :text-inside="true" :stroke-width="20" :percentage="50" 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'}"
>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td></td>
</tr>
</template>
</table>
</div>
</div>
</template>
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var _this;
export default {
name: "charttable2",
inject: ["reload"],
props: ["boardstore", "chart", "Api"],
data() {
return {
store: null,
titlestore: [],
bodystore: [],
// marqueewidth: 0,
pageindex: 1,
timer: null, //获取数据时间
timer1: null, //换行时间
itemdata: [],
index: 0,
laodDataTime: 0
};
},
watch: {
itemdata: function(val) {
if (val != null && this.chart.RefreshType == 2) {
if (val.length == 0) {
this.laodDataTime = 99999999;
} else if (val.length < this.chart.PageSize) {
var count = val.length * this.chart.RefreshTime;
this.laodDataTime = (count - 5 <= 0 ? 0 : count - 5) * 1000;
} else {
this.laodDataTime =
this.chart.PageSize * this.chart.RefreshTime - 5 <= 0
? 1000
: (this.chart.PageSize * this.chart.RefreshTime - 5) * 1000;
}
}
},
laodDataTime: function(val, oldval) {
console.log("加载时间变化,new:" + val + " old:" + oldval);
if (val != oldval) {
}
},
"chart.RefreshTime": function(val, oldval) {
// console.log("new: " + val);
// console.log("oldval: " + oldval);
if (val != oldval) {
if (this.timer1) {
this.timer1 = null;
clearInterval(this.timer1);
this._itemRefreshTime();
} else {
this._itemRefreshTime();
}
}
},
"chart.RefreshType": (val, oldval) => {
if (val != oldval) {
_this._refreshPage();
}
},
bodystore: val => {
console.log("bodystore.Length" + val.length);
}
},
computed: {},
mounted() {
//换页时间 获取数据
var _this = this;
if (this.chart.RefreshType == 1) {
var time =
this.chart.RefreshTime != 0
? this.chart.RefreshTime
: this.boardstore.RefreshTime;
console.log(this.chart.PositionIndex + "获取数据时间" + time);
this.timer = setInterval(function() {
_this.loadData();
}, time * 1000);
}
//换行 获取数据
if (this.chart.RefreshType == 2) {
var changeRowTime =
this.chart.RefreshTime != 0
? this.chart.RefreshTime
: this.boardstore.RefreshTime;
//换行时间*每页条数 -3 就是获取数据时间
var time = changeRowTime * this.chart.PageSize - 3;
console.log(this.chart.PositionIndex + "获取数据时间" + time);
this.timer = setInterval(function() {
_this.loadData();
}, time * 1000);
//3秒后开始执行换行定时器
setTimeout(() => {
var timerow =
(this.chart.RefreshTime != 0
? this.chart.RefreshTime
: this.boardstore.RefreshTime) * 1000;
this.timer1 = setInterval(() => {
_this._changeItemData();
}, timerow);
}, 3000);
}
},
methods: {
//数据换行/换页时间
_itemRefreshTime() {},
//刷新页面
_refreshPage() {
if (this.timer) {
clearInterval(this.timer); //在vue实例销毁钱，清除我们的定时器
}
if (this.timer1) {
clearInterval(this.timer1); //在vue实例销毁钱，清除我们的定时器
}
this.reload();
},
loadData() {
var me = this;
if (!this.chart.IsShow) {
return;
}
var url = me.Api.url;
var data = {
ProcName: me.boardstore.ProcName,
PageSize: me.chart.PageSize,
PageIndex: me.pageindex,
Flag: me.chart.Flag,
WorkTeamID: me.chart.WorkTeamID,
CharTypeID: me.chart.ChartType,
ConnStr: me.boardstore.ConnectionString
};
Axios({
method: "post",
url: url,
transformRequest: [
function(data) {
return qs.stringify(data);
}
],
data: data
}).then(res => {
if (res.success) {
me._getTitle(res.rows[0]);
if (res.rows.length < me.chart.PageSize) {
me.pageindex = 1;
} else {
me.pageindex++;
}
console.log("位置：" + this.chart.PositionIndex + "加载数据");
if (this.chart.RefreshType == 2) {
if (this.itemdata.length == 0) {
this.loadData();
var data = me._changeDataType(res.rows);
data.forEach(item => {
this.itemdata.push(item);
});
} else {
this._getData(res.rows);
}
}
if (this.chart.RefreshType == 1) {
this.itemdata = me._changeDataType(res.rows);
}
} else {
console.log(res.message);
}
});
},
_getTitle(row) {
var titlename = 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);
} else {
for (var item in titlename) {
if (name.indexOf("_Color") == 0) {
titlename[item].Color = name.split("_")[2];
}
}
}
}
this.titlestore = titlename;
},
_getData(rows) {
var me = this;
var data = me._changeDataType(rows);
if (this.chart.RefreshType == 2) {
for (let index = 0; index < data.length; index++) {
let element = data[index];
me.bodystore.push(element);
}
} else if (this.chart.RefreshType == 1) {
this.bodystore = data;
}
},
_changeDataType(data) {
var arr = [];
if (data.length == 0) return arr;
data.forEach(elem => {
var itemarr = [];
for (var item in elem) {
var obj = new Object();
obj.Key = item;
obj.Value = elem[item];
itemarr.push(obj);
}
arr.push(itemarr);
});
return arr;
},
//换行
_changeItemData() {
if (this.chart.RefreshType == 2) {
console.log(this.chart.PositionIndex + "换行");
if (this.itemdata.length == 0) return;
var rowdata = this.bodystore.shift();
this.itemdata.push(rowdata);
this.itemdata.shift(); //移除第一条
} else if (this.chart.RefreshType == 1) {
this.itemdata = this.bodystore;
}
},
getfontcolor(data) {
var color = "red";
if (data == null) return;
data.forEach(item => {
if (item.Key.indexOf("_Color") >= 0) {
color = item.Value;
}
});
return color;
},
getwidth(obj) {
for (let index = 0; index < this.titlestore.length; index++) {
const element = this.titlestore[index];
if (obj.Key.indexOf(element.Key) >= 0) {
return element.Width;
}
}
}
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer); //在vue实例销毁钱，清除我们的定时器
}
if (this.timer1) {
clearInterval(this.timer1); //在vue实例销毁钱，清除我们的定时器
}
},
created() {
console.log("位置" + this.chart.PositionIndex);
_this = this;
this.loadData();
this.laodDataTime =
(this.chart.RefreshTime != 0
? this.chart.RefreshTime
: this.boardstore.RefreshTime) * 1000;
setTimeout(() => {
console.log("第一次加载");
// _this._loadDataInterval();
}, 1000);
if (this.chart.RefreshType == 2) {
//执行换行/换页程序
setTimeout(() => {
_this._itemRefreshTime();
}, 3000);
}
}
};
</script>
<style >
.el-progress-bar{
display: flex;
align-items: center;
}
.seamless-warp {
height: 95%;
overflow: hidden;
}
li {
width: 100%;
list-style-type: none;
}
.seamspan {
text-align: center;
/* border:1px solid blue; */
width: 200px;
display: inline-block;
/* 不换行 */
word-break: keep-all;
/* 不换行 */
white-space: nowrap;
/* 内容超出宽度时隐藏超出部分的内容 */
overflow: hidden;
/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
text-overflow: ellipsis;
}
table {
table-layout: fixed;
}
.tableclass {
text-align: center;
/* border:1px solid blue; */
/* display: inline-block; */
/* 不换行 */
/* word-break: keep-all; */
/* 不换行 */
/* white-space: nowrap; */
/* 内容超出宽度时隐藏超出部分的内容 */
/* 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);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, -307px, 0);
transform: translate3d(0, -307px, 0);
}
}
.rollBox {
-webkit-animation: 10s rowup linear infinite normal;
animation: 10s rowup linear infinite normal;
position: relative;
}
.el-carousel__container button {
display: none;
}
.item li {
list-style-type: none;
height: auto;
}
/* .seamless-warp {
width: 100%;
overflow: hidden;
color: red;
} */
</style>
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