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

<template>
  <basic-container class="content">
    <div class="process">
      <div class="title">
        <div>报警节点示意图</div>
        <el-button class="go-back" @click="goBack">返回</el-button>
      </div>
      <el-carousel
        style="position: relative"
        :autoplay="false"
        :loop="false"
        @change="change"
      >
        <div
          style="
            width: 100%;
            height: 100%;
            position: absolute;
            background: rgba(255, 255, 255, 0.9);
            z-index: 9;
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
            line-height: 300px;
            z-index: 99;
          "
          v-show="loading1 || !warnPoint.length"
        >
          {{
            loading1 ? "数据加载中..." : "未查询到设备类型通讯链路及排除方案"
          }}
        </div>
        <el-carousel-item v-for="(item, index) in warnPoint" :key="item">
          <div class="main">
            <div class="process-example">
              <div style="position: absolute; left: 24px">
                共{{ warnPoint.length }}条，{{
                  index + 1 + "/" + warnPoint.length
                }}
              </div>
              <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" v-if="item.lineData && item.lineData[0]">
                  <img
                    class="nav_img"
                    :src="require(`../../../public/img/opsVisualization/node1_${item.lineData[1].status ||3}.png`)"
                  />
                  <div class="node-text">
                    {{
                      item.lineData && item.lineData[0] && item.lineData[0].name
                    }}
                  </div>
                </div>
                <normal
                  v-if="item.lineData && item.lineData[1]"
                  :params="item.lineData[1]"
                />
                <div class="node-img" v-if="item.lineData && item.lineData[1]">
                  <img
                    class="nav_img"
                    :src="require(`../../../public/img/opsVisualization/node2_${item.lineData[1].status||3}.png`)"
                  />
                  <div class="node-text">
                    {{
                      item.lineData && item.lineData[1] && item.lineData[1].name
                    }}
                  </div>
                </div>
                <normal
                  v-if="item.lineData && item.lineData[2]"
                  :params="item.lineData[2]"
                />
                <div class="node-img" v-if="item.lineData && item.lineData[2]">
                  <img
                    class="nav_img"
                    :src="require(`../../../public/img/opsVisualization/node3_${item.lineData[2].status||3}.png`)"
                  />
                  <div class="node-text">
                    {{
                      item.lineData && item.lineData[2] && item.lineData[2].name
                    }}
                  </div>
                </div>
                <normal
                  v-if="item.lineData && item.lineData[3]"
                  :params="item.lineData[3]"
                />
                <div class="node-img" v-if="item.lineData && item.lineData[3]">
                  <img
                    class="nav_img"
                    :src="require(`../../../public/img/opsVisualization/node3_${item.lineData[3].status||3}.png`)"
                  />
                  <div class="node-text">
                    {{
                      item.lineData && item.lineData[3] && item.lineData[3].name
                    }}
                  </div>
                </div>
                <normal
                  v-if="item.lineData && item.lineData[4]"
                  :params="item.lineData[4]"
                />
                <div class="node-img" v-if="item.lineData && item.lineData[4]">
                  <img
                    class="nav_img"
                    :src="require(`../../../public/img/opsVisualization/node3_${item.lineData[4].status||3}.png`)"
                  />
                  <div class="node-text">
                    {{
                      item.lineData && item.lineData[4] && item.lineData[4].name
                    }}
                  </div>
                </div>
              </div>
              <div class="process-more">
                <div class="button" @click="() => open(item)">
                  查看更多报警信息
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="method">
      <div class="title" style="z-index: 10">报警解决方法</div>
      <div
        style="
          width: 100%;
          height: 280px;
          position: absolute;
          background: rgba(255, 255, 255, 0.9);
          z-index: 9;
          position: absolute;
          top: 0;
          left: 0;
          text-align: center;
          line-height: 300px;
          border: 1px solid #d1d1d1;
          border-top: none;
        "
        v-show="loading2 && !resolveTips.length"
      >
        {{ loading2 ? "数据加载中..." : "未查询到报警解决方法" }}
      </div>
      <div class="text-box" style="display: flex; padding: 28px 0 0 44px">
        <div class="label" style="font-size: 18px; font-weight: bold">
          排查方法：
        </div>
        <div>
          <div class="value">
            <div class="item" v-for="item in resolveTips">
              {{ item.shortNum }}.{{ item.tips }}
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="text-box" style="margin: 0;">
          <div class="label">{{ item.shortNum }}.</div>
          <div class="value">
            <div class="item">{{ item.tips }}</div>
          </div>
        </div> -->
    </div>
  </basic-container>
</template>

