From 8b3339974775ea05f9cc5b55892c740bf987abc3 Mon Sep 17 00:00:00 2001
From: donghao <donghao@supervision.ltd>
Date: Tue, 16 Jan 2024 15:58:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B1=95=E5=BC=80=E6=A0=91=E5=88=9D?=
 =?UTF-8?q?=E5=A7=8B=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.js                                  | 119 +++++++++++++-
 index.html                                    |  11 +-
 public/serverConfig.json                      |   2 +-
 src/assets/svg/icons/treeNodeLine.svg         |   4 +
 src/assets/svg/icons/treeNodeLineSelected.svg |   4 +
 src/components/CustomTree/index.ts            |   4 +-
 .../CustomTree/src/collapseTree.tsx           | 146 ++++++++++++++++--
 .../CustomTree/src/collapseTreeItem           |   0
 .../CustomTree/src/collapseTreeItem.tsx       |  48 ++++++
 .../CustomTree/src/collapseTreeStyle.scss     |  95 ++++++++++++
 src/style/index.scss                          |   1 +
 src/style/transition.scss                     |  39 +++++
 src/style/vars.scss                           |   4 +
 src/views/demo/leftTree.vue                   |  15 +-
 src/views/device/components/TreeCard.vue      |   8 +-
 15 files changed, 467 insertions(+), 33 deletions(-)
 create mode 100644 src/assets/svg/icons/treeNodeLine.svg
 create mode 100644 src/assets/svg/icons/treeNodeLineSelected.svg
 delete mode 100644 src/components/CustomTree/src/collapseTreeItem
 create mode 100644 src/components/CustomTree/src/collapseTreeItem.tsx
 create mode 100644 src/components/CustomTree/src/collapseTreeStyle.scss
 create mode 100644 src/style/vars.scss

diff --git a/.eslintrc.js b/.eslintrc.js
index 93900cb..009f5bc 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,3 +1,120 @@
 module.exports = {
-  // root: true
+  root: true,
+  env: {
+    node: true
+  },
+  globals: {
+    // Ref sugar (take 2)
+    $: "readonly",
+    $$: "readonly",
+    $ref: "readonly",
+    $shallowRef: "readonly",
+    $computed: "readonly",
+
+    // index.d.ts
+    // global.d.ts
+    Fn: "readonly",
+    PromiseFn: "readonly",
+    RefType: "readonly",
+    LabelValueOptions: "readonly",
+    EmitType: "readonly",
+    TargetContext: "readonly",
+    ComponentElRef: "readonly",
+    ComponentRef: "readonly",
+    ElRef: "readonly",
+    global: "readonly",
+    ForDataType: "readonly",
+    ComponentRoutes: "readonly",
+
+    // script setup
+    defineProps: "readonly",
+    defineEmits: "readonly",
+    defineExpose: "readonly",
+    withDefaults: "readonly"
+  },
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/typescript/recommended",
+    "@vue/prettier",
+    "@vue/eslint-config-typescript"
+  ],
+  parser: "vue-eslint-parser",
+  parserOptions: {
+    parser: "@typescript-eslint/parser",
+    ecmaVersion: 2020,
+    sourceType: "module",
+    jsxPragma: "React",
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  overrides: [
+    {
+      files: ["*.ts", "*.vue"],
+      rules: {
+        "no-undef": "off"
+      }
+    },
+    {
+      files: ["*.vue"],
+      parser: "vue-eslint-parser",
+      parserOptions: {
+        parser: "@typescript-eslint/parser",
+        extraFileExtensions: [".vue"],
+        ecmaVersion: "latest",
+        ecmaFeatures: {
+          jsx: true
+        }
+      },
+      rules: {
+        "no-undef": "off"
+      }
+    }
+  ],
+  rules: {
+    "vue/no-v-html": "off",
+    "vue/require-default-prop": "off",
+    "vue/require-explicit-emits": "off",
+    "vue/multi-word-component-names": "off",
+    "@typescript-eslint/no-explicit-any": "off", // any
+    "no-debugger": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off", // setup()
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "vue/html-self-closing": [
+      "error",
+      {
+        html: {
+          void: "always",
+          normal: "always",
+          component: "always"
+        },
+        svg: "always",
+        math: "always"
+      }
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_"
+      }
+    ],
+    "no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_"
+      }
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        endOfLine: "auto"
+      }
+    ]
+  }
 };
diff --git a/index.html b/index.html
index 9e1ab79..9b1e58a 100644
--- a/index.html
+++ b/index.html
@@ -1,3 +1,11 @@
+<!--
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-01-12 14:35:28
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-01-16 14:36:28
+ * @FilePath: \General-AI-Platform-Web-Client\index.html
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -10,9 +18,10 @@
     />
     <title>pure-admin-thin</title>
     <link rel="icon" href="/favicon.ico" />
