smart-web-ui 1.0.0 → 1.0.1

package/dist/GradientPieChart.js

@@ -0,0 +1,501 @@
+import { ref as H, computed as N, watch as x, onMounted as R, onBeforeUnmount as V, openBlock as I, createElementBlock as O, mergeProps as A, nextTick as E } from "vue";
+import { i as G } from "./chunks/index-CBkwld9S.js";
+import { _ as M } from "./chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+import { m as J } from "./chunks/merge-H4ZkNr1T.js";
+const Z = {
+  __name: "GradientPieChart",
+  props: {
+    data: {
+      type: Array,
+      required: !0
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    colorData: {
+      type: Array,
+      default: () => ["#438AF4", "#a1ffcb", "#f69d7b", "#b9e5ff", "#c392bb", "#65d1f8"]
+    },
+    zoomKey: {
+      type: String,
+      // 'none' | 'ctrl' | 'alt' | 'shift'
+      default: "ctrl"
+      // 默认按住 Ctrl 键缩放
+    },
+    // 颜色
+    colorData: {
+      type: Array,
+      default: () => [
+        {
+          color1: "rgba(31,144,255,1)",
+          color2: "rgba(31,144,255,0.8)"
+        },
+        {
+          color1: "rgba(161,255,203,1)",
+          color2: "rgba(161,255,203,0.8)"
+        },
+        {
+          color1: "rgba(254,108,108,1)",
+          color2: "rgba(254,108,108,0.8)"
+        },
+        {
+          color1: "rgba(254,195,108,1)",
+          color2: "rgba(254,195,108,0.8)"
+        },
+        {
+          color1: "rgba(169,105,255,1)",
+          color2: "rgba(169,105,255,0.8)"
+        }
+      ]
+    },
+    // 移入提示框背景颜色
+    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
+    },
+    // 图例区域总高度
+    itemHeight: {
+      type: Number,
+      default: 80
+    },
+    // 初始顶部位置（从底部开始）
+    topPosition: {
+      type: Number,
+      default: 95
+    },
+    // legend数据相对右侧位置
+    legendRight: {
+      type: String,
+      default: "0%"
+    },
+    // legend图例宽度
+    legendWidth: {
+      type: Number,
+      default: 180
+    },
+    // legend图例色块宽度
+    legendItemWidth: {
+      type: Number,
+      default: 14
+    },
+    // legend图例色块高度
+    legendItemHeight: {
+      type: Number,
+      default: 14
+    },
+    // legend整体宽度
+    textStyleWidth: {
+      type: Number,
+      default: 130
+    },
+    // legend名称字体大小
+    legendNameFontSize: {
+      type: Number,
+      default: 13
+    },
+    // legend名称字体颜色
+    legendNameColor: {
+      type: String,
+      default: "#fff"
+    },
+    // legend名称padding值
+    legendNamePadding: {
+      type: Array,
+      default: [0, 0, 0, 4]
+    },
+    // legend value值字体大小
+    legendValueFontSize: {
+      type: Number,
+      default: 15
+    },
+    // legend value值字体粗度
+    legendValuefontWeight: {
+      type: Number,
+      default: 700
+    },
+    // 单位靠右侧距离
+    graphicRight: {
+      type: String,
+      default: "18%"
+    },
+    // 单位靠顶部距离
+    graphicTop: {
+      type: String,
+      default: "3"
+    },
+    // 单位文字
+    graphicText: {
+      type: String,
+      default: "单位：管径(mm)"
+    },
+    // 单位字体大小
+    graphicFontSize: {
+      type: Number,
+      default: 14
+    },
+    // 单位字体粗度
+    graphicFontWeight: {
+      type: Number,
+      default: 400
+    },
+    // 单位字体颜色
+    graphicColor: {
+      type: String,
+      default: "#fff"
+    },
+    // 圆环大小数据
+    radiusData: {
+      type: Array,
+      default: () => ["27%", "50%"]
+    },
+    // 圆环位置内圆环
+    centerDataN: {
+      type: Array,
+      default: () => ["50%", "57%"]
+    },
+    // 圆环位置外圆环
+    centerDataW: {
+      type: Array,
+      default: () => ["50%", "75%"]
+    },
+    // 中心文字总数
+    total: {
+      type: String,
+      default: "1,078"
+    },
+    // 中心文字单位
+    centerName: {
+      type: String,
+      default: "数据/元"
+    },
+    // 总数字体大小
+    totalFontSize: {
+      type: Number,
+      default: 32
+    },
+    // 总数字体颜色
+    totalColor: {
+      type: String,
+      default: "#fff"
+    },
+    // 总数字体大小
+    centerNameFontSize: {
+      type: Number,
+      default: 14
+    },
+    // 总数字体颜色
+    centerNameColor: {
+      type: String,
+      default: "#fff"
+    },
+    // 中间文字靠左距离
+    titleLeft: {
+      type: String,
+      default: "103"
+    },
+    // 中间文字靠顶部距离
+    titleTop: {
+      type: String,
+      default: "38%"
+    },
+    // lengend后面文案
+    legendFormatter: {
+      type: String,
+      default: "%"
+    },
+    // lengend前面文案
+    legendFormatterFront: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(d) {
+    const t = d, u = H(null);
+    let l = null;
+    const w = N(() => {
+      const a = t.data, r = t.colorData, p = a.reduce((e, o) => (e += o.value, e), 0), h = 2, s = Math.floor(p / (100 / h)), T = h + 0, S = Math.floor(p / (150 / T)), c = p + s * a.length, D = (e, o) => {
+        if (e = e + o, e <= 90)
+          return -e;
+        if (e <= 180 && e > 90)
+          return 180 - e;
+        if (e < 270 && e > 180)
+          return 180 - e;
+        if (e < 360 && e >= 270)
+          return 360 - e;
+      }, P = a.reduce((e, o, n) => {
+        const F = 360 * (e.reduce((C, B) => (C += B.value, C), 0) / c), L = 360 * (o.value / c) / 2;
+        return console.log(o.value, "item.value"), e.push(
+          {
+            name: o.name,
+            value: o.value,
+            itemStyle: {
+              color: r[n].color1
+            },
+            label: {
+              lineHeight: 80,
+              rotate: D(F, L)
+            }
+          },
+          {
+            name: "",
+            value: s,
+            itemStyle: {
+              color: "transparent",
+              opacity: 0
+            },
+            label: {
+              show: !1
+            },
+            labelLine: {
+              show: !1
+            }
+          }
+        ), console.log(e, "ar"), e;
+      }, []), g = S - s, $ = a.reduce((e, o, n) => (e.push(
+        {
+          name: o.name,
+          value: o.value - g,
+          itemStyle: {
+            color: r[n].color2
+          },
+          label: { color: o.color },
+          tooltip: {
+            show: !0,
+            formatter: function(i) {
+              return i.value - 10, `
+            <div style="display: flex; align-items: center;">
+                <!-- 假设您有特定的类来表示圆点，这里使用一个简单的 span 来模拟 -->
+                <span style="border-radius: 50%; width: 15px; height: 15px; background-color: ${i.color}; margin-right: 8px;"></span>
+                <div style="font-size:${t.tooltipTextFontSize};color:${t.tooltipTextColor};font-family:'PingFang SC">${i.name}&nbsp;&nbsp;&nbsp;&nbsp;</div>
+                <div style="font-size:${t.tooltipTextFontSize};color:${t.tooltipTextColor};font-family:'PingFang SC"> ${new Intl.NumberFormat().format(
+                i.value + g
+              )}</div>
+            </div>
+        `;
+            }
+          }
+        },
+        {
+          name: "",
+          value: S,
+          itemStyle: {
+            color: "transparent",
+            opacity: 0
+          },
+          tooltip: {
+            show: !1
+          },
+          label: {
+            show: !1
+          },
+          labelLine: {
+            show: !1
+          }
+        }
+      ), e), []), b = [], _ = a.length, k = t.itemHeight / _;
+      let v = t.topPosition;
+      return a.forEach((e, o) => {
+        v -= k;
+        const n = r[o].color1 ? r[o].color1 : "#65d1f8";
+        b.push({
+          top: `${v}%`,
+          right: t.legendRight,
+          orient: "vertical",
+          // 改变排列方式
+          icon: "roundRect",
+          // 改变legend小图标形状
+          width: t.legendWidth,
+          itemWidth: t.legendItemWidth,
+          // 设置宽度
+          itemHeight: t.legendItemHeight,
+          // 设置高度
+          formatter: (i) => `{name|${i}}{value|${t.legendFormatterFront}${e.value}${t.legendFormatter}}`,
+          textStyle: {
+            width: t.textStyleWidth,
+            align: "left",
+            verticalAlign: "middle",
+            rich: {
+              name: {
+                fontSize: t.legendNameFontSize,
+                fontFamily: "PingFang SC",
+                align: "left",
+                color: t.legendNameColor,
+                // name颜色为白色
+                padding: t.legendNamePadding
+              },
+              value: {
+                fontSize: t.legendValueFontSize,
+                fontFamily: "D-DIN",
+                align: "right",
+                color: n,
+                fontWeight: t.legendValuefontWeight
+              }
+            }
+          },
+          data: [
+            {
+              name: e.name,
+              borderWidth: 0
+            }
+          ]
+        });
+      }), {
+        tooltip: {
+          show: !0,
+          backgroundColor: t.tooltipBgColor,
+          borderColor: t.tooltipBorderColor,
+          textStyle: {
+            color: t.tooltipTextColor,
+            fontSize: t.tooltipTextFontSize,
+            fontFamily: "PingFang SC"
+          }
+        },
+        graphic: [
+          {
+            cursor: "default",
+            type: "text",
+            right: t.graphicRight,
+            top: t.graphicTop,
+            style: {
+              text: t.graphicText,
+              fontSize: t.graphicFontSize,
+              fontFamily: "PingFang SC",
+              fontWeight: t.graphicFontWeight,
+              fill: t.graphicColor
+            }
+          }
+        ],
+        series: [
+          {
+            type: "pie",
+            label: {
+              show: !1
+            },
+            labelLine: {
+              show: !1
+            },
+            center: t.radiusData,
+            radius: t.centerDataN,
+            data: P
+          },
+          {
+            type: "pie",
+            startAngle: -360 * (g / 2 / c) + 90,
+            center: t.radiusData,
+            radius: t.centerDataW,
+            itemStyle: {
+              opacity: 0.3
+            },
+            label: {
+              show: !1
+            },
+            labelLine: {
+              show: !1
+            },
+            data: $
+          }
+        ],
+        title: {
+          text: t.total,
+          subtext: t.centerName,
+          textAlign: "center",
+          textStyle: {
+            color: t.totalColor,
+            fontSize: t.totalFontSize,
+            fontFamily: "D-DIN"
+          },
+          subtextStyle: {
+            fontSize: t.centerNameFontSize,
+            color: t.centerNameColor,
+            fontFamily: "PingFang SC"
+          },
+          left: t.titleLeft,
+          top: t.titleTop
+        },
+        legend: b,
+        // // 数据缩放配置
+        // dataZoom: [
+        //   {
+        //     type: "inside", // 内置型数据缩放组件
+        //     xAxisIndex: 0, // 控制第一个 x 轴
+        //     // 根据 zoomKey 的值设置是否需要按键触发缩放
+        //     zoomOnMouseWheel: props.zoomKey === "none" ? true : props.zoomKey,
+        //     moveOnMouseMove: true, // 允许鼠标拖动平移
+        //     moveOnMouseWheel: true, // 允许鼠标滚轮平移
+        //     preventDefaultMouseMove: false, // 允许默认滚动行为
+        //     throttle: 50, // 操作节流时间
+        //     start: 0,
+        //     end:
+        //       (props.data && props.data.length) > 30
+        //         ? props.data.length / 1.7
+        //         : (props.data && props.data.length) > 23
+        //         ? props.data.length / 1.5
+        //         : (props.data && props.data.length) > 13
+        //         ? 50
+        //         : (props.data && props.data.length) > 7
+        //         ? 70
+        //         : 100,
+        // maxSpan: 80, // 最大缩放范围
+        // minSpan: 20, // 最小缩放范围
+        // },
+        // ],
+        animation: !0
+        // 禁用动画提升性能
+      };
+    }), m = N(
+      () => J({}, w.value, t.options)
+    ), W = () => {
+      u.value && (l = G(
+        u.value,
+        {},
+        {
+          renderer: "svg"
+        }
+      ), f(), l.dispatchAction({
+        type: "takeGlobalCursor",
+        key: "dataZoomSelect",
+        dataZoomSelectActive: !0
+      }));
+    }, f = () => {
+      l && (l.setOption(m.value, !0), E(() => l.resize()));
+    }, y = () => {
+      l == null || l.resize({ animation: { duration: 300 } });
+    };
+    return x(
+      () => t.data,
+      (a, r) => {
+        JSON.stringify(a) !== JSON.stringify(r) && f();
+      },
+      { deep: !0 }
+    ), x(m, f), R(() => {
+      W(), window.addEventListener("resize", y);
+    }), V(() => {
+      window.removeEventListener("resize", y), l == null || l.dispose(), l = null;
+    }), (a, r) => (I(), O("div", A({
+      ref_key: "chartContainer",
+      ref: u
+    }, a.$attrs, { class: "echarts-container" }), null, 16));
+  }
+}, z = /* @__PURE__ */ M(Z, [["__scopeId", "data-v-4b135200"]]);
+z.install = (d) => {
+  d.component("GradientPieChart", z);
+};
+export {
+  z as default
+};

package/dist/HikPlayer.js

@@ -0,0 +1,10 @@
+import { H as o } from "./chunks/HikPlayer-DKfQRkh6.js";
+const e = {
+  HikPlayer: o
+}, n = (t) => {
+  t.component("HikPlayer", o);
+};
+export {
+  e as default,
+  n as install
+};