epmet-work-pc/src/views/modules/communityParty/regionalParty/unitsDetail.vue

<template>
  <div>
    <div class="dialog-h-content scroll-h">
      <div v-if="initLoading" class="m-detail-main">
        <div class="m-info">
          <div class="m-info-prop">
            <span class="u-info-title-2">单位名称：</span>
            <span>{{ formData.unitName || "--" }}</span>
          </div>

          <div class="m-info-prop">
            <span class="u-info-title-2">分类：</span>
            <span>{{ formData.type || "--" }}</span>
          </div>

          <div class="m-info-prop">
            <span class="u-info-title-2">服务事项：</span>
            <span>{{ formData.serviceMatterList.join(",") }}</span>
          </div>

          <div class="m-info-prop">
            <span class="u-info-title-2">联系人：</span>
            <span>{{ formData.contact || "--" }}</span>
          </div>
          <div class="m-info-prop">
            <span class="u-info-title-2">联系电话：</span>
            <span>{{ formData.contactMobile || "--" }}</span>
          </div>
          <div class="m-info-prop">
            <span class="u-info-title-2">在职党员：</span>
            <span>{{ formData.memberCount || "--" }}</span>
          </div>
          <div class="m-info-prop">
            <span class="u-info-title-2">备注：</span>
            <span>{{ formData.remark || "--" }}</span>
          </div>
          <div class="m-info-prop">
            <span class="u-info-title-2">地理位置：</span>
            <span>{{ formData.address || "--" }}</span>
          </div>

          <div class="m-info-prop">
            <span class="u-info-title-2">地图位置：</span>
            <div class="div_map">
              <div id="app_detail_unit"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="m-detail-btn">
      <el-button size="small" @click="handleCancle">关 闭</el-button>
    </div>
  </div>
</template>

<script>
import { Loading } from "element-ui"; // 引入Loading服务
import nextTick from "dai-js/tools/nextTick";
import daiMap from "@/utils/dai-map";

var map;
var search;
var markers;
var infoWindowList;
var geocoder; // 新建一个正逆地址解析类

let loading; // 加载动画
export default {
  data() {
    return {
      formData: {},
      initLoading: false,
    };
  },
  components: {},
  created() {},

  methods: {
    handleCancle() {
      this.diaDestroy();
      this.$emit("diaDetailClose");
    },

    diaDestroy() {
      if (map) {
        // map.destroy()
      }
    },

    async initForm(row) {
      this.startLoading();
      this.formData = JSON.parse(JSON.stringify(row));
      this.initLoading = true;
      console.log(this.formData);
      // await nextTick(200)

      let { latitude, longitude } = this.$store.state.user;
      console.log("lat" + latitude + ",lon" + longitude);
      if (this.formData.latitude && this.formData.longitude) {
        latitude = this.formData.latitude;
        longitude = this.formData.longitude;
      }
      if (!latitude || latitude == "" || latitude == "0") {
        latitude = 39.9088810666821;
        longitude = 116.39743841556731;
      }
      this.$nextTick(() => {
        if (!map) {
          this.initMap(latitude, longitude);
        } else {
          map.setCenter(latitude, longitude);
          map.setMarker(latitude, longitude);
        }
      });

      this.endLoading();
    },

    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
    initMap(latitude, longitude) {
      map = new daiMap(
        document.getElementById("app_detail_unit"),
        { latitude, longitude },
        {
          zoom: 16.2, // 设置地图缩放级别
          pitch: 43.5, // 设置俯仰角
          rotation: 45, // 设置地图旋转角度
        }
      );

      // // 监听地图平移结束
      // map.on("dragend", (e) => {
      //   this.handleMoveCenter(e);
      // });

      map.setCenter(latitude, longitude);
      map.setMarker(latitude, longitude);
    },
    // 开启加载动画
    startLoading() {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: "正在加载……", // 加载中需要显示的文字
        background: "rgba(0,0,0,.7)", // 背景颜色
      });
    },
    // 结束加载动画
    endLoading() {
      // clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
  computed: {},
  props: {},
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/modules/management/detail-main.scss";
</style>
<style scoped>
</style>