夜笙歌 10 months ago
parent 2f69b7311a
commit 095bbf530c

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

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

@ -1,6 +1,6 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="headTitle">箱壳发泡可视化平台</div> <div class="headTitle">箱壳发泡生产数据监控平台</div>
<div class="topNum planNum">{{ planNum }}</div> <div class="topNum planNum">{{ planNum }}</div>
<div class="topNum practicalNum">{{ practicalNum }}</div> <div class="topNum practicalNum">{{ practicalNum }}</div>
<div class="topNum differenceValue">{{ differenceValue }}</div> <div class="topNum differenceValue">{{ differenceValue }}</div>

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

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

Loading…
Cancel
Save