wangh
/
aucma-benchmarking-factory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改数据请求

Browse Source
master
夜笙歌 4 years ago
parent 6b32b88c2d
commit 62ad51c3b2
3 changed files with 281 additions and 6 deletions
Show Stats Download Patch File Download Diff File

2
ruoyi-admin/src/main/resources/static/js/echartsCommon.js
Unescape Escape View File

@ -311,7 +311,7 @@ const barChartAndLineChart = function (data, id) {
type: "bar",
barWidth: vw,
label: {
show: false,
show: true,
position: "top",
textStyle: {
color: "#fff",

258
ruoyi-admin/src/main/resources/static/js/scrollTable.js
Unescape Escape View File

@ -0,0 +1,258 @@
/**
* dynamicTable 动态表格
* @param { Object } resource
* @param { String } el : 指定元素
* @param { Array } header : 表头
* @param { Array } data : 数据行
* @param { Number } rowNum : 显示行数
* @param { Boolean } index : 是否显示索引列
* @param { Number } timeout : 滚动动画延时
* @param { String } headerBGC : 标题栏背景颜色
* @param { String } oddRowBGC : 奇数行背景颜色
* @param { String } evenRowBGC : 偶数行背景颜色
* @param { String } fontColor : 字体颜色
* @param { String } indexBGC : 索引列背景颜色
* @param { Array } colWidth : 每列的宽度
*/
let dynamicTable = resource => {
'use strict';
//检查参数类型
if (typeof resource !== 'object') {
console.error('未传入参数,或者参数不是Object类型');
return
}
// 检查是否传入元素
const ele = resource.el;
if (!ele) {
console.error('元素获取不正确！');
return
}
/**
* 检查是否传入动画触发时长
* 当时间小于 10 计算为秒级单位，
* 大于 10 计算为毫秒级单位
*/
let timeout = resource.timeout;
if (!timeout) {
timeout = 2000
} else if (timeout < 10) {
timeout = timeout * 1000
}
// 检查 配置元素是否传入数据
const colName = resource.header === undefined ? '' : resource.header;
const rowData = resource.data === undefined ? '' : resource.data;
const rowNum = resource.rowNum === undefined ? '20%' : 100 / resource.rowNum + '%';
const headerBGC = resource.headerBGC === undefined ? '#999' : resource.headerBGC;
const oddRowBGC = resource.oddRowBGC === undefined ? '#bbb' : resource.oddRowBGC;
const evenRowBGC = resource.evenRowBGC === undefined ? '#ddd' : resource.evenRowBGC;
const fontColor = resource.fontColor === undefined ? 'black' : resource.fontColor;
const indexBGC = resource.indexBGC === undefined ? '#555' : resource.indexBGC;
const colIndex = resource.index === undefined ? true : resource.index;
const colWidth = resource.colWidth === undefined ? false : resource.colWidth;
const indexColor = fontColor.search(/('black')|(0{3,6})/) ? "white" : fontColor;
//基本table html
const html = `
<div class="table">
<div class="thead">
<div class="tr"></div>
</div>
<div class="tbody"></div>
</div>
`;
//Css样式集
const boxCSS = {
overflow: 'hidden',
background: headerBGC
};
const tableCSS = {
color: fontColor,
width: '100%',
height: '100%'
};
const theadCSS = {
width: '100%',
height: '20%'
};
const thead_trCSS = {
display: "flex",
flexWrap: "nowrap",
width: "100%",
height: "100%",
background: headerBGC,
justifyContent: "space-around"
};
const thCSS = {
justifyContent: "space-around",
fontWeight: "bold"
};
const tbodyCSS = {
width: "100%",
height: '80%',
boxSizing: 'border-box'
};
const tbody_trCSS = {
flexWrap: "nowrap",
width: "100%",
height: rowNum,
justifyContent: "space-around"
};
const trOddCSS = {
display: "flex",
background: oddRowBGC
};
const trEvenCSS = {
display: "flex",
background: evenRowBGC
};
const th_tdCSS = {
color:'#59B2F6',
margin: 'auto 0',
whiteSpace: 'nowrap',
overflow: "hidden",
textOverflow: 'ellipsis',
textAlign: 'center',
padding: '0 4px 0 4px'
};
const indexCSS = {
display: 'inline-block',
width: '90%',
height: "90%",
background: indexBGC,
color: indexColor,
borderRadius: '20%',
margin: 'auto'
};
//插入table元素
$(ele).append(html);
//核心代码
//遍历插入数据 表头
if (colIndex) {
$(ele + '>.table>.thead>.tr').append('<div class="th"><span class="index">#</span></div>')
}
colName.forEach(element => {
$(ele + '>.table>.thead>.tr').append(`<div class="th">${element}</div>`)
});
//遍历插入数据 数据行
for (let i = 0; i < rowData.length; i++) {
$(ele + '>.table>.tbody').append('<div class="tr"></div>');
if (colIndex) {
$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
`<div class="td"><span class="index">${i+1}</span></div>`)
}
rowData[i].forEach(element => {
if (element == "一级") {
$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
`<div class="td" ><img src="img/firstAlarm.png" alt="一级报警" width="30%" height="30%" /></div>`
)
} else if (element == "二级") {
$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
`<div class="td" ><img src="img/secondAlarm.png" alt="二级报警" width="30%" height="30%" /></div>`
)
} else if (element == "三级") {
$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
`<div class="td" ><img src="img/thirdlyAlarm.png" alt="三级报警" width="30%" height="30%" /></div>`
)
} else if (element == "未处理") {
$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
`<div class="td" Style="border:1px solid #D81F29;border-radius: 6px;background-color:#941D3B;color:white">${element}</div>`
)
} else if (element == "处理中") {
$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
`<div class="td" Style="border:1px solid #E08018;border-radius: 6px;background-color:#935A2F;color:white">${element}</div>`
)
} else if (element == "已结束") {
$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
`<div class="td" Style="border:1px solid #0FF4D5;border-radius: 6px;background-color:#0B9EA9;color:white">${element}</div>`
)
} else {
$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(`<div class="td">${element}</div>`)
}
})
}
//设置CSS样式
$(ele).css(boxCSS);
$(ele + '>.table').css(tableCSS);
$(ele + '>.table>.thead').css(theadCSS);
$(ele + '>.table>.thead>.tr').css(thead_trCSS);
$(ele + '>.table>.thead>.tr>.th').css(th_tdCSS).css(thCSS);
$(ele + '>.table>.tbody').css(tbodyCSS);
$(ele + '>.table>.tbody>.tr').css(tbody_trCSS);
$(ele + '>.table>.tbody>.tr:odd').css(trOddCSS);
$(ele + '>.table>.tbody>.tr:even').css(trEvenCSS);
$(ele + '>.table>.tbody>.tr>.td').css(th_tdCSS);
$(ele + '>.table span.index').css(indexCSS)
//统一计量单位
const emptyUnit = element => element.replace(/[^0-9]/g, '');
const hendlen = $(`${ele}>.table>.thead>.tr>.th`).length;
const bodylen = $(`${ele}>.table>.tbody>.tr:nth-child(1)>.td`).length;
const ceil = Math.ceil;
/**
* 设置每列的宽度
* eq() 是在匹配的元素中取下标为n的元素
* nth-child() 是在匹配元素的父元素中选择第n个元素
*/
if (!colWidth) {
$(`${ele}>.table>.thead>.tr>.th`).css({
width: ceil(100 / hendlen) + '%'
});
$(`${ele}>.table>.tbody>.tr>.td`).css({
width: ceil(100 / bodylen) + '%'
});
} else {
for (let i = 0; i < colWidth.length; i++) {
let emptyUnitColWidth = emptyUnit(colWidth[i]);
console.log(emptyUnitColWidth)
$(`${ele}>.table>.thead>.tr>.th:nth-child(${i+1})`).width(`${emptyUnitColWidth}%`);
$(`${ele}>.table>.tbody>.tr>.td:nth-child(${i+1})`).width(`${emptyUnitColWidth}%`);
}
}
// 组件销毁钩子
$(`${ele}`).bind('DOMNodeRemoved', (e) => {
if (e.target.classList[0] === 'asit-table') {
clearInterval(animation);
}
});
}
const tableAnimation = (el) => {
const evenRowBGC = 'rgba(6,25,57,0.2)' === undefined ? '#ddd' : 'rgba(6,25,57,0.2)';
const oddRowBGC = 'rgba(8,36,75,0.2)' === undefined ? '#bbb' : 'rgba(8,36,75,0.2)';
const trEvenCSS = {
display: "flex",
background: evenRowBGC
};
const trOddCSS = {
display: "flex",
background: oddRowBGC
};
let oddORevenCheck = $(`${el}>.table>.tbody>.tr`).length % 2 == 0 ? 'even' : 'odd';
setInterval(function () {
$(el + '>.table>.tbody>.tr:eq(0)').slideToggle(100, function () {
switch (oddORevenCheck) {
case 'even':
$(this).clone().css(trEvenCSS).appendTo(el + '>.table>.tbody');
oddORevenCheck = 'odd';
break;
case 'odd':
$(this).clone().css(trOddCSS).appendTo(el + '>.table>.tbody');
oddORevenCheck = 'even';
break;
}
$(this).remove();
});
}, 2000);
}

