hfn-components 0.6.1 → 0.6.2

package/es/utils/chart.mjs

@@ -0,0 +1,197 @@
+const legendEnterOperate = (options, name) => {
+  options.series.forEach((series) => {
+    if (series.name === name) {
+      if (series.type === "line") {
+        if (series.lineStyle) {
+          series.lineStyle.opacity = 1;
+        } else {
+          series.lineStyle = {
+            opacity: 1
+          };
+        }
+      } else if (series.type === "bar") {
+        if (series.itemStyle) {
+          series.itemStyle.opacity = 1;
+        } else {
+          series.itemStyle = {
+            opacity: 1
+          };
+        }
+      }
+    } else {
+      if (series.type === "line") {
+        if (series.lineStyle) {
+          series.lineStyle.opacity = 0.1;
+        } else {
+          series.lineStyle = {
+            opacity: 0.1
+          };
+        }
+      } else if (series.type === "bar") {
+        if (series.itemStyle) {
+          series.itemStyle.opacity = 0.1;
+        } else {
+          series.itemStyle = {
+            opacity: 0.1
+          };
+        }
+      }
+    }
+  });
+};
+const legendLeaveOperate = (options) => {
+  options.series.forEach((series) => {
+    if (series.type === "line") {
+      if (series.lineStyle) {
+        series.lineStyle.opacity = 1;
+      } else {
+        series.lineStyle = {
+          opacity: 1
+        };
+      }
+    } else if (series.type === "bar") {
+      if (series.itemStyle) {
+        series.itemStyle.opacity = 1;
+      } else {
+        series.itemStyle = {
+          opacity: 1
+        };
+      }
+    }
+  });
+};
+const setEchartXAxis = (options, type, xAxisData) => {
+  if (type === "category") {
+    const xAxis = [...xAxisData];
+    options.xAxis = {
+      type,
+      data: xAxis,
+      boundaryGap: true,
+      axisTick: {
+        alignWithLabel: true
+      }
+    };
+  } else if (type === "time") {
+    options.xAxis = {
+      type,
+      minInterval: 24 * 60 * 60 * 1e3,
+      axisLine: {
+        onZero: false
+      }
+    };
+  }
+};
+const setEchartYAxis = (options, props) => {
+  options.yAxis = {
+    type: "value",
+    axisLabel: {
+      show: true,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      formatter: function(val) {
+        return (props.yAxisUnit === "%" ? val > 0 ? "+" : "" : "") + parseFloat(val.toFixed(props.floatNumber)) + props.yAxisUnit;
+      }
+    },
+    ...props.yAxisObj
+  };
+};
+const setEchartTitle = (options, props) => {
+  options.title = [
+    {
+      left: "left",
+      text: props.titleText,
+      itemGap: 0,
+      textStyle: {
+        fontSize: 12,
+        fontWeight: "normal"
+      }
+    },
+    {
+      left: "right",
+      subtext: props.titleText2,
+      itemGap: 0
+    }
+  ];
+};
+const setEchartTooltip = (options, props) => {
+  options.tooltip = {
+    trigger: "axis",
+    // tooltip提示框格式自定义
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    formatter: function(paramItems) {
+      let html = "";
+      if (Array.isArray(paramItems)) {
+        const params = paramItems.filter((item) => item.data !== void 0 && item.data !== null);
+        if (params.length === 0) return "";
+        if (props.chartType === "category") {
+          params.sort((a, b) => b.value - a.value);
+        } else {
+          params.sort((a, b) => {
+            if (Array.isArray(a.value) && Array.isArray(b.value)) {
+              return props.collation === "des" ? b.value[1] - a.value[1] : a.value[1] - b.value[1];
+            } else {
+              return 0;
+            }
+          });
+        }
+        html += `<div>${props.chartType === "category" ? params[0].name : Array.isArray(params[0].value) ? params[0].value[0] : ""}</div>`;
+        if (params.length > 30) html += '<div style="display: flex;">';
+        const len = Math.ceil(params.length / 3);
+        for (let i = 0; i < params.length; i++) {
+          if ((i + 1) % len === 1 && params.length > 30) {
+            html += '<div style="display: flex; flex-direction: column;">';
+          }
+          if (params[i].value === void 0 || params[i].value === null) ; else {
+            html += '<div style="display: flex;align-items:center">';
+            html += `<span 
+                        style="display:inline-block;
+                              margin-right:5px;
+                              border-radius:10px;
+                              width:10px;height:10px;
+                              background-color:${params[i].color};
+                              ">
+                      </span>`;
+            if (props.isReturn) {
+              if (
+                // params[i].seriesId === 'excess' ||
+                params[i].seriesName === "\u7D2F\u8BA1\u8D85\u989D"
+              ) {
+                html += `<span style='color:${params[i].color}'>
+                        ${params[i].seriesName}</span>\uFF1A${params[i].value[1].toFixed(2)}%
+                      `;
+              } else if (props.chartType === "category") {
+                console.log(props.auxiliaryData);
+                html += `<span style='color:${params[i].color}'>
+                ${params[i].seriesName}</span>\uFF1A${props.auxiliaryData[params[i].seriesName][params[0].name]}(${params[i].value || params[i].value === 0 ? Number(params[i].value).toFixed(props.floatNumber) : ""}%)
+              `;
+              } else {
+                html += `<span style='color:${params[i].color}'>${params[i].seriesName}</span>\uFF1A${params[i].value[2]?.toFixed(props.floatNumber)}\uFF08${params[i].value[1] > 0 ? "+" : ""}${params[i].value[1]}%\uFF09`;
+              }
+            } else {
+              if (props.chartType === "category") {
+                html += `<span style='color:${params[i].color}'>
+                      ${params[i].seriesName.includes("series") ? params[i].name : params[i].seriesName}
+                      </span>\uFF1A
+                      ${params[i].value.toFixed(props.floatNumber)}${props.tooltipUnit}
+                      `;
+              } else {
+                html += `<span style='color:${params[i].color}'>${params[i].seriesName}</span>\uFF1A${params[i].value[1]?.toFixed(props.floatNumber)}${props.tooltipUnit}`;
+              }
+            }
+            html += "</div>";
+          }
+          if ((i + 1) % len === 0 && params.length > 30) {
+            html += "</div>";
+          }
+        }
+        if (params.length > 30) html += "</div>";
+      }
+      return html;
+    },
+    textStyle: {
+      color: "rgba(0,0,0,0.7)"
+      // 设置文字颜色
+    }
+  };
+};
+
+export { legendEnterOperate, legendLeaveOperate, setEchartTitle, setEchartTooltip, setEchartXAxis, setEchartYAxis };

