@ued_fpi/data-visual/dist/lib/ipes/src/RiskClassification/index.vue.js

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

'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');
require('../../utils/highchartsPiePlugins.js');
const hooks = require('../../utils/hooks.js');

const _hoisted_1 = { class: "dv-ipes-risk-classification" };
const _hoisted_2 = { class: "chart-box" };
const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("div", { class: "topChartBox" }, [
  /* @__PURE__ */ vue.createElementVNode("div", { style: { "padding-left": "8px" } }, " 企业风险分级 "),
  /* @__PURE__ */ vue.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__ */ vue.createElementVNode("span", null, "风险分析完成率", -1);
const _hoisted_8 = { class: "num" };
const _hoisted_9 = /* @__PURE__ */ vue.createElementVNode("div", { class: "unit" }, " % ", -1);
const __default__ = {
  name: "DvIpesRiskClassification",
  title: "风险分级"
};
const _sfc_main = /* @__PURE__ */ vue.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 } = utils.useThemeHook();
    const colors = ["#F84439", "#FD7A00", "#FDBD00", "#00DEFF"];
    const colors_light = ["#F84439", "#FD7A00", "#FDBD00", "#00DEFF"];
    const riskLevel = vue.computed(() => props.riskLevelList);
    const levelData = vue.ref({
      majorRiskCompany: 0,
      largerRiskCompany: 0,
      generalRiskCompany: 0,
      lowRiskCompany: 0
    });
    const riskRate = vue.ref(0);
    async function getRiskLevelData() {
      try {
        const { data } = await request.default({
          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 request.default({
          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"
      });
    }
    vue.onMounted(() => {
      getRiskLevelData();
      getRiskRate();
    });
    hooks.setIntervalData(() => {
      getRiskLevelData();
      getRiskRate();
    }, 5 * 60 * 1e3);
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createElementVNode("div", _hoisted_2, [
          _hoisted_3,
          vue.createElementVNode("div", _hoisted_4, [
            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(riskLevel), (level, idx) => {
              return vue.openBlock(), vue.createElementBlock("div", {
                key: level.key,
                class: "legend-item"
              }, [
                vue.createElementVNode("div", {
                  class: "dot",
                  style: vue.normalizeStyle({ background: vue.unref(isDark) ? colors[idx] : colors_light[idx] })
                }, null, 4),
                vue.createElementVNode("div", null, vue.toDisplayString(level.title), 1),
                vue.createElementVNode("div", _hoisted_5, vue.toDisplayString(levelData.value[level.key]), 1)
              ]);
            }), 128))
          ])
        ]),
        vue.createElementVNode("div", _hoisted_6, [
          _hoisted_7,
          vue.createElementVNode("div", _hoisted_8, vue.toDisplayString(riskRate.value), 1),
          _hoisted_9
        ])
      ]);
    };
  }
});

exports.default = _sfc_main;