登录页面样式&检测计划样式修改

2024-08-23 16:51:49 +08:00
parent d0aaa24f90
commit 531ec04f8d
11 changed files with 170 additions and 262 deletions
--- a/frontend/src/views/home/components/tree.vue
+++ b/frontend/src/views/home/components/tree.vue
@@ -4,14 +4,18 @@
      placeholder="请输入计划名称"
      v-model="searchForm.planName"
    ></el-input>
-    <el-tree
-      :data="data"
-      ref="treeRef"
-      :filter-node-method="filterNode"
-      :props="defaultProps"
-      node-key="id"
-      @node-click="handleNodeClick"
-    />
+    <div class="tree_container">
+      <el-tree
+        :data="data"
+        ref="treeRef"
+        :filter-node-method="filterNode"
+        :props="defaultProps"
+        node-key="id"
+        default-expand-all
+        @node-click="handleNodeClick"
+      >
+    </el-tree>
+    </div>
  </div>
 </template>
 <script lang="ts" setup>
@@ -55,16 +59,20 @@ defineExpose({ getTreeData });
 .plan_tree {
  width: 200px;
  height: 100%;
-  //   display: flex;
-  //   flex-direction: column;
+  display: flex;
+  flex-direction: column;
  padding: 5px;
+  height: calc(100% - 70px);
  .el-input {
    width: 100%;
-    // height: 40px;
-    margin:0 10px 10px 0;
+    margin: 0 10px 10px 0;
  }
-  .el-tree {
-    height: calc(100% - 70px);
+  .tree_container {
+    flex: 1;
+    overflow-y: auto;
+    .el-tree {
+      height: 100%;
+    }
  }
 }
 </style>
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -79,162 +79,8 @@ onMounted(() => {
 });
 </script>
 <style lang="scss" scoped>
-.main_container {
+.home{
  width: 100%;
-  height: calc(100vh - 120px);
-  // overflow-y: auto;
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  align-items: center;
-  // padding: 20px 2%;
-  .mode {
-    //   width: 31.5%;
-    //   height: 100%;
-    flex: none;
-    width: 32.5%;
-    height: 100%;
-    border: 1px solid #eee;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    // justify-content: space-around;
-    background: #fff;
-    border-radius: 6px;
-    margin-bottom: 20px;
-    background: linear-gradient(
-      180deg,
-      rgba(0, 153, 255, 1) 0%,
-      rgba(0, 153, 255, 1) 0%,
-      rgba(0, 102, 255, 1) 65%,
-      rgba(0, 51, 255, 1) 100%,
-      rgba(0, 51, 255, 1) 100%
-    );
-    //   padding: 40px 0;
-    .mode_top {
-      width: 100%;
-      height: 40px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      background: #008aff;
-      border-radius: 6px 6px 0 0;
-      .mode_name {
-        width: 100%;
-        height: 40px;
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        p {
-          font-family: "微软雅黑 Bold", "微软雅黑", "微软雅黑", sans-serif;
-          font-weight: 700;
-          font-style: normal;
-          font-size: 16px;
-          color: #ffffff;
-          text-align: center;
-          //   background: #fff;
-          line-height: 40px;
-          text-align: left;
-          padding-left: 10px;
-          // margin-top: 20px;
-        }
-        .mode_subName {
-          font-family: "微软雅黑", sans-serif;
-          font-weight: 400;
-          font-style: normal;
-          font-size: 12px;
-          color: #ffffff;
-          line-height: 40px;
-          text-align: center;
-          padding: 5px 0 0 10px;
-          // margin-top: 10px;
-        }
-      }
-
-      .test_button {
-        width: 150px;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        padding-right: 5px;
-      }
-    }
-    .mode_img {
-      width: 100%;
-      height: auto;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      // padding: 30px 0 50px;
-      margin-top: 100px;
-      img:nth-child(1) {
-        width: 60%;
-        height: auto;
-        display: block;
-      }
-      img:nth-child(2) {
-        width: 70%;
-        height: auto;
-        display: block;
-      }
-      img:nth-child(3) {
-        width: 60%;
-        height: auto;
-        display: block;
-      }
-    }
-    .mode_test {
-      width: 100%;
-      height: 40px;
-      display: flex;
-      justify-content: center;
-      margin-bottom: 20px;
-      .test_button {
-        width: 120px;
-        height: 100%;
-        border: 1px solid rgba(121, 121, 121, 1);
-        border-radius: 5px;
-        font-family: "微软雅黑", sans-serif;
-        font-weight: 400;
-        font-style: normal;
-        color: #fff;
-        line-height: 20px;
-        text-align: center;
-        line-height: 40px;
-        cursor: pointer;
-      }
-      .test_button:hover {
-        background: rgba(0, 0, 0, 0.2);
-      }
-    }
-  }
-
-  .mode:nth-child(3n + 3) {
-    background: linear-gradient(
-      180deg,
-      rgba(0, 153, 255, 1) 0%,
-      rgba(0, 153, 255, 1) 0%,
-      rgba(0, 102, 255, 1) 39%,
-      rgba(102, 51, 204, 1) 100%,
-      rgba(102, 51, 204, 1) 100%
-    );
-  }
-  .mode_off {
-    .mode_name,
-    .mode_subName,
-    .test_button {
-      color: #fff !important;
-    }
-    .test_button:hover {
-      // background: rgba(0, 0, 0, 0.2) !important;
-      cursor: pointer;
-    }
-  }
-}
-::v-deep .el-sub-menu__title {
-  border-bottom: 0 !important;
-  outline: none !important;
+  height: 100%;
 }
 </style>
--- a/frontend/src/views/home/tabs/dashboard.vue
+++ b/frontend/src/views/home/tabs/dashboard.vue
@@ -6,6 +6,50 @@
    </div>
    <!-- <span class="new_span">测试scss颜色</span> -->
    <div class="right_container">
+      <div class="container_charts">
+        <div class="charts_info">
+          <pie
+            :customData="{
+              title: '检测状态',
+              textAlign: 'right',
+            }"
+            :legendData="{
+              icon: 'circle',
+              left: 'left',
+            }"
+            :chartsData="chartsData1"
+            ref="pieRef1"
+          ></pie>
+        </div>
+        <div class="charts_info">
+          <pie
+            :customData="{
+              title: '检测结果',
+              textAlign: 'right',
+            }"
+            :legendData="{
+              icon: 'circle',
+              left: 'left',
+            }"
+            :chartsData="chartsData2"
+            ref="pieRef2"
+          ></pie>
+        </div>
+        <div class="charts_info">
+          <pie
+            :customData="{
+              title: '报告状态',
+              textAlign: 'right',
+            }"
+            :legendData="{
+              icon: 'circle',
+              left: 'left',
+            }"
+            :chartsData="chartsData3"
+            ref="pieRef3"
+          ></pie>
+        </div>
+      </div>
      <div class="container_title">
        <el-form :model="form" label-width="80px" :inline="true">
          <el-form-item label="功能选择">
