update

src/views/market/spot_trade/components/goods-chart/chart/index.vue

@@ -1,133 +1,169 @@
 <template>
-    <!-- 交易图表  -->
-    <div class="chart-container">
-        <div class="chart-content">
-            <div class="chart-content__header">
-                <a-menu class="chart-content__tabs" v-model:selectedKeys="activeCycleName" mode="horizontal" @click="changeCycleType">
-                    <a-menu-item v-for="item in chartType" :key="item.name">{{ item.label }}</a-menu-item>
-                </a-menu>
-                <a-menu class="chart-content__tabs" v-model:selectedKeys="activeSeriesType" mode="horizontal" v-show="activeCycleType !== CycleType.time">
-                    <a-menu-item key="MACD">MACD</a-menu-item>
-                    <a-menu-item key="VOL">VOL</a-menu-item>
-                    <a-menu-item key="KDJ">KDJ</a-menu-item>
-                    <a-menu-item key="CCI">CCI</a-menu-item>
-                </a-menu>
-            </div>
-            <echart-time class="chart-content__main" :quote-data="selectedRow" @change="getHistoryTikDatas" v-if="activeCycleType === CycleType.time"></echart-time>
-            <echart-kline class="chart-content__main" :quote-data="selectedRow" :cycle-type="activeCycleType" :series-type="activeSeriesType[0]" v-else></echart-kline>
-            <div class="chart-content__footer"></div>
+  <!-- 交易图表  -->
+  <div class="chart-container">
+    <div class="chart-content">
+      <div class="chart-content__header">
+        <a-menu class="chart-content__tabs"
+                v-model:selectedKeys="activeCycleName"
+                mode="horizontal"
+                @click="changeCycleType">
+          <a-menu-item v-for="item in chartType"
+                       :key="item.name">{{ item.label }}</a-menu-item>
+        </a-menu>
+        <a-menu class="chart-content__tabs"
+                v-model:selectedKeys="activeSeriesType"
+                mode="horizontal"
+                v-show="activeCycleType !== CycleType.time">
+          <a-menu-item key="MACD">MACD</a-menu-item>
+          <a-menu-item key="VOL">VOL</a-menu-item>
+          <a-menu-item key="KDJ">KDJ</a-menu-item>
+          <a-menu-item key="CCI">CCI</a-menu-item>
+        </a-menu>
+      </div>
+      <echart-time class="chart-content__main"
+                   :quote-data="selectedRow"
+                   @change="getHistoryTikDatas"
+                   v-if="activeCycleType === CycleType.time"></echart-time>
+      <echart-kline class="chart-content__main"
+                    :quote-data="selectedRow"
+                    :cycle-type="activeCycleType"
+                    :series-type="activeSeriesType[0]"
+                    v-else></echart-kline>
+      <div class="chart-content__footer"></div>
+    </div>
+    <div class="chart-slider">
+      <div class="chart-slider__button"></div>
+    </div>
+    <div class="chart-tips">
+      <div>
+        <div class="chart-tips__nav">
+          <div class="content content--left">{{ selectedRow.goodscode }}</div>
+          <div class="content content--right">{{ selectedRow.goodsname }}</div>
+        </div>
+        <div class="chart-tips__last">
+          <div
+               :class="['content content--left', handleQuotePriceColor(selectedRow.last, selectedRow.presettle)]">
+            {{ handleNoneValue(selectedRow.last) }}</div>
+          <div class="content content--right">
+            <span
+                  :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteChange(selectedRow) }}</span>
+            <span
+                  :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteAmplitude(selectedRow) }}</span>
+          </div>
+        </div>
+        <div class="chart-tips__volume">
+          <a-row>
+            <a-col :span="8">卖一</a-col>
+            <a-col :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)"
+                   :span="8">{{ handleNoneValue(selectedRow.ask) }}</a-col>
+            <a-col :class="handleQuotePriceColor(selectedRow.askvolume, selectedRow.presettle)"
+                   :span="8">{{ handleNoneValue(selectedRow.askvolume) }}</a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="8">买一</a-col>
+            <a-col :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)"
+                   :span="8">{{ handleNoneValue(selectedRow.bid) }}</a-col>
+            <a-col :class="handleQuotePriceColor(selectedRow.bidvolume, selectedRow.presettle)"
+                   :span="8">{{ handleNoneValue(selectedRow.bidvolume) }}</a-col>
+          </a-row>
         </div>
