Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 68f1e0ea 作者: 方治民
操作

feat: 修改降水模块为演示预览，新增气温模块

上级 5e3c846a
正在显示 包含 572 行增加 和 2 行删除
src/components/Layout/Grid.vue
......@@ -18,6 +18,11 @@
// const getColor = (type: string) => colors[type]
function goRoute(nav: UniApp.NavigateToOptions) {
if (!nav) {
Message.alert('模块开发中，敬请期待！', '')
return
}
uni.navigateTo(nav)
}
......
src/pages.json
......@@ -66,11 +66,31 @@
"enableReachBottom": false
}
},
// 降水实况
// 降水监测
{
"path": "pages/business/monitor/rain/index",
"style": {
"navigationBarTitleText": "降水监测",
"navigationBarTitleText": "降水监测（演示）",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#1890FF",
"app-plus": {
"titleNView": {
"buttons": [
{
"type": "share",
"color": "white",
"width": "50px"
}
]
}
}
}
},
// 气温监测
{
"path": "pages/business/monitor/tem/index",
"style": {
"navigationBarTitleText": "气温监测",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#1890FF",
"app-plus": {
......
src/pages/business/monitor/rain/index.vue
<!-- 页面组件 -->
<!-- TODO -->
<!-- FIXED: 该组件仅用于演示目的，实际模块功能具体实现建议重新启用一个新页面来完成 -->
<script setup lang="ts">
import { defaultLegendConfig } from './config'
import { useShare } from '@/hooks/page/useShare'
......
src/pages/business/monitor/tem/config.ts 0 → 100644
// 页面通用配置信息或一些抽象方法
// 单色块图例配置
// export const defaultLegendConfig = {
// expand: false,
// title: '单位: mm',
// option: {
// blockStyle: {
// border: '1px solid #ccc',
// },
// items: [
// {
// color: '#FFFFFF',
// label: '0-0.1',
// },
// {
// color: '#A3F48A',
// label: '0.1-9.0',
// },
// {
// color: '#35AB02',
// label: '10-24.9',
// },
// {
// color: '#61B9F9',
// label: '25-49.9',
// },
// {
// color: '#0403FF',
// label: '50-99.9',
// },
// {
// color: '#FA02FA',
// label: '100-249.9',
// },
// {
// color: '#810042',
// label: '>=250',
// },
// ],
// },
// }
// 多色块图例配置
// export const defaultLegendConfig = {
// expand: true,
// title: '单位: mm',
// option: {
// blockStyle: {
// border: '1px solid #ccc',
// },
// items: [
// [
// {
// color: '#FFFFFF',
// label: '0-0.1',
// },
// {
// color: '#A3F48A',
// label: '0.1-9.0',
// },
// {
// color: '#35AB02',
// label: '10-24.9',
// },
// {
// color: '#61B9F9',
// label: '25-49.9',
// },
// {
// color: '#0403FF',
// label: '50-99.9',
// },
// {
// color: '#FA02FA',
// label: '100-249.9',
// },
// {
// color: '#810042',
// label: '>=250',
// },
// ],
// [
// {
// color: '#FFFFFF',
// label: '0-0.1',
// },
// {
// color: '#A3F48A',
// label: '0.1-9.0',
// },
// {
// color: '#35AB02',
// label: '10-24.9',
// },
// {
// color: '#61B9F9',
// label: '25-49.9',
// },
// {
// color: '#0403FF',
// label: '50-99.9',
// },
// {
// color: '#FA02FA',
// label: '100-249.9',
// },
// {
// color: '#810042',
// label: '>=250',
// },
// ],
// ],
// },
// }
// 单边图标图例
// export const defaultLegendConfig = {
// expand: true,
// title: '',
// option: {
// items: [
// {
// icon: '/static/icons/legend/ice-snow/snow.cover.png',
// label: '积雪',
// },
// {
// icon: '/static/icons/legend/ice-snow/wire.icing.png',
// label: '电线积冰',
// },
// {
// icon: '/static/icons/legend/ice-snow/glaze.png',
// label: '雨淞',
// },
// {
// icon: '/static/icons/legend/ice-snow/sleet.png',
// label: '雨夹雪',
// },
// {
// icon: '/static/icons/legend/ice-snow/snow.png',
// label: '雪',
// },
// ],
// },
// }
// 单边多图标图例
export const defaultLegendConfig = {
expand: true,
title: '',
option: {
labelStyle: {
width: '85rpx',
},
items: [
{
label: '闪电',
items: [
{
icon: '/static/icons/legend/strong-convection/lightning.png',
},
],
},
{
label: '冰雹\n(mm)',
items: [
{
icon: '/static/icons/legend/strong-convection/hail.0-5.png',
label: '0-5',
},
{
icon: '/static/icons/legend/strong-convection/hail.5-10.png',
label: '5-10',
},
{
icon: '/static/icons/legend/strong-convection/hail.10-20.png',
label: '10-20',
},
{
icon: '/static/icons/legend/strong-convection/hail.+20.png',
label: '>=20',
},
],
},
{
label: '大风\n(m/s)',
items: [
{
icon: '/static/icons/legend/strong-convection/wind.17-25.png',
label: '17-25',
},
{
icon: '/static/icons/legend/strong-convection/wind.25-30.png',
label: '25-30',
},
{
icon: '/static/icons/legend/strong-convection/wind.+30.png',
label: '>=30',
},
],
},
{
label: '强降水\n(mm)',
items: [
{
icon: '/static/icons/legend/strong-convection/rain.20-30.png',
label: '20-30',
},
{
icon: '/static/icons/legend/strong-convection/rain.30-50.png',
label: '30-50',
},
{
icon: '/static/icons/legend/strong-convection/rain.50-80.png',
label: '50-80',
},
{
icon: '/static/icons/legend/strong-convection/rain.+80.png',
label: '>=80',
},
],
},
],
},
}
src/pages/business/monitor/tem/index.vue 0 → 100644
<!-- 气温页面组件 -->
<script setup lang="ts">
import { defaultLegendConfig } from './config'
import { useShare } from '@/hooks/page/useShare'
import type { MapboxConfig } from '@/components/Map/Mapbox'
import { LegendWidget, useLegendWidget } from '@/components/Map/Widgets/Legend'
import { SwitchWidget, useSwitchWidget } from '@/components/Map/Widgets/Switch'
import { TimeBarWidget, formatTime, useTimeBarWidget } from '@/components/Map/Widgets/TimeBar'
import { ToolBoxWidget, useToolBoxWidget } from '@/components/Map/Widgets/ToolBox'
import { BottomBarWidget, useBottomBarWidget } from '@/components/Map/Widgets/BottomBar'
useShare()
// 页面参数
// const param = reactive({
// query: {},
// filter: {},
// })
// 地图配置
const config: MapboxConfig = reactive({
// 说明: 地图数据来源标注展示
attribution: {
text: '湖南省气象台',
// align: 'bottom-left',
},
style: {
// 说明: 根据每个页面的 widget 布局情况，可能需要适当调整地图的中心位置，让界面显示效果更好
center: [111.6, 26.170844],
},
})
// 顶部时间轴小部件
const [registerTimeBarWidget, { setTime, getTimeBarValue }] = useTimeBarWidget({
show: true,
align: 'left',
readonly: false,
label: {
options: [
{
text: '小时级',
value: 'hour',
format: 'M月D日H时',
timeType: 4,
checked: true,
},
{
text: '分钟级',
value: 'minute',
format: 'M月D日H时m分',
timeType: 5,
},
],
onChange: ({ option, value }) => {
console.log(
'[TimeBarWidget] ChangeOption',
option,
value.map((item) => formatTime(item)),
)
},
},
time: {
type: 'range',
timeType: 4,
format: 'M月D日H时',
onChange: ({ option, value }) => {
console.log(
'[TimeBarWidget] ChangeTime',
option,
value.map((item) => formatTime(item)),
)
},
},
buttons: [
{
icon: 'order',
label: '列表',
onClick: (e, { option, value }) => {
console.log(
'[TimeBarWidget] Button Click',
e,
option,
value.map((item) => formatTime(item)),
)
},
},
],
})
// 左侧工具栏小部件
const [registerToolBoxWidget, { setProps: setToolBoxProps }] = useToolBoxWidget({
show: true,
expand: true,
showExpandButton: true,
// 说明: 如果底部使用 bottom-left attribution 则需要加上 65rpx，默认显示在右侧，不会冲突
bottomPadding: '65rpx',
tools: [
{
key: 'filter',
align: 'top',
buttons: [
{
name: '过滤',
icon: '/static/icons/toolbox/filter.png',
type: 'filter',
handle: () => {},
},
{
name: '图层',
icon: '/static/icons/toolbox/menu.png',
type: 'select',
multiple: true,
options: [
{
text: '色斑',
value: 'contour',
checked: true,
},
{
text: '数值',
value: 'text',
},
],
handle: () => {},
},
{
name: '区域',
icon: '/static/icons/toolbox/location.png',
type: 'select',
multiple: false,
options: [
{
text: '湖南省',
value: '430000',
checked: true,
},
{
text: '长沙市',
value: '430100',
},
{
text: '湘潭市',
value: '430300',
},
],
handle: () => {},
},
{
name: '站点',
icon: '/static/icons/toolbox/station.png',
type: 'select',
multiple: false,
handle: () => {},
},
],
},
{
key: 'action',
align: 'bottom',
buttons: [
{
name: '要素',
icon: '/static/icons/toolbox/element.png',
type: 'select',
multiple: true,
handle: () => {},
},
{
name: '排名',
icon: '/static/icons/toolbox/rank.png',
type: 'button',
handle: () => {},
},
{
name: '累加',
icon: '/static/icons/toolbox/cumulative.png',
type: 'button',
disabled: true,
handle: () => {},
},
],
},
{
key: 'desc',
align: 'bottom',
buttons: [
{
name: '综述',
icon: '/static/icons/toolbox/describe.png',
type: 'button',
handle: () => {},
},
],
},
],
})
// 前后切换小部件
const [registerSwitchWidget, { setProps: setSwitchProps }] = useSwitchWidget({
show: true,
prev: () => {
const { option, value } = getTimeBarValue()
console.log(
'[SwitchControlWidget] prev',
option,
value.map((item) => formatTime(item)),
)
setTime(value.map((item) => item.subtract(1, 'hours')))
Message.toast('prev')
},
next: () => Message.toast('next'),
})
// 图例小部件
const [registerLegendWidget, { setProps: setLegendProps }] = useLegendWidget({
show: true,
expand: true,
title: defaultLegendConfig.title,
option: defaultLegendConfig.option,
})
// 底部 Bar 小部件
const [registerBottomBarWidget, { height }] = useBottomBarWidget({
show: true,
expand: true,
// expandTitle: '工具栏',
// showExpandBorder: true,
showExpandButton: true,
height: 150,
maxHeight: 240,
})
watch(
() => height.value,
(value) => {
console.log('[useBottomBarWidget] height', value)
setSwitchProps({ bottom: value })
setLegendProps({ bottom: value })
setToolBoxProps({ bottom: value })
},
)
</script>
<template>
<view class="page h-100vh bg-white">
<!-- 地图组件 -->
<Mapbox :config="config" />
<!-- 地图上方所有小部件 -->
<view class="widgets">
<!-- 时间栏小部件 -->
<TimeBarWidget @register="registerTimeBarWidget" />
<!-- 左侧工具栏小部件 -->
<ToolBoxWidget @register="registerToolBoxWidget" />
<!-- 前后切换小部件 -->
<SwitchWidget @register="registerSwitchWidget" />
<!-- 图例小部件 -->
<LegendWidget @register="registerLegendWidget" />
<!-- 底部 Bar 小部件 -->
<BottomBarWidget @register="registerBottomBarWidget">
<!-- 内容 Slot -->
<view class="flex-center c-gray">底部交互控件/展示内容</view>
</BottomBarWidget>
</view>
</view>
</template>
<style lang="scss" scoped>
// .widgets {
// 覆盖图例小部件的默认样式
// :deep(.legend) {
// 现已调整为通过 watch 监听 height 值变化，动态设置底部 Bar 小部件的 bottom 值，这样方便由组件内部决定样式变化
// bottom: calc(30rpx + v-bind(height));
// 如果底部使用 bottom-left attribution 则需要加上 80rpx，默认显示在右侧，不会冲突
// bottom: calc(30rpx + 80rpx + v-bind(height));
// }
// 覆盖底部 Bar 小部件的默认样式
// :deep(.bottom-bar) {
// }
// 前后切换小部件
// :deep(.switch-control) {
// }
// }
.page {
// #ifdef H5
:deep(.mapboxgl-ctrl-bottom-right) {
bottom: calc(85rpx + v-bind(height));
}
:deep(.mapboxgl-ctrl-bottom-left) {
bottom: calc(85rpx + v-bind(height));
}
// #endif
// #ifdef APP-PLUS
:deep(.mapboxgl-ctrl-bottom-right) {
bottom: calc(5rpx + v-bind(height));
}
:deep(.mapboxgl-ctrl-bottom-left) {
bottom: calc(5rpx + v-bind(height));
}
// #endif
}
</style>
src/utils/const/Navigation.ts
......@@ -17,6 +17,9 @@ export const liveModules: navItemType[] = [
{
label: '气温监测',
value: 'tem-m',
navigate: {
url: '/pages/business/monitor/tem/index',
},
},
{
label: '大风监测',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论