pest_admin/src/views/soil/monitor/index.vue

<!--
 * @Author: chris
 * @Date: 2025-09-05 09:29:59
 * @LastEditors: chris
 * @LastEditTime: 2025-09-12 14:20:17
-->
<script setup>
import LiveData from './components/LiveData.vue'
import SoilChart from './components/SoilChart.vue';
import { useSettings } from '@/hooks/useSettings';
import { getFormattedSoilData } from './mock';

const { hasTags } = useSettings()

const liveData = ref({})
const chartData = ref({ dates: [], values: []})
const soilType = ref('temperature')
const selectedTimeRange = ref(7)
const chartLoading = ref(false) 

getChartData()

function getChartData() {
  chartLoading.value = true
  setTimeout(() => {
    console.log(getFormattedSoilData(soilType.value, selectedTimeRange.value))
    chartData.value = getFormattedSoilData(soilType.value, selectedTimeRange.value)
    chartLoading.value = false
  }, 300)
  return chartData.value
}

function handleSelectionChange(selection) {
  console.log(selection)
}

function handleSelectSoilItem(item) {
  soilType.value = item.type
  getChartData()
}

function handleTimeRangeChange(range) {
  selectedTimeRange.value = range
  getChartData()
}
</script>

<template>
  <div :class="['soil-monitor-page', 'page-height', { 'hasTagsView': hasTags }]">
    <el-row :gutter="20">
      <el-col class="real-time-data" :span="6">
        <live-data :data="liveData" @select="handleSelectSoilItem"/>
      </el-col>
      <el-col class="history-data" :span="18">
        <soil-chart :soil-type="soilType" :chart-data="chartData" :selected-time-range="selectedTimeRange" :loading="chartLoading" @time-range-change="handleTimeRangeChange" /> 
        <!-- <search-form v-model:params="queryParams" class="mb-12px" />
        <history-table :dataList="historyList" :columns="columnsConfig" @selection-change="handleSelectionChange" /> -->
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.soil-monitor-page {
  @apply p-20px;

  > .el-row {
    @apply h-full;
  }
}
</style>