feat 默认app_title

Co-authored-by: Copilot <copilot@github.com>

.env.development

@@ -35,4 +35,6 @@ VITE_APP_WEBSOCKET = false
 # sse 开关
 VITE_APP_SSE = true
 
-VITE_BASE_API = "http://47.104.208.94:8089"
+# http://192.168.0.214:8089
+# VITE_BASE_API = "http://47.104.208.94:8089"
+VITE_BASE_API = "http://47.104.215.165:8080"

.env.production

@@ -38,4 +38,4 @@ VITE_APP_WEBSOCKET = false
 # sse 开关
 VITE_APP_SSE = true
 
-VITE_BASE_API = "http://47.104.208.94:8089"
+VITE_BASE_API = "http://47.104.215.165:8089"

.eslintrc-auto-import.json

@@ -5,10 +5,6 @@
     "ComputedRef": true,
     "DirectiveBinding": true,
     "EffectScope": true,
-    "ElLoading": true,
-    "ElMessage": true,
-    "ElMessageBox": true,
-    "ElNotification": true,
     "ExtractDefaultPropTypes": true,
     "ExtractPropTypes": true,
     "ExtractPublicPropTypes": true,

.github/copilot-instructions.md

@@ -0,0 +1,25 @@
+# RTK — Token-Optimized CLI
+
+**rtk** is a CLI proxy that filters and compresses command outputs, saving 60-90% tokens.
+
+## Rule
+
+Always prefix shell commands with `rtk`:
+
+```bash
+# Instead of:              Use:
+git status                 rtk git status
+git log -10                rtk git log -10
+cargo test                 rtk cargo test
+docker ps                  rtk docker ps
+kubectl get pods           rtk kubectl pods
+```
+
+## Meta commands (use directly)
+
+```bash
+rtk gain              # Token savings dashboard
+rtk gain --history    # Per-command savings history
+rtk discover          # Find missed rtk opportunities
+rtk proxy <cmd>       # Run raw (no filtering) but track usage
+```

.github/hooks/rtk-rewrite.json

@@ -0,0 +1,12 @@
+{
+  "hooks": {
+    "PreToolUse": [
+      {
+        "type": "command",
+        "command": "rtk hook copilot",
+        "cwd": ".",
+        "timeout": 5
+      }
+    ]
+  }
+}

.gitignore

@@ -13,6 +13,7 @@ selenium-debug.log
 
 # Editor directories and files
 .claude
+.mimocode
 .idea
 .vscode
 *.suo

.npmrc

@@ -0,0 +1 @@
+registry = https://registry.npmmirror.com

README.md

@@ -7,27 +7,20 @@
 ## 配套后端代码仓库地址
 
 | 介绍              | 项目名           | 项目地址                                                                                                                                                                       |
