@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) • 5.37 kB
JavaScript
import { defineComponent, ref, onMounted, nextTick, openBlock, createElementBlock, createElementVNode, toDisplayString, Fragment, renderList, normalizeStyle } from 'vue';
import requestControl from '../../service/request.mjs';
const _hoisted_1 = { class: "dv-ipes-risk-emergency-manage" };
const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", { class: "module-title" }, [
/* @__PURE__ */ createElementVNode("div", { class: "title" }, [
/* @__PURE__ */ createElementVNode("span", null, "企业环境风险分级")
])
], -1);
const _hoisted_3 = { class: "risk_body" };
const _hoisted_4 = { class: "pie-card" };
const _hoisted_5 = /* @__PURE__ */ createElementVNode("div", { class: "top" }, null, -1);
const _hoisted_6 = /* @__PURE__ */ createElementVNode("div", { class: "bottom" }, null, -1);
const _hoisted_7 = { class: "label" };
const _hoisted_8 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, " 企业总数 ", -1);
const _hoisted_9 = { class: "total mgt8" };
const _hoisted_10 = { class: "legend" };
const _hoisted_11 = { class: "typename" };
const _hoisted_12 = { class: "value" };
const _hoisted_13 = { class: "footer" };
const _hoisted_14 = /* @__PURE__ */ createElementVNode("span", { class: "mgr16" }, "环境风险单元总数", -1);
const _hoisted_15 = { class: "total" };
const _hoisted_16 = /* @__PURE__ */ createElementVNode("span", { class: "unit" }, "个", -1);
const __default__ = {
name: "DvIpesEnvironmentalProtection",
title: "环境风险应急管理"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
emits: ["openPopup"],
setup(__props, { emit }) {
const colors = ["var(--dv-color-danger)", "var(--dv-color-warning)", "var(--dv-color-index)", "var(--dv-color-success)"];
const totalCount = ref(0);
const companyTotal = ref(0);
const legendData = ref([]);
const pieChart = ref();
function drawChart(data) {
const Highcharts = window.Highcharts;
Highcharts && Highcharts.chart(pieChart.value, {
chart: {
type: "pie",
margin: 0,
backgroundColor: "transparent",
options3d: {
enabled: true,
alpha: 68,
beta: 0
}
},
credits: { enabled: false },
title: {
text: null
},
colors,
tooltip: {
enabled: false
},
plotOptions: {
pie: {
center: ["50%", "60%"],
animation: false,
enableMouseTracking: false,
cursor: "pointer",
depth: 15,
innerSize: "80%",
size: "135%",
dataLabels: {
enabled: false
}
}
},
series: [
{
type: "pie",
name: "企业总数",
data
}
],
legend: {
enabled: false
}
});
}
const fetchData = async () => {
try {
const result = await requestControl({
method: "get",
url: "/bmp-company-manager-server/api/v1/company/management/statistics/envRiskLevel"
});
const { totalRiskUnitCount, ...companyData } = result;
const list = Object.values(companyData).reverse();
let totla = 0;
const seriesData = [];
list.forEach((item) => {
totla += item.count;
seriesData.push([item.name, item.count]);
});
legendData.value = list;
companyTotal.value = totla;
totalCount.value = totalRiskUnitCount;
drawChart(seriesData);
} catch (error) {
console.log(error);
}
};
onMounted(async () => {
await nextTick();
fetchData();
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
_hoisted_2,
createElementVNode("div", _hoisted_3, [
createElementVNode("div", _hoisted_4, [
createElementVNode("div", {
ref_key: "pieChart",
ref: pieChart,
class: "pie"
}, null, 512),
_hoisted_5,
_hoisted_6,
createElementVNode("div", _hoisted_7, [
_hoisted_8,
createElementVNode("div", _hoisted_9, toDisplayString(companyTotal.value), 1)
])
]),
createElementVNode("div", _hoisted_10, [
(openBlock(true), createElementBlock(Fragment, null, renderList(legendData.value, (item, index) => {
return openBlock(), createElementBlock("div", {
key: index,
class: "legend-item"
}, [
createElementVNode("div", {
class: "circle",
style: normalizeStyle({ background: colors[index] })
}, null, 4),
createElementVNode("div", _hoisted_11, toDisplayString(item.name), 1),
createElementVNode("div", _hoisted_12, toDisplayString(item.count || 0), 1)
]);
}), 128))
])
]),
createElementVNode("div", _hoisted_13, [
_hoisted_14,
createElementVNode("div", _hoisted_15, toDisplayString(totalCount.value), 1),
_hoisted_16
])
]);
};
}
});
export { _sfc_main as default };