首页

src/views/index.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="app-container home">
     <!--    <h2>安心E查工作台</h2>-->
-    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
-      <el-tab-pane label="今日" name="today"></el-tab-pane>
-      <el-tab-pane label="本周" name="week"></el-tab-pane>
-      <el-tab-pane label="本月" name="month"></el-tab-pane>
-      <el-tab-pane label="自定义" name="customize">
+    <div class="tabs-container">
+      <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
+        <el-tab-pane label="今日" name="today"></el-tab-pane>
+        <el-tab-pane label="本周" name="week"></el-tab-pane>
+        <el-tab-pane label="本月" name="month"></el-tab-pane>
+        <el-tab-pane label="自定义" name="customize"></el-tab-pane>
+      </el-tabs>
+      <div v-if="activeName === 'customize'" class="date-picker-container">
         <el-date-picker
           v-model="dataRange"
           type="datetimerange"
@@ -16,8 +19,8 @@
           date-format="YYYY/MM/DD"
           time-format="hh:mm:ss"
         />
-      </el-tab-pane>
-    </el-tabs>
+      </div>
+    </div>
     <div class="card-box">
       <div v-for="(item, index) in statisticalData" :key="index" class="card-item">
         <i :class="item.icon" />
@@ -347,6 +350,13 @@ const option2 = ref({
 let loading = ref(false);
 const statisticalData = ref([]);
 const userDataList = ref([]);
+const queryParams = reactive({
+  keywords: '',
+  nickname: '',
+  service_type: '',
+  page: 1,
+  page_size: 10
+});
 
 const formatDate = (date) => {
   const targetDate = date ? new Date(date) : new Date();
@@ -361,30 +371,32 @@ const getThisWeekRange = () => {
   sunday.setDate(today.getDate() - today.getDay());
   const saturday = new Date(sunday);
   saturday.setDate(sunday.getDate() + 6);
-  return {
-    start: formatDate(sunday),
-    end: formatDate(saturday)
-  };
+  return [formatDate(sunday) + ' 00:00:00', formatDate(saturday) + ' 23:59:59'];
 };
 const getMonthRange = () => {
   const now = new Date();
   const start = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
   const end = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999);
-  return { start: formatDate(start), end: formatDate(end) };
+  return [formatDate(start) + ' 00:00:00', formatDate(end) + ' 23:59:59'];
 };
 
 const getData = () => {
+  debugger
   let query = ref('');
   if (activeName.value === 'today') {
-    query.value = formatDate();
+    query.value = addDateRange2(queryParams, [formatDate() + ' 00:00:00', formatDate() + ' 23:59:59'], 'startTime', 'endTime');
   } else if (activeName.value === 'week') {
-    query.value = getThisWeekRange();
+    query.value = addDateRange2(queryParams, getThisWeekRange(), 'startTime', 'endTime');
   } else if (activeName.value === 'month') {
-    query.value = getMonthRange();
+    query.value = addDateRange2(queryParams, getMonthRange(), 'startTime', 'endTime');
+  } else {
+    query.value = addDateRange2(queryParams, dataRange.value, 'startTime', 'endTime');
+  }
+  if (activeName1.value === 'house') {
+    query.value.service_type = 0;
+  } else {
+    query.value.service_type = 1;
   }
-  // else {
-  //   query.value = addDateRange2(queryParams, dataRange.value, 'startTime', 'endTime');
-  // }
   xData.value = ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'];
   yData1.value = [5, 8, 3, 10, 35, 42, 50, 48, 60, 55, 40, 20, 8];
   yData2.value = [20, 25, 15, 8, 5, 10, 15, 20, 30, 45, 60, 55, 30];
@@ -416,7 +428,7 @@ const getData = () => {
   ];
 };
 watch(
-  [activeName, activeName1],
+  [activeName, activeName1, dataRange],
   () => {
     getData();
   },
@@ -708,4 +720,49 @@ watch(
     }
   }
 }
+//.tabs-container {
+//  position: relative;
+//  display: flex;
+//  align-items: center;
+//  gap: 20px;
+//
+//  .demo-tabs {
+//    flex: 1;
+//    min-width: 300px;
+//  }
+//
+//  .date-picker-container {
+//    width: 350px;
+//    min-width: 300px;
+//    flex-shrink: 1;
+//    margin-left: -1000px;
+//    margin-top: -15px;
+//
+//    :deep(.el-date-editor) {
+//      width: 100%;
+//      min-width: 360px;
+//    }
+//  }
+//}
+.tabs-container {
+  position: relative;
+  display: flex;
+
+  .demo-tabs {
+    flex: 1;
+  }
+
+  .date-picker-container {
+    position: absolute;
+    left: 21%;
+    right: 0;
+    top: 0;
+    z-index: 1;
+    padding: 2px 0;
+
+    :deep(.el-date-editor) {
+      width: 360px;
+    }
+  }
+}
 </style>