@ued_fpi/data-visual/dist/es/ipes/src/GroundwaterMonitor/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, Fragment, withDirectives, createElementVNode, toDisplayString, renderList, normalizeStyle, vShow, createVNode } from 'vue';
import requestControl from '../../service/request.mjs';
import _sfc_main$1 from '../common/NoData.vue.mjs';
import '../common/NoData.vue2.mjs';
import { setIntervalData } from '../../utils/hooks.mjs';

const _hoisted_1 = { class: "dv-ipes-ground-water-monitor" };
const _hoisted_2 = { class: "pie-card" };
const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", { class: "top" }, null, -1);
const _hoisted_4 = /* @__PURE__ */ createElementVNode("div", { class: "bottom" }, null, -1);
const _hoisted_5 = { class: "label" };
const _hoisted_6 = { class: "title" };
const _hoisted_7 = { class: "total mgt8" };
const _hoisted_8 = { class: "legend" };
const _hoisted_9 = { class: "typename" };
const _hoisted_10 = { class: "value" };
const __default__ = {
  name: "DvIpesGroundwaterMonitor",
  title: "地下水监控"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  emits: ["openPopup"],
  setup(__props, { emit }) {
    const colors = ref([]);
    const waterTotal = ref(0);
    const legendData = ref([]);
    const waterName = ref("地下水监控");
    const groundwaterChart = ref();
    function drawChart(data) {
      const Highcharts = window.Highcharts;
      Highcharts && Highcharts.chart(groundwaterChart.value, {
        chart: {
          type: "pie",
          margin: 0,
          backgroundColor: "transparent",
          options3d: {
            enabled: true,
            alpha: 68,
            beta: 0
          }
        },
        credits: { enabled: false },
        title: {
          text: null
        },
        colors: colors.value,
        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 result = await requestControl({
          method: "get",
          url: "/ipes-data-aggregation-server/api/v2/gis/env/gw-level-stat"
        });
        const { name, total } = result.data;
        let { gwLevels } = result.data;
        const seriesData = [];
        const colorList = [];
        gwLevels = gwLevels.filter((item) => {
          return item.count !== 0;
        });
        gwLevels.forEach((item) => {
          seriesData.push([item.name, item.count]);
          colorList.push(item.color);
        });
        colors.value = colorList;
        legendData.value = gwLevels;
        waterTotal.value = total;
        waterName.value = name;
        drawChart(seriesData);
      } catch (error) {
        console.log(error);
      }
    };
    onMounted(async () => {
      await nextTick();
      fetchData();
    });
    setIntervalData(fetchData, 5 * 60 * 1e3);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(Fragment, null, [
        withDirectives(createElementVNode("div", _hoisted_1, [
          createElementVNode("div", _hoisted_2, [
            createElementVNode("div", {
              ref_key: "groundwaterChart",
              ref: groundwaterChart,
              class: "pie"
            }, null, 512),
            _hoisted_3,
            _hoisted_4,
            createElementVNode("div", _hoisted_5, [
              createElementVNode("div", _hoisted_6, toDisplayString(waterName.value), 1),
              createElementVNode("div", _hoisted_7, toDisplayString(waterTotal.value), 1)
            ])
          ]),
          createElementVNode("div", _hoisted_8, [
            (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: item.color || colors.value[index] })
                }, null, 4),
                createElementVNode("div", _hoisted_9, toDisplayString(item.name), 1),
                createElementVNode("div", _hoisted_10, toDisplayString(item.count || 0), 1)
              ]);
            }), 128))
          ])
        ], 512), [
          [vShow, waterTotal.value]
        ]),
        withDirectives(createVNode(_sfc_main$1, { class: "dv-ipes-ground-water-monitor" }, null, 512), [
          [vShow, !waterTotal.value]
        ])
      ], 64);
    };
  }
});

export { _sfc_main as default };