修复banner图BUG/设施查看

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

@@ -1,30 +1,33 @@
 <template>
   <scroll-view class="scroll-height" :scroll-y="true" :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
     <view class="flex padding-tb-sm bg-white">
-      <view class="padding-lr-sm text-center" style="width: 50%">设施类型：{{ typeNum ? typeNum : 0 }}</view>
+      <view class="padding-lr-sm text-center" style="width: 50%">设施类型：{{ typeNum || 0 }}</view>
       <view class="divider-default"></view>
-      <view class="padding-lr-sm text-center" style="width: 50%">设施总数：{{ facilityNum ? facilityNum : 0 }}</view>
+      <view class="padding-lr-sm text-center" style="width: 50%">设施总数：{{ facilityNum || 0 }}</view>
     </view>
 
-    <view class="flex bg-white margin-lr-sm margin-top-sm padding-sm shadow-default radius" v-for="(data, index) in dataList" :key="index" @click="handleToDevice(data.id, data.typeName)">
-      <view class="margin-right-sm" style="margin-top: auto; margin-bottom: auto">
+    <view class="flex bg-white margin-lr-sm margin-top-sm padding-sm shadow-default radius" v-for="(data, index) in dataList" :key="index">
+      <view class="margin-right-sm" style="margin-top: auto; margin-bottom: auto" @click="handleToDevice(data.id, data.typeName)">
         <image style="width: 40px; height: 40px" :src="data.typeImg ? data.typeImg : '/static/images/404.png'" mode="aspectFill"></image>
       </view>
 
-      <view style="width: 100%">
+      <view style="width: 100%" @click="handleToDevice(data.id, data.typeName)">
         <view class="flex margin-bottom-xl">
           <view class="text-dfl text-bold">{{ data.typeName }}</view>
-          <view style="font-size: 14px; margin-top: auto; margin-right: auto">（{{ data.typeFacilityNum ? data.typeFacilityNum : 0 }}）</view>
-          <view style="font-size: 14px; margin-top: auto" :style="{ color: proxy.$settingStore.themeColor.color }">查看地图</view>
+          <view style="font-size: 14px; margin-top: auto; margin-right: auto">（{{ data.typeFacilityNum || 0 }}）</view>
         </view>
         <view>
           <view class="flex">
-            <view style="font-size: 14px; width: 33.33%">正常：{{ data.normalFacilityNum ? data.normalFacilityNum : 0 }}</view>
-            <view style="font-size: 14px; width: 33.33%">维修：{{ data.upkeepFacilityNum ? data.upkeepFacilityNum : 0 }}</view>
-            <view style="font-size: 14px; width: 33.33%">关闭：{{ data.closeFacilityNum ? data.closeFacilityNum : 0 }}</view>
+            <view style="font-size: 14px; width: 33.33%">正常：{{ data.normalFacilityNum || 0 }}</view>
+            <view style="font-size: 14px; width: 33.33%">维修：{{ data.upkeepFacilityNum || 0 }}</view>
+            <view style="font-size: 14px; width: 33.33%">关闭：{{ data.closeFacilityNum || 0 }}</view>
           </view>
         </view>
       </view>
+
+      <view style="margin-top: auto; margin-bottom: auto" @click="handleToMap(data.id)">
+        <view class="iconfont ucicon-app-map icon" :style="{ color: proxy.$settingStore.themeColor.color, fontSize: '22px' }"></view>
+      </view>
     </view>
   </scroll-view>
 </template>
@@ -67,6 +70,13 @@ function handleToDevice(id, typeName) {
   proxy.$tab.navigateTo(`/pages/business/fireIot/facilitiesView/facilitiesDetailsList?id=${id}&typeName=${typeName}`);
 }
 
+/**
+ * @设施地图查看
+ */
+function handleToMap(id) {
+  proxy.$tab.navigateTo(`/pages/business/fireIot/facilitiesView/mapGatherView?facilitiesId=${id}`);
+}
+
 onLoad(() => {
   init();
 });

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

@@ -0,0 +1,81 @@
+<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/index.vue

@@ -23,7 +23,7 @@
     <!-- <u-loadmore :status="arrayList.loadStatus" loadingText="" loadmoreText="" :icon="true" /> -->
     <view class="uni-content-body">
       <!-- 下拉列表 开始 -->
