yinq
/
aucma-mes-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改界面显示

Browse Source
master
夜笙歌 10 months ago
parent ed418ba259
commit d972ec86b7
4 changed files with 931 additions and 110 deletions
Show Stats Download Patch File Download Diff File

328
public/data.json
Unescape Escape View File

@ -269,6 +269,302 @@
"value17": "100",
"value18": "100",
"value19": "100"
},
{
"value1": "7",
"value2": "A-06",
"value3": "生产中",
"value4": "1000",
"value5": "1000%",
"value6": "100%",
"value7": "100",
"value8": "100",
"value9": "100",
"value10": "100",
"value11": "100",
"value12": "100",
"value13": "100",
"value14": "100",
"value15": "100",
"value16": "100",
"value17": "100",
"value18": "100",
"value19": "100"
},
{
"value1": "8",
"value2": "A-06",
"value3": "生产中",
"value4": "1000",
"value5": "1000%",
"value6": "100%",
"value7": "100",
"value8": "100",
"value9": "100",
"value10": "100",
"value11": "100",
"value12": "100",
"value13": "100",
"value14": "100",
"value15": "100",
"value16": "100",
"value17": "100",
"value18": "100",
"value19": "100"
},
{
"value1": "9",
"value2": "A-06",
"value3": "生产中",
"value4": "1000",
"value5": "1000%",
"value6": "100%",
"value7": "100",
"value8": "100",
"value9": "100",
"value10": "100",
"value11": "100",
"value12": "100",
"value13": "100",
"value14": "100",
"value15": "100",
"value16": "100",
"value17": "100",
"value18": "100",
"value19": "100"
},
{
"value1": "10",
"value2": "A-06",
"value3": "生产中",
"value4": "1000",
"value5": "1000%",
"value6": "100%",
"value7": "100",
"value8": "100",
"value9": "100",
"value10": "100",
"value11": "100",
"value12": "100",
"value13": "100",
"value14": "100",
"value15": "100",
"value16": "100",
"value17": "100",
"value18": "100",
"value19": "100"
}
],
"table31": [
{
"value1": "1",
"value2": "A-07",
"value3": "生产中",
"value4": "1000",
"value5": "1000%",
"value6": "100%",
"value7": "100",
"value8": "100",
"value9": "100",
"value10": "100",
"value11": "100",
"value12": "100",
"value13": "100",
"value14": "100",
"value15": "100",
"value16": "100",
"value17": "100",
"value18": "100",
"value19": "100"
},
{
"value1": "2",
"value2": "A-08",
"value3": "生产中",
"value4": "1000",
"value5": "1000%",
"value6": "100%",
"value7": "100",
"value8": "100",
"value9": "100",
"value10": "100",
"value11": "100",
"value12": "100",
"value13": "100",
"value14": "100",
"value15": "100",
"value16": "100",
"value17": "100",
"value18": "100",
"value19": "100"
},
{
"value1": "3",
"value2": "A-09",
"value3": "生产中",
"value4": "1000",
"value5": "1000%",
"value6": "100%",
"value7": "100",
"value8": "100",
"value9": "100",
"value10": "100",
"value11": "100",
"value12": "100",
"value13": "100",
"value14": "100",
"value15": "100",
"value16": "100",
"value17": "100",
"value18": "100",
"value19": "100"
},
{
"value1": "4",
"value2": "A-010",
"value3": "生产中",
"value4": "1000",
"value5": "1000%",
"value6": "100%",
"value7": "100",
"value8": "100",
"value9": "100",
"value10": "100",
"value11": "100",
"value12": "100",
"value13": "100",
"value14": "100",
"value15": "100",
"value16": "100",
"value17": "100",
"value18": "100",
"value19": "100"
},
{
"value1": "5",
"value2": "A-11",
"value3": "生产中",
"value4": "1000",
"value5": "1000%",
"value6": "100%",
"value7": "100",
"value8": "100",
"value9": "100",
"value10": "100",
"value11": "100",
"value12": "100",
"value13": "100",
"value14": "100",
"value15": "100",
"value16": "100",
"value17": "100",
"value18": "100",
"value19": "100"
},
{
"value1": "6",
"value2": "A-12",
"value3": "生产中",
"value4": "1000",
"value5": "1000%",
"value6": "100%",
"value7": "100",
"value8": "100",
"value9": "100",
"value10": "100",
"value11": "100",
"value12": "100",
"value13": "100",
"value14": "100",
"value15": "100",
"value16": "100",
"value17": "100",
"value18": "100",
"value19": "100"
},
{
"value1": "7",
"value2": "A-12",
"value3": "生产中",
"value4": "1000",
"value5": "1000%",
"value6": "100%",
"value7": "100",
"value8": "100",
"value9": "100",
"value10": "100",
"value11": "100",
"value12": "100",
"value13": "100",
"value14": "100",
"value15": "100",
"value16": "100",
"value17": "100",
"value18": "100",
"value19": "100"
},
{
"value1": "8",
"value2": "A-12",
"value3": "生产中",
"value4": "1000",
"value5": "1000%",
"value6": "100%",
"value7": "100",
"value8": "100",
"value9": "100",
"value10": "100",
"value11": "100",
"value12": "100",
"value13": "100",
"value14": "100",
"value15": "100",
"value16": "100",
"value17": "100",
"value18": "100",
"value19": "100"
},
{
"value1": "9",
"value2": "A-12",
"value3": "生产中",
"value4": "1000",
"value5": "1000%",
"value6": "100%",
"value7": "100",
"value8": "100",
"value9": "100",
"value10": "100",
"value11": "100",
"value12": "100",
"value13": "100",
"value14": "100",
"value15": "100",
"value16": "100",
"value17": "100",
"value18": "100",
"value19": "100"
},
{
"value1": "10",
"value2": "A-12",
"value3": "生产中",
"value4": "1000",
"value5": "1000%",
"value6": "100%",
"value7": "100",
"value8": "100",
"value9": "100",
"value10": "100",
"value11": "100",
"value12": "100",
"value13": "100",
"value14": "100",
"value15": "100",
"value16": "100",
"value17": "100",
"value18": "100",
"value19": "100"
}
],
"table32": [
@ -399,6 +695,38 @@
"value19": "100"
}
],
"table33": [
{
"value1": "1",
"value2": "A-01",
"value3": "2023-01-01"
},
{
"value1": "2",
"value2": "A-02",
"value3": "2023-01-01"
},
{
"value1": "3",
"value2": "A-03",
"value3": "2023-01-01"
},
{
"value1": "4",
"value2": "A-04",
"value3": "2023-01-01"
},
{
"value1": "5",
"value2": "A-05",
"value3": "2023-01-01"
},
{
"value1": "6",
"value2": "A-06",
"value3": "2023-01-01"
}
],
"table4": [
{
"value1": "01",

13
src/views/board/caseShell/index2.vue
Unescape Escape View File

@ -9,7 +9,7 @@
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
{{ i }}
</div>
<div class="meter">平均节拍：{{meter}}</div>
<div class="meter">平均节拍：{{ meter }}</div>
<div class="scrollTable">
<div style="background-color: #094170">
@ -111,7 +111,7 @@ export default {
return {
linerNum: 50,
caseNum: 44,
meter:30,
meter: 30,
title: [
'工单计划',
'小时统计',
@ -160,7 +160,7 @@ export default {
}
},
mounted() {
getData().then(e=>{
getData().then(e => {
this.scrollTableData = e.table1
this.$refs.chart1.setData({
tooltip: {
@ -279,7 +279,7 @@ export default {
containLabel: true,
},
legend: {
data: e.chart2.y.map(val=>val.name),
data: e.chart2.y.map(val => val.name),
right: 'center',
top: 0,
textStyle: {
@ -594,7 +594,7 @@ export default {
text-overflow: ellipsis;
text-align: center;
display: inline-block;
width:calc(100% / 7);
width: calc(100% / 7);
}
.chart1 {
@ -638,7 +638,8 @@ export default {
color: #fff;
letter-spacing: 1px;
}
.meter{
.meter {
position: absolute;
top: 19.7%;
left: 61.5%;

4
src/views/board/foaming/index.vue
Unescape Escape View File

@ -484,8 +484,8 @@ export default {
}, 30 * 1000)
getData().then(e => {
this.scrollTableData = e.table2
this.scrollTableData1 = e.table3
this.scrollTableData2 = e.table32
this.scrollTableData1 = e.table3.slice(0,6)
this.scrollTableData2 = e.table32.slice(0,6)
this.$refs.chart1.setData({
tooltip: {
trigger: "axis",

696
src/views/board/foaming/index2.vue
Unescape Escape View File

@ -1,26 +1,23 @@
<template>
<div class="app-container">
<div class="headTitle">门体发泡可视化平台</div>
<div class="headTitle">箱、门匹配生产数据监控平台</div>
<div class="topNum planNum">{{ planNum }}</div>
<div class="topNum practicalNum">{{ practicalNum }}</div>
<div class="topNum differenceValue">{{ differenceValue }}</div>
<div class="supplementInfo">注射压力标准范围：10.0-12.0Mpa A、B组份枪头压力差＜1Mpa</div>
<div class="supplementInfo1">发泡料温度标准范围:18.0-24.0℃</div>
<div class="scrollTable">
<div style="background-color: #094170">
<div class="scrollTableItem" style="font-weight: bold;width: 20%">
型号
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 20%">
计划数
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 20%">
完成数
<div class="scrollTableItem" style="font-weight: bold;width: 33%;padding:4px 0 ">
序号
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 20%">
差异数
<div class="scrollTableItem" style="font-weight: bold;width: 33%;padding:4px 0 ">
型号
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 20%">
执行进度
<div class="scrollTableItem" style="font-weight: bold;width: 33%;padding:4px 0 ">
扫描时间
</div>
</div>
<vue-seamless-scroll
@ -32,29 +29,20 @@
<div
v-for="(item, index) in scrollTableData"
:key="index"
>
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div
class="scrollTableItem" style="width: 20%">
class="scrollTableItem" style="width: 33%;padding:4px 0 ">
{{ item.value1 }}
</div>
<div
class="scrollTableItem" style="width: 20%">
class="scrollTableItem" style="width: 33%;padding:4px 0 ">
{{ item.value2 }}
</div>
<div
class="scrollTableItem" style="width: 20%">
class="scrollTableItem" style="width: 33%;padding:4px 0 ">
{{ item.value3 }}
</div>
<div
class="scrollTableItem" style="width: 20%">
{{ item.value4 }}
</div>
<div
class="scrollTableItem" style="width: 20%">
{{ item.value5 }}
</div>
</div>
</div>
</vue-seamless-scroll>
@ -71,76 +59,539 @@
<div class="chart4">
<Chart ref="chart4"></Chart>
</div>
<div class="scrollTable1">
<div style="background-color: #094170">
<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%">
7:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
8:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
9:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
10:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
11:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
12:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
13:30
<transition name="table1">
<div class="scrollTable1" v-if="show === 0">
<div style="background-color: #094170; height: calc(25vh/11)">
<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%">
7:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
8:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
9:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
10:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
11:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
12:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
13:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
14:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
15:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
16:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
17:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
18:30
</div>
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
14:30
<!-- <vue-seamless-scroll-->
<!-- :class-option="scrollTableOption"-->
<!-- :data="scrollTableData1"-->
<!-- class="case-item"-->
<!-- style="height: 84%;overflow: hidden;"-->
<!-- >-->
<div
v-for="(item, index) in scrollTableData1"
:key="index"
style="height: calc(25vh/11)"
>
<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>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
15:30
<!-- </vue-seamless-scroll>-->
</div>
</transition>
<transition name="table1">
<div class="scrollTable1" v-if="show === 1">
<div style="background-color: #094170;height: calc(25vh/11)">
<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%">
7:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
8:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
9:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
10:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
11:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
12:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
13:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
14:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
15:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
16:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
17:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
18:30
</div>
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
16:30
<!-- <vue-seamless-scroll-->
<!-- :class-option="scrollTableOption"-->
<!-- :data="scrollTableData1"-->
<!-- class="case-item"-->
<!-- style="height: 84%;overflow: hidden;"-->
<!-- >-->
<div
v-for="(item, index) in scrollTableData2"
:key="index"
style="height: calc(25vh/11)"
>
<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>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
17:30
<!-- </vue-seamless-scroll>-->
</div>
</transition>
<transition name="table1">
<div class="scrollTable1" v-if="show === 2">
<div style="background-color: #094170; height: calc(25vh/11)">
<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%">
7:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
8:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
9:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
10:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
11:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
12:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
13:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
14:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
15:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
16:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
17:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
18:30
</div>
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
18:30
<!-- <vue-seamless-scroll-->
<!-- :class-option="scrollTableOption"-->
<!-- :data="scrollTableData1"-->
<!-- class="case-item"-->
<!-- style="height: 84%;overflow: hidden;"-->
<!-- >-->
<div
v-for="(item, index) in scrollTableData1"
:key="index"
style="height: calc(25vh/11)"
>
<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>
<vue-seamless-scroll
:class-option="scrollTableOption"
:data="scrollTableData1"
class="case-item"
style="height: 84%;overflow: hidden;"
>
</transition>
<transition name="table1">
<div class="scrollTable1" v-if="show === 3">
<div style="background-color: #094170;height: calc(25vh/11)">
<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%">
7:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
8:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
9:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
10:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
11:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
12:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
13:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
14:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
15:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
16:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
17:30
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
18:30
</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"
v-for="(item, index) in scrollTableData2"
:key="index"
style="height: calc(25vh/11)"
>
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div
@ -221,8 +672,9 @@
</div>
</div>
</div>
</vue-seamless-scroll>
</div>
<!-- </vue-seamless-scroll>-->
</div>
</transition>
<div class="total">
<div style="background-color: #094170">
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
@ -300,6 +752,7 @@ export default {
name: "Liner",
data() {
return {
show: 0,
planNum: 1000,
practicalNum: 1000,
differenceValue: 1000,
@ -315,12 +768,17 @@ export default {
},
scrollTableData: [],
scrollTableData1: [],
scrollTableData2: [],
}
},
mounted() {
getData().then(e=>{
this.scrollTableData = e.table2
let timeInter = setInterval(() => {
this.show = (this.show + 1) % 4
}, 10 * 1000)
getData().then(e => {
this.scrollTableData = e.table33
this.scrollTableData1 = e.table3
this.scrollTableData2 = e.table31
this.$refs.chart1.setData({
tooltip: {
trigger: "axis",
@ -337,7 +795,7 @@ export default {
containLabel: true,
},
legend: {
data: e.chart5.y.map(val=>val.name),
data: e.chart5.y.map(val => val.name),
right: 'center',
top: 0,
textStyle: {
@ -484,7 +942,7 @@ export default {
},
series: [
{
name: e.chart3.y.name,
name: e.chart3.y.name,
type: "bar",
barWidth: "40%",
label: {
@ -509,13 +967,13 @@ export default {
borderRadius: 3,
},
},
data: e.chart3.y.data,
data: e.chart3.y.data,
},
],
})
this.$refs.chart3.setData({
legend: {
data: e.chart6.y.map(val=>val.name),
data: e.chart6.y.map(val => val.name),
right: 'center',
top: 0,
textStyle: {
@ -563,6 +1021,7 @@ export default {
},
xAxis: [
{
show: false,
type: "category",
axisLine: {
show: true,
@ -588,8 +1047,8 @@ export default {
yAxis: [
{
type: "value",
min: 0,
// max: 140,
min: 18,
max: 24,
splitNumber: 4,
splitLine: {
show: true,
@ -616,9 +1075,7 @@ export default {
{
name: e.chart6.y[0].name,
type: "line",
// smooth: true, //是否平滑
showAllSymbol: true,
// symbol: 'image://./static/images/guang-circle.png',
symbol: "circle",
symbolSize: 5,
lineStyle: {
@ -729,7 +1186,7 @@ export default {
},
xAxis: {
type: "category",
data: e.chart7.x,
data: e.chart3.x,
axisLine: {
lineStyle: {
color: "white",
@ -759,7 +1216,7 @@ export default {
},
series: [
{
name: e.chart7.y.name,
name: e.chart3.y.name,
type: "bar",
barWidth: "33%",
label: {
@ -784,7 +1241,7 @@ export default {
borderRadius: 2,
},
},
data: e.chart7.y.data,
data: e.chart3.y.data,
},
],
})
@ -852,7 +1309,7 @@ export default {
.scrollTableItem {
color: rgb(185, 186, 192);
margin: auto 0px;
padding: 4px 0;
padding: 0 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -908,4 +1365,39 @@ export default {
width: 68%;
height: 3%;
}
.table1-enter-active {
animation: table-in .5s;
}
.table1-leave-active {
animation: table-in .5s reverse;
}
@keyframes table-in {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.supplementInfo {
position: absolute;
top: 35.5%;
left: 73.6%;
font-size: 0.7vw;
color: #fff;
}
.supplementInfo1 {
position: absolute;
top: 59%;
left: 73.6%;
font-size: 0.7vw;
color: #fff;
}
</style>

Write Preview
Loading…
Cancel
Save