@ued_fpi/data-visual/dist/es/ipes/src/PerformanceWarrantyResponsibilities/index.vue.mjs

<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" />

import { defineComponent, ref, onMounted, openBlock, createElementBlock, createElementVNode, unref, toDisplayString } from 'vue';
import requestControl from '../../service/request.mjs';
import { useThemeHook } from '../../../utils.mjs';
import { setIntervalData } from '../../utils/hooks.mjs';
import drakImg from './images/performance.png.mjs';
import lightImg from './images/performance-light.png.mjs';

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__ */ createElementVNode("div", { class: "title" }, " 今日新增履职 ", -1);
const _hoisted_6 = { class: "num mgt8" };
const _hoisted_7 = { class: "count mgr6" };
const _hoisted_8 = /* @__PURE__ */ createElementVNode("span", { class: "unit" }, "次", -1);
const _hoisted_9 = { class: "pieBox" };
const _hoisted_10 = /* @__PURE__ */ createElementVNode("div", {
  id: "majorPieChart",
  class: "pie"
}, null, -1);
const _hoisted_11 = { class: "right-responsibilities-box" };
const _hoisted_12 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, " 年度履职率 ", -1);
const _hoisted_13 = { class: "num mgt8" };
const _hoisted_14 = { class: "count rate mgr6" };
const _hoisted_15 = /* @__PURE__ */ createElementVNode("span", { class: "unit" }, "%", -1);
const __default__ = {
  name: "DvIpesPerformanceWarrantyResponsibilities",
  title: "包保责任履职"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  setup(__props) {
    const { isDark } = useThemeHook();
    const basicInfoData = ref({
      dayGuaranteeCount: 0,
      yearAllGuaranteeCount: 0,
      yearCompletedGuaranteeCount: 0,
      performanceRate: "0"
    });
    async function getBasicInfoData() {
      try {
        const { data } = await requestControl({
          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);
      }
    }
    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
          }
        ]
      });
    }
    onMounted(async () => {
      getBasicInfoData();
    });
    setIntervalData(getBasicInfoData, 5 * 60 * 1e3);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode("div", _hoisted_2, [
          createElementVNode("img", {
            class: "icon mgr4",
            src: unref(isDark) ? unref(drakImg) : unref(lightImg)
          }, null, 8, _hoisted_3),
          createElementVNode("div", _hoisted_4, [
            _hoisted_5,
            createElementVNode("div", _hoisted_6, [
              createElementVNode("span", _hoisted_7, toDisplayString(basicInfoData.value.dayGuaranteeCount), 1),
              _hoisted_8
            ])
          ])
        ]),
        createElementVNode("div", _hoisted_9, [
          _hoisted_10,
          createElementVNode("div", _hoisted_11, [
            _hoisted_12,
            createElementVNode("div", _hoisted_13, [
              createElementVNode("span", _hoisted_14, toDisplayString(basicInfoData.value.performanceRate), 1),
              _hoisted_15
            ])
          ])
        ])
      ]);
    };
  }
});

export { _sfc_main as default };