Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 69ca960b 作者: 方治民
操作

feat: 添加 mapbox 地图组件、农场详情示例（功能不完整）

上级 335172ee
正在显示 包含 2548 行增加 和 11 行删除
.npmrc
shamefully-hoist=true
strict-peer-dependencies=false
shell-emulator=true
registry=https://registry.npmmirror.com
disturl=https://registry.npmmirror.com/-/binary/node/
package.json
......@@ -81,11 +81,12 @@
"@dcloudio/uni-quickapp-webview": "3.0.0-4060620250520001",
"@dcloudio/uni-ui": "^1.5.11",
"@faker-js/faker": "^9.9.0",
"@turf/turf": "^7.3.0",
"@vant/area-data": "^2.1.0",
"@vue/runtime-core": "3.4.21",
"@vueuse/core": "^10.11.1",
"@vueuse/shared": "^11.3.0",
"axios": "^1.13.1",
"axios": "^1.13.2",
"crypto-js": "^4.2.0",
"dayjs": "^1.11.19",
"dayjs-plugin-lunar": "^1.4.1",
......@@ -94,7 +95,7 @@
"pinia": "2.0.36",
"qs": "6.9.7",
"stompjs": "^2.3.3",
"tyme4ts": "^1.3.8",
"tyme4ts": "^1.3.9",
"urijs": "^1.19.11",
"vue": "3.4.21",
"vue-demi": "^0.14.10",
......@@ -113,12 +114,13 @@
"@dcloudio/uni-stacktracey": "3.0.0-4060620250520001",
"@dcloudio/uni-uts-v1": "3.0.0-4060620250520001",
"@dcloudio/vite-plugin-uni": "3.0.0-4060620250520001",
"@iconify/json": "^2.2.403",
"@iconify/json": "^2.2.410",
"@types/crypto-js": "^4.2.2",
"@types/lodash-es": "^4.17.12",
"@types/node": "^22.19.0",
"@types/mapbox-gl": "^2.7.21",
"@types/node": "^22.19.1",
"@types/qs": "^6.14.0",
"@types/stompjs": "^2.3.9",
"@types/stompjs": "^2.3.10",
"@types/urijs": "^1.19.26",
"@typescript-eslint/eslint-plugin": "^7.18.0",
"@typescript-eslint/parser": "^7.18.0",
......@@ -137,7 +139,8 @@
"jest": "27.0.4",
"jest-environment-node": "27.5.1",
"less": "^4.4.2",
"lint-staged": "^16.2.6",
"lint-staged": "^16.2.7",
"mapbox-gl": "2.15.0",
"npm-run-all": "^4.1.5",
"picocolors": "^1.1.1",
"pont-engine": "^1.6.3",
......@@ -145,10 +148,10 @@
"postcss-html": "^1.8.0",
"postcss-less": "^6.0.0",
"prettier": "^3.6.2",
"rimraf": "^6.1.0",
"sass": "^1.93.3",
"rimraf": "^6.1.2",
"sass": "^1.94.2",
"sort-package-json": "^3.4.0",
"stylelint": "^16.25.0",
"stylelint": "^16.26.0",
"stylelint-config-html": "^1.1.0",
"stylelint-config-recommended": "^14.0.1",
"stylelint-config-standard": "^36.0.1",
......
pnpm-lock.yaml
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/Map/Mapbox/hook.ts 0 → 100644
import type mapboxgl from 'mapbox-gl'
import qs from 'qs'
import { isEmpty, isNull, isObject, isString, isUndefined, merge, omitBy } from 'lodash-es'
import { DEFAULT_MAP_CENTER, DEFAULT_MAP_ZOOM, HandlerUtil } from './index'
import type { GeoJSONSourceDataUrlParams, HandlerUtilType, MapboxConfig, MapboxInstance } from './index'
import { API_URL, API_URL_PREFIX } from '/@/utils/net'
import { isProdMode } from '@/utils/env'
import { useUserStoreWithOut } from '@/store/modules/user'
// 组件名称
export const name = 'Mapbox'
/**
* 注册 Mapbox 实例
* @param config Mapbox 配置项
*/
export function useMapbox<T extends MapboxInstance, P extends MapboxConfig>(
config: P,
): [(instance: T) => void, MapboxInstance] {
const instanceRef = ref<T>()
function register(instance: T) {
if (isProdMode()) {
if (instance === unref(instanceRef)) {
return
}
onUnmounted(() => {
instanceRef.value = null
})
}
instanceRef.value = instance
config && Object.keys(config)?.length && instance?.setConfig(config)
}
function getInstance() {
const instance = unref(instanceRef)
if (!instance) {
console.warn('Mapbox instance is undefined!')
}
return instance as T
}
return [
register,
{
setRegion: (region: string, flyTo?: boolean) => getInstance()?.setRegion(region, flyTo),
setConfig: (config: Partial<P>) => getInstance()?.setConfig(config),
isReady: computed(() => instanceRef?.value?.isReady) as unknown as ComputedRef<boolean>,
on: (type: string, layerId: string, listener: (...args: any[]) => void) =>
getInstance()?.on(type, layerId, listener),
addSource: (id: string, source: mapboxgl.AnySourceData) => getInstance()?.addSource(id, source),
removeSource: (id: string) => getInstance()?.removeSource(id),
setGeoJSONSourceForRequest: (
id: string,
config: string | GeoJSONSourceDataUrlParams,
handler?: (
data: Recordable,
util: HandlerUtilType,
) => GeoJSON.Feature<GeoJSON.Geometry> | GeoJSON.FeatureCollection<GeoJSON.Geometry>,
filters?: string[],
) =>
getInstance()?.setGeoJSONSourceForRequest(id, buildGeoJSONSourceDataUrl(config), handler, [
...(filters || ['jsonObject', 'liveVos']),
]),
setGeoJSONSourceData: (id: string, data: mapboxgl.GeoJSONSource['setData'], filter?: string) =>
getInstance()?.setGeoJSONSourceData(id, data, filter),
setVectorTileSourceTiles: (id: string, tiles: string[]) =>
getInstance()?.setVectorTileSourceTiles(id, tiles),
updateRasterImage: (id: string, url: string) => getInstance()?.updateRasterImage(id, url),
addLayer: (layer: mapboxgl.Layer, beforeId?: string, popup?: boolean) =>
getInstance()?.addLayer(layer, beforeId, popup),
removeLayer: (id: string) => getInstance()?.removeLayer(id),
setPaintProperty: (layerId: string, name: string, value: any) =>
getInstance()?.setPaintProperty(layerId, name, value),
setLayoutProperty: (layerId: string, name: string, value: any) =>
getInstance()?.setLayoutProperty(layerId, name, value),
setFilter: (layerId: string, filter: any[]) => getInstance()?.setFilter(layerId, filter),
flyTo: (options: mapboxgl.FlyToOptions) => getInstance()?.flyTo(options),
addMarker: (id: string, lnglat: [number, number], popup?: string, popupDefaultOpen?: boolean) =>
getInstance()?.addMarker(id, lnglat, popup, popupDefaultOpen),
removeMarker: (id: string) => getInstance()?.removeMarker(id),
removePopup: () => getInstance()?.removePopup(),
loadImage: (url: string, callback: (error: Error | null, image: HTMLImageElement) => void) =>
getInstance()?.loadImage(url, callback),
addImage: (id: string, image: HTMLImageElement) => getInstance()?.addImage(id, image),
},
]
}
/**
* 添加默认的 GeoJSON Source - 空白数据源
* @param map 地图实例
* @param id source id
* @param features features
*/
export function addDefaultGeoJSONSource(map: MapboxInstance, id: string, features?: GeoJSON.Feature[]) {
map.addSource(id, {
type: 'geojson',
data: HandlerUtil.createFeatureCollection(features),
})
}
/**
* 添加默认的色斑 Fill Layer
* @param map 地图实例
* @param id layer id
* @param layer layer config
* @param beforeId before layer id
*/
export function addDefaultSplotLayer(
map: MapboxInstance,
id: string,
layer?: Partial<mapboxgl.Layer>,
beforeId: string = 'fill-placeholder',
popop: boolean = true,
) {
map.addLayer(
merge(
{
id,
type: 'fill',
source: id,
paint: {
'fill-color': {
type: 'identity',
property: 'color',
},
'fill-opacity': 1,
},
},
layer,
),
beforeId,
popop,
)
}
/**
* 添加默认的点位 Symbol Layer - 默认支持 Symbol 的 Click + Popup 事件
* @param map 地图实例
* @param id layer id
* @param layer layer config
* @param beforeId before layer id
* @param popop 是否支持 Popup
*/
export function addDefaultSymbolLayer(
map: MapboxInstance,
id: string,
layer?: Partial<mapboxgl.Layer>,
beforeId: string = 'symbol-placeholder',
popop: boolean = true,
) {
map.addLayer(
merge(
{
id,
type: 'symbol',
source: id,
layout: {
'text-field': '{value}',
// 'text-font': ['PingFang SC', 'Helvetica', 'Helvetica Neue', 'Microsoft YaHei', 'sans-serif'],
'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular'],
'text-size': 14,
'text-offset': [0, 1.2],
'icon-image': 'point.normal',
'icon-anchor': 'top',
'icon-size': 0.4,
},
paint: {
'text-color': '#3766fd',
'text-halo-color': '#fff',
'text-halo-width': 1,
},
},
layer,
),
beforeId,
popop,
)
}
export function flyTo(
map: MapboxInstance,
center: [number, number] = DEFAULT_MAP_CENTER,
zoom: number = DEFAULT_MAP_ZOOM,
) {
map.flyTo({
center,
zoom,
speed: 0.2,
essential: true,
})
}
/**
* 构建 GeoJSON Source Data Url - 默认添加 token + 过滤空参数
* @param config 接口配置
* @returns source url
*/
export function buildGeoJSONSourceDataUrl(config: GeoJSONSourceDataUrlParams | string): string {
const userStore = useUserStoreWithOut()
const baseURL = `${API_URL}${API_URL_PREFIX}`
const defaultParams = {
Authorization: userStore.getToken,
}
const url = typeof config === 'string' ? config : config.url
const params = typeof config === 'string' ? defaultParams : { ...defaultParams, ...config.params }
const query = qs.stringify(
omitBy(
params,
(value) =>
isNull(value) ||
isUndefined(value) ||
(isString(value) && isEmpty(value)) ||
(isObject(value) && isEmpty(value)),
),
{ addQueryPrefix: true, encode: true, encodeValuesOnly: true },
)
return `${baseURL}${url}${query}`
}
/**
* 获取当前位置
* @returns UniApp.GetLocationSuccess
*/
export function getLocation() {
return new Promise<UniApp.GetLocationSuccess>((resolve, reject) => {
// 获取用户定位
uni.getLocation({
success: (res) => {
resolve(res)
// TODO: Test
// resolve({
// longitude: 112.989113,
// latitude: 28.039308,
// })
},
fail: (err) => {
Message.toast('获取位置失败')
reject(err)
},
})
})
}
src/components/Map/Widgets/AffixFilter/index.ts 0 → 100644
export type * from './src/types'
export * from './src/hook'
export { default as AffixFilterWidget } from './src/AffixFilter.vue'
/**
* 吸附过滤器组件
*
* 说明: 用于吸附在地图上的过滤器组件，可以用于筛选地图上的数据或改变查询条件等，支持的组件有: Select
*
* 可以应用到的一些模块:
* 1. 山洪地质灾害
* 2. 森林火险
* 3. 水情监测
* 4. 卫星云图
* 5. 形势场
* 6. 雷达拼图
* ...
*/
src/components/Map/Widgets/AffixFilter/src/AffixFilter.vue 0 → 100644
<!-- 吸附过滤器组件 -->
<script setup lang="ts">
import type { Option, OptionItem } from './types'
import { deepMerge } from '@/utils'
const props = defineProps({
// 是否显示
show: {
type: Boolean,
default: true,
},
// 布局
layout: {
type: String,
default: 'horizontal',
},
// 风格
style: {
type: String,
default: 'button',
},
// 距离顶部的距离
top: {
type: Number,
default: 125,
},
// 距离左侧的距离
left: {
type: Number,
default: 30,
},
// 选项
options: {
type: Array as PropType<Option[]>,
default: () => [],
},
})
const emits = defineEmits(['register'])
const positionTop = computed(() => `${data.top}rpx`)
const positionLeft = computed(() => `${data.left}rpx`)
const data = reactive({
show: props.show,
layout: props.layout,
style: props.style,
top: props.top,
left: props.left,
options: props.options,
})
function toggleShow(show?: boolean) {
data.show = show ?? !data.show
}
function setProps(value: Partial<typeof props>) {
deepMerge(data, value)
}
function getProp(key: keyof typeof props) {
return data[key]
}
function setOptionItems(key: string, items: OptionItem[]) {
data.options = data.options.map((option) => {
if (option.key === key) {
option.items = items
}
return option
})
}
function setOptionItemChecked(key: string, value: string) {
data.options = data.options.map((option) => {
if (option.key === key) {
option.items = option.items.map((item) => {
item.checked = item.value === value
return item
})
}
return option
})
}
const zIndex = computed(() => (model.show ? 200 : 110))
const model = reactive({
show: false,
activeOption: null as Option | null,
})
function optionClick(option: Option) {
console.log(option)
model.activeOption = option
model.show = true
}
function getItemLabel(option: Option) {
return option.items.find((item) => item.checked)?.text ?? option.placeholder
}
function optionChange(e: { text: string; value: string }) {
const currentOptionChecked = model.activeOption?.items.find((item) => item.checked)
data.options = data.options.map((option) => {
if (option.key === model.activeOption?.key) {
option.items = option.items.map((item) => {
item.checked = item.value === e.value
return item
})
}
return option
})
// 判断是否真的发生了变化
if (
currentOptionChecked?.value !==
data.options.find((option) => option.key === model.activeOption?.key)?.items.find((item) => item.checked)
?.value
) {
model.activeOption?.onChange?.(
{
key: model.activeOption.key,
value: toRaw(model.activeOption.items.find((item) => item.checked)),
},
data.options.map((option) => {
return {
key: option.key,
value: toRaw(option.items.find((item) => item.checked)),
}
}),
)
}
closePicker()
}
function closePicker() {
model.activeOption = null
model.show = false
}
emits('register', {
setProps,
getProp,
toggleShow,
setOptionItems,
setOptionItemChecked,
})
</script>
<template>
<view class="wrap affix-filter" :class="[data.layout, data.style]">
<!-- -->
<view class="filter-item flex-center" v-for="option in data.options" :key="option.key">
<view class="fui-filter__item flex-center" @tap="optionClick(option)">
<text>{{ getItemLabel(option) }}</text>
<view class="ml-10rpx icon" :class="{ open: model.activeOption?.key === option.key }">
<fui-icon name="turningdown" :size="32" color="#999" />
</view>
</view>
</view>
<!-- 复用选择器 -->
<fui-picker
linkage
:options="model.activeOption?.items"
:show="model.show"
@change="optionChange"
@cancel="closePicker"
/>
</view>
</template>
<style lang="scss" scoped>
@use '../../common.scss' as *;
.affix-filter {
display: flex;
box-sizing: border-box;
position: absolute;
top: v-bind(positionTop);
left: v-bind(positionLeft);
z-index: v-bind(zIndex);
&.vertical {
flex-direction: column;
.filter-item + .filter-item {
margin-top: 30rpx;
}
}
&.horizontal {
.filter-item + .filter-item {
margin-left: 30rpx;
}
}
&.bar {
width: 100%;
background-color: white;
left: 0;
padding: 10rpx 30rpx;
.filter-item {
flex: 1;
box-shadow: none !important;
}
}
.filter-item {
background-color: white;
padding: 15rpx 30rpx;
font-size: 28rpx;
color: #333;
border-radius: 10rpx;
box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.1);
.icon {
@include animate();
transform: rotate(0deg);
&.open {
transform: rotate(180deg);
}
}
}
}
</style>
src/components/Map/Widgets/AffixFilter/src/hook.ts 0 → 100644
import { registerWidgetFactory, unpackWidgetInstance } from '../../utils'
import type { AffixFilterInstance, AffixFilterProps, OptionItem } from './types'
// 组件名称
export const name = 'AffixFilterWidget'
/**
* 吸附过滤器组件
* @param props 组件参数
* @returns 组件响应式数据
*/
export function useAffixFilterWidget<T extends AffixFilterInstance, P extends AffixFilterProps>(
props: P,
): [(instance: T) => void, AffixFilterInstance] {
const instanceRef = ref<T>()
const register = registerWidgetFactory(instanceRef, props)
const { get, ...fns } = unpackWidgetInstance(instanceRef, name)
return [
register,
{
...fns,
setOptionItem: (key: string, item: OptionItem) => get()?.setOptionItem(key, item),
},
]
}
src/components/Map/Widgets/AffixFilter/src/types.ts 0 → 100644
import type { BasicWidgetInstance, BasicWidgetProps } from '../../utils'
export interface CheckedOption {
key: string
value: OptionItem
}
export interface OptionItem {
text: string
value: string
checked?: boolean
disabled?: boolean
[key: string]: any
}
export interface Option {
// 标识
key: string
// 提示信息
placeholder?: string
// 选项
items: OptionItem[]
// 选项改变时的回调
onChange?: (checkedOption: CheckedOption, checkedOptions: CheckedOption[]) => void
}
export interface AffixFilterProps extends BasicWidgetProps {
/**
* 布局方式，水平或垂直
* @default horizontal
*/
layout?: 'horizontal' | 'vertical'
/**
* 风格，按钮或者条形
* @default button
*/
style?: 'button' | 'bar'
/**
* 距离顶部的距离 rpx
* @default 130rpx
*/
top?: number
/**
* 距离左侧的距离 rpx
* @default 30rpx
*/
left?: number
/**
* 过滤选项集合，仅支持 Select
*/
options: Option[]
}
export interface AffixFilterInstance extends BasicWidgetInstance<AffixFilterProps> {
/**
* 设置选项
* @param key 选项标识
* @param items 选项可选 options
*/
setOptionItems: (key: string, items: OptionItem[]) => void
/**
* 设置选项选中
* @param key 选项标识
* @param value 选项值
*/
setOptionItemChecked: (key: string, value: string) => void
}
src/components/Map/Widgets/BottomBar/index.ts 0 → 100644
export type * from './src/types'
export * from './src/hook'
export { default as BottomBarWidget } from './src/BottomBar.vue'
/**
* 底部工具栏组件
*
* 说明: 此组件仅提供一个可交互的容器，用于放置其他组件，如: Tabs、Button 等一些自定义场景
*
* 可以应用到的一些模块:（基于已有蓝湖设计稿评估，仅供参考）
* 1. 降水监测
* 2. 气温监测
* 3. 相对湿度
* 4. 雷达拼图
* 5. 强对流监测
* 6. 冰雪天气
* 7. 台风监测
* 8. 卫星云图
* 9. 环境监测
* 10. 山洪地质灾害、面雨量相关
* 11. 相关预报模块
* ...
*
*/
src/components/Map/Widgets/BottomBar/src/BottomBar.vue 0 → 100644
<!-- 底部 Bar 组件 -->
<script setup lang="ts">
import { deepMerge } from '@/utils'
const props = defineProps({
// 是否显示
show: {
type: Boolean,
default: true,
},
// 是否展开
expand: {
type: Boolean,
default: false,
},
// 展开按钮标题
expandTitle: {
type: String,
},
// 是否有展开按钮
showExpandButton: {
type: Boolean,
default: true,
},
// 是否有展开按钮下边框
showExpandBorder: {
type: Boolean,
default: false,
},
// 高度
height: {
type: Number,
default: 0,
},
// 最高高度
maxHeight: {
type: Number,
default: 0,
},
// 是否 Y 轴可滚动
scrollY: {
type: Boolean,
default: false,
},
})
const emits = defineEmits(['register'])
const iHeight = computed(() => `${data.height}rpx`)
const iMaxHeight = computed(() => `${data.maxHeight}rpx`)
const data = reactive({
show: props.show,
expand: props.expand,
expandTitle: props.expandTitle,
showExpandButton: props.showExpandButton,
showExpandBorder: props.showExpandBorder,
height: props.height,
maxHeight: props.maxHeight,
scrollY: props.scrollY,
})
function toggleShow(show?: boolean) {
data.show = show ?? !data.show
}
function toggleExpand(expand?: boolean) {
if (data.showExpandButton) {
data.expand = expand ?? !data.expand
}
}
function setProps(value: Partial<typeof props>) {
deepMerge(data, value)
}
function getProp(key: keyof typeof props) {
return data[key]
}
emits('register', {
setProps,
getProp,
toggleShow,
toggleExpand,
// TODO: 此处高度还需考虑底部安全区
height: computed(() => (data.show ? (data.expand ? data.maxHeight : data.height) : 0)),
})
</script>
<template>
<view class="wrap bottom-bar" :class="{ expand: data.expand }" v-show="data.show">
<view
class="action flex-center"
:class="{ border: data.showExpandBorder }"
v-show="data.showExpandButton"
@tap="toggleExpand()"
>
<text class="text" v-if="data.expandTitle">{{ data.expandTitle }}</text>
<Icon icon="solar-double-alt-arrow-up-line-duotone" size="42" color="#999" class="icon" />
</view>
<!-- 自定义内容 -->
<scroll-view class="content flex-center" :scroll-y="data.scrollY">
<slot></slot>
</scroll-view>
<!-- 底部安全区 -->
<fui-safe-area />
</view>
</template>
<style lang="scss" scoped>
@use '../../common.scss' as *;
.wrap {
@include animate();
position: absolute;
left: 30rpx;
bottom: 30rpx;
z-index: 99;
background-color: white;
}
.bottom-bar {
position: fixed;
bottom: 0;
left: 0;
// padding: 30rpx 12rpx;
padding: 10px 12px;
// width: calc(100% - 60rpx);
width: 100%;
height: v-bind(iHeight);
max-height: v-bind(iMaxHeight);
box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.1);
box-sizing: border-box;
&.expand {
height: v-bind(iMaxHeight);
.icon {
transform: rotateX(180deg) !important;
}
}
.action {
width: 100%;
position: relative;
// top: -15rpx;
font-size: 24rpx;
color: #999;
padding-bottom: 10rpx;
&.border {
border-bottom: 2rpx solid #f6f6f6;
}
.text {
margin-right: 0.5em;
}
.icon {
@include animate();
transform: rotateX(0);
transform-style: preserve-3d;
}
}
.content {
box-sizing: border-box;
width: 100%;
// height: calc(100% - 60rpx - 20rpx);
height: 100%;
overflow: hidden;
position: relative;
}
}
</style>
src/components/Map/Widgets/BottomBar/src/hook.ts 0 → 100644
import { getBooleanOrDefault, registerWidgetFactory, unpackWidgetInstance } from '../../utils'
import type { BottomBarInstance, BottomBarProps } from './types'
// 组件名称
export const name = 'BottomBarWidget'
/**
* 底部交互/展示小部件响应式 Hook
* @param props 组件参数
* @returns 组件响应式数据
*/
export function useBottomBarWidget<T extends BottomBarInstance, P extends BottomBarProps>(
props: P,
): [(instance: T) => void, BottomBarInstance] {
const instanceRef = ref<T>()
const register = registerWidgetFactory(instanceRef, props)
const { get, ...fns } = unpackWidgetInstance(instanceRef, name)
return [
register,
{
...fns,
toggleExpand: (expand?: boolean) => get()?.toggleExpand(getBooleanOrDefault(expand)),
height: computed(() => instanceRef?.value?.height) as unknown as ComputedRef<number>,
},
]
}
src/components/Map/Widgets/BottomBar/src/types.ts 0 → 100644
import type { BasicWidgetInstance, BasicWidgetProps } from '../../utils'
export interface BottomBarProps extends BasicWidgetProps {
/**
* 是否展开
* @default false
*/
expand?: boolean
/**
* 展开标题
*/
expandTitle?: string
/**
* 是否有展开按钮
* @default true
*/
showExpandButton?: boolean
/**
* 是否有展开边框
* @default false
*/
showExpandBorder?: boolean
/**
* 高度 rpx
* @default 0 rpx
*/
height: number
/**
* 最大高度 rpx
* @default 0 rpx
*/
maxHeight?: number
/**
* 是否支持 Y 滚动
* @default false
*/
scrollY?: boolean
}
export interface BottomBarInstance extends BasicWidgetInstance<BottomBarProps> {
/**
* 响应式组件当前高度，单位 rpx
*/
height: ComputedRef<number>
/**
* 切换展开状态
* @param expand 是否展开
*/
toggleExpand: (expand?: boolean) => void
}
src/components/Map/Widgets/Legend/index.ts 0 → 100644
export type * from './src/types'
export * from './src/hook'
export { default as LegendWidget } from './src/Legend.vue'
/**
* 图例组件
*
* 说明: 配合地图上的数据展示的图例，支持动态配置
*
* 可以应用到的一些模块:（基于已有蓝湖设计稿评估，仅供参考）
* 所有需要用到图例展示的模块
* 各种场景下的配置项，可以参考: \src\pages\business\monitor\rain\config.ts defaultLegendConfig
*
*/
src/components/Map/Widgets/Legend/src/Legend.vue 0 → 100644
<!-- 图例组件 -->
<script setup lang="ts">
import { isArray } from 'lodash-es'
import { createReusableTemplate } from '@vueuse/core'
import type { Option } from './types'
import { deepMerge } from '@/utils'
import { cssAdditionCalc } from '@/components/Map/Widgets/utils'
const props = defineProps({
// 显示
show: {
type: Boolean,
default: true,
},
// 展开
expand: {
type: Boolean,
default: false,
},
// 标题
title: {
type: String,
},
// 底部距离 rpx
bottom: {
type: Number,
default: 0,
},
// JSON 数据
option: {
type: Object as PropType<Option>,
default: () => ({}) as Option,
},
})
const emits = defineEmits(['register'])
// 定义复用渲染组件
const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{ item: Recordable; sub?: boolean }>()
const positionBottom = computed(() => cssAdditionCalc(30, data.bottom))
const data = reactive({
show: props.show,
expand: props.expand,
title: props.title,
option: props.option,
bottom: props.bottom,
})
function setTitle(title: string) {
data.title = title
}
function setOption(option: Option) {
data.option = option
}
function toggleShow(show?: boolean) {
data.show = show ?? !data.show
}
function toggleExpand(expand?: boolean) {
data.expand = expand ?? !data.expand
}
function setProps(value: Partial<typeof props>) {
deepMerge(data, value)
}
function getProp(key: keyof typeof props) {
return data[key]
}
emits('register', {
setProps,
getProp,
setTitle,
setOption,
toggleShow,
toggleExpand,
})
function getBorderColor(color: string) {
switch (color) {
case 'white':
case '#fff':
case '#ffffff':
case '#FFFFFF':
case 'rgb(255, 255, 255)':
case 'rgba(255, 255, 255, 1)':
return '#d7d7d7'
default:
return color
}
}
</script>
<template>
<view class="wrap legend flex-center" @click="data.expand = !data.expand" v-show="data.show">
<!-- 展开/收起 -->
<view class="expand-action flex-center" v-show="!data.expand">
<view class="text">图例</view>
<Icon icon="ic-round-keyboard-arrow-up" color="#1890ff" size="42" />
</view>
<!-- 内容 -->
<view class="expand-content flex-center" v-show="data.expand">
<!-- 标题 -->
<view v-if="data.title" class="title">{{ data.title }}</view>
<!-- 定义复用渲染组件 -->
<DefineTemplate v-slot="{ item, sub }">
<view class="item">
<!-- 图标 -->
<view v-if="item.icon" class="icon flex-center">
<CacheImage :src="item.icon" width="34" height="34" background="transparent" />
</view>
<!-- 色块 -->
<view
v-if="item.color"
class="color"
:style="{
backgroundColor: item.color,
border: `1rpx solid ${getBorderColor(item.color)}`,
...data.option.blockStyle,
}"
/>
<!-- 标签 -->
<view
v-if="String(item.label)"
class="label"
:class="{ 'color-label': item.color }"
:style="!sub && { ...data.option.labelStyle }"
>
{{ item.label }}
</view>
<!-- 子项集合 -->
<view v-if="item.items" class="sub-items">
<view v-for="(subItem, index) in item.items" :key="index" class="item">
<ReuseTemplate :item="subItem" :sub="true" />
</view>
</view>
</view>
</DefineTemplate>
<!-- JSON -->
<view class="option">
<template v-if="isArray(data.option.items?.[0])">
<view v-for="(item, index) in data.option.items" :key="index" class="item-wrap">
<view v-for="(subItem, subIndex) in item" :key="subIndex" class="items">
<ReuseTemplate :item="subItem" />
</view>
</view>
</template>
<template v-else>
<view class="item-wrap">
<view v-for="(item, index) in data.option.items" :key="index" class="items">
<ReuseTemplate :item="item" />
</view>
</view>
</template>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
@use '../../common.scss' as *;
.wrap {
@include animate();
position: absolute;
left: 30rpx;
bottom: v-bind(positionBottom);
z-index: 99;
}
.legend {
flex-direction: column;
padding: 12rpx 20rpx;
background-color: #fff;
border-radius: 10rpx;
box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.2);
.expand-action {
font-size: 26rpx;
font-weight: bold;
color: #1890ff;
.text {
margin-right: 6rpx;
}
}
.expand-content {
flex-direction: column;
font-size: 24rpx;
color: #555;
.title {
margin-bottom: 15rpx;
font-weight: bold;
}
.option {
display: flex;
.item-wrap {
+ .item-wrap {
margin-left: 15rpx;
}
.item {
display: flex;
align-items: center;
justify-content: flex-start;
.icon {
margin-right: 8rpx;
padding: 4rpx;
}
.color {
width: 42rpx;
height: 24rpx;
margin-right: 10rpx !important;
}
.label {
color: #777;
letter-spacing: 1px;
white-space: pre-wrap;
text-align: center;
&.color-label {
height: 24rpx;
}
}
}
.sub-items {
display: flex;
.item {
flex-direction: column;
justify-content: center;
margin: 2rpx 5rpx;
font-size: 20rpx;
}
}
}
}
}
}
</style>
src/components/Map/Widgets/Legend/src/hook.ts 0 → 100644
import { getBooleanOrDefault, registerWidgetFactory, unpackWidgetInstance } from '../../utils'
import type { LegendInstance, LegendProps, Option } from './types'
// 组件名称
export const name = 'LegendWidget'
/**
* 图例组件响应式 Hook
* @param props 组件参数
* @returns 组件响应式数据
*/
export function useLegendWidget<T extends LegendInstance, P extends LegendProps>(
props: P,
): [(instance: T) => void, LegendInstance] {
const instanceRef = ref<T>()
const register = registerWidgetFactory(instanceRef, props)
const { get, ...fns } = unpackWidgetInstance(instanceRef, name)
return [
register,
{
...fns,
setTitle: (title: string) => get()?.setTitle(title),
setOption: (option: Option) => get()?.setOption(option),
toggleExpand: (expand?: boolean) => get()?.toggleExpand(getBooleanOrDefault(expand)),
},
]
}
src/components/Map/Widgets/Legend/src/types.ts 0 → 100644
import type { BasicWidgetInstance, BasicWidgetProps } from '../../utils'
export interface OptionItem {
// 颜色
color?: string
// 图标
icon?: string
// 标签
label?: string
// 多子项
items?: OptionItem[]
}
export interface Option {
// 选项
items?: OptionItem[] | OptionItem[][]
// label 样式
labelStyle?: Recordable
// 色块样式
blockStyle?: Recordable
}
export interface LegendProps extends BasicWidgetProps {
/**
* 是否展开
* @default false
*/
expand?: boolean
/**
* 标题
*/
title: string
/**
* 选项
*/
option?: Option
/**
* 底部距离 rpx
* @default 0
*/
bottom?: number
}
export interface LegendInstance extends BasicWidgetInstance<LegendProps> {
/**
* 设置标题
* @param title 标题
*/
setTitle: (title: string) => void
/**
* 设置选项
* @param option 选项
*/
setOption: (option: Option) => void
/**
* 切换展开状态
* @param expand 是否展开
*/
toggleExpand: (expand?: boolean) => void
}
src/components/Map/Widgets/Switch/index.ts 0 → 100644
export type * from './src/types'
export * from './src/hook'
export { default as SwitchWidget } from './src/Switch.vue'
/**
* 前后切换组件
*
* 说明: 用于地图页面两侧的前后切换组件，通常与 TimeBarWidget 配合使用
*
* 可以应用到的一些模块:（基于已有蓝湖设计稿评估，仅供参考）
* 所有需要用到前后切换时间的场景，实况、预报等
*
*/
src/components/Map/Widgets/Switch/src/Switch.vue 0 → 100644
<!-- 前后切换组件 -->
<script setup lang="ts">
const props = defineProps({
// 是否显示
show: {
type: Boolean,
default: true,
},
// 底部距离 rpx
bottom: {
type: Number,
default: 0,
},
})
const emits = defineEmits(['register', 'prev', 'next'])
const height = computed(() => `calc(50% - 60rpx${data.bottom ? ` - ${data.bottom / 2}rpx` : ''})`)
const data = reactive({
show: props.show,
bottom: props.bottom,
prev: () => {},
next: () => {},
})
function toggleShow(show?: boolean) {
data.show = show ?? !data.show
}
function setProps(value: Partial<typeof props>) {
Object.assign(data, value)
}
function getProp(key: keyof typeof props) {
return data[key]
}
function onPrev() {
data.prev?.()
emits('prev')
}
function onNext() {
data.next?.()
emits('next')
}
emits('register', {
setProps,
getProp,
toggleShow,
prev: onPrev,
next: onNext,
})
</script>
<template>
<view class="wrap switch-control" v-show="data.show">
<view class="flex-center prev" @tap="onPrev">
<Icon class="icon" icon="ic-baseline-arrow-back-ios" size="50" color="white" />
</view>
<view class="flex-center next" @tap="onNext">
<Icon class="icon" icon="ic-baseline-arrow-forward-ios" size="50" color="white" />
</view>
</view>
</template>
<style lang="scss" scoped>
@use '../../common.scss' as *;
.switch-control {
> * {
@include animate();
width: 60rpx;
height: 120rpx;
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
top: v-bind(height);
z-index: 99;
}
.prev {
left: 0;
border-radius: 0 15rpx 15rpx 0;
.icon {
position: relative;
left: 12rpx;
}
}
.next {
right: 0;
border-radius: 15rpx 0 0 15rpx;
}
}
</style>
src/components/Map/Widgets/Switch/src/hook.ts 0 → 100644
import { registerWidgetFactory, unpackWidgetInstance } from '../../utils'
import type { SwitchControlInstance, SwitchControlProps } from './types'
// 组件名称
export const name = 'SwitchControlWidget'
/**
* 前后切换组件响应式 Hook
* @param props 组件参数
* @returns 组件响应式数据
*/
export function useSwitchWidget<T extends SwitchControlInstance, P extends SwitchControlProps>(
props: P,
): [(instance: T) => void, SwitchControlInstance] {
const instanceRef = ref<T>()
const register = registerWidgetFactory(instanceRef, props)
const { get, ...fns } = unpackWidgetInstance(instanceRef, name)
return [
register,
{
...fns,
prev: () => get()?.prev(),
next: () => get()?.next(),
},
]
}
src/components/Map/Widgets/Switch/src/types.ts 0 → 100644
import type { BasicWidgetInstance, BasicWidgetProps } from '../../utils'
export interface SwitchControlProps extends BasicWidgetProps {
// 底部距离 rpx
bottom?: number
// 上一个
prev?: () => void
// 下一个
next?: () => void
}
export interface SwitchControlInstance extends BasicWidgetInstance<SwitchControlProps> {
/**
* 手动调用上一个
*/
prev: () => void
/**
* 手动调用下一个
*/
next: () => void
}
src/components/Map/Widgets/TimeBar/index.ts 0 → 100644
export type * from './src/types'
export * from './src/hook'
export { default as TimeBarWidget } from './src/TimeBar.vue'
/**
* 时间栏组件
*
* 说明: 用于页面顶部的时间选择和过滤
*
* 可以应用到的一些模块:（基于已有蓝湖设计稿评估，仅供参考）
* 所有需要用到时间轴的场景，实况、预报以及部分非地图的内页，均可以实现适配
*
*/
src/components/Map/Widgets/TimeBar/src/hook.ts 0 → 100644
import type { Dayjs } from 'dayjs'
import { registerWidgetFactory, unpackWidgetInstance } from '../../utils'
import type { TimeBarInstance, TimeBarProps } from './types'
// 组件名称
export const name = 'TimeBarWidget'
/**
* 顶部时间栏组件响应式 Hook
* @param props 组件参数
* @returns 组件响应式数据
*/
export function useTimeBarWidget<T extends TimeBarInstance, P extends TimeBarProps>(
props: P,
): [(instance: T) => void, TimeBarInstance] {
const instanceRef = ref<T>()
const register = registerWidgetFactory(instanceRef, props)
const { get, ...fns } = unpackWidgetInstance(instanceRef, name)
return [
register,
{
...fns,
getTime: () => get()?.getTime(),
setTime: (time: Dayjs[], mode: boolean) => get()?.setTime(time, mode),
getCheckedOption: () => get()?.getCheckedOption(),
setCheckedOption: (index: number) => get()?.setCheckedOption(index),
getTimeBarValue: () => get()?.getTimeBarValue(),
setHourRange: (hourRange: Array<string | number> | string) => get()?.setHourRange(hourRange),
setMinuteRange: (minuteRange: Array<string | number> | string) => get()?.setMinuteRange(minuteRange),
},
]
}
/**
* 格式化时间
* @param time 时间
* @param format 格式化
* @returns 格式化后的时间，如果时间为空则返回空字符串
*/
export function formatTime(time: Dayjs, format = 'YYYY-MM-DD HH:mm:ss') {
return time?.format(format) ?? ''
}
export function isAfter(time: Dayjs, compare: Dayjs) {
return time && compare && time.isAfter(compare)
}
export function isBefore(time: Dayjs, compare: Dayjs) {
return time && compare && time.isBefore(compare)
}
export function isAfterAndEqual(time: Dayjs, compare: Dayjs) {
return time && compare && (time.isAfter(compare) || time.isSame(compare))
}
export function isBeforeAndEqual(time: Dayjs, compare: Dayjs) {
return time && compare && (time.isBefore(compare) || time.isSame(compare))
}
/**
* 根据 type 属性返回对应的格式化字符串
* @param type fui-date-picker 组件的 type 属性
* @returns 根据 type 属性返回对应的格式化字符串
*/
export function getFormatByType(type: number) {
switch (type) {
case 1:
return 'YYYY'
case 2:
return 'YYYY-MM'
case 3:
return 'YYYY-MM-DD'
case 4:
return 'YYYY-MM-DD HH:00:00'
case 5:
return 'YYYY-MM-DD HH:mm:00'
case 6:
return 'YYYY-MM-DD HH:mm:ss'
default:
return 'YYYY-MM-DD HH:mm:ss'
}
}
src/components/Map/Widgets/TimeBar/src/types.ts 0 → 100644
import type { Dayjs } from 'dayjs'
import type { BasicWidgetInstance, BasicWidgetProps } from '../../utils'
/**
* 对应 first-ui datePicker 组件 type 参数
*/
type FirstUIDatePickerType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
export interface TimeBarChangeEvent {
value: Dayjs[]
option?: TimeBarLabel['options'][0]
}
export interface TimeBarLabel {
text?: string
breforeIcon?: boolean
afterIcon?: boolean
options?: {
text?: string
value?: string
checked?: boolean
format?: string
timeType?: FirstUIDatePickerType
}[]
onClick?: () => void
onChange?: (e: TimeBarChangeEvent) => void
}
export interface TimeBarTime {
type?: 'single' | 'range'
timeType?: FirstUIDatePickerType
format?: string
value?: Dayjs[]
onChange?: (e: TimeBarChangeEvent) => void
hourRange?: Array<number | string> | string
minuteRange?: Array<number | string> | string
}
export interface TimeBarButton {
/**
* 图标，仅支持 fui-icon name
*/
icon?: string
label: string
onClick?: (e: { index: number; label: string }, time: TimeBarChangeEvent) => void
}
export interface TimeBarProps extends BasicWidgetProps {
/**
* 是否只读
* @default false
*/
readonly?: boolean
/**
* 对齐方式
* @default left
*/
align?: 'left' | 'center' | 'right'
/**
* 标题
* @default { text: '时间' }
*/
label?: TimeBarLabel
/**
* 时间
*/
time?: TimeBarTime
/**
* 最小时间
*/
minTime?: Dayjs
/**
* 最大时间
*/
maxTime?: Dayjs
/**
* 扩展按钮
*/
buttons?: TimeBarButton[]
}
export interface TimeBarInstance extends BasicWidgetInstance<TimeBarProps> {
/**
* 获取时间
* @returns 时间
*/
getTime: () => Dayjs[]
/**
* 设置时间
* @param time 时间
*/
setTime: (time: Dayjs[], mode?: boolean) => void
/**
* 获取选中的选项
* @returns 选中的选项
*/
getCheckedOption: () => TimeBarLabel['options'][0]
/**
* 设置选中的选项
* @param index 选项索引
*/
setCheckedOption: (index: number) => void
/**
* 获取时间栏的值
* @returns 时间栏的值
*/
getTimeBarValue: () => TimeBarChangeEvent
/**
* 设置小时可选范围
* @param hourRange
* @returns
*/
setHourRange: (hourRange: Array<number | string> | string) => void
/**
* 设置分钟可选范围
* @param minuteRange
* @returns
*/
setMinuteRange: (minuteRange: Array<number | string> | string) => void
}
src/components/Map/Widgets/ToolBox/index.ts 0 → 100644
export type * from './src/types'
export * from './src/hook'
export { default as ToolBoxWidget } from './src/ToolBox.vue'
/**
* 工具箱组件
*
* 说明: 用于展示地图上的右侧的工具箱，支持的组件有: Select、Filter、Button 之类的实现
*
* 可以应用到的一些模块:（基于已有蓝湖设计稿评估，仅供参考）
* 所有需要用到工具箱的场景，实况、预报，以及部分需要使用 AffixFilter 的场景，也可以考虑并入到工具箱中
*
*/
src/components/Map/Widgets/ToolBox/src/hook.ts 0 → 100644
import { getBooleanOrDefault, registerWidgetFactory, unpackWidgetInstance } from '../../utils'
import type { ToolBoxInstance, ToolBoxProps } from './types'
// 组件名称
export const name = 'ToolBoxWidget'
/**
* 左侧工具盒子组件响应式 Hook
* @param props 组件参数
* @returns 组件响应式数据
*/
export function useToolBoxWidget<T extends ToolBoxInstance, P extends ToolBoxProps>(
props: P,
): [(instance: T) => void, ToolBoxInstance] {
const instanceRef = ref<T>()
const register = registerWidgetFactory(instanceRef, props)
const { get, ...fns } = unpackWidgetInstance(instanceRef, name)
return [
register,
{
...fns,
toggleExpand: (expand?: boolean) => get()?.toggleExpand(getBooleanOrDefault(expand)),
},
]
}
src/components/Map/Widgets/ToolBox/src/types.ts 0 → 100644
import type { BasicWidgetInstance, BasicWidgetProps } from '../../utils'
export interface ToolBoxButtonHandleEvent {
// 事件类型
type: 'click' | 'change'
// 事件名称
name: string
// 事件值
value?: string | string[] | { text: string; value: string } | { text: string; value: string }[]
}
export interface ToolBoxButton {
// 按钮类型
type: 'select' | 'button' | 'filter'
// 按钮名称
name: string
// 按钮图标
icon?: string
// 按钮文字颜色
color?: string
// 按钮是否禁用
disabled?: boolean
// select 类型按钮选项
options?: {
id?: string
// 选项名称
text: string
// 选项值
value: string
// 是否选中
checked?: boolean
// 是否禁用
disabled?: boolean
}[]
// select 类型下是否支持多选
multiple?: boolean
// 按钮事件
handle?: (e: ToolBoxButtonHandleEvent) => void
// 按钮值
value?: string | string[]
// filter 类型的结果
result?: string | string[]
}
export interface ToolBoxButtonGroup {
// 标识
key: string
// 对齐方向
align?: 'top' | 'bottom'
// 按钮列表
buttons: ToolBoxButton[]
}
export interface ToolBoxProps extends BasicWidgetProps {
/**
* 是否展开
* @default true
*/
expand?: boolean
/**
* 是否显示是否展开按钮
* @default true
*/
showExpandButton?: boolean
/**
* 顶部距离 rpx
* @default 0
*/
top?: number
/**
* 底部距离 rpx
* @default 0
*/
bottom?: number
/**
* 底部内边距 rpx
* @default 0
*/
bottomPadding?: number
/**
* 工具集
*/
tools?: ToolBoxButtonGroup[]
}
export interface ToolBoxInstance extends BasicWidgetInstance<ToolBoxProps> {
/**
* 展开或收起工具箱
* @param expand 是否展开
*/
toggleExpand: (expand?: boolean) => void
}
src/components/Map/Widgets/common.scss 0 → 100644
@mixin animate() {
transition: all 0.35s;
}
src/components/Map/Widgets/utils.ts 0 → 100644
import { isBoolean } from 'lodash-es'
import { isProdMode } from '@/utils/env'
export interface BasicWidgetProps {
/**
* 是否显示
* @default true
*/
show?: boolean
}
export interface BasicWidgetInstance<T extends BasicWidgetProps = BasicWidgetProps> {
/**
* 设置小部件属性
* @param props 小部件属性
*/
setProps: (props: Partial<T>) => void
/**
* 获取小部件属性
* @param key 属性名称
* @returns 属性值
*/
getProp: <K extends keyof T>(key: K) => T[K]
/**
* 切换显示状态
* @param show 是否显示，强制指定显示状态
*/
toggleShow: (show?: boolean) => void
}
/**
* 获取 Boolean 值或默认值
* @param value Boolean 值
* @param def 默认值
* @returns 值或默认值
*/
export function getBooleanOrDefault(value: any, def = null): boolean {
return isBoolean(value) ? value : def
}
/**
* 注册组件工厂
* @param instanceRef 组件实例 Ref
* @param props 组件属性
* @param callback 回调函数
*/
export function registerWidgetFactory<T extends BasicWidgetInstance<P>, P>(
instanceRef: Ref<Nullable<T>>,
props: P,
callback?: (instance: T) => void,
): (instance: T) => void {
function register(instance: T) {
if (isProdMode()) {
if (instance === unref(instanceRef)) {
return
}
onUnmounted(() => {
instanceRef.value = null
})
}
instanceRef.value = instance
props && instance?.setProps(props)
callback && callback(instance)
}
return register
}
/**
* 获取组件实例
* @param instanceRef 组件实例 Ref
* @param name 组件名称
* @returns 组件实例
*/
export function getWidgetInstance<T extends BasicWidgetInstance>(instanceRef: Ref<Nullable<T>>, name?: string): T {
const instance = unref(instanceRef)
if (!instance) {
console.warn(`The ${name || 'widget'} instance has not been obtained`)
}
return instance as T
}
/**
* 获取基础组件实例函数
* @param instanceRef 组件实例 Ref
* @param name 组件名称
* @returns 组件实例函数
* @example
* ```ts
* const { get, setProps, toggleShow } = unpackWidgetInstance<BasicWidgetInstance, BasicWidgetProps>(instanceRef, 'basic widget')
* ```
*/
export function unpackWidgetInstance<T extends BasicWidgetInstance, P extends BasicWidgetProps>(
instanceRef: Ref<Nullable<T>>,
name?: string,
) {
const get = () => getWidgetInstance(instanceRef, name)
return {
get,
setProps: (props: Partial<P>) => get()?.setProps(props),
// @ts-expect-error
getProp: <K extends keyof P>(key: K) => get()?.getProp(key),
toggleShow: (show?: boolean) => get()?.toggleShow(getBooleanOrDefault(show)),
} as T & { get: () => T }
}
/**
* css calc 加法计算函数
* @param values rpx 数值
* @returns css calc 函数或 rpx 数值
*/
export function cssAdditionCalc(...values: number[]): string {
const result = values
.filter((item) => item)
.map((item) => `${item}rpx`)
.join(' + ')
if (result.includes('+')) {
return `calc(${result})`
} else {
return result
}
}
src/components/Map/types.ts 0 → 100644
import type { Dayjs } from 'dayjs'
export interface BasicMapPage {
/**
* 页面 ID，用于区分不同页面的数据
*/
id?: string
/**
* 页面是否完成初始化（默认情况下，地图加载完成，请求到第一轮带有最新时间标识的结果时，标记为初始化完成）
*/
init: boolean
/**
* 页面正在请求的数据源数量，由于 setGeoJSONSourceForRequest 的异步特性，需要记录当前正在请求的数据源数量，当所有数据源请求完成时，隐藏 Loading
*/
requests?: number
/**
* 当前请求到的数据最新时间
*/
latest?: Dayjs
}
src/pages.json
......@@ -443,6 +443,30 @@
}
}
},
{
"path": "pages/nongchang/detail/index",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#5DB66F",
"navigationBarTextStyle": "white",
"backgroundColorBottom": "#F2F2F2",
"app-plus": {
"titleNView": {
"titleAlign": "left",
"buttons": [
{
"text": "+ 添加基地",
"fontSrc": "/static/uni.ttf",
"color": "#fff",
"fontSize": "26rpx",
"width": "auto"
}
]
}
}
}
},
// === AI 聊天助手 ===
{
"path": "pages/common/chat/index",
......
src/pages/nongchang/detail/components/PlayWidget.vue 0 → 100644
<!-- 天气数据 -->
<script setup lang="ts">
//
</script>
<template>
<view class="play-wrap">
<!-- -->
<view class="play-icon">
<image class="w-60 h-60" src="/static/images/codefun/data-play.png" mode="scaleToFill" />
</view>
</view>
</template>
<style scoped lang="scss">
.play-wrap {
width: calc(100% - 20rpx);
margin: 0 auto;
border-radius: 20rpx;
}
</style>
src/pages/nongchang/detail/config.ts 0 → 100644
import type { BasicMapPage } from '@/components/Map/types'
export interface Page extends BasicMapPage {
/**
* 接口查询参数
*/
query?: {
/**
* 注入的变量，请求时不会传递，仅用于注入。
* 在 setGeoJSONSourceForRequest 的 handler 中可以实现替换字符串模板的功能。
*/
inject?: Recordable
}
/**
* 过滤条件
*/
filter?: Recordable
}
src/pages/nongchang/detail/index.vue 0 → 100644
<!-- 农场详情 -->
<script setup lang="ts">
import * as turf from '@turf/turf'
import type { Page } from './config'
import PlayWidget from './components/PlayWidget.vue'
import {
addDefaultGeoJSONSource,
addDefaultSplotLayer,
addDefaultSymbolLayer,
useMapbox,
} from '@/components/Map/Mapbox/hook'
import { ToolBoxWidget, useToolBoxWidget } from '@/components/Map/Widgets/ToolBox'
// 页面参数
const page = reactive<Page>({
id: 'example-mapbox',
init: false,
requests: 0,
latest: null,
query: {},
})
const model = reactive({
id: '',
name: '',
lonlat: '',
address: '',
description: '',
// 地块、位置信息 GeoJSON
plots: [],
// 设备信息
devices: [],
})
onLoad((options) => {
console.log('页面参数', options)
model.id = options.id
model.name = decodeURIComponent(options.name)
uni.setNavigationBarTitle({
title: decodeURIComponent(options.name),
})
})
// 地图组件
const center: [number, number] = [111.024108, 29.554847]
const [registerMap, map] = useMapbox({
style: { center, zoom: 15 },
onLoaded: (data) => {
console.log('✨✨✨ Map Loaded', data)
// 模拟数据
model.lonlat = '111.024108, 29.554847'
model.address = '湖南省 张家界市 慈利县 三淹桥村 村委会'
model.description = '详情信息说明'
// 渲染地块数据
model.plots = [
turf.polygon(
[
[
[111.0235, 29.5562],
[111.0255, 29.5562],
[111.0255, 29.5558],
[111.0235, 29.5558],
[111.0235, 29.5562],
],
],
{
color: 'yellow',
name: '基地 A',
popup: `{{name}}`,
},
),
turf.polygon(
[
[
[111.0225, 29.5565],
[111.0238, 29.5568],
[111.023, 29.5555],
[111.022, 29.5558],
[111.0225, 29.5565],
],
],
{
color: 'red',
name: '基地 B',
popup: `{{name}}`,
},
),
turf.polygon(
[
[
[111.0258, 29.555],
[111.0262, 29.5542],
[111.0252, 29.554],
[111.0258, 29.555],
],
],
{
color: 'blue',
name: '基地 C',
popup: `{{name}}`,
},
),
]
addDefaultGeoJSONSource(map, `${page.id}-plot`, model.plots)
addDefaultSplotLayer(map, `${page.id}-plot`, {
paint: {
'fill-opacity': 0.2,
'fill-outline-color': ['get', 'color'],
},
})
map.addLayer({
type: 'line',
id: `${page.id}-plot-line`,
source: `${page.id}-plot`,
layout: {
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-color': ['get', 'color'],
'line-width': 2,
},
})
// 渲染设备数据
model.devices = [
turf.point([111.024108, 29.554847], {
name: '设备1',
description: '设备1描述',
icon: 'GD',
popup: `{{name}}`,
}),
turf.point([111.023139, 29.55539], {
name: '设备2',
description: '设备2描述',
icon: 'JCD',
popup: `{{name}}`,
}),
turf.point([111.024989, 29.555435], {
name: '设备3',
description: '设备3描述',
icon: 'BZ',
popup: `{{name}}`,
}),
]
addDefaultGeoJSONSource(map, `${page.id}-text`, model.devices)
addDefaultSymbolLayer(map, `${page.id}-text`, {
layout: {
'text-field': '',
'icon-image': ['get', 'icon'],
'icon-size': 1,
},
})
},
onSourceRequestHandle: () => {
page.requests--
if (page.requests === 0) {
Message.hideLoading()
}
},
onSourceRequestErrorHandle: () => {
Message.hideLoading()
},
})
// 左侧工具栏小部件
const [registerToolBoxWidget] = useToolBoxWidget({
show: true,
expand: true,
showExpandButton: false,
top: -90,
tools: [
{
key: 'action',
align: 'top',
buttons: [
{
name: '设备',
color: '#75c849',
icon: '/static/images/codefun/device.active.png',
type: 'button',
handle: () => {
Message.alert('【设备】功能正在努力开发中...', '')
},
},
],
},
{
key: 'action',
align: 'top',
buttons: [
{
name: '降雨',
color: '#75c849',
icon: '/static/images/codefun/rain.png',
type: 'button',
handle: () => {
Message.alert('【降雨】功能正在努力开发中...', '')
},
},
{
name: '温度',
icon: '/static/images/codefun/temp.png',
type: 'button',
handle: () => {
Message.alert('【温度】功能正在努力开发中...', '')
},
},
{
name: '强对流',
icon: '/static/images/codefun/severe.png',
type: 'button',
handle: () => {
Message.alert('【强对流】功能正在努力开发中...', '')
},
},
{
name: '大风',
icon: '/static/images/codefun/wind.png',
type: 'button',
handle: () => {
Message.alert('【大风】功能正在努力开发中...', '')
},
},
{
name: '其他',
icon: '/static/images/codefun/other.png',
type: 'button',
handle: () => {
Message.alert('【其他】功能正在努力开发中...', '')
},
},
],
},
],
})
</script>
<template>
<view class="page h-100vh bg-white">
<!-- 地图组件 -->
<!-- <view class="h-730 overflow-hidden map-box"> -->
<view class="h-full overflow-hidden map-box">
<!-- 地图组件 -->
<Mapbox @register="registerMap" />
</view>
<!-- 地图上方所有小部件 -->
<view class="widgets">
<!-- 左侧工具栏小部件 -->
<ToolBoxWidget @register="registerToolBoxWidget" />
<!-- 播放数据小部件 -->
<view class="play-wrap hidden">
<PlayWidget />
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
//
.page {
.map-box {
// #ifdef APP-PLUS
position: relative;
top: 0;
// #endif
// #ifdef H5
position: relative;
top: 0;
// #endif
}
}
</style>
src/pages/nongchang/nongchang.vue
......@@ -51,6 +51,7 @@
// 农场信息
farmInfo: {
id: 1,
image: '/static/images/codefun/89a5811c35ff41e6a039c04e77d7380a.png',
name: '张家界水稻农场',
area: '32.5亩',
......@@ -456,6 +457,10 @@
}
}
function toDetail(item: Recordable) {
Navigate.to(`/pages/nongchang/detail/index?id=${item.id}&name=${encodeURIComponent(item.name)}`)
}
onHide(() => {
// 停止所有其他视频的播放（只暂停，不重置位置）
pageData.agricultureClass.videoList.forEach((_, index) => {
......@@ -496,7 +501,7 @@
</view>
</view>
<view class="codefun-flex-col codefun-relative group_6">
<view class="codefun-flex-row section_4 flex-row">
<view class="codefun-flex-row section_4 flex-row" @click="toDetail(pageData.farmInfo)">
<view class="w-200rpx h-200rpx">
<image class="codefun-self-center image_7 w-full h-full" :src="pageData.farmInfo.image" />
</view>
......
src/static/js/echarts/5.4.3/echarts.min.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/static/js/mapbox-gl-js/2.15.0/mapbox-gl.extra.css 0 → 100644
.mapboxgl-popup-tip {
position: relative;
}
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
left: -1px;
}
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
right: -1px;
}
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
bottom: -1px;
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
top: -1px;
}
.mapboxgl-popup-content {
box-shadow: 0 1px 10px #999 !important;
z-index: 0;
}
.mapboxgl-popup-content .mapboxgl-custom-popup {
position: relative;
}
.mapboxgl-custom-popup .popup-title {
font-weight: bold;
}
.mapboxgl-ctrl-logo {
display: none !important;
}
.mapboxgl-ctrl-bottom-left {
display: flex;
bottom: 0;
left: 2px;
}
.mapboxgl-ctrl-lnglat {
background: rgb(0 0 0 / 40%);
color: white;
line-height: 2em;
padding: 0 10px;
box-shadow: 0 0 0 2px rgba(0,0,0,.1);
border-radius: 4px;
}
.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"%3E%3Cpath fill="currentColor" d="M3.75 3a.75.75 0 0 0-.75.75V5.5a.5.5 0 0 1-1 0V3.75C2 2.784 2.784 2 3.75 2H5.5a.5.5 0 0 1 0 1H3.75ZM10 2.5a.5.5 0 0 1 .5-.5h1.75c.966 0 1.75.784 1.75 1.75V5.5a.5.5 0 0 1-1 0V3.75a.75.75 0 0 0-.75-.75H10.5a.5.5 0 0 1-.5-.5ZM2.5 10a.5.5 0 0 1 .5.5v1.75c0 .414.336.75.75.75H5.5a.5.5 0 0 1 0 1H3.75A1.75 1.75 0 0 1 2 12.25V10.5a.5.5 0 0 1 .5-.5Zm11 0a.5.5 0 0 1 .5.5v1.75A1.75 1.75 0 0 1 12.25 14H10.5a.5.5 0 0 1 0-1h1.75a.75.75 0 0 0 .75-.75V10.5a.5.5 0 0 1 .5-.5Z"%2F%3E%3C%2Fsvg%3E') !important;
}
.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"%3E%3Cpath fill="currentColor" d="M11 4a1 1 0 0 0 1 1h1.5a.5.5 0 0 1 0 1H12a2 2 0 0 1-2-2V2.5a.5.5 0 0 1 1 0V4Zm0 8a1 1 0 0 1 1-1h1.5a.5.5 0 0 0 0-1H12a2 2 0 0 0-2 2v1.5a.5.5 0 0 0 1 0V12Zm-7-1a1 1 0 0 1 1 1v1.5a.5.5 0 0 0 1 0V12a2 2 0 0 0-2-2H2.5a.5.5 0 0 0 0 1H4Zm1-7a1 1 0 0 1-1 1H2.5a.5.5 0 0 0 0 1H4a2 2 0 0 0 2-2V2.5a.5.5 0 0 0-1 0V4Z"%2F%3E%3C%2Fsvg%3E') !important;
}
.mapboxgl-ctrl .mapboxgl-ctrl-reset-button .mapboxgl-ctrl-icon {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M12 16c1.671 0 3-1.331 3-3s-1.329-3-3-3s-3 1.331-3 3s1.329 3 3 3z"%2F%3E%3Cpath fill="currentColor" d="M20.817 11.186a8.94 8.94 0 0 0-1.355-3.219a9.053 9.053 0 0 0-2.43-2.43a8.95 8.95 0 0 0-3.219-1.355a9.028 9.028 0 0 0-1.838-.18V2L8 5l3.975 3V6.002c.484-.002.968.044 1.435.14a6.961 6.961 0 0 1 2.502 1.053a7.005 7.005 0 0 1 1.892 1.892A6.967 6.967 0 0 1 19 13a7.032 7.032 0 0 1-.55 2.725a7.11 7.11 0 0 1-.644 1.188a7.2 7.2 0 0 1-.858 1.039a7.028 7.028 0 0 1-3.536 1.907a7.13 7.13 0 0 1-2.822 0a6.961 6.961 0 0 1-2.503-1.054a7.002 7.002 0 0 1-1.89-1.89A6.996 6.996 0 0 1 5 13H3a9.02 9.02 0 0 0 1.539 5.034a9.096 9.096 0 0 0 2.428 2.428A8.95 8.95 0 0 0 12 22a9.09 9.09 0 0 0 1.814-.183a9.014 9.014 0 0 0 3.218-1.355a8.886 8.886 0 0 0 1.331-1.099a9.228 9.228 0 0 0 1.1-1.332A8.952 8.952 0 0 0 21 13a9.09 9.09 0 0 0-.183-1.814z"%2F%3E%3C%2Fsvg%3E') !important;
}
.mapboxgl-ctrl .mapboxgl-ctrl-layer-button .mapboxgl-ctrl-icon {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="m13.387 3.425l6.365 4.243a1 1 0 0 1 0 1.664l-6.365 4.244a2.5 2.5 0 0 1-2.774 0L4.248 9.332a1 1 0 0 1 0-1.664l6.365-4.243a2.5 2.5 0 0 1 2.774 0Zm6.639 8.767a2.002 2.002 0 0 1-.577.598l-6.05 4.084a2.5 2.5 0 0 1-2.798 0l-6.05-4.084a2 2 0 0 1-.779-2.29l6.841 4.56a2.5 2.5 0 0 0 2.613.098l.16-.098l6.841-4.56a1.996 1.996 0 0 1-.201 1.692Zm0 3.25a2.002 2.002 0 0 1-.577.598l-6.05 4.084a2.5 2.5 0 0 1-2.798 0l-6.05-4.084a2 2 0 0 1-.779-2.29l6.841 4.56a2.5 2.5 0 0 0 2.613.098l.16-.098l6.841-4.56a1.996 1.996 0 0 1-.201 1.692Z"%2F%3E%3C%2Fsvg%3E') !important;
}
.mapboxgl-ctrl button.-active svg {
color: #4264fb;
}
.mapboxgl-ctrl-layer-button {
z-index: 1;
}
.mapboxgl-ctrl-layer-wrap {
z-index: 100;
display: flex;
justify-items: center;
align-items: center;
position: absolute;
top: 0;
left: -220px;
visibility: hidden;
padding: 10px;
border-radius: 3px;
box-shadow: 0 0 3px #333;
background-color: #fff;
}
.mapboxgl-ctrl-layer {
width: 60px;
height: 60px;
display: flex;
justify-content: center;
border: 2px solid #fff;
position: relative;
}
.mapboxgl-ctrl-layer.active {
border-color: #3385ff;
}
.mapboxgl-ctrl-layer img {
width: 100%;
height: 100%;
}
.mapboxgl-ctrl-layer span {
display: inline-flex;
justify-content: center;
background-color: rgb(0 0 0 / 60%);
color: white;
position: absolute;
bottom: 0;
width: 100%;
}
.mapboxgl-ctrl-layer-button.-active .mapboxgl-ctrl-layer-wrap {
visibility: visible;
}
.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-bottom-right {
padding-bottom: 0;
/* stylelint-disable-next-line function-no-unknown */
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
transition: all 0.35s;
}
.mapboxgl-ctrl-attrib-inner {
display: inline-block !important;
vertical-align: middle;
line-height: 18px;
font-size: 12px;
font-family: -apple-system-font, BlinkMacSystemFont, 'Droid Sans', 'Noto Sans', 'PingFang SC', 'Heiti SC',
'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', SimSun, sans-serif;
color: rgba(0, 0, 0, 0.75);
text-decoration: none;
}
.mapboxgl-ctrl-attrib.mapboxgl-compact {
padding-right: 8px;
display: flex;
justify-content: center;
align-items: center;
}
.mapboxgl-ctrl-attrib-button {
position: initial;
}
/* Custom style */
.mapboxgl-popup-close-button {
display: none;
}
.mapboxgl-popup-content {
box-shadow: 0 1px 25px rgba(0, 0, 0, 0.2);
}
.mapboxgl-popup-content .custom-popup {
font-family: '微软雅黑';
position: relative;
}
.mapboxgl-popup-content .popup-row {
display: flex;
align-items: flex-start;
}
.mapboxgl-popup-content .popup-row.timing {
justify-content: center;
padding-top: 6px;
}
.mapboxgl-popup-content .popup-row.timing button {
background: #1890ff;
border: none;
padding: 4px 8px;
color: #fff;
border-radius: 5px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.mapboxgl-popup-content .popup-row.timing button .icon {
width: 14px;
height: 14px;
margin-right: 5px;
display: inline-block;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik00IDloNHYxMUg0em0xMiA0aDR2N2gtNHptLTYtOWg0djE2aC00eiIvPjwvc3ZnPg==');
}
.mapboxgl-popup-content .popup-chart-icon {
width: 14px;
height: 14px;
display: inline-block;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABrUlEQVQ4T2NkwAESspK2C0oIaTIw/P//4t7zh8sXLHPAppQRlwH5jcW3TLzNVUHypzYcvTS5ZaI+7Q0ozAwsVZZmyWRmZmJ6+4NdSNLVjZeNg414F9QWBW9oTBX2Bzn15LXvDLu+ajEoaSmTb8C2D2oMavrqDGfWHbqt/uLJtL///v9advPV/OPHj3+HhQdKIKK7AGbA7VV7Gfx/v2X49o+BYcOLn/N7V25OIsmAGyv2MuT/e8UgxMfBUHnj28ruFRsjSDYg798rBmGaGNDe3hLNysyS9/ffX7H3r+6LtKUy8cBiARYGIC/AXFDylO2LpLLam48fP7159PjRNMauzva7jvY2SidOnWG4f/cag4b8H4Z///8xvHjzk+HlLz4GIV4ehjf3njIYcbMwgNLEpR+sDEqamgw2VhYM69ZvusaYmpr6NcDPi4uJCWeqxpra//z5y7Bx87avjIWFhQ9UVVXlf/z4gStbYBXn5ORkuHjx4guQAddNTEw0QKq+fv3KwMrKCqY5ODgY7ty5g9NQkPyjR4/ugbxQJCAgkPj3719eUpzw+/fvn1++fFkAALdq+Ka65YhZAAAAAElFTkSuQmCC');
}
.mapboxgl-popup-content .popup-title {
font-weight: bold;
min-width: 3em;
}
.mapboxgl-popup-content .popup-title sub {
font-size: 10px;
font-weight: 100;
}
.mapboxgl-ctrl-attrib .mapboxgl-ctrl-attrib-inner {
color: #777;
display: inline !important;
}
.mapboxgl-ctrl-attrib {
padding: 2px 4px 2px 24px !important;
border-radius: 12px 3px 3px 12px !important;
}
src/static/js/mapbox-gl-js/2.15.0/mapbox-gl.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/static/js/mapbox-gl-js/README.md 0 → 100644
# 删除 Mapbox-GL-JS 的 Token 令牌校验，使用完整的离线版本
[参考链接](https://blog.csdn.net/Sakura1998gis/article/details/131707234)
如果升级了 js sdk，通过编辑 mapbox-gl.js 文件，搜索并修改以下代码：
```diff
- `_skuToken,this._requestManager._customAccessToken,(t=>{if(t&&(t.message===e.AUTH_ERR_MSG||401===t.status)`
+ `_skuToken,this._requestManager._customAccessToken,(t=>{if(t&&(false)`
```
src/utils/dom.ts 0 → 100644
export function appendStylesheet(id: string, href: string) {
return new Promise((resolve, reject) => {
const element = document.getElementById(id) as HTMLLinkElement
if (element && element.href === href) {
resolve(0)
return
}
const link = document.createElement('link')
link.id = id
link.rel = 'stylesheet'
link.href = href
link.onload = resolve
link.onerror = link.onabort = reject
document.head.appendChild(link)
})
}
export function appendScript(id: string, src: string) {
return new Promise((resolve, reject) => {
const element = document.getElementById(id) as HTMLScriptElement
if (element && element.src === src) {
resolve(0)
return
}
const script = document.createElement('script')
script.id = id
script.src = src
script.onload = resolve
script.onerror = script.onabort = reject
document.head.appendChild(script)
})
}
export function removeChild(id: string) {
const child = document.getElementById(id)
if (child) {
child.parentNode.removeChild(child)
}
}
types/components.d.ts
......@@ -7,6 +7,8 @@ export {}
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
AffixFilter: typeof import('./../src/components/Map/Widgets/AffixFilter/src/AffixFilter.vue')['default']
BottomBar: typeof import('./../src/components/Map/Widgets/BottomBar/src/BottomBar.vue')['default']
CacheImage: typeof import('./../src/components/CacheImage/index.vue')['default']
Empty: typeof import('./../src/components/Empty/index.vue')['default']
FDragItem: typeof import('./../src/components/FirstUI/fui-drag/f-drag-item.vue')['default']
......@@ -145,6 +147,13 @@ declare module 'vue' {
FuiWingBlank: typeof import('./../src/components/FirstUI/fui-wing-blank/fui-wing-blank.vue')['default']
Icon: typeof import('./../src/components/Icon/index.vue')['default']
IframeVideo: typeof import('./../src/components/IframeVideo/index.vue')['default']
Legend: typeof import('./../src/components/Map/Widgets/Legend/src/Legend.vue')['default']
Mapbox: typeof import('./../src/components/Map/Mapbox/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
Switch: typeof import('./../src/components/Map/Widgets/Switch/src/Switch.vue')['default']
ThumbnailPreview: typeof import('./../src/components/ThumbnailPreview/index.vue')['default']
TimeBar: typeof import('./../src/components/Map/Widgets/TimeBar/src/TimeBar.vue')['default']
ToolBox: typeof import('./../src/components/Map/Widgets/ToolBox/src/ToolBox.vue')['default']
}
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论