设备树添加设备状态

apps/web-antd/src/views/sis/video/realtime/channel-tree.vue

@@ -83,33 +83,51 @@ onMounted(loadChannelTree);
             @check="$emit('checked')"
             @select="onSelect"
           >
-            <template #title="{ label, level, key }">
+            <template #title="{ label, level, key, data: { data } }">
               <div class="flex">
                 <!--       通道节点显示图标         -->
                 <div v-if="level == 2" class="tree-icon">
-                  <!--                  -->
+                  <!--       在线图标           -->
                   <div
-                    v-if="selectKeys.indexOf(key) > -1"
-                    class="icon playing"
-                  ></div>
-                  <div v-else class="icon unplay"></div>
+                    v-if="data && data.channelState == 1"
+                    class="h-full w-full"
+                  >
+                    <!--       播放中的设备           -->
+                    <div
+                      v-if="selectKeys.indexOf(key) > -1"
+                      class="icon playing"
+                    ></div>
+                    <!--       未播放的设备           -->
+                    <div v-else class="icon unplay"></div>
+                  </div>
+                  <!--       离线的设备           -->
+                  <div v-else class="icon offLine"></div>
                 </div>
 
-                <span :style="currentSelectKey == key ? 'color:blue' : ''">
-                  <span v-if="label.indexOf(searchValue) > -1">
-                    {{ label.substring(0, label.indexOf(searchValue)) }}
-                    <span style="color: #f50">{{ searchValue }}</span>
-                    {{
-                      label.substring(
-                        label.indexOf(searchValue) + searchValue.length,
-                      )
-                    }}
+                <div>
+                  <span v-if="data && data.channelState == 0">
+                    <span style="color: red">{{ label }}</span>
                   </span>
 
-                  <span v-else>
-                    <span>{{ label }}</span>
+                  <span
+                    v-else
+                    :style="currentSelectKey == key ? 'color:blue' : ''"
+                  >
+                    <span v-if="label.indexOf(searchValue) > -1">
+                      {{ label.substring(0, label.indexOf(searchValue)) }}
+                      <span style="color: #f50">{{ searchValue }}</span>
+                      {{
+                        label.substring(
+                          label.indexOf(searchValue) + searchValue.length,
+                        )
+                      }}
+                    </span>
+
+                    <span v-else>
+                      <span>{{ data }}</span>
+                    </span>
                   </span>
-                </span>
+                </div>
               </div>
             </template>
           </Tree>
@@ -138,5 +156,12 @@ onMounted(loadChannelTree);
     background: url('/src/assets/tree/playering.png') no-repeat;
     background-size: 100% 100%;
   }
+
+  .offLine {
+    width: 100%;
+    height: 100%;
+    background: url('/src/assets/tree/player-err.png') no-repeat;
+    background-size: 100% 100%;
+  }
 }
 </style>

apps/web-antd/vite.config.mts

@@ -27,7 +27,7 @@ export default defineConfig(async () => {
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/api/, ''),
             // mock代理目标地址
-            target: 'http://localhost:8080',
+            target: 'http://183.230.235.66:11010/api',
             ws: true,
           },
         },