zhgdyun/src/views/projectAdmin/fourEngin/security/centerTop.vue

<template>
  <Card title="数字工地" showRefresh @query="handleQuery" class="mapContent">
    <vue-scroll>
    <div class="pane mapUrl">
      <img :src="imageUrlMap" alt="" class="bgPackImg" ref="bgPackImg" @load="countBoxSize" style="width: 100%; height: 571px; position: relative;top:7px">
      <div
        class="point"
        :class="[`i-video`, { show: tabIndex === 0 || point === tabs[tabIndex].value }]"
        v-for="(point, index) in points"
        :key="index"
        @click="handlePoint(point)"
        :style="{
          top: point.mapY / imgHeightScale - 36 + 'px',
          left: point.mapX / imgWidthScale - 22 + 'px'
        }"
        v-show="showPoints"
      >
      </div>
      <FaceGageDialog v-if="gateDialog" :close="() => (gateDialog = false)" :data="faceGateData" />
      <EnvironmentDialog v-if="environmentDialog" :data="environmentInfo" :close="() => (environmentDialog = false)" />
      <VideoDialog v-if="videoDialog" :close="() => (videoDialog = false)" :data="pointdata" />
      <ElevatorDialog v-if="elevatorDialog" :close="() => (elevatorDialog = false)" />
      <TowerDialog v-if="towerDialog" :close="() => (towerDialog = false)" />
    </div>
  </vue-scroll>
    <!-- <div class="tabs">
      <div class="tab" :class="{ checked: index === tabIndex }" v-for="(tab, index) in tabs" :key="index" @click="changeTab(index)">
        {{ tab.label }}
      </div>
    </div> -->
  </Card>
</template>

<script>
import Card from '../components/Card.vue'
import JNestedRingChart from '@/views/projectAdmin/jlw/jChart/pie/JNestedRingChart.vue'
import FaceGageDialog from '@/views/projectAdmin/jlw/digitalSite/components/FaceGageDialog.vue'
import EnvironmentDialog from '@/views/projectAdmin/jlw/digitalSite/components/EnvironmentDialog.vue'
import VideoDialog from '@/views/projectAdmin/jlw/digitalSite/components/VideoDialog.vue'
import ElevatorDialog from '@/views/projectAdmin/jlw/digitalSite/components/ElevatorDialog_.vue'
import TowerDialog from '@/views/projectAdmin/jlw/digitalSite/components/TowerDialog.vue'
import { selectWorkerAttendanceByDevApi,selectProjectGetProjectInfoBySn,selectDevCoordinateListApi } from '@/assets/js/api/dataBoard'
import { getRealTimeDustNoiseDataApi } from '@/assets/js/api/environmentManage'
export default {
  components: { Card, JNestedRingChart, FaceGageDialog, EnvironmentDialog, VideoDialog, ElevatorDialog, TowerDialog },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  mounted() {
    this.getFaceGateInfo()
    this.getEnvironmentInfo()
    this.getProjectInfoBySnImg()
    this.getAllDevPointList()
  },
  data() {
    return {
      pointdata:{},
      projectSn: this.$store.state.projectSn,
      tabIndex: 0,
      tabs: [
        { label: '全部', value: 'all' },
        // { label: '塔机监测', value: 'tower' },
        // { label: '升降机监测', value: 'elevator' },
        { label: '视频监测', value: 'video' },
        { label: '环境监测', value: 'environment' },
        // { label: '人脸闸机', value: 'gate' }
      ],
      gateDialog: false,
      faceGateData: {
        list: [],
        totalAttendance: { inTotalNum: 0, outTotalNum: 0 },
        ufaceDev: { deviceState: 1 }
      },
      environmentDialog: false,
      environmentInfo: {},
      videoDialog: false,
      elevatorDialog: false,
      towerDialog: false,
      imageUrlMap:'',//平面图
      imgWidthScale: 0, //工地图片与容器宽度的比例
      imgHeightScale: 0, //工地图片与容器高度的比例
      points: [],
      showPoints: false
    }
  },
  methods: {
    // 计算点位的缩小比
    countBoxSize() {
      this.$nextTick(() => {
        setTimeout(() => {
          let el = document.querySelector('.mapContent')
          let imgDom = document.querySelector('.bgPackImg')
          this.imgWidthScale = imgDom.naturalWidth / imgDom.width
          this.imgHeightScale = imgDom.naturalHeight / imgDom.height
          let boxWidthHalf = el.offsetWidth / 2
          let imgWidthHalf = imgDom.width / 2
          let leftMove = imgWidthHalf - boxWidthHalf
          console.log(this.imgWidthScale, this.imgHeightScale)
          imgDom.style.top = 0
          imgDom.style.left = -leftMove + 'px'
          this.showPoints = true
        }, 200)
      })
    },
    // 获取所有点位
    getAllDevPointList() {
      let data = {
        projectSn: this.projectSn,
        devType: '4'
      }
      // 获取设备信息
      selectDevCoordinateListApi(data).then(res => {
        console.log("获取设备信息 :"+JSON.stringify(res.result));
        this.points = res.result
      })
    },
    //获取项目平面图
   async getProjectInfoBySnImg(){
      const res= await selectProjectGetProjectInfoBySn({
        projectSn:this.projectSn
      })
      console.log('项目平面图------------------',res);
      this.imageUrlMap = res.result.constructionMapUrl;
    },
    /** 查询 */
    handleQuery() {},
    changeTab(index) {
      this.tabIndex = index
    },
    handlePoint(point) {
      this.pointdata = point
      this.videoDialog = true
    },
    getFaceGateInfo() {
      selectWorkerAttendanceByDevApi({
        projectSn: this.projectSn,
        devSn: '2525'
      }).then(res => {
        this.faceGateData = { ...res.result }
      })
    },
    getEnvironmentInfo() {
      getRealTimeDustNoiseDataApi({ deviceId: 'BDDA658E1AB347B783E5FAA283466CA9', projectSn: this.projectSn }).then(res => {
        if (res.code == 200) {
          this.environmentInfo = res.result || {}
        }
      })
    }
  },
}
</script>

