refactor(security-box-circuit-card): probe after turnStatus

src/components/device-page/device-card/current-diag-card/security-box-circuit-card.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { NdmSecurityBoxCircuit } from '@/apis/domains';
 import type { NdmSecurityBoxResultVO } from '@/apis/models';
-import { rebootSecurityBox, turnStatus } from '@/apis/requests';
+import { probeDeviceApi, rebootSecurityBox as rebootSecurityBoxApi, turnStatus as turnStatusApi } from '@/apis/requests';
+import { useMutation } from '@tanstack/vue-query';
 import { PowerOutline, FlashOutline } from '@vicons/ionicons5';
 import { NCard, NGrid, NGridItem, NPopover, NSwitch, NIcon, NFlex, NPopconfirm, NButton } from 'naive-ui';
-import { computed, toRefs } from 'vue';
+import { ref, toRefs, watch } from 'vue';
 
 /**
  * 安防箱电路状态卡片组件
@@ -24,18 +25,18 @@ const props = defineProps<{
 
 const { stationCode, ndmSecurityBox, circuits } = toRefs(props);
 
-const validCircuits = computed(() => {
-  if (!circuits.value || circuits.value.length === 0) {
-    return [];
-  }
-  return circuits.value;
-});
+const localCircuits = ref<NdmSecurityBoxCircuit[]>([]);
+
+watch(
+  circuits,
+  (newValue) => {
+    localCircuits.value = newValue?.map((circuit) => ({ ...circuit })) ?? [];
+  },
+  {
+    immediate: true,
+  },
+);
 
-/**
- * 获取电路状态样式类
- * @param circuit 电路信息
- * @returns CSS类名
- */
 const getCircuitStatusClass = (circuit: NdmSecurityBoxCircuit) => {
   if (circuit.status === 1) {
     return 'circuit-on';
@@ -44,12 +45,6 @@ const getCircuitStatusClass = (circuit: NdmSecurityBoxCircuit) => {
   }
   return 'circuit-unknown';
 };
-
-/**
- * 获取电路状态文本
- * @param circuit 电路信息
- * @returns 状态文本
- */
 const getCircuitStatusText = (circuit: NdmSecurityBoxCircuit) => {
   if (circuit.status === 1) {
     return '开启';
@@ -59,58 +54,65 @@ const getCircuitStatusText = (circuit: NdmSecurityBoxCircuit) => {
   return '未知';
 };
 
-/**
- * 处理电路开关切换
- * @param circuitIndex 电路索引
- * @param newStatus 新状态
- */
-const handleCircuitToggle = async (circuitIndex: number, newStatus: boolean) => {
-  if (!ndmSecurityBox.value.ipAddress) {
-    window.$message.error('设备IP地址不存在');
-    return;
-  }
-
-  try {
+const { mutate: turnStatus, isPending: turning } = useMutation({
+  mutationFn: async (params: { circuitIndex: number; newStatus: boolean }) => {
+    const { circuitIndex, newStatus } = params;
+    if (!ndmSecurityBox.value.ipAddress) {
+      throw new Error('设备IP地址不存在');
+    }
     const status = newStatus ? 1 : 0;
-    await turnStatus(stationCode.value, ndmSecurityBox.value.ipAddress, circuitIndex, status);
-    window.$message.success(`电路${circuitIndex + 1}${newStatus ? '开启' : '关闭'}成功 下次更新诊断数据时将刷新状态`);
-  } catch (error) {
-    window.$message.error(`电路${circuitIndex + 1}操作失败`);
-    console.error('电路开关操作失败:', error);
-  }
-};
+    await turnStatusApi(stationCode.value, ndmSecurityBox.value.ipAddress, circuitIndex, status);
+    await probeDeviceApi(stationCode.value, ndmSecurityBox.value);
+    return status;
+  },
+  onSuccess: (status, params) => {
+    if (localCircuits.value) {
+      const circuit = localCircuits.value.at(params.circuitIndex);
+      if (circuit) {
+        circuit.status = status;
+        localCircuits.value.splice(params.circuitIndex, 1, circuit);
+      }
+    }
+  },
+  onError: (error) => {
+    console.error(error);
+    window.$message.error(error.message);
+  },
+});
 
-const onClickReboot = async () => {
-  if (!ndmSecurityBox.value.ipAddress) {
-    window.$message.error('设备IP地址不存在');
-    return;
-  }
-  try {
-    await rebootSecurityBox(stationCode.value, ndmSecurityBox.value.ipAddress);
+const { mutate: rebootSecurityBox, isPending: rebooting } = useMutation({
+  mutationFn: async () => {
+    if (!ndmSecurityBox.value.ipAddress) {
+      throw new Error('设备IP地址不存在');
+    }
+    await rebootSecurityBoxApi(stationCode.value, ndmSecurityBox.value.ipAddress);
+  },
+  onSuccess: () => {
     window.$message.success('设备重启成功');
-  } catch (error) {
-    window.$message.error('设备重启失败');
-    console.error('设备重启失败:', error);
-  }
-};
+  },
+  onError: (error) => {
+    console.error(error);
+    window.$message.error(error.message);
+  },
+});
 </script>
 
 <template>
-  <NCard v-if="validCircuits.length > 0" size="small" hoverable>
+  <NCard v-if="localCircuits.length > 0" size="small" hoverable>
     <template #header>
       <NFlex :align="'center'">
         <div>电路状态</div>
-        <NPopconfirm :positive-text="'确认'" :negative-text="'取消'" @positive-click="onClickReboot">
+        <NPopconfirm :positive-text="'确认'" :negative-text="'取消'" @positive-click="() => rebootSecurityBox()">
           <template #trigger>
-            <NButton secondary size="small">重合闸</NButton>
+            <NButton secondary size="small" :loading="rebooting">重合闸</NButton>
           </template>
           确定要执行重合闸操作吗？此操作将重启安防箱设备。
         </NPopconfirm>
       </NFlex>
     </template>
     <div class="circuit-layout">
-      <NGrid :cols="Math.min(validCircuits.length, 4)" :x-gap="12" :y-gap="12" class="circuit-grid">
-        <NGridItem v-for="(circuit, index) in validCircuits" :key="index">
+      <NGrid :cols="Math.min(localCircuits.length, 4)" :x-gap="12" :y-gap="12" class="circuit-grid">
+        <NGridItem v-for="(circuit, index) in localCircuits" :key="index">
           <!-- 电路信息弹窗 -->
           <NPopover trigger="hover" placement="top">
             <template #trigger>
@@ -126,9 +128,9 @@ const onClickReboot = async () => {
                   <span class="status-text">{{ getCircuitStatusText(circuit) }}</span>
                 </div>
                 <div class="circuit-control">
-                  <NPopconfirm :positive-text="'确认'" :negative-text="'取消'" @positive-click="() => handleCircuitToggle(index, circuit.status !== 1)">
+                  <NPopconfirm :positive-text="'确认'" :negative-text="'取消'" @positive-click="() => turnStatus({ circuitIndex: index, newStatus: circuit.status !== 1 })">
                     <template #trigger>
-                      <NSwitch :value="circuit.status === 1" size="small" />
+                      <NSwitch :value="circuit.status === 1" size="small" :loading="turning" />
                     </template>
                     确定要{{ circuit.status === 1 ? '关闭' : '开启' }}电路{{ index + 1 }}吗？
                   </NPopconfirm>