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

2D、3D設定 | 2D圖片路徑 | 設備管理 : MQTTpublish設定與傳送 | MQTT設定 :　switch 功能開關與傳送訊息寫入

Browse Source
This commit is contained in:
koko 2025-07-25 12:04:09 +08:00
parent ac5c88a047
commit e6939183fe
16 changed files with 255 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -1,4 +1,4 @@
VITE_API_BASEURL = "https://ibms-cvilux-demo-api.production.mjmtech.com.tw"
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"

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

@ -35,3 +35,5 @@ 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`;

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

@ -26,13 +26,14 @@ import {
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});
const res = await instance.post(GET_ASSET_MAIN_LIST_API, { building_guid });
return apihandler(res.code, res.data, {
msg: res.msg,
@ -49,12 +50,17 @@ export const deleteAssetMainItem = async (id) => {
});
};
export const postAssetMainList = async ({ id, system_key, system_value, building_guid }) => {
export const postAssetMainList = async ({
id,
system_key,
system_value,
building_guid,
}) => {
const res = await instance.post(POST_ASSET_MAIN_LIST_API, {
id,
system_key,
system_value,
building_guid
building_guid,
});
return apihandler(res.code, res.data, {
@ -241,6 +247,9 @@ export const postDeviceItem = async ({
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,
@ -250,6 +259,9 @@ export const postDeviceItem = async ({
decimals,
is_bool,
is_link,
show_event_switch_btn,
event_switch_on_message,
event_switch_off_message,
});
return apihandler(res.code, res.data, {
@ -335,3 +347,15 @@ export const postAssetElecSetting = async (formData) => {
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/dashboard/api.js
View File

@ -11,3 +11,7 @@ export const GET_DASHBOARD_PRODUCT_HISTORY_API = `/SituationRoom/GetProductionHi
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`

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

@ -11,6 +11,8 @@ import {
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";
@ -176,3 +178,22 @@ export const getAlarmOperationInfo = async (building_guid) => {
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,
});
};

9
src/config/cn.json
View File

@ -400,9 +400,13 @@
"delete_success": "删除成功",
"delete_failed": "删除失败",
"mqtt_refresh": "重新设定成功",
"schema_name_required": "架构名称栏位必填"
"schema_name_required": "架构名称栏位必填",
"incorrect_format":"格式不正确",
"send_successfully":"送出成功",
"edit_successfully":"修改成功"
},
"setting": {
"electricity_meter": "电表",
"MQTT_parse": "MQTT 解析",
"schema": "架构",
"point": "点位",
@ -412,6 +416,9 @@
"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": "系统点位名称",

9
src/config/tw.json
View File

@ -400,9 +400,13 @@
"delete_success": "刪除成功",
"delete_failed": "刪除失敗",
"mqtt_refresh": "重新設定成功",
"schema_name_required": "架構名稱欄位必填"
"schema_name_required": "架構名稱欄位必填",
"incorrect_format":"格式不正確",
"send_successfully":"送出成功",
"edit_successfully":"修改成功"
},
"setting": {
"electricity_meter":"電表",
"MQTT_parse": "MQTT 解析",
"schema": "架構",
"point": "點位",
@ -412,6 +416,9 @@
"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": "系統點位名稱",

9
src/config/us.json
View File

@ -400,9 +400,13 @@
"delete_success": "Delete successfully",
"delete_failed": "Delete failed",
"mqtt_refresh": "MQTT reset successful",
"schema_name_required": "The schema name field is required"
"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",
@ -412,6 +416,9 @@
"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",

20
src/stores/useBuildingStore.js
View File

@ -2,6 +2,7 @@ import { defineStore } from "pinia";
import { ref, computed, watch } 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", () => {
@ -11,6 +12,9 @@ const useBuildingStore = defineStore("buildingInfo", () => {
const floorList = ref([]);
const deptList = ref([]);
const mainSubSys = ref([]);
// 控制顯示2D/3D切換與內容
const showForgeArea = ref(true);
const previewImageExt = ref("");
// 計算屬性
const mainSys = computed(() =>
@ -77,22 +81,29 @@ const useBuildingStore = defineStore("buildingInfo", () => {
})) || [];
};
// 獲取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))
localStorage.setItem("CviBuilding", JSON.stringify(newBuilding));
await Promise.all([
fetchFloorList(newBuilding.building_guid),
fetchDepartmentList(),
fetchDashboard2D3D(newBuilding.building_guid),
]);
}
});
@ -111,10 +122,13 @@ const useBuildingStore = defineStore("buildingInfo", () => {
mainSys,
subSys,
selectedSystem,
showForgeArea,
previewImageExt,
deleteBuilding,
fetchBuildings,
fetchFloorList,
fetchDepartmentList,
fetchDashboard2D3D,
initialize,
};
});

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

@ -1,6 +1,7 @@
<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";
@ -93,6 +94,28 @@ const onCancel = () => {
}
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>
@ -110,10 +133,10 @@ const onCancel = () => {
<Input :value="formState" name="topic">
<template #topLeft>MQTT publish topic</template>
</Input>
<Textarea :value="formState" name="notice" class="">
<template #topLeft>MQTT 傳送的訊息</template>
<Textarea :value="formState" name="publish_message">
<template #topLeft>MQTT messages</template>
</Textarea>
<button type="button" class="btn btn-add mt-6 w-24" @click="openModal">
<button type="button" class="btn btn-add mt-6 w-24" @click="onSubmit">
<font-awesome-icon :icon="['far', 'paper-plane']" />
Send
</button>

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

@ -17,13 +17,13 @@ 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",
});
// 控制顯示2D/3D切換與內容
const showForgeArea = ref(true);
const getEnergyCostData = async (params) => {
const res = await getEnergyCost(params);
@ -35,6 +35,7 @@ watch(
(newBuilding) => {
if (newBuilding) {
formState.value.building_guid = newBuilding.building_guid;
imgBaseUrl.value = `${FILE_BASEURL}/upload/setting/previewImage/${newBuilding.building_guid}${store.previewImageExt}`;
}
},
{ immediate: true, deep: true }
@ -68,22 +69,26 @@ watch(
{ immediate: true, deep: true }
);
onMounted(() => {
if (showForgeArea.value) {
setItems([
{
title: "2D",
key: "2D",
active: false,
},
{
title: "3D",
key: "3D",
active: 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);
@ -94,7 +99,7 @@ onUnmounted(() => {
<div class="flex flex-wrap items-center">
<!-- 建築圖 -->
<div class="w-full xl:w-1/3 relative">
<template v-if="showForgeArea">
<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 "
@ -104,7 +109,7 @@ onUnmounted(() => {
<!-- setting頁面要新增讓他能上傳圖片 -->
<img
alt="build"
src="/build_img.jpg"
:src="imgBaseUrl || '/build_img.jpg'"
:class="
twMerge(
'absolute w-full h-full transition-opacity duration-300',
@ -114,6 +119,7 @@ onUnmounted(() => {
)
"
/>
<Forge
:class="
twMerge(
@ -129,7 +135,7 @@ onUnmounted(() => {
<template v-else>
<img
alt="build"
src="/build_img.jpg"
:src="imgBaseUrl || '/build_img.jpg'"
class="area-img-box w-full h-[460px] block relative rounded-sm mt-3"
/>
</template>

2
src/views/setting/components/Demand.vue
View File

@ -113,7 +113,7 @@ watch(
<template>
<div class="flex justify-start items-center mt-10 mb-5">
<h3 class="text-xl mr-5">電表</h3>
<h3 class="text-xl mr-5">{{$t("setting.electricity_meter")}}</h3>
<button
v-if="!isEditing"
class="btn btn-sm btn-add mr-3"

7
src/views/setting/components/MQTTList.vue
View File

@ -95,6 +95,10 @@ const PointsColumns = computed(() => [
title: t("setting.hide_point"),
key: "is_link",
},
{
title: t("setting.hide_switch"),
key: "show_event_switch_btn",
},
{
title: t("assetManagement.operation"),
key: "operation",
@ -256,6 +260,9 @@ watch(
<template v-else-if="column.key === 'is_link'">
{{ record.is_link === 1 ? t("alert.yes") : t("alert.no") }}
</template>
<template v-else-if="column.key === 'show_event_switch_btn'">
{{ record.show_event_switch_btn === true ? t("alert.yes") : t("alert.no") }}
</template>
<template v-else-if="column.key === 'operation'">
<button
class="btn btn-sm btn-success text-white mr-2"

42
src/views/setting/components/PointListAddModal.vue
View File

@ -21,6 +21,9 @@ const formState = ref({
decimals: 0,
is_bool: 0,
is_link: 0,
show_event_switch_btn: false,
event_switch_on_message: "",
event_switch_off_message: "",
});
let schema = ref(
yup.object({
@ -42,10 +45,16 @@ const onOk = async () => {
decimals: Number(values.decimals),
is_bool: Number(values.is_bool),
is_link: Number(values.is_link),
event_switch_on_message: values.show_event_switch_btn
? values.event_switch_on_message
: "",
event_switch_off_message: values.show_event_switch_btn
? values.event_switch_off_message
: "",
});
if (res.isSuccess) {
props.getData(props.variable_id);
onCancel();
props.getData(props.variable_id);
} else {
openToast("error", res.msg, "#point_list_item");
}
@ -154,31 +163,40 @@ watch(
<RadioGroup
class="my-2"
name="is_link"
name="show_event_switch_btn"
:value="formState"
:items="[
{
key: 1,
value: 1,
title: '開啟',
value: true,
title: $t('alert.yes'),
},
{
key: 0,
value: 0,
title: '關閉',
value: false,
title: $t('alert.no'),
},
]"
:required="true"
>
<template #topLeft>switch 顯示</template>
<template #topLeft>{{ $t("setting.hide_switch") }}</template>
</RadioGroup>
<Textarea :value="formState" name="notice" class="w-full my-2">
<template #topLeft>switch 開啟時傳送的訊息</template>
<Textarea
v-if="formState.show_event_switch_btn"
:value="formState"
name="event_switch_on_message"
class="w-full my-2"
>
<template #topLeft>{{ $t("setting.switch_on_message") }}</template>
</Textarea>
<Textarea :value="formState" name="notice" class="w-full my-2">
<template #topLeft>switch 關閉時傳送的訊息</template>
<Textarea
v-if="formState.show_event_switch_btn"
:value="formState"
name="event_switch_off_message"
class="w-full my-2"
>
<template #topLeft>{{ $t("setting.switch_off_message") }}</template>
</Textarea>
</form>
</template>
<template #modalAction>

69
src/views/setting/components/ViewModeSetting.vue
View File

@ -1,16 +1,63 @@
<script setup>
import { onMounted, ref, inject, computed } from "vue";
import { useI18n } from "vue-i18n";
import { posttDashboard2D3D } from "@/apis/dashboard";
import useBuildingStore from "@/stores/useBuildingStore";
const { openToast, cancelToastOpen } = inject("app_toast");
const buildingStore = useBuildingStore();
const { t } = useI18n();
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
const form = ref(null);
const formState = ref({
lorf: [],
showForgeArea: buildingStore.showForgeArea,
lorf: buildingStore.previewImageExt
? [
{
src: `${FILE_BASEURL}/upload/setting/previewImage/${buildingStore.selectedBuilding.building_guid}${buildingStore.previewImageExt}`,
name: `${buildingStore.selectedBuilding.building_guid}`,
ext: `${buildingStore.previewImageExt}`,
},
]
: [],
});
const updateFileList = (files) => {
formState.value.lorf = files;
};
const onShowForgeAreaChange = (e) => {
formState.value.showForgeArea = e.target.checked;
};
const onOk = async () => {
const formData = new FormData();
formData.delete("file");
formData.append("buildingId", buildingStore.selectedBuilding.building_guid);
formData.append("is3DEnabled", formState.value.showForgeArea);
if (formState.value.lorf && formState.value.lorf.length > 0) {
formData.append("file", formState.value.lorf[0]);
}
const res = await posttDashboard2D3D(formData);
if (res.isSuccess) {
await buildingStore.fetchDashboard2D3D(
buildingStore.selectedBuilding.building_guid
);
openToast("success", t("msg.edit_successfully"));
// 更新本地狀態
formState.value.showForgeArea = buildingStore.showForgeArea;
formState.value.lorf = buildingStore.previewImageExt
? [ {
src: `${FILE_BASEURL}/upload/setting/previewImage/${buildingStore.selectedBuilding.building_guid}/${buildingStore.previewImageExt}`,
name: `${buildingStore.selectedBuilding.building_guid}`,
ext: `${buildingStore.previewImageExt}`,
},]
: [];
}else{
openToast("error", res.msg);
}
};
</script>
<template>
@ -18,24 +65,28 @@ const updateFileList = (files) => {
<h3 class="text-xl mr-5">2D / 3D 顯示設定 :</h3>
</div>
<div class="flex gap-5">
<span class="text-lg">3D 模型顯示 : </span
><input
<span class="text-lg">3D 模型顯示 : </span>
<input
type="checkbox"
className="toggle toggle-lg toggle-success"
defaultChecked
class="toggle toggle-lg toggle-success"
name="showForgeArea"
:checked="formState.showForgeArea"
@change="onShowForgeAreaChange"
/>
</div>
<Upload
class="my-2 max-w-[600px] w-full"
class="mt-2 mb-5 max-w-[600px] w-full"
name="oriFile"
:fileList="formState?.lorf"
:fileList="formState.lorf"
:getFileList="updateFileList"
:multiple="true"
:baseUrl="`${FILE_BASEURL}/upload/operation`"
:multiple="false"
formats="png、jpg"
>
<template #topLeft>首頁2D圖上傳 :</template>
</Upload>
<button type="submit" class="btn btn-outline-success" @click.prevent="onOk">
{{ $t("button.submit") }}
</button>
</template>
<style lang="css" scoped></style>

8
src/views/system/System.vue
View File

@ -16,6 +16,7 @@ import SystemFloor from "./SystemFloor.vue";
import { twMerge } from "tailwind-merge";
import dayjs from "dayjs";
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
const buildingStore = useBuildingStore();
const statusList = computed(() => {
@ -41,7 +42,7 @@ const floors = ref([]);
const deptData = ref([]);
const companyOptions = ref([]);
const selected_dbid = ref([]);
const showForgeArea = ref(true); // 控制2D/3D切換與內容顯示
const imgBaseUrl = ref('');
const getFloors = async () => {
const res = await getAssetFloorList();
@ -129,6 +130,7 @@ watch(
(newBuilding) => {
if (Boolean(newBuilding)) {
getData();
imgBaseUrl.value = `${FILE_BASEURL}/upload/setting/previewImage/${newBuilding.building_guid}${buildingStore.previewImageExt}`;
}
},
{
@ -327,7 +329,7 @@ onBeforeUnmount(() => {
</div>
</div>
<div class="col-span-1 h-full flex flex-col justify-between">
<template v-if="showForgeArea">
<template v-if="buildingStore.showForgeArea">
<SystemMode />
<div class="h-full relative">
<SystemFloor
@ -354,7 +356,7 @@ onBeforeUnmount(() => {
<div class="h-full relative">
<img
alt="build"
src="/build_img.jpg"
:src="imgBaseUrl || '/build_img.jpg'"
:class="
twMerge(
'absolute w-full h-full transition-opacity duration-300',