ss
This commit is contained in:
parent
cc9e0f01b4
commit
6dc82e8f77
BIN
04.png
BIN
04.png
Binary file not shown.
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 207 KiB |
@ -1,25 +0,0 @@
|
|||||||
|
|
||||||
import { PublicConfigClass } from '@/packages/public'
|
|
||||||
import { CreateComponentType } from '@/packages/index.d'
|
|
||||||
import { Componet1 } from './index'
|
|
||||||
|
|
||||||
export const option = {
|
|
||||||
// 列表数据配置
|
|
||||||
dataset: [
|
|
||||||
{ title: '列表项1', description: '这是第一个列表项的描述内容' },
|
|
||||||
{ title: '列表项2', description: '这是第二个列表项的描述内容' },
|
|
||||||
{ title: '列表项3', description: '这是第三个列表项的描述内容' }
|
|
||||||
],
|
|
||||||
style: {
|
|
||||||
color: '#333333',
|
|
||||||
descColor: '#666666',
|
|
||||||
fontSize: 14,
|
|
||||||
borderColor: '#1890ff'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
|
||||||
public key = 'Componet1'
|
|
||||||
public chartConfig = Componet1
|
|
||||||
public option = option
|
|
||||||
}
|
|
Binary file not shown.
Before Width: | Height: | Size: 15 KiB |
@ -1,19 +0,0 @@
|
|||||||
import image from './image.png'
|
|
||||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
|
||||||
|
|
||||||
export const Componet1: ConfigType = {
|
|
||||||
key: 'Componet1',
|
|
||||||
chartKey: 'VComponet1',
|
|
||||||
conKey: 'VCComponet1',
|
|
||||||
title: '测试组件',
|
|
||||||
category: 'MyComponents',
|
|
||||||
categoryName: '自定义组件',
|
|
||||||
package: 'Charts',
|
|
||||||
chartFrame: ChartFrameEnum.COMMON,
|
|
||||||
image,
|
|
||||||
description: '列表展示组件,支持数组或对象数据的可视化展示',
|
|
||||||
dataset: null
|
|
||||||
}
|
|
||||||
|
|
||||||
// 默认导出配置对象
|
|
||||||
export default Componet1
|
|
@ -1,146 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="go-componet1" :style="wrapperStyle">
|
|
||||||
<!-- 列表展示组件 -->
|
|
||||||
<div class="list-container" :style="containerStyle">
|
|
||||||
<div
|
|
||||||
v-for="(item, index) in listData"
|
|
||||||
:key="index"
|
|
||||||
class="list-item"
|
|
||||||
:style="itemStyle"
|
|
||||||
>
|
|
||||||
<div class="item-content">
|
|
||||||
<div class="item-title" :style="titleStyle">{{ item.title || item.name || item.label || item }}</div>
|
|
||||||
<div v-if="item.description || item.value" class="item-description" :style="descStyle">
|
|
||||||
{{ item.description || item.value }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { PropType, toRefs, computed } from 'vue'
|
|
||||||
import { CreateComponentType } from '@/packages/index.d'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
chartConfig: {
|
|
||||||
type: Object as PropType<CreateComponentType>,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const { chartConfig } = toRefs(props)
|
|
||||||
|
|
||||||
const wrapperStyle = computed(() => ({
|
|
||||||
width: chartConfig.value.attr.w + 'px',
|
|
||||||
height: chartConfig.value.attr.h + 'px'
|
|
||||||
}))
|
|
||||||
|
|
||||||
const option = computed(() => chartConfig.value.option)
|
|
||||||
|
|
||||||
// 列表数据
|
|
||||||
const listData = computed(() => {
|
|
||||||
const dataset = option.value.dataset
|
|
||||||
if (Array.isArray(dataset)) {
|
|
||||||
return dataset
|
|
||||||
} else if (typeof dataset === 'string' && dataset.startsWith('[')) {
|
|
||||||
try {
|
|
||||||
return JSON.parse(dataset)
|
|
||||||
} catch {
|
|
||||||
return [dataset]
|
|
||||||
}
|
|
||||||
} else if (dataset) {
|
|
||||||
return [dataset]
|
|
||||||
}
|
|
||||||
return []
|
|
||||||
})
|
|
||||||
|
|
||||||
// 容器样式
|
|
||||||
const containerStyle = computed(() => ({
|
|
||||||
padding: '10px',
|
|
||||||
height: '100%',
|
|
||||||
overflow: 'auto'
|
|
||||||
}))
|
|
||||||
|
|
||||||
// 列表项样式
|
|
||||||
const itemStyle = computed(() => ({
|
|
||||||
marginBottom: '8px',
|
|
||||||
padding: '8px 12px',
|
|
||||||
backgroundColor: '#f5f5f5',
|
|
||||||
borderRadius: '4px',
|
|
||||||
borderLeft: `3px solid ${option.value.style?.borderColor || '#1890ff'}`
|
|
||||||
}))
|
|
||||||
|
|
||||||
// 标题样式
|
|
||||||
const titleStyle = computed(() => ({
|
|
||||||
fontSize: `${option.value.style?.fontSize || 14}px`,
|
|
||||||
color: option.value.style?.color || '#333333',
|
|
||||||
fontWeight: 'bold',
|
|
||||||
marginBottom: '4px'
|
|
||||||
}))
|
|
||||||
|
|
||||||
// 描述样式
|
|
||||||
const descStyle = computed(() => ({
|
|
||||||
fontSize: `${(option.value.style?.fontSize || 14) - 2}px`,
|
|
||||||
color: option.value.style?.descColor || '#666666'
|
|
||||||
}))
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
// 重要:确保组件有默认导出
|
|
||||||
export default {
|
|
||||||
name: 'Componet1'
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.go-componet1 {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-container {
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
|
||||||
background: #f1f1f1;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background: #c1c1c1;
|
|
||||||
border-radius: 3px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #a8a8a8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-item {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: translateX(4px);
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-title {
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-description {
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,4 +1,3 @@
|
|||||||
import { Componet1 } from './Componet1/index'
|
|
||||||
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'
|
||||||
@ -9,7 +8,6 @@ import { DeviceStatusConfig } from './DeviceStatus/index'
|
|||||||
import { StorageSceneConfig } from './StorageScene'
|
import { StorageSceneConfig } from './StorageScene'
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
Componet1,
|
|
||||||
AlarmListConfig,
|
AlarmListConfig,
|
||||||
SceneDistributionConfig,
|
SceneDistributionConfig,
|
||||||
TopAlarmsConfig,
|
TopAlarmsConfig,
|
||||||
|
Loading…
Reference in New Issue
Block a user