模型 && 设备相关

jihongshun

昨天 307db148645230afc780a3d5d16ffb97aa32c189

 src/views/system/device/components/deviceDialog.vue

@@ -4,28 +4,22 @@
    <Modal :title="form.id ? '修改设备' : '添加设备'" v-model="open">
      <template slot="form">
        <el-form ref="form" :model="form" :rules="rules" label-width="auto">
          <el-form-item label="设备名称" prop="name">
            <el-input v-model="form.name1" placeholder="请输入设备名称" />
          <el-form-item label="设备名称" prop="deviceName">
            <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
          </el-form-item>
          <el-form-item label="所属线路" prop="beloneRoad">
            <el-input v-model="form.name2" placeholder="请输入所属线路" />
          <el-form-item label="所属线路" prop="belongingRoute">
            <el-input v-model="form.belongingRoute" placeholder="请输入所属线路" />
          </el-form-item>
          <el-form-item label="选择模型" prop="wellType">
            <el-select v-model="form.wellType" placeholder="选择模型">
              <el-option v-for="key in modelListData" :key="key.id" :label="key.modelType"
          <el-form-item label="选择模型" prop="modelId">
            <el-select v-model="form.modelId" placeholder="选择模型"  @change="change">
              <el-option v-for="key in modelListData" :key="key.id" :label="key.modelName"
                :value="key.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="朝向" prop="direction">
            <el-input v-model="form.direction" placeholder="请输入朝向"  style="width:90%;"/>
          <el-form-item label="朝向" prop="face">
            <el-input v-model="form.face" placeholder="请输入朝向"  style="width:90%;"/>
            <i class="el-icon-map-location" @click="gettiles3dCam" title="预览"></i>
          </el-form-item>
          <!-- <el-form-item label="模型类型" prop="wellType">
            <el-select v-model="form.wellType" placeholder="模型类型">
              <el-option v-for="key in model_type" :key="key.value" :label="key.label"
                :value="key.value"></el-option>
            </el-select>
          </el-form-item> -->
        </el-form>
      </template>
      <template slot="cesium">
@@ -64,16 +58,14 @@
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: '请输入塔名称', trigger: 'blur' }
        deviceName: [
          { required: true, message: '请输入设备名称', trigger: 'blur' }
        ],
        deptId: [
          { required: true, message: '归属部门' } // trigger监听不到 使用@input单独校验vue-treeSelect表单项
        ]
      },
      // 部门数据
      deptOptions: null,
      modelListData:[]
      modelListData:[],
      modelUrl:null
    }
  },
  methods: {
@@ -92,6 +84,34 @@
              latitude: +this.form.latitude,
              altitude: +this.form.altitude,
            })
            let url = this.modelListData.filter(item=>item.id == this.form.modelId)[0].modelRoute
            this.modelUrl = url
            const position = Cesium.Cartesian3.fromDegrees(this.form.longitude, this.form.latitude, this.form.altitude);
            // 设置模型方向（可选）
            let model = viewer.entities.getById("MyModel");
            const heading = Cesium.Math.toRadians(this.form.face); // 朝东南方向
            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: "MyModel",
                name: "MyModel",
                position: position,
                orientation: orientation,
                model: {
                  uri:this.modelUrl, // 替换成你的模型路径
                  scale: 1000,
                },
              });
              viewer.flyTo(entity)
            }else {
              model.orientation = orientation
            }
          })
        })
      } else {
@@ -113,13 +133,17 @@
    submitForm() {
      this.$refs["form"].validate(valid => {
        console.log(this.form)
        // if (valid) {
        //   this.$api.save('work/tower/', 'id', Object.assign({}, this.form)).then(res => {
        //     this.form = {}
        //     this.$emit('on-submit')
        //     this.open = false
        //   })
        // }
        this.form.longitude = Number(this.form.longitude)
        this.form.latitude = Number(this.form.latitude)
        this.form.altitude = Number(this.form.altitude)
        this.form.face = Number(this.form.face)
        if (valid) {
          this.$api.save('tower/device/', 'id', Object.assign({}, this.form)).then(res => {
            this.form = {}
            this.$emit('on-submit')
            this.open = false
          })
        }
      });
    },
    cancel() {
@@ -136,14 +160,36 @@
        this.modelListData = res.rows || []
      })
    },    
    change(id){
      console.log(id)
      let url = this.modelListData.filter(item=>item.id == id)[0].modelRoute
      console.log(url)
      this.modelUrl = url
    },  
    gettiles3dCam(){
      console.log(this.form)
      if(!this.form.face) {
        return this.$message.error('请输入朝向')
      }
      if (!this.form.longitude) {
        this.$message.error("请输入经度");
        return;
      }
      if (!this.form.latitude) {
        this.$message.error("请输入纬度");
        return;
      }
      if (!this.form.altitude) {
        this.$message.error("请输入高度");
        return;
      }
      //动态经纬度朝向 加载模型位置预览
      const position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
      // const position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
      const position = Cesium.Cartesian3.fromDegrees(this.form.longitude, this.form.latitude, this.form.altitude);
      // 设置模型方向（可选）
      // const heading = Cesium.Math.toRadians(135); // 朝东南方向
      let model = viewer.entities.getById("MyModel");
      const heading = Cesium.Math.toRadians(this.form.direction); // 朝东南方向
      const heading = Cesium.Math.toRadians(this.form.face); // 朝东南方向
      const pitch = 0;
      const roll = 0;
      const orientation = Cesium.Transforms.headingPitchRollQuaternion(
@@ -158,7 +204,7 @@
          position: position,
          orientation: orientation,
          model: {
            uri: "/Model/tower.glb", // 替换成你的模型路径
            uri:  this.modelUrl, // 替换成你的模型路径
            scale: 1000,
          },
        });
@@ -166,8 +212,6 @@
      }else {
        model.orientation = orientation
      }
      

    }
  },
  mounted() {