@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" />
200 lines (197 loc) • 8.16 kB
JavaScript
import { ElEmpty, ElScrollbar } from 'element-plus/es';
import 'element-plus/es/components/base/style/css';
import 'element-plus/es/components/scrollbar/style/css';
import 'element-plus/es/components/empty/style/css';
import { defineComponent, ref, onMounted, openBlock, createElementBlock, createElementVNode, toDisplayString, Fragment, renderList, normalizeStyle, withDirectives, vShow, createVNode, withCtx, unref, normalizeClass } from 'vue';
import IpesPercentBar from '../common/IpesPercentBar.vue.mjs';
import { getCssValue } from '../../utils/tools.mjs';
import noDataImg from './images/new-nodata.svg.mjs';
const _hoisted_1 = { class: "dv-ipes-inspection-manage" };
const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", { class: "access-row" }, [
/* @__PURE__ */ createElementVNode("div", { class: "access-header" }, [
/* @__PURE__ */ createElementVNode("div", { class: "access-header__title" }, [
/* @__PURE__ */ 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__ */ 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__ */ createElementVNode("div", { class: "left" }, [
/* @__PURE__ */ createElementVNode("div", { class: "title" }, [
/* @__PURE__ */ 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__ */ 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__ */ defineComponent({
...__default__,
props: {
eventList: { default: () => ({
list: [
{
value: 50,
percent: 10,
color: getCssValue("--dv-color-success"),
background: getCssValue("--dv-color-success")
},
{
value: 20,
percent: 20,
color: getCssValue("--dv-color-warning"),
background: getCssValue("--dv-color-warning")
},
{
value: 30,
percent: 20,
color: getCssValue("--dv-color-danger"),
background: 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 = ref(0);
const activeIndex = ref(-1);
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 = ElEmpty;
const _component_el_scrollbar = ElScrollbar;
return openBlock(), createElementBlock("div", _hoisted_1, [
_hoisted_2,
createElementVNode("div", _hoisted_3, [
createElementVNode("div", _hoisted_4, [
createElementVNode("div", _hoisted_5, [
createElementVNode("div", _hoisted_6, [
_hoisted_7,
createElementVNode("span", _hoisted_8, toDisplayString(eventTotal.value || 0), 1)
])
]),
createElementVNode("div", _hoisted_9, [
createElementVNode("div", _hoisted_10, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.eventList.list, (item, idx) => {
return openBlock(), createElementBlock(Fragment, { key: idx }, [
createElementVNode("span", {
style: normalizeStyle({ color: item.color })
}, toDisplayString(item.value || 0), 5),
withDirectives(createElementVNode("span", _hoisted_11, "/", 512), [
[vShow, idx !== _ctx.eventList.list.length - 1]
])
], 64);
}), 128))
])
])
]),
createElementVNode("div", _hoisted_12, [
createVNode(IpesPercentBar, {
list: _ctx.eventList.list
}, null, 8, ["list"])
]),
createElementVNode("div", _hoisted_13, [
_hoisted_14,
createElementVNode("div", _hoisted_15, [
createElementVNode("div", _hoisted_16, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.eventList.list, (item, idx) => {
return openBlock(), createElementBlock(Fragment, { key: idx }, [
createElementVNode("span", {
style: normalizeStyle({ color: item.color })
}, toDisplayString(item.percent) + "%", 5),
withDirectives(createElementVNode("span", _hoisted_17, "/", 512), [
[vShow, idx !== _ctx.eventList.list.length - 1]
])
], 64);
}), 128))
])
])
])
]),
createElementVNode("div", _hoisted_18, [
createElementVNode("div", _hoisted_19, [
createElementVNode("div", _hoisted_20, [
_hoisted_21,
createElementVNode("span", _hoisted_22, toDisplayString(_ctx.inspectionList.list.length || 0), 1)
])
]),
createElementVNode("div", _hoisted_23, [
createVNode(_component_el_scrollbar, { height: "264px" }, {
default: withCtx(() => [
withDirectives(createVNode(_component_el_empty, {
"image-size": 240,
image: unref(noDataImg),
description: ""
}, null, 8, ["image"]), [
[vShow, !_ctx.inspectionList.list.length]
]),
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.inspectionList.list, (item, key) => {
return openBlock(), createElementBlock("div", {
key,
class: normalizeClass(["inspection-list-item", { "inspection-list-item--active": key === activeIndex.value }]),
onClick: ($event) => handleCheck(key, item)
}, [
createElementVNode("div", _hoisted_25, toDisplayString(item.PLANNAME), 1),
createElementVNode("div", _hoisted_26, toDisplayString(item.BEGINTIME) + " ~ " + toDisplayString(item.ENDTIME), 1)
], 10, _hoisted_24);
}), 128))
]),
_: 1
})
])
])
]);
};
}
});
export { _sfc_main as default };