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

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

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