@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" />
214 lines (211 loc) • 8.28 kB
JavaScript
import { defineComponent, reactive, onMounted, watch, toRefs, openBlock, createElementBlock, createElementVNode, normalizeStyle, createVNode, unref, withCtx, Fragment, renderList, toDisplayString } from 'vue';
import { keyBy } from 'lodash-es';
import { FpiElRolling } from '@ued_fpi/element-plus-expand';
import '@ued_fpi/element-plus-expand/es/src/fpi-el-rolling/style/index';
import dayjs from 'dayjs';
import { getAlgaeTime } from '../../utils/tools.mjs';
import { useThemeHook } from '../../../utils.mjs';
import { factorGroupQueryByCode, algaeConfig, querySiteLastData } from './api/index.mjs';
import gradesWaterQuality from './waterLevel.json.mjs';
const _hoisted_1 = { class: "algalbloom-entry-section" };
const _hoisted_2 = { class: "table-body" };
const _hoisted_3 = { class: "factor-list" };
const _hoisted_4 = { class: "lable" };
const _hoisted_5 = {
key: 0,
class: "value"
};
const _hoisted_6 = { class: "unit" };
const _hoisted_7 = {
key: 1,
class: "value"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "DvWgmsAlgaeTopicsStatusEntrySection",
title: "入境断面藻华现状（1.4）"
},
__name: "index",
props: {
params: { default: () => {
return {
treeType: "1",
treeId: "3301"
};
} },
timeObj: { default: () => {
return {
periodBeginTime: dayjs().startOf("year").valueOf(),
periodEndTime: dayjs().endOf("year").valueOf(),
currentTime: dayjs().valueOf(),
currentType: "dailyControl",
upToDate: true
};
} },
height: { default: 204 },
isLazy: { type: Boolean, default: false }
},
setup(__props, { expose: __expose }) {
const props = __props;
const { isDark } = useThemeHook();
const algaeData = reactive({
headList: ["入境断面", "时间"],
columnList: [
{ name: "入境断面", prop: "name" },
{ name: "时间", prop: "time" }
],
rollingTime: 30,
tableData: [],
factorColumns: []
// 因子列表
});
const getGradeInfo = (level) => {
let gradeText = "--";
let gradeColor = "#8E8E8E";
const gradeMap = keyBy(gradesWaterQuality, "level");
if (gradeMap[level]) {
gradeText = gradeMap[level].name;
gradeColor = gradeMap[level].color;
}
return {
gradeText,
gradeColor
};
};
const handleFactorData = async (dataArr) => {
let tableData2 = [];
if (dataArr && Array.isArray(dataArr)) {
tableData2 = await Promise.all(dataArr.map(async (item) => {
const objFactor = {};
item.pollutants && Array.isArray(item.pollutants) && item.pollutants.forEach((cItem) => {
objFactor[cItem.code] = cItem.value;
objFactor[`${cItem.code}_overProof`] = cItem.overProof;
});
const gradeObj = await getGradeInfo(item.grade);
return {
...item,
...objFactor,
...gradeObj,
time: item.time ? dayjs(item.time).format("YYYY.MM.DD HH") : "--"
};
}));
}
return tableData2;
};
const getWaterQuality = (val, type) => {
if (["", void 0, null].includes(val)) {
if (type === "color")
return "";
return "--";
}
const baseLevel = gradesWaterQuality.find((item) => {
return item.level === val;
});
return baseLevel && baseLevel[type] || "--";
};
const getData = async () => {
const returnFactorData = await factorGroupQueryByCode({ code: "CrossInAlgal", showReviseConfig: false });
if (!returnFactorData)
return;
algaeData.factorColumns = returnFactorData.factors;
const configRes = await algaeConfig();
const w01016Limit = configRes.data?.factorLimitValue ?? "";
const { beginTimeNewRange, endTimeNewRange } = getAlgaeTime(props.timeObj);
const params = {
factorFlag: true,
factor: returnFactorData?.id,
stationCodes: "1,40",
queryTimeType: "hour",
drinkWaterSourceType: "",
treeType: props.params.treeType,
treeId: props.params.treeId,
beginTime: beginTimeNewRange,
endTime: endTimeNewRange,
factorCode: "w01016",
factorLimitValue: w01016Limit,
stationType: "002",
treeIdList: "",
isLast: props.timeObj?.currentType === "currentType" && props.timeObj?.upToDate,
crossType: 0
// 出入境 1：出境 0 入境，多个逗号隔开
};
const res = await querySiteLastData(params);
const resData = res?.data ?? [];
if (!resData)
return;
algaeData.tableData = await handleFactorData(resData);
algaeData.rollingTime = algaeData.tableData.length * 2.5;
};
onMounted(async () => {
!props.isLazy && getData();
});
watch([() => props.params, () => props.timeObj, () => props.isLazy], () => {
!props.isLazy && getData();
}, { deep: true });
__expose({
reload: getData
});
const { tableData, factorColumns, rollingTime } = toRefs(algaeData);
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", {
class: "roll-box",
style: normalizeStyle({ height: `${_ctx.height}px` })
}, [
createVNode(unref(FpiElRolling), {
"scroll-able": "",
direction: "y",
time: unref(rollingTime)
}, {
default: withCtx(() => [
createElementVNode("div", _hoisted_2, [
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(tableData), (item, i) => {
return openBlock(), createElementBlock("div", {
key: i,
class: "table-item"
}, [
createElementVNode("div", {
class: "top-title",
style: normalizeStyle({ color: unref(isDark) ? "#fff" : "#000" })
}, [
createElementVNode("span", null, toDisplayString(item.name), 1),
createElementVNode("span", null, toDisplayString(item.time), 1)
], 4),
createElementVNode("div", _hoisted_3, [
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(factorColumns), (column, n) => {
return openBlock(), createElementBlock("div", {
key: n,
class: "factor-one"
}, [
createElementVNode("div", _hoisted_4, toDisplayString(column.factorIndexName) + "： ", 1),
column.factorIndexName !== "水质现状" ? (openBlock(), createElementBlock("div", _hoisted_5, [
createElementVNode("span", {
class: "num",
style: normalizeStyle({ color: item[`${column.factorIndexCode}_overProof`] ? "#E12234" : "#00E87E" })
}, toDisplayString(item[column.factorIndexCode] || "--"), 5),
createElementVNode("span", _hoisted_6, toDisplayString(column.unitName), 1)
])) : (openBlock(), createElementBlock("div", _hoisted_7, [
createElementVNode("div", {
class: "num",
style: normalizeStyle({ color: item.gradeColor || "" })
}, toDisplayString(`${item.gradeText}类`), 5),
createElementVNode("div", {
class: "unit",
style: normalizeStyle({ color: item.gradeColor || "" })
}, toDisplayString(getWaterQuality(item.level, "qualityState")), 5)
]))
]);
}), 128))
])
]);
}), 128))
])
]),
_: 1
}, 8, ["time"])
], 4)
]);
};
}
});
export { _sfc_main as default };