管道基础大数据平台系统开发-【前端】-新系統界面
src/components/preview_map.vue
@@ -8,18 +8,29 @@
      v-if="modelLayer"
      class="modelLayer box_divm"
    >
      <el-tree
        :data="treeData"
        show-checkbox
        node-key="id"
        ref="tree"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]"
        :props="defaultProps"
        @node-click="handleNodeClick"
        @check="handleCheckChange"
      >
      </el-tree>
      <div class="modelBox">
        <div
          style="float:right"
          :title="$t('synthesis.undergroundMode')"
          @click="setUndergroundMode"
        >
          <i class="el-icon-sunrise "></i>
        </div>
      </div>
      <div class="modelBox">
        <el-tree
          :data="treeData"
          show-checkbox
          node-key="id"
          ref="tree"
          :default-expanded-keys="[2, 3]"
          :default-checked-keys="[5]"
          :props="defaultProps"
          @node-click="handleNodeClick"
          @check="handleCheckChange"
        >
        </el-tree>
      </div>
    </div>
    <div
      v-if="editModelFlag"
@@ -54,9 +65,15 @@
            重载
          </el-button>
          <el-button
            v-if="modelForm.modelid == null"
            size="small"
            @click="getModeKeyId"
          >模型主键</el-button>
          <el-button
            size="small"
            @click="resave"
          >保存</el-button>
        </el-form-item>
        <el-form-item label="经度:">
          <el-input
@@ -339,6 +356,37 @@
      </div>
    </el-dialog>
    <div
      v-show="modelKeyFlag"
      class="modelLayer box_divm"
      v-drag
    >
      <el-form
        ref="form"
        :model="modelForm"
        label-width="80px"
      >
        <el-form-item label="主键ID">
          <el-select v-model="modelLayerId">
            <el-option
              v-for="item in optionKey"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            @click="setSureKeyModelKey"
          >{{$t('common.confirm')}}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <undergroundModel ref="undergroundModel" />
  </div>
