From 45ad8d15b548bf9c71137effe120354ad5dec8c9 Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@geedgenetworks.com>
Date: Mon, 1 Apr 2024 15:00:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20CN-1592=20=20UI=20=E6=96=B0=E5=A2=9ETag?=
 =?UTF-8?q?=E6=A3=80=E7=B4=A2=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/components/index.scss          |   1 +
 src/assets/css/components/views/tag/tag.scss  | 261 ++++++
 src/components/table/tag/TagTable.vue         | 771 ++++++++++++++++++
 src/permission.js                             |   2 +
 src/utils/constants.js                        |  30 +
 .../NetworkOverviewPerformanceEvent.vue       |   8 +-
 src/views/tag/Tag.vue                         | 394 +++++++++
 7 files changed, 1465 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/css/components/views/tag/tag.scss
 create mode 100644 src/components/table/tag/TagTable.vue
 create mode 100644 src/views/tag/Tag.vue

diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss
index 3879a517..7761e294 100644
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -44,6 +44,7 @@
 @import './views/charts/chartMap';
 @import 'views/charts/chartRelationShipList';
 @import 'views/report/report';
+@import 'views/tag/tag';
 @import 'components/rightBox/report/reportBox';
 
 @import './views/charts2/panel';
diff --git a/src/assets/css/components/views/tag/tag.scss b/src/assets/css/components/views/tag/tag.scss
new file mode 100644
index 00000000..abb2c6eb
--- /dev/null
+++ b/src/assets/css/components/views/tag/tag.scss
@@ -0,0 +1,261 @@
+.cn-tag {
+  background: #fff;
+  margin: 10px;
+  height: calc(100% - 20px) !important;
+  display: flex;
+  flex-direction: row;
+  .cn-tag-right {
+    flex: 1;
+    .list-page .main-container {
+      padding: 0;
+
+      .cn-table {
+        height: calc(100% - 62px) !important;
+
+        .el-table--fit.el-table--border {
+          height: calc(100% - 55px) !important;
+        }
+        .el-table__header th:first-of-type {
+          border-right: none;
+        }
+        .has-gutter .el-table-column--selection .el-checkbox {
+          border-left: none;
+          display: none;
+        }
+        .el-scrollbar__bar.is-vertical {
+          z-index: 1000;
+        }
+        .el-table__row .el-table-column--selection .cell {
+          padding: 0;
+        }
+        .el-table__row.expanded {
+          td {
+            border-bottom: none;
+          }
+        }
+        .el-table__body-wrapper {
+          .el-table__expanded-cell {
+            z-index: 100;
+          }
+        }
+        .el-table__fixed,
+        .el-table__fixed-right {
+          .el-table__expanded-cell {
+            visibility: hidden;
+          }
+        }
+        .el-table__expanded-cell {
+          .down {
+            margin-left: 32px;
+            height: 100%;
+            width: calc(100% - 32px);
+            background: #fff; //盖住fixed产生的阴影
+            :deep .is-leaf {
+              color: #1b2e3b;
+              background: #ebeef5;
+            }
+            .el-range-editor--small.el-input__wrapper {
+              height: 32px;
+              line-height: 32px;
+            }
+            .cn-detection__footer {
+              text-align: center;
+              display: flex;
+              justify-content: center;
+              .el-pagination__jump {
+                margin-left: 3px;
+              }
+              .el-pagination__goto {
+                display: none;
+              }
+              .el-input--small {
+                width: 46px !important;
+                .el-input__wrapper {
+                  height: 22px;
+                }
+              }
+              .el-pagination--small {
+                .btn-prev {
+                  margin-right: 10px;
+                }
+                .btn-next {
+                  margin-left: 10px;
+                }
+                &span {
+                  color: $--color-text-primary;
+                }
+              }
+            }
+          }
+          .block.drop-down-time {
+            margin: 15px 0 14px 0;
+            .el-date-editor {
+              justify-content: center;
+              .el-range-separator {
+                width: 24px;
+              }
+              .el-input__icon.el-range__close-icon {
+                display: none;
+              }
+            }
+          }
+          .expand {
+            min-height: 95px;
+            display: flex;
+            flex-wrap: wrap;
+            position: relative;
+            .panel-chart__no-data {
+              line-height: 95px;
+            }
+            .expand-cell {
+              display: flex;
+              background: #FFFFFF;
+              border: 1px solid #E7EAED;
+              border-radius: 2px;
+              margin: 0 12px 16px 0;
+              width: 300px;
+              height: 97px;
+              .expand-right {
+                background: #F9F9F9;
+                border-radius: 2px;
+                width: 97px;
+                height: 94px;
+                position: relative;
+                .demo-progress {
+                  position: absolute;
+                  top: 21px;
+                  left: 18.5px;
+                }
+                .demo-progress,.demo-progress .el-progress-circle {
+                  width: 57px !important;
+                  height: 57px !important;
+                }
+              }
+              .expand-left {
+                text-align: center;
+                width: calc(100% - 97px);
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                .expand-name {
+                  font-size: 12px;
+                  color: #666666;
+                  font-weight: 400;
+                  margin-bottom: 4px;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  i {
+                    padding: 2px 3px 0 0;
+                  }
+                }
+                .expand-time {
+                  font-size: 12px;
+                  color: #666666;
+                  margin-bottom: 4px;
+                  div:nth-of-type(1) {
+                    font-size: 12px;
+                    color: #999999;
+                  }
+                }
+                .expand-icon {
+                  display: flex;
+                  justify-content: space-evenly;
+                  margin: 0 8px;
+                  font-size: 14px;
+                  .table-operation-item--no-border {
+                    cursor: pointer;
+                    position: relative;
+                    font-size: 16px;
+                  }
+                  .table-operation-item--disabled {
+                    cursor: not-allowed;
+                    filter: grayscale(1);
+                    opacity: .6;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    .table-operation-all {
+      width: 300px;
+      position: absolute;
+      bottom: 17px;
+      z-index: 2;
+      left: 20px;
+      line-height: 24px;
+      height: 24px;
+      display: flex;
+      .el-checkbox {
+        width: 14px;
+        height: 14px;
+        padding: 0;
+        .el-checkbox__input,.el-checkbox__inner {
+          width: 100%;
+          height: 100%;
+          min-width: unset;
+        }
+      }
+      .table-operation-all-span {
+        height: 24px;
+        display: flex;
+        span {
+          margin: 0 10px;
+          font-size: 14px;
+          color: #666666;
+          letter-spacing: 0;
+          font-weight: 400;
+        }
+        .table-operation-back-down {
+          font-weight: 500;
+          height: 24px;
+          background: #D7D7D7;
+          border-radius: 2px;
+          cursor: not-allowed;
+          span {
+            margin: 3px 8px;
+            font-size: 12px;
+            color: #FFFFFF;
+          }
+        }
+        .table-operation-back-down div {
+          color: #FFFFFF;
+          height: 24px;
+          background: #D7D7D7;
+          border-radius: 2px;
+          i {
+            font-size: 25px;
+            top: calc(50% - 12px);
+          }
+        }
+        .table-operation-back-down.table-operation-all-checkbox {
+          background: #0091ff;
+          cursor: pointer;
+         }
+        .table-operation-back-down.table-operation-all-loading {
+          background: #D7D7D7;
+         }
+      }
+    }
+    .table-operation-items {
+      .table-operation-item--no-border {
+        margin-right: 16px;
+        cursor: pointer;
+        position: relative;
+        font-size: 16px;
+      }
+      .table-operation-item--no-border:last-of-type {
+        margin-right: 0;
+      }
+      .table-operation-item--no-border {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        position: relative;
+      }
+    }
+  }
+}
diff --git a/src/components/table/tag/TagTable.vue b/src/components/table/tag/TagTable.vue
new file mode 100644
index 00000000..15c9d83b
--- /dev/null
+++ b/src/components/table/tag/TagTable.vue
@@ -0,0 +1,771 @@
+<template>
+  <el-table
+      id="tagTable"
+      ref="dataTable"
+      :header-cell-class-name="headerCellClass"
+      :data="tableData"
+      :expand-row-keys="expandedIds"
+      empty-text=" "
+      tooltip-effect="light"
+      :row-key="(row) => { return row.id }"
+      :reserve-selection="true"
+      @header-dragend="dragend"
+      @sort-change="tableDataSort"
+      @expand-change="dropExpandChange"
+      @selection-change="selectionChange"
+    >
+      <el-table-column type="expand" width="30">
+        <template #default="props">
+          <div class="down">
+            <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">
+              <loading :loading="loadingDown"></loading>
+              <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('tag.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="tagOperation(['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="tagOperation(['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>
+        </template>
+      </el-table-column>
+      <el-table-column
+          :resizable="false"
+          align="center"
+          type="selection"
+          width="30">
+      </el-table-column>
+      <el-table-column
+          v-for="item in customTableTitles"
+          :key="item.prop"
+          :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>{{ getCategoryName(scope.row.categoryId) }}</span>
+          </span>
+          <span v-else-if="item.prop === 'timePlan'">
+            <template v-if="scope.row.config && scope.row.config.isScheduler === 0">
+              {{ $t('tag.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('tag.daily') }}
+                      </template>
+                      <template v-else-if="scope.row.config.schedulerConfig.type === 'week'">
+                        {{ $t('tag.weekly') }}
+                      </template>
+                      <template v-else-if="scope.row.config.schedulerConfig.type === 'month'">
+                        {{ $t('tag.monthly') }}
+                      </template>
+                      <template v-else-if="scope.row.config.schedulerConfig.type === ''">
+                        {{ $t('tag.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('tag.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('tag.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('tag.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('tag.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>
+      <template v-slot:empty >
+        <div class="table-no-data" v-if="isNoData">
+          <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+        </div>
+      </template>
+  </el-table>
+</template>
+
+<script>
+import table from '@/mixins/table'
+import Loading from '@/components/common/Loading'
+import axios from 'axios'
+import { api } from '@/utils/api'
+import { storageKey } from '@/utils/constants'
+import { urlParamsHandler, overwriteUrl, headerCellClass } from '@/utils/tools'
+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'
+import { parseInt } from 'lodash'
+
+export default {
+  name: 'tagTable',
+  mixins: [table],
+  components: {
+    ChartNoData,
+    Loading,
+    chartDetectionPagination
+  },
+  props: {
+    categoryList: Array,
+    toolsLoading: Boolean,
+    categoryId: Number,
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
+  inject: ['reload'],
+  data () {
+    return {
+      format: localStorage.getItem(storageKey.dateFormat),
+      username: localStorage.getItem(storageKey.username),
+      tableTitle: [ // 原始table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 50
+        }, {
+          label: this.$t('config.user.name'),
+          prop: 'name',
+          show: true,
+          minWidth: 200,
+          sortable: 'custom'
+        }, {
+          label: this.$t('tag.categoryType'),
+          prop: 'categoryId',
+          show: true,
+          minWidth: 180
+        }, {
+          label: this.$t('tag.timeLimit'),
+          prop: 'timeLimit',
+          show: true,
+          minWidth: 110
+        }, {
+          label: this.$t('tag.timePlan'),
+          prop: 'timePlan',
+          show: true,
+          minWidth: 110
+        }, {
+          label: this.$t('tag.operationUserName'),
+          prop: 'userName',
+          show: true,
+          minWidth: 70
+        }, {
+          label: this.$t('tag.resultCount'),
+          prop: 'total',
+          show: true,
+          minWidth: 50
+        }, {
+          label: this.$t('tag.lastExecutionTime'),
+          prop: 'lastTime',
+          show: true,
+          width: 170,
+          sortable: 'custom'
+        }
+      ],
+      checkboxAll: false,
+      isIndeterminate: false,
+      checkboxIds: {},
+      batchDow: false,
+      builtinId: '',
+      indeterminate: false,
+      loading: false,
+      loadingDown: false,
+      loadingTableId: '',
+      loadingPreviewId: '',
+      downDataList: [],
+      disableEdit: false, // 编辑按钮是否不可用，当选择多条记录的时候你，编辑按钮不可用
+      // pageObj: {
+      //   pageNo: 1,
+      //   pageSize: 20,
+      //   total: 0,
+      //   resetPageNo: true
+      // },
+      // expandedIds: [],
+      interval: null,
+      typeMappings: [
+        {
+          key: 'day',
+          value: this.$t('tag.daily')
+        },
+        {
+          key: 'week',
+          value: this.$t('tag.weekly')
+        },
+        {
+          key: 'month',
+          value: this.$t('tag.monthly')
+        },
+        {
+          key: '',
+          value: this.$t('tag.oneTime')
+        }
+      ],
+      typeUnitMappings: [
+        {
+          key: 'day',
+          value: this.$t('tag.days')
+        },
+        {
+          key: 'week',
+          value: this.$t('tag.week')
+        },
+        {
+          key: 'month',
+          value: this.$t('tag.months')
+        }
+      ],
+      scheduleTypeList: tag.scheduleTypeList,
+      weekdayList: tag.weekdayList,
+      monthList: tag.monthList,
+      weekOptions: tag.weekOptions,
+      configPeriod: '',
+      configCustom: '',
+      selectIds: [], // 单行选中的id列表
+      initExpandFlag: false // 初始化时单行展开标志，false是未展开，true展开
+    }
+  },
+  /**
+   * 添加vue3的setup，目的是添加/获取地址栏的参数
+   */
+  setup () {
+    const { startTime, endTime } = getNowTime(60 * 24 * 30)
+    const timeRange = ref([startTime, endTime])
+
+    const { query } = useRoute()
+
+    // 展开行的id列表，只展开一行
+    const expandedId = []
+    if (query.expandId) {
+      expandedId.push(parseInt(query.expandId))
+    }
+    const expandedIds = ref(expandedId || [])
+    // 展开行的分页信息
+    const tempPageObj = {
+      pageNo: 1,
+      pageSize: 20,
+      total: 0,
+      resetPageNo: true
+    }
+
+    let pageNo = query.expandPage
+    if (pageNo !== undefined) {
+      pageNo = parseInt(pageNo)
+      if (pageNo > 1) {
+        tempPageObj.pageNo = pageNo
+      }
+    } else {
+      pageNo = 1
+    }
+    const pageObj = ref(tempPageObj)
+
+    return {
+      timeRange,
+      expandedIds,
+      pageObj
+    }
+  },
+  watch: {
+    tableData (newVal, oldVal) {
+      if (newVal) {
+        this.showSelectedRow()
+      }
+    },
+    expandedIds (newVal, oldVal) {
+      if (newVal !== undefined && newVal.length > 0) {
+        const expandIdParam = {
+          expandId: newVal[0]
+        }
+        this.reloadUrl(expandIdParam)
+
+        if (this.initExpandFlag) {
+          const expandPage = {
+            expandPage: 1
+          }
+          this.reloadUrl(expandPage)
+        }
+
+        const dateParam = {
+          startTime: dateFormatToUTC(this.timeRange[0]),
+          endTime: dateFormatToUTC(this.timeRange[1])
+        }
+        this.reloadUrl(dateParam)
+      } else {
+        // 删除地址栏参数，然后删除缓存
+        const newQuery = this.$route.query // 深拷贝路由数据
+        delete newQuery.expandId
+        delete newQuery.expandPage
+        delete newQuery.startTime
+        delete newQuery.endTime
+        this.reloadUrl(newQuery, 'cleanOldParams')
+      }
+    },
+    timeRange (newVal, oldVal) {
+      if (newVal) {
+        const dateParam = {
+          startTime: dateFormatToUTC(newVal[0]),
+          endTime: dateFormatToUTC(newVal[1])
+        }
+        this.reloadUrl(dateParam)
+      }
+    }
+  },
+  computed: {
+    handleTimeRange () {
+      return function (row) {
+        let str = ''
+        if (row.config && row.config.timeConfig && row.config.timeConfig.type) {
+          str += row.config.timeConfig.type
+          if (['today', 'yesterday', 'this', 'customize'].indexOf(row.config.timeConfig.type) === -1 && row.config.timeConfig.offset) {
+            str += ` ${row.config.timeConfig.offset} ${row.config.timeConfig.unit}`
+          }
+        }
+        return str
+      }
+    },
+    computePercent () {
+      return function (item) {
+        if (item.state === 2) {
+          return 'Failed'
+        }
+        if (item.percent === 1) {
+          if (localStorage.getItem(storageKey.s3Enable) == 1) {
+            if (item.state === 1 && item.upload === 1) {
+              return 100
+            } else {
+              return 99.99
+            }
+          } else {
+            if (item.state === 1) {
+              return 100
+            } else {
+              return 99.99
+            }
+          }
+        } else {
+          return parseFloat(item.percent * 100).toFixed(2)
+        }
+      }
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.expandTable()
+    })
+  },
+  methods: {
+    headerCellClass,
+    /**
+     * 进入页面判断是否需要展开表格
+     * 即展开表格后刷新界面，保持展开效果
+     */
+    expandTable () {
+      const expandInfo = this.expandedIds
+
+      if (expandInfo !== undefined && expandInfo.length > 0) {
+        const obj = {
+          id: expandInfo[0]
+        }
+
+        this.dropExpandChange(obj, expandInfo, 'init')
+
+        setTimeout(() => {
+          this.initExpandFlag = true
+        }, 1500)
+      }
+    },
+    /**
+     * 显示选中的行，即分页后依旧显示
+     */
+    showSelectedRow () {
+      const selectIds = this.selectIds
+
+      this.$nextTick(() => {
+        if (selectIds.length > 0) {
+          this.tableData.forEach(item => {
+            if (selectIds.includes(item.id)) {
+              this.$refs.dataTable.toggleRowSelection(item)
+            }
+          })
+        }
+      })
+    },
+    getJobStatus (tag) {
+      if (tag.state === 1 && tag.upload === 1) {
+        return this.$t('overall.completed')
+      } else {
+        return this.$t('overall.inProgress')
+      }
+    },
+    tagOperation (arr) {
+      if (arr[1].percent === 1) {
+        this.tableOperation(arr)
+      }
+    },
+    /**
+     * 单行选中
+     */
+    selectionChange (objs) {
+      this.$emit('selectionChange', objs)
+      this.checkboxIds.id = objs.map(item => {
+        return item.id
+      }).join(',')
+
+      this.batchDow = objs.length > 0
+
+      this.checkboxAll = objs.length === this.tableData.length
+      this.isIndeterminate = objs.length > 0 && objs.length < this.tableData.length
+
+      // 选中状态回显
+      const selectIds = []
+      if (objs.length > 0) {
+        objs.forEach(item => {
+          selectIds.push(item.id)
+        })
+        // this.selectIds = selectIds
+      }
+      this.batchDeleteObjs = objs
+      if (objs.length > 1) {
+        this.disableEdit = true
+      } else {
+        this.disableEdit = false
+      }
+    },
+    /**
+     * 全选按钮
+     */
+    selectAll (objs) {
+      const selectIds = []
+      this.isIndeterminate = false
+
+      if (objs) {
+        objs.forEach(item => {
+          this.$refs.dataTable.toggleAllSelection(item)
+          // this.checkboxAll = true;
+          selectIds.push(item.id)
+        })
+      } else {
+        this.$refs.dataTable.clearSelection()
+      }
+
+      this.batchDeleteObjs = objs
+      if (objs.length > 1) {
+        this.disableEdit = true
+      } else {
+        this.disableEdit = false
+      }
+
+      // this.selectIds = selectIds
+    },
+    /**
+     * 向地址栏添加/删除参数
+     */
+    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)
+      }
+      overwriteUrl(newUrl)
+    },
+    /**
+     * 表格左侧点击展开收起
+     */
+    dropExpandChange (row, expandedRows, flag) {
+      this.expandedIds = []
+      clearInterval(this.interval)
+      if (expandedRows.length > 0 && row) {
+        this.expandedIds.push(row.id)
+        if (flag === undefined) {
+          this.pageObj.pageNo = 1
+        }
+
+        this.datePickerChange(row)
+      }
+    },
+    datePickerChange (row, show) {
+      if (!show) {
+        if (this.pageObj.pageNo <= 1) {
+          this.pageObj.pageNo = 1
+        }
+      }
+      const param = {
+        tempId: row.id,
+        startTime: dateFormatToUTC(this.timeRange[0]),
+        endTime: dateFormatToUTC(this.timeRange[1]),
+        ...this.pageObj
+      }
+      this.dropDownQueryChange(param)
+    },
+    dropDownQueryChange (param) {
+      this.loadingDown = true
+      this.downDataList = []
+      axios.get(api.reportJob, { params: param }).then(res => {
+        if (res.status === 200) {
+          this.downDataList = res.data.data.list
+          this.pageObj.total = res.data.data.total
+          this.$nextTick(() => {
+            this.$refs.dataTable.doLayout()
+          })
+        }
+        this.loadingDown = false
+        const showInterval = this.downDataList.find(item => item.percent !== 1 && item.state !== 2)
+        if (this.downDataList && showInterval) {
+          this.intervalChange(param)
+        }
+      })
+    },
+    dataConversionProcessing (param) {
+      axios.get(api.reportJob, { params: param }).then(res => {
+        if (res.status === 200) {
+          this.downDataList = res.data.data.list
+          this.pageObj.total = res.data.data.total
+        }
+      })
+    },
+    downDeleteQueryChange (row, props) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        axios.delete(api.reportJob + '?ids=' + row.id).then(response => {
+          if (response.status === 200) {
+            this.delFlag = true
+            this.$message({
+              duration: 2000,
+              type: 'success',
+              message: this.$t('tip.deleteSuccess')
+            })
+            this.dropDownQueryChange({ tempId: props.row.id })
+            this.$emit('reload')
+          } else {
+            this.$message.error(response.data.message)
+          }
+        })
+      }).catch(() => {})
+    },
+    pageJump (val) {
+      this.pageObj.pageNo = val
+      if (this.expandedIds.length > 0) {
+        this.datePickerChange({ id: this.expandedIds[0] }, true)
+      }
+    },
+    intervalChange (param) {
+      clearInterval(this.interval)
+      this.interval = setInterval(() => {
+        // 通过深拷贝，触发watch监听到timeRange，也可使用$set进行触发
+        this.timeRange = JSON.parse(JSON.stringify(this.timeRange))
+        this.timeRange[1] = this.timeRange[1] + 30000
+        param.endTime = dateFormatToUTC(this.timeRange[1])
+        this.dataConversionProcessing(param)
+      }, 30000)
+    },
+    handleConfigArray (array, list) {
+      const group = []
+      array.forEach(item => {
+        const matchItem = list.find(m => m.value === item)
+        if (matchItem) {
+          group.push(this.$t(matchItem.name))
+        }
+      })
+      return group.toString()
+    },
+    handleConfig (row) {
+      this.handleConfigPeriod(row)
+      this.handleConfigCustom(row)
+    },
+    handleConfigPeriod (row) {
+      let str = ''
+      if (row.config && row.config.schedulerConfig) {
+        const type = row.config.schedulerConfig.type
+        if (type === '') {
+          str = this.$t('tag.oneTime')
+        } else { // isRepeat=1 每天，每周，每月
+          const period = this.typeMappings.find(m => m.key === type)
+          const interval = row.config.schedulerConfig.interval
+          const months = row.config.schedulerConfig.months
+          if (interval > 1) {
+            const unit = this.typeUnitMappings.find(m => m.key === type)
+            if (unit) {
+              str = this.$t('tag.every') + '   ' + interval + '   ' + unit.value
+            } else {
+              str = '-'
+            }
+          } else if (interval === 1) {
+            if (type === this.scheduleTypeList[2].value) { // 月
+              if (this.$_.isEmpty(months)) { // 空代表循环
+                str = period.value
+              } else { // 非空代表不循环
+                str = this.handleConfigArray(months, this.monthList)// X月，Y月
+              }
+            } else if (period) {
+              str = period.value
+            } else {
+              str = '-'
+            }
+          }
+        }
+      }
+      this.configPeriod = str
+    },
+    handleConfigCustom (row) {
+      let str = ''
+      if (row.config && row.config.schedulerConfig) {
+        const type = row.config.schedulerConfig.type
+        if (type === '') { // 单次
+          str = '-'
+        } else { // 每日，每周，每月
+          const period = this.typeMappings.find(m => m.key === type)
+          if (type === this.scheduleTypeList[0].value) { // 日
+            str = '-'
+          } else if (type === this.scheduleTypeList[1].value) { // 周
+            const weekDates = row.config.schedulerConfig.weekDates
+            str = this.handleConfigArray(weekDates, this.weekdayList)
+          } else if (type === this.scheduleTypeList[2].value) { // 月
+            const monthDates = row.config.schedulerConfig.monthDates// 日期
+            const monthWeekDates = row.config.schedulerConfig.monthWeekDates// 哪几周
+            const weekDates = row.config.schedulerConfig.weekDates// 周几
+            if (!this.$_.isEmpty(monthDates)) {
+              str = this.$t('tag.date') + '-' + monthDates
+            } else {
+              if (!this.$_.isEmpty(monthWeekDates)) {
+                str += this.$t('tag.week') + '-' + this.handleConfigArray(monthWeekDates, this.weekOptions)
+              }
+              if (!this.$_.isEmpty(weekDates)) {
+                str += '    ' + this.handleConfigArray(weekDates, this.weekdayList)
+              }
+            }
+          } else {
+            str = '-'
+          }
+        }
+      }
+      this.configCustom = str
+    },
+    getCategoryName (id) {
+      let name = '-'
+      for (let i = 0; i < this.categoryList.length; i++) {
+        if (id === this.categoryList[i].id) {
+          name = this.categoryList[i].name
+          break
+        }
+      }
+      return name
+    }
+  },
+  beforeUnmount () {
+    clearInterval(this.interval)
+  }
+}
+</script>
diff --git a/src/permission.js b/src/permission.js
index d18e9e32..d3ce16f5 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -162,6 +162,8 @@ export function handleComponent (code) {
       return () => import('@/views/detections/detectionPolicies/PolicyForm')
     case 'report':
       return () => import('@/views/report/Report')
+    //case 'tag':
+      //return () => import('@/views/tag/Tag')
     case 'knowledgeBase':
       return () => import('@/views/setting/KnowledgeBase')
     case 'userDefinedLibrary':
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 547be9ad..fe474acd 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -311,6 +311,36 @@ export const metricOptions = [
   }
 ]
 
+export const tagIntentOptions = [
+  {
+    value: 'Malicious',
+    label: 'tag.intent.malicious'
+  },
+  {
+    value: 'Benign',
+    label: 'tag.intent.benign'
+  },
+  {
+    value: 'Unknown',
+    label: 'tag.intent.unknown'
+  }
+]
+
+export const tagCategoryOptions = [
+  {
+    value: 'Malicious',
+    label: 'tag.intent.malicious'
+  },
+  {
+    value: 'Benign',
+    label: 'tag.intent.benign'
+  },
+  {
+    value: 'Unknown',
+    label: 'tag.intent.unknown'
+  }
+]
+
 export const metricType = {
   Bits: 'Bits/s',
   Packets: 'Packets/s',
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
index b2f1d14a..e7987048 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
@@ -167,8 +167,12 @@ export default {
       })
     },
     resize () {
-      this.myChart.resize()
-      this.myChart2.resize()
+      if(this.myChart) {
+        this.myChart.resize()
+      }
+      if(this.myChart2) {
+        this.myChart2.resize()
+      }
     }
   },
   computed: {
diff --git a/src/views/tag/Tag.vue b/src/views/tag/Tag.vue
new file mode 100644
index 00000000..9b79898a
--- /dev/null
+++ b/src/views/tag/Tag.vue
@@ -0,0 +1,394 @@
+<template>
+  <div class="cn-tag">
+    <div class="cn-tag-right">
+      <cn-data-list
+          ref="dataList"
+          :tableId="tableId"
+          v-model:custom-table-title="tools.customTableTitle"
+          :api="url"
+          :from="fromRoute.builtinReport"
+          :layout="['search']"
+          @search="search"
+      >
+        <template #top-tool-left>
+          <button id="account-add"  class="top-tool-btn margin-r-10 top-tool-btn--create"
+                  v-if="hasPermission('createReport')"
+                  @click="add">
+            <i class="cn-icon-xinjian cn-icon"></i>
+            <span>{{$t('overall.create')}}</span>
+          </button>
+          <button id="tag-edit"  class="top-tool-btn margin-r-10" :disabled="disableEdit"
+                  v-if="hasPermission('editReport')"
+                  @click="editReport">
+            <i class="cn-icon-edit cn-icon"></i>
+            <span>{{$t('overall.edit')}}</span>
+          </button>
+          <button id="tag-delete"  class="top-tool-btn margin-r-10" :disabled="disableDelete"
+                  v-if="hasPermission('deleteReport')"
+                  @click="delBatch">
+            <i class="cn-icon-delete cn-icon"></i>
+            <span>{{$t('overall.delete')}}</span>
+          </button>
+          <el-select
+                  key="intentSelect"
+                  size="small"
+                  v-model="intent"
+                  placeholder=" "
+                  :teleported="false"
+                  style="width:135px;margin-right:10px;"
+                  @change="intentChange"
+          >
+            <template #prefix>
+              <span class="select-prefix">{{$t('tag.intent')}}:</span>
+            </template>
+            <el-option v-for="item in tagIntentOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
+          </el-select>
+          <el-select
+                  key="categorySelect"
+                  size="small"
+                  v-model="category"
+                  placeholder=" "
+                  :teleported="false"
+                  style="width:150px;margin-right:10px;"
+                  @change="categoryChange"
+          >
+            <template #prefix>
+              <span class="select-prefix">{{$t('tag.category')}}:</span>
+            </template>
+            <el-option v-for="item in tagCategoryOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
+          </el-select>
+        </template>
+        <template #default>
+          <loading :loading="loading"></loading>
+          <report-table
+              ref="dataTable"
+              :api="url"
+              :isNoData="isNoData"
+              :custom-table-title="tools.customTableTitle"
+              :category-list="builtinReportLeftMenu"
+              :height="mainTableHeight"
+              :table-data="tableData"
+              :category-id="builtinId"
+              @delete="del"
+              @edit="edit"
+              @download="download"
+              @preview="preview"
+              @orderBy="tableDataSort"
+              @reload="getTableData"
+              @selectionChange="selectionChange"
+          />
+        </template>
+        <template #pagination>
+          <pagination ref="pagination" :page-obj="pageObj" :tableData="tableData" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+        </template>
+      </cn-data-list>
+      <el-drawer
+          v-model="rightBox.show"
+          direction="rtl"
+          custom-class="common-right-box"
+          class="common-right-box"
+          :size="700"
+          :with-header="false"
+          destroy-on-close>
+        <report-box
+            :object="object"
+            :category-list="builtinReportLeftMenu"
+            :current-category-id="builtinId"
+            @close="closeRightBox"
+        />
+      </el-drawer>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import ReportTable from '@/components/table/report/ReportTable'
+import cnDataList from '@/components/table/CnDataList'
+import dataListMixin from '@/mixins/data-list'
+import { api } from '@/utils/api'
+import { tagIntentOptions,tagCategoryOptions } from '@/utils/constants'
+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',
+  data () {
+    return {
+      builtinReportLeftMenu: [], // 左侧列表菜单数据
+      builtinColor: false,
+      // builtinId: '',
+      url: api.reportTemp,
+      tagIntentOptions,
+      tagCategoryOptions,
+      blankObject: {
+        id: '',
+        name: '',
+        type: '',
+        source: 'session_record_cn',
+        cTime: '',
+        uTime: '',
+        remark: '',
+        config: {
+          isRepeat: 0,
+          isScheduler: 0,
+          cronExpression: '',
+          startTime: '',
+          endTime: '',
+          queryParam: {},
+          schedulerConfig: {
+            type: 'day',
+            weekDates: [],
+            months: [],
+            monthDates: [],
+            monthWeekDates: [],
+            interval: 1
+          },
+          timeConfig: {
+            type: 'yesterday',
+            offset: 1,
+            unit: 'hour'
+          }
+        },
+        schedulerStart: '',
+        schedulerEnd: '',
+        categoryId: '',
+        categoryParams: []
+      },
+      checkWeekListData: [
+        'report.sunday',
+        'report.monday',
+        'report.tuesday',
+        'report.wednesday',
+        'report.thursday',
+        'report.friday',
+        'report.saturday'
+      ],
+      checkMonthsListData: [
+        'report.january',
+        'report.february',
+        'report.march',
+        'report.april',
+        'report.may',
+        'report.june',
+        'report.july',
+        'report.august',
+        'report.september',
+        'report.october',
+        'report.november',
+        'report.december'
+      ],
+      tableId: 'reportTable',
+      builtinLeftLoading: false,
+      // builtinRightLoading: false,
+      isInit: true,
+      intent:'All',
+      category:'All',
+    }
+  },
+  /**
+   * 添加vue3的setup，目的是添加/获取地址栏的参数
+   */
+  setup () {
+    const { query } = useRoute()
+    const builtinId = ref(parseInt(query.categoryId) || '')
+    const urlPageNo = ref(parseInt(query.pageNo) || 1)
+
+    return {
+      builtinId,
+      urlPageNo
+    }
+  },
+  mixins: [dataListMixin],
+  components: {
+    Loading,
+    cnDataList,
+    ReportTable,
+    ReportBox
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.queryGetTempData()
+    })
+  },
+  watch: {
+    builtinId (n) {
+      const { query } = this.$route
+      let newUrl = urlParamsHandler(window.location.href, query, {
+        categoryId: n,
+        pageNo: 1,
+        pageSize: 20
+      })
+
+      // 点击“全部”或者首次进入界面时，不显示左侧菜单栏参数
+      const newQuery = JSON.parse(JSON.stringify(query)) // 深拷贝路由数据
+
+      if (n === null) {
+        delete newQuery.categoryId
+      } else {
+        delete newQuery.startTime
+        delete newQuery.endTime
+        delete newQuery.expandId
+        delete newQuery.expandPage
+        delete newQuery.pageNo
+        delete newQuery.pageSize
+      }
+
+      newUrl = urlParamsHandler(window.location.href, query, newQuery, 'clean')
+
+      overwriteUrl(newUrl)
+    }
+  },
+  methods: {
+    intentChange (value) {
+
+    },
+    categoryChange (value) {
+
+    },
+    queryGetTempData () {
+      this.builtinLeftLoading = true
+      axios.get(api.reportCategory, { params: { pageSize: 999 } }).then(res => {
+        if (res.status === 200) {
+          this.builtinReportLeftMenu = res.data.data.list.map(c => {
+            return {
+              ...c,
+              config: c.config ? JSON.parse(c.config) : {}
+            }
+          })
+
+          if (this.builtinId !== '') {
+            this.builtinTabs(this.builtinId, 'init')
+          } else {
+            this.getTableData()
+          }
+        }
+        this.builtinLeftLoading = false
+      })
+    },
+    tableDataSort (orderBy) {
+      this.searchLabel.orderBy = orderBy
+      this.getTableData(this.searchLabel)
+    },
+    getTableData (params) {
+      this.searchLabel = null
+      if (params) {
+        this.searchLabel = { ...this.searchLabel, ...params }
+      }
+      this.searchLabel = { ...this.searchLabel, ...this.pageObj }
+      // this.tools.loading = true
+      // this.builtinRightLoading = true
+      // this.loading = true
+      this.isNoData = false
+      // this.tableData = []
+      this.toggleLoading(true)
+      delete this.searchLabel.total
+      let listUrl = this.url
+      if (this.listUrl) {
+        listUrl = this.listUrl
+      }
+
+      if (this.builtinId !== '') {
+        this.searchLabel.categoryId = this.builtinId
+      }
+
+      if (!this.isInit) {
+        axios.get(listUrl, { params: this.searchLabel }).then(response => {
+          if (response.status === 200) {
+            for (let i = 0; i < response.data.data.list.length; i++) {
+              response.data.data.list[i].status = response.data.data.list[i].status + ''
+            }
+            this.$nextTick(() => {
+              this.tableData = response.data.data.list.map(item => {
+                return {
+                  ...item,
+                  config: item.config ? JSON.parse(item.config) : {}
+                }
+              })
+              this.pageObj.total = response.data.data.total
+              this.isNoData = !this.tableData || this.tableData.length === 0
+            })
+            // TODO 回到顶部
+          } else {
+            this.isNoData = true
+          }
+        }).finally(() => {
+          this.toggleLoading(false)
+        })
+      }
+      this.isInit = false
+    },
+    /**
+     * 点击左侧tab页
+     */
+    builtinTabs (id, flag) {
+      this.builtinId = id
+      if (flag === undefined) {
+        this.pageObj.pageNo = 1
+        this.pageObj.pageSize = 20
+      }
+      this.getTableData({ categoryId: id })
+    },
+    edit (u) {
+      this.initConfig(u)
+      this.object = u
+      this.rightBox.show = true
+    },
+    editReport () {
+      if (this.batchDeleteObjs.length === 0) {
+        this.$alert(this.$t('tip.pleaseSelectForEdit'), {
+          confirmButtonText: this.$t('tip.yes'),
+          type: 'warning'
+        }).catch(() => {})
+      } else {
+        const curRecord = this.batchDeleteObjs[0]
+        this.initConfig(curRecord)
+        this.object = curRecord
+        this.rightBox.show = true
+      }
+    },
+    initConfig (u) {
+      if (!u.config) {
+        u.config = {
+          isRepeat: 0,
+          cronExpression: '',
+          startTime: '',
+          endTime: '',
+          queryParam: {},
+          schedulerConfig: {
+            type: 'day',
+            weekDates: [],
+            months: [],
+            monthDates: [],
+            monthWeekDates: [],
+            interval: 1
+          },
+          timeConfig: {
+            type: 'yesterday',
+            offset: 1,
+            unit: ''
+          }
+        }
+      } else if (!u.config.schedulerConfig) {
+        u.config.schedulerConfig = {
+          type: 'day',
+          weekDates: [],
+          months: [],
+          monthDates: [],
+          monthWeekDates: [],
+          interval: 1
+        }
+      } else if (!u.config.timeConfig) {
+        u.config.timeConfig = {
+          type: 'yesterday',
+          offset: 1,
+          unit: ''
+        }
+      }
+    }
+  }
+}
+</script>