ojk_dtb_manage_ui/src/components/dataManage/dataDetail/ThreeDimensionalDataDetail.vue

<template>
  <el-dialog v-if="isShow"
             :model-value="isShow"
             :title="dialogTitle"
             :width="700"
             :close-on-click-modal="false"
             :before-close="handleClose"
  >
    <div id="addData">
      <el-form ref="form" :inline="true" :model="formData" :rules="formDataRules" style="margin: 0 15px"
               :label-width="110">
        <el-form-item label="ID：" v-show="false">
          <el-input v-model="formData.id"/>
        </el-form-item>
        <el-form-item label="标题：" prop="title" style="width: 100%">
          <el-input v-model="formData.title" placeholder="请输入标题" :disabled="formData.isDataView"/>
        </el-form-item>
        <el-form-item label="描述：" prop="content" style="width: 100%">
          <el-input v-model="formData.content" placeholder="请输入描述" :disabled="formData.isDataView"/>
        </el-form-item>
        <el-form-item label="类型：" prop="modelType" style="width: 100%">
          <el-input v-model="formData.modelType" placeholder="请输入类型" :disabled="formData.isDataView"/>
        </el-form-item>
        <el-form-item label="类别：" prop="menuId">
          <el-select v-model="formData.menuId" placeholder="请选择类别" @change="handleMenuIdSelect" :disabled="true">
            <el-option
                v-for="item in category"
                :key="item.id"
                :label="item.title"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <br/>
        <el-form-item label="经度：" style="width: 30%" >
          <el-input v-model="formData.lon" placeholder="经度" :disabled="formData.isDataView">
          </el-input>
        </el-form-item>
        <el-form-item label="纬度：" style="width: 20%" :label-width="70">
          <el-input v-model="formData.lat" placeholder="纬度" :disabled="formData.isDataView">
          </el-input>
        </el-form-item>
        <el-form-item label="高程：" style="width: 20%" :label-width="70">
          <el-input v-model="formData.elevation" placeholder="高程" :disabled="formData.isDataView">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="font-size: 18px" @click="handleLonlatSelect" >
            <el-icon><ElIconLocation/></el-icon>
          </el-button>
        </el-form-item>
        <br/>
        <el-form-item label="地理信息：" prop="geometryStr" style="width: 83%">
          <el-input v-model="formData.geometryStr" placeholder="请输入geometry" :disabled="formData.isDataView">
            <template #prepend>
              <el-button @click="handleJsonDataView(true, formData.geometryStr)" class="inputButtonStyle">
                格式化
              </el-button>
            </template>
            <template #append>
              <el-button @click="handleMapShow(true)" class="inputButtonStyle">
                预览
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item style="width: 10%;margin: 0;padding: 0;padding-bottom: 15px;">
          <el-link style="color: grey" :underline="false" @click="showExampleJson" >示例数据</el-link>
        </el-form-item>
        <el-form-item label="地名地址库：" prop="address" style="width: 100%">
          <el-input v-model="formData.address" placeholder="请输入地名地址库名称" :disabled="formData.isDataView"/>
        </el-form-item>
      </el-form>
      <HighOptionData :init-data="formData.properties" :call-back="setProperties"></HighOptionData>
    </div>
    <template #footer>
      <el-button type="primary" @click="submit" v-show="!formData.isDataView">保存</el-button>
    </template>
  </el-dialog>
  <CesiumMap v-if="isMapShow"
             :is-show="isMapShow"
             :item="formData.geometryStr"
             :type="1"
             :close="handleMapShow">
  </CesiumMap>

  <OlMap v-if="isLonLatShow"
         :is-show="isLonLatShow"
         :is-view="formData.isDataView"
         :geometry-str="formData.geoStr"
         :type="'Point'"
         :callback="setLonLatData"
         :close="handleLonlatSelect">
  </OlMap>

  <JsonDataView v-if="isJsonDataView"
                :is-show="isJsonDataView"
                :title="'地理数据预览'"
                :data="geojsonViewStr"
                :close="handleJsonDataView"
  >
  </JsonDataView>
</template>

<script>
import CesiumMap from "@/components/map/CesiumMap";
import OlMap from "@/components/map/OlMap";
import JsonDataView from "@/components/json/JsonDataView";
import api from "@/api/data/ThreeDimensionalData";
import menuApi from "@/api/data/MenuData";
import HighOptionData from "@/components/dataManage/dataDetail/components/HighOptionData.vue";