@@ -80,10 +124,16 @@
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
-            <el-button type="primary" @click="handleDetection" v-if="form.activeTabs === 0"
+            <el-button
+              type="primary"
+              @click="handleDetection"
+              v-if="form.activeTabs === 0"
              >启动自动检测</el-button
            >
-            <el-button type="primary" @click="handleDetection" v-if="form.activeTabs === 1"
+            <el-button
+              type="primary"
+              @click="handleDetection"
+              v-if="form.activeTabs === 1"
              >启动手动检测</el-button
            >
            <el-button type="primary" v-if="form.activeTabs === 2"
@@ -92,47 +142,11 @@
            <el-button type="primary" v-if="form.activeTabs === 5"
              >设备导入</el-button
            >
+            <el-button type="primary">计划详情</el-button>
          </el-form-item>
        </el-form>
      </div>
-      <div class="container_charts">
-        <div class="charts_info">
-          <pie
-            :customData="{
-              title: '检测状态',
-            }"
-            :legendData="{
-              icon: 'circle',
-            }"
-            :chartsData="chartsData1"
-            ref="pieRef1"
-          ></pie>
-        </div>
-        <div class="charts_info">
-          <pie
-            :customData="{
-              title: '检测结果',
-            }"
-            :legendData="{
-              icon: 'circle',
-            }"
-            :chartsData="chartsData2"
-            ref="pieRef2"
-          ></pie>
-        </div>
-        <div class="charts_info">
-          <pie
-            :customData="{
-              title: '报告状态',
-            }"
-            :legendData="{
-              icon: 'circle',
-            }"
-            :chartsData="chartsData3"
-            ref="pieRef3"
-          ></pie>
-        </div>
-      </div>
+
      <div class="container_table">
        <Table></Table>
      </div>
