Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 58b971e1 作者: 宇宙超人
操作

按需修改样式

上级 25740bd7
正在显示 包含 467 行增加 和 300 行删除
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
src/androidPrivacy.json
{
"prompt": "template"
"prompt" : "template"
}
src/common/public.less
......@@ -35,3 +35,15 @@
white-space: nowrap;
text-overflow: ellipsis;
}
.fontsize_28{
font-size: 28rpx;
font-weight: 500;
color: #333333;
}
.fontsize_24{
font-size: 24rpx;
font-weight: 400;
}
.align-center{
align-items: center;
}
src/components/Map/Mapbox/hook.ts
......@@ -187,13 +187,22 @@ export function flyTo(
map: MapboxInstance,
center: [number, number] = DEFAULT_MAP_CENTER,
zoom: number = DEFAULT_MAP_ZOOM,
duration?: number,
) {
map.flyTo({
const flyOptions: any = {
center,
zoom,
speed: 0.2,
essential: true,
})
}
// 如果提供了时长，使用 duration 参数
if (duration !== undefined) {
flyOptions.duration = duration * 1000 // 转换为毫秒
} else {
flyOptions.speed = 0.2
}
map.flyTo(flyOptions)
}
/**
......
src/components/Map/Mapbox/index.ts
......@@ -39,18 +39,18 @@ export const defaultStyle: mapboxgl.Style = {
sprite: `${host}/api/sprites/drainage/sprite`,
glyphs: `${host}/api/fonts/{fontstack}/{range}.pbf`,
sources: {
'wms-img_w-source': {
type: 'raster',
tiles: [buildTdtTileUrl('img', tk)],
tileSize: 256,
maxzoom: 18,
},
'wms-cia_w-source': {
type: 'raster',
tiles: [buildTdtTileUrl('cia', tk)],
tileSize: 256,
maxzoom: 18,
},
'wms-img_w-source': {
type: 'raster',
tiles: [buildTdtTileUrl('cia', tk)],
tileSize: 256,
maxzoom: 18,
},
},
layers: [
// 占位图层
......@@ -58,14 +58,7 @@ export const defaultStyle: mapboxgl.Style = {
id: 'background',
type: 'background',
layout: { visibility: 'visible' },
paint: { 'background-color': '#FFFFFF' },
},
// 默认图层 - 影像底图
{
id: 'wms-img_w-layer',
type: 'raster',
source: 'wms-img_w-source',
layout: { visibility: 'visible' },
paint: { 'background-color': '#EFF3FA' },
},
// 默认图层 - 标注底图
{
......@@ -74,6 +67,13 @@ export const defaultStyle: mapboxgl.Style = {
source: 'wms-cia_w-source',
layout: { visibility: 'visible' },
},
// 默认图层 - 影像底图
{
id: 'wms-img_w-layer',
type: 'raster',
source: 'wms-img_w-source',
layout: { visibility: 'visible' },
},
// 天空图层
{
id: 'sky',
......
src/components/Map/Mapbox/mapbox.module.js
......@@ -100,7 +100,7 @@ export default {
if (this.map && this.map.remove) {
this.map.remove()
}
console.log(123123, merge(defaultStyle, options?.style))
// [107.570282, 19.474339],
// [115.629717, 34.466859],
......
src/pages/common/feedback/index.vue
......@@ -58,7 +58,7 @@
</view>
<text class="text-black">联系方式<text class="text-grey">(选填)</text> </text>
<input class="feedback-input" v-model="model.mobile" placeholder="请输入您的手机号" />
<input class="feedback-input" type="number" v-model="model.mobile" placeholder="请输入您的手机号" />
<view class="btn">
<fui-button
:disabled="!model.content || model.loading"
......
src/pages/fuwu/dailijizhang/dailijizhang.vue
......@@ -44,7 +44,7 @@
<view class="codefun-mt-12 codefun-flex-col section_4">
<text class="codefun-self-start font text_11">郴州市财汇商务咨询有限公司</text>
<text class="codefun-self-stretch font_6 text_12">
州市财汇商务咨询有限公司自2022年成立以来，业务发展迅速，客户群体以政府及公共机构为主。服务涵盖：
郴州市财汇商务咨询有限公司自2022年成立以来，业务发展迅速，客户群体以政府及公共机构为主。服务涵盖：
</text>
<view class="codefun-flex-col codefun-self-stretch group_5">
<view class="codefun-flex-row group_6">
......@@ -513,6 +513,7 @@
font-family: SourceHanSansCN;
line-height: 24rpx;
color: #666666;
font-weight: 400;
}
.group_18 {
margin-top: 24rpx;
......@@ -566,8 +567,8 @@
.font_8 {
font-size: 28rpx;
font-family: SourceHanSansCN;
line-height: 26.34rpx;
color: #333333;
font-weight: 500;
}
}
.font {
......
src/pages/fuwu/fuwu.vue
......@@ -172,7 +172,7 @@
},
],
// 农机案例
// 品牌策划
machineryCases: [
{
id: 1,
......@@ -181,7 +181,7 @@
},
{
id: 2,
name: '绿鲜农场',
name: '山水有机',
image: '/static/images/codefun/8d11e3cbcb918502bb6582a24cddb930.png',
},
],
......@@ -378,7 +378,7 @@
@click="onMenuItemClick(item)"
>
<image class="image_7" :src="item.icon_url" />
<text class="font_4" :class="`text_${item.id + 2} mt-13`">{{ item.name }}</text>
<text class="fontsize_28" :class="`text_${item.id + 2} mt-13`">{{ item.name }}</text>
</view>
</view>
</view>
......@@ -476,6 +476,9 @@
>
<view
class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-stretch section_10"
:style="{
'background-image': `url(${product.image})`,
}"
>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3"
......@@ -549,7 +552,7 @@
<view
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_14"
>
<text class="font_5">一站式解决农机问题</text>
<text class="font_5">品牌策划</text>
<!-- <text class="font_6 text_37" @click="onViewAllMachineryCases">全部案例</text> -->
</view>
<view class="codefun-flex-col codefun-self-stretch section_14">
......@@ -1188,7 +1191,7 @@
.section_10 {
padding: 20rpx 0 130rpx;
border-radius: 16rpx 16rpx 0rpx 0rpx;
background-image: url('/static/images/codefun/e1d1e83ba1f6592210e646c5b6ca5b53.png');
// background-image: url('/static/images/codefun/e1d1e83ba1f6592210e646c5b6ca5b53.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
......
src/pages/linghuoyonggong/components/yonggongmap.vue
<!-- 农场详情 -->
<script setup lang="ts">
import * as turf from '@turf/turf'
import type { Page } from './config'
import Navigate from '@/utils/page/navigate'
import {
addDefaultGeoJSONSource,
addDefaultSplotLayer,
addDefaultSymbolLayer,
useMapbox,
} from '@/components/Map/Mapbox/hook'
import { getText } from '@/utils/dict/area'
import * as LinghuoyonggongAPI from '@/api/model/linghuoyonggong'
// 页面参数
const page = reactive<Page>({
id: 'example-mapbox',
init: false,
requests: 0,
latest: null,
query: {},
})
const model = reactive({
id: '',
name: '',
lonlat: `${uni.getStorageSync('location').lon},${uni.getStorageSync('location').lat}`,
address: '',
description: '',
// 地块、位置信息 GeoJSON
plots: [],
// 设备信息
devices: [],
// 分类标签
categoryTabs: [
{ id: null, name: '全部' },
{ id: 1, name: '种植' },
{ id: 2, name: '养殖' },
{ id: 3, name: '采摘' },
{ id: 4, name: '其他' },
],
search: {
pageNo: 1,
pageSize: 10,
publishstatu: 1,
type: null,
createBy: '',
},
employmentList: [],
loading: false,
total: 0,
requestDebounce: null,
})
onLoad((options) => {
model.id = options.id
model.name = decodeURIComponent(options.name)
model.search.pageNo = 1
model.search.publishstatu = 1
model.search.createBy = ''
model.employmentList = []
getEmploymentList()
})
// 地图组件
const center: [number, number] = [uni.getStorageSync('location').lon, uni.getStorageSync('location').lat]
const [registerMap, map] = useMapbox({
style: { center, zoom: 15 },
onLoaded: (data) => {
const employments = []
// 渲染设备数据
model.employmentList.forEach((item) => {
employments.push(
turf.point([item.longitude, item.latitude], {
name: item.name,
description: item.content,
icon: 'GD',
popup: `{{name}}`,
}),
)
})
addDefaultGeoJSONSource(map, `${page.id}-text`, employments)
addDefaultSymbolLayer(map, `${page.id}-text`, {
layout: {
'text-field': '',
'icon-image': ['get', 'icon'],
'icon-size': 1,
},
})
},
onSourceRequestHandle: () => {
page.requests--
if (page.requests === 0) {
Message.hideLoading()
}
},
onSourceRequestErrorHandle: () => {
Message.hideLoading()
},
})
// 分类标签点击事件
function onCategoryTabClick(tab: any) {
model.search.type = tab.id
model.search.pageNo = 1
model.employmentList = []
getEmploymentList()
// 在这里添加具体的分类标签点击逻辑
}
import * as turf from '@turf/turf'
import type { Page } from './config'
import Navigate from '@/utils/page/navigate'
import {
addDefaultGeoJSONSource,
addDefaultSplotLayer,
addDefaultSymbolLayer,
useMapbox,
flyTo,
} from '@/components/Map/Mapbox/hook'
import { getText } from '@/utils/dict/area'
import * as LinghuoyonggongAPI from '@/api/model/linghuoyonggong'
// 页面参数
const page = reactive<Page>({
id: 'example-mapbox',
init: false,
requests: 0,
latest: null,
query: {},
})
const model = reactive({
id: '',
name: '',
lonlat: `${uni.getStorageSync('location').lon},${uni.getStorageSync('location').lat}`,
address: '',
description: '',
// 地块、位置信息 GeoJSON
plots: [],
// 设备信息
devices: [],
// 分类标签
categoryTabs: [
{ id: null, name: '全部' },
{ id: 1, name: '种植' },
{ id: 2, name: '养殖' },
{ id: 3, name: '采摘' },
{ id: 4, name: '其他' },
],
search: {
pageNo: 1,
pageSize: 10,
publishstatu: 1,
type: null,
createBy: '',
},
employmentList: [],
loading: false,
total: 0,
requestDebounce: null,
// 用户当前位置
userLocation: {
longitude: uni.getStorageSync('location').lon,
latitude: uni.getStorageSync('location').lat,
},
})
function getEmploymentList() {
// 如果正在加载或没有更多数据，直接返回
if (model.loading || (model.total > 0 && model.employmentList.length >= model.total)) {
return
onLoad((options) => {
model.id = options.id
model.name = decodeURIComponent(options.name)
model.search.pageNo = 1
model.search.publishstatu = 1
model.search.createBy = ''
model.employmentList = []
getEmploymentList()
})
// 地图组件
const center: [number, number] = [uni.getStorageSync('location').lon, uni.getStorageSync('location').lat]
const [registerMap, map] = useMapbox({
style: { center, zoom: 12 },
onLoaded: (data) => {
// 渲染用户当前位置
const userLocationPoint = turf.point([
model.userLocation.longitude,
model.userLocation.latitude
], {
name: '我的位置',
description: '当前位置',
icon: 'GD',
popup: `我的位置`,
})
addDefaultGeoJSONSource(map, `${page.id}-user-location`, [userLocationPoint])
addDefaultSymbolLayer(map, `${page.id}-user-location`, {
layout: {
'text-field': '',
'icon-image': ['get', 'icon'],
'icon-size': 1.2,
'icon-allow-overlap': true,
},
paint: {
'icon-color': '#FF4444',
},
})
const employments = []
// 渲染设备数据
model.employmentList.forEach((item) => {
employments.push(
turf.point([item.longitude, item.latitude], {
name: item.name,
description: item.content,
icon: 'GD',
popup: `{{name}}`,
}),
)
})
addDefaultGeoJSONSource(map, `${page.id}-text`, employments)
addDefaultSymbolLayer(map, `${page.id}-text`, {
layout: {
'text-field': '',
'icon-image': ['get', 'icon'],
'icon-size': 1,
},
})
},
onSourceRequestHandle: () => {
page.requests--
if (page.requests === 0) {
Message.hideLoading()
}
model.loading = true
try {
LinghuoyonggongAPI.employmentList(model.search).then(async (res) => {
const { records, total } = res
// 批量处理数据，避免多次DOM操作
const processedRecords = records.map((item) => {
// 缓存区域处理结果
item.area = getText(item.area, ' / ')
// 计算天数并缓存结果
if (item.starttime && item.estimatedendtime) {
item.daysDiff = getDaysDiff(item.starttime, item.estimatedendtime)
}
return item
})
},
onSourceRequestErrorHandle: () => {
Message.hideLoading()
},
})
// 分类标签点击事件
function onCategoryTabClick(tab: any) {
model.search.type = tab.id
model.search.pageNo = 1
model.employmentList = []
getEmploymentList()
// 在这里添加具体的分类标签点击逻辑
}
// 一次性更新数据，避免多次响应式更新
if (model.search.pageNo === 1) {
model.employmentList = processedRecords
} else {
// 避免重复数据加载
const existingIds = new Set(model.employmentList.map((item) => item.id))
const newRecords = processedRecords.filter((item) => !existingIds.has(item.id))
model.employmentList = [...model.employmentList, ...newRecords]
function getEmploymentList() {
// 如果正在加载或没有更多数据，直接返回
if (model.loading || (model.total > 0 && model.employmentList.length >= model.total)) {
return
}
model.loading = true
try {
LinghuoyonggongAPI.employmentList(model.search).then(async (res) => {
const { records, total } = res
// 批量处理数据，避免多次DOM操作
const processedRecords = records.map((item) => {
// 缓存区域处理结果
item.area = getText(item.area, ' / ')
// 计算天数并缓存结果
if (item.starttime && item.estimatedendtime) {
item.daysDiff = getDaysDiff(item.starttime, item.estimatedendtime)
}
model.total = total
return item
})
} catch (error) {
console.error('获取用工列表失败:', error)
// 这里可以添加用户友好的错误提示
// uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' })
} finally {
model.loading = false
model.requestDebounce = null
}
// 一次性更新数据，避免多次响应式更新
if (model.search.pageNo === 1) {
model.employmentList = processedRecords
} else {
// 避免重复数据加载
const existingIds = new Set(model.employmentList.map((item) => item.id))
const newRecords = processedRecords.filter((item) => !existingIds.has(item.id))
model.employmentList = [...model.employmentList, ...newRecords]
}
model.total = total
})
} catch (error) {
console.error('获取用工列表失败:', error)
// 这里可以添加用户友好的错误提示
// uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' })
} finally {
model.loading = false
model.requestDebounce = null
}
}
// 获取时间差
function getDaysDiff(date1: Date | number | string, date2: Date | number | string): number {
// 将输入转换为Date对象
const d1 = new Date(date1)
const d2 = new Date(date2)
// 获取时间差
function getDaysDiff(date1: Date | number | string, date2: Date | number | string): number {
// 将输入转换为Date对象
const d1 = new Date(date1)
const d2 = new Date(date2)
// 检查日期是否有效
if (Number.isNaN(d1.getTime()) || Number.isNaN(d2.getTime())) {
throw new TypeError('无效的日期格式')
}
// 检查日期是否有效
if (Number.isNaN(d1.getTime()) || Number.isNaN(d2.getTime())) {
throw new TypeError('无效的日期格式')
}
// 设置时间部分为00:00:00，只比较日期部分
d1.setHours(0, 0, 0, 0)
d2.setHours(0, 0, 0, 0)
// 计算两个日期之间的毫秒差
const diffTime = Math.abs(d2.getTime() - d1.getTime())
// 设置时间部分为00:00:00，只比较日期部分
d1.setHours(0, 0, 0, 0)
d2.setHours(0, 0, 0, 0)
// 转换为天数
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
// 计算两个日期之间的毫秒差
const diffTime = Math.abs(d2.getTime() - d1.getTime())
return diffDays
}
// 转换为天数
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
// 回到当前位置
function backToUserLocation() {
if (map && model.userLocation.longitude && model.userLocation.latitude) {
flyTo(map, [model.userLocation.longitude, model.userLocation.latitude], 15, 0.5)
uni.showToast({
title: '已回到当前位置',
icon: 'none',
duration: 1500
})
} else {
// 重新获取用户位置
uni.getLocation({
type: 'wgs84',
success: (res) => {
if (res.longitude !== 0 && res.latitude !== 0) {
model.userLocation.longitude = res.longitude
model.userLocation.latitude = res.latitude
return diffDays
// 更新缓存位置
uni.setStorageSync('location', {
lon: res.longitude,
lat: res.latitude,
})
// 更新地图上的用户位置标记
const userLocationPoint = turf.point([res.longitude, res.latitude], {
name: '我的位置',
description: '当前位置',
icon: 'user-location-icon',
popup: `我的位置`,
})
addDefaultGeoJSONSource(map, `${page.id}-user-location`, [userLocationPoint])
addDefaultSymbolLayer(map, `${page.id}-user-location`, {
layout: {
'text-field': '',
'icon-image': ['get', 'icon'],
'icon-size': 1.2,
'icon-allow-overlap': true,
},
paint: {
'icon-color': '#FF4444',
},
})
// 飞到用户位置
flyTo(map, [res.longitude, res.latitude], 15, 0.5)
uni.showToast({
title: '已获取并回到当前位置',
icon: 'none',
duration: 1500
})
}
},
fail: (err) => {
console.error('获取位置失败:', err)
uni.showToast({
title: '获取位置失败，请检查定位权限',
icon: 'none',
duration: 2000
})
}
})
}
}
onNavigationBarButtonTap((e) => {
if (e.index === 0) {
Navigate.to('/pages/linghuoyonggong/linghuoyonggong')
}
})
onNavigationBarButtonTap((e) => {
if (e.index === 0) {
Navigate.to('/pages/linghuoyonggong/linghuoyonggong')
}
})
</script>
<template>
<view class="page h-95_dl_5vh bg-#E6F5E8 flex flex-col justify-between">
<view class="h-200rpx p-3">
<view class="w-full h-60rpx border-rd-3xl!">
<fui-input
:bottomLeft="0"
class="w-full h-full border-rd-3xl!"
borderTop
placeholder="请输入搜索内容"
<fui-input :bottomLeft="0" class="w-full h-full border-rd-3xl!" borderTop placeholder="请输入搜索内容"
placeholderStyle="color: #CCCCCC; font-weight: 400; font-family: PingFangSC-Regular;"
v-model="text"
>
v-model="text">
<template #left>
<view class="fui-left__icon">
<fui-icon name="search" color="#CCCCCC" :size="36" />
......@@ -203,13 +292,10 @@
</fui-input>
</view>
<view class="codefun-mt-14 codefun-flex-row group_2 gap-2">
<view
v-for="tab in model.categoryTabs"
:key="tab.id"
<view v-for="tab in model.categoryTabs" :key="tab.id"
class="codefun-flex-col codefun-justify-start codefun-items-center"
:class="[tab.id === model.search.type ? 'text-wrapper' : 'text-wrapper_2']"
@click="onCategoryTabClick(tab)"
>
@click="onCategoryTabClick(tab)">
<text class="font_2 text_2">
{{ tab.name }}
</text>
......@@ -218,57 +304,113 @@
</view>
<!-- 地图组件 -->
<!-- <view class="h-730 overflow-hidden map-box"> -->
<view class="overflow-hidden map-box" style="height: calc(100% - 200rpx)">
<view class="overflow-hidden map-box" style="height: calc(100vh - 200rpx)">
<!-- 地图组件 -->
<Mapbox @register="registerMap" />
<!-- 回到当前位置按钮 -->
<view class="location-control" @click="backToUserLocation">
<view class="location-button">
<fui-icon name="location" color="#5DB66F" :size="36" />
</view>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
//
.page {
.map-box {
// #ifdef APP-PLUS
position: relative;
top: 0;
// #endif
// #ifdef H5
position: relative;
top: 0;
// #endif
//
.page {
min-height: 100vh;
background: #E6F5E8;
.map-box {
// #ifdef APP-PLUS
position: relative;
top: 0;
// #endif
// #ifdef H5
position: relative;
top: 0;
// #endif
width: 690rpx;
left: 30rpx;
border-radius: 20rpx;
background: #E6F5E8;
}
.group_2 {
.text-wrapper {
flex: 1 1 120rpx;
background-color: #5db66f;
border-radius: 19998rpx;
line-height: 60rpx;
height: 60rpx;
.text_2 {
color: #ffffff;
}
}
.group_2 {
.text-wrapper {
flex: 1 1 120rpx;
background-color: #5db66f;
border-radius: 19998rpx;
line-height: 60rpx;
height: 60rpx;
.text_2 {
color: #ffffff;
}
.text-wrapper_2 {
flex: 1 1 120rpx;
line-height: 60rpx;
background-color: #ffffff;
border-radius: 19998rpx;
height: 60rpx;
.text_3 {
line-height: 25.88rpx;
}
.text-wrapper_2 {
flex: 1 1 120rpx;
line-height: 60rpx;
background-color: #ffffff;
border-radius: 19998rpx;
height: 60rpx;
.text_3 {
line-height: 25.88rpx;
}
.text_4 {
line-height: 26.16rpx;
}
.text_5 {
line-height: 25.96rpx;
}
.text_6 {
line-height: 25.68rpx;
.text_4 {
line-height: 26.16rpx;
}
.text_5 {
line-height: 25.96rpx;
}
.text_6 {
line-height: 25.68rpx;
}
}
}
// 回到当前位置控制按钮样式
.location-control {
position: absolute;
bottom: 100rpx;
right: 30rpx;
z-index: 1000;
.location-button {
display: flex;
align-items: center;
justify-content: center;
width: 80rpx;
height: 80rpx;
background: rgba(255, 255, 255, 0.95);
border-radius: 50%;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10rpx);
border: 2rpx solid #5DB66F;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
background: linear-gradient(135deg, #5DB66F 0%, #4CAF50 100%);
:deep(.fui-icon) {
color: #FFFFFF !important;
}
}
&:hover {
transform: scale(1.05);
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.2);
}
}
}
}
</style>
src/pages/login/login.vue
......@@ -308,6 +308,7 @@
v-model="model.form.data.code"
backgroundColor="transparent"
borderColor="#DDDDDD"
type="number"
>
<template #left>
<view class="fui-left__icon mr-2">
......
src/pages/news/index.vue
......@@ -122,7 +122,7 @@
@click="toNewsDetail(news)"
>
<view class="flex flex-col justify-between" :style="news.posterUrl ? 'width: 68%' : 'width: 100%'">
<view class="ellipsis-multiline text-28 color-#333333">{{ news.title }}</view>
<view class="ellipsis-multiline fontsize_28 color-#333333">{{ news.title }}</view>
<view class="flex flex-row justify-between text-25 color-#686868">
<text>{{ dayjs(news.publishDate).format('YYYY年MM月DD日') }}</text>
<view class="mr-1 flex-center">
......@@ -132,7 +132,7 @@
<view v-show="!news.posterUrl" class="w-4%"></view>
</view>
</view>
<view v-show="news.posterUrl" class="w-30% h-120">
<view v-show="news.posterUrl" class="w-30% h-130">
<image class="w-full h-full border-rd" :src="news.posterUrl" />
</view>
</view>
......
src/pages/nongchang/components/WeatherForecast.vue
......@@ -20,7 +20,7 @@
console.log('forecasts', forecasts)
// 逐 7 天预报数据
const _7DayForecastData = forecasts.map((item) => {
const _7DayForecastData = forecasts.map((item, index) => {
return {
minTem: item.tempMin,
maxTem: item.tempMax,
......@@ -28,9 +28,12 @@
textNight: item.textNight,
dayWeather: item.iconDay,
nightWeather: item.iconNight,
fxDate: item.fxDate,
...getDayLabelValue(index),
}
})
const _7DayForecastMaxTemValue = Math.max(..._7DayForecastData.map((item) => Number(item.maxTem)))
const _7DayForecastMinTemValue = Math.min(..._7DayForecastData.map((item) => Number(item.minTem)))
// 设置逐 7 天预报图表参数
Forecast7Chart.setOption({
......@@ -41,39 +44,24 @@
},
},
grid: {
top: '38%',
bottom: '3%',
left: '0%',
right: '0%',
top: '25%',
bottom: '10%',
left: '0',
right: '3%',
},
xAxis: [
{
type: 'category',
data: [],
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
},
xAxis: {
type: 'category',
data: _7DayForecastData.map((item) => item.value),
axisLine: {
show: false,
},
{
type: 'category',
data: [],
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
},
axisTick: {
show: false,
},
],
axisLabel: {
show: false, // 隐藏x轴标签
},
},
yAxis: {
type: 'value',
splitLine: {
......@@ -85,59 +73,70 @@
},
series: [
{
label: {
show: true,
position: 'top',
formatter: '{c}°c',
},
name: '最高温度',
type: 'line',
data: _7DayForecastData.map((item) => item.maxTem),
smooth: true,
color: '#F79D80',
},
{
symbolSize: 6,
label: {
show: true,
position: 'bottom',
formatter: '{c}°c',
position: 'top',
formatter: '{c}°',
color: '#F79D80',
fontSize: 11,
},
},
{
name: '最低温度',
type: 'line',
data: _7DayForecastData.map((item) => item.minTem),
smooth: true,
color: '#1890FF',
color: '#52C41A',
symbolSize: 6,
label: {
show: true,
position: 'bottom',
formatter: '{c}°',
color: '#52C41A',
fontSize: 11,
},
},
{
name: '白天天气',
type: 'scatter',
data: _7DayForecastData.map((item, index) => {
const { label, value } = getDayLabelValue(index)
console.log('item', item,[index, Number(_7DayForecastMaxTemValue) + 3])
return {
value: [index, Number(_7DayForecastMaxTemValue) + 7, item.textDay],
value: [index, Number(_7DayForecastMaxTemValue) + 3],
symbol: `image://${getWeatherIcon(String(item.dayWeather))}`,
symbolSize: [24, 24],
symbolOffset: [0, -35],
symbolSize: [20, 20],
symbolOffset: [0, -12],
label: {
show: true,
position: 'top',
formatter: `${label}\n\n${value}\n\n{@[2]}`,
formatter: `${item.label}\n${item.value}\n${item.textDay}`,
fontSize: 11,
color: '#333',
fontWeight: 'bold',
lineHeight: 18,
},
}
}),
},
{
name: '天气描述',
type: 'scatter',
data: _7DayForecastData.map((item, index) => {
return {
value: [index, -7, item.textNight],
symbol: `image://${getWeatherIcon(String(item.nightWeather))}`,
symbolSize: [24, 24],
symbolOffset: [0, -20],
value: [index, Number(_7DayForecastMinTemValue) - 3],
symbolSize: 0,
label: {
show: true,
position: 'bottom',
formatter: '{@[2]}',
fontWeight: 'bold',
formatter: item.textDay,
fontSize: 10,
color: '#999',
},
}
}),
......@@ -153,7 +152,7 @@
<view class="rain-forecast mt-2rpx bg-#fff rd-1.5 shadow flex flex-col px-2">
<view class="flex items-center justify-between pt-3 px-2">
<view class="text-32 font-600">{{ model.days }} 天预报</view>
<view class="text-24">发布时间：{{ model.updateTime }}</view>
<!-- <view class="text-24">发布时间：{{ model.updateTime }}</view> -->
</view>
<scroll-view class="flex-1" scroll-x="true">
<Echarts @register="register7Forecast" class="w-1400 h-600" />
......
src/pages/nongchang/nongchang.vue
This source diff could not be displayed because it is too large. You can view the blob instead.
src/pages/shouye/shouye.vue
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论