+    <!-- update 2024-01-16 14:44 -->
     <link
       rel="stylesheet"
-      href="//at.alicdn.com/t/c/font_4406593_6x8qubg8wo.css"
+      href="//at.alicdn.com/t/c/font_4406593_7ayrx5x0q77.css"
     />
     <script>
       window.process = {};
diff --git a/public/serverConfig.json b/public/serverConfig.json
index 0672e9e..f801ee5 100644
--- a/public/serverConfig.json
+++ b/public/serverConfig.json
@@ -13,7 +13,7 @@
   "Weak": false,
   "HideTabs": false,
   "SidebarStatus": true,
-  "EpThemeColor": "#409EFF",
+  "EpThemeColor": "#154DDD",
   "ShowLogo": true,
   "ShowModel": "smart",
   "MenuArrowIconNoTransition": true,
diff --git a/src/assets/svg/icons/treeNodeLine.svg b/src/assets/svg/icons/treeNodeLine.svg
new file mode 100644
index 0000000..25e3ba3
--- /dev/null
+++ b/src/assets/svg/icons/treeNodeLine.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none">
+  <path d="M1 1C1.63158 3.66667 4.91579 9 13 9" stroke="#DCDCDC" stroke-width="1.5"
+    stroke-linecap="round" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/icons/treeNodeLineSelected.svg b/src/assets/svg/icons/treeNodeLineSelected.svg
new file mode 100644
index 0000000..6353031
--- /dev/null
+++ b/src/assets/svg/icons/treeNodeLineSelected.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none">
+  <path d="M1 1C1.63158 3.66667 4.91579 9 13 9" stroke="#154DDD" stroke-width="2.3"
+    stroke-linecap="round" />
+</svg>
\ No newline at end of file
diff --git a/src/components/CustomTree/index.ts b/src/components/CustomTree/index.ts
index 5580aee..e33e154 100644
--- a/src/components/CustomTree/index.ts
+++ b/src/components/CustomTree/index.ts
@@ -1,5 +1,3 @@
 import collapseTree from "./src/collapseTree";
 
