| | |
| | | <template> |
| | | <div class="efficiency_list" style="width: 100%"> |
| | | <div :bordered="false"> |
| | | <!-- 查询区域 --> |
| | | <div> |
| | | <div class="table-page-search-wrapper"> |
| | | <a-form layout="inline" @keyup.enter.native="searchQuery"> |
| | | <a-row :gutter="24"> |
| | | <a-col :md="5" :sm="5"> |
| | | <a-form-item label="设备类型"> |
| | | <a-select |
| | | :value="queryParams.equipmentType" |
| | | mode="multiple" |
| | | placeholder="请选择设备类型" |
| | | allow-clear |
| | | :maxTagCount="1" |
| | | @change="selectChange($event,'equipmentType')" |
| | | > |
| | | <a-select-option v-for="(item,index) in equipmentTypeList" :value="item.value" :key="index"> |
| | | {{item.label}} |
| | | </a-select-option> |
| | | </a-select> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="6" :sm="6"> |
| | | <a-form-item label="驱动类型"> |
| | | <a-select |
| | | :value="queryParams.driveType" |
| | | mode="multiple" |
| | | placeholder="请选择驱动类型" |
| | | allow-clear |
| | | :maxTagCount="1" |
| | | @change="selectChange($event,'driveType')" |
| | | > |
| | | <a-select-option v-for="(item,index) in driveTypeList" :value="item.value" :key="index"> |
| | | {{item.label}} |
| | | </a-select-option> |
| | | </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" :allowClear="false"/> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="5" :sm="5" :xs="5"> |
| | | <a-form-item label="设备级别"> |
| | | <a-select |
| | | :value="queryParams.deviceLevel" |
| | | mode="multiple" |
| | | placeholder="请选择设备级别" |
| | | allow-clear |
| | | :maxTagCount="1" |
| | | @change="selectChange($event,'deviceLevel')" |
| | | > |
| | | <a-select-option v-for="(item,index) in device_level_list" :value="item.value" :key="index"> |
| | | {{item.label}} |
| | | </a-select-option> |
| | | </a-select> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="2" :sm="2"> |
| | | <a |
| | | @click="toggleSearchStatus=!toggleSearchStatus" |
| | | @selectstart="$event.preventDefault()" |
| | | style="display: inline-block;height: 32px;line-height: 32px" |
| | | > |
| | | {{ toggleSearchStatus ? '收起' : '展开' }} |
| | | <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/> |
| | | </a> |
| | | </a-col> |
| | | </a-row> |
| | | <!-- 查询区域 --> |
| | | <div class="table-page-search-wrapper"> |
| | | <a-form layout="inline" @keyup.enter.native="searchQuery"> |
| | | <a-row :gutter="24"> |
| | | <a-col :md="5" :sm="5"> |
| | | <a-form-item label="设备类型"> |
| | | <a-select |
| | | :value="queryParams.equipmentType" |
| | | mode="multiple" |
| | | placeholder="请选择设备类型" |
| | | allow-clear |
| | | :maxTagCount="1" |
| | | @change="selectChange($event,'equipmentType')" |
| | | > |
| | | <a-select-option v-for="(item,index) in equipmentTypeList" :value="item.value" :key="index"> |
| | | {{item.label}} |
| | | </a-select-option> |
| | | </a-select> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="6" :sm="6"> |
| | | <a-form-item label="驱动类型"> |
| | | <a-select |
| | | :value="queryParams.driveType" |
| | | mode="multiple" |
| | | placeholder="请选择驱动类型" |
| | | allow-clear |
| | | :maxTagCount="1" |
| | | @change="selectChange($event,'driveType')" |
| | | > |
| | | <a-select-option v-for="(item,index) in driveTypeList" :value="item.value" :key="index"> |
| | | {{item.label}} |
| | | </a-select-option> |
| | | </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" :allowClear="false"/> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="5" :sm="5" :xs="5"> |
| | | <a-form-item label="设备级别"> |
| | | <a-select |
| | | :value="queryParams.deviceLevel" |
| | | mode="multiple" |
| | | placeholder="请选择设备级别" |
| | | allow-clear |
| | | :maxTagCount="1" |
| | | @change="selectChange($event,'deviceLevel')" |
| | | > |
| | | <a-select-option v-for="(item,index) in device_level_list" :value="item.value" :key="index"> |
| | | {{item.label}} |
| | | </a-select-option> |
| | | </a-select> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="2" :sm="2"> |
| | | <a |
| | | @click="toggleSearchStatus=!toggleSearchStatus" |
| | | @selectstart="$event.preventDefault()" |
| | | style="display: inline-block;height: 32px;line-height: 32px" |
| | | > |
| | | {{ toggleSearchStatus ? '收起' : '展开' }} |
| | | <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/> |
| | | </a> |
| | | </a-col> |
| | | </a-row> |
| | | |
| | | <a-row :gutter="24" v-if="toggleSearchStatus"> |
| | | <a-col :md="5" :sm="5" :xs="5"> |
| | | <a-form-item label="重要程度"> |
| | | <a-select |
| | | v-model="queryParam.deviceImportanceLevel" |
| | | placeholder="请选择设备重要程度" |
| | | allow-clear |
| | | > |
| | | <a-select-option v-for="(item,index) in device_importance_level_list" :value="item.value" |
| | | :key="index"> |
| | | {{item.label}} |
| | | </a-select-option> |
| | | </a-select> |
| | | </a-form-item> |
| | | </a-col> |
| | | </a-row> |
| | | <a-row :gutter="24" v-if="toggleSearchStatus"> |
| | | <a-col :md="5" :sm="5" :xs="5"> |
| | | <a-form-item label="重要程度"> |
| | | <a-select |
| | | v-model="queryParam.deviceImportanceLevel" |
| | | placeholder="请选择设备重要程度" |
| | | allow-clear |
| | | > |
| | | <a-select-option v-for="(item,index) in device_importance_level_list" :value="item.value" |
| | | :key="index"> |
| | | {{item.label}} |
| | | </a-select-option> |
| | | </a-select> |
| | | </a-form-item> |
| | | </a-col> |
| | | </a-row> |
| | | |
| | | <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="'#Efficiency'" |
| | | v-has="'efficiency: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" |
| | | style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap">{{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-row> |
| | | </a-form> |
| | | <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" @click="exportOneYearExcel('设备TEEP')" icon="download">大数据导出</a-button>--> |
| | | <a-button type="primary" @click="handleShowFeedbackModal" icon="plus" v-has="'efficiency:feedback'">异常反馈</a-button> |
| | | <a-button type="primary" icon="printer" v-print="'#Efficiency'" |
| | | v-has="'efficiency:print'">打印 |
| | | </a-button> |
| | | </a-space> |
| | | |
| | | </div> |
| | | <table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;"> |
| | | <tr> |
| | | <td v-for="(item, index) in identifying" |
| | | style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap">{{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-row> |
| | | |
| | | <a-row :gutter="24"> |
| | | <a-col> |
| | | <a-checkbox-group :value="checkedList" :default-value="['lyl']" :options="efficiencyOptions" |
| | | @change="efficiencyOptionsOnChange"/> |
| | | </a-col> |
| | | </a-row> |
| | | </a-form> |
| | | </div> |
| | | |
| | | <a-spin :spinning="spinning"> |
| | | <div id="Efficiency" class="container" style="margin-top: 20px;"> |
| | | <div class="table2"> |
| | | <table class="dataContent table" border="1" cellspacing="0" cellpadding="0" style="white-space: nowrap" |
| | | v-if="dataList.length>0"> |
| | | <thead> |
| | | <tr class="thead fixed equipname"> |
| | | <th class="thgu dong1 name" rowspan="2" |
| | | style="min-width: 50px; max-width: 50px;width: 50px;height: 66px">公司 |
| | | </th> |
| | | <th class="thgu dong2 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;">车间</th> |
| | | <th class="thgu dong3 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;">工段</th> |
| | | <th class="thgu dong4 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">设备编号 |
| | | </th> |
| | | <th class="thgu dong5 name" rowspan="2" style="min-width: 162px; max-width: 162px;width: 162px;">设备名称 |
| | | </th> |
| | | <th class="thgu dong6 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">设备类型 |
| | | </th> |
| | | <th class="thgu dong7 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">设备型号 |
| | | </th> |
| | | <!--<th rowspan="2">组别</th>--> |
| | | <template v-for="(tableHead, index) in tableHeads"> |
| | | <th class="timeth" :colspan="checkedList.length">{{tableHead}}</th> |
| | | </template> |
| | | </tr> |
| | | <tr class="thead notfixed gudingth"> |
| | | <template v-for="(tableHead, index) in tableHeads"> |
| | | <th v-if="checkedList.indexOf('lyl') > -1">TEEP(%)</th> |
| | | <th v-if="checkedList.indexOf('kjl') > -1">开机率(%)</th> |
| | | <th v-if="checkedList.indexOf('kjsj') > -1">开机时间(小时)</th> |
| | | <th v-if="checkedList.indexOf('jgsj') > -1">加工时间(小时)</th> |
| | | <th v-if="checkedList.indexOf('djsj') > -1">待机时间(小时)</th> |
| | | <th v-if="checkedList.indexOf('gjsj') > -1">关机时间(小时)</th> |
| | | </template> |
| | | |
| | | </tr> |
| | | </thead> |
| | | |
| | | <tbody> |
| | | <tr class="mathData" v-for="(item, index) in dataList"> |
| | | <template v-if="item.level1!=='合计'&&item.level1!=='平均值'"> |
| | | <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 wenzi" :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 class="tdgu4 kaitou" style="min-width: 162px; max-width: 162px;width: 162px;"> |
| | | {{item.equipmentName}} |
| | | </td> |
| | | <td class="tdgu5 kaitou">{{item.equipmentType}}</td> |
| | | <td class="tdgu6 kaitou">{{item.equipmentModel}}</td> |
| | | </template> |
| | | |
| | | <!--合计与平均值区域--> |
| | | <template v-else> |
| | | <td colspan="7" class="tdgu kaitou">{{item.level1}}</td> |
| | | </template> |
| | | |
| | | <template v-for="(tableHead, index) in item.dataList"> |
| | | <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('lyl') > -1"> |
| | | {{tableHead.utilizationRate | numFilter}} |
| | | </td> |
| | | <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('kjl') > -1"> |
| | | {{tableHead.openRate | numFilter}} |
| | | </td> |
| | | <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('kjsj') > -1"> |
| | | {{tableHead.openLong | getFormattedTime}} |
| | | </td> |
| | | <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('jgsj') > -1"> |
| | | {{tableHead.processLong | getFormattedTime}} |
| | | </td> |
| | | <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('djsj') > -1"> |
| | | {{tableHead.waitLong | getFormattedTime}} |
| | | </td> |
| | | <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('gjsj') > -1"> |
| | | {{tableHead.closeLong | getFormattedTime}} |
| | | </td> |
| | | </template> |
| | | </tr> |
| | | </tbody> |
| | | </table> |
| | | </div> |
| | | </div> |
| | | </a-spin> |
| | | |
| | | <a-spin :spinning="spinning"> |
| | | <div id="Efficiency" class="container" style="margin-top: 20px;"> |
| | | <div class="table2"> |
| | | <table class="dataContent table" border="1" cellspacing="0" cellpadding="0" style="white-space: nowrap" |
| | | v-if="dataList.length>0"> |
| | | <thead> |
| | | <tr class="thead fixed equipname"> |
| | | <th class="thgu dong1 name" rowspan="2" |
| | | style="min-width: 50px; max-width: 50px;width: 50px;height: 66px">公司 |
| | | </th> |
| | | <th class="thgu dong2 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;">车间</th> |
| | | <th class="thgu dong3 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;">工段</th> |
| | | <th class="thgu dong4 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">设备编号 |
| | | </th> |
| | | <th class="thgu dong5 name" rowspan="2" style="min-width: 162px; max-width: 162px;width: 162px;">设备名称 |
| | | </th> |
| | | <th class="thgu dong6 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">设备类型 |
| | | </th> |
| | | <th class="thgu dong7 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">设备型号 |
| | | </th> |
| | | <!--<th rowspan="2">组别</th>--> |
| | | <template v-for="(tableHead, index) in tableHeads"> |
| | | <th class="timeth" :colspan="checkedList.length">{{tableHead}}</th> |
| | | </template> |
| | | </tr> |
| | | <tr class="thead notfixed gudingth"> |
| | | <template v-for="(tableHead, index) in tableHeads"> |
| | | <th v-if="checkedList.indexOf('lyl') > -1">TEEP(%)</th> |
| | | <th v-if="checkedList.indexOf('kjl') > -1">开机率(%)</th> |
| | | <th v-if="checkedList.indexOf('kjsj') > -1">开机时间(小时)</th> |
| | | <th v-if="checkedList.indexOf('jgsj') > -1">加工时间(小时)</th> |
| | | <th v-if="checkedList.indexOf('djsj') > -1">待机时间(小时)</th> |
| | | <th v-if="checkedList.indexOf('gjsj') > -1">关机时间(小时)</th> |
| | | </template> |
| | | |
| | | </tr> |
| | | </thead> |
| | | <tbody> |
| | | |
| | | <tr class="mathData" v-for="(item, index) in dataList"> |
| | | <template v-if="item.level1!=='合计'&&item.level1!=='平均值'"> |
| | | <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 wenzi" :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 class="tdgu4 kaitou" style="min-width: 162px; max-width: 162px;width: 162px;"> |
| | | {{item.equipmentName}} |
| | | </td> |
| | | <td class="tdgu5 kaitou">{{item.equipmentType}}</td> |
| | | <td class="tdgu6 kaitou">{{item.equipmentModel}}</td> |
| | | </template> |
| | | |
| | | <!--合计与平均值区域--> |
| | | <template v-else> |
| | | <td colspan="7" class="tdgu kaitou">{{item.level1}}</td> |
| | | </template> |
| | | |
| | | <template v-for="(tableHead, index) in item.dataList"> |
| | | <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('lyl') > -1"> |
| | | {{tableHead.utilizationRate | numFilter}} |
| | | </td> |
| | | <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('kjl') > -1"> |
| | | {{tableHead.openRate | numFilter}} |
| | | </td> |
| | | <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('kjsj') > -1"> |
| | | {{tableHead.openLong | getFormattedTime}} |
| | | </td> |
| | | <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('jgsj') > -1"> |
| | | {{tableHead.processLong | getFormattedTime}} |
| | | </td> |
| | | <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('djsj') > -1"> |
| | | {{tableHead.waitLong | getFormattedTime}} |
| | | </td> |
| | | <td :style="{background:tableHead.color }" v-if="checkedList.indexOf('gjsj') > -1"> |
| | | {{tableHead.closeLong | getFormattedTime}} |
| | | </td> |
| | | </template> |
| | | |
| | | </tr> |
| | | |
| | | </tbody> |
| | | </table> |
| | | |
| | | </div> |
| | | </div> |
| | | </a-spin> |
| | | </div> |
| | | <mdc-message-approval-modal ref="modalForm" :visible="modalVisible" @closeModal="modalVisible = false"/> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import moment from 'moment' |
| | | import { putAction, getAction } from '@/api/manage' |
| | | import { getAction, downFile } from '@/api/manage' |
| | | import $ from 'jquery' |
| | | import '@/components/table2excel/table2excel' |
| | | import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api' |
| | | import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api' |
| | | import api from '@/api/mdc' |
| | | import MdcMessageApprovalModal from '../MdcMessageApproval/MdcMessageApprovalModal' |
| | | |
| | | export default { |
| | | name: 'EfficiencyList', |
| | | components: {}, |
| | | components: { MdcMessageApprovalModal }, |
| | | data() { |
| | | return { |
| | | typeTree: '', |
| | | typeParent: 1, |
| | | typeEquipment: 1, |
| | | TreeIDOne: 1, |
| | | TreeIDTwo: 2, |
| | | deviceTypeDict: '', |
| | | dates: [], |
| | | equipmentTypeList: [], |
| | | driveTypeList: [], |
| | |
| | | url: { |
| | | list: '/mdc/efficiencyReport/efficiencyList', |
| | | listByType: '/mdc/MdcUtilizationRate/getByType', |
| | | queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType' |
| | | queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType', |
| | | exportOneYearXlsUrl: '' |
| | | }, |
| | | tableHeads: [], |
| | | distinguishColorList: [], |
| | | utilizationRateRowAverage: '', |
| | | openRateRowAverage: '', |
| | | openLongRowAverage: '', |
| | |
| | | waitLongRowAverage: '', |
| | | closeLongRowAverage: '', |
| | | spinning: false, |
| | | toggleSearchStatus: false |
| | | isLazyRequest: '',// 是否开启懒加载 |
| | | requestAllDataSize: 8,// 总共请求的列表项数目(默认值为默认日期的差值+1) |
| | | everyRequestDataSize: 15,// 每次请求的列表项数目 |
| | | toggleSearchStatus: false, |
| | | modalVisible: false// 异常反馈弹窗是否弹出 |
| | | } |
| | | }, |
| | | props: { nodeTree: '', Type: '', nodePeople: '' }, |
| | | created() { |
| | | this.showIdentifying() |
| | | 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.queryParam.typeTree = '1' |
| | | this.loadData() |
| | | this.queryGroup() |
| | | this.getDriveTypeByApi() |
| | | this.initDictData('device_level') |
| | |
| | | this.initDictData('device_importance_level') |
| | | }, |
| | | mounted() { |
| | | this.tableScroll = document.querySelector('.table2') |
| | | this.searchReset() |
| | | window.addEventListener('resize', this.handleWindowResize) |
| | | this.handleWindowResize() |
| | | }, |
| | | beforeDestroy() { |
| | | this.tableScroll.removeEventListener('scroll', this.tableScrollX) |
| | | window.removeEventListener('resize', this.handleWindowResize) |
| | | }, |
| | | watch: { |
| | | Type(valmath) { |
| | |
| | | }, |
| | | // 合并 |
| | | combineCell() { |
| | | console.log(this.dataList) |
| | | let list = this.dataList |
| | | for (let field in list[0]) { |
| | | var k = 0 |
| | |
| | | //Can not slect days before today and today |
| | | return current && current > moment().subtract('days', 1) |
| | | }, |
| | | initDeviceType(deviceList) { |
| | | let dictCode = 'mdc_equipmentType' |
| | | let items = [] |
| | | items = getDictItemsFromCache(dictCode) |
| | | if (deviceList && items.length > 0) { |
| | | for (let a = 0; a < deviceList.length; a++) { |
| | | if (items && items.length > 0) { |
| | | for (let i = 0; i < items.length; i++) { |
| | | if (deviceList[a].equipmentType == items[i].value) { |
| | | deviceList[a].equipmentType = items[i].title |
| | | } |
| | | } |
| | | } else { |
| | | ajaxGetDictItems(dictCode, null).then((res) => { |
| | | if (res.success) { |
| | | let items = res.result |
| | | for (let i = 0; i < items.length; i++) { |
| | | if (deviceList[a].equipmentType == items[i].value) { |
| | | deviceList[a].equipmentType = items[i].title |
| | | } |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | exportExcel() { |
| | | $('#Efficiency').table2excel({ |
| | | exclude: '.noExl', |
| | |
| | | exclude_inputs: false |
| | | }) |
| | | }, |
| | | exportOneYearExcel(fileName) { |
| | | // let param = this.getQueryParams() |
| | | // console.log('导出参数', param) |
| | | downFile(this.url.exportOneYearXlsUrl) |
| | | .then((data) => { |
| | | if (!data) { |
| | | this.$notification.warning({ |
| | | message: '消息', |
| | | description: '文件下载失败' |
| | | }) |
| | | return |
| | | } |
| | | if (typeof window.navigator.msSaveBlob !== 'undefined') { |
| | | window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls') |
| | | } else { |
| | | let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' })) |
| | | let link = document.createElement('a') |
| | | link.style.display = 'none' |
| | | link.href = url |
| | | link.setAttribute('download', fileName + '.xls') |
| | | document.body.appendChild(link) |
| | | link.click() |
| | | document.body.removeChild(link) //下载完成移除元素 |
| | | window.URL.revokeObjectURL(url) //释放掉blob对象 |
| | | } |
| | | }) |
| | | }, |
| | | showIdentifying() { |
| | | getAction(this.url.listByType, { type: 'lyl' }).then(res => { |
| | | if (res.success) { |
| | |
| | | dateParamChange(v1, v2) { |
| | | this.queryParam.startTime = v2[0] |
| | | this.queryParam.endTime = v2[1] |
| | | // 点击时间选择器的清空按钮时会触发此判断(点击重置按钮不会触发),实现重置列表功能,切实改变列表显示效果 |
| | | if (!this.queryParam.startTime && !this.queryParam.endTime) this.searchReset() |
| | | this.dates = [v1[0], v1[1]] |
| | | }, |
| | | efficiencyOptionsOnChange(checkedList) { |
| | | // let index = checkedList.indexOf('lyl') |
| | | // if (index < 0) { |
| | | // // this.$message.warn('不能取消查询开动率') |
| | | // this.$notification.warning({ |
| | | // message: '消息', |
| | | // description: '不能取消查询开动率' |
| | | // }) |
| | | // |
| | | // return false |
| | | // } |
| | | this.checkedList = checkedList |
| | | }, |
| | | searchQuery() { |
| | | // 因触底刷新会修改参数时间值,故在此用时间选择器的时间值对参数时间值再次赋值,若不这样做则参数时间值则会与时间选择器上的时间值不一致 |
| | | this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD') |
| | | this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD') |
| | | |
| | | if (this.queryParam.typeTree == '1') { |
| | | this.queryParam.parentId = this.queryParamEquip.parentId |
| | | this.queryParam.equipmentId = this.queryParamEquip.equipmentId |
| | |
| | | this.queryParam.parentId = this.queryParamPeople.parentId |
| | | this.queryParam.equipmentId = '' |
| | | } |
| | | this.requestAllDataSize = moment.duration(moment(this.queryParam.endTime) - moment(this.queryParam.startTime), 'millisecond').asDays() + 1 |
| | | |
| | | Object.keys(this.queryParams).forEach(item => { |
| | | if (Array.isArray(this.queryParams[item])) { |
| | | this.queryParam[item] = this.queryParams[item].join() |
| | |
| | | this.queryParam.parentId = this.typeParent |
| | | this.queryParam.equipmentId = this.typeEquipment |
| | | this.dates = [moment().subtract('days', 8), moment().subtract('days', 1)] |
| | | this.requestAllDataSize = this.dates[1].diff(this.dates[0], 'days') + 1 |
| | | this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD') |
| | | this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD') |
| | | this.queryParams = { |
| | |
| | | this.tableHeads = [] |
| | | this.dataList = [] |
| | | this.spinning = true |
| | | console.log('requestAllDataSize', this.requestAllDataSize) |
| | | console.log('everyRequestDataSize', this.everyRequestDataSize) |
| | | // 若日期选择器设置的查询请求数量超过15条则开启懒加载 |
| | | if (this.requestAllDataSize > this.everyRequestDataSize) { |
| | | // 开启懒加载后将结束日期设置为开始日期之后的14天,即先查询15天内的数据 |
| | | this.queryParam.endTime = moment(this.queryParam.startTime).add(this.everyRequestDataSize - 1, 'days').format('YYYYMMDD') |
| | | this.isLazyRequest = true |
| | | this.tableScroll.removeEventListener('scroll', this.tableScrollX) // 为避免滚动条有滚动距离后后点击查询按钮触发滚动事件,因此在触发事件前移除事件 |
| | | } |
| | | |
| | | getAction(this.url.list, this.queryParam).then(res => { |
| | | if (res.success) { |
| | | this.tableHeads = res.result.dates |
| | | this.dataList = res.result.mdcEfficiencyList |
| | | if (res.result.mdcEfficiencyList && !res.result.mdcEfficiencyList.length) { |
| | | this.$notification.info({ |
| | | message: '消息', |
| | | description: '暂无该类型数据' |
| | | }) |
| | | return |
| | | } |
| | | this.distinguishColorList = res.result.utilizationRateList |
| | | |
| | | this.tableHeads = res.result.dates |
| | | this.dataList = res.result.mdcEfficiencyList |
| | | console.log('dataList', this.dataList) |
| | | this.checkSameData(this.dataList) |
| | | this.checkSameData1(this.dataList) |
| | | this.checkSameData2(this.dataList) |
| | | this.combineCell() |
| | | // this.columns.push(...dataColumns) |
| | | // this.initDeviceType(this.dataList) |
| | | this.tableScroll.addEventListener('scroll', this.tableScrollX) |
| | | } |
| | | }).finally(() => { |
| | | this.spinning = false |
| | | }) |
| | | }, |
| | | |
| | | // 控制异常反馈弹窗弹出 |
| | | handleShowFeedbackModal() { |
| | | this.$refs.modalForm.formParams = {} |
| | | this.modalVisible = true |
| | | }, |
| | | |
| | | // 滚动条触底刷新表格数据 |
| | | tableScrollX() { |
| | | // 当滚动条触底且懒加载开启时触发滚动条触底刷新 |
| | | if (Math.ceil(this.tableScroll.scrollLeft + this.tableScroll.clientWidth) + 1 >= this.tableScroll.scrollWidth && this.isLazyRequest) { |
| | | this.spinning = true |
| | | this.queryParam.startTime = moment(this.queryParam.endTime).add(1, 'days').format('YYYYMMDD') |
| | | // 判断设置懒加载后的结束时间是否超过时间选择器中设置的结束时间 |
| | | if (moment(this.queryParam.endTime).add(this.everyRequestDataSize - 1, 'days').format('YYYYMMDD') - moment(this.dates[1]).format('YYYYMMDD') < 0) { |
| | | //再次查询后15天内的数据 |
| | | this.queryParam.endTime = moment(this.queryParam.endTime).add(this.everyRequestDataSize, 'days').format('YYYYMMDD') |
| | | } else { |
| | | // 如果不小于时间选择器中设置的时间则设置请求结束日期为时间选择器中设置的结束时间并且关闭懒加载(意味着最后一次触底刷新) |
| | | this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD') |
| | | this.isLazyRequest = false |
| | | } |
| | | getAction(this.url.list, this.queryParam) |
| | | .then(res => { |
| | | if (res.success) { |
| | | this.tableHeads = [...this.tableHeads.slice(0, -2), ...res.result.dates] |
| | | console.log('dataList', this.dataList) |
| | | this.dataList.forEach(item1 => { |
| | | res.result.mdcEfficiencyList.forEach(item2 => { |
| | | if (item1.equipmentId === item2.equipmentId) { |
| | | item1.dataList = [...item1.dataList.slice(0, -2), ...item2.dataList] |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | }) |
| | | .finally(() => { |
| | | this.spinning = false |
| | | }) |
| | | } |
| | | }, |
| | | |
| | | // 获取设备类型列表 |
| | | queryGroup() { |
| | | getAction(this.url.queryEquipmentType).then(res => { |
| | | if (res.success) { |
| | |
| | | }) |
| | | }, |
| | | |
| | | /** |
| | | * 调用接口获取控制系统类型 |
| | | */ |
| | | // 获取控制系统类型列表 |
| | | getDriveTypeByApi() { |
| | | api.getDriveTypeApi().then((res) => { |
| | | if (res.success) this.driveTypeList = res.result |
| | | }) |
| | | }, |
| | | |
| | | /** |
| | | * 分辨率改变时同时改变表格高度已保证首页一进入不拖动垂直滚动条时即可拖动表格水平滚动条 |
| | | */ |
| | | // 分辨率改变时同时改变表格高度已保证首页一进入不拖动垂直滚动条时即可拖动表格水平滚动条 |
| | | handleWindowResize() { |
| | | const tableContainer = document.getElementById('Efficiency') // 表格容器 |
| | | const clientHeight = document.documentElement.clientHeight || document.body.clientHeight // 浏览器可视区域高度 |
| | |
| | | |
| | | .dataContent { |
| | | white-space: nowrap; |
| | | /*margin: 0;*/ |
| | | /*border: none;*/ |
| | | border-collapse: separate; |
| | | border-spacing: 0; |
| | | /*table-layout: fixed;*/ |
| | | border: 1px solid #ccc; |
| | | /*border: 1px solid #ccc;*/ |
| | | width: 100%; |
| | | /*height: 100%;*/ |
| | | /*overflow: hidden;*/ |
| | | /*overflow-y: auto;*/ |
| | | text-align: center; |
| | | } |
| | | |