feature: Treeview 添加刷新功能

src/pages/debug/App.vue

@@ -81,7 +81,6 @@ export default {
       // Listen for messages
       this.clientSocket.addEventListener('message',  (event) => {
           let msg = JSON.parse(event.data)
-          console.log('Message from server ', msg);
 
           switch (msg.method) {
             case 'setPageList':

src/pages/debug/store/index.js

@@ -40,9 +40,7 @@ const mutations = {
     }
   },
   updatePageInfoMap (state, msg) {
-    console.log(1111111)
     Vue.set(state.pageInfoMap, msg.params.tenonId, {
-
       viewTree: msg.params.viewTree,
       baseInfo: msg.params.baseInfo,
       viewTreeData: processViewTree(msg.params.viewTree)

src/pages/index/components/debug/components/TabPaneContent.vue

@@ -2,7 +2,7 @@
   <div class="view-tree-comp">
     <PageInfo :baseInfo="baseInfo" />
 
-    <TreeView :tenonId="tenonId" @getViewInfo="getViewInfo" />
+    <TreeView :tenonId="tenonId" @getViewInfo="getViewInfo" @refreshView="refreshView" :loading="treeViewLoading" />
 
     <ViewInfo :currentViewInfo="currentViewInfo" @setViewStyle="setViewStyle" />
   </div>
@@ -17,7 +17,8 @@ import ViewInfo from './ViewInfo.vue'
 export default {
   props: {
     tenonId: [String, Number],
-    tenonIp: String
+    tenonIp: String,
+    treeViewLoading: Boolean
   },
   components: {
     PageInfo,
@@ -67,6 +68,9 @@ export default {
         viewId
       })
     },
+    refreshView(){
+      this.$emit("refreshView", this.tenonId)
+    },
     pageInit() {
       Event.$on('mouse-up-event', resizing => {
         this.resizing = resizing

src/pages/index/components/debug/components/TreeView.vue

@@ -1,9 +1,15 @@
 <template>
-  <div class="containers" :class="{ resizing }" ref="containers" :style="style">
+  <div class="containers" v-loading="loading" :class="{ resizing }" ref="containers" :style="style">
     <div class="resizerBox">
       <el-row>
         <el-col :span="6">
-          <div class="col-title">TreeView</div>
+          <div class="col-title">
+            <span>TreeView</span>&nbsp;
+            <div @click="refreshView" title="刷新">
+              <el-icon class="refresh" name="refresh" />
+            </div>
+          </div>
+
         </el-col>
         <el-col :span="12" :offset="6">
           <el-input
@@ -24,17 +30,20 @@
         :default-expand-all="true"
         @node-click="handleNodeClick"
       >
-        <div :class="'custom-tree-node'" slot-scope="{ node, data }">
-          <span>
-            <span v-text="'<'"></span>
-            <span v-html="node.label"></span>
-            <span v-text="'>'"></span>
-          </span>
-          <span v-if="data.name == 'text'">{{ data.text }}</span>
-          <TreeViewImage
-            v-if="data.name == 'image'"
-            :imgUrl="data.src"
-          ></TreeViewImage>
+        <div :class="'custom-tree-node'" slot-scope="{ node, data }" >
+          <div  :style="{ display: data.style && data.style.display ? data.style.display : 'inline-block' }">
+            <span>
+              <span v-text="'<'"></span>
+              <span v-html="node.label"></span>
+              <span v-text="'>'"></span>
+            </span>
+            <span v-if="data.name == 'text'" >{{ data.text }}</span>
+            <TreeViewImage
+              v-if="data.name == 'image'"
+              :imgUrl="data.src"
+            ></TreeViewImage>
+          </div>
+
         </div>
       </el-tree>
       <VerResizerPan pan="tree" :parentNode="refContainers" />
@@ -51,6 +60,7 @@ import Event from "@/utils/event";
 export default {
   props: {
     resizing: Boolean,
+    loading: Boolean,
     baseInfo: {
       type: Object,
       default: () => ({}),
@@ -77,11 +87,17 @@ export default {
       pageInfoMap: (state) => state.pageInfoMap,
     }),
     viewTreeData() {
-      return (
-        (this.pageInfoMap[this.tenonId] &&
-          this.pageInfoMap[this.tenonId].viewTreeData) ||
-        []
-      );
+      let arrayData = this.pageInfoMap[this.tenonId] && this.pageInfoMap[this.tenonId].viewTreeData || []
+
+      // 保留 没有 style 的 和 display 不为 none 的
+      const recursion = data => {
+        const treeData = data.filter(item => !item.style || item.style.display !== 'none')
+        treeData.forEach(x => x.children && (x.children = recursion(x.children)))
+        return treeData
+      }
+      recursion(arrayData)
+
+      return arrayData
     },
     treeData() {
       return this.tagName ? this.cloneTreeData : this.viewTreeData;
@@ -153,6 +169,9 @@ export default {
             };
       });
     },
+    refreshView(){
+      this.$emit("refreshView")
+    }
   },
 };
 </script>
@@ -173,5 +192,10 @@ export default {
 .resizerBox {
   position: relative;
   padding: 5px;
+  .refresh{
+    font-size: 18px;
+    font-weight: bold;
+    cursor: pointer;
+  }
 }
 </style>

src/pages/index/components/debug/index.vue

@@ -22,11 +22,14 @@
             <TabPaneContent
               :tenonId="item.tenonId"
               :tenonIp="item.ip"
+              :treeViewLoading="treeViewLoading"
               @getViewTree="getViewTree"
               @getStorage="getStorage"
+              @refreshView="refreshView"
               @getMemory="getMemory"
               @getViewInfo="getViewInfo"
               @setViewStyle="setViewStyle"
+
             />
           </el-tab-pane>
         </el-tabs>
@@ -72,6 +75,7 @@ export default {
     style: {},
     newUser: true,
     currentTenonIp: null,
+    treeViewLoading: false
   }),
   watch: {
     currentShowPage(val) {
@@ -108,7 +112,6 @@ export default {
       // Listen for messages
       this.clientSocket.addEventListener("message", (event) => {
         let msg = JSON.parse(event.data);
-        console.log("Message from server ", msg);
 
         switch (msg.method) {
           case "setPageList":
@@ -126,6 +129,7 @@ export default {
             break;
           case "setViewTree":
             that.$store.commit("updatePageInfoMap", msg);
+            this.treeViewLoading = false
             break;
           case "setViewInfo":
             console.log(msg);
@@ -243,6 +247,10 @@ export default {
     getViewTree(tenonId) {
       this.sendMsgToServer("getViewTree", { tenonId });
     },
+    refreshView(tenonId){
+      this.treeViewLoading = true
+      this.sendMsgToServer("getViewTree", { tenonId, refresh: true });
+    },
     getStorage(tenonId, tenonIp) {
       this.sendMsgToServer("getStorage", { tenonId, tenonIp });
     },

src/styles/common.scss

@@ -17,6 +17,8 @@
 .col-title{
   font-size: 24px;
   color: #409EFF;
+  display: flex;
+  align-items: center;
 }
 .info-item{
   display: flex;