markerInfoWindow.vue

<template>
  <div class="wrapper">
    <span class="dot-left"></span>
    <div class="top display-default">
      <div class="left text ddd" :title="data.deviceName">{{ data.deviceName }}</div>
      <div class="right text">
        <img src="../../assets/images/closeBtn.png" alt="" @click="close" />
      </div>
    </div>
    <!-- 设备信息 -->
    <div class="content  scrollStyle">
      <div class="eq-content display-default">
        <div class="text-wrapper">
          <div class="eq-text">
            设备类型：<span>{{ title ? title : "-"  }}</span>
          </div>
          <div class="eq-text">
            设备型号：<span>{{ data.deviceModel ? data.deviceModel : "-"  }}</span>
          </div>
          <div class="eq-text">
            所属管道：<span>{{ data.pipeName ? data.pipeName : "-"  }}</span>
          </div>
          <div class="eq-text">
            物联网编号：<span>{{ data.iotNo ? data.iotNo : "-" }}</span>
          </div>
        </div>
        <div class="pic">
          <img v-bind:src="data.iconUrl" alt="" />
        </div>
      </div>
      <!-- 维修人员 -->
      <div class="maintain-content">
        <el-col :span="11">
          <div>
            <span>安装日期：</span>
            <span>{{
              moment(data.installationTime).format("YYYY-MM-DD")
            }}</span>
          </div>
        </el-col>

        <el-col :span="13">
          <div>
            <span>最后巡检日期：</span>
            <span>{{ data.inspectionTime ? data.inspectionTime : "-" }}</span>
          </div>
        </el-col>

        <div>
          <span>设备所在地址：</span>
          <span>{{ data.pipeAddr ? data.pipeAddr : "-"}}</span>
        </div>
        <div>
          <span>备注信息：</span>
          <span>{{ data.remarks ? data.remarks : "-"}} </span>
        </div>
      </div>
    </div>

    <!-- 报警状态 -->
    <div class="warn-wrapper" v-if="true">
      <!-- <div class="warn-content">
        <div>报警状态：<span>报警</span></div>
        <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
      </div> -->
      <template v-if="data.deviceType ==3 || data.deviceType==4">
        <div v-if="data.deviceType==3" class="windowwarn-content" style="
          border-bottom: 1px solid #e2e2e2;
          padding: 10px 0 2px 22px;
          height: 150px;padding-bottom: 2px;
          ">
          <el-col :span="12">
            <div class="windowwarn">
              标况累积量：<span class="standardConditionAccumulation">-</span>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="windowwarn">
              工况累积量：<span class="workingConditionAccumulation">-</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="windowwarn">
              剩余量：<span class="residualQuantity">-</span>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="windowwarn">
              标况流量：<span class="standardConditionFlow">-</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="windowwarn">
              工况流量：<span class="workingConditionFlow">-</span>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="windowwarn">
              温度：<span class="temperature">-</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="windowwarn">
              压力：<span class="pressure">-</span>
            </div>
          </el-col>
          <el-col :span="15">
            <div class="windowwarn">
              上报时间：<span class="reportTime">-</span>
            </div>
          </el-col>
        </div>
        <div v-if="data.deviceType==4" class="windowwarn-content" style="
          border-bottom: 1px solid #e2e2e2;
          padding: 10px 0 2px 22px;
          height: 70px;padding-bottom: 2px;
          ">
          <el-col :span="24">
            <div class="windowwarn">
              压力：<span class="pressure">-</span>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="windowwarn">
              上报时间：<span class="reportTime">-</span>
            </div>
          </el-col>
        </div>
      </template>


      <div class="btn">
        <span @mousedown.stop="deviceMore">
          <el-button class="elbtn" type="primary">设备详情</el-button>
        </span>
        <!-- <el-button class="elbtn" type="primary">生成工单</el-button> -->
      </div>
    </div>
  </div>
</template>

