From a4b96066e067ed78ba21ae2ed2ff96f5c5f80c4a Mon Sep 17 00:00:00 2001
From: hongawen <83944980@qq.com>
Date: Mon, 6 Jan 2025 14:02:22 +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/.env.development                     |   4 +-
 frontend/src/api/plan/plan.ts                 |   3 -
 .../src/layouts/components/Main/index.scss    |   4 +-
 .../src/views/demo/proTable/doubleColumn.vue  |  80 --
 frontend/src/views/demo/proTable/index.vue    | 200 -----
 frontend/src/views/demo/proTable/open.vue     | 177 -----
 .../src/views/demo/proTable/singleColumn.vue  | 169 -----
 frontend/src/views/home/components/table.vue  |   5 +-
 frontend/src/views/home/components/tree.vue   |   7 +-
 frontend/src/views/home/tabs/dashboard.vue    | 705 ++++++++----------
 10 files changed, 302 insertions(+), 1052 deletions(-)
 delete mode 100644 frontend/src/views/demo/proTable/doubleColumn.vue
 delete mode 100644 frontend/src/views/demo/proTable/index.vue
 delete mode 100644 frontend/src/views/demo/proTable/open.vue
 delete mode 100644 frontend/src/views/demo/proTable/singleColumn.vue

diff --git a/frontend/.env.development b/frontend/.env.development
index 282bdb3..71db1d7 100644
--- a/frontend/.env.development
+++ b/frontend/.env.development
@@ -19,6 +19,6 @@ VITE_API_URL=/api
 
 # 开发环境跨域代理，支持配置多个
 
-VITE_PROXY=[["/api","http://192.168.1.124:18092/"]]
-# VITE_PROXY=[["/api","http://192.168.1.125:18092/"]]
+#VITE_PROXY=[["/api","http://192.168.1.124:18092/"]]
+VITE_PROXY=[["/api","http://192.168.1.125:18092/"]]
 # VITE_PROXY=[["/api","http://192.168.1.138:8080/"]]张文
diff --git a/frontend/src/api/plan/plan.ts b/frontend/src/api/plan/plan.ts
index 744b89b..70c7215 100644
--- a/frontend/src/api/plan/plan.ts
+++ b/frontend/src/api/plan/plan.ts
@@ -1,8 +1,5 @@
-import type { ResPage } from '@/api/interface'
 import type { Plan } from './interface'
 import http from '@/api'
-import type { TestSource } from '../device/interface/testSource'
-import type { TestScript } from '../device/interface/testScript'
 import type { ErrorSystem } from '../device/interface/error'
 import type { Device } from '../device/interface/device'
 
