Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 5be070b1 作者: test
操作

Merge branch 'dev_csd' of https://gitlab.yiring.com/hntq/hntq-v5 into dev_fzm

上级 d2d12e33 a9ab5a27
正在显示 包含 216 行增加 和 139 行删除
.env.production
# API 接口地址
VITE_GLOB_API_URL=http://qks.straw.yiring.com:40051/tbm/api
VITE_GLOB_API_URL=http://qks.straw.yiring.com:40051/tbm
# API 接口地址前缀
VITE_GLOB_API_URL_PREFIX=/api
......
src/api/model/monitor.ts 0 → 100644
import { otherHttp } from '/@/utils/http/axios'
// import { ContentTypeEnum } from '/@/enums/httpEnum'
enum monitorApi {
getWindList = '/live/wind/getWindList', // 查询大风数据
}
/**
* @description: 查询大风数据
*/
export function getWindList(params) {
return otherHttp.get({
url: monitorApi.getWindList,
params,
})
}
src/pages/business/monitor/wind/config.ts
/**
* TODO: 色块图例配置，实际上应该和后端的色斑图，进行动态匹配，可以考虑由后端接口返回
*/
import { cloneDeep } from 'lodash-es'
/**
* 小时气温图例配置
......@@ -152,3 +153,62 @@ export const windtableData = [
'15~17级': '0站',
},
]
export function buildQueryParams(unBuildParams, config?) {
// 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])
// }
// }
const queryParams = cloneDeep(toRaw(unBuildParams))
if (config?.isSpot) {
delete queryParams.numericalBegin
delete queryParams.numericalEnd
delete queryParams.symbolBegin
delete queryParams.symbolEnd
}
if (config?.isFirstQuery) {
delete queryParams.startTime
delete queryParams.endTime
}
return queryParams
}
export function createSplotLayer(type: String) {
return {
id: `${type}-splot`,
type: 'fill',
source: `${type}-splot`,
paint: {
'fill-color': {
type: 'identity',
property: 'color',
},
'fill-opacity': 1,
},
}
}
export function createTextLayer(type: String) {
return {
id: `${type}-text`,
type: 'symbol',
source: `${type}-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,
},
}
}
src/pages/business/monitor/wind/index.vue
<!-- 大风页面组件 -->
<script setup lang="ts">
import { hourTemLegendConfig, windheaderData, windtableData } from './config'
import { buildQueryParams, createTextLayer, hourTemLegendConfig, windheaderData, windtableData } from './config'
import { useShare } from '@/hooks/page/useShare'
import { useMapbox } from '@/components/Map/Mapbox/hook'
import { LegendWidget, useLegendWidget } from '@/components/Map/Widgets/Legend'
......@@ -9,9 +9,11 @@
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 { Station } from '@/components/Map/Mapbox'
import { HandlerUtil } from '@/components/Map/Mapbox'
// 接口
import { getWindList } from '@/api/model/monitor'
useShare()
// 页面参数
const param = reactive({
......@@ -53,97 +55,17 @@
},
],
})
/* 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 [registerMap, map] = useMapbox({
const [registerMap, map] = useMapbox({
style: {
center: [111.6, 26.170844],
},
onLoaded: (data: Recordable) => {
onLoaded: async (data: Recordable) => {
console.log('✨✨✨ Map Loaded', map, data)
// 模拟色斑叠加数据源
map.setGeoJSONSourceForRequest(
'wind-splot',
{
url: `/live/wind/getWindStain`,
params: {
stationType: 1,
liveQueryType: 'TWO_MINUTES_WIND',
},
},
(body) => body.jsonObject,
)
// 模拟色斑叠加图层
map.addLayer(
{
id: 'wind-splot',
type: 'fill',
source: 'wind-splot',
paint: {
'fill-color': {
type: 'identity',
property: 'color',
},
'fill-opacity': 1,
},
},
'fill-placeholder',
)
// 模拟数值叠加数据源
map.setGeoJSONSourceForRequest(
'wind-text',
{
url: `/live/wind/getWindList`,
params: {
stationType: 1,
liveQueryType: 'TWO_MINUTES_WIND',
},
},
// 此处使用
(body) => {
const features = body.liveVos.map((item: Station) => {
item.key = '风速'
item.suffix = 'm/s'
return HandlerUtil.createDefaultPointFeature(item)
})
return HandlerUtil.createFeatureCollection(features)
},
)
// 模拟数值叠加图层
map.addLayer({
id: 'wind-text',
type: 'symbol',
source: 'wind-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,
},
})
await logicalLayerGetData(true)
getData(map, true)
map.on('click', 'wind-text', function (e) {
console.log('🚀🚀🚀', e)
......@@ -156,20 +78,6 @@
{ 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({
......@@ -224,28 +132,29 @@
],
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: () => {},
},
// TODO 初版隐藏区域切换
/* {
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',
......@@ -255,18 +164,18 @@
},
],
},
{
key: 'action',
align: 'bottom',
buttons: [
{
name: '排名',
icon: '/static/icons/toolbox/rank.png',
type: 'button',
handle: () => {},
},
],
},
// {
// key: 'action',
// align: 'bottom',
// buttons: [
// {
// name: '排名',
// icon: '/static/icons/toolbox/rank.png',
// type: 'button',
// handle: () => {},
// },
// ],
// },
],
})
......@@ -311,7 +220,7 @@
setToolBoxProps({ bottom: value })
// 当底部 Bar 小部件高度变化时，重新设置地图的中心点，使界面显示效果更好
if (map?.isReady?.value) {
if (map.isReady.value) {
if (value === 220) {
map.flyTo({
center: [111.6, 26.770844],
......@@ -328,9 +237,87 @@
}
},
)
// 渲染层请求数据
function getData(map, init?) {
// if(init){
// // 请求最新时间数据
// }
// 模拟色斑叠加数据源
map.setGeoJSONSourceForRequest(
'wind-splot',
{
url: `/live/wind/getWindStain`,
params: buildQueryParams(
param.query,
Object.assign({}, { isSpot: true }, init ? { isFirstQuery: true } : {}),
),
},
(body) => body.jsonObject,
)
// 模拟色斑叠加图层
// map.addLayer(createSplotLayer('wind'), 'fill-placeholder')
map.addLayer(
{
id: `${'wind'}-splot`,
type: 'fill',
source: `${'wind'}-splot`,
paint: {
'fill-color': {
type: 'identity',
property: 'color',
},
'fill-opacity': 1,
},
},
'fill-placeholder',
)
// 模拟数值叠加数据源
map.setGeoJSONSourceForRequest(
'wind-text',
{
url: `/live/wind/getWindList`,
params: buildQueryParams(param.query, Object.assign({}, {}, init ? { isFirstQuery: true } : {})),
},
// 此处使用
(body) => {
// 更新 minmaxData
// param.minmaxData = [
// { label: '最大风速', value: `${response.body.maxVo.value}m/s` },
// { label: '平均风速', value: `${response.body.avgValue}m/s` },
// ]
// 更新数据时间
const features = body.liveVos.map(function (item) {
item.key = '风速'
item.suffix = 'm/s'
return HandlerUtil.createDefaultPointFeature(item)
})
return HandlerUtil.createFeatureCollection(features)
},
)
// 模拟数值叠加图层
map.addLayer(createTextLayer('wind'))
}
// 逻辑层请求数据
async function logicalLayerGetData(init = false) {
const params = buildQueryParams(param.query, { isFirstQuery: init })
getWindList(params).then((res) => {
console.log(res)
// 更新 minmaxData
param.minmaxData = [
{ label: '最大风速', value: `${res.maxVo.value}m/s` },
{ label: '平均风速', value: `${res.avgValue}m/s` },
]
})
}
function tabschangeHandle(item) {
async function tabschangeHandle(item) {
console.log(item)
param.query.liveQueryType = item.value
getData(map, true)
await logicalLayerGetData(true)
}
</script>
......
src/utils/const/Navigation.ts
......@@ -83,8 +83,8 @@ export const liveModules: NavItemType[] = [
* token: V4 版本后端生成的一个长期有效 Token，固定值，必传
* open: true 代表可以从嵌入的页面打开新页面，默认为 false，非必传（注意：打开的子页面也进行了重写适配，一般来说不用担心出现意外情况，但注意进行简单测试）
*/
// 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/waterRegimenMap.v3.html?app=5&open=true&token=${AppV4Token}`,
url: `https://hntq.zhijietianqi.com/h5/web/monitoringOfLive/waterRegimenMap.v3.html?app=5&token=${AppV4Token}`,
// url: `http://127.0.0.1:8080/web/monitoringOfLive/waterRegimenMap.v3.html?app=5&open=true&token=${AppV4Token}`,
},
},
{
......
src/utils/http/axios/index.ts
......@@ -266,6 +266,19 @@ export const defHttp = createAxios({
})
// other api url
export const otherHttp = createAxios({
requestOptions: {
apiUrl: API_URL,
urlPrefix: API_URL_PREFIX,
},
})
export const mapHttp = createAxios({
requestOptions: {
apiUrl: '',
urlPrefix: '',
isReturnNativeResponse: true,
},
})
// export const otherHttp = createAxios({
// transform: {
// inject: (config: AxiosRequestConfig<any>, options: http.RequestOptions) => {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论