完善 速度显示 及 动画支持
This commit is contained in:
parent
fc26de7744
commit
27195c0448
1
app/wails/frontend/components.d.ts
vendored
1
app/wails/frontend/components.d.ts
vendored
@ -10,6 +10,7 @@ declare module 'vue' {
|
||||
CPUUsage: typeof import('./src/components/system/cpu/CPUUsage.vue')['default']
|
||||
CPUUsageChart: typeof import('./src/components/system/cpu/CPUUsageChart.vue')['default']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@element-plus/icons-vue": "^2.1.0",
|
||||
"@vueuse/core": "^10.2.1",
|
||||
"axios": "^1.4.0",
|
||||
"echarts": "^5.4.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import {useCpuUsage} from "src/utils/system/cpu";
|
||||
import {computed, onMounted, reactive, ref, watch} from "vue";
|
||||
import {computed, onActivated, onMounted, reactive, ref, watch} from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import moment from "moment";
|
||||
const props = defineProps({
|
||||
@ -109,6 +109,10 @@ onMounted(()=>{
|
||||
chartInst.setOption(chart)
|
||||
chartInst.resize()
|
||||
|
||||
onActivated(()=>{
|
||||
chartInst.resize()
|
||||
})
|
||||
|
||||
watch(singleUsage,(v)=>{
|
||||
let data = chart.series[0].data
|
||||
data.push({
|
||||
@ -124,7 +128,6 @@ onMounted(()=>{
|
||||
chartInst.resize()
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -3,7 +3,7 @@ import {
|
||||
useMemoryTotalSizeWithByte,
|
||||
useMemoryUsageSizeWithByte
|
||||
} from "src/utils/system/memory";
|
||||
import {computed, onMounted, reactive, ref, watch} from "vue";
|
||||
import {computed, onActivated, onMounted, reactive, ref, watch} from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import moment from "moment";
|
||||
import {bytesToSizeWithUnit} from "src/utils/file/file";
|
||||
@ -133,6 +133,10 @@ onMounted(()=>{
|
||||
chartInst.setOption(chart)
|
||||
chartInst.resize()
|
||||
|
||||
onActivated(()=>{
|
||||
chartInst.resize()
|
||||
})
|
||||
|
||||
watch(memoryUsage,(v)=>{
|
||||
chart.visualMap = getVisualMap()
|
||||
let data = chart.series[0].data
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import {onMounted, reactive, ref, watch} from "vue";
|
||||
import {onActivated, onMounted, reactive, ref, watch} from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import moment from "moment";
|
||||
import {bytesToSizeWithUnit} from "src/utils/file/file";
|
||||
@ -118,6 +118,10 @@ onMounted(()=>{
|
||||
chartInst.setOption(chart)
|
||||
chartInst.resize()
|
||||
|
||||
onActivated(()=>{
|
||||
chartInst.resize()
|
||||
})
|
||||
|
||||
watch(netWorkSumRate,(v)=>{
|
||||
let upload = chart.series[0].data
|
||||
upload.push({
|
||||
|
||||
@ -13,7 +13,6 @@
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<!-- <DateTimeSelector v-model="date" range></DateTimeSelector>-->
|
||||
<el-date-picker
|
||||
v-model="date"
|
||||
type="datetimerange"
|
||||
@ -79,7 +78,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div ref="containerRef" id="map-container" style="height: 80vh">
|
||||
<div class="absolute bg-amber-50 rounded-br z-max text-center" style="width: 300px" v-if="view.filterData.length > 0">
|
||||
<div class="absolute bg-amber-50 rounded-br z-50 text-center" style="width: 300px" v-if="view.filterData.length > 0">
|
||||
<div class="flex">
|
||||
<div class="w-1/4">最高速度</div>
|
||||
<div>{{view.speed.max}} km/h</div>
|
||||
@ -90,7 +89,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bg-amber-50 rounded-tl z-max text-left absolute-bottom-right pl-1.5" style="width: 350px" v-if="view.lines.length > 0">
|
||||
<div class="absolute bottom-0 right-0 bg-amber-50 rounded-tl z-50 text-left pl-1.5" style="width: 350px" v-if="view.lines.length > 0">
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
路径数量: {{view.lines.length}}
|
||||
@ -100,20 +99,28 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-scrollbar :style="{height: view.lines.length * 22 > 250 ?'250px':view.lines.length * 22 + 'px'}" class="overflow-auto">
|
||||
<!-- <div v-for="(item,i) in view.lines" :key="i" >-->
|
||||
<!-- {{item[0].locationTime}} ~ {{item[item.length-1].locationTime}}-->
|
||||
<!-- </div>-->
|
||||
<el-checkbox-group v-model="options.showLines" @update:model-value="changeShowLines" :options="options.lines" type="checkbox" dense>
|
||||
<!-- <template>-->
|
||||
<el-scrollbar :style="{height: view.lines.length * 25 > 350 ?'350px':view.lines.length * 25 + 'px'}" class="overflow-auto">
|
||||
|
||||
<el-checkbox-group style="height: 25px" v-model="options.showLines" @update:model-value="changeShowLines" :options="options.lines" type="checkbox" dense>
|
||||
<el-row v-for="opt in options.lines">
|
||||
<span>{{ opt.label }}</span>
|
||||
<el-icon v-if="view.animating === opt.value"
|
||||
@click.stop="stop"
|
||||
name="fas fa-stop" color="negative" size="0.625em" class="q-ml-sm"></el-icon>
|
||||
<el-icon v-else @click.stop="play(opt)" name="fas fa-play" color="teal" size="0.625em" class="q-ml-sm" />
|
||||
<el-col style="height: 25px">
|
||||
<div>
|
||||
<el-checkbox :label="opt.value">
|
||||
<span style="height: 25px">{{ opt.label }}</span>
|
||||
<el-icon v-if="view.animating === opt.value"
|
||||
@click.prevent="stop"
|
||||
color="red"
|
||||
size="1rem">
|
||||
<SwitchButton />
|
||||
</el-icon>
|
||||
<el-icon v-else @click.prevent="play(opt)" color="teal" size="1rem" class="q-ml-sm">
|
||||
<VideoPlay/>
|
||||
</el-icon>
|
||||
</el-checkbox>
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- </template>-->
|
||||
</el-checkbox-group>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
@ -121,6 +128,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {VideoPlay,SwitchButton} from "@element-plus/icons-vue"
|
||||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||||
import {onActivated, onMounted, onUnmounted, reactive, ref} from "vue";
|
||||
import moment from "moment";
|
||||
|
||||
@ -294,7 +294,7 @@
|
||||
resolved "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.0.tgz#53fa5fe9c34faee89469e48f91d51a3766108bc8"
|
||||
integrity sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ==
|
||||
|
||||
"@element-plus/icons-vue@^2.0.6":
|
||||
"@element-plus/icons-vue@^2.0.6", "@element-plus/icons-vue@^2.1.0":
|
||||
version "2.1.0"
|
||||
resolved "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz#7ad90d08a8c0d5fd3af31c4f73264ca89614397a"
|
||||
integrity sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==
|
||||
|
||||
Loading…
Reference in New Issue
Block a user