smart-web-ui 1.0.1 → 1.0.2

package/dist/SplitPieChart.js

@@ -1,294 +0,0 @@
-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

@@ -1,345 +0,0 @@
-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
-};