修复围栏报警筛选

web/.env.test

@@ -0,0 +1,29 @@
+NODE_ENV=development
+
+VITE_DEV=true
+
+# 请求路径
+# VITE_BASE_URL='https://mobile.zdhlcn.com'
+# VITE_BASE_URL='https://lock.zdhlcn.com:9807'
+VITE_BASE_URL='https://mobile.zdhlcn.com'
+
+# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
+VITE_UPLOAD_TYPE=server
+
+# 接口地址
+VITE_API_URL=/admin-api
+
+# 是否删除debugger
+VITE_DROP_DEBUGGER=false
+
+# 是否删除console.log
+VITE_DROP_CONSOLE=false
+
+# 是否sourcemap
+VITE_SOURCEMAP=true
+
+# 打包路径
+VITE_BASE_PATH=/
+
+# 输出路径
+VITE_OUT_DIR=dist

web/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "i": "pnpm install",
     "dev": "vite --mode dev",
+    "dev:test": "vite --mode test", 
     "ts:check": "vue-tsc --noEmit",
     "build:dev": "vite build --mode dev",
     "build:prod": "vite build --mode prod",

web/src/views/HandDevice/Home/components/TopPanel.vue

@@ -20,9 +20,10 @@
   </div>
   <div class="top-right">
     <div class="normal-legend" :class="{'is-active': selectStatus.includes('normal')}" @click="toggleStatus('normal')">正常状态</div>
-    <div class="fence-legend" :class="{'is-active': selectStatus.includes('fence')}" @click="toggleStatus('fence')">围栏报警</div>
+    <div class="fence-legend" :class="{'is-active': selectStatus.includes('fenceStatus_1')}" @click="toggleStatus('fenceStatus_1')">围栏报警</div>
     <div class="alarm-legend" :class="{'is-active': selectStatus.includes('alarm')}" @click="toggleStatus('alarm')">气体报警</div>
-    <div class="offline-legend" :class="{'is-active': selectStatus.includes('offline')}" @click="toggleStatus('offline')">离线状态</div>
+    <div class="battery-legend" :class="{'is-active': selectStatus.includes('batteryStatus_1')}" @click="toggleStatus('batteryStatus_1')">低电量</div>
+    <div class="offline-legend" :class="{'is-active': selectStatus.includes('offline')}" @click="toggleStatus('offline')">离线</div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -45,7 +46,7 @@ var search = defineModel('search',{
 })
 const selectStatus=defineModel('selectStatus',{
   type: Array,
-  default: () => ['normal', 'offline', 'fence', 'alarm']
+  default: () => ['normal', 'offline', 'fenceStatus_1', 'alarm','batteryStatus_1']
 })
 // var selectStatus = ref(['normal', 'offline'])
 function toggleStatus(status: string) {
@@ -137,7 +138,7 @@ function toggleStatus(status: string) {
  
   .normal-legend,
   .fence-legend,
-  .alarm-legend, .offline-legend  {
+  .alarm-legend, .offline-legend,.battery-legend  {
     position: relative;
     padding: 4px 8px;
     border-radius: 999px;
@@ -151,6 +152,9 @@ function toggleStatus(status: string) {
   .normal-legend {
     background: #67c23a;
   }
+  .battery-legend {
+    background: #ff9900;
+  }
 
   .fence-legend {
     background: #e6a23c;
@@ -188,5 +192,8 @@ function toggleStatus(status: string) {
   .offline-legend.is-active::after{
     border: 1px solid #909399;
   }
+  .battery-legend.is-active::after{
+    border: 1px solid #ff9900;
+  }
 }
 </style>

web/src/views/HandDevice/Home/index.vue

@@ -126,7 +126,7 @@ const fences = ref<FenceData[]>([])
 
 const mapRef = ref<InstanceType<typeof OpenLayerMap>>()
 const search = ref('')
-const selectStatus = ref(['normal', 'offline', 'fence', 'alarm'])
+const selectStatus = ref(['normal', 'offline', 'fenceStatus_1', 'alarm','batteryStatus_1'])
 watch(
   () => search.value,
   (newSearch, oldSearch) => {
@@ -151,14 +151,20 @@ const filterMarkers = computed(() => {
       return isName || isSn || isGasChemical
     })
   }
+
+  
   if (selectStatus.value.length !== 0) {
     arr = arr.filter((item) => {
+    console.log('selectStatus', selectStatus.value,item.statusStr);
       if (!item.statusStr) {
         return true
       }
       if (item.statusStr == 'gasStatus_2' || item.statusStr == 'gasStatus_1') {
         return selectStatus.value.includes('alarm')
       }
+      // if (item.statusStr == 'fenceStatus_1') {
+      //   return selectStatus.value.includes('fenceStatus_1')
+      // }
       return selectStatus.value.includes(item.statusStr)
     })
   }