fix: improve pasture grassland popup controls

V2.0
M先生 1 month ago
parent e4b4bf530f
commit 48f30f791e
  1. 4
      src/services/pastureApi.js
  2. 72
      src/views/pastureManagement/index.vue

@ -67,7 +67,7 @@ export function getMuhuList(query = "", page = 1, pageSize = 80) {
}
export function getPastureGrasslandsById(id) {
return get("/api/home/grasslandByPastureId", { id }).then(normalizeRows)
return post("/api/home/grasslandByPastureId", { id }).then(normalizeRows)
}
export function getGrasslandClickInfo(params = {}) {
@ -77,7 +77,7 @@ export function getGrasslandClickInfo(params = {}) {
export function getYakMarksByGrasslandIds(ids = []) {
const grasslandIds = Array.from(new Set((Array.isArray(ids) ? ids : [ids]).map((id) => String(id || "").trim()).filter(Boolean)))
if (!grasslandIds.length) return Promise.resolve([])
return get("/api/home/yakMarksByGrasslandIds", { ids: grasslandIds.join(",") }, { timeout: 20000 }).then(normalizeRows)
return post("/api/home/yakMarksByGrasslandIds", { ids: grasslandIds.join(",") }, { timeout: 20000 }).then(normalizeRows)
}
export function getPastureDetailsById(id) {

@ -102,6 +102,15 @@
</div>
<div v-if="grasslandFeaturePanelVisible" class="pasture-map-feature-info" :style="grasslandFeaturePanelStyle">
<button
class="pasture-map-feature-close"
type="button"
aria-label="关闭图斑详情"
title="关闭"
@click.stop="clearGrasslandFeaturePanel"
>
×
</button>
<feature-info-panel
:feature="selectedGrasslandFeature"
:empty="grasslandFeatureEmpty"
@ -1396,12 +1405,14 @@ function normalizePastureRows(rows = []) {
const grasslandCount = pickGrasslandBoundaryCount(item, grasslands)
const realId = getRealPastureId(item)
const township = getPastureTownship(item, grasslands) || getPastureFallbackTownship(item, name, realId)
const pastureSortOrder = pickPastureSortOrder(item)
const normalized = {
...item,
key: item.key || item.id || item.pasturesId || item.pastures_id || `${name}-${index}`,
id: realId || item.id || item.pastureId || item.pasturesId || item.pastures_id || item.muhuId || item.key,
realPastureId: realId,
name,
pastureSortOrder,
township: township || "--",
grasslandArea,
acreage: grasslandArea,
@ -1434,13 +1445,38 @@ function sortPastureRows(rows = []) {
return [...(Array.isArray(rows) ? rows : [])]
.map((row) => ({
...row,
pastureSortOrder: pickPastureSortOrder(row),
grasslandArea: pickPastureArea(row),
acreage: pickPastureArea(row),
}))
.sort(comparePastureRows)
}
function pickPastureSortOrder(item = {}) {
const value = pickValue(item, [
"pastureSortOrder",
"pasture_sort_order",
"pastureOrder",
"pasture_order",
"muhuSortOrder",
"muhu_sort_order",
"sortOrder",
"sort_order",
])
if (value === undefined || value === null || value === "") return null
const number = Number(String(value).replace(/,/g, "").trim())
return Number.isFinite(number) ? number : null
}
function comparePastureRows(a, b) {
const sortA = pickPastureSortOrder(a)
const sortB = pickPastureSortOrder(b)
if (sortA !== null || sortB !== null) {
if (sortA === null) return 1
if (sortB === null) return -1
if (sortA !== sortB) return sortA - sortB
return String(a?.name || "").localeCompare(String(b?.name || ""), "zh-CN")
}
const boundaryA = hasPastureGrasslandBoundary(a) ? 1 : 0
const boundaryB = hasPastureGrasslandBoundary(b) ? 1 : 0
if (boundaryA !== boundaryB) return boundaryB - boundaryA
@ -2411,6 +2447,42 @@ function isLngLatInPolygon(point, polygon) {
}
}
.pasture-map-feature-close {
position: absolute;
top: 18px;
right: 18px;
z-index: 3;
width: 30px;
height: 30px;
border: 1px solid rgba(64, 224, 255, 0.56);
border-radius: 2px;
color: rgba(228, 250, 255, 0.96);
background:
linear-gradient(135deg, rgba(37, 213, 255, 0.22), rgba(10, 55, 76, 0.72));
box-shadow:
inset 0 0 12px rgba(42, 210, 255, 0.18),
0 0 10px rgba(30, 184, 230, 0.16);
font-size: 23px;
line-height: 26px;
font-weight: 400;
text-align: center;
cursor: pointer;
pointer-events: all;
transition:
border-color 0.16s ease,
color 0.16s ease,
background 0.16s ease,
transform 0.16s ease;
}
.pasture-map-feature-close:hover {
color: #ffffff;
border-color: rgba(52, 246, 255, 0.9);
background:
linear-gradient(135deg, rgba(38, 240, 255, 0.34), rgba(13, 75, 102, 0.86));
transform: translateY(-1px);
}
.pasture-management .m-card-hd-title {
color: #ffffff !important;
background: none !important;

Loading…
Cancel
Save