修改接口

master
夜笙歌 11 months ago
parent 368872e585
commit 8a3a17ec19

Binary file not shown.

Before

Width:  |  Height:  |  Size: 770 KiB

After

Width:  |  Height:  |  Size: 810 KiB

@ -60,8 +60,8 @@ export default {
background-image: url("../assets/board/logo.png"); background-image: url("../assets/board/logo.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 8vw; width: 6vw;
height:3vw; height: 2.3vw;
position: absolute; position: absolute;
top: 1%; top: 1%;
left: 1%; left: 1%;

@ -75,8 +75,8 @@ export default {
background-image: url("../../assets/board/logo.png"); background-image: url("../../assets/board/logo.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 8vw; width: 6vw;
height:3vw; height: 2.3vw;
position: absolute; position: absolute;
top: 1%; top: 1%;
left: 1%; left: 1%;

@ -11,23 +11,19 @@
<div class="nowClass">{{ info.bz }}</div> <div class="nowClass">{{ info.bz }}</div>
<div class="num">{{ info.sxsl }}</div> <div class="num">{{ info.sxsl }}</div>
<div class="info1Title">产品条码</div> <div class="info1Title">产品条码 <span style="color: #697bbb"> {{ info.tm }} </span></div>
<div class="info1">{{ info.tm }}</div> <div class="info2Title">扫描时间 <span style="color: #697bbb"> {{ info.sj }} </span></div>
<div class="info2Title">扫描时间</div> <div class="info3Title">产品型号 <span style="color: #697bbb"> {{ info.xh }} </span></div>
<div class="info2">{{ info.sj }}</div> <div class="info4Title">订单编号 <span style="color: #697bbb"> {{ info.bh }} </span></div>
<div class="info3Title">产品型号</div> <div class="info5Title">订单数量 <span style="color: #697bbb"> {{ info.ddsl }} </span></div>
<div class="info3">{{ info.xh }}</div> <div class="info6Title">上线数量 <span style="color: #697bbb"> {{ info.sxsl2 }} </span></div>
<div class="info4Title">订单编号</div> <div class="info7Title">提示信息 <span style="color: #0fbc7b"> {{ info.tsxx }} </span></div>
<div class="info4">{{ info.bh }}</div>
<div class="info5Title">订单数量</div>
<div class="info5">{{ info.ddsl }}</div>
<div class="info6Title">上线数量</div>
<div class="info6">{{ info.sxsl2 }}</div>
<div class="info7Title">提示信息</div>
<div class="info7">{{ info.tsxx }}</div>
<div class="scrollTable"> <div class="scrollTable">
<div style="background-color: #094170"> <div style="background-color: #094170">
<div class="scrollTableItem" style="font-weight: bold;">
序号
</div>
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold;">
订单号 订单号
</div> </div>
@ -38,7 +34,10 @@
计划数量 计划数量
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold;">
上线数量 当日上线数量
</div>
<div class="scrollTableItem" style="font-weight: bold;">
订单上线数量
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold;">
上线进度 上线进度
@ -63,6 +62,10 @@
class="scrollTableItem"> class="scrollTableItem">
{{ item.value1 }} {{ item.value1 }}
</div> </div>
<div
class="scrollTableItem">
{{ item.value1 }}
</div>
<div <div
class="scrollTableItem"> class="scrollTableItem">
{{ item.value2 }} {{ item.value2 }}
@ -75,6 +78,10 @@
class="scrollTableItem"> class="scrollTableItem">
{{ item.value4 }} {{ item.value4 }}
</div> </div>
<div
class="scrollTableItem">
{{ item.value4 }}
</div>
<div <div
class="scrollTableItem"> class="scrollTableItem">
{{ item.value5 }} {{ item.value5 }}
@ -113,8 +120,8 @@ export default {
data() { data() {
return { return {
title: [ title: [
'当日小时产量统计', '总装上线小时统计',
'当日型号产量统计', '总装上线型号统计',
'生产统计', '生产统计',
], ],
titlePosition: [ titlePosition: [
@ -381,7 +388,7 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
width: 16.6%; width: calc(100% / 8);
} }
.chart1 { .chart1 {
@ -402,8 +409,8 @@ export default {
.title1 { .title1 {
position: absolute; position: absolute;
top: 12.5%; top: 12.1%;
left: 12.7%; left: 11.3%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 1.2vw; font-size: 1.2vw;
color: #d6eaed; color: #d6eaed;
@ -411,171 +418,108 @@ export default {
.title2 { .title2 {
position: absolute; position: absolute;
top: 12.5%; top: 12.1%;
left: 87.2%; left: 88.5%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 1.2vw; font-size: 1.2vw;
color: #d6eaed; color: #d6eaed;
white-space: nowrap;
} }
.nowClass { .nowClass {
position: absolute; position: absolute;
top: 20%; top: 21%;
left: 12.7%; left: 11.3%;
font-size: 1.8vw;
letter-spacing: 4px;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 1.2vw;
color: #d6eaed; color: #d6eaed;
} }
.num { .num {
position: absolute; position: absolute;
top: 20%; top: 21%;
left: 87.2%; left: 88.5%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 1.2vw; font-size: 1.8vw;
letter-spacing: 4px;
color: #d6eaed; color: #d6eaed;
} }
.info1Title { .info1Title {
position: absolute; position: absolute;
top: 9%; top: 11.1%;
left: 23.5%;; left: 23%;
width: 8.5%; width: 24%;
font-size: 1.1vw; font-size: 1vw;
color: #55c280; color: #fff9;
text-align: center; text-align: left;
} }
.info1 {
position: absolute;
top: 9%;
left: 32%;
width: 18%;
font-size: 1.2vw;
color: #d6eaed;
text-align: center;
}
.info2Title { .info2Title {
position: absolute; position: absolute;
top: 9%; top: 11.1%;
left: 50%; left: 52.7%;
width: 8.5%; width: 24%;
font-size: 1.1vw; font-size: 1vw;
color: #55c280; color: #fff9;
text-align: center; text-align: left;
}
.info2 {
position: absolute;
top: 9%;
left: 58.5%;
width: 18%;
font-size: 1.2vw;
color: #d6eaed;
text-align: center;
} }
.info3Title { .info3Title {
position: absolute; position: absolute;
top: 13.5%; top: 14.8%;
left: 23.5%;; left: 23%;
width: 8.5%; width: 24%;
font-size: 1.1vw; font-size: 1vw;
color: #55c280; color: #fff9;
text-align: center; text-align: left;
} }
.info3 {
position: absolute;
top: 13.5%;
left: 32%;
width: 18%;
font-size: 1.2vw;
color: #d6eaed;
text-align: center;
}
.info4Title { .info4Title {
position: absolute; position: absolute;
top: 13.5%; top: 14.8%;
left: 50%; left: 52.7%;
width: 8.5%; width: 24%;
font-size: 1.1vw; font-size: 1vw;
color: #55c280; color: #fff9;
text-align: center; text-align: left;
}
.info4 {
position: absolute;
top: 13.5%;
left: 58.5%;
width: 18%;
font-size: 1.2vw;
color: #d6eaed;
text-align: center;
} }
.info5Title { .info5Title {
position: absolute; position: absolute;
top: 18%; top: 18.4%;
left: 23.5%;; left: 23%;
width: 8.5%; width: 24%;
font-size: 1.1vw; font-size: 1vw;
color: #55c280; color: #fff9;
text-align: center; text-align: left;
}
.info5 {
position: absolute;
top: 18%;
left: 32%;
width: 18%;
font-size: 1.2vw;
color: #d6eaed;
text-align: center;
} }
.info6Title { .info6Title {
position: absolute; position: absolute;
top: 18%; top: 18.3%;
left: 50%; left: 52.7%;
width: 8.5%; width: 24%;
font-size: 1.1vw; font-size: 1vw;
color: #55c280; color: #fff9;
text-align: center; text-align: left;
} }
.info6 {
position: absolute;
top: 18%;
left: 58.5%;
width: 18%;
font-size: 1.2vw;
color: #d6eaed;
text-align: center;
}
.info7Title { .info7Title {
position: absolute; position: absolute;
top: 22.5%; top: 22%;
left: 23.5%;; left: 23%;
width: 8.5%; width: 24%;
font-size: 1.1vw; font-size: 1vw;
color: #55c280; color: #fff9;
text-align: center; text-align: left;
} }
.info7 {
position: absolute;
top: 22.5%;
left: 32%;
width: 18%;
font-size: 1.2vw;
color: #d6eaed;
text-align: center;
}
</style> </style>

@ -1362,6 +1362,622 @@
<!-- </vue-seamless-scroll>--> <!-- </vue-seamless-scroll>-->
</div> </div>
</transition> </transition>
<transition name="table1">
<div class="scrollTable1" v-if="show ===4">
<div style="background-color: #094170; height: calc(25vh/7)">
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
工位
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 8%">
型号
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
状态
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
目标
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
计划
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
累计
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 7%">
达成率
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[0] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[1] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[2] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[3] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[4] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[5] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[6] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[7] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[8] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[9] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[10] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[11] }}
</div>
</div>
<!-- <vue-seamless-scroll-->
<!-- :class-option="scrollTableOption"-->
<!-- :data="scrollTableData1"-->
<!-- class="case-item"-->
<!-- style="height: 84%;overflow: hidden;"-->
<!-- >-->
<div
v-for="(item, index) in scrollTableData1.slice(24,30)"
:key="index"
style="height: calc(25vh/7)"
>
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value1 }}
</div>
<div
class="scrollTableItem" style="width: 8%">
{{ item.value2 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value3 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value4 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value5 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value6 }}
</div>
<div
class="scrollTableItem" style="width: 7%">
{{ item.value7 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value8 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value9 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value10 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value11 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value12 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value13 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value14 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value15 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value16 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value17 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value18 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value19 }}
</div>
</div>
</div>
<!-- </vue-seamless-scroll>-->
</div>
</transition>
<transition name="table2">
<div class="scrollTable1" v-if="show === 5">
<div style="background-color: #094170;height: calc(25vh/7)">
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
工位
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 8%">
型号
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
状态
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
目标
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
计划
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
累计
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 7%">
达成率
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[0] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[1] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[2] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[3] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[4] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[5] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[6] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[7] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[8] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[9] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[10] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[11] }}
</div>
</div>
<!-- <vue-seamless-scroll-->
<!-- :class-option="scrollTableOption"-->
<!-- :data="scrollTableData1"-->
<!-- class="case-item"-->
<!-- style="height: 84%;overflow: hidden;"-->
<!-- >-->
<div
v-for="(item, index) in scrollTableData1.slice(30,36)"
:key="index"
style="height: calc(25vh/7)"
>
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value1 }}
</div>
<div
class="scrollTableItem" style="width: 8%">
{{ item.value2 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value3 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value4 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value5 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value6 }}
</div>
<div
class="scrollTableItem" style="width: 7%">
{{ item.value7 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value8 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value9 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value10 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value11 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value12 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value13 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value14 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value15 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value16 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value17 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value18 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value19 }}
</div>
</div>
</div>
<!-- </vue-seamless-scroll>-->
</div>
</transition>
<transition name="table1">
<div class="scrollTable1" v-if="show === 6">
<div style="background-color: #094170;height: calc(25vh/7)">
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
工位
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 8%">
型号
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
状态
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
目标
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
计划
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
累计
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 7%">
达成率
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[0] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[1] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[2] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[3] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[4] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[5] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[6] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[7] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[8] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[9] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[10] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[11] }}
</div>
</div>
<!-- <vue-seamless-scroll-->
<!-- :class-option="scrollTableOption"-->
<!-- :data="scrollTableData1"-->
<!-- class="case-item"-->
<!-- style="height: 84%;overflow: hidden;"-->
<!-- >-->
<div
v-for="(item, index) in scrollTableData1.slice(36,42)"
:key="index"
style="height: calc(25vh/7)"
>
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value1 }}
</div>
<div
class="scrollTableItem" style="width: 8%">
{{ item.value2 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value3 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value4 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value5 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value6 }}
</div>
<div
class="scrollTableItem" style="width: 7%">
{{ item.value7 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value8 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value9 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value10 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value11 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value12 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value13 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value14 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value15 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value16 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value17 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value18 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value19 }}
</div>
</div>
</div>
<!-- </vue-seamless-scroll>-->
</div>
</transition>
<transition name="table2">
<div class="scrollTable1" v-if="show === 7">
<div style="background-color: #094170;height: calc(25vh/7)">
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
工位
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 8%">
型号
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
状态
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
目标
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
计划
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
累计
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 7%">
达成率
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[0] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[1] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[2] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[3] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[4] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[5] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[6] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[7] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[8] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[9] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[10] }}
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
{{ hourArr[11] }}
</div>
</div>
<!-- <vue-seamless-scroll-->
<!-- :class-option="scrollTableOption"-->
<!-- :data="scrollTableData1"-->
<!-- class="case-item"-->
<!-- style="height: 84%;overflow: hidden;"-->
<!-- >-->
<div
v-for="(item, index) in scrollTableData1.slice(42,48)"
:key="index"
style="height: calc(25vh/7)"
>
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value1 }}
</div>
<div
class="scrollTableItem" style="width: 8%">
{{ item.value2 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value3 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value4 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value5 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value6 }}
</div>
<div
class="scrollTableItem" style="width: 7%">
{{ item.value7 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value8 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value9 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value10 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value11 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value12 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value13 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value14 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value15 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value16 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value17 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value18 }}
</div>
<div
class="scrollTableItem" style="width: 5%">
{{ item.value19 }}
</div>
</div>
</div>
<!-- </vue-seamless-scroll>-->
</div>
</transition>
<div class="total"> <div class="total">
<div style="background-color: #094170"> <div style="background-color: #094170">
<div class="scrollTableItem" style="font-weight: bold;width: 5%"> <div class="scrollTableItem" style="font-weight: bold;width: 5%">

