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.
562 lines
14 KiB
Vue
562 lines
14 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="headTitle">总装生产数据监控平台</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="title1">班组</div>
|
|
<div class="title2">上线数量</div>
|
|
|
|
<div class="nowClass">{{ info1.X_VALUE }}</div>
|
|
<div class="num">{{ info1.Y_VALUE }}</div>
|
|
|
|
<div class="info1Title">产品条码： <span style="color: #697bbb"> {{ info.COLUMN_A }} </span></div>
|
|
<div class="info2Title">扫描时间： <span style="color: #697bbb"> {{ info.COLUMN_E }} </span></div>
|
|
<div class="info3Title">产品型号： <span style="color: #697bbb"> {{ info.COLUMN_B }} </span></div>
|
|
<div class="info4Title">订单编号： <span style="color: #697bbb"> {{ info.COLUMN_F }} </span></div>
|
|
<div class="info5Title">订单数量： <span style="color: #697bbb"> {{ info.COLUMN_C }} </span></div>
|
|
<div class="info6Title">上线数量： <span style="color: #697bbb"> {{ info.COLUMN_G }} </span></div>
|
|
<div class="info7Title">提示信息： <span style="color: #0fbc7b"> {{ info.COLUMN_D }} </span></div>
|
|
|
|
<div class="scrollTable">
|
|
<div style="background-color: #094170">
|
|
<div class="scrollTableItem" style="font-weight: bold;width:5%">
|
|
序号
|
|
</div>
|
|
<div class="scrollTableItem" style="font-weight: bold;width:15%">
|
|
订单号
|
|
</div>
|
|
<div class="scrollTableItem" style="font-weight: bold;width:17.5%">
|
|
产品型号
|
|
</div>
|
|
<div class="scrollTableItem" style="font-weight: bold;width:12.5%">
|
|
订单数量
|
|
</div>
|
|
<div class="scrollTableItem" style="font-weight: bold;width:12.5%">
|
|
订单上线数量
|
|
</div>
|
|
<div class="scrollTableItem" style="font-weight: bold;width:12.5%">
|
|
当日上线数量
|
|
</div>
|
|
<div class="scrollTableItem" style="font-weight: bold;width:12.5%">
|
|
上线进度
|
|
</div>
|
|
<div class="scrollTableItem" style="font-weight: bold;width:12.5%">
|
|
计划时间
|
|
</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:5%">
|
|
{{ item.COLUMN_A }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width:15%">
|
|
{{ item.COLUMN_B }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width:17.5%">
|
|
{{ item.COLUMN_C }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width:12.5%">
|
|
{{ item.COLUMN_D }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width:12.5%">
|
|
{{ item.COLUMN_E }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width:12.5%">
|
|
{{ item.COLUMN_F }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width:12.5%">
|
|
{{ item.COLUMN_G }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width:12.5%">
|
|
{{ item.COLUMN_H }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
|
|
<div class="chart1">
|
|
<Chart ref="chart1"></Chart>
|
|
</div>
|
|
<div class="chart2">
|
|
<Chart ref="chart2"></Chart>
|
|
</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";
|
|
let intervalFun = null
|
|
export default {
|
|
components: {
|
|
vueSeamlessScroll,
|
|
Chart
|
|
},
|
|
name: "Liner",
|
|
data() {
|
|
return {
|
|
title: [
|
|
'总装上线小时统计',
|
|
'总装上线型号统计',
|
|
'生产统计',
|
|
],
|
|
titlePosition: [
|
|
{
|
|
top: 31.3,
|
|
left: 5.5
|
|
},
|
|
{
|
|
top: 31.3,
|
|
left: 52.8
|
|
},
|
|
{
|
|
top: 62.2,
|
|
left: 5.5
|
|
},
|
|
],
|
|
info: {},
|
|
info1: {},
|
|
scrollTableOption: {
|
|
step: 0.5, // 数值越大速度滚动越快
|
|
limitMoveNum: 10, // 开始无缝滚动的数据量 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: 'zzsc-01',
|
|
i: "scada_zz_scan_bar_01('CX_01')",
|
|
f: (e) => {
|
|
this.info = e[0]
|
|
}
|
|
},
|
|
{
|
|
e: 'zzsc-02',
|
|
i: "scada_zz_sx_hour_01('CX_01')",
|
|
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,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: e.map(v=>v.X_VALUE),
|
|
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: "数量",
|
|
type: "bar",
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
formatter: (e) => {
|
|
if (e.data === 0) {
|
|
return ''
|
|
} else {
|
|
return e.data
|
|
}
|
|
},
|
|
fontSize: 12,
|
|
fontWeight: "bold",
|
|
color: "#ffffff",
|
|
position: "top",
|
|
},
|
|
},
|
|
barWidth: "30%",
|
|
barMaxWidth: 50,
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: "#0bca98",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#16a144",
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
data: e.map(v=>v.Y_VALUE),
|
|
},
|
|
],
|
|
})
|
|
}
|
|
},
|
|
{
|
|
e: 'zzsc-03',
|
|
i: "scada_zz_sx_xh_01('CX_01')",
|
|
f: (e) => {
|
|
this.$refs.chart2.setData({
|
|
grid: {
|
|
left: "0",
|
|
right: "4%",
|
|
bottom: '2%',
|
|
top: "10%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
data: e.map(v=>v.X_VALUE),
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#3d5269",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
color: "#fff",
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
yAxis: {
|
|
nameTextStyle: {
|
|
color: "#fff",
|
|
fontSize: 16,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#3d5269",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#fff",
|
|
fontSize: 10,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#2d3d53",
|
|
},
|
|
},
|
|
interval: 500,
|
|
},
|
|
series: [
|
|
{
|
|
type: "bar",
|
|
barWidth: '40%',
|
|
barMaxWidth: 50,
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "#5ef3ff",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#06a4f4",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
fontSize: 12,
|
|
fontWeight: "bold",
|
|
color: "#ffffff",
|
|
position: "top",
|
|
},
|
|
},
|
|
data: e.map(v=>v.Y_VALUE),
|
|
},
|
|
],
|
|
})
|
|
}
|
|
},
|
|
{
|
|
e: 'zzsc-04',
|
|
i: "scada_zz_sc_tj_01('CX_01')",
|
|
f: (e) => {
|
|
this.scrollTableData = e
|
|
}
|
|
},
|
|
{
|
|
e: 'zzsc-05',
|
|
i: "scada_zz_bz_sum_01('CX_01')",
|
|
f: (e) => {
|
|
this.info1 = e[0] || {}
|
|
}
|
|
},
|
|
]
|
|
|
|
}
|
|
},
|
|
mounted() {
|
|
this.RequestDataSet.forEach(val => {
|
|
mixData(val)
|
|
})
|
|
intervalFun = setInterval(() => {
|
|
this.RequestDataSet.forEach(val => {
|
|
mixData(val)
|
|
})
|
|
}, 1000 * 10)
|
|
},
|
|
methods: {},
|
|
beforeDestroy() {
|
|
if(intervalFun){
|
|
clearInterval(intervalFun)
|
|
intervalFun = null
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.app-container {
|
|
background-image: url("../../../assets/board/finalAssembly.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;
|
|
}
|
|
|
|
|
|
.scrollTable {
|
|
position: absolute;
|
|
top: 66%;
|
|
left: 3.7%;
|
|
width: 92.5%;
|
|
height: 30%;
|
|
}
|
|
|
|
|
|
.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% / 8);
|
|
}
|
|
|
|
.chart1 {
|
|
position: absolute;
|
|
top: 34.5%;
|
|
left: 3.6%;
|
|
width: 45.5%;
|
|
height: 22.5%;
|
|
}
|
|
|
|
.chart2 {
|
|
position: absolute;
|
|
top: 34.5%;
|
|
left: 51%;
|
|
width: 45.5%;
|
|
height: 22.5%;
|
|
}
|
|
|
|
.title1 {
|
|
position: absolute;
|
|
top: 12.1%;
|
|
left: 11.3%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 1.2vw;
|
|
color: #d6eaed;
|
|
}
|
|
|
|
.title2 {
|
|
position: absolute;
|
|
top: 12.1%;
|
|
left: 88.5%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 1.2vw;
|
|
color: #d6eaed;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nowClass {
|
|
position: absolute;
|
|
top: 21%;
|
|
left: 11.3%;
|
|
font-size: 1.8vw;
|
|
letter-spacing: 4px;
|
|
transform: translate(-50%, -50%);
|
|
color: #d6eaed;
|
|
}
|
|
|
|
.num {
|
|
position: absolute;
|
|
top: 21%;
|
|
left: 88.5%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 3.6vw;
|
|
letter-spacing: 4px;
|
|
color: #d6eaed;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.info1Title {
|
|
position: absolute;
|
|
top: 11.1%;
|
|
left: 23%;
|
|
width: 24%;
|
|
font-size: 1.2vw;
|
|
color: #fff9;
|
|
text-align: left;
|
|
}
|
|
|
|
|
|
.info2Title {
|
|
position: absolute;
|
|
top: 11.1%;
|
|
left: 52.7%;
|
|
width: 24%;
|
|
font-size: 1.2vw;
|
|
color: #fff9;
|
|
text-align: left;
|
|
}
|
|
|
|
|
|
.info3Title {
|
|
position: absolute;
|
|
top: 14.8%;
|
|
left: 23%;
|
|
width: 24%;
|
|
font-size: 1.2vw;
|
|
color: #fff9;
|
|
text-align: left;
|
|
}
|
|
|
|
|
|
.info4Title {
|
|
position: absolute;
|
|
top: 14.8%;
|
|
left: 52.7%;
|
|
width: 24%;
|
|
font-size: 1.2vw;
|
|
color: #fff9;
|
|
text-align: left;
|
|
}
|
|
|
|
|
|
.info5Title {
|
|
position: absolute;
|
|
top: 18.4%;
|
|
left: 23%;
|
|
width: 24%;
|
|
font-size: 1.2vw;
|
|
color: #fff9;
|
|
text-align: left;
|
|
}
|
|
|
|
.info6Title {
|
|
position: absolute;
|
|
top: 18.3%;
|
|
left: 52.7%;
|
|
width: 24%;
|
|
font-size: 1.2vw;
|
|
color: #fff9;
|
|
text-align: left;
|
|
}
|
|
|
|
|
|
.info7Title {
|
|
position: absolute;
|
|
top: 22%;
|
|
left: 23%;
|
|
width: 24%;
|
|
font-size: 1.2vw;
|
|
color: #fff9;
|
|
text-align: left;
|
|
}
|
|
|
|
</style>
|