frontend/src/views/system/globalTools/index.vue

<template>
  <div class="globalBox">
    <div class="setBox">
      <!-- <el-card class="box-card globalDrawLine">
        <div slot="header" class="clearfix">
          <span>线缆开启关闭</span>
        </div>
        <div>
          <el-switch
            style="display: block"
            v-model="lineValue"
            active-text="开启"
            inactive-text="关闭"
          >
          </el-switch>
        </div>
      </el-card> -->
      <el-card class="box-card globalprob">
        <div slot="header" class="clearfix">
          <span>设置告警可信度</span>
        </div>
        <div v-for="(item, index) in probList" :key="index" class="probBox">
          <label>{{ item.name }}</label>
          <el-input-number
            :min="0"
            :max="110"
            controls-position="right"
            v-model="item.prob"
            placeholder="请输入可信度值"
          ></el-input-number>
        </div>
        <el-button class="setbtn" type="primary" @click="setProb" disabled
          >设置</el-button
        >
      </el-card>
    </div>
  </div>
</template>
<script>
import { getAlarmTypeList, updateAlarmTypeList } from "@/utils/api/index";

export default {
  components: {},
  data() {
    return {
      lineValue: true,
      probList: [],
    };
  },
  created() {
    this.getalarmList();
  },
  methods: {
    getalarmList() {
      getAlarmTypeList().then((res) => {
        console.log(res);
        this.probList = res.data.list;
      });
    },
    setProb() {
      console.log(this.probList);
      updateAlarmTypeList({ list: this.probList })
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.$message({
              showClose: true,
              message: "告警可信度设置成功",
              type: "success",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="less">
.globalBox {
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  padding: 16px 16px;
  background: #fff;
  .setBox {
    border: 1px solid #dddddd;
    height: calc(100% - 32px);
    padding: 16px;
    border-radius: 4px;
    display: flex;
    .globalDrawLine {
      width: 200px;
      height: max-content;
      margin-right: 24px;
    }
    .globalprob {
      width: 378px;
      height: max-content;
      display: flex;
      flex-direction: column;
      .el-card__body {
        display: flex;
        flex-direction: column;
        .probBox {
          display: flex;
          height: 40px;
          line-height: 40px;
          align-items: center;
          label {
            width: 138px;
          }
          .el-input-number--small {
            width: 200px;
          }
          .el-input {
            width: 200px;
          }
        }
        .setbtn {
          margin-top: 24px;
          margin-left: auto;
        }
      }
    }
  }
}
</style>