epmet-work-pc-chengyang/src/views/modules/plugins/point/icpointnucleicmonitoring-add-or-update.vue

<template>
  <div style="height: 600px; overflow: auto; padding: 20px" class="form-class">
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmitHandle()"
      label-width="120px"
    >
      <el-form-item label="所属组织名称" prop="orgId">
        <el-select
          v-model="dataForm.orgId"
          placeholder="所属组织名称"
          @change="orgChangeHandle"
          :disabled="dialogTitle == '查看'"
        >
          <el-option
            ref="org"
            v-for="item in organizationList"
            :key="item.orgId"
            :label="item.orgName"
            :value="item.orgId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="核酸检测点名称" prop="name">
        <el-input
          v-model="dataForm.name"
          placeholder="核酸检测点名称"
          :disabled="dialogTitle == '查看'"
        ></el-input>
      </el-form-item>
      <el-form-item label="服务时间" prop="serveTime">
        <el-input
          v-model="dataForm.serveTime"
          type="textarea"
          :rows="2"
          placeholder="请输入服务时间，如：每日开放 上午：8:00-11:30 ；下午：13:00-17:00"
          :disabled="dialogTitle == '查看'"
        ></el-input>
      </el-form-item>
      <el-form-item label="咨询电话" prop="mobile">
        <el-input
          v-model="dataForm.mobile"
          placeholder="咨询电话"
          :change="check_num()"
          :disabled="dialogTitle == '查看'"
        ></el-input>
      </el-form-item>
      <el-form-item label="检测点地址" prop="address">
        <el-input
          v-model="dataForm.address"
          placeholder="例:青岛市时代国际广场"
          style="width:65%;"
        ></el-input>
        <el-button
          style="margin-left: 10px"
          type="primary"
          size="small"
          @click="handleSearchMap"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item
        label="位置坐标"
        prop="longitude"
        style="display: block"
        class="position_label"
      >
        <div>
          <!-- <el-input
            class="item_width_4"
            maxlength="50"
            placeholder="例:青岛市时代国际广场"
            v-model="keyWords"
            style="width: 200px"
            :disabled='dialogTitle == "查看"'
          >
          </el-input>
          <el-button
            style="margin-left: 10px"
            type="primary"
            size="small"
            @click="handleSearchMap"
            >查询</el-button
          > -->
          <div
            id="map_add"
            class="div_map"
            style="width: 500px; height: 300px; margin-top: 20px"
          ></div>
          <div style="margin-top: 10px" v-show="false">
            <span>经度</span>
            <el-input
              class="item_width_3"
              maxlength="50"
              placeholder="请输入经度"
              v-model="dataForm.longitude"
              disabled
              style="width: 200px; margin-left: 20px"
            >
            </el-input>
            <span style="margin-left: 20px">纬度</span>
            <el-input
              class="item_width_3"
              maxlength="50"
              placeholder="请输入纬度"
              v-model="dataForm.latitude"
              disabled
              style="width: 200px; margin-left: 20px"
            >
            </el-input>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <div class="submit">
      <el-button @click="closeSubmit">{{ $t("cancel") }}</el-button>
      <el-button
        v-if="dialogTitle != '查看'"
        type="primary"
        @click="dataFormSubmitHandle()"
        >{{ $t("confirm") }}</el-button
      >
    </div>
  </div>
</template>

