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>{{ getAlartLevelName(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="alarmNumBox">
      <span>报警气泡列数上限：</span>
      <el-input-number
        style="margin: 0 10px"
        size="small"
        v-model="columnNumber"
        :step="1"
        :min="columnNumberMin"
        :max="columnNumberMax"
      />
      <span>列</span>
    </div>
    <div class="alarmNumBox">
      <span>报警气泡每列至多显示数量：</span>
      <el-input-number
        style="margin: 0 10px"
        size="small"
        v-model="alarmShowNumber"
        :step="1"
        :min="alarmMinNumber"
        :max="alarmMaxNumber"
      />
      <span>个</span>
    </div>
    <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: [],
      columnNumber: 1,
      columnNumberMin: 1,
      columnNumberMax: 5,
      alarmShowNumber: 0,
      alarmMinNumber: 0,
      alarmMaxNumber: 7,
    };
  },

  created() {
    this.alarmShowNumber = this.$store.state.alarmShowNumber;
    this.columnNumber = this.$store.state.columnNumber;

    if (localStorage.getItem("alarmConfigArray")) {
      this.alarmConfigArray = JSON.parse(
        localStorage.getItem("alarmConfigArray")
      );
    } else {
      this.alarmConfigArray = [
        {
          id: "1",
          alarmLevel: 1,
          isAlart: false,
          isAlarmSound: false,
          isContinuousAlarm: false,
        },
        {
          id: "2",
          alarmLevel: 2,
          isAlart: false,
          isAlarmSound: false,
          isContinuousAlarm: false,
        },
        {
          id: "3",
          alarmLevel: 3,
          isAlart: true,
          isAlarmSound: false,
          isContinuousAlarm: false,
        },
        {
          id: "4",
          alarmLevel: 4,
          isAlart: true,
          isAlarmSound: true,
          isContinuousAlarm: false,
        },
        {
          id: "5",
          alarmLevel: 5,
          isAlart: true,
          isAlarmSound: true,
          isContinuousAlarm: true,
        },
      ];
      localStorage.setItem(
        "alarmConfigArray",
        JSON.stringify(this.alarmConfigArray)
      );
    }

    this.activeTab = this.activeTab || this.alarmConfigArray?.[0]?.id;

    // 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";
      }
    },

    getAlartLevelName(lv) {
      if (lv === 1) {
        return "低级";
      } else if (lv === 2) {
        return "低中级";
      } else if (lv === 3) {
        return "中级";
      } else if (lv === 4) {
        return "中高级";
      } else if (lv === 5) {
        return "高级级";
      }
    },

    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.$store.commit("changeAlarmShowNumber", this.alarmShowNumber);
      //   this.$store.commit("changeColumnNumber", this.columnNumber);
      //   localStorage.setItem("alarmShowNumber", this.alarmShowNumber);
      //   localStorage.setItem("columnNumber", this.columnNumber);
      //   this.getConfigArray();
      // });

      this.$store.commit("changeAlarmResetFlg");
      this.$store.commit("changeAlarmShowNumber", this.alarmShowNumber);
      this.$store.commit("changeColumnNumber", this.columnNumber);
      localStorage.setItem("alarmShowNumber", this.alarmShowNumber);
      localStorage.setItem("columnNumber", this.columnNumber);
      localStorage.setItem(
        "alarmConfigArray",
        JSON.stringify(this.alarmConfigArray)
      );

      this.BASE.showMsg({
        type: "success",
        msg: "修改成功",
      });
    },
  },

  watch: {
    "$store.state.alarmShowNumber"(value) {
      this.alarmShowNumber = value;
    },
    "$store.state.columnNumber"(value) {
      this.columnNumber = value;
    },
  },
};
</script>
<style lang="scss" scoped>
.alartPaneLabel {
  position: relative;
  .alartBadge {
    position: absolute;
    right: -10px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    overflow: hidden;
  }
}

.alarmNumBox {
  width: calc(100% - 30px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: var(--el-text-color-regular);
  font-size: var(--el-form-label-font-size);
  margin: 12px 0;
  padding: 0 15px;
}

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