-      <u-transition :show="arrayList.dialogFlag" :duration="200" mode="fade">
+      <u-transition :show="dialogFlag" :duration="200" mode="fade">
         <view class="transition" @click="rightButtonClick()">
           <view class="transition-section" :style="{ top: proxy.$settingStore.barHightTop }">
             <view class="transition-section-content" @click="scanCode()">
@@ -41,27 +41,12 @@
       <!-- 下拉列表 结束 -->
 
       <!-- 轮播图 开始 -->
-      <u-swiper
-        v-if="arrayList.swiperBool"
-        :list="arrayList.swiperList"
-        :interval="arrayList.swiperTime"
-        indicator
-        indicatorMode="line"
-        radius="0"
-        height="160"
-        circular
-        @click="swiperClick"
-        @change="swiperChange"
-        :displayMultipleItems="6"
-      >
-      </u-swiper>
-
-      <image v-if="!arrayList.swiperBool" src="@/static/images/index/banner1.png" style="width: 100%; height: 160px"></image>
+      <u-swiper :list="swiperList" :interval="swiperTime" indicatorMode="line" radius="0" height="160" indicator circular keyName="url" @click="swiperClick" @change="swiperChange"> </u-swiper>
 
       <view class="app-info-notice bg-white radius shadow-default margin-lr-sm margin-bottom-sm">
         <view class="flex">
           <view class="info-title text-df">综合智慧云</view>
-          <view class="info-time text-sm">03-21 19:23</view>
+          <view class="info-time text-sm">07-25 19:23</view>
         </view>
         <view class="info-content text-sm">综合智慧云app，助力企业数字化转型升级，超多业务功能，全新部署上线，操作简单流畅...</view>
       </view>
@@ -69,10 +54,10 @@
       <!-- 轮播图 结束 -->
 
       <!-- 宫格列表 -->
-      <view class="section2 section bg-white margin-bottom-sm" v-if="arrayList.recentlyUsed.length > 0">
+      <view class="section2 section bg-white margin-bottom-sm" v-if="recentlyUsed.length > 0">
         <view style="color: #000000; font-size: 14px; padding: 10px 10px 5px 10px">最近使用</view>
         <view class="cu-list grid col-5 no-border">
-          <view class="cu-item justify-center align-center" @tap="navItemClick(item)" v-for="(item, index) in arrayList.recentlyUsed.slice(0, 5)" :key="index">
+          <view class="cu-item justify-center align-center" @tap="navItemClick(item)" v-for="(item, index) in recentlyUsed.slice(0, 5)" :key="index">
             <image :src="item.meta.icon" style="width: 40px; height: 40px"></image>
             <!-- <view class="cu-tag badge" v-if="item.badge != 0">
               <block v-if="item.badge != 0">{{ item.badge > 99 ? "99+" : item.badge }}</block>
@@ -87,7 +72,7 @@
       <view class="section2 section bg-white">
         <view style="color: #000000; font-size: 14px; padding: 10px 10px 5px 10px">常用功能</view>
         <view class="cu-list grid col-5 no-border">
-          <view class="cu-item justify-center align-center" @tap="navItemClick(item)" v-for="(item, index) in arrayList.cuIconList" :key="index">
+          <view class="cu-item justify-center align-center" @tap="navItemClick(item)" v-for="(item, index) in cuIconList" :key="index">
             <image :src="item.meta.icon" style="width: 40px; height: 40px"></image>
             <!-- <view class="cu-tag badge" v-if="item.badge != 0">
               <block v-if="item.badge != 0">{{ item.badge > 99 ? "99+" : item.badge }}</block>
@@ -109,7 +94,7 @@ import searchSelect from "@/components/searchSelect/searchSelect.vue";
 import * as jwx from "@/utils/jssdk.js"; //引入js sdk的封装
 
 import { onReady, onLoad, onShow, onNavigationBarButtonTap, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
-import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance } from "vue";
+import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, toRefs } from "vue";
 import { getToken } from "@/utils/auth";
 import { useStores, publicStores } from "@/store/modules/index";
 
@@ -128,16 +113,18 @@ const arrayList = reactive({
   swiperTime: 5000,
   swiperList: [],
 
-  // cuIconList: proxy.$grid.cuIconList,
+  cuIconList: [],
   recentlyUsed: [],
 });
 
