From c846ff24b7670f23a0fbbccd3a014757c2edcc06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=B0=8F=E6=9E=97?= <320730042@qq.com>
Date: Sat, 6 Jul 2024 18:47:41 +0800
Subject: [PATCH] feat: soap

---
 src/api/order/index.ts                        |   2 +-
 src/api/soap/index.ts                         |  40 ++++
 src/api/soap/types.ts                         |   6 +
 src/router/index.ts                           |  13 ++
 src/utils/confirm.ts                          |  20 ++
 .../components/RemoteOperateInfo.vue          |   8 +
 .../components/SoapPackageLog.vue             | 202 ++++++++++++++++++
 7 files changed, 290 insertions(+), 1 deletion(-)
 create mode 100644 src/api/soap/index.ts
 create mode 100644 src/api/soap/types.ts
 create mode 100644 src/utils/confirm.ts
 create mode 100644 src/views/family/operate/remote-operation/components/SoapPackageLog.vue

diff --git a/src/api/order/index.ts b/src/api/order/index.ts
index 2642ef9..5a47841 100644
--- a/src/api/order/index.ts
+++ b/src/api/order/index.ts
@@ -111,7 +111,7 @@ export function deviceOderTablePage(
   });
 }
 
-export function checkDeviceExits(devSnoOui): AxiosPromise<MapDev> {
+export function checkDeviceExits(devSnoOui: string): AxiosPromise<MapDev> {
   return request({
     url: `/api/order/v1/check-dev/${devSnoOui}`,
     method: "GET",
diff --git a/src/api/soap/index.ts b/src/api/soap/index.ts
new file mode 100644
index 0000000..f4006a3
--- /dev/null
+++ b/src/api/soap/index.ts
@@ -0,0 +1,40 @@
+import { AxiosPromise } from "axios";
+import { SoapPageResult } from "@/api/soap/types";
+import request from "@/utils/request";
+
+export function soapPage(
+  devId?: number,
+  data?: PageQuery
+): AxiosPromise<SoapPageResult> {
+  return request({
+    url: `/api/device-soap-log/v1/page/${devId}`,
+    method: "POST",
+    data,
+  });
+}
+export function soapStart(devId?: number) {
+  return request({
+    url: `/api/device-soap-log/v1/start/${devId}`,
+    method: "PUT",
+  });
+}
+export function soapStop(devId?: number) {
+  return request({
+    url: `/api/device-soap-log/v1/stop/${devId}`,
+    method: "PUT",
+  });
+}
+export function soapDelete(devId?: number) {
+  return request({
+    url: `/api/device-soap-log/v1/delete/${devId}`,
+    method: "DELETE",
+  });
+}
+export function soapExport(devId?: number, data?: PageQuery) {
+  return request({
+    url: `/api/device-soap-log/v1/_export/${devId}`,
+    method: "GET",
+    params: data,
+    responseType: "arraybuffer",
+  });
+}
diff --git a/src/api/soap/types.ts b/src/api/soap/types.ts
new file mode 100644
index 0000000..fb3f5ac
--- /dev/null
+++ b/src/api/soap/types.ts
@@ -0,0 +1,6 @@
+export interface DeviceSoapLogVO {
+  operTime?: string;
+  soapDirect?: string;
+  soapDesc?: string;
+}
+export type SoapPageResult = PageResult<DeviceSoapLogVO[]>;
diff --git a/src/router/index.ts b/src/router/index.ts
index d526489..f187ac8 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -295,6 +295,19 @@ export const constantRoutes: RouteRecordRaw[] = [
           title: "设备操作日志",
         },
       },
+      {
+        path: "/resources/remote-info/soap-package-log/:devId",
+        name: "SoapPackageLog",
+        component: () =>
+          import(
+            "@/views/family/operate/remote-operation/components/SoapPackageLog.vue"
+          ),
+        meta: {
+          hidden: true,
+          keepAlive: true,
+          title: "SOAP包日志",
+        },
+      },
     ],
   },
 ];
diff --git a/src/utils/confirm.ts b/src/utils/confirm.ts
new file mode 100644
index 0000000..346f2ed
--- /dev/null
+++ b/src/utils/confirm.ts
@@ -0,0 +1,20 @@
+import { ElMessage, ElMessageBox } from "element-plus";
+
+function confirm(message: string, ok: Function) {
+  ElMessageBox.confirm(`${message}，是否继续?`, "警告", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      ok();
+    })
+    .catch((err) => {
+      ElMessage({
+        type: "info",
+        message: "取消操作" + err,
+      });
+    });
+}
+
+export { confirm };
diff --git a/src/views/family/operate/remote-operation/components/RemoteOperateInfo.vue b/src/views/family/operate/remote-operation/components/RemoteOperateInfo.vue
index ea95a53..0b7cd8d 100644
--- a/src/views/family/operate/remote-operation/components/RemoteOperateInfo.vue
+++ b/src/views/family/operate/remote-operation/components/RemoteOperateInfo.vue
@@ -354,6 +354,9 @@
                       <el-dropdown-item divided @click="skipDeviceOperateLog"
                         >设备操作日志</el-dropdown-item
                       >
