@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" />
154 lines (151 loc) • 6.5 kB
JavaScript
import { ElScrollbar, ElEmpty } from 'element-plus/es';
import 'element-plus/es/components/base/style/css';
import 'element-plus/es/components/empty/style/css';
import 'element-plus/es/components/scrollbar/style/css';
import { defineComponent, reactive, ref, watch, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, Fragment, renderList, normalizeStyle, createBlock, withCtx, unref } from 'vue';
import dayjs from 'dayjs';
import IpesProgressBar from '../common/IpesProgressBar.vue.mjs';
import alarmPng from './images/alarm.png.mjs';
import newNoDataSvg from './images/new-nodata.svg.mjs';
const _hoisted_1 = { class: "dv-ipes-alarm-manage" };
const _hoisted_2 = { class: "module-title flex" };
const _hoisted_3 = { class: "title flex" };
const _hoisted_4 = /* @__PURE__ */ createElementVNode("span", null, "报警统计", -1);
const _hoisted_5 = { class: "time" };
const _hoisted_6 = { class: "alarm-bar" };
const _hoisted_7 = { class: "flex" };
const _hoisted_8 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, " 超标报警统计 ", -1);
const _hoisted_9 = { class: "total" };
const _hoisted_10 = { class: "legend flex" };
const _hoisted_11 = { class: "flex flex-c" };
const _hoisted_12 = { class: "typename" };
const _hoisted_13 = /* @__PURE__ */ createElementVNode("div", { class: "module-title flex mgb12" }, [
/* @__PURE__ */ createElementVNode("div", { class: "title" }, [
/* @__PURE__ */ createElementVNode("span", null, "实时报警")
])
], -1);
const _hoisted_14 = { class: "alarm-list" };
const _hoisted_15 = ["src"];
const _hoisted_16 = ["title"];
const _hoisted_17 = { class: "time" };
const __default__ = {
name: "DvIpesAlarmManage",
title: "报警管理"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: {
overProofAlarm: {
type: Object,
default: () => {
return { dqhj: 5, total: 20, ydyh: 5, wry: 10 };
}
},
realAlarmList: {
type: Array,
default: () => {
return [{ id: 6910, alarmName: "超标预警", alarmTime: 16909311e5, description: "【超标预警】模拟数据三号渠在2023-08-02 07:05:00产生中超标报警，监测因子：水位，监测值：2.237m，超标限值：(1.5,10)", alarmData: null }];
}
}
},
setup(__props) {
const props = __props;
const alarmOption = reactive([
{ typeName: "大气环境", key: "dqhj", color: "#0EED9B" },
{ typeName: "有毒有害", key: "ydyh", color: "#FFA41E" },
{ typeName: "污染源", key: "wry", color: "#FF5D54" }
]);
const percent = ref([0, 0, 0]);
const date = ref(dayjs().format("YYYY-MM"));
const $formatTime = (time) => {
return dayjs(time).format("YYYY-MM-DD HH:mm");
};
watch(props.overProofAlarm, (newValue, oldValue) => {
percent.value = [];
let prePercentTotal = 0;
alarmOption.forEach((i, index) => {
if (index < alarmOption.length - 1) {
const rate = props.overProofAlarm[i.key] / props.overProofAlarm.total * 100;
prePercentTotal += rate;
percent.value.push(rate);
} else {
percent.value.push(100 - prePercentTotal);
}
});
}, { deep: true, immediate: true });
return (_ctx, _cache) => {
const _component_el_scrollbar = ElScrollbar;
const _component_el_empty = ElEmpty;
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
_hoisted_4,
createElementVNode("div", _hoisted_5, " （" + toDisplayString(date.value) + "） ", 1)
])
]),
createElementVNode("div", _hoisted_6, [
createElementVNode("div", _hoisted_7, [
_hoisted_8,
createElementVNode("div", _hoisted_9, toDisplayString(__props.overProofAlarm.total), 1)
]),
createVNode(IpesProgressBar, {
percent: percent.value[0],
class: "progress-bar"
}, null, 8, ["percent"]),
createElementVNode("div", _hoisted_10, [
(openBlock(true), createElementBlock(Fragment, null, renderList(alarmOption, (item) => {
return openBlock(), createElementBlock("div", {
key: item.key,
class: "legend-item flex-1"
}, [
createElementVNode("div", _hoisted_11, [
createElementVNode("div", {
class: "circle mgr4",
style: normalizeStyle({ background: item.color })
}, null, 4),
createElementVNode("div", _hoisted_12, toDisplayString(item.typeName), 1)
]),
createElementVNode("div", {
class: "total",
style: normalizeStyle({ color: item.color })
}, toDisplayString(__props.overProofAlarm[item.key]), 5)
]);
}), 128))
])
]),
_hoisted_13,
createElementVNode("div", _hoisted_14, [
__props.realAlarmList.length > 0 ? (openBlock(), createBlock(_component_el_scrollbar, { key: 0 }, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.realAlarmList, (item, index) => {
return openBlock(), createElementBlock("div", {
key: index,
class: "alarm-list-item flex flex-s"
}, [
createElementVNode("img", {
class: "mgr",
src: unref(alarmPng),
style: { "width": "30px", "height": "24px" }
}, null, 8, _hoisted_15),
createElementVNode("div", {
class: "alarm-type single-overflow flex-1",
title: item.description
}, toDisplayString(item.description), 9, _hoisted_16),
createElementVNode("div", _hoisted_17, toDisplayString($formatTime(item.alarmTime)), 1)
]);
}), 128))
]),
_: 1
})) : (openBlock(), createBlock(_component_el_empty, {
key: 1,
class: "empty",
"image-size": 180,
image: unref(newNoDataSvg),
description: ""
}, null, 8, ["image"]))
])
]);
};
}
});
export { _sfc_main as default };