yinq 10 months ago
commit fcd76832be

@ -1645,7 +1645,7 @@
],
"y": [
{
"name": "前板入库数量",
"name": "前板数量",
"data": [
100,
300,
@ -1660,7 +1660,7 @@
]
},
{
"name": "后板入库数量",
"name": "后板数量",
"data": [
754,
157,

@ -5,8 +5,8 @@
<div class="topNum planNum">{{ planNum }}</div>
<div class="topNum practicalNum">{{ practicalNum }}</div>
<div class="topNum differenceValue">{{ differenceValue }}</div>
<div class="title" v-for="(i,k) in title"
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
<div class="title" v-for="(i, k) in title"
:style="'top:' + (titlePosition[k] && titlePosition[k].top || 0) + '%;left:' + (titlePosition[k] && titlePosition[k].left || 0) + '%'">
{{ i }}
</div>
<div class="meter">平均节拍{{ meter }}</div>
@ -19,9 +19,6 @@
<div class="scrollTableItem" style="font-weight: bold;">
产品型号
</div>
<div class="scrollTableItem" style="font-weight: bold;">
计划数量
</div>
<div class="scrollTableItem" style="font-weight: bold;">
前板计划
</div>
@ -35,44 +32,26 @@
计划时间
</div>
</div>
<vue-seamless-scroll
:class-option="scrollTableOption"
:data="scrollTableData"
class="case-item"
style="height: 84%;overflow: hidden;"
>
<div
v-for="(item, index) in scrollTableData"
:key="index"
>
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div
class="scrollTableItem">
<vue-seamless-scroll :class-option="scrollTableOption" :data="scrollTableData" class="case-item"
style="height: 84%;overflow: hidden;">
<div v-for="(item, index) in scrollTableData" :key="index">
<div :style='"background-color:" + ((index % 2 === 0) ? "#053460" : "#032d57")'>
<div class="scrollTableItem">
{{ item.value1 }}
</div>
<div
class="scrollTableItem">
<div class="scrollTableItem">
{{ item.value2 }}
</div>
<div
class="scrollTableItem">
{{ item.value31 }}
</div>
<div
class="scrollTableItem" :style="'color:'+(item.value3>0?'green':'#0000')">
<div class="scrollTableItem" :style="'color:' + (item.value3 > 0 ? 'green' : '#0000')">
{{ item.value3 }}
</div>
<div
class="scrollTableItem" :style="'color:'+(item.value32>0?'green':'#0000')">
<div class="scrollTableItem" :style="'color:' + (item.value32 > 0 ? 'green' : '#0000')">
{{ item.value32 }}
</div>
<div
class="scrollTableItem">
<div class="scrollTableItem">
{{ item.value4 }}
</div>
<div
class="scrollTableItem">
<div class="scrollTableItem">
{{ item.value5 }}
</div>
</div>
@ -100,7 +79,7 @@
import vueSeamlessScroll from "vue-seamless-scroll";
import Chart from "../../../components/board/Chart";
import * as echarts from 'echarts'
import {getData} from "@/api/board/getData";
import { getData } from "@/api/board/getData";
export default {
components: {
@ -116,7 +95,7 @@ export default {
frontNum: 100,
laterNum: 100,
title: [
'工单计划',
'生成计划',
'小时产量统计',
'壳胆库存统计',
'生产型号统计',
@ -163,6 +142,7 @@ export default {
}
},
mounted() {
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
getData().then(e => {
this.scrollTableData = e.caseShell2.table1
this.$refs.chart1.setData({
@ -227,6 +207,18 @@ export default {
type: "bar",
barWidth: "30%",
barMaxWidth: 50,
label: {
normal: {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -248,6 +240,18 @@ export default {
type: "bar",
barWidth: "30%",
barMaxWidth: 50,
label: {
normal: {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -328,6 +332,18 @@ export default {
type: "bar",
barWidth: "30%",
barMaxWidth: 50,
label: {
normal: {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -349,6 +365,18 @@ export default {
type: "bar",
barWidth: "30%",
barMaxWidth: 50,
label: {
normal: {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -429,6 +457,18 @@ export default {
type: "bar",
barWidth: "30%",
barMaxWidth: 50,
label: {
normal: {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -450,6 +490,18 @@ export default {
type: "bar",
barWidth: "30%",
barMaxWidth: 50,
label: {
normal: {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -530,6 +582,18 @@ export default {
type: "bar",
barWidth: '30%',
barMaxWidth: 50,
label: {
normal: {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -629,7 +693,7 @@ export default {
text-overflow: ellipsis;
text-align: center;
display: inline-block;
width: calc(100% / 7);
width: calc(100% / 6);
}
.chart1 {
@ -673,7 +737,8 @@ export default {
color: #fff;
letter-spacing: 1px;
}
.inventoryInfo2{
.inventoryInfo2 {
position: absolute;
transform: translateY(-50%);
font-size: 0.9vw;

@ -1,6 +1,6 @@
<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>

@ -7,6 +7,14 @@
<div class="supplementInfo">注射压力标准范围10.0-12.0Mpa AB组份枪头压力差1Mpa</div>
<div class="supplementInfo1">发泡料温度标准范围:18.0-24.0</div>
<div style="position: absolute;top: 62%; left: 16%;color:#FFF">正在生产 <div
style="width: 12px;height: 12px;background-color: #5dfd36;display: inline-block;border-radius: 50%;">
</div> 停机<div
style="width: 12px;height: 12px;background-color: #ffffff88;display: inline-block;border-radius: 50%;"></div>
注料位置台车<div style="width: 12px;height: 12px;background-color: #ff0000;display: inline-block;border-radius: 50%;">
</div> 出模位置台车<div
style="width: 12px;height: 12px;background-color: #FF8000;display: inline-block;border-radius: 50%;"></div>
</div>
<div class="scrollTable">
<div style="background-color: #094170">
@ -20,27 +28,17 @@
扫描时间
</div>
</div>
<vue-seamless-scroll
:class-option="scrollTableOption"
:data="scrollTableData"
class="case-item"
style="height: 84%;overflow: hidden;"
>
<div
v-for="(item, index) in scrollTableData"
:key="index"
>
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div
class="scrollTableItem" style="width: 33%;padding:4px 0 ">
<vue-seamless-scroll :class-option="scrollTableOption" :data="scrollTableData" class="case-item"
style="height: 84%;overflow: hidden;">
<div v-for="(item, index) in scrollTableData" :key="index">
<div :style='"background-color:" + ((index % 2 === 0) ? "#053460" : "#032d57")'>
<div class="scrollTableItem" style="width: 33%;padding:4px 0 ">
{{ item.value1 }}
</div>
<div
class="scrollTableItem" style="width: 33%;padding:4px 0 ">
<div class="scrollTableItem" style="width: 33%;padding:4px 0 ">
{{ item.value2 }}
</div>
<div
class="scrollTableItem" style="width: 33%;padding:4px 0 ">
<div class="scrollTableItem" style="width: 33%;padding:4px 0 ">
{{ item.value3 }}
</div>
</div>
@ -743,10 +741,11 @@
<div style="width: 33%;display: inline-block">型号</div>
<div style="width: 33%;display: inline-block">产量</div>
</div>
<div v-for="i in 10" style="height: 9%;color: #000;text-align: center;background-color:#5dfd36 ">
<div style="width: 33%;display: inline-block">{{ i }}#</div>
<div v-for="i in 10"
:style="'height: 9%;color: #000;text-align: center;background-color:' + (i === 2 ? '#ffffff88' : '#5dfd36')">
<div style="width: 33%;display: inline-block">{{ i }}</div>
<div style="width: 33%;display: inline-block">487JFY</div>
<div style="width: 33%;display: inline-block">15-15-15</div>
<div style="width: 33%;display: inline-block">15-15</div>
</div>
</div>
<div class="tableTwo">
@ -755,10 +754,11 @@
<div style="width: 33%;display: inline-block">型号</div>
<div style="width: 33%;display: inline-block">产量</div>
</div>
<div v-for="i in 10" style="height: 9%;color: #000;text-align: center;background-color:#5dfd36 ">
<div style="width: 33%;display: inline-block">{{ i }}#</div>
<div v-for="i in 10"
:style="'height: 9%;color: #000;text-align: center;background-color:' + (i === 2 ? '#ff0000' : '#5dfd36')">
<div style="width: 33%;display: inline-block">{{ i }}</div>
<div style="width: 33%;display: inline-block">487JFY</div>
<div style="width: 33%;display: inline-block">15-15-15</div>
<div style="width: 33%;display: inline-block">15-15</div>
</div>
</div>
<div class="tableThree">
@ -767,10 +767,11 @@
<div style="width: 33%;display: inline-block">型号</div>
<div style="width: 33%;display: inline-block">产量</div>
</div>
<div v-for="i in 10" style="height: 9%;color: #000;text-align: center;background-color:#5dfd36 ">
<div style="width: 33%;display: inline-block">{{ i }}#</div>
<div v-for="i in 10"
:style="'height: 9%;color: #000;text-align: center;background-color:' + (i === 2 ? '#FF8000' : '#5dfd36')">
<div style="width: 33%;display: inline-block">{{ i }}</div>
<div style="width: 33%;display: inline-block">487JFY</div>
<div style="width: 33%;display: inline-block">15-15-15</div>
<div style="width: 33%;display: inline-block">15-15</div>
</div>
</div>
<div class="tableFour">
@ -779,10 +780,11 @@
<div style="width: 33%;display: inline-block">型号</div>
<div style="width: 33%;display: inline-block">产量</div>
</div>
<div v-for="i in 10" style="height: 9%;color: #000;text-align: center;background-color:#5dfd36 ">
<div style="width: 33%;display: inline-block">{{ i }}#</div>
<div v-for="i in 10"
:style="'height: 9%;color: #000;text-align: center;background-color:' + (i === 2 ? '#ffffff88' : '#5dfd36')">
<div style="width: 33%;display: inline-block">{{ i }}</div>
<div style="width: 33%;display: inline-block">487JFY</div>
<div style="width: 33%;display: inline-block">15-15-15</div>
<div style="width: 33%;display: inline-block">15-15</div>
</div>
</div>
</div>
@ -792,7 +794,7 @@
import vueSeamlessScroll from "vue-seamless-scroll";
import Chart from "../../../components/board/Chart";
import * as echarts from 'echarts'
import {getData} from "@/api/board/getData";
import { getData } from "@/api/board/getData";
export default {
components: {
@ -1250,7 +1252,6 @@ export default {
},
},
},
yAxis: {
type: "value",
axisLine: {
@ -1429,6 +1430,7 @@ export default {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);

@ -26,18 +26,21 @@
<div class="scrollTableItem" style="font-weight: bold;">
编号
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 33.3%">
<div class="scrollTableItem" style="font-weight: bold;width: 28%">
型号
</div>
<div class="scrollTableItem" style="font-weight: bold;">
计划数量
订单数
</div>
<div class="scrollTableItem" style="font-weight: bold;">
完成数
完成数
</div>
<div class="scrollTableItem" style="font-weight: bold;">
差异值
</div>
<div class="scrollTableItem" style="font-weight: bold;">
清单率
</div>
</div>
<vue-seamless-scroll
:class-option="scrollTableOption"
@ -56,7 +59,7 @@
{{ item.value1 }}
</div>
<div
class="scrollTableItem" style="width: 33.3%">
class="scrollTableItem" style="width: 28%">
A-{{ item.value2 }}
</div>
<div
@ -71,6 +74,10 @@
class="scrollTableItem">
{{ item.value5 }}
</div>
<div
class="scrollTableItem">
{{ item.value6 }}
</div>
</div>
</div>
</vue-seamless-scroll>
@ -146,7 +153,7 @@ export default {
'三日订单执行情况',
'班组 6s 排行榜',
'周生产型号统计',
'重点工序监控',
'质检工序监控',
'安全生产',
],
totalNum: 10000,
@ -1172,7 +1179,7 @@ export default {
text-overflow: ellipsis;
text-align: center;
display: inline-block;
width: 16.6%;
width: calc(100% / 7);
}
.totalNum {

Loading…
Cancel
Save