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

修改界面

Browse Source
master
夜笙歌 3 years ago
parent 7e2c21bbd2
commit 68717e9a04
6 changed files with 225 additions and 30 deletions
Show Stats Download Patch File Download Diff File

58
ruoyi-admin/src/main/resources/static/css/board/beforeLibrary.css
Unescape Escape View File

@ -13,7 +13,7 @@ body {
.orderDetails {
position: absolute;
width: 30.2%;
height: 20%;
height: 40%;
top: 15%;
left: 3.4%;
}
@ -21,7 +21,7 @@ body {
.orderQuantityFulfillmentRateOfTheDay {
position: absolute;
width: 30%;
height: 20%;
height: 40%;
top: 15%;
left: 35%;
}
@ -29,32 +29,64 @@ body {
.statisticOfAttribute{
position: absolute;
width: 30%;
height: 21%;
top: 15%;
height: 30%;
top: 25%;
left: 66.5%;
}
.monitoring{
position: absolute;
width: 30%;
height: 15%;
top: 60%;
left: 35.5%;
}
.FinishedGoodsWarehousingStatisticsByHour{
position: absolute;
width: 93%;
height: 21.5%;
top: 44%;
width: 30%;
height: 35%;
top: 60%;
left: 3.3%;
}
.PropertyInsuranceOneDayOrderInfo {
position: absolute;
width: 61.8%;
height: 21%;
top: 74%;
left: 3.4%;
width: 30%;
height: 20%;
top: 75%;
left: 35%;
}
.distributionOfBadTypesInProductionLineByDay{
position: absolute;
width: 30%;
height: 20%;
top: 74%;
height: 35%;
top: 60%;
left: 66.6%;
}
.yieldTabs{
position: absolute;
width: 3%;
height: 8%;
top: 15%;
left: 30%;
font-size: 0.8vw;
border-radius: 5px;
background-color: #C2D8FF;
color: #2C95FD;
text-align: center;
z-index: 1;
}
.typeOne,.typeTwo{
width: 100%;
height: 50%;
line-height: calc(8vh / 2);
cursor: pointer;
}
.typeOne{
background-color: #2C95FD;
color:#C2D8FF;
}

2
ruoyi-admin/src/main/resources/static/css/board/finalAssemblyProductionData.css
Unescape Escape View File

@ -29,7 +29,7 @@ body {
color: #2C95FD;
text-align: center;
}
.typeOne,.typeTwo,.typeThree{
.typeOne,.typeTwo{
width: 100%;
height: 50%;
line-height: calc(8vh / 2);

175
ruoyi-admin/src/main/resources/static/js/board/beforeLibrary.js
Unescape Escape View File

@ -6,24 +6,98 @@ $(() => {
const INTERVAL = 30000
// 订单详情
const orderDetailsTable = new AutoScrollTable(document.getElementById("orderDetails"), ["编号", "计划数量", "完成数量", "差异值", "时间"], {width: ['30%', null, null, null, '17%']})
const orderDetailsTable = new AutoScrollTable(document.getElementById("orderQuantityFulfillmentRateOfTheDay"), ["编号", "计划数量", "完成数量", "差异值", "时间"], {width: ['30%', null, null, null, '17%']})
// 成品质量详情
const PropertyInsuranceOneDayOrderInfoTable = new AutoScrollTable(document.getElementById("PropertyInsuranceOneDayOrderInfo"), ["物料条码", "检测项", "质量缺陷", "标志", "时间"], {width: ['30%', null, null, null, '17%']})
//订单详情轮询 + 当日订单数量达成率轮询
autoUpdate(url + "/selectOrderInfo ", INTERVAL, data => {
// 目标
const request = async () => {
await $.post("/broad/zz/selectProductInTarget", {}, data => {
data = JSON.parse(data)
targetTop.tips = data.find(val => val.name == "进度目标").qty
})
$.post(`/broad/zz/selectProductInByTeam/${yieldType}`, {}, data => {
data = JSON.parse(data)
// 实际
targetTop.reality = data.map(val => val.qty).reduce((val1, val2) => val1 + val2, 0)
// 起始时间
let oneTime = parseFloat(data[0].name.split(':')[0])
// 横坐标
let xName = []
if (yieldType == 0) {
let arr = []
for (let i = 0; i < 12; i++) {
arr.push(Math.ceil(targetTop.tips / 11))
}
arr[3] = Math.ceil(targetTop.tips / 22)
arr[8] = Math.ceil(targetTop.tips / 22)
arr[0] = arr[0] - (arr.reduce((val1, val2) => val1 + val2, 0) - targetTop.tips)
targetTop.targetArr = arr
targetTop.progress = arr.slice(0, data.length).reduce((val1, val2) => val1 + val2, 0)
for (let i = 0; i < 12; i++) {
xName.push(`${(oneTime + i) % 24}:30`)
}
} else {
let arr = []
for (let i = 0; i < 24; i++) {
arr.push(Math.ceil(targetTop.tips / 23))
}
arr[8] = Math.ceil(targetTop.tips / 46)
arr[13] = Math.ceil(targetTop.tips / 46)
arr[0] = arr[0] - (arr.reduce((val1, val2) => val1 + val2, 0) - targetTop.tips)
targetTop.targetArr = arr
targetTop.progress = arr.slice(0, data.length).reduce((val1, val2) => val1 + val2, 0)
xName = ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
}
// 达成率
if (targetTop.progress != 0) {
targetTop.rate = Number((targetTop.reality / targetTop.progress) * 100).toFixed(2)
} else {
targetTop.rate = 0
}
targetTop.gap = targetTop.progress - targetTop.reality
barChartAndLineChartThree({
xName: xName,
yDataOne: data.map(val => val.qty),
yDataOneName: "实际产量",
yDataTwo: targetTop.targetArr,
yDataTwoName: "目标产量",
}, document.getElementById("orderDetails"));
// horizontalRoundedBarChartWithBackground({
// yName: data.map(value => value.plan_code),
// xData: data.map(value => value.rate),
// xDataName: "达成率",
// }, document.getElementById("orderQuantityFulfillmentRateOfTheDay"))
})
// LOSS(分类)
$.post("/broad/zz/selectLossInfo", {}, data => {
data = JSON.parse(data)
let LOSSOne = data.find(val => val.name == '1').qty
let LOSSTwo = data.find(val => val.name == '4').qty
LOSS(LOSSOne)
verticalBarChart({
xName: ["0-3分钟", "3-10分钟", ">10分钟"],
yData: [data.find(val => val.name == '2').qty, data.find(val => val.name == '3').qty, LOSSTwo],
}, document.getElementById("statisticOfAttribute"));
})
// 标准节拍
$.post("/broad/zz/selectInStoreTag", {}, data => {
data = JSON.parse(data)
jp(data.qty)
})
}
autoUpdate(url + "/selectOrderInfo", INTERVAL, data => {
orderDetailsTable.loadData(data.map(value => [value.plan_code, value.plan_number, value.actual_number, value.plan_number - value.actual_number, value.day]), Object.keys(["编号", "计划数量", "完成数量", "差异值", "时间"]))
horizontalRoundedBarChartWithBackground({
yName: data.map(value => value.plan_code),
xData: data.map(value => value.rate),
xDataName: "达成率",
}, document.getElementById("orderQuantityFulfillmentRateOfTheDay"))
})
//成品入库统计轮询
autoUpdate(url + "/selectProductInStore ", INTERVAL, data => {
data.sort((a,b)=> {
data.sort((a, b) => {
return b.qty - a.qty
})
barChartAndLineChart({
@ -47,19 +121,49 @@ $(() => {
}
}), document.getElementById("distributionOfBadTypesInProductionLineByDay"));
percentageRingDiagramTwo(null, document.getElementById("statisticOfAttribute"))
// barChartAndLineChart({
// xName: data.map(val => val.name),
// yDataTwo: data.map(val => val.qty),
// yDataTwoName: "质量"
// }, document.getElementById("statisticOfAttribute"));
})
autoUpdate("/broad/mtk/selectQAZD", INTERVAL, data => {
percentageRingDiagramTwo([
{
name: "内胆检漏",
value: data.find(val => val.name == '内胆检漏').rate,
},
{
name: "安全检测",
value: data.find(val => val.name == '安全检测').rate,
},
{
name: "成品检漏",
value: data.find(val => val.name == '成品检漏').rate,
},
{
name: "测温性能",
value: data.find(val => val.name == '测温性能').rate,
},
{
name: "成品外观",
value: data.find(val => val.name == '成品外观').rate,
},
], document.getElementById("monitoring"))
})
const yieldTabs = () => {
$('#yieldTabs div').click(function () {
yieldType = $(this).attr('type')
$(this).css({backgroundColor: '#2C95FD', color: '#C2D8FF'})
$(this).siblings().css({backgroundColor: '#C2D8FF', color: '#2C95FD'})
request()
})
}
request()
yieldTabs()
setInterval(request, INTERVAL)
})
const moduleTitle = () => {
const html = `
<span style="position: absolute;top: 0.9%;left: 50%;color: #fff;font-size: 1.3vw;transform: translateX(-50%);letter-spacing: 0.3vw">生产订单及质量可视化平台</span>
<span style="position: absolute;top: 10%;left: 5.5%;color: #CFD2D0;font-size: 1.0vw">三日清单率</span>
<span style="position: absolute;top: 10%;left: 5.5%;color: #CFD2D0;font-size: 1.0vw">成品产量</span>
<span style="position: absolute;top: 10%;left: 37%;color: #CFD2D0;font-size: 1.0vw">当日订单数量达成率</span>
<span style="position: absolute;top: 10%;left: 68.5%;color: #CFD2D0;font-size: 1.0vw">重点工序质量监控</span>
<span style="position: absolute;top: 40%;left: 5.5%;color: #CFD2D0;font-size: 1.0vw">成品入库统计</span>
@ -69,3 +173,44 @@ const moduleTitle = () => {
$('body').append(html)
}
let yieldType = '0'
const TipsTop = (el) => {
const html = `
<span style="position: absolute;top: 10.3%;left: 11%;color: #fff;font-size: 0.8vw;">目标：${targetTop.tips}&nbsp;&nbsp;进度目标：${targetTop.progress}&nbsp;&nbsp;实际：${targetTop.reality}&nbsp;&nbsp;差异：${targetTop.gap}&nbsp;&nbsp;达成率：${targetTop.rate}% </span>
`
$(el).html(html)
}
let targetTopRaw = {
targetArr: [],
tips: 0,
progress: 0,
reality: 0,
gap: 0,
rate: 0,
}
const targetTopProxy = {
get: function (target, key) {
return target[key];
},
set: function (target, key, value) {
target[key] = value;
TipsTop('#TipsTop')
}
}
const targetTop = new Proxy(targetTopRaw, targetTopProxy)
const LOSS = (val = 0) => {
const html = `
<span style="position: absolute;top: 15.7%;left: 74.8%;color: #CFD2D0;font-size: 2vw;transform: translateX(-50%)">${val}</span>
`
$('#LOSS').html(html)
}
// 节拍
const jp = (val = 0) => {
const html = `
<span style="position: absolute;top: 15.7%;left: 91.5%;color: #CFD2D0;font-size: 2vw;transform: translateX(-50%)">${val}</span>
`
$('#jp').html(html)
}

9
ruoyi-admin/src/main/resources/static/js/board/orderVisualization.js
Unescape Escape View File

@ -2,6 +2,7 @@ $(() => {
moduleTitle()
safe('#safe')
importData('#importData')
top3Data('#top3Data')
// 公共请求地址
let url = '/broad/mtk'
card({
@ -310,7 +311,7 @@ const curWeek = () => {
const moduleTitle = () => {
const html = `
<span style="position: absolute;top: 0.9%;left: 50%;color: #fff;font-size: 1.3vw;transform: translateX(-50%);letter-spacing: 0.3vw">订单可视化、6S 及安全生产看板</span>
<span style="position: absolute;top: 0.9%;left: 50%;color: #fff;font-size: 1.3vw;transform: translateX(-50%);letter-spacing: 0.3vw">订单可视化及安全生产平台</span>
<span style="position: absolute;top: 10%;left: 5.5%;color: #CFD2D0;font-size: 1.0vw">第${curWeek()}周 班组6S排行榜 </span>
<span style="position: absolute;top: 10%;left: 32%;color: #CFD2D0;font-size: 1.0vw">三日订单执行情况</span>
<span style="position: absolute;top: 10%;left: 73.5%;color: #CFD2D0;font-size: 1.0vw">当日订单入库统计</span>
@ -393,4 +394,10 @@ const importData = (el) => {
<span style="position: absolute;top: 54.3%;left: 85.7%;color: #fff;font-size: 1vw;">一次合格率</span>
`
$(el).html(html)
}
const top3Data = (el) => {
const html = `
<span style="position: absolute;top: 76.3%;left: 46.7%;color: #fff;font-size: 1vw;">质量缺陷TOP10</span>
`
$(el).html(html)
}

10
ruoyi-admin/src/main/resources/templates/broad/beforeLibrary.html
Unescape Escape View File

@ -27,6 +27,14 @@
</head>
<body style="display:flex;">
<div class="yieldTabs" id="yieldTabs">
<div class="typeOne" id="typeOne" type="0">当班</div>
<div class="typeTwo" id="typeTwo" type="1">当日</div>
</div>
<div id="LOSS"></div>
<div id="jp"></div>
<div class="monitoring" id="monitoring"></div>
<!--订单详情-->
<div class="orderDetails" id="orderDetails"></div>
@ -45,6 +53,8 @@
<!--产线不良类型分布-->
<div class="distributionOfBadTypesInProductionLineByDay" id="distributionOfBadTypesInProductionLineByDay"></div>
<div id="TipsTop"></div>
<div id="total"></div>
</body>
<script src="../../static/js/board/beforeLibrary.js" th:src="@{/js/board/beforeLibrary.js}"></script>
<script>

1
ruoyi-admin/src/main/resources/templates/broad/orderVisualization.html
Unescape Escape View File

@ -35,6 +35,7 @@
<div id="cardFour"></div>
<div id="cardFive"></div>
<div id="importData"></div>
<div id="top3Data"></div>
<!--每日人力出勤-->
<div class="manpowerAttendance" id="manpowerAttendance"></div>

Write Preview
Loading…
Cancel
Save