feat: CN-1592 UI 新增Tag检索界面:列表部分

src/assets/css/components/views/tag/tag.scss

@@ -98,9 +98,33 @@
                 display: none;
               }
             }
+
+            .tag-dropdown{
+              align-items: center;
+              width: 100%;
+              height: 24px;
+              justify-content: center;
+              line-height: 24px;
+              padding: 0px 6px;
+              span {
+                margin-right: 6px;
+              }
+              i {
+                font-size: 12px;
+              }
+            }
+            .tag-dropdown:hover,.tag-dropdown__active {
+              cursor:pointer;
+              //background: rgba(113,113,113,0.10);
+              box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+              border-radius: 2px;
+              i {
+                font-size: 12px;
+              }
+            }
           }
           .expand {
-            min-height: 95px;
+            min-height: 150px;
             display: flex;
             flex-wrap: wrap;
             position: relative;
@@ -110,37 +134,32 @@
             .expand-cell {
               display: flex;
               background: #FFFFFF;
-              border: 1px solid #E7EAED;
+              //border: 1px solid #E7EAED;
               border-radius: 2px;
-              margin: 0 12px 16px 0;
+              margin: 0 12px 6px 0;
-              width: 300px;
+              width: 100%;
-              height: 97px;
+              height: 150px;
-              .expand-right {
+              .expand-left {
-                background: #F9F9F9;
+                //background: #F9F9F9;
-                border-radius: 2px;
+                //border-radius: 2px;
-                width: 97px;
+                width:calc(100% - 200px);
-                height: 94px;
+                height: 150px;
                 position: relative;
-                .demo-progress {
+                .chart-drawing {
-                  position: absolute;
+                  height: 150px;
-                  top: 21px;
+                  width: 100%;
-                  left: 18.5px;
-                }
-                .demo-progress,.demo-progress .el-progress-circle {
-                  width: 57px !important;
-                  height: 57px !important;
                 }
               }
-              .expand-left {
+              .expand-right {
                 text-align: center;
-                width: calc(100% - 97px);
+                width: 200px;
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
-                .expand-name {
+                .expand-count {
-                  font-size: 12px;
+                  font-size: 22px;
                   color: #666666;
-                  font-weight: 400;
+                  font-weight: 700;
                   margin-bottom: 4px;
                   display: flex;
                   align-items: center;
@@ -149,13 +168,15 @@
                     padding: 2px 3px 0 0;
                   }
                 }
-                .expand-time {
+                .expand-observed-Ips {
                   font-size: 12px;
                   color: #666666;
                   margin-bottom: 4px;
                   div:nth-of-type(1) {
                     font-size: 12px;
-                    color: #999999;
+                    color: #35adda;
+                    font-weight: 600;
+                    cursor: pointer;
                   }
                 }
                 .expand-icon {
@@ -259,3 +280,71 @@
     }
   }
 }
+.type-tag {
+  display: inline-block;
+  padding: 0 10px;
+  box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+  border-radius: 12px;
+}
+.unknow {
+  background-color:rgba(119,131,145,0.1) !important;
+  color:rgb(119,131,145)
+}
+.benign {
+  background-color:rgba(116,159,77,0.1) !important;
+  color:rgb(116,159,77)
+}
+.malicious {
+  background-color:rgba(226,97,84,0.1) !important;
+  color:rgb(226,97,84)
+}
+.tag__popper {
+  width: 180px !important;
+  min-width: 180px;
+  max-height:206px;
+  overflow:hidden;
+  padding: 0 !important;
+  background: #963131;
+  border:1px solid #C5C5C5 !important;
+  box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
+  border-radius: 2px !important;
+  .el-row {
+    width: 100% !important;
+  }
+  .selected {
+    color: #0091ff;
+    font-weight: bold;
+  }
+  .el-popper {
+    max-height: 405px;
+  }
+  .select-dropdown {
+    max-height:172px;
+    width:100%;
+    margin: 1px 0px;
+    overflow:auto;
+    list-style: none;
+    padding:4px 0px;
+    box-sizing: border-box;
+    .select-dropdown__item:hover{
+      background-color: #F5F7FA !important;
+    }
+    .select-dropdown__item{
+      width:100%;
+      height:30px;
+      padding:0px 11px;
+      line-height:30px;
+      position: relative;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: #666665;
+      display: list-item;
+      text-align: -webkit-match-parent;
+      box-sizing: border-box;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 400;
+    }
+  }
+}

src/components/table/tag/TagTable.vue

@@ -17,73 +17,49 @@
       <el-table-column type="expand" width="30">
         <template #default="props">
           <div class="down">
-            <div class="block drop-down-time">
+            <div class="block drop-down-time" style="border:0px yellow solid;">
-              <el-date-picker
+              <el-popover placement="bottom-start"
-                  v-model="timeRange"
+                          :ref="`tagPopover${props.row.id}`"
-                  size="small"
+                          :key="`tagPopover${props.row.id}`"
-                  :format="format"
+                          :show-arrow="false"
-                  :clearable="false"
+                          :append-to-body="true"
-                  type="datetimerange"
+                          :hide-after="0"
-                  range-separator="To"
+                          :show-after="0"
-                  :start-placeholder="$t('detections.startTime')"
+                          popper-class="tag__popper"
-                  :end-placeholder="$t('detections.endTime')"
+                          trigger="click">
-                  @change="datePickerChange(props.row)"
+                <template #reference>
-              />
+                  <div class="tag-dropdown" :id="`tagDropdown${props.row.id}`">
+                    <span>{{ curExpendDataType }}</span><i class="cn-icon-down cn-icon"></i>
+                  </div>
+                </template>
+                <el-row type="flex" justify="center" style="width: fit-content;flex-direction: column;">
+                  <ul class="select-dropdown" :id="`tagSelectDropdown${props.row.id}`" >
+                    <li key="uniqueEntityObserved" :id="`uniqueEntityObserved${props.row.id}`" class="select-dropdown__item" @click="uniqueEntityObserved(props.row)" >
+                       <span>{{ $t('tag.uniqueEntityObserved') }}</span>
+                    </li>
+                    <li key="totalIndicators" :id="`totalIndicators${props.row.id}`" class="select-dropdown__item" @click="totalIndicators(props.row)">
+                      <span>{{ $t('tag.totalIndicators') }}</span>
+                    </li>
+                  </ul>
+                </el-row>
+              </el-popover>
             </div>
             <div class="expand">
               <loading :loading="loadingDown"></loading>
-              <chart-no-data v-if="downDataList.length === 0 && !loadingDown"></chart-no-data>
+              <chart-no-data v-if="isNoData && !loadingDown"></chart-no-data>
-              <div class="expand-cell" v-for="(item, index) in downDataList" :key="index">
+              <div class="expand-cell" >
-                <div class="expand-right">
+                <div class="expand-left" style="border:0px red solid;">
-                  <div class="demo-progress">
+                  <div class="chart-drawing" :id="`chart${props.row.id}`"></div>
-                    <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-right" style="border:0px green solid;">
-                  <div class="expand-name"><i class="cn-icon cn-icon-user"></i>{{ username }}</div>
+                  <div class="expand-count">{{observedCount}}</div>
-                  <div class="expand-time">
+                  <div class="expand-observed-Ips"  @click="toEntityList(props.row)">
-                    <div>{{ $t('tag.creationTime') }}</div>
+                    <div v-if="disableToEntity" style="cursor: not-allowed;">Observed IPs -></div>
-                    <div>{{ dateFormatByAppearance(item.ctime) }}</div>
+                    <div v-else style="cursor: pointer;">Observed IPs -></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>
@@ -91,6 +67,7 @@
           :resizable="false"
           align="center"
           type="selection"
+          :selectable="(row) => { return row.isBuiltIn !== 1 }"
           width="30">
       </el-table-column>
       <el-table-column
@@ -111,76 +88,10 @@
           <div class="col-resize-area"></div>
         </template>
         <template #default="scope" :column="item">
-          <span v-if="item.prop === 'timeLimit'">
+          <span v-if="item.prop === 'isBuiltIn'">
-            {{ handleTimeRange(scope.row) }}
+            <span>{{ getIsBuiltIn(scope.row.isBuiltIn) }}</span>
-          </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-if="item.prop === 'intent'" class="type-tag" :class="colorIntent(scope.row[item.prop])">{{scope.row[item.prop]}}</span>
           <span v-else>{{ scope.row[item.prop] || '-' }}</span>
         </template>
       </el-table-column>
@@ -197,14 +108,17 @@ 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 { storageKey, tagIntentColor, chartColor3 } from '@/utils/constants'
 import { urlParamsHandler, overwriteUrl, headerCellClass } from '@/utils/tools'
-import { ref } from 'vue'
+import { ref, shallowRef } 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'
+import unitConvert from '@/utils/unit-convert'
+import * as echarts from 'echarts'
+import { tagLineChartOption } from '@/views/charts2/charts/options/echartOption'
 
 export default {
   name: 'tagTable',
@@ -215,9 +129,7 @@ export default {
     chartDetectionPagination
   },
   props: {
-    categoryList: Array,
     toolsLoading: Boolean,
-    categoryId: Number,
     isNoData: {
       type: Boolean,
       default: false
@@ -228,49 +140,39 @@ export default {
     return {
       format: localStorage.getItem(storageKey.dateFormat),
       username: localStorage.getItem(storageKey.username),
+      curExpendDataType: this.$t('tag.uniqueEntityObserved'),
+      curExpendDataTypeVal: 'uniqueEntityObserved',
       tableTitle: [ // 原始table列
         {
-          label: 'ID',
+          label: this.$t('overall.name'),
-          prop: 'id',
-          show: true,
-          width: 50
-        }, {
-          label: this.$t('config.user.name'),
           prop: 'name',
           show: true,
-          minWidth: 200,
+          minWidth: 50,
           sortable: 'custom'
         }, {
-          label: this.$t('tag.categoryType'),
+          label: this.$t('tag.category'),
-          prop: 'categoryId',
+          prop: 'category',
-          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'),
+          label: this.$t('tag.entityType'),
-          prop: 'lastTime',
+          prop: 'indicatorType',
           show: true,
-          width: 170,
+          minWidth: 50
-          sortable: 'custom'
+        }, {
+          label: this.$t('tag.intention'),
+          prop: 'intent',
+          show: true,
+          minWidth: 30
+        }, {
+          label: this.$t('tag.source'),
+          prop: 'isBuiltIn',
+          show: true,
+          minWidth: 30
+        }, {
+          label: this.$t('overall.remark'),
+          prop: 'description',
+          show: true
         }
       ],
       checkboxAll: false,
@@ -285,54 +187,15 @@ export default {
       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展开
+      initExpandFlag: false, // 初始化时单行展开标志，false是未展开，true展开,
+      myChartArray: [],
+      observedCount: 0,
+      disableToEntity: false,
+      tagIntentColor
     }
   },
   /**
@@ -368,11 +231,12 @@ export default {
       pageNo = 1
     }
     const pageObj = ref(tempPageObj)
-
+    const myChart = shallowRef(null)
     return {
       timeRange,
       expandedIds,
-      pageObj
+      pageObj,
+      myChart
     }
   },
   watch: {
@@ -421,40 +285,11 @@ export default {
     }
   },
   computed: {
-    handleTimeRange () {
+    colorIntent () {
-      return function (row) {
+      const vm = this
-        let str = ''
+      return function (intent) {
-        if (row.config && row.config.timeConfig && row.config.timeConfig.type) {
+        const t = vm.tagIntentColor.find(t => t.intent === intent)
-          str += row.config.timeConfig.type
+        return t ? t.name : vm.tagIntentColor[0].name
-          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)
-        }
       }
     }
   },
@@ -462,13 +297,131 @@ export default {
     this.$nextTick(() => {
       this.expandTable()
     })
+    window.addEventListener('resize', this.resize)
   },
   methods: {
     headerCellClass,
+    toEntityList (tag) {
+      if (!this.disableToEntity) {
+        this.$router.push({
+          path: '/entity',
+          query: {
+            listMode: 'list',
+            q: 'has(tag,\'' + tag.name + '\')',
+            mode: 'text',
+            // range: this.timeFilter.dateRangeValue,
+            // pageNo: this.pageObj.pageNo,
+            // pageSize: this.pageObj.pageSize,
+            showList: true
+          }
+        })
+      }
+    },
+    echartsInit (data, item, type) {
+      const dom = document.getElementById(`chart${item.id}`)
+      if (dom) {
+        // if (!this.myChart) {
+        this.myChart = echarts.init(dom)
+        // }
+        this.chartOption = tagLineChartOption
+        this.chartOption.series = [
+          {
+            type: 'line',
+            symbol: 'circle',
+            smooth: true,
+            showSymbol: false,
+            emphasis: {
+              itemStyle: {
+                borderWidth: 2
+              }
+            },
+            name: 'IP',
+            stack: 'Total',
+            lineStyle: {
+              color: '#35ADDA',
+              width: 1
+            },
+            areaStyle: {
+              // opacity: 0.1,
+              color: '#eef8fc'
+            },
+            itemStyle: {
+              color: '#35ADDA'
+            },
+            data: data.map(t => { return [Number(t.statTime) * 1000, Number(t.ipIndicatorCount)] })
+          },
+          {
+            type: 'line',
+            symbol: 'circle',
+            smooth: true,
+            showSymbol: false,
+            emphasis: {
+              itemStyle: {
+                borderWidth: 2
+              }
+            },
+            name: 'Domain Name',
+            stack: 'Total',
+            lineStyle: {
+              color: '#E48F3E',
+              width: 1
+            },
+            areaStyle: {
+              color: '#fdf6f0'
+              // opacity: 0.1
+            },
+            itemStyle: {
+              color: '#E48F3E'
+            },
+            data: data.map(t => { return [Number(t.statTime) * 1000, Number(t.domainIndicatorCount)] })
+          }
+        ]
+
+        this.chartOption.yAxis[0].axisLabel.formatter = (value) => {
+          return unitConvert(value, 'number').join('')
+        }
+        this.myChartArray.push(this.myChart)
+        this.myChart.setOption(this.chartOption)
+        this.$nextTick(() => {
+          this.myChart.resize()
+        })
+      }
+    },
+    resize () {
+      this.myChartArray.forEach(t => {
+        t.resize()
+      })
+    },
+    uniqueEntityObserved (item) {
+      this.curExpendDataType = this.$t('tag.uniqueEntityObserved')
+      this.curExpendDataTypeVal = 'uniqueEntityObserved'
+      this.disableToEntity = false
+      this.$nextTick(() => {
+        const totalIndicatorsDom = document.getElementById('totalIndicators' + item.id)
+        const uniqueEntityObservedDom = document.getElementById('uniqueEntityObserved' + item.id)
+        uniqueEntityObservedDom.style.cssText = 'color:#0091ff;font-weight: bold;'
+        totalIndicatorsDom.style.cssText = ''
+        document.getElementById('tagDropdown' + item.id).click()
+      })
+      this.init(item, api.tagTrafficEntityTrend, api.tagTrafficEntityStatistics)
+    },
+    totalIndicators (item) {
+      this.curExpendDataType = this.$t('tag.totalIndicators')
+      this.curExpendDataTypeVal = 'totalIndicators'
+      this.disableToEntity = true
+      this.$nextTick(() => {
+        const totalIndicatorsDom = document.getElementById('totalIndicators' + item.id)
+        const uniqueEntityObservedDom = document.getElementById('uniqueEntityObserved' + item.id)
+        uniqueEntityObservedDom.style.cssText = ''
+        totalIndicatorsDom.style.cssText = 'color:#0091ff;font-weight: bold;'
+        document.getElementById('tagDropdown' + item.id).click()
+      })
+      this.init(item, api.tagIndicatorTrend, api.tagIndicatorStatistics)
+    },
     /**
-     * 进入页面判断是否需要展开表格
+   * 进入页面判断是否需要展开表格
-     * 即展开表格后刷新界面，保持展开效果
+   * 即展开表格后刷新界面，保持展开效果
-     */
+   */
     expandTable () {
       const expandInfo = this.expandedIds
 
@@ -476,7 +429,6 @@ export default {
         const obj = {
           id: expandInfo[0]
         }
-
         this.dropExpandChange(obj, expandInfo, 'init')
 
         setTimeout(() => {
@@ -507,11 +459,6 @@ export default {
         return this.$t('overall.inProgress')
       }
     },
-    tagOperation (arr) {
-      if (arr[1].percent === 1) {
-        this.tableOperation(arr)
-      }
-    },
     /**
      * 单行选中
      */
@@ -578,194 +525,99 @@ export default {
       }
       overwriteUrl(newUrl)
     },
+    initLine (item, lineUrl) {
+      const params = {
+        // startTime: getSecond(this.timeFilter.startTime),
+        // endTime: getSecond(this.timeFilter.endTime)
+      }
+      lineUrl = lineUrl || api.tagTrafficEntityTrend
+      lineUrl = lineUrl.replace('{{name}}', item.name)
+      this.loadingDown = true
+      axios.get(lineUrl, { params: params }).then(response => {
+        const res = response.data
+        if (response.status === 200) {
+          this.showError = false
+          this.isNoData = res.data.result.length === 0
+
+          if (!this.isNoData) {
+            this.echartsInit(res.data.result, item, '')
+          }
+        } else {
+          this.isNoData = false
+          this.showError = true
+          this.errorMsg = this.errorMsgHandler(res)
+        }
+      }).catch(e => {
+        console.error(e)
+        this.isNoData = false
+        this.showError = true
+        this.errorMsg = this.errorMsgHandler(e)
+      }).finally(() => {
+        this.loadingDown = false
+      })
+    },
+    initStatistics (item, statisticsUrl) {
+      const params = {
+        // startTime: getSecond(this.timeFilter.startTime),
+        // endTime: getSecond(this.timeFilter.endTime)
+      }
+      statisticsUrl = statisticsUrl || api.tagTrafficEntityStatistics
+      statisticsUrl = statisticsUrl.replace('{{name}}', item.name)
+      let observedCount = 0
+      axios.get(statisticsUrl, { params: params }).then(response => {
+        const res = response.data
+        if (response.status === 200) {
+          res.data.result.forEach(item => {
+            observedCount = observedCount + item.count
+          })
+          this.observedCount = observedCount
+        } else {
+          this.errorMsg = this.errorMsgHandler(res)
+        }
+      }).catch(e => {
+        console.error(e)
+        this.errorMsg = this.errorMsgHandler(e)
+      }).finally(() => {
+      })
+    },
+    init (item, lineUrl, statisticsUrl) {
+      this.initLine(item, lineUrl)
+      this.initStatistics(item, statisticsUrl)
+    },
     /**
      * 表格左侧点击展开收起
      */
     dropExpandChange (row, expandedRows, flag) {
+      this.curExpendDataType = this.$t('tag.uniqueEntityObserved')
+      this.curExpendDataTypeVal = 'uniqueEntityObserved'
       this.expandedIds = []
       clearInterval(this.interval)
       if (expandedRows.length > 0 && row) {
         this.expandedIds.push(row.id)
-        if (flag === undefined) {
+        this.init(row)
-          this.pageObj.pageNo = 1
+        this.$nextTick(() => {
-        }
+          const uniqueEntityObservedDom = document.getElementById('uniqueEntityObserved' + row.id)
-
+          if (uniqueEntityObservedDom) {
-        this.datePickerChange(row)
+            uniqueEntityObservedDom.style.cssText = 'color:#0091ff;font-weight: bold;'
-      }
-    },
-    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) {
+    getIsBuiltIn (isBuiltIn) {
-      clearInterval(this.interval)
+      if (isBuiltIn === 1) {
-      this.interval = setInterval(() => {
+        return this.$t('tag.builtInTag')
-        // 通过深拷贝，触发watch监听到timeRange，也可使用$set进行触发
+      } else {
-        this.timeRange = JSON.parse(JSON.stringify(this.timeRange))
+        return this.$t('tag.userDefined')
-        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)
+    window.removeEventListener('resize', this.resize)
+    if (this.myChart) {
+      echarts.dispose(this.myChart)
+    }
+    this.chartOption = null
   }
 }
 </script>

src/mock/index.js

@@ -5,3 +5,4 @@ import './entity'
 import './detection'
 import './detectionList'
 import './location'
+import './tag'

src/mock/tag.js

@@ -0,0 +1,174 @@
+import Mock from 'mockjs'
+
+const openMock = true
+if (openMock) {
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/tag/.*'), 'delete', function (requestObj) {
+    return {
+      code: 200,
+      message: 'success',
+      data: {
+        ids: [
+          'UUID1',
+          'UUID2'
+        ]
+      }
+    }
+  })
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/tag/list.*'), 'get', function (requestObj) {
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        pageNo: 1,
+        pageSize: 20,
+        total: 1,
+        list: [
+          {
+            id: '08b2a4cd-1c38-4be1-b641-8e5b607e2075',
+            name: 'tag1',
+            category: 'categoty1',
+            indicatorType: 'IP',
+            intent: 'Benign',
+            description: ' tag1 description',
+            isBuiltIn: 1,
+            createdTime: 1685412014,
+            updatedTime: 1685412014
+          },
+          {
+            id: '08b2a4cd-1c38-4be1-b641-8e5b607e2076',
+            name: 'tag2',
+            category: 'categoty1',
+            indicatorType: 'IP,Domain',
+            intent: 'Benign',
+            description: ' tag1 description',
+            isBuiltIn: 0,
+            createdTime: 1685412014,
+            updatedTime: 1685412014
+          },
+          {
+            id: '08b2a4cd-1c38-4be1-b641-8e5b607e20751',
+            name: 'tag123',
+            category: 'categoty1',
+            indicatorType: 'IP',
+            intent: 'Malicious',
+            description: ' tag1 description',
+            isBuiltIn: 1,
+            createdTime: 1685412014,
+            updatedTime: 1685412014
+          },
+          {
+            id: '08b2a4cd-1c38-4be1-b641-8e5b607e20761',
+            name: 'tag246',
+            category: 'categoty1',
+            indicatorType: 'IP,Domain',
+            intent: 'Unknow',
+            description: ' tag1 description',
+            isBuiltIn: 1,
+            createdTime: 1685412014,
+            updatedTime: 1685412014
+          }
+        ]
+      }
+    }
+  })
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/tag/.*/indicator/trend.*'), 'get', function (requestObj) {
+    return {
+      code: 200,
+      success: true,
+      msg: 'OK',
+      data: {
+        resultType: 'table',
+        result: [
+          {
+            statTime: 1711526563,
+            ipIndicatorCount: 217,
+            domainIndicatorCount: 125
+          },
+          {
+            statTime: 1711526569,
+            ipIndicatorCount: 515,
+            domainIndicatorCount: 415
+          },
+          {
+            statTime: 1711526575,
+            ipIndicatorCount: 17,
+            domainIndicatorCount: 15
+          },
+          {
+            statTime: 1711526581,
+            ipIndicatorCount: 565,
+            domainIndicatorCount: 35
+          }
+        ]
+      }
+    }
+  })
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/tag/.*/trafficEntity/trend.*'), 'get', function (requestObj) {
+    return {
+      code: 200,
+      success: true,
+      msg: 'OK',
+      data: {
+        resultType: 'table',
+        result: [
+          {
+            statTime: 1711526563,
+            ipIndicatorCount: 27,
+            domainIndicatorCount: 25
+          },
+          {
+            statTime: 1711526569,
+            ipIndicatorCount: 55,
+            domainIndicatorCount: 45
+          },
+          {
+            statTime: 1711526575,
+            ipIndicatorCount: 17,
+            domainIndicatorCount: 15
+          },
+          {
+            statTime: 1711526581,
+            ipIndicatorCount: 55,
+            domainIndicatorCount: 35
+          }
+        ]
+      }
+    }
+  })
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/tag/.*/trafficEntity/statistics.*'), 'get', function (requestObj) {
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: [
+          {
+            type: 'Domain',
+            count: 36
+          },
+          {
+            type: 'IP',
+            count: 10
+          }
+        ]
+      }
+    }
+  })
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/tag/.*/indicator/statistics.*'), 'get', function (requestObj) {
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: [
+          {
+            type: 'Domain',
+            count: 33
+          },
+          {
+            type: 'IP',
+            count: 100
+          }
+        ]
+      }
+    }
+  })
+}

