st-comp 0.0.57 → 0.0.58

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "st-comp",
   "public": true,
-  "version": "0.0.57",
+  "version": "0.0.58",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/packages/VarietySearch/components/CommonIndicator/index.vue

@@ -0,0 +1,418 @@
+<!-- 常用指标组件 -->
+<script setup name="CommonIndicator">
+import { ref, watch, computed } from "vue";
+
+const props = defineProps({
+  config: { type: Object, default: () => {} },
+  varietyMarket: { type: null || Number, default: () => null }, // 已选品种市场
+  commonOption: { type: Array, default: () => [] }, // 已选常用选项
+});
+const data = defineModel("data", { default: [] });
+
+// 常用指标项(是否展示受到: 品种市场, 常用选项影响)
+const commonIndicatorOptions = computed(() => {
+  let result = [];
+  // 如果品种市场和常用选项一个都没有选, 那么就展示全部的常用指标
+  if (props.varietyMarket === null && !props.commonOption.length) {
+    result = props.config.options;
+  } else {
+    result = props.config.options;
+    // 1. 如果选择了品种市场, 进行一波筛选
+    if (props.varietyMarket) {
+      result = result.filter(({ parent }) => parent.varietyMarketIds.includes(props.varietyMarket));
+    }
+    // 2. 如果选择了常用选项, 进行一波筛选
+    if (props.commonOption.length) {
+      result = result.filter(({ parent }) => {
+        const { commonOptionIds } = parent;
+        // 只要选择了的常用选项里面, 有commonOptionIds中的值, 那么就展示, 即判断两个数组是否有重复元素
+        return (
+          [...new Set([...commonOptionIds, ...props.commonOption])].length !==
+          [...commonOptionIds, ...props.commonOption].length
+        );
+      });
+    }
+  }
+  return result;
+});
+watch(
+  () => commonIndicatorOptions.value,
+  () => {
+    // 如果常用指标已经进行了勾选, 则只保留常用指标中存在的值
+    if (data.value.length) {
+      data.value = data.value.filter(({ key }) => {
+        return commonIndicatorOptions.value.find((item) => item.key === key);
+      });
+    }
+  }
+);
+
+const visible = ref(false);
+// 当前点击的指标项type
+const nowIndicator = ref({});
+// 当前指标项内容中的值
+const indicatorValue = ref({});
+
+// 函数: 点击指标项 (新增custom配置项时, 需要改动)
+const clickIndicator = (item) => {
+  // 存储目前点击的指标项相关配置
+  nowIndicator.value = item;
+  // 初始化值---------------------------------
+  const baseParams = {
+    label: item.label,
+    key: item.key,
+    type: item.type,
+  };
+  if (item.type === undefined) {
+    indicatorValue.value = {
+      ...baseParams,
+      range: [null, null],
+      unit: item.defaultUnit.length ? [...item.defaultUnit] : [null, null],
+    };
+  }
+  // 是否ST
+  else if (item.key === "st") {
+    indicatorValue.value = { ...baseParams, st: null };
+  }
+  // 净利润
+  else if (item.key === "tFeaturelncomes") {
+    indicatorValue.value = {
+      ...baseParams,
+      rule: 1, // 1超 2跌
+      withFewYears: null,
+      yearsCount: null,
+      netProfit: null,
+    };
+  }
+  // 认沽认购
+  else if (item.key === "optionsCpType") {
+    indicatorValue.value = {
+      ...baseParams,
+      optionsCpType: null, // 1看涨 2看跌
+    };
+  }
+  // -----------------------------------------
+  // 打开弹窗
+  visible.value = true;
+};
+
+// 函数: 点击快捷选项[type-undefined 通用性]
+const clickConvenientOption = (item) => {
+  indicatorValue.value.range = [...item.range];
+  indicatorValue.value.unit = [...item.unit];
+};
+// 函数: 点击快捷选项[特殊-净利润]
+const clicktFeaturelncomesOption = (value) => {
+  switch (value) {
+    case "≤0":
+      Object.assign(indicatorValue.value, {
+        rule: 2, // 1超 2跌
+        withFewYears: 1,
+        yearsCount: 1,
+        netProfit: 0,
+      });
+      break;
+    case "≥0":
+      Object.assign(indicatorValue.value, {
+        rule: 1,
+        withFewYears: 1,
+        yearsCount: 1,
+        netProfit: 0,
+      });
+      break;
+    case "五年内有四年以上盈利超过5千万":
+      Object.assign(indicatorValue.value, {
+        rule: 1,
+        withFewYears: 5,
+        yearsCount: 4,
+        netProfit: 0.5,
+      });
+      break;
+    case "≥10亿":
+      Object.assign(indicatorValue.value, {
+        rule: 1,
+        withFewYears: 1,
+        yearsCount: 1,
+        netProfit: 10,
+      });
+      break;
+    case "≥20亿":
+      Object.assign(indicatorValue.value, {
+        rule: 1,
+        withFewYears: 1,
+        yearsCount: 1,
+        netProfit: 20,
+      });
+      break;
+  }
+};
+
+// 函数: 确定 (新增custom配置项时, 需要改动)
+const submitDialog = () => {
+  // 校验 + 格式化文案
+  if (indicatorValue.value.type === undefined) {
+    const { label, range, unit } = indicatorValue.value;
+    // 校验
+    if (["", null].includes(range[0]) && ["", null].includes(range[1])) {
+      return ElMessage.warning("格式错误: 请至少填写一个值");
+    }
+    // 格式化文案
+    if (!["", null].includes(range[0]) && !["", null].includes(range[1])) {
+      indicatorValue.value.tagText = `${label}: ${range[0]}${unit[0] ?? ""} ~ ${range[1]}${unit[1] ?? ""}`;
+    } else if (!["", null].includes(range[0])) {
+      indicatorValue.value.tagText = `${label}: ≥${range[0]}${unit[0] ?? ""}`;
+    } else {
+      indicatorValue.value.tagText = `${label}: ≤${range[1]}${unit[1] ?? ""}`;
+    }
+  } else if (indicatorValue.value.key === "st") {
+    const { label, st } = indicatorValue.value;
+    // 校验
+    if (st === null) return ElMessage.warning("格式错误: 请至少选择一个值");
+    // 格式化文案
+    indicatorValue.value.tagText = `${label}: ${st ? "是" : "否"}`;
+  } else if (indicatorValue.value.key === "tFeaturelncomes") {
+    const { label, rule, withFewYears, yearsCount, netProfit } = indicatorValue.value;
+    // 校验
+    if (["", null].includes(withFewYears) || ["", null].includes(yearsCount) || ["", null].includes(netProfit)) {
+      return ElMessage.warning("格式错误: 请填写完整");
+    }
+    // 格式化文案
+    indicatorValue.value.tagText = `${label}: ${withFewYears}年内${yearsCount}年以上盈利${
+      rule === 1 ? "超" : "跌"
+    }过${netProfit}亿`;
+  } else if (indicatorValue.value.key === "optionsCpType") {
+    const { label, optionsCpType } = indicatorValue.value;
+    // 校验
+    if (optionsCpType === null) return ElMessage.warning("格式错误: 请至少选择一个值");
+    // 格式化文案
+    indicatorValue.value.tagText = `${label}: ${optionsCpType ? "看涨" : "看跌"}`;
+  }
+  // 判断data中是否已存在同样key的数据, 如果存在则替换, 如果不存在就push
+  const keyIndex = data.value.findIndex(({ key }) => key === indicatorValue.value.key);
+  if (keyIndex === -1) {
+    data.value.push(indicatorValue.value);
+  } else {
+    data.value.splice(keyIndex, 1, indicatorValue.value);
+  }
+  visible.value = false;
+};
+
+// 函数: 删除指标项Tag
+const deleteTag = (index) => {
+  data.value.splice(index, 1);
+};
+// 函数: 编辑指标项Tag
+const editTag = (item) => {
+  nowIndicator.value = commonIndicatorOptions.value.find(({ key }) => key === item.key);
+  indicatorValue.value = item;
+  visible.value = true;
+};
+</script>
+
+<template>
+  <div class="common-indicator" v-if="config.show && commonIndicatorOptions.length">
+    <!-- 指标项展示区域 -->
+    <div class="indicator">
+      <div class="title">
+        <span>常用指标: </span>
+        <span>不限</span>
+      </div>
+      <div class="options">
+        <span v-for="item in commonIndicatorOptions" :key="item.key" @click="clickIndicator(item)"> {{ item.label }} </span>
+      </div>
+    </div>
+    <div class="tags">
+      <el-tag v-for="(item, index) in data" closable type="info" @close="deleteTag(index)">
+        <span>{{ item.tagText }}</span>
+        <span class="edit" @click="editTag(item)">编辑</span>
+      </el-tag>
+    </div>
+    <!-- 指标具体弹窗 -->
+    <el-dialog v-model="visible" :title="nowIndicator.label" width="600" align-center destroy-on-close>
+      <!-- type: undefined 为默认便捷配置项 + 输入框形式 -->
+      <template v-if="nowIndicator.type === undefined">
+        <!-- 便捷配置项区域 -->
+        <div class="convenient-option-box" v-if="nowIndicator.convenientOptions.length">
+          <el-button
+            v-for="item in nowIndicator.convenientOptions"
+            :key="item.text"
+            @click="clickConvenientOption(item)"
+            >{{ item.text }}</el-button
+          >
+        </div>
+        <!-- 输入框区域 -->
+        <div class="out-box">
+          <span>自定义: </span>
+          <el-input v-model="indicatorValue.range[0]" style="flex: 1">
+            <!-- 单位 -->
+            <template #append v-if="nowIndicator.unitOptions.length">
+              <span v-if="nowIndicator.unitOptions.length === 1">{{ indicatorValue.unit[0] }}</span>
+              <el-select
+                v-else
+                v-model="indicatorValue.unit[0]"
+                style="width: 72px"
+              >
+                <el-option v-for="unit in nowIndicator.unitOptions" :label="unit" :value="unit" />
+              </el-select>
+            </template>
+          </el-input>
+          ~
+          <el-input v-model="indicatorValue.range[1]" style="flex: 1">
+            <!-- 单位 -->
+            <template #append v-if="nowIndicator.unitOptions.length">
+              <span v-if="nowIndicator.unitOptions.length === 1">{{ indicatorValue.unit[1] }}</span>
+              <el-select
+                v-else
+                v-model="indicatorValue.unit[1]"
+                style="width: 72px"
+              >
+                <el-option v-for="unit in nowIndicator.unitOptions" :label="unit" :value="unit" />
+              </el-select>
+            </template>
+          </el-input>
+        </div>
+      </template>
+      <!-- type: custom 根据不同key进行自定义 -->
+      <template v-else>
+        <!-- 是否ST -->
+        <div v-if="nowIndicator.key === 'st'">
+          <el-radio-group v-model="indicatorValue.st">
+            <el-radio :label="1">是</el-radio>
+            <el-radio :label="0">否</el-radio>
+          </el-radio-group>
+        </div>
+        <!-- 净利润 -->
+        <div v-if="nowIndicator.key === 'tFeaturelncomes'">
+          <!-- 便捷配置项区域 -->
+          <div class="tFeaturelncomes-option-box">
+            <el-button @click="clicktFeaturelncomesOption('≤0')">≤0</el-button>
+            <el-button @click="clicktFeaturelncomesOption('≥0')">≥0</el-button>
+            <el-button @click="clicktFeaturelncomesOption('五年内有四年以上盈利超过5千万')"
+              >五年内有四年以上盈利超过5千万</el-button
+            >
+            <el-button @click="clicktFeaturelncomesOption('≥10亿')">≥10亿</el-button>
+            <el-button @click="clicktFeaturelncomesOption('≥20亿')">≥20亿</el-button>
+          </div>
+          <!-- 输入框区域 -->
+          <div class="tFeaturelncomes-out-box">
+            <span>自定义: </span>
+            <div>
+              <el-input-number v-model="indicatorValue.withFewYears" controls-position="right" />
+              年内
+              <el-input-number v-model="indicatorValue.yearsCount" controls-position="right" />
+              年以上盈利{{ indicatorValue.rule === 1 ? "超" : "跌" }}过
+              <el-input-number v-model="indicatorValue.netProfit" controls-position="right" />
+              亿
+            </div>
+          </div>
+        </div>
+        <!-- 认沽认购 -->
+        <div v-if="nowIndicator.key === 'optionsCpType'">
+          <el-radio-group v-model="indicatorValue.optionsCpType">
+            <el-radio :label="1">看涨</el-radio>
+            <el-radio :label="0">看跌</el-radio>
+          </el-radio-group>
+        </div>
+      </template>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitDialog">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.common-indicator {
+  .indicator {
+    display: flex;
+    align-items: start;
+    .title {
+      height: 24px;
+      min-width: 100px;
+      font-size: 12px;
+      line-height: 24px;
+      display: flex;
+      align-items: center;
+      span:nth-child(1) {
+        width: 60px;
+      }
+      span:nth-child(2) {
+        cursor: pointer;
+        color: var(--el-color-primary);
+      }
+    }
+    .options {
+      span {
+        font-size: 12px;
+        line-height: 24px;
+        color: var(--el-text-color-regular);
+        padding: 4px 0;
+        margin-right: 20px;
+        cursor: pointer;
+        &:hover{
+          color: var(--el-color-primary)
+        }
+      }
+    }
+  }
+  :deep(.el-button.is-text) {
+    span {
+      line-height: 24px;
+      color: var(--el-text-color-regular);
+    }
+  }
+  .tags {
+    .el-tag {
+      margin: 6px 10px 6px 0;
+      .edit {
+        cursor: pointer;
+        color: var(--el-color-primary);
+        margin-left: 6px;
+      }
+    }
+  }
+  .convenient-option-box {
+    display: grid;
+    grid-template-columns: 33.3% 33.3% 33.3%;
+    border-bottom: 1px solid var(--el-border-color);
+    margin-bottom: 10px;
+    .el-button {
+      margin-left: 10px;
+      margin-right: 10px;
+      margin-bottom: 10px;
+    }
+  }
+  .out-box {
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    span {
+      margin-right: 10px;
+    }
+  }
+  .tFeaturelncomes-option-box {
+    display: grid;
+    grid-template-columns: 20% 20% 60%;
+    border-bottom: 1px solid var(--el-border-color);
+    margin-bottom: 10px;
+    .el-button {
+      margin-left: 10px;
+      margin-right: 10px;
+      margin-bottom: 10px;
+    }
+  }
+  .tFeaturelncomes-out-box {
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    span {
+      margin-right: 10px;
+    }
+    .el-input-number {
+      width: 100px;
+    }
+  }
+}
+</style>

