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

frontend/src/api/plan/static.ts

@@ -1,7 +1,7 @@
 import http from "@/api";
 export const getStaticTreeData = (data: any) => {
   return http.post<Static.planData>(
-    "http://127.0.0.1:4523/m1/2573730-0-default/plan/static/planData",
+    "http://192.168.1.123:4523/m1/2573730-0-default/plan/static/planData",
     data,
     { loading: false }
   ); // 正常 post json 请求  ==>  application/json

frontend/src/components/echarts/pie/default.vue

@@ -1,9 +1,16 @@
 <!-- 默认饼图 -->
 <template>
-  <div class="charts" ref="chartsRef"></div>
+  <div class="pie" ref="chartsRef"></div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, defineProps, defineExpose, watch } from "vue";
+import {
+  ref,
+  onMounted,
+  defineProps,
+  defineExpose,
+  watch,
+  onUnmounted,
+} from "vue";
 import * as echarts from "echarts";
 const chartsRef = ref();
 const props = defineProps({
@@ -26,7 +33,6 @@ const props = defineProps({
 const customData: any = ref({}),
   legendData: any = ref({});
 const init = () => {
-  console.log("init", props.customData);
   customData.value = {
     title: "", //标题
     textAlign: "left", //标题位置可选属性left 可选属性值 left,right,center
@@ -41,6 +47,7 @@ const init = () => {
     icon: "roundRect", // 图例项的icon,类型包括 circle(圆形),rect(正方形),//roundRect(圆角正方形),triangle(三角形),diamond(菱形),//pin(大头针行),arrow(箭头形),none(无图例项的icon)
     orient: "vertical", //图例排列方向
     left: "right", //可选属性left,right,top,bottom,可选属性值 left,right,top,bottom,px,百分比,数值,
+    itemGap: 0, // 设置图例项之间的间隔为20
     ...props.legendData,
   };
   var chart = chartsRef.value && echarts.init(chartsRef.value);
@@ -61,8 +68,10 @@ const init = () => {
         type: "pie",
         radius: customData.value.isRing ? ["45", "65"] : "65%",
         data: props.chartsData,
-        center: ["50%", "60%"], // 设置饼图的中心位置
+        center: ["55%", "50%"], // 设置饼图的中心位置
         // padAngle: 2,
+        minAngle: 15, //最小角度
+        startAngle: 270, //起始角度
         emphasis: {
           itemStyle: {
             shadowBlur: 10,
@@ -82,8 +91,27 @@ const init = () => {
     ],
   };
   option && chart.setOption(option);
+  setTimeout(() => {
+    chart.resize();
+  }, 0);
 };
-
+const resizeCharts = () => {
+  var chart = chartsRef.value && echarts.init(chartsRef.value);
+  if (chart) {
+    chart.resize();
+  }
+};
+window.addEventListener("resize", resizeCharts);
+onUnmounted(() => {
+  var chart = chartsRef.value && echarts.init(chartsRef.value);
+  if (chart) {
+    chart.resize();
+  }
+  window.removeEventListener("resize", resizeCharts);
+  if (chart) {
+    chart.dispose();
+  }
+});
 watch(
   () => props.chartsData,
   (val, oldVal) => {
@@ -101,9 +129,10 @@ onMounted(() => {
 defineExpose({ init });
 </script>
 <style lang="scss" scoped>
-.charts {
+.pie {
   width: 100%;
   height: 100%;
   padding: 10px;
+  box-sizing: border-box;
 }
 </style>

frontend/src/layouts/LayoutVertical/index.scss

@@ -1,6 +1,8 @@
 .el-container {
   width: 100%;
   height: 100%;
+  display: flex;
+  justify-content: space-between;
   :deep(.el-aside) {
     width: auto;
     background-color: var(--el-menu-bg-color);
@@ -14,7 +16,7 @@
         height: calc(100% - 55px);
         .el-menu {
           width: 100%;
-          overflow-x: hidden;
+          // overflow-x: hidden;
           border-right: none;
         }
       }

frontend/src/styles/element.scss

@@ -257,3 +257,7 @@
     }
   }
 }
+
+.el-form-item{
+  margin-right: 10px !important;
+}

frontend/src/views/home/components/tree.vue

@@ -4,14 +4,18 @@
       placeholder="请输入计划名称"
       v-model="searchForm.planName"
     ></el-input>
-    <el-tree
+    <div class="tree_container">
-      :data="data"
+      <el-tree
-      ref="treeRef"
+        :data="data"
-      :filter-node-method="filterNode"
+        ref="treeRef"
-      :props="defaultProps"
+        :filter-node-method="filterNode"
-      node-key="id"
+        :props="defaultProps"
-      @node-click="handleNodeClick"
+        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;
+  display: flex;
-  //   flex-direction: column;
+  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 {
+  .tree_container {
-    height: calc(100% - 70px);
+    flex: 1;
+    overflow-y: auto;
+    .el-tree {
+      height: 100%;
+    }
   }
 }
 </style>

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);
+  height: 100%;
-  // 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;
 }
 </style>

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(
+  getStaticTreeData({ userName: "zhangsan", planName: "111" }).then((res) => {
-    (res) => {
+    console.log(res, "99999999");
-      console.log(res, "99999999");
+    treeRef.value.getTreeData(res.data);
-      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: 60px;
-      min-height: 100px;
+      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;
     }
   }

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>

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>
 

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;

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="" />
+          <!-- <img class="login-icon" src="@/assets/images/logo.svg" alt="" /> -->
-          <h2 class="logo-text">Geeker-Admin</h2>
+          <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">