</template>
@@ -354,7 +402,12 @@
  comprehensive_selectPubById
} from '../api/api.js';
import { getToken } from '@/utils/auth';
import undergroundModel from '../views/Tools/undergroundModel.vue'
export default {
  components: {
    undergroundModel
  },
  data() {
    return {
      levelArray: [
@@ -420,20 +473,35 @@
        lat: 39,
        height: 0,
        yaw: 0,
        alpha: 1
        alpha: 1,
        modelid: null,
      },
      app: {
        tileset: null,
        isBusy: false,
        under: false,
        handler: null
      }
      },
      modelLayerId: null,
      optionKey: [],
      modelKeyFlag: false,
    }
  },
  mounted() {
    this.init3DMap();
  },
  methods: {
    setUndergroundMode() {
      if (window.UndergroundMode) {
        this.$refs &&
          this.$refs.undergroundModel &&
          this.$refs.undergroundModel.close();
      } else {
        this.$refs &&
          this.$refs.undergroundModel &&
          this.$refs.undergroundModel.open("地下模式", null,);
      }
    },
    refreshAttatchDetail() {
      this.dialog.src = "";
      this.dialog.dialogVisible = false;
@@ -581,7 +649,7 @@
      this.formInline.title = this.formInline.name
      that.dialogVisible = true;
      this.startModelData();
    },
    async InsertData() {
      var std = {
@@ -605,7 +673,7 @@
      that.dialogVisible = false;
      this.formInline.title = this.formInline.name
      that.dialogVisible = true;
      this.startModelData();
@@ -622,13 +690,30 @@
        bak: '',
        Id: ''
      }
      this.activeName = "first"
    },
    setShowModelInfo(result) {
    async setShowModelInfo(result) {
      var modelKey = 'id';
      this.formInline.title = result.getProperty("name")
      this.formInline.Id = result.getProperty("id");
      this.layerID = result.getProperty("id");
      if (result.tileset.pubid > 0) {
        const data = await comprehensive_selectPubById({ id: result.tileset.pubid })
        if (data.code != 200) {
          return
        } else {
          modelKey = JSON.parse(data.result.json).modelid
        }
        if (!modelKey) {
          return this.$message('没有模型主键ID,无法查询数据');
        }
      }
      // this.formInline.title = result.getProperty("name")
      this.formInline.Id = result.getProperty(modelKey);
      this.layerID = result.getProperty(modelKey);
      this.formInline.layerId = result.primitive.layerId;
      this.formInline.layerName = result.primitive.id;
      this.startModelData();
@@ -697,6 +782,7 @@
        tileset.readyPromise.then((tileset) => {
          tileset.id = res.cnName;
          tileset.layerId = res.id;
          tileset.pubid = res.pubid;
          that.getArgsTileset(tileset, res);
        });
      }
@@ -825,7 +911,6 @@
          this.app.tileset = this.createTileset(res);
          var that = this;
          Viewer.scene.primitives.add(this.app.tileset).readyPromise.then(function (ts) {
            that.setModleLocatin()
            Viewer.flyTo(ts);
          });
@@ -842,7 +927,26 @@
        }
      }
    },
    getModeKeyId() {
      window.ModeKeyIdHandler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
      window.ModeKeyIdHandler.setInputAction((event) => {
        window.pickedFeature = sgworld.Viewer.scene.pick(event.position);
        if (Cesium.defined(window.pickedFeature)) {
          if (window.pickedFeature.primitive instanceof Cesium.Cesium3DTileset) {
            if (window.pickedFeature && window.pickedFeature.getProperty) {
              this.setModeLayerID(pickedFeature);
            }
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    },
    async resave() {
      if (!this.modelForm.modelid) {
        return this.$message('未选择模型主键ID');
      }
      this.$store.state.previewLayer.json = JSON.stringify(this.modelForm);
      const data = await publish_update(this.$store.state.previewLayer);
@@ -980,15 +1084,37 @@
      if (this.modelType.indexOf(type) != -1) {
        this.setEditModelLayer(res)
      }
    },
    setModeLayerID(res) {
      var value = res.getPropertyNames();
      var std = [];
      for (var i in value) {
        std.push({
          value: value[i],
          label: value[i]
        })
      }
      this.optionKey = std;
      this.modelLayerId = this.optionKey[0].label;
      this.modelKeyFlag = true;
    },
    setSureKeyModelKey() {
      this.modelKeyFlag = false;
      this.modelForm.modelid = this.modelLayerId
      window.ModeKeyIdHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); //移除事件
    },
    getTilesetArgs() {
      this.app.isBusy = true;
      var cm = this.app.tileset._root.transform;
      var cartesian = new Cesium.Cartesian3(cm[12], cm[13], cm[14]);
      var carto = Cesium.Cartographic.fromCartesian(cartesian);
      this.modelForm.lon = Cesium.Math.toDegrees(carto.longitude).toFixed(7);
      this.modelForm.lat = Cesium.Math.toDegrees(carto.latitude).toFixed(7);
      this.modelForm.height = carto.height.toFixed(3);
      if (carto) {
        this.modelForm.lon = Cesium.Math.toDegrees(carto.longitude).toFixed(7);
        this.modelForm.lat = Cesium.Math.toDegrees(carto.latitude).toFixed(7);
        this.modelForm.height = carto.height.toFixed(3);
      }
      this.app.isBusy = false;
    },
@@ -1011,15 +1137,18 @@
        this.treeData = res;
        this.modelLayer = true;
        var that = this;
        var pickedFeature, pickedColor;
        window.modeCatchHandler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
        window.modeCatchHandler.setInputAction((event) => {
          window.pickedFeature && (window.pickedFeature.color = window.pickedColor);
          window.pickedFeature = sgworld.Viewer.scene.pick(event.position);
          if (Cesium.defined(window.pickedFeature)) {
            if (window.pickedFeature.primitive instanceof Cesium.Cesium3DTileset) {
              if (window.pickedFeature && window.pickedFeature.getProperty) {
                window.pickedColor = window.pickedFeature.color
                window.pickedFeature.color = Cesium.Color.RED.withAlpha(0.3);
          if (pickedColor) { pickedFeature && (pickedFeature.color = pickedColor); }
          pickedFeature = sgworld.Viewer.scene.pick(event.position);
          if (Cesium.defined(pickedFeature)) {
            if (pickedFeature.primitive instanceof Cesium.Cesium3DTileset) {
              if (pickedFeature && pickedFeature.getProperty) {
                pickedColor = pickedFeature.color
                pickedFeature.color = Cesium.Color.RED.withAlpha(0.3);
                that.setShowModelInfo(pickedFeature);
              }
            }
@@ -1076,11 +1205,25 @@
    margin: 10px;
    max-height: 600px;
    overflow: auto;
    .modelBox {
      width: 100%;
      min-height: 24px;
    }
  }
  .pdfClass {
    height: 70vh;
    width: 100%;
    position: relative;
  }
  .el-icon-sunrise {
    background: url("../assets/img/synthesis/images/3白底_157.png") center
      center no-repeat;
    background-size: 24px;
  }
  .el-icon-sunrise:before {
    content: "11";
    visibility: hidden;
  }
}
</style>