@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" />
173 lines (170 loc) • 7.22 kB
JavaScript
import { defineComponent, ref, watch, onMounted, openBlock, createElementBlock, createElementVNode, Fragment, renderList, toDisplayString, normalizeStyle } from 'vue';
import dayjs from 'dayjs';
import { getWgmsNodeWaterSituation, getWgmsEutrophiaList } from './api/index.mjs';
import img0 from './images/0.svg.mjs';
import img1 from './images/1.svg.mjs';
import img_1 from './images/-1.svg.mjs';
const _hoisted_1 = { class: "dv-wgms-lake-river-index" };
const _hoisted_2 = { class: "dv-wgms-lake-river-item" };
const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", { class: "dv-wgms-text-14 dv-wgms-mgb8" }, " 重要流域水质 ", -1);
const _hoisted_4 = { class: "dv-wgms-river-detail dv-wgms-flex-bw-c" };
const _hoisted_5 = { class: "dv-wgms-top-river-name dv-wgms-text-14 dv-wgms-mgb12" };
const _hoisted_6 = { class: "dv-wgms-flex-c-c" };
const _hoisted_7 = /* @__PURE__ */ createElementVNode("div", { class: "dv-wgms-text-14 dv-wgms-white-60 dv-wgms-mgr4" }, " 同比 ", -1);
const _hoisted_8 = ["src"];
const _hoisted_9 = { class: "dv-wgms-lake-river-item" };
const _hoisted_10 = /* @__PURE__ */ createElementVNode("div", { class: "dv-wgms-text-14 dv-wgms-mgb8" }, " 重要水体水质 ", -1);
const _hoisted_11 = { class: "dv-wgms-river-detail dv-wgms-flex-bw-c" };
const _hoisted_12 = { class: "dv-wgms-top-river-name dv-wgms-text-14 dv-wgms-mgb12" };
const _hoisted_13 = { class: "dv-wgms-flex-c-c" };
const _hoisted_14 = /* @__PURE__ */ createElementVNode("div", { class: "dv-wgms-text-14 dv-wgms-white-60 dv-wgms-mgr4" }, " 同比 ", -1);
const _hoisted_15 = ["src"];
const _hoisted_16 = { class: "dv-wgms-lake-river-item" };
const _hoisted_17 = /* @__PURE__ */ createElementVNode("div", { class: "dv-wgms-text-14 dv-wgms-mgb8" }, " 重要湖库营养化指数 ", -1);
const _hoisted_18 = { class: "dv-wgms-river-detail dv-wgms-flex-bw-c" };
const _hoisted_19 = { class: "dv-wgms-top-river-name dv-wgms-text-14 dv-wgms-mgb12" };
const _hoisted_20 = { class: "dv-wgms-flex-c-c" };
const _hoisted_21 = { class: "dv-wgms-text-14 dv-wgms-white-60 dv-wgms-mgr4" };
const _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "DvWgmsLakeRiverIndex",
title: "流域水质、水体水质、湖库富营养化指数"
},
__name: "index",
props: {
beginTime: {
type: Number,
default: dayjs().startOf("year").valueOf()
},
endTime: {
type: Number,
default: dayjs().subtract(-1, "y").startOf("year").valueOf()
},
factorGroupId: {
type: [Number, String],
default: 8
},
timeType: {
type: String,
default: "day"
},
treeId: {
type: [Number, String],
default: "3301"
},
treeType: {
type: [Number, String],
default: "1"
},
isLazy: {
type: Boolean,
default: false
},
data: {
type: Array,
default: void 0
}
},
setup(__props, { expose: __expose }) {
const props = __props;
const compareImg = [img0, img1, img_1];
const keyRiverQuality = ref([]);
const waterKeyQuality = ref([]);
const eutrophication = ref([]);
watch(() => props.data, (val) => {
if (!val)
return;
keyRiverQuality.value = val[0];
waterKeyQuality.value = val[1];
eutrophication.value = val[2];
}, { immediate: true, deep: true });
onMounted(() => {
!props.data && !props.isLazy && getRankData();
});
const reload = () => {
getRankData();
};
const getRankData = async () => {
const params = {
startTime: props.beginTime,
endTime: props.endTime,
factorGroupId: props.factorGroupId,
queryType: 0,
timeType: props.timeType,
treeId: props.treeId,
treeType: props.treeType
};
const allData = await Promise.all([getWgmsNodeWaterSituation({ ...params }), getWgmsNodeWaterSituation({ ...params, queryType: 1 }), getWgmsEutrophiaList({ ...params })]);
keyRiverQuality.value = Object.values(allData[0].data || []);
waterKeyQuality.value = Object.values(allData[1].data || []);
eutrophication.value = Object.values(allData[2].data || []);
};
__expose({
reload
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
_hoisted_3,
createElementVNode("div", _hoisted_4, [
(openBlock(true), createElementBlock(Fragment, null, renderList(keyRiverQuality.value, (item, index) => {
return openBlock(), createElementBlock("div", { key: index }, [
createElementVNode("div", _hoisted_5, toDisplayString(item.name), 1),
createElementVNode("div", _hoisted_6, [
createElementVNode("div", {
class: "dv-wgms-lake-level-box",
style: normalizeStyle({ background: item.waterQualityColor })
}, toDisplayString(item.waterQualityName), 5),
_hoisted_7,
createElementVNode("img", {
src: compareImg[item.yoy || 0],
alt: ""
}, null, 8, _hoisted_8)
])
]);
}), 128))
])
]),
createElementVNode("div", _hoisted_9, [
_hoisted_10,
createElementVNode("div", _hoisted_11, [
(openBlock(true), createElementBlock(Fragment, null, renderList(waterKeyQuality.value, (item, index) => {
return openBlock(), createElementBlock("div", { key: index }, [
createElementVNode("div", _hoisted_12, toDisplayString(item.name), 1),
createElementVNode("div", _hoisted_13, [
createElementVNode("div", {
class: "dv-wgms-lake-level-box",
style: normalizeStyle({ background: item.waterQualityColor })
}, toDisplayString(item.waterQualityName), 5),
_hoisted_14,
createElementVNode("img", {
src: compareImg[item.yoy || 0],
alt: ""
}, null, 8, _hoisted_15)
])
]);
}), 128))
])
]),
createElementVNode("div", _hoisted_16, [
_hoisted_17,
createElementVNode("div", _hoisted_18, [
(openBlock(true), createElementBlock(Fragment, null, renderList(eutrophication.value, (item, index) => {
return openBlock(), createElementBlock("div", { key: index }, [
createElementVNode("div", _hoisted_19, toDisplayString(item.name), 1),
createElementVNode("div", _hoisted_20, [
createElementVNode("div", {
class: "dv-wgms-lake-level-box",
style: normalizeStyle({ background: item.waterQualityColor })
}, toDisplayString(item.waterQualityName), 5),
createElementVNode("div", _hoisted_21, toDisplayString(item.eutrophia), 1)
])
]);
}), 128))
])
])
]);
};
}
});
export { _sfc_main as default };