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

<template>
  <Card title="数字工地" showRefresh @query="handleQuery">
    <div class="pane">
      <img :src="imageUrlMap" alt="">
      <div
        class="point"
        :class="[`i-${point}`, { show: tabIndex === 0 || point === tabs[tabIndex].value }]"
        v-for="(point, index) in points"
        :key="index"
        @click="handlePoint(point)"
      >
      </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)" />
      <ElevatorDialog v-if="elevatorDialog" :close="() => (elevatorDialog = false)" />
      <TowerDialog v-if="towerDialog" :close="() => (towerDialog = false)" />
    </div>
    <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 } 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()
  },
  data() {
    return {
      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:'',//平面图
    }
  },
  methods: {
    //获取项目平面图
   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[point + 'Dialog'] = 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 || {}
        }
      })
    }
  },
  computed: {
    points() {
      return ['tower', 'elevator', 'video', 'environment', 'gate'].map(tab => [tab, tab]).flat()
    }
  }
}
</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;
  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>