package/packages/VarietySearch/components/FactorScreen/index.vue

@@ -0,0 +1,151 @@
+<!-- 因子筛选组件 -->
+<script setup name="FactorScreen">
+import { ref } from "vue";
+import { Plus, CircleCloseFilled } from "@element-plus/icons-vue";
+
+const props = defineProps({ config: { type: Object, default: () => {} } });
+const data = defineModel("data", { default: [] }); // 父组件对应该组件字段的数据
+
+// 弹窗开关
+const visible = ref(false);
+
+// 表单相关参数
+const dialogFormRef = ref(null);
+const dialogForm = ref({ factorScreen: [{ cycle: null, factor: null, score: [null, null] }] });
+// 特殊校验: 分数
+const scoreValidator = (rule, value, callback) => {
+  // 检查开始和结束的分是否都没填
+  if (!value[0] && value[0] !== 0 && !value[1] && value[1] !== 0) {
+    callback(new Error("至少填写一个分数"));
+  } else {
+    callback();
+  }
+};
+
+// 函数: 弹窗外-添加因子
+const openDialog = () => {
+  // 弹窗打开时, 重置表单
+  if (data.value.length > 0) dialogForm.value.factorScreen = JSON.parse(JSON.stringify(data.value));
+  else dialogForm.value.factorScreen = [{ cycle: null, factor: null, score: [null, null] }];
+  visible.value = true;
+};
+// 函数: 弹窗外-删除因子
+const deleteTag = (index) => {
+  data.value.splice(index, 1);
+};
+
+// 函数: 弹窗内-添加因子
+const addFactor = () => {
+  dialogForm.value.factorScreen.push({ cycle: null, factor: null, score: [null, null] });
+};
+// 函数: 弹窗内-删除因子
+const deleteFactor = (index) => {
+  dialogForm.value.factorScreen.splice(index, 1);
+};
+// 函数: 确定
+const submit = () => {
+  if (!dialogFormRef.value) return;
+  dialogFormRef.value.validate((valid) => {
+    if (valid) {
+      data.value = JSON.parse(JSON.stringify(dialogForm.value.factorScreen));
+      visible.value = false;
+    } else {
+      console.error("因子筛选-弹窗: 表单校验未通过");
+    }
+  });
+};
+
+// 映射
+const handleTagName = (tag) => {
+  const { cycle, factor, score } = tag;
+  let str = "";
+  str += ` ${props.config.cycleOptions.find(({ value }) => value === cycle).label}`;
+  str += ` ${props.config.factorOptions.find(({ value }) => value === factor).label}`;
+  str += ` ${score[0] || score[0] === 0 ? `${score[0]}分` : "∞"}`;
+  str += " ~";
+  str += ` ${score[1] || score[1] === 0 ? `${score[1]}分` : "∞"}`;
+  return str;
+};
+</script>
+
+<template>
+  <div class="factor-screen">
+    <!-- Tag展示区域 -->
+    <template v-if="data.length">
+      <el-tag v-for="(tag, index) in data" closable type="info" @close="deleteTag(index)">
+        {{ handleTagName(tag) }}
+      </el-tag>
+    </template>
+    <!-- 添加按钮区域 -->
+    <el-button class="screen-btn" type="primary" plain size="small" :icon="Plus" @click="openDialog"
+      >添加因子</el-button
+    >
+    <!-- Tag弹窗 -->
+    <el-dialog v-model="visible" title="因子筛选" width="500" align-center destroy-on-close>
+      <el-form ref="dialogFormRef" :model="dialogForm">
+        <div v-for="(item, index) in dialogForm.factorScreen" class="form-row">
+          <!-- 周期 -->
+          <el-form-item
+            :prop="'factorScreen.' + index + '.cycle'"
+            :rules="{ required: true, message: '周期不能为空', trigger: 'blur' }"
+            style="width: 100px"
+          >
+            <el-select v-model="item.cycle" placeholder="选择周期" size="small">
+              <el-option v-for="{ label, value } in config.cycleOptions" :label="label" :value="value" :key="value" />
+            </el-select>
+          </el-form-item>
+          <!-- 因子 -->
+          <el-form-item
+            :prop="'factorScreen.' + index + '.factor'"
+            :rules="{ required: true, message: '因子不能为空', trigger: 'blur' }"
+            style="width: 100px"
+          >
+            <el-select v-model="item.factor" placeholder="选择因子" size="small">
+              <el-option v-for="{ label, value } in config.factorOptions" :label="label" :value="value" :key="value" />
+            </el-select>
+          </el-form-item>
+          <!-- 分数 -->
+          <el-form-item
+            :prop="'factorScreen.' + index + '.score'"
+            :rules="{ validator: scoreValidator, trigger: 'blur' }"
+            style="width: 200px"
+          >
+            <div style="display: flex; align-items: center; width: 100%; height: 24px">
+              <el-input-number v-model="item.score[0]" size="small" controls-position="right" />
+              <span>~</span>
+              <el-input-number v-model="item.score[1]" size="small" controls-position="right" />
+            </div>
+          </el-form-item>
+          <!-- 删除 -->
+          <el-icon @click="deleteFactor(index)"><CircleCloseFilled /></el-icon>
+        </div>
+        <el-button type="primary" plain size="small" :icon="Plus" @click="addFactor">添加因子</el-button>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submit">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.factor-screen {
+  .el-tag {
+    margin-right: 10px;
+  }
+  .form-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 18px;
+    .el-form-item {
+      margin: 0;
+    }
+    .el-icon {
+      cursor: pointer;
+    }
+  }
+}
+</style>