-|------------|:-----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| ----------------- | :--------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | 🔥 分布式集群框架 | RuoYi-Vue-Plus   | - [Gitee](https://gitee.com/dromara/RuoYi-Vue-Plus)<br> - [GitHub](https://github.com/dromara/RuoYi-Vue-Plus)<br> - [GitCode](https://gitcode.com/dromara/RuoYi-Vue-Plus)      |
 | 🔥 微服务框架     | RuoYi-Cloud-Plus | - [Gitee](https://gitee.com/dromara/RuoYi-Cloud-Plus)<br>- [GitHub](https://github.com/dromara/RuoYi-Cloud-Plus)<br> - [GitCode](https://gitcode.com/dromara/RuoYi-Cloud-Plus) |
 
 ## 分支说明
 
-- ts分支(稳定发布主分支 生产可用)
+- main分支(稳定发布主分支 生产可用)
 - dev分支(开发分支 开发过程中使用)
 
 ## 前端运行
 
 ```bash
-# 安装依赖
+# 启动命令
-npm install --registry=https://registry.npmmirror.com
+./start.sh
-
-# 启动服务
-npm run dev
-
-# 构建生产环境
-npm run build:prod
-
 # 前端访问地址 http://localhost:80
 ```
 

package.json

@@ -8,6 +8,7 @@
   "type": "module",
   "packageManager": "pnpm@10.34.1",
   "scripts": {
+    "preinstall": "npx only-allow pnpm",
     "dev": "vite serve --mode development",
     "build:prod": "vite build --mode production",
     "build:dev": "vite build --mode development",

src/api/video/index.ts

@@ -22,8 +22,8 @@ export const listDemo = (deviceId?: string | number) => {
  */
 export const addDemo = (data: any) => {
   return request({
-    url: '/haikang/isup/stream/live/stop',
+    url: `/haikang/isup/stream/live/stop?id=${data}`,
-    method: 'get',
+    method: 'get'
-    params: data
+    // params: data
   });
 };

src/layout/components/Navbar.vue

@@ -13,33 +13,21 @@
     </template>
     <div class="right-menu flex align-center">
       <div v-if="appStore.device !== 'mobile'">
-        <!-- <el-select
-          v-if="userId === 1 && tenantEnabled"
-          v-model="companyName"
-          class="min-w-244px mr-2"
-          clearable
-          filterable
-          reserve-keyword
-          :placeholder="proxy.$t('navbar.selectTenant')"
-          @change="dynamicTenantEvent"
-          @clear="dynamicClearEvent"
-        >
-          <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option>
-          <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
-        </el-select> -->
-
         <search-menu ref="searchMenuRef" />
-        <!-- <el-tooltip content="搜索" effect="dark" placement="bottom">
-          <div class="right-menu-item hover-effect" @click="openSearchMenu">
-            <svg-icon class-name="search-icon" icon-class="search" />
       </div>
-        </el-tooltip> -->
+      <!-- 消息 - 移到 v-if 外面，手机端也能显示 -->
-        <!-- 消息 -->
       <el-tooltip content="警报" effect="dark" placement="bottom">
         <div style="display: flex; align-items: center" class="mr-[30px]">
-            <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="400" :persistent="false">
+          <el-popover
+            placement="bottom"
+            transition="el-zoom-in-top"
+            :width="400"
+            :persistent="false"
+            trigger="click"
+            v-model:visible="popoverVisible"
+          >
             <template #reference>
-                <el-badge :value="warningListStore.warningListTotal > 0 ? warningListStore.warningListTotal : ''" :max="999">
+              <el-badge :value="infoData" :max="9999">
                 <div class="right-menu-item hover-effect" @click="goToWarningList">
                   <el-icon><BellFilled /></el-icon>
                 </div>
@@ -51,26 +39,6 @@
           </el-popover>
         </div>
       </el-tooltip>
-        <!-- <el-tooltip content="Github" effect="dark" placement="bottom">
-          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-        <el-tooltip :content="proxy.$t('navbar.document')" effect="dark" placement="bottom">
-          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-        <el-tooltip :content="proxy.$t('navbar.full')" effect="dark" placement="bottom">
-          <screenfull id="screenfull" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-        <el-tooltip :content="proxy.$t('navbar.language')" effect="dark" placement="bottom">
-          <lang-select id="lang-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-        <el-tooltip :content="proxy.$t('navbar.layoutSize')" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip> -->
-      </div>
       <div class="avatar-container">
         <el-dropdown class="right-menu-item hover-effect" trigger="click" @command="handleCommand">
           <div class="avatar-wrapper">
@@ -123,6 +91,9 @@ const noticeStore = storeToRefs(useNoticeStore());
 const newNotice = ref(<number>0);
 const { warningList, warningListTotal } = storeToRefs(warningListStore);
 
+const infoData = ref(warningListStore.warningListTotal ?? 0);
+const popoverVisible = ref(false);
+
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const userId = ref(userStore.userId);
@@ -213,8 +184,14 @@ const handleCommand = (command: string) => {
 //用深度监听 消息
 watch(
   () => noticeStore.state.value.notices,
-  (newVal) => {
+  async (newVal) => {
     newNotice.value = newVal.filter((item: any) => !item.read).length;
+    //监听到消息变化，刷新告警列表
+    await warningListStore.getWarningList({
+      status: 0,
+      pageNum: 1,
+      pageSize: 300
+    });
   },
   { deep: true }
 );
@@ -239,8 +216,38 @@ onMounted(() => {
   });
 });
 onMounted(() => {
-  warningListStore.getWarningList();
+  warningListStore.getWarningList({
+    status: 0,
+    pageNum: 1,
+    pageSize: 300
   });
+});
+
+//监听数据变化
+watch(
+  () => warningListStore.warningListTotal,
+  (newVal) => {
+    infoData.value = newVal;
+  },
+  { deep: true }
+);
+// 告警数据变化时自动弹出弹窗
+// 当 isNotice 变为 true 时弹出弹窗，并重置为 false
+// let noticeFirstLoad = true; //解决初始化时弹出弹窗问题
+watch(
+  () => noticeStore.state.value.isNotice,
+  (newVal) => {
+    // if (noticeFirstLoad) {
+    //   noticeFirstLoad = false;
+    //   return;
+    // }
+    if (newVal) {
+      noticeStore.state.value.isNotice = false;
+      popoverVisible.value = true;
+    }
+  },
+  { deep: true }
+);
 </script>
 
 <style lang="scss" scoped>

src/layout/components/Sidebar/Logo.vue

@@ -2,11 +2,11 @@
   <div class="sidebar-logo-container" :class="{ collapse: collapse }">
     <transition :enter-active-class="proxy?.animate.logoAnimate.enter" mode="out-in">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logoUrl" class="sidebar-logo" />
+        <img v-if="showLogoImage" :src="logoUrl" class="sidebar-logo" />
         <h1 v-else class="sidebar-title">{{ logoName }}</h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logoUrl" class="sidebar-logo" />
+        <img v-if="showLogoImage" :src="logoUrl" class="sidebar-logo" />
         <h1 class="sidebar-title">{{ logoName }}</h1>
       </router-link>
     </transition>
@@ -15,11 +15,9 @@
 
 <script setup lang="ts">
 import variables from '@/assets/styles/variables.module.scss';
-import logo from '@/assets/logo/logo.png';
 import { useSettingsStore } from '@/store/modules/settings';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 import { NavTypeEnum } from '@/enums/NavTypeEnum';
-import { getDemo } from '@/api/systemList/index';
 
 defineProps({
   collapse: {
@@ -28,13 +26,15 @@ defineProps({
   }
 });
 
-const title = import.meta.env.VITE_APP_LOGO_TITLE;
 const settingsStore = useSettingsStore();
 const sideTheme = computed(() => settingsStore.sideTheme);
+const logoUrl = computed(() => settingsStore.appLogoUrl || '');
+const logoName = computed(() => settingsStore.appTitle || import.meta.env.VITE_APP_LOGO_TITLE || 'RuoYi-Vue-Plus');
+const showLogoImage = computed(() => Boolean(logoUrl.value));
 
 // 获取Logo背景色
 const getLogoBackground = computed(() => {
-  if (settingsStore.isDark) {
+  if (settingsStore.dark) {
     return 'var(--sidebar-bg)';
   }
   if (settingsStore.navType == NavTypeEnum.TOP) {
@@ -45,7 +45,7 @@ const getLogoBackground = computed(() => {
 
 // 获取Logo文字颜色
 const getLogoTextColor = computed(() => {
-  if (settingsStore.isDark) {
+  if (settingsStore.dark) {
     return 'var(--sidebar-text)';
   }
   if (settingsStore.navType == NavTypeEnum.TOP) {
@@ -53,18 +53,6 @@ const getLogoTextColor = computed(() => {
   }
   return sideTheme.value === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor;
 });
-
-// 获取Logo图片
-const logoUrl = ref();
-const logoName = ref();
-onMounted(() => {
-  getDemo().then((res) => {
-    console.log('系统11111111111', res);
-
-    logoName.value = res.data.name;
-    logoUrl.value = res.data.url;
-  });
-});
 </script>
 
 <style lang="scss" scoped>

src/layout/components/TagsView/index.vue

@@ -95,10 +95,13 @@ const isLastView = () => {
 };
 const filterAffixTags = (routes: RouteRecordRaw[], basePath = '') => {
   let tags: RouteLocationNormalized[] = [];
+  const seen = new Set<string>();
 
   routes.forEach((route) => {
     if (route.meta && route.meta.affix) {
       const tagPath = getNormalPath(basePath + '/' + route.path);
+      if (!seen.has(tagPath)) {
+        seen.add(tagPath);
         tags.push({
           hash: '',
           matched: [],
@@ -111,6 +114,7 @@ const filterAffixTags = (routes: RouteRecordRaw[], basePath = '') => {
           meta: { ...route.meta }
         });
       }
+    }
     if (route.children) {
       const tempTags = filterAffixTags(route.children, route.path);
       if (tempTags.length >= 1) {
@@ -124,7 +128,6 @@ const initTags = () => {
   const res = filterAffixTags(routes.value);
   affixTags.value = res;
   for (const tag of res) {
-    // Must have tag name
     if (tag.name) {
       useTagsViewStore().addVisitedView(tag);
     }
@@ -136,6 +139,10 @@ const addTags = () => {
     route.meta.title = route.query.title as string;
   }
   if (name) {
+    // 如果 visitedViews 中已有同 title 的固定标签（affix），不再添加普通标签
+    if (visitedViews.value.some((v) => v.meta?.affix && v.title === route.meta?.title)) return;
+    // 常规去重：已有同 path 或 fullPath 的标签则跳过
+    if (visitedViews.value.some((v) => v.path === route.path || v.fullPath === route.fullPath)) return;
     useTagsViewStore().addView(route as any);
   }
 };

src/layout/components/notice/index.vue

@@ -34,12 +34,12 @@
     >
       <template #header>
         <div class="flex w-full items-center justify-between gap-2 min-w-0 pr-8">
-          <span class="truncate">实时监控</span>
+          <span class="truncate">实时监控-{{ monitoringArea }}监控</span>
         </div>
       </template>
       <div class="monitor-video-wrap">
         <div class="monitor-video-stack">
-          <video ref="monitorVideoRef" class="monitor-video" controls preload="metadata" :src="monitorVideoUrl">您的浏览器不支持视频播放</video>
+          <video ref="monitorVideoRef" class="monitor-video" preload="metadata">您的浏览器不支持视频播放</video>
         </div>
       </div>
     </el-dialog>
@@ -53,16 +53,18 @@ import { initHls, destroyHls } from '@/utils/video';
 import { onBeforeRouteLeave } from 'vue-router';
 import { useWarningListStore } from '@/store/modules/warnningList';
 import type { WarningListResult } from '@/api/WarningList/types';
+import { addDemo } from '@/api/video/index';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
-import { nextTick } from 'vue';
+import { nextTick, onUnmounted } from 'vue';
 import { useVideosStore } from '@/store/modules/video';
 const videosStore = useVideosStore();
+const monitoringArea = ref<string>('');
 
 const warningListStore = useWarningListStore();
 const noticeStore = useNoticeStore();
-const { getWarningList, hanldeAction } = warningListStore;
+const { getWarningList, handleAction } = warningListStore;
 const { warningListTotal, warningList } = storeToRefs(warningListStore);
 
 // const props = defineProps<{
@@ -72,6 +74,18 @@ const warningListRows = computed(() => warningList.value?.rows || []);
 const { readAll } = useNoticeStore();
 const monitorVideoRef = ref<HTMLVideoElement>();
 
+const getList = async () => {
+  try {
+    await getWarningList({
+      status: 0,
+      pageNum: 1,
+      pageSize: 300
+    });
+  } catch (error) {
+    console.error('获取消息列表失败', error);
+  }
+};
+
 // 定义变量内容
 const state = reactive({
   loading: false
@@ -96,7 +110,23 @@ const parseNoticeItem = (notice: any) => {
 };
 
 //查看画面
+const currentDeviceId = ref<string | number>();
+
+/** 刷新视频（卡死时自动调用） */
+const handleRefresh = async () => {
+  if (!currentDeviceId.value) return;
+  destroyHls(monitorVideoRef);
+  monitorVideoUrl.value = '';
+  await videosStore.getVideos(currentDeviceId.value);
+  monitorVideoUrl.value = videosStore.hisUrl || '';
+  if (monitorVideoUrl.value) {
+    await nextTick();
+    initHls(monitorVideoUrl, monitorVideoRef, () => dialog.visible, handleRefresh);
+  }
+};
+
 const handleSee = async (row: any) => {
+  currentDeviceId.value = row?.deviceId;
   const videoId = row?.deviceId;
   console.log('查看画面', row, 'deviceId', videoId);
   if (!videoId) {
@@ -105,13 +135,22 @@ const handleSee = async (row: any) => {
   }
   await videosStore.getVideos(videoId);
   monitorVideoUrl.value = videosStore.hisUrl;
+  monitoringArea.value = row.monitoringArea;
   dialog.visible = true;
   await nextTick();
-  initHls(monitorVideoUrl, monitorVideoRef);
+  initHls(monitorVideoUrl, monitorVideoRef, () => dialog.visible, handleRefresh);
-  await hanldeAction(row.id);
+  await handleAction(row.id);
+  await getList();
 };
 
 const handleMonitorDialogClose = async (done: () => void) => {
+  try {
+    addDemo(currentDeviceId.value as string).then(() => {
+      console.log('关闭视频111111');
+    });
+  } catch (error) {
+    console.log('关闭视频22222222', error);
+  }
   // 卸载 Hls 与清理 video
   destroyHls(monitorVideoRef);
   done();
@@ -150,7 +189,7 @@ watch(
   (newNotices) => {
     const filteredNotices = [...newNotices].map(parseNoticeItem);
     newsList.value = filteredNotices;
-    console.log('监听消息队列', newsList.value);
+    // console.log('监听消息队列', newsList.value);
   },
   { deep: true }
 );
@@ -194,10 +233,16 @@ onMounted(() => {
 
 onBeforeRouteLeave(() => {
   dialog.visible = false;
+  destroyHls(monitorVideoRef);
   monitorVideoUrl.value = '';
 });
+
+onUnmounted(() => {
+  destroyHls(monitorVideoRef);
+});
+
 onMounted(() => {
-  getWarningList();
+  getList();
   console.log('111111111111111111111_warningList.value', warningList.value);
 });
 </script>

src/main.ts

@@ -30,6 +30,8 @@ import './permission';
 
 // 国际化
 import i18n from '@/lang/index';
+import { useSettingsStore } from '@/store/modules/settings';
+import { getDemo } from '@/api/systemList/index';
 
 // vxeTable
 import VXETable from 'vxe-table';
@@ -54,4 +56,24 @@ app.use(plugins);
 // 自定义指令
 directive(app);
 
+const settingsStore = useSettingsStore();
+getDemo()
+  .then((res) => {
+    const name = res?.data?.name;
+    const url = res?.data?.url;
+    if (name || url) {
+      settingsStore.setSystemInfo(name || '', url || '');
+
+      if (url) {
+        const link = document.querySelector("link[rel='icon']") as HTMLLinkElement | null;
+        if (link) {
+          link.href = url;
+        }
+      }
+    }
+  })
+  .catch(() => {
+    // ignore
+  });
+
 app.mount('#app');

src/store/modules/notice.ts

@@ -10,7 +10,8 @@ interface NoticeItem {
 
 export const useNoticeStore = defineStore('notice', () => {
   const state = reactive({
-    notices: [] as NoticeItem[]
+    notices: [] as NoticeItem[],
+    isNotice: false as boolean
   });
 
   const addNotice = (notice: NoticeItem) => {

src/store/modules/settings.ts

@@ -19,6 +19,8 @@ export const useSettingsStore = defineStore('setting', () => {
     radiusBase: defaultSettings.radiusBase
   });
   const title = ref<string>(defaultSettings.title);
+  const appTitle = ref<string>(defaultSettings.title);
+  const appLogoUrl = ref<string>('');
   const theme = ref<string>(storageSetting.value.theme);
   const sideTheme = ref<string>(storageSetting.value.sideTheme);
   const showSettings = ref<boolean>(defaultSettings.showSettings);
@@ -36,8 +38,17 @@ export const useSettingsStore = defineStore('setting', () => {
     title.value = value;
     useDynamicTitle();
   };
+
+  const setSystemInfo = (name: string, url: string) => {
+    appTitle.value = name || defaultSettings.title;
+    appLogoUrl.value = url || '';
+    useDynamicTitle();
+  };
+
   return {
     title,
+    appTitle,
+    appLogoUrl,
     theme,
     sideTheme,
     showSettings,
@@ -50,6 +61,7 @@ export const useSettingsStore = defineStore('setting', () => {
     dark,
     navType,
     radiusBase,
-    setTitle
+    setTitle,
+    setSystemInfo
   };
 });

src/store/modules/tagsView.ts

@@ -37,7 +37,12 @@ export const useTagsViewStore = defineStore('tagsView', () => {
     });
   };
   const addVisitedView = (view: RouteLocationNormalized): void => {
-    if (visitedViews.value.some((v: RouteLocationNormalized) => v.path === view.path)) return;
+    // 同时通过 path、fullPath、name 去重
+    if (visitedViews.value.some((v: RouteLocationNormalized) =>
+      v.path === view.path ||
+      v.fullPath === view.fullPath ||
+      (v.name && view.name && v.name === view.name)
+    )) return;
     visitedViews.value.push(
       Object.assign({}, view, {
         title: view.meta?.title || 'no-name'

src/store/modules/warnningList.ts

@@ -1,36 +1,45 @@
+/** 此数据源跟表列不一致,(后端接口重复使用因逻辑复杂, 经商定不动后端接口, 设置此数据源) 适用于消息 */
+/** 抽取公用代码更加复杂模糊-暂存数据源 */
 import { listDemo, updateDemo } from '@/api/WarningList/index';
 import { defineStore } from 'pinia';
 import { ref, computed } from 'vue';
+import { any } from 'vue-types';
 
 export const useWarningListStore = defineStore('warningListStore', () => {
   // --- State (状态) ---
-  // 相当于 Vuex 中的 state，用 ref 或 reactive 定义
+  const warningList = ref();
-  const warningList = ref([]);
   const warningListTotal = ref(0);
   // --- Getters (计算属性) ---
-  // 相当于 Vuex 中的 getters，直接用 computed 定义
 
   // --- Actions (动作) ---
-  // 相当于 Vuex 中的 actions/mutations，直接写同步或异步函数
+  async function getWarningList(query?: any) {
-  async function getWarningList(deviceId?: string | number) {
     try {
       const response = await listDemo({
-        deviceId,
+        ...query
-        status: 0,
+        // deviceId,
-        pageNum: 1,
+        // status: 0,
-        pageSize: 300
+        // pageNum: 1,
+        // pageSize: 10
       });
-      warningList.value = response.data || [];
+      warningList.value = response.data;
       warningListTotal.value = response.data.total || 0;
     } catch (error) {
       console.error('获取消息列表失败', error);
     }
   }
+  async function handleAction(ids: string | number | Array<string | number>) {
+    try {
+      await updateDemo(ids);
+    } catch (error) {
+      console.error('处理告警失败', error);
+    }
+  }
 
   //  核心点：必须把需要暴露出去的变量和方法 return 出去！
   return {
     warningList,
     warningListTotal,
-    getWarningList
+    getWarningList,
+    handleAction
   };
 });

src/utils/dynamicTitle.ts

@@ -6,9 +6,12 @@ import { useSettingsStore } from '@/store/modules/settings';
  */
 export const useDynamicTitle = () => {
   const settingsStore = useSettingsStore();
+  const pageTitle = settingsStore.title || (defaultSettings.title as string);
+  const appTitle = settingsStore.appTitle || (defaultSettings.title as string);
+
   if (settingsStore.dynamicTitle) {
-    document.title = settingsStore.title + ' - ' + import.meta.env.VITE_APP_TITLE;
+    document.title = `${pageTitle} - ${appTitle}`;
   } else {
-    document.title = defaultSettings.title as string;
+    document.title = appTitle;
   }
 };

src/utils/sse.ts

@@ -1,9 +1,12 @@
 import { getToken } from '@/utils/auth';
 import { ElNotification } from 'element-plus';
 import { useNoticeStore } from '@/store/modules/notice';
+import { toRefs } from 'vue';
 
 // 初始化
 export const initSSE = (url: any) => {
+  const noticeStore = useNoticeStore();
+  const { isNotice, notices } = toRefs(noticeStore.state);
   if (import.meta.env.VITE_APP_SSE === 'false') {
     return;
   }
@@ -28,11 +31,11 @@ export const initSSE = (url: any) => {
     if (!data.value) return;
 
     // 打印接收到的 SSE 消息
-    console.log('=== SSE 接收到消息 ===');
+    // console.log('=== SSE 接收到消息 ===');
-    console.log('消息内容:', data.value);
+    // console.log('消息内容:', data.value);
-    console.log('消息类型:', typeof data.value);
+    // console.log('消息类型:', typeof data.value);
-    console.log('接收时间:', new Date().toLocaleString());
+    // console.log('接收时间:', new Date().toLocaleString());
-    console.log('=====================');
+    // console.log('=====================');
 
     useNoticeStore().addNotice({
       message: data.value,
@@ -40,12 +43,13 @@ export const initSSE = (url: any) => {
       time: new Date().toLocaleString()
     });
     const displayMessage = data.value.split('|')[0].trim();
-    ElNotification({
+    // ElNotification({
-      title: '消息',
+    //   title: '消息',
-      message: displayMessage,
+    //   message: displayMessage,
-      type: 'success',
+    //   type: 'success',
-      duration: 3000
+    //   duration: 3000
-    });
+    // });
+    noticeStore.state.isNotice = true;
     data.value = null;
   });
 };

src/utils/video.ts

@@ -1,62 +1,255 @@
 import Hls from 'hls.js';
-let hlsInstance: Hls | null = null;
 
-export const initHls = (monitorVideoUrl, monitorVideoRef) => {
+/**
+ * 每个播放器实例维护自己的状态，避免全局单例互相踩踏
+ */
+interface HlsPlayerState {
+  hls: Hls;
+  video: HTMLVideoElement;
+  /** live edge 追赶定时器 */
+  syncTimer: ReturnType<typeof setInterval> | null;
+  /** 卡死检测定时器 */
+  stallTimer: ReturnType<typeof setInterval> | null;
+  /** 连续加载失败计数 */
+  consecutiveFailures: number;
+  /** 是否已销毁 */
+  destroyed: boolean;
+}
+
+const playerStates = new WeakMap<HTMLVideoElement, HlsPlayerState>();
+
+/**
+ * 直播流追赶逻辑：检测播放位置与 live edge 的差距，超过阈值就 seek
+ */
+function startLiveSync(state: HlsPlayerState) {
+  const { hls, video } = state;
+  state.syncTimer = setInterval(() => {
+    if (state.destroyed) return;
+    try {
+      const buffered = video.buffered;
+      if (buffered.length === 0) return;
+      // 取最后一个 buffer range 的 end 作为 live edge
+      const liveEdge = buffered.end(buffered.length - 1);
+      const currentTime = video.currentTime;
+      const gap = liveEdge - currentTime;
+      // 超过 6 秒就 seek 到 live edge 附近
+      if (gap > 300) {
+        video.currentTime = liveEdge - 2;
+      }
+    } catch {
+      // ignore
+    }
+  }, 60 * 1000);
+}
+
+function stopLiveSync(state: HlsPlayerState) {
+  if (state.syncTimer) {
+    clearInterval(state.syncTimer);
+    state.syncTimer = null;
+  }
+  if (state.stallTimer) {
+    clearInterval(state.stallTimer);
+    state.stallTimer = null;
+  }
+}
+
+export const initHls = (monitorVideoUrl, monitorVideoRef, isDialogVisible?: () => boolean, onStall?: () => void) => {
+  console.log('isDialogVisible', isDialogVisible);
   const url = monitorVideoUrl.value;
   const video = monitorVideoRef.value;
   if (!url || !video) return;
 
-  // 销毁已有实例
+  // 先销毁该 video 元素上已有的实例（不再操作全局变量）
-  if (hlsInstance) {
+  const existingState = playerStates.get(video);
+  if (existingState) {
     try {
-      hlsInstance.destroy();
+      stopLiveSync(existingState);
-    } catch (e) {
+      existingState.destroyed = true;
+      existingState.hls.destroy();
+    } catch {
       // ignore
     }
-    hlsInstance = null;
+    playerStates.delete(video);
   }
 
   if (Hls.isSupported()) {
-    const hls = new Hls();
+    const hls = new Hls({
+      // ★ ZLM 注册流需要时间，配置自动重试
+      manifestLoadingMaxRetry: 5,
+      manifestLoadingRetryDelay: 1000,
+      manifestLoadingTimeOut: 5000,
+      levelLoadingMaxRetry: 5,
+      levelLoadingRetryDelay: 500,
+      lowLatencyMode: false,
+      startLevel: -1,
+      // ★ 直播流关键配置
+      liveSyncDurationCount: 3,
+      liveDurationInfinity: true,
+      // 缓冲区上限，防止无限增长导致内存爆掉
+      maxBufferLength: 5,
+      maxMaxBufferLength: 10,
+      // manifest 加载：最多重试 5 次，每次间隔 1 秒，单次超时 10 秒
+      // manifestLoadingMaxRetry: 5,
+      // manifestLoadingRetryDelay: 1000,
+      // manifestLoadingTimeOut: 10000,
+      // // level（清晰度）加载：最多重试 3 次，每次间隔 1 秒，单次超时 15 秒
+      // levelLoadingMaxRetry: 3,
+      // levelLoadingRetryDelay: 1000,
+      // levelLoadingTimeOut: 15000,
+      // lowLatencyMode: true,
+      // startLevel: -1,
+      // // 直播同步：滞后 2 个分片时自动追赶 live edge
+      // liveSyncDurationCount: 2,
+      // liveDurationInfinity: true,
+      // // 不保留已播放过的旧缓冲，减少内存占用
+      backBufferLength: 0
+      // // 缓冲区上限 5~10 秒，限制同时发出的分片请求数，防止占满连接池
+      // maxBufferLength: 5,
+      // maxMaxBufferLength: 10,
+      // // 分片加载：最多重试 3 次，每次间隔 2 秒，单次超时 15 秒
+      // fragLoadingMaxRetry: 3,
+      // fragLoadingRetryDelay: 2000,
+      // fragLoadingTimeOut: 15000
+      // // 允许缓冲区内最大 0.5 秒的空洞，避免小卡顿触发不必要的重载
+      // maxBufferHole: 0.5
+    });
+
     hls.loadSource(url);
     hls.attachMedia(video);
+
     hls.on(Hls.Events.MANIFEST_PARSED, () => {
-      // 自动播放（若浏览器允许）
       try {
         video.play().catch(() => {});
-      } catch (e) {}
+      } catch {
+        // ignore
+      }
+    });
+
+    const state: HlsPlayerState = {
+      hls,
+      video,
+      syncTimer: null,
+      stallTimer: null,
+      consecutiveFailures: 0,
+      destroyed: false
+    };
+    playerStates.set(video, state);
+
+    /**
+     * 完善的错误处理
+     */
+    hls.on(Hls.Events.ERROR, (event, data) => {
+      // 对话框已关闭则不再恢复
+      if (isDialogVisible && !isDialogVisible()) return;
+
+      if (data.fatal) {
+        switch (data.type) {
+          case Hls.ErrorTypes.NETWORK_ERROR:
+            if (data.details === 'manifestLoadError' || data.details === 'manifestLoadTimeOut') {
+              //console.error('网络错误');
+              ElMessage.error('[HLS]网络错误，尝试恢复...');
+              onStall();
+            } else {
+              ElMessage.error('[HLS] 网络错误，自动恢复...');
+              hls.startLoad();
+            }
+            break;
+          case Hls.ErrorTypes.MEDIA_ERROR:
+            ElMessage.error('[HLS] 媒体解码错误，尝试恢复...');
+            hls.recoverMediaError();
+            break;
+          default:
+            ElMessage.error('[HLS] 不可恢复的错误，销毁实例');
+            state.destroyed = true;
+            stopLiveSync(state);
+            hls.destroy();
+            playerStates.delete(video);
+            break;
+        }
+      } else {
+        // ★ 非致命错误也处理，防止问题累积
+        // 记录加载失败
+        state.consecutiveFailures++;
+        switch (data.type) {
+          case Hls.ErrorTypes.NETWORK_ERROR:
+            // 分片加载失败等 → 重新加载
+            if (data.details === 'fragLoadError' || data.details === 'fragLoadTimeOut') {
+              ElMessage.error(`[HLS] 分片加载问题 (${data.details})，第 ${state.consecutiveFailures} 次失败，尝试恢复...`);
+              hls.startLoad(hls.currentLevel);
+            }
+            break;
+          case Hls.ErrorTypes.MEDIA_ERROR:
+            if (data.details === 'bufferAppendError' || data.details === 'bufferFullError') {
+              ElMessage.error(`[HLS] 缓冲区问题 (${data.details})，尝试恢复...`);
+              hls.recoverMediaError();
+            }
+            break;
+          default:
+            ElMessage.error(`[HLS] 非致命错误: ${data.type} - ${data.details}`);
+            break;
+        }
+      }
+    });
+
+    /**
+     * 卡死检测：每 10 秒检查一次是否还在正常加载分片
+     * 如果连续多次加载失败，触发 onStall 回调（自动刷新）
+     */
+    state.stallTimer = setInterval(() => {
+      if (state.destroyed || !onStall) return;
+      if (state.consecutiveFailures >= 3) {
+        ElMessage.error(`[HLS] 连续 ${state.consecutiveFailures} 次加载失败，触发自动刷新`);
+        state.consecutiveFailures = 0;
+        onStall();
+      }
+    }, 10000);
+
+    // 播放开始后启动 live edge 追赶
+    hls.on(Hls.Events.FRAG_BUFFERED, () => {
+      // 加载成功，重置失败计数
+      state.consecutiveFailures = 0;
+      if (!state.syncTimer) {
+        startLiveSync(state);
+      }
     });
-    hlsInstance = hls;
   } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
-    // Safari/原生支持 HLS
+    // Safari 原生 HLS
     video.src = url;
     video.addEventListener('loadedmetadata', () => {
       try {
         video.play().catch(() => {});
-      } catch (e) {}
+      } catch {
+        // ignore
+      }
     });
   } else {
-    //proxy?.$modal.msgWarning('当前浏览器不支持 HLS 播放');
     ElMessage.error('当前浏览器不支持 HLS 播放');
   }
 };
 
 export const destroyHls = (monitorVideoRef) => {
-  try {
-    if (hlsInstance) {
-      hlsInstance.destroy();
-      hlsInstance = null;
-    }
-  } catch (e) {}
   const video = monitorVideoRef.value;
   if (video) {
+    // 销毁该 video 元素上的 HLS 实例
+    const state = playerStates.get(video);
+    if (state) {
+      try {
+        stopLiveSync(state);
+        state.destroyed = true;
+        state.hls.destroy();
+      } catch {
+        // ignore
+      }
+      playerStates.delete(video);
+    }
     // 清理原生 src，避免残留
     try {
       video.pause();
       video.removeAttribute('src');
-      // 对某些浏览器，需要调用 load() 来重置 media element
       if (typeof video.load === 'function') video.load();
-    } catch (e) {}
+    } catch (e) {
+      console.log('Error in destroyHls:', e);
+    }
   }
 };
 

src/views/WarningList/list.vue

@@ -39,20 +39,19 @@
       <template #header>
         <el-row :gutter="10" class="flex justify-end mb8">
           <el-col :span="1.5">
-            <el-button v-hasPermi="['demo:demo:edit']" type="success" plain icon="Edit" :disabled="multiple" @click="handleBatchProcess"
+            <el-button type="success" plain icon="Edit" :disabled="multiple" @click="handleBatchProcess">批量处理</el-button>
-              >批量处理</el-button
-            >
           </el-col>
         </el-row>
       </template>
 
       <el-table v-loading="loading" border :data="demoList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column type="selection" width="55" align="center" :selectable="checkSelectable" />
         <el-table-column label="报警编号" align="center" prop="alarmCode" width="180" />
         <el-table-column label="报警时间" align="center" prop="alarmTime" min-width="170" />
         <el-table-column label="所属设备" align="center" prop="deviceName" min-width="120" show-overflow-tooltip />
         <el-table-column label="报警区域" align="center" prop="monitoringArea" min-width="120" show-overflow-tooltip />
-        <el-table-column label="报警图片" align="center" prop="alarmImage" min-width="120">
+        <!-- pay content  -->
+        <!-- <el-table-column label="报警图片" align="center" prop="alarmImage" min-width="120">
           <template #default="scope">
             <el-image
               v-if="scope.row.alarmImage"
@@ -64,7 +63,7 @@
             />
             <span v-else>暂无图片</span>
           </template>
-        </el-table-column>
+        </el-table-column> -->
         <el-table-column label="处理状态" align="center" prop="status" width="100">
           <template #default="scope">
             <el-tag v-if="scope.row.status === 0" type="warning">未处理</el-tag>
@@ -136,7 +135,7 @@ import { storeToRefs } from 'pinia';
 import { useWarningListStore } from '@/store/modules/warnningList';
 
 const warningListStore = useWarningListStore();
-const { getWarningList, hanldeAction } = warningListStore;
+const { getWarningList, handleAction } = warningListStore;
 const { warningListTotal, warningList } = storeToRefs(warningListStore);
 
 const deviceStore = useDeviceStore();
@@ -173,6 +172,7 @@ const initFormData: any = {
   processingTime: undefined
 };
 /* ?id=&deviceId=&pageSize=1&pageNum=1&beginTime=&endTime= */
+/** 查询参数 */
 const data = reactive({
   form: { ...initFormData },
   queryParams: {
@@ -193,27 +193,35 @@ const data = reactive({
 
 const { queryParams, form, rules, queryTime } = toRefs(data);
 
+/** 获取列表 */
 const getList = async () => {
   loading.value = true;
   try {
     const res = await listDemo(queryParams.value);
     demoList.value = res.data.rows;
     total.value = res.data.total;
+    await getWarningList({
+      status: 0,
+      pageNum: 1,
+      pageSize: 300
+    });
   } finally {
     loading.value = false;
   }
 };
 
+/** 取消按钮 */
 const cancel = () => {
   reset();
   dialog.visible = false;
 };
-
+/** 重置按钮 */
 const reset = () => {
   form.value = { ...initFormData };
   demoFormRef.value?.resetFields();
 };
 
+/** 查询按钮 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
   queryParams.value.beginTime = queryTime.value[0];
@@ -221,12 +229,13 @@ const handleQuery = () => {
   getList();
 };
 
+/** 重置按钮 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields();
   queryTime.value = [];
   handleQuery();
 };
-
+/** 多选框选中数据 */
 const handleSelectionChange = (selection: any) => {
   ids.value = selection.map((item) => item.id as string | number);
   multiple.value = !selection.length;
@@ -238,7 +247,7 @@ const handleUpdate = async (row: any) => {
 
   loading.value = true;
   try {
-    await updateDemo(row.id);
+    await handleAction(row.id);
     proxy?.$modal.msgSuccess('处理成功');
     await getList();
   } finally {
@@ -246,6 +255,11 @@ const handleUpdate = async (row: any) => {
   }
 };
 
+/** 检查行是否可选（已处理不可选） */
+const checkSelectable = (row: any) => {
+  return row.status !== 1;
+};
+
 /** 批量：确认后直接提交 */
 const handleBatchProcess = async () => {
   if (!ids.value.length) {
@@ -255,7 +269,7 @@ const handleBatchProcess = async () => {
   await proxy?.$modal.confirm('是否确认批量处理已选中的报警？');
   loading.value = true;
   try {
-    await updateDemo(ids.value);
+    await handleAction(ids.value);
     proxy?.$modal.msgSuccess('处理成功');
     await getList();
   } finally {
@@ -263,6 +277,7 @@ const handleBatchProcess = async () => {
   }
 };
 
+/** 提交按钮 */
 const submitForm = async () => {
   if (form.value.id == null) {
     proxy?.$modal.msgWarning('数据异常');
@@ -296,4 +311,11 @@ onMounted(() => {
   getList();
   getDeviceName();
 });
+
+//监听数据源变化，自动刷新列表
+watch(warningListTotal, async (newVal) => {
+  //console.log('监听到报警列表变化，自动刷新列表', newVal);
+  //数据源不同， 接口复用，请求多了一遍（不属于bug）
+  await getList();
+});
 </script>

src/views/equipmentList/list.vue

@@ -65,14 +65,121 @@
             <el-tag v-else>{{ scope.row.status ?? '-' }}</el-tag>
           </template> -->
         </el-table-column>
-        <el-table-column label="电池电量" align="center" prop="batteryLevel">
+        <!-- <el-table-column label="电池电量" align="center" prop="batteryLevel1" width="150">
           <template #default="scope">
-            <el-tag v-if="scope.row.batteryLevel">{{ scope.row.batteryLevel + '%' }}</el-tag>
+            <el-tag v-if="scope.row.batteryLevel1">左{{ scope.row.batteryLevel1 + '%' }}</el-tag>
-            <el-tag v-else type="info"> 未获取 </el-tag>
+            <el-tag v-if="scope.row.batteryLevel2" :style="scope.row.batteryLevel1 && scope.row.batteryLevel2 ? 'margin-left: 10px' : ''">
+              右{{ scope.row.batteryLevel2 + '%' }}
+            </el-tag>
+            <el-tag v-if="!scope.row.batteryLevel1 && !scope.row.batteryLevel2"> 未获取 </el-tag>
+          </template>
+        </el-table-column> -->
+        <el-table-column label="电池电量" align="center" width="160">
+          <template #default="scope">
+            <div v-if="scope.row.batteryLevel1 != null || scope.row.batteryLevel2 != null" class="battery-group">
+              <!-- 左电池 -->
+              <div v-if="scope.row.batteryLevel1 != null" class="battery-item">
+                <svg viewBox="0 0 56 20" width="56" height="20">
+                  <rect
+                    x="0"
+                    y="1"
+                    width="44"
+                    height="18"
+                    rx="4"
+                    ry="4"
+                    fill="none"
+                    :stroke="getBatteryColor(scope.row.batteryLevel1)"
+                    stroke-width="1.5"
+                  />
+                  <rect x="44" y="6" width="4" height="8" rx="2" ry="2" :fill="getBatteryColor(scope.row.batteryLevel1)" />
+                  <rect
+                    x="2"
+                    y="3"
+                    :width="Math.max((40 * scope.row.batteryLevel1) / 100, 0)"
+                    height="14"
+                    rx="2"
+                    ry="2"
+                    :fill="getBatteryColor(scope.row.batteryLevel1)"
+                    opacity="0.25"
+                  />
+                  <text
+                    x="24"
+                    y="11.5"
+                    text-anchor="middle"
+                    dominant-baseline="middle"
+                    font-size="2"
+                    :fill="getBatteryColor(scope.row.batteryLevel1)"
+                  >
+                    左{{ scope.row.batteryLevel1 }}%
+                  </text>
+                </svg>
+              </div>
+              <!-- 右电池 -->
+              <div v-if="scope.row.batteryLevel2 != null" class="battery-item">
+                <svg viewBox="0 0 56 20" width="56" height="20">
+                  <rect
+                    x="0"
+                    y="1"
+                    width="44"
+                    height="18"
+                    rx="4"
+                    ry="4"
+                    fill="none"
+                    :stroke="getBatteryColor(scope.row.batteryLevel2)"
+                    stroke-width="1.5"
+                  />
+                  <rect x="44" y="6" width="4" height="8" rx="2" ry="2" :fill="getBatteryColor(scope.row.batteryLevel2)" />
+                  <rect
+                    x="2"
+                    y="3"
+                    :width="Math.max((40 * scope.row.batteryLevel2) / 100, 0)"
+                    height="14"
+                    rx="2"
+                    ry="2"
+                    :fill="getBatteryColor(scope.row.batteryLevel2)"
+                    opacity="0.25"
+                  />
+                  <text
+                    x="24"
+                    y="11.5"
+                    text-anchor="middle"
+                    dominant-baseline="middle"
+                    font-size="2"
+                    :fill="getBatteryColor(scope.row.batteryLevel2)"
+                  >
+                    右{{ scope.row.batteryLevel2 }}%
+                  </text>
+                </svg>
+              </div>
+            </div>
+            <span v-else>未获取</span>
           </template>
         </el-table-column>
+        <!-- <el-table-column align="center" label="电量" prop="powerLevel" width="160">
+          <template #default="scope">
+            <div v-if="scope.row.powerLevel !== undefined && scope.row.powerLevel !== null && scope.row.powerLevel !== ''" class="power-level">
+              <svg class="power-level__icon" :class="getPowerLevelClass(scope.row.powerLevel)" viewBox="0 0 48 24" width="48" height="24">
+                <rect x="0" y="2" width="42" height="20" rx="4" ry="4" fill="none" stroke="currentColor" stroke-width="2" />
+
+                <rect x="42" y="8" width="4" height="8" rx="2" ry="2" fill="currentColor" />
+
+                <rect
+                  x="3"
+                  y="5"
+                  :width="Math.max((36 * formatPowerLevel(scope.row.powerLevel)) / 100, 0)"
+                  height="14"
+                  rx="2"
+                  ry="2"
+                  fill="currentColor"
+                />
+              </svg>
+              <span class="power-level__text">{{ formatPowerLevel(scope.row.powerLevel) }}%</span>
+            </div>
+            <span v-else>-</span>
+          </template>
+        </el-table-column> -->
         <el-table-column label="设备型号" align="center" prop="model" />
-        <el-table-column label="固件版本" align="center" prop="id" />
+        <el-table-column label="固件版本" align="center" prop="version" />
         <el-table-column label="是否绘制区域" align="center" prop="isDrawArea">
           <template #default="scope">
             <el-tag v-if="scope.row.isDrawArea === 1 || scope.row.isDrawArea === '1'">是</el-tag>
@@ -92,7 +199,7 @@
               @click="handleActivate(scope.row)"
               >唤醒设备</el-button
             >
-            <el-button type="primary" @click="handleDelete(scope.row)">删除</el-button>
+            <el-button :disabled="scope.row.status !== 2 && scope.row.status !== '2'" type="primary" @click="handleDelete(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -123,8 +230,10 @@
     <el-dialog v-model="dialog1.visible" class="monitor-dialog" :before-close="handleMonitorDialogClose" fullscreen destroy-on-close>
       <template #header>
         <div class="flex w-full items-center justify-between gap-2 min-w-0 pr-8">
-          <span class="truncate">实时监控</span>
+          <span class="truncate">{{ videoName }}-{{ monitoringArea }}监控</span>
           <div>
+            <!-- <el-button type="primary" class="shrink-0" @click="handleVideo(videosInfo)">切换摄像头</el-button> -->
+            <el-button type="primary" class="shrink-0" @click="handleRefresh">刷新</el-button>
             <el-button v-if="!seeSee" type="primary" class="shrink-0" @click="drawImage()">绘制区域</el-button>
             <el-button v-if="seeSee" type="primary" class="shrink-0" @click="clearImage()">清空区域</el-button>
             <el-button v-if="seeSee" type="primary" class="shrink-0" @click="saveImage()">保存区域</el-button>
@@ -133,7 +242,7 @@
       </template>
       <div class="monitor-video-wrap">
         <div class="monitor-video-stack">
-          <video ref="monitorVideoRef" class="monitor-video" controls preload="metadata" :src="monitorVideoUrl">您的浏览器不支持视频播放</video>
+          <video ref="monitorVideoRef" class="monitor-video" preload="metadata">您的浏览器不支持视频播放</video>
           <div v-show="monitorDrawCollecting" class="monitor-draw-overlay" @click.stop="onMonitorDrawClick" />
           <div v-if="monitorRectPx" class="monitor-draw-rect" :style="drawRectStyle" />
           <div v-if="monitorRectPx" class="monitor-draw-label" :style="drawLabelStyle">当前报警区域</div>
@@ -146,12 +255,12 @@
 <script setup name="Demo" lang="ts">
 import { addEquipment, getDevicetList, getDeviceInfo, delDevice, actDevice, updateDeviceInfo, drawInfo } from '@/api/equipmentList/index';
 import { EquipmentList, DeviceInfoForm, AlarmAreaData } from '@/api/equipmentList/types';
-import { listDemo, getDemo, delDemo, addDemo, updateDemo } from '@/api/demo/demo';
 import { DemoVO, DemoQuery, DemoForm } from '@/api/demo/demo/types';
-import { log } from 'node:console';
+import { initHls, destroyHls } from '@/utils/video';
-import Hls from 'hls.js';
 import { nextTick } from 'vue';
 import { useVideosStore } from '@/store/modules/video';
+import { addDemo } from '@/api/video/index';
+import { AnyARecord } from 'dns';
 
 const videosStore = useVideosStore();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -165,6 +274,7 @@ const multiple = ref(true);
 const total = ref(0);
 const seeSee = ref(0);
 const haveCode = ref(false);
+const videoName = ref<string>('实时监控');
 
 const queryFormRef = ref<ElFormInstance>();
 const demoFormRef = ref<ElFormInstance>();
@@ -180,65 +290,8 @@ const dialog1 = reactive<DialogOption>({
 
 const monitorVideoUrl = ref('');
 const monitorVideoRef = ref<HTMLVideoElement>();
-let hlsInstance: Hls | null = null;
+let visibilityHandler: (() => void) | null = null;
-
+const monitoringArea = ref<string>('');
-const initHls = () => {
-  const url = monitorVideoUrl.value;
-  const video = monitorVideoRef.value;
-  if (!url || !video) return;
-
-  // 销毁已有实例
-  if (hlsInstance) {
-    try {
-      hlsInstance.destroy();
-    } catch (e) {
-      // ignore
-    }
-    hlsInstance = null;
-  }
-
-  if (Hls.isSupported()) {
-    const hls = new Hls();
-    hls.loadSource(url);
-    hls.attachMedia(video);
-    hls.on(Hls.Events.MANIFEST_PARSED, () => {
-      // 自动播放（若浏览器允许）
-      try {
-        video.play().catch(() => {});
-      } catch (e) {}
-    });
-    hlsInstance = hls;
-  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
-    // Safari/原生支持 HLS
-    video.src = url;
-    video.addEventListener('loadedmetadata', () => {
-      try {
-        video.play().catch(() => {});
-      } catch (e) {}
-    });
-  } else {
-    proxy?.$modal.msgWarning('当前浏览器不支持 HLS 播放');
-  }
-};
-
-const destroyHls = () => {
-  try {
-    if (hlsInstance) {
-      hlsInstance.destroy();
-      hlsInstance = null;
-    }
-  } catch (e) {}
-  const video = monitorVideoRef.value;
-  if (video) {
-    // 清理原生 src，避免残留
-    try {
-      video.pause();
-      video.removeAttribute('src');
-      // 对某些浏览器，需要调用 load() 来重置 media element
-      if (typeof video.load === 'function') video.load();
-    } catch (e) {}
-  }
-};
 
 type MonitorPoint = { x: number; y: number };
 const monitorDrawCollecting = ref(false);
@@ -394,19 +447,21 @@ const resetMonitorDraw = () => {
   monitorRectPx.value = null;
   currentDrawArea.value = null;
 };
+// const videosInfo = ref();
 const handleSee = async (row?: any) => {
   console.log('1111111111111111', row, row.drawArea);
-
+  // videosInfo.value = row;
   reset();
   resetMonitorDraw();
   seeSee.value = row?.isDrawArea === 1 ? 1 : 0;
+  monitoringArea.value = row?.monitoringArea;
   const _id = row?.id || ids.value[0];
   const res = await getDeviceInfo(_id);
   Object.assign(form.value, res.data);
   dialog1.visible = true;
   dialog1.title = '修改设备';
 
-  destroyHls();
+  destroyHls(monitorVideoRef);
   monitorVideoUrl.value = '';
   await videosStore.getVideos(row.id);
   monitorVideoUrl.value = videosStore.hisUrl || '';
@@ -419,7 +474,7 @@ const handleSee = async (row?: any) => {
 
   // 等待 DOM 更新后初始化 Hls
   await nextTick();
-  initHls();
+  initHls(monitorVideoUrl, monitorVideoRef, () => dialog1.visible, handleRefresh);
   // 等待视频加载完成后初始化 ResizeObserver，以便能正确获取视频尺寸
   initVideoResizeObserver();
 
@@ -454,6 +509,18 @@ const handleSee = async (row?: any) => {
       console.error('[查看监控] 解析 drawArea 失败:', error);
     }
   }
+  // 后台运行的时候恢复播放
+  cleanupVisibilityChange();
+  const handleVisibilityChange = () => {
+    if (!document.hidden) {
+      const video = monitorVideoRef.value;
+      if (video && video.paused) {
+        video.play().catch((e) => console.warn('恢复播放失败:', e));
+      }
+    }
+  };
+  document.addEventListener('visibilitychange', handleVisibilityChange);
+  visibilityHandler = handleVisibilityChange;
 };
 
 // 提取显示报警区域的逻辑为独立函数
@@ -530,13 +597,28 @@ const destroyVideoResizeObserver = () => {
     videoResizeObserver.value = null;
   }
 };
+// 清理 visibilitychange 事件监听
+const cleanupVisibilityChange = () => {
+  if (visibilityHandler) {
+    document.removeEventListener('visibilitychange', visibilityHandler);
+    visibilityHandler = null;
+  }
+};
 
 const handleMonitorDialogClose = (done: () => void) => {
+  try {
+    addDemo(form.value.id).then(() => {
+      console.log('关闭视频111111');
+    });
+  } catch (error) {
+    console.log('关闭视频22222222', error);
+  }
   // 卸载 Hls 与清理 video
-  destroyHls();
+  destroyHls(monitorVideoRef);
   monitorVideoUrl.value = '';
   destroyVideoResizeObserver();
   resetMonitorDraw();
+  cleanupVisibilityChange();
   done();
   //刷新列表
   getList();
@@ -580,6 +662,7 @@ const payload = ref<AlarmAreaData[]>([]);
 const drawImage = () => {
   resetMonitorDraw();
   monitorDrawCollecting.value = true;
+  videoName.value = '绘制区域';
   proxy?.$modal.msgSuccess('请在视频画面上连续点击两个点，生成报警区域');
 };
 
@@ -676,7 +759,7 @@ const saveImage = async () => {
 
 const handleMonitorDialogOpen = () => {
   // 初始化 Hls 与 video
-  initHls();
+  initHls(monitorVideoUrl, monitorVideoRef, () => dialog1.visible);
   initVideoResizeObserver();
   monitorDrawCollecting.value = false;
   monitorDrawPoints.value = [];
@@ -706,6 +789,46 @@ const handleExport = () => {
 onMounted(() => {
   getList();
 });
+
+watch(
+  () => seeSee.value,
+  (newValue) => {
+    videoName.value = newValue === 1 ? '绘制区域' : '实时监控';
+  }
+);
+/** 刷新按钮操作 */
+// const handleVideo = async (row?: any) => {
+//   console.log('11111111111', row);
+//   handleSee(row);
+// };
+
+/** 刷新按钮操作 */
+const handleRefresh = async () => {
+  if (!form.value.id) return;
+  destroyHls(monitorVideoRef);
+  monitorVideoUrl.value = '';
+  await videosStore.getVideos(form.value.id);
+  monitorVideoUrl.value = videosStore.hisUrl || '';
+  if (monitorVideoUrl.value) {
+    await nextTick();
+    initHls(monitorVideoUrl, monitorVideoRef, () => dialog1.visible, handleRefresh);
+  }
+};
+
+/** 电池颜色：>50% 绿，30-50% 黄，<30% 红 */
+const getBatteryColor = (val: number) => {
+  if (val > 50) return '#52c41a';
+  if (val >= 30) return '#faad14';
+  return '#ff4d4f';
+};
+
+const formatPowerLevel = (val: any) => Number(val) || 0;
+const getPowerLevelClass = (val: any) => {
+  const v = Number(val);
+  if (v > 50) return 'power--high';
+  if (v >= 30) return 'power--mid';
+  return 'power--low';
+};
 </script>
 
 <style scoped lang="scss">
@@ -790,4 +913,32 @@ onMounted(() => {
   padding: 2px 6px;
   border-radius: 2px;
 }
+
+.battery-group {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.battery-item {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.battery-label {
+  font-size: 12px;
+  color: #909399;
+}
+
+/* 电量电池颜色 */
+.power--high {
+  color: #52c41a;
+}
+.power--mid {
+  color: #faad14;
+}
+.power--low {
+  color: #ff4d4f;
+}
 </style>

src/views/fileList/list.vue

@@ -74,7 +74,7 @@
     <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" class="monitor-dialog" fullscreen destroy-on-close>
       <template #header>
         <div class="flex w-full items-center justify-between gap-2 min-w-0 pr-8">
-          <span class="truncate">实时监控-北门出入门监控</span>
+          <span class="truncate">播放-{{ videoName }}</span>
         </div>
       </template>
       <div class="monitor-video-wrap">
@@ -109,6 +109,7 @@ const multiple = ref(true);
 const total = ref(0);
 const monitorVideoUrl = ref();
 const downloadUrl = ref();
+const videoName = ref<string>('录像文件');
 
 const queryFormRef = ref<ElFormInstance>();
 const demoFormRef = ref<ElFormInstance>();
@@ -218,6 +219,7 @@ const handlePlay = async (row?: any) => {
     return;
   }
   monitorVideoUrl.value = row.videoUrl;
+  videoName.value = row.videoName;
   dialog.visible = true;
 };
 const handleDown = async (row?: any) => {

src/views/login.vue

@@ -91,8 +91,8 @@ const { t } = useI18n();
 
 const loginForm = ref<LoginData>({
   tenantId: '000000',
-  username: 'admin',
+  username: '',
-  password: 'admin123',
+  password: '',
   rememberMe: false,
   code: '',
   uuid: ''
@@ -265,8 +265,8 @@ onMounted(() => {
 
 .login-brand {
   flex: 0 0 auto;
-  width: min(420px, 90vw);
+  width: min(450px, 90vw);
-  max-width: 420px;
+  max-width: 450px;
   height: 450px;
   max-height: 450px;
   box-sizing: border-box;
@@ -333,8 +333,8 @@ onMounted(() => {
   }
 
   .login-brand {
-    width: min(420px, 100%);
+    width: min(450px, 100%);
-    max-width: 420px;
+    max-width: 450px;
     height: 450px;
     max-height: 450px;
     border-radius: var(--app-radius-lg);
@@ -378,7 +378,7 @@ onMounted(() => {
   flex-direction: column;
   box-sizing: border-box;
   min-height: 0;
-  width: min(420px, 90vw);
+  width: min(450px, 90vw);
   height: 450px;
   max-height: 450px;
   padding: 44px 48px 36px;

src/views/systemList/base/base.vue

@@ -91,7 +91,7 @@ const save = async () => {
     })
     .catch((err) => {
       console.error('保存失败', err);
-      ElMessage.error('保存失败');
+      // ElMessage.error('保存失败');
     });
 };
 

src/views/systemList/role/role.vue

@@ -20,7 +20,7 @@
       <template #header>
         <el-row :gutter="10" class="flex justify-end mb8">
           <el-col :span="1.5">
-            <el-button v-hasPermi="['system:role:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
+            <el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
           </el-col>
           <!-- <el-col :span="1.5">
             <el-button v-hasPermi="['system:role:edit']" type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()">修改</el-button>

src/views/systemList/user/user.vue

@@ -23,7 +23,7 @@
           <div v-show="showSearch" class="mb-[10px]">
             <el-card shadow="hover">
               <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-                <el-form-item label="用户名称" prop="userName">
+                <el-form-item label="用户账号" prop="userName">
                   <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable @keyup.enter="handleQuery" />
                 </el-form-item>
                 <!-- <el-form-item label="用户账号" prop="nickName">
@@ -62,7 +62,7 @@
           <template #header>
             <el-row :gutter="10" class="flex justify-end mb8">
               <el-col :span="1.5">
-                <el-button v-has-permi="['system:user:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
+                <el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
               </el-col>
               <!-- <el-col :span="1.5">
                 <el-button v-has-permi="['system:user:edit']" type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()">
@@ -123,10 +123,10 @@
             <el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
               <template #default="scope">
                 <!-- <el-tooltip v-if="scope.row.userId !== 1" content="修改" placement="top"> -->
-                <el-button v-hasPermi="['system:user:edit']" type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
+                <el-button type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
                 <!-- </el-tooltip>
                 <el-tooltip v-if="scope.row.userId !== 1" content="删除" placement="top"> -->
-                <el-button v-hasPermi="['system:user:remove']" type="primary" @click="handleDelete(scope.row)">删除</el-button>
+                <el-button type="primary" @click="handleDelete(scope.row)">删除</el-button>
                 <!-- </el-tooltip> -->
 
                 <!-- <el-tooltip v-if="scope.row.userId !== 1" content="重置密码" placement="top">
@@ -156,7 +156,7 @@
       <el-form ref="userFormRef" :model="form" :rules="rules" label-width="80px">
         <el-row>
           <el-col :span="12">
-            <el-form-item label="用户账号" prop="nickName">
+            <el-form-item label="用户名称" prop="nickName">
               <el-input v-model="form.nickName" placeholder="请输入用户账号" maxlength="30" />
             </el-form-item>
           </el-col>
@@ -188,7 +188,7 @@
           <!-- </el-row>
         <el-row> -->
           <el-col :span="12" v-if="form.userId == undefined">
-            <el-form-item label="用户名称" prop="userName">
+            <el-form-item label="用户账号" prop="userName">
               <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
             </el-form-item>
           </el-col>

start.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+# 启动命令 : ./start.sh
+echo "📦 正在安装依赖..."
+pnpm install
+
+echo "🚀 正在启动开发服务器..."
+pnpm run dev
+
+echo "⏳ 等待服务器启动..."
+sleep 5
+
+echo "🌐 正在打开浏览器..."
+if command -v start &> /dev/null; then
+    # Windows
+    start http://localhost:80
+elif command -v xdg-open &> /dev/null; then
+    # Linux
+    xdg-open http://localhost:80
+elif command -v open &> /dev/null; then
+    # macOS
+    open http://localhost:80
+else
+    echo "⚠️  请手动打开浏览器访问: http://localhost:80"
+fi

vite.config.ts

@@ -24,7 +24,8 @@ export default defineConfig(({ mode, command }) => {
       open: true,
       proxy: {
         [env.VITE_APP_BASE_API]: {
-          target: 'http://47.104.208.94:8089',
+          // target: 'http://47.104.208.94:8089',
+          target: 'http://47.104.215.165:8089',
           changeOrigin: true,
           ws: true,
           rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')