Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 258ed913 作者: 宇宙超人
操作

样式修改

上级 ab875674
正在显示 包含 177 行增加 和 66 行删除
src/components/Echarts/src/echarts.module.js
......@@ -31,6 +31,20 @@ export default {
return
}
// 处理tooltip formatter函数序列化问题
if (option.tooltip && option.tooltip.formatter) {
const formatterStr = option.tooltip.formatter
if (typeof formatterStr === 'string') {
try {
// 使用eval在视图层重新构建函数
// 支持箭头函数和普通函数
option.tooltip.formatter = eval('(' + formatterStr + ')')
} catch (e) {
// renderjs视图层不支持console，静默处理错误
}
}
}
this.option = merge(this.option, option)
if (typeof window.echarts === 'object' && typeof window.echarts.init === 'function') {
this.init()
......@@ -40,5 +54,16 @@ export default {
})
}
},
// 添加update方法，在这里重新定义tooltip的formatter
update() {
// 确保图表实例存在
if (this.chart) {
// 重新设置option，确保tooltip formatter正确绑定
if (this.option && this.option.tooltip && typeof this.option.tooltip.formatter === 'function') {
// 重新绑定formatter函数
this.chart.setOption(this.option, true);
}
}
}
},
}
\ No newline at end of file
src/components/Echarts/src/index.vue
......@@ -15,6 +15,12 @@
},
methods: {
setOption(option) {
// 处理tooltip formatter函数序列化
if (option.tooltip && typeof option.tooltip.formatter === 'function') {
// 将函数转换为字符串，在视图层重新构建
option.tooltip.formatter = option.tooltip.formatter.toString()
}
this.option = {
id: this.id,
...option,
......
src/components/Map/Mapbox/hook.ts
......@@ -80,8 +80,8 @@ export function useMapbox<T extends MapboxInstance, P extends MapboxConfig>(
getInstance()?.setLayoutProperty(layerId, name, value),
setFilter: (layerId: string, filter: any[]) => getInstance()?.setFilter(layerId, filter),
flyTo: (options: mapboxgl.FlyToOptions) => getInstance()?.flyTo(options),
addMarker: (id: string, lnglat: [number, number], popup?: string, popupDefaultOpen?: boolean) =>
getInstance()?.addMarker(id, lnglat, popup, popupDefaultOpen),
addMarker: (id: string, lnglat: [number, number], popup?: string, popupDefaultOpen?: boolean, imageUrl?: string, iconSize?: [number, number]) =>
getInstance()?.addMarker(id, lnglat, popup, popupDefaultOpen, imageUrl, iconSize),
removeMarker: (id: string) => getInstance()?.removeMarker(id),
removePopup: () => getInstance()?.removePopup(),
loadImage: (url: string, callback: (error: Error | null, image: HTMLImageElement) => void) =>
......
src/components/Map/Mapbox/index.ts
......@@ -828,9 +828,11 @@ export interface MapboxInstance {
* @param lngLat 经纬度
* @param popup 弹窗内容
* @param popupDefaultOpen 是否默认打开弹窗
* @param imageUrl 自定义图标图片URL
* @param iconSize 图标大小 [width, height]
* @link https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker
*/
addMarker(id: string, lngLat: number[], popup?: string, popupDefaultOpen?: boolean): void
addMarker(id: string, lngLat: number[], popup?: string, popupDefaultOpen?: boolean, imageUrl?: string, iconSize?: [number, number]): void
/**
* 移除 Marker
* @param id Marker ID
......
src/components/Map/Mapbox/index.vue
......@@ -372,7 +372,7 @@
this.tryTriggerChange()
},
addMarker(id, lngLat, popup, popupDefaultOpen) {
addMarker(id, lngLat, popup, popupDefaultOpen, imageUrl, iconSize) {
// 加入到 change 事件队列中
this.changeOptionsQueue.push({
fn: 'addMarker',
......@@ -380,6 +380,8 @@
lngLat,
popup,
popupDefaultOpen,
imageUrl,
iconSize,
})
// 尝试触发 change 事件
......
src/components/Map/Mapbox/mapbox.module.js
......@@ -73,6 +73,18 @@ window.onPopupContentEventHandle = function (e) {
}
}
// 全局暴露 navigateToDetail 方法，供 popup 中的按钮调用
window.navigateToDetail = function (data) {
if ($vm) {
// 调用逻辑层方法，通过 onEventHandle 传递事件
$vm.$ownerInstance.callMethod('onEventHandle', {
type: 'custom',
name: 'navigateToDetail',
data,
})
}
}
const defaultEmptyGeoJSON = {
type: 'FeatureCollection',
features: [],
......@@ -543,12 +555,32 @@ export default {
},
changeAddMarkerOptions(options) {
if (this.checkOnChangeValidity(options)) {
const { id, lngLat, popup, popupDefaultOpen, ...rest } = options
const { id, lngLat, popup, popupDefaultOpen, element, imageUrl, iconSize, ...rest } = options
if (this.markers[id]) {
this.markers[id].remove()
}
const marker = new window.mapboxgl.Marker({ scale: 0.8, ...rest }).setLngLat(lngLat).addTo(this.map)
let markerElement = element
// 如果提供了图片URL，创建自定义元素
if (imageUrl && !element) {
markerElement = document.createElement('div')
markerElement.className = 'custom-marker'
markerElement.style.backgroundImage = `url(${imageUrl})`
markerElement.style.width = iconSize ? `${iconSize[0]}px` : '40px'
markerElement.style.height = iconSize ? `${iconSize[1]}px` : '40px'
markerElement.style.backgroundSize = 'cover'
markerElement.style.borderRadius = '50%'
markerElement.style.cursor = 'pointer'
markerElement.style.border = '2px solid white'
markerElement.style.boxShadow = '0 2px 8px rgba(0,0,0,0.3)'
}
// 如果有自定义元素，使用它；否则使用默认配置
const marker = markerElement
? new window.mapboxgl.Marker(markerElement).setLngLat(lngLat).addTo(this.map)
: new window.mapboxgl.Marker({ scale: 0.8, ...rest }).setLngLat(lngLat).addTo(this.map)
if (popup) {
const popupComponent = new window.mapboxgl.Popup({ options: { closeButton: true } }).setHTML(popup)
marker.setPopup(popupComponent)
......
src/pages/fuwu/dailijizhang/dailijizhang.vue
......@@ -3,6 +3,13 @@
function onApplyClick() {
Message.alert('申请功能暂不可用，敬请期待~', '温馨提示')
}
// 查看大图
function onViewImage(imageUrl) {
uni.previewImage({
urls: [imageUrl]
})
}
</script>
<template>
......@@ -167,11 +174,13 @@
<view class="codefun-mt-18 codefun-flex-row equal-division_2">
<view
class="codefun-flex-col codefun-justify-start codefun-items-center image-wrapper equal-division-item_2"
@click="onViewImage('/static/images/codefun/e10c098c837a0091dfe41ecd14dbaff5.png')"
>
<image class="image_7" src="/static/images/codefun/e10c098c837a0091dfe41ecd14dbaff5.png" />
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center image-wrapper equal-division-item_2 ml-15"
@click="onViewImage('/static/images/codefun/7ad157344b66cce4731d077aa759c0f9.png')"
>
<image class="image_7" src="/static/images/codefun/7ad157344b66cce4731d077aa759c0f9.png" />
</view>
......
src/pages/mine/components/myMessage.vue
......@@ -92,7 +92,7 @@
{{ model.msg.phone }}
</view>
</view>
<view class="msgBox flex justify-between items-center text-30">
<!-- <view class="msgBox flex justify-between items-center text-30">
<view class="text-#999999"> 邮箱 </view>
<view class="text-#333333">
{{ model.msg.email }}
......@@ -106,7 +106,6 @@
align="right"
:text="model.msg.orgCodeTxt ? `${model.msg.orgCodeTxt}` : '- -'"
/>
<!-- {{ model.msg.orgCodeTxt ? model.msg.orgCodeTxt : '- -' }} -->
</view>
</view>
<view class="msgBox lastBox flex justify-between items-center text-30">
......@@ -114,7 +113,7 @@
<view class="text-#333333">
{{ model.msg.postText ? model.msg.postText : '- -' }}
</view>
</view>
</view> -->
</view>
</view>
</template>
......
src/pages/nongchang/components/WeatherForecast.vue
<script setup lang="ts">
import dayjs from 'dayjs'
import * as WeatherAPI from '@/api/model/weather'
import { Echarts, useEcharts } from '@/components/Echarts'
import { getDayLabelValue, getWeatherIcon } from '@/utils/weather'
import dayjs from 'dayjs'
import * as WeatherAPI from '@/api/model/weather'
import { Echarts, useEcharts } from '@/components/Echarts'
import { getDayLabelValue, getWeatherIcon } from '@/utils/weather'
// 逐 7 天预报图表
const [register7Forecast, Forecast7Chart] = useEcharts()
const model = reactive({
// 逐 7 天预报图表
const [register7Forecast, Forecast7Chart] = useEcharts()
const model = reactive({
days: 15,
updateTime: '-',
})
})
onLoad(async () => {
onLoad(async () => {
const location = uni.getStorageSync('location')
const forecasts = await WeatherAPI.forecast(`${location.lon},${location.lat}`, model.days).then((res) => {
model.updateTime = dayjs(res.data.updateTime).format('YYYY-MM-DD HH:mm')
......@@ -33,25 +33,43 @@
}
})
const _7DayForecastMaxTemValue = Math.max(..._7DayForecastData.map((item) => Number(item.maxTem)))
const _7DayForecastMinTemValue = Math.min(..._7DayForecastData.map((item) => Number(item.minTem)))
// 设置逐 7 天预报图表参数
Forecast7Chart.setOption({
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
formatter: (params) => {
// 过滤掉星期标签、日期标签和天气图标
const filteredParams = params.filter(param => {
return param.seriesName !== '星期标签' &&
param.seriesName !== '日期标签' &&
param.seriesName !== '天气图标';
});
if (filteredParams.length === 0) return '';
let result = '';
filteredParams.forEach(param => {
// 只显示有意义的数值信息
if (param.seriesName === '最高温度' || param.seriesName === '最低温度') {
result += `${param.seriesName}: ${param.value}°<br/>`;
}
});
return result;
}
},
grid: {
top: '25%',
top: '10%',
bottom: '10%',
left: '0',
right: '3%',
},
xAxis: {
type: 'category',
data: _7DayForecastData.map((item) => item.value),
data: _7DayForecastData.map((item) => item.textNight),
axisLine: {
show: false,
},
......@@ -59,7 +77,10 @@
show: false,
},
axisLabel: {
show: false, // 隐藏x轴标签
show: true, // 隐藏x轴标签
interval: 0,
color: '#999',
fontSize: 11,
},
},
yAxis: {
......@@ -72,6 +93,57 @@
},
},
series: [
// 顶部星期标签（今天、明天、周X）- 第一行
{
name: '星期标签',
type: 'scatter',
data: _7DayForecastData.map((item, index) => {
return {
value: [index, Number(_7DayForecastMaxTemValue) + 10.5],
symbolSize: 0,
label: {
show: true,
position: 'top',
formatter: item.label,
fontSize: 14,
color: '#333333',
fontWeight: 'bold',
},
}
}),
},
// 顶部日期标签（09/10）- 第二行
{
name: '日期标签',
type: 'scatter',
data: _7DayForecastData.map((item, index) => {
return {
value: [index, Number(_7DayForecastMaxTemValue) + 6],
symbolSize: 0,
label: {
show: true,
position: 'top',
formatter: `${item.value}\n${item.textDay}\n`,
fontSize: 12,
color: '#666666',
},
}
}),
},
// 天气图标 - 第三行
{
name: '天气图标',
type: 'scatter',
data: _7DayForecastData.map((item, index) => {
return {
value: [index, Number(_7DayForecastMaxTemValue) + 5],
symbol: `image://${getWeatherIcon(String(item.dayWeather))}`,
symbolSize: [28, 28],
}
}),
},
// 最高温度线
{
name: '最高温度',
type: 'line',
......@@ -87,6 +159,7 @@
fontSize: 11,
},
},
// 最低温度线
{
name: '最低温度',
type: 'line',
......@@ -102,48 +175,9 @@
fontSize: 11,
},
},
{
name: '白天天气',
type: 'scatter',
data: _7DayForecastData.map((item, index) => {
console.log('item', item,[index, Number(_7DayForecastMaxTemValue) + 3])
return {
value: [index, Number(_7DayForecastMaxTemValue) + 3],
symbol: `image://${getWeatherIcon(String(item.dayWeather))}`,
symbolSize: [20, 20],
symbolOffset: [0, -12],
label: {
show: true,
position: 'top',
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, Number(_7DayForecastMinTemValue) - 3],
symbolSize: 0,
label: {
show: true,
position: 'bottom',
formatter: item.textDay,
fontSize: 10,
color: '#999',
},
}
}),
},
],
})
})
})
</script>
<template>
......@@ -151,7 +185,7 @@
<!-- 逐 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-32 font-600">{{ model.days }}天预报</view>
<!-- <view class="text-24">发布时间：{{ model.updateTime }}</view> -->
</view>
<scroll-view class="flex-1" scroll-x="true">
......@@ -162,5 +196,5 @@
</template>
<style lang="scss" scoped>
//
//
</style>
src/pages/nongchang/detail/index.vue
......@@ -440,7 +440,7 @@
<view class="box-4">
<view class="box-4-title">
<view class="box-4-title-text1"><text>基地设备</text></view>
<view class="box-4-title-text2"><text>＋ 添加设备</text></view>
<navigator url="/pages/device/device" class="box-4-title-text2"><text>＋ 添加设备</text></navigator>
</view>
<view class="box-4-device">
<view class="box-4-device-item" v-for="(device, index) in model.deviceTypeCount" :key="index">
......
src/utils/weather.ts
......@@ -144,7 +144,8 @@ export function getDayLabelValue(index: number) {
} else if (index === 1) {
dayLabel = '明天'
} else {
dayLabel = dayjs().day(dayOfWeek).format('dddd')
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
dayLabel = weekdays[dayOfWeek]
}
return {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论