st-comp 0.0.126 → 0.0.128

package/package.json

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

package/packages/KlineBasic/api.js

@@ -1,60 +1,58 @@
-import axios from "axios";
-import { getToken, getUserData } from 'st-func'
+import { initRequest, isLogin, getToken, loginout, getUserData } from "st-func";
 
-const token = getToken();
-const host = "http://127.0.0.1:7001";
+let get = null;
+let post = null;
 
-// 获取K线数据以及基础数据
-export const getKlineBasic = async (data) => {
-  const res = await axios({
-    method: "post",
-    headers: { token },
-    url: `${host}/middleLayer/kline/getKlineBasic`,
-    data: { ...data, userId: getUserData('id')},
+export const initRequestByEnv = (env) => {
+  const requestFn = initRequest(env, {
+    handleReq: (request) => {
+      if (isLogin()) {
+        request.headers["token"] = getToken();
+      }
+    },
+    handleRes: (response) => {
+      const { data } = response;
+      // 登录失效
+      if (data.code === 401) {
+        if (location.origin.includes("localhost")) {
+          location.href = `${location.origin}/#/404`;
+        } else {
+          loginout();
+        }
+        return true;
+      }
+    },
   });
-  return res.data;
+  get = requestFn.get;
+  post = requestFn.post;
+}
+
+// 获取K线数据以及基础数据
+export const getKlineBasic = (data) => {
+  return post("/middleLayer/kline/getKlineBasic", { ...data, userId: getUserData('id')});
 }
 
 // 获取K线数据
-export const getKline = async (data) => {
-  const res = await axios({
-    method: "post",
-    headers: { token },
-    url: `${host}/middleLayer/kline/getKline`,
-    data,
-  });
-  return res.data;
+export const getKline = (data) => {
+  return post("/middleLayer/kline/getKline", data);
 }
 
 // 画线预警
 export const addWarningLine = async (data) => {
-  const res = await axios({
-    method: "post",
-    headers: { token },
-    url: `${host}/middleLayer/post/alarm/deliversign/addAlarmPrice`,
-    data: { ...data, userId: getUserData('id')},
-  });
-  return res.data;
+  return post("/alarm/deliversign/addAlarmPrice", { ...data, userId: getUserData('id')});
 };
 
 // 获取画线预警列表
 export const getWarningLine = async (data) => {
-  const res = await axios({
-    method: "post",
-    headers: { token },
-    url: `${host}/middleLayer/post/alarm/deliversign/findAlarmPriceByUserId`,
-    data: { ...data, userId: getUserData('id')},
-  });
-  return res.data;
+  return post("/alarm/deliversign/findAlarmPriceByUserId", { ...data, userId: getUserData('id')});
 };
 
 // 更新画线预警
 export const updateWarningLine = async (data) => {
-  const res = await axios({
-    method: "post",
-    headers: { token },
-    url: `${host}/middleLayer/post/alarm/deliversign/updateAlarmPrice`,
-    data: { ...data, userId: getUserData('id')},
-  });
-  return res.data;
+  return post("/alarm/deliversign/updateAlarmPrice", { ...data, userId: getUserData('id')});
+};
+
+// 删除画线预警
+export const deleteWarningLine = async (data) => {
+  return post("/alarm/deliversign/deleteAlarmPrice", { ...data, userId: getUserData('id')});
 };

package/packages/KlineBasic/index.vue

@@ -7,7 +7,7 @@
       class="klineBasic-main"
       :style="{ height: config.showSubChart ? '70%' : '100%' }"
     >
-      <Contextmenu>
+      <Contextmenu @closeContextMenuCallBack="closeContextMenuCallBack">
         <div ref="klineBasicMainRef" style="height: 100%;"></div>
         <template #popover>
           <el-menu
@@ -40,21 +40,58 @@
         :subIndicatorList="indicatorStore?.subIndicatorList"
       />
     </div>
+    <div class="klineBasic-empty" v-if="isEmpty">
+      <el-empty
+        class="klineBasic-empty-content"
+        description="暂无数据"
+      />
+    </div>
+    <div class="klineBasic-error" v-if="isError">
+      <div class="klineBasic-error-content">
+        加载失败，请刷新重试
+      </div>
+      <div style="text-align: center;">
+        <el-button @click="getMainData">刷新</el-button>
+      </div>
+    </div>
   </div>
+  <!-- 画线预警-修改价格弹窗 -->
+  <el-dialog
+    v-model="warningLineChangeVisible"
+    title="画线预警-修改价格"
+    width="30%"
+    align-center
+  >
+    <span style="margin-right: 10px">预警价格:</span>
+    <el-input-number
+      v-model="warningLineChangeValue"
+      placeholder="输入预警价格"
+    />
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="warningLineChangeVisible = false">取消</el-button>
+        <el-button
+          type="primary"
+          @click="changeWarningLine"
+          >确定</el-button
+        >
+      </span>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup>
 import { onMounted, onUnmounted, ref, watch, computed } from "vue"
 import * as echarts from "echarts"
 import dayjs from "dayjs"
-import { getKlineBasic, getKline, addWarningLine } from './api'
-import { addResizeListener, stMath } from 'st-func'
-import { getWarningLineOptions } from './utils'
+import { initRequestByEnv, getKlineBasic, getKline, getWarningLine, addWarningLine, updateWarningLine, deleteWarningLine } from './api'
+import { addResizeListener } from 'st-func'
+import { getMainOptions, getWarningLineOptions } from './utils'
 import KlineTips from './components/KlineTips/index.vue'
 import KlineSub from './components/KlineSub/index.vue'
 import Contextmenu from './components/Contextmenu/index.vue'
 
-const { round } = stMath;
+const defaultMenuData = [{ label: "画线预警", key: "drawWarningLine" }]
 
 let resizeRo = null; // dom元素监听事件
 let mainChartIns = null // 主图实例
@@ -85,11 +122,11 @@ const props = defineProps({
     default: () => null
   }, // 合约类型
   cycle: {
-    type: String,
+    type: [String, Number],
     default: () => null
   }, // 周期id
   mainIndicator: {
-    type: Object,
+    type: String,
     default: () => ''
   }, // 主图指标名称
   indicatorStore: {
@@ -105,24 +142,35 @@ const props = defineProps({
     default: () => null,
   },
   right: {
-    type: Number,
+    type: [String, Number],
     default: 1,
   }, // 复权方式，前复权-1，不复权-0
   config: {
     type: Object,
     default: () => ({})
   }, // 配置
+  env: {
+    type: Object,
+    default: () => ({})
+  }, // 环境变量
 })
 
+const isEmpty = ref(false) // 是否无数据
+const isError = ref(false) // 是否异常
+
 const klineBasicMainRef = ref(null) // 主图Dom元素
 const klineSubRef = ref(null) // 副图组件元素
 const subIndicator = ref('VOL') // 副图指标
 const activeIndex = ref(0) // 当前选中的k线
 
 const chartData = ref({}) // 图表数据
+
 const warningLineData = ref([]) // 预警线数据
+const warningItem = ref({}); // 右键点击的预警线
+const warningLineChangeVisible = ref(false); // 修改预警线价格弹窗visible
+const warningLineChangeValue = ref(''); // 修改预警线价格弹窗value
 
-const menuData = ref([{ label: "画线预警", key: "drawWarningLine" }]);
+const menuData = ref([ ...defaultMenuData ]); // 右键菜单
 
 const config = computed(() => {
   return {
@@ -131,6 +179,7 @@ const config = computed(() => {
     maxShowCounts: 5000, // 单页最大展示条数
     loadCheckCounts: 500, // 滚动加载检测的条数
     showSubChart: true, // 是否展示副图
+    gridTop: 48, // 主图顶部距离
     gridLeft: 80, // 主图左侧距离
     gridRight: 50, // 主图右侧距离
     showWarningLine: true, // 是否展示预警线
@@ -151,6 +200,7 @@ watch(
 )
 
 onMounted(() => {
+  initRequestByEnv(props.env)
   getMainData()
 })
 
@@ -215,62 +265,76 @@ const addEventListener = () => {
     activeIndex.value = index;
   });
   // 右键点击事件
-  // let echartsContextMenuTimer = null;
-  // mainChart?.on("contextmenu", (params) => {
-  //   echartsContextMenuTimer = setTimeout(() => {
-  //     if (params.componentType === "graphic") {
-  //       warningItem.value = params.info;
-  //       menuData.value = [
-  //         { label: "删除画线", key: "delete" },
-  //         { label: "修改画线", key: "change" },
-  //       ];
-  //     }
-  //     clearTimeout(echartsContextMenuTimer);
-  //     echartsContextMenuTimer = null;
-  //   });
-  // });
+  let echartsContextMenuTimer = null;
+  mainChartIns?.on("contextmenu", (params) => {
+    echartsContextMenuTimer = setTimeout(() => {
+      if (params.componentType === "graphic") {
+        warningItem.value = params.info;
+        menuData.value = [
+          { label: "删除画线", key: "deleteWarningLine" },
+          { label: "修改画线", key: "changeWarningLine" },
+        ];
+      }
+      clearTimeout(echartsContextMenuTimer);
+      echartsContextMenuTimer = null;
+    });
+  });
 };
 
 const getMainData = async () => {
-  if (!props.variety || !props.cycle) return
-  const {
-    variety, featureId, cycle, indicatorStore, mainIndicator, right, startTime, endTime,
-  } = props
-  const { defaultShowCounts, addCounts, showWarningLine, getFactorData } = config.value
-  const params = {
-    variety,
-    featureId,
-    cycle,
-    mainIndicatorList: indicatorStore.getIndicatorParams(mainIndicator),
-    subIndicator: subIndicator.value,
-    right,
-    showWarningLine,
-    getFactorData,
-  }
-  if (startTime && endTime) {
-    // 开始时间+结束时间
-    params.startTime = startTime
-    params.endTime = endTime
-  } else if (startTime) {
-    // 开始时间
-    params.startTime = startTime
-    params.limit = defaultShowCounts + addCounts
-  } else if (endTime) {
-    // 结束时间
-    params.endTime = endTime
-    params.limit = defaultShowCounts + addCounts
-  } else {
-    // 未传入时间，使用最新时间作为结束时间请求数据
-    params.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
-    params.limit = defaultShowCounts + addCounts
-  }
-  const res = await getKlineBasic(params)
-  chartData.value = res?.body?.kline
-  warningLineData.value = res?.body?.warningLine || []
-  draw()
-  drawLine()
-  if (getFactorData) {
-    emit('getFactorData', res?.body?.factor)
+  try {
+    if (!props.variety || !props.cycle) return
+    const {
+      variety, featureId, cycle, indicatorStore, mainIndicator, right, startTime, endTime,
+    } = props
+    const { defaultShowCounts, addCounts, showWarningLine, getFactorData } = config.value
+    const params = {
+      variety,
+      featureId,
+      cycle,
+      mainIndicatorList: indicatorStore.getIndicatorParams(mainIndicator),
+      subIndicator: subIndicator.value,
+      right,
+      showWarningLine,
+      getFactorData,
+    }
+    if (startTime && endTime) {
+      // 开始时间+结束时间
+      params.startTime = startTime
+      params.endTime = endTime
+    } else if (startTime) {
+      // 开始时间
+      params.startTime = startTime
+      params.limit = defaultShowCounts + addCounts
+    } else if (endTime) {
+      // 结束时间
+      params.endTime = endTime
+      params.limit = defaultShowCounts + addCounts
+    } else {
+      // 未传入时间，使用最新时间作为结束时间请求数据
+      params.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
+      params.limit = defaultShowCounts + addCounts
+    }
+    const res = await getKlineBasic(params)
+    if (!res?.body?.kline?.time?.length) {
+      isEmpty.value = true;
+      isError.value = false;
+      return
+    } else {
+      isEmpty.value = false;
+      isError.value = false;
+    }
+    chartData.value = res?.body?.kline
+    warningLineData.value = res?.body?.warningLine || []
+    draw()
+    drawLine()
+    if (getFactorData) {
+      emit('getFactorData', res?.body?.factor)
+    }
+  } catch(err) {
+    isError.value = true;
+    isEmpty.value = false;
+    throw new Error(err)
   }
 }
 
@@ -321,10 +385,10 @@ const getMoreData = async (type) => {
 
 const draw = (keepDataZoom = false) => {
   initChart()
-  const { data, time } = chartData.value
+  const { time } = chartData.value
   const { gridRight, gridLeft, defaultShowCounts, maxShowCounts, showSubChart } = config.value
-  let startValue = data.length - 1 - defaultShowCounts
-  let endValue = data.length - 1
+  let startValue = time.length - 1 - defaultShowCounts
+  let endValue = time.length - 1
   // 保持缩放位置
   if (keepDataZoom) {
     const originOption = mainChartIns.getOption()
@@ -335,94 +399,8 @@ const draw = (keepDataZoom = false) => {
     startValue = time.findIndex((item) => item === originStartTime)
     endValue = time.findIndex((item) => item === originEndTime)
   }
-  mainChartIns.setOption({
-    animation: false,
-    grid: {
-      top: '48px',
-      right: `${gridRight}px`,
-      bottom: showSubChart ? '6px' : '24px',
-      left: `${gridLeft}px`,
-    },
-    dataZoom: [
-      {
-        type: "inside",
-        startValue,
-        endValue,
-        maxValueSpan: maxShowCounts,
-      },
-    ],
-    tooltip: {
-      trigger: "axis",
-      appendToBody: true,
-      confine: true,
-      axisPointer: {
-        type: "cross",
-        label: {
-          rich: {},
-          formatter: (data) => {
-            const { axisDimension, value } = data;
-            if (axisDimension === "x") {
-              return showSubChart ? "" : value;
-            } else {
-              return String(round(value));
-            }
-          },
-        },
-      },
-      formatter: () => "",
-    },
-    xAxis: {
-      show: showSubChart ? false : true,
-      type: "category",
-      data: time,
-      splitLine: {
-        show: false,
-      },
-    },
-    yAxis: {
-      type: "value",
-      axisLine: {
-        show: true,
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          type: "dotted",
-          color: "#333",
-        },
-      },
-      min: (value) => round(value.min),
-      max: (value) => round(value.max),
-    },
-    series: [
-      {
-        type: "candlestick",
-        data,
-        itemStyle: {
-          color: "transparent",
-          color0: "#00FFFF",
-          borderColor: "#FF0000",
-          borderColor0: "#00FFFF",
-          borderWidth: 1,
-        },
-      },
-      ...chartData.value.mainIndicator.map((item) => {
-        return {
-          name: item.key,
-          type: 'line',
-          silent: true,
-          symbol: 'none',
-          data: item.data,
-          lineStyle: {
-            width: item.width || 1,
-          },
-          itemStyle: {
-            color: item.color,
-          }
-        }
-      })
-    ],
-  }, true)
+  const options = getMainOptions(chartData.value, config.value, startValue, endValue)
+  mainChartIns.setOption(options, true)
   activeIndex.value = endValue
   if (showSubChart) {
     klineSubRef.value.draw(
@@ -441,10 +419,8 @@ const drawLine = () => {
     {
       ...mainChartOption,
       graphic: [
-        ...getWarningLineOptions(mainChartIns, warningLineData.value, props, config.value, (newWarningLineData) => {
-          warningLineData.value = newWarningLineData;
-          drawLine()
-          emit('change', 'warningLine', newWarningLineData);
+        ...getWarningLineOptions(mainChartIns, warningLineData.value, props, config.value, () => {
+          updateWarningLineAndDraw()
         })
       ],
     },
@@ -452,7 +428,15 @@ const drawLine = () => {
   );
 }
 
-const menuClick = (item) => {
+// 更新预警线并绘制
+const updateWarningLineAndDraw = async () => {
+  const res = await getWarningLine({ featureId: props.featureId })
+  warningLineData.value = res?.body || [];
+  drawLine()
+  emit('change', 'warningLine', warningLineData.value);
+}
+
+const menuClick = async (item) => {
   const { variety, varietyName, featureId, featureType } = props
   if (item.key === 'drawWarningLine') {
     // 画线预警
@@ -526,14 +510,41 @@ const menuClick = (item) => {
         warnPrice: newWarnPrice,
       });
       ElMessage.success("画线预警成功!");
+      updateWarningLineAndDraw()
     };
     // 4.绑定echarts点击事件
     mainChartIns?.getZr().on("mousedown", handleClick);
+  } else if (item.key === 'deleteWarningLine') {
+    // 删除预警线
+    await deleteWarningLine({ id: warningItem.value.id });
+    ElMessage.success("画线预警删除成功");
+    updateWarningLineAndDraw()
+  } else if (item.key === 'changeWarningLine') {
+    warningLineChangeVisible.value = true;
+    warningLineChangeValue.value = warningItem.value.warnPrice;
   }
 }
 
+const changeWarningLine = async () => {
+  const { variety, varietyName, featureId, featureType } = props
+  await updateWarningLine({
+    id: warningItem.value.id,
+    featureCode: variety, //品种代码
+    featureName: varietyName, //品种名称
+    featureId, //品种id
+    featureType, //品种类型
+    warnPrice: warningLineChangeValue.value,
+  });
+  ElMessage.success("画线预警修改成功");
+  updateWarningLineAndDraw()
+}
+
+const closeContextMenuCallBack = () => {
+  menuData.value =[ ...defaultMenuData ];
+};
+
 defineExpose({
-  draw(type, data) {
+  draw: (type, data) => {
     if (type === 'warningLine') {
       warningLineData.value = data;
       drawLine()
@@ -561,5 +572,42 @@ defineExpose({
     width: 100%;
     height: 30%;
   }
+  &-empty {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%; 
+    background: #000;
+    &-content {
+      height: 100%;
+      padding: 0;
+      --el-empty-fill-color-0: var(--el-color-black);
+      --el-empty-fill-color-1: #4b4b52;
+      --el-empty-fill-color-2: #36383d;
+      --el-empty-fill-color-3: #1e1e20;
+      --el-empty-fill-color-4: #262629;
+      --el-empty-fill-color-5: #202124;
+      --el-empty-fill-color-6: #212224;
+      --el-empty-fill-color-7: #1b1c1f;
+      --el-empty-fill-color-8: #1c1d1f;
+      --el-empty-fill-color-9: #18181a;
+    }
+  }
+  &-error {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%; 
+    background: #000;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    &-content {
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      margin-bottom: 12px;
+    }
+  }
 }
 </style>