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 接口地址 # 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 接口地址前缀 # API 接口地址前缀
VITE_GLOB_API_URL_PREFIX=/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: 色块图例配置，实际上应该和后端的色斑图，进行动态匹配，可以考虑由后端接口返回 * TODO: 色块图例配置，实际上应该和后端的色斑图，进行动态匹配，可以考虑由后端接口返回
*/ */
import { cloneDeep } from 'lodash-es'
/** /**
* 小时气温图例配置 * 小时气温图例配置
...@@ -152,3 +153,62 @@ export const windtableData = [ ...@@ -152,3 +153,62 @@ export const windtableData = [
'15~17级': '0站', '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"> <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 { 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'
...@@ -9,9 +9,11 @@ ...@@ -9,9 +9,11 @@
import { TimeBarWidget, formatTime, useTimeBarWidget } from '@/components/Map/Widgets/TimeBar' import { TimeBarWidget, formatTime, useTimeBarWidget } from '@/components/Map/Widgets/TimeBar'
import { ToolBoxWidget, useToolBoxWidget } from '@/components/Map/Widgets/ToolBox' import { ToolBoxWidget, useToolBoxWidget } from '@/components/Map/Widgets/ToolBox'
import { BottomBarWidget, useBottomBarWidget } from '@/components/Map/Widgets/BottomBar' import { BottomBarWidget, useBottomBarWidget } from '@/components/Map/Widgets/BottomBar'
import type { Station } from '@/components/Map/Mapbox'
import { HandlerUtil } from '@/components/Map/Mapbox' import { HandlerUtil } from '@/components/Map/Mapbox'
// 接口
import { getWindList } from '@/api/model/monitor'
useShare() useShare()
// 页面参数 // 页面参数
const param = reactive({ const param = reactive({
...@@ -53,97 +55,17 @@ ...@@ -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({ const [registerMap, map] = useMapbox({
style: { style: {
center: [111.6, 26.170844], center: [111.6, 26.170844],
}, },
onLoaded: (data: Recordable) => { onLoaded: async (data: Recordable) => {
console.log('✨✨✨ Map Loaded', map, data) console.log('✨✨✨ Map Loaded', map, data)
// 模拟色斑叠加数据源 await logicalLayerGetData(true)
map.setGeoJSONSourceForRequest( getData(map, true)
'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,
},
})
map.on('click', 'wind-text', function (e) { map.on('click', 'wind-text', function (e) {
console.log('🚀🚀🚀', e) console.log('🚀🚀🚀', e)
...@@ -156,20 +78,6 @@ ...@@ -156,20 +78,6 @@
{ label: '平均风速', value: '28m/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({ const [registerTimeBarWidget, { setTime, getTimeBarValue }] = useTimeBarWidget({
...@@ -224,28 +132,29 @@ ...@@ -224,28 +132,29 @@
], ],
handle: () => {}, handle: () => {},
}, },
{ // TODO 初版隐藏区域切换
name: '区域', /* {
icon: '/static/icons/toolbox/location.png', name: '区域',
type: 'select', icon: '/static/icons/toolbox/location.png',
multiple: false, type: 'select',
options: [ multiple: false,
{ options: [
text: '湖南省', {
value: '430000', text: '湖南省',
checked: true, value: '430000',
}, checked: true,
{ },
text: '长沙市', {
value: '430100', text: '长沙市',
}, value: '430100',
{ },
text: '湘潭市', {
value: '430300', text: '湘潭市',
}, value: '430300',
], },
handle: () => {}, ],
}, handle: () => {},
}, */
{ {
name: '站点', name: '站点',
icon: '/static/icons/toolbox/station.png', icon: '/static/icons/toolbox/station.png',
...@@ -255,18 +164,18 @@ ...@@ -255,18 +164,18 @@
}, },
], ],
}, },
{ // {
key: 'action', // key: 'action',
align: 'bottom', // align: 'bottom',
buttons: [ // buttons: [
{ // {
name: '排名', // name: '排名',
icon: '/static/icons/toolbox/rank.png', // icon: '/static/icons/toolbox/rank.png',
type: 'button', // type: 'button',
handle: () => {}, // handle: () => {},
}, // },
], // ],
}, // },
], ],
}) })
...@@ -311,7 +220,7 @@ ...@@ -311,7 +220,7 @@
setToolBoxProps({ bottom: value }) setToolBoxProps({ bottom: value })
// 当底部 Bar 小部件高度变化时，重新设置地图的中心点，使界面显示效果更好 // 当底部 Bar 小部件高度变化时，重新设置地图的中心点，使界面显示效果更好
if (map?.isReady?.value) { if (map.isReady.value) {
if (value === 220) { if (value === 220) {
map.flyTo({ map.flyTo({
center: [111.6, 26.770844], center: [111.6, 26.770844],
...@@ -328,9 +237,87 @@ ...@@ -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) console.log(item)
param.query.liveQueryType = item.value
getData(map, true)
await logicalLayerGetData(true)
} }
</script> </script>
......
src/utils/const/Navigation.ts
...@@ -83,8 +83,8 @@ export const liveModules: NavItemType[] = [ ...@@ -83,8 +83,8 @@ export const liveModules: NavItemType[] = [
* token: V4 版本后端生成的一个长期有效 Token，固定值，必传 * token: V4 版本后端生成的一个长期有效 Token，固定值，必传
* open: true 代表可以从嵌入的页面打开新页面，默认为 false，非必传（注意：打开的子页面也进行了重写适配，一般来说不用担心出现意外情况，但注意进行简单测试） * open: true 代表可以从嵌入的页面打开新页面，默认为 false，非必传（注意：打开的子页面也进行了重写适配，一般来说不用担心出现意外情况，但注意进行简单测试）
*/ */
// url: `https://hntq.zhijietianqi.com/h5/web/monitoringOfLive/new-severe-weather.v3.html?app=5&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}`, // 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({ ...@@ -266,6 +266,19 @@ export const defHttp = createAxios({
}) })
// other api url // 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({ // export const otherHttp = createAxios({
// transform: { // transform: {
// inject: (config: AxiosRequestConfig<any>, options: http.RequestOptions) => { // inject: (config: AxiosRequestConfig<any>, options: http.RequestOptions) => {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论