@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" />
184 lines (179 loc) • 8.58 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/scrollbar/style/css');
const vue = require('vue');
const dayjs = require('dayjs');
const IpesProgressBar = require('../common/IpesProgressBar.vue.js');
const iconPercent = require('./images/icon-percent.png.js');
const _hoisted_1 = { class: "dv-ipes-business-manage" };
const _hoisted_2 = { class: "device-row" };
const _hoisted_3 = { class: "device-row__info" };
const _hoisted_4 = { class: "device-row__percent" };
const _hoisted_5 = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, " 阀门开启率 ", -1);
const _hoisted_6 = { class: "value" };
const _hoisted_7 = { class: "date" };
const _hoisted_8 = { class: "device-row__progress" };
const _hoisted_9 = { class: "device-row__detail" };
const _hoisted_10 = { class: "left" };
const _hoisted_11 = { class: "title" };
const _hoisted_12 = ["src"];
const _hoisted_13 = /* @__PURE__ */ vue.createElementVNode("span", null, "设备联网率", -1);
const _hoisted_14 = { class: "percent" };
const _hoisted_15 = { class: "right" };
const _hoisted_16 = /* @__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_17 = { class: "value" };
const _hoisted_18 = { style: { "color": "#0eed9b" } };
const _hoisted_19 = /* @__PURE__ */ vue.createElementVNode("span", { class: "space" }, "/", -1);
const _hoisted_20 = { style: { "color": "#ff5d54" } };
const _hoisted_21 = { class: "device-row mgt12" };
const _hoisted_22 = { class: "device-row__info" };
const _hoisted_23 = { class: "device-row__percent" };
const _hoisted_24 = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, " 亮灯率 ", -1);
const _hoisted_25 = { class: "value" };
const _hoisted_26 = { class: "date" };
const _hoisted_27 = { class: "device-row__progress" };
const _hoisted_28 = { class: "device-row__detail" };
const _hoisted_29 = { class: "left" };
const _hoisted_30 = { class: "title" };
const _hoisted_31 = ["src"];
const _hoisted_32 = /* @__PURE__ */ vue.createElementVNode("span", null, "设备联网率", -1);
const _hoisted_33 = { class: "percent" };
const _hoisted_34 = { class: "right" };
const _hoisted_35 = /* @__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_36 = { class: "value" };
const _hoisted_37 = { style: { "color": "#0eed9b" } };
const _hoisted_38 = /* @__PURE__ */ vue.createElementVNode("span", { class: "space" }, "/", -1);
const _hoisted_39 = { style: { "color": "#ff5d54" } };
const __default__ = {
name: "DvIpesBusinessManage",
title: "运营管理"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: {
waterStatus: {
type: Object,
default: () => {
return { line: { pel: 0 }, open: { openTotal: 0, total: 0 } };
}
},
lightingDevice: {
type: Object,
default: () => {
return {
offline: 0,
offlamp: 0,
name: "",
online: 0,
type: 0,
onlamp: 0,
alarmlamp: 0,
normallamp: 0
};
}
}
},
setup(__props) {
const props = __props;
const percentNum = vue.ref(0);
const percent = vue.ref(0);
const onlinePercent = vue.ref(0);
const currentDate = vue.ref(dayjs().format("YYYY-MM-DD HH:mm"));
vue.watch(() => props.waterStatus, (newValue) => {
percentNum.value = newValue.open.total === 0 ? 0 : newValue.open.openTotal / newValue.open.total * 100;
}, { deep: true, immediate: true });
vue.watch(() => props.lightingDevice, (newValue) => {
percent.value = newValue.onlamp + newValue.offlamp === 0 ? 0 : (newValue.onlamp || 0) / (newValue.onlamp + newValue.offlamp) * 100;
onlinePercent.value = newValue.online + newValue.offline === 0 ? 0 : (newValue.online || 0) / (newValue.online + newValue.offline) * 100;
}, { deep: true, immediate: true });
return (_ctx, _cache) => {
const _component_el_scrollbar = es.ElScrollbar;
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createVNode(_component_el_scrollbar, { style: { "max-height": "365px" } }, {
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_2, [
vue.createElementVNode("div", _hoisted_3, [
vue.createElementVNode("div", _hoisted_4, [
_hoisted_5,
vue.createElementVNode("div", _hoisted_6, vue.toDisplayString(percentNum.value.toFixed(0)) + "% ", 1),
vue.createElementVNode("div", _hoisted_7, vue.toDisplayString(currentDate.value), 1)
]),
vue.createElementVNode("div", _hoisted_8, [
vue.createVNode(IpesProgressBar.default, {
percent: percentNum.value || 0
}, null, 8, ["percent"])
]),
vue.createElementVNode("div", _hoisted_9, [
vue.createElementVNode("div", _hoisted_10, [
vue.createElementVNode("div", _hoisted_11, [
vue.createElementVNode("img", {
class: "icon mgr4",
src: vue.unref(iconPercent.default)
}, null, 8, _hoisted_12),
_hoisted_13
]),
vue.createElementVNode("div", _hoisted_14, vue.toDisplayString(__props.waterStatus.line.pel || 0) + "% ", 1)
]),
vue.createElementVNode("div", _hoisted_15, [
_hoisted_16,
vue.createElementVNode("div", _hoisted_17, [
vue.createElementVNode("span", _hoisted_18, vue.toDisplayString(__props.waterStatus.open.openTotal || 0), 1),
_hoisted_19,
vue.createElementVNode("span", _hoisted_20, vue.toDisplayString((__props.waterStatus.open.total || 0) - (__props.waterStatus.open.openTotal || 0)), 1)
])
])
])
])
]),
vue.createElementVNode("div", _hoisted_21, [
vue.createElementVNode("div", _hoisted_22, [
vue.createElementVNode("div", _hoisted_23, [
_hoisted_24,
vue.createElementVNode("div", _hoisted_25, vue.toDisplayString(percent.value.toFixed(0)) + "% ", 1),
vue.createElementVNode("div", _hoisted_26, vue.toDisplayString(currentDate.value), 1)
]),
vue.createElementVNode("div", _hoisted_27, [
vue.createVNode(IpesProgressBar.default, {
percent: percent.value || 0
}, null, 8, ["percent"])
]),
vue.createElementVNode("div", _hoisted_28, [
vue.createElementVNode("div", _hoisted_29, [
vue.createElementVNode("div", _hoisted_30, [
vue.createElementVNode("img", {
class: "icon mgr4",
src: vue.unref(iconPercent.default)
}, null, 8, _hoisted_31),
_hoisted_32
]),
vue.createElementVNode("div", _hoisted_33, vue.toDisplayString(onlinePercent.value || 0) + "% ", 1)
]),
vue.createElementVNode("div", _hoisted_34, [
_hoisted_35,
vue.createElementVNode("div", _hoisted_36, [
vue.createElementVNode("span", _hoisted_37, vue.toDisplayString(__props.lightingDevice.onlamp || 0), 1),
_hoisted_38,
vue.createElementVNode("span", _hoisted_39, vue.toDisplayString(__props.lightingDevice.offlamp || 0), 1)
])
])
])
])
])
]),
_: 1
})
]);
};
}
});
exports.default = _sfc_main;