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.
768 lines
18 KiB
Vue
768 lines
18 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="headTitle">京源生产监控平台</div>
|
|
<div v-for="(i,k) in title" :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
|
|
class="title">
|
|
{{ i }}
|
|
</div>
|
|
<div class="table1">
|
|
<div style="background-color: #094170">
|
|
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 10%">
|
|
编号
|
|
</div>
|
|
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 23.333%">
|
|
生产工单
|
|
</div>
|
|
<div class="scrollTableItem" style="color:#fff;font-weight: bold;">
|
|
计划数量
|
|
</div>
|
|
<div class="scrollTableItem" style="color:#fff;font-weight: bold;">
|
|
实际数量
|
|
</div>
|
|
<div class="scrollTableItem" style="color:#fff;font-weight: bold;">
|
|
差异值
|
|
</div>
|
|
<div class="scrollTableItem" style="color:#fff;font-weight: bold;">
|
|
完成率
|
|
</div>
|
|
</div>
|
|
<vue-seamless-scroll
|
|
:class-option="scrollTableOption"
|
|
:data="scrollTableData"
|
|
class="case-item"
|
|
style="height: calc(100% - 30px);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: 10%">
|
|
{{ item.value1 }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width: 23.333%">
|
|
{{ 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>
|
|
</div>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
<div class="chart1">
|
|
<Chart key="chart1" ref="chart1"></Chart>
|
|
</div>
|
|
<div class="chart2">
|
|
<Chart key="chart2" ref="chart2"></Chart>
|
|
</div>
|
|
<div class="chart3">
|
|
<Chart key="chart3" ref="chart3"></Chart>
|
|
</div>
|
|
<div class="chart4">
|
|
<Chart key="chart4" ref="chart4"></Chart>
|
|
</div>
|
|
<div class="num1 num1_1" style="top: 17%;left: 31.1%;color:#5fc2f2">1</div>
|
|
<div class="num1 num1_2" style="top: 17%;left:34.1%;color:#5fc2f2">0</div>
|
|
<div class="num1 num1_3" style="top: 17%;left:37%;color:#5fc2f2">0</div>
|
|
<div class="num1 num1_4" style="top: 17%;left:40%;color:#5fc2f2">0</div>
|
|
<div class="num1 num1_5" style="top: 17%;left:45.6%;color:#59ee7b">1</div>
|
|
<div class="num1 num1_6" style="top: 17%;left:48.6%;color:#59ee7b">0</div>
|
|
<div class="num1 num1_7" style="top: 17%;left:51.5%;color:#59ee7b">0</div>
|
|
<div class="num1 num1_8" style="top: 17%;left:54.5%;color:#59ee7b">0</div>
|
|
<div class="num1 num1_9" style="top: 17%;left:60%;color:#f60008">1</div>
|
|
<div class="num1 num1_10" style="top: 17%;left:63%;color:#f60008">0</div>
|
|
<div class="num1 num1_11" style="top: 17%;left:65.9%;color:#f60008">0</div>
|
|
<div class="num1 num1_12" style="top: 17%;left:68.9%;color:#f60008">0</div>
|
|
<div class="state"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
|
import Chart from '@/components/board/Chart'
|
|
import * as echarts from 'echarts'
|
|
|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
export default {
|
|
name: 'Board1',
|
|
components: {
|
|
vueSeamlessScroll,
|
|
Chart
|
|
},
|
|
data() {
|
|
return {
|
|
title: [
|
|
'工单计划',
|
|
'小时产量',
|
|
'七日产量对比',
|
|
'粉尘数据走势',
|
|
'设备时长统计',
|
|
'计划数量:',
|
|
'完成数量:',
|
|
'差异值:',
|
|
'产线状态:',
|
|
],
|
|
titlePosition: [
|
|
{
|
|
top: 11.3,
|
|
left: 5.5
|
|
},
|
|
{
|
|
top: 11.3,
|
|
left: 75
|
|
},
|
|
{
|
|
top: 63,
|
|
left: 5.5
|
|
},
|
|
{
|
|
top: 63,
|
|
left: 30.5
|
|
},
|
|
{
|
|
top: 63,
|
|
left: 75
|
|
},
|
|
{
|
|
top: 11.3,
|
|
left: 30.5
|
|
},
|
|
{
|
|
top: 11.3,
|
|
left: 45
|
|
},
|
|
{
|
|
top: 11.3,
|
|
left: 59.5
|
|
},
|
|
{
|
|
top: 25,
|
|
left: 44
|
|
},
|
|
],
|
|
scrollTableOption: {
|
|
step: 0.5, // 数值越大速度滚动越快
|
|
limitMoveNum: 22, // 开始无缝滚动的数据量 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: Array(50).fill('').map(function (i, k) {
|
|
let val1 = Math.ceil(Math.random() * 10000)
|
|
let val2 = val1 - Math.ceil(Math.random() * val1)
|
|
let val3 = val1 - val2
|
|
let val4 = ((val2 / val1) * 100).toFixed(2) + '%'
|
|
return {
|
|
value1: k + 1,
|
|
value2: "20230304" + k,
|
|
value3: val1,
|
|
value4: val2,
|
|
value5: val3,
|
|
value6: val4,
|
|
}
|
|
}),
|
|
}
|
|
},
|
|
mounted() {
|
|
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: [1, 2, 3, 4, 5, 6],
|
|
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: '数量',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top',
|
|
textStyle: {
|
|
color: '#a8aab0',
|
|
fontStyle: 'normal',
|
|
fontFamily: '微软雅黑',
|
|
fontSize: 0.75 * vw
|
|
}
|
|
}
|
|
},
|
|
type: 'bar',
|
|
barWidth: '30%',
|
|
barMaxWidth: 50,
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#39ffff'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#5affa6'
|
|
}
|
|
])
|
|
}
|
|
},
|
|
data: [1, 2, 3, 4, 5, 6]
|
|
}
|
|
]
|
|
})
|
|
this.$refs.chart2.setData({
|
|
grid: {
|
|
top: 30,
|
|
left: "2%",
|
|
right: "5%",
|
|
bottom: "2%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: false,
|
|
data: ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
|
|
axisLabel: {
|
|
margin: 10,
|
|
color: "#ffffff63",
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#ffffff1f",
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: "#ffffff1f",
|
|
},
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
axisLabel: {
|
|
margin: 10,
|
|
color: "#ffffff63",
|
|
},
|
|
|
|
axisTick: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#ffffff1f",
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: "#ffffff1f",
|
|
},
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#fff",
|
|
width: 2,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "产量",
|
|
type: "line",
|
|
smooth: true, //是否平滑曲线显示
|
|
showAllSymbol: true,
|
|
symbol: "circle",
|
|
symbolSize: 6,
|
|
lineStyle: {
|
|
normal: {
|
|
color: "#fff", // 线条颜色
|
|
},
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
itemStyle: {
|
|
color: "red",
|
|
borderColor: "#fff",
|
|
borderWidth: 3,
|
|
},
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "#eb64fb",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#3fbbff0d",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
},
|
|
},
|
|
data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
|
|
},
|
|
],
|
|
})
|
|
this.$refs.chart3.setData({
|
|
grid: {
|
|
top: 30,
|
|
left: "2%",
|
|
right: "5%",
|
|
bottom: "2%",
|
|
containLabel: true,
|
|
},
|
|
legend:{
|
|
textStyle:{
|
|
color:'#fff'
|
|
}
|
|
},
|
|
|
|
tooltip:{
|
|
trigger:'axis'
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
|
|
axisLabel: {
|
|
margin: 10,
|
|
color: "#ffffff63",
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#ffffff1f",
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: "#ffffff1f",
|
|
},
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
axisLabel: {
|
|
margin: 10,
|
|
color: "#ffffff63",
|
|
},
|
|
|
|
axisTick: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#ffffff1f",
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: "#ffffff1f",
|
|
},
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#fff",
|
|
width: 2,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "pm1",
|
|
type: "line",
|
|
smooth: true, //是否平滑曲线显示
|
|
showAllSymbol: true,
|
|
symbol: "circle",
|
|
symbolSize: 6,
|
|
lineStyle: {
|
|
normal: {
|
|
color: "#fff", // 线条颜色
|
|
},
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
itemStyle: {
|
|
color: "red",
|
|
borderColor: "#fff",
|
|
borderWidth: 3,
|
|
},
|
|
tooltip: {
|
|
// show: false,
|
|
},
|
|
data: [493, 538, 585, 731, 789, 924, 1087, 1100, 1200, 1300],
|
|
},
|
|
{
|
|
name: "pm2",
|
|
type: "line",
|
|
smooth: true, //是否平滑曲线显示
|
|
showAllSymbol: true,
|
|
symbol: "circle",
|
|
symbolSize: 6,
|
|
lineStyle: {
|
|
normal: {
|
|
color: "#f0f", // 线条颜色
|
|
},
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
itemStyle: {
|
|
color: "red",
|
|
borderColor: "#fff",
|
|
borderWidth: 3,
|
|
},
|
|
tooltip: {
|
|
// show: false,
|
|
},
|
|
data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
|
|
},
|
|
{
|
|
name: "pm10",
|
|
type: "line",
|
|
smooth: true, //是否平滑曲线显示
|
|
showAllSymbol: true,
|
|
symbol: "circle",
|
|
symbolSize: 6,
|
|
lineStyle: {
|
|
normal: {
|
|
color: "#ff0", // 线条颜色
|
|
},
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
itemStyle: {
|
|
color: "red",
|
|
borderColor: "#fff",
|
|
borderWidth: 3,
|
|
},
|
|
tooltip: {
|
|
// show: false,
|
|
},
|
|
data: [593, 638, 685, 831, 889, 1024, 1187, 1200, 1300, 1400],
|
|
},
|
|
],
|
|
})
|
|
this.$refs.chart4.setData({
|
|
grid: {
|
|
top: 30,
|
|
left: "2%",
|
|
right: "5%",
|
|
bottom: "2%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: false,
|
|
data: ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
|
|
axisLabel: {
|
|
margin: 10,
|
|
color: "#ffffff63",
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#ffffff1f",
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: "#ffffff1f",
|
|
},
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
axisLabel: {
|
|
margin: 10,
|
|
color: "#ffffff63",
|
|
},
|
|
|
|
axisTick: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#ffffff1f",
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: "#ffffff1f",
|
|
},
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#fff",
|
|
width: 2,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "产量",
|
|
type: "line",
|
|
smooth: true, //是否平滑曲线显示
|
|
showAllSymbol: true,
|
|
symbol: "circle",
|
|
symbolSize: 6,
|
|
lineStyle: {
|
|
normal: {
|
|
color: "#fff", // 线条颜色
|
|
},
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
itemStyle: {
|
|
color: "red",
|
|
borderColor: "#fff",
|
|
borderWidth: 3,
|
|
},
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "#eb64fb",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#3fbbff0d",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
},
|
|
},
|
|
data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
|
|
},
|
|
],
|
|
})
|
|
|
|
window.onresize = () => {
|
|
this.$refs.chart1.chart.resize()
|
|
this.$refs.chart2.chart.resize()
|
|
this.$refs.chart3.chart.resize()
|
|
this.$refs.chart4.chart.resize()
|
|
}
|
|
},
|
|
methods: {}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
|
|
.app-container {
|
|
background-image: url("../../../assets/board/productionBg1.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;
|
|
}
|
|
|
|
.num1 {
|
|
position: absolute;
|
|
font-size: 2vw;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.table1 {
|
|
position: absolute;
|
|
top: 14.5%;
|
|
left: 3.3%;
|
|
width: 23.8%;
|
|
height: 45.5%;
|
|
color: #fff
|
|
}
|
|
|
|
.scrollTableItem {
|
|
display: inline-block;
|
|
width: calc(100% / 6);
|
|
text-align: center;
|
|
padding: 4px 0;
|
|
color: #fff9
|
|
}
|
|
|
|
.chart1 {
|
|
position: absolute;
|
|
top: 14.5%;
|
|
left: 73%;
|
|
width: 23.8%;
|
|
height: 45.5%;
|
|
}
|
|
|
|
.chart2 {
|
|
position: absolute;
|
|
top: 66%;
|
|
left: 3.3%;
|
|
width: 23.8%;
|
|
height: 29%;
|
|
|
|
}
|
|
|
|
.chart3 {
|
|
position: absolute;
|
|
top: 66%;
|
|
left: 28.4%;
|
|
width: 43.1%;
|
|
height: 29%;
|
|
|
|
}
|
|
|
|
.chart4 {
|
|
position: absolute;
|
|
top: 66%;
|
|
left: 73%;
|
|
width: 23.8%;
|
|
height: 29%;
|
|
|
|
}
|
|
|
|
.state {
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
top: 25%;
|
|
left: 50%;
|
|
width: 1.5vw;
|
|
height: 1.5vw;
|
|
border-radius: 50%;
|
|
background-color: #ffff00;
|
|
}
|
|
</style>
|