修改界面

master
夜笙歌 4 years ago
parent 6ced608379
commit 1ead682fa2

@ -8,11 +8,11 @@ $(() => {
top: 60, top: 60,
left: 30.5, left: 30.5,
title: '内胆检漏', title: '内胆检漏',
name1: '', name1: '',
value1: '', value1: '',
name2: '', name2: '',
value2: '', value2: '',
name3: '', name3: '',
value3: '', value3: '',
}, '#cardOne') }, '#cardOne')
@ -20,11 +20,11 @@ $(() => {
top: 60, top: 60,
left: 38.5, left: 38.5,
title: '安全检测', title: '安全检测',
name1: '', name1: '',
value1: '', value1: '',
name2: '', name2: '',
value2: '', value2: '',
name3: '', name3: '',
value3: '', value3: '',
}, '#cardTwo') }, '#cardTwo')
@ -32,11 +32,11 @@ $(() => {
top: 60, top: 60,
left: 46.5, left: 46.5,
title: '成品检漏', title: '成品检漏',
name1: '', name1: '',
value1: '', value1: '',
name2: '', name2: '',
value2: '', value2: '',
name3: '', name3: '',
value3: '', value3: '',
}, '#cardThree') }, '#cardThree')
@ -44,11 +44,11 @@ $(() => {
top: 60, top: 60,
left: 54.5, left: 54.5,
title: '测温性能', title: '测温性能',
name1: '', name1: '',
value1: '', value1: '',
name2: '', name2: '',
value2: '', value2: '',
name3: '', name3: '',
value3: '', value3: '',
}, '#cardFour') }, '#cardFour')
@ -56,11 +56,11 @@ $(() => {
top: 60, top: 60,
left: 62.5, left: 62.5,
title: '成品外观', title: '成品外观',
name1: '', name1: '',
value1: '', value1: '',
name2: '', name2: '',
value2: '', value2: '',
name3: '', name3: '',
value3: '', value3: '',
}, '#cardFive') }, '#cardFive')
@ -141,7 +141,8 @@ $(() => {
// console.log(data) // console.log(data)
horizontalRoundedBarChartWithBackgroundTwo({ horizontalRoundedBarChartWithBackgroundTwo({
yNameOne: data.map(val => val.name), yNameOne: data.map(val => val.name),
yData: data.map(val => val.qty), yData: data.map(val => val.rate),
status:data.map(val => val.qty),
xDataName: "达成率", xDataName: "达成率",
}, document.getElementById("IQC")) }, document.getElementById("IQC"))
}) })
@ -158,7 +159,7 @@ $(() => {
data.forEach(val => { data.forEach(val => {
switch (val.code) { switch (val.code) {
case '内胆检漏': case '内胆检漏':
arr = data.find(val => val.code === '内胆检漏').list.sort(function (a,b) { arr = data.find(val => val.code === '内胆检漏').list.sort(function (a, b) {
return b.qty - a.qty return b.qty - a.qty
}) })
card({ card({
@ -175,7 +176,7 @@ $(() => {
break break
case '安全检测': case '安全检测':
debugger debugger
arr = data.find(val => val.code === '安全检测').list.sort(function (a,b) { arr = data.find(val => val.code === '安全检测').list.sort(function (a, b) {
return b.qty - a.qty return b.qty - a.qty
}) })
card({ card({
@ -191,7 +192,7 @@ $(() => {
}, '#cardTwo') }, '#cardTwo')
break break
case '成品检漏': case '成品检漏':
arr = data.find(val => val.code === '成品检漏').list.sort(function (a,b) { arr = data.find(val => val.code === '成品检漏').list.sort(function (a, b) {
return b.qty - a.qty return b.qty - a.qty
}) })
card({ card({
@ -207,7 +208,7 @@ $(() => {
}, '#cardThree') }, '#cardThree')
break break
case '测温性能': case '测温性能':
arr = data.find(val => val.code === '测温性能').list.sort(function (a,b) { arr = data.find(val => val.code === '测温性能').list.sort(function (a, b) {
return b.qty - a.qty return b.qty - a.qty
}) })
card({ card({
@ -223,7 +224,7 @@ $(() => {
}, '#cardFour') }, '#cardFour')
break break
case '成品外观': case '成品外观':
arr = data.find(val => val.code === '成品外观').list.sort(function (a,b) { arr = data.find(val => val.code === '成品外观').list.sort(function (a, b) {
return b.qty - a.qty return b.qty - a.qty
}) })
card({ card({
@ -239,13 +240,13 @@ $(() => {
}, '#cardFive') }, '#cardFive')
break break
case '柱状图': case '柱状图':
arr = data.find(val => val.code === '柱状图').list.sort(function (a,b) { arr = data.find(val => val.code === '柱状图').list.sort(function (a, b) {
return b.qty - a.qty return b.qty - a.qty
}) })
singleVerticalBarChart({ singleVerticalBarChart({
xName: arr.map(val => val.name), xName: arr.map(val => val.name),
yData: arr.map(val => val.qty), yData: arr.map(val => val.qty),
}, document.getElementById("equipmentPower"),-20,'20%') }, document.getElementById("equipmentPower"), -20, '20%')
break break
} }
}) })
@ -256,34 +257,35 @@ $(() => {
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 + "/selectQAZD", INTERVAL, data => {
percentageRingDiagram([ console.log(data)
{ percentageRingDiagram([
name: "内胆检漏", {
value: 54, name: "内胆检漏",
}, value: data.find(val => val.name == '内胆检漏').rate,
{ },
name: "安全检测", {
value: 44, name: "安全检测",
}, value: data.find(val => val.name == '安全检测').rate,
{ },
name: "成品检漏", {
value: 35, name: "成品检漏",
}, value: data.find(val => val.name == '成品检漏').rate,
{ },
name: "测温性能", {
value: 30, name: "测温性能",
}, value: data.find(val => val.name == '测温性能').rate,
{ },
name: "成品外观", {
value: 44, name: "成品外观",
}, value: data.find(val => val.name == '成品外观').rate,
], document.getElementById("mainData")) },
// }) ], document.getElementById("mainData"))
})
}) })
const today = () => { const today = () => {
@ -303,7 +305,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) +1); return Math.ceil((d / 7) + 1);
} }
const moduleTitle = () => { const moduleTitle = () => {
@ -386,7 +388,7 @@ const total = (val1 = 0, el) => {
` `
$(el).html(html) $(el).html(html)
} }
const importData = ( el) => { const importData = (el) => {
const html = ` const html = `
<span style="position: absolute;top: 54.3%;left: 85.7%;color: #fff;font-size: 1vw;">一次合格率</span> <span style="position: absolute;top: 54.3%;left: 85.7%;color: #fff;font-size: 1vw;">一次合格率</span>
` `

@ -146,9 +146,10 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
yNameOne: ["设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001"], yNameOne: ["设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001"],
yData: [41, 99, 32, 41, 24, 4, 16, 64, 18], yData: [41, 99, 32, 41, 24, 4, 16, 64, 18],
xDataName: "达成率", xDataName: "达成率",
status:[1,1,1,1,1,1,1,1,1]
} }
} }
let myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"]; let myColor = ["green", "red", "yellow", "blue", "#8B78F6"];
let bgBar = [] let bgBar = []
data.yData.forEach(() => { data.yData.forEach(() => {
bgBar.push(100) bgBar.push(100)
@ -201,8 +202,8 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
normal: { normal: {
barBorderRadius: 30, barBorderRadius: 30,
color: function (params) { color: function (params) {
var num = myColor.length; console.log(data.status[params.dataIndex])
return myColor[params.dataIndex % num]; return myColor[data.status[params.dataIndex]];
}, },
}, },
}, },
@ -1706,6 +1707,18 @@ const singleVerticalBarChartTwo = function (data, id) {
type: 'bar', type: 'bar',
barMaxWidth: 'auto', barMaxWidth: 'auto',
barWidth: 1.5 * vw, barWidth: 1.5 * vw,
label:{
normal: {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
}
}, },
{ {
data: data.yData, data: data.yData,
@ -1741,7 +1754,7 @@ const singleVerticalBarChartTwo = function (data, id) {
return { return {
value: val, value: val,
symbolPosition: 'end', symbolPosition: 'end',
symbolOffset: [0, '-120%'] symbolOffset: [0, '-190%']
} }
}) })
}, },
@ -2147,6 +2160,7 @@ 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);
console.log(data)
data ??= [ data ??= [
{ {
name: "内胆检漏", name: "内胆检漏",

Loading…
Cancel
Save