Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 a2d25102 作者: 陈师旦
操作

upd: bottomBar样式修改；新增大风实况

上级 722ce2cd
正在显示 包含 616 行增加 和 7 行删除
src/components/FirstUI/fui-theme/fui-theme.css
......@@ -8,7 +8,7 @@
/* #ifndef APP-NVUE */
page {
/* 行为相关颜色 */
--fui-color-primary: #465CFF;
--fui-color-primary: #1890ff;
--fui-color-success: #09BE4F;
--fui-color-warning: #FFB703;
--fui-color-danger: #FF2B2B;
......
src/components/Map/Widgets/BottomBar/src/BottomBar.vue
......@@ -116,11 +116,14 @@
position: fixed;
bottom: 0;
left: 0;
padding: 30rpx;
width: calc(100% - 60rpx);
// 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);
......@@ -133,7 +136,7 @@
.action {
width: 100%;
position: relative;
top: -15rpx;
// top: -15rpx;
font-size: 24rpx;
color: #999;
padding-bottom: 10rpx;
......@@ -155,8 +158,10 @@
}
.content {
box-sizing: border-box;
width: 100%;
height: calc(100% - 60rpx - 20rpx);
// height: calc(100% - 60rpx - 20rpx);
height: 100%;
overflow: hidden;
position: relative;
}
......
src/pages.json
......@@ -112,6 +112,26 @@
}
}
},
// 大风监测
{
"path": "pages/business/monitor/wind/index",
"style": {
"navigationBarTitleText": "大风监测",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#1890FF",
"app-plus": {
"titleNView": {
"buttons": [
{
"type": "share",
"color": "white",
"width": "50px"
}
]
}
}
}
},
// === Webview ===
{
"path": "pages/common/webview/index",
......
src/pages/business/monitor/wind/config.ts 0 → 100644
/**
* TODO: 色块图例配置，实际上应该和后端的色斑图，进行动态匹配，可以考虑由后端接口返回
*/
/**
* 小时气温图例配置
*/
export const hourTemLegendConfig = {
expand: false,
title: '单位: °C',
option: {
items: [
{
color: '#800000',
label: '<44',
},
{
color: '#960000',
},
{
color: '#AB0001',
label: '40',
},
{
color: '#C80100',
},
{
color: '#E70000',
label: '36',
},
{
color: '#FE371B',
},
{
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',
},
],
},
}
src/pages/business/monitor/wind/index.vue 0 → 100644
<!-- 大风页面组件 -->
<script setup lang="ts">
import { hourTemLegendConfig } from './config'
import { useShare } from '@/hooks/page/useShare'
import { buildGeoJSONSourceDataUrl, useMapbox } from '@/components/Map/Mapbox/hook'
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'
import type { MapboxInstance } from '@/components/Map/Mapbox'
import { HandlerUtil } from '@/components/Map/Mapbox'
useShare()
// 页面参数
// const param = reactive({
// query: {},
// filter: {},
// })
const baseUrl = 'http://qks.straw.yiring.com:40051/tbm/api'
const token = `68b919d2-2ea0-4ad3-9521-9e624e1563ac`
// 地图组件
const [registerMap, map] = useMapbox({
style: {
center: [111.6, 26.170844],
},
onLoaded: (map: MapboxInstance, data: Recordable) => {
console.log('✨✨✨ Map Loaded', map, data)
// 模拟色斑叠加数据源
map.setGeoJSONSourceForRequest(
'tem-splot',
buildGeoJSONSourceDataUrl({
url: `${baseUrl}/live/tem/getTemStain`,
params: {
stationType: 1,
liveQueryType: 'ONE_HOUR_TEM',
Authorization: token,
},
}),
(response) => response.body.jsonObject,
)
// 模拟色斑叠加图层
map.addLayer(
{
id: 'tem-splot',
type: 'fill',
source: 'tem-splot',
paint: {
'fill-color': {
type: 'identity',
property: 'color',
},
'fill-opacity': 1,
},
},
'fill-placeholder',
)
// 模拟数值叠加数据源
map.setGeoJSONSourceForRequest(
'tem-text',
buildGeoJSONSourceDataUrl({
url: `${baseUrl}/live/tem/getTemList`,
params: {
stationType: 1,
liveQueryType: 'ONE_HOUR_TEM',
Authorization: token,
},
}),
// 此处使用
(response) => {
const features = response.body.liveVos.map(function (item) {
item.key = '气温'
item.suffix = '°C'
return HandlerUtil.createDefaultGeoJSONFeatureData(item)
})
return HandlerUtil.createDefaultGeoJSONSymbolSourceData(features)
},
)
// 模拟数值叠加图层
map.addLayer({
id: 'tem-text',
type: 'symbol',
source: 'tem-text',
layout: {
'text-field': '{value}',
'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,
},
})
map.on('click', 'tem-text', function (e) {
console.log('🚀🚀🚀', e)
})
},
})
// 顶部时间轴小部件
const [registerTimeBarWidget, { setTime, getTimeBarValue }] = useTimeBarWidget({
show: true,
align: 'left',
readonly: false,
time: {
type: 'single',
timeType: 4,
format: 'MM月DD日HH时',
onChange: ({ option, value }) => {
console.log(
'[TimeBarWidget] ChangeTime',
option,
value.map((item) => formatTime(item)),
)
},
},
})
// 左侧工具栏小部件
const [registerToolBoxWidget, { setProps: setToolBoxProps }] = useToolBoxWidget({
show: true,
expand: true,
showExpandButton: true,
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/rank.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(hourTemLegendConfig)
// 底部 Bar 小部件
const [registerBottomBarWidget, { height }] = useBottomBarWidget({
show: true,
expand: true,
// expandTitle: '工具栏',
// showExpandBorder: true,
showExpandButton: true,
height: 220,
maxHeight: 350,
})
watch(
() => height.value,
(value) => {
console.log('[useBottomBarWidget] height', value)
setSwitchProps({ bottom: value })
setLegendProps({ bottom: value })
setToolBoxProps({ bottom: value })
// 当底部 Bar 小部件高度变化时，重新设置地图的中心点，使界面显示效果更好
if (map.isReady.value) {
if (value === '210rpx') {
map.flyTo({
center: [111.6, 26.770844],
speed: 0.2,
essential: true,
})
} else {
map.flyTo({
center: [111.6, 26.170844],
speed: 0.2,
essential: true,
})
}
}
},
)
const tabs = ref([
{
name: '2分钟平均',
value: 'TWO_MINUTES_WIND',
},
{
name: '10分钟平均',
value: 'TEN_MINUTES_WIND',
},
{
name: '最大风速',
value: 'MAX_WIND',
},
{
name: '极大风速',
value: 'TWENTY_FOUR_MAX_WIND',
},
])
function tabschangeHandle(item) {
console.log(item)
}
const tableData = [
{
'0~3级': '0站',
'4~7级': '0站',
'8~10级': '0站',
'11~14级': '0站',
'15~17级': '0站',
},
]
const headerData = [
{
prop: '0~3级',
label: '0~3级',
width: '136',
},
{
prop: '4~7级',
label: '4~7级',
width: '136',
},
{
prop: '8~10级',
label: '8~10级',
width: '136',
},
{
prop: '11~14级',
label: '11~14级',
width: '136',
},
{
prop: '15~17级',
label: '15~17级',
width: '136',
},
]
</script>
<template>
<view class="page h-100vh bg-white">
<!-- 地图组件 -->
<Mapbox @register="registerMap" />
<!-- 地图上方所有小部件 -->
<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">
<fui-tabs
:tabs="tabs"
isDot
scroll
alignLeft
@change="tabschangeHandle"
height="48"
size="28"
scale="1"
center
/>
</view>
<view class="tipgridwrap">
<view class="tipwrap" style="flex-basis: 50%">
<view class="tipflex tiptitle">最大风速</view>
<view class="tipflex tipcontent">7.8m/s</view>
</view>
<view class="tipwrap" style="flex-basis: 50%">
<view class="tipflex tiptitle">平均风速</view>
<view class="tipflex tipcontent">2.8m/s</view>
</view>
</view>
<view class="tablewrap">
<fui-table
:itemList="tableData"
:header="headerData"
size="24"
textSize="24"
color="#1890FF"
textColor="#666666"
headerBgColor="rgba(24,144,255,0.08)"
gap="30"
padding="14"
borderColor="rgba(24,144,255,0.08)"
/>
</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
}
.tipgridwrap {
padding: 5px 10px;
display: grid;
grid-template-columns: 49% 49%;
grid-column-gap: 10px;
}
.tipwrap {
display: flex;
justify-content: center;
align-items: center;
height: 30px;
margin-top: 5px;
border: 1px solid rgba(24, 144, 255, 0.2);
border-radius: 5px;
overflow: hidden;
.tipflex {
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 26rpx;
}
.tiptitle {
height: 100%;
background: #1890ff;
color: #ffffff;
}
.tipcontent {
height: 100%;
background: #ffffff;
}
}
.tablewrap {
margin-top: 5px;
}
</style>
src/utils/const/Navigation.ts
......@@ -29,9 +29,10 @@ export const liveModules: NavItemType[] = [
{
label: '大风监测',
value: 'wind-m',
type: 'webview',
// type: 'webview',
navigate: {
url: 'https://www.baidu.com',
url: '/pages/business/monitor/wind/index',
// url: 'https://www.baidu.com',
},
},
{
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论