修改界面

master
夜笙歌 4 years ago
parent aad3e4d66c
commit d8f566a609

@ -1,63 +1,67 @@
$(() => {
moduleTitle()
safe('#safe')
// 公共请求地址
let url = '/broad/mtk'
card({
top: 60,
left: 30.5,
title: '内胆检漏',
name1: '问题1',
value1: '值1',
name2: '问题2',
value2: '值2',
name3: '问题3',
value3: '值3'
name1: '',
value1: '',
name2: '',
value2: '',
name3: '',
value3: '',
}, '#cardOne')
card({
top: 60,
left: 38.5,
title: '安全检测',
name1: '问题1',
value1: '值1',
name2: '问题2',
value2: '值2',
name3: '问题3',
value3: '值3'
name1: '',
value1: '',
name2: '',
value2: '',
name3: '',
value3: '',
}, '#cardTwo')
card({
top: 60,
left: 46.5,
title: '成品检漏',
name1: '问题1',
value1: '值1',
name2: '问题2',
value2: '值2',
name3: '问题3',
value3: '值3'
name1: '',
value1: '',
name2: '',
value2: '',
name3: '',
value3: '',
}, '#cardThree')
card({
top: 60,
left: 54.5,
title: '测温性能',
name1: '问题1',
value1: '值1',
name2: '问题2',
value2: '值2',
name3: '问题3',
value3: '值3'
name1: '',
value1: '',
name2: '',
value2: '',
name3: '',
value3: '',
}, '#cardFour')
card({
top: 60,
left: 62.5,
title: '成品外观',
name1: '问题1',
value1: '值1',
name2: '问题2',
value2: '值2',
name3: '问题3',
value3: '值3'
name1: '',
value1: '',
name2: '',
value2: '',
name3: '',
value3: '',
}, '#cardFive')
// 公共请求地址
let url = '/broad/mtk'
// 轮询间隔时间
const INTERVAL = 30000
@ -145,15 +149,110 @@ $(() => {
total(data.find(val => val.name === '入库订单统计').qty, '#total')
Tips(data.find(val => val.name === '订单数量').qty, data.find(val => val.name === '完成数量').qty, data.find(val => val.name === '清单率').qty, '#Tips')
})
// 设备功率
// 质量分析(TOP3)
autoUpdate(url + "/selectQATop3", INTERVAL, data => {
console.log(data)
let arr = []
data.forEach(val => {
switch (val.code) {
case '内胆检漏':
arr = data.find(val => val.code === '内胆检漏').list.sort(function (a,b) {
return b.qty - a.qty
})
card({
top: 60,
left: 30.5,
title: '内胆检漏',
name1: arr[0]?.name || '',
value1: arr[0]?.qty || '',
name2: arr[1]?.name || '',
value2: arr[1]?.qty || '',
name3: arr[2]?.name || '',
value3: arr[2]?.qty || '',
}, '#cardOne')
break
case '安全检测':
debugger
arr = data.find(val => val.code === '安全检测').list.sort(function (a,b) {
return b.qty - a.qty
})
card({
top: 60,
left: 38.5,
title: '安全检测',
name1: arr[0]?.name || '',
value1: arr[0]?.qty || '',
name2: arr[1]?.name || '',
value2: arr[1]?.qty || '',
name3: arr[2]?.name || '',
value3: arr[2]?.qty || '',
}, '#cardTwo')
break
case '成品检漏':
arr = data.find(val => val.code === '成品检漏').list.sort(function (a,b) {
return b.qty - a.qty
})
card({
top: 60,
left: 46.5,
title: '成品检漏',
name1: arr[0]?.name || '',
value1: arr[0]?.qty || '',
name2: arr[1]?.name || '',
value2: arr[1]?.qty || '',
name3: arr[2]?.name || '',
value3: arr[2]?.qty || '',
}, '#cardThree')
break
case '测温性能':
arr = data.find(val => val.code === '测温性能').list.sort(function (a,b) {
return b.qty - a.qty
})
card({
top: 60,
left: 54.5,
title: '测温性能',
name1: arr[0]?.name || '',
value1: arr[0]?.qty || '',
name2: arr[1]?.name || '',
value2: arr[1]?.qty || '',
name3: arr[2]?.name || '',
value3: arr[2]?.qty || '',
}, '#cardFour')
break
case '成品外观':
arr = data.find(val => val.code === '成品外观').list.sort(function (a,b) {
return b.qty - a.qty
})
card({
top: 60,
left: 62.5,
title: '成品外观',
name1: arr[0]?.name || '',
value1: arr[0]?.qty || '',
name2: arr[1]?.name || '',
value2: arr[1]?.qty || '',
name3: arr[2]?.name || '',
value3: arr[2]?.qty || '',
}, '#cardFive')
break
case '柱状图':
arr = data.find(val => val.code === '柱状图').list.sort(function (a,b) {
return b.qty - a.qty
})
singleVerticalBarChart({
xName: arr.map(val => val.name),
yData: arr.map(val => val.qty),
}, document.getElementById("equipmentPower"),20,'20%')
break
}
})
})
// autoUpdate(url + "/inStore3d", INTERVAL, data => {
singleVerticalBarChart({
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
yData: [12, 20, 11, 30, 14, 80, 50],
}, document.getElementById("equipmentPower"))
// })
// 生产效率
// 当日订单入库统计
autoUpdate(url + "/selectInstoreNumByday", INTERVAL, data => {
singleVerticalBarChart({
xName: data.map(val => val.name),
@ -245,27 +344,27 @@ const card = (val = {
${val.title}
</div>
<div style="position: absolute;top: 25%;left: 5%;width:100%;height:15%;text-align: left;font-size: 0.5vw;">
<span style="position: absolute;width:60%;font-size: 0.6vw;">
<span style="position: absolute;width:73%;font-size: 0.6vw;">
${val.name1}
</span>
<span style="position: absolute;left: 60%;width:40%;font-size: 0.4vw;line-height: 1vw">
<span style="position: absolute;left: 75%;width:40%;font-size: 0.4vw;line-height: 1vw">
${val.value1}
</span>
</div>
<div style="position: absolute;top: 50%;left: 5%;width:100%;height:15%;text-align: left;font-size: 0.5vw;">
<span style="position: absolute;width:60%;font-size: 0.6vw;">
<span style="position: absolute;width:73%;font-size: 0.6vw;">
${val.name2}
</span>
<span style="position: absolute;left: 60%;width:40%;font-size: 0.4vw;line-height: 1vw">
<span style="position: absolute;left: 75%;width:40%;font-size: 0.4vw;line-height: 1vw">
${val.value2}
</span>
</div>
<div style="position: absolute;top: 75%;left: 5%;width:100%;height:15%;text-align: left;font-size: 0.5vw;">
<span style="position: absolute;width:60%;font-size: 0.6vw;">
<span style="position: absolute;width:73%;font-size: 0.6vw;">
${val.name3}
</span>
<span style="position: absolute;left: 60%;width:40%;font-size: 0.4vw;line-height: 1vw">
${val.value2}
<span style="position: absolute;left: 75%;width:40%;font-size: 0.4vw;line-height: 1vw">
${val.value3}
</span>
</div>
</div>

@ -155,6 +155,7 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
})
let option = {
grid: {
// left: "-10%",
left: "0%",
right: "8%",
bottom: "0%",
@ -181,6 +182,10 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
},
axisLabel: {
color: "#fff",
// margin:150,
textStyle: {
textAlign:'center'
},
},
},
],
@ -1506,7 +1511,7 @@ const multipleVerticalBarChartTwo = function (data, id) {
}
// 单个垂直柱状图
const singleVerticalBarChart = function (data, id, rotate = 0) {
const singleVerticalBarChart = function (data, id, rotate = 0,bottom='15%') {
let charts = echarts.init(id);
if (!data) {
data = {
@ -1523,7 +1528,7 @@ const singleVerticalBarChart = function (data, id, rotate = 0) {
top: "10%",
left: left(),
right: "5%",
bottom: "15%",
bottom: bottom,
// containLabel: true
},
dataZoom: [],

Loading…
Cancel
Save