提交 82b03e90 作者: 陈楚尹

upd: 更新降水模块界面

上级 29af9546
...@@ -4,9 +4,5 @@ VITE_GLOB_APP_NAME = Basic APP ...@@ -4,9 +4,5 @@ VITE_GLOB_APP_NAME = Basic APP
# APP 描述 # APP 描述
VITE_GLOB_APP_DESCRIPTION = APP 基础工程 VITE_GLOB_APP_DESCRIPTION = APP 基础工程
# 地图基础服务ip # 地图基础服务ip
VITE_MAP_API_BASE_URL = 'https://hntq.zhijietianqi.com' VITE_MAP_API_BASE_URL = 'https://hntq.zhijietianqi.com'
\ No newline at end of file
...@@ -3,3 +3,5 @@ VITE_GLOB_API_URL=http://192.168.0.156:8081 ...@@ -3,3 +3,5 @@ VITE_GLOB_API_URL=http://192.168.0.156:8081
# API 接口地址前缀 # API 接口地址前缀
VITE_GLOB_API_URL_PREFIX=/api VITE_GLOB_API_URL_PREFIX=/api
...@@ -3,3 +3,4 @@ VITE_GLOB_API_URL=http://localhost:8080 ...@@ -3,3 +3,4 @@ VITE_GLOB_API_URL=http://localhost:8080
# API 接口地址前缀 # API 接口地址前缀
VITE_GLOB_API_URL_PREFIX=/api VITE_GLOB_API_URL_PREFIX=/api
<script setup lang="ts"></script> <script setup lang="ts">
import dayjs from 'dayjs'
const props = defineProps({
type: {
type: String,
default: '5',
},
})
const opts = [
{ label: '小时级', value: '4', format: 'MM月DD日HH时', valueFormat: 'YYYY-MM-DD HH' },
{ label: '分钟级', value: '5', format: 'MM月DD日HH时mm分', valueFormat: 'YYYY-MM-DD HH:mm' },
]
const _type = ref<string>(props.type)
const active = computed(() => opts.find((v) => v.value === _type.value))
// 是否显示
const show = ref<boolean>(true)
// 开始时间
const sTime = ref<string>(dayjs().subtract(1, 'day').format(active.value.valueFormat))
// 结束时间
const eTime = ref<string>(dayjs().format(active.value.valueFormat))
watch(
() => props.type,
(val) => {
_type.value = val
},
)
// 时间组件改变
function change(e) {
const format = active.value.valueFormat
const { startDate, endDate } = toRaw(e)
sTime.value = dayjs(toRaw(startDate).result).format(format)
eTime.value = dayjs(toRaw(endDate).result).format(format)
}
function cancel() {
show.value = false
}
</script>
<template> <template>
<view class="h-84 lh-10 flex text-28 bg-#fff p-2 pt-0 pb-0 pos-relative"> <view class="h-84 lh-10 flex text-28 bg-#fff p-2 pt-0 pb-0 pos-relative">
<fui-icon name="wait" size="45" /> <fui-icon name="wait" size="40" />
<text class="ml-1">时间:</text> <text class="ml-1">小时级:</text>
<text class="text-#1890FF">11月30日09时30分-12月1日09时30分</text> <text class="text-#1890FF" @click="show = !show">
<fui-icon name="arrowright" size="45" class="absolute right-16" /> {{ dayjs(sTime).format(active.format) }}
-
{{ dayjs(eTime).format(active.format) }}
</text>
<fui-icon name="arrowright" size="45" class="absolute right-16" color="#000000" />
<!-- 时间组件 -->
<fui-date-picker
range
:value="dayjs(sTime).format(active.valueFormat)"
:show="show"
:type="type"
@change="change"
@cancel="cancel"
/>
</view> </view>
</template> </template>
<style lang="less" scoped></style>
<script> <script>
export default { export default {
data() { data() {
return {} return {
loading: true,
}
},
created() {
Message.loading()
}, },
onLoad() {},
methods: { methods: {
changeOption() {}, changeOption() {},
onViewClick(options) { onViewClick(options) {
console.log(options) console.log(options)
}, },
maploaded() {
Message.hideLoading()
},
}, },
} }
</script> </script>
...@@ -18,16 +25,16 @@ ...@@ -18,16 +25,16 @@
import { appendScript, appendStylesheet } from '/@/utils/dom' import { appendScript, appendStylesheet } from '/@/utils/dom'
import { accessToken, defaultStyle, loadMapControl, PopupImage, buildTdtTileUrl, EmptyImage, CustomControl } from '/@/components/Map/Mapbox' import { accessToken, defaultStyle, loadMapControl, PopupImage, buildTdtTileUrl, EmptyImage, CustomControl } from '/@/components/Map/Mapbox'
let map let mapInstance
export default { export default {
mounted () { mounted () {
if (typeof window.echarts === 'function') { if (typeof window.mapInstance === 'function') {
this.initMap() this.initMap()
} else { } else {
this.loadMaplibs().then(() =>{ this.loadMaplibs().then(() =>{
this.initMap() this.initMap()
}) })
} }
}, },
methods: { methods: {
...@@ -37,27 +44,29 @@ ...@@ -37,27 +44,29 @@
return Promise.all([appendScript(id,`${resource}js`),appendStylesheet(id,`${resource}css`)]) return Promise.all([appendScript(id,`${resource}js`),appendStylesheet(id,`${resource}css`)])
}, },
initMap() { initMap() {
mapInstance = new mapboxgl.Map({
map = new mapboxgl.Map({
accessToken, accessToken,
container: 'echarts', container: 'echarts',
...mapOpts, ...mapOpts,
style: Object.assign({ style: Object.assign({
...mapStyles, ...mapStyles,
}) })
}) })
},
updateEcharts(newValue, oldValue, ownerInstance, instance) { mapInstance.on('load',()=>{
// 监听 service 层数据变更 this.$ownerInstance.callMethod('maploaded')
})
}, },
onClick(event, ownerInstance) { onClick(event, ownerInstance) {
// 调用 service 层的方法 // 调用 service 层的方法
// ownerInstance.callMethod('onViewClick', { // ownerInstance.callMethod('onViewClick', {
// test: 'test' // test: 'test'
// }) // })
} }
// updateEcharts(newValue, oldValue, ownerInstance, instance) {
// // 监听 service 层数据变更
// },
} }
} }
</script> </script>
...@@ -65,7 +74,7 @@ ...@@ -65,7 +74,7 @@
<template> <template>
<view class="content"> <view class="content">
<!-- #ifdef APP-PLUS || H5 --> <!-- #ifdef APP-PLUS || H5 -->
<view id="echarts" class="w-100% h-600px" /> <view id="echarts" class="w-100% h-100%" />
<!-- #endif --> <!-- #endif -->
<!-- #ifndef APP-PLUS || H5 --> <!-- #ifndef APP-PLUS || H5 -->
<view>非 APP、H5 环境不支持</view> <view>非 APP、H5 环境不支持</view>
...@@ -79,5 +88,6 @@ ...@@ -79,5 +88,6 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%;
} }
</style> </style>
...@@ -25,9 +25,8 @@ export function buildTdtTileUrl(id: string, tk: string) { ...@@ -25,9 +25,8 @@ export function buildTdtTileUrl(id: string, tk: string) {
* 地图样式 * 地图样式
*/ */
export const defaultStyle: mapboxgl.Style = { export const defaultStyle: mapboxgl.Style = {
version: 8,
zoom: 5.5, zoom: 5.5,
center: [111.507082, 27.19464], version: 8,
sprite: `${host}/api/sprites/straw.v2/sprite`, sprite: `${host}/api/sprites/straw.v2/sprite`,
glyphs: `${host}/api/fonts/{fontstack}/{range}.pbf`, glyphs: `${host}/api/fonts/{fontstack}/{range}.pbf`,
sources: { sources: {
......
/** 地图地址路径 */ /** 地图地址路径 */
const MapUrl = import.meta.env.VITE_MAP_API_BASE_URL const MapUrl = 'https://hntq.zhijietianqi.com'
/** 地图基础样式配置 */ /** 地图基础样式配置 */
export const countyLayers: mapboxgl.AnyLayer[] = [ export const countyLayers: mapboxgl.AnyLayer[] = [
...@@ -342,7 +342,7 @@ export const mapOpts = { ...@@ -342,7 +342,7 @@ export const mapOpts = {
[125.03, 33.52], [125.03, 33.52],
], ],
zoom: 5.5, // starting zoom zoom: 5.5, // starting zoom
center: [111.6, 28.168], // starting position [lng, lat] center: [111.6, 26.168], // starting position [lng, lat]
projection: 'equirectangular', projection: 'equirectangular',
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论