From 3a73cd63039981d1f7cd324afea8f14f37738467 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期五, 07 三月 2025 11:24:49 +0800
Subject: [PATCH] 1、统计分析和统计图表、对比分析和利用率走势分析、利用率分段分析和报警分析页面新增筛选条件保持跟TEEP页面一致 2、全局中重要程度的筛选方式由多选改为单选 3、设备监控与车间看板页面的设备详情弹窗中的图表调整为一直展示但若无数据则不展示图表的指针与数值
---
src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue | 647 +++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 412 insertions(+), 235 deletions(-)
diff --git a/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue b/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue
index 6185aa3..eb4fe8a 100644
--- a/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue
+++ b/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue
@@ -1,7 +1,8 @@
<template>
- <div id="StatisticsLegend" style="width: 100%; height: 100%; overflow: hidden;display: flex;flex-direction: column;background-color: #f5f4f4">
+ <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">
+ <div style="width: 100%; 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">
@@ -9,11 +10,91 @@
<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" :allowClear="false"/>
+ <a-col :md="5" :sm="5">
+ <a-form-item label="璁惧绫诲瀷">
+ <a-select
+ :value="queryParams.equipmentType"
+ mode="multiple"
+ placeholder="璇烽�夋嫨璁惧绫诲瀷"
+ allow-clear
+ :maxTagCount="1"
+ @change="selectChange($event,'equipmentType')"
+ >
+ <a-select-option v-for="(item,index) in equipmentTypeList" :value="item.value" :key="index">
+ {{item.label}}
+ </a-select-option>
+ </a-select>
</a-form-item>
</a-col>
+ <a-col :md="7" :sm="7">
+ <a-form-item label="椹卞姩绫诲瀷">
+ <a-select
+ :value="queryParams.driveType"
+ mode="multiple"
+ placeholder="璇烽�夋嫨椹卞姩绫诲瀷"
+ allow-clear
+ :maxTagCount="1"
+ @change="selectChange($event,'driveType')"
+ >
+ <a-select-option v-for="(item,index) in driveTypeList" :value="item.value" :key="index">
+ {{item.label}}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ </a-col>
+ <a-col :md="5" :sm="5" :xs="5">
+ <a-form-item label="鏃ユ湡">
+ <a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" format='YYYY-MM-DD'
+ @change="handleDateChange" :allowClear="false" style="width: 100%"/>
+ </a-form-item>
+ </a-col>
+ <a-col :md="2" :sm="2">
+ <a
+ @click="toggleSearchStatus=!toggleSearchStatus"
+ @selectstart="$event.preventDefault()"
+ style="display: inline-block;height: 32px;line-height: 32px"
+ >
+ {{ toggleSearchStatus ? '鏀惰捣' : '灞曞紑' }}
+ <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
+ </a>
+ </a-col>
+ </a-row>
+
+ <a-row :gutter="24" v-if="toggleSearchStatus">
+ <a-col :md="5" :sm="5" :xs="5">
+ <a-form-item label="璁惧绾у埆">
+ <a-select
+ :value="queryParams.deviceLevel"
+ mode="multiple"
+ placeholder="璇烽�夋嫨璁惧绾у埆"
+ allow-clear
+ :maxTagCount="1"
+ @change="selectChange($event,'deviceLevel')"
+ >
+ <a-select-option v-for="(item,index) in device_level_list" :value="item.value" :key="index">
+ {{item.label}}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ </a-col>
+
+ <a-col :md="5" :sm="5" :xs="5">
+ <a-form-item label="閲嶈绋嬪害">
+ <a-select
+ v-model="queryParams.deviceImportanceLevel"
+ placeholder="璇烽�夋嫨璁惧閲嶈绋嬪害"
+ allow-clear
+ >
+ <a-select-option v-for="(item,index) in device_importance_level_list" :value="item.value"
+ :key="index">
+ {{item.label}}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ </a-col>
+ </a-row>
+
+ <a-row :gutter="24">
<a-col :md="2" :sm="2" :xs="2">
<a-space>
<a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
@@ -26,8 +107,8 @@
<!--寮�鏈虹巼-->
<div class="PowerOnRate Line-box">
<!--<div class="title">-->
- <!--<div class="circle"></div>-->
- <!--<div class="text">鍒╃敤鐜�</div>-->
+ <!--<div class="circle"></div>-->
+ <!--<div class="text">鍒╃敤鐜�</div>-->
<!--</div>-->
<div class="PowerOnRate-box box-bottom">
<!--<div class="PowerOnRate-left" ref="PowerOnRatePie" id="PowerOnRatePie"></div>-->
@@ -38,22 +119,30 @@
<p>{{StatCharUsedRate}}%</p>
</div>
<div class="PowerOnRate-right" ref="PowerOnRateLine" id="PowerOnRateLine"></div>
- <div class="PowerOnRate_text" style="width: 8%">
+ <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="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="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="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="right">
+ <div style="width: 15px;height: 15px;background-color: #FCCE10"/>
+ </td>
<td align="left">寰呮満</td>
</tr>
</table>
@@ -87,70 +176,108 @@
<script>
import moment from 'moment'
import { putAction, getAction } from '@/api/manage'
- import $ from 'jquery'
import * as echarts from 'echarts'
+ import api from '@/api/mdc'
+ import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
+
export default {
name: 'StatisticalAnalysisMain',
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:{},
+ 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: [],
+ equipmentTypeList: [],
+ driveTypeList: [],
+ device_level_list: [],
+ device_importance_level_list: [],
queryParam: {},
- queryParams:{
- collectTime:null,
+ queryParams: {
+ equipmentType: [],
+ driveType: [],
+ deviceLevel: [],
+ collectTime: null
},
- shiftSubList: [],
- shiftList: [],
+ toggleSearchStatus: false,
url: {
getEquipmentByPid: '/mdc/mdcequipment/getEquipmentByPid',
- dayStatisticalRate:'/mdc/efficiencyReport/dayStatisticalRate',
+ dayStatisticalRate: '/mdc/efficiencyReport/dayStatisticalRate',
getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction',
- },
+ queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType'
+ }
}
},
- created(){
+ 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.queryParams.collectTime = moment().add(-1, 'd').format('YYYY-MM-DD')
+ this.queryParams.dateTime = moment().add(-1, 'd').format('YYYYMMDD')
this.initEquipmentNode()
- // this.queryStatistical();
- // this.getTime(37800);
+ this.queryGroup()
+ this.getDriveTypeByApi()
+ this.initDictData('device_level')
+ this.initDictData('device_importance_level')
},
- methods:{
- disabledDate(current){
- //Can not slect days before today and today
- return current && current > moment().subtract('days', 1);
+ methods: {
+ queryGroup() {
+ getAction(this.url.queryEquipmentType).then(res => {
+ if (res.success) {
+ this.equipmentTypeList = res.result.map(item => {
+ return {
+ label: item.equipmentTypeName,
+ value: item.equipmentTypeName
+ }
+ })
+ } else {
+ this.$notification.warning({
+ message: '娑堟伅',
+ description: res.message
+ })
+ }
+ })
},
- //鎶婄璁＄畻鎴愬搴旂殑鏃跺垎绉掔殑鍑芥暟
- getTime(time){
- //杞崲涓烘椂鍒嗙
- let h = Math.round(time / 60 / 60)
- h = h <10 ? '0' + h : h
- //浣滀负杩斿洖鍊艰繑鍥�
- // console.log(h);
- return h;
+
+ // 璋冪敤鎺ュ彛鑾峰彇鎺у埗绯荤粺绫诲瀷
+ getDriveTypeByApi() {
+ api.getDriveTypeApi().then((res) => {
+ if (res.success) this.driveTypeList = res.result
+ })
},
- moment,
- draw(){
+
+ initDictData(dictCode) {
+ // //浼樺厛浠庣紦瀛樹腑璇诲彇瀛楀吀閰嶇疆
+ if (getDictItemsFromCache(dictCode)) {
+ this[dictCode + '_list'] = getDictItemsFromCache(dictCode)
+ return
+ }
+ //鏍规嵁瀛楀吀Code, 鍒濆鍖栧瓧鍏告暟缁�
+ ajaxGetDictItems(dictCode, null).then((res) => {
+ if (res.success) {
+ this[dictCode + '_list'] = res.result
+ return
+ }
+ })
+ },
+
+
+ draw() {
//寮�濮嬫椂闂碶鍏虫満鏃堕棿\杩愯鏃堕棿\寰呮満鏃堕棿
- let PowerOnRateLine = this.$echarts.init(document.getElementById('PowerOnRateLine'), 'macarons');
+ let PowerOnRateLine = this.$echarts.init(document.getElementById('PowerOnRateLine'), 'macarons')
let PowerOnRateLine_option = {
- tooltip:{
- trigger: 'axis',
+ tooltip: {
+ trigger: 'axis'
},
grid: {
left: '3%',
@@ -166,50 +293,50 @@
// saveAsImage : {show: true,title:'淇濆瓨鍥剧墖',name :'璁惧鏁堢巼缁熻鎶ヨ〃'}
// }
// },
- xAxis :{
- type : 'category',
- data:['寮�鏈烘椂闀�','鍏虫満鏃堕暱','杩愯鏃堕暱','寰呮満鏃堕暱'],
- axisLabel:{ //鍧愭爣杞村瓧浣撻鑹�
- textStyle:{
+ xAxis: {
+ type: 'category',
+ data: ['寮�鏈烘椂闀�', '鍏虫満鏃堕暱', '杩愯鏃堕暱', '寰呮満鏃堕暱'],
+ axisLabel: { //鍧愭爣杞村瓧浣撻鑹�
+ textStyle: {
color: '#000'
}
},
- axisLine:{
- lineStyle:{
- color:"#e5e5e5"
+ axisLine: {
+ lineStyle: {
+ color: '#e5e5e5'
}
},
- axisTick:{ //y杞村埢搴︾嚎
- show:false
+ axisTick: { //y杞村埢搴︾嚎
+ show: false
},
- splitLine:{ //缃戞牸
- show: false,
+ splitLine: { //缃戞牸
+ show: false
},
- boundaryGap: true,
+ boundaryGap: true
},
- yAxis :{
+ yAxis: {
name: '鏃堕棿/灏忔椂',
- type : 'value',
- axisLabel:{ //鍧愭爣杞村瓧浣撻鑹�
- textStyle:{
+ type: 'value',
+ axisLabel: { //鍧愭爣杞村瓧浣撻鑹�
+ textStyle: {
color: '#000'
}
},
- axisLine:{
- show:false,
+ axisLine: {
+ show: false
},
- axisTick:{ //y杞村埢搴︾嚎
- show:false
+ axisTick: { //y杞村埢搴︾嚎
+ show: false
},
- splitLine:{ //缃戞牸
+ splitLine: { //缃戞牸
show: true,
- color:'#dadde4',
- lineStyle:{
- type:"dashed"
+ color: '#dadde4',
+ lineStyle: {
+ type: 'dashed'
}
}
},
- series:[
+ series: [
// {
// name:'鏇茬嚎',
// type: 'line',
@@ -253,53 +380,53 @@
// data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong],
// },
{
- name:'鏌辩姸鍥�',
+ name: '鏌辩姸鍥�',
type: 'bar',
- data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong],
+ data: [this.openingLong, this.closedLong, this.processLong, this.waitingLong],
// data:[22,3,4,5],
barWidth: 25,
- label:{
- show:true,
- position:"top",
- textStyle:{
- color:'#000',
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ color: '#000'
},
// formatter:"鏃堕暱锛歿c}H",
- formatter:params=>{
- const value=String(params.value)
- return value.length==2&&value[0]==='0'?`鏃堕暱锛�${value.slice(1)}H`:`鏃堕暱锛�${value}H`
+ 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"],
+ ['#6496e9', '#6bded3'],
+ ['#849db8', '#b4b8cc'],
+ ['#4fe1c5', '#4ecee1'],
// ["#9978fa","#88a1fa"],
- ["#ffbb65","#fdc68b"],
- ];
+ ['#ffbb65', '#fdc68b']
+ ]
// return colorList[params.dataIndex];
- let colorItem = colorList[params.dataIndex];
- return new echarts.graphic.LinearGradient(0,0,0,1,[{
- offset:0,
- color:colorItem[0]
+ 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)
+ offset: 1,
+ color: colorItem[1]
+ }], false)
},
- barBorderRadius: [5, 5, 0, 0],
+ barBorderRadius: [5, 5, 0, 0]
}
- },
+ }
}]
}
- PowerOnRateLine.setOption(PowerOnRateLine_option);
+ PowerOnRateLine.setOption(PowerOnRateLine_option)
//寮�鏈烘椂闂碶鍏虫満鏃堕棿
- let UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons');
- let statChartPieOption1 = {
+ let UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons')
+ let statChartPieOption1 = {
// title: {
// x: 'left',
// subtext: '寮�鏈烘晥鐜�',
@@ -312,9 +439,9 @@
tooltip: {
trigger: 'item',
// formatter: "{a} <br/>{b} : {c} ({d}%)"锛�
- 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}%锛塦
+ 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: {
@@ -331,8 +458,8 @@
/*center: ['55%', '55%'],*/
itemStyle: {
normal: {
- color: function (params) {
- let colorList = [ '#6496e9','#849db8'];
+ color: function(params) {
+ let colorList = ['#6496e9', '#849db8']
return colorList[params.dataIndex]
},
label: {
@@ -340,21 +467,21 @@
position: 'top',
// formatter: '{b}\n{c}',
// formatter:params=>String(params.value).length==2?params.name+String(params.value).slice(1):params.name+String(params.value)
- formatter:params=>{
- const value=String(params.value)
- return value.length==2&&value[0]==='0'?params.name+' '+value.slice(1)+'H':params.name+' '+value+'H'
+ 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: '鍏虫満鏃堕棿'}]
+ data: [{ value: this.openingLong, name: '寮�鏈烘椂闂�' },
+ { value: this.closedLong, name: '鍏虫満鏃堕棿' }]
}]
- };
- UtilizationLine.setOption(statChartPieOption1);
+ }
+ UtilizationLine.setOption(statChartPieOption1)
//杩愯鏃堕棿\寰呮満鏃堕棿
- let StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons');
+ let StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons')
let statChartPieOption2 = {
// title: {
// x: 'left',
@@ -363,9 +490,9 @@
tooltip: {
trigger: 'item',
// formatter: "{a} <br/>{b} : {c} ({d}%)",
- 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}%锛塦
+ 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: {
@@ -381,101 +508,119 @@
radius: '70%',
itemStyle: {
normal: {
- color: function (params) {
- var colorList = ['#4ecee1', '#FCCE10'];
+ color: function(params) {
+ var colorList = ['#4ecee1', '#FCCE10']
return colorList[params.dataIndex]
},
label: {
show: true,
position: 'top',
// formatter: '{b}\n{c}',
- formatter:params=>{
- const value=String(params.value)
- return value.length==2&&value[0]==='0'?params.name+' '+value.slice(1)+'H':params.name+' '+value+'H'
+ 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: '寰呮満鏃堕棿'}]
+ data: [{ value: this.processLong, name: '杩愯鏃堕棿' },
+ { value: this.waitingLong, name: '寰呮満鏃堕棿' }]
}]
- };
- StartupLine.setOption(statChartPieOption2);
+ }
+ StartupLine.setOption(statChartPieOption2)
},
- queryStatistical(){
- getAction(this.url.dayStatisticalRate,this.queryParams).then(res =>{
- if(res.success) {
- // console.log(res);
- this.StatCharOpeningRate = res.result.openRate;
+
+ queryStatistical(queryParams) {
+ getAction(this.url.dayStatisticalRate, queryParams).then(res => {
+ if (res.success) {
+ this.StatCharOpeningRate = res.result.openRate
//鍒╃敤鐜�
- this.StatCharUsedRate = res.result.utilizationRate;
+ this.StatCharUsedRate = res.result.utilizationRate
//寮�鏈虹巼
- this.UtilizationHeight = res.result.openRate;
- this.StatCharUsedopeningRate = res.result.StartupHeight;
- this.StartupHeight = res.result.StartupHeight;
+ 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();
+ 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 = "";
- if(val){
- this.queryParams.dateTime = val.format('YYYYMMDD')
- this.queryParams.collectTime = val.format('YYYY-MM-DD');
- }
- },
+
initEquipmentNode() {
let _this = this
getAction(this.url.getBaseTree).then((res) => {
if (res.success) {
- if(res.result[0]){
+ if (res.result[0]) {
_this.$set(this.queryParam, 'tierName', res.result[0].title)
_this.$set(this.queryParams, 'parentId', res.result[0].key)
}
- // console.log(res.result[0].entity.tierName)
- _this.queryStatistical()
+ _this.queryStatistical(this.queryParams)
} else {
- // this.$message.warn(res.message)
this.$notification.warning({
- message:'娑堟伅',
- description:res.message
- });
+ message: '娑堟伅',
+ description: 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('璇烽厤缃澶囷紒')
- // }
- // }
- // })
},
+
+ searchQuery() {
+ const queryParams = Object.assign({}, this.queryParams)
+
+ Object.keys(queryParams).forEach(item => {
+ if (Array.isArray(queryParams[item])) {
+ queryParams[item] = queryParams[item].join()
+ // 姝ゅ涓轰繚璇佹帴鍙ｅ弬鏁颁笉澶氫綑锛屽彲鐪佺暐
+ if (queryParams[item].length === 0) delete queryParams[item]
+ }
+ })
+ this.queryStatistical(queryParams)
+ },
+
+ handleDateChange(val) {
+ this.queryParam.collectTime1 = ''
+ if (val) {
+ this.queryParams.dateTime = val.format('YYYYMMDD')
+ this.queryParams.collectTime = val.format('YYYY-MM-DD')
+ }
+ },
+
+ selectChange(value, key) {
+ this.queryParams[key] = value
+ },
+
searchReset() {
this.queryParam = {}
this.queryParams = {
- collectTime:moment().add(-1,'d').format('YYYY-MM-DD'),
- dateTime:moment().add(-1,'d').format('YYYYMMDD')
+ equipmentType: [],
+ driveType: [],
+ deviceLevel: [],
+ collectTime: moment().add(-1, 'd').format('YYYY-MM-DD'),
+ dateTime: moment().add(-1, 'd').format('YYYYMMDD')
}
this.initEquipmentNode()
- // this.dates = []
- // this.queryStatistical()
- // this.onClearSelected()
},
- searchQuery(){
- this.queryStatistical();
+
+ 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
}
},
watch: {
@@ -485,7 +630,7 @@
this.$set(this.queryParam, 'equipmentId', val.equipmentId)
this.queryParams.parentId = ''
this.queryParams.equipmentId = val.equipmentId
- }else{
+ } else {
this.queryParams.parentId = val.key
this.queryParams.equipmentId = ''
this.$set(this.queryParam, 'tierName', val.title)
@@ -497,85 +642,102 @@
</script>
<style scoped>
- .charContent{
+ .charContent {
display: flex;
}
- @media screen and (min-width: 1920px){
- #StatisticsLegend{
- height: 748px!important;
+
+ @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;
+
+ @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;
+
+ @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;
+
+ @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;
+
+ @media screen and (max-width: 1280px) {
+ #StatisticsLegend {
+ height: 501px !important;
overflow: scroll;
}
}
- #StatisticsLegend .PowerOnRate{
+
+ #StatisticsLegend .PowerOnRate {
flex: 1;
margin-bottom: 15px;
background-color: #fff;
}
- #StatisticsLegend .UtilizationStartup{
+
+ #StatisticsLegend .UtilizationStartup {
flex: 1;
display: flex;
}
- #StatisticsLegend .UtilizationStartup>div{
+
+ #StatisticsLegend .UtilizationStartup > div {
flex: 1;
background-color: #fff;
}
- #StatisticsLegend .UtilizationStartup .Utilization{
+
+ #StatisticsLegend .UtilizationStartup .Utilization {
margin-right: 15px;
}
- .title{
+
+ .title {
display: flex;
align-items: center;
padding-left: 15px;
padding-top: 5px;
}
- .title .circle{
+
+ .title .circle {
width: 15px;
height: 15px;
background-color: #7282ec;
border-radius: 100%;
margin-right: 10px;
}
- .title .text{
+
+ .title .text {
font-size: 2vh;
}
- .Line-box{
+
+ .Line-box {
display: flex;
flex-direction: column;
}
- .Line-box .box-bottom{
+
+ .Line-box .box-bottom {
flex: 1;
}
- .PowerOnRate-box{
+
+ .PowerOnRate-box {
display: flex;
}
- .PowerOnRate-box .PowerOnRate-left{
+
+ .PowerOnRate-box .PowerOnRate-left {
width: 25%;
}
- .PowerOnRate-box .PowerOnRate_text{
+
+ .PowerOnRate-box .PowerOnRate_text {
width: 10%;
display: flex;
flex-direction: column;
@@ -583,32 +745,41 @@
justify-content: center;
font-weight: 800;
}
- .PowerOnRate-box .PowerOnRate-right{
+
+ .PowerOnRate-box .PowerOnRate-right {
flex: 1;
}
- .Utilization-box{
+
+ .Utilization-box {
display: flex;
}
- .Utilization-box .Utilization-left{
+
+ .Utilization-box .Utilization-left {
width: 25%;
}
- .Utilization-box .Utilization-right{
+
+ .Utilization-box .Utilization-right {
flex: 1;
}
- .Startup-box{
+
+ .Startup-box {
display: flex;
}
- .Startup-box .Startup-left{
+
+ .Startup-box .Startup-left {
width: 25%;
}
- .Startup-box .Startup-right{
+
+ .Startup-box .Startup-right {
flex: 1;
}
- .left{
+
+ .left {
display: flex;
align-items: center;
}
- .left .left-box{
+
+ .left .left-box {
width: 65%;
height: 60%;
margin: 0 auto;
@@ -619,7 +790,8 @@
/*!*background-color: yellow;*!*/
/*border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;*/
}
- .left-box-con{
+
+ .left-box-con {
width: 100%;
height: 100%;
position: relative;
@@ -628,16 +800,18 @@
/*background-color: yellow;*/
border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;
}
- .left .left-box .Rate-box-kong{
+
+ .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%);
+ 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{
+
+ .left .left-box .Rate-box {
position: absolute;
text-align: center;
bottom: 0;
@@ -645,27 +819,30 @@
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%);
+ 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{
+
+ .left .left-box .Rate-box p {
position: absolute;
bottom: 0;
color: #fff;
width: 100%;
text-align: center;
}
- .con-left{
+
+ .con-left {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
- .con-left>span{
+
+ .con-left > span {
flex: 1;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3