diff --git a/package-lock.json b/package-lock.json
index 97ffb0f..55fbb0d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,8 @@
         "vue-router": "^4.0.0",
         "vue3-lottie": "^3.2.0",
         "vue3-print-nb": "^0.1.4",
-        "vue3-seamless-scroll": "^2.0.1"
+        "vue3-seamless-scroll": "^2.0.1",
+        "xlsx": "^0.18.5"
       },
       "devDependencies": {
         "@quasar/app-vite": "^1.6.0",
@@ -832,6 +833,14 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmmirror.com/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
@@ -1307,6 +1316,18 @@
         }
       ]
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -1470,6 +1491,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmmirror.com/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1637,7 +1666,6 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
       "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
-      "dev": true,
       "bin": {
         "crc32": "bin/crc32.njs"
       },
@@ -2769,6 +2797,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -4733,6 +4769,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmmirror.com/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/stack-trace": {
       "version": "1.0.0-pre2",
       "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-1.0.0-pre2.tgz",
@@ -5337,6 +5384,22 @@
       "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==",
       "dev": true
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -5357,6 +5420,26 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmmirror.com/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
diff --git a/package.json b/package.json
index 05dc189..8cda89c 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,8 @@
     "vue-router": "^4.0.0",
     "vue3-lottie": "^3.2.0",
     "vue3-print-nb": "^0.1.4",
-    "vue3-seamless-scroll": "^2.0.1"
+    "vue3-seamless-scroll": "^2.0.1",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@quasar/app-vite": "^1.6.0",
diff --git a/src/api/equipmentRecord/equipmentRecordApi.ts b/src/api/equipmentRecord/equipmentRecordApi.ts
index 109681e..6e7aeb7 100644
--- a/src/api/equipmentRecord/equipmentRecordApi.ts
+++ b/src/api/equipmentRecord/equipmentRecordApi.ts
@@ -35,7 +35,14 @@ class EquipmentRecordApi {
 
   // 获取设备状态记录列表 设备+时间跨度
   getEquipmentRecordList = (val: EquipmentRecord) => {
-    const format = helper.params(val);
+    // const format = helper.params(val);
+    let format = '';
+    if (val.begTime) {
+      format += `?begTime=${val.begTime}`;
+    }
+    if (val.endTime) {
+      format += `&endTime=${val.endTime}`;
+    }
     return request.get(`${pathName}GetEquipmentRecordList${format}`);
   };
 
@@ -93,7 +100,13 @@ class EquipmentRecordApi {
 
   // 获取设备状态记录统计列表 时间跨度
   getEquipmentRecordTotalList = (val: EquipmentNoTimeRecord) => {
-    const format = helper.params(val);
+    let format = '';
+    if (val.begTime) {
+      format += `?begTime=${val.begTime}`;
+    }
+    if (val.endTime) {
+      format += `&endTime=${val.endTime}`;
+    }
     return request.get(`${pathName}GetEquipmentRecordTotalList${format}`);
   };
 
diff --git a/src/pages/screen/screen2/index.vue b/src/pages/screen/screen2/index.vue
index efd807a..f1fe268 100644
--- a/src/pages/screen/screen2/index.vue
+++ b/src/pages/screen/screen2/index.vue
@@ -15,16 +15,22 @@
                             <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="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-select dense outlined use-input v-model="pagination.data.equipmentId" @filter="equipmentNameFilter"
-                        option-value="id" option-label="equipmentName" :options="deviceList" emit-value map-options
-                        label="设备" />
+                    <q-select dense outlined use-input v-model="pagination.data.equipmentId"
+                        @filter="equipmentNameFilter" option-value="id" option-label="equipmentName"
+                        :options="deviceList" emit-value map-options label="设备" />
                 </div>
                 <div class="col-xl-2 col-lg-2 col-sm-3">
-                    <q-input dense label="日期范围" ref="rangDateRef" readonly outlined v-model="rangDateText">
+                    <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]"
@@ -34,7 +40,8 @@
                                         @update:model-value="rangeDateUpdate">
                                         <div class="row">
                                             <div class="col-3">
-                                                <q-btn v-close-popup label="本月" @click="setCurrMonth" color="orange" flat />
+                                                <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 />
@@ -62,7 +69,7 @@
                         <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">{{
@@ -75,11 +82,11 @@
                                         :label="helper.getEquipmentState(props.row.state).text" />
                                 </q-td>
                                 <q-td style="font-size: 16px;" key="startTime" :props="props">{{ props.row.startTime
-                                }}</q-td>
+                                    }}</q-td>
                                 <q-td style="font-size: 16px;" key="endTime" :props="props">{{ props.row.endTime
-                                }}</q-td>
+                                    }}</q-td>
                                 <q-td style="font-size: 16px;" key="timeTotal" :props="props">{{ props.row.timeTotal
-                                }}</q-td>
+                                    }}</q-td>
                             </q-tr>
                         </template>
                     </q-table>
@@ -92,7 +99,8 @@
 
 <script setup lang="ts">
 import { onMounted, ref } 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 helper from 'src/Utils/helper'
 import { EquipmentSearchEntity } from 'src/api/equipment/model/equipment'
@@ -107,6 +115,7 @@ const loading = ref(false);
 const rangeDate = ref();
 const rangDateText = ref();
 const deviceList = ref([]);
