修改数据请求

master
夜笙歌 4 years ago
parent 859b7d5614
commit 5fe4e659f0

@ -11,7 +11,7 @@ body {
}
.btnOne {
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnOneClick.png);
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnOne.png);
background-size: 100% 100%;
position: absolute;
width: 7.6%;
@ -20,7 +20,7 @@ body {
left: 36.1%;
}
.btnTwo {
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnTwo.png);
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnTwoClick.png);
background-size: 100% 100%;
position: absolute;
width: 7.6%;
@ -36,7 +36,7 @@ body {
height: 65.2%;
top: 20.1%;
left: 4.3%;
display: block;
display: none;
}
.layerTwo{
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/layerTwo.png);
@ -46,9 +46,9 @@ body {
height: 72.6%;
top: 13%;
left: 0.7%;
display: none;
display: block;
}
.info{
.infoOne{
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/info.png);
background-size: 100% 100%;
position: absolute;
@ -56,4 +56,22 @@ body {
height: 15.2%;
top: 8.6%;
left: 80.7%;
}
.infoTwo{
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/info.png);
background-size: 100% 100%;
position: absolute;
width: 35.6%;
height: 6.2%;
top: 6.6%;
left: 30.7%;
}
.infoThree{
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/info.png);
background-size: 100% 100%;
position: absolute;
width: 14.8%;
height: 17%;
top: 5.2%;
left: 0.7%;
}

