smart-web-ui 1.0.0 → 1.0.1

package/dist/SingleLineChart.js

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

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