DataCenter/src/views/voyage/voyageAdd.vue

<template>
  <div class="line-container-p24">
    <i class="el-icon-arrow-left"></i>
    <div class="dib go-back ml8">返回航次列表</div>
  </div>
  <div id="map-container" class="map-container"></div>

  <div class="line-container-p24">
    <el-form
      :rules="rules"
      label-position="right"
      label-width="80px"
      :model="voyageForm"
    >
      <div class="line1 df" style="flex-wrap: wrap">
        <el-form-item prop="voyageName" label="航次名称">
          <el-input v-model="voyageForm.voyageName"></el-input>
        </el-form-item>
        <el-form-item label="货主">
          <el-input v-model="voyageForm.cargoOwnerId"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-input v-model="voyageForm.startTime"></el-input>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-input v-model="voyageForm.endTime"></el-input>
        </el-form-item>
        <el-form-item label="装货港">
          <el-input v-model="voyageForm.loadPort"></el-input>
        </el-form-item>
        <el-form-item label="卸货港">
          <el-input v-model="voyageForm.dischargPort"></el-input>
        </el-form-item>
        <el-form-item label="货种">
          <el-input v-model="voyageForm.cargo"></el-input>
        </el-form-item>
        <el-form-item label="吨位">
          <el-input v-model="voyageForm.tons"></el-input>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
import { onMounted, ref, toRefs, reactive } from "vue";
export default {
  setup() {
    let map = ref();
    const rules = reactive({
      rules: {
        voyageName: [{ required: true, message: "", trigger: "blur" }],
        cargoOwnerId: [{ required: true, message: "", trigger: "blur" }],
        startTime: [{ required: true, message: "", trigger: "blur" }],
        endTime: [{ required: true, message: "", trigger: "blur" }],
        loadPort: [{ required: true, message: "", trigger: "blur" }],
        dischargPort: [{ required: true, message: "", trigger: "blur" }],
        cargo: [{ required: true, message: "", trigger: "blur" }],
        tons: [{ required: true, message: "", trigger: "blur" }],
      },
    });
    let voyageForm = reactive({
      voyageForm: {
        voyageName: "",
        cargoOwnerId: "",
        startTime: "",
        endTime: "",
        loadPort: "",
        dischargPort: "",
        cargo: "",
        tons: "",
      },
    });

    function initMap() {
      var center = new TMap.LatLng(31.228721, 121.524761);
      //初始化地图
      map.value = new TMap.Map("map-container", {
        zoom: 12, //设置地图缩放级别
        center: center, //设置地图中心点坐标
      });
    }

    onMounted(() => {
      initMap();
    });

    return {
      ...toRefs(voyageForm),
      ...toRefs(rules),
    };
  },
};
</script>
<style scoped>
.go-back {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333d43;
  line-height: 100%;
  cursor: pointer;
}

.map-container {
  width: 100%;
  height: 658px;
  margin: 20px 0;
}

:deep() .el-form-item {
  margin-right: 22px;
  width: 280px;
}
</style>