CN-1592 fix: tag下拉增加时间选择框、修复不能删除的bug

2024-04-15 22:25:39 +08:00
parent 3faea70349
commit 397b254ec5
8 changed files with 153 additions and 113 deletions
--- a/public/config.js
+++ b/public/config.js
@@ -22,5 +22,8 @@ const DEFAULT_TIME_FILTER_RANGE = {
    behaviorPattern: 60 * 24 * 7 // 实体详情--IP--行为模式
  },
  detection: 60, // 事件日志列表
-  tag:60//标签列表
+  tag: { // 标签列表
+    activeEntity: 60, // 标签table下拉--活跃实体
+    totalEntity: 7 * 24 * 60 // 标签table下拉--全部实体
+  }
 }
--- a/src/assets/css/components/components/common/TimeRange/date-time-range.scss
+++ b/src/assets/css/components/components/common/TimeRange/date-time-range.scss
@@ -1,5 +1,6 @@
@use 'element-plus/theme-chalk/src/select.scss' as *;
 .date-range-box {
+  position: relative;
  font-size: 14px;
  border-radius: var(--el-border-radius-base);
  display: flex;
--- a/src/assets/css/components/views/tag/tag.scss
+++ b/src/assets/css/components/views/tag/tag.scss
@@ -14,6 +14,8 @@
        height: calc(100% - 62px) !important;

        .el-table__expanded-cell {
+          z-index: 2;
+
          .down {
            margin-left: 32px;
            height: 100%;
@@ -47,25 +49,16 @@
          }
          .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;
-              }
-            }
+            display: flex;
+            position: relative;

            .tag-dropdown{
              align-items: center;
-              width: 100%;
              height: 24px;
              justify-content: center;
              line-height: 24px;
              padding: 0 6px;
+              margin-right: 20px;

              span {
                margin-right: 6px;
@@ -83,6 +76,24 @@
                font-size: 12px;
              }
            }
+            .expand-observed-entities {
+              font-size: 12px;
+              color: var(--el-color-primary);
+              cursor: pointer;
+              line-height: 24px;
+
+              &.expand-observed-entities--disabled {
+                color: var(--el-text-color-regular);
+                cursor: default;
+              }
+              i {
+                top: 1px;
+              }
+            }
+            .date-range-box {
+              position: absolute;
+              right: 20px;
+            }
          }
          .expand {
            min-height: 150px;
@@ -104,7 +115,7 @@
              .expand-left {
                //background: #F9F9F9;
                //border-radius: 2px;
-                width:calc(100% - 200px);
+                width: 100%;
                height: 150px;
                position: relative;
                .chart-drawing {
@@ -130,20 +141,6 @@
                    padding: 2px 3px 0 0;
                  }
                }
-                .expand-observed-entities {
-                  font-size: 12px;
-                  color: var(--el-color-primary);
-                  margin-bottom: 4px;
-                  cursor: pointer;
-
-                  &.expand-observed-entities--disabled {
-                    color: var(--el-text-color-regular);
-                    cursor: default;
-                  }
-                  i {
-                    top: 1px;
-                  }
-                }
                .expand-icon {
                  display: flex;
                  justify-content: space-evenly;
--- a/src/components/common/TimeRange/DateTimeRange.vue
+++ b/src/components/common/TimeRange/DateTimeRange.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-ele-click-outside="changeDropdown" style="position: relative;" class="date-range-box">
+  <div v-ele-click-outside="changeDropdown" class="date-range-box">
    <div @click="showDropdown" tabindex="1" class="date-range-text" :class="myClass" :style="style">
      <div class="calendar-popover-text"><i class="cn-icon cn-icon-Data"></i></div>
      <div class="calendar-popover-text" style="display: flex" v-if="isCustom" :title="`${dateFormatByAppearance(getMillisecond(startTime))} -${dateFormatByAppearance(getMillisecond(endTime))}`">
@@ -219,6 +219,9 @@ export default {
        returnValue()
      }
    })
