qa-regulatory-gwj-vue/src/views/map/bubble/index.vue

<template>
  <div :id="id" class="box">
    <div class="box-wrap">
      <div class="area">
        <div/>
        <div class="area-title fontColor">{{ title }}</div>
        <div class="close" @click="closeClick"/>
      </div>
      <div class="content">
        <!--        <div class="data-li">-->
        <!--          <div class="data-label textColor">类型：</div>-->
        <!--          <div class="data-value">-->
        <!--            <span class="label-num textColor">{{ type }}</span>-->
        <!--          </div>-->
        <!--        </div>-->
        <template v-if="type === '分公司'">
          <div class="data-li">
            <div class="data-label textColor">统一社会信用代码：</div>
            <div class="data-value">
              <span class="label-num textColor line-3">{{ pd.CODE }}</span>
            </div>
          </div>
          <div class="data-li">
            <div class="data-label textColor">法定代表人：</div>
            <div class="data-value">
              <span class="label-num textColor line-3">{{ pd.LR_NAME }}</span>
            </div>
          </div>
          <div class="data-li">
            <div class="data-label textColor">主要负责人：</div>
            <div class="data-value">
              <span class="label-num textColor line-3">{{ pd.CONTACTS }}</span>
            </div>
          </div>
          <div class="data-li">
            <div class="data-label textColor">所属行业：</div>
            <div class="data-value">
              <span class="label-num textColor line-3">{{ pd.INDUSTRY_ALL }}</span>
            </div>
          </div>
          <div class="data-li">
            <div class="data-label textColor">地址：</div>
            <div class="data-value">
              <span class="label-num textColor line-3">{{ pd.ADDRESS_BUSINESS }}</span>
            </div>
          </div>
          <div v-if="pd.DESCR" class="data-li">
            <div class="data-label textColor">简介：</div>
            <div class="data-value">
              <span class="label-num textColor line-3">{{ pd.DESCR }}</span>
            </div>
          </div>
        </template>
        <div v-if="type === '分公司'" class="data-li h_60">
          <div class="btnbottem">
            <el-button type="primary" size="small" @click="branchClick">点击进入</el-button>
          </div>
        </div>

        <div v-if="type === '港口'" class="data-li h_60">
          <div class="data-label textColor">简介：</div>
          <div class="data-value">
            <span class="label-num textColor line-3">{{ descr }}</span>
          </div>
        </div>
        <div v-if="type === '港口'" class="data-li">
          <div class="btnbottem">
            <el-button type="primary" size="small" @click="portClick">点击进入</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'
export default {
  name: 'DynamicLabel',
  props: {
    title: {
      type: String,
      default: '标题'
    },
    id: {
      type: String,
      default: ''
    },
    CORP_INFO_ID: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    descr: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 10000
    },
    longitude: {
      type: Number,
      default: 0
    },
    latitude: {
      type: Number,
      default: 0
    },
    clickBranch: {
      type: Function,
      default: () => {
      }
    },
    clickPort: {
      type: Function,
      default: () => {
      }
    }
  },
  data() {
    return {
      pd: {}
    }
  },
  created() {
    if (this.type === '分公司') { this.showCorp() }
  },
  methods: {
    showCorp() {
      requestFN(
        '/corpinfo/goEdit',
        {
          CORPINFO_ID: this.id
        }
      ).then((data) => {
        this.pd = data.pd
      }).catch((e) => { })
    },
    closeClick() {
      if (this.closeEvent) {
        this.closeEvent()
      }
    },
    branchClick() {
      this.closeClick()
      this.clickBranch({
        CORP_INFO_ID: this.id,
        longitude: this.longitude,
        latitude: this.latitude,
        height: this.height
      })
    },
    portClick() {
      this.closeClick()
      this.clickPort({
        id: this.id,
        longitude: this.longitude,
        latitude: this.latitude,
        height: this.height,
        CORP_INFO_ID: this.CORP_INFO_ID
      })
    }
  }
}
</script>

<style lang="scss">
.box {
  width: 300px;
  position: relative;
  bottom: 0;
  left: 0;
  z-index: 1500;
}

.close {
  width: 14px;
  height: 14px;
  background-image: url("../../../assets/map/index/close.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

.box-wrap {
  position: absolute;
  left: 21%;
  top: 0;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #42698f;
  background-color: rgb(35 53 93 / 74%);
  box-shadow: 0 0 10px 2px #000000;
  animation: slide-in-elliptic-bottom-fwd 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.box-wrap .area {
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #42698f;
}

.area .area-title {
  text-align: center;
  line-height: 30px;
}

.data-value {
  flex: 1;
  font-size: 12px;
}

.textColor {
  font-size: 12px;
  color: #ffffff;
  text-shadow: 1px 1px 5px #002520d2;
}

.yellowColor {
  font-size: 14px;
  font-weight: bold;
  color: #f09e28;
  text-shadow: 1px 1px 5px #002520d2;
}

.blueColor {
  font-size: 12px;
  font-weight: bold;
  color: #e2bd3a;
  text-shadow: 1px 1px 5px #002520d2;
}

.fontColor {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 5px #002520d2;
}

.content {
  padding: 10px;
  line-height: 1.6;
}

.content .data-li {
  display: flex;
  align-items: center;
}

.btnbottem {
  border-top: 1px solid rgba(66, 105, 143, 0.26);
  width: 100%;
  text-align: center;
  margin-top: 5px;
  padding-top: 10px;
  .el-button--small{
    padding: 6px 15px;
  }
}
.h_60{
  height: 60px;
}

@keyframes slide-in-elliptic-bottom-fwd {
  0% {
    transform: translateY(600px) rotateX(30deg) scale(0);
    transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    transform: translateY(0) rotateX(0) scale(1);
    transform-origin: 50% -1400px;
    opacity: 1;
  }
}

@for $i from 1 through 5 {
  .line-#{$i} {
    @if $i == 1 {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    } @else {
      display: -webkit-box !important;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-line-clamp: $i;
      -webkit-box-orient: vertical !important;
    }
  }
}
</style>