| | |
| | | <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"/> |
| | |
| | | </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> |
| | |
| | | }, |
| | | 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) { |
| | |
| | | }) |
| | | }, |
| | | 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() |
| | | } |
| | | } |
| | | } |
| | |
| | | border: 1px solid #ccc; |
| | | /*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; |
| | |
| | | padding: 5px; |
| | | } |
| | | |
| | | .dataContent .notfixed th { |
| | | /*width: auto;*/ |
| | | } |
| | | |
| | | .dataContent tr td { |
| | | height: 35px; |
| | | } |
| | | |
| | | .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> |