diff --git a/frontend/src/layouts/components/Main/index.scss b/frontend/src/layouts/components/Main/index.scss
index 06aeabe..34be28d 100644
--- a/frontend/src/layouts/components/Main/index.scss
+++ b/frontend/src/layouts/components/Main/index.scss
@@ -1,7 +1,7 @@
 .el-main {
   box-sizing: border-box;
-  padding: 20px;//主体padding
-  overflow-x: hidden;
+  padding: 15px;//主体padding
+  overflow: hidden;
   background-color: var(--el-bg-color-page);
 }
 .el-footer {
diff --git a/frontend/src/views/demo/proTable/doubleColumn.vue b/frontend/src/views/demo/proTable/doubleColumn.vue
deleted file mode 100644
index 53eaeea..0000000
--- a/frontend/src/views/demo/proTable/doubleColumn.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<!--双列-->
-<template>
-  <el-dialog v-model='dialogVisible' :title='title' v-bind='dialogMiddle' >
-    <el-scrollbar>
-      <el-form :inline="false"  label-width="auto"  ref="formRef" class='form-two'>
-        <el-form-item label="姓名" prop="username" >
-          <el-input
-          ></el-input>
-        </el-form-item>
-
-        <el-form-item label="性别" prop="gender">
-          <el-input
-          ></el-input>
-        </el-form-item>
-
-        <el-form-item label="年龄" prop="age">
-          <el-input
-          ></el-input>
-        </el-form-item>
-
-        <el-form-item label="身份证号" prop="id">
-          <el-input
-          ></el-input>
-        </el-form-item>
-
-        <el-form-item label="邮箱" prop="email">
-          <el-input
-          ></el-input>
-        </el-form-item>
-
-        <el-form-item label="居住地址" prop="address">
-          <el-input
-          ></el-input>
-        </el-form-item>
-
-        <el-form-item label="手机" prop="phone">
-          <el-input
-          ></el-input>
-        </el-form-item>
-
-        <el-form-item label="来源" prop="source">
-          <el-input
-          ></el-input>
-        </el-form-item>
-
-      </el-form>
-    </el-scrollbar>
-
-    <template #footer>
-      <div class='dialog-footer'>
-        <el-button @click='close()'>取消</el-button>
-        <el-button type='primary' @click='confirmForm()'>确定</el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-<script setup lang='ts'>
-import { dialogMiddle } from '@/utils/elementBind'
-
-const dialogVisible = ref(false)
-const title = ref('单列弹出框')
-const open = (textTitle: string) => {
-  dialogVisible.value = true
-  title.value = textTitle
-}
-
-const close = () => {
-  dialogVisible.value = false
-}
-
-const confirmForm = () => {
-  ElMessage.info('业务数据提交')
-}
-
-defineExpose({ open })
-
-</script>
-<style>
-
-</style>
\ No newline at end of file
diff --git a/frontend/src/views/demo/proTable/index.vue b/frontend/src/views/demo/proTable/index.vue
deleted file mode 100644
index 62baa9e..0000000
--- a/frontend/src/views/demo/proTable/index.vue
+++ /dev/null
@@ -1,200 +0,0 @@
-<template>
-  <div class='table-box' ref='popupBaseView'>
-    <ProTable
-        ref='proTable'
-        :columns='columns'
-        :data='userData'
-    >
-      <!-- 表格 header 按钮 -->
-      <template #tableHeader='scope'>
-        <el-button type='primary' :icon='CirclePlus' @click="openDrawer('新增')">新增用户</el-button>
-        <el-button type='primary' :icon='Upload' plain @click='batchAdd'>批量添加用户</el-button>
-        <el-button type='primary' :icon='Download' plain @click='downloadFile'>导出用户数据</el-button>
-        <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
-                   @click='batchDelete(scope.selectedListIds)'>
-          删除用户
-        </el-button>
-      </template>
-      <!-- 表格操作 -->
-      <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='Refresh' @click='resetPass(scope.row)'>重置密码</el-button>
-        <el-button type='primary' link :icon='CirclePlus' @click='deleteAccount()'>下钻</el-button>
-      </template>
-    </ProTable>
-  </div>
-  <single-column ref='singleColumn' />
-  <double-column ref='doubleColumn' />
-  <open :width='viewWidth' :height='viewHeight' ref='openView' />
-</template>
-<script setup lang='tsx' name='useProTable'>
-import { ref, reactive } from 'vue'
-import { useHandleData } from '@/hooks/useHandleData'
-import { useAuthButtons } from '@/hooks/useAuthButtons'
-import ProTable from '@/components/ProTable/index.vue'
-import ImportExcel from '@/components/ImportExcel/index.vue'
-import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
-import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
-import { useDictStore } from '@/stores/modules/dict'
-import SingleColumn from '@/views/demo/proTable/singleColumn.vue'
-import Open from '@/views/demo/proTable/Open.vue'
-import DoubleColumn from '@/views/demo/proTable/doubleColumn.vue'
-import { useViewSize } from '@/hooks/useViewSize'
-
-const { popupBaseView, viewWidth, viewHeight } = useViewSize()
-
-const dictStore = useDictStore()
-import {
-  getUserList,
-  deleteUser,
-} from '@/api/user/user'
-import { ElMessageBox } from 'element-plus'
-
-const userData = userDataList
-const singleColumn = ref()
-const doubleColumn = ref()
-const openView = ref()
-// ProTable 实例
-const proTable = ref<ProTableInstance>()
-// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
-const initParam = reactive({ type: 1 })
-// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
-// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
-const dataCallback = (data: any) => {
-  return {
-    list: data.list,
-    total: data.total,
-  }
-}
-// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：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 getUserList(newParams)
-}
-// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
-const { BUTTONS } = useAuthButtons()
-// 表格配置项
-const columns = reactive<ColumnProps<any>[]>([
-  { type: 'selection', fixed: 'left', width: 70 },
-  { type: 'index', fixed: 'left', width: 70, label: '序号' },
-  {
-    prop: 'username',
-    label: '姓名',
-    width: 120,
-    search: { el: 'input' },
-  },
-  {
-    prop: 'gender',
-    label: '性别',
-    // 字典数据（本地数据）
-    enum: dictStore.getDictData('sex'),
-    search: { el: 'select', props: { filterable: true } },
-    fieldNames: { label: 'label', value: 'code' },
-  },
-  {
-    prop: 'age',
-    label: '年龄',
-    search: {
-      // 自定义 search 显示内容
-      render: ({ searchParam }) => {
-        return (
-            <div class='flx-center'>
-              <el-input vModel_trim={searchParam.minAge} placeholder='最小年龄' />
-              <span class='mr10 ml10'>-</span>
-              <el-input vModel_trim={searchParam.maxAge} placeholder='最大年龄' />
-            </div>
-        )
-      },
-    },
-  },
-  { prop: 'idCard', label: '身份证号' },
-  { prop: 'email', label: '邮箱' },
-  { prop: 'address', label: '居住地址', width: 120 },
-  {
-    prop: 'status',
-    label: '状态',
-    enum: dictStore.getDictData('status'),
-    search: { el: 'tree-select', props: { filterable: true } },
-    fieldNames: { label: 'userLabel', value: 'userStatus' },
-    render: scope => {
-      return (
-          <>
-            {BUTTONS.value.status ? (
-                <el-switch
-                    model-value={scope.row.status}
-                    active-text={scope.row.status ? '启用' : '禁用'}
-                    active-value={1}
-                    inactive-value={0}
-                    onClick={() => changeStatus(scope.row)}
-                />
-            ) : (
-                <el-tag type={scope.row.status ? 'success' : 'danger'}>{scope.row.status ? '启用' : '禁用'}</el-tag>
-            )}
-          </>
-      )
-    },
-  },
-  {
-    prop: 'createTime',
-    label: '创建时间',
-    width: 180,
-    search: {
-      el: 'date-picker',
-      span: 1,
-      props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' },
-      defaultValue: ['2024-11-12', '2024-12-12'],
-    },
-  },
-  { prop: 'operation', label: '操作', fixed: 'right', width: 330 },
-])
-
-
-// 下钻
-const deleteAccount = async () => {
-  openView.value.open('测试弹出框')
-}
-// 批量删除用户信息
-const batchDelete = async (id: string[]) => {
-  await useHandleData(deleteUser, { id }, '删除所选用户信息')
-  proTable.value?.clearSelection()
-  proTable.value?.getTableList()
-}
-// 重置用户密码
-const resetPass = async (params: any) => {
-  // await useHandleData(resetUserPassWord, { id: params.id }, `重置【${params.username}】用户密码`)
-  // proTable.value?.getTableList()
-  doubleColumn.value.open('双列弹出框')
-}
-// 切换用户状态
-const changeStatus = async (row: any) => {
-  // await useHandleData(changeUserStatus, {
-  //   id: row.id,
-  //   status: row.status == 1 ? 0 : 1,
-  // }, `切换【${row.username}】用户状态`)
-  proTable.value?.getTableList()
-}
-// 导出用户列表
-const downloadFile = async () => {
-
-}
-// 批量添加用户
-const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
-const batchAdd = () => {
-  const params = {
-    title: '用户',
-    getTableList: proTable.value?.getTableList,
-  }
-  dialogRef.value?.acceptParams(params)
-}
-// 打开 drawer(新增、查看、编辑)
-const openDrawer = (title: string, row: Partial<any> = {}) => {
-  singleColumn.value.open('单列弹出框')
-}
-</script>
\ No newline at end of file
diff --git a/frontend/src/views/demo/proTable/open.vue b/frontend/src/views/demo/proTable/open.vue
deleted file mode 100644
index f32e1d2..0000000
--- a/frontend/src/views/demo/proTable/open.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<!--单列-->
-<template>
-  <el-dialog class='table-box'
-             v-model='dialogVisible'
-             top='114px'
-             :style="{height:height+'px',maxHeight:height+'px',overflow:'hidden'}"
-             :title='title'
-             :width='width'
-             :modal='false'>
-    <div class='table-box' :style="{height:(height-64)+'px',maxHeight:(height-64)+'px',overflow:'hidden'}">
-      <ProTable
-          ref='proTable'
-          :columns='columns'
-          :data='userData'
-      >
-        <!-- 表格 header 按钮 -->
-        <template #tableHeader='scope'>
-          <el-button type='primary' :icon='CirclePlus' @click="openDrawer('新增')">新增用户</el-button>
-        </template>
-        <!-- 表格操作 -->
-        <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='Refresh' @click='resetPass(scope.row)'>重置密码</el-button>
-          <el-button type='primary' link :icon='Delete' @click='deleteAccount(scope.row)'>删除</el-button>
-        </template>
-      </ProTable>
-    </div>
-  </el-dialog>
-</template>
-<script setup lang='tsx'>
-import { CirclePlus, Delete, EditPen, Refresh, View } from '@element-plus/icons-vue'
-import ProTable from '@/components/ProTable/index.vue'
-import { useHandleData } from '@/hooks/useHandleData'
-import { useAuthButtons } from '@/hooks/useAuthButtons'
-import { reactive } from 'vue'
-import { ColumnProps } from '@/components/ProTable/interface'
-import { User } from '@/api/user/interface'
-import { useDictStore } from '@/stores/modules/dict'
-
-const dictStore = useDictStore()
-import {
-  changeUserStatus,
-} from '@/api/user/user'
-import userDataList from '@/api/user/userData'
-
-const userData = userDataList
-const proTable = ref()
-
-const dialogVisible = ref(false)
-const title = ref('单列弹出框')
-
-const { BUTTONS } = useAuthButtons()
-// 表格配置项
-const columns = reactive<ColumnProps<User.ResUserList>[]>([
-  { type: 'selection', fixed: 'left', width: 70 },
-  { type: 'index', fixed: 'left', width: 70, label: '序号' },
-  {
-    prop: 'username',
-    label: '姓名',
-    width: 120,
-    search: { el: 'input' },
-  },
-  {
-    prop: 'gender',
-    label: '性别',
-    // 字典数据（本地数据）
-    enum: dictStore.getDictData('sex'),
-    search: { el: 'select', props: { filterable: true } },
-    fieldNames: { label: 'label', value: 'code' },
-  },
-  {
-    prop: 'age',
-    label: '年龄',
-    search: {
-      // 自定义 search 显示内容
-      render: ({ searchParam }) => {
-        return (
-            <div class='flx-center'>
-              <el-input vModel_trim={searchParam.minAge} placeholder='最小年龄' />
-              <span class='mr10 ml10'>-</span>
-              <el-input vModel_trim={searchParam.maxAge} placeholder='最大年龄' />
-            </div>
-        )
-      },
-    },
-  },
-  { prop: 'idCard', label: '身份证号', search: { el: 'input' } },
-  { prop: 'email', label: '邮箱' },
-  { prop: 'address', label: '居住地址', width: 120 },
-  {
-    prop: 'status',
-    label: '状态',
-    enum: dictStore.getDictData('status'),
-    search: { el: 'tree-select', props: { filterable: true } },
-    fieldNames: { label: 'userLabel', value: 'userStatus' },
-    render: scope => {
-      return (
-          <>
-            {BUTTONS.value.status ? (
-                <el-switch
-                    model-value={scope.row.status}
-                    active-text={scope.row.status ? '启用' : '禁用'}
-                    active-value={1}
-                    inactive-value={0}
-                    onClick={() => changeStatus(scope.row)}
-                />
-            ) : (
-                <el-tag type={scope.row.status ? 'success' : 'danger'}>{scope.row.status ? '启用' : '禁用'}</el-tag>
-            )}
-          </>
-      )
-    },
-  },
-  {
-    prop: 'createTime',
-    label: '创建时间',
-    width: 180,
-    search: {
-      el: 'date-picker',
-      span: 1,
-      props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' },
-      defaultValue: ['2024-11-12', '2024-12-12'],
-    },
-  },
-  { prop: 'operation', label: '操作', fixed: 'right', width: 330 },
-])
-
-
-const open = (textTitle: string) => {
-  dialogVisible.value = true
-  title.value = textTitle
-}
-
-
-defineExpose({ open })
-
-
-const props = defineProps({
-  width: {
-    type: Number,
-    default: 800,
-  },
-  height: {
-    type: Number,
-    default: 744,
-  },
-})
-
-// 切换用户状态
-const changeStatus = async (row: User.ResUserList) => {
-  await useHandleData(changeUserStatus, {
-    id: row.id,
-    status: row.status == 1 ? 0 : 1,
-  }, `切换【${row.username}】用户状态`)
-  proTable.value?.getTableList()
-}
-
-// 删除用户信息
-const deleteAccount = async (params: User.ResUserList) => {
-
-}
-// 重置用户密码
-const resetPass = async (params: User.ResUserList) => {
-
-}
-
-// 打开 drawer(新增、查看、编辑)
-const openDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
-}
-
-</script>
-<style>
-
-</style>
\ No newline at end of file
diff --git a/frontend/src/views/demo/proTable/singleColumn.vue b/frontend/src/views/demo/proTable/singleColumn.vue
deleted file mode 100644
index 1caf8eb..0000000
--- a/frontend/src/views/demo/proTable/singleColumn.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-<!--单列-->
-<template>
-  <el-dialog v-model='dialogVisible' :title='title' v-bind='dialogSmall'>
-    <el-scrollbar>
-      <el-form
-          :model='form'
-          :inline='false'
-          label-width='auto'
-          ref='formRuleRef'
-          :rules='rules'
-      >
-        <el-form-item label='姓名' prop='username'>
-          <el-input
-              v-model='form.username'
-              placeholder='请输入姓名'
-          ></el-input>
-        </el-form-item>
-
-        <el-form-item label='性别' prop='gender'>
-          <el-radio-group v-model='form.gender'>
-            <el-radio-button :label='0'>男</el-radio-button>
-            <el-radio-button :label='1'>女</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item label='年龄' prop='age'>
-          <el-input
-              v-model='form.age'
-              placeholder='年龄'
-          ></el-input>
-        </el-form-item>
-
-        <el-form-item label='身份证号' prop='idCard'>
-          <el-input
-              v-model='form.idCard'
-              placeholder='身份证号'
-          ></el-input>
-        </el-form-item>
-
-        <el-form-item label='邮箱' prop='email'>
-          <el-input
-              v-model='form.email'
-              placeholder='邮箱'
-          ></el-input>
-        </el-form-item>
-
-        <el-form-item label='居住地址' prop='address'>
-          <el-input
-              v-model='form.address'
-              placeholder='居住地址'
-          ></el-input>
-        </el-form-item>
-
-      </el-form>
-    </el-scrollbar>
-
-    <template #footer>
-      <div class='dialog-footer'>
-        <el-button @click='close()'>取消</el-button>
-        <el-button type='primary' @click='confirmForm()'>确定</el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-<script setup lang='ts'>
-import { dialogSmall } from '@/utils/elementBind'
-import { FormInstance, FormItemRule } from 'element-plus'
-
-interface userForm {
-  id?: string;       //用户ID，作为唯一标识
-  username: string; //用户名
-  gender: number; // 性别
-  age: number; // 年龄
-  idCard: string; // 身份证
-  email: string; // 邮箱
-  address?: string; // 地址
-}
-
-const form: Ref<userForm> = ref({
-  username: '',
-  gender: 0,
-  age: 1,
-  idCard: '',
-  email: '',
-})
-
-const formRuleRef = ref<FormInstance>()
-//定义校验规则
-const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
-  username: [{ required: true, message: '用户名必填！', trigger: 'blur' }],
-  age: [
-    { required: true, message: '年龄必填！', trigger: 'blur' },
-    // 指定正则，此处是数字正则
-    { pattern: /^[1-9][0-9]?$|^100$/, message: '年龄必须在1到100之间', trigger: 'blur' },
-  ],
-  idCard: [
-    { required: true, message: '身份证必填！', trigger: 'blur' },
-    // 指定正则，此处是身份证正则
-    { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号码', trigger: 'blur' },
-  ],
-  email: [
-    { required: true, message: '邮箱必填！', trigger: 'blur' },
-    // 指定校验类型
-    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
-  ],
-})
-
-/**
- * 重置表单
- */
-const resetForm = () => {
-  form.value = {
-    username: '',
-    gender: 0,
-    age: 1,
-    idCard: '',
-    email: '',
-    address: '',
-  }
-}
-
-const dialogVisible = ref(false)
-const title = ref('单列弹出框')
-const open = (textTitle: string) => {
-  dialogVisible.value = true
-  title.value = textTitle
-}
-
-// 关闭弹出框
-const close = () => {
-  //重置表单内容
-  //取消表单校验状态
-  formRuleRef.value && formRuleRef.value.resetFields()
-  dialogVisible.value = false
-  resetForm()
-}
-
-/**
- * 校验表单数据
- * 数据没问题，提交数据，并根据业务情况请求新增接口还是修改接口
- */
-const confirmForm = () => {
-  ElMessage.info('业务数据提交')
-  try {
-    formRuleRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        // 将表单数据转为json,发送到后端
-        let confirmFormData = JSON.parse(JSON.stringify(form.value))
-
-        if ('是否新增') {
-          // 执行新增接口
-        } else {
-          // 执行修改接口
-        }
-      } else {
-        ElMessage.error('表单验证失败！')
-      }
-    })
-  } catch (error) {
-    console.error('验证过程中发生错误', error)
-  }
-}
-
-defineExpose({ open })
-
-</script>
-<style>
-
-</style>
\ 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 9f00552..def36ce 100644
--- a/frontend/src/views/home/components/table.vue
+++ b/frontend/src/views/home/components/table.vue
@@ -599,7 +599,7 @@ const sortTable = ({
 
 //顶部功能切换时修改activeTabs
 const changeActiveTabs = (val: number,val2: number,tabledata:any[]) => {
-  
+
   form.value.activeTabs = val;
   form.value.activeChildTabs= val2;
   deviceData.value = tabledata;
@@ -989,4 +989,7 @@ defineExpose({ changeActiveTabs });
     }
   }
 }
