sd
This commit is contained in:
parent
739a8343fa
commit
96a80d8131
@ -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'])
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
@ -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]
|
|
||||||
}
|
|
||||||
@ -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
|
|
||||||
@ -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>
|
|
||||||
@ -5,7 +5,7 @@ export const Componet1: ConfigType = {
|
|||||||
key: 'Componet1',
|
key: 'Componet1',
|
||||||
chartKey: 'VComponet1',
|
chartKey: 'VComponet1',
|
||||||
conKey: 'VCComponet1',
|
conKey: 'VCComponet1',
|
||||||
title: '列表组件',
|
title: '测试组件',
|
||||||
category: 'MyComponents',
|
category: 'MyComponents',
|
||||||
categoryName: '自定义组件',
|
categoryName: '自定义组件',
|
||||||
package: 'Charts',
|
package: 'Charts',
|
||||||
|
|||||||
@ -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
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
{
|
|
||||||
"source": [
|
|
||||||
{
|
|
||||||
"label": "设备总数",
|
|
||||||
"value": 108,
|
|
||||||
"unit": "个"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "在线设备",
|
|
||||||
"value": 100,
|
|
||||||
"unit": "个"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "离线设备",
|
|
||||||
"value": 8,
|
|
||||||
"unit": "个"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "故障设备",
|
|
||||||
"value": 2,
|
|
||||||
"unit": "个"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -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
|
|
||||||
@ -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>
|
|
||||||
@ -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
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
@ -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"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -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
|
|
||||||
@ -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>
|
|
||||||
@ -1,10 +1,7 @@
|
|||||||
import { Componet1 } from './Componet1/index'
|
import { Componet1 } from './Componet1/index'
|
||||||
import { AlarmListConfig } from './AlarmList/index'
|
import { AlarmListConfig } from './AlarmList/index'
|
||||||
import { WisdomMetricsConfig } from './WisdomMetrics/index'
|
|
||||||
import { SmartCampusMetricsConfig } from './SmartCampusMetrics/index'
|
|
||||||
import { SceneDistributionConfig } from './SceneDistribution/index'
|
import { SceneDistributionConfig } from './SceneDistribution/index'
|
||||||
import { TopAlarmsConfig } from './TopAlarms/index'
|
import { TopAlarmsConfig } from './TopAlarms/index'
|
||||||
import { AlarmTrendConfig } from './AlarmTrend'
|
|
||||||
import { DetailedSceneConfig } from './DetailedScene/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'
|
||||||
@ -14,11 +11,8 @@ import { StorageSceneConfig } from './StorageScene'
|
|||||||
export default [
|
export default [
|
||||||
Componet1,
|
Componet1,
|
||||||
AlarmListConfig,
|
AlarmListConfig,
|
||||||
WisdomMetricsConfig,
|
|
||||||
SmartCampusMetricsConfig,
|
|
||||||
SceneDistributionConfig,
|
SceneDistributionConfig,
|
||||||
TopAlarmsConfig,
|
TopAlarmsConfig,
|
||||||
AlarmTrendConfig,
|
|
||||||
DetailedSceneConfig,
|
DetailedSceneConfig,
|
||||||
ParkingSceneConfig,
|
ParkingSceneConfig,
|
||||||
WorkshopSceneConfig,
|
WorkshopSceneConfig,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user