<script>
import {
  getWarnPoint,
  getResolveTips,
} from "@/api/opsVisualization/alarmProcess";
import normal from "./components/normal.vue";
export default {
  data() {
    return {
      resolveTips: [],
      warnPoint: [],
      loading1: false,
      loading2: false,

      carouselIndex: 0,
    };
  },
  components: {
    normal,
  },
  created() {},
  mounted() {
    const { serviceCode = "" } = this.$route.query;

    this.loading1 = true;
    getWarnPoint({ serviceCode })
      .then((res) => {
        //排序
        this.loading1 = false;
        let arr = res.data.data;
        // let arr = [
        //   {
        //     classCode: "0200", // 设备类型
        //     lineData: [
        //       {
        //         parent: "294", // 父节点id
        //         name: "data", // 节点名称
        //         id: 301, // 节点id
        //         type: "equip", // 监控节点类型
        //         class_code: "0200", // 设备类型
        //         status: 4, // 节点状态
        //       },
        //       {
        //         parent: "293",
        //         name: "gateway",
        //         id: 294,
        //         type: "middleware",
        //         status: 4,
        //       },
        //       {
        //         parent: "11",
        //         name: "mqtt通讯服务",
        //         id: 293,
        //         type: "middleware",
        //         status: 4,
        //       },
        //       {
        //         parent: "0",
        //         name: "水表、热表、火警、电梯",
        //         id: 11,
        //         type: "service",
        //         status: 2,
        //       },
        //     ],
        //   },
        //   {
        //     classCode: "0201", // 设备类型
        //     lineData: [
        //       {
        //         parent: "294", // 父节点id
        //         name: "data", // 节点名称
        //         id: 301, // 节点id
        //         type: "equip", // 监控节点类型
        //         class_code: "0200", // 设备类型
        //         status: 4, // 节点状态
        //       },
        //       {
        //         parent: "293",
        //         name: "gateway",
        //         id: 294,
        //         type: "middleware",
        //         status: 4,
        //       },
        //       {
        //         parent: "11",
        //         name: "mqtt通讯服务",
        //         id: 293,
        //         type: "middleware",
        //         status: 4,
        //       },
        //       {
        //         parent: "0",
        //         name: "水表、热表、火警、电梯",
        //         id: 11,
        //         type: "service",
        //         status: 2,
        //       },
        //     ],
        //   },
        // ];
        arr.map((i) => {
          i.lineData = this.arrSort(i.lineData);
        });

        this.warnPoint = arr;
        this.loading1 = false;

        console.log(
          arr,
          "warnPointwarnPointwarnPointwarnPointwarnPointwarnPoint"
        );

        //排查方案信息列表
        this.loading2 = true;
        getResolveTips({
          classCode: this.warnPoint[0].classCode,
          pointCode: this.warnPoint[0].lineData.find(
            (i) => i.status == 2 || i.status == 3
          ).type,
        })
          .then((res) => {
            this.resolveTips = res.data.data;
            this.loading2 = false;
          })
          .catch((err) => {
            this.$message.warning("排查方案信息列表查询失败，请联系管理员！");
            this.loading2 = false;
          });
      })
      .catch((err) => {
        this.$message.warning(
          "设备类型通讯链路及排除方案查询失败，请联系管理员！"
        );
        this.loading1 = false;
      });
  },
  methods: {
    change(index) {
      console.log("indexindexindex", index);

      this.loading2 = true;
      getResolveTips({
        classCode: this.warnPoint[index].classCode,
        pointCode: this.warnPoint[index].lineData.find(
          (i) => i.status == 2 || i.status == 3
        ).type,
      })
        .then((res) => {
          this.resolveTips = res.data.data;
          this.loading2 = false;
        })
        .catch((err) => {
          this.$message.warning("排查方案信息列表查询失败，请联系管理员！");
          this.loading2 = false;
        });
    },
    open(detail) {
      this.$router.push({
        path: `/opsVisualization/serviceDataOAM?equipCode=&warnStatus=1&classCode=${detail.classCode}`,
      });
    },
    arrSort(list) {
      let arr = [];
      arr[0] = list.find((i) => i.parent == 0);
      if (arr[0]) {
        arr[1] = list.find((i) => i.parent == arr[0].id);
      }
      if (arr[1]) {
        arr[2] = list.find((i) => i.parent == arr[1].id);
      }
      if (arr[2]) {
        arr[3] = list.find((i) => i.parent == arr[2].id);
      }
      if (arr[3]) {
        arr[4] = list.find((i) => i.parent == arr[3].id);
      }
      if (arr[4]) {
        arr[5] = list.find((i) => i.parent == arr[4].id);
      }
      if (arr[5]) {
        arr[6] = list.find((i) => i.parent == arr[4].id);
      }
      arr.splice(arr.length - 1, 1);
      return arr;
    },
    goBack() {
      this.$router.go(-1);
    }
  },
};
</script>

<style lang="scss" scoped>
.content {
  // padding: 20px !important;
  .process {
    // width: calc(100% - 218px);
    // margin-left: 218px;
    height: 500px;
    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;
      position: relative;
      .go-back{
        position: absolute;
        right: 2px;
      }
    }
    .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 {
    height: 270px;
    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;
    position: relative;
    .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>