@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" />
158 lines (153 loc) • 6.68 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/empty/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 alarm = require('./images/alarm.png.js');
const newNodata = require('./images/new-nodata.svg.js');
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__ */ vue.createElementVNode("span", null, "报警统计", -1);
const _hoisted_5 = { class: "time" };
const _hoisted_6 = { class: "alarm-bar" };
const _hoisted_7 = { class: "flex" };
const _hoisted_8 = /* @__PURE__ */ vue.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__ */ vue.createElementVNode("div", { class: "module-title flex mgb12" }, [
/* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
/* @__PURE__ */ vue.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__ */ vue.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 = vue.reactive([
{ typeName: "大气环境", key: "dqhj", color: "#0EED9B" },
{ typeName: "有毒有害", key: "ydyh", color: "#FFA41E" },
{ typeName: "污染源", key: "wry", color: "#FF5D54" }
]);
const percent = vue.ref([0, 0, 0]);
const date = vue.ref(dayjs().format("YYYY-MM"));
const $formatTime = (time) => {
return dayjs(time).format("YYYY-MM-DD HH:mm");
};
vue.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 = es.ElScrollbar;
const _component_el_empty = es.ElEmpty;
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createElementVNode("div", _hoisted_2, [
vue.createElementVNode("div", _hoisted_3, [
_hoisted_4,
vue.createElementVNode("div", _hoisted_5, " （" + vue.toDisplayString(date.value) + "） ", 1)
])
]),
vue.createElementVNode("div", _hoisted_6, [
vue.createElementVNode("div", _hoisted_7, [
_hoisted_8,
vue.createElementVNode("div", _hoisted_9, vue.toDisplayString(__props.overProofAlarm.total), 1)
]),
vue.createVNode(IpesProgressBar.default, {
percent: percent.value[0],
class: "progress-bar"
}, null, 8, ["percent"]),
vue.createElementVNode("div", _hoisted_10, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(alarmOption, (item) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: item.key,
class: "legend-item flex-1"
}, [
vue.createElementVNode("div", _hoisted_11, [
vue.createElementVNode("div", {
class: "circle mgr4",
style: vue.normalizeStyle({ background: item.color })
}, null, 4),
vue.createElementVNode("div", _hoisted_12, vue.toDisplayString(item.typeName), 1)
]),
vue.createElementVNode("div", {
class: "total",
style: vue.normalizeStyle({ color: item.color })
}, vue.toDisplayString(__props.overProofAlarm[item.key]), 5)
]);
}), 128))
])
]),
_hoisted_13,
vue.createElementVNode("div", _hoisted_14, [
__props.realAlarmList.length > 0 ? (vue.openBlock(), vue.createBlock(_component_el_scrollbar, { key: 0 }, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.realAlarmList, (item, index) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: index,
class: "alarm-list-item flex flex-s"
}, [
vue.createElementVNode("img", {
class: "mgr",
src: vue.unref(alarm.default),
style: { "width": "30px", "height": "24px" }
}, null, 8, _hoisted_15),
vue.createElementVNode("div", {
class: "alarm-type single-overflow flex-1",
title: item.description
}, vue.toDisplayString(item.description), 9, _hoisted_16),
vue.createElementVNode("div", _hoisted_17, vue.toDisplayString($formatTime(item.alarmTime)), 1)
]);
}), 128))
]),
_: 1
})) : (vue.openBlock(), vue.createBlock(_component_el_empty, {
key: 1,
class: "empty",
"image-size": 180,
image: vue.unref(newNodata.default),
description: ""
}, null, 8, ["image"]))
])
]);
};
}
});
exports.default = _sfc_main;