From 9733e3b67cd1abe6e7ce298cc048fabd86c0f24e Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期三, 25 六月 2025 10:01:09 +0800
Subject: [PATCH] 1、报警分析页面饼图种类过多时饼图颜色出现白色与背景色一致导致无法区分 2、综合效率分析页面计算OEE功能新增loading提示 3、统计分析和统计图表页面新增图表数据加载提示以及优化图表展示增加分辨率适应及代码
---
src/views/mdc/base/StatisticsChart.vue | 36 -
src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue | 739 +++++++++++++-------------------
src/views/mdc/base/StatisticalAnalysis.vue | 38 -
src/views/mdc/base/modules/OEEAnalysis/ComputeOeeModal.vue | 26
src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue | 377 ++++++----------
src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue | 97 ---
6 files changed, 505 insertions(+), 808 deletions(-)
diff --git a/src/views/mdc/base/StatisticalAnalysis.vue b/src/views/mdc/base/StatisticalAnalysis.vue
index c5b8308..72da186 100644
--- a/src/views/mdc/base/StatisticalAnalysis.vue
+++ b/src/views/mdc/base/StatisticalAnalysis.vue
@@ -1,45 +1,35 @@
<template>
<a-card :bordered="false">
- <div style="width: 100%; height: 100%;overflow: hidden">
- <a-row type="flex" :gutter="16">
- <a-col :md="5" :sm="24">
- <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
- </a-col>
- <a-col :md="24-5" :sm="24">
- <statistical-analysis-main :equip="selectEquementnode"></statistical-analysis-main>
- </a-col>
- </a-row>
- </div>
+ <a-row type="flex" :gutter="16">
+ <a-col :md="5" :sm="24">
+ <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
+ </a-col>
+ <a-col :md="24-5" :sm="24">
+ <statistical-analysis-main :equip="selectEquipmentNode"></statistical-analysis-main>
+ </a-col>
+ </a-row>
</a-card>
</template>
<script>
import BaseTree from '../common/BaseTree'
import StatisticalAnalysisMain from './modules/StatisticalAnalysis/StatisticalAnalysisMain'
+
export default {
name: 'StatisticalAnalysis',
- components:{
+ components: {
BaseTree,
StatisticalAnalysisMain
},
data() {
return {
- description: '璁惧淇℃伅',
- selectEquementnode:{},
- equipmentStatisticsInfo:{},
- url:{
- equipmentStatistics:"/mdc/equipment/equipmentStatistics"
- }
+ selectEquipmentNode: {}
}
},
methods: {
- changeSelectionNode(val){
- this.selectEquementnode = val
+ changeSelectionNode(val) {
+ this.selectEquipmentNode = val
}
}
}
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/views/mdc/base/StatisticsChart.vue b/src/views/mdc/base/StatisticsChart.vue
index ddea5ef..e8523aa 100644
--- a/src/views/mdc/base/StatisticsChart.vue
+++ b/src/views/mdc/base/StatisticsChart.vue
@@ -1,45 +1,35 @@
<template>
<a-card :bordered="false">
- <div style="width: 100%; height: 100%;overflow: hidden">
- <a-row type="flex" :gutter="16">
- <a-col :md="5" :sm="24">
- <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
- </a-col>
- <a-col :md="24-5" :sm="24">
- <statistics-legend :equip="selectEquementnode"></statistics-legend>
- </a-col>
- </a-row>
- </div>
+ <a-row type="flex" :gutter="16">
+ <a-col :md="5" :sm="24">
+ <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
+ </a-col>
+ <a-col :md="24-5" :sm="24">
+ <statistics-legend :equip="selectEquipmentNode"></statistics-legend>
+ </a-col>
+ </a-row>
</a-card>
</template>
<script>
import BaseTree from '../common/BaseTree'
import StatisticsLegend from './modules/StatisticsChart/StatisticsLegend'
+
export default {
name: 'StatisticsChart',
- components:{
+ components: {
BaseTree,
StatisticsLegend
},
data() {
return {
- description: '璁惧淇℃伅',
- selectEquementnode:{},
- equipmentStatisticsInfo:{},
- url:{
- equipmentStatistics:"/mdc/equipment/equipmentStatistics"
- }
+ selectEquipmentNode: {}
}
},
methods: {
- changeSelectionNode(val){
- this.selectEquementnode = val
+ changeSelectionNode(val) {
+ this.selectEquipmentNode = val
}
}
}
</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/views/mdc/base/modules/OEEAnalysis/ComputeOeeModal.vue b/src/views/mdc/base/modules/OEEAnalysis/ComputeOeeModal.vue
index 1445eee..91e11fb 100644
--- a/src/views/mdc/base/modules/OEEAnalysis/ComputeOeeModal.vue
+++ b/src/views/mdc/base/modules/OEEAnalysis/ComputeOeeModal.vue
@@ -1,17 +1,17 @@
<template>
- <a-modal title="璁＄畻OEE" :visible="visible" :width="550" @cancel="handleModalClose" @ok="handleComputeOee"
- :maskClosable="false">
+ <j-modal title="璁＄畻OEE" :visible="visible" :width="550" @cancel="handleModalClose" @ok="handleComputeOee"
+ :maskClosable="false" :confirmLoading="confirmLoading">
<a-form-model :model="model" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
<a-row>
<a-col :span="24">
<a-form-model-item label="鏃ユ湡">
<a-range-picker v-model="dates" style="width: 100%" value-format="YYYY-MM-DD"
- @change="dateParamChange"></a-range-picker>
+ @change="dateParamChange" :allow-clear="false"/>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
- </a-modal>
+ </j-modal>
</template>
<script>
@@ -25,6 +25,7 @@
visible: false,
model: {},
dates: [],
+ confirmLoading: false,
labelColLong: {
xs: { span: 24 },
sm: { span: 3 }
@@ -37,7 +38,6 @@
},
methods: {
handleComputeOee() {
- console.log('model', this.model)
if (this.dates.length === 0) {
this.$notification.warning({
message: '娑堟伅',
@@ -45,27 +45,25 @@
})
return
}
-
+ this.confirmLoading = true
+ const that = this
mdcApi.computeOeeApi(this.model)
.then(res => {
if (res.success) {
- this.$notification.success({
+ that.$notification.success({
message: '娑堟伅',
description: res.message
})
- this.visible = false
+ that.handleModalClose()
} else {
- this.$notification.error({
+ that.$notification.error({
message: '娑堟伅',
description: '璁＄畻澶辫触'
})
}
})
- .catch(err => {
- this.$notification.error({
- message: '娑堟伅',
- description: '璁＄畻澶辫触'
- })
+ .finally(() => {
+ that.confirmLoading = false
})
},
diff --git a/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue b/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue
index 6185aa3..a75c8ea 100644
--- a/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue
+++ b/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue
@@ -1,17 +1,19 @@
<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">
<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-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-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">
@@ -23,134 +25,135 @@
</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: #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>
+
+ <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>
- <!--鍒╃敤鐜囧拰寮�鍔ㄧ巼-->
- <div class="UtilizationStartup">
- <div class="Utilization Line-box">
- <div class="title">
- <!--<div class="circle"></div>-->
- <!--<div class="text"></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="Utilization-box box-bottom">
- <div class="Utilization-right" ref="UtilizationLine" id="UtilizationLine"></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>
- <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>
+ </a-spin>
</div>
</template>
<script>
import moment from 'moment'
import { putAction, getAction } from '@/api/manage'
- import $ from 'jquery'
- import * as echarts from 'echarts'
+ import * as eCharts from 'echarts'
+
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 {
+ 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,
+ queryParams: {
+ collectTime: null
},
- shiftSubList: [],
- shiftList: [],
+ spinning: false,
url: {
- getEquipmentByPid: '/mdc/mdcequipment/getEquipmentByPid',
- dayStatisticalRate:'/mdc/efficiencyReport/dayStatisticalRate',
- getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction',
- },
+ 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')
+ created() {
+ 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);
},
-
- methods:{
- disabledDate(current){
- //Can not slect days before today and today
- return current && current > moment().subtract('days', 1);
+ 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){
+ getTime(time) {
//杞崲涓烘椂鍒嗙
let h = Math.round(time / 60 / 60)
- h = h <10 ? '0' + h : h
+ h = h < 10 ? '0' + h : h
//浣滀负杩斿洖鍊艰繑鍥�
// console.log(h);
- return h;
+ return h
},
- moment,
- draw(){
+ draw() {
//寮�濮嬫椂闂碶鍏虫満鏃堕棿\杩愯鏃堕棿\寰呮満鏃堕棿
- let PowerOnRateLine = this.$echarts.init(document.getElementById('PowerOnRateLine'), 'macarons');
+ this.PowerOnRateLine = this.$echarts.init(document.getElementById('PowerOnRateLine'), 'macarons')
let PowerOnRateLine_option = {
- tooltip:{
- trigger: 'axis',
+ tooltip: {
+ trigger: 'axis'
},
grid: {
left: '3%',
@@ -159,162 +162,100 @@
top: 60,
containLabel: true
},
- // toolbox: {
- // show : true,
- // padding: 15,
- // feature : {
- // 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:[
- // {
- // 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],
- // },
+ series: [
{
- name:'鏌辩姸鍥�',
+ name: '',
type: 'bar',
- data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong],
- // data:[22,3,4,5],
+ data: [this.openingLong, this.closedLong, this.processLong, this.waitingLong],
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"],
- // ["#9978fa","#88a1fa"],
- ["#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]
+ ['#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)
+ offset: 1,
+ color: colorItem[1]
+ }], false)
},
- barBorderRadius: [5, 5, 0, 0],
+ barBorderRadius: [5, 5, 0, 0]
}
- },
+ }
}]
}
- PowerOnRateLine.setOption(PowerOnRateLine_option);
+ this.PowerOnRateLine.setOption(PowerOnRateLine_option)
+
//寮�鏈烘椂闂碶鍏虫満鏃堕棿
- let UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons');
- let statChartPieOption1 = {
- // title: {
- // x: 'left',
- // subtext: '寮�鏈烘晥鐜�',
- // textStyle: {
- // color: '#268e80',
- // fontSize: 20,
- //
- // },
- // },
+ this.UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons')
+ let statChartPieOption1 = {
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: {
@@ -328,44 +269,36 @@
name: '寮�鏈烘晥鐜�',
type: 'pie',
radius: '70%',
- /*center: ['55%', '55%'],*/
itemStyle: {
normal: {
- color: function (params) {
- let colorList = [ '#6496e9','#849db8'];
+ color: function(params) {
+ let colorList = ['#6496e9', '#849db8']
return colorList[params.dataIndex]
},
label: {
show: true,
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);
+ }
+ this.UtilizationLine.setOption(statChartPieOption1)
//杩愯鏃堕棿\寰呮満鏃堕棿
- let StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons');
+ this.StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons')
let statChartPieOption2 = {
- // title: {
- // x: 'left',
- // subtext: '杩愯鏁堢巼'
- // },
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 +314,91 @@
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);
+ }
+ this.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();
- }
- })
+ 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
+ })
},
- dataChange(val) {
- this.queryParam.collectTime1 = "";
- if(val){
+ dateChange(val) {
+ this.queryParam.collectTime1 = ''
+ if (val) {
this.queryParams.dateTime = val.format('YYYYMMDD')
- this.queryParams.collectTime = val.format('YYYY-MM-DD');
+ 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]){
+ 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()
} 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('璇烽厤缃澶囷紒')
- // }
- // }
- // })
},
searchReset() {
this.queryParam = {}
this.queryParams = {
- collectTime:moment().add(-1,'d').format('YYYY-MM-DD'),
- dateTime:moment().add(-1,'d').format('YYYYMMDD')
+ 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();
+ searchQuery() {
+ this.queryStatistical()
+ },
+
+ handleWindowResize() {
+ if (this.PowerOnRateLine) this.PowerOnRateLine.resize()
+ if (this.UtilizationLine) this.UtilizationLine.resize()
+ if (this.StartupLine) this.StartupLine.resize()
}
},
watch: {
@@ -485,7 +408,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)
@@ -496,86 +419,99 @@
}
</script>
-<style scoped>
- .charContent{
+<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;
- }
- @media screen and (min-width: 1920px){
- #StatisticsLegend{
- height: 748px!important;
- overflow: scroll;
+ flex-direction: column;
+
+ .ant-spin-container {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .ant-spin-blur {
+ opacity: 1;
}
}
- @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{
+
+ #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{
- width: 15px;
- height: 15px;
- background-color: #7282ec;
- border-radius: 100%;
- margin-right: 10px;
- }
- .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{
- width: 25%;
- }
- .PowerOnRate-box .PowerOnRate_text{
+
+ .PowerOnRate-box .PowerOnRate_text {
width: 10%;
display: flex;
flex-direction: column;
@@ -583,89 +519,24 @@
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;*/
+ .PowerOnRate-box .PowerOnRate-right {
+ flex: 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{
+
+ .Utilization-box {
display: flex;
- flex-direction: column;
- flex-wrap: wrap;
- justify-content: space-around;
- align-items: center;
}
- .con-left>span{
+
+ .Utilization-box .Utilization-right {
+ flex: 1;
+ }
+
+ .Startup-box {
+ display: flex;
+ }
+
+ .Startup-box .Startup-right {
flex: 1;
}
</style>
\ No newline at end of file
diff --git a/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue b/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue
index 7cb1658..b75ed56 100644
--- a/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue
+++ b/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue
@@ -1,13 +1,13 @@
<template>
<div id="StatisticsLegend"
- style="width: 100%; height: 100%; overflow: hidden;display: flex;flex-direction: column;background-color: #f5f4f4">
+ style="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=" 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-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" readOnly v-model="queryParam.tierName"></a-input>
</a-form-item>
</a-col>
<a-col :md="4" :sm="4" :xs="4">
@@ -25,86 +25,86 @@
</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-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>
+ <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>
+ <!--鍒╃敤鐜囧拰寮�鍔ㄧ巼-->
+ <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 { putAction, getAction } from '@/api/manage'
- import $ from 'jquery'
- import * as echarts from 'echarts'
+ import { getAction } from '@/api/manage'
+ import * as eCharts from 'echarts'
export default {
name: 'StatisticsLegend',
props: { equip: {} },
data() {
return {
- readOnly: true,
- showday: true,
StatCharOpeningRate: 0,
StatCharUsedRate: 0,
- StatCharUsedopeningRate: 0,
+ StatCharUsedOpeningRate: 0,
openingLong: 0,
waitingLong: 0,
processLong: 0,
@@ -112,16 +112,17 @@
totalLong: 0,
UtilizationHeight: 0,
StartupHeight: 0,
- quip: {},
dates: [],
queryParam: {},
queryParams: {
collectTime: undefined
},
- shiftSubList: [],
- shiftList: [],
+ PowerOnRatePie: null,
+ PowerOnRateLine: null,
+ UtilizationLine: null,
+ StartupLine: null,
+ spinning: false,
url: {
- getEquipmentByPid: '/mdc/mdcequipment/getEquipmentByPid',
dayStatisticalRate: '/mdc/efficiencyReport/dayStatisticalRate',
getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction'
}
@@ -133,7 +134,12 @@
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
@@ -148,11 +154,10 @@
// console.log(h);
return h
},
- moment,
draw() {
//鍒╃敤鐜�
//楗煎浘
- let PowerOnRatePie = this.$echarts.init(document.getElementById('PowerOnRatePie'), 'macarons')
+ this.PowerOnRatePie = this.$echarts.init(document.getElementById('PowerOnRatePie'), 'macarons')
let PowerOnRatePie_option = {
// color: ["#3859fa", '#ccc'],
title: {
@@ -187,7 +192,7 @@
data: [{
value: 100,
itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ color: new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#88a8fd'
},
@@ -207,8 +212,8 @@
}
]
}
- PowerOnRatePie.setOption(PowerOnRatePie_option)
- let PowerOnRateLine = this.$echarts.init(document.getElementById('PowerOnRateLine'), 'macarons')
+ this.PowerOnRatePie.setOption(PowerOnRatePie_option)
+ this.PowerOnRateLine = this.$echarts.init(document.getElementById('PowerOnRateLine'), 'macarons')
let PowerOnRateLine_option = {
tooltip: {
trigger: 'axis'
@@ -219,38 +224,6 @@
bottom: '3%',
top: 60,
containLabel: true
- },
- legend: {
- // selected:{
- // "鏇茬嚎":false,
- // },
- top: '0',
- right: '10',
- //璁剧疆鍗曢�夊閫夋ā寮�
- // selectedMode:'single',
- icon: 'pin',
- data: [
- // {
- // name:'鏇茬嚎',
- // textStyle:{
- // padding:4,
- // color:'#e957ff',
- // // borderWidth:1,
- // fontSize:16,
- // // borderColor:'#50E6D7'
- // }
- // },
- {
- name: '鏌辩姸鍥�',
- textStyle: {
- padding: 4,
- fontSize: 16,
- color: '#9996f8'
- // borderWidth:1,
- // borderColor:'#50E6D7'
- }
- }
- ]
},
xAxis: {
type: 'category',
@@ -296,53 +269,10 @@
}
},
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: '鏌辩姸鍥�',
+ name: '',
type: 'bar',
data: [this.openingLong, this.closedLong, this.processLong, this.waitingLong],
- // data:[22,3,5,6],
barWidth: 25,
label: {
show: true,
@@ -350,7 +280,6 @@
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`
@@ -363,12 +292,10 @@
['#6496e9', '#6bded3'],
['#849db8', '#b4b8cc'],
['#4fe1c5', '#4ecee1'],
- // ["#9978fa","#88a1fa"],
['#ffbb65', '#fdc68b']
]
- // return colorList[params.dataIndex];
let colorItem = colorList[params.dataIndex]
- return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ return new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colorItem[0]
},
@@ -382,9 +309,9 @@
}
}]
}
- PowerOnRateLine.setOption(PowerOnRateLine_option)
+ this.PowerOnRateLine.setOption(PowerOnRateLine_option)
//寮�鏈虹巼
- let UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons')
+ this.UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons')
let UtilizationLine_option = {
tooltip: {
trigger: 'axis',
@@ -402,15 +329,12 @@
type: 'category',
data: ['寮�鏈烘椂闀�', '鎬绘椂闀�'],
axisLine: {
- lineStyle: {
- // color: 'rgba(70, 196, 255, .8)'
- }
+ lineStyle: {}
},
axisTick: {
show: false
},
axisLabel: {
- // color: 'rgba(111, 132, 189, 1)',
textStyle: {
fontSize: 14
}
@@ -419,12 +343,9 @@
yAxis: [{
type: 'value',
name: '鏃堕棿/灏忔椂',
- nameTextStyle: {
- // color: 'rgba(111, 132, 189, 1)'
- },
+ nameTextStyle: {},
axisLabel: {
formatter: '{value}'
- // color: 'rgba(111, 132, 189, 1)',
},
axisTick: {
show: false
@@ -434,16 +355,13 @@
show: false
},
splitLine: {
- lineStyle: {
- // color: 'rgba(70, 196, 255, .3)'
- }
+ lineStyle: {}
}
}],
series: [
{
type: 'bar',
data: [this.openingLong, this.totalLong],
- // data:[22,22],
barWidth: 25,
label: {
show: true,
@@ -451,7 +369,6 @@
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`
@@ -464,9 +381,8 @@
['#6496e9', '#6bded3'],
['#9978fa', '#88a1fa']
]
- // return colorList[params.dataIndex];
let colorItem = colorList[params.dataIndex]
- return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ return new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colorItem[0]
},
@@ -480,9 +396,9 @@
}
}]
}
- UtilizationLine.setOption(UtilizationLine_option)
+ this.UtilizationLine.setOption(UtilizationLine_option)
//寮�鍔ㄧ巼
- let StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons')
+ this.StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons')
let StartupLine_option = {
tooltip: {
trigger: 'axis',
@@ -500,15 +416,12 @@
type: 'category',
data: ['杩愯鏃堕暱', '寮�鏈烘椂闀�'],
axisLine: {
- lineStyle: {
- // color: 'rgba(70, 196, 255, .8)'
- }
+ lineStyle: {}
},
axisTick: {
show: false
},
axisLabel: {
- // color: 'rgba(111, 132, 189, 1)',
textStyle: {
fontSize: 14
}
@@ -517,12 +430,9 @@
yAxis: [{
type: 'value',
name: '鏃堕棿/灏忔椂',
- nameTextStyle: {
- // color: 'rgba(111, 132, 189, 1)'
- },
+ nameTextStyle: {},
axisLabel: {
formatter: '{value}'
- // color: 'rgba(111, 132, 189, 1)',
},
axisTick: {
show: false
@@ -532,15 +442,12 @@
show: false
},
splitLine: {
- lineStyle: {
- // color: 'rgba(70, 196, 255, .3)'
- }
+ lineStyle: {}
}
}],
series: [{
type: 'bar',
data: [this.processLong, this.openingLong],
- // data:[22,22],
barWidth: 25,
label: {
show: true,
@@ -548,7 +455,6 @@
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`
@@ -561,9 +467,8 @@
['#4fe1c5', '#4ecee1'],
['#6496e9', '#6bded3']
]
- // return colorList[params.dataIndex];
let colorItem = colorList[params.dataIndex]
- return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ return new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colorItem[0]
},
@@ -577,24 +482,29 @@
}
}]
}
- StartupLine.setOption(StartupLine_option)
+ this.StartupLine.setOption(StartupLine_option)
},
queryStatistical() {
- 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()
- }
- })
+ 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) {
@@ -604,6 +514,7 @@
},
initEquipmentNode() {
let _this = this
+ this.spinning = true
getAction(this.url.getBaseTree).then((res) => {
if (res.success) {
const { isEquipment, productionId, tierName } = this.$route.params
@@ -630,9 +541,6 @@
description: res.message
})
}
- }).finally(() => {
- this.loading = false
- this.cardLoading = false
})
},
searchReset() {
@@ -645,11 +553,17 @@
},
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) {
- // console.log(val);
if (val && val.equipmentId) {
this.$set(this.queryParam, 'tierName', val.title)
this.$set(this.queryParam, 'equipmentId', val.equipmentId)
@@ -662,17 +576,12 @@
}
this.searchQuery()
}
- // this.searchQuery();
}
}
</script>
-<style scoped>
- .charContent {
- display: flex;
- }
-
+<style scoped lang="less">
@media screen and (min-width: 1920px) {
#StatisticsLegend {
height: 748px !important;
@@ -705,6 +614,22 @@
#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;
}
}
@@ -803,10 +728,6 @@
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 {
@@ -815,7 +736,6 @@
position: relative;
text-align: center;
border: 6px solid red;
- /*background-color: yellow;*/
border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;
}
@@ -835,7 +755,6 @@
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%);
@@ -850,17 +769,5 @@
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>
\ No newline at end of file
diff --git a/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue
index 8ee1144..da048a5 100644
--- a/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue
+++ b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue
@@ -38,7 +38,7 @@
</a-table>
</div>
- <a-spin :spinning="echartLoading">
+ <a-spin :spinning="eChartLoading">
<div style="width: 100%;height: 100%;display: flex;">
<div id="MdcEquipmentWarningPie" style="height: 100%;width: 35%;"></div>
<div id="MdcEquipmentWarningLine" style="height: 100%;width: 65%;"></div>
@@ -51,13 +51,8 @@
<script>
import moment from 'moment'
- import { putAction, getAction } from '@/api/manage'
- import $ from 'jquery'
- import '@/components/table2excel/table2excel'
- import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'
- import {
- JeecgListMixin
- } from '@/mixins/JeecgListMixin'
+ import { getAction } from '@/api/manage'
+ import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
const columns = [
{ title: '鎶ヨ鍙�', dataIndex: 'alarmCode', key: 'alarmCode', align: 'center' },
@@ -98,51 +93,31 @@
]
export default {
- // mixins: [JeecgListMixin],
name: 'alarmAnalysisMain',
components: {},
data() {
return {
- dataSource: [],
/* table鍔犺浇鐘舵�� */
outerDataLoading: false,
innerDataLoading: false,
- echartLoading: false,
+ eChartLoading: false,
typeTree: '',
- typeParent: 1,
- typeEquipment: 1,
- TreeIDOne: 1,
- TreeIDTwo: 2,
- deviceTypeDict: '',
dates: [],
- identifying: [],
queryParam: {},
- queryParams: {},
queryParamEquip: {},
queryParamPeople: {},
- efficiencyOptions: [
- { label: '鍒╃敤鐜�', value: 'lyl' },
- { label: '寮�鏈虹巼', value: 'kjl' },
- { label: '寮�鏈烘椂闂�', value: 'kjsj' },
- { label: '鍔犲伐鏃堕棿', value: 'jgsj' },
- { label: '寰呮満鏃堕棿', value: 'djsj' },
- { label: '鍏虫満鏃堕棿', value: 'gjsj' }
- ],
- checkedList: ['lyl'],
dataList: [],
url: {
efficiencyList: '/mdc/alarmAnalyze/alarmList',
- listByType: '/mdc/MdcUtilizationRate/getByType',
alarmTrend: '/mdc/alarmAnalyze/alarmTrend',
equipmentAlarmList: '/mdc/alarmAnalyze/equipmentAlarmList'
},
- tableHeads: [],
pieDate: [0],
XData: [0],
YData: [0],
columns,
innerColumns,
- hasRequsetAlarmCodeList: []
+ hasRequestAlarmCodeList: []
}
},
props: { nodeTree: '', Type: '', nodePeople: '' },
@@ -155,7 +130,6 @@
this.queryParam.endDate = moment(this.dates[1]).format('YYYYMMDD')
this.queryParam.typeTree = '1'
this.loadData1()
-
},
mounted() {
this.drawWrin()
@@ -196,14 +170,6 @@
}
},
filters: {
- numFilter(value) {
- if (value) {
- return parseFloat((value * 100).toFixed(2))
- } else {
- return '0'
- }
- },
-
/**
* 鏍煎紡鍖栨椂闂�
* @param seconds 绉掓暟
@@ -243,9 +209,8 @@
},
TableDraw(key, val) {
let that = this
- that.echartLoading = true
+ that.eChartLoading = true
that.queryParam.alarmCode = val.alarmCode
- console.log(this.queryParam)
getAction(that.url.alarmTrend, that.queryParam)
.then(res => {
if (res.success) {
@@ -258,21 +223,12 @@
that.XData = res.result.dateCountList.map(item => item.key)
that.YData = res.result.dateCountList.map(item => item.count)
- // this.tableHeads = res.result.dates
- // this.dataList = res.result
- // this.draw()
- // this.checkSameData(this.dataList)
- // this.checkSameData1(this.dataList)
- // this.checkSameData2(this.dataList)
- // this.combineCell();
- // this.initDeviceType(this.dataList)
that.drawWrin()
}
})
.finally(() => {
- that.echartLoading = false
+ that.eChartLoading = false
})
- console.log(this.YData)
},
disabledDate(current) {
@@ -322,20 +278,11 @@
},
loadData1() {
this.outerDataLoading = true
- this.tableHeads = []
this.dataList = []
getAction(this.url.efficiencyList, this.queryParam).then(res => {
if (res.success) {
- // this.tableHeads = res.result.dates
this.dataList = res.result
- this.hasRequsetAlarmCodeList = []
- // this.draw()
- // this.checkSameData(this.dataList)
- // this.checkSameData1(this.dataList)
- // this.checkSameData2(this.dataList)
- // this.combineCell();
- // this.initDeviceType(this.dataList)
-
+ this.hasRequestAlarmCodeList = []
}
}).finally(() => {
this.outerDataLoading = false
@@ -354,27 +301,21 @@
},
tooltip: {
trigger: 'item',
- formatter: '<br/>{b} : {c} ({d}%)'
+ formatter: '{b} : {c} ({d}%)'
},
calculable: true,
series: [{
type: 'pie',
radius: '60%',
+ label: {
+ show: true,
+ formatter: '{b}\n{c}',
+ color: 'inherit'
+ },
itemStyle: {
- normal: {
- color: function(params) {
- var colorList = ['#5AB1EF', '#2EC7C9', '#B6A2DE', '#FFB980', '#D87A80', '#8D98B3']
- return colorList[params.dataIndex]
- },
- label: {
- show: true,
- // position: 'top',
- formatter: '{b}\n{c}',
- color: function(params) {
- var colorList = ['#5AB1EF', '#2EC7C9', '#B6A2DE', '#FFB980', '#D87A80', '#8D98B3']
- return colorList[params.dataIndex]
- }
- }
+ color: function(params) {
+ const colorList = ['#5AB1EF', '#2EC7C9', '#B6A2DE', '#FFB980', '#D87A80', '#8D98B3']
+ return colorList[params.dataIndex % colorList.length]
}
},
data: this.pieDate
@@ -483,7 +424,7 @@
let _this = this
// 褰撳睍寮�鏃惰嫢璇ヨ鏈灞曞紑杩囨墠浼氳姹傚悗鍙版暟鎹紝灞曞紑杩囩殑鏁版嵁浼氳缂撳瓨鏃犻渶閲嶅璇锋眰
this.queryParam.alarmCode = record.alarmCode
- if (expanded && !this.hasRequsetAlarmCodeList.includes(record.alarmCode)) {
+ if (expanded && !this.hasRequestAlarmCodeList.includes(record.alarmCode)) {
this.innerDataLoading = true
getAction(this.url.equipmentAlarmList, this.queryParam).then(res => {
if (res.success) {
@@ -492,7 +433,7 @@
item.innerDataList = res.result
}
})
- _this.hasRequsetAlarmCodeList.push(record.alarmCode)
+ _this.hasRequestAlarmCodeList.push(record.alarmCode)
}
})
.finally(() => {
--
Gitblit v1.9.3