@ued_fpi/data-visual/dist/es/ipes/src/RiskClassification/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, computed, ref, onMounted, openBlock, createElementBlock, createElementVNode, Fragment, renderList, unref, normalizeStyle, toDisplayString } from 'vue';
import requestControl from '../../service/request.mjs';
import { useThemeHook } from '../../../utils.mjs';
import '../../utils/highchartsPiePlugins.mjs';
import { setIntervalData } from '../../utils/hooks.mjs';

const _hoisted_1 = { class: "dv-ipes-risk-classification" };
const _hoisted_2 = { class: "chart-box" };
const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", { class: "topChartBox" }, [
  /* @__PURE__ */ createElementVNode("div", { style: { "padding-left": "8px" } }, " 企业风险分级 "),
  /* @__PURE__ */ createElementVNode("div", {
    id: "pieChart",
    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 = /* @__PURE__ */ createElementVNode("div", { class: "unit" }, " % ", -1);
const __default__ = {
  name: "DvIpesRiskClassification",
  title: "风险分级"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    riskLevelList: {
      type: Array,
      default() {
        return [
          { title: "重大风险", key: "majorRiskCompany" },
          { title: "较大风险", key: "largerRiskCompany" },
          { title: "一般风险", key: "generalRiskCompany" },
          { title: "低风险", key: "lowRiskCompany" }
        ];
      }
    }
  },
  setup(__props) {
    const props = __props;
    const { isDark } = useThemeHook();
    const colors = ["#F84439", "#FD7A00", "#FDBD00", "#00DEFF"];
    const colors_light = ["#F84439", "#FD7A00", "#FDBD00", "#00DEFF"];
    const riskLevel = computed(() => props.riskLevelList);
    const levelData = ref({
      majorRiskCompany: 0,
      largerRiskCompany: 0,
      generalRiskCompany: 0,
      lowRiskCompany: 0
    });
    const riskRate = ref(0);
    async function getRiskLevelData() {
      try {
        const { data } = await requestControl({
          url: "/bmp-company-manager-server/api/v3/park/client/company/risk",
          method: "get"
        });
        levelData.value = data;
        const seriesData = handleSeriesData(data);
        drawChart(seriesData);
      } catch (error) {
        console.log(error);
      }
    }
    function handleSeriesData(data) {
      const total = Object.values(data).reduce((pre, cur) => {
        pre += cur || 0;
        return pre;
      }, 0);
      const seriesData = riskLevel.value.map((item) => {
        const value = data[item.key] || 0;
        const h = value / total * 20;
        return { name: item.title, y: value, h };
      });
      return seriesData;
    }
    async function getRiskRate() {
      try {
        const { data } = await requestControl({
          url: "/ipes-srip-server/api/v3/gis/panel/risk/analyse",
          method: "get"
        });
        const rate = data && data.shouldAnalyzeCount && data.analyzedCount ? data.analyzedCount / data.shouldAnalyzeCount * 100 : 0;
        riskRate.value = Number(rate.toFixed(1));
      } catch (error) {
        console.log(error);
      }
    }
    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 ? colors : colors_light;
      highcharts.chart("pieChart", {
        chart: {
          type: "pie",
          marginTop: 20,
          animation: false,
          backgroundColor: "transparent",
          // 不显示背景色
          events: {
            load: loadFunction
          },
          options3d: {
            enabled: true,
            alpha: 50,
            beta: 0,
            depth: 25
          }
        },
        credits: { enabled: false },
        title: {
          text: null
        },
        colors: color,
        tooltip: { enabled: false },
        plotOptions: {
          pie: {
            // animation: false,
            enableMouseTracking: false,
            allowPointSelect: true,
            cursor: "pointer",
            innerSize: "50%",
            size: 90,
            depth: 25,
            dataLabels: {
              enabled: false
            }
          }
        },
        series: [{
          type: "pie",
          name: "",
          data: seriesData
        }],
        pieType: "2"
      });
    }
    onMounted(() => {
      getRiskLevelData();
      getRiskRate();
    });
    setIntervalData(() => {
      getRiskLevelData();
      getRiskRate();
    }, 5 * 60 * 1e3);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode("div", _hoisted_2, [
          _hoisted_3,
          createElementVNode("div", _hoisted_4, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(riskLevel), (level, idx) => {
              return openBlock(), createElementBlock("div", {
                key: level.key,
                class: "legend-item"
              }, [
                createElementVNode("div", {
                  class: "dot",
                  style: normalizeStyle({ background: unref(isDark) ? colors[idx] : colors_light[idx] })
                }, null, 4),
                createElementVNode("div", null, toDisplayString(level.title), 1),
                createElementVNode("div", _hoisted_5, toDisplayString(levelData.value[level.key]), 1)
              ]);
            }), 128))
          ])
        ]),
        createElementVNode("div", _hoisted_6, [
          _hoisted_7,
          createElementVNode("div", _hoisted_8, toDisplayString(riskRate.value), 1),
          _hoisted_9
        ])
      ]);
    };
  }
});

export { _sfc_main as default };