style: 字典类型数据结构体变更

src/components/DictTag/index.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, PropType } from 'vue';
 const props = defineProps({
   /**数据 */
   options: {
-    type: Array,
+    type: Array as PropType<DictType[]>,
   },
   /**当前的值对应数据中的项字段 */
   valueField: {
-    type: String,
+    type: String as PropType<keyof DictType>,
     default: 'value',
   },
   /**当前的值 */
@@ -16,7 +16,7 @@ const props = defineProps({
     default: '',
   },
   /**数据默认值，当前值不存在时 */
-  valueOption: {
+  valueDefault: {
     type: [Number, String],
   },
 });
@@ -24,13 +24,13 @@ const props = defineProps({
 /**遍历找到对应值数据项 */
 const item = computed(() => {
   if (Array.isArray(props.options) && props.options.length > 0) {
-    let option = (props.options as any[]).find(
+    let option = props.options.find(
       item => `${item[props.valueField]}` === `${props.value}`
     );
     // 数据默认值
-    if (props.valueOption != undefined && !option) {
+    if (!option && props.valueDefault != undefined) {
-      option = (props.options as any[]).find(
+      option = props.options.find(
-        item => `${item[props.valueField]}` === `${props.valueOption }`
+        item => `${item[props.valueField]}` === `${props.valueDefault}`
       );
     }
     return option;
@@ -41,14 +41,10 @@ const item = computed(() => {
 
 <template>
   <template v-if="item">
-    <a-tag
+    <a-tag v-if="item.tagType" :class="item.tagClass" :color="item.tagType">
-      v-if="item.elTagType"
-      :class="item.elTagClass"
-      :color="item.elTagType"
-    >
       {{ item.label }}
     </a-tag>
-    <span v-else :class="item.elTagClass">
+    <span v-else :class="item.tagClass">
       {{ item.label }}
     </span>
   </template>

src/store/modules/dict.ts

@@ -32,8 +32,8 @@ const useDictStore = defineStore('dict', {
         {
           label: data.dictLabel,
           value: data.dictValue,
-          elTagType: data.tagType,
+          tagType: data.tagType,
-          elTagClass: data.tagClass,
+          tagClass: data.tagClass,
         },
       ];
     },
@@ -47,8 +47,8 @@ const useDictStore = defineStore('dict', {
           const dictData: DictType[] = res.data.map(d => ({
             label: d.dictLabel,
             value: d.dictValue,
-            elTagType: d.tagType,
+            tagType: d.tagType,
-            elTagClass: d.tagClass,
+            tagClass: d.tagClass,
           }));
           this.dicts.set(key, dictData);
           disct = dictData;

src/typings/dict.d.ts

@@ -2,6 +2,6 @@
 type DictType = {
   label: string;
   value: string;
-  elTagType: string;
+  tagType?: string;
-  elTagClass: string;
+  tagClass?: string;
 };

src/views/index.vue

@@ -38,12 +38,12 @@ const statusBarChart = ref<any>(null);
 
 /**网元状态字典数据 */
 let indexColor = ref<DictType[]>([
-  { label: 'Normal', value: 'normal', elTagType: '', elTagClass: '#91cc75' },
+  { label: 'Normal', value: 'normal', tagType: '', tagClass: '#91cc75' },
   {
     label: 'Abnormal',
     value: 'abnormal',
-    elTagType: '',
+    tagType: '',
-    elTagClass: '#ee6666',
+    tagClass: '#ee6666',
   },
 ]);
 
@@ -197,7 +197,7 @@ function fnGetList(one: boolean) {
         orient: 'vertical',
         left: 'left',
       },
-      color: indexColor.value.map(item => item.elTagClass),
+      color: indexColor.value.map(item => item.tagType),
       series: [
         {
           name: t('views.index.realNeStatus'),
@@ -410,10 +410,7 @@ onBeforeUnmount(() => {
       </a-col>
       <a-col :lg="10" :md="8" :xs="24">
         <a-card :title="t('views.index.runStatus')" style="margin-bottom: 16px">
-          <div
+          <div style="width: 100%; min-height: 200px" ref="statusBar"></div>
-            style="width: 100%; min-height: 200px"
-            ref="statusBar"
-          ></div>
         </a-card>
         <a-card :title="t('views.index.mark')" style="margin-top: 16px">
           <a-descriptions