hfn-components 0.3.7 → 0.3.9

package/dist/index.css

@@ -1 +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{display:flex;margin-bottom:10px;width:33.33%}.check_item{display:flex;justify-content:space-between}
+.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}.target-head{display:grid;grid:auto/repeat(5,1fr)}.factor-content{display:flex;flex-direction:column;flex-wrap:wrap;height:380px;width:100%}.factor_item{display:flex;margin-bottom:10px;width:33.33%}.check_item{display:flex;justify-content:space-between}.flex-alignCnter{align-items:center;cursor:pointer;display:flex}

package/es/components/htTarget/src/htTarget.vue.mjs

@@ -13,7 +13,32 @@ const _hoisted_3 = {
 };
 const _hoisted_4 = { class: "factor-content" };
 const _hoisted_5 = ["onClick"];
-const _hoisted_6 = { class: "dialog-footer" };
+const _hoisted_6 = /* @__PURE__ */ createElementVNode(
+  "svg",
+  {
+    t: "1736836637226",
+    class: "icon",
+    viewBox: "0 0 1024 1024",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    "p-id": "8732",
+    width: "15",
+    height: "15"
+  },
+  [
+    /* @__PURE__ */ createElementVNode("path", {
+      d: "M912.064 187.984L583.968 516.064l316.768 316.8-67.872 67.872-316.768-316.8-328.112 328.128-67.888-67.888 328.112-328.112L108.784 176.672l67.888-67.888 339.424 339.392L844.16 120.096l67.888 67.888z",
+      fill: "#bfbfbf",
+      "p-id": "8733"
+    })
+  ],
+  -1
+  /* HOISTED */
+);
+const _hoisted_7 = [
+  _hoisted_6
+];
+const _hoisted_8 = { class: "dialog-footer" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", null, [
     createVNode($setup["ElDialog"], {
@@ -23,13 +48,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onClose: _cache[5] || (_cache[5] = ($event) => $setup.emit("choiceCancel"))
     }, {
       footer: withCtx(() => [
-        createElementVNode("div", _hoisted_6, [
+        createElementVNode("div", _hoisted_8, [
           createVNode($setup["ElButton"], {
             onClick: $setup.confirmTarge,
             type: "primary"
           }, {
             default: withCtx(() => [
-              createTextVNode(" Confirm ")
+              createTextVNode(" \u786E\u8BA4 ")
             ]),
             _: 1
             /* STABLE */
@@ -65,7 +90,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                       createVNode($setup["ElRadioGroup"], {
                         modelValue: $setup.selectedHead,
                         "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $setup.selectedHead = $event),
-                        onChange: $setup.headChange
+                        onChange: $setup.headChange,
+                        class: "target-head"
                       }, {
                         default: withCtx(() => [
                           (openBlock(true), createElementBlock(
@@ -183,8 +209,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                         /* TEXT */
                       ),
                       createElementVNode("span", {
+                        class: "flex-alignCnter",
                         onClick: ($event) => $setup.deleteItem(item.key)
-                      }, "\u274C", 8, _hoisted_5)
+                      }, [..._hoisted_7], 8, _hoisted_5)
                     ]);
                   }),
                   128

package/es/components/htTarget/src/htTarget.vue2.mjs

@@ -73,10 +73,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         } else {
           selectedTree.value[headKey] = [val];
         }
-        const filterHead = TARGET_HEAD_KEY.filter((item) => item.key === headKey);
+        const filterHead = targetHead.value.filter((item) => item.key === headKey);
         const filterFoot = TARGET_END_KEY.filter((item) => item.key === val);
         const headName = filterHead.length > 0 ? filterHead[0].name : "";
         const footName = filterFoot.length > 0 ? filterFoot[0].name : "";
+        console.log(headKey);
         itemObj = {
           name: headName + footName,
           key: `${headKey}_${val}`,

package/es/components/pieChart/index.d.ts

@@ -46,9 +46,16 @@ export declare const HtPieChart: import("hfn-components/es/utils").SFCWithInstal
     echartOptions: any;
     chartResize: () => void;
     noData: import("vue").Ref<boolean>;
+    allLegend: import("vue").Ref<{
+        name: string;
+        lineType: string;
+        isShow: boolean;
+        color: string;
+    }[]>;
     drawGraph: () => void;
-    setLenged: () => void;
+    lengedDeal: () => void;
     setEchartTooltip: () => void;
+    legendStatus: (item: import("./src/HtPieChart.vue").Legend, index: number) => void;
     echartInit: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     readonly chartData: {

package/es/components/pieChart/src/HtPieChart.vue.d.ts

@@ -1,3 +1,9 @@
+export interface Legend {
+    name: string;
+    lineType: string;
+    isShow: boolean;
+    color: string;
+}
 declare const _default: import("vue").DefineComponent<{
     readonly chartData: {
         readonly type: import("vue").PropType<any[]>;
@@ -46,9 +52,16 @@ declare const _default: import("vue").DefineComponent<{
     echartOptions: any;
     chartResize: () => void;
     noData: import("vue").Ref<boolean>;
+    allLegend: import("vue").Ref<{
+        name: string;
+        lineType: string;
+        isShow: boolean;
+        color: string;
+    }[]>;
     drawGraph: () => void;
-    setLenged: () => void;
+    lengedDeal: () => void;
     setEchartTooltip: () => void;
+    legendStatus: (item: Legend, index: number) => void;
     echartInit: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     readonly chartData: {

package/es/components/pieChart/src/HtPieChart.vue.mjs

@@ -1,21 +1,59 @@
 import _sfc_main from './HtPieChart.vue2.mjs';
-import { openBlock, createElementBlock, createElementVNode, createCommentVNode } from 'vue';
+import { openBlock, createElementBlock, createElementVNode, createCommentVNode, Fragment, renderList, normalizeStyle, toDisplayString } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
 
 const _hoisted_1 = { class: "echart-box" };
-const _hoisted_2 = ["id"];
-const _hoisted_3 = {
+const _hoisted_2 = { class: "echart-lenged" };
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = ["id"];
+const _hoisted_5 = {
   key: 0,
   class: "noData"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", _hoisted_2, [
+      createCommentVNode('  @mouseover="legendEnter(index)"\n        @mouseleave="legendLeave()" '),
+      (openBlock(true), createElementBlock(
+        Fragment,
+        null,
+        renderList($setup.allLegend, (item, index) => {
+          return openBlock(), createElementBlock("div", {
+            class: "span-box mb10",
+            key: index,
+            onClick: ($event) => $setup.legendStatus(item, index)
+          }, [
+            createElementVNode(
+              "span",
+              {
+                class: "bg-span-bar",
+                style: normalizeStyle({ background: item.isShow ? item.color : "#ccc" })
+              },
+              null,
+              4
+              /* STYLE */
+            ),
+            createElementVNode(
+              "span",
+              {
+                style: normalizeStyle({ color: item.isShow ? "#000" : "#ccc" })
+              },
+              toDisplayString(item.name),
+              5
+              /* TEXT, STYLE */
+            )
+          ], 8, _hoisted_3);
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      ))
+    ]),
     createElementVNode("div", {
       class: "_100",
       id: _ctx.chartId
-    }, null, 8, _hoisted_2),
+    }, null, 8, _hoisted_4),
     createCommentVNode(" \u56FE\u4F8B\u5168\u7F6E\u7070\u76D2\u5B50 "),
-    $setup.noData ? (openBlock(), createElementBlock("div", _hoisted_3, "\u6682\u65E0\u6570\u636E")) : createCommentVNode("v-if", true)
+    $setup.noData ? (openBlock(), createElementBlock("div", _hoisted_5, "\u6682\u65E0\u6570\u636E")) : createCommentVNode("v-if", true)
   ]);
 }
 var htPieChart = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/libiluo/Desktop/company/component-library/packages/components/pieChart/src/HtPieChart.vue"]]);

package/es/components/pieChart/src/HtPieChart.vue2.mjs

@@ -42,27 +42,23 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       myChart.value.resize();
     };
     const noData = ref(false);
+    const allLegend = ref([]);
     const drawGraph = () => {
-      setLenged();
+      lengedDeal();
       setEchartTooltip();
       echartInit();
     };
-    const setLenged = () => {
-      echartOptions.legend = {
-        orient: "horizontal",
-        type: props.legendType,
-        icon: "circle",
-        formatter: props.legendFormatter() || ["{a|{name}}"].join("\n"),
-        center: ["50%", "70%"],
-        textStyle: {
-          height: 9,
-          rich: {
-            a: {
-              verticalAlign: "bottom"
-            }
-          }
-        }
-      };
+    const lengedDeal = () => {
+      allLegend.value = [];
+      props.chartData.forEach((item, index) => {
+        const data = {
+          name: item.name,
+          isShow: true,
+          lineType: item.type,
+          color: echartOptions.color[index % echartOptions.color.length]
+        };
+        allLegend.value.push(data);
+      });
     };
     const setEchartTooltip = () => {
       echartOptions.tooltip = {
@@ -77,6 +73,18 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         }
       };
     };
+    const legendStatus = (item, index) => {
+      const status = !item.isShow;
+      allLegend.value[index].isShow = status;
+      if (allLegend.value.every((item2) => item2.isShow === false)) {
+        noData.value = true;
+      } else {
+        noData.value = false;
+      }
+      myChart.value.setOption({
+        legend: { selected: { [item.name]: status } }
+      });
+    };
     const echartInit = () => {
       setTimeout(() => {
         if (!myChart.value) {
@@ -86,7 +94,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         myChart.value.setOption(echartOptions, true);
       }, 200);
     };
-    const __returned__ = { props, myChart, echartOptions, chartResize, noData, drawGraph, setLenged, setEchartTooltip, echartInit };
+    const __returned__ = { props, myChart, echartOptions, chartResize, noData, allLegend, drawGraph, lengedDeal, setEchartTooltip, legendStatus, echartInit };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }

package/es/constants/chartConfig.mjs

@@ -86,6 +86,46 @@ const BASIC_CHART_CONFIG = {
   series: []
 };
 const useBasicPieConfig = (floatNumber = 2) => ({
+  legend: {
+    show: false
+  },
+  color: [
+    "#C13431",
+    "#1E85D2",
+    "#FD984F",
+    "#63B9BB",
+    "#BBB162",
+    "#AE76C1",
+    "#5E92F6",
+    "#F5BC32",
+    "#DA8484",
+    "#41982E",
+    "#437095",
+    "#8060A7",
+    "#7D0A0D",
+    "#572AFF",
+    "#2BE8F8",
+    "#FF1493",
+    "#E066FF",
+    "#27408B",
+    "#5191A3",
+    "#D5634C",
+    "#92d6fd",
+    "#b92e2d",
+    "#187bc9",
+    "#90bae0",
+    "#187bc9",
+    "#0070C9",
+    "#5470c6",
+    "#91cc75",
+    "#fac858",
+    "#ee6666",
+    "#73c0de",
+    "#3ba272",
+    "#fc8452",
+    "#9a60b4",
+    "#ea7ccc"
+  ],
   series: [
     {
       name: "",

package/es/constants/target.mjs

@@ -40,15 +40,16 @@ const TARGET_END_KEY = [
   { name: "\u6708\u80DC\u7387", key: "monthlyPositiveRatio", dealType: "percentage" }
 ];
 const BASIC_KEY = [
-  { name: "\u7BA1\u7406\u4EBA", key: "advisor", dealType: "" },
-  { name: "\u7B56\u7565", key: "strategyOne", dealType: "" },
-  { name: "\u5355\u4F4D\u51C0\u503C", key: "nav", dealType: "" },
-  { name: "\u5355\u4F4D\u51C0\u503C\u6DA8\u8DCC\u5E45", key: "navPriceChange", dealType: "" },
-  { name: "\u7D2F\u8BA1\u51C0\u503C", key: "cumulativeNavWithdrawal", dealType: "" },
-  { name: "\u6210\u7ACB\u65E5\u671F", key: "inceptionDate", dealType: "" },
-  { name: "\u5C01\u95ED\u671F", key: "closedPeriod", dealType: "" },
-  { name: "\u5F00\u653E\u65E5", key: "openDay", dealType: "" },
-  { name: "\u5907\u6848\u53F7/\u4EE3\u7801", key: "registerNumber", dealType: "" }
+  { name: "\u51C0\u503C\u65E5\u671F", key: "priceDate", dealType: "notProcessed" },
+  // { name: '管理人', key: 'advisor', dealType: '' },
+  // { name: '策略', key: 'strategyOne', dealType: '' },
+  { name: "\u5355\u4F4D\u51C0\u503C", key: "nav", dealType: "basicText4" },
+  // { name: '单位净值涨跌幅', key: 'navPriceChange', dealType: '' },
+  { name: "\u7D2F\u8BA1\u51C0\u503C", key: "cumulativeNavWithdrawal", dealType: "basicText4" }
+  // { name: '成立日期', key: 'inceptionDate', dealType: '' },
+  // { name: '封闭期', key: 'closedPeriod', dealType: '' },
+  // { name: '开放日', key: 'openDay', dealType: '' },
+  // { name: '备案号/代码', key: 'registerNumber', dealType: '' }
 ];
 
 export { BASIC_KEY, TARGET_END_KEY, TARGET_HEAD_KEY };

package/package.json

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

package/theme-chalk/ht-target.css

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

package/theme-chalk/index.css

@@ -1 +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{display:flex;margin-bottom:10px;width:33.33%}.check_item{display:flex;justify-content:space-between}
+.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}.target-head{display:grid;grid:auto/repeat(5,1fr)}.factor-content{display:flex;flex-direction:column;flex-wrap:wrap;height:380px;width:100%}.factor_item{display:flex;margin-bottom:10px;width:33.33%}.check_item{display:flex;justify-content:space-between}.flex-alignCnter{align-items:center;cursor:pointer;display:flex}

package/theme-chalk/src/target.scss

@@ -2,6 +2,10 @@
   width: 860px !important;
   padding: 24px !important;
 }
+.target-head {
+  display: grid;
+  grid: auto / repeat(5, 1fr);
+}
 .factor-content {
   width: 100%;
   height: 380px;
@@ -18,3 +22,9 @@
   display: flex;
   justify-content: space-between;
 }
+
+.flex-alignCnter {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}