diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json index 2ca3adf..d979925 100644 --- a/.eslintrc-auto-import.json +++ b/.eslintrc-auto-import.json @@ -5,6 +5,10 @@ "ComputedRef": true, "DirectiveBinding": true, "EffectScope": true, + "ElLoading": true, + "ElMessage": true, + "ElMessageBox": true, + "ElNotification": true, "ExtractDefaultPropTypes": true, "ExtractPropTypes": true, "ExtractPublicPropTypes": true, diff --git a/src/api/video/index.ts b/src/api/video/index.ts new file mode 100644 index 0000000..52c185e --- /dev/null +++ b/src/api/video/index.ts @@ -0,0 +1,29 @@ +import request from '@/utils/request'; +import { AxiosPromise } from 'axios'; + +/** + * 开始一直播预览 + * @param query + * post + * /haikang/isup/stream/live/start?deviceId=2057338485989367810 + */ +export const listDemo = (deviceId?: string | number) => { + return request({ + url: `/haikang/isup/stream/live/start?deviceId=${deviceId}`, + method: 'post' + }); +}; + +/** + * 停止-直播预览 + * @param query + * post + * /haikang/isup/stream/live/stop?id=2057338485989367810&channel=1 + */ +export const addDemo = (data: any) => { + return request({ + url: '/haikang/isup/stream/live/stop', + method: 'get', + params: data + }); +}; diff --git a/src/api/video/types.ts b/src/api/video/types.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/store/modules/video.ts b/src/store/modules/video.ts new file mode 100644 index 0000000..a98bf3b --- /dev/null +++ b/src/store/modules/video.ts @@ -0,0 +1,41 @@ +import { defineStore } from 'pinia'; +import { ref, computed } from 'vue'; +import { addDemo, listDemo } from '@/api/video'; +import Hls from 'hls.js'; + +export const useVideosStore = defineStore('videos', () => { + // --- State (状态) --- + // 相当于 Vuex 中的 state,用 ref 或 reactive 定义 + const hisUrl = ref(); + + // --- Getters (计算属性) --- + // 相当于 Vuex 中的 getters,直接用 computed 定义 + + // --- Actions (动作) --- + // 相当于 Vuex 中的 actions/mutations,直接写同步或异步函数 + async function getVideos(deviceId?: string | number) { + try { + const response = await listDemo(deviceId); + console.log('获取视频:', response); + hisUrl.value = response.data; + } catch (error) { + console.error('获取视频失败', error); + } + } + + async function stopVideos(query: any) { + try { + const response = await addDemo(query); + console.log('停止视频:', response); + } catch (error) { + console.error('停止视频失败', error); + } + } + + // ⚠️ 核心点:必须把需要暴露出去的变量和方法 return 出去! + return { + hisUrl, + getVideos, + stopVideos + }; +}); diff --git a/src/views/equipmentList/list.vue b/src/views/equipmentList/list.vue index e05e2cd..a0ff67a 100644 --- a/src/views/equipmentList/list.vue +++ b/src/views/equipmentList/list.vue @@ -138,7 +138,9 @@ 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 Hls from 'hls.js'; +import { useVideosStore } from '@/store/modules/video'; +const videosStore = useVideosStore(); const { proxy } = getCurrentInstance() as ComponentInternalInstance; const demoList = ref([]); @@ -163,7 +165,7 @@ const dialog1 = reactive({ title: '' }); -const monitorVideoUrl = 'http://192.168.0.214:8088/5a0db047943df198aff98b650ac9e001.mp4'; +const monitorVideoUrl = ref(''); const monitorVideoRef = ref(); type MonitorPoint = { x: number; y: number }; @@ -318,6 +320,7 @@ const resetMonitorDraw = () => { monitorRectPx.value = null; }; const handleSee = async (row?: any) => { + console.log('1111111111111111', row); reset(); resetMonitorDraw(); seeSee.value = row?.isDrawArea === 1 ? 1 : 0; @@ -326,6 +329,9 @@ const handleSee = async (row?: any) => { Object.assign(form.value, res.data); dialog1.visible = true; dialog1.title = '修改设备'; + videosStore.getVideos(row.id); + console.log('222222222222:', videosStore.hisUrl); + monitorVideoUrl.value = videosStore.hisUrl; }; const handleMonitorDialogClose = (done: () => void) => {