@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" />
109 lines (106 loc) • 4.96 kB
JavaScript
import { defineComponent, ref, onMounted, watch, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, normalizeStyle, toDisplayString, Fragment, renderList, createCommentVNode } from 'vue';
import { useThemeHook } from '../../../utils.mjs';
const _hoisted_1 = { class: "exhibition-center-content" };
const _hoisted_2 = { class: "water-quality-category" };
const _hoisted_3 = { class: "water-quality-category-warp" };
const _hoisted_4 = /* @__PURE__ */ createElementVNode("div", { class: "water-quality-category-title" }, " 水质类别 ", -1);
const _hoisted_5 = { class: "grade" };
const _hoisted_6 = /* @__PURE__ */ createElementVNode("span", { class: "grade_name" }, "类", -1);
const _hoisted_7 = { class: "water-quality-category-target" };
const _hoisted_8 = /* @__PURE__ */ createElementVNode("span", { class: "target" }, "目标：", -1);
const _hoisted_9 = /* @__PURE__ */ createElementVNode("span", { class: "target_name" }, "类", -1);
const _hoisted_10 = { class: "water-quality-status" };
const _hoisted_11 = /* @__PURE__ */ createElementVNode("span", { class: "target" }, "水质状况：", -1);
const _hoisted_12 = { class: "right-content" };
const _hoisted_13 = { class: "right-content-title" };
const _hoisted_14 = { class: "title-time" };
const _hoisted_15 = {
key: 0,
class: "right-content-content"
};
const _hoisted_16 = { class: "factor-item-top" };
const _hoisted_17 = { class: "factor-name" };
const _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "DvWgmsWgmsSpecialSiteDetails",
title: "特殊站点详情（1.4）"
},
__name: "index",
props: {
data: { default: null }
},
setup(__props) {
const props = __props;
const { isDark } = useThemeHook();
const waterData = ref(null);
onMounted(() => {
waterData.value = props.data;
});
watch([() => props.data], () => {
waterData.value = props.data;
}, { deep: true });
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", {
class: normalizeClass(["water-quality-category-bg", unref(isDark) ? "bg-dark" : "bg-light"])
}, [
createElementVNode("div", _hoisted_3, [
_hoisted_4,
createElementVNode("div", {
style: normalizeStyle({ "--color": waterData.value?.waterQuality.gradeColor, "textAlign": "center" })
}, [
createElementVNode("span", _hoisted_5, toDisplayString(waterData.value?.waterQuality.grade), 1),
_hoisted_6
], 4)
])
], 2),
createElementVNode("div", _hoisted_7, [
_hoisted_8,
createElementVNode("span", {
class: "category",
style: normalizeStyle({ "--color": waterData.value?.waterQuality.targetColor })
}, toDisplayString(waterData.value?.waterQuality.target), 5),
_hoisted_9
]),
createElementVNode("div", _hoisted_10, [
_hoisted_11,
createElementVNode("span", {
class: "category",
style: normalizeStyle({ "--color": waterData.value?.waterQuality.gradeColor })
}, toDisplayString(waterData.value?.waterQuality.gradeName), 5)
])
]),
createElementVNode("div", _hoisted_12, [
createElementVNode("div", _hoisted_13, [
createElementVNode("div", {
class: normalizeClass(unref(isDark) ? "title-name" : "title-name-light")
}, toDisplayString(waterData.value?.site.siteName), 3),
createElementVNode("div", _hoisted_14, toDisplayString(waterData.value?.site.time), 1)
]),
waterData.value?.factorList ? (openBlock(), createElementBlock("div", _hoisted_15, [
(openBlock(true), createElementBlock(Fragment, null, renderList(waterData.value?.factorList, (item, index) => {
return openBlock(), createElementBlock("div", {
key: item.code,
class: normalizeClass(["factor-item", { "last-item": index === waterData.value?.factorList.length - 1 }])
}, [
createElementVNode("div", _hoisted_16, [
createElementVNode("div", _hoisted_17, toDisplayString(item.name), 1),
createElementVNode("div", {
class: "factor-value",
style: normalizeStyle({ "--color": item.color })
}, toDisplayString(item.value), 5)
]),
createElementVNode("div", {
class: "factor-item-bar",
style: normalizeStyle({ "--color": item.color })
}, null, 4)
], 2);
}), 128))
])) : createCommentVNode("", true)
])
]);
};
}
});
export { _sfc_main as default };