package/es/utils/common.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from 'vue';
+export type SFCWithInstall<T> = T & Plugin;
+export declare const withInstall: <T, E extends Record<string, any>>(main: T, extra?: E) => SFCWithInstall<T> & E;

package/es/utils/common.mjs

@@ -0,0 +1,15 @@
+const withInstall = (main, extra) => {
+  main.install = (app) => {
+    for (const comp of [main, ...Object.values(extra ?? {})]) {
+      app.component(comp.name, comp);
+    }
+  };
+  if (extra) {
+    for (const [key, comp] of Object.entries(extra)) {
+      main[key] = comp;
+    }
+  }
+  return main;
+};
+
+export { withInstall };

package/es/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './common';
+export * from './table';
+export * from './tool';
+export * from './chart';

package/es/utils/index.mjs

@@ -0,0 +1,4 @@
+export { withInstall } from './common.mjs';
+export { handleData, handleText } from './table.mjs';
+export { dataHandle, splitK } from './tool.mjs';
+export { legendEnterOperate, legendLeaveOperate, setEchartTitle, setEchartTooltip, setEchartXAxis, setEchartYAxis } from './chart.mjs';

package/es/utils/table.d.ts

@@ -0,0 +1,2 @@
+export declare const handleData: (value: any, type: string) => string | number;
+export declare const handleText: (value: any, type: string) => any;

