| | |
| | | <div class="table-page-search-wrapper"> |
| | | <a-form layout="inline" @keyup.enter.native="searchQuery"> |
| | | <a-row :gutter="24"> |
| | | <a-col :md="6" :sm="6"> |
| | | <a-col :md="7" :sm="7"> |
| | | <a-form-item label="时间"> |
| | | <a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD" |
| | | v-model="dates"/> |
| | | v-model="dates" :allowClear="false"/> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="7" :sm="7" :xs="7"> |
| | | <a-col :md="17" :sm="17" :xs="17"> |
| | | <a-form-item label="时间段"> |
| | | <a-time-picker :default-value="moment('00:00', 'HH:mm')" format="HH:mm" @change="onChangeStart"/> |
| | | 至 |
| | | <a-time-picker :default-value="moment('08:00', 'HH:mm')" format="HH:mm" @change="onChangeEnd"/> |
| | | <a-space> |
| | | <a-time-picker :default-value="moment('00:00', 'HH:mm')" format="HH:mm" @change="onChangeStart" :allowClear="false"/> |
| | | 至 |
| | | <a-time-picker :default-value="moment('08:00', 'HH:mm')" format="HH:mm" @change="onChangeEnd" :allowClear="false"/> |
| | | <a-button type="primary" @click="searchQuery" icon="search">查询</a-button> |
| | | </a-space> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :lg="2" :md="3" :sm="3" :xs="3"> |
| | | <a-button type="primary" @click="searchQuery" icon="search">查询</a-button> |
| | | </a-col> |
| | | </a-row> |
| | | </a-form> |
| | | </div> |
| | | <div id="DeviceList"> |
| | | <div class="openRateTrendDg"> |
| | | <div id="Efficiency" class="container" style="margin-top: 20px;"> |
| | | <a-spin :spinning="loading"> |
| | | <a-spin :spinning="loading"> |
| | | <div id="Efficiency" class="container" style="margin-bottom: 15px;"> |
| | | <div class="table2"> |
| | | <table class="dataContent table" border="1" cellspacing="0" cellpadding="0" |
| | | style="white-space: nowrap;text-align: center;"> |
| | |
| | | <th class="thgu dong1 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;"> |
| | | 设备编号 |
| | | </th> |
| | | <th class="thgu dong2 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;"> |
| | | <th class="thgu dong2 name" rowspan="2" style="min-width: 162px; max-width: 162px;width: 162px;"> |
| | | 设备名称 |
| | | </th> |
| | | <th class="thgu dong3 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;"> |
| | |
| | | </tbody> |
| | | </table> |
| | | </div> |
| | | </a-spin> |
| | | </div> |
| | | </div> |
| | | <div id="openRateTrendChart" style="width: 100%;height: 60%"></div> |
| | | </a-spin> |
| | | |
| | | <div id="openRateTrendChart"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | export default { |
| | | // mixins: [JeecgListMixin], |
| | | name: 'openRateFractionAnalysisMain', |
| | | components: {}, |
| | | data() { |
| | | return { |
| | | dataSource: [], |
| | |
| | | }, |
| | | mounted() { |
| | | this.tableScroll = document.querySelector('.table2') |
| | | window.addEventListener('resize',this.handleWindowResize) |
| | | }, |
| | | beforeDestroy() { |
| | | this.tableScroll.removeEventListener('scroll', this.tableScrollX) |
| | | window.removeEventListener('resize',this.handleWindowResize) |
| | | }, |
| | | watch: { |
| | | Type(valmath) { |
| | |
| | | this.dates = [v1[0], v1[1]] |
| | | }, |
| | | searchQuery() { |
| | | // 因触底刷新会修改参数时间值,故在此用时间选择器的时间值对参数时间值再次赋值,若不这样做则参数时间值则会与时间选择器上的时间值不一致 |
| | | this.queryParam.startDate = moment(this.dates[0]).format('YYYYMMDD') |
| | | this.queryParam.endDate = moment(this.dates[1]).format('YYYYMMDD') |
| | | if (this.queryParam.startTime && this.queryParam.endTime && this.dates[0] && this.dates[1]) { |
| | | if (this.queryParam.typeTree == '1') { |
| | | this.queryParam.parentId = this.queryParamEquip.parentId |
| | | this.queryParam.equipmentId = this.queryParamEquip.equipmentId |
| | | } else { |
| | | this.queryParam.parentId = this.queryParamPeople.parentId |
| | | this.queryParam.equipmentId = '' |
| | | } |
| | | this.requestAlldataSize = moment.duration(moment(this.queryParam.endDate) - moment(this.queryParam.startDate), 'millisecond').asDays() + 1 |
| | | this.loadData1() |
| | | } else { |
| | | this.$notification.warning({ |
| | | message: '提示', |
| | | description: '请选择时间或时间段' |
| | | }) |
| | | } |
| | | |
| | | // this.onClearSelected() |
| | | if (this.queryParam.typeTree == '1') { |
| | | this.queryParam.parentId = this.queryParamEquip.parentId |
| | | this.queryParam.equipmentId = this.queryParamEquip.equipmentId |
| | | } else { |
| | | this.queryParam.parentId = this.queryParamPeople.parentId |
| | | this.queryParam.equipmentId = '' |
| | | } |
| | | this.requestAlldataSize = moment.duration(moment(this.queryParam.endDate) - moment(this.queryParam.startDate), 'millisecond').asDays() + 1 |
| | | this.loadData1() |
| | | }, |
| | | // searchReset() { |
| | | // this.typeTree = this.queryParam.typeTree |
| | | // this.typeParent = this.queryParam.parentId |
| | | // this.typeEquipment = this.queryParam.equipmentId |
| | | // this.queryParam = {} |
| | | // this.dates = [] |
| | | // this.queryParam.typeTree = this.typeTree |
| | | // this.queryParam.parentId = this.typeParent |
| | | // this.queryParam.equipmentId = this.typeEquipment |
| | | // // this.ipagination.current = 1 |
| | | // this.loadData1(); |
| | | // // this.queryParam = {} |
| | | // // this.dates = [] |
| | | // // this.loadData() |
| | | // // this.onClearSelected() |
| | | // }, |
| | | // loadData1() { |
| | | // let that = this |
| | | // that.columns=[ |
| | | // { |
| | | // title: '设备编号', |
| | | // align: 'center', |
| | | // dataIndex: 'equipmentId', |
| | | // width:'150px' |
| | | // }, |
| | | // { |
| | | // title: '设备名称', |
| | | // align: 'center', |
| | | // dataIndex: 'equipmentName', |
| | | // width:'150px' |
| | | // }, |
| | | // ] |
| | | // that.tableHeads = [] |
| | | // that.dataList = [] |
| | | // getAction(this.url.efficiencyList, that.queryParam).then(res => { |
| | | // var tmp = {} |
| | | // console.log(res) |
| | | // if (res.success) |
| | | // |
| | | // that.dataSource = res.result.mdcEfficiencyList |
| | | // for(var k = 0;k<that.dataSource[0].dataList.length;k++){ |
| | | // that.columns.push( |
| | | // { |
| | | // title:that.dataSource[0].dataList.theDate, |
| | | // align: 'center', |
| | | // width:'120px', |
| | | // // dataIndex:'utilizationRate', |
| | | // } |
| | | // ) |
| | | // } |
| | | // for(var i = 0;i<that.dataSource.length;i++){ |
| | | // for (var j = 0; j < that.dataSource[i].dataList.length;j++){ |
| | | // // that.columns.push( |
| | | // // { |
| | | // // title:that.dataSource[0].dataList[j].theDate, |
| | | // // align: 'center', |
| | | // // width:'120px', |
| | | // // dataIndex:'utilizationRate', |
| | | // // } |
| | | // // ) |
| | | // } |
| | | // |
| | | // } |
| | | // console.log(that.columns) |
| | | // console.log(that.dataSource) |
| | | // // this.initDeviceType(this.dataList) |
| | | // this.draw() |
| | | // } |
| | | // } |
| | | loadData1() { |
| | | this.loading = true |
| | | this.tableHeads = [] |
| | |
| | | }) |
| | | }, |
| | | draw() { |
| | | let openRateTrendAnalysisChart = this.$echarts.init(document.getElementById('openRateTrendChart'), 'macarons') |
| | | this.openRateTrendAnalysisChart = this.$echarts.init(document.getElementById('openRateTrendChart'), 'macarons') |
| | | let openRateTrendChartOptions = { |
| | | title: { |
| | | text: '利用率分段分析', |
| | |
| | | } |
| | | ] |
| | | } |
| | | openRateTrendAnalysisChart.setOption(openRateTrendChartOptions, true) |
| | | this.openRateTrendAnalysisChart.setOption(openRateTrendChartOptions, true) |
| | | }, |
| | | |
| | | /** |
| | |
| | | this.loading = false |
| | | }) |
| | | } |
| | | }, |
| | | |
| | | /** |
| | | * 当浏览器可视窗口尺寸发生改变时触发 |
| | | */ |
| | | handleWindowResize(){ |
| | | if(this.openRateTrendAnalysisChart) this.openRateTrendAnalysisChart.resize() |
| | | } |
| | | } |
| | | } |
| | |
| | | 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 { |
| | |
| | | |
| | | .dataContent .mathData td { |
| | | padding: 10px; |
| | | /*display: none;*/ |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .dataContent .mathData:hover td { |
| | | background-color: #e6f7ff; |
| | | } |
| | | |
| | | .dataContent .mathData .td { |
| | | /*background-color: #ff9bd2;*/ |
| | | display: inline-block; |
| | | padding: 10px; |
| | | } |
| | | |
| | | .dataContent .mathData .tdd { |
| | | /*display: none;*/ |
| | | } |
| | | |
| | | .table2 { |
| | |
| | | overflow: auto; |
| | | } |
| | | |
| | | /*tr th {*/ |
| | | /*height: 50px!important;*/ |
| | | /*}*/ |
| | | /*tr td{*/ |
| | | /*height: 50px!important;*/ |
| | | /*}*/ |
| | | .table2 thead tr th:first-child, |
| | | .table tbody tr .tdgu { |
| | | position: sticky; |
| | |
| | | |
| | | .table tbody tr .tdgu2 { |
| | | position: sticky; |
| | | left: 300px; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .table tbody tr .tdgu3 { |
| | | position: sticky; |
| | | left: 450px; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .table tbody tr .tdgu4 { |
| | | position: sticky; |
| | | left: 550px; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .table tbody tr .tdgu5 { |
| | | position: sticky; |
| | | left: 700px; |
| | | left: 312px; |
| | | z-index: 2; |
| | | } |
| | | |
| | |
| | | .table2 thead .equipname .dong1 { |
| | | z-index: 4; |
| | | left: 0; |
| | | /*border: 1px solid #000;*/ |
| | | } |
| | | |
| | | .table2 thead .equipname .dong2 { |
| | |
| | | |
| | | .table2 thead .equipname .dong3 { |
| | | z-index: 5; |
| | | left: 300px; |
| | | left: 312px; |
| | | } |
| | | |
| | | .table2 thead .equipname .dong4 { |
| | | z-index: 5; |
| | | left: 450px; |
| | | .efficiency_list #DeviceList { |
| | | height: 90% !important; |
| | | } |
| | | |
| | | .table2 thead .equipname .dong5 { |
| | | z-index: 5; |
| | | left: 550px; |
| | | #Efficiency{ |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .table2 thead .equipname .dong6 { |
| | | z-index: 5; |
| | | left: 700px; |
| | | #openRateTrendChart{ |
| | | width: 100%; |
| | | height: 60% |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px) { |
| | | #Efficiency { |
| | | height: 337px !important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px) { |
| | | #Efficiency { |
| | | height: 337px !important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px) { |
| | | #Efficiency { |
| | | height: 190px !important; |
| | | overflow: scroll; |
| | | height: 337px !important; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px) { |
| | | #Efficiency { |
| | | height: 90px !important; |
| | | overflow: scroll; |
| | | height: 200px !important; |
| | | } |
| | | } |
| | | |
| | | @media screen and (max-width: 1280px) { |
| | | #Efficiency { |
| | | height: 90px !important; |
| | | overflow: scroll; |
| | | height: 200px !important; |
| | | } |
| | | } |
| | | |
| | | #Efficiency .table_guding1 { |
| | | position: absolute; |
| | | overflow: hidden; |
| | | width: 500px; |
| | | } |
| | | |
| | | #Efficiency .table_guding2 { |
| | | overflow-x: scroll; |
| | | width: 500px; |
| | | } |
| | | |
| | | /deep/ .ant-card { |
| | | height: 100% !important; |
| | | } |
| | | |
| | | /deep/ .ant-card .ant-card-body { |
| | | height: 100% !important; |
| | | } |
| | | |
| | | .efficiency_list #DeviceList { |
| | | height: 90% !important; |
| | | } |
| | | </style> |