@ued_fpi/data-visual
Version:
<br /> <br /> <div style="text-align:center"> <b style="font-size:30px">@ued_fpi/data-visual</b> <p>基于Vite4+TypeScript的Vue3大屏组件库开发框架</p> <img style="display:inline" src="https://img.shields.io/npm/v/@ued_fpi/data-visual" />
232 lines (229 loc) • 10.7 kB
JavaScript
import { defineComponent, ref, computed, onMounted, openBlock, createElementBlock, createElementVNode, toDisplayString, Fragment, renderList, createVNode } from 'vue';
import _sfc_main$1 from '../common/common-arrow.vue.mjs';
import '../common/common-arrow.vue2.mjs';
import { getForestWetlandOverview, getNatureReserveOverview, getRedlineOverview } from './api/index.mjs';
const _hoisted_1 = { class: "dv-wgms-ecological-environment-overview" };
const _hoisted_2 = { class: "section" };
const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", { class: "section-title" }, " 自然保护地 ", -1);
const _hoisted_4 = { class: "nature-grid" };
const _hoisted_5 = { class: "summary-grid" };
const _hoisted_6 = { class: "summary-card" };
const _hoisted_7 = /* @__PURE__ */ createElementVNode("div", { class: "summary-label" }, " 自然保护地 ", -1);
const _hoisted_8 = { class: "summary-value" };
const _hoisted_9 = { class: "summary-number" };
const _hoisted_10 = { class: "summary-unit" };
const _hoisted_11 = { class: "summary-card" };
const _hoisted_12 = /* @__PURE__ */ createElementVNode("div", { class: "summary-label" }, " 占地面积 ", -1);
const _hoisted_13 = { class: "summary-value" };
const _hoisted_14 = { class: "summary-number" };
const _hoisted_15 = { class: "summary-unit" };
const _hoisted_16 = { class: "category-list" };
const _hoisted_17 = { class: "category-label" };
const _hoisted_18 = { class: "category-value" };
const _hoisted_19 = { class: "section" };
const _hoisted_20 = /* @__PURE__ */ createElementVNode("div", { class: "section-title" }, " 生态保护红线 ", -1);
const _hoisted_21 = { class: "dual-card" };
const _hoisted_22 = { class: "metric-block" };
const _hoisted_23 = /* @__PURE__ */ createElementVNode("div", { class: "metric-label" }, " 红线面积 ", -1);
const _hoisted_24 = { class: "metric-value" };
const _hoisted_25 = { class: "metric-number" };
const _hoisted_26 = { class: "metric-unit" };
const _hoisted_27 = { class: "metric-block" };
const _hoisted_28 = /* @__PURE__ */ createElementVNode("div", { class: "metric-label" }, " 占国土面积 ", -1);
const _hoisted_29 = { class: "metric-value" };
const _hoisted_30 = { class: "metric-number" };
const _hoisted_31 = { class: "section" };
const _hoisted_32 = /* @__PURE__ */ createElementVNode("div", { class: "section-title" }, " 森林覆盖率和湿地面积 ", -1);
const _hoisted_33 = { class: "dual-card" };
const _hoisted_34 = { class: "metric-block" };
const _hoisted_35 = /* @__PURE__ */ createElementVNode("div", { class: "metric-label" }, " 森林覆盖率 ", -1);
const _hoisted_36 = { class: "metric-value metric-value-inline" };
const _hoisted_37 = { class: "metric-number" };
const _hoisted_38 = /* @__PURE__ */ createElementVNode("span", { class: "metric-trend-label" }, "同比", -1);
const _hoisted_39 = { class: "metric-trend-value" };
const _hoisted_40 = { class: "metric-block" };
const _hoisted_41 = /* @__PURE__ */ createElementVNode("div", { class: "metric-label" }, " 湿地面积 ", -1);
const _hoisted_42 = { class: "metric-value" };
const _hoisted_43 = { class: "metric-number" };
const _hoisted_44 = { class: "metric-unit" };
const _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "DvWgmsEcologicalEnvironmentOverview",
title: "生态环境总览"
},
__name: "index",
props: {
data: {
type: Object,
default: () => ({
natureReserveCount: 26,
natureReserveUnit: "个",
natureReserveArea: 137998.87,
natureReserveAreaUnit: "公顷",
protectedAreaCategories: [
{ label: "国家级湿地公园", value: 1 },
{ label: "省级地质公园", value: 2 },
{ label: "森林公园", value: 10 },
{ label: "风景名胜区", value: 9 },
{ label: "县级自然保护区", value: 1 }
],
redLineArea: 973.75,
redLineAreaUnit: "平方公里",
landAreaRatio: 12.1,
forestCoverageRate: 65.74,
forestCoverageYoY: 0.01,
wetlandArea: 143.25,
wetlandAreaUnit: "平方公里"
})
}
},
setup(__props) {
const props = __props;
const fallbackData = {
natureReserveCount: 26,
natureReserveUnit: "个",
natureReserveArea: 137998.87,
natureReserveAreaUnit: "公顷",
protectedAreaCategories: [
{ label: "国家级湿地公园", value: 1 },
{ label: "省级地质公园", value: 2 },
{ label: "森林公园", value: 10 },
{ label: "风景名胜区", value: 9 },
{ label: "县级自然保护区", value: 1 }
],
redLineArea: 973.75,
redLineAreaUnit: "平方公里",
landAreaRatio: 12.1,
forestCoverageRate: 65.74,
forestCoverageYoY: 0.01,
wetlandArea: 143.25,
wetlandAreaUnit: "平方公里"
};
const localData = ref({});
const displayData = computed(() => ({
...fallbackData,
...props.data,
...localData.value,
protectedAreaCategories: localData.value.protectedAreaCategories?.length ? localData.value.protectedAreaCategories : props.data?.protectedAreaCategories?.length ? props.data.protectedAreaCategories : fallbackData.protectedAreaCategories
}));
const formatNumber = (value) => {
return Number(value || 0).toFixed(2).replace(/\.00$/, "");
};
const formatPercent = (value) => {
return `${Number(value || 0).toFixed(2)}%`;
};
const loadData = async () => {
const [forestWetlandRes, natureReserveRes, redlineRes] = await Promise.all([
getForestWetlandOverview({ year: 0 }),
getNatureReserveOverview(),
getRedlineOverview()
]);
const forestWetland = forestWetlandRes?.data;
const natureReserve = natureReserveRes?.data;
const redline = redlineRes?.data;
const types = natureReserve?.types || [];
localData.value = {
natureReserveCount: types.reduce((sum, item) => sum + Number(item.count || 0), 0),
natureReserveUnit: "个",
natureReserveArea: Number(natureReserve?.totalArea || 0),
natureReserveAreaUnit: "平方公里",
protectedAreaCategories: types.map((item) => ({
label: item.type || "--",
value: Number(item.count || 0)
})),
redLineArea: Number(redline?.redlineArea || 0),
redLineAreaUnit: "平方公里",
landAreaRatio: Number(redline?.landAreaRatio || 0),
forestCoverageRate: Number(forestWetland?.forestCoverage || 0),
forestCoverageYoY: Number(forestWetland?.forestCoverageYoy || 0),
wetlandArea: Number(forestWetland?.wetlandArea || 0),
wetlandAreaUnit: "平方公里"
};
};
onMounted(() => {
if (props.data)
return;
loadData().catch(() => {
localData.value = {};
});
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("section", _hoisted_2, [
_hoisted_3,
createElementVNode("div", _hoisted_4, [
createElementVNode("div", _hoisted_5, [
createElementVNode("div", _hoisted_6, [
_hoisted_7,
createElementVNode("div", _hoisted_8, [
createElementVNode("span", _hoisted_9, toDisplayString(displayData.value.natureReserveCount), 1),
createElementVNode("span", _hoisted_10, toDisplayString(displayData.value.natureReserveUnit), 1)
])
]),
createElementVNode("div", _hoisted_11, [
_hoisted_12,
createElementVNode("div", _hoisted_13, [
createElementVNode("span", _hoisted_14, toDisplayString(formatNumber(displayData.value.natureReserveArea)), 1),
createElementVNode("span", _hoisted_15, toDisplayString(displayData.value.natureReserveAreaUnit), 1)
])
])
]),
createElementVNode("div", _hoisted_16, [
(openBlock(true), createElementBlock(Fragment, null, renderList(displayData.value.protectedAreaCategories, (item) => {
return openBlock(), createElementBlock("div", {
key: item.label,
class: "category-item"
}, [
createElementVNode("span", _hoisted_17, toDisplayString(item.label), 1),
createElementVNode("span", _hoisted_18, toDisplayString(item.value), 1)
]);
}), 128))
])
])
]),
createElementVNode("section", _hoisted_19, [
_hoisted_20,
createElementVNode("div", _hoisted_21, [
createElementVNode("div", _hoisted_22, [
_hoisted_23,
createElementVNode("div", _hoisted_24, [
createElementVNode("span", _hoisted_25, toDisplayString(formatNumber(displayData.value.redLineArea)), 1),
createElementVNode("span", _hoisted_26, toDisplayString(displayData.value.redLineAreaUnit), 1)
])
]),
createElementVNode("div", _hoisted_27, [
_hoisted_28,
createElementVNode("div", _hoisted_29, [
createElementVNode("span", _hoisted_30, toDisplayString(formatPercent(displayData.value.landAreaRatio)), 1)
])
])
])
]),
createElementVNode("section", _hoisted_31, [
_hoisted_32,
createElementVNode("div", _hoisted_33, [
createElementVNode("div", _hoisted_34, [
_hoisted_35,
createElementVNode("div", _hoisted_36, [
createElementVNode("span", _hoisted_37, toDisplayString(formatPercent(displayData.value.forestCoverageRate)), 1),
_hoisted_38,
createElementVNode("span", _hoisted_39, toDisplayString(formatPercent(displayData.value.forestCoverageYoY)), 1),
createVNode(_sfc_main$1, {
direction: displayData.value.forestCoverageYoY >= 0 ? "up" : "down-green"
}, null, 8, ["direction"])
])
]),
createElementVNode("div", _hoisted_40, [
_hoisted_41,
createElementVNode("div", _hoisted_42, [
createElementVNode("span", _hoisted_43, toDisplayString(formatNumber(displayData.value.wetlandArea)), 1),
createElementVNode("span", _hoisted_44, toDisplayString(displayData.value.wetlandAreaUnit), 1)
])
])
])
])
]);
};
}
});
export { _sfc_main as default };