UNPKG

@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" />

108 lines (103 loc) 4.02 kB
'use strict'; Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } }); const vue = require('vue'); const dayjs = require('dayjs'); const utils = require('../../../utils.js'); const index = require('./api/index.js'); const _hoisted_1 = { class: "evaluation-box" }; const _hoisted_2 = { class: "bar-box" }; const _hoisted_3 = { class: "bar-title" }; const _hoisted_4 = { class: "count" }; const _sfc_main = /* @__PURE__ */ vue.defineComponent({ ...{ name: "DvWgmsAlgaeTopicsFollowUpEvaluation", title: "最近三天藻类预警变化(1.4)" }, __name: "index", props: { treeId: { default: "3301" }, stationType: { default: "002" }, data: { default: null }, timeObj: { default: () => { return { periodBeginTime: dayjs().startOf("year").valueOf(), periodEndTime: dayjs().endOf("year").valueOf(), currentTime: dayjs().valueOf(), currentType: "dailyControl", upToDate: true }; } }, isLazy: { type: Boolean, default: false } }, setup(__props, { expose: __expose }) { const props = __props; const list = vue.ref([]); const { isDark } = utils.useThemeHook(); const getAlgaeThreeData = async () => { if (props.data) { list.value = props.data; return; } const { beginTime, endTime } = getParamsTime(); const api = props.stationType === "002" ? index.getFollowUpEvaluationEmergency : index.handleOverCountStatByDay; const params = { beginTime, endTime, queryTimeType: "day", stationCodeList: [1, 40], treeId: props.treeId, treeType: 1, isDataTime: true }; const res = await api(params); const resData = res.data || []; const total = Math.max(...resData.map((cur) => cur.count)); list.value = resData.map((item) => ({ ...item, timeStr: item.timeStr.split("-").slice(1).join("-"), percent: total ? item.count / total * 100 : 0 })).reverse(); }; const getParamsTime = () => { const currTime = props.timeObj.currentTime || dayjs().valueOf(); const isToday = dayjs().isSame(currTime, "d"); const beginTime = dayjs(currTime).add(isToday ? -3 : -2, "days").startOf("day").valueOf(); const endTime = dayjs(currTime).add(isToday ? -1 : 0, "days").endOf("day").valueOf(); return { beginTime, endTime }; }; vue.onMounted(async () => { !props.isLazy && getAlgaeThreeData(); }); vue.watch([() => props.treeId, () => props.data, () => props.timeObj, () => props.stationType, () => props.isLazy], () => { !props.isLazy && getAlgaeThreeData(); }, { deep: true }); __expose({ reload: getAlgaeThreeData }); return (_ctx, _cache) => { return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [ (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(list), (item) => { return vue.openBlock(), vue.createElementBlock("div", { key: item.timeStr, class: "evaluation-progress" }, [ vue.createElementVNode("span", { class: "time", style: vue.normalizeStyle({ color: vue.unref(isDark) ? "#fff" : "#303133" }) }, vue.toDisplayString(item.timeStr), 5), vue.createElementVNode("div", _hoisted_2, [ vue.createElementVNode("div", { class: vue.normalizeClass(vue.unref(isDark) ? "bar-center" : "bar-center-light"), style: vue.normalizeStyle({ width: `${item.percent}%` }) }, null, 6), vue.withDirectives(vue.createElementVNode("div", _hoisted_3, null, 512), [ [vue.vShow, item.percent] ]) ]), vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(item.count), 1) ]); }), 128)) ]); }; } }); exports.default = _sfc_main;