-const CollapseTree = collapseTree;
-
-export { CollapseTree };
+export const CollapseTree = collapseTree;
diff --git a/src/components/CustomTree/src/collapseTree.tsx b/src/components/CustomTree/src/collapseTree.tsx
index 7187381..0aed69b 100644
--- a/src/components/CustomTree/src/collapseTree.tsx
+++ b/src/components/CustomTree/src/collapseTree.tsx
@@ -1,13 +1,82 @@
-/*
- * @Author: donghao donghao@supervision.ltd
- * @Date: 2024-01-15 14:34:20
- * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-01-15 15:21:52
- * @FilePath: \general-work-web\General-AI-Platform-Web-Client\src\components\CustomTree\src\collapseTree.tsx
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- */
-
-import { defineComponent, ref } from "vue";
+import { defineComponent, reactive } from "vue";
+import CollapseTreeItem from "./collapseTreeItem";
+import "./collapseTreeStyle.scss";
+const testDeviceTreeData = [
+  {
+    name: "控制设备组1",
+    id: "11",
+    level: 0,
+    expended: true,
+    childList: [
+      {
+        name: "控制器A",
+        id: "1101",
+        level: 1,
+        childList: [
+          {
+            name: "控制器A1",
+            id: "1101001",
+            level: 2,
+            childList: [
+              {
+                name: "控制器A1a1",
+                id: "110100101",
+                level: 3
+              },
+              {
+                name: "控制器A2a2",
+                id: "110100202",
+                level: 3
+              }
+            ]
+          },
+          {
+            name: "控制器A2",
+            id: "1101002",
+            level: 2
+          }
+        ]
+      },
+      {
+        name: "控制器B",
+        id: "1102",
+        level: 1
+      },
+      {
+        name: "控制器C",
+        id: "1103",
+        level: 1
+      },
+      {
+        name: "控制器D",
+        id: "1104",
+        level: 1
+      }
+    ]
+  },
+  {
+    name: "控制设备组2",
+    id: "12",
+    level: 0,
+    childList: [
+      {
+        name: "控制器B",
+        id: "1202",
+        level: 1
+      },
+      {
+        name: "控制器C",
+        id: "1203",
+        level: 1
+      },
+      {
+        name: "控制器D",
+        id: "1204",
+        level: 1
+      }
+    ]
+  }
+];
 
 export default defineComponent({
   name: "CollapseTree",
@@ -17,11 +86,64 @@ export default defineComponent({
       default: []
     }
   },
+
   setup() {
-    const count = ref<number>(1);
+    // const count = ref<number>(1);
+    const treeData = reactive({
+      list: testDeviceTreeData
+    });
 
     return () => {
-      return <div>123{count}</div>;
+      return (
+        <div class="collapseTree_wrap">
+          <ul class="root_cat_box" style={{ padding: "16px" }}>
+            {treeData.list.map((vFirst, kFirst) => {
+              return (
+                <li key={kFirst}>
+                  <div
+                    class={[
+                      "first_level_box",
+                      vFirst?.expended ? "selected_active" : ""
+                    ]}
+                  >
+                    <div
+                      class="flex items-center collapseIcon_box"
+                      onClick={() => {
+                        vFirst.expended = !vFirst.expended;
+                      }}
+                    >
+                      <div
+                        class={["arrow", vFirst?.expended ? "activeUp" : ""]}
+                      ></div>
+                      <i class="iconfont icon-fuwuqi root_tree_icon"></i>
+                      <p> {vFirst.name}</p>
+                    </div>
+                  </div>
+                  <transition name="collapseTree_child_box">
+                    <div class="box" v-show={vFirst?.expended}>
+                      <ul
+                        class="child_info_box"
+                        v-if={
+                          Array.isArray(vFirst.childList) &&
+                          vFirst.childList.length
+                        }
+                      >
+                        {vFirst.childList.map((item, index) => {
+                          return (
+                            <li key={index}>
+                              <CollapseTreeItem info={item}></CollapseTreeItem>
+                            </li>
+                          );
+                        })}
+                      </ul>
+                    </div>
+                  </transition>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      );
     };
   }
 });
diff --git a/src/components/CustomTree/src/collapseTreeItem b/src/components/CustomTree/src/collapseTreeItem
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/CustomTree/src/collapseTreeItem.tsx b/src/components/CustomTree/src/collapseTreeItem.tsx
new file mode 100644
index 0000000..7693e13
--- /dev/null
+++ b/src/components/CustomTree/src/collapseTreeItem.tsx
@@ -0,0 +1,48 @@
+import { computed, defineComponent } from "vue";
+import "./collapseTreeStyle.scss";
+
+export default defineComponent({
+  name: "CollapseTreeItem",
+  props: {
+    info: {
+      type: undefined,
+      default: []
+    }
+  },
+
+  setup(props) {
+    const nodeLatestInfo = computed(() => {
+      //实时的树节点数据
+      return { ...props.info };
+    });
+
+    return () => {
+      return (
+        <div class={["collapseTreeItem_wrap"]}>
+          <div class={["collapseTreeItem_info flex"]}>
+            <span class={["collapseTreeItem_line"]}></span>
+            <div class={["collapseTreeItem_main_info"]}>
+              <i class="iconfont icon-fuwuqi tree_item_icon"></i>
+              <span>{nodeLatestInfo.value.name}</span>
+            </div>
+          </div>
+          <ul
+            class="collapseTreeItem_child_info_box"
+            v-if={
+              Array.isArray(nodeLatestInfo.value?.childList) &&
+              nodeLatestInfo.value.childList.length
+            }
+          >
+            {nodeLatestInfo.value.childList?.map((item, index) => {
+              return (
+                <li key={index}>
+                  <CollapseTreeItem info={item}></CollapseTreeItem>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      );
+    };
+  }
+});
diff --git a/src/components/CustomTree/src/collapseTreeStyle.scss b/src/components/CustomTree/src/collapseTreeStyle.scss
new file mode 100644
index 0000000..8bc33e2
--- /dev/null
+++ b/src/components/CustomTree/src/collapseTreeStyle.scss
@@ -0,0 +1,95 @@
+@import "../../../style/index";
+
+.collapseTree_wrap {
+  font-size: 14px;
+  cursor: pointer;
+
+  .first_level_box {
+    padding: 12px 16px;
+    color: $--web-font2;
+    background: #fff;
+    border: 1px solid rgb(21 77 221 / 10%);
+    border-radius: 8px;
+  }
+
+  .selected_active {
+    color: $--theme-color;
+    background: rgb(21 77 221 / 10%);
+  }
+
+  .root_tree_icon {
+    padding: 0 10px;
+  }
+
+  .child_info_box {
+    margin-top: 8px;
+
+    & > li:last-child {
+      .collapseTreeItem_wrap {
+        border-left: 2px solid transparent;
+      }
+    }
+  }
+}
+
+.collapseTreeItem_child_info_box {
+  & > li:last-child {
+    .collapseTreeItem_wrap {
+      border-left: 2px solid transparent;
+    }
+  }
+}
+
+.collapseTreeItem_wrap {
+  // border-radius: 2px;
+  padding-top: 0;
+
+  // padding-left: 10px;
+  // margin-top: 8px;
+  margin-left: 16px;
+  border-left: 2px solid $--theme-color;
+
+  .collapseTreeItem_info {
+    position: relative;
+    color: $--web-font2;
+
+    .tree_item_icon {
+      padding: 0 8px;
+    }
+
+    .collapseTreeItem_line {
+      // background-color: red;
+      display: inline-block;
+
+      // margin-bottom: -10px;
+      width: 12px;
+      height: 12px;
+      margin-top: -2px;
+
+      // position: absolute;
+      // left: -2px;
+      margin-left: -2px;
+
+      // border-radius: 50%;
+      // border-left: 1px solid red ;
+      // background-image: url("@/assets/svg/bgFooter.svg");
+
+      background-image: url("@/assets/svg/icons/treeNodeLineSelected.svg");
+      background-repeat: no-repeat;
+
+      // background-size: contain;
+    }
+
+    .collapseTreeItem_main_info {
+      padding: 2px 5px 8px;
+      padding-left: 10px;
+
+      // padding-top: 16px;
+      // position: absolute;
+      // left: -2px;
+      // top: 12px;
+    }
+
+    // .icon-fuwuqi {}
+  }
+}
diff --git a/src/style/index.scss b/src/style/index.scss
index b6ffa29..7b4b20f 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -1,3 +1,4 @@
+@import "./vars";
 @import "./transition";
 @import "./element-plus";
 @import "./sidebar";
diff --git a/src/style/transition.scss b/src/style/transition.scss
index c7274dd..e79536c 100644
--- a/src/style/transition.scss
+++ b/src/style/transition.scss
@@ -52,3 +52,42 @@
 .horizontal-collapse-transition {
   transition: var(--pure-transition-duration) all !important;
 }
+
+/* 展开特效 */
+.collapseIcon_box {
+  cursor: pointer;
+  user-select: none;
+
+  .arrow {
+    // margin-top: 3px;
+    float: left;
+    width: 9px;
+    height: 9px;
+    border-top: 2px solid #666;
+
+    /* 上箭头大小形状颜色 */
+    border-right: 2px solid #666;
+
+    /* 右箭头大小形状颜色 */
+    transition: all 0.5s ease 0s;
+
+    /* 设置右浮动让它文字的右边 */
+    transform: scaleX(1) rotate(45deg);
+  }
+
+  .arrow_theme_color {
+    border-top: 2px solid var(--el-color-primary);
+
+    /* 上箭头大小形状颜色 */
+    border-right: 2px solid var(--el-color-primary);
+  }
+
+  .activeUp {
+    margin-top: -6px;
+    border-top: 2px solid var(--el-color-primary);
+
+    /* 上箭头大小形状颜色 */
+    border-right: 2px solid var(--el-color-primary);
+    transform: scaleX(1) rotate(135deg);
+  }
+}
diff --git a/src/style/vars.scss b/src/style/vars.scss
new file mode 100644
index 0000000..e238bc6
--- /dev/null
+++ b/src/style/vars.scss
@@ -0,0 +1,4 @@
+$--web-font1: #333;
+$--web-font2: #666;
+$--web-font3: #999;
+$--theme-color: #154ddd;
diff --git a/src/views/demo/leftTree.vue b/src/views/demo/leftTree.vue
index 03f8017..a5d8191 100644
--- a/src/views/demo/leftTree.vue
+++ b/src/views/demo/leftTree.vue
@@ -1,20 +1,9 @@
-<!--
- * @Author: donghao donghao@supervision.ltd
- * @Date: 2024-01-15 11:22:10
- * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-01-15 15:23:07
- * @FilePath: \general-work-web\General-AI-Platform-Web-Client\src\views\demo\leftTree\index.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
 <script setup lang="ts">
-import { CollapseTree } from "@/components/CustomTree";
 defineOptions({
-  name: "DemoLeftTree"
+  name: "DemoLeftTrees"
 });
 </script>
 
 <template>
-  <div>
-    <CollapseTree />
-  </div>
+  <div>123</div>
 </template>
diff --git a/src/views/device/components/TreeCard.vue b/src/views/device/components/TreeCard.vue
index 0910260..ad842a6 100644
--- a/src/views/device/components/TreeCard.vue
+++ b/src/views/device/components/TreeCard.vue
@@ -1,17 +1,21 @@
 <script setup lang="ts">
+import { CollapseTree } from "@/components/CustomTree";
+
 defineOptions({
   name: "TreeCard"
 });
 </script>
 
 <template>
-  <div class="treeCard">TreeCard</div>
+  <div class="treeCard"><CollapseTree /></div>
 </template>
 
 <style lang="scss" scoped>
 .treeCard {
   width: 240px;
   height: 808px;
-  background-color: cadetblue;
+  background: #fafafa;
+  border-radius: 12px;
+  box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%);
 }
 </style>