对接历史数据的导出和查询条件切换等

src/views/iot/device/instance/component/chart.vue

@@ -11,19 +11,28 @@
 					<!-- 历史日志数据表格 -->
 					<div class="history-container">
 						<div class="date-picker-container">
+							<el-radio-group v-model="historyDateRangeType" @change="chengDateRangeType">
+								<el-radio-button label="1">最近半小时</el-radio-button>
+								<el-radio-button label="2">最近1小时</el-radio-button>
+								<el-radio-button label="3">最近12小时</el-radio-button>
+							</el-radio-group>
 							<el-date-picker
-								v-model="historyDateRange"
+								v-model="params.dateRange"
+								:disabled-date="disabledDate"
 								type="datetimerange"
 								range-separator="至"
 								start-placeholder="开始日期"
 								end-placeholder="结束日期"
 								format="YYYY-MM-DD HH:mm:ss"
 								value-format="YYYY-MM-DD HH:mm:ss"
-								@change="fetchHistoryData"
+								@change="dateRangeChange()"
+								style="width: 220px"
 							/>
-							<el-button type="primary" @click="exportData">导出</el-button>
+							<el-button type="primary" @click="exportData"
+								><el-icon><Download /></el-icon>导出</el-button
+							>
 						</div>
-						<el-table :data="historyData" border style="width: 100%" v-loading="historyLoading">
+						<el-table :data="historyData" border style="width: 100%" v-loading="historyLoading" max-height="calc(90vh - 300px)">
 							<el-table-column prop="ts" label="时间" align="center" />
 							<el-table-column prop="value" label="属性值" align="center" />
 							<el-table-column prop="unit" label="数据单位" align="center">
@@ -53,20 +62,24 @@ import { ref, reactive, watch, nextTick } from 'vue'
 import api from '/@/api/device'
 import * as echarts from 'echarts'
 import dayjs from 'dayjs'
-import { ElMessage } from 'element-plus'
+import { Download } from '@element-plus/icons-vue'
 
 const data = ref({ name: '', key: '', unit: '' })
+const historyDateRangeType = ref('1')
 const loading = ref(false)
 const isShowDialog = ref(false)
 const chartRef = ref<HTMLElement | null>(null)
 let chartInstance: echarts.ECharts | null = null
 const lineData = ref([])
 
+const disabledDate = (time: Date) => {
+	return time.getTime() > Date.now()
+}
+
 // 新增 Tab 相关状态
 const activeTab = ref('trend')
 const historyData = ref([])
 const historyLoading = ref(false)
-const historyDateRange = ref([dayjs().subtract(1, 'hour').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')])
 const currentPage = ref(1)
 const pageSize = ref(10)
 const totalItems = ref(0)
@@ -75,9 +88,25 @@ const params = reactive({
 	productKey: '',
 	deviceKey: '',
 	properties: '',
-	dateRange: [dayjs().subtract(1, 'hour').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')],
+	dateRange: [dayjs().subtract(30, 'minute').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')],
 })
 
+function chengDateRangeType(type: string) {
+	if (type === '1') {
+		params.dateRange = [dayjs().subtract(30, 'minute').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+	} else if (type === '2') {
+		params.dateRange = [dayjs().subtract(1, 'hour').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+	} else if (type === '3') {
+		params.dateRange = [dayjs().subtract(12, 'hour').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+	}
+	fetchHistoryData()
+}
+
+function dateRangeChange() {
+	historyDateRangeType.value = ''
+	fetchHistoryData()
+}
+
 // 初始化图表
 const initChart = () => {
 	if (chartRef.value) {
@@ -191,7 +220,7 @@ const fetchHistoryData = () => {
 		productKey: params.productKey,
 		deviceKey: params.deviceKey,
 		propertyKey: params.properties,
-		dateRange: historyDateRange.value,
+		dateRange: params.dateRange,
 		pageNum: currentPage.value,
 		pageSize: pageSize.value,
 	}
@@ -227,7 +256,7 @@ const exportData = () => {
 		productKey: params.productKey,
 		deviceKey: params.deviceKey,
 		propertyKey: params.properties,
-		dateRange: historyDateRange.value,
+		dateRange: params.dateRange,
 		pageNum: currentPage.value,
 		pageSize: pageSize.value,
 	}
@@ -327,7 +356,8 @@ const openDialog = (row: any, deviceKey: string, productKey: string) => {
 	params.properties = row.key
 
 	// 重置日期范围
-	historyDateRange.value = [dayjs().subtract(1, 'hour').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+	historyDateRangeType.value = '1'
+	params.dateRange = [dayjs().subtract(30, 'minute').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
 	data.value = row
 	isShowDialog.value = true
 	loading.value = true
@@ -359,6 +389,7 @@ defineExpose({ openDialog })
 	display: flex;
 	justify-content: space-between;
 	margin-bottom: 15px;
+	gap: 15px;
 }
 
 .pagination-container {