smart-web-ui 1.0.1 → 1.0.2

package/dist/SingleLineChart.js

@@ -1,405 +0,0 @@
-import { ref as T, computed as c, watch as m, onMounted as F, onBeforeUnmount as z, openBlock as L, createElementBlock as w, mergeProps as v, nextTick as A } from "vue";
-import { i as B } from "./chunks/index-CBkwld9S.js";
-import { _ as E } from "./chunks/_plugin-vue_export-helper-CHgC5LLL.js";
-import { m as N } from "./chunks/merge-H4ZkNr1T.js";
-const O = {
-  __name: "SingleLineChart",
-  props: {
-    data: {
-      type: Array,
-      required: !0
-    },
-    xData: {
-      type: Array,
-      required: !0
-    },
-    colorList: {
-      type: Array,
-      default: () => [
-        "rgba(255, 153, 0, 1)",
-        "#FF2E2E",
-        "#07D1FA",
-        "#FFD15C",
-        "#20E6A4"
-      ]
-    },
-    areaColorList: {
-      type: Array,
-      default: () => [
-        { to: "rgba(255,153,0, 0.2)", from: "rgba(255,153,0, 0.7)" },
-        { to: "rgba(255, 46, 46, 0.2)", from: "rgba(255, 46, 46, 0.7)" },
-        { to: "rgba(7, 209, 250, 0.2)", from: "rgba(7, 209, 250, 0.7)" },
-        { to: "rgba(255, 209, 92, 0.2)", from: "rgba(255, 209, 92, 0.7)" },
-        { to: "rgba(32, 230, 164, 0.2)", from: "rgba(32, 230, 164, 0.7)" }
-      ]
-    },
-    options: {
-      type: Object,
-      default: () => ({})
-    },
-    // x轴文字长度
-    xTextLength: {
-      type: Number,
-      default: 5
-    },
-    // 横轴网格线是否显示
-    yLineShow: {
-      type: Boolean,
-      default: !0
-    },
-    // 横轴网格线格式
-    yLineType: {
-      type: String,
-      default: "dashed"
-      //solid实线dashed虚线dotted细点画线
-    },
-    zoomKey: {
-      type: String,
-      // 'none' | 'ctrl' | 'alt' | 'shift'
-      default: "ctrl"
-      // 默认按住 Ctrl 键缩放
-    },
-    legendType: {
-      type: Boolean,
-      default: !1
-    },
-    // legend块的宽度
-    legendItemWidth: {
-      type: Number,
-      default: 12
-    },
-    // legend块的高度
-    legendItemHeight: {
-      type: Number,
-      default: 12
-    },
-    // legend文字大小
-    legendTextFontSize: {
-      type: Number,
-      default: 12
-    },
-    // legend文字颜色
-    legendTextColor: {
-      type: String,
-      default: "#fff"
-    },
-    // 单位名称
-    YUnitText: {
-      type: String,
-      default: "单位：KWH"
-    },
-    // 单位文字大小
-    YUnitTextFontSize: {
-      type: Number,
-      default: 12
-    },
-    // 单位文字颜色
-    YUnitTextColor: {
-      type: String,
-      default: "#fff"
-    },
-    // Y轴刻度文字大小
-    YFontSize: {
-      type: Number,
-      default: 12
-    },
-    // Y轴名称颜色
-    YColor: {
-      type: String,
-      default: "#fff"
-    },
-    // 刻度颜色
-    scaleColor: {
-      type: String,
-      default: "#fff"
-    },
-    // 刻度宽度
-    scaleWidth: {
-      type: Number,
-      default: 2
-    },
-    // 刻度高度
-    scaleHeight: {
-      type: Number,
-      default: 5
-    },
-    // 纵轴线颜色
-    YLineColor: {
-      type: Array,
-      default: () => [
-        {
-          offset: 0,
-          color: "#526B8E00"
-          // 0% 处的颜色
-        },
-        {
-          offset: 0.5,
-          color: "#526B8E20"
-          // 100% 处的颜色
-        },
-        {
-          offset: 1,
-          color: "#526B8E20"
-          // 100% 处的颜色
-        }
-      ]
-    },
-    // 纵轴网格线类型
-    XLineType: {
-      type: String,
-      default: "solid"
-      //solid实线dashed虚线dotted细点画线
-    },
-    // 移入提示框背景颜色
-    tooltipBgColor: {
-      type: String,
-      default: "rgba(1, 13, 19, 0.6)"
-    },
-    // 移入提示框边框颜色
-    tooltipBorderColor: {
-      type: String,
-      default: "#ffffff40"
-    },
-    // 移入提示框文字颜色
-    tooltipTextColor: {
-      type: String,
-      default: "#ffffff"
-    },
-    // 移入提示框文字大小
-    tooltipTextFontSize: {
-      type: Number,
-      default: 12
-    },
-    // 移入纵轴hover线颜色
-    tooltipAxisPointerColor: {
-      type: String,
-      default: "#ffffff"
-    }
-  },
-  setup(a) {
-    const e = a, l = T(null);
-    let t = null;
-    const h = (r) => {
-      console.log(r, "ssssssssssssss");
-      const o = r.length;
-      return o > 30 ? o / 1.7 : o > 23 ? o / 1.5 : o > 13 ? 50 : o > 7 ? 70 : 100;
-    }, x = c(() => {
-      const r = e.data || [], o = e.xData || [], f = e.areaColorList || [
-        { to: "rgba(255,153,0, 0.2)", from: "rgba(255,153,0, 0.7)" },
-        { to: "rgba(255, 46, 46, 0.2)", from: "rgba(255, 46, 46, 0.7)" },
-        { to: "rgba(7, 209, 250, 0.2)", from: "rgba(7, 209, 250, 0.7)" },
-        { to: "rgba(255, 209, 92, 0.2)", from: "rgba(255, 209, 92, 0.7)" },
-        { to: "rgba(32, 230, 164, 0.2)", from: "rgba(32, 230, 164, 0.7)" }
-      ];
-      return {
-        color: e.colorList,
-        // 网格配置，设置图表上下左右的边距
-        grid: {
-          top: 50,
-          bottom: 30,
-          left: 40,
-          right: 20
-        },
-        tooltip: {
-          trigger: "axis",
-          backgroundColor: e.tooltipBgColor,
-          borderColor: e.tooltipBorderColor,
-          textStyle: {
-            color: e.tooltipTextColor,
-            fontSize: e.tooltipTextFontSize,
-            fontFamily: "PingFang SC"
-          },
-          axisPointer: {
-            lineStyle: {
-              width: 1,
-              // 线宽
-              type: "dashed",
-              // 线型
-              color: e.tooltipAxisPointerColor
-            }
-          }
-        },
-        // 图例配置，显示图表中不同系列的名称和颜色
-        legend: {
-          icon: "circle",
-          itemWidth: e.legendItemWidth,
-          itemHeight: e.legendItemHeight,
-          right: "5%",
-          // 图例相对于右侧的位置
-          top: "5%",
-          // 图例相对于顶部的位置
-          textStyle: {
-            color: e.legendTextColor,
-            fontSize: e.legendTextFontSize,
-            fontFamily: "PingFang SC"
-          }
-        },
-        xAxis: [
-          {
-            type: "category",
-            axisLine: {
-              //坐标轴轴线相关设置。数学上的x轴
-              show: !1,
-              lineStyle: {
-                color: e.scaleColor
-              }
-            },
-            splitLine: {
-              show: !0,
-              // 显示网格线
-              lineStyle: {
-                type: "dashed",
-                // 网格线类型，如虚线
-                color: "#526B8E"
-                // 网格线颜色
-              }
-            },
-            boundaryGap: !1,
-            axisLabel: {
-              align: "center",
-              fontSize: e.XTextFontSize,
-              color: e.XTextColor,
-              fontFamily: "PingFang SC"
-            },
-            axisTick: {
-              show: !0,
-              length: e.scaleHeight,
-              lineStyle: {
-                width: e.scaleWidth,
-                shadowOffsetX: e.shadowOffsetX,
-                shadowColor: e.shadowColor
-              }
-            },
-            data: e.xLabel
-          }
-        ],
-        yAxis: {
-          type: "value",
-          name: e.YUnitText,
-          nameTextStyle: {
-            color: e.YUnitTextColor,
-            fontSize: e.YUnitTextFontSize,
-            fontFamily: "PingFang SC"
-          },
-          splitLine: {
-            show: !0,
-            lineStyle: {
-              type: e.yLineType,
-              // 网格线类型，如虚线
-              color: "#526B8E"
-              // 网格线颜色
-            }
-          },
-          axisLabel: {
-            show: !0,
-            textStyle: {
-              fontSize: e.YFontSize,
-              color: e.YColor,
-              fontFamily: "PingFang SC"
-            }
-          },
-          axisTick: {
-            show: !1
-          }
-        },
-        series: r.map((d, u) => {
-          var p, g, y;
-          return {
-            name: d.name,
-            type: "line",
-            smooth: !0,
-            // symbol: "none",
-            showSymbol: !1,
-            // symbolSize: 8,
-            // zlevel: 3,
-            areaStyle: {
-              opacity: 0.8,
-              color: {
-                type: "linear",
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: ((p = f[u]) == null ? void 0 : p.from) || "transparent"
-                  },
-                  {
-                    offset: 1,
-                    color: ((g = f[u]) == null ? void 0 : g.to) || "transparent"
-                  }
-                ],
-                global: !1
-              }
-            },
-            data: ((y = d.data) == null ? void 0 : y.map((C) => C.value)) || []
-          };
-        }),
-        // 数据缩放配置
-        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: h(o)
-            // maxSpan: 40, // 最大缩放范围
-            // minSpan: 20, // 最小缩放范围
-          }
-        ],
-        animation: !0
-        // 禁用动画提升性能
-      };
-    }), i = c(
-      () => N({}, x.value, e.options)
-    ), b = () => {
-      l.value && (t = B(
-        l.value,
-        {},
-        {
-          renderer: "svg"
-        }
-      ), n(), t.dispatchAction({
-        type: "takeGlobalCursor",
-        key: "dataZoomSelect",
-        dataZoomSelectActive: !0
-      }));
-    }, n = () => {
-      t && (t.setOption(i.value, !0), A(() => t.resize()));
-    }, s = () => {
-      t == null || t.resize({ animation: { duration: 300 } });
-    };
-    return m(
-      () => e.data,
-      (r, o) => {
-        JSON.stringify(r) !== JSON.stringify(o) && n();
-      },
-      { deep: !0 }
-    ), m(i, n), F(() => {
-      b(), window.addEventListener("resize", s);
-    }), z(() => {
-      window.removeEventListener("resize", s), t == null || t.dispose(), t = null;
-    }), (r, o) => (L(), w("div", v({
-      ref_key: "chartContainer",
-      ref: l
-    }, r.$attrs, { class: "echarts-container" }), null, 16));
-  }
-}, S = /* @__PURE__ */ E(O, [["__scopeId", "data-v-08433724"]]);
-S.install = (a) => {
-  a.component("SingleLineChart", S);
-};
-export {
-  S as default
-};