+    watch(() => props.startTime, (newVal) => {
+      console.info(newVal)
+    })

    /**
     * 监测下拉框，一旦隐藏，则设置其位置靠最左边
--- a/src/components/table/tag/TagTable.vue
+++ b/src/components/table/tag/TagTable.vue
@@ -17,7 +17,7 @@
    <el-table-column type="expand" width="30">
      <template #default="props">
        <div class="down">
-          <div class="block drop-down-time" style="border:0px yellow solid;">
+          <div class="block drop-down-time">
            <el-popover placement="bottom-start"
                        :ref="`tagPopover${props.row.id}`"
                        :key="`tagPopover${props.row.id}`"
@@ -43,6 +43,15 @@
                </ul>
              </el-row>
            </el-popover>
+            <span class="expand-observed-entities" :class="{'expand-observed-entities--disabled': disableToEntity}" @click="toEntityList(props.row)">{{countDesc}}&nbsp;<el-icon v-if="!disableToEntity"><Right /></el-icon></span>
+            <date-time-range
+                class="date-time-range"
+                :start-time="timeFilter.startTime"
+                :end-time="timeFilter.endTime"
+                :date-range="timeFilter.dateRangeValue"
+                ref="dateTimeRange"
+                @change="reload"
+            />
          </div>
          <div class="expand">
            <loading :loading="loadingDown"></loading>
@@ -51,12 +60,6 @@
              <div class="expand-left">
                <div class="chart-drawing" :id="`chart${props.row.id}`"></div>
              </div>
-              <div class="expand-right">
-                <div class="expand-count">{{observedCount}}</div>
-                <div class="expand-observed-entities" :class="{'expand-observed-entities--disabled': disableToEntity}" @click="toEntityList(props.row)">
-                  Observed IPs&nbsp;<el-icon v-if="!disableToEntity"><Right /></el-icon>
-                </div>
-              </div>
            </div>
          </div>
        </div>
@@ -146,28 +149,28 @@ export default {
          label: this.$t('overall.name'),
          prop: 'name',
          show: true,
-          minWidth: 50,
+          width: 300,
          sortable: 'custom'
        }, {
          label: this.$t('tag.category'),
          prop: 'category',
          show: true,
-          minWidth: 50
+          width: 100
        }, {
          label: this.$t('tag.entityType'),
          prop: 'indicatorType',
          show: true,
-          minWidth: 50
+          width: 120
        }, {
          label: this.$t('tag.intention'),
          prop: 'intent',
          show: true,
-          minWidth: 30
+          width: 100
        }, {
          label: this.$t('tag.source'),
          prop: 'isBuiltIn',
          show: true,
-          minWidth: 30
+          width: 120
        }, {
          label: this.$t('overall.remark'),
          prop: 'description',
@@ -192,7 +195,9 @@ export default {
      selectIds: [], // 单行选中的id列表
      initExpandFlag: false, // 初始化时单行展开标志，false是未展开，true展开,
      myChartArray: [],
-      observedCount: 0,
+      observedIpCount: 0,
+      observedDomainCount: 0,
+      countDesc: '', // tag下拉中实体数量描述信息
      disableToEntity: false,
      tagIntent
    }
@@ -201,10 +206,31 @@ export default {
     * 添加vue3的setup，目的是添加/获取地址栏的参数
     */
  setup () {
-    const { startTime, endTime } = getNowTime(60 * 24 * 30)
-    const timeRange = ref([startTime, endTime])
-
    const { query } = useRoute()
+    /*// 获取url携带的range、startTime、endTime
+    const rangeParam = query.range
+    const startTimeParam = query.startTime
+    const endTimeParam = query.endTime
+
+    const dateRangeValue = rangeParam ? parseInt(rangeParam) : (DEFAULT_TIME_FILTER_RANGE.tag.activeEntity || 60)
+    const timeFilter = ref({ dateRangeValue })
+    if (!startTimeParam || !endTimeParam) {
+      const { startTime, endTime } = getNowTime(dateRangeValue)
+      timeFilter.value.startTime = getSecond(startTime)
+      timeFilter.value.endTime = getSecond(endTime)
+      // 如果没有时间参数，就将参数写入url
+      const newUrl = urlParamsHandler(window.location.href, useRoute().query, { startTime: timeFilter.value.startTime, endTime: timeFilter.value.endTime, range: dateRangeValue })
+      overwriteUrl(newUrl)
+    } else {
+      timeFilter.value.startTime = parseInt(startTimeParam)
+      timeFilter.value.endTime = parseInt(endTimeParam)
+    }*/
+
+    const dateRangeValue = DEFAULT_TIME_FILTER_RANGE.tag.activeEntity || 60
+    const timeFilter = ref({ dateRangeValue })
+    const { startTime, endTime } = getNowTime(dateRangeValue)
+    timeFilter.value.startTime = getSecond(startTime)
+    timeFilter.value.endTime = getSecond(endTime)

    // 展开行的id列表，只展开一行
    const expandedId = []
@@ -232,7 +258,7 @@ export default {
    const pageObj = ref(tempPageObj)
    const myChart = shallowRef(null)
    return {
-      timeRange,
+      timeFilter,
      expandedIds,
      pageObj,
      myChart
@@ -257,12 +283,6 @@ export default {
          }
          this.reloadUrl(expandPage)
        }
-
-        const dateParam = {
-          startTime: dateFormatToUTC(this.timeRange[0]),
-          endTime: dateFormatToUTC(this.timeRange[1])
-        }
-        this.reloadUrl(dateParam)
      } else {
        // 删除地址栏参数，然后删除缓存
        const newQuery = this.$route.query // 深拷贝路由数据
@@ -273,13 +293,15 @@ export default {
        this.reloadUrl(newQuery, 'cleanOldParams')
      }
    },
-    timeRange (newVal, oldVal) {
-      if (newVal) {
-        const dateParam = {
-          startTime: dateFormatToUTC(newVal[0]),
-          endTime: dateFormatToUTC(newVal[1])
+    timeFilter (n) {
+      const id = this.expandedIds[0] || null
+      if (id) {
+        const item = this.tableData.find(item => item.id === id)
+        if (this.disableToEntity) {
+          this.init(item, api.tagIndicatorTrend, api.tagIndicatorStatistics)
+        } else {
+          this.init(item, api.tagTrafficEntityTrend, api.tagTrafficEntityStatistics)
        }
-        this.reloadUrl(dateParam)
      }
    }
  },
@@ -297,6 +319,9 @@ export default {
        const t = vm.tagIntent.find(t => t.value === intent)
        return t ? t.name + '-list' : vm.tagIntent[0].name + '-list'
      }
+    },
+    observedCount () {
+      return this.observedIpCount + this.observedDomainCount
    }
  },
  mounted () {
@@ -330,8 +355,9 @@ export default {
        this.myChart = echarts.init(dom)
        // }
        this.chartOption = tagLineChartOption
-        this.chartOption.series = [
-          {
+        const series = []
+        if (item.indicatorType && item.indicatorType.indexOf('IP') > -1) {
+          series.push({
            type: 'line',
            symbol: 'circle',
            smooth: true,
@@ -355,8 +381,10 @@ export default {
              color: '#35ADDA'
            },
            data: data.map(t => { return [Number(t.statTime) * 1000, Number(t.ipIndicatorCount)] })
-          },
-          {
+          })
+        }
+        if (item.indicatorType && item.indicatorType.indexOf('Domain') > -1) {
+          series.push({
            type: 'line',
            symbol: 'circle',
            smooth: true,
@@ -366,7 +394,7 @@ export default {
                borderWidth: 2
              }
            },
-            name: 'Domain Name',
+            name: this.$t('overall.domain'),
            stack: 'Total',
            lineStyle: {
              color: '#E48F3E',
@@ -380,8 +408,9 @@ export default {
              color: '#E48F3E'
            },
            data: data.map(t => { return [Number(t.statTime) * 1000, Number(t.domainIndicatorCount)] })
-          }
-        ]
+          })
+        }
+        this.chartOption.series = series

        this.chartOption.yAxis[0].axisLabel.formatter = (value) => {
          return unitConvert(value, 'number').join('')
@@ -398,6 +427,27 @@ export default {
        t.resize()
      })
    },
+    handleCountDesc () {
+      let desc = this.observedCount
+      // 全部实体
+      if (this.disableToEntity) {
+        if (this.observedCount < 2) {
+          desc += ` ${this.$t('tag.activeEntity2')}`
+        } else {
+          desc += ` ${this.$t('tag.activeEntities2')}`
+        }
+      } else { // 活跃实体
+        if (this.observedCount < 2) {
+          desc += ` ${this.$t('overall.entity2')}`
+        } else {
+          desc += ` ${this.$t('overall.entities2')}`
+        }
+      }
+      if (this.observedCount > 0) {
+        desc += `, IP ${this.observedIpCount}, ${this.$t('overall.domain')} ${this.observedDomainCount}`
+      }
+      return desc
+    },
    uniqueEntityObserved (item) {
      this.curExpendDataType = this.$t('tag.uniqueEntityObserved')
      this.curExpendDataTypeVal = 'uniqueEntityObserved'
@@ -409,7 +459,10 @@ export default {
        totalIndicatorsDom.style.cssText = ''
        document.getElementById('tagDropdown' + item.id).click()
      })
-      this.init(item, api.tagTrafficEntityTrend, api.tagTrafficEntityStatistics)
+      // 重置时间条件
+      this.$refs.dateTimeRange.quickChange(DEFAULT_TIME_FILTER_RANGE.tag.activeEntity || 60)
+
+      // this.init(item, api.tagTrafficEntityTrend, api.tagTrafficEntityStatistics)
    },
    totalIndicators (item) {
      this.curExpendDataType = this.$t('tag.totalIndicators')
@@ -422,7 +475,12 @@ export default {
        totalIndicatorsDom.style.cssText = 'color:var(--el-color-primary);font-weight: bold;'
        document.getElementById('tagDropdown' + item.id).click()
      })
-      this.init(item, api.tagIndicatorTrend, api.tagIndicatorStatistics)
+      // 重置时间条件
+      const dateRangeValue = DEFAULT_TIME_FILTER_RANGE.tag.totalEntity || 7 * 24 * 60
+      const { startTime, endTime } = getNowTime(dateRangeValue)
+      this.$refs.dateTimeRange.timeArrChange([startTime, endTime])
+
+      // this.init(item, api.tagIndicatorTrend, api.tagIndicatorStatistics)
    },
    /**
       * 进入页面判断是否需要展开表格
@@ -531,12 +589,23 @@ export default {
      }
      overwriteUrl(newUrl)
    },
+    reload (startTime, endTime, dateRangeValue) {
+      this.timeFilter = { startTime: getSecond(startTime), endTime: getSecond(endTime), dateRangeValue: dateRangeValue }
+      const { query } = this.$route
+      this.$store.commit('setTimeRangeArray', [this.timeFilter.startTime, this.timeFilter.endTime])
+      this.$store.commit('setTimeRangeFlag', dateRangeValue.value)
+
+      const newUrl = urlParamsHandler(window.location.href, query, {
+        startTime: this.timeFilter.startTime,
+        endTime: this.timeFilter.endTime,
+        range: dateRangeValue.value
+      })
+      overwriteUrl(newUrl)
+    },
    initLine (item, lineUrl) {
-      const dateRangeValue = DEFAULT_TIME_FILTER_RANGE.dashboard || 60
-      const { startTime, endTime } = getNowTime(dateRangeValue)
      const params = {
-        startTime: getSecond(startTime),
-        endTime: getSecond(endTime)
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime)
      }
      lineUrl = lineUrl || api.tagTrafficEntityTrend
      lineUrl = lineUrl.replace('{{name}}', item.name)
@@ -562,22 +631,16 @@ export default {
      })
    },
    initStatistics (item, statisticsUrl) {
-      const dateRangeValue = DEFAULT_TIME_FILTER_RANGE.dashboard || 60
-      const { startTime, endTime } = getNowTime(dateRangeValue)
-      const params = {
-        startTime: getSecond(startTime),
-        endTime: getSecond(endTime)
-      }
      statisticsUrl = statisticsUrl || api.tagTrafficEntityStatistics
      statisticsUrl = statisticsUrl.replace('{{name}}', item.name)
-      let observedCount = 0
-      axios.get(statisticsUrl, { params: params }).then(response => {
+      axios.get(statisticsUrl, { params: { startTime: 1, endTime: 9999999999 } }).then(response => { // TODO 计数统计暂时不限制时间
        const res = response.data
        if (response.status === 200) {
-          res.data.result.forEach(item => {
-            observedCount = observedCount + item.count
-          })
-          this.observedCount = observedCount
+          const ipFind = res.data.result.find(item => item.type === 'IP')
+          this.observedIpCount = ipFind ? ipFind.count : 0
+          const domainFind = res.data.result.find(item => item.type === 'Domain')
+          this.observedDomainCount = domainFind ? domainFind.count : 0
+          this.countDesc = this.handleCountDesc()
        } else {
          this.errorMsg = this.errorMsgHandler(res)
        }
--- a/src/views/charts2/charts/options/echartOption.js
+++ b/src/views/charts2/charts/options/echartOption.js
@@ -808,8 +808,7 @@ export const tagLineChartOption = {
    x: 'center',
    y: 'bottom',
    icon: 'circle',
-    itemGap: 50,
-    data: ['IP', 'Domain Name']
+    itemGap: 50
  },
  grid: {
    top: '12%',
--- a/src/views/tag/Tag.vue
+++ b/src/views/tag/Tag.vue
@@ -191,7 +191,7 @@ export default {
          type: 'warning'
        }).then(() => {
          this.toggleLoading(true)
-          axios.delete(api.tag + ids).then(response => {
+          axios.delete(api.tag + '?id=' + ids).then(response => {
            if (response.status === 200) {
              this.delFlag = true
              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
--- a/src/views/tag/TagForm.vue
+++ b/src/views/tag/TagForm.vue
@@ -229,20 +229,6 @@
            </transition>
          </template>
        </el-collapse-item>
-        <el-collapse-item name="3" class="enable-form__mt">
-          <template #title>
-            <div class="form-sub-title">{{ $t('tag.enable') }}</div>
-          </template>
-
-              <el-switch class="card-enable"
-                         v-model="editObject.status"
-                         active-color="#38ACD2"
-                         inactive-color="#C0CEDB"
-                         :active-value="1"
-                         :inactive-value="0"
-              >
-              </el-switch>
-        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="edit-tag__footer">
@@ -1451,7 +1437,7 @@ export default {
      third: itemListHeight.noData
    }

-    const stepHeights = ref([stepHeightConstant.first, stepHeightConstant.second, stepHeightConstant.third, stepHeightConstant.collapse])
+    const stepHeights = ref([stepHeightConstant.first, stepHeightConstant.second, stepHeightConstant.third])

    // 没上传过文件的提示
    const uploadErrorTip = ref('')
@@ -1512,18 +1498,6 @@ export default {
 </script>

 <style lang="scss">
-.el-overlay-message-box, .el-message-box {
-  padding: 0 !important;
-}
-.el-overlay-message-box {
-  text-align: center !important;
-}
-.is-message-box .el-overlay-message-box {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 .del-model {
  &.el-message-box {
    max-width: 480px !important;