修改界面

master
夜笙歌 4 years ago
parent 515d18369f
commit fc414bb88e

@ -1,103 +1,188 @@
$(() => { $(() => {
moduleTitle() moduleTitle()
safe('#safe') safe('#safe')
Tips(0,0,0,'#Tips') Tips(0, 0, 0, '#Tips')
total( 0,'#total') total(0, '#total')
card({top: 60, left: 30.5,title:'内胆检漏',name1:'问题1',value1:'值1',name2:'问题2',value2:'值2',name3:'问题3',value3:'值3'},'#cardOne') card({
card({top: 60, left: 38.5,title:'安全检测',name1:'问题1',value1:'值1',name2:'问题2',value2:'值2',name3:'问题3',value3:'值3'},'#cardTwo') top: 60,
card({top: 60, left: 46.5,title:'成品检漏',name1:'问题1',value1:'值1',name2:'问题2',value2:'值2',name3:'问题3',value3:'值3'},'#cardThree') left: 30.5,
card({top: 60, left: 54.5,title:'测温性能',name1:'问题1',value1:'值1',name2:'问题2',value2:'值2',name3:'问题3',value3:'值3'},'#cardFour') title: '内胆检漏',
card({top: 60, left: 62.5,title:'成品外观',name1:'问题1',value1:'值1',name2:'问题2',value2:'值2',name3:'问题3',value3:'值3'},'#cardFive') name1: '问题1',
value1: '值1',
name2: '问题2',
value2: '值2',
name3: '问题3',
value3: '值3'
}, '#cardOne')
card({
top: 60,
left: 38.5,
title: '安全检测',
name1: '问题1',
value1: '值1',
name2: '问题2',
value2: '值2',
name3: '问题3',
value3: '值3'
}, '#cardTwo')
card({
top: 60,
left: 46.5,
title: '成品检漏',
name1: '问题1',
value1: '值1',
name2: '问题2',
value2: '值2',
name3: '问题3',
value3: '值3'
}, '#cardThree')
card({
top: 60,
left: 54.5,
title: '测温性能',
name1: '问题1',
value1: '值1',
name2: '问题2',
value2: '值2',
name3: '问题3',
value3: '值3'
}, '#cardFour')
card({
top: 60,
left: 62.5,
title: '成品外观',
name1: '问题1',
value1: '值1',
name2: '问题2',
value2: '值2',
name3: '问题3',
value3: '值3'
}, '#cardFive')
// 公共请求地址 // 公共请求地址
let url = 'mtk' let url = '/broad/mtk'
// let url = ''
// 轮询间隔时间 // 轮询间隔时间
const INTERVAL = 30000 const INTERVAL = 30000
//每日人力出勤轮询 //每日人力出勤轮询
autoUpdate(url + "/team6s ", INTERVAL, data => { autoUpdate(url + "/team6s ", INTERVAL, data => {
console.log(data) data ??= [
data ??= [ {
{ teamName: '班组1',
teamName: '班组1', teamNumber: 72,
teamNumber: 72, path: ''
path:'' },
}, {
{ teamName: '班组2',
teamName: '班组2', teamNumber: 52,
teamNumber: 52, path: ''
path:'' },
}, {
{ teamName: '班组3',
teamName: '班组3', teamNumber: 72,
teamNumber: 72, path: ''
path:'' },
}, {
{ teamName: '班组4',
teamName: '班组4', teamNumber: 29,
teamNumber: 29, path: ''
path:'' },
}, {
{ teamName: '班组5',
teamName: '班组5', teamNumber: 82,
teamNumber: 82, path: ''
path:'' },
}, {
{ teamName: '班组6',
teamName: '班组6', teamNumber: 82,
teamNumber: 82, path: ''
path:'' },
}, {
{ teamName: '班组7',
teamName: '班组7', teamNumber: 28,
teamNumber: 28, path: ''
path:'' },
}, {
{ teamName: '班组8',
teamName: '班组8', teamNumber: 62,
teamNumber: 62, path: ''
path:'' },
}, {
{ teamName: '班组9',
teamName: '班组9', teamNumber: 82,
teamNumber: 82, path: ''
path:'' },
}, {
{ teamName: '班组10',
teamName: '班组10', teamNumber: 38,
teamNumber: 38, path: ''
path:'' },
}, {
{ teamName: '班组11',
teamName: '班组11', teamNumber: 93,
teamNumber: 93, path: ''
path:'' },
}, ]
] data.sort((a, b) => {
data.sort((a,b)=>{ return b.teamNumber - a.teamNumber
return b.teamNumber - a.teamNumber })
}) singleVerticalBarChartTwo({
console.log(data) xName: data.map(val => val.teamName),
singleVerticalBarChartTwo({ yData: data.map(val => val.teamNumber),
xName: data.map(val => val.teamName), yImg: data.map(val => val.path),
yData: data.map(val => val.teamNumber), }, document.getElementById("manpowerAttendance"))
yImg: data.map(val => val.path),
}, document.getElementById("manpowerAttendance"))
}) })
// IQC // 三日订单执行情况
horizontalRoundedBarChartWithBackgroundTwo(null, document.getElementById("IQC")) autoUpdate(url + "/inStore3d", INTERVAL, data => {
console.log(data)
horizontalRoundedBarChartWithBackgroundTwo({
yNameOne: data.map(val => val.name),
yData: data.map(val => val.rate),
xDataName: "达成率",
}, document.getElementById("IQC"))
})
// 设备功率 // 设备功率
singleVerticalBarChart(null, document.getElementById("equipmentPower")) // 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 + "/ ", INTERVAL, data => { // autoUpdate(url + "/ ", INTERVAL, data => {
singleVerticalBarChart(null, document.getElementById("productionEfficiency")) singleVerticalBarChart({
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
yData: [12, 20, 11, 30, 14, 80, 50],
}, document.getElementById("productionEfficiency"))
// }) // })
// 成品入库统计 // 成品入库统计
percentageRingDiagram(null, document.getElementById("mainData")) // autoUpdate(url + "/inStore3d", INTERVAL, data => {
percentageRingDiagram([
{
name: "内胆检漏",
value: 54,
},
{
name: "安全检测",
value: 44,
},
{
name: "成品检漏",
value: 35,
},
{
name: "测温性能",
value: 30,
},
{
name: "成品外观",
value: 44,
},
], document.getElementById("mainData"))
// })
}) })
const today = () => { const today = () => {
@ -141,7 +226,17 @@ const safe = (el) => {
$(el).html(html) $(el).html(html)
} }
const card = (val = {top: 1, left: 1,title:'',name1:'',value1:'',name2:'',value2:'',name3:'',value3:''},el) => { const card = (val = {
top: 1,
left: 1,
title: '',
name1: '',
value1: '',
name2: '',
value2: '',
name3: '',
value3: ''
}, el) => {
const html = ` const html = `
<div style="position: absolute;top: ${val.top}%;left: ${val.left}%;width:7%;height:15%;border: 1px solid #0E72F1;"> <div style="position: absolute;top: ${val.top}%;left: ${val.left}%;width:7%;height:15%;border: 1px solid #0E72F1;">
<div style="position: absolute;top: 0%;left: 0%;width:100%;height:15%;background-color: #0C71F3;text-align: center;font-size: 0.75vw;line-height: 1.2vw"> <div style="position: absolute;top: 0%;left: 0%;width:100%;height:15%;background-color: #0C71F3;text-align: center;font-size: 0.75vw;line-height: 1.2vw">

@ -1587,12 +1587,11 @@ const singleVerticalBarChart = function (data, id) {
} }
const singleVerticalBarChartTwo = function (data, id) { const singleVerticalBarChartTwo = function (data, id) {
let charts = echarts.init(id); let charts = echarts.init(id);
let walk =
'path://M29.902,23.275c1.86,0,3.368-1.506,3.368-3.365c0-1.859-1.508-3.365-3.368-3.365 c-1.857,0-3.365,1.506-3.365,3.365C26.537,21.769,28.045,23.275,29.902,23.275z M36.867,30.74c-1.666-0.467-3.799-1.6-4.732-4.199 c-0.932-2.6-3.131-2.998-4.797-2.998s-7.098,3.894-7.098,3.894c-1.133,1.001-2.1,6.502-0.967,6.769 c1.133,0.269,1.266-1.533,1.934-3.599c0.666-2.065,3.797-3.466,3.797-3.466s0.201,2.467-0.398,3.866 c-0.599,1.399-1.133,2.866-1.467,6.198s-1.6,3.665-3.799,6.266c-2.199,2.598-0.6,3.797,0.398,3.664 c1.002-0.133,5.865-5.598,6.398-6.998c0.533-1.397,0.668-3.732,0.668-3.732s0,0,2.199,1.867c2.199,1.865,2.332,4.6,2.998,7.73 s2.332,0.934,2.332-0.467c0-1.401,0.269-5.465-1-7.064c-1.265-1.6-3.73-3.465-3.73-5.265s1.199-3.732,1.199-3.732 c0.332,1.667,3.335,3.065,5.599,3.399C38.668,33.206,38.533,31.207,36.867,30.74z';
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: ['','','','','','','',''],
} }
} }
let option = { let option = {
@ -1677,23 +1676,6 @@ const singleVerticalBarChartTwo = function (data, id) {
type: 'bar', type: 'bar',
barMaxWidth: 'auto', barMaxWidth: 'auto',
barWidth: 1.5 * vw, barWidth: 1.5 * vw,
// label: {
// show: true,
// position: 'top',
// // distance: 10,
// color: '#fff',
// formatter: '{a|}',
// rich: {
// a: {
// width: 3 * vw,
// height: 3 * vw,
// backgroundColor: {
// image: 'http://10.100.70.5:9090/profile/upload/2022/07/22/%E9%99%88%E5%A6%82%E5%8D%8E_20220722161444A002.jpeg'
// },
// },
// }
// },
}, },
{ {
data: data.yData, data: data.yData,
@ -1721,19 +1703,17 @@ const singleVerticalBarChartTwo = function (data, id) {
type: 'pictorialBar', type: 'pictorialBar',
name: 'pictorial element', name: 'pictorial element',
symbol: function(val,index){ symbol: function(val,index){
console.log(val) return 'image://' + 'http://10.100.70.5:9090/' + data.yImg[index.dataIndex]
console.log(index)
// return walk
}, },
symbolSize: [20, 20], symbolSize: [40, 40],
z: 10, z: 10,
data: [ data: data.yData.map(val => {
{ return {
value: data.yData[0], value: val,
symbolPosition: 'end', symbolPosition: 'end',
symbolOffset: [0, '-120%'] symbolOffset: [0, '-120%']
} }
] })
}, },
], ],
}; };

Loading…
Cancel
Save