@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 (201 loc) • 7.2 kB
JavaScript
import { defineComponent, ref, onMounted, openBlock, createElementBlock, withDirectives, createElementVNode, Fragment, renderList, normalizeStyle, toDisplayString, vShow, createVNode } from 'vue';
import requestControl from '../../service/request.mjs';
import { useThemeHook } from '../../../utils.mjs';
import '../../utils/highchartsPiePlugins.mjs';
import _sfc_main$1 from '../common/NoData.vue.mjs';
import '../common/NoData.vue2.mjs';
import { setIntervalData } from '../../utils/hooks.mjs';
const _hoisted_1 = { class: "dv-ipes-event-statistics" };
const _hoisted_2 = { class: "chart-box" };
const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", { style: { "flex": "1" } }, [
/* @__PURE__ */ 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__ */ 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__ */ defineComponent({
...__default__,
setup(__props) {
const { isDark } = 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 = ref([
{ name: "安全", count: 0 },
{ name: "封闭化", count: 0 },
{ name: "运营", count: 0 },
{ name: "其他", count: 0 }
]);
const yearTotal = ref(0);
const levelData = ref([
{
name: "高级",
count: 0
},
{
name: "中级",
count: 0
},
{
name: "低级",
count: 0
},
{
name: "其他",
count: 0
}
]);
async function getEventData() {
try {
const res = await requestControl({
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"
});
}
onMounted(() => {
getEventData();
});
setIntervalData(getEventData, 5 * 60 * 1e3);
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
withDirectives(createElementVNode("div", _hoisted_2, [
_hoisted_3,
createElementVNode("div", _hoisted_4, [
(openBlock(true), createElementBlock(Fragment, null, renderList(eventType.value, (event, idx) => {
return openBlock(), createElementBlock("div", {
key: event.key,
class: "legend-item"
}, [
createElementVNode("div", {
class: "dot",
style: normalizeStyle({ background: colors[idx] })
}, null, 4),
createElementVNode("div", null, toDisplayString(event.name), 1),
createElementVNode("div", _hoisted_5, toDisplayString(event.count), 1)
]);
}), 128))
])
], 512), [
[vShow, eventType.value.length]
]),
withDirectives(createVNode(_sfc_main$1, { class: "eventType-nodata" }, null, 512), [
[vShow, !eventType.value.length]
]),
createElementVNode("div", _hoisted_6, [
_hoisted_7,
createElementVNode("div", _hoisted_8, toDisplayString(yearTotal.value), 1)
]),
createElementVNode("div", _hoisted_9, [
(openBlock(true), createElementBlock(Fragment, null, renderList(levelData.value, (item, index) => {
return openBlock(), createElementBlock("div", {
key: index,
class: "item"
}, [
createElementVNode("div", _hoisted_10, toDisplayString(item.name), 1),
createElementVNode("div", _hoisted_11, toDisplayString(item.count), 1)
]);
}), 128))
])
]);
};
}
});
export { _sfc_main as default };