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"> <script setup lang="ts">
import { liveModules } from '/@/utils/const/Navigation' import { liveModules } from '/@/utils/const/Navigation'
import type { navItemType } from '/@/utils/const/Navigation' import type { NavItemType } from '/@/utils/const/Navigation'
defineProps({ defineProps({
dataSouce: { dataSouce: {
type: Array as PropType<navItemType[]>, type: Array as PropType<NavItemType[]>,
default: () => liveModules, default: () => liveModules,
}, },
}) })
...@@ -17,13 +17,21 @@ ...@@ -17,13 +17,21 @@
// } // }
// const getColor = (type: string) => colors[type] // const getColor = (type: string) => colors[type]
function goRoute(nav: UniApp.NavigateToOptions) { function goRoute(item: NavItemType) {
if (!nav) { if (!item?.navigate?.url) {
Message.alert('模块开发中，敬请期待！', '') Message.alert('模块开发中，敬请期待！', '')
return 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) const lastString = (string: string) => string.charAt(string.length - 1)
...@@ -33,12 +41,7 @@ ...@@ -33,12 +41,7 @@
<template> <template>
<fui-grid :columns="4" class="mt-4 bg-#fff" :showBorder="false"> <fui-grid :columns="4" class="mt-4 bg-#fff" :showBorder="false">
<fui-grid-item <fui-grid-item v-for="(item, index) in dataSouce" :key="index" :highlight="false" @click="goRoute(item)">
v-for="(item, index) in dataSouce"
:key="index"
:highlight="false"
@click="goRoute(item.navigate)"
>
<view class="fui-grid__cell flex flex-col flex-center"> <view class="fui-grid__cell flex flex-col flex-center">
<!-- <image src="/static/uni-logo.png" class="fui-icon w50" mode="widthFix" /> --> <!-- <image src="/static/uni-logo.png" class="fui-icon w50" mode="widthFix" /> -->
<!-- :color="getColor(lastString(item.value))" --> <!-- :color="getColor(lastString(item.value))" -->
......
src/pages.json
...@@ -3,7 +3,13 @@ ...@@ -3,7 +3,13 @@
"navigationBarTextStyle": "white", "navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#F8F8F8", "navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#FFFFFF", "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": [
// pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages // pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
...@@ -106,6 +112,16 @@ ...@@ -106,6 +112,16 @@
} }
} }
}, },
// === Webview ===
{
"path": "pages/common/webview/index",
"style": {
"titleNView": true,
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#1890FF",
"enablePullDownRefresh": false
}
},
// === PDF 文件预览 === // === PDF 文件预览 ===
{ {
"path": "pages/common/viewer/pdf", "path": "pages/common/viewer/pdf",
......
src/pages/business/monitor/tem/config.ts
// 页面通用配置信息或一些抽象方法 /**
* TODO: 色块图例配置，实际上应该和后端的色斑图，进行动态匹配，可以考虑由后端接口返回
*/
// 单色块图例配置 /**
export const defaultLegendConfig = { * 小时气温图例配置
*/
export const hourTemLegendConfig = {
expand: false, expand: false,
title: '单位: mm', title: '单位: °C',
option: { option: {
blockStyle: {
border: '1px solid #ccc',
},
items: [ items: [
{ {
color: '#FFFFFF', color: '#800000',
label: '0-0.1', label: '<44',
}, },
{ {
color: '#A3F48A', color: '#960000',
label: '0.1-9.0',
}, },
{ {
color: '#35AB02', color: '#AB0001',
label: '10-24.9', label: '40',
}, },
{ {
color: '#61B9F9', color: '#C80100',
label: '25-49.9',
}, },
{ {
color: '#0403FF', color: '#E70000',
label: '50-99.9', label: '36',
}, },
{ {
color: '#FA02FA', color: '#FE371B',
label: '100-249.9',
}, },
{ {
color: '#810042', color: '#FF4B25',
label: '>=250', 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"> <script setup lang="ts">
import { defaultLegendConfig } from './config' import { hourTemLegendConfig } from './config'
import { useShare } from '@/hooks/page/useShare' import { useShare } from '@/hooks/page/useShare'
import { useMapbox } from '@/components/Map/Mapbox/hook' import { useMapbox } from '@/components/Map/Mapbox/hook'
import { LegendWidget, useLegendWidget } from '@/components/Map/Widgets/Legend' import { LegendWidget, useLegendWidget } from '@/components/Map/Widgets/Legend'
...@@ -34,34 +34,10 @@ ...@@ -34,34 +34,10 @@
show: true, show: true,
align: 'left', align: 'left',
readonly: false, 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: { time: {
type: 'range', type: 'single',
timeType: 4, timeType: 4,
format: 'M月D日H时', format: 'MM月DD日HH时',
onChange: ({ option, value }) => { onChange: ({ option, value }) => {
console.log( console.log(
'[TimeBarWidget] ChangeTime', '[TimeBarWidget] ChangeTime',
...@@ -142,37 +118,11 @@ ...@@ -142,37 +118,11 @@
align: 'bottom', align: 'bottom',
buttons: [ buttons: [
{ {
name: '要素',
icon: '/static/icons/toolbox/element.png',
type: 'select',
multiple: true,
handle: () => {},
},
{
name: '排名', name: '排名',
icon: '/static/icons/toolbox/rank.png', icon: '/static/icons/toolbox/rank.png',
type: 'button', type: 'button',
handle: () => {}, 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 @@ ...@@ -196,12 +146,7 @@
}) })
// 图例小部件 // 图例小部件
const [registerLegendWidget, { setProps: setLegendProps }] = useLegendWidget({ const [registerLegendWidget, { setProps: setLegendProps }] = useLegendWidget(hourTemLegendConfig)
show: true,
expand: true,
title: defaultLegendConfig.title,
option: defaultLegendConfig.option,
})
// 底部 Bar 小部件 // 底部 Bar 小部件
const [registerBottomBarWidget, { height }] = useBottomBarWidget({ 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 label: string
value: string value: string
code?: string code?: string
type?: 'page' | 'webview'
navigate?: UniApp.NavigateToOptions navigate?: UniApp.NavigateToOptions
} }
// APP V4.x token
const AppV4Token =
'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxODI3NDA2MjAxOCIsImV4cCI6NDg0ODEyNDk5OSwidXVpZCI6InV1aWRfMTIzNDU2IiwibG9naW5hcmVhIjoiIiwiY3JlYXRlZCI6MTY5MjQ1MTM5OTY2OX0.8Lug15AFsQ6tIEsv_-kIprJA4Nz7XzkoWPC1N3k0ZmuOFhzVAzdDndG0VucXlu3uh444cT-OPGGfVaqPNDpXRg'
// 实况监测 // 实况监测
export const liveModules: navItemType[] = [ export const liveModules: NavItemType[] = [
{ {
label: '降水监测', label: '降水监测',
value: 'rain-m', value: 'rain-m',
...@@ -24,6 +29,10 @@ export const liveModules: navItemType[] = [ ...@@ -24,6 +29,10 @@ export const liveModules: navItemType[] = [
{ {
label: '大风监测', label: '大风监测',
value: 'wind-m', value: 'wind-m',
type: 'webview',
navigate: {
url: 'https://www.baidu.com',
},
}, },
{ {
label: '相对湿度', label: '相对湿度',
...@@ -36,6 +45,11 @@ export const liveModules: navItemType[] = [ ...@@ -36,6 +45,11 @@ export const liveModules: navItemType[] = [
{ {
label: '强对流', label: '强对流',
value: 'light-m', 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: '冰雪天气', label: '冰雪天气',
...@@ -80,10 +94,14 @@ export const liveModules: navItemType[] = [ ...@@ -80,10 +94,14 @@ export const liveModules: navItemType[] = [
] ]
// 预报信息 // 预报信息
export const forecastModules: navItemType[] = [ export const forecastModules: NavItemType[] = [
{ {
label: '降水预报', label: '降水预报',
value: 'rain-f', value: 'rain-f',
type: 'webview',
navigate: {
url: `http://127.0.0.1:8080/web/forecastInfo/rainfallInfo.html?app=5&token=${AppV4Token}`,
},
}, },
{ {
label: '气温预报', label: '气温预报',
...@@ -120,7 +138,7 @@ export const forecastModules: navItemType[] = [ ...@@ -120,7 +138,7 @@ export const forecastModules: navItemType[] = [
] ]
// 气候 // 气候
export const climateModules: navItemType[] = [ export const climateModules: NavItemType[] = [
{ {
label: '降水统计', label: '降水统计',
value: 'rain-c', value: 'rain-c',
...@@ -144,7 +162,7 @@ export const climateModules: navItemType[] = [ ...@@ -144,7 +162,7 @@ export const climateModules: navItemType[] = [
] ]
// 天气 // 天气
export const weatherModules: navItemType[] = [ export const weatherModules: NavItemType[] = [
{ {
label: '会商材料', label: '会商材料',
value: 'meeting-materials-w', value: 'meeting-materials-w',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论