master: Fixed 添加存储空间、引入字体、修复相关问题

.env.development

@@ -4,7 +4,7 @@
 VITE_APP_TITLE = 全景布控球
 
 # 网络请求
-VITE_APP_API_BASEURL = https://192.168.211.58:8081
+VITE_APP_API_BASEURL = https://192.168.211.44
 
 # 项目localStorage存储前缀
 VITE_APP_PREFIX = pbc

src/api/modules/ly.js

@@ -328,7 +328,7 @@ export default {
       url: `/api/BallCamera/Image/Parameters/${type}`,
       method: "put",
       params,
-      data
+      data,
     });
   },
   // 获取预制点
@@ -371,4 +371,12 @@ export default {
       params,
     });
   },
+  // 布控球SD卡信息
+  API_DISK_GET(params = {}) {
+    return request({
+      url: `/api/BallCamera/Disk`,
+      method: "get",
+      params,
+    });
+  },
 };

src/assets/main.css

@@ -23,4 +23,11 @@ body {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-}
+}
+
+@font-face {
+  font-family: "yb-font";
+  src: url("./fonts/yb-font.ttf");
+  font-weight: normal;
+  font-style: normal;
+}

src/assets/scss/adapter.scss

@@ -30,11 +30,11 @@ body {
 
 /* 竖屏样式 */
 @media screen and (orientation: portrait) {
-  .screen-set-wrapper{
-    .joystick > div{
+  .screen-set-wrapper {
+    .joystick > div {
       display: none;
     }
-    .joystick2 > div{
+    .joystick2 > div {
       display: block;
     }
   }
@@ -42,19 +42,23 @@ body {
 
 /* 横屏样式 */
 @media screen and (orientation: landscape) {
-  .device-info{
+  .device-info {
     grid-template-rows: repeat(2, minmax(0, 1fr));
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-  .network-set-wrapper,.screen-set-wrapper{
+  .network-set-wrapper,
+  .screen-set-wrapper {
     flex-direction: row;
   }
-  .screen-set-wrapper{
-    .joystick > div{
+  .screen-set-wrapper {
+    .joystick > div {
       display: none;
     }
-    .joystick2 > div{
+    .joystick2 > div {
       display: block;
     }
+    & > div:first-child .box {
+      height: 602px !important;
+    }
   }
 }

src/components/ECharts/optionsConfig.js

@@ -273,7 +273,7 @@ export const chartOptions = {
   },
   setOptionTwo(data, label) {
     const titlename = label;
-    const myColor = ["#409EFF", "#409EFF"];
+    const myColor = ["#409EFF", "#409EFF", "#409EFF"];
     const option = {
       grid: {
         left: "0%",
@@ -360,7 +360,7 @@ export const chartOptions = {
           type: "bar",
           yAxisIndex: 1,
           barGap: "-100%",
-          data: [100, 100],
+          data: [100, 100, 100],
           barWidth: 50,
           itemStyle: {
             color: "#284997",

src/views/Home/components/deviceInfo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-full p-10">
-    <div class="device-info h-full grid grid-cols-1 grid-rows-4 gap-4">
+    <div class="h-full grid grid-cols-2 grid-rows-2 gap-4">
       <Box>
         <template #icon>
           <Icon icon="solar:clipboard-linear" class="w-8 h-8"></Icon>
@@ -109,17 +109,24 @@
         <template #title>
           <span>存储状态</span>
         </template>
-        <div class="h-full">
+        <div class="h-full relative">
           <ECharts
             id="echarts-storage"
             width="100%"
             height="100%"
             :loading="loadingTwo"
             :fullOptions="{
-              options: chartOptions.setOptionTwo(
-                [50, 50],
-                ['细节存储用量', '全景存储用量']
-              ),
+              options: chartOptions.setOptionTwo(storageData.rate, [
+                storageData.partFreeSize && storageData.partSize
+                  ? `细节存储用量（剩余: ${storageData.partFreeSize}GB 总量: ${storageData.partSize}GB）`
+                  : '细节存储用量（sd卡未配置）',
+                storageData.fullFreeSize0 && storageData.fullSize0
+                  ? `全景1存储用量（剩余: ${storageData.fullFreeSize0}GB 总量: ${storageData.fullSize0}GB）`
+                  : '全景1存储用量（sd卡未配置）',
+                storageData.fullFreeSize1 && storageData.fullSize1
+                  ? `全景2存储用量（剩余: ${storageData.fullFreeSize1}GB 总量: ${storageData.fullSize1}GB）`
+                  : '全景2存储用量（sd卡未配置）',
+              ]),
             }"
           />
         </div>
@@ -139,9 +146,15 @@ const {
   API_HOST_NETPORT_GET,
   API_HOST_INFO_GET,
   API_RESTART_GET,
+  API_DISK_GET,
 } = useRequest();
 
 const useSystem = useOutsideSystemStore();
+const storageData = ref({
+  rate: [0, 0, 0],
+  fullSize: 0,
+  partSize: 0,
+});
 
 const baseInfo = ref([
   {
@@ -239,7 +252,7 @@ const btnFn = (btn) => {
         teleport: ".kjcz-teleport",
       })
         .then(async () => {
-          restart()
+          restart();
         })
         .catch(() => {
           // on cancel
@@ -251,8 +264,36 @@ const restart = async () => {
   await API_RESTART_GET();
   msgS("重启成功");
 };
+
+const initChartTwo = async () => {
+  try {
+    const res = await API_DISK_GET({ CameraId: useSystem.BallCameraId });
+    loadingTwo.value = false;
+    const part = res.filter((v) => v.Type === "part")[0];
+    const full0 = res.filter((v) => v.Type === "full0")[0];
+    const full1 = res.filter((v) => v.Type === "full1")[0];
+    storageData.value.rate = [
+      parseInt(part.Rate),
+      parseInt(full0.Rate),
+      parseInt(full1.Rate),
+    ];
+    storageData.value = {
+      rate: [parseInt(part.Rate), parseInt(full0.Rate), parseInt(full1.Rate)],
+      partSize: parseInt(part.TotalSize),
+      partFreeSize: parseInt(part.FreeSize),
+      fullSize0: parseInt(full0.TotalSize),
+      fullFreeSize0: parseInt(full0.FreeSize),
+      fullSize1: parseInt(full1.TotalSize),
+      fullFreeSize1: parseInt(full1.FreeSize),
+    };
+  } catch (e) {
+    loadingTwo.value = false;
+  }
+};
+
 const init = async () => {
   initChartOne();
+  initChartTwo();
   const hostInfo = await API_HOST_INFO_GET();
   const netProt = await API_HOST_NETPORT_GET();
   baseInfo.value[0].value = hostInfo.hostname;
@@ -270,12 +311,10 @@ const init = async () => {
 init();
 
 let timer = null;
-timer = setInterval(initChartOne, 30000);
-onMounted(() => {
-  setTimeout(() => {
-    loadingTwo.value = false;
-  }, 1000);
-});
+timer = setInterval(() => {
+  initChartOne();
+  initChartTwo();
+}, 30000);
 onUnmounted(() => {
   clearInterval(timer);
 });

src/views/Home/components/info.vue

@@ -17,15 +17,15 @@
       </div>
     </div>
 
-    <div class="flex gap-2 items-center justify-center text-24px my-15px">
-      <template v-if="info.latitude && info.longitude">
+    <div class="flex gap-2 items-center justify-center text-24px my-15px h-38px">
+      <template v-if="info.latitude != null && info.longitude != null">
         <div>
           <img src="@/assets/images/i-gps.png" alt="" class="w-20px mb--4px" />
         </div>
         <div>{{ info.longitude }}</div>
         <div>{{ info.latitude }}</div>
       </template>
-      <template v-else>
+      <template v-else-if="info.latitude === 0 && info.longitude === 0">
         <div class="text-#757575">卫星定位信号弱</div>
       </template>
     </div>
@@ -76,6 +76,8 @@ const init = async () => {
 
   try {
     const getGPS = await API_HOST_GPS_GET();
+    console.log("getGPS", getGPS);
+    
     if (getGPS) {
       info.value.longitude = getGPS.longitude
         ? decimalToDMS(getGPS.longitude, false)
@@ -84,6 +86,10 @@ const init = async () => {
         ? decimalToDMS(getGPS.latitude, true)
         : "";
       flag = true;
+    } else {
+      info.value.longitude = null;
+      info.value.latitude = null;
+      flag = false;
     }
   } catch (error) {
     console.error("Error fetching mobile data:", error);

src/views/Home/components/joystick.vue

@@ -5,20 +5,28 @@
         <div class="joystick-inner flex gap-4 mb-4">
           <div
             class="w-full h-90px text-7 line-height-45px text-center bg-#093F9D border-rd-2 flex flex-justify-around flex-items-center transition duration-200 ease-in-out active:bg-blue-500 focus:outline-none"
-            @click="toggle">
-            <Icon icon="oui:full-screen" width="40" height="40"/>
+            @click="toggle"
+          >
+            <Icon icon="oui:full-screen" width="40" height="40" />
           </div>
           <div
             class="w-full h-90px text-7 line-height-45px text-center bg-#093F9D border-rd-2 flex flex-justify-around flex-items-center transition duration-200 ease-in-out active:bg-blue-500 focus:outline-none"
-            @click="load">
-            <Icon icon="solar:refresh-square-outline" width="40" height="40"/>
+            @click="load"
+          >
+            <Icon icon="solar:refresh-square-outline" width="40" height="40" />
           </div>
         </div>
       </template>
-      <div v-if="type != 'screenSet'" class="grid grid-cols-3 grid-rows-1 gap-4 w-full my-1">
+      <div
+        v-if="type != 'screenSet'"
+        class="grid grid-cols-3 grid-rows-1 gap-4 w-full my-1"
+      >
         <div
           class="direction-button flex justify-center items-center text-7 line-height-60px text-center w-full h-120px bg-#093F9D b-0 b-rd-2 overflow-hidden transition duration-200 ease-in-out active:bg-blue-500 focus:outline-none"
-          v-for="(item, i) in patrolBtn" :key="i" v-on:[useSystem.event]="toSelectedPoint(item)">
+          v-for="(item, i) in patrolBtn"
+          :key="i"
+          v-on:[useSystem.event]="toSelectedPoint(item)"
+        >
           <!-- <span>{{ item.icon }}</span> -->
           <Icon :icon="item.icon" width="40" height="40"></Icon>
         </div>
@@ -26,29 +34,59 @@
       <div class="slider-box">
         <div class="slider-box-control flex flex-col flex-items-center gap-1">
           <div
-            class="w-full h-90px my-3 text-20px line-height-45px text-center bg-#093F9D border-rd-2 overflow-hidden flex">
+            class="w-full h-90px my-3 text-20px line-height-45px text-center bg-#093F9D border-rd-2 overflow-hidden flex"
+          >
             <div
-              class="flex-1 flex flex-justify-around flex-items-center transition duration-200 ease-in-out active:bg-blue-500 focus:outline-none">
-              <img src="@/assets/images/fd.png" class="w-38px" alt="" v-on:[downEvent]="setPZTmove('fd', 'down')"
-                v-on:[upEvent]="setPZTmove('fd', 'up')" draggable="false" />
+              class="flex-1 flex flex-justify-around flex-items-center transition duration-200 ease-in-out active:bg-blue-500 focus:outline-none"
+            >
+              <img
+                src="@/assets/images/fd.png"
+                class="w-38px"
+                alt=""
+                v-on:[downEvent]="setPZTmove('fd', 'down')"
+                v-on:[upEvent]="setPZTmove('fd', 'up')"
+                draggable="false"
+              />
             </div>
             <div
-              class="flex-1 flex flex-justify-around flex-items-center transition duration-200 ease-in-out active:bg-blue-500 focus:outline-none">
-              <img src="@/assets/images/sx.png" class="w-38px" alt="" v-on:[downEvent]="setPZTmove('sx', 'down')"
-                v-on:[upEvent]="setPZTmove('sx', 'up')" draggable="false" />
+              class="flex-1 flex flex-justify-around flex-items-center transition duration-200 ease-in-out active:bg-blue-500 focus:outline-none"
+            >
+              <img
+                src="@/assets/images/sx.png"
+                class="w-38px"
+                alt=""
+                v-on:[downEvent]="setPZTmove('sx', 'down')"
+                v-on:[upEvent]="setPZTmove('sx', 'up')"
+                draggable="false"
+              />
             </div>
           </div>
           <div
-            class="w-full h-90px mb-3 text-20px line-height-45px text-center bg-#093F9D border-rd-2 overflow-hidden flex">
+            class="w-full h-90px mb-3 text-20px line-height-45px text-center bg-#093F9D border-rd-2 overflow-hidden flex"
+          >
             <div
-              class="flex-1 flex flex-justify-around flex-items-center transition duration-200 ease-in-out active:bg-blue-500 focus:outline-none">
-              <img src="@/assets/images/jia.png" class="w-38px" alt="" v-on:[downEvent]="setPZTmove('jia', 'down')"
-                v-on:[upEvent]="setPZTmove('jia', 'up')" draggable="false" />
+              class="flex-1 flex flex-justify-around flex-items-center transition duration-200 ease-in-out active:bg-blue-500 focus:outline-none"
+            >
+              <img
+                src="@/assets/images/jia.png"
+                class="w-38px"
+                alt=""
+                v-on:[downEvent]="setPZTmove('jia', 'down')"
+                v-on:[upEvent]="setPZTmove('jia', 'up')"
+                draggable="false"
+              />
             </div>
             <div
-              class="flex-1 flex flex-justify-around flex-items-center transition duration-200 ease-in-out active:bg-blue-500 focus:outline-none">
-              <img src="@/assets/images/jian.png" class="w-38px" alt="" v-on:[downEvent]="setPZTmove('jian', 'down')"
-                v-on:[upEvent]="setPZTmove('jian', 'up')" draggable="false" />
+              class="flex-1 flex flex-justify-around flex-items-center transition duration-200 ease-in-out active:bg-blue-500 focus:outline-none"
+            >
+              <img
+                src="@/assets/images/jian.png"
+                class="w-38px"
+                alt=""
+                v-on:[downEvent]="setPZTmove('jian', 'down')"
+                v-on:[upEvent]="setPZTmove('jian', 'up')"
+                draggable="false"
+              />
             </div>
           </div>
         </div>
@@ -58,17 +96,32 @@
       <div class="grid grid-cols-3 grid-rows-3 gap-4 w-full h-513px">
         <div
           class="direction-button flex justify-center items-center bg-#093F9D b-0 b-rd-2 overflow-hidden p-2 transition duration-200 ease-in-out active:bg-blue-500 focus:outline-none"
-          v-for="direction in directions" :style="{
+          v-for="direction in directions"
+          :style="{
             backgroundColor:
               direction === 'hr' && isHR ? 'rgb(59 130 246)' : '',
-          }" :key="direction" v-on:[downEvent].stop="setPZTmove(direction, 'down')"
-          v-on:[upEvent].stop="setPZTmove(direction, 'up')">
-          <img class="w-full" draggable="false" :src="getStaticResource(`assets/images/${direction}.png`).href" />
+          }"
+          :key="direction"
+          v-on:[downEvent].stop="setPZTmove(direction, 'down')"
+          v-on:[upEvent].stop="setPZTmove(direction, 'up')"
+        >
+          <img
+            class="w-full"
+            draggable="false"
+            :src="getStaticResource(`assets/images/${direction}.png`).href"
+          />
         </div>
       </div>
-      <div class=" flex-1 flex flex-col justify-center items-center">
-        <van-slider v-model="sliderValue" bar-height="10px" active-color="#093f9d" inactive-color="#093f9d"
-          button-size="24px" :min="1" :max="7"></van-slider>
+      <div class="flex-1 flex flex-col justify-center items-center">
+        <van-slider
+          v-model="sliderValue"
+          bar-height="10px"
+          active-color="#093f9d"
+          inactive-color="#093f9d"
+          button-size="24px"
+          :min="1"
+          :max="7"
+        ></van-slider>
         <div class="text-2xl">
           步长 <span>{{ sliderValue }}</span>
         </div>
@@ -109,7 +162,7 @@
       </div>
       <div class="buttons grid grid-cols-3 grid-rows-3 gap-1 w-58 h-58">
         <div
-          class="direction-button bg-#093F9D b-0 b-rd-2  flex justify-center items-center overflow-hidden p-2 transition duration-200 ease-in-out active:bg-blue-500 focus:outline-none"
+          class="direction-button bg-#093F9D b-0 b-rd-2 flex justify-center items-center overflow-hidden p-2 transition duration-200 ease-in-out active:bg-blue-500 focus:outline-none"
           v-for="direction in directions"
           :style="{
             backgroundColor:
@@ -209,6 +262,7 @@
 import { useFullscreen } from "@vueuse/core";
 import { getStaticResource, isWap } from "@/utils";
 import { useOutsideSystemStore } from "@/stores/modules/system";
+import { msg } from "@/utils";
 
 defineProps({
   type: {
@@ -272,7 +326,7 @@ const reconnect = (err, data, api) => {
         });
         reconnect(res);
       },
-      () => { },
+      () => {},
       "重连",
       "取消"
     );
@@ -419,7 +473,10 @@ const setPZTmove = (direction, isKey) => {
 };
 
 const toSelectedPoint = async (item) => {
-  if (!item.value) return;
+  if (!item.value) {
+    msg('error', '暂未设置该预制点')
+    return;
+  }
   API_PRESET_POINTS_EXEC_POST({
     CameraId: useSystem.BallCameraId,
     PresetPointId: item.value,