eemcs_ui/src/views/centerairC/sysControl/vavleheader.vue

<template>
  <div>
    <div class="device-li">
      <div class="device-name">设备名称</div>
      <div class="device-name">手自动切换</div>
      <div class="device-name">手动控制</div>
      <div class="device-name">阀开反馈</div>
      <div class="device-name">阀关反馈</div>
    </div>
    <div class="device-li" v-for="(item, index) in valveList" :key="index">
      <div class="device-name">{{ item.name }}</div>
      <div class="device-name">
        <el-switch
          style="display: block"
          v-model="item.automaticText"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="手动"
          inactive-text="自动"
          @change="handleAutomaticText(item)"
        >
        </el-switch>
      </div>
      <div class="device-name">
        <el-switch
          style="display: block"
          v-model="item.controlText"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="开启"
          inactive-text="停止"
          @change="handleControlText(item)"
        >
        </el-switch>
      </div>
      <div class="device-name">
        <div :class="item.openStauts === '关闭' ? 'bad-status' : 'good-status'">
          {{ item.openStauts }}
        </div>
      </div>
      <div class="device-name">
        <div
          :class="item.closeStatus === '关闭' ? 'bad-status' : 'good-status'"
        >
          {{ item.closeStatus }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    valveList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    //手动控制
    handleControlText(item) {
      this.$confirm(
        `确定要切换设备"${item.name}"的状态为:${
          item.controlText ? "开启" : "停止 吗?"
        }`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // 这里调用请求函数
          console.log("请求后台", item.controlText);
          let param = null;
          if (item.controlText) {
            param = 1;
          } else {
            param = 0;
          }
          // 触发自定义事件 operationControl，并传递两个参数
          this.$emit("operationControl", item.controlId, param);
        })
        .catch(() => {
          // 用户取消操作，恢复开关状态
          item.controlText = !item.controlText;
          console.log("不请求后台");
        });
    },
    // 手自动切换
    handleAutomaticText(item) {
      this.$confirm(
        `确定要切换设备"${item.name}"的状态为:${
          item.automaticText ? "手动" : "自动 吗?"
        }`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // 这里调用请求函数
          console.log("请求后台", item.automaticText);
          let param = null;
          if (item.automaticText) {
            param = 1;
          } else {
            param = 0;
          }
          // 触发自定义事件 operationControl，并传递两个参数
          this.$emit("operationControl", item.automaticId, param);
        })
        .catch(() => {
          // 用户取消操作，恢复开关状态
          item.automaticText = !item.automaticText;
          console.log("不请求后台");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>