From d55fef9c7205b412cadc99c2bb2dea9329b7a2c9 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期三, 31 七月 2024 09:39:19 +0800
Subject: [PATCH] 1、公司级与分厂级看板调整OEE图表样式 2、各看板中的饼图图表增加随分辨率变化而改变自身半径功能，从而更清晰的展示内容标题指示箭头 3、OEE综合效率分析页面新增车间字段
---
src/views/mdc/base/modules/equipmentDayAvail/equipmentDayAvailMain.vue | 413 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 213 insertions(+), 200 deletions(-)
diff --git a/src/views/mdc/base/modules/equipmentDayAvail/equipmentDayAvailMain.vue b/src/views/mdc/base/modules/equipmentDayAvail/equipmentDayAvailMain.vue
index fa95c5d..84b8f99 100644
--- a/src/views/mdc/base/modules/equipmentDayAvail/equipmentDayAvailMain.vue
+++ b/src/views/mdc/base/modules/equipmentDayAvail/equipmentDayAvailMain.vue
@@ -1,63 +1,67 @@
<template>
- <a-card :bordered="false" class="device_list">
- <div class="com_box">
- <!-- 鏌ヨ鍖哄煙 -->
- <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="4" :sm="4">
- <a-form-item label="璁惧缂栧彿">
- <a-input placeholder="杈撳叆璁惧缂栧彿鏌ヨ" :readOnly="readOnly" v-model="queryParams.equipmentId"></a-input>
- </a-form-item>
- </a-col>
- <a-col :md="4" :sm="4">
- <a-form-item label="璁惧鍚嶇О">
- <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" :readOnly="readOnly" v-model="queryParams.equipmentName"></a-input>
- </a-form-item>
- </a-col>
- <a-col :md="4" :sm="4" :xs="4">
- <a-form-item label="鏃ユ湡">
- <a-date-picker v-model="queryParam.dateTime" :disabledDate="disabledDate" format='YYYYMMDD' @change="dataChange"/>
- </a-form-item>
- </a-col>
- <a-col :md="4" :sm="4" :xs="4">
- <a-form-item label="闂撮殧">
- <a-select default-value="2" style="width: 80px" v-model="queryParam.timeType">
- <a-select-option :value="2">
- 2
- </a-select-option>
- <a-select-option :value="3">
- 3
- </a-select-option>
- <a-select-option :value="4">
- 4
- </a-select-option>
- <a-select-option :value="6">
- 6
- </a-select-option>
- </a-select>灏忔椂
- </a-form-item>
- </a-col>
- <a-col :md="3" :sm="3" :xs="3">
- <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
- </a-col>
- <!--<a-col :md="2" :sm="2" :xs="2">-->
+ <a-spin :spinning="loading">
+ <div :bordered="false" class="device_list">
+ <div class="com_box">
+ <!-- 鏌ヨ鍖哄煙 -->
+ <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="4" :sm="4">
+ <a-form-item label="璁惧缂栧彿">
+ <a-input placeholder="杈撳叆璁惧缂栧彿鏌ヨ" :readOnly="readOnly" v-model="queryParams.equipmentId"></a-input>
+ </a-form-item>
+ </a-col>
+ <a-col :md="4" :sm="4">
+ <a-form-item label="璁惧鍚嶇О">
+ <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" :readOnly="readOnly" v-model="queryParams.equipmentName"></a-input>
+ </a-form-item>
+ </a-col>
+ <a-col :md="4" :sm="4" :xs="4">
+ <a-form-item label="鏃ユ湡">
+ <a-date-picker v-model="queryParam.dateTime" :disabledDate="disabledDate" format='YYYYMMDD'
+ @change="dataChange"/>
+ </a-form-item>
+ </a-col>
+ <a-col :md="3" :sm="3" :xs="3">
+ <a-form-item label="闂撮殧">
+ <a-select default-value="2" style="width: 80px" v-model="queryParam.timeType">
+ <a-select-option :value="2">
+ 2
+ </a-select-option>
+ <a-select-option :value="3">
+ 3
+ </a-select-option>
+ <a-select-option :value="4">
+ 4
+ </a-select-option>
+ <a-select-option :value="6">
+ 6
+ </a-select-option>
+ </a-select>
+ 灏忔椂
+ </a-form-item>
+ </a-col>
+ <a-col :md="3" :sm="3" :xs="3">
+ <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
+ </a-col>
+ <!--<a-col :md="2" :sm="2" :xs="2">-->
<!--<a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>-->
- <!--</a-col>-->
- </a-row>
- </a-form>
- </div>
- <!-- table鍖哄煙-begin -->
- <div id="DeviceList">
-
- <div style="padding: 5px;width: 100%;height: 100%">
- <div style="width: 100%;height: 100%" id="dayAvailBar"></div>
- <!--<div id="dayAvailLine"></div>-->
+ <!--</a-col>-->
+ </a-row>
+ </a-form>
</div>
+ <!-- table鍖哄煙-begin -->
+ <div id="DeviceList">
+
+ <div style="padding: 5px;width: 100%;height: 100%">
+ <div style="width: 100%;height: 100%" id="dayAvailBar"></div>
+ <!--<div id="dayAvailLine"></div>-->
+ </div>
+ </div>
+ <!-- table鍖哄煙-end -->
</div>
- <!-- table鍖哄煙-end -->
</div>
- </a-card>
+ </a-spin>
</template>
<script>
@@ -78,6 +82,7 @@
import JEllipsis from '@/components/jeecg/JEllipsis'
import Tooltip from 'ant-design-vue/es/tooltip'
import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'
+
export default {
name: 'equipmentDayAvailMain',
// mixins: [JeecgListMixin],
@@ -91,38 +96,39 @@
JDate,
JEllipsis
},
- props: { nodeTree: '', Type:'',nodePeople: '' },
+ props: { nodeTree: '', Type: '', nodePeople: '' },
data() {
return {
activeKey: '1',
- typeTree:"",
- typeParent:1,
- typeEquipment:1,
- spaceTime:[],
- useingRates:[],
+ typeTree: '',
+ typeParent: 1,
+ typeEquipment: 1,
+ spaceTime: [],
+ useingRates: [],
dates: [],
- xianshi:"",
- readOnly:true,
+ xianshi: '',
+ readOnly: true,
queryParam: {
- dateTime:undefined,
- timeType:'2'
+ dateTime: undefined,
+ timeType: '2'
},
- queryParams:{},
- queryParamEquip:{},
- queryParamPeople:{},
- dataStartsoucre:[],
+ queryParams: {},
+ queryParamEquip: {},
+ queryParamPeople: {},
+ dataStartsoucre: [],
url: {
- comparativeAnalysis:'/mdc/efficiencyReport/comparativeAnalysis',
- dayUtilizationRate:'/mdc/efficiencyReport/dayUtilizationRate',
+ comparativeAnalysis: '/mdc/efficiencyReport/comparativeAnalysis',
+ dayUtilizationRate: '/mdc/efficiencyReport/dayUtilizationRate',
getEquipmentByPid: '/mdc/mdcEquipment/getEquipmentByPid',
- getEquipmentByDepPid:'/mdc/mdcEquipment/getEquipmentByDepPid'
+ getEquipmentByDepPid: '/mdc/mdcEquipment/getEquipmentByDepPid'
},
- AnalysisList:{}
+ AnalysisList: {},
+ loading: false
}
},
- watch:{
- Type(valmath){
- this.dataList = [];
+ watch: {
+ Type(valmath) {
+ this.dataList = []
this.queryParams.typeTree = valmath
// console.log(this.queryParams.typeTree)
},
@@ -130,8 +136,10 @@
if (JSON.stringify(val) != '{}') {
if (val.equipmentId) {
// this.$set(this.queryParam, 'tierName', val.title)
- this.queryParamEquip.parentId = ""
+ this.queryParamEquip.parentId = ''
this.queryParams.equipmentId = val.equipmentId
+ this.queryParams.equipmentName = val.equipmentName
+ console.log('XXXval=', val)
this.queryParamEquip.equipmentId = val.equipmentId
this.searchQuery()
} else {
@@ -141,14 +149,13 @@
this.initEquipment(val.key)
}
-
}
},
- nodePeople(val){
+ nodePeople(val) {
if (JSON.stringify(val) != '{}') {
if (val.equipmentId) {
// this.$set(this.queryParam, 'tierName', val.title)
- this.queryParamEquip.parentId = ""
+ this.queryParamEquip.parentId = ''
this.queryParams.equipmentId = val.equipmentId
this.queryParamEquip.equipmentId = val.equipmentId
this.searchQuery()
@@ -164,8 +171,8 @@
},
methods: {
moment,
- drawTu(){
- let dayAvailBar = this.$echarts.init(document.getElementById('dayAvailBar'), 'macarons');
+ drawTu() {
+ let dayAvailBar = this.$echarts.init(document.getElementById('dayAvailBar'), 'macarons')
//dayAvailLine = echarts.init(document.getElementById('dayAvailLine'));
let dayAvailBarOption = {
title: {
@@ -174,21 +181,21 @@
textStyle: {
fontSize: 18,
fontWeight: 'bolder',
- color: "#151414"
+ color: '#151414'
}
},
tooltip: {
trigger: 'axis',
- formatter: "{a} <br/>{b} :({c}%)"
+ formatter: '{a} <br/>{b} :({c}%)'
},
toolbox: {
show: true,
feature: {
- mark: {show: true},
- dataView: {show: true, readOnly: false},
- magicType: {show: true, type: ['line', 'bar']},
- restore: {show: true},
- saveAsImage: {show: true}
+ mark: { show: true },
+ dataView: { show: true, readOnly: false },
+ magicType: { show: true, type: ['line', 'bar'] },
+ restore: { show: true },
+ saveAsImage: { show: true }
}
},
calculable: true, //鏄惁鍚敤鎷栨嫿閲嶈绠楃壒鎬�
@@ -219,18 +226,18 @@
data: this.useingRates,
markPoint: {
data: [
- {type: 'max', name: '鏈�澶у��', symbolSize: 70},
- {type: 'min', name: '鏈�灏忓��', symbolSize: 70}
+ { type: 'max', name: '鏈�澶у��', symbolSize: 70 },
+ { type: 'min', name: '鏈�灏忓��', symbolSize: 70 }
]
}
}
]
- };
- dayAvailBar.setOption(dayAvailBarOption);
+ }
+ dayAvailBar.setOption(dayAvailBarOption)
},
- disabledDate(current){
+ disabledDate(current) {
//Can not slect days before today and today
- return current && current > moment().subtract('days', 1);
+ return current && current > moment().subtract('days', 1)
},
dataChange(val) {
this.queryParam.dateTime = val.format('YYYYMMDD')
@@ -248,11 +255,12 @@
this.queryParam.endTime = v2[1]
// console.log(v2[0],v2[1])
},
- loadAnalysis(){
- getAction(this.url.dayUtilizationRate,this.queryParam).then(res => {
+ loadAnalysis() {
+ this.loading = true
+ getAction(this.url.dayUtilizationRate, this.queryParam).then(res => {
if (res.success) {
this.spaceTime.push(res.result.dataList)
- for(var i = 0;i<res.result.dayRateDto.length;i++){
+ for (var i = 0; i < res.result.dayRateDto.length; i++) {
this.useingRates.push(res.result.dayRateDto[i].utilizationRate)
}
// console.log(this,spaceTime)
@@ -260,9 +268,9 @@
} else {
// this.$message.warning(res.message)
this.$notification.warning({
- message:'娑堟伅',
- description:res.message
- });
+ message: '娑堟伅',
+ description: res.message
+ })
}
}).finally(() => {
this.loading = false
@@ -275,119 +283,117 @@
return '0'
}
},
- searchQuery(){
- if(this.queryParam.dateTime){
+ searchQuery() {
+ if (this.queryParam.dateTime) {
+ this.loading = true
this.spaceTime = []
this.useingRates = []
- if(this.queryParams.typeTree == "1"){
- this.queryParams.parentId = this.queryParamEquip.parentId
- // this.queryParams.equipmentId = this.queryParamEquip.equipmentId
-
- }else{
+ if (this.queryParams.typeTree == '1') {
this.queryParams.parentId = this.queryParamEquip.parentId
-
+ // this.queryParams.equipmentId = this.queryParamEquip.equipmentId
+ } else {
+ this.queryParams.parentId = this.queryParamEquip.parentId
// this.queryParams.equipmentId = ""
}
- this.AnalysisList = [];
+ this.AnalysisList = []
//鑾峰彇鏌ヨ鏉′欢
- this.queryParam.parentId = this.queryParams.parentId;
- this.queryParam.equipmentId = this.queryParams.equipmentId;
+ this.queryParam.parentId = this.queryParams.parentId
+ this.queryParam.equipmentId = this.queryParams.equipmentId
this.queryParam.typeTree = this.queryParams.typeTree
- getAction(this.url.dayUtilizationRate,this.queryParam).then((res) => {
- if(res.success){
- this.spaceTime=res.result.dateList
- for(var i = 0;i<res.result.dayRateDto.length;i++){
+ getAction(this.url.dayUtilizationRate, this.queryParam).then((res) => {
+ if (res.success) {
+ this.spaceTime = res.result.dateList
+ for (var i = 0; i < res.result.dayRateDto.length; i++) {
this.useingRates.push(this.numFilter(res.result.dayRateDto[i].utilizationRate))
}
this.drawTu()
- }else{
+ } else {
// this.$message.warning(res.message)
this.$notification.warning({
- message:'娑堟伅',
- description:res.message
- });
+ message: '娑堟伅',
+ description: res.message
+ })
}
}).finally(() => {
this.loading = false
})
- }else{
+ } else {
this.$notification.warning({
- message:'娑堟伅',
- description:'璇烽�夋嫨鏃堕棿'
- });
+ message: '娑堟伅',
+ description: '璇烽�夋嫨鏃堕棿'
+ })
}
-
},
searchReset() {
this.spaceTime = []
this.useingRates = []
- if(this.queryParams.typeTree == "1"){
+ if (this.queryParams.typeTree == '1') {
this.typeTree = this.queryParams.typeTree
- this.typeParent = this.queryParams.parentId
+ this.typeParent = this.queryParams.parentId
this.typeEquipment = this.queryParams.equipmentId
this.queryParams = {}
this.queryParam = {}
this.queryParams.typeTree = this.typeTree
this.queryParams.parentId = this.typeParent
- if(this.queryParams.parentId != ""){
- this.queryParams.equipmentId = ""
+ if (this.queryParams.parentId != '') {
+ this.queryParams.equipmentId = ''
this.initEquipment()
- }else{
- if(this.queryParams.equipmentId == this.queryParamEquip.equipmentId){
- this.queryParams.equipmentId = this.typeEquipment
- }else{
+ } else {
+ if (this.queryParams.equipmentId == this.queryParamEquip.equipmentId) {
+ this.queryParams.equipmentId = this.typeEquipment
+ } else {
this.queryParams.equipmentId = this.queryParamEquip.equipmentId
}
}
- getAction(this.url.dayUtilizationRate,this.queryParams).then((res) => {
- if(res.success){
- this.spaceTime=res.result.dateList
- for(var i = 0;i<res.result.dayRateDto.length;i++){
+ getAction(this.url.dayUtilizationRate, this.queryParams).then((res) => {
+ if (res.success) {
+ this.spaceTime = res.result.dateList
+ for (var i = 0; i < res.result.dayRateDto.length; i++) {
this.useingRates.push(this.numFilter(res.result.dayRateDto[i].utilizationRate))
}
this.drawTu()
- }else{
+ } else {
// this.$message.warning(res.message)
this.$notification.warning({
- message:'娑堟伅',
- description:res.message
- });
+ message: '娑堟伅',
+ description: res.message
+ })
}
}).finally(() => {
this.loading = false
})
- }else{
+ } else {
this.typeTree = this.queryParams.typeTree
- this.typeParent = this.queryParams.parentId
+ this.typeParent = this.queryParams.parentId
this.typeEquipment = this.queryParams.equipmentId
this.queryParams = {}
this.queryParam = {}
this.dates = []
this.queryParams.typeTree = this.typeTree
this.queryParams.parentId = this.typeParent
- if(this.queryParams.parentId != ""){
- this.queryParams.equipmentId = ""
+ if (this.queryParams.parentId != '') {
+ this.queryParams.equipmentId = ''
this.initEquipment()
- }else{
- if(this.queryParams.equipmentId == this.queryParamEquip.equipmentId){
- this.queryParams.equipmentId = this.typeEquipment
- }else{
+ } else {
+ if (this.queryParams.equipmentId == this.queryParamEquip.equipmentId) {
+ this.queryParams.equipmentId = this.typeEquipment
+ } else {
this.queryParams.equipmentId = this.queryParamEquip.equipmentId
}
}
- getAction(this.url.dayUtilizationRate,this.queryParams).then((res) => {
- if(res.success){
- this.spaceTime=res.result.dateList
- for(var i = 0;i<res.result.dayRateDto.length;i++){
+ getAction(this.url.dayUtilizationRate, this.queryParams).then((res) => {
+ if (res.success) {
+ this.spaceTime = res.result.dateList
+ for (var i = 0; i < res.result.dayRateDto.length; i++) {
this.useingRates.push(this.numFilter(res.result.dayRateDto[i].utilizationRate))
}
this.drawTu()
- }else{
+ } else {
// this.$message.warning(res.message)
this.$notification.warning({
- message:'娑堟伅',
- description:res.message
- });
+ message: '娑堟伅',
+ description: res.message
+ })
}
}).finally(() => {
this.loading = false
@@ -411,16 +417,16 @@
this.equipment = {}
// _this.$message.warning('璇疯仈绯荤鐞嗗憳锛屽紑鏀捐澶囨潈闄愶紒')
_this.$notification.warning({
- message:'娑堟伅',
- description:'璇疯仈绯荤鐞嗗憳锛屽紑鏀捐澶囨潈闄愶紒'
- });
+ message: '娑堟伅',
+ description: '璇疯仈绯荤鐞嗗憳锛屽紑鏀捐澶囨潈闄愶紒'
+ })
}
- }else{
+ } else {
// this.$message.warning(res.message)
_this.$notification.warning({
- message:'娑堟伅',
- description:res.message
- });
+ message: '娑堟伅',
+ description: res.message
+ })
}
})
@@ -441,85 +447,92 @@
this.equipment = {}
// _this.$message.warning('璇疯仈绯荤鐞嗗憳锛屽紑鏀捐澶囨潈闄愶紒')
_this.$notification.warning({
- message:'娑堟伅',
- description:'璇疯仈绯荤鐞嗗憳锛屽紑鏀捐澶囨潈闄愶紒'
- });
+ message: '娑堟伅',
+ description: '璇疯仈绯荤鐞嗗憳锛屽紑鏀捐澶囨潈闄愶紒'
+ })
}
- }else{
+ } else {
// this.$message.warning(res.message)
_this.$notification.warning({
- message:'娑堟伅',
- description:res.message
- });
+ message: '娑堟伅',
+ description: res.message
+ })
}
})
}
},
created() {
- let collectTime = moment(moment().add(-1,'d'),'YYYY-MM-DD');
+ let collectTime = moment(moment().add(-1, 'd'), 'YYYY-MM-DD')
-
- this.queryParams.collectTime = collectTime;
+ this.queryParams.collectTime = collectTime
this.queryParam.dateTime = this.queryParams.collectTime.format('YYYYMMDD')
this.queryParams.typeTree = '1'
this.initEquipment()
- },
+ }
}
</script>
<style lang="less" scoped>
/*@import '~@assets/less/common.less';*/
- @media screen and (min-width: 1920px){
- .device_list{
- height: 811px!important;
+ @media screen and (min-width: 1920px) {
+ .device_list {
+ height: 811px !important;
overflow: scroll;
}
}
- @media screen and (min-width: 1680px) and (max-width: 1920px){
- .device_list{
- height: 811px!important;
+
+ @media screen and (min-width: 1680px) and (max-width: 1920px) {
+ .device_list {
+ height: 811px !important;
overflow: scroll;
}
}
- @media screen and (min-width: 1400px) and (max-width: 1680px){
- .device_list{
- height: 663px!important;
+
+ @media screen and (min-width: 1400px) and (max-width: 1680px) {
+ .device_list {
+ height: 663px !important;
overflow: scroll;
}
}
- @media screen and (min-width: 1280px) and (max-width: 1400px){
- .device_list{
- height: 564px!important;
+
+ @media screen and (min-width: 1280px) and (max-width: 1400px) {
+ .device_list {
+ height: 564px !important;
overflow: scroll;
}
}
- @media screen and (max-width: 1280px){
- .device_list{
- height: 564px!important;
+
+ @media screen and (max-width: 1280px) {
+ .device_list {
+ height: 564px !important;
overflow: scroll;
}
}
+
/*.device_list{*/
/*display: flex;*/
/*}*/
/*.device_list .table-page-search-wrapper{*/
/**/
/*}*/
- /deep/ .ant-card-body{
- height: 100%!important;
+ /deep/ .ant-card-body {
+ height: 100% !important;
}
- .device_list .com_box{
- display: flex!important;
- height: 100%!important;
- flex-direction: column!important;
+
+ .device_list .com_box {
+ display: flex !important;
+ height: 100% !important;
+ flex-direction: column !important;
}
- .device_list .table-page-search-wrapper{
- height: 6%!important;
+
+ .device_list .table-page-search-wrapper {
+ height: 6% !important;
}
- .device_list #DeviceList{
- height: 90%!important;
+
+ .device_list #DeviceList {
+ height: 90% !important;
}
</style>
--
Gitblit v1.9.3