|
|
<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="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;">
|
|
|
R1348
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;">
|
|
|
R1348
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;">
|
|
|
R6000
|
|
|
</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"
|
|
|
|
|
|
>
|
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
|
|
|
<div
|
|
|
class="scrollTableItem">
|
|
|
{{ item.value1 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem">
|
|
|
{{ item.value2 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem">
|
|
|
{{ item.value3 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem">
|
|
|
{{ item.value4 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem">
|
|
|
{{ item.value5 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem">
|
|
|
{{ item.value6 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem">
|
|
|
{{ item.value7 }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</vue-seamless-scroll>
|
|
|
</div>
|
|
|
<div class="chart11">
|
|
|
<Chart ref="chart11"></Chart>
|
|
|
</div>
|
|
|
<div class="chart12">
|
|
|
<Chart ref="chart12"></Chart>
|
|
|
</div>
|
|
|
<div class="chart13">
|
|
|
<Chart ref="chart13"></Chart>
|
|
|
</div>
|
|
|
<div class="chart14">
|
|
|
<Chart ref="chart14"></Chart>
|
|
|
</div>
|
|
|
<div class="chart15">
|
|
|
<Chart ref="chart15"></Chart>
|
|
|
</div>
|
|
|
<div class="chart16">
|
|
|
<Chart ref="chart16"></Chart>
|
|
|
</div>
|
|
|
<div class="chart2">
|
|
|
<Chart ref="chart2"></Chart>
|
|
|
</div>
|
|
|
<div class="chart3">
|
|
|
<Chart ref="chart3"></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";
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
vueSeamlessScroll,
|
|
|
Chart
|
|
|
},
|
|
|
name: "Liner",
|
|
|
data() {
|
|
|
return {
|
|
|
title: [
|
|
|
'工单计划',
|
|
|
'小时统计',
|
|
|
'异常TOP',
|
|
|
'合格率统计',
|
|
|
],
|
|
|
titlePosition: [
|
|
|
{
|
|
|
top: 11.6,
|
|
|
left: 5.5
|
|
|
},
|
|
|
{
|
|
|
top: 11.6,
|
|
|
left: 52.7
|
|
|
},
|
|
|
{
|
|
|
top: 55.5,
|
|
|
left: 5.5
|
|
|
},
|
|
|
{
|
|
|
top: 55.5,
|
|
|
left: 52.7
|
|
|
},
|
|
|
],
|
|
|
scrollTableOption: {
|
|
|
step: 0.5, // 数值越大速度滚动越快
|
|
|
limitMoveNum: 5, // 开始无缝滚动的数据量 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: [],
|
|
|
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
getData().then(e=>{
|
|
|
this.scrollTableData = e.table6
|
|
|
this.$refs.chart11.setData(this.option('灌注量',e.chart10.data[0]))
|
|
|
this.$refs.chart12.setData(this.option('标准灌注量',e.chart10.data[1]))
|
|
|
this.$refs.chart13.setData(this.option('灌注压力',e.chart10.data[2]))
|
|
|
this.$refs.chart14.setData(this.option('真空检测时间',e.chart10.data[3]))
|
|
|
this.$refs.chart15.setData(this.option('真空度衰减压力',e.chart10.data[4]))
|
|
|
this.$refs.chart16.setData(this.option('灌注温度',e.chart10.data[5]))
|
|
|
this.$refs.chart2.setData({
|
|
|
grid: {
|
|
|
top: "5%",
|
|
|
bottom: "10%", //也可设置left和right设置距离来控制图表的大小
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
type: "shadow",
|
|
|
label: {
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
legend: {
|
|
|
data: e.chart8.y.map(val=>val.name),
|
|
|
top: "0%",
|
|
|
textStyle: {
|
|
|
color: "#ffffff",
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
data: e.chart8.x,
|
|
|
axisLine: {
|
|
|
show: true, //隐藏X轴轴线
|
|
|
lineStyle: {
|
|
|
color: "#01FCE3",
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true, //隐藏X轴刻度
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: "#ebf8ac", //X轴文字颜色
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
nameTextStyle: {
|
|
|
color: "#ebf8ac",
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: "#FFFFFF",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: "#ebf8ac",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
type: "value",
|
|
|
nameTextStyle: {
|
|
|
color: "#ebf8ac",
|
|
|
},
|
|
|
position: "right",
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
formatter: "{value} %", //右侧Y轴文字显示
|
|
|
textStyle: {
|
|
|
color: "#ebf8ac",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: e.chart8.y[0].name,
|
|
|
type: "bar",
|
|
|
barWidth: '40%',
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "#00FFE3",
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "#4693EC",
|
|
|
},
|
|
|
]),
|
|
|
},
|
|
|
},
|
|
|
data: e.chart8.y[0].data,
|
|
|
},
|
|
|
{
|
|
|
name: e.chart8.y[1].name,
|
|
|
type: "line",
|
|
|
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
|
|
smooth: true, //平滑曲线显示
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
symbol: "circle", //标记的图形为实心圆
|
|
|
symbolSize: 10, //标记的大小
|
|
|
itemStyle: {
|
|
|
//折线拐点标志的样式
|
|
|
color: "#058cff",
|
|
|
},
|
|
|
lineStyle: {
|
|
|
color: "#058cff",
|
|
|
},
|
|
|
areaStyle: {
|
|
|
color: "rgba(5,140,255, 0.2)",
|
|
|
},
|
|
|
data: e.chart8.y[1].data,
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
this.$refs.chart3.setData({
|
|
|
grid: {
|
|
|
top: "5%",
|
|
|
bottom: "10%", //也可设置left和right设置距离来控制图表的大小
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
type: "shadow",
|
|
|
label: {
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
legend: {
|
|
|
data: [e.chart9.y.name],
|
|
|
top: "0%",
|
|
|
textStyle: {
|
|
|
color: "#ffffff",
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
data: e.chart9.x,
|
|
|
axisLine: {
|
|
|
show: true, //隐藏X轴轴线
|
|
|
lineStyle: {
|
|
|
color: "#01FCE3",
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true, //隐藏X轴刻度
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: "#ebf8ac", //X轴文字颜色
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
min:90,
|
|
|
type: "value",
|
|
|
nameTextStyle: {
|
|
|
color: "#ebf8ac",
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: "#FFFFFF",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: "#ebf8ac",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: e.chart9.y.name,
|
|
|
type: "line",
|
|
|
barWidth: '40%',
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "#00FFE3",
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "#4693EC",
|
|
|
},
|
|
|
]),
|
|
|
},
|
|
|
},
|
|
|
data: e.chart9.y.data,
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
option(name,val) {
|
|
|
return {
|
|
|
tooltip: {
|
|
|
formatter: "{a} <br/>{b} : {c}%",
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "进度",
|
|
|
type: "gauge",
|
|
|
center: ['50%', '60%'],
|
|
|
radius: "65%",
|
|
|
splitNumber: 0,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: [
|
|
|
[val / 100, "#468EFD"],
|
|
|
[1, "#111F42"],
|
|
|
],
|
|
|
width: 8,
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
itemStyle: {
|
|
|
show: false,
|
|
|
},
|
|
|
detail: {
|
|
|
formatter: function () {
|
|
|
return `${val}\n${name}`;
|
|
|
},
|
|
|
offsetCenter: [0, '90%'],
|
|
|
lineHeight: 16,
|
|
|
textStyle: {
|
|
|
padding: [0, 0, 0, 0],
|
|
|
fontSize: 12,
|
|
|
fontWeight: "700",
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
title: {
|
|
|
//标题
|
|
|
show: true,
|
|
|
offsetCenter: [0, '100%'], // x, y，单位px
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 14, //表盘上的标题文字大小
|
|
|
fontWeight: 400,
|
|
|
fontFamily: "PingFangSC",
|
|
|
},
|
|
|
},
|
|
|
data: [
|
|
|
{
|
|
|
name: " ",
|
|
|
value: val,
|
|
|
},
|
|
|
],
|
|
|
pointer: {
|
|
|
show: true,
|
|
|
length: "75%",
|
|
|
radius: "70%",
|
|
|
width: 5, //指针粗细
|
|
|
},
|
|
|
animationDuration: 4000,
|
|
|
},
|
|
|
{
|
|
|
name: "外部刻度",
|
|
|
type: "gauge",
|
|
|
center: ['50%', '60%'],
|
|
|
radius: "80%",
|
|
|
min: 0, //最小刻度
|
|
|
max: 100, //最大刻度
|
|
|
splitNumber: 6, //刻度数量
|
|
|
startAngle: 225,
|
|
|
endAngle: -45,
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
width: 1,
|
|
|
color: [[1, "rgba(0,0,0,0)"]],
|
|
|
},
|
|
|
}, //仪表盘轴线
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
color: "#4d5bd1",
|
|
|
distance: -14,
|
|
|
formatter: function (v) {
|
|
|
return v.toFixed(0)
|
|
|
},
|
|
|
}, //刻度标签。
|
|
|
axisTick: {
|
|
|
show: true,
|
|
|
splitNumber: 6,
|
|
|
lineStyle: {
|
|
|
color: "#468EFD", //用颜色渐变函数不起作用
|
|
|
width: 1,
|
|
|
},
|
|
|
length: -5,
|
|
|
}, //刻度样式
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
length: -10,
|
|
|
lineStyle: {
|
|
|
color: "#468EFD", //用颜色渐变函数不起作用
|
|
|
},
|
|
|
}, //分隔线样式
|
|
|
detail: {
|
|
|
show: false,
|
|
|
},
|
|
|
pointer: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
.app-container {
|
|
|
background-image: url("../../../assets/board/pourInto.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: 15%;
|
|
|
left: 50.6%;
|
|
|
width: 46%;
|
|
|
height: 37.5%;
|
|
|
}
|
|
|
|
|
|
.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: 14.2%;
|
|
|
}
|
|
|
|
|
|
.chart11 {
|
|
|
position: absolute;
|
|
|
top: 15%;
|
|
|
left: 3.6%;
|
|
|
width: 15%;
|
|
|
height: 15%;
|
|
|
}
|
|
|
|
|
|
.chart12 {
|
|
|
position: absolute;
|
|
|
top: 15%;
|
|
|
left: 18.6%;
|
|
|
width: 15%;
|
|
|
height: 15%;
|
|
|
}
|
|
|
|
|
|
.chart13 {
|
|
|
position: absolute;
|
|
|
top: 15%;
|
|
|
left: 33.6%;
|
|
|
width: 15%;
|
|
|
height: 15%;
|
|
|
}
|
|
|
|
|
|
.chart14 {
|
|
|
position: absolute;
|
|
|
top: 30%;
|
|
|
left: 3.6%;
|
|
|
width: 15%;
|
|
|
height: 15%;
|
|
|
}
|
|
|
|
|
|
.chart15 {
|
|
|
position: absolute;
|
|
|
top: 30%;
|
|
|
left: 18.6%;
|
|
|
width: 15%;
|
|
|
height: 15%;
|
|
|
}
|
|
|
|
|
|
.chart16 {
|
|
|
position: absolute;
|
|
|
top: 30%;
|
|
|
left: 33.6%;
|
|
|
width: 15%;
|
|
|
height: 15%;
|
|
|
}
|
|
|
|
|
|
.chart2 {
|
|
|
position: absolute;
|
|
|
top: 58.5%;
|
|
|
left: 3.5%;
|
|
|
width: 46%;
|
|
|
height: 36%;
|
|
|
}
|
|
|
|
|
|
.chart3 {
|
|
|
position: absolute;
|
|
|
top: 58.5%;
|
|
|
left: 50.5%;
|
|
|
width: 46%;
|
|
|
height: 36%;
|
|
|
}
|
|
|
</style>
|