diff --git a/views/device/components/DashboardPreviewTab/index.vue b/views/device/components/DashboardPreviewTab/index.vue
index 4c254cc..759cc96 100644
--- a/views/device/components/DashboardPreviewTab/index.vue
+++ b/views/device/components/DashboardPreviewTab/index.vue
@@ -107,6 +107,14 @@ defineExpose({
 .dashboard-preview-tab {
   width: 100%;
   height: 100%;
+  :deep(.unified-drawer .list-container .lazy-image-container){
+    // width: 90px !important;
+    img{
+      width: 100% !important;
+      height: 100% !important;
+      object-fit: cover;
+    }
+  }
 }
 
 .preview-host {
diff --git a/visDashboard/MetadataManagement/EventShowCard/eventShowCard.png b/visDashboard/MetadataManagement/EventShowCard/eventShowCard.png
new file mode 100644
index 0000000..9cd5d64
Binary files /dev/null and b/visDashboard/MetadataManagement/EventShowCard/eventShowCard.png differ
diff --git a/visDashboard/MetadataManagement/IndividualCard/Config.vue b/visDashboard/MetadataManagement/IndividualCard/Config.vue
index 55f7450..c8d3252 100644
--- a/visDashboard/MetadataManagement/IndividualCard/Config.vue
+++ b/visDashboard/MetadataManagement/IndividualCard/Config.vue
@@ -1,5 +1,34 @@
-<template>
+<template>
   <div class="card-container">
+    <div class="card-header">
+      <config-item
+        v-if="isProduct"
+        label="设备"
+      >
+        <a-select
+          v-model:value="config.deviceId"
+          :options="deviceOptions"
+          placeholder="请选择设备"
+          optionFilterProp="label"
+          style="width: 100%"
+          popupClassName="is-dark"
+          @change="onDeviceChange"
+        />
+      </config-item>
+
+      <config-item label="属性">
+        <a-select
+          v-model:value="config.propertyId"
+          :options="typeOptions"
+          placeholder="请选择属性"
+          optionFilterProp="label"
+          style="width: 100%"
+          popupClassName="is-dark"
+          @change="onTypeChange"
+        />
+      </config-item>
+    </div>
+    <a-divider />
     <config-item label="图标">
       <IconLibrary
         v-model:type="config.icon"
@@ -56,8 +85,6 @@
       />
     </config-item>
 
-
-
     <config-item label="属性值样式">
       <div class="card-container-row">
         <ColorPicker
@@ -97,47 +124,6 @@
         />
       </div>
     </config-item>
-    <!-- <config-item label="默认值">
-      <a-input
-        v-model:value="config.value"
-        placeholder="请输入默认值"
-        style="width: 100%"
-        @change="onChange"
-      />
-    </config-item>
-    <config-item label="标题">
-      <a-input
-        v-model:value="config.title"
-        placeholder="请输入标题"
-        style="width: 100%"
-        @change="onChange"
-      />
-    </config-item> -->
-    <config-item
-      v-if="isProduct"
-      label="设备"
-    >
-      <a-select
-        v-model:value="config.deviceId"
-        :options="deviceOptions"
-        placeholder="请选择设备"
-        optionFilterProp="label"
-        style="width: 100%"
-        popupClassName="is-dark"
-        @change="onDeviceChange"
-      />
-    </config-item>
-    <config-item label="属性">
-      <a-select
-        v-model:value="config.propertyId"
-        :options="typeOptions"
-        placeholder="请选择属性"
-        optionFilterProp="label"
-        style="width: 100%"
-        popupClassName="is-dark"
-        @change="onTypeChange"
-      />
-    </config-item>
   </div>
 </template>
 
@@ -268,10 +254,25 @@ watch(
 
 <style lang="less" scoped>
 .card-container {
+  .card-header {
+    gap: 12px;
+    display: flex;
+    flex-direction: column;
+    padding: 14px 16px;
+    border-radius: 12px;
+    background: #f7f9fc;
+  }
   color: #fff;
   gap: 12px;
   display: flex;
   flex-direction: column;
+  :deep(.ant-divider-horizontal) {
+    margin: 0;
+    margin-bottom: 12px;
+  }
+  :deep(.config-form-item-content) {
+    padding: 0;
+  }
 }
 
 .card-container-row {
diff --git a/visDashboard/MetadataManagement/IndividualCard/IndividualCard.vue b/visDashboard/MetadataManagement/IndividualCard/IndividualCard.vue
index b633c63..22d6df9 100644
--- a/visDashboard/MetadataManagement/IndividualCard/IndividualCard.vue
+++ b/visDashboard/MetadataManagement/IndividualCard/IndividualCard.vue
@@ -157,7 +157,7 @@ const displayValue = computed(() => {
   if (value === undefined || value === null || value === '') {
     const fallback = config.value.value
     if (fallback === undefined || fallback === null || fallback === '') {
-      return 'N/A'
+      return '--'
     }
     return String(fallback)
   }
diff --git a/visDashboard/MetadataManagement/IndividualCard/config.ts b/visDashboard/MetadataManagement/IndividualCard/config.ts
index aede1ec..0669203 100644
--- a/visDashboard/MetadataManagement/IndividualCard/config.ts
+++ b/visDashboard/MetadataManagement/IndividualCard/config.ts
@@ -21,7 +21,7 @@
       iconSize: 32,
       titleColor: 'rgba(0, 0, 0, 0.88)',
       titleFontSize: 32,
-      value: 'N/A',
+      value: '',
       valueColor: 'rgba(0, 0, 0, 0.88)',
       valueFontSize: 32,
       unit: '',
diff --git a/visDashboard/MetadataManagement/IndividualCard/individualCard.png b/visDashboard/MetadataManagement/IndividualCard/individualCard.png
new file mode 100644
index 0000000..3d2992f
Binary files /dev/null and b/visDashboard/MetadataManagement/IndividualCard/individualCard.png differ
diff --git a/visDashboard/MetadataManagement/PropertyBattery/Config.vue b/visDashboard/MetadataManagement/PropertyBattery/Config.vue
index 912afa9..01d40ae 100644
--- a/visDashboard/MetadataManagement/PropertyBattery/Config.vue
+++ b/visDashboard/MetadataManagement/PropertyBattery/Config.vue
@@ -1,5 +1,34 @@
 <template>
-  <div class="card-container">
+  <div class="card-container">    <div class="card-header">
+      <config-item
+      v-if="isProduct"
+      label="设备"
+    >
+      <a-select
+        v-model:value="config.deviceId"
+        :options="deviceOptions"
+        placeholder="请选择设备"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onDeviceChange"
+      />
+    </config-item>
+
+      <config-item label="属性">
+      <a-select
+        v-model:value="config.propertyId"
+        :options="typeOptions"
+        placeholder="请选择属性"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onTypeChange"
+      />
+    </config-item>
+    
+    </div>
+    <a-divider />
     <config-item label="标题样式">
       <div class="card-container-row">
         <ColorPicker
@@ -122,33 +151,6 @@
         @change="onChange"
       />
     </config-item>
-
-    <config-item
-      v-if="isProduct"
-      label="设备"
-    >
-      <a-select
-        v-model:value="config.deviceId"
-        :options="deviceOptions"
-        placeholder="请选择设备"
-        optionFilterProp="label"
-        style="width: 100%"
-        popupClassName="is-dark"
-        @change="onDeviceChange"
-      />
-    </config-item>
-
-    <config-item label="属性">
-      <a-select
-        v-model:value="config.propertyId"
-        :options="typeOptions"
-        placeholder="请选择属性"
-        optionFilterProp="label"
-        style="width: 100%"
-        popupClassName="is-dark"
-        @change="onTypeChange"
-      />
-    </config-item>
   </div>
 </template>
 
@@ -271,10 +273,25 @@ watch(
 
 <style lang="less" scoped>
 .card-container {
+  .card-header {
+    gap: 12px;
+    display: flex;
+    flex-direction: column;
+    padding: 14px 16px;
+    border-radius: 12px;
+    background: #f7f9fc;
+  }
   color: #fff;
   gap: 12px;
   display: flex;
   flex-direction: column;
+  :deep(.ant-divider-horizontal) {
+    margin: 0;
+    margin-bottom: 12px;
+  }
+   :deep(.config-form-item-content) {
+    padding: 0;
+  }
 }
 
 .card-container-row {
diff --git a/visDashboard/MetadataManagement/PropertyBattery/PropertyBattery.vue b/visDashboard/MetadataManagement/PropertyBattery/PropertyBattery.vue
index 5dcde17..8dd99a1 100644
--- a/visDashboard/MetadataManagement/PropertyBattery/PropertyBattery.vue
+++ b/visDashboard/MetadataManagement/PropertyBattery/PropertyBattery.vue
@@ -164,7 +164,7 @@ const displayValue = computed(() => {
   if (value === undefined || value === null || value === '') {
     const fallback = config.value.value
     if (fallback === undefined || fallback === null || fallback === '') {
-      return 'N/A'
+      return '--'
     }
     return String(fallback)
   }
diff --git a/visDashboard/MetadataManagement/PropertyBattery/config.ts b/visDashboard/MetadataManagement/PropertyBattery/config.ts
index 14e745b..b4584cd 100644
--- a/visDashboard/MetadataManagement/PropertyBattery/config.ts
+++ b/visDashboard/MetadataManagement/PropertyBattery/config.ts
@@ -17,7 +17,7 @@ export const propertyBatteryConfig = {
     propertyBattery: {
       titleColor: 'rgba(0, 0, 0, 0.88)',
       titleFontSize: 16,
-      value: 'N/A',
+      value: '',
       valueColor: 'rgba(0, 0, 0, 0.88)',
       valueFontSize: 32,
       unit: '%',
diff --git a/visDashboard/MetadataManagement/PropertyBattery/propertyBattery.png b/visDashboard/MetadataManagement/PropertyBattery/propertyBattery.png
new file mode 100644
index 0000000..e357d16
Binary files /dev/null and b/visDashboard/MetadataManagement/PropertyBattery/propertyBattery.png differ
diff --git a/visDashboard/MetadataManagement/PropertyChart/Config.vue b/visDashboard/MetadataManagement/PropertyChart/Config.vue
index cf4b8c0..8ffa796 100644
--- a/visDashboard/MetadataManagement/PropertyChart/Config.vue
+++ b/visDashboard/MetadataManagement/PropertyChart/Config.vue
@@ -1,5 +1,34 @@
 <template>
-  <div class="card-container">
+  <div class="card-container">    <div class="card-header">
+      <config-item
+      v-if="isProduct"
+      label="设备"
+    >
+      <a-select
+        v-model:value="config.deviceId"
+        :options="deviceOptions"
+        placeholder="请选择设备"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onDeviceChange"
+      />
+    </config-item>
+
+      <config-item label="属性">
+      <a-select
+        v-model:value="config.propertyId"
+        :options="typeOptions"
+        placeholder="请选择属性"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onTypeChange"
+      />
+    </config-item>
+    
+    </div>
+    <a-divider />
     <config-item label="标题样式">
       <div class="card-container-row">
         <ColorPicker
@@ -88,33 +117,6 @@
         @change="onChange"
       />
     </config-item>
-
-    <config-item
-      v-if="isProduct"
-      label="设备"
-    >
-      <a-select
-        v-model:value="config.deviceId"
-        :options="deviceOptions"
-        placeholder="请选择设备"
-        optionFilterProp="label"
-        style="width: 100%"
-        popupClassName="is-dark"
-        @change="onDeviceChange"
-      />
-    </config-item>
-
-    <config-item label="属性">
-      <a-select
-        v-model:value="config.propertyId"
-        :options="typeOptions"
-        placeholder="请选择属性"
-        optionFilterProp="label"
-        style="width: 100%"
-        popupClassName="is-dark"
-        @change="onTypeChange"
-      />
-    </config-item>
   </div>
 </template>
 
@@ -237,10 +239,25 @@ watch(
 
 <style lang="less" scoped>
 .card-container {
+  .card-header {
+    gap: 12px;
+    display: flex;
+    flex-direction: column;
+    padding: 14px 16px;
+    border-radius: 12px;
+    background: #f7f9fc;
+  }
   color: #fff;
   gap: 12px;
   display: flex;
   flex-direction: column;
+  :deep(.ant-divider-horizontal) {
+    margin: 0;
+    margin-bottom: 12px;
+  }
+   :deep(.config-form-item-content) {
+    padding: 0;
+  }
 }
 
 .card-container-row {
diff --git a/visDashboard/MetadataManagement/PropertyChart/PropertyChart.vue b/visDashboard/MetadataManagement/PropertyChart/PropertyChart.vue
index f18f622..16412d4 100644
--- a/visDashboard/MetadataManagement/PropertyChart/PropertyChart.vue
+++ b/visDashboard/MetadataManagement/PropertyChart/PropertyChart.vue
@@ -176,7 +176,7 @@ const displayValue = computed(() => {
   const value = currentRawValue.value
 
   if (value === undefined || value === null || value === '') {
-    return 'N/A'
+    return '--'
   }
 
   return String(value)
diff --git a/visDashboard/MetadataManagement/PropertyChart/propertyChart.png b/visDashboard/MetadataManagement/PropertyChart/propertyChart.png
new file mode 100644
index 0000000..adfd0bd
Binary files /dev/null and b/visDashboard/MetadataManagement/PropertyChart/propertyChart.png differ
diff --git a/visDashboard/MetadataManagement/PropertyEnum/Config.vue b/visDashboard/MetadataManagement/PropertyEnum/Config.vue
new file mode 100644
index 0000000..7848448
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyEnum/Config.vue
@@ -0,0 +1,392 @@
+<template>
+  <div class="card-container">    <div class="card-header">
+      <config-item label="属性">
+      <a-select
+        v-model:value="config.propertyId"
+        :options="propertyOptions"
+        placeholder="请选择属性(enum)"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onPropertyChange"
+      />
+    </config-item>
+
+      <config-item label="功能">
+      <a-select
+        v-model:value="config.functionId"
+        :options="functionOptions"
+        placeholder="请选择功能"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onFunctionChange"
+      />
+    </config-item>
+
+      <config-item
+      v-if="config.functionId"
+      label="参数"
+    >
+      <a-select
+        v-model:value="config.paramId"
+        :options="paramOptions"
+        placeholder="请选择参数(enum)"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onChange"
+      />
+    </config-item>
+
+      <config-item
+      v-if="isProduct"
+      label="设备"
+    >
+      <a-select
+        v-model:value="config.deviceId"
+        :options="deviceOptions"
+        placeholder="请选择设备"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onDeviceChange"
+      />
+    </config-item>
+    
+    </div>
+    <a-divider />
+    <config-item label="图标">
+      <IconLibrary
+        v-model:type="config.icon"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="图标样式">
+      <div class="card-container-row">
+        <ColorPicker
+          v-model:value="config.iconColor"
+          :isInput="false"
+          style="margin-right: 6px"
+          theme="white"
+          @change="onChange"
+        />
+        <a-input-number
+          v-model:value="config.iconSize"
+          :min="12"
+          :max="48"
+          :precision="0"
+          style="flex: 1"
+          @change="onChange"
+        />
+      </div>
+    </config-item>
+
+    <config-item label="标题样式">
+      <div class="card-container-row">
+        <ColorPicker
+          v-model:value="config.titleColor"
+          :isInput="false"
+          style="margin-right: 6px"
+          theme="white"
+          @change="onChange"
+        />
+        <a-input-number
+          v-model:value="config.titleFontSize"
+          :min="12"
+          :max="60"
+          :precision="0"
+          style="flex: 1"
+          @change="onChange"
+        />
+      </div>
+    </config-item>
+
+    <config-item label="枚举值样式">
+      <div class="card-container-row">
+        <ColorPicker
+          v-model:value="config.valueColor"
+          :isInput="false"
+          style="margin-right: 6px"
+          theme="white"
+          @change="onChange"
+        />
+        <a-input-number
+          v-model:value="config.valueFontSize"
+          :min="12"
+          :max="48"
+          :precision="0"
+          style="flex: 1"
+          @change="onChange"
+        />
+      </div>
+    </config-item>
+
+    <config-item label="选中背景色">
+        <ColorPicker
+          v-model:value="config.activeColor"
+          :isInput="false"
+          theme="white"
+          @change="onChange"
+        />
+      </config-item>
+
+    <config-item
+        label="未选中背景色"
+        label-width="90px"
+      >
+        <ColorPicker
+          v-model:value="config.inactiveColor"
+          :isInput="false"
+          theme="white"
+          @change="onChange"
+        />
+      </config-item>
+
+    <config-item label="选中文字色">
+        <ColorPicker
+          v-model:value="config.activeTextColor"
+          :isInput="false"
+          theme="white"
+          @change="onChange"
+        />
+      </config-item>
+
+    <config-item
+        label="未选中文字色"
+        label-width="90px"
+      >
+        <ColorPicker
+          v-model:value="config.inactiveTextColor"
+          :isInput="false"
+          theme="white"
+          @change="onChange"
+        />
+      </config-item>
+
+    <config-item label="边框颜色">
+        <ColorPicker
+          v-model:value="config.borderColor"
+          :isInput="false"
+          theme="white"
+          @change="onChange"
+        />
+      </config-item>
+
+    <config-item label="圆角">
+      <a-input-number
+        v-model:value="config.borderRadius"
+        :min="0"
+        :max="24"
+        :precision="0"
+        style="width: 100%"
+        @change="onChange"
+      />
+    </config-item>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { cloneDeep, throttle } from 'lodash-es'
+import { moduleRegistry } from '@jetlinks-web-core/utils/module-registry'
+import IconLibrary from '@jetlinks-web-core/components/IconLibrary/index.vue'
+import { useProductStore } from '@device-manager-ui/store/product'
+import { useInstanceStore } from '@device-manager-ui/store/instance'
+import { queryNoPagingPost } from '@device-manager-ui/api/instance'
+import { propertyEnumConfig } from './config'
+
+const { ConfigItem, ColorPicker } = moduleRegistry.getResource('visualization-designer-ui', 'components')
+
+const props = defineProps({
+  configData: {
+    type: Object,
+    default: () => ({})
+  },
+  type: {
+    type: String,
+    default: 'propertyEnum'
+  }
+})
+
+const emits = defineEmits(['change'])
+const config = ref<any>({})
+const productStore = useProductStore()
+const instanceStore = useInstanceStore()
+const route = useRoute()
+const deviceOptions = ref<any[]>([])
+const deviceOptionsMap = ref(new Map())
+
+const isProduct = computed(() => route.name === 'device/Product/Detail')
+
+const emitChange = throttle(() => {
+  emits('change', config.value, props.type)
+}, 20)
+
+const onChange = () => {
+  emitChange()
+}
+
+const strToJson = (str: string, key: string = 'properties') => {
+  try {
+    return JSON.parse(str || '{}')[key] || []
+  } catch (e) {
+    return []
+  }
+}
+
+const isEnumType = (item: any) => String(item?.valueType?.type || '').toLowerCase() === 'enum'
+
+const propertyOptions = computed(() => {
+  try {
+    let properties = []
+    if (isProduct.value) {
+      const hasTarget = config.value.deviceId && deviceOptionsMap.value.size > 0
+      properties = strToJson(productStore.detail.metadata)
+      if (hasTarget) {
+        properties.push(...strToJson(deviceOptionsMap.value.get(config.value.deviceId)?.deriveMetadata))
+      }
+    } else {
+      properties = strToJson(instanceStore.current.metadata || instanceStore.detail.metadata)
+    }
+
+    return properties
+      .filter((item: any) => isEnumType(item))
+      .map((item: any) => ({
+        ...item,
+        label: item.name,
+        value: item.id
+      }))
+  } catch (e) {
+    return []
+  }
+})
+
+const functionOptions = computed(() => {
+  try {
+    let functions = []
+    if (isProduct.value) {
+      const hasTarget = config.value.deviceId && deviceOptionsMap.value.size > 0
+      functions = strToJson(productStore.detail.metadata, 'functions')
+      if (hasTarget) {
+        functions.push(...strToJson(deviceOptionsMap.value.get(config.value.deviceId)?.deriveMetadata, 'functions'))
+      }
+    } else {
+      functions = strToJson(instanceStore.current.metadata || instanceStore.detail.metadata, 'functions')
+    }
+
+    return functions.map((item: any) => ({
+      ...item,
+      label: item.name,
+      value: item.id
+    }))
+  } catch (e) {
+    return []
+  }
+})
+
+const paramOptions = computed(() => {
+  const functionId = config.value.functionId
+  if (!functionId) return []
+
+  const currentFunction = functionOptions.value.find((item: any) => item.value === functionId)
+  const inputs = currentFunction?.inputs || []
+
+  return inputs
+    .filter((item: any) => isEnumType(item))
+    .map((item: any) => ({
+      ...item,
+      label: item.name,
+      value: item.id
+    }))
+})
+
+const onDeviceChange = (value: string, option: any) => {
+  config.value.deviceId = value
+  config.value.deviceName = option?.label || ''
+  config.value.propertyId = undefined
+  config.value.propertyName = ''
+  config.value.functionId = undefined
+  config.value.paramId = undefined
+  emitChange()
+}
+
+const onPropertyChange = (value: string) => {
+  const option = propertyOptions.value.find((item: any) => item.value === value)
+  config.value.propertyId = value
+  config.value.propertyName = option?.label || ''
+  emitChange()
+}
+
+const onFunctionChange = () => {
+  config.value.paramId = undefined
+  emitChange()
+}
+
+const getDeviceList = () => {
+  if (!isProduct.value) return
+
+  queryNoPagingPost({ terms: [{ column: 'productId', value: route.params.id, termType: 'eq' }] }).then((res) => {
+    deviceOptions.value = (res.result || []).map((item: any) => {
+      deviceOptionsMap.value.set(item.id, item)
+      return {
+        value: item.id,
+        label: item.name,
+        productId: item.productId,
+        metadata: item.deriveMetadata
+      }
+    })
+  })
+}
+
+onMounted(() => {
+  getDeviceList()
+})
+
+watch(
+  () => props.configData?.componentProps?.[props.type],
+  (newVal) => {
+    config.value = cloneDeep({
+      ...propertyEnumConfig.componentProps.propertyEnum,
+      ...(newVal || {})
+    })
+  },
+  { deep: true, immediate: true }
+)
+</script>
+
+<style lang="less" scoped>
+.card-container {
+  .card-header {
+    gap: 12px;
+    display: flex;
+    flex-direction: column;
+    padding: 14px 16px;
+    border-radius: 12px;
+    background: #f7f9fc;
+  }
+  color: #fff;
+  gap: 12px;
+  display: flex;
+  flex-direction: column;
+  :deep(.ant-divider-horizontal) {
+    margin: 0;
+    margin-bottom: 12px;
+  }
+  :deep(.config-form-item-content) {
+    padding: 0;
+  }
+}
+
+.card-container-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.color-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+</style>
diff --git a/visDashboard/MetadataManagement/PropertyEnum/PropertyEnum.vue b/visDashboard/MetadataManagement/PropertyEnum/PropertyEnum.vue
new file mode 100644
index 0000000..dee604c
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyEnum/PropertyEnum.vue
@@ -0,0 +1,491 @@
+<template>
+  <div
+    class="property-enum"
+    :style="style"
+  >
+    <div
+      class="property-enum__title"
+      :style="titleStyle"
+      :title="displayTitle"
+    >
+      {{ displayTitle }}
+    </div>
+
+    <div class="property-enum__body">
+      <div
+        v-if="enumOptions.length"
+        class="property-enum__options"
+        :style="optionsStyle"
+      >
+        <div
+          v-for="option in enumOptions"
+          :key="String(option.value)"
+          class="property-enum__option"
+          :class="{
+            'property-enum__option--active': isOptionActive(option.value),
+            'property-enum__option--disabled': props.isEdit || !canExecute
+          }"
+          :style="getOptionStyle(option.value)"
+          @click="handleOptionClick(option.value)"
+        >
+          <AIcon
+            :type="config.icon || 'RocketOutlined'"
+            class="property-enum__option-icon"
+            :style="iconStyle"
+          />
+          <span>{{ option.text }}</span>
+        </div>
+      </div>
+
+      <a-empty
+        v-else
+        :image="Empty.PRESENTED_IMAGE_SIMPLE"
+        description="暂无枚举项"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { Empty } from 'ant-design-vue'
+import { dashboard } from '@device-manager-ui/api/dashboard'
+import { detail, executeFunctions } from '@device-manager-ui/api/instance'
+import { useInstanceStore } from '@device-manager-ui/store/instance'
+import { useProductStore } from '@device-manager-ui/store/product'
+import { wsClient } from '@jetlinks-web/core'
+import { onlyMessage } from '@jetlinks-web/utils'
+import { debounce, throttle } from 'lodash-es'
+import { map } from 'rxjs/operators'
+
+defineOptions({
+  name: 'PropertyEnum'
+})
+
+interface EnumItem {
+  text?: string
+  label?: string
+  value?: string | number | boolean
+}
+
+interface PropertyEnumComponentConfig {
+  title?: string
+  titleColor?: string
+  titleFontSize?: number
+  icon?: string
+  iconColor?: string
+  iconSize?: number
+  valueColor?: string
+  valueFontSize?: number
+  activeColor?: string
+  inactiveColor?: string
+  activeTextColor?: string
+  inactiveTextColor?: string
+  borderColor?: string
+  borderRadius?: number
+  deviceId?: string
+  deviceName?: string
+  propertyId?: string
+  propertyName?: string
+  functionId?: string
+  paramId?: string
+}
+
+interface DashboardCardInfo {
+  id?: string
+  componentProps?: Record<string, unknown>
+}
+
+const props = defineProps({
+  info: {
+    type: Object as PropType<DashboardCardInfo>,
+    default: () => ({})
+  },
+  style: {
+    type: Object as PropType<Record<string, unknown>>,
+    default: () => ({})
+  },
+  isEdit: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const route = useRoute()
+const instanceStore = useInstanceStore()
+const productStore = useProductStore()
+
+const runtimeProductId = ref('')
+const runtimeDeviceName = ref('')
+const metadataText = ref('')
+const propertyValue = ref<Record<string, any>>({})
+const dataSource = ref<Record<string, any>[]>([])
+const subRef = ref<any>()
+const messageCache = new Map<string, Record<string, any>>()
+const pendingValue = ref<unknown>()
+const isUserSelecting = ref(false)
+
+const config = computed<PropertyEnumComponentConfig>(() => {
+  return (props.info?.componentProps?.propertyEnum as PropertyEnumComponentConfig) || {}
+})
+
+const isProduct = computed(() => route.name === 'device/Product/Detail')
+const targetDeviceId = computed(() => String(config.value.deviceId || ''))
+const runtimeDeviceId = computed(() =>
+  isProduct.value ? targetDeviceId.value : String(instanceStore.current.id || '')
+)
+
+const propertyMap = computed(() => {
+  try {
+    const properties = JSON.parse(metadataText.value || '{}').properties || []
+    const mapData = new Map<string, Record<string, any>>()
+
+    properties.forEach((item: Record<string, any>) => {
+      mapData.set(String(item.id || ''), item)
+    })
+
+    return mapData
+  } catch (error) {
+    return new Map<string, Record<string, any>>()
+  }
+})
+
+const selectedProperty = computed(() => {
+  const id = String(config.value.propertyId || '')
+  if (!id) return undefined
+  return dataSource.value.find((item) => String(item.id || '') === id)
+})
+
+const propertyValueType = computed(() => selectedProperty.value?.valueType || {})
+
+const enumOptions = computed(() => {
+  const elements = propertyValueType.value?.elements || []
+  return (elements as EnumItem[]).map((item) => ({
+    text: item.text ?? item.label ?? String(item.value ?? ''),
+    value: item.value
+  }))
+})
+
+const displayTitle = computed(() => {
+  const propertyTitle = config.value.propertyName || selectedProperty.value?.name || config.value.title || 'Enum'
+  const deviceName = config.value.deviceName || runtimeDeviceName.value
+
+  return deviceName ? `${deviceName}(${propertyTitle})` : propertyTitle
+})
+
+const rawValue = computed(() => {
+  const propertyId = String(config.value.propertyId || '')
+  const valueData = propertyId ? propertyValue.value[propertyId] : undefined
+  return valueData?.value
+})
+
+const currentValue = computed(() => {
+  if (isUserSelecting.value && pendingValue.value !== undefined) {
+    return pendingValue.value
+  }
+  return rawValue.value
+})
+
+const canExecute = computed(() => {
+  return Boolean(runtimeDeviceId.value && config.value.functionId && config.value.paramId)
+})
+
+const titleStyle = computed(() => ({
+  color: config.value.titleColor || 'rgba(0, 0, 0, 0.88)',
+  fontSize: `${Number(config.value.titleFontSize || 16)}px`
+}))
+
+const optionsStyle = computed(() => ({
+  '--property-enum-border-color': config.value.borderColor || '#0f766e',
+  '--property-enum-border-radius': `${Number(config.value.borderRadius || 8)}px`
+}))
+
+const iconStyle = computed(() => ({
+  color: config.value.iconColor || 'currentColor',
+  fontSize: `${Number(config.value.iconSize || 16)}px`
+}))
+
+const isOptionActive = (value: unknown) => String(currentValue.value) === String(value)
+
+const getOptionStyle = (value: unknown) => {
+  const active = isOptionActive(value)
+
+  return {
+    backgroundColor: active ? config.value.activeColor || '#0f766e' : config.value.inactiveColor || '#ffffff',
+    color: active ? config.value.activeTextColor || '#ffffff' : config.value.inactiveTextColor || 'rgba(0, 0, 0, 0.88)',
+    fontSize: `${Number(config.value.valueFontSize || 18)}px`
+  }
+}
+
+const valueChange = (arr: Record<string, any>[]) => {
+  ;(arr || [])
+    .sort((a: any, b: any) => a.timestamp - b.timestamp)
+    .forEach((item: any) => {
+      const property = item?.value?.property
+      if (property) {
+        propertyValue.value[property] = { ...item, ...item.value }
+      }
+    })
+}
+
+const throttleFn = throttle(() => {
+  const list = [...messageCache.values()]
+  valueChange(list)
+}, 500)
+
+const subscribeProperty = () => {
+  if (!runtimeDeviceId.value || !runtimeProductId.value || !dataSource.value.length) {
+    return
+  }
+
+  const propertyIds = dataSource.value.map((item) => item.id)
+  const id = `property-enum-${runtimeDeviceId.value}-${runtimeProductId.value}-${propertyIds.join('-')}`
+  const topic = `/dashboard/device/${runtimeProductId.value}/properties/realTime`
+
+  subRef.value = wsClient
+    .getWebSocket(id, topic, {
+      deviceId: runtimeDeviceId.value,
+      properties: propertyIds,
+      history: 1
+    })
+    ?.pipe(map((res: any) => res.payload))
+    .subscribe((payload: any) => {
+      if (payload?.value?.property) {
+        messageCache.set(payload.value.property, payload)
+        throttleFn()
+      }
+    })
+}
+
+const getDashboard = async () => {
+  if (!runtimeDeviceId.value || !runtimeProductId.value || !dataSource.value.length) {
+    subRef.value && subRef.value?.unsubscribe()
+    return
+  }
+
+  const response: Record<string, any> = await dashboard([
+    {
+      dashboard: 'device',
+      object: runtimeProductId.value,
+      measurement: 'properties',
+      dimension: 'history',
+      params: {
+        deviceId: runtimeDeviceId.value,
+        history: 1,
+        properties: dataSource.value.map((item) => item.id)
+      }
+    }
+  ])
+
+  if (response.status === 200) {
+    const latestMap: Record<string, any> = {}
+    ;(response.result || []).forEach((item: any) => {
+      const payload = item?.data || {}
+      const property = payload?.value?.property
+      if (!property) return
+
+      const existed = latestMap[property]
+      if (!existed || Number(payload.timestamp || 0) >= Number(existed.timestamp || 0)) {
+        latestMap[property] = {
+          timeString: payload.timeString,
+          timestamp: payload.timestamp,
+          ...payload.value
+        }
+      }
+    })
+
+    propertyValue.value = {
+      ...unref(propertyValue),
+      ...latestMap
+    }
+  }
+
+  subRef.value && subRef.value?.unsubscribe()
+  subscribeProperty()
+}
+
+const resolveMetadata = async () => {
+  if (!isProduct.value) {
+    metadataText.value = instanceStore.current.metadata || instanceStore.detail.metadata || ''
+    runtimeProductId.value = String(instanceStore.current.productId || instanceStore.detail.productId || '')
+    runtimeDeviceName.value = String(instanceStore.current.name || instanceStore.detail.name || '')
+    return
+  }
+
+  if (!targetDeviceId.value) {
+    metadataText.value = productStore.detail.metadata || ''
+    runtimeProductId.value = String(productStore.detail.id || '')
+    runtimeDeviceName.value = ''
+    return
+  }
+
+  const response = await detail(targetDeviceId.value, true)
+  metadataText.value = response.result?.metadata || ''
+  runtimeProductId.value = String(response.result?.productId || '')
+  runtimeDeviceName.value = String(response.result?.name || '')
+}
+
+const handleProperty = debounce(async () => {
+  subRef.value && subRef.value?.unsubscribe()
+  messageCache.clear()
+  propertyValue.value = {}
+  pendingValue.value = undefined
+  isUserSelecting.value = false
+
+  await resolveMetadata()
+
+  const propertyId = String(config.value.propertyId || '')
+  const selected = propertyId ? propertyMap.value.get(propertyId) : undefined
+  dataSource.value = selected ? [selected] : []
+
+  if (messageCache.size === 0) {
+    await getDashboard()
+  }
+}, 300)
+
+const executeFunc = async (value: unknown) => {
+  const deviceId = runtimeDeviceId.value
+  const functionId = String(config.value.functionId || '')
+  const paramId = String(config.value.paramId || '')
+
+  if (!deviceId || !functionId || !paramId || props.isEdit) {
+    return
+  }
+
+  try {
+    const res = await executeFunctions(deviceId, functionId, {
+      [paramId]: value
+    })
+
+    if (res.status === 200) {
+      onlyMessage('操作成功')
+    }
+  } catch (e) {
+    onlyMessage('操作失败', 'error')
+    throw e
+  }
+}
+
+const handleOptionClick = async (value: unknown) => {
+  if (props.isEdit || !canExecute.value || isOptionActive(value)) {
+    return
+  }
+
+  isUserSelecting.value = true
+  pendingValue.value = value
+
+  try {
+    await executeFunc(value)
+  } catch (e) {
+    pendingValue.value = rawValue.value
+  } finally {
+    setTimeout(() => {
+      isUserSelecting.value = false
+      pendingValue.value = undefined
+    }, 500)
+  }
+}
+
+onUnmounted(() => {
+  handleProperty.cancel()
+  throttleFn.cancel()
+  subRef.value && subRef.value?.unsubscribe()
+})
+
+watch(
+  rawValue,
+  () => {
+    if (isUserSelecting.value) return
+    pendingValue.value = undefined
+  }
+)
+
+watch(
+  () => [props.info, targetDeviceId.value, runtimeDeviceId.value, config.value.propertyId],
+  () => {
+    handleProperty()
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<style scoped lang="less">
+.property-enum {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 12px;
+  background-color: #fff;
+  overflow: hidden;
+}
+
+.property-enum__title {
+  width: 100%;
+  min-height: 22px;
+  line-height: 1.4;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.property-enum__body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  justify-content: center;
+  flex: 1;
+  align-items: center;
+}
+
+.property-enum__options {
+  display: flex;
+  align-items: stretch;
+  width: fit-content;
+  max-width: 100%;
+  border: 1px solid var(--property-enum-border-color);
+  border-radius: var(--property-enum-border-radius);
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.15);
+}
+
+.property-enum__option {
+  min-width: 96px;
+  max-width: 180px;
+  padding: 12px 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  user-select: none;
+}
+
+.property-enum__option + .property-enum__option {
+  border-left: 1px solid rgba(15, 118, 110, 0.16);
+}
+
+.property-enum__option:hover {
+  filter: brightness(0.98);
+}
+
+.property-enum__option--active {
+  box-shadow: inset 0 0 0 1px transparent;
+}
+
+.property-enum__option--disabled {
+  cursor: not-allowed;
+  opacity: 0.72;
+}
+
+.property-enum__option-icon {
+  line-height: 1;
+}
+</style>
diff --git a/visDashboard/MetadataManagement/PropertyEnum/config.ts b/visDashboard/MetadataManagement/PropertyEnum/config.ts
new file mode 100644
index 0000000..633866e
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyEnum/config.ts
@@ -0,0 +1,40 @@
+export const propertyEnumConfig = {
+  name: '属性枚举控制器',
+  type: 'propertyEnum',
+  componentProps: {
+    style: {
+      independence: false,
+      gridLayout: {}
+    },
+    gridItem: {
+      x: 0,
+      y: 0,
+      w: 4,
+      h: 4,
+      minW: 2,
+      minH: 3
+    },
+    propertyEnum: {
+      title: 'Enum',
+      titleColor: 'rgba(0, 0, 0, 0.88)',
+      titleFontSize: 16,
+      icon: 'RocketOutlined',
+      iconColor: 'currentColor',
+      iconSize: 16,
+      valueColor: 'rgba(0, 0, 0, 0.88)',
+      valueFontSize: 18,
+      activeColor: '#0f766e',
+      inactiveColor: '#ffffff',
+      activeTextColor: '#ffffff',
+      inactiveTextColor: 'rgba(0, 0, 0, 0.88)',
+      borderColor: '#0f766e',
+      borderRadius: 8,
+      deviceId: '',
+      deviceName: '',
+      propertyId: undefined,
+      propertyName: '',
+      functionId: undefined,
+      paramId: undefined
+    }
+  }
+}
diff --git a/visDashboard/MetadataManagement/PropertyEnum/index.ts b/visDashboard/MetadataManagement/PropertyEnum/index.ts
new file mode 100644
index 0000000..e1fc369
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyEnum/index.ts
@@ -0,0 +1,20 @@
+import { defineAsyncComponent } from 'vue'
+import { propertyEnumConfig } from './config'
+
+const PropertyEnum = {
+  name: 'propertyEnum',
+  component: defineAsyncComponent(() => import('./PropertyEnum.vue'))
+}
+
+const PropertyEnumConfig = [
+  {
+    name: 'propertyEnum',
+    component: defineAsyncComponent(() => import('./Config.vue'))
+  }
+]
+
+const PropertyEnumConfigProps = {
+  ...propertyEnumConfig
+}
+
+export { PropertyEnum, PropertyEnumConfig, PropertyEnumConfigProps }
diff --git a/visDashboard/MetadataManagement/PropertyEnum/propertyEnum.png b/visDashboard/MetadataManagement/PropertyEnum/propertyEnum.png
new file mode 100644
index 0000000..1109ad2
Binary files /dev/null and b/visDashboard/MetadataManagement/PropertyEnum/propertyEnum.png differ
diff --git a/visDashboard/MetadataManagement/PropertyGauge/Config.vue b/visDashboard/MetadataManagement/PropertyGauge/Config.vue
new file mode 100644
index 0000000..cd0ead1
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyGauge/Config.vue
@@ -0,0 +1,312 @@
+<template>
+  <div class="card-container">
+    <div class="card-header">
+      <config-item
+        v-if="isProduct"
+        label="设备"
+      >
+        <a-select
+          v-model:value="config.deviceId"
+          :options="deviceOptions"
+          placeholder="请选择设备"
+          optionFilterProp="label"
+          style="width: 100%"
+          popupClassName="is-dark"
+          @change="onDeviceChange"
+        />
+      </config-item>
+
+      <config-item label="属性">
+        <a-select
+          v-model:value="config.propertyId"
+          :options="typeOptions"
+          placeholder="请选择属性"
+          optionFilterProp="label"
+          style="width: 100%"
+          popupClassName="is-dark"
+          @change="onTypeChange"
+        />
+      </config-item>
+    </div>
+    <a-divider />
+    <config-item label="标题">
+      <a-input
+        v-model:value="config.title"
+        placeholder="请输入标题"
+        style="width: 100%"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="标题样式">
+      <div class="card-container-row">
+        <ColorPicker
+          v-model:value="config.titleColor"
+          :isInput="false"
+          style="margin-right: 6px"
+          theme="white"
+          @change="onChange"
+        />
+        <a-input-number
+          v-model:value="config.titleFontSize"
+          :min="12"
+          :max="48"
+          :precision="0"
+          style="flex: 1"
+          @change="onChange"
+        />
+      </div>
+    </config-item>
+
+    <config-item label="数值样式">
+      <div class="card-container-row">
+        <ColorPicker
+          v-model:value="config.valueColor"
+          :isInput="false"
+          style="margin-right: 6px"
+          theme="white"
+          @change="onChange"
+        />
+        <a-input-number
+          v-model:value="config.valueFontSize"
+          :min="20"
+          :max="72"
+          :precision="0"
+          style="flex: 1"
+          @change="onChange"
+        />
+      </div>
+    </config-item>
+
+    <config-item label="单位">
+      <a-input
+        v-model:value="config.unit"
+        placeholder="请输入单位"
+        style="width: 100%"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="单位字体">
+      <div class="card-container-row">
+        <ColorPicker
+          v-model:value="config.unitColor"
+          :isInput="false"
+          style="margin-right: 6px"
+          theme="white"
+          @change="onChange"
+        />
+        <a-input-number
+          v-model:value="config.unitFontSize"
+          :min="10"
+          :max="40"
+          :precision="0"
+          style="flex: 1"
+          @change="onChange"
+        />
+      </div>
+    </config-item>
+
+    <config-item label="最小值">
+      <a-input-number
+        v-model:value="config.minValue"
+        style="width: 100%"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="最大值">
+      <a-input-number
+        v-model:value="config.maxValue"
+        style="width: 100%"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="刻度分段">
+      <a-input-number
+        v-model:value="config.splitNumber"
+        :min="5"
+        :max="20"
+        :precision="0"
+        style="width: 100%"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="指针颜色">
+      <ColorPicker
+        v-model:value="config.pointerColor"
+        :isInput="false"
+        theme="white"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="起始色">
+      <ColorPicker
+        v-model:value="config.progressStartColor"
+        :isInput="false"
+        theme="white"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="结束色">
+      <ColorPicker
+        v-model:value="config.progressEndColor"
+        :isInput="false"
+        theme="white"
+        @change="onChange"
+      />
+    </config-item>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { cloneDeep, throttle } from 'lodash-es'
+import { moduleRegistry } from '@jetlinks-web-core/utils/module-registry'
+import { useProductStore } from '@device-manager-ui/store/product'
+import { useInstanceStore } from '@device-manager-ui/store/instance'
+import { queryNoPagingPost } from '@device-manager-ui/api/instance'
+import { propertyGaugeConfig } from './config'
+
+const { ConfigItem, ColorPicker } = moduleRegistry.getResource('visualization-designer-ui', 'components')
+
+const props = defineProps({
+  configData: {
+    type: Object,
+    default: () => ({})
+  },
+  type: {
+    type: String,
+    default: 'propertyGauge'
+  }
+})
+
+const emits = defineEmits(['change'])
+const config = ref<any>({})
+const productStore = useProductStore()
+const instanceStore = useInstanceStore()
+const route = useRoute()
+const deviceOptions = ref<any[]>([])
+const deviceOptionsMap = ref(new Map())
+
+const isProduct = computed(() => route.name === 'device/Product/Detail')
+
+const emitChange = throttle(() => {
+  emits('change', config.value, props.type)
+}, 20)
+
+const onChange = () => {
+  emitChange()
+}
+
+const strToJson = (str: string) => {
+  try {
+    return JSON.parse(str || '{}').properties || []
+  } catch (e) {
+    return []
+  }
+}
+
+const typeOptions = computed(() => {
+  try {
+    let properties = []
+    if (isProduct.value) {
+      const hasTarget = config.value.deviceId && deviceOptionsMap.value.size > 0
+      properties = strToJson(productStore.detail.metadata)
+      if (hasTarget) {
+        properties.push(...strToJson(deviceOptionsMap.value.get(config.value.deviceId)?.deriveMetadata))
+      }
+    } else {
+      properties = strToJson(instanceStore.current.metadata || instanceStore.detail.metadata)
+    }
+
+    return properties.map((item: any) => ({
+      ...item,
+      label: item.name,
+      value: item.id
+    }))
+  } catch (e) {
+    return []
+  }
+})
+
+const onDeviceChange = (value: string, option: any) => {
+  config.value.deviceId = value
+  config.value.deviceName = option?.label || ''
+  config.value.propertyId = ''
+  config.value.propertyName = ''
+  emitChange()
+}
+
+const onTypeChange = (value: string) => {
+  const option = typeOptions.value.find((item: any) => item.value === value)
+  config.value.propertyId = value
+  config.value.propertyName = option?.label || ''
+  emitChange()
+}
+
+const getDeviceList = () => {
+  if (!isProduct.value) return
+
+  queryNoPagingPost({ terms: [{ column: 'productId', value: route.params.id, termType: 'eq' }] }).then((res) => {
+    deviceOptions.value = (res.result || []).map((item: any) => {
+      deviceOptionsMap.value.set(item.id, item)
+      return {
+        value: item.id,
+        label: item.name,
+        productId: item.productId,
+        metadata: item.deriveMetadata
+      }
+    })
+  })
+}
+
+onMounted(() => {
+  getDeviceList()
+})
+
+watch(
+  () => props.configData?.componentProps?.[props.type],
+  (newVal) => {
+    config.value = cloneDeep({
+      ...propertyGaugeConfig.componentProps.propertyGauge,
+      ...(newVal || {})
+    })
+  },
+  { deep: true, immediate: true }
+)
+</script>
+
+<style lang="less" scoped>
+.card-container {
+  .card-header {
+    gap: 12px;
+    display: flex;
+    flex-direction: column;
+    padding: 14px 16px;
+    border-radius: 12px;
+    background: #f7f9fc;
+  }
+  color: #fff;
+  gap: 12px;
+  display: flex;
+  flex-direction: column;
+  :deep(.ant-divider-horizontal) {
+    margin: 0;
+    margin-bottom: 12px;
+  }
+
+  :deep(.config-form-item-content) {
+    padding: 0;
+  }
+}
+
+.card-container-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/visDashboard/MetadataManagement/PropertyGauge/PropertyGauge.vue b/visDashboard/MetadataManagement/PropertyGauge/PropertyGauge.vue
new file mode 100644
index 0000000..4739180
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyGauge/PropertyGauge.vue
@@ -0,0 +1,508 @@
+<template>
+  <div
+    ref="rootRef"
+    class="property-gauge"
+    :style="style"
+  >
+    <div
+      class="property-gauge__dial-shell"
+      :style="dialShellStyle"
+    >
+      <v-chart
+        :option="chartOption"
+        autoresize
+      />
+      <div class="property-gauge__digital-panel">
+        <span
+          class="property-gauge__digital-value"
+          :style="digitalValueStyle"
+        >
+          {{ displayValue }}
+        </span>
+        <span
+          v-if="displayUnit"
+          class="property-gauge__digital-unit"
+          :style="digitalUnitStyle"
+        >
+          {{ displayUnit }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { use } from 'echarts/core'
+import { GaugeChart } from 'echarts/charts'
+import { CanvasRenderer } from 'echarts/renderers'
+import VChart from 'vue-echarts'
+import { dashboard } from '@device-manager-ui/api/dashboard'
+import { detail } from '@device-manager-ui/api/instance'
+import { useInstanceStore } from '@device-manager-ui/store/instance'
+import { useProductStore } from '@device-manager-ui/store/product'
+import { wsClient } from '@jetlinks-web/core'
+import { debounce, throttle } from 'lodash-es'
+import { map } from 'rxjs/operators'
+
+use([CanvasRenderer, GaugeChart])
+
+defineOptions({
+  name: 'PropertyGauge'
+})
+
+interface PropertyGaugeComponentConfig {
+  title?: string
+  titleColor?: string
+  titleFontSize?: number
+  minValue?: number
+  maxValue?: number
+  splitNumber?: number
+  pointerColor?: string
+  progressStartColor?: string
+  progressEndColor?: string
+  valueColor?: string
+  valueFontSize?: number
+  unit?: string
+  unitColor?: string
+  unitFontSize?: number
+  deviceId?: string
+  deviceName?: string
+  propertyId?: string
+  propertyName?: string
+}
+
+interface DashboardCardInfo {
+  id?: string
+  componentProps?: Record<string, unknown>
+}
+
+const props = defineProps({
+  info: {
+    type: Object as PropType<DashboardCardInfo>,
+    default: () => ({})
+  },
+  style: {
+    type: Object as PropType<Record<string, unknown>>,
+    default: () => ({})
+  },
+  isEdit: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const config = computed<PropertyGaugeComponentConfig>(() => {
+  return (props.info?.componentProps?.propertyGauge as PropertyGaugeComponentConfig) || {}
+})
+
+const route = useRoute()
+const instanceStore = useInstanceStore()
+const productStore = useProductStore()
+
+const runtimeProductId = ref('')
+const metadataText = ref('')
+const propertyValue = ref<Record<string, any>>({})
+const dataSource = ref<Record<string, any>[]>([])
+const subRef = ref<any>()
+const messageCache = new Map<string, Record<string, any>>()
+
+const rootRef = ref<HTMLElement>()
+const dialSize = ref(320)
+const baseDialSize = 520
+let resizeObserver: ResizeObserver | undefined
+
+const dialShellStyle = computed(() => ({
+  width: `${dialSize.value}px`,
+  height: `${dialSize.value}px`
+}))
+const uiScale = computed(() => dialSize.value / baseDialSize)
+const displayUnit = computed(() => config.value.unit || '')
+const digitalValueStyle = computed(() => ({
+  color: config.value.valueColor || '#40424c',
+  fontSize: `${Math.max(14, Math.round(Number(config.value.valueFontSize || 56) * uiScale.value))}px`,
+  letterSpacing: `${Math.max(0.5, 1.5 * uiScale.value)}px`
+}))
+const digitalUnitStyle = computed(() => ({
+  color: config.value.unitColor || '#666',
+  fontSize: `${Math.max(10, Math.round(Number(config.value.unitFontSize || 14) * uiScale.value))}px`
+}))
+
+const displayValue = computed(() => {
+  const value = Number(rawValue.value ?? config.value.minValue ?? -100)
+  if (!Number.isFinite(value)) return '--'
+  return Math.round(value)
+})
+
+const isProduct = computed(() => route.name === 'device/Product/Detail')
+const targetDeviceId = computed(() => String(config.value.deviceId || ''))
+const runtimeDeviceId = computed(() => (isProduct.value ? targetDeviceId.value : String(instanceStore.current.id || '')))
+
+const propertyMap = computed(() => {
+  try {
+    const properties = JSON.parse(metadataText.value || '{}').properties || []
+    const mapData = new Map<string, Record<string, any>>()
+
+    properties.forEach((item: Record<string, any>) => {
+      mapData.set(String(item.id || ''), item)
+    })
+    return mapData
+  } catch (error) {
+    return new Map<string, Record<string, any>>()
+  }
+})
+
+const rawValue = computed(() => {
+  const propertyId = String(config.value.propertyId || '')
+  const valueData = propertyId ? propertyValue.value[propertyId] : undefined
+  return valueData?.value
+})
+
+const gaugeValue = computed(() => {
+  const min = Number(config.value.minValue ?? -100)
+  const value = Number(rawValue.value ?? min)
+  return Number.isFinite(value) ? value : min
+})
+
+const valueChange = (arr: Record<string, any>[]) => {
+  ;(arr || [])
+    .sort((a: any, b: any) => a.timestamp - b.timestamp)
+    .forEach((item: any) => {
+      const property = item?.value?.property
+      if (property) {
+        propertyValue.value[property] = { ...item, ...item.value }
+      }
+    })
+}
+
+const throttleFn = throttle(() => {
+  const list = [...messageCache.values()]
+  valueChange(list)
+}, 500)
+
+const subscribeProperty = () => {
+  if (!runtimeDeviceId.value || !runtimeProductId.value || !dataSource.value.length) {
+    return
+  }
+
+  const propertyIds = dataSource.value.map((item) => item.id)
+  const id = `property-gauge-${runtimeDeviceId.value}-${runtimeProductId.value}-${propertyIds.join('-')}`
+  const topic = `/dashboard/device/${runtimeProductId.value}/properties/realTime`
+
+  subRef.value = wsClient
+    .getWebSocket(id, topic, {
+      deviceId: runtimeDeviceId.value,
+      properties: propertyIds,
+      history: 1
+    })
+    ?.pipe(map((res: any) => res.payload))
+    .subscribe((payload: any) => {
+      if (payload?.value?.property) {
+        messageCache.set(payload.value.property, payload)
+        throttleFn()
+      }
+    })
+}
+
+const getDashboard = async () => {
+  if (!runtimeDeviceId.value || !runtimeProductId.value || !dataSource.value.length) {
+    subRef.value && subRef.value?.unsubscribe()
+    return
+  }
+
+  const response: Record<string, any> = await dashboard([
+    {
+      dashboard: 'device',
+      object: runtimeProductId.value,
+      measurement: 'properties',
+      dimension: 'history',
+      params: {
+        deviceId: runtimeDeviceId.value,
+        history: 1,
+        properties: dataSource.value.map((item) => item.id)
+      }
+    }
+  ])
+
+  if (response.status === 200) {
+    const latestMap: Record<string, any> = {}
+    ;(response.result || []).forEach((item: any) => {
+      const payload = item?.data || {}
+      const property = payload?.value?.property
+      if (!property) return
+
+      const existed = latestMap[property]
+      if (!existed || Number(payload.timestamp || 0) >= Number(existed.timestamp || 0)) {
+        latestMap[property] = {
+          timeString: payload.timeString,
+          timestamp: payload.timestamp,
+          ...payload.value
+        }
+      }
+    })
+
+    propertyValue.value = {
+      ...unref(propertyValue),
+      ...latestMap
+    }
+  }
+
+  subRef.value && subRef.value?.unsubscribe()
+  subscribeProperty()
+}
+
+const resolveMetadata = async () => {
+  if (!isProduct.value) {
+    metadataText.value = instanceStore.current.metadata || instanceStore.detail.metadata || ''
+    runtimeProductId.value = String(instanceStore.current.productId || instanceStore.detail.productId || '')
+    return
+  }
+
+  if (!targetDeviceId.value) {
+    metadataText.value = productStore.detail.metadata || ''
+    runtimeProductId.value = String(productStore.detail.id || '')
+    return
+  }
+
+  const response = await detail(targetDeviceId.value, true)
+  metadataText.value = response.result?.metadata || ''
+  runtimeProductId.value = String(response.result?.productId || '')
+}
+
+const handleProperty = debounce(async () => {
+  subRef.value && subRef.value?.unsubscribe()
+  messageCache.clear()
+  propertyValue.value = {}
+
+  await resolveMetadata()
+
+  const propertyId = String(config.value.propertyId || '')
+  const selected = propertyId ? propertyMap.value.get(propertyId) : undefined
+  dataSource.value = selected ? [selected] : []
+
+  if (messageCache.size === 0) {
+    await getDashboard()
+  }
+}, 300)
+
+onMounted(() => {
+  const updateDialSize = () => {
+    const el = rootRef.value
+    if (!el) return
+    const rect = el.getBoundingClientRect()
+    // 以外部容器最小宽高为准，确保等比缩放且不受长边拉伸影响
+    const side = Math.max(220, Math.min(rect.width, rect.height) - 24)
+    dialSize.value = Number.isFinite(side) ? side : 320
+  }
+
+  updateDialSize()
+  resizeObserver = new ResizeObserver(() => {
+    updateDialSize()
+  })
+  if (rootRef.value) {
+    resizeObserver.observe(rootRef.value)
+  }
+
+  handleProperty()
+})
+
+onUnmounted(() => {
+  handleProperty.cancel()
+  throttleFn.cancel()
+  subRef.value && subRef.value?.unsubscribe()
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+    resizeObserver = undefined
+  }
+})
+
+watch(
+  () => [props.info, targetDeviceId.value, runtimeDeviceId.value, config.value.propertyId],
+  () => {
+    handleProperty()
+  },
+  { immediate: true, deep: true }
+)
+
+const chartOption = computed(() => {
+  const min = Number(config.value.minValue ?? -100)
+  const max = Number(config.value.maxValue ?? 100)
+  const splitNumber = Number(config.value.splitNumber ?? 10)
+  const startColor = config.value.progressStartColor || '#f3e7df'
+  const endColor = config.value.progressEndColor || '#f97316'
+  const pointerColor = config.value.pointerColor || '#e85d04'
+  const title = config.value.propertyName || config.value.title || 'Temperature'
+  const axisFontSize = Math.max(13, Math.min(24, Math.round(20 * uiScale.value)))
+
+  return {
+    animation: false,
+    series: [
+      {
+        type: 'gauge',
+        min,
+        max,
+        splitNumber,
+        startAngle: 225,
+        endAngle: -45,
+        center: ['50%', '50%'],
+        radius: '91%',
+        axisLine: {
+          roundCap: false,
+          lineStyle: {
+            width: 22,
+            color: [
+              [
+                1,
+                {
+                  type: 'linear',
+                  x: 1,
+                  y: 0,
+                  x2: 0,
+                  y2: 0,
+                  colorStops: [
+                    { offset: 0, color: endColor },
+                    { offset: 1, color: startColor }
+                  ]
+                }
+              ]
+            ]
+          }
+        },
+        progress: {
+          show: false
+        },
+        pointer: {
+          show: true,
+          icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
+          length: '92%',
+          width: 10,
+          offsetCenter: [0, '15%'],
+          itemStyle: {
+            color: pointerColor,
+            shadowBlur: 3,
+            shadowColor: 'rgba(0,0,0,0.16)'
+          }
+        },
+        anchor: {
+          show: true,
+          showAbove: true,
+          size: 28,
+          itemStyle: {
+            color: '#e7e7e7',
+            borderColor: '#d6d6d6',
+            borderWidth: 2,
+            shadowBlur: 6,
+            shadowColor: 'rgba(0,0,0,0.18)'
+          }
+        },
+        axisTick: {
+          distance: -28,
+          splitNumber: 5,
+          lineStyle: {
+            color: '#6c6c6c',
+            width: 1
+          },
+          length: 10
+        },
+        splitLine: {
+          distance: -28,
+          length: 16,
+          lineStyle: {
+            color: '#545454',
+            width: 2
+          }
+        },
+        axisLabel: {
+          distance: 40,
+          color: '#5f5f5f',
+          fontSize: axisFontSize,
+          fontWeight: 600,
+          formatter: (value: number) => `${Math.round(value)}`
+        },
+        title: {
+          show: true,
+          offsetCenter: [0, '-14%'],
+          color: config.value.titleColor || '#7f7f7f',
+          fontSize: Math.round(Number(config.value.titleFontSize || 40) * uiScale.value),
+          fontWeight: 600
+        },
+        detail: {
+          show: false
+        },
+        data: [
+          {
+            value: gaugeValue.value,
+            name: title
+          }
+        ]
+      }
+    ]
+  }
+})
+</script>
+
+<style scoped lang="less">
+.property-gauge {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 12px;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+}
+
+.property-gauge__dial-shell {
+  position: relative;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  background: radial-gradient(circle at 50% 46%, #f6f6f6 0%, #ebebeb 58%, #d9d9d9 75%, #f4f4f4 100%);
+  box-shadow: inset 0 0 0 3px rgba(125, 125, 125, 0.35), inset 0 0 0 8px rgba(255, 255, 255, 0.7),
+    inset 0 0 0 11px rgba(180, 180, 180, 0.22), 0 5px 8px rgba(0, 0, 0, 0.2);
+}
+
+.property-gauge__digital-panel {
+  position: absolute;
+  left: 50%;
+  bottom: 6.5%;
+  transform: translateX(-50%);
+  width: 25.5%;
+  height: 10%;
+  min-width: 92px;
+  min-height: 36px;
+  border-radius: v-bind('`${Math.max(4, Math.round(8 * uiScale))}px`');
+  border: v-bind('`${Math.max(2, Math.round(4 * uiScale))}px solid #4d4d4dc9`');
+  background: #8d8d8d6c;
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.18);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: v-bind('`${Math.max(4, Math.round(8 * uiScale))}px`');
+}
+
+// .property-gauge__digital-sign {
+//   color: #40424c;
+//   font-family: 'Courier New', monospace;
+//   font-size: v-bind('`${Math.round(30 * uiScale)}px`');
+//   font-weight: 700;
+//   line-height: 1;
+// }
+
+.property-gauge__digital-value {
+  font-family: 'Courier New', monospace;
+  line-height: 1;
+  font-weight: 700;
+}
+
+.property-gauge__digital-unit {
+  font-family: 'Courier New', monospace;
+  line-height: 1;
+  font-weight: 600;
+  // transform: translateY(1px);
+}
+</style>
diff --git a/visDashboard/MetadataManagement/PropertyGauge/config.ts b/visDashboard/MetadataManagement/PropertyGauge/config.ts
new file mode 100644
index 0000000..7cb3d5e
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyGauge/config.ts
@@ -0,0 +1,36 @@
+export const propertyGaugeConfig = {
+  name: '属性仪表盘',
+  type: 'propertyGauge',
+  componentProps: {
+    style: {
+      independence: false,
+      gridLayout: {}
+    },
+    gridItem: {
+      x: 0,
+      y: 0,
+      w: 3,
+      h: 9,
+    },
+    propertyGauge: {
+      title: 'Temperature',
+      titleColor: '#7f7f7f',
+      titleFontSize: 18,
+      minValue: -100,
+      maxValue: 100,
+      splitNumber: 10,
+      pointerColor: '#e85d04',
+      progressStartColor: '#f3e7df',
+      progressEndColor: '#f97316',
+      valueColor: '#3f3f46',
+      valueFontSize: 44,
+      unit: '',
+      unitColor: '#666',
+      unitFontSize: 34,
+      deviceId: '',
+      deviceName: '',
+      propertyId: undefined,
+      propertyName: ''
+    }
+  },
+}
diff --git a/visDashboard/MetadataManagement/PropertyGauge/index.ts b/visDashboard/MetadataManagement/PropertyGauge/index.ts
new file mode 100644
index 0000000..55bfbed
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyGauge/index.ts
@@ -0,0 +1,20 @@
+import { defineAsyncComponent } from 'vue'
+import { propertyGaugeConfig } from './config'
+
+const PropertyGauge = {
+  name: 'propertyGauge',
+  component: defineAsyncComponent(() => import('./PropertyGauge.vue'))
+}
+
+const PropertyGaugeConfig = [
+  {
+    name: 'propertyGauge',
+    component: defineAsyncComponent(() => import('./Config.vue'))
+  }
+]
+
+const PropertyGaugeConfigProps = {
+  ...propertyGaugeConfig
+}
+
+export { PropertyGauge, PropertyGaugeConfig, PropertyGaugeConfigProps }
diff --git a/visDashboard/MetadataManagement/PropertyGauge/propertyGauge.png b/visDashboard/MetadataManagement/PropertyGauge/propertyGauge.png
new file mode 100644
index 0000000..4e85593
Binary files /dev/null and b/visDashboard/MetadataManagement/PropertyGauge/propertyGauge.png differ
diff --git a/visDashboard/MetadataManagement/PropertyGauge1/Config.vue b/visDashboard/MetadataManagement/PropertyGauge1/Config.vue
new file mode 100644
index 0000000..3e03b90
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyGauge1/Config.vue
@@ -0,0 +1,283 @@
+<template>
+  <div class="card-container">
+    <div class="card-header">
+      <config-item
+        v-if="isProduct"
+        label="设备"
+      >
+        <a-select
+          v-model:value="config.deviceId"
+          :options="deviceOptions"
+          placeholder="请选择设备"
+          optionFilterProp="label"
+          style="width: 100%"
+          popupClassName="is-dark"
+          @change="onDeviceChange"
+        />
+      </config-item>
+
+      <config-item label="属性">
+        <a-select
+          v-model:value="config.propertyId"
+          :options="typeOptions"
+          placeholder="请选择属性"
+          optionFilterProp="label"
+          style="width: 100%"
+          popupClassName="is-dark"
+          @change="onTypeChange"
+        />
+      </config-item>
+    </div>
+    <a-divider />
+
+    <config-item label="数值样式">
+      <div class="card-container-row">
+        <ColorPicker
+          v-model:value="config.valueColor"
+          :isInput="false"
+          style="margin-right: 6px"
+          theme="white"
+          @change="onChange"
+        />
+        <a-input-number
+          v-model:value="config.valueFontSize"
+          :min="16"
+          :max="72"
+          :precision="0"
+          style="flex: 1"
+          @change="onChange"
+        />
+      </div>
+    </config-item>
+
+    <config-item label="标题样式">
+      <div class="card-container-row">
+        <ColorPicker
+          v-model:value="config.titleColor"
+          :isInput="false"
+          style="margin-right: 6px"
+          theme="white"
+          @change="onChange"
+        />
+        <a-input-number
+          v-model:value="config.titleFontSize"
+          :min="10"
+          :max="40"
+          :precision="0"
+          style="flex: 1"
+          @change="onChange"
+        />
+      </div>
+    </config-item>
+
+    <config-item label="单位">
+      <a-input
+        v-model:value="config.unit"
+        placeholder="请输入单位"
+        style="width: 100%"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="最小值">
+      <a-input-number
+        v-model:value="config.minValue"
+        style="width: 100%"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="最大值">
+      <a-input-number
+        v-model:value="config.maxValue"
+        style="width: 100%"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="刻度分段">
+      <a-input-number
+        v-model:value="config.splitNumber"
+        :min="3"
+        :max="12"
+        :precision="0"
+        style="width: 100%"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="起始色">
+      <ColorPicker
+        v-model:value="config.startColor"
+        :isInput="false"
+        theme="white"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="中间色">
+      <ColorPicker
+        v-model:value="config.middleColor"
+        :isInput="false"
+        theme="white"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="结束色">
+      <ColorPicker
+        v-model:value="config.endColor"
+        :isInput="false"
+        theme="white"
+        @change="onChange"
+      />
+    </config-item>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { cloneDeep, throttle } from 'lodash-es'
+import { moduleRegistry } from '@jetlinks-web-core/utils/module-registry'
+import { useProductStore } from '@device-manager-ui/store/product'
+import { useInstanceStore } from '@device-manager-ui/store/instance'
+import { queryNoPagingPost } from '@device-manager-ui/api/instance'
+import { propertyGauge1Config } from './config'
+
+const { ConfigItem, ColorPicker } = moduleRegistry.getResource('visualization-designer-ui', 'components')
+
+const props = defineProps({
+  configData: {
+    type: Object,
+    default: () => ({})
+  },
+  type: {
+    type: String,
+    default: 'propertyGauge1'
+  }
+})
+
+const emits = defineEmits(['change'])
+const config = ref<any>({})
+const productStore = useProductStore()
+const instanceStore = useInstanceStore()
+const route = useRoute()
+const deviceOptions = ref<any[]>([])
+const deviceOptionsMap = ref(new Map())
+
+const isProduct = computed(() => route.name === 'device/Product/Detail')
+
+const emitChange = throttle(() => {
+  emits('change', config.value, props.type)
+}, 20)
+
+const onChange = () => {
+  emitChange()
+}
+
+const strToJson = (str: string) => {
+  try {
+    return JSON.parse(str || '{}').properties || []
+  } catch (e) {
+    return []
+  }
+}
+
+const typeOptions = computed(() => {
+  try {
+    let properties = []
+    if (isProduct.value) {
+      const hasTarget = config.value.deviceId && deviceOptionsMap.value.size > 0
+      properties = strToJson(productStore.detail.metadata)
+      if (hasTarget) {
+        properties.push(...strToJson(deviceOptionsMap.value.get(config.value.deviceId)?.deriveMetadata))
+      }
+    } else {
+      properties = strToJson(instanceStore.current.metadata || instanceStore.detail.metadata)
+    }
+
+    return properties.map((item: any) => ({
+      ...item,
+      label: item.name,
+      value: item.id
+    }))
+  } catch (e) {
+    return []
+  }
+})
+
+const onDeviceChange = (value: string, option: any) => {
+  config.value.deviceId = value
+  config.value.deviceName = option?.label || ''
+  config.value.propertyId = ''
+  config.value.propertyName = ''
+  emitChange()
+}
+
+const onTypeChange = (value: string) => {
+  const option = typeOptions.value.find((item: any) => item.value === value)
+  config.value.propertyId = value
+  config.value.propertyName = option?.label || ''
+  emitChange()
+}
+
+const getDeviceList = () => {
+  if (!isProduct.value) return
+
+  queryNoPagingPost({ terms: [{ column: 'productId', value: route.params.id, termType: 'eq' }] }).then((res) => {
+    deviceOptions.value = (res.result || []).map((item: any) => {
+      deviceOptionsMap.value.set(item.id, item)
+      return {
+        value: item.id,
+        label: item.name,
+        productId: item.productId,
+        metadata: item.deriveMetadata
+      }
+    })
+  })
+}
+
+onMounted(() => {
+  getDeviceList()
+})
+
+watch(
+  () => props.configData?.componentProps?.[props.type],
+  (newVal) => {
+    config.value = cloneDeep({
+      ...propertyGauge1Config.componentProps.propertyGauge1,
+      ...(newVal || {})
+    })
+  },
+  { deep: true, immediate: true }
+)
+</script>
+
+<style lang="less" scoped>
+.card-container {
+  color: #fff;
+  gap: 12px;
+  display: flex;
+  flex-direction: column;
+  .card-header {
+    gap: 12px;
+    display: flex;
+    flex-direction: column;
+    padding: 14px 16px;
+    border-radius: 12px;
+    background: #f7f9fc;
+  }
+  :deep(.ant-divider-horizontal) {
+    margin: 0;
+    margin-bottom: 12px;
+  }
+  :deep(.config-form-item-content) {
+    padding: 0;
+  }
+}
+
+.card-container-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/visDashboard/MetadataManagement/PropertyGauge1/PropertyGauge1.vue b/visDashboard/MetadataManagement/PropertyGauge1/PropertyGauge1.vue
new file mode 100644
index 0000000..42835af
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyGauge1/PropertyGauge1.vue
@@ -0,0 +1,480 @@
+<template>
+  <div
+    ref="rootRef"
+    class="property-gauge1"
+    :style="style"
+  >
+    <v-chart
+      class="property-gauge1__chart"
+      :option="chartOption"
+      autoresize
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { use } from 'echarts/core'
+import { GaugeChart } from 'echarts/charts'
+import { CanvasRenderer } from 'echarts/renderers'
+import VChart from 'vue-echarts'
+import { dashboard } from '@device-manager-ui/api/dashboard'
+import { detail } from '@device-manager-ui/api/instance'
+import { useInstanceStore } from '@device-manager-ui/store/instance'
+import { useProductStore } from '@device-manager-ui/store/product'
+import { wsClient } from '@jetlinks-web/core'
+import { debounce, throttle } from 'lodash-es'
+import { map } from 'rxjs/operators'
+
+use([CanvasRenderer, GaugeChart])
+
+defineOptions({
+  name: 'PropertyGauge1'
+})
+
+interface PropertyGauge1ComponentConfig {
+  titleColor?: string
+  titleFontSize?: number
+  minValue?: number
+  maxValue?: number
+  splitNumber?: number
+  valueColor?: string
+  valueFontSize?: number
+  unit?: string
+  unitColor?: string
+  unitFontSize?: number
+  startColor?: string
+  middleColor?: string
+  endColor?: string
+  deviceId?: string
+  deviceName?: string
+  propertyId?: string
+  propertyName?: string
+}
+
+interface DashboardCardInfo {
+  id?: string
+  componentProps?: Record<string, unknown>
+}
+
+const props = defineProps({
+  info: {
+    type: Object as PropType<DashboardCardInfo>,
+    default: () => ({})
+  },
+  style: {
+    type: Object as PropType<Record<string, unknown>>,
+    default: () => ({})
+  },
+  isEdit: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const config = computed<PropertyGauge1ComponentConfig>(() => {
+  return (props.info?.componentProps?.propertyGauge1 as PropertyGauge1ComponentConfig) || {}
+})
+
+const route = useRoute()
+const instanceStore = useInstanceStore()
+const productStore = useProductStore()
+
+const runtimeProductId = ref('')
+const metadataText = ref('')
+const propertyValue = ref<Record<string, any>>({})
+const dataSource = ref<Record<string, any>[]>([])
+const subRef = ref<any>()
+const messageCache = new Map<string, Record<string, any>>()
+
+const rootRef = ref<HTMLElement>()
+const dialSize = ref(220)
+const baseDialSize = 320
+let resizeObserver: ResizeObserver | undefined
+
+const uiScale = computed(() => dialSize.value / baseDialSize)
+
+const isProduct = computed(() => route.name === 'device/Product/Detail')
+const targetDeviceId = computed(() => String(config.value.deviceId || ''))
+const runtimeDeviceId = computed(() => (isProduct.value ? targetDeviceId.value : String(instanceStore.current.id || '')))
+
+const propertyMap = computed(() => {
+  try {
+    const properties = JSON.parse(metadataText.value || '{}').properties || []
+    const mapData = new Map<string, Record<string, any>>()
+    properties.forEach((item: Record<string, any>) => {
+      mapData.set(String(item.id || ''), item)
+    })
+    return mapData
+  } catch (error) {
+    return new Map<string, Record<string, any>>()
+  }
+})
+
+const rawValue = computed(() => {
+  const propertyId = String(config.value.propertyId || '')
+  const valueData = propertyId ? propertyValue.value[propertyId] : undefined
+  return valueData?.value
+})
+
+const gaugeValue = computed(() => {
+  const min = Number(config.value.minValue ?? 0)
+  const value = Number(rawValue.value ?? min)
+  return Number.isFinite(value) ? value : min
+})
+
+const displayValue = computed(() => {
+  const value = Number(rawValue.value ?? config.value.minValue ?? 0)
+  if (!Number.isFinite(value)) return '--'
+  return String(value)
+})
+
+const displayUnit = computed(() => config.value.unit || '')
+
+const valueChange = (arr: Record<string, any>[]) => {
+  ;(arr || [])
+    .sort((a: any, b: any) => a.timestamp - b.timestamp)
+    .forEach((item: any) => {
+      const property = item?.value?.property
+      if (property) {
+        propertyValue.value[property] = { ...item, ...item.value }
+      }
+    })
+}
+
+const throttleFn = throttle(() => {
+  const list = [...messageCache.values()]
+  valueChange(list)
+}, 500)
+
+const subscribeProperty = () => {
+  if (!runtimeDeviceId.value || !runtimeProductId.value || !dataSource.value.length) {
+    return
+  }
+
+  const propertyIds = dataSource.value.map((item) => item.id)
+  const id = `property-gauge1-${runtimeDeviceId.value}-${runtimeProductId.value}-${propertyIds.join('-')}`
+  const topic = `/dashboard/device/${runtimeProductId.value}/properties/realTime`
+
+  subRef.value = wsClient
+    .getWebSocket(id, topic, {
+      deviceId: runtimeDeviceId.value,
+      properties: propertyIds,
+      history: 1
+    })
+    ?.pipe(map((res: any) => res.payload))
+    .subscribe((payload: any) => {
+      if (payload?.value?.property) {
+        messageCache.set(payload.value.property, payload)
+        throttleFn()
+      }
+    })
+}
+
+const getDashboard = async () => {
+  if (!runtimeDeviceId.value || !runtimeProductId.value || !dataSource.value.length) {
+    subRef.value && subRef.value?.unsubscribe()
+    return
+  }
+
+  const response: Record<string, any> = await dashboard([
+    {
+      dashboard: 'device',
+      object: runtimeProductId.value,
+      measurement: 'properties',
+      dimension: 'history',
+      params: {
+        deviceId: runtimeDeviceId.value,
+        history: 1,
+        properties: dataSource.value.map((item) => item.id)
+      }
+    }
+  ])
+
+  if (response.status === 200) {
+    const latestMap: Record<string, any> = {}
+    ;(response.result || []).forEach((item: any) => {
+      const payload = item?.data || {}
+      const property = payload?.value?.property
+      if (!property) return
+
+      const existed = latestMap[property]
+      if (!existed || Number(payload.timestamp || 0) >= Number(existed.timestamp || 0)) {
+        latestMap[property] = {
+          timeString: payload.timeString,
+          timestamp: payload.timestamp,
+          ...payload.value
+        }
+      }
+    })
+
+    propertyValue.value = {
+      ...unref(propertyValue),
+      ...latestMap
+    }
+  }
+
+  subRef.value && subRef.value?.unsubscribe()
+  subscribeProperty()
+}
+
+const resolveMetadata = async () => {
+  if (!isProduct.value) {
+    metadataText.value = instanceStore.current.metadata || instanceStore.detail.metadata || ''
+    runtimeProductId.value = String(instanceStore.current.productId || instanceStore.detail.productId || '')
+    return
+  }
+
+  if (!targetDeviceId.value) {
+    metadataText.value = productStore.detail.metadata || ''
+    runtimeProductId.value = String(productStore.detail.id || '')
+    return
+  }
+
+  const response = await detail(targetDeviceId.value, true)
+  metadataText.value = response.result?.metadata || ''
+  runtimeProductId.value = String(response.result?.productId || '')
+}
+
+const handleProperty = debounce(async () => {
+  subRef.value && subRef.value?.unsubscribe()
+  messageCache.clear()
+  propertyValue.value = {}
+
+  await resolveMetadata()
+
+  const propertyId = String(config.value.propertyId || '')
+  const selected = propertyId ? propertyMap.value.get(propertyId) : undefined
+  dataSource.value = selected ? [selected] : []
+
+  if (messageCache.size === 0) {
+    await getDashboard()
+  }
+}, 300)
+
+onMounted(() => {
+  const updateDialSize = () => {
+    const el = rootRef.value
+    if (!el) return
+    const rect = el.getBoundingClientRect()
+    const side = Math.max(160, Math.min(rect.width, rect.height))
+    dialSize.value = Number.isFinite(side) ? side : 220
+  }
+
+  updateDialSize()
+  resizeObserver = new ResizeObserver(() => {
+    updateDialSize()
+  })
+  if (rootRef.value) {
+    resizeObserver.observe(rootRef.value)
+  }
+
+  handleProperty()
+})
+
+onUnmounted(() => {
+  handleProperty.cancel()
+  throttleFn.cancel()
+  subRef.value && subRef.value?.unsubscribe()
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+    resizeObserver = undefined
+  }
+})
+
+watch(
+  () => [props.info, targetDeviceId.value, runtimeDeviceId.value, config.value.propertyId],
+  () => {
+    handleProperty()
+  },
+  { immediate: true, deep: true }
+)
+
+const chartOption = computed(() => {
+  const min = Number(config.value.minValue ?? 0)
+  const max = Number(config.value.maxValue ?? 1)
+  const safeMax = max <= min ? min + 1 : max
+  const splitNumber = Number(config.value.splitNumber ?? 5)
+  const gaugeTitle = config.value.propertyName || ''
+
+  const startColor = config.value.startColor || '#1fcf8b'
+  const middleColor = config.value.middleColor || '#f4b447'
+  const endColor = config.value.endColor || '#f0825d'
+
+  const majorFontSize = Math.max(10, Math.round(12 * uiScale.value))
+
+  return {
+    animation: false,
+    series: [
+      {
+        type: 'gauge',
+        min,
+        max: safeMax,
+        splitNumber,
+        startAngle: 200,
+        endAngle: -20,
+        center: ['50%', '67%'],
+        radius: '88%',
+        title: {
+          show: !!gaugeTitle,
+          offsetCenter: [0, '24%'],
+          color: config.value.titleColor || '#666',
+          fontSize: Math.max(10, Math.round(Number(config.value.titleFontSize || 14) * uiScale.value)),
+          fontWeight: 500
+        },
+        axisLine: {
+          
+          lineStyle: {
+            width: Math.max(16, Math.round(10 * uiScale.value)),
+            color: [
+              [
+                0.3,
+                {
+                  type: 'linear',
+                  x: 0,
+                  y: 1,
+                  x2: 0,
+                  y2: 0,
+                  colorStops: [
+                    { offset: 0, color: startColor },
+                    { offset: 1, color: '#4293ff' }
+                  ]
+                }
+              ],
+              [
+                0.6,
+                {
+                  type: 'linear',
+                  x: 0,
+                  y: 1,
+                  x2: 0,
+                  y2: 0,
+                  colorStops: [
+                    { offset: 0, color: '#4293ff' },
+                    { offset: 1, color: middleColor }
+                  ]
+                }
+              ],
+              [
+                1,
+                {
+                  type: 'linear',
+                  x: 0,
+                  y: 1,
+                  x2: 0,
+                  y2: 0,
+                  colorStops: [
+                    { offset: 0, color: middleColor },
+                    { offset: 1, color: endColor }
+                  ]
+                }
+              ]
+            ]
+          }
+        },
+        axisTick: {
+          distance: -Math.max(14, Math.round(20 * uiScale.value)),
+          splitNumber: 5,
+          lineStyle: {
+            width: 1,
+            color: 'rgba(0,0,0,0.15)'
+          }
+        },
+        splitLine: {
+          distance: -Math.max(16, Math.round(22 * uiScale.value)),
+          length: Math.max(7, Math.round(9 * uiScale.value)),
+          lineStyle: {
+            width: 1,
+            color: '#000'
+          }
+        },
+        axisLabel: {
+          distance: -Math.max(14, Math.round(22 * uiScale.value)),
+          color: 'auto',
+          fontSize: majorFontSize,
+          width: 30,
+          padding: [6, 10, 0, 10],
+          formatter: (value: number) => {
+            const step = (safeMax - min) / Math.max(splitNumber, 1)
+            const idx = Math.round((value - min) / step)
+            const tickValue = min + idx * step
+            if (Math.abs(value - tickValue) > step * 0.15) return ''
+            const normalized = Math.round(tickValue * 100) / 100
+            return `${normalized}${displayUnit.value}`
+          }
+        },
+        pointer: {
+          show: true,
+          length: '80%',
+          width: Math.max(3, Math.round(4 * uiScale.value)),
+          itemStyle: {
+            color: 'auto'
+          }
+        },
+        anchor: {
+          show: true,
+          showAbove: true,
+          size: Math.max(16, Math.round(26 * uiScale.value)),
+          itemStyle: {
+            borderWidth: Math.max(2, Math.round(3 * uiScale.value)),
+            borderColor: '#fff',
+            shadowBlur: 20,
+            shadowColor: 'rgba(0, 0, 0, .25)',
+            color: 'auto'
+          }
+        },
+        detail: {
+          valueAnimation: false,
+          width: '100%',
+          lineHeight: Math.max(24, Math.round(34 * uiScale.value)),
+          offsetCenter: [0, '-25%'],
+          formatter: () => `${displayValue.value}`,
+          color: config.value.valueColor || '#00b86b',
+          fontSize: Math.max(18, Math.round(Number(config.value.valueFontSize || 36) * uiScale.value)),
+          fontWeight: 600
+        },
+        data: [
+          {
+            value: gaugeValue.value,
+            name: gaugeTitle
+          }
+        ]
+      },
+      {
+        type: 'gauge',
+        min,
+        max: safeMax,
+        splitNumber,
+        startAngle: 200,
+        endAngle: -20,
+        center: ['50%', '67%'],
+        radius: '88%',
+        pointer: { show: false },
+        axisLine: { show: false },
+        axisTick: { show: false },
+        splitLine: { show: false },
+        axisLabel: { show: false },
+        detail: { show: false },
+        data: [{ value: gaugeValue.value }]
+      }
+    ]
+  }
+})
+</script>
+
+<style scoped lang="less">
+.property-gauge1 {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.property-gauge1__chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/visDashboard/MetadataManagement/PropertyGauge1/config.ts b/visDashboard/MetadataManagement/PropertyGauge1/config.ts
new file mode 100644
index 0000000..addc6e9
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyGauge1/config.ts
@@ -0,0 +1,35 @@
+export const propertyGauge1Config = {
+  name: '半圆仪表盘',
+  type: 'propertyGauge1',
+  componentProps: {
+    style: {
+      independence: false,
+      gridLayout: {}
+    },
+    gridItem: {
+      x: 0,
+      y: 0,
+      w: 3,
+      h: 6
+    },
+    propertyGauge1: {
+      titleColor: '#666',
+      titleFontSize: 14,
+      minValue: 0,
+      maxValue: 1,
+      splitNumber: 5,
+      valueColor: '#00b86b',
+      valueFontSize: 36,
+      unit: '',
+      unitColor: '#333',
+      unitFontSize: 14,
+      startColor: '#1fcf8b',
+      middleColor: '#f4b447',
+      endColor: '#f0825d',
+      deviceId: '',
+      deviceName: '',
+      propertyId: undefined,
+      propertyName: ''
+    }
+  }
+}
diff --git a/visDashboard/MetadataManagement/PropertyGauge1/index.ts b/visDashboard/MetadataManagement/PropertyGauge1/index.ts
new file mode 100644
index 0000000..3672804
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyGauge1/index.ts
@@ -0,0 +1,20 @@
+import { defineAsyncComponent } from 'vue'
+import { propertyGauge1Config } from './config'
+
+const PropertyGauge1 = {
+  name: 'propertyGauge1',
+  component: defineAsyncComponent(() => import('./PropertyGauge1.vue'))
+}
+
+const PropertyGauge1Config = [
+  {
+    name: 'propertyGauge1',
+    component: defineAsyncComponent(() => import('./Config.vue'))
+  }
+]
+
+const PropertyGauge1ConfigProps = {
+  ...propertyGauge1Config
+}
+
+export { PropertyGauge1, PropertyGauge1Config, PropertyGauge1ConfigProps }
diff --git a/visDashboard/MetadataManagement/PropertyGauge1/propertyGauge1.png b/visDashboard/MetadataManagement/PropertyGauge1/propertyGauge1.png
new file mode 100644
index 0000000..9c24fa2
Binary files /dev/null and b/visDashboard/MetadataManagement/PropertyGauge1/propertyGauge1.png differ
diff --git a/visDashboard/MetadataManagement/PropertyGauge2/Config.vue b/visDashboard/MetadataManagement/PropertyGauge2/Config.vue
new file mode 100644
index 0000000..3d113f3
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyGauge2/Config.vue
@@ -0,0 +1,240 @@
+<template>
+  <div class="card-container">
+    <div class="card-header">
+    <config-item
+      v-if="isProduct"
+      label="设备"
+    >
+      <a-select
+        v-model:value="config.deviceId"
+        :options="deviceOptions"
+        placeholder="请选择设备"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onDeviceChange"
+      />
+    </config-item>
+
+    <config-item label="属性">
+      <a-select
+        v-model:value="config.propertyIds"
+        mode="multiple"
+        :maxTagCount="2"
+        :options="propertyOptions"
+        placeholder="请选择属性，最多5个"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onPropertiesChange"
+      />
+    </config-item>
+    </div>
+    <a-divider />
+
+    <config-item label="最小值">
+      <a-input-number
+        v-model:value="config.minValue"
+        style="width: 100%"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="最大值">
+      <a-input-number
+        v-model:value="config.maxValue"
+        style="width: 100%"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="环宽">
+      <a-input-number
+        v-model:value="config.ringWidth"
+        :min="14"
+        :max="48"
+        :precision="0"
+        style="width: 100%"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="标题字号">
+      <a-input-number
+        v-model:value="config.titleFontSize"
+        :min="12"
+        :max="48"
+        :precision="0"
+        style="width: 100%"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="数值字号">
+      <a-input-number
+        v-model:value="config.valueFontSize"
+        :min="12"
+        :max="48"
+        :precision="0"
+        style="width: 100%"
+        @change="onChange"
+      />
+    </config-item>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { cloneDeep, throttle } from 'lodash-es'
+import { moduleRegistry } from '@jetlinks-web-core/utils/module-registry'
+import { onlyMessage } from '@jetlinks-web/utils'
+import { useProductStore } from '@device-manager-ui/store/product'
+import { useInstanceStore } from '@device-manager-ui/store/instance'
+import { queryNoPagingPost } from '@device-manager-ui/api/instance'
+import { propertyGauge2Config } from './config'
+
+const { ConfigItem } = moduleRegistry.getResource('visualization-designer-ui', 'components')
+
+const props = defineProps({
+  configData: {
+    type: Object,
+    default: () => ({})
+  },
+  type: {
+    type: String,
+    default: 'propertyGauge2'
+  }
+})
+
+const emits = defineEmits(['change'])
+const config = ref<any>({})
+const productStore = useProductStore()
+const instanceStore = useInstanceStore()
+const route = useRoute()
+const deviceOptions = ref<any[]>([])
+const deviceOptionsMap = ref(new Map())
+
+const isProduct = computed(() => route.name === 'device/Product/Detail')
+const numericTypes = new Set(['int', 'long', 'float', 'double', 'short', 'byte', 'decimal', 'number'])
+
+const emitChange = throttle(() => {
+  emits('change', config.value, props.type)
+}, 20)
+
+const onChange = () => {
+  emitChange()
+}
+
+const strToJson = (str: string, key: string = 'properties') => {
+  try {
+    return JSON.parse(str || '{}')[key] || []
+  } catch (e) {
+    return []
+  }
+}
+
+const propertyOptions = computed(() => {
+  try {
+    let properties = []
+    if (isProduct.value) {
+      const hasTarget = config.value.deviceId && deviceOptionsMap.value.size > 0
+      properties = strToJson(productStore.detail.metadata)
+      if (hasTarget) {
+        properties.push(...strToJson(deviceOptionsMap.value.get(config.value.deviceId)?.deriveMetadata))
+      }
+    } else {
+      properties = strToJson(instanceStore.current.metadata || instanceStore.detail.metadata)
+    }
+
+    return properties
+      .filter((item: any) => numericTypes.has(String(item?.valueType?.type || '').toLowerCase()))
+      .map((item: any) => ({
+        ...item,
+        label: item.name,
+        value: item.id
+      }))
+  } catch (e) {
+    return []
+  }
+})
+
+const onDeviceChange = (value: string, option: any) => {
+  config.value.deviceId = value
+  config.value.deviceName = option?.label || ''
+  config.value.propertyIds = []
+  config.value.propertyNames = []
+  emitChange()
+}
+
+const onPropertiesChange = (values: string[]) => {
+  const nextValues = (values || []).slice(0, 5)
+
+  if ((values || []).length > 5) {
+    onlyMessage('最多选择5个属性', 'warning')
+  }
+
+  const optionsMap = new Map(propertyOptions.value.map((item: any) => [item.value, item.label]))
+  config.value.propertyIds = nextValues
+  config.value.propertyNames = nextValues.map((id) => optionsMap.get(id) || id)
+  emitChange()
+}
+
+const getDeviceList = () => {
+  if (!isProduct.value) return
+
+  queryNoPagingPost({ terms: [{ column: 'productId', value: route.params.id, termType: 'eq' }] }).then((res) => {
+    deviceOptions.value = (res.result || []).map((item: any) => {
+      deviceOptionsMap.value.set(item.id, item)
+      return {
+        value: item.id,
+        label: item.name,
+        productId: item.productId,
+        metadata: item.deriveMetadata
+      }
+    })
+  })
+}
+
+onMounted(() => {
+  getDeviceList()
+})
+
+watch(
+  () => props.configData?.componentProps?.[props.type],
+  (newVal) => {
+    const merged = cloneDeep({
+      ...propertyGauge2Config.componentProps.propertyGauge2,
+      ...(newVal || {})
+    })
+
+    merged.propertyIds = Array.isArray(merged.propertyIds) ? merged.propertyIds.slice(0, 5) : []
+    merged.propertyNames = Array.isArray(merged.propertyNames) ? merged.propertyNames.slice(0, 5) : []
+    config.value = merged
+  },
+  { deep: true, immediate: true }
+)
+</script>
+
+<style lang="less" scoped>
+.card-container {
+  color: #fff;
+  gap: 12px;
+  display: flex;
+  flex-direction: column;
+  .card-header {
+    gap: 12px;
+    display: flex;
+    flex-direction: column;
+    padding: 14px 16px;
+    border-radius: 12px;
+    background: #f7f9fc;
+  }
+    :deep(.ant-divider-horizontal) {
+    margin: 0;
+    margin-bottom: 12px;
+  }
+
+  :deep(.config-form-item-content) {
+    padding: 0;
+  }
+}
+</style>
diff --git a/visDashboard/MetadataManagement/PropertyGauge2/PropertyGauge2.vue b/visDashboard/MetadataManagement/PropertyGauge2/PropertyGauge2.vue
new file mode 100644
index 0000000..8d0e316
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyGauge2/PropertyGauge2.vue
@@ -0,0 +1,395 @@
+<template>
+  <div
+    ref="rootRef"
+    class="property-gauge2"
+    :style="style"
+  >
+    <v-chart
+      class="property-gauge2__chart"
+      :option="chartOption"
+      autoresize
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { use } from 'echarts/core'
+import { GaugeChart } from 'echarts/charts'
+import { CanvasRenderer } from 'echarts/renderers'
+import VChart from 'vue-echarts'
+import { dashboard } from '@device-manager-ui/api/dashboard'
+import { detail } from '@device-manager-ui/api/instance'
+import { useInstanceStore } from '@device-manager-ui/store/instance'
+import { useProductStore } from '@device-manager-ui/store/product'
+import { wsClient } from '@jetlinks-web/core'
+import { debounce, throttle } from 'lodash-es'
+import { map } from 'rxjs/operators'
+
+use([CanvasRenderer, GaugeChart])
+
+defineOptions({
+  name: 'PropertyGauge2'
+})
+
+interface PropertyGauge2ComponentConfig {
+  minValue?: number
+  maxValue?: number
+  ringWidth?: number
+  titleFontSize?: number
+  valueFontSize?: number
+  deviceId?: string
+  deviceName?: string
+  propertyIds?: string[]
+  propertyNames?: string[]
+}
+
+interface DashboardCardInfo {
+  id?: string
+  componentProps?: Record<string, unknown>
+}
+
+const props = defineProps({
+  info: {
+    type: Object as PropType<DashboardCardInfo>,
+    default: () => ({})
+  },
+  style: {
+    type: Object as PropType<Record<string, unknown>>,
+    default: () => ({})
+  },
+  isEdit: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const config = computed<PropertyGauge2ComponentConfig>(() => {
+  return (props.info?.componentProps?.propertyGauge2 as PropertyGauge2ComponentConfig) || {}
+})
+
+const route = useRoute()
+const instanceStore = useInstanceStore()
+const productStore = useProductStore()
+const rootRef = ref<HTMLElement>()
+const chartSize = ref(320)
+let resizeObserver: ResizeObserver | undefined
+
+const runtimeProductId = ref('')
+const metadataText = ref('')
+const propertyValue = ref<Record<string, any>>({})
+const dataSource = ref<Record<string, any>[]>([])
+const subRef = ref<any>()
+const messageCache = new Map<string, Record<string, any>>()
+
+const isProduct = computed(() => route.name === 'device/Product/Detail')
+const targetDeviceId = computed(() => String(config.value.deviceId || ''))
+const runtimeDeviceId = computed(() => (isProduct.value ? targetDeviceId.value : String(instanceStore.current.id || '')))
+const selectedPropertyIds = computed(() => (config.value.propertyIds || []).slice(0, 5).map((id) => String(id)))
+
+const palette = ['#4f72df', '#b4d930', '#52577f', '#f59f45', '#45b8d8']
+
+const propertyMap = computed(() => {
+  try {
+    const properties = JSON.parse(metadataText.value || '{}').properties || []
+    const mapData = new Map<string, Record<string, any>>()
+    properties.forEach((item: Record<string, any>) => {
+      mapData.set(String(item.id || ''), item)
+    })
+    return mapData
+  } catch (error) {
+    return new Map<string, Record<string, any>>()
+  }
+})
+
+const minValue = computed(() => Number(config.value.minValue ?? 0))
+const maxValue = computed(() => {
+  const max = Number(config.value.maxValue ?? 100)
+  return max <= minValue.value ? minValue.value + 1 : max
+})
+
+const displayItems = computed(() => {
+  const ids = selectedPropertyIds.value
+  if (!ids.length) {
+    return [
+      { id: 'demo-1', name: 'Perfect', value: 20, color: palette[0] },
+      { id: 'demo-2', name: 'Good', value: 40, color: palette[1] },
+      { id: 'demo-3', name: 'Commonly', value: 60, color: palette[2] }
+    ]
+  }
+
+  return ids.map((id, index) => {
+    const property = propertyMap.value.get(id)
+    const raw = Number(propertyValue.value[id]?.value)
+    const value = Number.isFinite(raw) ? raw : minValue.value
+    return {
+      id,
+      name: property?.name || config.value.propertyNames?.[index] || id,
+      value,
+      color: palette[index % palette.length]
+    }
+  })
+})
+
+const valueChange = (arr: Record<string, any>[]) => {
+  ;(arr || [])
+    .sort((a: any, b: any) => a.timestamp - b.timestamp)
+    .forEach((item: any) => {
+      const property = item?.value?.property
+      if (property) {
+        propertyValue.value[property] = { ...item, ...item.value }
+      }
+    })
+}
+
+const throttleFn = throttle(() => {
+  const list = [...messageCache.values()]
+  valueChange(list)
+}, 500)
+
+const subscribeProperty = () => {
+  if (!runtimeDeviceId.value || !runtimeProductId.value || !dataSource.value.length) {
+    return
+  }
+
+  const propertyIds = dataSource.value.map((item) => item.id)
+  const id = `property-gauge2-${runtimeDeviceId.value}-${runtimeProductId.value}-${propertyIds.join('-')}`
+  const topic = `/dashboard/device/${runtimeProductId.value}/properties/realTime`
+
+  subRef.value = wsClient
+    .getWebSocket(id, topic, {
+      deviceId: runtimeDeviceId.value,
+      properties: propertyIds,
+      history: 1
+    })
+    ?.pipe(map((res: any) => res.payload))
+    .subscribe((payload: any) => {
+      if (payload?.value?.property) {
+        messageCache.set(payload.value.property, payload)
+        throttleFn()
+      }
+    })
+}
+
+const getDashboard = async () => {
+  if (!runtimeDeviceId.value || !runtimeProductId.value || !dataSource.value.length) {
+    subRef.value && subRef.value?.unsubscribe()
+    return
+  }
+
+  const response: Record<string, any> = await dashboard([
+    {
+      dashboard: 'device',
+      object: runtimeProductId.value,
+      measurement: 'properties',
+      dimension: 'history',
+      params: {
+        deviceId: runtimeDeviceId.value,
+        history: 1,
+        properties: dataSource.value.map((item) => item.id)
+      }
+    }
+  ])
+
+  if (response.status === 200) {
+    const latestMap: Record<string, any> = {}
+    ;(response.result || []).forEach((item: any) => {
+      const payload = item?.data || {}
+      const property = payload?.value?.property
+      if (!property) return
+
+      const existed = latestMap[property]
+      if (!existed || Number(payload.timestamp || 0) >= Number(existed.timestamp || 0)) {
+        latestMap[property] = {
+          timeString: payload.timeString,
+          timestamp: payload.timestamp,
+          ...payload.value
+        }
+      }
+    })
+
+    propertyValue.value = {
+      ...unref(propertyValue),
+      ...latestMap
+    }
+  }
+
+  subRef.value && subRef.value?.unsubscribe()
+  subscribeProperty()
+}
+
+const resolveMetadata = async () => {
+  if (!isProduct.value) {
+    metadataText.value = instanceStore.current.metadata || instanceStore.detail.metadata || ''
+    runtimeProductId.value = String(instanceStore.current.productId || instanceStore.detail.productId || '')
+    return
+  }
+
+  if (!targetDeviceId.value) {
+    metadataText.value = productStore.detail.metadata || ''
+    runtimeProductId.value = String(productStore.detail.id || '')
+    return
+  }
+
+  const response = await detail(targetDeviceId.value, true)
+  metadataText.value = response.result?.metadata || ''
+  runtimeProductId.value = String(response.result?.productId || '')
+}
+
+const handleProperty = debounce(async () => {
+  subRef.value && subRef.value?.unsubscribe()
+  messageCache.clear()
+  propertyValue.value = {}
+
+  await resolveMetadata()
+
+  dataSource.value = selectedPropertyIds.value
+    .map((id) => propertyMap.value.get(id))
+    .filter((item): item is Record<string, any> => !!item)
+    .slice(0, 5)
+
+  if (messageCache.size === 0) {
+    await getDashboard()
+  }
+}, 300)
+
+onMounted(() => {
+  const updateSize = () => {
+    const el = rootRef.value
+    if (!el) return
+    const rect = el.getBoundingClientRect()
+    chartSize.value = Math.max(220, Math.min(rect.width, rect.height))
+  }
+
+  updateSize()
+  resizeObserver = new ResizeObserver(() => {
+    updateSize()
+  })
+  if (rootRef.value) {
+    resizeObserver.observe(rootRef.value)
+  }
+
+  handleProperty()
+})
+
+onUnmounted(() => {
+  handleProperty.cancel()
+  throttleFn.cancel()
+  subRef.value && subRef.value?.unsubscribe()
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+    resizeObserver = undefined
+  }
+})
+
+watch(
+  () => [props.info, targetDeviceId.value, runtimeDeviceId.value, selectedPropertyIds.value.join(',')],
+  () => {
+    handleProperty()
+  },
+  { immediate: true, deep: true }
+)
+
+const chartOption = computed(() => {
+  const ringWidth = Number(config.value.ringWidth || 26)
+  const itemCount = Math.max(1, displayItems.value.slice(0, 5).length)
+  const sizeFactor = Math.max(0.68, Math.min(1, chartSize.value / 420))
+  const densityFactor = itemCount >= 4 ? 0.72 : itemCount === 3 ? 0.82 : 0.95
+  const titleBase = Number(config.value.titleFontSize || 22)
+  const valueBase = Number(config.value.valueFontSize || 20)
+  const titleFontSize = Math.max(12, Math.round(titleBase * sizeFactor * densityFactor))
+  const valueFontSize = Math.max(12, Math.round(valueBase * sizeFactor * densityFactor))
+
+  const data = displayItems.value.slice(0, 5).map((item, index) => ({
+    value: item.value,
+    name: item.name,
+    title: {
+      offsetCenter: ['0%', `${-30 + index * 30}%`],
+      color: '#6b6b6b'
+    },
+    detail: {
+      valueAnimation: true,
+      offsetCenter: ['0%', `${-20 + index * 30}%`],
+      color: item.color,
+      borderColor: item.color
+    },
+    itemStyle: {
+      color: item.color
+    }
+  }))
+
+  return {
+    animation: false,
+    series: [
+      {
+        type: 'gauge',
+        min: minValue.value,
+        max: maxValue.value,
+        startAngle: 90,
+        endAngle: -270,
+        radius: '90%',
+        center: ['50%', '52%'],
+        pointer: {
+          show: false
+        },
+        progress: {
+          show: true,
+          overlap: false,
+          roundCap: true,
+          clip: false,
+          itemStyle: {
+            borderWidth: 1,
+            borderColor: '#464646'
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            width: ringWidth,
+            color: [[1, '#e4e7ee']]
+          }
+        },
+        splitLine: {
+          show: false,
+          distance: 0,
+          length: 10
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          show: false,
+          distance: 50
+        },
+        data,
+        title: {
+          fontSize: titleFontSize,
+        },
+        detail: {
+          width: Math.max(58, Math.round(valueFontSize * 2.8)),
+          height: Math.max(18, Math.round(valueFontSize * 1.2)),
+          fontSize: valueFontSize,
+          color: 'inherit',
+          borderColor: 'inherit',
+          borderRadius: 20,
+          padding: [0, 6],
+          borderWidth: 1,
+          formatter: '{value}%'
+        }
+      }
+    ]
+  }
+})
+</script>
+
+<style scoped lang="less">
+.property-gauge2 {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+}
+
+.property-gauge2__chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/visDashboard/MetadataManagement/PropertyGauge2/config.ts b/visDashboard/MetadataManagement/PropertyGauge2/config.ts
new file mode 100644
index 0000000..1b24277
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyGauge2/config.ts
@@ -0,0 +1,27 @@
+export const propertyGauge2Config = {
+  name: '多环仪表盘',
+  type: 'propertyGauge2',
+  componentProps: {
+    style: {
+      independence: false,
+      gridLayout: {}
+    },
+    gridItem: {
+      x: 0,
+      y: 0,
+      w: 3,
+      h: 7
+    },
+    propertyGauge2: {
+      minValue: 0,
+      maxValue: 100,
+      ringWidth: 26,
+      titleFontSize: 24,
+      valueFontSize: 18,
+      deviceId: '',
+      deviceName: '',
+      propertyIds: [],
+      propertyNames: []
+    }
+  }
+}
diff --git a/visDashboard/MetadataManagement/PropertyGauge2/index.ts b/visDashboard/MetadataManagement/PropertyGauge2/index.ts
new file mode 100644
index 0000000..f97710c
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyGauge2/index.ts
@@ -0,0 +1,20 @@
+import { defineAsyncComponent } from 'vue'
+import { propertyGauge2Config } from './config'
+
+const PropertyGauge2 = {
+  name: 'propertyGauge2',
+  component: defineAsyncComponent(() => import('./PropertyGauge2.vue'))
+}
+
+const PropertyGauge2Config = [
+  {
+    name: 'propertyGauge2',
+    component: defineAsyncComponent(() => import('./Config.vue'))
+  }
+]
+
+const PropertyGauge2ConfigProps = {
+  ...propertyGauge2Config
+}
+
+export { PropertyGauge2, PropertyGauge2Config, PropertyGauge2ConfigProps }
diff --git a/visDashboard/MetadataManagement/PropertyGauge2/propertyGauge2.png b/visDashboard/MetadataManagement/PropertyGauge2/propertyGauge2.png
new file mode 100644
index 0000000..2e3eff5
Binary files /dev/null and b/visDashboard/MetadataManagement/PropertyGauge2/propertyGauge2.png differ
diff --git a/visDashboard/MetadataManagement/PropertyLine/Config.vue b/visDashboard/MetadataManagement/PropertyLine/Config.vue
new file mode 100644
index 0000000..2ff4f9c
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyLine/Config.vue
@@ -0,0 +1,312 @@
+<template>
+  <div class="card-container">    <div class="card-header">
+      <config-item
+      v-if="isProduct"
+      label="设备"
+    >
+      <a-select
+        v-model:value="config.deviceId"
+        :options="deviceOptions"
+        placeholder="请选择设备"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onDeviceChange"
+      />
+    </config-item>
+
+      <config-item label="属性">
+      <a-select
+        v-model:value="config.propertyIds"
+        mode="multiple"
+        :maxTagCount="2"
+        :options="propertyOptions"
+        placeholder="请选择属性，最多5个"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onPropertiesChange"
+      />
+    </config-item>
+    
+    </div>
+    <a-divider />
+    <config-item label="时间周期">
+      <a-select
+        v-model:value="config.timePeriod"
+        :options="timePeriodOptions"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onTimePeriodChange"
+      />
+    </config-item>
+
+    <config-item label="统计周期">
+      <a-select
+        v-model:value="config.cycle"
+        :options="cycleOptions"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="统计规则">
+      <a-select
+        v-model:value="config.aggregation"
+        :options="aggregationOptions"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="标题">
+      <a-input
+        v-model:value="config.title"
+        placeholder="请输入标题"
+        style="width: 100%"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="标题样式">
+      <div class="card-container-row">
+        <ColorPicker
+          v-model:value="config.titleColor"
+          :isInput="false"
+          style="margin-right: 6px"
+          theme="white"
+          @change="onChange"
+        />
+        <a-input-number
+          v-model:value="config.titleFontSize"
+          :min="14"
+          :max="80"
+          :precision="0"
+          style="flex: 1"
+          @change="onChange"
+        />
+      </div>
+    </config-item>
+
+    <config-item label="图例字体">
+      <a-input-number
+        v-model:value="config.legendFontSize"
+        :min="12"
+        :max="40"
+        :precision="0"
+        style="width: 100%"
+        @change="onChange"
+      />
+    </config-item>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { cloneDeep, throttle } from 'lodash-es'
+import { moduleRegistry } from '@jetlinks-web-core/utils/module-registry'
+import { onlyMessage } from '@jetlinks-web/utils'
+import { useProductStore } from '@device-manager-ui/store/product'
+import { useInstanceStore } from '@device-manager-ui/store/instance'
+import { queryNoPagingPost } from '@device-manager-ui/api/instance'
+import { propertyLineConfig } from './config'
+
+const { ConfigItem, ColorPicker } = moduleRegistry.getResource('visualization-designer-ui', 'components')
+
+const props = defineProps({
+  configData: {
+    type: Object,
+    default: () => ({})
+  },
+  type: {
+    type: String,
+    default: 'propertyLine'
+  }
+})
+
+const emits = defineEmits(['change'])
+const config = ref<any>({})
+const productStore = useProductStore()
+const instanceStore = useInstanceStore()
+const route = useRoute()
+const deviceOptions = ref<any[]>([])
+const deviceOptionsMap = ref(new Map())
+
+const isProduct = computed(() => route.name === 'device/Product/Detail')
+
+const numericTypes = new Set(['int', 'long', 'float', 'double', 'short', 'byte', 'decimal', 'number'])
+
+const timePeriodOptions = [
+  { label: '今日', value: 'today' },
+  { label: '近一周', value: 'week' },
+  { label: '近一月', value: 'month' }
+]
+
+const cycleOptionMap: Record<string, { label: string; value: string }[]> = {
+  today: [
+    { label: '实际值', value: '*' },
+    { label: '1分钟', value: '1m' }
+  ],
+  week: [
+    { label: '实际值', value: '*' },
+    { label: '1分钟', value: '1m' },
+    { label: '1小时', value: '1h' }
+  ],
+  month: [
+    { label: '1天', value: '1d' },
+    { label: '1周', value: '1w' }
+  ]
+}
+
+const cycleOptions = computed(() => cycleOptionMap[config.value.timePeriod || 'today'] || cycleOptionMap.today)
+
+const aggregationOptions = [
+  { label: '平均值', value: 'AVG' },
+  { label: '最大值', value: 'MAX' },
+  { label: '最小值', value: 'MIN' },
+  { label: '计数', value: 'COUNT' }
+]
+
+const emitChange = throttle(() => {
+  emits('change', config.value, props.type)
+}, 20)
+
+const onChange = () => {
+  emitChange()
+}
+
+const onTimePeriodChange = () => {
+  const values = cycleOptions.value.map((item) => item.value)
+  if (!values.includes(config.value.cycle)) {
+    config.value.cycle = values[0]
+  }
+  emitChange()
+}
+
+const strToJson = (str: string, key: string = 'properties') => {
+  try {
+    return JSON.parse(str || '{}')[key] || []
+  } catch (e) {
+    return []
+  }
+}
+
+const propertyOptions = computed(() => {
+  try {
+    let properties = []
+    if (isProduct.value) {
+      const hasTarget = config.value.deviceId && deviceOptionsMap.value.size > 0
+      properties = strToJson(productStore.detail.metadata)
+      if (hasTarget) {
+        properties.push(...strToJson(deviceOptionsMap.value.get(config.value.deviceId)?.deriveMetadata))
+      }
+    } else {
+      properties = strToJson(instanceStore.current.metadata || instanceStore.detail.metadata)
+    }
+
+    return properties
+      .filter((item: any) => numericTypes.has(String(item?.valueType?.type || '').toLowerCase()))
+      .map((item: any) => ({
+        ...item,
+        label: item.name,
+        value: item.id
+      }))
+  } catch (e) {
+    return []
+  }
+})
+
+const onDeviceChange = (value: string, option: any) => {
+  config.value.deviceId = value
+  config.value.deviceName = option?.label || ''
+  config.value.propertyIds = []
+  config.value.propertyNames = []
+  emitChange()
+}
+
+const onPropertiesChange = (values: string[]) => {
+  const nextValues = (values || []).slice(0, 5)
+
+  if ((values || []).length > 5) {
+    onlyMessage('最多选择5个属性', 'warning')
+  }
+
+  const optionsMap = new Map(propertyOptions.value.map((item: any) => [item.value, item.label]))
+  config.value.propertyIds = nextValues
+  config.value.propertyNames = nextValues.map((id) => optionsMap.get(id) || id)
+  emitChange()
+}
+
+const getDeviceList = () => {
+  if (!isProduct.value) return
+
+  queryNoPagingPost({ terms: [{ column: 'productId', value: route.params.id, termType: 'eq' }] }).then((res) => {
+    deviceOptions.value = (res.result || []).map((item: any) => {
+      deviceOptionsMap.value.set(item.id, item)
+      return {
+        value: item.id,
+        label: item.name,
+        productId: item.productId,
+        metadata: item.deriveMetadata
+      }
+    })
+  })
+}
+
+onMounted(() => {
+  getDeviceList()
+})
+
+watch(
+  () => props.configData?.componentProps?.[props.type],
+  (newVal) => {
+    const merged = cloneDeep({
+      ...propertyLineConfig.componentProps.propertyLine,
+      ...(newVal || {})
+    })
+
+    merged.propertyIds = Array.isArray(merged.propertyIds) ? merged.propertyIds.slice(0, 5) : []
+    merged.propertyNames = Array.isArray(merged.propertyNames) ? merged.propertyNames.slice(0, 5) : []
+
+    const values = (cycleOptionMap[merged.timePeriod || 'today'] || cycleOptionMap.today).map((item) => item.value)
+    if (!values.includes(merged.cycle)) {
+      merged.cycle = values[0]
+    }
+
+    config.value = merged
+  },
+  { deep: true, immediate: true }
+)
+</script>
+
+<style lang="less" scoped>
+.card-container {
+  .card-header {
+    gap: 12px;
+    display: flex;
+    flex-direction: column;
+    padding: 14px 16px;
+    border-radius: 12px;
+    background: #f7f9fc;
+  }
+  color: #fff;
+  gap: 12px;
+  display: flex;
+  flex-direction: column;
+  :deep(.ant-divider-horizontal) {
+    margin: 0;
+    margin-bottom: 12px;
+  }
+
+  :deep(.config-form-item-content) {
+    padding: 0;
+  }
+}
+
+.card-container-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/visDashboard/MetadataManagement/PropertyLine/PropertyLine.vue b/visDashboard/MetadataManagement/PropertyLine/PropertyLine.vue
new file mode 100644
index 0000000..57ed7e9
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyLine/PropertyLine.vue
@@ -0,0 +1,474 @@
+<template>
+  <div
+    class="property-line"
+    :style="style"
+  >
+    <div class="property-line__header">
+      <div
+        class="property-line__title"
+        :style="titleStyle"
+        :title="displayTitle"
+      >
+        {{ displayTitle }}
+      </div>
+    </div>
+
+    <div class="property-line__legend-wrap">
+      <div
+        v-for="item in displaySeries"
+        :key="item.id"
+        class="property-line__legend-item"
+      >
+        <span
+          class="property-line__legend-dot"
+          :style="{ backgroundColor: item.color }"
+        />
+        <span
+          class="property-line__legend-name"
+          :style="legendTextStyle"
+        >
+          {{ item.name }}
+        </span>
+      </div>
+    </div>
+
+    <div class="property-line__chart">
+      <v-chart
+        :option="chartOption"
+        autoresize
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import dayjs from 'dayjs'
+import { use } from 'echarts/core'
+import { LineChart } from 'echarts/charts'
+import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import VChart from 'vue-echarts'
+import { getPropertiesInfo, getPropertiesList } from '@device-manager-ui/api/instance'
+import { useInstanceStore } from '@device-manager-ui/store/instance'
+import { debounce } from 'lodash-es'
+
+use([CanvasRenderer, LineChart, GridComponent, LegendComponent, TooltipComponent])
+
+defineOptions({
+  name: 'PropertyLine'
+})
+
+interface PropertyLineComponentConfig {
+  title?: string
+  titleColor?: string
+  titleFontSize?: number
+  legendFontSize?: number
+  timePeriod?: 'today' | 'week' | 'month'
+  cycle?: '*' | '1m' | '1h' | '1d' | '1w'
+  aggregation?: 'AVG' | 'MAX' | 'MIN' | 'COUNT'
+  deviceId?: string
+  deviceName?: string
+  propertyIds?: string[]
+  propertyNames?: string[]
+}
+
+interface DashboardCardInfo {
+  id?: string
+  componentProps?: Record<string, unknown>
+}
+
+interface SeriesItem {
+  id: string
+  name: string
+  color: string
+  values: (number | undefined)[]
+}
+
+interface AxisPoint {
+  key: string
+  label: string
+}
+
+const props = defineProps({
+  info: {
+    type: Object as PropType<DashboardCardInfo>,
+    default: () => ({})
+  },
+  style: {
+    type: Object as PropType<Record<string, unknown>>,
+    default: () => ({})
+  },
+  isEdit: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const route = useRoute()
+const instanceStore = useInstanceStore()
+
+const config = computed<PropertyLineComponentConfig>(() => {
+  return (props.info?.componentProps?.propertyLine as PropertyLineComponentConfig) || {}
+})
+
+const colors = ['#2f7cf6', '#f0ab00', '#43a047', '#ef5350', '#7e57c2']
+const axisPoints = ref<AxisPoint[]>([])
+const propertyData = ref<Record<string, Record<string, number | undefined>>>({})
+
+const isProduct = computed(() => route.name === 'device/Product/Detail')
+const targetDeviceId = computed(() => String(config.value.deviceId || ''))
+const runtimeDeviceId = computed(() => (isProduct.value ? targetDeviceId.value : String(instanceStore.current.id || '')))
+
+const displayTitle = computed(() => {
+  const title = config.value.title || 'Line chart'
+  const deviceName = config.value.deviceName || ''
+  return deviceName ? `${deviceName}(${title})` : title
+})
+
+const titleStyle = computed(() => ({
+  color: config.value.titleColor || 'rgba(0, 0, 0, 0.88)',
+  fontSize: `${Number(config.value.titleFontSize || 18)}px`
+}))
+
+const legendTextStyle = computed(() => ({
+  fontSize: `${Number(config.value.legendFontSize || 16)}px`
+}))
+
+const selectedPropertyIds = computed(() => {
+  const ids = config.value.propertyIds || []
+  return ids.slice(0, 5).map((id) => String(id))
+})
+
+const selectedPropertyNames = computed(() => {
+  const ids = selectedPropertyIds.value
+  return ids.map((id, index) => config.value.propertyNames?.[index] || id)
+})
+
+const timeRange = computed(() => {
+  const end = dayjs()
+  const type = config.value.timePeriod || 'today'
+  if (type === 'week') {
+    return { start: end.subtract(6, 'day'), end }
+  }
+  if (type === 'month') {
+    return { start: end.subtract(30, 'day'), end }
+  }
+  return { start: dayjs().startOf('day'), end }
+})
+
+const xAxisData = computed(() => {
+  return axisPoints.value.map((item) => item.label)
+})
+
+const toNumber = (value: unknown): number | undefined => {
+  const num = Number(value)
+  return Number.isFinite(num) ? num : undefined
+}
+
+const displaySeries = computed<SeriesItem[]>(() => {
+  const ids = selectedPropertyIds.value
+  const names = selectedPropertyNames.value
+
+  return ids.map((id, index) => ({
+    id,
+    name: names[index] || id,
+    color: colors[index % colors.length],
+    values: axisPoints.value.map((point) => propertyData.value[id]?.[point.key])
+  }))
+})
+
+const formatAxisLabel = (value: dayjs.ConfigType, cycle: string) => {
+  if (cycle === '1d') return dayjs(value).format('YYYY-MM-DD')
+  return dayjs(value).format('YYYY-MM-DD\nHH:mm:ss')
+}
+
+const buildFallbackAxis = (cycle: string) => {
+  const { start, end } = timeRange.value
+  return [
+    { key: String(start.valueOf()), label: formatAxisLabel(start, cycle) },
+    { key: String(end.valueOf()), label: formatAxisLabel(end, cycle) }
+  ]
+}
+
+const queryRawSeries = async (deviceId: string, propertyId: string, from: number, to: number) => {
+  const resp = await getPropertiesList(deviceId, propertyId, {
+    paging: false,
+    terms: [
+      {
+        column: 'timestamp$BTW',
+        value: [from, to],
+        type: 'and'
+      }
+    ],
+    sorts: [{ name: 'timestamp', order: 'asc' }]
+  })
+
+  if (resp.status !== 200) return []
+
+  const list = (resp.result || []) as Record<string, any>[]
+  return list.map((item) => ({
+    key: String(Number(item.timestamp)),
+    ts: Number(item.timestamp),
+    value: toNumber(item.value)
+  }))
+}
+
+const queryAggSeries = async (deviceId: string, propertyIds: string[], agg: string, cycle: string, from: number, to: number) => {
+  const resp = await getPropertiesInfo(deviceId, {
+    columns: propertyIds.map((id) => ({
+      property: id,
+      alias: id,
+      agg
+    })),
+    query: {
+      interval: cycle,
+      format: cycle === '1d' || cycle === '1w' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss',
+      from,
+      to
+    }
+  })
+
+  if (resp.status !== 200) return [] as Record<string, any>[]
+  return (resp.result || []) as Record<string, any>[]
+}
+
+const loadChartData = debounce(async () => {
+  const deviceId = runtimeDeviceId.value
+  const propertyIds = selectedPropertyIds.value
+  const cycle = config.value.cycle || '*'
+  const aggregation = config.value.aggregation || 'AVG'
+  const { start, end } = timeRange.value
+  const from = start.valueOf()
+  const to = end.valueOf()
+
+  if (!deviceId || !propertyIds.length) {
+    axisPoints.value = buildFallbackAxis(cycle)
+    propertyData.value = {}
+    return
+  }
+
+  try {
+    if (cycle === '*') {
+      const rowsList = await Promise.all(propertyIds.map((id) => queryRawSeries(deviceId, id, from, to)))
+      const axisMap = new Map<string, number>()
+      const nextData: Record<string, Record<string, number | undefined>> = {}
+
+      rowsList.forEach((rows, index) => {
+        const propertyId = propertyIds[index]
+        const map: Record<string, number | undefined> = {}
+        map[String(from)] = undefined
+        map[String(to)] = undefined
+        axisMap.set(String(from), from)
+        axisMap.set(String(to), to)
+
+        rows.forEach((item) => {
+          map[item.key] = item.value
+          axisMap.set(item.key, item.ts)
+        })
+
+        nextData[propertyId] = map
+      })
+
+      const sorted = [...axisMap.entries()].sort((a, b) => a[1] - b[1])
+      axisPoints.value = sorted.map(([key, ts]) => ({
+        key,
+        label: formatAxisLabel(ts, cycle)
+      }))
+      propertyData.value = nextData
+    } else {
+      const rows = await queryAggSeries(deviceId, propertyIds, aggregation, cycle, from, to)
+      const nextData: Record<string, Record<string, number | undefined>> = {}
+      propertyIds.forEach((id) => {
+        nextData[id] = {}
+      })
+
+      const xAxis: AxisPoint[] = []
+      rows.forEach((row, index) => {
+        const timeValue = row.time
+        const key = String(index)
+        xAxis.push({
+          key,
+          label: formatAxisLabel(timeValue, cycle)
+        })
+        propertyIds.forEach((id) => {
+          nextData[id][key] = toNumber(row[id])
+        })
+      })
+
+      axisPoints.value = xAxis.length ? xAxis : buildFallbackAxis(cycle)
+      propertyData.value = nextData
+    }
+  } finally {
+    // noop
+  }
+}, 200)
+
+onUnmounted(() => {
+  loadChartData.cancel()
+})
+
+watch(
+  () => [
+    props.info,
+    runtimeDeviceId.value,
+    targetDeviceId.value,
+    selectedPropertyIds.value.join(','),
+    config.value.timePeriod,
+    config.value.cycle,
+    config.value.aggregation
+  ],
+  () => {
+    loadChartData()
+  },
+  { immediate: true, deep: true }
+)
+
+const chartOption = computed(() => {
+  return {
+    animation: false,
+    tooltip: {
+      trigger: 'axis',
+      appendToBody: true,
+      valueFormatter: (value: any) => value ?? '--'
+    },
+    grid: {
+      left: 35,
+      right: 40,
+      top: 20,
+      bottom: 35,
+      containLabel: true
+    },
+    dataZoom: [
+      {
+        type: 'inside',
+        start: 0,
+        end: 100
+      },
+      {
+        start: 0,
+        end: 100,
+        height: 22,
+        bottom: 10,
+        left: 22,
+        right: 40
+      }
+    ],
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: xAxisData.value,
+      axisLine: {
+        lineStyle: {
+          color: '#d9d9d9'
+        }
+      },
+      axisTick: { show: false },
+      axisLabel: {
+        color: 'rgba(0, 0, 0, 0.45)',
+        fontSize: 12,
+        margin: 12,
+        hideOverlap: false,
+        showMinLabel: true,
+        showMaxLabel: true
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: {
+        color: 'rgba(0, 0, 0, 0.45)'
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#e8e8e8',
+          type: 'solid'
+        }
+      }
+    },
+    series: displaySeries.value.map((item) => ({
+      name: item.name,
+      type: 'line',
+      data: item.values,
+      smooth: false,
+      showSymbol: false,
+      connectNulls: true,
+      lineStyle: {
+        color: item.color,
+        width: 3
+      },
+      itemStyle: {
+        color: item.color
+      }
+    }))
+  }
+})
+</script>
+
+<style scoped lang="less">
+.property-line {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 20px;
+  background-color: #fff;
+  overflow: hidden;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+}
+
+.property-line__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.property-line__title {
+  min-width: 0;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.property-line__legend-wrap {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: wrap;
+  margin-top: 18px;
+}
+
+.property-line__legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.property-line__legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.property-line__legend-name {
+  color: rgba(0, 0, 0, 0.88);
+  white-space: nowrap;
+}
+
+.property-line__chart {
+  flex: 1;
+  min-height: 0;
+  margin-top: 16px;
+  padding-left: 6px;
+  padding-right: 12px;
+}
+</style>
diff --git a/visDashboard/MetadataManagement/PropertyLine/config.ts b/visDashboard/MetadataManagement/PropertyLine/config.ts
new file mode 100644
index 0000000..3e34863
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyLine/config.ts
@@ -0,0 +1,29 @@
+export const propertyLineConfig = {
+  name: '属性聚合折线图',
+  type: 'propertyLine',
+  componentProps: {
+    style: {
+      independence: false,
+      gridLayout: {}
+    },
+    gridItem: {
+      x: 0,
+      y: 0,
+      w: 5,
+      h: 10
+    },
+    propertyLine: {
+      title: 'Line chart',
+      titleColor: 'rgba(0, 0, 0, 0.88)',
+      titleFontSize: 18,
+      legendFontSize: 16,
+      timePeriod: 'today',
+      cycle: '*',
+      aggregation: 'AVG',
+      deviceId: '',
+      deviceName: '',
+      propertyIds: [],
+      propertyNames: []
+    }
+  }
+}
diff --git a/visDashboard/MetadataManagement/PropertyLine/index.ts b/visDashboard/MetadataManagement/PropertyLine/index.ts
new file mode 100644
index 0000000..952a9c1
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyLine/index.ts
@@ -0,0 +1,20 @@
+import { defineAsyncComponent } from 'vue'
+import { propertyLineConfig } from './config'
+
+const PropertyLine = {
+  name: 'propertyLine',
+  component: defineAsyncComponent(() => import('./PropertyLine.vue'))
+}
+
+const PropertyLineConfig = [
+  {
+    name: 'propertyLine',
+    component: defineAsyncComponent(() => import('./Config.vue'))
+  }
+]
+
+const PropertyLineConfigProps = {
+  ...propertyLineConfig
+}
+
+export { PropertyLine, PropertyLineConfig, PropertyLineConfigProps }
diff --git a/visDashboard/MetadataManagement/PropertyLine/propertyLine.png b/visDashboard/MetadataManagement/PropertyLine/propertyLine.png
new file mode 100644
index 0000000..eb16a55
Binary files /dev/null and b/visDashboard/MetadataManagement/PropertyLine/propertyLine.png differ
diff --git a/visDashboard/MetadataManagement/PropertyPie/Config.vue b/visDashboard/MetadataManagement/PropertyPie/Config.vue
new file mode 100644
index 0000000..2bdb39f
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyPie/Config.vue
@@ -0,0 +1,295 @@
+<template>
+  <div class="card-container">    <div class="card-header">
+      <config-item
+      v-if="isProduct"
+      label="设备"
+    >
+      <a-select
+        v-model:value="config.deviceId"
+        :options="deviceOptions"
+        placeholder="请选择设备"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onDeviceChange"
+      />
+    </config-item>
+
+      <config-item label="属性">
+      <a-select
+        v-model:value="config.propertyIds"
+        mode="multiple"
+        :maxTagCount="2"
+        :options="propertyOptions"
+        placeholder="请选择属性(最多5个)"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onPropertiesChange"
+      />
+    </config-item>
+    
+    </div>
+    <a-divider />
+    <config-item label="标题">
+      <a-input
+        v-model:value="config.title"
+        placeholder="请输入标题"
+        style="width: 100%"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="标题样式">
+      <div class="card-container-row">
+        <ColorPicker
+          v-model:value="config.titleColor"
+          :isInput="false"
+          style="margin-right: 6px"
+          theme="white"
+          @change="onChange"
+        />
+        <a-input-number
+          v-model:value="config.titleFontSize"
+          :min="12"
+          :max="60"
+          :precision="0"
+          style="flex: 1"
+          @change="onChange"
+        />
+      </div>
+    </config-item>
+
+    <config-item label="总计文案">
+      <a-input
+        v-model:value="config.totalLabel"
+        placeholder="请输入总计文案"
+        style="width: 100%"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="总计文案样式">
+      <div class="card-container-row">
+        <ColorPicker
+          v-model:value="config.totalLabelColor"
+          :isInput="false"
+          style="margin-right: 6px"
+          theme="white"
+          @change="onChange"
+        />
+        <a-input-number
+          v-model:value="config.totalLabelFontSize"
+          :min="10"
+          :max="40"
+          :precision="0"
+          style="flex: 1"
+          @change="onChange"
+        />
+      </div>
+    </config-item>
+
+    <config-item label="总计数值样式">
+      <div class="card-container-row">
+        <ColorPicker
+          v-model:value="config.totalValueColor"
+          :isInput="false"
+          style="margin-right: 6px"
+          theme="white"
+          @change="onChange"
+        />
+        <a-input-number
+          v-model:value="config.totalValueFontSize"
+          :min="14"
+          :max="80"
+          :precision="0"
+          style="flex: 1"
+          @change="onChange"
+        />
+      </div>
+    </config-item>
+
+    <config-item label="空数据颜色">
+      <ColorPicker
+        v-model:value="config.emptyColor"
+        :isInput="false"
+        theme="white"
+        @change="onChange"
+      />
+    </config-item>
+
+    <config-item label="环宽">
+      <a-input-number
+        v-model:value="config.ringWidth"
+        :min="8"
+        :max="40"
+        :precision="0"
+        style="width: 100%"
+        @change="onChange"
+      />
+    </config-item>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { cloneDeep, throttle } from 'lodash-es'
+import { moduleRegistry } from '@jetlinks-web-core/utils/module-registry'
+import { onlyMessage } from '@jetlinks-web/utils'
+import { useProductStore } from '@device-manager-ui/store/product'
+import { useInstanceStore } from '@device-manager-ui/store/instance'
+import { queryNoPagingPost } from '@device-manager-ui/api/instance'
+import { propertyPieConfig } from './config'
+
+const { ConfigItem, ColorPicker } = moduleRegistry.getResource('visualization-designer-ui', 'components')
+
+const props = defineProps({
+  configData: {
+    type: Object,
+    default: () => ({})
+  },
+  type: {
+    type: String,
+    default: 'propertyPie'
+  }
+})
+
+const emits = defineEmits(['change'])
+const config = ref<any>({})
+const productStore = useProductStore()
+const instanceStore = useInstanceStore()
+const route = useRoute()
+const deviceOptions = ref<any[]>([])
+const deviceOptionsMap = ref(new Map())
+
+const isProduct = computed(() => route.name === 'device/Product/Detail')
+
+const numericTypes = new Set(['int', 'long', 'float', 'double', 'short', 'byte', 'decimal', 'number'])
+
+const emitChange = throttle(() => {
+  emits('change', config.value, props.type)
+}, 20)
+
+const onChange = () => {
+  emitChange()
+}
+
+const strToJson = (str: string, key: string = 'properties') => {
+  try {
+    return JSON.parse(str || '{}')[key] || []
+  } catch (e) {
+    return []
+  }
+}
+
+const propertyOptions = computed(() => {
+  try {
+    let properties = []
+    if (isProduct.value) {
+      const hasTarget = config.value.deviceId && deviceOptionsMap.value.size > 0
+      properties = strToJson(productStore.detail.metadata)
+      if (hasTarget) {
+        properties.push(...strToJson(deviceOptionsMap.value.get(config.value.deviceId)?.deriveMetadata))
+      }
+    } else {
+      properties = strToJson(instanceStore.current.metadata || instanceStore.detail.metadata)
+    }
+
+    return properties
+      .filter((item: any) => numericTypes.has(String(item?.valueType?.type || '').toLowerCase()))
+      .map((item: any) => ({
+        ...item,
+        label: item.name,
+        value: item.id
+      }))
+  } catch (e) {
+    return []
+  }
+})
+
+const onDeviceChange = (value: string, option: any) => {
+  config.value.deviceId = value
+  config.value.deviceName = option?.label || ''
+  config.value.propertyIds = []
+  config.value.propertyNames = []
+  emitChange()
+}
+
+const onPropertiesChange = (values: string[]) => {
+  const nextValues = (values || []).slice(0, 5)
+
+  if ((values || []).length > 5) {
+    onlyMessage('最多选择5个属性', 'warning')
+  }
+
+  const optionsMap = new Map(propertyOptions.value.map((item: any) => [item.value, item.label]))
+  config.value.propertyIds = nextValues
+  config.value.propertyNames = nextValues.map((id) => optionsMap.get(id) || id)
+  emitChange()
+}
+
+const getDeviceList = () => {
+  if (!isProduct.value) return
+
+  queryNoPagingPost({ terms: [{ column: 'productId', value: route.params.id, termType: 'eq' }] }).then((res) => {
+    deviceOptions.value = (res.result || []).map((item: any) => {
+      deviceOptionsMap.value.set(item.id, item)
+      return {
+        value: item.id,
+        label: item.name,
+        productId: item.productId,
+        metadata: item.deriveMetadata
+      }
+    })
+  })
+}
+
+onMounted(() => {
+  getDeviceList()
+})
+
+watch(
+  () => props.configData?.componentProps?.[props.type],
+  (newVal) => {
+    const merged = cloneDeep({
+      ...propertyPieConfig.componentProps.propertyPie,
+      ...(newVal || {})
+    })
+
+    merged.propertyIds = Array.isArray(merged.propertyIds) ? merged.propertyIds.slice(0, 5) : []
+    merged.propertyNames = Array.isArray(merged.propertyNames) ? merged.propertyNames.slice(0, 5) : []
+    config.value = merged
+  },
+  { deep: true, immediate: true }
+)
+</script>
+
+<style lang="less" scoped>
+.card-container {
+  .card-header {
+    gap: 12px;
+    display: flex;
+    flex-direction: column;
+    padding: 14px 16px;
+    border-radius: 12px;
+    background: #f7f9fc;
+  }
+  color: #fff;
+  gap: 12px;
+  display: flex;
+  flex-direction: column;
+  :deep(.ant-divider-horizontal) {
+    margin: 0;
+    margin-bottom: 12px;
+  }
+
+  :deep(.config-form-item-content) {
+    padding: 0;
+  }
+}
+
+.card-container-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/visDashboard/MetadataManagement/PropertyPie/PropertyPie.vue b/visDashboard/MetadataManagement/PropertyPie/PropertyPie.vue
new file mode 100644
index 0000000..a6a5718
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyPie/PropertyPie.vue
@@ -0,0 +1,545 @@
+<template>
+  <div
+    class="property-pie"
+    :style="style"
+  >
+    <div class="property-pie__header">
+      <div
+        class="property-pie__title"
+        :style="titleStyle"
+        :title="displayTitle"
+      >
+        {{ displayTitle }}
+      </div>
+      <!-- <div class="property-pie__badge">
+        latest
+      </div> -->
+    </div>
+
+    <div class="property-pie__content">
+      <div class="property-pie__chart">
+        <v-chart
+          :option="chartOption"
+          autoresize
+        />
+        <div class="property-pie__center">
+          <div
+            class="property-pie__center-label"
+            :style="totalLabelStyle"
+          >
+            {{ config.totalLabel || 'Total' }}
+          </div>
+          <div
+            class="property-pie__center-value"
+            :style="totalValueStyle"
+          >
+            {{ totalValue }}
+          </div>
+        </div>
+      </div>
+
+      <div class="property-pie__legend">
+        <div
+          v-for="item in displayItems"
+          :key="item.id"
+          class="property-pie__legend-item"
+        >
+          <div class="property-pie__legend-main">
+            <span
+              class="property-pie__legend-dot"
+              :style="{ backgroundColor: item.color }"
+            />
+            <span
+              class="property-pie__legend-name"
+              :title="item.name"
+            >
+              {{ item.name }}
+            </span>
+          </div>
+          <span class="property-pie__legend-value">
+            {{ item.displayValue }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { use } from 'echarts/core'
+import { PieChart } from 'echarts/charts'
+import { TooltipComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import VChart from 'vue-echarts'
+import { dashboard } from '@device-manager-ui/api/dashboard'
+import { detail } from '@device-manager-ui/api/instance'
+import { useInstanceStore } from '@device-manager-ui/store/instance'
+import { useProductStore } from '@device-manager-ui/store/product'
+import { wsClient } from '@jetlinks-web/core'
+import { debounce, throttle } from 'lodash-es'
+import { map } from 'rxjs/operators'
+
+use([CanvasRenderer, PieChart, TooltipComponent])
+
+defineOptions({
+  name: 'PropertyPie'
+})
+
+interface PropertyPieComponentConfig {
+  title?: string
+  titleColor?: string
+  titleFontSize?: number
+  totalLabel?: string
+  totalLabelColor?: string
+  totalLabelFontSize?: number
+  totalValueColor?: string
+  totalValueFontSize?: number
+  emptyColor?: string
+  ringWidth?: number
+  deviceId?: string
+  deviceName?: string
+  propertyIds?: string[]
+  propertyNames?: string[]
+}
+
+interface DashboardCardInfo {
+  id?: string
+  componentProps?: Record<string, unknown>
+}
+
+interface DisplayItem {
+  id: string
+  name: string
+  value: number
+  displayValue: string
+  color: string
+}
+
+const props = defineProps({
+  info: {
+    type: Object as PropType<DashboardCardInfo>,
+    default: () => ({})
+  },
+  style: {
+    type: Object as PropType<Record<string, unknown>>,
+    default: () => ({})
+  },
+  isEdit: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const route = useRoute()
+const instanceStore = useInstanceStore()
+const productStore = useProductStore()
+
+const runtimeProductId = ref('')
+const runtimeDeviceName = ref('')
+const metadataText = ref('')
+const propertyValue = ref<Record<string, any>>({})
+const dataSource = ref<Record<string, any>[]>([])
+const subRef = ref<any>()
+const messageCache = new Map<string, Record<string, any>>()
+
+const colors = ['#16a34a', '#ff5d6c', '#60a5fa', '#f59e0b', '#8b5cf6']
+
+const config = computed<PropertyPieComponentConfig>(() => {
+  return (props.info?.componentProps?.propertyPie as PropertyPieComponentConfig) || {}
+})
+
+const isProduct = computed(() => route.name === 'device/Product/Detail')
+const targetDeviceId = computed(() => String(config.value.deviceId || ''))
+const runtimeDeviceId = computed(() => (isProduct.value ? targetDeviceId.value : String(instanceStore.current.id || '')))
+const selectedPropertyIds = computed(() => (config.value.propertyIds || []).slice(0, 5).map((id) => String(id)))
+
+const propertyMap = computed(() => {
+  try {
+    const properties = JSON.parse(metadataText.value || '{}').properties || []
+    const mapData = new Map<string, Record<string, any>>()
+
+    properties.forEach((item: Record<string, any>) => {
+      mapData.set(String(item.id || ''), item)
+    })
+
+    return mapData
+  } catch (error) {
+    return new Map<string, Record<string, any>>()
+  }
+})
+
+const defaultItems = computed<DisplayItem[]>(() => [
+  { id: 'demo-1', name: 'Wind power', value: 0, displayValue: '--', color: colors[0] },
+  { id: 'demo-2', name: 'Solar power', value: 0, displayValue: '--', color: colors[1] }
+])
+
+const displayTitle = computed(() => {
+  const title = config.value.title || 'Doughnut'
+  const deviceName = config.value.deviceName || runtimeDeviceName.value
+  return deviceName ? `${deviceName}(${title})` : title
+})
+
+const titleStyle = computed(() => ({
+  color: config.value.titleColor || 'rgba(0, 0, 0, 0.88)',
+  fontSize: `${Number(config.value.titleFontSize || 16)}px`
+}))
+
+const totalLabelStyle = computed(() => ({
+  color: config.value.totalLabelColor || 'rgba(0, 0, 0, 0.45)',
+  fontSize: `${Number(config.value.totalLabelFontSize || 14)}px`
+}))
+
+const totalValueStyle = computed(() => ({
+  color: config.value.totalValueColor || 'rgba(0, 0, 0, 0.88)',
+  fontSize: `${Number(config.value.totalValueFontSize || 34)}px`
+}))
+
+const toNumber = (value: unknown) => {
+  const numberValue = Number(value)
+  return Number.isFinite(numberValue) ? numberValue : 0
+}
+
+const formatValue = (value: number) => {
+  if (!Number.isFinite(value)) return '--'
+  if (Number.isInteger(value)) return String(value)
+  return value.toFixed(2)
+}
+
+const displayItems = computed<DisplayItem[]>(() => {
+  if (!selectedPropertyIds.value.length) {
+    return defaultItems.value
+  }
+
+  return selectedPropertyIds.value.map((id, index) => {
+    const property = propertyMap.value.get(id)
+    const value = toNumber(propertyValue.value[id]?.value)
+    return {
+      id,
+      name: property?.name || config.value.propertyNames?.[index] || id,
+      value,
+      displayValue: formatValue(value),
+      color: colors[index % colors.length]
+    }
+  })
+})
+
+const totalValue = computed(() => {
+  const total = displayItems.value.reduce((sum, item) => sum + item.value, 0)
+  return formatValue(total)
+})
+
+const pieData = computed(() => {
+  const items = displayItems.value.filter((item) => item.value > 0)
+  if (!items.length) {
+    return [
+      {
+        value: 1,
+        name: 'empty',
+        itemStyle: {
+          color: config.value.emptyColor || '#d9d9d9'
+        }
+      }
+    ]
+  }
+
+  return displayItems.value.map((item) => ({
+    value: item.value <= 0 ? 0.0001 : item.value,
+    name: item.name,
+    itemStyle: {
+      color: item.color
+    }
+  }))
+})
+
+const chartOption = computed(() => {
+  const ringWidth = Number(config.value.ringWidth || 16)
+  const innerRadius = Math.max(0, 72 - ringWidth)
+
+  return {
+    animation: false,
+    tooltip: {
+      trigger: 'item',
+      appendToBody: true
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: [`${innerRadius}%`, '72%'],
+        center: ['50%', '50%'],
+        avoidLabelOverlap: false,
+        label: { show: false },
+        labelLine: { show: false },
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 4,
+          borderRadius: 10
+        },
+        roundCap: true,
+        data: pieData.value
+      }
+    ]
+  }
+})
+
+const valueChange = (arr: Record<string, any>[]) => {
+  ;(arr || [])
+    .sort((a: any, b: any) => a.timestamp - b.timestamp)
+    .forEach((item: any) => {
+      const property = item?.value?.property
+      if (property) {
+        propertyValue.value[property] = { ...item, ...item.value }
+      }
+    })
+}
+
+const throttleFn = throttle(() => {
+  const list = [...messageCache.values()]
+  valueChange(list)
+}, 500)
+
+const subscribeProperty = () => {
+  if (!runtimeDeviceId.value || !runtimeProductId.value || !dataSource.value.length) {
+    return
+  }
+
+  const propertyIds = dataSource.value.map((item) => item.id)
+  const id = `property-pie-${runtimeDeviceId.value}-${runtimeProductId.value}-${propertyIds.join('-')}`
+  const topic = `/dashboard/device/${runtimeProductId.value}/properties/realTime`
+
+  subRef.value = wsClient
+    .getWebSocket(id, topic, {
+      deviceId: runtimeDeviceId.value,
+      properties: propertyIds,
+      history: 1
+    })
+    ?.pipe(map((res: any) => res.payload))
+    .subscribe((payload: any) => {
+      if (payload?.value?.property) {
+        messageCache.set(payload.value.property, payload)
+        throttleFn()
+      }
+    })
+}
+
+const getDashboard = async () => {
+  if (!runtimeDeviceId.value || !runtimeProductId.value || !dataSource.value.length) {
+    subRef.value && subRef.value?.unsubscribe()
+    return
+  }
+
+  const response: Record<string, any> = await dashboard([
+    {
+      dashboard: 'device',
+      object: runtimeProductId.value,
+      measurement: 'properties',
+      dimension: 'history',
+      params: {
+        deviceId: runtimeDeviceId.value,
+        history: 1,
+        properties: dataSource.value.map((item) => item.id)
+      }
+    }
+  ])
+
+  if (response.status === 200) {
+    const latestMap: Record<string, any> = {}
+    ;(response.result || []).forEach((item: any) => {
+      const payload = item?.data || {}
+      const property = payload?.value?.property
+      if (!property) return
+
+      const existed = latestMap[property]
+      if (!existed || Number(payload.timestamp || 0) >= Number(existed.timestamp || 0)) {
+        latestMap[property] = {
+          timeString: payload.timeString,
+          timestamp: payload.timestamp,
+          ...payload.value
+        }
+      }
+    })
+
+    propertyValue.value = {
+      ...unref(propertyValue),
+      ...latestMap
+    }
+  }
+
+  subRef.value && subRef.value?.unsubscribe()
+  subscribeProperty()
+}
+
+const resolveMetadata = async () => {
+  if (!isProduct.value) {
+    metadataText.value = instanceStore.current.metadata || instanceStore.detail.metadata || ''
+    runtimeProductId.value = String(instanceStore.current.productId || instanceStore.detail.productId || '')
+    runtimeDeviceName.value = String(instanceStore.current.name || instanceStore.detail.name || '')
+    return
+  }
+
+  if (!targetDeviceId.value) {
+    metadataText.value = productStore.detail.metadata || ''
+    runtimeProductId.value = String(productStore.detail.id || '')
+    runtimeDeviceName.value = ''
+    return
+  }
+
+  const response = await detail(targetDeviceId.value, true)
+  metadataText.value = response.result?.metadata || ''
+  runtimeProductId.value = String(response.result?.productId || '')
+  runtimeDeviceName.value = String(response.result?.name || '')
+}
+
+const handleProperty = debounce(async () => {
+  subRef.value && subRef.value?.unsubscribe()
+  messageCache.clear()
+  propertyValue.value = {}
+
+  await resolveMetadata()
+
+  dataSource.value = selectedPropertyIds.value
+    .map((id) => propertyMap.value.get(id))
+    .filter(Boolean) as Record<string, any>[]
+
+  if (messageCache.size === 0) {
+    await getDashboard()
+  }
+}, 300)
+
+onUnmounted(() => {
+  handleProperty.cancel()
+  throttleFn.cancel()
+  subRef.value && subRef.value?.unsubscribe()
+})
+
+watch(
+  () => [props.info, targetDeviceId.value, runtimeDeviceId.value, selectedPropertyIds.value.join(',')],
+  () => {
+    handleProperty()
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<style scoped lang="less">
+.property-pie {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 14px;
+  background-color: #fff;
+  overflow: hidden;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+}
+
+.property-pie__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.property-pie__title {
+  min-width: 0;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.property-pie__badge {
+  flex-shrink: 0;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.06);
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.property-pie__content {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(140px, 1.2fr) minmax(120px, 1fr);
+  gap: 12px;
+  align-items: center;
+}
+
+.property-pie__chart {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 180px;
+}
+
+.property-pie__center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.property-pie__center-label {
+  line-height: 1.2;
+}
+
+.property-pie__center-value {
+  margin-top: 4px;
+  line-height: 1;
+  font-weight: 700;
+}
+
+.property-pie__legend {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+}
+
+.property-pie__legend-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 0;
+}
+
+.property-pie__legend-main {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.property-pie__legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.property-pie__legend-name {
+  min-width: 0;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.property-pie__legend-value {
+  flex-shrink: 0;
+  color: rgba(0, 0, 0, 0.88);
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1;
+}
+</style>
diff --git a/visDashboard/MetadataManagement/PropertyPie/config.ts b/visDashboard/MetadataManagement/PropertyPie/config.ts
new file mode 100644
index 0000000..8b17cee
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyPie/config.ts
@@ -0,0 +1,39 @@
+export const propertyPieConfig = {
+  name: '属性环形图',
+  type: 'propertyPie',
+  componentProps: {
+    style: {
+      independence: false,
+      gridLayout: {}
+    },
+    gridItem: {
+      x: 0,
+      y: 0,
+      w: 3,
+      h: 7,
+      // minW: 4,
+      // minH: 3
+    },
+    propertyPie: {
+      title: 'Doughnut',
+      titleColor: 'rgba(0, 0, 0, 0.88)',
+      titleFontSize: 16,
+      totalLabel: 'Total',
+      totalLabelColor: 'rgba(0, 0, 0, 0.45)',
+      totalLabelFontSize: 14,
+      totalValueColor: 'rgba(0, 0, 0, 0.88)',
+      totalValueFontSize: 34,
+      emptyColor: '#d9d9d9',
+      ringWidth: 16,
+      deviceId: '',
+      deviceName: '',
+      propertyIds: [],
+      propertyNames: []
+    }
+  },
+  dataSourceProps: [],
+  extraProps: {
+    type: 'device',
+    options: []
+  }
+}
diff --git a/visDashboard/MetadataManagement/PropertyPie/index.ts b/visDashboard/MetadataManagement/PropertyPie/index.ts
new file mode 100644
index 0000000..270d0e5
--- /dev/null
+++ b/visDashboard/MetadataManagement/PropertyPie/index.ts
@@ -0,0 +1,20 @@
+import { defineAsyncComponent } from 'vue'
+import { propertyPieConfig } from './config'
+
+const PropertyPie = {
+  name: 'propertyPie',
+  component: defineAsyncComponent(() => import('./PropertyPie.vue'))
+}
+
+const PropertyPieConfig = [
+  {
+    name: 'propertyPie',
+    component: defineAsyncComponent(() => import('./Config.vue'))
+  }
+]
+
+const PropertyPieConfigProps = {
+  ...propertyPieConfig
+}
+
+export { PropertyPie, PropertyPieConfig, PropertyPieConfigProps }
diff --git a/visDashboard/MetadataManagement/PropertyPie/propertyPie.png b/visDashboard/MetadataManagement/PropertyPie/propertyPie.png
new file mode 100644
index 0000000..bdf014a
Binary files /dev/null and b/visDashboard/MetadataManagement/PropertyPie/propertyPie.png differ
diff --git a/visDashboard/MetadataManagement/PropertyProgress/Config.vue b/visDashboard/MetadataManagement/PropertyProgress/Config.vue
index 9c4d5b6..26f59a6 100644
--- a/visDashboard/MetadataManagement/PropertyProgress/Config.vue
+++ b/visDashboard/MetadataManagement/PropertyProgress/Config.vue
@@ -1,5 +1,34 @@
 <template>
-  <div class="card-container">
+  <div class="card-container">    <div class="card-header">
+      <config-item
+      v-if="isProduct"
+      label="设备"
+    >
+      <a-select
+        v-model:value="config.deviceId"
+        :options="deviceOptions"
+        placeholder="请选择设备"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onDeviceChange"
+      />
+    </config-item>
+
+      <config-item label="属性">
+      <a-select
+        v-model:value="config.propertyId"
+        :options="typeOptions"
+        placeholder="请选择属性"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onTypeChange"
+      />
+    </config-item>
+    
+    </div>
+    <a-divider />
     <config-item label="标题样式">
       <div class="card-container-row">
         <ColorPicker
@@ -102,33 +131,6 @@
         @change="onChange"
       />
     </config-item>
-
-    <config-item
-      v-if="isProduct"
-      label="设备"
-    >
-      <a-select
-        v-model:value="config.deviceId"
-        :options="deviceOptions"
-        placeholder="请选择设备"
-        optionFilterProp="label"
-        style="width: 100%"
-        popupClassName="is-dark"
-        @change="onDeviceChange"
-      />
-    </config-item>
-
-    <config-item label="属性">
-      <a-select
-        v-model:value="config.propertyId"
-        :options="typeOptions"
-        placeholder="请选择属性"
-        optionFilterProp="label"
-        style="width: 100%"
-        popupClassName="is-dark"
-        @change="onTypeChange"
-      />
-    </config-item>
   </div>
 </template>
 
@@ -251,10 +253,25 @@ watch(
 
 <style lang="less" scoped>
 .card-container {
+  .card-header {
+    gap: 12px;
+    display: flex;
+    flex-direction: column;
+    padding: 14px 16px;
+    border-radius: 12px;
+    background: #f7f9fc;
+  }
   color: #fff;
   gap: 12px;
   display: flex;
   flex-direction: column;
+  :deep(.ant-divider-horizontal) {
+    margin: 0;
+    margin-bottom: 12px;
+  }
+   :deep(.config-form-item-content) {
+    padding: 0;
+  }
 }
 
 .card-container-row {
diff --git a/visDashboard/MetadataManagement/PropertyProgress/PropertyProgress.vue b/visDashboard/MetadataManagement/PropertyProgress/PropertyProgress.vue
index fac827c..1c605ab 100644
--- a/visDashboard/MetadataManagement/PropertyProgress/PropertyProgress.vue
+++ b/visDashboard/MetadataManagement/PropertyProgress/PropertyProgress.vue
@@ -169,7 +169,7 @@ const displayValue = computed(() => {
   if (value === undefined || value === null || value === '') {
     const fallback = config.value.value
     if (fallback === undefined || fallback === null || fallback === '') {
-      return 'N/A'
+      return '--'
     }
     return String(fallback)
   }
diff --git a/visDashboard/MetadataManagement/PropertyProgress/config.ts b/visDashboard/MetadataManagement/PropertyProgress/config.ts
index 8e749f5..5d58be7 100644
--- a/visDashboard/MetadataManagement/PropertyProgress/config.ts
+++ b/visDashboard/MetadataManagement/PropertyProgress/config.ts
@@ -18,7 +18,7 @@ export const propertyProgressConfig = {
       title: '',
       titleColor: 'rgba(0, 0, 0, 0.88)',
       titleFontSize: 16,
-      value: 'N/A',
+      value: '',
       valueColor: 'rgba(0, 0, 0, 0.88)',
       valueFontSize: 24,
       unit: '',
diff --git a/visDashboard/MetadataManagement/PropertyProgress/propertyProgress.png b/visDashboard/MetadataManagement/PropertyProgress/propertyProgress.png
new file mode 100644
index 0000000..1dc8671
Binary files /dev/null and b/visDashboard/MetadataManagement/PropertyProgress/propertyProgress.png differ
diff --git a/visDashboard/MetadataManagement/PropertyShowCard/propertyShowCard.png b/visDashboard/MetadataManagement/PropertyShowCard/propertyShowCard.png
new file mode 100644
index 0000000..ce6c098
Binary files /dev/null and b/visDashboard/MetadataManagement/PropertyShowCard/propertyShowCard.png differ
diff --git a/visDashboard/MetadataManagement/PropertySignal/Config.vue b/visDashboard/MetadataManagement/PropertySignal/Config.vue
index f1fd259..f13663b 100644
--- a/visDashboard/MetadataManagement/PropertySignal/Config.vue
+++ b/visDashboard/MetadataManagement/PropertySignal/Config.vue
@@ -1,5 +1,34 @@
 <template>
-  <div class="card-container">
+  <div class="card-container">    <div class="card-header">
+      <config-item
+      v-if="isProduct"
+      label="设备"
+    >
+      <a-select
+        v-model:value="config.deviceId"
+        :options="deviceOptions"
+        placeholder="请选择设备"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onDeviceChange"
+      />
+    </config-item>
+
+      <config-item label="属性">
+      <a-select
+        v-model:value="config.propertyId"
+        :options="typeOptions"
+        placeholder="请选择属性"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onTypeChange"
+      />
+    </config-item>
+    
+    </div>
+    <a-divider />
     <config-item label="标题样式">
       <div class="card-container-row">
         <ColorPicker
@@ -113,33 +142,6 @@
         @change="onChange"
       />
     </config-item>
-
-    <config-item
-      v-if="isProduct"
-      label="设备"
-    >
-      <a-select
-        v-model:value="config.deviceId"
-        :options="deviceOptions"
-        placeholder="请选择设备"
-        optionFilterProp="label"
-        style="width: 100%"
-        popupClassName="is-dark"
-        @change="onDeviceChange"
-      />
-    </config-item>
-
-    <config-item label="属性">
-      <a-select
-        v-model:value="config.propertyId"
-        :options="typeOptions"
-        placeholder="请选择属性"
-        optionFilterProp="label"
-        style="width: 100%"
-        popupClassName="is-dark"
-        @change="onTypeChange"
-      />
-    </config-item>
   </div>
 </template>
 
@@ -262,10 +264,25 @@ watch(
 
 <style lang="less" scoped>
 .card-container {
+  .card-header {
+    gap: 12px;
+    display: flex;
+    flex-direction: column;
+    padding: 14px 16px;
+    border-radius: 12px;
+    background: #f7f9fc;
+  }
   color: #fff;
   gap: 12px;
   display: flex;
   flex-direction: column;
+  :deep(.ant-divider-horizontal) {
+    margin: 0;
+    margin-bottom: 12px;
+  }
+   :deep(.config-form-item-content) {
+    padding: 0;
+  }
 }
 
 .card-container-row {
diff --git a/visDashboard/MetadataManagement/PropertySignal/PropertySignal.vue b/visDashboard/MetadataManagement/PropertySignal/PropertySignal.vue
index ab87e36..543ce46 100644
--- a/visDashboard/MetadataManagement/PropertySignal/PropertySignal.vue
+++ b/visDashboard/MetadataManagement/PropertySignal/PropertySignal.vue
@@ -159,7 +159,7 @@ const displayValue = computed(() => {
   if (value === undefined || value === null || value === '') {
     const fallback = config.value.value
     if (fallback === undefined || fallback === null || fallback === '') {
-      return 'N/A'
+      return '--'
     }
     return String(fallback)
   }
diff --git a/visDashboard/MetadataManagement/PropertySignal/config.ts b/visDashboard/MetadataManagement/PropertySignal/config.ts
index 1a41d5f..9af4c1a 100644
--- a/visDashboard/MetadataManagement/PropertySignal/config.ts
+++ b/visDashboard/MetadataManagement/PropertySignal/config.ts
@@ -17,7 +17,7 @@ export const propertySignalConfig = {
     propertySignal: {
       titleColor: 'rgba(0, 0, 0, 0.88)',
       titleFontSize: 16,
-      value: 'N/A',
+      value: '',
       valueColor: 'rgba(0, 0, 0, 0.88)',
       valueFontSize: 28,
       unit: '%',
diff --git a/visDashboard/MetadataManagement/PropertySignal/propertySignal.png b/visDashboard/MetadataManagement/PropertySignal/propertySignal.png
new file mode 100644
index 0000000..88befe1
Binary files /dev/null and b/visDashboard/MetadataManagement/PropertySignal/propertySignal.png differ
diff --git a/visDashboard/MetadataManagement/PropertySlider/Config.vue b/visDashboard/MetadataManagement/PropertySlider/Config.vue
index bbed66a..3fc40e1 100644
--- a/visDashboard/MetadataManagement/PropertySlider/Config.vue
+++ b/visDashboard/MetadataManagement/PropertySlider/Config.vue
@@ -1,5 +1,58 @@
-<template>
-  <div class="card-container">
+<template>
+  <div class="card-container">    <div class="card-header">
+      <config-item
+      v-if="isProduct"
+      label="设备"
+    >
+      <a-select
+        v-model:value="config.deviceId"
+        :options="deviceOptions"
+        placeholder="请选择设备"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onDeviceChange"
+      />
+    </config-item>
+
+      <config-item label="属性">
+      <a-select
+        v-model:value="config.propertyId"
+        :options="typeOptions"
+        placeholder="请选择属性"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onTypeChange"
+      />
+    </config-item>
+
+      <config-item label="功能">
+      <a-select
+        v-model:value="config.functionId"
+        :options="_functionOptions"
+        placeholder="请选择功能"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onFunctionChange"
+      />
+    </config-item>
+
+      <config-item label="参数" v-if="config.functionId">
+      <a-select
+        v-model:value="config.paramId"
+        :options="_paramsOptions"
+        placeholder="请选择参数(数值类型)"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onChange"
+      />
+    </config-item>
+    
+    </div>
+    <a-divider />
     <config-item label="标题样式">
       <div class="card-container-row">
         <ColorPicker
@@ -111,55 +164,6 @@
         @change="onChange"
       />
     </config-item>
-
-    <config-item
-      v-if="isProduct"
-      label="设备"
-    >
-      <a-select
-        v-model:value="config.deviceId"
-        :options="deviceOptions"
-        placeholder="请选择设备"
-        optionFilterProp="label"
-        style="width: 100%"
-        popupClassName="is-dark"
-        @change="onDeviceChange"
-      />
-    </config-item>
-
-    <config-item label="属性">
-      <a-select
-        v-model:value="config.propertyId"
-        :options="typeOptions"
-        placeholder="请选择属性"
-        optionFilterProp="label"
-        style="width: 100%"
-        popupClassName="is-dark"
-        @change="onTypeChange"
-      />
-    </config-item>
-    <config-item label="功能">
-      <a-select
-        v-model:value="config.functionId"
-        :options="_functionOptions"
-        placeholder="请选择功能"
-        optionFilterProp="label"
-        style="width: 100%"
-        popupClassName="is-dark"
-        @change="onFunctionChange"
-      />
-    </config-item>
-    <config-item label="参数" v-if="config.functionId">
-      <a-select
-        v-model:value="config.paramId"
-        :options="_paramsOptions"
-        placeholder="请选择参数(数值类型)"
-        optionFilterProp="label"
-        style="width: 100%"
-        popupClassName="is-dark"
-        @change="onChange"
-      />
-    </config-item>
   </div>
 </template>
 
@@ -328,10 +332,25 @@ watch(
 
 <style lang="less" scoped>
 .card-container {
+  .card-header {
+    gap: 12px;
+    display: flex;
+    flex-direction: column;
+    padding: 14px 16px;
+    border-radius: 12px;
+    background: #f7f9fc;
+  }
   color: #fff;
   gap: 12px;
   display: flex;
   flex-direction: column;
+  :deep(.ant-divider-horizontal) {
+    margin: 0;
+    margin-bottom: 12px;
+  }
+   :deep(.config-form-item-content) {
+    padding: 0;
+  }
 }
 
 .card-container-row {
diff --git a/visDashboard/MetadataManagement/PropertySlider/PropertySlider.vue b/visDashboard/MetadataManagement/PropertySlider/PropertySlider.vue
index dd77681..4b13de4 100644
--- a/visDashboard/MetadataManagement/PropertySlider/PropertySlider.vue
+++ b/visDashboard/MetadataManagement/PropertySlider/PropertySlider.vue
@@ -194,7 +194,7 @@ watch(numericValue, (val) => {
 
 const sliderDisplayValue = computed(() => {
   const val = sliderValue.value
-  if (val === undefined || val === null) return 'N/A'
+  if (val === undefined || val === null) return '--'
   return `${Math.round(Number(val))}`
 })
 
diff --git a/visDashboard/MetadataManagement/PropertySlider/propertySlider.png b/visDashboard/MetadataManagement/PropertySlider/propertySlider.png
new file mode 100644
index 0000000..61abc59
Binary files /dev/null and b/visDashboard/MetadataManagement/PropertySlider/propertySlider.png differ
diff --git a/visDashboard/MetadataManagement/PropertySwitch/Config.vue b/visDashboard/MetadataManagement/PropertySwitch/Config.vue
index 1a5af75..c372eca 100644
--- a/visDashboard/MetadataManagement/PropertySwitch/Config.vue
+++ b/visDashboard/MetadataManagement/PropertySwitch/Config.vue
@@ -1,5 +1,61 @@
 <template>
-  <div class="card-container">
+  <div class="card-container">    <div class="card-header">
+      <config-item
+      v-if="isProduct"
+      label="设备"
+    >
+      <a-select
+        v-model:value="config.deviceId"
+        :options="deviceOptions"
+        placeholder="请选择设备"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onDeviceChange"
+      />
+    </config-item>
+
+      <config-item label="属性">
+      <a-select
+        v-model:value="config.propertyId"
+        :options="typeOptions"
+        placeholder="请选择属性"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onTypeChange"
+      />
+    </config-item>
+
+      <config-item label="功能">
+      <a-select
+        v-model:value="config.functionId"
+        :options="functionOptions"
+        placeholder="请选择功能"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onFunctionChange"
+      />
+    </config-item>
+
+      <config-item
+      label="参数"
+      v-if="config.functionId"
+    >
+      <a-select
+        v-model:value="config.paramId"
+        :options="paramOptions"
+        placeholder="请选择参数(Boolean)"
+        optionFilterProp="label"
+        style="width: 100%"
+        popupClassName="is-dark"
+        @change="onChange"
+      />
+    </config-item>
+    
+    </div>
+    <a-divider />
     <config-item label="标题样式">
       <div class="card-container-row">
         <ColorPicker
@@ -73,60 +129,6 @@
         @change="onChange"
       />
     </config-item>
-
-    <config-item
-      v-if="isProduct"
-      label="设备"
-    >
-      <a-select
-        v-model:value="config.deviceId"
-        :options="deviceOptions"
-        placeholder="请选择设备"
-        optionFilterProp="label"
-        style="width: 100%"
-        popupClassName="is-dark"
-        @change="onDeviceChange"
-      />
-    </config-item>
-
-    <config-item label="属性">
-      <a-select
-        v-model:value="config.propertyId"
-        :options="typeOptions"
-        placeholder="请选择属性"
-        optionFilterProp="label"
-        style="width: 100%"
-        popupClassName="is-dark"
-        @change="onTypeChange"
-      />
-    </config-item>
-
-    <config-item label="功能">
-      <a-select
-        v-model:value="config.functionId"
-        :options="functionOptions"
-        placeholder="请选择功能"
-        optionFilterProp="label"
-        style="width: 100%"
-        popupClassName="is-dark"
-        @change="onFunctionChange"
-      />
-    </config-item>
-
-    <config-item
-      label="参数"
-      v-if="config.functionId"
-    >
-      <a-select
-        v-model:value="config.paramId"
-        :options="paramOptions"
-        placeholder="请选择参数(Boolean)"
-        optionFilterProp="label"
-        style="width: 100%"
-        popupClassName="is-dark"
-        @change="onChange"
-      />
-    </config-item>
   </div>
 </template>
 
@@ -189,7 +191,7 @@ const typeOptions = computed(() => {
     } else {
       properties = strToJson(instanceStore.current.metadata || instanceStore.detail.metadata)
     }
-
+    console.log('properties', properties)
     return properties.map((item: any) => ({
       ...item,
       label: item.name,
@@ -296,6 +298,14 @@ watch(
 
 <style lang="less" scoped>
 .card-container {
+  .card-header {
+    gap: 12px;
+    display: flex;
+    flex-direction: column;
+    padding: 14px 16px;
+    border-radius: 12px;
+    background: #f7f9fc;
+  }
   color: #fff;
   gap: 12px;
   display: flex;
diff --git a/visDashboard/MetadataManagement/PropertySwitch/propertySwitch.png b/visDashboard/MetadataManagement/PropertySwitch/propertySwitch.png
new file mode 100644
index 0000000..6ccf55b
Binary files /dev/null and b/visDashboard/MetadataManagement/PropertySwitch/propertySwitch.png differ