ko.ko/CviLux_fe
1
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Compare commits

base: ko.ko:main
Branches Tags
ko.ko:main
ko.ko:feature/dockerSetting
ko.ko:feature/headquartersSetting
ko.ko:12d171dc51
ko.ko:feature/system
ko.ko:feature/assetMgmt
..
compare: ko.ko:feature/system
Branches Tags
ko.ko:feature/dockerSetting
ko.ko:feature/headquartersSetting
ko.ko:main
ko.ko:12d171dc51
ko.ko:feature/system
ko.ko:feature/assetMgmt

No commits in common. "main" and "feature/system" have entirely different histories.
main ... feature/sy

172 changed files with 2619 additions and 13348 deletions
Show Stats Expand all files Collapse all files

1
.env.development
View File

@ -1,4 +1,3 @@
VITE_API_BASEURL = "https://ibms-cvilux-api.production.mjmtech.com.tw"
VITE_FILE_API_BASEURL = "https://cgems.cvilux-group.com:8088"
VITE_MQTT_BASEURL = "wss://mqttwss.mjm-staging.developers-homelab.net"
VITE_FORGE_BASEURL = "https://cgems.cvilux-group.com:8088/dist"

3
.env.production
View File

@ -1,4 +1,3 @@
VITE_API_BASEURL = "https://ibms-cvilux-api.production.mjmtech.com.tw"
VITE_FILE_API_BASEURL = "https://cgems.cvilux-group.com:8088"
VITE_MQTT_BASEURL = "wss://mqttwss.mjm-staging.developers-homelab.net"
# VITE_FORGE_BASEURL = "https://cgems.cvilux-group.com:8088/dist"
VITE_FORGE_BASEURL = "https://cgems.cvilux-group.com:8088/dist"

6
.env.staging
View File

@ -1,3 +1,3 @@
VITE_API_BASEURL = "https://ibms-cvilux-demo-api.production.mjmtech.com.tw"
VITE_FILE_API_BASEURL = "https://cgems.cvilux-group.com:8088"
VITE_MQTT_BASEURL = "wss://mqttwss.mjm-staging.developers-homelab.net"
VITE_API_BASEURL = "http://220.132.206.5:8008"
VITE_FILE_API_BASEURL = "http://220.132.206.5:8085/file"
VITE_FORGE_BASEURL = "http://localhost:5173"

29
.github/prompts/exportCSV.prompt.md vendored
View File

@ -1,29 +0,0 @@
---
mode: agent
---
# API 路徑整理與引用檢查規則
## 目標
- 針對 apis 目錄下所有子資料夾（如 account、alert、asset、building、dashboard、energy、forge、graph、history、login、operation、productSetting、system）的 api.js 與 index.js 檔案，完整追蹤 API 路徑的實際引用情形。
- 追蹤流程：
1. 先在 api.js 找出所有 API 路徑常數（如 `export const GET_XXX_API = '/path'`）。
2. 在 index.js 檔案確認這些常數有被 import 並包裝成 API function（如 `getXXX`）。
3. 再全專案搜尋這些 API function 是否有被其他檔案 import 並呼叫。
- 產生一份 csv 報表，格式如下：
| API 路徑 | 定義常數 | API function | 是否有被引用 |
|----------|----------|--------------|-------------|
| /user | GET_USER_API | getUser | Y |
| /admin | GET_ADMIN_API | getAdmin | N |
## 詳細規則
- 處理 apis 目錄下所有子資料夾的 api.js 與 index.js 檔案。
- API 路徑的定義需涵蓋 get/post/put/delete 等（如 `export const API = '/path'`）。
- 只統計有被 index.js import 並包裝成 function 的 API 路徑。
- 檢查 function 是否有被其他檔案 import 並呼叫（排除 apis 目錄本身）。
- 匹配到的檔案需記錄完整路徑，可多個檔案以分號分隔。
- 統計結果輸出為 csv 檔案。
## 輸出
- 檔名：api_usage_report.csv
- 欄位：API 路徑, 定義常數, API function, 是否有被引用,

895
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@ -6,8 +6,7 @@
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"build:staging": "vite build --mode staging"
"preview": "vite preview"
},
"dependencies": {
"@ant-design/icons-vue": "^7.0.1",
@ -22,16 +21,14 @@
"date-fns": "^3.3.1",
"dayjs": "^1.11.10",
"echarts": "^5.4.3",
"flag-icons": "^7.2.3",
"jquery-ui": "^1.14.1",
"json-schema-generator": "^2.0.6",
"mqtt": "^5.10.3",
"pinia": "^2.1.7",
"requirejs": "^2.3.6",
"tailwind-merge": "^2.2.1",
"vue": "^3.3.4",
"vue-i18n": "^10.0.4",
"vue-router": "^4.2.5",
"vuedraggable": "^4.1.0",
"yup": "^1.4.0",
"yup-phone-lite": "^2.0.1"
},

BIN
public/build_img.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 137 KiB

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

10
src/apis/alert/api.js
View File

@ -1,6 +1,5 @@
export const POST_ACK_API = `/obix/alarm`;
export const GET_ALERT_FORMID_API = `/Alert/AlertList`;
export const GET_ALERT_LOG_API = `api/Alarm/GetAlarmLog`;
export const POST_OPERATION_RECORD_API = `/operation/SavOpeRecord`;
export const GET_ALERT_SUB_LIST_API = `api/Device/GetMainSub`;
@ -10,17 +9,8 @@ export const GET_ALERT_MEMBER = `api/Alarm/GetAlarmMember`;
export const POST_ALERT_MEMBER = `api/Alarm/SaveAlarmMember`;
export const DELETE_ALERT_MEMBER = `api/Alarm/DeleteAlarmMember`;
export const GET_NOTICE_LIST_API = `api/Alarm/GetNotice`;
export const GET_SHOW_ALERT_API = `api/Alarm/GetShowAlarm`; // 取得告警顯示清單
export const GET_OUTLIERS_LIST_API = `api/Alarm/GetAlarmSetting`;
export const GET_OUTLIERS_DEVLIST_API = `api/Alarm/GetDevList`; // 取得設備
export const GET_OUTLIERS_POINTS_API = `api/Alarm/GetAlarmPoints`; // 取得點位
export const POST_OUTLIERS_SETTING_API = `api/Alarm/SaveAlarmSetting`; // 新增與修改
export const DELETE_OUTLIERS_SETTING_API = `api/Alarm/DeleteAlarmSetting`; // 刪除
export const GET_FACTOR_API = `api/Alarm/GetFactor`; // 刪除
export const GET_ALERT_SCHEDULE_LIST_API = `api/Alarm/GetAlarmSchedule`;
export const POST_ALERT_SCHEDULE = `api/Alarm/SaveAlarmSchedule`;
export const DELETE_ALERT_SCHEDULE = `api/Alarm/DeleteAlarmSchedule`;
export const POST_ALERT_MQTT_REFRESH = `api/Alarm/MQTTRefresh`;

129
src/apis/alert/index.js
View File

