rt-sim-training-client/src/views/jlmap3d/edit/jlmap3dedit.vue

<template>

  <div id="editdiv" class="editdiv">

    <div id="testdraw" class="testdraw">
    </div>

    <Edit-Action ref="action" @saction="saction" @actionevent="actionevent">
    </Edit-Action>

    <Edit-Property ref="property" :selectmodel='selectmodel'>
    </Edit-Property>

    <Edit-Assets ref="assets" @smodel="smodel" @stexture="stexture">
    </Edit-Assets>

    <Edit-Menu ref="menu" @transpos="transpos" @transrota="transrota" @transscal="transscal" @expo="expo" @save="save"
      @back="back">
    </Edit-Menu>

    <canvas id="canvastexture" width="128px" height="64px"></canvas>
  </div>



</template>
<script>
  import Vue from 'vue';
  import localStore from 'storejs';
  import { mapGetters } from 'vuex';
  import SetTime from '@/views/display/demon/setTime';
  import { getTrainingCbtcDemon, setTrainingCbtcInitTime } from '@/api/simulation';

  import { UrlConfig } from '@/router/index';


  import { JLmap3dEdit } from '@/jlmap3d/edit/jlmap3dedit';

  import axios from 'axios';
  import { update3dMapData } from '@/api/jlmap3d/load3ddata'
  import { getmodels } from '@/jlmap3d/edit/connect/getmodels';

  //components
  import EditProperty from '@/views/jlmap3d/edit/component/property';
  import EditAction from '@/views/jlmap3d/edit/component/action';
  import EditAssets from '@/views/jlmap3d/edit/component/assets';
  import EditMenu from '@/views/jlmap3d/edit/component/menu';

  var train;
  export default {
    name: 'EditTest',
    components: {
      EditProperty,
      EditAction,
      EditAssets,
      EditMenu
    },
    data() {
      return {
        mapid: this.$route.query.mapid,
        isDisable: false,
        tryTime: 0,        // 进入页面多少秒
        timeNow: 0,       // 进入页面 相对时间
        time: null,      // 定时器
        countTime: 0,    //  显示 倒计时
        remainingTime: 0,
        goodsId: this.$route.query.goodsId,
        try: this.$route.query.try,    // 是否是试用权限
        training: {
          id: '',
          name: '',
          remarks: ''
        },
        offset: 15,

        mapdata: null,
        jlmap3dedit: null,
        assetlist: null,
        selectmodel: null

      }
    },
    computed: {

    },
    watch: {
      'jlmap3dedit.selectmodel.code': {
        deep: true,
        handler: function (newVal, oldVal) {
          if (newVal != oldVal) {
            this.selectmodel = this.jlmap3dedit.selectmodel;
            this.$refs.property.switchproperty();
            //console.log(this.jlmap3dedit.selectmodel);
          }
        }
      },
      'jlmap3dedit.selectmodel.position': {
        deep: true,
        handler: function (newVal, oldVal) {
          //console.log(this.jlmap3dedit.selectmodel);
          if (this.jlmap3dedit.selectmodel) {
            this.selectmodel = this.jlmap3dedit.selectmodel;
            if (this.selectmodel.name == "linehelper") {
              this.selectmodel.parent.geometry.vertices[this.selectmodel.num].x = this.selectmodel.position.x;
              this.selectmodel.parent.geometry.vertices[this.selectmodel.num].z = this.selectmodel.position.z;
              this.selectmodel.parent.geometry.verticesNeedUpdate = true;
            }
          }

        }
      }
    },
    beforeDestroy() {

      if (this.jlmap3dedit) {
        this.jlmap3dedit = null;
      }
    },
    methods: {
      show: function () {

      },
      init: function () {
        //console.log(this.mapid);
        let mapdata = this.$store.getters['map/map'];
        let dom = document.getElementById('testdraw');
        this.jlmap3dedit = new JLmap3dEdit(dom, mapdata, this.mapid);
        //this.jlmap3dedit.eventon();
      },
      saction(editmode) {
        //console.log(editmode);
        this.jlmap3dedit.transcontrol.detach();
        this.jlmap3dedit.editmode = editmode;
        this.jlmap3dedit.actionmode = editmode;
        //this.jlmap3dedit.actionmode();
        this.$refs.assets.togglelist(editmode);
      },
      actionevent(eventname) {
        //console.log(eventname);
        this.jlmap3dedit.actionmode = eventname;
        this.jlmap3dedit.actiommode(eventname);
      },
      smodel(changedata) {
        console.log(changedata);
        this.jlmap3dedit.actiommode(changedata);
      },
      stexture(textureurl) {
        //console.log(modelurl);

      },
      transpos() {
        this.jlmap3dedit.transcontrol.setMode('translate');
      },
      transrota() {
        this.jlmap3dedit.transcontrol.setMode('rotate');
      },
      transscal() {
        this.jlmap3dedit.transcontrol.setMode('scale');
      },
      expo() {

        this.jlmap3dedit.export();
      },
      save() {
        //console.log("save");
        let param = getmodels(this.jlmap3dedit);
        console.log(this.jlmap3dedit);
        console.log(param);
        //console.log(param);
        update3dMapData(param).then(data => {
          //console.log(data);
          if (data.code == "200") {
            alert("保存成功");
          }
        }).catch(error => {
          console.log(error);
        });

      },
      back() {

        //console.log("back");
        history.go(-1);
      }

    },
    mounted() {

      this.init();
    }
  }
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";

  * {
    touch-action: none;
  }

  .editdiv {

    width: 100%;
    height: 100%;
  }

  .testdraw {
    float: left;
    //left:20%;
    position: absolute;
    width: 100%;
    height: 100%;
    z-inde: -1;
  }
</style>