dvcp_v2_wxcp_app/src/apps/AppGuardianship/warningDetail.vue

<template>
  <section class="warningDetail">
    <div flex class="header">
      <b v-text="detail.name"/>
      <div>
        {{ $dict.getLabel('intelligentGuardianshipItem2', detail.item) }}
        {{ detail.itemValue }}
      </div>
    </div>
    <ai-map class="fill" :map.sync="amap" :lib.sync="mapLib"/>
    <div class="navigation">
      <div class="content spb" flex>
        <div flex class="spb wrap">
          <div class="fill" v-text="detail.gpsDesc"/>
          <span>最后更新：{{ detail.createTime }}</span>
        </div>
        <open-map :data="detail"/>
      </div>
    </div>
    <make-calls :list="phoneList">
      <div class="bottomBtn">拨打电话</div>
    </make-calls>
    <ai-back/>
  </section>
</template>

<script>
import OpenMap from "./component/openMap";
import MakeCalls from "./component/makeCalls";

export default {
  name: "warningDetail",
  components: {MakeCalls, OpenMap},
  computed: {
    phoneList() {
      let {name: guardianName, phone: guardianPhone} = this.detail
      return [{guardianName, guardianPhone}, ...this.detail.guardians]
    }
  },
  data() {
    return {
      detail: {guardians: []},
      mapLib: null,
      amap: null,
    }
  },
  methods: {
    getDetail(id) {
      return this.$http.post("/app/appintelligentguardianshipalarm/queryDetailById", null, {
        params: {id},
        withoutToken: true
      }).then(res => {
        if (res?.data) {
          this.detail = res.data
        }
      })
    },
    initMap() {
      if (this.mapLib) {
        let pos = new this.mapLib.LngLat(this.detail.lng, this.detail.lat)
        this.amap.add(new this.mapLib.Marker({
          position: pos,
          anchor: 'bottom-center',
          content: `<div class="marker">${this.detail.name}</div>`,
        }))
        this.amap.setFitView()
      }
    }
  },
  watch: {
    mapLib(v) {
      this.detail.id && v && this.initMap()
    }
  },
  created() {
    this.$dict.load("intelligentGuardianshipItem", 'intelligentGuardianshipItem2', 'sex')
  },
  mounted() {
    this.getDetail(this.$route.query.id).then(() => this.initMap())
  }
}
</script>

<style lang="scss" scoped>
.warningDetail {
  padding: 48px 48px 112px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: absolute;

  .header {
    font-size: 40px;
    font-weight: bold;
    color: #333333;
    justify-content: center;
    margin-bottom: 48px;

    & > div {
      color: #EC4461;
    }
  }

  .navigation {
    .content {
      padding: 10px 0 32px;
      font-size: 28px;
      color: #555;

      & > .spb {
        margin-right: 40px;
      }

      .fill {
        min-width: 100%;
        flex-shrink: 0;
        margin-bottom: 10px;
      }

      span {
        margin-left: 0;
        color: #999;
        font-size: 22px;
      }
    }
  }

  .bottomBtn {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    background: #1365DD;
    line-height: 112px;
  }

  .AiMap {
    margin-bottom: 72px;
  }


  ::v-deep .marker {
    border-radius: 52px;
    background: #F46159;
    color: #fff;
    font-size: 22px;
    padding: 4px 16px;
    white-space: nowrap;
    position: relative;

    &:before {
      position: absolute;
      left: calc(50% - 30px);
      bottom: -34px;
      z-index: -1;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #F46159;
      animation: mapWarn 1s ease-out 0s infinite;
      content: " ";
    }

    &:after {
      position: absolute;
      display: block;
      content: " ";
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      border: 8px solid transparent;
      border-bottom: none;
      border-top-color: #F46159;
      height: 0;
      width: 0;
    }
  }
}
</style>