108 lines
3.0 KiB
Vue
108 lines
3.0 KiB
Vue
<script setup>
|
|
import { ref, computed, inject, watch } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import { toggleDevicePower } from "@/apis/system";
|
|
import dayjs from "dayjs";
|
|
const { openToast } = inject("app_toast");
|
|
const { t } = useI18n();
|
|
const { selectedDevice, selectedDeviceRealtime } = inject(
|
|
"system_selectedDevice"
|
|
);
|
|
|
|
const groupedData = computed(() => {
|
|
const grouped = {};
|
|
|
|
if (selectedDeviceRealtime?.value) {
|
|
selectedDeviceRealtime.value.forEach((record) => {
|
|
const { ori_device_number, time, topic_publish } = record;
|
|
|
|
if (!grouped[ori_device_number]) {
|
|
grouped[ori_device_number] = {
|
|
time,
|
|
data: [],
|
|
};
|
|
}
|
|
|
|
selectedDevice.value.value.points.forEach((d) => {
|
|
if (record.point === d.points) {
|
|
grouped[ori_device_number].data.push({
|
|
...d,
|
|
device_item_id: record.device_item_id,
|
|
topic_publish: record.topic_publish,
|
|
value: record.value,
|
|
});
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
return grouped;
|
|
});
|
|
|
|
const togglePowerSwitch = async (e, device_item_id, topic_publish) => {
|
|
const isChecked = e.target.checked;
|
|
const res = await toggleDevicePower({
|
|
device_item_id,
|
|
topic_publish,
|
|
new_value: isChecked,
|
|
});
|
|
|
|
if (res.isSuccess) {
|
|
openToast("success", t("msg.edit_successfully"), "#system_info_modal");
|
|
} else {
|
|
openToast("error", res.msg, "#system_info_modal");
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="selectedDeviceRealtime">
|
|
<div v-for="(group, oriDeviceNumber) in groupedData" :key="oriDeviceNumber">
|
|
<p class="mt-5 text-info">
|
|
{{ $t("operation.updated_time") }} : {{ group.time }}
|
|
</p>
|
|
<table class="table mt-2">
|
|
<thead>
|
|
<tr>
|
|
<th
|
|
class="border text-white text-lg text-center bg-cyan-600 bg-opacity-30"
|
|
>
|
|
{{ $t("system.attribute") }}
|
|
</th>
|
|
<th
|
|
class="border text-white text-lg text-center bg-cyan-600 bg-opacity-30"
|
|
>
|
|
{{ $t("system.value") }}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(items, index) in group.data" :key="index">
|
|
<td class="border text-white text-lg text-center">
|
|
{{ items.full_name }}
|
|
</td>
|
|
<td class="border text-white text-lg text-center">
|
|
<template v-if="items.full_name === 'Power Switch'">
|
|
<input
|
|
type="checkbox"
|
|
class="toggle toggle-success"
|
|
:checked="items.value"
|
|
@change="
|
|
togglePowerSwitch($event, items.device_item_id, items.topic_publish)
|
|
"
|
|
/>
|
|
</template>
|
|
<template v-else>
|
|
{{ items.value }}
|
|
</template>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<p class="text-2xl text-center my-6" v-else>{{ $t("table.no_data") }}</p>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|