检测首页、主页、数据展示界面样式修改

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

@@ -15,7 +15,7 @@
           "
           v-for="(item, index) in tabsList"
           :key="index"
-          @click="handleCheckFunction(index)"
+          @click="handleCheckFunction(item.value)"
         >
           <div class="item_img">
             <img :src="item.img" alt="" />
@@ -26,8 +26,8 @@
         </div>
       </div>
 
-        <el-collapse v-model="activeNames" @change="handleChange">
-          <el-collapse-item title="检测进度展示" name="1">
+        <!-- <el-collapse v-model="activeNames" @change="handleChange">
+          <el-collapse-item title="检测进度展示" name="1"> -->
 
         <!-- 饼图 -->
         <div class="container_charts">
@@ -80,8 +80,8 @@
           </div>
         </div>
 
-          </el-collapse-item>
-        </el-collapse>
+          <!-- </el-collapse-item>
+        </el-collapse> -->
 
   <el-tabs type="border-card" @tab-change="handleTabsChange" v-model="editableTabsValue">
     <el-tab-pane :label="tabLabel1"> 
@@ -138,21 +138,15 @@ localStorage.setItem("color", "red");
 //功能选择数据
 const tabsList = ref([
   {
-    label: "自动检测",
+    label: "设备检测",
     value: 0,
     img: "/src/assets/images/plan/static/1.svg",
     checked: true,
   },
-  {
-    label: "手动检测",
-    value: 1,
-    img: "/src/assets/images/plan/static/2.svg",
-    checked: false,
-  },
   {
     label: "设备复检",
     value: 2,
-    img: "/src/assets/images/plan/static/6.svg",
+    img: "/src/assets/images/plan/static/2.svg",
     checked: false,
   },
   {
@@ -167,14 +161,45 @@ const tabsList = ref([
     img: "/src/assets/images/plan/static/4.svg",
     checked: false,
   },
-  {
-    label: "设备浏览",
-    value: 5,
-    img: "/src/assets/images/plan/static/5.svg",
-    checked: false,
-  },
 ]);
-
+// const tabsList = ref([
+//   {
+//     label: "自动检测",
+//     value: 0,
+//     img: "/src/assets/images/plan/static/1.svg",
+//     checked: true,
+//   },
+//   {
+//     label: "手动检测",
+//     value: 1,
+//     img: "/src/assets/images/plan/static/2.svg",
+//     checked: false,
+//   },
+//   {
+//     label: "设备复检",
+//     value: 2,
+//     img: "/src/assets/images/plan/static/6.svg",
+//     checked: false,
+//   },
+//   {
+//     label: "报告生成",
+//     value: 3,
+//     img: "/src/assets/images/plan/static/3.svg",
+//     checked: false,
+//   },
+//   {
+//     label: "设备归档",
+//     value: 4,
+//     img: "/src/assets/images/plan/static/4.svg",
+//     checked: false,
+//   },
+//   {
+//     label: "设备浏览",
+//     value: 5,
+//     img: "/src/assets/images/plan/static/5.svg",
+//     checked: false,
+//   },
+// ]);
 form.value.activeTabs = tabsList.value[0].value;
 const tableRef1 = ref();
 const tableRef2 = ref();
@@ -213,8 +238,6 @@ const chartsData1: any = ref([]),
   chartsData2: any = ref([]),
   chartsData3: any = ref([]);
 const getPieData = () => {
-
-  
   chartsData1.value = [
     { value: Math.floor(Math.random() * 100) + 1, name: "未检测" },
     { value: Math.floor(Math.random() * 100) + 1, name: "检测中" },
@@ -259,7 +282,7 @@ const handleCheckFunction = (val: any) => {
   console.log("test",val);
   editableTabsValue.value = '0';
   tabsList.value.map((item: any, index: any) => {
-    if (val == index) {
+    if (val == item.value) {
       item.checked = true;
     } else {
       item.checked = false;
@@ -338,11 +361,11 @@ onMounted(() => {
       .function_item {
         flex: none;
         width: 6%;
-        height: 70px;
+        height: 50px;
         display: flex;
         justify-content: space-between;
         align-items: center;
-        flex-direction: column;
+        flex-direction: row;
         cursor: pointer;
         background-color: #607eab;
         border-radius: 8px;
@@ -356,7 +379,7 @@ onMounted(() => {
           display: flex;
           align-items: center;
           justify-content: center;
-
+          margin-right: 5px;
           img {
             width: 40px;
             height: auto;
@@ -422,8 +445,8 @@ onMounted(() => {
 
     .container_charts {
       width: 100%;
-      // min-height: 200px !important;
-      height:100%;
+      min-height: 180px !important;
+      // height:100%;
       background-color: #eee;
       display: flex;
       justify-content: space-between;
@@ -446,7 +469,7 @@ onMounted(() => {
     .container_table {
       // width: 100%;
       flex: 1 !important;
-      height: calc(100vh - 360px - 100px);
+      height: calc(100vh - 360px - 155px);
       border-radius: 4px;
       width: 100% !important;
       // display: none;