yinq 2 years ago
commit c5f59d2984

@ -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",

Binary file not shown.

After

Width:  |  Height:  |  Size: 849 KiB

@ -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">
@ -88,6 +88,9 @@
<div class="chart3">
<Chart ref="chart3"></Chart>
</div>
<div class="chart4">
<Chart ref="chart4"></Chart>
</div>
<div class="inventoryInfo">内胆库剩余:{{ linerNum }}% 箱壳库剩余:{{ caseNum }}%</div>
</div>
</template>
@ -108,11 +111,12 @@ export default {
return {
linerNum: 50,
caseNum: 44,
meter:30,
meter: 30,
title: [
'工单计划',
'小时统计',
'库存统计',
'型号统计',
'发泡夹具状态',
],
titlePosition: [
@ -125,12 +129,16 @@ export default {
left: 53
},
{
top: 60,
top: 70.5,
left: 5.5
},
{
top: 60,
left: 53
top: 70.5,
left: 36.7
},
{
top: 70.5,
left: 68.5
},
],
team: '白班',
@ -152,7 +160,7 @@ export default {
}
},
mounted() {
getData().then(e=>{
getData().then(e => {
this.scrollTableData = e.table1
this.$refs.chart1.setData({
tooltip: {
@ -271,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: {
@ -357,6 +365,75 @@ export default {
],
})
this.$refs.chart3.setData({
tooltip: {
trigger: "axis",
axisPointer: {
//
type: "shadow", // 线'line' | 'shadow'
},
},
grid: {
left: "0",
right: "4%",
bottom: "0",
top: 20,
containLabel: true,
},
xAxis: {
type: "category",
data: e.liner.inventoryStatistics.x,
axisLine: {
lineStyle: {
color: "white",
},
},
axisLabel: {
// interval: 0,
// rotate: 40,
textStyle: {
fontFamily: "Microsoft YaHei",
},
},
},
yAxis: {
type: "value",
axisLine: {
show: false,
lineStyle: {
color: "white",
},
},
splitLine: {
show: false,
},
axisLabel: {},
},
series: [
{
name: e.liner.inventoryStatistics.y.name,
type: "bar",
barWidth: "30%",
barMaxWidth: 50,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#4adfff",
},
{
offset: 1,
color: "#3d7aff",
},
]),
},
},
data: e.liner.inventoryStatistics.y.data,
},
],
})
this.$refs.chart4.setData({
legend: {
data: ['运行中'],
right: 'center',
@ -443,7 +520,7 @@ export default {
</script>
<style scoped>
.app-container {
background-image: url("../../../assets/board/caseShell.jpg");
background-image: url("../../../assets/board/caseShell2.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
@ -504,7 +581,7 @@ export default {
top: 23%;
left: 4%;
width: 45%;
height: 31%
height: 18%;
}
@ -517,43 +594,52 @@ export default {
text-overflow: ellipsis;
text-align: center;
display: inline-block;
width:calc(100% / 7);
width: calc(100% / 7);
}
.chart1 {
position: absolute;
top: 23.5%;
top: 23%;
left: 51%;
width: 45%;
height: 31%;
height: 18.5%;
}
.chart2 {
position: absolute;
top: 64%;
top: 74%;
left: 3.6%;
width: 45.5%;
height: 30.7%;
width: 29.8%;
height: 20.7%;
}
.chart3 {
position: absolute;
top: 64%;
left: 51%;
width: 45.5%;
height: 30.7%;
top: 74%;
left: 35%;
width: 30%;
height: 20.7%;
}
.chart4 {
position: absolute;
top: 74%;
left: 66.5%;
width: 30%;
height: 20.7%;
}
.inventoryInfo {
position: absolute;
transform: translateY(-50%);
font-size: 0.9vw;
top: 59.6%;
top: 70.4%;
left: 13.7%;
color: #fff;
letter-spacing: 1px;
}
.meter{
.meter {
position: absolute;
top: 19.7%;
left: 61.5%;

@ -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",

@ -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 AB组份枪头压力差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 class="scrollTableItem" style="font-weight: bold;width: 33%;padding:4px 0 ">
序号
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 33%;padding:4px 0 ">
型号
</div>
<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>
<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,77 @@
<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%">
工位
<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: 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;"
>
<!-- <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
@ -221,8 +210,471 @@
</div>
</div>
</div>
</vue-seamless-scroll>
</div>
<!-- </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>
<!-- <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>
<!-- </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>
<!-- <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>
</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 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>
<!-- </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>

@ -98,6 +98,9 @@
<div class="equipmentPowerFive" id="equipmentPowerFive">
<Chart ref="equipmentPowerFive"></Chart>
</div>
<div class="equipmentPowerSix" id="equipmentPowerSix">
<Chart ref="equipmentPowerSix"></Chart>
</div>
<div class="topLeft" id="topLeft">
@ -915,7 +918,7 @@ export default {
"{a|" +
params.value +
"%}" +
"\n{b|终检}"
"\n{b|测温}"
);
},
position: "center",
@ -951,6 +954,85 @@ export default {
},
],
})
this.$refs.equipmentPowerSix.setData({
series: [
{
type: "pie",
clockWise: false,
radius: ['60%', '75%'],
itemStyle: {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
},
shadowBlur: 0,
shadowColor: "#5d73ff",
},
},
hoverAnimation: false,
center: ["50%", "50%"],
data: [
{
value: 50,
label: {
normal: {
rich: {
a: {
color: "#5d73ff",
align: "center",
fontSize: 1.1 * vw,
fontWeight: "bold",
},
b: {
color: "#fff",
align: "center",
fontSize: 0.5 * vw,
},
},
formatter: function (params) {
return (
"{a|" +
params.value +
"%}" +
"\n{b|终检}"
);
},
position: "center",
show: true,
textStyle: {
fontSize: "14",
fontWeight: "normal",
color: "#fff",
},
},
},
itemStyle: {
normal: {
color: "#5d73ff",
shadowColor: "#5d73ff",
shadowBlur: 0,
},
},
},
{
value: 50,
name: "invisible",
itemStyle: {
normal: {
color: "#412a4e",
},
emphasis: {
color: "#412a4e",
},
},
},
],
},
],
})
this.day()
},
methods: {
@ -1059,7 +1141,7 @@ export default {
.equipmentPowerFour {
position: absolute;
width: 19%;
width: 13%;
height: 16%;
top: 76%;
left: 30.5%;
@ -1067,10 +1149,18 @@ export default {
.equipmentPowerFive {
position: absolute;
width: 19%;
width: 13%;
height: 16%;
top: 76%;
left: 49.5%;
left: 43.5%;
}
.equipmentPowerSix {
position: absolute;
width: 13%;
height: 16%;
top: 76%;
left: 56.5%;
}
.scrollTableItem {

@ -109,24 +109,28 @@ export default {
appsecret: 'rXmhoLAiOPNKzbl7g2qxCV8tFwRdYuZM'
}
const viewer = new AMRT.Viewer('container', param)
console.log(AMRT)
console.log(viewer)
console.log(viewer.core)
console.log(viewer.core?.Object3D)
// const gui = new dat.GUI()
// console.log(gui)
let num = 0
let modelArr = [
// '1720315475507941376',
// '1720315479907766272',
// '1720315484513112064',
// '1720315500866703360',
// '1720315558030872576',
// '1720315596551360512',
// '1720315644550975488',
// '1720315648946606080',
// '1720315687114772480',
// '1720315691422322688',
// '1720315722275622912',
// '1720315729129115648',
// '1720315768454909952',
// '1720316275214913536',
// '1720316297822212096',
'1720315475507941376',
'1720315479907766272',
'1720315484513112064',
'1720315500866703360',
'1720315558030872576',
'1720315596551360512',
'1720315644550975488',
'1720315648946606080',
'1720315687114772480',
'1720315691422322688',
'1720315722275622912',
'1720315729129115648',
'1720315768454909952',
'1720316275214913536',
'1720316297822212096',
]
modelArr.forEach(e => {
let model = viewer.loadModel(e, {
@ -139,21 +143,30 @@ export default {
alert('加载完成');
}
m.on('click', function () {
// console.log(this)
// console.log(m)
// let clickModel = model.getObjectById(this)
// console.log(clickModel)
// alert(`${e}`)
// viewer.operator.restore()
// viewer.operator.translucenceOthers(this.viewer)
console.log(m)
console.log(e)
console.log(m.getObjectById)
})
}
})
})
// viewer.container.addEventListener( 'click', e => {
// //
// let object = viewer.picker.intersectObject( e )
// if( object ){
// console.log( '', object.object )
// viewer.operator.restore()
// viewer.operator.translucenceOthers(object)
// viewer.operator.translucenceOthers(object.object)
// }
// })
viewer.controls.setTarget(26.3, -19.8, -82)
viewer.controls.setPosition(31, 1721, 584)
viewer.operator.enabled = true
//
viewer.sceneManager.setLightness(1)
// viewer.controls.startAutoRotate(1)
},
methods: {

Loading…
Cancel
Save