<script setup>
|
// import HdwBox from "@/components/HdwBox.vue";
|
import StateInfo from "@/views/home/StateInfo.vue";
|
import ParamsContent from "@/views/home/paramsContent.vue";
|
import { ref, watchEffect, onMounted, computed } from "vue";
|
import useWebSocket from "@/hooks/useWebSocket.js";
|
import useElement from "@/hooks/useElement.js";
|
import {
|
controllPowerOpen,
|
controllPowerClose,
|
controllClearAlm,
|
} from "@/api/params";
|
const { sendData, message } = useWebSocket("powerSocket");
|
const { $alert, $loading, $message, $confirm } = useElement();
|
const rtData = ref([]);
|
const paramsVisible = ref(false);
|
const currentIdx = ref(0);
|
|
watchEffect(() => {
|
let _list = [];
|
if (message.value) {
|
const { code, data, data2 } = JSON.parse(message.value);
|
if (code && data) {
|
_list = data2;
|
}
|
}
|
rtData.value = _list;
|
});
|
|
const title = computed(() => {
|
return `设置 模块${currentIdx.value + 1} 参数`;
|
});
|
|
function showParams(idx) {
|
currentIdx.value = idx;
|
paramsVisible.value = true;
|
}
|
function start(idx) {
|
let loading = $loading();
|
controllPowerOpen(rtData.value[idx].state.powerId)
|
.then((res) => {
|
let { code, data } = res.data;
|
loading.close();
|
if (code && data) {
|
$message.success("操作成功");
|
} else {
|
$message.error("操作失败");
|
}
|
})
|
.catch((err) => {
|
$message.error("操作失败");
|
loading.close();
|
console.log(err);
|
});
|
}
|
function stop(idx) {
|
let loading = $loading();
|
controllPowerClose(rtData.value[idx].state.powerId)
|
.then((res) => {
|
let { code, data } = res.data;
|
loading.close();
|
if (code && data) {
|
$message.success("操作成功");
|
} else {
|
$message.error("操作失败");
|
}
|
})
|
.catch((err) => {
|
$message.error("操作失败");
|
loading.close();
|
console.log(err);
|
});
|
}
|
function clearAlarm(idx) {
|
let loading = $loading();
|
controllClearAlm(rtData.value[idx].state.powerId)
|
.then((res) => {
|
let { code, data } = res.data;
|
loading.close();
|
if (code && data) {
|
$message.success("操作成功");
|
} else {
|
$message.error("操作失败");
|
}
|
})
|
.catch((err) => {
|
$message.error("操作失败");
|
loading.close();
|
console.log(err);
|
});
|
}
|
|
onMounted(() => {
|
sendData("");
|
});
|
</script>
|
|
<template>
|
<div class="home-view-wrapper">
|
<div class="home-item" v-for="(item, idx) in 8" :key="'item_' + idx">
|
<state-info
|
:info="rtData[idx] || {}"
|
@clearAlarm="clearAlarm(idx)"
|
@editParams="showParams(idx)"
|
@start="start(idx)"
|
@stop="stop(idx)"
|
></state-info>
|
</div>
|
</div>
|
<!-- 弹窗 -->
|
<el-dialog
|
:title="title"
|
v-model="paramsVisible"
|
:close-on-click-modal="false"
|
class="dialog-center"
|
width="360px"
|
center
|
>
|
<params-content
|
v-model="paramsVisible"
|
v-if="paramsVisible"
|
:info="rtData[currentIdx]"
|
@setOk="sendData('')"
|
></params-content>
|
</el-dialog>
|
</template>
|
|
<style scoped lang="scss">
|
.home-view-wrapper {
|
display: flex;
|
flex-wrap: wrap;
|
height: 100%;
|
flex-direction: row;
|
.home-item {
|
padding: 4px;
|
width: 25%;
|
height: 50%;
|
}
|
}
|
</style>
|
