alertGuardian-JinNeng/src/pages/systemManage/systemManage.vue

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>报警配置</span>
      </div>
    </template>
    <el-tabs type="border-card" v-model="activeTab">
      <el-tab-pane
        v-for="(item, index) in alarmConfigArray"
        :key="index"
        :name="item.id"
      >
        <template #label>
          <div class="alartPaneLabel">
            <span>{{ item.alarmLevel }}级报警</span>
            <div class="alartBadge" :class="getAlartStatus(item)"></div>
          </div>
        </template>
        <el-form label-width="120px">
          <el-form-item label="报警弹窗:">
            <el-switch
              v-model="item.isAlart"
              active-text="弹出"
              inactive-text="不弹出"
            />
          </el-form-item>
          <el-form-item label="播放声音:">
            <el-switch
              v-model="item.isAlarmSound"
              active-text="播放"
              inactive-text="不播放"
            />
          </el-form-item>
          <el-form-item label="必须确认:">
            <el-switch
              v-model="item.isContinuousAlarm"
              active-text="是"
              inactive-text="否"
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div class="btnBox">
      <el-button type="primary" @click="save">保存规则</el-button>
    </div>
  </el-card>
</template>
<script>
import { getAlartConfig, saveAlartConfig } from "@api/api.js";
export default {
  data() {
    return {
      activeTab: "",
      alarmConfigArray: [],
    };
  },

  created() {
    this.getConfigArray();
  },
  methods: {
    getConfigArray() {
      this.alarmConfigArray = [];
      getAlartConfig().then((res) => {
        res.data.forEach((ele) => {
          for (let key in ele) {
            if (
              this.BASE.getType(ele[key]) === "number" &&
              key !== "alarmLevel"
            ) {
              ele[key] = !!ele[key];
            }
          }
        });
        this.alarmConfigArray = res.data;
        this.activeTab = this.activeTab || res?.data?.[0]?.id;
      });
    },
    getAlartStatus(alartItem) {
      if (
        alartItem.isAlart ||
        alartItem.isAlarmSound ||
        alartItem.isContinuousAlarm
      ) {
        return "badgeWork";
      } else {
        return "badgeNotworK";
      }
    },

    save() {
      let configArray = this.BASE.deepCopy(this.alarmConfigArray);
      let promiseArray = [];
      configArray.forEach((ele) => {
        for (let key in ele) {
          if (ele[key] == true) {
            ele[key] = 1;
          } else if (ele[key] == false) {
            ele[key] = 0;
          }
        }
        promiseArray.push(saveAlartConfig(ele));
      });

      Promise.all(promiseArray).then(() => {
        this.BASE.showMsg({
          type: "success",
          msg: "修改成功",
        });
        this.$store.commit("changeAlarmResetFlg");
        this.getConfigArray();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.alartPaneLabel {
  position: relative;
  .alartBadge {
    position: absolute;
    right: -10px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    overflow: hidden;
  }
}

.badgeWork {
  background: var(--el-color-success);
}
.badgeNotworK {
  background: var(--el-color-error);
}

.btnBox {
  margin-top: 12px;
}
</style>