+:deep(.card){
+  border: 0 !important;
+}
 </style>
diff --git a/frontend/src/views/home/components/tree.vue b/frontend/src/views/home/components/tree.vue
index 37537ed..b611786 100644
--- a/frontend/src/views/home/components/tree.vue
+++ b/frontend/src/views/home/components/tree.vue
@@ -113,13 +113,10 @@ defineExpose({ getTreeData })
 </script>
 <style lang='scss' scoped>
 .plan_tree {
-  // width: 200px;
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding: 5px;
-  // height: calc(100% - 70px);
-  background-color: #ffffff;
+  background-color: #fff;
 
   .search_view {
     width: 100%;
@@ -162,7 +159,7 @@ defineExpose({ getTreeData })
   display: inline-block;
   overflow: auto;
   margin-top: 12px;
-  
+
 }
 
 //.filter-tree span {
diff --git a/frontend/src/views/home/tabs/dashboard.vue b/frontend/src/views/home/tabs/dashboard.vue
index fb02e6b..9858cb9 100644
--- a/frontend/src/views/home/tabs/dashboard.vue
+++ b/frontend/src/views/home/tabs/dashboard.vue
@@ -1,140 +1,130 @@
 <!-- 真正的首页 -->
 <template>
-  <div class="static">
-    <div class="left_tree">
-      <tree ref="treeRef" :updateSelectedTreeNode="getPieData || (() => {})"/>
-    </div>
-    <!-- <span class="new_span">测试scss颜色</span> -->
-    <div class="right_container">
-      <!-- 功能选择 -->
-      <div class="container_function">
-        <div
-            class="function_item"
-            :class="
-            item.checked ? 'function_item checked_function' : 'function_item'
-          "
-            v-for="(item, index) in tabsList"
-            :key="index"
-            @click="handleCheckFunction(item.value)"
-        >
-          <div class="item_img">
-            <img :src="item.img" alt=""/>
-          </div>
-          <div class="item_text">
-            <p>{{ item.label }}</p>
-          </div>
+  <div class='static'>
+    <el-row :gutter='10'>
+      <el-col :lg='4' :xl='4' :md='4' :sm='4'>
+        <div class='left_tree'>
+          <tree ref='treeRef' :updateSelectedTreeNode='getPieData || (() => {})' />
         </div>
-      </div>
-
-      <!-- <el-collapse v-model="activeNames" @change="handleChange">
-        <el-collapse-item title="检测进度展示" name="1"> -->
-      <div class="container_pieShow">
-        <el-collapse model-value="1" accordion @change="handleCollapseChange">
-          <el-collapse-item  name="1">
-            <template #title>
-              <div style="display: flex; justify-content: space-between; width: 100%;">
-                <span style="font-weight: bold;margin-left: 15px;">检测计划统计</span>
-                <span style="font-weight: bold;margin-right: 15px;">{{ planName }}</span>
+      </el-col>
+      <el-col :lg='20' :xl='20' :md='20' :sm='20'>
+        <div class='right_container'>
+          <!-- 功能选择 -->
+          <div class='container_function'>
+            <div
+              class='function_item'
+              :class="item.checked ? 'function_item checked_function' : 'function_item'"
+              v-for='(item, index) in tabsList'
+              :key='index'
+              @click='handleCheckFunction(item.value)'
+            >
+              <div class='item_img'>
+                <img :src='item.img' />
               </div>
-            </template>
-            <!-- 饼图 -->
-            <div class="container_charts">
-              <div class="charts_info" ref="chartsInfoRef">
-                <pie
-                    :customData="{
-                title: '设备检测状态',
-                textAlign: 'left',
-   
-              }"
-                    :legendData="{
-                icon: 'circle',
-                left: 'left',
-                top: 'bottom',
-              }"
-                    :chartsData="chartsData1"
-                    ref="pieRef1"
-                ></pie>
-              </div>
-              <div class="charts_info">
-                <pie
-                    :customData="{
-                title: '设备检测结果',
-                textAlign: 'left',
-              }"
-                    :legendData="{
-                icon: 'circle',
-                left: 'left',
-                top: 'bottom',
-              }"
-                    :chartsData="chartsData2"
-                    ref="pieRef2"
-                ></pie>
-              </div>
-              <div class="charts_info">
-                <pie
-                    :customData="{
-                title: '设备报告状态',
-                textAlign: 'left',
-                label: {
-                  normal: {
-                    position: 'inner',
-                  },
-                },
-              }"
-                    :legendData="{
-                icon: 'circle',
-                left: 'left',
-                top: 'bottom',
-              }"
-                    :chartsData="chartsData3"
-                    ref="pieRef3"
-                ></pie>
+              <div class='item_text'>
+                <p>{{ item.label }}</p>
               </div>
             </div>
