更新ele版本。工程页面接口调试。

.env.development

@@ -10,8 +10,8 @@ VITE_APP_BASE_API = '/dev-api'
 # 线上接口地址
 
 # 开发接口地址
-# VITE_APP_API_URL = 'http://192.168.101.4:8078'
-VITE_APP_API_URL = 'http://192.168.1.43:7201'
+
+VITE_APP_API_URL = 'http://192.168.1.43:7205/'
 
 # 是否启用 Mock 服务
-VITE_MOCK_DEV_SERVER = true
+VITE_MOCK_DEV_SERVER = false

package.json

@@ -51,7 +51,7 @@
     "@wangeditor/editor-for-vue": "5.1.10",
     "axios": "^1.6.7",
     "echarts": "^5.5.0",
-    "element-plus": "2.8.0",
+    "element-plus": "2.9.5",
     "less": "^4.2.2",
     "lodash-es": "^4.17.21",
     "net": "^1.0.2",

pnpm-lock.yaml

@@ -16,7 +16,7 @@ importers:
         version: 2.3.1(vue@3.5.13(typescript@5.7.3))
       '@smallwei/avue':
         specifier: ^3.3.3
-        version: 3.6.2(element-plus@2.8.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
+        version: 3.6.2(element-plus@2.9.5(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
       '@types/smallwei__avue':
         specifier: ^3.0.5
         version: 3.0.5
@@ -42,8 +42,8 @@ importers:
         specifier: ^5.5.0
         version: 5.6.0
       element-plus:
-        specifier: 2.8.0
-        version: 2.8.0(vue@3.5.13(typescript@5.7.3))
+        specifier: 2.9.5
+        version: 2.9.5(vue@3.5.13(typescript@5.7.3))
       less:
         specifier: ^4.2.2
         version: 4.2.2
@@ -2166,8 +2166,8 @@ packages:
   electron-to-chromium@1.5.102:
     resolution: {integrity: sha512-eHhqaja8tE/FNpIiBrvBjFV/SSKpyWHLvxuR9dPTdo+3V9ppdLmFB7ZZQ98qNovcngPLYIz0oOBF9P0FfZef5Q==}
 
-  element-plus@2.8.0:
-    resolution: {integrity: sha512-7ngapVlVlQAjocVqD4MUKvKXlBneT9DSDk2mmBOSLRFWNm/HLDT15ozmsvUBfy18sajnyUeSIHTtINE8gfrGMg==}
+  element-plus@2.9.5:
+    resolution: {integrity: sha512-r+X79oogLbYq8p9L5f9fHSHhUFNM0AL72aikqiZVxSc2/08mK6m/PotiB9e/D90QmWTIHIaFnFmW65AcXmneig==}
     peerDependencies:
       vue: ^3.2.0
 
@@ -5751,12 +5751,12 @@ snapshots:
 
   '@sindresorhus/merge-streams@2.3.0': {}
 
-  '@smallwei/avue@3.6.2(element-plus@2.8.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))':
+  '@smallwei/avue@3.6.2(element-plus@2.9.5(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@element-plus/icons-vue': 2.3.1(vue@3.5.13(typescript@5.7.3))
       countup.js: 1.9.3
       dayjs: 1.11.13
-      element-plus: 2.8.0(vue@3.5.13(typescript@5.7.3))
+      element-plus: 2.9.5(vue@3.5.13(typescript@5.7.3))
       lodash: 4.17.21
       vue: 3.5.13(typescript@5.7.3)
 
@@ -7198,7 +7198,7 @@ snapshots:
 
   electron-to-chromium@1.5.102: {}
 
-  element-plus@2.8.0(vue@3.5.13(typescript@5.7.3)):
+  element-plus@2.9.5(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       '@ctrl/tinycolor': 3.6.1
       '@element-plus/icons-vue': 2.3.1(vue@3.5.13(typescript@5.7.3))

src/api/project/index.ts

@@ -0,0 +1,59 @@
+import request from "@/utils/request";
+import { AxiosPromise } from "axios";
+
+// 新增测试工程表
+export function addProject(data: object): AxiosPromise {
+  return request({
+    url: "/api/v1/test/engineering/add",
+    method: "post",
+    data: data,
+  });
+}
+
+// 修改测试工程表
+export function updateProject(data: object): AxiosPromise {
+  return request({
+    url: "/api/v1/test/engineering/update",
+    method: "post",
+    data: data,
+  });
+}
+
+// 删除测试工程表
+export function deleteProject(id: number): AxiosPromise {
+  return request({
+    url: "/api/v1/test/engineering/del",
+    method: "post",
+    data: {
+      id: id,
+    },
+  });
+}
+
+// 根据id查询测试工程表
+export function getProjectById(id: number): AxiosPromise {
+  return request({
+    url: "/api/v1/test/engineering/" + id,
+    method: "get",
+  });
+}
+
+// 查询所有测试工程表
+// 测试工程表分页查询
+export function getProjectPage(data: object): AxiosPromise {
+  return request({
+    url: "/api/v1/test/engineering/page",
+    method: "post",
+    data: data,
+  });
+}
+
+// 测试工程类型统计
+
+export function getProjectTypeCount(): AxiosPromise {
+  return request({
+    url: "/api/v1/test/engineering/typeStatistics",
+    method: "post",
+    data: {},
+  });
+}

src/views/main/components/header.vue

@@ -46,7 +46,7 @@ const loginOutFun = () => {
   align-items: center;
   padding: 0 10px;
 
-  ::v-deep .el-popper {
+  :deep(.el-popper) {
     .loginOut {
       cursor: pointer;
     }

src/views/main/components/menu.vue

@@ -31,7 +31,7 @@ const menus = ref<MenuItem[]>([
     route: "/main/project-config",
   },
   {
-    name: "报告魔板",
+    name: "报告模版",
     icon: "report-template",
     route: "/main/report-template",
   },

src/views/modules/global-config/global-config.vue

@@ -277,7 +277,7 @@ const globalHandledel = (index: number, row: any) => {
   height: 100vh;
   .demo-tabs {
     // background-color: red;
-    ::v-deep .el-tabs__nav-scroll {
+    :deep(.el-tabs__nav-scroll) {
       padding: 0 20px;
     }
   }

src/views/modules/home/components/add.vue

@@ -4,29 +4,46 @@
       v-model="dialogVisible"
       title="新建测试工程"
       width="500"
-      @closed="emitHidden"
+      :close-on-click-modal="false"
+      @closed="handleClose"
     >
       <el-form
         :label-position="labelPosition"
         label-width="auto"
-        :model="formLabelAlign"
+        ref="formRef"
+        :rules="rules"
+        v-model:model="formLabelAlign"
         style="max-width: 600px"
       >
-        <el-form-item label="产品" :label-position="itemLabelPosition">
-          <el-input v-model="formLabelAlign.name" />
+        <el-form-item
+          label="产品"
+          :label-position="itemLabelPosition"
+          prop="engineeringProductName"
+        >
+          <el-input v-model="formLabelAlign.engineeringProductName" />
         </el-form-item>
-        <el-form-item label="类型" :label-position="itemLabelPosition">
-          <el-input v-model="formLabelAlign.type" />
+        <el-form-item
+          label="类型"
+          :label-position="itemLabelPosition"
+          prop="engineeringType"
+        >
+          <el-input v-model="formLabelAlign.engineeringType" />
         </el-form-item>
-        <el-form-item label="版本" :label-position="itemLabelPosition">
-          <el-input v-model="formLabelAlign.region" />
+        <el-form-item
+          label="版本"
+          :label-position="itemLabelPosition"
+          prop="engineeringVersion"
+        >
+          <el-input v-model="formLabelAlign.engineeringVersion" />
         </el-form-item>
       </el-form>
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button @click="emitHidden">取消</el-button>
-          <el-button type="primary" @click="saveFun"> 保存 </el-button>
+          <el-button @click="handleClose">取消</el-button>
+          <el-button type="primary" @click="submitForm(formRef)">
+            保存
+          </el-button>
         </div>
       </template>
     </el-dialog>
@@ -38,46 +55,70 @@ import { reactive, ref, watch } from "vue";
 
 const dialogVisible = ref(false);
 
-import type { FormItemProps, FormProps } from "element-plus";
+import type { FormItemProps, FormProps, FormRules } from "element-plus";
+import { addProject, updateProject } from "@/api/project";
 
 const labelPosition = ref<FormProps["labelPosition"]>("right");
 const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");
 
 interface VersionItem {
-  name: string;
-  type: string;
-  region: string;
+  engineeringProductName: string;
+  engineeringType: string;
+  engineeringVersion: string;
 }
 
+const formRef = ref<FormProps>();
+
 const formLabelAlign = ref<VersionItem>({
-  name: "name1",
-  type: "实现基础框架搭建，包含权限管理、路由系统等核心功能。",
-  region: "v2.4.0",
+  engineeringProductName: "",
+  engineeringType: "",
+  engineeringVersion: "",
 });
-
-// const handleClose = (done: () => void) => {};
-let { show } = defineProps({
-  show: {
-    type: Boolean,
-    required: false,
-  },
+const rules = reactive({
+  engineeringProductName: [
+    { required: true, message: "请输入 产品名称", trigger: "blur" },
+  ],
+  engineeringType: [
+    { required: true, message: "请输入 工程类型", trigger: "blur" },
+  ],
+  engineeringVersion: [
+    { required: true, message: "请输入 工程版本", trigger: "blur" },
+  ],
 });
 
-watch(
-  () => show,
-  (newVal, oldVal) => {
-    dialogVisible.value = newVal;
-  }
-);
+const emit = defineEmits(["saveFinish"]);
+const handleClose = (done: () => void) => {
+  formRef.value && formRef.value.resetFields();
+  dialogVisible.value = false;
+};
 
-const emit = defineEmits(["handleCancel", "save"]);
-const emitHidden = () => {
-  emit("handleCancel", false);
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      if (isEdit1) {
+        updateProject(formLabelAlign.value);
+      } else {
+        await addProject(formLabelAlign.value);
+      }
+      emit("saveFinish");
+      handleClose();
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
 };
 
-const saveFun = () => {
-  emit("save", formLabelAlign.value);
+let isEdit1 = false;
+const openDialog = (isEdit: boolean, row: VersionItem) => {
+  dialogVisible.value = true;
+  isEdit1 = isEdit;
+  if (isEdit) {
+    formLabelAlign.value = row;
+  }
 };
+
+defineExpose({ openDialog });
 </script>
 <style scoped lang="scss">
 // .add {

src/views/modules/home/components/details.vue

@@ -1,25 +1,33 @@
 <template>
   <div class="add">
-    <el-dialog
-      v-model="dialogVisible"
-      title="新建测试工程"
-      width="500"
-      @closed="emitHidden"
-    >
+    <el-dialog v-model="dialogVisible" title="测试工程详情" width="500">
       <el-form
         :label-position="labelPosition"
         label-width="auto"
         :model="formLabelAlign"
         style="max-width: 600px"
       >
-        <el-form-item label="产品" :label-position="itemLabelPosition">
-          <el-input v-model="formLabelAlign.name" />
+        <el-form-item label="产品: " :label-position="itemLabelPosition">
+          <span v-text="formLabelAlign.engineeringProductName" />
         </el-form-item>
-        <el-form-item label="类型" :label-position="itemLabelPosition">
-          <el-input v-model="formLabelAlign.type" />
+        <el-form-item label="类型: " :label-position="itemLabelPosition">
+          <span v-text="formLabelAlign.engineeringType" />
         </el-form-item>
-        <el-form-item label="版本" :label-position="itemLabelPosition">
-          <el-input v-model="formLabelAlign.region" />
+        <el-form-item label="版本: " :label-position="itemLabelPosition">
+          <span v-text="formLabelAlign.engineeringVersion" />
+        </el-form-item>
+
+        <el-form-item label="开发人员: " :label-position="itemLabelPosition">
+          <span v-text="formLabelAlign.creator" />
+        </el-form-item>
+        <el-form-item label="创建时间: " :label-position="itemLabelPosition">
+          <span v-text="formLabelAlign.created" />
+        </el-form-item>
+        <el-form-item label="修改时间: " :label-position="itemLabelPosition">
+          <span v-text="formLabelAlign.updated" />
+        </el-form-item>
+        <el-form-item label="是否发布: " :label-position="itemLabelPosition">
+          <span>{{ formLabelAlign.publishStatus ? "已发布" : "未发布" }}</span>
         </el-form-item>
       </el-form>
     </el-dialog>
@@ -37,39 +45,28 @@ const labelPosition = ref<FormProps["labelPosition"]>("right");
 const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");
 
 interface VersionItem {
-  name: string;
-  type: string;
-  region: string;
+  id?: string; //	主键	string
+  engineeringProductName?: string; //	产品名称	string
+  engineeringType?: string; //	工程类型	string
+  engineeringVersion?: string; //	工程版本	string
+  creator?: string; //创建人	string 开发人员
+  updated?: string; //	修改时间	string(date-time)
+  created?: string; //	创建时间string(date-time)
+  deleted?: string; //	删除标识;0-未删除；1-已删除	integer(int32)
+  deptId?: string; //	部门ID	string
+  orgId?: string; //	组织ID	string
+  updator?: string; //	上次修改人	string
+  publishStatus?: number; //发布状态：0-发布 1-未发布
 }
 
-const formLabelAlign = ref<VersionItem>({
-  name: "name1",
-  type: "实现基础框架搭建，包含权限管理、路由系统等核心功能。",
-  region: "v2.4.0",
-});
+const formLabelAlign = ref<VersionItem>({});
 
-let { show } = defineProps({
-  show: {
-    type: Boolean,
-    required: false,
-  },
-});
-
-watch(
-  () => show,
-  (newVal, oldVal) => {
-    dialogVisible.value = newVal;
-  }
-);
-
-const emit = defineEmits(["handleCancel", "save"]);
-const emitHidden = () => {
-  emit("handleCancel", false);
+const openDialog = (isEdit: boolean, row: VersionItem) => {
+  dialogVisible.value = true;
+  formLabelAlign.value = row;
 };
 
-const saveFun = () => {
-  emit("save", formLabelAlign.value);
-};
+defineExpose({ openDialog });
 </script>
 <style scoped lang="scss">
 // .add {
@@ -79,4 +76,8 @@ const saveFun = () => {
 //   // z-index: 10;
 //   // background-color: #000;
 // }
+span {
+  font-size: 16px;
+  font-weight: bold;
+}
 </style>

src/views/modules/home/home.vue

@@ -21,13 +21,15 @@
         >
           <div
             class="head-box-item"
-            :class="[checkedCities.includes(city) ? 'active' : '']"
-            v-for="city in cities"
-            :key="city"
+            :class="[
+              checkedCities.includes(type.engineeringType) ? 'active' : '',
+            ]"
+            v-for="type in typeList"
+            :key="type.engineeringType"
           >
-            <el-checkbox label="" :value="city"></el-checkbox>
-            <div class="name">射频类</div>
-            <div class="num">99+</div>
+            <el-checkbox label="" :value="type.engineeringType"></el-checkbox>
+            <div class="name">{{ type.engineeringType }}</div>
+            <div class="num">{{ type.typeCount }}</div>
           </div>
         </el-checkbox-group>
       </div>
@@ -40,14 +42,14 @@
             <span class="add">+</span>
             新增工程
           </el-button>
-          <el-button class="active">
-            <i />
-            按时间倒序
-          </el-button>
-          <el-button class="normal">
-            <i />
-            按创建人姓名
-          </el-button>
+          <!--          <el-button class="active">-->
+          <!--            <i />-->
+          <!--            按时间倒序-->
+          <!--          </el-button>-->
+          <!--          <el-button class="normal">-->
+          <!--            <i />-->
+          <!--            按创建人姓名-->
+          <!--          </el-button>-->
         </div>
       </div>
 
@@ -60,7 +62,11 @@
           <div class="list-item-flex">
             <div class="list-itme-tit">{{ item.engineeringProductName }}</div>
             <div class="list-item-switch">
-              <span class="item-gray">发布</span><el-switch v-model="value" />
+              <span class="item-gray">发布</span
+              ><el-switch
+                v-model="item.publishStatus"
+                @change="changeProjectStatus(item)"
+              />
             </div>
           </div>
           <div class="list-item-flex">
@@ -81,13 +87,31 @@
             </div>
           </div>
           <div class="list-item-btns">
-            <span @click="showDetailsFun(item)">
+            <span @click="toEdit(item)">
               <svg-icon icon-class="homeIcon2" />
             </span>
-            <span>
-              <svg-icon icon-class="homeIcon3" />
-            </span>
-            <span>
+            <el-popconfirm
+              width="220"
+              :icon="InfoFilled"
+              icon-color="#626AEF"
+              title="确认要删除这个工程吗?"
+              @cancel="onDelCancel"
+              @confirm="deleteConfirm(item)"
+            >
+              <template #reference>
+                <span>
+                  <svg-icon icon-class="homeIcon3" />
+                </span>
+              </template>
+              <template #actions="{ confirm, cancel }">
+                <el-button size="small" @click="cancel">取消</el-button>
+                <el-button type="danger" size="small" @click="confirm">
+                  确认删除
+                </el-button>
+              </template>
+            </el-popconfirm>
+
+            <span @click="showDetailsFun(item)">
               <svg-icon icon-class="homeIcon4" />
             </span>
             <span>
@@ -99,57 +123,62 @@
       <el-pagination
         class="content-pag"
         background
-        layout="prev, pager, next"
-        :page-size="9"
-        :total="1000"
-        @change="handleChange"
+        layout="sizes,prev, pager, next"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :total="total"
+        :page-sizes="[9, 12, 15, 18, 30]"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
       />
     </div>
-  </div>
-
-  <AddComponent
-    :show="showAdd"
-    @handleCancel="showAdd = false"
-    @save="saveFun"
-  />
+    <AddComponent ref="addRef" @save-finish="getEngineeringList" />
 
-  <DetailsComponent :show="showDetails" @handleCancel="showDetails = false" />
+    <DetailsComponent ref="detailRef" />
+  </div>
 </template>
 
 <script lang="ts" setup>
+import { InfoFilled } from "@element-plus/icons-vue";
 import AddComponent from "./components/add.vue";
 import DetailsComponent from "./components/details.vue";
 
 import { ref } from "vue";
 
 import type { CheckboxValueType } from "element-plus";
+import {
+  deleteProject,
+  getProjectPage,
+  getProjectTypeCount,
+  updateProject,
+} from "@/api/project";
 
 const checkAll = ref(false);
 const isIndeterminate = ref(true);
-const checkedCities = ref(["Shanghai", "Beijing"]);
-const cities = [
-  "Shanghai",
-  "Beijing",
-  "Guangzhou",
-  "Shenzhen",
-  "1",
-  "2",
-  "3",
-  "4",
-];
+const checkedCities = ref([]);
+const typeList = ref([]);
+// 获取所有的工程类型
+const getEngineeringTypeList = () => {
+  getProjectTypeCount().then((res) => {
+    typeList.value = res.data?.statisticsList ?? [];
+  });
+};
 
 const handleCheckAllChange = (val: CheckboxValueType) => {
-  checkedCities.value = val ? cities : [];
+  checkedCities.value = val
+    ? typeList.value.map((item) => item.engineeringType)
+    : [];
   isIndeterminate.value = false;
+  getEngineeringList(false);
 };
 const handleCheckedCitiesChange = (value: CheckboxValueType[]) => {
   const checkedCount = value.length;
-  checkAll.value = checkedCount === cities.length;
-  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length;
+  checkAll.value = checkedCount === typeList.value.length;
+  isIndeterminate.value =
+    checkedCount > 0 && checkedCount < typeList.value.length;
+  getEngineeringList(false);
 };
 
-const value = ref(true);
-
 interface VersionItem {
   id: string; //	主键	string
   engineeringProductName: string; //	产品名称	string
@@ -162,93 +191,86 @@ interface VersionItem {
   deptId: string; //	部门ID	string
   orgId: string; //	组织ID	string
   updator: string; //	上次修改人	string
+  publishStatus: number; //发布状态：0-发布 1-未发布
 }
 
-const engineeringList = ref<VersionItem[]>([
-  {
-    id: "",
-    engineeringProductName: "",
-    engineeringType: "",
-    engineeringVersion: "",
-    creator: "",
-    updated: "",
-    created: "",
-    deleted: "",
-    deptId: "",
-    orgId: "",
-    updator: "",
-  },
-  {
-    id: "",
-    engineeringProductName: "",
-    engineeringType: "",
-    engineeringVersion: "",
-    creator: "",
-    updated: "",
-    created: "",
-    deleted: "",
-    deptId: "",
-    orgId: "",
-    updator: "",
-  },
-  {
-    id: "",
-    engineeringProductName: "",
-    engineeringType: "",
-    engineeringVersion: "",
-    creator: "",
-    updated: "",
-    created: "",
-    deleted: "",
-    deptId: "",
-    orgId: "",
-    updator: "",
-  },
-  {
-    id: "",
-    engineeringProductName: "",
-    engineeringType: "",
-    engineeringVersion: "",
-    creator: "",
-    updated: "",
-    created: "",
-    deleted: "",
-    deptId: "",
-    orgId: "",
-    updator: "",
-  },
-]);
-
-/**
- * 分页事件,每页9条
- */
-const handleChange = (currentPage: number, pageSize: number) => {
-  // console.log(currentPage);
-  // console.log(pageSize);
-};
-
 /**
  * 显示新增弹框
  */
-let showAdd = ref(false);
+const addRef = ref();
 const showAddFun = () => {
-  showAdd.value = true;
+  addRef.value && addRef.value.openDialog();
+};
+const toEdit = (row) => {
+  addRef.value &&
+    addRef.value.openDialog(true, JSON.parse(JSON.stringify(row)));
 };
 
-/**
- * 新增弹框返回的数据 请求完成后关闭弹框 showAdd.value = false;
- */
-const saveFun = (item: VersionItem) => {
-  console.log(item);
+// 发布
+const changeProjectStatus = async (item: VersionItem) => {
+  await updateProject(item);
+  getEngineeringList(false);
 };
 
 /**
  * 显示新增弹框
  */
-let showDetails = ref(false);
-const showDetailsFun = (item: any) => {
-  console.log(item);
-  showDetails.value = true;
+const detailRef = ref();
+
+const showDetailsFun = (row: any) => {
+  detailRef.value &&
+    detailRef.value.openDialog(true, JSON.parse(JSON.stringify(row)));
+};
+
+// 获取列表数据
+const currentPage = ref(1);
+const pageSize = ref(9);
+const total = ref(0);
+const engineeringList = ref<VersionItem[]>([]);
+
+const handleSizeChange = (val: number) => {
+  pageSize.value = val;
+  currentPage.value = 1;
+  getEngineeringList();
+};
+const handleCurrentChange = (val: number) => {
+  currentPage.value = val;
+  getEngineeringList();
+};
+
+// const isAsc = ref();
+const getEngineeringList = (andGetTypes: boolean = true) => {
+  getProjectPage({
+    engineeringTypeList: [...checkedCities.value],
+    // orders: [
+    //   {
+    //     column: "",
+    //     isAsc: true,
+    //   },
+    // ],
+    pageNo: currentPage.value,
+    pageSize: pageSize.value,
+    // publishStatus: 0,
+  }).then((res) => {
+    console.log(res);
+    engineeringList.value = res.data.records;
+    total.value = res.data.totalCount;
+  });
+  if (andGetTypes) {
+    getEngineeringTypeList();
+  }
+};
+
+onMounted(() => {
+  getEngineeringList();
+});
+
+//  删除相关
+const onDelCancel = () => {};
+const deleteConfirm = async (item) => {
+  await deleteProject(item.id);
+  ElMessage.success("删除成功");
+  getEngineeringList();
 };
 </script>
 
@@ -261,7 +283,7 @@ const showDetailsFun = (item: any) => {
     color: var(--hj-white-1);
     display: flex;
     height: 100px;
-    background: var(--gray-bg-1);
+    background: $hj-white-1;
     // width: 100%;
     // overflow: hidden;
     min-width: 0;
@@ -405,6 +427,7 @@ const showDetailsFun = (item: any) => {
       box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
       border-radius: 4px 4px 4px 4px;
       padding-top: 12px;
+      background-color: $hj-white-1;
     }
 
     .list-item-flex {

src/views/modules/runTest/run-test.vue

@@ -282,7 +282,7 @@ $color-progress: #3cbaff;
     height: 300px;
     background: linear-gradient(180deg, #404040 0%, #505050 100%);
     border-radius: 0px 0px 0px 0px;
-    ::v-deep .el-scrollbar__view {
+    :deep(.el-scrollbar__view) {
       height: 100%;
     }
     .drawerbtn {
@@ -547,7 +547,7 @@ $color-progress: #3cbaff;
       }
     }
   }
-  ::v-deep .test-drawer {
+  :deep(.test-drawer) {
     background: linear-gradient(180deg, #434343 0%, #4f4f4f 100%);
     box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
   }