fix: 调整动态分辨率写法和断点

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的设备*/

src/assets/css/common.scss

@@ -18,7 +18,6 @@ body {
 }
 .temp-dom {
   visibility: hidden;
-  font-size: 14px;
   position: fixed;
 }
 .icon {

src/components/layout/Home.vue

@@ -5,8 +5,6 @@
       <cn-header></cn-header>
       <cn-container v-if="containerShow" ref="container"></cn-container>
     </main>
-    <!-- 临时文本dom，用来计算文本长度 -->
-    <span class="temp-dom"></span>
   </div>
 </template>
 

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

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) {
+      } else if (width >= 1440 && width < 1920) {
-        this.rowHeight = 25
-      } else if (e.currentTarget.innerWidth >= 1440 && e.currentTarget.innerWidth < 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) {
+      } else {
-        this.rowHeight = 55
-      } else if (e.currentTarget.innerWidth > 2560) {
         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) {
+    } else if (clientWidth >= 1440 && clientWidth < 1920) {
-      rowHeight.value = 25
-    } else if (htmlHeight >= 1440 && htmlHeight < 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) {
+    } else {
-      rowHeight.value = 55
-    } else if (htmlHeight > 2560) {
       rowHeight.value = 55
     }
     return {

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