企微迁移智慧监护(手环)

src/apps/AppGuardianship/warningDetail.vue

@@ -0,0 +1,185 @@
+<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";
+import AiBack from "../../components/AiBack";
+import AiMap from "../../components/AiMap";
+
+export default {
+  name: "warningDetail",
+  components: {AiMap, AiBack, 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>