package/dist/SplitPie.js

@@ -1,242 +0,0 @@
-import { ref as y, computed as h, watch as v, onMounted as I, onBeforeUnmount as w, openBlock as A, createElementBlock as _, mergeProps as k, nextTick as z } from "vue";
-import { i as P } from "./chunks/index-CBkwld9S.js";
-import { _ as L } from "./chunks/_plugin-vue_export-helper-CHgC5LLL.js";
-import { m as O } from "./chunks/merge-H4ZkNr1T.js";
-const B = {
-  __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(s) {
-    const r = s, d = y(null);
-    let e = null;
-    const x = h(() => ({
-      backgroundColor: "#000000",
-      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: r.data.flatMap((a, t) => {
-            if (a.value > 0) {
-              const n = Math.round(a.value / r.total * 100), o = [];
-              for (let l = 0; l < n; l++)
-                o.push(
-                  {
-                    value: 2,
-                    // 有颜色部分的宽度
-                    name: l,
-                    // ratio: item.ratio,
-                    itemStyle: {
-                      normal: { color: r.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 o;
-            }
-            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 g(a, t) {
-      if (!t)
-        return;
-      let n = -1, o = setInterval(m, 1e3);
-      function l() {
-        for (let u = 0; u < a.series[1].data.length; u++)
-          t.dispatchAction({
-            type: "downplay",
-            seriesIndex: 1,
-            dataIndex: u
-          });
-        t.dispatchAction({
-          type: "highlight",
-          seriesIndex: 1,
-          dataIndex: n
-        }), t.dispatchAction({
-          type: "showTip",
-          seriesIndex: 1,
-          dataIndex: n
-        });
-      }
-      t.on("mouseover", (i) => {
-        i.componentType !== "graphic" && (clearInterval(o), n = i.dataIndex, l());
-      }), t.on("mouseout", (i) => {
-        o && clearInterval(o), o = setInterval(m, 100);
-      }), t.on("dispose", () => {
-        clearInterval(o);
-      });
-      function m() {
-        const i = a.series[1].data.length;
-        n = (n + 1) % i, l();
-      }
-    }
-    const c = h(
-      () => O({}, x.value, r.options)
-    ), S = () => {
-      d.value && (e = P(
-        d.value,
-        {},
-        {
-          renderer: "svg"
-        }
-      ), p(), r.loop && g(c.value, e), e.dispatchAction({
-        type: "takeGlobalCursor",
-        key: "dataZoomSelect",
-        dataZoomSelectActive: !0
-      }));
-    }, p = () => {
-      e && (e.setOption(c.value, !0), z(() => e.resize()));
-    }, f = () => {
-      e == null || e.resize({ animation: { duration: 300 } });
-    };
-    return v(
-      () => r.data,
-      (a, t) => {
-        JSON.stringify(a) !== JSON.stringify(t) && p();
-      },
-      { deep: !0 }
-    ), v(c, p), I(() => {
-      S(), window.addEventListener("resize", f);
-    }), w(() => {
-      window.removeEventListener("resize", f), e == null || e.dispose(), e = null;
-    }), (a, t) => (A(), _("div", k({
-      ref_key: "chartContainer",
-      ref: d
-    }, a.$attrs, { class: "echarts-container" }), null, 16));
-  }
-}, b = /* @__PURE__ */ L(B, [["__scopeId", "data-v-1f0e1efc"]]);
-b.install = (s) => {
-  s.component("SplitPie", b);
-};
-export {
-  b as default
-};