@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" />
278 lines (273 loc) • 11.1 kB
JavaScript
;
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/select/style/css');
require('element-plus/es/components/option/style/css');
require('element-plus/es/components/tooltip/style/css');
const vue = require('vue');
const dayjs = require('dayjs');
const lodashEs = require('lodash-es');
const commBtns_vue_vue_type_script_setup_true_lang = require('../common/comm-btns.vue.js');
require('../common/comm-btns.vue2.js');
const BaseECharts_vue_vue_type_script_setup_true_lang = require('../../utils/echarts/BaseECharts.vue.js');
const tools = require('../../utils/tools.js');
const echartsOptions = require('../../utils/echarts/echartsOptions.js');
const index = require('./api/index.js');
const _hoisted_1 = { class: "important-water-box" };
const _hoisted_2 = { class: "right-btns" };
const _hoisted_3 = { class: "important-water-top" };
const _hoisted_4 = /* @__PURE__ */ vue.createElementVNode("span", { class: "important-water-title" }, " 叶绿素a超标次数排名 ", -1);
const _hoisted_5 = { class: "bar-box" };
const _hoisted_6 = ["onClick"];
const _hoisted_7 = [":title"];
const _hoisted_8 = ["title"];
const _hoisted_9 = { class: "bottom-chart" };
const _hoisted_10 = { class: "chart-title" };
const _hoisted_11 = /* @__PURE__ */ vue.createElementVNode("span", null, "叶绿素a最近7次变化趋势", -1);
const _hoisted_12 = { class: "chart-box" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "DvWgmsAlgaeTopicsImportantWater",
title: "重要水域藻华现状（1.4）"
},
__name: "index",
props: {
params: { default: () => {
return {
type: "6",
regionCode: "3301",
regionName: "杭州市",
beginTime: dayjs().startOf("year").valueOf(),
endTime: dayjs().valueOf(),
isLast: true
};
} },
data: { default: null },
isLazy: { type: Boolean, default: false },
timeObj: { default: () => {
return {
periodBeginTime: dayjs().startOf("year").valueOf(),
periodEndTime: dayjs().endOf("year").valueOf(),
currentTime: dayjs().valueOf(),
currentType: "dailyControl",
upToDate: true
};
} },
toggleTabsArr: { default: () => {
return [
{
label: "县级以上饮用水源地",
value: "6"
}
];
} }
},
setup(__props, { expose: __expose }) {
const props = __props;
const algaeData = vue.reactive({
tabs: props.toggleTabsArr,
selectedTab: props.toggleTabsArr[0],
isShow: true,
rankList: [],
itemIndex: 0,
maxCount: 54,
siteList: [],
accessCode: "DUIHEKOUSHUIKUSHUIYUANDI",
importWaterDom: vue.ref()
});
const options = vue.ref({});
const switchTab = (item) => {
algaeData.selectedTab = item;
};
const changeItem = (index, item) => {
algaeData.itemIndex = index;
algaeData.siteList = algaeData.rankList[algaeData.itemIndex]?.sites ?? [];
algaeData.accessCode = algaeData.siteList.length ? algaeData.siteList[0]?.code : item.code || "";
if (algaeData.accessCode !== "")
singleMonitoringTrend(timeData.endTime);
};
const changeSite = () => {
singleMonitoringTrend(timeData.endTime);
};
const timeData = {
beginTimeTrend: 0,
endTimeTrend: 0,
beginTime: 0,
endTime: 0,
upToDate: false
};
const initDefaultTrendTime = () => {
timeData.beginTimeTrend = dayjs().add(-6, "days").valueOf();
timeData.endTimeTrend = dayjs().valueOf();
if (!props.timeObj)
return;
const { beginTime, endTime, isCurrentPeriod, currentTime } = tools.getAlgaeTime(props.timeObj);
timeData.beginTime = beginTime;
timeData.endTime = endTime;
timeData.upToDate = props.timeObj.upToDate;
if (isCurrentPeriod) {
const isToday = dayjs().isSame(currentTime, "d");
if (!isToday) {
timeData.endTimeTrend = dayjs(currentTime).endOf("day").valueOf();
timeData.beginTimeTrend = dayjs(timeData.endTimeTrend).add(-6, "days").valueOf();
}
}
};
const algaSingleMonitoring = async () => {
algaeData.isShow = false;
let res;
if (props.data && Reflect.ownKeys(props.data).length) {
res = props.data;
} else {
const response = await index.algaSingleMonitoringApi(props.params);
res = response.data;
}
if (!res)
return;
const list = res.alageMonitorWaters || [];
dataSet(list);
algaeData.isShow = true;
algaeData.siteList = list?.[0]?.sites || [];
algaeData.accessCode = !algaeData.siteList.length ? list[0]?.code || "" : algaeData.siteList?.[0]?.code || "";
if (algaeData.accessCode !== "")
singleMonitoringTrend(timeData.endTime);
options.value = echartsOptions.manualMonitoringOption([], []);
};
const singleMonitoringTrend = async (endTime) => {
let resData;
if (props.data && props.data.trendData) {
resData = props.data.trendData[algaeData.accessCode];
} else {
const { data } = await index.singleMonitoringTrend({
code: algaeData.accessCode,
time: props.timeObj?.currentType !== "dailyControl" ? endTime : ""
// 如果选择了某一日则传入结束时间
});
resData = data;
}
if (!resData) {
options.value = await echartsOptions.manualMonitoringOption([], []);
return;
}
const chartData = resData || { dates: [], time: [] };
const barXvalue = chartData.time;
const seriesData = chartData.dates.map((item) => {
const val = item?.value ?? null;
return val;
});
options.value = await echartsOptions.manualMonitoringOption(barXvalue, seriesData);
};
const dataSet = (data) => {
algaeData.rankList = data;
algaeData.maxCount = lodashEs.maxBy(data, (o) => {
return o.reproductionNum;
})?.reproductionNum || 0;
};
const getData = () => {
initDefaultTrendTime();
algaSingleMonitoring();
};
vue.onMounted(async () => {
await vue.nextTick();
!props.isLazy && getData();
});
vue.watch([() => props.params, () => props.data, () => props.isLazy], async () => {
await vue.nextTick();
!props.isLazy && getData();
}, { deep: true });
__expose({
reload: getData
});
const { tabs, selectedTab, rankList, itemIndex, maxCount, siteList, accessCode } = vue.toRefs(algaeData);
return (_ctx, _cache) => {
const _component_el_tooltip = es.ElTooltip;
const _component_el_option = es.ElOption;
const _component_el_select = es.ElSelect;
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createElementVNode("div", _hoisted_2, [
vue.createVNode(commBtns_vue_vue_type_script_setup_true_lang.default, {
tabs: vue.unref(tabs),
selected: vue.unref(selectedTab),
onSwitchTab: switchTab
}, null, 8, ["tabs", "selected"])
]),
vue.createElementVNode("div", _hoisted_3, [
_hoisted_4,
vue.createElementVNode("div", _hoisted_5, [
vue.createElementVNode("div", {
style: vue.normalizeStyle({ width: vue.unref(rankList).length > 5 ? "fit-content" : "100%" }),
class: "bar-chart"
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(rankList), (item, index) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: item.name,
class: vue.normalizeClass([{ "base-panel-checked": vue.unref(itemIndex) === index, "static-bar": vue.unref(rankList).length > 5 }, "one"]),
onClick: vue.withModifiers(($event) => changeItem(index, item), ["stop"])
}, [
vue.createElementVNode("div", {
class: "value",
style: vue.normalizeStyle({ color: item.reproductionNum ? "var(--dv-color-warning)" : "" })
}, vue.toDisplayString(item.reproductionNum), 5),
vue.createElementVNode("div", {
style: vue.normalizeStyle({ height: vue.unref(maxCount) ? `${item.reproductionNum / vue.unref(maxCount) * 54}px` : "0px" }),
class: "bar"
}, null, 4),
item.name.length > 6 ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
key: 0,
class: "item",
effect: "dark",
content: item.name,
placement: "top"
}, {
default: vue.withCtx(() => [
vue.createElementVNode("span", {
":title": item.name,
style: { width: "100%" },
class: "text"
}, vue.toDisplayString(item.name), 9, _hoisted_7)
]),
_: 2
}, 1032, ["content"])) : (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
title: item.name,
style: { width: "100%" },
class: "text"
}, vue.toDisplayString(item.name), 9, _hoisted_8))
], 10, _hoisted_6);
}), 128))
], 4)
])
]),
vue.createElementVNode("div", _hoisted_9, [
vue.createElementVNode("div", _hoisted_10, [
_hoisted_11,
vue.withDirectives(vue.createVNode(_component_el_select, {
modelValue: vue.unref(accessCode),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(accessCode) ? accessCode.value = $event : null),
style: { "width": "180px" },
onChange: changeSite
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(siteList), (item) => {
return vue.openBlock(), vue.createBlock(_component_el_option, {
key: item.code,
label: item.name,
value: item.code
}, null, 8, ["label", "value"]);
}), 128))
]),
_: 1
}, 8, ["modelValue"]), [
[vue.vShow, vue.unref(siteList).length]
])
]),
vue.createElementVNode("div", _hoisted_12, [
vue.createVNode(BaseECharts_vue_vue_type_script_setup_true_lang.default, { options: options.value }, null, 8, ["options"])
])
])
]);
};
}
});
exports.default = _sfc_main;