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 = '
'