From a751e547d67c4f8e2c6fddf958c1559f792515bd Mon Sep 17 00:00:00 2001 From: lyh <925863403@qq.com> Date: 星期五, 27 六月 2025 16:11:50 +0800 Subject: [PATCH] 添加工作流 --- src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue | 791 ++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 484 insertions(+), 307 deletions(-) diff --git a/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue b/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue index 7f2f038..71f489c 100644 --- a/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue +++ b/src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue @@ -1,194 +1,275 @@ <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="4" :sm="4"> - <a-form-item label="璁惧绫诲瀷"> - <a-select placeholder="璇烽�夋嫨璁惧绫诲瀷" :triggerChange="true" v-model="queryParam.equipmentType" - :allowClear="true"> - <a-select-option v-for='item in selectList' :key='item.id' :value='item.equipmentTypeName'> - {{item.equipmentTypeName}} - </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"/> - </a-form-item> - </a-col> - <a-col :md="14" :sm="14" style="display: flex;align-items: flex-start;-webkit-align-items: flex-start;justify-content: space-between;"> - <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> - <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-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> + <!-- 鏌ヨ鍖哄煙 --> + <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" + @calendarChange="handleCalendarChange" @openChange="handleCalendarOpenChange" + 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-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;">鍏徃</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 rowspan="2">缁勫埆</th>--> - <template v-for="(tableHead, index) in tableHeads"> - <th class="timeth" :colspan="checkedList.length">{{tableHead}}</th> - </template> + <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" @click="exportLongTimeExcel('璁惧TEEP')" icon="download" + :loading="longTimeExportButtonLoading"> + 澶ф暟鎹鍑� + </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 class="thead notfixed gudingth"> - <template v-for="(tableHead, index) in tableHeads"> - <th>鍒╃敤鐜�(%)</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> + <td style="text-align:center;" v-for="(item, index) in identifying"> + <div class="identifyingclass" :style="{background: item.color}"></div> + </td> </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> - </template> - - <!--鍚堣涓庡钩鍧囧�煎尯鍩�--> - <template v-else> - <td colspan="6" class="tdgu kaitou">{{item.level1}}</td> - </template> - - <template v-for="(tableHead, index) in item.dataList"> - <td :style="{background:tableHead.color }">{{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> + </a-col> + </a-row> - </div> - </div> - </a-spin> + <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> + + <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: [], - selectList: [], + equipmentTypeList: [], + driveTypeList: [], + device_level_list: [], + device_importance_level_list: [], identifying: [], queryParam: {}, - queryParams: {}, + queryParams: { + equipmentType: [], + driveType: [], + deviceLevel: [] + }, queryParamEquip: {}, queryParamPeople: {}, efficiencyOptions: [ - { label: '鍒╃敤鐜�', value: 'lyl' }, + { label: 'TEEP', value: 'lyl' }, { label: '寮�鏈虹巼', value: 'kjl' }, { label: '寮�鏈烘椂闂�', value: 'kjsj' }, { label: '鍔犲伐鏃堕棿', value: 'jgsj' }, @@ -200,28 +281,45 @@ url: { list: '/mdc/efficiencyReport/efficiencyList', listByType: '/mdc/MdcUtilizationRate/getByType', - queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType' + queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType', + exportLongTimeXlsUrl: '/mdc/efficiencyReport/exportEfficiencyXls' }, tableHeads: [], - distinguishColorList: [], utilizationRateRowAverage: '', openRateRowAverage: '', openLongRowAverage: '', processLongRowAverage: '', waitLongRowAverage: '', closeLongRowAverage: '', - spinning: false + spinning: false, + isLazyRequest: '',// 鏄惁寮�鍚噿鍔犺浇 + requestAllDataSize: 8,// 鎬诲叡璇锋眰鐨勫垪琛ㄩ」鏁扮洰(榛樿鍊间负榛樿鏃ユ湡鐨勫樊鍊�+1) + everyRequestDataSize: 15,// 姣忔璇锋眰鐨勫垪琛ㄩ」鏁扮洰 + toggleSearchStatus: false, + modalVisible: false,// 寮傚父鍙嶉寮圭獥鏄惁寮瑰嚭 + preSelectFirstDate: null, + longTimeExportButtonLoading: 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_category') + 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) { @@ -277,6 +375,23 @@ }, computed: {}, methods: { + initDictData(dictCode) { + // //浼樺厛浠庣紦瀛樹腑璇诲彇瀛楀吀閰嶇疆 + if (getDictItemsFromCache(dictCode)) { + this[dictCode + '_list'] = getDictItemsFromCache(dictCode) + return + } + //鏍规嵁瀛楀吀Code, 鍒濆鍖栧瓧鍏告暟缁� + ajaxGetDictItems(dictCode, null).then((res) => { + if (res.success) { + this[dictCode + '_list'] = res.result + return + } + }) + }, + selectChange(value, key) { + this.queryParams[key] = value + }, checkSameData(dataList) { let cache = {} //瀛樺偍鐨勬槸閿槸kclx 鐨勫�硷紝鍊兼槸kclx 鍦╥ndeces涓暟缁勭殑涓嬫爣 let indices = [] //鏁扮粍涓瘡涓�涓�兼槸涓�涓暟缁勶紝鏁扮粍涓殑姣忎竴涓厓绱犳槸鍘熸暟缁勪腑鐩稿悓kclx鐨勪笅鏍� @@ -342,7 +457,6 @@ }, // 鍚堝苟 combineCell() { - console.log(this.dataList) let list = this.dataList for (let field in list[0]) { var k = 0 @@ -364,47 +478,98 @@ } return list }, - disabledDate(current) { - //Can not slect days before today and today - return current && current > moment().subtract('days', 1) + + dateParamChange(v1, v2) { + this.queryParam.startTime = v2[0] + this.queryParam.endTime = v2[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 - } - } - } - }) - } - } + + /** + * 鏃堕棿閫夋嫨鍣ㄩ潰鏉夸笂鐨勫�煎彂鐢熸敼鍙樻椂瑙﹀彂 + * @param dates 闈㈡澘涓婄殑涓や釜鍊肩粍鎴愮殑鏁扮粍 + */ + handleCalendarChange(dates) { + if (dates.length === 1) this.preSelectFirstDate = dates[0] + }, + + /** + * 鎺у埗鏃堕棿閫夋嫨鍣ㄩ潰鏉垮紑鍚笌鍏抽棴 + * @param status 寮�鍚姸鎬� + */ + handleCalendarOpenChange(status) { + if (status) this.preSelectFirstDate = null + }, + + /** + * 闈㈡澘涓婄姝㈤�夋嫨鐨勬棩鏈� + * @param current 绂佹鐨勬椂闂磋寖鍥� + */ + disabledDate(current) { + if (!this.preSelectFirstDate) { + return current > moment().startOf('days') + } else { + return current < moment(this.preSelectFirstDate).subtract(365, 'days').startOf('days') + || current > moment().startOf('days') + || current > moment(this.preSelectFirstDate).add(365, 'days').endOf('days') } }, + exportExcel() { $('#Efficiency').table2excel({ exclude: '.noExl', name: 'Excel Document Name', - filename: '璁惧鍒╃敤鐜�', + filename: '璁惧TEEP', exclude_img: true, fileext: '.xls', exclude_links: true, exclude_inputs: false }) + }, + exportLongTimeExcel(fileName) { + let param = { + startTime: moment(this.dates[0]).format('YYYYMMDD'), + endTime: moment(this.dates[1]).format('YYYYMMDD') + } + Object.keys(this.queryParams).forEach(item => { + if (Array.isArray(this.queryParams[item])) { + param[item] = this.queryParams[item].join() + // 姝ゅ涓轰繚璇佹帴鍙e弬鏁颁笉澶氫綑锛屽彲鐪佺暐 + if (this.queryParams[item].length === 0) delete param[item] + } + }) + param = Object.assign({}, this.queryParam, param) + + this.longTimeExportButtonLoading = true + downFile(this.url.exportLongTimeXlsUrl, param) + .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 + '.xlsx') + } 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 + '.xlsx') + document.body.appendChild(link) + link.click() + document.body.removeChild(link) //涓嬭浇瀹屾垚绉婚櫎鍏冪礌 + window.URL.revokeObjectURL(url) //閲婃斁鎺塨lob瀵硅薄 + } + }) + .finally(() => { + let timer = setTimeout(() => { + this.longTimeExportButtonLoading = false + clearTimeout(timer) + timer = null + }, 1000) + }) }, showIdentifying() { getAction(this.url.listByType, { type: 'lyl' }).then(res => { @@ -413,121 +578,159 @@ } }) }, - dateParamChange(v1, v2) { - this.queryParam.startTime = v2[0] - this.queryParam.endTime = v2[1] - // 鐐瑰嚮鏃堕棿閫夋嫨鍣ㄧ殑娓呯┖鎸夐挳鏃朵細瑙﹀彂姝ゅ垽鏂�(鐐瑰嚮閲嶇疆鎸夐挳涓嶄細瑙﹀彂)锛屽疄鐜伴噸缃垪琛ㄥ姛鑳斤紝鍒囧疄鏀瑰彉鍒楄〃鏄剧ず鏁堟灉 - if (!this.queryParam.startTime && !this.queryParam.endTime) this.searchReset() - }, efficiencyOptionsOnChange(checkedList) { - let index = checkedList.indexOf('lyl') - if (index < 0) { - // this.$message.warn('涓嶈兘鍙栨秷鏌ヨ寮�鍔ㄧ巼') - this.$notification.warning({ - message: '娑堟伅', - description: '涓嶈兘鍙栨秷鏌ヨ寮�鍔ㄧ巼' - }) - - return false - } this.checkedList = checkedList }, - // searchQuery() { - // if(this.queryParam.typeTree == "1"){ - // // this.queryParam.TreeIDTwo = "" - // this.queryParam.parentId = this.queryParamEquip.parentId - // this.queryParam.equipmentId = this.queryParamEquip.equipmentId - // }else{ - // // this.queryParam.TreeIDOne = "" - // this.queryParam.parentId = this.queryParamPeople.parentId - // this.queryParam.equipmentId = "" - // } - // this.loadData() - // // this.onClearSelected() - // }, - // searchReset() { - // this.typeTree = this.queryParam.typeTree - // this.typeParent = this.queryParams.parentId - // this.queryParam = {} - // this.dates = [] - // this.queryParam.typeTree = this.typeTree - // this.queryParam.parentId = this.typeParent - // this.loadData() - // // this.onClearSelected() - // }, searchQuery() { - console.log('dates', this.dates) - if (this.dates != '') { - 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.loadData() + // 鍥犺Е搴曞埛鏂颁細淇敼鍙傛暟鏃堕棿鍊硷紝鏁呭湪姝ょ敤鏃堕棿閫夋嫨鍣ㄧ殑鏃堕棿鍊煎鍙傛暟鏃堕棿鍊煎啀娆¤祴鍊硷紝鑻ヤ笉杩欐牱鍋氬垯鍙傛暟鏃堕棿鍊煎垯浼氫笌鏃堕棿閫夋嫨鍣ㄤ笂鐨勬椂闂村�间笉涓�鑷� + 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 } else { - this.$notification.warning({ - message: '娑堟伅', - description: '璇烽�夋嫨鏃堕棿' - }) + this.queryParam.parentId = this.queryParamPeople.parentId + this.queryParam.equipmentId = '' } - // this.onClearSelected() + 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() + // 姝ゅ涓轰繚璇佹帴鍙e弬鏁颁笉澶氫綑锛屽彲鐪佺暐 + if (this.queryParams[item].length === 0) delete this.queryParam[item] + } + }) + this.loadData() }, 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.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 = { + equipmentType: [], + driveType: [], + deviceLevel: [] + } this.loadData() - // this.queryParam = {} - // this.dates = [] - // this.loadData() - // this.onClearSelected() }, loadData() { this.tableHeads = [] this.dataList = [] this.spinning = true + // 鑻ユ棩鏈熼�夋嫨鍣ㄨ缃殑鏌ヨ璇锋眰鏁伴噺瓒呰繃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) { + if (res.result.mdcEfficiencyList && !res.result.mdcEfficiencyList.length) { + this.$notification.info({ + message: '娑堟伅', + description: '鏆傛棤璇ョ被鍨嬫暟鎹�' + }) + return + } + this.tableHeads = res.result.dates this.dataList = res.result.mdcEfficiencyList - this.distinguishColorList = res.result.utilizationRateList 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] + 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) { - this.selectList = res.result - // this.selectList = res.result.map((item, index, arr) => { - // return { label: item.id, value: item.equipmentTypeName + '' } - // }) + this.equipmentTypeList = res.result.map(item => { + return { + label: item.equipmentTypeName, + value: item.equipmentTypeName + } + }) } else { - // this.$message.warning(res.message) this.$notification.warning({ message: '娑堟伅', description: res.message }) } - }).finally(() => { - this.loading = false }) }, + + // 鑾峰彇鎺у埗绯荤粺绫诲瀷鍒楄〃 + 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 // 娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴� + const containerTopToClientTopHeight = tableContainer.getBoundingClientRect().top // 琛ㄦ牸瀹瑰櫒椤堕儴鍒版祻瑙堝櫒鍙鍖哄煙椤堕儴鐨勯棿璺� + tableContainer.style.height = (clientHeight - containerTopToClientTopHeight - 32) + 'px' + } } } </script> @@ -588,6 +791,12 @@ z-index: 2; } + .table tbody tr .tdgu6 { + position: sticky; + left: 512px; + z-index: 2; + } + .table2 thead tr .timeth, .table2 thead tr .thgu { position: sticky; @@ -635,38 +844,13 @@ left: 412px; } - #Efficiency{ + .table2 thead .equipname .dong7 { + z-index: 5; + left: 512px; + } + + #Efficiency { overflow: hidden; - } - - @media screen and (min-width: 1920px) { - #Efficiency { - height: 687px !important; - } - } - - @media screen and (min-width: 1680px) and (max-width: 1920px) { - #Efficiency { - height: 687px !important; - } - } - - @media screen and (min-width: 1400px) and (max-width: 1680px) { - #Efficiency { - height: 540px !important; - } - } - - @media screen and (min-width: 1280px) and (max-width: 1400px) { - #Efficiency { - height: 440px !important; - } - } - - @media screen and (max-width: 1280px) { - #Efficiency { - height: 440px !important; - } } .identifyingclass { @@ -677,17 +861,10 @@ .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; } -- Gitblit v1.9.3