feat: 调整EnergyBar组件中6个能量格的间隙比8个的大一点
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="energy-bar compact energy-dash" :title="tooltip">
|
<div class="energy-bar compact energy-dash" :title="tooltip">
|
||||||
<div class="energy-cells" :style="{ gap: gap + 'px' }">
|
<div class="energy-cells" :style="{ gap: dynamicGap + 'px' }">
|
||||||
<div
|
<div
|
||||||
v-for="n in segments"
|
v-for="n in segments"
|
||||||
:key="n"
|
:key="n"
|
||||||
@@ -23,12 +23,16 @@ export default {
|
|||||||
// 自定义文本
|
// 自定义文本
|
||||||
text: { type: String, default: '' },
|
text: { type: String, default: '' },
|
||||||
// 尺寸控制(像素)
|
// 尺寸控制(像素)
|
||||||
cellWidth: { type: Number, default: 4 },
|
cellWidth: { type: Number, default: 5 },
|
||||||
cellHeight: { type: Number, default: 10 },
|
cellHeight: { type: Number, default: 14 },
|
||||||
gap: { type: Number, default: 1 },
|
gap: { type: Number, default: 1 },
|
||||||
borderRadius: { type: Number, default: 1 },
|
borderRadius: { type: Number, default: 1 },
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
dynamicGap() {
|
||||||
|
// 6个能量格的间隙比8个的大一点
|
||||||
|
return this.segments === 6 ? Math.max(this.gap, 2) : this.gap
|
||||||
|
},
|
||||||
litCells() {
|
litCells() {
|
||||||
const clamped = Math.max(0, Math.min(100, Math.round(this.percent || 0)))
|
const clamped = Math.max(0, Math.min(100, Math.round(this.percent || 0)))
|
||||||
// 一个能量格代表10(进1制向上取整)
|
// 一个能量格代表10(进1制向上取整)
|
||||||
|
|||||||
@@ -428,10 +428,8 @@
|
|||||||
<el-progress
|
<el-progress
|
||||||
class="ribbon-progress"
|
class="ribbon-progress"
|
||||||
:color="customColors"
|
:color="customColors"
|
||||||
:width="60"
|
|
||||||
define-back-color="#dfe4ed"
|
define-back-color="#dfe4ed"
|
||||||
:format="() => String(scope.row.RibbonAmount || 0)"
|
:format="() => String(scope.row.RibbonAmount || 0)"
|
||||||
:stroke-width="3"
|
|
||||||
:percentage="safePercent(scope.row.RibbonAmount, getRibbonAmount(scope.row.ModeName, scope.row.RibbonType))"></el-progress>
|
:percentage="safePercent(scope.row.RibbonAmount, getRibbonAmount(scope.row.ModeName, scope.row.RibbonType))"></el-progress>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
@@ -466,6 +464,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
|
align="center"
|
||||||
prop="PrinterRemaCapa"
|
prop="PrinterRemaCapa"
|
||||||
:label="$t('main.tablePrinterRemaCapa')"
|
:label="$t('main.tablePrinterRemaCapa')"
|
||||||
min-width="100">
|
min-width="100">
|
||||||
@@ -1780,11 +1779,10 @@ export default {
|
|||||||
},
|
},
|
||||||
getPrinterRemaCapaAmount(ModeName) {
|
getPrinterRemaCapaAmount(ModeName) {
|
||||||
// console.log('PrinterRemaCapa', this.ribbonList[ModeName].PrinterRemaCapa)
|
// console.log('PrinterRemaCapa', this.ribbonList[ModeName].PrinterRemaCapa)
|
||||||
return this.ribbonList[ModeName].PrinterRemaCapa || 0
|
return this.ribbonList[ModeName]&&this.ribbonList[ModeName].PrinterRemaCapa ? this.ribbonList[ModeName].PrinterRemaCapa : 0
|
||||||
},
|
},
|
||||||
getRibbonAmount(ModeName, RibbonType) {
|
getRibbonAmount(ModeName, RibbonType) {
|
||||||
console.log('getRibbonAmount', this.ribbonList)
|
return this.ribbonList[ModeName]&&this.ribbonList[ModeName][RibbonType] ? this.ribbonList[ModeName][RibbonType] : 0
|
||||||
return this.ribbonList[ModeName][RibbonType] || 0
|
|
||||||
},
|
},
|
||||||
play() {
|
play() {
|
||||||
this.$confirm(this.$t('index.tipsPlaying'), this.$t('index.tips'), {
|
this.$confirm(this.$t('index.tipsPlaying'), this.$t('index.tips'), {
|
||||||
|
|||||||
Reference in New Issue
Block a user