光轴

jihongshun

2 天以前 f03ea598d39abceac4eeb5f3a10b1fe7dd706b2c

 src/views/system/project/components/chooseModelDialog.vue

@@ -1,32 +1,43 @@
<template>
  <el-dialog
    title="选择模板"
    title="选择飞行模板"
    :visible.sync="dialogVisible"
    @close="cancel"
    width="50%">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活动区域">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
    width="20%">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="飞行模板">
        <el-select v-model="form.modelObj" placeholder="请选择飞行模板" @change="handleChange">
          <el-option
              v-for="item in templateArr"
              :key="item.id"
              :label="item.templateName"
              :value="item.id">
            </el-option>
        </el-select>
      </el-form-item>
       <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      <el-form-item>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
        <el-button @click="cancel">取 消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { flyDataInfo} from "@/api/system/template"
  export default {
    name:'chooseModelDialog',
    components: {
    },
    props: {
      deviceId: {
        type: String,
        defaule: null
      }
    },
    data() {
      return {
        dialogVisible: true,
        showMap:false,
        tableColumns: [
            {
              label: '设备名称',
@@ -37,59 +48,44 @@
              prop: 'belongingRoute'
            },
        ],
        selectArr:[]
        selectArr:[],
        form:{
        },
        templateArr:[],
        rules:{
          modelObj: [
            { required: true, message: '请选择模板', trigger: 'change' }
          ]
        }
      };
    },
    mounted() {
      console.log(this.deviceId)
      if(this.deviceId){
        flyDataInfo(this.deviceId).then(res=>{
          console.log(res)
          if(res.code == 200 ) {
            this.templateArr = res.rows
          }
        })
        //点击模板查询设备下的关联模型的所有模板 
      }
    },  
    methods: {
      cancel(){
        this.showMap = false
        this.$emit('cancel')
        this.$emit('cancelModel')
      }, 
      handleChange(value){
         this.form.deviceId = this.deviceId
        this.form.modelObj =this.templateArr.find(item => item.id === value)
      },
      chooseRow(row){
        this.showMap = false
        this.$emit('cancel')
        this.$emit('getRowData',row)
      },  
      submit(){
        // this.selectArr 
        this.$emit('dealChooseArr',this.selectArr)
      },
      clickRow(row){
        console.log(row)
        this.showMap =true
        setTimeout(()=>{
          const position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
          // 设置模型方向（可选）
          // const heading = Cesium.Math.toRadians(135); // 朝东南方向
          let model = viewer.entities.getById("modelList");
          const heading = Cesium.Math.toRadians(120); // 朝东南方向
          const pitch = 0;
          const roll = 0;
          const orientation = Cesium.Transforms.headingPitchRollQuaternion(
            position,
            new Cesium.HeadingPitchRoll(heading, pitch, roll)
          );
          if(!model) {
            // 加载 glTF 模型
            const entity = viewer.entities.add({
              id: "modelList",
              name: "modelList",
              position: position,
              orientation: orientation,
              model: {
                uri: row.modelRoute, // 替换成你的模型路径
                scale: 1000,
              },
            });
            viewer.flyTo(entity)
          }else {
            model.orientation = orientation
          }
        },1000)
      },
      handleSelectionChange(selection) {
        console.log(selection)
        this.selectArr = selection
        // //反显参数传递option对象  
        // this.form.deviceId = this.deviceId
        // console.log(this.form)
        this.$emit('receiveModel',this.form)
        this.$emit('cancelModel')
      },
    }
  };