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

Merge branch 'main' into main

Browse Source
This commit is contained in:
zS 2025-08-21 22:57:24 +08:00
commit 356e0d4df7
7 changed files with 200 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/packages/components/Charts/MyComponents/ParkingScene/assets/dot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 461 B

2
src/packages/components/Charts/MyComponents/ParkingScene/config.ts
View File

@ -11,7 +11,7 @@ export const option = {
linkColor: '#00E5FF',
linkText: '查看更多>>',
sceneNameColor: '#ccc',
sceneNameSize: 16,
sceneNameSize: 18,
labelColor: '#ccc',
labelSize: 14,
valueColor: '#DFAB0F',

4
src/packages/components/Charts/MyComponents/ParkingScene/index.vue
View File

@ -200,7 +200,7 @@
<div class="content">
<div v-for="(scene, index) in option.dataset" :key="index" class="scene-item">
<div class="scene-header">
<span class="dots">···</span>
<img src="./assets/dot.png" alt="" class="dots"></img>
<span class="scene-name" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">{{
scene.name }}</span>
</div>
@ -255,7 +255,7 @@ const option = computed(() => props.chartConfig.option)
}
.scene-item:nth-child(n+2) {
margin-top: 8px;;
margin-top: 7px;;
}
.scene-header {

BIN
src/packages/components/Charts/MyComponents/WorkshopScene/assets/04.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 207 KiB

After

Width:  |  Height:  |  Size: 28 KiB

33
src/packages/components/Charts/MyComponents/WorkshopScene/config.ts
View File

@ -2,20 +2,45 @@ import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { WorkshopSceneConfig } from './index'
import dataJson from './data.json'
export enum FontWeightEnum {
NORMAL = '常规',
BOLD = '加粗',
}
export enum FontStyleEnum {
NORMAL = '常规',
ITALIC = '斜体',
}
export const FontWeightObject = {
[FontWeightEnum.NORMAL]: 'normal',
[FontWeightEnum.BOLD]: 'bold',
}
export const FontStyleObject = {
[FontStyleEnum.NORMAL]: 'normal',
[FontStyleEnum.ITALIC]: 'italic',
}
export const option = {
dataset: dataJson.source,
title: '场景分布概况',
titleColor: '#ffffff',
titleSize: 20,
iconColor: '#00E5FF',
fontWeight: 'normal',
fontStyle: 'normal',
paddingX: 10,
paddingY: -12,
letterSpacing: 1,
isShowButton: false,
linkColor: '#00E5FF',
linkText: '查看更多>>',
linkText: '',
sceneNameColor: '#ffffff',
sceneNameSize: 18,
sceneNameSize: 20,
labelColor: '#B0E0E6',
labelSize: 14,
labelSize: 16,
valueColor: '#ffffff',
valueSize: 24,
valueSize: 28,
pointColor1: '#00E5FF',
pointColor2: '#FFD700'
}

98
src/packages/components/Charts/MyComponents/WorkshopScene/config.vue
View File

@ -1,31 +1,87 @@
<template>
<div class="go-workshop-scene-config">
<n-form-item label="标题">
<n-input v-model:value="option.title" />
</n-form-item>
<n-form-item label="标题大小">
<n-input-number v-model:value="option.titleSize" />
</n-form-item>
<n-form-item label="场景名称大小">
<n-input-number v-model:value="option.sceneNameSize" />
</n-form-item>
<n-form-item label="标签大小">
<n-input-number v-model:value="option.labelSize" />
</n-form-item>
<n-form-item label="数值大小">
<n-input-number v-model:value="option.valueSize" />
</n-form-item>
</div>
<collapse-item name="信息" :expanded="true">
<setting-item-box name="标题" :alone="true">
<setting-item>
<n-input v-model:value="optionData.title" type="textarea" size="small"></n-input>
</setting-item>
</setting-item-box>
</collapse-item>
<collapse-item name="样式" :expanded="true">
<setting-item-box name="标题">
<setting-item name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.titleColor"></n-color-picker>
</setting-item>
<setting-item name="字体大小">
<n-input-number v-model:value="optionData.titleSize" size="small" placeholder="字体大小"></n-input-number>
</setting-item>
<setting-item name="字体粗细">
<n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" />
</setting-item>
<setting-item name="字体风格">
<n-select v-model:value="optionData.fontStyle" size="small" :options="fontStyleOptions" />
</setting-item>
<setting-item name="X轴内边距">
<n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number>
</setting-item>
<setting-item name="Y轴内边距">
<n-input-number v-model:value="optionData.paddingY" size="small" placeholder="输入内边距"></n-input-number>
</setting-item>
<setting-item name="字间距">
<n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number>
</setting-item>
</setting-item-box>
</collapse-item>
<collapse-item name="内容" :expanded="true">
<setting-item-box name="场景">
<setting-item name="名称大小">
<n-input-number v-model:value="optionData.sceneNameSize" />
</setting-item>
</setting-item-box>
<setting-item-box name="标签">
<setting-item name="大小">
<n-input-number v-model:value="optionData.labelSize" />
</setting-item>
</setting-item-box>
<setting-item-box name="数值">
<setting-item name="大小">
<n-input-number v-model:value="optionData.valueSize" />
</setting-item>
</setting-item-box>
</collapse-item>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { option } from './config'
defineProps({
option: {
import { option, FontWeightEnum, FontWeightObject, FontStyleEnum, FontStyleObject } from './config'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
const fontWeightOptions = [
{
label: FontWeightEnum.NORMAL,
value: FontWeightObject[FontWeightEnum.NORMAL]
},
{
label: FontWeightEnum.BOLD,
value: FontWeightObject[FontWeightEnum.BOLD]
}
]
const fontStyleOptions = [
{
label: FontStyleEnum.NORMAL,
value: FontStyleObject[FontStyleEnum.NORMAL]
},
{
label: FontStyleEnum.ITALIC,
value: FontStyleObject[FontStyleEnum.ITALIC]
}
]
</script>

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

@ -1,40 +1,44 @@
<template>
<div class="go-workshop-scene">
<div class="header">
<div class="title">
<svg-icon icon-class="rocket" class="title-icon"></svg-icon>
<span :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
</div>
<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-icon-container">
<div class="yellow-dot"></div>
<svg-icon :icon-class="scene.icon" class="scene-icon"></svg-icon>
<SmallBorder>
<div class="go-workshop-scene">
<div class="header">
<div class="title">
<div class="title-text">
<span :style="{
color: option.titleColor,
fontSize: option.titleSize + 'px',
fontWeight: option.fontWeight,
fontStyle: option.fontStyle,
marginLeft: option.paddingX + 'px',
marginTop: option.paddingY + 'px',
letterSpacing: option.letterSpacing + 'px'
}">{{ option.title }}</span>
</div>
</div>
<div class="scene-name" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">{{ scene.name }}</div>
<div class="metrics-container">
<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>
<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="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>
</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>
</template>
</div>
</div>
</div>
</div>
</div>
</SmallBorder>
</template>
<script setup lang="ts">
@ -42,6 +46,7 @@ import { PropType, computed } from 'vue'
import { option as configOption } from './config'
import bg1 from './assets/6.png'
import bg2 from './assets/04.png'
import SmallBorder from '../SmallBorder/index.vue'
const backgrounds = [bg1, bg2]
@ -57,10 +62,12 @@ const option = computed(() => props.chartConfig.option)
<style lang="scss" scoped>
.go-workshop-scene {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #0F1C3D;
padding: 15px;
padding: 12px;
padding-top: 0; // Let the header handle top padding
box-sizing: border-box;
display: flex;
flex-direction: column;
@ -69,24 +76,27 @@ const option = computed(() => props.chartConfig.option)
display: flex;
justify-content: space-between;
align-items: center;
background-color: #1A385A;
padding: 5px 15px;
border-radius: 5px;
margin-bottom: 20px;
margin-bottom: 10px; // More space
margin-top: 5px;
.title {
display: flex;
align-items: center;
.title-icon {
font-size: 24px;
margin-right: 10px;
color: #00E5FF;
margin-left: 35px;
margin-top: 5px;
.title-text {
height: 35px;
display: flex;
align-items: center;
padding: 0 20px 0 20px;
}
}
.link {
cursor: pointer;
font-size: 14px;
font-size: 16px; // Bigger link text
margin-right: 20px;
}
}
@ -94,15 +104,15 @@ const option = computed(() => props.chartConfig.option)
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
justify-content: center; // Center the rows vertically
gap: 20px; // Space between rows
}
.scene-row {
display: flex;
align-items: center;
padding: 0 30px;
margin: 10px 0;
height: 90px;
padding: 0 25px;
height: 120px; // Taller rows
background-size: 100% 100%;
background-repeat: no-repeat;
@ -111,7 +121,7 @@ const option = computed(() => props.chartConfig.option)
.scene-name {
margin-right: 0;
margin-left: 20px;
margin-left: 25px;
}
.metrics-container {
@ -123,33 +133,34 @@ const option = computed(() => props.chartConfig.option)
.scene-icon-container {
position: relative;
width: 60px;
height: 60px;
width: 72px; // Bigger icon container
height: 72px;
border-radius: 50%;
background: radial-gradient(circle, #00E5FF 0%, rgba(15, 28, 61, 0) 70%);
background: radial-gradient(circle, rgba(0, 229, 255, 0.5) 0%, rgba(15, 28, 61, 0) 70%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
.yellow-dot {
position: absolute;
top: 5px;
right: 5px;
width: 10px;
height: 10px;
top: 8px;
left: 8px; // Positioned differently in 1.png
width: 0px;
height: 0px;
background-color: #FFD700;
border-radius: 50%;
}
.scene-icon {
font-size: 32px;
font-size: 36px;
color: #ffffff;
}
}
.scene-name {
font-weight: bold;
margin-left: 20px;
margin-left: 105px;
}
.metrics-container {
@ -159,9 +170,26 @@ const option = computed(() => props.chartConfig.option)
.separator {
width: 1px;
height: 40px;
height: 50px;
background-color: #00E5FF;
margin: 0 20px;
margin: 0 30px;
position: relative;
&::before, &::after {
content: '';
position: absolute;
left: -2px;
width: 5px;
height: 5px;
background-color: #00E5FF;
border-radius: 50%;
}
&::before {
top: -1px;
}
&::after {
bottom: -1px;
}
}
}
@ -173,17 +201,17 @@ const option = computed(() => props.chartConfig.option)
.metric-label {
display: flex;
align-items: center;
margin-bottom: 5px;
margin-bottom: 10px; // More space
.point {
width: 8px;
height: 8px;
width: 0px; // Bigger point
height: 0px;
border-radius: 50%;
margin-right: 8px;
margin-right: 10px;
}
}
.metric-value {
font-weight: bold;
margin-left: 16px;
margin-left: 40px; // Align with label text
}
}
}