@@ -143,7 +157,7 @@
 import { ref, onMounted } from "vue";
 import { getStaticTreeData } from "@/api/plan/static";
 import pie from "@/components/echarts/pie/default.vue";
-import {useRouter} from 'vue-router'
+import { useRouter } from "vue-router";
 import tree from "../components/tree.vue";
 import Table from "../components/table.vue";
 const treeRef = ref();
@@ -156,7 +170,7 @@ const form: any = ref({
  deviceType: 0, //设备类型
  manufacturer: 0, //制造厂商
 });
-const router=useRouter()
+const router = useRouter();
 localStorage.setItem("color", "red");
 //功能选择数据
 const tabsList = [
@@ -306,28 +320,26 @@ const getPieData = () => {
    { value: Math.floor(Math.random() * 100) + 1, name: "合格" },
    { value: Math.floor(Math.random() * 100) + 1, name: "不合格" },
  ];
+  // pieRef2.value.init();
  chartsData3.value = [
    { value: Math.floor(Math.random() * 100) + 1, name: "已生成报告" },
    { value: Math.floor(Math.random() * 100) + 1, name: "未生成报告" },
  ];
+  // pieRef3.value.init();
  pieRef1.value.init();
-  pieRef2.value.init();
-  pieRef3.value.init();
 };
 const getTree = () => {
-  getStaticTreeData({ userName: 'zhangsan', planName: "111" }).then(
-    (res) => {
-      console.log(res, "99999999");
-      treeRef.value.getTreeData(res.data);
-    }
-  );
+  getStaticTreeData({ userName: "zhangsan", planName: "111" }).then((res) => {
+    console.log(res, "99999999");
+    treeRef.value.getTreeData(res.data);
+  });
 };
 //前往检测