package/es/utils/table.mjs

@@ -0,0 +1,31 @@
+import { splitK } from './tool.mjs';
+
+const handleData = (value, type) => {
+  if (isNaN(parseFloat(value))) return "-";
+  let val = parseFloat(value);
+  if (type.includes("percent")) {
+    val = val * 100;
+  }
+  const floatMatch = type.match(/float(\d+)/);
+  if (floatMatch) {
+    const precision = Number(floatMatch[1]);
+    val = val.toFixed(precision);
+  }
+  if (type.includes("splitK")) {
+    val = splitK(val);
+  }
+  if (type.includes("sign")) {
+    val = Number(val) > 0 ? "+" + val : val;
+  }
+  if (type.includes("percent")) {
+    val = val + "%";
+  }
+  return val;
+};
+const handleText = (value, type) => {
+  if (type === "name") {
+    return value;
+  }
+};
+
+export { handleData, handleText };

package/es/utils/tool.d.ts

@@ -0,0 +1,2 @@
+export declare function dataHandle(val: any, isPer: boolean, floatNum: number): any;
+export declare function splitK(num: string | number): string;

package/es/utils/tool.mjs

@@ -0,0 +1,42 @@
+function dataHandle(val, isPer, floatNum) {
+  val = parseFloat(val);
+  if (isNaN(val)) {
+    return "-";
+  } else {
+    if (isPer) {
+      val = val * 100;
+    }
+    if (Number(val.toFixed(floatNum)) === 0) {
+      const a = 0;
+      return a.toFixed(floatNum);
+    } else {
+      return val.toFixed(floatNum);
+    }
+  }
+}
+function splitK(num) {
+  let decimal = String(num).split(".")[1] || "";
+  if (decimal === "") {
+    decimal = "00";
+  }
+  const tempArr = [];
+  const revNumArr = String(num).split(".")[0].split("").reverse();
+  const mark = revNumArr[revNumArr.length - 1];
+  if (mark === "-") {
+    revNumArr.splice(-1, 1);
+  }
+  for (const i in revNumArr) {
+    tempArr.push(revNumArr[i]);
+    const index = parseFloat(i);
+    if ((index + 1) % 3 === 0 && Number(i) !== revNumArr.length - 1) {
+      tempArr.push(",");
+    }
+  }
+  if (mark === "-") {
+    tempArr.push(mark);
+  }
+  const zs = tempArr.reverse().join("");
+  return decimal ? zs + "." + decimal : zs;
+}
+
+export { dataHandle, splitK };

package/global.d.ts

