修改分页

src/api/index.ts

@@ -155,6 +155,22 @@ export function readDict() {
 export function healthStatusTip(params:any) {
   return get('/healthStatusAnalysis/healthStatusTip',{...params});
 }
+/**
+ * @name 警告信息与维修建议设置
+ * @param data 包含
+ * @returns 
+ */
+export function warnSetList(data:any) {
+  return post('/settings/exceptionWarningRepairStrategyList',data);
+}
+/**
+ * @name  健康指标设置
+ * @param data 包含
+ * @returns 
+ */
+export function healthySetList(data:any) {
+  return post('/settings/healthMetricsList',data);
+}
 // // 使用 http 方法获取特定的 HTTP 方法并调用
 // const deleteMethod = http("DELETE");
 // deleteMethod("/api/data")

src/layout/index.vue

@@ -2,16 +2,32 @@
   <el-container class="layout-container">
     <div class="layout-container-header">
       <div class="navigation-bar">
-        <div class="nav-title">XX动力装备健康状态数据评估</div>
+        <div class="nav-title">动力装备健康状态数据评估</div>
         <div
           class="nav-item"
           v-for="(item, index) in navItems"
           :key="index"
-          :class="{ active: activeTab === index }"
-          @click="() => setActiveTab(index, item)"
+          :class="{ active: activeTab.parent === index }"
+    @click="() => setActiveTab({ parent: index, child: null }, item)"
+
           :ref="`navItem-${index}`"
         >
           {{ item.name }}
+          <div
+            v-if="item.children && item.children.length"
+            class="dropdown-menu"
+          >
+            <div
+              class="dropdown-item"
+              v-for="(child, childIndex) in item.children"
+              :key="childIndex"
+        :class="{ 'active-child': activeTab.parent === index && activeTab.child === childIndex }"
+
+        @click="(event) => { event.stopPropagation(); setActiveTab({ parent: index, child: childIndex }, child); }"
+            >
+              {{ child.meta.title }}
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -28,23 +44,22 @@ interface RouteType {
   path: string;
   name: string;
   index: number;
-  children:any
+  children: any;
 }
 const router = useRouter();
 const route = useRoute(); // 获取当前路由对象
 const navItems = computed<RouteType[]>(() => {
-  console.log(router
-    .getRoutes());
-  
+  console.log(router.getRoutes());
+
   return router
     .getRoutes()
     .map((route, index) => {
-      if (route.meta && route.meta.show) {
+      if (route.meta && route.meta.show && !!!route.meta.child) {
         return {
           path: route.path,
           name: route.meta.title || route.name,
           index: index,
-          children:route.children
+          children:route.meta.children==false? []:route.children,
         };
       }
       return null;
@@ -52,16 +67,32 @@ const navItems = computed<RouteType[]>(() => {
     .filter((item) => item !== null);
 });
 console.log(navItems);
-const activeTab = ref(0);
+const activeTab = ref({ parent: 0, child: null });
 
-const setActiveTab = (index: number, item: RouteType) => {
-  activeTab.value = index;
+const setActiveTab = (tab, item: RouteType) => {
+  activeTab.value = tab;
   router.push({ path: item.path });
 };
-// 设置初始的 activeTab 值
+
+const findActiveTab = (items, path) => {
+  for (const [index, item] of items.entries()) {
+    if (item.children) {
+      for (const [childIndex, child] of item.children.entries()) {
+        if (path.startsWith(child.path)) {
+          return { parent: index, child: childIndex };
+        }
+      }
+    }
+    if (path.startsWith(item.path)) {
+      return { parent: index, child: null };
+    }
+  }
+  return { parent: 0, child: null };
+};
+
 const setActiveTabByPath = (path: string) => {
-  const foundItem = navItems.value.find((item) => path.startsWith(item.path));
-  activeTab.value = foundItem ? foundItem.index : 0;
+  const foundTab = findActiveTab(navItems.value, path);
+  activeTab.value = foundTab;
 };
 
 watch(
@@ -130,9 +161,44 @@ onMounted(() => {
   line-height: 53px;
   letter-spacing: 0%;
   text-align: center;
+  position: relative;
+}
+.nav-item:hover .dropdown-menu{
+  display: block !important;
+} 
+.dropdown-menu {
+  position: absolute;
+  top: 53px; 
+left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.66);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  display: none;
+  flex-direction: column;
+   min-width: 150px;
+}
+
+.dropdown-item {
+  padding: 8px 16px;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 40px;
+  text-align: center;
+  /* background: rgba(0, 0, 0, 0.86); */
+}
+
+.dropdown-item:hover,.active-child {
+  background: linear-gradient(180deg, rgb(92, 255, 213), rgb(255, 255, 255));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
 }
 
-.nav-item.active {
+.nav-item>.active {
   width: 100%;
   background: linear-gradient(180deg, rgb(92, 255, 213), rgb(255, 255, 255));
   -webkit-background-clip: text;

src/router/modules/main.route.ts

@@ -23,6 +23,10 @@ const importPath = {
   // 维修策略辅助决策詳情列表頁
   MaintenanceStrategyAssistanceView: () => import("@/views/MaintenanceStrategyAssistance/view.vue"),
   MaintenanceStrategyAssistanceViewHis: () => import("@/views/MaintenanceStrategyAssistance/his.vue"),
+  // 警告信息与维修建议设置
+  WarningSettings: () => import("@/views/WarningSettings/index.vue"),
+  // 健康指标设置
+  HealthSettings: () => import("@/views/HealthSettings/index.vue"),
 };
 
 const mainRoutes: Array<RouteRecordRaw> = [
@@ -51,7 +55,8 @@ const mainRoutes: Array<RouteRecordRaw> = [
     component: importPath["PageView"],
     meta: {
       title: "维修策略辅助决策",
-      show: true
+      show: true,
+      children:false
     }, 
     children: [
       {
@@ -60,7 +65,8 @@ const mainRoutes: Array<RouteRecordRaw> = [
         component: importPath["MaintenanceStrategyAssistancePage"],
         meta: {
           title: "维修策略辅助决策",
-          show: false
+          show: false,
+          child:false
         }
       }, {
         path: "MaintenanceStrategyAssistanceView",
@@ -68,7 +74,8 @@ const mainRoutes: Array<RouteRecordRaw> = [
         component: importPath["MaintenanceStrategyAssistanceView"],
         meta: {
           title: "维修策略辅助决策详细页",
-          show: false
+          show: false,
+          child:false
         },
       }, {
         path: "MaintenanceStrategyAssistanceViewHis",
@@ -76,7 +83,8 @@ const mainRoutes: Array<RouteRecordRaw> = [
         component: importPath["MaintenanceStrategyAssistanceViewHis"],
         meta: {
           title: "维修策略辅助决策历史页",
-          show: false
+          show: false,
+          child:false
         },
       },
     ]
@@ -91,13 +99,46 @@ const mainRoutes: Array<RouteRecordRaw> = [
       show: true
     },
   }, {
-    path: "/ConditionClassification",
-    name: "ConditionClassification",
-    component: importPath["ConditionClassificationPage"],
+    path: "/Set",
+    name: "Set",
+    // component:()=>{},
+    redirect:'/ConditionClassification',
     meta: {
-      title: "工况分类",
+      title: "设置",
       show: true
     },
+    children:[
+      {
+        path: "/ConditionClassification",
+        name: "ConditionClassification",
+        component: importPath["ConditionClassificationPage"],
+        meta: {
+          title: "工况管理",
+          show: true,
+          child:true
+        }, 
+      },
+      {
+        path: "/HealthSettings",
+        name: "HealthSettings",
+        component: importPath["HealthSettings"],
+        meta: {
+          title: "健康指标设置",
+          show: true,
+          child:true
+        }, 
+      },
+      {
+        path: "/WarningSettings",
+        name: "WarningSettings",
+        component: importPath["WarningSettings"],
+        meta: {
+          title: "警告信息与维修建议设置",
+          show: true,
+          child:true
+        }, 
+      }
+    ]
   }
 ];
 

src/views/HealthSettings/index.vue

@@ -0,0 +1,395 @@
+<template>
+  <div class="maintenance-strategy-assistance">
+    <div class="header">
+      <div class="title">
+        <s-title titleText="设备维修策略"></s-title>
+      </div>
+    </div>
+    <div class="ace-sear">
+      <div class="back" @click="back">
+        <svg
+          width="22.000000"
+          height="16.000000"
+          viewBox="0 0 22 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+          <desc>Created with Pixso.</desc>
+          <defs />
+          <path
+            id="path"
+            d="M15 2.2L5 2.2L5 0L0 3L5 6L5 3.79L15 3.79C18 3.79 20.2 5.79 20.2 9C20.2 12.2 18 14.2 15 14.2L9 14.2C8.59 14.2 8.2 14.6 8.2 15C8.2 15.4 8.59 15.8 9 15.8L15 15.8C18.79 15.8 21.8 13.1 21.8 9C21.8 4.9 18.79 2.2 15 2.2Z"
+            fill="#008BFA"
+            fill-opacity="1.000000"
+            fill-rule="nonzero"
+          />
+        </svg>
+
+        返回
+      </div>
+      <div class="search">
+        <div class="custom-time-select">
+          <el-select
+            class="ace-sel"
+        v-model="queryParams.status"
+            placeholder="健康状态"
+          >
+            <template v-slot:prefix>
+              <el-icon color="rgba(255, 255, 255, 0.75)">
+                <Filter />
+              </el-icon>
+            </template>
+            <!-- // 当前健康状态：1-良好；2-一般；3-较差；4-危险 -->
+
+          <el-option label="全部" value=""></el-option>
+          <el-option label="良好" value="1"></el-option>
+          <el-option label="一般" value="2"></el-option>
+          <el-option label="较差" value="3"></el-option>
+          <el-option label="危险" value="4"></el-option>
+          </el-select>
+        </div>
+        <div class="custom-time-input custom-search-input search-input">
+          <el-input
+            placeholder="请输入设备名称"
+            v-model="queryParams.name"
+          >
+             <template #suffix>
+              <el-icon class="el-input__icon" @click="fetchData"
+                ><Search
+              /></el-icon>
+            </template>
+          </el-input>
+        </div>
+      </div>
+    </div>
+      <div class="records">
+        <el-table border  :data="tableData" style="width: 100%" align="center" class="custom-table">
+          <el-table-column
+            prop="name"
+            label="设备名称"
+            align="center"
+          ></el-table-column>
+          <el-table-column prop="sts" label="当前健康状态" width="140" align="center">
+            <template v-slot="scope">
+              <span :class="getHealthStatusClass(scope.row.sts)">
+                {{ getHealthStatusText(scope.row.sts) }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="lifetime"
+            label="剩余可用时间"
+            width="260"
+            align="center"
+          >
+              <template v-slot="scope">
+              <span>{{ scope.row.lifetime }}天</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="维修策略及更换建议" align="center">
+            <template v-slot="scope">
+              <span>{{ scope.row.strategy }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="280"  align="center">
+            <template v-slot="scope">
+              <el-button class="btns"  link @click="viewDetails(scope.row.id,scope.row.name)"
+                >设备历史建议</el-button
+              >
+              <el-button class="btns"  link @click="exportRecord(scope.row.name)"
+                >导出记录</el-button
+              >
+              <el-button class="btns-warn"  link @click="delBefore(scope.row.id)"
+                >删除</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    <div class="pagination custom-page">
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="totalItems"
+        :page-size="recordsPerPage"
+        v-model:current-page="currentPage"
+      ></el-pagination>
+    </div>
+  </div>
+   <!-- 删除 -->
+  <ModalComponent
+    v-model:visible="delVisible"
+    customClass="custom-modal"
+    width="730px"
+    title="维修策略删除警告"
+  >
+    <!-- 模态框内容插槽 -->
+    <div class="custom-box custom-time-input">
+      <div class="confirmText">确认删除该数据吗?</div>
+      <div class="footer">
+        <div class="btnFooter cancel" @click="delVisible = false">取消</div>
+        <div class="btnFooter btnFooter-big" @click="deleteRecord(form)">
+          确认
+        </div>
+      </div>
+    </div>
+  </ModalComponent>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed,getCurrentInstance,onMounted } from "vue";
+import { ElMessage } from "element-plus";
+import sTitle from "@/components/StructTitle/index.vue";
+import { Filter } from "@element-plus/icons-vue";
+import { Search } from "@element-plus/icons-vue";
+import { useRoute, useRouter } from "vue-router";
+import ModalComponent from "@/components/ModalComponent/index.vue";
+import { downloadDeviceRepair } from "@/api/index";
+import { downloadFile } from "@/utils/utils";
+
+// 基础路由
+const router = useRouter();
+const route = useRoute(); // 获取当前路由对象
+
+
+const getHealthStatusClass = (sts: number) => {
+    switch (sts) {
+    case 1:
+      return "success";
+    case 2:
+      return "info";
+    case 3:
+      return "warn";
+    case 4:
+      return "dange";
+    default:
+      return "info"; // 处理未知或未定义的状态
+  }
+};
+const exportRecord=(value:string)=>{
+
+     downloadFile(downloadDeviceRepair(), "设备历史维修策略.xlsx", {name:value });
+}
+// 当前健康状态：1-良好；2-一般；3-较差；4-危险
+const getHealthStatusText = (status: number) => {
+  switch (status) {
+    case 1:
+      return "良好";
+    case 2:
+      return "一般";
+    case 3:
+      return "较差";
+    case 4:
+      return "危险";
+    default:
+      return "未知状态"; // 处理未知或未定义的状态
+  }
+  }
+
+
+import {
+  repairDetailList,
+  repairDetailDel,
+} from "@/api/index";
+const { proxy } = getCurrentInstance()!;
+// pages
+import {
+  useServerPagination,
+  PaginationResponse,
+} from "@/utils/useServerPagination";
+// table逻辑
+interface DataItem {
+  id: number;
+  name: string;
+  remark: string;
+}
+
+const fetchDataFunction = async (
+  page: number,
+  pageSize: number
+): Promise<PaginationResponse<DataItem>> => {
+    proxy.$loading.start()
+  const response = await repairDetailList({
+    current: page,
+    size: 9,
+    ...queryParams.value,
+  });
+   proxy.$loading.stop();
+  return {
+    data: response.data.records,
+    total: response.data.total,
+  };
+};
+const pagination = useServerPagination<DataItem>(fetchDataFunction);
+let { tableData, currentPage, pageSize, totalItems, loading, fetchData } =
+  pagination;
+const searchClick = fetchData();
+const queryParams = ref({
+  name: "",
+});
+// 初始化逻辑
+onMounted(() => {
+  const pageId = route.query.id;
+  // const pageId = route.query.id;
+  if (pageId) {
+    queryParams.value.id = Number(pageId);
+    // queryParams.value.id = Number(pageId);
+  }
+});
+// 删除逻辑
+let delVisible = ref(false);
+let delId = ref("");
+const delBefore = (id: number) => {
+  delVisible.value = true;
+  delId.value = id;
+};
+const deleteRecord = async () => {
+  let res = await repairDetailDel(delId.value);
+  if (res == true || !!res.data) {
+    ElMessage({
+      message: `操作成功`,
+      type: "success",
+    });
+    delVisible.value = false;
+    fetchData();
+  } else {
+    ElMessage({
+      message: res.msg,
+      type: "error",
+    });
+  }
+};
+
+const back=()=>{
+    router.back(-1)
+}
+const viewDetails = (id: number,name:string) => {
+  router.push({ path: "/repair/MaintenanceStrategyAssistanceViewHis", query: { id,name } });
+  // ElMessage({
+  //   message: `查看详情: ${id}`,
+  //   type: "info",
+  // });
+};
+</script>
+
+<style scoped>
+.maintenance-strategy-assistance {
+  color: #fff;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.records{
+    margin-top: 20px;
+}
+.title {
+  font-size: 24px;
+  color: #fff;
+}
+
+.ace-sear {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.back {
+  padding-left: 20px;
+  width: 60px;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: rgb(0, 139, 250);
+  cursor: pointer;
+}
+.back:hover {
+  text-decoration-line: underline;
+}
+.search {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.search-input {
+  width: 300px;
+}
+.ace-sel {
+  width: 160px;
+  margin-right: 20px;
+}
+.line-select {
+  margin: 0 10px;
+  width: 30px;
+  height: 2px;
+  background: rgba(131, 187, 255, 0.65);
+}
+.btns{
+    color:#4FAFFC
+}
+.btns-warn{
+    color: #F80102;
+}
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+/* 弹窗删除样式 */
+.btnFooter {
+  width: 22%;
+  margin: 5px 0;
+  padding: 5px;
+  height: 40px;
+  box-sizing: border-box;
+  background: rgba(0, 122, 255, 0.25);
+  color: rgba(255, 255, 255, 0.45);
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  border-radius: 20px;
+  border: 2px solid rgb(0, 122, 255);
+}
+.btnFooter:hover {
+  color: #fff;
+}
+.btnFooter-big,
+.cancel {
+  width: 200px;
+}
+.btnFooter-big {
+  background-color: rgb(0, 122, 255);
+  color: #fff;
+}
+.footer {
+  position: absolute;
+  bottom: 0px;
+  left: 15%;
+  width: 70%;
+  display: flex;
+  justify-content: space-between;
+  margin: 30px auto;
+}
+.modal-bot {
+  padding-bottom: 100px;
+}
+.el-input__icon {
+  cursor: pointer;
+}
+.confirmText {
+  font-size: 20px;
+  text-align: center;
+  line-height: 180px;
+  color: rgba(255, 255, 255, 0.85);
+  width: 100%;
+}
+/* 弹窗删除样式结束 */
+</style>

src/views/HealthStatusAnalysis/index.vue

@@ -807,22 +807,22 @@ const gridData = [
 ];
 const determineHealthStatus = (avgNum:any) => {
   let value=avgNum/100
-  if (value < 0.10) {
+  if (value < 1-0.10) {
     return  {
       name:`健康(${avgNum}%)`,
       color:''
     };
-  } else if (value >= 0.10 && value <= 0.25) {
+  } else if (value >= 1-0.10 && value <= 1-0.25) {
     return {
       name:`轻微异常(${avgNum}%)`,
       color:'warn'
     };
-  } else if (value > 0.25 && value <= 0.75) {
+  } else if (value > 1-0.25 && value <= 1-0.75) {
        return {
       name:`故障(${avgNum}%)`,
       color:'danger'
     };
-  } else if (value > 0.75) {
+  } else if (value > 1-0.75) {
        return {
       name:`严重故障(${avgNum}%)`,
       color:'error'

src/views/MaintenanceStrategyAssistance/his.vue

@@ -108,7 +108,7 @@
       <el-pagination
         background
         layout="prev, pager, next"
-        :total="totalRecords"
+        :total="totalItems"
         :page-size="recordsPerPage"
         v-model:current-page="currentPage"
       ></el-pagination>

src/views/MaintenanceStrategyAssistance/view.vue

@@ -111,7 +111,7 @@
       <el-pagination
         background
         layout="prev, pager, next"
-        :total="totalRecords"
+        :total="totalItems"
         :page-size="recordsPerPage"
         v-model:current-page="currentPage"
       ></el-pagination>

src/views/WarningSettings/index.vue

@@ -0,0 +1,400 @@
+<template>
+  <div class="maintenance-strategy-assistance">
+    <div class="header">
+      <div class="title customTitle">
+        <s-title titleText="警告信息与维修建议设置"></s-title>
+      </div>
+    </div>
+
+    <div class="records">
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        align="center"
+        class="custom-table"
+      >
+        <el-table-column
+          prop="name"
+          label="设备名称"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="name"
+          label="健康程度"
+          width="260"
+          align="center"
+        >
+          <template v-slot="scope">
+            <div
+              v-for="(tag, tagIndex) in scope.row.health_status"
+              :key="tagIndex"
+            >
+              <el-input
+                v-if="
+                  editingCell.row === scope.$index &&
+                  editingCell.column === `repairResource-${tagIndex}`
+                "
+                v-model="scope.row.repairResource[tagIndex]"
+                @blur="() => saveEdit(scope.row, `repairResource-${tagIndex}`)"
+                @keyup.enter="
+                  () => saveEdit(scope.row, `repairResource-${tagIndex}`)
+                "
+                class="tag-col-input"
+              />
+              <div
+                v-else
+                class="tag-col"
+                @dblclick="editCell(scope.$index, `repairResource-${tagIndex}`)"
+              >
+                {{ tag }}
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="警告内容" align="center">
+          <template v-slot="scope">
+            <div>
+              <div class="tag-col">{{ scope.row.strategy }}</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="维修时间" align="center">
+          <template v-slot="scope">
+            <div>
+              <div class="tag-col">{{ scope.row.strategy }}</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="维修方法" align="center">
+          <template v-slot="scope">
+            <div>
+              <div class="tag-col">{{ scope.row.strategy }}</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="维修资源" align="center">
+          <template v-slot="scope">
+            <div>
+              <div class="tag-col">{{ scope.row.strategy }}</div>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="pagination custom-page">
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="totalItems"
+        :page-size="recordsPerPage"
+        v-model:current-page="currentPage"
+      ></el-pagination>
+    </div>
+  </div>
+  <!-- 删除 -->
+  <ModalComponent
+    v-model:visible="delVisible"
+    customClass="custom-modal"
+    width="730px"
+    title="维修策略删除警告"
+  >
+    <!-- 模态框内容插槽 -->
+    <div class="custom-box custom-time-input">
+      <div class="confirmText">确认删除该数据吗?</div>
+      <div class="footer">
+        <div class="btnFooter cancel" @click="delVisible = false">取消</div>
+        <div class="btnFooter btnFooter-big" @click="deleteRecord(form)">
+          确认
+        </div>
+      </div>
+    </div>
+  </ModalComponent>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, getCurrentInstance, onMounted } from "vue";
+import { ElMessage } from "element-plus";
+import sTitle from "@/components/StructTitle/index.vue";
+import { Filter } from "@element-plus/icons-vue";
+import { Search } from "@element-plus/icons-vue";
+import { useRoute, useRouter } from "vue-router";
+import ModalComponent from "@/components/ModalComponent/index.vue";
+import { downloadDeviceRepair } from "@/api/index";
+import { downloadFile } from "@/utils/utils";
+
+// 基础路由
+const router = useRouter();
+const route = useRoute(); // 获取当前路由对象
+import { fileList, repairDetailDel } from "@/api/index";
+const { proxy } = getCurrentInstance()!;
+// pages
+import {
+  useServerPagination,
+  PaginationResponse,
+} from "@/utils/useServerPagination";
+// table逻辑
+interface DataItem {
+  id: number;
+  name: string;
+  remark: string;
+}
+
+const fetchDataFunction = async (
+  page: number,
+  pageSize: number
+): Promise<PaginationResponse<DataItem>> => {
+  proxy.$loading.start();
+  const response = await fileList({
+    current: page,
+    size: 9,
+    // ...queryParams.value,
+  });
+  proxy.$loading.stop();
+  let resultData= [
+        {
+            "name": "右DE",
+            "association_ids": "2|3|4",
+            "health_status": "轻微异常|故障|严重故障",
+            "warning_message": "燃油系统压力低|冷却水温度过高|船舶导航系统故障",
+            "suggested_maintenance_time": "每季度|每月|每周",
+            "maintenance_method": "更换磨损零件|深度清洁和校准|全面检查",
+            "required_resources": "新零件|清洁剂和校准工具|检查工具"
+        },
+        {
+            "name": "右GT燃气轮机",
+            "association_ids": "6|7|8",
+            "health_status": "轻微异常|故障|严重故障",
+            "warning_message": "推进系统异常振动|通信系统失效|舱室水浸传感器报警",
+            "suggested_maintenance_time": "每季度|每月|每周",
+            "maintenance_method": "更换磨损零件|深度清洁和校准|全面检查",
+            "required_resources": "新零件|清洁剂和校准工具|检查工具"
+        },
+        {
+            "name": "右齿轮箱",
+            "association_ids": "10|11|12",
+            "health_status": "轻微异常|故障|严重故障",
+            "warning_message": "液压系统压力异常|自动舵系统失灵|主发动机润滑油压力低",
+            "suggested_maintenance_time": "每季度|每月|每周",
+            "maintenance_method": "更换磨损零件|深度清洁和校准|全面检查",
+            "required_resources": "新零件|清洁剂和校准工具|检查工具"
+        },
+        {
+            "name": "右调距桨",
+            "association_ids": "14|15|16",
+            "health_status": "轻微异常|故障|严重故障",
+            "warning_message": "发电机组冷却水温度高|排气温度过高|火灾报警系统激活",
+            "suggested_maintenance_time": "每季度|每月|每周",
+            "maintenance_method": "更换磨损零件|深度清洁和校准|全面检查",
+            "required_resources": "新零件|清洁剂和校准工具|检查工具"
+        },
+        {
+            "name": "左DE",
+            "association_ids": "18|19|20",
+            "health_status": "轻微异常|故障|严重故障",
+            "warning_message": "燃油系统压力低|冷却水温度过高|船舶导航系统故障",
+            "suggested_maintenance_time": "每季度|每月|每周",
+            "maintenance_method": "更换磨损零件|深度清洁和校准|全面检查",
+            "required_resources": "新零件|清洁剂和校准工具|检查工具"
+        },
+        {
+            "name": "左GT燃气轮机",
+            "association_ids": "22|23|24",
+            "health_status": "轻微异常|故障|严重故障",
+            "warning_message": "推进系统异常振动|通信系统失效|舱室水浸传感器报警",
+            "suggested_maintenance_time": "每季度|每月|每周",
+            "maintenance_method": "更换磨损零件|深度清洁和校准|全面检查",
+            "required_resources": "新零件|清洁剂和校准工具|检查工具"
+        },
+        {
+            "name": "左齿轮箱",
+            "association_ids": "26|27|28",
+            "health_status": "轻微异常|故障|严重故障",
+            "warning_message": "液压系统压力异常|自动舵系统失灵|主发动机润滑油压力低",
+            "suggested_maintenance_time": "每季度|每月|每周",
+            "maintenance_method": "更换磨损零件|深度清洁和校准|全面检查",
+            "required_resources": "新零件|清洁剂和校准工具|检查工具"
+        },
+        {
+            "name": "左调距桨",
+            "association_ids": "30|31|32",
+            "health_status": "轻微异常|故障|严重故障",
+            "warning_message": "发电机组冷却水温度高|排气温度过高|火灾报警系统激活1",
+            "suggested_maintenance_time": "每季度|每月|每周",
+            "maintenance_method": "更换磨损零件|深度清洁和校准|全面检查",
+            "required_resources": "新零件|清洁剂和校准工具|检查工具"
+        }
+    ]
+   let  resultSend=resultData.map(item=>{
+        return {
+            "name": item.name,
+            "association_ids": item.association_ids.split('|'),
+            "health_status":item.health_status.split('|'),
+            "warning_message": item.warning_message.split('|'),
+            "suggested_maintenance_time":item.suggested_maintenance_time.split('|'),
+            "maintenance_method": item.maintenance_method.split('|'),
+            "required_resources": item.required_resources.split('|')
+        }
+    })
+  return {
+    // data: response.data.records,
+    data:resultSend,
+    total: response.data.total,
+  };
+};
+const pagination = useServerPagination<DataItem>(fetchDataFunction);
+let { tableData, currentPage, pageSize, totalItems, loading, fetchData } =
+  pagination;
+const searchClick = fetchData();
+const queryParams = ref({
+  name: "",
+});
+const editingCell = ref({ row: null, column: null });
+
+const editCell = (rowIndex: number, column: string) => {
+  editingCell.value = { row: rowIndex, column: column };
+  debugger
+};
+
+const saveEdit = (row, column) => {
+  console.log("Saving data:", row, column);
+  // 在这里处理保存逻辑，例如发送请求到服务器
+  editingCell.value = { row: null, column: null };
+};
+</script>
+
+<style scoped>
+.tag-col {
+  box-sizing: border-box;
+  border: 1px solid rgba(131, 187, 255, 0.4);
+  background: rgba(0, 122, 255, 0.1);
+  /* line-height: 30px; */
+  height: 30px;
+  padding: 10px;
+  margin: 10px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  justify-content: center;
+  text-align: center;
+}
+.maintenance-strategy-assistance {
+  color: #fff;
+}
+::v-deep .customTitle .right-line {
+  width: 586px;
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.records {
+  margin-top: 20px;
+}
+.title {
+  font-size: 24px;
+  color: #fff;
+}
+
+.ace-sear {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.back {
+  padding-left: 20px;
+  width: 60px;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: rgb(0, 139, 250);
+  cursor: pointer;
+}
+.back:hover {
+  text-decoration-line: underline;
+}
+.search {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.search-input {
+  width: 300px;
+}
+.ace-sel {
+  width: 160px;
+  margin-right: 20px;
+}
+.line-select {
+  margin: 0 10px;
+  width: 30px;
+  height: 2px;
+  background: rgba(131, 187, 255, 0.65);
+}
+.btns {
+  color: #4faffc;
+}
+.btns-warn {
+  color: #f80102;
+}
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+/* 弹窗删除样式 */
+.btnFooter {
+  width: 22%;
+  margin: 5px 0;
+  padding: 5px;
+  height: 40px;
+  box-sizing: border-box;
+  background: rgba(0, 122, 255, 0.25);
+  color: rgba(255, 255, 255, 0.45);
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  border-radius: 20px;
+  border: 2px solid rgb(0, 122, 255);
+}
+.btnFooter:hover {
+  color: #fff;
+}
+.btnFooter-big,
+.cancel {
+  width: 200px;
+}
+.btnFooter-big {
+  background-color: rgb(0, 122, 255);
+  color: #fff;
+}
+.footer {
+  position: absolute;
+  bottom: 0px;
+  left: 15%;
+  width: 70%;
+  display: flex;
+  justify-content: space-between;
+  margin: 30px auto;
+}
+.modal-bot {
+  padding-bottom: 100px;
+}
+.el-input__icon {
+  cursor: pointer;
+}
+.confirmText {
+  font-size: 20px;
+  text-align: center;
+  line-height: 180px;
+  color: rgba(255, 255, 255, 0.85);
+  width: 100%;
+}
+/* 弹窗删除样式结束 */
+</style>