mixdashboards 1.0.73 → 1.0.74

package/dist/bar-YhAAV2al.js

@@ -0,0 +1,309 @@
+var R = Object.defineProperty, W = Object.defineProperties;
+var $ = Object.getOwnPropertyDescriptors;
+var N = Object.getOwnPropertySymbols;
+var j = Object.prototype.hasOwnProperty, F = Object.prototype.propertyIsEnumerable;
+var T = (u, s, c) => s in u ? R(u, s, { enumerable: !0, configurable: !0, writable: !0, value: c }) : u[s] = c, A = (u, s) => {
+  for (var c in s || (s = {}))
+    j.call(s, c) && T(u, c, s[c]);
+  if (N)
+    for (var c of N(s))
+      F.call(s, c) && T(u, c, s[c]);
+  return u;
+}, O = (u, s) => W(u, $(s));
+import { defineComponent as V, onMounted as X, onUnmounted as M, computed as P, openBlock as B, createElementBlock as H, normalizeStyle as k, unref as C, createElementVNode as _, toDisplayString as G, renderSlot as K } from "vue";
+import { D as q, l as J, u as Q, n as Y, C as Z, o as tt, s as v, p as et, _ as it } from "./index-D5BukPPY.js";
+import "element-plus";
+import { E as st } from "./EChartComponentBase-C3gcATBZ.js";
+import { g as ot } from "./titleStyle-BT5GlpAb.js";
+import { A as at, D as nt } from "./ele-bar-icon-C-GiCs2a.js";
+import { i as rt } from "./install-DdM8j5Ll.js";
+import { i as lt } from "./install-CEl1AYgZ.js";
+import { u as ct, i as dt, a as ut } from "./installCanvasRenderer-oDYkyVFy.js";
+import { i as pt } from "./install-DbAuuRVv.js";
+import { i as ft } from "./install-CqrIgcb1.js";
+const ht = { class: "mix-body" }, mt = ["id"], St = {
+  DEFAULT_ICON: nt,
+  ACTIVE_ICON: at,
+  NAME_CN: "基础柱状图",
+  NAME_EN: "Bar Chart",
+  ORDER: 1,
+  PLATFORM: ["pc", "screen", "mobile"]
+}, bt = {
+  titleColor: "#111",
+  // color
+  textColor: "#111",
+  // color
+  bgColor: "#fff",
+  // color
+  top: 30,
+  // number
+  bottom: 40,
+  left: 40,
+  right: 20,
+  radiusSize: 8,
+  textSize: 12,
+  barWidth: 30,
+  points: 10,
+  isHideTitle: !1,
+  // checkbox
+  showLabel: !1
+}, xt = [
+  {
+    name: "参数一",
+    fv: "",
+    object_id: "",
+    color: "#4162ff",
+    periodUnit: "near-hour",
+    periodValue: 1
+  }
+], gt = [
+  "name",
+  "fv",
+  "object_id",
+  "color",
+  {
+    key: "periodUnit",
+    label: "setting.timeUnit",
+    type: "select",
+    options: q
+  },
+  { key: "periodValue", label: "setting.timePeriod", type: "number" }
+], yt = ["mosaic", "statistics", "calculate"], Ct = {
+  source: "mosaic",
+  useAlias: !1,
+  multiObject: !1,
+  null: { type: "0", value: "" }
+}, At = {
+  DEFAULT: St,
+  OPTIONS: bt,
+  DATA: xt,
+  PARAMS: gt,
+  SOURCE: yt,
+  COMMON: Ct
+}, Ot = /* @__PURE__ */ V(O(A({}, At), {
+  __name: "bar",
+  props: {
+    conf: { type: Object, default: () => ({ data: [] }) },
+    uid: { type: String, default: "" },
+    mode: { type: String, default: "edit" },
+    theme: { type: String, default: "light" }
+  },
+  setup(u) {
+    ct([
+      rt,
+      lt,
+      dt,
+      pt,
+      ut,
+      ft
+    ]);
+    const s = u, c = J();
+    class I extends st {
+      // 提取样式（扩展父类）
+      extractStyles() {
+        return O(A({}, super.extractStyles()), {
+          barWidth: this.getOptionValue("barWidth", 30),
+          showLabel: this.getOptionValue("showLabel", !1)
+        });
+      }
+      // 获取 ECharts option
+      getChartOption() {
+        const t = this.Style.value, e = this.props.conf;
+        return {
+          tooltip: {
+            trigger: "axis",
+            axisPointer: { type: "shadow" },
+            textStyle: { align: "left", fontSize: t.textSize }
+          },
+          grid: {
+            top: t.top,
+            bottom: t.bottom,
+            left: t.left,
+            right: t.right,
+            containLabel: !1
+          },
+          legend: {
+            show: !0,
+            data: e.data.map((o) => o.name),
+            right: 20,
+            top: 0,
+            textStyle: { color: t.textColor, fontSize: t.textSize }
+          },
+          xAxis: [
+            {
+              type: "category",
+              data: this.getXAxisData(),
+              axisTick: { alignWithLabel: !0 },
+              axisLine: { lineStyle: { color: t.textColor } },
+              axisLabel: {
+                formatter: (o) => {
+                  if (!/^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}$/.test(o))
+                    return o;
+                  const [n, i] = o.split(" ");
+                  return `${n}
+${i}`;
+                },
+                color: t.textColor,
+                fontSize: t.textSize
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: "value",
+              nameGap: 10,
+              nameTextStyle: { align: "right" },
+              splitLine: { lineStyle: { type: "dashed", color: "#e5e5e5" } },
+              axisLabel: { color: t.textColor, fontSize: t.textSize },
+              axisLine: { lineStyle: { color: t.textColor } },
+              splitNumber: 4
+            }
+          ],
+          series: this.formatSeries()
+        };
+      }
+      /** 统计/计算且非 near 时返回固定类目轴刻度；否则返回 null */
+      getFixedStatisticsXLabels() {
+        var i;
+        const { data: t, common: e } = this.props.conf, o = (e == null ? void 0 : e.source) || "mosaic", n = (i = t[0]) == null ? void 0 : i.periodUnit;
+        return ["statistics", "calculate"].includes(o) && n && !String(n).startsWith("near") ? Y(n) : null;
+      }
+      // 获取 X 轴数据
+      getXAxisData() {
+        var t;
+        return (t = this.getFixedStatisticsXLabels()) != null ? t : this.getTimeAxis();
+      }
+      // 格式化 Series
+      formatSeries() {
+        const t = this.props.conf, e = this.Style.value, o = this.getFixedStatisticsXLabels(), n = o ? o.length : e.points;
+        return t.data.map((i, l) => {
+          const a = i.color || Z[l];
+          return {
+            type: "bar",
+            data: tt({
+              num: n,
+              max: 200,
+              min: 0,
+              mode: this.props.mode,
+              hasDataSource: this.hasData()
+            }),
+            name: i.name,
+            itemStyle: { color: a },
+            label: { show: e.showLabel, position: "top", color: a },
+            barWidth: e.barWidth + "%"
+          };
+        });
+      }
+      // 设置实时数据
+      setSocketData(t) {
+        var b;
+        if (!this.hasData() || !this.chartObj || !t) return;
+        const { data: e, common: o } = this.props.conf, n = o.source || "mosaic", i = this.chartObj.getOption(), l = (b = e[0]) == null ? void 0 : b.periodUnit, a = ["statistics", "calculate"].includes(n) && l && !String(l).startsWith("near");
+        if (e.forEach((d, h) => {
+          const m = this.extractDataValue(t, d.fv);
+          if (["statistics", "calculate"].includes(n) && d.periodUnit && !String(d.periodUnit).startsWith("near") && !String(d.periodUnit).startsWith("last")) {
+            const S = v(
+              t.start_time,
+              d.periodUnit
+            ), y = S ? i.xAxis[0].data.indexOf(S) : -1;
+            y >= 0 && (i.series[h].data[y] = m);
+            return;
+          }
+          const g = ["statistics", "calculate"].includes(n) ? t.start_time : t.datetime;
+          g != null && (h === 0 && i.xAxis[0].data.push(g), i.series[h].data.push(m));
+        }), a) {
+          this.updateChart(i);
+          return;
+        }
+        const r = et(
+          i.xAxis[0].data,
+          i.series.map((d) => d.data)
+        ), p = Number(this.Style.value.points) || 10;
+        i.xAxis[0].data = r.times.slice(-p), i.series.forEach((d, h) => {
+          var m;
+          d.data = ((m = r.data[h]) == null ? void 0 : m.slice(-p)) || [];
+        }), this.updateChart(i);
+      }
+      setHistoryData(t) {
+        if (!t || !(t != null && t.length)) return;
+        const e = this.chartObj.getOption(), o = Number(this.Style.value.points) || 10, { data: n } = this.props.conf, i = (a) => {
+          if (a == null || a === "" || a === "-") return null;
+          const r = Number(a);
+          return Number.isFinite(r) ? r : null;
+        }, l = this.getFixedStatisticsXLabels();
+        if (l != null && l.length) {
+          e.xAxis[0].data = [...l], t.forEach((a, r) => {
+            var g;
+            if (!e.series[r]) return;
+            const p = n[r], b = (p == null ? void 0 : p.periodUnit) || ((g = n[0]) == null ? void 0 : g.periodUnit), d = new Array(l.length).fill(
+              null
+            ), h = a.time || [], m = a.data || [];
+            for (let S = 0; S < h.length; S++) {
+              const y = v(
+                h[S],
+                String(b || "")
+              ), U = y ? l.indexOf(y) : -1;
+              U >= 0 && (d[U] = i(m[S]));
+            }
+            e.series[r].data = d;
+          }), this.updateChart(e);
+          return;
+        }
+        e.xAxis[0].data = t[0].time.slice(-o), t.forEach((a, r) => {
+          if (!e.series[r]) return;
+          const p = a.data || [];
+          e.series[r].data = p.map(i).slice(-o);
+        }), this.updateChart(e);
+      }
+    }
+    const f = new I(s, "bar");
+    f.setupLifecycle();
+    const L = Q();
+    X(() => {
+      var x;
+      if (L.registerInstance(s.uid, f), s.mode === "preview") {
+        const t = ((x = f.getChartInstance) == null ? void 0 : x.call(f)) || f.chartObj;
+        t == null || t.off("click"), t == null || t.on("click", (e) => {
+          var n, i, l, a, r, p;
+          const o = e == null ? void 0 : e.seriesName;
+          if (typeof o == "string" && o) {
+            const b = ((i = (n = s.conf) == null ? void 0 : n.options) == null ? void 0 : i.linkChannel) === "custom" ? (a = (l = s.conf) == null ? void 0 : l.options) == null ? void 0 : a.customChannel : (p = (r = s.conf) == null ? void 0 : r.options) == null ? void 0 : p.linkChannel;
+            c.publish(b || "bar", "bar", {
+              objectId: "",
+              deviceId: "",
+              type: "select",
+              fieldKey: o,
+              fv: A({ key: o }, e),
+              source: "bar"
+            });
+          }
+        });
+      }
+    }), M(() => {
+      L.unregisterInstance(s.uid);
+    });
+    const E = f.getStyle(), w = f.getEchartId(), D = s.conf, z = P(() => ot(s.conf.options));
+    return (x, t) => (B(), H("div", {
+      class: "mix-component",
+      style: k({
+        background: C(E).bgColor,
+        borderRadius: `${C(E).radiusSize}px`
+      })
+    }, [
+      _("div", {
+        class: "mix-title",
+        style: k(z.value)
+      }, G(C(D).caption || C(D).name), 5),
+      _("div", ht, [
+        _("div", {
+          class: "w-full h-full",
+          id: C(w)
+        }, null, 8, mt)
+      ]),
+      K(x.$slots, "default", {}, void 0, !0)
+    ], 4));
+  }
+})), Rt = /* @__PURE__ */ it(Ot, [["__scopeId", "data-v-e27440b4"]]);
+export {
+  Rt as default
+};