@ued_fpi/data-visual/dist/lib/ipes/src/PersonnelLocation/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 hooks = require('../../utils/hooks.js');

const _hoisted_1 = { class: "dv-ipes-personnel-location" };
const _hoisted_2 = { class: "risk_body" };
const _hoisted_3 = { class: "pie-card" };
const _hoisted_4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "top" }, null, -1);
const _hoisted_5 = /* @__PURE__ */ vue.createElementVNode("div", { class: "bottom" }, null, -1);
const _hoisted_6 = { class: "label" };
const _hoisted_7 = /* @__PURE__ */ vue.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__ */ vue.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 = vue.ref(0);
    const legendData = vue.ref([
      // {
      //     name: '管委会',
      //     key: 'managePeopleNum',
      //     count: 0
      // },
      // {
      //     name: '企业',
      //     key: 'companyPeopleNum',
      //     count: 0
      // },
      // {
      //     name: '第三方',
      //     key: 'thirdPeopleNum',
      //     count: 0
      // },
      // {
      //     name: '访客',
      //     key: 'visitorNum',
      //     count: 0
      // }
    ]);
    const personnelChart = vue.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 request.default({
          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);
      }
    };
    vue.onMounted(async () => {
      await vue.nextTick();
      fetchData();
    });
    hooks.setIntervalData(fetchData);
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createElementVNode("div", _hoisted_2, [
          vue.createElementVNode("div", _hoisted_3, [
            vue.createElementVNode("div", {
              ref_key: "personnelChart",
              ref: personnelChart,
              class: "pie"
            }, null, 512),
            _hoisted_4,
            _hoisted_5,
            vue.createElementVNode("div", _hoisted_6, [
              _hoisted_7,
              vue.createElementVNode("div", _hoisted_8, vue.toDisplayString(totalCount.value), 1)
            ])
          ]),
          vue.createElementVNode("div", _hoisted_9, [
            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(legendData.value, (item, index) => {
              return vue.openBlock(), vue.createElementBlock("div", {
                key: index,
                class: "legend-item"
              }, [
                vue.createElementVNode("div", {
                  class: "circle",
                  style: vue.normalizeStyle({ background: colors[index] })
                }, null, 4),
                vue.createElementVNode("div", _hoisted_10, vue.toDisplayString(item.name), 1),
                vue.createElementVNode("div", _hoisted_11, vue.toDisplayString(item.num || 0), 1)
              ]);
            }), 128))
          ])
        ])
      ]);
    };
  }
});

exports.default = _sfc_main;