soc_web/src/views/warnRule/relevanceDialog.vue

<template>
  <div>
    <DialogCom :title="title" :visible.sync="isShow" width="60%">
      <el-descriptions border :column="2" size="small" style="width: 60%">
        <el-descriptions-item label="规则名称">{{ data.ruleName }}</el-descriptions-item>
        <el-descriptions-item label="规则描述">{{ data.ruleRemark }}</el-descriptions-item>
      </el-descriptions>
      <el-form ref="queryForm" size="small" :inline="true">
        <div>
          <!--        <div class="disDiv">
                    <el-form-item label="名称" >{{data.ruleName}}</el-form-item>
                    <el-form-item label="描述" prop="taskName" > {{data.ruleRemark}} </el-form-item>
                  </div>-->
          <!--        <div class="disDiv">
                    <el-form-item label="启动" prop="taskName">
                      <el-switch v-model="data.enable"> </el-switch>
                    </el-form-item>
                  </div>-->
        </div>
        <el-tabs type="border-card"
                 v-if="data.typeDataList.length > 0"
                 class="tabs"
                 v-model="selectedTab"
                 @tab-click="handleTabClick"
        >
          <el-tab-pane

            v-for="(entity) in data.typeDataList"
            :name="`${entity.type}`"
            :key="entity.type"
            :label="entity.typeText"
          >
          </el-tab-pane>
          <relevanceDialogCom :deviceData="currentTypeData" @updateDeviceData="updateDeviceData"></relevanceDialogCom>
        </el-tabs>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">关闭</el-button>
        <el-button type="primary" @click="submitData">确定</el-button>
    </span>
    </DialogCom>
  </div>
</template>
<script>
import relevanceDialogCom from "@/views/warnRule/relevanceDialogCom.vue";
import {alarmDeviceDetail, saveDevice} from "@/api/iot/alarmRule";

const defaultDetail = {
  ruleId: 0,
  ruleName: "",
  enable: 0,
  ruleType: "",
  ruleRemark: "",
  typeDataList: [],
};
export default {
  name: "SocWebRelevanceDialog",
  components: {
    relevanceDialogCom,
  },
  data() {
    return {
      title: "告警规则关联设备",
      isShow: false,
      selectedTab: "",
      currentTypeData: {
        deviceTempList: [],
        type: -1,
        typeText: "",
      },
      data: defaultDetail,
      queryParams: {},
    };
  },
  mounted() {
  },

  methods: {
    show(ruleId) {
      this.isShow = true;
      this.init(ruleId);
    },
    init(ruleId) {
      this.queryParams.ruleId = ruleId;
      alarmDeviceDetail(this.queryParams)
        .then((response) => {
          this.data = response.data;
          if (this.data.typeDataList.length > 0) {
            setTimeout(() => {
              this.selectedTab = String(this.data.typeDataList[0].type);
              this.currentTypeData = this.data.typeDataList[0];
            }, 200);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleTabClick() {
      this.currentTypeData = this.data.typeDataList.find(
        (t) => t.type == this.selectedTab
      );
    },
    updateDeviceData(rel) {
      this.data.typeDataList.forEach((obj, index) => {
        if (obj.type === rel.type) {
          obj.deviceTempList = rel.deviceTempList;
          obj.isAllDeviceEnable = rel.isAllDeviceEnable;
          obj.valueType = rel.valueType;
        }
      });
    },
    submitData() {
      saveDevice(this.data)
        .then((response) => {
          this.$message('保存成功！');
          this.isShow = false;
          this.$emit("success");
        })
        .catch(() => {
          this.loading = false;
        });
    },
    closed() {
      this.data = defaultDetail;
    },

  },
};
</script>
<style lang="scss" scoped>
.disDiv {
  display: flex;
  justify-content: space-between;
}

.dialog-footer {
  float: right;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 17px;
}

/* 鼠标选中时样式 */
::v-deep .el-tabs__item.is-active {
  opacity: 1;
  font-size: 16px;
  font-weight: bold;
  color: white !important;
  font-family:  Arial, sans-serif;
}
/* 鼠标悬浮时样式 */
::v-deep .el-tabs__item:hover {
  cursor: pointer;
  opacity: 1;
  font-size: 16px;
  font-weight: bold;
  color: white !important;
  font-family:  Arial, sans-serif;
}

::v-deep .el-tabs__item {
  color: #dceeee;
  opacity: 0.9;
  font-size: 16px;
  font-weight: bold;

  font-family:  Arial, sans-serif;
}

::v-deep .el-tabs__nav-wrap{
  background-color: #d7d7d7 !important;
}

::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
  background-color: #3a3b3b;
}

</style>