Skip to content

F
FTT_Board
Commit 9d639c4e authored by 金燚波's avatar 金燚波
Browse files
Options

【编号:11336】祥麟看板数据接入

parent 7a9990ac
Hide whitespace changes
Inline Side-by-side
Showing with 1132 additions and 55 deletions
FTT.Board.VueUI/src/config/comboxstore.js
View file @ 9d639c4e
......@@ -48,7 +48,9 @@ export default {
{ ID: 5, Text: "Table1" ,name:"table1",src:require("@/assets/image/table1.jpg")},
{ ID: 6, Text: "Table2" ,name:"table2",src:require("@/assets/image/table1.jpg")},
{ ID: 11, Text: "Table3" ,name:"table3",src:require("@/assets/image/table1.jpg")},
// { ID: 6, Text: "pie" ,name:"pie",src:require("@/assets/image/table1.jpg")},
{ ID: 7, Text: "ViewBoard" ,name:"针车车间",src:require("@/assets/image/back-img.png")},
// { ID: 8, Text: "bar" ,name:"柱状图",src:require("@/assets/image/table1.jpg")},
// { ID: 9, Text: "scatter" ,name:"散点图",src:require("@/assets/image/table1.jpg")},
......@@ -59,5 +61,10 @@ export default {
{ ID: 1, Text: "换页" },
{ ID: 2, Text: "换行" },
// { ID: 3, Text: "滚动" },
],
align:[
{ ID: 1, Text: "Left" },
{ ID: 2, Text: "Center" },
{ ID: 3, Text: "Right" },
]
}
\ No newline at end of file
FTT.Board.VueUI/src/views/board/boardlist/detail.vue
View file @ 9d639c4e
......@@ -26,9 +26,10 @@
:title="getDialogTitle()"
:visible.sync="dialogVisible"
width="35%"
:before-close="handleClose"
>
<div>
<div style="overflow-y:auto;height:70vh">
<div>
<el-form
:inline="true"
......@@ -64,6 +65,9 @@
<el-form-item label="是否显示">
<el-switch v-model="ruleForm.IsShow"></el-switch>
</el-form-item>
<!-- <el-form-item label="是否换行">
<el-switch v-model="ruleForm.IsWrap"></el-switch>
</el-form-item> -->
</el-row>
<el-row>
<el-form-item label="区域" prop="PositionIndex">
......@@ -87,6 +91,28 @@
<el-switch v-model="ruleForm.IsTimeShow"></el-switch>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="水平对齐" v-if="ruleForm.ChartType==5 || ruleForm.ChartType==6 || ruleForm.ChartType== 11">
<el-select v-model="ruleForm.Horizontal" placeholder="请选择对齐方式">
<el-option
v-for="item in comboxstore.align"
:key="item.ID"
:label="item.Text"
:value="item.ID"
></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="垂直位置" v-if="ruleForm.ChartType==5 || ruleForm.ChartType==6 || ruleForm.ChartType== 11">
<el-select v-model="ruleForm.RefreshType" placeholder="请选择容器刷新类别">
<el-option
v-for="item in comboxstore.RefreshTypeCombox"
:key="item.ID"
:label="item.Text"
:value="item.ID"
></el-option>
</el-select>
</el-form-item> -->
</el-row>
<el-row>
<el-form-item label="背景色">
<el-input v-model="ruleForm.BackgroundColor">
......@@ -95,11 +121,19 @@
</template>
</el-input>
</el-form-item>
<el-form-item label="边框色">
<el-input v-model="ruleForm.BorderColor">
<template slot="append">
<el-color-picker size="mini" v-model="ruleForm.BorderColor"></el-color-picker>
</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>
<el-form-item label="刷新类别" v-if="ruleForm.ChartType==5 || ruleForm.ChartType==6">
<!-- v-if="ruleForm.ChartType==5 || ruleForm.ChartType==6" -->
<el-form-item label="刷新类别" v-if="ruleForm.ChartType==5 || ruleForm.ChartType==6 || ruleForm.ChartType== 11">
<el-select v-model="ruleForm.RefreshType" placeholder="请选择容器刷新类别">
<el-option
v-for="item in comboxstore.RefreshTypeCombox"
......@@ -109,9 +143,10 @@
></el-option>
</el-select>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="字号1颜色" v-if="ruleForm.ChartType!=5">
<el-form-item label="字号1颜色" 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>
......@@ -123,7 +158,7 @@
</el-form-item>
</el-row>
<el-row>
<el-form-item label="字号2颜色" v-if="ruleForm.ChartType!=5">
<el-form-item label="字号2颜色" 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>
......@@ -306,7 +341,10 @@ export default {
Flag: "",
PageSize: "",
PageIndex: "",
PositionIndex: ""
PositionIndex: "",
Horizontal: 1,
BorderColor: '#000000',
IsWrap: false
},
rules: {
PositionIndex: [
......@@ -478,6 +516,7 @@ export default {
if (res.success) {
me.totalCount = res.total;
me.DataList = res.rows;
console.log('detailrows', res.rows)
}
me.Loading = false;
});
......
FTT.Board.VueUI/src/views/board/chartDemo/index.vue
View file @ 9d639c4e
......@@ -201,7 +201,7 @@ export default {
};
</script>
<style>
<style scoped>
.el-header {
background-color: #040f3c !important;
}
......
FTT.Board.VueUI/src/views/board/chartDemo1/index.vue
View file @ 9d639c4e
......@@ -71,7 +71,7 @@
</script>
<style>
<style scoped>
div {
overflow: initial !important;
}
......
FTT.Board.VueUI/src/views/board/chartList/index.vue
View file @ 9d639c4e
......@@ -110,7 +110,7 @@
}
};
</script>
<style>
<style scoped>
.el-header {
background-color: #B3C0D1;
color: #333;
......
FTT.Board.VueUI/src/views/board/index.vue
View file @ 9d639c4e
......@@ -3,7 +3,7 @@
<el-container
v-loading="loading"
style="height:100%;width:100%; "
:style="{background:ruleForm.BackgroundColor} "
:style="{background:ruleForm.BackgroundColor}"
>
<el-header
style="padding: 0"
......@@ -35,8 +35,7 @@
class="allContent"
v-for="(rows,index1) in item"
:key="rows+'row'"
:style="{height:getRowHeight(item,index1)+'%'}"
>
:style="{height:getRowHeight(item,index1)+'%'}">
<template v-if="item.length>0">
<template v-for="(column,index2) in rows">
<div
......@@ -52,7 +51,8 @@
:Api="Api.charapi"
:id="id1+index2"
v-if="GetChartStore(column).IsShow"
></component>
>
</component>
</div>
</template>
</template>
......@@ -84,6 +84,7 @@ import Panle1 from "@/views/chart/Panle1";
import Panle2 from "@/views/chart/Panle2";
import Table1 from "@/views/chart/Table1";
import Table2 from "@/views/chart/Table2";
import Table3 from "@/views/chart/Table3";
import pie from "@/views/chart/echarts/pie/index";
import radar from "@/views/chart/echarts/radar/index";
import bar from "@/views/chart/echarts/bar/index";
......@@ -99,6 +100,7 @@ export default {
Panle2,
Table1,
Table2,
Table3,
pie,
radar,
bar,
......@@ -115,6 +117,7 @@ export default {
loading: false,
comboxstore: comBox,
ruleForm: null,
timer: null,
timer1: null,
pageindex: 0,
id1:'pie1',
......@@ -170,7 +173,7 @@ export default {
console.log('rows'+JSON.stringify(res))
if (res.success) {
me.ruleForm = res.rows[0];
console.log(JSON.stringify( me.ruleForm))
console.log('me.ruleForm', me.ruleForm)
} else {
me.$message.error(res.message);
......@@ -183,6 +186,7 @@ export default {
"ID",
this.ruleForm.LayoutID
);
console.log('布局布局',layout)
return layout;
},
GetChartStore(item) {
......@@ -195,14 +199,17 @@ export default {
break;
case "foot":
chart = this.ruleForm.BoardDetail.GetFirstElement("ChartType", 2);
break;
default:
chart = this.ruleForm.BoardDetail.GetFirstElement(
"PositionIndex",
item
);
console.log('chartchart',this.ruleForm.BoardDetail, chart)
break;
}
return chart;
},
setHeadOrFoot(name) {
......@@ -230,7 +237,7 @@ export default {
"ID",
chartstore.ChartType
);
console.log(chart.Text)
console.log('chart.Text', chart.Text)
return chart.Text;
},
getChartWidth(chart, rows) {
......@@ -319,10 +326,14 @@ export default {
// }
},
beforeDestroy() {
console.log('beforeDestroy')
if (this.timer) {
console.log('beforeDestroytime')
clearInterval(this.timer); //在vue实例销毁钱，清除我们的定时器
console.log('beforeDestroytime', this.timer)
}
if (this.timer1) {
console.log('beforeDestroytime1')
clearInterval(this.timer1); //在vue实例销毁钱，清除我们的定时器
}
},
......
FTT.Board.VueUI/src/views/board/workShopList/ViewSC.vue 0 → 100644
View file @ 9d639c4e
<template>
<div class="cont">
<Vtitle :title="Title"></Vtitle>
<div class="e_main">
<div class="left">
<div class="nowShow">
<h3>现有来样展示图</h3>
<div
id="nowPie"
:style="{ width: '330px', height: '360px' }"
ref="chart">
</div>
</div>
<div class="monthSpeed">
<h3>月试版进度</h3>
<div
id="monthPie"
:style="{ width: '330px', height: '300px' }"
ref="chart">
</div>
</div>
</div>
<div class="middle">
<div class="dataMap">
<h1>客户样品总数</h1>
<div
id="CustomMap"
:style="{ width: '1150px', height: '530px' }"
ref="chart">
</div>
</div>
<div class="speedTrack">
<h1>实时进度追踪</h1>
<div
id="myChart"
:style="{ width: '1200px', height: '300px' }"
ref="chart">
</div>
</div>
</div>
<div class="right">
<div class="attendance">
<h3>部门出勤人数</h3>
<div class="list" v-for="(item, index) in list" :key="index">{{item.TypeName}}：{{item.Count}}</div>
</div>
<div class="situation">
<h3>生产装况</h3>
<div class="jihua">
<span class="list"></span>
<span class="list">计划</span>
<span class="list">完工</span>
</div>
<div class="production" v-for="(item, index) in list1" :key="index">
<span class="list">{{item.WorkSectionName}}</span>
<span class="list">{{item.PlanQty}}</span>
<span class="list">{{item.ReportQty}}</span>
</div>
</div>
<div class="risk">
<h3>交期延误风险</h3>
</div>
</div>
</div>
</div>
</template>
<script>
var _this;
import qs from "qs";
import Axios from "@/function/axios.js";
import Vtitle from "@/components/view/header.vue";
import "echarts/map/js/china.js"
export default {
components: {
Vtitle
},
data() {
return {
Title: '',
StationBoards: [],
time: 0,
itemNow: '',
itemMonth: '',
itemTrackings: '',
itemCustom: '',
Customs: '',
list: [],
list1: []
}
},
created() {
// this.getData();
var arr = window.location.href.split("?");
var ss = arr[1].split("&");
// console.log(arr);
// console.log(ss)
this.time = ss[0].split('=')[1] * 1000
// console.log(this.time)
if(this.time == 0){
this.time = 6000000
}
},
beforeRouteLeave(to, form, next) {
window.clearInterval(this.timer);
next()
},
mounted() {
this.getData();
this.timer = window.setInterval(() => {
this.getData();
}, this.time);
},
methods: {
getData () {
var url = "api/FactoryBoardXYStyleWorking/Get"
var data = {
}
Axios({
method: "get",
url: url,
transformRequest: [
function(data) {
return qs.stringify(data);
}
],
data: data
}).then(res => {
// console.log(res)
this.Title = res.Title
this.itemNow = res.SampleDynamics
this.itemMonth = res.StyleTryEditions
this.itemCustom = res.CustomStyles
this.Customs = res.Customs
this.itemTrackings = res.ProgressTrackings
this.list = res.Attendances
this.list1 = res.ProductionStatuss
let STArr = []
let CountArr = []
let DesignerArr = []
let Count1Arr = []
let DataCustom = []
let geoCoordMap = this.Customs
let DateMonthArr = []
let TKCountArr1 = []
let TKCountArr2 = []
let TKCountArr3 = []
this.itemCustom.forEach((item, index) => {
let obj = {
name: item.CustomName,
value: item.Count
}
// let obj1 = {
// name: item.CustomName,
// value: item.customLocation,
// num: item.Count
// }
DataCustom.push(obj)
// geoCoordMap.push(obj1)
})
this.itemNow.forEach((item, index) => {
let obj = {
name: item.SampleTypeName,
value: item.Count
}
STArr.push(item.SampleTypeName)
CountArr.push(obj)
})
this.itemMonth.forEach((item, index) => {
let obj = {
name: item.Designer,
value: item.Count
}
DesignerArr.push(item.Designer)
Count1Arr.push(obj)
})
this.itemTrackings.forEach((item, index) => {
DateMonthArr.push(item.DateMonth)
TKCountArr1.push(item.Count1)
TKCountArr2.push(item.Count2)
TKCountArr3.push(item.Count3)
})
this.CustomMap(DataCustom, geoCoordMap)
this.nowPie(STArr, CountArr)
this.monthPie(DesignerArr, Count1Arr)
this.Trackings(DateMonthArr, TKCountArr1, TKCountArr2, TKCountArr3)
})
},
nowPie (STArr, CountArr) {
var myChart = this.echarts.init(document.getElementById("nowPie"));
var option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
top: 'bottom',
itemWidth: 12, // 设置图例图形的宽
itemHeight: 8,
textStyle: {
color: '#fff' // 图例文字颜色
},
data: STArr
},
series: [
{
name: '',
type: 'pie',
radius: [20, 100],
center: ['50%', '30%'],
roseType: 'radius',
label: {
show: false
},
emphasis: {
label: {
show: true
}
},
itemStyle: {
normal: {
label: {
show: false,
color: '#fff'
}
}
},
color: ['#0000cd', '#00bfff', '#7b68ee', '#b0e0e6'],
data: CountArr
},
]
};
myChart.setOption(option);
},
monthPie (DesignerArr, Count1Arr) {
var myChart = this.echarts.init(document.getElementById("monthPie"));
var option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
top: 'bottom',
textStyle: {
color: '#fff' // 图例文字颜色
},
data: DesignerArr
},
series: [
{
name: '次数',
type: 'pie',
radius: [20, 110],
center: ['50%', '40%'],
roseType: 'radius',
label: {
show: false
},
emphasis: {
label: {
show: true
}
},
itemStyle: {
normal: {
label: {
show: false,
color: '#fff'
}
}
},
color: ['#0000cd', '#00bfff', '#7b68ee', '#b0e0e6'],
data: Count1Arr
},
]
};
myChart.setOption(option);
},
CustomMap (DataCustom, geoCoordMap) {
var data = DataCustom
var convertData = function(data) {
var res = []
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
})
}
}
return res
}
var myChart = this.echarts.init(document.getElementById("CustomMap"));
window.onresize = myChart.resize
myChart.setOption({ // 进行相关配置
geo: { // 这个是重点配置区
map: 'china', // 表示中国地图
label: {
normal:{
show: true, // 是否显示对应地名
textStyle: { //字体颜色
color: '#05f6f1'
}
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
zoom: 1.2, // 地图大小
itemStyle: {
normal: {
borderWidth: 1, // 地图边框宽度
borderColor: '#014888', // 地图边框颜色
areaColor: '#026295' // 地图颜色
},
emphasis: {//选中省份的颜色
areaColor: '#026295',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0,
borderWidth: 1,
shadowColor: '#fff'
}
}
},
// 滑动显示数据
tooltip: {
trigger: 'item',
formatter (params) {
// return params.name +'<br>'+ params.data.value[2]
return params.name +'：'+ params.data.value[2]
}
},
series: [{
// name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
color:"#e1ebe3",//点的颜色
data: convertData(data),
// data: data.map(item => {
// return {
// name: item.name,
// value: item.value,
// showAllSymbol: true,
// symbolSize: 0.1,
// };
// }),
symbolSize: 25,//点的大小
symbol:"pin",//点的样式
cursor:"pointer",//鼠标放上去的效果
label: {
normal: {//默认展示
show: false
},
emphasis: {//滑过展示
show: false
}
},
itemStyle: {
emphasis: {
borderColor: '#5c8f6e',
borderWidth: 5
}
}
},
{
type: 'map',
map: 'china',
geoIndex: 0,
aspectScale: 0.75,
tooltip: {
show: false
}
},
],
})
},
Trackings (DateMonthArr, TKCountArr1, TKCountArr2, TKCountArr3) {
var myChart = this.echarts.init(document.getElementById("myChart"));
var option = {
tooltip: {},
legend: {
textStyle: {
color: '#fff' // 图例文字颜色
},
data:['试版数', '手剪/斩刀之外数量', '手剪/斩刀数量']
},
grid: {
left: '1%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: DateMonthArr,
axisLabel: {
show: true,
textStyle: {
color: '#fff', //更改坐标轴文字颜色
fontSize : 14 //更改坐标轴文字大小
}
}
}
],
yAxis: [
{
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#fff', //更改坐标轴文字颜色
fontSize : 14 //更改坐标轴文字大小
}
}
}
],
color: ['#0000cd', '#00bfff', '#7b68ee', '#b0e0e6'],
series: [
{
name: '试版数',
type: 'bar',
data: TKCountArr1
},
{
name: '手剪/斩刀之外数量',
type: 'bar',
data: TKCountArr2
},
{
name: '手剪/斩刀数量',
type: 'bar',
data: TKCountArr3
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
};
</script>
<style scoped>
.cont {
min-width: 1920px !important;
/* height: auto !important; */
min-height: 1080px !important;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 1) 0%,
rgba(1, 3, 30, 1) 100%
);
box-sizing: border-box;
padding: 10px 30px 0px;
}
.e_main {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
}
.left,
.right,
.middle {
width: 18%;
height: 980px;
border: 1px solid #0cfafa;
border-radius: 6px;
overflow: hidden;
box-sizing: border-box;
}
.middle {
width: 62.8%;
}
h1, h3 {
margin-bottom: 10px;
color: #05f3f3;
}
.nowShow, .attendance {
padding: 10px;
box-sizing: border-box;
width: 100%;
height: 270px;
border-bottom: 1px solid #05f3f3;
}
.nowShow {
height: 420px;
}
.attendance .list {
width: 80%;
height: 36px;
font-size: 20px;
color: white;
}
.situation .list {
width: 80%;
height: 36px;
font-size: 20px;
color: white;
}
.situation .jihua {
padding-left: 120px;
}
.jihua span:nth-child(3) {
padding-left: 70px;
}
.production {
height: 36px;
line-height: 36px;
}
.production span:nth-child(2) {
padding-left: 90px;
}
.production span:nth-child(3) {
padding-left: 100px;
}
img {
width: 160%;
}
.monthSpeed, .situation {
padding: 10px;
box-sizing: border-box;
width: 100%;
height: 320px;
border-bottom: 1px solid #05f3f3;
}
.monthSpeed {
height: 360px;
}
.dataMap {
padding: 10px;
width: 100%;
height: 580px;
border-bottom: 1px solid #05f3f3;
}
.speedTrack, .risk {
padding: 10px;
}
</style>
FTT.Board.VueUI/src/views/chart/Panle_back.vue
View file @ 9d639c4e
......@@ -107,7 +107,7 @@ export default {
}
};
</script>
<style>
<style scoped>
table {
height: 100%;
width: 100%;
......
FTT.Board.VueUI/src/views/chart/Table1.vue
View file @ 9d639c4e
......@@ -332,7 +332,7 @@ export default {
}
};
</script>
<style >
<style scoped>
.seamless-warp {
height: 95%;
overflow: hidden;
......
FTT.Board.VueUI/src/views/chart/Table12.vue
View file @ 9d639c4e
......@@ -231,7 +231,7 @@ export default {
}
};
</script>
<style >
<style scoped>
.seamless-warp {
height: 95%;
overflow: hidden;
......
FTT.Board.VueUI/src/views/chart/Table2.vue
View file @ 9d639c4e
......@@ -175,7 +175,7 @@ export default {
PageIndex: me.pageindex,
Flag: me.chart.Flag,
WorkTeamID: me.chart.WorkTeamID,
CharTypeID: me.chart.ChartType,
CharTypeID: 5, // me.chart.ChartType
ConnStr: me.boardstore.ConnectionString
};
Axios({
......@@ -323,7 +323,7 @@ export default {
}
};
</script>
<style >
<style scoped>
.seamless-warp {
height: 95%;
overflow: hidden;
......
FTT.Board.VueUI/src/views/chart/Table3.vue 0 → 100644
View file @ 9d639c4e
<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="{whiteSpace: 'nowrap',color:item.Color, borderTop:'1px solid ' + chart.BorderColor,borderLeft:'1px solid ' + chart.BorderColor , width:item.Width+'%',borderRight: index != (titlestore.length - 1) ? 'none' : '1px solid '+ 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)}"
>
<template v-for="(obj,index1) in item">
<td
:key="index1"
:class="['tableclass', iswarp(obj.Value)?'over':'', chart.Horizontal?'textalign' + chart.Horizontal:'' ] "
:style="{ borderTop:'1px solid ' + chart.BorderColor,borderLeft:'1px solid ' + chart.BorderColor, width:getwidth(obj)+'%',borderBottom: index != (itemdata.length - 1) ? 'none':'1px solid ' + chart.BorderColor,borderRight: (index1 == (item.length - 1) && obj.Key != '_Color_#FFFFFF') || (index1 == (item.length - 2) && item[index1 +1].Key == '_Color_#FFFFFF') ?'1px solid ' + chart.BorderColor : 'none' }"
v-if="obj.Key.indexOf('_')>0"
>{{obj.Value}}</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: {
getrow(){
return
},
},
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: {
iswarp(str){
if(str == '' || str == null) return false
if(str.indexOf('\n')!=-1) return true
return false
},
metadata(){},
//数据换行/换页时间
_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: 5, //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);
console.log('datadata',data)
data.forEach(item => {
this.itemdata.push(item);
});
} else {
this._getData(res.rows);
}
}
if (this.chart.RefreshType == 1) {
this.itemdata = me._changeDataType(res.rows,2);
console.log('RefreshType == 1', url, res)
}
console.log('this.itemdata',this.chart,this.itemdata)
} else {
console.log(res.message);
}
});
},
_getTitle(row) {
var titlename = new Array();
console.log('getrow', row)
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,type=1) {
var arr = [];
console.log('arrarr', data)
if (data.length == 0) return arr;
data.forEach(elem => {
var itemarr = [];
for (var item in elem) {
console.log('itemitem', item,item.split('_'))
if (item.split('_').length >= 2) {
var obj = new Object();
obj.Key = item;
obj.Value = elem[item];
itemarr.push(obj);
}
}
arr.push(itemarr);
});
return arr;
},
//换行
_changeItemData() {
console.log('chart'+JSON.stringify(this.chart))
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) {
console.log('datacolor',data)
var color = "red";
if (data == null) return;
data.forEach(item => {
if (item.Key.indexOf("_Color") >= 0) {
console.log('item.Value', item.Value)
color = item.Value;
}
});
return color;
},
getwidth(obj) {
console.log('getwidthobj',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 scoped>
.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;一起使用。*/
}
.textalign1 {
text-align: left;
}
.textalign2 {
text-align: center;
}
.textalign3 {
text-align: right;
}
.over {
/* text-overflow: ellipsis; */
white-space: nowrap;
white-space:pre-wrap;
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>
FTT.Board.VueUI/src/views/chart/head.vue
View file @ 9d639c4e
......@@ -29,16 +29,19 @@ export default {
(this.chart.RefreshTime != 0
? this.chart.RefreshTime
: this.boardstore.RefreshTime) * 1000;
this.timer = setInterval(function() {
this.timer = setTimeout(function() {
console.log('loadData1.2')
_this.loadData(1, 2);
}, time);
this.timer = setInterval(function() {
console.log('getCurrentDateTime')
_this.date = _this.getCurrentDateTime(); //修改数据date
}, 1000);
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer); //在vue实例销毁钱，清除我们的定时器
console.log('head销毁')
window.clearInterval(this.timer); //在vue实例销毁钱，清除我们的定时器
}
},
methods: {
......
FTT.Board/FTT.Board.Api/Controllers/API/FactoryBoardProductDataController.cs
View file @ 9d639c4e
......@@ -24,20 +24,15 @@ namespace FTT.Board.Controllers.API
WorkTeamID = WorkTeamID
}, true);
model.TitleList = Table2Model.ToModel<TitleList>(dataSet.Tables[0]);
model.Statisticss = Table2Model.ToModel<Statistics>(dataSet.Tables[1]);
model.TimeYieldDetails = Table2Model.ToModelList<TimeYieldDetail>(dataSet.Tables[2]);
model.QIDetails = Table2Model.ToModelList<QIDetail>(dataSet.Tables[3]);
//model.TitleList = Table2Model.ToModel<TitleList>(dataSet.Tables[0]);
model.Statisticss = Table2Model.ToModel<Statistics>(dataSet.Tables[0]);
model.QIDetails = Table2Model.ToModelList<QIDetail>(dataSet.Tables[2]);
model.TimeYieldDetails = Table2Model.ToModelList<TimeYieldDetail>(dataSet.Tables[3]);
return model.ToString();
}
public class FactoryBoardProductDataResponse
{
/// <summary>
/// 标题
/// </summary>
public TitleList TitleList { get; set; }
/// <summary>
/// 统计
/// </summary>
......@@ -62,47 +57,63 @@ namespace FTT.Board.Controllers.API
}
}
/// <summary>
/// 标题
/// 统计
/// </summary>
public class TitleList
public class Statistics
{
/// <summary>
/// 主标题
/// 标题
/// </summary>
public string Title { get; set; }
/// <summary>
///
/// </summary>
public string TitleInspection { get; set; }
}
/// <summary>
/// 统计
/// </summary>
public class Statistics
{
/// <summary>
/// 今日产量
/// </summary>
public int DayYield { get; set; }
/// <summary>
/// 今日投产量
/// </summary>
public int DayPutYield { get; set; }
/// <summary>
/// 不良数
/// </summary>
public int InspectionQty { get; set; }
public int DayInspectionQty { get; set; }
/// <summary>
/// 直通率
/// </summary>
public string ThroughRate { get; set; }
public string DayThroughRate { get; set; }
/// <summary>
/// 成品入库量
/// </summary>
public int DayStockInQty { get; set; }
/// <summary>
/// 节拍时间
/// </summary>
public string SwayedTime { get; set; }
public string DaySwayedTime { get; set; }
/// <summary>
/// 月产量
/// </summary>
public int MonthYield { get; set; }
/// <summary>
/// 月投产量
/// </summary>
public int MonthPutYield { get; set; }
/// <summary>
/// 月不良数
/// </summary>
public int MonthInspectionQty { get; set; }
/// <summary>
/// 月直通率
/// </summary>
public string MonthThroughRate { get; set; }
/// <summary>
/// 月成品入库量
/// </summary>
public int MonthStockInQty { get; set; }
/// <summary>
/// 月节拍时间
/// </summary>
public string MonthSwayedTime { get; set; }
}
/// <summary>
......@@ -119,12 +130,12 @@ namespace FTT.Board.Controllers.API
/// <summary>
/// 时间段
/// </summary>
public string TimeSlot { get { return this.BeginDate.ToString("HH : mm") + " - " + this.EndDate.ToString("HH : mm"); } }
public string TimeSlot { get; set; }
/// <summary>
/// 时间长度
/// </summary>
public string TimeSpan { get { return ((this.EndDate - this.BeginDate).TotalMinutes / 60).ToString("f1") + " H"; } }
public string TimeSpan { get; set; }
/// <summary>
/// 产量
......@@ -135,6 +146,10 @@ namespace FTT.Board.Controllers.API
/// 节拍时间
/// </summary>
public string SwayedTime { get; set; }
/// <summary>
/// 入库量
/// </summary>
public int StockInQty { get; set; }
}
/// <summary>
......
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