smartpark-front/src/page/opsVisualization/alarmProcess.vue

<template>
  <div class="content">
    <div class="process">
      <div class="title">报警节点示意图</div>
      <div class="main">
        <div class="process-example">
          <div class="example-title">示例：</div>
          <div class="example-box">
            <div class="point blue"></div>
            <div class="value">正常</div>
          </div>
          <div class="example-box margin-right-left-20">
            <div class="point red"></div>
            <div class="value">报警</div>
          </div>
          <div class="example-box">
            <div class="point grey"></div>
            <div class="value">静默</div>
          </div>
        </div>
        <div class="process-center">
          <div class="process-node-box">
            <div class="node-img">
              <img
                class="nav_img"
                src="../../../public/img/process/node1.png"
              />
              <div class="node-text">脚本</div>
            </div>
            <div class="yes-no">
              <div class="yes"></div>
              <img class="nav_img" src="../../../public/img/process/yes.png" />
            </div>
            <div class="node-img">
              <img
                class="nav_img"
                src="../../../public/img/process/node2.png"
              />
              <div class="node-text">电子围栏服务</div>
            </div>
            <div class="yes-no">
              <div class="yes"></div>
              <img class="nav_img" src="../../../public/img/process/yes.png" />
            </div>
            <div class="node-img">
              <img
                class="nav_img"
                src="../../../public/img/process/node3.png"
              />
              <div class="node-text">网关</div>
            </div>
            <div class="yes-no">
              <div class="yes"></div>
              <img class="nav_img" src="../../../public/img/process/yes.png" />
            </div>
            <div class="node-img">
              <div class="baojing">dtu断联报警</div>
              <img
                class="nav_img"
                src="../../../public/img/process/node4.png"
              />
              <div class="node-text">dtu</div>
            </div>
            <div class="yes-no">
              <div class="no"></div>
              <img class="nav_img" src="../../../public/img/process/no.png" />
            </div>
            <div class="node-img">
              <img
                class="nav_img"
                src="../../../public/img/process/node5.png"
              />
              <div class="node-text">电子围栏</div>
            </div>
          </div>
          <div class="process-more">
            <div class="button">查看更多报警信息</div>
          </div>
        </div>
        <div class="process-bottom">
          <div class="line">
            <div class="item">
              <div class="item-box">
                <div class="time">2024-5-17 08:51:12</div>
                <div class="point red"></div>
                <div class="name">dtu断联报警</div>
                <div class="code">dtu编号：SJK001</div>
                <div class="btn red-btn">
                  <img
                    class="img"
                    src="../../../public/img/process/serch.png"
                    alt=""
                  />
                  <div class="text">请检查dtu设备</div>
                </div>
              </div>
              <div class="item-box">
                <div class="time">2024-5-17 08:51:13</div>
                <div class="point grey"></div>
                <div class="name">静默</div>
                <div class="code">设备编号：SHUIBIAO1</div>
                <div class="btn grey-btn">
                  <img
                    class="img"
                    src="../../../public/img/process/loading.png"
                    alt=""
                  />
                  <div class="text">等待重新链接</div>
                </div>
              </div>
            </div>
            <div class="restart">
              <div class="restart-title">操作：</div>
              <div class="restart-btn">一键重启</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="method">
      <div class="title">报警解决方法</div>
      <div class="main" v-for="item in data">
        <div class="text-box">
          <div class="label">设备类型编码：</div>
          <div class="value">
            <div class="item">{{ item.classCode }}</div>
          </div>
        </div>
        <div class="text-box">
          <div class="label">排查方法：</div>
          <div class="value">
            <div class="item">1.检查电源是否正常，重新接入或更换电源；</div>
            <div class="item">
              2.检查是否过载，重新调整系统负载或更换更高性能的设备；
            </div>
            <div class="item">
              3.检查温度是否过高，采取措施降低温度，如改变工作环境或更换散热设备；
            </div>
            <div class="item">
              4.检查是否受到电磁干扰，采取措施降低干扰，如改变工作环境或更换屏蔽设备。
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getWarnPoint,
  getResolveTips,
} from "@/api/opsVisualization/serviceDataOAM";
export default {
  data() {
    return {
      data: [
        {
          classCode: "设备类型编码,0100",
          pointCode: "报警节点code，1",
          tips: "排查方案说明，简单进线电流",
          shortNum: 1, // 排查方案排序，展示时按照排序升序展示
        },
      ],
    };
  },
  created() {},
  mounted() {
    // [
    //   {
    //     nodeid: 1,
    //     list: [
    //       {
    //         name: "脚本",
    //         state: "正常",
    //       },
    //       {
    //         name: "电子围栏服务",
    //         state: "正常",
    //       },
    //       {
    //         name: "网关",
    //         state: "正常",
    //       },
    //       {
    //         name: "dtu",
    //         state: "dtu断联报警",
    //       },
    //       {
    //         name: "电子围栏",
    //         state: "",
    //       },
    //     ],
    //   },
    // ];
    getResolveTips();
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.content {
  padding: 20px !important;
  .process {
    width: calc(100% - 218px);
    margin-left: 218px;
    height: 584px;
    background: #ffffff;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #d1d1d1;
    display: flex;
    flex-direction: column;
    .title {
      width: 100%;
      height: 40px;
      background: #e5e5e5;
      border-radius: 0px 0px 0px 0px;
      border: 1px solid #d1d1d1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: #333333;
    }
    .main {
      display: flex;
      flex-direction: column;
      padding: 30px;
      height: 50%;
      .process-example {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        .example-title {
          color: #999999;
          margin-right: 6px;
          font-size: 14px;
        }
        .example-box {
          display: flex;
          align-items: center;
          .point {
            width: 11px;
            height: 11px;
            border-radius: 10px;
            margin-right: 11px;
          }
          .value {
            color: #999999;
            font-size: 14px;
          }
        }
        .margin-right-left-20 {
          margin: 0 20px;
        }
      }
      .process-center {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 75px;
        .process-node-box {
          display: flex;
          justify-content: center;
          align-items: center;
          .node-img {
            width: 69px;
            height: 69px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            .baojing {
              width: 133px;
              height: 31px;
              background: #fff3f3;
              border-radius: 0px 0px 0px 0px;
              border: 1px solid #ee6464;
              font-size: 16px;
              color: #e14b33;
              position: absolute;
              top: -55px;
              transform: translateY(-50%);
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .nav_img {
              width: 100%;
              height: 100%;
              // margin-bottom: 20px;
            }
            .node-text {
              position: absolute;
              transform: translateY(-50%);
              width: 100px;
              text-align: center;
              top: 100px;
            }
          }
          .yes-no {
            width: 163px;
            height: 17px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            .yes {
              width: 167px;
              height: 17px;
              background: #21a2e5;
              opacity: 0.18;
              position: absolute;
            }
            .no {
              width: 167px;
              height: 17px;
              background: #a5a5a5;
              opacity: 0.18;
              position: absolute;
            }
            .nav_img {
              width: 24px;
              height: 24px;
              opacity: 1;
              z-index: 10;
            }
          }
        }
        .process-more {
          .button {
            width: 190px;
            height: 40px;
            background: #ffffff;
            border-radius: 0px 0px 0px 0px;
            border: 1px solid #2b8ee5;
            color: #2b8ee5;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
          }
        }
      }
      .process-bottom {
        border-top: 1px solid #d1d1d1;
        margin-top: 200px;
        display: flex;
        flex-direction: column;
        .line {
          margin-top: 20px;
          display: flex;
          align-items: flex-start;
          justify-content: center;
        }
        .item {
          display: flex;
          flex-direction: column;
          .item-box {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            .point {
              width: 10px;
              height: 10px;
              margin: 0 20px;
              border-radius: 10px;
            }
            .name {
              width: 200px;
            }
            .code {
              width: 250px;
              margin-left: 40px;
            }
            .btn {
              margin-left: 20px;
              width: 185px;
              height: 31px;
              border-radius: 0px 0px 0px 0px;
              display: flex;
              justify-content: space-around;
              align-items: center;
              font-size: 16px;
              .img {
                width: 15px;
                height: 15px;
              }
            }
            .red-btn {
              background: #fff3f3;
              border: 1px solid #ee6464;
              .text {
                color: #e14b33;
              }
            }
            .grey-btn {
              background: #f5f5f5;
              border: 1px solid #999999;
              .text {
                color: #999999;
              }
            }
          }
        }
        .restart {
          margin-left: 72px;
          display: flex;
          align-items: center;
          cursor: pointer;
          .restart-text {
            font-size: 16px;
            color: #333333;
          }
          .restart-btn {
            width: 93px;
            height: 31px;
            background: #2b8ee5;
            border-radius: 0px 0px 0px 0px;
            font-size: 16px;
            color: #ffffff;
            margin-left: 7px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
  .method {
    flex: 1;
    margin-top: 30px;
    width: calc(100% - 218px);
    // height: 326px;
    margin-left: 218px;
    background: #ffffff;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #d1d1d1;
    display: flex;
    flex-direction: column;
    .title {
      width: 100%;
      height: 40px;
      background: #e5e5e5;
      border-radius: 0px 0px 0px 0px;
      border: 1px solid #d1d1d1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: #333333;
    }
    .main {
      display: flex;
      flex-direction: column;
      padding: 22px;
      // height: 50%;
      overflow: auto;
      .text-box {
        margin-bottom: 22px;
        display: flex;
        .label {
        }
        .value {
          .item {
            margin-bottom: 12px;
          }
        }
      }
    }
  }
  .blue {
    background: #21a2e5;
  }
  .red {
    background: #e96955;
  }
  .grey {
    background: #e1e1e1;
  }
}
</style>