zzkj/smart_storage_web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

英文版本配置，二并一(配置)不弹窗BUG修改

Browse Source
This commit is contained in:
huangjp
2025-10-17 14:14:48 +08:00
parent 09d927a800
commit d5c01162f6
29 changed files with 240 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/dashboardtest/components/top-center/ninth.vue
View File

@ -534,7 +534,7 @@
</svg>
</div>
</div>
<dispositionPointDialog :visible="show_point_dispostion" :page-location="pageLocation" @close="closePoint" @getData="getDynamicPointData" />
<DispositionPointData :disposition-show="show_point_dispostion" :page-location="pageLocation" @close="closePoint" @getData="getDynamicPointData" />
</ItemBox>
</template>

85
src/views/dashboardtest/components/top-center/pv1storage261.vue
View File

@ -377,52 +377,49 @@
<text x="520" :y="105 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,510)" :y="105 + ( 20 * index)" fill="#FFB800" font-size="14">
<text :x="countChineseAndEnglishCharacters(item.name,lang === 'zh'?510:470)" :y="105 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g>
<!-- STS -->
<!-- <g v-for="(item,index) in stsCenterData" :key="item.id">
<text x="415" :y="153 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,415)" :y="153 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g> -->
<!-- ACDC -->
<g v-for="(item,index) in acdcCenterData" :key="item.id">
<text x="415" :y="213 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,415)" :y="213 + ( 20 * index)" fill="#FFB800" font-size="14">
<text :x="countChineseAndEnglishCharacters(item.name,lang === 'zh'?415:375)" :y="213 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g>
<!-- 左侧 1PV -->
<g v-for="(item,index) in pcsLeftData" :key="item.id">
<text x="200" :y="450 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,190)" :y="450 + ( 20 * index)" fill="#FFB800" font-size="14">
<foreignObject
:x="200"
:y="450 + (20 * index) - 14"
width="150"
height="20"
style="overflow: visible;"
>
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: center;">
<el-tooltip
:content="item.name"
placement="top"
:open-delay="400"
effect="dark"
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, 120) }}
</span>
</el-tooltip>
</div>
</foreignObject>
<text :x="calculateValueX(item.name, 200)" :y="450 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g>
<!-- 中间 2PV -->
<!-- <g v-for="(item,index) in pcsCenterData" :key="item.id">
<text x="410" :y="450 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,390)" :y="450 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g> -->
<!-- 右侧 3PCS -->
<g v-for="(item,index) in pcsRightData" :key="item.id">
<text x="622" :y="450 + ( 20 * index)" fill="#ffffff" font-size="14">
@ -514,7 +511,11 @@ export default {
}
},
computed: {},
computed: {
lang() {
return this.$store.getters.language
}
},
watch: {},
created() {
const result = changeTheme()
@ -531,6 +532,34 @@ 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 ? '...' : '')
},
// 精确测量文本渲染宽度（像素）
measureTextWidth(text, font = '14px sans-serif') {
// 创建或复用一个 canvas（避免重复创建）
if (!this._textMeasurementCanvas) {
this._textMeasurementCanvas = document.createElement('canvas')
}
const ctx = this._textMeasurementCanvas.getContext('2d')
ctx.font = font
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 之间的小空隙
},
countChineseAndEnglishCharacters(str, x) {
var chineseCount = str.match(/[\u4e00-\u9fa5]/g) ? str.match(/[\u4e00-\u9fa5]/g).length : 0
var englishCount = str.match(/[a-zA-Z]/g) ? str.match(/[a-zA-Z]/g).length : 0

94
src/views/dashboardtest/components/top-center/pv2storage261.vue
View File

@ -370,7 +370,7 @@
<text x="520" :y="105 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,510)" :y="105 + ( 20 * index)" fill="#FFB800" font-size="14">
<text :x="countChineseAndEnglishCharacters(item.name,lang === 'zh'?510:465)" :y="105 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g>
@ -381,7 +381,7 @@
<text x="415" :y="153 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,415)" :y="153 + ( 20 * index)" fill="#FFB800" font-size="14">
<text :x="countChineseAndEnglishCharacters(item.name,lang === 'zh'?415:360)" :y="153 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g>
@ -392,26 +392,68 @@
<text x="415" :y="213 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,415)" :y="213 + ( 20 * index)" fill="#FFB800" font-size="14">
<text :x="countChineseAndEnglishCharacters(item.name,lang === 'zh'?415:360)" :y="213 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g>
<!-- 左侧 1PV -->
<g v-for="(item,index) in pcsLeftData" :key="item.id">
<text x="200" :y="450 + ( 20 * index)" fill="#ffffff" font-size="14">
<foreignObject
:x="200"
:y="450 + (20 * index) - 14"
width="150"
height="20"
style="overflow: visible;"
>
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: center;">
<el-tooltip
:content="item.name"
placement="top"
:open-delay="400"
effect="dark"
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) }}
</span>
</el-tooltip>
</div>
</foreignObject>
<!-- <text x="200" :y="450 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,180)" :y="450 + ( 20 * index)" fill="#FFB800" font-size="14">
</text> -->
<text :x="calculateValueX(item.name, 185)" :y="450 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g>
<!-- 中间 2PV -->
<g v-for="(item,index) in pcsCenterData" :key="item.id">
<text x="410" :y="450 + ( 20 * index)" fill="#ffffff" font-size="14">
<foreignObject
:x="410"
:y="450 + (20 * index) - 14"
width="150"
height="20"
style="overflow: visible;"
>
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: center;">
<el-tooltip
:content="item.name"
placement="top"
:open-delay="400"
effect="dark"
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) }}
</span>
</el-tooltip>
</div>
</foreignObject>
<!-- <text x="410" :y="450 + ( 20 * index)" fill="#ffffff" font-size="14">
{{ item.name }}
</text>
<text :x="countChineseAndEnglishCharacters(item.name,390)" :y="450 + ( 20 * index)" fill="#FFB800" font-size="14">
</text> -->
<text :x="calculateValueX(item.name, 395)" :y="450 + ( 20 * index)" fill="#FFB800" font-size="14">
{{ item.value }}
</text>
</g>
@ -507,7 +549,11 @@ export default {
}
},
computed: {},
computed: {
lang() {
return this.$store.getters.language
}
},
watch: {},
created() {
const result = changeTheme()
@ -524,6 +570,34 @@ 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 ? '...' : '')
},
// 精确测量文本渲染宽度（像素）
measureTextWidth(text, font = '14px sans-serif') {
// 创建或复用一个 canvas（避免重复创建）
if (!this._textMeasurementCanvas) {
this._textMeasurementCanvas = document.createElement('canvas')
}
const ctx = this._textMeasurementCanvas.getContext('2d')
ctx.font = font
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 之间的小空隙
},
countChineseAndEnglishCharacters(str, x) {
var chineseCount = str.match(/[\u4e00-\u9fa5]/g) ? str.match(/[\u4e00-\u9fa5]/g).length : 0
var englishCount = str.match(/[a-zA-Z]/g) ? str.match(/[a-zA-Z]/g).length : 0

2
src/views/dashboardtest/components/top-center/second-disposition.vue
View File

@ -343,7 +343,7 @@
</svg>
</div>
</div>
<dispositionPointDialog :visible="show_point_dispostion" :max="4" :page-location="pageLocation" @close="closePoint" @getData="getDynamicPointData" />
<DispositionPointData :disposition-show="show_point_dispostion" :max="4" :page-location="pageLocation" @close="closePoint" @getData="getDynamicPointData" />
</ItemBox>
</template>

2
src/views/dashboardtest/components/top-center/seventh.vue
View File

@ -460,7 +460,7 @@
</svg>
</div>
</div>
<dispositionPointDialog :visible="show_point_dispostion" :page-location="pageLocation" @close="closePoint" @getData="getDynamicPointData" />
<DispositionPointData :disposition-show="show_point_dispostion" :page-location="pageLocation" @close="closePoint" @getData="getDynamicPointData" />
</ItemBox>
</template>