地图接入

src/manifest.json

@@ -1,6 +1,6 @@
 {
-    "name" : "thtApp",
+    "name" : "隐患app",
-    "appid" : "__UNI__E4D576B",
+    "appid" : "__UNI__F945325",
     "description" : "应用描述",
     "versionName" : "1.0.0",
     "versionCode" : "100",
@@ -24,7 +24,9 @@
             "Push" : {},
             "Share" : {},
             "Speech" : {},
-            "VideoPlayer" : {}
+            "VideoPlayer" : {},
+            "Geolocation" : {},
+            "Maps" : {}
         },
         /* 应用发布信息 */
         "distribute" : {
@@ -68,14 +70,31 @@
             /* ios打包配置 */
             "ios" : {
                 "UIBackgroundModes" : [ "audio" ],
-                "urlschemewhitelist" : [ "baidumap", "iosamap" ]
+                "urlschemewhitelist" : [ "baidumap", "iosamap" ],
+                "dSYMs" : false
             },
             /* SDK配置 */
             "sdkConfigs" : {
                 "speech" : {
                     "ifly" : {}
+                },
+                "maps" : {
+                    "amap" : {
+                        "name" : "amap_185324619",
+                        "appkey_ios" : "701ca304442fc9b4a81f5e5695abfa2e",
+                        "appkey_android" : "701ca304442fc9b4a81f5e5695abfa2e"
                     }
                 },
+                "geolocation" : {
+                    "amap" : {
+                        "name" : "amap_185324619",
+                        "__platform__" : [ "android" ],
+                        "appkey_ios" : "",
+                        "appkey_android" : "701ca304442fc9b4a81f5e5695abfa2e"
+                    }
+                },
+                "ad" : {}
+            },
             "orientation" : [ "portrait-primary" ]
         },
         "uniStatistics" : {
@@ -153,8 +172,10 @@
         },
         "sdkConfigs" : {
             "maps" : {
-                "qqmap" : {
+                "amap" : {
-                    "key" : "TKUBZ-D24AF-GJ4JY-JDVM2-IBYKK-KEBCU"
+                    "key" : "ae3e8765afb55c6765921de018721938",
+                    "securityJsCode" : "2bde082e12bc68b3a49ba8c9b984e8df",
+                    "serviceHost" : "2bde082e12bc68b3a49ba8c9b984e8df"
                 }
             }
         },

src/pages.json

@@ -109,19 +109,27 @@
 						}
 					}
 				},
+				// {
+				// 	"path" : "pages/home/investigationSelect/investigationSelect",
+				// 	"style" : 
+				// 	{
+				// 		"navigationBarTitleText": "排查选择"
+				// 		// "navigationStyle": "custom"
+				// 	}
+				// },
 				{
-					"path" : "pages/home/investigationSelect/investigationSelect",
+					"path" : "pages/home/knowledge",
 					"style" : 
 					{
-						"navigationBarTitleText": "排查选择"
+						"navigationStyle": "custom"
-						// "navigationStyle": "custom"
 					}
 				},
 				{
-					"path" : "pages/home/knowledge",
+					"path" : "pages/map/index",
 					"style" : 
 					{
-						"navigationStyle": "custom"
+						"navigationBarTitleText": "排查选择"
+						// "navigationStyle": "custom"
 					}
 				}
 ],

src/pages/map/index.vue

