From 2d93721c3758621a6b9a7eff038a8d6eac4fda24 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期四, 26 六月 2025 15:30:26 +0800
Subject: [PATCH] 1、调整设备打卡率页面查询区域样式 2、对比分析页面新增图表数据加载提示以及优化整体页面图表展示及代码 3、调整班次班制管理页面左侧新增班制后刷新列表逻辑以及右侧配置按钮展示条件
---
src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue | 383 ++++++++++++++++++++----------------------------------
1 files changed, 145 insertions(+), 238 deletions(-)
diff --git a/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue b/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue
index 7cb1658..2af7c5d 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;
@@ -708,14 +617,30 @@
}
}
- #StatisticsLegend .PowerOnRate {
+ /deep/ .ant-spin-nested-loading {
flex: 1;
+ display: flex;
+ flex-direction: column;
+
+ .ant-spin-container {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .ant-spin-blur {
+ opacity: 1;
+ }
+ }
+
+ #StatisticsLegend .PowerOnRate {
+ height: 50%;
margin-bottom: 15px;
background-color: #fff;
}
#StatisticsLegend .UtilizationStartup {
- flex: 1;
+ height: 50%;
display: flex;
}
@@ -765,7 +690,7 @@
}
.PowerOnRate-box .PowerOnRate-right {
- flex: 1;
+ width: 75%;
}
.Utilization-box {
@@ -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