@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" />
216 lines (213 loc) • 9.9 kB
JavaScript
import { ElOption, ElSelect } from 'element-plus/es';
import 'element-plus/es/components/base/style/css';
import 'element-plus/es/components/select/style/css';
import 'element-plus/es/components/option/style/css';
import { defineComponent, mergeDefaults, ref, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, withCtx, Fragment, renderList, createBlock } from 'vue';
import _imports_0 from './images/icon-percent.png.mjs';
import dayjs from 'dayjs';
import IpesProgressBar from '../common/IpesProgressBar.vue.mjs';
import { defaultProps } from './types/index.mjs';
const _hoisted_1 = { class: "dv-ipes-water-network" };
const _hoisted_2 = { class: "sealing-row" };
const _hoisted_3 = { class: "sealing-header" };
const _hoisted_4 = { class: "sealing-header__title" };
const _hoisted_5 = /* @__PURE__ */ createElementVNode("span", null, "设备情况", -1);
const _hoisted_6 = { class: "sealing-header__title--sub" };
const _hoisted_7 = { class: "water-device" };
const _hoisted_8 = { class: "water-device__info" };
const _hoisted_9 = { class: "water-device__percent" };
const _hoisted_10 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, " 阀门开启率 ", -1);
const _hoisted_11 = { class: "value" };
const _hoisted_12 = { class: "water-device__progress" };
const _hoisted_13 = { class: "water-device__detail" };
const _hoisted_14 = { class: "left" };
const _hoisted_15 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
/* @__PURE__ */ createElementVNode("img", {
class: "icon",
src: _imports_0
}),
/* @__PURE__ */ createElementVNode("span", null, "设备联网率")
], -1);
const _hoisted_16 = { class: "percent" };
const _hoisted_17 = { class: "right" };
const _hoisted_18 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
/* @__PURE__ */ createElementVNode("span", null, "开阀"),
/* @__PURE__ */ createElementVNode("span", { class: "space" }, "/"),
/* @__PURE__ */ createElementVNode("span", null, "关阀")
], -1);
const _hoisted_19 = { class: "value" };
const _hoisted_20 = { class: "online" };
const _hoisted_21 = /* @__PURE__ */ createElementVNode("span", { class: "space" }, "/", -1);
const _hoisted_22 = { class: "offline" };
const _hoisted_23 = { class: "sealing-row" };
const _hoisted_24 = { class: "sealing-header" };
const _hoisted_25 = { class: "sealing-header__title" };
const _hoisted_26 = /* @__PURE__ */ createElementVNode("span", null, "水量统计", -1);
const _hoisted_27 = { class: "sealing-header__title--sub" };
const _hoisted_28 = { class: "sealing-header__extra" };
const _hoisted_29 = { class: "water-statistics" };
const _hoisted_30 = { class: "water-statistics__number" };
const _hoisted_31 = { class: "water-statistics-panel water-statistics__total" };
const _hoisted_32 = /* @__PURE__ */ createElementVNode("div", { class: "icon mgr16 water-total" }, null, -1);
const _hoisted_33 = { class: "content" };
const _hoisted_34 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, " 供水总量 ", -1);
const _hoisted_35 = { class: "value" };
const _hoisted_36 = /* @__PURE__ */ createElementVNode("span", { class: "unit" }, "m³", -1);
const _hoisted_37 = { class: "water-statistics-panel water-statistics__leakage" };
const _hoisted_38 = /* @__PURE__ */ createElementVNode("div", { class: "icon mgr16 water-leakage" }, null, -1);
const _hoisted_39 = { class: "content" };
const _hoisted_40 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, " 漏损水量 ", -1);
const _hoisted_41 = { class: "value" };
const _hoisted_42 = /* @__PURE__ */ createElementVNode("span", { class: "unit" }, "m³", -1);
const _hoisted_43 = { class: "water-statistics__percent" };
const _hoisted_44 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, " 漏损率 ", -1);
const _hoisted_45 = { class: "content" };
const _hoisted_46 = { class: "online-data" };
const _hoisted_47 = /* @__PURE__ */ createElementVNode("div", { class: "label" }, " 在线/断线 ", -1);
const _hoisted_48 = { class: "value" };
const _hoisted_49 = { class: "online" };
const _hoisted_50 = /* @__PURE__ */ createElementVNode("span", { class: "space" }, "/", -1);
const _hoisted_51 = { class: "offline" };
const __default__ = {
name: "DvIpesWaterNetworkManage",
title: "园区供水管网管理"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: mergeDefaults({
percentNum: {},
onlineData: {},
waterStatus: {},
waterVolume: {},
timeType: {},
timeTypeOptions: {}
}, {
...defaultProps
}),
emits: {
onTimeTypeChange: (value) => value
},
setup(__props, { emit: emits }) {
const props = __props;
const _timeType = ref(props.timeType);
const now = ref(dayjs().format("YYYY-MM-DD HH:mm"));
const timeLabel = computed(() => {
let format;
((format2) => {
format2["year"] = "YYYY";
format2["month"] = "YYYY-MM";
format2["day"] = "YYYY-MM-DD";
})(format || (format = {}));
return dayjs().format(format[_timeType.value]);
});
const handleTimeTypeChange = (value) => {
emits("onTimeTypeChange", value);
};
return (_ctx, _cache) => {
const _component_el_option = ElOption;
const _component_el_select = ElSelect;
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
createElementVNode("div", _hoisted_4, [
_hoisted_5,
createElementVNode("span", _hoisted_6, "（" + toDisplayString(now.value) + "）", 1)
])
]),
createElementVNode("div", _hoisted_7, [
createElementVNode("div", _hoisted_8, [
createElementVNode("div", _hoisted_9, [
_hoisted_10,
createElementVNode("div", _hoisted_11, toDisplayString(_ctx.percentNum.toFixed(0)) + "% ", 1)
]),
createElementVNode("div", _hoisted_12, [
createVNode(IpesProgressBar, {
percent: _ctx.percentNum || 0
}, null, 8, ["percent"])
]),
createElementVNode("div", _hoisted_13, [
createElementVNode("div", _hoisted_14, [
_hoisted_15,
createElementVNode("div", _hoisted_16, toDisplayString(_ctx.waterStatus.line.pel || 0) + "% ", 1)
]),
createElementVNode("div", _hoisted_17, [
_hoisted_18,
createElementVNode("div", _hoisted_19, [
createElementVNode("span", _hoisted_20, toDisplayString(_ctx.waterStatus.open.openTotal || 0), 1),
_hoisted_21,
createElementVNode("span", _hoisted_22, toDisplayString(_ctx.waterStatus.line.total || 0), 1)
])
])
])
])
])
]),
createElementVNode("div", _hoisted_23, [
createElementVNode("div", _hoisted_24, [
createElementVNode("div", _hoisted_25, [
_hoisted_26,
createElementVNode("span", _hoisted_27, "（" + toDisplayString(timeLabel.value) + "）", 1)
]),
createElementVNode("div", _hoisted_28, [
createVNode(_component_el_select, {
modelValue: _timeType.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _timeType.value = $event),
"popper-append-to-body": false,
class: "fpi-select",
onChange: handleTimeTypeChange
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.timeTypeOptions, (item) => {
return openBlock(), createBlock(_component_el_option, {
key: item.value,
value: item.value,
label: item.label
}, null, 8, ["value", "label"]);
}), 128))
]),
_: 1
}, 8, ["modelValue"])
])
]),
createElementVNode("div", _hoisted_29, [
createElementVNode("div", _hoisted_30, [
createElementVNode("div", _hoisted_31, [
_hoisted_32,
createElementVNode("div", _hoisted_33, [
_hoisted_34,
createElementVNode("div", _hoisted_35, [
createElementVNode("span", null, toDisplayString(_ctx.waterVolume.supply || 0), 1),
_hoisted_36
])
])
]),
createElementVNode("div", _hoisted_37, [
_hoisted_38,
createElementVNode("div", _hoisted_39, [
_hoisted_40,
createElementVNode("div", _hoisted_41, [
createElementVNode("span", null, toDisplayString(_ctx.waterVolume.ullage || 0), 1),
_hoisted_42
])
])
])
]),
createElementVNode("div", _hoisted_43, [
_hoisted_44,
createElementVNode("div", _hoisted_45, toDisplayString(_ctx.waterVolume.per || 0) + "% ", 1),
createElementVNode("div", _hoisted_46, [
_hoisted_47,
createElementVNode("div", _hoisted_48, [
createElementVNode("span", _hoisted_49, toDisplayString(_ctx.onlineData.online), 1),
_hoisted_50,
createElementVNode("span", _hoisted_51, toDisplayString(_ctx.onlineData.offline), 1)
])
])
])
])
])
]);
};
}
});
export { _sfc_main as default };