-          </el-collapse-item>
-        </el-collapse>
-      </div>
-
-      <el-tabs class="tabs-menu" type="border-card" @tab-change="handleTabsChange" v-model="editableTabsValue" :style="{ height: tabsHeight }">
-        <el-tab-pane :label="tabLabel1" :style="{ height: tabPaneHeight }">
-          <!-- 列表数据 -->
-          <div class="container_table" :style="{ height: tableHeight }">
-            <Table ref="tableRef1" :id='currentId' :isTimeCheck='isTimeCheck'></Table>
           </div>
-        </el-tab-pane>
-        <!--      <el-tab-pane label="已检设备"  v-if="tabShow" :style="{ height: tabPaneHeight }">-->
-        <!--        &lt;!&ndash; 列表数据 &ndash;&gt;-->
-        <!--        <div class="container_table" :style="{ height: tableHeight }">-->
-        <!--          <Table ref="tableRef2" :id='currentId'></Table>-->
-        <!--        </div>-->
-        <!--      </el-tab-pane>-->
-      </el-tabs>
-    </div>
+          <!--检测计划统计 饼图统计-->
+          <div class='container_pieShow'>
+            <el-collapse model-value='1' accordion @change='handleCollapseChange'>
+              <el-collapse-item name='1'>
+                <template #title>
+                  <div class='container_pieShow_title'>
+                    <span>检测计划统计</span>
+                    <span>{{ planName }}</span>
+                  </div>
+                </template>
+                <!-- 饼图 -->
+                <div class='container_charts'>
+                  <div class='charts_info' ref='chartsInfoRef'>
+                    <pie
+                      :customData="{
+                       title: '设备检测状态',
+                       textAlign: 'left',
+                      }"
+                      :legendData="{
+                       icon: 'circle',
+                       left: 'left',
+                       top: 'bottom',
+                      }"
+                      :chartsData='chartsData1'
+                      ref='pieRef1'
+                    ></pie>
+                  </div>
+                  <div class='charts_info'>
+                    <pie
+                      :customData="{
+                       title: '设备检测结果',
+                       textAlign: 'left',
+                      }"
+                      :legendData="{
+                       icon: 'circle',
+                       left: 'left',
+                       top: 'bottom',
+                      }"
+                      :chartsData='chartsData2'
+                      ref='pieRef2'
+                    ></pie>
+                  </div>
+                  <div class='charts_info'>
+                    <pie
+                      :customData="{
+                       title: '设备报告状态',
+                       textAlign: 'left',
+                      }"
+                      :legendData="{
+                        icon: 'circle',
+                        left: 'left',
+                        top: 'bottom',
+                      }"
+                      :chartsData='chartsData3'
+                      ref='pieRef3'
+                    ></pie>
+                  </div>
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+
+          <!--下方表格数据-->
+          <el-tabs class='tabs-menu' type='border-card' @tab-change='handleTabsChange' v-model='editableTabsValue'
+                   :style='{ height: tabsHeight }'>
+            <el-tab-pane :label='tabLabel1' :style='{ height: tabPaneHeight }'>
+              <!-- 列表数据 -->
+              <div class='container_table' :style='{ height: tableHeight }'>
+                <Table ref='tableRef1' :id='currentId' :isTimeCheck='isTimeCheck'></Table>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
-<script lang="ts" setup>
-import pie from "@/components/echarts/pie/default.vue";
-import {useRouter} from "vue-router";
-import tree from "../components/tree.vue";
-import Table from "../components/table.vue";
-//import { data } from "@/api/plan/static.json";
+<script lang='ts' setup>
+import pie from '@/components/echarts/pie/default.vue'
+import { useRouter } from 'vue-router'
+import tree from '../components/tree.vue'
+import Table from '../components/table.vue'
 import deviceDataList from '@/api/device/device/deviceData'
