Merge remote-tracking branch 'gitee/master'

master
wangh 4 years ago
commit d6ffb61c16

@ -1,63 +1,68 @@
$(() => { $(() => {
moduleTitle() moduleTitle()
safe('#safe') safe('#safe')
importData('#importData')
// 公共请求地址
let url = '/broad/mtk'
card({ card({
top: 60, top: 60,
left: 30.5, left: 30.5,
title: '内胆检漏', title: '内胆检漏',
name1: '问题1', name1: '',
value1: '值1', value1: '',
name2: '问题2', name2: '',
value2: '值2', value2: '',
name3: '问题3', name3: '',
value3: '值3' value3: '',
}, '#cardOne') }, '#cardOne')
card({ card({
top: 60, top: 60,
left: 38.5, left: 38.5,
title: '安全检测', title: '安全检测',
name1: '问题1', name1: '',
value1: '值1', value1: '',
name2: '问题2', name2: '',
value2: '值2', value2: '',
name3: '问题3', name3: '',
value3: '值3' value3: '',
}, '#cardTwo') }, '#cardTwo')
card({ card({
top: 60, top: 60,
left: 46.5, left: 46.5,
title: '成品检漏', title: '成品检漏',
name1: '问题1', name1: '',
value1: '值1', value1: '',
name2: '问题2', name2: '',
value2: '值2', value2: '',
name3: '问题3', name3: '',
value3: '值3' value3: '',
}, '#cardThree') }, '#cardThree')
card({ card({
top: 60, top: 60,
left: 54.5, left: 54.5,
title: '测温性能', title: '测温性能',
name1: '问题1', name1: '',
value1: '值1', value1: '',
name2: '问题2', name2: '',
value2: '值2', value2: '',
name3: '问题3', name3: '',
value3: '值3' value3: '',
}, '#cardFour') }, '#cardFour')
card({ card({
top: 60, top: 60,
left: 62.5, left: 62.5,
title: '成品外观', title: '成品外观',
name1: '问题1', name1: '',
value1: '值1', value1: '',
name2: '问题2', name2: '',
value2: '值2', value2: '',
name3: '问题3', name3: '',
value3: '值3' value3: '',
}, '#cardFive') }, '#cardFive')
// 公共请求地址
let url = '/broad/mtk'
// 轮询间隔时间 // 轮询间隔时间
const INTERVAL = 30000 const INTERVAL = 30000
@ -145,22 +150,116 @@ $(() => {
total(data.find(val => val.name === '入库订单统计').qty, '#total') 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') Tips(data.find(val => val.name === '订单数量').qty, data.find(val => val.name === '完成数量').qty, data.find(val => val.name === '清单率').qty, '#Tips')
}) })
// 设备功率
// 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"))
// })
// 生产效率 // 质量分析(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 + "/selectInstoreNumByday", INTERVAL, data => { autoUpdate(url + "/selectInstoreNumByday", INTERVAL, data => {
singleVerticalBarChart({ singleVerticalBarChart({
xName: data.map(val => val.name), xName: data.map(val => val.name),
yData: data.map(val => val.qty), yData: data.map(val => val.qty),
}, document.getElementById("productionEfficiency"),-20) }, document.getElementById("productionEfficiency"),-20)
}) })
// 成品入库统计
// 重点工序质量监控
// autoUpdate(url + "/inStore3d", INTERVAL, data => { // autoUpdate(url + "/inStore3d", INTERVAL, data => {
percentageRingDiagram([ percentageRingDiagram([
{ {
@ -204,7 +303,7 @@ const curWeek = () => {
} }
firstDayOfYear = new Date(today.getFullYear(), 0, spendDay); firstDayOfYear = new Date(today.getFullYear(), 0, spendDay);
let d = Math.ceil((today.valueOf() - firstDayOfYear.valueOf()) / 86400000); let d = Math.ceil((today.valueOf() - firstDayOfYear.valueOf()) / 86400000);
return Math.ceil(d / 7); return Math.ceil((d / 7) +1);
} }
const moduleTitle = () => { const moduleTitle = () => {
@ -222,8 +321,9 @@ const moduleTitle = () => {
const safe = (el) => { const safe = (el) => {
const html = ` const html = `
<span style="position: absolute;top: 66%;left: 16%;color: #CBE6F7;font-size: 1.3vw;font-weight:600;transform: translateX(-50%);letter-spacing: 0.3vw">${new Date().getFullYear().toString()}年连续安全生产天数</span>
<span style="position: absolute;top: 74%;left: 16%;color: #08F580;font-size: 2.5vw;transform: translateX(-50%);letter-spacing: 0.3vw">${today()}<span style="font-size: 0.5vw"></span> </span> <span style="position: absolute;top: 74%;left: 16%;color: #08F580;font-size: 2.5vw;transform: translateX(-50%);letter-spacing: 0.3vw">${today()}<span style="font-size: 0.5vw"></span> </span>
<span style="position: absolute;top: 81%;left: 16%;color: #CBE6F7;font-size: 1vw;transform: translateX(-50%);letter-spacing: 0.3vw">QSR连续安全生产天数</span> <span style="position: absolute;top: 89%;left: 16%;color: #CBE6F7;font-size: 1vw;transform: translateX(-50%);letter-spacing: 0.3vw">智能冷柜互联工厂</span>
` `
$(el).html(html) $(el).html(html)
} }
@ -245,27 +345,27 @@ const card = (val = {
${val.title} ${val.title}
</div> </div>
<div style="position: absolute;top: 25%;left: 5%;width:100%;height:15%;text-align: left;font-size: 0.5vw;"> <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} ${val.name1}
</span> </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} ${val.value1}
</span> </span>
</div> </div>
<div style="position: absolute;top: 50%;left: 5%;width:100%;height:15%;text-align: left;font-size: 0.5vw;"> <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} ${val.name2}
</span> </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} ${val.value2}
</span> </span>
</div> </div>
<div style="position: absolute;top: 75%;left: 5%;width:100%;height:15%;text-align: left;font-size: 0.5vw;"> <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} ${val.name3}
</span> </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} ${val.value3}
</span> </span>
</div> </div>
</div> </div>
@ -286,3 +386,9 @@ const total = (val1 = 0, el) => {
` `
$(el).html(html) $(el).html(html)
} }
const importData = ( el) => {
const html = `
<span style="position: absolute;top: 54.3%;left: 85.7%;color: #fff;font-size: 1vw;">一次合格率</span>
`
$(el).html(html)
}

@ -138,6 +138,8 @@ const horizontalRoundedBarChartWithBackground = function (data, id) {
$(window).resize(charts.resize); $(window).resize(charts.resize);
} }
const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) { const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
let time = () => {
}
let charts = echarts.init(id); let charts = echarts.init(id);
if (!data) { if (!data) {
data = { data = {
@ -153,13 +155,14 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
}) })
let option = { let option = {
grid: { grid: {
// left: "-10%",
left: "0%", left: "0%",
right: "8%", right: "8%",
bottom: "0%", bottom: "0%",
top: "0%", top: "0%",
containLabel: true, containLabel: true,
}, },
dataZoom:[], dataZoom: [],
xAxis: { xAxis: {
show: false, show: false,
}, },
@ -179,6 +182,11 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
}, },
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
// margin:150,
fontSize:0.75 * vw,
textStyle: {
textAlign:'center'
},
}, },
}, },
], ],
@ -213,8 +221,8 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
color: "#fff", color: "#fff",
fontSize: 0.75 * vw fontSize: 0.75 * vw
}, },
formatter: function (val,index,e) { formatter: function (val, index, e) {
return data.yData[val.dataIndex] +'%' return data.yData[val.dataIndex] + '%'
} }
}, },
itemStyle: { itemStyle: {
@ -245,19 +253,22 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
}) })
let step = 1 / (data.yNameOne.length / 9) * 100 let step = 1 / (data.yNameOne.length / 9) * 100
setInterval(() => { time = () => {
option.dataZoom[0].end += step setInterval(() => {
option.dataZoom[0].start += step option.dataZoom[0].end += step
if (option.dataZoom[0].start >= 100) { option.dataZoom[0].start += step
option.dataZoom[0].start = 0 if (option.dataZoom[0].start >= 100) {
option.dataZoom[0].end = step option.dataZoom[0].start = 0
} option.dataZoom[0].end = step
if (option.dataZoom[0].end >= 100) { }
option.dataZoom[0].end = 100 if (option.dataZoom[0].end >= 100) {
option.dataZoom[0].start = option.dataZoom[0].end - step option.dataZoom[0].end = 100
} option.dataZoom[0].start = option.dataZoom[0].end - step
charts.setOption(option); }
}, 3000) charts.setOption(option);
}, 6000)
}
time()
} }
charts.setOption(option); charts.setOption(option);
$(window).resize(charts.resize); $(window).resize(charts.resize);
@ -919,7 +930,7 @@ const barChartAndLineChartFour = function (data, id) {
} }
] ]
}; };
if (Math.max(...data.yDataOne) <=5){ if (Math.max(...data.yDataOne) <= 5) {
option.yAxis[0].max = 5 option.yAxis[0].max = 5
} }
@ -1503,7 +1514,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); let charts = echarts.init(id);
if (!data) { if (!data) {
data = { data = {
@ -1520,7 +1531,7 @@ const singleVerticalBarChart = function (data, id,rotate=0) {
top: "10%", top: "10%",
left: left(), left: left(),
right: "5%", right: "5%",
bottom: "15%", bottom: bottom,
// containLabel: true // containLabel: true
}, },
dataZoom: [], dataZoom: [],
@ -1534,6 +1545,7 @@ const singleVerticalBarChart = function (data, id,rotate=0) {
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: 14, fontSize: 14,
interval:0,
rotate: rotate, rotate: rotate,
}, },
}, },
@ -1583,6 +1595,14 @@ const singleVerticalBarChart = function (data, id,rotate=0) {
), ),
}, },
}, },
label: {
show: true,
position: "top",
textStyle: {
color: "#fff",
fontSize: 0.75 * vw
},
},
data: data.yData, data: data.yData,
}, },
], ],
@ -1593,12 +1613,14 @@ const singleVerticalBarChart = function (data, id,rotate=0) {
$(window).resize(charts.resize); $(window).resize(charts.resize);
} }
const singleVerticalBarChartTwo = function (data, id) { const singleVerticalBarChartTwo = function (data, id) {
let time = () => {
}
let charts = echarts.init(id); let charts = echarts.init(id);
if (!data) { if (!data) {
data = { data = {
xName: ['0时', '2时', '4时', '6时', '8时', '10时', '12时', '14时'], xName: ['0时', '2时', '4时', '6时', '8时', '10时', '12时', '14时'],
yData: [38, 60, 40, 55, 42, 39, 45, 40], yData: [38, 60, 40, 55, 42, 39, 45, 40],
yImg: ['','','','','','','',''], yImg: ['', '', '', '', '', '', '', ''],
} }
} }
let option = { let option = {
@ -1611,6 +1633,7 @@ const singleVerticalBarChartTwo = function (data, id) {
}, },
dataZoom: [], dataZoom: [],
xAxis: { xAxis: {
margin:10,
nameTextStyle: { nameTextStyle: {
color: '#c0c3cd', color: '#c0c3cd',
padding: [0, 0, -10, 0], padding: [0, 0, -10, 0],
@ -1620,7 +1643,8 @@ const singleVerticalBarChartTwo = function (data, id) {
color: '#c0c3cd', //X轴文字 color: '#c0c3cd', //X轴文字
fontSize: 14, fontSize: 14,
interval: 0, interval: 0,
rotate:20, margin:20,
rotate: -20,
}, },
axisTick: { axisTick: {
lineStyle: { lineStyle: {
@ -1709,8 +1733,8 @@ const singleVerticalBarChartTwo = function (data, id) {
{ {
type: 'pictorialBar', type: 'pictorialBar',
name: 'pictorial element', name: 'pictorial element',
symbol: function(val,index){ symbol: function (val, index) {
return 'image://' + 'http://10.100.70.5:9090/' + data.yImg[index.dataIndex] return 'image://' + 'http://10.100.70.5:9090/' + data.yImg[index.dataIndex]
}, },
symbolSize: [40, 40], symbolSize: [40, 40],
z: 10, z: 10,
@ -1722,7 +1746,7 @@ const singleVerticalBarChartTwo = function (data, id) {
} }
}) })
}, },
], ],
}; };
if (data.xName.length > 10) { if (data.xName.length > 10) {
option.dataZoom.push({ option.dataZoom.push({
@ -1739,20 +1763,21 @@ const singleVerticalBarChartTwo = function (data, id) {
} }
}) })
let step = 1 / (data.xName.length / 11) * 100 let step = 1 / (data.xName.length / 11) * 100
setInterval(() => { time = setInterval(() => {
option.dataZoom[0].end += step option.dataZoom[0].end += step
option.dataZoom[0].start += step option.dataZoom[0].start += step
if (option.dataZoom[0].start >= 100) { if (option.dataZoom[0].start >= 100) {
option.dataZoom[0].start = 0 option.dataZoom[0].start = 0
option.dataZoom[0].end = step option.dataZoom[0].end = step
} }
if (option.dataZoom[0].end >= 100) { if (option.dataZoom[0].end >= 100) {
option.dataZoom[0].end = 100 option.dataZoom[0].end = 100
option.dataZoom[0].start = option.dataZoom[0].end - step option.dataZoom[0].start = option.dataZoom[0].end - step
} }
charts.setOption(option); charts.setOption(option);
}, 3000) }, 3000)
time()
} }
@ -2124,28 +2149,28 @@ const hollowPieChart = function (data, id) {
// 多个环形图 // 多个环形图
const percentageRingDiagram = function (data, id) { const percentageRingDiagram = function (data, id) {
let charts = echarts.init(id); let charts = echarts.init(id);
data ??= [ data ??= [
{ {
name: "内胆检漏", name: "内胆检漏",
value: 54, value: 54,
}, },
{ {
name: "安全检测", name: "安全检测",
value: 44, value: 44,
}, },
{ {
name: "成品检漏", name: "成品检漏",
value: 35, value: 35,
}, },
{ {
name: "测温性能", name: "测温性能",
value: 30, value: 30,
}, },
{ {
name: "成品外观", name: "成品外观",
value: 44, value: 44,
}, },
]; ];
let titleArr = [], let titleArr = [],
seriesArr = []; seriesArr = [];
@ -2194,7 +2219,7 @@ const percentageRingDiagram = function (data, id) {
}, },
hoverAnimation: false, hoverAnimation: false,
center: [ center: [
index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%", index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%",
index > 2 ? "75%" : "25%", index > 2 ? "75%" : "25%",
], ],
data: [ data: [

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

Loading…
Cancel
Save