no message

components/MapContainer.vue

@@ -1,86 +0,0 @@
-<template>
-	<view>
-		<map style="width: 100%; height: 469rpx" :latitude="latitude" :longitude="longitude" scale="18" :markers="markers" :polyline="polyline" enable-3D></map>
-	</view>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { onLoad } from '@dcloudio/uni-app'
-
-// 中心点
-const latitude = ref(28.103487)
-const longitude = ref(114.443029)
-
-// 图标点数据
-const markers = ref([
-	{
-		iconPath: '/static/images/marker.png',
-		id: 1,
-		latitude: 28.705019,
-		longitude: 115.831653,
-		width: 18,
-		height: 18,
-		callout: {
-			content: '10:50\n进入校园',
-			fontSize: 12,
-			borderRadius: 6,
-			padding: 6,
-			display: 'ALWAYS',
-			textAlign: 'left',
-			anchorX: 30
-		}
-	},
-	{
-		iconPath: '/static/images/marker.png',
-		id: 2,
-		latitude: 28.704551,
-		longitude: 115.831675,
-		width: 18,
-		height: 18,
-		callout: {
-			content: '11:50\n吃饭',
-			fontSize: 12,
-			borderRadius: 6,
-			padding: 6,
-			display: 'ALWAYS',
-			textAlign: 'left',
-			anchorX: 30
-		}
-	},
-	{
-		iconPath: '/static/images/marker.png',
-		id: 3,
-		latitude: 28.704951,
-		longitude: 115.832297,
-		width: 18,
-		height: 18,
-		callout: {
-			content: '12:50\n睡觉',
-			fontSize: 12,
-			borderRadius: 6,
-			padding: 6,
-			display: 'ALWAYS',
-			textAlign: 'left',
-			anchorX: 30
-		}
-	}
-])
-
-// 地图轨迹数据
-const polyline = ref([
-	{
-		points: [
-			{ latitude: 28.705019, longitude: 115.831653 },
-			{ latitude: 28.704551, longitude: 115.831675 },
-			{ latitude: 28.704951, longitude: 115.832297 }
-		],
-		color: '#1E7DFB',
-		width: 2
-	}
-])
-
-onLoad(() => {})
-</script>
-
-<style scoped></style>

pages/track/track.vue

@@ -6,10 +6,12 @@
 		</view>
 
 		<!-- 地图区域 -->
-		<view class="map">
-			<MapContainer />
+		<view class="map_box">
+			<img mode="aspectFill" class="img" src="https://wanzai-1306339220.cos.ap-shanghai.myqcloud.com/excelModel/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240711164230.jpg" />
 		</view>
 
+		<canvas style="width: 750rpx; height: 480rpx" canvas-id="firstCanvas"></canvas>
+
 		<!-- 轨迹区域 -->
 		<view class="track">
 			<view class="track_title">全天状态</view>
@@ -41,7 +43,6 @@
 <script setup>
 import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
-import MapContainer from '@/components/MapContainer.vue'
 import NoData from '@/components/noData.vue'
 import { myRequest } from '@/utils/api.js'
 import { previewImage } from '@/utils/previewImage.js'
@@ -57,11 +58,21 @@ onLoad((options) => {
 		datetimerangeValue.value = [dayjs(Date.now()).format('YYYY-MM-DD') + ' 00:00:00', dayjs(Date.now()).format('YYYY-MM-DD') + ' 23:59:59']
 	}
 
+	// 获取轨迹数组数据
 	getData()
+
+	// 绘制地点
+	drawAddress()
+
+	// 绘制轨迹
+	setTimeout(() => {
+		drawTrack()
+	}, 500)
 })
 
+// 当前学生id
 const currentId = ref()
-
+// 时间筛选框绑定数据
 const datetimerangeValue = ref()
 
 // 学生轨迹数组
@@ -72,6 +83,10 @@ const customStyle = {
 	marginBottom: '30rpx'
 }
 
