smart-web-ui 1.0.0 → 1.0.1

package/dist/SplitPieChart.js

@@ -0,0 +1,294 @@
+import { ref as k, computed as x, watch as _, onMounted as z, onBeforeUnmount as D, openBlock as f, createElementBlock as h, mergeProps as L, nextTick as O, createVNode as F, normalizeStyle as I, createElementVNode as n, Fragment as $, renderList as C, toDisplayString as y } from "vue";
+import { i as N } from "./chunks/index-CBkwld9S.js";
+import { _ as P } from "./chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+import { m as B } from "./chunks/merge-H4ZkNr1T.js";
+const E = {
+  __name: "SplitPie",
+  props: {
+    data: {
+      type: Array,
+      required: !0
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    total: {
+      type: Number,
+      default: 100
+    },
+    color: {
+      type: Array,
+      default: () => ["#438AF4", "#a1ffcb", "#f69d7b", "#b9e5ff", "#c392bb", "#65d1f8"]
+    },
+    loop: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(l) {
+    const a = l, p = k(null);
+    let e = null;
+    const c = x(() => ({
+      title: {
+        zlevel: 0,
+        subtext: 806,
+        text: "设备管理",
+        top: "30%",
+        left: "46.5%",
+        textAlign: "center",
+        textStyle: {
+          color: "#fff",
+          fontSize: 12
+        },
+        subtextStyle: {
+          fontSize: 24,
+          color: "#99F7FF"
+        }
+      },
+      series: [
+        {
+          type: "pie",
+          name: "外层细圆环",
+          radius: ["99%", "98%"],
+          hoverAnimation: !1,
+          startAngle: 0,
+          clockWise: !1,
+          itemStyle: {
+            normal: {
+              color: "rgba(129, 197, 200, 0.5)"
+            }
+          },
+          label: {
+            show: !1
+          },
+          data: [100]
+        },
+        //环形
+        {
+          name: "",
+          type: "pie",
+          clockwise: !1,
+          startAngle: 0,
+          radius: ["70%", "82%"],
+          center: ["50%", "50%"],
+          label: {
+            normal: {
+              show: !1
+            },
+            emphasis: {
+              show: !1
+            }
+          },
+          zlevel: 1,
+          labelLine: {
+            normal: {
+              show: !1
+            }
+          },
+          data: a.data.flatMap((o, t) => {
+            if (o.value > 0) {
+              const i = Math.round(o.value / a.total * 100), r = [];
+              for (let s = 0; s < i; s++)
+                r.push(
+                  {
+                    value: 2,
+                    // 有颜色部分的宽度
+                    name: s,
+                    // ratio: item.ratio,
+                    itemStyle: {
+                      normal: { color: a.color[t] }
+                    }
+                  },
+                  {
+                    value: 1,
+                    // 无颜色部分的宽度
+                    name: "",
+                    itemStyle: {
+                      normal: {
+                        label: { show: !1 },
+                        labelLine: { show: !1 },
+                        color: "rgba(0, 0, 0, 0)",
+                        borderColor: "rgba(0, 0, 0, 0)",
+                        borderWidth: 0
+                      }
+                    }
+                  }
+                );
+              return r;
+            }
+            return [];
+          })
+        }
+        // //环形分割线
+        // {
+        //   name: "分割线",
+        //   type: "gauge",
+        //   radius: "60%",
+        //   clockwise: true,
+        //   startAngle: "90",
+        //   center: ["50%", "50%"],
+        //   startAngle: 0,
+        //   endAngle: "-360",
+        //   splitNumber: 100,
+        //   zlevel: 2,
+        //   detail: {
+        //     offsetCenter: [10, 20],
+        //     formatter: " ",
+        //   },
+        //   axisLine: {
+        //     lineStyle: {
+        //       width: 0,
+        //       opacity: 0,
+        //     },
+        //   },
+        //   axisTick: {
+        //     show: false,
+        //   },
+        //   markArea: {
+        //     itemStyle: {
+        //       color: "#0f0",
+        //     },
+        //   },
+        //   splitLine: {
+        //     show: true,
+        //     length: 9,
+        //     padding: [0, 0, 0],
+        //     lineStyle: {
+        //       color: "#00000030",
+        //       width: 3,
+        //     },
+        //   },
+        //   axisLabel: {
+        //     show: false,
+        //   },
+        // },
+      ]
+    }));
+    function u(o, t) {
+      if (!t)
+        return;
+      let i = -1, r = setInterval(S, 1e3);
+      function s() {
+        for (let b = 0; b < o.series[1].data.length; b++)
+          t.dispatchAction({
+            type: "downplay",
+            seriesIndex: 1,
+            dataIndex: b
+          });
+        t.dispatchAction({
+          type: "highlight",
+          seriesIndex: 1,
+          dataIndex: i
+        }), t.dispatchAction({
+          type: "showTip",
+          seriesIndex: 1,
+          dataIndex: i
+        });
+      }
+      t.on("mouseover", (d) => {
+        d.componentType !== "graphic" && (clearInterval(r), i = d.dataIndex, s());
+      }), t.on("mouseout", (d) => {
+        r && clearInterval(r), r = setInterval(S, 100);
+      }), t.on("dispose", () => {
+        clearInterval(r);
+      });
+      function S() {
+        const d = o.series[1].data.length;
+        i = (i + 1) % d, s();
+      }
+    }
+    const m = x(
+      () => B({}, c.value, a.options)
+    ), A = () => {
+      p.value && (e = N(
+        p.value,
+        {},
+        {
+          renderer: "svg"
+        }
+      ), v(), a.loop && u(m.value, e), e.dispatchAction({
+        type: "takeGlobalCursor",
+        key: "dataZoomSelect",
+        dataZoomSelectActive: !0
+      }));
+    }, v = () => {
+      e && (e.setOption(m.value, !0), O(() => e.resize()));
+    }, g = () => {
+      e == null || e.resize({ animation: { duration: 300 } });
+    };
+    return _(
+      () => a.data,
+      (o, t) => {
+        JSON.stringify(o) !== JSON.stringify(t) && v();
+      },
+      { deep: !0 }
+    ), _(m, v), z(() => {
+      A(), window.addEventListener("resize", g);
+    }), D(() => {
+      window.removeEventListener("resize", g), e == null || e.dispose(), e = null;
+    }), (o, t) => (f(), h("div", L({
+      ref_key: "chartContainer",
+      ref: p
+    }, o.$attrs, { class: "echarts-container" }), null, 16));
+  }
+}, M = /* @__PURE__ */ P(E, [["__scopeId", "data-v-364c099f"]]), T = { class: "SplitPieChart" }, j = { class: "splitPieData" }, q = { class: "splitPieData-item-left" }, J = { class: "splitPieData-item-right" }, V = {
+  __name: "SplitPieChart",
+  props: {
+    data: {
+      type: Array,
+      required: !0
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    width: {
+      type: String,
+      default: "180px"
+    },
+    height: {
+      type: String,
+      default: "160px"
+    },
+    color: {
+      type: Array,
+      default: () => ["#438AF4", "#a1ffcb", "#f69d7b", "#b9e5ff", "#c392bb", "#65d1f8"]
+    }
+  },
+  setup(l) {
+    const a = l;
+    return (p, e) => (f(), h("div", T, [
+      F(M, {
+        data: l.data,
+        options: l.options,
+        color: a.color,
+        style: I({ width: `${a.width}`, height: `${a.height}` })
+      }, null, 8, ["data", "options", "color", "style"]),
+      n("div", j, [
+        (f(!0), h($, null, C(l.data, (c, u) => (f(), h("div", {
+          key: `splitPieData_${u}`,
+          class: "splitPieData-item"
+        }, [
+          n("div", q, [
+            n("div", {
+              class: "splitPieData-item-left-color",
+              style: I({ background: `${a.color[u]}` })
+            }, null, 4),
+            n("span", null, y(c.name), 1)
+          ]),
+          n("div", J, [
+            n("b", null, y(c.value), 1),
+            n("b", null, y(c.ratio) + "%", 1)
+          ])
+        ]))), 128))
+      ])
+    ]));
+  }
+}, w = /* @__PURE__ */ P(V, [["__scopeId", "data-v-bb785ea4"]]);
+w.install = (l) => {
+  l.component("SplitPieChart", w);
+};
+export {
+  w as default
+};

package/dist/StacketColumnDiagram.js

@@ -0,0 +1,345 @@
+import { ref as C, computed as m, watch as c, onMounted as b, onBeforeUnmount as L, openBlock as v, createElementBlock as F, mergeProps as w, nextTick as k } from "vue";
+import { L as z, i as T } from "./chunks/index-CBkwld9S.js";
+import { _ } from "./chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+import { m as O } from "./chunks/merge-H4ZkNr1T.js";
+const D = {
+  __name: "StacketColumnDiagram",
+  props: {
+    data: {
+      type: Array,
+      required: !0
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    colorData: {
+      type: Array,
+      required: !0
+    },
+    zoomKey: {
+      type: String,
+      // 'none' | 'ctrl' | 'alt' | 'shift'
+      default: "ctrl"
+      // 默认按住 Ctrl 键缩放
+    },
+    // 纵轴网格线格式
+    xLineType: {
+      type: String,
+      default: "dashed"
+      // solid 实线 dashed 虚线 dotted 细点画线
+    },
+    // 网格线颜色
+    lineColor: {
+      type: String,
+      default: "#526B8E"
+    },
+    // x 轴文字颜色
+    xNameColor: {
+      type: String,
+      default: "#fff"
+    },
+    // x 轴文字长度
+    xTextLength: {
+      type: Number,
+      default: 4
+    },
+    // 柱子需要对应到标签上，设置为 false
+    boundaryGap: {
+      type: Boolean,
+      default: !0
+    },
+    // 单位名称
+    unitName: {
+      type: String,
+      default: "单位(次)"
+    },
+    // Y 轴单位文字颜色
+    yNameColor: {
+      type: String,
+      default: "#fff"
+    },
+    // 横轴网格线是否显示
+    yLineShow: {
+      type: Boolean,
+      default: !0
+    },
+    // 横轴网格线格式
+    yLineType: {
+      type: String,
+      default: "dashed"
+      // solid 实线 dashed 虚线 dotted 细点画线
+    },
+    // Y 轴名称颜色
+    yColor: {
+      type: String,
+      default: "#fff"
+    },
+    // 柱子宽度
+    barWidth: {
+      type: String,
+      default: 12
+    }
+  },
+  setup(i) {
+    const e = i, l = C(null);
+    let o = null;
+    const f = () => {
+      const t = "0123456789ABCDEF";
+      let r = "#";
+      for (let a = 0; a < 6; a++)
+        r += t[Math.floor(Math.random() * 16)];
+      return r;
+    }, h = (t) => {
+      const r = {};
+      return t.forEach((a) => {
+        a.children.forEach((n) => {
+          r[n.label] || (r[n.label] = []), r[n.label].push(n.value);
+        });
+      }), Object.keys(r).map((a, n) => {
+        var d, y;
+        return {
+          name: a,
+          type: "bar",
+          stack: "total",
+          label: {
+            show: !1,
+            color: "#FFFFFF",
+            formatter: "{a}"
+          },
+          barWidth: e.barWidth,
+          itemStyle: {
+            // 柱子的颜色使用线性渐变
+            color: new z(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: ((d = e.colorData[n]) == null ? void 0 : d.dark) || f()
+              },
+              {
+                offset: 1,
+                color: ((y = e.colorData[n]) == null ? void 0 : y.light) || f()
+              }
+            ])
+          },
+          emphasis: {
+            focus: "series"
+          },
+          data: r[a]
+        };
+      });
+    }, S = m(() => ({
+      // 网格配置，设置图表上下左右的边距
+      grid: {
+        top: 30,
+        bottom: 30,
+        left: 40,
+        right: 20
+      },
+      // 提示框配置，当鼠标悬停在图表上时显示的信息
+      tooltip: {
+        trigger: "axis",
+        // 触发类型为坐标轴
+        backgroundColor: "rgba(1, 13, 19, 0.5)",
+        // 提示框背景颜色
+        borderColor: "#ffffff40",
+        // 提示框边框颜色
+        axisPointer: {
+          type: "shadow"
+          // 坐标轴指示器类型为阴影
+        },
+        textStyle: {
+          color: "#ffffff",
+          // 提示框文字颜色
+          fontSize: 12,
+          // 提示框文字大小
+          fontFamily: "PingFang SC"
+          // 提示框文字字体
+        }
+      },
+      // 图例配置，显示图表中不同系列的名称和颜色
+      legend: {
+        show: !0,
+        // 显示图例
+        right: "5%",
+        // 图例相对于右侧的位置
+        icon: "circle",
+        textStyle: {
+          color: "#ffffff",
+          // 图例文字颜色
+          fontSize: 12,
+          // 图例文字大小
+          fontFamily: "PingFang SC"
+          // 图例文字字体
+        },
+        itemWidth: 12,
+        // 图例项的宽度
+        itemHeight: 12
+        // 图例项的高度
+      },
+      // x 轴配置
+      xAxis: [
+        {
+          type: "category",
+          // x 轴类型为分类轴
+          // 从 props.data 中提取 name 作为 x 轴的数据，处理数据为空或 name 为空的情况
+          data: (e.data || []).map((t) => (t == null ? void 0 : t.name) || ""),
+          // 设置纵轴网格线样式
+          splitLine: {
+            show: !0,
+            // 显示网格线
+            lineStyle: {
+              type: e.xLineType,
+              // 网格线类型，如虚线
+              color: e.lineColor
+              // 网格线颜色
+            }
+          },
+          // 设置 x 轴的位置和样式
+          axisLine: {
+            lineStyle: {
+              type: e.xLineType,
+              // 轴线类型，如虚线
+              color: e.lineColor
+              // 轴线颜色
+            }
+          },
+          axisTick: {
+            show: !1
+            // 隐藏 X 轴刻度线
+          },
+          // 隐藏右侧的标签（如果需要）
+          axisLabel: {
+            show: !0,
+            // 显示 x 轴标签
+            interval: 0,
+            // 强制显示所有标签
+            formatter: function(t) {
+              return t.length > e.xTextLength ? t.slice(0, e.xTextLength) + "..." : t;
+            },
+            textStyle: {
+              fontSize: 12,
+              // x 轴标签文字大小
+              color: e.xNameColor,
+              // x 轴标签文字颜色
+              fontFamily: "PingFang SC"
+              // x 轴标签文字字体
+            }
+          },
+          // 可以通过调整 boundaryGap 来调整柱子与坐标轴标签的对齐
+          boundaryGap: e.boundaryGap
+          // 如果柱子需要对应到标签上，设置为 false
+        }
+      ],
+      // y 轴配置
+      yAxis: [
+        {
+          type: "value",
+          // y 轴类型为数值轴
+          name: e.unitName,
+          // y 轴的名称
+          nameTextStyle: {
+            color: e.yNameColor,
+            // y 轴名称文字颜色
+            fontSize: 12,
+            // y 轴名称文字大小
+            fontFamily: "PingFang SC"
+            // y 轴名称文字字体
+          },
+          axisLabel: {
+            formatter: "{value}"
+            // y 轴标签的格式化方式
+          },
+          // 设置纵轴网格线样式
+          splitLine: {
+            show: e.yLineShow,
+            // 是否显示网格线
+            lineStyle: {
+              type: e.yLineType,
+              // 网格线类型，如虚线
+              color: e.lineColor
+              // 网格线颜色
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: 12,
+              // y 轴标签文字大小
+              color: e.yColor,
+              // y 轴标签文字颜色
+              fontFamily: "PingFang SC"
+              // y 轴标签文字字体
+            }
+          }
+        }
+      ],
+      // 数据系列配置
+      series: h(e.data),
+      // 数据缩放配置
+      dataZoom: [
+        {
+          type: "inside",
+          // 内置型数据缩放组件
+          xAxisIndex: 0,
+          // 控制第一个 x 轴
+          // 根据 zoomKey 的值设置是否需要按键触发缩放
+          zoomOnMouseWheel: e.zoomKey === "none" ? !0 : e.zoomKey,
+          moveOnMouseMove: !0,
+          // 允许鼠标拖动平移
+          moveOnMouseWheel: !0,
+          // 允许鼠标滚轮平移
+          preventDefaultMouseMove: !1,
+          // 允许默认滚动行为
+          throttle: 50,
+          // 操作节流时间
+          start: 0,
+          end: (() => {
+            const t = e.data ? e.data.length : 0;
+            return t > 30 ? t / 1.7 : t > 23 ? t / 1.5 : t > 13 ? 50 : t > 7 ? 70 : 100;
+          })()
+          // maxSpan: 80, // 最大缩放范围
+          // minSpan: 20, // 最小缩放范围
+        }
+      ],
+      animation: !0
+      // 启用动画
+    })), u = m(
+      () => O({}, S.value, e.options)
+    ), x = () => {
+      l.value && (o = T(
+        l.value,
+        {},
+        {
+          renderer: "svg"
+        }
+      ), s(), o.dispatchAction({
+        type: "takeGlobalCursor",
+        key: "dataZoomSelect",
+        dataZoomSelectActive: !0
+      }));
+    }, s = () => {
+      o && (o.setOption(u.value, !0), k(() => o.resize()));
+    }, p = () => {
+      o == null || o.resize({ animation: { duration: 300 } });
+    };
+    return c(
+      () => e.data,
+      (t, r) => {
+        JSON.stringify(t) !== JSON.stringify(r) && s();
+      },
+      { deep: !0 }
+    ), c(u, s), b(() => {
+      x(), window.addEventListener("resize", p);
+    }), L(() => {
+      window.removeEventListener("resize", p), o == null || o.dispose(), o = null;
+    }), (t, r) => (v(), F("div", w({
+      ref_key: "chartContainer",
+      ref: l
+    }, t.$attrs, { class: "echarts-container" }), null, 16));
+  }
+}, g = /* @__PURE__ */ _(D, [["__scopeId", "data-v-08f560f1"]]);
+g.install = (i) => {
+  i.component("StacketColumnDiagram", g);
+};
+export {
+  g as default
+};