| | |
| | | <template> |
| | | <div class="deviceCalendar_list"> |
| | | <div :bordered="false"> |
| | | <!-- 查询区域 --> |
| | | |
| | | <div> |
| | | <div class="table-page-search-wrapper"> |
| | | <a-form layout="inline" @keyup.enter.native="searchQuery"> |
| | | <a-row :gutter="24"> |
| | | <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"/> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <div style="overflow: auto;width: 100%;margin-top: 20px;height: 569px;"> |
| | | <a-table ref="table" bordered 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 |
| | |
| | | </a-table> |
| | | </div> |
| | | <device-calendar-model ref="modalForm" @ok="modalFormOk"></device-calendar-model> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | identifying: [], |
| | | queryParam: {}, |
| | | disableMixinCreated: true, |
| | | scrollY:465, |
| | | /* 分页参数 */ |
| | | ipagination:{ |
| | | current: 1, |
| | |
| | | title: '日期', |
| | | align: 'center', |
| | | dataIndex: 'effectiveDate', |
| | | width:100, |
| | | }, |
| | | { |
| | | title: '设备编号', |
| | | align: 'center', |
| | | dataIndex: 'equipmentId' |
| | | dataIndex: 'equipmentId', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '设备名称', |
| | | align: 'center', |
| | | dataIndex: 'equipmentName', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '班制', |
| | | align: 'center', |
| | | dataIndex: 'shiftName' |
| | | dataIndex: 'shiftName', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '班次', |
| | | align: 'center', |
| | | dataIndex: 'shiftSubName' |
| | | dataIndex: 'shiftSubName', |
| | | width:150 |
| | | }, |
| | | { |
| | | title: '开始时间', |
| | | align: 'center', |
| | | dataIndex: 'startDate' |
| | | dataIndex: 'startDate', |
| | | width:140 |
| | | }, |
| | | { |
| | | title: '结束时间', |
| | | align: 'center', |
| | | dataIndex: 'endDate' |
| | | dataIndex: 'endDate', |
| | | width:140 |
| | | }, |
| | | { |
| | | title: '是否跨天', |
| | | align: 'center', |
| | | dataIndex: 'isDaySpan', |
| | | scopedSlots: { customRender: 'isDaySpan' } |
| | | scopedSlots: { customRender: 'isDaySpan' }, |
| | | width:100 |
| | | }, |
| | | { |
| | | title: '开始休息时间', |
| | | align: 'center', |
| | | dataIndex: 'sleepStartDate' |
| | | dataIndex: 'sleepStartDate', |
| | | width:140 |
| | | }, |
| | | { |
| | | title: '结束休息时间', |
| | | align: 'center', |
| | | dataIndex: 'sleepEndDate' |
| | | dataIndex: 'sleepEndDate', |
| | | width:140 |
| | | }, |
| | | { |
| | | title: '操作', |
| | | dataIndex: 'action', |
| | | align: "center", |
| | | fixed: "right", |
| | | width: 147, |
| | | scopedSlots: { customRender: 'action' } |
| | | width: 100, |
| | | scopedSlots: { customRender: 'action' }, |
| | | fixed:'right' |
| | | } |
| | | ], |
| | | checkedList: ['lyl'], |
| | |
| | | this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD') |
| | | this.queryParam.typeTree = "1" |
| | | this.loadData() |
| | | }, |
| | | mounted(){ |
| | | window.addEventListener('resize',this.handleWindowResize) |
| | | this.handleWindowResize() |
| | | }, |
| | | beforeDestroy(){ |
| | | window.removeEventListener('resize',this.handleWindowResize) |
| | | }, |
| | | watch: { |
| | | Type(valmath){ |
| | |
| | | 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) |
| | | this.scrollY = boxHeight - tableHeadHeight - 50 |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | <style scoped> |
| | | .deviceCalendar_list{ |
| | | overflow: hidden; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px){ |
| | | .deviceCalendar_list{ |
| | | height: 812px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px){ |
| | | .deviceCalendar_list{ |
| | | height: 812px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px){ |
| | | .deviceCalendar_list{ |
| | | height: 664px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px){ |
| | | .deviceCalendar_list{ |
| | | height: 565px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (max-width: 1280px){ |
| | | .deviceCalendar_list{ |
| | | height: 565px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | .ant-table-striped /deep/ .table-striped td { |
| | | background-color: #fafafa; |
| | | } |
| | | .identifyingclass { |
| | | width: 55px; |
| | | height: 15px; |
| | | display: inline-block |
| | | } |
| | | |
| | | .dataContent { |
| | | border: 1px solid #ccc; |
| | | width: 100%; |
| | | /*height: 100%;*/ |
| | | overflow: hidden; |
| | | overflow-y: auto; |
| | | text-align: center; |
| | | } |
| | | |
| | | .dataContent .fixed th { |
| | | width: 50px; |
| | | } |
| | | |
| | | .dataContent .thead th { |
| | | background-color: #fafafa; |
| | | text-align: center; |
| | | height: 30px; |
| | | padding: 5px; |
| | | } |
| | | |
| | | .dataContent .notfixed th { |
| | | width: auto; |
| | | } |
| | | |
| | | .dataContent tr td { |
| | | height: 35px; |
| | | } |
| | | |
| | | .dataContent .mathData td { |
| | | padding: 10px; |
| | | /*display: none;*/ |
| | | } |
| | | |
| | | .dataContent .mathData .td { |
| | | /*background-color: #ff9bd2;*/ |
| | | display: inline-block; |
| | | padding: 10px; |
| | | } |
| | | |
| | | .dataContent .mathData .tdd { |
| | | /*display: none;*/ |
| | | } |
| | | |
| | | .pink { |
| | | background-color: #ff9bd2; |
| | | } |
| | | |
| | | .yellow { |
| | | background-color: #e8ff37; |
| | | } |
| | | |
| | | .green { |
| | | background-color: #99ff4e; |
| | | } |
| | | </style> |