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/comparativeAnalysis/ComparativeAnalysisMain.vue | 273 ++++++++++++++++++------------------------------------
1 files changed, 93 insertions(+), 180 deletions(-)
diff --git a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisMain.vue b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisMain.vue
index e04a1b7..ceae2a0 100644
--- a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisMain.vue
+++ b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisMain.vue
@@ -1,101 +1,81 @@
<template>
- <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="5" :sm="5">
- <a-form-item label="璁惧">
- <a-input-search :readOnly="true" v-model="queryParam.equipmentId" @search="deviceSearch" @click="deviceSearch"
- placeholder='璇烽�夋嫨璁惧'/>
- </a-form-item>
- </a-col>
+ <div class="device_list">
+ <!-- 鏌ヨ鍖哄煙 -->
+ <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">
+ <a-form-item label="璁惧">
+ <a-input-search readOnly v-model="queryParam.equipmentId" @search="deviceSearch"
+ @click="deviceSearch"
+ placeholder='璇烽�夋嫨璁惧'/>
+ </a-form-item>
+ </a-col>
- <a-col :md="5" :sm="5">
- <a-form-item label="椹卞姩绫诲瀷">
- <a-auto-complete
- v-model="queryParam.driveType"
- :data-source="driveTypeList"
- placeholder="椹卞姩绫诲瀷"
- :filter-option="filterOption"
- :allowClear="true"
- />
- </a-form-item>
- </a-col>
- <a-col :md="6" :sm="6" :xs="6">
- <a-form-item label="鏃堕棿">
- <a-range-picker @change="dateParamChange" v-model="dates" format="YYYYMMDD" :allow-clear="false"/>
- </a-form-item>
- </a-col>
- <a-col :md="3" :sm="3" :xs="3">
- <a-space>
- <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
- <a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>
- </a-space>
- </a-col>
- </a-row>
- </a-form>
- </div>
- <!-- table鍖哄煙-begin -->
- <div id="DeviceList">
- <a-tabs :activeKey="activeKey" @change="tabChange" tabPosition="top">
- <a-tab-pane key="1" tab="鍥惧舰">
- <ComparativeAnalysisBar ref="AnalysisBar" :dataList='AnalysisBarList'></ComparativeAnalysisBar>
- </a-tab-pane>
- <a-tab-pane key="2" tab="浠〃" forceRender>
- <ComparativeAnalysisGauge ref="AnalysisGauge" :dataList="AnalysisGauge"></ComparativeAnalysisGauge>
- </a-tab-pane>
- <a-tab-pane key="3" tab="楗煎浘" forceRender>
- <ComparativeAnalysisPie ref="AnalysisPie" :dataList="AnalysisPie"></ComparativeAnalysisPie>
- </a-tab-pane>
- </a-tabs>
- </div>
- <!-- table鍖哄煙-end -->
+ <a-col :md="5" :sm="5">
+ <a-form-item label="椹卞姩绫诲瀷">
+ <a-auto-complete
+ v-model="queryParam.driveType"
+ :data-source="driveTypeList"
+ placeholder="椹卞姩绫诲瀷"
+ :filter-option="filterOption"
+ :allowClear="true"
+ />
+ </a-form-item>
+ </a-col>
+ <a-col :md="6" :sm="6" :xs="6">
+ <a-form-item label="鏃堕棿">
+ <a-range-picker @change="dateParamChange" v-model="dates" format="YYYYMMDD" :allow-clear="false"/>
+ </a-form-item>
+ </a-col>
+ <a-col :md="3" :sm="3" :xs="3">
+ <a-space>
+ <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
+ <a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>
+ </a-space>
+ </a-col>
+ </a-row>
+ </a-form>
</div>
- <SelectDeviceDrawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'閫夋嫨璁惧'"></SelectDeviceDrawer>
+ <a-spin :spinning="spinning">
+ <a-tabs tabPosition="top" id="custom-tabs">
+ <a-tab-pane key="1" tab="鍥惧舰">
+ <ComparativeAnalysisBar ref="AnalysisBar" :dataList='AnalysisBarList'/>
+ </a-tab-pane>
+ <a-tab-pane key="2" tab="浠〃" forceRender>
+ <ComparativeAnalysisGauge ref="AnalysisGauge" :dataList="AnalysisGauge"/>
+ </a-tab-pane>
+ <a-tab-pane key="3" tab="楗煎浘" forceRender>
+ <ComparativeAnalysisPie ref="AnalysisPie" :dataList="AnalysisPie"/>
+ </a-tab-pane>
+ </a-tabs>
+ </a-spin>
+
+ <SelectDeviceDrawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'閫夋嫨璁惧'"/>
</div>
</template>
<script>
import moment from 'moment'
- import $ from 'jquery'
- import JDictSelectTag from '@/components/dict/JDictSelectTag'
- import JDate from '../../../../../components/jeecg/JDate'
- import {
- requestPut,
- deleteAction,
- getAction
- } from '@/api/manage'
+ import { getAction } from '@/api/manage'
+ import api from '@/api/mdc'
import ComparativeAnalysisBar from './ComparativeAnalysisBar'
import ComparativeAnalysisGauge from './ComparativeAnalysisGauge'
import ComparativeAnalysisPie from './ComparativeAnalysisPie'
- import '@/components/table2excel/table2excel'
- import JInput from '@/components/jeecg/JInput'
- import JEllipsis from '@/components/jeecg/JEllipsis'
- import Tooltip from 'ant-design-vue/es/tooltip'
- import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'
- import api from '@/api/mdc'
import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer.vue'
export default {
name: 'ComparativeAnalysisMain',
components: {
- Tooltip,
ComparativeAnalysisBar,
ComparativeAnalysisGauge,
ComparativeAnalysisPie,
- JDictSelectTag,
- JInput,
- JDate,
- JEllipsis,
SelectDeviceDrawer
},
props: { nodeTree: '', Type: '', nodePeople: '' },
data() {
return {
- activeKey: '1',
typeTree: '',
typeParent: 1,
typeEquipment: 1,
@@ -103,38 +83,31 @@
AnalysisGauge: [],
AnalysisPie: [],
dates: [],
- xianshi: '',
- readOnly: true,
queryParam: {
equipmentId: ''
},
queryParams: {},
queryParamEquip: {},
- queryParamPeople: {},
- dataStartsoucre: [],
url: {
comparativeAnalysis: '/mdc/efficiencyReport/comparativeAnalysis'
},
AnalysisList: {},
- driveTypeList: []
+ driveTypeList: [],
+ spinning: false
}
},
watch: {
Type(valmath) {
this.dataList = []
this.queryParams.typeTree = valmath
- // console.log(this.queryParams.typeTree)
},
nodeTree(val) { //鐩戝惉currSelected 鍙樺寲锛屽皢鍙樺寲鍚庣殑鏁板�间紶閫掔粰 getCurrSelected 浜嬩欢
if (JSON.stringify(val) != '{}') {
if (val.equipmentId) {
- // this.$set(this.queryParam, 'tierName', val.title)
this.queryParamEquip.parentId = ''
- // this.queryParams.equipmentId = val.equipmentId
this.queryParam.equipmentId = val.equipmentId
this.queryParamEquip.equipmentId = val.equipmentId
} else {
- // this.$set(this.queryParam, 'tierName', val.title)
this.queryParamEquip.parentId = val.key
this.queryParams.equipmentId = ''
}
@@ -144,12 +117,10 @@
nodePeople(val) {
if (JSON.stringify(val) != '{}') {
if (val.equipmentId) {
- // this.$set(this.queryParam, 'tierName', val.title)
this.queryParamEquip.parentId = ''
this.queryParams.equipmentId = val.equipmentId
this.queryParamEquip.equipmentId = val.equipmentId
} else {
- // this.$set(this.queryParam, 'tierName', val.title)
this.queryParamEquip.parentId = val.key
this.queryParams.equipmentId = ''
}
@@ -157,19 +128,29 @@
}
}
},
+ created() {
+ this.dates = [moment().subtract('days', 7), moment().subtract('days', 0)]
+ this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD')
+ this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD')
+ this.queryParam.typeTree = '1'
+ this.loadAnalysis()
+ this.getDriveTypeByApi()
+ },
+ mounted() {
+ const tabsBar = document.querySelector('#custom-tabs .ant-tabs-bar')
+ const tabsContent = document.querySelector('#custom-tabs .ant-tabs-content')
+ const tabsBarHeight = window.getComputedStyle(tabsBar).height
+ const tabsBarMarginBottom = window.getComputedStyle(tabsBar).marginBottom
+ tabsContent.style.height = `calc(100% - ${tabsBarHeight} - ${tabsBarMarginBottom})`
+ },
methods: {
- tabChange(val) {
- this.activeKey = val
- },
-
dateParamChange(v1, v2) {
- // console.log(v1,v2)
this.queryParam.startTime = v2[0]
this.queryParam.endTime = v2[1]
- console.log(v2[0], v2[1])
},
loadAnalysis() {
+ this.spinning = true
getAction(this.url.comparativeAnalysis, this.queryParam).then(res => {
if (res.success) {
this.AnalysisList = res.result
@@ -180,7 +161,7 @@
this.$message.warning(res.message)
}
}).finally(() => {
- this.loading = false
+ this.spinning = false
})
},
@@ -191,32 +172,14 @@
this.AnalysisPie = []
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.queryParam.parentId = this.queryParams.parentId
- // this.queryParam.equipmentId = this.queryParams.equipmentId
this.queryParam.typeTree = this.queryParams.typeTree
- getAction(this.url.comparativeAnalysis, this.queryParam).then((res) => {
- if (res.success) {
- this.AnalysisList = res.result
- this.AnalysisBarList = res.result.graphics
- this.AnalysisGauge = res.result.meters
- this.AnalysisPie.push(res.result.pieCharts)
- } else {
- // this.$message.warning(res.message)
- this.$notification.warning({
- message: '娑堟伅',
- description: res.message
- })
- }
- }).finally(() => {
- this.loading = false
- })
+ this.loadAnalysis()
},
searchReset() {
@@ -246,21 +209,6 @@
this.queryParams.equipmentId = this.queryParamEquip.equipmentId
}
}
- getAction(this.url.comparativeAnalysis, this.queryParams).then((res) => {
- if (res.success) {
- this.AnalysisList = res.result
- this.AnalysisBarList = res.result.graphics
- this.AnalysisGauge = res.result.meters
- this.AnalysisPie.push(res.result.pieCharts)
- } else {
- this.$notification.warning({
- message: '娑堟伅',
- description: res.message
- })
- }
- }).finally(() => {
- this.loading = false
- })
} else {
this.typeTree = this.queryParams.typeTree
this.typeParent = this.queryParams.parentId
@@ -283,22 +231,8 @@
this.queryParams.equipmentId = this.queryParamEquip.equipmentId
}
}
- getAction(this.url.comparativeAnalysis, this.queryParams).then((res) => {
- if (res.success) {
- this.AnalysisList = res.result
- this.AnalysisBarList = res.result.graphics
- this.AnalysisGauge = res.result.meters
- this.AnalysisPie.push(res.result.pieCharts)
- } else {
- this.$notification.warning({
- message: '娑堟伅',
- description: res.message
- })
- }
- }).finally(() => {
- this.loading = false
- })
}
+ this.loadAnalysis()
},
/**
@@ -334,81 +268,60 @@
* @param data 宸查�夋嫨鐨勮澶�
*/
selectOK(data) {
- console.log('data=', data)
this.queryParam.equipmentId = data.join(',')
- console.log('queryParam', this.queryParam.equipmentId)
}
- },
- created() {
- this.dates = [moment().subtract('days', 7), moment().subtract('days', 0)]
- this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD')
- this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD')
- this.queryParam.typeTree = '1'
- this.loadAnalysis()
- this.getDriveTypeByApi()
}
}
</script>
<style lang="less" scoped>
- /*@import '~@assets/less/common.less';*/
+ .device_list {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+
+ /deep/ .ant-spin-nested-loading {
+ flex: 1;
+ overflow: hidden;
+
+ .ant-spin-container {
+ height: 100%;
+
+ .ant-tabs {
+ height: 100%;
+ overflow: hidden;
+ }
+ }
+ }
+ }
@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;
- overflow: scroll;
}
}
@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;
- overflow: scroll;
}
}
@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;
- }
-
- .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 #DeviceList {
- height: 90% !important;
}
</style>
--
Gitblit v1.9.3