From 13a06719ac13ec0458fecee0014765d50019eeac Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Mon, 13 Oct 2025 17:51:59 +0800
Subject: [PATCH] feat:算法
---
src/pages/map/index.vue | 512 ---------------------------
src/subPackages/workDetail/index.vue | 2
src/pages/map/index copy.vue | 510 ++++++++++++++++++++++++++++
src/pages/work/index.vue | 8
4 files changed, 528 insertions(+), 504 deletions(-)
diff --git a/src/pages/map/index copy.vue b/src/pages/map/index copy.vue
new file mode 100644
index 0000000..cceea63
--- /dev/null
+++ b/src/pages/map/index copy.vue
@@ -0,0 +1,510 @@
+<!-- 地图 -->
+<template>
+ <!-- 地图容器 -->
+ <view class="page-container theme-dark">
+ <view id="map" class="map" :prop="setSelectMapLayerKey" :location="location" :change:prop="leaflet.initLayer"
+ :change:location="leaflet.setView"></view>
+
+ <view class="weather-box">
+ <up-icon customPrefix="xyicon" name="tuceng" size="24" color="#000"></up-icon>
+ </view>
+
+ <view class="layer-btn" @click="show = true">
+ <up-icon customPrefix="xyicon" name="tuceng" size="24" color="#000"></up-icon>
+ </view>
+
+ <view class="location-btn" @click="setMapLocation">
+ <up-icon customPrefix="xyicon" name="dingwei" size="24" color="#000"></up-icon>
+ </view>
+
+ <drag-ele :isSelectInput="isSelectInput" :searchVal="searchVal">
+ <template #searchBox>
+ <u-input placeholder="搜索" border="surround" v-model="searchVal" @change="change" color="#fff"
+ @focus="isSelectInput = true"
+ @blur="isSelectInput = false">
+ <template #prefix>
+ <view class="search-left-box">
+ <u-icon color="#fff" name="arrow-left"></u-icon>
+
+ <up-tooltip ref="addressTooltip" text="text5" color="#fff" bgColor="#333" popupBgColor="#333"
+ triggerMode="click" :forcePosition="{right: '0px', top: '0px'}" direction="top">
+ <template #trigger>
+ <up-button iconColor="transparent" color="transparent" :hairline="false" size="mini" :stop="false"
+ type="text">{{ searchModeTextType === 0 ? '地址' : '机巢'}}</up-button>
+ </template>
+ <template #content>
+ <view style="padding: 8rpx 0; text-align: right;">
+ <!-- 按钮1 -->
+ <up-button type="text" size="mini" @click="selectAddress"
+ style="margin: 4rpx 0; width: 100%; text-align: center;">{{ searchModeTextType === 0 ? '机巢' : '地址'}}</up-button>
+ </view>
+ </template>
+ </up-tooltip>
+ </view>
+ </template>
+
+ <template #suffix>
+ <view class="search-right-box">
+ <u-icon color="#fff" name="scan" @click="scanCode"></u-icon>
+ </view>
+ </template>
+ </u-input>
+
+ </template>
+ <template #content>
+ <view class="search-content">
+
+ </view>
+ </template>
+ </drag-ele>
+
+ <up-popup v-model:show="show">
+ <view class="popup-container">
+ <view class="header">
+ <view class="title">图层</view>
+ <view class="close" @click="show = false">
+ <u-icon color="#000" name="close"></u-icon>
+ </view>
+ </view>
+ <view class="content">
+ <view class="layer-box" :class="{on: setSelectMapLayerKey === item.key}" v-for="(item, ind) in layers"
+ :key="ind" @click="setMapLayer(item)">
+ <view class="image">
+ <up-image :src="item.src" width="100%" height="100%"></up-image>
+ </view>
+ <view class="label">{{item.name}}</view>
+ </view>
+ </view>
+ </view>
+ </up-popup>
+ </view>
+</template>
+
+<script setup>
+ import DragEle from './drag.vue'
+ import {
+ useMapStore
+ } from "@/store/index.js"
+
+ const mapStore = useMapStore()
+
+ const layers = [{
+ src: "/static/images/sl.png",
+ name: '标准地图',
+ key: 1,
+ },
+ {
+ src: "/static/images/yx.png",
+ name: '卫星地图',
+ key: 2,
+ }
+ ]
+
+ const addressTooltip = ref(null)
+ const show = ref(false)
+ const isSelectInput = ref(false)
+
+ const searchVal = ref('')
+
+ const change = () => {
+
+ }
+
+ const setSelectMapLayerKey = computed(() => mapStore.getSelectMapLayerKey)
+ const setMapLayer = (item) => {
+ mapStore.setSelectMapLayerKey(item.key)
+ }
+
+ const location = ref('')
+ const setMapLocation = () => {
+ // 获取定位信息
+ uni.getLocation({
+ type: 'wgs84', // 返回的经纬度是 WGS84 坐标系（适合地图定位）
+ isHighAccuracy: true,
+ success: function(res) {
+ location.value = res
+ },
+ fail: function(err) {
+ console.log('定位失败：', err);
+ }
+ });
+ }
+
+ const searchModeTextType = ref(0)
+
+ const selectAddress = () => {
+ searchModeTextType.value = searchModeTextType.value === 0 ? 1 : 0
+ addressTooltip.value.showTooltip = false
+ }
+
+ const scanCode = () => {
+ // 只允许通过相机扫码
+ uni.scanCode({
+ onlyFromCamera: true,
+ success: function(res) {
+ console.log('条码类型：' + res.scanType);
+ console.log('条码内容：' + res.result);
+
+ // 获取扫码结果
+ let url = res.result;
+
+ // 跳转到B页面，并传递URL参数
+ uni.navigateTo({
+ url: '/subPackages/browser/index?url=' + encodeURIComponent(url)
+ });
+ },
+ fail: function(err) {
+ console.log('扫码失败：', err);
+ uni.showToast({
+ title: '扫码失败',
+ icon: 'none'
+ });
+ }
+ });
+ }
+
+ const createWorkOrder = (id) => {
+ console.log(`创建工单：标注 ID 为 ${id}`);
+ // 在这里添加工单创建逻辑
+ }
+
+ onShow(() => {
+ // #ifdef APP-PLUS
+ // plus.screen.lockOrientation("landscape-primary");
+ // #endif
+ });
+
+ onHide(() => {
+ // #ifdef APP-PLUS
+ // plus.screen.lockOrientation("portrait-primary");
+ // #endif
+ });
+</script>
+
+<script module="leaflet" lang="renderjs">
+ import L from 'leaflet'
+
+ var basemapLayer0 = L.tileLayer(
+ 'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', {
+ maxZoom: 20,
+ minZoom: 1,
+ tileSize: 256,
+ zoomOffset: 1
+ });
+ var basemapLayer1 = L.tileLayer(
+ 'http://t1.tianditu.com/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', {
+ maxZoom: 20,
+ minZoom: 1,
+ tileSize: 256,
+ zoomOffset: 1
+ });
+ var basemapLayer2 = L.tileLayer(
+ 'http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', {
+ maxZoom: 20,
+ minZoom: 1,
+ tileSize: 256,
+ zoomOffset: 1
+ });
+ var basemapLayer3 = L.tileLayer(
+ 'http://t1.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', {
+ maxZoom: 20,
+ minZoom: 1,
+ tileSize: 256,
+ zoomOffset: 1
+ });
+ var basemap0 = L.layerGroup([basemapLayer0, basemapLayer1]);
+ var basemap1 = L.layerGroup([basemapLayer2, basemapLayer3]);
+
+ let map = null
+
+ const layers = [{
+ src: "/static/images/sl.png",
+ name: '标准地图',
+ key: 1,
+ map: basemap0
+ },
+ {
+ src: "/static/images/yx.png",
+ name: '卫星地图',
+ key: 2,
+ map: basemap1
+ }
+ ]
+
+ export default {
+ data() {
+ return {
+ curSelectMapLayerKey: 1
+ }
+ },
+
+ computed: {
+
+ },
+
+ mounted() {
+ this.initMap()
+
+ this.initDronePositions()
+ },
+
+ methods: {
+ initMap() {
+ if (map) return
+
+ map = L.map('map', {
+ preferCanvas: true,
+ crs: L.CRS.EPSG4326,
+ zoomControl: false,
+ attributionControl: false,
+ doubleClickZoom: false,
+ editable: true //绘制控件
+ }).setView([25.992338, 114.823254], 13);
+ },
+
+ initLayer(value) {
+ this.initMap()
+
+ this.$nextTick(() => {
+ map.removeLayer(layers.find(i => i.key === this.curSelectMapLayerKey).map);
+
+ map.addLayer(layers.find(i => i.key === value).map);
+
+ this.curSelectMapLayerKey = value
+ })
+ },
+
+ setView(res) {
+ if (!res) return
+
+ this.initMap()
+
+ this.$nextTick(() => {
+ map.setView([res.latitude, res.longitude], 16, {
+ animate: false // 使用动画过渡
+ });
+ })
+ },
+
+ // 初始化无人机位置
+ initDronePositions() {
+ // 假设你有一个包含多个标注位置的数组
+ const markersData = [{
+ lat: 25.992338,
+ lng: 114.823254,
+ id: 1
+ },
+ {
+ lat: 26,
+ lng: 114.823255,
+ id: 2
+ },
+ {
+ lat: 25.992338,
+ lng: 115,
+ id: 3
+ },
+ ];
+
+ // 创建一个自定义的图片图标
+ const customIcon = L.icon({
+ iconUrl: './static/images/logo.png', // 替换为你的图片路径
+ iconSize: [32, 32], // 图标大小
+ iconAnchor: [16, 16], // 图标的锚点（设置图片的底部中心）
+ });
+
+ // 批量添加标注
+ const markersLayer = L.layerGroup().addTo(map); // 创建一个标注层，便于管理和移除
+
+ markersData.forEach((data) => {
+ const marker = L.marker([data.lat, data.lng], {
+ icon: customIcon
+ }).addTo(markersLayer);
+
+ marker.on('click', () => {
+ marker.unbindPopup();
+
+ const popupContent = `
+ <view>
+ <button data-type="addWork">创建工单</button>
+ </view>
+ `;
+
+ marker.bindPopup(popupContent).openPopup();
+
+ marker.getPopup()._contentNode.addEventListener("click", e => {
+ if (e.target.dataset.type === 'addWork') {
+ // 跳转到tabBar页面
+ uni.switchTab({
+ url: '/pages/work/index', // 需要跳转的tabBar页面的路径
+ });
+
+ marker.closePopup();
+ marker.unbindPopup();
+ }
+ })
+ });
+
+ // 使用 marker 的 id 作为标识符
+ marker.options.id = data.id;
+ });
+
+ this.buildCirclePolygon(25.992338, 114.823254, 'rgba(255, 0, 0, 1)').addTo(map)
+ },
+
+ buildCirclePolygon(lat, lng, color) {
+ var radius = 5000 / 100460; // 5000米转为大约的纬度差（纬度上的1度大约是111km）
+ var parts = [];
+
+ for (var i = 0; i < 360; i++) {
+ var radians = (i + 1) * Math.PI / 180;
+
+ // 计算新的点
+ var circlePoint = [
+ Math.cos(radians) * radius + lat, // 纬度偏移
+ Math.sin(radians) * radius + lng // 经度偏移，需考虑纬度的影响
+ ];
+
+ parts[i] = circlePoint;
+ }
+
+ // 生成多边形，近似圆形
+ var polygon = L.polygon(parts, {
+ color: color
+ });
+
+ return polygon;
+
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ .page-container {
+ position: relative;
+ width: 100%;
+ height: 100%;
+
+ .u-input {
+ margin-left: 16rpx;
+ width: calc(100% - 32rpx);
+ height: 64rpx;
+ box-sizing: border-box;
+ background: rgba(0, 0, 0, .4);
+
+ .search-left-box {
+ display: flex;
+ align-items: center;
+ color: $u-main-color;
+ }
+
+ .search-right-box {
+ color: $u-main-color;
+ }
+ }
+
+ .search-content {
+ width: 100%;
+ height: 360rpx;
+ background: #fff;
+ box-shadow: 0 -80rpx 80rpx -80rpx #fff;
+ }
+
+ .weather-box {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ top: 16rpx;
+ left: 16rpx;
+ width: 64rpx;
+ height: 64rpx;
+ background: #fff;
+ z-index: 996;
+ border-radius: 8rpx;
+ }
+
+ .location-btn,
+ .layer-btn {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ right: 16rpx;
+ width: 64rpx;
+ height: 64rpx;
+ background: #fff;
+ z-index: 996;
+ border-radius: 8rpx;
+ }
+
+ .layer-btn {
+ bottom: 236rpx;
+ }
+
+ .location-btn {
+ bottom: 156rpx;
+ }
+ }
+
+ /* Leaflet 默认容器要有高度 */
+ .map {
+ width: 100%;
+ height: 100%;
+ }
+
+ .popup-container {
+ padding: 20rpx;
+ background: #D3D3D3;
+ border-radius: 32rpx 32rpx 0 0;
+
+ .header {
+ padding: 0 20rpx;
+ display: flex;
+ justify-content: space-between;
+ height: 56rpx;
+ }
+
+ .content {
+ padding: 20rpx;
+ display: flex;
+ background: #fff;
+ border-radius: 32rpx;
+
+ .layer-box {
+ margin-left: 16rpx;
+ width: calc(100% / 3);
+
+ &:first-child {
+ margin-left: 0;
+ }
+
+ &.on {
+ .image {
+ border: 1px solid #0055ff;
+ }
+
+ .label {
+ color: #0055ff;
+ }
+ }
+
+ .image {
+ width: 100%;
+ height: 96rpx;
+ border-radius: 16rpx;
+ overflow: hidden;
+ box-sizing: border-box;
+ border: 1px solid transparent;
+ }
+
+ .label {
+ line-height: 48rpx;
+ text-align: center;
+ font-size: 16rpx;
+ }
+ }
+ }
+ }
+</style>
diff --git a/src/pages/map/index.vue b/src/pages/map/index.vue
index cceea63..c5e9f0e 100644
--- a/src/pages/map/index.vue
+++ b/src/pages/map/index.vue
@@ -1,510 +1,22 @@
-<!-- 地图 -->
<template>
- <!-- 地图容器 -->
- <view class="page-container theme-dark">
- <view id="map" class="map" :prop="setSelectMapLayerKey" :location="location" :change:prop="leaflet.initLayer"
- :change:location="leaflet.setView"></view>
-
- <view class="weather-box">
- <up-icon customPrefix="xyicon" name="tuceng" size="24" color="#000"></up-icon>
- </view>
-
- <view class="layer-btn" @click="show = true">
- <up-icon customPrefix="xyicon" name="tuceng" size="24" color="#000"></up-icon>
- </view>
-
- <view class="location-btn" @click="setMapLocation">
- <up-icon customPrefix="xyicon" name="dingwei" size="24" color="#000"></up-icon>
- </view>
-
- <drag-ele :isSelectInput="isSelectInput" :searchVal="searchVal">
- <template #searchBox>
- <u-input placeholder="搜索" border="surround" v-model="searchVal" @change="change" color="#fff"
- @focus="isSelectInput = true"
- @blur="isSelectInput = false">
- <template #prefix>
- <view class="search-left-box">
- <u-icon color="#fff" name="arrow-left"></u-icon>
-
- <up-tooltip ref="addressTooltip" text="text5" color="#fff" bgColor="#333" popupBgColor="#333"
- triggerMode="click" :forcePosition="{right: '0px', top: '0px'}" direction="top">
- <template #trigger>
- <up-button iconColor="transparent" color="transparent" :hairline="false" size="mini" :stop="false"
- type="text">{{ searchModeTextType === 0 ? '地址' : '机巢'}}</up-button>
- </template>
- <template #content>
- <view style="padding: 8rpx 0; text-align: right;">
- <!-- 按钮1 -->
- <up-button type="text" size="mini" @click="selectAddress"
- style="margin: 4rpx 0; width: 100%; text-align: center;">{{ searchModeTextType === 0 ? '机巢' : '地址'}}</up-button>
- </view>
- </template>
- </up-tooltip>
- </view>
- </template>
-
- <template #suffix>
- <view class="search-right-box">
- <u-icon color="#fff" name="scan" @click="scanCode"></u-icon>
- </view>
- </template>
- </u-input>
-
- </template>
- <template #content>
- <view class="search-content">
-
- </view>
- </template>
- </drag-ele>
-
- <up-popup v-model:show="show">
- <view class="popup-container">
- <view class="header">
- <view class="title">图层</view>
- <view class="close" @click="show = false">
- <u-icon color="#000" name="close"></u-icon>
- </view>
- </view>
- <view class="content">
- <view class="layer-box" :class="{on: setSelectMapLayerKey === item.key}" v-for="(item, ind) in layers"
- :key="ind" @click="setMapLayer(item)">
- <view class="image">
- <up-image :src="item.src" width="100%" height="100%"></up-image>
- </view>
- <view class="label">{{item.name}}</view>
- </view>
- </view>
- </view>
- </up-popup>
+ <view class="page-wrap">
+ <web-view ref="sWebViewRef" :src="`${viewUrl}`" />
</view>
</template>
<script setup>
- import DragEle from './drag.vue'
- import {
- useMapStore
- } from "@/store/index.js"
+import { useUserStore } from "@/store/index.js";
- const mapStore = useMapStore()
+const sWebViewRef = ref(null);
+const userStore = useUserStore();
+const viewUrl = `http://192.168.1.194:5174/drone-app-web-view/#/webViewWrapper/defaultMap?params=${JSON.stringify(userStore?.userInfo)}`;
- const layers = [{
- src: "/static/images/sl.png",
- name: '标准地图',
- key: 1,
- },
- {
- src: "/static/images/yx.png",
- name: '卫星地图',
- key: 2,
- }
- ]
-
- const addressTooltip = ref(null)
- const show = ref(false)
- const isSelectInput = ref(false)
-
- const searchVal = ref('')
-
- const change = () => {
-
- }
-
- const setSelectMapLayerKey = computed(() => mapStore.getSelectMapLayerKey)
- const setMapLayer = (item) => {
- mapStore.setSelectMapLayerKey(item.key)
- }
-
- const location = ref('')
- const setMapLocation = () => {
- // 获取定位信息
- uni.getLocation({
- type: 'wgs84', // 返回的经纬度是 WGS84 坐标系（适合地图定位）
- isHighAccuracy: true,
- success: function(res) {
- location.value = res
- },
- fail: function(err) {
- console.log('定位失败：', err);
- }
- });
- }
-
- const searchModeTextType = ref(0)
-
- const selectAddress = () => {
- searchModeTextType.value = searchModeTextType.value === 0 ? 1 : 0
- addressTooltip.value.showTooltip = false
- }
-
- const scanCode = () => {
- // 只允许通过相机扫码
- uni.scanCode({
- onlyFromCamera: true,
- success: function(res) {
- console.log('条码类型：' + res.scanType);
- console.log('条码内容：' + res.result);
-
- // 获取扫码结果
- let url = res.result;
-
- // 跳转到B页面，并传递URL参数
- uni.navigateTo({
- url: '/subPackages/browser/index?url=' + encodeURIComponent(url)
- });
- },
- fail: function(err) {
- console.log('扫码失败：', err);
- uni.showToast({
- title: '扫码失败',
- icon: 'none'
- });
- }
- });
- }
-
- const createWorkOrder = (id) => {
- console.log(`创建工单：标注 ID 为 ${id}`);
- // 在这里添加工单创建逻辑
- }
-
- onShow(() => {
- // #ifdef APP-PLUS
- // plus.screen.lockOrientation("landscape-primary");
- // #endif
- });
-
- onHide(() => {
- // #ifdef APP-PLUS
- // plus.screen.lockOrientation("portrait-primary");
- // #endif
- });
+onLoad(() => {
+});
</script>
-<script module="leaflet" lang="renderjs">
- import L from 'leaflet'
-
- var basemapLayer0 = L.tileLayer(
- 'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', {
- maxZoom: 20,
- minZoom: 1,
- tileSize: 256,
- zoomOffset: 1
- });
- var basemapLayer1 = L.tileLayer(
- 'http://t1.tianditu.com/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', {
- maxZoom: 20,
- minZoom: 1,
- tileSize: 256,
- zoomOffset: 1
- });
- var basemapLayer2 = L.tileLayer(
- 'http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', {
- maxZoom: 20,
- minZoom: 1,
- tileSize: 256,
- zoomOffset: 1
- });
- var basemapLayer3 = L.tileLayer(
- 'http://t1.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', {
- maxZoom: 20,
- minZoom: 1,
- tileSize: 256,
- zoomOffset: 1
- });
- var basemap0 = L.layerGroup([basemapLayer0, basemapLayer1]);
- var basemap1 = L.layerGroup([basemapLayer2, basemapLayer3]);
-
- let map = null
-
- const layers = [{
- src: "/static/images/sl.png",
- name: '标准地图',
- key: 1,
- map: basemap0
- },
- {
- src: "/static/images/yx.png",
- name: '卫星地图',
- key: 2,
- map: basemap1
- }
- ]
-
- export default {
- data() {
- return {
- curSelectMapLayerKey: 1
- }
- },
-
- computed: {
-
- },
-
- mounted() {
- this.initMap()
-
- this.initDronePositions()
- },
-
- methods: {
- initMap() {
- if (map) return
-
- map = L.map('map', {
- preferCanvas: true,
- crs: L.CRS.EPSG4326,
- zoomControl: false,
- attributionControl: false,
- doubleClickZoom: false,
- editable: true //绘制控件
- }).setView([25.992338, 114.823254], 13);
- },
-
- initLayer(value) {
- this.initMap()
-
- this.$nextTick(() => {
- map.removeLayer(layers.find(i => i.key === this.curSelectMapLayerKey).map);
-
- map.addLayer(layers.find(i => i.key === value).map);
-
- this.curSelectMapLayerKey = value
- })
- },
-
- setView(res) {
- if (!res) return
-
- this.initMap()
-
- this.$nextTick(() => {
- map.setView([res.latitude, res.longitude], 16, {
- animate: false // 使用动画过渡
- });
- })
- },
-
- // 初始化无人机位置
- initDronePositions() {
- // 假设你有一个包含多个标注位置的数组
- const markersData = [{
- lat: 25.992338,
- lng: 114.823254,
- id: 1
- },
- {
- lat: 26,
- lng: 114.823255,
- id: 2
- },
- {
- lat: 25.992338,
- lng: 115,
- id: 3
- },
- ];
-
- // 创建一个自定义的图片图标
- const customIcon = L.icon({
- iconUrl: './static/images/logo.png', // 替换为你的图片路径
- iconSize: [32, 32], // 图标大小
- iconAnchor: [16, 16], // 图标的锚点（设置图片的底部中心）
- });
-
- // 批量添加标注
- const markersLayer = L.layerGroup().addTo(map); // 创建一个标注层，便于管理和移除
-
- markersData.forEach((data) => {
- const marker = L.marker([data.lat, data.lng], {
- icon: customIcon
- }).addTo(markersLayer);
-
- marker.on('click', () => {
- marker.unbindPopup();
-
- const popupContent = `
- <view>
- <button data-type="addWork">创建工单</button>
- </view>
- `;
-
- marker.bindPopup(popupContent).openPopup();
-
- marker.getPopup()._contentNode.addEventListener("click", e => {
- if (e.target.dataset.type === 'addWork') {
- // 跳转到tabBar页面
- uni.switchTab({
- url: '/pages/work/index', // 需要跳转的tabBar页面的路径
- });
-
- marker.closePopup();
- marker.unbindPopup();
- }
- })
- });
-
- // 使用 marker 的 id 作为标识符
- marker.options.id = data.id;
- });
-
- this.buildCirclePolygon(25.992338, 114.823254, 'rgba(255, 0, 0, 1)').addTo(map)
- },
-
- buildCirclePolygon(lat, lng, color) {
- var radius = 5000 / 100460; // 5000米转为大约的纬度差（纬度上的1度大约是111km）
- var parts = [];
-
- for (var i = 0; i < 360; i++) {
- var radians = (i + 1) * Math.PI / 180;
-
- // 计算新的点
- var circlePoint = [
- Math.cos(radians) * radius + lat, // 纬度偏移
- Math.sin(radians) * radius + lng // 经度偏移，需考虑纬度的影响
- ];
-
- parts[i] = circlePoint;
- }
-
- // 生成多边形，近似圆形
- var polygon = L.polygon(parts, {
- color: color
- });
-
- return polygon;
-
- }
- }
- }
-</script>
-
-<style lang="scss" scoped>
- .page-container {
- position: relative;
- width: 100%;
- height: 100%;
-
- .u-input {
- margin-left: 16rpx;
- width: calc(100% - 32rpx);
- height: 64rpx;
- box-sizing: border-box;
- background: rgba(0, 0, 0, .4);
-
- .search-left-box {
- display: flex;
- align-items: center;
- color: $u-main-color;
- }
-
- .search-right-box {
- color: $u-main-color;
- }
- }
-
- .search-content {
- width: 100%;
- height: 360rpx;
- background: #fff;
- box-shadow: 0 -80rpx 80rpx -80rpx #fff;
- }
-
- .weather-box {
- display: flex;
- justify-content: center;
- align-items: center;
- position: absolute;
- top: 16rpx;
- left: 16rpx;
- width: 64rpx;
- height: 64rpx;
- background: #fff;
- z-index: 996;
- border-radius: 8rpx;
- }
-
- .location-btn,
- .layer-btn {
- display: flex;
- justify-content: center;
- align-items: center;
- position: absolute;
- right: 16rpx;
- width: 64rpx;
- height: 64rpx;
- background: #fff;
- z-index: 996;
- border-radius: 8rpx;
- }
-
- .layer-btn {
- bottom: 236rpx;
- }
-
- .location-btn {
- bottom: 156rpx;
- }
- }
-
- /* Leaflet 默认容器要有高度 */
- .map {
- width: 100%;
- height: 100%;
- }
-
- .popup-container {
- padding: 20rpx;
- background: #D3D3D3;
- border-radius: 32rpx 32rpx 0 0;
-
- .header {
- padding: 0 20rpx;
- display: flex;
- justify-content: space-between;
- height: 56rpx;
- }
-
- .content {
- padding: 20rpx;
- display: flex;
- background: #fff;
- border-radius: 32rpx;
-
- .layer-box {
- margin-left: 16rpx;
- width: calc(100% / 3);
-
- &:first-child {
- margin-left: 0;
- }
-
- &.on {
- .image {
- border: 1px solid #0055ff;
- }
-
- .label {
- color: #0055ff;
- }
- }
-
- .image {
- width: 100%;
- height: 96rpx;
- border-radius: 16rpx;
- overflow: hidden;
- box-sizing: border-box;
- border: 1px solid transparent;
- }
-
- .label {
- line-height: 48rpx;
- text-align: center;
- font-size: 16rpx;
- }
- }
- }
- }
+<style scoped lang="scss">
+.page-wrap {
+ font-size: 20px;
+}
</style>
diff --git a/src/pages/work/index.vue b/src/pages/work/index.vue
index e1a43c4..4cbf5de 100644
--- a/src/pages/work/index.vue
+++ b/src/pages/work/index.vue
@@ -1,6 +1,7 @@
<template>
<view class="flex flex-col eventTickets">
- <view class="searchTop">
+ <web-view ref="sWebViewRef" :src="`${viewUrl}`" />
+ <!-- <view class="searchTop">
<up-search placeholder="请输入关键字搜索" :animation="true" v-model="listParams.keyword" :show-action="false"></up-search>
<div>111</div>
</view>
@@ -22,7 +23,7 @@
</div>
</view>
</view>
- </view>
+ </view> -->
</view>
</template>
@@ -33,7 +34,8 @@
import dayjs from 'dayjs';
const userStore = useUserStore()
const userInfo = userStore.userInfo
-
+const sWebViewRef = ref(null);
+const viewUrl = `http://192.168.1.157:5173/drone-app-web-view/#/webViewWrapper/work?params=${JSON.stringify(userStore?.userInfo)}`;
const dataList = ref([])
const keyword = ref('')
const currentTab=ref('myTickets')
diff --git a/src/subPackages/workDetail/index.vue b/src/subPackages/workDetail/index.vue
index b97231f..752d483 100644
--- a/src/subPackages/workDetail/index.vue
+++ b/src/subPackages/workDetail/index.vue
@@ -84,7 +84,7 @@
} from '/src/api/work/index.js'
const allAlgorithms = ref([])
const algorithms = ref([])
- const types = ref([])
+ const types = ref([]) //工单类型
const eventNum = ref('');
const currentStatus = ref('')
const stepResponse = ref([]);
--
Gitblit v1.9.3