feat: RTSP頁 串接 get device api
This commit is contained in:
parent
2bf5f9042a
commit
ba7fda3d07
@ -1,5 +1,4 @@
|
||||
// 開關 RTSP（啟用/停用）
|
||||
export const POST_SET_RTSP_ENABLE = `/api/rtsp/set-rtsp-enable`;
|
||||
|
||||
// 設定 SAMBA 儲存目錄
|
||||
export const POST_SET_SAMBA_DIRECTORY = `/api/rtsp/set-samba-directory`;
|
||||
export const POST_GET_RTSP_DEVICE = `/api/rtsp/get-rtsp-device`;
|
||||
@ -1,6 +1,8 @@
|
||||
// src/apis/rtsp/index.js
|
||||
import {
|
||||
POST_SET_RTSP_ENABLE,
|
||||
POST_SET_SAMBA_DIRECTORY,
|
||||
POST_GET_RTSP_DEVICE,
|
||||
} from "./api";
|
||||
import instance from "@/util/request";
|
||||
import apihandler from "@/util/apihandler";
|
||||
@ -16,14 +18,16 @@ export const setRtspEnable = async ({ main_id, enable }) => {
|
||||
};
|
||||
|
||||
/**
|
||||
* 設定 SAMBA 儲存目錄
|
||||
* Swagger: POST /api/rtsp/set-samba-directory
|
||||
* body: { main_id: number, directory: string }
|
||||
* 取得 RTSP 裝置清單
|
||||
* Swagger: POST /api/rtsp/get-rtsp-device
|
||||
* body: 可為空物件 {} 或依後端需求帶 building_guid 等參數
|
||||
* response.data: [
|
||||
* { main_id, device_number, full_name, device_ip, device_port, rtsp_url,
|
||||
* enable_traffic, start_btn_enable, stop_btn_enable, alarm_message }
|
||||
* ]
|
||||
*/
|
||||
export const setSambaDirectory = async ({ main_id, directory }) => {
|
||||
const res = await instance.post(POST_SET_SAMBA_DIRECTORY, {
|
||||
main_id,
|
||||
directory,
|
||||
});
|
||||
export const getRtspDevices = async (payload = {}) => {
|
||||
const res = await instance.post(POST_GET_RTSP_DEVICE, payload);
|
||||
// 後端回傳格式如題：{ code, msg, data: [...] }
|
||||
return apihandler(res.code, res.data, { msg: res.msg, code: res.code });
|
||||
};
|
||||
|
||||
@ -432,7 +432,7 @@
|
||||
"selectPathFirst": "請先選擇儲存資料夾",
|
||||
"startSuccess": "已開始偵測…",
|
||||
"startFail": "開始偵測失敗，請稍後再試",
|
||||
"stopSuccess": "已請求結束偵測…",
|
||||
"stopSuccess": "結束偵測",
|
||||
"stopFail": "結束偵測失敗，請稍後再試",
|
||||
"noPermission": "沒有取得寫入權限，請重新選擇資料夾並允許",
|
||||
"selectFolderSuccess": "已選擇資料夾：{name}",
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
<script setup>
|
||||
import { ref, defineProps, watch, inject, nextTick } from "vue";
|
||||
import {
|
||||
ref,
|
||||
defineProps,
|
||||
watch,
|
||||
inject,
|
||||
nextTick,
|
||||
onMounted,
|
||||
toRaw,
|
||||
} from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import { postOperationRecord } from "@/apis/alert";
|
||||
import * as yup from "yup";
|
||||
@ -13,6 +21,27 @@ const props = defineProps({
|
||||
editRecord: Object,
|
||||
});
|
||||
|
||||
/** ================= Debug Helpers ================= */
|
||||
const debugLog = (label, payload) => {
|
||||
try {
|
||||
console.log(
|
||||
`[AlertActionItem] ${label}:`,
|
||||
JSON.parse(JSON.stringify(payload))
|
||||
);
|
||||
} catch (e) {
|
||||
console.log(`[AlertActionItem] ${label}:`, payload);
|
||||
}
|
||||
};
|
||||
|
||||
// 初始就印出整個 props 與 editRecord 內容
|
||||
debugLog("props", props);
|
||||
debugLog("initial props.editRecord", props?.editRecord);
|
||||
|
||||
onMounted(() => {
|
||||
debugLog("onMounted props", props);
|
||||
debugLog("onMounted props.editRecord", props?.editRecord);
|
||||
});
|
||||
|
||||
const form = ref(null);
|
||||
|
||||
const dateItem = ref([
|
||||
@ -64,18 +93,43 @@ const updateFileList = (files) => {
|
||||
formState.value.lorf = files;
|
||||
};
|
||||
|
||||
// ---------------------- 告警影片儲存位置：顯示 API 的 video_url ----------------------
|
||||
// 重要：你的 <Input name="videoLocation" :value="..."> 會從 value[name] 取值
|
||||
// 所以我們把 videoLocation 寫成 { videoLocation: string } 的物件
|
||||
const videoLocation = ref({ videoLocation: "" });
|
||||
const showTooltip = ref(false);
|
||||
|
||||
async function copyToClipboard() {
|
||||
const text = videoLocation.value.videoLocation || "";
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
// 觸發 tooltip 動畫
|
||||
showTooltip.value = false;
|
||||
await nextTick();
|
||||
showTooltip.value = true;
|
||||
setTimeout(() => {
|
||||
showTooltip.value = false;
|
||||
}, 1500);
|
||||
} catch (err) {
|
||||
console.error("複製失敗:", err);
|
||||
}
|
||||
}
|
||||
|
||||
const onOk = async () => {
|
||||
const formData = new FormData(form.value);
|
||||
formData.delete("oriFile");
|
||||
|
||||
formState.value?.lorf.forEach((file, index) => {
|
||||
formData.append(`lorf[${index}].id`, file.id ? file.id : "");
|
||||
formData.append(`lorf[${index}].file`, file.id ? null : file);
|
||||
(formState.value?.lorf ?? []).forEach((file, index) => {
|
||||
formData.append(`lorf[${index}].id`, file?.id ? file.id : "");
|
||||
// 只有新檔案才上傳檔案本體
|
||||
if (!file?.id && file) {
|
||||
formData.append(`lorf[${index}].file`, file);
|
||||
}
|
||||
formData.append(
|
||||
`lorf[${index}].save_file_name`,
|
||||
file.id ? file.save_file_name : ""
|
||||
file?.id ? file.save_file_name : ""
|
||||
);
|
||||
formData.append(`lorf[${index}].ori_file_name`, file.name);
|
||||
formData.append(`lorf[${index}].ori_file_name`, file?.name ?? "");
|
||||
});
|
||||
|
||||
formData.append(
|
||||
@ -83,9 +137,9 @@ const onOk = async () => {
|
||||
dayjs(dateItem.value[0].value).format("YYYY-MM-DD")
|
||||
);
|
||||
|
||||
props.editRecord.id && formData.append("id", props.editRecord.id);
|
||||
|
||||
props.editRecord.uuid && formData.append("error_code", props.editRecord.uuid);
|
||||
if (props.editRecord.id) formData.append("id", props.editRecord.id);
|
||||
if (props.editRecord.uuid)
|
||||
formData.append("error_code", props.editRecord.uuid);
|
||||
|
||||
formData.append("work_type", 2);
|
||||
formData.append(
|
||||
@ -96,7 +150,7 @@ const onOk = async () => {
|
||||
);
|
||||
|
||||
try {
|
||||
const value = await handleSubmit(alertSchema, formState.value);
|
||||
await handleSubmit(alertSchema, formState.value);
|
||||
const res = await postOperationRecord(formData);
|
||||
if (res.isSuccess) {
|
||||
search?.();
|
||||
@ -123,58 +177,40 @@ const onCancel = () => {
|
||||
description: "",
|
||||
lorf: [],
|
||||
};
|
||||
// 重置顯示用的影片路徑
|
||||
videoLocation.value.videoLocation = "";
|
||||
handleErrorReset();
|
||||
updateEditRecord?.(null);
|
||||
alert_action_item.close();
|
||||
};
|
||||
|
||||
// 同步 props.editRecord -> formState / 日期 / 維修項目 / 影片網址
|
||||
watch(
|
||||
() => props.editRecord,
|
||||
(newVal) => {
|
||||
debugLog("watch props.editRecord changed", newVal);
|
||||
if (newVal) {
|
||||
for (let [key, value] of Object.entries(newVal)) {
|
||||
// 僅更新 formState 中已有的屬性
|
||||
if (key in formState.value) {
|
||||
formState.value[key] = value;
|
||||
}
|
||||
// 處理 start_time
|
||||
if (key === "start_time") {
|
||||
formState.value.start_time = value
|
||||
? dayjs(value).format("YYYY-MM-DD")
|
||||
: dayjs().format("YYYY-MM-DD");
|
||||
dateItem.value[0].value = value;
|
||||
const d = value ? dayjs(value) : dayjs();
|
||||
formState.value.start_time = d.format("YYYY-MM-DD");
|
||||
dateItem.value[0].value = d; // 一律用 dayjs 物件
|
||||
}
|
||||
// 維修項目
|
||||
if (key === "full_name") {
|
||||
formState.value.fix_do = value;
|
||||
formState.value.fix_do = value ?? "";
|
||||
}
|
||||
}
|
||||
// 取 API 回傳的影片位址（與 device_number 同來源物件）
|
||||
videoLocation.value.videoLocation =
|
||||
newVal?.video_url ?? newVal?.videoUrl ?? newVal?.video_path ?? "";
|
||||
debugLog("derived videoLocation", videoLocation.value.videoLocation);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const videoLocation = ref("https://your-video-storage-path.com/alert-video");
|
||||
const showTooltip = ref(false);
|
||||
const hasCopiedOnce = ref(false);
|
||||
|
||||
async function copyToClipboard() {
|
||||
const text = videoLocation.value;
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
|
||||
// 確保 tooltip 每次都重新觸發
|
||||
showTooltip.value = false;
|
||||
await nextTick();
|
||||
showTooltip.value = true;
|
||||
|
||||
setTimeout(() => {
|
||||
showTooltip.value = false;
|
||||
}, 1500);
|
||||
} catch (err) {
|
||||
console.error("複製失敗:", err);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<section class="min-h-[600px] h-screen">
|
||||
<h1 class="text-2xl font-extrabold mb-2">{{ $t("rtsp.title") }}</h1>
|
||||
|
||||
<!-- Tabs：選擇要顯示的攝影機 -->
|
||||
<!-- Tabs：選擇攝影機 -->
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<h2 class="text-lg font-bold whitespace-nowrap">
|
||||
{{ $t("rtsp.selectDevice") }} :
|
||||
@ -38,41 +38,49 @@
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 右側：開始/結束偵測（已移除選擇資料夾相關 UI） -->
|
||||
<!-- 右側：開始/結束偵測 -->
|
||||
<aside class="w-1/2 flex flex-col gap-6 p-4">
|
||||
<div class="flex gap-3">
|
||||
<button
|
||||
class="btn btn-add w-40"
|
||||
@click="startDetection"
|
||||
:disabled="isStarting || !selectedMainId"
|
||||
:disabled="
|
||||
isStarting || !selectedMainId || !currentDevice?.start_btn_enable
|
||||
"
|
||||
:title="!selectedMainId ? $t('rtsp.pleaseSelectDevice') : ''"
|
||||
>
|
||||
{{ $t("rtsp.start") }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn btn-error text-white w-40"
|
||||
@click="stopDetection"
|
||||
:disabled="isStopping || !selectedMainId"
|
||||
:disabled="
|
||||
isStopping || !selectedMainId || !currentDevice?.stop_btn_enable
|
||||
"
|
||||
:title="!selectedMainId ? $t('rtsp.pleaseSelectDevice') : ''"
|
||||
>
|
||||
{{ $t("rtsp.stop") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p v-if="message" class="text-sm text-info">{{ message }}</p>
|
||||
<!-- 顯示後端傳來的提示文字 -->
|
||||
<p v-if="currentDevice?.alarm_message" class="text-sm text-info">
|
||||
{{ currentDevice.alarm_message }}
|
||||
</p>
|
||||
|
||||
<p v-if="message" class="text-sm">{{ message }}</p>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSystemDevices } from "@/apis/system";
|
||||
import { setRtspEnable } from "@/apis/rtsp"; // 已移除 setSambaDirectory
|
||||
import { getRtspDevices, setRtspEnable } from "@/apis/rtsp";
|
||||
import useActiveBtn from "@/hooks/useActiveBtn";
|
||||
|
||||
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
|
||||
const DEFAULT_MONITOR_URL =
|
||||
"http://192.168.0.219:8026/?url=rtsp://admin02:mjmAdmin_99@192.168.0.200:554/stream1?tcp";
|
||||
"http://192.168.0.219:8026/?url=rtsp://admin02:mjmAdmin_99@192.168.0.200:554/stream1";
|
||||
|
||||
export default {
|
||||
name: "Rtsp",
|
||||
@ -83,22 +91,23 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
monitorUrl: DEFAULT_MONITOR_URL,
|
||||
|
||||
// 偵測控制
|
||||
isStarting: false,
|
||||
isStopping: false,
|
||||
|
||||
// UI 狀態
|
||||
message: "",
|
||||
|
||||
// 資料整理
|
||||
deviceData: {},
|
||||
rtspDevices: [], // { main_id, full_name, rtsp_url, ... }
|
||||
rtspDevices: [],
|
||||
selectedMainId: null, // 目前選中的設備 main_id
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentDevice() {
|
||||
if (!this.selectedMainId) return null;
|
||||
return (
|
||||
this.rtspDevices.find((d) => d.main_id === this.selectedMainId) || null
|
||||
);
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
await this.getData();
|
||||
await this.loadRtspDevices();
|
||||
},
|
||||
watch: {
|
||||
selectedBtn: {
|
||||
@ -111,114 +120,38 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async getData() {
|
||||
async loadRtspDevices() {
|
||||
try {
|
||||
const useBuildingStore = (await import("@/stores/useBuildingStore"))
|
||||
.default;
|
||||
const buildingStore = useBuildingStore();
|
||||
const building_guid =
|
||||
buildingStore?.selectedBuilding?.building_guid || "";
|
||||
const res = await getRtspDevices({});
|
||||
const list = Array.isArray(res) ? res : res?.data || [];
|
||||
|
||||
const res = await getSystemDevices({ building_guid });
|
||||
const transformedData = {};
|
||||
|
||||
(res?.data || []).forEach((floor) => {
|
||||
if (floor?.device_list?.length > 0) {
|
||||
const fullUrl = floor.floor_map_name;
|
||||
const uuid = fullUrl ? fullUrl.replace(/\.svg$/, "") : "";
|
||||
transformedData[uuid] = floor.device_list.map((device) => {
|
||||
let x = 0,
|
||||
y = 0;
|
||||
try {
|
||||
const coordinates = JSON.parse(
|
||||
device?.device_coordinate || "[0,0]"
|
||||
);
|
||||
x = Number(coordinates?.[0] ?? 0);
|
||||
y = Number(coordinates?.[1] ?? 0);
|
||||
} catch (_) {}
|
||||
|
||||
let state = "Online";
|
||||
let bgColor = device?.device_normal_color;
|
||||
if (
|
||||
device?.device_status === "Offline" ||
|
||||
device?.device_status == null
|
||||
) {
|
||||
state = "Offline";
|
||||
bgColor = device?.device_close_color;
|
||||
}
|
||||
if (device?.device_status === "Error") {
|
||||
state = "Error";
|
||||
bgColor = device?.device_error_color;
|
||||
}
|
||||
|
||||
return [
|
||||
x,
|
||||
y,
|
||||
{
|
||||
device_number: device?.device_number || "",
|
||||
device_coordinate: device?.device_coordinate || "",
|
||||
device_image_url: device?.device_image_url,
|
||||
full_name: device?.full_name,
|
||||
main_id: device?.main_id,
|
||||
points: device?.points || [],
|
||||
floor: floor?.full_name,
|
||||
state,
|
||||
icon: device?.device_image
|
||||
? `${FILE_BASEURL}/upload/device_icon/${device.device_image}`
|
||||
: "",
|
||||
bgColor,
|
||||
Online_color: device?.device_normal_color,
|
||||
Offline_color: device?.device_close_color,
|
||||
Error_color: device?.device_error_color,
|
||||
brand: device?.brand || "",
|
||||
device_model: device?.device_model,
|
||||
operation_name: device?.operation_name,
|
||||
operation_contact_person: device?.operation_contact_person,
|
||||
buying_date: device?.buying_date,
|
||||
created_at: device?.created_at,
|
||||
bgSize: 50,
|
||||
is_rtsp: device?.is_rtsp === true,
|
||||
rtsp_url: device?.rtsp_url || "",
|
||||
},
|
||||
];
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.deviceData = transformedData;
|
||||
|
||||
const allRows = Object.values(transformedData).flat();
|
||||
this.rtspDevices = allRows
|
||||
.map((row) => row?.[2])
|
||||
.filter((p) => p && p.is_rtsp && p.rtsp_url)
|
||||
.reduce((acc, cur) => {
|
||||
if (!acc.find((x) => x.main_id === cur.main_id)) acc.push(cur);
|
||||
return acc;
|
||||
}, [])
|
||||
.sort((a, b) => (a.full_name || "").localeCompare(b.full_name || ""));
|
||||
this.rtspDevices = list;
|
||||
|
||||
// 建立 Tabs
|
||||
const cate = this.rtspDevices.map((d, index) => ({
|
||||
title: d.full_name || d.main_id,
|
||||
key: d.main_id,
|
||||
active: this.selectedMainId
|
||||
? this.selectedMainId === d.main_id
|
||||
: index === 0,
|
||||
...d,
|
||||
}));
|
||||
this.setItems(cate);
|
||||
|
||||
// 預設選第一台
|
||||
if (this.rtspDevices.length > 0) {
|
||||
const first = this.rtspDevices[0];
|
||||
this.selectedMainId = first.main_id;
|
||||
this.monitorUrl = first.rtsp_url;
|
||||
const chosenId = this.selectedMainId ?? this.rtspDevices[0].main_id;
|
||||
const chosen =
|
||||
this.rtspDevices.find((d) => d.main_id === chosenId) ||
|
||||
this.rtspDevices[0];
|
||||
this.selectDevice(chosen);
|
||||
} else {
|
||||
this.selectedMainId = null;
|
||||
this.monitorUrl = DEFAULT_MONITOR_URL;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("getData() 失敗", err);
|
||||
this.setItems([]);
|
||||
console.error("loadRtspDevices() 失敗", err);
|
||||
this.rtspDevices = [];
|
||||
this.setItems([]);
|
||||
this.selectedMainId = null;
|
||||
this.monitorUrl = DEFAULT_MONITOR_URL;
|
||||
}
|
||||
@ -230,18 +163,19 @@ export default {
|
||||
this.monitorUrl = d.rtsp_url || DEFAULT_MONITOR_URL;
|
||||
},
|
||||
|
||||
// 開始偵測：setRtspEnable(true)
|
||||
// 開始偵測
|
||||
async startDetection() {
|
||||
if (!this.selectedMainId) {
|
||||
this.message = this.$t("rtsp.pleaseSelectDevice");
|
||||
return;
|
||||
}
|
||||
this.isStarting = true;
|
||||
const keepId = this.selectedMainId;
|
||||
try {
|
||||
await setRtspEnable({
|
||||
main_id: this.selectedMainId,
|
||||
enable: true,
|
||||
});
|
||||
await setRtspEnable({ main_id: keepId, enable: true });
|
||||
await this.loadRtspDevices();
|
||||
const found = this.rtspDevices.find((d) => d.main_id === keepId);
|
||||
if (found) this.selectDevice(found);
|
||||
this.message = this.$t("rtsp.startSuccess");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
@ -251,18 +185,19 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
// 結束偵測：setRtspEnable(false)
|
||||
// 結束偵測
|
||||
async stopDetection() {
|
||||
if (!this.selectedMainId) {
|
||||
this.message = this.$t("rtsp.pleaseSelectDevice");
|
||||
return;
|
||||
}
|
||||
this.isStopping = true;
|
||||
const keepId = this.selectedMainId;
|
||||
try {
|
||||
await setRtspEnable({
|
||||
main_id: this.selectedMainId,
|
||||
enable: false,
|
||||
});
|
||||
await setRtspEnable({ main_id: keepId, enable: false });
|
||||
await this.loadRtspDevices();
|
||||
const found = this.rtspDevices.find((d) => d.main_id === keepId);
|
||||
if (found) this.selectDevice(found);
|
||||
this.message = this.$t("rtsp.stopSuccess");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user