Compare commits
No commits in common. "main" and "feat/ils" have entirely different histories.
@ -11,7 +11,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>新創賦能</title>
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
|
||||
<!-- <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script> -->
|
||||
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
|
||||
<!-- <script type="text/javascript" src="/requirejs/config.js"></script> -->
|
||||
<!-- <script
|
||||
type="text/javascript"
|
||||
|
||||
7
package-lock.json
generated
7
package-lock.json
generated
@ -21,7 +21,6 @@
|
||||
"dayjs": "^1.11.10",
|
||||
"echarts": "^5.4.3",
|
||||
"flag-icons": "^7.2.3",
|
||||
"hls.js": "^1.6.12",
|
||||
"jquery-ui": "^1.14.1",
|
||||
"json-schema-generator": "^2.0.6",
|
||||
"mqtt": "^5.10.3",
|
||||
@ -3057,12 +3056,6 @@
|
||||
"integrity": "sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/hls.js": {
|
||||
"version": "1.6.12",
|
||||
"resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.12.tgz",
|
||||
"integrity": "sha512-Pz+7IzvkbAht/zXvwLzA/stUHNqztqKvlLbfpq6ZYU68+gZ+CZMlsbQBPUviRap+3IQ41E39ke7Ia+yvhsehEQ==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/htmlparser2": {
|
||||
"version": "3.10.1",
|
||||
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
|
||||
|
||||
@ -22,7 +22,6 @@
|
||||
"dayjs": "^1.11.10",
|
||||
"echarts": "^5.4.3",
|
||||
"flag-icons": "^7.2.3",
|
||||
"hls.js": "^1.6.12",
|
||||
"jquery-ui": "^1.14.1",
|
||||
"json-schema-generator": "^2.0.6",
|
||||
"mqtt": "^5.10.3",
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
// 開關 RTSP（啟用/停用）
|
||||
export const POST_SET_RTSP_ENABLE = `/api/rtsp/set-rtsp-enable`;
|
||||
|
||||
// 設定 SAMBA 儲存目錄
|
||||
export const POST_SET_SAMBA_DIRECTORY = `/api/rtsp/set-samba-directory`;
|
||||
@ -1,29 +0,0 @@
|
||||
import {
|
||||
POST_SET_RTSP_ENABLE,
|
||||
POST_SET_SAMBA_DIRECTORY,
|
||||
} from "./api";
|
||||
import instance from "@/util/request";
|
||||
import apihandler from "@/util/apihandler";
|
||||
|
||||
/**
|
||||
* 開關 RTSP
|
||||
* Swagger: POST /api/rtsp/set-rtsp-enable
|
||||
* body: { main_id: number, enable: boolean }
|
||||
*/
|
||||
export const setRtspEnable = async ({ main_id, enable }) => {
|
||||
const res = await instance.post(POST_SET_RTSP_ENABLE, { main_id, enable });
|
||||
return apihandler(res.code, res.data, { msg: res.msg, code: res.code });
|
||||
};
|
||||
|
||||
/**
|
||||
* 設定 SAMBA 儲存目錄
|
||||
* Swagger: POST /api/rtsp/set-samba-directory
|
||||
* body: { main_id: number, directory: string }
|
||||
*/
|
||||
export const setSambaDirectory = async ({ main_id, directory }) => {
|
||||
const res = await instance.post(POST_SET_SAMBA_DIRECTORY, {
|
||||
main_id,
|
||||
directory,
|
||||
});
|
||||
return apihandler(res.code, res.data, { msg: res.msg, code: res.code });
|
||||
};
|
||||
@ -106,7 +106,7 @@ watch(locale, () => {
|
||||
<img src="/logo.svg" alt="logo" class="w-6 lg:w-8 me-1" />
|
||||
新創賦能
|
||||
</router-link>
|
||||
<!-- <NavbarBuilding class="hidden lg:block ms-8" /> -->
|
||||
<NavbarBuilding class="hidden lg:block ms-8" />
|
||||
</div>
|
||||
<div class="hidden flex-1 lg:block">
|
||||
<NavbarItem
|
||||
|
||||
@ -51,7 +51,7 @@
|
||||
"indoor_chart": "室內",
|
||||
"temperature": "温度",
|
||||
"humidity": "湿度",
|
||||
"no_data": "无数据",
|
||||
"no_data":"无数据",
|
||||
"alerts_data": "异常资料"
|
||||
},
|
||||
"history": {
|
||||
@ -207,9 +207,6 @@
|
||||
"completed": "已完成",
|
||||
"worker_id": "工作人员编号",
|
||||
"notice": "注意事项",
|
||||
"video_storage_location": "告警影片儲存位置",
|
||||
"copy": "复制",
|
||||
"copied": "已复制！",
|
||||
"result_description": "结果描述",
|
||||
"upload_file": "上传文件",
|
||||
"enable": "启用",
|
||||
@ -421,21 +418,5 @@
|
||||
"system_point_name": "系统点位名称",
|
||||
"json_format_text": "请贴上 JSON 格式数据",
|
||||
"json_click_text": "请在左侧输入JSON并点选转换按钮"
|
||||
},
|
||||
"rtsp": {
|
||||
"title": "影像串流",
|
||||
"start": "开始侦测",
|
||||
"stop": "结束侦测",
|
||||
"selectPath": "选择存储位置",
|
||||
"selectDevice": "选择设备",
|
||||
"pleaseSelectDevice": "请先选择设备",
|
||||
"selectPathFirst": "请先选择存储文件夹",
|
||||
"startSuccess": "已开始侦测…",
|
||||
"startFail": "开始侦测失败，请稍后再试",
|
||||
"stopSuccess": "已请求结束侦测…",
|
||||
"stopFail": "结束侦测失败，请稍后再试",
|
||||
"noPermission": "未获得写入权限，请重新选择文件夹并授权",
|
||||
"selectFolderSuccess": "已选择文件夹：{name}",
|
||||
"selectFolderFail": "选择文件夹失败，请再试一次"
|
||||
}
|
||||
}
|
||||
|
||||
@ -207,9 +207,6 @@
|
||||
"completed": "已完成",
|
||||
"worker_id": "工作人員編號",
|
||||
"notice": "注意事項",
|
||||
"video_storage_location": "告警影片儲存位置",
|
||||
"copy": "複製",
|
||||
"copied": "已複製！",
|
||||
"result_description": "結果描述",
|
||||
"upload_file": "上傳檔案",
|
||||
"enable": "啟用",
|
||||
@ -421,21 +418,5 @@
|
||||
"system_point_name": "系統點位名稱",
|
||||
"json_format_text": "請貼上 JSON 格式數據",
|
||||
"json_click_text": "請在左側輸入JSON並點選轉換按鈕"
|
||||
},
|
||||
"rtsp": {
|
||||
"title": "影像串流",
|
||||
"start": "開始偵測",
|
||||
"stop": "結束偵測",
|
||||
"selectPath": "選擇儲存位置",
|
||||
"selectDevice": "選擇設備",
|
||||
"pleaseSelectDevice": "請先選擇設備",
|
||||
"selectPathFirst": "請先選擇儲存資料夾",
|
||||
"startSuccess": "已開始偵測…",
|
||||
"startFail": "開始偵測失敗，請稍後再試",
|
||||
"stopSuccess": "已請求結束偵測…",
|
||||
"stopFail": "結束偵測失敗，請稍後再試",
|
||||
"noPermission": "沒有取得寫入權限，請重新選擇資料夾並允許",
|
||||
"selectFolderSuccess": "已選擇資料夾：{name}",
|
||||
"selectFolderFail": "選擇資料夾失敗，請再試一次"
|
||||
}
|
||||
}
|
||||
|
||||
@ -51,7 +51,7 @@
|
||||
"indoor_chart": "Indoor",
|
||||
"temperature": "Temp.",
|
||||
"humidity": "Hum.",
|
||||
"no_data": "No data",
|
||||
"no_data":"No data",
|
||||
"alerts_data": "Abnormal data"
|
||||
},
|
||||
"history": {
|
||||
@ -207,9 +207,6 @@
|
||||
"completed": "Completed",
|
||||
"worker_id": "Worker ID",
|
||||
"notice": "Notice",
|
||||
"video_storage_location": "video storage location",
|
||||
"copy": "Copy",
|
||||
"copied": "Copied!",
|
||||
"result_description": "Result Description",
|
||||
"upload_file": "Upload File",
|
||||
"enable": "Enable",
|
||||
@ -421,21 +418,5 @@
|
||||
"system_point_name": "System Point Name",
|
||||
"json_format_text": "Please paste JSON format data",
|
||||
"json_click_text": "Please enter JSON on the left and click the conversion button"
|
||||
},
|
||||
"rtsp": {
|
||||
"title": "Video Stream",
|
||||
"start": "Start Detection",
|
||||
"stop": "Stop Detection",
|
||||
"selectPath": "Select Folder",
|
||||
"selectDevice": "Select Device",
|
||||
"pleaseSelectDevice": "Please select a device first",
|
||||
"selectPathFirst": "Please select a folder first",
|
||||
"startSuccess": "Detection started…",
|
||||
"startFail": "Failed to start detection, please try again later",
|
||||
"stopSuccess": "Detection stop requested…",
|
||||
"stopFail": "Failed to stop detection, please try again later",
|
||||
"noPermission": "No write permission. Please select a folder again and grant access",
|
||||
"selectFolderSuccess": "Folder selected: {name}",
|
||||
"selectFolderFail": "Failed to select folder, please try again"
|
||||
}
|
||||
}
|
||||
|
||||
@ -67,10 +67,4 @@ export const AUTHPAGES = [
|
||||
pageName: "Setting",
|
||||
navigate: "/Setting",
|
||||
},
|
||||
{
|
||||
authCode: "PF12",
|
||||
icon: "camera",
|
||||
pageName: "rtsp",
|
||||
navigate: "/rtsp",
|
||||
},
|
||||
];
|
||||
|
||||
@ -63,8 +63,7 @@ import {
|
||||
faSave,
|
||||
faCrown,
|
||||
faClock,
|
||||
faCheckCircle,
|
||||
faCamera
|
||||
faCheckCircle
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { faCircle } from "@fortawesome/free-regular-svg-icons";
|
||||
|
||||
@ -131,7 +130,6 @@ library.add(
|
||||
faCrown,
|
||||
faClock,
|
||||
faCheckCircle,
|
||||
faCamera,
|
||||
faCircle
|
||||
);
|
||||
|
||||
|
||||
85
src/main.js
85
src/main.js
@ -1,83 +1,60 @@
|
||||
// ---- styles ----
|
||||
import "./assets/index.css";
|
||||
import "./assets/main.css";
|
||||
// import "./assets/table.css";
|
||||
import "./assets/btn.css";
|
||||
import "./assets/pagination.css";
|
||||
|
||||
// ---- Vue core ----
|
||||
import { createApp, onErrorCaptured } from "vue";
|
||||
import { createApp } from "vue";
|
||||
import { createI18n } from "vue-i18n";
|
||||
import { createPinia } from "pinia";
|
||||
|
||||
// ---- App / Router ----
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
|
||||
// ---- UI / Icons / Global comps ----
|
||||
import Antd from "ant-design-vue";
|
||||
import "virtual:svg-icons-register";
|
||||
import SvgIcon from "@/components/SvgIcon.vue";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
import library from "./fontawsomeIconRegister";
|
||||
import "flag-icons/css/flag-icons.min.css";
|
||||
|
||||
// ---- Directives ----
|
||||
import { focusPlugin } from "@/directives/focusPlugin";
|
||||
import { draggable } from "@/directives/draggable";
|
||||
|
||||
// ---- i18n ----
|
||||
import tw from "./config/tw.json";
|
||||
import cn from "./config/cn.json";
|
||||
import us from "./config/us.json";
|
||||
import Antd from "ant-design-vue";
|
||||
import { createPinia } from "pinia";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import "virtual:svg-icons-register";
|
||||
// 引入项目中的全部全局组件
|
||||
import SvgIcon from "@/components/svgIcon.vue";
|
||||
import library from "./fontawsomeIconRegister";
|
||||
import "flag-icons/css/flag-icons.min.css";
|
||||
|
||||
/* import font awesome icon component */
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
|
||||
import { focusPlugin } from "@/directives/focusPlugin";
|
||||
import { draggable } from "@/directives/draggable";
|
||||
const messages = {
|
||||
tw,
|
||||
cn,
|
||||
us,
|
||||
};
|
||||
|
||||
const messages = { tw, cn, us };
|
||||
const storedLanguage = localStorage.getItem("EmpowerLanguage") || "tw";
|
||||
|
||||
const i18n = createI18n({
|
||||
legacy: false,
|
||||
locale: storedLanguage,
|
||||
fallbackLocale: "tw",
|
||||
fallbackLocale: 'tw',
|
||||
messages,
|
||||
});
|
||||
|
||||
// 建立 App（確保只 mount 一次）
|
||||
// ===========================================
|
||||
const app = createApp(App);
|
||||
|
||||
// 全域錯誤攔截：印出是哪個元件（含檔名）掛掉
|
||||
app.config.errorHandler = (err, instance, info) => {
|
||||
const name =
|
||||
(instance && (instance.type?.name || instance.type?.__file)) ||
|
||||
"(anonymous component)";
|
||||
// 在 patch/update 階段若報 instance.update is not a function，哪顆元件
|
||||
console.error("[VueError]", name, info, err);
|
||||
};
|
||||
|
||||
// （選用）開啟 devtools
|
||||
// app.config.devtools = true;
|
||||
|
||||
// ===========================================
|
||||
// 插件與全域元件
|
||||
// ===========================================
|
||||
app.use(createPinia());
|
||||
app.use(router);
|
||||
app.use(Antd);
|
||||
app.use(i18n);
|
||||
|
||||
// 全域元件註冊（維持你的寫法）
|
||||
// 组装成一个对象
|
||||
const allGlobalComponents = { SvgIcon, FontAwesomeIcon };
|
||||
app.use({
|
||||
const globalComponent = {
|
||||
install(app) {
|
||||
Object.keys(allGlobalComponents).forEach((k) => {
|
||||
app.component(k, allGlobalComponents[k]);
|
||||
// 循环注册所有的全局组件
|
||||
Object.keys(allGlobalComponents).forEach((componentName) => {
|
||||
app.component(componentName, allGlobalComponents[componentName]);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// 指令
|
||||
};
|
||||
app.use(globalComponent);
|
||||
app.use(focusPlugin);
|
||||
app.use(draggable);
|
||||
|
||||
// ===========================================
|
||||
// Mount（保證只呼叫一次）
|
||||
// ===========================================
|
||||
app.mount("#app");
|
||||
|
||||
@ -56,12 +56,6 @@ const router = createRouter({
|
||||
name: "assetManagement",
|
||||
component: () => import("@/views/AssetManagement/AssetManagement.vue"),
|
||||
},
|
||||
{
|
||||
path: "/rtsp",
|
||||
name: "rtsp",
|
||||
component: () => import("@/views/rtsp/Rtsp.vue"),
|
||||
meta: { layout: "map", title: "rtsp" },
|
||||
},
|
||||
{
|
||||
path: "/alert",
|
||||
name: "alert",
|
||||
|
||||
@ -91,12 +91,12 @@ watch(selectedBtn, (newValue) => {
|
||||
:getData="getMainSystems"
|
||||
:formState="formState"
|
||||
/>
|
||||
<button
|
||||
<!-- <button
|
||||
@click.stop.prevent="isEditMode = !isEditMode"
|
||||
class="btn btn-sm btn-outline-success"
|
||||
>
|
||||
{{ isEditMode ? t("button.stop_edit") : t("button.start_edit") }}
|
||||
</button>
|
||||
</button> -->
|
||||
</div>
|
||||
<ButtonConnectedGroup
|
||||
:items="items"
|
||||
|
||||
@ -51,9 +51,9 @@ const onReset = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button class="btn btn-sm btn-success" @click.stop.prevent="openModal">
|
||||
<!-- <button class="btn btn-sm btn-success" @click.stop.prevent="openModal">
|
||||
<font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
|
||||
</button>
|
||||
</button> -->
|
||||
<Modal
|
||||
id="asset_add_main_item"
|
||||
:title="
|
||||
|
||||
@ -1,13 +1,5 @@
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
defineProps,
|
||||
watch,
|
||||
inject,
|
||||
nextTick,
|
||||
onMounted,
|
||||
toRaw,
|
||||
} from "vue";
|
||||
import { ref, defineProps, watch, inject } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import { postOperationRecord } from "@/apis/alert";
|
||||
import * as yup from "yup";
|
||||
@ -21,27 +13,6 @@ 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([
|
||||
@ -93,43 +64,18 @@ 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 : "");
|
||||
// 只有新檔案才上傳檔案本體
|
||||
if (!file?.id && file) {
|
||||
formData.append(`lorf[${index}].file`, file);
|
||||
}
|
||||
formState.value?.lorf.forEach((file, index) => {
|
||||
formData.append(`lorf[${index}].id`, file.id ? file.id : "");
|
||||
formData.append(`lorf[${index}].file`, file.id ? null : 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(
|
||||
@ -137,9 +83,9 @@ const onOk = async () => {
|
||||
dayjs(dateItem.value[0].value).format("YYYY-MM-DD")
|
||||
);
|
||||
|
||||
if (props.editRecord.id) formData.append("id", props.editRecord.id);
|
||||
if (props.editRecord.uuid)
|
||||
formData.append("error_code", props.editRecord.uuid);
|
||||
props.editRecord.id && formData.append("id", props.editRecord.id);
|
||||
|
||||
props.editRecord.uuid && formData.append("error_code", props.editRecord.uuid);
|
||||
|
||||
formData.append("work_type", 2);
|
||||
formData.append(
|
||||
@ -150,7 +96,7 @@ const onOk = async () => {
|
||||
);
|
||||
|
||||
try {
|
||||
await handleSubmit(alertSchema, formState.value);
|
||||
const value = await handleSubmit(alertSchema, formState.value);
|
||||
const res = await postOperationRecord(formData);
|
||||
if (res.isSuccess) {
|
||||
search?.();
|
||||
@ -177,36 +123,32 @@ 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") {
|
||||
const d = value ? dayjs(value) : dayjs();
|
||||
formState.value.start_time = d.format("YYYY-MM-DD");
|
||||
dateItem.value[0].value = d; // 一律用 dayjs 物件
|
||||
formState.value.start_time = value
|
||||
? dayjs(value).format("YYYY-MM-DD")
|
||||
: dayjs().format("YYYY-MM-DD");
|
||||
dateItem.value[0].value = value;
|
||||
}
|
||||
// 維修項目
|
||||
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 }
|
||||
@ -221,11 +163,7 @@ watch(
|
||||
width="710"
|
||||
>
|
||||
<template #modalContent>
|
||||
<form
|
||||
ref="form"
|
||||
class="mt-5 w-full flex flex-wrap justify-between"
|
||||
@submit.prevent
|
||||
>
|
||||
<form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
|
||||
<Input
|
||||
v-if="formState && formState.formId"
|
||||
class="my-2"
|
||||
@ -348,48 +286,9 @@ watch(
|
||||
</span></template
|
||||
>
|
||||
</Select>
|
||||
|
||||
<!-- 注意事項 -->
|
||||
<Textarea :value="formState" name="notice" class="w-full my-2">
|
||||
<template #topLeft>{{ $t("alert.notice") }}</template>
|
||||
</Textarea>
|
||||
|
||||
<!-- 告警影片儲存位置-->
|
||||
<div class="my-4 w-full">
|
||||
<label class="text-lg">
|
||||
{{ $t("alert.video_storage_location") }}
|
||||
</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<Input
|
||||
class="flex-1"
|
||||
name="videoLocation"
|
||||
:value="videoLocation"
|
||||
readonly
|
||||
/>
|
||||
<div class="relative inline-flex items-center">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-success"
|
||||
@click.stop="copyToClipboard"
|
||||
>
|
||||
{{ $t("alert.copy") }}
|
||||
</button>
|
||||
|
||||
<transition name="fade">
|
||||
<span
|
||||
v-if="showTooltip"
|
||||
class="absolute left-full ml-4 top-1/2 -translate-y-1/2 text-white text-xs px-2 py-1 bg-gray-800 rounded shadow whitespace-nowrap"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
{{ $t("alert.copied") }}
|
||||
</span>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 結果描述 -->
|
||||
<Textarea :value="formState" name="description" class="w-full my-2">
|
||||
<template #topLeft>{{ $t("alert.result_description") }}</template>
|
||||
</Textarea>
|
||||
|
||||
@ -100,8 +100,6 @@ const getData = async () => {
|
||||
buying_date: device.buying_date,
|
||||
created_at: device.created_at,
|
||||
bgSize: 50,
|
||||
is_rtsp: device.is_rtsp === true,
|
||||
rtsp_url: device.rtsp_url || "",
|
||||
},
|
||||
];
|
||||
});
|
||||
@ -136,14 +134,20 @@ onUnmounted(() => {
|
||||
<template>
|
||||
<div class="flex flex-wrap justify-between">
|
||||
<div
|
||||
class="order-3 lg:order-1 w-full lg:w-1/4 min-h-screen flex flex-col justify-start item-center z-10 border-dashboard gap-12"
|
||||
class="order-3 lg:order-1 w-full lg:w-1/4 min-h-screen flex flex-col justify-start z-10 border-dashboard gap-5"
|
||||
>
|
||||
<div class="flex flex-col gap-5">
|
||||
<DashboardIndoor />
|
||||
</div>
|
||||
<div class="flex flex-col gap-5">
|
||||
<DashboardRefrig />
|
||||
</div>
|
||||
<!-- 無資料時：完整隱藏區塊，不留空白 -->
|
||||
|
||||
<!-- <DashboardProduct
|
||||
@visible-change="(v) => (productVisible = v)"
|
||||
v-show="productVisible"
|
||||
/>
|
||||
<DashboardProductComplete
|
||||
@visible-change="(v) => (productCompleteVisible = v)"
|
||||
v-show="productVisible"
|
||||
/> -->
|
||||
<DashboardIndoor />
|
||||
<DashboardRefrig class="mb-10" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
@ -152,19 +156,19 @@ onUnmounted(() => {
|
||||
<DashboardFloorBar />
|
||||
<DashboardEffectScatter :data="systemData" />
|
||||
</div>
|
||||
<!-- <div class="order-2 w-full lg:hidden my-3">
|
||||
<div class="order-2 w-full lg:hidden my-3">
|
||||
<DashboardSysCard :data="systemData" />
|
||||
</div> -->
|
||||
</div>
|
||||
<div
|
||||
class="order-last w-full lg:w-1/4 flex flex-col justify-start border-dashboard z-20 gap-12"
|
||||
class="order-last w-full lg:w-1/4 flex flex-col justify-start border-dashboard z-20 gap-5"
|
||||
>
|
||||
<div class="flex flex-col gap-5">
|
||||
<div>
|
||||
<DashboardElectricity />
|
||||
</div>
|
||||
<div class="flex flex-col gap-5">
|
||||
<div class="mt-10">
|
||||
<DashboardEmission />
|
||||
</div>
|
||||
<div class="flex flex-col gap-5">
|
||||
<div class="mt-10">
|
||||
<DashboardAlert />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,6 @@ import EffectScatter from "@/components/chart/EffectScatter.vue";
|
||||
import DashboardEffectScatterModal from "./DashboardEffectScatterModal.vue";
|
||||
import useSearchParam from "@/hooks/useSearchParam";
|
||||
import { computed, inject, ref, watch } from "vue";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const { t } = useI18n();
|
||||
@ -92,47 +91,45 @@ const handleItemClick = (params) => {
|
||||
watch(
|
||||
[searchParams, () => asset_floor_chart.value, () => props.data],
|
||||
([newValue, newChart, newData], [oldValue]) => {
|
||||
console.groupCollapsed("[FloorMap] watch fired");
|
||||
console.log("floor_id =", newValue.floor_id);
|
||||
console.log("chart ready =", !!newChart);
|
||||
console.log("data keys =", Object.keys(newData || {}).length);
|
||||
console.groupEnd();
|
||||
const floorId = newValue.floor_id;
|
||||
const chartReady = !!newChart;
|
||||
// (1) 首次/樓層切換：不等 data，先載 SVG
|
||||
if (floorId && chartReady && currentFloorId.value !== floorId) {
|
||||
console.log("[FloorMap] load SVG for floor:", floorId);
|
||||
currentFloorId.value = floorId;
|
||||
newChart.updateSvg(
|
||||
{
|
||||
full_name: floorId,
|
||||
path: `${FILE_BASEURL}/upload/floor_map/${floorId}.svg`,
|
||||
},
|
||||
defaultOption(floorId, []) // 先不帶點位
|
||||
);
|
||||
setTimeout(() => {
|
||||
if (newChart.chart) {
|
||||
newChart.chart.off("click");
|
||||
newChart.chart.on("click", handleItemClick);
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// (2) 資料到齊後，再補點位（不重載 SVG）
|
||||
if (
|
||||
newValue.floor_id &&
|
||||
newChart &&
|
||||
Object.keys(newData || {}).length > 0
|
||||
floorId &&
|
||||
chartReady &&
|
||||
Object.keys(newData || {}).length > 0 &&
|
||||
newChart.chart
|
||||
) {
|
||||
const isFloorChanged = currentFloorId.value !== newValue.floor_id;
|
||||
|
||||
if (isFloorChanged) {
|
||||
// 樓層切換時才重新載入 SVG
|
||||
console.log(
|
||||
"Floor changed, updating chart with new SVG",
|
||||
newValue.floor_id
|
||||
);
|
||||
currentFloorId.value = newValue.floor_id;
|
||||
newChart.updateSvg(
|
||||
{
|
||||
full_name: newValue.floor_id,
|
||||
path: `${FILE_BASEURL}/upload/floor_map/${newValue.floor_id}.svg`,
|
||||
},
|
||||
defaultOption(newValue.floor_id, currentIconData.value)
|
||||
);
|
||||
|
||||
// 添加點擊事件監聽
|
||||
setTimeout(() => {
|
||||
if (newChart.chart) {
|
||||
newChart.chart.off("click"); // 移除舊的監聽器
|
||||
newChart.chart.on("click", handleItemClick);
|
||||
}
|
||||
}, 100);
|
||||
} else if (currentFloorId.value === newValue.floor_id && newChart.chart) {
|
||||
// 只是資料更新時，只更新圖表資料，不重新載入 SVG
|
||||
console.log("Data updated, refreshing chart data only");
|
||||
newChart.chart.setOption(
|
||||
{
|
||||
series: defaultOption(newValue.floor_id, currentIconData.value)
|
||||
.series,
|
||||
},
|
||||
false,
|
||||
true
|
||||
);
|
||||
}
|
||||
console.log("[FloorMap] update series only for floor:", floorId);
|
||||
newChart.chart.setOption(
|
||||
{ series: defaultOption(floorId, currentIconData.value).series },
|
||||
false,
|
||||
true
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -6,7 +6,10 @@ import { useI18n } from "vue-i18n";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const currentTab = ref("desktop");
|
||||
const changeOpenKey = (key) => {
|
||||
currentTab.value = key;
|
||||
};
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
@ -14,16 +17,6 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const isRtsp = computed(() => props.data?.is_rtsp === true);
|
||||
|
||||
const monitorUrl = computed(() => props.data?.rtsp_url || "");
|
||||
|
||||
// ------ tab 狀態 / 控制（非 RTSP 時使用）------
|
||||
const currentTab = ref("desktop");
|
||||
const changeOpenKey = (key) => {
|
||||
currentTab.value = key;
|
||||
};
|
||||
|
||||
const modal = ref(null);
|
||||
|
||||
// 當 data 有值時自動開啟 modal
|
||||
@ -31,23 +24,15 @@ watch(
|
||||
() => props.data,
|
||||
(newData) => {
|
||||
if (newData) {
|
||||
console.log("[props.data] =\n", JSON.stringify(props.data, null, 2));
|
||||
dashboard_effectScatter_modal.showModal();
|
||||
if (!isRtsp.value) currentTab.value = "desktop";
|
||||
console.debug(
|
||||
"[Modal Debug] is_rtsp:",
|
||||
newData.is_rtsp,
|
||||
"monitorUrl:",
|
||||
monitorUrl.value
|
||||
);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 關閉 modal
|
||||
// 關閉 modal 的處理函數
|
||||
const handleCancel = () => {
|
||||
currentTab.value = "desktop";
|
||||
currentTab.value = "desktop"; // 重置到 desktop tab
|
||||
dashboard_effectScatter_modal.close();
|
||||
};
|
||||
</script>
|
||||
@ -62,75 +47,70 @@ const handleCancel = () => {
|
||||
:draggable="true"
|
||||
modalClass="max-h-[80vh]"
|
||||
>
|
||||
<!-- 標題列：RTSP 不顯示分頁鈕；非 RTSP 顯示分頁鈕 -->
|
||||
<template #modalTitle>
|
||||
<div class="flex items-center justify-between">
|
||||
<span>{{ props.data?.full_name }}</span>
|
||||
|
||||
<div class="flex items-center space-x-2">
|
||||
<template v-if="!isRtsp">
|
||||
<button
|
||||
type="button"
|
||||
class="text-base btn-link btn-text-without-border px-2"
|
||||
@click="() => changeOpenKey('desktop')"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'desktop']"
|
||||
size="lg"
|
||||
:class="
|
||||
twMerge(
|
||||
currentTab === 'desktop' ? 'text-success' : 'text-[#a5abb1]'
|
||||
)
|
||||
"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-base btn-link btn-text-without-border px-2"
|
||||
@click="() => changeOpenKey('image')"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'image']"
|
||||
size="lg"
|
||||
:class="
|
||||
twMerge(
|
||||
currentTab === 'image' ? 'text-success' : 'text-[#a5abb1]'
|
||||
)
|
||||
"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-base btn-link btn-text-without-border px-2"
|
||||
@click="() => changeOpenKey('cog')"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'cog']"
|
||||
size="lg"
|
||||
:class="
|
||||
twMerge(
|
||||
currentTab === 'cog' ? 'text-success' : 'text-[#a5abb1]'
|
||||
)
|
||||
"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-base btn-link btn-text-without-border px-2"
|
||||
@click="() => changeOpenKey('chart')"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'chart-line']"
|
||||
size="lg"
|
||||
:class="
|
||||
twMerge(
|
||||
currentTab === 'chart' ? 'text-success' : 'text-[#a5abb1]'
|
||||
)
|
||||
"
|
||||
/>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="text-base btn-link btn-text-without-border px-2"
|
||||
@click="() => changeOpenKey('desktop')"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'desktop']"
|
||||
size="lg"
|
||||
:class="
|
||||
twMerge(
|
||||
currentTab === 'desktop' ? 'text-success' : 'text-[#a5abb1]'
|
||||
)
|
||||
"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-base btn-link btn-text-without-border px-2"
|
||||
@click="() => changeOpenKey('image')"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'image']"
|
||||
size="lg"
|
||||
:class="
|
||||
twMerge(
|
||||
currentTab === 'image' ? 'text-success' : 'text-[#a5abb1]'
|
||||
)
|
||||
"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-base btn-link btn-text-without-border px-2"
|
||||
@click="() => changeOpenKey('cog')"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'cog']"
|
||||
size="lg"
|
||||
:class="
|
||||
twMerge(
|
||||
currentTab === 'cog' ? 'text-success' : 'text-[#a5abb1]'
|
||||
)
|
||||
"
|
||||
/>
|
||||
</button>
|
||||
<Button
|
||||
type="button"
|
||||
class="text-base btn-link btn-text-without-border px-2"
|
||||
@click="() => changeOpenKey('chart')"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'chart-line']"
|
||||
size="lg"
|
||||
:class="
|
||||
twMerge(
|
||||
currentTab === 'chart' ? 'text-success' : 'text-[#a5abb1]'
|
||||
)
|
||||
"
|
||||
/>
|
||||
</Button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-link btn-text-without-border px-2"
|
||||
@ -146,20 +126,7 @@ const handleCancel = () => {
|
||||
</template>
|
||||
|
||||
<template #modalContent>
|
||||
<!-- RTSP，顯示 iframe -->
|
||||
<div v-if="isRtsp" class="h-[60vh] py-4">
|
||||
<div class="relative bg-black rounded h-full overflow-hidden">
|
||||
<iframe
|
||||
:src="monitorUrl"
|
||||
class="absolute inset-0 w-full h-full"
|
||||
allow="autoplay; fullscreen; picture-in-picture"
|
||||
referrerpolicy="no-referrer"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 非 RTSP，顯示四分頁 -->
|
||||
<div v-else class="space-y-4 py-4">
|
||||
<div class="space-y-4 py-4">
|
||||
<!-- Desktop Tab - 基本資訊 -->
|
||||
<div v-if="currentTab === 'desktop'" class="grid grid-cols-1 gap-4">
|
||||
<table
|
||||
@ -207,6 +174,48 @@ const handleCancel = () => {
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- <tr v-if="props.data.Online_color" class="hover:bg-gray-600">
|
||||
<td class="p-2 border">Online 顏色</td>
|
||||
<td class="p-2 border">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div
|
||||
class="w-6 h-6 rounded border border-gray-300"
|
||||
:style="{ backgroundColor: props.data.Online_color }"
|
||||
></div>
|
||||
<span class="text-gray-100 text-sm font-mono">{{
|
||||
props.data.Online_color
|
||||
}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr> -->
|
||||
<!-- <tr v-if="props.data.Offline_color" class="hover:bg-gray-600">
|
||||
<td class="p-2 border">Offline 顏色</td>
|
||||
<td class="p-2 border">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div
|
||||
class="w-6 h-6 rounded border border-gray-300"
|
||||
:style="{ backgroundColor: props.data.Offline_color }"
|
||||
></div>
|
||||
<span class="text-gray-100 text-sm font-mono">{{
|
||||
props.data.Offline_color
|
||||
}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr> -->
|
||||
<!-- <tr v-if="props.data.Error_color" class="hover:bg-gray-600">
|
||||
<td class="p-2 border">Error 顏色</td>
|
||||
<td class="p-2 border">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div
|
||||
class="w-6 h-6 rounded border border-gray-300"
|
||||
:style="{ backgroundColor: props.data.Error_color }"
|
||||
></div>
|
||||
<span class="text-gray-100 text-sm font-mono">{{
|
||||
props.data.Error_color
|
||||
}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr> -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@ -248,35 +257,24 @@ const handleCancel = () => {
|
||||
</td>
|
||||
<td class="p-2 border">{{ props.data.device_coordinate }}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="p-2 border">
|
||||
{{ $t("assetManagement.brand_and_modal") }}
|
||||
</td>
|
||||
<td class="p-2 border">
|
||||
{{ props.data.brand }} / {{ props.data.device_model }}
|
||||
</td>
|
||||
<td class="p-2 border">{{ $t("assetManagement.brand_and_modal") }}</td>
|
||||
<td class="p-2 border">{{ props.data.brand }} / {{ props.data.device_model }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border">
|
||||
{{ $t("assetManagement.company_and_contact") }}
|
||||
</td>
|
||||
<td class="p-2 border">
|
||||
{{ props.data.operation_name }} /
|
||||
{{ props.data.operation_contact_person }}
|
||||
</td>
|
||||
<td class="p-2 border">{{ $t("assetManagement.company_and_contact") }}</td>
|
||||
<td class="p-2 border">{{ props.data.operation_name }} / {{ props.data.operation_contact_person }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border">
|
||||
{{ $t("assetManagement.buying_date") }}
|
||||
</td>
|
||||
<td class="p-2 border">{{ $t("assetManagement.buying_date") }}</td>
|
||||
<td class="p-2 border">{{ props.data.buying_date }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border">
|
||||
{{ $t("assetManagement.created_at") }}
|
||||
</td>
|
||||
<td class="p-2 border">{{ $t("assetManagement.created_at") }}</td>
|
||||
<td class="p-2 border">{{ props.data.created_at }}</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@ -286,9 +284,5 @@ const handleCancel = () => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 讓 Modal 內容能撐滿高度 */
|
||||
:deep(.min-h-\[200px\]) {
|
||||
min-height: 0 !important;
|
||||
height: 100%;
|
||||
}
|
||||
/* 可以添加額外的樣式 */
|
||||
</style>
|
||||
|
||||
@ -8,7 +8,6 @@ import useBuildingStore from "@/stores/useBuildingStore";
|
||||
const store = useBuildingStore();
|
||||
const { t, locale } = useI18n();
|
||||
const taipower_data = ref([]);
|
||||
const elecUseDayData = ref([]);
|
||||
const carbonValue = ref(null);
|
||||
const carbonData = ref(null);
|
||||
const search_data = computed(() => {
|
||||
@ -108,7 +107,6 @@ watch(
|
||||
JSON.stringify(newValue) !== JSON.stringify(oldValue)
|
||||
) {
|
||||
getData(newValue);
|
||||
getElecUseDayData(newValue);
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -50,11 +50,10 @@ const defaultChartOption = ref({
|
||||
tooltip: { trigger: "axis" },
|
||||
legend: {
|
||||
data: [],
|
||||
top: 0, // 靠最上方
|
||||
textStyle: { color: "#ffffff", fontSize: 12 },
|
||||
textStyle: { color: "#ffffff", fontSize: 16 },
|
||||
},
|
||||
grid: {
|
||||
top: "35%",
|
||||
top: "10%",
|
||||
left: "0%",
|
||||
right: "0%",
|
||||
bottom: "0%",
|
||||
@ -204,7 +203,7 @@ onUnmounted(() => {
|
||||
<h3 class="text-info text-xl text-center">
|
||||
{{ $t("dashboard.indoor_chart") }}
|
||||
</h3>
|
||||
<div class="w-full flex justify-center items-center relative">
|
||||
<div className="my-3 w-full flex justify-center relative">
|
||||
<ButtonConnectedGroup
|
||||
:items="items"
|
||||
:onclick="(e, item) => changeActiveBtn(item)"
|
||||
|
||||
@ -1,61 +1,150 @@
|
||||
<script setup>
|
||||
import LineChart from "@/components/chart/LineChart.vue";
|
||||
import { SECOND_CHART_COLOR } from "@/constant";
|
||||
import dayjs from "dayjs";
|
||||
import { ref, watch, onUnmounted, computed } from "vue";
|
||||
import { ref, watch, computed, onUnmounted } from "vue";
|
||||
import useActiveBtn from "@/hooks/useActiveBtn";
|
||||
import { getDashboardTemp } from "@/apis/dashboard";
|
||||
import useSearchParams from "@/hooks/useSearchParam";
|
||||
import useBuildingStore from "@/stores/useBuildingStore";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const { searchParams } = useSearchParams();
|
||||
const buildingStore = useBuildingStore();
|
||||
const timeoutTimer = ref(null); // 定時器
|
||||
|
||||
const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
|
||||
|
||||
const allTempData = ref([]);
|
||||
const currentOptionType = ref(1); // 1 = 溫度，2 = 濕度
|
||||
const noData = ref(true); // 初始先視為無資料，等 API 後再更新
|
||||
const chartRef = ref(null);
|
||||
|
||||
// 監聽建築切換：依 sysConfig 決定是否顯示／取數據
|
||||
// 狀態與按鈕邏輯
|
||||
const timeoutTimer = ref(null);
|
||||
const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
|
||||
const currentOptionType = ref(1); // 1: 溫度, 2: 濕度
|
||||
const noData = ref(true); // 目前顯示「無資料」
|
||||
|
||||
// 確認是否有資料，無則不呼叫 getDashboardTemp 也不顯示 chart
|
||||
watch(
|
||||
() => buildingStore.selectedBuilding?.building_guid,
|
||||
async (guid) => {
|
||||
if (timeoutTimer.value) clearInterval(timeoutTimer.value);
|
||||
allTempData.value = [];
|
||||
noData.value = true;
|
||||
if (!guid) return;
|
||||
if (guid) {
|
||||
await buildingStore.getSysConfig(guid);
|
||||
|
||||
await buildingStore.getSysConfig(guid);
|
||||
const showRefrigeration =
|
||||
buildingStore.sysConfig?.value?.show_refrigeration;
|
||||
const showRefrigeration =
|
||||
buildingStore.sysConfig?.value?.show_refrigeration;
|
||||
|
||||
if (showRefrigeration === false) {
|
||||
noData.value = true; // 不顯示
|
||||
return;
|
||||
if (showRefrigeration === false) {
|
||||
noData.value = true; // 不顯示圖表
|
||||
return; // 不呼叫 getData
|
||||
}
|
||||
|
||||
noData.value = false; // 有資料才進行呼叫
|
||||
getData();
|
||||
timeoutTimer.value = setInterval(getData, 60000); // 每分鐘叫一次
|
||||
}
|
||||
|
||||
noData.value = false; // 顯示並開始取資料
|
||||
await getData();
|
||||
timeoutTimer.value = setInterval(getData, 60_000); // 每分鐘更新
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 預設圖表設定
|
||||
// 新增 API 資料取得函式
|
||||
const getData = async () => {
|
||||
const buildingGuid = buildingStore.selectedBuilding?.building_guid;
|
||||
if (!buildingGuid) return;
|
||||
|
||||
try {
|
||||
const res = await getDashboardTemp({
|
||||
building_guid: buildingGuid,
|
||||
tempOption: 2, // 冷藏區域（室溫為 tempOption: 1）
|
||||
timeInterval: 1,
|
||||
option: currentOptionType.value, // 1: 溫度，2: 濕度
|
||||
});
|
||||
|
||||
const key = "冷藏"; // 根據實際後端回傳 key
|
||||
allTempData.value = res.isSuccess ? res.data?.[key] ?? [] : [];
|
||||
noData.value = allTempData.value.length === 0;
|
||||
} catch (e) {
|
||||
console.error("getDashboardTemp error", e);
|
||||
allTempData.value = [];
|
||||
noData.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
// 資料更新 watch
|
||||
watch(
|
||||
allTempData,
|
||||
(newVal) => {
|
||||
if (!newVal?.length || !other_real_temp_chart.value?.chart) return;
|
||||
|
||||
const firstValid = newVal.find((d) => d.data?.length);
|
||||
if (!firstValid) return;
|
||||
|
||||
const sampledXAxis = sampleData(firstValid.data).map(({ time }) =>
|
||||
dayjs(time).format("HH:mm:ss")
|
||||
);
|
||||
|
||||
const allValues = newVal
|
||||
.flatMap((d) => sampleData(d.data))
|
||||
.map((d) => d.value)
|
||||
.filter((v) => v != null);
|
||||
|
||||
if (!allValues.length) return;
|
||||
|
||||
const yMin = Math.floor(Math.min(...allValues)) - 1;
|
||||
const yMax = Math.ceil(Math.max(...allValues)) + 1;
|
||||
|
||||
other_real_temp_chart.value.chart.setOption({
|
||||
legend: {
|
||||
data: newVal.map((d) => d.full_name),
|
||||
},
|
||||
xAxis: {
|
||||
data: sampledXAxis,
|
||||
},
|
||||
yAxis: {
|
||||
min: yMin,
|
||||
max: yMax,
|
||||
},
|
||||
series: newVal.map((d, i) => ({
|
||||
name: d.full_name,
|
||||
type: "line",
|
||||
data: sampleData(d.data).map(({ value }) => value),
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
color: SECOND_CHART_COLOR[i % SECOND_CHART_COLOR.length],
|
||||
},
|
||||
})),
|
||||
});
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// 限制顯示資料點數
|
||||
function sampleData(data = [], maxCount = 30) {
|
||||
const len = data.length;
|
||||
if (len <= maxCount) return data;
|
||||
|
||||
const sampled = [];
|
||||
const step = (len - 1) / (maxCount - 1);
|
||||
|
||||
for (let i = 0; i < maxCount; i++) {
|
||||
const index = Math.round(i * step);
|
||||
sampled.push(data[index]);
|
||||
}
|
||||
|
||||
return sampled;
|
||||
}
|
||||
|
||||
// 圖表參數預設（暫不使用）
|
||||
const other_real_temp_chart = ref(null);
|
||||
const defaultChartOption = ref({
|
||||
tooltip: { trigger: "axis" },
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: [],
|
||||
top: 0, // 靠最上方
|
||||
textStyle: { color: "#ffffff", fontSize: 12 },
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "35%",
|
||||
top: "10%",
|
||||
left: "0%",
|
||||
right: "0%",
|
||||
bottom: "0%",
|
||||
@ -75,129 +164,40 @@ const defaultChartOption = ref({
|
||||
series: [],
|
||||
});
|
||||
|
||||
// 取得冷藏溫度/濕度資料
|
||||
const getData = async () => {
|
||||
const buildingGuid = buildingStore.selectedBuilding?.building_guid;
|
||||
if (!buildingGuid) return;
|
||||
|
||||
try {
|
||||
const res = await getDashboardTemp({
|
||||
building_guid: buildingGuid,
|
||||
tempOption: 2, // ⚠️ 冷藏區域
|
||||
timeInterval: 1,
|
||||
option: currentOptionType.value, // 1: 溫度；2: 濕度
|
||||
});
|
||||
|
||||
console.log("[getDashboardTemp] 冷藏回傳：", res);
|
||||
|
||||
const key = "冷藏溫度"; // 依你剛剛確認到的 key
|
||||
allTempData.value = res.isSuccess ? res.data?.[key] ?? [] : [];
|
||||
noData.value = allTempData.value.length === 0;
|
||||
|
||||
console.log("[getDashboardTemp] allTempData：", allTempData.value);
|
||||
console.log("[getDashboardTemp] noData：", noData.value);
|
||||
} catch (e) {
|
||||
console.error("getDashboardTemp error", e);
|
||||
allTempData.value = [];
|
||||
noData.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
// 溫度／濕度切換按鈕
|
||||
// 按鈕名稱根據語系更新
|
||||
const buttonItems = computed(() => [
|
||||
{ key: 1, title: t("dashboard.temperature"), active: true },
|
||||
{ key: 2, title: t("dashboard.humidity"), active: false },
|
||||
]);
|
||||
|
||||
// 語系切換時更新按鈕文案
|
||||
watch(
|
||||
() => locale.value,
|
||||
() => setItems(buttonItems.value),
|
||||
() => {
|
||||
setItems(buttonItems.value);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 切換溫度/濕度後重取資料並重啟輪詢
|
||||
// 切換 tab（目前無實際資料行為）
|
||||
watch(
|
||||
selectedBtn,
|
||||
async (newVal) => {
|
||||
if ([1, 2].includes(newVal?.key)) {
|
||||
currentOptionType.value = newVal.key;
|
||||
(newValue) => {
|
||||
if (timeoutTimer.value) {
|
||||
clearInterval(timeoutTimer.value);
|
||||
}
|
||||
|
||||
if (buildingStore.sysConfig?.value?.show_refrigeration !== false) {
|
||||
if (timeoutTimer.value) clearInterval(timeoutTimer.value);
|
||||
await getData();
|
||||
timeoutTimer.value = setInterval(getData, 60_000);
|
||||
}
|
||||
if ([1, 2].includes(newValue?.key)) {
|
||||
currentOptionType.value = newValue.key;
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
|
||||
// 限制顯示資料點數
|
||||
function sampleData(data = [], maxCount = 30) {
|
||||
const len = data.length;
|
||||
if (len <= maxCount) return data;
|
||||
|
||||
const sampled = [];
|
||||
const step = (len - 1) / (maxCount - 1);
|
||||
for (let i = 0; i < maxCount; i++) {
|
||||
const index = Math.round(i * step);
|
||||
sampled.push(data[index]);
|
||||
}
|
||||
return sampled;
|
||||
}
|
||||
|
||||
// 更新圖表
|
||||
watch(
|
||||
allTempData,
|
||||
(newVal) => {
|
||||
const chart = chartRef.value?.chart;
|
||||
if (!chart || !Array.isArray(newVal) || newVal.length === 0) return;
|
||||
|
||||
const firstValid = newVal.find(
|
||||
(d) => Array.isArray(d.data) && d.data.length
|
||||
);
|
||||
if (!firstValid) return;
|
||||
|
||||
const sampledXAxis = sampleData(firstValid.data).map(({ time }) =>
|
||||
dayjs(time).format("HH:mm:ss")
|
||||
);
|
||||
|
||||
const allValues = newVal
|
||||
.flatMap((d) => sampleData(d.data))
|
||||
.map((d) => d?.value)
|
||||
.filter((v) => typeof v === "number" && !Number.isNaN(v));
|
||||
|
||||
if (!allValues.length) return;
|
||||
|
||||
let yMin = Math.floor(Math.min(...allValues)) - 1;
|
||||
let yMax = Math.ceil(Math.max(...allValues)) + 1;
|
||||
if (yMin === yMax) {
|
||||
yMin -= 1;
|
||||
yMax += 1;
|
||||
}
|
||||
|
||||
chart.setOption({
|
||||
legend: { data: newVal.map((d) => d.full_name) },
|
||||
xAxis: { data: sampledXAxis },
|
||||
yAxis: { min: yMin, max: yMax },
|
||||
series: newVal.map((d, i) => ({
|
||||
name: d.full_name,
|
||||
type: "line",
|
||||
data: sampleData(d.data).map(({ value }) => value),
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
color: SECOND_CHART_COLOR[i % SECOND_CHART_COLOR.length],
|
||||
},
|
||||
})),
|
||||
});
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// 離開元件時清除定時器
|
||||
// 清除計時器
|
||||
onUnmounted(() => {
|
||||
if (timeoutTimer.value) clearInterval(timeoutTimer.value);
|
||||
if (timeoutTimer.value) {
|
||||
clearInterval(timeoutTimer.value);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -205,27 +205,24 @@ onUnmounted(() => {
|
||||
<h3 class="text-info text-xl text-center">
|
||||
{{ $t("dashboard.refrig_chart") }}
|
||||
</h3>
|
||||
|
||||
<div class="w-full flex justify-center relative">
|
||||
<div className="my-3 w-full flex justify-center relative">
|
||||
<ButtonConnectedGroup
|
||||
:items="items"
|
||||
:onclick="(e, item) => changeActiveBtn(item)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="noData"
|
||||
class="text-center text-white text-lg min-h-[260px] flex items-center justify-center"
|
||||
>
|
||||
{{ $t("dashboard.no_data") }}
|
||||
</div>
|
||||
|
||||
<LineChart
|
||||
v-else
|
||||
id="dashboard_refrigeration_temp"
|
||||
v-if="!noData"
|
||||
id="dashboard_other_real_temp"
|
||||
class="min-h-[260px] max-h-fit"
|
||||
:option="defaultChartOption"
|
||||
ref="chartRef"
|
||||
ref="indoorChartRef"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,276 +0,0 @@
|
||||
<template>
|
||||
<section class="min-h-[600px] h-screen">
|
||||
<h1 class="text-2xl font-extrabold mb-2">{{ $t("rtsp.title") }}</h1>
|
||||
|
||||
<!-- Tabs：選擇要顯示的攝影機 -->
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<h2 class="text-lg font-bold whitespace-nowrap">
|
||||
{{ $t("rtsp.selectDevice") }} :
|
||||
</h2>
|
||||
|
||||
<ButtonConnectedGroup
|
||||
:items="items"
|
||||
:onclick="
|
||||
(e, item) => {
|
||||
changeActiveBtn(item);
|
||||
const found = rtspDevices.find((r) => r.main_id === item.key);
|
||||
if (found) selectDevice(found);
|
||||
}
|
||||
"
|
||||
:className="`flex flex-wrap`"
|
||||
size="sm"
|
||||
color="info"
|
||||
>
|
||||
<template #buttonContent="{ item }">
|
||||
<span class="text-base">{{ item.title }}</span>
|
||||
</template>
|
||||
</ButtonConnectedGroup>
|
||||
</div>
|
||||
|
||||
<div class="flex h-[70%] gap-4">
|
||||
<!-- 左側：即時監控 -->
|
||||
<div class="relative w-full flex-1 rounded border overflow-hidden">
|
||||
<iframe
|
||||
:src="monitorUrl"
|
||||
class="absolute inset-0 w-full h-full"
|
||||
allow="autoplay; fullscreen; picture-in-picture"
|
||||
referrerpolicy="no-referrer"
|
||||
></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"
|
||||
:title="!selectedMainId ? $t('rtsp.pleaseSelectDevice') : ''"
|
||||
>
|
||||
{{ $t("rtsp.start") }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-error text-white w-40"
|
||||
@click="stopDetection"
|
||||
:disabled="isStopping || !selectedMainId"
|
||||
:title="!selectedMainId ? $t('rtsp.pleaseSelectDevice') : ''"
|
||||
>
|
||||
{{ $t("rtsp.stop") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p v-if="message" class="text-sm text-info">{{ message }}</p>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSystemDevices } from "@/apis/system";
|
||||
import { setRtspEnable } from "@/apis/rtsp"; // 已移除 setSambaDirectory
|
||||
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";
|
||||
|
||||
export default {
|
||||
name: "Rtsp",
|
||||
setup() {
|
||||
const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
|
||||
return { items, changeActiveBtn, setItems, selectedBtn };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
monitorUrl: DEFAULT_MONITOR_URL,
|
||||
|
||||
// 偵測控制
|
||||
isStarting: false,
|
||||
isStopping: false,
|
||||
|
||||
// UI 狀態
|
||||
message: "",
|
||||
|
||||
// 資料整理
|
||||
deviceData: {},
|
||||
rtspDevices: [], // { main_id, full_name, rtsp_url, ... }
|
||||
selectedMainId: null, // 目前選中的設備 main_id
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
await this.getData();
|
||||
},
|
||||
watch: {
|
||||
selectedBtn: {
|
||||
handler(newVal) {
|
||||
if (!newVal) return;
|
||||
const found = this.rtspDevices.find((r) => r.main_id === newVal.key);
|
||||
if (found) this.selectDevice(found);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async getData() {
|
||||
try {
|
||||
const useBuildingStore = (await import("@/stores/useBuildingStore"))
|
||||
.default;
|
||||
const buildingStore = useBuildingStore();
|
||||
const building_guid =
|
||||
buildingStore?.selectedBuilding?.building_guid || "";
|
||||
|
||||
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 || ""));
|
||||
|
||||
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;
|
||||
} else {
|
||||
this.selectedMainId = null;
|
||||
this.monitorUrl = DEFAULT_MONITOR_URL;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("getData() 失敗", err);
|
||||
this.setItems([]);
|
||||
this.rtspDevices = [];
|
||||
this.selectedMainId = null;
|
||||
this.monitorUrl = DEFAULT_MONITOR_URL;
|
||||
}
|
||||
},
|
||||
|
||||
// 切換設備 Tab
|
||||
selectDevice(d) {
|
||||
this.selectedMainId = d.main_id;
|
||||
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;
|
||||
try {
|
||||
await setRtspEnable({
|
||||
main_id: this.selectedMainId,
|
||||
enable: true,
|
||||
});
|
||||
this.message = this.$t("rtsp.startSuccess");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
this.message = this.$t("rtsp.startFail");
|
||||
} finally {
|
||||
this.isStarting = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 結束偵測：setRtspEnable(false)
|
||||
async stopDetection() {
|
||||
if (!this.selectedMainId) {
|
||||
this.message = this.$t("rtsp.pleaseSelectDevice");
|
||||
return;
|
||||
}
|
||||
this.isStopping = true;
|
||||
try {
|
||||
await setRtspEnable({
|
||||
main_id: this.selectedMainId,
|
||||
enable: false,
|
||||
});
|
||||
this.message = this.$t("rtsp.stopSuccess");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
this.message = this.$t("rtsp.stopFail");
|
||||
} finally {
|
||||
this.isStopping = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -20,7 +20,7 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <a-carousel arrows class="mt-5 shadow-lg">
|
||||
<a-carousel arrows class="mt-5 shadow-lg">
|
||||
<template #prevArrow>
|
||||
<div class="custom-slick-arrow" style="left: 10px; z-index: 1">
|
||||
<font-awesome-icon
|
||||
@ -42,7 +42,7 @@ watch(
|
||||
<div v-for="(url, index) in imgData" :key="index">
|
||||
<img :src="`${FILE_BASEURL}/${url}`" alt="Image" />
|
||||
</div>
|
||||
</a-carousel> -->
|
||||
</a-carousel>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -16,7 +16,7 @@ export default defineConfig({
|
||||
server: {
|
||||
proxy: {
|
||||
"/upload": {
|
||||
target: "https://ibms-Empower.production.mjmtech.com.tw",
|
||||
target: "https://ibms-empower2.production.mjmtech.com.tw",
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
},
|
||||
@ -42,7 +42,6 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
dedupe: ["vue"],
|
||||
alias: {
|
||||
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||
"@ASSET": fileURLToPath(new URL("./src/assets", import.meta.url)),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user