mixdashboards 1.0.32 → 1.0.39

package/dist/toggleBtn-O2Y75Uen.js

@@ -0,0 +1,249 @@
+var Z = Object.defineProperty, I = Object.defineProperties;
+var U = Object.getOwnPropertyDescriptors;
+var E = Object.getOwnPropertySymbols;
+var H = Object.prototype.hasOwnProperty, V = Object.prototype.propertyIsEnumerable;
+var M = (c, o, i) => o in c ? Z(c, o, { enumerable: !0, configurable: !0, writable: !0, value: i }) : c[o] = i, $ = (c, o) => {
+  for (var i in o || (o = {}))
+    H.call(o, i) && M(c, i, o[i]);
+  if (E)
+    for (var i of E(o))
+      V.call(o, i) && M(c, i, o[i]);
+  return c;
+}, A = (c, o) => I(c, U(o));
+import { defineComponent as P, ref as F, reactive as G, openBlock as p, createElementBlock as C, normalizeStyle as d, unref as a, createElementVNode as u, Fragment as R, renderList as N, normalizeClass as q, toDisplayString as S, renderSlot as J, nextTick as K } from "vue";
+import "html2canvas";
+import { C as Q } from "./element-resize-detector-DJcsrJ8s.js";
+import { _ as W } from "./index-kShjySl9.js";
+import { E as X } from "./EChartComponentBase-BQOhWkz2.js";
+import { i as Y } from "./install-CBde4hAM.js";
+import { i as e0 } from "./install-hfre7yvV.js";
+import { u as t0, i as a0, a as r0 } from "./installCanvasRenderer-CLT2hquJ.js";
+import { i as l0 } from "./install-BBrAry2m.js";
+import { i as o0 } from "./install-9_V0b6vf.js";
+const i0 = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='18px'%20height='17px'%20viewBox='0%200%2018%2017'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3e切换%3c/title%3e%3cg%20id='基础规范'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cg%20id='数据大屏备份'%20transform='translate(-986.000000,%20-99.000000)'%20fill='%23333333'%20fill-rule='nonzero'%3e%3cpath%20d='M998.978161,99.5%20C999.333655,99.5%20999.621839,99.7881845%20999.621839,100.143678%20L999.621839,100.143678%20L999.621,100.971%20L1002.65632,100.971264%20C1002.9795,100.971264%201003.24705,101.209433%201003.29302,101.519824%20L1003.3,101.614943%20L1003.3,113.385057%20C1003.3,113.740551%201003.01182,114.028736%201002.65632,114.028736%20L1002.65632,114.028736%20L999.621,114.028%20L999.621839,114.856322%20C999.621839,115.179498%20999.38367,115.447047%20999.073279,115.493021%20L998.978161,115.5%20L991.621839,115.5%20C991.266345,115.5%20990.978161,115.211815%20990.978161,114.856322%20L990.978161,114.856322%20L990.978,114.028%20L987.943678,114.028736%20C987.620502,114.028736%20987.352953,113.790567%20987.306979,113.480176%20L987.3,113.385057%20L987.3,101.614943%20C987.3,101.259449%20987.588185,100.971264%20987.943678,100.971264%20L987.943678,100.971264%20L990.978,100.971%20L990.978161,100.143678%20C990.978161,99.8205021%20991.21633,99.5529535%20991.526721,99.5069791%20L991.621839,99.5%20Z%20M998.334483,100.786788%20L992.265517,100.786788%20L992.265517,114.212076%20L998.334483,114.212076%20L998.334483,100.786788%20Z%20M1002.01264,102.258053%20L999.621839,102.258053%20L999.621839,112.740811%20L1002.01264,112.740811%20L1002.01264,102.258053%20Z%20M990.978161,102.258053%20L988.587356,102.258053%20L988.587356,112.740811%20L990.978161,112.740811%20L990.978161,102.258053%20Z'%20id='形状结合'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e", s0 = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='18px'%20height='17px'%20viewBox='0%200%2018%2017'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3e切换%3c/title%3e%3cg%20id='基础规范'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cg%20id='数据大屏备份-2'%20transform='translate(-986.000000,%20-99.000000)'%20fill='%23FFFFFF'%20fill-rule='nonzero'%3e%3cpath%20d='M998.978161,99.5%20C999.333655,99.5%20999.621839,99.7881845%20999.621839,100.143678%20L999.621839,100.143678%20L999.621,100.971%20L1002.65632,100.971264%20C1002.9795,100.971264%201003.24705,101.209433%201003.29302,101.519824%20L1003.3,101.614943%20L1003.3,113.385057%20C1003.3,113.740551%201003.01182,114.028736%201002.65632,114.028736%20L1002.65632,114.028736%20L999.621,114.028%20L999.621839,114.856322%20C999.621839,115.179498%20999.38367,115.447047%20999.073279,115.493021%20L998.978161,115.5%20L991.621839,115.5%20C991.266345,115.5%20990.978161,115.211815%20990.978161,114.856322%20L990.978161,114.856322%20L990.978,114.028%20L987.943678,114.028736%20C987.620502,114.028736%20987.352953,113.790567%20987.306979,113.480176%20L987.3,113.385057%20L987.3,101.614943%20C987.3,101.259449%20987.588185,100.971264%20987.943678,100.971264%20L987.943678,100.971264%20L990.978,100.971%20L990.978161,100.143678%20C990.978161,99.8205021%20991.21633,99.5529535%20991.526721,99.5069791%20L991.621839,99.5%20Z%20M998.334483,100.786788%20L992.265517,100.786788%20L992.265517,114.212076%20L998.334483,114.212076%20L998.334483,100.786788%20Z%20M1002.01264,102.258053%20L999.621839,102.258053%20L999.621839,112.740811%20L1002.01264,112.740811%20L1002.01264,102.258053%20Z%20M990.978161,102.258053%20L988.587356,102.258053%20L988.587356,112.740811%20L990.978161,112.740811%20L990.978161,102.258053%20Z'%20id='形状结合'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e", c0 = ["onClick"], n0 = ["id"], d0 = { class: "progress-wrap" }, u0 = ["title"], f0 = {
+  DEFAULT_ICON: i0,
+  ACTIVE_ICON: s0,
+  NAME_CN: "切换",
+  NAME_EN: "Toggle Button",
+  ORDER: 2
+}, g0 = {
+  titleSize: 14,
+  textSize: 12,
+  barHeight: 8,
+  textColor: "#a8b4d9",
+  bgColor: "#0a1635",
+  barColor: "#1e3a5f",
+  tabColor: "#1e3a5f",
+  activeBgColor: "#6b7fd9",
+  borderColor: "#1e3a5f",
+  activeBorder: "#6b7fd9",
+  radiusSize: 8,
+  type: {
+    value: "none",
+    type: "radio",
+    option: [
+      { value: "none", label: "component.radar.diamond" },
+      { value: "circle", label: "component.radar.circle" }
+    ],
+    label: "component.radar.shapeSelect"
+  },
+  tags: {
+    value: [
+      { label: "TAB1", flag: ["S01", "S02", "S03"] },
+      { label: "TAB2", flag: ["S02", "S03", "S04"] }
+    ],
+    type: "tags",
+    label: "component.radar.tagsSetting"
+  }
+}, v0 = [
+  { name: "参数一", color: "#4162ff", fv: "S01", object_id: "" },
+  { name: "参数二", color: "#3bbc6a", fv: "S02", object_id: "" },
+  { name: "参数三", color: "#e24359", fv: "S03", object_id: "" },
+  { name: "参数四", color: "#ff8b41", fv: "S04", object_id: "" }
+], L0 = ["name", "fv", "object_id", "color"], p0 = ["mosaic", "statistics", "calculate"], C0 = {
+  useAlias: !1,
+  multiObject: !1,
+  source: "mosaic"
+}, h0 = { DEFAULT: f0, OPTIONS: g0, DATA: v0, PARAMS: L0, SOURCE: p0, COMMON: C0 }, m0 = /* @__PURE__ */ P(A($({}, h0), {
+  __name: "toggleBtn",
+  props: {
+    conf: { type: Object, default: () => ({ data: [] }) },
+    uid: { type: String, default: "" },
+    mode: { type: String, default: "edit" },
+    theme: { type: String, default: "light" }
+  },
+  setup(c) {
+    t0([Y, e0, a0, l0, r0, o0]);
+    const o = c, i = F(0), f = G({
+      indicator: [],
+      series: []
+    }), g = F(0);
+    class j extends X {
+      extractStyles() {
+        var t, l, s, n, v, L, x, y, w, _, z, B, k, T, O;
+        const { options: e } = this.props.conf;
+        return {
+          bgColor: ((t = e == null ? void 0 : e.bgColor) == null ? void 0 : t.value) || "#fff",
+          titleSize: ((l = e == null ? void 0 : e.titleSize) == null ? void 0 : l.value) || 16,
+          barHeight: ((s = e == null ? void 0 : e.barHeight) == null ? void 0 : s.value) || 8,
+          textColor: ((n = e == null ? void 0 : e.textColor) == null ? void 0 : n.value) || "#111",
+          tabColor: ((v = e == null ? void 0 : e.tabColor) == null ? void 0 : v.value) || "#f5f5f5",
+          activeBgColor: ((L = e == null ? void 0 : e.activeBgColor) == null ? void 0 : L.value) || "#4162ff",
+          borderColor: ((x = e == null ? void 0 : e.borderColor) == null ? void 0 : x.value) || "#e5e5e5",
+          activeBorder: ((y = e == null ? void 0 : e.activeBorder) == null ? void 0 : y.value) || "#4162ff",
+          barColor: ((w = e == null ? void 0 : e.barColor) == null ? void 0 : w.value) || "#e5e5e5",
+          radiusSize: (z = (_ = e == null ? void 0 : e.radiusSize) == null ? void 0 : _.value) != null ? z : 8,
+          textSize: (k = (B = e == null ? void 0 : e.textSize) == null ? void 0 : B.value) != null ? k : 12,
+          type: ((T = e == null ? void 0 : e.type) == null ? void 0 : T.value) || !1,
+          tags: ((O = e == null ? void 0 : e.tags) == null ? void 0 : O.value) || []
+        };
+      }
+      getChartOption() {
+        var t;
+        const { name: e } = this.props.conf;
+        return {
+          radar: {
+            shape: this.Style.value.type,
+            axisNameGap: 10,
+            indicator: f.indicator,
+            center: ["50%", "55%"],
+            radius: 70,
+            axisLine: {
+              lineStyle: {
+                type: "dashed",
+                color: "#383D42"
+              }
+            },
+            splitLine: {
+              show: !0,
+              lineStyle: {
+                width: 1,
+                color: "#4B5FAB"
+              }
+            },
+            splitArea: {
+              show: !0,
+              areaStyle: {
+                color: ["transparent"]
+              }
+            },
+            axisName: {
+              fontSize: 12,
+              color: this.Style.value.textColor
+            }
+          },
+          series: [
+            {
+              name: e != null ? e : "",
+              type: "radar",
+              data: (t = f.series) != null ? t : [],
+              areaStyle: {},
+              itemStyle: {
+                color: "#4162ff"
+              }
+            }
+          ]
+        };
+      }
+      init() {
+        super.init(), K(() => {
+          this.initChart(), b(g.value);
+        });
+      }
+      setSocketData(e) {
+        if (!e) return;
+        const { data: t } = this.props.conf;
+        t.forEach((l) => {
+          const s = this.extractDataValue(e, l.fv);
+          l.value = s != null ? s : 0;
+        }), b(g.value);
+      }
+      /** 刷新图表（公共方法） */
+      refreshChart() {
+        var t;
+        const e = this.getChartOption();
+        (t = this.chartObj) == null || t.setOption(e, !0);
+      }
+    }
+    const h = new j(o, "toggleBtn");
+    h.setupLifecycle();
+    const r = h.getStyle(), D = h.getEchartId(), b = (m) => {
+      const { data: e, options: t, name: l } = o.conf;
+      g.value = m, f.indicator = [], f.series = [];
+      let s = {};
+      s.name = l, s.value = [], i.value = Math.max(...e.map((n) => n.value || 0)), e.forEach((n) => {
+        var v, L;
+        (L = (v = t.tags.value[g.value]) == null ? void 0 : v.flag) != null && L.includes(n.fv) && (f.indicator.push({
+          name: n.name,
+          max: i.value,
+          value: n.value,
+          min: 0,
+          color: n.color
+        }), s.value.push(n.value));
+      }), f.series.push(s), h.refreshChart();
+    };
+    return (m, e) => (p(), C("div", {
+      class: "mix-component",
+      style: d({ background: a(r).bgColor, borderRadius: `${a(r).radiusSize}px` })
+    }, [
+      u("div", {
+        class: "toggle-wrap",
+        style: d({ borderTopLeftRadius: `${a(r).radiusSize}px`, borderTopRightRadius: `${a(r).radiusSize}px` })
+      }, [
+        (p(!0), C(R, null, N(a(r).tags, (t, l) => (p(), C("div", {
+          key: l,
+          class: q(["btn-item", { active: g.value === l }]),
+          style: d({
+            backgroundColor: g.value === l ? a(r).activeBgColor : a(r).tabColor,
+            color: g.value === l ? "#fff" : a(r).textColor,
+            fontSize: `${a(r).titleSize}px`,
+            borderTopLeftRadius: l === 0 ? `${a(r).radiusSize}px` : "0",
+            borderTopRightRadius: l === a(r).tags.length - 1 ? `${a(r).radiusSize}px` : "0"
+          }),
+          onClick: (s) => b(l)
+        }, S(t.label), 15, c0))), 128))
+      ], 4),
+      u("div", {
+        class: "radar-wrap",
+        style: d({
+          color: a(r).textColor,
+          fontSize: `${a(r).textSize}px`
+        })
+      }, [
+        u("div", {
+          id: a(D),
+          class: "radar-chart"
+        }, null, 8, n0),
+        u("div", d0, [
+          (p(!0), C(R, null, N(f.indicator, (t, l) => (p(), C("div", {
+            class: "bar-item-crosswise",
+            key: l
+          }, [
+            u("div", {
+              class: "bar-title",
+              title: t.name,
+              style: d({ color: a(r).textColor })
+            }, S(t.name), 13, u0),
+            u("div", {
+              class: "bar",
+              style: d({ backgroundColor: a(r).barColor, height: `${a(r).barHeight}px` })
+            }, [
+              u("div", {
+                class: "progress",
+                style: d({ backgroundColor: t.color || a(Q)[l], width: (t.value / i.value * 100).toFixed(2) + "%" })
+              }, null, 4)
+            ], 4),
+            u("div", {
+              class: "bar-value",
+              style: d({ color: a(r).textColor })
+            }, S(t.value || 0), 5)
+          ]))), 128))
+        ])
+      ], 4),
+      J(m.$slots, "default", {}, void 0, !0)
+    ], 4));
+  }
+})), E0 = /* @__PURE__ */ W(m0, [["__scopeId", "data-v-9692ecf4"]]);
+export {
+  E0 as default
+};