27
ruoyi-admin/src/main/resources/templates/broad/fp.html
Unescape Escape View File

@ -351,6 +351,7 @@
<th:block th:include="include :: echarts-js"/>
<script src="../../static/js/date-time-common.js" th:src="@{/js/date-time-common.js}"></script>
<script src="../../static/js/autoscroll-table.js" th:src="@{/js/autoscroll-table.js}"></script>
<script src="../../static/js/scrollTable.js" th:src="@{/js/scrollTable.js}"></script>
<script src="../../static/js/auto-update.js" th:src="@{/js/auto-update.js}"></script>
<script>
@ -396,9 +397,9 @@
}
// 生产统计数据
const planInfo = new AutoScrollTable(document.getElementById("bottom-left"), ['工位', '型号', '状态', '目标', '计划','累计','达成率','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00'], {
width: ["5%", null, "7%", "5%", "5%", "5%", "8%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%"],
})
// const planInfo = new AutoScrollTable(document.getElementById("bottom-left"), ['工位', '型号', '状态', '目标', '计划','累计','达成率','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00'], {
// width: ["5%", null, "7%", "5%", "5%", "5%", "8%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%"],
// })
// const planInfo2 = new AutoScrollTable(document.getElementById("bottom-left-2"), [], {
// width: ["5%", null, "7%", "5%", "5%", "5%", "8%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%"],
@ -459,6 +460,22 @@
// 生产统计数据
autoUpdate('/broad/fp/selectStationHourInfo', INTERVAL, data => {
$('#bottom-left').remove()
$('.my-transition').append('<div class="bottom-left" id="bottom-left"></div>')
dynamicTable({
el: '#productionPlan',
rowNum: 5,
timeout: 0,
header: ['工位', '型号', '状态', '目标', '计划','累计','达成率','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00'],
data: data.map(value => [value.station_no, value.name, '正常', '0', value.plan_number,value.qty,`${value.rate}%`,value.h1,value.h2,value.h3,value.h4,value.h5,value.h6,value.h7,value.h8,value.h9,value.h10,value.h11,value.h12]),
index: false,
fontColor: '#B4B7BF ',
indexBGC: '#86F3FF',
headerBGC: 'rgba(8,36,75,0.2)',
oddRowBGC: 'rgba(8,36,75,0.2)',
evenRowBGC: 'rgba(6,25,57,0.2)',
colWidth: ['70%', '15%', '15%',]
});
// orderInf.loadData(data, Object.keys(orderInfColumns))
// let consolidatedRow = ["", "合计", ""]
//
@ -487,7 +504,7 @@
// data.push(consolidatedRow)
planInfo.loadData(data.map(value => [value.station_no, value.name, '正常', '0', value.plan_number,value.qty,`${value.rate}%`,value.h1,value.h2,value.h3,value.h4,value.h5,value.h6,value.h7,value.h8,value.h9,value.h10,value.h11,value.h12]), Object.keys( ['工位', '型号', '状态', '目标', '计划','累计','达成率','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00']))
// planInfo.loadData(data.map(value => [value.station_no, value.name, '正常', '0', value.plan_number,value.qty,`${value.rate}%`,value.h1,value.h2,value.h3,value.h4,value.h5,value.h6,value.h7,value.h8,value.h9,value.h10,value.h11,value.h12]), Object.keys( ['工位', '型号', '状态', '目标', '计划','累计','达成率','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00']))
//data.map(value => [value.orderType, value.plannedProduction, value.actualProduction, value.plannedProduction - value.actualProduction, `${(value.actualProduction / value.plannedProduction * 100).toFixed(2)}%`]
})
@ -768,7 +785,7 @@
function resize() {
orderInf.resize()
planInfo.resize()
// planInfo.resize()
// planInfo2.resize()
modelChart.resize()
repertoryChart.resize()

Write Preview
Loading…
Cancel
Save