+                      <el-dropdown-item divided @click="skipSoapPackageLog"
+                        >SOAP包日志</el-dropdown-item
+                      >
                     </el-scrollbar>
                   </el-dropdown-menu>
                 </template>
@@ -454,6 +457,11 @@ const skipDeviceOperateLog = () => {
     path: `/resources/remote-info/device-operate-log/${remote.value.devId}`,
   });
 };
+const skipSoapPackageLog = () => {
+  router.push({
+    path: `/resources/remote-info/soap-package-log/${remote.value.devId}`,
+  });
+};
 onMounted(() => {
   getData();
 });
diff --git a/src/views/family/operate/remote-operation/components/SoapPackageLog.vue b/src/views/family/operate/remote-operation/components/SoapPackageLog.vue
new file mode 100644
index 0000000..c4744f1
--- /dev/null
+++ b/src/views/family/operate/remote-operation/components/SoapPackageLog.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="app-container">
+    <el-card shadow="never">
+      <template #header>
+        <div style="display: flex; justify-content: space-between">
+          <div style="font-weight: 700; line-height: 32px; font-size: 14px">
+            SOAP任务列表
+          </div>
+          <div>
+            <el-dropdown split-button placement="bottom-start">
+              其他操作
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item :icon="Position" @click="executionSoapStart"
+                    >开始</el-dropdown-item
+                  >
+                  <el-dropdown-item
+                    :icon="Close"
+                    divided
+                    @click="executionSoapStop"
+                    >关闭</el-dropdown-item
+                  >
+                  <el-dropdown-item
+                    :icon="Delete"
+                    divided
+                    @click="executionSoapDelete"
+                    >删除</el-dropdown-item
+                  >
+                  <el-dropdown-item :icon="Refresh" divided @click="getData"
+                    >刷新</el-dropdown-item
+                  >
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+            <el-button
+              type="primary"
+              :icon="Download"
+              style="margin-left: 10px"
+              @click="handleExport"
+              >导出</el-button
+            >
+          </div>
+        </div>
+      </template>
+      <div class="any-table">
+        <el-table
+          :data="tableData"
+          stripe
+          highlight-current-row
+          v-loading="loading"
+          max-height="450"
+        >
+          <el-table-column
+            label="操作时间"
+            prop="operTime"
+            width="250"
+            align="center"
+          />
+          <el-table-column
+            label="操作方向"
+            width="150"
+            prop="soapDirect"
+            align="center"
+          />
+          <el-table-column label="操作描述" align="center" prop="soapDesc">
+            <template #default="scope">
+              <div style="white-space: pre-line">
+                {{ scope.row.soapDesc }}
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination
+          v-if="total > 0"
+          v-model:total="total"
+          v-model:page="queryForm.pageNum"
+          v-model:limit="queryForm.pageSize"
+          @pagination="getData"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DeviceSoapLogVO } from "@/api/soap/types";
+import {
+  soapDelete,
+  soapExport,
+  soapPage,
+  soapStart,
+  soapStop,
+} from "@/api/soap";
+import {
+  Close,
+  Delete,
+  Download,
+  Position,
+  Refresh,
+} from "@element-plus/icons-vue";
+import { confirm } from "@/utils/confirm";
+import { exportUser } from "@/api/user";
+
+const route = useRoute();
+let devId: number = parseInt(<string>route.params.devId);
+const total = ref<number>(0);
+const tableData = ref<DeviceSoapLogVO[]>([]);
+const queryForm = ref<PageQuery>({
+  pageNum: 1,
+  pageSize: 10,
+});
+const loading = ref<boolean>(false);
+const getData = () => {
+  loading.value = true;
+  soapPage(devId, queryForm.value)
+    .then(({ data }) => {
+      tableData.value = data.list;
+      total.value = data.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+const executionSoapStart = () => {
+  loading.value = true;
+  soapStart(devId)
+    .then(() => {
+      ElMessage({
+        message: "执行成功",
+        type: "success",
+        duration: 1000,
+        onClose: () => {
+          getData();
+        },
+      });
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+const executionSoapStop = () => {
+  loading.value = true;
+  soapStop(devId)
+    .then(() => {
+      ElMessage({
+        message: "执行成功",
+        type: "success",
+        duration: 1000,
+        onClose: () => {
+          getData();
+        },
+      });
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+const executionSoapDelete = () => {
+  confirm("是否确认删除", () => {
+    loading.value = true;
+    soapDelete(devId)
+      .then(() => {
+        ElMessage({
+          message: "执行成功",
+          type: "success",
+          duration: 1000,
+          onClose: () => {
+            getData();
+          },
+        });
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  });
+};
+function handleExport() {
+  soapExport(devId, queryForm.value).then((response: any) => {
+    const fileData = response.data;
+    const fileName = decodeURI(
+      response.headers["content-disposition"].split(";")[1].split("=")[1]
+    );
+    const fileType =
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
+
+    const blob = new Blob([fileData], { type: fileType });
+    const downloadUrl = window.URL.createObjectURL(blob);
+
+    const downloadLink = document.createElement("a");
+    downloadLink.href = downloadUrl;
+    downloadLink.download = fileName;
+
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+
+    document.body.removeChild(downloadLink);
+    window.URL.revokeObjectURL(downloadUrl);
+  });
+}
+</script>
+
+<style scoped></style>