st-comp 0.0.220 → 0.0.221

package/package.json

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

package/packages/KlineBasic/components/AverageTips/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="kline-averageTips">
+    <div
+      v-for="(item, index) in data"
+      :key="index"
+      class="kline-averageTips-item"
+      :style="{ color: item.color, width: `calc(100% / ${data.length} - 10px)` }"
+    >{{ item.label }} {{ item.value }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  defineProps({
+    // 提示数据
+    data: {
+      type: Array,
+      require: true,
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  .kline-averageTips {
+    width: 100%;
+    color: #fff;
+    font-size: 12px;
+    line-height: 1.5;
+    &-item {
+      display: inline-block;
+      margin-right: 10px;
+    }
+  }
+</style>

package/packages/KlineBasic/components/KlineSub/index.vue

@@ -19,7 +19,7 @@
           />
         </el-select>
       </div>
-      <Tips :data="subIndicatorTips" />
+      <AverageTips :data="subIndicatorTips" />
     </div>
     <div
       class="klineSub-chart"
@@ -32,7 +32,7 @@
 import dayjs from "dayjs";
 import { ref, onMounted, onUnmounted, nextTick, computed } from "vue";
 import * as echarts from "echarts";
-import Tips from "../Tips/index.vue";
+import AverageTips from "../AverageTips/index.vue";
 import { stMath } from "st-func";
 const { round } = stMath;
 

package/packages/KlineBasic/components/Tips/index.vue

@@ -1,22 +1,40 @@
 <template>
-  <div class="kline-tips">
+  <div class="kline-tips" ref="tipsRef">
     <div
       v-for="(item, index) in data"
       :key="index"
       class="kline-tips-item"
-      :style="{ color: item.color }"
+      :style="{ color: item.color, width: widthList[index] ? widthList[index] : null }"
     >{{ item.label }} {{ item.value }}</div>
   </div>
 </template>
 
 <script setup lang="ts">
-  defineProps({
+  import { ref, watch, nextTick } from "vue";
+  const props = defineProps({
     // 提示数据
     data: {
       type: Array,
       require: true,
     },
   })
+
+  const tipsRef = ref<any>(null)
+  const widthList = ref<Array<string>>([])
+
+  watch(() => props.data, () => { 
+    if (widthList.value.length === 0) {
+      nextTick(() => {
+        Array.from(tipsRef.value.children).forEach((item: any, index) => {
+          if (String(props.data?.[index]?.value)?.includes('%')) {
+            widthList.value[index] = '70px'
+          } else {
+            widthList.value[index] = `${item.offsetWidth + 14}px`
+          }
+        })
+      })
+    }
+  })
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,191 @@
+<template>
+  <div>
+    <el-tag
+      v-for="(item, index) in showCheckTagList"
+      closable
+      style="margin-right: 10px;"
+      type="info"
+      @close="handleAction('delete', index)"
+    >
+      <span>{{ item.name }}</span>
+    </el-tag>
+    <el-button
+      class="screen-btn"
+      type="primary"
+      plain
+      size="small"
+      :icon="Plus"
+      @click="handleAction('add')"
+    >
+      添加标签
+    </el-button>
+  </div>
+  <!-- 添加标签弹窗 -->
+  <el-dialog
+    v-model="visible"
+    title="Tips"
+    width="1000"
+  >
+    <template #header>
+      <div>
+        添加标签
+        <el-radio-group v-model="tagType" size="small" style="margin-left: 8px; vertical-align: 5px;" v-if="0">
+          <el-radio-button label="个人" value="person" />
+          <el-radio-button label="系统" value="system" />
+        </el-radio-group>
+        <el-input v-model="searchValue" size="small" style="width: 120px; margin-left: 8px;" placeholder="请输入标签名称" />
+      </div>
+    </template>
+    <div class="tag-list">
+      <div class="tab-list-item" v-for="item in tagList">
+        <el-checkbox :checked="isCheck(item)" @change="changeCheckBox(item)">
+          <div style="display: flex; width: 280px;">
+            <div style="flex: 1;line-height: 24px;">{{ item.name }}</div>
+            <el-button size="small" :icon="Edit" v-if="0"></el-button>
+            <el-button size="small" :icon="Delete" @click="deleteTag(item)"></el-button>
+          </div>
+        </el-checkbox>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="visible = false">取消</el-button>
+        <el-button type="primary" @click="handleAction('submit')">确定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+  <!-- 编辑标签弹窗 -->
+</template>
+
+<script setup>
+import { inject, ref, watch, computed, nextTick } from "vue";
+import { Plus, Edit, Delete } from "@element-plus/icons-vue";
+
+let searchTimer = null
+
+const { request } = inject("stConfig"); // 组件库全局配置
+
+const data = defineModel("data", { default: [] });
+const visible = ref(false);
+const tagType = ref('person'); // 标签类型
+const searchValue = ref(''); // 搜索值
+const totalTagList = ref([]); // 全部标签列表
+const tagList = ref([]); // 标签列表
+const checkList = ref([]); // 勾选列表
+
+const showCheckTagList = computed(() => {
+  return data.value.map(id => {
+    return {
+      name: totalTagList.value?.find(i => i.id === id)?.tagName,
+      id,
+    }
+  })
+})
+
+watch(() => tagType.value, () => {
+  searchValue.value = ''
+})
+
+watch(() => searchValue.value, () => {
+  clearTimeout(searchTimer)
+  searchTimer = setTimeout(() => {
+    getTagList()
+  }, 300)
+})
+
+const isCheck = (item) => {
+  return Boolean(checkList.value.includes(item.id))
+}
+
+const changeCheckBox = (item) => {
+  if (isCheck(item)) {
+    // 已经勾选
+    checkList.value = checkList.value.filter(i => i !== item.id)
+  } else {
+    checkList.value.push(item.id)
+  }
+}
+
+const handleAction = (action, index) => {
+  switch (action) {
+    // 新增
+    case "add": {
+      tagList.value = []
+      visible.value = true;
+      searchValue.value = '';
+      checkList.value = [...data.value]
+      getTagList()
+      break;
+    }
+    // 编辑
+    case "edit": {
+      const item = data.value[index];
+      compositeOrderForm.value = { ...item };
+      visible.value = true;
+      break;
+    }
+    // 窗口确认
+    case "submit": {
+      visible.value = false;
+      data.value = [...checkList.value]
+      break;
+    }
+    // 删除
+    case "delete": {
+      data.value.splice(index, 1);
+      break;
+    }
+  }
+};
+
+const deleteTag = (item) => {
+  ElMessageBox.alert(`确认删除标签“${item.name}”吗？`, '删除标签', {
+    confirmButtonText: 'OK',
+    callback: async (action) => {
+      if (action === 'confirm') {
+        await request.post('/alarm/deliversign/deleteTag', { tagId: item.id })
+        getTagList()
+        Elmessage.success('删除成功!')
+      }
+    },
+  })
+}
+
+const getTagList = async (isTotal = false) => {
+  if (tagType.value === 'person') {
+    // 个人标签
+    const res = await request.post('/alarm/deliversign/findTagsByUserId', { tagName: searchValue.value })
+    tagList.value = []
+    nextTick(() => {
+      tagList.value = res.body?.map(item => ({
+        name: item.tagName,
+        id: item.id
+      }))
+    })
+    if (isTotal) {
+      totalTagList.value = res.body
+    }
+  } else {
+    // 系统标签
+  }
+}
+
+getTagList(true)
+
+defineExpose({
+  updateTag: () => {
+    getTagList(true)
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.tag-list {
+  max-height: 40vh;
+  overflow-y: scroll;
+  .tab-list-item {
+    display: inline-block;
+    width: 33%;
+  }
+}
+</style>

package/packages/VarietySearch/index.vue

@@ -1,9 +1,10 @@
 <script setup name="VarietySearch">
-import { watch, computed, provide } from "vue";
+import { watch, computed, provide, ref } from "vue";
 import defaultConfig from "./config.js";
 import FactorScreen from "./components/FactorScreen/index.vue";
 import CommonIndicator from "./components/CommonIndicator/index.vue";
 import CompositeOrder from "./components/CompositeOrder/index.vue";
+import AddTag from "./components/AddTag/index.vue";
 
 const props = defineProps({ config: { type: Object, default: {} } });
 const searchData = defineModel("searchData");
@@ -34,6 +35,9 @@ searchData.value = Object.assign(searchData.value, {
   compositeOrder: [],
 });
 
+// 添加标签
+const addTagRef = ref();
+
 // 合并配置项
 const config = computed(() => {
   const result = {};
@@ -482,6 +486,10 @@ defineExpose({
       compositeOrder: [],
     };
   },
+  // 更新标签
+  updateTag: () => {
+    addTagRef.value.updateTag();
+  },
 });
 </script>
 
@@ -548,23 +556,16 @@ defineExpose({
       </div>
     </template>
     <!-- 自定标签 -->
-    <template v-if="config.customTag?.show && customTagDict.length">
+    <template v-if="config.customTag?.show">
       <div class="variety-search-row">
         <div class="title">
           <span>自定标签: </span>
           <span @click="clearRow('customTag')">不限</span>
         </div>
-        <el-checkbox-group
-          v-model="searchData.customTag"
-          size="small"
-        >
-          <el-checkbox
-            v-for="{ label, value } in customTagDict"
-            :label="label"
-            :value="value"
-            :key="value"
-          />
-        </el-checkbox-group>
+        <AddTag
+          ref="addTagRef"
+          v-model:data="searchData.customTag"
+        />
       </div>
     </template>
     <!-- 价差转换 -->

package/src/pages/KlineBasic/api.js

@@ -1,6 +1,6 @@
 import axios from "axios";
 
-const token = "d06d8c9c2ea6c489dc94820c084f7d28";
+const token = "8461980aa5ae69587e642326d4c030a2";
 const host = "http://192.168.12.38:5173";
 
 // 获取指标线配置