@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" />
208 lines (203 loc) • 7.39 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const vue = require('vue');
const request = require('../../service/request.js');
const utils = require('../../../utils.js');
require('../../utils/highchartsPiePlugins.js');
const NoData_vue_vue_type_script_setup_true_lang = require('../common/NoData.vue.js');
require('../common/NoData.vue2.js');
const hooks = require('../../utils/hooks.js');
const _hoisted_1 = { class: "dv-ipes-event-statistics" };
const _hoisted_2 = { class: "chart-box" };
const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("div", { style: { "flex": "1" } }, [
/* @__PURE__ */ vue.createElementVNode("div", {
id: "pieEventChart",
class: "pie-chart"
})
], -1);
const _hoisted_4 = { class: "legend" };
const _hoisted_5 = { class: "num" };
const _hoisted_6 = { class: "summary" };
const _hoisted_7 = /* @__PURE__ */ vue.createElementVNode("span", null, "年度事件统计", -1);
const _hoisted_8 = { class: "num" };
const _hoisted_9 = { class: "list" };
const _hoisted_10 = { class: "name" };
const _hoisted_11 = { class: "value" };
const __default__ = {
name: "DvIpesAnnualEventStatistics",
title: "年度事件统计"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
setup(__props) {
const { isDark } = utils.useThemeHook();
const colors = ["var(--dv-color-danger)", "var(--dv-color-success)", "var(--dv-color-warning)", "var(--dv-color-index)"];
const LinearGradientColor = [["#FF4A4A", "#FF7474"], ["#15F3A3", "#11D68F"], ["#FDBD00", "#F4A93B"], ["#59AEDE", "#338EC1"]];
const LinearGradientColor_light = [["#FF4A4A", "#FF7474"], ["#15F3A3", "#11D68F"], ["#FDBD00", "#F4A93B"], ["#1677FF", "#85B8FF"]];
const eventType = vue.ref([
{ name: "安全", count: 0 },
{ name: "封闭化", count: 0 },
{ name: "运营", count: 0 },
{ name: "其他", count: 0 }
]);
const yearTotal = vue.ref(0);
const levelData = vue.ref([
{
name: "高级",
count: 0
},
{
name: "中级",
count: 0
},
{
name: "低级",
count: 0
},
{
name: "其他",
count: 0
}
]);
async function getEventData() {
try {
const res = await request.default({
url: "/ipes-data-aggregation-server/api/v2/coordinated/year-event-stat",
method: "get"
});
const { businessStat, levelStat } = res.data;
console.log(res.data);
yearTotal.value = levelStat?.total || 0;
levelData.value = levelStat?.gwLevels || [];
eventType.value = businessStat?.gwLevels || [];
const eventTotal = businessStat.total || 0;
const seriesData = handleSeriesData(businessStat?.gwLevels || [], eventTotal);
drawChart(seriesData);
} catch (error) {
console.log(error);
}
}
function handleSeriesData(data, total) {
const seriesData = data.map((item) => {
const value = +item.count || 0;
const h = total === 0 ? 0 : value / total * 20;
return { name: item.name, y: value, h };
});
return seriesData;
}
function drawChart(seriesData) {
const highcharts = window.Highcharts;
function loadFunction() {
const each = highcharts.each;
const points = this.series[0].points;
each(points, (p) => {
p.graphic.attr({
translateY: -p.shapeArgs.ran
});
p.graphic.side1.attr({
translateY: -p.shapeArgs.ran
});
p.graphic.side2.attr({
translateY: -p.shapeArgs.ran
});
});
}
const color = isDark ? LinearGradientColor : LinearGradientColor_light;
highcharts.chart("pieEventChart", {
chart: {
type: "pie",
animation: false,
backgroundColor: "transparent",
// 不显示背景色
events: {
load: loadFunction
},
options3d: {
enabled: true,
alpha: 50,
beta: 0,
depth: 25
}
},
credits: { enabled: false },
title: {
text: null
},
colors: [
{ linearGradient: { x1: 0, y1: 1, x2: 1, y2: 0 }, stops: [[0, color[0][0]], [1, color[0][1]]] },
{ linearGradient: { x1: 0, y1: 1, x2: 1, y2: 0 }, stops: [[0, color[1][0]], [1, color[1][1]]] },
{ linearGradient: { x1: 0, y1: 1, x2: 1, y2: 0 }, stops: [[0, color[2][0]], [1, color[2][1]]] },
{ linearGradient: { x1: 0, y1: 1, x2: 1, y2: 0 }, stops: [[0, color[3][0]], [1, color[3][1]]] }
],
tooltip: { enabled: false },
plotOptions: {
pie: {
// animation: false,
enableMouseTracking: false,
allowPointSelect: true,
cursor: "pointer",
innerSize: "50%",
size: 100,
depth: 25,
dataLabels: {
enabled: false
}
}
},
series: [{
type: "pie",
name: "",
data: seriesData
}],
pieType: "2"
});
}
vue.onMounted(() => {
getEventData();
});
hooks.setIntervalData(getEventData, 5 * 60 * 1e3);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.withDirectives(vue.createElementVNode("div", _hoisted_2, [
_hoisted_3,
vue.createElementVNode("div", _hoisted_4, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(eventType.value, (event, idx) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: event.key,
class: "legend-item"
}, [
vue.createElementVNode("div", {
class: "dot",
style: vue.normalizeStyle({ background: colors[idx] })
}, null, 4),
vue.createElementVNode("div", null, vue.toDisplayString(event.name), 1),
vue.createElementVNode("div", _hoisted_5, vue.toDisplayString(event.count), 1)
]);
}), 128))
])
], 512), [
[vue.vShow, eventType.value.length]
]),
vue.withDirectives(vue.createVNode(NoData_vue_vue_type_script_setup_true_lang.default, { class: "eventType-nodata" }, null, 512), [
[vue.vShow, !eventType.value.length]
]),
vue.createElementVNode("div", _hoisted_6, [
_hoisted_7,
vue.createElementVNode("div", _hoisted_8, vue.toDisplayString(yearTotal.value), 1)
]),
vue.createElementVNode("div", _hoisted_9, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(levelData.value, (item, index) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: index,
class: "item"
}, [
vue.createElementVNode("div", _hoisted_10, vue.toDisplayString(item.name), 1),
vue.createElementVNode("div", _hoisted_11, vue.toDisplayString(item.count), 1)
]);
}), 128))
])
]);
};
}
});
exports.default = _sfc_main;