|
|
|
|
@ -1,55 +1,67 @@
|
|
|
|
|
<template>
|
|
|
|
|
<!-- <transition appear enter-active-class="animated fadeIn"> -->
|
|
|
|
|
<q-card>
|
|
|
|
|
<!-- 搜索条件 -->
|
|
|
|
|
<q-card-section :style="{ height: '100%' }">
|
|
|
|
|
<div class="row q-col-gutter-md">
|
|
|
|
|
<!-- 刷新 查询 -->
|
|
|
|
|
<div class="col-xl-2 col-lg-2 col-sm-3">
|
|
|
|
|
<q-btn-group push glossy>
|
|
|
|
|
<q-btn push label="刷新" icon="refresh" @click="reFresh()">
|
|
|
|
|
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
|
|
|
|
|
content-style="font-size: 12px">清空所有条件并，刷新数据</q-tooltip>
|
|
|
|
|
</q-btn>
|
|
|
|
|
<q-btn push label="查询" icon="search" @click="getPage()">
|
|
|
|
|
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
|
|
|
|
|
content-style="font-size: 12px">按条件查询数据</q-tooltip>
|
|
|
|
|
</q-btn>
|
|
|
|
|
</q-btn-group>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 搜索条件 -->
|
|
|
|
|
<div class="col-xl-2 col-lg-2 col-sm-3">
|
|
|
|
|
<q-input dense label="日期范围" ref="rangDateRef" readonly outlined v-model="rangDateText">
|
|
|
|
|
<template v-slot:append>
|
|
|
|
|
<q-icon name="event" class="cursor-pointer">
|
|
|
|
|
<q-form ref="myForm">
|
|
|
|
|
|
|
|
|
|
<!-- 搜索条件 -->
|
|
|
|
|
<q-card-section :style="{ height: '100%' }">
|
|
|
|
|
<div class="row q-col-gutter-md">
|
|
|
|
|
<!-- 刷新 查询 -->
|
|
|
|
|
<div class="col-xl-2 col-lg-2 col-sm-3">
|
|
|
|
|
<q-btn-group push glossy>
|
|
|
|
|
<q-btn push label="刷新" icon="refresh" @click="reFresh()">
|
|
|
|
|
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
|
|
|
|
|
content-style="font-size: 12px">清空所有条件并，刷新数据</q-tooltip>
|
|
|
|
|
</q-btn>
|
|
|
|
|
<q-btn push label="查询" icon="search" @click="getPage()">
|
|
|
|
|
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
|
|
|
|
|
content-style="font-size: 12px">选择日期范围</q-tooltip>
|
|
|
|
|
<q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
|
|
|
|
|
<q-date v-model="rangeDate" years-in-month-view landscape range mask="YYYY-MM-DD"
|
|
|
|
|
@update:model-value="rangeDateUpdate">
|
|
|
|
|
<!-- <div class="row items-center justify-end">
|
|
|
|
|
content-style="font-size: 12px">按条件查询数据</q-tooltip>
|
|
|
|
|
</q-btn>
|
|
|
|
|
<q-btn push label="导出" icon="file_download" @click="exportTable">
|
|
|
|
|
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
|
|
|
|
|
content-style="font-size: 12px">按照日期范围导出数据</q-tooltip>
|
|
|
|
|
</q-btn>
|
|
|
|
|
</q-btn-group>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 搜索条件 -->
|
|
|
|
|
<div class="col-xl-2 col-lg-2 col-sm-3">
|
|
|
|
|
<q-input dense label="日期范围" ref="rangDateRef" readonly outlined v-model="rangDateText" :rules="[
|
|
|
|
|
(val: string) => (val !== null && val !== '' && val !== undefined) || '请选择日期范围',
|
|
|
|
|
]">
|
|
|
|
|
<template v-slot:append>
|
|
|
|
|
<q-icon name="event" class="cursor-pointer">
|
|
|
|
|
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
|
|
|
|
|
content-style="font-size: 12px">选择日期范围</q-tooltip>
|
|
|
|
|
<q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
|
|
|
|
|
<q-date v-model="rangeDate" years-in-month-view landscape range
|
|
|
|
|
mask="YYYY-MM-DD" @update:model-value="rangeDateUpdate">
|
|
|
|
|
<!-- <div class="row items-center justify-end">
|
|
|
|
|
<q-btn v-close-popup label="关闭" color="primary" flat />
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<q-btn v-close-popup label="本月" @click="setCurrMonth" color="orange" flat />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<q-btn v-close-popup label="本年" @click="setCurrYear" color="red" flat />
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<q-btn v-close-popup label="本月" @click="setCurrMonth" color="orange"
|
|
|
|
|
flat />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<q-btn v-close-popup label="本年" @click="setCurrYear" color="red"
|
|
|
|
|
flat />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3"></div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<q-btn v-close-popup label="关闭" color="primary" flat />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3"></div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<q-btn v-close-popup label="关闭" color="primary" flat />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</q-date>
|
|
|
|
|
</q-popup-proxy>
|
|
|
|
|
</q-icon>
|
|
|
|
|
</template>
|
|
|
|
|
</q-input>
|
|
|
|
|
</q-date>
|
|
|
|
|
</q-popup-proxy>
|
|
|
|
|
</q-icon>
|
|
|
|
|
</template>
|
|
|
|
|
</q-input>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</q-card-section>
|
|
|
|
|
</q-card-section>
|
|
|
|
|
</q-form>
|
|
|
|
|
|
|
|
|
|
<q-card-section style="padding:0 10px 15px 10px;">
|
|
|
|
|
<div class="row q-col-gutter-md">
|
|
|
|
|
<div class="col-xl-12 col-lg-12 col-sm-12">
|
|
|
|
|
@ -60,16 +72,17 @@
|
|
|
|
|
<template v-slot:body="props">
|
|
|
|
|
<q-tr :props="props" class="tr_hover">
|
|
|
|
|
<q-td style="font-size: 16px;" key="index" :props="props">{{ props.rowIndex + 1
|
|
|
|
|
}}</q-td>
|
|
|
|
|
}}</q-td>
|
|
|
|
|
<q-td style="font-size: 16px;" key="equipmentCode" :props="props">{{
|
|
|
|
|
props.row.equipmentCode }}</q-td>
|
|
|
|
|
<q-td style="font-size: 16px;" key="equipmentName" :props="props">{{
|
|
|
|
|
props.row.equipmentName }}</q-td>
|
|
|
|
|
<q-td style="font-size: 16px;" key="equipmentType" :props="props">{{
|
|
|
|
|
props.row.equipmentType
|
|
|
|
|
}}</q-td>
|
|
|
|
|
<q-td style="font-size: 16px;" key="furnaceNum" :props="props">{{ props.row.furnaceNum
|
|
|
|
|
}}</q-td>
|
|
|
|
|
}}</q-td>
|
|
|
|
|
<q-td style="font-size: 16px;" key="furnaceNum" :props="props">{{
|
|
|
|
|
props.row.furnaceNum
|
|
|
|
|
}}</q-td>
|
|
|
|
|
<q-td style="font-size: 16px;" key="totalRunningTime" :props="props">{{
|
|
|
|
|
props.row.totalRunningTime }}</q-td>
|
|
|
|
|
<q-td style="font-size: 16px;" key="totalAlarmTime" :props="props">{{
|
|
|
|
|
@ -88,9 +101,10 @@
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { ref, onMounted } from 'vue';
|
|
|
|
|
import { Notify, Screen, date, Platform } from 'quasar';
|
|
|
|
|
import { Notify, Screen, date, Platform, exportFile, Loading, Dialog, QSpinnerIos } from 'quasar';
|
|
|
|
|
import * as XLSX from 'XLSX'
|
|
|
|
|
import { Pagination, cconvert } from 'src/api/class';
|
|
|
|
|
import { EquipmentRecord } from 'src/api/equipmentRecord/model/equipmentRecord'
|
|
|
|
|
import { EquipmentRecord, EquipmentNoTimeRecord } from 'src/api/equipmentRecord/model/equipmentRecord'
|
|
|
|
|
import { equipmentRecordApi } from 'src/api/equipmentRecord/equipmentRecordApi'
|
|
|
|
|
import { useScreenStore } from 'src/stores/useScreenStore'
|
|
|
|
|
|
|
|
|
|
@ -99,6 +113,7 @@ const screenStore = useScreenStore();
|
|
|
|
|
const loading = ref(false);
|
|
|
|
|
const rangeDate = ref();
|
|
|
|
|
const rangDateText = ref();
|
|
|
|
|
const rangDateRef = ref();
|
|
|
|
|
|
|
|
|
|
const columns = ref([
|
|
|
|
|
{
|
|
|
|
|
@ -160,6 +175,7 @@ const onRequest = (props: any) => {
|
|
|
|
|
|
|
|
|
|
const pagination = ref(new Pagination(new EquipmentRecord()));
|
|
|
|
|
const getPage = () => {
|
|
|
|
|
rangDateRef.value.resetValidation();
|
|
|
|
|
if (rangeDate.value) {
|
|
|
|
|
pagination.value.data.begTime = rangeDate.value.from + ' 00:00:00';
|
|
|
|
|
pagination.value.data.endTime = rangeDate.value.to + ' 23:59:59';
|
|
|
|
|
@ -221,6 +237,143 @@ const rangeDateUpdate = (value: any, reason: any, details) => {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// const wrapCsvValue = (val: any, formatFn: any, row: any) => {
|
|
|
|
|
// let formatted = formatFn !== void 0
|
|
|
|
|
// ? formatFn(val, row)
|
|
|
|
|
// : val
|
|
|
|
|
|
|
|
|
|
// formatted = formatted === void 0 || formatted === null
|
|
|
|
|
// ? ''
|
|
|
|
|
// : String(formatted)
|
|
|
|
|
|
|
|
|
|
// formatted = formatted.split('"').join('""')
|
|
|
|
|
// /**
|
|
|
|
|
// * Excel accepts \n and \r in strings, but some other CSV parsers do not
|
|
|
|
|
// * Uncomment the next two lines to escape new lines
|
|
|
|
|
// */
|
|
|
|
|
// // .split('\n').join('\\n')
|
|
|
|
|
// // .split('\r').join('\\r')
|
|
|
|
|
|
|
|
|
|
// return `"${formatted}"`
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
const wrapCsvValue = (val: any, formatFn: any) => {
|
|
|
|
|
let formatted = formatFn !== void 0 ? formatFn(val) : val;
|
|
|
|
|
formatted = formatted === void 0 || formatted === null ? '' : String(formatted);
|
|
|
|
|
formatted = formatted.split('"').join('""');
|
|
|
|
|
return `"${formatted}"`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 导出Excel
|
|
|
|
|
const equipmentNoTimeRecord = ref();
|
|
|
|
|
const exportTable = () => {
|
|
|
|
|
rangDateRef.value.validate();
|
|
|
|
|
if (!rangDateRef.value.hasError) {
|
|
|
|
|
|
|
|
|
|
if (rangeDate.value) {
|
|
|
|
|
let begTime = rangeDate.value.from + ' 00:00:00';
|
|
|
|
|
let endTime = rangeDate.value.to + ' 23:59:59';
|
|
|
|
|
const diff = date.getDateDiff(new Date(endTime), new Date(begTime), 'days') // 计算日期差值
|
|
|
|
|
// 判断 时间范围是否大于30天
|
|
|
|
|
if (diff > 30) {
|
|
|
|
|
Notify.create({
|
|
|
|
|
position: 'top',
|
|
|
|
|
message: '日期范围不能大于30天！',
|
|
|
|
|
icon: 'feedback',
|
|
|
|
|
color: 'negative',
|
|
|
|
|
})
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
equipmentNoTimeRecord.value = new EquipmentNoTimeRecord();
|
|
|
|
|
equipmentNoTimeRecord.value.begTime = begTime;
|
|
|
|
|
equipmentNoTimeRecord.value.endTime = endTime;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
Dialog.create({
|
|
|
|
|
title: '系统提示',
|
|
|
|
|
message: '是否导出?',
|
|
|
|
|
class: 'text-h7 text-weight-bold',
|
|
|
|
|
cancel: true,
|
|
|
|
|
persistent: true
|
|
|
|
|
}).onOk(() => {
|
|
|
|
|
Loading.show({
|
|
|
|
|
spinner: QSpinnerIos,
|
|
|
|
|
message: '正在导出，请稍等...',
|
|
|
|
|
boxClass: 'bg-grey-2 text-grey-9',
|
|
|
|
|
spinnerColor: 'primary'
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// var d = new Date(); // 获取当前日期时间
|
|
|
|
|
// var monthStart = date.formatDate(new Date(d.getFullYear(), d.getMonth(), 1), 'YYYY-MM-DD'); // 获取本月第一天的日期时间
|
|
|
|
|
// var monthEnd = date.formatDate(new Date(d.getFullYear(), d.getMonth() + 1, 0), 'YYYY-MM-DD'); // 获取本月最后一天的日期时间（时间为23:59:5
|
|
|
|
|
|
|
|
|
|
let tableData = [
|
|
|
|
|
['序号', '设备编码', '设备名称', '设备类型', '开炉次数', '总运行时长（小时）', '总报警时长（小时）', '总待机时长（小时）']//导出表头
|
|
|
|
|
] // 表格表头
|
|
|
|
|
|
|
|
|
|
equipmentRecordApi.getEquipmentRecordTotalList(equipmentNoTimeRecord.value).then((res: any) => {
|
|
|
|
|
|
|
|
|
|
res.forEach((item: any, index: any) => {
|
|
|
|
|
console.log(item, item.name)
|
|
|
|
|
let rowData = []
|
|
|
|
|
//导出内容的字段
|
|
|
|
|
rowData = [
|
|
|
|
|
index + 1,
|
|
|
|
|
item.equipmentCode,
|
|
|
|
|
item.equipmentName,
|
|
|
|
|
item.equipmentType,
|
|
|
|
|
item.furnaceNum,
|
|
|
|
|
item.totalRunningTime,
|
|
|
|
|
item.totalAlarmTime,
|
|
|
|
|
item.totalStopTime
|
|
|
|
|
]
|
|
|
|
|
tableData.push(rowData)
|
|
|
|
|
})
|
|
|
|
|
let workSheet = XLSX.utils.aoa_to_sheet(tableData);
|
|
|
|
|
let bookNew = XLSX.utils.book_new();
|
|
|
|
|
XLSX.utils.book_append_sheet(bookNew, workSheet, 'Sheet1') // 工作簿名称
|
|
|
|
|
let name = '导出数据' + '.xlsx'
|
|
|
|
|
XLSX.writeFile(bookNew, name) // 保存的文件名
|
|
|
|
|
|
|
|
|
|
// // naive encoding to csv format
|
|
|
|
|
// const content = [columns.value.map(col => wrapCsvValue(col.label))].concat(
|
|
|
|
|
// res.map(row => columns.value.map(col => wrapCsvValue(
|
|
|
|
|
// typeof col.field === 'function'
|
|
|
|
|
// ? col.field(row)
|
|
|
|
|
// : row[col.field === void 0 ? col.name : col.field],
|
|
|
|
|
// col.format,
|
|
|
|
|
// row
|
|
|
|
|
// )).join(','))
|
|
|
|
|
// ).join('\r\n')
|
|
|
|
|
|
|
|
|
|
// // 'application/vnd.ms-excel'
|
|
|
|
|
// const status = exportFile(
|
|
|
|
|
// 'table-export.csv',
|
|
|
|
|
// content,
|
|
|
|
|
// {
|
|
|
|
|
// mimeType: 'text/csv',
|
|
|
|
|
// byteOrderMark: '\uFEFF', //解决乱码问题
|
|
|
|
|
// encoding: 'utf-8'
|
|
|
|
|
// }
|
|
|
|
|
// )
|
|
|
|
|
|
|
|
|
|
// if (status !== true) {
|
|
|
|
|
// Notify.create({
|
|
|
|
|
// position: 'top',
|
|
|
|
|
// message: '浏览器拒绝文件下载...',
|
|
|
|
|
// icon: 'warning',
|
|
|
|
|
// color: 'negative',
|
|
|
|
|
// });
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
}).finally(() => {
|
|
|
|
|
Loading.hide();
|
|
|
|
|
});
|
|
|
|
|
}).onCancel(() => { })
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped>
|
|
|
|
|
/* .tr_hover {
|
|
|
|
|
|
liuhr
9 months ago