@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" />
151 lines (146 loc) • 5.26 kB
JavaScript
'use strict';
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');
const hooks = require('../../utils/hooks.js');
const performance = require('./images/performance.png.js');
const performanceLight = require('./images/performance-light.png.js');
const _hoisted_1 = { class: "dv-ipes-performance-warranty-responsibilities" };
const _hoisted_2 = { class: "baseBox" };
const _hoisted_3 = ["src"];
const _hoisted_4 = { class: "left-responsibilities-box" };
const _hoisted_5 = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, " 今日新增履职 ", -1);
const _hoisted_6 = { class: "num mgt8" };
const _hoisted_7 = { class: "count mgr6" };
const _hoisted_8 = /* @__PURE__ */ vue.createElementVNode("span", { class: "unit" }, "次", -1);
const _hoisted_9 = { class: "pieBox" };
const _hoisted_10 = /* @__PURE__ */ vue.createElementVNode("div", {
id: "majorPieChart",
class: "pie"
}, null, -1);
const _hoisted_11 = { class: "right-responsibilities-box" };
const _hoisted_12 = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, " 年度履职率 ", -1);
const _hoisted_13 = { class: "num mgt8" };
const _hoisted_14 = { class: "count rate mgr6" };
const _hoisted_15 = /* @__PURE__ */ vue.createElementVNode("span", { class: "unit" }, "%", -1);
const __default__ = {
name: "DvIpesPerformanceWarrantyResponsibilities",
title: "包保责任履职"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
setup(__props) {
const { isDark } = utils.useThemeHook();
const basicInfoData = vue.ref({
dayGuaranteeCount: 0,
yearAllGuaranteeCount: 0,
yearCompletedGuaranteeCount: 0,
performanceRate: "0"
});
async function getBasicInfoData() {
try {
const { data } = await request.default({
method: "get",
url: "/ipes-srip-server/api/v3/gis/panel/guarantee/statistics"
});
const { dayGuaranteeCount, yearAllGuaranteeCount, yearCompletedGuaranteeCount } = data;
let performanceRate = "";
if (yearCompletedGuaranteeCount && yearAllGuaranteeCount)
performanceRate = (yearCompletedGuaranteeCount / yearAllGuaranteeCount * 100).toFixed(1);
basicInfoData.value = {
dayGuaranteeCount,
yearAllGuaranteeCount,
yearCompletedGuaranteeCount,
performanceRate
};
drawChart(basicInfoData.value);
} catch (error) {
console.log(error);
}
}
vue.ref(4);
function drawChart(data) {
const legendData = [
{ name: "已完成", y: data.yearCompletedGuaranteeCount || 0 },
{ name: "总数", y: data.yearAllGuaranteeCount || 0 }
];
const seriesData = legendData;
const highcharts = window.Highcharts;
highcharts.chart("majorPieChart", {
chart: {
type: "pie",
animation: false,
// marginTop: 20,
backgroundColor: "transparent",
// 不显示背景色
options3d: {
enabled: true,
alpha: 50,
beta: 0,
depth: 8
}
},
credits: { enabled: false },
title: {
text: null
},
colors: ["#15F3A3", "#8FAFC7", "#fdbd00"],
tooltip: { enabled: false },
plotOptions: {
pie: {
center: ["50%", "50%"],
allowPointSelect: true,
inactiveOtherPoints: false,
cursor: "pointer",
depth: 10,
innerSize: "0%",
size: "40",
dataLabels: {
enabled: false
}
}
},
series: [
{
type: "pie",
name: "年度履职率",
data: seriesData
}
]
});
}
vue.onMounted(async () => {
getBasicInfoData();
});
hooks.setIntervalData(getBasicInfoData, 5 * 60 * 1e3);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createElementVNode("div", _hoisted_2, [
vue.createElementVNode("img", {
class: "icon mgr4",
src: vue.unref(isDark) ? vue.unref(performance.default) : vue.unref(performanceLight.default)
}, null, 8, _hoisted_3),
vue.createElementVNode("div", _hoisted_4, [
_hoisted_5,
vue.createElementVNode("div", _hoisted_6, [
vue.createElementVNode("span", _hoisted_7, vue.toDisplayString(basicInfoData.value.dayGuaranteeCount), 1),
_hoisted_8
])
])
]),
vue.createElementVNode("div", _hoisted_9, [
_hoisted_10,
vue.createElementVNode("div", _hoisted_11, [
_hoisted_12,
vue.createElementVNode("div", _hoisted_13, [
vue.createElementVNode("span", _hoisted_14, vue.toDisplayString(basicInfoData.value.performanceRate), 1),
_hoisted_15
])
])
])
]);
};
}
});
exports.default = _sfc_main;