@@ -0,0 +1,583 @@
+<template>
+  <view class="map" :style="getHeight()">
+    <!-- <page-head title="待排查任务" :warnNum='1' :isFixed="true" :isRight="true"></page-head> -->
+    <!-- 轮播图 -->
+    <map
+      style="width: 100%; height: 100%"
+      :latitude="latitude"
+      :longitude="longitude"
+      :markers="covers"
+      :polyline="polyline"
+    >
+    </map>
+    <cover-view class="location" @click="onLocation" :style="getTop()">
+      <cover-image src="../../static/map/3746.png" alt="" srcset="" />
+    </cover-view>
+    <view class="dialog dialog-one" v-if="pageType == 1">
+      <view class="status">超期</view>
+      <view class="top">
+        <image src="../../static/home/pend.png" mode="" class="mimg"></image>
+        <view class="font">
+          <view class="tit"
+            >金水路金水路金水路金水路金水路金水路金水路金水路金水路金水路</view
+          >
+          <view class="desc">
+            <view style="margin-right: 12px">排查</view>
+            <view>超期2天</view>
+          </view>
+        </view>
+      </view>
+      <view class="btn-box">
+        <view @click="handleCheck(1)" class="btn btn1"> 智能排查 </view>
+        <view @click="handleCheck(2)" class="btn btn2"> 人工排查 </view>
+      </view>
+    </view>
+    <view class="dialog dialog-two" v-if="pageType == 2">
+      <view class="two-f1">根据当前定位信息，您要排查的是这条路吗？</view>
+      <view class="two-f2">山东</view>
+      <view class="btn-box">
+        <view @click="onJump(3)" class="btn btn3"> 更换 </view>
+        <view @click="handleCheck(1)" class="btn btn4"> 智能排查 </view>
+        <view @click="handleCheck(2)" class="btn btn5"> 人工排查 </view>
+      </view>
+    </view>
+    <view class="dialog dialog-three" v-if="pageType == 3">
+      <view class="search">
+        <view class="searchL">
+          <img src="../../static/map/978.png" alt="" />
+          <input
+            class="sinput"
+            placeholder-style="color: #BFBFBF;"
+            placeholder="搜索路段或路口"
+          />
+        </view>
+        <view @click="onJump(4)" class="addbtn"> 新增 </view>
+      </view>
+      <view class="list-box">
+        <view
+          class="list-item"
+          v-for="(item, index) in data"
+          :key="index"
+          @click="onList(item, index)"
+          :style="idx == index ? 'background: #E5EFFF' : ''"
+        >
+          <img src="../../static/map/3567.png" alt="" v-if="idx == index" />
+          <img src="../../static/map/3568.png" alt="" v-else />
+          <view class="tit">
+            智能排查智能排查智能排查智能排查智能排查智能排查智能排查智能排查智能排查智能排查
+          </view>
+          <view class="jl">200m内</view>
+        </view>
+        <view></view>
+      </view>
+    </view>
+    <view class="dialog dialog-four" v-if="pageType == 4">
+      <view class="form-item">
+        <view class="form-label">对象</view>
+        <view class="form-sw">
+          <view :style="ftype == 1 ? 'background: #2663bf; color: #fff;' : ''" @click="ftype = 1">路段</view>
+          <view :style="ftype == 2 ? 'background: #2663bf; color: #fff;' : ''" @click="ftype = 2">路口</view>
+        </view>
+      </view>
+      <view class="form-item">
+        <view class="form-label">道路名称</view>
+        <view class="form-tent">
+          <input
+            class="linput"
+            placeholder-style="color: #BFBFBF;"
+            placeholder="请输入"
+          />
+        </view>
+      </view>
+      <view class="form-item">
+        <view class="form-label">起始路口</view>
+        <view class="form-tent">
+          <input
+            class="linput"
+            placeholder-style="color: #BFBFBF;"
+            placeholder="请输入"
+          />
+        </view>
+      </view>
+      <view class="form-item">
+        <view class="form-label">终止路口</view>
+        <view class="form-tent">
+          <input
+            class="linput"
+            placeholder-style="color: #BFBFBF;"
+            placeholder="请输入"
+          />
+        </view>
+      </view>
+      <view class="btn-box" style="margin-top: 18px">
+        <view @click="onJump(3)" class="btn btn6"> 取消 </view>
+        <view @click="handleSubmit" class="btn btn7"> 确定 </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import view from "../component/view/view.vue";
+export default {
+  components: { view },
+  data() {
+    return {
+      latitude: 39.909,
+      longitude: 116.39742,
+      covers: [],
+      title: "下拉刷新 + 加载更多",
+      data: [
+        {
+          //window.PCRWList ||
+          id: 12121212,
+          title: "G228火炬路与S503岙东路",
+          roadCode: 123,
+          roadName: "G228火炬路与S503岙东路",
+          imgurl: "/static/car.png",
+          createTime: "超期2天", //2024-10-05
+          deptName: "支队级",
+          sessionId: 12121212,
+          paicha: "排查",
+          isTime: 0,
+        },
+        {
+          //window.PCRWList ||
+          id: 37020017407,
+          title: "金水路与合川路事故多发点段",
+          roadCode: 123,
+          roadName: "金水路与合川路",
+          imgurl: "/static/car.png",
+          createTime: "剩余2天",
+          deptName: "支队级",
+          sessionId: 37020017407,
+          paicha: "排查",
+          isTime: 1,
+        },
+        {
+          id: 37020017404,
+          title: "金水路与合川路事故多发点段",
+          roadCode: 123,
+          roadName: "金水路与合川路",
+          imgurl: "/static/car.png",
+          createTime: "超期2天",
+          deptName: "支队级",
+          sessionId: 37020017404,
+          paicha: "排查",
+          isTime: 1,
+        },
+      ],
+      idx: -1,
+      loadMoreText: "加载中...",
+      showLoadMore: false,
+      max: 0,
+      polyline: [],
+      pageType: 1,
+      ftype: 1
+    };
+  },
+  onLoad() {
+    let v = false;
+    if (v) {
+      this.pageType = 1;
+    } else {
+      this.pageType = 2;
+      this.onLocation("init");
+    }
+    this.initData();
+  },
+
+  onUnload() {
+    // this.max = 0,
+    // 	this.data = [],
+    // 	this.loadMoreText = "加载更多",
+    // 	this.showLoadMore = false;
+  },
+  onReachBottom() {
+    // console.log("onReachBottom");
+    // if (this.max > 40) {
+    // 	this.loadMoreText = "没有更多数据了!"
+    // 	return;
+    // }
+    // this.showLoadMore = true;
+    // setTimeout(() => {
+    // 	this.setListData();
+    // }, 300);
+  },
+  onPullDownRefresh() {
+    console.log("onPullDownRefresh");
+    this.initData();
+  },
+  methods: {
+    goToKnowledge() {
+      uni.navigateTo({
+        url: "/pages/home/knowledge",
+      });
+    },
+    initData() {
+      // setTimeout(() => {
+      // 	this.max = 0;
+      // 	this.data = [];
+      // 	let data = [];
+      // 	this.max += 20;
+      // 	for (var i = this.max - 19; i < this.max + 1; i++) {
+      // 		data.push(i)
+      // 	}
+      // 	this.data = this.data.concat(data);
+      // 	uni.stopPullDownRefresh();
+      // }, 300);
+    },
+    setListData() {
+      // let data = [];
+      // this.max += 10;
+      // for (var i = this.max - 9; i < this.max + 1; i++) {
+      // 	data.push(i)
+      // }
+      // this.data = this.data.concat(data);
+    },
+    handleCheck(v) {
+      uni.navigateTo({
+					// url: `/pages/home/detail?params=${encodeURIComponent(JSON.stringify(item))}`
+					url: v == 1 ? '/pages/home/knowledge' : '/pages/home/detail'
+				})
+    },
+    handleSubmit() {},
+    onList(e, i) {
+      this.pageType = 2
+      this.idx = i;
+    },
+    onLocation(e) {
+      uni.getLocation({
+        type: "gcj02", // 使用国测局坐标系
+        success: (res) => {
+          console.log("经度: " + res.longitude);
+          console.log("纬度: " + res.latitude);
+          this.latitude = res.latitude;
+          this.longitude = res.longitude;
+          this.covers = [
+            {
+              latitude: res.latitude,
+              longitude: res.longitude,
+              width: 32,
+              height: 36,
+              iconPath: "../../../static/map/3567.png",
+            },
+          ];
+          if (e) {
+          }
+        },
+        fail: function (err) {
+          console.log("获取位置信息失败: " + err.errMsg);
+        },
+      });
+    },
+    onJump(v) {
+      this.pageType = v;
+    },
+    getTop() {
+      if (this.pageType == 1) {
+        return "top: calc(50vh + 80px)";
+      }
+      if (this.pageType == 2) {
+        return "top: calc(50vh + 90px)";
+      }
+      if (this.pageType == 3) {
+        return "top: calc(50vh - 50px)";
+      }
+      if (this.pageType == 4) {
+        return "top: calc(50vh - 80px)";
+      }
+    },
+    getHeight() {
+      if (this.pageType == 1) {
+        return "height: 64vh";
+      }
+      if (this.pageType == 2) {
+        return "height: 70vh";
+      }
+      if (this.pageType == 3) {
+        return "height: 50vh";
+      }
+      if (this.pageType == 4) {
+        return "height: 45vh";
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.map {
+  width: 100%;
+  height: 64vh;
+  position: relative;
+  .location {
+    position: absolute;
+    width: 56px;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    right: 10px;
+    top: calc(50vh + 80px);
+    background: #fff;
+    border-radius: 16px;
+    cover-image {
+      width: 32px;
+      height: 32px;
+    }
+  }
+
+  .dialog {
+    width: 96%;
+    position: fixed;
+    left: 2%;
+    bottom: 0;
+    background: #fff;
+    border-radius: 4px;
+    box-sizing: border-box;
+    z-index: 9999;
+    .status {
+      position: absolute;
+      top: -6px;
+      right: 0;
+      width: 50px;
+      height: 28px;
+      line-height: 28px;
+      background: #cc2936;
+      color: #fff;
+      text-align: center;
+      &::after {
+        content: "";
+        position: absolute;
+        left: -11px;
+        top: 0;
+        width: 0;
+        height: 0;
+        border-left: 11px solid transparent;
+        border-right: 12px solid transparent;
+        border-top: 26px solid #cc2936;
+      }
+    }
+    .font {
+      width: 65%;
+    }
+    .mimg {
+      width: 120px;
+      height: 90px;
+    }
+    .top {
+      padding: 14px;
+      display: flex;
+      .tit {
+        width: 92%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        font-size: 18px;
+        color: #363f4d;
+        font-weight: bold;
+        margin: 14px;
+      }
+      .desc {
+        color: #666666;
+        display: flex;
+        margin-left: 14px;
+      }
+    }
+    .btn-box {
+      display: flex;
+      justify-content: space-between;
+      padding: 14px;
+      border-top: 1px solid #d3e0f2;
+      .btn {
+        color: white;
+        cursor: pointer;
+        position: relative;
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        font-size: 18px;
+      }
+      .btn1 {
+        width: 50%;
+        background: url(../../static/map/elright.png);
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      }
+      .btn2 {
+        width: 50%;
+        background: url(../../static/map/elleft.png);
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      }
+      .btn3 {
+        width: 33%;
+        background: url(../../static/map/l.png);
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        color: #363f4d;
+      }
+      .btn4 {
+        width: 33%;
+        background: url(../../static/map/c.png);
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      }
+      .btn5 {
+        width: 33%;
+        background: url(../../static/map/r.png);
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      }
+      .btn6 {
+        width: 33%;
+        background: url(../../static/map/ll.png);
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+
+        color: #363f4d;
+      }
+      .btn7 {
+        width: 67%;
+        background: url(../../static/map/rr.png);
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      }
+    }
+  }
+  .dialog-one {
+    height: 200px;
+  }
+  .dialog-two {
+    height: 200px;
+    .two-f1 {
+      text-align: center;
+      margin: 28px 0;
+    }
+    .two-f2 {
+      text-align: center;
+      margin-bottom: 28px;
+    }
+  }
+  .dialog-three {
+    width: 100%;
+    height: 340px;
+    left: 0;
+    padding: 0 23px;
+    box-sizing: border-box;
+    box-shadow: 0px -4px 10px 1px rgba(0, 0, 0, 0.16);
+    border-radius: 4px 4px 0px 0px;
+    .search {
+      margin: 23px 0;
+      height: 48px;
+      display: flex;
+      justify-content: space-between;
+      .searchL {
+        width: 74%;
+        height: 100%;
+        border: 1px solid #d9d9d9;
+        display: flex;
+        img {
+          width: 24px;
+          height: 24px;
+          margin: 12px;
+        }
+        input {
+          width: 80%;
+          height: 100%;
+        }
+      }
+      .addbtn {
+        width: 23%;
+        height: 100%;
+        color: #fff;
+        background: #2663bf;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+    .list-box {
+      width: 100%;
+      height: 244px;
+      overflow: auto;
+      .list-item {
+        width: 100%;
+        height: 50px;
+        line-height: 50px;
+        display: flex;
+        img {
+          width: 22px;
+          height: 24px;
+          margin: 12px;
+        }
+        .tit {
+          width: 70%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+        .jl {
+          width: 20%;
+          text-align: right;
+          color: #666666;
+          padding-right: 4px;
+          box-sizing: border-box;
+        }
+      }
+    }
+  }
+  .dialog-four {
+    width: 100%;
+    height: 372px;
+    left: 0;
+    padding: 0 23px;
+    box-sizing: border-box;
+    box-shadow: 0px -4px 10px 1px rgba(0, 0, 0, 0.16);
+    border-radius: 4px 4px 0px 0px;
+    .form-item {
+      width: 100%;
+      height: 45px;
+      line-height: 45px;
+      margin-top: 24px;
+      display: flex;
+      .form-label {
+        width: 24%;
+        font-size: 16px;
+        color: #5e6f8a;
+        text-align: right;
+        margin-right: 10px;
+      }
+      .form-sw {
+        display: flex;
+        view {
+          width: 60px;
+          height: 100%;
+          border-radius: 4px 4px 4px 4px;
+          background: #f0f3f7;
+          margin-right: 12px;
+          color: #363f4d;
+          font-size: 16px;
+          text-align: center;
+        }
+      }
+      .form-tent {
+        width: 76%;
+        height: 100%;
+        border-radius: 4px 4px 4px 4px;
+        border: 1px solid #d9d9d9;
+        padding-left: 12px;
+        input {
+          width: 100%;
+          height: 100%;
+
+          font-size: 16px;
+        }
+      }
+    }
+  }
+}
+</style>