This commit is contained in:
lucashu 2025-08-20 16:12:47 +08:00
parent 739a8343fa
commit 96a80d8131
17 changed files with 1 additions and 649 deletions

View File

@ -1,94 +0,0 @@
import { PublicConfigClass, echartOptionProfixHandle } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { AlarmTrendConfig } from './index'
import dataJson from './data.json'
import { cloneDeep } from 'lodash'
export const option = {
// 全局组件
grid: {
top: '20%',
left: '10%',
right: '10%',
bottom: '15%',
containLabel: true
},
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'line'
}
},
xAxis: {
show: true,
type: 'category',
data: dataJson.xAxis,
axisLine: {
show: true,
lineStyle: {
color: '#4A90E2'
}
},
axisLabel: {
color: '#B0E0E6'
}
},
yAxis: {
show: true,
type: 'value',
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(74, 144, 226, 0.3)'
}
},
axisLabel: {
color: '#B0E0E6'
}
},
series: [
{
type: 'line',
smooth: true,
data: dataJson.series,
symbol: 'circle',
symbolSize: 8,
lineStyle: {
color: '#00E5FF',
width: 2
},
itemStyle: {
color: '#00E5FF',
borderColor: '#fff',
borderWidth: 2
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(0, 229, 255, 0.5)' },
{ offset: 1, color: 'rgba(0, 229, 255, 0)' }
]
}
}
}
],
// 自定义组件
title: '报警趋势',
titleColor: '#ffffff',
titleSize: 20,
dropdownOptions: ['当日', '当月', '当年'],
dropdownDefault: '当日'
};
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = AlarmTrendConfig.key
public chartConfig = cloneDeep(AlarmTrendConfig)
public option = echartOptionProfixHandle(option, ['grid', 'xAxis', 'yAxis', 'series'])
}

View File

@ -1,28 +0,0 @@
<template>
<div class="go-alarm-trend-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-dynamic-input v-model:value="option.dropdownOptions" placeholder="请输入选项" />
</n-form-item>
<n-form-item label="默认选项">
<n-input v-model:value="option.dropdownDefault" />
</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>

View File

@ -1,4 +0,0 @@
{
"xAxis": ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"],
"series": [30, 45, 60, 50, 70, 80, 95, 85, 75, 60, 55, 40]
}

View File

@ -1,14 +0,0 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
export const AlarmTrendConfig: ConfigType = {
key: 'AlarmTrend',
chartKey: 'VAlarmTrend',
conKey: 'VCAlarmTrend',
title: '报警趋势',
category: 'MyComponents',
categoryName: '自定义组件',
package: PackagesCategoryEnum.CHARTS,
chartFrame: ChartFrameEnum.ECHARTS,
image: 'alarm_trend.png'
}
export default AlarmTrendConfig

View File

@ -1,103 +0,0 @@
<template>
<div class="go-alarm-trend">
<div class="header">
<div class="title">
<svg-icon icon-class="rocket" class="title-icon"></svg-icon>
<span :style="{ color: chartConfig.option.titleColor, fontSize: chartConfig.option.titleSize + 'px' }">{{ chartConfig.option.title }}</span>
</div>
<n-dropdown trigger="hover" :options="dropdownOptions" @select="handleSelect">
<n-button type="primary" size="small">
{{ selectedOption }}
<template #icon>
<n-icon>
<svg-icon icon-class="arrow-down" />
</n-icon>
</template>
</n-button>
</n-dropdown>
</div>
<v-chart
:key="chartConfig.key"
:option="option"
:autoresize="true"
></v-chart>
</div>
</template>
<script setup lang="ts">
import { ref, computed, PropType } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import { CreateComponentType } from '@/packages/index.d'
import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
use([
CanvasRenderer,
LineChart,
GridComponent,
TooltipComponent
])
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true
}
})
const { option } = useChartDataFetch(props.chartConfig, useChartEditStore)
const selectedOption = ref(props.chartConfig.option.dropdownDefault)
const dropdownOptions = computed(() => {
return props.chartConfig.option.dropdownOptions.map(opt => ({
label: opt,
key: opt
}))
})
const handleSelect = (key: string) => {
selectedOption.value = key
// You can add logic here to update chart data based on selection
}
</script>
<style lang="scss" scoped>
.go-alarm-trend {
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;
padding: 0 10px;
margin-bottom: 10px;
.title {
display: flex;
align-items: center;
.title-icon {
font-size: 24px;
margin-right: 10px;
color: #00E5FF;
}
}
}
.echarts {
flex: 1;
width: 100%;
height: 100%;
}
}
</style>

