jn_sis_zhfx/src/components/alarm-badge/alarm-setting.vue

<template>
  <div class="setting-dialog">
    <div class="setting-wrapper">
      <div class="box-title">
        <div class="box-name">报警配置</div>
        <div class="box-close" @click="cancle">
          <img src="@assets/imgs/warn-close.png" />
        </div>
      </div>
      <div class="box-content">
        <el-tabs type="border-card" v-model="activeTab">
          <el-tab-pane
            v-for="(item, index) in configArray"
            :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="btnBox">
          <el-button @click="save">保存配置</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { confirmAlart } from "@/api/zhbj/index.js";
import SvgIcon from "@com/coms/icon/svg-icon.vue";
import dayjs from "dayjs";

export default {
  name: "alarmSetting", //首页标题栏
  props: {
    alarmConfigArray: {
      type: Array,
      required: true,
    },
    dialogList: {
      type: Array,
    },
  },
  components: { SvgIcon },
  data() {
    return {
      displaySetting: false,
      activeTab: "",
      configArray: [],
    };
  },

  created() {
    this.activeTab = this.activeTab || this.alarmConfigArray?.[0]?.id;
  },
  mounted() {},
  computed: {},
  watch: {
    alarmConfigArray: {
      handler(val) {
        if (val.length) {
          this.configArray = JSON.parse(JSON.stringify(val));
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    cancle() {
      this.configArray = this.alarmConfigArray;
      this.$emit("cancleConfig");
    },
    save() {
      localStorage.setItem(
        "alarmConfigArray",
        JSON.stringify(this.configArray)
      );
      this.$emit("saveConfig");
      this.BASE.showMsg({
        type: "success",
        msg: "修改成功",
      });
      this.$emit("cancleConfig");
    },
    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 "高级";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.setting-dialog {
  position: absolute;
  right: -12px;
  bottom: -6px;
  z-index: 1001;
  width: 540px;
  height: 510px;
  .setting-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background: #000;
    background: url("~@/assets/imgs/warn-border.png") no-repeat;
    background-size: 100% 100%;
    .box-title {
      width: 100%;
      height: 60px;
      padding: 0 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: url("~@/assets/imgs/warn-top.png") no-repeat;
      background-size: 100% 100%;
      .warn-close {
        cursor: pointer;
      }
    }
    .box-content {
      height: calc(100% - 60px);
      padding: 0 10px;
      .btnBox {
        .el-button ::v-deep {
          width: 100px;
          background: url("~@/assets/imgs/confirmone.png") no-repeat;
          background-size: 100% 100%;
          height: 37px;
          border-radius: 5px;
          border-width: 0;
          color: #b6afaf;
          font-size: 16px;
          margin-top: 10px;
          opacity: 0.8;
          &:hover,
          &:focus {
            color: #fff;
            opacity: 1;
            background-color: transparent;
            border-width: 0;
          }
          &.cancle {
            background: #ccc;
            color: #3a3838;
            &:hover,
            &:focus {
              color: #000;
            }
          }
        }
      }
    }
  }
}
.el-tabs ::v-deep {
  height: calc(100% - 80px);
  &.el-tabs--border-card {
    background: transparent !important;
    border-color: transparent !important;
  }
  &.el-tabs--border-card > .el-tabs__header {
    background: transparent !important;
    border-color: transparent !important;
  }

  &.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active,
  &.el-tabs--border-card > .el-tabs__header .el-tabs__item:hover {
    color: #fd7f00 !important;
    background: transparent !important;
    border-right-color: transparent !important;
    border-left-color: transparent !important;
  }
}
.el-form::v-deep {
  .el-form-item__label {
    color: #ccc;
  }
}
.el-switch::v-deep {
  &.is-checked .el-switch__core {
    border-color: #fd7f00;
    background-color: #fd7f00;
  }
  .el-switch__label {
    color: #ccc;
    &.is-active {
      color: #fd7f00;
    }
  }
}
</style>