zhny_ui/ems-ui-cloud/src/views/largeScreen/center.vue

<template>
  <div style="width: 100%;height: 100%">
    <CusTabs :tabs="areaTabs" :dropDown="true" @room-click="roomClick" :active.sync="areaType"
      @tab-click="areaTabClick" />
    <div class="center" id="model">

    </div>
  </div>

</template>
<script>
import CusTabs from './components/CusTabs.vue';
import {mapMutations} from 'vuex';
import renderModel from './three/renderModel'
import ComponentHandle from "@/utils/ComponentHandle";
import pvReal from "@/views/largeScreen/dialog/pv-real.vue";
import storageReal from "@/views/largeScreen/dialog/storage-real.vue";
import usageReal from "@/views/largeScreen/dialog/usage-real.vue";

const areaEnums = {
  all: {name: '全部', value: ''},
  '1': {name: '北区', value: '321283124S3001'},
  '2': {name: '南区', value: '321283124S3002'}
};
export default {
  name: 'Center',
  data () {
    return {
      areaType: 'all',
      areaTabs: [
        {name: '全部', value: 'all'},
        {name: '北区', value: '1'},
        {
          name: '南区',
          value: '2'
        }
      ],
      modelApi: null,
      roomActive: ''
    };
  },
  components: {
    CusTabs
  },
  mounted () {
    this.initThree();
  },
  methods: {
    ...mapMutations('userState', ['setAreaType']),
    roomClick (value) {
      this.roomActive = value
      if (this.roomActive && (this.areaType == '1' || this.areaType == '2')) {
        this.modelApi.modelChange(`model${this.roomActive}`,areaEnums[this.areaType])
      } else {
        this.modelApi.modelChange('model')
      }
    },
    areaTabClick () {
      this.roomActive = ''
      this.modelApi.controlRotate(false)
      this.setAreaType(areaEnums[this.areaType].value)
      if (this.roomActive == '') {
        this.modelApi.modelChange('model')
      }
      if (this.areaType === '2') {
        const target = {
          position: {x: -68.07200022928386, y: -573.3788080485533, z: 358.4490004266269}, // 相机目标位置
          targetContent: {x: -68.07200022928386, y: -58.61085804855406, z: -48.804124573372285}, // 控制器目标焦点
          time: 1000 // 动画时间
        };
        this.modelApi.flyTo(target)
      } else if (this.areaType === '1') {
        const target = {
          position: {x: 2.9287885309866817, y: -403.9781890137868, z: 376.33849737114133}, // 相机目标位置
          targetContent: {x: -2.929806062765964, y: 15.311141772539063, z: 44.637911374941055}, // 控制器目标焦点
          time: 1000 // 动画时间
        };
        this.modelApi.flyTo(target)
      } else {
        const target = {
          position: {x: -17.701772776272723, y: -728.8405392761424, z: 374.20604159261217}, // 相机目标位置
          targetContent: {x: -17.701772776272723, y: -307.6331500346563, z: 148.44436360369687}, // 控制器目标焦点
          time: 1000 // 动画时间
        };
        this.modelApi.flyTo(target,0.8)
      }
    },
    initThree () {
     setTimeout(() => {
       this.modelApi = new renderModel('#model')
      this.modelApi.init()
     }, 100);
      setTimeout(() => {
        this.modelApi.addDialog(ComponentHandle.createComponent({
          component: pvReal,
          props: {
            areaCode: "321283124S3001"
          }
        }), "北区光伏", {
          x: 0,
          y: 20,
          z: 20
        })
        this.modelApi.addDialog(ComponentHandle.createComponent({
          component: storageReal,
          props: {
            areaCode: "321283124S3001"
          }
        }), "北区储能", {
          x: 120,
          y: 120,
          z: 20
        })
        this.modelApi.addDialog(ComponentHandle.createComponent({
          component: usageReal,
          props: {
            areaCode: "321283124S3001"
          }
        }), "北区负荷", {
          x: 0,
          y: 120,
          z: 20
        })

        this.modelApi.addDialog(ComponentHandle.createComponent({
          component: pvReal,
          props: {
            areaCode: "321283124S3002"
          }
        }), "南区光伏", {
          x: -40,
          y: -80,
          z: 20
        })
        this.modelApi.addDialog(ComponentHandle.createComponent({
          component: storageReal,
          props: {
            areaCode: "321283124S3002"
          }
        }), "南区储能", {
          x: -120,
          y: -120,
          z: 20
        })
        this.modelApi.addDialog(ComponentHandle.createComponent({
          component: usageReal,
          props: {
            areaCode: "321283124S3002"
          }
        }), "南区负荷", {
          x: 0,
          y: -140,
          z: 20
        })
      }, 2000);
    }
  }
}
</script>
<style lang='scss' scoped>
.tabs {
  position: absolute;
  top: 90px;
  left: 425px;
  z-index: 50;
}

.center {
  // background: url("~@/assets/images/center.jpg") no-repeat;
  // background-size:cover ;
  // width: calc(100% - 806px);
  width: 100%;
  // margin: auto auto 0;
  height: 100%;
  position: relative;
  z-index: 1;


  ::v-deep .tag3d {
    // color: #fff;
    font-weight: 500;
    font-size: 20px;
  }

}
</style>