<template>
|
<div id="StatisticsLegend"
|
style="overflow: hidden;display: flex;flex-direction: column;background-color: #f5f4f4">
|
<!-- 查询区域 -->
|
<div style=" background-color: #fff" class="table-page-search-wrapper">
|
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
<a-row :gutter="24">
|
<a-col :md="5" :sm="5" :xs="5">
|
<a-form-item label="名称">
|
<a-input placeholder="输入设备名称查询" readOnly v-model="queryParam.tierName"></a-input>
|
</a-form-item>
|
</a-col>
|
<a-col :md="4" :sm="4" :xs="4">
|
<a-form-item label="日期">
|
<a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" format='YYYY-MM-DD'
|
@change="dataChange" :allowClear="false"/>
|
</a-form-item>
|
</a-col>
|
<a-col :md="2" :sm="2" :xs="2">
|
<a-space>
|
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
<a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
|
</a-space>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
|
<a-spin :spinning="spinning">
|
<!--利用率-->
|
<div class="PowerOnRate Line-box">
|
<div class="title">
|
<div class="circle"></div>
|
<div class="text">利用率</div>
|
</div>
|
<div class="PowerOnRate-box box-bottom">
|
<div class="PowerOnRate-left" ref="PowerOnRatePie" id="PowerOnRatePie"></div>
|
<div class="PowerOnRate-right" ref="PowerOnRateLine" id="PowerOnRateLine"></div>
|
</div>
|
</div>
|
<!--开机率和开动率-->
|
<div class="UtilizationStartup">
|
<div class="Utilization Line-box">
|
<div class="title">
|
<div class="circle"></div>
|
<div class="text">开机率</div>
|
</div>
|
<div class="Utilization-box box-bottom">
|
<div class="Utilization-left left">
|
<div class="left-box">
|
<div class="left-box-con">
|
<div class="Rate-box-kong" :style="{height:100-UtilizationHeight+'%'}"></div>
|
<div class="Rate-box" :style="{height:UtilizationHeight+'%'}">
|
<p class="Rate-box-text">
|
<span ref="UtilizationRate">{{UtilizationHeight}}%</span>
|
<br>
|
开机率
|
</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="Utilization-right" ref="UtilizationLine" id="UtilizationLine"></div>
|
</div>
|
</div>
|
<div class="Startup Line-box">
|
<div class="title">
|
<div class="circle"></div>
|
<div class="text">开动率</div>
|
</div>
|
<div class="Startup-box box-bottom">
|
<div class="Startup-left left" ref="StartupRate">
|
<div class="left-box">
|
<div class="left-box-con">
|
<div class="Rate-box-kong" :style="{height:100-StartupHeight+'%'}"></div>
|
<div class="Rate-box" :style="{height:StartupHeight+'%'}">
|
<p class="Rate-box-text">
|
<span>{{StatCharUsedOpeningRate}}%</span>
|
<br>
|
开动率
|
</p>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<div class="Startup-right" ref="StartupLine" id="StartupLine"></div>
|
</div>
|
</div>
|
</div>
|
</a-spin>
|
</div>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
import { getAction } from '@/api/manage'
|
import * as eCharts from 'echarts'
|
|
export default {
|
name: 'StatisticsLegend',
|
props: { equip: {} },
|
data() {
|
return {
|
StatCharOpeningRate: 0,
|
StatCharUsedRate: 0,
|
StatCharUsedOpeningRate: 0,
|
openingLong: 0,
|
waitingLong: 0,
|
processLong: 0,
|
closedLong: 0,
|
totalLong: 0,
|
UtilizationHeight: 0,
|
StartupHeight: 0,
|
dates: [],
|
queryParam: {},
|
queryParams: {
|
collectTime: undefined
|
},
|
PowerOnRatePie: null,
|
PowerOnRateLine: null,
|
UtilizationLine: null,
|
StartupLine: null,
|
spinning: false,
|
url: {
|
dayStatisticalRate: '/mdc/efficiencyReport/dayStatisticalRate',
|
getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction'
|
}
|
}
|
},
|
created() {
|
let collectTime = moment(moment().add(-1, 'd'), 'YYYY-MM-DD')
|
this.queryParams.collectTime = moment().add(-1, 'd').format('YYYY-MM-DD')
|
this.queryParams.dateTime = moment().add(-1, 'd').format('YYYYMMDD')
|
this.initEquipmentNode()
|
},
|
mounted() {
|
window.addEventListener('resize', this.handleWindowResize)
|
},
|
beforeDestroy() {
|
window.addEventListener('resize', this.handleWindowResize)
|
},
|
methods: {
|
disabledDate(current) {
|
//Can not slect days before today and today
|
return current && current > moment().subtract('days', 1)
|
},
|
//把秒计算成对应的时分秒的函数
|
getTime(time) {
|
//转换为时分秒
|
let h = Math.round(time / 60 / 60)
|
h = h < 10 ? '0' + h : h
|
//作为返回值返回
|
// console.log(h);
|
return h
|
},
|
draw() {
|
//利用率
|
//饼图
|
this.PowerOnRatePie = this.$echarts.init(document.getElementById('PowerOnRatePie'), 'macarons')
|
let PowerOnRatePie_option = {
|
// color: ["#3859fa", '#ccc'],
|
title: {
|
text: this.StatCharUsedRate + '%',
|
subtext: '利用率',
|
textStyle: {
|
color: '#268e80',
|
fontSize: 18
|
|
},
|
subtextStyle: {
|
color: '#292929'
|
},
|
x: 'center',
|
y: 'center'
|
},
|
series: [{
|
name: '',
|
type: 'pie',
|
radius: ['55%', '70%'],
|
itemStyle: {
|
normal: {
|
borderWidth: 4,//扇区间加间隔
|
borderColor: '#fff'//间隔为白色
|
}
|
},
|
label: {
|
normal: {
|
show: false
|
}
|
},
|
data: [{
|
value: 100,
|
itemStyle: {
|
color: new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0,
|
color: '#88a8fd'
|
},
|
{
|
offset: 1,
|
color: '#544cee'
|
}], false)
|
}
|
},
|
{
|
value: 100 - this.StatCharUsedRate,
|
itemStyle: {
|
color: '#f0f3f5'
|
}
|
}
|
]
|
}
|
]
|
}
|
this.PowerOnRatePie.setOption(PowerOnRatePie_option)
|
this.PowerOnRateLine = this.$echarts.init(document.getElementById('PowerOnRateLine'), 'macarons')
|
let PowerOnRateLine_option = {
|
tooltip: {
|
trigger: 'axis'
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
top: 60,
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
data: ['开机时长', '关机时长', '运行时长', '待机时长'],
|
axisLabel: { //坐标轴字体颜色
|
textStyle: {
|
color: '#000'
|
}
|
},
|
axisLine: {
|
lineStyle: {
|
color: '#e5e5e5'
|
}
|
},
|
axisTick: { //y轴刻度线
|
show: false
|
},
|
splitLine: { //网格
|
show: false
|
},
|
boundaryGap: true
|
},
|
yAxis: {
|
name: '时间/小时',
|
type: 'value',
|
axisLabel: { //坐标轴字体颜色
|
textStyle: {
|
color: '#000'
|
}
|
},
|
axisLine: {
|
show: false
|
},
|
axisTick: { //y轴刻度线
|
show: false
|
},
|
splitLine: { //网格
|
show: true,
|
lineStyle: {
|
color: '#dadde4',
|
type: 'dashed'
|
}
|
}
|
},
|
series: [
|
{
|
name: '',
|
type: 'bar',
|
data: [this.openingLong, this.closedLong, this.processLong, this.waitingLong],
|
barWidth: 25,
|
label: {
|
show: true,
|
position: 'top',
|
textStyle: {
|
color: '#000'
|
},
|
formatter: params => {
|
const value = String(params.value)
|
return value.length == 2 && value[0] === '0' ? `时长：${value.slice(1)}H` : `时长：${value}H`
|
}
|
},
|
itemStyle: {
|
normal: {
|
color: function(params) {
|
let colorList = [
|
['#6496e9', '#6bded3'],
|
['#849db8', '#b4b8cc'],
|
['#4fe1c5', '#4ecee1'],
|
['#ffbb65', '#fdc68b']
|
]
|
let colorItem = colorList[params.dataIndex]
|
return new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0,
|
color: colorItem[0]
|
},
|
{
|
offset: 1,
|
color: colorItem[1]
|
}], false)
|
},
|
barBorderRadius: [5, 5, 0, 0]
|
}
|
}
|
}]
|
}
|
this.PowerOnRateLine.setOption(PowerOnRateLine_option)
|
//开机率
|
this.UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons')
|
let UtilizationLine_option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
grid: {
|
top: '15%',
|
right: '3%',
|
left: '10%',
|
bottom: '12%'
|
},
|
xAxis: [{
|
type: 'category',
|
data: ['开机时长', '总时长'],
|
axisLine: {
|
lineStyle: {}
|
},
|
axisTick: {
|
show: false
|
},
|
axisLabel: {
|
textStyle: {
|
fontSize: 14
|
}
|
}
|
}],
|
yAxis: [{
|
type: 'value',
|
name: '时间/小时',
|
nameTextStyle: {},
|
axisLabel: {
|
formatter: '{value}'
|
},
|
axisTick: {
|
show: false
|
},
|
|
axisLine: {
|
show: false
|
},
|
splitLine: {
|
lineStyle: {}
|
}
|
}],
|
series: [
|
{
|
type: 'bar',
|
data: [this.openingLong, this.totalLong],
|
barWidth: 25,
|
label: {
|
show: true,
|
position: 'top',
|
textStyle: {
|
color: '#000'
|
},
|
formatter: params => {
|
const value = String(params.value)
|
return value.length == 2 && value[0] === '0' ? `时长：${value.slice(1)}H` : `时长：${value}H`
|
}
|
},
|
itemStyle: {
|
normal: {
|
color: function(params) {
|
let colorList = [
|
['#6496e9', '#6bded3'],
|
['#9978fa', '#88a1fa']
|
]
|
let colorItem = colorList[params.dataIndex]
|
return new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0,
|
color: colorItem[0]
|
},
|
{
|
offset: 1,
|
color: colorItem[1]
|
}], false)
|
},
|
barBorderRadius: [5, 5, 0, 0]
|
}
|
}
|
}]
|
}
|
this.UtilizationLine.setOption(UtilizationLine_option)
|
//开动率
|
this.StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons')
|
let StartupLine_option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
grid: {
|
top: '15%',
|
right: '3%',
|
left: '10%',
|
bottom: '12%'
|
},
|
xAxis: [{
|
type: 'category',
|
data: ['运行时长', '开机时长'],
|
axisLine: {
|
lineStyle: {}
|
},
|
axisTick: {
|
show: false
|
},
|
axisLabel: {
|
textStyle: {
|
fontSize: 14
|
}
|
}
|
}],
|
yAxis: [{
|
type: 'value',
|
name: '时间/小时',
|
nameTextStyle: {},
|
axisLabel: {
|
formatter: '{value}'
|
},
|
axisTick: {
|
show: false
|
},
|
|
axisLine: {
|
show: false
|
},
|
splitLine: {
|
lineStyle: {}
|
}
|
}],
|
series: [{
|
type: 'bar',
|
data: [this.processLong, this.openingLong],
|
barWidth: 25,
|
label: {
|
show: true,
|
position: 'top',
|
textStyle: {
|
color: '#000'
|
},
|
formatter: params => {
|
const value = String(params.value)
|
return value.length == 2 && value[0] === '0' ? `时长：${value.slice(1)}H` : `时长：${value}H`
|
}
|
},
|
itemStyle: {
|
normal: {
|
color: function(params) {
|
let colorList = [
|
['#4fe1c5', '#4ecee1'],
|
['#6496e9', '#6bded3']
|
]
|
let colorItem = colorList[params.dataIndex]
|
return new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0,
|
color: colorItem[0]
|
},
|
{
|
offset: 1,
|
color: colorItem[1]
|
}], false)
|
},
|
barBorderRadius: [5, 5, 0, 0]
|
}
|
}
|
}]
|
}
|
this.StartupLine.setOption(StartupLine_option)
|
},
|
queryStatistical() {
|
this.spinning = true
|
getAction(this.url.dayStatisticalRate, this.queryParams)
|
.then(res => {
|
if (res.success) {
|
this.StatCharOpeningRate = res.result.openRate
|
this.StatCharUsedRate = res.result.utilizationRate
|
this.UtilizationHeight = res.result.openRate
|
this.StatCharUsedOpeningRate = res.result.usedOpenRate
|
this.StartupHeight = res.result.usedOpenRate
|
this.openingLong = this.getTime(res.result.openLong)
|
this.waitingLong = this.getTime(res.result.waitLong)
|
this.processLong = this.getTime(res.result.processLong)
|
this.closedLong = this.getTime(res.result.closeLong)
|
this.totalLong = parseInt(this.openingLong) + parseInt(this.closedLong)
|
this.draw()
|
}
|
})
|
.finally(() => {
|
this.spinning = false
|
})
|
},
|
dataChange(val) {
|
if (val) {
|
this.queryParams.dateTime = val.format('YYYYMMDD')
|
this.queryParams.collectTime = val.format('YYYY-MM-DD')
|
}
|
},
|
initEquipmentNode() {
|
let _this = this
|
this.spinning = true
|
getAction(this.url.getBaseTree).then((res) => {
|
if (res.success) {
|
const { isEquipment, productionId, tierName } = this.$route.params
|
// 判断是否是从看板跳转过来，productionId 存在则为从看板跳转
|
if (productionId) {
|
// 判断是否点击的是设备层级
|
if (!isEquipment) {
|
_this.$set(this.queryParams, 'parentId', productionId)
|
_this.$set(this.queryParam, 'tierName', tierName)
|
} else {
|
_this.$set(this.queryParams, 'equipmentId', productionId)
|
_this.$set(this.queryParam, 'tierName', productionId + '/' + tierName)
|
}
|
} else {
|
if (res.result[0]) {
|
_this.$set(this.queryParam, 'tierName', res.result[0].title)
|
_this.$set(this.queryParams, 'parentId', res.result[0].key)
|
}
|
}
|
this.queryStatistical()
|
} else {
|
this.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
},
|
searchReset() {
|
this.queryParam = {}
|
this.queryParams = {
|
collectTime: moment().add(-1, 'd').format('YYYY-MM-DD'),
|
dateTime: moment().add(-1, 'd').format('YYYYMMDD')
|
}
|
this.initEquipmentNode()
|
},
|
searchQuery() {
|
this.queryStatistical()
|
},
|
|
handleWindowResize() {
|
if (this.PowerOnRatePie) this.PowerOnRatePie.resize()
|
if (this.PowerOnRateLine) this.PowerOnRateLine.resize()
|
if (this.UtilizationLine) this.UtilizationLine.resize()
|
if (this.StartupLine) this.StartupLine.resize()
|
}
|
},
|
watch: {
|
equip(val) {
|
if (val && val.equipmentId) {
|
this.$set(this.queryParam, 'tierName', val.title)
|
this.$set(this.queryParam, 'equipmentId', val.equipmentId)
|
this.queryParams.parentId = ''
|
this.queryParams.equipmentId = val.equipmentId
|
} else {
|
this.queryParams.parentId = val.key
|
this.queryParams.equipmentId = ''
|
this.$set(this.queryParam, 'tierName', val.title)
|
}
|
this.searchQuery()
|
}
|
}
|
|
}
|
</script>
|
|
<style scoped lang="less">
|
@media screen and (min-width: 1920px) {
|
#StatisticsLegend {
|
height: 748px !important;
|
overflow: scroll;
|
}
|
}
|
|
@media screen and (min-width: 1680px) and (max-width: 1920px) {
|
#StatisticsLegend {
|
height: 748px !important;
|
overflow: scroll;
|
}
|
}
|
|
@media screen and (min-width: 1400px) and (max-width: 1680px) {
|
#StatisticsLegend {
|
height: 600px !important;
|
overflow: scroll;
|
}
|
}
|
|
@media screen and (min-width: 1280px) and (max-width: 1400px) {
|
#StatisticsLegend {
|
height: 501px !important;
|
overflow: scroll;
|
}
|
}
|
|
@media screen and (max-width: 1280px) {
|
#StatisticsLegend {
|
height: 501px !important;
|
overflow: scroll;
|
}
|
}
|
|
/deep/ .ant-spin-nested-loading {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
|
.ant-spin-container {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.ant-spin-blur {
|
opacity: 1;
|
}
|
}
|
|
#StatisticsLegend .PowerOnRate {
|
height: 50%;
|
margin-bottom: 15px;
|
background-color: #fff;
|
}
|
|
#StatisticsLegend .UtilizationStartup {
|
height: 50%;
|
display: flex;
|
}
|
|
#StatisticsLegend .UtilizationStartup > div {
|
flex: 1;
|
background-color: #fff;
|
}
|
|
#StatisticsLegend .UtilizationStartup .Utilization {
|
margin-right: 15px;
|
}
|
|
.title {
|
display: flex;
|
align-items: center;
|
padding-left: 15px;
|
padding-top: 5px;
|
}
|
|
.title .circle {
|
width: 15px;
|
height: 15px;
|
background-color: #7282ec;
|
border-radius: 100%;
|
margin-right: 10px;
|
}
|
|
.title .text {
|
font-size: 2vh;
|
}
|
|
.Line-box {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.Line-box .box-bottom {
|
flex: 1;
|
}
|
|
.PowerOnRate-box {
|
display: flex;
|
}
|
|
.PowerOnRate-box .PowerOnRate-left {
|
width: 25%;
|
}
|
|
.PowerOnRate-box .PowerOnRate-right {
|
width: 75%;
|
}
|
|
.Utilization-box {
|
display: flex;
|
}
|
|
.Utilization-box .Utilization-left {
|
width: 25%;
|
}
|
|
.Utilization-box .Utilization-right {
|
flex: 1;
|
}
|
|
.Startup-box {
|
display: flex;
|
}
|
|
.Startup-box .Startup-left {
|
width: 25%;
|
}
|
|
.Startup-box .Startup-right {
|
flex: 1;
|
}
|
|
.left {
|
display: flex;
|
align-items: center;
|
}
|
|
.left .left-box {
|
width: 65%;
|
height: 60%;
|
margin: 0 auto;
|
overflow: hidden;
|
border-radius: 8px;
|
}
|
|
.left-box-con {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
text-align: center;
|
border: 6px solid red;
|
border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;
|
}
|
|
.left .left-box .Rate-box-kong {
|
width: 100%;
|
background: -moz-linear-gradient(bottom, #b5dec2 0%, #f4f5ba 100%);
|
background: -webkit-gradient(linear, bottom bottom, top top, color-stop(0%, #b5dec2), color-stop(100%, #f4f5ba));
|
background: -webkit-linear-gradient(bottom, #b5dec2 0%, #f4f5ba 100%);
|
background: -o-linear-gradient(bottom, #b5dec2 0%, #f4f5ba 100%);
|
background: -ms-linear-gradient(bottom, #b5dec2 0%, #f4f5ba 100%);
|
background: linear-gradient(to top, #b5dec2 0%, #f4f5ba 100%);
|
}
|
|
.left .left-box .Rate-box {
|
position: absolute;
|
text-align: center;
|
bottom: 0;
|
width: 100%;
|
height: 89%;
|
background: -moz-linear-gradient(bottom, #06a8f8 0%, #2bf3c7 100%);
|
background: -webkit-gradient(linear, bottom bottom, top top, color-stop(0%, #06a8f8), color-stop(100%, #2bf3c7));
|
background: -webkit-linear-gradient(bottom, #06a8f8 0%, #2bf3c7 100%);
|
background: -o-linear-gradient(bottom, #06a8f8 0%, #2bf3c7 100%);
|
background: -ms-linear-gradient(bottom, #06a8f8 0%, #2bf3c7 100%);
|
background: linear-gradient(to top, #06a8f8 0%, #2bf3c7 100%);
|
}
|
|
.left .left-box .Rate-box p {
|
position: absolute;
|
bottom: 0;
|
color: #fff;
|
width: 100%;
|
text-align: center;
|
}
|
</style>
|