<script>
import debounce from "lodash/debounce";
var map;
var search;
var markers;
var geocoder;
var infoWindowList;
export default {
  data() {
    return {
      dataForm: {
        id: "",
        customerId: "",
        orgId: "",
        orgName: "",
        pid: "",
        pids: "",
        name: "",
        serveTime: "",
        mobile: "",
        address: "",
        longitude: '',
        latitude: '',
      },
      keyWords: null,
      organizationList: [],
    };
  },
  computed: {
    dataRule() {
      return {
        customerId: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        orgId: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        orgName: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        serveTime: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        longitude: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        latitude: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  mounted() {
    this.getFormInfo();
  },
  props: {
    dialogTitle: {
      type: String,
      default: "",
    },
  },
  methods: {
    closeSubmit() {
      this.$emit("closeDialog");
    },
    orgChangeHandle(val) {
      for (var i = 0; i < this.organizationList.length; i++) {
        if (this.organizationList[i].orgId === val) {
          this.dataForm.orgName = this.organizationList[i].orgName;
          return false;
        }
      }
    },
    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
    initMap() {
      let { latitude, longitude } = this.$store.state.user;
      // 定义地图中心点坐标
      if (!latitude || latitude == "" || latitude == "0") {
        latitude = 39.9088810666821;
        longitude = 116.39743841556731;
      }
      console.log(latitude,longitude);
      var center = new window.TMap.LatLng(latitude, longitude);
      // 定义map变量，调用 TMap.Map() 构造函数创建地图
      map = new window.TMap.Map(document.getElementById("map_add"), {
        center: center, // 设置地图中心点坐标
        zoom: 17.2, // 设置地图缩放级别
        pitch: 43.5, // 设置俯仰角
        rotation: 45, // 设置地图旋转角度
      });
      search = new window.TMap.service.Search({ pageSize: 10 });
      // 新建一个地点搜索类
      markers = new TMap.MultiMarker({
        map: map,
        geometries: [],
      });
      infoWindowList = Array(10);

      geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类

      // 监听地图平移结束
      map.on("panend", () => {
        this.handleMoveCenter();
      });
      // this.handleMoveCenter()
      this.convert();
    },
    handleMoveCenter() {
      //修改地图中心点
      const center = map.getCenter();
      const lat = center.getLat();
      const lng = center.getLng();
      this.dataForm.latitude = lat;
      this.dataForm.longitude = lng;
      this.setMarker(lat, lng);
      this.convert(lat, lng);
    },
    // 地图查询
    handleSearchMap() {
      infoWindowList.forEach((infoWindow) => {
        infoWindow.close();
      });
      infoWindowList.length = 0;
      markers.setGeometries([]);
      // 在地图显示范围内以给定的关键字搜索地点
      search
        .searchRectangle({
          keyword: this.dataForm.address,
          bounds: map.getBounds(),
        })
        .then((result) => {
          let { data } = result;
          if (Array.isArray(data) && data.length > 0) {
            const {
              location: { lat, lng },
            } = data[0];

            map.setCenter(new TMap.LatLng(lat, lng));
            this.setMarker(lat, lng);
            this.dataForm.latitude = lat;
            this.dataForm.longitude = lng;
            this.convert();
          } else {
            this.$message.error("未检索到相关位置坐标");
          }
        });
    },
    convert(lat, lng) {
      markers.setGeometries([]);
      // var input = document.getElementById('location').value.split(',');
      let location;
      if (lat && lng) {
        location = new TMap.LatLng(lat, lng);
      } else {
        location = new TMap.LatLng(
          this.dataForm.latitude,
          this.dataForm.longitude
        );
      }

      // map.setCenter(location);
      markers.updateGeometries([
        {
          id: "main", // 点标注数据数组
          position: location,
        },
      ]);
      geocoder
        .getAddress({ location: location }) // 将给定的坐标位置转换为地址
        .then((result) => {
          this.dataForm.address =
            this.dataForm.address !== "" &&
            this.dataForm.address !== null &&
            (this.dataForm.longitude === "" || this.dataForm.longitude === null)
              ? this.dataForm.address
              : result.result.address;
          // 显示搜索到的地址
          console.log(this.dataForm.address);
        });
    },

    setMarker(lat, lng) {
      markers.setGeometries([]);
      markers.add([
        {
          id: "4",
          styleId: "marker",
          position: new TMap.LatLng(lat, lng),
          properties: {
            title: "marker4",
          },
        },
      ]);
    },
    // 获取所属组织列表
    getFormInfo() {
      this.$http
        .post(`/gov/org/agency/communityListByCustomerId`)
        .then(({ data: res }) => {
          if (tMapres.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.organizationList = res.data;
        })
        .catch(() => {});
    },
    init() {
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.getInfo();
        } else {
          
          this.initMap();
        }
      });
    },

    // 获取信息
    getInfo() {
      this.$http
        .get(`/epmetuser/icPointNucleicMonitoring/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
          this.initMap();
        })
        .catch(() => {});
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs["dataForm"].validate((valid) => {
          if (!valid) {
            return false;
          }
          this.$http[!this.dataForm.id ? "post" : "put"](
            "/epmetuser/icPointNucleicMonitoring/",
            this.dataForm
          )
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.internalMsg ? res.internalMsg : res.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.$emit("refreshDataList");
                  this.closeSubmit();
                },
              });
            })
            .catch(() => {});
        });
      },
      1000,
      { leading: true, trailing: false }
    ),
    //限制
    check_num: function () {
      this.dataForm.mobile = this.dataForm.mobile.replace(
        /[^\a-\z\A-\Z0-9]/g,
        ""
      );
    },
  },
};
</script>
<style scoped>
.position_label >>> .el-form-item__label::before {
  color: #fff !important;
}
.submit {
  text-align: center;
  margin: auto;
}
.form-class .el-input {
  width: 75%;
}
.form-class .el-textarea {
  width: 75% !important;
}
</style>