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

<template>
  <div class="center" id="model">
    <CusTabs :tabs="areaTabs" :active.sync="areaType" @tab-click="areaTabClick" />
  </div>
</template>
<script>
import CusTabs from './components/CusTabs.vue';
import {mapMutations} from 'vuex';
import renderModel from './three/renderModel'
export default {
  name: 'Center',
  data () {
    return {
      areaType: '',
      areaTabs: [{name: '全部', value: ''}, {name: '北区', value: '1'}, {name: '南区', value: '2'}],
      modelApi: null,
    };
  },
  components: {
    CusTabs
  },
  mounted () {
    this.initThree();
  },
  methods: {
    ...mapMutations('userState', ['setAreaType']),
    areaTabClick () {
      this.setAreaType(this.areaType)
      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,1.2)
      } 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: -20, y: -652, z: 500}, // 相机目标位置
          targetContent: {x: -20, y: -20, z: 0}, // 控制器目标焦点
          time: 1000 // 动画时间
        };
        this.modelApi.flyTo(target)
      }
    },
    initThree () {
      setTimeout(() => {
        this.modelApi = new renderModel('#model')
        this.modelApi.init()
      }, 100)

    }
  }
}
</script>
<style lang='scss' scoped>
.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;

  .tabs {
    position: absolute;
    top: 90px;
    left: 403px;
    z-index: 45;
  }

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

  ::v-deep .load-container {
    background-color: rgba(12, 74, 110, 0.5);
    border: 2px solid rgba(165, 243, 252, 0.8);
    padding: 10px;

    .title {
      font-weight: bold;
      margin-left: 4px;
      border-left: 4px solid #2dd4bf;
      padding-left: 2px;
      margin-top: 3px;
      margin-bottom: 3px;
      font-size: 20px;
    }

    .data-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2px;
      padding: 0 3px;

      >div {
        background-color: #0F4565;
        white-space: nowrap;
        margin-right: 4px;
        padding: 5px;
        margin-top: 4px;

        .value {
          color: #06E3F9; // 根据需要调整颜色
        }
      }
    }
  }
}
</style>