-const handleDetection=()=>{
+const handleDetection = () => {
  router.push({
-    path:"/detection"
-  })
-}
+    path: "/detection",
+  });
+};
 onMounted(() => {
  console.log();
  getTree();
@@ -342,51 +354,55 @@ onMounted(() => {
  justify-content: space-between;
  background-color: #eee;
  .left_tree {
-    width: 200px;
+    width: auto;
    height: 100%;
    background-color: #fff;
  }
  .right_container {
    flex: 1;
-    // width: 100%;
+    width: 100%;
    padding: 0 10px 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
+    box-sizing: border-box;
    .container_title {
      width: 100%;
-      // min-height: 50px;
-      min-height: 100px;
+      // min-height: 60px;
+      height: auto !important;
      background: #fff;
-      // padding-left: 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 10px;
      border-radius: 4px;
+      padding: 10px;
+      box-sizing: border-box;
      .el-form {
        width: 100%;
        .el-form-item {
-          // flex:1;
-          // margin: 0 !important;
-          // margin:10px 10px 10px 0;
-          // display: flex;
          .el-button {
            margin: 0 10px;
          }
        }
      }
+      ::v-deep .el-form-item {
+        margin-bottom: 8px !important;
+      }
    }
    .container_charts {
      width: 100%;
-      height: 300px;
+      height: 350px;
      // border: 2px solid green;
+      background-color: #eee;
      display: flex;
      justify-content: space-between;
+      margin-bottom: 10px;
      .charts_info {
+        flex: none;
        width: 32.9%;
-        height: 100%;
+        height: 100% !important;
        // border: 2px solid pink;
        background-color: #fff;
        border-radius: 4px;
@@ -395,7 +411,6 @@ onMounted(() => {
    .container_table {
      width: 100%;
      height: 100%;
-      margin-top: 10px;
      border-radius: 4px;
    }
  }
--- a/frontend/src/views/home/tabs/model.vue
+++ b/frontend/src/views/home/tabs/model.vue
@@ -21,7 +21,7 @@
              size="small"
              type="primary"
              @click="handelOpen(item.isActive)"
-              >进入检测</el-button
+              :disabled="item.isActive==false">进入检测</el-button
            >
          </div>
        </div>
--- a/frontend/src/views/login/components/LoginForm.vue
+++ b/frontend/src/views/login/components/LoginForm.vue
@@ -6,7 +6,7 @@
    size="large"
  >
    <el-form-item prop="username">
-      <el-input v-model="loginForm.username" placeholder="用户名：admin / user">
+      <el-input v-model="loginForm.username" placeholder="用户名">
        <template #prefix>
          <el-icon class="el-input__icon">
            <user />
@@ -18,7 +18,7 @@
      <el-input
        v-model="loginForm.password"
        type="password"
-        placeholder="密码：123456"
+        placeholder="密码"
        show-password
        autocomplete="new-password"
      >
@@ -31,14 +31,6 @@
    </el-form-item>
  </el-form>
  <div class="login-btn">
-    <el-button
-      :icon="CircleClose"
-      round
-      size="large"
-      @click="resetForm(loginFormRef)"
-    >
-      重置
-    </el-button>
    <el-button
      :icon="UserFilled"
      round
@@ -49,6 +41,14 @@
    >
      登录
    </el-button>
+    <el-button
+      :icon="CircleClose"
+      round
+      size="large"
+      @click="resetForm(loginFormRef)"
+    >
+      重置
+    </el-button>
  </div>
 </template>

--- a/frontend/src/views/login/index.scss
+++ b/frontend/src/views/login/index.scss
@@ -1,7 +1,8 @@
 .login-container {
  height: 100%;
  min-height: 550px;
-  background-color: #eeeeee;
+  // background-color: #eeeeee;
+  background-color: #003078;
  background-image: url("@/assets/images/login_bg.svg");
  background-size: 100% 100%;
  background-size: cover;
@@ -14,7 +15,7 @@
    width: 96.5%;
    height: 94%;
    padding: 0 50px;
-    background-color: rgb(255 255 255 / 80%);
+    // background-color: rgb(255 255 255 / 80%);
    border-radius: 10px;
    .dark {
      position: absolute;
@@ -40,14 +41,15 @@
        align-items: center;
        justify-content: center;
        margin-bottom: 45px;
+        padding: 0 20px;
        .login-icon {
          width: 60px;
-          height: 52px;
+          height: auto;
        }
        .logo-text {
          padding: 0 0 0 25px;
          margin: 0;
-          font-size: 42px;
+          font-size: 32px;
          font-weight: bold;
          color: #34495e;
          white-space: nowrap;
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -1,14 +1,15 @@
 <template>
  <div class="login-container flx-center">
    <div class="login-box">
-      <SwitchDark class="dark" />
+      <!-- <SwitchDark class="dark" /> -->
      <div class="login-left">
        <img class="login-left-img" src="@/assets/images/login_left.png" alt="login" />
      </div>
      <div class="login-form">
        <div class="login-logo">
-          <img class="login-icon" src="@/assets/images/logo.svg" alt="" />
-          <h2 class="logo-text">Geeker-Admin</h2>
+          <!-- <img class="login-icon" src="@/assets/images/logo.svg" alt="" /> -->
+          <img class="login-icon" src="@/assets/images/cn_pms9100_logo.png" alt="" />
+          <h2 class="logo-text">{{ title }}</h2>
        </div>
        <LoginForm />
      </div>
@@ -19,6 +20,7 @@
 <script setup lang="ts" name="login">
 import LoginForm from "./components/LoginForm.vue";
 import SwitchDark from "@/components/SwitchDark/index.vue";
+const title = import.meta.env.VITE_GLOB_APP_TITLE;
 </script>

 <style scoped lang="scss">