From e9a0347b0e954746483cf0b4ddba2705a96094c5 Mon Sep 17 00:00:00 2001
From: zhujiyan <17812234322@163.com>
Date: Tue, 27 Aug 2024 18:37:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ProTable/index.vue    |   6 +
 .../src/layouts/components/Footer/index.vue   |  44 +-
 frontend/src/styles/element.scss              |  32 +-
 frontend/src/views/home/components/table.vue  | 409 ++++++++++++++----
 frontend/src/views/home/components/tree.vue   |  57 ++-
 frontend/src/views/home/tabs/dashboard.vue    |  54 ++-
 frontend/src/views/home/tabs/model.vue        |   6 +-
 frontend/src/views/plan/planList/index.vue    |  24 +-
 8 files changed, 466 insertions(+), 166 deletions(-)

diff --git a/frontend/src/components/ProTable/index.vue b/frontend/src/components/ProTable/index.vue
index 153f19e..14ac80c 100644
--- a/frontend/src/components/ProTable/index.vue
+++ b/frontend/src/components/ProTable/index.vue
@@ -50,6 +50,7 @@
       :border="border"
       :row-key="rowKey"
       @selection-change="selectionChange"
+      class="custom-table-header"
     >
       <!-- 默认插槽 -->
       <slot />
@@ -331,3 +332,8 @@ defineExpose({
   enumMap
 });
 </script>
