lucas/go-view-fetch
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

123

Browse Source
This commit is contained in:
lucashu 2025-08-22 08:55:33 +08:00
parent 976ee4d04a
commit d190d15200
1 changed files with 36 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/packages/components/Charts/MyComponents/WorkshopScene/index.vue
View File

@ -18,22 +18,38 @@
<a class="link" :style="{ color: option.linkColor }">{{ option.linkText }}</a>
</div>
<div class="content">
<div v-for="(scene, index) in option.dataset" :key="index" class="scene-row"
:class="{ reverse: index % 2 !== 0 }" :style="{ backgroundImage: `url(${backgrounds[index]})` }">
<div class="scene-name" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">{{
scene.name }}</div>
<div class="scene-row" :style="{ backgroundImage: `url(${backgrounds[0]})` }">
<div class="scene-name" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">危化品库</div>
<div class="metrics-container">
<template v-for="(metric, mIndex) in scene.metrics" :key="mIndex">
<div class="metric">
<div class="metric-label">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ metric.label
}}</span>
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">场景总数</span>
</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">{{
metric.value }}</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262</div>
</div>
<div class="metric">
<div class="metric-label">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">智控场景</span>
</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852</div>
</div>
</div>
</div>
<div class="scene-row reverse" :style="{ backgroundImage: `url(${backgrounds[1]})` }">
<div class="scene-name" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">危废品库</div>
<div class="metrics-container">
<div class="metric">
<div class="metric-label">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">智控场景</span>
</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852</div>
</div>
<div class="metric">
<div class="metric-label">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">场景总数</span>
</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262</div>
</div>
</template>
</div>
</div>
</div>
@ -196,22 +212,25 @@ const option = computed(() => props.chartConfig.option)
.metric {
display: flex;
flex-direction: column;
align-items: flex-start;
align-items: center;
.metric-label {
display: flex;
align-items: center;
margin-bottom: 10px; // More space
margin-bottom: 8px;
.point {
width: 0px; // Bigger point
height: 0px;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 10px;
}
}
.metric-value {
font-weight: bold;
margin-left: 40px; // Align with label text
position: relative;
left: 9px; // Visually center the value under the text
}
}
}