|
|
@@ -74,7 +74,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { ref, reactive, watch, nextTick } from 'vue'
|
|
|
+import { ref, reactive, watch, nextTick, onBeforeUnmount, onMounted } from 'vue'
|
|
|
import api from '/@/api/device'
|
|
|
import * as echarts from 'echarts'
|
|
|
import dayjs from 'dayjs'
|
|
|
@@ -85,10 +85,13 @@ const data = ref({ name: '', key: '', unit: '' })
|
|
|
const historyDateRangeType = ref('1')
|
|
|
const loading = ref(false)
|
|
|
const isShowDialog = ref(false)
|
|
|
-const chartRef = ref<HTMLElement | null>(null)
|
|
|
+const chartRef = ref()
|
|
|
let chartInstance: echarts.ECharts | null = null
|
|
|
const lineData = ref([])
|
|
|
|
|
|
+// 定时器引用
|
|
|
+let updateTimer: number | null = null
|
|
|
+
|
|
|
const disabledDate = (time: Date) => {
|
|
|
return time.getTime() > Date.now()
|
|
|
}
|
|
|
@@ -133,11 +136,11 @@ const initChart = () => {
|
|
|
// 创建图表实例
|
|
|
chartInstance = echarts.init(chartRef.value)
|
|
|
// 设置加载状态
|
|
|
- if (loading.value) {
|
|
|
- chartInstance.showLoading()
|
|
|
- } else {
|
|
|
- chartInstance.hideLoading()
|
|
|
- }
|
|
|
+ // if (loading.value) {
|
|
|
+ // chartInstance.showLoading()
|
|
|
+ // } else {
|
|
|
+ // chartInstance.hideLoading()
|
|
|
+ // }
|
|
|
// 更新图表
|
|
|
updateChart()
|
|
|
}
|
|
|
@@ -226,6 +229,23 @@ const updateChart = () => {
|
|
|
chartInstance.setOption(option)
|
|
|
}
|
|
|
|
|
|
+// 获取图表数据
|
|
|
+const fetchChartData = () => {
|
|
|
+ if (!params.deviceKey || !params.properties) return
|
|
|
+
|
|
|
+ loading.value = true
|
|
|
+ api.instance
|
|
|
+ .getLogDetail({
|
|
|
+ deviceKey: params.deviceKey,
|
|
|
+ propertyKey: params.properties,
|
|
|
+ pageSize: 100,
|
|
|
+ })
|
|
|
+ .then((res: any) => {
|
|
|
+ lineData.value = res.List
|
|
|
+ })
|
|
|
+ .finally(() => (loading.value = false))
|
|
|
+}
|
|
|
+
|
|
|
// 获取历史数据
|
|
|
const fetchHistoryData = () => {
|
|
|
if (!params.deviceKey || !params.properties) return
|
|
|
@@ -282,18 +302,18 @@ watch(
|
|
|
)
|
|
|
|
|
|
// 监听 loading 状态变化
|
|
|
-watch(
|
|
|
- () => loading.value,
|
|
|
- (newVal) => {
|
|
|
- if (chartInstance) {
|
|
|
- if (newVal) {
|
|
|
- chartInstance.showLoading()
|
|
|
- } else {
|
|
|
- chartInstance.hideLoading()
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-)
|
|
|
+// watch(
|
|
|
+// () => loading.value,
|
|
|
+// (newVal) => {
|
|
|
+// if (chartInstance) {
|
|
|
+// if (newVal) {
|
|
|
+// chartInstance.showLoading()
|
|
|
+// } else {
|
|
|
+// chartInstance.hideLoading()
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// )
|
|
|
|
|
|
// 监听弹窗显示状态
|
|
|
watch(
|
|
|
@@ -307,8 +327,14 @@ watch(
|
|
|
// 如果是历史日志标签页，加载历史数据
|
|
|
if (activeTab.value === 'history') {
|
|
|
fetchHistoryData()
|
|
|
+ } else if (activeTab.value === 'trend') {
|
|
|
+ // 如果是趋势图标签页，启动自动更新
|
|
|
+ startAutoUpdate()
|
|
|
}
|
|
|
})
|
|
|
+ } else {
|
|
|
+ // 关闭弹窗时停止自动更新
|
|
|
+ stopAutoUpdate()
|
|
|
}
|
|
|
}
|
|
|
)
|
|
|
@@ -318,10 +344,14 @@ watch(
|
|
|
() => activeTab.value,
|
|
|
(val) => {
|
|
|
if (val === 'history' && isShowDialog.value) {
|
|
|
+ // 切换到历史数据标签页时停止自动更新
|
|
|
+ stopAutoUpdate()
|
|
|
fetchHistoryData()
|
|
|
} else if (val === 'trend' && isShowDialog.value) {
|
|
|
nextTick(() => {
|
|
|
initChart()
|
|
|
+ // 切换到趋势图标签页时启动自动更新
|
|
|
+ startAutoUpdate()
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
@@ -339,6 +369,30 @@ const toggleFullscreen = () => {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+// 启动定时更新
|
|
|
+const startAutoUpdate = () => {
|
|
|
+ // 先清除可能存在的定时器
|
|
|
+ stopAutoUpdate()
|
|
|
+
|
|
|
+ // 创建新的定时器，每10秒更新一次数据
|
|
|
+ updateTimer = window.setInterval(() => {
|
|
|
+ fetchChartData()
|
|
|
+ }, 10000) // 10秒 = 10000毫秒
|
|
|
+}
|
|
|
+
|
|
|
+// 停止定时更新
|
|
|
+const stopAutoUpdate = () => {
|
|
|
+ if (updateTimer !== null) {
|
|
|
+ window.clearInterval(updateTimer)
|
|
|
+ updateTimer = null
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 组件卸载前清除定时器
|
|
|
+onBeforeUnmount(() => {
|
|
|
+ stopAutoUpdate()
|
|
|
+})
|
|
|
+
|
|
|
// 打开弹窗
|
|
|
const openDialog = (row: any, deviceKey: string) => {
|
|
|
params.deviceKey = deviceKey
|
|
|
@@ -349,17 +403,14 @@ const openDialog = (row: any, deviceKey: string) => {
|
|
|
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
|
|
|
- api.instance
|
|
|
- .getLogDetail({
|
|
|
- deviceKey: deviceKey,
|
|
|
- propertyKey: row.key,
|
|
|
- pageSize: 100,
|
|
|
- })
|
|
|
- .then((res: any) => {
|
|
|
- lineData.value = res.List
|
|
|
- })
|
|
|
- .finally(() => (loading.value = false))
|
|
|
+
|
|
|
+ // 获取初始数据
|
|
|
+ fetchChartData()
|
|
|
+
|
|
|
+ // 如果是趋势图标签页，启动自动更新
|
|
|
+ if (activeTab.value === 'trend') {
|
|
|
+ startAutoUpdate()
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
defineExpose({ openDialog })
|
