feat(tag、monitoring): show precision and decimal

emqx · Nov 21, 2022 · 0a5ba88 · 0a5ba88
1 parent 0b6f916
commit 0a5ba88
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 13 deletions.
diff --git a/src/composables/config/useAddTag.ts b/src/composables/config/useAddTag.ts
@@ -89,6 +89,37 @@ export const useTagAttributeTypeSelect = () => {
   }
 }
 
+export const useTagPrecision = () => {
+  const isShowPrecisionField = computed(() => (type: number | null) => {
+    if (type === null || type === undefined) return false
+
+    const whiteList = [9, 10] // FLOAT | DOUBLE
+    const res: boolean = whiteList.includes(type)
+    return res
+  })
+  const tagPrecisionValue = computed(() => (type: number, value: number) => {
+    if (!isShowPrecisionField.value(type)) {
+      return '-'
+    }
+    return value
+  })
+  return {
+    isShowPrecisionField,
+    tagPrecisionValue,
+  }
+}
+export const useTagDecimal = () => {
+  const tagDecimalValue = computed(() => (value: number) => {
+    if (!value) {
+      return '-'
+    }
+    return value
+  })
+  return {
+    tagDecimalValue,
+  }
+}
+
 interface TagFormItem extends TagForm {
   id: string
 }

diff --git a/src/views/config/southDriver/Tag.vue b/src/views/config/southDriver/Tag.vue
@@ -46,9 +46,15 @@
         <emqx-table-column :label="$t('common.type')">
           <template #default="{ row }">{{ findTagTypeLabelByValue(row.type) }}</template>
         </emqx-table-column>
-        <emqx-table-column label="RW">
+        <emqx-table-column :label="$t('common.attribute')">
           <template #default="{ row }">{{ getAttrStrByValue(row.attribute) }}</template>
         </emqx-table-column>
+        <emqx-table-column :label="$t('config.decimal')">
+          <template #default="{ row }">{{ tagDecimalValue(row.decimal) }}</template>
+        </emqx-table-column>
+        <emqx-table-column :label="$t('config.precision')">
+          <template #default="{ row }">{{ tagPrecisionValue(row.type, row.precision) }}</template>
+        </emqx-table-column>
         <emqx-table-column :label="$t('config.desc')" prop="description" />
 
         <emqx-table-column align="left" :label="$t('common.oper')" width="140px">
@@ -81,7 +87,12 @@
 </template>
 
 <script lang="ts" setup>
-import { useTagAttributeTypeSelect, useTagTypeSelect } from '@/composables/config/useAddTag'
+import {
+  useTagAttributeTypeSelect,
+  useTagTypeSelect,
+  useTagPrecision,
+  useTagDecimal,
+} from '@/composables/config/useAddTag'
 import EditTagDialog from './components/EditTagDialog.vue'
 import useTagList from '@/composables/config/useTagList'
 import { useRouter } from 'vue-router'
@@ -110,6 +121,8 @@ const {
   queryKeyword,
   dbGetTagList,
 } = useTagList()
+const { tagPrecisionValue } = useTagPrecision()
+const { tagDecimalValue } = useTagDecimal()
 const { findLabelByValue: findTagTypeLabelByValue } = useTagTypeSelect()
 const { getAttrStrByValue } = useTagAttributeTypeSelect()
 

diff --git a/src/views/config/southDriver/components/TagForm.vue b/src/views/config/southDriver/components/TagForm.vue
@@ -53,7 +53,7 @@
 <script lang="ts" setup>
 import type { PropType, WritableComputedRef } from 'vue'
 import { ref, defineExpose, computed, defineProps, defineEmits } from 'vue'
-import { useTagTypeSelect } from '@/composables/config/useAddTag'
+import { useTagTypeSelect, useTagPrecision } from '@/composables/config/useAddTag'
 import TagAttributeSelect from './TagAttributeSelect.vue'
 import type { PluginInfo, TagForm, TagRegex } from '@/types/config'
 import { useI18n } from 'vue-i18n'
@@ -106,6 +106,8 @@ const form: WritableComputedRef<TagForm> = computed({
   },
 })
 
+const { isShowPrecisionField } = useTagPrecision()
+
 // valid address: valid address by type
 const validAddress = (rule: any, value: string, callback: any) => {
   const cuurentType = form.value.type
@@ -127,14 +129,6 @@ const validAddress = (rule: any, value: string, callback: any) => {
   }
 }
 
-const isShowPrecisionField = computed(() => (type: number | null) => {
-  if (type === null || type === undefined) return false
-
-  const whiteList = [9, 10] // FLOAT | DOUBLE
-  const res: boolean = whiteList.includes(type)
-  return res
-})
-
 const rules = {
   name: [{ required: true, message: t('config.tagNameRequired') }],
   address: [

diff --git a/src/views/monitoring/DataMonitoring.vue b/src/views/monitoring/DataMonitoring.vue
@@ -43,6 +43,12 @@
         <emqx-table-column :label="$t('common.type')" width="90">
           <template #default="{ row }">{{ findTagTypeLabelByValue(row.type) }}</template>
         </emqx-table-column>
+        <emqx-table-column :label="$t('config.decimal')">
+          <template #default="{ row }">{{ tagDecimalValue(row.decimal) }}</template>
+        </emqx-table-column>
+        <emqx-table-column :label="$t('config.precision')">
+          <template #default="{ row }">{{ tagPrecisionValue(row.type, row.precision) }}</template>
+        </emqx-table-column>
         <emqx-table-column prop="valueToShow" min-width="100">
           <template #header>
             <div class="value-column-hd">
@@ -99,10 +105,10 @@ import { ref } from 'vue'
 import { ElPopover } from 'element-plus'
 import type { TagDataInTable } from '@/composables/data/useDataMonitoring'
 import useDataMonitoring from '@/composables/data/useDataMonitoring'
+import { useTagTypeSelect, useTagPrecision, useTagDecimal } from '@/composables/config/useAddTag'
 import dateformat from 'dateformat'
-import WriteDialog from './components/WriteDialog.vue'
 import { getErrorMsg } from '@/utils/utils'
-import { useTagTypeSelect } from '@/composables/config/useAddTag'
+import WriteDialog from './components/WriteDialog.vue'
 import ViewHeaderBar from '@/components/ViewHeaderBar.vue'
 
 const {
@@ -132,6 +138,8 @@ const writeData = (item: TagDataInTable) => {
   currentTag.value = item
   showWriteDialog.value = true
 }
+const { tagPrecisionValue } = useTagPrecision()
+const { tagDecimalValue } = useTagDecimal()
 </script>
 
 <style lang="scss">