Skip to content

Commit

Permalink
Update monitoring page, add echarts draft support
Browse files Browse the repository at this point in the history
  • Loading branch information
@xbgmsharp
xbgmsharp committed Jan 9, 2025
1 parent bdf564c commit c309435
Showing 1 changed file with 232 additions and 6 deletions.
238 changes: 232 additions & 6 deletions src/pages/monitoring/Monitoring.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@
<va-alert color="danger" outline class="mb-4"> {{ $t('api.error') }}: {{ apiError }} </va-alert>
</template>
<template v-if="!offline && apiSuccess">
<template v-if="items.geojson">
<template v-if="items.geojson && mapGeoJsonFeatures">
<l-map
id="monitoring-map"
:tabs="['vessel']"
:tabs="['steelseries', 'echarts']"
:tabs-auto-open="true"
:geo-json-feature="mapGeoJsonFeatures"
:map-zoom="13"
map-type="Satellite"
>
<template #tab-vessel>{{ items.vessel_name }}</template>
<template #content-vessel>
<template #tab-steelseries>{{ items.vessel_name }}</template>
<template #content-steelseries>
<h1 class="layout gutter--md text-center p-4">{{ msg_fromNow }}</h1>
<div style="font-size: 10pt; text-align: center">
<template v-if="sub_msg == 'Offline'">
Expand Down Expand Up @@ -54,6 +54,45 @@
<display-lcd id="battery" :display="items.battery"></display-lcd>
</div>
</template>

<template #tab-echarts>{{ items.vessel_name }}</template>
<template #content-echarts>
<h1 class="layout gutter--md text-center p-4">{{ msg_fromNow }}</h1>
<div style="font-size: 10pt; text-align: center">
<template v-if="sub_msg == 'Offline'">
<va-avatar size="small" color="warning" class="mr-6" /> Offline
</template>
<template v-else-if="sub_msg == 'Online'">
<va-avatar size="small" color="success" class="mr-6" /> Online
</template>
</div>
<div class="flex flex-col items-center p-4">
<div style="width: 180px; position: relative; margin: auto">
<div
id="windDirection"
style="
display: true;
position: absolute;
left: 10px;
top: 18px;
height: 36px;
width: 36px;
z-index: 99;
"
>
<img
id="windArrow"
src="/wind_direction.png"
style="height: 32px; width: 32px; opacity: 0.7"
:style="windDirection"
/>
</div>
<display-lcd id="wind" :display="items.wind"></display-lcd>
<VChart :option="echartsDefault" style="width: 180px"></VChart>
<VChart :option="echartsBattery" style="width: 180px"></VChart>
</div>
</div>
</template>
</l-map>
</template>
</template>
Expand All @@ -71,6 +110,11 @@
</script>

<script setup>
import 'leaflet/dist/leaflet.css'
import 'leaflet.sidepanel/dist/style.css'
import L from 'leaflet'
import 'leaflet.sidepanel'
// TODO update setup with lang="ts"
import { computed, ref, reactive, onMounted } from 'vue'
import { setAppTitle } from '../../utils/app.js'
Expand All @@ -86,6 +130,15 @@
import monitoringDatas from '../../data/monitoring.json'
import useGlobalStore from '../../stores/global-store'
import VChart, { THEME_KEY } from 'vue-echarts'
import { use } from 'echarts/core'
import * as echarts from 'echarts/core'
import { GraphicComponent, TitleComponent, LegendComponent, TooltipComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import { GaugeChart } from 'echarts/charts'
echarts.use([GraphicComponent, CanvasRenderer, TitleComponent, LegendComponent, GaugeChart, TooltipComponent])
const GlobalStore = useGlobalStore()
const { t } = useI18n()
Expand Down Expand Up @@ -188,7 +241,180 @@
rotate: `${utils.radiantToDegrees(apiData.row.winddirectiontrue) - 180}deg`,
}))
const monitor = onMounted(async () => {
var progressLineLength = 180
var maxValue = 100
var value = 70
const echartsDefault = {
graphic: {
elements: [
{
type: 'group',
left: 'center',
top: 'center',
children: [
// Background bar
{
type: 'rect',
shape: {
x: 0,
y: 0,
width: progressLineLength,
height: 20, // Increased height for a thicker bar
},
style: {
fill: '#E5E5E5',
},
},
// Progress bar
{
type: 'rect',
shape: {
x: 0,
y: 0,
width: (progressLineLength * value) / maxValue,
height: 20, // Increased height for a thicker bar
},
style: {
fill: '#3874CB',
},
keyframeAnimation: {
duration: 1000,
loop: false,
keyframes: [
{
percent: 0,
scaleX: 0,
},
{
percent: 1,
scaleX: 1,
},
],
},
},
// Value text above the bar
{
type: 'text',
left: (progressLineLength * value) / maxValue + 5, // Position text slightly above the bar
top: -25, // Adjust top to position the text above the bar
style: {
text: value.toString(), // Convert value to string for display
fill: '#000', // Text color
font: 'bold 16px sans-serif', // Adjust the font size and weight
},
},
],
},
],
},
}
const echartsBattery = {
tooltip: {
formatter: function (params) {
// Show tooltip for the Battery Level gauge
if (params.seriesIndex === 0) {
return `Battery Level: ${params.value}%`
}
return ''
},
},
graphic: {
type: 'text',
left: 'center',
top: '48%',
style: {
text: '14 V', // Example voltage value; replace with dynamic value if needed
textAlign: 'center',
fill: '#333', // Text color
font: '12px Arial', // Font size and family
},
},
series: [
{
name: 'Battery gauge',
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
radius: '30%',
axisLine: {
roundCap: true,
lineStyle: {
width: 8,
},
},
progress: {
show: true,
roundCap: true,
width: 8,
},
pointer: {
show: false,
},
axisTick: {
splitNumber: 2,
lineStyle: {
width: 2,
color: '#999',
},
show: false,
},
splitLine: {
length: 12,
lineStyle: {
width: 3,
color: '#999',
},
show: false,
},
axisLabel: {
distance: 30,
color: '#999',
fontSize: 12,
show: false,
},
title: {
show: true,
},
detail: {
show: false, // Do not show detail value
backgroundColor: '#fff',
//borderColor: '#999',
//borderWidth: 2,
width: '30%',
lineHeight: 40,
height: 40,
borderRadius: 6,
offsetCenter: [0, '-20%'],
valueAnimation: true,
formatter: function (value) {
return '{value|' + value.toFixed(0) + '}{tempUnit|C}'
},
rich: {
value: {
fontSize: 20,
fontWeight: 'bolder',
color: '#777',
},
unit: {
fontSize: 5,
color: '#999',
padding: [0, 0, -20, 10],
},
},
},
data: [
{
value: 65,
},
],
},
],
}
onMounted(async () => {
isBusy.value = true
apiError.value = null
const api = new PostgSail()
Expand All @@ -203,7 +429,7 @@
//console.log(apiData)
//console.log(response[0].time)
//console.log(moment.utc(response[0].time).locale('es').fromNow())
setTimeout(() => monitor(), 60 * 1000) // 1 min
//setTimeout(() => monitor(), 60 * 1000) // 1 min
if (apiData.row.name) {
document.title = setAppTitle(t('monitoring.title') + ': ' + apiData.row.name)
}
Expand Down

0 comments on commit c309435

Please sign in to comment.