@ -1,28 +1,48 @@
import {
POST_ACK_API,
GET_ALERT_FORMID_API,
GET_ALERT_LOG_API,
POST_OPERATION_RECORD_API,
GET_ALERT_SUB_LIST_API,
GET_OUTLIERS_LIST_API,
GET_OUTLIERS_DEVLIST_API,
GET_OUTLIERS_POINTS_API,
POST_OUTLIERS_SETTING_API,
DELETE_OUTLIERS_SETTING_API,
GET_FACTOR_API,
GET_ALERT_MEMBER_LIST_API,
GET_ALERT_MEMBER,
POST_ALERT_MEMBER,
DELETE_ALERT_MEMBER,
GET_NOTICE_LIST_API,
GET_SHOW_ALERT_API,
GET_ALERT_SCHEDULE_LIST_API,
POST_ALERT_SCHEDULE,
DELETE_ALERT_SCHEDULE,
POST_ALERT_MQTT_REFRESH
} from "./api";
import instance from "@/util/request";
import apihandler from "@/util/apihandler";
import axios from "axios";
export const postChgAck = async (uuid) => {
try {
const data =
'<obj is="obix:AckAlarmIn"><str name="ackUser" val="obix" /></obj>';
const res = await axios.post(`${POST_ACK_API}/${uuid}/ack`, data, {
headers: {
"Content-Type": "text/plain",
},
});
// 解析XML錯誤信息
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(res.data, "text/xml");
const errElement = xmlDoc.querySelector("err");
if (errElement) {
console.error("Error in acknowledging alarm");
return { isSuccess: false, msg: `Error in acknowledging alarm` };
}
return { isSuccess: true };
} catch (error) {
console.error("Error in acknowledging alarm:", error);
return { isSuccess: false, msg: "Error in acknowledging alarm" };
}
};
export const getAlertFormId = async (uuid) => {
const res = await instance.post(GET_ALERT_FORMID_API, uuid);
@ -32,24 +52,6 @@ export const getAlertFormId = async (uuid) => {
});
};
export const getAlertLog = async ({
Start_date,
End_date,
isRecovery,
device_name_tag,
}) => {
const res = await instance.post(GET_ALERT_LOG_API, {
Start_date,
End_date,
isRecovery,
device_name_tag,
});
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const postOperationRecord = async (formData) => {
const res = await instance.post(POST_OPERATION_RECORD_API, formData);
@ -59,10 +61,8 @@ export const postOperationRecord = async (formData) => {
});
};
export const getAlertSubList = async (building_guid) => {
const res = await instance.post(GET_ALERT_SUB_LIST_API, {
building_guid,
});
export const getAlertSubList = async () => {
const res = await instance.post(GET_ALERT_SUB_LIST_API, {});
return apihandler(res.code, res.data, {
msg: res.msg,
@ -148,15 +148,6 @@ export const getOutliersPoints = async (id) => {
});
};
export const getFactors = async () => {
const res = await instance.post(GET_FACTOR_API);
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const postOutliersSetting = async (data) => {
const res = await instance.post(POST_OUTLIERS_SETTING_API, data);
@ -165,63 +156,3 @@ export const postOutliersSetting = async (data) => {
code: res.code,
});
};
export const delOutliersSetting = async (Id) => {
const res = await instance.post(DELETE_OUTLIERS_SETTING_API, {
Id,
});
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const getShowAlarm = async () => {
const res = await instance.post(GET_SHOW_ALERT_API);
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const getAlarmScheduleList = async () => {
const res = await instance.post(GET_ALERT_SCHEDULE_LIST_API, {});
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const postAlertSchedule = async (data) => {
const res = await instance.post(POST_ALERT_SCHEDULE, data);
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const deleteAlarmSchedule = async (id) => {
try {
const res = await instance.post(DELETE_ALERT_SCHEDULE, { id });
return {
isSuccess: res.code === "0000",
msg: res.msg || "刪除成功",
};
} catch (error) {
console.error("API request failed", error);
return { isSuccess: false, msg: "API request failed" };
}
};
export const postMQTTRefresh = async () => {
const res = await instance.post(POST_ALERT_MQTT_REFRESH);
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};

24
src/apis/asset/api.js
View File

@ -1,8 +1,5 @@
export const GET_ASSET_MAIN_LIST_API = `/AssetManage/GetAssetMainList`;
export const DELETE_ASSET_MAIN_LIST_API = `/AssetManage/DeleteAssetMain`;
export const POST_ASSET_MAIN_LIST_API = `/AssetManage/SaveAssetMain`;
export const GET_ASSET_SUB_LIST_API = `/AssetManage/GetAssetSubList`;
export const GET_ASSET_MAIN_LIST_API = `/AssetManage/GetAssetMainList`;
export const POST_ASSET_SUB_LIST_API = `/AssetManage/SaveAssetSub`;
export const DELETE_ASSET_SUB_LIST_API = `/AssetManage/DeleteAssetSub`;
@ -18,22 +15,3 @@ export const DELETE_ASSET_FLOOR_API = `/AssetManage/DeleteFloor`;
export const GET_ASSET_IOT_LIST_API = `/AssetManage/GetIOTList`;
export const GET_ASSET_SUB_POINT_API = `/AssetManage/GetSubPoint`;
export const GET_ASSET_IOT_SCHEMA_API = `/AssetManage/GetResponseSchema`;
export const POST_ASSET_IOT_SCHEMA_API = `/AssetManage/SaveResponseSchema`;
export const GET_ASSET_DEVICE_ITEM_API = `/AssetManage/GetDeviceItem`;
export const POST_ASSET_DEVICE_ITEM_API = `/AssetManage/SaveDeviceItem`;
export const DELETE_ASSET_DEVICE_ITEM_API = `/AssetManage/DeleteDeviceItem`;
export const GET_ASSET_DEPARTMENT_API = `/AssetManage/GetDepartment`;
export const POST_ASSET_DEPARTMENT_API = `/AssetManage/SaveDepartment`;
export const DELETE_ASSET_DEPARTMENT_API = `/AssetManage/DeleteDepartment`;
export const GET_ASSET_ELECTYPE_API = `/AssetManage/GetElecType`;
export const POST_ASSET_ELECTYPE_API = `/AssetManage/SaveElecType`;
export const DELETE_ASSET_ELECTYPE_API = `/AssetManage/DeleteElecType`;
export const POST_ASSET_ELEC_SETTING_API = `/AssetManage/SaveAssetSetting`;
export const POST_ASSET_MQTT_PUBLISH_API = `/api/mqtt/publish`;

222
src/apis/asset/index.js
View File

@ -1,8 +1,6 @@
import {
GET_ASSET_MAIN_LIST_API,
DELETE_ASSET_MAIN_LIST_API,
POST_ASSET_MAIN_LIST_API,
GET_ASSET_SUB_LIST_API,
GET_ASSET_MAIN_LIST_API,
DELETE_ASSET_SUB_LIST_API,
POST_ASSET_SUB_LIST_API,
GET_ASSET_LIST_API,
@ -14,26 +12,13 @@ import {
DELETE_ASSET_ITEM_API,
POST_ASSET_SINGLE_API,
GET_ASSET_SUB_POINT_API,
GET_ASSET_IOT_SCHEMA_API,
POST_ASSET_IOT_SCHEMA_API,
GET_ASSET_DEVICE_ITEM_API,
POST_ASSET_DEVICE_ITEM_API,
DELETE_ASSET_DEVICE_ITEM_API,
GET_ASSET_DEPARTMENT_API,
POST_ASSET_DEPARTMENT_API,
DELETE_ASSET_DEPARTMENT_API,
GET_ASSET_ELECTYPE_API,
POST_ASSET_ELECTYPE_API,
DELETE_ASSET_ELECTYPE_API,
POST_ASSET_ELEC_SETTING_API,
POST_ASSET_MQTT_PUBLISH_API,
} from "./api";
import instance from "@/util/request";
import apihandler from "@/util/apihandler";
import { object } from "yup";
export const getAssetMainList = async (building_guid) => {
const res = await instance.post(GET_ASSET_MAIN_LIST_API, { building_guid });
export const getAssetSubList = async () => {
const res = await instance.post(GET_ASSET_SUB_LIST_API);
return apihandler(res.code, res.data, {
msg: res.msg,
@ -41,8 +26,8 @@ export const getAssetMainList = async (building_guid) => {
});
};
export const deleteAssetMainItem = async (id) => {
const res = await instance.post(DELETE_ASSET_MAIN_LIST_API, { id });
export const getAssetMainList = async () => {
const res = await instance.post(GET_ASSET_MAIN_LIST_API);
return apihandler(res.code, res.data, {
msg: res.msg,
@ -50,17 +35,17 @@ export const deleteAssetMainItem = async (id) => {
});
};
export const postAssetMainList = async ({
id,
export const postAssetSubList = async ({
system_key,
system_value,
building_guid,
system_parent_id,
id,
}) => {
const res = await instance.post(POST_ASSET_MAIN_LIST_API, {
id,
const res = await instance.post(POST_ASSET_SUB_LIST_API, {
system_key,
system_value,
building_guid,
system_parent_id,
id,
});
return apihandler(res.code, res.data, {
@ -69,24 +54,6 @@ export const postAssetMainList = async ({
});
};
export const getAssetSubList = async (id) => {
const res = await instance.post(GET_ASSET_SUB_LIST_API, { id });
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const postAssetSubList = async (formData) => {
const res = await instance.post(POST_ASSET_SUB_LIST_API, formData);
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const deleteAssetSubItem = async (id) => {
const res = await instance.post(DELETE_ASSET_SUB_LIST_API, { id });
@ -133,15 +100,16 @@ export const postAssetSingle = async (data) => {
});
} else {
value.forEach((element, index) => {
formData.append(
`sub_device[${index}].device_number`,
element.device_number
);
formData.append(`sub_device[${index}].device_number`, element.device_number);
formData.append(`sub_device[${index}].points`, element.points);
});
}
} else {
formData.append(key, value);
if (key === "device_number" && value === "") {
formData.append(key, "0");
} else {
formData.append(key, value);
}
}
}
@ -158,8 +126,8 @@ export const deleteAssetItem = async (main_id) => {
});
};
export const getAssetFloorList = async (building_guid) => {
const res = await instance.post(GET_ASSET_FLOOR_LIST_API, { building_guid });
export const getAssetFloorList = async () => {
const res = await instance.post(GET_ASSET_FLOOR_LIST_API);
return apihandler(res.code, res.data, {
msg: res.msg,
@ -207,155 +175,3 @@ export const getAssetSubPoint = async (sub_system_tag) => {
code: res.code,
});
};
export const getIOTSchema = async (variable_id) => {
const res = await instance.post(GET_ASSET_IOT_SCHEMA_API, { variable_id });
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const postIOTSchema = async ({ name, variable_id, points }) => {
const res = await instance.post(POST_ASSET_IOT_SCHEMA_API, {
name,
variable_id,
points,
});
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const getDeviceItem = async (variable_id) => {
const res = await instance.post(GET_ASSET_DEVICE_ITEM_API, { variable_id });
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const postDeviceItem = async ({
id,
variable_id,
full_name,
points,
decimals,
is_bool,
is_link,
show_event_switch_btn,
event_switch_on_message,
event_switch_off_message,
}) => {
const res = await instance.post(POST_ASSET_DEVICE_ITEM_API, {
id,
variable_id,
full_name,
points,
decimals,
is_bool,
is_link,
show_event_switch_btn,
event_switch_on_message,
event_switch_off_message,
});
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const deleteDeviceItem = async (id) => {
const res = await instance.post(DELETE_ASSET_DEVICE_ITEM_API, { id });
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const getDepartmentList = async () => {
const res = await instance.post(GET_ASSET_DEPARTMENT_API, {});
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const postDepartmentList = async ({ name, id }) => {
const res = await instance.post(POST_ASSET_DEPARTMENT_API, {
name,
id,
});
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const deleteDepartmentItem = async (id) => {
const res = await instance.post(DELETE_ASSET_DEPARTMENT_API, { id });
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const getElecTypeList = async () => {
const res = await instance.post(GET_ASSET_ELECTYPE_API, {});
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const postElecTypeList = async ({ name, id }) => {
const res = await instance.post(POST_ASSET_ELECTYPE_API, {
name,
id,
});
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const deleteElecTypeItem = async (id) => {
const res = await instance.post(DELETE_ASSET_ELECTYPE_API, { id });
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const postAssetElecSetting = async (formData) => {
const res = await instance.post(POST_ASSET_ELEC_SETTING_API, formData);
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const postMQTTpublish = async ({ Topic, Payload }) => {
const res = await instance.post(POST_ASSET_MQTT_PUBLISH_API, {
Topic,
Payload,
});
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};

4
src/apis/building/api.js
View File

@ -1,6 +1,4 @@
export const GET_BUILDING_API = `/AssetManage/GetBuildingList`;
export const POST_BUILDING_API = `/AssetManage/SaveBuilding`;
export const DELETE_BUILDING_API = `/AssetManage/DeleteBuilding`;
export const GET_BUILDING_API = `/api/Device/GetBuild`;
export const GET_AUTHPAGE_API = `/api/GetUsrFroList`;
export const GET_SUBAUTHPAGE_API = `/api/Device/GetMainSub`;
export const GET_ALL_DEVICE_API = `/api/Device/GetAllDevice`;

29
src/apis/building/index.js
View File

@ -1,7 +1,5 @@
import {
GET_BUILDING_API,
POST_BUILDING_API,
DELETE_BUILDING_API,
GET_AUTHPAGE_API,
GET_SUBAUTHPAGE_API,
GET_ALL_DEVICE_API,
@ -18,27 +16,6 @@ export const getBuildings = async () => {
});
};
export const postBuildings = async ({ full_name, building_guid }) => {
const res = await instance.post(POST_BUILDING_API, {
full_name,
building_guid,
});
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const deleteBuildings = async (building_guid) => {
const res = await instance.post(DELETE_BUILDING_API, { building_guid });
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const getAuth = async (lang) => {
const res = await instance.post(GET_AUTHPAGE_API, {
lang,
@ -49,8 +26,10 @@ export const getAuth = async (lang) => {
});
};
export const getAllSysSidebar = async (building_guid) => {
const res = await instance.post(GET_SUBAUTHPAGE_API, {building_guid});
export const getAllSysSidebar = async () => {
const res = await instance.post(GET_SUBAUTHPAGE_API, {
building_tag: "",
});
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,

10
src/apis/dashboard/api.js
View File

@ -6,12 +6,4 @@ export const GET_DASHBOARD_ROOM_TEMP_API = `/SituationRoom/GetFormulaRoomStatusD
export const GET_DASHBOARD_ENERGY_API = `/SituationRoom/GetEnergeData`;
export const POST_DASHBOARD_PRODUCT_TARGET_SETTING_API = `/SituationRoom/SetTargetSetting`;
export const GET_DASHBOARD_PRODUCT_TARGET_SETTING_API = `/SituationRoom/GetTargetSetting`
export const GET_DASHBOARD_PRODUCT_HISTORY_API = `/SituationRoom/GetProductionHistory`
export const GET_DASHBOARD_ENERGY_INFO_API = `api/dashboard/GetEnergyInfo`
export const GET_DASHBOARD_ENERGY_COST_API = `api/dashboard/GetEnergyCost`
export const GET_DASHBOARD_ALARMOPERATION_INFO_API = `api/dashboard/GetAlarmOperationInfo`
export const GET_DASHBOARD_2D3DINFO_API = `api/setting/visual/query`
export const POST_DASHBOARD_2D3DINFO_API = `api/setting/visual/update`
export const GET_DASHBOARD_PRODUCT_HISTORY_API = `/SituationRoom/GetProductionHistory`

62
src/apis/dashboard/index.js
View File

@ -8,11 +8,6 @@ import {
POST_DASHBOARD_PRODUCT_TARGET_SETTING_API,
GET_DASHBOARD_PRODUCT_TARGET_SETTING_API,
GET_DASHBOARD_PRODUCT_HISTORY_API,
GET_DASHBOARD_ENERGY_INFO_API,
GET_DASHBOARD_ENERGY_COST_API,
GET_DASHBOARD_ALARMOPERATION_INFO_API,
GET_DASHBOARD_2D3DINFO_API,
POST_DASHBOARD_2D3DINFO_API
} from "./api";
import instance from "@/util/request";
import apihandler from "@/util/apihandler";
@ -140,60 +135,3 @@ export const getDashboardProductRecord = async ({ start_time, end_time }) => {
});
};
export const getEnergyInfo = async (building_guid) => {
const res = await instance.post(GET_DASHBOARD_ENERGY_INFO_API, {
building_guid,
});
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const getEnergyCost = async ({
department_id,
floor_guid,
building_guid,
}) => {
const res = await instance.post(GET_DASHBOARD_ENERGY_COST_API, {
department_id,
floor_guid,
building_guid,
});
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const getAlarmOperationInfo = async (building_guid) => {
const res = await instance.post(GET_DASHBOARD_ALARMOPERATION_INFO_API, {
building_guid,
});
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const getDashboard2D3D = async (BuildingId) => {
const res = await instance.post(GET_DASHBOARD_2D3DINFO_API, {
BuildingId});
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const posttDashboard2D3D = async (formData) => {
const res = await instance.post(POST_DASHBOARD_2D3DINFO_API, formData);
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};

22
src/apis/energy/api.js
View File

@ -1,23 +1,3 @@
export const GET_REALTIME_DIST_API = `/api/Energe/GetRealTimeDistribution`;
export const GET_ELECUSE_DAY_API = `/api/Energe/GetElecUseDay`;
export const GET_TAI_POWER_API = `/api/Energe/GetTaipower`;
export const GET_SIDEBAR_API = `/api/GetSideBar`;
export const GET_SEARCH_API = `/api/Energe/GetFilter`;
export const GET_REPORT_API = `/api/Energe/GetReport`;
export const GET_Excel_API = `/api/Energe/GetReportExcel`;
// 即時需量
export const GET_DEMAND_API = `/api/Energe/SearchDemandValue`;
export const POST_ADD_DEMAND_API = `/api/Energe/AddDemandValue`;
export const POST_EDIT_DEMAND_API = `/api/Energe/UpdateDemandValue`;
export const GET_REALTIME_DEMAND_API = `/api/Energe/GetRealTimeDemand`;
// 碳排係數
export const GET_CARBON_API = `/api/Energe/SearchCarbonValue`;
export const POST_EDIT_CARBON_API = `/api/Energe/UpdateCarbonValue`;
// 時間電價
export const GET_TIME_ELEC_API = `/api/Energe/SearchTimeElec`;
export const POST_TIME_ELEC_API = `/api/Energe/UpdateTimeElecValue`;
export const GET_TAI_POWER_API = `/api/Energe/GetTaipower`;

214
src/apis/energy/index.js
View File

@ -2,32 +2,12 @@ import {
GET_REALTIME_DIST_API,
GET_ELECUSE_DAY_API,
GET_TAI_POWER_API,
GET_SIDEBAR_API,
GET_SEARCH_API,
GET_REPORT_API,
GET_Excel_API,
GET_DEMAND_API,
POST_EDIT_DEMAND_API,
GET_REALTIME_DEMAND_API,
GET_CARBON_API,
POST_EDIT_CARBON_API,
GET_TIME_ELEC_API,
POST_TIME_ELEC_API,
} from "./api";
import instance, { fileInstance } from "@/util/request";
import instance from "@/util/request";
import apihandler from "@/util/apihandler";
import downloadExcel from "@/util/downloadExcel";
export const getRealTimeDist = async ({
building_guid,
department_id_list,
floor_guid_list,
}) => {
const res = await instance.post(GET_REALTIME_DIST_API, {
building_guid,
department_id_list,
floor_guid_list,
});
export const getRealTimeDist = async () => {
const res = await instance.post(GET_REALTIME_DIST_API);
return apihandler(res.code, res.data, {
msg: res.msg,
@ -35,16 +15,8 @@ export const getRealTimeDist = async ({
});
};
export const getElecUseDay = async ({
building_guid,
department_id_list,
floor_guid_list,
}) => {
const res = await instance.post(GET_ELECUSE_DAY_API,{
building_guid,
department_id_list,
floor_guid_list,
});
export const getElecUseDay = async () => {
const res = await instance.post(GET_ELECUSE_DAY_API);
return apihandler(res.code, res.data, {
msg: res.msg,
@ -52,181 +24,11 @@ export const getElecUseDay = async ({
});
};
export const getTaipower = async ({
coefficient,
building_guid,
department_id_list,
floor_guid_list,
}) => {
const res = await instance.post(GET_TAI_POWER_API, {
coefficient,
building_guid,
department_id_list,
floor_guid_list,
});
export const getTaipower = async () => {
const res = await instance.post(GET_TAI_POWER_API);
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const getSideBar = async (system_type) => {
const res = await instance.post(GET_SIDEBAR_API, { system_type });
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const getEnergySearch = async (type) => {
const res = await instance.post(GET_SEARCH_API, { type });
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const getReport = async ({
department,
elecType,
floor,
start_time,
end_time,
type,
}) => {
const res = await instance.post(GET_REPORT_API, {
department,
elecType,
floor,
start_time,
end_time,
type,
});
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const getExcel = async ({
department,
elecType,
floor,
start_time,
end_time,
type,
}) => {
const res = await fileInstance.post(
GET_Excel_API,
{
department,
elecType,
floor,
start_time,
end_time,
type,
},
{ responseType: "blob" }
);
return apihandler(
res.code,
res,
{
msg: res.msg,
code: res.code,
},
downloadExcel
);
};
export const getDemand = async (building_guid) => {
const res = await instance.post(GET_DEMAND_API, { building_guid });
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const postEditDemand = async ({
id,
contract,
alert,
reset,
building_guid,
}) => {
const res = await instance.put(POST_EDIT_DEMAND_API, {
id,
contract,
alert,
reset,
building_guid,
});
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const getCarbonValue = async (building_guid) => {
const res = await instance.post(GET_CARBON_API, { building_guid });
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const postEditCarbonValue = async ({
id,
coefficient,
building_guid,
}) => {
const res = await instance.put(POST_EDIT_CARBON_API, {
id,
coefficient,
building_guid,
});
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const getRealTimeDemand = async (building_guid) => {
const res = await instance.post(GET_REALTIME_DEMAND_API, { building_guid });
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const getTimeElec = async (building_guid) => {
const res = await instance.post(GET_TIME_ELEC_API, { building_guid });
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
export const postTimeElec = async ({ sheet, cost, building_guid }) => {
const res = await instance.put(POST_TIME_ELEC_API, {
sheet,
cost,
building_guid,
});
return apihandler(res.code, res.data, {
msg: res.msg,
code: res.code,
});
};
};

4
src/apis/history/api.js
View File

@ -4,10 +4,6 @@ export const GET_HISTORY_SIDEBAR_API = `/api/History/GetDeviceInfo`;
export const GET_HISTORY_POINT_API = `/api/History/GetAllDevPoi`;
export const GET_HISTORY_DATA_API = `/api/History/GetHistoryData`;
export const GET_HISTORY_EXPORT_API = `/api/ExportHistoryExcel`;
export const GET_HISTORY_EXPORT_REPORT_API = `/api/History/GetHistoryExcelReport`;
export const GET_HISTORY_EXPORT_CURVE_API = `/api/History/GetHistoricalCurveExcelReport`;
export const GET_HISTORY_EXPORT_QUICK_API = `/api/History/GetQuickMeteringExcelReport`;
export const GET_HISTORY_EXPORT_CLASS_API = `/api/History/GetElectricityClassificationExcelReport`;
export const GET_HISTORY_FAVORITE_API = `/api/History/GetHistoryFavorite`;
export const POST_HISTORY_FAVORITE_API = `/api/History/SaveHistoryFavorite`;

75
src/apis/history/index.js
View File

@ -7,26 +7,14 @@ import {
DELETE_HISTORY_FAVORITE_API,
UPDATE_HISTORY_FAVORITE_API,
GET_HISTORY_EXPORT_API,
GET_HISTORY_EXPORT_REPORT_API,
GET_HISTORY_EXPORT_CURVE_API,
GET_HISTORY_EXPORT_QUICK_API,
GET_HISTORY_EXPORT_CLASS_API,
} from "./api";
import instance, { fileInstance } from "@/util/request";
import apihandler from "@/util/apiHandler";
import downloadExcel from "@/util/downloadExcel";
export const getHistorySideBar = async ({
sub_system_tag,
department_id,
elec_type_id,
building_guid,
}) => {
export const getHistorySideBar = async (sub_system_tag) => {
const res = await instance.post(GET_HISTORY_SIDEBAR_API, {
sub_system_tag,
department_id,
elec_type_id,
building_guid,
});
return apihandler(res.code, res.data, {
@ -54,7 +42,6 @@ export const getHistoryData = async ({
End_time,
Device_list,
Points,
table_type,
}) => {
/*
{
@ -75,7 +62,6 @@ export const getHistoryData = async ({
Device_list: Array.isArray(Device_list) ? Device_list : [Device_list],
Points: Array.isArray(Points) ? Points : [Points],
Type: parseInt(Type),
table_type: parseInt(table_type),
});
return apihandler(res.code, res.data, {
@ -85,52 +71,7 @@ export const getHistoryData = async ({
};
export const getHistoryExportData = async ({
Start_date,
End_date,
Start_time,
End_time,
Device_list,
Points,
Type,
table_type,
}) => {
const api =
parseInt(table_type) === 1
? GET_HISTORY_EXPORT_CURVE_API
: parseInt(table_type) === 2
? GET_HISTORY_EXPORT_QUICK_API
: parseInt(table_type) === 3
? GET_HISTORY_EXPORT_CLASS_API
: GET_HISTORY_EXPORT_API;
const res = await fileInstance.post(
api,
{
Start_date: Start_date,
End_date: End_date,
Start_time: Start_time,
End_time: End_time,
Points: Array.isArray(Points) ? Points : [Points],
Device_list: Array.isArray(Device_list) ? Device_list : [Device_list],
Type: parseInt(Type),
Building_tag_list: [...new Set(Device_list.map((d) => d.split("_")[1]))],
table_type: parseInt(table_type),
},
{ responseType: "blob" }
);
return apihandler(
res.code,
res,
{
msg: res.msg,
code: res.code,
},
downloadExcel
);
};
export const getHistoryExportReport = async ({
Start_date,
End_date,
Start_time,
@ -138,8 +79,19 @@ export const getHistoryExportReport = async ({
Device_list,
Points,
}) => {
/*
{
Type,
Start_date,
End_date,
Start_time,
End_time,
Device_list,
Points,
}
*/
const res = await fileInstance.post(
GET_HISTORY_EXPORT_REPORT_API,
GET_HISTORY_EXPORT_API,
{
// ...exportContent,
Start_date: Start_date,
@ -148,6 +100,7 @@ export const getHistoryExportReport = async ({
End_time: End_time,
Points: Array.isArray(Points) ? Points : [Points],
Device_list: Array.isArray(Device_list) ? Device_list : [Device_list],
Type: parseInt(Type),
Building_tag_list: [...new Set(Device_list.map((d) => d.split("_")[1]))],
},
{ responseType: "blob" }

4
src/apis/login/index.js
View File

@ -13,10 +13,6 @@ export async function Login({ account, password }) {
document.cookie = `JWT-Authorization=${res.data.token}; Max-Age=${
24 * 60 * 60 * 1000
}`;
// 設定 user_name Cookie
document.cookie = `user_name=${res.data.user_name}; Max-Age=${
24 * 60 * 60 * 1000
}`;
}
return apihandler(res.code, res.data, {

9
src/apis/operation/index.js
View File

@ -6,7 +6,6 @@ import {
POST_OPERATION_RECORD_API,
GET_OPERATION_EXPORT_API,
GET_OPERATION_FORMID_API,
DELETE_OPERATION_RECORD_API,
POST_OPERATION_COMPANY_API,
UPDATE_OPERATION_COMPANY_API,
DELETE_OPERATION_COMPANY_API,
@ -24,10 +23,10 @@ export const getOperationRecord = async ({
}) => {
const res = await instance.post(GET_OPERATION_RECORD_API, {
work_type: parseInt(work_type),
// start_created_at: dayjs(start_created_at).format("YYYY-MM-DDTHH:mm:ss"),
// end_created_at: dayjs(end_created_at)
// .date(dayjs(end_created_at).get("date") + 1)
// .format("YYYY-MM-DDTHH:mm:ss"),
start_created_at: dayjs(start_created_at).format("YYYY-MM-DDTHH:mm:ss"),
end_created_at: dayjs(end_created_at)
.date(dayjs(end_created_at).get("date") + 1)
.format("YYYY-MM-DDTHH:mm:ss"),
serial_number: serial_number || null,
main_system_tag: null,
sub_system_tag:

8
src/apis/system/index.js
View File

@ -20,13 +20,13 @@ export const getSystemFloors = async (building_tag, sub_system_tag) => {
export const getSystemDevices = async ({
sub_system_tag,
building_guid,
department_id_list,
building_tag,
floor_tag,
}) => {
const res = await instance.post(GET_SYSTEM_DEVICE_LIST_API, {
sub_system_tag,
building_guid,
department_id_list,
building_tag,
floor_tag,
});
return apihandler(res.code, res.data, {

1
src/assets/base.css
View File

@ -58,7 +58,6 @@
box-sizing: border-box;
margin: 0;
font-weight: normal;
scrollbar-color: auto !important;
}
body {

66
src/components/alarm/AlarmCards.vue
View File

@ -1,41 +1,25 @@
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { getAlertLog } from "@/apis/alert";
import dayjs from "dayjs";
import { onMounted } from "vue";
import useAlarmStore from "@/stores/useAlarmStore";
import { ackSingleAlarm } from "@/apis/building";
const dataSource = ref([]);
let intervalId = null; // 用來儲存 setInterval 的 ID
const getAlarmData = async () => {
const res = await getAlertLog({
isRecovery: 1,
Start_date: dayjs().format("YYYY-MM-DD"),
End_date: dayjs().format("YYYY-MM-DD"),
});
dataSource.value = (res.data || []).map((d) => ({ ...d, key: d.id }));
};
const store = useAlarmStore();
onMounted(() => {
getAlarmData();
intervalId = setInterval(() => {
getAlarmData();
}, 30 * 1000);
store.getAlarmDataFromBaja();
});
onUnmounted(() => {
if (intervalId) {
clearInterval(intervalId);
intervalId = null;
}
});
const ackedAlarm = async (uuid) => {
const res = await ackSingleAlarm(uuid);
console.log("ackedAlarm", res);
};
</script>
<template>
<div>
<ul class="pr-4 min-h-full text-base-content">
<!-- Sidebar content here -->
<li class="my-3" v-for="alarm in dataSource" :key="alarm.id">
<li class="my-3" v-for="alarm in store.alarmData" :key="alarm.uuid">
<div
class="w-full shadow-xl border border-success bg-body bg-opacity-80"
>
@ -50,22 +34,30 @@ onUnmounted(() => {
>
<small>
<span class="mr-4"
>{{ alarm.created_at }}</span
>{{ alarm.timestamp_date }} {{ alarm.timestamp_time }}</span
>
<!-- <font-awesome-icon
<font-awesome-icon
:icon="['fas', 'times']"
size="lg"
class="text-white"
/> -->
/>
</small>
</p>
<div class="divider my-2"></div>
<div>
<p>{{ $t("alarm.number") }}：{{ alarm.id }}</p>
<p>{{ $t("alert.alarmClass") }}：{{ alarm.factor }}</p>
<p>{{ $t("alarm.device_name") }}：{{ alarm.device_number }}</p>
<p>{{ $t("alert.device_point_name") }}：{{ alarm.points }}</p>
<p>{{ $t("alert.error_msg") }}：{{ alarm.reason }}</p>
<p>{{ $t("alarm.number") }}：{{ alarm.uuid }}</p>
<!-- <p>異常等級：255</p> -->
<p>{{ $t("alarm.category") }}：{{ alarm.alarmClass }}</p>
<p>{{ $t("alarm.device_name") }}：{{ alarm.full_name }}</p>
<p>{{ $t("alarm.message") }}：{{ alarm.msg }}</p>
</div>
<div class="card-actions mt-1 justify-end">
<button
class="btn btn-sm btn-success"
@click="() => ackedAlarm(alarm.uuid)"
>
{{ $t("alarm.confirm") }}
</button>
</div>
</div>
</div>
@ -76,12 +68,12 @@ onUnmounted(() => {
<style lang="scss" scoped>
.card::before {
@apply absolute h-5 w-5 top-1 left-1 bg-no-repeat z-10 bg-[url('../../assets/img/table/content-box-background01.svg')] bg-center;
@apply absolute h-5 w-5 top-1 left-1 bg-no-repeat z-10 bg-[url('../../assets/img/table/content-box-background01.svg')] bg-center;
content: "";
}
.card::after {
@apply absolute bottom-1 right-1 h-5 w-5 bg-no-repeat z-10 bg-[url('../../assets/img/table/content-box-background05.svg')] bg-center;
@apply absolute bottom-1 right-1 h-5 w-5 bg-no-repeat z-10 bg-[url('../../assets/img/table/content-box-background05.svg')] bg-center;
content: "";
}
</style>
</style>

2
src/components/alarm/AlarmDrawer.vue
View File

@ -36,7 +36,7 @@ const toggleErrIcon = () => {
</div>
<div
v-if="showErr"
class="drawer-side translate-y-20 max-h-[90vh] overflow-x-hidden overflow-y-scroll w-[300px] left-auto right-0"
class="drawer-side translate-y-20 max-h-[90vh] overflow-x-hidden overflow-y-scroll"
>
<AlarmCards />
</div>

26
src/components/chart/EffectScatter.vue
View File

@ -1,6 +1,6 @@
<script setup>
import * as echarts from "echarts";
import { onMounted, ref, markRaw, nextTick } from "vue";
import { onMounted, ref, markRaw } from "vue";
import axios from "axios";
const props = defineProps({
@ -24,15 +24,9 @@ async function updateSvg(svg, option) {
} else {
clear();
}
axios.get(svg.path).then(async ({ data }) => {
axios.get(svg.path).then(({ data }) => {
echarts.registerMap(svg.full_name, { svg: data });
await nextTick();
// 延遲執行以避免在主進程中調用 setOption
setTimeout(() => {
if (chart.value && !chart.value.isDisposed()) {
chart.value.setOption(option);
}
}, 0);
chart.value.setOption(option);
if (props.getCoordinate) {
chart.value.getZr().on("click", function (params) {
var pixelPoint = [params.offsetX, params.offsetY];
@ -50,15 +44,11 @@ async function updateSvg(svg, option) {
value: dataPoint, // 當前座標值
itemStyle: { color: "#0000FF" }, // 設為藍色
});
setTimeout(() => {
if (chart.value && !chart.value.isDisposed()) {
chart.value.setOption({
series: {
data: updatedData,
},
});
}
}, 0);
chart.value.setOption({
series: {
data: updatedData,
},
});
});
}
});

2
src/components/customUI/DateGroup.vue
View File

@ -118,6 +118,6 @@ const curWidth = computed(() => {
</style>
<style scoped>
.line {
@apply mr-3 relative z-30 after:absolute after:top-1/2 after:-right-3 after:w-3 after:h-[1px] after:bg-info after:z-10 last:after:h-0;
@apply mr-3 relative z-20 after:absolute after:top-1/2 after:-right-3 after:w-3 after:h-[1px] after:bg-info after:z-10 last:after:h-0;
}
</style>

436
src/components/customUI/DraggableTable.vue
View File

@ -1,436 +0,0 @@
<script setup>
import { twMerge } from "tailwind-merge";
import { computed, defineProps, provide, ref, watch } from "vue";
import Pagination from "@/components/customUI/Pagination.vue";
import Checkbox from "@/components/customUI/Checkbox.vue";
import draggable from "vuedraggable";
import dayjs from "dayjs";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
/*
column={
title,key,class, width, filter:Boolean, sort:Boolean
}
*/
const props = defineProps({
columns: Array,
dataSource: Array,
rowKey: String,
withStyle: {
type: Boolean,
default: true,
},
withDraggable: {
type: Boolean,
default: false,
},
pagination: { type: Boolean, default: true } || {
pageSize: Number,
totalPages: Number,
totalItems: Number,
},
loading: Boolean,
});
const currentDataSource = ref([]);
const dataSourceStorage = ref([]);
const isDraggable = ref(props.withDraggable);
watch(
() => props.dataSource,
(newValue) => {
dataSourceStorage.value = newValue;
filterItems.value = Object.fromEntries(
props.columns.map((c, i) => [
c.key,
[...new Set(newValue.map((d) => d[c.key]))].map((name) => ({
name,
selected: false,
})),
])
);
}
);
const updateDataSource = (data) => {
console.log("update", data);
currentDataSource.value = data;
};
provide("current_table_data", {
updateDataSource,
});
const sortRule = ref({});
const filterColumn = ref({});
const filterItems = ref({});
const selectedFilterItem = ref({});
const toggleFilterModal = (key) => {
let newFilter = Object.assign(filterColumn.value);
for (let oKey in newFilter) {
newFilter[oKey] = key === oKey && !newFilter[key];
}
filterColumn.value = newFilter;
};
watch(
() => props.columns,
(newValue) => {
sortRule.value = Object.fromEntries(newValue.map((c) => [c.key, 0]));
filterColumn.value = Object.fromEntries(
newValue.map((c, i) => [c.key, false])
);
selectedFilterItem.value = Object.fromEntries(
newValue.map((c, i) => [c.key, []])
);
},
{
immediate: true,
}
);
/*
0:取消
1:ascending
2:descending
*/
const toggleSortRule = (key) => {
let newSort = Object.assign(sortRule.value);
for (let oKey in newSort) {
newSort[oKey] = key === oKey ? newSort[key] : 0;
}
sortRule.value = newSort;
};
const sort = (column) => {
toggleSortRule(column);
const cantSort = ["object", "boolean"];
console.log(props.dataSource?.[0][column]);
if (cantSort.includes(typeof props.dataSource?.[0][column])) return;
// 小->大
const newArray = Object.assign(props.dataSource, []).sort((a, b) => {
// if (column === "timestamp") {
// return dayjs(a[column]).valueOf() - dayjs(b[column]).valueOf();
// }
if (typeof a[column] === "number") return a[column] - b[column];
else if (typeof a[column] === "string") {
console.log(a[column], b[column], a[column].localeCompare(b[column]));
return a[column].localeCompare(b[column]);
}
// return parseInt(a[column]) - parseInt(b[column]);
});
if (sortRule.value[column] === 0) {
sortRule.value[column] = 1;
dataSourceStorage.value = newArray;
} else if (sortRule.value[column] === 1) {
sortRule.value[column] = 2;
dataSourceStorage.value = newArray.reverse();
} else if (sortRule.value[column] === 2) {
sortRule.value[column] = 0;
dataSourceStorage.value = props.dataSource;
}
};
const form = ref(null);
const onFilter = (key, reset = false) => {
const formData = new FormData(form.value);
reset && formData.delete(key);
for (let [name, value] of formData) {
console.log(name, value);
}
selectedFilterItem.value[key] = formData.getAll(key);
toggleFilterModal(key);
};
watch(
selectedFilterItem,
(newVal) => {
let newData = Object.assign(props.dataSource);
for (let key in newVal) {
if (newVal[key].length > 0) {
newData = newData.filter((d) => newVal[key].includes(d[key]));
}
}
dataSourceStorage.value = newData;
},
{
deep: true,
}
);
</script>
<template>
<div :class="withStyle ? 'content-box' : 'py-5'">
<div class="content-decoration">
<button
v-if="withDraggable"
class="btn btn-sm mb-2"
@click.stop.prevent="isDraggable = !isDraggable"
>
<font-awesome-icon :icon="['fas', 'stream']" />
{{ isDraggable ? "開始排序" : "完成排序" }}
</button>
<slot name="beforeTable"></slot>
<form ref="form" class="overflow-x-auto">
<table
:class="
twMerge(
withStyle ? 'table' : 'table border',
currentDataSource.length === 0 ? 'h-28' : ''
)
"
>
<!-- head -->
<thead>
<tr>
<th
v-for="column in columns"
:key="column.key"
:class="`${column.class ? column.class : ''}`"
:style="{
width: `${
column.width
? typeof column.width === 'string'
? column.width
: column.width + 'px'
: 'auto'
}`,
}"
>
<span class="flex justify-center">
{{ column.title }}
<div
v-if="column.sort"
class="flex flex-col justify-center w-3 mx-2 relative"
@click="() => sort(column.key)"
>
<font-awesome-icon
:icon="['fas', 'sort-up']"
:class="
twMerge(
'absolute top-0',
sortRule[column.key] === 1 ? 'text-success' : ''
)
"
size="lg"
/>
<font-awesome-icon
:icon="['fas', 'sort-down']"
:class="
twMerge(
'absolute bottom-1',
sortRule[column.key] === 2 ? 'text-success' : ''
)
"
size="lg"
/>
</div>
<div class="ml-2 relative" v-if="column.filter">
<font-awesome-icon
:icon="['fas', 'filter']"
:class="
twMerge(
filterColumn[column.key] ||
selectedFilterItem[column.key].length > 0
? 'text-success'
: ''
)
"
@click="() => toggleFilterModal(column.key)"
/>
<div
class="absolute top-full -left-1/2 z-50"
v-if="filterColumn[column.key]"
>
<div class="card min-w-max bg-body shadow-xl px-10 py-5">
<Checkbox
v-for="item in filterItems[column.key]"
:title="item.name"
:value="item.name"
:key="item.name"
:name="column.key"
:checked="
selectedFilterItem[column.key].includes(item.name)
"
className="justify-start"
/>
<div class="card-actions mt-4 justify-end">
<input
type="reset"
class="btn btn-sm text-white btn-error"
:value="t('button.reset')"
@click="() => onFilter(column.key, true)"
/>
<button
class="btn btn-sm btn-success"
@click.stop.prevent="() => onFilter(column.key)"
>
{{ $t("button.submit") }}
</button>
</div>
</div>
</div>
</div>
</span>
</th>
</tr>
</thead>
<tbody v-if="isDraggable">
<tr v-if="loading">
<td :colspan="columns.length">
<Loading />
</td>
</tr>
<tr v-else-if="currentDataSource.length == 0">
<td :colspan="columns.length">{{ $t("table.no_data") }}</td>
</tr>
<template v-else :sort="sortRule">
<tr
v-for="(data, index) in currentDataSource"
:key="data.key || data[rowKey]"
>
<template
v-for="column in columns"
:key="`${data.key || data[rowKey]}_${column.key}`"
>
<td
:class="column.class"
:style="{
width: `${
column.width
? typeof column.width === 'string'
? column.width
: column.width + 'px'
: 'auto'
}`,
}"
>
<slot
name="bodyCell"
v-bind="{ record: data, column, index }"
>
{{ data[column.key] }}</slot
>
</td>
</template>
</tr>
</template>
</tbody>
<draggable
tag="tbody"
:list="dataSourceStorage"
item-key="rowKey"
v-else
>
<template #item="{ element, index }">
<tr :key="element[rowKey] || element.key" >
<template
v-for="column in columns"
:key="`${element[rowKey] || element.key}_${column.key}`"
>
<td
:class="column.class"
:style="{
width: `
${
column.width
? typeof column.width === 'string'
? column.width
: column.width + 'px'
: 'auto'
}`,
}"
>
<slot
name="bodyCell"
v-bind="{ record: element, column, index }"
>
{{ element[column.key] }}</slot
>
</td>
</template>
</tr>
</template>
</draggable>
</table>
</form>
<slot name="afterTable"></slot>
<Pagination
:class="twMerge(!isDraggable ? 'hidden' : 'flex')"
:pagination="pagination"
:dataSource="dataSourceStorage"
:sort="sortRule"
/>
</div>
<div class="content-decoration2"></div>
</div>
</template>
<style lang="css" scoped>
/**資料框**/
.content-box {
@apply border border-info p-1 relative mb-4 bg-transparent;
}
.content-box .table {
@apply rounded-none;
}
.table th {
@apply bg-cyan-600 bg-opacity-30 border-r border-b border-white text-lg font-semibold text-white text-center px-2 py-3;
}
.table td {
@apply border-r border-b border-white text-lg font-semibold text-white text-center px-2 py-3;
}
.table tr td:last-child,
.table tr:first-child th:last-child {
border-right: 0;
}
/* .table tr:last-child td {
border-bottom: v-bind("withStyle ? '0px': '1px'");
} */
/**資料框裝飾**/
.content-box::before {
@apply absolute top-1 left-1 h-5 w-5 bg-no-repeat z-10 bg-[url('../../assets/img/table/content-box-background01.svg')] bg-center;
content: "";
}
.content-box::after {
@apply absolute bottom-1 right-1 h-5 w-5 bg-no-repeat z-10 bg-[url('../../assets/img/table/content-box-background05.svg')] bg-center;
content: "";
}
.content-box .content-decoration {
@apply bg-normal px-8 py-4;
}
/* .content-box .content-decoration::before {
@apply absolute -top-3 -right-[10px] h-8 w-8 bg-no-repeat z-10 bg-[url('../../assets/img/table/content-box-background02.svg')] bg-center;
content: "";
} */
.content-box .content-decoration2::before {
@apply absolute -bottom-1 -left-8 h-14 w-14 bg-no-repeat z-10 bg-[url('../../assets/img/table/content-box-background03.svg')] bg-center;
content: "";
}
/* .content-box .content-decoration2::after {
content: "";
background: url(../../assets/img/table/content-box-background04.svg) center
center;
position: absolute;
right: -27px;
bottom: -7px;
height: 65px;
width: 50px;
background-repeat: no-repeat;
z-index: 2;
} */
</style>

3
src/components/customUI/FileSystemCollapse.vue
View File

@ -64,11 +64,10 @@ watch(
twMerge(
'flex-col text-xl',
cls,
openChildren.includes(d.key) || open ? 'flex' : 'hidden'
openChildren.includes(dataParentKey) || open ? 'flex' : 'hidden'
)
"
v-for="d in data"
:key="d.key"
:data-parent="d.key"
:open="open"
>

6
src/components/customUI/Input.vue
View File

@ -9,7 +9,7 @@ const props = defineProps({
type: String,
default: "",
},
value: Object,
value: String,
isTopLabelExist: {
type: Boolean,
default: true,
@ -73,7 +73,7 @@ const curWidth = computed(() => {
:disabled="disabled"
:readonly="readonly"
:required="required"
class="text-lg text-white bg-transparent w-full input input-bordered rounded-md px-3 border-info focus-within:border-info read-only:bg-base-300 read-only:text-zinc-300 read-only:border-0 read-only:focus-within:outline-0 read-only:focus:outline-0"
class="text-lg text-white bg-transparent w-full input input-bordered rounded-md px-3 border-info focus-within:border-info read-only:bg-base-300 read-only:text-zinc-500 read-only:border-0 read-only:focus-within:outline-0 read-only:focus:outline-0"
/>
<input
v-else
@ -84,7 +84,7 @@ const curWidth = computed(() => {
:disabled="disabled"
:readonly="readonly"
:required="required"
class="text-lg text-white bg-transparent w-full input input-bordered rounded-md px-3 border-info focus-within:border-info read-only:bg-base-300 read-only:text-zinc-300 read-only:border-0 read-only:focus-within:outline-0 read-only:focus:outline-0"
class="text-lg text-white bg-transparent w-full input input-bordered rounded-md px-3 border-info focus-within:border-info read-only:bg-base-300 read-only:text-zinc-500 read-only:border-0 read-only:focus-within:outline-0 read-only:focus:outline-0"
/>
<div :class="twMerge(isBottomLabelExist ? 'label' : '')">
<span class="label-text-alt"><slot name="bottomLeft"></slot></span>

2
src/components/customUI/InputNumber.vue
View File

@ -9,7 +9,7 @@ const props = defineProps({
type: String,
default: "",
},
value: Object,
value: String,
isTopLabelExist: {
type: Boolean,
default: true,

2
src/components/customUI/Modal.vue
View File

@ -51,7 +51,7 @@ onMounted(() => {
: 'focus-visible:outline-none backdrop:bg-transparent',
)" :style="modalStyle" v-draggable="draggable">
<div :class="twMerge(
'modal-box static rounded-md border border-info py-5 px-6 overflow-y-auto bg-normal',
'modal-box static rounded-md border border-info py-5 px-6 overflow-y-scroll bg-normal',
modalClass
)
" :style="{ minWidth: isNaN(width) ? width : `${width}px` }">

2
src/components/customUI/RadioGroup.vue
View File

@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge";
const props = defineProps({
name: String,
value: Object,
value: String,
items: Array,
isLabelExist: {
type: Boolean,

128
src/components/customUI/SearchSelect.vue
View File

@ -1,128 +0,0 @@
<script setup>
import { defineProps, ref, computed, watch, nextTick, watchEffect } from "vue";
import { twMerge } from "tailwind-merge";
/* --------------------------------------------------------------
options: [
{
key: unique,
content: "",
selected: true / false,
disabled: true / false
}
]
---------------------------------------------------------------- */
const props = defineProps({
options: Array,
name: String,
Attribute: String,
onChange: Function,
selectClass: String,
value: Object,
isTopLabelExist: {
type: Boolean,
default: true,
},
isBottomLabelExist: {
type: Boolean,
default: true,
},
required: {
type: Boolean,
default: false,
},
readonly: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
search: {
type: Boolean,
default: false,
},
});
const searchQuery = ref("");
const isOpen = ref(false);
const selectedOption = ref(null);
const filteredOptions = computed(() => {
return props.options.filter((option) => {
const content = option[props.Attribute] || option.key || "";
return content.toLowerCase().includes(searchQuery.value.toLowerCase());
});
});
const selectOption = (value) => {
if (props.onChange) {
props.onChange(value);
} else {
props.value[props.name] = value.key;
selectedOption.value = props.options.find(
(option) => option.key === value.key
);
}
isOpen.value = false;
};
watchEffect(() => {
isOpen.value = false;
selectedOption.value = props.options.find(
(option) => option.key == props.value[props.name]
);
});
</script>
<template>
<label class="form-control w-80 max-w-sm relative">
<div :class="twMerge(isTopLabelExist ? 'label' : '')">
<span class="label-text text-lg"><slot name="topLeft"></slot></span>
<span class="label-text-alt"> <slot name="topRight"></slot></span>
</div>
<div
:class="
twMerge(
'select rounded-md text-lg cursor-pointer pt-2',
disabled ? 'text-gray-300' : 'bg-transparent border-info'
)
"
@click="disabled ? () => {} : (isOpen = !isOpen)"
>
{{ selectedOption ? selectedOption[Attribute] : "" }}
</div>
<div
v-if="isOpen"
class="absolute z-10 bg-gray-800 border border-info rounded-md w-full p-2"
>
<input
v-model="searchQuery"
type="text"
placeholder="Search..."
class="input input-bordered border-info rounded-md w-full mb-2 px-2"
/>
<ul class="max-h-60 overflow-auto">
<li
v-for="option in filteredOptions"
:key="option.key || option"
@click="selectOption(option)"
class="px-4 py-2 hover:bg-gray-600 cursor-pointer"
>
{{ option[Attribute] || option }}
</li>
</ul>
</div>
<div :class="twMerge(isBottomLabelExist ? 'label' : '')">
<span class="label-text-alt"> <slot name="bottomLeft"></slot></span>
<span class="label-text-alt"> <slot name="bottomRight"></slot></span>
</div>
</label>
</template>
<style lang="scss" scoped></style>

4
src/components/customUI/Select.vue
View File

@ -18,7 +18,7 @@ const props = defineProps({
Attribute: String,
onChange: Function,
selectClass: String,
value: Object,
value: String || Number,
isTopLabelExist: {
type: Boolean,
default: true,
@ -70,7 +70,9 @@ const props = defineProps({
:class="twMerge(disabled ? `text-white` : 'text-dark')"
:value="option.value || option.key || option"
>
<span>
{{ option[Attribute] || option }}
</span>
</option>
</select>
<div :class="twMerge(isBottomLabelExist ? 'label' : '')">

65
src/components/customUI/Table.vue
View File

@ -30,10 +30,6 @@ const props = defineProps({
const currentDataSource = ref([]);
const dataSourceStorage = ref([]);
const tableDataSource = computed(() =>
props.pagination ? currentDataSource.value : dataSourceStorage.value
);
watch(
() => props.dataSource,
(newValue) => {
@ -51,7 +47,7 @@ watch(
);
const updateDataSource = (data) => {
// console.log("update", data);
console.log("update", data);
currentDataSource.value = data;
};
provide("current_table_data", {
@ -62,7 +58,6 @@ const sortRule = ref({});
const filterColumn = ref({});
const filterItems = ref({});
const selectedFilterItem = ref({});
const searchQuery = ref("");
const toggleFilterModal = (key) => {
let newFilter = Object.assign(filterColumn.value);
@ -137,10 +132,7 @@ const form = ref(null);
const onFilter = (key, reset = false) => {
const formData = new FormData(form.value);
if (reset) {
formData.delete(key);
searchQuery.value = "";
}
reset && formData.delete(key);
for (let [name, value] of formData) {
console.log(name, value);
}
@ -236,38 +228,22 @@ watch(
"
@click="() => toggleFilterModal(column.key)"
/>
<div class="fixed z-50" v-if="filterColumn[column.key]">
<div
class="absolute top-full -left-1/2 z-50"
v-if="filterColumn[column.key]"
>
<div class="card min-w-max bg-body shadow-xl px-10 py-5">
<label
class="input input-bordered bg-transparent rounded-lg flex items-center px-2 mb-4 border-success focus-within:border-success"
>
<font-awesome-icon
:icon="['fas', 'search']"
class="w-6 h-6 mr-2 text-success"
/>
<input
type="text"
:placeholder="t('operation.enter_text')"
class="text-white bg-transparent w-full"
v-model="searchQuery"
/>
</label>
<div class="max-h-72 overflow-x-auto px-2">
<Checkbox
v-for="item in filterItems[column.key].filter(
(item) =>
item.name && item.name.includes(searchQuery)
)"
:title="item.name"
:value="item.name"
:key="item.name"
:name="column.key"
:checked="
selectedFilterItem[column.key].includes(item.name)
"
className="justify-start"
/>
</div>
<Checkbox
v-for="item in filterItems[column.key]"
:title="item.name"
:value="item.name"
:key="item.name"
:name="column.key"
:checked="
selectedFilterItem[column.key].includes(item.name)
"
className="justify-start"
/>
<div class="card-actions mt-4 justify-end">
<input
type="reset"
@ -295,12 +271,12 @@ watch(
<Loading />
</td>
</tr>
<tr v-else-if="tableDataSource.length == 0">
<tr v-else-if="currentDataSource.length == 0">
<td :colspan="columns.length">{{ $t("table.no_data") }}</td>
</tr>
<template v-else :sort="sortRule">
<tr
v-for="(data, index) in tableDataSource"
v-for="(data, index) in currentDataSource"
:key="data.key || data[rowKey]"
>
<template
@ -334,7 +310,6 @@ watch(
</form>
<slot name="afterTable"></slot>
<Pagination
v-if="pagination"
:pagination="pagination"
:dataSource="dataSourceStorage"
:sort="sortRule"
@ -347,7 +322,7 @@ watch(
<style lang="css" scoped>
/**資料框**/
.content-box {
@apply border border-info p-1 relative mb-4 bg-transparent;
@apply border border-info p-1 relative mb-4 bg-transparent ;
}
.content-box .table {

4
src/components/customUI/Textarea.vue
View File

@ -3,7 +3,7 @@ import { defineProps } from "vue";
const props = defineProps({
name: String,
value: Object,
value: String,
placeholder: String,
});
</script>
@ -15,7 +15,7 @@ const props = defineProps({
<span class="label-text-alt"> <slot name="topRight"></slot></span>
</div>
<textarea
class="textarea text-lg rounded-md border-info focus-within:border-info h-40"
class="textarea text-lg rounded-md border-info focus-within:border-info h-24"
:placeholder="placeholder"
:name="name"
v-model="value[name]"

2
src/components/customUI/Toast.vue
View File

@ -37,7 +37,7 @@ watch(
role="alert"
:class="
twMerge(
`alert text-xl rounded-md fixed left-1/2 -translate-x-1/2 top-24 z-[1000] max-w-fit`,
`alert text-xl rounded-md absolute left-1/2 -translate-x-1/2 top-5 z-[1000] max-w-fit`,
status === 'info'
? 'alert-info'
: status === 'error'

23
src/components/customUI/Upload.vue
View File

@ -9,7 +9,7 @@ const props = defineProps({
getFileList: Function,
multiple: Boolean,
baseUrl: String,
formats: { type: String, default: "txt、doc、xls、pdf、png、jpg、ppt、zip、rar" },
formats: { type: String, default: "txt、doc、xls、pdf、png、jpg" }
});
const acceptFileType = [
@ -26,13 +26,6 @@ const acceptFileType = [
"application/msword",
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
"application/vnd.ms-powerpoint",
".ppt",
".pptx",
".zip",
".rar",
"application/vnd.openxmlformats-officedocument.presentationml.presentation", // PowerPoint Files 2007+
"application/zip", // ZIP Files
"application/x-rar-compressed", // RAR Files
];
const loading = ref(false);
@ -142,7 +135,7 @@ const revokeURL = (src) => {
<template>
<label class="form-control w-full">
<div class="label" @click.stop.prevent="() => {}">
<div class="label">
<span class="label-text text-lg"><slot name="topLeft"></slot></span>
<span class="label-text-alt"> <slot name="topRight"></slot></span>
</div>
@ -244,14 +237,6 @@ const revokeURL = (src) => {
:icon="['fas', 'file-powerpoint']"
/>
</template>
<template
v-else-if="file.type?.match(/zip|rar/g) || file.ext?.match(/zip|rar/g)"
>
<font-awesome-icon
class="mx-auto mb-2 text-4xl text-white"
:icon="['fas', 'file-archive']"
/>
</template>
<template
v-else-if="
!file.type?.match('image/*') &&
@ -281,9 +266,7 @@ const revokeURL = (src) => {
</div>
<p class="text-2xl my-2">{{ $t("upload.title") }}</p>
<p class="mb-0 col-grey">{{ $t("upload.description") }}</p>
<p class="mb-0 col-grey">
{{ $t("upload.formats") }} : {{ props.formats }}
</p>
<p class="mb-0 col-grey">{{ $t("upload.formats") }} : {{props.formats}}</p>
</div>
</div>

34
src/components/forge/Forge.vue
View File

@ -1,7 +1,7 @@
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
const forgeDom = ref(null);
let viewer = null;
@ -34,20 +34,6 @@ const initViewer = (container) => {
});
};
// 設置攝影機位置
const setCameraPosition = (position, target) => {
const nav = viewer.navigation;
// 使用 THREE.Vector3 定義位置與焦點
const newPosition = new THREE.Vector3(position.x, position.y, position.z);
const newTarget = new THREE.Vector3(target.x, target.y, target.z);
// 設定攝影機的新位置與焦點
nav.setView(newPosition, newTarget);
console.log("攝影機定位完成:");
console.log("新位置:", newPosition);
console.log("新焦點:", newTarget);
};
// 使用本地 .svf 文件加載模型
const loadModel = (filePath) => {
return new Promise((resolve, reject) => {
@ -57,21 +43,6 @@ const loadModel = (filePath) => {
(model) => {
viewer.impl.invalidate(true);
viewer.fitToView();
// 設置攝影機位置
setTimeout(() => {
setCameraPosition(
{
x: -212.33421531428007,
y: 299.3895400707608,
z: 157.48711907404862,
}, // 攝影機的新位置
{
x: 151.61159898775077,
y: -196.55136189609067,
z: -136.47282256290345,
} // 攝影機的焦點
);
}, 500);
resolve(model);
console.log("模型加載完成");
},
@ -83,7 +54,7 @@ const loadModel = (filePath) => {
onMounted(async () => {
console.log("Forge 加載");
await initViewer(forgeDom.value);
const filePath = `${FILE_BASEURL}/upload/forge/0.svf`;
const filePath = `${FILE_BASEURL}/upload/forge/0.svf`;
loadModel(filePath);
});
@ -114,4 +85,5 @@ onUnmounted(() => {
display: none;
bottom: 200px;
}
</style>

16
src/components/forge/ForgeForSystem.vue
View File

@ -30,7 +30,7 @@ const props = defineProps({
});
const store = useHeatmapBarStore();
const { updateDataVisualization, createSprites, showSubSystemObjects, forgeClickListener, clear, setCameraPosition } = useForgeSprite()
const { updateDataVisualization, createSprites, showSubSystemObjects, forgeClickListener, clear } = useForgeSprite()
const forgeDom = ref(null);
@ -80,20 +80,6 @@ const loadModel = (viewer, filePath) => {
(model) => {
viewer.impl.invalidate(true);
viewer.fitToView();
setTimeout(() => {
setCameraPosition(
{
x: 241.40975707867645,
y: -260.4481491801548,
z: 129.5719879121458,
}, // 攝影機的新位置
{
x: -183.36302786348594,
y: 194.05657710941966,
z: -149.3902249981004,
} // 攝影機的焦點
);
}, 500);
updateDataVisualization(viewer)
resolve(model);
console.log("模型加載完成");

4
src/components/forge/index.vue
View File

@ -93,8 +93,8 @@ const createSprites = async (dataVizExtn) => {
const DataVizCore = Autodesk.DataVisualization.Core;
const viewableType = DataVizCore.ViewableType.SPRITE;
let spriteColor = new THREE.Color(0xffffff);
const BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
const spriteIconUrl = `${BASEURL}/dist/hotspot.svg`;
const BASEURL = import.meta.env.VITE_FORGE_BASEURL;
const spriteIconUrl = `${BASEURL}/hotspot.svg`;
const style = new DataVizCore.ViewableStyle(
viewableType,
spriteColor,

29
src/components/navbar/Navbar.vue
View File

@ -1,22 +1,17 @@
<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import NavbarItem from "./NavbarItem.vue";
import NavbarBuilding from "./NavbarBuilding.vue";
import Logo from "@/assets/img/logo.svg";
import useUserInfoStore from "@/stores/useUserInfoStore";
import useBuildingStore from "@/stores/useBuildingStore";
import AlarmDrawer from "@/components/alarm/AlarmDrawer.vue";
import NavbarLang from "./NavbarLang.vue";
import { twMerge } from "tailwind-merge";
const user = ref("");
const menuShow = ref(true);
const router = useRouter();
const store = useUserInfoStore();
const storeBuilding = useBuildingStore();
onMounted(() => {
const name = store.user.user_name;
if (name) {
@ -29,26 +24,12 @@ const toggleMenu = () => {
};
const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;
const logout = () => {
document.cookie = "JWT-Authorization=; Max-Age=0";
document.cookie = "user_name=; Max-Age=0";
store.user.token = "";
store.user.user_name = "";
storeBuilding.deleteBuilding();
router.push({ path: "/login" });
};
</script>
<template>
<header class="navbar bg-dark text-light-info w-full relative z-50">
<div class="navbar-start min-w-[480px] lg:min-w-[440px]">
<div
tabindex="0"
role="button"
class="btn btn-ghost lg:hidden"
@click="toggleMenu"
>
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden" @click="toggleMenu">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
@ -112,12 +93,12 @@ const logout = () => {
class="dropdown-content translate-y-2 z-[100] menu py-3 shadow rounded w-32 bg-[#4c625e] border text-center"
>
<li class="text-white">
<a
href="#"
@click.prevent="logout"
<router-link
to="logout"
type="link"
class="flex flex-col justify-center items-center"
>{{ $t("sign_out") }}
</a>
</router-link>
</li>
</ul>
</div>

64
src/components/navbar/NavbarBuilding.vue
View File

@ -1,48 +1,50 @@
<script setup>
import { onMounted } from "vue";
import { getBuildings } from "@/apis/building";
import { onMounted, ref } from "vue";
import useBuildingStore from "@/stores/useBuildingStore";
const store = useBuildingStore();
const getBui = async () => {
console.log(store.buildings);
const res = await getBuildings();
store.buildings = res.data;
store.selectedBuilding = res?.data[0];
};
const selectBuilding = (bui) => {
store.selectedBuilding = bui; // 改變 selectedBuilding，watch 會自動更新資料
store.selectedBuilding = bui;
};
onMounted(() => {
store.initialize(); // 初始化資料
getBui();
});
</script>
<template>
<template v-if="store.buildings.length > 1">
<div class="dropdown dropdown-bottom">
<div
tabindex="0"
role="button"
class="text-white ml-8 text-lg font-semiLight"
>
{{ store.selectedBuilding?.full_name }}
<font-awesome-icon :icon="['fas', 'angle-down']" class="ml-1" />
</div>
<ul
tabindex="0"
class="dropdown-content w-48 left-8 translate-y-2 z-[1] menu py-3 shadow rounded bg-[#4c625e] border text-center"
>
<li
class="text-white my-1 text-base cursor-pointer"
v-for="bui in store.buildings"
:key="bui.building_tag"
@click="selectBuilding(bui)"
>
{{ bui.full_name }}
</li>
</ul>
</div>
</template>
<template v-else>
<div class="text-white ml-8 text-lg font-semiLight">
<div class="dropdown dropdown-bottom ">
<div
tabindex="0"
role="button"
class="text-white ml-8 text-lg font-semiLight"
>
{{ store.selectedBuilding?.full_name }}
<font-awesome-icon :icon="['fas', 'angle-down']" class="ml-1" />
</div>
</template>
<ul
tabindex="0"
class="dropdown-content left-8 translate-y-2 z-[1] menu py-3 shadow rounded bg-[#4c625e] border text-center"
>
<li
class="text-white my-1 text-base"
v-for="bui in store.buildings"
:key="bui.building_tag"
@click="selectBuilding(bui)"
>
{{ bui.full_name }}
</li>
</ul>
</div>
</template>
<style lang="scss" scoped></style>

67
src/components/navbar/NavbarItem.vue
View File

@ -2,7 +2,6 @@
import { onMounted, ref, watch, computed } from "vue";
import { AUTHPAGES } from "@/constant";
import { getAuth, getAllSysSidebar } from "@/apis/building";
import { getSideBar } from "@/apis/energy";
import useBuildingStore from "@/stores/useBuildingStore";
import useUserInfoStore from "@/stores/useUserInfoStore";
import { useI18n } from "vue-i18n";
@ -14,8 +13,6 @@ const store = useUserInfoStore();
const buildingStore = useBuildingStore();
const route = useRoute();
const openKeys = ref([]); // 追蹤當前打開的子菜單
const menu_array = ref([]);
const currentAuthCode = ref("");
const iniFroList = async () => {
const res = await getAuth(locale.value);
@ -37,22 +34,12 @@ const authPages = computed(() =>
);
const open = ref(false);
const getSubMonitorPage = async (building_guid) => {
const res = await getAllSysSidebar(building_guid);
const getSubMonitorPage = async (building) => {
const res = await getAllSysSidebar();
buildingStore.mainSubSys = res.data.history_Main_Systems;
menu_array.value = res.data.history_Main_Systems;
};
const getSubPage = async (system_type) => {
const res = await getSideBar(system_type);
menu_array.value = res.data;
};
const showDrawer = async (authCode) => {
if (authCode === "PF1") {
await getSubMonitorPage(buildingStore.selectedBuilding.building_guid);
} else if (authCode === "PF2" || authCode === "PF11") {
await getSubPage(authCode === "PF2" ? "Energy" : "Setting");
}
currentAuthCode.value = authCode;
const showDrawer = () => {
getSubMonitorPage();
open.value = true;
};
const onClose = () => {
@ -71,7 +58,7 @@ watch(
() => buildingStore.selectedBuilding,
(newVal) => {
if (newVal !== null) {
getSubMonitorPage(newVal.building_guid);
getSubMonitorPage(newVal.building_tag);
}
}
);
@ -102,26 +89,14 @@ onMounted(() => {
<li
v-for="page in authPages"
class="flex flex-col items-center justify-center"
:key="page.authCode"
>
<a
v-if="
page.authCode === 'PF1' ||
page.authCode === 'PF2' ||
page.authCode === 'PF11'
"
@click="showDrawer(page.authCode)"
v-if="page.authCode === 'PF1'"
@click="showDrawer"
:class="
twMerge(
'flex lg:flex-col justify-center items-center btn-group text-white cursor-pointer',
page.authCode === 'PF1' && route.fullPath.includes('/system')
? 'router-link-active router-link-exact-active'
: '',
page.authCode === 'PF2' &&
route.fullPath.includes('/energyManagement')
? 'router-link-active router-link-exact-active'
: '',
page.authCode === 'PF11' && route.fullPath.includes('/setting')
route.fullPath.includes('/system')
? 'router-link-active router-link-exact-active'
: ''
)
@ -167,34 +142,22 @@ onMounted(() => {
@openChange="handleOpenChange"
>
<a-sub-menu
v-for="main in menu_array"
v-for="main in buildingStore.mainSubSys"
:key="main.main_system_tag"
:title="main.full_name"
v-if="menu_array.length > 0 && open"
>
<a-menu-item
v-for="sub in currentAuthCode === 'PF1'
? main.history_Sub_systems
: currentAuthCode === 'PF2'
? main.sub
: main.sub"
:key="sub.sub_system_tag + `_` + sub.type"
v-for="sub in main.history_Sub_systems"
:key="sub.sub_system_tag"
@click="() => onClose()"
>
<router-link
:to="{
name:
currentAuthCode === 'PF2'
? 'energyManagement'
: currentAuthCode === 'PF11'
? 'setting'
: 'sub_system',
name: 'sub_system',
params: {
main_system_id: main.main_system_tag,
sub_system_id: sub.sub_system_tag,
...(currentAuthCode === 'PF2' || currentAuthCode === 'PF11'
? { type: sub.type }
: { floor_id: 'main' }),
floor_id: 'main',
},
}"
>
@ -215,8 +178,8 @@ onMounted(() => {
@apply bg-transparent lg:w-[95px] w-full mb-5 lg:mb-0;
}
.menu-box .btn-group span {
@apply text-2xl ms-2 lg:ms-0 lg:text-sm;
.menu-box .btn-group span{
@apply text-2xl ms-2 lg:ms-0 lg:text-sm;
}
.menu-box > li {

163
src/config/cn.json
View File

@ -8,10 +8,7 @@
"table": {
"no_data": "表中数据为空",
"in_otal": "笔资料",
"skip_to": "跳至",
"serial_number": "序列号",
"name": "名称",
"time": "时间"
"skip_to": "跳至"
},
"upload": {
"title": "选择一个文件或拖放到这里",
@ -23,35 +20,11 @@
"elec_consumption_comparison": "用电量比较",
"elec_consumption_comparison_trend": "用电量比较趋势",
"electricity_consumption": "用电量",
"today_electricity_consumption": "今日用电量 ( kWH )",
"yesterday_electricity_consumption": "昨天用电量 ( kWH )",
"instant_power": "即时功率 ( kW )",
"instant_contract_capacity_ratio": "契約容量佔比 ( % )",
"today_electricity_consumption": "今日用电量",
"yesterday_electricity_consumption": "昨天用电量",
"this_last_week": "本周/上周",
"thisweek_electricity_consumption": "本周用电量",
"lastweek_electricity_consumption": "上周用电量",
"one_hour": "1小时",
"four_hour": "4小时",
"eight_hour": "8小时",
"energy_ranking": "能耗排行",
"last_30_days_energy_trend": "近30天能耗趋势",
"today_energy_consumption": "本日能耗",
"this_month_energy_consumption": "本月能耗",
"relative_energy_consumption": "环比能耗",
"daily_relative_change": "日环比",
"weekly_relative_change": "周环比",
"monthly_relative_change": "月环比",
"yearly_relative_change": "年环比",
"today": "今日",
"yesterday": "昨日",
"this_week": "本周",
"last_week": "上周",
"this_month": "本月",
"last_month": "上月",
"this_year": "今年",
"last_year": "去年",
"work_order": "工单",
"system_status": "系统状态"
"lastweek_electricity_consumption": "上周用电量"
},
"history": {
"title": "历史资料",
@ -106,61 +79,12 @@
"total_elec_cost": "总电费",
"carbon_equivalent": "碳排当量",
"edit_carbon_emission": "编辑碳排放系数",
"carbon_emission_coefficient": "碳排放系数",
"electricity_classification": "用电分类",
"electricity_price": "电费每度单价",
"floor": "楼层",
"maximum": "最大值",
"maximum_time": "最大值时间",
"minimum": "最小值",
"minimum_time": "最小值时间",
"average_value": "平均值",
"start_value": "起始值(kWh)",
"end_value": "截止值(kWh)",
"difference": "差值(kWh)",
"power_consumption": "用电量(kWh)",
"ranking": "排名",
"subtotal": "小计",
"unit_price": "单价",
"total_amount": "金额总计",
"elec_price_list": "电价表",
"residential": "住宅型",
"standard": "标准型",
"simple_elec_price_two_stage": "简易型时间电价二段式",
"simple_elec_price_three_stage": "简易型时间电价三段式",
"classification": "分类",
"summer_months": "夏月",
"non_summer_months": "非夏月",
"time_outside_summer_months": "夏月以外的时间",
"basic_elec_charge": "基本电费",
"charged_per_household": "按户计收",
"per_household_month": "每户每月",
"mon_to_friday": "周一~周五",
"peak_hours": "尖峰时间",
"semi_peak_hours": "半尖峰时间",
"off_peak_hours": "离峰时间",
"price_per_kwh": "每度",
"all_day": "全日",
"sat_sun_off_peak_days": "周六、周日及离峰日",
"usage_over_2000kwh": "每月总度数超过2000度之部分",
"add": "加",
"standard_time_of_use_tariff_2_stage": "标准型时间电价二段式",
"standard_time_of_use_tariff_3_stage": "标准型时间电价三段式",
"single_phase": "单相",
"three_phase": "三相",
"frequent_contract": "经常契约",
"per_kw_per_month": "每瓩每月",
"non_summer_contract": "非夏日契约",
"saturday_semi_peak_contract": "周六半尖峰契约",
"off_peak_contract": "离峰契约",
"variable_electricity_charge": "流动电费",
"saturday": "周六",
"sunday_and_off_peak_days": "周日及离峰日"
"carbon_emission_coefficient":"碳排放系数"
},
"alarm": {
"title": "显示警告",
"notify": "异常通知",
"number": "异常ID",
"number": "异常编号",
"category": "异常类别",
"device_name": "设备名称",
"message": "异常讯息",
@ -178,10 +102,9 @@
"end_date": "结束日期",
"building_and_floor": "栋别-楼层",
"uuid": "异常ID",
"alarmClass": "告警条件",
"alarmClass": "异常类别",
"device_name": "设备名称",
"device_number": "设备编号",
"device_point_name": "点位名称",
"date": "发生日期",
"time": "发生时间",
"error_msg": "异常原因",
@ -208,12 +131,10 @@
"qualifications": "限定条件",
"upper_limit": "上限",
"lower_limit": "下限",
"delay": "持续秒数",
"highDelay": "上限持续秒数",
"lowDelay": "下限持续秒数",
"warning_method": "警示方式",
"warning_time": "警示时间",
"warning_value": "警示值",
"operation": "功能",
"alarm_settings": "异常设定",
"time_setting": "时间设定",
@ -225,23 +146,7 @@
"notify_email": "email",
"notify_items": "通知项目",
"notify_list": "通知名单",
"choose": "选择",
"day_time": "星期/时间",
"click_time_period": "请用滑鼠点击时间段",
"clear": "清空",
"sunday": "星期日",
"monday": "星期一",
"tuesday": "星期二",
"wednesday": "星期三",
"thursday": "星期四",
"friday": "星期五",
"saturday": "星期六",
"schedule_name": "时段名称",
"schedule_content": "时段内容",
"reorganization": "MQTT 告警重整",
"online": "在线",
"offline": "离线",
"alarm": "告警"
"choose": "选择"
},
"operation": {
"title": "运维管理",
@ -255,14 +160,13 @@
"start_time": "预计开始时间",
"upload": "档案上传",
"finish_time": "完成时间",
"updated_time": "更新时间",
"operation": "功能",
"vendor": "厂商",
"contact_person": "联络人",
"phone": "电话",
"email": "email",
"created_at": "建立日期",
"maintenance": "保养",
"maintainance": "保养",
"repair": "维修",
"company_info": "厂商资料",
"repair_item": "维修项目",
@ -270,8 +174,6 @@
"responsible_vendor": "负责厂商",
"not_completed": "未完成",
"completed": "已完成",
"complete": "已完成",
"incomplete": "未完成",
"worker_id": "工作人员编号",
"notice": "注意事项",
"result_description": "结果描述",
@ -304,13 +206,10 @@
},
"assetManagement": {
"title": "资产管理",
"add_system_category": "新增系统类别",
"edit_system_category": "修改系统类别",
"add_device_category": "新增设备类别",
"edit_device_category": "修改设备类别",
"add_category": "新增类别",
"system_name": "名称",
"system_value": "代号",
"system_parent": "所属系統",
"system_parent": "所属大类",
"device_number": "设备编号",
"device_name": "设备名称",
"asset_number": "资产编号",
@ -338,10 +237,7 @@
"associated_device": "关联设备",
"choose": "选择",
"index": "编号",
"floor_plan": "平面图",
"department": "部门",
"department_name": "部门名称",
"building": "栋别"
"floor_plan": "平面图"
},
"accountManagement": {
"account_title": "帐号管理",
@ -385,44 +281,15 @@
"email_format": "请输入正确 Email 地址",
"password_format": "密码长度至少8码，必须包含英文及数字",
"start_time_placeholder": "请输入预计开始日期",
"finish_time_placeholder": "请输入完成日期",
"rename": "重新命名",
"download": "下载",
"confirm": "确认",
"restore": "复原",
"stop_edit": "停止修改",
"start_edit": "开始修改",
"convert": "轉換"
"restore": "复原"
},
"msg": {
"msg":{
"sure_to_delete": "是否确认删除该项目?",
"sure_to_delete_permanent": "是否确认永久删除该项目?",
"delete_success": "删除成功",
"delete_failed": "删除失败",
"mqtt_refresh": "重新设定成功",
"schema_name_required": "架构名称栏位必填",
"incorrect_format":"格式不正确",
"send_successfully":"送出成功",
"edit_successfully":"修改成功"
},
"setting": {
"electricity_meter": "电表",
"MQTT_parse": "MQTT 解析",
"schema": "架构",
"point": "点位",
"description": "描述",
"IoT_point_name": "IoT 点位名称",
"IoT_point_code": "IoT 点位代号",
"number_of_decimal_places": "小数位数",
"boolean_value": "布林值",
"hide_point": "点位显示",
"hide_switch": "switch 功能",
"switch_on_message": "switch 开启时传送的讯息",
"switch_off_message": "switch 关闭时传送的讯息",
"schema_name": "架构名称",
"IoT_point_structure": "IoT点位结构",
"system_point_name": "系统点位名称",
"json_format_text": "请贴上 JSON 格式数据",
"json_click_text": "请在左侧输入JSON并点选转换按钮"
"delete_failed": "删除失败"
}
}

165
src/config/tw.json
View File

@ -8,50 +8,23 @@
"table": {
"no_data": "表中數據為空",
"in_otal": "筆資料",
"skip_to": "跳至",
"serial_number": "序號",
"name": "姓名",
"time": "時間"
"skip_to": "跳至"
},
"upload": {
"title": "選擇一個文件或拖放到這裡",
"description": "檔案不超過 10MB",
"formats": "檔案格式"
"formats": "檔案格式"
},
"dashboard": {
"yesterday_today": "昨天/今天",
"elec_consumption_comparison": "用電量比較",
"elec_consumption_comparison_trend": "用電量比較趨勢",
"electricity_consumption": "用電量",
"today_electricity_consumption": "今日用電量 ( kWH )",
"yesterday_electricity_consumption": "昨天用電量 ( kWH )",
"instant_power": "即時功率 ( kW )",
"instant_contract_capacity_ratio": "契約容量佔比 ( % )",
"today_electricity_consumption": "今日用電量",
"yesterday_electricity_consumption": "昨天用電量",
"this_last_week": "本週/上週",
"thisweek_electricity_consumption": "本周用電量",
"lastweek_electricity_consumption": "上週用電量",
"one_hour": "1小時",
"four_hour": "4小時",
"eight_hour": "8小時",
"energy_ranking": "能耗排行",
"last_30_days_energy_trend": "近30天能耗趨勢",
"today_energy_consumption": "本日能耗",
"this_month_energy_consumption": "本月能耗",
"relative_energy_consumption": "環比能耗",
"daily_relative_change": "日環比",
"weekly_relative_change": "周環比",
"monthly_relative_change": "月環比",
"yearly_relative_change": "年環比",
"today": "今日",
"yesterday": "昨日",
"this_week": "本周",
"last_week": "上周",
"this_month": "本月",
"last_month": "上月",
"this_year": "今年",
"last_year": "去年",
"work_order": "工單",
"system_status": "系統狀態"
"lastweek_electricity_consumption": "上週用電量"
},
"history": {
"title": "歷史資料",
@ -106,61 +79,12 @@
"total_elec_cost": "總電費",
"carbon_equivalent": "碳排當量",
"edit_carbon_emission": "編輯碳排放係數",
"carbon_emission_coefficient": "碳排放係數",
"electricity_classification": "用電分類",
"electricity_price": "電費每度單價",
"floor": "樓層",
"maximum": "最大值",
"maximum_time": "最大值時間",
"minimum": "最小值",
"minimum_time": "最小值時間",
"average_value": "平均值",
"start_value": "起始值(kWh)",
"end_value": "截止值(kWh)",
"difference": "差值(kWh)",
"power_consumption": "用電量(kWh)",
"ranking": "排名",
"subtotal": "小計",
"unit_price": "單價",
"total_amount": "金額總計",
"elec_price_list": "電價表",
"residential": "住宅型",
"standard": "標準型",
"simple_elec_price_two_stage": "簡易型時間電價二段式",
"simple_elec_price_three_stage": "簡易型時間電價三段式",
"classification": "分類",
"summer_months": "夏月",
"non_summer_months": "非夏月",
"time_outside_summer_months": "夏月以外的時間",
"basic_elec_charge": "基本電費",
"charged_per_household": "按戶計收",
"per_household_month": "每戶每月",
"mon_to_friday": "週一~週五",
"peak_hours": "尖峰時間",
"semi_peak_hours": "半尖峰時間",
"off_peak_hours": "離峰時間",
"price_per_kwh": "每度",
"all_day": "全日",
"sat_sun_off_peak_days": "週六、週日及離峰日",
"usage_over_2000kwh": "每月總度數超過2000度之部分",
"add": "加",
"standard_time_of_use_tariff_2_stage": "標準型時間電價二段式",
"standard_time_of_use_tariff_3_stage": "標準型時間電價三段式",
"single_phase": "單相",
"three_phase": "三相",
"frequent_contract": "經常契約",
"per_kw_per_month": "每瓩每月",
"non_summer_contract": "非夏日契約",
"saturday_semi_peak_contract": "週六半尖峰契約",
"off_peak_contract": "離峰契約",
"variable_electricity_charge": "流動電費",
"saturday": "週六",
"sunday_and_off_peak_days": "週日及離峰日"
"carbon_emission_coefficient":"碳排放係數"
},
"alarm": {
"title": "顯示警告",
"notify": "異常通知",
"number": "異常ID",
"number": "異常編號",
"category": "異常類別",
"device_name": "設備名稱",
"message": "異常訊息",
@ -178,10 +102,9 @@
"end_date": "結束日期",
"building_and_floor": "棟別-樓層",
"uuid": "異常ID",
"alarmClass": "告警條件",
"alarmClass": "異常類別",
"device_name": "設備名稱",
"device_number": "設備編號",
"device_point_name": "點位名稱",
"date": "發生日期",
"time": "發生時間",
"error_msg": "異常原因",
@ -208,12 +131,10 @@
"qualifications": "限定條件",
"upper_limit": "上限",
"lower_limit": "下限",
"delay": "持續秒數",
"highDelay": "上限持續秒數",
"lowDelay": "下限持續秒數",
"warning_method": "警示方式",
"warning_time": "警示時間",
"warning_value": "警示值",
"operation": "功能",
"alarm_settings": "異常設定",
"time_setting": "時間設定",
@ -225,23 +146,7 @@
"notify_email": "email",
"notify_items": "通知項目",
"notify_list": "通知名單",
"choose": "選擇",
"day_time": "星期/時間",
"click_time_period": "請用滑鼠點擊時間段",
"clear": "清空",
"sunday": "星期日",
"monday": "星期一",
"tuesday": "星期二",
"wednesday": "星期三",
"thursday": "星期四",
"friday": "星期五",
"saturday": "星期六",
"schedule_name": "時段名稱",
"schedule_content": "時段內容",
"reorganization": "MQTT 告警重整",
"online": "在線",
"offline": "離線",
"alarm": "告警"
"choose": "選擇"
},
"operation": {
"title": "運維管理",
@ -255,14 +160,13 @@
"start_time": "預計開始時間",
"upload": "檔案上傳",
"finish_time": "完成時間",
"updated_time": "更新時間",
"operation": "功能",
"vendor": "廠商",
"contact_person": "聯絡人",
"phone": "電話",
"email": "email",
"created_at": "建立日期",
"maintenance": "保養",
"maintainance": "保養",
"repair": "維修",
"company_info": "廠商資料",
"repair_item": "維修項目",
@ -270,8 +174,6 @@
"responsible_vendor": "負責廠商",
"not_completed": "未完成",
"completed": "已完成",
"complete": "已完成",
"incomplete": "未完成",
"worker_id": "工作人員編號",
"notice": "注意事項",
"result_description": "結果描述",
@ -304,13 +206,10 @@
},
"assetManagement": {
"title": "資產管理",
"add_system_category": "新增系統類別",
"edit_system_category": "修改系統類別",
"add_device_category": "新增設備類別",
"edit_device_category": "修改設備類別",
"add_category": "新增類別",
"system_name": "名稱",
"system_value": "代號",
"system_parent": "所屬系統",
"system_parent": "所屬大類",
"device_number": "設備編號",
"device_name": "設備名稱",
"asset_number": "資產編號",
@ -338,10 +237,7 @@
"associated_device": "關聯設備",
"choose": "選擇",
"index": "編號",
"floor_plan": "平面圖",
"department": "部門",
"department_name": "部門名稱",
"building": "棟別"
"floor_plan": "平面圖"
},
"accountManagement": {
"account_title": "帳號管理",
@ -385,44 +281,15 @@
"email_format": "請輸入正確的 Email 地址",
"password_format": "密碼長度至少8碼，必須包含英文及數字",
"start_time_placeholder": "請輸入預計開始日期",
"finish_time_placeholder": "請輸入完成日期",
"rename": "重新命名",
"download": "下載",
"confirm": "確認",
"restore": "復原",
"stop_edit": "停止修改",
"start_edit": "開始修改",
"convert": "轉換"
"restore": "復原"
},
"msg": {
"msg":{
"sure_to_delete": "是否確認刪除該項目?",
"sure_to_delete_permanent": "是否確認永久刪除該項目?",
"delete_success": "刪除成功",
"delete_failed": "刪除失敗",
"mqtt_refresh": "重新設定成功",
"schema_name_required": "架構名稱欄位必填",
"incorrect_format":"格式不正確",
"send_successfully":"送出成功",
"edit_successfully":"修改成功"
},
"setting": {
"electricity_meter":"電表",
"MQTT_parse": "MQTT 解析",
"schema": "架構",
"point": "點位",
"description": "描述",
"IoT_point_name": "IoT 點位名稱",
"IoT_point_code": "IoT 點位代號",
"number_of_decimal_places": "小數位數",
"boolean_value": "布林值",
"hide_point": "點位顯示",
"hide_switch": "switch 功能",
"switch_on_message": "switch 開啟時傳送的訊息",
"switch_off_message": "switch 關閉時傳送的訊息",
"schema_name": "架構名稱",
"IoT_point_structure": "IoT點位結構",
"system_point_name": "系統點位名稱",
"json_format_text": "請貼上 JSON 格式數據",
"json_click_text": "請在左側輸入JSON並點選轉換按鈕"
"delete_failed": "刪除失敗"
}
}

173
src/config/us.json
View File

@ -8,51 +8,13 @@
"table": {
"no_data": "No data",
"in_otal": "items in total",
"skip_to": "Skip to",
"serial_number": "Serial Number",
"name": "Name",
"time": "Time"
"skip_to": "Skip to"
},
"upload": {
"title": "Select a file or drag and drop here",
"description": "File size cannot exceed 10MB",
"formats": "File formats"
},
"dashboard": {
"yesterday_today": "Yesterday / Today's",
"elec_consumption_comparison": "Electricity Consumption Comparison",
"elec_consumption_comparison_trend": "Electricity Consumption Comparison Trend",
"electricity_consumption": "electricity consumption",
"today_electricity_consumption": "Today's electricity consumption in kWH",
"yesterday_electricity_consumption": "Yesterday's electricity consumption in kWH",
"instant_power": "Instant power kW",
"instant_contract_capacity_ratio": "Instant contract capacity ratio %",
"this_last_week": "This Week's / Last Week's",
"thisweek_electricity_consumption": "This week’s electricity consumption",
"lastweek_electricity_consumption": "Last week’s electricity consumption",
"one_hour": "1 hour",
"four_hour": "4 hour",
"eight_hour": "8 hour",
"energy_ranking": "Energy consumption ranking",
"last_30_days_energy_trend": "Energy consumption trend for the past 30 days",
"today_energy_consumption": "Today",
"this_month_energy_consumption": "This month",
"relative_energy_consumption": "Energy consumption trend",
"daily_relative_change": "Daily",
"weekly_relative_change": "Weekly",
"monthly_relative_change": "Monthly",
"yearly_relative_change": "Yearly",
"today": "Today",
"yesterday": "Yesterday",
"this_week": "This week",
"last_week": "Last week",
"this_month": "This month",
"last_month": "Last month",
"this_year": "This year",
"last_year": "Last year",
"work_order": "Work Order",
"system_status": "System Status"
},
"history": {
"title": "Historical Data",
"building_name": "Building",
@ -71,6 +33,17 @@
"end_date": "End date",
"end_time": "End time"
},
"dashboard": {
"yesterday_today": "Yesterday / Today's",
"elec_consumption_comparison": "Electricity Consumption Comparison",
"elec_consumption_comparison_trend": "Electricity Consumption Comparison Trend",
"electricity_consumption": "electricity consumption",
"today_electricity_consumption": "Today’s electricity consumption",
"yesterday_electricity_consumption": "Yesterday’s electricity consumption",
"this_last_week": "This Week's / Last Week's",
"thisweek_electricity_consumption": "This week’s electricity consumption",
"lastweek_electricity_consumption": "Last week’s electricity consumption"
},
"system": {
"status": "Status",
"details": "Details",
@ -106,56 +79,7 @@
"total_elec_cost": "Total Elec. Cost",
"carbon_equivalent": "Carbon Equivalent",
"edit_carbon_emission": "Edit carbon emission coefficient",
"carbon_emission_coefficient": "Carbon emission coefficient",
"electricity_classification": "Electricity Classification",
"electricity_price": "Electricity charge per unit price",
"floor": "Floor",
"maximum": "Maximum",
"maximum_time": "Maximum time",
"minimum": "Minimum value",
"minimum_time": "Minimum time",
"average_value": "Average value",
"start_value": "Start value (kWh)",
"end_value": "End value (kWh)",
"difference": "Difference (kWh)",
"power_consumption": "Power consumption (kWh)",
"ranking": "Ranking",
"subtotal": "Subtotal",
"unit_price": "Unit price",
"total_amount": "Total amount",
"elec_price_list": "Electricity Price List",
"residential": "Residential",
"standard": "Standard",
"simple_elec_price_two_stage": "Simple Time-of-Use Electricity Price (Two-Tier)",
"simple_elec_price_three_stage": "Simple Time-of-Use Electricity Price (Three-Tier)",
"classification": "Classification",
"summer_months": "Summer Months",
"non_summer_months": "Non-Summer Months",
"time_outside_summer_months": "Time Outside Summer Months",
"basic_elec_charge": "Basic Electricity Charge",
"charged_per_household": "Charged Per Household",
"per_household_month": "Per Household Per Month",
"mon_to_friday": "Monday to Friday",
"peak_hours": "Peak Hours",
"semi_peak_hours": "Semi-Peak Hours",
"off_peak_hours": "Off-Peak Hours",
"price_per_kwh": "Price Per kWh",
"all_day": "All Day",
"sat_sun_off_peak_days": "Saturday, Sunday, and Off-Peak Days",
"usage_over_2000kwh": "Usage Over 2000 kWh Per Month",
"add": "Add",
"standard_time_of_use_tariff_2_stage": "Standard Time-of-Use Tariff (Two-Tier)",
"standard_time_of_use_tariff_3_stage": "Standard Time-of-Use Tariff (Three-Tier)",
"single_phase": "Single Phase",
"three_phase": "Three Phase",
"frequent_contract": "Demand Charge",
"per_kw_per_month": "Per kW Per Month",
"non_summer_contract": "Non-Summer Demand Charge",
"saturday_semi_peak_contract": "Saturday Semi-Peak Demand Charge",
"off_peak_contract": "Off-Peak Demand Charge",
"variable_electricity_charge": "Variable Electricity Charge",
"saturday": "Saturday",
"sunday_and_off_peak_days": "Sunday and Off-Peak Days"
"carbon_emission_coefficient":"Carbon emission coefficient"
},
"alarm": {
"title": "Warning",
@ -178,10 +102,9 @@
"end_date": "End Date",
"building_and_floor": "Building - Floor",
"uuid": "Exception ID",
"alarmClass": "Alarm Conditions",
"alarmClass": "Exception Category",
"device_name": "Device Name",
"device_number": "Device Number",
"device_point_name": "Point Name",
"date": "Occurrence Date",
"time": "Occurrence Time",
"error_msg": "Abnormal Cause",
@ -208,12 +131,10 @@
"qualifications": "Qualifications",
"upper_limit": "Upper Limit",
"lower_limit": "Lower Limit",
"delay": "Duration (s)",
"highDelay": "Max Duration (s)",
"lowDelay": "Min Duration (s)",
"warning_method": "Warning Method",
"warning_time": "Warning Time",
"warning_value": "Warning Value",
"operation": "Function",
"alarm_settings": "Abnormal Alarm Settings",
"time_setting": "Time Setting",
@ -225,23 +146,7 @@
"notify_email": "Email",
"notify_items": "Notification Items",
"notify_list": "Notification List",
"choose": "Choose",
"day_time": "Week/Time",
"click_time_period": "Please click the time period with your mouse",
"clear": "Clear",
"sunday": "Sunday",
"monday": "Monday",
"tuesday": "Tuesday",
"wednesday": "Wednesday",
"thursday": "Thursday",
"friday": "Friday",
"saturday": "Saturday",
"schedule_name": "Time period name",
"schedule_content": "Time period content",
"reorganization": "MQTT Alarm Reorganization",
"online": "Online",
"offline": "Offline",
"alarm": "Alarm"
"choose": "Choose"
},
"operation": {
"title": "Operation And Maintenance Management",
@ -255,7 +160,6 @@
"start_time": "Estimated Start Time",
"upload": "File Upload",
"finish_time": "Completion Time",
"updated_time": "Update Time",
"operation": "Function",
"vendor": "Company",
"contact_person": "Contact Person",
@ -270,8 +174,6 @@
"responsible_vendor": "Responsible Vendor",
"not_completed": "Not Completed",
"completed": "Completed",
"complete": "Comp",
"incomplete": "Inc",
"worker_id": "Worker ID",
"notice": "Notice",
"result_description": "Result Description",
@ -304,13 +206,10 @@
},
"assetManagement": {
"title": "Asset Management",
"add_system_category": "Add system category",
"edit_system_category": "Edit system category",
"add_device_category": "Add device category",
"edit_device_category": "Edit device category",
"add_category": "Add Category",
"system_name": "Name",
"system_value": "Code",
"system_parent": "System category",
"system_parent": "Category",
"device_number": "Device Number",
"device_name": "Device Name",
"asset_number": "Asset Number",
@ -338,10 +237,7 @@
"associated_device": "Associated Devices",
"choose": "Choose",
"index": "Serial Number",
"floor_plan": "Floor Plan",
"department": "Department",
"department_name": "Department Name",
"building": "Building"
"floor_plan": "Floor Plan"
},
"accountManagement": {
"account_title": "Account Management",
@ -385,44 +281,15 @@
"email_format": "Please enter correct email address",
"password_format": "The password must be at least 8 characters long and must contain English and numbers.",
"start_time_placeholder": "Please enter expected start date",
"finish_time_placeholder": "Please enter completion date",
"rename": "Rename",
"download": "Download",
"confirm": "Confirm",
"restore": "Restore",
"stop_edit": "Stop editing",
"start_edit": "Start editing",
"convert": "Convert"
"restore": "Restore"
},
"msg": {
"sure_to_delete": "Are you sure to delete this item?",
"sure_to_delete_permanent": "Are you sure you want to permanently delete this item?",
"delete_success": "Delete successfully",
"delete_failed": "Delete failed",
"mqtt_refresh": "MQTT reset successful",
"schema_name_required": "The schema name field is required",
"incorrect_format":"Incorrect format",
"send_successfully":"Sent successfully",
"edit_successfully":"Edited successfully"
},
"setting": {
"electricity_meter": "Electricity Meter",
"MQTT_parse": "MQTT Parse",
"schema": "Schema",
"point": "Point",
"description": "Description",
"IoT_point_name": "IoT Point Name",
"IoT_point_code": "IoT Point Code",
"number_of_decimal_places": "Number of Decimal Places",
"boolean_value": "Boolean Value",
"hide_point": "Point Display",
"hide_switch": "Switch Function",
"switch_on_message": "Switch On Message",
"switch_off_message": "Switch Off Message",
"schema_name": "Schema name",
"IoT_point_structure": "IoT Point Structure",
"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"
"delete_failed": "Delete failed"
}
}

6
src/constant/authPage.js
View File

@ -61,10 +61,4 @@ export const AUTHPAGES = [
pageName: "ProductSetting",
navigate: "/productSetting",
},
{
authCode: "PF11",
icon: "cog",
pageName: "Setting",
navigate: "/Setting",
},
];

19
src/fontawsomeIconRegister.js
View File

@ -38,7 +38,6 @@ import {
faFileExcel,
faFileWord,
faFilePowerpoint,
faFileArchive,
faFileAlt,
faDatabase,
faBuilding,
@ -58,14 +57,8 @@ import {
faEye,
faEyeSlash,
faGlobe,
faDownload,
faStream,
faSave,
faCrown,
faClock,
faCheckCircle
faDownload
} from "@fortawesome/free-solid-svg-icons";
import { faCircle,faPaperPlane } from "@fortawesome/free-regular-svg-icons";
/* add icons to the library */
library.add(
@ -104,7 +97,6 @@ library.add(
faFileExcel,
faFileWord,
faFilePowerpoint,
faFileArchive,
faFileAlt,
faDatabase,
faBuilding,
@ -124,14 +116,7 @@ library.add(
faEye,
faEyeSlash,
faGlobe,
faDownload,
faStream,
faSave,
faCrown,
faClock,
faCheckCircle,
faCircle,
faPaperPlane
faDownload
);
export default library;

5
src/hooks/forge/useForgeFloor.js
View File

@ -1,7 +1,6 @@
import useSelectedFloor from "@/hooks/useSelectedFloor";
import { watch, ref, inject } from "vue";
import { useRoute } from "vue-router";
import useSystemShowData from "@/hooks/useSystemShowData";
function useForgeFloor() {
const route = useRoute();
@ -60,11 +59,9 @@ function useForgeFloor() {
forgeViewer.value.hide(parseInt(allDbIdsStr[i]));
}
};
const { flatSubData } = useSystemShowData();
const showDbIdFn = () => {
hideDbIdFn();
flatSubData.value.forEach((value, index) => {
subscribeData.value.forEach((value, index) => {
forgeViewer.value.show(value.forge_dbid);
});

13
src/hooks/forge/useForgeHeatmap.js
View File

@ -34,13 +34,12 @@ export default function useForgeHeatmap() {
const { flatSubData } = useSystemShowData();
const data = computed(() =>
flatSubData.value?.map((d) => {
const pointsMap = d.points ? Object.fromEntries(d.points.map(({ point, value }) => [point, 0])) : {};
return {
...d,
...pointsMap,
};
})
flatSubData.value?.map((d) => ({
...d,
...Object.fromEntries(
d.points.map(({ point, value }) => [point, 0]) || []
),
}))
);
watch(

82
src/hooks/forge/useForgeSprite.js
View File

@ -1,12 +1,12 @@
import { watch, inject, markRaw, ref, computed, provide } from "vue";
import useAlarmStore from "@/stores/useAlarmStore";
import hexToRgb from "@/util/hexToRgb";
import useSystemShowData from "@/hooks/useSystemShowData";
import useSystemShowData from "@/hooks/useSystemShowData"
import useForgeHeatmap from "./useForgeHeatmap";
import useForgeFloor from "./useForgeFloor";
export default function useForgeSprite() {
const { subscribeData, realtimeData } = inject("system_deviceList");
const { subscribeData } = inject("system_deviceList");
const { getCurrentInfoModalData, clearSelectedDeviceInfo, selected_dbid } =
inject("system_selectedDevice");
const forgeViewer = ref(null);
@ -14,19 +14,7 @@ export default function useForgeSprite() {
let lastClickedDbId = null;
const { createHeatMap, updateViewExtension } = useForgeHeatmap();
const { updateViewerFloor } = useForgeFloor();
const setCameraPosition = (position, target) => {
// 使用 THREE.Vector3 定義位置與焦點
const newPosition = new THREE.Vector3(position.x, position.y, position.z);
const newTarget = new THREE.Vector3(target.x, target.y, target.z);
// 設定攝影機的新位置與焦點
forgeViewer.value.navigation.setView(newPosition, newTarget);
// 確保 Home 視角
forgeViewer.value.autocam.setCurrentViewAsHome(true);
};
const { updateViewerFloor } = useForgeFloor();
const updateDataVisualization = async (viewer) => {
if (!forgeViewer.value) {
@ -38,7 +26,7 @@ export default function useForgeSprite() {
);
dataVizExtn.value = markRaw(dataVisualization);
updateViewExtension(markRaw(viewer), markRaw(dataVisualization));
updateViewerFloor(markRaw(viewer), markRaw(dataVisualization));
updateViewerFloor(markRaw(viewer), markRaw(dataVisualization))
};
function onSpriteClicked(event) {
@ -63,24 +51,7 @@ export default function useForgeSprite() {
}
}
const { flatSubData } = useSystemShowData();
// 根據設備取得即時狀態顏色
const getDeviceRealtimeColor = (d) => {
if (d.full_name === "SmartSocket-AA001") return "#ff0000";
if (
d.full_name === "SmartSocket-AA003" ||
d.full_name === "SmartSocket-AA004"
)
return "#888888";
const realtimeDevice = realtimeData?.value?.find(
(item) => item.device_number === d.device_number
);
const state = realtimeDevice?.state || "";
if (state === "offnormal" || state === "")
return d.device_close_color || "#999999";
return d.device_normal_color || "#009100";
};
const { flatSubData } = useSystemShowData()
// 創建 sprites
const createSprites = async () => {
@ -89,27 +60,30 @@ export default function useForgeSprite() {
const DataVizCore = Autodesk.DataVisualization.Core;
const viewableType = DataVizCore.ViewableType.SPRITE;
let spriteColor = new THREE.Color(0xffffff);
const BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
const spriteIconUrl = `${BASEURL}/dist/hotspot.svg`;
const BASEURL = import.meta.env.VITE_FORGE_BASEURL;
const spriteIconUrl = `${BASEURL}/hotspot.svg`;
const style = new DataVizCore.ViewableStyle(
viewableType,
spriteColor,
spriteIconUrl
);
const viewableData = new DataVizCore.ViewableData();
viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels
flatSubData.value?.forEach((d, index) => {
if (d.device_coordinate_3d) {
const position = d.device_coordinate_3d;
// 每個都 new 一個 style
const pointStyle = new DataVizCore.ViewableStyle(
viewableType,
new THREE.Color(hexToRgb(getDeviceRealtimeColor(d))),
spriteIconUrl
);
style.color = new THREE.Color(hexToRgb(d.device_normal_color));
const viewable = new DataVizCore.SpriteViewable(
position,
pointStyle,
style,
d.spriteDbId
);
viewableData.addViewable(viewable);
}
});
// await viewableData.finish();
// dataVizExtn.value.addViewables(viewableData);
// console.log(dataVizExtn.value);
viewableData.finish().then(
() => {
dataVizExtn.value.addViewables(viewableData);
@ -121,16 +95,6 @@ export default function useForgeSprite() {
);
}
};
// 監聽 realtimeData 變化，重建 sprites
watch(
() => realtimeData?.value,
() => {
if (forgeViewer.value?.isLoadDone()) {
createSprites();
}
},
{ deep: true }
);
watch(
() => flatSubData,
@ -171,7 +135,7 @@ export default function useForgeSprite() {
);
};
const cardfitToView = async ([forge_dbid, spriteDbId]) => {
const cardfitToView = async ([forge_dbid,spriteDbId]) => {
try {
// 相機調整
const nav = forgeViewer.value.navigation;
@ -185,6 +149,7 @@ export default function useForgeSprite() {
const fov = nav.getVerticalFov();
nav.setRequestTransition(true, camera.position, target, fov);
if (lastClickedDbId !== null && lastClickedDbId !== spriteDbId) {
dataVizExtn.value.invalidateViewables([lastClickedDbId], (viewable) => {
return {
@ -192,7 +157,7 @@ export default function useForgeSprite() {
};
});
}
dataVizExtn.value.invalidateViewables([spriteDbId], (viewable) => {
return {
scale: 2.0, // 設置為 scale 2
@ -200,10 +165,12 @@ export default function useForgeSprite() {
});
lastClickedDbId = spriteDbId;
} catch (error) {
console.error("Error in cardfitToView:", error);
}
};
const hideAllObjects = () => {
const tree = forgeViewer.value.model.getInstanceTree();
@ -215,7 +182,7 @@ export default function useForgeSprite() {
const showSubSystemObjects = () => {
hideAllObjects();
flatSubData.value.forEach((value, index) => {
subscribeData.value.forEach((value, index) => {
forgeViewer.value.show(value.forge_dbid);
});
@ -234,9 +201,10 @@ export default function useForgeSprite() {
forgeViewer.value.tearDown();
};
return {
createSprites,
setCameraPosition,
updateDataVisualization,
showSubSystemObjects,
forgeClickListener,

1
src/main.js
View File

@ -17,6 +17,7 @@ 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";

21
src/router/index.js
View File

@ -8,7 +8,6 @@ import AssetManagement from "@/views/AssetManagement/AssetManagement.vue";
import AlertManagement from "@/views/alert/AlertManagement.vue";
import ProductSetting from "@/views/productSetting/ProductSetting.vue";
import EnergyManagement from "@/views/energyManagement/EnergyManagement.vue";
import SettingManagement from "@/views/setting/SettingManagement.vue";
import Login from "@/views/login/Login.vue";
import useUserInfoStore from "@/stores/useUserInfoStore";
import useGetCookie from "@/hooks/useGetCookie";
@ -81,15 +80,10 @@ const router = createRouter({
component: ProductSetting,
},
{
path: "/energyManagement/:main_system_id/:sub_system_id/:type",
path: "/energyManagement",
name: "energyManagement",
component: EnergyManagement,
},
{
path: "/setting/:main_system_id/:sub_system_id/:type",
name: "setting",
component: SettingManagement,
},
{
path: "/mytestfile/mjm",
name: "mytestfile",
@ -105,19 +99,22 @@ router.beforeEach(async (to, from, next) => {
const authRequired = !publicPages.includes(to.path);
const auth = useUserInfoStore();
const token = useGetCookie("JWT-Authorization");
const user_name = useGetCookie("user_name");
if (to.path === "/logout") {
document.cookie = "JWT-Authorization=";
auth.user.token = "";
window.location.reload();
next({ path: "/login" });
}
if ((authRequired && !token) || to.path === "/") {
auth.user.token = "";
next({ path: "/login" });
} else if (!authRequired) {
document.cookie = "JWT-Authorization=; Max-Age=0";
document.cookie = "user_name=; Max-Age=0";
document.cookie = "JWT-Authorization=";
auth.user.token = "";
auth.user.user_name = "";
} else {
auth.user.token = token;
auth.user.user_name = user_name;
}
next();
});

100
src/stores/useBuildingStore.js
View File

@ -1,22 +1,17 @@
import { defineStore } from "pinia";
import { ref, computed, watch } from "vue";
import { ref, computed } from "vue";
import { useRoute } from "vue-router";
import { getBuildings } from "@/apis/building";
import { getDashboard2D3D } from "@/apis/dashboard";
import { getAssetFloorList, getDepartmentList } from "@/apis/asset";
const useBuildingStore = defineStore("buildingInfo", () => {
// 狀態定義
// 所有棟別
const buildings = ref([]);
const selectedBuilding = ref(null);
const floorList = ref([]);
const deptList = ref([]);
const mainSubSys = ref([]);
// 控制顯示2D/3D切換與內容
const showForgeArea = ref(true);
const previewImageExt = ref("");
// 計算屬性
const selectedBuilding = ref(null);
// 所有大小類系統
const mainSubSys = ref([]);
// 所有大類
const mainSys = computed(() =>
mainSubSys.value.map(({ main_system_tag, full_name }) => ({
main_system_tag,
@ -26,6 +21,7 @@ const useBuildingStore = defineStore("buildingInfo", () => {
const subSys = computed(() => {
let subPages = [];
mainSubSys.value.forEach(({ main_system_tag, history_Sub_systems }) => {
subPages = [
...subPages,
@ -36,6 +32,7 @@ const useBuildingStore = defineStore("buildingInfo", () => {
})),
];
});
return subPages;
});
@ -47,89 +44,14 @@ const useBuildingStore = defineStore("buildingInfo", () => {
return null;
});
// 獲取所有建築物
const fetchBuildings = async () => {
// const res = await getBuildings();
buildings.value = JSON.parse(localStorage.getItem("CviBuildingList")) || [];
const storedBuilding = JSON.parse(localStorage.getItem("CviBuilding"));
if (buildings.value.length > 0) {
selectedBuilding.value = storedBuilding || buildings.value[0]; // 預設選第一個建築
} else {
selectedBuilding.value = null; // 如果沒有建築物，清空選擇
}
};
// 獲取樓層資料
const fetchFloorList = async (building_guid) => {
const res = await getAssetFloorList(building_guid);
floorList.value =
res.data[0]?.floors.map((d) => ({
...d,
title: d.full_name,
key: d.floor_guid,
})) || [];
};
// 獲取部門資料
const fetchDepartmentList = async () => {
const res = await getDepartmentList();
deptList.value =
res.data.map((d) => ({
...d,
title: d.name,
key: d.id,
})) || [];
};
// 獲取2D、3D顯示與否
const fetchDashboard2D3D = async (BuildingId) => {
const res = await getDashboard2D3D(BuildingId);
showForgeArea.value = res.data.is3DEnabled;
previewImageExt.value = res.data.previewImageExt || "";
};
// 清除localStorage建築物
const deleteBuilding = () => {
localStorage.removeItem("CviBuildingList");
localStorage.removeItem("CviBuilding");
buildings.value = [];
selectedBuilding.value = null;
};
// 當 selectedBuilding 改變時，更新 floorList 和 deptList
watch(selectedBuilding, async (newBuilding) => {
if (newBuilding) {
localStorage.setItem("CviBuilding", JSON.stringify(newBuilding));
await Promise.all([
fetchFloorList(newBuilding.building_guid),
fetchDepartmentList(),
fetchDashboard2D3D(newBuilding.building_guid),
]);
}
});
// 初始化資料
const initialize = async () => {
await fetchBuildings();
};
return {
buildings,
selectedBuilding,
floorList,
deptList,
mainSubSys,
mainSys,
subSys,
selectedSystem,
showForgeArea,
previewImageExt,
deleteBuilding,
fetchBuildings,
fetchFloorList,
fetchDepartmentList,
fetchDashboard2D3D,
initialize,
};
});
export default useBuildingStore;

1
src/stores/useUserInfoStore.js
View File

@ -5,7 +5,6 @@ const useUserInfoStore = defineStore("userInfo", () => {
const user = ref({
token: "",
expires: 0,
user_name:"",
});
const auth_page = ref([]);

88
src/util/request.js
View File

@ -2,80 +2,70 @@ import useGetCookie from "@/hooks/useGetCookie";
import axios from "axios";
const BASEURL = import.meta.env.VITE_API_BASEURL;
// --- 請求攔截器的共用邏輯 ---
const requestInterceptor = (config) => {
// 確保 headers 物件存在
if (!config.headers) {
config.headers = {};
}
// 1. 取得並附加最新的 Token
const token = useGetCookie("JWT-Authorization");
if (token) {
// 正確做法：修改屬性，而不是覆蓋整個物件
config.headers.Authorization = `Bearer ${token}`;
}
// 2. 取得並附加選定的建築物 GUID
const storedBuilding = localStorage.getItem("CviBuilding");
if (storedBuilding) {
try {
const buildingObject = JSON.parse(storedBuilding);
if (buildingObject && buildingObject.building_guid) {
// 與後端約定好要用哪個標頭，這裡使用 'X-Building-GUID' 作為範例
config.headers["X-Building-GUID"] = buildingObject.building_guid;
}
} catch (e) {
console.error("解析 localStorage 中的 CviBuilding 失敗:", e);
}
}
return config;
};
const requestErrorInterceptor = (error) => {
return Promise.reject(error);
};
// --- 一般 API 實例 ---
const instance = axios.create({
baseURL: BASEURL,
timeout: 10000, // 建議設定超時
// 移除靜態 headers
timeout: -1,
headers: { Authorization: `Bearer ${useGetCookie("JWT-Authorization")}` },
});
// 使用共用的攔截器
instance.interceptors.request.use(requestInterceptor, requestErrorInterceptor);
// Add a request interceptor
instance.interceptors.request.use(
function (config) {
// Do something before request is sent
const token = useGetCookie("JWT-Authorization");
config.headers = {
Authorization: `Bearer ${token}`,
};
return config;
},
function (error) {
// Do something with request error
return Promise.reject(error);
}
);
// Add a response interceptor
instance.interceptors.response.use(
function (response) {
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
const { data } = response;
const { status, data, headers } = response;
return { ...data };
return {
...data,
};
},
function (error) {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
if (error.response && error.response.status === 401) {
window.location.href = "/";
if (response && response.status === 401) {
window.location.href = "/logout";
}
return Promise.reject(error);
}
);
// --- 檔案處理 API 實例 ---
export const fileInstance = axios.create({
baseURL: BASEURL,
timeout: -1,
// 移除靜態 headers
headers: { Authorization: `Bearer ${useGetCookie("JWT-Authorization")}` },
});
// 使用共用的攔截器
fileInstance.interceptors.request.use(requestInterceptor, requestErrorInterceptor);
// Add a request interceptor
fileInstance.interceptors.request.use(
function (config) {
// Do something before request is sent
const token = useGetCookie("JWT-Authorization");
config.headers = {
Authorization: `Bearer ${token}`,
};
return config;
},
function (error) {
// Do something with request error
return Promise.reject(error);
}
);
// Add a response interceptor
fileInstance.interceptors.response.use(

52
src/views/AssetManagement/AssetManagement.vue
View File

@ -1,64 +1,12 @@
<script setup>
import { ref, provide, onMounted, watch, computed } from "vue";
import AssetMainList from "./components/AssetMainList.vue";
import AssetSubList from "./components/AssetSubList.vue";
import AssetTable from "./components/AssetTable.vue";
import { getOperationCompanyList } from "@/apis/operation";
import { getIOTSchema, getElecTypeList } from "@/apis/asset";
import useSearchParam from "@/hooks/useSearchParam";
import useBuildingStore from "@/stores/useBuildingStore";
const storeBuild = useBuildingStore();
const { searchParams, changeParams } = useSearchParam();
const companyOptions = ref([]);
const iotSchemaOptions = ref([]);
const elecTypeOptions = ref([]);
const getCompany = async () => {
const res = await getOperationCompanyList();
companyOptions.value = res.data.map((d) => ({ ...d, key: d.id }));
};
const getIOTSchemaOptions = async (id) => {
const res = await getIOTSchema(Number(id));
iotSchemaOptions.value = res.data.map((d) => ({ ...d, key: d.id }));
};
const getElecType = async () => {
const res = await getElecTypeList();
elecTypeOptions.value = res.data.map((d) => ({ ...d, key: d.id }));
};
const departmentList = computed(() => storeBuild.deptList);
const floors = computed(() => storeBuild.floorList);
onMounted(() => {
getCompany();
getElecType();
});
watch(
() => searchParams.value.subSys_id,
(newValue) => {
if (newValue) {
getIOTSchemaOptions(newValue);
}
},
{
immediate: true,
}
);
provide("asset_modal_options", {
companyOptions,
iotSchemaOptions,
elecTypeOptions,
departmentList,
floors,
});
</script>
<template>
<h1 class="text-2xl font-extrabold mb-2">
{{ $t("assetManagement.title") }}
</h1>
<AssetMainList />
<AssetSubList />
<AssetTable />
</template>

134
src/views/AssetManagement/components/AssetMainList.vue
View File

@ -1,134 +0,0 @@
<script setup>
import { getAssetMainList, deleteAssetMainItem } from "@/apis/asset";
import AssetMainListAddModal from "./AssetMainListAddModal.vue";
import { ref, onMounted, watch, inject } from "vue";
import useSearchParam from "@/hooks/useSearchParam";
import useActiveBtn from "@/hooks/useActiveBtn";
import { useI18n } from "vue-i18n";
import useBuildingStore from "@/stores/useBuildingStore";
const store = useBuildingStore();
const { t } = useI18n();
const { searchParams, changeParams } = useSearchParam();
const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
const { openToast, cancelToastOpen } = inject("app_toast");
const isEditMode = ref(false);
const formState = ref({
id: 0,
system_key: "",
system_value: "",
});
const getMainSystems = async () => {
const res = await getAssetMainList(store.selectedBuilding.building_guid);
const cate = res.data.map((d, index) => ({
...d,
title: d.system_key,
key: d.id,
active: searchParams.value?.mainSys_id
? parseInt(searchParams.value?.mainSys_id) === d.id
: index === 0,
}));
setItems(cate);
};
const openModal = () => {
asset_add_main_item.showModal();
};
const onCancel = () => {
formState.value = {
id: 0,
system_key: "",
system_value: "",
};
asset_add_main_item.close();
};
const edit = (item) => {
formState.value = { ...item };
openModal();
};
const deleteItem = async (id) => {
openToast("warning", t("msg.sure_to_delete"), "body", async () => {
await cancelToastOpen();
const res = await deleteAssetMainItem(id);
if (res.isSuccess) {
openToast("success", t("msg.delete_success"));
getMainSystems();
} else {
openToast("error", res.msg);
}
});
};
watch(
() => store.selectedBuilding,
(newBuilding) => {
if (newBuilding) {
getMainSystems();
}
},
{ immediate: true }
);
watch(selectedBtn, (newValue) => {
changeParams({
mainSys_id: newValue.key,
subSys_id: null,
});
});
</script>
<template>
<div class="flex items-center gap-4 mb-4">
<h2 class="text-lg font-bold ps-2 whitespace-nowrap">
{{ $t("history.system_category") }} :
</h2>
<AssetMainListAddModal
:openModal="openModal"
:onCancel="onCancel"
:getData="getMainSystems"
:formState="formState"
/>
<!-- <button
@click.stop.prevent="isEditMode = !isEditMode"
class="btn btn-sm btn-outline-success"
>
{{ isEditMode ? t("button.stop_edit") : t("button.start_edit") }}
</button> -->
</div>
<ButtonConnectedGroup
:items="items"
:onclick="
(e, item) => {
if (!isEditMode) {
changeActiveBtn(item);
}
}
"
:className="`flex w-full mt-2`"
size="sm"
color="info"
>
<template #buttonContent="{ item }">
<span class="text-base">{{ item.title }}</span>
<template v-if="isEditMode">
<span
class="ml-2 text-base text-warning"
@click.stop.prevent="() => edit(item)"
>
<FontAwesomeIcon :icon="['fas', 'pencil-alt']"></FontAwesomeIcon>
</span>
<span
class="text-base mx-1 text-error"
@click.stop.prevent="() => deleteItem(item.id)"
>
<FontAwesomeIcon :icon="['fas', 'trash-alt']" />
</span>
</template>
</template>
</ButtonConnectedGroup>
</template>
<style lang="scss" scoped></style>

106
src/views/AssetManagement/components/AssetMainListAddModal.vue
View File

@ -1,106 +0,0 @@
<script setup>
import { ref, defineProps, inject } from "vue";
import * as yup from "yup";
import useFormErrorMessage from "@/hooks/useFormErrorMessage";
import { postAssetMainList } from "@/apis/asset";
import useBuildingStore from "@/stores/useBuildingStore";
import useSearchParam from "@/hooks/useSearchParam";
import { useI18n } from "vue-i18n";
const storeBuild = useBuildingStore();
const { t } = useI18n();
const { openToast } = inject("app_toast");
const { searchParams, changeParams } = useSearchParam();
const props = defineProps({
openModal: Function,
onCancel: Function,
getData: Function,
formState: Object,
isEdit: Boolean,
});
let subSysSchema = yup.object({
system_key: yup.string().required(t("button.required")), // 名稱
system_value: yup.string().required(t("button.required")), // 代稱
});
const { formErrorMsg, handleSubmit, handleErrorReset } =
useFormErrorMessage(subSysSchema);
const onOk = async () => {
const value = await handleSubmit(subSysSchema, props.formState);
const res = await postAssetMainList({
...props.formState,
id: props.formState ? props.formState.id : 0,
building_guid:storeBuild.selectedBuilding?.building_guid || null,
});
if (res.isSuccess) {
props.getData();
onReset();
} else {
openToast("error", res.msg);
}
};
const onReset = () => {
handleErrorReset(); // 重置錯誤訊息
props.onCancel(); // 調用父層的 onCancel
};
</script>
<template>
<!-- <button class="btn btn-sm btn-success" @click.stop.prevent="openModal">
<font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
</button> -->
<Modal
id="asset_add_main_item"
:title="
props.formState?.id
? t('assetManagement.edit_system_category')
: t('assetManagement.add_system_category')
"
:onCancel="onReset"
:width="300"
>
<template #modalContent>
<form ref="form" class="mt-5 flex flex-col items-center">
<Input name="system_key" :value="formState">
<template #topLeft>{{ $t("assetManagement.system_name") }}</template>
<template #bottomLeft
><span class="text-error text-base">
{{ formErrorMsg.system_key }}
</span></template
>
</Input>
<Input name="system_value" :value="formState" :readonly="Boolean(props.formState?.id)">
<template #topLeft>{{ $t("assetManagement.system_value") }}</template>
<template #bottomLeft
><span class="text-error text-base">
{{ formErrorMsg.system_value }}
</span></template
>
</Input>
</form>
</template>
<template #modalAction>
<button
type="reset"
class="btn btn-outline-success mr-2"
@click.prevent="onReset"
>
{{ $t("button.cancel") }}
</button>
<button
type="submit"
class="btn btn-outline-success"
@click.prevent="onOk"
>
{{ $t("button.submit") }}
</button>
</template>
</Modal>
</template>
<style lang="scss" scoped></style>

125
src/views/AssetManagement/components/AssetSubList.vue
View File

@ -1,17 +1,15 @@
<script setup>
import { getAssetSubList, deleteAssetSubItem } from "@/apis/asset";
import { ref, onMounted, watch, inject } from "vue";
import { ref, onMounted, watch } from "vue";
import useSearchParam from "@/hooks/useSearchParam";
import useActiveBtn from "@/hooks/useActiveBtn";
import AssetSubListAddModal from "./AssetSubListAddModal.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { searchParams, changeParams } = useSearchParam();
const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
const { openToast, cancelToastOpen } = inject("app_toast");
const isEditMode = ref(false);
const getSubSystems = async (id) => {
const res = await getAssetSubList(id);
const getSubSystems = async () => {
const res = await getAssetSubList();
const sub = res.data.map((d, index) => ({
...d,
title: d.system_key,
@ -23,115 +21,60 @@ const getSubSystems = async (id) => {
setItems(sub);
};
onMounted(() => {});
onMounted(() => {
getSubSystems();
});
watch(selectedBtn, (newValue) => {
if (newValue && newValue.key) {
changeParams({
...searchParams.value,
subSys_id: newValue.key,
});
}
changeParams({ subSys_id: newValue.key });
});
watch(
() => searchParams,
(newValue) => {
if (newValue.value.mainSys_id && !newValue.value.subSys_id) {
getSubSystems(parseInt(newValue.value.mainSys_id));
}
},
{
deep: true,
}
);
const formState = ref({
id: 0,
system_key: "",
system_value: "",
system_parent_id: 0,
file: [],
});
const openModal = (item) => {
if (item.id) {
formState.value = { ...item };
if (item.device_image) {
const subFile = item
? {
name: item.device_image,
src: item.device_image,
ext: item.device_image?.split(".")[1],
}
: {};
formState.value.file = [subFile];
}
} else {
formState.value = {
id: 0,
system_key: "",
system_value: "",
system_parent_id: 0,
file: [],
};
}
const editRecord = ref(null);
// 編輯 modal
const openModal = () => {
asset_add_sub_item.showModal();
};
const onCancel = () => {
editRecord.value = null;
asset_add_sub_item.close();
};
const edit = (item) => {
editRecord.value = item;
openModal();
};
const deleteItem = async (id) => {
openToast("warning", t("msg.sure_to_delete"), "body", async () => {
await cancelToastOpen();
const res = await deleteAssetSubItem(id);
if (res.isSuccess) {
openToast("success", t("msg.delete_success"));
getSubSystems(parseInt(searchParams.value.mainSys_id));
} else {
openToast("error", res.msg);
}
});
deleteAssetSubItem(id);
getSubSystems();
};
</script>
<template>
<div class="mt-4">
<div class="flex items-center gap-4 mb-4">
<h2 class="text-lg font-bold ps-2 whitespace-nowrap">
{{ $t("history.device_category") }} :
</h2>
<AssetSubListAddModal
:openModal="openModal"
:getData="getSubSystems"
:formState="formState"
/>
<button
@click.stop.prevent="isEditMode = !isEditMode"
class="btn btn-sm btn-outline-success mr-3"
>
{{ isEditMode ? t("button.stop_edit") : t("button.start_edit") }}
</button>
</div>
<!-- <AssetSubListAddModal
:openModal="openModal"
:onCancel="onCancel"
:getData="getSubList"
:editRecord="editRecord"
/> -->
<ButtonConnectedGroup
:items="items"
:onclick="
(e, item) => {
if (!isEditMode) {
changeActiveBtn(item);
}
changeActiveBtn(item);
}
"
:className="`flex w-full mt-2`"
:className="`flex w-full mt-4`"
size="sm"
color="info"
>
<template #buttonContent="{ item }">
<span class="text-base">{{ item.title }}</span>
<template v-if="isEditMode">
<!-- <template v-if="!item.is_IOT">
<span
class="ml-2 text-base text-warning"
@click.stop.prevent="() => openModal(item)"
@click.stop.prevent="() => edit(item)"
>
<FontAwesomeIcon :icon="['fas', 'pencil-alt']"></FontAwesomeIcon>
</span>
@ -141,7 +84,7 @@ const deleteItem = async (id) => {
>
<FontAwesomeIcon :icon="['fas', 'trash-alt']" />
</span>
</template>
</template> -->
</template>
</ButtonConnectedGroup>
</div>

100
src/views/AssetManagement/components/AssetSubListAddModal.vue
View File

@ -2,28 +2,19 @@
import { ref, defineProps, onMounted, watch } from "vue";
import * as yup from "yup";
import useFormErrorMessage from "@/hooks/useFormErrorMessage";
import useSearchParam from "@/hooks/useSearchParam";
import { getAssetMainList, postAssetSubList } from "@/apis/asset";
import { useI18n } from "vue-i18n";
import useBuildingStore from "@/stores/useBuildingStore";
const store = useBuildingStore();
const { t } = useI18n();
const { searchParams, changeParams } = useSearchParam();
const props = defineProps({
openModal: Function,
onCancel: Function,
getData: Function,
formState: Object,
editRecord: Object,
});
const form = ref(null);
const mainSystem = ref([]);
const updateFileList = (files) => {
console.log("file", files);
props.formState.file = files;
};
const getMainSystems = async () => {
const res = await getAssetMainList(store.selectedBuilding.building_guid);
const res = await getAssetMainList();
mainSystem.value = res.data.map((d) => ({ ...d, key: d.id }));
};
@ -31,72 +22,66 @@ let subSysSchema = yup.object({
system_key: yup.string().required(t("button.required")), // 名稱
system_value: yup.string().required(t("button.required")), // 代稱
system_parent_id: yup.number().required(t("button.required")), // 大類id
file: yup.array(),
});
const { formErrorMsg, handleSubmit, handleErrorReset } =
useFormErrorMessage(subSysSchema);
const onCancel = () => {
props.formState = {
id: 0,
const formState = ref({
system_key: "",
system_value: "",
system_parent_id: 0,
});
const resetForm = () => {
formState.value = {
system_key: "",
system_value: "",
system_parent_id: 0,
file: [],
};
asset_add_sub_item.close();
updateFileList([]);
handleErrorReset();
};
onMounted(() => {
getMainSystems();
});
watch(
() => store.selectedBuilding,
(newBuilding) => {
if (newBuilding) {
getMainSystems();
() => props.editRecord,
(newValue) => {
if (newValue) {
formState.value = newValue;
} else {
resetForm();
}
},
{ immediate: true }
}
);
const onOk = async () => {
// 編輯
const value = await handleSubmit(subSysSchema, props.formState);
console.log("props.formState", props.formState);
const value = await handleSubmit(subSysSchema, formState.value);
const formData = new FormData(form.value);
formData.delete("file");
formData.append("id", props.formState.id);
const res = await postAssetSubList({
...formState.value,
id: props.editRecord ? props.editRecord.id : 0,
});
if (props.formState.file[0]) {
formData.append("file", props.formState.file[0]);
}
if (props.formState.Device_image) {
formData.append("Device_image", props.formState.Device_image);
}
const res = await postAssetSubList(formData);
if (res.isSuccess) {
props.getData(parseInt(searchParams.value.mainSys_id));
onCancel();
props.getData();
props.onCancel();
}
};
</script>
<template>
<button class="btn btn-sm btn-success" @click.stop.prevent="openModal">
<button class="btn btn-sm btn-success mr-3" @click.stop.prevent="openModal">
<font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
</button>
<Modal
id="asset_add_sub_item"
:title="
props.formState?.id
? t('assetManagement.edit_device_category')
: t('assetManagement.add_device_category')
"
:title="t('assetManagement.add_category')"
:open="open"
:onCancel="onCancel"
:width="300"
width="300"
>
<template #modalContent>
<form ref="form" class="mt-5 flex flex-col items-center">
@ -108,11 +93,7 @@ const onOk = async () => {
</span></template
>
</Input>
<Input
name="system_value"
:value="formState"
:readonly="Boolean(props.formState?.id)"
>
<Input name="system_value" :value="formState">
<template #topLeft>{{ $t("assetManagement.system_value") }}</template>
<template #bottomLeft
><span class="text-error text-base">
@ -123,11 +104,10 @@ const onOk = async () => {
<Select
:options="mainSystem"
Attribute="system_key"
class=""
class="mr-5"
name="system_parent_id"
:value="formState"
selectClass="border-info focus-within:border-info"
:disabled="Boolean(props.formState?.id)"
>
<template #topLeft>{{
$t("assetManagement.system_parent")
@ -138,14 +118,6 @@ const onOk = async () => {
</span></template
>
</Select>
<Upload
name="file"
:fileList="formState.file || []"
:getFileList="updateFileList"
:multiple="false"
>
<template #topLeft>{{ $t("operation.upload_file") }}</template>
</Upload>
</form>
</template>
<template #modalAction>

76
src/views/AssetManagement/components/AssetTable.vue
View File

@ -4,18 +4,28 @@ import { onMounted, ref, watch, inject, provide, computed } from "vue";
import useSearchParam from "@/hooks/useSearchParam";
import AssetTableAddModal from "./AssetTableAddModal.vue";
import { getOperationCompanyList } from "@/apis/operation";
import { postMQTTRefresh } from "@/apis/alert";
import { getAssetFloorList } from "@/apis/asset";
import dayjs from "dayjs";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { openToast, cancelToastOpen } = inject("app_toast");
const { companyOptions, departmentList, floors } = inject(
"asset_modal_options"
);
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
const { searchParams, changeParams } = useSearchParam();
const companyOptions = ref([]);
const getCompany = async () => {
const res = await getOperationCompanyList();
companyOptions.value = res.data.map((d) => ({ ...d, key: d.id }));
};
const floors = ref([]);
const totalCoordinates = ref({});
const getFloors = async () => {
const res = await getAssetFloorList();
floors.value = res.data[0]?.floors.map((d) => ({ ...d, key: d.floor_guid }));
};
const tableData = ref([]);
const getAssetData = async () => {
totalCoordinates.value = {}; // 在獲取新數據之前清空 totalCoordinates
@ -29,14 +39,13 @@ const getAssetData = async () => {
}
totalCoordinates.value[floorGuid].push(d.device_coordinate);
});
tableData.value = res.data.map((d) => ({
...d,
key: d.id,
floor: floors.value.find(({ floor_guid }) => d.floor_guid === floor_guid)
?.full_name,
company: companyOptions.value.find(({ id }) => d.operation_id === id),
department: departmentList.value.find(({ id }) => d.department_id === id)
?.name,
buying_date: d?.buying_date
? dayjs(d?.buying_date).format("YYYY-MM-DD")
: "",
@ -47,25 +56,18 @@ const getAssetData = async () => {
}
};
const refreshMQTT = async () => {
const res = await postMQTTRefresh();
if (res.isSuccess) {
openToast("success", t("msg.mqtt_refresh"));
} else {
openToast("error", res.msg, "#outliers_add_table_item");
}
};
onMounted(async () => {
await getCompany();
await getFloors();
getAssetData();
});
const columns = computed(() => [
// {
// title: t("assetManagement.device_number"),
// key: "device_number",
// class: "break-all",
// },
{
title: t("assetManagement.device_number"),
key: "device_number",
class: "break-all",
},
{
title: t("assetManagement.device_name"),
key: "full_name",
@ -82,11 +84,6 @@ const columns = computed(() => [
filter: true,
sort: true,
},
{
title: t("assetManagement.department"),
key: "department",
filter: true,
},
{
title: t("assetManagement.device_coordinate"),
key: "device_coordinate",
@ -125,8 +122,6 @@ watch(
(newValue) => {
if (newValue.value?.subSys_id) {
getAssetData();
} else {
tableData.value = [];
}
},
{
@ -174,7 +169,7 @@ const remove = async (id) => {
const res = await deleteAssetItem(id);
if (res.isSuccess) {
getAssetData();
openToast("success", t("msg.delete_success"));
openToast("success", t("msg.delete_success"));
} else {
openToast("error", res.msg);
}
@ -187,21 +182,14 @@ provide("asset_table_data", {
</script>
<template>
<div class="flex justify-between items-center mt-10">
<div class="flex">
<h3 class="text-xl mr-5">{{ $t("assetManagement.device_list") }}</h3>
<AssetTableAddModal
:openModal="openModal"
:onCancel="onCancel"
:editRecord="editRecord"
:getData="getAssetData"
/>
</div>
<button class="btn btn-sm btn-add" @click.prevent="refreshMQTT">
<font-awesome-icon :icon="['fas', 'cog']" />{{
$t("alert.reorganization")
}}
</button>
<div class="flex justify-start items-center mt-10">
<h3 class="text-xl mr-5">{{ $t("assetManagement.device_list") }}</h3>
<AssetTableAddModal
:openModal="openModal"
:onCancel="onCancel"
:editRecord="editRecord"
:getData="getAssetData"
/>
</div>
<Table :columns="columns" :dataSource="tableData" class="mt-3">
<template #bodyCell="{ record, column, index }">
@ -215,7 +203,7 @@ provide("asset_table_data", {
<template v-else-if="column.key === 'oriFile'">
<span v-if="record.oriFile.length === 0"></span>
<template v-else>
<span class="flex flex-wrap gap-1">
<span class="flex">
<a
v-for="file in record.oriFile"
:href="`${FILE_BASEURL}/${file?.file_url}`"

7
src/views/AssetManagement/components/AssetTableAddModal.vue
View File

@ -102,18 +102,19 @@ const closeModal = () => {
</script>
<template>
<button class="btn btn-sm btn-add mr-3" @click.stop.prevent="openModal" :disabled="!searchParams.subSys_id">
<button class="btn btn-sm btn-add mr-3" @click.stop.prevent="openModal">
<font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
</button>
<Modal
id="asset_add_table_item"
:title="editRecord?.main_id ? $t('assetManagement.edit_device') : $t('assetManagement.add_device')"
:open="open"
:onCancel="closeModal"
:width="1600"
width="1600"
>
<template #modalContent>
<form ref="form" class="grid grid-cols-5 gap-5">
<div class="grid grid-cols-2 col-span-2 items-end">
<div class="grid grid-cols-2 col-span-2">
<AssetTableModalLeft :current_component_key="current_component_key" />
</div>
<div class="col-span-3">

152
src/views/AssetManagement/components/AssetTableModalLeftInfo.vue
View File

@ -2,19 +2,21 @@
import { ref, inject, onBeforeMount, onMounted, watch } from "vue";
import * as yup from "yup";
import "yup-phone-lite";
import AssetTableModalLeftInfoIoT from "./AssetTableModalLeftInfoIoT.vue";
import AssetTableModalLeftInfoGraph from "./AssetTableModalLeftInfoGraph.vue";
import { getOperationCompanyList } from "@/apis/operation";
import useSearchParam from "@/hooks/useSearchParam";
import AssetTableModalLeftInfoMQTT from "./AssetTableModalLeftInfoMQTT.vue";
import useUserInfoStore from "@/stores/useUserInfoStore";
import OperationTableModal from "@/views/operation/components/OperationTableModal.vue";
import dayjs from "dayjs";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
const { searchParams, changeParams } = useSearchParam();
const { updateLeftFields, formErrorMsg, formState } = inject(
"asset_table_modal_form"
);
const { companyOptions, iotSchemaOptions, elecTypeOptions, departmentList } = inject("asset_modal_options");
const store = useUserInfoStore();
let schema = {
full_name: yup.string().nullable(true),
operate_text: yup.string().nullable(true),
@ -26,15 +28,6 @@ let schema = {
.number()
.transform((value) => (Number.isNaN(value) ? null : value))
.nullable(true),
response_schema_id: yup
.number()
.transform((value) => (Number.isNaN(value) ? null : value))
.nullable(true),
department_id: yup
.number()
.transform((value) => (Number.isNaN(value) ? null : value))
.nullable(true),
topic: yup.string().nullable(true),
asset_number: yup.string().nullable(true),
sub_device: yup.array().nullable(true),
oriFile: yup.array().nullable(true),
@ -48,11 +41,7 @@ onBeforeMount(() => {
brand: "",
device_model: "",
operation_id: 0,
response_schema_id: 0,
department_id: 0,
elec_type_id: null,
asset_number: "",
topic: "",
sub_device: [],
oriFile: [],
buying_date: "",
@ -91,20 +80,28 @@ watch(formState, (newValue) => {
}
});
watch(
() => iotSchemaOptions.value,
(newVal) => {
if (newVal && newVal.length > 0) {
formState.value.response_schema_id = newVal[0].id;
}
},
{ immediate: true }
);
const updateFileList = (files) => {
formState.value = { ...formState.value, oriFile: files };
};
const companyOptions = ref([]);
const getCompany = async () => {
const res = await getOperationCompanyList();
companyOptions.value = res.data.map((d) => ({ ...d, key: d.id }));
};
onMounted(() => {
getCompany();
});
const openCompanyAddModal = () => {
changeParams({ ...searchParams.value, work_type: 3 }); // 開啟company Add modal
operation_action_item.showModal();
};
</script>
<template>
<!-- information -->
<Input :value="formState" width="290" name="full_name">
<Input :value="formState" width="270" name="full_name">
<template #topLeft>{{ $t("assetManagement.device_name") }}</template>
<template #bottomLeft
><span class="text-error text-base">
@ -112,23 +109,15 @@ watch(
</span></template
></Input
>
<div class="flex items-center w-72">
<Select
:value="formState"
selectClass="border-info focus-within:border-info"
name="department_id"
Attribute="name"
:options="departmentList"
>
<template #topLeft>{{ $t("assetManagement.department") }}</template>
</Select>
</div>
<Input
:value="formState"
width="290"
name="device_number"
v-if="store.user.user_name == 'webUser'"
<Input :value="formState" width="270" name="operate_text">
<template #topLeft>Mac</template>
<template #bottomLeft
><span class="text-error text-base">
{{ formErrorMsg.operate_text }}
</span></template
></Input
>
<Input :value="formState" width="270" name="device_number">
<template #topLeft
>Tag_Name ({{ $t("assetManagement.fill_text") }})</template
>
@ -138,31 +127,28 @@ watch(
</span></template
></Input
>
<div class="flex items-center w-72">
<Select
:value="formState"
selectClass="border-info focus-within:border-info"
name="response_schema_id"
Attribute="name"
:options="iotSchemaOptions"
:required="true"
>
<template #topLeft>IoT</template>
</Select>
</div>
<div class="flex items-center w-72" v-if="searchParams.mainSys_id==26">
<Select
:value="formState"
selectClass="border-info focus-within:border-info"
name="elec_type_id"
Attribute="name"
:options="elecTypeOptions"
:required="true"
>
<template #topLeft>{{$t("energy.electricity_classification")}}</template>
</Select>
</div>
<Input :value="formState" width="290" name="asset_number">
<!-- <Input :value="formState" width="270" name="floor_guid">
<template #topLeft>設備位置（樓層 / 區域）</template>
<template #bottomLeft
><span class="text-error text-base">
{{ formErrorMsg.floor_guid }}
</span></template
></Input
> -->
<Input
:value="formState"
width="270"
name="device_coordinate"
:disabled="true"
>
<template #topLeft>{{ $t("assetManagement.device_coordinate") }}</template>
<template #bottomLeft
><span class="text-error text-base">
{{ formErrorMsg.device_coordinate }}
</span></template
></Input
>
<Input :value="formState" width="270" name="asset_number">
<template #topLeft>{{ $t("assetManagement.asset_number") }}</template>
<template #bottomLeft
><span class="text-error text-base">
@ -170,7 +156,7 @@ watch(
</span></template
></Input
>
<DateGroup :items="buying_date" width="290" :withLine="false">
<DateGroup :items="buying_date" width="270" :withLine="false">
<template #topLeft>{{ $t("assetManagement.buying_date") }}</template>
<template #bottomLeft
><span class="text-error text-base">
@ -178,7 +164,7 @@ watch(
</span></template
>
</DateGroup>
<Input :value="formState" width="290" name="brand">
<Input :value="formState" width="270" name="brand">
<template #topLeft>{{ $t("assetManagement.brand") }}</template>
<template #bottomLeft
><span class="text-error text-base">
@ -186,7 +172,7 @@ watch(
</span></template
></Input
>
<Input :value="formState" width="290" name="device_model">
<Input :value="formState" width="270" name="device_model">
<template #topLeft>{{ $t("assetManagement.modal") }}</template>
<template #bottomLeft
><span class="text-error text-base">
@ -194,7 +180,7 @@ watch(
</span></template
></Input
>
<div class="flex items-center w-72">
<div class="flex items-center col-span-2">
<Select
:value="formState"
selectClass="border-info focus-within:border-info"
@ -205,8 +191,28 @@ watch(
>
<template #topLeft>{{ $t("assetManagement.company") }}</template>
</Select>
<OperationTableModal type="asset" />
<button
type="button"
class="btn btn-add ml-2 mt-7"
@click="openCompanyAddModal"
>
<font-awesome-icon :icon="['fas', 'plus']" />
{{ $t("button.add") }}
</button>
</div>
<AssetTableModalLeftInfoMQTT />
<AssetTableModalLeftInfoGraph />
<!-- <Upload
name="oriFile"
:fileList="formState.oriFile"
:getFileList="updateFileList"
:multiple="true"
class="col-span-2"
:baseUrl="FILE_BASEURL"
>
<template #topLeft>{{ $t("assetManagement.oriFile") }}</template>
</Upload> -->
<AssetTableModalLeftInfoIoT />
</template>
<style lang="scss" scoped></style>

161
src/views/AssetManagement/components/AssetTableModalLeftInfoDept.vue
View File

@ -1,161 +0,0 @@
<script setup>
import { onMounted, ref, inject, onBeforeMount, watch, computed } from "vue";
import {
getDepartmentList,
postDepartmentList,
deleteDepartmentItem,
} from "@/apis/asset";
import useFormErrorMessage from "@/hooks/useFormErrorMessage";
import * as yup from "yup";
import { twMerge } from "tailwind-merge";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { openToast, cancelToastOpen } = inject("app_toast");
const { formState } = inject("asset_table_modal_form");
const selectedOption = ref("add");
const DeptFormState = ref({ id: 0, name: "" });
const departmentList = ref([]);
const getDepartment = async () => {
const res = await getDepartmentList();
departmentList.value = res.data.map((d) => ({ ...d, key: d.id }));
};
onMounted(() => {
getDepartment();
});
// modal
const openModal = () => {
if (selectedOption.value === "add") {
DeptFormState.value = {
id: 0,
name: "",
};
} else if (selectedOption.value === "edit") {
const dept = departmentList.value.find(
(d) => d.id === formState.value.department_id
);
if (dept) {
DeptFormState.value = {
id: dept.id,
name: dept.name,
};
}
}
asset_add_dept.showModal();
};
const form = ref(null);
const deptScheme = yup.object({
name: yup.string().required(t("button.required")),
});
const { formErrorMsg, handleSubmit, handleErrorReset, updateScheme } =
useFormErrorMessage(deptScheme);
const onOk = async () => {
const value = await handleSubmit(deptScheme, DeptFormState.value);
const res = await postDepartmentList(value);
if (res.isSuccess) {
getDepartment();
onCancel();
}
};
const onDelete = async () => {
openToast(
"warning",
t("msg.sure_to_delete"),
"#asset_add_table_item",
async () => {
await cancelToastOpen();
const res = await deleteDepartmentItem(formState.value.department_id);
if (res.isSuccess) {
getDepartment();
openToast("success", t("msg.delete_success"), "#asset_add_table_item");
} else {
openToast("error", res.msg, "#asset_add_table_item");
}
}
);
};
const onCancel = () => {
DeptFormState.value = {
id: 0,
name: "",
};
asset_add_dept.close();
};
</script>
<template>
<div className="join w-72 mb-4">
<Select
:value="formState"
selectClass="border-info focus-within:border-info rounded-r-none"
name="department_id"
Attribute="name"
:options="departmentList"
:isBottomLabelExist="false"
>
<template #topLeft>{{ $t("assetManagement.department") }}</template>
</Select>
<select
v-model="selectedOption"
className="select border-info focus-within:border-info join-item mt-11"
>
<option value="add" selected>{{ $t("button.add") }}</option>
<option value="edit">{{ $t("button.edit") }}</option>
<option value="delete">{{ $t("button.delete") }}</option>
</select>
<button
type="button"
class="btn btn-success join-item mt-11"
@click="selectedOption === 'delete' ? onDelete() : openModal()"
:aria-label="$t('button.submit')"
>
{{ $t("button.submit") }}
</button>
</div>
<Modal
id="asset_add_dept"
:title="t('assetManagement.department')"
:onCancel="onCancel"
:width="400"
>
<template #modalContent>
<form ref="form">
<Input :value="DeptFormState" width="270" name="name">
<template #topLeft>{{
$t("assetManagement.department_name")
}}</template>
<template #bottomLeft
><span class="text-error text-base">
{{ formErrorMsg.name }}
</span></template
></Input
>
</form>
</template>
<template #modalAction>
<button
type="reset"
class="btn btn-outline-success mr-2"
@click.prevent="onCancel"
>
{{ $t("button.cancel") }}
</button>
<button type="submit" class="btn btn-outline-success" @click="onOk">
{{ $t("button.submit") }}
</button>
</template></Modal
>
</template>
<style lang="scss" scoped></style>

2
src/views/AssetManagement/components/AssetTableModalLeftInfoGraph.vue
View File

@ -138,7 +138,7 @@ onMounted(async () => {
id="asset_add_graph_item"
:title="t('graphManagement.title')"
:onCancel="onCancel"
:width="500"
width="500"
>
<template #modalContent>
<ul class="menu bg-base-200 rounded-box text-lg w-full mt-3">

5
src/views/AssetManagement/components/AssetTableModalLeftInfoIoT.vue
View File

@ -44,7 +44,6 @@ const modalColumns = computed(() => [
{
title: "tag",
key: "device_name",
filter: true
},
{
title: t("assetManagement.point"),
@ -65,7 +64,7 @@ const getPoint = async (sub_system_tag) => {
setPoints(
res.data.map((d, index) => ({
...d,
title: d.full_name,
title: d.points,
key: d.points,
active: false,
}))
@ -225,7 +224,7 @@ const deleteItem = (value) => {
id="asset_add_IoT_item"
:title="t('assetManagement.associated_device')"
:onCancel="onCancel"
:width="900"
width="900"
>
<template #modalContent>
<ButtonGroup

185
src/views/AssetManagement/components/AssetTableModalLeftInfoMQTT.vue
View File

@ -1,185 +0,0 @@
<script setup>
import { onMounted, ref, inject, watch, computed } from "vue";
import { useI18n } from "vue-i18n";
import { postMQTTpublish } from "@/apis/asset";
import mqtt from "mqtt";
import dayjs from "dayjs";
const { t } = useI18n();
const { openToast, cancelToastOpen } = inject("app_toast");
const { formState } = inject("asset_table_modal_form");
const BASEURL = import.meta.env.VITE_MQTT_BASEURL;
// MQTT相關
const mqttClient = ref(null); // MQTT客戶端
const receivedMessages = ref([]); // 儲存接收到的訊息
const countdown = ref(60); // 倒計時初始為 60 秒
let timer = null; // 記錄計時器
const openModal = () => {
if (!mqttClient.value) {
connectMqtt();
}
mqtt_test.showModal();
startCountdown(); // 開始倒計時
};
const connectMqtt = () => {
const topic = formState.value.topic || ""; // 取得主題
const mqttHost = `${BASEURL}`;
const protocol = "wss"; // 根據伺服器配置，需要設置為 "ws" 或 "wss"
mqttClient.value = mqtt.connect(mqttHost, {
protocol,
reconnectPeriod: 1000, // 每秒嘗試重新連線
username: "admin", // MQTT 帳號
password: "mjmadmin@99", // MQTT 密碼
port: 443,
});
mqttClient.value.on("connect", () => {
console.log("MQTT 已連接");
if (topic) {
mqttClient.value.subscribe(topic, (err) => {
if (!err) {
console.log(`已訂閱主題: ${topic}`);
} else {
console.error("訂閱失敗: ", err);
}
});
}
});
mqttClient.value.on("message", (topic, message) => {
// 儲存接收到的訊息
const now = dayjs(); // 使用 dayjs() 取得當前時間
const timestamp = now.format("YYYY-MM-DD HH:mm:ss");
receivedMessages.value.push({
topic,
message: message.toString(),
timestamp: timestamp,
});
clearInterval(timer); // 收到訊息後清除倒計時
});
mqttClient.value.on("error", (err) => {
console.error("MQTT 連線錯誤: ", err);
});
};
const startCountdown = () => {
if (timer) return; // 防止重複啟動計時器
timer = setInterval(() => {
if (countdown.value > 0) {
countdown.value--;
} else {
onCancel(); // 1分鐘後如果沒有收到訊息則觸發 onCancel
}
}, 1000);
};
const onCancel = () => {
receivedMessages.value = [];
mqtt_test.close();
// 斷開 MQTT 連線
if (mqttClient.value) {
mqttClient.value.end();
mqttClient.value = null;
}
// 重置倒計時
if (timer) {
clearInterval(timer);
timer = null; // 清除計時器引用
}
countdown.value = 60;
};
const onSubmit = async () => {
const Topic = formState.value.topic;
let Payload = "";
try {
Payload = JSON.stringify(JSON.parse(formState.value.publish_message));
} catch (e) {
openToast("error", t("msg.incorrect_format"), "#asset_add_table_item");
return;
}
try {
const res = await postMQTTpublish({ Topic, Payload });
if (res.isSuccess) {
openToast("success", t("msg.send_successfully"), "#asset_add_table_item");
} else {
openToast("error", res.msg, "#asset_add_table_item");
}
} catch (error) {
openToast("error", t("setting.mqtt_send_error"), "#asset_add_table_item");
}
};
</script>
<template>
<div class="flex col-span-2 pb-5">
<Input :value="formState" name="topic">
<template #topLeft>MQTT subscribe topic</template>
</Input>
<button type="button" class="btn btn-add mt-11 ms-1" @click="openModal">
<font-awesome-icon :icon="['fas', 'cog']" />
Test
</button>
</div>
<div class="flex flex-col col-span-2 border-t-gray-400 border-t py-5">
<Input :value="formState" name="topic">
<template #topLeft>MQTT publish topic</template>
</Input>
<Textarea :value="formState" name="publish_message">
<template #topLeft>MQTT messages</template>
</Textarea>
<button type="button" class="btn btn-add mt-6 w-24" @click="onSubmit">
<font-awesome-icon :icon="['far', 'paper-plane']" />
Send
</button>
</div>
<Modal id="mqtt_test" title="MQTT Topic" :onCancel="onCancel" :width="400">
<template #modalContent>
<!-- 顯示接收到的訊息 -->
<div v-if="receivedMessages.length > 0" class="overflow-y-auto h-96">
<ul>
<li
v-for="(message, index) in receivedMessages"
:key="index"
class="bg-base-200 rounded-md text-wrap shadow shadow-slate-400 p-4 my-2 me-2"
>
<strong class="text-base block text-info mb-2"
>{{ message.topic }} :</strong
>
<p class="text-sm break-words">{{ message.message }}</p>
<p class="text-xs text-slate-200 pt-2">
<FontAwesomeIcon :icon="['fas', 'clock']" class="me-1" />
{{ message.timestamp }}
</p>
</li>
</ul>
</div>
<!-- 顯示 loading 和倒計時 -->
<p v-else class="text-center mt-20">
<Loading />
<br />
<span class="text-base">{{ countdown }} seconds</span>
</p>
</template>
<template #modalAction>
<button
type="reset"
class="btn btn-outline-success mr-2"
@click.prevent="onCancel"
>
{{ t("button.cancel") }}
</button>
</template>
</Modal>
</template>
<style lang="scss" scoped></style>

239
src/views/AssetManagement/components/AssetTableModalRightInfo.vue
View File

@ -1,17 +1,21 @@
<script setup>
import { onMounted, ref, inject, onBeforeMount, watch, computed } from "vue";
import EffectScatter from "@/components/chart/EffectScatter.vue";
import {
getAssetFloorList,
postAssetFloor,
deleteAssetFloor,
} from "@/apis/asset";
import useFormErrorMessage from "@/hooks/useFormErrorMessage";
import useBuildingStore from "@/stores/useBuildingStore";
import AssetTableModalLeftInfoIoT from "./AssetTableModalLeftInfoIoT.vue";
import AssetTableModalLeftInfoGraph from "./AssetTableModalLeftInfoGraph.vue";
import * as yup from "yup";
import { twMerge } from "tailwind-merge";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { openToast, cancelToastOpen } = inject("app_toast");
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
const { totalCoordinates } = inject("asset_table_data");
const { floors } = inject("asset_modal_options");
const { updateRightFields, formErrorMsg, formState } = inject(
"asset_table_modal_form"
);
@ -30,20 +34,17 @@ onBeforeMount(() => {
const asset_floor_chart = ref(null);
const currentFloor = ref(null);
const parsedCoordinates = ref(null);
const selectedOption = ref("add");
const defaultOption = (map, data = []) => {
// 生成坐標數據，根據坐標值的不同設置不同顏色
const formattedData = data.map((coordinate) => {
const coordString = JSON.stringify(coordinate);
const coordString = JSON.stringify(coordinate);
return {
name: coordString,
name: coordString,
value: coordinate,
itemStyle: {
color:
coordString === formState.value.device_coordinate
? "#0000FF"
: "#b02a02",
color: coordString === formState.value.device_coordinate ? "#0000FF" : "#b02a02",
},
};
});
@ -72,25 +73,26 @@ const defaultOption = (map, data = []) => {
watch(currentFloor, (newValue) => {
if (newValue?.floor_map_name) {
const coordinates =
totalCoordinates.value?.[newValue.floor_guid]?.filter(
(coord) => coord !== ""
) || [];
parsedCoordinates.value =
coordinates.length > 0
? coordinates.map((coord) => JSON.parse(coord))
: [];
const coordinates = totalCoordinates.value[newValue.floor_guid] || [];
const parsedCoordinates = coordinates.map((coord) => {
return JSON.parse(coord);
});
asset_floor_chart.value.updateSvg(
{
full_name: newValue.floor_map_name,
path: `${FILE_BASEURL}/${newValue.floor_map_url}.svg`,
full_name: newValue?.floor_map_name,
path: `${FILE_BASEURL}/${newValue?.floor_map_url}.svg`,
},
defaultOption(newValue.floor_map_name, parsedCoordinates.value)
defaultOption(newValue?.floor_map_name, parsedCoordinates)
);
}
});
const floors = ref([]);
const getFloors = async () => {
const res = await getAssetFloorList();
floors.value = res.data[0]?.floors.map((d) => ({ ...d, key: d.floor_guid }));
};
watch(
formState,
@ -113,39 +115,131 @@ const getCoordinate = (position) => {
formState.value.device_coordinate = JSON.stringify(position);
};
onMounted(() => {
getFloors();
});
// modal
const openModal = () => {
if (selectedOption.value === "add") {
FloorFormState.value = {
full_name: "",
floorFile: [],
};
} else if (selectedOption.value === "edit") {
const floor = floors.value.find(
(f) => f.floor_guid === formState.value.floor_guid
);
if (floor) {
console.log("floor", floor);
FloorFormState.value = {
full_name: floor.full_name,
floorFile: [],
};
}
}
asset_add_floor.showModal();
};
const form = ref(null);
const FloorFormState = ref({
full_name: "",
floorFile: [],
});
const floorScheme = yup.object({
full_name: yup.string().required(t("button.required")),
floorFile: yup.array(),
});
const updateFileList = (files) => {
console.log("file", files);
FloorFormState.value.floorFile = files;
};
const {
formErrorMsg: floorFormErrorMsg,
handleSubmit,
handleErrorReset,
updateScheme,
} = useFormErrorMessage(floorScheme);
const onOk = async () => {
const value = handleSubmit(floorScheme, FloorFormState.value);
const formData = new FormData(form.value);
formData.append("floor_guid", selectedOption.value === "add" ? null :currentFloor.value.floor_guid);
formData.append("building_tag", store.selectedBuilding.building_tag);
formData.append("initMapName", FloorFormState.value.floorFile[0]?.name);
formData.append("mapFile", FloorFormState.value.floorFile[0]);
formData.delete("floorFile");
for (let [key, value] of formData) {
console.log(key, value);
}
const res = await postAssetFloor(formData);
if (res.isSuccess) {
getFloors();
onCancel();
}
};
const onDelete = async () => {
openToast("warning", t("msg.sure_to_delete"), "#asset_add_table_item", async () => {
await cancelToastOpen();
const res = await deleteAssetFloor({
floor_guid: formState.value.floor_guid,
});
if (res.isSuccess) {
getFloors();
openToast("success", t("msg.delete_success"), "#asset_add_table_item");
} else {
openToast("error", res.msg, "#asset_add_table_item");
}
});
};
const onCancel = () => {
FloorFormState.value = {
full_name: "",
floorFile: [],
};
asset_add_floor.close();
};
</script>
<template>
<!-- 平面圖 -->
<div class="flex gap-4 mb-5">
<Select
:value="formState"
selectClass="border-info focus-within:border-info"
name="floor_guid"
Attribute="full_name"
:options="floors"
:isBottomLabelExist="false"
>
<template #topLeft>{{ $t("assetManagement.floor") }}</template>
</Select>
<Input
:value="formState"
width="270"
name="device_coordinate"
:disabled="true"
>
<template #topLeft>{{
$t("assetManagement.device_coordinate")
}}</template>
<template #bottomLeft
><span class="text-error text-base">
{{ formErrorMsg.device_coordinate }}
</span></template
></Input
>
<div class="flex items-center justify-between mb-5">
<div className="join">
<Select
:value="formState"
selectClass="border-info focus-within:border-info rounded-r-none"
name="floor_guid"
Attribute="full_name"
:options="floors"
:isBottomLabelExist="false"
>
<template #topLeft>{{ $t("assetManagement.floor") }}</template>
</Select>
<select
v-model="selectedOption"
className="select border-info focus-within:border-info join-item mt-11"
>
<option value="add" selected>{{ $t("button.add") }}</option>
<option value="edit">{{ $t("button.edit") }}</option>
<option value="delete">{{ $t("button.delete") }}</option>
</select>
<button
type="button"
class="btn btn-success join-item mt-11"
@click="selectedOption === 'delete' ? onDelete() : openModal()"
:aria-label="$t('button.submit')"
>
{{ $t("button.submit") }}
</button>
</div>
</div>
<div class="relative min-h-[70vh]">
<div class="relative">
<EffectScatter
id="asset_floor_chart"
ref="asset_floor_chart"
@ -159,13 +253,52 @@ const getCoordinate = (position) => {
/>
<div
v-if="!currentFloor?.floor_map_url"
class="absolute top-0 left-0 flex justify-center items-center min-h-[70vh] w-full border border-stone-900 shadow-lg bg-sub-success bg-opacity-25 rounded-md"
class="absolute top-0 left-0 flex justify-center items-center min-h-[500px] w-full border border-stone-900 shadow-lg bg-sub-success bg-opacity-25 rounded-md"
>
<p class="text-2xl">{{ $t("assetManagement.add_floor_text") }}</p>
</div>
</div>
<AssetTableModalLeftInfoGraph />
<AssetTableModalLeftInfoIoT />
<Modal
id="asset_add_floor"
:title="t('assetManagement.floor_plan')"
:onCancel="onCancel"
width="400"
>
<template #modalContent>
<form ref="form">
<Input :value="FloorFormState" width="270" name="full_name">
<template #topLeft>{{ $t("assetManagement.system_name") }}</template>
<template #bottomLeft
><span class="text-error text-base">
{{ floorFormErrorMsg.full_name }}
</span></template
></Input
>
<Upload
name="floorFile"
:fileList="FloorFormState.floorFile"
:getFileList="updateFileList"
:multiple="false"
class="col-span-2"
formats="svg"
>
<template #topLeft>{{ $t("assetManagement.oriFile") }}</template>
</Upload>
</form>
</template>
<template #modalAction>
<button
type="reset"
class="btn btn-outline-success mr-2"
@click.prevent="onCancel"
>
{{ $t("button.cancel") }}
</button>
<button type="submit" class="btn btn-outline-success" @click="onOk">
{{ $t("button.submit") }}
</button>
</template></Modal
>
</template>
<style lang="scss" scoped></style>

6
src/views/accountManagement/AccountManagement.vue
View File

@ -2,7 +2,7 @@
import ButtonGroup from "@/components/customUI/ButtonGroup.vue";
import Account from "./components/Account.vue";
import Role from "./components/Role.vue";
import { computed, watch, onBeforeMount, markRaw } from "vue";
import { computed, watch, onBeforeMount } from "vue";
import useActiveBtn from "@/hooks/useActiveBtn";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
@ -18,13 +18,13 @@ const initializeItems = () => {
title: t("accountManagement.account_title"),
key: "account",
active: true,
component: markRaw(Account),
component: Account,
},
{
title: t("accountManagement.role_title"),
key: "role",
active: false,
component: markRaw(Role),
component: Role,
},
]);
};

11
src/views/accountManagement/components/Account.vue
View File

@ -59,12 +59,7 @@ const searchData = ref({
const getDataSource = async () => {
loading.value = true;
const res = await getAccountUserList(searchData.value);
// 過濾掉 webUser
dataSource.value = res.data.filter(
(i) =>
i.userinfo_guid !== "6ac24708-3a40-4199-88c5-22df310cd1a8" &&
i.userinfo_guid !== "B43E3CA7-96DD-4FC7-B6E6-974ACC3B0878"
);
dataSource.value = res.data;
loading.value = false;
};
@ -132,8 +127,8 @@ const removeAccount = async (id) => {
await cancelToastOpen();
const res = await delAccount(id);
if (res.isSuccess) {
getDataSource();
openToast("success", t("msg.delete_success"));
getDataSource();
openToast("success", t("msg.delete_success"));
} else {
openToast("error", res.msg);
}

2
src/views/accountManagement/components/AccountModal.vue
View File

@ -127,7 +127,7 @@ const onOk = async () => {
id="account_user_modal"
:title="formState?.Id ? t('button.edit') : t('button.add')"
:onCancel="onCancel"
:width="710"
width="710"
>
<template #modalContent>
<form ref="form" class="mt-5 w-full flex flex-wrap justify-between">

4
src/views/accountManagement/components/AccountPasswordModal.vue
View File

@ -9,7 +9,7 @@ const { t } = useI18n();
const { openToast } = inject("app_toast");
const props = defineProps({
account: Object,
account: String,
});
const formState = ref({
@ -48,7 +48,7 @@ const onOk = async () => {
id="account_user_password_modal"
:title="t('accountManagement.change_password')"
:onCancel="onCancel"
:width="710"
width="710"
>
<template #modalContent>
<p class="mt-10 text-3xl">{{ account.Name }}</p>

2
src/views/accountManagement/components/RoleAuthModal.vue
View File

@ -13,7 +13,7 @@ import useActiveBtn from "@/hooks/useActiveBtn";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const props = defineProps({
selectedRole: Object,
selectedRole: String,
cancelModal: Function,
disabled: Boolean,
update: Function,

6
src/views/alert/AlertManagement.vue
View File

@ -2,7 +2,7 @@
import ButtonGroup from "@/components/customUI/ButtonGroup.vue";
import AlertQuery from "./components/AlertQuery/AlertQuery.vue";
import AlertSetting from "./components/AlertSetting/AlertSetting.vue";
import { computed, watch, onBeforeMount, markRaw } from "vue";
import { computed, watch, onBeforeMount } from "vue";
import useActiveBtn from "@/hooks/useActiveBtn";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
@ -18,13 +18,13 @@ const initializeItems = () => {
title: t("alert.query_title"),
key: "Query",
active: true,
component: markRaw(AlertQuery),
component: AlertQuery,
},
{
title: t("alert.setting_title"),
key: "Setting",
active: false,
component: markRaw(AlertSetting),
component: AlertSetting,
},
]);
};

99
src/views/alert/components/AlertQuery/AlertQuery.vue
View File

@ -4,7 +4,8 @@ import AlertTable from "./AlertTable.vue";
import AlertTableModal from "./AlertTableModal.vue";
import { ref, provide, onMounted } from "vue";
import useSearchParam from "@/hooks/useSearchParam";
import { getAlertLog } from "@/apis/alert";
import useAlarmData from "@/hooks/baja/useAlarmData";
import { getAlertFormId } from "@/apis/alert";
import {
getOperationDeviceList,
getOperationCompanyList,
@ -12,14 +13,18 @@ import {
} from "@/apis/operation";
import { getAccountUserList } from "@/apis/account";
import useBuildingStore from "@/stores/useBuildingStore";
import useAlarmStore from "@/stores/useAlarmStore";
const storeAlarm = useAlarmStore();
const { searchParams } = useSearchParam();
const { getAlarmByBaja, alarmData } = useAlarmData();
const store = useBuildingStore();
const tableLoading = ref(false);
const dataSource = ref([]);
const model_data = ref({
model_userList: [],
model_devList: [],
model_companyList: [],
});
@ -44,6 +49,23 @@ const updateEditRecord = (data) => {
}
};
const getFormId = async (uuid) => {
const res = await getAlertFormId(uuid);
return res.data;
};
const getModalDevList = async () => {
const sub_system_tags = searchParams.value.system_tag.map(
(tag) => tag.split("_")[1]
);
const res = await getOperationDeviceList({
list_sub_system_tag: sub_system_tags,
device_building_tag: store.buildings[0].building_tag,
device_area_tag: "NTPC",
});
return res.data.map((d) => ({ ...d, key: d.device_number }));
};
const getModalUserList = async () => {
const res = await getAccountUserList({});
return res.data.map((d) => ({ ...d, key: d.userinfo_guid }));
@ -55,23 +77,63 @@ const getModalCompanyList = async () => {
};
const getAllOptions = async () => {
Promise.all([getModalUserList(), getModalCompanyList()]).then(
([users, companies]) => {
model_data.value.model_userList = users;
model_data.value.model_companyList = companies;
}
);
Promise.all([
getModalDevList(),
getModalUserList(),
getModalCompanyList(),
]).then(([devices, users, companies]) => {
model_data.value.model_userList = users;
model_data.value.model_devList = devices;
model_data.value.model_companyList = companies;
});
};
const updateDataSource = (data) => {
dataSource.value = data.map((d) => ({ ...d, key: d.uuid }));
};
const search = async () => {
tableLoading.value = true;
if (Object.keys(searchParams.value).length !== 0) {
const res = await getAlertLog({
...searchParams.value,
isRecovery: Number(searchParams.value.isRecovery),
});
dataSource.value = (res.data || []).map((d) => ({ ...d, key: d.id }));
storeAlarm.getAlarmDataFromBaja();
updateDataSource(storeAlarm.alarmData);
tableLoading.value = false;
/*
await getAlarmByBaja(
searchParams.value.start_created_at,
searchParams.value.end_created_at,
searchParams.value.isRecover,
searchParams.value.isAck,
searchParams.value.system_tag,
async (result) => {
alarmData.value = result.data;
// 確保所有 alarm 都包含 formId
alarmData.value = alarmData.value.map((alarm) => ({
...alarm,
formId: null, // 初始設置 formId 為 null
}));
const uuids = alarmData.value.map((alarm) => ({ uuid: alarm.uuid }));
const formIds = await getFormId(uuids);
if (Array.isArray(formIds)) {
formIds.forEach((form) => {
if (form && form.uuid) {
const index = alarmData.value.findIndex(
(alarm) => alarm.uuid === form.uuid
);
if (index !== -1) {
alarmData.value[index].formId = form.formId || null;
}
}
});
}
updateDataSource(alarmData.value);
tableLoading.value = false;
}
);
*/
}
};
@ -79,17 +141,11 @@ const openModal = async (record) => {
try {
if (record.formId) {
const res = await getOperationEditRecord(record.formId);
updateEditRecord({
...res.data,
uuid: res.data.error_code,
device_number: record.device_number
});
updateEditRecord({ ...res.data, uuid: record.uuid });
} else {
updateEditRecord({
...record,
uuid: record.id,
});
updateEditRecord(record);
}
await getAllOptions();
alert_action_item.showModal();
} catch (error) {
console.error("Error opening modal:", error);
@ -97,7 +153,6 @@ const openModal = async (record) => {
};
onMounted(() => {
getAllOptions();
if (Object.keys(searchParams.value).length !== 0) {
search();
}

3
src/views/alert/components/AlertQuery/AlertSearch.vue
View File

@ -1,6 +1,7 @@
<script setup>
import { inject } from "vue";
import AlertSearchNormalBtns from "./AlertSearchNormalBtns.vue";
import AlertSearchAckBtns from "./AlertSearchAckBtns.vue";
import AlertSearchTimeRange from "./AlertSearchTimeRange.vue";
import AlertSearchTypesButton from "./AlertSearchTypesButton.vue";
@ -12,7 +13,7 @@ const { search } = inject("alert_table");
<div class="w-full flex flex-wrap flex-col custom-border px-4 pt-0 pb-4 mb-4">
<div class="w-full flex flex-wrap items-center justify-start">
<AlertSearchNormalBtns />
<!-- <AlertSearchAckBtns /> -->
<AlertSearchAckBtns />
<AlertSearchTimeRange />
<button class="btn btn-search ml-8" @click.stop.prevent="search">
<font-awesome-icon :icon="['fas', 'search']" class=" text-lg" />

10
src/views/alert/components/AlertQuery/AlertSearchNormalBtns.vue
View File

@ -11,12 +11,12 @@ const initializeItems = () => {
setItems([
{
title: t("alert.offnormal"),
key: 1,
key: "offnormal",
active: true,
},
{
title: t("alert.normal"),
key: 2,
key: "normal",
active: false,
},
]);
@ -34,7 +34,7 @@ watch(locale, () => {
watch(
selectedBtn,
(newValue) => {
changeParams({ ...searchParams.value, isRecovery: newValue.key });
changeParams({ ...searchParams.value, isRecover: newValue.key });
}
);
@ -42,8 +42,8 @@ watch(
watch(
searchParams,
(newSearchParams) => {
if (!newSearchParams.isRecovery) {
changeParams({ ...newSearchParams, isRecovery: 1 });
if (!newSearchParams.isRecover) {
changeParams({ ...newSearchParams, isRecover: "offnormal" });
}
},
{ immediate: true } // 確保在初始化立即觸發

30
src/views/alert/components/AlertQuery/AlertSearchTimeRange.vue
View File

@ -9,17 +9,17 @@ const { searchParams, changeParams } = useSearchParam();
const dateRange = ref([
{
key: "start_at",
value: searchParams.value.Start_date
? dayjs(searchParams.value.Start_date)
: dayjs().subtract(30, "day"),
value: searchParams.value.start_created_at
? dayjs(searchParams.value.start_created_at).valueOf()
: dayjs().subtract(30, "day").valueOf(),
dateFormat: "yyyy-MM-dd",
placeholder: t("alert.start_date"),
},
{
key: "end_at",
value: searchParams.value.End_date
? dayjs(searchParams.value.End_date)
: dayjs(),
value: searchParams.value.end_created_at
? dayjs(searchParams.value.end_created_at).valueOf()
: dayjs().valueOf(),
dateFormat: "yyyy-MM-dd",
placeholder: t("alert.end_date"),
},
@ -29,13 +29,13 @@ const changeTimeRange = () => {
const newRange = [
{
key: "start_at",
value: dayjs().subtract(30, "day"),
value: dayjs().subtract(30, "day").startOf("day").valueOf(), // 向前推30天並設置為當天的00:00:00.000
dateFormat: "yyyy-MM-dd",
placeholder: t("alert.start_date"),
},
{
key: "end_at",
value: dayjs().endOf("day"),
value: dayjs().endOf("day").valueOf(), // 設置為今日的23:59:59.999
dateFormat: "yyyy-MM-dd",
placeholder: t("alert.end_date"),
},
@ -45,16 +45,16 @@ const changeTimeRange = () => {
changeParams({
...searchParams.value,
Start_date: newRange[0].value,
End_date: newRange[1].value,
start_created_at: newRange[0].value,
end_created_at: newRange[1].value,
});
};
onMounted(() => {
// 初始化日期範圍
if (
!searchParams.value.Start_date ||
!searchParams.value.End_date
!searchParams.value.start_created_at ||
!searchParams.value.end_created_at
) {
changeTimeRange();
}
@ -66,8 +66,10 @@ watch(
() => {
changeParams({
...searchParams.value,
Start_date: dayjs(dateRange.value[0].value).format("YYYY-MM-DD"),
End_date: dayjs(dateRange.value[1].value).format("YYYY-MM-DD"),
start_created_at: dayjs(dateRange.value[0].value)
.startOf("day")
.valueOf(),
end_created_at: dayjs(dateRange.value[1].value).endOf("day").valueOf(),
});
},
{ deep: true } // 確保在初始化立即觸發

30
src/views/alert/components/AlertQuery/AlertSearchTypesButton.vue
View File

@ -12,12 +12,12 @@ const changeCheckedItem = () => {
if (checkedItem.value.length === store.subSys.length) {
changeParams({
...searchParams.value,
device_name_tag: [],
system_tag: [],
});
} else {
changeParams({
...searchParams.value,
device_name_tag: store.subSys.map(({ sub_system_tag }) => sub_system_tag),
system_tag: store.subSys.map(({ main_system_tag, sub_system_tag }) => main_system_tag+`_`+sub_system_tag),
});
}
};
@ -26,16 +26,16 @@ const onChange = (value, checked) => {
if (checked) {
changeParams({
...searchParams.value,
device_name_tag: searchParams.value.device_name_tag
? typeof searchParams.value.device_name_tag === "string"
? [searchParams.value.device_name_tag, value]
: [...searchParams.value.device_name_tag, value]
system_tag: searchParams.value.system_tag
? typeof searchParams.value.system_tag === "string"
? [searchParams.value.system_tag, value]
: [...searchParams.value.system_tag, value]
: [value],
});
} else {
changeParams({
...searchParams.value,
device_name_tag: searchParams.value.device_name_tag.filter(
sub_system_tag: searchParams.value.system_tag.filter(
(sub) => sub !== value
),
});
@ -43,18 +43,18 @@ const onChange = (value, checked) => {
};
const checkedItem = computed(() =>
searchParams.value.device_name_tag
? typeof searchParams.value.device_name_tag === "string"
? [searchParams.value.device_name_tag]
: searchParams.value.device_name_tag
searchParams.value.system_tag
? typeof searchParams.value.system_tag === "string"
? [searchParams.value.system_tag]
: searchParams.value.system_tag
: []
);
watch(searchParams, (newValue) => {
if (!newValue.device_name_tag) {
if (!newValue.system_tag) {
changeParams({
...newValue,
device_name_tag: [store.subSys[0]?.sub_system_tag],
system_tag: [store.subSys[0]?.main_system_tag+`_`+store.subSys[0]?.sub_system_tag],
});
}
});
@ -75,8 +75,8 @@ watch(searchParams, (newValue) => {
v-for="sub in store.subSys"
:key="sub.key"
:title="sub.full_name"
:value="sub.sub_system_tag"
:checked="checkedItem.includes(sub.sub_system_tag)"
:value="sub.main_system_tag+`_`+sub.sub_system_tag"
:checked="checkedItem.includes(sub.main_system_tag+`_`+sub.sub_system_tag)"
class="mx-3 my-3 xl:my-0 text-lg"
:onChange="onChange"
/>

47
src/views/alert/components/AlertQuery/AlertTable.vue
View File

@ -1,5 +1,6 @@
<script setup>
import { inject, computed } from "vue";
import { postChgAck } from "@/apis/alert";
import { Button } from "ant-design-vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
@ -7,39 +8,71 @@ const { dataSource, openModal, search, tableLoading } = inject("alert_table");
const columns = computed(() => [
{
key: "id",
key: "building_tag",
title: t("alert.building_and_floor"),
},
{
key: "uuid",
title: t("alert.uuid"),
},
{
key: "factor",
key: "alarmClass",
title: t("alert.alarmClass"),
},
{
key: "device_number",
key: "full_name",
title: t("alert.device_name"),
},
{
key: "points",
title: t("alert.device_point_name"),
key: "device_number",
title: t("alert.device_number"),
},
{
key: "created_at",
key: "timestamp_date",
title: t("alert.date"),
},
{
key: "timestamp_time",
title: t("alert.time"),
},
{
key: "reason",
key: "msg",
title: t("alert.error_msg"),
},
{
key: "ackState",
title: t("alert.ack_state"),
},
{
key: "repairOrder",
title: t("alert.repair_order_number"),
},
]);
const chgAck = async (devUuid) => {
const res = await postChgAck(devUuid);
if (res.isSuccess) {
search?.();
}
};
</script>
<template>
<Table :loading="tableLoading" :columns="columns" :dataSource="dataSource">
<template #bodyCell="{ record, column, index }">
<template v-if="column.key === 'ackState'">
<template v-if="record.ackState === 'Unacked'">
<button
class="btn btn-sm btn-success text-white whitespace-nowrap mr-2"
@click.stop.prevent="() => chgAck(record.uuid)"
>
{{ $t("alert.unacked") }}
</button>
</template>
<template v-else>
{{ record.ackedTime }}
</template>
</template>
<template v-if="column.key === 'repairOrder'">
<button
class="btn btn-sm btn-success text-white whitespace-nowrap mr-2"

46
src/views/alert/components/AlertQuery/AlertTableModal.vue
View File

@ -27,13 +27,12 @@ const dateItem = ref([
const formState = ref({
formId: null,
uuid: null,
uuid: "",
work_type: 2,
fix_do: "",
fix_do_code: "",
fix_firm: "",
status: 0,
device_number: "",
work_person_id: "",
start_time: dayjs().format("YYYY-MM-DD"),
notice: "",
@ -50,6 +49,7 @@ const { model_data, updateEditRecord, search } = inject("alert_modal") || {
let alertSchema = yup.object({
start_time: yup.date().required(t("button.required")),
fix_do: yup.string().required(t("button.required")),
fix_do_code: yup.string().required(t("button.required")),
fix_firm: yup.string().required(t("button.required")),
status: yup.number().required(t("button.required")),
work_person_id: yup.string().required(t("button.required")),
@ -88,12 +88,12 @@ const onOk = async () => {
props.editRecord.uuid && formData.append("error_code", props.editRecord.uuid);
formData.append("work_type", 2);
formData.append(
"fix_do_code",
props.editRecord.main_id
? props.editRecord.main_id
: props.editRecord.fix_do_code
);
if (props.editRecord.device_number) {
formData.append("fix_do_code", props.editRecord.device_number);
} else if (props.editRecord.fix_do_code) {
formData.append("fix_do_code", props.editRecord.fix_do_code);
}
try {
const value = await handleSubmit(alertSchema, formState.value);
@ -110,13 +110,12 @@ const onOk = async () => {
const onCancel = () => {
formState.value = {
formId: null,
uuid: null,
uuid: "",
work_type: 2,
fix_do: "",
fix_do_code: "",
fix_firm: "",
status: 0,
device_number: "",
work_person_id: "",
start_time: dayjs().format("YYYY-MM-DD"),
notice: "",
@ -148,6 +147,10 @@ watch(
if (key === "full_name") {
formState.value.fix_do = value;
}
// 維修項目代碼
if (key === "device_number" || key === "fix_do_code") {
formState.value.fix_do_code = value;
}
}
}
},
@ -160,12 +163,12 @@ watch(
id="alert_action_item"
:title="t('alert.repair_order')"
:onCancel="onCancel"
:width="710"
width="710"
>
<template #modalContent>
<form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
<Input
v-if="formState && formState.formId"
v-if="formState.value && formState.value.formId"
class="my-2"
:value="formState"
name="formId"
@ -199,7 +202,7 @@ watch(
{
key: 1,
value: 1,
title: $t('operation.maintenance'),
title: $t('alert.maintenance'),
},
{
key: 2,
@ -220,20 +223,23 @@ watch(
</span>
</template>
</Input>
<Input
class="my-2"
<Select
:value="formState"
name="device_number"
class="my-2"
selectClass="border-info focus-within:border-info"
name="fix_do_code"
Attribute="device_name"
:options="model_data.model_devList"
:required="true"
:disabled="true"
>
<template #topLeft>{{ $t("alert.repair_item_code") }}</template>
<template #topLeft>{{ $t("repair_item_code") }}</template>
<template #bottomLeft
><span class="text-error text-base">
{{ formErrorMsg.fix_do_code }}
</span></template
>
</Input>
</Select>
<Select
:value="formState"
class="my-2"
@ -243,7 +249,7 @@ watch(
:options="model_data.model_companyList"
:required="true"
>
<template #topLeft>{{ $t("alert.responsible_vendor") }}</template>
<template #topLeft>{{ $t("responsible_vendor") }}</template>
<template #bottomLeft
><span class="text-error text-base">
{{ formErrorMsg.fix_firm }}
@ -317,7 +323,7 @@ watch(
class="btn btn-outline-success"
@click.stop.prevent="onOk"
>
{{ $t("button.submit") }}
{{ $t("button.submit")}}
</button>
</template>
</Modal>

5
src/views/alert/components/AlertSetting/AlertNotifyTableAddModal.vue
View File

@ -94,8 +94,9 @@ const closeModal = () => {
<Modal
id="notify_add_table_item"
:title="t('alert.notify_list')"
:open="open"
:onCancel="closeModal"
:width="300"
width="300"
>
<template #modalContent>
<form ref="form" class="mt-5 flex flex-col items-center">
@ -127,7 +128,7 @@ const closeModal = () => {
<p class="text-light text-base">{{ $t("alert.notify_items") }}</p>
<AlertNoticesTable
:SaveCheckAuth="SaveCheckAuth"
:NoticeData="[noticeList[1]]"
:NoticeData="[noticeList[2]]"
:onChange="onChange"
/>
<span class="text-error text-base">

160
src/views/alert/components/AlertSetting/AlertOutliersTable.vue
View File

@ -4,24 +4,20 @@ import {
getOutliersList,
getOutliersDevList,
getOutliersPoints,
getFactors,
delOutliersSetting,
postMQTTRefresh,
} from "@/apis/alert";
import useSearchParam from "@/hooks/useSearchParam";
import AlertOutliersTableAddModal from "./AlertOutliersTableAddModal.vue";
import AlertOutliersTimeModal from "./AlertOutliersTimeModal.vue";
import dayjs from "dayjs";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { noticeList, timesList } = inject("notify_table");
const { openToast, cancelToastOpen } = inject("app_toast");
const { noticeList } = inject("notify_table");
const { searchParams, changeParams } = useSearchParam();
const tableData = ref([]);
const dev_data = ref({
devList: [],
alarmPoints: [],
alarmFactors: [],
});
const editRecord = ref(null);
@ -37,7 +33,7 @@ const columns = computed(() => [
},
{
title: t("alert.item"),
key: "points_name",
key: "points",
},
{
title: t("alert.enable"),
@ -47,35 +43,35 @@ const columns = computed(() => [
title: t("alert.qualifications"),
key: "factor_name",
},
// {
// title: `${t("alert.upper_limit")} (>=)`,
// key: "highLimit",
// },
// {
// title: `${t("alert.lower_limit")} (<=)`,
// key: "lowLimit",
// },
// {
// title: t("alert.highDelay"),
// key: "highDelay",
// },
// {
// title: t("alert.lowDelay"),
// key: "lowDelay",
// },
{
title: `${t("alert.upper_limit")} (>=)`,
key: "highLimit",
},
{
title: `${t("alert.lower_limit")} (<=)`,
key: "lowLimit",
},
{
title: t("alert.highDelay"),
key: "highDelay",
},
{
title: t("alert.lowDelay"),
key: "lowDelay",
},
{
title: t("alert.warning_method"),
key: "warning_method",
},
// {
// title: t("alert.warning_time"),
// key: "warning_time",
// width: 150,
// },
{
title: t("alert.warning_time"),
key: "warning_time",
width: 150,
},
{
title: t("alert.operation"),
key: "operation",
width: 300,
width: 150,
},
]);
@ -99,14 +95,6 @@ const getAlarmPoints = async () => {
}));
};
const getFactor = async () => {
const res = await getFactors();
return res.data.map((d) => ({
...d,
key: d.id,
}));
};
const getOutliersData = async () => {
const res = await getOutliersList({
device_name_tag: searchParams.value?.subSys_id,
@ -119,12 +107,10 @@ const getOutliersData = async () => {
const matchedPoints = dev_data.value.alarmPoints.find(
(p) => p.points === item.points
);
const matchedFactor = dev_data.value.alarmFactors.find(
(p) => p.id === item.factor
);
const matchedTime = timesList.value.find(
(t) => t.id === item.schedule_id
);
const matchedFactor =
matchedPoints?.factor && item.factor
? matchedPoints?.factor?.find((f) => f.id === item.factor)
: null;
const warningMethodKeys = item.notices
?.map((noticeValue) => {
const matchedNotice = noticeList.value.find(
@ -138,24 +124,19 @@ const getOutliersData = async () => {
return {
...item,
device_name: matchedDevice ? matchedDevice.device_name : "",
points_name: matchedPoints ? matchedPoints.full_name : "",
points: matchedPoints ? matchedPoints.full_name : "",
is_bool: matchedPoints ? matchedPoints.is_bool : 1,
factor_name: matchedFactor ? matchedFactor.full_name : "",
warning_method: warningMethodKeys,
// warning_time: matchedTime ? matchedTime.schedule_name : "",
};
});
}
};
const getAllOptions = async () => {
const [devices, points, factors] = await Promise.all([
getDevList(),
getAlarmPoints(),
getFactor(),
]);
const [devices, points] = await Promise.all([getDevList(), getAlarmPoints()]);
dev_data.value.devList = devices;
dev_data.value.alarmPoints = points;
dev_data.value.alarmFactors = factors;
};
watch(
@ -178,49 +159,34 @@ const openModal = (record) => {
outliers_add_table_item.showModal();
};
const refreshMQTT = async () => {
const res = await postMQTTRefresh();
if (res.isSuccess) {
openToast("success", t("msg.mqtt_refresh"));
} else {
openToast("error", res.msg, "#outliers_add_table_item");
}
};
const remove = async (Id) => {
openToast("warning", t("msg.sure_to_delete"), "body", async () => {
await cancelToastOpen();
const res = await delOutliersSetting(Id);
if (res.isSuccess) {
getOutliersData();
openToast("success", t("msg.delete_success"));
} else {
openToast("error", res.msg);
}
});
};
const onCancel = () => {
editRecord.value = null;
outliers_add_table_item.close();
};
const openTimeModal = () => {
outliers_time_item.showModal();
};
const onTimeCancel = () => {
outliers_time_item.close();
};
</script>
<template>
<div class="flex items-center justify-between mt-10">
<div class="flex">
<h3 class="text-xl mr-5">{{ $t("alert.alarm_settings") }}</h3>
<AlertOutliersTableAddModal
:openModal="openModal"
:onCancel="onCancel"
:editRecord="editRecord"
:getData="getOutliersData"
:OptionsData="dev_data"
/>
</div>
<button class="btn btn-sm btn-add" @click.prevent="refreshMQTT">
<font-awesome-icon :icon="['fas', 'cog']" />{{ $t("alert.reorganization") }}
</button>
<div class="flex justify-start items-center mt-10">
<h3 class="text-xl mr-5">{{ $t("alert.alarm_settings") }}</h3>
<AlertOutliersTableAddModal
:openModal="openModal"
:onCancel="onCancel"
:editRecord="editRecord"
:getData="getOutliersData"
:OptionsData="dev_data"
/>
<AlertOutliersTimeModal
:openModal="openTimeModal"
:onCancel="onTimeCancel"
/>
</div>
<Table :columns="columns" :dataSource="tableData" class="mt-3">
<template #bodyCell="{ record, column, index }">
@ -231,12 +197,6 @@ const onCancel = () => {
>
{{ $t("button.edit") }}
</button>
<button
class="btn btn-sm btn-error text-white"
@click.stop.prevent="() => remove(record.id)"
>
{{ $t("button.delete") }}
</button>
</template>
<template v-else-if="column.key === 'enable'">
{{ record.enable === 1 ? t("alert.yes") : t("alert.no") }}
@ -244,9 +204,15 @@ const onCancel = () => {
<template v-else-if="column.key === 'warning_method'">
<span class="whitespace-pre">{{ record.warning_method }}</span>
</template>
<!-- <template v-else-if="column.key === 'warning_time'">
<span class="whitespace-pre">{{ record.warning_time }}</span>
</template> -->
<template v-else-if="column.key === 'warning_time'">
<button
class="btn btn-sm btn-success text-white pb-3"
:disabled="!record.enable"
@click.stop.prevent="() => openTimeModal(record)"
>
{{ $t("alert.time_setting") }}
</button>
</template>
<template v-else>
{{ record[column.key] }}
</template>

142
src/views/alert/components/AlertSetting/AlertOutliersTableAddModal.vue
View File

@ -8,7 +8,7 @@ import * as yup from "yup";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { openToast } = inject("app_toast");
const { timesList, noticeList } = inject("notify_table");
const { noticeList } = inject("notify_table");
const { searchParams, changeParams } = useSearchParam();
const props = defineProps({
@ -26,9 +26,8 @@ const formState = ref({
device_name_tag: searchParams.value?.subSys_id,
points: "",
enable: 0,
factor: 1,
alarm_value: "",
delay: 0,
is_bool: 1,
factor: null,
highLimit: null,
lowLimit: null,
highDelay: null,
@ -52,7 +51,8 @@ const { formErrorMsg, handleSubmit, handleErrorReset } = useFormErrorMessage(
);
const SaveCheckAuth = ref([]);
const factorNum = ref(1);
const isBool = ref(1);
const factorData = ref([]);
watch(
() => props.editRecord,
@ -61,19 +61,32 @@ watch(
formState.value = {
...newValue,
};
console.log('formState.value',formState.value);
SaveCheckAuth.value = newValue.notices ? [...newValue.notices] : [];
if (newValue.factor) {
onFactorsChange(newValue.factor);
if (newValue.points) {
onPointsChange(newValue.points);
}
}
}
);
const onFactorsChange = (selectedFactor) => {
factorNum.value = selectedFactor;
const onPointsChange = (selectedPoint) => {
const pointData = props.OptionsData.alarmPoints.find(
(p) => p.points === selectedPoint
);
if (pointData) {
isBool.value = pointData.is_bool;
formState.value.is_bool = pointData.is_bool;
if (pointData.factor && Array.isArray(pointData.factor)) {
factorData.value = pointData.factor.map((d) => ({
...d,
key: d.id,
}));
} else {
factorData.value = [];
formState.value.factor = 0;
}
}
};
const onNoticesChange = (value, checked) => {
@ -108,7 +121,8 @@ const closeModal = () => {
formState.value = {};
handleErrorReset();
props.onCancel();
factorNum.value = 1;
factorData.value = [];
isBool.value = 1;
};
</script>
@ -119,8 +133,9 @@ const closeModal = () => {
<Modal
id="outliers_add_table_item"
:title="t('alert.alarm_settings')"
:open="open"
:onCancel="closeModal"
:width="710"
width="710"
>
<template #modalContent>
<form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
@ -146,6 +161,7 @@ const closeModal = () => {
name="points"
Attribute="full_name"
:options="OptionsData.alarmPoints"
:onChange="onPointsChange"
>
<template #topLeft>{{ $t("alert.item") }}</template>
<template #bottomLeft
@ -154,17 +170,6 @@ const closeModal = () => {
</span></template
>
</Select>
<Select
:value="formState"
class="my-2"
selectClass="border-info focus-within:border-info"
name="factor"
Attribute="full_name"
:options="OptionsData.alarmFactors"
:onChange="onFactorsChange"
>
<template #topLeft>{{ $t("alert.qualifications") }}</template>
</Select>
<RadioGroup
class="my-2"
name="enable"
@ -185,60 +190,49 @@ const closeModal = () => {
>
<template #topLeft>{{ $t("alert.status") }}</template>
</RadioGroup>
<template v-if="factorNum == 1">
<InputNumber :value="formState" class="my-2" name="delay">
<template #topLeft>{{ $t("alert.delay") }}</template>
</InputNumber>
</template>
<template v-if="factorNum == 2">
<div class="flex gap-4 w-full">
<InputNumber :value="formState" class="my-2" name="highLimit">
<template #topLeft>{{ $t("alert.upper_limit") }}(>=)</template>
</InputNumber>
<InputNumber :value="formState" class="my-2" name="lowLimit">
<template #topLeft>{{ $t("alert.lower_limit") }}(&lt;=)</template>
</InputNumber>
</div>
<div class="flex gap-4 w-full">
<InputNumber :value="formState" class="my-2" name="highDelay">
<template #topLeft>{{ $t("alert.highDelay") }}</template>
</InputNumber>
<InputNumber :value="formState" class="my-2" name="lowDelay">
<template #topLeft>{{ $t("alert.lowDelay") }}</template>
</InputNumber>
</div>
</template>
<template v-if="factorNum == 3">
<Input :value="formState" class="my-2" name="alarm_value">
<template #topLeft>{{ $t("alert.warning_value") }}</template>
</Input>
</template>
<!-- <Select
<Select
:value="formState"
class="my-2"
selectClass="border-info focus-within:border-info"
name="schedule_id"
Attribute="schedule_name"
:options="timesList"
name="factor"
Attribute="full_name"
:options="factorData"
v-if="factorData.length !== 0"
>
<template #topLeft>{{ $t("alert.warning_time") }}</template>
<template #topRight
><button
v-if="formState.schedule_id"
class="text-base btn-text-without-border"
@click="
() => {
formState.schedule_id = null;
}
"
>
<font-awesome-icon
:icon="['fas', 'times']"
class="text-[#a5abb1] me-1"
/>{{ $t("alert.clear") }}
</button>
</template>
</Select> -->
<template #topLeft>{{ $t("alert.qualifications") }}</template>
</Select>
<InputNumber
:value="formState"
class="my-2"
name="highLimit"
v-if="!isBool"
>
<template #topLeft>{{ $t("alert.upper_limit") }}(>=)</template>
</InputNumber>
<InputNumber
:value="formState"
class="my-2"
name="lowLimit"
v-if="!isBool"
>
<template #topLeft>{{ $t("alert.lower_limit") }}(&lt;=)</template>
</InputNumber>
<InputNumber
:value="formState"
class="my-2"
name="highDelay"
v-if="!isBool"
>
<template #topLeft>{{ $t("alert.highDelay") }}</template>
</InputNumber>
<InputNumber
:value="formState"
class="my-2"
name="lowDelay"
v-if="!isBool"
>
<template #topLeft>{{ $t("alert.lowDelay") }}</template>
</InputNumber>
<div class="w-full mt-5">
<p class="text-light text-lg ml-1">
{{ $t("alert.warning_method") }}

82
src/views/alert/components/AlertSetting/AlertOutliersTimeModal.vue Normal file
View File

@ -0,0 +1,82 @@
<script setup>
import { inject, defineProps, watch, ref, provide } from "vue";
const props = defineProps({
openModal: Function,
onCancel: Function,
});
const closeModal = () => {
props.onCancel();
};
const columns = [
{
title: "排程名稱",
key: "schedule_name",
},
{
title: "時段",
key: "schedule_time",
},
{
title: "狀態",
key: "enable",
},
{
title: "功能",
key: "operation",
width: 150,
},
];
</script>
<template>
<Modal
id="outliers_time_item"
:open="open"
:onCancel="closeModal"
width="800"
>
<template #modalTitle>
<p>警示時間設定</p>
<button class="fixed right-10 top-5" @click.prevent="closeModal">
<font-awesome-icon
:icon="['fas', 'times']"
size="1x"
class="text-[#a5abb1]"
/>
</button>
</template>
<template #modalContent>
<Table
:columns="columns"
:dataSource="tableData"
class="mt-3"
:withStyle="false"
>
<template #bodyCell="{ record, column, index }">
<template v-if="column.key === 'operation'">
<button
class="btn btn-sm btn-success text-white mr-2"
@click.stop.prevent="() => openModal(record)"
>
修改
</button>
<button
class="btn btn-sm btn-error text-white"
@click.stop.prevent="() => remove(record.userinfo_guid)"
>
刪除
</button>
</template>
<template v-else>
{{ record[column.key] }}
</template>
</template>
</Table>
</template>
</Modal>
</template>
<style lang="scss" scoped></style>

25
src/views/alert/components/AlertSetting/AlertSetting.vue
View File

@ -1,26 +1,13 @@
<script setup>
import AlertSubList from "./AlertSubList.vue";
import AlertOutliersTable from "./AlertOutliersTable.vue";
import AlertTimeTable from "./AlertTimeTable.vue";
import AlertNotifyTable from "./AlertNotifyTable.vue";
import { ref, provide, onMounted, watch } from "vue";
import { getAlarmScheduleList, getNoticeList } from "@/apis/alert";
import { getNoticeList } from "@/apis/alert";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const timesList = ref([]);
const noticeList = ref([]);
// const timesListData = async () => {
// const res = await getAlarmScheduleList();
// timesList.value = res.data.map((items) => ({
// ...items,
// key:items.id,
// schedule_array: JSON.parse(items.schedule_json).map((time, index) => ({
// day: index + 1,
// time,
// })),
// }));
// };
const noticeList = ref([]);
const NoticeListData = async () => {
const res = await getNoticeList(locale.value);
@ -32,22 +19,16 @@ watch(locale, () => {
});
onMounted(() => {
// timesListData();
NoticeListData();
});
provide("notify_table", {
timesList,
noticeList,
// timesListData
});
provide("notify_table", { noticeList });
</script>
<template>
<div>
<AlertSubList />
<AlertOutliersTable />
<!-- <AlertTimeTable /> -->
<AlertNotifyTable />
</div>
</template>

44
src/views/alert/components/AlertSetting/AlertSubList.vue
View File

@ -3,43 +3,33 @@ import { ref, onMounted, watch } from "vue";
import useSearchParam from "@/hooks/useSearchParam";
import useActiveBtn from "@/hooks/useActiveBtn";
import { getAlertSubList } from "@/apis/alert";
import useBuildingStore from "@/stores/useBuildingStore";
const store = useBuildingStore();
const { searchParams, changeParams } = useSearchParam();
const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
const getSubSystems = async () => {
const res = await getAlertSubList(store.selectedBuilding.building_guid);
const history_Sub_systems = res.data.history_Main_Systems.flatMap(
(mainSystem) => {
return mainSystem.history_Sub_systems;
}
);
const subSystems = history_Sub_systems.map((subSystem, index) => ({
title: subSystem.full_name,
key: subSystem.sub_system_tag,
active: searchParams.value?.subSys_id
? searchParams.value.subSys_id === subSystem.sub_system_tag
: index == 0,
}));
const res = await getAlertSubList();
const subSystems = res.data.history_Main_Systems.flatMap((mainSystem) => {
return mainSystem.history_Sub_systems.map((subSystem, index) => ({
title: subSystem.full_name,
key: subSystem.sub_system_tag,
active: searchParams.value?.subSys_id
? searchParams.value.subSys_id === subSystem.sub_system_tag
: subSystem.sub_system_tag == "DP",
}));
});
setItems(subSystems);
};
watch(
() => store.selectedBuilding,
(newBuilding) => {
if (newBuilding) {
getSubSystems();
}
},
{ immediate: true }
);
onMounted(() => {
getSubSystems();
});
watch(selectedBtn,
(newValue) => {
if (newValue) {
changeParams({ subSys_id: newValue.key });
}
if (newValue) {
changeParams({ subSys_id: newValue.key });
}
}
);
</script>

110
src/views/alert/components/AlertSetting/AlertTimeTable.vue
View File

@ -1,110 +0,0 @@
<script setup>
import { ref, inject, onMounted } from "vue";
import { deleteAlarmSchedule } from "@/apis/alert";
import AlertTimeTableAddModal from "./AlertTimeTableAddModal.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { openToast, cancelToastOpen } = inject("app_toast");
const tableData = ref([]);
const editRecord = ref(null);
const { timesList,timesListData } = inject("notify_table");
const weekDate = ref({
1: t("alert.sunday"),
2: t("alert.monday"),
3: t("alert.tuesday"),
4: t("alert.wednesday"),
5: t("alert.thursday"),
6: t("alert.friday"),
7: t("alert.saturday"),
});
onMounted(() => {
timesListData();
});
const columns = [
{
title: t("alert.schedule_name"),
key: "schedule_name",
},
{
title: t("alert.schedule_content"),
key: "schedule_content",
},
{
title: t("alert.operation"),
key: "operation",
width: 200,
},
];
const openModal = (record) => {
if (record) {
editRecord.value = record;
} else {
editRecord.value = null;
}
outliers_time_item.showModal();
};
const onCancel = () => {
editRecord.value = null;
outliers_time_item.close();
};
const remove = async (id) => {
openToast("warning", t("msg.sure_to_delete"), "body", async () => {
await cancelToastOpen();
const res = await deleteAlarmSchedule(id);
if (res.isSuccess) {
timesListData();
openToast("success", t("msg.delete_success"));
} else {
openToast("error", res.msg);
}
});
};
</script>
<template>
<div class="flex justify-start items-center mt-10">
<h3 class="text-xl mr-5">{{$t("alert.warning_time")}}</h3>
<AlertTimeTableAddModal :openModal="openModal" :onCancel="onCancel" :editRecord="editRecord" :weekDate="weekDate" />
</div>
<Table :columns="columns" :dataSource="timesList" class="w-3/4 mt-3">
<template #bodyCell="{ record, column, index }">
<template v-if="column.key === 'schedule_content'">
<ul class="text-left">
<li v-for="(item, index) in record.schedule_array" :key="index">
<strong v-if="item.time.length">
<span>{{ weekDate[item.day] }}: </span>
<span v-for="(time, timeIndex) in item.time" :key="timeIndex">
{{ time }}
<span v-if="timeIndex < item.time.length - 1">, </span>
</span>
</strong>
</li>
</ul>
</template>
<template v-else-if="column.key === 'operation'">
<button
class="btn btn-sm btn-success text-white mr-2"
@click.stop.prevent="() => openModal(record)"
>
{{$("button.edit")}}
</button>
<button
class="btn btn-sm btn-error text-white"
@click.stop.prevent="() => remove(record.id)"
>
{{$("button.delete")}}
</button>
</template>
<template v-else>
<pre>{{ record[column.key] }}</pre>
</template>
</template>
</Table>
</template>
<style lang="scss" scoped></style>

429
src/views/alert/components/AlertSetting/AlertTimeTableAddModal.vue
View File

@ -1,429 +0,0 @@
<script setup>
import { defineProps, onMounted, watch, ref, reactive, inject } from "vue";
import useFormErrorMessage from "@/hooks/useFormErrorMessage";
import { postAlertSchedule } from "@/apis/alert";
import * as yup from "yup";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { openToast } = inject("app_toast");
const { timesListData } = inject("notify_table");
const props = defineProps({
openModal: Function,
onCancel: Function,
editRecord: Object,
weekDate: Object,
});
let scheme = yup.object({
schedule_name: yup.string().required(t("button.required")),
});
const form = ref(null);
const schedule_array = ref([]);
const formState = ref({
id: 0,
schedule_name: "",
});
const { formErrorMsg, handleSubmit, handleErrorReset } = useFormErrorMessage(
scheme.value
);
const closeModal = () => {
props.onCancel();
formState.value = {
id: 0,
schedule_name: "",
};
clear();
};
const tableHeader = ref([
"00",
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
]);
const rowUnit = ref([]); //每一單位格子
const timeContent = ref([]); //選中的時間段原始數據
const timeSection = ref([]); //時間段，可以返回給後端
const timeStr = ref([]); //時間段，前端顯示的數據
let beginDay = ref(0);
let beginTime = ref(0);
let downEvent = ref(false);
// 其他變數保持不變
const hoverRange = reactive({
startDay: 0,
endDay: 0,
startSlot: 0,
endSlot: 0,
});
const handleMouseMove = (i, day) => {
if (!downEvent.value) return;
hoverRange.startDay = Math.min(beginDay.value, day);
hoverRange.endDay = Math.max(beginDay.value, day);
hoverRange.startSlot = Math.min(beginTime.value, i);
hoverRange.endSlot = Math.max(beginTime.value, i);
};
const initSchedule = () => {
for (let i = 0; i < 7; i++) {
const dayIndex = i;
const defaultTimes = schedule_array.value[dayIndex] || [];
let arr = [];
for (let j = 0; j < 96; j++) {
const timeSlot = j / 4;
const isDefault = defaultTimes.some((timeRange) => {
const [start, end] = timeRange.split("~").map((t) => {
const [hours, minutes] = t.split(":").map(Number);
return hours + minutes / 60;
});
return timeSlot >= start && timeSlot < end;
});
arr.push({ class: isDefault ? "ui-selected" : null, timeData: j });
}
rowUnit.value.push(arr);
timeContent.value.push({
arr: arr
.filter((item) => item.class === "ui-selected")
.map((item) => item.timeData),
});
timeSection.value.push(defaultTimes);
timeStr.value.push(defaultTimes.join(", "));
}
};
const handleMouseDown = (i, day) => {
downEvent.value = true; //滑鼠不在範圍內的不算
beginDay.value = day;
beginTime.value = i;
};
const handleMouseUp = (i, day) => {
let begin = beginTime.value;
let start = begin <= i ? begin : i; //x軸起點
let length = Math.abs(begin - i);
let end = start + length; //x軸終點
let dayStart = beginDay.value <= day ? beginDay.value : day; //y軸起點
let dayLength = Math.abs(beginDay.value - day);
let dayEnd = dayStart + dayLength; //y軸終點
const isAdd = () => {
//當選取範圍內所有的都是選取狀態時,則執行取消選取
for (let x = dayStart; x < dayEnd + 1; x++) {
for (let y = start; y < end + 1; y++) {
if (rowUnit.value[x][y].class === null) return true;
}
}
return false;
};
if (downEvent.value) {
//當點擊事件是在table内才觸發選取操作
if (isAdd()) {
for (let x = dayStart; x < dayEnd + 1; x++) {
for (let y = start; y < end + 1; y++) {
if (rowUnit.value[x][y].class === null) {
rowUnit.value[x][y].class = "ui-selected";
timeContent.value[x].arr.push(rowUnit.value[x][y].timeData);
}
}
}
} else {
for (let x = dayStart; x < dayEnd + 1; x++) {
for (let y = start; y < end + 1; y++) {
if (rowUnit.value[x][y].class === "ui-selected") {
rowUnit.value[x][y].class = null;
let c = rowUnit.value[x][y].timeData;
let kong = "";
for (let i = 0; i < timeContent.value[x].arr.length; i++) {
if (c === timeContent.value[x].arr[i]) {
kong = i;
}
}
timeContent.value[x].arr.splice(kong, 1);
}
}
}
}
//過濾時間段,將鄰近的時間段合併
filterTime(dayStart, dayEnd);
}
downEvent.value = false;
hoverRange.startDay = hoverRange.endDay = 0;
hoverRange.startSlot = hoverRange.endSlot = 0;
};
const filterTime = (start, end) => {
const toStr = (num) => {
if (Number.isInteger(num)) {
return `${num < 10 ? "0" + num : num}:00`;
} else {
const intPart = Math.floor(num);
const fracPart = num - intPart;
const str = intPart < 10 ? "0" + intPart : intPart.toString();
return `${str}:${
fracPart === 0.25 ? "15" : fracPart === 0.5 ? "30" : "45"
}`;
}
};
const timeToStr = (arr) => {
return arr.map(([start, end]) => `${toStr(start)}~${toStr(end)}`);
};
for (let i = start; i <= end; i++) {
const sortedArr = [...new Set(timeContent.value[i].arr)].sort(
(a, b) => a - b
);
const sections = [];
for (let j = 0; j < sortedArr.length; j++) {
if (j === 0 || sortedArr[j] !== sortedArr[j - 1] + 1) {
sections.push([sortedArr[j], sortedArr[j]]);
} else {
sections[sections.length - 1][1] = sortedArr[j];
}
}
timeSection.value[i] = timeToStr(
sections.map(([start, end]) => [start / 4, (end + 1) / 4])
);
timeStr.value[i] = timeSection.value[i].join(", ");
}
};
const clear = () => {
schedule_array.value = [];
rowUnit.value = [];
timeContent.value = [];
timeSection.value = [];
timeStr.value = [];
};
const onOk = async () => {
const values = await handleSubmit(scheme, formState.value);
const res = await postAlertSchedule({
...values,
schedule_json: timeSection.value ? JSON.stringify(timeSection.value) : "",
});
if (res.isSuccess) {
timesListData();
closeModal();
} else {
openToast("error", res.msg, "#outliers_time_item");
}
};
watch(
() => props.editRecord,
(newValue) => {
if (newValue) {
formState.value = {
...newValue,
};
schedule_array.value = newValue?.schedule_json
? JSON.parse(newValue?.schedule_json)
: [];
initSchedule();
}
}
);
</script>
<template>
<button class="btn btn-sm btn-add mr-3" @click.stop.prevent="openModal">
<font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
</button>
<Modal
id="outliers_time_item"
:open="open"
:onCancel="closeModal"
width="1400"
:title="t('alert.warning_time')"
>
<template #modalContent>
<form ref="form">
<Input :value="formState" class="mt-2" name="schedule_name">
<template #topLeft>{{ $t("alert.schedule_name") }}</template>
<template #bottomLeft>
<span class="text-error text-base">
{{ formErrorMsg.schedule_name }}
</span>
</template>
</Input>
<p class="text-light text-lg my-2">{{ $t("alert.schedule_content") }}</p>
<div class="weektime mt-5">
<div class="calendar">
<table class="calendar-table w-full">
<thead class="calendar-head">
<tr>
<th rowspan="6" class="w-20 py-4">
{{ $t("alert.day_time") }}
</th>
<th colspan="48">00:00 - 12:00</th>
<th colspan="48">12:00 - 24:00</th>
</tr>
<tr>
<td
colspan="4"
v-for="(item, index) in tableHeader"
:key="index"
>
{{ item }}
</td>
</tr>
</thead>
<tbody id="tableBody">
<tr v-for="(day, index) in weekDate" :key="index">
<td>{{ day }}</td>
<td
v-for="(item, i) in rowUnit[index - 1]"
:key="i"
@mousedown.prevent="handleMouseDown(i, index - 1)"
@mouseup.prevent="handleMouseUp(i, index - 1)"
@mousemove.prevent="handleMouseMove(i, index - 1)"
class="calendar-atom-time"
:class="{
'ui-selected': item.class === 'ui-selected',
'hover-highlight':
downEvent &&
index - 1 >= hoverRange.startDay &&
index - 1 <= hoverRange.endDay &&
i >= hoverRange.startSlot &&
i <= hoverRange.endSlot,
}"
></td>
</tr>
<tr>
<td colspan="97" class="py-2">
<span class="text-base me-2">{{
$t("alert.click_time_period")
}}</span>
<a
@click="
() => {
clear();
initSchedule();
}
"
class="cursor-pointer text-active text-base"
>
{{ $t("alert.clear") }}
</a>
</td>
</tr>
<tr>
<td colspan="97" class="timeContent">
<div
v-for="(item, index) in timeStr"
:key="index"
v-show="item.length"
>
<span>{{ weekDate[index + 1] }}: </span>
<strong>
<span>{{ item }}</span>
</strong>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</template>
<template #modalAction>
<button
type="reset"
class="btn btn-outline-success mr-2"
@click.prevent="closeModal"
>
{{ $t("button.cancel") }}
</button>
<button
type="submit"
class="btn btn-outline-success"
@click.prevent="onOk"
>
{{ $t("button.submit") }}
</button>
</template>
</Modal>
</template>
<style lang="css" scoped>
.weektime .calendar {
-webkit-user-select: none;
position: relative;
display: inline-block;
width: 100%;
}
.weektime .calendar .calendar-table tr .calendar-atom-time:hover {
background: #ccc;
}
.weektime .calendar .calendar-table tr .ui-selected {
background: #00ffb3;
}
.weektime .calendar .calendar-table tr .ui-selected:hover {
background: #ccc;
}
.weektime .calendar .calendar-table tr,
.weektime .calendar .calendar-table td,
.weektime .calendar .calendar-table th {
border: 1px solid #ccc;
font-size: 13px;
text-align: center;
line-height: 1.8em;
transition: background 200ms ease;
}
.weektime .calendar .calendar-table tbody tr {
height: 35px;
}
.weektime .calendar .calendar-table tbody tr td:first-child {
background: #123;
}
.weektime .calendar .calendar-table thead th,
.weektime .calendar .calendar-table thead td {
background: #123;
}
.hover-highlight {
background: rgba(0, 255, 145, 0.5); /* 淡藍色透明背景 */
border: 1px dashed #00ffb3; /* 藍色虛線邊框 */
}
</style>

183
src/views/dashboard/Dashboard.vue
View File

@ -1,188 +1,75 @@
<script setup>
import { onMounted, onUnmounted, ref, provide, watch } from "vue";
import { getEnergyCost } from "@/apis/dashboard";
import ButtonConnectedGroup from "@/components/customUI/ButtonConnectedGroup.vue";
import Forge from "@/components/forge/Forge.vue";
import DashboardStat from "./components/DashboardStat.vue";
import DashboardElecChart from "./components/DashboardElecChart.vue";
import DashboardSysCard from "./components/DashboardSysCard.vue";
import DashboardSysProgress from "./components/DashboardSysProgress.vue";
import DashboardElecRank from "./components/DashboardElecRank.vue";
import DashboardElecTrends from "./components/DashboardElecTrends.vue";
import DashboardElecCompare from "./components/DashboardElecCompare.vue";
import useBuildingStore from "@/stores/useBuildingStore";
import useActiveBtn from "@/hooks/useActiveBtn";
import { twMerge } from "tailwind-merge";
import { getDashboardInit } from "@/apis/dashboard";
import { onMounted, ref, provide, watch } from "vue";
const store = useBuildingStore();
const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
let intervalId = null;
const energyCostData = ref({});
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
const imgBaseUrl = ref("");
const formState = ref({
building_guid: null,
floor_guid: "all",
department_id: "all",
});
const getEnergyCostData = async (params) => {
const res = await getEnergyCost(params);
energyCostData.value = res.data;
const initialData = ref(null);
// const forgeData = ref([]);
const init = async () => {
const res = await getDashboardInit();
initialData.value = res.data;
};
watch(
() => store.selectedBuilding,
(newBuilding) => {
if (newBuilding) {
formState.value.building_guid = newBuilding.building_guid;
imgBaseUrl.value = store.previewImageExt
? `${FILE_BASEURL}/upload/setting/previewImage/${newBuilding.building_guid}${store.previewImageExt}`
: import.meta.env.MODE === "production"
? "dist/build_img.jpg"
: "/build_img.jpg";
}
},
{ immediate: true, deep: true }
);
onMounted(() => {
init();
});
watch(
() => formState.value,
(newVal) => {
if (newVal) {
const params = { ...newVal };
const intervalOption = ref({});
const currentIntervalType = ref("");
if (params.floor_guid === "all") {
delete params.floor_guid;
}
if (params.department_id === "all") {
delete params.department_id;
}
const openModal = (type) => {
currentIntervalType.value = type;
dashboard_more.showModal();
};
if (params.building_guid) {
getEnergyCostData(params);
}
const decideIntervalOption = (option) => {
intervalOption.value[currentIntervalType.value] = option;
};
if (intervalId) {
clearInterval(intervalId);
}
intervalId = setInterval(() => {
getEnergyCostData(params);
}, 3600000);
}
},
{ immediate: true, deep: true }
);
watch(
() => store.showForgeArea,
(newVal) => {
if (newVal == true) {
setItems([
{
title: "2D",
key: "2D",
active: false,
},
{
title: "3D",
key: "3D",
active: true,
},
]);
}
},
{ immediate: true }
);
onUnmounted(() => {
clearInterval(intervalId);
provide("dashboard_items", {
initialData,
// forgeData,
openModal,
decideIntervalOption,
intervalOption,
currentIntervalType,
});
</script>
<template>
<div class="flex flex-wrap items-center">
<!-- 建築圖 -->
<div class="w-full xl:w-1/3 relative">
<template v-if="store.showForgeArea">
<ButtonConnectedGroup
:items="items"
className="btn-xs absolute right-3 top-6 z-20 bg-slate-800 p-0 rounded-lg "
:onclick="(e, item) => changeActiveBtn(item)"
/>
<div class="area-img-box relative">
<!-- setting頁面要新增讓他能上傳圖片 -->
<img
alt="build"
:src="imgBaseUrl"
:class="
twMerge(
'absolute w-full h-full transition-opacity duration-300',
selectedBtn?.key == '2D'
? 'opacity-100 z-10'
: 'opacity-0 z-0'
)
"
/>
<Forge
:class="
twMerge(
'absolute transition-opacity duration-300',
selectedBtn?.key == '3D'
? 'opacity-100 z-10'
: 'opacity-0 z-0'
)
"
/>
</div>
</template>
<template v-else>
<img
alt="build"
:src="imgBaseUrl || '/build_img.jpg'"
class="area-img-box w-full h-[460px] block relative rounded-sm mt-3"
/>
</template>
<div class="w-full xl:w-1/3">
<div class="area-img-box">
<Forge />
</div>
</div>
<div class="w-full xl:w-2/3">
<!-- 用電數據 -->
<DashboardStat />
<div class="flex flex-wrap pt-4">
<!-- 當月能耗排行 -->
<div class="lg:w-1/3 w-full">
<DashboardElecRank :energyCostData="energyCostData" />
</div>
<!-- 近30天能耗趨勢 -->
<div class="lg:w-2/3 w-full">
<DashboardElecTrends
:formState="formState"
:energyCostData="energyCostData"
:getEnergyCostData="getEnergyCostData"
/>
</div>
</div>
<!-- 用電圖表 -->
<DashboardElecChart />
</div>
<!-- 設備小卡 -->
<div class="w-full lg:w-1/3">
<div class="w-full lg:w-2/3">
<DashboardSysCard />
</div>
<!--狀態、進度-->
<div class="w-full lg:w-1/3">
<DashboardSysProgress />
</div>
<!-- 環比能耗 -->
<div class="w-full lg:w-1/3">
<DashboardElecCompare :energyCostData="energyCostData" />
</div>
</div>
</template>
<style lang="css" scoped>
.area-img-box {
@apply border border-light-info bg-dark-info w-full h-[460px] block relative rounded-sm mt-3;
@apply border border-light-info bg-dark-info w-full h-[400px] block relative rounded-sm mb-4;
}
.area-img-box::before {

305
src/views/dashboard/components/DashboardElecCompare.vue
View File

@ -1,305 +0,0 @@
<script setup>
import { ref, onMounted, watch, computed } from "vue";
import * as echarts from "echarts";
import BarChart from "@/components/chart/BarChart.vue";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
const props = defineProps({
energyCostData: {
type: Object,
required: true,
},
});
const chartData = ref([]); // 初始化為空陣列
const labels = computed(() => [
t("dashboard.today"),
t("dashboard.yesterday"),
t("dashboard.this_week"),
t("dashboard.last_week"),
t("dashboard.this_month"),
t("dashboard.last_month"),
t("dashboard.this_year"),
t("dashboard.last_year"),
]);
const barWidth = 30; // Set barWidth
const barChartOptions = ref({
xAxis: {
type: "category",
data: chartData.value.map((item) => item.category),
axisLine: { lineStyle: { color: "#fff" } },
},
yAxis: { type: "value", show: false },
series: [], // 初始化為空陣列
tooltip: {
trigger: "axis",
axisPointer: { type: "shadow" },
formatter: function (params) {
let tooltipText = `<div>${params[0].axisValueLabel}</div>`;
const filteredParams = params.filter((item) => item.seriesType === "bar");
filteredParams.forEach((item) => {
tooltipText += `<div>${item.marker} ${
item.value ? item.value : "-"
}</div>`;
});
return tooltipText;
},
},
});
function updateChartData(newEnergyCostData) {
if (newEnergyCostData && newEnergyCostData.compare) {
// 從 props.energyCostData.compare 中提取資料
const compareData = newEnergyCostData.compare;
// 轉換資料格式
chartData.value = [
{
category: t("dashboard.daily_relative_change"),
this: compareData.day.current,
last: compareData.day.last,
change: compareData.day.percentage,
},
{
category: t("dashboard.weekly_relative_change"),
this: compareData.week.current,
last: compareData.week.last,
change: compareData.week.percentage,
},
{
category: t("dashboard.monthly_relative_change"),
this: compareData.month.current,
last: compareData.month.last,
change: compareData.month.percentage,
},
{
category: t("dashboard.yearly_relative_change"),
this: compareData.year.current,
last: compareData.year.last,
change: compareData.year.percentage,
},
];
// 更新 barChartOptions
barChartOptions.value = {
xAxis: {
type: "category",
data: chartData.value.map((item) => item.category),
axisLine: { lineStyle: { color: "#fff" } },
},
yAxis: { type: "value", show: false },
grid: {
left: "-10%",
right: "1%",
bottom: "3%",
top: "4%",
containLabel: true,
},
series: [
{
name: "當前週期",
data: chartData.value.map((item) => item.this),
type: "bar",
barWidth: barWidth,
barGap: "-10%",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#186B80" },
{ offset: 1, color: "#50C3E3" },
]),
shadowBlur: 5,
shadowColor: "rgba(0, 0, 0, 0.3)",
shadowOffsetY: 2,
shadowOffsetX: 5,
},
z: 3,
},
{
name: "對比週期",
data: chartData.value.map((item) => item.last),
type: "bar",
barWidth: barWidth,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#988F2C" },
{ offset: 1, color: "#FFF26D" },
]),
shadowBlur: 5,
shadowColor: "rgba(0, 0, 0, 0.3)",
shadowOffsetY: 2,
shadowOffsetX: 5,
},
},
{
// this top
z: 6,
type: "pictorialBar",
symbolPosition: "end",
data: chartData.value.map((item) => item.this),
symbol: "diamond",
symbolOffset: ["-45%", "-50%"],
symbolSize: [barWidth, barWidth * 0.5],
itemStyle: {
borderWidth: 0,
color: "#50C3E3",
},
},
{
// this bot
z: 6,
type: "pictorialBar",
symbolPosition: "start",
data: chartData.value.map((item) => item.this),
symbol: "diamond",
symbolOffset: ["-45%", "50%"],
symbolSize: [barWidth, barWidth * 0.5],
itemStyle: {
borderWidth: 0,
color: "#50C3E3",
},
},
{
// last top
z: 3,
type: "pictorialBar",
symbolPosition: "end",
data: chartData.value.map((item) => item.last),
symbol: "diamond",
symbolOffset: ["45%", "-50%"],
symbolSize: [barWidth, barWidth * 0.5],
itemStyle: {
borderWidth: 0,
color: "#FFF26D",
},
},
{
// last bot
z: 3,
type: "pictorialBar",
symbolPosition: "start",
data: chartData.value.map((item) => item.last),
symbol: "diamond",
symbolOffset: ["45%", "50%"],
symbolSize: [barWidth, barWidth * 0.5],
itemStyle: {
borderWidth: 0,
color: "#FFF26D",
},
},
],
tooltip: {
trigger: "axis",
axisPointer: { type: "shadow" },
formatter: function (params) {
let tooltipText = `<div>${params[0].axisValueLabel}</div>`;
const filteredParams = params.filter(
(item) => item.seriesType === "bar"
);
filteredParams.forEach((item) => {
tooltipText += `<div>${item.marker} ${
item.value ? item.value : "-"
}</div>`;
});
return tooltipText;
},
},
};
}
}
// 使用 watch 監聽 energyCostData 的變化
watch(
() => props.energyCostData,
(newEnergyCostData) => {
updateChartData(newEnergyCostData);
},
{ immediate: true } // 立即執行一次，確保初始資料載入
);
watch(locale, () => {
updateChartData(props.energyCostData);
});
</script>
<template>
<div class="flex flex-wrap">
<div class="w-full chart-data relative px-8 py-3">
<div class="flex flex-wrap items-center justify-between">
<h2 class="font-light">
{{ $t("dashboard.relative_energy_consumption") }}
</h2>
</div>
<div class="h-[180px]">
<BarChart
id="dashboard_chart_compare"
class="h-full"
:option="barChartOptions"
/>
</div>
<!-- 表格數據展示 -->
<div class="flex justify-between">
<div
v-for="(data, index) in chartData"
:key="index"
class="w-1/4 text-center mx-1"
>
<div
class="text-sm bg-cyan-900 p-1 border border-cyan-100 border-opacity-20"
>
{{ labels[index * 2] }}
</div>
<div
class="text-sm bg-cyan-900 p-1 border border-cyan-100 border-opacity-20"
>
{{ data.this ?? "-" }}
</div>
<div
class="text-sm bg-cyan-900 p-1 border border-cyan-100 border-opacity-20"
>
{{ labels[index * 2 + 1] }}
</div>
<div
class="text-sm bg-cyan-900 p-1 border border-cyan-100 border-opacity-20"
>
{{ data.last ?? "-" }}
</div>
<div
class="text-sm bg-cyan-900 p-1 border border-cyan-100 border-opacity-20"
>
<span
:class="{
'text-red-500': data.change > 0,
'text-green-500': data.change < 0,
}"
>
{{
data.change
? (data.change > 0 ? "+" : "") + data.change + "%"
: "-"
}}
</span>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.chart-data:before {
@apply absolute right-0 left-2 top-0 h-10 w-10 bg-no-repeat z-10;
content: "";
background: url(@ASSET/img/chart-data-background01.svg) center center;
}
.chart-data::after {
@apply absolute right-0 bottom-0 h-10 w-10 bg-no-repeat z-10;
content: "";
background: url(@ASSET/img/chart-data-background02.svg) center center;
}
</style>

109
src/views/dashboard/components/DashboardElecRank.vue
View File

@ -1,109 +0,0 @@
<script setup>
import { ref, watch } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const props = defineProps({
energyCostData: {
type: Object,
required: true,
},
});
const energyTypeList = ref([
{
title: t("dashboard.today_energy_consumption"),
key: "today",
},
{
title: t("dashboard.this_month_energy_consumption"),
key: "month",
},
]);
const currentEnergyType = ref({
name: "month",
});
// 取得當前能耗資料
const getCurrentEnergyData = () => {
if (!props.energyCostData || !props.energyCostData.rank) {
return []; // 或者返回一些默认值
}
return currentEnergyType.value.name === "month"
? props.energyCostData?.rank.month || []
: props.energyCostData?.rank.day || [];
};
</script>
<template>
<div class="state-box-col relative ps-2 h-full max-h-[350px]">
<div class="state-box h-full">
<!-- 標題和切換按鈕 -->
<div class="flex justify-between items-center mb-2">
<h2 class="font-light relative">
{{ $t("dashboard.energy_ranking") }}
</h2>
<Select
:value="currentEnergyType"
class="!w-24"
selectClass="border-info focus-within:border-info btn-xs text-xs"
name="name"
Attribute="title"
:options="energyTypeList"
:isTopLabelExist="false"
:isBottomLabelExist="false"
>
</Select>
</div>
<!-- 能耗排名列表 -->
<div class="max-h-[300px] overflow-y-auto">
<table class="table table-sm text-center">
<tbody>
<tr
v-for="(item, index) in getCurrentEnergyData()"
:key="index"
:class="[
{ 'text-red-300': index + 1 === 1 },
{ 'text-orange-300': index + 1 === 2 },
{ 'text-yellow-300': index + 1 === 3 },
{ 'text-teal-300': index + 1 > 3 },
]"
>
<td class="flex items-center">
<font-awesome-icon :icon="['fas', 'crown']" class="me-1" />{{
index + 1
}}
</td>
<td>{{ item.name }}</td>
<td>{{ item.value }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.state-box {
@apply border-2 border-light-info rounded-sm p-2 text-white relative;
}
.state-box-col:before {
@apply absolute left-0 right-0 -top-0.5 m-auto h-2 w-36 bg-no-repeat bg-center z-10;
content: "";
background-image: url(@ASSET/img/state-box-top.png);
}
.state-box-col:after {
@apply absolute left-0 right-0 -bottom-0.5 m-auto h-2 w-36 bg-no-repeat bg-center z-10;
content: "";
background-image: url(@ASSET/img/state-box-bottom.png);
}
tr td {
@apply text-[13px] text-start;
}
</style>

250
src/views/dashboard/components/DashboardElecTrends.vue
View File

@ -1,250 +0,0 @@
<script setup>
import { ref, onMounted, watch } from "vue";
import * as echarts from "echarts";
import BarChart from "@/components/chart/BarChart.vue";
import { useI18n } from "vue-i18n";
import dayjs from "dayjs";
import useBuildingStore from "@/stores/useBuildingStore";
const storeBuild = useBuildingStore();
const { t } = useI18n();
const props = defineProps({
formState: {
type: Object,
required: true,
},
energyCostData: {
type: Object,
required: true,
},
getEnergyCostData: {
type: Function,
required: true,
}
});
const chartData = ref([]);
const floorList = ref([]);
const deptList = ref([]);
const weekComparisonOption = ref({});
// 生成柱狀圖的 option
const generateCylinderChartOption = (data) => {
const barWidth = 15;
return {
xAxis: {
type: "category",
data: data.map((item) => item.date),
axisLine: {
lineStyle: {
color: "#fff",
},
},
},
yAxis: {
type: "value",
name: "kWh",
axisLine: {
lineStyle: {
color: "#fff",
},
},
splitLine: {
show: false,
},
},
series: [
{
data: data.map((item) => item.energy),
type: "bar",
barWidth: barWidth,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{ offset: 0, color: "#1F7B47" },
{ offset: 1, color: "#247E95" },
]),
shadowBlur: 5,
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowOffsetY: 5,
},
},
{
z: 15,
type: "pictorialBar",
symbolPosition: "end",
data: data.map((item) => item.energy),
symbol: "diamond",
symbolOffset: [0, -5],
symbolSize: [barWidth, barWidth * 0.5],
itemStyle: {
color: "#62E39A",
},
},
{
z: 10,
type: "pictorialBar",
data: data.map((item) => item.energy),
symbol: "diamond",
symbolSize: [barWidth, barWidth * 0.5],
symbolOffset: [0, 6],
itemStyle: {
color: "#247E95",
},
},
],
grid: {
left: "0%",
right: "1%",
bottom: "3%",
top: "10%",
containLabel: true,
},
tooltip: {
trigger: "axis",
formatter: function (params) {
const item = params[0];
return `<p>${item.name}</p> <p>${item.marker}Energy consumption : ${item.value}</p>`;
},
},
};
};
const processEnergyData = () => {
if (!props.energyCostData || !props.energyCostData.trend) {
chartData.value = [];
weekComparisonOption.value = generateCylinderChartOption(chartData.value);
return;
}
const dailyData = [...props.energyCostData.trend].sort(
(a, b) => new Date(a.time) - new Date(b.time)
);
chartData.value = dailyData.map((item) => ({
date: dayjs(item.time).format("MM/DD"),
energy: item.value,
}));
weekComparisonOption.value = generateCylinderChartOption(chartData.value);
};
watch(
() => props.energyCostData,
(newEnergyCostData) => {
processEnergyData();
},
{ deep: true, immediate: true }
);
watch(
() => storeBuild.floorList,
(newValue) => {
if (newValue) {
console.log('newValue',newValue);
floorList.value = [
{
title: "All",
key: "all",
},
...storeBuild.floorList,
];
}
},
{
immediate: true,
}
);
watch(
() => storeBuild.floorList,
(newValue) => {
if (newValue) {
floorList.value = [
{
title: "All",
key: "all",
},
...storeBuild.floorList,
];
}
},
{
immediate: true,
}
);
watch(
() => storeBuild.deptList,
(newValue) => {
if (newValue) {
deptList.value = [
{
title: "All",
key: "all",
},
...storeBuild.deptList,
];
}
},
{
deep: true,
immediate: true,
}
);
</script>
<template>
<div class="w-full chart-data relative px-8 py-1">
<div class="flex flex-wrap items-center justify-between">
<h2 class="font-light">{{ $t("dashboard.last_30_days_energy_trend") }}</h2>
<div class="flex items-center w-52 gap-4">
<Select
:value="props.formState"
class="my-2"
selectClass="border-info focus-within:border-info btn-xs text-xs"
name="floor_guid"
Attribute="title"
:options="floorList"
:isTopLabelExist="false"
:isBottomLabelExist="false"
>
</Select>
<Select
:value="props.formState"
class="my-2"
selectClass="border-info focus-within:border-info btn-xs text-xs"
name="department_id"
Attribute="title"
:options="deptList"
:isTopLabelExist="false"
:isBottomLabelExist="false"
>
</Select>
</div>
</div>
<div class="h-[300px]">
<BarChart
id="dashboard_chart_week_comparison"
class="h-full"
:option="weekComparisonOption"
/>
</div>
</div>
</template>
<style lang="scss" scoped>
.chart-data:before {
@apply absolute right-0 left-2 top-0 h-10 w-10 bg-no-repeat z-10;
content: "";
background: url(@ASSET/img/chart-data-background01.svg) center center;
}
.chart-data::after {
@apply absolute right-0 bottom-0 h-10 w-10 bg-no-repeat z-10;
content: "";
background: url(@ASSET/img/chart-data-background02.svg) center center;
}
</style>

113
src/views/dashboard/components/DashboardStat.vue
View File

@ -1,100 +1,31 @@
<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import { getEnergyInfo } from "@/apis/dashboard";
import useBuildingStore from "@/stores/useBuildingStore";
import dayjs from "dayjs";
import { computed } from "vue";
import { twMerge } from "tailwind-merge";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
const store = useBuildingStore();
const energyData = ref([]);
let intervalId = null;
const getEnergyInfos = async () => {
try {
const res = await getEnergyInfo(store.selectedBuilding.building_guid);
const apiData = res.data;
energyData.value = [
{
value: apiData.todayKWH ? apiData.todayKWH : "N/A",
label: t("dashboard.today_electricity_consumption"),
},
{
value: apiData.yesterdayKWH ? apiData.yesterdayKWH : "N/A",
label: t("dashboard.yesterday_electricity_consumption"),
},
{
value: apiData.instantKW ? apiData.instantKW : "N/A",
label: t("dashboard.instant_power"),
},
{
value: apiData.instantContractRatio
? apiData.instantContractRatio
: "N/A",
label: t("dashboard.instant_contract_capacity_ratio"),
},
];
} catch (error) {
console.error("Error fetching energy info:", error);
energyData.value = [
{ value: "N/A", label: "Today's electricity consumption in kWH" },
{ value: "N/A", label: "Yesterday's electricity consumption in kWH" },
{ value: "N/A", label: "Instant power kW" },
{ value: "N/A", label: "Instant contract capacity ratio %" },
];
}
};
watch(
() => store.selectedBuilding,
(newBuilding) => {
if (newBuilding) {
getEnergyInfos();
if (intervalId) {
clearInterval(intervalId);
}
intervalId = setInterval(() => {
getEnergyInfos();
}, 30000);
}
const mockData = [
{
value: "305.50",
label: "Today's electricity consumption in kWH",
},
{ immediate: true }
);
watch(locale, () => {
if (energyData.value.length) {
energyData.value = [
{
...energyData.value[0],
label: t("dashboard.today_electricity_consumption"),
},
{
...energyData.value[1],
label: t("dashboard.yesterday_electricity_consumption"),
},
{
...energyData.value[2],
label: t("dashboard.instant_power"),
},
{
...energyData.value[3],
label: t("dashboard.instant_contract_capacity_ratio"),
},
];
}
});
onUnmounted(() => {
clearInterval(intervalId);
});
{
value: "886.75",
label: "Yesterday's electricity consumption in kWH",
},
{
value: "7.84",
label: "Instant power kW",
},
{
value: "1.96",
label: "Instant contract capacity ratio %",
},
];
</script>
<template>
<div class="flex flex-wrap">
<div
v-for="(item, index) in energyData"
v-for="(item, index) in mockData"
:key="index"
class="xl:w-1/4 md:w-1/2 w-full item-data-box relative px-3"
>
@ -110,7 +41,7 @@ onUnmounted(() => {
<style lang="scss" scoped>
.item-data {
@apply relative mb-4 min-h-[100px] h-full flex flex-col justify-center;
@apply relative mb-4 min-h-[135px] h-full flex flex-col justify-center;
}
.item-data-box:after {
@ -161,7 +92,7 @@ onUnmounted(() => {
}
.item-data h2:after {
@apply absolute left-[5%] right-[5%] bottom-0 w-[90%] h-[10px] box-border border-b-2 border-[#58bfe8];
@apply absolute left-[5%] right-[5%] bottom-0 w-[90%] h-[10px] box-border border-b-2 border-[#58bfe8] ;
content: "";
}

135
src/views/dashboard/components/DashboardSysCard.vue
View File

@ -2,10 +2,123 @@
import { ref } from "vue";
import { useRouter } from "vue-router";
import { twMerge } from "tailwind-merge";
import useBuildingStore from "@/stores/useBuildingStore";
const store = useBuildingStore();
const router = useRouter();
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
// 假資料
const mockData = ref([
{
title: "Air Detection System",
icon: "temperature-high",
isError: false,
main_system_tag: "Dust",
sub_system_tag: "EM",
},
{
title: "Lighting System",
icon: "lightbulb",
isError: false,
main_system_tag: "LS",
sub_system_tag: "ECLS",
},
{
title: "Air Condition System",
icon: "fan",
isError: false,
main_system_tag: "ME",
sub_system_tag: "TH",
},
{
title: "Electricity System",
icon: "bolt",
isError: false,
main_system_tag: "EE",
sub_system_tag: "ECP3",
},
{
title: "Elevator System",
icon: "building",
isError: false,
main_system_tag: null,
sub_system_tag: null,
},
{
title: "High Voltage Switchboard",
icon: "charging-station",
isError: false,
main_system_tag: null,
sub_system_tag: null,
},
{
title: "Low Voltage Switchboard",
icon: "charging-station",
isError: false,
main_system_tag: null,
sub_system_tag: null,
},
{
title: "Water Supply System",
icon: "tint",
isError: false,
main_system_tag: null,
sub_system_tag: null,
},
{
title: "Sewage And Wastewater Equipment",
icon: "water",
isError: false,
main_system_tag: null,
sub_system_tag: null,
},
{
title: "Emergency Generator",
icon: "car-battery",
isError: false,
main_system_tag: null,
sub_system_tag: null,
},
{
title: "Fire Equipment",
icon: "fire-extinguisher",
isError: false,
main_system_tag: null,
sub_system_tag: null,
},
{
title: "CCTV System",
icon: "video",
isError: false,
main_system_tag: null,
sub_system_tag: null,
},
{
title: "Access Control System",
icon: "door-open",
isError: false,
main_system_tag: null,
sub_system_tag: null,
},
{
title: "Shutdown System",
icon: "car",
isError: false,
main_system_tag: null,
sub_system_tag: null,
},
{
title: "Emergency Rescue System",
icon: "exclamation-triangle",
isError: false,
main_system_tag: null,
sub_system_tag: null,
},
{
title: "Air Supply Aand Exhaust System",
icon: "wind",
isError: false,
main_system_tag: null,
sub_system_tag: null,
},
]);
const navigateToSubSystem = (mainSystemId, subSystemId) => {
router.push({
name: "sub_system",
@ -19,13 +132,13 @@ const navigateToSubSystem = (mainSystemId, subSystemId) => {
</script>
<template>
<div class="flex flex-wrap -mx-1 h-[21rem] overflow-y-auto items-start content-start">
<div class="flex flex-wrap -mx-1">
<div
v-for="(item, index) in store.subSys"
v-for="(item, index) in mockData"
:key="index"
:class="
twMerge(
'w-full sm:w-1/2 relative my-2',
'w-full sm:w-1/2 lg:w-1/4 relative my-2 ',
item.sub_system_tag
? 'saturate-200 cursor-pointer text-base text-info'
: 'grayscale opacity-70 cursor-not-allowed text-sm'
@ -41,20 +154,14 @@ const navigateToSubSystem = (mainSystemId, subSystemId) => {
<div class="equipment-item">
<div class="w-16">
<img
v-if="item.device_image_url"
class="w-7 m-auto"
:src="`${FILE_BASEURL}/${item.device_image_url}`"
/>
<FontAwesomeIcon
v-else
class="text-2xl mt-1 m-auto"
:icon="['fas', 'tv']"
:icon="['fas', item.icon]"
></FontAwesomeIcon>
</div>
<div class="icon-text">
<div class="">
{{ item.full_name }}
{{ item.title }}
</div>
</div>
</div>

195
src/views/dashboard/components/DashboardSysProgress.vue
View File

@ -1,138 +1,29 @@
<script setup>
import { ref, computed, watch, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { getAlarmOperationInfo } from "@/apis/dashboard";
import useBuildingStore from "@/stores/useBuildingStore";
import DashboardSysProgressModal from "./DashboardSysProgressModal.vue";
import { useI18n } from "vue-i18n";
import { ref, computed } from "vue";
const { t } = useI18n();
const router = useRouter();
const store = useBuildingStore();
const equipmentData = ref({
title: t("dashboard.system_status"),
items: [],
title: "System Status",
items: [
{ label: "Auxiliary", online: 6, offline: 0, alarm: 0 },
{ label: "Air Detection", online: 31, offline: 0, alarm: 2 },
{ label: "Electricity", online: 12, offline: 0, alarm: 1 },
{ label: "Lighting", online: 20, offline: 3, alarm: 0 },
{ label: "Air Condition", online: 23, offline: 0, alarm: 0 },
],
});
const orderData = ref({
title: t("dashboard.work_order"),
items: [],
});
const modalData = ref({});
let intervalId = null;
const getAlarmsInfos = async () => {
try {
const res = await getAlarmOperationInfo(
store.selectedBuilding.building_guid
);
const apiData = res.data;
// 轉換 equipmentData 的資料格式
if (apiData && apiData.alarm) {
equipmentData.value.items = apiData.alarm.map((item) => ({
label: item.name,
online: item.online || 0,
offline: item.offline || 0,
alarm: item.alarm || 0,
}));
}
// 轉換 orderData 的資料格式
if (apiData && apiData.operation) {
orderData.value.items = [
{
label: t("operation.repair"),
complete: apiData.operation.repair.complete || 0,
incomplete: apiData.operation.repair.incomplete || 0,
},
{
label: t("operation.maintenance"),
complete: apiData.operation.upkeep.complete || 0,
incomplete: apiData.operation.upkeep.incomplete || 0,
},
];
}
} catch (error) {
console.error("Error fetching alarm info:", error);
}
};
const navigateToMaintenance = (item) => {
router.push({
name: "operation",
query: {
work_type: item == "Repair" ? "2" : "1",
},
});
};
const openModal = (item) => {
modalData.value = item;
system_status_modal.showModal();
};
const onCancel = () => {
modalData.value = {};
system_status_modal.close();
};
watch(
() => store.selectedBuilding,
(newBuilding) => {
if (newBuilding) {
getAlarmsInfos();
if (intervalId) {
clearInterval(intervalId);
}
intervalId = setInterval(() => {
getAlarmsInfos();
}, 30000);
}
},
{ immediate: true }
);
onUnmounted(() => {
clearInterval(intervalId);
title: "Work Order",
items: [
{ label: "Unassigned", value: 2 },
{ label: "Assigned", value: 4 },
{ label: "Completed", value: 1 },
],
});
</script>
<template>
<DashboardSysProgressModal :onCancel="onCancel" :modalData="modalData" />
<div class="flex flex-wrap">
<div class="w-full sm:w-2/5 state-box-col relative ps-2">
<div class="state-box">
<div class="title">
<img class="state-title01" src="@ASSET/img/state-title01.svg" />
<span>{{ orderData.title }}</span>
<img class="state-title02" src="@ASSET/img/state-title02.svg" />
</div>
<table class="table table-sm text-center">
<thead>
<tr class="border-cyan-400 text-cyan-100">
<th></th>
<th>{{ $t("operation.complete") }}</th>
<th>{{ $t("operation.incomplete") }}</th>
</tr>
</thead>
<tbody>
<tr
v-for="(item, index) in orderData.items"
:key="index"
class="border-cyan-400 cursor-pointer hover:text-info"
@click.stop.prevent="navigateToMaintenance(item.label)"
>
<th class="px-0 text-start">
<span>{{ item.label }}</span>
</th>
<td>{{ item.complete }}</td>
<td>{{ item.incomplete }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w-full sm:w-3/5 state-box-col relative ps-2">
<div class="state-box">
<div class="title">
@ -144,28 +35,50 @@ onUnmounted(() => {
<thead>
<tr class="border-cyan-400 text-cyan-100">
<th></th>
<th>{{ $t("alert.online") }}</th>
<th>{{ $t("alert.offline") }}</th>
<th>{{ $t("alert.alarm") }}</th>
<th>Online</th>
<th>Offline</th>
<th>Alarm</th>
</tr>
</thead>
<tbody>
<tr
v-for="(item, index) in equipmentData.items"
:key="index"
class="border-cyan-400 cursor-pointer hover:text-info"
@click.stop.prevent="openModal(item)"
class="border-cyan-400"
>
<th class="px-0 text-start">{{ item.label }}</th>
<td>
{{ item.online.length }}
</td>
<td>
{{ item.offline.length }}
</td>
<td>
{{ item.alarm.length }}
</td>
<td>{{ item.online }}</td>
<td>{{ item.offline }}</td>
<td>{{ item.alarm }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w-full sm:w-2/5 state-box-col relative ps-2">
<div class="state-box">
<div class="title">
<img class="state-title01" src="@ASSET/img/state-title01.svg" />
<span>{{ orderData.title }}</span>
<img class="state-title02" src="@ASSET/img/state-title02.svg" />
</div>
<table class="table table-sm text-center">
<thead>
<tr class="border-cyan-400 text-cyan-100">
<th></th>
<th>value</th>
</tr>
</thead>
<tbody>
<tr
v-for="(item, index) in orderData.items"
:key="index"
class="border-cyan-400"
>
<th class="px-0 text-start">
<span>{{ item.label }}</span>
</th>
<td>{{ item.value }}</td>
</tr>
</tbody>
</table>
@ -188,7 +101,7 @@ onUnmounted(() => {
}
.state-box {
@apply h-[22rem] border-2 border-light-info rounded-sm py-2 px-6 text-white relative;
@apply h-80 border-2 border-light-info rounded-sm py-2 px-6 text-white relative;
}
.state-box:after {
@ -204,7 +117,7 @@ onUnmounted(() => {
}
.state-box .title {
@apply relative flex items-center mb-1;
@apply relative flex items-center mb-4;
}
.state-box .title .state-title01 {

Some files were not shown because too many files have changed in this diff Show More