-import {getBoundPqDevList, getPlanListByPattern} from '@/api/plan/plan.ts'
-import {onBeforeMount, onUnmounted, ref, watch} from "vue";
-import {useModeStore} from '@/stores/modules/mode'; // 引入模式 store
-import {useDictStore} from '@/stores/modules/dict'
-import {type Plan} from "@/api/plan/interface";
-import type {CollapseModelValue} from "element-plus/es/components/collapse/src/collapse.mjs";
-import {type Device} from "@/api/device/interface/device";
-import {ResultData} from "@/api/interface";
+import { getBoundPqDevList, getPlanListByPattern } from '@/api/plan/plan.ts'
+import { onBeforeMount, onUnmounted, ref, watch } from 'vue'
+import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
+import { useDictStore } from '@/stores/modules/dict'
+import { type Plan } from '@/api/plan/interface'
+import type { CollapseModelValue } from 'element-plus/es/components/collapse/src/collapse.mjs'
+import { type Device } from '@/api/device/interface/device'
+import { ResultData } from '@/api/interface'
 
 const planName = ref('')
 const dictStore = useDictStore()
-const modeStore = useModeStore();
-const chartsInfoRef = ref<HTMLElement | null>(null);
-const chartsWidth = ref<number>(0);
+const modeStore = useModeStore()
+const chartsInfoRef = ref<HTMLElement | null>(null)
+const chartsWidth = ref<number>(0)
 const deviceData = deviceDataList.plan_devicedata
-const treeRef = ref();
+const treeRef = ref()
 const form: any = ref({
   activeTabs: 0, //功能选择,例如报告生成
   activeChildTabs: 0,//子功能选择,例如未检设备报告生成，或已检设备更换误差体系生成
@@ -144,347 +134,317 @@ const form: any = ref({
   deviceBindStatus: 0, //绑定状态
   deviceType: 0, //设备类型
   manufacturer: 0, //制造厂商
-});
-const router = useRouter();
-const activeNames = ref(['2'])
-const tabShow = ref(false);
+})
+const router = useRouter()
+const tabShow = ref(false)
 const tabLabel1 = ref('设备检测')
 const editableTabsValue = ref('0')
 const checkStateTable = ref<number[]>([0, 1, 2])
-const tabsHeight = ref('calc(100vh - 538px)'); // 初始高度
+const tabsHeight = ref('calc(100vh - 522px)') // 初始高度
+const tabPaneHeight = ref('calc(100% - 5px)') // 初始高度
+const tableHeight = ref('calc(100% - 50px)') // 初始高度
 
-const tabPaneHeight = ref('calc(100% - 5px)'); // 初始高度
-const tableHeight = ref('calc(100% - 5px)'); // 初始高度
-const handleChange = (val: string[]) => {
-}
-const isTimeCheck = ref<boolean>(false);
-const planList = ref<ResultData<Plan.ReqPlan[]>>();
+const isTimeCheck = ref<boolean>(false)
+const planList = ref<ResultData<Plan.ReqPlan[]>>()
 const handleCollapseChange = (val: CollapseModelValue) => {
 
   // 计算新的高度
-  let newHeight;
+  let newHeight
   if (Array.isArray(val)) {
-    newHeight = val.length > 0 ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)';
+    newHeight = val.length > 0 ? 'calc(100vh - 522px)' : 'calc(100vh - 333px)'
   } else {
-    newHeight = val ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)';
+    newHeight = val ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)'
   }
