完善 速度显示 及 动画支持

app/wails/frontend/components.d.ts

@@ -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']

app/wails/frontend/package.json

@@ -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",

app/wails/frontend/src/components/system/cpu/CPUUsageChart.vue

@@ -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>

app/wails/frontend/src/components/system/memory/MemoryUsageChart.vue

@@ -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

app/wails/frontend/src/components/system/network/NetworkSumRateChart.vue

@@ -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({

app/wails/frontend/src/views/tabs/location-record/index.vue

@@ -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">
+                <el-scrollbar  :style="{height: view.lines.length * 25 > 350 ?'350px':view.lines.length * 25 + 'px'}" class="overflow-auto">
-                    <!--                <div v-for="(item,i) in view.lines" :key="i" >-->
+
-                    <!--                    {{item[0].locationTime}} ~ {{item[item.length-1].locationTime}}-->
+                    <el-checkbox-group style="height: 25px" v-model="options.showLines" @update:model-value="changeShowLines" :options="options.lines" type="checkbox" dense>
-                    <!--                </div>-->
-                    <el-checkbox-group v-model="options.showLines" @update:model-value="changeShowLines" :options="options.lines" type="checkbox" dense>
-<!--                        <template>-->
                             <el-row v-for="opt in options.lines">
-                                <span>{{ opt.label }}</span>
+                                <el-col style="height: 25px">
-                                <el-icon v-if="view.animating === opt.value"
+                                    <div>
-                                         @click.stop="stop"
+                                        <el-checkbox :label="opt.value">
-                                         name="fas fa-stop" color="negative" size="0.625em" class="q-ml-sm"></el-icon>
+                                            <span style="height: 25px">{{ opt.label }}</span>
-                                <el-icon v-else @click.stop="play(opt)" name="fas fa-play" color="teal" size="0.625em" class="q-ml-sm" />
+                                            <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";

app/wails/frontend/yarn.lock

@@ -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==