优化历史数据全屏样式

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

@@ -1,11 +1,21 @@
 <template>
 	<div class="system-edit-dic-container">
-		<el-dialog v-model="isShowDialog" :title="data.name + `(${data.key})`" width="850px">
+		<el-dialog v-model="isShowDialog" :title="data.name + `(${data.key})`" width="850px" :fullscreen="isFullscreen" destroy-on-close>
+			<template #header="{ close, titleId, titleClass }">
+				<div class="dialog-header">
+					<h4 :id="titleId" :class="titleClass">{{ data.name + `(${data.key})` }}</h4>
+					<div class="dialog-header-actions">
+						<el-button type="text" @click="toggleFullscreen" class="fullscreen-btn">
+							<i class="iconfont" :class="!isFullscreen ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
+						</el-button>
+					</div>
+				</div>
+			</template>
 			<!-- 添加 tab 切换 -->
 			<el-tabs v-model="activeTab">
 				<el-tab-pane label="趋势图" name="trend">
 					<!-- 这里是 echarts 线图 -->
-					<div id="lineChart" ref="chartRef" class="chart-container"></div>
+					<div id="lineChart" ref="chartRef" class="chart-container" :class="{ 'chart-container-big': isFullscreen }"></div>
 				</el-tab-pane>
 				<el-tab-pane label="历史数据" name="history">
 					<!-- 历史日志数据表格 -->
@@ -32,7 +42,7 @@
 								><el-icon><Download /></el-icon>导出</el-button
 							>
 						</div>
-						<el-table :data="historyData" border style="width: 100%" v-loading="historyLoading" max-height="calc(90vh - 300px)">
+						<el-table :data="historyData" border style="width: 100%" v-loading="historyLoading" :max-height="isFullscreen ? 'calc(100vh - 250px)' : '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">
@@ -62,7 +72,7 @@ import { ref, reactive, watch, nextTick } from 'vue'
 import api from '/@/api/device'
 import * as echarts from 'echarts'
 import dayjs from 'dayjs'
-import { Download } from '@element-plus/icons-vue'
+import { Download, FullScreen } from '@element-plus/icons-vue'
 
 const data = ref({ name: '', key: '', unit: '' })
 const historyDateRangeType = ref('1')
@@ -349,6 +359,18 @@ watch(
 	}
 )
 
+const isFullscreen = ref(false)
+
+// 切换全屏状态
+const toggleFullscreen = () => {
+	isFullscreen.value = !isFullscreen.value
+	nextTick(() => {
+		if (chartInstance) {
+			chartInstance.resize()
+		}
+	})
+}
+
 // 打开弹窗
 const openDialog = (row: any, deviceKey: string, productKey: string) => {
 	params.productKey = productKey
@@ -375,10 +397,13 @@ const openDialog = (row: any, deviceKey: string, productKey: string) => {
 
 defineExpose({ openDialog })
 </script>
-<style scoped>
+<style scoped lang="scss">
 .chart-container {
 	width: 100%;
-	height: 400px;
+	height: calc(90vh - 350px);
+	&-big {
+		height: calc(100vh - 180px);
+	}
 }
 
 .history-container {
@@ -397,4 +422,26 @@ defineExpose({ openDialog })
 	display: flex;
 	justify-content: flex-end;
 }
+
+.dialog-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+}
+
+.dialog-header-actions {
+	display: flex;
+	align-items: center;
+	margin-top: -4px;
+	margin-right: 12px;
+	.iconfont {
+		font-size: 18px !important;
+	}
+}
+
+.fullscreen-btn,
+.close-btn {
+	margin-left: 8px;
+}
 </style>