4.0/src/renderer/components/DTH/AddBuilding.vue

<template>
  <Dialog ref="dialog" class="building-add" :title="form.id ? '修改楼栋' : '添加楼栋'" height="200px" left="300px" top="30%"
    :closeCallback="clean">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="网格名称：">
        <el-input class="name col" size="mini" v-model="form.grid_name" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="楼栋名称：">
        <el-input class="name col" size="mini" v-model="form.name" placeholder="请输入内容"></el-input>
      </el-form-item>
      <!-- <el-form-item label="楼层数：">
        <el-input class="name col" size="mini" v-model="form.floors" placeholder="请输入内容"></el-input>
      </el-form-item> -->
    </el-form>
    <template slot="foot">
      <button class="btn" @click="drawRange">绘制范围</button>
      <button class="btn" @click="onSubmit">确认</button>
    </template>
  </Dialog>
</template>

<script>
import Dialog from './Dialog.vue'

export default {
  components: {
    Dialog,
  },
  props: {
    options: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      form: {
        name: '',
        grid_name: '',
        // content: 2,
        range: []
      }
    }
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
    })
  },
  methods: {
    open(data) {
      if (data && (data.id || data.ID)) {
        this.clean()
        this.form = {
          id: data.id || data.ID,
          name: data.name,
          grid_name: data.grid_name,
          // content: data.floor,
          range: JSON.parse(data.range),
        }
        this.options.dth.activate()
        this.options.dth.addBuildingPrimitive([{ ID: 'temporary', range: data.range }])
      }
      this.$refs.dialog.open()
    },
    close() {
      this.$refs.dialog.close()
    },
    async onSubmit() {
      try {
        if (!this.form.grid_name) {
          this.$message({
            message: '网格名称不能为空！',
            type: 'warning',
            duration: 1500
          });
          return
        }
        if (!this.form.name) {
          this.$message({
            message: '楼栋名称不能为空！',
            type: 'warning',
            duration: 1500
          });
          return
        }
        let url = ""
        if (this.options.host.endsWith("yjearth4.0")) {
          if (this.form.id) {
            url = this.options.host + '/api/v1/dth/build/edit'
          }
          else {
            url = this.options.host + '/api/v1/dth/build/add'
          }
        }
        else {
          if (this.form.id) {
            url = this.options.host + '/yjearth4.0/api/v1/dth/build/edit'
          }
          else {
            url = this.options.host + '/yjearth4.0/api/v1/dth/build/add'
          }
        }
        let response = await fetch(url, {
          method: 'post',
          body: JSON.stringify(this.form),
          headers: {
            'Content-Type': 'application/json',
            "token": this.options.token,
            "Authorization": "Bearer " + this.options.token,
          }
        })
        if (response.status === 200) {
          let data = await response.json()
          if (data.code === 200 || data.code === 0) {
            this.$message({
              message: this.form.id ? '修改成功！' : '添加成功！',
              type: 'success',
              duration: 1500
            });
            this.close()
            this.options.dth.clearAllDthPrimitive()
            this.options.dth.clearBuildingPrimitive('temporary')
            this.$emit('BuildingOnSubmitCallBack')
          }
          else {
            this.$message({
              message: data.message,
              type: 'warning',
              duration: 1500
            });
          }
        }
      } catch (error) {
        console.log(error)
      }
    },

    drawRange() {
      this.options.dth.deactivate()
      this.options.dth.clearBuildingPrimitive('temporary')
      this.Draw && this.Draw.end()
      this.Draw = new YJ.Draw.DrawPolygon(this.options.sdk)
      this.Draw.start((a, positions) => {
        if (positions.length < 3) {
          this.$message({
            message: '至少需要三个点',
            type: 'warning',
            duration: 1500
          });
          return
        }
        else {
          this.options.dth.activate()
          this.options.dth.addBuildingPrimitive([{ ID: 'temporary', range: JSON.stringify(positions) }])
          this.form.range = positions
          this.Draw = null
          // this.options.dth.savePrimitive()
        }
      })
    },
    clean() {
      this.form = {
        name: '',
        // content: 2,
        range: []
      }
      this.Draw && this.Draw.end()
      this.Draw = null
      this.options.dth.clearBuildingPrimitive('temporary')
    }
  },

  beforeDestroy() {
    this.clean()
  }
}
</script>

<style scoped>
</style>