@@ -0,0 +1,14 @@
+// declare module '*.vue' {
+//     import { defineComponent  } from 'vue'
+//     const componentOptions:ReturnType<typeof defineComponent>
+//     export default componentOptions
+// }
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    HtTable: (typeof import('hfn-components'))['HtTable']
+  }
+  interface ComponentCustomProperties {
+    // 你可以在这里添加自定义属性
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hfn-components",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "",
   "main": "index.ts",
   "module": "es/index.mjs",

package/theme-chalk/ht-chart.css

@@ -0,0 +1 @@
+.echart-box{display:flex;flex-direction:column;height:100%;position:relative;width:100%}.echart-content{flex:auto}.echart-lenged{box-sizing:border-box;display:flex;flex-wrap:wrap;font-size:12px;height:auto;margin-top:6px;padding-right:22px;position:relative;width:100%;z-index:999}.bg-span{height:2px;width:14px}.bg-span,.bg-span-bar{display:inline-block;margin-right:6px}.bg-span-bar{border-radius:2px;height:10px;width:16px}.span-box{cursor:pointer;margin-left:5px;margin-right:6px}.noData,.span-box{align-items:center;display:flex}.noData{bottom:0;color:#ccc;font-size:16px;justify-content:center;position:absolute}._100,.noData{height:100%;width:100%}

package/theme-chalk/ht-table.css

@@ -0,0 +1 @@
+.header-text-wrap{line-height:1.5;white-space:pre-line}.header-only-border .el-table,.header-only-border .el-table__inner-wrapper,.header-only-border.el-table--border{border:none!important}.header-only-border .el-table:after,.header-only-border .el-table:before,.header-only-border .el-table__inner-wrapper:after,.header-only-border .el-table__inner-wrapper:before{display:none!important}.header-only-border .el-table__cell{border:none!important}.header-only-border .el-table__header .el-table__cell{border:none!important;position:relative}.header-only-border .el-table__header .el-table__cell:after{background-color:#dcdfe6;content:"";height:40%;position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px}.header-only-border .el-table__header .el-table__cell:last-child:after{display:none}

package/theme-chalk/ht-target.css

@@ -0,0 +1 @@
+.dialog{padding:24px!important;width:860px!important}.factor-content{display:flex;flex-direction:column;flex-wrap:wrap;height:380px;width:100%}.factor_item{width:33.33%}.check_item,.factor_item{display:flex;margin-bottom:10px}.check_item{justify-content:space-between}.flex-alignCnter{align-items:center;cursor:pointer;display:flex}.target-head{display:grid;grid:auto/repeat(5,1fr)}.flow-col{border-left:1px solid #e8e8e8;height:520px;overflow-y:auto;padding-left:10px}

package/theme-chalk/index.css

@@ -0,0 +1 @@
+.echart-box{display:flex;flex-direction:column;height:100%;position:relative;width:100%}.echart-content{flex:auto}.echart-lenged{box-sizing:border-box;display:flex;flex-wrap:wrap;font-size:12px;height:auto;margin-top:6px;padding-right:22px;position:relative;width:100%;z-index:999}.bg-span{height:2px;width:14px}.bg-span,.bg-span-bar{display:inline-block;margin-right:6px}.bg-span-bar{border-radius:2px;height:10px;width:16px}.span-box{cursor:pointer;margin-left:5px;margin-right:6px}.noData,.span-box{align-items:center;display:flex}.noData{bottom:0;color:#ccc;font-size:16px;justify-content:center;position:absolute}._100,.noData{height:100%;width:100%}.dialog{padding:24px!important;width:860px!important}.factor-content{display:flex;flex-direction:column;flex-wrap:wrap;height:380px;width:100%}.factor_item{width:33.33%}.check_item,.factor_item{display:flex;margin-bottom:10px}.check_item{justify-content:space-between}.flex-alignCnter{align-items:center;cursor:pointer;display:flex}.target-head{display:grid;grid:auto/repeat(5,1fr)}.flow-col{border-left:1px solid #e8e8e8;height:520px;overflow-y:auto;padding-left:10px}.header-text-wrap{line-height:1.5;white-space:pre-line}.header-only-border .el-table,.header-only-border .el-table__inner-wrapper,.header-only-border.el-table--border{border:none!important}.header-only-border .el-table:after,.header-only-border .el-table:before,.header-only-border .el-table__inner-wrapper:after,.header-only-border .el-table__inner-wrapper:before{display:none!important}.header-only-border .el-table__cell{border:none!important}.header-only-border .el-table__header .el-table__cell{border:none!important;position:relative}.header-only-border .el-table__header .el-table__cell:after{background-color:#dcdfe6;content:"";height:40%;position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px}.header-only-border .el-table__header .el-table__cell:last-child:after{display:none}

package/theme-chalk/src/chart.scss

@@ -0,0 +1,58 @@
+.echart-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.echart-content {
+  flex: auto;
+}
+.echart-lenged {
+  width: 100%;
+  height: auto;
+  margin-top: 6px;
+  padding-right: 22px;
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 12px;
+  position: relative;
+  z-index: 999;
+}
+.bg-span {
+  display: inline-block;
+  width: 14px;
+  height: 2px;
+  margin-right: 6px;
+}
+.bg-span-bar {
+  display: inline-block;
+  width: 16px;
+  height: 10px;
+  border-radius: 2px;
+  margin-right: 6px;
+}
+.span-box {
+  margin-left: 5px;
+  margin-right: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+.noData {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  bottom: 0px;
+  color: #ccc;
+}
+
+._100 {
+  width: 100%;
+  height: 100%;
+}

package/theme-chalk/src/index.scss

@@ -0,0 +1,3 @@
+@use './chart.scss';
+@use './target.scss';
+@use './table.scss';

package/theme-chalk/src/table.scss

@@ -0,0 +1,45 @@
+// 表头文字换行样式
+.header-text-wrap {
+  white-space: pre-line;
+  line-height: 1.5;
+}
+
+// 隐藏所有边框，让表格看起来和未设置 border 时一样
+.header-only-border.el-table--border,
+.header-only-border .el-table__inner-wrapper,
+.header-only-border .el-table {
+  border: none !important;
+}
+
+.header-only-border .el-table__inner-wrapper::before,
+.header-only-border .el-table__inner-wrapper::after,
+.header-only-border .el-table::before,
+.header-only-border .el-table::after {
+  display: none !important;
+}
+
+.header-only-border .el-table__cell {
+  border: none !important;
+}
+
+// 表头列分隔线 - 使用伪元素实现居中效果
+.header-only-border .el-table__header .el-table__cell {
+  position: relative;
+  border: none !important;
+}
+
+.header-only-border .el-table__header .el-table__cell::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1px;
+  height: 40%;
+  background-color: #dcdfe6;
+}
+
+// 最后一列表头不显示分隔线
+.header-only-border .el-table__header .el-table__cell:last-child::after {
+  display: none;
+}

package/theme-chalk/src/target.scss

@@ -0,0 +1,39 @@
+.dialog {
+  width: 860px !important;
+  padding: 24px !important;
+}
+.factor-content {
+  width: 100%;
+  height: 380px;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+}
+.factor_item {
+  width: 33.33%;
+  margin-bottom: 10px;
+  display: flex;
+}
+.check_item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.flex-alignCnter {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.target-head {
+  display: grid; 
+  grid: auto / repeat(5, 1fr)
+}
+
+.flow-col {
+  height: 520px; 
+  overflow-y: auto;
+  border-left: 1px solid #e8e8e8;
+  padding-left: 10px;
+}

package/component.ts

@@ -1,15 +0,0 @@
-// import { HtTable } from '@hfn-components/components/table'
-import { HtElTable } from '@hfn-components/components/elTable'
-import { HtChart } from '@hfn-components/components/chart'
-import { HtPieChart } from '@hfn-components/components/pieChart'
-import { HtTarget } from '@hfn-components/components'
-
-import type { Plugin } from 'vue'
-
-export default [
-  // HtTable,
-  HtChart,
-  HtElTable,
-  HtPieChart,
-  HtTarget
-] as Plugin[]

package/defaults.ts

@@ -1,5 +0,0 @@
-import { makeInstaller } from './make-installer'
-import Components from './component'
-import Plugins from './plugin'
-
-export default makeInstaller([...Components, ...Plugins])

package/index.ts

@@ -1,6 +0,0 @@
-import installer from './defaults'
-export * from './make-installer'
-export * from '@hfn-components/components'
-
-export const install = installer.install
-export default installer

package/make-installer.ts

@@ -1,17 +0,0 @@
-import type { App, Plugin } from 'vue'
-import { INSTALLED_KEY } from '@hfn-components/constants'
-
-export const makeInstaller = (components: Plugin[] = []) => {
-  const install = (app: App) => {
-    if (app[INSTALLED_KEY]) return
-
-    app[INSTALLED_KEY] = true
-    components.forEach(c => app.use(c))
-
-    //   if (options) provideGlobalConfig(options, app, true)
-  }
-
-  return {
-    install
-  }
-}

package/plugin.ts

@@ -1 +0,0 @@
-export default []