st-comp 0.0.47 → 0.0.49

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "st-comp",
   "public": true,
-  "version": "0.0.47",
+  "version": "0.0.49",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
     "sass": "^1.69.3",
     "ssh2": "^1.14.0",
     "ssh2-sftp-client": "^9.1.0",

package/packages/KlineNew/components/KlineTips/index.vue

@@ -6,56 +6,59 @@
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue'
-  import Tips from '../Tips/index.vue'
-  import { stMath } from 'st-func'
-  const { round, multiply, divide, subtract } = stMath
+import { computed } from "vue";
+import Tips from "../Tips/index.vue";
+import { stMath } from "st-func";
+const { round, multiply, divide, subtract } = stMath;
 
-  const props = defineProps({
-    // 提示数据
-    drawData: {
-      type: Object,
-      require: true,
-    },
-    activeIndex: {
-      type: Number,
-      require: true,
-    },
-  })
+const props = defineProps({
+  // 提示数据
+  drawData: {
+    type: Object,
+    require: true,
+  },
+  activeIndex: {
+    type: Number,
+    require: true,
+  },
+});
 
-  const mainTips = computed(() => {
-    const { drawData, activeIndex } = (props as any)
-    if (drawData.candlestickData && drawData.candlestickData[activeIndex]) {
-    const itemData = drawData.candlestickData[activeIndex]
-      const diff = round(multiply(divide(subtract(itemData[1], itemData[4]), itemData[4]), 100))
-      let diffColor
-      if (diff > 0) {
-        diffColor = 'red'
-      } else if (diff < 0) {
-        diffColor = 'green'
-      }
-      return [
-        { label: '开', value: round(itemData[0]) },
-        { label: '高', value: round(itemData[3]) },
-        { label: '低', value: round(itemData[2]) },
-        { label: '收', value: round(itemData[1]) },
-        { label: '涨跌', value: `${diff}%`, color: diffColor },
-      ]
+const mainTips = computed(() => {
+  const { drawData, activeIndex } = props as any;
+  if (drawData.candlestickData && drawData.candlestickData[activeIndex]) {
+    const itemData = drawData.candlestickData[activeIndex];
+    // 收盘价 - 昨收 / (昨收绝对值)
+    const diff = round(multiply(divide(subtract(itemData[1], itemData[4]), Math.abs(itemData[4])), 100));
+    let diffColor;
+    if (diff > 0) {
+      diffColor = "red";
+    } else if (diff < 0) {
+      diffColor = "green";
     }
-    return []
-  })
+    return [
+      { label: "开", value: round(itemData[0]) },
+      { label: "高", value: round(itemData[3]) },
+      { label: "低", value: round(itemData[2]) },
+      { label: "收", value: round(itemData[1]) },
+      { label: "涨跌", value: `${diff}%`, color: diffColor },
+    ];
+  }
+  return [];
+});
 
-  const mainIndicatorTips = computed(() => {
-    const { drawData, activeIndex } = props
-    return drawData?.mainIndicatorData?.map(item => {
-      return { label: item.key, value: round(item.data[activeIndex]), color: item.color }
+const mainIndicatorTips = computed(() => {
+  const { drawData, activeIndex } = props;
+  return (
+    drawData?.mainIndicatorData?.map((item) => {
+      return { label: item.key, value: round(item.data[activeIndex]), color: item.color };
     }) || []
-  })
+  );
+});
 </script>
 
 <style lang="scss" scoped>
-  .kline-tips {
-    padding-left: 3px;
-    width: 100%;
-  }
+.kline-tips {
+  padding-left: 3px;
+  width: 100%;
+}
 </style>

package/packages/KlineNew/index.ts

@@ -1,14 +1,14 @@
-import { App } from "vue";
-import KlineUtils from "./components/KlineUtils/index.vue"
-import KlineTips from "./components/KlineTips/index.vue"
-import KlineSub from "./components/KlineSub/index.vue"
-import KlineSlide from "./components/KlineSlide/index.vue"
-
-export default {
-  install(app: App) {
-    app.component("st-klineUtils", KlineUtils);
-    app.component("st-klineSub", KlineSub);
-    app.component("st-klineTips", KlineTips);
-    app.component("st-klineSlide", KlineSlide);
-  },
-}
+import { App } from "vue";
+import KlineUtils from "./components/KlineUtils/index.vue"
+import KlineTips from "./components/KlineTips/index.vue"
+import KlineSub from "./components/KlineSub/index.vue"
+import KlineSlide from "./components/KlineSlide/index.vue"
+
+export default {
+  install(app: App) {
+    app.component("st-klineUtils", KlineUtils);
+    app.component("st-klineSub", KlineSub);
+    app.component("st-klineTips", KlineTips);
+    app.component("st-klineSlide", KlineSlide);
+  },
+}

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

@@ -0,0 +1,77 @@
+<template>
+  <div class="st-VarietySearch-checkBox">
+    <div class="st-VarietySearch-checkBox-label">
+      {{ config.label }}：
+      <el-button
+        text
+        size="small"
+        type="primary"
+        @click="checkList = []"
+      >
+        不限
+      </el-button>
+    </div>
+    <div class="st-VarietySearch-checkBox-content">
+      <el-checkbox-group
+        size="small"
+        v-model="checkList"
+      >
+        <el-checkbox
+          v-for="item in config.options"
+          :key="item.value"
+          :label="item.value"
+        >
+          {{ item.label }}
+        </el-checkbox>
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+  config: {
+    type: Object,
+    require: true,
+    default: () => ({}),
+  },
+  formData: {
+    type: Object,
+    require: true,
+  },
+})
+
+const checkList = ref([])
+
+watch(() => props.formData, () => {
+  checkList.value = props.formData[props.config.key] || []
+}, { deep: true })
+
+watch(checkList, () => {
+  emit('change', props.config.key, checkList.value)
+})
+</script>
+
+<style lang="scss" scoped>
+.st-VarietySearch-checkBox {
+  &-label {
+    display: inline-block;
+    vertical-align: top;
+    width: 120px;
+    height: 24px;
+    line-height: 22px;
+    font-size: 12px;
+    &-clear {
+      color: #409eff;
+    }
+  }
+  &-content {
+    vertical-align: top;
+    width: calc(100% - 120px);
+    display: inline-block;
+  }
+}
+</style>

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

@@ -0,0 +1,256 @@
+<template>
+  <div class="st-VarietySearch-factorFilter">
+    <div class="st-VarietySearch-factorFilter-label">
+      {{ config.label }}：
+      <el-button
+        text
+        size="small"
+        type="primary"
+        @click="clear"
+      >
+        不限
+      </el-button>
+    </div>
+    <div class="st-VarietySearch-factorFilter-content">
+      <el-tag
+        v-for="item in tagList"
+        style="margin-right: 5px"
+        :key="item.key"
+        closable
+        type="info"
+        :disable-transitions="false"
+        @close="deleteFactor(item, true)"
+      >
+        {{ item.freqName || "" }}
+        {{ item.factorName || "" }}
+        {{ item.startScore === null ? " / " : item.startScore + "分" }}
+        <span>~</span>
+        {{ item.endScore === null ? " / " : item.endScore + "分" }}
+      </el-tag>
+      <el-button type="primary" plain size="small" @click="open">
+        + 添加因子
+      </el-button>
+    </div>
+    <el-dialog
+      v-model="visible"
+      class="st-VarietySearch-factorFilter-dialog"
+      title="因子筛选"
+      align-center
+      :draggable="true"
+      width="510"
+    >
+      <el-row
+        v-for="item in factorList"
+        style="margin-bottom: 10px;"
+        :key="item.key"
+      >
+        <el-col :span="6">
+          <el-select
+            v-model="item.freqId"
+            :style="{ width: '100px' }"
+            :class="!item.freqId && check ? 'st-VarietySearch-factorFilter-border-red' : ''"
+            size="small"
+            placeholder="选择周期"
+          >
+            <el-option
+              v-for="optionItem in config.freqList"
+              :key="optionItem.value"
+              :label="optionItem.label"
+              :value="optionItem.value"
+            />
+          </el-select>
+        </el-col>
+        <el-col :span="7">
+          <el-select
+            v-model="item.factorId"
+            :class="!item.factorId && check ? 'st-VarietySearch-factorFilter-border-red' : ''"
+            :style="{ width: '120px' }"
+            size="small"
+            placeholder="选择因子"
+          >
+            <el-option
+              v-for="optionItem in config.factorList"
+              :key="optionItem.value"
+              :label="optionItem.label"
+              :value="optionItem.value"
+            />
+          </el-select>
+        </el-col>
+        <el-col :span="10">
+          <el-input-number
+            v-model="item.startScore"
+            :class="!((item.startScore || item.startScore === 0) || (item.endScore || item.endScore === 0)) && check ? 'st-VarietySearch-factorFilter-border-red' : ''"
+            style="width: 85px"
+            :step="0.5"
+            :min="-999"
+            :max="999"
+            placeholder="分数"
+            controls-position="right"
+            size="small"
+          />
+          <span> ~ </span>
+          <el-input-number
+            v-model="item.endScore"
+            :class="!((item.startScore || item.startScore === 0) || (item.endScore || item.endScore === 0)) && check ? 'st-VarietySearch-factorFilter-border-red' : ''"
+            style="width: 85px"
+            :step="0.5"
+            :min="-999"
+            :max="999"
+            controls-position="right"
+            placeholder="分数"
+            size="small"
+          />
+        </el-col>
+        <el-col :span="1">
+          <el-text
+            type="info"
+            style="cursor: pointer; vertical-align: -3px;"
+            @click="deleteFactor(item)"
+          >
+            <el-icon><CircleCloseFilled /></el-icon>
+          </el-text>
+        </el-col>
+      </el-row>
+      <el-button type="primary" plain size="small" @click="addFactor">
+        + 添加因子
+      </el-button>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button size="small" @click="visible = false">取消</el-button>
+          <el-button size="small" type="primary" @click="submit">
+            确认
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { CircleCloseFilled } from "@element-plus/icons-vue";
+import { ElMessage } from 'element-plus';
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+  config: {
+    type: Object,
+    require: true,
+    default: () => ({ key: new Date() }),
+  },
+  formData: {
+    type: Object,
+    require: true,
+  },
+})
+
+const defauleItem = {
+  factorId: null, // 因子id
+  freqId: null, // 周期id
+  startScore: null, // 开始分值
+  endScore: null, // 结束分值
+}
+
+const visible = ref(false)
+const factorList = ref([])
+const check = ref(false)
+
+// 标签列表
+const tagList = computed(() => {
+  return props.formData[props.config.key].filter(item => item.factorId && item.freqId).map(item => {
+    return {
+      ...item,
+      freqName: props.config.freqList.find(i => i.value === item.freqId)?.label,
+      factorName: props.config.factorList.find(i => i.id === item.factorId)?.factorName,
+    }
+  })
+})
+
+// 打开弹窗
+const open = () => {
+  if (factorList.value.length === 0) {
+    addFactor()
+  }
+  visible.value = true
+}
+
+// 添加因子
+const addFactor = () => {
+  factorList.value.push({ ...defauleItem, key: new Date().getTime() })
+}
+
+// 删除因子
+const deleteFactor = (item, isUpdate = false) => {
+  factorList.value = factorList.value.filter(i => i.key !== item.key)
+  if (isUpdate) {
+    emit('change', props.config.key, [...factorList.value])
+  }
+}
+
+// 不限
+const clear = () => {
+  factorList.value = []
+  emit('change', props.config.key, [])
+}
+
+// 提交
+const submit = () => {
+  for(let i = 0; i < factorList.value.length; i++) {
+    const item = factorList.value[i]
+    if (!(
+        item.factorId &&
+        item.freqId &&
+        ((item.startScore || item.startScore === 0) || (item.endScore || item.endScore === 0))
+      )) {
+      check.value = true
+      ElMessage.error('请检查列表参数后重试！')
+      return
+    }
+  }
+  emit('change', props.config.key, [...factorList.value])
+  check.value = false
+  visible.value = false
+}
+</script>
+
+<style lang="scss">
+.st-VarietySearch-factorFilter-border-red .el-input__wrapper,
+.st-VarietySearch-factorFilter-border-red .el-select__wrapper {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+.st-VarietySearch-factorFilter-dialog {
+  .el-dialog__header {
+    padding-top: 10px;
+    .el-dialog__headerbtn {
+      width: 40px;
+      height: 40px;
+    }
+  }
+  .el-dialog__body {
+    border-top: 1px solid var(--el-border-color);
+    border-bottom: 1px solid var(--el-border-color);
+    padding: 15px 20px;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.st-VarietySearch-factorFilter {
+  &-label {
+    display: inline-block;
+    vertical-align: top;
+    width: 120px;
+    height: 24px;
+    line-height: 22px;
+    font-size: 12px;
+    &-clear {
+      color: #409eff;
+    }
+  }
+  &-content {
+    vertical-align: top;
+    width: calc(100% - 120px);
+    display: inline-block;
+  }
+}
+</style>