添加单位

src/components/custom-components/kv-vue/index.vue

@@ -1,5 +1,9 @@
 <template>
   <table class="w-1/1 h-1/1 kvTable">
+    <colgroup>
+      <col class="kvKeyCol" />
+      <col class="kvValueCol" />
+    </colgroup>
     <tbody>
       <tr>
         <td class="kvKey kvKeyValue" colspan="1">{{ props.label }}</td>
@@ -48,23 +52,31 @@ const props = defineProps({
   }
 })
 </script>
-<style scroped>
+<style scoped>
 .kvTable {
   border: v-bind('`${props.border?1:0}px solid ${props.borderColor}`');
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+
+.kvKeyCol {
+  width: v-bind('`${props.labelWidth}px`');
+}
+
+.kvValueCol {
+  width: v-bind('`${props.valueWidth}px`');
 }
 
 .kvKeyValue {
   font-family: v-bind('`${props.fontFamily}`');
   font-size: v-bind('`${props.fontSize}px`');
   color: v-bind('`${props.color}`');
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .kvKey {
-  width: v-bind('`${props.labelWidth}px`');
   border-right: v-bind('`${props.border?1:0}px`') solid v-bind('`${props.borderColor}`') !important;
 }
-
-.kvValue {
-  width: v-bind('`${props.valueWidth}px`');
-}
 </style>

src/views/maotu/preview.vue

@@ -24,6 +24,7 @@ const getProjectId = () => {
 type DevicePointData = {
   identifier?: string
   value?: unknown
+  unit?: string
 }
 
 const setPreviewData = async (dataModel: unknown) => {
@@ -37,7 +38,11 @@ const setPreviewData = async (dataModel: unknown) => {
 }
 
 const getDeviceBindItems = () => {
-  return (previewData.value?.json || []).flatMap((item) =>
+  const previewItems = previewData.value?.pages?.length
+    ? previewData.value.pages.flatMap((page) => page.json)
+    : previewData.value?.json || []
+
+  return previewItems.flatMap((item) =>
     (item.deviceBinds || [])
       .filter((bind) => bind.deviceId && bind.deviceProp && bind.nodeProp)
       .map((bind) => ({
@@ -49,6 +54,13 @@ const getDeviceBindItems = () => {
   )
 }
 
+const formatDevicePointValue = (item: DevicePointData) => {
+  if (!item.unit) {
+    return item.value
+  }
+  return `${item.value ?? ''} ${item.unit}`
+}
+
 const refreshDeviceBindValues = async () => {
   if (polling.value) {
     return
@@ -72,7 +84,7 @@ const refreshDeviceBindValues = async () => {
     deviceDataList.forEach(({ deviceId, data }) => {
       data.forEach((item) => {
         if (item.identifier) {
-          valueMap.set(`${deviceId}:${item.identifier}`, item.value)
+          valueMap.set(`${deviceId}:${item.identifier}`, formatDevicePointValue(item))
         }
       })
     })