From 27195c044825e92bf15cb35937d617cbf782b658 Mon Sep 17 00:00:00 2001
From: Shikong <919411476@qq.com>
Date: Tue, 25 Jul 2023 15:53:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=20=E9=80=9F=E5=BA=A6?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=20=E5=8F=8A=20=E5=8A=A8=E7=94=BB=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/wails/frontend/components.d.ts            |  1 +
 app/wails/frontend/package.json               |  1 +
 .../components/system/cpu/CPUUsageChart.vue   |  7 +++-
 .../system/memory/MemoryUsageChart.vue        |  6 ++-
 .../system/network/NetworkSumRateChart.vue    |  6 ++-
 .../src/views/tabs/location-record/index.vue  | 38 +++++++++++--------
 app/wails/frontend/yarn.lock                  |  2 +-
 7 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/app/wails/frontend/components.d.ts b/app/wails/frontend/components.d.ts
index 7003c82..e79a511 100644
--- a/app/wails/frontend/components.d.ts
+++ b/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']
diff --git a/app/wails/frontend/package.json b/app/wails/frontend/package.json
index ec8fe88..2b63037 100644
--- a/app/wails/frontend/package.json
+++ b/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",
diff --git a/app/wails/frontend/src/components/system/cpu/CPUUsageChart.vue b/app/wails/frontend/src/components/system/cpu/CPUUsageChart.vue
index 50a1ea8..81c6f7e 100644
--- a/app/wails/frontend/src/components/system/cpu/CPUUsageChart.vue
+++ b/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>
diff --git a/app/wails/frontend/src/components/system/memory/MemoryUsageChart.vue b/app/wails/frontend/src/components/system/memory/MemoryUsageChart.vue
index 3f87261..8ed1da2 100644
--- a/app/wails/frontend/src/components/system/memory/MemoryUsageChart.vue
+++ b/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
diff --git a/app/wails/frontend/src/components/system/network/NetworkSumRateChart.vue b/app/wails/frontend/src/components/system/network/NetworkSumRateChart.vue
index 92a107b..4efd923 100644
--- a/app/wails/frontend/src/components/system/network/NetworkSumRateChart.vue
+++ b/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({
diff --git a/app/wails/frontend/src/views/tabs/location-record/index.vue b/app/wails/frontend/src/views/tabs/location-record/index.vue
index a5a6237..4f8c1d0 100644
--- a/app/wails/frontend/src/views/tabs/location-record/index.vue
+++ b/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">
-                    <!--                <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";
diff --git a/app/wails/frontend/yarn.lock b/app/wails/frontend/yarn.lock
index b1e87be..9b79e34 100644
--- a/app/wails/frontend/yarn.lock
+++ b/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==