View File

@ -5,7 +5,7 @@ export const Componet1: ConfigType = {
key: 'Componet1',
chartKey: 'VComponet1',
conKey: 'VCComponet1',
title: '列表组件',
title: '测试组件',
category: 'MyComponents',
categoryName: '自定义组件',
package: 'Charts',

View File

@ -1,25 +0,0 @@
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { SmartCampusMetricsConfig } from './index'
import dataJson from './data.json'
export const option = {
dataset: dataJson.source,
title: '智慧园区',
titleColor: '#ffffff',
titleSize: 22,
labelColor: '#B0E0E6',
labelSize: 16,
valueColor: '#00E5FF',
valueSize: 32,
unitColor: '#B0E0E6',
unitSize: 14,
accentColor1: '#4A90E2',
accentColor2: '#8A2BE2'
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = SmartCampusMetricsConfig.key
public chartConfig = SmartCampusMetricsConfig
public option = option
}

View File

@ -1,28 +0,0 @@
<template>
<div class="go-smart-campus-metrics-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.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>

View File

@ -1,24 +0,0 @@
{
"source": [
{
"label": "设备总数",
"value": 108,
"unit": "个"
},
{
"label": "在线设备",
"value": 100,
"unit": "个"
},
{
"label": "离线设备",
"value": 8,
"unit": "个"
},
{
"label": "故障设备",
"value": 2,
"unit": "个"
}
]
}

View File

@ -1,14 +0,0 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
export const SmartCampusMetricsConfig: ConfigType = {
key: 'SmartCampusMetrics',
chartKey: 'VSmartCampusMetrics',
conKey: 'VCSmartCampusMetrics',
title: '智慧园区指标',
category: 'MyComponents',
categoryName: '自定义组件',
package: PackagesCategoryEnum.CHARTS,
chartFrame: ChartFrameEnum.COMMON,
image: 'smart_campus_metrics.png'
}
export default SmartCampusMetricsConfig

View File

@ -1,112 +0,0 @@
<template>
<div class="go-smart-campus-metrics">
<div class="title" :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</div>
<div class="metrics-grid">
<div v-for="(item, index) in option.dataset" :key="index" class="metric-item">
<div class="metric-background"></div>
<div class="metric-content">
<div class="item-label" :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ item.label }}</div>
<div class="item-value">
<span :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">{{ item.value }}</span>
<span :style="{ color: option.unitColor, fontSize: option.unitSize + 'px' }">{{ item.unit }}</span>
</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-smart-campus-metrics {
width: 100%;
height: 100%;
background-color: #0F1C3D;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
.title {
font-weight: bold;
margin-bottom: 20px;
}
.metrics-grid {
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.metric-item {
position: relative;
padding: 20px;
box-sizing: border-box;
text-align: center;
overflow: hidden;
.metric-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle, v-bind('option.accentColor1') 0%, rgba(15, 28, 61, 0) 70%);
opacity: 0.3;
z-index: 1;
}
.metric-content {
position: relative;
z-index: 2;
}
.item-label {
margin-bottom: 10px;
}
.item-value {
span:first-child {
font-weight: bold;
margin-right: 5px;
}
}
&::before, &::after {
content: '';
position: absolute;
width: 50px;
height: 50px;
border-style: solid;
border-color: v-bind('option.accentColor2');
}
&::before {
top: -5px;
left: -5px;
border-width: 2px 0 0 2px;
}
&::after {
bottom: -5px;
right: -5px;
border-width: 0 2px 2px 0;
}
}
}
</style>

View File

@ -1,28 +0,0 @@
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { WisdomMetricsConfig } from './index'
import dataJson from './data.json'
export const option = {
dataset: dataJson.source,
title: '智慧',
subtitle: 'Wisdom',
titleColor: '#ffffff',
subtitleColor: '#B0E0E6',
labelColor: '#B0E0E6',
valueColor: '#00E5FF',
unitColor: '#B0E0E6',
borderColor1: '#00E5FF',
borderColor2: '#8A2BE2',
titleSize: 24,
subtitleSize: 14,
labelSize: 16,
valueSize: 28,
unitSize: 14
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = WisdomMetricsConfig.key
public chartConfig = WisdomMetricsConfig
public option = option
}

