光伏功能页面

src/views/dashboardtest/components/top-center/ninth.vue

@@ -530,12 +530,10 @@
           <text x="730" y="460" fill="#FFB800" font-size="14">{{ pcsData_9.length > 1 ? pcsData_9[1].value : '' }}</text>
           <text x="730" y="480" fill="#FFB800" font-size="14">{{ pcsData_9.length > 2 ? pcsData_9[2].value : '' }}</text>
           <text x="730" y="500" fill="#FFB800" font-size="14">{{ pcsData_9.length > 3 ? pcsData_9[3].value : '' }}</text>
-
         </svg>
       </div>
     </div>
     <DispositionPointData :disposition-show="show_point_dispostion" :page-location="pageLocation" @close="closePoint" @getData="getDynamicPointData" />
-
   </ItemBox>
 </template>
 

src/views/dashboardtest/components/top-center/pv2storage261.vue

@@ -54,30 +54,6 @@
             stroke="#0094FF"
             stroke-dasharray="3 3"
           />
-          <!-- <rect
-            x="154"
-            y="78"
-            width="231"
-            height="4"
-            :style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
-            @click="lookDeviceDetail('line-top-left')"
-          /> -->
-          <!-- <polyline
-            points="385,80 600,80"
-            fill="none"
-            class="g-rect-path"
-            stroke="#0094FF"
-            stroke-dasharray="3 3"
-          /> -->
-          <!-- <rect
-            x="385"
-            y="78"
-            width="215"
-            height="4"
-            :style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
-            @click="lookDeviceDetail('line-top-right')"
-          /> -->
-
           <!-- center -->
           <polyline
             points="385,50 385,417"
@@ -414,15 +390,12 @@
                   popper-class="svg-tooltip"
                 >
                   <span style="font-size: 14px;font-family: sans-serif;color: #ffffff;max-width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis">
-                    {{ truncateText(item.name, 100) }}
+                    {{ truncateText(item.name, 90) }}
                   </span>
                 </el-tooltip>
               </div>
             </foreignObject>
-            <!-- <text x="200" :y="450 + ( 20 * index)" fill="#ffffff" font-size="14">
-              {{ item.name }}
-            </text> -->
-            <text :x="calculateValueX(item.name, 185)" :y="450 + ( 20 * index)" fill="#FFB800" font-size="14">
+            <text :x="calculateValueX(item.name, 205)" :y="450 + ( 20 * index)" fill="#FFB800" font-size="14">
               {{ item.value }}
             </text>
           </g>
@@ -445,7 +418,7 @@
                   popper-class="svg-tooltip"
                 >
                   <span style="font-size: 14px;font-family: sans-serif;color: #ffffff;max-width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis">
-                    {{ truncateText(item.name, 100) }}
+                    {{ truncateText(item.name, 90) }}
                   </span>
                 </el-tooltip>
               </div>
@@ -453,7 +426,7 @@
             <!-- <text x="410" :y="450 + ( 20 * index)" fill="#ffffff" font-size="14">
               {{ item.name }}
             </text> -->
-            <text :x="calculateValueX(item.name, 395)" :y="450 + ( 20 * index)" fill="#FFB800" font-size="14">
+            <text :x="calculateValueX(item.name, 410)" :y="450 + ( 20 * index)" fill="#FFB800" font-size="14">
               {{ item.value }}
             </text>
           </g>
@@ -570,20 +543,35 @@ export default {
   },
   mounted() {},
   methods: {
-    truncateText(text, maxWidth) {
-      if (!text) return ''
-      const width = this.measureTextWidth(text)
-      if (width <= maxWidth) return text
-
-      let truncated = text
-      while (this.measureTextWidth(truncated + '...') > maxWidth && truncated.length > 0) {
-        truncated = truncated.slice(0, -1)
-      }
-      return truncated + (truncated.length < text.length ? '...' : '')
+    isChineseDominant(text) {
+      const chineseRegex = /[\u4e00-\u9fa5]/g
+      const chineseCount = (text.match(chineseRegex) || []).length
+      return chineseCount / text.length > 0.5
     },
-    // 精确测量文本渲染宽度（像素）
+
+    // 修改截断逻辑：按字符类型统一视觉宽度
+    truncateText(text, baseMaxWidth = 90) {
+      if (!text) return ''
+
+      // 1. 按文本类型设置“最大可显示字符数”（视觉宽度相近）
+      const isChinese = this.isChineseDominant(text)
+      const maxChars = isChinese ? 8 : 15 // 中文8字 ≈ 英文15字母（14px sans-serif下）
+
+      // 2. 先按字符数截断（避免过长文本循环过多）
+      const truncated = text.slice(0, maxChars)
+      let finalText = truncated
+
+      // 3. 精确测量：如果截断后加...仍超宽，继续缩减
+      while (this.measureTextWidth(finalText + '...') > baseMaxWidth && finalText.length > 0) {
+        finalText = finalText.slice(0, -1)
+      }
+
+      // 4. 补充...（如果有截断）
+      return finalText + (finalText.length < text.length ? '...' : '')
+    },
+
+    // 精确测量文本渲染宽度（像素）- 保持不变
     measureTextWidth(text, font = '14px sans-serif') {
-      // 创建或复用一个 canvas（避免重复创建）
       if (!this._textMeasurementCanvas) {
         this._textMeasurementCanvas = document.createElement('canvas')
       }
@@ -592,11 +580,12 @@ export default {
       return ctx.measureText(text).width
     },
 
-    // 计算 value 的 x 坐标：baseX + name 的实际宽度 + 一点间距
-    calculateValueX(name, baseX = 200) {
-      const truncatedName = this.truncateText(name, 120) // 限制 name 最大宽度
-      const width = this.measureTextWidth(truncatedName)
-      return baseX + width + 6 // +6 是 name 和 value 之间的小空隙
+    // 计算value的x坐标：基于统一后的截断文本宽度
+    calculateValueX(name, baseX = 205) {
+      const truncatedName = this.truncateText(name) // 无需传maxWidth，内部统一处理
+      const nameWidth = this.measureTextWidth(truncatedName)
+      const spacing = 6 // 固定间距（因截断文本视觉宽度一致，间距会统一）
+      return baseX + nameWidth + spacing
     },
     countChineseAndEnglishCharacters(str, x) {
       var chineseCount = str.match(/[\u4e00-\u9fa5]/g) ? str.match(/[\u4e00-\u9fa5]/g).length : 0