diff --git a/src/components/common/Pagination.vue b/src/components/common/Pagination.vue
index 5aafadd3..68f6dfda 100644
--- a/src/components/common/Pagination.vue
+++ b/src/components/common/Pagination.vue
@@ -24,6 +24,9 @@
 import { defaultPageSize } from '@/utils/constants'
 import { storageKey } from '@/utils/constants'
 import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { parseInt } from 'lodash'
 
 export default {
   name: 'pagination',
@@ -39,9 +42,23 @@ export default {
       default: 'total, prev, pager, next, slot'
     }
   },
+  /**
+   * 添加vue3的setup，目的是添加/获取地址栏的参数
+   */
+  setup () {
+    const { query } = useRoute()
+    const pageSize = ref(defaultPageSize)
+    console.log('初始化路由信息', query);
+    let currentPageNo = ref(query.pageNo || 1)
+
+    return {
+      pageSize,
+      currentPageNo
+    }
+  },
   data () {
     return {
-      pageSize: defaultPageSize,
+      // pageSize: defaultPageSize,
       pageSizes: [
         {
           label: '20' + this.$t('pageSize'),
@@ -108,25 +125,22 @@ export default {
       this.$emit('pageNo', val)
       this.backgroundColor()
       this.scrollbarToTop()
+      // this.currentPageNo = val;
 
-      sessionStorage.setItem('report_pagination_current', JSON.stringify(val));
-      if(val != null) {
-        let newParam = {
-          currentPage: val
-        }
-        this.reloadUrl(newParam);
+      let newParam = {
+        pageNo: val
       }
+      this.reloadUrl(newParam);
     },
     /**
      * 更改页码大小
      */
     size (val) {
       // eslint-disable-next-line vue/no-mutating-props
-      this.pageObj.pageNo = 1
+      // this.pageObj.pageNo = 1
       this.$emit('pageSize', val)
       this.backgroundColor()
 
-      sessionStorage.setItem('report_pagination_size', JSON.stringify(val));
       let newParam = {
         pageSize: val
       }
@@ -167,19 +181,10 @@ export default {
         this.pageSize = parseInt(pageSize)
       }
     }
-
-    let pageSize = sessionStorage.getItem('report_pagination_size'); // 缓存的每页个数
-    let currentPage = sessionStorage.getItem('report_pagination_current'); // 当前页码
-
-    if(pageSize !== undefined && pageSize !== null) {
-      pageSize = JSON.parse(pageSize);
-      this.size(pageSize);
-    }
-
-    if(currentPage !== undefined && currentPage !== null) {
-      currentPage = JSON.parse(currentPage);
-      this.current(currentPage);
-    }
+    
+    this.size(this.pageSize);
+    this.currentPageNo = parseInt(this.currentPageNo);
+    this.current(this.currentPageNo);
   },
   watch: {
     postPageSizes: {
diff --git a/src/components/table/report/reportTestTable.vue b/src/components/table/report/reportTestTable.vue
index 0102f724..7a63b7ac 100644
--- a/src/components/table/report/reportTestTable.vue
+++ b/src/components/table/report/reportTestTable.vue
@@ -1,5 +1,6 @@
 <template>
-  <el-table
+  <div>
+    <el-table
       id="reportTable"
       ref="dataTable"
       :data="tableData"
@@ -14,199 +15,200 @@
       @sort-change="tableDataSort"
       @expand-change="dropExpandChange"
       @selection-change="selectionChange"
-  >
-    <el-table-column type="expand" width="30">
-      <template #default="props">
-        <div class="down">
-          <loading :loading="loadingDown"></loading>
-          <div class="block drop-down-time">
-            <el-date-picker
-                v-model="timeRange"
-                size="small"
-                :format="format"
-                :clearable="false"
-                type="datetimerange"
-                range-separator="To"
-                :start-placeholder="$t('detections.startTime')"
-                :end-placeholder="$t('detections.endTime')"
-                @change="datePickerChange(props.row)"
-            />
-          </div>
-          <div class="expand">
-            <chart-no-data v-if="downDataList.length === 0 && !loadingDown"></chart-no-data>
-            <div class="expand-cell" v-for="(item, index) in downDataList" :key="index">
-              <div class="expand-right">
-                <div class="demo-progress">
-                  <el-progress :stroke-width="10" type="circle" :percentage="computePercent(item)" :color="computePercent(item) === 'Failed' ? '#D8A6A6' : (computePercent(item) === 100 ? '#21bf9a' : '#50b3ef')">
-                    <template #default="{ percentage }">
-                      <span style="font-size: 0.875rem;" v-if="percentage !== 'Failed'">{{ percentage + '%' }}</span>
-                      <span style="font-size: 0.875rem;color: #C14843" v-else>{{percentage}}</span>
-                    </template>
-                  </el-progress>
-                </div>
-              </div>
-              <div class="expand-left">
-                <div class="expand-name"><i class="cn-icon cn-icon-user"></i>{{ username }}</div>
-                <div class="expand-time">
-                  <div>{{ $t('report.creationTime') }}</div>
-                  <div>{{dateFormatByAppearance(item.ctime)}}</div>
-                </div>
-                <div class="expand-icon">
-                  <div class="table-operation-item--no-border" :class="{'table-operation-item--disabled': computePercent(item) === 'Failed' || computePercent(item) < 100}" @click="reportOperation(['download', item])">
-                    <loading :loading="loadingTableId === item.id" size="small"></loading>
-                    <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
-                      <use xlink:href="#cn-icon-download2"></use>
-                    </svg>
+    >
+      <el-table-column type="expand" width="30">
+        <template #default="props">
+          <div class="down">
+            <loading :loading="loadingDown"></loading>
+            <div class="block drop-down-time">
+              <el-date-picker
+                  v-model="timeRange"
+                  size="small"
+                  :format="format"
+                  :clearable="false"
+                  type="datetimerange"
+                  range-separator="To"
+                  :start-placeholder="$t('detections.startTime')"
+                  :end-placeholder="$t('detections.endTime')"
+                  @change="datePickerChange(props.row)"
+              />
+            </div>
+            <div class="expand">
+              <chart-no-data v-if="downDataList.length === 0 && !loadingDown"></chart-no-data>
+              <div class="expand-cell" v-for="(item, index) in downDataList" :key="index">
+                <div class="expand-right">
+                  <div class="demo-progress">
+                    <el-progress :stroke-width="10" type="circle" :percentage="computePercent(item)" :color="computePercent(item) === 'Failed' ? '#D8A6A6' : (computePercent(item) === 100 ? '#21bf9a' : '#50b3ef')">
+                      <template #default="{ percentage }">
+                        <span style="font-size: 0.875rem;" v-if="percentage !== 'Failed'">{{ percentage + '%' }}</span>
+                        <span style="font-size: 0.875rem;color: #C14843" v-else>{{percentage}}</span>
+                      </template>
+                    </el-progress>
                   </div>
-                  <div class="table-operation-item--no-border" :class="{'table-operation-item--disabled': computePercent(item) === 'Failed' || computePercent(item) < 100}" @click="reportOperation(['preview', item])">
-                    <loading :loading="loadingPreviewId === item.id" size="small"></loading>
-                    <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
-                      <use xlink:href="#cn-icon-preview"></use>
-                    </svg>
+                </div>
+                <div class="expand-left">
+                  <div class="expand-name"><i class="cn-icon cn-icon-user"></i>{{ username }}</div>
+                  <div class="expand-time">
+                    <div>{{ $t('report.creationTime') }}</div>
+                    <div>{{dateFormatByAppearance(item.ctime)}}</div>
                   </div>
-                  <div class="table-operation-item--no-border" @click="downDeleteQueryChange(item, props)">
-                    <svg class="icon" aria-hidden="true">
-                      <use xlink:href="#cn-icon-shanchu"></use>
-                    </svg>
+                  <div class="expand-icon">
+                    <div class="table-operation-item--no-border" :class="{'table-operation-item--disabled': computePercent(item) === 'Failed' || computePercent(item) < 100}" @click="reportOperation(['download', item])">
+                      <loading :loading="loadingTableId === item.id" size="small"></loading>
+                      <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
+                        <use xlink:href="#cn-icon-download2"></use>
+                      </svg>
+                    </div>
+                    <div class="table-operation-item--no-border" :class="{'table-operation-item--disabled': computePercent(item) === 'Failed' || computePercent(item) < 100}" @click="reportOperation(['preview', item])">
+                      <loading :loading="loadingPreviewId === item.id" size="small"></loading>
+                      <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
+                        <use xlink:href="#cn-icon-preview"></use>
+                      </svg>
+                    </div>
+                    <div class="table-operation-item--no-border" @click="downDeleteQueryChange(item, props)">
+                      <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#cn-icon-shanchu"></use>
+                      </svg>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
+            <div class="cn-detection__footer">
+              <chart-detection-pagination
+                  ref="pagination"
+                  :page-obj="pageObj"
+                  @pageJump="pageJump"
+              ></chart-detection-pagination>
+            </div>
           </div>
-          <div class="cn-detection__footer">
-            <chart-detection-pagination
-                ref="pagination"
-                :page-obj="pageObj"
-                @pageJump="pageJump"
-            ></chart-detection-pagination>
-          </div>
-        </div>
-      </template>
-    </el-table-column>
-    <el-table-column
-        :resizable="false"
-        align="center"
-        type="selection"
-        width="30">
-    </el-table-column>
-    <el-table-column
-        v-for="(item, index) in customTableTitles"
-        :key="`col-${index}`"
-        :fixed="item.fixed"
-        :label="item.label"
-        :min-width="`${item.minWidth}`"
-        :prop="item.prop"
-        :resizable="true"
-        :show-overflow-tooltip="item.prop === 'timePlan'"
-        :sort-orders="['ascending', 'descending']"
-        :sortable="item.sortable"
-        :width="`${item.width}`"
-    >
-      <template #header>
-        <span class="data-column__span">{{item.label}}</span>
-        <div class="col-resize-area"></div>
-      </template>
-      <template #default="scope" :column="item">
-        <span v-if="item.prop === 'timeLimit'">
-          {{handleTimeRange(scope.row)}}
-        </span>
-        <span v-else-if="item.prop === 'categoryId'">
-          <span v-for="(item, i) in categoryList" :key="i">
-            <span v-if="scope.row.categoryId === item.id">{{item.name}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+          :resizable="false"
+          align="center"
+          type="selection"
+          width="30">
+      </el-table-column>
+      <el-table-column
+          v-for="(item, index) in customTableTitles"
+          :key="`col-${index}`"
+          :fixed="item.fixed"
+          :label="item.label"
+          :min-width="`${item.minWidth}`"
+          :prop="item.prop"
+          :resizable="true"
+          :show-overflow-tooltip="item.prop === 'timePlan'"
+          :sort-orders="['ascending', 'descending']"
+          :sortable="item.sortable"
+          :width="`${item.width}`"
+      >
+        <template #header>
+          <span class="data-column__span">{{item.label}}</span>
+          <div class="col-resize-area"></div>
+        </template>
+        <template #default="scope" :column="item">
+          <span v-if="item.prop === 'timeLimit'">
+            {{handleTimeRange(scope.row)}}
           </span>
-        </span>
-        <span v-else-if="item.prop === 'timePlan'">
-          <template v-if="scope.row.config && scope.row.config.isScheduler === 0">
-             {{$t('report.always')}}
-          </template>
-          <template v-else-if="scope.row.config && scope.row.config.isScheduler === 1">
-            <el-popover
-                placement="right-start"
-                :width="270"
-                trigger="hover"
-                class="my-table"
-                @show="handleConfig(scope.row)"
-            >
-              <template #reference>
-                <span>
-                  <template v-if="scope.row.config && scope.row.config.schedulerConfig">
-                    <template v-if="scope.row.config.schedulerConfig.type === 'day'">
-                     {{$t('report.daily')}}
+          <span v-else-if="item.prop === 'categoryId'">
+            <span v-for="(item, i) in categoryList" :key="i">
+              <span v-if="scope.row.categoryId === item.id">{{item.name}}</span>
+            </span>
+          </span>
+          <span v-else-if="item.prop === 'timePlan'">
+            <template v-if="scope.row.config && scope.row.config.isScheduler === 0">
+              {{$t('report.always')}}
+            </template>
+            <template v-else-if="scope.row.config && scope.row.config.isScheduler === 1">
+              <el-popover
+                  placement="right-start"
+                  :width="270"
+                  trigger="hover"
+                  class="my-table"
+                  @show="handleConfig(scope.row)"
+              >
+                <template #reference>
+                  <span>
+                    <template v-if="scope.row.config && scope.row.config.schedulerConfig">
+                      <template v-if="scope.row.config.schedulerConfig.type === 'day'">
+                      {{$t('report.daily')}}
+                      </template>
+                      <template v-else-if="scope.row.config.schedulerConfig.type === 'week'">
+                        {{$t('report.weekly')}}
+                      </template>
+                      <template v-else-if="scope.row.config.schedulerConfig.type === 'month'">
+                        {{$t('report.monthly')}}
+                      </template>
+                      <template v-else-if="scope.row.config.schedulerConfig.type === ''">
+                        {{$t('report.oneTime')}}
+                      </template>
+                      <template v-else>
+                        -
+                      </template>
                     </template>
-                    <template v-else-if="scope.row.config.schedulerConfig.type === 'week'">
-                      {{$t('report.weekly')}}
-                     </template>
-                    <template v-else-if="scope.row.config.schedulerConfig.type === 'month'">
-                      {{$t('report.monthly')}}
-                     </template>
-                    <template v-else-if="scope.row.config.schedulerConfig.type === ''">
-                      {{$t('report.oneTime')}}
-                    </template>
-                    <template v-else>
-                       -
-                    </template>
-                  </template>
-                </span>
-              </template>
-               <el-row class="margin-l-10 margin-t-20">
-                <el-col :span="8" class="tooltip-column-name">{{$t("report.period")}}</el-col>
-                <el-col :span="16">{{configPeriod}}</el-col>
-              </el-row>
-               <el-row class="margin-l-10">
-                <el-col :span="8"  class="tooltip-column-name">{{$t("report.custom")}}</el-col>
-                <el-col :span="16">{{configCustom}}</el-col>
-              </el-row>
-              <el-row class="margin-l-10">
-                <el-col :span="8" class="tooltip-column-name">{{$t("report.startTime")}}</el-col>
-                <el-col :span="16">{{dateFormatByAppearance(scope.row.schedulerStart) || '-'}}</el-col>
-              </el-row>
-               <el-row class="margin-l-10">
-                <el-col :span="8" class="tooltip-column-name" >{{$t("report.endTime")}}</el-col>
-                <el-col :span="16">{{dateFormatByAppearance(scope.row.schedulerEnd) || '-'}}</el-col>
-              </el-row>
-            </el-popover>
-          </template>
-          <template v-else>
-             -
-          </template>
-        </span>
-        <span v-else-if="item.prop === 'userName'">
-          {{(scope.row.sysUser && scope.row.sysUser.name) || '-'}}
-        </span>
-        <span v-else-if="item.prop === 'lastTime'">
-          {{scope.row.lastTime ? dateFormatByAppearance(scope.row.lastTime) : '-'}}
-        </span>
-        <span v-else-if="item.prop === 'total'">
-          {{scope.row[item.prop] || 0}}
-        </span>
-        <span v-else>{{scope.row[item.prop] || '-'}}</span>
-      </template>
-    </el-table-column>
-    <el-table-column
-        :resizable="false"
-        :width="operationWidth"
-        fixed="right">
-      <template #header>
-        <div class="table-operation-title">{{$t('overall.option')}}</div>
-      </template>
-      <template #default="scope">
-        <div class="table-operation-items">
-          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-bianji"></i></button>
-          <button class="table-operation-item" @click="tableOperation(['delete', scope.row])"><i class="cn-icon cn-icon-shanchu"></i></button>
+                  </span>
+                </template>
+                <el-row class="margin-l-10 margin-t-20">
+                  <el-col :span="8" class="tooltip-column-name">{{$t("report.period")}}</el-col>
+                  <el-col :span="16">{{configPeriod}}</el-col>
+                </el-row>
+                <el-row class="margin-l-10">
+                  <el-col :span="8"  class="tooltip-column-name">{{$t("report.custom")}}</el-col>
+                  <el-col :span="16">{{configCustom}}</el-col>
+                </el-row>
+                <el-row class="margin-l-10">
+                  <el-col :span="8" class="tooltip-column-name">{{$t("report.startTime")}}</el-col>
+                  <el-col :span="16">{{dateFormatByAppearance(scope.row.schedulerStart) || '-'}}</el-col>
+                </el-row>
+                <el-row class="margin-l-10">
+                  <el-col :span="8" class="tooltip-column-name" >{{$t("report.endTime")}}</el-col>
+                  <el-col :span="16">{{dateFormatByAppearance(scope.row.schedulerEnd) || '-'}}</el-col>
+                </el-row>
+              </el-popover>
+            </template>
+            <template v-else>
+              -
+            </template>
+          </span>
+          <span v-else-if="item.prop === 'userName'">
+            {{(scope.row.sysUser && scope.row.sysUser.name) || '-'}}
+          </span>
+          <span v-else-if="item.prop === 'lastTime'">
+            {{scope.row.lastTime ? dateFormatByAppearance(scope.row.lastTime) : '-'}}
+          </span>
+          <span v-else-if="item.prop === 'total'">
+            {{scope.row[item.prop] || 0}}
+          </span>
+          <span v-else>{{scope.row[item.prop] || '-'}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+          :resizable="false"
+          :width="operationWidth"
+          fixed="right">
+        <template #header>
+          <div class="table-operation-title">{{$t('overall.option')}}</div>
+        </template>
+        <template #default="scope">
+          <div class="table-operation-items">
+            <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-bianji"></i></button>
+            <button class="table-operation-item" @click="tableOperation(['delete', scope.row])"><i class="cn-icon cn-icon-shanchu"></i></button>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="table-operation-all">
+      <el-checkbox v-model="checkboxAll" :indeterminate="isIndeterminate" @change="selectAll(tableData)"></el-checkbox>
+      <div class="table-operation-all-span">
+        <span>{{ $t('overall.all') }}</span>
+        <div class="table-operation-back-down" :class="{'table-operation-all-checkbox': batchDow, 'table-operation-all-loading': loading}" @click="checkboxIds.id ? tableOperation(['delete', checkboxIds]) : ''">
+          <loading :loading="loading"></loading>
+          <span>{{$t('report.batchDeletion')}}</span>
         </div>
-      </template>
-    </el-table-column>
-  </el-table>
-  <div class="table-operation-all">
-    <el-checkbox v-model="checkboxAll" :indeterminate="isIndeterminate" @change="selectAll(tableData)"></el-checkbox>
-    <div class="table-operation-all-span">
-      <span>{{ $t('overall.all') }}</span>
-      <div class="table-operation-back-down" :class="{'table-operation-all-checkbox': batchDow, 'table-operation-all-loading': loading}" @click="checkboxIds.id ? tableOperation(['delete', checkboxIds]) : ''">
-        <loading :loading="loading"></loading>
-        <span>{{$t('report.batchDeletion')}}</span>
       </div>
     </div>
-  </div>
+  </div>  
 </template>
 
 <script>
@@ -220,6 +222,8 @@ import { ref } from 'vue'
 import { dateFormatToUTC, getNowTime } from '@/utils/date-util'
 import chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
+import { useRoute } from 'vue-router'
+
 export default {
   name: 'builtinReportTable',
   mixins: [table],
@@ -299,7 +303,7 @@ export default {
         total: 0,
         resetPageNo: true
       },
-      expandedIds: [],
+      // expandedIds: [],
       interval: null,
       typeMappings: [
         { key: 'day', value: this.$t('report.daily') },
@@ -321,11 +325,44 @@ export default {
       selectIds: [], // 单行选中的id列表
     }
   },
+  /**
+   * 添加vue3的setup，目的是添加/获取地址栏的参数
+   */
+  setup () {
+    const { startTime, endTime } = getNowTime(60 * 24 * 30)
+    const timeRange = ref([startTime, endTime])
+
+    const { query } = useRoute()
+    let expandedId = [];
+    if(query.expandId) {
+      expandedId.push(parseInt(query.expandId))
+    }
+    const expandedIds = ref(expandedId || [])
+
+    return {
+      timeRange,
+      expandedIds
+    }
+  },
   watch: {
     'tableData'(newVal, oldVal) {
         if(newVal) {
           this.showSelectedRow();
         }
+    },
+    expandedIds(newVal, oldVal) {
+        if(newVal != undefined && newVal.length>0) {
+          let newParam = {
+            expandId: newVal[0]
+          }
+          this.reloadUrl(newParam);
+        } else {
+          // 删除地址栏参数，然后删除缓存
+          let newQuery = this.$route.query // 深拷贝路由数据
+          delete newQuery.expandId;
+          delete newQuery.expandPaginaTionPage;
+          this.reloadUrl(newQuery, 'cleanOldParams');
+        }
     }
   },
   computed: {
@@ -375,10 +412,9 @@ export default {
      * 即展开表格后刷新界面，保持展开效果
      */
      expandTable() {
-      let expandInfo = sessionStorage.getItem('report_expand_table');
-      expandInfo = JSON.parse(expandInfo);
+      let expandInfo = this.expandedIds;
       
-      if(expandInfo !== null && expandInfo !== undefined) {
+      if(expandInfo !== undefined && expandInfo.length>0) {
         let obj = {
           id: expandInfo[0]
         }
@@ -473,22 +509,6 @@ export default {
       if (expandedRows.length > 0 && row) {
         this.expandedIds.push(row.id)
         this.datePickerChange(row)
-        // 存入缓存，随后向地址栏添加参数
-        sessionStorage.setItem('report_expand_table', JSON.stringify(this.expandedIds));
-
-        let newParam = {
-          expandId: row.id
-        }
-        this.reloadUrl(newParam);
-      } else {
-        // 删除地址栏参数，然后删除缓存
-        let newQuery = JSON.parse(JSON.stringify(this.$route.query)) // 深拷贝路由数据
-        delete newQuery.expandId;
-        delete newQuery.expandPaginaTionPage;
-        this.reloadUrl(newQuery, 'cleanOldParams');
-
-        sessionStorage.setItem('report_expand_table', null);
-        sessionStorage.setItem('report_select_expand_pagination', null);
       }
     },
     datePickerChange (row, show) {
@@ -644,13 +664,6 @@ export default {
   },
   beforeUnmount () {
     clearInterval(this.interval)
-  },
-  setup () {
-    const { startTime, endTime } = getNowTime(60 * 24 * 30)
-    const timeRange = ref([startTime, endTime])
-    return {
-      timeRange
-    }
   }
 }
 </script>
diff --git a/src/views/charts/charts/chartDetectionPagination.vue b/src/views/charts/charts/chartDetectionPagination.vue
index 0ef3dc12..63ba9da6 100644
--- a/src/views/charts/charts/chartDetectionPagination.vue
+++ b/src/views/charts/charts/chartDetectionPagination.vue
@@ -1,39 +1,49 @@
 <template>
-  <el-pagination
-    small
-    ref="pagination"
-    :current-page="pageObj.pageNo"
-    :page-size="pageObj.pageSize"
-    layout="total,prev,jumper,slot,next"
-    class="chart-table-pagination"
-    :total="pageObj.total"
-    @current-change="currentChange"
-  >
-    <span>/&nbsp;{{totalPage}}</span>
-  </el-pagination>
+  <div>
+    <loading :loading="loading"></loading>
+    <el-pagination
+      small
+      ref="pagination"
+      :current-page="pageObj.pageNo"
+      :page-size="pageObj.pageSize"
+      layout="total,prev,jumper,slot,next"
+      class="chart-table-pagination"
+      :total="pageObj.total"
+      @current-change="currentChange"
+    >
+      <span>/&nbsp;{{totalPage}}</span>
+    </el-pagination>
+  </div>  
 </template>
 
 <script>
 import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import { useRoute } from 'vue-router'
 import { ref, shallowRef } from 'vue'
+import { parseInt } from 'lodash'
+import Loading from '@/components/common/Loading'
 export default {
   name: 'chartDetectionPagination',
   props: {
     pageObj: Object,
   },
+  components: {
+    Loading
+  },
   data() {
     return {
-      newPageObj: {},
+      initNum: -1,
+      loading: false,
+      timer: null
+    }
+  },
+  setup () {
+    const { query } = useRoute()
+    const pageNo = ref(query.expandPaginaTionPage || 1)
+    return {
+      pageNo
     }
   },
-  // setup () {
-  //   const { query } = useRoute()
-  //   const pagination = ref(query.expandPaginaTionPage || 1)
-  //   return {
-  //     pagination
-  //   }
-  // },
   computed: {
     totalPage() {
       const remainder = this.pageObj.total % this.pageObj.pageSize
@@ -49,10 +59,8 @@ export default {
      * 当前页改变
      */
     currentChange: function(val) {
-      this.$emit('pageJump', val)
       this.pageObj.pageNo = val
-
-      sessionStorage.setItem('report_select_expand_pagination', JSON.stringify(val))
+      this.$emit('pageJump', val)
 
       let newParam = {
         expandPaginaTionPage: val,
@@ -62,22 +70,25 @@ export default {
       overwriteUrl(newUrl)
     },
     initData() {
-      let pageNo = sessionStorage.getItem('report_select_expand_pagination');
-      if (pageNo != null) {
-        pageNo = JSON.parse(pageNo)
-        this.pageObj.pageNo = pageNo
-        this.currentChange(pageNo, 'init')
-      }
+        let pageNo = this.pageNo;
+        this.timer = setTimeout(() => {
+          this.currentChange(parseInt(pageNo));
+        }, 500);
+        
     },
   },
   mounted() {
     this.$el.querySelector('.el-pagination__jump').childNodes[0].nodeValue = ''
 
-    this.$nextTick(() => {
-      setTimeout(() => {
+    this.initNum = this.initNum+1;
+    if(this.initNum === 0) {
+      this.$nextTick(()=>{
         this.initData()
-      }, 100)
-    })
+      })
+    }
   },
+  beforeDestroy(to, from, next) {
+    clearTimeout(this.timer);
+  }
 }
 </script>
diff --git a/src/views/report/reportTest.vue b/src/views/report/reportTest.vue
index a44f8cfe..32a600f8 100644
--- a/src/views/report/reportTest.vue
+++ b/src/views/report/reportTest.vue
@@ -78,6 +78,8 @@ import { api } from '@/utils/api'
 import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import ReportBox from '@/components/rightBox/report/ReportBox'
 import Loading from '@/components/common/Loading'
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
 
 export default {
   name: 'Report',
@@ -85,7 +87,7 @@ export default {
     return {
       builtinReportLeftMenu: [], // 左侧列表菜单数据
       builtinColor: false,
-      builtinId: -1,
+      // builtinId: '',
       url: api.reportTemp,
       blankObject: {
         id: '',
@@ -145,7 +147,21 @@ export default {
         'report.december'
       ],
       tableId: 'builtinReportTable',
-      builtinLeftLoading: false
+      builtinLeftLoading: false,
+      getNum: -1
+    }
+  },
+  /**
+   * 添加vue3的setup，目的是添加/获取地址栏的参数
+   */
+  setup () {
+    const { query } = useRoute()
+    const builtinId = ref(parseInt(query.ategoryId) || '')
+    const urlPageNo = ref(parseInt(query.pageNo) || 1)
+
+    return {
+      builtinId,
+      urlPageNo
     }
   },
   mixins: [dataListMixin],
@@ -160,18 +176,23 @@ export default {
       this.queryGetTempData();      
     });    
   },
-  methods: {
-    /**
-     * 向地址栏添加/删除参数
-     */
-     reloadUrl (newParam, clean) {
-      const { query } = this.$route;
-      let newUrl = urlParamsHandler(window.location.href, query, newParam);
-      if(clean) {
-        newUrl = urlParamsHandler(window.location.href, query, newParam, clean);
+  watch: {
+    builtinId (n) {
+      const { query } = this.$route
+      let newUrl = urlParamsHandler(window.location.href, query, {
+        ategoryId: n
+      })
+
+      // 点击“全部”或者首次进入界面时，不显示左侧菜单栏参数
+      if(n === null) {
+        let newQuery = JSON.parse(JSON.stringify(query)) // 深拷贝路由数据
+        delete newQuery.ategoryId;
+        newUrl = urlParamsHandler(window.location.href, query, newQuery, 'clean')
       }
       overwriteUrl(newUrl)
-    },
+    }
+  },
+  methods: {
     queryGetTempData () {
       this.builtinLeftLoading = true
       get(api.reportCategory).then(res => {
@@ -182,13 +203,10 @@ export default {
               config: c.config ? JSON.parse(c.config) : {}
             }
           })
-          let tabId = sessionStorage.getItem('report_select_tab');
-          if(tabId != null) {
-            tabId = JSON.parse(tabId);
-            this.builtinId = tabId;
-            this.builtinTabs(this.builtinId);            
+
+          if(this.builtinId !== '') {
+            this.builtinTabs (this.builtinId);
           } else {
-            this.builtinId = null;
             this.getTableData();
           }
         }
@@ -196,6 +214,7 @@ export default {
       })
     },
     getTableData (params) {
+      this.searchLabel = null;
       if (params) {
         this.searchLabel = { ...this.searchLabel, ...params }
       }
@@ -207,50 +226,40 @@ export default {
         listUrl = this.listUrl
       }
 
-      let urlTabId = this.$route.query.tabId;
+      if(this.builtinId !== '') {
+        this.searchLabel.categoryId = this.builtinId;
+      }
 
-      // 该请求不知道为什么会走2次，此处留个记录，后续解决。为避免请求两次，所以加上判断保证请求一次
-      // 前面条件是第一次进来时，左侧菜单栏点击缓存为null的情况；
-      // 后面条件是点击菜单栏后刷新界面的情况
-      if((this.builtinId === null) || (this.builtinId > -1 && urlTabId !== undefined)) {
+      // 该请求不知道为什么会走2次，此处留个记录，后续解决。
+      this.getNum = this.getNum + 1;
+      if(this.getNum >0) {
         get(listUrl, this.searchLabel).then(response => {
           // this.tools.loading = false
           if (response.code === 200) {
             for (let i = 0; i < response.data.list.length; i++) {
               response.data.list[i].status = response.data.list[i].status + ''
             }
-            this.tableData = response.data.list.map(item => {
-              return {
-                ...item,
-                config: item.config ? JSON.parse(item.config) : {}
-              }
-            })
-            this.pageObj.total = response.data.total;
+            this.$nextTick(()=>{
+              this.tableData = [];
+              this.tableData = response.data.list.map(item => {
+                return {
+                  ...item,
+                  config: item.config ? JSON.parse(item.config) : {}
+                }
+              })
+              this.pageObj.total = response.data.total;              
+            })            
             // TODO 回到顶部
           }
         })
       }
-
     },
     /**
      * 点击左侧tab页
      */
     builtinTabs (id) {
-      this.getTableData({ categoryId: id })
       this.builtinId = id
-
-      sessionStorage.setItem('report_select_tab', JSON.stringify(id));
-
-      if(id != null) {
-        let newParam = {
-          tabId: id
-        }
-        this.reloadUrl(newParam);
-      } else {
-        let newQuery = JSON.parse(JSON.stringify(this.$route.query)) // 深拷贝路由数据
-        delete newQuery.tabId;
-        this.reloadUrl(newQuery, 'cleanOldParams');
-      }
+      this.getTableData({ categoryId: id });
     },
     edit (u) {
       this.initConfig(u)
@@ -296,6 +305,9 @@ export default {
         }
       }
     }
+  },
+  beforeDestroy(to, from, next) {
+    this.getNum = null;
   }
 }
 </script>