From f43aec11c37f08b0146c2cbe28067d6ff419e58b Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期二, 08 十月 2024 13:23:53 +0800
Subject: [PATCH] OEE图表页面新增柱状图展示
---
src/views/mdc/base/OEECharts.vue | 268 +++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 207 insertions(+), 61 deletions(-)
diff --git a/src/views/mdc/base/OEECharts.vue b/src/views/mdc/base/OEECharts.vue
index b9922cb..0af4b9e 100644
--- a/src/views/mdc/base/OEECharts.vue
+++ b/src/views/mdc/base/OEECharts.vue
@@ -2,19 +2,13 @@
<a-card :bordered="false">
<!-- 鏌ヨ鍖哄煙 -->
<div class="table-page-search-wrapper">
- <a-form layout="inline" @keyup.enter.native="searchQuery">
+ <a-form layout="inline" @keyup.enter.native="getChartDataByApi">
<a-row :gutter="24">
<a-col :md="4" :sm="4">
<a-form-item label="璁惧绫诲瀷">
- <a-select
- :value="queryParam.equipmentType"
- mode="multiple"
- placeholder="璇烽�夋嫨璁惧绫诲瀷"
- allow-clear
- :maxTagCount="1"
- @change="selectChange($event,'equipmentType')"
- >
- <a-select-option v-for="(item,index) in equipmentTypeList" :value="item.value" :key="index">
+ <a-select placeholder="璇烽�夋嫨璁惧绫诲瀷" :triggerChange="true" v-model="queryParam.equipmentType"
+ :allowClear="true">
+ <a-select-option v-for='item in equipmentTypeList' :key='item.id' :value='item.value'>
{{item.label}}
</a-select-option>
</a-select>
@@ -28,12 +22,13 @@
value-format="YYYY-MM"
v-model="queryParam.date"
style="width: 100%"
+ :allowClear="false"
/>
</a-form-item>
</a-col>
<a-col :md="6" :sm="6">
<a-space>
- <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
+ <a-button type="primary" @click="getChartDataByApi" icon="search">鏌ヨ</a-button>
<a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>
</a-space>
</a-col>
@@ -41,68 +36,219 @@
</a-form>
</div>
+ <div>
+ <div style="height: 650px" id="chart-container"></div>
+ </div>
</a-card>
</template>
<script>
-import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-import moment from 'moment'
-import { getAction } from '@api/manage'
+ import moment from 'moment'
+ import { getAction } from '@api/manage'
-export default {
- name: 'OEECharts',
- mixins: [JeecgListMixin],
- created() {
- this.getEquipmentTypeListByApi()
- },
- data() {
- return {
- name: 'OEECharts',
- description: '杩欐槸OEE缁熻鏌辩姸鍥鹃〉闈�',
- equipmentTypeList: [],
- queryParam: {
- date: moment().subtract('month', 1).format('YYYY-MM')
- },
- queryParams: {
- equipmentType: []
- },
- url: {
- list: '/mdc/mdcOverallEquipmentEfficiency/oeeStatisticsChart',
- queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType'
+ export default {
+ name: 'OEECharts',
+ mounted() {
+ this.getEquipmentTypeListByApi()
+ this.getChartDataByApi()
+ window.addEventListener('resize', this.handleWindowResize)
+ },
+ data() {
+ return {
+ name: 'OEECharts',
+ description: '杩欐槸OEE缁熻鏌辩姸鍥鹃〉闈�',
+ equipmentTypeList: [],
+ queryParam: {
+ date: moment().subtract('month', 1).format('YYYY-MM')
+ },
+ barChart: '',
+ barChartData: [],
+ url: {
+ list: '/mdc/mdcOverallEquipmentEfficiency/oeeStatisticsChart',
+ queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType'
+ }
}
- }
- },
- methods: {
- getEquipmentTypeListByApi() {
- getAction(this.url.queryEquipmentType).then(res => {
- if (res.success) {
- this.equipmentTypeList = res.result.map(item => {
- return {
- label: item.equipmentTypeName,
- value: item.equipmentTypeName
+ },
+ methods: {
+ getEquipmentTypeListByApi() {
+ getAction(this.url.queryEquipmentType).then(res => {
+ if (res.success) {
+ this.equipmentTypeList = res.result.map(item => {
+ return {
+ label: item.equipmentTypeName,
+ value: item.equipmentTypeName
+ }
+ })
+ } else {
+ this.$notification.warning({
+ message: '娑堟伅',
+ description: res.message
+ })
+ }
+ })
+ },
+ getChartDataByApi() {
+ this.barChart = this.$echarts.init(document.getElementById('chart-container'))
+ this.barChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#000',
+ maskColor: 'transparent' // 閬僵灞�
+ })
+ getAction(this.url.list, this.queryParam)
+ .then(res => {
+ if (res.success) {
+ this.barChartData = res.result
+ this.drawChart()
}
})
- } else {
- this.$notification.warning({
- message: '娑堟伅',
- description: res.message
- })
+ // this.barChartData = [
+ // {
+ // label: '鏈哄專涓績',
+ // value: 3.1
+ // },
+ // {
+ // label: '鍙剁墖涓績',
+ // value: 6.11
+ // },
+ // {
+ // label: '鐩樿酱涓績',
+ // value: 6.23
+ // },
+ // {
+ // label: '鏈烘涓績',
+ // value: 23.24
+ // },
+ // {
+ // label: '缁煎悎鏈烘鍒堕�犱腑蹇�',
+ // value: 32.92
+ // },
+ // {
+ // label: '閽ｇ剨浼樿壇鍒堕�犱腑蹇�',
+ // value: 35.52
+ // },
+ // {
+ // label: '鐕冩満涓績',
+ // value: 36.55
+ // },
+ // {
+ // label: '鐕冩満瀹や腑蹇�',
+ // value: 38.62
+ // },
+ // {
+ // label: '绮鹃摳涓績',
+ // value: 39.25
+ // }
+ // ]
+ },
+ drawChart() {
+ const option = {
+ title: {
+ show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
+ text: '', // 涓绘爣棰樻枃鏈�
+ x: 'center', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊�
+ y: 'bottom', // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊�
+ textStyle: {
+ // 涓绘爣棰樻枃鏈牱寮�
+ fontSize: 20,
+ fontWeight: 'normal',
+ fontWeight: 'bold'
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ },
+ formatter: function(params) {
+ return '<span style="font-weight:bolder;">' + params[0].name + '</span><br/>' +
+ '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params[0].color + '"></span>' + ' OEE: ' + params[0].value + '%'
+ }
+ },
+ grid: {
+ top: '5%',
+ left: '5%',
+ right: '5%',
+ bottom: '10%',
+ containLabel: true
+ },
+ xAxis: {
+ name: '',
+ nameLocation: 'middle',
+ type: 'category',
+ data: this.barChartData.map(item => item.key),
+ axisLabel: {
+ show: true, // 鏄惁鏄剧ず鍒诲害鏍囩锛岄粯璁ゆ樉绀�
+ interval: 0, // 鍧愭爣杞村埢搴︽爣绛剧殑鏄剧ず闂撮殧锛屽湪绫荤洰杞翠腑鏈夋晥锛涢粯璁や細閲囩敤鏍囩涓嶉噸鍙犵殑绛栫暐闂撮殧鏄剧ず鏍囩锛涘彲浠ヨ缃垚0寮哄埗鏄剧ず鎵�鏈夋爣绛撅紱濡傛灉璁剧疆涓�1锛岃〃绀恒�庨殧涓�涓爣绛炬樉绀轰竴涓爣绛俱�忥紝濡傛灉鍊间负2锛岃〃绀洪殧涓や釜鏍囩鏄剧ず涓�涓爣绛撅紝浠ユ绫绘帹銆�
+ rotate: 45, // 鍒诲害鏍囩鏃嬭浆鐨勮搴︼紝鍦ㄧ被鐩酱鐨勭被鐩爣绛炬樉绀轰笉涓嬬殑鏃跺�欏彲浠ラ�氳繃鏃嬭浆闃叉鏍囩涔嬮棿閲嶅彔锛涙棆杞殑瑙掑害浠�-90搴﹀埌90搴�
+ inside: false, // 鍒诲害鏍囩鏄惁鏈濆唴锛岄粯璁ゆ湞澶�
+ margin: 25, // 鍒诲害鏍囩涓庤酱绾夸箣闂寸殑璺濈
+ fontSize: 18,
+ color: '#000'
+ },
+ axisTick: {
+ show: true
+ }
+ },
+ yAxis: {
+ min: 0,
+ interval: 5,
+ axisLabel: {
+ formatter: value => value.toFixed(2) + '%',
+ fontSize: 16,
+ color: '#000',
+ margin: 20
+ },
+ axisTick: {
+ show: true
+ },
+ axisLine: {
+ show: true
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#000'
+ }
+ }
+ },
+ series: {
+ type: 'bar',
+ data: this.barChartData,
+ barWidth: 50,
+ itemStyle: {
+ color: '#6180A6'
+ },
+ zlevel: 1,
+ label: {
+ show: true,
+ lineHeight: 25,
+ position: 'top',
+ formatter: params => params.value.toFixed(2) + '%',
+ textStyle: {
+ color: '#000',
+ fontSize: 16
+ }
+ }
+ }
}
- })
- },
- selectChange(value, key) {
- this.queryParams[key] = value
- },
- searchReset() {
- this.queryParams = {
- equipmentType: []
+ const currentMonth = moment(this.queryParam.date).format('M')
+ option.title.text = `鍚勫崟浣嶅姞宸ヤ腑蹇冭澶�${currentMonth}鏈堜唤骞冲潎OEE`
+ this.barChart.setOption(option, true)
+ this.barChart.hideLoading()
+ },
+ searchReset() {
+ this.queryParam = {
+ date: moment().subtract('month', 1).format('YYYY-MM')
+ }
+ this.getChartDataByApi()
+ },
+ handleWindowResize() {
+ if (this.barChart) this.barChart.resize()
}
- this.queryParam = {}
- this.loadData()
}
}
-}
</script>
<style scoped>
-@import '~@assets/less/common.less';
+ @import '~@assets/less/common.less';
</style>
\ No newline at end of file
--
Gitblit v1.9.3