diff --git a/src/assets/css/font/iconfont.css b/src/assets/css/font/iconfont.css
index d1419853..5dfbc013 100644
--- a/src/assets/css/font/iconfont.css
+++ b/src/assets/css/font/iconfont.css
@@ -1,8 +1,8 @@
@font-face {
font-family: "cn-icon"; /* Project id 2614877 */
- src: url('iconfont.woff2?t=1683361452726') format('woff2'),
- url('iconfont.woff?t=1683361452726') format('woff'),
- url('iconfont.ttf?t=1683361452726') format('truetype');
+ src: url('iconfont.woff2?t=1683537147894') format('woff2'),
+ url('iconfont.woff?t=1683537147894') format('woff'),
+ url('iconfont.ttf?t=1683537147894') format('truetype');
}
.cn-icon {
@@ -21,10 +21,6 @@
content: "\e7f0";
}
-.cn-icon-network-overview:before {
- content: "\e7f1";
-}
-
.cn-icon-copy:before {
content: "\e7ee";
}
@@ -45,7 +41,7 @@
content: "\e7d4";
}
-.cn-icon-register-email:before {
+.cn-icon-registry-email:before {
content: "\e7d5";
}
@@ -77,7 +73,7 @@
content: "\e7dc";
}
-.cn-icon-registration-agency:before {
+.cn-icon-registry:before {
content: "\e7dd";
}
diff --git a/src/assets/css/font/iconfont.js b/src/assets/css/font/iconfont.js
index 06fc9992..2524d3ae 100644
--- a/src/assets/css/font/iconfont.js
+++ b/src/assets/css/font/iconfont.js
@@ -1 +1 @@
-window._iconfont_svg_string_2614877='',function(l){var a=(a=document.getElementsByTagName("script"))[a.length-1],c=a.getAttribute("data-injectcss"),a=a.getAttribute("data-disable-injectsvg");if(!a){var h,o,i,m,v,z=function(a,c){c.parentNode.insertBefore(a,c)};if(c&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}h=function(){var a,c=document.createElement("div");c.innerHTML=l._iconfont_svg_string_2614877,(c=c.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",c=c,(a=document.body).firstChild?z(c,a.firstChild):a.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(h,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),h()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(i=h,m=l.document,v=!1,n(),m.onreadystatechange=function(){"complete"==m.readyState&&(m.onreadystatechange=null,t())})}function t(){v||(v=!0,i())}function n(){try{m.documentElement.doScroll("left")}catch(a){return void setTimeout(n,50)}t()}}(window);
\ No newline at end of file
+window._iconfont_svg_string_2614877='',function(l){var a=(a=document.getElementsByTagName("script"))[a.length-1],c=a.getAttribute("data-injectcss"),a=a.getAttribute("data-disable-injectsvg");if(!a){var h,o,i,m,v,z=function(a,c){c.parentNode.insertBefore(a,c)};if(c&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}h=function(){var a,c=document.createElement("div");c.innerHTML=l._iconfont_svg_string_2614877,(c=c.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",c=c,(a=document.body).firstChild?z(c,a.firstChild):a.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(h,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),h()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(i=h,m=l.document,v=!1,s(),m.onreadystatechange=function(){"complete"==m.readyState&&(m.onreadystatechange=null,t())})}function t(){v||(v=!0,i())}function s(){try{m.documentElement.doScroll("left")}catch(a){return void setTimeout(s,50)}t()}}(window);
\ No newline at end of file
diff --git a/src/assets/css/font/iconfont.ttf b/src/assets/css/font/iconfont.ttf
index d5276429..2736caf5 100644
Binary files a/src/assets/css/font/iconfont.ttf and b/src/assets/css/font/iconfont.ttf differ
diff --git a/src/assets/css/font/iconfont.woff b/src/assets/css/font/iconfont.woff
index 4d92327d..00696a3a 100644
Binary files a/src/assets/css/font/iconfont.woff and b/src/assets/css/font/iconfont.woff differ
diff --git a/src/assets/css/font/iconfont.woff2 b/src/assets/css/font/iconfont.woff2
index e92b0204..e1d61665 100644
Binary files a/src/assets/css/font/iconfont.woff2 and b/src/assets/css/font/iconfont.woff2 differ
diff --git a/src/views/charts2/ChartList.vue b/src/views/charts2/ChartList.vue
index b715b69c..fe789c23 100644
--- a/src/views/charts2/ChartList.vue
+++ b/src/views/charts2/ChartList.vue
@@ -61,7 +61,22 @@ export default {
rowHeight: 40,
rowMargin: 20,
colMargin: 20,
- debounceFunc: null
+ debounceFunc: null,
+ timeoutFunc: null,
+ // 需要动态处理高度的chart
+ dynamicHeightCharts: [
+ {
+ selector: '.app-cards',
+ // 需要额外修正的值
+ correctionHeight: 24,
+ chartType: typeMapping.networkOverview.appList
+ },
+ {
+ selector: '.entity-detail-info',
+ correctionHeight: 174,
+ chartType: typeMapping.entityDetail.basicInfo
+ }
+ ]
}
},
components: {
@@ -123,26 +138,33 @@ export default {
resizeLine () {
this.$refs.chartGrid.resizeLine()
},
- resizeAppChart () {
- const appCardsDom = document.querySelector('.app-cards')
- const layout = _.cloneDeep(this.layout)
- const overviewAppChart = layout.find(c => c.type === typeMapping.networkOverview.appList)
- if (appCardsDom) {
- const cardsHeight = appCardsDom.offsetHeight
- if (cardsHeight) {
- const headerHeight = 24
- overviewAppChart.h = (cardsHeight + headerHeight + this.rowMargin) / (this.rowHeight + this.rowMargin)
- this.layout = layout
+ // 动态处理chart高度
+ handleDynamicChartHeight () {
+ this.dynamicHeightCharts.forEach(chart => {
+ const dom = document.querySelector(chart.selector)
+ if (dom) {
+ const layout = _.cloneDeep(this.layout)
+ const destinationChart = layout.find(c => c.type === chart.chartType)
+ const domHeight = dom.offsetHeight
+ if (domHeight) {
+ destinationChart.h = (domHeight + chart.correctionHeight + this.rowMargin) / (this.rowHeight + this.rowMargin)
+ this.layout = layout
+ }
}
- }
+ })
}
},
mounted () {
- this.debounceFunc = _.debounce(this.resizeAppChart, 400)
+ this.timeoutFunc = setTimeout(() => {
+ this.handleDynamicChartHeight()
+ }, 400)
+ this.handleDynamicChartHeight()
+ this.debounceFunc = _.debounce(this.handleDynamicChartHeight, 400)
window.addEventListener('resize', this.debounceFunc)
},
beforeUnmount () {
window.removeEventListener('resize', this.debounceFunc)
+ clearTimeout(this.timeoutFunc)
}
}
diff --git a/src/views/charts2/charts/entityDetail/EntityDetailBasicInfo.vue b/src/views/charts2/charts/entityDetail/EntityDetailBasicInfo.vue
index 3234a846..b25045aa 100644
--- a/src/views/charts2/charts/entityDetail/EntityDetailBasicInfo.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailBasicInfo.vue
@@ -40,7 +40,7 @@
{{card.label}}:
-
{{card.value}}
+
{{card.value}}
@@ -118,7 +118,7 @@
.dividing-line {
position: absolute;
- top: 169px;
+ top: 159px;
left: 30px;
height: 1px;
width: calc(100% - 60px);
@@ -184,7 +184,7 @@
.entity-tags {
display: flex;
align-items: center;
- height: 70px;
+ height: 60px;
.entity-tag {
margin-right: 10px;
@@ -199,12 +199,12 @@
flex-flow: row wrap;
align-content: space-around;
margin-top: 5px;
- height: calc(100% - 135px);
.detail-card {
display: flex;
padding: 0 12px;
width: 298px;
+ height: 83px;
align-items: center;
i {
@@ -219,9 +219,13 @@
color: #717171;
}
.detail-card__value {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+ overflow: hidden;
+ color: #222;
line-height: 18px;
font-size: 14px;
- color: #222;
}
}
}
@@ -339,6 +343,32 @@ export default {
{ icon: 'cn-icon cn-icon-geo-location', name: 'location', label: i18n.global.t('entities.geographicLocation'), value: '你好啊' },
{ icon: 'cn-icon cn-icon-dns-ptr', name: 'dnsPtr', label: 'DNS PTR', value: '-' }
)
+ break
+ }
+ case 'domain': {
+ detailCards.value = _.concat(detailCards.value,
+ { icon: 'cn-icon cn-icon-category2', name: 'category', label: i18n.global.t('entities.category'), value: 'category' },
+ { icon: 'cn-icon cn-icon-sub-type', name: 'subcategory', label: i18n.global.t('entities.subcategory'), value: 'this is a long long long long long subcategory' },
+ { icon: 'cn-icon cn-icon-credit-rating', name: 'creditLevel', label: i18n.global.t('entities.creditLevel2'), value: 'a value of credit level' },
+ { icon: 'cn-icon cn-icon-expire-date', name: 'expirationDate', label: i18n.global.t('entities.expirationDate2'), value: '2022-02-22 22:22:22' },
+ { icon: 'cn-icon cn-icon-registrar', name: 'registrar', label: i18n.global.t('entities.registrar'), value: 'XX注册商' },
+ { icon: 'cn-icon cn-icon-registration-agency', name: 'registry', label: i18n.global.t('entities.registry'), value: 'XX注册机构' },
+ { icon: 'cn-icon cn-icon-registration-country', name: 'country', label: i18n.global.t('entities.registrationCountry'), value: 'China' },
+ { icon: 'cn-icon cn-icon-registration-date', name: 'registrationDate', label: i18n.global.t('entities.registrationDate'), value: '2011-11-11 11:11:11' },
+ { icon: 'cn-icon cn-icon-registry-email', name: 'registryEmail', label: i18n.global.t('entities.registryEmail'), value: '注册机构邮箱' }
+ )
+ break
+ }
+ case 'app': {
+ detailCards.value = _.concat(detailCards.value,
+ { icon: 'cn-icon cn-icon-category2', name: 'category', label: i18n.global.t('entities.category'), value: 'category' },
+ { icon: 'cn-icon cn-icon-sub-type', name: 'subcategory', label: i18n.global.t('entities.subcategory'), value: 'this is a long long long long long subcategory' },
+ { icon: 'cn-icon cn-icon-credit-rating', name: 'creditLevel', label: i18n.global.t('entities.creditLevel2'), value: 'a value of credit level' },
+ { icon: 'cn-icon cn-icon-technology', name: 'technology', label: i18n.global.t('overall.technology'), value: 'xx技术' },
+ { icon: 'cn-icon cn-icon-app-name', name: 'name', label: i18n.global.t('overall.appName2'), value: 'APP的名称' },
+ { icon: 'cn-icon cn-icon-app-full-name', name: 'fullName', label: i18n.global.t('overall.appFullName'), value: 'APP的全称' },
+ { icon: 'cn-icon cn-icon-description', name: 'description', label: i18n.global.t('config.dataSource.description'), value: 'A domain registry is an organization responsible for managing the top-level domain (TLD), such as .com, .net, .org, and more, for any given domain name. Domain registries can act as a database of available domains and work with registrars, such as DomainRegistry.com, to purchase a domain.' }
+ )
}
}
return {