@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" />
180 lines (177 loc) • 8.26 kB
JavaScript
import { ElScrollbar } from 'element-plus/es';
import 'element-plus/es/components/base/style/css';
import 'element-plus/es/components/scrollbar/style/css';
import { defineComponent, ref, watch, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, toDisplayString, unref } from 'vue';
import dayjs from 'dayjs';
import IpesProgressBar from '../common/IpesProgressBar.vue.mjs';
import percentPng from './images/icon-percent.png.mjs';
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__ */ 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__ */ createElementVNode("span", null, "设备联网率", -1);
const _hoisted_14 = { class: "percent" };
const _hoisted_15 = { class: "right" };
const _hoisted_16 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
/* @__PURE__ */ createElementVNode("span", null, "开阀"),
/* @__PURE__ */ createElementVNode("span", { class: "space" }, "/"),
/* @__PURE__ */ createElementVNode("span", null, "关阀")
], -1);
const _hoisted_17 = { class: "value" };
const _hoisted_18 = { style: { "color": "#0eed9b" } };
const _hoisted_19 = /* @__PURE__ */ 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__ */ 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__ */ createElementVNode("span", null, "设备联网率", -1);
const _hoisted_33 = { class: "percent" };
const _hoisted_34 = { class: "right" };
const _hoisted_35 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
/* @__PURE__ */ createElementVNode("span", null, "亮灯"),
/* @__PURE__ */ createElementVNode("span", { class: "space" }, "/"),
/* @__PURE__ */ createElementVNode("span", null, "关灯")
], -1);
const _hoisted_36 = { class: "value" };
const _hoisted_37 = { style: { "color": "#0eed9b" } };
const _hoisted_38 = /* @__PURE__ */ createElementVNode("span", { class: "space" }, "/", -1);
const _hoisted_39 = { style: { "color": "#ff5d54" } };
const __default__ = {
name: "DvIpesBusinessManage",
title: "运营管理"
};
const _sfc_main = /* @__PURE__ */ 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 = ref(0);
const percent = ref(0);
const onlinePercent = ref(0);
const currentDate = ref(dayjs().format("YYYY-MM-DD HH:mm"));
watch(() => props.waterStatus, (newValue) => {
percentNum.value = newValue.open.total === 0 ? 0 : newValue.open.openTotal / newValue.open.total * 100;
}, { deep: true, immediate: true });
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 = ElScrollbar;
return openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(_component_el_scrollbar, { style: { "max-height": "365px" } }, {
default: withCtx(() => [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
createElementVNode("div", _hoisted_4, [
_hoisted_5,
createElementVNode("div", _hoisted_6, toDisplayString(percentNum.value.toFixed(0)) + "% ", 1),
createElementVNode("div", _hoisted_7, toDisplayString(currentDate.value), 1)
]),
createElementVNode("div", _hoisted_8, [
createVNode(IpesProgressBar, {
percent: percentNum.value || 0
}, null, 8, ["percent"])
]),
createElementVNode("div", _hoisted_9, [
createElementVNode("div", _hoisted_10, [
createElementVNode("div", _hoisted_11, [
createElementVNode("img", {
class: "icon mgr4",
src: unref(percentPng)
}, null, 8, _hoisted_12),
_hoisted_13
]),
createElementVNode("div", _hoisted_14, toDisplayString(__props.waterStatus.line.pel || 0) + "% ", 1)
]),
createElementVNode("div", _hoisted_15, [
_hoisted_16,
createElementVNode("div", _hoisted_17, [
createElementVNode("span", _hoisted_18, toDisplayString(__props.waterStatus.open.openTotal || 0), 1),
_hoisted_19,
createElementVNode("span", _hoisted_20, toDisplayString((__props.waterStatus.open.total || 0) - (__props.waterStatus.open.openTotal || 0)), 1)
])
])
])
])
]),
createElementVNode("div", _hoisted_21, [
createElementVNode("div", _hoisted_22, [
createElementVNode("div", _hoisted_23, [
_hoisted_24,
createElementVNode("div", _hoisted_25, toDisplayString(percent.value.toFixed(0)) + "% ", 1),
createElementVNode("div", _hoisted_26, toDisplayString(currentDate.value), 1)
]),
createElementVNode("div", _hoisted_27, [
createVNode(IpesProgressBar, {
percent: percent.value || 0
}, null, 8, ["percent"])
]),
createElementVNode("div", _hoisted_28, [
createElementVNode("div", _hoisted_29, [
createElementVNode("div", _hoisted_30, [
createElementVNode("img", {
class: "icon mgr4",
src: unref(percentPng)
}, null, 8, _hoisted_31),
_hoisted_32
]),
createElementVNode("div", _hoisted_33, toDisplayString(onlinePercent.value || 0) + "% ", 1)
]),
createElementVNode("div", _hoisted_34, [
_hoisted_35,
createElementVNode("div", _hoisted_36, [
createElementVNode("span", _hoisted_37, toDisplayString(__props.lightingDevice.onlamp || 0), 1),
_hoisted_38,
createElementVNode("span", _hoisted_39, toDisplayString(__props.lightingDevice.offlamp || 0), 1)
])
])
])
])
])
]),
_: 1
})
]);
};
}
});
export { _sfc_main as default };