zS/go-view-fetch
1
0
Fork 0
forked from lucas/go-view-fetch
Code Pull Requests Activity

sdf

Browse Source
This commit is contained in:
lucashu 2025-08-20 22:08:55 +08:00
parent ad4d7388ad
commit cc9e0f01b4
3 changed files with 71 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
03.png → 6.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

6
src/packages/components/Charts/MyComponents/WorkshopScene/data.json
View File

@ -1,7 +1,7 @@
{
"source": [
{
"name": "调漆作业室",
"name": "危化品库",
"icon": "warehouse",
"metrics": [
{ "label": "场景总数", "value": 262 },
@ -9,7 +9,7 @@
]
},
{
"name": "喷漆作业室",
"name": "危废品库",
"icon": "warehouse",
"metrics": [
{ "label": "智控场景", "value": 6852 },
@ -17,4 +17,4 @@
]
}
]
}
}

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

@ -8,19 +8,29 @@
<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 }">
<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-icon-container">
<div class="yellow-dot"></div>
<svg-icon :icon-class="scene.icon" class="scene-icon"></svg-icon>
</div>
<div class="scene-name" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">{{ scene.name }}</div>
<div class="metrics-container">
<div v-for="(metric, mIndex) in scene.metrics" :key="mIndex" class="metric">
<div class="metric-label">
<span class="point" :style="{ backgroundColor: mIndex === 0 ? option.pointColor1 : option.pointColor2 }"></span>
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ metric.label }}</span>
<template v-for="(metric, mIndex) in scene.metrics" :key="mIndex">
<div class="metric">
<div class="metric-label">
<span class="point" :style="{ backgroundColor: mIndex === 0 ? option.pointColor1 : option.pointColor2 }"></span>
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ metric.label }}</span>
</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">{{ metric.value }}</div>
</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">{{ metric.value }}</div>
</div>
<div class="separator" v-if="mIndex < scene.metrics.length - 1"></div>
</template>
</div>
</div>
</div>
@ -30,6 +40,10 @@
<script setup lang="ts">
import { PropType, computed } from 'vue'
import { option as configOption } from './config'
import bg1 from '/6.png'
import bg2 from '/04.png'
const backgrounds = [bg1, bg2]
const props = defineProps({
chartConfig: {
@ -86,35 +100,29 @@ const option = computed(() => props.chartConfig.option)
.scene-row {
display: flex;
align-items: center;
background-color: rgba(26, 56, 90, 0.5);
border-radius: 50px;
padding: 10px 20px;
padding: 0 30px;
margin: 10px 0;
height: 90px;
background-size: 100% 100%;
background-repeat: no-repeat;
&.reverse {
flex-direction: row-reverse;
.scene-icon-container {
margin-right: 0;
margin-left: 15px;
}
.scene-name {
margin-right: 0;
margin-left: auto;
margin-left: 20px;
}
.metrics-container {
flex-direction: row-reverse;
.metric {
margin-left: 0;
margin-right: 20px;
}
margin-right: auto;
margin-left: 0;
}
}
}
.scene-icon-container {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
@ -122,7 +130,16 @@ const option = computed(() => props.chartConfig.option)
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
.yellow-dot {
position: absolute;
top: 5px;
right: 5px;
width: 10px;
height: 10px;
background-color: #FFD700;
border-radius: 50%;
}
.scene-icon {
font-size: 32px;
@ -132,31 +149,42 @@ const option = computed(() => props.chartConfig.option)
.scene-name {
font-weight: bold;
margin-right: auto;
margin-left: 20px;
}
.metrics-container {
display: flex;
.metric {
align-items: center;
margin-left: auto;
.separator {
width: 1px;
height: 40px;
background-color: #00E5FF;
margin: 0 20px;
}
}
.metric {
display: flex;
flex-direction: column;
align-items: flex-start;
.metric-label {
display: flex;
flex-direction: column;
align-items: center;
margin-left: 20px;
.metric-label {
display: flex;
align-items: center;
margin-bottom: 5px;
.point {
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 5px;
}
}
.metric-value {
font-weight: bold;
margin-bottom: 5px;
.point {
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 8px;
}
}
.metric-value {
font-weight: bold;
margin-left: 16px;
}
}
}
</style>