From 28189102d735bfc2c41720d1ef292bd9024b49f2 Mon Sep 17 00:00:00 2001 From: zhuzhuanzhuan Date: 星期四, 18 四月 2024 11:21:01 +0800 Subject: [PATCH] 1、首页 (1)设备级看板单击设备效率统计仪表盘图标跳转至统计分析页面并根据唯一编号筛选页面对应数据 (2)设备级看板点击设备班次按钮跳转至工作日历页面并根据设备编号筛选页面对应数据 (3)增加所有层级看板图表数据加载动画 (4)公司级以及分厂级看板利用率胶囊以及上月OEE车间单柱图表轴线刻度最大值采用动态设置方式而非固定100% (5)工段级看板上月OEE单柱图表轴线刻度最大值采用动态设置方式而非固定100% (6)工段级看板单击前7天利用率图表跳转至统计分析页面并根据唯一编号筛选页面对应数据 (7)工段级看板单击上月OEE图表跳转至设备综合效率分析页面并根据唯一编号筛选页面对应数据 2、调整全局导航栏页签间距,以便能在不超出导航栏的情况下同时放置更多页面页签 --- src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue | 216 +++++++++++++++++++++++++++-------------------------- 1 files changed, 111 insertions(+), 105 deletions(-) diff --git a/src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue b/src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue index 6e3e8fe..250d167 100644 --- a/src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue +++ b/src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue @@ -1,43 +1,43 @@ <template> <div class="deviceCalendar_list"> - <!-- 鏌ヨ鍖哄煙 --> - <div> - <div class="table-page-search-wrapper"> - <a-form layout="inline" @keyup.enter.native="searchQuery"> - <a-row :gutter="24" style="width: 100%"> - <a-col :md="6" :sm="6"> - <a-form-item label="鏃堕棿"> - <a-range-picker @change="dateParamChange" format="YYYYMMDD" v-model="dates"/> - </a-form-item> - </a-col> - <a-col :md="2" :sm="2" :xs="2"> - <a-space> - <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> - <a-button v-has="'user.disposition'" type="primary" @click="handleAdd" icon="plus">閰嶇疆</a-button> - </a-space> - </a-col> - <!--<a-col :md="2" :sm="2" :xs="2">--> - <!--<a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>--> - <!--</a-col>--> - <!--<a-col :md="2" :sm="2">--> - <!--<!–//娌堥–>--> - <!--<a-button v-has="'user.disposition'" type="primary" @click="handleAdd" icon="plus">閰嶇疆</a-button>--> + <!-- 鏌ヨ鍖哄煙 --> + <div> + <div class="table-page-search-wrapper"> + <a-form layout="inline" @keyup.enter.native="searchQuery"> + <a-row :gutter="24" style="width: 100%"> + <a-col :md="6" :sm="6"> + <a-form-item label="鏃堕棿"> + <a-range-picker @change="dateParamChange" format="YYYYMMDD" v-model="dates"/> + </a-form-item> + </a-col> + <a-col :md="2" :sm="2" :xs="2"> + <a-space> + <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> + <a-button v-has="'user.disposition'" type="primary" @click="handleAdd" icon="plus">閰嶇疆</a-button> + </a-space> + </a-col> + <!--<a-col :md="2" :sm="2" :xs="2">--> + <!--<a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>--> + <!--</a-col>--> + <!--<a-col :md="2" :sm="2">--> + <!--<!–//娌堥–>--> + <!--<a-button v-has="'user.disposition'" type="primary" @click="handleAdd" icon="plus">閰嶇疆</a-button>--> - <!--<!–<a-button type="primary" @click="handleAdd" icon="plus">閰嶇疆</a-button>–>--> - <!--</a-col>--> + <!--<!–<a-button type="primary" @click="handleAdd" icon="plus">閰嶇疆</a-button>–>--> + <!--</a-col>--> - </a-row> - </a-form> - </div> + </a-row> + </a-form> </div> + </div> - <div style="overflow: hidden;width: 100%;margin-top: 20px;flex: 1" id="DeviceList"> - <a-table ref="table" bordered :scroll="{x:'max-content',y:scrollY}" - size="middle" rowKey="id" :columns="columns" - @change="handleTableChange" class="ant-table-striped" - :dataSource="dataSource" :pagination="ipagination" - :loading="loading" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"> + <div style="overflow: hidden;width: 100%;margin-top: 20px;flex: 1" id="DeviceList"> + <a-table ref="table" bordered :scroll="{x:'max-content',y:scrollY}" + size="middle" rowKey="id" :columns="columns" + @change="handleTableChange" class="ant-table-striped" + :dataSource="dataSource" :pagination="ipagination" + :loading="loading" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"> <span slot="action" slot-scope="text, record"> <a-popconfirm @@ -47,19 +47,19 @@ <a>鍒犻櫎</a> </a-popconfirm> </span> - <span slot="isDaySpan" slot-scope="text, record"> + <span slot="isDaySpan" slot-scope="text, record"> <span v-if="text == 'true'">鏄�</span> <span v-if="text == 'false'">鍚�</span> </span> - </a-table> - </div> - <device-calendar-model ref="modalForm" @ok="modalFormOk"></device-calendar-model> + </a-table> + </div> + <device-calendar-model ref="modalForm" @ok="modalFormOk"></device-calendar-model> </div> </template> <script> import moment from 'moment' - import { filterObj } from '@/utils/util'; + import { filterObj } from '@/utils/util' import { putAction, getAction } from '@/api/manage' import DeviceCalendarModel from './DeviceCalendarModel' import DeviceCalendarAdd from './DeviceCalendarAdd' @@ -70,23 +70,23 @@ export default { name: 'DeviceCalendarList', - components: { DeviceCalendarModel,DeviceCalendarAdd ,DeviceCalendarListModel}, + components: { DeviceCalendarModel, DeviceCalendarAdd, DeviceCalendarListModel }, mixins: [JeecgListMixin], data() { return { - dates:[], + dates: [], yearAndMonth: {}, identifying: [], queryParam: {}, disableMixinCreated: true, - scrollY:465, + scrollY: 465, /* 鍒嗛〉鍙傛暟 */ - ipagination:{ + ipagination: { current: 1, pageSize: 10, pageSizeOptions: ['10', '20', '30'], showTotal: (total, range) => { - return range[0] + "-" + range[1] + " 鍏�" + total + "鏉�" + return range[0] + '-' + range[1] + ' 鍏�' + total + '鏉�' }, showQuickJumper: true, showSizeChanger: true, @@ -97,98 +97,101 @@ title: '鏃ユ湡', align: 'center', dataIndex: 'effectiveDate', - width:100, + width: 100 }, { title: '璁惧缂栧彿', align: 'center', dataIndex: 'equipmentId', - width:150 + width: 150 }, { title: '璁惧鍚嶇О', align: 'center', dataIndex: 'equipmentName', - width:150 + width: 150 }, { title: '鐝埗', align: 'center', dataIndex: 'shiftName', - width:150 + width: 150 }, { title: '鐝', align: 'center', dataIndex: 'shiftSubName', - width:150 + width: 150 }, { title: '寮�濮嬫椂闂�', align: 'center', dataIndex: 'startDate', - width:140 + width: 140 }, { title: '缁撴潫鏃堕棿', align: 'center', dataIndex: 'endDate', - width:140 + width: 140 }, { title: '鏄惁璺ㄥぉ', align: 'center', dataIndex: 'isDaySpan', scopedSlots: { customRender: 'isDaySpan' }, - width:100 + width: 100 }, { title: '寮�濮嬩紤鎭椂闂�', align: 'center', dataIndex: 'sleepStartDate', - width:140 + width: 140 }, { title: '缁撴潫浼戞伅鏃堕棿', align: 'center', dataIndex: 'sleepEndDate', - width:140 + width: 140 }, { title: '鎿嶄綔', dataIndex: 'action', - align: "center", + align: 'center', width: 100, scopedSlots: { customRender: 'action' }, - fixed:'right' + fixed: 'right' } ], checkedList: ['lyl'], dataList: [], url: { list: '/mdc/mdcDeviceCalendar/list', - delete:'/mdc/mdcDeviceCalendar/delete' + delete: '/mdc/mdcDeviceCalendar/delete' } } }, - props: { node: {}, Type:'' }, + props: { node: {}, Type: '' }, created() { + const { equipmentId } = this.$route.params + if (equipmentId) this.queryParam.equipmentId = equipmentId + this.dates = [moment().subtract('days', 0), 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.queryParam.typeTree = '1' this.loadData() }, - mounted(){ - window.addEventListener('resize',this.handleWindowResize) + mounted() { + window.addEventListener('resize', this.handleWindowResize) this.handleWindowResize() }, - beforeDestroy(){ - window.removeEventListener('resize',this.handleWindowResize) + beforeDestroy() { + window.removeEventListener('resize', this.handleWindowResize) }, watch: { - Type(valmath){ - this.dataList = []; + Type(valmath) { + this.dataList = [] this.queryParam.typeTree = valmath // console.log(this.queryParams.typeTree) }, @@ -196,7 +199,7 @@ if (JSON.stringify(val) != '{}') { if (val.equipmentId != null) { this.queryParam.equipmentId = val.equipmentId - this.queryParam.parentId = " " + this.queryParam.parentId = ' ' this.ipagination.current = 1 this.loadData() } else { @@ -221,41 +224,40 @@ this.loadData() }, loadData(arg) { - this.dataSource = []; - if(!this.url.list){ - this.$message.error("璇疯缃畊rl.list灞炴��!") + this.dataSource = [] + if (!this.url.list) { + this.$message.error('璇疯缃畊rl.list灞炴��!') return } //鍔犺浇鏁版嵁 鑻ヤ紶鍏ュ弬鏁�1鍒欏姞杞界涓�椤电殑鍐呭 if (arg === 1) { - this.ipagination.current = 1; + this.ipagination.current = 1 } - var params = this.getQueryParams();//鏌ヨ鏉′欢 + var params = this.getQueryParams()//鏌ヨ鏉′欢 - if(!params){ - return false; + if (!params) { + return false } - params.startTime = this.queryParam.startTime; - params.endTime = this.queryParam.endTime; - params.parentId = this.queryParam.parentId; - params.equipmentId = this.queryParam.equipmentId; - params.orderByName = "ascend"; - this.loading = true; + params.startTime = this.queryParam.startTime + params.endTime = this.queryParam.endTime + params.parentId = this.queryParam.parentId + params.equipmentId = this.queryParam.equipmentId + params.orderByName = 'ascend' + this.loading = true getAction(this.url.list, params).then((res) => { if (res.success) { // console.log(res) //update-begin---author:zhangyafei Date:20201118 for锛氶�傞厤涓嶅垎椤电殑鏁版嵁鍒楄〃------------ - this.dataSource = res.result.records||res.result; - if(res.result.total) - { - this.ipagination.total = res.result.total; - }else{ - this.ipagination.total = 0; + this.dataSource = res.result.records || res.result + if (res.result.total) { + this.ipagination.total = res.result.total + } else { + this.ipagination.total = 0 } //update-end---author:zhangyafei Date:20201118 for锛氶�傞厤涓嶅垎椤电殑鏁版嵁鍒楄〃------------ - }else{ + } else { this.$message.warning(res.message) } }).finally(() => { @@ -265,51 +267,55 @@ handleAdd() { let record = {} if (JSON.stringify(this.node) != '{}') { - record = { equipmentId: this.node.equipmentId, equmentName: this.node.equipmentName } + record = { equipmentId: this.node.equipmentId, equmentName: this.node.equipmentName } } this.$refs.modalForm.add(record) this.$refs.modalForm.title = '璁惧宸ヤ綔鏃ュ巻閰嶇疆' this.$refs.modalForm.disableSubmit = false }, - handleWindowResize(){ - const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2) - const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2) + handleWindowResize() { + const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0, -2) + const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0, -2) this.scrollY = boxHeight - tableHeadHeight - 50 } } } </script> <style scoped> - .deviceCalendar_list{ + .deviceCalendar_list { overflow: hidden; display: flex; flex-direction: column; } - @media screen and (min-width: 1920px){ - .deviceCalendar_list{ - height: 812px!important; + @media screen and (min-width: 1920px) { + .deviceCalendar_list { + height: 812px !important; } } - @media screen and (min-width: 1680px) and (max-width: 1920px){ - .deviceCalendar_list{ - height: 812px!important; + + @media screen and (min-width: 1680px) and (max-width: 1920px) { + .deviceCalendar_list { + height: 812px !important; } } - @media screen and (min-width: 1400px) and (max-width: 1680px){ - .deviceCalendar_list{ - height: 664px!important; + + @media screen and (min-width: 1400px) and (max-width: 1680px) { + .deviceCalendar_list { + height: 664px !important; } } - @media screen and (min-width: 1280px) and (max-width: 1400px){ - .deviceCalendar_list{ - height: 565px!important; + + @media screen and (min-width: 1280px) and (max-width: 1400px) { + .deviceCalendar_list { + height: 565px !important; } } - @media screen and (max-width: 1280px){ - .deviceCalendar_list{ - height: 565px!important; + + @media screen and (max-width: 1280px) { + .deviceCalendar_list { + height: 565px !important; } } -- Gitblit v1.9.3