5 changed files with 392 additions and 45 deletions
@ -0,0 +1,316 @@ |
|||
<template> |
|||
<el-drawer |
|||
v-model="drawer" |
|||
:direction="'btt'" |
|||
:before-close="handleClose" |
|||
:destroy-on-close="true" |
|||
resizable |
|||
size="550px" |
|||
> |
|||
<template #header> |
|||
<h4 |
|||
>{{ currentMarker?.name }}手持表 |
|||
<span class="gasChemical">{{ currentMarker?.gasChemical }}检测</span></h4 |
|||
> |
|||
</template> |
|||
<template #default> |
|||
<!-- <div> 数据统计截止：{{ currentMarker?.timeStr }} </div> --> |
|||
<div> |
|||
<div class="flex items-center justify-between"> |
|||
<div class="chart-title"> {{ currentMarker?.gasChemical }}浓度与电量趋势 </div> |
|||
<div> |
|||
<el-date-picker |
|||
v-model="gasDateTimeRange" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
type="datetimerange" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" |
|||
@change="handleDateChange" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div v-if="drawer && !loading"> |
|||
<Echart :options="gasLineOptions" :height="400" /> |
|||
</div> |
|||
</div> |
|||
<!-- <div> |
|||
<div class="flex items-center justify-between"> |
|||
<div> 电量趋势 </div> |
|||
<div> |
|||
<el-date-picker |
|||
v-model="gasDateTimeRange" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
type="daterange" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" |
|||
class="!w-240px" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div v-if="drawer && !loading"> |
|||
<Echart :options="batteryLineOptions" :height="300" /> |
|||
</div> |
|||
</div> --> |
|||
</template> |
|||
<!-- <template #footer> |
|||
<div style="flex: auto"> |
|||
<el-button @click="cancelClick">cancel</el-button> |
|||
<el-button type="primary" @click="confirmClick">confirm</el-button> |
|||
</div> |
|||
</template> --> |
|||
</el-drawer> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref, computed } from 'vue' |
|||
import type { MarkerData } from './types/map.types' |
|||
|
|||
import { tdengineApi, tdStruct } from '@/api/gas/tdengine/index' |
|||
|
|||
import { EChartsOption } from 'echarts' |
|||
import Echart from '@/components/Echart/src/Echart.vue' |
|||
|
|||
import { ElMessage } from 'element-plus' |
|||
import dayjs from 'dayjs' |
|||
|
|||
const drawer = ref(false) |
|||
const loading = ref(false) |
|||
const currentMarker = ref<MarkerData | null>() |
|||
const historicalData = ref<tdStruct[]>([]) |
|||
async function getData(row: MarkerData) { |
|||
try { |
|||
const data = await tdengineApi.getHistoricalSn({ |
|||
sn: row.sn, |
|||
startTime: gasDateTimeRange.value[0], |
|||
endTime: gasDateTimeRange.value[1] |
|||
}) |
|||
if (!data || data.length === 0) { |
|||
ElMessage.error('没有数据') |
|||
// drawer.value = false |
|||
return |
|||
} |
|||
historicalData.value = data.map((item) => ({ |
|||
...item, |
|||
ts: dayjs(item.ts).format('YYYY-MM-DD HH:mm:ss') |
|||
})) |
|||
} catch (error) { |
|||
// ElMessage.error(error.message) |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
// console.log(data) |
|||
} |
|||
function openDrawer(row: MarkerData) { |
|||
reset() |
|||
historicalData.value = [] |
|||
currentMarker.value = row |
|||
drawer.value = true |
|||
loading.value = true |
|||
getData(row) |
|||
} |
|||
const handleClose = (done) => { |
|||
reset() |
|||
done() |
|||
} |
|||
const reset = () => { |
|||
loading.value = false |
|||
historicalData.value = [] |
|||
currentMarker.value = null |
|||
gasDateTimeRange.value = [ |
|||
dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'), |
|||
dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
] |
|||
} |
|||
|
|||
// const battery = computed(() => { |
|||
// let value: number[] = [] |
|||
// let time: string[] = [] |
|||
// historicalData.value |
|||
// .filter((item) => item.battery !== '') |
|||
// .forEach((item) => { |
|||
// value.push(Number(item.battery)) |
|||
// time.push(item.ts as string) |
|||
// }) |
|||
// return { |
|||
// value, |
|||
// time |
|||
// } |
|||
// }) |
|||
// const batteryLineOptions = computed<EChartsOption>(() => ({ |
|||
// title: { |
|||
// text: '', |
|||
// left: 'center' |
|||
// }, |
|||
// xAxis: { |
|||
// data: battery.value.time, |
|||
// boundaryGap: false, |
|||
// axisTick: { |
|||
// show: false |
|||
// } |
|||
// }, |
|||
// grid: { |
|||
// left: 20, |
|||
// right: 20, |
|||
// bottom: 20, |
|||
// top: 10, |
|||
// containLabel: true |
|||
// }, |
|||
// tooltip: { |
|||
// trigger: 'axis', |
|||
// axisPointer: { |
|||
// type: 'cross' |
|||
// }, |
|||
// padding: [5, 10] |
|||
// }, |
|||
// yAxis: { |
|||
// axisTick: { |
|||
// show: false |
|||
// } |
|||
// }, |
|||
// // legend: { |
|||
// // // data: [], |
|||
// // top: 50 |
|||
// // }, |
|||
// series: [ |
|||
// { |
|||
// name: '电池电压', |
|||
// smooth: true, |
|||
// type: 'line', |
|||
// data: battery.value.value |
|||
// } |
|||
// ] |
|||
// })) |
|||
|
|||
const gasDateTimeRange = ref(['', '']) |
|||
const handleDateChange = (dates: string[]) => { |
|||
// gasDateTimeRange.value = dates |
|||
if (!currentMarker.value) { |
|||
return |
|||
} |
|||
getData(currentMarker.value) |
|||
} |
|||
|
|||
const gas = computed(() => { |
|||
var value: (number | null)[] = [] |
|||
var battery: (number | null)[] = [] |
|||
var time: string[] = [] |
|||
historicalData.value |
|||
// .filter((item) => typeof item.value === 'number') |
|||
.forEach((item) => { |
|||
if (item.battery !== '') { |
|||
battery.push(Number(item.battery)) |
|||
} else { |
|||
battery.push(null) |
|||
} |
|||
if (typeof item.value === 'number') { |
|||
value.push(Number(item.value)) |
|||
} else { |
|||
value.push(null) |
|||
} |
|||
|
|||
time.push(item.ts as string) |
|||
}) |
|||
|
|||
return { |
|||
value, |
|||
battery, |
|||
time |
|||
} |
|||
}) |
|||
const gasLineOptions = computed<EChartsOption>(() => ({ |
|||
title: { |
|||
text: '', |
|||
left: 'center' |
|||
}, |
|||
xAxis: { |
|||
data: gas.value.time, |
|||
boundaryGap: false, |
|||
axisTick: { |
|||
show: false |
|||
} |
|||
}, |
|||
grid: { |
|||
left: 20, |
|||
right: 20, |
|||
bottom: 20, |
|||
top: 80, |
|||
containLabel: true |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross' |
|||
}, |
|||
padding: [5, 10] |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
axisTick: { |
|||
show: false |
|||
} |
|||
}, |
|||
{ |
|||
axisTick: { |
|||
show: false |
|||
} |
|||
} |
|||
], |
|||
legend: { |
|||
// data: [], |
|||
top: 50 |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: currentMarker.value?.gasChemical + '浓度', |
|||
smooth: true, |
|||
type: 'line', |
|||
data: gas.value.value, |
|||
animationDuration: 2800, |
|||
symbol: 'none', |
|||
|
|||
animationEasing: 'cubicInOut' |
|||
}, |
|||
{ |
|||
name: '电池电量', |
|||
smooth: true, |
|||
type: 'line', |
|||
yAxisIndex: 1, |
|||
symbol: 'none', |
|||
data: gas.value.battery, |
|||
animationDuration: 2800, |
|||
animationEasing: 'cubicInOut' |
|||
} |
|||
] |
|||
})) |
|||
|
|||
defineExpose({ |
|||
openDrawer |
|||
}) |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.chart-title { |
|||
position: relative; |
|||
font-size: 14px; |
|||
font-weight: bold; |
|||
padding-left: 10px; |
|||
|
|||
&::after { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0px; |
|||
bottom: 0; |
|||
top: 0; |
|||
width: 4px; |
|||
height: 100%; |
|||
background-color: rgba(22, 119, 255, 1); |
|||
} |
|||
} |
|||
.gasChemical { |
|||
display: inline-block; |
|||
padding: 2px 6px; |
|||
font-size: 12px; |
|||
color: #f59a23; |
|||
background-color: rgba(245, 154, 35, 0.09); |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue