+
+
+
+
+
getTopicConfig(activeTopicKey.value))
const baseActiveLayer = computed(() => activeLayerKey.value ? getLayerByKey(activeTopicKey.value, activeLayerKey.value) : null)
+const ndviTimelineActive = computed(() => activeTopicKey.value === "grassland" && activeLayerKey.value === "grassland-health")
+const ndviTimelineVisible = computed(() => ndviTimelineActive.value)
+const selectedNdviTimelineItem = computed(() =>
+ ndviTimelineRows.value.find((item) => item.key === selectedNdviTimelineKey.value) || null
+)
const selectedLegend = computed(() =>
(baseActiveLayer.value?.legends || []).find((item) => item.key === selectedLegendKey.value) || null
)
const activeLayer = computed(() => {
const layer = baseActiveLayer.value
if (!layer) return layer
- if (!selectedLegend.value?.cqlFilter) return layer
+ const visibleLayer = selectedLegend.value?.cqlFilter
+ ? {
+ ...layer,
+ cqlFilter: selectedLegend.value.cqlFilter,
+ activeLegend: selectedLegend.value,
+ name: selectedLegend.value.name || layer.name,
+ }
+ : layer
+ const timelineItem = selectedNdviTimelineItem.value
+ if (!ndviTimelineActive.value || !timelineItem?.layerName) return visibleLayer
return {
- ...layer,
- cqlFilter: selectedLegend.value.cqlFilter,
- activeLegend: selectedLegend.value,
- name: selectedLegend.value.name || layer.name,
+ ...visibleLayer,
+ layerName: timelineItem.layerName,
+ name: `${layer.name} ${timelineItem.label}`,
+ timelineDate: timelineItem.label,
+ timelineItem,
}
})
const panelHeight = computed(() => 190)
@@ -257,6 +286,19 @@ watch(selectedLegendKey, () => {
loadMapRanking(activeTopicKey.value, activeLayerKey.value, selectedLegend.value)
})
+watch(ndviTimelineActive, (active) => {
+ if (active) {
+ loadNdviTimeline()
+ return
+ }
+ selectedNdviTimelineKey.value = ""
+})
+
+watch(selectedNdviTimelineKey, () => {
+ if (!ndviTimelineActive.value) return
+ closeFeaturePanel()
+})
+
watch(
() => props.active,
(active) => {
@@ -343,6 +385,39 @@ async function loadBusinessStats(topicKey, layerKey = activeLayerKey.value) {
applyBusinessStats(result, topicKey)
}
+async function loadNdviTimeline(force = false) {
+ if (!ndviTimelineActive.value) return
+ if (!force && ndviTimelineRows.value.length) {
+ ensureSelectedNdviTimeline()
+ return
+ }
+ const requestId = ++ndviTimelineRequestId
+ ndviTimelineStatus.value = "loading"
+ try {
+ const rows = await getGrasslandNdviTimeline()
+ if (destroyed || requestId !== ndviTimelineRequestId) return
+ ndviTimelineRows.value = rows
+ ndviTimelineStatus.value = rows.length ? "success" : "empty"
+ ensureSelectedNdviTimeline()
+ } catch (error) {
+ if (destroyed || requestId !== ndviTimelineRequestId) return
+ ndviTimelineRows.value = []
+ selectedNdviTimelineKey.value = ""
+ ndviTimelineStatus.value = "error"
+ }
+}
+
+function ensureSelectedNdviTimeline() {
+ if (!ndviTimelineRows.value.length) {
+ selectedNdviTimelineKey.value = ""
+ return
+ }
+ const existing = ndviTimelineRows.value.some((item) => item.key === selectedNdviTimelineKey.value)
+ if (!existing) {
+ selectedNdviTimelineKey.value = ndviTimelineRows.value[ndviTimelineRows.value.length - 1].key
+ }
+}
+
function applyBusinessStats(result, topicKey) {
const selected = selectTopicBusinessStats(result)
coreStats.value = selected.core || []
@@ -607,6 +682,15 @@ function hideLoading() {
}
}
+ .fgw-ndvi-timeline {
+ position: absolute;
+ left: 50%;
+ bottom: 112px;
+ z-index: 7;
+ transform: translateX(-50%);
+ pointer-events: all;
+ }
+
.fgw-map-feature-info {
right: 456px;
bottom: 150px;
diff --git a/src/views/forestGrassWet/map.js b/src/views/forestGrassWet/map.js
index 08882fb..aafb57a 100644
--- a/src/views/forestGrassWet/map.js
+++ b/src/views/forestGrassWet/map.js
@@ -59,12 +59,15 @@ import scatterData from "./map/scatter"
import infoData from "./map/infoData"
import gsap from "gsap"
import { InteractionManager } from "three.interactive"
-import { applyMapTextureUv, createHongyuanSatelliteTexture } from "./satelliteTiles"
+import { applyMapTextureUv, createHongyuanSatelliteTexture, getHongyuanSatelliteTileRange } from "./satelliteTiles"
import { ecologicalProtectionLayers, forestGrassWetLayers, HONGYUAN_BOUNDS, SATELLITE_TEXTURE_ZOOM, WMS_IMAGE_SIZE } from "@/config/layers"
import { buildWmsGetMapUrl, getFeatureInfo, getWfsFeatureProperties, normalizeFeatureInfo } from "@/services/geoserver"
-const DEFAULT_MAP_CAMERA_POSITION = new Vector3(0, 22.8, 18.8)
+const DEFAULT_MAP_CAMERA_POSITION = new Vector3(-0.17427287762525134, 13.678992786206543, 20.688611202093714)
const DEFAULT_MAP_TARGET = new Vector3(0, 0, 0)
-const INTRO_MAP_CAMERA_POSITION = new Vector3(-7.2, 24.2, 31.2)
+const INTRO_MAP_CAMERA_POSITION = new Vector3(-13.767695123014105, 12.990152163077308, 39.28228164159694)
+const CUSTOM_SATELLITE_MAX_ZOOM = 21
+const DYNAMIC_SATELLITE_TILE_WINDOW = 9
+const DYNAMIC_SATELLITE_CHECK_INTERVAL = 260
function sortByValue(data) {
data.sort((a, b) => b.value - a.value)
return data
@@ -178,6 +181,17 @@ export class World extends Mini3d {
this.assets = assets
this.callbacks = callbacks
+ this.tileUrlTemplate = callbacks.tileUrlTemplate || ""
+ this.usesCustomSatelliteTiles = Boolean(this.tileUrlTemplate)
+ this.dynamicSatelliteMaxZoom = CUSTOM_SATELLITE_MAX_ZOOM
+ this.dynamicSatelliteTileWindow = DYNAMIC_SATELLITE_TILE_WINDOW
+ this.dynamicSatelliteOverlay = null
+ this.dynamicSatelliteMaterial = null
+ this.dynamicSatelliteTexture = null
+ this.dynamicSatelliteCurrentKey = ""
+ this.dynamicSatelliteLoadingKey = ""
+ this.dynamicSatelliteRequestId = 0
+ this.dynamicSatelliteLastCheck = 0
this.topicLayerLoadId = 0
this.visibleTopicLayers = []
this.mapAnimationComplete = false
@@ -338,12 +352,12 @@ export class World extends Mini3d {
)
tl.to(
- this.focusMapTopMaterial,
- {
- duration: 1,
- opacity: 1,
- ease: "circ.out",
- },
+ this.focusMapTopMaterial,
+ {
+ duration: 1,
+ opacity: this.getFocusMapTopOpacity(),
+ ease: "circ.out",
+ },
"focusMapOpacity"
)
tl.to(
@@ -768,6 +782,8 @@ export class World extends Mini3d {
geoProjectionCenter: this.geoProjectionCenter,
geoProjectionScale: this.geoProjectionScale,
zoom: SATELLITE_TEXTURE_ZOOM,
+ tileUrlTemplate: this.tileUrlTemplate,
+ onTileStatus: (status) => this.callbacks.onTileStatus?.(status),
})
this.enhanceTexture(satellite.texture)
let [topMaterial, sideMaterial] = this.createProvinceMaterial()
@@ -787,16 +803,18 @@ export class World extends Mini3d {
color: 0xffffff,
map: satellite.texture,
transparent: true,
- opacity: 0.94,
- roughness: 0.82,
+ opacity: this.usesCustomSatelliteTiles ? 1 : 0.94,
+ roughness: this.usesCustomSatelliteTiles ? 0.7 : 0.82,
// fog: false,
})
- let faceGradientShader = new GradientShader(faceMaterial, {
- // uColor1: 0x2a6e92,
- // uColor2: 0x102736,
- uColor1: 0x18dce2,
- uColor2: 0x0b8fa9,
- })
+ if (!this.usesCustomSatelliteTiles) {
+ new GradientShader(faceMaterial, {
+ // uColor1: 0x2a6e92,
+ // uColor2: 0x102736,
+ uColor1: 0x18dce2,
+ uColor2: 0x0b8fa9,
+ })
+ }
this.defaultMaterial = faceMaterial
this.defaultLightMaterial = this.defaultMaterial.clone()
this.defaultLightMaterial.color = new Color("rgba(128,244,255,1)")
@@ -809,8 +827,10 @@ export class World extends Mini3d {
position: new Vector3(0, 0, this.depth + 0.22),
data: mapJsonData,
material: faceMaterial,
- renderOrder: 8,
+ renderOrder: this.usesCustomSatelliteTiles ? 14 : 8,
})
+ this.satelliteMapTop = mapTop
+ this.satelliteMaterial = faceMaterial
applyMapTextureUv(mapTop, satellite.uvBounds)
mapTop.mapGroup.children.map((group) => {
group.children.map((mesh) => {
@@ -1060,6 +1080,152 @@ export class World extends Mini3d {
const duration = view && Number.isFinite(view.duration) ? view.duration : 0.75
this.animateMapCamera(position, target, duration)
}
+ getFocusMapTopOpacity() {
+ return this.usesCustomSatelliteTiles ? 0.16 : 1
+ }
+ getDynamicSatelliteZoom(distance) {
+ if (!this.usesCustomSatelliteTiles) return SATELLITE_TEXTURE_ZOOM
+ if (distance <= 4.2) return Math.min(this.dynamicSatelliteMaxZoom, 21)
+ if (distance <= 6.4) return Math.min(this.dynamicSatelliteMaxZoom, 19)
+ if (distance <= 8.4) return Math.min(this.dynamicSatelliteMaxZoom, 17)
+ if (distance <= 11) return Math.min(this.dynamicSatelliteMaxZoom, 15)
+ if (distance <= 14.5) return Math.min(this.dynamicSatelliteMaxZoom, 13)
+ if (distance <= 18) return Math.min(this.dynamicSatelliteMaxZoom, 11)
+ return SATELLITE_TEXTURE_ZOOM
+ }
+ getCameraTargetLngLat() {
+ const target = this.camera?.controls?.target?.clone?.()
+ if (!target) return [102.58, 32.72]
+ this.focusMapGroup?.updateWorldMatrix?.(true, false)
+ const local = this.focusMapGroup ? this.focusMapGroup.worldToLocal(target) : target
+ const projection = geoMercator()
+ .center(this.geoProjectionCenter)
+ .scale(this.geoProjectionScale)
+ .translate([0, 0])
+ const lngLat = projection.invert?.([local.x, -local.y]) || [102.58, 32.72]
+ return [
+ Math.max(HONGYUAN_BOUNDS.west, Math.min(HONGYUAN_BOUNDS.east, Number(lngLat[0]) || 102.58)),
+ Math.max(HONGYUAN_BOUNDS.south, Math.min(HONGYUAN_BOUNDS.north, Number(lngLat[1]) || 32.72)),
+ ]
+ }
+ getDynamicSatelliteTileWindow(zoom) {
+ if (zoom >= 21) return 3
+ if (zoom >= 19) return 5
+ if (zoom >= 17) return 7
+ if (zoom >= 15) return this.dynamicSatelliteTileWindow
+ if (zoom >= 13) return Math.min(11, this.dynamicSatelliteTileWindow + 2)
+ return Math.min(11, this.dynamicSatelliteTileWindow + 2)
+ }
+ getDynamicSatelliteKey(zoom, tileRange) {
+ if (!tileRange) return ""
+ return `${zoom}:${tileRange.minX}-${tileRange.maxX}:${tileRange.minY}-${tileRange.maxY}`
+ }
+ updateDynamicSatelliteTiles(force = false) {
+ if (!this.usesCustomSatelliteTiles || !this.mapAnimationComplete) return
+ const now = Date.now()
+ if (!force && now - this.dynamicSatelliteLastCheck < DYNAMIC_SATELLITE_CHECK_INTERVAL) return
+ this.dynamicSatelliteLastCheck = now
+ const distance = this.camera.instance.position.distanceTo(this.camera.controls.target)
+ const zoom = this.getDynamicSatelliteZoom(distance)
+ if (zoom <= SATELLITE_TEXTURE_ZOOM) {
+ this.hideDynamicSatelliteOverlay()
+ return
+ }
+ const centerLngLat = this.getCameraTargetLngLat()
+ const tileWindow = this.getDynamicSatelliteTileWindow(zoom)
+ const tileRange = getHongyuanSatelliteTileRange({
+ zoom,
+ centerLngLat,
+ maxCols: tileWindow,
+ maxRows: tileWindow,
+ })
+ const key = this.getDynamicSatelliteKey(zoom, tileRange)
+ if (!key || key === this.dynamicSatelliteCurrentKey || key === this.dynamicSatelliteLoadingKey) return
+ this.loadDynamicSatelliteOverlay({ zoom, centerLngLat, maxTiles: tileWindow, key })
+ }
+ loadDynamicSatelliteOverlay({ zoom, centerLngLat, maxTiles, key }) {
+ const requestId = ++this.dynamicSatelliteRequestId
+ this.dynamicSatelliteLoadingKey = key
+ let satellite
+ satellite = createHongyuanSatelliteTexture({
+ geoProjectionCenter: this.geoProjectionCenter,
+ geoProjectionScale: this.geoProjectionScale,
+ zoom,
+ centerLngLat,
+ maxCols: maxTiles,
+ maxRows: maxTiles,
+ tileUrlTemplate: this.tileUrlTemplate,
+ transparentBackground: true,
+ applyTone: false,
+ onTileStatus: (status) => {
+ this.callbacks.onTileStatus?.({
+ ...status,
+ text: status.text?.replace("影像底图", "高清影像底图") || status.text,
+ })
+ if (status.type === "loading") return
+ if (requestId !== this.dynamicSatelliteRequestId) {
+ satellite?.texture?.dispose?.()
+ return
+ }
+ this.dynamicSatelliteLoadingKey = ""
+ if (Number(status.loaded || 0) <= 0) {
+ if (this.dynamicSatelliteCurrentKey === key) this.hideDynamicSatelliteOverlay()
+ return
+ }
+ this.applyDynamicSatelliteOverlay(satellite, key)
+ },
+ })
+ this.applyDynamicSatelliteOverlay(satellite, key)
+ }
+ ensureDynamicSatelliteOverlay() {
+ if (this.dynamicSatelliteOverlay) return
+ const material = new MeshBasicMaterial({
+ transparent: true,
+ opacity: 0,
+ depthWrite: false,
+ depthTest: true,
+ side: DoubleSide,
+ fog: false,
+ })
+ const mesh = new Mesh(new PlaneGeometry(1, 1), material)
+ mesh.name = "dynamic-satellite-overlay"
+ mesh.renderOrder = 15
+ mesh.visible = false
+ mesh.position.z = this.depth + 0.248
+ this.focusMapGroup?.add(mesh)
+ this.dynamicSatelliteOverlay = mesh
+ this.dynamicSatelliteMaterial = material
+ }
+ applyDynamicSatelliteOverlay(satellite, key) {
+ if (!satellite?.texture || !satellite?.uvBounds) return
+ this.ensureDynamicSatelliteOverlay()
+ const bounds = satellite.uvBounds
+ const width = Math.max(0.0001, bounds.right - bounds.left)
+ const height = Math.max(0.0001, bounds.top - bounds.bottom)
+ this.dynamicSatelliteOverlay.position.set(
+ (bounds.left + bounds.right) / 2,
+ (bounds.bottom + bounds.top) / 2,
+ this.depth + 0.248,
+ )
+ this.dynamicSatelliteOverlay.scale.set(width, height, 1)
+ this.dynamicSatelliteOverlay.visible = true
+ if (this.dynamicSatelliteTexture && this.dynamicSatelliteTexture !== satellite.texture) {
+ this.dynamicSatelliteTexture.dispose?.()
+ }
+ this.dynamicSatelliteTexture = satellite.texture
+ this.dynamicSatelliteMaterial.map = satellite.texture
+ this.dynamicSatelliteMaterial.opacity = 1
+ this.dynamicSatelliteMaterial.needsUpdate = true
+ this.dynamicSatelliteCurrentKey = key
+ }
+ hideDynamicSatelliteOverlay() {
+ if (this.dynamicSatelliteOverlay) this.dynamicSatelliteOverlay.visible = false
+ if (this.dynamicSatelliteLoadingKey) {
+ this.dynamicSatelliteRequestId += 1
+ this.dynamicSatelliteLoadingKey = ""
+ }
+ this.dynamicSatelliteCurrentKey = ""
+ }
ensureMapRevealed() {
if (this.mapAnimationComplete) return
this.animateTl?.progress?.(1, false)
@@ -1069,7 +1235,7 @@ export class World extends Mini3d {
this.focusMapGroup.position.set(0, 0, 0)
this.focusMapGroup.scale.set(1, 1, 1)
}
- if (this.focusMapTopMaterial) this.focusMapTopMaterial.opacity = 1
+ if (this.focusMapTopMaterial) this.focusMapTopMaterial.opacity = this.getFocusMapTopOpacity()
if (this.focusMapSideMaterial) {
this.focusMapSideMaterial.opacity = 1
this.focusMapSideMaterial.transparent = false
@@ -1081,6 +1247,7 @@ export class World extends Mini3d {
if (this.scatterGroup) this.scatterGroup.visible = true
if (this.InfoPointGroup) this.InfoPointGroup.visible = this.showTownRankingPointMarkers && this.hasTownRankingRows()
this.applyLayerMapView(this.currentTopicLayer, { force: true })
+ this.updateDynamicSatelliteTiles(true)
this.updateYakIndustryPointMarkers(this.currentTopicLayer, this.currentVectorFeatures)
this.updateYakIndustryPointLabels(this.currentTopicLayer, this.currentVectorFeatures)
if (shouldHideMapLabels(this.currentTownRanking)) {
@@ -1348,13 +1515,22 @@ export class World extends Mini3d {
const baseStyle = this.getVectorFeatureStyle(layer, feature)
this.drawVectorFeature(context, feature.geometry, {
...baseStyle,
- fill: baseStyle.stroke,
- stroke: baseStyle.stroke,
+ fill: "#001D2C",
+ stroke: "#001D2C",
polygonAlpha: 0,
- lineAlpha: 1,
- lineWidth: 8,
+ lineAlpha: 0.58,
+ lineWidth: 12,
glow: true,
})
+ this.drawVectorFeature(context, feature.geometry, {
+ ...baseStyle,
+ fill: "#F8FFFF",
+ stroke: "#F8FFFF",
+ polygonAlpha: 0,
+ lineAlpha: 0.96,
+ lineWidth: 3.2,
+ glow: false,
+ })
})
}
drawSelectedVectorOverlay(context) {
@@ -1869,10 +2045,10 @@ export class World extends Mini3d {
if (layer?.key === "national-park-zoning") {
return {
fill: legend.fillColor || "#30DCFF",
- stroke: legend.strokeColor || legend.fillColor || "#F2FFFF",
- polygonAlpha: 0.54,
+ stroke: legend.strokeColor || "#F2FFFF",
+ polygonAlpha: 0.36,
lineAlpha: 1,
- lineWidth: 4.8,
+ lineWidth: 5.8,
pointRadius: 4.5,
glow: true,
}
@@ -2114,13 +2290,14 @@ export class World extends Mini3d {
return point.length >= 2 && Number.isFinite(point[0]) && Number.isFinite(point[1]) ? [point[0], point[1]] : null
}
createProvinceMaterial() {
- let topMaterial = new MeshLambertMaterial({
- color: 0xffffff,
- transparent: true,
- opacity: 0,
- fog: false,
- side: DoubleSide,
- })
+ let topMaterial = new MeshLambertMaterial({
+ color: 0xffffff,
+ transparent: true,
+ opacity: 0,
+ depthWrite: !this.usesCustomSatelliteTiles,
+ fog: false,
+ side: DoubleSide,
+ })
topMaterial.onBeforeCompile = (shader) => {
shader.uniforms = {
...shader.uniforms,
@@ -2252,6 +2429,7 @@ export class World extends Mini3d {
calloutMode,
showBars: ranking?.showBars ?? false,
showPointMarkers: ranking?.showPointMarkers ?? calloutMode,
+ onlyRankedTownLabels: ranking?.onlyRankedTownLabels ?? false,
}
}
getTownRankingRows(ranking = this.currentTownRanking, limit = 7, useFallback = true) {
@@ -2912,7 +3090,13 @@ export class World extends Mini3d {
const canShowZeroStat = Boolean(ranking && rows.length && (meta.metricLabel || meta.unit || meta.title))
this.townNameLabels.forEach((label) => {
const townName = label.userData?.townName || label.userData?.name
- const row = rowByName.get(normalizeTownName(townName)) || (canShowZeroStat
+ const rankedRow = rowByName.get(normalizeTownName(townName))
+ if (meta.onlyRankedTownLabels && !rankedRow) {
+ this.clearTownNameLabelStat(label)
+ label.visible = false
+ return
+ }
+ const row = rankedRow || (canShowZeroStat
? { name: townName, value: 0, unit: meta.unit, metricLabel: meta.metricLabel, rank: null }
: null)
if (!row) {
@@ -4886,6 +5070,7 @@ export class World extends Mini3d {
}
update(delta) {
super.update(delta)
+ this.updateDynamicSatelliteTiles()
this.updateTradeFlowPulses(delta)
this.interactionManager && this.interactionManager.update()
}
diff --git a/src/views/forestGrassWet/map.vue b/src/views/forestGrassWet/map.vue
index e287222..28de347 100644
--- a/src/views/forestGrassWet/map.vue
+++ b/src/views/forestGrassWet/map.vue
@@ -15,8 +15,12 @@ const props = defineProps({
type: Object,
default: null,
},
+ tileUrlTemplate: {
+ type: String,
+ default: "",
+ },
});
-const emit = defineEmits(["feature-loading", "feature-info", "layer-status", "draw-boundary", "scene-mounted"]);
+const emit = defineEmits(["feature-loading", "feature-info", "layer-status", "tile-status", "draw-boundary", "scene-mounted"]);
const canvasRef = ref(null);
const canvasMap = shallowRef(null);
let resizeObserver = null;
@@ -40,7 +44,9 @@ function loadMap(assets) {
onFeatureLoading: (loading) => emit("feature-loading", loading),
onFeatureInfo: (payload) => emit("feature-info", payload),
onLayerStatus: (status) => emit("layer-status", status),
+ onTileStatus: (status) => emit("tile-status", status),
onDrawBoundary: (payload) => emit("draw-boundary", payload),
+ tileUrlTemplate: props.tileUrlTemplate,
});
canvasMap.value.time.pause();
activeLayerSignature = getLayerSignature(props.activeLayer);
@@ -72,6 +78,10 @@ function resume() {
if (!canvasMap.value) return;
connectMapResizeObserver();
scheduleMapResize();
+ window.requestAnimationFrame(() => {
+ canvasMap.value?.label3d?.resize?.();
+ canvasMap.value?.label3d?.update?.();
+ });
canvasMap.value.resumeScene?.();
if (!canvasMap.value.resumeScene) canvasMap.value.time.resume();
}
@@ -188,6 +198,26 @@ function cleanupMapResizeObserver() {
resizeCheckTimer = null;
}
}
+function refreshView() {
+ if (!canvasMap.value) return;
+ connectMapResizeObserver();
+ const refresh = () => {
+ if (!canvasMap.value) return;
+ canvasMap.value?.sizes?.init?.();
+ canvasMap.value?.resize?.();
+ canvasMap.value?.label3d?.resize?.();
+ canvasMap.value?.label3d?.update?.();
+ canvasMap.value?.setTownRanking?.(props.mapRanking);
+ };
+ scheduleMapResize();
+ window.requestAnimationFrame(refresh);
+ window.setTimeout(() => {
+ refresh();
+ }, 80);
+ window.setTimeout(() => {
+ refresh();
+ }, 220);
+}
watch(
() => props.activeLayer,
(layer) => {
@@ -229,6 +259,7 @@ defineExpose({
undoBoundaryPoint,
clearAnalysisBoundary,
showAnalysisResult,
+ refreshView,
destroyMap,
canvasMap,
});
@@ -242,6 +273,8 @@ function getLayerSignature(layer) {
item.styles || "",
item.cqlFilter || "",
item.activeLegend?.key || "",
+ item.timelineDate || "",
+ item.timelineItem?.key || "",
item.sourceType || "",
item.dataPath || "",
item.fallbackPath || "",
@@ -269,6 +302,7 @@ function getMapRankingSignature(ranking) {
ranking.showBars ?? "",
ranking.showTownNames ?? "",
ranking.showMapLabels ?? "",
+ ranking.onlyRankedTownLabels ?? "",
ranking.rows?.length || 0,
ranking.rows?.map((row) => `${row.key || row.name || ""}:${row.value ?? ""}`).join(",") || "",
].join("|");
diff --git a/src/views/forestGrassWet/satelliteTiles.js b/src/views/forestGrassWet/satelliteTiles.js
index e5fe7b3..2ef544f 100644
--- a/src/views/forestGrassWet/satelliteTiles.js
+++ b/src/views/forestGrassWet/satelliteTiles.js
@@ -8,7 +8,10 @@ import {
import { geoMercator } from "d3-geo"
const TILE_SIZE = 256
-const SATELLITE_TILE_URL = "https://map.shuxitech.com/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}"
+const DEFAULT_SATELLITE_TILE_URL = "https://map.shuxitech.com/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}"
+const TILE_IMAGE_CACHE_LIMIT = 900
+const TILE_LOAD_CONCURRENCY = 10
+const tileImageCache = new Map()
const HONGYUAN_BOUNDS = {
west: 101.852492,
@@ -34,13 +37,37 @@ function tileToLngLat(x, y, zoom) {
return [lng, lat]
}
-function getTileRange(bounds, zoom) {
+function clamp(value, min, max) {
+ return Math.max(min, Math.min(max, value))
+}
+
+function getTileRange(bounds, zoom, { centerLngLat, maxCols, maxRows } = {}) {
const northWest = lngLatToTile(bounds.west, bounds.north, zoom)
const southEast = lngLatToTile(bounds.east, bounds.south, zoom)
- const minX = Math.floor(northWest.x)
- const maxX = Math.floor(southEast.x)
- const minY = Math.floor(northWest.y)
- const maxY = Math.floor(southEast.y)
+ const fullMinX = Math.floor(northWest.x)
+ const fullMaxX = Math.floor(southEast.x)
+ const fullMinY = Math.floor(northWest.y)
+ const fullMaxY = Math.floor(southEast.y)
+ let minX = fullMinX
+ let maxX = fullMaxX
+ let minY = fullMinY
+ let maxY = fullMaxY
+ let centerX = Math.floor((fullMinX + fullMaxX) / 2)
+ let centerY = Math.floor((fullMinY + fullMaxY) / 2)
+
+ if (centerLngLat && Number.isFinite(maxCols) && Number.isFinite(maxRows)) {
+ const centerLng = clamp(Number(centerLngLat[0]), bounds.west, bounds.east)
+ const centerLat = clamp(Number(centerLngLat[1]), bounds.south, bounds.north)
+ const centerTile = lngLatToTile(centerLng, centerLat, zoom)
+ centerX = Math.floor(centerTile.x)
+ centerY = Math.floor(centerTile.y)
+ const cols = Math.max(1, Math.min(Math.floor(maxCols), fullMaxX - fullMinX + 1))
+ const rows = Math.max(1, Math.min(Math.floor(maxRows), fullMaxY - fullMinY + 1))
+ minX = clamp(centerX - Math.floor(cols / 2), fullMinX, fullMaxX - cols + 1)
+ minY = clamp(centerY - Math.floor(rows / 2), fullMinY, fullMaxY - rows + 1)
+ maxX = minX + cols - 1
+ maxY = minY + rows - 1
+ }
return {
zoom,
@@ -48,11 +75,23 @@ function getTileRange(bounds, zoom) {
maxX,
minY,
maxY,
+ centerX,
+ centerY,
cols: maxX - minX + 1,
rows: maxY - minY + 1,
}
}
+export function getHongyuanSatelliteTileRange({
+ zoom = 11,
+ centerLngLat,
+ maxCols,
+ maxRows,
+ bounds = HONGYUAN_BOUNDS,
+} = {}) {
+ return getTileRange(bounds, zoom, { centerLngLat, maxCols, maxRows })
+}
+
function createProjectedBounds(tileRange, projection) {
const [west, north] = tileToLngLat(tileRange.minX, tileRange.minY, tileRange.zoom)
const [east, south] = tileToLngLat(tileRange.maxX + 1, tileRange.maxY + 1, tileRange.zoom)
@@ -101,51 +140,137 @@ function drawPlaceholder(ctx, canvas) {
}
function loadImage(url) {
+ const cached = tileImageCache.get(url)
+ if (cached) return cached
return new Promise((resolve) => {
const image = new Image()
image.crossOrigin = "anonymous"
image.onload = () => resolve(image)
- image.onerror = () => resolve(null)
+ image.onerror = () => {
+ tileImageCache.delete(url)
+ resolve(null)
+ }
image.src = url
})
}
-function tileUrl(x, y, z) {
- return SATELLITE_TILE_URL.replace("{x}", x).replace("{y}", y).replace("{z}", z)
+function loadCachedImage(url) {
+ const cached = tileImageCache.get(url)
+ if (cached) return cached
+ const request = loadImage(url)
+ tileImageCache.set(url, request)
+ while (tileImageCache.size > TILE_IMAGE_CACHE_LIMIT) {
+ const oldestKey = tileImageCache.keys().next().value
+ if (!oldestKey) break
+ tileImageCache.delete(oldestKey)
+ }
+ return request
+}
+
+function tileUrl(x, y, z, template = DEFAULT_SATELLITE_TILE_URL) {
+ return String(template || DEFAULT_SATELLITE_TILE_URL)
+ .replace(/\{x\}/g, x)
+ .replace(/\{y\}/g, y)
+ .replace(/\{z\}/g, z)
}
-async function loadTiles(ctx, canvas, texture, tileRange) {
+async function loadTiles(ctx, canvas, texture, tileRange, { tileUrlTemplate, onTileStatus, applyTone = true } = {}) {
const tasks = []
+ const total = tileRange.cols * tileRange.rows
+ let loaded = 0
+ let failed = 0
+ onTileStatus?.({
+ type: "loading",
+ text: `正在加载${tileRange.zoom}级影像底图`,
+ loaded,
+ failed,
+ total,
+ zoom: tileRange.zoom,
+ tileRange,
+ tileUrlTemplate,
+ })
ctx.save()
ctx.filter = "brightness(0.92) contrast(1.22) saturate(1.06)"
for (let x = tileRange.minX; x <= tileRange.maxX; x += 1) {
for (let y = tileRange.minY; y <= tileRange.maxY; y += 1) {
- tasks.push(
- loadImage(tileUrl(x, y, tileRange.zoom)).then((image) => {
- if (!image) return
- ctx.drawImage(image, (x - tileRange.minX) * TILE_SIZE, (y - tileRange.minY) * TILE_SIZE, TILE_SIZE, TILE_SIZE)
- texture.needsUpdate = true
- }),
- )
+ tasks.push({ x, y })
}
}
- await Promise.allSettled(tasks)
+ tasks.sort((a, b) => (
+ Math.abs(a.x - tileRange.centerX) + Math.abs(a.y - tileRange.centerY)
+ ) - (
+ Math.abs(b.x - tileRange.centerX) + Math.abs(b.y - tileRange.centerY)
+ ))
+ let taskIndex = 0
+ async function worker() {
+ while (taskIndex < tasks.length) {
+ const task = tasks[taskIndex]
+ taskIndex += 1
+ const image = await loadCachedImage(tileUrl(task.x, task.y, tileRange.zoom, tileUrlTemplate))
+ if (!image) {
+ failed += 1
+ } else {
+ loaded += 1
+ ctx.drawImage(image, (task.x - tileRange.minX) * TILE_SIZE, (task.y - tileRange.minY) * TILE_SIZE, TILE_SIZE, TILE_SIZE)
+ texture.needsUpdate = true
+ }
+ onTileStatus?.({
+ type: "loading",
+ text: `正在加载${tileRange.zoom}级影像底图`,
+ loaded,
+ failed,
+ total,
+ zoom: tileRange.zoom,
+ tileRange,
+ tileUrlTemplate,
+ })
+ }
+ }
+ await Promise.all(Array.from({ length: Math.min(TILE_LOAD_CONCURRENCY, tasks.length) }, worker))
ctx.restore()
- drawSatelliteTone(ctx, canvas)
+ if (applyTone) drawSatelliteTone(ctx, canvas)
texture.needsUpdate = true
+ const coverageRatio = total > 0 ? loaded / total : 0
+ const statusType = loaded === 0 ? "error" : coverageRatio >= 0.75 ? "success" : "warning"
+ const statusText = loaded === total
+ ? `${tileRange.zoom}级影像底图已加载`
+ : loaded > 0
+ ? `${tileRange.zoom}级影像底图已加载（${loaded}/${total}张有效瓦片）`
+ : `${tileRange.zoom}级影像底图加载失败`
+ onTileStatus?.({
+ type: statusType,
+ text: statusText,
+ loaded,
+ failed,
+ total,
+ zoom: tileRange.zoom,
+ tileRange,
+ tileUrlTemplate,
+ })
}
export function createHongyuanSatelliteTexture({
geoProjectionCenter,
geoProjectionScale,
zoom = 11,
+ tileUrlTemplate = DEFAULT_SATELLITE_TILE_URL,
+ onTileStatus,
+ centerLngLat,
+ maxCols,
+ maxRows,
+ transparentBackground = false,
+ applyTone = true,
} = {}) {
- const tileRange = getTileRange(HONGYUAN_BOUNDS, zoom)
+ const tileRange = getTileRange(HONGYUAN_BOUNDS, zoom, { centerLngLat, maxCols, maxRows })
const canvas = document.createElement("canvas")
canvas.width = tileRange.cols * TILE_SIZE
canvas.height = tileRange.rows * TILE_SIZE
const ctx = canvas.getContext("2d")
- drawPlaceholder(ctx, canvas)
+ if (transparentBackground) {
+ ctx.clearRect(0, 0, canvas.width, canvas.height)
+ } else {
+ drawPlaceholder(ctx, canvas)
+ }
const texture = new CanvasTexture(canvas)
texture.colorSpace = SRGBColorSpace
@@ -161,13 +286,24 @@ export function createHongyuanSatelliteTexture({
.translate([0, 0])
const uvBounds = createProjectedBounds(tileRange, projection)
- loadTiles(ctx, canvas, texture, tileRange).catch((error) => {
+ loadTiles(ctx, canvas, texture, tileRange, { tileUrlTemplate, onTileStatus, applyTone }).catch((error) => {
console.warn("load satellite tiles failed:", error)
+ onTileStatus?.({
+ type: "error",
+ text: `${tileRange.zoom}级影像底图加载失败`,
+ loaded: 0,
+ failed: tileRange.cols * tileRange.rows,
+ total: tileRange.cols * tileRange.rows,
+ zoom: tileRange.zoom,
+ tileRange,
+ tileUrlTemplate,
+ })
})
return {
texture,
uvBounds,
+ tileRange,
}
}
diff --git a/src/views/grassLivestockBalance/data.js b/src/views/grassLivestockBalance/data.js
index 395587c..7050004 100644
--- a/src/views/grassLivestockBalance/data.js
+++ b/src/views/grassLivestockBalance/data.js
@@ -17,18 +17,26 @@ export const COUNTY_TARGET = {
export const RISK_LEVELS = [
{
key: "healthy",
- label: "草畜平衡",
- shortLabel: "平衡",
- range: "≤ 0%",
- description: "承载力覆盖实际载畜量，当前放牧压力处于合理区间。",
+ label: "合理",
+ shortLabel: "合理",
+ range: "< 0%",
+ description: "承载力高于实际载畜量，当前放牧压力处于合理区间。",
actions: ["保持当前载畜水平与轮牧节奏", "定期复测草地生产力和载畜量", "关注极端天气对牧草生长的影响"],
},
+ {
+ key: "balanced",
+ label: "基本实现草畜平衡",
+ shortLabel: "平衡",
+ range: "0% - 5%",
+ description: "超载率在5%以内，基本实现草畜平衡。",
+ actions: ["保持当前载畜水平与轮牧节奏", "持续跟踪草地生产力和载畜量变化", "关注局部草场季节性放牧压力"],
+ },
{
key: "watch",
label: "轻度超载",
shortLabel: "关注",
- range: "0% - 10%",
- description: "已出现轻度超载迹象，建议提前介入调控。",
+ range: "> 5% - 10%",
+ description: "超载率超过5%，已出现轻度超载迹象，建议提前介入调控。",
actions: ["适度压减超载畜群规模", "延长冬春舍饲补饲周期", "增加人工草场补饲供应"],
},
{
@@ -112,10 +120,11 @@ export function formatPercent(value) {
export function getRiskLevel(value) {
const rate = toNumber(value)
- if (rate === null || rate <= 0) return RISK_LEVELS[0]
- if (rate <= 10) return RISK_LEVELS[1]
- if (rate <= 20) return RISK_LEVELS[2]
- return RISK_LEVELS[3]
+ if (rate === null || rate < 0) return RISK_LEVELS[0]
+ if (rate <= 5) return RISK_LEVELS[1]
+ if (rate <= 10) return RISK_LEVELS[2]
+ if (rate <= 20) return RISK_LEVELS[3]
+ return RISK_LEVELS[4]
}
function calculateLivestockCapacity(yakCount) {
@@ -256,7 +265,7 @@ export function normalizeBalanceResult(source = {}, fallback = {}) {
bearingCapacity,
livestockCapacity,
overloadRate,
- level: pickValue(source, fieldMap.level, risk.label),
+ level: overloadRate === null ? pickValue(source, fieldMap.level, risk.label) : risk.label,
advice: pickValue(source, fieldMap.advice, fallback.advice || risk.actions.join("；")),
year: pickValue(source, fieldMap.year, fallback.year || "当前年度"),
source: source.raw || source.source || fallback.source,
@@ -331,9 +340,12 @@ export function splitAdvice(row = {}, risk = getRiskLevel(row.overloadRate)) {
? text.split(/[。；;\n]/).map((item) => item.trim()).filter(Boolean)
: []
const unsuitableWhenOverloaded = ["提高放牧畜禽的密度", "增加草地的利用率", "密度不能过高"]
+ const outdatedSafeAdvice = ["轻度超载", "已出现超载", "超载迹象", "压减超载畜群规模"]
+ const safeRisk = ["healthy", "balanced"].includes(risk.key)
const cleanedApiPoints = apiPoints.filter((item) => {
if (unsuitableWhenOverloaded.some((keyword) => item.includes(keyword))) return false
- if (risk.key === "healthy") return true
+ if (safeRisk && outdatedSafeAdvice.some((keyword) => item.includes(keyword))) return false
+ if (safeRisk) return true
return !unsuitableWhenOverloaded.some((keyword) => item.includes(keyword))
})
return [...(risk.actions || []), ...cleanedApiPoints]
diff --git a/src/views/grassLivestockBalance/index.vue b/src/views/grassLivestockBalance/index.vue
index 2a67cae..0ff6465 100644
--- a/src/views/grassLivestockBalance/index.vue
+++ b/src/views/grassLivestockBalance/index.vue
@@ -1847,7 +1847,8 @@ function getProcessStepState(index) {
text-shadow: 0 0 20px rgba(255, 215, 108, 0.34);
}
- &.is-healthy strong {
+ &.is-healthy strong,
+ &.is-balanced strong {
color: #7efbf6;
}
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 70fff8b..644bc19 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -133,6 +133,25 @@
@click="showNextVideo"
>›
+
+
+
+
+
+
")
+ },
+ },
legend: {
top: 2,
right: 2,
+ data: ["预测存栏", "繁殖补充", "出栏扣减"],
itemWidth: 10,
itemHeight: 7,
itemGap: 7,
@@ -479,15 +537,16 @@ const forecastTrendOption = computed(() => {
grid: { left: 42, right: 32, top: 30, bottom: 24 },
xAxis: {
type: "category",
- boundaryGap: false,
- data: trendSeries.labels,
- axisLabel: { color: "rgba(223, 250, 255, 0.62)", fontSize: 10, interval: 4 },
+ boundaryGap: true,
+ data: series.labels,
+ axisLabel: { color: "rgba(223, 250, 255, 0.62)", fontSize: 10, interval: axisInterval },
axisLine: { lineStyle: { color: "rgba(48, 220, 255, 0.28)" } },
axisTick: { show: false },
},
yAxis: [
{
type: "value",
+ scale: true,
axisLabel: { color: "rgba(223, 250, 255, 0.58)", fontSize: 10, formatter: formatCompact },
splitLine: { lineStyle: { color: "rgba(48, 220, 255, 0.1)", type: "dashed" } },
},
@@ -498,9 +557,38 @@ const forecastTrendOption = computed(() => {
},
],
series: [
- buildLineSeries("预测存栏", trendSeries.stock, "#30dcff", 0, true, activeForecastTrendIndex.value),
- buildLineSeries("繁殖补充", trendSeries.births, "#ffd76c", 1, false, activeForecastTrendIndex.value),
- buildLineSeries("出栏扣减", trendSeries.outflow, "#ff8f6b", 1, false, activeForecastTrendIndex.value),
+ {
+ name: "预测存栏",
+ type: "candlestick",
+ yAxisIndex: 0,
+ barWidth: getForecastBarWidth(rows.length, granularity.key),
+ data: rows,
+ itemStyle: {
+ color: "rgba(48, 220, 255, 0.82)",
+ color0: "rgba(255, 143, 107, 0.82)",
+ borderColor: "#30dcff",
+ borderColor0: "#ff8f6b",
+ borderWidth: 1.2,
+ },
+ },
+ {
+ name: "预测存栏线",
+ type: "line",
+ yAxisIndex: 0,
+ smooth: true,
+ symbol: "circle",
+ symbolSize: 3,
+ data: rows.map((item, index) => ({
+ value: item.close,
+ symbolSize: index === activeForecastTrendIndex.value ? 7 : 3,
+ itemStyle: { color: index === activeForecastTrendIndex.value ? "#ffffff" : "#30dcff" },
+ })),
+ lineStyle: { width: 1.6, color: "rgba(48, 220, 255, 0.86)" },
+ itemStyle: { color: "#30dcff" },
+ tooltip: { show: false },
+ },
+ buildLineSeries("繁殖补充", series.births, "#ffd76c", 1, false, activeForecastTrendIndex.value),
+ buildLineSeries("出栏扣减", series.outflow, "#ff8f6b", 1, false, activeForecastTrendIndex.value),
],
})
})
@@ -940,6 +1028,67 @@ function buildLineSeries(name, data, color, yAxisIndex = 0, area = false, active
}
}
+function getForecastGranularity(key) {
+ return forecastGranularityOptions.find((item) => item.key === key) || forecastGranularityOptions[2]
+}
+
+function buildForecastSeriesByGranularity(period, granularityKey = "month") {
+ if (granularityKey === "month") return buildForecastSeries(period)
+
+ const dayCount = Math.max(1, Math.round(Number(period.months || 0) * 30))
+ const stepDays = granularityKey === "week" ? 7 : 1
+ const count = Math.ceil(dayCount / stepDays) + 1
+ const labels = Array.from({ length: count }, (_, index) => {
+ const day = Math.min(dayCount, index * stepDays)
+ if (index === 0) return "2026-06"
+ if (day >= dayCount) return period.label
+ return granularityKey === "week" ? `第${index}周` : `第${day}日`
+ })
+ const stock = labels.map((_, index) => {
+ const day = Math.min(dayCount, index * stepDays)
+ const ratio = day / dayCount
+ const seasonal = Math.sin(index / (granularityKey === "week" ? 1.8 : 8.5)) * Math.sin(Math.PI * ratio) * Math.min(360, period.months * 18)
+ return Math.round(estimatedStock + (period.stock - estimatedStock) * ratio + seasonal)
+ })
+ const births = labels.map((_, index) => Math.round(period.births * (Math.min(dayCount, index * stepDays) / dayCount)))
+ const outflow = labels.map((_, index) => Math.round(period.outflow * (Math.min(dayCount, index * stepDays) / dayCount)))
+ return { labels, stock, births, outflow }
+}
+
+function getForecastAxisInterval(count, granularityKey) {
+ if (granularityKey === "day") return Math.max(10, Math.ceil(count / 6))
+ if (granularityKey === "week") return Math.max(2, Math.ceil(count / 7))
+ return count > 24 ? 4 : count > 14 ? 2 : 1
+}
+
+function getForecastBarWidth(count, granularityKey) {
+ if (granularityKey === "day") return count > 700 ? 2 : count > 360 ? 3 : 4
+ if (granularityKey === "week") return count > 110 ? 4 : 6
+ return count > 24 ? 7 : 10
+}
+
+function buildForecastKLineRows(series) {
+ return (series.labels || []).map((label, index) => {
+ const open = Number(series.stock?.[Math.max(index - 1, 0)] || 0)
+ const close = Number(series.stock?.[index] || open)
+ const birth = Math.max(0, Number(series.births?.[index] || 0) - Number(series.births?.[Math.max(index - 1, 0)] || 0))
+ const outflow = Math.max(0, Number(series.outflow?.[index] || 0) - Number(series.outflow?.[Math.max(index - 1, 0)] || 0))
+ const wickPadding = Math.max(120, Math.round((birth + outflow) * 0.18))
+ const high = Math.max(open, close) + Math.max(wickPadding, Math.round(birth * 0.32))
+ const low = Math.max(0, Math.min(open, close) - Math.max(wickPadding, Math.round(outflow * 0.32)))
+ return {
+ label,
+ open,
+ close,
+ low,
+ high,
+ birth,
+ outflow,
+ value: [open, close, low, high],
+ }
+ })
+}
+
function formatNumber(value) {
const number = Number(value)
if (!Number.isFinite(number)) return "--"
@@ -948,6 +1097,12 @@ function formatNumber(value) {
})
}
+function formatSigned(value) {
+ const number = Number(value)
+ if (!Number.isFinite(number)) return "--"
+ return `${number > 0 ? "+" : ""}${formatNumber(number)}`
+}
+
function formatCompact(value) {
const number = Number(value)
if (!Number.isFinite(number)) return "--"
@@ -1326,6 +1481,51 @@ function isHomeLegendItemSelectable(item) {
height: 100%;
}
+.home-forecast-trend-card {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
+.home-forecast-kline-chart {
+ padding-top: 14px;
+ box-sizing: border-box;
+}
+
+.home-forecast-density-switcher {
+ position: absolute;
+ top: 0;
+ left: 4px;
+ z-index: 3;
+ display: inline-flex;
+ gap: 2px;
+ padding: 2px;
+ border: 1px solid rgba(48, 220, 255, 0.22);
+ border-radius: 3px;
+ background: rgba(4, 24, 37, 0.72);
+ box-shadow: inset 0 0 10px rgba(48, 220, 255, 0.08);
+
+ button {
+ min-width: 24px;
+ height: 18px;
+ padding: 0 6px;
+ border: 0;
+ border-radius: 2px;
+ color: rgba(226, 250, 255, 0.66);
+ font-size: 10px;
+ line-height: 18px;
+ font-weight: 800;
+ background: transparent;
+ cursor: pointer;
+
+ &.active {
+ color: #041c2b;
+ background: linear-gradient(180deg, #7efbf6, #30dcff);
+ box-shadow: 0 0 10px rgba(48, 220, 255, 0.42);
+ }
+ }
+}
+
.home-video-monitor {
position: relative;
display: block;
diff --git a/src/views/platform/index.vue b/src/views/platform/index.vue
index b4e856b..f02f82d 100644
--- a/src/views/platform/index.vue
+++ b/src/views/platform/index.vue
@@ -10,6 +10,7 @@
'is-pasture-management': activeModule.key === 'pasture-management',
'is-yak-industry-chain': activeModule.key === 'yak-industry-chain',
'is-smart-management': activeModule.key === 'smart-management',
+ 'is-ecology-national-park': activeModule.key === 'ecological-protection' && activeBottomKey === 'national-park',
}"
id="large-screen"
>
@@ -129,9 +130,33 @@
-
+
+
+
+
{{ item.zh }}
+
+ {{ formatTopStatValue(item) }}
+ {{ item.unit }}
+
+
+
+
+
+ {{ item.zh }}
+ {{ formatTopStatValue(item) }}
+ {{ item.unit }}
+
+
+
+
+
+
@@ -253,6 +278,9 @@ const activeBottomKey = computed(() => {
if (activeModuleKey.value === "ecological-protection") return activeEcologyView.value
return activeModuleKey.value
})
+const isNationalParkTopStats = computed(
+ () => activeModule.value.key === "ecological-protection" && activeBottomKey.value === "national-park",
+)
const totalView = computed(() => {
const currentStats = moduleTopStats.value[activeModuleKey.value]
if (Array.isArray(currentStats)) return currentStats
@@ -283,6 +311,8 @@ const totalView = computed(() => {
},
])
})
+const nationalParkPrimaryStats = computed(() => totalView.value.slice(0, 5))
+const nationalParkSecondaryStats = computed(() => totalView.value.slice(5, 10))
onMounted(() => {
screenAutofit = autofit.init({
@@ -389,7 +419,7 @@ function hidePlatformLoading() {
}
function buildTopCountItems(items = []) {
- return items.slice(0, 4).map((item, index) => {
+ return items.slice(0, 10).map((item, index) => {
const value = Number(item.value) || 0
const normalized = {
zh: item.zh || item.name || `指标${index + 1}`,
@@ -405,6 +435,12 @@ function buildTopCountItems(items = []) {
})
}
+function formatTopStatValue(item = {}) {
+ const value = Number(item.value) || 0
+ const decimals = item.decimals ?? (Number.isInteger(value) ? 0 : 2)
+ return value.toFixed(decimals)
+}
+
function renderModule(key) {
if (!["home", "forest-grass-wet", "ecological-protection", "grass-livestock-balance", "yak-management", "pasture-management", "yak-industry-chain", "smart-management"].includes(key)) return
if (renderedModules.value[key]) return
@@ -486,6 +522,12 @@ function handleLogout() {
}
}
+ &.is-ecology-national-park {
+ .top-menu-mid-space {
+ width: 820px;
+ }
+ }
+
&.is-grass-livestock-balance {
.large-screen-wrap::after {
opacity: 0.24;
@@ -665,6 +707,255 @@ function handleLogout() {
font-size: 10px;
}
}
+
+ &.is-multi {
+ left: 390px;
+ right: 390px;
+ top: 102px;
+ grid-template-columns: repeat(5, minmax(0, 1fr));
+ grid-auto-rows: 40px;
+ column-gap: 12px;
+ row-gap: 16px;
+ z-index: 8;
+
+ & > div {
+ justify-content: flex-start;
+ }
+
+ .count-card {
+ min-height: 40px;
+ }
+
+ .count-card-left {
+ flex: 0 1 auto;
+ }
+
+ .count-card-icon {
+ display: none;
+ }
+
+ .count-card-right {
+ flex: 0 0 auto;
+ padding-left: 8px;
+ }
+
+ .count-card-right .value {
+ margin-right: 4px;
+ font-size: 22px;
+ }
+
+ .count-card-right .unit {
+ padding-top: 11px;
+ font-size: 12px;
+ opacity: 0.62;
+ }
+
+ .count-card-title .title-zh {
+ max-width: none;
+ font-size: 14px;
+ line-height: 1.18;
+ white-space: nowrap;
+ }
+
+ .count-card-title .title-en {
+ display: none;
+ }
+
+ & > div:nth-child(6) {
+ grid-column: 2;
+ }
+
+ & > div:nth-child(7) {
+ grid-column: 3;
+ }
+
+ & > div:nth-child(8) {
+ grid-column: 4;
+ }
+ }
+
+ &.is-national-park-stats {
+ left: 50%;
+ right: auto;
+ top: 100px;
+ width: 1100px;
+ height: 112px;
+ position: absolute;
+ transform: translateX(-50%);
+ display: block;
+ z-index: 7;
+
+ &::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ height: 64px;
+ pointer-events: none;
+ border-top: 1px solid rgba(75, 230, 255, 0.26);
+ border-bottom: 1px solid rgba(75, 230, 255, 0.12);
+ background:
+ radial-gradient(ellipse at 50% 0%, rgba(65, 230, 255, 0.18), transparent 64%),
+ linear-gradient(90deg, transparent, rgba(40, 210, 255, 0.1) 14%, rgba(40, 210, 255, 0.045) 50%, rgba(40, 210, 255, 0.1) 86%, transparent),
+ linear-gradient(180deg, rgba(6, 73, 103, 0.14), rgba(2, 20, 36, 0.02));
+ box-shadow: inset 0 1px 0 rgba(205, 253, 255, 0.12), 0 0 18px rgba(34, 210, 255, 0.06);
+ clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 16px, 100% 100%, 0 100%, 0 16px);
+ }
+
+ &::after {
+ content: "";
+ position: absolute;
+ left: 80px;
+ right: 80px;
+ top: 66px;
+ height: 1px;
+ pointer-events: none;
+ background: linear-gradient(90deg, transparent, rgba(64, 230, 255, 0.52), transparent);
+ }
+
+ & > div {
+ padding: 0 !important;
+ }
+
+ .np-stat-shell {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: 11px;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ }
+
+ .np-stat-primary-row,
+ .np-stat-secondary-row {
+ display: grid;
+ grid-template-columns: repeat(5, minmax(0, 1fr));
+ width: 100%;
+ }
+
+ .np-stat-primary-row {
+ position: relative;
+ height: 64px;
+ padding: 0 12px;
+ box-sizing: border-box;
+ }
+
+ .np-stat-secondary-row {
+ position: relative;
+ height: 34px;
+ padding: 0 20px;
+ border-top: 1px solid rgba(56, 220, 255, 0.18);
+ border-bottom: 1px solid rgba(56, 220, 255, 0.1);
+ background:
+ linear-gradient(90deg, transparent, rgba(42, 215, 255, 0.1) 10%, rgba(42, 215, 255, 0.025) 50%, rgba(42, 215, 255, 0.1) 90%, transparent),
+ linear-gradient(180deg, rgba(13, 88, 116, 0.16), rgba(3, 24, 42, 0.03));
+ clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
+ box-sizing: border-box;
+ }
+
+ .np-stat {
+ position: relative;
+ min-width: 0;
+ box-sizing: border-box;
+ text-align: center;
+ }
+
+ .np-stat-primary {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 5px;
+ padding: 5px 8px 4px;
+ }
+
+ .np-stat-primary::after {
+ content: "";
+ position: absolute;
+ right: 0;
+ top: 14px;
+ bottom: 14px;
+ width: 1px;
+ background: linear-gradient(180deg, transparent, rgba(88, 232, 255, 0.34), transparent);
+ }
+
+ .np-stat-primary:last-child::after {
+ content: none;
+ }
+
+ .np-stat-secondary {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ padding: 0 8px;
+ }
+
+ .np-stat-secondary::before {
+ content: "";
+ width: 4px;
+ height: 4px;
+ border-radius: 50%;
+ background: rgba(66, 238, 255, 0.96);
+ box-shadow: 0 0 8px rgba(66, 238, 255, 0.52);
+ flex: 0 0 auto;
+ }
+
+ .np-stat-name {
+ overflow: hidden;
+ color: rgba(206, 250, 255, 0.78);
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 1;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .np-stat-value-line {
+ display: flex;
+ align-items: baseline;
+ justify-content: center;
+ min-width: 0;
+ }
+
+ .np-stat-value {
+ color: #f7feff;
+ font-family: D-DIN;
+ font-size: 31px;
+ font-weight: 700;
+ line-height: 1;
+ text-shadow: 0 0 14px rgba(255, 255, 255, 0.42), 0 0 18px rgba(48, 220, 255, 0.16);
+ white-space: nowrap;
+ }
+
+ .np-stat-unit {
+ margin-left: 4px;
+ color: rgba(220, 252, 255, 0.7);
+ font-size: 11px;
+ font-weight: 600;
+ white-space: nowrap;
+ }
+
+ .np-stat-secondary .np-stat-name {
+ flex: 0 1 auto;
+ max-width: 78px;
+ font-size: 12px;
+ font-weight: 500;
+ }
+
+ .np-stat-secondary .np-stat-value {
+ flex: 0 0 auto;
+ font-size: 20px;
+ text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+ }
+
+ .np-stat-secondary .np-stat-unit {
+ flex: 0 0 auto;
+ margin-left: 2px;
+ font-size: 10px;
+ }
+ }
}
.bottom-menu-item {
diff --git a/src/views/wisdomManagement/components/SmartChartRenderer.vue b/src/views/wisdomManagement/components/SmartChartRenderer.vue
index 65c4f53..e35e0cc 100644
--- a/src/views/wisdomManagement/components/SmartChartRenderer.vue
+++ b/src/views/wisdomManagement/components/SmartChartRenderer.vue
@@ -42,8 +42,11 @@ const isHorizontalBar = computed(() => {
const sourceText = computed(() => {
const source = props.chart.source || {}
- const parts = [source.mode, source.table, source.period, source.generatedAt].filter(Boolean)
- return parts.length ? parts.join(" / ") : ""
+ const sourceLabel = getSourceLabel(source)
+ const period = normalizeSourceMeta(source.period || source.dataPeriod || props.chart.period)
+ const generatedAt = normalizeSourceMeta(source.generatedAt || source.updateTime || source.updatedAt, true)
+ const parts = [sourceLabel, period, generatedAt].filter(Boolean)
+ return parts.length ? `统计口径：${parts.join(" / ")}` : "统计口径：业务统计库"
})
onMounted(() => {
@@ -321,6 +324,27 @@ function shouldUseHorizontalBar(rows = []) {
return rows.length > 6 || rows.some((row) => String(row.name || "").length > 4)
}
+function getSourceLabel(source = {}) {
+ const sourceName = normalizeSourceMeta(source.sourceName || source.name || source.label)
+ if (sourceName) return sourceName
+ const mode = String(source.mode || "").trim()
+ if (/openapi|api|stat/i.test(mode)) return "业务统计库"
+ if (/local|mock|fallback/i.test(mode)) return "本地统计"
+ return "业务统计库"
+}
+
+function normalizeSourceMeta(value, dateOnly = false) {
+ const text = String(value || "").trim()
+ if (!text) return ""
+ if (dateOnly && /^\d{4}-\d{2}-\d{2}/.test(text)) return text.slice(0, 10)
+ if (isTechnicalSourceText(text)) return ""
+ return text
+}
+
+function isTechnicalSourceText(text) {
+ return /^[a-zA-Z0-9_./:-]+$/.test(text) && (text.includes("_") || text.length > 24)
+}
+
function formatValue(value) {
const number = Number(value)
if (!Number.isFinite(number)) return "--"
diff --git a/src/views/wisdomManagement/index.vue b/src/views/wisdomManagement/index.vue
index c492c6d..2f56185 100644
--- a/src/views/wisdomManagement/index.vue
+++ b/src/views/wisdomManagement/index.vue
@@ -7,6 +7,73 @@
@@ -51,21 +118,6 @@
{{ message.digestText || "小牧正在消化中" }}
-
-
-
-
-
-
- {{ insight.label }}
- {{ insight.value }}
- {{ insight.note }}
-