Skip to content

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

upd: 增加实况表格和bottombar内容

上级 f7872b73
正在显示 包含 239 行增加 和 139 行删除
src/components/Monitor/MinMaxBar.vue 0 → 100644
<script setup lang="ts">
defineProps({
minmaxData: {
type: Array,
default: () => [
{ label: '最大', value: '0' },
{ label: '最小', value: '0' },
],
},
})
</script>
<template>
<view class="tipgridwrap">
<view v-for="(item, index) in minmaxData" :key="index" class="tipwrap" style="flex-basis: 50%">
<view class="tipflex tiptitle">{{ item.label }}</view>
<view class="tipflex tipcontent">{{ item.value }}</view>
</view>
</view>
</template>
<style lang="less" scoped>
.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 rgb(24 144 255 / 20%);
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: #fff;
}
.tipcontent {
height: 100%;
background: #fff;
}
}
}
</style>
src/components/Monitor/MonitorTable.vue 0 → 100644
<script setup lang="ts">
import { windheaderData, windtableData } from '@/pages/business/monitor/wind/config'
defineProps({
tableData: {
type: Array,
default: () => windtableData,
},
headerData: {
type: Array,
default: () => windheaderData,
},
})
</script>
<template>
<view @click="clickTest" 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>
</template>
<style lang="less" scoped>
.tablewrap {
margin-top: 5px;
}
</style>
src/pages/business/monitor/wind/config.ts
......@@ -115,3 +115,40 @@ export const hourTemLegendConfig = {
],
},
}
export const windheaderData = [
{
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',
},
]
export const windtableData = [
{
'0~3级': '0站',
'4~7级': '0站',
'8~10级': '0站',
'11~14级': '0站',
'15~17级': '0站',
},
]
src/pages/business/monitor/wind/index.vue
<!-- 大风页面组件 -->
<script setup lang="ts">
import { hourTemLegendConfig } from './config'
import { hourTemLegendConfig, windheaderData, windtableData } from './config'
import { useShare } from '@/hooks/page/useShare'
import { buildGeoJSONSourceDataUrl, useMapbox } from '@/components/Map/Mapbox/hook'
import { LegendWidget, useLegendWidget } from '@/components/Map/Widgets/Legend'
......@@ -11,20 +11,68 @@
import { BottomBarWidget, useBottomBarWidget } from '@/components/Map/Widgets/BottomBar'
import type { MapboxInstance } from '@/components/Map/Mapbox'
import { HandlerUtil } from '@/components/Map/Mapbox'
import { useGlobSetting } from '/@/hooks/setting'
useShare()
const globSetting = useGlobSetting()
// 页面参数
// const param = reactive({
// query: {},
// filter: {},
// })
const baseUrl = 'http://qks.straw.yiring.com:40051/tbm/api'
const token = `68b919d2-2ea0-4ad3-9521-9e624e1563ac`
const param = reactive({
query: {
liveQueryType: 'TWO_MINUTES_WIND', // 查询类型,可用值:HOUR_RAIN_SUM,MINUTES_RAIN_SUM,ONE_HOUR_TEM,FIVE_MINUTES_TEM,
// MAX_TEM,MIN_TEM,CHANGE_TEM,ONE_MINUTES_WIND,MAX_WIND,TWENTY_FOUR_MAX_WIND,TWO_MINUTES_WIND,TEN_MINUTES_WIND,
// FIVE_MINUTES_RHU,FIVE_MINUTES_RHU_MIN,FIVE_MINUTES_DPT,HOUR_RHU,HOUR_MIN_RHU,HOUR_DPT
stationType: 1, // 站点类型 1 国家站 2 骨干站 3 区域站
startTime: '', // 非时间段时，startTime需要和endTime保持相同；不传则查询最新数据
endTime: '',
numericalBegin: -9999,
numericalEnd: 9999,
symbolBegin: 'GREATER_THAN_OR_EQUAL', // GREATER_THAN,GREATER_THAN_OR_EQUAL,LESS_THAN,LESS_THAN_OR_EQUAL
symbolEnd: 'LESS_THAN_OR_EQUAL',
},
filter: {},
minmaxData: [
{ label: '最大风速', value: '7.8m/s' },
{ label: '平均风速', value: '2.8m/s' },
],
headerData: windheaderData,
tableData: windtableData,
tabs: [
{
name: '2分钟平均',
value: 'TWO_MINUTES_WIND',
},
{
name: '10分钟平均',
value: 'TEN_MINUTES_WIND',
},
{
name: '最大风速',
value: 'MAX_WIND',
},
{
name: '极大风速',
value: 'TWENTY_FOUR_MAX_WIND',
},
],
})
/* function buildQueryParams(unBuildParams) {
const params = unBuildParams
for (const key in params) {
if (isRef(params[key])) {
params[key] = unref(params[key])
}
if (isReactive(params[key])) {
params[key] = toRaw(params[key])
}
}
return toRaw(params)
} */
const baseUrl = `${globSetting.apiUrl}${globSetting.urlPrefix}`
// const token = `68b919d2-2ea0-4ad3-9521-9e624e1563ac`
const token = `8b218589-12cf-4de2-9f62-b00a5dfcab82`
// 地图组件
const [registerMap, map] = useMapbox({
// const [registerMap, map] = useMapbox({
const [registerMap, { setGeoJSONSourceData }, map] = useMapbox({
style: {
center: [111.6, 26.170844],
},
......@@ -33,12 +81,13 @@
// 模拟色斑叠加数据源
map.setGeoJSONSourceForRequest(
'tem-splot',
'wind-splot',
buildGeoJSONSourceDataUrl({
url: `${baseUrl}/live/tem/getTemStain`,
// url: `${baseUrl}/live/tem/getTemStain`,
url: `${baseUrl}/live/wind/getWindStain`,
params: {
stationType: 1,
liveQueryType: 'ONE_HOUR_TEM',
liveQueryType: 'TWO_MINUTES_WIND',
Authorization: token,
},
}),
......@@ -48,9 +97,9 @@
// 模拟色斑叠加图层
map.addLayer(
{
id: 'tem-splot',
id: 'wind-splot',
type: 'fill',
source: 'tem-splot',
source: 'wind-splot',
paint: {
'fill-color': {
type: 'identity',
......@@ -64,20 +113,20 @@
// 模拟数值叠加数据源
map.setGeoJSONSourceForRequest(
'tem-text',
'wind-text',
buildGeoJSONSourceDataUrl({
url: `${baseUrl}/live/tem/getTemList`,
url: `${baseUrl}/live/wind/getWindList`,
params: {
stationType: 1,
liveQueryType: 'ONE_HOUR_TEM',
liveQueryType: 'TWO_MINUTES_WIND',
Authorization: token,
},
}),
// 此处使用
(response) => {
const features = response.body.liveVos.map(function (item) {
item.key = '气温'
item.suffix = '°C'
item.key = '风速'
item.suffix = 'm/s'
return HandlerUtil.createDefaultGeoJSONFeatureData(item)
})
return HandlerUtil.createDefaultGeoJSONSymbolSourceData(features)
......@@ -86,9 +135,9 @@
// 模拟数值叠加图层
map.addLayer({
id: 'tem-text',
id: 'wind-text',
type: 'symbol',
source: 'tem-text',
source: 'wind-text',
layout: {
'text-field': '{value}',
'text-size': 14,
......@@ -104,11 +153,37 @@
},
})
map.on('click', 'tem-text', function (e) {
map.on('click', 'wind-text', function (e) {
console.log('🚀🚀🚀', e)
})
},
})
function clickTest() {
console.log('setGeoJSONSourceData', setGeoJSONSourceData)
setGeoJSONSourceData('wind-splot', {
type: 'FeatureCollection',
features: [],
})
param.minmaxData = [
{ label: '最大风速', value: '99m/s' },
{ label: '平均风速', value: '28m/s' },
]
}
// 模拟色斑叠加数据源
// map.setGeoJSONSourceForRequest(
// 'wind-splot',
// buildGeoJSONSourceDataUrl({
// // url: `${baseUrl}/live/tem/getTemStain`,
// url: `${baseUrl}/live/wind/getWindStain`,
// params: {
// stationType: 1,
// liveQueryType: 'TWO_MINUTES_WIND',
// Authorization: token,
// },
// }),
// (response) => response.body.jsonObject,
// )
// 顶部时间轴小部件
const [registerTimeBarWidget, { setTime, getTimeBarValue }] = useTimeBarWidget({
......@@ -250,7 +325,7 @@
setToolBoxProps({ bottom: value })
// 当底部 Bar 小部件高度变化时，重新设置地图的中心点，使界面显示效果更好
if (map.isReady.value) {
if (map?.isReady?.value) {
if (value === '210rpx') {
map.flyTo({
center: [111.6, 26.770844],
......@@ -267,63 +342,10 @@
}
},
)
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>
......@@ -350,7 +372,7 @@
<!-- 内容 Slot -->
<view class="flex-center c-gray">
<fui-tabs
:tabs="tabs"
:tabs="param.tabs"
isDot
scroll
alignLeft
......@@ -361,30 +383,8 @@
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>
<MinMaxBar @click="clickTest" :minmaxData="param.minmaxData" />
<MonitorTable :tableData="param.tableData" :headerData="param.headerData" />
</BottomBarWidget>
</view>
</view>
......@@ -428,39 +428,4 @@
}
// #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>
types/components.d.ts
......@@ -141,6 +141,8 @@ declare module 'vue' {
Legend: typeof import('./../src/components/Map/Widgets/Legend/src/Legend.vue')['default']
Mapbox: typeof import('./../src/components/Map/Mapbox/index.vue')['default']
MenuHeader: typeof import('./../src/components/Layout/MenuHeader.vue')['default']
MinMaxBar: typeof import('./../src/components/Monitor/MinMaxBar.vue')['default']
MonitorTable: typeof import('./../src/components/Monitor/MonitorTable.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']
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论