| | |
| | | </a-select> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="6" :sm="6"> |
| | | <a-form-item label="时间"> |
| | | <a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD" v-model="dates"/> |
| | | <a-col :md="4" :sm="4"> |
| | | <a-form-item label="驱动类型"> |
| | | <a-auto-complete |
| | | v-model="queryParam.driveType" |
| | | :data-source="driveTypeList" |
| | | placeholder="请选择驱动类型" |
| | | :filter-option="filterOption" |
| | | :allowClear="true" |
| | | /> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="14" :sm="14"> |
| | | <a-space> |
| | | <a-button type="primary" @click="searchQuery" icon="search">查询</a-button> |
| | | <a-button type="primary" @click="searchReset" icon="reload">重置</a-button> |
| | | <a-button type="primary" @click="exportExcel" icon="download">导出</a-button> |
| | | </a-space> |
| | | <a-col :md="6" :sm="6"> |
| | | <a-form-item label="时间"> |
| | | <a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD" v-model="dates" :allowClear="false"/> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="4" :sm="4" :xs="4"> |
| | | <a-form-item label="设备级别"> |
| | | <j-dict-select-tag placeholder="请选择设备级别" dictCode="device_level" v-model="queryParam.deviceLevel" |
| | | allow-clear/> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="4" :sm="4" :xs="4"> |
| | | <a-form-item label="设备种类"> |
| | | <j-dict-select-tag placeholder="请选择设备种类" dictCode="device_category" |
| | | v-model="queryParam.deviceCategory" |
| | | allow-clear/> |
| | | </a-form-item> |
| | | </a-col> |
| | | <!--<a-col :md="8" :sm="8" style="display: flex;align-items: flex-start;-webkit-align-items: flex-start;justify-content: space-between;">--> |
| | | <!--<table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;margin-left: 24px">--> |
| | | <!--<tr>--> |
| | | <!--<td v-for="(item, index) in identifying">{{item.title}}</td>--> |
| | | <!--</tr>--> |
| | | <!--<tr>--> |
| | | <!--<td style="text-align:center;" v-for="(item, index) in identifying">--> |
| | | <!--<div class="identifyingclass" :style="{background: item.color}"></div>--> |
| | | <!--</td>--> |
| | | <!--<!–<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #e8ff37;display:inline-block"></div></td>–>--> |
| | | <!--<!–<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #99ff4e;display:inline-block"></div></td>–>--> |
| | | <!--</tr>--> |
| | | <!--</table>--> |
| | | <!--</a-col>--> |
| | | </a-row> |
| | | <a-row :gutter="24"> |
| | | <a-col :md="15" :sm="15"> |
| | | <a-checkbox-group :value="checkedList" :default-value="['lyl']" :options="efficiencyOptions" |
| | | @change="efficiencyOptionsOnChange"/> |
| | | <a-row :gutter="24" type="flex" align="middle"> |
| | | <a-col :md="24" :sm="24" :xs="24" |
| | | style="display: flex;justify-content: space-between;align-items: flex-start"> |
| | | <div> |
| | | <a-space style="margin-right: 20px"> |
| | | <a-button type="primary" @click="searchQuery" icon="search">查询</a-button> |
| | | <a-button type="primary" @click="searchReset" icon="reload">重置</a-button> |
| | | <a-button type="primary" @click="exportExcel" icon="download">导出</a-button> |
| | | <a-button type="primary" icon="printer" v-print="'#EfficiencyPO'" |
| | | v-has="'EfficiencyPO:print'">打印 |
| | | </a-button> |
| | | </a-space> |
| | | <a-checkbox-group :value="checkedList" :default-value="['lyl']" :options="efficiencyOptions" |
| | | @change="efficiencyOptionsOnChange"/> |
| | | </div> |
| | | <table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;"> |
| | | <tr> |
| | | <td v-for="(item, index) in identifying">{{item.title}}</td> |
| | | </tr> |
| | | <tr> |
| | | <td style="text-align:center;" v-for="(item, index) in identifying"> |
| | | <div class="identifyingclass" :style="{background: item.color}"></div> |
| | | </td> |
| | | </tr> |
| | | </table> |
| | | </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="searchReset" icon="reload">重置</a-button>--> |
| | | <!--<a-button type="primary" @click="exportExcel" icon="download">导出</a-button>--> |
| | | <!--<a-button type="primary" icon="printer" v-print="'#EfficiencyPO'" v-has="'EfficiencyPO:print'">打印</a-button>--> |
| | | <!--</a-space>--> |
| | | <!--</a-col>--> |
| | | <!--<a-col :md="18" :sm="18">--> |
| | | <!--<a-checkbox-group :value="checkedList" :default-value="['lyl']" :options="efficiencyOptions"--> |
| | | <!--@change="efficiencyOptionsOnChange"/>--> |
| | | <!--</a-col>--> |
| | | </a-row> |
| | | </a-form> |
| | | </div> |
| | | <div style="width: 530px;position: absolute;top: 0; right:1.5%;"> |
| | | <table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;"> |
| | | <tr> |
| | | <td v-for="(item, index) in identifying">{{item.title}}</td> |
| | | </tr> |
| | | <tr> |
| | | <td style="text-align:center;" v-for="(item, index) in identifying"> |
| | | <div class="identifyingclass" :style="{background: item.color}"></div> |
| | | </td> |
| | | <!--<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #e8ff37;display:inline-block"></div></td>--> |
| | | <!--<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #99ff4e;display:inline-block"></div></td>--> |
| | | </tr> |
| | | </table> |
| | | </div> |
| | | <!--<div style="width: 530px;position: absolute;top: 0; right:1.5%;">--> |
| | | <!--<table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;">--> |
| | | <!--<tr>--> |
| | | <!--<td v-for="(item, index) in identifying">{{item.title}}</td>--> |
| | | <!--</tr>--> |
| | | <!--<tr>--> |
| | | <!--<td style="text-align:center;" v-for="(item, index) in identifying">--> |
| | | <!--<div class="identifyingclass" :style="{background: item.color}"></div>--> |
| | | <!--</td>--> |
| | | <!--<!–<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #e8ff37;display:inline-block"></div></td>–>--> |
| | | <!--<!–<td style="text-align:center;"><div style="width: 55px;height: 15px;background-color: #99ff4e;display:inline-block"></div></td>–>--> |
| | | <!--</tr>--> |
| | | <!--</table>--> |
| | | <!--</div>--> |
| | | <a-spin :spinning="spinning"> |
| | | <div class="container" id="EfficiencyPO" style="margin-top: 20px;" > |
| | | <div class="table2"> |
| | |
| | | <tbody> |
| | | <tr class="mathData" v-for="(item, index) in dataList"> |
| | | <template v-if="item.level1!=='合计'&&item.level1!=='平均值'"> |
| | | <td class="tdgu kaitou wenzi" :rowspan="item.level1span" :class="{hidden: item.level1dis,noExl:item.level1dis}" v-show="!item.level1dis">{{item.level1}}</td> |
| | | <td class="tdgu1 kaitou wenzi" :rowspan="item.level2span" :class="{hidden: item.level2dis,noExl:item.level2dis}" v-show="!item.level2dis">{{item.level2}}</td> |
| | | <td class="tdgu2 kaitou wenzi" :rowspan="item.level3span" :class="{hidden: item.level3dis,noExl:item.level3dis}" v-show="!item.level3dis">{{item.level3}}</td> |
| | | <td class="tdgu kaitou" :rowspan="item.level1span" :class="{hidden: item.level1dis,noExl:item.level1dis}" v-show="!item.level1dis"> |
| | | <div class="wenzi"> |
| | | {{item.level1}} |
| | | </div> |
| | | </td> |
| | | <td class="tdgu1 kaitou" :rowspan="item.level2span" :class="{hidden: item.level2dis,noExl:item.level2dis}" v-show="!item.level2dis"> |
| | | <div class="wenzi"> |
| | | {{item.level2}} |
| | | </div> |
| | | </td> |
| | | <td class="tdgu2 kaitou" :rowspan="item.level3span" :class="{hidden: item.level3dis,noExl:item.level3dis}" v-show="!item.level3dis"> |
| | | <div class="wenzi"> |
| | | {{item.level3}} |
| | | </div> |
| | | </td> |
| | | <td class="tdgu3 kaitou">{{item.equipmentId}}</td> |
| | | <td style="min-width: 162px; max-width: 162px;width: 162px;" class="tdgu4 kaitou">{{item.equipmentName}}</td> |
| | | <td class="tdgu5 kaitou">{{item.equipmentType}}</td> |
| | |
| | | import $ from 'jquery' |
| | | import '@/components/table2excel/table2excel' |
| | | import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api' |
| | | import api from '@/api/mdc' |
| | | |
| | | export default { |
| | | name: 'EfficiencyPOList', |
| | | components: {}, |
| | |
| | | queryParamEquip:{}, |
| | | queryParamPeople:{}, |
| | | identifying: [], |
| | | driveTypeList:[], |
| | | efficiencyOptions: [ |
| | | { label: '开动率', value: 'lyl' }, |
| | | { label: '开机率', value: 'kjl' }, |
| | |
| | | this.queryParam.typeTree = "1" |
| | | this.loadData() |
| | | this.queryGroup() |
| | | this.getDriveTypeByApi() |
| | | }, |
| | | watch: { |
| | | Type(valmath){ |
| | |
| | | */ |
| | | getFormattedTime(seconds) { |
| | | if (seconds) { |
| | | return parseFloat((seconds / 3600).toFixed(2)) + '小时' |
| | | return parseFloat((seconds / 3600).toFixed(2)) |
| | | } else { |
| | | return '0' |
| | | } |
| | |
| | | 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.dates = [moment().subtract('days', 8), moment().subtract('days', 1)] |
| | | this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD') |
| | | this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD') |
| | | // this.ipagination.current = 1 |
| | | this.loadData(); |
| | | // this.queryParam = {} |
| | |
| | | // console.log(res.result) |
| | | this.tableHeads = res.result.dates |
| | | this.dataList = res.result.mdcEfficiencyList |
| | | if (res.result.mdcEfficiencyList && !res.result.mdcEfficiencyList.length) { |
| | | this.$notification.info({ |
| | | message: '消息', |
| | | description: '暂无该设备类型数据' |
| | | }) |
| | | } |
| | | this.checkSameData(this.dataList) |
| | | this.checkSameData1(this.dataList) |
| | | this.checkSameData2(this.dataList) |
| | |
| | | }).finally(() => { |
| | | this.loading = false |
| | | }) |
| | | } |
| | | }, |
| | | |
| | | /** |
| | | * 调用接口获取控制系统类型 |
| | | */ |
| | | getDriveTypeByApi(){ |
| | | api.getDriveTypeApi().then((res)=>{ |
| | | this.driveTypeList=res.result.map(item=>item.value) |
| | | }) |
| | | }, |
| | | |
| | | /** |
| | | * 联想输入框筛选功能 |
| | | * @param input 输入的内容 |
| | | * @param option 配置 |
| | | * @returns {boolean} 判断是否筛选 |
| | | */ |
| | | filterOption(input, option) { |
| | | return ( |
| | | option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0 |
| | | ); |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | |
| | | height: 100%; |
| | | overflow: auto; |
| | | } |
| | | |
| | | .table2 thead tr th:first-child, |
| | | .table tbody tr .tdgu{ |
| | | position: sticky; |
| | | left: 0; |
| | | z-index: 1; |
| | | } |
| | | |
| | | .table tbody tr .wenzi{ |
| | | /*writing-mode: vertical-lr;*/ |
| | | /*text-orientation: upright;*/ |
| | |
| | | writing-mode: vertical-lr; |
| | | letter-spacing: 2px; |
| | | } |
| | | |
| | | .table tbody tr .kaitou{ |
| | | z-index: 1; |
| | | background-color: white; |
| | | } |
| | | |
| | | .table tbody tr .tdgu1{ |
| | | position: sticky; |
| | | left: 50px; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .table tbody tr .tdgu2{ |
| | | position: sticky; |
| | | left: 100px; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .table tbody tr .tdgu3{ |
| | | position: sticky; |
| | | left: 150px; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .table tbody tr .tdgu4{ |
| | | position: sticky; |
| | | left: 250px; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .table tbody tr .tdgu5{ |
| | | position: sticky; |
| | | left: 412px; |
| | |
| | | top:0; |
| | | z-index: 3; |
| | | } |
| | | |
| | | .table2 thead .gudingth th{ |
| | | position: sticky; |
| | | top: 32px; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .table2 thead .equipname .name{ |
| | | z-index: 3; |
| | | } |
| | | |
| | | .table2 thead .equipname .dong1{ |
| | | z-index: 4; |
| | | left: 0; |
| | | /*border: 1px solid #000;*/ |
| | | } |
| | | |
| | | .table2 thead .equipname .dong2{ |
| | | z-index: 5; |
| | | left: 50px; |
| | | } |
| | | |
| | | |
| | | .table2 thead .equipname .dong3{ |
| | | z-index: 5; |
| | | left: 100px; |
| | | } |
| | | |
| | | .table2 thead .equipname .dong4{ |
| | | z-index: 5; |
| | | left: 150px; |
| | | } |
| | | |
| | | .table2 thead .equipname .dong5{ |
| | | z-index: 5; |
| | | left: 250px; |
| | | } |
| | | |
| | | .table2 thead .equipname .dong6{ |
| | | z-index: 5; |
| | | left: 412px; |
| | | } |
| | | |
| | | |
| | | #EfficiencyPO{ |
| | | overflow: hidden; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px){ |
| | | #EfficiencyPO{ |
| | | height: 687px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px){ |
| | | #EfficiencyPO{ |
| | | height: 687px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px){ |
| | | #EfficiencyPO{ |
| | | height: 540px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px){ |
| | | #EfficiencyPO{ |
| | | height: 440px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | @media screen and (max-width: 1280px){ |
| | | #EfficiencyPO{ |
| | | height: 440px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |
| | | .identifyingclass { |
| | | width: 55px; |
| | | height: 15px; |
| | | display: inline-block |
| | | } |
| | | |
| | | .dataContent { |
| | | white-space: nowrap; |
| | | /*margin: 0;*/ |
| | | border: none; |
| | | border-collapse: separate; |
| | | border-spacing: 0; |
| | | /*table-layout: fixed;*/ |
| | |
| | | /*overflow: hidden;*/ |
| | | /*overflow-y: auto;*/ |
| | | text-align: center; |
| | | } |
| | | |
| | | .dataContent .fixed th { |
| | | width: 50px; |
| | | } |
| | | |
| | | .dataContent .thead 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;*/ |
| | | } |
| | | |
| | | </style> |