<style lang="less" scoped>
.pane {
  // position: relative;
  // margin: 5px 20px;
  // height: 85%;
  // background: url('~@/views/projectAdmin/jlw/assets/images/digitalSite/bg-all.png') no-repeat;
  // background-position: center;
  display: inline-block;
  position: relative;
  width: 100%;
  overflow: hidden;
  .mapUrl {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  // img{
  //   position: absolute;
  //   width: 100%;
  //   height: 100%;
  // }
  .point {
    position: absolute;
    width: 41px;
    height: 48px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    display: none;
    &.show {
      display: block;
    }
    // &.i-tower {
    //   background-image: url('~@/views/projectAdmin/jlw/assets/images/digitalSite/icons/i-tower-crane.png');
    // }
    // &.i-elevator {
    //   background-image: url('~@/views/projectAdmin/jlw/assets/images/digitalSite/icons/i-elevator.png');
    // }
    &.i-video {
      background-image: url('~@/views/projectAdmin/jlw/assets/images/digitalSite/icons/i-video.png');
    }
    &.i-environment {
      background-image: url('~@/views/projectAdmin/jlw/assets/images/digitalSite/icons/i-environment.png');
    }
    // &.i-gate {
    //   background-image: url('~@/views/projectAdmin/jlw/assets/images/digitalSite/icons/i-gate.png');
    // }
    &:nth-child(1) {
      bottom: 10%;
      left: 39%;
    }
    &:nth-child(2) {
      top: 26%;
      right: 35%;
    }
    &:nth-child(3) {
      top: 41%;
      left: 32.5%;
    }
    &:nth-child(4) {
      top: 15%;
      right: 41%;
    }
    &:nth-child(5) {
      top: 57%;
      left: 28%;
    }
    &:nth-child(6) {
      top: 40%;
      left: 67%;
    }
    &:nth-child(7) {
      top: 28%;
      left: 45%;
    }
    &:nth-child(8) {
      bottom: 9%;
      left: 53%;
    }
    &:nth-child(9) {
      bottom: 22%;
      right: 27.5%;
    }
    &:nth-child(10) {
      bottom: 17%;
      left: 27%;
    }
  }
}
.tabs {
  height: 15%;
    // padding: 0 14px;
    display: flex;
    align-items: flex-end;height: 15%;
  // padding: 0 40px;
  display: flex;
  // justify-content: space-between;
  margin-left: -20px;
  align-items: flex-end;
  .tab {
    margin-bottom: 20px;
    width: 114px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    background: url('~@/views/projectAdmin/dataBoard/projectHuScreen/assets/images/digitalSite/bg-btn.png') no-repeat;
    margin-left: 30px;
    cursor: pointer;
    &.checked {
      background-image: url('~@/views/projectAdmin/dataBoard/projectHuScreen/assets/images/digitalSite/bg-btn-checked.png');
    }
  }
}
</style>