You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
863 lines
23 KiB
Vue
863 lines
23 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="headTitle">箱壳前后板自动成型数据监控平台</div>
|
|
<div class="topNum team">{{ team }}</div>
|
|
<div class="topNum planNum">{{ planNum }}</div>
|
|
<div class="topNum practicalNum">{{ practicalNum }}</div>
|
|
<div class="topNum differenceValue">{{ practicalNum - planNum }}</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) + '%'">
|
|
{{ i }}
|
|
</div>
|
|
<div class="meter">平均节拍：{{ meter }} 秒/件</div>
|
|
<div class="centerBg"></div>
|
|
|
|
<div class="scrollTable">
|
|
<div style="background-color: #094170">
|
|
<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 class="scrollTableItem" style="font-weight: bold;">
|
|
生产进度
|
|
</div>
|
|
<div class="scrollTableItem" style="font-weight: bold;">
|
|
计划时间
|
|
</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" style="height: 3vh;">
|
|
<div :style='"height:100%;line-height:3vh;background-color:" + ((index % 2 === 0) ? "#053460" : "#032d57")'>
|
|
<div class="scrollTableItem">
|
|
{{ item.value1 }}
|
|
</div>
|
|
<div class="scrollTableItem">
|
|
{{ item.value2 }}
|
|
</div>
|
|
<div class="scrollTableItem" :style="'color:' + (item.value3 > 0 ? 'green' : '#0000')">
|
|
{{ item.value3 }}
|
|
</div>
|
|
<div class="scrollTableItem" :style="'color:' + (item.value32 > 0 ? 'green' : '#0000')">
|
|
{{ item.value32 }}
|
|
</div>
|
|
<div class="scrollTableItem">
|
|
{{ item.value4 }}
|
|
</div>
|
|
<div class="scrollTableItem">
|
|
{{ item.value5 }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
<div class="chart1">
|
|
<Chart ref="chart1"></Chart>
|
|
</div>
|
|
<div class="chart2">
|
|
<Chart ref="chart2"></Chart>
|
|
</div>
|
|
<div class="chart3">
|
|
<Chart ref="chart3"></Chart>
|
|
</div>
|
|
<div class="chart4">
|
|
<Chart ref="chart4"></Chart>
|
|
</div>
|
|
<div class="inventoryInfo">内胆库剩余:{{ linerNum }}% 箱壳库剩余:{{ caseNum }}%</div>
|
|
<div class="inventoryInfo2">前板总产量:{{ frontNum }} 后板总产量:{{ laterNum }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
|
import Chart from "../../../components/board/Chart";
|
|
import * as echarts from 'echarts'
|
|
import {getData} from "@/api/board/getData";
|
|
import {mixData} from "@/api/board/mixData";
|
|
|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
|
|
export default {
|
|
components: {
|
|
vueSeamlessScroll,
|
|
Chart
|
|
},
|
|
name: "Liner",
|
|
data() {
|
|
return {
|
|
linerNum: 0,
|
|
caseNum: 0,
|
|
meter: 0,
|
|
frontNum: 0,
|
|
laterNum: 0,
|
|
title: [
|
|
'生产计划',
|
|
'小时产量统计',
|
|
'壳胆库存统计',
|
|
'生产型号统计',
|
|
'箱体发泡实时状态',
|
|
],
|
|
titlePosition: [
|
|
{
|
|
top: 19.8,
|
|
left: 5.5
|
|
},
|
|
{
|
|
top: 19.8,
|
|
left: 53
|
|
},
|
|
{
|
|
top: 70.5,
|
|
left: 5.5
|
|
},
|
|
{
|
|
top: 70.5,
|
|
left: 36.7
|
|
},
|
|
{
|
|
top: 70.5,
|
|
left: 68.5
|
|
},
|
|
],
|
|
team: '',
|
|
planNum: 0,
|
|
practicalNum: 0,
|
|
scrollTableOption: {
|
|
step: 0.5, // 数值越大速度滚动越快
|
|
limitMoveNum: 9999999999999, // 开始无缝滚动的数据量 this.dataList.length
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
waitTime: 0,
|
|
},
|
|
scrollTableData: [],
|
|
RequestDataSet: [
|
|
{
|
|
e: 'xkqhb-01',
|
|
i: "",
|
|
f: (e) => {
|
|
this.team = e
|
|
}
|
|
},
|
|
{
|
|
e: 'xkqhb-02',
|
|
i: "",
|
|
f: (e) => {
|
|
this.planNum = e
|
|
}
|
|
},
|
|
{
|
|
e: 'xkqhb-03',
|
|
i: "",
|
|
f: (e) => {
|
|
this.practicalNum = e
|
|
}
|
|
},
|
|
{
|
|
e: 'xkqhb-04',
|
|
i: "",
|
|
f: (e) => {
|
|
this.scrollTableData = e
|
|
}
|
|
},
|
|
{
|
|
e: 'xkqhb-05',
|
|
i: "",
|
|
f: (e) => {
|
|
this.$refs.chart1.setData({
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
},
|
|
},
|
|
grid: {
|
|
left: "0",
|
|
right: "4%",
|
|
bottom: "0",
|
|
top: 20,
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
data: e.y.map(val => val.name),
|
|
right: 'center',
|
|
top: 0,
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
itemWidth: 12,
|
|
itemHeight: 10,
|
|
// itemGap: 35
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: e.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.y[0].name,
|
|
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, [
|
|
{
|
|
offset: 0,
|
|
color: "#39ffff",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#5affa6",
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
data: e.y[0].data,
|
|
},
|
|
{
|
|
name: e.y[1].name,
|
|
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, [
|
|
{
|
|
offset: 0,
|
|
color: "#4adfff",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#3d7aff",
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
data: e.y[1].data,
|
|
},
|
|
],
|
|
})
|
|
}
|
|
},
|
|
{
|
|
e: 'xkqhb-06',
|
|
i: "",
|
|
f: (e) => {
|
|
this.meter = e
|
|
}
|
|
},
|
|
{
|
|
e: 'xkqhb-07',
|
|
i: "SCADA_INV_STATS_01('')",
|
|
f: (e) => {
|
|
this.$refs.chart2.setData({
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
},
|
|
},
|
|
grid: {
|
|
left: "0",
|
|
right: "4%",
|
|
bottom: "0",
|
|
top: 20,
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
data: e.y.map(val => val.name),
|
|
right: 'center',
|
|
top: 0,
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
itemWidth: 12,
|
|
itemHeight: 10,
|
|
// itemGap: 35
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: e.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.y[0].name,
|
|
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, [
|
|
{
|
|
offset: 0,
|
|
color: "#0bca98",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#16a144",
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
data: e.y[0].data,
|
|
},
|
|
{
|
|
name: e.y[1].name,
|
|
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, [
|
|
{
|
|
offset: 0,
|
|
color: "#0f8ad7",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#0b30d9",
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
data: e.y[1].data,
|
|
},
|
|
],
|
|
})
|
|
}
|
|
},
|
|
{
|
|
e: 'xkqhb-08',
|
|
i: "",
|
|
f: (e) => {
|
|
this.linerNum = e
|
|
}
|
|
},
|
|
{
|
|
e: 'xkqhb-09',
|
|
i: "",
|
|
f: (e) => {
|
|
this.caseNum = e
|
|
}
|
|
},
|
|
{
|
|
e: 'xkqhb-10',
|
|
i: "",
|
|
f: (e) => {
|
|
this.$refs.chart3.setData({
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
},
|
|
},
|
|
grid: {
|
|
left: "0",
|
|
right: "4%",
|
|
bottom: "0",
|
|
top: 20,
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
data: e.y.map(val => val.name),
|
|
right: 'center',
|
|
top: 0,
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
itemWidth: 12,
|
|
itemHeight: 10,
|
|
// itemGap: 35
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: e.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.y[0].name,
|
|
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, [
|
|
{
|
|
offset: 0,
|
|
color: "#0bca98",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#16a144",
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
data: e.y[0].data,
|
|
},
|
|
{
|
|
name: e.y[1].name,
|
|
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, [
|
|
{
|
|
offset: 0,
|
|
color: "#0f8ad7",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#0b30d9",
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
data: e.y[1].data,
|
|
},
|
|
],
|
|
})
|
|
}
|
|
},
|
|
{
|
|
e: 'xkqhb-11',
|
|
i: "",
|
|
f: (e) => {
|
|
this.frontNum = e
|
|
}
|
|
},
|
|
{
|
|
e: 'xkqhb-12',
|
|
i: "",
|
|
f: (e) => {
|
|
this.laterNum = e
|
|
}
|
|
},
|
|
{
|
|
e: 'xkqhb-13',
|
|
i: "",
|
|
f: (e) => {
|
|
this.$refs.chart4.setData({
|
|
legend: {
|
|
data: ['运行中夹具数量'],
|
|
right: 'center',
|
|
top: 0,
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
itemWidth: 12,
|
|
itemHeight: 10,
|
|
// itemGap: 35
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
},
|
|
},
|
|
grid: {
|
|
left: "0",
|
|
right: "4%",
|
|
bottom: "0",
|
|
top: 20,
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: e.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.y.name,
|
|
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, [
|
|
{
|
|
offset: 0,
|
|
color: "#4adfff",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#3d7aff",
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
data: e.y.data,
|
|
}
|
|
]
|
|
})
|
|
}
|
|
},
|
|
]
|
|
|
|
}
|
|
},
|
|
mounted() {
|
|
this.RequestDataSet.forEach(val => {
|
|
mixData(val)
|
|
})
|
|
},
|
|
methods: {}
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.app-container {
|
|
background-image: url("../../../assets/board/caseShell2.jpg");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.headTitle {
|
|
position: absolute;
|
|
top: 5%;
|
|
left: 50%;
|
|
transform: translate(-50%, -100%);
|
|
font-size: 1.5vw;
|
|
color: #d6eaed;
|
|
letter-spacing: 10px;
|
|
}
|
|
|
|
.title {
|
|
position: absolute;
|
|
transform: translateY(-50%);
|
|
color: #dddddd;
|
|
font-size: 1vw;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.topNum {
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
color: #5db9e8;
|
|
top: 11.7%;
|
|
letter-spacing: 0.5vw;
|
|
}
|
|
|
|
.team {
|
|
font-size: 1.5vw;
|
|
left: 16.8%;
|
|
}
|
|
|
|
.planNum {
|
|
font-size: 1.7vw;
|
|
left: 41.2%;
|
|
}
|
|
|
|
.practicalNum {
|
|
left: 66.2%;
|
|
font-size: 1.7vw;
|
|
}
|
|
|
|
.differenceValue {
|
|
font-size: 1.7vw;
|
|
left: 90.7%;
|
|
}
|
|
|
|
.scrollTable {
|
|
position: absolute;
|
|
top: 23%;
|
|
left: 4%;
|
|
width: 45%;
|
|
height: 18%;
|
|
}
|
|
|
|
|
|
.scrollTableItem {
|
|
color: rgb(185, 186, 192);
|
|
margin: auto 0px;
|
|
padding: 4px 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-align: center;
|
|
display: inline-block;
|
|
width: calc(100% / 6);
|
|
}
|
|
|
|
.chart1 {
|
|
position: absolute;
|
|
top: 23%;
|
|
left: 51%;
|
|
width: 45%;
|
|
height: 18.5%;
|
|
}
|
|
|
|
.chart2 {
|
|
position: absolute;
|
|
top: 74%;
|
|
left: 3.6%;
|
|
width: 29.8%;
|
|
height: 20.7%;
|
|
}
|
|
|
|
.chart3 {
|
|
position: absolute;
|
|
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: 70.4%;
|
|
left: 13.7%;
|
|
color: #fff;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.inventoryInfo2 {
|
|
position: absolute;
|
|
transform: translateY(-50%);
|
|
font-size: 0.9vw;
|
|
top: 70.4%;
|
|
left: 45%;
|
|
color: #fff;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.meter {
|
|
position: absolute;
|
|
top: 19.7%;
|
|
left: 62.2%;
|
|
transform: translateY(-50%);
|
|
font-size: 0.9vw;
|
|
color: #fff;
|
|
}
|
|
|
|
.centerBg {
|
|
background-image: url("../../../assets/board/model2.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
top: 54.5%;
|
|
left: 49%;
|
|
width: 90%;
|
|
height: 22%;
|
|
}
|
|
</style>
|