-  //const newtableHeight= val.length > 0 ? 'calc(100vh - 638px)' : 'calc(100vh - 433px)';
-  tabsHeight.value = newHeight;
-  tabPaneHeight.value = `calc(100% - 5px)`;
-  tableHeight.value = `calc(100% - 5px)`;
-
-  // tableRef1.value.resize();
-  // tableRef2.value.resize();
-};
+  tabsHeight.value = newHeight
+  tabPaneHeight.value = `calc(100% - 5px)`
+  tableHeight.value = `calc(100% - 5px)`
+}
 
 const handleTabsChange = (val: any) => {
-  form.value.activeTabs = 0;
-  form.value.activeTabs = 3;
-  form.value.activeChildTabs = Number(val);
+  form.value.activeTabs = 0
+  form.value.activeTabs = 3
+  form.value.activeChildTabs = Number(val)
 
 }
-localStorage.setItem("color", "red");
+localStorage.setItem('color', 'red')
 //功能选择数据
 const tabsList = ref([
   {
-    label: "设备检测",
+    label: '设备检测',
     value: 0,
-    img: "/src/assets/images/plan/static/1.svg",
+    img: '/src/assets/images/plan/static/1.svg',
     checked: true,
   },
-  // {
-  //   label: "设备复检",
-  //   value: 2,
-  //   img: "/src/assets/images/plan/static/2.svg",
-  //   checked: false,
-  // },
   {
-    label: "报告生成",
+    label: '报告生成',
     value: 3,
-    img: "/src/assets/images/plan/static/3.svg",
+    img: '/src/assets/images/plan/static/3.svg',
     checked: false,
   },
   {
-    label: "设备归档",
+    label: '设备归档',
     value: 4,
-    img: "/src/assets/images/plan/static/4.svg",
+    img: '/src/assets/images/plan/static/4.svg',
     checked: false,
   },
   {
-    label: "数据操作",
+    label: '数据操作',
     value: 5,
-    img: "/src/assets/images/plan/static/5.svg",
+    img: '/src/assets/images/plan/static/5.svg',
     checked: false,
   },
-]);
+])
 
-form.value.activeTabs = tabsList.value[0].value;
-const tableRef1 = ref();
-const tableRef2 = ref();
-const currentId = ref('');
+form.value.activeTabs = tabsList.value[0].value
+const tableRef1 = ref()
+const tableRef2 = ref()
+const currentId = ref('')
 
 watch(
-    () => form.value,
-    (val, oldVal) => {
-      if (val) {
+  () => form.value,
+  (val, oldVal) => {
+    if (val) {
 
-        if (form.value.activeTabs === 0)//设备检测
-        {
-          const tabledata = deviceData.filter((item) => item.document_State === "未归档")
-          tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata);
-        } else if (form.value.activeTabs === 4)//设备归档
-        {
-          const tabledata = deviceData.filter((item) => item.check_State === "检测完成" && item.document_State === "未归档")
-          tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata);
-        } else if (form.value.activeTabs === 3 || form.value.activeTabs === 5)//报告生成、数据查询
-        {
-          const tabledata = deviceData.filter((item) => item.check_State === "检测完成");
-          tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata);
-        }
+      if (form.value.activeTabs === 0)//设备检测
+      {
+        const tabledata = deviceData.filter((item) => item.document_State === '未归档')
+        tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
+      } else if (form.value.activeTabs === 4)//设备归档
+      {
+        const tabledata = deviceData.filter((item) => item.check_State === '检测完成' && item.document_State === '未归档')
+        tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
+      } else if (form.value.activeTabs === 3 || form.value.activeTabs === 5)//报告生成、数据查询
+      {
+        const tabledata = deviceData.filter((item) => item.check_State === '检测完成')
+        tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
       }
-    },
-    {
-      immediate: true,
-      deep: true,
     }
-);
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
 watch(
-    () => form.value,
-    (val, oldVal) => {
-      if (val) {
-        tableRef2.value && tableRef2.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs);
-      }
-    },
-    {
-      immediate: true,
-      deep: true,
+  () => form.value,
+  (val, oldVal) => {
+    if (val) {
+      tableRef2.value && tableRef2.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs)
     }
-);
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
 const pieRef1 = ref(),
-    pieRef2 = ref(),
-    pieRef3 = ref();
+  pieRef2 = ref(),
+  pieRef3 = ref()
 
 const chartsData1: any = ref([]),
