fix🐛: 修复一点即视ptz、图标消失问题

src/hooks/useDiscreteApi.ts

@@ -13,12 +13,12 @@ export function getConfigProviderProps() {
     dateLocale: dateZhCN,
     theme: theme.value,
     themeOverrides: themeOverrides.value,
-    icons: {
-      info: () => h('span', { class: 'iconify ph--info size-full' }),
-      success: () => h('span', { class: 'iconify ph--seal-check size-full' }),
-      warning: () => h('span', { class: 'iconify ph--warning size-full' }),
-      error: () => h('span', { class: 'iconify ph--x-square size-full' }),
-    },
+    // icons: {
+    //   info: () => h('span', { class: 'iconify ph--info size-full' }),
+    //   success: () => h('span', { class: 'iconify ph--seal-check size-full' }),
+    //   warning: () => h('span', { class: 'iconify ph--warning size-full' }),
+    //   error: () => h('span', { class: 'iconify ph--x-square size-full' }),
+    // },
   }))
 
   return configProviderProps

src/views/Alert/Alert.vue

@@ -56,14 +56,14 @@ export interface formInfo {
   min_confidence?: number | null; // 最小置信度：筛选置信度≥该值，默认0.0（不限制置信度）
   page: number; // 页码：从1开始，默认1（第一页）
   page_size: number; // 每页条数：默认20条/页
-  device_id: number; // 设备id
+  device_id: number | null; // 设备id
 }
 
 const alertData = ref<AlertItem[]>([]);
 const prevUserListTotal = ref(0);
 
 const isRequestLoading = ref(true);
-const deviceOptions = ref([]);
+const deviceOptions = ref<{ label: string; value: number }[]>([]);
 async function getDeviceList() {
   const res = await API_DEVICE_GET();
   deviceOptions.value = (res as any[]).map((item) => ({

src/views/Home/Home.vue

@@ -293,14 +293,16 @@ const playVideo = async (deviceId: string) => {
 const ballPlayerObj = shallowRef<any>(null);
 const ballLoading = ref(false);
 const ballError = ref(true);
+const ballId = ref<string>("");
 provide("ballPlayerObj", ballPlayerObj);
 const ballCamera = async (deviceId: string) => {
   ballPlayerObj.value?.destroyed();
   ballLoading.value = true;
   const res: any = await API_VIEW_BC_LIST_GET({ DeviceId: deviceId });
+  ballId.value = Object.keys(res)[0];
   const url = videoList.value?.ball_camera
     .replace("{4}", uuid())
-    .replace("{12}", Object.keys(res)[0]);
+    .replace("{12}", ballId.value);
   try {
     ballPlayerObj.value = useFlvPlayer(url, ".ball-video", () => {
       ballLoading.value = false;
@@ -495,7 +497,7 @@ onMounted(() => {});
               class="w-full h-full"
               newClass="ball-video  object-fill"
             />
-            <Joystick v-if="currentActive" :CameraId="currentActive" />
+            <Joystick v-if="!ballLoading && currentActive" :CameraId="ballId" />
           </div>
           <div class="flex-1">
             <n-card

src/views/Home/components/Joystick.vue

@@ -85,7 +85,7 @@
               /> -->
             <ul class="h-full flex flex-justify-around flex-items-center">
               <li
-                v-for="item,i in listComputed"
+                v-for="(item, i) in listComputed"
                 :key="i"
                 @click.stop="toolsHandler(item.type)"
                 class="cursor-pointer"
@@ -151,16 +151,19 @@ const downEvent = "mousedown";
 const upEvent = "mouseup";
 
 const planShow = ref(false);
-const props = defineProps({
-  CameraId: String,
-  KeyId: String,
-  Id: String,
-  tagId: String,
-  index: Number,
-  className: {
-    type: String,
+const props = withDefaults(
+  defineProps<{
+    CameraId: string;
+    KeyId?: string;
+    Id?: string;
+    tagId?: string;
+    index?: number;
+    className?: string;
+  }>(),
+  {
+    className: "",
   },
-});
+);
 // 球机重连
 const reconnect = (err, data?, api?) => {
   if ([7].includes(err.code)) {
@@ -182,7 +185,7 @@ const reconnect = (err, data?, api?) => {
 };
 
 const isHR = ref(false);
-const setPZTmove = (direction, isKey) => {
+const setPZTmove = (direction?: string, isKey?: string) => {
   let data: any = { id: 0 };
   let isDownOrUp = "down";
   switch (direction) {
@@ -338,15 +341,15 @@ const tools = ref([
   },
 ]);
 const state = ref(false);
-const toolsHandler = (type) => {
+const toolsHandler = (type?: string) => {
   switch (type) {
     case "lx":
       // switchState()
       state.value = !state.value;
-      ballPlayerObj.value.recording(state.value);
+      ballPlayerObj?.value.recording(state.value);
       break;
     case "jt":
-      ballPlayerObj.value.screenshot();
+      ballPlayerObj?.value.screenshot();
       break;
   }
 };