<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="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"/>
|
</a-form-item>
|
</a-col>
|
<a-col :md="3" :sm="3" :xs="3">
|
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
</a-col>
|
<a-col :md="2" :sm="2" :xs="2">
|
<a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
<!--开机率-->
|
<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_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: #4169E1;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: #00ee00"/></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 class="circle"></div>-->
|
<!--<div class="text">开机率</div>-->
|
<!--</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 class="circle"></div>-->
|
<!--<div class="text">开动率</div>-->
|
<!--</div>-->
|
<div class="Startup-box box-bottom">
|
<div class="Startup-right" ref="StartupLine" id="StartupLine"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
import { putAction, getAction } from '@/api/manage'
|
import $ from 'jquery'
|
import AFormItem from 'ant-design-vue/es/form/FormItem'
|
import * as echarts from 'echarts'
|
export default {
|
name: 'StatisticalAnalysisMain',
|
components:{
|
AFormItem
|
|
},
|
props: { equip: {} },
|
data(){
|
return{
|
readOnly:true,
|
showday:true,
|
StatCharOpeningRate:0,
|
StatCharUsedRate:0,
|
StatCharUsedopeningRate:0,
|
openingLong:0,
|
waitingLong:0,
|
processLong:0,
|
closedLong:0,
|
totalLong:0,
|
UtilizationHeight:0,
|
StartupHeight:0,
|
quip:{},
|
dates: [],
|
queryParam: {},
|
queryParams:{
|
collectTime:undefined,
|
},
|
shiftSubList: [],
|
shiftList: [],
|
url: {
|
getEquipmentByPid: '/mdc/mdcequipment/getEquipmentByPid',
|
dayStatisticalRate:'/mdc/efficiencyReport/dayStatisticalRate',
|
getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction',
|
},
|
}
|
},
|
created(){
|
|
|
let collectTime = moment(moment().add(-1,'d'),'YYYY-MM-DD');
|
|
|
this.queryParams.collectTime = collectTime;
|
|
this.queryParams.dateTime = this.queryParams.collectTime.format('YYYYMMDD')
|
this.initEquipmentNode('-1')
|
this.queryStatistical();
|
// this.getTime(37800);
|
},
|
|
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;
|
},
|
moment,
|
draw(){
|
//开始时间\关机时间\运行时间\待机时间
|
let 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
|
},
|
toolbox: {
|
show : true,
|
padding: 15,
|
feature : {
|
saveAsImage : {show: true,title:'保存图片',name :'设备效率统计报表'}
|
}
|
},
|
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: 'line',
|
// smooth:true,
|
// symbol: 'circle',
|
// symbolSize: 8,
|
// label:{
|
// show:true,
|
// position:"top",
|
// textStyle:{
|
// color:'#000',
|
// },
|
// formatter:"时长：{c}H"
|
// },
|
// itemStyle: {
|
// color: "rgb(87, 120, 225)",
|
// borderColor: "#fff",
|
// borderWidth: 2,
|
// shadowColor: 'rgba(0, 0, 0, .3)',
|
// },
|
// lineStyle: {
|
// normal: {
|
// color:"rgb(87, 120, 225)",
|
// shadowColor: 'rgba(87, 120, 225, .4)',
|
// shadowBlur: 8,
|
// shadowOffsetY: 10,
|
// shadowOffsetX: 0,
|
// },
|
// },
|
// areaStyle: {
|
// normal: {
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
// offset: 0,
|
// color: 'rgba(87, 120, 225, .6)'
|
// }, {
|
// offset: 1,
|
// color: 'rgba(87, 120, 225, .3)'
|
// }]),
|
// }
|
// },
|
// data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong],
|
// },
|
{
|
name:'柱状图',
|
type: 'bar',
|
data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong],
|
barWidth: 25,
|
label:{
|
show:true,
|
position:"top",
|
textStyle:{
|
color:'#000',
|
},
|
formatter:"时长：{c}H"
|
},
|
itemStyle: {
|
normal: {
|
color: function(params) {
|
let colorList = [
|
["#6496e9","#6bded3"],
|
["#ffbb65","#fdc68b"],
|
["#4fe1c5","#4ecee1"],
|
["#9978fa","#88a1fa"],
|
];
|
// return colorList[params.dataIndex];
|
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],
|
}
|
},
|
}]
|
}
|
PowerOnRateLine.setOption(PowerOnRateLine_option);
|
//开机时间\关机时间
|
let UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons');
|
let statChartPieOption1 = {
|
title: {
|
x: 'left',
|
subtext: '开机效率'
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
},
|
legend: {
|
orient: 'vertical',
|
x: 'left',
|
y: 'bottom',
|
data: ['开机时间', '关机时间']
|
},
|
calculable: true,
|
series: [{
|
name: '开机效率',
|
type: 'pie',
|
radius: '70%',
|
/*center: ['55%', '55%'],*/
|
itemStyle: {
|
normal: {
|
color: function (params) {
|
let colorList = ['#4169E1', '#A8A8A8'];
|
return colorList[params.dataIndex]
|
},
|
label: {
|
show: true,
|
position: 'top',
|
formatter: '{b}\n{c}'
|
}
|
}
|
},
|
data: [{value: this.openingLong, name: '开机时间'},
|
{value: this.closedLong, name: '关机时间'}]
|
}]
|
};
|
UtilizationLine.setOption(statChartPieOption1);
|
|
//运行时间\待机时间
|
let StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons');
|
let statChartPieOption2 = {
|
title: {
|
x: 'left',
|
subtext: '运行效率'
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
},
|
legend: {
|
orient: 'vertical',
|
x: 'left',
|
y: 'bottom',
|
data: ['运行时间', '待机时间']
|
},
|
calculable: true,
|
series: [{
|
name: '运行效率',
|
type: 'pie',
|
radius: '70%',
|
center: ['55%', '55%'],
|
itemStyle: {
|
normal: {
|
color: function (params) {
|
var colorList = ['#00ee00', '#FCCE10'];
|
return colorList[params.dataIndex]
|
},
|
label: {
|
show: true,
|
position: 'top',
|
formatter: '{b}\n{c}'
|
}
|
}
|
},
|
data: [{value: this.processLong, name: '运行时间'},
|
{value: this.waitingLong, name: '待机时间'}]
|
}]
|
};
|
StartupLine.setOption(statChartPieOption2);
|
},
|
queryStatistical(){
|
getAction(this.url.dayStatisticalRate,this.queryParams).then(res =>{
|
if(res.success){
|
// console.log(res);
|
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();
|
}
|
})
|
},
|
dataChange(val) {
|
this.queryParam.collectTime1 = "";
|
this.queryParams.dateTime = val.format('YYYYMMDD')
|
this.queryParams.collectTime = val.format('YYYY-MM-DD');
|
|
},
|
initEquipmentNode(id) {
|
let _this = this
|
getAction(this.url.getBaseTree).then((res) => {
|
if (res.success) {
|
// console.log(res.result[0].entity.tierName)
|
_this.$set(this.queryParam, 'tierName', res.result[0].title)
|
} else {
|
this.$message.warn(res.message)
|
}
|
}).finally(() => {
|
this.loading = false
|
this.cardLoading = false
|
})
|
// getAction(this.url.getEquipmentByPid, { pid: id }).then((res) => {
|
// if (res.success) {
|
// if (res.result) {
|
// _this.$set(this.queryParam, 'tierName', res.result.tierName)
|
// _this.$set(this.queryParam, 'equipmentId', res.result.equipmentId)
|
// // _this.quip = res.result
|
// _this.searchQuery()
|
// } else {
|
// _this.$message.warning('请配置设备！')
|
// }
|
// }
|
// })
|
},
|
searchReset() {
|
this.queryParam = {}
|
this.queryParams = {}
|
// this.dates = []
|
this.queryStatistical()
|
// this.onClearSelected()
|
},
|
searchQuery(){
|
this.queryStatistical();
|
}
|
},
|
watch: {
|
equip(val) {
|
// console.log(val);
|
if (val && val.equipmentId) {
|
this.$set(this.queryParam, 'tierName', val.title)
|
this.$set(this.queryParam, 'equipmentId', val.equipmentId)
|
this.queryParams.parentId = ''
|
this.queryParams.equipmentIds = val.equipmentId
|
this.searchQuery()
|
}else{
|
this.queryParams.parentId = val.key
|
this.queryParams.equipmentIds = ''
|
this.$set(this.queryParam, 'tierName', val.title)
|
this.searchQuery()
|
}
|
this.searchQuery()
|
}
|
// this.searchQuery();
|
|
|
}
|
|
}
|
</script>
|
|
<style scoped>
|
.charContent{
|
display: flex;
|
}
|
@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;
|
}
|
}
|
#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;
|
}
|
.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_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-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;
|
|
/*border: 6px solid red;*/
|
/*!*background-color: yellow;*!*/
|
/*border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;*/
|
}
|
.left-box-con{
|
width: 100%;
|
height: 100%;
|
position: relative;
|
text-align: center;
|
border: 6px solid red;
|
/*background-color: yellow;*/
|
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-color: green;*/
|
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;
|
}
|
.con-left{
|
display: flex;
|
flex-direction: column;
|
flex-wrap: wrap;
|
justify-content: space-around;
|
align-items: center;
|
}
|
.con-left>span{
|
flex: 1;
|
}
|
</style>
|