-    chartsData2: any = ref([]),
-    chartsData3: any = ref([]);
+  chartsData2: any = ref([]),
+  chartsData3: any = ref([])
 
 const findPlanById = (plans: Plan.ReqPlan[], id: string): Plan.ReqPlan | undefined => {
   for (const plan of plans) {
     if (plan.id === id) {
-      return plan;
+      return plan
     }
     if (plan.children) {
-      const foundPlan = findPlanById(plan.children, id);
+      const foundPlan = findPlanById(plan.children, id)
       if (foundPlan) {
-        return foundPlan;
+        return foundPlan
       }
     }
   }
-  return undefined;
-};
+  return undefined
+}
 
 const getPieData = async (id: string) => {
-  currentId.value = id; // 设置当前ID
-  //handleCheckFunction(0)//切换左侧树，默认css功能是设备检测
+  currentId.value = id // 设置当前ID
 
   // 初始化计数对象
-  const checkStateCount: { [key: number]: number } = {0: 0, 1: 0, 2: 0, 3: 0};
-  const checkResultCount: { [key: number]: number } = {0: 0, 1: 0, 2: 0};
-  const reportStateCount: { [key: number]: number } = {0: 0, 1: 0, 2: 0};
+  const checkStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0, 3: 0 }
+  const checkResultCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 }
+  const reportStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 }
   if (id) {
     const boundPqDevList = ref<Device.ResPqDev[]>([])//根据检测计划id查询出所有已绑定的设备
-    const plan = findPlanById(planList.value?.data || [], id);
-    planName.value =  '所选计划:' + plan.name
+    const plan = findPlanById(planList.value?.data || [], id)
+    planName.value = '所选计划:' + plan.name
     if (plan) {
       //isTimeCheck.value = plan.timeCheck === 1; // 将 1 转换为 true，0 转换为 false
-      isTimeCheck.value = false; // 将 1 转换为 true，0 转换为 false   ----目前不用守时检测，先去除
+      isTimeCheck.value = false // 将 1 转换为 true，0 转换为 false   ----目前不用守时检测，先去除
     } else {
       // 处理未找到计划的情况
-      isTimeCheck.value = false; // 或者其他默认值
+      isTimeCheck.value = false // 或者其他默认值
     }
-    const pqDevList_Result2 = await getBoundPqDevList({'planId': id, 'checkStateList': [0, 1, 2, 3]});
-    boundPqDevList.value = pqDevList_Result2.data as Device.ResPqDev[];
+    const pqDevList_Result2 = await getBoundPqDevList({ 'planId': id, 'checkStateList': [0, 1, 2, 3] })
+    boundPqDevList.value = pqDevList_Result2.data as Device.ResPqDev[]
     // 遍历 boundPqDevList 并更新计数对象
     boundPqDevList.value.forEach(t => {
       if (t.checkState !== undefined && t.checkState !== null && checkStateCount[t.checkState] !== undefined) {
-        checkStateCount[t.checkState]++;
+        checkStateCount[t.checkState]++
       }
-    });
+    })
     boundPqDevList.value.forEach(t => {
       if (t.checkResult !== undefined && t.checkResult !== null && checkResultCount[t.checkResult] !== undefined) {
-        checkResultCount[t.checkResult]++;
+        checkResultCount[t.checkResult]++
       }
-    });
+    })
     boundPqDevList.value.forEach(t => {
       if (t.reportState !== undefined && t.reportState !== null && reportStateCount[t.reportState] !== undefined) {
-        reportStateCount[t.reportState]++;
+        reportStateCount[t.reportState]++
       }
-    });
+    })
   }
 
   chartsData1.value = [
-    {value: checkStateCount[0], name: "未检", itemStyle: {color: '#fac858'}},
-    {value: checkStateCount[1], name: "检测中", itemStyle: {color: '#ee6666'}},
-    {value: checkStateCount[2], name: "检测完成", itemStyle: {color: '#91cc75'}},
-    {value: checkStateCount[3], name: "归档", itemStyle: {color: '#5470c6'}},
-  ];
+    { value: checkStateCount[0], name: '未检', itemStyle: { color: '#fac858' } },
+    { value: checkStateCount[1], name: '检测中', itemStyle: { color: '#ee6666' } },
+    { value: checkStateCount[2], name: '检测完成', itemStyle: { color: '#91cc75' } },
+    { value: checkStateCount[3], name: '归档', itemStyle: { color: '#5470c6' } },
+  ]
   chartsData2.value = [
-    {value: checkResultCount[2], name: "未检", itemStyle: {color: '#fac858'}},
-    {value: checkResultCount[0], name: "不符合", itemStyle: {color: '#ee6666'}},
-    {value: checkResultCount[1], name: "符合", itemStyle: {color: '#91cc75'}},
-  ];
+    { value: checkResultCount[2], name: '未检', itemStyle: { color: '#fac858' } },
+    { value: checkResultCount[0], name: '不符合', itemStyle: { color: '#ee6666' } },
+    { value: checkResultCount[1], name: '符合', itemStyle: { color: '#91cc75' } },
+  ]
   chartsData3.value = [
-    {value: reportStateCount[2], name: "未检", itemStyle: {color: '#fac858'}},
-    {value: reportStateCount[0], name: "未生成", itemStyle: {color: '#ee6666'}},
-    {value: reportStateCount[1], name: "已生成", itemStyle: {color: '#91cc75'}},
-  ];
+    { value: reportStateCount[2], name: '未检', itemStyle: { color: '#fac858' } },
+    { value: reportStateCount[0], name: '未生成', itemStyle: { color: '#ee6666' } },
+    { value: reportStateCount[1], name: '已生成', itemStyle: { color: '#91cc75' } },
+  ]
 
-  pieRef1.value.init();
-  pieRef2.value.init();
-  pieRef3.value.init();
-  // pieRef1.value.reSize(470,145,true);
-  // pieRef2.value.reSize(470,145,true);
-  // pieRef3.value.reSize(470,145,true);
-};
+  pieRef1.value.init()
+  pieRef2.value.init()
+  pieRef3.value.init()
+}
 const getTree = (data?: any) => {
-  treeRef.value.getTreeData(data);
-};
+  treeRef.value.getTreeData(data)
+}
 //前往检测
 const handleDetection = () => {
   router.push({
-    path: "/detection",
-  });
-};
+    path: '/detection',
+  })
+}
 //前往计划详情
 const planDetail = () => {
   router.push({
-    path: "/plan/planList",
-  });
-};
+    path: '/plan/planList',
+  })
+}
 //功能选择css切换
 const handleCheckFunction = (val: any) => {
-  editableTabsValue.value = '0';
-  form.value.activeChildTabs = 0;
+  editableTabsValue.value = '0'
+  form.value.activeChildTabs = 0
   tabsList.value.map((item: any, index: any) => {
     if (val == item.value) {
-      item.checked = true;
+      item.checked = true
     } else {
-      item.checked = false;
+      item.checked = false
     }
-  });
+  })
 
-  tabShow.value = false;
+  tabShow.value = false
 
   switch (val) {
     case 0://自动检测
       checkStateTable.value = [0, 1, 2]
-      tabLabel1.value = "设备检测";
-      break;
+      tabLabel1.value = '设备检测'
+      break
     case 1://手动检测
-      tabLabel1.value = "手动检测";
-      break;
+      tabLabel1.value = '手动检测'
+      break
     case 2://设备复检
-      tabLabel1.value = "设备复检";
-      break;
+      tabLabel1.value = '设备复检'
+      break
     case 3://报告生成
       checkStateTable.value = [2, 3]
-      tabLabel1.value = "报告生成";
+      tabLabel1.value = '报告生成'
       //tabShow.value = true;
-      break;
+      break
     case 4://设备归档
       checkStateTable.value = [2]
-      tabLabel1.value = "设备归档";
-      break;
+      tabLabel1.value = '设备归档'
+      break
     case 5://数据查询
       checkStateTable.value = [2, 3]
-      tabLabel1.value = "数据查询";
-      break;
+      tabLabel1.value = '数据查询'
+      break
   }
