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

const _hoisted_1 = { class: "dv-ipes-personnel-location" };
const _hoisted_2 = { class: "risk_body" };
const _hoisted_3 = { class: "pie-card" };
const _hoisted_4 = /* @__PURE__ */ createElementVNode("div", { class: "top" }, null, -1);
const _hoisted_5 = /* @__PURE__ */ createElementVNode("div", { class: "bottom" }, null, -1);
const _hoisted_6 = { class: "label" };
const _hoisted_7 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, " 在线人员数量 ", -1);
const _hoisted_8 = { class: "total mgt8" };
const _hoisted_9 = { class: "legend" };
const _hoisted_10 = { class: "typename" };
const _hoisted_11 = { class: "value" };
const __default__ = {
  name: "DvIpesPersonnelLocation",
  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 legendData = ref([
      // {
      //     name: '管委会',
      //     key: 'managePeopleNum',
      //     count: 0
      // },
      // {
      //     name: '企业',
      //     key: 'companyPeopleNum',
      //     count: 0
      // },
      // {
      //     name: '第三方',
      //     key: 'thirdPeopleNum',
      //     count: 0
      // },
      // {
      //     name: '访客',
      //     key: 'visitorNum',
      //     count: 0
      // }
    ]);
    const personnelChart = ref();
    function drawChart(data) {
      const Highcharts = window.Highcharts;
      Highcharts && Highcharts.chart(personnelChart.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 { data } = await requestControl({
          method: "get",
          url: "/ipes-pcip-server/api/v2/gis/stat-people-online"
        });
        const seriesData = [];
        const dataList = data?.dataList || [
          // {
          //     num: 200,
          //     name: '管委会'
          // },
          // {
          //     num: 100,
          //     name: '1管委会2'
          // }
        ];
        dataList.forEach((item) => {
          seriesData.push([item.name, item.num || 0]);
        });
        legendData.value = dataList;
        totalCount.value = data?.total || 0;
        drawChart(seriesData);
      } catch (error) {
        console.log(error);
      }
    };
    onMounted(async () => {
      await nextTick();
      fetchData();
    });
    setIntervalData(fetchData);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode("div", _hoisted_2, [
          createElementVNode("div", _hoisted_3, [
            createElementVNode("div", {
              ref_key: "personnelChart",
              ref: personnelChart,
              class: "pie"
            }, null, 512),
            _hoisted_4,
            _hoisted_5,
            createElementVNode("div", _hoisted_6, [
              _hoisted_7,
              createElementVNode("div", _hoisted_8, toDisplayString(totalCount.value), 1)
            ])
          ]),
          createElementVNode("div", _hoisted_9, [
            (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_10, toDisplayString(item.name), 1),
                createElementVNode("div", _hoisted_11, toDisplayString(item.num || 0), 1)
              ]);
            }), 128))
          ])
        ])
      ]);
    };
  }
});

export { _sfc_main as default };