zhgdyun/src/views/projectAdmin/fourEngin/command/center.vue

<template>
  <div class="container">
    <div class="image">
      <img src="../assets/images/command-center/map.png" />
      <!-- 标记点 -->
      <div class="sign" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
        <!-- <img src="../assets/images/command-center/marker.png" > -->
        <div class="sign-item"></div>
      </div>
      <!-- 信息窗体 -->
      <div class="information-form">
        <div class="form">
          <div class="form-item" style="height: 30px;" v-for="(item, key) in informationForm" :key="key">
            <span class="label">{{ item.label }}</span>
            <div class="bottom">
              <span class="value" :style="{ fontStyle: item.unit ? 'italic' : '' }">{{ item.value }}</span>
              <span v-if="item.value" class="unit">&nbsp;{{ item.unit }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listProjectInfo } from '@/assets/js/api/zhongjianFourth'

export default {
  data() {
    return {
      // 信息窗体开关
      open: false,
      // 信息窗体表单
      informationForm: {
        projectName: { label: '项目名称:', value: undefined },
        bulidStatus: { label: '项目状态:', value: undefined },
        constructionStage: { label: '形象进度:', value: undefined },
        projectAcreage: { label: '工程面积:', value: undefined, unit: '㎡' },
        constructionUnit: { label: '建设单位:', value: undefined },
        projectAddress: { label: '项目地址:', value: undefined }
      },
      // 项目状态枚举
      projectStatusEnum: {
        0: '未开工',
        1: '在建',
        2: '停工',
        3: '验收',
        4: '完工'
      },
      // 形象进度枚举
      constructionStageEnum: {
        1: '施工证获取',
        2: '土方开挖',
        3: '桩基',
        4: '支护开始',
        5: '垫层完成',
        6: '正负零',
        7: '工程达到预售条件',
        8: '主体施工',
        9: '主体封顶',
        10: '装饰装修',
        11: '景观园林',
        12: '主体交付',
        13: '预售证获取',
        14: '规划验收',
        15: '竣工备案完成'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询数据 */
    getList() {
      listProjectInfo({ projectSn: this.$store.state.projectSn }).then(res => {
        console.log('项目信息: ', res)
        const informationForm = this.informationForm
        Object.keys(informationForm).forEach(key => {
          
          if (key === 'constructionStage') {
            informationForm[key].value = this.constructionStageEnum[res.result[key]]
          } else if (key === 'bulidStatus') {
            informationForm[key].value = this.projectStatusEnum[res.result[key]]
          } else {
            informationForm[key].value = res.result[key]
          }
        })
      })
    },
    // 标记点 鼠标移入事件
    handleMouseenter() {
      this.open = true
    },
    // 标记点 鼠标移出事件
    handleMouseleave() {
      this.open = false
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;

  .image {
    width: 100%;
    position: relative;
    img {
      width: 100%;
    }

    // 标记点
    .sign {
      position: absolute;
      right: 28%;
      bottom: 15%;

      width: 50px;
      height: 50px;
      cursor: pointer;

      &:hover + .information-form,
      .information-form:hover {
        display: block !important;
      }

      &::before {
        content: '';
        display: block;

        box-sizing: border-box;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 8;
        width: 20px;
        height: 20px;
        background-color: #328e99;
        border-radius: 50%;
        border: 2px solid #ff6700;
        animation: change-small 1.1s ease-in-out infinite;
      }

      &::after {
        content: '';
        display: block;

        box-sizing: border-box;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        background-color: #328e99;
        border-radius: 50%;
        border: 2px solid #ff6700;
        animation: change 2.2s ease-in-out infinite;
      }

      .sign-item {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 9;
        width: 20px;
        height: 20px;
        background-color: #ff6700;
        border-radius: 50%;
        &::before {
          content: '';
          display: block;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 10px;
          height: 10px;
          background-color: #7a5a4e;
          border-radius: 50%;
        }
      }
    }

    @keyframes change-small {
      from {
        width: 20px;
        height: 20px;
        opacity: 0;
      }
      to {
        width: 32px;
        height: 32px;
        opacity: 1;
      }
    }


    @keyframes change {
      from {
        width: 20px;
        height: 20px;
        opacity: 0;
      }
      to {
        width: 45px;
        height: 45px;
        opacity: 1;
      }
    }

    

    // 信息窗体
    .information-form {
      display: none;
      position: absolute;
      right: 33%;
      top: 23%;

      padding: 20px;
      width: 300px;
      height: 400px;
      background-color: #44bfc598;
      border: 2px solid #89a483;
      border-radius: 4px;
      transition: all 0.3s;
      .form {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        .form-item {
          display: flex;
          align-items: center;
          padding: 5px 0;
          font-weight: bold;
          .label {
            margin-right: 10px;
            white-space: nowrap;
            color: #002636;
          }

          .bottom {
            color: #000;
          }
        }
      }
    }
  }
}
</style>