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

<template>
  <div class="globalBox">
    <div class="setBox">
      <termsAdd></termsAdd>
      <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="关闭"
            @change="showLine"
          >
          </el-switch>
        </div>
      </el-card>
      <el-card class="box-card globalDrawLine">
        <div slot="header" class="clearfix">
          <span>设置告警通道</span>
        </div>
        <div>
          <el-select v-model="channel" @change="handleChange">
            <el-option
              v-for="item in tdOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </el-card>
      <el-card class="box-card globalprob">
        <div slot="header" class="clearfix">
          <span>设置告警可信度</span>
        </div>
        <div class="warnBox">
          <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>
        </div>
        <el-button class="setbtn" type="primary" @click="setProb"
          >设置</el-button
        >
      </el-card>
    </div>
  </div>
</template>
<script>
import {
  getAlarmTypeList,
  updateAlarmTypeList,
  getMarkEnableStatus,
  updateMarkEnableStatus,
  updateAlarmChannel,
} from "@/utils/api/index";
import termsAdd from "./components/termsAdd";
export default {
  name: "globalTools",
  components: { termsAdd },
  data() {
    return {
      lineValue: false,
      lineNum: 0,
      probList: [],
      tdOptions: [{ id: -1, name: "全部", alias: null }], //通道数据
      channel: "",
    };
  },
  created() {
    this.getalarmList();
    this.getmark();
  },
  methods: {
    //获取图片绘制状态
    getmark() {
      getMarkEnableStatus()
        .then((res) => {
          console.log(res);
          if (res.data.imgMark === 1) {
            this.lineValue = true;
            console.log("绘制开启");
          } else {
            this.lineValue = false;
            console.log("绘制关闭");
          }
          this.channel = res.data.alarmChannel;
          console.log(this.channel);
        })
        .catch((err) => {});
    },
    //控制线缆绘制开关
    showLine(val) {
      if (val) {
        this.lineNum = 1;
      } else {
        this.lineNum = 0;
      }
      updateMarkEnableStatus({
        status: this.lineNum,
      })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {});
      console.log(val, this.lineNum, "开关");
    },
    //获取装置可信度值
    getalarmList() {
      getAlarmTypeList().then((res) => {
        console.log(res);
        this.probList = res.data.list;
        this.tdOptions = [{ id: -1, name: "全部", alias: null }];
        this.tdOptions = this.tdOptions.concat(res.data.channellist);
      });
    },
    setProb() {
      console.log(this.probList);
      updateAlarmTypeList({ list: this.probList })
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.$message({
              duration: 1500,
              showClose: true,
              message: "告警可信度设置成功",
              type: "success",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取告警通道
    handleChange(val) {
      console.log(val);
      updateAlarmChannel({ channel: this.channel })
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.$message({
              duration: 1500,
              showClose: true,
              message: "告警通道设置成功",
              type: "success",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="less">
.globalBox {
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  padding: 12px 12px;
  background: #fff;
  .setBox {
    border: 1px solid #dddddd;
    height: calc(100% - 24px);
    padding: 12px;
    border-radius: 4px;
    display: flex;

    .globalDrawLine {
      width: 200px;
      height: max-content;
      margin-right: 24px;
    }
    .globalprob {
      width: 378px;
      height: calc(100% - 60px);

      display: flex;
      flex-direction: column;
      .el-card__body {
        display: flex;
        flex-direction: column;
        height: calc(100% - 98px);
        .warnBox {
          height: calc(100% - 80px);
          overflow: auto;
        }
        .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>