From 872362acd0e306bb2150d72cce1b556d272e6ba5 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期三, 25 六月 2025 10:01:24 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue | 377 ++++++++++++++++++++---------------------------------
1 files changed, 142 insertions(+), 235 deletions(-)
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
--
Gitblit v1.9.3