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

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;
     }
   }