+<style lang="scss" scoped>
+::v-deep .custom-table-header .el-table__header-wrapper .el-table__header{
+  background-color: red !important; /* 修改为你想要的颜色 */
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/layouts/components/Footer/index.vue b/frontend/src/layouts/components/Footer/index.vue
index 7f73907..a665738 100644
--- a/frontend/src/layouts/components/Footer/index.vue
+++ b/frontend/src/layouts/components/Footer/index.vue
@@ -1,32 +1,46 @@
 <template>
   <div class="footer flx-align-center pl10">
     <el-dropdown>
-    <!-- <span class="el-dropdown-link">
+      <!-- <span class="el-dropdown-link">
       {{ title }}
       <el-icon class="el-icon--right">
         <arrow-down />
       </el-icon>
     </span> -->
-    <el-button type="primary">
-       {{ title }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
+      <el-button type="primary">
+        {{ title }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
       </el-button>
-    <template #dropdown>
-      <el-dropdown-menu>
-        <el-dropdown-item @click="title='模拟式模式'">模拟式模式</el-dropdown-item>
-        <el-dropdown-item @click="title='数字式模式'">数字式模式</el-dropdown-item>
-        <el-dropdown-item @click="title='对比式模式'">对比式模式</el-dropdown-item>
-       
-      </el-dropdown-menu>
-    </template>
-  </el-dropdown>
-    <!-- <a href="http://www.shining-electric.com/" target="_blank"> 2024 © 南京灿能电力自动化股份有限公司 </a> -->
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item @click="title = '模拟式模式'"
+            >模拟式模块</el-dropdown-item
+          >
+          <el-dropdown-item @click="title = '数字式模式'"
+            >数字式模块</el-dropdown-item
+          >
+          <el-dropdown-item @click="title = '对比式模式'"
+            >对比式模块</el-dropdown-item
+          >
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+    <p> <a href="http://www.shining-electric.com/" target="_blank"> 2024 © 南京灿能电力自动化股份有限公司 </a></p>
   </div>
 </template>
 <script lang="ts" setup>
 import { ref, reactive, computed } from "vue";
-const title=ref('模拟式模式')
-
+const title = ref("模拟式模块");
 </script>
 <style scoped lang="scss">
 @import "./index.scss";
+.footer{
+  position: relative;
+  p{
+    position: absolute;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ line-height: 40px;
+  }
+}
 </style>
diff --git a/frontend/src/styles/element.scss b/frontend/src/styles/element.scss
index b603e7e..03c7eea 100644
--- a/frontend/src/styles/element.scss
+++ b/frontend/src/styles/element.scss
@@ -23,7 +23,12 @@
 /* mask image */
 .mask-image {
   padding-right: 50px;
-  mask-image: linear-gradient(90deg, #000000 0%, #000000 calc(100% - 50px), transparent);
+  mask-image: linear-gradient(
+    90deg,
+    #000000 0%,
+    #000000 calc(100% - 50px),
+    transparent
+  );
 }
 
 /* custom card */
@@ -139,15 +144,22 @@
     table {
       width: 100%;
     }
-    .el-table__header th {
-      height: 45px;
+    .el-table__header th,
+    .el-table-fixed-column--left th,
+    .el-table-fixed-column--right th {
+      // height: 45px;
       font-size: 15px;
       font-weight: bold;
-      color: var(--el-text-color-primary);
-      background: var(--el-fill-color-light);
+      // color: var(--el-text-color-primary);
+      // background: var(--el-fill-color-light);
+      height: 40px;
+      background: var(--el-color-primary) !important;
+      color: #fff;
     }
+
     .el-table__row {
-      height: 45px;
+      // height: 45px;
+      height: 40px;
       font-size: 14px;
       .move {
         cursor: move;
@@ -232,7 +244,9 @@
   .el-select {
     width: 100%;
   }
-
+  .el-select-dropdown__item:hover {
+    background: red !important;
+  }
   // drawer-form 中存在两列 form-item 样式
   .drawer-multiColumn-form {
     display: flex;
@@ -258,6 +272,6 @@
   }
 }
 
-.el-form-item{
+.el-form-item {
   margin-right: 10px !important;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/views/home/components/table.vue b/frontend/src/views/home/components/table.vue
index b5d0c91..e05cf6a 100644
--- a/frontend/src/views/home/components/table.vue
+++ b/frontend/src/views/home/components/table.vue
@@ -1,89 +1,346 @@
 <template>
-  <div class="table">
-    <el-table :data="tableData" stripe style="width: 100%; height: 100%">
-      <el-table-column fixed type="selection" width="55" />
-      <el-table-column align="center" prop="date" label="设备序列号" fixed />
-      <el-table-column
-        align="center"
-        prop="name"
-        label="设备类型"
-      />
-      <el-table-column
-        align="center"
-        prop="state"
-        label="制造厂商"
-      />
-      <el-table-column
-        align="center"
-        prop="address"
-        label="MAC/IP"
-        show-overflow-tooltip
-      />
-      <!-- <el-table-column align="center" fixed="right" label="操作" width="120">
-        <template #default>
-          <el-button link type="primary" size="small" @click="handleClick">
-            删除
-          </el-button>
-          <el-button link type="primary" size="small">修改</el-button>
-        </template>
-      </el-table-column> -->
-    </el-table>
+  <div class="planList">
+    <ProTable
+      ref="proTable"
+      :columns="columns"
+      :request-api="getTableList"
+      :init-param="initParam"
+      :data-callback="dataCallback"
+      @drag-sort="sortTable"
+      :height="tableHeight"
+    >
+      <!-- 表格操作 -->
+      <!-- <template #operation="scope">
+        <el-button
+          type="primary"
+          link
+          :icon="View"
+          @click="openDrawer('查看', scope.row)"
+          >查看</el-button
+        >
+        <el-button
+          type="primary"
+          link
+          :icon="EditPen"
+          @click="openDrawer('编辑', scope.row)"
+          >导出</el-button
+        >
+        <el-button
+          type="primary"
+          link
+          :icon="Delete"
+          @click="deleteAccount(scope.row)"
+          >删除</el-button
+        >
+      </template> -->
+    </ProTable>
   </div>
 </template>
-<script lang="ts" setup>
-import { ref, onMounted } from "vue";
-const handleClick = () => {
-  console.log("click");
+
+<script setup lang="tsx" name="useProTable">
+import { ref, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { User } from "@/api/interface";
+import { useHandleData } from "@/hooks/useHandleData";
+import { useDownload } from "@/hooks/useDownload";
+import { ElMessage, ElMessageBox } from "element-plus";
+import ProTable from "@/components/ProTable/index.vue";
+import ImportExcel from "@/components/ImportExcel/index.vue";
+import {
+  CirclePlus,
+  Delete,
+  EditPen,
+  Download, 
+  Upload,
+  View,
+  Refresh,
+  Search,
+} from "@element-plus/icons-vue";
+import { getPlanList } from "@/api/plan/planList";
+const router = useRouter();
+const value1 = ref("");
+const value2 = ref("");
+const tableHeight = ref(0);
+tableHeight.value = "350";
+
+// 跳转详情页
+const toDetail = () => {
+  router.push(
+    `/proTable/useProTable/detail/${Math.random().toFixed(3)}?params=detail-page`
+  );
+};
+const searchForm = ref({
+  intervalType: 0,
+  time: ["2024-08-20", "2024-08-27"],
+  searchBeginTime: "",
+  searchEndTime: "",
+  checkStatus: 0,
+  checkReportStatus: 0,
+  checkResult: 0,
+});
+// ProTable 实例
+const proTable = ref<ProTableInstance>();
+
+// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
+const initParam = reactive({ type: 1, pageNum: 1, pageSize: 10 });
+
+// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
+// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
+const tableList = ref([]);
+// console.log(data, ">>>>>>>>>>>");
+//   tableList.value = data;
+//   console.log(tableList.value, "?????????????????????177");
+const dataCallback = (data: any) => {
+  return {
+    list: data || data.data || data.list,
+    total: data.length || data.total, //total
+  };
+};
+console.log(proTable.value, "proTable.value?proTable.value?proTable.value?");
+// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
+// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
+const getTableList = (params: any) => {
+  let newParams = JSON.parse(JSON.stringify(params));
+  newParams.createTime && (newParams.startTime = newParams.createTime[0]);
+  newParams.createTime && (newParams.endTime = newParams.createTime[1]);
+  delete newParams.createTime;
+  return getPlanList(newParams);
+};
+// 表格配置项
+const columns = reactive<ColumnProps<User.ResUserList>[]>([
+  { type: "selection", fixed: "left", width: 70 },
+  {
+    prop: "checkMode",
+    label: "设备序列号",
+    render: (scope) => {
+      return scope.row.checkMode == 0
+        ? "设备1"
+        : scope.row.checkMode == 1
+          ? "设备2"
+          : scope.row.checkMode == 2
+            ? "设备3"
+            : scope.row.checkMode;
+    },
+  },
+  {
+    prop: "checkMode",
+    label: "设备类型",
+    render: (scope) => {
+      return scope.row.checkMode == 0
+        ? "PQS991"
+        : scope.row.checkMode == 1
+          ? "PQS882"
+          : scope.row.checkMode == 2
+            ? "PQS6666"
+            : scope.row.checkMode;
+    },
+  },
+  {
+    prop: "checkFrom",
+    label: "制造厂商",
+    render: (scope) => {
+      return scope.row.checkFrom == 0
+        ? "南京灿能"
+        : scope.row.checkFrom == 1
+          ? "南瑞继保"
+          : scope.row.checkFrom == 2
+            ? "/"
+            : scope.row.checkFrom;
+    },
+  },
+  {
+    prop: "numberFromName",
+    label: "MAC/IP",
+    render: (scope) => {
+      return scope.row.numberFromName == 0
+        ? "192.168.0.1"
+        : scope.row.numberFromName == 1
+          ? "192.168.0.2"
+          : scope.row.numberFromName == 2
+            ? "192.168.0.3"
+            : scope.row.numberFromName;
+    },
+  },
+  // {
+  //   prop: "checkExe",
+  //   label: "检测脚本",
+  //   render: (scope) => {
+  //     return scope.row.checkExe == 0
+  //       ? "国网入网检测脚本（单影响量-模拟式）"
+  //       : scope.row.checkExe == 1
+  //         ? "国网入网检测脚本"
+  //         : scope.row.checkExe == 2
+  //           ? "/"
+  //           : scope.row.checkExe;
+  //   },
+  // },
+  // {
+  //   prop: "wctx",
+  //   label: "误差体系",
+  //   render: (scope) => {
+  //     return scope.row.wctx == 0
+  //       ? "Q/GDW 1650.2- 2016"
+  //       : scope.row.wctx == 1
+  //         ? "Q/GDW 10650.2 - 2021"
+  //         : scope.row.wctx == 2
+  //           ? "/"
+  //           : scope.row.wctx;
+  //   },
+  // },
+  // {
+  //   prop: "checkStatus",
+  //   label: "检测状态",
+  //   width: 120,
+  //   render: (scope) => {
+  //     return scope.row.checkStatus == 1
+  //       ? "未检测"
+  //       : scope.row.checkStatus == 2
+  //         ? "检测中"
+  //         : scope.row.checkStatus == 3
+  //           ? "检测完成"
+  //           : scope.row.checkStatus;
+  //   },
+  // },
+  // {
+  //   prop: "checkReport",
+  //   label: "检测报告",
+  //   width: 120,
+  //   render: (scope) => {
+  //     return scope.row.checkReport == 1
+  //       ? "未生成"
+  //       : scope.row.checkReport == 2
+  //         ? "部分生成"
+  //         : scope.row.checkReport == 3
+  //           ? "全部生成"
+  //           : scope.row.checkReport;
+  //   },
+  // },
+  // {
+  //   prop: "checkResult",
+  //   label: "检测结果",
+  //   width: 120,
+  //   render: (scope) => {
+  //     return scope.row.checkReport == 1
+  //       ? "/"
+  //       : scope.row.checkReport == 2
+  //         ? "符合"
+  //         : scope.row.checkReport == 3
+  //           ? "不符合"
+  //           : scope.row.checkReport;
+  //   },
+  // },
+  // {
+  //   prop: "parentNode",
+  //   label: "父节点",
+  //   width: 90,
+  //   render: (scope) => {
+  //     return scope.row.checkReport == 0
+  //       ? "/"
+  //       : scope.row.checkReport == 1
+  //         ? "检测计划1"
+  //         : scope.row.checkReport == 2
+  //           ? "检测计划2"
+  //           : scope.row.checkReport == 3
+  //             ? "检测计划3"
+  //             : scope.row.checkReport;
+  //   },
+  // },
+  // { prop: "operation", label: "操作", fixed: "right", width: 250 },
+]);
+//重置查询条件
+const resetSearchForm = () => {
+  searchForm.value = {
+    intervalType: 0,
+    time: ["2024-08-20", "2024-08-27"],
+    searchBeginTime: "",
+    searchEndTime: "",
+    checkStatus: 0,
+    checkReportStatus: 0,
+    checkResult: 0,
+  };
+};
+//查询
+const handleSearch = () => {
+  proTable.value?.getTableList();
+};
+//重置
+const handleRefresh = () => {
+  proTable.value?.getTableList();
+};
+// 表格拖拽排序
+const sortTable = ({
+  newIndex,
+  oldIndex,
+}: {
+  newIndex?: number;
+  oldIndex?: number;
+}) => {
+  console.log(newIndex, oldIndex);
+  console.log(proTable.value?.tableData);
+  ElMessage.success("修改列表排序成功");
 };
 
-const tableData = [
-  {
-    date: "B0000F03",
-    name: "PQS882",
-    state: "南京灿能",
-    city: "Los Angeles",
-    address: "192.168.0.0.0",
-    zip: "CA 90036",
-    tag: "Home",
-  },
-  {
-    date: "B0000F02",
-    name: "PQS882",
-    state: "南京灿能",
-    city: "Los Angeles",
-    address: "192.168.0.0.0",
-    zip: "CA 90036",
-    tag: "Office",
-  },
-  {
-    date: "B0000F04",
-    name: "PQS882",
-    state: "南京灿能",
-    city: "Los Angeles",
-    address: "192.168.0.0.0",
-    zip: "CA 90036",
-    tag: "Home",
-  },
-  {
-    date: "B0000F01",
-    name: "PQS882",
-    state: "南京灿能",
-    city: "Los Angeles",
-    address: "192.168.0.0.0",
-    zip: "CA 90036",
-    tag: "Office",
-  },
-];
-onMounted(() => {
-  console.log(
-    tableData,
-    "tableDatatableDatatableDatatableDatatableDatatableDatatableData"
+// 删除用户信息
+const deleteAccount = async (params: User.ResUserList) => {
+  await useHandleData(
+    deleteUser,
+    { id: [params.id] },
+    `删除【${params.username}】`
   );
+  proTable.value?.getTableList();
+};
+
+// 批量删除用户信息
+const batchDelete = async (id: string[]) => {
+  await useHandleData(deleteUser, { id }, "删除所选用户信息");
+  proTable.value?.clearSelection();
+  proTable.value?.getTableList();
+};
+
+// 重置用户密码
+const resetPass = async (params: User.ResUserList) => {
+  await useHandleData(
+    resetUserPassWord,
+    { id: params.id },
+    `重置【${params.username}】用户密码`
+  );
+  proTable.value?.getTableList();
+};
+
+// 切换用户状态
+const changeStatus = async (row: User.ResUserList) => {
+  await useHandleData(
+    changeUserStatus,
+    { id: row.id, status: row.status == 1 ? 0 : 1 },
+    `切换【${row.username}】用户状态`
+  );
+  proTable.value?.getTableList();
+};
+onMounted(() => {
+  console.log(proTable.value?.tableData);
 });
 </script>
 <style lang="scss" scoped>
-.table {
+.planList {
   width: 100%;
   height: 100%;
 }
+::v-deep .el-select {
+  width: 150px !important;
+}
+
+.el-form {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  .el-form-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .el-button {
+      margin: 0 !important;
+      margin-right: 10px !important;
+    }
+  }
+}
 </style>
diff --git a/frontend/src/views/home/components/tree.vue b/frontend/src/views/home/components/tree.vue
index b172181..d61a481 100644
--- a/frontend/src/views/home/components/tree.vue
+++ b/frontend/src/views/home/components/tree.vue
@@ -1,26 +1,38 @@
 <template>
   <div class="plan_tree">
-    <el-input placeholder="请输入计划名称" v-model="searchForm.planName"></el-input>
+    <div class="search_view">
+      <el-input
+        placeholder="请输入计划名称"
+        v-model="searchForm.planName"
+      ></el-input>
+      <Menu style="width: 26px;height: 26px; margin-left: 8px;cursor: pointer;" @click.stop="detail({})" />
+    </div>
     <div class="tree_container">
-      <el-tree :data="data" ref="treeRef" :filter-node-method="filterNode" :props="defaultProps" node-key="id"
-        default-expand-all :default-checked-keys="defaultChecked" @node-click="handleNodeClick">
+      <el-tree
+        :data="data"
+        ref="treeRef"
+        :filter-node-method="filterNode"
+        :props="defaultProps"
+        node-key="id"
+        default-expand-all
+        :default-checked-keys="defaultChecked"
+        @node-click="handleNodeClick"
+      >
         <template #default="{ node, data }">
           <span class="custom-tree-node">
+            <Platform v-if="!data.pid" style="width:14px;height: 12px;margin-right:8px;" :style="{color:node.label=='未检测'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}"/>
             <span>{{ node.label }}</span>
-            <Menu v-if="data.pid" @click.stop="detail(data)" style="width: 12px;margin-left: 8px;"/>
+            <!-- <Menu v-if="data.pid" @click.stop="detail(data)" style="width: 12px;margin-left: 8px;"/> -->
           </span>
         </template>
-
       </el-tree>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
 import { ref, onMounted, defineExpose, watch } from "vue";
-import {
-  Menu
-} from '@element-plus/icons-vue'
-const emit = defineEmits(['jump'])
+import { Menu,Platform} from "@element-plus/icons-vue";
+const emit = defineEmits(["jump"]);
 const data: any = ref([]);
 const defaultProps = {
   children: "children",
@@ -30,11 +42,11 @@ const defaultProps = {
 const searchForm = ref({
   planName: "",
 });
-const defaultChecked = ref([])
+const defaultChecked = ref([]);
 const getTreeData = (val: any) => {
-  defaultChecked.value = []
+  defaultChecked.value = [];
   data.value = val;
-  defaultChecked.value.push(data.value[0].children[0].id)
+  defaultChecked.value.push(data.value[0].children[0].id);
 };
 const filterText = ref("");
 const treeRef = ref();
@@ -55,11 +67,9 @@ const filterNode = (value: string, data) => {
   return data.name.includes(value);
 };
 // 点击详情
-const detail=(e:any) => {
- 
-  emit('jump',e)
-  
-}
+const detail = (e: any) => {
+  emit("jump", e);
+};
 onMounted(() => {
   console.log();
 });
@@ -74,7 +84,18 @@ defineExpose({ getTreeData });
   padding: 5px;
   height: calc(100% - 70px);
   background-color: #fff;
-
+  .search_view {
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 5px;
+    box-sizing: border-box;
+    align-items: center;
+    .el-input{
+      margin-top: 6px;
+    }
+  }
   .el-input {
     width: 100%;
     margin: 0 10px 10px 0;
diff --git a/frontend/src/views/home/tabs/dashboard.vue b/frontend/src/views/home/tabs/dashboard.vue
index 30032a2..d21cdbd 100644
--- a/frontend/src/views/home/tabs/dashboard.vue
+++ b/frontend/src/views/home/tabs/dashboard.vue
@@ -105,28 +105,6 @@
           </el-form-item>
         </el-form>
       </div>
-      <!-- 功能选择 -->
-      <div class="container_function">
-        <div class="function_title"><p>功能选择</p></div>
-        <div class="function_main">
-          <div
-            class="function_item"
-            :class="
-              item.checked ? 'function_item checked_function' : 'function_item'
-            "
-            v-for="(item, index) in tabsList"
-            :key="index"
-            @click="handleCheckFunction(index)"
-          >
-            <div class="item_img">
-              <img :src="item.img" alt="" />
-            </div>
-            <div class="item_text">
-              <p>{{ item.label }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
       <!-- 饼图 -->
       <div class="container_charts">
         <div class="charts_info">
@@ -171,6 +149,28 @@
             ref="pieRef3"
           ></pie>
         </div>
+      </div>
+            <!-- 功能选择 -->
+            <div class="container_function">
+        <!-- <div class="function_title"><p>功能选择</p></div> -->
+        <div class="function_main">
+          <div
+            class="function_item"
+            :class="
+              item.checked ? 'function_item checked_function' : 'function_item'
+            "
+            v-for="(item, index) in tabsList"
+            :key="index"
+            @click="handleCheckFunction(index)"
+          >
+            <div class="item_img">
+              <img :src="item.img" alt="" />
+            </div>
+            <div class="item_text">
+              <p>{{ item.label }}</p>
+            </div>
+          </div>
+        </div>
       </div>
       <!-- 列表数据 -->
       <div class="container_table">
@@ -187,10 +187,7 @@ import { useRouter } from "vue-router";
 import tree from "../components/tree.vue";
 import Table from "../components/table.vue";
 import { data } from "@/api/plan/static.json";
-import {
-  Refresh,
-  Search,
-} from "@element-plus/icons-vue";
+import { Refresh, Search } from "@element-plus/icons-vue";
 const treeRef = ref();
 const form: any = ref({
   activeTabs: 0, //功能选择
@@ -471,7 +468,7 @@ onMounted(() => {
       box-sizing: border-box;
       .function_title {
         height: 100%;
-
+        height: 20px;
         width: 100px;
         // line-height: 70px;
         display: flex;
@@ -541,7 +538,7 @@ onMounted(() => {
     }
     .container_charts {
       width: 100%;
-      height: 200px;
+      min-height: 200px !important;
       // border: 2px solid green;
       background-color: #eee;
       display: flex;
@@ -559,6 +556,7 @@ onMounted(() => {
     .container_table {
       width: 100%;
       flex: 1;
+      // height: 400px;
       border-radius: 4px;
     }
   }
diff --git a/frontend/src/views/home/tabs/model.vue b/frontend/src/views/home/tabs/model.vue
index cab0fb3..3446fbe 100644
--- a/frontend/src/views/home/tabs/model.vue
+++ b/frontend/src/views/home/tabs/model.vue
@@ -42,19 +42,19 @@ const activeIndex = ref("1-1");
 const router = useRouter();
 const modeList = [
   {
-    name: "模拟式模式",
+    name: "模拟式模块",
     subName: "未启用模拟式检测计划",
     img: "/src/assets/images/dashboard/1.svg",
     isActive: true,
   },
   {
-    name: "数字式模式",
+    name: "数字式模块",
     subName: "启用数字检测计划",
     img: "/src/assets/images/dashboard/2.svg",
     isActive: false,
   },
   {
-    name: "对比式模式",
+    name: "对比式模块",
     subName: "启用对比式检测计划",
     img: "/src/assets/images/dashboard/3.svg",
     isActive: false,
diff --git a/frontend/src/views/plan/planList/index.vue b/frontend/src/views/plan/planList/index.vue
index 4327435..63b649a 100644
--- a/frontend/src/views/plan/planList/index.vue
+++ b/frontend/src/views/plan/planList/index.vue
@@ -63,6 +63,10 @@
               >查询</el-button
             >
             <el-button :icon="Refresh" @click="handleRefresh">重置</el-button>
+            <el-button type="primary" :icon="Upload" @click="handleRefresh">导入</el-button>
+            <el-button type="primary" :icon="Check" @click="handleRefresh">合并</el-button>
+            <el-button type="primary" :icon="Plus" @click="handleRefresh">新增</el-button>
+            <el-button type="danger" :icon="Delete" @click="handleRefresh">删除</el-button>
           </el-form-item>
         </el-form>
 
@@ -150,6 +154,8 @@ import {
   Download,
   Upload,
   View,
+  Check,
+  Plus,
   Refresh,
   Search,
 } from "@element-plus/icons-vue";
@@ -270,7 +276,7 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
   },
   {
     prop: "numberFromName",
-    label: "数字源名称",
+    label: "源名称",
     render: (scope) => {
       return scope.row.numberFromName == 0
         ? "分钟统计数据最大值"
@@ -349,22 +355,6 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
             : scope.row.checkReport;
     },
   },
-  {
-    prop: "parentNode",
-    label: "父节点",
-    width: 90,
-    render: (scope) => {
-      return scope.row.checkReport == 0
-        ? "/"
-        : scope.row.checkReport == 1
-          ? "检测计划1"
-          : scope.row.checkReport == 2
-            ? "检测计划2"
-            : scope.row.checkReport == 3
-              ? "检测计划3"
-              : scope.row.checkReport;
-    },
-  },
   { prop: "operation", label: "操作", fixed: "right", width: 250 },
 ]);
 //重置查询条件