update

public/config/app.config.json

@@ -1,4 +1,4 @@
 {
-    "apiUrl": "http://192.168.31.139:8080/cfg?key=test_139",
+    "apiUrl": "http://47.104.141.54:38280/cfg?key=mtp_20",
     "icoTitle": "云融"
 }

src/common/components/echart/echart-kline/index.vue

@@ -12,345 +12,345 @@ import { handleEchart, Source } from './setup';
 import moment from 'moment';
 
 export default defineComponent({
-    name: 'EchartKline',
-    components: {
-        EchartBase,
+  name: 'EchartKline',
+  components: {
+    EchartBase,
+  },
+  props: {
+    // 实时行情数据
+    quoteData: {
+      type: Object as PropType<QueryQuoteDayRsp>,
+      required: true,
     },
-    props: {
-        // 实时行情数据
-        quoteData: {
-            type: Object as PropType<QueryQuoteDayRsp>,
-            required: true,
-        },
-        // 周期类型
-        cycleType: {
-            type: Number as PropType<CycleType>,
-            required: true,
-        },
-        // 指标类型
-        seriesType: {
-            type: String,
-            default: 'MACD',
-        },
+    // 周期类型
+    cycleType: {
+      type: Number as PropType<CycleType>,
+      required: true,
     },
-    setup(props) {
-        const loading = ref(true);
-        const isEmpty = ref(false);
-        const historyIndexs: number[] = []; // 行情历史数据中所有非补充数据的索引位置(用于计算均线)
-        const { chartData, options, updateOptions, initOptions } = handleEchart();
+    // 指标类型
+    seriesType: {
+      type: String,
+      default: 'MACD',
+    },
+  },
+  setup(props) {
+    const loading = ref(true);
+    const isEmpty = ref(false);
+    const historyIndexs: number[] = []; // 行情历史数据中所有非补充数据的索引位置(用于计算均线)
+    const { chartData, options, updateOptions, initOptions } = handleEchart();
 
-        // 处理图表数据
-        const handleData = (rawData: QueryHistoryDatasRsp[]): void => {
-            const { source } = chartData.value;
-            source.length = 0;
-            historyIndexs.length = 0;
+    // 处理图表数据
+    const handleData = (rawData: QueryHistoryDatasRsp[]): void => {
+      const { source } = chartData.value;
+      source.length = 0;
+      historyIndexs.length = 0;
 
-            rawData.forEach((item, index) => {
-                const { o, c, h, l, ts, tv } = item;
-                source.push({
-                    date: moment(ts).format('YYYY-MM-DD HH:mm:ss'),
-                    open: o,
-                    close: c,
-                    lowest: l,
-                    highest: h,
-                    ma5: '-',
-                    ma10: '-',
-                    ma15: '-',
-                    vol: tv,
-                    macd: '-',
-                    dif: '-',
-                    dea: '-',
-                    k: '-',
-                    d: '-',
-                    j: '-',
-                    cci: '-',
-                });
-                if (!item.f) historyIndexs.push(index); // 排除补充数据
-            });
+      rawData.forEach((item, index) => {
+        const { o, c, h, l, ts, tv } = item;
+        source.push({
+          date: moment(ts).format('YYYY-MM-DD HH:mm:ss'),
+          open: o,
+          close: c,
+          lowest: l,
+          highest: h,
+          ma5: '-',
+          ma10: '-',
+          ma15: '-',
+          vol: tv,
+          macd: '-',
+          dif: '-',
+          dea: '-',
+          k: '-',
+          d: '-',
+          j: '-',
+          cci: '-',
+        });
+        if (!item.f) historyIndexs.push(index); // 排除补充数据
+      });
 
-            calcMA('ma5', 5);
-            calcMA('ma10', 10);
-            calcMA('ma15', 15);
-            calcMACD();
-            calcKDJ();
-            clacCCI();
-        };
+      calcMA('ma5', 5);
+      calcMA('ma10', 10);
+      calcMA('ma15', 15);
+      calcMACD();
+      calcKDJ();
+      clacCCI();
+    };
 
-        // 计算平均线
-        const calcMA = (key: keyof Source, count: number) => {
-            const { source } = chartData.value;
-            let result: Source[keyof Source] = '-';
+    // 计算平均线
+    const calcMA = (key: keyof Source, count: number) => {
+      const { source } = chartData.value;
+      let result: Source[keyof Source] = '-';
 
-            if (source.length >= count) {
-                // 均线起始位置
-                const startIndex = historyIndexs[count - 1];
-                for (let i = 0; i < source.length; i++) {
-                    if (startIndex !== undefined && i > startIndex) {
-                        const j = historyIndexs.findIndex((val) => val === i);
-                        // 判断是否补充数据
-                        if (j === -1) {
-                            result = source[i - 1][key]; // 取上个平均值
-                        } else {
-                            // 向后取MA数
-                            const maIndexs = historyIndexs.slice(j - (count - 1), j + 1);
-                            // 计算总价
-                            const total = maIndexs.reduce((sum, val) => sum + source[val].close, 0);
-                            // 计算均线
-                            result = (total / count).toFixed(2);
-                        }
-                    }
-                    (<typeof result>source[i][key]) = result;
-                }
+      if (source.length >= count) {
+        // 均线起始位置
+        const startIndex = historyIndexs[count - 1];
+        for (let i = 0; i < source.length; i++) {
+          if (startIndex !== undefined && i > startIndex) {
+            const j = historyIndexs.findIndex((val) => val === i);
+            // 判断是否补充数据
+            if (j === -1) {
+              result = source[i - 1][key]; // 取上个平均值
+            } else {
+              // 向后取MA数
+              const maIndexs = historyIndexs.slice(j - (count - 1), j + 1);
+              // 计算总价
+              const total = maIndexs.reduce((sum, val) => sum + source[val].close, 0);
+              // 计算均线
+              result = (total / count).toFixed(2);
             }
-        };
+          }
+          (<typeof result>source[i][key]) = result;
+        }
+      }
+    };
 
-        // 计算EMA
-        const calcEMA = (close: number[], n: number) => {
-            const ema: number[] = [],
-                a = 2 / (n + 1); // 平滑系数
-            for (let i = 0; i < close.length; i++) {
-                if (i === 0) {
-                    //第一个EMA(n)是前n个收盘价代数平均
-                    const result = close.slice(0, n).reduce((sum, val) => sum + val, 0) / n;
-                    ema.push(result);
-                } else {
-                    // EMA(n) = α × Close + (1 - α) × EMA(n - 1)
-                    const result = a * close[i] + (1 - a) * ema[i - 1];
-                    ema.push(result);
-                }
-            }
-            return ema;
-        };
+    // 计算EMA
+    const calcEMA = (close: number[], n: number) => {
+      const ema: number[] = [],
+        a = 2 / (n + 1); // 平滑系数
+      for (let i = 0; i < close.length; i++) {
+        if (i === 0) {
+          //第一个EMA(n)是前n个收盘价代数平均
+          const result = close.slice(0, n).reduce((sum, val) => sum + val, 0) / n;
+          ema.push(result);
+        } else {
+          // EMA(n) = α × Close + (1 - α) × EMA(n - 1)
+          const result = a * close[i] + (1 - a) * ema[i - 1];
+          ema.push(result);
+        }
+      }
+      return ema;
+    };
 
-        // 计算DEA
-        const calcDEA = (dif: number[]) => {
-            return calcEMA(dif, 9);
-        };
+    // 计算DEA
+    const calcDEA = (dif: number[]) => {
+      return calcEMA(dif, 9);
+    };
 
-        // 计算DIF
-        const calcDIF = (close: number[]) => {
-            const dif: number[] = [],
-                emaShort = calcEMA(close, 12),
-                emaLong = calcEMA(close, 26);
+    // 计算DIF
+    const calcDIF = (close: number[]) => {
+      const dif: number[] = [],
+        emaShort = calcEMA(close, 12),
+        emaLong = calcEMA(close, 26);
 
-            for (let i = 0; i < close.length; i++) {
-                const result = emaShort[i] - emaLong[i];
-                dif.push(result);
-            }
-            return dif;
-        };
+      for (let i = 0; i < close.length; i++) {
+        const result = emaShort[i] - emaLong[i];
+        dif.push(result);
+      }
+      return dif;
+    };
 
-        // 计算MACD
-        const calcMACD = () => {
-            const { source } = chartData.value,
-                close = source.map((item) => item.close),
-                dif = calcDIF(close),
-                dea = calcDEA(dif);
+    // 计算MACD
+    const calcMACD = () => {
+      const { source } = chartData.value,
+        close = source.map((item) => item.close),
+        dif = calcDIF(close),
+        dea = calcDEA(dif);
 
-            for (let i = 0; i < source.length; i++) {
-                source[i].dif = dif[i].toFixed(2);
-                source[i].dea = dea[i].toFixed(2);
-                source[i].macd = ((dif[i] - dea[i]) * 2).toFixed(2);
-            }
-        };
+      for (let i = 0; i < source.length; i++) {
+        source[i].dif = dif[i].toFixed(2);
+        source[i].dea = dea[i].toFixed(2);
+        source[i].macd = ((dif[i] - dea[i]) * 2).toFixed(2);
+      }
+    };
 
-        // 计算KDJ
-        const calcKDJ = () => {
-            const { source } = chartData.value;
-            for (let i = 0; i < source.length; i++) {
-                const item = source[i];
-                if (i < 8) {
-                    item.k = '-';
-                    item.d = '-';
-                    item.j = '-';
-                } else {
-                    let rsv = 50; // 如果最低价等于最高价，RSV默认值为50
-                    if (item.lowest !== item.highest) {
-                        const n9 = source.slice(i - 8, i + 1).map((item) => item.close), // 取前9个收盘价
-                            max = Math.max(...n9),
-                            min = Math.min(...n9);
-                        // 计算RSV
-                        rsv = ((item.close - min) / (max - min)) * 100;
-                    }
+    // 计算KDJ
+    const calcKDJ = () => {
+      const { source } = chartData.value;
+      for (let i = 0; i < source.length; i++) {
+        const item = source[i];
+        if (i < 8) {
+          item.k = '-';
+          item.d = '-';
+          item.j = '-';
+        } else {
+          let rsv = 50; // 如果最低价等于最高价，RSV默认值为50
+          if (item.lowest !== item.highest) {
+            const n9 = source.slice(i - 8, i + 1).map((item) => item.close), // 取前9个收盘价
+              max = Math.max(...n9),
+              min = Math.min(...n9);
+            // 计算RSV
+            rsv = ((item.close - min) / (max - min)) * 100;
+          }
 
-                    const yestK = Number(source[i - 1].k); // 取前一日K值
-                    const yestD = Number(source[i - 1].d); // 取前一日D值
+          const yestK = Number(source[i - 1].k); // 取前一日K值
+          const yestD = Number(source[i - 1].d); // 取前一日D值
 
-                    if (isNaN(yestK) || isNaN(yestD)) {
-                        // 如果前一日的K值或D值不存在则默认值为50
-                        item.k = '50';
-                        item.d = '50';
-                        item.j = '50';
-                    } else {
-                        const k = (2 / 3) * yestK + (1 / 3) * rsv,
-                            d = (2 / 3) * yestD + (1 / 3) * yestK,
-                            j = 3 * k - 2 * d;
+          if (isNaN(yestK) || isNaN(yestD)) {
+            // 如果前一日的K值或D值不存在则默认值为50
+            item.k = '50';
+            item.d = '50';
+            item.j = '50';
+          } else {
+            const k = (2 / 3) * yestK + (1 / 3) * rsv,
+              d = (2 / 3) * yestD + (1 / 3) * yestK,
+              j = 3 * k - 2 * d;
 
-                        item.k = k.toFixed(2);
-                        item.d = d.toFixed(2);
-                        item.j = j.toFixed(2);
-                    }
-                }
-            }
-        };
+            item.k = k.toFixed(2);
+            item.d = d.toFixed(2);
+            item.j = j.toFixed(2);
+          }
+        }
+      }
+    };
 
-        // 计算CCI
-        const clacCCI = () => {
-            const { source } = chartData.value;
-            for (let i = 0; i < source.length; i++) {
-                const item = source[i];
-                if (i < 13) {
-                    item.cci = '-';
-                } else {
-                    const tp = (item.close + item.lowest + item.highest) / 3, // (收盘价 + 最低价 + 最高价) / 3
-                        n14 = source.slice(i - 13, i + 1), // 取前14条数据
-                        ma = n14.reduce((sum, e) => sum + (e.close + e.lowest + e.highest) / 3, 0) / 14, // 计算前14条数据的(TP)价总和÷N
-                        md = n14.reduce((sum, e) => sum + Math.abs(ma - (e.close + e.lowest + e.highest) / 3), 0) / 14, // 计算前14条数据的(MA-TP)价总和÷N
-                        result = (tp - ma) / md / 0.015;
+    // 计算CCI
+    const clacCCI = () => {
+      const { source } = chartData.value;
+      for (let i = 0; i < source.length; i++) {
+        const item = source[i];
+        if (i < 13) {
+          item.cci = '-';
+        } else {
+          const tp = (item.close + item.lowest + item.highest) / 3, // (收盘价 + 最低价 + 最高价) / 3
+            n14 = source.slice(i - 13, i + 1), // 取前14条数据
+            ma = n14.reduce((sum, e) => sum + (e.close + e.lowest + e.highest) / 3, 0) / 14, // 计算前14条数据的(TP)价总和÷N
+            md = n14.reduce((sum, e) => sum + Math.abs(ma - (e.close + e.lowest + e.highest) / 3), 0) / 14, // 计算前14条数据的(MA-TP)价总和÷N
+            result = (tp - ma) / md / 0.015;
 
-                    item.cci = result.toFixed(2);
-                }
-            }
-        };
+          item.cci = result.toFixed(2);
+        }
+      }
+    };
 
-        // 更新图表K线数据
-        const updateChartData = () => {
-            const { source } = chartData.value,
-                lastIndex = source.length - 1, // 历史行情最后索引位置
-                lastTime = moment(source[lastIndex].date), // 历史行情最后时间
-                newTime = moment(props.quoteData.lasttime), // 实时行情最新时间
-                newPrice = props.quoteData.last; // 实时行情最新价
+    // 更新图表K线数据
+    const updateChartData = () => {
+      const { source } = chartData.value,
+        lastIndex = source.length - 1, // 历史行情最后索引位置
+        lastTime = moment(source[lastIndex].date), // 历史行情最后时间
+        newTime = moment(props.quoteData.lasttime), // 实时行情最新时间
+        newPrice = props.quoteData.last; // 实时行情最新价
 
-            let cycleMilliseconds = 60 * 1000; // 周期毫秒数
+      let cycleMilliseconds = 60 * 1000; // 周期毫秒数
 
-            switch (props.cycleType) {
-                case CycleType.minutes5:
-                    cycleMilliseconds *= 5;
-                    break;
-                case CycleType.minutes30:
-                    cycleMilliseconds *= 30;
-                    break;
-                case CycleType.minutes60:
-                    cycleMilliseconds *= 60;
-                    break;
-                case CycleType.hours2:
-                    cycleMilliseconds *= 2 * 60;
-                    break;
-                case CycleType.Hours4:
-                    cycleMilliseconds *= 4 * 60;
-                    break;
-                case CycleType.days:
-                    cycleMilliseconds *= 24 * 60;
-                    break;
-            }
+      switch (props.cycleType) {
+        case CycleType.minutes5:
+          cycleMilliseconds *= 5;
+          break;
+        case CycleType.minutes30:
+          cycleMilliseconds *= 30;
+          break;
+        case CycleType.minutes60:
+          cycleMilliseconds *= 60;
+          break;
+        case CycleType.hours2:
+          cycleMilliseconds *= 2 * 60;
+          break;
+        case CycleType.Hours4:
+          cycleMilliseconds *= 4 * 60;
+          break;
+        case CycleType.days:
+          cycleMilliseconds *= 24 * 60;
+          break;
+      }
 
-            const diffTime = newTime.valueOf() - lastTime.valueOf(); // 计算时间差
+      const diffTime = newTime.valueOf() - lastTime.valueOf(); // 计算时间差
 
-            if (diffTime > cycleMilliseconds * 2) {
-                // 时间间隔超过两个周期，重新请求历史数据
-            } else {
-                // 判断时间差是否大于周期时间
-                if (diffTime > cycleMilliseconds) {
-                    lastTime.add(cycleMilliseconds, 'ms');
-                    // 添加历史行情
-                    source.push({
-                        date: lastTime.format('YYYY-MM-DD HH:mm:ss'),
-                        open: newPrice,
-                        close: newPrice,
-                        lowest: newPrice,
-                        highest: newPrice,
-                        ma5: '-',
-                        ma10: '-',
-                        ma15: '-',
-                        vol: 0,
-                        macd: '-',
-                        dif: '-',
-                        dea: '-',
-                        k: '-',
-                        d: '-',
-                        j: '-',
-                        cci: '-',
-                    });
-                    historyIndexs.push(lastIndex + 1); // 添加历史行情索引
-                } else {
-                    const lastData = source[lastIndex];
-                    if (lastData.lowest > newPrice) {
-                        lastData.lowest = newPrice; //更新最低价
-                    }
-                    if (lastData.highest < newPrice) {
-                        lastData.highest = newPrice; //更新最高价
-                    }
-                    lastData.close = newPrice; //更新收盘价
-                }
+      if (diffTime > cycleMilliseconds * 2) {
+        // 时间间隔超过两个周期，重新请求历史数据
+      } else {
+        // 判断时间差是否大于周期时间
+        if (diffTime > cycleMilliseconds) {
+          lastTime.add(cycleMilliseconds, 'ms');
+          // 添加历史行情
+          source.push({
+            date: lastTime.format('YYYY-MM-DD HH:mm:ss'),
+            open: newPrice,
+            close: newPrice,
+            lowest: newPrice,
+            highest: newPrice,
+            ma5: '-',
+            ma10: '-',
+            ma15: '-',
+            vol: 0,
+            macd: '-',
+            dif: '-',
+            dea: '-',
+            k: '-',
+            d: '-',
+            j: '-',
+            cci: '-',
+          });
+          historyIndexs.push(lastIndex + 1); // 添加历史行情索引
+        } else {
+          const lastData = source[lastIndex];
+          if (lastData.lowest > newPrice) {
+            lastData.lowest = newPrice; //更新最低价
+          }
+          if (lastData.highest < newPrice) {
+            lastData.highest = newPrice; //更新最高价
+          }
+          lastData.close = newPrice; //更新收盘价
+        }
 
-                calcMA('ma5', 5);
-                calcMA('ma10', 10);
-                calcMA('ma15', 15);
-                calcMACD();
-                calcKDJ();
-                clacCCI();
+        calcMA('ma5', 5);
+        calcMA('ma10', 10);
+        calcMA('ma15', 15);
+        calcMACD();
+        calcKDJ();
+        clacCCI();
 
-                // 延迟图表更新，减少卡顿
-                debounce(() => {
-                    updateOptions(props.seriesType);
-                }, 1000);
-            }
-        };
+        // 延迟图表更新，减少卡顿
+        debounce(() => {
+          updateOptions(props.seriesType);
+        }, 1000);
+      }
+    };
 
-        // 监听行情最新价推送
-        watch(
-            () => props.quoteData.last,
-            () => {
-                if (!loading.value) {
-                    updateChartData();
-                }
-            }
-        );
+    // 监听行情最新价推送
+    watch(
+      () => props.quoteData.last,
+      () => {
+        if (!loading.value) {
+          updateChartData();
+        }
+      }
+    );
 
-        // 监听指标类型
-        watch(
-            () => props.seriesType,
-            (val) => {
-                if (!loading.value) {
-                    updateOptions(val);
-                }
-            }
-        );
+    // 监听指标类型
+    watch(
+      () => props.seriesType,
+      (val) => {
+        if (!loading.value) {
+          updateOptions(val);
+        }
+      }
+    );
 
-        // 监听周期选择变化
-        watchEffect(() => {
-            loading.value = true;
-            const params: QueryHistoryDatas = {
-                cycleType: props.cycleType,
-                goodsCode: props.quoteData.goodscode.toUpperCase(),
-                count: 1440,
-            };
-            // 查询K线数据
-            queryHistoryDatas(params)
-                .then((res) => {
-                    if (res.length) {
-                        isEmpty.value = false;
-                        // 日期升序排序
-                        const kdata = res.sort((a, b) => moment(a.ts).valueOf() - moment(b.ts).valueOf());
-                        handleData(kdata);
-                    } else {
-                        isEmpty.value = true;
-                    }
-                    initOptions(props.seriesType);
-                })
-                .catch(() => {
-                    isEmpty.value = true;
-                })
-                .finally(() => {
-                    loading.value = false;
-                });
+    // 监听周期选择变化
+    watchEffect(() => {
+      loading.value = true;
+      const params: QueryHistoryDatas = {
+        cycleType: props.cycleType,
+        goodsCode: props.quoteData.goodscode.toUpperCase(),
+        count: 1440,
+      };
+      // 查询K线数据
+      queryHistoryDatas(params)
+        .then((res) => {
+          if (res.length) {
+            isEmpty.value = false;
+            // 日期升序排序
+            const kdata = res.sort((a, b) => moment(a.ts).valueOf() - moment(b.ts).valueOf());
+            handleData(kdata);
+          } else {
+            isEmpty.value = true;
+          }
+          initOptions(props.seriesType);
+        })
+        .catch(() => {
+          isEmpty.value = true;
+        })
+        .finally(() => {
+          loading.value = false;
         });
+    });
 
-        return {
-            loading,
-            isEmpty,
-            options,
-        };
-    },
+    return {
+      loading,
+      isEmpty,
+      options,
+    };
+  },
 });
 </script>

src/common/components/echart/echart-timeline/index.vue

@@ -13,193 +13,193 @@ import { handleEchart } from './setup';
 import moment from 'moment';
 
 export default defineComponent({
-    name: 'EchartTime',
-    emits: ['change'],
-    components: {
-        EchartBase,
+  name: 'EchartTime',
+  emits: ['change'],
+  components: {
+    EchartBase,
+  },
+  props: {
+    // 实时行情数据
+    quoteData: {
+      type: Object as PropType<QueryQuoteDayRsp>,
+      required: true,
     },
-    props: {
-        // 实时行情数据
-        quoteData: {
-            type: Object as PropType<QueryQuoteDayRsp>,
-            required: true,
+  },
+  setup(props, { emit }) {
+    const loading = ref(false);
+    const isEmpty = ref(false);
+    const historyIndexs: number[] = []; // 行情历史数据中所有非补充数据的索引位置(用于计算均线)
+    const { chartData, options, updateOptions, initOptions } = handleEchart();
+
+    // 处理图表数据
+    const handleData = (rawData: QueryTSDataRsp): void => {
+      historyIndexs.length = 0; // 清空数据
+      const datas: number[] = [],
+        times: string[] = [],
+        xAxisTimes: string[] = [],
+        yestclose = rawData.preSettle,
+        decimal = rawData.decimalPlace;
+
+      // 历史行情日期
+      rawData.historyDatas.forEach((item, index) => {
+        const { c, ts } = item;
+        datas.push(c);
+        times.push(moment(ts).format('YYYY-MM-DD HH:mm:ss'));
+        if (!item.f) historyIndexs.push(index);
+      });
+
+      // 时间轴(开盘交易时间)
+      rawData.runSteps.forEach((item) => {
+        const { start, end } = item;
+        const rangeTime = getRangeTime(start, end, 'HH:mm', 'm');
+        xAxisTimes.push(...rangeTime);
+      });
+
+      chartData.value = {
+        yestclose,
+        decimal,
+        rawTime: times,
+        ...calcDataLine(datas, yestclose),
+        source: {
+          time: xAxisTimes,
+          data: datas,
+          ma5: calcMA(datas, 5, decimal),
         },
-    },
-    setup(props, { emit }) {
-        const loading = ref(false);
-        const isEmpty = ref(false);
-        const historyIndexs: number[] = []; // 行情历史数据中所有非补充数据的索引位置(用于计算均线)
-        const { chartData, options, updateOptions, initOptions } = handleEchart();
-
-        // 处理图表数据
-        const handleData = (rawData: QueryTSDataRsp): void => {
-            historyIndexs.length = 0; // 清空数据
-            const datas: number[] = [],
-                times: string[] = [],
-                xAxisTimes: string[] = [],
-                yestclose = rawData.preSettle,
-                decimal = rawData.decimalPlace;
-
-            // 历史行情日期
-            rawData.historyDatas.forEach((item, index) => {
-                const { c, ts } = item;
-                datas.push(c);
-                times.push(moment(ts).format('YYYY-MM-DD HH:mm:ss'));
-                if (!item.f) historyIndexs.push(index);
-            });
-
-            // 时间轴(开盘交易时间)
-            rawData.runSteps.forEach((item) => {
-                const { start, end } = item;
-                const rangeTime = getRangeTime(start, end, 'HH:mm', 'm');
-                xAxisTimes.push(...rangeTime);
-            });
-
-            chartData.value = {
-                yestclose,
-                decimal,
-                rawTime: times,
-                ...calcDataLine(datas, yestclose),
-                source: {
-                    time: xAxisTimes,
-                    data: datas,
-                    ma5: calcMA(datas, 5, decimal),
-                },
-            };
-        };
-
-        // 计算图表最高低指标线
-        const calcDataLine = (datas: number[], yestclose: number) => {
-            let max = Math.max(...datas); // 取历史行情最高价
-            let min = Math.min(...datas); // 取历史行情最低价
-
-            const last = datas[datas.length - 1], // 历史行情最后收盘价
-                a = yestclose - min, // 计算收盘价和最低价的差值
-                b = max - yestclose; // 计算收盘价和最高价的差值
-
-            // 比较差值大小
-            if (a > b) {
-                max = yestclose + a;
-                if (last > max) {
-                    const c = last - max;
-                    max += c;
-                    min -= c;
-                }
-            } else {
-                min = min - (b - a);
-                if (min > last) {
-                    const c = min - last;
-                    max += c;
-                    min -= c;
-                }
-            }
-
-            return {
-                max: max + max * 0.01,
-                min: min - min * 0.01,
-            };
-        };
-
-        // 计算平均线
-        const calcMA = (data: number[], count: number, decimal: number) => {
-            const result: string[] = [];
-            if (data.length >= count) {
-                // 均线起始位置
-                const startIndex = historyIndexs[count - 1];
-                for (let i = 0; i < data.length; i++) {
-                    if (startIndex === undefined || i < startIndex) {
-                        result.push('-');
-                    } else {
-                        const j = historyIndexs.findIndex((val) => val === i);
-                        // 判断是否补充数据
-                        if (j === -1) {
-                            // 取上个平均值
-                            result.push(result[result.length - 1]);
-                        } else {
-                            // 向后取MA数
-                            const maIndexs = historyIndexs.slice(j - (count - 1), j + 1);
-                            // 计算总价
-                            const total = maIndexs.reduce((sum, val) => sum + data[val], 0);
-                            // 计算均线
-                            const ma = toDecimalFull(total / count, decimal);
-                            result.push(ma);
-                        }
-                    }
-                }
-            }
-            return result;
-        };
-
-        // 更新分时数据
-        const updateChartData = () => {
-            const { source, rawTime } = chartData.value,
-                lastIndex = source.data.length - 1, // 历史行情最后索引位置
-                lastTime = moment(rawTime[rawTime.length - 1]), // 历史行情最后时间
-                newTime = moment(props.quoteData.lasttime), // 实时行情最新时间
-                newPrice = props.quoteData.last; // 实时行情最新价
-
-            const cycleMilliseconds = 60 * 1000; // 周期毫秒数
-
-            const diffTime = newTime.valueOf() - lastTime.valueOf(); // 计算时间差
-            // 判断时间差是否大于周期时间
-            if (diffTime > cycleMilliseconds) {
-                lastTime.add(cycleMilliseconds, 'ms');
-                rawTime.push(lastTime.format('YYYY-MM-DD HH:mm:ss')); // 添加历史行情时间
-                source.data.push(newPrice); // 添加历史行情数据
-                historyIndexs.push(lastIndex + 1); // 添加历史行情索引
+      };
+    };
+
+    // 计算图表最高低指标线
+    const calcDataLine = (datas: number[], yestclose: number) => {
+      let max = Math.max(...datas); // 取历史行情最高价
+      let min = Math.min(...datas); // 取历史行情最低价
+
+      const last = datas[datas.length - 1], // 历史行情最后收盘价
+        a = yestclose - min, // 计算收盘价和最低价的差值
+        b = max - yestclose; // 计算收盘价和最高价的差值
+
+      // 比较差值大小
+      if (a > b) {
+        max = yestclose + a;
+        if (last > max) {
+          const c = last - max;
+          max += c;
+          min -= c;
+        }
+      } else {
+        min = min - (b - a);
+        if (min > last) {
+          const c = min - last;
+          max += c;
+          min -= c;
+        }
+      }
+
+      return {
+        max: max + max * 0.01,
+        min: min - min * 0.01,
+      };
+    };
+
+    // 计算平均线
+    const calcMA = (data: number[], count: number, decimal: number) => {
+      const result: string[] = [];
+      if (data.length >= count) {
+        // 均线起始位置
+        const startIndex = historyIndexs[count - 1];
+        for (let i = 0; i < data.length; i++) {
+          if (startIndex === undefined || i < startIndex) {
+            result.push('-');
+          } else {
+            const j = historyIndexs.findIndex((val) => val === i);
+            // 判断是否补充数据
+            if (j === -1) {
+              // 取上个平均值
+              result.push(result[result.length - 1]);
             } else {
-                source.data[lastIndex] = newPrice; // 更新历史行情数据
+              // 向后取MA数
+              const maIndexs = historyIndexs.slice(j - (count - 1), j + 1);
+              // 计算总价
+              const total = maIndexs.reduce((sum, val) => sum + data[val], 0);
+              // 计算均线
+              const ma = toDecimalFull(total / count, decimal);
+              result.push(ma);
             }
-
-            source.ma5 = calcMA(source.data, 5, chartData.value.decimal);
-
-            const { min, max } = calcDataLine(source.data, chartData.value.yestclose);
-            chartData.value.min = min;
-            chartData.value.max = max;
-
-            // 延迟图表更新，减少卡顿
-            debounce(() => {
-                updateOptions();
-            }, 1000);
-        };
-
-        onMounted(() => {
-            loading.value = true;
-            // 查询分时数据
-            QueryTSData(props.quoteData.goodscode)
-                .then((res) => {
-                    if (res.historyDatas.length) {
-                        isEmpty.value = false;
-                        handleData(res);
-                        // 调用父级函数查询tik数据 (不合理的逻辑处理，待优化)
-                        emit('change', res.startTime, res.endTime);
-                    } else {
-                        isEmpty.value = true;
-                    }
-                    initOptions();
-                })
-                .catch(() => {
-                    isEmpty.value = true;
-                })
-                .finally(() => {
-                    loading.value = false;
-                });
+          }
+        }
+      }
+      return result;
+    };
+
+    // 更新分时数据
+    const updateChartData = () => {
+      const { source, rawTime } = chartData.value,
+        lastIndex = source.data.length - 1, // 历史行情最后索引位置
+        lastTime = moment(rawTime[rawTime.length - 1]), // 历史行情最后时间
+        newTime = moment(props.quoteData.lasttime), // 实时行情最新时间
+        newPrice = props.quoteData.last; // 实时行情最新价
+
+      const cycleMilliseconds = 60 * 1000; // 周期毫秒数
+
+      const diffTime = newTime.valueOf() - lastTime.valueOf(); // 计算时间差
+      // 判断时间差是否大于周期时间
+      if (diffTime > cycleMilliseconds) {
+        lastTime.add(cycleMilliseconds, 'ms');
+        rawTime.push(lastTime.format('YYYY-MM-DD HH:mm:ss')); // 添加历史行情时间
+        source.data.push(newPrice); // 添加历史行情数据
+        historyIndexs.push(lastIndex + 1); // 添加历史行情索引
+      } else {
+        source.data[lastIndex] = newPrice; // 更新历史行情数据
+      }
+
+      source.ma5 = calcMA(source.data, 5, chartData.value.decimal);
+
+      const { min, max } = calcDataLine(source.data, chartData.value.yestclose);
+      chartData.value.min = min;
+      chartData.value.max = max;
+
+      // 延迟图表更新，减少卡顿
+      debounce(() => {
+        updateOptions();
+      }, 1000);
+    };
+
+    onMounted(() => {
+      loading.value = true;
+      // 查询分时数据
+      QueryTSData(props.quoteData.goodscode)
+        .then((res) => {
+          if (res.historyDatas.length) {
+            isEmpty.value = false;
+            handleData(res);
+            // 调用父级函数查询tik数据 (不合理的逻辑处理，待优化)
+            emit('change', res.startTime, res.endTime);
+          } else {
+            isEmpty.value = true;
+          }
+          initOptions();
+        })
+        .catch(() => {
+          isEmpty.value = true;
+        })
+        .finally(() => {
+          loading.value = false;
         });
-
-        watch(
-            () => props.quoteData.last,
-            () => {
-                if (!loading.value) {
-                    updateChartData();
-                }
-            }
-        );
-
-        return {
-            loading,
-            isEmpty,
-            options,
-        };
-    },
+    });
+
+    watch(
+      () => props.quoteData.last,
+      () => {
+        if (!loading.value) {
+          updateChartData();
+        }
+      }
+    );
+
+    return {
+      loading,
+      isEmpty,
+      options,
+    };
+  },
 });
 </script>

src/views/market/spot_trade/spot_trade_reference_market/index.vue

@@ -142,6 +142,7 @@ export default defineComponent({
       isDetail: false,
     };
     return {
+      name: EnumRouterName.spot_trade_reference_market,
       isBottom,
       ...handleComposeTable<QueryDeliveryRelationRsp>(param),
       loading,