告警规则添加

src/components/Sidebar.vue

@@ -42,6 +42,10 @@ export default {
           path: "/paramBinding",
           name: "参数绑定",
         },
+        {
+          path: "/alarmRules",
+          name: "告警规则",
+        },
       ],
     };
   },

src/router/index.js

@@ -130,6 +130,14 @@ const routes = [
           title: "参数绑定",
         },
       },
+      {
+        path: "/alarmRules",
+        component: () => import("../views/alarmRules/index.vue"),
+        name: "alarmRules",
+        meta: {
+          title: "告警规则",
+        },
+      },
     ],
   },
 ];

src/utils/api/index.js

@@ -633,3 +633,65 @@ export function modevtypepointDeleteApi(data) {
     },
   });
 }
+
+//告警规则
+//查询全部列表
+export function AlarmRulesListApi(data) {
+  return request({
+    url: "/rule/listAll",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//添加告警规则
+export function AlarmRulesAddRules(data) {
+  return request({
+    url: "/rule/add",
+    method: "post",
+    data,
+  });
+}
+//删除告警规则
+export function AlarmRulesDeleteRules(data) {
+  return request({
+    url: "/rule/delete",
+    method: "post",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//更新告警规则
+export function AlarmRulesUpdateRules(data) {
+  return request({
+    url: "/rule/update",
+    method: "post",
+    data,
+  });
+}
+//查询比较符
+export function listOperatorApi(data) {
+  return request({
+    url: "/rule/listOperator",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//查询比较器
+export function listComparatorApi(data) {
+  return request({
+    url: "/rule/listComparator",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}

src/views/alarmRules/components/addRules.vue

@@ -0,0 +1,378 @@
+<template>
+  <div class="addrulesBox">
+    <el-dialog
+      class="rulesDialogBox"
+      :title="title"
+      :visible.sync="rulesDialogshow"
+      width="520px"
+      :close-on-click-modal="false"
+    >
+      {{ this.sensorId }}
+      <el-form
+        label-position="left"
+        ref="formInfo"
+        label-width="104px"
+        :rules="rules"
+        :model="formInfo"
+      >
+        <el-form-item label="属性名称：">
+          <el-select v-model="formInfo.attribute" @change="changeAttribute">
+            <el-option
+              v-for="item in modevOptions"
+              :key="item.id"
+              :label="item.fieldDesc"
+              :value="item.id"
+            >
+              {{ item.fieldDesc }}({{ item.field }})
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="比较器：" prop="compareVal">
+          <el-select v-model="formInfo.compareVal" disabled>
+            <el-option
+              v-for="item in compareOptions"
+              :key="item.type"
+              :label="item.comment"
+              :value="item.type"
+            >
+              {{ item.type }}({{ item.comment }})
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="比较符：">
+          <el-select v-model="formInfo.operatorVal" @change="changeOpeara">
+            <el-option
+              v-for="item in operatorValOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="阈值："
+          v-if="formInfo.operatorVal == 'BTW' || formInfo.operatorVal == 'NTW'"
+        >
+          <div class="twoInput">
+            <el-input
+              v-model="formInfo.thresholdL"
+              placeholder="请输入阈值"
+            ></el-input>
+            <span class="gardSpan">-</span>
+            <el-input
+              v-model="formInfo.thresholdR"
+              placeholder="请输入阈值"
+            ></el-input>
+          </div>
+        </el-form-item>
+        <el-form-item label="阈值：" prop="threshold" v-else>
+          <el-input
+            v-model="formInfo.threshold"
+            placeholder="请输入阈值"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="风险等级：">
+          <el-select v-model="formInfo.riskLevelVal" @change="changeOpeara">
+            <el-option
+              v-for="item in riskLevelOption"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态：" prop="state">
+          <el-switch
+            v-model="formInfo.state"
+            active-text="启用"
+            inactive-text="停用"
+            :active-value="1"
+            :inactive-value="0"
+          ></el-switch>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="hide">取 消</el-button>
+        <el-button type="primary" @click="submitForm()">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  modevtypepointListApi,
+  listComparatorApi,
+  listOperatorApi,
+  AlarmRulesAddRules,
+  AlarmRulesUpdateRules,
+} from "@/utils/api/index";
+export default {
+  props: ["title", "modevtype", "sensorId"],
+  data() {
+    return {
+      rulesDialogshow: false,
+      formInfo: {
+        attribute: "",
+        compareVal: "", //比较器
+        operatorVal: "", //比较符
+        threshold: "", //阈值
+        thresholdL: "",
+        thresholdR: "",
+        riskLevelVal: 0, //风险等级
+        state: 1,
+      },
+      rulesId: "",
+      //获取当前type
+      attType: "",
+      modevOptions: [], //属性列表
+      compareOptions: [], //比较器列表
+      operatorValOptions: [], //比较符
+      riskLevelOption: [
+        { id: 0, name: "高" },
+        { id: 1, name: "中" },
+        { id: 2, name: "低" },
+      ],
+
+      rules: {
+        // name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+        compareVal: [
+          { required: true, message: "比较器不能为空", trigger: "blur" },
+        ],
+        threshold: [
+          { required: true, message: "阈值不能为空", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created() {},
+  mounted() {},
+  watch: {},
+  methods: {
+    //判断
+    getdataform(val) {
+      console.log(val);
+      if (val.operator == "BTW" || val.operator == "NTW") {
+        console.log("wossssssssss", val.active);
+        const thresholdValues = val.threshold.split(",");
+        this.formInfo = {
+          attribute: val.modevtypePointId,
+          compareVal: val.comparator, //比较器
+          operatorVal: val.operator, //比较符
+          thresholdL: thresholdValues[0],
+          thresholdR: thresholdValues[1],
+          riskLevelVal: val.level, //风险等级
+          state: val.active,
+        };
+        console.log(this.formInfo);
+      } else {
+        this.formInfo = {
+          attribute: val.modevtypePointId,
+          compareVal: val.comparator, //比较器
+          operatorVal: val.operator, //比较符
+          threshold: val.threshold, //阈值
+          riskLevelVal: val.level, //风险等级
+          state: val.active,
+        };
+      }
+      this.rulesId = val.id;
+    },
+    //获取监测设备类型属性点
+    getModevTypeList() {
+      modevtypepointListApi({
+        modevtypeId: this.modevtype,
+      })
+        .then((res) => {
+          console.log(res);
+          this.modevOptions = res.data;
+          if (this.formInfo.attribute == "") {
+            this.formInfo.attribute = res.data[0].id;
+          }
+
+          //判断当前type有没有在里面
+          const selectedOption = this.modevOptions.find(
+            (option) => option.id === res.data[0].id
+          );
+          if (selectedOption) {
+            // 假设 selectedOption 中直接有一个 type 属性
+            const type = selectedOption.type; // 这里获取到 type
+            console.log(type); // 输出 type
+            this.formInfo.compareVal = type;
+            this.getOperator();
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //通过属性获取查询比较器
+    getCompareList() {
+      listComparatorApi()
+        .then((res) => {
+          console.log(res);
+          this.compareOptions = res.data;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //获取比较符
+    getOperator() {
+      listOperatorApi({ name: this.formInfo.compareVal })
+        .then((res) => {
+          console.log(res);
+          this.operatorValOptions = Object.keys(res.data).map((key) => ({
+            value: key, // 值（键）
+            label: res.data[key], // 标签（显示的值）
+          }));
+          console.log(this.operatorValOptions);
+          if (this.formInfo.operatorVal == "") {
+            this.formInfo.operatorVal = this.operatorValOptions[0].value;
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //切换属性名称
+    changeAttribute(val) {
+      const selectedOption = this.modevOptions.find(
+        (option) => option.id === val
+      );
+      if (selectedOption) {
+        // 假设 selectedOption 中直接有一个 type 属性
+        const type = selectedOption.type; // 这里获取到 type
+        console.log(type); // 输出 type
+
+        // 接下来，您可能想根据这个 type 来设置 formInfo.compareVal
+        // 但由于您的 data 数组中的 value 也是 type，所以可以直接设置
+        this.formInfo.compareVal = type;
+        console.log("xia", this.formInfo.compareVal);
+        this.getOperator();
+      }
+    },
+    //切换选择比较符
+    changeOpeara(val) {
+      console.log(val);
+    },
+    submitForm() {
+      this.$refs.formInfo.validate((valid) => {
+        if (valid) {
+          console.log(this.formInfo);
+          let params = {};
+          if (
+            this.formInfo.operatorVal == "BTW" ||
+            this.formInfo.operatorVal == "NTW"
+          ) {
+            let threholdVal = `${this.formInfo.thresholdL.trim()},${this.formInfo.thresholdR.trim()}`;
+            params = {
+              sensorId: this.sensorId,
+              modevtypePointId: this.formInfo.attribute,
+              comparator: this.formInfo.compareVal,
+              operator: this.formInfo.operatorVal,
+              threshold: threholdVal,
+              level: this.formInfo.riskLevelVal,
+              active: this.formInfo.state, //启用
+            };
+          } else {
+            params = {
+              sensorId: this.sensorId,
+              modevtypePointId: this.formInfo.attribute,
+              comparator: this.formInfo.compareVal,
+              operator: this.formInfo.operatorVal,
+              threshold: this.formInfo.threshold,
+              level: this.formInfo.riskLevelVal,
+              active: this.formInfo.state, //启用
+            };
+          }
+          if (this.title == "添加规则") {
+            AlarmRulesAddRules(params)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getRules(); //刷新
+                } else {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: res.errorMsg,
+                    type: "error",
+                  });
+                }
+              })
+              .catch((err) => {});
+          } else {
+            this.$set(params, "id", this.rulesId);
+            AlarmRulesUpdateRules(params)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "修改成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getRules(); //刷新
+                } else {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: res.errorMsg,
+                    type: "error",
+                  });
+                }
+              })
+              .catch((err) => {});
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+
+    display() {
+      this.rulesDialogshow = true;
+      this.getCompareList();
+      this.getModevTypeList();
+    },
+    hide() {
+      this.rulesDialogshow = false;
+      //this.$refs.formInfo.resetFields(); // 重置表单字段值
+      this.formInfo = {
+        attribute: "",
+        compareVal: "", //比较器
+        operatorVal: "", //比较符
+        threshold: "", //阈值
+        thresholdL: "",
+        thresholdR: "",
+        riskLevelVal: 0, //风险等级
+        state: false,
+      };
+    },
+  },
+};
+</script>
+<style lang="less">
+.addrulesBox {
+  .rulesDialogBox {
+    .el-select {
+      width: 376px;
+    }
+    .twoInput {
+      display: flex;
+      .gardSpan {
+        margin: 0px 12px;
+      }
+    }
+  }
+}
+</style>

src/views/alarmRules/index.vue

@@ -0,0 +1,421 @@
+<template>
+  <div class="alarmRulesBox">
+    <div class="leftTree">
+      <h3>设备列表</h3>
+      <div class="treeBox">
+        <el-tree
+          ref="tree"
+          :data="paramTreeData"
+          :props="defaultProps"
+          node-key="id"
+          :default-expanded-keys="defaultExpandedKeys"
+          highlight-current
+          :current-node-key="currentNodekey"
+          :expand-on-click-node="true"
+          @node-click="handleNodeClick"
+          default-expand-all
+        >
+          <template class="custom-tree-node" slot-scope="{ node, data }">
+            <!-- <span>{{ data.name || data.mc }}</span> -->
+            <span v-if="data.mc">
+              <span>{{ data.mc }} </span>
+            </span>
+            <span v-else-if="data.name">
+              <span class="el-icon-document" style="margin-right: 6px"> </span>
+              <span :title="data.name">{{ data.name }} </span>
+            </span>
+          </template>
+        </el-tree>
+      </div>
+    </div>
+    <div class="paramTable">
+      <div class="paramHead">
+        <h3>设置告警规则</h3>
+        <el-button icon="el-icon-plus" @click="addRules" type="primary">
+          添加规则
+        </el-button>
+      </div>
+      <div class="paramContain" v-if="rulesList.length !== 0">
+        <div class="rulesBox">
+          <el-table
+            v-loading="rulesListLoading"
+            :data="rulesList"
+            stripe
+            border
+            style="width: 100%"
+            height="calc(100% - 0px)"
+          >
+            <el-table-column prop="id" label="ID" width="50"> </el-table-column>
+            <el-table-column prop="typePoint.fieldDesc" label="属性名称">
+            </el-table-column>
+            <el-table-column prop="comparatorDesc" label="选择器">
+            </el-table-column>
+            <el-table-column prop="operatorDesc" label="选择符">
+            </el-table-column>
+            <el-table-column prop="threshold" label="阈值"> </el-table-column>
+            <el-table-column prop="active" label="状态">
+              <template slot-scope="scope">
+                <span v-if="scope.row.active == 0"
+                  ><el-tag type="danger">停用</el-tag>
+                </span>
+                <span v-else> <el-tag type="success">启用</el-tag> </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="level" label="告警等级">
+              <template slot-scope="scope">
+                <span v-if="scope.row.level == 0"
+                  ><el-tag type="danger">高</el-tag>
+                </span>
+                <span v-else-if="scope.row.level == 1">
+                  <el-tag type="warning">中</el-tag>
+                </span>
+                <span v-else-if="scope.row.level == 2">
+                  <el-tag type="info">低</el-tag>
+                </span>
+              </template>
+            </el-table-column>
+
+            <el-table-column label="操作" class-name="editClass" width="260px">
+              <template slot-scope="scope">
+                <el-link
+                  type="primary"
+                  @click="handleEditClick(scope.row)"
+                  size="small"
+                  icon="el-icon-document"
+                  >编辑</el-link
+                >
+
+                <el-link
+                  type="danger"
+                  @click="handleDeleteClick(scope.row)"
+                  size="small"
+                  icon="el-icon-delete"
+                  >删除</el-link
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <div class="paramContain" v-else>
+        <el-empty description="请先添加规则"></el-empty>
+      </div>
+    </div>
+    <addRules
+      ref="addRulesRef"
+      :title="title"
+      :modevtype="modevtypeVal"
+      :sensorId="sensorIdVal"
+    ></addRules>
+  </div>
+</template>
+<script>
+import addRules from "./components/addRules";
+
+import {
+  getParamTreeApi,
+  AlarmRulesListApi,
+  AlarmRulesDeleteRules,
+} from "@/utils/api/index";
+export default {
+  name: "alarmRules",
+  components: {
+    addRules,
+  },
+  data() {
+    return {
+      filterText: "", //查询字段过滤
+      paramTreeData: [], // 树状图数据
+      defaultExpandedKeys: [],
+      currentNodeData: [], //选中的数据
+      currentId: "", //选择的id
+      crrrentName: "",
+      currentNodekey: "", //选中的节点
+      modevtypeVal: "", //选中节点的modevType
+      selectedNode: null, // 当前选中的节点
+      defaultProps: {
+        children: "children",
+        label: "mc",
+      },
+      rulesList: [], //规则列表
+      rulesListLoading: false,
+      title: "",
+      sensorIdVal: "",
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {
+    this.getParamTreeList();
+  },
+  methods: {
+    getParamTreeList() {
+      getParamTreeApi()
+        .then((res) => {
+          console.log(res);
+          this.paramTreeData = res.data;
+          this.defaultExpandedKeys = [this.paramTreeData[0].id];
+          this.currentNodeData =
+            this.paramTreeData[0].children[0].children[0].children[0];
+          this.currentNodekey =
+            this.paramTreeData[0].children[0].children[0].children[0].id;
+          this.$nextTick(() => {
+            this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
+            this.handleNodeClick(this.currentNodeData);
+          });
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    handleNodeClick(data, node) {
+      console.log(data);
+      if (data.hasOwnProperty("children")) {
+        this.$nextTick(() => {
+          this.$refs.tree.setCurrentKey(this.currentNodeKey);
+        });
+        return;
+      }
+      this.currentNodeKey = data.id;
+      this.modevtypeVal = data.typeId;
+      this.sensorIdVal = data.id;
+      this.getRules();
+    },
+    //获取规则列表
+    getRules() {
+      this.rulesListLoading = true;
+      AlarmRulesListApi({
+        sensorId: this.currentNodeKey,
+      })
+        .then((res) => {
+          console.log(res);
+          this.rulesListLoading = false;
+          this.rulesList = res.data;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+
+    //新增规则
+    addRules() {
+      this.title = "添加规则";
+      this.$refs.addRulesRef.display();
+    },
+    //修改
+    handleEditClick(data) {
+      this.title = "编辑规则";
+      this.$refs.addRulesRef.display();
+      this.$refs.addRulesRef.getdataform(data);
+    },
+    //删除规则
+    handleDeleteClick(data) {
+      this.$confirm("确定要删除该规则吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          AlarmRulesDeleteRules({ id: data.id }).then((res) => {
+            if (res.success) {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                type: "success",
+                message: "删除成功",
+              });
+              this.getRules(); //刷新
+            } else {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                type: "error",
+                message: res.errorMsg,
+              });
+            }
+          });
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style lang="less">
+.alarmRulesBox {
+  display: flex;
+  height: 100%;
+  .leftTree {
+    min-width: 380px;
+    max-width: 380px;
+    height: 100%;
+    overflow: auto;
+    //border: 1px solid #fff;
+    margin-right: 24px;
+    background: rgba(8, 9, 36, 0.28);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    box-shadow: inset 0 4px 44px 0 #106cde;
+    padding: 0px 12px;
+    h3 {
+      font-size: 14px;
+      color: #fff;
+      font-weight: normal;
+      height: 40px;
+      line-height: 40px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .treeBox {
+      width: 100%;
+      height: calc(100% - 48px);
+      background-color: #fff;
+      padding-top: 8px;
+      .searchBar {
+        width: 94%;
+        margin: 0px auto;
+        margin-bottom: 8px;
+      }
+      .el-tree {
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: calc(100% - 40px);
+        .el-tree-node__content {
+          height: 32px;
+          font-size: 12px;
+        }
+        .custom-tree-node {
+          color: #333;
+          overflow: hidden;
+          span {
+            display: flex;
+            display: inline-table;
+            overflow: hidden;
+            align-items: center;
+          }
+          .num {
+            color: #169e8c;
+          }
+        }
+      }
+
+      .el-tree--highlight-current
+        .el-tree-node.is-current
+        > .el-tree-node__content {
+        // 设置颜色
+        color: #fff;
+        background: #3889cf;
+        .custom-tree-node {
+          color: #fff;
+          //overflow: hidden;
+          span {
+            display: flex;
+            //overflow: hidden;
+            align-items: center;
+            .num {
+              color: #fff;
+            }
+            .iconfont {
+              //width: 30px;
+              display: inline-table;
+            }
+          }
+        }
+      }
+      .el-tree .el-tree-node__expand-icon.expanded {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+
+      .el-tree .el-tree-node__expand-icon.expanded {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+
+      /* //有子节点 且未展开 */
+      .el-tree .el-icon-caret-right:before {
+        content: "\e783";
+        display: block;
+        width: 16px;
+        height: 16px;
+        font-size: 16px;
+        background-size: 16px;
+        color: #333;
+      }
+
+      /* //有子节点 且已展开 */
+      .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
+        content: "\e781";
+        display: block;
+        width: 16px;
+        height: 16px;
+        font-size: 16px;
+        background-size: 16px;
+        color: #333;
+      }
+
+      /* //没有子节点 */
+      .el-tree .el-tree-node__expand-icon.is-leaf::before {
+        background: #fff;
+        content: "";
+        display: block;
+        width: 0px;
+        height: 0px;
+        font-size: 16px;
+        background-size: 16px;
+      }
+    }
+  }
+  .paramTable {
+    flex: 1;
+    overflow-x: hidden;
+    background: rgba(8, 9, 36, 0.28);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    box-shadow: inset 0 4px 44px 0 #106cde;
+    padding: 0px 12px;
+    .paramHead {
+      height: 40px;
+      line-height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      h3 {
+        font-size: 14px;
+        color: #fff;
+        font-weight: normal;
+        height: 40px;
+        line-height: 40px;
+      }
+      .searchMain {
+        display: flex;
+        align-items: center;
+      }
+    }
+    .paramContain {
+      height: calc(100% - 66px);
+      padding: 12px;
+      //background: #fcc;
+      background: #fff;
+      border: 1px solid #dcdfe6;
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
+      color: #333;
+      .rulesBox {
+        box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
+        height: 100%;
+        .el-table .el-table__cell {
+          text-align: center;
+        }
+        .editClass {
+          .el-link.el-link--primary {
+            margin-right: 14px;
+          }
+        }
+      }
+      .el-empty {
+        height: 100%;
+      }
+    }
+  }
+}
+</style>