提交 258ed913 作者: 宇宙超人

样式修改

上级 ab875674
......@@ -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
......@@ -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,
......
......@@ -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) =>
......
......@@ -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
......
......@@ -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 事件
......
......@@ -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)
......
......@@ -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>
......
......@@ -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>
......
......@@ -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">
......
......@@ -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 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论