@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" />
218 lines (213 loc) • 8.44 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const vue = require('vue');
const lodashEs = require('lodash-es');
const elementPlusExpand = require('@ued_fpi/element-plus-expand');
require('@ued_fpi/element-plus-expand/es/src/fpi-el-rolling/style/index');
const dayjs = require('dayjs');
const tools = require('../../utils/tools.js');
const utils = require('../../../utils.js');
const index = require('./api/index.js');
const waterLevel = require('./waterLevel.json.js');
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__ */ vue.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 } = utils.useThemeHook();
const algaeData = vue.reactive({
headList: ["入境断面", "时间"],
columnList: [
{ name: "入境断面", prop: "name" },
{ name: "时间", prop: "time" }
],
rollingTime: 30,
tableData: [],
factorColumns: []
// 因子列表
});
const getGradeInfo = (level) => {
let gradeText = "--";
let gradeColor = "#8E8E8E";
const gradeMap = lodashEs.keyBy(waterLevel.default, "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 = waterLevel.default.find((item) => {
return item.level === val;
});
return baseLevel && baseLevel[type] || "--";
};
const getData = async () => {
const returnFactorData = await index.factorGroupQueryByCode({ code: "CrossInAlgal", showReviseConfig: false });
if (!returnFactorData)
return;
algaeData.factorColumns = returnFactorData.factors;
const configRes = await index.algaeConfig();
const w01016Limit = configRes.data?.factorLimitValue ?? "";
const { beginTimeNewRange, endTimeNewRange } = tools.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 index.querySiteLastData(params);
const resData = res?.data ?? [];
if (!resData)
return;
algaeData.tableData = await handleFactorData(resData);
algaeData.rollingTime = algaeData.tableData.length * 2.5;
};
vue.onMounted(async () => {
!props.isLazy && getData();
});
vue.watch([() => props.params, () => props.timeObj, () => props.isLazy], () => {
!props.isLazy && getData();
}, { deep: true });
__expose({
reload: getData
});
const { tableData, factorColumns, rollingTime } = vue.toRefs(algaeData);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createElementVNode("div", {
class: "roll-box",
style: vue.normalizeStyle({ height: `${_ctx.height}px` })
}, [
vue.createVNode(vue.unref(elementPlusExpand.FpiElRolling), {
"scroll-able": "",
direction: "y",
time: vue.unref(rollingTime)
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_2, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(tableData), (item, i) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: i,
class: "table-item"
}, [
vue.createElementVNode("div", {
class: "top-title",
style: vue.normalizeStyle({ color: vue.unref(isDark) ? "#fff" : "#000" })
}, [
vue.createElementVNode("span", null, vue.toDisplayString(item.name), 1),
vue.createElementVNode("span", null, vue.toDisplayString(item.time), 1)
], 4),
vue.createElementVNode("div", _hoisted_3, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(factorColumns), (column, n) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: n,
class: "factor-one"
}, [
vue.createElementVNode("div", _hoisted_4, vue.toDisplayString(column.factorIndexName) + "： ", 1),
column.factorIndexName !== "水质现状" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
vue.createElementVNode("span", {
class: "num",
style: vue.normalizeStyle({ color: item[`${column.factorIndexCode}_overProof`] ? "#E12234" : "#00E87E" })
}, vue.toDisplayString(item[column.factorIndexCode] || "--"), 5),
vue.createElementVNode("span", _hoisted_6, vue.toDisplayString(column.unitName), 1)
])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
vue.createElementVNode("div", {
class: "num",
style: vue.normalizeStyle({ color: item.gradeColor || "" })
}, vue.toDisplayString(`${item.gradeText}类`), 5),
vue.createElementVNode("div", {
class: "unit",
style: vue.normalizeStyle({ color: item.gradeColor || "" })
}, vue.toDisplayString(getWaterQuality(item.level, "qualityState")), 5)
]))
]);
}), 128))
])
]);
}), 128))
])
]),
_: 1
}, 8, ["time"])
], 4)
]);
};
}
});
exports.default = _sfc_main;