修改界面

master
夜笙歌 4 years ago
parent ce35667b2b
commit 269d0c47b2

@ -132,8 +132,8 @@ body {
.safe{
position: absolute;
width: 22%;
height: 30%;
top: 64%;
height: 19%;
top: 77%;
left: 75.5%;
}
.abnormal{

@ -13,7 +13,7 @@ $(() => {
yDataOneName: '' + data.map(val => val.yearName)[0],
yDataTwo: [data[1].productRate, data[1].shoppingRate, data[1].serviceRate, data[1].orderRate],
yDataTwoName: '' + data.map(val => val.yearName)[1],
}, document.getElementById("satisfaction"), undefined, '%')
}, document.getElementById("satisfaction"), undefined, '%',5,false)
})
autoUpdate(url + "/selectMonthNumberQaS", INTERVAL, data => {
@ -23,7 +23,7 @@ $(() => {
yDataOneName: '闭环数',
yDataTwo: data.map(val => val.qaNumber),
yDataTwoName: "隐患数",
}, document.getElementById("safe"), '')
}, document.getElementById("safe"), '','',4)
})
autoUpdate(url + "/selectMonthQANumber", INTERVAL, data => {
pieChart(data.map((val, index) => {
@ -108,13 +108,13 @@ $(() => {
target.push(data[0][`target`])
}
}
lineChart({
lineChartThree({
xName: month.splice(0, value.length),
yData: target,
yDataName: "目标",
yDataTwo: value,
yDataTwoName: "单台能耗(元/台)",
}, document.getElementById("energyConsumption"), '')
yDataTwoName: "实际",
}, document.getElementById("energyConsumption"), '',true)
})
@ -145,19 +145,20 @@ const moduleTitle = () => {
<span style="position: absolute;top: 14.5%;left: 2.6%;color: #CFD2D0;font-size: 1.0vw">用户满意度</span>
<span style="position: absolute;top: 14.5%;left: 27.6%;color: #CFD2D0;font-size: 1.0vw">产品升级</span>
<span style="position: absolute;top: 14.5%;left: 68%;color: #CFD2D0;font-size: 1.0vw">场景升级</span>
<span style="position: absolute;top: 14.5%;left: 92%;color: #CFD2D0;font-size: 1.0vw">品质提升</span>
<span style="position: absolute;top: 14.5%;left: 92%;color: #CFD2D0;font-size: 1.0vw">创新引领</span>
<span style="position: absolute;top: 57.8%;left: 3.3%;color: #CFD2D0;font-size: 1.0vw">产量统计</span>
<span style="position: absolute;top: 57.8%;left: 27.6%;color: #CFD2D0;font-size: 1.0vw">单台能耗</span>
<span style="position: absolute;top: 57.8%;left: 68%;color: #CFD2D0;font-size: 1.0vw">质量分析</span>
<span style="position: absolute;top: 57.8%;left: 93%;color: #CFD2D0;font-size: 1.0vw">数字化安全</span>
<span style="position: absolute;top: 61%;left: 80%;color: #CFD2D0;font-size: 1.0vw">${new Date().getFullYear()} 年连续安全生产 ${today()} </span>
<span style="position: absolute;top: 63%;left: 87%;color: #CFD2D0;transform:translateX(-50%);font-size: 1.4vw;white-space:nowrap;">${new Date().getFullYear()} 年连续安全生产 <span style="color: #26af26">${today()} </span></span>
<span style="position: absolute;top: 72.5%;left: 87%;color: #CFD2D0;transform:translateX(-50%);font-size: 1vw;white-space:nowrap;">隐患排查治理体系</span>
`
$('body').append(html)
}
const total = (val1 = 0, el) => {
const html = `
<span style="position: absolute;top: 60%;left: 11%;color: #fff;font-size: 1vw;">${new Date().getFullYear()} ${val1} </span>
<span style="position: absolute;top: 60%;left: 11%;color: #fff;font-size: 1vw;">${new Date().getFullYear()} ${val1} </span>
`
$(el).html(html)
}

@ -946,7 +946,7 @@ const barChartAndLineChartFour = function (data, id) {
}
// 折线图
const lineChart = function (data, id, unit = '') {
const lineChart = function (data, id, unit = '',smooth=false) {
let charts = echarts.init(id);
if (!data) {
data = {
@ -964,7 +964,7 @@ const lineChart = function (data, id, unit = '') {
top: '28%',
left: '5%',
right: '5%',
bottom: '8%',
bottom: '0%',
containLabel: true,
},
tooltip: {
@ -978,9 +978,20 @@ const lineChart = function (data, id, unit = '') {
},
legend: {
top: '5%',
itemWidth:20,
itemHeight:10,
itemStyle:{
borderWidth:1,
borderHeight:1,
},
formatter:function (val) {
return `${val} `
},
textStyle: {
fontSize: 0.75 * vw,
color: '#90cb5e',
color: function () {
},
},
},
xAxis: {
@ -1001,11 +1012,12 @@ const lineChart = function (data, id, unit = '') {
},
yAxis: [
{
name:'(元/台)',
min: (min - 2 < 0) ? 0 : min - 2,
max: (max + 2 > 100) ? 100 : max + 2,
type: 'value',
nameTextStyle: {
color: '#393939',
color: '#fff',
},
splitLine: {
show: false,
@ -1021,6 +1033,7 @@ const lineChart = function (data, id, unit = '') {
},
axisLabel: {
show: true,
interval:0,
textStyle: {
color: '#ffffff',
},
@ -1031,6 +1044,7 @@ const lineChart = function (data, id, unit = '') {
{
name: data.yDataName,
type: 'line',
smooth:smooth,
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 4, //标记的大小
@ -1062,6 +1076,7 @@ const lineChart = function (data, id, unit = '') {
{
name: data.yDataTwoName,
type: 'line',
smooth:smooth,
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 4, //标记的大小
@ -1088,29 +1103,26 @@ const lineChart = function (data, id, unit = '') {
},
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgb(76,82,193,0.7)",
},
{
offset: 0.8,
color: "rgb(191,194,220,0.4)",
},
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
shadowBlur: 10,
},
},
// areaStyle: {
// normal: {
// color: new echarts.graphic.LinearGradient(
// 0,
// 0,
// 0,
// 1,
// [
// {
// offset: 0,
// color: "rgb(76,82,193,0.7)",
// },
// {
// offset: 0.8,
// color: "rgb(191,194,220,0.4)",
// },
// ],
// ),
// },
// },
data: data.yDataTwo,
},
],
@ -1121,7 +1133,7 @@ const lineChart = function (data, id, unit = '') {
}
const lineChartTwo = function (data, id, unit = '') {
let charts = echarts.init(id);
let color = ['#3094ea','#f3454b']
let color = ['#3094ea','#2fd032','#6ba72c','#7b6931','#8909E5']
if (!data) {
data = {
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
@ -1192,9 +1204,14 @@ const lineChartTwo = function (data, id, unit = '') {
},
legend: {
top: '5%',
itemWidth:20,
itemHeight:10,
formatter:function (val) {
return `${val}`
},
textStyle: {
fontSize: 0.75 * vw,
color: '#90cb5e',
color: () => {},
},
},
xAxis: {
@ -1247,6 +1264,188 @@ const lineChartTwo = function (data, id, unit = '') {
charts.setOption(option);
$(window).resize(charts.resize);
}
const lineChartThree = function (data, id, unit = '',smooth=false) {
let charts = echarts.init(id);
if (!data) {
data = {
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
yData: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
yDataName: "提升百分比",
yDataTwo: [60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
yDataTwoName: "百分比"
}
}
let min = Math.ceil(Math.min(...data.yData,...(data.yDataTwo || [])))
let max = Math.ceil(Math.max(...data.yData,...(data.yDataTwo || [])))
let option = {
grid: {
top: '28%',
left: '5%',
right: '5%',
bottom: '0%',
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
},
},
},
legend: {
top: '5%',
itemWidth:20,
itemHeight:10,
itemStyle:{
borderWidth:1,
borderHeight:1,
},
formatter:function (val) {
return `${val} `
},
textStyle: {
fontSize: 0.75 * vw,
color: function () {
},
},
},
xAxis: {
type: 'category',
data: data.xName,
axisLine: {
show: true,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: '#ffffff', //X轴文字颜色
},
},
},
yAxis: [
{
name:'(元/台)',
min: (min - 2 < 0) ? 0 : min - 2,
max: (max + 2 > 100) ? 100 : max + 2,
type: 'value',
nameTextStyle: {
color: '#fff',
},
splitLine: {
show: false,
lineStyle: {
color: '#eeeeee',
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
interval:0,
textStyle: {
color: '#ffffff',
},
},
},
],
series: [
{
name: data.yDataName,
type: 'line',
smooth:smooth,
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 4, //标记的大小
itemStyle: {
//折线拐点标志的样式
color: '#14bd2d',
borderWidth: '2',
borderColor: '#14bd2d',
},
lineStyle: {
color: '#14bd2d',
},
label: {
//图形上的文本标签
normal: {
formatter: `{c}${unit}`,
show: true,
position: "top",
textStyle: {
color: "#14bd2d",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.5 * vw,
},
},
},
data: data.yData,
},
{
name: data.yDataTwoName,
type: 'line',
smooth:smooth,
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 4, //标记的大小
itemStyle: {
//折线拐点标志的样式
color: '#3094ea',
borderWidth: '2',
borderColor: '#3094ea',
},
lineStyle: {
color: '#3094ea',
},
label: {
//图形上的文本标签
normal: {
formatter: `{c}${unit}`,
show: true,
position: "top",
textStyle: {
color: "#3094ea",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.5 * vw,
},
},
},
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(76,82,193,0.7)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(191,194,220,0.4)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
},
data: data.yDataTwo,
},
],
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 饼图
@ -1698,7 +1897,7 @@ const multipleVerticalBarChart = function (data, id) {
charts.setOption(option);
$(window).resize(charts.resize);
}
const multipleVerticalBarChartTwo = function (data, id, rotate = 0, unit = '') {
const multipleVerticalBarChartTwo = function (data, id, rotate = 0, unit = '',margin=20,isColor=true) {
let charts = echarts.init(id);
if (!data) {
data = {
@ -1724,6 +1923,7 @@ const multipleVerticalBarChartTwo = function (data, id, rotate = 0, unit = '') {
}
},
legend: {
right:'0',
data: [data.yDataOneName, data.yDataTwoName],
textStyle: {
fontSize: 0.75 * vw,
@ -1736,7 +1936,7 @@ const multipleVerticalBarChartTwo = function (data, id, rotate = 0, unit = '') {
axisTick: {show: false},
axisLabel: {
rotate: rotate,
margin: 20,
margin: margin,
textStyle: {
fontSize: 0.75 * vw,
color: "#F1F1F3",
@ -1773,7 +1973,7 @@ const multipleVerticalBarChartTwo = function (data, id, rotate = 0, unit = '') {
itemStyle: {
//图形样式
normal: {
color: "#64BCEC",
color: isColor? '#db8151': "#64BCEC",
},
},
label: {
@ -1807,7 +2007,7 @@ const multipleVerticalBarChartTwo = function (data, id, rotate = 0, unit = '') {
itemStyle: {
//图形样式
normal: {
color: "#4FD3B9",
color: isColor? '#9ce375': "#4FD3B9",
},
},
data: data.yDataTwo

@ -358,8 +358,8 @@
//夹具生产计划切换
let tableData = []
let classes = 0
let dayClass = ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30']
let nightClass = ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30', '7:30']
let dayClass = ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '7:30','8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30']
let nightClass = ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '19:30','20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30']
let tableWidth = ["5%", '10%', "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"]
showalert();
@ -377,8 +377,8 @@
planInfo2 = new AutoScrollTable(document.getElementById("my-transition2"), dayClass, {
width: tableWidth,
}, 7)
planInfo.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `<span style="color: yellow">${value.status}</span>` : value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30']))
planInfo2.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `<span style="color: yellow">${value.status}</span>` : value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30']))
planInfo.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `<span style="color: yellow">${value.status}</span>` : value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '7:30' ,'8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30']))
planInfo2.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `<span style="color: yellow">${value.status}</span>` : value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '7:30' ,'8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30']))
} else {
planInfo = new AutoScrollTable(document.getElementById("my-transition"), nightClass, {
width: tableWidth,
@ -387,8 +387,8 @@
planInfo2 = new AutoScrollTable(document.getElementById("my-transition2"), nightClass, {
width: tableWidth,
}, 7)
planInfo.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `<span style="color: yellow">${value.status}</span>` : value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30', '7:30']))
planInfo2.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `<span style="color: yellow">${value.status}</span>` : value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30', '7:30']))
planInfo.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `<span style="color: yellow">${value.status}</span>` : value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '19:30','20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30',]))
planInfo2.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `<span style="color: yellow">${value.status}</span>` : value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '19:30', '20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30']))
}
}

Loading…
Cancel
Save