CN-318 feat: detection服务质量界面

src/assets/css/components/views/detections/detection-list/row.scss

@@ -99,6 +99,8 @@
 
             .basic-info__item {
               padding-right: 40px;
+              display: flex;
+              align-items: center;
               i {
                 padding-right: 6px;
                 color: #8FA1BE;

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1644832156673') format('woff2'),
+  src: url('iconfont.woff2?t=1645687921203') format('woff2'),
-       url('iconfont.woff?t=1644832156673') format('woff'),
+       url('iconfont.woff?t=1645687921203') format('woff'),
-       url('iconfont.ttf?t=1644832156673') format('truetype');
+       url('iconfont.ttf?t=1645687921203') format('truetype');
 }
 
 .cn-icon {
@@ -13,7 +13,11 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.cn-icon-shaixuan:before {
+.cn-icon-detection:before {
+  content: "\e766";
+}
+
+.cn-icon-filter:before {
   content: "\e764";
 }
 

src/components/entities/EntityList.vue

@@ -60,7 +60,7 @@
           </template>
           <template v-else-if="from === 'domain'">
             <div class="body__row">
-              <span class="body__row-label"><i class="cn-icon cn-icon-category"></i>{{$t('entities.Group')}}：</span>
+              <span class="body__row-label"><i class="cn-icon cn-icon-category"></i>{{$t('entities.group')}}：</span>
               <div class="body__row-value" :title="d.categoryGroup">{{d.categoryGroup || '-'}}</div>
             </div>
             <div class="body__row">

src/router/index.js

@@ -39,7 +39,7 @@ const routes = [
         component: () => import('@/views/entityExplorer/EntityExplorer')
       },
       {
-        path: '/detections',
+        path: '/detection/:typeName',
         component: () => import('@/views/detections/Index')
       },
       {

src/utils/api.js

@@ -74,16 +74,28 @@ export const api = {
   entityIpRelatedServerDomain: '/interface/entity/detail/overview/ip/relatedDomain',
   entityIpRelatedServerApp: '/interface/entity/detail/overview/ip/relatedApp',
   // detection
-  detectionSeverityTrend: '/interface/detection/filter/severityTrend',
+  detection: {
-  detectionAttackType: '/interface/detection/filter/attackType',
+    securityEvent: {
-  detectionOffenderIp: '/interface/detection/filter/offenderIp',
+      eventSeverityTrend: '/interface/detection/filter/severityTrend',
-  detectionOffenderLocation: '/interface/detection/filter/offenderLocation',
+      securityType: '/interface/detection/filter/attackType',
-  detectionVictimIp: '/interface/detection/filter/victimIp',
+      offenderIp: '/interface/detection/filter/offenderIp',
-  detectionVictimLocation: '/interface/detection/filter/victimLocation',
+      offenderLocation: '/interface/detection/filter/offenderLocation',
-  detectionSeverity: '/interface/detection/filter/severity',
+      victimIp: '/interface/detection/filter/victimIp',
-  detectionListBasic: '/interface/detection/list/basic',
+      victimLocation: '/interface/detection/filter/victimLocation',
-  detectionOverviewBasic: '/interface/detection/detail/overview/basic',
+      eventSeverity: '/interface/detection/filter/severity',
-  detectionOverviewEvent: '/interface/detection/detail/overview/event'
+      listBasic: '/interface/detection/list/basic',
+      overviewBasic: '/interface/detection/detail/overview/basic',
+      overviewEvent: '/interface/detection/detail/overview/event'
+    },
+    performanceEvent: {
+      eventSeverityTrend: '/interface/detection/filter/severityTrend',
+      securityType: '/interface/detection/filter/attackType',
+      eventSeverity: '/interface/detection/filter/severity',
+      activeEntity: '/interface/detection/filter/activeEntity',
+      listBasic: '/interface/detection/list/basic',
+      overviewBasic: '/interface/detection/detail/overview/basic'
+    }
+  }
 }
 
 /* panel */

src/utils/constants.js

@@ -165,6 +165,11 @@ export const securityType = {
   dga: 'dga',
   ddos: 'ddos'
 }
+export const detectionPageType = {
+  securityEvent: 'securityEvent',
+  performanceEvent: 'performanceEvent'
+}
+
 export const iso36112 = {
   [storageKey.iso36112Capital]: 'data/countriesWithCapital',
   [storageKey.iso36112WorldLow]: 'worldChinaLow',

src/views/detections/DetectionList.vue

@@ -10,6 +10,7 @@
         <detection-row
             v-for="(data, index) in listData"
             :detection="data"
+            :page-type="pageType"
             :timeFilter="timeFilter"
             :key="index"
             :ref="`detectionRow${index}`"
@@ -33,7 +34,8 @@ export default {
     from: String,
     pageObj: Object,
     loading: Boolean,
-    timeFilter: Object
+    timeFilter: Object,
+    pageType: String // 安全事件、服务质量
   },
   data () {
     return {

src/views/detections/DetectionRow.vue

@@ -5,17 +5,19 @@
       <span @click="switchCollapse" :class="{'reg-down': !isCollapse}"><i class="cn-icon cn-icon-arrow-right"></i></span>
     </div>
     <div class="cn-detection__case">
-      <div class="cn-detection__icon" :style="`background-color: ${eventSeverityColor[detection.eventSecurity]}`">
+      <div class="cn-detection__icon" :style="`background-color: ${eventSeverityColor[detection.eventSecurity]}`"></div>
-
-      </div>
       <div class="cn-detection__row">
-        <div class="cn-detection__header">
+        <div class="cn-detection__header" v-if="pageType === detectionPageType.securityEvent">
           <i class="cn-icon cn-icon-attacker" ></i>{{detection.offenderIp}}
           <span class="line">-------</span>
           <span class="circle"></span>
           <i class="cn-icon cn-icon-attacked" ></i>{{detection.victimIp}}
         </div>
-          <div class="cn-detection__body">
+        <div class="cn-detection__header" v-else-if="pageType === detectionPageType.performanceEvent">
+          <div class="cn-entity__icon"><i :class="iconClass"></i></div>
+          <div style="padding-left: 3px;">{{detection.serverIp || detection.domain || detection.appName || 'Unknown'}}</div>
+        </div>
+        <div class="cn-detection__body">
           <div class="body__basic-info">
             <div class="basic-info">
               <div class="basic-info__item">
@@ -28,12 +30,12 @@
                 <span>{{$t('detection.list.securityType')}}&nbsp;:&nbsp;&nbsp;</span>
                 <span>{{detection.securityType}}</span>
               </div>
-              <div class="basic-info__item" v-if="detection.malwareName && detection.malwareName.length > 0 ">
+              <div class="basic-info__item" v-if="detection.malwareName">
                 <i class="cn-icon cn-icon-trojan"></i>
                 <span>{{$t('detection.list.malwareName')}}&nbsp;:&nbsp;&nbsp;</span>
                 <span>{{detection.malwareName}}</span>
               </div>
-              <div class="basic-info__item" v-if="detection.cryptominingPool && detection.cryptominingPool.length > 0 ">
+              <div class="basic-info__item" v-if="detection.cryptominingPool">
                 <i class="cn-icon cn-icon-mining-pool"></i>
                 <span>{{$t('detection.list.cryptominingPool')}}&nbsp;:&nbsp;&nbsp;</span>
                 <span>{{detection.cryptominingPool}}</span>
@@ -43,6 +45,13 @@
                 <span>{{$t('detection.list.startTime')}}&nbsp;:&nbsp;&nbsp;</span>
                 <span>{{dayJs.tz(getMillisecond(detection.startTime)).format('YYYY-MM-DD HH:mm:ss')}}</span>
               </div>
+              <div class="basic-info__item">
+                <i class="cn-icon cn-icon-time2"></i>
+                <span>{{$t('overall.duration')}}&nbsp;:&nbsp;&nbsp;</span>
+                <span style="display: inline-block;height: 6px;width: 6px;border-radius: 50%;margin-right: 8px;"
+                      :style="pointColor(detection)"></span>
+                <span>{{unitConvert(detection.durationMs, 'time', null, null, 0).join(' ')}}</span>
+              </div>
             </div>
           </div>
         </div>
@@ -50,10 +59,28 @@
       <el-collapse-transition>
         <div class="cn-detection__detail-overview" v-if="!isCollapse">
           <el-divider></el-divider>
-          <detection-overview
+          <detection-security-event-overview
+              v-if="pageType === detectionPageType.securityEvent"
               :detection="detection"
               :time-filter="timeFilter"
-          ></detection-overview>
+          ></detection-security-event-overview>
+          <template v-else>
+            <detection-performance-event-ip-overview
+                v-if="detection.entityType === entityType.ip.toLowerCase()"
+                :detection="detection"
+                :time-filter="timeFilter"
+            ></detection-performance-event-ip-overview>
+            <detection-performance-event-domain-overview
+                v-else-if="detection.entityType === entityType.domain.toLowerCase()"
+                :detection="detection"
+                :time-filter="timeFilter"
+            ></detection-performance-event-domain-overview>
+            <detection-performance-event-app-overview
+                v-else-if="detection.entityType === entityType.app.toLowerCase()"
+                :detection="detection"
+                :time-filter="timeFilter"
+            ></detection-performance-event-app-overview>
+          </template>
         </div>
       </el-collapse-transition>
     </div>
@@ -61,26 +88,70 @@
 </template>
 
 <script>
-import { eventSeverityColor } from '@/utils/constants'
+import { eventSeverityColor, detectionPageType, entityType } from '@/utils/constants'
 import { getMillisecond } from '@/utils/date-util'
-import DetectionOverview from '@/views/detections/DetectionOverview'
+import unitConvert from '@/utils/unit-convert'
+import DetectionSecurityEventOverview from '@/views/detections/overview/DetectionSecurityEventOverview'
+import DetectionPerformanceEventIpOverview from '@/views/detections/overview/DetectionPerformanceEventIpOverview'
+import DetectionPerformanceEventAppOverview from '@/views/detections/overview/DetectionPerformanceEventAppOverview'
+import DetectionPerformanceEventDomainOverview from '@/views/detections/overview/DetectionPerformanceEventDomainOverview'
 export default {
   name: 'DetectionRow',
   components: {
-    DetectionOverview
+    DetectionSecurityEventOverview,
+    DetectionPerformanceEventIpOverview,
+    DetectionPerformanceEventAppOverview,
+    DetectionPerformanceEventDomainOverview
   },
   props: {
     index: Number,
     timeFilter: Object,
-    detection: Object
+    detection: Object,
+    pageType: String // 安全事件、服务质量
   },
   data () {
     return {
+      entityType,
+      detectionPageType,
       isCollapse: true, // 是否是折叠状态
       eventSeverityColor
     }
   },
+  computed: {
+    iconClass () {
+      let className
+      switch (this.detection.entityType) {
+        case ('ip'): {
+          className = 'cn-icon cn-icon-ip'
+          break
+        }
+        case ('domain'): {
+          className = 'cn-icon cn-icon-domain'
+          break
+        }
+        case ('app'): {
+          className = 'cn-icon cn-icon-app'
+          break
+        }
+        default:
+          break
+      }
+      return className
+    },
+    pointColor () {
+      return function (detection) {
+        let color = '#8FA1BE'
+        if (detection.startTime && detection.endTime) {
+          if (getMillisecond(detection.endTime) - getMillisecond(detection.startTime) < 5 * 60 * 1000) {
+            color = '#D84C4C'
+          }
+        }
+        return { backgroundColor: color }
+      }
+    }
+  },
   methods: {
+    unitConvert,
     getMillisecond,
     /* 切换折叠状态 */
     switchCollapse () {

src/views/detections/overview/DetectionPerformanceEventAppOverview.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="detection-detail-overview">
+    <div class="overview__left">
+      <div class="overview__title">{{$t('overall.remark')}}</div>
+      <div class="overview__row">
+        <div class="row__content">{{basicInfo.malwareDescription || '-'}}</div>
+      </div>
+      <div class="overview__title">Fields</div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('entities.category')}}</div>
+        <div class="row__content">{{basicInfo.appCategory}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('entities.subcategory')}}</div>
+        <div class="row__content">{{basicInfo.appSubcategory || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('entities.riskLevel')}}</div>
+        <div class="row__content">
+          <div class="row__tag" :style="`background-color:${eventSeverityColor[basicInfo.appRisk]}`">{{basicInfo.appRisk || '-'}}</div>
+        </div>
+      </div>
+    </div>
+    <div class="overview__right">
+      <div class="overview__title">{{$t('detections.goToEntity')}}</div>
+      <div class="overview__row">
+        <div class="row__content row__content--link">{{$t('detections.viewDetailOf', {ip: detection.appName})}}</div>
+      </div>
+      <div class="overview__title">{{$t('detections.goToHunt')}}</div>
+      <div class="overview__row">
+        <div class="row__content row__content--link">{{$t('detections.viewAllRelated')}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'
+import { eventSeverityColor } from '@/utils/constants'
+export default {
+  name: 'DetectionPerformanceEventAppOverview',
+  props: {
+    detection: Object
+  },
+  data () {
+    return {
+      eventSeverityColor,
+      basicInfo: {}
+    }
+  },
+  computed: {
+    computeLocation () {
+      return function (basicInfo) {
+        let result = ''
+        if (basicInfo.serverLocationCountry) {
+          result += basicInfo.serverLocationCountry
+        }
+        if (basicInfo.serverLocationProvince) {
+          if (result) {
+            result += ', '
+          }
+          result += basicInfo.serverLocationProvince
+        }
+        if (basicInfo.serverLocationRegion) {
+          if (result) {
+            result += ', '
+          }
+          result += basicInfo.serverLocationRegion
+        }
+        return result || '-'
+      }
+    }
+  },
+  methods: {
+    query () {
+      this.basicInfo = {
+        "clientLocationCountry": 1212,
+        "clientLocationProvince": "112.2.2.3",
+        "clientLocationRegion": "China",
+        "clientAsn": "Hebei",
+        "serverLocationCountry": "Xingtai",
+        "serverLocationProvince": "hehe",
+        "serverLocationRegion": "2.2.2.2",
+        "serverAsn": "China",
+        "domainCategoryName": "Hebei",
+        "domainCategoryGroup": "Xingtai",
+        "domainReputationScore": "hehe",
+        "domainReputationLevel": "high",
+        "appCategory": "vpn",
+        "appSubcategory": "foreign vpn",
+        "appRisk": "critical"
+      }
+      /*this.queryBasic().then(responses => {
+      })*/
+    },
+    queryBasic () {
+      return new Promise((resolve, reject) => {
+        try {
+          get(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.appName }).then(response => {
+            if (response.code === 200) {
+              resolve(response.data.list)
+            } else {
+              reject(response)
+            }
+          })
+        } catch (e) {
+          reject(e)
+        }
+      })
+    }
+  },
+  mounted () {
+    this.query()
+  }
+}
+</script>

src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="detection-detail-overview">
+    <div class="overview__left">
+      <div class="overview__title">{{$t('overall.remark')}}</div>
+      <div class="overview__row">
+        <div class="row__content">{{basicInfo.malwareDescription || '-'}}</div>
+      </div>
+      <div class="overview__title">Fields</div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('entities.category')}}</div>
+        <div class="row__content">{{basicInfo.domainCategoryName}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('entities.group')}}</div>
+        <div class="row__content">{{basicInfo.domainCategoryGroup || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('entities.credit')}}</div>
+        <div class="row__content">{{basicInfo.domainReputationScore || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('entities.reputationLevel')}}</div>
+        <div class="row__content">
+          <div class="row__tag" :style="`background-color:${eventSeverityColor[basicInfo.domainReputationLevel]}`">{{basicInfo.domainReputationLevel || '-'}}</div>
+        </div>
+      </div>
+    </div>
+    <div class="overview__right">
+      <div class="overview__title">{{$t('detections.goToEntity')}}</div>
+      <div class="overview__row">
+        <div class="row__content row__content--link">{{$t('detections.viewDetailOf', {ip: detection.domain})}}</div>
+      </div>
+      <div class="overview__title">{{$t('detections.goToHunt')}}</div>
+      <div class="overview__row">
+        <div class="row__content row__content--link">{{$t('detections.viewAllRelated')}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'
+import { eventSeverityColor } from '@/utils/constants'
+export default {
+  name: 'DetectionPerformanceEventDomainOverview',
+  props: {
+    detection: Object
+  },
+  data () {
+    return {
+      eventSeverityColor,
+      basicInfo: {}
+    }
+  },
+  computed: {
+    computeLocation () {
+      return function (basicInfo) {
+        let result = ''
+        if (basicInfo.serverLocationCountry) {
+          result += basicInfo.serverLocationCountry
+        }
+        if (basicInfo.serverLocationProvince) {
+          if (result) {
+            result += ', '
+          }
+          result += basicInfo.serverLocationProvince
+        }
+        if (basicInfo.serverLocationRegion) {
+          if (result) {
+            result += ', '
+          }
+          result += basicInfo.serverLocationRegion
+        }
+        return result || '-'
+      }
+    }
+  },
+  methods: {
+    query () {
+      this.basicInfo = {
+        "clientLocationCountry": 1212,
+        "clientLocationProvince": "112.2.2.3",
+        "clientLocationRegion": "China",
+        "clientAsn": "Hebei",
+        "serverLocationCountry": "Xingtai",
+        "serverLocationProvince": "hehe",
+        "serverLocationRegion": "2.2.2.2",
+        "serverAsn": "China",
+        "domainCategoryName": "Hebei",
+        "domainCategoryGroup": "Xingtai",
+        "domainReputationScore": "hehe",
+        "domainReputationLevel": "high",
+        "appCategory": "vpn",
+        "appSubcategory": "foreign vpn",
+        "appRisk": "critical"
+      }
+      /*this.queryBasic().then(responses => {
+      })*/
+    },
+    queryBasic () {
+      return new Promise((resolve, reject) => {
+        try {
+          get(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.appName }).then(response => {
+            if (response.code === 200) {
+              resolve(response.data.list)
+            } else {
+              reject(response)
+            }
+          })
+        } catch (e) {
+          reject(e)
+        }
+      })
+    }
+  },
+  mounted () {
+    this.query()
+  }
+}
+</script>

src/views/detections/overview/DetectionPerformanceEventIpOverview.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="detection-detail-overview">
+    <div class="overview__left">
+      <div class="overview__title">{{$t('overall.remark')}}</div>
+      <div class="overview__row">
+        <div class="row__content">{{basicInfo.malwareDescription || '-'}}</div>
+      </div>
+      <div class="overview__title">Fields</div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('overall.location')}}</div>
+        <div class="row__content">{{computeLocation(basicInfo)}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">ASN</div>
+        <div class="row__content">{{basicInfo.serverAsn || '-'}}</div>
+      </div>
+    </div>
+    <div class="overview__right">
+      <div class="overview__title">{{$t('detections.goToEntity')}}</div>
+      <div class="overview__row">
+        <div class="row__content row__content--link">{{$t('detections.viewDetailOf', {ip: detection.serverIp})}}</div>
+      </div>
+      <div class="overview__title">{{$t('detections.goToHunt')}}</div>
+      <div class="overview__row">
+        <div class="row__content row__content--link">{{$t('detections.viewAllRelated')}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { api, getData } from '@/utils/api'
+export default {
+  name: 'DetectionPerformanceEventIpOverview',
+  props: {
+    detection: Object
+  },
+  data () {
+    return {
+      basicInfo: {}
+    }
+  },
+  computed: {
+    computeLocation () {
+      return function (basicInfo) {
+        let result = ''
+        if (basicInfo.serverLocationCountry) {
+          result += basicInfo.serverLocationCountry
+        }
+        if (basicInfo.serverLocationProvince) {
+          if (result) {
+            result += ', '
+          }
+          result += basicInfo.serverLocationProvince
+        }
+        if (basicInfo.serverLocationRegion) {
+          if (result) {
+            result += ', '
+          }
+          result += basicInfo.serverLocationRegion
+        }
+        return result || '-'
+      }
+    }
+  },
+  methods: {
+    query () {
+      this.basicInfo = {
+        "clientLocationCountry": 1212,
+        "clientLocationProvince": "112.2.2.3",
+        "clientLocationRegion": "China",
+        "clientAsn": "Hebei",
+        "serverLocationCountry": "Xingtai",
+        "serverLocationProvince": "hehe",
+        "serverLocationRegion": "2.2.2.2",
+        "serverAsn": "China",
+        "domainCategoryName": "Hebei",
+        "domainCategoryGroup": "Xingtai",
+        "domainReputationScore": "hehe",
+        "domainReputationLevel": "high",
+        "appCategory": "vpn",
+        "appSubcategory": "foreign vpn",
+        "appRisk": "critical"
+      }
+      /*this.queryBasic().then(responses => {
+      })*/
+    },
+    queryBasic () {
+      return new Promise((resolve, reject) => {
+        try {
+          getData(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.serverIp }).then(data => {
+            resolve(data)
+          }).catch(error => {
+            reject(error)
+          })
+        } catch (e) {
+          reject(e)
+        }
+      })
+    }
+  },
+  mounted () {
+    this.query()
+  }
+}
+</script>

src/views/entityExplorer/entityList/Card.vue

@@ -63,7 +63,7 @@
       </template>
       <template v-else-if="entityData.entityType === 'domain'">
         <div class="body__row">
-          <span class="body__row-label"><i class="cn-icon cn-icon-category"></i>{{$t('entities.Group')}}：</span>
+          <span class="body__row-label"><i class="cn-icon cn-icon-category"></i>{{$t('entities.group')}}：</span>
           <div class="body__row-value" :title="entityData.domainCategoryGroup">{{entityData.domainCategoryGroup || '-'}}</div>
         </div>
         <div class="body__row">

src/views/entityExplorer/entityList/Row.vue

@@ -20,10 +20,7 @@
                 <div class="basic-info__item">
                   <i class="cn-icon cn-icon-position"></i>
                   <span>{{$t('overall.region')}}&nbsp;:&nbsp;&nbsp;</span>
-                  <span v-if="entityData.ipLocationProvince !== 'null' && entityData.ipLocationCity !== 'null'">{{$_.get(entityData, 'ipLocationProvince') + ', ' + $_.get(entityData, 'ipLocationCity') || '-'}}</span>
+                  <span>{{ipLocationRegion(entityData)}}</span>
-                  <span v-else-if="entityData.ipLocationProvince !== 'null'">{{$_.get(entityData, 'ipLocationProvince')}}</span>
-                  <span v-else-if="entityData.ipLocationCity !== 'null'">{{$_.get(entityData, 'ipLocationCity')}}</span>
-                  <span v-else>-</span>
                 </div>
                 <div class="basic-info__item">
                   <i class="cn-icon cn-icon-cloud"></i>
@@ -128,6 +125,25 @@ export default {
       isCollapse: true // 是否是折叠状态
     }
   },
+  computed: {
+    ipLocationRegion () {
+      return function (entityData) {
+        const hasProvinceAndCity = entityData.ipLocationProvince && entityData.ipLocationCity &&
+            entityData.ipLocationProvince !== 'null' && entityData.ipLocationCity !== 'null'
+        const hasProvince = entityData.ipLocationProvince && entityData.ipLocationProvince !== 'null'
+        const hasCity = entityData.ipLocationCity && entityData.ipLocationCity !== 'null'
+        if (hasProvinceAndCity) {
+          return `${entityData.ipLocationProvince}, ${entityData.ipLocationCity}`
+        } else if (hasProvince) {
+          return entityData.ipLocationProvince
+        } else if (hasCity) {
+          return entityData.ipLocationCity
+        } else {
+          return '-'
+        }
+      }
+    }
+  },
   setup () {
     return {
       unitConvert,