real3d-portalsite/src/views/ConstructionApplication3D/billboard/addBiillboardModel.vue

<template>
  <div
    class="ZTGlobal"
    style="width: 100%; padding: 1rem 1rem 0rem 1rem; color: white"
  >
    <el-row>
      <el-col :span="7">
        <span>广告牌名称：</span>
      </el-col>
      <el-col :span="17"
        ><el-input
          size="mini"
          type="text"
          placeholder="请输入广告牌名称"
          v-model="billboardModel.billboardName"
        ></el-input
      ></el-col>
    </el-row>
    <el-row>
      <el-col :span="7"><span>附属信息</span></el-col>
      <el-col :span="17">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 6 }"
          size="mini"
          v-model="billboardModel.remarks"
        ></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="7"> <span>广告类型：</span></el-col>
      <el-col :span="17">
        <el-cascader
          ref="billboardTypeCascader"
          size="mini"
          placeholder="请选择广告类型"
          v-model="billboardModel.billboardType"
          @change="changeBillboardType"
          :options="options"
          :show-all-levels="false"
          :props="{
            value: 'billboardType',
            label: 'billboardType',
            children: 'children',
            emitPath: false,
          }"
        ></el-cascader>
        <!-- <el-select
          placeholder="请选择广告类型"
          v-model="billboardModel.billboardType"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :value="item.value"
            :label="item.label"
            >{{ item.label }}</el-option
          >
        </el-select> -->
      </el-col>
    </el-row>
    <div v-show="billboardReview.isAddModel">
      <!-- <el-row>
        <el-col :span="7"><span>选择广告牌样式: </span></el-col>
        <el-col :span="17">
          <div class="imgdomf" style="display: flex">
            <div
              v-for="thisbillboardModelRule in billboardModelRule"
              :key="thisbillboardModelRule"
              class="con-col imgdom hover_style"
              style="cursor: pointer"
              @click.stop="selectModeltemplate(thisbillboardModelRule)"
            >
              <a>{{ thisbillboardModelRule.templateName }}</a>
              <el-image
                style="width: 2rem; height: 2rem"
                :src="thisbillboardModelRule.thumbnailUrl"
                fit="fill"
              ></el-image>
            </div>
          </div>
        </el-col>
      </el-row> -->

      <el-row>
        <el-col :span="7"><span>添加广告模型：</span></el-col>
        <!-- <el-col :span="8">
          <el-switch
            size="mini"
            v-model="billboardReview.isAddModel"
            active-text="是"
            inactive-text="否"
          >
          </el-switch>
        </el-col> -->
        <el-col :span="17">
          <!-- v-if="
              selectbillboardModelRule &&
              selectbillboardModelRule.templateTopType == 'model'
            " -->
          <el-upload
            class="upload-demo"
            ref="upload"
            :action="uploadUrl"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess"
            :before-remove="beforeRemove"
            :before-upload="beforeAvatarUpload"
            :on-change="handleFileChange"
            :on-exceed="handleExceed"
            :auto-upload="true"
            :multiple="false"
            accept=".zip"
            :limit="1"
          >
            <el-button size="small" type="primary">上传广告模型</el-button>
            <!-- <el-button
              style="margin-left: 10px"
              size="small"
              type="success"
              @click="submitUpload"
              >上传到服务器</el-button
            > -->
            <div slot="tip" class="el-upload__tip" style="color: #ffffff">
              请上传包含gltf的zip文件，且不超过50M
              <br />不上传时，添加系统默认模型
            </div>
          </el-upload>

          <el-button
            size="mini"
            v-show="billboardReview.isAddModel"
            type="primary"
            @click="addModel()"
            >添加广告牌</el-button
          >
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7"><span>X坐标(度) </span></el-col>
        <el-col :span="17">
          <el-input-number
            name="x"
            v-model="billboardModel.x"
            size="mini"
            precision="6"
            :min="108.6"
            :max="110.5"
            @change="handleChange"
            step="0.000001"
            label="X坐标(度)"
          ></el-input-number
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="7"><span>Y坐标(度)：</span></el-col>
        <el-col :span="17">
          <el-input-number
            name="y"
            v-model="billboardModel.y"
            size="mini"
            precision="6"
            :min="18.16"
            :max="18.7"
            @change="handleChange"
            step="0.000001"
            label="Y坐标(度)"
          ></el-input-number>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7"> <span>Z坐标(米)：</span></el-col>
        <el-col :span="17">
          <el-input-number
            name="z"
            v-model="billboardModel.z"
            size="mini"
            precision="2"
            :min="0"
            :max="100"
            step="0.1"
            @change="handleChange"
            label="Z坐标(米)"
          ></el-input-number>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7"><span>X轴旋转角(度)：</span></el-col>
        <el-col :span="17">
          <el-input-number
            name="rotateX"
            v-model="billboardModel.rotateX"
            size="mini"
            precision="1"
            :min="0"
            :max="360"
            step="0.1"
            @change="handleChange"
            label="X轴旋转角(度)"
          ></el-input-number
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="7"><span>Y轴旋转角(度)：</span></el-col>
        <el-col :span="17">
          <el-input-number
            name="rotateY"
            v-model="billboardModel.rotateY"
            size="mini"
            precision="1"
            :min="0"
            :max="360"
            step="0.1"
            @change="handleChange"
            label="Y轴旋转角(度)"
          ></el-input-number
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="7"><span>Z轴旋转角(度)：</span></el-col>
        <el-col :span="17">
          <el-input-number
            name="rotateZ"
            v-model="billboardModel.rotateZ"
            size="mini"
            precision="1"
            :min="0"
            :max="360"
            step="0.1"
            @change="handleChange"
            label="Z轴旋转角(度)"
          ></el-input-number
        ></el-col>
      </el-row>
      <!--顶部广告牌-->
      <div v-if="JSON.stringify(billboardModel.templateTop) != '{}'">
        <el-divider v-if="JSON.stringify(billboardModel.templateCentre) != '{}'"
          >广告牌面模型参数</el-divider
        >
        <el-divider v-else>广告模型参数</el-divider>
        <!--如果模型是广告牌类型-->
        <div
          v-if="
            selectbillboardModelRule &&
            selectbillboardModelRule.templateTopType == 'billboard'
          "
        >
          <el-row v-if="thisfileurl">
            <el-col :span="7"> <span>缩放比例：</span></el-col>
            <el-col :span="17">
              <el-input-number
                name="scaleL"
                v-model="billboardModel.templateTop.scaleL"
                size="mini"
                precision="2"
                :min="0"
                :max="100"
                step="0.1"
                @change="handleChange"
                label="缩放比例："
              ></el-input-number>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7"> <span>长(米)：</span></el-col>
            <el-col :span="17">
              <el-input-number
                name="xL"
                v-model="billboardModel.templateTop.xL"
                size="mini"
                precision="2"
                :min="0"
                :max="100"
                step="0.1"
                @change="handleChange"
                label="长(米)"
              ></el-input-number>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7"> <span>高(米)：</span></el-col>
            <el-col :span="17">
              <el-input-number
                name="yL"
                v-model="billboardModel.templateTop.yL"
                size="mini"
                precision="2"
                :min="0"
                :max="100"
                step="0.1"
                @change="handleChange"
                label="高(米)"
              ></el-input-number>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7"
              ><span style="color: aqua">厚度(米)：</span></el-col
            >
            <el-col :span="17">
              <el-input-number
                name="zL"
                v-model="billboardModel.templateTop.zL"
                size="mini"
                precision="2"
                :min="0"
                :max="100"
                step="0.1"
                label="厚度(米)"
              ></el-input-number>
            </el-col>
          </el-row>
        </div>
        <!--如果模型是模型类型-->
        <div
          v-if="
            selectbillboardModelRule &&
            selectbillboardModelRule.templateTopType == 'model'
          "
        >
          <el-row>
            <el-col :span="7"> <span>缩放比例：</span></el-col>
            <el-col :span="17">
              <el-input-number
                name="scaleL"
                v-model="billboardModel.templateTop.scaleL"
                size="mini"
                precision="2"
                :min="0"
                :max="100"
                step="0.1"
                @change="handleChange"
                label="缩放比例："
              ></el-input-number>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7">
              <span style="color: aqua">长(米)：</span></el-col
            >
            <el-col :span="17">
              <el-input-number
                name="xL"
                v-model="billboardModel.templateTop.xL"
                size="mini"
                precision="2"
                :min="0"
                :max="100"
                step="0.1"
                label="长(米)"
              ></el-input-number>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7">
              <span style="color: aqua">高(米)：</span></el-col
            >
            <el-col :span="17">
              <el-input-number
                name="yL"
                v-model="billboardModel.templateTop.yL"
                size="mini"
                precision="2"
                :min="0"
                :max="100"
                step="0.1"
                label="高(米)"
              ></el-input-number>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7"
              ><span style="color: aqua">厚度(米)：</span></el-col
            >
            <el-col :span="17">
              <el-input-number
                name="zL"
                v-model="billboardModel.templateTop.zL"
                size="mini"
                precision="2"
                :min="0"
                :max="100"
                step="0.1"
                label="厚度(米)"
              ></el-input-number>
            </el-col>
          </el-row>
        </div>
        <!--如果模型是box类型-->
        <div
          v-if="
            selectbillboardModelRule &&
            selectbillboardModelRule.templateTopType == 'box'
          "
        >
          <el-row v-if="thisfileurl">
            <el-col :span="7"> <span>缩放比例：</span></el-col>
            <el-col :span="17">
              <el-input-number
                name="scaleL"
                v-model="billboardModel.templateTop.scaleL"
                size="mini"
                precision="2"
                :min="0"
                :max="100"
                step="0.1"
                @change="handleChange"
                label="缩放比例："
              ></el-input-number>
            </el-col>
          </el-row>
          <!--box-->
          <el-row>
            <el-col :span="7"> <span>长(米)：</span></el-col>
            <el-col :span="17">
              <el-input-number
                name="xL"
                v-model="billboardModel.templateTop.xL"
                size="mini"
                precision="2"
                :min="0"
                :max="100"
                step="0.1"
                @change="handleChange"
                label="长(米)"
              ></el-input-number>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7"> <span>高(米)：</span></el-col>
            <el-col :span="17">
              <el-input-number
                name="yL"
                v-model="billboardModel.templateTop.yL"
                size="mini"
                precision="2"
                :min="0"
                :max="50"
                step="0.1"
                @change="handleChange"
                label=""
                >宽/高(米)</el-input-number
              >
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7"><span>厚度(米)：</span></el-col>
            <el-col :span="17">
              <el-input-number
                name="zL"
                v-model="billboardModel.templateTop.zL"
                size="mini"
                precision="2"
                :min="0"
                :max="100"
                step="0.1"
                @change="handleChange"
                label="厚度(米)"
              ></el-input-number>
            </el-col>
          </el-row>
          <!--box-->
        </div>
      </div>
      <!--中部模型-->
      <div v-if="JSON.stringify(billboardModel.templateCentre) != '{}'">
        <el-divider>底座/立柱模型参数</el-divider>
        <!--如果模型是圆柱类型-->
        <div
          v-if="
            selectbillboardModelRule &&
            selectbillboardModelRule.templateCentreType == 'cylinder'
          "
        >
          <!--cylinder-->
          <el-row>
            <el-col :span="7"> <span>高(米)：</span></el-col>
            <el-col :span="17">
              <el-input-number
                name="xL"
                v-model="billboardModel.templateCentre.yL"
                size="mini"
                precision="2"
                :min="0"
                :max="100"
                step="0.1"
                @change="handleChange"
                label="高(米)"
              ></el-input-number>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7"> <span>半径(米)：</span></el-col>
            <el-col :span="17">
              <el-input-number
                name="zL"
                v-model="billboardModel.templateCentre.rL"
                size="mini"
                precision="2"
                :min="0"
                :max="50"
                step="0.1"
                @change="handleChange"
                label=""
                >半径(米)</el-input-number
              >
            </el-col>
          </el-row>
          <!--cylinder-->
        </div>

        <!--如果模型是box类型-->
        <div
          v-if="
            selectbillboardModelRule &&
            selectbillboardModelRule.templateCentreType == 'box'
          "
        >
          <!--box-->
          <el-row>
            <el-col :span="7"> <span>长(米)：</span></el-col>
            <el-col :span="17">
              <el-input-number
                name="xL"
                v-model="billboardModel.templateCentre.xL"
                size="mini"
                precision="2"
                :min="0"
                :max="100"
                step="0.1"
                @change="handleChange"
                label="长(米)"
              ></el-input-number>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="7"><span>宽(米)：</span></el-col>
            <el-col :span="17">
              <el-input-number
                name="zL"
                v-model="billboardModel.templateCentre.zL"
                size="mini"
                precision="2"
                :min="0"
                :max="100"
                step="0.1"
                @change="handleChange"
              ></el-input-number>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7"> <span>厚度(米)：</span></el-col>
            <el-col :span="17">
              <el-input-number
                name="yL"
                v-model="billboardModel.templateCentre.yL"
                size="mini"
                precision="2"
                :min="0"
                :max="50"
                step="0.1"
                @change="handleChange"
              ></el-input-number>
            </el-col>
          </el-row>
          <!--box-->
        </div>
      </div>
      <!--底部模型-->
      <!-- 弃用 -->
      <div v-if="JSON.stringify(billboardModel.templateBottom) != '{}'">
        <el-divider>底部模型参数</el-divider>
        <!--如果模型是box类型-->
        <div
          v-if="
            selectbillboardModelRule &&
            selectbillboardModelRule.templateBottomType == 'box'
          "
        >
          <!--box-->
          <el-row>
            <el-col :span="7"> <span>长(米)：</span></el-col>
            <el-col :span="17">
              <el-input-number
                name="xL"
                v-model="billboardModel.templateBottom.xL"
                size="mini"
                precision="2"
                :min="0"
                :max="100"
                step="0.1"
                @change="handleChange"
                label="长(米)"
              ></el-input-number>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7"> <span>宽/高(米)：</span></el-col>
            <el-col :span="17">
              <el-input-number
                name="yL"
                v-model="billboardModel.templateBottom.yL"
                size="mini"
                precision="2"
                :min="0"
                :max="50"
                step="0.1"
                @change="handleChange"
                label=""
                >宽/高(米)</el-input-number
              >
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7"><span>厚度(米)：</span></el-col>
            <el-col :span="17">
              <el-input-number
                name="zL"
                v-model="billboardModel.templateBottom.zL"
                size="mini"
                precision="2"
                :min="0"
                :max="100"
                step="0.1"
                @change="handleChange"
                label="厚度(米)"
              ></el-input-number>
            </el-col>
          </el-row>
          <!--box-->
        </div>
      </div>
      <!--附加参数-->
      <div v-if="billboardReview && billboardReview.AttachedData">
        <el-divider>附加参数</el-divider>
        <!--如果模型是box类型-->
        <div>
          <el-row
            v-for="AttachedDataItem in billboardReview.AttachedData"
            :key="AttachedDataItem.key"
          >
            <el-col :span="7">
              <span>{{ AttachedDataItem.value }}：</span></el-col
            >
            <el-col
              :span="17"
              v-if="
                AttachedDataItem.selectData &&
                AttachedDataItem.selectData.length > 0
              "
            >
              <el-select
                v-model="billboardModel.AttachedData[AttachedDataItem.key]"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in AttachedDataItem.selectData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col v-else :span="17">
              <el-input
                v-model="billboardModel.AttachedData[AttachedDataItem.key]"
                placeholder="请输入内容"
              ></el-input>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <el-row>
      <el-col :span="24">
        <span
          >注意：当前视角为保存完成后定位显示视角，请确保当前广告牌观察视角为最佳视角，保存即可
        </span>
      </el-col>
    </el-row>
    <el-row>
      <div style="display: inline-flex">
        <el-button size="mini" type="primary" @click="saveMode()"
          >保存</el-button
        >
        <el-button size="mini" @click="cancle()">取消</el-button>
      </div>
    </el-row>
  </div>