View File

@ -1,34 +0,0 @@
<template>
<div class="go-wisdom-metrics-config">
<n-form-item label="主标题">
<n-input v-model:value="option.title" />
</n-form-item>
<n-form-item label="副标题">
<n-input v-model:value="option.subtitle" />
</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.subtitleSize" />
</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>

View File

@ -1,28 +0,0 @@
{
"source": [
{
"label": "今日告警",
"value": 12,
"unit": "起",
"icon": "bell"
},
{
"label": "本月告警",
"value": 359,
"unit": "起",
"icon": "calendar"
},
{
"label": "总告警",
"value": 1045,
"unit": "起",
"icon": "chart-bar"
},
{
"label": "已处理",
"value": 1040,
"unit": "起",
"icon": "check-circle"
}
]
}

View File

@ -1,14 +0,0 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
export const WisdomMetricsConfig: ConfigType = {
key: 'WisdomMetrics',
chartKey: 'VWisdomMetrics',
conKey: 'VCWisdomMetrics',
title: '智慧指标',
category: 'MyComponents',
categoryName: '自定义组件',
package: PackagesCategoryEnum.CHARTS,
chartFrame: ChartFrameEnum.COMMON,
image: 'wisdom_metrics.png'
}
export default WisdomMetricsConfig

View File

@ -1,92 +0,0 @@
<template>
<div class="go-wisdom-metrics">
<div class="metrics-container">
<div class="header">
<div class="title" :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</div>
<div class="subtitle" :style="{ color: option.subtitleColor, fontSize: option.subtitleSize + 'px' }">{{ option.subtitle }}</div>
</div>
<div class="content">
<div v-for="(item, index) in option.dataset" :key="index" class="metric-item">
<svg-icon :icon-class="item.icon" class="item-icon" :style="{ color: option.valueColor }"></svg-icon>
<div class="item-label" :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ item.label }}</div>
<div class="item-value">
<span :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">{{ item.value }}</span>
<span :style="{ color: option.unitColor, fontSize: option.unitSize + 'px' }">{{ item.unit }}</span>
</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-wisdom-metrics {
width: 100%;
height: 100%;
background-color: #0F1C3D;
padding: 10px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
.metrics-container {
width: 100%;
height: 100%;
border: 2px solid;
border-image: linear-gradient(to right, v-bind('option.borderColor1'), v-bind('option.borderColor2')) 1;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.header {
text-align: center;
margin-bottom: 20px;
.title {
font-weight: bold;
}
}
.content {
flex: 1;
display: flex;
justify-content: space-around;
align-items: center;
}
.metric-item {
display: flex;
flex-direction: column;
align-items: center;
.item-icon {
font-size: 32px;
margin-bottom: 10px;
}
.item-label {
margin-bottom: 5px;
}
.item-value {
span:first-child {
font-weight: bold;
margin-right: 5px;
}
}
}
}
</style>

View File

@ -1,10 +1,7 @@
import { Componet1 } from './Componet1/index'
import { AlarmListConfig } from './AlarmList/index'
import { WisdomMetricsConfig } from './WisdomMetrics/index'
import { SmartCampusMetricsConfig } from './SmartCampusMetrics/index'
import { SceneDistributionConfig } from './SceneDistribution/index'
import { TopAlarmsConfig } from './TopAlarms/index'
import { AlarmTrendConfig } from './AlarmTrend'
import { DetailedSceneConfig } from './DetailedScene/index'
import { ParkingSceneConfig } from './ParkingScene/index'
import { WorkshopSceneConfig } from './WorkshopScene/index'
@ -14,11 +11,8 @@ import { StorageSceneConfig } from './StorageScene'
export default [
Componet1,
AlarmListConfig,
WisdomMetricsConfig,
SmartCampusMetricsConfig,
SceneDistributionConfig,
TopAlarmsConfig,
AlarmTrendConfig,
DetailedSceneConfig,
ParkingSceneConfig,
WorkshopSceneConfig,