@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" />
204 lines (199 loc) • 8.44 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');
require('element-plus/es/components/empty/style/css');
const vue = require('vue');
const IpesPercentBar = require('../common/IpesPercentBar.vue.js');
const tools = require('../../utils/tools.js');
const newNodata = require('./images/new-nodata.svg.js');
const _hoisted_1 = { class: "dv-ipes-inspection-manage" };
const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "access-row" }, [
/* @__PURE__ */ vue.createElementVNode("div", { class: "access-header" }, [
/* @__PURE__ */ vue.createElementVNode("div", { class: "access-header__title" }, [
/* @__PURE__ */ vue.createElementVNode("span", null, "巡检事件")
])
])
], -1);
const _hoisted_3 = { class: "inspection-event" };
const _hoisted_4 = { class: "inspection-num" };
const _hoisted_5 = { class: "left" };
const _hoisted_6 = { class: "inspection-total" };
const _hoisted_7 = /* @__PURE__ */ vue.createElementVNode("span", { class: "label" }, "总数", -1);
const _hoisted_8 = { class: "num" };
const _hoisted_9 = { class: "right" };
const _hoisted_10 = { class: "value" };
const _hoisted_11 = { class: "space" };
const _hoisted_12 = { class: "inspection-progress" };
const _hoisted_13 = { class: "inspection-percent" };
const _hoisted_14 = /* @__PURE__ */ vue.createElementVNode("div", { class: "left" }, [
/* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
/* @__PURE__ */ vue.createElementVNode("span", null, "已处置/处置中/未处置")
])
], -1);
const _hoisted_15 = { class: "right" };
const _hoisted_16 = { class: "value" };
const _hoisted_17 = { class: "space" };
const _hoisted_18 = { class: "access-row" };
const _hoisted_19 = { class: "access-header" };
const _hoisted_20 = { class: "access-header__title" };
const _hoisted_21 = /* @__PURE__ */ vue.createElementVNode("span", null, "巡检计划", -1);
const _hoisted_22 = { class: "inspection-total mgl-8" };
const _hoisted_23 = { class: "inspection-list" };
const _hoisted_24 = ["onClick"];
const _hoisted_25 = { class: "inspection-list-item__name" };
const _hoisted_26 = { class: "inspection-list-item__time" };
const __default__ = {
name: "DvIpesInspectionManage",
title: "巡检管理"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: {
eventList: { default: () => ({
list: [
{
value: 50,
percent: 10,
color: tools.getCssValue("--dv-color-success"),
background: tools.getCssValue("--dv-color-success")
},
{
value: 20,
percent: 20,
color: tools.getCssValue("--dv-color-warning"),
background: tools.getCssValue("--dv-color-warning")
},
{
value: 30,
percent: 20,
color: tools.getCssValue("--dv-color-danger"),
background: tools.getCssValue("--dv-color-danger")
}
]
}) },
inspectionList: { default: () => ({
list: [{
PLANNAME: "西中岛管委会电力巡检计划",
BEGINTIME: "2022-12-05 00:00",
ENDTIME: "2022-12-12 00:00"
}, {
PLANNAME: "西中岛管委会电力巡检计划",
BEGINTIME: "2022-12-05 00:00",
ENDTIME: "2022-12-12 00:00"
}]
}) }
},
emits: {
onRecordCheck: (idx, value) => value
},
setup(__props, { emit: emits }) {
const props = __props;
const eventTotal = vue.ref(0);
const activeIndex = vue.ref(-1);
vue.onMounted(() => {
getEventList();
});
const getEventList = async () => {
try {
eventTotal.value = props.eventList.list.reduce((sum, item) => {
sum = sum + item.value;
return sum;
}, 0);
} catch (e) {
console.log(e);
}
};
const handleCheck = (idx, value) => {
activeIndex.value = idx;
emits("onRecordCheck", idx, value);
};
return (_ctx, _cache) => {
const _component_el_empty = es.ElEmpty;
const _component_el_scrollbar = es.ElScrollbar;
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
_hoisted_2,
vue.createElementVNode("div", _hoisted_3, [
vue.createElementVNode("div", _hoisted_4, [
vue.createElementVNode("div", _hoisted_5, [
vue.createElementVNode("div", _hoisted_6, [
_hoisted_7,
vue.createElementVNode("span", _hoisted_8, vue.toDisplayString(eventTotal.value || 0), 1)
])
]),
vue.createElementVNode("div", _hoisted_9, [
vue.createElementVNode("div", _hoisted_10, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.eventList.list, (item, idx) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: idx }, [
vue.createElementVNode("span", {
style: vue.normalizeStyle({ color: item.color })
}, vue.toDisplayString(item.value || 0), 5),
vue.withDirectives(vue.createElementVNode("span", _hoisted_11, "/", 512), [
[vue.vShow, idx !== _ctx.eventList.list.length - 1]
])
], 64);
}), 128))
])
])
]),
vue.createElementVNode("div", _hoisted_12, [
vue.createVNode(IpesPercentBar.default, {
list: _ctx.eventList.list
}, null, 8, ["list"])
]),
vue.createElementVNode("div", _hoisted_13, [
_hoisted_14,
vue.createElementVNode("div", _hoisted_15, [
vue.createElementVNode("div", _hoisted_16, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.eventList.list, (item, idx) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: idx }, [
vue.createElementVNode("span", {
style: vue.normalizeStyle({ color: item.color })
}, vue.toDisplayString(item.percent) + "%", 5),
vue.withDirectives(vue.createElementVNode("span", _hoisted_17, "/", 512), [
[vue.vShow, idx !== _ctx.eventList.list.length - 1]
])
], 64);
}), 128))
])
])
])
]),
vue.createElementVNode("div", _hoisted_18, [
vue.createElementVNode("div", _hoisted_19, [
vue.createElementVNode("div", _hoisted_20, [
_hoisted_21,
vue.createElementVNode("span", _hoisted_22, vue.toDisplayString(_ctx.inspectionList.list.length || 0), 1)
])
]),
vue.createElementVNode("div", _hoisted_23, [
vue.createVNode(_component_el_scrollbar, { height: "264px" }, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createVNode(_component_el_empty, {
"image-size": 240,
image: vue.unref(newNodata.default),
description: ""
}, null, 8, ["image"]), [
[vue.vShow, !_ctx.inspectionList.list.length]
]),
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.inspectionList.list, (item, key) => {
return vue.openBlock(), vue.createElementBlock("div", {
key,
class: vue.normalizeClass(["inspection-list-item", { "inspection-list-item--active": key === activeIndex.value }]),
onClick: ($event) => handleCheck(key, item)
}, [
vue.createElementVNode("div", _hoisted_25, vue.toDisplayString(item.PLANNAME), 1),
vue.createElementVNode("div", _hoisted_26, vue.toDisplayString(item.BEGINTIME) + " ~ " + vue.toDisplayString(item.ENDTIME), 1)
], 10, _hoisted_24);
}), 128))
]),
_: 1
})
])
])
]);
};
}
});
exports.default = _sfc_main;