</template>
<script>
import { Image } from "element-ui";
import { v4 as uuidv4 } from "uuid";

import { addBillboardModelList } from "@/api/zt/ztApi.js";
/**
 * 添加的模型集合
 */
let modelList = [];
export default {
  props: {
    layerid: {
      type: String,
      default: "",
    },
    project: {
      type: String,
      default: "",
    },
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
    lydata: {
      type: Object,
      default: () => {
        return {};
      },
    },
    lyoption: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      billboardModel: {
        id: "",
        billboardInfoId: "",
        billboardName: "",
        billboardType: "",
        x: 109.56047,
        y: 18.36254,
        z: 3,
        rotateX: 0,
        rotateY: 0,
        rotateZ: 90,
        ReviewStatus: "",
        ReviewComments: "",
        isAddModel: false,
        remarks: "",
        template: {},
        templateTop: {},
        templateCentre: {},
        templateBottom: {},
        AttachedData: {},
      },
      options: [],
      /**
       * 编辑句柄
       */
      handlerPoint: null,
      /**
       * 当前编辑模型
       */
      currentEntity: null,

      point3D: null,
      GUID: "",
      billboardReview: { isAddModel: false, ModelType: "box", modelurl: "" },
      billboardModelRule: [],
      selectbillboardModelRule: null,
      uploadUrl: window.ZTaxiosURI + "/uploadFile/uploadZipFile",
      thisfileurl: "",
      fileList: [],
    };
  },
  watch: {},
  mounted() {
    this.getGGLX();
  },
  methods: {
    submitUpload() {
      //文件大小校验
      this.fileList.forEach((file) => {
        const isLt2M = file.size / 1024 / 1024 < 10;
        if (!isLt2M) {
          this.$message.error("图片大小不能超过 2MB!");
          return false;
        }
      });

      //校验添加文件完整性
      let gltffile = this.fileList.find((c) => c.name.includes(".gltf"));
      debugger;
      if (gltffile) {
        try {
          var reader = new FileReader();
          reader.onload = function () {
            if (reader.result) {
    
              //打印文件内容
              if (reader.result) {
                let contentJson = JSON.parse(reader.result);
              }
            } else {
              //清除
              this.$refs.upload.clearFiles();
              this.$message.error("gltf文件读取失败!");
            }
          };
          reader.readAsText(gltffile.raw);
        } catch (error) {
          console.log(error);
          //清除
          this.$refs.upload.clearFiles();
          this.$message.error("上传文件出现意外的错误!");
        }

        // this.$refs.upload.submit();
      } else {
        this.$message.error("请上传gltf主文件!");
        //清除
        this.$refs.upload.clearFiles();
      }
    },

    handleFileChange(file, fileList) {
      this.fileList = fileList;
    },
    //文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //文件列表超出最大文件个数回调
    handleExceed() {
      this.$message.error("请先删除已上传的文件，再上传!");
    },

    // 删除确认回调
    beforeRemove(file, fileList) {
      return true; //this.$confirm(`确定移除 ${file.name}？`);
    },
    //文件上传前回调
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 50;
      if (!isLt2M) {
        this.$message.error("文件大小不能超过 50MB!");
        return false;
      }
      return true;
    },
    //上传成功回调
    handleAvatarSuccess(res, file) {
      console.log(res);
      if (res.data.url.includes(".gltf")) {
        this.thisfileurl = res.data.url;
      } else {
        this.$message.error("请上传包含gltf文件的zip压缩包!");
        this.$refs.upload.clearFiles();
      }
    },

    //过滤广告类型
    getGGLX() {
      // if (this.project.dataurl) {
      //   this.options = window.billboardReviewList.filter(
      //     (c) => c.id == "wew1" || c.id == "wew2sdfk32"
      //   );
      // } else {
      //   this.options = window.billboardReviewList.filter((c) => c.id != "wew1");
      // }
      // 所有
      var sdf = window.billboardReviewList;
      //如果不是报建模型 去除报建类型
      if (!this.project.dataurl) {
        sdf = this.filterTreeByReportBuilding(sdf);
      }

      this.options = sdf;
    },

    filterTreeByReportBuilding(tree) {
      const treeArray = Array.isArray(tree) ? tree : [tree];

      return treeArray
        .filter(
          (node) => !node.isReportBuilding && node.isReportBuilding != true
        )
        .map((node) => {
          // 复制当前节点，避免修改原数据
          const newNode = { ...node };

          // 递归过滤子节点
          if (newNode.children && newNode.children.length > 0) {
            newNode.children = this.filterTreeByReportBuilding(
              newNode.children
            );
          }

          return newNode;
        });
    },

    /**
     * 点击添加位置
     */
    addModel() {
      var that = this;
      this.removeModel();
      if (modelList.length > 0) {
        for (let index = 0; index < modelList.length; index++) {
          const element = modelList[index];
          viewer.entities.removeById(element.id);
        }

        modelList = [];
      }
      if (that.billboardReview && that.billboardReview.ModelType) {
        that.TemplateDefaultValues(that.billboardReview.ModelType);
      }

      if (that.thisfileurl) {
        that.billboardModel.template.isImportModel = "true";
        debugger;
      }
      viewer._container.style.cursor = "pointer";
      that.GUID = uuidv4();
      that.handlerPoint = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
      //todo：在显示地形情况下点击创建点
      var imageurl = "../../../../static/ModelData/billboard/1.jpg";
      var modelurl = "../../../../static/ModelData/billboard/box.gltf";
      that.handlerPoint.setInputAction(function (event) {
        // // 使用场景的pick方法获取点击位置的实体
        // var pickedObject = viewer.scene.pick(event.position);
        // // 检查是否点击到了实体
        // if (
        //   scene.pickPositionSupported &&
        //   Cesium.defined(pickedObject) &&
        //   pickedObject.primitive
        // ) {
        //   debugger;

        // }

        var newposition = viewer.scene.pickPosition(event.position); //获取到地形图上面的坐标

        var orientation = Cesium.Transforms.headingPitchRollQuaternion(
          newposition,
          new Cesium.HeadingPitchRoll(
            Cesium.Math.toRadians(that.billboardModel.rotateZ),
            Cesium.Math.toRadians(that.billboardModel.rotateY),
            Cesium.Math.toRadians(that.billboardModel.rotateX)
          )
        );

        var coordinate = Cesium.Cartographic.fromCartesian(newposition);
        var longitude = Cesium.Math.toDegrees(coordinate.longitude);
        var latitude = Cesium.Math.toDegrees(coordinate.latitude);
        var height = coordinate.height;
        that.billboardModel.x = longitude;
        that.billboardModel.y = latitude;
        that.billboardModel.z = height;
        // var newPosition = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);

        if (that.billboardReview && that.billboardReview.ModelType) {
          var sd = that.billboardReview.ModelType;

          switch (sd) {
            //矩形广告
            case "rectangleBillboard":
              that.billboardModel.templateTop.templateType =
                that.selectbillboardModelRule.templateTopType;
              //计算当前实体的xyz
              that.billboardModel.templateTop.x = that.billboardModel.x;
              that.billboardModel.templateTop.y = that.billboardModel.y;
              if (that.billboardModel.template.isImportModel == "true") {
                that.billboardModel.templateTop.z = that.billboardModel.z;
              } else {
                that.billboardModel.templateTop.z =
                  that.billboardModel.z +
                  that.billboardModel.templateTop.yL / 2;
              }

              var p = Cesium.Cartesian3.fromDegrees(
                that.billboardModel.templateTop.x,
                that.billboardModel.templateTop.y,
                that.billboardModel.templateTop.z
              );
              if (that.billboardModel.template.isImportModel == "true") {
                var url = that.billboardModelRule.templateTopUrl || modelurl;

                if (that.thisfileurl) {
                  url = window.ZTaxiosURI + that.thisfileurl;
                  that.selectbillboardModelRule.templateTopUrl =
                    that.thisfileurl;
                }
      
                var entity = viewer.entities.add({
                  id: "top_billboard_" + that.GUID,
                  name: "gltf",
                  show: true,
                  position: p,
                  /**
                   * 模型
                   */
                  model: {
                    uri: url,
                    scale: that.billboardModel.templateTop.scaleL,
                  },
                  orientation: orientation,
                });
                modelList.push(entity);
              } else {
                var topentity = viewer.entities.add({
                  id: "top_billboard_" + that.GUID,
                  name: "gltf",
                  show: true,
                  position: p,
                  /**
                   * 长方体
                   */
                  box: {
                    dimensions: new Cesium.Cartesian3(
                      that.billboardModel.templateTop.xL,
                      that.billboardModel.templateTop.zL,
                      that.billboardModel.templateTop.yL
                    ),
                    show: true,
                    material: Cesium.Color.LIGHTGREEN,
                  },
                  orientation: orientation,
                });
                modelList.push(topentity);
              }

              break;
            // 立杆型广告
            case "postsBillboard":
              that.billboardModel.templateCentre.templateType =
                that.selectbillboardModelRule.templateCentreType;
              that.billboardModel.templateCentre.x = that.billboardModel.x;
              that.billboardModel.templateCentre.y = that.billboardModel.y;
              that.billboardModel.templateCentre.z =
                that.billboardModel.z +
                that.billboardModel.templateCentre.yL / 2;

              if (that.billboardModel.template.isImportModel != "true") {
                var c_p = Cesium.Cartesian3.fromDegrees(
                  that.billboardModel.templateCentre.x,
                  that.billboardModel.templateCentre.y,
                  that.billboardModel.templateCentre.z
                );
                var Centreentity = viewer.entities.add({
                  id: "Centre_billboard_" + that.GUID,
                  name: "gltf",
                  show: true,
                  position: c_p,
                  /**
                   * 圆柱
                   */
                  cylinder: {
                    length: that.billboardModel.templateCentre.yL, //圆柱体长度
                    topRadius: that.billboardModel.templateCentre.rL, //圆柱顶部半径
                    bottomRadius: that.billboardModel.templateCentre.rL, //圆柱体底部半径
                    material: Cesium.Color.LIGHTGREEN,
                    shadows: Cesium.ShadowMode.DISABLED, //指定圆柱体是否从每个光源投射或接收阴影
                  },
                  orientation: Cesium.Transforms.headingPitchRollQuaternion(
                    newposition,
                    new Cesium.HeadingPitchRoll(
                      Cesium.Math.toRadians(that.billboardModel.rotateZ),
                      Cesium.Math.toRadians(0),
                      Cesium.Math.toRadians(0)
                    )
                  ),
                });
                modelList.push(Centreentity);
              }

              that.billboardModel.templateTop.templateType =
                that.selectbillboardModelRule.templateTopType;
              //计算当前实体的xyz
              that.billboardModel.templateTop.x = that.billboardModel.x;
              that.billboardModel.templateTop.y = that.billboardModel.y;
              if (that.billboardModel.template.isImportModel == "true") {
                that.billboardModel.templateTop.z = that.billboardModel.z;
              } else {
                that.billboardModel.templateTop.z =
                  that.billboardModel.templateCentre.z +
                  that.billboardModel.templateCentre.yL / 2 +
                  that.billboardModel.templateTop.yL / 2;
              }

              var t_p = Cesium.Cartesian3.fromDegrees(
                that.billboardModel.templateTop.x,
                that.billboardModel.templateTop.y,
                that.billboardModel.templateTop.z
              );

              if (that.billboardModel.template.isImportModel == "true") {
                var url = that.billboardModelRule.templateTopUrl || modelurl;

                if (that.thisfileurl) {
                  url = window.ZTaxiosURI + that.thisfileurl;
                  that.selectbillboardModelRule.templateTopUrl =
                    that.thisfileurl;
                }
      
                var topentity = viewer.entities.add({
                  id: "top_billboard_" + that.GUID,
                  name: "gltf",
                  show: true,
                  position: t_p,
                  /**
                   * 模型
                   */
                  model: {
                    uri: url,
                    scale: that.billboardModel.templateTop.scaleL,
                  },
                  orientation: orientation,
                });
                modelList.push(topentity);
              } else {
                var topentity = viewer.entities.add({
                  id: "top_billboard_" + that.GUID,
                  name: "gltf",
                  show: true,
                  position: t_p,
                  /**
                   * 矩形
                   */
                  box: {
                    dimensions: new Cesium.Cartesian3(
                      that.billboardModel.templateTop.xL,
                      that.billboardModel.templateTop.zL,
                      that.billboardModel.templateTop.yL
                    ),
                    material: Cesium.Color.LIGHTGREEN,
                    // outline: false,
                    // outlineColor: Cesium.Color.SPRINGGREEN,
                    // outlineWidth: 1,
                  },
                  orientation: orientation,
                });
                modelList.push(topentity);
              }

              break;
            //底座型立杆广告
            case "ColumnWithaseBillboard":
              that.billboardModel.templateCentre.templateType =
                that.selectbillboardModelRule.templateBottomType;
              //计算当前实体的xyz
              that.billboardModel.templateCentre.x = that.billboardModel.x;
              that.billboardModel.templateCentre.y = that.billboardModel.y;
              that.billboardModel.templateCentre.z =
                that.billboardModel.z +
                that.billboardModel.templateCentre.yL / 2;

              if (that.billboardModel.template.isImportModel != "true") {
                var b_p = Cesium.Cartesian3.fromDegrees(
                  that.billboardModel.templateCentre.x,
                  that.billboardModel.templateCentre.y,
                  that.billboardModel.templateCentre.z
                );
                var bottomentity = viewer.entities.add({
                  id: "bottom_billboard_" + that.GUID,
                  name: "gltf",
                  show: true,
                  position: b_p,
                  /**
                   * 矩形
                   */
                  box: {
                    dimensions: new Cesium.Cartesian3(
                      that.billboardModel.templateCentre.xL,
                      that.billboardModel.templateCentre.zL,
                      that.billboardModel.templateCentre.yL
                    ),
                    material: Cesium.Color.LIGHTGREEN,
                    // outline: false,
                    // outlineColor: Cesium.Color.SPRINGGREEN,
                    // outlineWidth: 1,
                  },
                  orientation: Cesium.Transforms.headingPitchRollQuaternion(
                    newposition,
                    new Cesium.HeadingPitchRoll(
                      Cesium.Math.toRadians(that.billboardModel.rotateZ),
                      Cesium.Math.toRadians(0),
                      Cesium.Math.toRadians(0)
                    )
                  ),
                });
                modelList.push(bottomentity);
              }

              // that.billboardModel.templateCentre.templateType =
              //   that.selectbillboardModelRule.templateCentreType;
              // that.billboardModel.templateCentre.x = that.billboardModel.x;
              // that.billboardModel.templateCentre.y = that.billboardModel.y;
              // that.billboardModel.templateCentre.z =
              //   that.billboardModel.templateBottom.z +
              //   that.billboardModel.templateBottom.yL / 2 +
              //   that.billboardModel.templateCentre.yL / 2;

              // if (that.billboardModel.template.isImportModel != "true") {
              //   var c_p = Cesium.Cartesian3.fromDegrees(
              //     that.billboardModel.templateCentre.x,
              //     that.billboardModel.templateCentre.y,
              //     that.billboardModel.templateCentre.z
              //   );
              //   var Centreentity = viewer.entities.add({
              //     id: "Centre_billboard_" + that.GUID,
              //     name: "gltf",
              //     show: true,
              //     position: c_p,
              //     /**
              //      * 圆柱
              //      */
              //     cylinder: {
              //       length: that.billboardModel.templateCentre.yL, //圆柱体长度
              //       topRadius: that.billboardModel.templateCentre.rL, //圆柱顶部半径
              //       bottomRadius: that.billboardModel.templateCentre.rL, //圆柱体底部半径
              //       material: Cesium.Color.LIGHTGREEN,
              //       shadows: Cesium.ShadowMode.DISABLED, //指定圆柱体是否从每个光源投射或接收阴影
              //     },
              //     orientation: Cesium.Transforms.headingPitchRollQuaternion(
              //       newposition,
              //       new Cesium.HeadingPitchRoll(
              //         Cesium.Math.toRadians(that.billboardModel.rotateZ),
              //         Cesium.Math.toRadians(0),
              //         Cesium.Math.toRadians(0)
              //       )
              //     ),
              //   });
              //   modelList.push(Centreentity);
              // }

              that.billboardModel.templateTop.templateType =
                that.selectbillboardModelRule.templateTopType;
              //计算当前实体的xyz
              that.billboardModel.templateTop.x = that.billboardModel.x;
              that.billboardModel.templateTop.y = that.billboardModel.y;
              if (that.billboardModel.template.isImportModel == "true") {
                that.billboardModel.templateTop.z = that.billboardModel.z;
              } else {
                that.billboardModel.templateTop.z =
                  that.billboardModel.templateCentre.z +
                  that.billboardModel.templateCentre.yL / 2 +
                  that.billboardModel.templateTop.yL / 2;
              }

              // if (that.selectbillboardModelRule.templateTopAngleRoll) {
              //   var sd =
              //     that.billboardModel.templateTop.yL *
              //     Math.cos(that.selectbillboardModelRule.templateTopAngleRoll);
              //   that.billboardModel.templateTop.z =
              //     that.billboardModel.templateTop.z -
              //     sd +
              //     that.billboardModel.templateTop.zL;
              // }
              var t_p = Cesium.Cartesian3.fromDegrees(
                that.billboardModel.templateTop.x,
                that.billboardModel.templateTop.y,
                that.billboardModel.templateTop.z
              );

              if (that.billboardModel.template.isImportModel == "true") {
                var url = that.billboardModelRule.templateTopUrl || modelurl;
                if (that.thisfileurl) {
                  url = window.ZTaxiosURI + that.thisfileurl;
                  that.selectbillboardModelRule.templateTopUrl =
                    that.thisfileurl;
                }
      
                var entity = viewer.entities.add({
                  id: "top_billboard_" + that.GUID,
                  name: "gltf",
                  show: true,
                  position: t_p,
                  /**
                   * 模型
                   */
                  model: {
                    uri: url,
                    scale: that.billboardModel.templateTop.scaleL,
                  },
                  orientation: orientation,
                });
                modelList.push(entity);
              } else {
                var topentity = viewer.entities.add({
                  id: "top_billboard_" + that.GUID,
                  name: "gltf",
                  show: true,
                  position: t_p,
                  /**
                   * 矩形
                   */
                  box: {
                    dimensions: new Cesium.Cartesian3(
                      that.billboardModel.templateTop.xL,
                      that.billboardModel.templateTop.zL,
                      that.billboardModel.templateTop.yL
                    ),
                    material: Cesium.Color.LIGHTGREEN,
                    // outline: false,
                    // outlineColor: Cesium.Color.SPRINGGREEN,
                    // outlineWidth: 1,
                  },
                  orientation: orientation,
                });
                modelList.push(topentity);
              }

              break;
            //实物型广告（模型型）
            case "ModelBillboard":
              that.billboardModel.templateTop.templateType =
                that.selectbillboardModelRule.templateTopType;
              //计算当前实体的xyz
              that.billboardModel.templateTop.x = that.billboardModel.x;
              that.billboardModel.templateTop.y = that.billboardModel.y;
              that.billboardModel.templateTop.z = that.billboardModel.z;
              var p = Cesium.Cartesian3.fromDegrees(
                that.billboardModel.templateTop.x,
                that.billboardModel.templateTop.y,
                that.billboardModel.templateTop.z
              );
              var url = that.billboardModelRule.templateTopUrl || modelurl;

              if (that.thisfileurl) {
                url = window.ZTaxiosURI + that.thisfileurl;
                that.selectbillboardModelRule.templateTopUrl = that.thisfileurl;
              }
    
              var entity = viewer.entities.add({
                id: "top_billboard_" + that.GUID,
                name: "gltf",
                show: true,
                position: p,
                /**
                 * 模型
                 */
                model: {
                  uri: url,
                  scale: that.billboardModel.templateTop.scaleL,
                },
                orientation: orientation,
              });
              modelList.push(entity);
              break;
            //图片型广告
            case "imgBillboard":
              that.billboardModel.templateTop.templateType =
                that.selectbillboardModelRule.templateTopType;
              //计算当前实体的xyz
              var x = that.billboardModel.x;
              var y = that.billboardModel.y;
              var z =
                that.billboardModel.z + that.billboardModel.templateTop.yL / 2;
              if (that.billboardModel.template.isImportModel == "true") {
                z = that.billboardModel.z;
              }
              that.billboardModel.templateTop.x = x;
              that.billboardModel.templateTop.y = y;
              that.billboardModel.templateTop.z = z;
              var p = Cesium.Cartesian3.fromDegrees(
                that.billboardModel.templateTop.x,
                that.billboardModel.templateTop.y,
                that.billboardModel.templateTop.z
              );
              var url = that.billboardModelRule.templateTopUrl || imageurl;
              var entity = viewer.entities.add({
                id: "top_billboard_" + that.GUID,
                name: "gltf",
                show: true,
                position: p,
                /**
                 * 广告牌
                 */
                billboard: {
                  image: url,
                  width: that.billboardModel.templateTop.xL,
                  height: that.billboardModel.templateTop.yL,
                  rotation: that.billboardModel.rotateX,
                  sizeInMeters: true,
                },
                orientation: orientation,
              });
              modelList.push(entity);
              break;
            //上传的广告模型（模型型）
            // case "bjModel":
            //   that.billboardModel.templateTop.templateType =
            //     that.selectbillboardModelRule.templateTopType;
            //   //计算当前实体的xyz
            //   that.billboardModel.templateTop.x = that.billboardModel.x;
            //   that.billboardModel.templateTop.y = that.billboardModel.y;
            //   that.billboardModel.templateTop.z = that.billboardModel.z;
            //   var p = Cesium.Cartesian3.fromDegrees(
            //     that.billboardModel.templateTop.x,
            //     that.billboardModel.templateTop.y,
            //     that.billboardModel.templateTop.z
            //   );
            //   var url = that.billboardModelRule.templateTopUrl || modelurl;
            //   if (that.thisfileurl) {
            //     url = window.ZTaxiosURI + that.thisfileurl;
            //   }

            //   var entity = viewer.entities.add({
            //     id: "top_billboard_" + that.GUID,
            //     name: "gltf",
            //     show: true,
            //     position: p,
            //     /**
            //      * 模型
            //      */
            //     model: {
            //       uri: url,
            //       scale: that.billboardModel.templateTop.scaleL,
            //       shadows: Cesium.ShadowMode.DISABLED,
            //       // imageBasedLightingFactor: new Cesium.Cartesian2(10, 1),
            //       lightColor: new Cesium.Cartesian3(10.0, 10.0, 10.0), //解决模型发暗，直接把光增强10倍 //这样就是白光增强到100倍。对Pbr材质有效
            //     },
            //     orientation: orientation,
            //   });

            //   modelList.push(entity);
            //   break;

            default:
              that.billboardModel.templateTop.templateType =
                that.selectbillboardModelRule.templateTopType;
              //计算当前实体的xyz
              that.billboardModel.templateTop.x = that.billboardModel.x;
              that.billboardModel.templateTop.y = that.billboardModel.y;
              if (that.billboardModel.template.isImportModel == "true") {
                that.billboardModel.templateTop.z = that.billboardModel.z;
              } else {
                that.billboardModel.templateTop.z =
                  that.billboardModel.z +
                  that.billboardModel.templateTop.yL / 2;
              }
              var p = Cesium.Cartesian3.fromDegrees(
                that.billboardModel.templateTop.x,
                that.billboardModel.templateTop.y,
                that.billboardModel.templateTop.z
              );

              if (that.billboardModel.template.isImportModel == "true") {
                var url = that.billboardModelRule.templateTopUrl || modelurl;
                if (that.thisfileurl) {
                  url = window.ZTaxiosURI + that.thisfileurl;
                  that.selectbillboardModelRule.templateTopUrl =
                    that.thisfileurl;
                }
      
                var entity = viewer.entities.add({
                  id: "top_billboard_" + that.GUID,
                  name: "gltf",
                  show: true,
                  position: p,
                  /**
                   * 模型
                   */
                  model: {
                    uri: url,
                    scale: that.billboardModel.templateTop.scaleL,
                  },
                  orientation: orientation,
                });
                modelList.push(entity);
              } else {
                var topentity = viewer.entities.add({
                  id: "top_billboard_" + that.GUID,
                  name: "gltf",
                  show: true,
                  position: p,
                  /**
                   * 长方体
                   */
                  box: {
                    dimensions: new Cesium.Cartesian3(
                      that.billboardModel.templateTop.xL,
                      that.billboardModel.templateTop.zL,
                      that.billboardModel.templateTop.yL
                    ),
                    show: true,
                    material: Cesium.Color.LIGHTGREEN,
                  },
                  orientation: orientation,
                });
                modelList.push(topentity);
              }

              break;
          }
        }
        if (that.handlerPoint)
          that.handlerPoint.removeInputAction(
            Cesium.ScreenSpaceEventType.LEFT_CLICK
          );
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      // var colorStr = color.toCssColorString();
      // viewModel.boxMaterial = colorStr;
    },

    /**
     * 动态调整模型
     */
    handleChange() {
      this.$forceUpdate(); //解决点击计数器失效问题
      var that = this;
      debugger;
      // modelList.forEach(model => {

      // });
      // var currentEntity = viewer.entities.getById("billboard_" + that.GUID);
      // if (that.billboardReview && that.billboardReview.ModelType) {
      //   switch (that.billboardReview.ModelType) {
      //     case "box":
      //       /**
      //        * box
      //        */
      //       currentEntity.box.dimensions = new Cesium.Cartesian3(
      //         that.billboardModel.t_xL,
      //         that.billboardModel.t_zL,
      //         that.billboardModel.t_yL
      //       );

      //       break;
      //     case "img":
      //       /**
      //        * billoard
      //        */
      //       // debugger
      //       currentEntity.billboard.width = that.billboardModel.xL;
      //       currentEntity.billboard.height = that.billboardModel.yL;
      //       currentEntity.billboard.rotation = that.billboardModel.rotateX;
      //       break;
      //     case "model":
      //       /**
      //        * model
      //        */
      //       currentEntity.model.scale = that.billboardModel.xL;
      //       break;
      //   }
      // }

      // /**
      //  * 更新位置
      //  */
      // var newposition = Cesium.Cartesian3.fromDegrees(
      //   parseFloat(that.billboardModel.x),
      //   parseFloat(that.billboardModel.y),
      //   parseFloat(that.billboardModel.z)
      // );
      // currentEntity.position = newposition;
      // /**
      //  *  旋转
      //  */
      // var heading = Cesium.Math.toRadians(that.billboardModel.rotateX);
      // var pitch = Cesium.Math.toRadians(that.billboardModel.rotateY);
      // var roll = Cesium.Math.toRadians(that.billboardModel.rotateZ);
      // var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
      // var neworientation = Cesium.Transforms.headingPitchRollQuaternion(
      //   newposition,
      //   hpr
      // );
      // currentEntity.orientation = neworientation;

      // if (modelList.length > 0) {
      //   for (let index = 0; index < modelList.length; index++) {
      //     const element = modelList[index];
      //     viewer.entities.removeById(element.id);
      //   }
      //   modelList = [];
      // }

      if (that.billboardReview && that.billboardReview.ModelType) {
        var newposition = Cesium.Cartesian3.fromDegrees(
          parseFloat(that.billboardModel.x),
          parseFloat(that.billboardModel.y),
          parseFloat(that.billboardModel.z)
        );
        /**
         *  旋转
         */
        var heading = Cesium.Math.toRadians(that.billboardModel.rotateZ);
        var pitch = Cesium.Math.toRadians(that.billboardModel.rotateY);
        var roll = Cesium.Math.toRadians(that.billboardModel.rotateX);
        var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
        var orientation = Cesium.Transforms.headingPitchRollQuaternion(
          newposition,
          hpr
        );
        var sd = that.billboardReview.ModelType;

        switch (sd) {
          //矩形广告
          case "rectangleBillboard":
            //计算当前实体的xyz
            that.billboardModel.templateTop.x = that.billboardModel.x;
            that.billboardModel.templateTop.y = that.billboardModel.y;
            if (that.billboardModel.template.isImportModel == "true") {
              that.billboardModel.templateTop.z = that.billboardModel.z;
            } else {
              that.billboardModel.templateTop.z =
                that.billboardModel.z + that.billboardModel.templateTop.yL / 2;
            }
            var p = Cesium.Cartesian3.fromDegrees(
              that.billboardModel.templateTop.x,
              that.billboardModel.templateTop.y,
              that.billboardModel.templateTop.z
            );
            if (that.billboardModel.template.isImportModel == "true") {
              var topentity = viewer.entities.getById(
                "top_billboard_" + that.GUID
              );
              topentity.position = t_p;
              topentity.model.scale = that.billboardModel.templateTop.scaleL;
              topentity.orientation = orientation;
            } else {
              var topentity = viewer.entities.getById(
                "top_billboard_" + that.GUID
              );
              topentity.position = p;
              topentity.box.dimensions = new Cesium.Cartesian3(
                that.billboardModel.templateTop.xL,
                that.billboardModel.templateTop.zL,
                that.billboardModel.templateTop.yL
              );
              topentity.orientation = orientation;
            }

            break;
          // 立杆型广告
          case "postsBillboard":
            that.billboardModel.templateCentre.x = that.billboardModel.x;
            that.billboardModel.templateCentre.y = that.billboardModel.y;
            that.billboardModel.templateCentre.z =
              that.billboardModel.z + that.billboardModel.templateCentre.yL / 2;

            if (that.billboardModel.template.isImportModel != "true") {
              var c_p = Cesium.Cartesian3.fromDegrees(
                that.billboardModel.templateCentre.x,
                that.billboardModel.templateCentre.y,
                that.billboardModel.templateCentre.z
              );
              var Centreentity = viewer.entities.getById(
                "Centre_billboard_" + that.GUID
              );
              Centreentity.position = c_p;
              Centreentity.cylinder = {
                length: that.billboardModel.templateCentre.yL, //圆柱体长度
                topRadius: that.billboardModel.templateCentre.rL, //圆柱顶部半径
                bottomRadius: that.billboardModel.templateCentre.rL, //圆柱体底部半径
                material: Cesium.Color.LIGHTGREEN,
                shadows: Cesium.ShadowMode.DISABLED, //指定圆柱体是否从每个光源投射或接收阴影
              };
              Centreentity.orientation =
                Cesium.Transforms.headingPitchRollQuaternion(
                  newposition,
                  new Cesium.HeadingPitchRoll(
                    Cesium.Math.toRadians(that.billboardModel.rotateZ),
                    Cesium.Math.toRadians(0),
                    Cesium.Math.toRadians(0)
                  )
                );
            }

            //计算当前实体的xyz
            that.billboardModel.templateTop.x = that.billboardModel.x;
            that.billboardModel.templateTop.y = that.billboardModel.y;
            if (that.billboardModel.template.isImportModel == "true") {
              that.billboardModel.templateTop.z = that.billboardModel.z;
            } else {
              that.billboardModel.templateTop.z =
                that.billboardModel.templateCentre.z +
                that.billboardModel.templateCentre.yL / 2 +
                that.billboardModel.templateTop.yL / 2;
            }

            if (that.billboardModel.rotateX > 10) {
              that.billboardModel.templateTop.z =
                that.billboardModel.templateTop.z -
                that.billboardModel.templateTop.yL / 2;
            }
            var t_p = Cesium.Cartesian3.fromDegrees(
              that.billboardModel.templateTop.x,
              that.billboardModel.templateTop.y,
              that.billboardModel.templateTop.z
            );
            if (that.billboardModel.template.isImportModel == "true") {
              var topentity = viewer.entities.getById(
                "top_billboard_" + that.GUID
              );
              topentity.position = t_p;
              topentity.model.scale = that.billboardModel.templateTop.scaleL;
              topentity.orientation = orientation;
            } else {
              var topentity = viewer.entities.getById(
                "top_billboard_" + that.GUID
              );
              topentity.position = t_p;
              topentity.box.dimensions = new Cesium.Cartesian3(
                that.billboardModel.templateTop.xL,
                that.billboardModel.templateTop.zL,
                that.billboardModel.templateTop.yL
              );
              topentity.orientation = orientation;
            }

            break;
          //底座型立杆广告
          case "ColumnWithaseBillboard":
            //计算当前实体的xyz
            that.billboardModel.templateCentre.x = that.billboardModel.x;
            that.billboardModel.templateCentre.y = that.billboardModel.y;
            that.billboardModel.templateCentre.z =
              that.billboardModel.z + that.billboardModel.templateCentre.yL / 2;

            if (that.billboardModel.template.isImportModel != "true") {
              var b_p = Cesium.Cartesian3.fromDegrees(
                that.billboardModel.templateCentre.x,
                that.billboardModel.templateCentre.y,
                that.billboardModel.templateCentre.z
              );
              var bottomentity = viewer.entities.getById(
                "bottom_billboard_" + that.GUID
              );
              bottomentity.position = b_p;
              bottomentity.box.dimensions = new Cesium.Cartesian3(
                that.billboardModel.templateCentre.xL,
                that.billboardModel.templateCentre.zL,
                that.billboardModel.templateCentre.yL
              );
              bottomentity.orientation =
                Cesium.Transforms.headingPitchRollQuaternion(
                  newposition,
                  new Cesium.HeadingPitchRoll(
                    Cesium.Math.toRadians(that.billboardModel.rotateZ),
                    Cesium.Math.toRadians(0),
                    Cesium.Math.toRadians(0)
                  )
                );
            }

            // that.billboardModel.templateCentre.x = that.billboardModel.x;
            // that.billboardModel.templateCentre.y = that.billboardModel.y;

            // that.billboardModel.templateCentre.z =
            //   that.billboardModel.templateBottom.z +
            //   that.billboardModel.templateBottom.yL / 2 +
            //   that.billboardModel.templateCentre.yL / 2;

            // if (that.billboardModel.template.isImportModel != "true") {
            //   var c_p = Cesium.Cartesian3.fromDegrees(
            //     that.billboardModel.templateCentre.x,
            //     that.billboardModel.templateCentre.y,
            //     that.billboardModel.templateCentre.z
            //   );
            //   var Centreentity = viewer.entities.getById(
            //     "Centre_billboard_" + that.GUID
            //   );
            //   Centreentity.position = c_p;
            //   Centreentity.cylinder = {
            //     length: that.billboardModel.templateCentre.yL, //圆柱体长度
            //     topRadius: that.billboardModel.templateCentre.rL, //圆柱顶部半径
            //     bottomRadius: that.billboardModel.templateCentre.rL, //圆柱体底部半径
            //     material: Cesium.Color.LIGHTGREEN,
            //     shadows: Cesium.ShadowMode.DISABLED, //指定圆柱体是否从每个光源投射或接收阴影
            //   };
            //   Centreentity.orientation =
            //     Cesium.Transforms.headingPitchRollQuaternion(
            //       newposition,
            //       new Cesium.HeadingPitchRoll(
            //         Cesium.Math.toRadians(that.billboardModel.rotateZ),
            //         Cesium.Math.toRadians(0),
            //         Cesium.Math.toRadians(0)
            //       )
            //     );
            // }

            //计算当前实体的xyz
            that.billboardModel.templateTop.x = that.billboardModel.x;
            that.billboardModel.templateTop.y = that.billboardModel.y;
            if (that.billboardModel.template.isImportModel == "true") {
              that.billboardModel.templateTop.z = that.billboardModel.z;
            } else {
              that.billboardModel.templateTop.z =
                that.billboardModel.templateCentre.z +
                that.billboardModel.templateCentre.yL / 2 +
                that.billboardModel.templateTop.yL / 2;
            }

            // if (that.billboardModel.rotateX > 10) {
            //   // var sd =
            //   //   (that.billboardModel.templateTop.yL / 2) *
            //   //   Math.cos(that.billboardModel.rotateX);
            //   // that.billboardModel.templateTop.z =
            //   //   that.billboardModel.templateTop.z -
            //   //   sd +
            //   //   that.billboardModel.templateTop.zL;
            //   that.billboardModel.templateTop.z =
            //     that.billboardModel.templateTop.z -
            //     that.billboardModel.templateTop.yL / 2 +
            //     that.billboardModel.templateTop.zL;
            // }

            var t_p = Cesium.Cartesian3.fromDegrees(
              that.billboardModel.templateTop.x,
              that.billboardModel.templateTop.y,
              that.billboardModel.templateTop.z
            );
            if (that.billboardModel.template.isImportModel == "true") {
              var topentity = viewer.entities.getById(
                "top_billboard_" + that.GUID
              );
              topentity.position = t_p;
              topentity.model.scale = that.billboardModel.templateTop.scaleL;
              topentity.orientation = orientation;
            } else {
              var topentity = viewer.entities.getById(
                "top_billboard_" + that.GUID
              );
              topentity.position = t_p;
              topentity.box.dimensions = new Cesium.Cartesian3(
                that.billboardModel.templateTop.xL,
                that.billboardModel.templateTop.zL,
                that.billboardModel.templateTop.yL
              );
              topentity.orientation = orientation;
            }

            break;
          //实物型广告（模型型）
          case "ModelBillboard":
            //计算当前实体的xyz
            that.billboardModel.templateTop.x = that.billboardModel.x;
            that.billboardModel.templateTop.y = that.billboardModel.y;
            that.billboardModel.templateTop.z = that.billboardModel.z;
            var t_p = Cesium.Cartesian3.fromDegrees(
              that.billboardModel.templateTop.x,
              that.billboardModel.templateTop.y,
              that.billboardModel.templateTop.z
            );

            var topentity = viewer.entities.getById(
              "top_billboard_" + that.GUID
            );
            topentity.position = t_p;
            topentity.model.scale = that.billboardModel.templateTop.scaleL;
            topentity.orientation = orientation;

            break;
          //图片型广告
          case "imgBillboard":
            //计算当前实体的xyz
            var x = that.billboardModel.x;
            var y = that.billboardModel.y;
            var z =
              that.billboardModel.z + that.billboardModel.templateTop.yL / 2;
            if (that.billboardModel.template.isImportModel == "true") {
              z = that.billboardModel.z;
            }
            that.billboardModel.templateTop.x = x;
            that.billboardModel.templateTop.y = y;
            that.billboardModel.templateTop.z = z;
            var t_p = Cesium.Cartesian3.fromDegrees(
              that.billboardModel.templateTop.x,
              that.billboardModel.templateTop.y,
              that.billboardModel.templateTop.z
            );
            if (that.billboardModel.template.isImportModel == "true") {
              var topentity = viewer.entities.getById(
                "top_billboard_" + that.GUID
              );
              topentity.position = t_p;
              topentity.model.scale = that.billboardModel.templateTop.scaleL;
              topentity.orientation = orientation;
            } else {
              var topentity = viewer.entities.getById(
                "top_billboard_" + that.GUID
              );
              topentity.position = t_p;
              topentity.billboard.width = that.billboardModel.templateTop.xL;
              topentity.billboard.height = that.billboardModel.templateTop.yL;
              topentity.billboard.rotation = that.billboardModel.rotateX;
              topentity.orientation = orientation;
            }

            break;
          default:
            //计算当前实体的xyz
            that.billboardModel.templateTop.x = that.billboardModel.x;
            that.billboardModel.templateTop.y = that.billboardModel.y;
            if (that.billboardModel.template.isImportModel == "true") {
              that.billboardModel.templateTop.z = that.billboardModel.z;
            } else {
              that.billboardModel.templateTop.z =
                that.billboardModel.z + that.billboardModel.templateTop.yL / 2;
            }
            var p = Cesium.Cartesian3.fromDegrees(
              that.billboardModel.templateTop.x,
              that.billboardModel.templateTop.y,
              that.billboardModel.templateTop.z
            );
            if (that.billboardModel.template.isImportModel == "true") {
              var topentity = viewer.entities.getById(
                "top_billboard_" + that.GUID
              );
              topentity.position = p;
              topentity.model.scale = that.billboardModel.templateTop.scaleL;
              topentity.orientation = orientation;
            } else {
              var topentity = viewer.entities.getById(
                "top_billboard_" + that.GUID
              );
              topentity.position = p;
              topentity.box.dimensions = new Cesium.Cartesian3(
                that.billboardModel.templateTop.xL,
                that.billboardModel.templateTop.zL,
                that.billboardModel.templateTop.yL
              );
              topentity.orientation = orientation;
            }
            break;
        }
      }
    },

    /**
     * 类型修改时触发
     */
    changeBillboardType() {
      debugger;

      let sds = this.$refs["billboardTypeCascader"].getCheckedNodes()[0].data;
      this.billboardReview = JSON.parse(JSON.stringify(sds));

      if (this.billboardReview.isAddModel) {
        this.billboardModel.isAddModel = this.billboardReview.isAddModel;
        if (this.billboardReview && this.billboardReview.ModelType) {
          this.TemplateDefaultValues(this.billboardReview.ModelType);
        }
        this.billboardModelRule = JSON.parse(
          JSON.stringify(
            window.billboardModelRuleList.find(
              (c) => c.code == this.billboardReview.ModelType
            ).template
          )
        );
        this.selectbillboardModelRule =
          this.billboardModelRule.length > 0
            ? this.billboardModelRule[0]
            : null;
      } else {
        this.billboardModelRule = null;
      }

      this.removeModel();
    },
    //模板默认值
    TemplateDefaultValues(ModelType) {
      debugger;
      this.billboardModel.AttachedData = {};
      this.billboardModel.rotateX = 0;
      this.billboardModel.rotateY = 0;
      this.billboardModel.rotateZ = 90;
      switch (ModelType) {
        //矩形广告
        case "rectangleBillboard":
          this.billboardModel.templateBottom = {};
          this.billboardModel.templateCentre = {};
          this.billboardModel.templateTop = {
            xL: 1,
            yL: 1,
            zL: 0.1,
          };

          this.billboardModel.templateTop.scaleL = 1;

          break;
        // 立杆型广告
        case "postsBillboard":
          this.billboardModel.templateBottom = {};
          this.billboardModel.templateCentre = {
            yL: 1,
            rL: 0.1,
          };

          this.billboardModel.templateTop = {
            xL: 1,
            yL: 1,
            zL: 0.1,
          };

          this.billboardModel.templateTop.scaleL = 1;

          break;
        //底座型立杆广告
        case "ColumnWithaseBillboard":
          this.billboardModel.templateBottom = {
            // xL: 1,
            // yL: 0.1,
            // zL: 1,
          };

          this.billboardModel.templateCentre = {
            xL: 1,
            yL: 0.1,
            zL: 1,
          };

          this.billboardModel.templateTop = {
            xL: 1,
            yL: 1,
            zL: 0.1,
          };

          this.billboardModel.templateTop.scaleL = 1;

          break;
        //实物型广告（模型型）
        case "ModelBillboard":
          this.billboardModel.templateBottom = {};
          this.billboardModel.templateCentre = {};
          this.billboardModel.templateTop = {
            scaleL: 1,
          };

          break;
        //图片型广告
        case "imgBillboard":
          this.billboardModel.templateBottom = {};
          this.billboardModel.templateCentre = {};
          this.billboardModel.templateTop = {
            xL: 2,
            yL: 1,
          };

          this.billboardModel.templateTop.scaleL = 1;

          break;
        default:
          this.billboardModel.templateBottom = {};
          this.billboardModel.templateCentre = {};
          this.billboardModel.templateTop = {
            xL: 1,
            zL: 1,
            yL: 0.1,
          };

          this.billboardModel.templateTop.scaleL = 1;

          break;
      }
    },
    /**
     * 选择模型模板
     */
    selectModeltemplate(item) {
      this.selectbillboardModelRule = item;
    },
    /**
     * 保存编辑
     */
    async saveMode() {
      debugger;
      let that = this;
      if (that.billboardReview.AttachedData) {
        for (
          var index = 0;
          index < that.billboardReview.AttachedData.length;
          index++
        ) {
          var attached = that.billboardReview.AttachedData[index];
          var value = that.billboardModel.AttachedData[attached.key];
          if (!value || value == "") {
            this.$message.error("请添加附加参数");
            return;
          }
        }
      }
      if (
        that.billboardModel.billboardName == "" ||
        that.billboardModel.billboardName == null
      ) {
        this.$message.error("请添加广告牌名称");
        return;
      }

      if (that.billboardModel.isAddModel && modelList.length == 0) {
        this.$message.error("请先完成[添加广告牌]，再保存");
        return;
      }

      if (
        that.billboardReview.ModelType == "ModelBillboard" ||
        that.billboardReview.ModelType == "imgBillboard"
      ) {
        if (
          !that.billboardModel.templateTop.xL ||
          !that.billboardModel.templateTop.yL ||
          !that.billboardModel.templateTop.zL
        ) {
          this.$message.error("请输入广告牌长宽高和厚度参数");
          return;
        }
      }
      debugger;
      let data = JSON.parse(JSON.stringify(that.billboardModel));
      data.id = uuidv4();
      data.billboardInfoId = that.project.id;
      data.template = {
        isImportModel: that.billboardModel.template.isImportModel,
        ModelType: that.billboardReview.ModelType,
        ...that.selectbillboardModelRule,
      };
      //添加附属信息的详细信息
      var fsxxs = [];
      if (
        data.AttachedData &&
        data.AttachedData != "{}" &&
        Object.keys(data.AttachedData).length > 0
      ) {
        for (
          var index = 0;
          index < that.billboardReview.AttachedData.length;
          index++
        ) {
          var attached = that.billboardReview.AttachedData[index];
          var fsxx = { key: attached.key, value: attached.value, data: "" };
          var valuedata = that.billboardModel.AttachedData[attached.key];
          if (attached.selectData) {
            fsxx.data = attached.selectData.find((c) => c.value == valuedata);
          } else {
            fsxx.data = valuedata;
          }

          fsxxs.push(JSON.parse(JSON.stringify(fsxx)));
        }
        data.AttachedData = JSON.stringify(fsxxs);
      } else {
        data.AttachedData = JSON.stringify(data.AttachedData);
      }

      data.template = JSON.stringify(data.template);
      data.templateBottom = JSON.stringify(data.templateBottom);
      data.templateCentre = JSON.stringify(data.templateCentre);
      data.templateTop = JSON.stringify(data.templateTop);
      data.viewing_angle = JSON.stringify({
        destination: viewer.camera.position,
        orientation: {
          // 方向
          heading: viewer.camera.heading,
          // 视角
          pitch: viewer.camera.pitch,
          // 倾斜角度
          roll: viewer.camera.roll,
        },
      });
      debugger;
      let result = await addBillboardModelList(data);
      debugger;
      if (result.code) {
        that.$message({
          message: "添加成功",
          type: "success",
        });
        viewer.entities.removeAll();
        // that.lyoption.cancel();
        //添加截图提醒
        debugger;
        if (
          that.billboardReview.isAddModel &&
          that.lyoption.content.parent.jttx
        ) {
          that.lyoption.content.parent.jttx();
        }
        that.$layer.close(that.layerid);
      }

      // window.billboardModelList.push(that.billboardModel);
      // this.$message({
      //   message: "添加成功",
      //   type: "success",
      // });
    },
    //取消
    cancle() {
      this.removeModel();
      this.$layer.close(this.layerid);
    },

    //清除
    removeModel() {
      if (this.handlerPoint)
        this.handlerPoint.removeInputAction(
          Cesium.ScreenSpaceEventType.LEFT_CLICK
        );
      modelList = [];
      viewer.entities.removeAll();
    },
  },
  components: { Image },
  beforeDestroy() {
    this.removeModel();
  },
};
</script>
<style lang="scss">
@import "@/../../zt.scss";
</style>
<style lang="scss" scoped>
.hover_style:hover {
  border: 1px solid rgba(15, 123, 200, 0.247);
  background-color: rgba(15, 123, 200, 0.247);
}

.con-col {
  border: 1px solid;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}
.imgdomf {
  border: 1px solid rgba(15, 122, 200, 0.4);
  padding: 4px;
}
.imgdom {
  border: 1px solid rgba(15, 122, 200, 0.4);
  margin: 4px;
  padding: 2px;
}
.el-divider__text {
  background-color: #11123bde;

  color: #ffffff;
}
</style>