diff --git a/src/packages/components/Charts/MyComponents/DeviceStatus/config.ts b/src/packages/components/Charts/MyComponents/DeviceStatus/config.ts index e2bb93d..3ab7cfd 100644 --- a/src/packages/components/Charts/MyComponents/DeviceStatus/config.ts +++ b/src/packages/components/Charts/MyComponents/DeviceStatus/config.ts @@ -2,6 +2,27 @@ import { PublicConfigClass } from '@/packages/public' import { CreateComponentType } from '@/packages/index.d' import { DeviceStatusConfig } from './index' import dataJson from './data.json' + +export enum FontWeightEnum { + NORMAL = '常规', + BOLD = '加粗', +} + +export enum FontStyleEnum { + NORMAL = '常规', + ITALIC = '斜体', +} + +export const FontWeightObject = { + [FontWeightEnum.NORMAL]: 'normal', + [FontWeightEnum.BOLD]: 'bold', +} + +export const FontStyleObject = { + [FontStyleEnum.NORMAL]: 'normal', + [FontStyleEnum.ITALIC]: 'italic', +} + export const option = { dataset: dataJson.source, header: ['所属企业', '设备类型', '设备名称'], @@ -20,15 +41,16 @@ export const option = { onlineRate: 75, onlineDevice: 23, totalDevice: 100, - headerBgColor1: '#0059c9', - headerBgColor2: '#003a8c', - legendColors: ['#00E5FF', '#00FF7F', '#FFFFFF'], progressColor: '#00E5FF', progressBgColor: 'rgba(0, 0, 0, 0.1)', progressTextColor: '#DDE3E9', paddingX: 60, paddingY: -4, - letterSpacing: 1 + letterSpacing: 1, + // new properties from AlarmList + fontWeight: 'normal', + fontStyle: 'normal', + isShowButton: false } export default class Config extends PublicConfigClass implements CreateComponentType { diff --git a/src/packages/components/Charts/MyComponents/DeviceStatus/config.vue b/src/packages/components/Charts/MyComponents/DeviceStatus/config.vue index b55c8c9..9ece4c5 100644 --- a/src/packages/components/Charts/MyComponents/DeviceStatus/config.vue +++ b/src/packages/components/Charts/MyComponents/DeviceStatus/config.vue @@ -1,40 +1,102 @@ \ No newline at end of file + +const fontWeightOptions = [ + { + label: FontWeightEnum.NORMAL, + value: FontWeightObject[FontWeightEnum.NORMAL] + }, + { + label: FontWeightEnum.BOLD, + value: FontWeightObject[FontWeightEnum.BOLD] + } +] +const fontStyleOptions = [ + { + label: FontStyleEnum.NORMAL, + value: FontStyleObject[FontStyleEnum.NORMAL] + }, + { + label: FontStyleEnum.ITALIC, + value: FontStyleObject[FontStyleEnum.ITALIC] + } +] + diff --git a/src/packages/components/Charts/MyComponents/DeviceStatus/index.vue b/src/packages/components/Charts/MyComponents/DeviceStatus/index.vue index f6cf5b4..29c1d35 100644 --- a/src/packages/components/Charts/MyComponents/DeviceStatus/index.vue +++ b/src/packages/components/Charts/MyComponents/DeviceStatus/index.vue @@ -119,12 +119,11 @@ SmallBorder { .header { display: flex; - align-items: center; justify-content: space-between; margin-bottom: 5px; - .header-right { + .header-right-squares { display: flex; align-items: center; diff --git a/src/packages/components/Charts/MyComponents/WorkshopScene/config.ts b/src/packages/components/Charts/MyComponents/WorkshopScene/config.ts index 9fd2396..7ab33d6 100644 --- a/src/packages/components/Charts/MyComponents/WorkshopScene/config.ts +++ b/src/packages/components/Charts/MyComponents/WorkshopScene/config.ts @@ -38,9 +38,9 @@ export const option = { sceneNameColor: '#ffffff', sceneNameSize: 20, labelColor: '#B0E0E6', - labelSize: 16, + labelSize: 14, valueColor: '#ffffff', - valueSize: 28, + valueSize: 22, pointColor1: '#00E5FF', pointColor2: '#FFD700' } diff --git a/src/packages/components/Charts/MyComponents/WorkshopScene/index.vue b/src/packages/components/Charts/MyComponents/WorkshopScene/index.vue index 631f4b0..4b18339 100644 --- a/src/packages/components/Charts/MyComponents/WorkshopScene/index.vue +++ b/src/packages/components/Charts/MyComponents/WorkshopScene/index.vue @@ -18,22 +18,45 @@ {{ option.linkText }}
-
-
{{ - scene.name }}
-
- +
262 +
+
+
+
+ 智控场景 +
+
6852 +
+
+
+
+
+
+ 危废品库
+
+
+
+ 智控场景 +
+
6852 +
+
+
+
+ 场景总数 +
+
262 +
+
@@ -64,6 +87,7 @@ const option = computed(() => props.chartConfig.option) .go-workshop-scene { position: absolute; top: 0; + left: 0; width: 100%; height: 100%; padding: 12px; @@ -82,7 +106,7 @@ const option = computed(() => props.chartConfig.option) .title { display: flex; align-items: center; - margin-left: 35px; + margin-left: 35px; margin-top: 5px; .title-text { @@ -111,19 +135,19 @@ const option = computed(() => props.chartConfig.option) .scene-row { display: flex; align-items: center; - padding: 0 25px; - height: 120px; // Taller rows + padding: 0 8px; + height: 95px; // Taller rows background-size: 100% 100%; background-repeat: no-repeat; &.reverse { flex-direction: row-reverse; - .scene-name { - margin-right: 0; + .scene-name-2 { + margin-right: 95px; margin-left: 25px; } - + .metrics-container { margin-right: auto; margin-left: 0; @@ -158,9 +182,13 @@ const option = computed(() => props.chartConfig.option) } } - .scene-name { + .scene-name-1, + .scene-name-2 { font-weight: bold; - margin-left: 105px; + } + + .scene-name-1 { + margin-left: 95px; } .metrics-container { @@ -175,7 +203,8 @@ const option = computed(() => props.chartConfig.option) margin: 0 30px; position: relative; - &::before, &::after { + &::before, + &::after { content: ''; position: absolute; left: -2px; @@ -184,35 +213,68 @@ const option = computed(() => props.chartConfig.option) background-color: #00E5FF; border-radius: 50%; } + &::before { top: -1px; } + &::after { bottom: -1px; } } } - .metric { + .metric-top-1, + .metric-top-2, + .metric-bottom-1, + .metric-bottom-2 { display: flex; flex-direction: column; - align-items: flex-start; - + align-items: center; + .metric-label { display: flex; align-items: center; - margin-bottom: 10px; // More space + margin-bottom: 2px; + + span { + margin-bottom: -5px; + margin-left: 3px; + } + .point { - width: 0px; // Bigger point - height: 0px; + width: 8px; + height: 8px; border-radius: 50%; margin-right: 10px; } } + .metric-value { - font-weight: bold; - margin-left: 40px; // Align with label text + font-weight: normal; + position: relative; + left: 10px; // Visually center the value under the text } } + + .metric-top-1 { + position: relative; + left: -85px; + } + + .metric-top-2 { + position: relative; + left: -30px; + } + + .metric-bottom-1 { + position: relative; + left: 15px; + } + + .metric-bottom-2 { + position: relative; + left: 70px; + } } diff --git a/src/packages/components/Charts/MyComponents/index.ts b/src/packages/components/Charts/MyComponents/index.ts index 4b3d95f..f2afeb0 100644 --- a/src/packages/components/Charts/MyComponents/index.ts +++ b/src/packages/components/Charts/MyComponents/index.ts @@ -8,6 +8,8 @@ import { LineDropdownConfig } from './LineDropdown/index' import { PieCenterConfig } from './PieCenter/index' import { LineGraph01Config } from './LineGraph01/index' import { LineGraph02Config } from './LineGraph02/index' +import { LineGraph01Config } from './LineGraph01/index' +import { LineGraph02Config } from './LineGraph02/index' import { MaxTrimConfig } from './MaxTrim/index' import { SmallBorderConfig } from './SmallBorder/index'