Forráskód Böngészése

修改地图组件出现的问题

hzj18279462576@163.com 2 éve
szülő
commit
75cf772ab6

BIN
src/assets/image.png


+ 6 - 6
src/layout/sidebar/Navbar.vue

@@ -207,8 +207,9 @@ const rules = reactive({
       min: 8,
       max: 20,
       pattern:
-        /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$/,
-      message: "请输入8-20位正确密码(大小写字母·字符·数字)",
+        // /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$/,
+        /^(?=.*[0-9])(?=.*[A-Z]).{8,20}$/,
+      message: "请输入8-20位正确密码(大小写字母·(字符)·数字)",
       trigger: "blur",
     },
   ],
@@ -221,9 +222,8 @@ const rules = reactive({
     {
       min: 8,
       max: 20,
-      pattern:
-        /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$/,
-      message: "请输入8-20位正确密码(大小写字母·字符·数字)",
+      pattern: /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z]).{8,20}$/,
+      message: "请输入8-20位正确密码(大小写字母·(字符)·数字)",
       trigger: "blur",
     },
   ],
@@ -284,7 +284,7 @@ const submitForm = async (formEl) => {
       if (ruleForm.nowpass == ruleForm.correctpass) {
         let resUpdata = await axios({
           method: "post",
-          url: api.value + "/mhotel/managerAdminupdateAdminManager.action",
+          url: api.value + "/mhotel/managerAdminchangePassword.action",
           headers: {
             // token: sessionStorage.getItem("token"),
             // user_head: sessionStorage.getItem("userhead"),

+ 2 - 0
src/store/modules/user.js

@@ -70,6 +70,8 @@ const actions = {
 
         sessionStorage.setItem("token", res.data.data.managerId);
         sessionStorage.setItem("roomId", res.data.data.id);
+        sessionStorage.setItem("hotelName", res.data.data.hotelName);
+        sessionStorage.setItem("hotelTownship", res.data.data.hotelTownship);
         // 1 是  0 否
         if (res.data.isLogin == 1) {
           sessionStorage.setItem("isLogin", 1);

+ 10 - 7
src/views/account/account.vue

@@ -325,8 +325,9 @@ const rules = reactive({
       min: 8,
       max: 20,
       pattern:
-        /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$/,
-      message: "请输入8-20位正确密码(大小写字母·字符·数字)",
+        // /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$/,
+        /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z]).{8,20}$/,
+      message: "请输入8-20位正确密码(大小写字母·(字符)·数字)",
       trigger: "blur",
     },
   ],
@@ -339,9 +340,8 @@ const rules = reactive({
     {
       min: 8,
       max: 20,
-      pattern:
-        /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$/,
-      message: "请输入8-20位正确密码(大小写字母·字符·数字)",
+      pattern: /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z]).{8,20}$/,
+      message: "请输入8-20位正确密码(大小写字母·(字符)·数字)",
       trigger: "blur",
     },
   ],
@@ -425,10 +425,9 @@ const addlist = () => {
   ruleForm.adminName = "";
   ruleForm.corpnName = "";
   ruleForm.level = 1;
-  ruleForm.remake = "";
   ruleForm.password = "";
   ruleForm.againPass = "";
-  ruleForm.reamark = "";
+  ruleForm.remark = "";
 };
 // 取消添加员工
 const cancelAdd = () => {
@@ -463,6 +462,8 @@ const submitAdd = lodash.debounce(async (formEl) => {
             password: ruleForm.password,
             corpnPhone: ruleForm.corpnPhone,
             managerId: sessionStorage.getItem("token"),
+            hotelName: sessionStorage.getItem("hotelName"),
+            hotelTownship: sessionStorage.getItem("hotelTownship"),
           };
           let res = await axios({
             method: "post",
@@ -509,6 +510,8 @@ const submitAdd = lodash.debounce(async (formEl) => {
             password: ruleForm.password,
             corpnPhone: ruleForm.corpnPhone,
             id: ruleForm.id,
+            hotelName: sessionStorage.getItem("hotelName"),
+            hotelTownship: sessionStorage.getItem("hotelTownship"),
           };
           let res = await axios({
             method: "post",

+ 2 - 2
src/views/houseState/houseState.vue

@@ -81,7 +81,7 @@
         :data="tableDate"
         style="width: 100%"
         v-loading="calendarLoading"
-        >
+      >
         <!-- :span-method="arraySpanMethod" -->
         <el-table-column prop="date" align="center" fixed="left">
           <template #header>
@@ -1918,7 +1918,7 @@ const getList = async () => {
     console.log(res, "日历房源数据");
     if (res.data.code == 200) {
       tableDate.value = res.data.data.pageList;
-      totalState.value=res.data.data.total
+      totalState.value = res.data.data.total;
 
       // setTimeout(()=>{
       //   // tableDate.value = res.data.data.datas.slice(0, 10)

+ 90 - 48
src/views/map/map.vue

@@ -33,7 +33,8 @@ import {
   watchEffect,
   nextTick,
 } from "vue";
-const mapInit = loadBMap("jmkawuXGwcepLcsAqcAi3FeDMfaLhnOE");
+const mapInit = loadBMap("jmkawuXGwcepLcsAqcAi3FeDMfaLhnOE");// 公司
+// const mapInit = loadBMap("jLS6RW3GdIGVIr555yfGGCaFK7otIGDl");
 
 const props = defineProps({
   fatherMessage: {},
@@ -58,9 +59,12 @@ const mapAddress = (flag) => {
 };
 
 const getList = () => {
+  console.log("调用了", address.value);
   mapInit.then((BMap) => {
     //创建地图实例,位于BMap命名空间下的Map类表示地图,通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
     map.value = new BMap.Map("map");
+    console.log(map.value);
+    
     var points;
     // 创建点坐标
     if (props.fatherMessage.lat && props.fatherMessage.lng) {
@@ -71,22 +75,19 @@ const getList = () => {
     } else {
       points = "江西";
     }
-    map.value.centerAndZoom(points, 16); // 初始化地图,设置城市和地图级别
+    map.value.centerAndZoom(points, 20); // 初始化地图,设置城市和地图级别
     map.value.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
-    // map.value.addOverlay(
-    //   new BMap.Marker({
-    //     lng: 114.97804777753186,
-    //     lat: 28.838700575036494,
-    //   })
-    // );
+    map.value.addOverlay(new BMap.Marker(points)); // 添加标注
 
     const ac = new BMap.Autocomplete({
       input: "suggestId",
-      location: map.value,
+      location:map.value,
     });
+    ac.setInputValue(address.value)
     //建立一个自动完成的对象
     ac.addEventListener("onconfirm", function (e) {
       //鼠标点击下拉列表后的事件
+      console.log(e);
       const tempValue = e.item.value;
       const searchValue =
         tempValue.province +
@@ -113,29 +114,84 @@ const getList = () => {
         })
       );
       // 地址逆解析(无法获取精确地址)
-      // var geoc = new BMap.Geocoder();
-      // var pt = e.Af;
-      // var marker = new BMap.Marker(new BMap.Point(pt.lng, pt.lat));
-      // map.value.addOverlay(marker);
-      // geoc.getLocation(pt, function (rs) {
-      //   var addComp = rs.addressComponents;
-      //   console.log(
-      //     addComp.province +
-      //       ", " +
-      //       addComp.city +
-      //       ", " +
-      //       addComp.district +
-      //       ", " +
-      //       addComp.street +
-      //       ", " +
-      //       addComp.streetNumber
-      //   );
-      // });
+      var geoc = new BMap.Geocoder();
+      var pt = e.Af;
+      var marker = new BMap.Marker(new BMap.Point(pt.lng, pt.lat));
+      map.value.addOverlay(marker);
+      geoc.getLocation(pt, function (rs) {
+        var addComp = rs.addressComponents;
+        console.log(
+          addComp.province +
+            ", " +
+            addComp.city +
+            ", " +
+            addComp.district +
+            ", " +
+            addComp.street +
+            ", " +
+            addComp.streetNumber
+        );
+        address.value =
+          addComp.province +
+          addComp.city +
+          addComp.district +
+          addComp.street +
+          addComp.streetNumber;
+      });
     });
     // map.value.removeEventListener("click", handleClick); // 移除当前点击点的经纬度事件监听
   });
 };
 
+// 搜索下拉框数据展示
+const dataList = () => {
+  console.log("下拉框数据展示");
+  mapInit.then((BMap) => {
+    // const ac = new BMap.Autocomplete({
+    //   input: "suggestId",
+    //   location: map.value,
+    // });
+    //建立一个自动完成的对象
+    // ac.addEventListener("onconfirm", function (e) {
+    //   //鼠标点击下拉列表后的事件
+    //   console.log(e);
+
+    //   const tempValue = e.item.value;
+    //   const searchValue =
+    //     tempValue.province +
+    //     tempValue.city +
+    //     tempValue.district +
+    //     tempValue.street +
+    //     tempValue.business;
+    //   console.log(searchValue, "输入框选中的值");
+
+    //   setPlace(BMap, map.value, searchValue);
+    // });
+  });
+};
+const movePoint = (BMap, map, latlng) => {
+  console.log("移动标记点");
+
+  map.clearOverlays(); //清除地图上所有覆盖物
+  //使用BMap命名空间下的Point类来创建一个坐标点
+  const point = new BMap.Point(latlng.lng, latlng.lat);
+  const marker = new BMap.Marker(point, {
+    enableDragging: true,
+  });
+  map.addOverlay(marker);
+  latlngToAddress(BMap, latlng);
+
+  // 覆盖物拖拽开始事件
+  marker.addEventListener("dragstart", function (e) {
+    // 清除一些覆盖物
+    console.log("[开始]", e);
+  });
+  // 覆盖物拖拽事件
+  marker.addEventListener("dragend", function () {
+    const nowPoint = marker.getPosition(); // 拖拽完成之后坐标的位置(经纬度)
+    latlngToAddress(BMap, nowPoint);
+  });
+};
 /**
  * 根据输入框的值在地图上添加标记点
  * @param
@@ -143,6 +199,8 @@ const getList = () => {
  *   searchValue:输入框下拉数据选中的值
  * **/
 const setPlace = (BMap, map, searchValue) => {
+  console.log("根据输入框的值在地图上添加标记点");
+
   map.clearOverlays(); //清除地图上所有覆盖物
   const local = new BMap.LocalSearch(map, {
     //智能搜索
@@ -154,7 +212,7 @@ const setPlace = (BMap, map, searchValue) => {
 
       map.centerAndZoom(pp, 21);
       map.addOverlay(new BMap.Marker(pp)); //添加标注
-      movePoint(BMap, map, res.Vr[0].point);
+      movePoint(BMap, map, res.Wr[0].point);
     },
   });
   local.search(searchValue);
@@ -165,27 +223,7 @@ const setPlace = (BMap, map, searchValue) => {
  *   BMap:地图对象
  *   latlng:经纬度
  * **/
-const movePoint = (BMap, map, latlng) => {
-  map.clearOverlays(); //清除地图上所有覆盖物
-  //使用BMap命名空间下的Point类来创建一个坐标点
-  const point = new BMap.Point(latlng.lng, latlng.lat);
-  const marker = new BMap.Marker(point, {
-    enableDragging: true,
-  });
-  map.addOverlay(marker);
-  latlngToAddress(BMap, latlng);
 
-  // 覆盖物拖拽开始事件
-  marker.addEventListener("dragstart", function (e) {
-    // 清除一些覆盖物
-    console.log("[开始]", e);
-  });
-  // 覆盖物拖拽事件
-  marker.addEventListener("dragend", function () {
-    const nowPoint = marker.getPosition(); // 拖拽完成之后坐标的位置(经纬度)
-    latlngToAddress(BMap, nowPoint);
-  });
-};
 /**
  * 地址解析
  * @param
@@ -193,6 +231,7 @@ const movePoint = (BMap, map, latlng) => {
  *   latlng:经纬度
  * **/
 const latlngToAddress = (BMap, latlng) => {
+  console.log("地址解析");
   const geoc = new BMap.Geocoder();
   geoc.getLocation(latlng, function (rs) {
     console.log(rs.surroundingPois[0]);
@@ -202,6 +241,9 @@ const latlngToAddress = (BMap, latlng) => {
   });
 };
 onBeforeMount(async () => {
+  address.value = props.fatherMessage.position;
+  lat.value = props.fatherMessage.lat;
+  lng.value = props.fatherMessage.lng;
   getList();
   console.log(props.fatherMessage);
 });

+ 190 - 0
src/views/map/map2.vue

@@ -0,0 +1,190 @@
+<template>
+  <div id="map"></div>
+  <div class="address">
+    <span class="lng">请输入地址:</span>
+    <el-input id="suggestId" v-model="address" placeholder="请输入地点" />
+    <div
+      id="searchResultPanel"
+      style="
+        border: 1px solid #c0c0c0;
+        width: 150px;
+        height: auto;
+        display: none;
+      "
+    ></div>
+  </div>
+  <div class="address">
+    <span class="lng">地址:{{ address }}</span>
+    <span class="lng">lng:{{ lng }}</span>
+    <span class="lat">lat:{{ lat }}</span>
+  </div>
+  <div class="options">
+    <el-button
+      color="rgba(9, 101, 98, 1)"
+      class="queding"
+      type="primary"
+      @click="mapAddress(true)"
+    >
+      确定
+    </el-button>
+    <el-button @click="mapAddress(false)">取消</el-button>
+  </div>
+</template>
+
+<script setup>
+import loadBMap from "@/utils/loadMap.js";
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  onMounted,
+  watch,
+  watchEffect,
+  nextTick,
+} from "vue";
+const mapInit = loadBMap("jmkawuXGwcepLcsAqcAi3FeDMfaLhnOE");
+
+const props = defineProps({
+  fatherMessage: {},
+});
+
+const lng = ref("--");
+const lat = ref("--");
+const address = ref("");
+const map = ref();
+
+const emit = defineEmits(["mapClick"]);
+
+// 确定按钮
+const mapAddress = (flag) => {
+  let data = {
+    address: address.value,
+    lng: lng.value,
+    lat: lat.value,
+    flag: flag,
+  };
+  emit("mapClick", data);
+};
+
+const getList = () => {
+  mapInit.then((BMapGL) => {
+    //创建地图实例,位于BMap命名空间下的Map类表示地图,通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
+    // map.value = new BMapGL.Map("map");
+    // 百度地图API功能
+    function G(id) {
+      return document.getElementById(id);
+    }
+
+    var map = new BMapGL.Map("map");
+    map.centerAndZoom("江西", 12); // 初始化地图,设置城市和地图级别。
+
+    var ac = new BMapGL.Autocomplete({
+      //建立一个自动完成的对象
+      input: "suggestId",
+      location: map,
+    });
+
+    ac.addEventListener("onhighlight", function (e) {
+      //鼠标放在下拉列表上的事件
+      var str = "";
+      var _value = e.fromitem.value;
+      var value = "";
+      if (e.fromitem.index > -1) {
+        value =
+          _value.province +
+          _value.city +
+          _value.district +
+          _value.street +
+          _value.business;
+      }
+      str =
+        "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
+
+      value = "";
+      if (e.toitem.index > -1) {
+        _value = e.toitem.value;
+        value =
+          _value.province +
+          _value.city +
+          _value.district +
+          _value.street +
+          _value.business;
+      }
+      str +=
+        "<br />ToItem<br />index = " +
+        e.toitem.index +
+        "<br />value = " +
+        value;
+      G("searchResultPanel").innerHTML = str;
+    });
+
+    var myValue;
+    ac.addEventListener("onconfirm", function (e) {
+      //鼠标点击下拉列表后的事件
+      var _value = e.item.value;
+      myValue =
+        _value.province +
+        _value.city +
+        _value.district +
+        _value.street +
+        _value.business;
+      G("searchResultPanel").innerHTML =
+        "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
+
+      setPlace();
+    });
+
+    function setPlace() {
+      map.clearOverlays(); //清除地图上所有覆盖物
+      function myFun() {
+        var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
+        map.centerAndZoom(pp, 18);
+        map.addOverlay(new BMapGL.Marker(pp)); //添加标注
+      }
+      var local = new BMapGL.LocalSearch(map, {
+        //智能搜索
+        onSearchComplete: myFun,
+      });
+      local.search(myValue);
+    }
+  });
+};
+
+onBeforeMount(async () => {
+  getList();
+  console.log(props.fatherMessage);
+});
+</script>
+
+<style lang="scss" scoped>
+#map {
+  border: 1px solid red;
+  box-sizing: border-box;
+  width: 100%;
+  height: 600px;
+}
+#suggestId {
+  // border: 1px solid red;
+  width: 120px !important;
+  height: 30px;
+}
+.el-input {
+  width: 350px;
+}
+.address {
+  margin: 10px 20px;
+}
+.lng {
+  margin-right: 20px;
+}
+.options {
+  width: 98%;
+
+  .queding {
+    margin-left: 20px;
+    color: #fff;
+  }
+  display: flex;
+  flex-direction: row-reverse;
+}
+</style>

+ 8 - 4
src/views/roomInfo/roomInfo.vue

@@ -655,7 +655,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, nextTick, onBeforeMount, onUnmounted } from "vue";
+import { ref, reactive, nextTick, onBeforeMount, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { Calendar } from "@element-plus/icons-vue";
@@ -856,8 +856,7 @@ const mapDatas = (data) => {
 
 // 点击地图定位按钮
 const clickMap = () => {
-  console.log("点击了地图定位");
-
+  console.log(tableData.value, "点击了地图定位");
   fatherMessage.value.position = tableData.value.hposition;
   fatherMessage.value.lng = tableData.value.hpositionWens.split(",")[0];
   fatherMessage.value.lat = tableData.value.hpositionWens.split(",")[1];
@@ -1778,7 +1777,12 @@ onBeforeMount(async () => {
 
           .form_item {
             display: flex;
-
+            .items {
+              .el-checkbox-group {
+                height: 100%;
+                line-height: 0;
+              }
+            }
             .intro {
               .el-form-item__content {
                 width: 550px;