@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" />
231 lines (228 loc) • 9.24 kB
JavaScript
import { defineComponent, ref, computed, onMounted, watch, openBlock, createElementBlock, createElementVNode, toDisplayString, Fragment, renderList, normalizeStyle, nextTick } from 'vue';
import _imports_0 from './images/pic.png.mjs';
import 'echarts-gl';
import echarts from '../../utils/echarts/index.mjs';
import { getPie3D } from '../../utils/echarts/3dChartOptions.mjs';
import { getSpeciesTypeStatistics, getInfraredCameraRecognition } from './api/index.mjs';
const _hoisted_1 = { class: "dv-wgms-biodiversity-recognition" };
const _hoisted_2 = { class: "catalog-card" };
const _hoisted_3 = /* @__PURE__ */ createElementVNode("span", { class: "catalog-label" }, "物种名录", -1);
const _hoisted_4 = { class: "catalog-value" };
const _hoisted_5 = { class: "chart-section" };
const _hoisted_6 = { class: "chart-box" };
const _hoisted_7 = { class: "legend-list" };
const _hoisted_8 = { class: "legend-left" };
const _hoisted_9 = { class: "legend-name" };
const _hoisted_10 = { class: "legend-value" };
const _hoisted_11 = { class: "recognition-card" };
const _hoisted_12 = { class: "recognition-image-box" };
const _hoisted_13 = ["src"];
const _hoisted_14 = {
key: 1,
class: "recognition-image"
};
const _hoisted_15 = /* @__PURE__ */ createElementVNode("img", {
src: _imports_0,
alt: ""
}, null, -1);
const _hoisted_16 = [
_hoisted_15
];
const _hoisted_17 = { class: "recognition-rate" };
const _hoisted_18 = { class: "recognition-info" };
const _hoisted_19 = { class: "species-name" };
const _hoisted_20 = { class: "device-name" };
const _hoisted_21 = { class: "recognition-time" };
const FILE_PREVIEW_BASE_URL = "/file-base-server/api/v1/sys/download";
const _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "DvWgmsBiodiversityRecognition",
title: "生物多样性识别"
},
__name: "index",
props: {
data: { default: () => ({
totalCount: 3784,
categories: [
{ name: "动物界", value: 47, itemStyle: { color: "#FF5257" } },
{ name: "植物界", value: 91, itemStyle: { color: "#2CDE64" } },
{ name: "微生物", value: 60, itemStyle: { color: "#FFCA1A" } },
{ name: "洞穴生物", value: 60, itemStyle: { color: "#4AB8FF" } }
],
recognition: {
speciesName: "凤头鹰",
deviceName: "在线红外相机.xh091",
identifyTime: "2024-11-29 14:20:45",
confidence: 99.2,
imageUrl: ""
}
}) },
isLazy: { type: Boolean, default: false }
},
setup(__props, { expose: __expose }) {
const props = __props;
const fallbackData = {
totalCount: 3784,
categories: [
{ name: "动物界", value: 47, itemStyle: { color: "#FF5257" } },
{ name: "植物界", value: 91, itemStyle: { color: "#2CDE64" } },
{ name: "微生物", value: 60, itemStyle: { color: "#FFCA1A" } },
{ name: "洞穴生物", value: 60, itemStyle: { color: "#4AB8FF" } }
],
recognition: {
speciesName: "凤头鹰",
deviceName: "在线红外相机.xh091",
identifyTime: "2024-11-29 14:20:45",
confidence: 99.2,
imageUrl: ""
}
};
const CHART_COLORS = ["#FF5257", "#2CDE64", "#FFCA1A", "#4AB8FF", "#A66BFF", "#00C2FF", "#FF8E3C"];
const pieChartRef = ref();
const localData = ref({});
const mergedData = computed(() => ({
totalCount: localData.value.totalCount ?? props.data?.totalCount ?? fallbackData.totalCount,
categories: localData.value.categories?.length ? localData.value.categories : props.data?.categories?.length ? props.data.categories : fallbackData.categories,
recognition: localData.value.recognition || props.data?.recognition || fallbackData.recognition
}));
const categoryList = computed(() => mergedData.value.categories || []);
const totalCount = computed(() => {
if (typeof mergedData.value?.totalCount === "number")
return mergedData.value.totalCount;
return categoryList.value.reduce((sum, item) => sum + Number(item.value || 0), 0);
});
const recognition = computed(() => mergedData.value.recognition);
const loadStatistics = async () => {
const res = await getSpeciesTypeStatistics();
const data = res?.data;
localData.value = {
...localData.value,
totalCount: data?.speciesTotal ?? fallbackData.totalCount,
categories: (data?.typeCountList || []).map((item, index) => ({
name: item.typeName,
value: item.count,
itemStyle: {
color: CHART_COLORS[index % CHART_COLORS.length]
}
}))
};
};
const loadRecognition = async () => {
const res = await getInfraredCameraRecognition();
const list = Array.isArray(res) ? res : Array.isArray(res?.data) ? res.data : [];
const data = list[0];
if (!data)
return;
localData.value = {
...localData.value,
recognition: {
speciesName: data.speciesName || fallbackData.recognition.speciesName,
deviceName: data.cameraName || data.cameraCode || fallbackData.recognition.deviceName,
identifyTime: data.identifyTime || fallbackData.recognition.identifyTime,
confidence: Number(data.identifyAccuracy || fallbackData.recognition.confidence),
imageUrl: formatImageUrl(data.imageUrl)
}
};
};
const formatImageUrl = (imageUrl) => {
if (!imageUrl)
return "";
if (imageUrl.startsWith("http://") || imageUrl.startsWith("https://"))
return imageUrl;
return `${FILE_PREVIEW_BASE_URL}/${imageUrl}`;
};
const initChart = () => {
if (!pieChartRef.value || !categoryList.value.length)
return;
const pieData = categoryList.value.map((item) => ({
name: item.name,
value: Number(item.value || 0),
itemStyle: item.itemStyle
}));
const options = getPie3D(pieData, 0.62, 160, 32, 18, 1);
echarts.draw(pieChartRef.value, options);
};
const reload = async () => {
if (props.isLazy)
return;
await Promise.all([
!localData.value.categories?.length ? loadStatistics().catch(() => {
localData.value = {
...localData.value,
categories: void 0,
totalCount: void 0
};
}) : Promise.resolve(),
!localData.value.recognition ? loadRecognition().catch(() => {
localData.value = {
...localData.value,
recognition: void 0
};
}) : Promise.resolve()
]);
await nextTick();
initChart();
};
const formatRate = (value) => `${Number(value || 0).toFixed(1)}%`;
onMounted(() => {
reload();
});
watch([() => props.data, () => props.isLazy], () => {
reload();
}, { deep: true });
__expose({
reload
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
_hoisted_3,
createElementVNode("span", _hoisted_4, toDisplayString(totalCount.value), 1)
]),
createElementVNode("div", _hoisted_5, [
createElementVNode("div", _hoisted_6, [
createElementVNode("div", {
ref_key: "pieChartRef",
ref: pieChartRef,
class: "pie-chart"
}, null, 512)
]),
createElementVNode("div", _hoisted_7, [
(openBlock(true), createElementBlock(Fragment, null, renderList(categoryList.value, (item) => {
return openBlock(), createElementBlock("div", {
key: item.name,
class: "legend-item"
}, [
createElementVNode("div", _hoisted_8, [
createElementVNode("span", {
class: "legend-dot",
style: normalizeStyle({ background: item.itemStyle.color })
}, null, 4),
createElementVNode("span", _hoisted_9, toDisplayString(item.name), 1)
]),
createElementVNode("div", _hoisted_10, toDisplayString(item.value), 1)
]);
}), 128))
])
]),
createElementVNode("div", _hoisted_11, [
createElementVNode("div", _hoisted_12, [
recognition.value.imageUrl ? (openBlock(), createElementBlock("img", {
key: 0,
src: recognition.value.imageUrl,
alt: "",
class: "recognition-image"
}, null, 8, _hoisted_13)) : (openBlock(), createElementBlock("div", _hoisted_14, _hoisted_16)),
createElementVNode("div", _hoisted_17, toDisplayString(formatRate(recognition.value.confidence)), 1)
]),
createElementVNode("div", _hoisted_18, [
createElementVNode("div", _hoisted_19, toDisplayString(recognition.value.speciesName), 1),
createElementVNode("div", _hoisted_20, toDisplayString(recognition.value.deviceName), 1),
createElementVNode("div", _hoisted_21, toDisplayString(recognition.value.identifyTime), 1)
])
])
]);
};
}
});
export { _sfc_main as default };