[Update]新增左下page2可以跟著又下無人機選擇顯示資訊

assets/prefab/detailPanel.prefab

@@ -31,10 +31,13 @@
     "_components": [
       {
         "__id__": 11
+      },
+      {
+        "__id__": 12
       }
     ],
     "_prefab": {
-      "__id__": 12
+      "__id__": 13
     },
     "_opacity": 255,
     "_color": {
@@ -439,6 +442,22 @@
     "_N$affectedByScale": false,
     "_id": ""
   },
+  {
+    "__type__": "b4ff3tEyHFMNq64ADAstJ5/",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "keyLabel": {
+      "__id__": 3
+    },
+    "valueLabel": {
+      "__id__": 9
+    },
+    "_id": ""
+  },
   {
     "__type__": "cc.PrefabInfo",
     "root": {

assets/prefab/singleDroneInfo.prefab

@@ -14,7 +14,7 @@
   {
     "__type__": "cc.Node",
     "_name": "singleDroneInfo",
-    "_objFlags": 0,
+    "_objFlags": 512,
     "_parent": null,
     "_children": [
       {
@@ -450,8 +450,8 @@
     ],
     "_srcBlendFactor": 770,
     "_dstBlendFactor": 771,
-    "_string": "20",
+    "_string": "",
-    "_N$string": "20",
+    "_N$string": "",
     "_fontSize": 20,
     "_lineHeight": 20,
     "_enableWrapText": true,
@@ -1068,8 +1068,8 @@
     ],
     "_srcBlendFactor": 770,
     "_dstBlendFactor": 771,
-    "_string": "無人機A",
+    "_string": "",
-    "_N$string": "無人機A",
+    "_N$string": "",
     "_fontSize": 20,
     "_lineHeight": 20,
     "_enableWrapText": true,
@@ -1532,8 +1532,8 @@
     ],
     "_srcBlendFactor": 770,
     "_dstBlendFactor": 771,
-    "_string": "12'34'56.7\"\"",
+    "_string": "",
-    "_N$string": "12'34'56.7\"\"",
+    "_N$string": "",
     "_fontSize": 20,
     "_lineHeight": 20,
     "_enableWrapText": true,
@@ -1892,8 +1892,8 @@
     ],
     "_srcBlendFactor": 770,
     "_dstBlendFactor": 771,
-    "_string": "98'76'54.0123\"\"",
+    "_string": "",
-    "_N$string": "98'76'54.0123\"\"",
+    "_N$string": "",
     "_fontSize": 20,
     "_lineHeight": 20,
     "_enableWrapText": true,

assets/script/TestFakeData.ts

@@ -7,12 +7,12 @@ const { ccclass, property } = cc._decorator;
 export default class TestFakeData extends BaseComp {
 
     protected onLoad(): void {
-        console.log('ken666::TestFakeData::onLoad()')
+        // console.log('ken666::TestFakeData::onLoad()')
 
         cc.tween(new cc.Node())
         .delay(1)
         .call(() => {
-            console.log('ken666::delay3 send Drone_Event.DRONE_DETAIL')
+            // console.log('ken666::delay3 send Drone_Event.DRONE_DETAIL')
             this.emit(Drone_Event.DRONE_DETAIL, FakeDroneDetail)
         })
         .start()
@@ -20,7 +20,7 @@ export default class TestFakeData extends BaseComp {
         cc.tween(new cc.Node())
             .delay(3)
             .call(() => {
-                console.log('ken666::delay3 send Drone_Event.DRONE_LIST')
+                // console.log('ken666::delay3 send Drone_Event.DRONE_LIST')
                 this.emit(Drone_Event.DRONE_LIST, FakeDroneListInfo)
             })
         .start()
@@ -28,15 +28,17 @@ export default class TestFakeData extends BaseComp {
         cc.tween(new cc.Node())
             .delay(3)
             .call(() => {
-                console.log('ken666::delay3 send Drone_Event.DRONE_DETAIL_VALUE')
+                // console.log('ken666::delay3 send Drone_Event.DRONE_DETAIL_VALUE')
-                this.emit(Drone_Event.DRONE_DETAIL_VALUE, FakeDroneDetailValue)
+                FakeDroneDetailValue.forEach(data => {
+                    this.emit(Drone_Event.DRONE_DETAIL_VALUE, data)
+                })
             })
         .start()
 
         cc.tween(new cc.Node())
         .delay(3)
         .call(() => {
-            console.log('ken666::delay3 send Drone_Event.WEATHER')
+            // console.log('ken666::delay3 send Drone_Event.WEATHER')
             this.emit(Drone_Event.WEATHER, FakeWeatherValue)
         })
        .start()

assets/script/define/ValueDefine.ts

@@ -0,0 +1,11 @@
+export enum DroneDetailString {
+    id,
+    high,
+    speed,
+    acceleration,
+    direction,
+    pitch,
+    yaw,
+    roll,
+    mode
+}

assets/script/define/ValueDefine.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.8",
+  "uuid": "c5c4b503-049f-4e7f-813a-1eb3783da16b",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

assets/script/drone/CommonModel.ts

@@ -1,5 +1,6 @@
 import { Drone_Event } from "../define/Event";
 import { IDroneDetailValueInfo, IDroneInfo, IDroneLocationInfo, IDroneWeatherValueInfo } from "../define/Interface";
+import { DroneDetailString } from "../define/ValueDefine";
 import EmitterBase from "../external/EmitterBase";
 import { Utils } from "../external/Utils";
 import { makeAutoObservable } from "../Library/mobx/mobx";
@@ -27,24 +28,24 @@ export class CommonModel extends EmitterBase {
 	}
 
 	private setDrone(droneInfo: Array<IDroneInfo>) {
-		console.log('setDrone')
 		droneInfo.sort((a, b) => a.sort - b.sort)
-		// this.droneInfo = Utils.deepClone(droneInfo)
 		this.droneInfo = droneInfo
 	}
 
 	private setDroneDetail(droneDetail: Array<IDroneLocationInfo>) {
-		console.log('setDroneDetail')
 		this.droneDetail = Utils.deepClone(droneDetail)
 	}
 
-	private setDroneDetailValue(droneDetailValue: Array<IDroneDetailValueInfo>) {
+	private setDroneDetailValue(droneDetail: IDroneDetailValueInfo) {
-		console.log('setDroneDetail')
+		let singleDataIndex = this.droneDetailValue.findIndex(detail => detail.id === droneDetail.id)
-		this.droneDetailValue = Utils.deepClone(droneDetailValue)
+		if (singleDataIndex !== -1) {
+			this.droneDetailValue[singleDataIndex] = droneDetail
+		} else {
+			this.droneDetailValue.push(droneDetail)
+		}
 	}
 
 	private setWeather(weather: IDroneWeatherValueInfo) {
-		console.log('setDroneDetail')
 		this.weather = Utils.deepClone(weather)
 	}
 	// async init() {

assets/script/drone/DetailPanelItem.ts

@@ -0,0 +1,31 @@
+
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class DetailPanelItem extends cc.Component {
+    @property(cc.Label)
+    keyLabel: cc.Label = null;
+
+    @property(cc.Label)
+    valueLabel: cc.Label = null;
+
+    protected _keyName: string = '';
+
+    get keyName(): string {
+        return this._keyName
+    }
+
+    set keyName(key: string) {
+        this._keyName = key
+    }
+
+    setItemInfo(key: string, value: string) {
+        this.keyLabel.string = key
+        this.valueLabel.string = value
+        this.keyName = key
+    }
+
+    updateItemInfo(value: string) {
+        this.valueLabel.string = value
+    }
+}

assets/script/drone/DetailPanelItem.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.8",
+  "uuid": "b4ff3b44-c871-4c36-aeb8-00302cb49e7f",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

assets/script/drone/DroneListManager.ts

@@ -32,14 +32,14 @@ export default class DroneListManager extends BaseComp {
     }
 
     initDroneList() {
-        console.log('ken666::DroneListManager::initDroneList()')
         this.contentNode.removeAllChildren()
-        CommonModel.inst.droneInfo.forEach(data => {
+        CommonModel.inst.droneInfo.forEach((data, index) => {
             const {droneName, id} = data
             let droneItem = cc.instantiate(this.dronePrefab)
             let droneComponent = droneItem.getComponent(SingleDroneItem)
             droneComponent.setData(droneName, id)
             droneItem.parent = this.contentNode
+            if(index === 0) this.emit(Drone_Event.DRONE_CLICK, id)
         })
     }
 

assets/script/drone/InfoPageTabManager.ts

@@ -0,0 +1,105 @@
+import { reaction } from "../Library/mobx/mobx";
+import BaseComp from "../external/BaseComp";
+import { CommonModel } from "./CommonModel";
+import { CustomToggleGroup } from "../external/CustomToggleGroup";
+import { CustomToggle } from "../external/CustomToggleItem";
+import { Drone_Event } from "../define/Event";
+import DetailPanelItem from "./DetailPanelItem";
+
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class InfoPageTabManager extends BaseComp {
+    @property([cc.Node])
+    pageContent: Array<cc.Node> = []
+
+    @property([CustomToggle])
+    pageToggle: Array<CustomToggle> = [];
+
+    @property(cc.Prefab)
+    detailPanelItemPrefab: cc.Prefab = null;
+    1
+    protected _nowDroneId: string = ''
+
+    set nowDroneId(id: string) {
+        this._nowDroneId = id
+    }
+
+    get nowDroneId(): string {
+        return this._nowDroneId
+    }
+    onEnable() {
+        super.onEnable()
+        this.on(Drone_Event.DRONE_CLICK, this.onSingleDroneClick.bind(this))
+    }
+
+    onDisable() {
+        this.off(Drone_Event.DRONE_CLICK)
+        super.onDisable();
+    }
+
+    onSingleDroneClick(id: string) {
+        this.nowDroneId = id
+        this.setShowPageDetail()
+    }
+
+    onTabChecked(customToggle: CustomToggle) {
+        if (customToggle.isChecked) {
+            const nowShowTabIndex = customToggle.checkEvents[0].customEventData
+            const setDetailCase = {
+                0: () => this.setFlyDroneInfo(),
+                1: (_nowShowTabIndex: number) => this.setDroneValueInfo(_nowShowTabIndex),
+                2: (_nowShowTabIndex: number) => this.setWeather(_nowShowTabIndex),
+                3: () => this.setDroneCamera()
+            }
+            setDetailCase.hasOwnProperty(nowShowTabIndex) && setDetailCase[nowShowTabIndex](nowShowTabIndex)
+        }
+    }
+
+    setShowPageDetail() {
+        let nowShowTabIndex = this.pageToggle.findIndex(toggle => toggle.isChecked);
+        const setDetailCase = {
+            0: () => this.setFlyDroneInfo(),
+            1: (_nowShowTabIndex: number) => this.setDroneValueInfo(_nowShowTabIndex),
+            2: (_nowShowTabIndex: number) => this.setWeather(_nowShowTabIndex),
+            3: () => this.setDroneCamera()
+        }
+        setDetailCase.hasOwnProperty(nowShowTabIndex) && setDetailCase[nowShowTabIndex](nowShowTabIndex);
+    }
+
+    setFlyDroneInfo() {
+        // TO-DO
+    }
+
+    setDroneValueInfo(nowShowTabIndex: number) {
+        const targetContent = this.pageContent[nowShowTabIndex]
+        const data = CommonModel.inst.droneDetailValue.find(detail => detail.id === this.nowDroneId)
+        if (data) {
+            Object.keys(data).forEach(idString => {
+                if(idString !== 'id') {
+                    let item = targetContent.children.find( node => {
+                        return node?.getComponent(DetailPanelItem).keyName === idString
+                    })
+    
+                    if(item) {
+                        item.getComponent(DetailPanelItem).updateItemInfo(data[idString])
+                    } else {
+                        let node = cc.instantiate(this.detailPanelItemPrefab)
+                        let detailPanelItemComp = node.getComponent(DetailPanelItem)
+                        detailPanelItemComp.setItemInfo(idString, data[idString])
+                        node.parent = targetContent
+                    }
+
+                }
+            })
+        }
+    }
+
+    setWeather(nowShowTabIndex: number) {
+        // TO-DO
+    }
+
+    setDroneCamera() {
+        // TO-DO
+    }
+}

assets/script/drone/InfoPageTabManager.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.8",
+  "uuid": "bc79276c-6eb2-4ef8-b39d-6616d7223b0f",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

assets/script/drone/SingleDroneIfnoManager.ts

@@ -30,7 +30,6 @@ export default class SingleDroneIfnoManager extends BaseComp {
     }
 
     setSingleInfo(id: string) {
-        console.log('setSingleInfo::id = ',id)
         let detail = CommonModel.inst.droneDetail.find(data => data.id === id)
         if (detail) {
             const { droneName } = CommonModel.inst.droneInfo.find(data => data.id === id)

assets/script/drone/SingleDroneItem.ts

@@ -18,7 +18,6 @@ export default class SingleDroneItem extends BaseComp {
     }
 
     onClick() {
-        console.log('SingleDroneItem::onClick::this.id = ',this.id)
         this.emit(Drone_Event.DRONE_CLICK, this.id)
     }
 }