-        <div class="chart-slider">
-            <div class="chart-slider__button"></div>
+      </div>
+      <div class="chart-tips__tik">
+        <div class="row-header">
+          <h4>分时成交</h4>
+          <a-row>
+            <a-col :span="8">时间</a-col>
+            <a-col :span="8">价格</a-col>
+            <a-col :span="8">现量</a-col>
+          </a-row>
         </div>
-        <div class="chart-tips">
-            <div>
-                <div class="chart-tips__nav">
-                    <div class="content content--left">{{ selectedRow.goodscode }}</div>
-                    <div class="content content--right">{{ selectedRow.goodsname }}</div>
-                </div>
-                <div class="chart-tips__last">
-                    <div :class="['content content--left', handleQuotePriceColor(selectedRow.last, selectedRow.presettle)]"> {{ quoteValue(selectedRow.last) }}</div>
-                    <div class="content content--right">
-                        <span :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteChange(selectedRow) }}</span>
-                        <span :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteAmplitude(selectedRow) }}</span>
-                    </div>
-                </div>
-                <div class="chart-tips__volume">
-                    <a-row>
-                        <a-col :span="8">卖一</a-col>
-                        <a-col :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)" :span="8">{{ quoteValue(selectedRow.ask) }}</a-col>
-                        <a-col :class="handleQuotePriceColor(selectedRow.askvolume, selectedRow.presettle)" :span="8">{{ quoteValue(selectedRow.askvolume) }}</a-col>
-                    </a-row>
-                    <a-row>
-                        <a-col :span="8">买一</a-col>
-                        <a-col :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)" :span="8">{{ quoteValue(selectedRow.bid) }}</a-col>
-                        <a-col :class="handleQuotePriceColor(selectedRow.bidvolume, selectedRow.presettle)" :span="8">{{ quoteValue(selectedRow.bidvolume) }}</a-col>
-                    </a-row>
-                </div>
-            </div>
-            <div class="chart-tips__tik">
-                <div class="row-header">
-                    <h4>分时成交</h4>
-                    <a-row>
-                        <a-col :span="8">时间</a-col>
-                        <a-col :span="8">价格</a-col>
-                        <a-col :span="8">现量</a-col>
-                    </a-row>
-                </div>
-                <div class="row-content">
-                    <a-row v-for="(item, index) in tradedList" :key="index + '11'">
-                        <a-col :span="8">{{ formatTime(item.TS, 'hm') }}</a-col>
-                        <a-col :class="handleQuotePriceColor(item.PE, selectedRow.presettle)" :span="8">{{ item.PE }}</a-col>
-                        <a-col :class="handleQuotePriceColor(item.Vol, selectedRow.presettle)" :span="8">{{ item.Vol }}</a-col>
-                    </a-row>
-                </div>
-            </div>
-            <div class="chart-tips__info">
-                <a-row>
-                    <a-col :span="4">最新</a-col>
-                    <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)" :span="8">{{ quoteValue(selectedRow.last) }}</a-col>
-                    <a-col :span="4">均价</a-col>
-                    <a-col :class="handleQuotePriceColor(selectedRow.averageprice, selectedRow.presettle)" :span="8">{{ quoteValue(selectedRow.averageprice) }}</a-col>
-                </a-row>
-                <a-row>
-                    <a-col :span="4">涨跌</a-col>
-                    <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)" :span="8">{{ quoteChange(selectedRow) }}</a-col>
-                    <a-col :span="4">今开</a-col>
-                    <a-col :class="handleQuotePriceColor(selectedRow.opened, selectedRow.presettle)" :span="8">{{ quoteValue(selectedRow.opened) }}</a-col>
-                </a-row>
-                <a-row>
-                    <a-col :span="4">涨幅</a-col>
-                    <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)" :span="8">{{ quoteAmplitude(selectedRow) }}</a-col>
-                    <a-col :span="4">最高</a-col>
-                    <a-col :class="handleQuotePriceColor(selectedRow.highest, selectedRow.presettle)" :span="8">{{ quoteValue(selectedRow.highest) }}</a-col>
-                </a-row>
-                <a-row>
-                    <a-col :span="4">总量</a-col>
-                    <a-col :span="8">{{ quoteValue(selectedRow.totalvolume) }}</a-col>
-                    <a-col :span="4">最低</a-col>
-                    <a-col :class="handleQuotePriceColor(selectedRow.lowest, selectedRow.presettle)" :span="8">{{ quoteValue(selectedRow.lowest) }}</a-col>
-                </a-row>
-                <a-row>
-                    <a-col :span="4">金额</a-col>
-                    <a-col :span="8" style="color: #0d96ff">{{ changeUnit(selectedRow.totalturnover) }}</a-col>
-                    <a-col :span="4">量比</a-col>
-                    <a-col :span="8">{{ '--' }}</a-col>
-                </a-row>
-                <a-row>
-                    <a-col :span="4">涨停</a-col>
-                    <a-col class="red1" :span="8">{{ quoteValue(selectedRow.limitup) }}</a-col>
-                    <a-col :span="4">跌停</a-col>
-                    <a-col class="green" :span="8">{{ quoteValue(selectedRow.limitdown) }}</a-col>
-                </a-row>
-                <a-row>
-                    <a-col :span="4">外盘</a-col>
-                    <a-col :span="8">{{ quoteValue(selectedRow.totalbidvolume) }}</a-col>
-                    <a-col :span="4">内盘</a-col>
-                    <a-col :span="8">{{ quoteValue(selectedRow.totalaskvolume) }}</a-col>
-                </a-row>
-                <a-row>
-                    <a-col :span="4">持仓</a-col>
-                    <a-col :span="8">{{ quoteValue(selectedRow.holdvolume) }}</a-col>
-                    <a-col :span="4">结算</a-col>
-                    <a-col :span="8">{{ quoteValue(selectedRow.settle) }}</a-col>
-                </a-row>
-                <a-row>
-                    <a-col :span="4">仓差</a-col>
-                    <a-col :span="8">{{ '--' }}</a-col>
-                    <a-col :span="4">昨结</a-col>
-                    <a-col :span="8">{{ quoteValue(selectedRow.presettle) }}</a-col>
-                </a-row>
-                <a-row>
-                    <a-col :span="4">日增</a-col>
-                    <a-col :span="8">{{ '--' }}</a-col>
-                    <a-col :span="4">开平</a-col>
-                    <a-col :span="8">{{ '--' }}</a-col>
-                </a-row>
-            </div>
-            <div @click="watchMore" class="watchMore">查看更多</div>
+        <div class="row-content">
+          <a-row v-for="(item, index) in tradedList"
+                 :key="index + '11'">
+            <a-col :span="8">{{ formatTime(item.TS, 'hm') }}</a-col>
+            <a-col :class="handleQuotePriceColor(item.PE, selectedRow.presettle)"
+                   :span="8">{{ item.PE }}</a-col>
+            <a-col :class="handleQuotePriceColor(item.Vol, selectedRow.presettle)"
+                   :span="8">{{ item.Vol }}</a-col>
+          </a-row>
         </div>
