功能选择背景色样式更改

2024-08-27 16:06:16 +08:00
parent f8ad90ccf1
commit 88c242e155
2 changed files with 159 additions and 71 deletions
--- a/frontend/src/views/home/tabs/dashboard.vue
+++ b/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
-          class="function_item"
-          :class="
-            item.checked ? 'function_item checked_function' : 'function_item'
-          "
-          v-for="(item, index) in tabsList"
-          :key="index"
-          @click="handleCheckFunction(index)"
-        >
-          <div class="item_img">
-            <img :src="item.img" alt="" />
-          </div>
-          <div class="item_text">
-            <p>{{ item.label }}</p>
+        <div class="function_title"><p>功能选择</p></div>
+        <div class="function_main">
+          <div
+            class="function_item"
+            :class="
+              item.checked ? 'function_item checked_function' : 'function_item'
+            "
+            v-for="(item, index) in tabsList"
+            :key="index"
+            @click="handleCheckFunction(index)"
+          >
+            <div class="item_img">
+              <img :src="item.img" alt="" />
+            </div>
+            <div class="item_text">
+              <p>{{ item.label }}</p>
+            </div>
          </div>
        </div>
      </div>
@@ -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"
-console.log(data,"??????????185");
+import { data } from "@/api/plan/static.json";
+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) => {
-  console.log("🚀 ~ jump ~ e:", e)
+const jump = (e: any) => {
+  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 {
-        width: 120px;
-        height: 50px;
+      .function_title {
+        height: 100%;
+
+        width: 100px;
+        // line-height: 70px;
        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: #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;
-          }
+        justify-content: flex-start;
+        p {
+          font-size: 14px;
+          font-weight: 800;
+          text-align: center;
+          margin: 0;
        }
      }
-      .function_item:hover,
-      .checked_function {
-        .item_img {
-          background-color: var(--el-color-primary);
+      .function_main {
+        flex: 1;
+        display: flex;
+        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 {
-          p {
-            color: var(--el-color-primary);
+        .function_item:hover,
+        .checked_function {
+          .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;
    }
  }
--- a/frontend/src/views/plan/planList/index.vue
+++ b/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>重置</el-button>
+            <el-button type="primary" :icon="Search" @click="handleSearch"
+              >查询</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 {