gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-1488 Subscriber详情页TAB组件开发

Browse Source
This commit is contained in:
hyx
2023-11-30 09:16:45 +08:00
parent d996769f7e
commit d43a9c8bba
15 changed files with 369 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/config.js
View File

@@ -14,6 +14,8 @@ const DEFAULT_TIME_FILTER_RANGE = {
informationAggregation: 0,
relatedEntity: 60 * 24 * 7,
openPort: 60 * 24 * 7,
deviceInformation: 60 * 24 * 7,
accountInformation: 60 * 24 * 7,
securityEvent: 60 * 24 * 7,
performanceEvent: 60 * 24 * 7,
behaviorPattern: 60 * 24 * 7

14
src/assets/css/font/iconfont.css
View File

@@ -1,8 +1,8 @@
@font-face {
font-family: "cn-icon"; /* Project id 2614877 */
src: url('iconfont.woff2?t=1699411209748') format('woff2'),
url('iconfont.woff?t=1699411209748') format('woff'),
url('iconfont.ttf?t=1699411209748') format('truetype');
src: url('iconfont.woff2?t=1701240781545') format('woff2'),
url('iconfont.woff?t=1701240781545') format('woff'),
url('iconfont.ttf?t=1701240781545') format('truetype');
}
.cn-icon {
@@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale;
}
.cn-icon-account-info:before {
content: "\e80e";
}
.cn-icon-device-info:before {
content: "\e80f";
}
.cn-icon-related:before {
content: "\e640";
}

2
src/assets/css/font/iconfont.js
View File

File diff suppressed because one or more lines are too long

BIN
src/assets/css/font/iconfont.ttf
View File

Binary file not shown.

BIN
src/assets/css/font/iconfont.woff
View File

Binary file not shown.

BIN
src/assets/css/font/iconfont.woff2
View File

Binary file not shown.

18
src/components/rightBox/settings/RoleBox.vue
View File

@@ -183,21 +183,21 @@ export default {
}
}
},
checkParentNode(node) {
if(node && this.$refs.menuTree.getNode(node)){
let parent = this.$refs.menuTree.getNode(node).parent
let parentNode = parent.data
if(parentNode && parentNode.id && parentNode.id !== 0 ){
this.$refs.menuTree.setChecked(parentNode,true,false)
checkParentNode (node) {
if (node && this.$refs.menuTree.getNode(node)) {
const parent = this.$refs.menuTree.getNode(node).parent
const parentNode = parent.data
if (parentNode && parentNode.id && parentNode.id !== 0) {
this.$refs.menuTree.setChecked(parentNode, true, false)
this.checkParentNode(parentNode)
}
}
},
selectChange: function (data, isCheck, childIsCheck) {
if(isCheck) {//如果是选中节点，则同步选中所有的父辈节点(有全选和半选两种状态)
if (isCheck) { // 如果是选中节点，则同步选中所有的父辈节点(有全选和半选两种状态)
this.checkParentNode(data)
} else {//如果是取消节点，则同步取消选中所有子节点
if(data.children && data.children.length > 0) {
} else { // 如果是取消节点，则同步取消选中所有子节点
if (data.children && data.children.length > 0) {
data.children.forEach(node => {
this.$refs.menuTree.setChecked(node, false, true)
})

4
src/components/rightBox/settings/UserBox.vue
View File

@@ -132,9 +132,9 @@ export default {
}
}
const validateConfirmPin = (rule, value, callback) => { // 确认密码的二次校验
if (_.isEmpty(value) && !_.isEmpty(this.editObject.pin)) {//密码有内容，确认密码没内容
if (_.isEmpty(value) && !_.isEmpty(this.editObject.pin)) { // 密码有内容，确认密码没内容
callback(new Error(this.$t('config.user.confirmPin')))
} else if (!_.isEmpty(value) && value !== this.editObject.pin) {//密码有内容，确认密码也有内容，内容不一致
} else if (!_.isEmpty(value) && value !== this.editObject.pin) { // 密码有内容，确认密码也有内容，内容不一致
callback(new Error(this.$t('config.user.confirmPinErr')))
} else {
callback()

2
src/components/table/setting/knowledgeBaseTableForCard.vue
View File

@@ -849,7 +849,7 @@ export default {
})
},
beforeUnmount () {
//clearTimeout(this.timer)
// clearTimeout(this.timer)
window.removeEventListener('resize', this.resize)
const dom = document.getElementById('psiphonBarChart')
if (dom) {

2
src/utils/api.js
View File

@@ -282,6 +282,8 @@ export const api = {
basicInfo: apiVersion + '/entity/detail/basic',
tags: apiVersion + '/entity/detail/kb/intelligence/tag',
informationAggregation: apiVersion + '/entity/detail/kb/intelligence/list',
deviceInformation: apiVersion + '/entity/detail/subscribe/device', // 暂时写的值
accountInformation: apiVersion + '/entity/detail/subscribe/account', // 暂时写的值
// 实体关系
entityGraph: {
basicInfo: apiVersion + '/entity/graph/relation/basic',

55
src/utils/constants.js
View File

@@ -95,9 +95,10 @@ export const position = {
}
export const entityType = {
app: 'APP',
domain: 'Domain',
ip: 'IP'
app: 'app',
domain: 'domain',
ip: 'ip',
subscribe: 'subscribe'
}
export const knowledgeCardUpdateRecordType = {
@@ -109,12 +110,60 @@ export const entityDetailTabsName = {
informationAggregation: 'informationAggregation',
relatedEntity: 'relatedEntity',
openPort: 'openPort',
deviceInformation: 'deviceInformation',
accountInformation: 'accountInformation',
digitalCertificate: 'digitalCertificate',
securityEvent: 'securityEvent',
performanceEvent: 'performanceEvent',
behaviorPattern: 'behaviorPattern'
}
export const entityDetailTabConfig = [
{
name: 'app',
config: [
{ name: entityDetailTabsName.relatedEntity, label: 'entities.relatedEntity', icon: 'cn-icon cn-icon-domain-name-resolution', tag: 0 },
{ name: entityDetailTabsName.openPort, label: 'entities.openPort', icon: 'cn-icon cn-icon-open-port', tag: 0 },
// { name: entityDetailTabsName.digitalCertificate, label: 'entities.digitalCertificate', icon: 'cn-icon cn-icon-digital-certificate', tag: 0 },
{ name: entityDetailTabsName.securityEvent, label: 'overall.securityEvent', icon: 'cn-icon cn-icon-security-event', tag: 0 },
{ name: entityDetailTabsName.performanceEvent, label: 'overall.performanceEvent', icon: 'cn-icon cn-icon-a-PerformanceEvent', tag: 0 }
]
},
{
name: 'domain',
config: [
{ name: entityDetailTabsName.informationAggregation, label: 'entities.informationAggregation', icon: 'cn-icon cn-icon-information-aggregation', tag: 0 },
{ name: entityDetailTabsName.relatedEntity, label: 'entities.relatedEntity', icon: 'cn-icon cn-icon-domain-name-resolution', tag: 0 },
{ name: entityDetailTabsName.openPort, label: 'entities.openPort', icon: 'cn-icon cn-icon-open-port', tag: 0 },
// { name: entityDetailTabsName.digitalCertificate, label: 'entities.digitalCertificate', icon: 'cn-icon cn-icon-digital-certificate', tag: 0 },
{ name: entityDetailTabsName.securityEvent, label: 'overall.securityEvent', icon: 'cn-icon cn-icon-security-event', tag: 0 },
{ name: entityDetailTabsName.performanceEvent, label: 'overall.performanceEvent', icon: 'cn-icon cn-icon-a-PerformanceEvent', tag: 0 }
]
},
{
name: 'ip',
config: [
{ name: entityDetailTabsName.informationAggregation, label: 'entities.informationAggregation', icon: 'cn-icon cn-icon-information-aggregation', tag: 0 },
{ name: entityDetailTabsName.relatedEntity, label: 'entities.relatedEntity', icon: 'cn-icon cn-icon-domain-name-resolution', tag: 0 },
{ name: entityDetailTabsName.openPort, label: 'entities.openPort', icon: 'cn-icon cn-icon-open-port', tag: 0 },
// { name: entityDetailTabsName.digitalCertificate, label: 'entities.digitalCertificate', icon: 'cn-icon cn-icon-digital-certificate', tag: 0 },
{ name: entityDetailTabsName.securityEvent, label: 'overall.securityEvent', icon: 'cn-icon cn-icon-security-event', tag: 0 },
{ name: entityDetailTabsName.performanceEvent, label: 'overall.performanceEvent', icon: 'cn-icon cn-icon-a-PerformanceEvent', tag: 0 },
{ name: entityDetailTabsName.behaviorPattern, label: 'entities.behaviorPattern', icon: 'cn-icon cn-icon-behavior', tag: 0 }
]
},
{
name: 'subscribe',
config: [
{ name: entityDetailTabsName.deviceInformation, label: 'entities.deviceInformation', icon: 'cn-icon cn-icon-device-info', tag: 0 },
{ name: entityDetailTabsName.accountInformation, label: 'entities.accountInformation', icon: 'cn-icon cn-icon-account-info', tag: 0 },
{ name: entityDetailTabsName.relatedEntity, label: 'entities.relatedEntity', icon: 'cn-icon cn-icon-domain-name-resolution', tag: 0 },
{ name: entityDetailTabsName.securityEvent, label: 'overall.securityEvent', icon: 'cn-icon cn-icon-security-event', tag: 0 },
{ name: entityDetailTabsName.performanceEvent, label: 'overall.performanceEvent', icon: 'cn-icon cn-icon-a-PerformanceEvent', tag: 0 }
]
}
]
export const entityDetailRelatedEntitiesShowSize = 100
export const echartsFontSize = {

6
src/views/charts2/chart-mixin.js
View File

@@ -47,6 +47,12 @@ export default {
case entityDetailTabsName.openPort:
dataRangeValue = DEFAULT_TIME_FILTER_RANGE.entity.openPort
break
case entityDetailTabsName.deviceInformation:
dataRangeValue = DEFAULT_TIME_FILTER_RANGE.entity.deviceInformation
break
case entityDetailTabsName.accountInformation:
dataRangeValue = DEFAULT_TIME_FILTER_RANGE.entity.accountInformation
break
case entityDetailTabsName.informationAggregation:
dataRangeValue = DEFAULT_TIME_FILTER_RANGE.entity.informationAggregation
break

56
src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
View File

@@ -9,7 +9,7 @@
class="tab-pane--border-card">
<template #label>
<!--<div class="el-tabs__active-bar is-top" style="width: 80.9998px; transform: translateX(177px);"></div>-->
<i :class="tab.icon"></i>{{tab.label}}
<i :class="tab.icon"></i>{{$t(tab.label)}}
<el-tag size="small" style="margin-left: 6px" :color="tab.name === activeTab ? 'rgb(223,237,248)' : 'rgb(237,237,237)'" round>
<span :style="{color: tab.name === activeTab ? '#046ECA' : '#717171'}">{{ tab.tag }}</span>
</el-tag>
@@ -21,6 +21,8 @@
<performance-event v-else-if="tab.name === entityDetailTabsName.performanceEvent && tab.name === activeTab" @toggleLoading="setLoading" :entity="entity" @checkTag="setTag" />
<open-port v-else-if="tab.name === entityDetailTabsName.openPort && tab.name === activeTab" @toggleLoading="setLoading" :entity="entity" @checkTag="setTag"></open-port>
<behavior-pattern v-else-if="tab.name === entityDetailTabsName.behaviorPattern && tab.name === activeTab" @toggleLoading="setLoading" :entity="entity" @checkTag="setTag"></behavior-pattern>
<device-information v-else-if="tab.name === entityDetailTabsName.deviceInformation && tab.name === activeTab" @toggleLoading="setLoading" :entity="entity" @checkTag="setTag"></device-information>
<account-information v-else-if="tab.name === entityDetailTabsName.accountInformation && tab.name === activeTab" @toggleLoading="setLoading" :entity="entity" @checkTag="setTag"></account-information>
</el-tab-pane>
</el-tabs>
</div>
@@ -37,12 +39,14 @@ import SecurityEvent from '@/views/charts2/charts/entityDetail/tabs/SecurityEven
import PerformanceEvent from '@/views/charts2/charts/entityDetail/tabs/PerformanceEvent'
import BehaviorPattern from '@/views/charts2/charts/entityDetail/tabs/BehaviorPattern'
import OpenPort from '@/views/charts2/charts/entityDetail/tabs/OpenPort'
import AccountInformation from '@/views/charts2/charts/entityDetail/tabs/AccountInformation'
import DeviceInformation from '@/views/charts2/charts/entityDetail/tabs/DeviceInformation'
import DigitalCertificate from '@/views/charts2/charts/entityDetail/tabs/DigitalCertificate'
import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
import { useRoute } from 'vue-router'
import axios from 'axios'
import { api } from '@/utils/api'
import { tagValueLabelMapping } from '../../../../utils/constants'
import { tagValueLabelMapping, entityType, entityDetailTabConfig } from '../../../../utils/constants'
export default {
name: 'EntityDetailTabs',
@@ -54,6 +58,8 @@ export default {
InformationAggregation,
DomainNameResolution,
OpenPort,
DeviceInformation,
AccountInformation,
DigitalCertificate
},
data () {
@@ -79,19 +85,9 @@ export default {
// eslint-disable-next-line vue/no-setup-props-destructure
const entityType = props.entity.entityType
const tabs = reactive([
{ name: entityDetailTabsName.relatedEntity, label: i18n.global.t('entities.relatedEntity'), icon: 'cn-icon cn-icon-domain-name-resolution', tag: 0 },
{ name: entityDetailTabsName.openPort, label: i18n.global.t('entities.openPort'), icon: 'cn-icon cn-icon-open-port', tag: 0 },
// { name: entityDetailTabsName.digitalCertificate, label: i18n.global.t('entities.digitalCertificate'), icon: 'cn-icon cn-icon-digital-certificate', tag: 0 },
{ name: entityDetailTabsName.securityEvent, label: i18n.global.t('overall.securityEvent'), icon: 'cn-icon cn-icon-security-event', tag: 0 },
{ name: entityDetailTabsName.performanceEvent, label: i18n.global.t('overall.performanceEvent'), icon: 'cn-icon cn-icon-a-PerformanceEvent', tag: 0 }
])
if (entityType !== 'app') {
tabs.unshift({ name: entityDetailTabsName.informationAggregation, label: i18n.global.t('entities.informationAggregation'), icon: 'cn-icon cn-icon-information-aggregation', tag: 0 })
}
if (entityType === 'ip') {
tabs.push({ name: entityDetailTabsName.behaviorPattern, label: i18n.global.t('entities.behaviorPattern'), icon: 'cn-icon cn-icon-behavior', tag: 0 })
}
const tabObj = entityDetailTabConfig.find(tab => tab.name === entityType)
const tabs = reactive(tabObj ? tabObj.config : [])
const activeTab = ref(tabs[0].name)
const { query } = useRoute()
@@ -114,10 +110,11 @@ export default {
const openPort = axios.get(url, { params: this.getParamsByTabType(entityDetailTabsName.openPort) })
const security = axios.get(`${api.entity.security}/${this.entity.entityType}`, { params: this.getParamsByTabType(entityDetailTabsName.securityEvent) })
// const performance = axios.get(`${api.entity.performance}/${this.entityType}`, { params: this.getParamsByTabType(entityDetailTabsName.performanceEvent) })
const requestArray = [informationAggregation, openPort, security]
// todo 暂时隐藏performance的请求，后续接口开发完毕后再解开注释
// Promise.allSettled([informationAggregation, openPort, security, performance]).then(response => {
Promise.allSettled([informationAggregation, openPort, security]).then(response => {
Promise.allSettled(requestArray).then(response => {
const informationAggregationResponse = response[0].value
if (informationAggregationResponse && informationAggregationResponse.status === 200) {
const list = []
@@ -163,25 +160,40 @@ export default {
const relatedEntityParams = this.getParamsByTabType(entityDetailTabsName.relatedEntity)
// 域名解析
if (this.entity.entityType === 'app') {
if (this.entity.entityType === entityType.app) {
const ipsOfApp = axios.get(api.entity.domainNameResolutionAboutIpsOfApp, { params: relatedEntityParams })
const domainsOfApp = axios.get(api.entity.domainNameResolutionAboutDomainsOfApp, { params: relatedEntityParams })
this.promiseData(ipsOfApp, domainsOfApp)
}
if (this.entity.entityType === 'ip') {
if (this.entity.entityType === entityType.ip) {
const appsOfIp = axios.get(api.entity.domainNameResolutionAboutAppsOfIp, { params: relatedEntityParams })
const domainsOfIp = axios.get(api.entity.domainNameResolutionAboutDomainsOfIp, { params: relatedEntityParams })
const behaviorPattern = axios.get(api.entity.behaviorPattern, { params: relatedEntityParams })
this.promiseData(appsOfIp, domainsOfIp, behaviorPattern)
}
if (this.entity.entityType === 'domain') {
if (this.entity.entityType === entityType.domain) {
const appsOfDomain = axios.get(api.entity.domainNameResolutionAboutAppsOfDomain, { params: relatedEntityParams })
const ipsOfDomain = axios.get(api.entity.domainNameResolutionAboutIpsOfDomain, { params: relatedEntityParams })
const fqdnsOfDomain = axios.get(api.entity.domainNameResolutionAboutFQDNsOfDomain, { params: relatedEntityParams })
this.promiseData(appsOfDomain, ipsOfDomain, fqdnsOfDomain)
}
if (this.entity.entityType === entityType.subscribe) {
axios.get(api.entity.deviceInformation, { params: this.getParamsByTabType(entityDetailTabsName.deviceInformation) }).then(response => {
const res = response.data
if (response.status === 200) {
this.initSetTag(entityDetailTabsName.deviceInformation, res.data.result.length)
}
})
const accountInformation = axios.get(api.entity.accountInformation, { params: this.getParamsByTabType(entityDetailTabsName.accountInformation) }).then(response => {
const res = response.data
if (response.status === 200) {
this.initSetTag(entityDetailTabsName.accountInformation, res.data.result.length)
}
})
}
},
promiseData (data1, data2, data3) {
Promise.all([data1, data2, data3]).then(res => {
@@ -189,7 +201,7 @@ export default {
const res1 = res[1].data
switch (this.entity.entityType) {
case 'ip': {
case entityType.ip: {
const len1 = res[0].status === 200 ? res0.data.result.length : 0
const len2 = res[1].status === 200 ? res1.data.result.length : 0
this.initSetTag(entityDetailTabsName.relatedEntity, len1 + len2)
@@ -207,7 +219,7 @@ export default {
this.initSetTag(entityDetailTabsName.behaviorPattern, behaviorPatternLen)
break
}
case 'domain': {
case entityType.domain: {
const res2 = res[2].data
const len1 = res[0].status === 200 ? res0.data.result.length : 0
const len2 = res[1].status === 200 ? res1.data.result.length : 0
@@ -215,7 +227,7 @@ export default {
this.initSetTag(entityDetailTabsName.relatedEntity, len1 + len2 + len3)
break
}
case 'app': {
case entityType.app: {
const len1 = res[0].status === 200 ? res0.data.result.length : 0
const len2 = res[1].status === 200 ? res1.data.result.length : 0
this.initSetTag(entityDetailTabsName.relatedEntity, len1 + len2)

139
src/views/charts2/charts/entityDetail/tabs/AccountInformation.vue Normal file
View File

@@ -0,0 +1,139 @@
<template>
<div>
<chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
<chart-no-data v-if="isNoData && !showError"></chart-no-data>
<div v-if="!showError && !isNoData && initFlag" class="type-data__column">
<div class="type-data">
<div class="type-title">
<span class="title-mark"></span>
<span class="type-title-word">{{ $t('entities.tab.email') }}</span>({{ mailList.length }})
</div>
<div class="type-content">
<div v-for="(mail, index) in mailList.slice(0,showMailListInfo.num)" :key="index" class="data-item">
{{ mail }}
</div>
</div>
<div class="more" v-if="mailList.length > entityDetailRelatedEntitiesShowSize">
<span class="button" :style="{'opacity': mailList.length > showMailListInfo.num ? 1 : 0.6}" @click="showMore(showMailListInfo,mailList)">{{ $t('overall.more') }} > </span>
</div>
</div>
</div>
<div v-if="!showError2 && !isNoData2 && initFlag" class="type-data__column">
<div class="type-data">
<div class="type-title">
<span class="title-mark"></span>
<span class="type-title-word">{{ $t('entities.tab.wetchat') }}</span>({{ wetchatList.length }})
</div>
<div class="type-content">
<div v-for="(wetchat, index) in wetchatList.slice(0,showWetchatListInfo.num)" :key="index" class="data-item">
{{ wetchat }}
</div>
</div>
<div class="more" v-if="wetchatList.length > entityDetailRelatedEntitiesShowSize">
<span class="button" :style="{'opacity': wetchatList.length > showWetchatListInfo.num ? 1 : 0.6}" @click="showMore(showWetchatListInfo,wetchatList)">{{ $t('overall.more') }} > </span>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import chartMixin from '@/views/charts2/chart-mixin'
import { api } from '@/utils/api'
import chartNoData from '@/views/charts/charts/ChartNoData'
import { entityDetailTabsName } from '@/utils/constants'
import { ref } from 'vue'
import { getNowTime } from '@/utils/date-util'
export default {
name: 'AccountInformation',
mixins: [chartMixin],
props: {
},
data () {
return {
mailList: [],
showMailListInfo: {
num: 0
},
wetchatList: [],
showWetchatListInfo: {
num: 0
},
showError: false,
errorMsg: '',
initFlag: false, // 初始化标识，请求接口之后再显示，避免标题初始化会闪一下
showError2: false,
errorMsg2: ''
}
},
components: {
chartNoData
},
mounted () {
this.initData()
},
setup (props) {
// range取 config.js 中配置的值
const dateRangeValue = DEFAULT_TIME_FILTER_RANGE.entity.accountInformation
const timeFilter = ref({ dateRangeValue })
const { startTime, endTime } = getNowTime(dateRangeValue)
timeFilter.value.startTime = startTime
timeFilter.value.endTime = endTime
return {
timeFilter
}
},
methods: {
initData () {
const params = this.getParams()
this.toggleLoading(true)
axios.get(api.entity.accountInformation, { params: params }).then(response => {
const res = response.data
if (response.status === 200) {
this.isNoData = res.data.result.length === 0
this.$emit('checkTag', entityDetailTabsName.accountInformation, res.data.result.length)
this.showError = false
if (!this.isNoData) {
this.mailList = res.data.result
this.handleShowDataNum(this.showMailListInfo, this.mailList)
}
} else {
this.httpError(res)
}
}).catch(e => {
this.httpError(e)
}).finally(() => {
// 测试代码----------------
this.mailList = [
'Lina@126.com.cn',
'Sina@qq.com'
]
this.handleShowDataNum(this.showMailListInfo, this.mailList)
this.wetchatList = [
'uawei0',
'phoneomax',
'iaomi2'
]
this.handleShowDataNum(this.showWetchatListInfo, this.wetchatList)
this.isNoData = false
this.showError = false
this.isNoData2 = false
this.showError2 = false
// ----------------------
this.initFlag = true
this.toggleLoading(false)
})
},
httpError (e) {
this.$emit('checkTag', entityDetailTabsName.accountInformation, 0)
this.isNoData = false
this.showError = true
this.errorMsg = this.errorMsgHandler(e)
}
}
}
</script>

110
src/views/charts2/charts/entityDetail/tabs/DeviceInformation.vue Normal file
View File

@@ -0,0 +1,110 @@
<template>
<div>
<chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
<chart-no-data v-if="isNoData && !showError"></chart-no-data>
<div v-if="!showError && !isNoData && initFlag" class="type-data__column">
<div class="type-data">
<div class="type-title">
<span class="title-mark"></span>
<span class="type-title-word">{{ $t('entities.tab.device') }}</span>({{ deviceList.length }})
</div>
<div class="type-content">
<div v-for="(device, index) in deviceList.slice(0,showDeviceListInfo.num)" :key="index" class="data-item">
{{ device }}
</div>
</div>
<div class="more" v-if="deviceList.length > entityDetailRelatedEntitiesShowSize">
<span class="button" :style="{'opacity': deviceList.length > showDeviceListInfo.num ? 1 : 0.6}" @click="showMore(showDeviceListInfo,deviceList)">{{ $t('overall.more') }} > </span>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import chartMixin from '@/views/charts2/chart-mixin'
import { api } from '@/utils/api'
import chartNoData from '@/views/charts/charts/ChartNoData'
import { entityDetailTabsName } from '@/utils/constants'
import { ref } from 'vue'
import { getNowTime } from '@/utils/date-util'
export default {
name: 'DeviceInformation',
mixins: [chartMixin],
props: {
},
data () {
return {
deviceList: [],
showDeviceListInfo: {
num: 0
},
showError: false,
errorMsg: '',
url: api.entity.deviceInformation,
initFlag: false // 初始化标识，请求接口之后再显示，避免标题初始化会闪一下
}
},
components: {
chartNoData
},
mounted () {
this.initData()
},
setup (props) {
// range取 config.js 中配置的值
const dateRangeValue = DEFAULT_TIME_FILTER_RANGE.entity.deviceInformation
const timeFilter = ref({ dateRangeValue })
const { startTime, endTime } = getNowTime(dateRangeValue)
timeFilter.value.startTime = startTime
timeFilter.value.endTime = endTime
return {
timeFilter
}
},
methods: {
initData () {
const params = this.getParams()
this.toggleLoading(true)
axios.get(this.url, { params: params }).then(response => {
const res = response.data
if (response.status === 200) {
this.isNoData = res.data.result.length === 0
this.$emit('checkTag', entityDetailTabsName.deviceInformation, res.data.result.length)
this.showError = false
if (!this.isNoData) {
this.deviceList = res.data.result
this.handleShowDataNum(this.showDeviceListInfo, this.deviceList)
}
} else {
this.httpError(res)
}
}).catch(e => {
this.httpError(e)
}).finally(() => {
// 测试代码----------------
this.deviceList = [
'Huawei mate20',
'Iphone 14pro max',
'Xiaomi 12'
]
this.handleShowDataNum(this.showDeviceListInfo, this.deviceList)
this.isNoData = false
this.showError = false
// ----------------------
this.initFlag = true
this.toggleLoading(false)
})
},
httpError (e) {
this.$emit('checkTag', entityDetailTabsName.deviceInformation, 0)
this.isNoData = false
this.showError = true
this.errorMsg = this.errorMsgHandler(e)
}
}
}
</script>