@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" />
105 lines (100 loc) • 3.99 kB
JavaScript
'use strict';
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const es = require('element-plus/es');
require('element-plus/es/components/base/style/css');
require('element-plus/es/components/tooltip/style/css');
const vue = require('vue');
const LottieAnimation_vue_vue_type_script_setup_true_lang = require('./LottieAnimation.vue.js');
const cloud = require('./lottie/cloud.json.js');
const _hoisted_1 = { class: "dv-ipes-real-time-air" };
const _hoisted_2 = { class: "number-wrap" };
const _hoisted_3 = { class: "pollute-flex" };
const _hoisted_4 = /* @__PURE__ */ vue.createElementVNode("span", { class: "factor-name" }, "AQI", -1);
const _hoisted_5 = { class: "pollution-wrap" };
const _hoisted_6 = { class: "real-time" };
const _hoisted_7 = { class: "first-pollute-flex" };
const _hoisted_8 = /* @__PURE__ */ vue.createElementVNode("span", { class: "first-pollute" }, "首要污染物", -1);
const _hoisted_9 = { class: "other-factore" };
const _hoisted_10 = { class: "text" };
const __default__ = {
name: "DvIpesRealTimeAir",
title: "实时空气质量"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: {
width: {
default: "100%",
type: String
},
height: {
default: 72,
type: Number
},
lottieAnimationUrl: {
default: "",
type: String
},
airQualityObj: {
default: () => ({}),
type: Object
}
},
setup(__props) {
const props = __props;
const cloudData = vue.markRaw(cloud.default);
const cloudUrl = vue.computed(() => {
return props.lottieAnimationUrl;
});
return (_ctx, _cache) => {
const _component_el_tooltip = es.ElTooltip;
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createElementVNode("div", {
class: vue.normalizeClass(["pollute-div", { "value-length": String(__props.airQualityObj.aqiValue).length >= 3 }])
}, [
vue.createElementVNode("div", _hoisted_2, [
vue.createElementVNode("span", {
class: "real-number",
style: vue.normalizeStyle({ color: `${__props.airQualityObj.aqiColor}` })
}, vue.toDisplayString(__props.airQualityObj.aqiValue), 5),
vue.createElementVNode("div", _hoisted_3, [
_hoisted_4,
vue.createElementVNode("span", {
class: "factor-status",
style: vue.normalizeStyle({ color: `${__props.airQualityObj.aqiColor}` })
}, vue.toDisplayString(__props.airQualityObj.aqiLevel || "--"), 5)
])
]),
vue.createElementVNode("div", _hoisted_5, [
vue.createElementVNode("span", _hoisted_6, vue.toDisplayString(__props.airQualityObj.time), 1),
vue.createElementVNode("div", _hoisted_7, [
_hoisted_8,
vue.createElementVNode("div", _hoisted_9, [
vue.createVNode(_component_el_tooltip, {
class: "item",
effect: "dark",
content: __props.airQualityObj.mainPolluter,
disabled: String(__props.airQualityObj.mainPolluter).length <= 5,
placement: "top"
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_10, vue.toDisplayString(__props.airQualityObj.mainPolluter), 1)
]),
_: 1
}, 8, ["content", "disabled"])
])
])
])
], 2),
vue.createVNode(LottieAnimation_vue_vue_type_script_setup_true_lang.default, {
class: "canvas-class",
width: __props.width,
height: __props.height,
data: vue.unref(cloudData),
url: vue.unref(cloudUrl)
}, null, 8, ["width", "height", "data", "url"])
]);
};
}
});
exports.default = _sfc_main;