@ued_fpi/data-visual/dist/es/ipes/src/WastewaterTargetRate/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 __vite_glob_0_0 from './images/bg-light.png.mjs';
import __vite_glob_0_1 from './images/bg.png.mjs';
import { defineComponent, ref, onMounted, openBlock, createElementBlock, createElementVNode, toDisplayString, unref, normalizeStyle } from 'vue';
import requestControl from '../../service/request.mjs';
import { useThemeHook } from '../../../utils.mjs';
import { setIntervalData } from '../../utils/hooks.mjs';

const _hoisted_1 = { class: "dv-ipes-waste-water-rate" };
const _hoisted_2 = { class: "left-waste-water-box" };
const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", {
  id: "wasteWaterChart",
  class: "pie"
}, null, -1);
const _hoisted_4 = { class: "info" };
const _hoisted_5 = { class: "row" };
const _hoisted_6 = /* @__PURE__ */ createElementVNode("div", { class: "label" }, " 废水达标率 ", -1);
const _hoisted_7 = { class: "value" };
const _hoisted_8 = { class: "number" };
const _hoisted_9 = /* @__PURE__ */ createElementVNode("span", { class: "unit" }, "%", -1);
const _hoisted_10 = { class: "right-waste-water-box" };
const _hoisted_11 = ["src"];
const _hoisted_12 = { class: "info" };
const _hoisted_13 = /* @__PURE__ */ createElementVNode("div", { class: "label" }, " 污水厂总排口 ", -1);
const __default__ = {
  name: "DvIpesWastewaterTargetRate",
  title: "废水达标率"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  setup(__props) {
    const { isDark } = useThemeHook();
    const info = ref({
      onlineRatio: 0,
      runStatusName: ""
    });
    const getImg = () => {
      return new URL((/* #__PURE__ */ Object.assign({"./images/bg-light.png": __vite_glob_0_0,"./images/bg.png": __vite_glob_0_1}))[`./images/bg${isDark.value ? "" : "-light"}.png`], self.location).href;
    };
    async function getInfoData() {
      try {
        const res = await requestControl({
          method: "get",
          url: "/ipes-data-aggregation-server/api/v2/gis/env/stat-ww"
        });
        info.value = res?.data;
        drawChart(info.value);
      } catch (error) {
        console.log(error);
      }
    }
    function drawChart(data) {
      const legendData = [
        { name: "达标率", y: +(data.onlineRatio || 0) },
        { name: "未达标率", y: 100 - +(data.onlineRatio || 0) }
      ];
      const seriesData = legendData;
      const highcharts = window.Highcharts;
      highcharts.chart("wasteWaterChart", {
        chart: {
          type: "pie",
          animation: false,
          // marginTop: 20,
          backgroundColor: "transparent",
          // 不显示背景色
          options3d: {
            enabled: true,
            alpha: 50,
            beta: 0,
            depth: 8
          }
        },
        credits: { enabled: false },
        title: {
          text: null
        },
        colors: ["var(--dv-color-success)", "var(--dv-bg-gray)"],
        tooltip: { enabled: false },
        plotOptions: {
          pie: {
            center: ["50%", "50%"],
            allowPointSelect: true,
            inactiveOtherPoints: false,
            cursor: "pointer",
            depth: 10,
            innerSize: "0%",
            size: "40",
            dataLabels: {
              enabled: false
            }
          }
        },
        series: [
          {
            type: "pie",
            name: "废水达标率",
            data: seriesData
          }
        ]
      });
    }
    function getSiteStateColor(runStatus) {
      const statusColors = {
        stop_running: "#FF792E",
        // 停运
        stop_using: "rgb(233, 169, 0)",
        // 停用
        offline: "rgb(116, 116, 116)",
        // 离线
        exceed: "rgb(228, 56, 52)",
        // 超标
        abnormal: "rgb(143, 32, 253)",
        // 异常
        normal: "rgb(58, 183, 93)"
        // 正常
      };
      return statusColors[runStatus] || "#0084ff";
    }
    onMounted(() => {
      getInfoData();
    });
    setIntervalData(getInfoData, 5 * 60 * 1e3);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode("div", _hoisted_2, [
          _hoisted_3,
          createElementVNode("div", _hoisted_4, [
            createElementVNode("div", _hoisted_5, [
              _hoisted_6,
              createElementVNode("div", _hoisted_7, [
                createElementVNode("span", _hoisted_8, toDisplayString(info.value.onlineRatio), 1),
                _hoisted_9
              ])
            ])
          ])
        ]),
        createElementVNode("div", _hoisted_10, [
          createElementVNode("img", {
            src: getImg(unref(isDark))
          }, null, 8, _hoisted_11),
          createElementVNode("div", _hoisted_12, [
            _hoisted_13,
            createElementVNode("div", {
              class: "value",
              style: normalizeStyle({ color: getSiteStateColor(info.value.runStatus) })
            }, toDisplayString(info.value.runStatusName), 5)
          ])
        ])
      ]);
    };
  }
});

export { _sfc_main as default };