|
|
@ -0,0 +1,237 @@ |
|
|
|
<template> |
|
|
|
<div class="data-v-wrap"> |
|
|
|
<header class="title-wrap">4# 弧焊机</header> |
|
|
|
<div class="content-wrap"> |
|
|
|
<div class="content-style content-left-wrap"> |
|
|
|
<p class="content-title"> |
|
|
|
<span class="left-img" />A工位 实时数据展示<span class="right-img" /> |
|
|
|
</p> |
|
|
|
<div class="echarts-wrap"> |
|
|
|
<div class="echarts-title"> |
|
|
|
<span class="left-img" />{{(allData[0] && allData[0].title) || '工时统计数据'}}<span class="right-img" /> |
|
|
|
</div> |
|
|
|
<p class="user-time">平均工时:{{(allData[0] && allData[0].avg) || 0}}{{(allData[0] && allData[0].uom) || 's'}}</p> |
|
|
|
<div id="float-line-echarts" class="float-line-echarts" /> |
|
|
|
</div> |
|
|
|
<div class="echarts-wrap"> |
|
|
|
<div class="echarts-title"> |
|
|
|
<span class="left-img" />{{(allData[2] && allData[2].title) || '设备数据统计'}}<span class="right-img" /> |
|
|
|
</div> |
|
|
|
<div id="float-line-echarts-left2" class="float-line-echarts" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="content-style content-right-wrap"> |
|
|
|
<p class="content-title"> |
|
|
|
<span class="left-img" />B工位 实时数据展示<span class="right-img" /> |
|
|
|
</p> |
|
|
|
<div class="echarts-wrap"> |
|
|
|
<div class="echarts-title"> |
|
|
|
<span class="left-img" />{{(allData[1] && allData[1].title) || '工时统计数据'}}<span class="right-img" /> |
|
|
|
</div> |
|
|
|
<p class="user-time">平均工时:{{(allData[1] && allData[1].avg) || 0}}{{(allData[1] && allData[1].uom) || 's'}}</p> |
|
|
|
<div id="float-line-echartsB" class="float-line-echarts" /> |
|
|
|
</div> |
|
|
|
<div class="echarts-wrap"> |
|
|
|
<div class="echarts-title"> |
|
|
|
<span class="left-img" />{{(allData[3] && allData[3].title) || '设备数据统计'}}<span class="right-img" /> |
|
|
|
</div> |
|
|
|
<div id="float-line-echarts-right2" class="float-line-echarts" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import { |
|
|
|
filterdatainfo |
|
|
|
} from '../../api/dataL.js' |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
allData: [] |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getData() { |
|
|
|
const _this = this; |
|
|
|
filterdatainfo('/admin/report/filterdatainfo/display', {}).then(({ |
|
|
|
code, |
|
|
|
data |
|
|
|
}) => { |
|
|
|
if (code === 200 && data.length) { |
|
|
|
_this.allData = data; |
|
|
|
_this.lineMarkAreaChart && _this.lineMarkAreaChart.setOption(data[0]) |
|
|
|
_this.lineMarkAreaChartLeft2 && _this.lineMarkAreaChartLeft2.setOption(data[2]); |
|
|
|
_this.lineMarkAreaChartB && _this.lineMarkAreaChartB.setOption(data[1]) |
|
|
|
_this.lineMarkAreaChartRight2 && _this.lineMarkAreaChartRight2.setOption(data[3]); |
|
|
|
} |
|
|
|
}) |
|
|
|
setTimeout(() => { |
|
|
|
_this.getData(); |
|
|
|
}, 1000) |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
// 拆线水平填充图 |
|
|
|
// 左1 |
|
|
|
var lineMarkArea = document.getElementById('float-line-echarts'); |
|
|
|
this.lineMarkAreaChart = new window.echarts.lineMarkArea(lineMarkArea); |
|
|
|
this.lineMarkAreaChart.setOption({}); |
|
|
|
// 左2 |
|
|
|
var lineMarkLeft2 = document.getElementById('float-line-echarts-left2'); |
|
|
|
this.lineMarkAreaChartLeft2 = new window.echarts.lineMark(lineMarkLeft2); |
|
|
|
this.lineMarkAreaChartLeft2.setOption({}); |
|
|
|
|
|
|
|
// 右1 |
|
|
|
var lineMarkAreaB = document.getElementById('float-line-echartsB'); |
|
|
|
this.lineMarkAreaChartB = new window.echarts.lineMarkArea(lineMarkAreaB); |
|
|
|
this.lineMarkAreaChartB.setOption({}); |
|
|
|
// 右2 |
|
|
|
var lineMarkRight2 = document.getElementById('float-line-echarts-right2'); |
|
|
|
this.lineMarkAreaChartRight2 = new window.echarts.lineMark(lineMarkRight2); |
|
|
|
this.lineMarkAreaChartRight2.setOption({}); |
|
|
|
this.getData(); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</script> |
|
|
|
<style scoped> |
|
|
|
.data-v-wrap { |
|
|
|
position: relative; |
|
|
|
min-width: 1920px; |
|
|
|
min-height: 1080px; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
padding-top: 96px; |
|
|
|
background: #01082e; |
|
|
|
} |
|
|
|
|
|
|
|
.title-wrap { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 68px; |
|
|
|
font-size: 24px; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
color: #ffffff; |
|
|
|
line-height: 68px; |
|
|
|
text-align: center; |
|
|
|
text-shadow: 0px 1px 0px rgba(7, 18, 58, 0.24); |
|
|
|
background: url(../../assets/imgs/data-v/title-img.png) no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.content-wrap { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
padding: 0 39px 39px 39px; |
|
|
|
overflow: hidden; |
|
|
|
clear: both; |
|
|
|
} |
|
|
|
|
|
|
|
.echarts-wrap { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
height: 450px; |
|
|
|
background: url(../../assets/imgs/data-v/echarts-bg.png) no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
margin-bottom: 14px; |
|
|
|
padding-top: 40px; |
|
|
|
} |
|
|
|
|
|
|
|
.echarts-title { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 324px; |
|
|
|
text-align: center; |
|
|
|
font-size: 16px; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
color: #ffffff; |
|
|
|
line-height: 40px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.left-img { |
|
|
|
display: inline-block; |
|
|
|
width: 16px; |
|
|
|
height: 8px; |
|
|
|
background: url(../../assets/imgs/data-v/right-img.png) no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.right-img { |
|
|
|
display: inline-block; |
|
|
|
width: 16px; |
|
|
|
height: 8px; |
|
|
|
background: url(../../assets/imgs/data-v/left-img.png) no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
margin-left: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.user-time { |
|
|
|
position: absolute; |
|
|
|
top: 38px; |
|
|
|
right: 16px; |
|
|
|
width: 170px; |
|
|
|
height: 40px; |
|
|
|
line-height: 40px; |
|
|
|
font-size: 16px; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
color: #FFFFFF; |
|
|
|
background: #091954; |
|
|
|
border: 1px solid #0036C3; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.float-line-echarts { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.content-style { |
|
|
|
position: relative; |
|
|
|
width: 910px; |
|
|
|
height: 945px; |
|
|
|
background: url(../../assets/imgs/data-v/content-bg.png) no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
padding: 14px 17px; |
|
|
|
} |
|
|
|
|
|
|
|
.content-title { |
|
|
|
position: absolute; |
|
|
|
top: -22px; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 26px; |
|
|
|
line-height: 26px; |
|
|
|
text-align: center; |
|
|
|
font-size: 18px; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
color: #FFFFFF; |
|
|
|
} |
|
|
|
|
|
|
|
.content-left-wrap { |
|
|
|
float: left; |
|
|
|
} |
|
|
|
|
|
|
|
.content-right-wrap { |
|
|
|
float: right; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |