设施地图查看完善/功能组件封装/部分页面优化

src/api/business/fireIot/facilitiesView/index.js

@@ -43,4 +43,23 @@ export function buildInfo(param) {
         method: "GET",
         data: param,
     });
-}
+}
+
+
+// 设施地图列表查询
+export function typeSelect(param) {
+    return request({
+        url: "/service-iot/baseFacilityType/typeSelect",
+        method: "GET",
+        data: param,
+    });
+}
+
+// 设施地图撒点查询
+export function baseGgpFacilityList(param) {
+    return request({
+        url: "/service-iot/baseGgpFacility/baseGgpFacilityList",
+        method: "POST",
+        data: param,
+    });
+}

src/components/oa-dropdown/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <view>
+    <view class="dropdown" :class="dropdownShow ? 'show' : 'none'">
+      <view class="content">
+        <slot name="content"></slot>
+      </view>
+    </view>
+    <view v-if="closeOnClickOverlay" class="dropdown" :class="dropdownShow ? 'mask' : 'none'" @click="close()"> </view>
+  </view>
+</template>
+<script setup>
+import { onReady, onLoad, onShow, onNavigationBarButtonTap, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
+import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, watchEffect, toRefs } from "vue";
+
+const emit = defineEmits(["close"]);
+const props = defineProps({
+  //显示隐藏
+  dropdownShow: {
+    type: Boolean,
+    default: false,
+  },
+  //是否开启遮罩层关闭
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const { dropdownShow, closeOnClickOverlay } = toRefs(props);
+
+function close() {
+  emit("close", false);
+}
+</script>
+<style scoped>
+.dropdown {
+  position: absolute;
+  width: 100%;
+  background-color: #fff;
+  max-height: 0;
+  overflow: hidden;
+  z-index: 90;
+  transition: max-height 0.4s ease-in-out;
+}
+
+.dropdown.show {
+  max-height: 100%;
+  box-shadow: 0px 1px 4px 0px rgba(141, 141, 141, 0.4);
+}
+
+.dropdown.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: transparent;
+  max-height: 100%;
+  z-index: 50;
+}
+
+.dropdown .content {
+  padding: 10px;
+}
+</style>

src/main.js

@@ -20,6 +20,7 @@ import oaTimeLineItem from "@/components/oa-timeLine-item/index"
 import oaUpload from "@/components/oa-upload/index"
 import oaScroll from "@/components/oa-scroll/index"
 import oaTouch from "@/components/oa-touch/index"
+import oaDropdown from "@/components/oa-dropdown/index"
 
 export function createApp() {
   const app = createSSRApp(App);
@@ -32,7 +33,8 @@ export function createApp() {
   app.component('oa-upload', oaUpload)
   app.component('oa-scroll', oaScroll)
   app.component('oa-touch', oaTouch)
-
+  app.component('oa-dropdown', oaDropdown)
+  
 
   // 挂载全局json导出
   app.component("downloadExcel", JsonExcel);

src/pages.json

@@ -516,7 +516,7 @@
           }
         },
         {
-          "path": "facilitiesView/mapGatherView",
+          "path": "facilitiesView/mapFacilitiesView",
           "style": {
             "navigationBarTitleText": "设施查看",
             "enablePullDownRefresh": false

src/pages/business/fireIot/deviceSelect/components/deviceDetailsList.vue

@@ -1,18 +1,4 @@
 <template>
-  <u-sticky class="example-body" style="top: 0px">
-    <view class="padding-sm padding-tb-10" :class="'bg-' + proxy.$settingStore.themeColor.name">
-      <u--input
-        v-model="deviceName"
-        placeholder="搜索"
-        prefixIcon="search"
-        prefixIconStyle="font-size: 22px;color: #909399"
-        customStyle="height:35px;background-color:#f5f6fa;"
-        @confirm="init()"
-        clearable
-      ></u--input>
-    </view>
-  </u-sticky>
-
   <oa-scroll
     customClass="scroll-height"
     :pageSize="pageSize"
@@ -28,10 +14,42 @@
   >
     <template #default>
       <view class="deviceDetailsList-container">
+        <view class="flex bg-white padding-10" style="position: relative">
+          <u--input
+            v-model="deviceName"
+            placeholder="请输入设备名称"
+            prefixIcon="search"
+            prefixIconStyle="font-size: 22px;color: #909399"
+            customStyle="height:30px;background-color:#f5f6fa;"
+            @confirm="dmpDeviceInfoApi()"
+            clearable
+          ></u--input>
+          <view class="margin-l-10" style="margin-top: auto; margin-bottom: auto" @click="dropdownShow = !dropdownShow">筛选</view>
+        </view>
+
+        <oa-dropdown :dropdownShow="dropdownShow" :closeOnClickOverlay="true" @close="dropdownShow = false">
+          <template #content>
+            <u-radio-group v-model="radioValue" placement="column" iconPlacement="right" @change="radioChange">
+              <u-radio v-for="ra in radioList" :key="ra" :activeColor="proxy.$settingStore.themeColor.color" :label="ra.label" :name="ra.value"></u-radio>
+            </u-radio-group>
+          </template>
+        </oa-dropdown>
+
         <view class="menu-list margin-0">
           <view class="list-cell list-cell-arrow" v-for="(base, index) in dataList" :key="index" @click="handleToDevice(base)">
             <view class="menu-item-box">
-              <view class="title">{{ base.deviceName }}</view>
+              <image class="image-bg" style="width: 80rpx; height: 80rpx; margin: auto 10px auto 0" src="@/static/images/deviceManage/1.png"></image>
+
+              <view style="width: calc(100% - 51px); display: flex; flex-flow: row wrap; padding-right: 10px">
+                <view class="deviceHeader">
+                  <view class="deviceName text-ellipsis">设备编号：{{ base.deviceId }}</view>
+                  <view class="deviceStatus" v-if="base.deviceStatus == 1" style="background-color: #12c100"> 在线 </view>
+                  <view class="deviceStatus" v-if="base.deviceStatus == 2" style="background-color: red"> 离线 </view>
+                </view>
+                <view class="deviceContent">设备名称：{{ base.deviceName }}</view>
+                <view class="deviceContent">安装位置：{{ base.installAddress }}</view>
+                <!-- <view class="deviceContent">激活状态：{{ base.serviceStatus == 1 ? "未激活" : base.serviceStatus == 2 ? "已激活" : "禁用" }}</view> -->
+              </view>
             </view>
           </view>
         </view>
@@ -58,6 +76,27 @@ const pageSize = ref(20);
 const current = ref(1);
 const total = ref(0);
 
+const data = reactive({
+  radioList: [
+    {
+      label: "全部",
+      value: "",
+    },
+    {
+      label: "在线",
+      value: "1",
+    },
+    {
+      label: "离线",
+      value: "2",
+    },
+  ],
+  radioValue: "",
+  dropdownShow: false,
+});
+
+const { radioList, radioValue, dropdownShow } = toRefs(data);
+
 /**
  * @页面初始化
  */
@@ -93,6 +132,14 @@ function handleToDevice(array) {
   publicStore.$state.deviceDetailsArray.productName = productName.value;
 }
 
+/**
+ * @单选change事件
+ */
+function radioChange(e) {
+  radioValue.value = e;
+  selectListApi();
+}
+
 /**
  * @scrollView加载数据
  */
@@ -131,5 +178,36 @@ onLoad((options) => {
 
 <style lang="scss" scoped>
 .deviceDetailsList-container {
+  .menu-item-box {
+  }
+
+  .deviceHeader {
+    min-width: 100%;
+    font-size: 15px;
+    display: flex;
+    white-space: nowrap;
+
+    .deviceName {
+      min-width: 70%;
+      color: #000;
+    }
+
+    .deviceStatus {
+      max-width: 30%;
+      margin-left: 20px;
+      font-size: 12px;
+      color: #ffffff;
+      padding: 0 5px;
+      border-radius: 20px;
+      line-height: 20px;
+    }
+  }
+
+  .deviceContent {
+    min-width: 100%;
+    margin-top: 10px;
+    font-size: 14px;
+    color: rgb(102, 102, 102);
+  }
 }
 </style>

src/pages/business/fireIot/facilitiesView/index.vue

@@ -36,7 +36,7 @@
           </view>
         </view>
 
-        <view style="margin-top: auto; margin-bottom: auto" @click="handleToMap(data.id)">
+        <view style="margin-top: auto; margin-bottom: auto" @click="handleToMap(data.typeCode)">
           <view class="iconfont ucicon-app-map icon" :style="{ color: proxy.$settingStore.themeColor.color, fontSize: '22px' }"></view>
         </view>
       </view>
@@ -64,7 +64,10 @@ const dataList = ref([]);
  * @页面初始化
  */
 function init() {
-  baseFacilityType().then((requset) => {
+  baseFacilityType({
+    pageNum: 1,
+    pageSize: 20000,
+  }).then((requset) => {
     if (requset.status === "SUCCESS") {
       if (requset.data.length > 0) {
         dataList.value = requset.data[0].baseGgpFacilityTypeNumVO;
@@ -92,8 +95,8 @@ function handleToDevice(id, typeName) {
 /**
  * @设施地图查看
  */
-function handleToMap(id) {
-  proxy.$tab.navigateTo(`/pages/business/fireIot/facilitiesView/mapGatherView?facilitiesId=${id}`);
+function handleToMap(typeCode) {
+  proxy.$tab.navigateTo(`/pages/business/fireIot/facilitiesView/mapFacilitiesView?typeCode=${typeCode}`);
 }
 
 onLoad(() => {

src/pages/business/fireIot/facilitiesView/mapFacilitiesView.vue

@@ -0,0 +1,131 @@
+<template>
+  <web-view
+    id="amapView"
+    ref="amapView"
+    src="/static/amap/mapFacilitiesView.html"
+    bindmessage="receiveMessage"
+    :webview-styles="{
+      height: proxy.$settingStore.webViewHeight,
+    }"
+    @message="onMessage"
+  ></web-view>
+</template>
+
+<script setup>
+import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
+import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, toRefs, nextTick } from "vue";
+import { publicStores, useStores } from "@/store/modules/index";
+
+import { baseFacilityType, baseGgpFacilityList } from "@/api/business/fireIot/facilitiesView/index";
+
+const publicStore = publicStores(); //全局公共Store
+
+const { proxy } = getCurrentInstance();
+const pages = getCurrentPages();
+
+const dataArray = ref();
+const typeCode = ref("");
+
+/**
+ * @初始化
+ */
+function init() {
+  handleSelectApi();
+}
+
+/**
+ * @设施地图列表查询
+ * @api接口查询
+ */
+function handleSelectApi() {
+  baseFacilityType({
+    pageNum: 1,
+    pageSize: 20000,
+  }).then((requset) => {
+    if (requset.status === "SUCCESS") {
+      if (requset.data.length > 0) {
+        setTimeout(() => {
+          var message = {
+            funcName: "初始化",
+            param: JSON.stringify(requset.data[0]),
+          };
+
+          handleChildren(message);
+        }, 1000);
+      }
+    }
+  });
+}
+
+/**
+ * @撒点查询
+ * @api接口查询
+ */
+function handleMarkerApi(param) {
+  baseGgpFacilityList({
+    facilityType: param,
+  }).then((requset) => {
+    if (requset.status === "SUCCESS") {
+      var message = {
+        funcName: "撒点",
+        param: JSON.stringify(requset.data),
+      };
+      handleChildren(message);
+    }
+  });
+}
+
+/**
+ * @解析父页面传回的数据
+ */
+function analysisData(data) {
+  if ("funcName" in data) {
+    if (data.funcName == "撒点") {
+      var param = data.param.split(",");
+      handleMarkerApi(param);
+    }
+  }
+}
+
+/**
+ * @向子页面发送数据
+ */
+function handleChildren(data) {
+  // #ifdef APP-PLUS
+  var currentWebview = pages[pages.length - 1].$getAppWebview();
+  var wv = currentWebview.children()[0];
+  wv.evalJS(`receiveData(${JSON.stringify(data)})`);
+  // #endif
+
+  // #ifdef H5
+  var iframe = document.getElementById("amapView");
+  iframe.contentWindow.postMessage(data, "*");
+  // #endif
+}
+
+/**
+ * @接收子页面传过来的值
+ */
+function onMessage(e) {
+  analysisData(e.detail.data[0]);
+}
+// #ifdef H5
+window.onmessage = function (event) {
+  analysisData(event.data);
+};
+// #endif
+
+onLoad((options) => {
+  if ("typeCode" in options) {
+    typeCode.value = options.typeCode;
+    init();
+  }
+});
+
+onShow(() => {
+  //调用系统主题颜色
+  proxy.$settingStore.systemThemeColor([1]);
+});
+
+onReady(() => {});
+</script>

src/pages/business/fireIot/facilitiesView/mapGatherView.vue

@@ -1,81 +0,0 @@
-<template>
-  <web-view
-    id="amapView"
-    ref="amapView"
-    src="/static/amap/mapGatherView.html"
-    bindmessage="receiveMessage"
-    :webview-styles="{
-      height: proxy.$settingStore.webViewHeight,
-    }"
-    @message="onMessage"
-  ></web-view>
-</template>
-
-<script setup>
-import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
-import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, toRefs, nextTick } from "vue";
-import { publicStores, useStores } from "@/store/modules/index";
-
-const publicStore = publicStores(); //全局公共Store
-
-const { proxy } = getCurrentInstance();
-
-const pages = getCurrentPages();
-
-const dataArray = publicStore.$state.facilitiesGatherArray;
-const dataType = publicStore.$state.facilitiesGatherType;
-
-// #ifdef APP-PLUS
-setTimeout(() => {
-  var currentWebview = pages[pages.length - 1].$getAppWebview();
-  var wv = currentWebview.children()[0];
-  wv.evalJS(`receiveData(${JSON.stringify({ dataArray: dataArray, dataType: dataType })})`);
-}, 1000);
-// #endif
-
-function onMessage(e) {
-  console.log("父页面：", e.detail.data);
-  publicStore.$state.facilitiesGatherArray = JSON.parse(e.detail.data);
-  uni.redirectTo({
-    url: "/pages/business/fireIot/facilitiesGather/index",
-  });
-}
-
-// #ifdef H5
-setTimeout(() => {
-  var iframe = document.getElementById("amapView");
-  var message = {
-    funcName: "children",
-    param: JSON.stringify(dataArray),
-    typeName: dataType,
-  };
-
-  iframe.contentWindow.postMessage(message, "*");
-}, 1000);
-
-window.onmessage = function (event) {
-  if ("funcName" in event.data) {
-    console.log("父页面：", event);
-    publicStore.$state.facilitiesGatherArray = JSON.parse(event.data.param);
-    uni.redirectTo({
-      url: "/pages/business/fireIot/facilitiesGather/index",
-    });
-  }
-};
-// #endif
-
-onLoad((options) => {
-  if ("facilitiesId" in options) {
-    var facilitiesId = options.facilitiesId;
-  }
-});
-
-onShow(() => {
-  //调用系统主题颜色
-  proxy.$settingStore.systemThemeColor([1]);
-});
-
-onReady(() => {});
-
-onMounted(() => {});
-</script>

src/pages/common/customManage/index.vue

@@ -26,14 +26,13 @@
           <view class="margin-l-10" style="margin-top: auto; margin-bottom: auto" @click="dropdownShow = !dropdownShow">筛选</view>
         </view>
 
-        <view class="dropdown" :class="dropdownShow ? 'show' : 'none'">
-          <view class="padding-10">
+        <oa-dropdown :dropdownShow="dropdownShow" :closeOnClickOverlay="true" @close="dropdownShow = false">
+          <template #content>
             <u-radio-group v-model="radioValue" placement="column" iconPlacement="right" @change="radioChange">
               <u-radio v-for="ra in radioList" :key="ra" :activeColor="proxy.$settingStore.themeColor.color" :label="ra.label" :name="ra.value"></u-radio>
             </u-radio-group>
-          </view>
-        </view>
-        <view class="dropdown" :class="dropdownShow ? 'mask' : 'none'" @click="dropdownShow = !dropdownShow"> </view>
+          </template>
+        </oa-dropdown>
 
         <view class="container-area menu-list margin-lr-0" v-for="data in dataList" :key="data">
           <view class="list-cell" style="color: #666666; line-height: 30px">
@@ -205,40 +204,5 @@ onNavigationBarButtonTap((e) => {
 }
 
 .customManage-container {
-  .container-area {
-  }
-
-  .dropdown {
-    position: absolute;
-    width: 100%;
-    background-color: #fff;
-    max-height: 0;
-    overflow: hidden;
-    z-index: 90;
-
-    &.show {
-      animation: dropdown 3s ease forwards;
-    }
-
-    &.mask {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: transparent;
-      max-height: 100%;
-      z-index: 50;
-    }
-  }
-
-  @keyframes dropdown {
-    from {
-      max-height: 0;
-    }
-    to {
-      max-height: 100%;
-    }
-  }
 }
 </style>

src/pages/mine/secure/index.vue

@@ -69,13 +69,13 @@
           </template>
         </u-input>
 
-        <u-input class="margin-b-15" v-model="oldPassword" placeholder="请输入新密码" :password="newPasswordBool" border="bottom">
+        <u-input class="margin-b-15" v-model="newPassword" placeholder="请输入新密码" :password="newPasswordBool" border="bottom">
           <template #suffix>
             <text :class="!newPasswordBool ? 'iconfont ucicon-eye' : 'iconfont ucicon-eye-close'" @click="newPasswordBool = !newPasswordBool"></text>
           </template>
         </u-input>
 
-        <u-input v-model="confirmPassword" placeholder="请输入新密码" :password="confirmPasswordBool" border="bottom">
+        <u-input v-model="confirmPassword" placeholder="请再次输入新的密码" :password="confirmPasswordBool" border="bottom">
           <template #suffix>
             <text :class="!confirmPasswordBool ? 'iconfont ucicon-eye' : 'iconfont ucicon-eye-close'" @click="confirmPasswordBool = !confirmPasswordBool"></text>
           </template>
@@ -136,7 +136,7 @@ function handleConfirm() {
       return;
     }
 
-    if (/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(userArr.value.phonenumber)) {
+    if (!/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(userArr.value.phonenumber)) {
       proxy.$modal.showToast("请输入正确的手机号码");
       return;
     }
@@ -153,7 +153,7 @@ function handleConfirm() {
       return;
     }
 
-    if (newPassword.value.length > 6 && newPassword.value.length < 20) {
+    if (newPassword.value.length < 6 && newPassword.value.length > 20) {
       proxy.$modal.showToast("长度在 6 到 20 个字符");
       return;
     }
@@ -171,19 +171,29 @@ function handleConfirm() {
 
   if (modalTitle.value == "修改手机号") {
     updateUserProfile(userArr.value).then((response) => {
-      proxy.$tab.reLaunch("/pages/mine");
+      proxy.$modal.msgSuccess("修改成功");
+      modalShow.value = false;
       useStore.getUser();
     });
   } else if (modalTitle.value == "修改密码") {
-    form.value.validate().then((res) => {
-      updateUserPwd(oldPassword.value, newPassword.value).then((response) => {
-        proxy.$modal.msgSuccess("修改成功");
-      });
+    updateUserPwd(oldPassword.value, newPassword.value).then((response) => {
+      proxy.$modal.msgSuccess("修改成功");
+      modalShow.value = false;
+      oldPassword.value = undefined;
+      oldPasswordBool.value = true;
+      newPassword.value = undefined;
+      newPasswordBool.value = true;
+      confirmPassword.value = undefined;
+      confirmPasswordBool.value = true;
+
+      useStore.getUser();
     });
   }
 }
 
-onLoad((options) => {});
+onLoad((options) => {
+  useStore.getUser();
+});
 
 onReady(() => {});
 

src/static/amap/coordination.html

@@ -531,6 +531,12 @@
         initMap();
         mapCluster();
     </script>
+    <style>
+        .amap-logo,
+        .amap-copyright {
+            display: none !important;
+        }
+    </style>
 </body>
 
 </html>

src/static/amap/css/common.css

@@ -0,0 +1,90 @@
+.amap-logo,
+.amap-copyright {
+  display: none !important;
+}
+
+.amap-marker-label {
+  position: absolute;
+  padding: 0.75rem 1.25rem;
+  border-radius: 6px;
+  background-color: white;
+  border-width: 0;
+  box-shadow: 0px 0px 5px 0px rgba(141, 141, 141, 0.4);
+  display: none;
+}
+
+.amap-marker-labe .infoLabel {
+  width: 100%;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 数字角标 */
+.badge {
+  position: absolute;
+  right: 5px;
+  top: -10px;
+  padding: 0 6px;
+  background-color: #f56c6c;
+  color: #fff;
+  border-radius: 10px;
+  font-size: 12px;
+}
+
+/* 抽屉样式 */
+.drawer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 0rem;
+  background-color: #fff;
+  overflow: hidden;
+  transition: height 0.4s ease-in-out;
+  border-radius: 10px 10px 0 0;
+  box-shadow: 0px 0px 5px 0px rgba(141, 141, 141, 0.4);
+}
+
+.drawer.open {
+  height: 23rem;
+}
+
+.drawer .header {
+  display: flex;
+  height: 35px;
+  line-height: 35px;
+  padding: 0 8px;
+  border-bottom: 1px solid #eaeef1;
+}
+
+.drawer .header .title {
+  font-size: 13px;
+  font-weight: 600;
+  margin-right: auto;
+}
+
+.drawer .center {
+  display: flex;
+  overflow: auto;
+  padding: 8px;
+}
+
+.drawer .center img {
+  width: 40%;
+  margin-right: 8px;
+}
+
+.drawer .center .model {
+  width: 60%;
+}
+
+.drawer .center .model .content {
+  display: flex;
+  margin-bottom: 8px;
+}
+
+.drawer .center .model .content .icon {
+  margin-right: 8px;
+}

src/static/amap/css/input.css

@@ -0,0 +1,62 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+}
+html {
+  font-size: 12px;
+}
+.amap-copyright {
+  box-sizing: content-box;
+}
+
+button,
+input,
+select {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  overflow: visible;
+  text-transform: none;
+}
+
+input {
+  width: 100%;
+  border: 0px solid #ced4da;
+  border-radius: 10px;
+  padding: 5px;
+  caret-color: #2a98ff;
+  font-size: 13px;
+}
+
+input:focus {
+  outline: none;
+  border-radius: 10px;
+  border: 0px solid #25a5f7;
+}
+
+.ui-input {
+  display: flex;
+  height: 40px;
+  font-size: 14px;
+  border-radius: 10px;
+  background-color: #fff;
+  box-shadow: 0px 0px 5px 0px rgba(141, 141, 141, 0.4);
+}
+
+.ui-input .icon {
+  color: #2a98ff;
+  font-size: 1.5rem;
+  padding: 0 0 0 8px;
+  margin: auto 0;
+}
+
+input::-webkit-input-placeholder,
+:-moz-placeholder,
+::-moz-placeholder,
+input:-ms-input-placeholder,
+input::-ms-input-placeholder {
+  color: #c0c4cc;
+}

src/static/amap/mapFacilitiesView.html

@@ -0,0 +1,422 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <title>设施查看</title>
+    <link rel="stylesheet" href="./css/input.css" />
+    <link rel="stylesheet" href="./css/common.css" />
+    <link rel="stylesheet" type="text/css" href="./js/M_select/M_select.css">
+    <link rel="stylesheet" type="text/css" href="./js/notification/index.css">
+    <style>
+        html,
+        body,
+        #mapF {
+            height: 100%;
+            width: 100%;
+        }
+    </style>
+    <style>
+        @font-face {
+            font-family: "iconfont";
+            /* Project id 3620854 */
+            src: url('https://at.alicdn.com/t/c/font_3620854_18olo3dgg2h.woff2?t=1691473656726') format('woff2'),
+                url('https://at.alicdn.com/t/c/font_3620854_18olo3dgg2h.woff?t=1691473656726') format('woff'),
+                url('https://at.alicdn.com/t/c/font_3620854_18olo3dgg2h.ttf?t=1691473656726') format('truetype');
+        }
+
+        /* 定义使用的样式 iconfont */
+        .iconfont {
+            font-family: "iconfont" !important;
+            font-size: 1rem;
+            font-style: normal;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="mapF" class="map" tabindex="0"></div>
+
+    <div id="myPageTop">
+        <!-- <div class="ui-input">
+            <i class="iconfont icon">&#xe60d;</i>
+            <input id="uiInput" placeholder="请输入设施名称" />
+        </div> -->
+
+        <div id="myPageRight">
+            <div class="myPageType" style="text-align: center;">
+                <i class="iconfont icon" style="font-size: 1.5rem;">&#xe60e;</i>
+                <div style="font-size: 12px;">设施</div>
+            </div>
+            <div style="margin: 5px 0 5px 0;border-bottom: 1px solid #eaeef1;"></div>
+            <div class="myPageLabel" style="text-align: center;">
+                <i class="iconfont icon" style="font-size: 1.5rem;">&#xe60e;</i>
+                <div style="font-size: 12px;">标签</div>
+            </div>
+        </div>
+
+        <div id="myPageDialog">
+            <div class="title">设施汇总（0）</div>
+            <div class="center"></div>
+            <div class="bottom" style="text-align: center;">
+                <i class="iconfont icon" style="color: #a8abb2; font-size: 18px;">&#xe63d;</i>
+            </div>
+        </div>
+    </div>
+
+    <div class="drawer">
+        <div class="header">
+            <div class="title"></div>
+            <i class="iconfont icon close" style="color: #a8abb2; font-size: 12px;">&#xe695;</i>
+        </div>
+        <div class="center">
+            <img src="" alt="">
+            <div class="model">
+                <div class="content">
+                    <i class="iconfont icon" style="color:#0C83FA;font-size: 16px;">&#xe60f;</i>
+                    <div class="address"></div>
+                </div>
+                <div class="content">
+                    <i class="iconfont icon" style="color:#01b713;font-size: 16px;">&#xe616;</i>
+                    <div class="facilityType"></div>
+                </div>
+                <div class="content">
+                    <i class="iconfont icon" style="color:#ed480e;font-size: 16px;">&#xe617;</i>
+                    <div class="branch"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://a.amap.com/jsapi_demos/static/china.js"></script>
+    <script type="text/javascript">
+        window._AMapSecurityConfig = {
+            securityJsCode: 'ce0e44758ad6b69607e23bf8e6a6ac11',
+        }
+    </script>
+    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=14aefebea926bb958032d5daf836fadf">
+    </script>
+
+    <script type="text/javascript" src="https://webapi.amap.com/ui/1.1/main.js"></script>
+    <script type="text/javascript" src="./js/jquery-2.2.1.min.js"></script>
+
+    <!-- uni 的 SDK -->
+    <!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 -->
+    <script type="text/javascript" src="./js/uni.webview.1.5.4.js"></script>
+
+    <script type="text/javascript">
+        var dataList = [];//初始化数据存储
+        var dataListCheckBox = [];//初始化数据选中数据存储
+        var facilityNum = 0;//设施汇总数据存储
+
+        var map = [];
+        var marker = null;//创建点标记
+
+        var myPageRight = {
+            myPageTypeBool: 'none',//设施类型
+            myPageLabelBool: 'none',//标签
+        };//右侧小按钮绑定值存储
+
+        /**
+         * 初始化
+         */
+        function initMap() {
+            map = new AMap.Map("mapF", {
+                // mapStyle: 'amap://styles/d0ddc09bd7cbd7331a8e8fa691e5b0da', //设置地图的显示样式
+                resizeEnable: true,
+                center: [121.4737021, 31.2303904],
+                zoom: 13,
+                zooms: [3, 16],
+            });
+
+            map.setFitView();
+        }
+
+        /**
+         * 撒点
+         */
+        function handleMarker(data) {
+            AMap.plugin(["AMap.PolygonEditor,AMap.PolylineEditor", "AMap.Marker"], function () {
+                map.clearMap(); // 清除地图覆盖物
+
+                if (data.length > 0) {
+                    marker = new AMap.Marker({});//初始化点标记
+
+                    var markerData = data.map((item) => {
+                        return {
+                            position: [Number(item.longitude), Number(item.latitude)],
+                            icon: new AMap.Icon({
+                                image: item.icon || item.typeImg,
+                                size: new AMap.Size(28, 35), //图标大小
+                                imageSize: new AMap.Size(28, 35),
+                            }),
+                            data: item
+                        };
+                    })
+
+                    for (var i = 0, marker; i < markerData.length; i++) {
+                        marker = new AMap.Marker({
+                            map: map,
+                            icon: markerData[i].icon,
+                            position: markerData[i].position,
+                            offset: new AMap.Pixel(-10, -10),
+                        });
+                        marker.data = markerData[i]
+                        marker.setLabel({
+                            direction: 'top-left',
+                            offset: new AMap.Pixel(-5, -10), //设置文本标注偏移量
+                            content: `<div class='infoLabel'>${marker.data.data.facilityName}</div>`, //设置文本标注内容
+                        });
+                        marker.on('click', function (e) {
+                            var data = e.target.data.data
+                            handleDrawer(data)
+                        });
+                    }
+
+                    handleRightBtn();
+                    marker.setMap(map);
+                    map.setFitView(null, false, [150, 60, 100, 60]);
+                }
+            })
+        }
+
+        /**
+         * 初始化数据
+         */
+        function initData() {
+            $('#myPageDialog .title').html(`设施汇总（${facilityNum}）`)
+            var html = ``
+            dataList.forEach(el => {
+                html += `
+                <div id="${el.typeCode}" class="center-col" onclick="checkbox(${el.typeCode})">
+                    <div class="image">
+                        <img style="max-width:40px;height:40px;margin: auto;"
+                            src="${el.typeImg}" />
+                        <div class="badge"> ${el.typeFacilityNum >= 100 ? '99+' : el.typeFacilityNum || 0} </div>
+                    </div>
+                    <div style="text-align: center;font-size: 12px;margin-bottom: 5px;">${el.typeName}</div>
+                </div>
+                `
+            });
+
+            $('#myPageDialog .center').append(html)
+
+
+            $('#myPageRight .myPageLabel').on('click', function (e) {
+                if (myPageRight.myPageLabelBool == "none") {
+                    myPageRight.myPageLabelBool = "block";
+                    $('#myPageRight .myPageLabel').css('color', '#2a98ff')
+                } else {
+                    myPageRight.myPageLabelBool = "none";
+                    $('#myPageRight .myPageLabel').css('color', '#000000')
+                }
+
+                $('.amap-marker-label').css('display', myPageRight.myPageLabelBool)
+            })
+
+            $('#myPageRight .myPageType').on('click', function (e) {
+                if (myPageRight.myPageTypeBool == "none") {
+                    myPageRight.myPageTypeBool = "block";
+                    $('#myPageRight .myPageType').css('color', '#2a98ff')
+                } else {
+                    myPageRight.myPageTypeBool = "none";
+                    $('#myPageRight .myPageType').css('color', '#000000')
+                }
+
+                $('#myPageDialog').css('display', myPageRight.myPageTypeBool)
+            })
+
+            var display = "flex"
+            $('#myPageDialog .bottom').on('click', function (e) {
+                if (display == "none") {
+                    $('#myPageDialog .bottom').css('transform', 'rotate(-180deg)')
+                    display = "flex"
+                } else {
+                    $('#myPageDialog .bottom').css('transform', 'rotate(0deg)')
+                    display = "none"
+                }
+                $('#myPageDialog .center').css('display', display)
+            })
+
+            initMap()
+        }
+
+
+        /**
+         * 校验右侧小按钮
+         */
+        function handleRightBtn() {
+            if (myPageRight.myPageLabelBool == 'block') {
+                // $('#myPageRight .myPageLabel').trigger('click')
+                $('.amap-marker-label').css('display', myPageRight.myPageLabelBool)
+            }
+        }
+
+        /**
+         * 复选事件
+         */
+        function checkbox(typeCode) {
+            if (dataListCheckBox.includes(typeCode)) {
+                dataListCheckBox.splice(dataListCheckBox.indexOf(typeCode), 1);
+                $(`#${typeCode}`).attr('class', 'center-col')
+            } else {
+                dataListCheckBox.push(typeCode)
+                $(`#${typeCode}`).attr('class', 'center-col mask')
+            }
+
+            parentMessage("撒点", dataListCheckBox.join(','));
+        }
+
+        /*
+         * 抽屉事件
+         */
+        function handleDrawer(data) {
+            $(`.drawer`).attr('class', 'drawer open')
+            $(`.drawer .header .title`).html(data.facilityName)
+            $(`.drawer .center img`).attr("src", data.imagesUrl ? data.imagesUrl : "../images/404.png")
+            $(`.drawer .center .model .content .address`).html(data.address)
+            $(`.drawer .center .model .content .facilityType`).html(data.typeName)
+            $(`.drawer .center .model .content .branch`).html(data.deptId)
+
+            $(`.drawer .header .close`).on('click', function (e) {
+                $(`.drawer`).attr('class', 'drawer')
+            })
+        }
+
+        /**
+         * 向父页面发送数据
+         */
+        function parentMessage(type, data) {
+            var message = {
+                funcName: type,
+                param: data,
+            };
+
+            //APP-PLUS
+            uni.postMessage({
+                data: message
+            });
+
+            //H5
+            if (window.parent) {
+                window.parent.postMessage(message, '*');
+            }
+        }
+
+        /**
+         * APP-PLUS || H5
+         * 接收父页面传过来的值
+         */
+        window.receiveData = function (msg) {
+            analysisData(msg)
+        }
+        window.addEventListener("message", function (event) {
+            analysisData(event.data)
+        });
+
+        /**
+         * 解析数据
+         */
+        function analysisData(data) {
+            if ("funcName" in data) {
+                if (data.funcName == "初始化") {
+                    var param = JSON.parse(data.param);
+                    dataList = param.baseGgpFacilityTypeNumVO;
+                    facilityNum = param.facilityNum;
+                    initData();
+                } else if (data.funcName == "撒点") {
+                    var param = JSON.parse(data.param);
+                    param.forEach((e) => {
+                        dataList.forEach(el => {
+                            if (e.facilityType === el.typeCode) {
+                                e.typeImg = el.typeImg
+                                e.typeName = el.typeName
+                            }
+                        });
+                    })
+                    handleMarker(param)
+                }
+            }
+        }
+    </script>
+    <style>
+        #myPageTop {
+            position: absolute;
+            left: 8px;
+            top: 8px;
+            background: transparent;
+            font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";
+            font-size: 13px;
+            width: calc(100% - 16px);
+        }
+
+        #myPageRight {
+            position: absolute;
+            right: 0px;
+            background-color: #fff;
+            margin-top: 8px;
+            padding: 5px;
+            border-radius: 10px;
+            box-shadow: 0px 0px 5px 0px rgba(141, 141, 141, 0.4);
+        }
+
+        #myPageTop #myPageDialog {
+            position: absolute;
+            right: calc(34px + 8px);
+            width: 14rem;
+            width: calc(100% - 34px - 8px);
+            padding: 10px 10px 5px 10px;
+            margin-top: 8px;
+            background: #fff;
+            box-shadow: 0px 0px 5px 0px rgba(141, 141, 141, 0.4);
+            display: none;
+        }
+
+        #myPageTop #myPageDialog .title {
+            font-weight: 600;
+            text-align: center;
+            margin-bottom: 10px;
+        }
+
+        #myPageTop #myPageDialog .center {
+            display: flex;
+            max-height: 260px;
+            overflow: auto;
+            flex-wrap: wrap;
+        }
+
+        #myPageTop #myPageDialog .center .mask {
+            border-radius: 4px;
+            background: #c2ddf6;
+        }
+
+        #myPageTop #myPageDialog .center .center-col {
+            /* max-width: calc(25% - 2.5px);
+            flex: 0 0 calc(25% - 2.5px); */
+
+            max-width: calc(25% - 3.75px);
+            flex: 0 0 calc(25% - 3.75px);
+            margin: 0px 5px 5px 0;
+        }
+
+        #myPageTop #myPageDialog .center .center-col:nth-child(4n) {
+            margin-right: 0;
+        }
+
+        #myPageTop #myPageDialog .center .center-col .image {
+            position: relative;
+            display: flex;
+            margin: 15px 0 5px 0;
+        }
+
+        #myPageTop #myPageDialog .bottom {
+            transform: rotate(-180deg);
+        }
+    </style>
+</body>
+
+</html>

src/static/amap/mapGather.html

@@ -317,6 +317,11 @@
         }
     </script>
     <style>
+        .amap-logo,
+        .amap-copyright {
+            display: none !important;
+        }
+
         #myPageTop {
             position: absolute;
             left: 10px;

src/static/amap/mapGatherView.html

@@ -1,193 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <title>设施查看</title>
-    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
-    <link rel="stylesheet" type="text/css" href="./js/M_select/M_select.css">
-    <link rel="stylesheet" type="text/css" href="./js/notification/index.css">
-    <style>
-        html,
-        body,
-        #mapF {
-            height: 100%;
-            width: 100%;
-        }
-    </style>
-</head>
-
-<body>
-    <div id="mapF" class="map" tabindex="0"></div>
-
-    <div id="myPageTop">
-        <input id="tipinput" />
-
-        <div class="myPageTop-type">
-            <div class="title">设施汇总（120）</div>
-            <div class="center">11111111111111</div>
-        </div>
-    </div>
-
-
-    <script src="https://a.amap.com/jsapi_demos/static/china.js"></script>
-    <script type="text/javascript">
-        window._AMapSecurityConfig = {
-            securityJsCode: 'ce0e44758ad6b69607e23bf8e6a6ac11',
-        }
-    </script>
-    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=14aefebea926bb958032d5daf836fadf">
-    </script>
-
-    <script type="text/javascript" src="https://webapi.amap.com/ui/1.1/main.js"></script>
-    <script type="text/javascript" src="./js/jquery-2.2.1.min.js"></script>
-
-    <!-- uni 的 SDK -->
-    <!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 -->
-    <script type="text/javascript" src="./js/uni.webview.1.5.4.js"></script>
-
-    <script type="text/javascript">
-
-        var form = {};
-        var typeName = "";
-
-        var map = [];
-
-        var marker = null;//创建点标记
-        var regeocode = {};//获取解析详细地址数据存储
-        var longitude = "";//点标记经度数据存储
-        var latitude = "";//点标记纬度数据存储
-
-        var polyEditor = null; //创建画布
-        var polyEditorArray = [];//画布数据存储
-
-
-        /**
-         * 初始化
-         */
-        function initMap() {
-            map = new AMap.Map("mapF", {
-                // mapStyle: 'amap://styles/d0ddc09bd7cbd7331a8e8fa691e5b0da', //设置地图的显示样式
-                resizeEnable: true,
-                center: [121.4737021, 31.2303904],
-                zoom: 13,
-                zooms: [3, 16],
-            });
-
-            map.setFitView();
-
-            setTimeout(() => {
-                AMap.plugin(["AMap.PolygonEditor,AMap.PolylineEditor"], function () {
-
-                    if (typeName === "点") {
-                        marker = new AMap.Marker({});//初始化点标记
-                        handleMarker();
-                    }
-                })
-            }, 1000);
-        }
-
-        /**
-         * 点
-         */
-        function handleMarker() {
-            //地图点标记回显
-            if (form.longitude && form.latitude) {
-                longitude = form.longitude
-                latitude = form.latitude
-
-                marker = new AMap.Marker({
-                    position: new AMap.LngLat(form.longitude, form.latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-                });
-
-                handleAddress()
-            }
-
-            //为地图注册click事件获取鼠标点击出的经纬度坐标
-            map.on("click", function (e) {
-                longitude = e.lnglat.getLng()
-                latitude = e.lnglat.getLat()
-
-                map.remove([marker]);
-                marker = new AMap.Marker({
-                    position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-                });
-
-                handleAddress()
-            });
-        }
-
-        /**
-         * APP-PLUS
-         * 接收父页面传过来的值
-         */
-        window.receiveData = function (msg) {
-            // console.log("子页面：", msg)
-            // alert(msg.dataType)
-            form = msg.dataArray
-            typeName = msg.dataType
-            initMap();
-        }
-
-        /**
-         * H5
-         * 接收父页面传过来的值
-         */
-        window.addEventListener("message", function (event) {
-            if ("funcName" in event.data) {
-                console.log("子页面：", event);
-                form = JSON.parse(event.data.param)
-                typeName = event.data.typeName
-            }
-            initMap();
-        });
-
-        /**
-         * 按钮点击事件
-         */
-        function handleButtom(value) {
-
-        }
-    </script>
-    <style>
-        #myPageTop {
-            position: absolute;
-            left: 10px;
-            top: 10px;
-            background: transparent;
-            font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";
-            font-size: 13px;
-        }
-
-        #myPageTop input {
-            width: 18rem;
-            border: 1px solid #ced4da;
-            border-radius: 5px;
-            padding: 5px;
-        }
-
-        #myPageTop input:focus {
-            outline: none;
-            border-radius: 5px;
-            border: 1px solid #25A5F7;
-        }
-
-        #myPageTop .myPageTop-type {
-            padding: 10px;
-            margin-top: 10px;
-            background: #fff;
-            font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";
-            font-size: 13px;
-        }
-
-
-        #myPageTop .myPageTop-type .title {
-            font-weight: 600;
-            text-align: center;
-        }
-    </style>
-</body>
-
-</html>

src/store/modules/user.js

@@ -101,7 +101,6 @@ const useStores = defineStore("useStores", {
             this.SET_PHONE(data.user.phonenumber);
             this.SET_AVATAR(data.user.avatar);
 
-
             resolve(res);
           })
           .catch((error) => {