-  form.value.activeTabs = val;
-};
+  form.value.activeTabs = val
+}
 
 
 const resizeObserver = new ResizeObserver(entries => {
   for (let entry of entries) {
-    chartsWidth.value = entry.contentRect.width;
+    chartsWidth.value = entry.contentRect.width
     //console.log('Charts Info Width:', chartsWidth.value);
 
-    pieRef1.value?.reSize(chartsWidth.value * 0.95, 180, true);
-    pieRef2.value?.reSize(chartsWidth.value * 0.95, 180, true);
-    pieRef3.value?.reSize(chartsWidth.value * 0.95, 180, true);
+    pieRef1.value?.reSize(chartsWidth.value * 0.95, 180, true)
+    pieRef2.value?.reSize(chartsWidth.value * 0.95, 180, true)
+    pieRef3.value?.reSize(chartsWidth.value * 0.95, 180, true)
   }
-});
+})
 
 onBeforeMount(async () => {
   const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''//获取数据字典中对应的id
   const reqPlan: Plan.ReqPlan = {
     pattern: patternId,
-    datasourceIds: "",
-    sourceIds: "",
-    planId: "",
-    scriptName: "",
-    errorSysName: "",
-    sourceName: "",
+    datasourceIds: '',
+    sourceIds: '',
+    planId: '',
+    scriptName: '',
+    errorSysName: '',
+    sourceName: '',
     devIds: [],
-    id: "",
-    name: "",
-    dataSourceId: "",
-    scriptId: "",
-    errorSysId: "",
+    id: '',
+    name: '',
+    dataSourceId: '',
+    scriptId: '',
+    errorSysId: '',
     timeCheck: 0,
     testState: 0,
     reportState: 0,
     result: 0,
     code: 0,
-    state: 0
-  };
-  planList.value = (await getPlanListByPattern(reqPlan)) as ResultData<Plan.ReqPlan[]>;
+    state: 0,
+  }
+  planList.value = (await getPlanListByPattern(reqPlan)) as ResultData<Plan.ReqPlan[]>
 
   if (planList.value.data[0].children[0]) {
-    currentId.value = planList.value.data[0].children[0].id;
+    currentId.value = planList.value.data[0].children[0].id
   }
   if (chartsInfoRef.value) {
-    resizeObserver.observe(chartsInfoRef.value);
+    resizeObserver.observe(chartsInfoRef.value)
   }
-  getTree(planList.value.data);
+  getTree(planList.value.data)
 
-  getPieData(currentId.value);
-});
+  getPieData(currentId.value)
+})
 
 onUnmounted(() => {
   if (chartsInfoRef.value) {
-    resizeObserver.unobserve(chartsInfoRef.value);
+    resizeObserver.unobserve(chartsInfoRef.value)
   }
-});
+})
 
 
 </script>
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .static {
-  width: 100%;
-  // height: calc(100vh - 165px);
-  height: 100%;
-  display: flex;
-  justify-content: space-between;
-  //background-color: #eee;
 
   .left_tree {
-    width: 14% !important;
     height: 100%;
     background-color: #fff;
   }
 
   .right_container {
     flex: none;
-    width: 85.8%;
-    // padding: 0 10px 0 10px;
-    margin-left: 10px;
     height: 100%;
     display: flex;
     flex-direction: column;
-    //justify-content: space-between;
-    //align-items: center;
-    //box-sizing: border-box;
 
 
     .container_function {
@@ -566,134 +526,47 @@ onUnmounted(() => {
       }
     }
 
-    // .container_function {
-    //   width: 100%;
-    //   height: auto;
-    //   background: #fff;
-    //   border-radius: 4px;
-    //   display: flex;
-    //   // justify-content: space-around;
-    //   // justify-content: space-evenly;
-    //   justify-content: space-between;
-    //   align-items: center;
-    //   margin-bottom: 10px;
-    //   padding: 10px 20px 10px 20px;
-    //   box-sizing: border-box;
-
-    //   .function_item {
-    //     flex: none;
-    //     width: 6%;
-    //     height: 40px;
-    //     display: flex;
-    //     justify-content: space-between;
-    //     align-items: center;
-    //     flex-direction: row;
-    //     cursor: pointer;
-    //     background-color: #607eab;
-    //     border-radius: 8px;
-    //     padding: 0px 30px;
-
-    //     .item_img {
-    //       width: 30px;
-    //       height: 30px;
-    //       border-radius: 50%;
-    //       // background-color: #607eab;
-    //       display: flex;
-    //       align-items: center;
-    //       justify-content: center;
-    //       margin-right: 5px;
-    //       img {
-    //         width: 20px;
-    //         height: auto;
-    //       }
-    //     }
-
-    //     .item_img:nth-child(3),
-    //     .item_img:nth-child(6) {
-    //       padding: 10px !important;
-
-    //       img {
-    //         width: 20px !important;
-    //         height: auto;
-    //       }
-    //     }
-
-    //     .item_text {
-    //       p {
-    //         width: 80px;
-    //         margin: 0;
-    //         font-weight: 800;
-    //         color: var(--el-color-primary);
-    //         font-size: 14px;
-    //         font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
-    //       }
-    //     }
-    //   }
-
-    //   .function_item:hover,
-    //   .checked_function {
-    //     background-color: var(--el-color-primary);
-
-    //     .item_img {
-    //       // background-color: var(--el-color-primary);
-    //     }
-
-    //     .item_text {
-    //       p {
-    //         // color: var(--el-color-primary);
-    //         color: #fff;
-    //       }
-    //     }
-    //   }
-    // }
-
     .container_pieShow {
       width: 100% !important;
-      //min-height: 200px !important;
       height: auto;
       background-color: #eee;
-      // display: flex;
-      // justify-content: space-between;
-      // padding-left: 2ch;
       margin-bottom: 10px;
+
+      .container_pieShow_title {
+        display: flex;
+        justify-content: space-between;
+        padding: 0 15px;
+        font-weight: bold;
+        width: 100%;
+      }
+
     }
 
     .el-collapse {
       width: 100% !important;
-      // min-height: 200px !important;
       height: 100% !important;
       background-color: #eee;
-      // display: flex;
-      // justify-content: space-between;
-      // padding-left: 2ch;
-      // margin-bottom: 10px;
     }
 
     .el-collapse-item {
       width: 100% !important;
-      // min-height: 200px !important;
       height: 100% !important;
       background-color: #eee;
-      // display: flex !important;
     }
 
     .container_charts {
       width: 100%;
-      //min-height: 180px !important;
       height: 100%;
       background-color: #eee;
       display: flex;
       justify-content: space-between;
-      margin-bottom: 10px;
 
       .charts_info {
-        margin-top: 5px;
-        border-radius: 4px;
+        margin-top: 1px;
         flex: none;
         width: 33.1%;
         height: 100% !important;
         background-color: #fff;
-        // border-radius: 4px;
       }
     }
 
@@ -702,8 +575,11 @@ onUnmounted(() => {
       border-radius: 4px;
     }
 
+
+
     .tabs-menu {
       height: 100%;
+      border: 0;
     }
 
     .container_table {
@@ -724,17 +600,20 @@ onUnmounted(() => {
 
 :deep(.el-collapse-item__header) {
   color: var(--el-color-primary);
-  font-size: 18px;
+  font-size: 14px;
   font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
 }
 
 :deep(.el-collapse-item__conten) {
-  // background-color:#f6f6f6;
   padding-bottom: 0px !important;
 }
 
 :deep(.el-collapse-item__content ) {
-  // background-color:#f6f6f6;
   padding-bottom: 0px !important;
 }
+
+:deep(.el-tabs--border-card > .el-tabs__content) {
+  padding: 0 !important;
+}
+
 </style>