Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 4aed7419 作者: test
操作

feat: 新增 v4 h5 版本 webview 页面适配

上级 5d6c8ed3
正在显示 包含 187 行增加 和 280 行删除
src/components/Layout/Grid.vue
<script setup lang="ts">
import { liveModules } from '/@/utils/const/Navigation'
import type { navItemType } from '/@/utils/const/Navigation'
import type { NavItemType } from '/@/utils/const/Navigation'
defineProps({
dataSouce: {
type: Array as PropType<navItemType[]>,
type: Array as PropType<NavItemType[]>,
default: () => liveModules,
},
})
......@@ -17,13 +17,21 @@
// }
// const getColor = (type: string) => colors[type]
function goRoute(nav: UniApp.NavigateToOptions) {
if (!nav) {
function goRoute(item: NavItemType) {
if (!item?.navigate?.url) {
Message.alert('模块开发中，敬请期待！', '')
return
}
uni.navigateTo(nav)
if (item.type === 'webview') {
uni.navigateTo({
url: `/pages/common/webview/index?title=${encodeURI(item.label)}&link=${encodeURIComponent(
item.navigate.url as string,
)}`,
})
} else {
uni.navigateTo(item.navigate)
}
}
const lastString = (string: string) => string.charAt(string.length - 1)
......@@ -33,12 +41,7 @@
<template>
<fui-grid :columns="4" class="mt-4 bg-#fff" :showBorder="false">
<fui-grid-item
v-for="(item, index) in dataSouce"
:key="index"
:highlight="false"
@click="goRoute(item.navigate)"
>
<fui-grid-item v-for="(item, index) in dataSouce" :key="index" :highlight="false" @click="goRoute(item)">
<view class="fui-grid__cell flex flex-col flex-center">
<!-- <image src="/static/uni-logo.png" class="fui-icon w50" mode="widthFix" /> -->
<!-- :color="getColor(lastString(item.value))" -->
......
src/pages.json
......@@ -3,7 +3,13 @@
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#FFFFFF",
"pageOrientation": "portrait" //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
"pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
"app-plus": {
"scrollIndicator": "none",
"titleNView": {
"titleSize": "20"
}
}
},
"pages": [
// pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
......@@ -106,6 +112,16 @@
}
}
},
// === Webview ===
{
"path": "pages/common/webview/index",
"style": {
"titleNView": true,
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#1890FF",
"enablePullDownRefresh": false
}
},
// === PDF 文件预览 ===
{
"path": "pages/common/viewer/pdf",
......
src/pages/business/monitor/tem/config.ts
// 页面通用配置信息或一些抽象方法
/**
* TODO: 色块图例配置，实际上应该和后端的色斑图，进行动态匹配，可以考虑由后端接口返回
*/
// 单色块图例配置
export const defaultLegendConfig = {
/**
* 小时气温图例配置
*/
export const hourTemLegendConfig = {
expand: false,
title: '单位: mm',
title: '单位: °C',
option: {
blockStyle: {
border: '1px solid #ccc',
},
items: [
{
color: '#FFFFFF',
label: '0-0.1',
color: '#800000',
label: '<44',
},
{
color: '#A3F48A',
label: '0.1-9.0',
color: '#960000',
},
{
color: '#35AB02',
label: '10-24.9',
color: '#AB0001',
label: '40',
},
{
color: '#61B9F9',
label: '25-49.9',
color: '#C80100',
},
{
color: '#0403FF',
label: '50-99.9',
color: '#E70000',
label: '36',
},
{
color: '#FA02FA',
label: '100-249.9',
color: '#FE371B',
},
{
color: '#810042',
label: '>=250',
color: '#FF4B25',
label: '32',
},
{
color: '#FF7300',
},
{
color: '#FF9A02',
label: '28',
},
{
color: '#FFC300',
},
{
color: '#FFE703',
label: '24',
},
{
color: '#FFFF04',
},
{
color: '#F5FF03',
label: '20',
},
{
color: '#DEFF00',
},
{
color: '#C5FF04',
label: '16',
},
{
color: '#B5FF00',
},
{
color: '#98FD0F',
label: '12',
},
{
color: '#8AFA2D',
},
{
color: '#72F806',
label: '8',
},
{
color: '#00FF73',
},
{
color: '#00FF94',
label: '4',
},
{
color: '#00FFB4',
},
{
color: '#00FFD6',
label: '0',
},
{
color: '#06FFF7',
},
{
color: '#00EBFF',
label: '-4',
},
{
color: '#00CBFF',
},
{
color: '#01A6FF',
label: '-8',
},
{
color: '#0085FF',
},
{
color: '#0365FF',
label: '-12',
},
],
},
}
// 多色块图例配置
// 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
<!-- 气温页面组件 -->
<script setup lang="ts">
import { defaultLegendConfig } from './config'
import { hourTemLegendConfig } from './config'
import { useShare } from '@/hooks/page/useShare'
import { useMapbox } from '@/components/Map/Mapbox/hook'
import { LegendWidget, useLegendWidget } from '@/components/Map/Widgets/Legend'
......@@ -34,34 +34,10 @@
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',
type: 'single',
timeType: 4,
format: 'M月D日H时',
format: 'MM月DD日HH时',
onChange: ({ option, value }) => {
console.log(
'[TimeBarWidget] ChangeTime',
......@@ -142,37 +118,11 @@
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: () => {},
},
],
},
],
......@@ -196,12 +146,7 @@
})
// 图例小部件
const [registerLegendWidget, { setProps: setLegendProps }] = useLegendWidget({
show: true,
expand: true,
title: defaultLegendConfig.title,
option: defaultLegendConfig.option,
})
const [registerLegendWidget, { setProps: setLegendProps }] = useLegendWidget(hourTemLegendConfig)
// 底部 Bar 小部件
const [registerBottomBarWidget, { height }] = useBottomBarWidget({
......
src/pages/common/webview/index.vue 0 → 100644
<script lang="ts" setup>
const page = reactive({
title: '',
link: '',
})
onLoad(({ title, link }) => {
page.title = decodeURI(title)
page.link = decodeURIComponent(link)
if (!title || !link) {
Message.toast('页面打开失败，参数错误')
uni.navigateBack()
return
}
// 设置标题栏为文件名
uni.setNavigationBarTitle({
title: page.title,
})
// #ifdef APP-PLUS
const webview = plus.webview.currentWebview()
webview.setStyle({ scalable: true })
// #endif
})
</script>
<template>
<view class="wrap" v-if="page.link">
<web-view :src="page.link" :update-title="false" />
</view>
</template>
src/utils/const/Navigation.ts
export interface navItemType {
export interface NavItemType {
label: string
value: string
code?: string
type?: 'page' | 'webview'
navigate?: UniApp.NavigateToOptions
}
// APP V4.x token
const AppV4Token =
'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxODI3NDA2MjAxOCIsImV4cCI6NDg0ODEyNDk5OSwidXVpZCI6InV1aWRfMTIzNDU2IiwibG9naW5hcmVhIjoiIiwiY3JlYXRlZCI6MTY5MjQ1MTM5OTY2OX0.8Lug15AFsQ6tIEsv_-kIprJA4Nz7XzkoWPC1N3k0ZmuOFhzVAzdDndG0VucXlu3uh444cT-OPGGfVaqPNDpXRg'
// 实况监测
export const liveModules: navItemType[] = [
export const liveModules: NavItemType[] = [
{
label: '降水监测',
value: 'rain-m',
......@@ -24,6 +29,10 @@ export const liveModules: navItemType[] = [
{
label: '大风监测',
value: 'wind-m',
type: 'webview',
navigate: {
url: 'https://www.baidu.com',
},
},
{
label: '相对湿度',
......@@ -36,6 +45,11 @@ export const liveModules: navItemType[] = [
{
label: '强对流',
value: 'light-m',
type: 'webview',
navigate: {
// url: `https://hntq.zhijietianqi.com/h5/web/monitoringOfLive/new-severe-weather.v3.html?app=5&token=${AppV4Token}`,
url: `http://127.0.0.1:8080/web/monitoringOfLive/new-severe-weather.v3.html?app=5&token=${AppV4Token}`,
},
},
{
label: '冰雪天气',
......@@ -80,10 +94,14 @@ export const liveModules: navItemType[] = [
]
// 预报信息
export const forecastModules: navItemType[] = [
export const forecastModules: NavItemType[] = [
{
label: '降水预报',
value: 'rain-f',
type: 'webview',
navigate: {
url: `http://127.0.0.1:8080/web/forecastInfo/rainfallInfo.html?app=5&token=${AppV4Token}`,
},
},
{
label: '气温预报',
......@@ -120,7 +138,7 @@ export const forecastModules: navItemType[] = [
]
// 气候
export const climateModules: navItemType[] = [
export const climateModules: NavItemType[] = [
{
label: '降水统计',
value: 'rain-c',
......@@ -144,7 +162,7 @@ export const climateModules: navItemType[] = [
]
// 天气
export const weatherModules: navItemType[] = [
export const weatherModules: NavItemType[] = [
{
label: '会商材料',
value: 'meeting-materials-w',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论