af-mobile-client-vue3 1.1.42 → 1.1.44

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.1.42",
+  "version": "1.1.44",
   "description": "Vue + Vite component lib",
   "license": "MIT",
   "engines": {

package/src/components/data/XCellList/index.vue

@@ -734,7 +734,7 @@ defineExpose({
 
 <style scoped lang="less">
 #XCellList {
-  height: calc(100vh - var(--van-nav-bar-height) - 5px);
+  height: calc(100vh - var(--van-nav-bar-height) - 20px);
   display: flex;
   flex-direction: column;
   --van-search-padding: 3px;
@@ -953,6 +953,7 @@ defineExpose({
 
         .action-btn {
           min-width: 76px;
+          height: 40px;
           border-radius: 10px;
           font-size: 1rem;
           transition: all 0.2s ease;

package/src/components/data/XForm/index.vue

@@ -218,7 +218,7 @@ defineExpose({ init, form, formGroupName, validate })
       </VanCellGroup>
     </div>
     <div v-if="resolvedSubmitButton && props.mode !== '预览'" class="form-footer-fixed">
-      <VanButton round block type="primary" native-type="submit">
+      <VanButton class="action-btn" round block type="primary" native-type="submit">
         {{ props.groupFormItems?.btnName ? props.groupFormItems.btnName : '提交' }}
       </VanButton>
       <slot />
@@ -228,7 +228,7 @@ defineExpose({ init, form, formGroupName, validate })
 
 <style scoped>
 .x-form-container {
-  height: calc(100vh - var(--van-nav-bar-height) - 5px);
+  height: calc(100vh - var(--van-nav-bar-height) - 20px);
   display: flex;
   flex-direction: column;
   max-height: 100vh;
@@ -239,11 +239,13 @@ defineExpose({ init, form, formGroupName, validate })
   flex: 1;
   overflow-y: auto;
   min-height: 0;
-  padding: 0 16px;
 }
 
 .form-footer-fixed {
   margin: 16px;
   flex-shrink: 0;
+  .action-btn {
+    border-radius: 10px;
+  }
 }
 </style>

package/src/components/data/XFormItem/index.vue

@@ -837,7 +837,7 @@ function handleAddressConfirm(location) {
       :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
       @click="readonly ? null : showPicker = true"
     />
-    <VanPopup v-model:show="showPicker" round position="bottom" teleport="body">
+    <VanPopup v-model:show="showPicker" round position="bottom" teleport="body" overlay-class="date-picker-overlay">
       <VanPicker
         v-model="(localValue as Numeric[])"
         :title="attr.name"
@@ -870,6 +870,7 @@ function handleAddressConfirm(location) {
       switch-mode="year-month"
       type="range"
       teleport="body"
+      overlay-class="date-picker-overlay"
       :show-confirm="attr.showConfirm"
       @confirm="onCalendarConfirm"
     />
@@ -888,7 +889,7 @@ function handleAddressConfirm(location) {
       :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
       @click="readonly ? null : showDataTimePicker()"
     />
-    <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body">
+    <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body" overlay-class="date-picker-overlay">
       <VanPickerGroup
         :title="attr.name"
         :tabs="['选择日期', '选择时间']"
@@ -925,7 +926,7 @@ function handleAddressConfirm(location) {
       :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
       @click="showDatePicker = true"
     />
-    <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body">
+    <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body" overlay-class="date-picker-overlay">
       <VanPickerGroup
         :title="attr.name"
         :tabs="['选择日期', '选择时间']"
@@ -962,7 +963,7 @@ function handleAddressConfirm(location) {
       :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
       @click="showTimePicker = true"
     />
-    <VanPopup v-model:show="showTimePicker" position="bottom" teleport="body">
+    <VanPopup v-model:show="showTimePicker" position="bottom" teleport="body" overlay-class="date-picker-overlay">
       <VanTimePicker
         v-model="localValue as string[]"
         :title="attr.name"
@@ -989,7 +990,7 @@ function handleAddressConfirm(location) {
       :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
       @click="readonly ? null : showArea = true"
     />
-    <VanPopup v-model:show="showArea" position="bottom" teleport="body">
+    <VanPopup v-model:show="showArea" position="bottom" teleport="body" overlay-class="date-picker-overlay">
       <VanArea
         v-model="localValue as string" :title="attr.name" :area-list="areaList"
         @confirm="onAreaConfirm"
@@ -1063,6 +1064,7 @@ function handleAddressConfirm(location) {
       position="bottom"
       :style="{ height: '80vh' }"
       teleport="body"
+      overlay-class="date-picker-overlay"
     >
       <XLocationPicker
         :default-center="defaultMapCenter"
@@ -1073,5 +1075,7 @@ function handleAddressConfirm(location) {
 </template>
 
 <style scoped>
-
+.date-picker-overlay {
+  background-color: rgba(0, 0, 0, 0.2); /* 设置为半透明的黑色 */
+}
 </style>

package/src/components/data/XOlMap/index.vue

@@ -15,6 +15,7 @@ import type {
   WebGLPointOptions,
   WMSLayerConfig,
   WMSOptions,
+  TrackData,
 } from './types'
 import locationIcon from '@af-mobile-client-vue3/assets/img/component/positioning.png'
 import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
@@ -23,11 +24,12 @@ import { Map, View } from 'ol'
 import { defaults as defaultControls, ScaleLine } from 'ol/control'
 import Feature from 'ol/Feature'
 import Point from 'ol/geom/Point'
+import LineString from 'ol/geom/LineString'
 import { defaults as defaultInteractions } from 'ol/interaction'
 import { Image as ImageLayer, Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
 import { fromLonLat, toLonLat } from 'ol/proj'
 import { ImageWMS, Vector as VectorSource, XYZ } from 'ol/source'
-import { Fill, Icon, Stroke, Style, Text } from 'ol/style'
+import { Fill, Icon, Stroke, Style, Text, Circle } from 'ol/style'
 import { Button } from 'vant'
 import { getCurrentInstance, onUnmounted, ref } from 'vue'
 import { wgs84ToGcj02Projection } from './utils/wgs84ToGcj02'
@@ -83,6 +85,10 @@ let locationTimer: ReturnType<typeof setInterval> | null = null
 /** 位置图标图层 */
 let locationLayer: VectorLayer<VectorSource> | null = null
 
+/** 存储轨迹图层 */
+const trackLayers: Record<number, VectorLayer<VectorSource>> = {}
+const trackLayerStatus = ref<TrackData[]>([])
+
 /**
  * 创建位置图标图层
  */
@@ -890,6 +896,139 @@ function navigationHandleLocation() {
   }
 }
 
+/**
+ * 添加轨迹图层
+ * @param trackData - 轨迹数据
+ */
+function addTrackLayer(trackData: TrackData): void {
+  if (!map)
+    return
+
+  const vectorSource = new VectorSource()
+  const vectorLayer = new VectorLayer({
+    source: vectorSource,
+    visible: true,
+    zIndex: 2,
+  })
+
+  // 创建轨迹线要素
+  const coordinates = trackData.trackData.map(coord => fromLonLat(coord))
+  const lineString = new Feature({
+    geometry: new LineString(coordinates),
+  })
+
+  // 设置轨迹线样式
+  const lineStyle = new Style({
+    stroke: new Stroke({
+      color: trackData.color,
+      width: 3,
+    }),
+  })
+  lineString.setStyle(lineStyle)
+
+  // 创建起点和终点图标
+  const startPoint = new Feature({
+    geometry: new Point(coordinates[0]),
+  })
+  const endPoint = new Feature({
+    geometry: new Point(coordinates[coordinates.length - 1]),
+  })
+
+  // 设置起点图标样式 - 使用绿色圆形图标
+  const startStyle = new Style({
+    image: new Circle({
+      radius: 8,
+      fill: new Fill({
+        color: '#4CAF50',
+      }),
+      stroke: new Stroke({
+        color: '#fff',
+        width: 2,
+      }),
+    }),
+    text: new Text({
+      text: '起点',
+      offsetY: -15,
+      font: '12px sans-serif',
+      fill: new Fill({
+        color: '#333',
+      }),
+      stroke: new Stroke({
+        color: '#fff',
+        width: 2,
+      }),
+    }),
+  })
+
+  // 设置终点图标样式 - 使用红色圆形图标
+  const endStyle = new Style({
+    image: new Circle({
+      radius: 8,
+      fill: new Fill({
+        color: '#F44336',
+      }),
+      stroke: new Stroke({
+        color: '#fff',
+        width: 2,
+      }),
+    }),
+    text: new Text({
+      text: '终点',
+      offsetY: -15,
+      font: '12px sans-serif',
+      fill: new Fill({
+        color: '#333',
+      }),
+      stroke: new Stroke({
+        color: '#fff',
+        width: 2,
+      }),
+    }),
+  })
+
+  startPoint.setStyle(startStyle)
+  endPoint.setStyle(endStyle)
+
+  // 添加要素到图层
+  vectorSource.addFeatures([lineString, startPoint, endPoint])
+
+  // 添加到地图
+  map.addLayer(vectorLayer)
+  trackLayers[trackData.id] = vectorLayer
+
+  // 更新图层状态，确保 show 属性被正确设置
+  const trackDataWithShow = {
+    ...trackData,
+    show: true, // 默认显示
+  }
+  trackLayerStatus.value.push(trackDataWithShow)
+}
+
+/**
+ * 控制轨迹图层显示/隐藏
+ * @param trackId - 轨迹ID
+ * @param visible - 是否显示
+ */
+function setTrackLayerVisible(trackId: number, visible: boolean): void {
+  const layer = trackLayers[trackId]
+  if (layer) {
+    layer.setVisible(visible)
+    // 更新图层状态
+    const layerIndex = trackLayerStatus.value.findIndex(layer => layer.id === trackId)
+    if (layerIndex !== -1) {
+      trackLayerStatus.value[layerIndex].show = visible
+    }
+  }
+}
+
+/**
+ * 切换轨迹图层显示状态
+ */
+function handleToggleTrackLayer(track: TrackData): void {
+  track.show = !track.show
+  setTrackLayerVisible(track.id, track.show)
+}
+
 // 暴露方法给父组件
 defineExpose({
   init,
@@ -909,6 +1048,9 @@ defineExpose({
   handleLocation,
   startNavigation,
   stopNavigation,
+  addTrackLayer,
+  setTrackLayerVisible,
+  handleToggleTrackLayer,
 })
 
 // 组件卸载时清理地图实例
@@ -1008,6 +1150,25 @@ onUnmounted(() => {
             </div>
           </div>
         </div>
+
+        <!-- 轨迹图层 -->
+        <div v-if="trackLayerStatus.length > 0" class="control-panel layer-control">
+          <div class="control-title">
+            <i class="van-icon van-icon-location-o" /> 轨迹图层
+          </div>
+          <div class="layer-list">
+            <div
+              v-for="track in trackLayerStatus"
+              :key="track.id"
+              class="layer-item"
+              :class="{ active: track.show }"
+              @click="handleToggleTrackLayer(track)"
+            >
+              <i class="van-icon" :class="track.show ? 'van-icon-eye' : 'van-icon-closed-eye'" />
+              <span>{{ track.name }}</span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>

package/src/components/data/XOlMap/types.ts

@@ -132,3 +132,14 @@ export interface WMSOptions {
   /** WMS 服务配置 */
   wms: WMSConfig
 }
+
+/**
+ * 轨迹数据类型
+ */
+export interface TrackData {
+  id: number
+  name: string
+  trackData: [number, number][] // 经纬度数组
+  color: string
+  show?: boolean // 是否显示
+}

package/src/views/component/XCellListView/index.vue

@@ -1,107 +1,24 @@
 <script setup lang="ts">
 import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
-import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
-import { defineEmits, ref } from 'vue'
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-// 定义事件
-const emit = defineEmits(['deleteRow'])
-// 访问路由
-const router = useRouter()
-// 获取默认值
-const idKey = ref('o_id')
+// 巡检计划
+defineOptions({
+  name: 'PatrolPlan',
+})
 
-// 简易crud表单测试
+const router = useRouter()
 const configName = ref('crud_patroltask_managePhoneCRUD')
-const serviceName = ref('af-linepatrol')
-
-// 资源权限测试
-// const configName = ref('crud_sources_test')
-// const serviceName = ref('af-system')
-
-// 实际业务测试
-// const configName = ref('lngChargeAuditMobileCRUD')
-// const serviceName = ref('af-gaslink')
-
-// 跳转到详情页面
-// function toDetail(item) {
-//   router.push({
-//     name: 'XCellDetailView',
-//     params: { id: item[idKey.value] }, // 如果使用命名路由，推荐使用路由参数而不是直接构建 URL
-//     query: {
-//       operName: item[operNameKey.value],
-//       method:item[methodKey.value],
-//       requestMethod:item[requestMethodKey.value],
-//       operatorType:item[operatorTypeKey.value],
-//       operUrl:item[operUrlKey.value],
-//       operIp:item[operIpKey.value],
-//       costTime:item[costTimeKey.value],
-//       operTime:item[operTimeKey.value],
-//
-//       title: item[titleKey.value],
-//       businessType: item[businessTypeKey.value],
-//       status:item[statusKey.value]
-//     }
-//   })
-// }
-
-// 跳转到表单——以表单组来渲染纯表单
-function toDetail(item) {
-  router.push({
-    name: 'XFormGroupView',
-    query: {
-      id: item[idKey.value],
-      // id: item.rr_id,
-      // o_id: item.o_id,
-    },
-  })
-}
-
-// 新增功能
-// function addOption(totalCount) {
-//   router.push({
-//     name: 'XFormView',
-//     params: { id: totalCount, openid: totalCount },
-//     query: {
-//       configName: configName.value,
-//       serviceName: serviceName.value,
-//       mode: '新增',
-//     },
-//   })
-// }
-
-// 修改功能
-// function updateRow(result) {
-//   router.push({
-//     name: 'XFormView',
-//     params: { id: result.o_id, openid: result.o_id },
-//     query: {
-//       configName: configName.value,
-//       serviceName: serviceName.value,
-//       mode: '修改',
-//     },
-//   })
-// }
-
-// 删除功能
-function deleteRow(result) {
-  emit('deleteRow', result.o_id)
-}
+const xCellListRefPatrolPlan = ref()
 </script>
 
 <template>
-  <NormalDataLayout id="XCellListView" title="工作计划">
-    <template #layout_content>
-      <XCellList
-        :config-name="configName"
-        :service-name="serviceName"
-        :fix-query-form="{ o_f_oper_name: 'edu_test' }"
-        :id-key="idKey"
-        @to-detail="toDetail"
-        @delete-row="deleteRow"
-      />
-    </template>
-  </NormalDataLayout>
+  <XCellList
+    ref="xCellListRefPatrolPlan"
+    service-name="af-linepatrol"
+    :config-name="configName"
+  />
 </template>
 
 <style scoped lang="less">

package/src/views/component/XFormView/index.vue

@@ -12,16 +12,19 @@ const formGroupAddConstruction = ref(null)
 <template>
   <NormalDataLayout id="XFormGroupView" title="纯表单">
     <template #layout_content>
-      <XForm
+      <div class="form">   <XForm
         ref="formGroupAddConstruction"
         mode="新增"
         :config-name="configName"
         :service-name="serviceName"
-      />
+      /></div>
+
     </template>
   </NormalDataLayout>
 </template>
 
 <style scoped lang="less">
-
+.form {
+  margin-top: 2px;
+}
 </style>

package/src/views/component/XOlMapView/index.vue

@@ -3,6 +3,7 @@ import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDat
 import { showNotify } from 'vant'
 import { onMounted, ref } from 'vue'
 import XOlMap from '../../../components/data/XOlMap/index.vue'
+import { trackTestData } from './testData'
 import 'vant/lib/index.css'
 
 const mapRef = ref()
@@ -265,6 +266,13 @@ function handleAddMassPoints() {
   })
 }
 
+// 添加轨迹测试
+function handleAddTrack() {
+  trackTestData.forEach((track) => {
+    mapRef.value.addTrackLayer(track)
+  })
+}
+
 // 导航模式相关
 const isNavigationMode = ref(false)
 
@@ -322,6 +330,15 @@ function stopNavigation() {
             </van-button>
           </div>
 
+          <div class="control-group">
+            <div class="group-title">
+              轨迹示例
+            </div>
+            <van-button type="primary" size="small" @click="handleAddTrack">
+              添加测试轨迹
+            </van-button>
+          </div>
+
           <div class="control-group">
             <div class="group-title">
               导航模式测试

package/src/views/component/XOlMapView/testData.ts

@@ -0,0 +1,64 @@
+/**
+ * 轨迹测试数据
+ */
+
+// 轨迹数据类型定义
+export interface TrackData {
+  id: number
+  name: string
+  trackData: [number, number][] // 经纬度数组
+  color: string
+  show?: boolean // 是否显示
+}
+
+/**
+ * 生成随机轨迹点
+ * @param startPoint - 起始点 [经度, 纬度]
+ * @param pointCount - 点的数量
+ * @param maxOffset - 最大偏移量（经纬度）
+ * @returns 轨迹点数组
+ */
+function generateRandomTrack(
+  startPoint: [number, number],
+  pointCount: number,
+  maxOffset: number = 0.01,
+): [number, number][] {
+  const points: [number, number][] = [startPoint]
+  let currentPoint = startPoint
+
+  for (let i = 1; i < pointCount; i++) {
+    // 生成随机偏移量，使用正态分布使轨迹更自然
+    const offsetLng = (Math.random() - 0.5) * maxOffset * (1 + Math.random() * 0.5)
+    const offsetLat = (Math.random() - 0.5) * maxOffset * (1 + Math.random() * 0.5)
+
+    // 添加一些随机性，使轨迹更自然
+    const randomFactor = Math.random() > 0.8 ? 2 : 1 // 偶尔会有较大的偏移
+    const newPoint: [number, number] = [
+      currentPoint[0] + offsetLng * randomFactor,
+      currentPoint[1] + offsetLat * randomFactor,
+    ]
+
+    points.push(newPoint)
+    currentPoint = newPoint
+  }
+
+  return points
+}
+
+// 测试数据
+export const trackTestData: TrackData[] = [
+  {
+    id: 1,
+    name: '张三的轨迹',
+    trackData: generateRandomTrack([108.948024, 34.263161], 1000, 0.005),
+    color: '#FF0000',
+    show: true,
+  },
+  {
+    id: 2,
+    name: '李四的轨迹',
+    trackData: generateRandomTrack([108.948024, 34.263161], 500, 0.003),
+    color: '#00FF00',
+    show: true,
+  },
+] 

package/vite.config.ts

@@ -1,8 +1,8 @@
 import type { ConfigEnv, UserConfig } from 'vite'
 import path from 'node:path'
 import process from 'node:process'
-// import autoprefixer from 'autoprefixer'
-// import viewport from 'postcss-mobile-forever'
+import autoprefixer from 'autoprefixer'
+import viewport from 'postcss-mobile-forever'
 import { loadEnv } from 'vite'
 import { createVitePlugins } from './build/vite'
 
@@ -95,15 +95,15 @@ export default ({ mode }: ConfigEnv): UserConfig => {
       postcss: {
         plugins: [
           // 自动获取浏览器的流行度和能够支持的属性，并为 CSS 规则添加前缀
-          // autoprefixer(),
-          // viewport({
-          //   appSelector: '#system-app',
-          //   viewportWidth: 375,
-          //   maxDisplayWidth: 800,
-          //   appContainingBlock: 'auto',
-          //   necessarySelectorWhenAuto: '.app-wrapper',
-          //   rootContainingBlockSelectorList: ['van-tabbar', 'van-popup'],
-          // }),
+          autoprefixer(),
+          viewport({
+            appSelector: '#system-app',
+            viewportWidth: 375,
+            maxDisplayWidth: 800,
+            appContainingBlock: 'auto',
+            necessarySelectorWhenAuto: '.app-wrapper',
+            rootContainingBlockSelectorList: ['van-tabbar', 'van-popup'],
+          }),
         ],
       },
     },