|
@@ -127,10 +127,10 @@ const topicName = ref([])
|
|
const loading = ref(false)
|
|
const loading = ref(false)
|
|
const topic = ref('')
|
|
const topic = ref('')
|
|
|
|
|
|
-const handleDateChange = (val) => {
|
|
|
|
|
|
+const handleDateChange = async (val) => {
|
|
if (val && val.length === 2) {
|
|
if (val && val.length === 2) {
|
|
-
|
|
|
|
- renderChart(getChart(val))
|
|
|
|
|
|
+ await getChart(val)
|
|
|
|
+ await renderChart()
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -140,10 +140,11 @@ const dateRange = ref([
|
|
defaultStart.format('YYYY-MM-DD HH:mm:ss'),
|
|
defaultStart.format('YYYY-MM-DD HH:mm:ss'),
|
|
defaultEnd.format('YYYY-MM-DD HH:mm:ss')
|
|
defaultEnd.format('YYYY-MM-DD HH:mm:ss')
|
|
])
|
|
])
|
|
-const labelSelect = (row) =>{
|
|
|
|
|
|
+const labelSelect =async (row) =>{
|
|
topic.value = row.identifier
|
|
topic.value = row.identifier
|
|
topicName.value = row.modelName
|
|
topicName.value = row.modelName
|
|
- renderChart(getChart(dateRange.value))
|
|
|
|
|
|
+ await getChart(dateRange.value)
|
|
|
|
+ await renderChart()
|
|
}
|
|
}
|
|
|
|
|
|
const chartContainer = ref(null)
|
|
const chartContainer = ref(null)
|
|
@@ -155,13 +156,13 @@ const formatTime = timestamp => {
|
|
.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit',second:'2-digit' })
|
|
.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit',second:'2-digit' })
|
|
.slice(0, 5)
|
|
.slice(0, 5)
|
|
}
|
|
}
|
|
|
|
+const result = ref([])
|
|
const getChart = async (range) =>{
|
|
const getChart = async (range) =>{
|
|
|
|
|
|
- const result = await IotStatApi.getDeviceInfoChart(params.code, topic.value, range[0], range[1])
|
|
|
|
- return result
|
|
|
|
|
|
+ result.value = await IotStatApi.getDeviceInfoChart(params.code, topic.value, range[0], range[1])
|
|
}
|
|
}
|
|
// 初始化图表
|
|
// 初始化图表
|
|
-const renderChart = async (result) => {
|
|
|
|
|
|
+const renderChart = async () => {
|
|
if (!chartContainer.value) return
|
|
if (!chartContainer.value) return
|
|
|
|
|
|
// 销毁旧实例
|
|
// 销毁旧实例
|
|
@@ -177,8 +178,9 @@ const renderChart = async (result) => {
|
|
xAxis: {
|
|
xAxis: {
|
|
type: 'category',
|
|
type: 'category',
|
|
// data: result.map(d => formatTime(d.timestamp)),
|
|
// data: result.map(d => formatTime(d.timestamp)),
|
|
- data: result.map(item => Object.keys(item)[0]),
|
|
|
|
- axisLabel: { rotate: 45 } // X轴标签旋转防止重叠
|
|
|
|
|
|
+ data: result.value.map(item => Object.keys(item)[0]),
|
|
|
|
+ axisLabel: { rotate: 45 }, // X轴标签旋转防止重叠
|
|
|
|
+ inverse: true,
|
|
},
|
|
},
|
|
yAxis: { type: 'value' },
|
|
yAxis: { type: 'value' },
|
|
dataZoom: [{
|
|
dataZoom: [{
|
|
@@ -189,7 +191,7 @@ const renderChart = async (result) => {
|
|
}],
|
|
}],
|
|
series: [{
|
|
series: [{
|
|
// data: result.map(d => d.value),
|
|
// data: result.map(d => d.value),
|
|
- data: result.map(item => {
|
|
|
|
|
|
+ data: result.value.map(item => {
|
|
const key = Object.keys(item)[0]; // 获取当前元素的key
|
|
const key = Object.keys(item)[0]; // 获取当前元素的key
|
|
return item[key][0][topic.value]; // 提取value数组中第一个对象的属性
|
|
return item[key][0][topic.value]; // 提取value数组中第一个对象的属性
|
|
}),
|
|
}),
|
|
@@ -220,8 +222,8 @@ onMounted(async () => {
|
|
topic.value = specs.value[0].identifier
|
|
topic.value = specs.value[0].identifier
|
|
topicName.value = specs.value[0].modelName
|
|
topicName.value = specs.value[0].modelName
|
|
})
|
|
})
|
|
- debugger
|
|
|
|
- await renderChart(getChart(dateRange.value))
|
|
|
|
|
|
+ await getChart(dateRange.value)
|
|
|
|
+ await renderChart()
|
|
|
|
|
|
|
|
|
|
})
|
|
})
|