功能选择背景色样式更改

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

@@ -105,6 +105,8 @@
       </div>
       <!-- 功能选择 -->
       <div class="container_function">
+        <div class="function_title"><p>功能选择</p></div>
+        <div class="function_main">
           <div
             class="function_item"
             :class="
@@ -122,6 +124,7 @@
             </div>
           </div>
         </div>
+      </div>
       <!-- 饼图 -->
       <div class="container_charts">
         <div class="charts_info">
@@ -181,7 +184,7 @@ 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");
 const treeRef = ref();
 const form: any = ref({
@@ -395,11 +398,11 @@ const handleCheckFunction = (val: 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,11 +458,31 @@ 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_title {
+        height: 100%;
+
+        width: 100px;
+        // line-height: 70px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        p {
+          font-size: 14px;
+          font-weight: 800;
+          text-align: center;
+          margin: 0;
+        }
+      }
+      .function_main {
+        flex: 1;
+        display: flex;
+        justify-content: space-between;
         .function_item {
           width: 120px;
           height: 50px;
@@ -472,7 +495,7 @@ onMounted(() => {
             width: 50px;
             height: 50px;
             border-radius: 50%;
-          background-color: #c6c6c6;
+            background-color: #607eab;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -510,6 +533,7 @@ onMounted(() => {
           }
         }
       }
+    }
     .container_charts {
       width: 100%;
       height: 200px;

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 {