@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" />
220 lines (215 loc) • 10.2 kB
JavaScript
'use strict';
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');
const vue = require('vue');
const iconPercent = require('./images/icon-percent.png.js');
const dayjs = require('dayjs');
const IpesProgressBar = require('../common/IpesProgressBar.vue.js');
const index = require('./types/index.js');
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__ */ vue.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__ */ vue.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__ */ vue.createElementVNode("div", { class: "title" }, [
/* @__PURE__ */ vue.createElementVNode("img", {
class: "icon",
src: iconPercent.default
}),
/* @__PURE__ */ vue.createElementVNode("span", null, "设备联网率")
], -1);
const _hoisted_16 = { class: "percent" };
const _hoisted_17 = { class: "right" };
const _hoisted_18 = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
/* @__PURE__ */ vue.createElementVNode("span", null, "开阀"),
/* @__PURE__ */ vue.createElementVNode("span", { class: "space" }, "/"),
/* @__PURE__ */ vue.createElementVNode("span", null, "关阀")
], -1);
const _hoisted_19 = { class: "value" };
const _hoisted_20 = { class: "online" };
const _hoisted_21 = /* @__PURE__ */ vue.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__ */ vue.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__ */ vue.createElementVNode("div", { class: "icon mgr16 water-total" }, null, -1);
const _hoisted_33 = { class: "content" };
const _hoisted_34 = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, " 供水总量 ", -1);
const _hoisted_35 = { class: "value" };
const _hoisted_36 = /* @__PURE__ */ vue.createElementVNode("span", { class: "unit" }, "m³", -1);
const _hoisted_37 = { class: "water-statistics-panel water-statistics__leakage" };
const _hoisted_38 = /* @__PURE__ */ vue.createElementVNode("div", { class: "icon mgr16 water-leakage" }, null, -1);
const _hoisted_39 = { class: "content" };
const _hoisted_40 = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, " 漏损水量 ", -1);
const _hoisted_41 = { class: "value" };
const _hoisted_42 = /* @__PURE__ */ vue.createElementVNode("span", { class: "unit" }, "m³", -1);
const _hoisted_43 = { class: "water-statistics__percent" };
const _hoisted_44 = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, " 漏损率 ", -1);
const _hoisted_45 = { class: "content" };
const _hoisted_46 = { class: "online-data" };
const _hoisted_47 = /* @__PURE__ */ vue.createElementVNode("div", { class: "label" }, " 在线/断线 ", -1);
const _hoisted_48 = { class: "value" };
const _hoisted_49 = { class: "online" };
const _hoisted_50 = /* @__PURE__ */ vue.createElementVNode("span", { class: "space" }, "/", -1);
const _hoisted_51 = { class: "offline" };
const __default__ = {
name: "DvIpesWaterNetworkManage",
title: "园区供水管网管理"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: vue.mergeDefaults({
percentNum: {},
onlineData: {},
waterStatus: {},
waterVolume: {},
timeType: {},
timeTypeOptions: {}
}, {
...index.defaultProps
}),
emits: {
onTimeTypeChange: (value) => value
},
setup(__props, { emit: emits }) {
const props = __props;
const _timeType = vue.ref(props.timeType);
const now = vue.ref(dayjs().format("YYYY-MM-DD HH:mm"));
const timeLabel = vue.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 = es.ElOption;
const _component_el_select = es.ElSelect;
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createElementVNode("div", _hoisted_2, [
vue.createElementVNode("div", _hoisted_3, [
vue.createElementVNode("div", _hoisted_4, [
_hoisted_5,
vue.createElementVNode("span", _hoisted_6, "（" + vue.toDisplayString(now.value) + "）", 1)
])
]),
vue.createElementVNode("div", _hoisted_7, [
vue.createElementVNode("div", _hoisted_8, [
vue.createElementVNode("div", _hoisted_9, [
_hoisted_10,
vue.createElementVNode("div", _hoisted_11, vue.toDisplayString(_ctx.percentNum.toFixed(0)) + "% ", 1)
]),
vue.createElementVNode("div", _hoisted_12, [
vue.createVNode(IpesProgressBar.default, {
percent: _ctx.percentNum || 0
}, null, 8, ["percent"])
]),
vue.createElementVNode("div", _hoisted_13, [
vue.createElementVNode("div", _hoisted_14, [
_hoisted_15,
vue.createElementVNode("div", _hoisted_16, vue.toDisplayString(_ctx.waterStatus.line.pel || 0) + "% ", 1)
]),
vue.createElementVNode("div", _hoisted_17, [
_hoisted_18,
vue.createElementVNode("div", _hoisted_19, [
vue.createElementVNode("span", _hoisted_20, vue.toDisplayString(_ctx.waterStatus.open.openTotal || 0), 1),
_hoisted_21,
vue.createElementVNode("span", _hoisted_22, vue.toDisplayString(_ctx.waterStatus.line.total || 0), 1)
])
])
])
])
])
]),
vue.createElementVNode("div", _hoisted_23, [
vue.createElementVNode("div", _hoisted_24, [
vue.createElementVNode("div", _hoisted_25, [
_hoisted_26,
vue.createElementVNode("span", _hoisted_27, "（" + vue.toDisplayString(timeLabel.value) + "）", 1)
]),
vue.createElementVNode("div", _hoisted_28, [
vue.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: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.timeTypeOptions, (item) => {
return vue.openBlock(), vue.createBlock(_component_el_option, {
key: item.value,
value: item.value,
label: item.label
}, null, 8, ["value", "label"]);
}), 128))
]),
_: 1
}, 8, ["modelValue"])
])
]),
vue.createElementVNode("div", _hoisted_29, [
vue.createElementVNode("div", _hoisted_30, [
vue.createElementVNode("div", _hoisted_31, [
_hoisted_32,
vue.createElementVNode("div", _hoisted_33, [
_hoisted_34,
vue.createElementVNode("div", _hoisted_35, [
vue.createElementVNode("span", null, vue.toDisplayString(_ctx.waterVolume.supply || 0), 1),
_hoisted_36
])
])
]),
vue.createElementVNode("div", _hoisted_37, [
_hoisted_38,
vue.createElementVNode("div", _hoisted_39, [
_hoisted_40,
vue.createElementVNode("div", _hoisted_41, [
vue.createElementVNode("span", null, vue.toDisplayString(_ctx.waterVolume.ullage || 0), 1),
_hoisted_42
])
])
])
]),
vue.createElementVNode("div", _hoisted_43, [
_hoisted_44,
vue.createElementVNode("div", _hoisted_45, vue.toDisplayString(_ctx.waterVolume.per || 0) + "% ", 1),
vue.createElementVNode("div", _hoisted_46, [
_hoisted_47,
vue.createElementVNode("div", _hoisted_48, [
vue.createElementVNode("span", _hoisted_49, vue.toDisplayString(_ctx.onlineData.online), 1),
_hoisted_50,
vue.createElementVNode("span", _hoisted_51, vue.toDisplayString(_ctx.onlineData.offline), 1)
])
])
])
])
])
]);
};
}
});
exports.default = _sfc_main;