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

1

Browse Source
This commit is contained in:
lucashu 2025-08-21 09:28:42 +08:00
parent 2d603854eb
commit 53a7c856ff
11 changed files with 0 additions and 472 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/packages/components/Charts/MyComponents/DetailedScene/config.ts
View File

@ -1,27 +0,0 @@
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { DetailedSceneConfig } from './index'
import dataJson from './data.json'
export const option = {
dataset: dataJson.source,
title: '场景分布概况',
titleColor: '#ffffff',
titleSize: 20,
linkColor: '#00E5FF',
linkText: '查看更多>>',
sceneNameColor: '#ffffff',
sceneNameSize: 18,
labelColor: '#B0E0E6',
labelSize: 14,
valueColor: '#ffffff',
valueSize: 24,
pointColor1: '#00E5FF',
pointColor2: '#FFD700'
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = DetailedSceneConfig.key
public chartConfig = DetailedSceneConfig
public option = option
}

31
src/packages/components/Charts/MyComponents/DetailedScene/config.vue
View File

@ -1,31 +0,0 @@
<template>
<div class="go-detailed-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>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { option } from './config'
defineProps({
option: {
type: Object as PropType<typeof option>,
required: true
}
})
</script>

20
src/packages/components/Charts/MyComponents/DetailedScene/data.json
View File

@ -1,20 +0,0 @@
{
"source": [
{
"name": "危化品库",
"icon": "warehouse",
"metrics": [
{ "label": "场景总数", "value": 262 },
{ "label": "智控场景", "value": 6852 }
]
},
{
"name": "危废品库",
"icon": "trash",
"metrics": [
{ "label": "智控场景", "value": 6852 },
{ "label": "场景总数", "value": 262 }
]
}
]
}

14
src/packages/components/Charts/MyComponents/DetailedScene/index.ts
View File

@ -1,14 +0,0 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
export const DetailedSceneConfig: ConfigType = {
key: 'DetailedScene',
chartKey: 'VDetailedScene',
conKey: 'VCDetailedScene',
title: '详细场景',
category: 'MyComponents',
categoryName: '自定义组件',
package: PackagesCategoryEnum.CHARTS,
chartFrame: ChartFrameEnum.COMMON,
image: 'detailed_scene.png'
}
export default DetailedSceneConfig

140
src/packages/components/Charts/MyComponents/DetailedScene/index.vue
View File

@ -1,140 +0,0 @@
<template>
<div class="go-detailed-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">
<div class="scene-icon-container">
<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>
</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">{{ metric.value }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { PropType, computed } from 'vue'
import { option as configOption } from './config'
const props = defineProps({
chartConfig: {
type: Object as PropType<{ option: typeof configOption }>,
required: true
}
})
const option = computed(() => props.chartConfig.option)
</script>
<style lang="scss" scoped>
.go-detailed-scene {
width: 100%;
height: 100%;
background-color: #0F1C3D;
padding: 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #1A385A;
padding: 5px 15px;
border-radius: 5px;
margin-bottom: 20px;
.title {
display: flex;
align-items: center;
.title-icon {
font-size: 24px;
margin-right: 10px;
color: #00E5FF;
}
}
.link {
cursor: pointer;
font-size: 14px;
}
}
.content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.scene-row {
display: flex;
align-items: center;
background-color: rgba(26, 56, 90, 0.5);
border-radius: 50px;
padding: 10px 20px;
margin: 10px 0;
}
.scene-icon-container {
width: 60px;
height: 60px;
border-radius: 50%;
background: radial-gradient(circle, #00E5FF 0%, rgba(15, 28, 61, 0) 70%);
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
.scene-icon {
font-size: 32px;
color: #ffffff;
}
}
.scene-name {
font-weight: bold;
margin-right: auto;
}
.metrics-container {
display: flex;
.metric {
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;
}
}
}
}
</style>

26
src/packages/components/Charts/MyComponents/StorageScene/config.ts
View File

@ -1,26 +0,0 @@
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { StorageSceneConfig } from './index'
import dataJson from './data.json'
export const option = {
dataset: dataJson.source,
title: '场景分布概况',
titleColor: '#ffffff',
titleSize: 20,
linkColor: '#00E5FF',
linkText: '查看更多>>',
sceneNameColor: '#ffffff',
sceneNameSize: 16,
labelColor: '#B0E0E6',
labelSize: 14,
valueColor: '#00E5FF',
valueSize: 20,
borderColor: '#4A90E2'
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = StorageSceneConfig.key
public chartConfig = StorageSceneConfig
public option = option
}