+const { dialogFlag, swiperBool, swiperIndex, swiperTime, swiperList, cuIconList, recentlyUsed } = toRefs(arrayList);
+
 /**
  * @获取轮播图下标
  * @change事件
  */
 function swiperChange(e) {
-  arrayList.swiperIndex = e.current;
+  swiperIndex.value = e.current;
 }
 
 /**
@@ -145,8 +132,8 @@ function swiperChange(e) {
  */
 function swiperClick(list) {
   if (typeof list == "object") {
-    let linkType = arrayList.swiperList[arrayList.swiperIndex].linkType;
-    let url = arrayList.swiperList[arrayList.swiperIndex].link;
+    let linkType = swiperList.value[swiperIndex.value].linkType;
+    let url = swiperList.value[swiperIndex.value].link;
 
     if (url) {
       if (linkType == 1) {
@@ -171,18 +158,30 @@ function getMobileBannerApi() {
     tenantId: useStore.$state.tenantId,
   }).then((res) => {
     if (res.data.length > 0) {
-      arrayList.swiperList = [];
-      arrayList.swiperBool = res.data[0].openNot == 1 ? true : false;
-      arrayList.swiperTime = res.data[0].carouselTime * 1000;
-
-      for (let i = 1; i <= 5; i++) {
-        if (res.data[0]["bannerPath" + i]) {
-          arrayList.swiperList.push({
-            url: res.data[0]["bannerPath" + i],
-            link: res.data[0]["linkUrl" + i],
-            linkType: res.data[0]["linkType" + i],
-          });
+      swiperList.value = [];
+      swiperBool.value = res.data[0].openNot == 1 ? true : false;
+      swiperTime.value = res.data[0].carouselTime * 1000;
+
+      if (swiperBool.value) {
+        for (let i = 1; i <= 5; i++) {
+          if (res.data[0]["bannerPath" + i]) {
+            swiperList.value.push({
+              url: res.data[0]["bannerPath" + i],
+              link: res.data[0]["linkUrl" + i],
+              linkType: res.data[0]["linkType" + i],
+              type: "image",
+            });
+          }
         }
+      } else {
+        swiperList.value = [
+          {
+            url: "../static/images/index/banner1.png",
+            link: "",
+            linkType: 1,
+            type: "image",
+          },
+        ];
       }
     }
   });
@@ -192,7 +191,7 @@ onLoad((option) => {
   uni.hideTabBar(); //隐藏自带tabbar
 
   if (uni.getStorageSync(useStore.$state.name + useStore.$state.tenantId)) {
-    arrayList.recentlyUsed = uni.getStorageSync(useStore.$state.name + useStore.$state.tenantId);
+    recentlyUsed.value = uni.getStorageSync(useStore.$state.name + useStore.$state.tenantId);
   }
 
   getAppRoutersData();
@@ -269,23 +268,23 @@ function navItemClick(item) {
   if (item.path) {
     item.sort = 0;
 
-    arrayList.recentlyUsed.push(item);
+    recentlyUsed.value.push(item);
 
-    if (arrayList.recentlyUsed.length > 0) {
-      arrayList.recentlyUsed = arrayList.recentlyUsed.filter((currentValue, currentIndex, selfArr) => {
+    if (recentlyUsed.value.length > 0) {
+      recentlyUsed.value = recentlyUsed.value.filter((currentValue, currentIndex, selfArr) => {
         return selfArr.findIndex((x) => x.path === currentValue.path) === currentIndex;
       });
 
-      arrayList.recentlyUsed.filter((el) => {
+      recentlyUsed.value.filter((el) => {
         if (el.path === item.path) {
           el.sort++;
         }
       });
     }
 
-    arrayList.recentlyUsed = publicStore.sortEvent(arrayList.recentlyUsed, 1);
+    recentlyUsed.value = publicStore.sortEvent(recentlyUsed.value, 1);
 
-    uni.setStorageSync(useStore.$state.name + useStore.$state.tenantId, arrayList.recentlyUsed);
+    uni.setStorageSync(useStore.$state.name + useStore.$state.tenantId, recentlyUsed.value);
 
     if (item.path.indexOf("http") != -1) {
       uni.navigateTo({
@@ -315,7 +314,7 @@ function navItemClick(item) {
  */
 function rightButtonClick() {
   console.log(1);
-  arrayList.dialogFlag = !arrayList.dialogFlag;
+  dialogFlag.value = !dialogFlag.value;
 }
 
 /**
@@ -334,7 +333,7 @@ function getAppRoutersData() {
       el.meta.icon = `/static/icons/index/${el.meta.icon}.svg`;
     });
 
-    arrayList.cuIconList = res.data;
+    cuIconList.value = res.data;
   });
 }
 

src/static/amap/mapGatherView.html

@@ -0,0 +1,193 @@
+<!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>