JiangningUrbanManagePc/src/views/components/mapRight/index.vue

<template>
  <div class="right-main" id="rightParent">
    <div class="header-title" :class="id == 4 ? 'myHeader-title':''">
      <div>{{ id == 1 ? '网格名称' : id == 2 ? '区域名称' : id == 3 ? "路段名称" : "围栏名称"}}</div>
      <div>{{ id == 4 ? '今日已打卡' : '今日事件' }}</div>
      <div>{{ id == 4 ? '今日未打卡' : '已处理' }}</div>
      <div v-if="id != 4">{{ id == 4 ? '打卡异常' : '未处理' }}</div>
    </div>
    <div class="lists-main" id="rightBox" :style="{'height':(height - lists.height - 20) + 'px'}">
      <div class="main" v-for="(item,index) in rightArray" :key="index" :class="id == 4 ? 'mymain' : (index+1) % 2 == 0 ? 'main1' : ''">
        <el-tooltip :content="item.properties ? item.properties.NAME : item.name" placement="top" :disabled="tooltipDisabled">
          <div class="main-name" @mouseenter="spanMouseenter($event)" @click="divClick(item)">
            <img src="@/assets/images/location1.png" alt="">
            <span>{{ item.properties ? item.properties.NAME : item.name }}</span>
          </div>
        </el-tooltip>
        <!-- <div>{{ item.event }}</div>
        <div>{{ item.resolved }}</div>
        <div class="unsolved">{{ item.unsolved }}</div> -->
        <div v-if="id == 4">{{ item.ydk || 0 }}</div>
        <!-- 今日事件 -->
        <div v-else>{{ item.total }}</div>
        <div v-if="id == 4">{{ item.wdk || 0 }}</div>
        <!-- 已处理 -->
        <div v-else>{{ item.handled }}</div>
        <!-- 未处理 -->
        <div class="unsolved" v-if="id != 4">{{ item.unhandled }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'mapRight',
  data() {
    return {
      lists:{
        height:0,
      },
      tooltipDisabled:false,
    }
  },
  props:{
    rightArray:{
      type:Array,
      default:[],
    },
    height:{
      type:Number,
      default:0,
    },
    id:{
      type:Number,
      default:0
    }
  },
  methods:{
    spanMouseenter(e){
      var span = e.target.querySelector("span");
      var img = e.target.querySelector("img");
      // console.log(e.target,'target');
      // console.log(e.target.clientWidth,'clientWidth');
      // console.log(span,'span');
      // console.log(span.scrollWidth,'spanscrollWidth');
      // console.log(img,'img');
      // console.log(img.scrollWidth,'imgscrollWidth');
      if(e.target.clientWidth < img.scrollWidth + span.scrollWidth) {
        this.tooltipDisabled = false;
      } else {
        this.tooltipDisabled  = true;
      }
    },
    divClick(item){
      if(item.id) {
        let obj = {
          id:this.id,
          item:item
        }
        this.$emit('divClick', obj);
      } else {
        let obj = {
          id:this.id,
          item:item.fenceId
        }
        this.$emit('divClick', obj);
      }
    }
  },
  mounted(){
    
    this.$nextTick(()=>{
      // 获取父级容器元素
      var parentElement = document.getElementById('rightParent');

      // 获取盒子元素
      var boxElement = document.getElementById('rightBox');

      // 获取盒子元素相对于视口的位置信息
      var boxRect = boxElement.getBoundingClientRect();

      

      // 获取盒子距离父级顶部的距离
      var distanceToTop = boxRect.top - parentElement.getBoundingClientRect().top;
      this.lists.height = distanceToTop;
      // console.log(distanceToTop,"高度")
    })
  },
}
</script>
<style lang="scss" scoped>
.right-main {
  padding: 8px 0 0 17px;
  .header-title {
    padding: 0 24px;
    // display: flex;
    // align-items: center;
    // justify-content: space-between;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    // grid-template-rows: 1fr;
    background: rgba(7,127,255,0.1608);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #077FFF;
    height: 33px;
    div {
      font-size: 14px;
      font-family: 'Source Han Sans CN-Bold';
      font-weight: bold;
      color: #D3EEF2;
      line-height: 33px;
      min-width: 60px;
      text-align: center;
      &:nth-of-type(1) {
        text-align: left;
      }
    }
  }
  .myHeader-title {
    grid-template-columns: repeat(3, 1fr);
  }
  .lists-main {
    overflow-y: scroll;
    // height: 99px;
  }
  .main {
    padding: 0 24px;
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    display: grid;
    grid-template-columns: repeat(4, 25%);
    background: rgba(216,216,216,0.05);
    height: 33px;
    
    div {
      font-size: 14px;
      font-family: 'Source Han Sans CN-Regular';
      font-weight: 400;
      color: #D3EEF2;
      line-height: 33px;
      text-align: center;
      // min-width: 60px;
    }
    .main-name {
      cursor: pointer;
      display: flex;
      align-items: center;
      span {
        display: inline-block;
        text-align: left;
        flex: 1;
        font-size: 14px;
        font-family: 'Source Han Sans CN-Regular';
        font-weight: 400;
        color: #52B1FF;
        line-height: 33px;
        overflow: hidden;
        white-space: nowrap; /* 防止文本换行 */
        text-overflow: ellipsis; /* 显示省略号 */
      }
      img {
        width: 18px;
        margin-right: 8px;
      }
    }
    
    .unsolved {
      color: #FF6C6C;
      text-align: center;
    }
  }
  .mymain {
    grid-template-columns: repeat(3, 33.4%);
  }
  .main1 {
    background: rgba(187,220,255,0.16);
  }
}
</style>