export default {
  data() {
    return {
      formData: {},
      oriFormData: {},
      formDataRules: {
        title: [
          {required: true, message: '请输入标题', trigger: 'blur'},
          {required: true, message: '请输入标题', trigger: 'change'},
        ],
        content: [
          {required: true, message: '请输入描述', trigger: 'blur'},
          {required: true, message: '请输入描述', trigger: 'change'},
        ],
        modelType: [
          {required: true, message: '请输入类型', trigger: 'blur'},
          {required: true, message: '请输入类型', trigger: 'change'},
        ],
        menuId: [
          {required: true, message: '请选择类别', trigger: 'blur'},
          {required: true, message: '请选择类别', trigger: 'change'},
        ],
        geometryStr: [
          {required: true, message: '请输入Geojson数据', trigger: 'blur'},
        ],
        lon: [
          {required: true, message: '该字段不能为空', trigger: 'blur'},
          {required: true, message: '该字段不能为空', trigger: 'change'},
        ],
        lat: [
          {required: true, message: '该字段不能为空', trigger: 'blur'},
          {required: true, message: '该字段不能为空', trigger: 'change'},
        ],
        elevation: [
          {required: true, message: '该字段不能为空', trigger: 'blur'},
          {required: true, message: '该字段不能为空', trigger: 'change'},
        ],
        // address: [
        //   { required: true, message: '请输入地名地址库名称', trigger: 'change' },
        // ]
      },
      category: [],
      isMapShow: false,
      isLonLatShow: false,

      isJsonDataView: false,

      geojsonViewStr: '',

    }
  },
  props: {
    dialogTitle: String,
    isShow: Boolean,
    item: Object,
    currCategory: Object,
    close: Function
  },
  watch: {
  },
  mounted() {
    this.getMenuData();
    this.formData = this.item;
    if (this.formData.geometry && this.formData.geometry!='') {
      this.formData.geometryStr = JSON.stringify(this.formData.geometry)
    }
    this.oriFormData = JSON.parse(JSON.stringify(this.formData))
  },
  components: {
    CesiumMap,
    OlMap,
    JsonDataView,
    HighOptionData,
  },
  methods: {
    setProperties(item) {
      this.formData['properties'] = item;
    },
    handleMapShow(flag) {
      if (flag) {
        if (this.formData.geoStr && this.formData.geoStr !== '') {
          this.isMapShow = true
        } else {
          this.$message({message: '请输入地理信息', type: 'warning'})
        }
      } else {
        this.isMapShow = false
      }
    },
    showExampleJson() {
      let str = "{\"type\":\"LineString\",\"coordinates\":[[22.59323,44.71464,233.6],[22.59274,44.71425,231.8],[22.59264,44.71405,230.7]]}";
      this.handleJsonDataView(true, str);

    },
    handleLonlatSelect(flag) {
      if (flag) {
        this.formData.geoStr = JSON.stringify(this.covertToGeometry())
        this.isLonLatShow = true
      } else {
        this.isLonLatShow = false
      }
    },
    covertToGeometry() {
      let geometry = {
        type: 'Point',
        coordinates: []
      }
      if (this.formData.lon && this.formData.lon!=='' && this.formData.lat && this.formData.lat !=='') {
        geometry.coordinates.push(this.formData.lon)
        geometry.coordinates.push(this.formData.lat)
        return geometry;
      } else {
        return '';
      }
    },
    setLonLatData(obj) {
      if (obj.coordinates && obj.coordinates.length>1) {
        this.formData.lon = obj.coordinates[0];
        this.formData.lat = obj.coordinates[1];
      }
    },
    getMenuData() {
      let app = this;
      let params = {
        type: "1",
        parentId: this.$constant.menuIds['threeD'],
      }
      menuApi.getMenuData(params).then(res => {
        if (res.code === 200) {
          app.category = res.content

          if (!app.formData.menuId || app.formData.menuId == '') {
            app.formData.menuId = app.currCategory.id
            app.handleMenuIdSelect(app.formData.menuId)
          }
        }
      })
    },
    setMapData(geometry) {
      this.formData.geometryStr = JSON.stringify(geometry)
    },
    handleClose() {
      this.close();
    },
    submit() {
      let app = this;
      app.$refs.form.validate(valid=>{
        if (valid) {
          if (app.formData.isEdit){
            app.updateData();
          } else {
            app.addData();
          }
        } else {
          app.$message({message: '请完善数据', type: 'warning'})
        }
      })
    },
    // 数据录入
    addData() {
      let app = this;
      let params = JSON.parse(JSON.stringify(app.formData));
      params['menuNameOne'] = '模型数据'
      params['userName'] = app.$store.state.userInfo.username;
      delete params.geometry;
      api.addData(params).then(res => {
        if (res.code === 200) {
          app.$message({message: '录入成功', type: 'success'})
          app.close(true);
        }
      })
    },
    // 编辑数据
    updateData() {
      let app = this;
      let params = JSON.parse(JSON.stringify(app.formData));
      delete params.createDate;
      delete params.updateDate;
      delete params.geometry;
      params['userName'] = app.$store.state.userInfo.username;
      api.updateData(params).then(res => {
        if (res.code === 200) {
          app.$message({message: '修改成功', type: 'success'})
          app.close(true);
        }
      })
    },
    handleJsonDataView(flag, val) {
      this.geojsonViewStr = val;
      this.isJsonDataView = flag;
    },
    handleMenuIdSelect(val) {
      for (let i = 0; i < this.category.length; i++) {
        let item = this.category[i];
        if (item.id == val) {
          this.formData['menuNameTwo'] = item.title
          break;
        }
      }
    },
  }
}
</script>

<style>
#addData {
  width: 100%;
  height: 100%;
}
</style>