From 026f17ebafb85250d9ae9b71b80ae5f07341c172 Mon Sep 17 00:00:00 2001
From: feiyu02 <risaku@163.com>
Date: 星期四, 15 五月 2025 16:33:12 +0800
Subject: [PATCH] 动态溯源功能初步完成

---
 src/components/monitor/FactorCheckbox.vue |   83 ++++++++++++++++++++++++++++++++++-------
 1 files changed, 68 insertions(+), 15 deletions(-)

diff --git a/src/components/monitor/FactorCheckbox.vue b/src/components/monitor/FactorCheckbox.vue
index 43c1b93..093920a 100644
--- a/src/components/monitor/FactorCheckbox.vue
+++ b/src/components/monitor/FactorCheckbox.vue
@@ -1,17 +1,20 @@
 <template>
-  <BaseCard direction="top-left" borderless="t">
+  <BaseCard :direction="direction" :borderless="borderlessDirection">
     <template #content>
       <el-checkbox-group
-        v-model="checkbox"
+        :model-value="modelValue"
         size="default"
-        @change="handleChange"
+        :min="1"
+        @update:model-value="handleChange"
       >
-        <el-checkbox
-          v-for="(item, i) in options"
-          :key="i"
-          :value="item.value"
-          >{{ item.label }}</el-checkbox
-        >
+        <div :class="vertical ? 'vertical-class' : ''">
+          <el-checkbox
+            v-for="item in options"
+            :key="item.label"
+            :value="item.value"
+            >{{ item.label }}</el-checkbox
+          >
+        </div>
       </el-checkbox-group>
     </template>
   </BaseCard>
@@ -24,17 +27,43 @@
 
 export default {
   props: {
+    // 澶嶉�夋鍊�
+    modelValue: Array,
     deviceType: {
       type: String,
       // type0: 杞﹁浇鎴栨棤浜烘満; type1:鏃犱汉鑸�
       default: TYPE0
+    },
+    /**
+     *
+     * 鏍峰紡鏈濆悜
+     * top-left | left
+     */
+    direction: {
+      type: String,
+      default: 'top-left'
+    },
+    /**
+     * 鏃犺竟妗嗙殑鏂瑰悜
+     * t | r
+     */
+    borderlessDirection: {
+      type: String,
+      default: 't'
+    },
+    /**
+     * 鍐呭鏄惁鍨傜洿鎺掑竷
+     */
+    vertical: Boolean,
+    // 榛樿閫変腑鐨勪釜鏁帮紙浠庣涓�涓�夐」寮�濮嬶級
+    defaultNum: {
+      type: Number,
+      default: 1
     }
   },
-  emits: ['change'],
+  emits: ['update:modelValue'],
   data() {
-    return {
-      checkbox: [checkboxOptions(TYPE0)[0].value]
-    };
+    return {};
   },
   computed: {
     options() {
@@ -44,13 +73,19 @@
   watch: {
     deviceType(nV, oV) {
       if (nV != oV) {
-        this.checkbox = this.options[0].value;
+        const res = [];
+        const array = checkboxOptions(nV);
+        for (let i = 0; i < this.defaultNum; i++) {
+          const e = array[i];
+          res.push(e.value);
+        }
+        this.handleChange(res);
       }
     }
   },
   methods: {
     handleChange(value) {
-      this.$emit('change', value);
+      this.$emit('update:modelValue', value);
     }
   }
 };
@@ -58,7 +93,25 @@
 <style scoped>
 .el-checkbox {
   --el-checkbox-text-color: white;
+  --main-color: #23dad1;
+  --el-checkbox-checked-text-color: var(--main-color);
+  --el-checkbox-checked-input-border-color: var(--main-color);
+  --el-checkbox-checked-bg-color: var(--main-color);
+  --el-checkbox-input-border-color-hover: var(--main-color);
+
+  --el-checkbox-disabled-checked-input-fill: var(--main-color);
+  --el-checkbox-disabled-checked-input-border-color: var(--main-color);
+  --el-checkbox-disabled-checked-icon-color: white;
   margin-right: 6px;
   /* height: initial; */
 }
+
+.el-checkbox__input.is-disabled + span.el-checkbox__label {
+  color: var(--el-color-primary);
+}
+
+.vertical-class {
+  display: flex;
+  flex-direction: column;
+}
 </style>

--
Gitblit v1.9.3