@ -162,6 +162,7 @@ export default {
'发泡料温度监控', '发泡料温度监控',
'门体发泡生产统计', '门体发泡生产统计',
], ],
status1:0,
meter1: 0, meter1: 0,
meter2: 0, meter2: 0,
titlePosition: [ titlePosition: [

@ -54,27 +54,27 @@
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '> <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div <div
class="scrollTableItem"> class="scrollTableItem">
{{ item.value1 }} {{ item.COLUMN_A }}
</div> </div>
<div <div
class="scrollTableItem"> class="scrollTableItem">
AA-001 {{ item.COLUMN_B }}
</div> </div>
<div <div
class="scrollTableItem"> class="scrollTableItem">
{{ item.value3 }} {{ item.COLUMN_C }}
</div> </div>
<div <div
class="scrollTableItem"> class="scrollTableItem">
{{ item.value4 }} {{ item.COLUMN_D }}
</div> </div>
<div <div
class="scrollTableItem"> class="scrollTableItem">
{{ item.value6 }} {{ item.COLUMN_E }}
</div> </div>
<div <div
class="scrollTableItem"> class="scrollTableItem">
2023-01-01 00:00:00 {{ item.COLUMN_F }}
</div> </div>
</div> </div>
</div> </div>
@ -169,7 +169,7 @@ export default {
RequestDataSet: [ RequestDataSet: [
{ {
e: 'cp-1-01', e: 'cp-1-01',
i: "", i: "scada_cp_cp_cl_01('CX_01')",
f: (e) => { f: (e) => {
this.$refs.chart1.setData({ this.$refs.chart1.setData({
tooltip: { tooltip: {
@ -190,7 +190,7 @@ export default {
legend: { legend: {
show: true, show: true,
itemGap: 50, itemGap: 50,
data: e.y.map(val => val.name), data: ['实际产量','目标产量'],
textStyle: { textStyle: {
color: "#f9f9f9", color: "#f9f9f9",
borderColor: "#fff", borderColor: "#fff",
@ -229,7 +229,7 @@ export default {
opacity: 0.3, opacity: 0.3,
}, },
}, },
data: e.x, data: e.map(val=>val.X_VALUE),
}, },
], ],
yAxis: [ yAxis: [
@ -267,7 +267,7 @@ export default {
], ],
series: [ series: [
{ {
name: e.y[0].name, name: '实际产量',
type: "bar", type: "bar",
barWidth: '70%', barWidth: '70%',
label: { label: {
@ -283,7 +283,7 @@ export default {
barBorderRadius: 5, barBorderRadius: 5,
color: function (val) { color: function (val) {
console.log() console.log()
if (e.y[0].data[val.dataIndex] >= e.y[1].data[val.dataIndex]) { if (e[val.dataIndex].Y_VALUE_ONE >= e[val.dataIndex].Y_VALUE_TWO) {
return '#30e391' return '#30e391'
} else { } else {
return '#FE70A6' return '#FE70A6'
@ -292,10 +292,10 @@ export default {
}, },
}, },
}, },
data: e.y[0].data, data: e.map(val=>val.Y_VALUE_ONE),
}, },
{ {
name: e.y[1].name, name: '目标产量',
type: "line", type: "line",
// smooth: true, //线 // smooth: true, //线
// symbol:'circle', // // symbol:'circle', //
@ -324,7 +324,7 @@ export default {
// tooltip: { // tooltip: {
// show: false // show: false
// }, // },
data: e.y[1].data, data: e.map(val=>val.Y_VALUE_TWO),
}, },
], ],
}) })
@ -339,7 +339,7 @@ export default {
}, },
{ {
e: 'cp-1-03', e: 'cp-1-03',
i: "", i: "scada_cp_zj_01('CX_01')",
f: (e) => { f: (e) => {
this.$refs.chart2.setData({ this.$refs.chart2.setData({
grid: { grid: {
@ -360,7 +360,7 @@ export default {
}, },
legend: { legend: {
itemWidth: 3 * vw, itemWidth: 3 * vw,
data: e.y.map(val => val.name), data: ['不良数','一次不合格率','目标'],
textStyle: { textStyle: {
color: "#d1e6eb", color: "#d1e6eb",
margin: 15, margin: 15,
@ -378,7 +378,7 @@ export default {
}, },
}, },
type: 'category', type: 'category',
data: e.x, data: e.map(val=>val.X_VALUE),
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
} }
@ -420,13 +420,13 @@ export default {
], ],
series: [ series: [
{ {
name: e.y[0].name, name: '不良数',
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
normal: { normal: {
color: function (val) { color: function (val) {
console.log() console.log()
if (e.y[1].data[val.dataIndex] < e.y[2].data[val.dataIndex]) { if (e[val.dataIndex].Y_VALUE_TWO < 3) {
return '#30e391' return '#30e391'
} else { } else {
return '#FE70A6' return '#FE70A6'
@ -435,7 +435,7 @@ export default {
}, },
}, },
}, },
data: e.y[0].data, data: e.map(val=>val.Y_VALUE_ONE),
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
@ -446,10 +446,10 @@ export default {
}, },
}, },
{ {
name: e.y[1].name, name: '不合格率',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
data: e.y[1].data, data: e.map(val=>val.Y_VALUE_TWO),
itemStyle: { itemStyle: {
normal: { normal: {
color: '#F9A25B', color: '#F9A25B',
@ -457,10 +457,10 @@ export default {
}, },
}, },
{ {
name: e.y[2].name, name: '目标',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
data: e.y[2].data, data: e.map(val=>3),
itemStyle: { itemStyle: {
normal: { normal: {
color: '#0DB99D', color: '#0DB99D',
@ -480,21 +480,21 @@ export default {
}, },
{ {
e: 'cp-1-05', e: 'cp-1-05',
i: "", i: "scada_cp_rk_jp_01('CX_01')",
f: (e) => { f: (e) => {
this.loss = e this.loss = e[0].X_VALUE
this.meter = e[0].Y_VALUE
} }
}, },
{ {
e: 'cp-1-06', e: 'cp-1-06',
i: "", i: "",
f: (e) => { f: (e) => {
this.meter = e
} }
}, },
{ {
e: 'cp-1-07', e: 'cp-1-07',
i: "", i: "scada_cp_rk_loss_01('CX_01')",
f: (e) => { f: (e) => {
this.$refs.chart3.setData({ this.$refs.chart3.setData({
tooltip: { tooltip: {
@ -510,7 +510,7 @@ export default {
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
data: e.x, data: e.map(val=>val.X_VALUE),
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#0177d4", color: "#0177d4",
@ -576,7 +576,7 @@ export default {
), ),
}, },
}, },
data: e.y.data, data: e.map(val=>val.Y_VALUE),
}, },
], ],
}) })
@ -584,7 +584,7 @@ export default {
}, },
{ {
e: 'cp-1-08', e: 'cp-1-08',
i: "", i: "scada_cp_rk_order_01('CX_01')",
f: (e) => { f: (e) => {
this.scrollTableData = e this.scrollTableData = e
} }
@ -600,7 +600,7 @@ export default {
RequestDataSet1: [ RequestDataSet1: [
{ {
e: 'cp-2-01', e: 'cp-2-01',
i: "", i: "scada_cp_cp_cl_01('CX_02')",
f: (e) => { f: (e) => {
this.$refs.chart1.setData({ this.$refs.chart1.setData({
tooltip: { tooltip: {
@ -621,7 +621,7 @@ export default {
legend: { legend: {
show: true, show: true,
itemGap: 50, itemGap: 50,
data: e.y.map(val => val.name), data: ['实际产量','目标产量'],
textStyle: { textStyle: {
color: "#f9f9f9", color: "#f9f9f9",
borderColor: "#fff", borderColor: "#fff",
@ -660,7 +660,7 @@ export default {
opacity: 0.3, opacity: 0.3,
}, },
}, },
data: e.x, data: e.map(val=>val.X_VALUE),
}, },
], ],
yAxis: [ yAxis: [
@ -698,7 +698,7 @@ export default {
], ],
series: [ series: [
{ {
name: e.y[0].name, name: '实际产量',
type: "bar", type: "bar",
barWidth: '70%', barWidth: '70%',
label: { label: {
@ -714,7 +714,7 @@ export default {
barBorderRadius: 5, barBorderRadius: 5,
color: function (val) { color: function (val) {
console.log() console.log()
if (e.y[0].data[val.dataIndex] >= e.y[1].data[val.dataIndex]) { if (e[val.dataIndex].Y_VALUE_ONE >= e[val.dataIndex].Y_VALUE_TWO) {
return '#30e391' return '#30e391'
} else { } else {
return '#FE70A6' return '#FE70A6'
@ -723,10 +723,10 @@ export default {
}, },
}, },
}, },
data: e.y[0].data, data: e.map(val=>val.Y_VALUE_ONE),
}, },
{ {
name: e.y[1].name, name: '目标产量',
type: "line", type: "line",
// smooth: true, //线 // smooth: true, //线
// symbol:'circle', // // symbol:'circle', //
@ -755,7 +755,7 @@ export default {
// tooltip: { // tooltip: {
// show: false // show: false
// }, // },
data: e.y[1].data, data: e.map(val=>val.Y_VALUE_TWO),
}, },
], ],
}) })
@ -770,7 +770,7 @@ export default {
}, },
{ {
e: 'cp-2-03', e: 'cp-2-03',
i: "", i: "scada_cp_zj_01('CX_02')",
f: (e) => { f: (e) => {
this.$refs.chart2.setData({ this.$refs.chart2.setData({
grid: { grid: {
@ -791,7 +791,7 @@ export default {
}, },
legend: { legend: {
itemWidth: 3 * vw, itemWidth: 3 * vw,
data: e.y.map(val => val.name), data: ['不良数','一次不合格率','目标'],
textStyle: { textStyle: {
color: "#d1e6eb", color: "#d1e6eb",
margin: 15, margin: 15,
@ -809,7 +809,7 @@ export default {
}, },
}, },
type: 'category', type: 'category',
data: e.x, data: e.map(val=>val.X_VALUE),
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
} }
@ -851,13 +851,13 @@ export default {
], ],
series: [ series: [
{ {
name: e.y[0].name, name: '不良数',
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
normal: { normal: {
color: function (val) { color: function (val) {
console.log() console.log()
if (e.y[1].data[val.dataIndex] < e.y[2].data[val.dataIndex]) { if (e[val.dataIndex].Y_VALUE_TWO < 3) {
return '#30e391' return '#30e391'
} else { } else {
return '#FE70A6' return '#FE70A6'
@ -866,7 +866,7 @@ export default {
}, },
}, },
}, },
data: e.y[0].data, data: e.map(val=>val.Y_VALUE_ONE),
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
@ -877,10 +877,10 @@ export default {
}, },
}, },
{ {
name: e.y[1].name, name: '不合格率',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
data: e.y[1].data, data: e.map(val=>val.Y_VALUE_TWO),
itemStyle: { itemStyle: {
normal: { normal: {
color: '#F9A25B', color: '#F9A25B',
@ -888,10 +888,10 @@ export default {
}, },
}, },
{ {
name: e.y[2].name, name: '目标',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
data: e.y[2].data, data: e.map(val=>3),
itemStyle: { itemStyle: {
normal: { normal: {
color: '#0DB99D', color: '#0DB99D',
@ -911,9 +911,10 @@ export default {
}, },
{ {
e: 'cp-2-05', e: 'cp-2-05',
i: "", i: "scada_cp_rk_jp_01('CX_02')",
f: (e) => { f: (e) => {
this.loss = e this.loss = e[0].X_VALUE
this.meter = e[0].Y_VALUE
} }
}, },
{ {
@ -925,7 +926,7 @@ export default {
}, },
{ {
e: 'cp-2-07', e: 'cp-2-07',
i: "", i: "scada_cp_rk_loss_01('CX_02')",
f: (e) => { f: (e) => {
this.$refs.chart3.setData({ this.$refs.chart3.setData({
tooltip: { tooltip: {
@ -941,7 +942,7 @@ export default {
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
data: e.x, data: e.map(val=>val.X_VALUE),
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#0177d4", color: "#0177d4",
@ -1007,7 +1008,7 @@ export default {
), ),
}, },
}, },
data: e.y.data, data: e.map(val=>val.Y_VALUE),
}, },
], ],
}) })
@ -1015,7 +1016,7 @@ export default {
}, },
{ {
e: 'cp-2-08', e: 'cp-2-08',
i: "", i: "scada_cp_rk_order_01('CX_02')",
f: (e) => { f: (e) => {
this.scrollTableData = e this.scrollTableData = e
} }

@ -9,6 +9,7 @@
<div class="time" id="time">{{ time }}</div> <div class="time" id="time">{{ time }}</div>
<div class="date" id="date">{{ date }}</div> <div class="date" id="date">{{ date }}</div>
<div class="logo"></div> <div class="logo"></div>
<span style="position: absolute;top: 69.3%;left: 13.7%;color:#fff;font-size: 0.9vw;">合计{{ hj }}</span>
<!-- <div class="info1">订单数10 完成数量10 完成率100%</div>--> <!-- <div class="info1">订单数10 完成数量10 完成率100%</div>-->
<div class="chart1"> <div class="chart1">
@ -87,12 +88,13 @@ export default {
name: '南海诸岛', name: '南海诸岛',
value: Math.random() * 200 value: Math.random() * 200
}], }],
hj:1000,
title: [ title: [
'三日清单', '三日清单',
'产品发布', '产品发布',
'场景升级', '场景升级',
'重点工序监控', '重点工序监控',
'订单履约率(周)', '订单履约率',
'产品市场', '产品市场',
'用户评价', '用户评价',
'质量分析', '质量分析',

Loading…
Cancel
Save