+const rangDateRef = ref();
 
 const columns = ref([
     {
@@ -329,6 +338,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';
@@ -389,6 +399,168 @@ 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}"`
+}
+
+// // 导出Excel
+// const exportTable = () => {
+//     // naive encoding to csv format
+//     const content = [columns.value.map(col => wrapCsvValue(col.label))].concat(
+//         list.value.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')
+
+//     const status = exportFile(
+//         'table-export.csv',
+//         content,
+//         'text/csv'
+//     )
+
+//     if (status !== true) {
+//         Notify.create({
+//             position: 'top',
+//             message: '浏览器拒绝文件下载...',
+//             icon: 'warning',
+//             color: 'negative',
+//         });
+//     }
+// }
+
+
+
+// 导出Excel
+const equipmentRecord = 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(rangeDate.value.to + ' 23:59:59'), new Date(rangeDate.value.from + ' 00:00:00'), 'days') // 计算日期差值
+            // 判断 时间范围是否大于30天
+            if (diff > 30) {
+                Notify.create({
+                    position: 'top',
+                    message: '日期范围不能大于30天！',
+                    icon: 'feedback',
+                    color: 'negative',
+                })
+                return
+            }
+            equipmentRecord.value = new EquipmentRecord();
+            equipmentRecord.value.begTime = begTime;
+            equipmentRecord.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:59）
+
+            let tableData = [
+                ['序号', '设备编码', '设备名称', '设备类型', '运行状态', '启动时间', '停止时间', '累计时长（分钟）']//导出表头
+            ] // 表格表头
+
+            equipmentRecordApi.getEquipmentRecordList(equipmentRecord.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,
+                        helper.getEquipmentState(item.state).text,
+                        item.startTime,
+                        item.endTime,
+                        item.timeTotal
+                    ]
+                    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 {
diff --git a/src/pages/screen/screen4/index.vue b/src/pages/screen/screen4/index.vue
index f3fbd6a..99d3404 100644
--- a/src/pages/screen/screen4/index.vue
+++ b/src/pages/screen/screen4/index.vue
@@ -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 {
diff --git a/yarn.lock b/yarn.lock
index 1320160..5ba5048 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -509,6 +509,11 @@ acorn-jsx@^5.3.2:
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz"
   integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
 
+adler-32@~1.3.0:
+  version "1.3.1"
+  resolved "https://registry.npmmirror.com/adler-32/-/adler-32-1.3.1.tgz"
+  integrity sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==
+
 ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz"
@@ -780,6 +785,14 @@ caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541:
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001555.tgz"
   integrity sha512-NzbUFKUnJ3DTcq6YyZB6+qqhfD112uR3uoEnkmfzm2wVzUNsFkU7AwBjKQ654Sp5cau0JxhFyRSn/tQZ+XfygA==
 
+cfb@~1.2.1:
+  version "1.2.2"
+  resolved "https://registry.npmmirror.com/cfb/-/cfb-1.2.2.tgz"
+  integrity sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==
+  dependencies:
+    adler-32 "~1.3.0"
+    crc-32 "~1.2.0"
+
 chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1:
   version "4.1.2"
   resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
@@ -860,6 +873,11 @@ clone@^1.0.2:
   resolved "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
+codepage@~1.15.0:
+  version "1.15.0"
+  resolved "https://registry.npmmirror.com/codepage/-/codepage-1.15.0.tgz"
+  integrity sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==
+
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
@@ -946,7 +964,7 @@ core-util-is@~1.0.0:
   resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
-crc-32@^1.2.0:
+crc-32@^1.2.0, crc-32@~1.2.0, crc-32@~1.2.1:
   version "1.2.2"
   resolved "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz"
   integrity sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==
@@ -1437,6 +1455,11 @@ forwarded@0.2.0:
   resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz"
   integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
 
+frac@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmmirror.com/frac/-/frac-1.1.2.tgz"
+  integrity sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==
+
 fraction.js@^4.3.6:
   version "4.3.7"
   resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz"
@@ -2593,6 +2616,13 @@ source-map@~0.6.0:
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+ssf@~0.11.2:
+  version "0.11.2"
+  resolved "https://registry.npmmirror.com/ssf/-/ssf-0.11.2.tgz"
+  integrity sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==
+  dependencies:
+    frac "~1.1.2"
+
 stack-trace@^1.0.0-pre2:
   version "1.0.0-pre2"
   resolved "https://registry.npmjs.org/stack-trace/-/stack-trace-1.0.0-pre2.tgz"
@@ -2915,6 +2945,16 @@ wildcard@^2.0.0:
   resolved "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz"
   integrity sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==
 
+wmf@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/wmf/-/wmf-1.0.2.tgz"
+  integrity sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==
+
+word@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.npmmirror.com/word/-/word-0.3.0.tgz"
+  integrity sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==
+
 wrap-ansi@^6.0.1:
   version "6.2.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz"
@@ -2938,6 +2978,19 @@ wrappy@1:
   resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
+xlsx@^0.18.5:
+  version "0.18.5"
+  resolved "https://registry.npmmirror.com/xlsx/-/xlsx-0.18.5.tgz"
+  integrity sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==
+  dependencies:
+    adler-32 "~1.3.0"
+    cfb "~1.2.1"
+    codepage "~1.15.0"
+    crc-32 "~1.2.1"
+    ssf "~0.11.2"
+    wmf "~1.0.1"
+    word "~0.3.0"
+
 xml-name-validator@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz"