From 14ef007feedf32a9da8eaa034a62efcc19cfa0c0 Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Tue, 9 Nov 2021 15:08:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=86=E8=8A=82=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                |  2 +-
 src/components/function-config-applied.vue | 48 +++++++++++-----------
 src/components/function-config-pending.vue |  2 +
 src/components/network-config-applied.vue  |  2 +
 src/components/network-config-pending.vue  |  2 +
 src/components/search-bar-data.vue         | 19 ++++++---
 src/routers/index.js                       |  2 +-
 src/views/data-history.vue                 | 45 +++++++++++++-------
 src/views/data-report.vue                  | 38 +++++++++++++----
 src/views/device-create.vue                | 23 +++++++++--
 src/views/device-list.vue                  | 12 +++---
 src/views/statistical-report.vue           |  7 +++-
 t                                          | 38 +++++++++++++++++
 13 files changed, 176 insertions(+), 64 deletions(-)
 create mode 100644 t

diff --git a/src/App.vue b/src/App.vue
index cff75ab..b3748f6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -69,7 +69,7 @@ function openPage(path) {
       </el-header>
       <el-container class="overflow-hidden">
         <!-- <el-aside width="180px" v-if="menu.show"> -->
-        <el-aside v-if="menu.show" :width="!menu.collapse ? '180px' : '64px'">
+        <el-aside v-if="menu.show" :width="!menu.collapse ? '200px' : '64px'">
           <el-menu :collapse="menu.collapse" :default-active="activeMenuIndex" class="el-menu-vertical-demo">
             <el-menu-item
               v-for="(item, index) in routeList"
diff --git a/src/components/function-config-applied.vue b/src/components/function-config-applied.vue
index c122ca1..9cba39b 100644
--- a/src/components/function-config-applied.vue
+++ b/src/components/function-config-applied.vue
@@ -1,77 +1,77 @@
 <template>
   <el-row :gutter="10">
-    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+    <el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
       <span>设置金属腐蚀采样频率(分钟)：</span>
       <span>{{ data.frequency.metal }}</span>
     </el-col>
-    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+    <el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
       <span>设置温湿度采样频率(分钟)：</span>
       <span>{{ data.frequency.th }}</span>
     </el-col>
-    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+    <el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
       <span>设置SO2采样频率(分钟)：</span>
       <span>{{ data.frequency.so2 }}</span>
     </el-col>
-    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+    <el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
       <span>设置盐雾采样频率(分钟)：</span>
       <span>{{ data.frequency.salt }}</span>
     </el-col>
-    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+    <el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
       <span>设置时间：</span>
       <span>{{ formatMsTime(data.time) }}</span>
     </el-col>
-    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+    <el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
       <span>设置金属腐蚀采集个数：</span>
       <span>{{ data.count }}</span>
     </el-col>
-    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+    <el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
       <span>设置电池电压低阈值：</span>
       <span>{{ data.batteryLow }}</span>
     </el-col>
-    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+    <el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
       <span>设置电池电压高阈值：</span>
       <span>{{ data.batteryHigh }}</span>
     </el-col>
-    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+    <el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
       <span>设置太阳能电压高阈值：</span>
       <span>{{ data.sunHigh }}</span>
     </el-col>
-    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+    <el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
       <span>设置湿度高阈值：</span>
       <span>{{ data.humidityHigh }}</span>
     </el-col>
-    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+    <el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
       <span>设置温度低阈值：</span>
       <span>{{ data.temperatureLow }}</span>
     </el-col>
-    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+    <el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
       <span>设置温度高阈值：</span>
       <span>{{ data.temperatureHigh }}</span>
     </el-col>
-    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+    <el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
       <span>选择金属通道1类型：</span>
       <span>{{ formatCorrosiveType(data.corrosiveType1) }}</span>
     </el-col>
-    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+    <el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
       <span>选择金属通道2类型：</span>
       <span>{{ formatCorrosiveType(data.corrosiveType2) }}</span>
     </el-col>
-    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+    <el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
       <span>选择金属通道3类型：</span>
       <span>{{ formatCorrosiveType(data.corrosiveType3) }}</span>
     </el-col>
-    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+    <el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
       <span>选择金属通道4类型：</span>
       <span>{{ formatCorrosiveType(data.corrosiveType4) }}</span>
     </el-col>
-    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+    <el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
       <span>安全模式：</span>
       <span>{{ formatMode(data.securityMode) }}</span>
     </el-col>
   </el-row>
 
   <el-row>
-    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+    <el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
       <span>上报类型：</span>
       <span class="mr-8">{{ formatReportType(data.report.type) }}</span>
 
@@ -85,11 +85,11 @@
 </template>
 
 <script setup>
-import { computed, ref, watch, defineEmits, defineProps } from 'vue';
+import { computed, defineEmits, defineProps, ref, watch } from 'vue';
 import { useStore } from 'vuex';
-import { getConfigAppliedNetwork } from 'apis/index';
+import { getConfigAppliedFunction } from 'apis';
 import { formatMsTime } from 'utils/time';
-import { functionConfig, corrosiveTypes } from '@/config/config';
+import { corrosiveTypes, functionConfig } from '@/config/config';
 
 const store = useStore();
 const currentDeviceId = computed(() => store.state.device.currentDeviceId);
@@ -104,10 +104,12 @@ const props = defineProps({ activeName: String });
 const onSearch = async deviceId => {
   try {
     const params = { deviceId };
-    const resData = await getConfigAppliedNetwork(params);
+    const resData = await getConfigAppliedFunction(params);
     data.value = resData || functionConfig;
     if (resData && resData.status) {
       emit('status', resData.status);
+    } else {
+      emit('status', '');
     }
   } catch (error) {
     throw new Error(error);
@@ -124,7 +126,7 @@ watch(
 
 /**
  * 转化安全模式
- * @param {string|number} time 时间ms
+ * @param {string} mode OPEN->加密
  */
 function formatMode(mode) {
   return mode === 'OPEN' ? '不加密' : '加密';
diff --git a/src/components/function-config-pending.vue b/src/components/function-config-pending.vue
index 0f5b745..d601fda 100644
--- a/src/components/function-config-pending.vue
+++ b/src/components/function-config-pending.vue
@@ -198,6 +198,8 @@ async function onSearch(deviceId, type = 0) {
   if (resData && resData.status) {
     // 设置 设置状态
     emit('status', resData.status);
+  } else {
+    emit('status', '');
   }
 
   if (resData && resData.report.type === 'POINT') {
diff --git a/src/components/network-config-applied.vue b/src/components/network-config-applied.vue
index 304e986..76dd5d6 100644
--- a/src/components/network-config-applied.vue
+++ b/src/components/network-config-applied.vue
@@ -81,6 +81,8 @@ const onSearch = async deviceId => {
     appliedData.value = resData || networkConfig;
     if (resData && resData.status) {
       emit('status', resData.status);
+    } else {
+      emit('status', '');
     }
   } catch (error) {
     throw new Error(error);
diff --git a/src/components/network-config-pending.vue b/src/components/network-config-pending.vue
index 869d637..a5a4f98 100644
--- a/src/components/network-config-pending.vue
+++ b/src/components/network-config-pending.vue
@@ -102,6 +102,8 @@ async function onSearch(deviceId, type = 0) {
     data.value = resData || networkConfig;
     if (resData && resData.status) {
       emit('status', resData.status);
+    } else {
+      emit('status', '');
     }
   } catch (error) {
     throw new Error(error);
diff --git a/src/components/search-bar-data.vue b/src/components/search-bar-data.vue
index 7645308..128cbbe 100644
--- a/src/components/search-bar-data.vue
+++ b/src/components/search-bar-data.vue
@@ -26,11 +26,11 @@
     </el-form-item>
 
     <el-form-item>
-      <el-button type="primary" @click="onSubmit">查询</el-button>
+      <el-button type="primary" @click="onSubmit" :loading="loadingSearch">查询</el-button>
     </el-form-item>
 
     <el-form-item v-if="showExport">
-      <el-button type="primary" @click="onExport">导出</el-button>
+      <el-button type="primary" @click="onExport" :loading="loadingExport">导出</el-button>
     </el-form-item>
   </el-form>
 </template>
@@ -44,17 +44,19 @@ import { exportHistory } from 'apis';
 const emit = defineEmits(['search']);
 const searchDevice = reactive({
   deviceId: '',
-  date: [new Date(), new Date()],
+  date: [dayjs().subtract(7, 'day'), new Date()],
   dataType: 'ReportHistoryData',
 });
 const searchDeviceForm = ref(null); // form
 const store = useStore();
 const devices = computed(() => store.state.device.devices);
 const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
+const loadingExport = ref(false);
 
 defineProps({
   showExport: Boolean,
   showTypeSelect: Boolean,
+  loadingSearch: Boolean,
 });
 
 // 监听currentDeviceId
@@ -97,19 +99,24 @@ function generateParams() {
 
 // 提交
 const onSubmit = () => {
-  searchDeviceForm.value.validate(() => {
-    const params = generateParams();
-    emit('search', params);
+  searchDeviceForm.value.validate(valid => {
+    if (valid) {
+      const params = generateParams();
+      emit('search', params);
+    }
   });
 };
 
 // 导出
 async function onExport() {
   try {
+    loadingExport.value = true;
     const params = generateParams();
     const resData = await exportHistory(params);
+    loadingExport.value = false;
     resData && (window.location.href = resData);
   } catch (error) {
+    loadingExport.value = false;
     throw new Error(error);
   }
 }
diff --git a/src/routers/index.js b/src/routers/index.js
index b88eae5..34d838b 100644
--- a/src/routers/index.js
+++ b/src/routers/index.js
@@ -78,7 +78,7 @@ export const routes = [
     path: '/corrosion/commands',
     name: 'commands',
     meta: {
-      title: '指令下发状态',
+      title: '历史数据指令下发状态',
       icon: 'el-icon-document-copy',
     },
     component: () => import('@/views/commands.vue'),
diff --git a/src/views/data-history.vue b/src/views/data-history.vue
index 311cbb7..3260834 100644
--- a/src/views/data-history.vue
+++ b/src/views/data-history.vue
@@ -4,6 +4,7 @@ import { useStore } from 'vuex';
 import SearchBar from 'components/search-bar-data.vue';
 import { getHistory, sendCommand } from 'apis';
 import { ElMessage } from 'element-plus';
+import dayjs from 'dayjs';
 
 const search = ref({});
 const page = ref({
@@ -14,7 +15,7 @@ let timer = null;
 const store = useStore();
 const token = computed(() => store.getters['user/token']);
 const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
-let contentHeight = 600;
+const contentHeight = ref(600);
 const data = ref(null);
 
 // 获取设备完整信息列表
@@ -34,7 +35,7 @@ const getData = async () => {
         deviceId: currentDeviceId.value,
         date,
         dataType: options.dataType,
-        page: page.value.age,
+        page: page.value.page,
         size: page.value.size,
         type: 1,
       };
@@ -59,8 +60,9 @@ const getData = async () => {
 // 设置表格高度
 onMounted(() => {
   const winHeight = document.documentElement.clientHeight;
-  contentHeight = winHeight - 150;
+  contentHeight.value = winHeight - 250;
 });
+
 /**
  * 监听sear h信息
  * @param {object} payload search组件emi 的数据
@@ -117,6 +119,15 @@ async function onSend(dataType) {
     ElMessage.error('指令发送失败');
   }
 }
+
+/**
+ * 格式化时间
+ * @param {number} time 时间戳
+ * @returns {string}
+ */
+function formatTime(time) {
+  return dayjs(new Date(time)).format('YYYY-MM-DD HH:mm:ss');
+}
 </script>
 
 <template>
@@ -128,19 +139,20 @@ async function onSend(dataType) {
   </el-row>
 
   <template v-if="data">
-    <el-table :data="data" :style="{ 'max-height': contentHeight + 'px' }" border stripe style="width: 100%">
-      <el-table-column align="center" fixed label="设备编号" min-width="140" prop="deviceNo" />
-      <el-table-column align="center" label="ICCID" min-width="100" prop="iccid" />
-      <el-table-column align="center" label="IMEI" min-width="80" prop="imei" />
-      <el-table-column align="center" label="信号强度" min-width="80" prop="signal" />
-      <el-table-column align="center" label="基站编号" min-width="80" prop="stationNo" />
-      <el-table-column align="center" label="硬件版本" min-width="80" prop="hardwareVersion" />
-      <el-table-column align="center" label="软件版本" min-width="80" prop="softwareVersion" />
+    <el-table :data="data" border stripe style="width: 100%" :max-height="contentHeight">
+      <el-table-column align="center" fixed label="设备编号" min-width="80" prop="deviceNo" />
+      <!--      <el-table-column align="center" label="ICCID" min-width="100" prop="iccid" />-->
+      <!--      <el-table-column align="center" label="IMEI" min-width="80" prop="imei" />-->
+      <!--      <el-table-column align="center" label="信号强度" min-width="80" prop="signal" />-->
+      <!--      <el-table-column align="center" label="基站编号" min-width="80" prop="stationNo" />-->
+      <!--      <el-table-column align="center" label="硬件版本" min-width="80" prop="hardwareVersion" />-->
+      <!--      <el-table-column align="center" label="软件版本" min-width="80" prop="softwareVersion" />-->
       <el-table-column align="center" label="太阳能电压" min-width="94" prop="solarVoltage" />
       <el-table-column align="center" label="蓄电池电压" min-width="94" prop="batteryVoltage" />
-      <el-table-column align="center" label="电压百分比" min-width="94" prop="batteryVoltagePercentage" />
-      <el-table-column align="center" label="剩余电量" min-width="94" prop="batteryVoltageRemain" />
-      <el-table-column align="center" label="电池损耗量" min-width="94" prop="batteryLoss" />
+      <!--      <el-table-column align="center" label="电压百分比" min-width="94" prop="batteryVoltagePercentage" />-->
+      <!--      <el-table-column align="center" label="剩余电量" min-width="94" prop="batteryVoltageRemain" />-->
+      <!--      <el-table-column align="center" label="电池损耗量" min-width="94" prop="batteryLoss" />-->
+
       <el-table-column align="center" label="机箱温度" min-width="80" prop="deviceTemperature" />
       <el-table-column align="center" label="机箱湿度" min-width="80" prop="deviceHumidity" />
       <el-table-column align="center" label="环境温度" min-width="80" prop="environmentTemperature" />
@@ -151,6 +163,11 @@ async function onSend(dataType) {
       <el-table-column align="center" label="腐流2" min-width="60" prop="corrosion2" />
       <el-table-column align="center" label="腐流3" min-width="60" prop="corrosion3" />
       <el-table-column align="center" label="腐流4" min-width="60" prop="corrosion4" />
+      <el-table-column align="center" label="时间" min-width="170">
+        <template #default="scope">
+          {{ formatTime(+scope.row.time) }}
+        </template>
+      </el-table-column>
     </el-table>
 
     <el-pagination
diff --git a/src/views/data-report.vue b/src/views/data-report.vue
index 4f5b1ae..039bfcb 100644
--- a/src/views/data-report.vue
+++ b/src/views/data-report.vue
@@ -2,8 +2,9 @@
 import { computed, onMounted, ref } from 'vue';
 import { useStore } from 'vuex';
 import SearchBar from 'components/search-bar-data.vue';
-import { getDatas } from 'apis/index';
+import { getDatas } from 'apis';
 import { ElMessage } from 'element-plus';
+import dayjs from 'dayjs';
 
 const search = ref({});
 const page = ref({
@@ -14,7 +15,8 @@ let timer = null;
 const store = useStore();
 const token = computed(() => store.getters['user/token']);
 const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
-let contentHeight = 600;
+const contentHeight = ref(600);
+const loadingSearch = ref(false);
 const data = ref(null);
 
 // 获取设备完整信息列表
@@ -37,7 +39,11 @@ const getData = async () => {
         size: page.value.size,
         type: 1,
       };
+
+      loadingSearch.value = true;
       const resData = await getDatas(params);
+      loadingSearch.value = false;
+
       data.value = resData.data;
       page.value = resData.page;
       timer && clearTimeout(timer);
@@ -58,7 +64,7 @@ const getData = async () => {
 // 设置表格高度
 onMounted(() => {
   const winHeight = document.documentElement.clientHeight;
-  contentHeight = winHeight - 150;
+  contentHeight.value = winHeight - 170;
 });
 
 /**
@@ -95,20 +101,34 @@ const onPrev = e => {
   page.value.page = e - 1;
   getData();
 };
+
+/**
+ * 格式化时间
+ * @param {number} time 时间戳
+ * @returns {string}
+ */
+function formatTime(time) {
+  return dayjs(new Date(time)).format('YYYY-MM-DD HH:mm:ss');
+}
 </script>
 
 <template>
-  <SearchBar :show-export="true" @search="onSearch" />
+  <SearchBar :show-export="true" @search="onSearch" :loading-search="loadingSearch" />
 
   <template v-if="data">
-    <el-table :data="data" :style="{ 'max-height': contentHeight + 'px' }" border stripe style="width: 100%">
-      <el-table-column align="center" fixed label="设备编号" min-width="140" prop="deviceNo" />
-      <el-table-column align="center" label="ICCID" min-width="100" prop="iccid" />
-      <el-table-column align="center" label="IMEI" min-width="80" prop="imei" />
+    <el-table :data="data" border stripe style="width: 100%" :max-height="contentHeight">
+      <el-table-column align="center" fixed label="设备编号" min-width="80" prop="deviceNo" />
+      <el-table-column align="center" label="ICCID" min-width="190" prop="iccid" />
+      <el-table-column align="center" label="IMEI" min-width="150" prop="imei" />
       <el-table-column align="center" label="信号强度" min-width="80" prop="signal" />
-      <el-table-column align="center" label="基站编号" min-width="80" prop="stationNo" />
+      <el-table-column align="center" label="基站编号" min-width="120" prop="stationNo" />
       <el-table-column align="center" label="硬件版本" min-width="80" prop="hardwareVersion" />
       <el-table-column align="center" label="软件版本" min-width="80" prop="softwareVersion" />
+      <el-table-column align="center" label="时间" min-width="170">
+        <template #default="scope">
+          {{ formatTime(+scope.row.time) }}
+        </template>
+      </el-table-column>
       <el-table-column align="center" label="太阳能电压" min-width="94" prop="solarVoltage" />
       <el-table-column align="center" label="蓄电池电压" min-width="94" prop="batteryVoltage" />
       <el-table-column align="center" label="电压百分比" min-width="94" prop="batteryVoltagePercentage" />
diff --git a/src/views/device-create.vue b/src/views/device-create.vue
index c3219bb..e54d59e 100644
--- a/src/views/device-create.vue
+++ b/src/views/device-create.vue
@@ -1,8 +1,8 @@
 <template>
-  <el-form ref="deviceCreate" :model="data" label-position="top">
+  <el-form ref="deviceCreate" :model="data" :rules="rules" label-position="top">
     <el-row :gutter="20">
       <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
-        <el-form-item label="设备ID号" prop="deviceId">
+        <el-form-item label="设备ID号(6位)" prop="deviceId">
           <el-input v-model="data.deviceId"></el-input>
         </el-form-item>
       </el-col>
@@ -146,6 +146,22 @@ const data = reactive({
   joint: '', // 主站后台联调情况
   remark: '', // 备注
 });
+
+const rules = {
+  deviceId: [
+    {
+      required: true,
+      message: '请输入设备ID号',
+      trigger: 'blur',
+    },
+    {
+      len: 6,
+      message: '请输入6位设备ID号',
+      trigger: 'blur',
+    },
+  ],
+};
+
 const deviceCreate = ref(null); // form
 const store = useStore();
 const route = useRoute();
@@ -158,7 +174,8 @@ const onReset = () => {
 
 // 提交表单
 const onSubmit = () => {
-  deviceCreate.value.validate(async () => {
+  deviceCreate.value.validate(async valid => {
+    if (!valid) return;
     if (data.installTime) {
       data.installTime = new Date(data.installTime).getTime();
     }
diff --git a/src/views/device-list.vue b/src/views/device-list.vue
index 4791727..ee280dd 100644
--- a/src/views/device-list.vue
+++ b/src/views/device-list.vue
@@ -6,7 +6,7 @@
   </div>
 
   <template v-if="devicesAll && devicesAll.data">
-    <el-table :data="devicesAll.data" :style="{ 'max-height': contentHeight + 'px' }" border stripe style="width: 100%">
+    <el-table :data="devicesAll.data" :max-height="contentHeight" border stripe style="width: 100%">
       <el-table-column type="expand">
         <template #default="props">
           <el-row :gutter="20" class="px-6 text-gray-400">
@@ -76,7 +76,7 @@
   </template>
 
   <!-- 编辑设备信息 -->
-  <DeviceEdit :show="editting" @toggle-mdoal="editting = false" />
+  <DeviceEdit :show="editing" @toggle-mdoal="editing = false" />
 </template>
 
 <script setup>
@@ -97,8 +97,8 @@ const devicesAll = computed(() => {
   return store.state.device.devicesAll;
 });
 const currentDeviceId = computed(() => store.state.device.currentDeviceId);
-let contentHeight = 600;
-const editting = ref(false);
+const contentHeight = ref(600);
+const editing = ref(false);
 
 // 获取设备完整信息列表
 const getDevicesAllData = () => {
@@ -122,7 +122,7 @@ getDevicesAllData();
 // 设置表格高度
 onMounted(() => {
   const winHeight = document.documentElement.clientHeight;
-  contentHeight = winHeight - 150;
+  contentHeight.value = winHeight - 250;
 });
 
 /**
@@ -169,7 +169,7 @@ const handleDelete = async deviceId => {
 // 编辑设备信息
 const handleEdit = item => {
   store.commit('device/setCurrentDeviceId', item.deviceId);
-  editting.value = true;
+  editing.value = true;
 };
 
 /**
diff --git a/src/views/statistical-report.vue b/src/views/statistical-report.vue
index 71787ba..d9cc4ec 100644
--- a/src/views/statistical-report.vue
+++ b/src/views/statistical-report.vue
@@ -1,5 +1,5 @@
 <template>
-  <SearchBar @search="onSearch" />
+  <SearchBar @search="onSearch" :loading-search="loadingSearch" />
   <HistoryData ref="childRef" class="mt-4" />
 </template>
 
@@ -17,6 +17,7 @@ const token = computed(() => store.getters['user/token']);
 const realtimeData = computed(() => store.state.statistics.realtimeData);
 const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
 const search = ref({});
+const loadingSearch = ref(false);
 
 /**
  * 历史数据统计
@@ -30,6 +31,7 @@ const search = ref({});
 const getDate = async () => {
   try {
     if (token && token.value) {
+      loadingSearch.value = true;
       const options = { ...search.value };
       const date = options && options.date ? options.date : [];
       const params = {
@@ -41,12 +43,15 @@ const getDate = async () => {
       timer && clearTimeout(timer);
       timer = null;
       childRef.value.changeDate(realtimeData.value.data);
+      loadingSearch.value = false;
     } else {
+      loadingSearch.value = false;
       timer = setTimeout(() => {
         getDate();
       });
     }
   } catch (error) {
+    loadingSearch.value = false;
     console.log('error: ', error);
   }
 };
diff --git a/t b/t
new file mode 100644
index 0000000..a5221f8
--- /dev/null
+++ b/t
@@ -0,0 +1,38 @@
+usage: git tag [-a | -s | -u <key-id>] [-f] [-m <msg> | -F <file>]
+		<tagname> [<head>]
+   or: git tag -d <tagname>...
+   or: git tag -l [-n[<num>]] [--contains <commit>] [--no-contains <commit>] [--points-at <object>]
+		[--format=<format>] [--[no-]merged [<commit>]] [<pattern>...]
+   or: git tag -v [--format=<format>] <tagname>...
+
+    -l, --list            list tag names
+    -n[<n>]               print <n> lines of each tag message
+    -d, --delete          delete tags
+    -v, --verify          verify tags
+
+Tag creation options
+    -a, --annotate        annotated tag, needs a message
+    -m, --message <message>
+                          tag message
+    -F, --file <file>     read message from file
+    -e, --edit            force edit of tag message
+    -s, --sign            annotated and GPG-signed tag
+    --cleanup <mode>      how to strip spaces and #comments from message
+    -u, --local-user <key-id>
+                          use another key to sign the tag
+    -f, --force           replace the tag if exists
+    --create-reflog       create a reflog
+
+Tag listing options
+    --column[=<style>]    show tag list in columns
+    --contains <commit>   print only tags that contain the commit
+    --no-contains <commit>
+                          print only tags that don't contain the commit
+    --merged <commit>     print only tags that are merged
+    --no-merged <commit>  print only tags that are not merged
+    --sort <key>          field name to sort on
+    --points-at <object>  print only tags of the object
+    --format <format>     format to use for the output
+    --color[=<when>]      respect format colors
+    -i, --ignore-case     sorting and filtering are case insensitive
+