src/permission.js

@@ -17,11 +17,11 @@ router.beforeEach(async (to, from, next) => {
   loadGeoData()
   // 加载baseUrl
   if (!axios.defaults.baseURL) {
-    // eslint-disable-next-line no-undef
+  // eslint-disable-next-line no-undef
     axios.defaults.baseURL = BASE_CONFIG.baseUrl
   }
   if (localStorage.getItem(storageKey.token)) {
-    // 加载i18n
+  // 加载i18n
     await loadI18n()
     // 加载权限
     if (permissionWhiteList.indexOf(to.path) !== -1) {
@@ -162,8 +162,8 @@ export function handleComponent (code) {
       return () => import('@/views/detections/detectionPolicies/PolicyForm')
     case 'report':
       return () => import('@/views/report/Report')
-    //case 'tag':
+    case 'tag':
-      //return () => import('@/views/tag/Tag')
+      return () => import('@/views/tag/Tag')
     case 'knowledgeBase':
       return () => import('@/views/setting/KnowledgeBase')
     case 'userDefinedLibrary':

src/utils/api.js

@@ -60,6 +60,13 @@ export const api = {
   reportBatchDownloadPdf: '/report/job/batchDownloadPdf',
   reportDownloadPdf: '/report/job/downloadPdf',
   reportView: '/report/job/view',
+  // tag 相关
+  tagList: '/v1/tag/list',
+  tagDelete: '/v1/tag/',
+  tagIndicatorStatistics: '/v1/tag/{{name}}/indicator/statistics',
+  tagIndicatorTrend: '/v1/tag/{{name}}/indicator/trend',
+  tagTrafficEntityStatistics: '/v1/tag/{{name}}/trafficEntity/statistics',
+  tagTrafficEntityTrend: '/v1/tag/{{name}}/trafficEntity/trend',
   // 业务
   panel: '/visual/panel',
   chart: '/visual/chart',

src/utils/constants.js

@@ -63,7 +63,8 @@ export const fromRoute = {
   galaxyProxy: 'galaxyProxy',
   chart: 'chart',
   cryptocurrency: 'cryptocurrency',
-  builtinReport: 'builtinReport'
+  builtinReport: 'builtinReport',
+  tag: 'tag'
 }
 
 /* panel类别和名称之间的映射 */
@@ -463,6 +464,25 @@ export const knowledgeBaseCategory = [
     value: 'user_defined'
   }
 ]
+
+export const tagIntentColor = [
+  {
+    label: 'tag.intent.unknown',
+    name: 'unknow',
+    intent: 'Unknow'
+  },
+  {
+    label: 'tag.intent.benign',
+    name: 'benign',
+    intent: 'Benign'
+  },
+  {
+    label: 'tag.intent.malicious',
+    name: 'malicious',
+    intent: 'Malicious'
+  }
+]
+
 export const knowledgeBaseColor = [
   {
     label: 'knowledge.info',

src/views/charts2/charts/options/echartOption.js

@@ -797,3 +797,48 @@ export const entityDetailSubscriberTopApp = {
     }
   }]
 }
+
+export const tagLineChartOption = {
+  tooltip: {
+    trigger: 'axis',
+    className: 'echarts-tooltip echarts-tooltip-dark'
+  },
+  legend: {
+    show: true,
+    x: 'center',
+    y: 'bottom',
+    icon: 'circle',
+    itemGap: 50,
+    data: ['IP', 'Domain Name']
+  },
+  grid: {
+    top: '12%',
+    left: '1%',
+    right: '1%',
+    bottom: 30,
+    containLabel: true
+  },
+  xAxis: [
+    {
+      type: 'time',
+      axisLabel: {
+        formatter: xAxisTimeFormatter,
+        rich: xAxisTimeRich
+      }
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value',
+      splitLine: {
+        show: false
+      },
+      axisLabel: {
+        // formatter: function (value) {
+        //   return unitConvert(value, unitTypes.number).join('')
+        // }
+      }
+    }
+  ],
+  series: []
+}

src/views/tag/Tag.vue

@@ -6,25 +6,22 @@
           :tableId="tableId"
           v-model:custom-table-title="tools.customTableTitle"
           :api="url"
-          :from="fromRoute.builtinReport"
+          :from="fromRoute.tag"
           :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="editTag">
-                  @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>
@@ -33,9 +30,10 @@
                   key="intentSelect"
                   size="small"
                   v-model="intent"
-                  placeholder=" "
                   :teleported="false"
                   style="width:135px;margin-right:10px;"
+                  clearable
+                  placeholder="All"
                   @change="intentChange"
           >
             <template #prefix>
@@ -47,9 +45,10 @@
                   key="categorySelect"
                   size="small"
                   v-model="category"
-                  placeholder=" "
                   :teleported="false"
                   style="width:150px;margin-right:10px;"
+                  clearable
+                  placeholder="All"
                   @change="categoryChange"
           >
             <template #prefix>
@@ -60,20 +59,17 @@
         </template>
         <template #default>
           <loading :loading="loading"></loading>
-          <report-table
+          <tag-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"
           />
@@ -82,111 +78,36 @@
           <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 TagTable from '@/components/table/tag/TagTable'
 import cnDataList from '@/components/table/CnDataList'
 import dataListMixin from '@/mixins/data-list'
 import { api } from '@/utils/api'
-import { tagIntentOptions,tagCategoryOptions } from '@/utils/constants'
+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',
+  name: 'Tag',
   data () {
     return {
-      builtinReportLeftMenu: [], // 左侧列表菜单数据
       builtinColor: false,
-      // builtinId: '',
+      url: api.tagList,
-      url: api.reportTemp,
       tagIntentOptions,
       tagCategoryOptions,
-      blankObject: {
+      tableId: 'tagTable',
-        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',
+      intent: '',
-      category:'All',
+      category: '',
+      name: ''
     }
   },
   /**
@@ -194,11 +115,9 @@ export default {
    */
   setup () {
     const { query } = useRoute()
-    const builtinId = ref(parseInt(query.categoryId) || '')
     const urlPageNo = ref(parseInt(query.pageNo) || 1)
 
     return {
-      builtinId,
       urlPageNo
     }
   },
@@ -206,72 +125,103 @@ export default {
   components: {
     Loading,
     cnDataList,
-    ReportTable,
+    TagTable
-    ReportBox
   },
   mounted () {
     this.$nextTick(() => {
-      this.queryGetTempData()
+      this.getTableData()
     })
   },
   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) {
-
+      let params = {}
+      if (value) {
+        params = { intent: value }
+      }
+      if (this.category) {
+        params = { ...params, category: this.category }
+      }
+      if (this.name) {
+        params = { ...params, name: this.name }
+      }
+      this.getTableData(params)
     },
     categoryChange (value) {
-
+      let params = {}
+      if (value) {
+        params = { category: value }
+      }
+      if (this.intent) {
+        params = { ...params, intent: this.intent }
+      }
+      if (this.name) {
+        params = { ...params, name: this.name }
+      }
+      this.getTableData(params)
     },
-    queryGetTempData () {
+    search (params) {
-      this.builtinLeftLoading = true
+      if (this.intent) {
-      axios.get(api.reportCategory, { params: { pageSize: 999 } }).then(res => {
+        params = { ...params, intent: this.intent }
-        if (res.status === 200) {
+      }
-          this.builtinReportLeftMenu = res.data.data.list.map(c => {
+      if (this.category) {
-            return {
+        params = { ...params, category: this.category }
-              ...c,
+      }
-              config: c.config ? JSON.parse(c.config) : {}
+      this.name = params.q
+      this.pageObj.pageNo = 1
+      this.getTableData(params)
+    },
+    delBatch () {
+      const ids = []
+      if (this.batchDeleteObjs && this.batchDeleteObjs.length > 0) {
+        this.batchDeleteObjs.forEach(item => {
+          ids.push(item.id)
+        })
+      }
+      if (ids.length === 0) {
+        this.$alert(this.$t('tip.pleaseSelect'), {
+          confirmButtonText: this.$t('tip.yes'),
+          type: 'warning'
+        }).catch(() => {})
+      } else {
+        this.$confirm(this.$t('tip.confirmDelete'), {
+          confirmButtonText: this.$t('tip.yes'),
+          cancelButtonText: this.$t('tip.no'),
+          type: 'warning'
+        }).then(() => {
+          this.toggleLoading(true)
+          axios.delete(api.tagDelete + ids).then(response => {
+            if (response.status === 200) {
+              this.delFlag = true
+              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+              let params = null
+              if (this.intent) {
+                params = { intent: this.intent }
+              }
+              if (this.category) {
+                params = { ...params, category: this.category }
+              }
+              if (this.name) {
+                params = { ...params, name: this.name }
+              }
+              this.getTableData(params)
+            } else {
+              this.$message.error(response.data.message)
             }
+          }).catch(e => {
+            this.$message.error(e.response.data.message)
+          }).finally(() => {
+            this.toggleLoading(false)
           })
-
+        }).finally(() => {
-          if (this.builtinId !== '') {
+          if (this.isSelectedStatus !== undefined) {
-            this.builtinTabs(this.builtinId, 'init')
+            this.isSelectedStatus = false
-          } else {
+            this.disableDelete = true
-            this.getTableData()
+            this.batchDeleteObjs = []
           }
-        }
+        })
-        this.builtinLeftLoading = false
+      }
-      })
-    },
-    tableDataSort (orderBy) {
-      this.searchLabel.orderBy = orderBy
-      this.getTableData(this.searchLabel)
     },
     getTableData (params) {
       this.searchLabel = null
@@ -279,28 +229,17 @@ export default {
         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
+      // 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 {
@@ -321,23 +260,12 @@ export default {
       }
       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 () {
+    editTag () {
       if (this.batchDeleteObjs.length === 0) {
         this.$alert(this.$t('tip.pleaseSelectForEdit'), {
           confirmButtonText: this.$t('tip.yes'),