|
|
|
@ -5,7 +5,7 @@ |
|
|
|
:before-close="handleClose" |
|
|
|
:destroy-on-close="true" |
|
|
|
resizable |
|
|
|
size="550px" |
|
|
|
size="480px" |
|
|
|
> |
|
|
|
<template #header> |
|
|
|
<h4 |
|
|
|
@ -31,8 +31,11 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-if="drawer && !loading"> |
|
|
|
<Echart :options="gasLineOptions" :height="400" /> |
|
|
|
<Echart :options="gasLineOptions" :height="325" /> |
|
|
|
</div> |
|
|
|
<!-- <div v-if="drawer && !loading"> |
|
|
|
<Echart :options="gasSigLineOptions" :height="325" /> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
<!-- <div> |
|
|
|
<div class="flex items-center justify-between"> |
|
|
|
@ -97,7 +100,7 @@ async function getData(row: MarkerData) { |
|
|
|
...item, |
|
|
|
timeStr: dayjs(item.ts).format('YYYY-MM-DD HH:mm:ss') |
|
|
|
})) |
|
|
|
console.log(historicalData.value) |
|
|
|
console.log(historicalData.value) |
|
|
|
} catch (error) { |
|
|
|
// ElMessage.error(error.message) |
|
|
|
} finally { |
|
|
|
@ -138,6 +141,12 @@ const handleDateChange = () => { |
|
|
|
const gas = computed(() => { |
|
|
|
var value: (number | null)[] = [] |
|
|
|
var battery: (number | null)[] = [] |
|
|
|
var mem: (number | null)[] = [] |
|
|
|
var rssi: (number | null)[] = [] |
|
|
|
var rsrp: (number | null)[] = [] |
|
|
|
var rsrq: (number | null)[] = [] |
|
|
|
var sinr: (number | null)[] = [] |
|
|
|
|
|
|
|
var time: string[] = [] |
|
|
|
historicalData.value |
|
|
|
// .filter((item) => typeof item.value === 'number') |
|
|
|
@ -152,6 +161,32 @@ const gas = computed(() => { |
|
|
|
} else { |
|
|
|
value.push(null) |
|
|
|
} |
|
|
|
if (item.mem) { |
|
|
|
mem.push(item.mem / 1024) |
|
|
|
} else { |
|
|
|
mem.push(null) |
|
|
|
} |
|
|
|
if (item.sig) { |
|
|
|
try { |
|
|
|
let sig = JSON.parse(item.sig) |
|
|
|
if (sig.length == 5) { |
|
|
|
rssi.push(sig[0]) |
|
|
|
rsrp.push(sig[1]) |
|
|
|
rsrq.push(sig[2]) |
|
|
|
sinr.push(sig[4]) |
|
|
|
} |
|
|
|
} catch { |
|
|
|
rssi.push(null) |
|
|
|
rsrp.push(null) |
|
|
|
rsrq.push(null) |
|
|
|
sinr.push(null) |
|
|
|
} |
|
|
|
} else { |
|
|
|
rssi.push(null) |
|
|
|
rsrp.push(null) |
|
|
|
rsrq.push(null) |
|
|
|
sinr.push(null) |
|
|
|
} |
|
|
|
|
|
|
|
time.push(item.timeStr) |
|
|
|
}) |
|
|
|
@ -159,6 +194,11 @@ const gas = computed(() => { |
|
|
|
return { |
|
|
|
value, |
|
|
|
battery, |
|
|
|
mem, |
|
|
|
rssi, |
|
|
|
rsrp, |
|
|
|
rsrq, |
|
|
|
sinr, |
|
|
|
time |
|
|
|
} |
|
|
|
}) |
|
|
|
@ -219,6 +259,64 @@ const gasLineOptions = computed<EChartsOption>(() => { |
|
|
|
data: gas.value.battery, |
|
|
|
animationDuration: 2800, |
|
|
|
animationEasing: 'cubicInOut' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '内存占用', |
|
|
|
smooth: true, |
|
|
|
type: 'line', |
|
|
|
yAxisIndex: 1, |
|
|
|
symbol: 'none', |
|
|
|
data: gas.value.mem, |
|
|
|
animationDuration: 2800, |
|
|
|
animationEasing: 'cubicInOut', |
|
|
|
tooltip: { |
|
|
|
valueFormatter: function (value) { |
|
|
|
if (value === null || value === undefined || isNaN(value)) { |
|
|
|
return '-' |
|
|
|
} |
|
|
|
return Number(value).toFixed(3) + 'KB' // 返回带单位的字符串 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: 'RSSI', |
|
|
|
smooth: true, |
|
|
|
type: 'line', |
|
|
|
yAxisIndex: 0, |
|
|
|
symbol: 'none', |
|
|
|
data: gas.value.rssi, |
|
|
|
animationDuration: 2800, |
|
|
|
animationEasing: 'cubicInOut' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: 'RSRP', |
|
|
|
smooth: true, |
|
|
|
type: 'line', |
|
|
|
yAxisIndex: 0, |
|
|
|
symbol: 'none', |
|
|
|
data: gas.value.rsrp, |
|
|
|
animationDuration: 2800, |
|
|
|
animationEasing: 'cubicInOut' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: 'RSRQ', |
|
|
|
smooth: true, |
|
|
|
type: 'line', |
|
|
|
yAxisIndex: 0, |
|
|
|
symbol: 'none', |
|
|
|
data: gas.value.rsrq, |
|
|
|
animationDuration: 2800, |
|
|
|
animationEasing: 'cubicInOut' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: 'SINR', |
|
|
|
smooth: true, |
|
|
|
type: 'line', |
|
|
|
yAxisIndex: 0, |
|
|
|
symbol: 'none', |
|
|
|
data: gas.value.sinr, |
|
|
|
animationDuration: 2800, |
|
|
|
animationEasing: 'cubicInOut' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
@ -254,6 +352,138 @@ const gasLineOptions = computed<EChartsOption>(() => { |
|
|
|
|
|
|
|
return option |
|
|
|
}) |
|
|
|
// const gasSigLineOptions = computed<EChartsOption>(() => { |
|
|
|
// const option: EChartsOption = { |
|
|
|
// title: { |
|
|
|
// text: '', |
|
|
|
// left: 'center' |
|
|
|
// }, |
|
|
|
// xAxis: { |
|
|
|
// data: gas.value.time, |
|
|
|
// boundaryGap: false, |
|
|
|
// axisTick: { |
|
|
|
// show: false |
|
|
|
// } |
|
|
|
// }, |
|
|
|
|
|
|
|
// tooltip: { |
|
|
|
// trigger: 'axis', |
|
|
|
// axisPointer: { |
|
|
|
// type: 'cross' |
|
|
|
// }, |
|
|
|
// padding: [5, 10] |
|
|
|
// }, |
|
|
|
// yAxis: [ |
|
|
|
// { |
|
|
|
// axisTick: { |
|
|
|
// show: false |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// axisTick: { |
|
|
|
// show: false |
|
|
|
// } |
|
|
|
// } |
|
|
|
// ], |
|
|
|
// legend: { |
|
|
|
// // data: [], |
|
|
|
// top: 50 |
|
|
|
// }, |
|
|
|
// series: [ |
|
|
|
// { |
|
|
|
// name: '电池电量', |
|
|
|
// smooth: true, |
|
|
|
// type: 'line', |
|
|
|
// yAxisIndex: 1, |
|
|
|
// symbol: 'none', |
|
|
|
// data: gas.value.battery, |
|
|
|
// animationDuration: 2800, |
|
|
|
// animationEasing: 'cubicInOut' |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// name: '内存占用', |
|
|
|
// smooth: true, |
|
|
|
// type: 'line', |
|
|
|
// yAxisIndex: 1, |
|
|
|
// symbol: 'none', |
|
|
|
// data: gas.value.mem, |
|
|
|
// animationDuration: 2800, |
|
|
|
// animationEasing: 'cubicInOut' |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// name: 'RSSI', |
|
|
|
// smooth: true, |
|
|
|
// type: 'line', |
|
|
|
// yAxisIndex: 0, |
|
|
|
// symbol: 'none', |
|
|
|
// data: gas.value.rssi, |
|
|
|
// animationDuration: 2800, |
|
|
|
// animationEasing: 'cubicInOut' |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// name: 'RSRP', |
|
|
|
// smooth: true, |
|
|
|
// type: 'line', |
|
|
|
// yAxisIndex: 0, |
|
|
|
// symbol: 'none', |
|
|
|
// data: gas.value.rsrp, |
|
|
|
// animationDuration: 2800, |
|
|
|
// animationEasing: 'cubicInOut' |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// name: 'RSRQ', |
|
|
|
// smooth: true, |
|
|
|
// type: 'line', |
|
|
|
// yAxisIndex: 0, |
|
|
|
// symbol: 'none', |
|
|
|
// data: gas.value.rsrq, |
|
|
|
// animationDuration: 2800, |
|
|
|
// animationEasing: 'cubicInOut' |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// name: 'SINR', |
|
|
|
// smooth: true, |
|
|
|
// type: 'line', |
|
|
|
// yAxisIndex: 0, |
|
|
|
// symbol: 'none', |
|
|
|
// data: gas.value.sinr, |
|
|
|
// animationDuration: 2800, |
|
|
|
// animationEasing: 'cubicInOut' |
|
|
|
// } |
|
|
|
// ] |
|
|
|
// } |
|
|
|
// const grid = { |
|
|
|
// left: 20, |
|
|
|
// right: 20, |
|
|
|
// bottom: 10, |
|
|
|
// top: 80, |
|
|
|
// containLabel: true |
|
|
|
// } |
|
|
|
// if (gas.value.time.length >= 100) { |
|
|
|
// grid.bottom = 50 |
|
|
|
|
|
|
|
// // 缩放 |
|
|
|
// option.dataZoom = [ |
|
|
|
// { |
|
|
|
// type: 'slider', |
|
|
|
// xAxisIndex: [0], |
|
|
|
// bottom: 10, |
|
|
|
// start: 0, |
|
|
|
// end: 100 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// type: 'inside', |
|
|
|
// xAxisIndex: [0], |
|
|
|
// start: 0, |
|
|
|
// end: 100 |
|
|
|
// } |
|
|
|
// ] |
|
|
|
// } else { |
|
|
|
// } |
|
|
|
// option.grid = grid |
|
|
|
|
|
|
|
// return option |
|
|
|
// }) |
|
|
|
|
|
|
|
defineExpose({ |
|
|
|
openDrawer |
|
|
|
|