eemcs_ui/src/views/centerairC/sysControl/listHeader.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" v-if="!isNoShowlocalRemote">本地远程状态</div>
      <div class="device-name">故障报警</div>
      <div class="device-name" v-if="!isNoShowHz">频率调节</div>
      <div class="device-name" v-if="!isNoShowHz">频率反馈</div>
      <div class="device-name">运行时间</div>
    </div>
    <div class="device-li" v-for="(item, index) in deviceList" :key="index">
      <div class="device-name">{{ item.name }}</div>
      <div class="device-name">
        <div class="run" :class="item.runStatus === '运行' ? 'run' : 'no-run'">
          {{ item.runStatus }}
        </div>
      </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" v-if="!isNoShowlocalRemote">
        <span
          :class="
            item.localRemote === '远程' ? 'strong-electric' : 'auto-electric'
          "
          >{{ item.localRemote }}</span
        >
      </div>
      <div class="device-name">
        <div :class="item.warnText === '故障' ? 'bad-status' : 'good-status'">
          {{ item.warnText }}
        </div>
      </div>
      <!-- 频率调节 -->
      <div class="device-name" v-if="!isNoShowHz">
        <el-input
          v-if="item.frequencySet !== null && item.frequencySet !== undefined"
          v-model="item.frequencySet"
          size="mini"
          @keyup.enter.native="handleEnter(item, $event)"
          @input="handleInput(item)"
          @blur="handleBlur()"
          :disabled="!item.automaticText"
        ></el-input>
        <div class="device-name" v-else></div>
      </div>
      <!-- 频率反馈 -->
      <template v-if="!isNoShowHz">
        <div class="device-name" v-if="item.frequency">
          {{ item.frequency }}Hz
        </div>
        <div class="device-name" v-else></div>
      </template>
      <div class="device-name">{{ item.time }}小时</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    deviceList: {
      type: Array,
      default: () => [],
    },
    isNoShowHz: {
      type: Boolean,
      default: () => false,
    },
    isNoShowlocalRemote: {
      type: Boolean,
      default: () => false,
    },
  },
  methods: {
    // 处理输入事件，过滤非数字字符
    handleInput(item) {
      console.log("校验");
      // 实时校验并过滤非数字字符
      item.frequencySet = String(item.frequencySet).replace(/[^\d]/g, "");
    },
    // 失去焦点
    handleBlur() {
      // this.currentFocusIndex = "";
    },
    handleEnter(item, event) {
      console.log("请求后端");
      // 失去焦点
      event.target.blur();
      this.$confirm(
        `确定要修改"${item.name}"的频率为:${item.frequencySet} Hz吗?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // 触发自定义事件 operationControl，并传递两个参数
          this.$emit("operationControl", item.frequencyId, item.frequencySet);
        })
        .catch(() => {
          // 用户取消操作，需要更新原来的频率
          this.$emit("upList");
        });
    },
    //手动控制
    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;
          }
          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;
          }
          this.$emit("operationControl", item.automaticId, param);
        })
        .catch(() => {
          // 用户取消操作，恢复开关状态
          item.automaticText = !item.automaticText;
          console.log("不请求后台");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.device-li {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 0;
  color: #abcdfc;
  border-bottom: 1px dashed #0349ac;
  .device-name {
    flex: 1;
    white-space: nowrap;
    .el-switch {
      width: 120px !important;
    }
    .run {
      display: flex;
      flex-direction: row;
      align-items: center;
      display: block;
    }
    .run::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: rgb(16, 231, 16);
      border-radius: 50%;
      margin-right: 5px;
    }
    .no-run {
      display: flex;
      flex-direction: row;
      align-items: center;
      display: block;
    }
    .no-run::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: rgb(180, 180, 180);
      border-radius: 50%;
      margin-right: 5px;
    }
    .el-input {
      width: 100px;
    }
    .strong-electric {
      background-color: rgba(59, 130, 246, 0.2);
      color: #60a5fa;
      padding: 5px 20px;
      border-radius: 10px;
    }
    .auto-electric {
      background-color: rgba(231, 144, 45, 0.2);
      color: #e47f21;
      padding: 5px 20px;
      border-radius: 10px;
    }
    .good-status {
      color: #4ade80;
    }
    .bad-status {
      color: #f05348;
    }
  }
}
.device-li:nth-child(1) {
  color: #9ca3af;
}
</style>