提交代码

src/views/home/components/index.vue

@@ -19,12 +19,20 @@
         </div>
         <div class="search-form">
             <div class="form-type">
-                <el-select v-model="typeId" @change="groupListChange">
+                <el-select v-model="searchForm.sensorId" @change="groupListChange">
                     <el-option v-for="item in groupList" :key="item.sensorId" :label="item.sensorName" :value="item.sensorId" />
                 </el-select>
             </div>
             <div class="form-date">
-                <el-date-picker v-model="dateTime" type="daterange" range-separator="To" start-placeholder="开始日期" end-placeholder="结束日期" />
+                <el-date-picker
+                    v-model="dateTime"
+                    type="daterange"
+                    range-separator="To"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    value-format="YYYY-MM-DD"
+                    @change="dateTimeChange"
+                />
             </div>
         </div>
     </div>
@@ -84,11 +92,16 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import baseEcharts from './echarts.vue'
-import { useAppStore } from '~src/store'
 import { getArrValue } from 'js-fast-way'
 import mainApi from '~api/data'
 
-const useApp = useAppStore()
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'
+dayjs.locale('zh-cn')
+
+//获取初始日期
+const toDay = dayjs().format('YYYY-MM-DD')
+const sevenDay = dayjs().subtract(7, 'day').format('YYYY-MM-DD')
 
 //选项卡
 const tab_key = ref('1')
@@ -104,35 +117,50 @@ onMounted(() => {
 //获取分组列表
 const groupList = ref([])
 const getGroupList = async () => {
+    groupList.value = []
     const { data } = await mainApi.getGroupList({
         type: tab_key.value,
     })
     const res = getArrValue(data)
     groupList.value = res
     if (res.length > 0) {
-        typeId.value = res[0].sensorId
+        searchForm.value.sensorId = res[0].sensorId
+        getTableData().then()
     }
 }
 
 //分组切换
-const typeId = ref(null)
 const groupListChange = () => {
+    getTableData()
+}
 
+//日期时间范围
+const dateTime = ref([sevenDay, toDay])
+const dateTimeChange = (val) => {
+    if (val && val.length > 0) {
+        searchForm.value.startTime = val[0] + ' 00:00:00'
+        searchForm.value.endTime = val[1] + ' 23:59:59'
+    }
+    getTableData()
 }
 
+//搜索数据
+const searchForm = ref({
+    sensorId: null,
+    startTime: sevenDay + ' 00:00:00',
+    endTime: toDay + ' 23:59:59',
+})
+
+//表格或图表数据
+const tableData = []
+const getTableData = async () => {
+    tableData.value = []
+    const { data } = await mainApi.getSensorsList(searchForm.value)
+    tableData.value = getArrValue(data)
+}
 
 //类型
-const dateTime = ref(null)
 const change_type = ref('echarts')
-const tableData = [
-    { key1: '2016-05-03', key2: 'Grove St, Los Angeles', key3: 'No. 189', key4: '189', key5: '--' },
-    { key1: '2016-05-03', key2: 'Grove St, Los Angeles', key3: 'No. 189', key4: '189', key5: '--' },
-    { key1: '2016-05-03', key2: 'Grove St, Los Angeles', key3: 'No. 189', key4: '189', key5: '--' },
-    { key1: '2016-05-03', key2: 'Grove St, Los Angeles', key3: 'No. 189', key4: '189', key5: '--' },
-    { key1: '2016-05-03', key2: 'Grove St, Los Angeles', key3: 'No. 189', key4: '189', key5: '--' },
-    { key1: '2016-05-03', key2: 'Grove St, Los Angeles', key3: 'No. 189', key4: '189', key5: '--' },
-    { key1: '2016-05-03', key2: 'Grove St, Los Angeles', key3: 'No. 189', key4: '189', key5: '--' },
-]
 </script>
 
 <style lang="scss">