diff --git a/public/index.html b/public/index.html
index 8032a72d..b73abec8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -42,9 +42,6 @@
body,html{font-size: 16px !important;}
}/*>=1920的设备*/
- @media only screen and (min-width: 2048px) {
- body,html{font-size: 18px !important;}
- }/*>=2048的设备*/
@media only screen and (min-width: 2560px) {
body,html{font-size: 22px !important;}
}/*>=2560的设备*/
diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss
index 1a2b05cf..561bfd45 100644
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -18,7 +18,6 @@ body {
}
.temp-dom {
visibility: hidden;
- font-size: 14px;
position: fixed;
}
.icon {
diff --git a/src/components/layout/Home.vue b/src/components/layout/Home.vue
index c7ad5c6f..f9f0392a 100644
--- a/src/components/layout/Home.vue
+++ b/src/components/layout/Home.vue
@@ -5,8 +5,6 @@
-
-
diff --git a/src/utils/tools.js b/src/utils/tools.js
index 21e7e25d..0f850dba 100644
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -653,6 +653,29 @@ export function arrayIsEqual (arr1, arr2) {
}
}
+// 字体长度缓存记录,{ 'fontSize': { 'limitWidth': { 'text': xxx } } }
+const fontCache = {}
+// 处理文本超长
+export function truncateText (text, limitWidth, fontSize = 12, ellipsis = '...') {
+ if (!text || !limitWidth) {
+ return null
+ }
+ // hit cache
+ const cache = fontCache[`${fontSize}`] && fontCache[`${fontSize}`][`${limitWidth}`]
+ if (cache) {
+ const hit = Object.keys(cache).find(k => k === text)
+ if (hit) {
+ return cache[hit]
+ }
+ }
+ // 计算
+ const dom = document.createElement('span')
+ dom.classList.add('temp-dom')
+ dom.style.fontSize = `${fontSize}px`
+ dom.innerText = text
+ return dom.offsetWidth
+}
+
export function scrollToTop (dom, toTop, duration, direction) {
const clientHeight = dom.clientHeight
const currentTop = dom.scrollTop
diff --git a/src/views/charts/PanelChartList.vue b/src/views/charts/PanelChartList.vue
index 45249841..b51226ac 100644
--- a/src/views/charts/PanelChartList.vue
+++ b/src/views/charts/PanelChartList.vue
@@ -156,17 +156,14 @@ export default {
}, 100)
},
chartHeightData (e) {
- if (e.currentTarget.innerWidth < 1280) {
+ const width = e.currentTarget.innerWidth
+ if (width < 1440) {
this.rowHeight = 25
- } else if (e.currentTarget.innerWidth >= 1280 && e.currentTarget.innerWidth <= 1440) {
- this.rowHeight = 25
- } else if (e.currentTarget.innerWidth >= 1440 && e.currentTarget.innerWidth < 1920) {
+ } else if (width >= 1440 && width < 1920) {
this.rowHeight = 32.5
- } else if (e.currentTarget.innerWidth >= 1920 && e.currentTarget.innerWidth <= 2048) {
+ } else if (width >= 1920 && width < 2560) {
this.rowHeight = 40
- } else if (e.currentTarget.innerWidth >= 2048 && e.currentTarget.innerWidth <= 2560) {
- this.rowHeight = 55
- } else if (e.currentTarget.innerWidth > 2560) {
+ } else {
this.rowHeight = 55
}
}
@@ -191,19 +188,15 @@ export default {
},
setup (props) {
const { currentRoute } = useRouter()
- const htmlHeight = document.getElementsByTagName('html')[0].clientWidth
+ const clientWidth = document.getElementsByTagName('html')[0].clientWidth
const rowHeight = ref(0)
- if (htmlHeight < 1280) {
+ if (clientWidth < 1440) {
rowHeight.value = 25
- } else if (htmlHeight >= 1280 && htmlHeight <= 1440) {
- rowHeight.value = 25
- } else if (htmlHeight >= 1440 && htmlHeight < 1920) {
+ } else if (clientWidth >= 1440 && clientWidth < 1920) {
rowHeight.value = 32.5
- } else if (htmlHeight >= 1920 && htmlHeight <= 2048) {
+ } else if (clientWidth >= 1920 && clientWidth < 2560) {
rowHeight.value = 40
- } else if (htmlHeight >= 2048 && htmlHeight <= 2560) {
- rowHeight.value = 55
- } else if (htmlHeight > 2560) {
+ } else {
rowHeight.value = 55
}
return {
diff --git a/src/views/charts/charts/tools.js b/src/views/charts/charts/tools.js
index 767abb06..2407470b 100644
--- a/src/views/charts/charts/tools.js
+++ b/src/views/charts/charts/tools.js
@@ -337,7 +337,7 @@ export function axisFormatter (params) {
return str
}
export function tooLongFormatter (name) {
- return format.truncateText(name, 110, '12')
+ return format.truncateText(name, 110, '12px')
}
export function timeHorizontalFormatter (params) {
let str = '
'