upd: 更新降水模块界面

.env

@@ -4,9 +4,5 @@ VITE_GLOB_APP_NAME = Basic APP
 # APP 描述
 VITE_GLOB_APP_DESCRIPTION = APP 基础工程
 
-
-
-
-
 # 地图基础服务ip
 VITE_MAP_API_BASE_URL = 'https://hntq.zhijietianqi.com'
\ No newline at end of file

.env.development

@@ -3,3 +3,5 @@ VITE_GLOB_API_URL=http://192.168.0.156:8081
 
 # API 接口地址前缀
 VITE_GLOB_API_URL_PREFIX=/api
+
+

.env.production

@@ -3,3 +3,4 @@ VITE_GLOB_API_URL=http://localhost:8080
 
 # API 接口地址前缀
 VITE_GLOB_API_URL_PREFIX=/api
+

src/components/CustomPicker/index.vue

-<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>
     <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" />
-        <text class="ml-1">时间：</text>
-        <text class="text-#1890FF">11月30日09时30分-12月1日09时30分</text>
-        <fui-icon name="arrowright" size="45" class="absolute right-16" />
+        <fui-icon name="wait" size="40" />
+        <text class="ml-1">小时级：</text>
+        <text class="text-#1890FF" @click="show = !show">
+            {{ 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>
 </template>
-
-<style lang="less" scoped></style>

src/components/Map/Mapbox/Map.vue

 <script>
     export default {
         data() {
-            return {}
+            return {
+                loading: true,
+            }
+        },
+        created() {
+            Message.loading()
         },
-        onLoad() {},
         methods: {
             changeOption() {},
             onViewClick(options) {
                 console.log(options)
             },
+            maploaded() {
+                Message.hideLoading()
+            },
         },
     }
 </script>
@@ -18,16 +25,16 @@
     import { appendScript, appendStylesheet } from '/@/utils/dom'
     import { accessToken, defaultStyle, loadMapControl, PopupImage, buildTdtTileUrl, EmptyImage, CustomControl } from '/@/components/Map/Mapbox'
 
-    let map
+    let mapInstance
+
     export default {
     	mounted () {
-    		if (typeof window.echarts === 'function') {
+    		if (typeof window.mapInstance === 'function') {
     			this.initMap()
     		} else {
                 this.loadMaplibs().then(() =>{
                     this.initMap()
                 })
-
     		}
     	},
     	methods: {
@@ -37,20 +44,19 @@
                 return  Promise.all([appendScript(id,`${resource}js`),appendStylesheet(id,`${resource}css`)])
             },
     		initMap() {
-
-                map = new mapboxgl.Map({
+                mapInstance = new mapboxgl.Map({
                     accessToken,
                     container: 'echarts',
                     ...mapOpts,
-
                     style: Object.assign({
                         ...mapStyles,
                     })
                 })
 
-    		},
-    		updateEcharts(newValue, oldValue, ownerInstance, instance) {
-    			// 监听 service 层数据变更
+
+                mapInstance.on('load',()=>{
+                    this.$ownerInstance.callMethod('maploaded')
+                })
     		},
     		onClick(event, ownerInstance) {
     			// 调用 service 层的方法
@@ -58,6 +64,9 @@
     			// 	  test: 'test'
     			// })
     		}
+            // updateEcharts(newValue, oldValue, ownerInstance, instance) {
+    		// 	// 监听 service 层数据变更
+    		// },
     	}
     }
 </script>
@@ -65,7 +74,7 @@
 <template>
     <view class="content">
         <!-- #ifdef APP-PLUS || H5 -->
-        <view id="echarts" class="w-100% h-600px" />
+        <view id="echarts" class="w-100% h-100%" />
         <!-- #endif -->
         <!-- #ifndef APP-PLUS || H5 -->
         <view>非 APP、H5 环境不支持</view>
@@ -79,5 +88,6 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
+        height: 100%;
     }
 </style>

src/components/Map/Mapbox/index.ts

@@ -25,9 +25,8 @@ export function buildTdtTileUrl(id: string, tk: string) {
  * 地图样式
  */
 export const defaultStyle: mapboxgl.Style = {
-    version: 8,
     zoom: 5.5,
-    center: [111.507082, 27.19464],
+    version: 8,
     sprite: `${host}/api/sprites/straw.v2/sprite`,
     glyphs: `${host}/api/fonts/{fontstack}/{range}.pbf`,
     sources: {

src/components/Map/Mapbox/style.ts

 /** 地图地址路径 */
-const MapUrl = import.meta.env.VITE_MAP_API_BASE_URL
+const MapUrl = 'https://hntq.zhijietianqi.com'
 
 /** 地图基础样式配置 */
 export const countyLayers: mapboxgl.AnyLayer[] = [
@@ -342,7 +342,7 @@ export const mapOpts = {
         [125.03, 33.52],
     ],
     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',
 }