update: 分屏展示

src/views/media/SplitScreen/index.less

@@ -9,11 +9,11 @@
         border-right: 1px solid #f0f0f0;
 
         .online {
-            // color: @success-color;
+            color: rgba(82, 196, 26, 1);
         }
 
         .offline {
-            // color: @disabled-color;
+            color: rgba(0, 0, 0, 0.25);
         }
 
         .left-search {

src/views/media/SplitScreen/tree.vue

@@ -2,12 +2,17 @@
     <div class="left-content">
         <a-tree
             :height="700"
-            :show-line="true"
+            :show-line="{ showLeafIcon: false }"
             :show-icon="true"
             :tree-data="treeData"
             :loadData="onLoadData"
+            :fieldNames="{ title: 'name', key: 'id' }"
             @select="onSelect"
-        ></a-tree>
+        >
+            <template #icon="{ key, selected }">
+                <AIcon type="VideoCameraOutlined" class="online" />
+            </template>
+        </a-tree>
     </div>
 </template>
 
@@ -34,6 +39,7 @@ interface DataNode {
 }
 
 const onSelect = (_: any, { node }: any) => {
+    console.log('node: ', node);
     emit('onSelect', { dId: node.deviceId, cId: node.channelId });
 };
 
@@ -108,6 +114,8 @@ const getChildren = (key: any, params: any): Promise<any> => {
                 res.result.data.map((item: DataNode) => ({
                     ...item,
                     // icon: (<AIcon type="VideoCameraOutlined" className={item.status.value}/>),
+                    // icon: `<AIcon type="VideoCameraOutlined" class="${item.status.value}"/>`,
+                    // icon: (h:any) => h('h1', 22),
                     isLeaf: isLeaf(item),
                 })),
             );
@@ -120,6 +128,8 @@ const getChildren = (key: any, params: any): Promise<any> => {
                     });
                 }, 50);
             }
+            console.log('treeData.value: ', treeData.value);
+            console.log('res.result: ', res.result);
             resolve(res.result);
         }
     });
@@ -146,4 +156,6 @@ const onLoadData = ({ key, children }: any): Promise<void> => {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+@import './index.less';
+</style>