@ued_fpi/data-visual/dist/lib/ipes/src/GroundwaterMonitor/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 NoData_vue_vue_type_script_setup_true_lang = require('../common/NoData.vue.js');
require('../common/NoData.vue2.js');
const hooks = require('../../utils/hooks.js');

const _hoisted_1 = { class: "dv-ipes-ground-water-monitor" };
const _hoisted_2 = { class: "pie-card" };
const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("div", { class: "top" }, null, -1);
const _hoisted_4 = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
  ...__default__,
  emits: ["openPopup"],
  setup(__props, { emit }) {
    const colors = vue.ref([]);
    const waterTotal = vue.ref(0);
    const legendData = vue.ref([]);
    const waterName = vue.ref("地下水监控");
    const groundwaterChart = vue.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 request.default({
          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);
      }
    };
    vue.onMounted(async () => {
      await vue.nextTick();
      fetchData();
    });
    hooks.setIntervalData(fetchData, 5 * 60 * 1e3);
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
        vue.withDirectives(vue.createElementVNode("div", _hoisted_1, [
          vue.createElementVNode("div", _hoisted_2, [
            vue.createElementVNode("div", {
              ref_key: "groundwaterChart",
              ref: groundwaterChart,
              class: "pie"
            }, null, 512),
            _hoisted_3,
            _hoisted_4,
            vue.createElementVNode("div", _hoisted_5, [
              vue.createElementVNode("div", _hoisted_6, vue.toDisplayString(waterName.value), 1),
              vue.createElementVNode("div", _hoisted_7, vue.toDisplayString(waterTotal.value), 1)
            ])
          ]),
          vue.createElementVNode("div", _hoisted_8, [
            (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: item.color || colors.value[index] })
                }, null, 4),
                vue.createElementVNode("div", _hoisted_9, vue.toDisplayString(item.name), 1),
                vue.createElementVNode("div", _hoisted_10, vue.toDisplayString(item.count || 0), 1)
              ]);
            }), 128))
          ])
        ], 512), [
          [vue.vShow, waterTotal.value]
        ]),
        vue.withDirectives(vue.createVNode(NoData_vue_vue_type_script_setup_true_lang.default, { class: "dv-ipes-ground-water-monitor" }, null, 512), [
          [vue.vShow, !waterTotal.value]
        ])
      ], 64);
    };
  }
});

exports.default = _sfc_main;