功能选择背景色样式更改

frontend/src/views/home/tabs/dashboard.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="static">
     <div class="left_tree">
-      <tree ref="treeRef"  @jump="jump"/>
+      <tree ref="treeRef" @jump="jump" />
     </div>
     <!-- <span class="new_span">测试scss颜色</span> -->
     <div class="right_container">
@@ -105,20 +105,23 @@
       </div>
       <!-- 功能选择 -->
       <div class="container_function">
-        <div
+        <div class="function_title"><p>功能选择</p></div>
-          class="function_item"
+        <div class="function_main">
-          :class="
+          <div
-            item.checked ? 'function_item checked_function' : 'function_item'
+            class="function_item"
-          "
+            :class="
-          v-for="(item, index) in tabsList"
+              item.checked ? 'function_item checked_function' : 'function_item'
-          :key="index"
+            "
-          @click="handleCheckFunction(index)"
+            v-for="(item, index) in tabsList"
-        >
+            :key="index"
-          <div class="item_img">
+            @click="handleCheckFunction(index)"
-            <img :src="item.img" alt="" />
+          >
-          </div>
+            <div class="item_img">
-          <div class="item_text">
+              <img :src="item.img" alt="" />
-            <p>{{ item.label }}</p>
+            </div>
+            <div class="item_text">
+              <p>{{ item.label }}</p>
+            </div>
           </div>
         </div>
       </div>
@@ -181,8 +184,8 @@ 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"
+import { data } from "@/api/plan/static.json";
-console.log(data,"??????????185");
+console.log(data, "??????????185");
 const treeRef = ref();
 const form: any = ref({
   activeTabs: 0, //功能选择
@@ -391,15 +394,15 @@ const handleCheckFunction = (val: any) => {
       item.checked = false;
     }
   });
-  form.value.activeTabs=val;
+  form.value.activeTabs = val;
 };
 // 树点击跳转
-const jump=(e:any) => {
+const jump = (e: any) => {
-  console.log("🚀 ~ jump ~ e:", e)
+  console.log("🚀 ~ jump ~ e:", e);
   router.push({
     path: "/plan/planList",
   });
-}
+};
 onMounted(() => {
   console.log();
   getTree();
@@ -455,57 +458,78 @@ onMounted(() => {
       width: 100%;
       height: 70px;
       background: #fff;
+      border-radius: 4px;
       display: flex;
       justify-content: space-between;
       margin-bottom: 10px;
-      padding: 10px 50px;
+      padding: 10px 50px 10px 30px;
       box-sizing: border-box;
-      .function_item {
+      .function_title {
-        width: 120px;
+        height: 100%;
-        height: 50px;
+
+        width: 100px;
+        // line-height: 70px;
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        cursor: pointer;
+        justify-content: flex-start;
-        // border: 1px solid var(--el-color-primary);
+        p {
-        .item_img {
+          font-size: 14px;
-          width: 50px;
+          font-weight: 800;
-          height: 50px;
+          text-align: center;
-          border-radius: 50%;
+          margin: 0;
-          background-color: #c6c6c6;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          img {
-            width: 30px;
-            height: auto;
-          }
-        }
-        .item_img:nth-child(3),
-        .item_img:nth-child(6) {
-          padding: 10px !important;
-          img {
-            width: 20px !important;
-            height: auto;
-          }
-        }
-        .item_text {
-          p {
-            margin: 0;
-            color: var(--el-color-primary);
-            font-weight: 800;
-            color: #000;
-          }
         }
       }
-      .function_item:hover,
+      .function_main {
-      .checked_function {
+        flex: 1;
-        .item_img {
+        display: flex;
-          background-color: var(--el-color-primary);
+        justify-content: space-between;
+        .function_item {
+          width: 120px;
+          height: 50px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          cursor: pointer;
+          // border: 1px solid var(--el-color-primary);
+          .item_img {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background-color: #607eab;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            img {
+              width: 30px;
+              height: auto;
+            }
+          }
+          .item_img:nth-child(3),
+          .item_img:nth-child(6) {
+            padding: 10px !important;
+            img {
+              width: 20px !important;
+              height: auto;
+            }
+          }
+          .item_text {
+            p {
+              margin: 0;
+              color: var(--el-color-primary);
+              font-weight: 800;
+              color: #000;
+            }
+          }
         }
-        .item_text {
+        .function_item:hover,
-          p {
+        .checked_function {
-            color: var(--el-color-primary);
+          .item_img {
+            background-color: var(--el-color-primary);
+          }
+          .item_text {
+            p {
+              color: var(--el-color-primary);
+            }
           }
         }
       }
@@ -529,7 +553,7 @@ onMounted(() => {
     }
     .container_table {
       width: 100%;
-flex:1;
+      flex: 1;
       border-radius: 4px;
     }
   }

frontend/src/views/plan/planList/index.vue

@@ -14,7 +14,7 @@
           <el-form-item label="检测时间">
             <el-select
               v-model="searchForm.intervalType"
-              style="width: 100px !important"
+              style="width: 80px !important"
             >
               <el-option :value="0" label="按周">按周</el-option>
               <el-option :value="1" label="按月">按月</el-option>
@@ -22,7 +22,17 @@
             </el-select>
           </el-form-item>
           <el-form-item label="">
-            <el-date-picker> </el-date-picker>
+            <!-- <el-date-picker v-model="searchForm.time"></el-date-picker> -->
+            <el-date-picker
+              style="width: 220px"
+              v-model="searchForm.time"
+              type="daterange"
+              unlink-panels
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :shortcuts="shortcuts"
+            />
           </el-form-item>
           <el-form-item label="检测状态">
             <el-select v-model="searchForm.checkStatus">
@@ -49,8 +59,10 @@
             </el-select>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary">查询</el-button>
+            <el-button type="primary" :icon="Search" @click="handleSearch"
-            <el-button>重置</el-button>
+              >查询</el-button
+            >
+            <el-button :icon="Refresh" @click="handleRefresh">重置</el-button>
           </el-form-item>
         </el-form>
 
@@ -139,9 +151,42 @@ import {
   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 shortcuts = [
+  {
+    text: "最近一周",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      return [start, end];
+    },
+  },
+  {
+    text: "最近一个月",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      return [start, end];
+    },
+  },
+  {
+    text: "最近三个月",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      return [start, end];
+    },
+  },
+];
 
 // 跳转详情页
 const toDetail = () => {
@@ -151,6 +196,7 @@ const toDetail = () => {
 };
 const searchForm = ref({
   intervalType: 0,
+  time: ["2024-08-20", "2024-08-27"],
   searchBeginTime: "",
   searchEndTime: "",
   checkStatus: 0,
@@ -185,7 +231,6 @@ const getTableList = (params: any) => {
   delete newParams.createTime;
   return getPlanList(newParams);
 };
-
 // 表格配置项
 const columns = reactive<ColumnProps<User.ResUserList>[]>([
   { type: "selection", fixed: "left", width: 70 },
@@ -326,7 +371,26 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
   },
   { 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,
@@ -386,7 +450,7 @@ onMounted(() => {
   height: calc(100vh - 130px);
 }
 ::v-deep .el-select {
-  width: 180px !important;
+  width: 150px !important;
 }
 
 .el-form {