+      </div>
+      <div class="chart-tips__info">
+        <a-row>
+          <a-col :span="4">最新</a-col>
+          <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"
+                 :span="8">{{ handleNoneValue(selectedRow.last) }}</a-col>
+          <a-col :span="4">均价</a-col>
+          <a-col :class="handleQuotePriceColor(selectedRow.averageprice, selectedRow.presettle)"
+                 :span="8">{{ handleNoneValue(selectedRow.averageprice) }}</a-col>
+        </a-row>
+        <a-row>
+          <a-col :span="4">涨跌</a-col>
+          <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"
+                 :span="8">{{ quoteChange(selectedRow) }}</a-col>
+          <a-col :span="4">今开</a-col>
+          <a-col :class="handleQuotePriceColor(selectedRow.opened, selectedRow.presettle)"
+                 :span="8">{{ handleNoneValue(selectedRow.opened) }}</a-col>
+        </a-row>
+        <a-row>
+          <a-col :span="4">涨幅</a-col>
+          <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"
+                 :span="8">{{ quoteAmplitude(selectedRow) }}</a-col>
+          <a-col :span="4">最高</a-col>
+          <a-col :class="handleQuotePriceColor(selectedRow.highest, selectedRow.presettle)"
+                 :span="8">{{ handleNoneValue(selectedRow.highest) }}</a-col>
+        </a-row>
+        <a-row>
+          <a-col :span="4">总量</a-col>
+          <a-col :span="8">{{ handleNoneValue(selectedRow.totalvolume) }}</a-col>
+          <a-col :span="4">最低</a-col>
+          <a-col :class="handleQuotePriceColor(selectedRow.lowest, selectedRow.presettle)"
+                 :span="8">{{ handleNoneValue(selectedRow.lowest) }}</a-col>
+        </a-row>
+        <a-row>
+          <a-col :span="4">金额</a-col>
+          <a-col :span="8"
+                 style="color: #0d96ff">{{ changeUnit(selectedRow.totalturnover) }}</a-col>
+          <a-col :span="4">量比</a-col>
+          <a-col :span="8">{{ '--' }}</a-col>
+        </a-row>
+        <a-row>
+          <a-col :span="4">涨停</a-col>
+          <a-col class="red1"
+                 :span="8">{{ handleNoneValue(selectedRow.limitup) }}</a-col>
+          <a-col :span="4">跌停</a-col>
+          <a-col class="green"
+                 :span="8">{{ handleNoneValue(selectedRow.limitdown) }}</a-col>
+        </a-row>
+        <a-row>
+          <a-col :span="4">外盘</a-col>
+          <a-col :span="8">{{ handleNoneValue(selectedRow.totalbidvolume) }}</a-col>
+          <a-col :span="4">内盘</a-col>
+          <a-col :span="8">{{ handleNoneValue(selectedRow.totalaskvolume) }}</a-col>
+        </a-row>
+        <a-row>
+          <a-col :span="4">持仓</a-col>
+          <a-col :span="8">{{ handleNoneValue(selectedRow.holdvolume) }}</a-col>
+          <a-col :span="4">结算</a-col>
+          <a-col :span="8">{{ handleNoneValue(selectedRow.settle) }}</a-col>
+        </a-row>
+        <a-row>
+          <a-col :span="4">仓差</a-col>
+          <a-col :span="8">{{ '--' }}</a-col>
+          <a-col :span="4">昨结</a-col>
+          <a-col :span="8">{{ handleNoneValue(selectedRow.presettle) }}</a-col>
+        </a-row>
+        <a-row>
+          <a-col :span="4">日增</a-col>
+          <a-col :span="8">{{ '--' }}</a-col>
+          <a-col :span="4">开平</a-col>
+          <a-col :span="8">{{ '--' }}</a-col>
+        </a-row>
+      </div>
+      <div @click="watchMore"
+           class="watchMore">查看更多</div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -140,7 +176,7 @@ import { formatTime } from '@/common/methods';
 import { changeUnit } from '@/utils/qt/common';
 import { ComponentType } from '@/views/market/spot_trade/spot_trade_order_transaction/setup';
 import { EchartKline, EchartTime } from '@/common/components/echart';
-import { handleQuotePriceColor, quoteChange, quoteValue, quoteAmplitude } from '@/common/setup/table/tableQuote';
+import { handleQuotePriceColor, quoteChange, handleNoneValue, quoteAmplitude } from '@/common/setup/table/tableQuote';
 import { useQueryData } from '@/common/setup/request';
 import moment from 'moment';
 
@@ -237,7 +273,7 @@ export default defineComponent({
             watchMore,
             formatTime,
             quoteChange,
-            quoteValue,
+            handleNoneValue,
             quoteAmplitude,
             handleQuotePriceColor,
             changeCycleType,