@ -1,6 +1,8 @@
$(() => {
moduleTitle()
info()
infoOne()
infoTwo()
infoThree()
// 公共请求地址
let url = '/broad/box'
@ -28,10 +30,23 @@ const moduleTitle = () => {
`
$('body').append(html)
}
const info = () => {
const infoOne = () => {
const html = `
<span style="position: absolute;top: 12%;left: 6%;color: #CFD2D0;font-size: 0.9vw;">xxx名称</span>
<span style="display:-webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:5;position: absolute;top: 31%;left: 6%;width:90%;color: rgba(255,255,255,0.6);font-size: 0.5vw;">介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/</span>
<span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 21%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.75vw;">世界领先的个性化大规模定制冷柜智能工厂</span>
<span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 41%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.75vw;">世界领先的使用机器人最多的冷柜智能工厂</span>
<span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 61%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.75vw;">世界领先的人均效率最高的冷柜智能化工厂</span>
`
$('#info').append(html)
$('#infoOne').append(html)
}
const infoTwo = () => {
const html = `
<span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: calc(50% - 0.5vw);left: calc(50% - 9vw);width:90%;color: rgba(255,255,255,1);font-size: 1vw;">冷柜行业第一个国家级智能制造示范项目</span>
`
$('#infoTwo').append(html)
}
const infoThree = () => {
const html = `
<span style="position: absolute;top: 10%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.75vw;">工厂拥有8条智能化生产线36台机器人采用MES系统可同时实现8个系列208种产品的自动混合生产单班定员162人日产能4200台人均每日13台人均效率是原工厂的2.2通过与O2O销售平台TMS系统的连接实现用户的个性化定制</span>
`
$('#infoThree').append(html)
}

@ -32,9 +32,9 @@ const horizontalRoundedBarChartWithBackground = function (data, id) {
axisPointer: {
type: "none",
},
textStyle:{
fontSize:0.8*vw
},
textStyle: {
fontSize: 0.8 * vw
},
formatter: function (params) {
return (
params[0].name +
@ -102,7 +102,7 @@ const horizontalRoundedBarChartWithBackground = function (data, id) {
color: "#fff",
fontSize: 0.75 * vw
},
formatter:'{c}%'
formatter: '{c}%'
},
},
{
@ -152,8 +152,8 @@ const barChartAndLineChart = function (data, id) {
}
let option = {
tooltip: {
textStyle:{
fontSize:0.8*vw
textStyle: {
fontSize: 0.8 * vw
}
},
grid: {
@ -368,8 +368,8 @@ const pieChart = function (data, id) {
tooltip: {
trigger: "item",
formatter: "{b} : {c} ({d}%)",
textStyle:{
fontSize:0.8*vw
textStyle: {
fontSize: 0.8 * vw
}
},
@ -396,14 +396,14 @@ const pieChart = function (data, id) {
b: {
color: "rgb(98,137,169)",
fontSize: 0.75 * vw,
height: 1.5*vw,
height: 1.5 * vw,
},
},
},
},
emphasis:{
label:{
fontSize:0.75 * vw
emphasis: {
label: {
fontSize: 0.75 * vw
}
},
labelLine: {
@ -449,8 +449,8 @@ const verticalBarChart = function (data, id) {
}
let option = {
tooltip: {
textStyle:{
fontSize:0.8*vw
textStyle: {
fontSize: 0.8 * vw
}
},
grid: {
@ -473,14 +473,14 @@ const verticalBarChart = function (data, id) {
},
axisLabel: {
color: "#fff",
fontSize: 0.8* vw,
fontSize: 0.8 * vw,
interval: 0,
},
},
yAxis: {
nameTextStyle: {
color: "#fff",
fontSize: 0.8*vw,
fontSize: 0.8 * vw,
},
axisLine: {
lineStyle: {
@ -489,7 +489,7 @@ const verticalBarChart = function (data, id) {
},
axisLabel: {
color: "#fff",
fontSize: 0.8*vw,
fontSize: 0.8 * vw,
},
splitLine: {
show: false,
@ -1851,31 +1851,29 @@ const multipleVerticalBarChart = function (data, id) {
},
},
],
yAxis: [
{
type: "value",
splitNumber: 5,
max:50,
axisLabel: {
show: true,
color: '#fff'
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#777777',
opacity: 0.3,
},
yAxis: {
type: "value",
splitNumber: 5,
max: 15,
axisLabel: {
show: true,
color: '#fff'
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#777777',
opacity: 0.3,
},
},
],
},
series: [
{
name: data.yDataOneName,
@ -1889,7 +1887,24 @@ const multipleVerticalBarChart = function (data, id) {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: 'rgb(21, 148, 244)',
},
{
offset: 1,
color: 'rgb(13, 48, 243)',
},
],
},
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
@ -1916,7 +1931,24 @@ const multipleVerticalBarChart = function (data, id) {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: '#0DCEB1',
},
{
offset: 1,
color: '#14A15A',
},
],
},
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
@ -1961,18 +1993,18 @@ const multipleVerticalBarChart = function (data, id) {
],
};
if (data?.xName?.length >= 6) {
if (data?.xName?.length >= 4) {
option.dataZoom.push({
show: true,
type: 'slider',
bottom : '0%',
bottom: '0%',
xAxisIndex: 0,
height: 12,
start: 0,
end: 1 / (data.xName.length / 6) * 100,
end: 1 / (data.xName.length / 4) * 100,
textStyle: {
fontSize: 0,
color:'rgba(0,0,0,0)'
color: 'rgba(0,0,0,0)'
}
})
option.grid.bottom = '7%'

@ -164,11 +164,18 @@
}
#info-2 {
width: 13%;
/*width: 13%;*/
/*height: 5.6%;*/
/*position: absolute;*/
/*top: 10.5%;*/
/*left: 10%;*/
/*letter-spacing: 1px;*/
/*font-size: 12%;*/
width: 15%;
height: 5.6%;
position: absolute;
top: 10.5%;
left: 10%;
left: 9.6%;
letter-spacing: 1px;
font-size: 12%;
}
@ -308,10 +315,10 @@
<!--<div id="info-1">朱峰</div>-->
<div class="display-blocks" id="info-2">
<span>-</span>
<span>-</span>
<span>-</span>
<span>-</span>
<span style="margin-right: 9%;"></span>
<span style="margin-right: 9%;"></span>
<span style="margin-right: 9%;"></span>
<span style="margin-right: 9%;"></span>
</div>
<!--<div id="info-3"></div>-->
<div class="display-blocks" id="info-4">
@ -346,9 +353,9 @@
<script src="../../static/js/data-merger.js" th:src="@{/js/data-merger.js}"></script>
<script>
const planWorkOrderColumns = [
"编号", "计划数量", "完成数量", "差异值", "时间",
"序号", "型号","计划数量", "完成数量", "完成率", "时间",
]
const planWorkOrderTable = new AutoScrollTable(document.getElementById("plan-work-order"), planWorkOrderColumns, {width: ['30%', null, null, null, '17%']})
const planWorkOrderTable = new AutoScrollTable(document.getElementById("plan-work-order"), planWorkOrderColumns, {width: ['10%','30%', null, null, null, '17%']})
// const planTable = new AutoScrollTable(document.getElementById("plan-table"), [], {
// width: ['15%', '5%', null, null, null, null, null, null, null, null, null, null, null, null, null, null, "5%", "5%", "5%"],
// caption: "生产计划统计",
@ -383,7 +390,7 @@
let url = '/broad/box'
//生产计划工单
autoUpdate(url+"/getProductPlanInfo ", INTERVAL, data => {
planWorkOrderTable.loadData(data.map(value => [value.plan_code, value.plan_number, value.actual_number, value.plan_number-value.actual_number, value.day]), Object.keys(planWorkOrderColumns))
planWorkOrderTable.loadData(data.map((value,index) => [index,value.plan_code, value.plan_number, value.actual_number, value.rate, value.day]), Object.keys(planWorkOrderColumns))
})
autoUpdate(url + '/selectStock/S001', INTERVAL, data => {
@ -459,7 +466,7 @@
const deltaBlocks = []
for (let i = 1; i <= 4; i++) {
shiftBlocks.push(`#info-2 :nth-child(${i})`)
// shiftBlocks.push(`#info-2 :nth-child(${i})`)
planBlocks.push(`#info-4 :nth-child(${i})`)
actualBlocks.push(`#info-5 :nth-child(${i})`)
deltaBlocks.push(`#info-6 :nth-child(${i})`)

@ -42,11 +42,23 @@
position: absolute;
border: 0px solid red;
width: 68%;
height: 29.6%;
height: 25%;
top: 66.4%;
left: 3.5%;
font-size: 1vw;
}
.total{
flex-wrap: nowrap;
justify-content: space-around;
display: flex;
position: absolute;
border: 1px solid red;
width: 68%;
height: 3.9%;
top: 91.4%;
left: 3.5%;
font-size: 1vw;
}
#top-mid {
position: absolute;
@ -232,6 +244,7 @@
<div class="my-transition">
<div id="bottom-left"></div>
<div class="total" id="total"></div>
</div>
<!--<div class="my-transition2">-->
@ -409,6 +422,7 @@
$(() => {
area()
total()
// 订单执行 + 生产统计
autoUpdate('/broad/fp/selectOrderExecution', INTERVAL, data => {
orderInf.loadData(data.map(value => [value.name, value.plan_number, value.actual_number, value.plan_number - value.actual_number, value.rate]), Object.keys(orderInfColumns))
@ -455,7 +469,7 @@
el: '#bottom-left',
rowNum: 5,
timeout: 0,
header: ['工位', '型号', '状态', '目标', '计划','累计','达成率','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00'],
header: ['工位', '型号', '状态', '目标', '计划','累计','达成率','8:30','9:30','10:30','11:30','12:30','13:30','14:30','15:30','16:30','17:30','18:30','19:00'],
data: data.map(value => [value.station_no, value.name, '正常', '0', 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]),
index: false,
fontColor: '#B4B7BF ',
@ -887,18 +901,43 @@
<span style="position: absolute;top:30%;left:31%;font-size: 1vw;"> A1</span>
<span style="position: absolute;top:30%;left:37%;font-size: 1vw;"> A2</span>
<span style="position: absolute;top:30%;left:43%;font-size: 1vw;"> B1</span>
<span style="position: absolute;top:30%;left:50%;font-size: 1vw;"> B1</span>
<span style="position: absolute;top:30%;left:50%;font-size: 1vw;"> B2</span>
<span style="position: absolute;top:30%;left:56%;font-size: 1vw;"> 发泡机1</span>
<span style="position: absolute;top:30%;left:63%;font-size: 1vw;"> 发泡机2</span>
<span style="position: absolute;top:38.6%;left:33.2%;font-size: 1vw;"> A1</span>
<span style="position: absolute;top:37.6%;left:56%;font-size: 1vw;"> A2</span>
<span style="position: absolute;top:46%;left:51%;font-size: 1vw;"> A3</span>
<span style="position: absolute;top:40.7%;left:65%;font-size: 1vw;"> A4</span>
<span style="position: absolute;top:37.6%;left:56%;font-size: 1vw;"> B1</span>
<span style="position: absolute;top:46%;left:51%;font-size: 1vw;"> A2</span>
<span style="position: absolute;top:40.7%;left:65%;font-size: 1vw;"> B2</span>
<span style="position: absolute;top: 10.3%;left: 75%;color: #CFD2D0;font-size: 1.0vw">压力统计</span>
<span style="position: absolute;top: 38.3%;left: 75%;color: #CFD2D0;font-size: 1.0vw">温度统计</span>
`
$("body").append(html)
}
const total = () => {
const html = `
<!-- ["5%", '10%', "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"]-->
<span style="margin: auto 0px;text-align:center;width:5%;font-size: 1vw;">-</span>
<span style="margin: auto 0px;text-align:center;width:10%;font-size: 1vw;">-</span>
<span style="margin: auto 0px;text-align:center;width:7%;font-size: 1vw;">-</span>
<span style="margin: auto 0px;text-align:center;width:5%;font-size: 1vw;">-</span>
<span style="margin: auto 0px;text-align:center;width:5%;font-size: 1vw;">-</span>
<span style="margin: auto 0px;text-align:center;width:5%;font-size: 1vw;">-</span>
<span style="margin: auto 0px;text-align:center;width:8%;font-size: 1vw;">-</span>
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
<span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
`
$("#total").append(html)
}
</script>
</html>

@ -35,7 +35,9 @@
<div class="layerOne" id="layerOne"></div>
<div class="layerTwo" id="layerTwo"></div>
<!--介绍窗口-->
<div class=info id=info></div>
<div class='infoOne' id='infoOne'></div>
<div class='infoTwo' id='infoTwo'></div>
<div class='infoThree' id='infoThree'></div>
</body>
<script src="../../static/js/board/intelligentRefrigeratorInterconnectionFactory.jsx" th:src="@{/js/board/intelligentRefrigeratorInterconnectionFactory.js}"></script>
<script>

Loading…
Cancel
Save