U 提交

he wei

2025-01-13 8ffb54b88e3907ea59c120d34a8cd9f486cc1151

 src/views/home/index.vue

@@ -1,49 +1,128 @@
<script>
import HdwBox from "@/components/HdwBox.vue";
<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);

export default {
  name: "HomeView",
  components: {StateInfo, HdwBox},
  data() {
    return {}
  },
  methods: {

  },
  mounted() {

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">
      <state-info></state-info>
    </div>
    <div class="home-item">
      <state-info></state-info>
    </div>
    <div class="home-item">
      <state-info></state-info>
    </div>
    <div class="home-item">
      <state-info></state-info>
    </div>
    <div class="home-item">
      <state-info></state-info>
    </div>
    <div class="home-item">
      <state-info></state-info>
    </div>
    <div class="home-item">
      <state-info></state-info>
    </div>
    <div class="home-item">
      <state-info></state-info>
    <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">