forked from lucas/go-view-fetch
1
This commit is contained in:
parent
2d603854eb
commit
53a7c856ff
@ -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
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
@ -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 }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -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
|
|
||||||
@ -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>
|
|
||||||
@ -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
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
@ -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" }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -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
|
|
||||||
@ -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>
|
|
||||||
@ -1,19 +1,15 @@
|
|||||||
import { AlarmListConfig } from './AlarmList/index'
|
import { AlarmListConfig } from './AlarmList/index'
|
||||||
import { SceneDistributionConfig } from './SceneDistribution/index'
|
import { SceneDistributionConfig } from './SceneDistribution/index'
|
||||||
import { TopAlarmsConfig } from './TopAlarms/index'
|
import { TopAlarmsConfig } from './TopAlarms/index'
|
||||||
import { DetailedSceneConfig } from './DetailedScene/index'
|
|
||||||
import { ParkingSceneConfig } from './ParkingScene/index'
|
import { ParkingSceneConfig } from './ParkingScene/index'
|
||||||
import { WorkshopSceneConfig } from './WorkshopScene/index'
|
import { WorkshopSceneConfig } from './WorkshopScene/index'
|
||||||
import { DeviceStatusConfig } from './DeviceStatus/index'
|
import { DeviceStatusConfig } from './DeviceStatus/index'
|
||||||
import { StorageSceneConfig } from './StorageScene'
|
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
AlarmListConfig,
|
AlarmListConfig,
|
||||||
SceneDistributionConfig,
|
SceneDistributionConfig,
|
||||||
TopAlarmsConfig,
|
TopAlarmsConfig,
|
||||||
DetailedSceneConfig,
|
|
||||||
ParkingSceneConfig,
|
ParkingSceneConfig,
|
||||||
WorkshopSceneConfig,
|
WorkshopSceneConfig,
|
||||||
DeviceStatusConfig,
|
DeviceStatusConfig,
|
||||||
StorageSceneConfig
|
|
||||||
]
|
]
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user