+// 画布实例
+const ctx = ref()
+
+// 获取轨迹数组数据
 const getData = async () => {
 	const res = await myRequest({
 		url: '/wanzai/api/smartFaceDiscern/track',
@@ -85,20 +100,163 @@ const getData = async () => {
 	if (res.code == 200) {
 		const result = JSON.parse(decryptDes(res.data))
 		// console.log(result)
-		list.value = result
+		list.value = result.reverse()
+
+		// 获取设备宽度
+		const system = uni.getSystemInfoSync()
+		// 单位换算，算出1rpx = 多少px
+		const w = system.windowWidth / 750
+
+		// 处理数据
+		list.value.forEach((ele) => {
+			if (ele.location === '探学楼') {
+				ele.x = 336 * w
+				ele.y = 158 * w
+			} else if (ele.location === '地下室出口' || ele.location === '地下室') {
+				ele.x = 230 * w
+				ele.y = 250 * w
+			} else if (ele.location === '探问楼') {
+				ele.x = 280 * w
+				ele.y = 270 * w
+			} else if (ele.location === '探理楼') {
+				ele.x = 280 * w
+				ele.y = 380 * w
+			} else if (ele.location === '地下室入口') {
+				ele.x = 344 * w
+				ele.y = 356 * w
+			} else if (ele.location === '探真楼') {
+				ele.x = 384 * w
+				ele.y = 276 * w
+			} else if (ele.location === '学校大门') {
+				ele.x = 370 * w
+				ele.y = 396 * w
+			} else if (ele.location === '消防通道') {
+				ele.x = 510 * w
+				ele.y = 380 * w
+			} else if (ele.location === '文化连廊') {
+				ele.x = 306 * w
+				ele.y = 280 * w
+			} else if (ele.location === '田径场') {
+				ele.x = 580 * w
+				ele.y = 218 * w
+			}
+		})
 	}
 }
 
+// 时间筛选框切换时间回调
 const changeTime = (e) => {
 	// console.log(e)
 	if (e.length) {
 		getData()
+
+		ctx.value.clearRect(0, 0, 750, 480)
+
+		drawAddress()
+
+		setTimeout(() => {
+			drawTrack()
+		}, 1000)
 	}
 }
+
+// 绘制地点
+const drawAddress = () => {
+	ctx.value = uni.createCanvasContext('firstCanvas')
+
+	// 获取设备宽度
+	const system = uni.getSystemInfoSync()
+	// 单位换算，算出1rpx = 多少px
+	const w = system.windowWidth / 750
+
+	ctx.value.beginPath()
+	// 探学楼点位
+	ctx.value.arc(336 * w, 158 * w, 4, 0, 2 * Math.PI)
+	// 地下室出口
+	ctx.value.arc(230 * w, 250 * w, 4, 0, 2 * Math.PI)
+	ctx.value.setFillStyle('#409EFF')
+	ctx.value.fill()
+
+	ctx.value.beginPath()
+	// 探问楼
+	ctx.value.arc(280 * w, 270 * w, 4, 0, 2 * Math.PI)
+	// 探理楼
+	ctx.value.arc(280 * w, 380 * w, 4, 0, 2 * Math.PI)
+	ctx.value.setFillStyle('#409EFF')
+	ctx.value.fill()
+
+	ctx.value.beginPath()
+	// 地下室入口
+	ctx.value.arc(344 * w, 356 * w, 4, 0, 2 * Math.PI)
+	// 探真楼
+	ctx.value.arc(384 * w, 276 * w, 4, 0, 2 * Math.PI)
+	ctx.value.setFillStyle('#409EFF')
+	ctx.value.fill()
+
+	ctx.value.beginPath()
+	// 学校大门
+	ctx.value.arc(370 * w, 396 * w, 4, 0, 2 * Math.PI)
+	// 消防通道
+	ctx.value.arc(510 * w, 380 * w, 4, 0, 2 * Math.PI)
+	ctx.value.setFillStyle('#409EFF')
+	ctx.value.fill()
+
+	ctx.value.beginPath()
+	// 文化连廊
+	ctx.value.arc(306 * w, 280 * w, 4, 0, 2 * Math.PI)
+	// 田径场
+	ctx.value.arc(580 * w, 218 * w, 4, 0, 2 * Math.PI)
+
+	ctx.value.setFillStyle('#409EFF')
+	ctx.value.fill()
+
+	ctx.value.draw()
+}
+
+// 绘制轨迹
+const drawTrack = () => {
+	for (let i = 0; i < list.value.length; i++) {
+		let a = list.value[i]?.x
+		let b = list.value[i]?.y
+		let c = list.value[i + 1]?.x
+		let d = list.value[i + 1]?.y
+
+		drawLine(a, b, c, d, i, list.value.length)
+	}
+}
+
+// 根据点之间画线
+const drawLine = (a, b, c, d, i, length) => {
+	if (i == 0) {
+		ctx.value.arc(a, b, 4, 0, 2 * Math.PI)
+		ctx.value.setFillStyle('#fff')
+		ctx.value.fill()
+	}
+	if (i === length - 1 && length > 1) {
+		ctx.value.arc(a, b, 4, 0, 2 * Math.PI)
+		ctx.value.setFillStyle('red')
+		ctx.value.fill()
+	}
+	// 设置边框颜色
+	ctx.value.setStrokeStyle('#00FEFE')
+
+	// 把路径移动到画布中的指定点，不创建线条
+	if (a && b) {
+		ctx.value.moveTo(a, b)
+	}
+	if (c && d) {
+		ctx.value.lineTo(c, d)
+	}
+
+	ctx.value.stroke()
+	// 开始绘制
+	ctx.value.draw(true)
+}
 </script>
 
 <style lang="scss" scoped>
 .container {
+	position: relative;
 	display: flex;
 	flex-direction: column;
 	min-height: 100vh;
@@ -112,11 +270,20 @@ const changeTime = (e) => {
 		margin: 30rpx 0;
 		height: 65rpx;
 	}
-	// 地图区域样式
-	.map {
+
+	.map_box {
+		position: absolute;
+		top: 125rpx;
+		left: 0;
 		width: 750rpx;
-		height: 469rpx;
+		height: 480rpx;
+
+		.img {
+			width: 750rpx;
+			height: 480rpx;
+		}
 	}
+
 	// 轨迹区域样式
 	.track {
 		padding: 0 20rpx 20rpx 20rpx;

unpackage/dist/dev/mp-weixin/components/MapContainer.js

@@ -1,84 +0,0 @@
-"use strict";
-const common_vendor = require("../common/vendor.js");
-const _sfc_main = {
-  __name: "MapContainer",
-  setup(__props) {
-    const latitude = common_vendor.ref(28.103487);
-    const longitude = common_vendor.ref(114.443029);
-    const markers = common_vendor.ref([
-      {
-        iconPath: "/static/images/marker.png",
-        id: 1,
-        latitude: 28.705019,
-        longitude: 115.831653,
-        width: 18,
-        height: 18,
-        callout: {
-          content: "10:50\n进入校园",
-          fontSize: 12,
-          borderRadius: 6,
-          padding: 6,
-          display: "ALWAYS",
-          textAlign: "left",
-          anchorX: 30
-        }
-      },
-      {
-        iconPath: "/static/images/marker.png",
-        id: 2,
-        latitude: 28.704551,
-        longitude: 115.831675,
-        width: 18,
-        height: 18,
-        callout: {
-          content: "11:50\n吃饭",
-          fontSize: 12,
-          borderRadius: 6,
-          padding: 6,
-          display: "ALWAYS",
-          textAlign: "left",
-          anchorX: 30
-        }
-      },
-      {
-        iconPath: "/static/images/marker.png",
-        id: 3,
-        latitude: 28.704951,
-        longitude: 115.832297,
-        width: 18,
-        height: 18,
-        callout: {
-          content: "12:50\n睡觉",
-          fontSize: 12,
-          borderRadius: 6,
-          padding: 6,
-          display: "ALWAYS",
-          textAlign: "left",
-          anchorX: 30
-        }
-      }
-    ]);
-    const polyline = common_vendor.ref([
-      {
-        points: [
-          { latitude: 28.705019, longitude: 115.831653 },
-          { latitude: 28.704551, longitude: 115.831675 },
-          { latitude: 28.704951, longitude: 115.832297 }
-        ],
-        color: "#1E7DFB",
-        width: 2
-      }
-    ]);
-    common_vendor.onLoad(() => {
-    });
-    return (_ctx, _cache) => {
-      return {
-        a: latitude.value,
-        b: longitude.value,
-        c: markers.value,
-        d: polyline.value
-      };
-    };
-  }
-};
-wx.createComponent(_sfc_main);

unpackage/dist/dev/mp-weixin/components/MapContainer.json

@@ -1,4 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {}
-}

unpackage/dist/dev/mp-weixin/components/MapContainer.wxml

@@ -1 +0,0 @@
-<view><map style="width:100%;height:469rpx" latitude="{{a}}" longitude="{{b}}" scale="18" markers="{{c}}" polyline="{{d}}" enable-3D></map></view>

unpackage/dist/dev/mp-weixin/pages/track/track.js

@@ -13,9 +13,8 @@ const _easycom_uni_datetime_picker = () => "../../uni_modules/uni-datetime-picke
 const _easycom_uv_steps_item = () => "../../uni_modules/uv-steps/components/uv-steps-item/uv-steps-item.js";
 const _easycom_uv_steps = () => "../../uni_modules/uv-steps/components/uv-steps/uv-steps.js";
 if (!Math) {
-  (_easycom_uni_datetime_picker + MapContainer + _easycom_uv_steps_item + _easycom_uv_steps + NoData)();
+  (_easycom_uni_datetime_picker + _easycom_uv_steps_item + _easycom_uv_steps + NoData)();
 }
-const MapContainer = () => "../../components/MapContainer.js";
 const NoData = () => "../../components/noData.js";
 const _sfc_main = {
   __name: "track",
@@ -28,6 +27,10 @@ const _sfc_main = {
         datetimerangeValue.value = [common_vendor.dayjs(Date.now()).format("YYYY-MM-DD") + " 00:00:00", common_vendor.dayjs(Date.now()).format("YYYY-MM-DD") + " 23:59:59"];
       }
       getData();
+      drawAddress();
+      setTimeout(() => {
+        drawTrack();
+      }, 500);
     });
     const currentId = common_vendor.ref();
     const datetimerangeValue = common_vendor.ref();
@@ -35,6 +38,7 @@ const _sfc_main = {
     const customStyle = {
       marginBottom: "30rpx"
     };
+    const ctx = common_vendor.ref();
     const getData = async () => {
       const res = await utils_api.myRequest({
         url: "/wanzai/api/smartFaceDiscern/track",
@@ -46,14 +50,116 @@ const _sfc_main = {
       });
       if (res.code == 200) {
         const result = JSON.parse(utils_des.decryptDes(res.data));
-        list.value = result;
+        list.value = result.reverse();
+        const system = common_vendor.index.getSystemInfoSync();
+        const w = system.windowWidth / 750;
+        list.value.forEach((ele) => {
+          if (ele.location === "探学楼") {
+            ele.x = 336 * w;
+            ele.y = 158 * w;
+          } else if (ele.location === "地下室出口" || ele.location === "地下室") {
+            ele.x = 230 * w;
+            ele.y = 250 * w;
+          } else if (ele.location === "探问楼") {
+            ele.x = 280 * w;
+            ele.y = 270 * w;
+          } else if (ele.location === "探理楼") {
+            ele.x = 280 * w;
+            ele.y = 380 * w;
+          } else if (ele.location === "地下室入口") {
+            ele.x = 344 * w;
+            ele.y = 356 * w;
+          } else if (ele.location === "探真楼") {
+            ele.x = 384 * w;
+            ele.y = 276 * w;
+          } else if (ele.location === "学校大门") {
+            ele.x = 370 * w;
+            ele.y = 396 * w;
+          } else if (ele.location === "消防通道") {
+            ele.x = 510 * w;
+            ele.y = 380 * w;
+          } else if (ele.location === "文化连廊") {
+            ele.x = 306 * w;
+            ele.y = 280 * w;
+          } else if (ele.location === "田径场") {
+            ele.x = 580 * w;
+            ele.y = 218 * w;
+          }
+        });
       }
     };
     const changeTime = (e) => {
       if (e.length) {
         getData();
+        ctx.value.clearRect(0, 0, 750, 480);
+        drawAddress();
+        setTimeout(() => {
+          drawTrack();
+        }, 1e3);
       }
     };
+    const drawAddress = () => {
+      ctx.value = common_vendor.index.createCanvasContext("firstCanvas");
+      const system = common_vendor.index.getSystemInfoSync();
+      const w = system.windowWidth / 750;
+      ctx.value.beginPath();
+      ctx.value.arc(336 * w, 158 * w, 4, 0, 2 * Math.PI);
+      ctx.value.arc(230 * w, 250 * w, 4, 0, 2 * Math.PI);
+      ctx.value.setFillStyle("#409EFF");
+      ctx.value.fill();
+      ctx.value.beginPath();
+      ctx.value.arc(280 * w, 270 * w, 4, 0, 2 * Math.PI);
+      ctx.value.arc(280 * w, 380 * w, 4, 0, 2 * Math.PI);
+      ctx.value.setFillStyle("#409EFF");
+      ctx.value.fill();
+      ctx.value.beginPath();
+      ctx.value.arc(344 * w, 356 * w, 4, 0, 2 * Math.PI);
+      ctx.value.arc(384 * w, 276 * w, 4, 0, 2 * Math.PI);
+      ctx.value.setFillStyle("#409EFF");
+      ctx.value.fill();
+      ctx.value.beginPath();
+      ctx.value.arc(370 * w, 396 * w, 4, 0, 2 * Math.PI);
+      ctx.value.arc(510 * w, 380 * w, 4, 0, 2 * Math.PI);
+      ctx.value.setFillStyle("#409EFF");
+      ctx.value.fill();
+      ctx.value.beginPath();
+      ctx.value.arc(306 * w, 280 * w, 4, 0, 2 * Math.PI);
+      ctx.value.arc(580 * w, 218 * w, 4, 0, 2 * Math.PI);
+      ctx.value.setFillStyle("#409EFF");
+      ctx.value.fill();
+      ctx.value.draw();
+    };
+    const drawTrack = () => {
+      var _a, _b, _c, _d;
+      for (let i = 0; i < list.value.length; i++) {
+        let a = (_a = list.value[i]) == null ? void 0 : _a.x;
+        let b = (_b = list.value[i]) == null ? void 0 : _b.y;
+        let c = (_c = list.value[i + 1]) == null ? void 0 : _c.x;
+        let d = (_d = list.value[i + 1]) == null ? void 0 : _d.y;
+        drawLine(a, b, c, d, i, list.value.length);
+      }
+    };
+    const drawLine = (a, b, c, d, i, length) => {
+      if (i == 0) {
+        ctx.value.arc(a, b, 4, 0, 2 * Math.PI);
+        ctx.value.setFillStyle("#fff");
+        ctx.value.fill();
+      }
+      if (i === length - 1 && length > 1) {
+        ctx.value.arc(a, b, 4, 0, 2 * Math.PI);
+        ctx.value.setFillStyle("red");
+        ctx.value.fill();
+      }
+      ctx.value.setStrokeStyle("#00FEFE");
+      if (a && b) {
+        ctx.value.moveTo(a, b);
+      }
+      if (c && d) {
+        ctx.value.lineTo(c, d);
+      }
+      ctx.value.stroke();
+      ctx.value.draw(true);
+    };
     return (_ctx, _cache) => {
       return common_vendor.e({
         a: common_vendor.o(changeTime),
@@ -77,7 +183,7 @@ const _sfc_main = {
             f: common_vendor.o(($event) => common_vendor.unref(utils_previewImage.previewImage)(item.image), item.id)
           } : {}, {
             g: item.id,
-            h: "132a14af-3-" + i0 + ",132a14af-2"
+            h: "132a14af-2-" + i0 + ",132a14af-1"
           });
         }),
         f: common_vendor.p({

unpackage/dist/dev/mp-weixin/pages/track/track.json

@@ -5,7 +5,6 @@
     "uni-datetime-picker": "../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker",
     "uv-steps-item": "../../uni_modules/uv-steps/components/uv-steps-item/uv-steps-item",
     "uv-steps": "../../uni_modules/uv-steps/components/uv-steps/uv-steps",
-    "map-container": "../../components/MapContainer",
     "no-data": "../../components/noData"
   }
 }

unpackage/dist/dev/mp-weixin/pages/track/track.wxss

@@ -1,6 +1,7 @@
 /* 水平间距 */
 /* 水平间距 */
 .container.data-v-132a14af {
+  position: relative;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
@@ -13,9 +14,16 @@
   margin: 30rpx 0;
   height: 65rpx;
 }
-.container .map.data-v-132a14af {
+.container .map_box.data-v-132a14af {
+  position: absolute;
+  top: 125rpx;
+  left: 0;
   width: 750rpx;
-  height: 469rpx;
+  height: 480rpx;
+}
+.container .map_box .img.data-v-132a14af {
+  width: 750rpx;
+  height: 480rpx;
 }
 .container .track.data-v-132a14af {
   padding: 0 20rpx 20rpx 20rpx;

unpackage/dist/dev/mp-weixin/project.private.config.json

@@ -8,6 +8,13 @@
     "miniprogram": {
       "list": [
         {
+          "name": "pages/track/track",
+          "pathName": "pages/track/track",
+          "query": "id=1049",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
           "name": "pages/statistics/statistics",
           "pathName": "pages/statistics/statistics",
           "query": "",