31
src/packages/components/Charts/MyComponents/StorageScene/config.vue
View File

@ -1,31 +0,0 @@
<template>
<div class="go-storage-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>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { option } from './config'
defineProps({
option: {
type: Object as PropType<typeof option>,
required: true
}
})
</script>

18
src/packages/components/Charts/MyComponents/StorageScene/data.json
View File

@ -1,18 +0,0 @@
{
"source": [
{
"name": "危化品库",
"metrics": [
{ "label": "场景总数", "value": 5, "icon": "folder" },
{ "label": "智控场景", "value": 60, "icon": "server" }
]
},
{
"name": "危废品库",
"metrics": [
{ "label": "场景总数", "value": 5, "icon": "folder" },
{ "label": "智控场景", "value": 60, "icon": "server" }
]
}
]
}

14
src/packages/components/Charts/MyComponents/StorageScene/index.ts
View File

@ -1,14 +0,0 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
export const StorageSceneConfig: ConfigType = {
key: 'StorageScene',
chartKey: 'VStorageScene',
conKey: 'VCStorageScene',
title: '仓储场景',
category: 'MyComponents',
categoryName: '自定义组件',
package: PackagesCategoryEnum.CHARTS,
chartFrame: ChartFrameEnum.COMMON,
image: 'storage_scene.png'
}
export default StorageSceneConfig

147
src/packages/components/Charts/MyComponents/StorageScene/index.vue
View File

@ -1,147 +0,0 @@
<template>
<div class="go-storage-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-item">
<div class="scene-header">
<span class="dots">···</span>
<span class="scene-name" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">{{ scene.name }}</span>
</div>
<div class="metrics-wrapper">
<div v-for="(metric, mIndex) in scene.metrics" :key="mIndex" class="metric-box" :style="{ borderColor: option.borderColor }">
<div class="metric-icon-container">
<svg-icon :icon-class="metric.icon" class="metric-icon"></svg-icon>
</div>
<div class="metric-details">
<span class="metric-label" :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ metric.label }}</span>
<span class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">{{ metric.value }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { PropType, computed } from 'vue'
import { option as configOption } from './config'
const props = defineProps({
chartConfig: {
type: Object as PropType<{ option: typeof configOption }>,
required: true
}
})
const option = computed(() => props.chartConfig.option)
</script>
<style lang="scss" scoped>
.go-storage-scene {
width: 100%;
height: 100%;
background-color: #0F1C3D;
padding: 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #1A385A;
padding: 5px 15px;
border-radius: 5px;
margin-bottom: 20px;
.title {
display: flex;
align-items: center;
.title-icon {
font-size: 24px;
margin-right: 10px;
color: #00E5FF;
}
}
.link {
cursor: pointer;
font-size: 14px;
}
}
.content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.scene-item {
margin-bottom: 15px;
}
.scene-header {
display: flex;
align-items: center;
margin-bottom: 10px;
.dots {
color: #4A90E2;
font-weight: bold;
margin-right: 10px;
}
.scene-name {
font-weight: bold;
}
}
.metrics-wrapper {
display: flex;
justify-content: space-between;
}
.metric-box {
display: flex;
align-items: center;
background-color: rgba(26, 56, 90, 0.5);
border-bottom: 2px solid;
padding: 10px;
width: 48%;
box-sizing: border-box;
}
.metric-icon-container {
width: 40px;
height: 40px;
background-color: rgba(0, 229, 255, 0.2);
border: 1px solid #00E5FF;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
.metric-icon {
font-size: 24px;
color: #00E5FF;
}
}
.metric-details {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
.metric-value {
font-weight: bold;
}
}
}
</style>

4
src/packages/components/Charts/MyComponents/index.ts
View File

@ -1,19 +1,15 @@
import { AlarmListConfig } from './AlarmList/index'
import { SceneDistributionConfig } from './SceneDistribution/index'
import { TopAlarmsConfig } from './TopAlarms/index'
import { DetailedSceneConfig } from './DetailedScene/index'
import { ParkingSceneConfig } from './ParkingScene/index'
import { WorkshopSceneConfig } from './WorkshopScene/index'
import { DeviceStatusConfig } from './DeviceStatus/index'
import { StorageSceneConfig } from './StorageScene'
export default [
AlarmListConfig,
SceneDistributionConfig,
TopAlarmsConfig,
DetailedSceneConfig,
ParkingSceneConfig,
WorkshopSceneConfig,
DeviceStatusConfig,
StorageSceneConfig
]