<script>
  let closeInfoWindowTimer = null;
  import { getWindowData } from "@/api/dataMonitoring/reportData";
  import moment from "moment";
  //line移入时的的infowindow
  export default {
    props: {
      obj: { typs: Object },
      title: "",
      data: {},
      map: null,
    },
    data() {
      return {
        deviceId: "",
        alarm: {},
      }
    },
    mounted() {
      clearInterval(this.data.class.view.deviceTimer);


      if (this.data.deviceType == 3 || this.data.deviceType == 4) {
        this.getDataid();
        this.data.class.view.deviceTimer = setInterval(this.getDataid, 5000);

        closeInfoWindowTimer = setInterval(() => {
          const dom= document.getElementsByClassName("amap-info")[0];
          const disPlay =dom?.style.display;
          if (!dom || (dom && disPlay == "none")) {
            clearInterval(this.data.class.view.deviceTimer)
            clearInterval(closeInfoWindowTimer)
            console.log("请求关闭")
          }
        }, 1000)
      }

    },
    methods: {
      moment,
      deviceMore() {
        this.data.class.view.$router.push({
          // path: "/dataMonitoring/realtimedetail",
          path: "/device/deviceInfoDetail",
          query: {
            deviceId: this.data.deviceId,
            // deviceType: this.data.deviceType,
          },
        });
      },
      getDataid() {
        getWindowData(this.data.deviceId).then(response => {
          this.changeValue(response.data)

        })
      },
      changeValue(data) {
        const keyArr = Object.keys(data);
        keyArr.forEach((item) => {
          const dw = this.danwei(item)
          const dom = document.getElementsByClassName(item)[0];
          if (dom) {
            dom.innerHTML = data[item] +"&nbsp"+ dw;
          }
        })
      },
      danwei(item) {
        let dw='';
        if(item =='standardConditionAccumulation' || item == 'workingConditionAccumulation' || item == 'residualQuantity'){
          dw="m³"
        }else if(item =='standardConditionFlow'|| item == 'workingConditionFlow'){
          dw="m³/h"
        }else if(item =='temperature'){
          dw="℃"
        }else if(item == 'pressure'){
          dw="KPa"
        }else if(item == 'reportTime'){
          dw=" "
        }
        return dw;
      } ,
      close() {
        this.map.clearInfoWindow();
        this.data.class.view.domAllShow()
      },
    },
  };
</script>

<style lang="scss" scoped>
  .windowwarn-content {
    div {
      font-size: 14px;
      font-wwight: 400;

      .windowwarn {
        margin-bottom: 7px;
      }
    }
  }

  .wrapper {
    width: 406px;
    max-height: 600px;
    // background: #fff;
    border-radius: 4px;
    background: rgba(7, 29, 51, 0.9);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    color: #fff;

    // overflow: hidden;
    .top {
      width: 100%;
      height: 51px;
      // background-color: #053b6a;
      background-image: url(../../assets/images/blueTopBg.png);
      background-size: 100% 100%;
      background-position: center;

      &:before {
        // content: "";
        // position: absolute;
        // left: -20px;
        // top: 5px;
        // width: 0px;
        // height: 0px;
        // z-index:-1;
        // border-top: 15px solid transparent;
        // border-bottom: 15px solid transparent;
        // border-right: 30px solid #053b6a;
        content: "";
        position: absolute;
        left: -20px;
        top: 5px;
        z-index: -1;
        width: 33px;
        height: 33px;
        background-image: url(../../assets/images/blueLeftTriangle.png);
      }

      .text {
        font-weight: 600;
        font-size: 16px;
        color: #ffffff;
        line-height: 51px;
      }

      .left {
        padding-left: 22px;
      }

      .right {
        padding-right: 22px;

        img {
          cursor: pointer;
        }
      }
    }

    .content {
      position: relative;
      max-height: 300px;
      overflow: hidden;
      overflow-y: auto;
      padding-bottom: 2px;
      border-bottom: 1px solid #eeeeee;

      .eq-content {
        // min-height: 156px;
        box-sizing: border-box;
        padding: 13px 22px 0px 22px;

        // border-bottom: 1px solid #e2e2e2;
        .text-wrapper {
          padding-top: 1px;

          &>div {
            margin-bottom: 6px;
          }

          .eq-text {
            font-size: 14px;
            font-weight: 400;
            // color: #1d1d1d;
            color: #fff;
            opacity: 1;

            &>span {
              vertical-align: top;
              display: inline-block;
              // white-space: nowrap;
              // text-overflow: ellipsis;
              // overflow: hidden;
              word-break: break-all;
              max-width: 100px;
            }
          }
        }

        .pic {
          width: 180px;
          height: 103px;

          // background-color: black;
          img {
            width: 100%;
            height: 100%;
            // cursor: pointer;
          }
        }
      }
    }

    .maintain-content {
      width: 100%;
      max-height: 119px;
      padding-left: 22px;
      // padding-right: 22px;
      // padding-bottom: 10px;
      // padding-top: 16px;
      box-sizing: border-box;

      // border-bottom: 1px solid #e2e2e2;
      &>div {
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 400;

        span {
          vertical-align: top;
          display: inline-block;
          word-break: break-all;
          max-width: 280px;
        }
      }
    }

    .warn-wrapper {
      .warn-content {
        box-sizing: border-box;
        padding: 10px 0 2px 22px;
        border-bottom: 1px solid #e2e2e2;
        color: #fe5966;

        &>div {
          font-size: 14px;
          font-weight: 400;
          margin-bottom: 8px;
        }
      }

      .btn {
        padding: 16px 0;
        text-align: center;

        .elbtn {
          background-color: #053b6a;
          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
          width: 95px;
          height: 33px;
        }
      }
    }
  }

  .wrapperEditorPage {}

  .display-default {
    display: flex;
    justify-content: space-between;
  }
</style>