<template>
|
<div id="StatisticsLegend"
|
style="width: 100%; height: 100%; overflow: hidden;display: flex;flex-direction: column;background-color: #f5f4f4">
|
<!-- 查询区域 -->
|
<div style="width: 100%; height: 44px; 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="dateChange" :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="PowerOnRate-box box-bottom">
|
<div class="PowerOnRate_text" style="width: 8%;">
|
<p>开机率</p>
|
<p>{{UtilizationHeight}}%</p>
|
<p>利用率</p>
|
<p>{{StatCharUsedRate}}%</p>
|
</div>
|
<div class="PowerOnRate-right" ref="PowerOnRateLine" id="PowerOnRateLine"></div>
|
<div class="PowerOnRate_text" style="width: 8%">
|
<table width="85px;" align="center">
|
<tr>
|
<td align="right">
|
<div style="width: 15px;height: 15px;background-color: #6496e9;position: static;"/>
|
</td>
|
<td align="left">开机</td>
|
</tr>
|
<tr>
|
<td align="right">
|
<div style="width: 15px;height: 15px;background-color: #A8A8A8;position: static;"/>
|
</td>
|
<td align="left">关机</td>
|
</tr>
|
<tr>
|
<td align="right">
|
<div style="width: 15px;height: 15px;background-color: #4ecee1"/>
|
</td>
|
<td align="left">运行</td>
|
</tr>
|
<tr>
|
<td align="right">
|
<div style="width: 15px;height: 15px;background-color: #FCCE10"/>
|
</td>
|
<td align="left">待机</td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
</div>
|
<!--利用率和开动率-->
|
<div class="UtilizationStartup">
|
<div class="Utilization Line-box">
|
<div class="title">
|
</div>
|
<div class="Utilization-box box-bottom">
|
<div class="Utilization-right" ref="UtilizationLine" id="UtilizationLine"></div>
|
</div>
|
</div>
|
<div class="Startup Line-box">
|
<div class="title">
|
</div>
|
<div class="Startup-box box-bottom">
|
<div class="Startup-right" ref="StartupLine" id="StartupLine"></div>
|
</div>
|
</div>
|
</div>
|
</a-spin>
|
</div>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
import { putAction, getAction } from '@/api/manage'
|
import * as eCharts from 'echarts'
|
|
export default {
|
name: 'StatisticalAnalysisMain',
|
props: { equip: {} },
|
data() {
|
return {
|
StatCharOpeningRate: 0,
|
StatCharUsedRate: 0,
|
StatCharUsedOpeningRate: 0,
|
openingLong: 0,
|
waitingLong: 0,
|
processLong: 0,
|
closedLong: 0,
|
totalLong: 0,
|
UtilizationHeight: 0,
|
StartupHeight: 0,
|
PowerOnRateLine: null,
|
UtilizationLine: null,
|
StartupLine: null,
|
dates: [],
|
queryParam: {},
|
queryParams: {
|
collectTime: null
|
},
|
spinning: false,
|
url: {
|
dayStatisticalRate: '/mdc/efficiencyReport/dayStatisticalRate',
|
getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction'
|
}
|
}
|
},
|
created() {
|
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 select 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.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,
|
color: '#dadde4',
|
lineStyle: {
|
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 statChartPieOption1 = {
|
tooltip: {
|
trigger: 'item',
|
formatter: params => {
|
const value = String(params.value)
|
return value.length == 2 && value[0] === '0' ? `${params.seriesName}<br/>${params.name}：${value.slice(1)}H（${params.percent}%）` : `${params.seriesName}<br/>${params.name}：${value}H（${params.percent}%）`
|
}
|
},
|
legend: {
|
orient: 'vertical',
|
x: '85%',
|
y: '50%',
|
data: ['开机时间', '关机时间']
|
},
|
calculable: true,
|
series: [{
|
name: '开机效率',
|
type: 'pie',
|
radius: '70%',
|
itemStyle: {
|
normal: {
|
color: function(params) {
|
let colorList = ['#6496e9', '#849db8']
|
return colorList[params.dataIndex]
|
},
|
label: {
|
show: true,
|
position: 'top',
|
formatter: params => {
|
const value = String(params.value)
|
return value.length == 2 && value[0] === '0' ? params.name + ' ' + value.slice(1) + 'H' : params.name + ' ' + value + 'H'
|
}
|
}
|
}
|
},
|
data: [{ value: this.openingLong, name: '开机时间' },
|
{ value: this.closedLong, name: '关机时间' }]
|
}]
|
}
|
this.UtilizationLine.setOption(statChartPieOption1)
|
|
//运行时间\待机时间
|
this.StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons')
|
let statChartPieOption2 = {
|
tooltip: {
|
trigger: 'item',
|
formatter: params => {
|
const value = String(params.value)
|
return value.length == 2 && value[0] === '0' ? `${params.seriesName}<br/>${params.name}：${value.slice(1)}H（${params.percent}%）` : `${params.seriesName}<br/>${params.name}：${value}H（${params.percent}%）`
|
}
|
},
|
legend: {
|
orient: 'vertical',
|
x: '85%',
|
y: '50%',
|
data: ['运行时间', '待机时间']
|
},
|
calculable: true,
|
series: [{
|
name: '运行效率',
|
type: 'pie',
|
radius: '70%',
|
itemStyle: {
|
normal: {
|
color: function(params) {
|
var colorList = ['#4ecee1', '#FCCE10']
|
return colorList[params.dataIndex]
|
},
|
label: {
|
show: true,
|
position: 'top',
|
formatter: params => {
|
const value = String(params.value)
|
return value.length == 2 && value[0] === '0' ? params.name + ' ' + value.slice(1) + 'H' : params.name + ' ' + value + 'H'
|
}
|
}
|
}
|
},
|
data: [{ value: this.processLong, name: '运行时间' },
|
{ value: this.waitingLong, name: '待机时间' }]
|
}]
|
}
|
this.StartupLine.setOption(statChartPieOption2)
|
},
|
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.StartupHeight
|
this.StartupHeight = res.result.StartupHeight
|
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
|
})
|
},
|
dateChange(val) {
|
this.queryParam.collectTime1 = ''
|
if (val) {
|
this.queryParams.dateTime = val.format('YYYYMMDD')
|
this.queryParams.collectTime = val.format('YYYY-MM-DD')
|
}
|
},
|
initEquipmentNode() {
|
this.spinning = true
|
let _this = this
|
getAction(this.url.getBaseTree).then((res) => {
|
if (res.success) {
|
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.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 {
|
flex: 1;
|
margin-bottom: 15px;
|
background-color: #fff;
|
}
|
|
#StatisticsLegend .UtilizationStartup {
|
flex: 1;
|
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;
|
}
|
|
.Line-box {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.Line-box .box-bottom {
|
flex: 1;
|
}
|
|
.PowerOnRate-box {
|
display: flex;
|
}
|
|
.PowerOnRate-box .PowerOnRate_text {
|
width: 10%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
font-weight: 800;
|
}
|
|
.PowerOnRate-box .PowerOnRate-right {
|
flex: 1;
|
}
|
|
.Utilization-box {
|
display: flex;
|
}
|
|
.Utilization-box .Utilization-right {
|
flex: 1;
|
}
|
|
.Startup-box {
|
display: flex;
|
}
|
|
.Startup-box .Startup-right {
|
flex: 1;
|
}
|
</style>
|
