放出挂牌点选 报价牌 进入买卖大厅的入口

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

@@ -1,135 +1,167 @@
 <template>
-    <!-- 交易图表  -->
-    <div class="chart-container">
-        <div class="chart-content">
-            <div class="chart-content__header">
-                <a-radio-group class="chart-content__tabs" v-model:value="activeCycleType">
-                    <template v-for="item in chartType" :key="item.type">
-                        <a-radio-button :value="item.type">{{ item.name }}</a-radio-button>
-                    </template>
-                </a-radio-group>
-                <a-radio-group class="chart-content__tabs" v-model:value="activeSeriesType" v-show="activeCycleType !== CycleType.time">
-                    <a-radio-button value="MACD">MACD</a-radio-button>
-                    <a-radio-button value="VOL">VOL</a-radio-button>
-                    <a-radio-button value="KDJ">KDJ</a-radio-button>
-                    <a-radio-button value="CCI">CCI</a-radio-button>
-                </a-radio-group>
-            </div>
-            <echart-time class="chart-content__main" :quote-data="selectedRow" v-if="activeCycleType === CycleType.time"></echart-time>
-            <echart-kline class="chart-content__main" :quote-data="selectedRow" :cycle-type="activeCycleType" :series-type="activeSeriesType" v-else></echart-kline>
-            <div class="chart-content__footer"></div>
+  <!-- 交易图表  -->
+  <div class="chart-container">
+    <div class="chart-content">
+      <div class="chart-content__header">
+        <a-radio-group class="chart-content__tabs"
+                       v-model:value="activeCycleType">
+          <template v-for="item in chartType"
+                    :key="item.type">
+            <a-radio-button :value="item.type">{{ item.name }}</a-radio-button>
+          </template>
+        </a-radio-group>
+        <a-radio-group class="chart-content__tabs"
+                       v-model:value="activeSeriesType"
+                       v-show="activeCycleType !== CycleType.time">
+          <a-radio-button value="MACD">MACD</a-radio-button>
+          <a-radio-button value="VOL">VOL</a-radio-button>
+          <a-radio-button value="KDJ">KDJ</a-radio-button>
+          <a-radio-button value="CCI">CCI</a-radio-button>
+        </a-radio-group>
+      </div>
+      <echart-time class="chart-content__main"
+                   :quote-data="selectedRow"
+                   v-if="activeCycleType === CycleType.time"></echart-time>
+      <echart-kline class="chart-content__main"
+                    :quote-data="selectedRow"
+                    :cycle-type="activeCycleType"
+                    :series-type="activeSeriesType"
+                    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)]">
+            {{ 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">{{ selectedRow.ask }}</a-col>
+            <a-col :class="handleQuotePriceColor(selectedRow.askvolume, selectedRow.presettle)"
+                   :span="8">{{ selectedRow.askvolume }}</a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="8">买一</a-col>
+            <a-col :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)"
+                   :span="8">{{ selectedRow.bid }}</a-col>
+            <a-col :class="handleQuotePriceColor(selectedRow.bidvolume, selectedRow.presettle)"
+                   :span="8">{{ 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)]">{{ 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">{{ selectedRow.ask }}</a-col>
-                        <a-col :class="handleQuotePriceColor(selectedRow.askvolume, selectedRow.presettle)" :span="8">{{ selectedRow.askvolume }}</a-col>
-                    </a-row>
-                    <a-row>
-                        <a-col :span="8">买一</a-col>
-                        <a-col :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)" :span="8">{{ selectedRow.bid }}</a-col>
-                        <a-col :class="handleQuotePriceColor(selectedRow.bidvolume, selectedRow.presettle)" :span="8">{{ 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">{{ selectedRow.last }}</a-col>
-                    <a-col :span="4">均价</a-col>
-                    <a-col :class="handleQuotePriceColor(selectedRow.averageprice, selectedRow.presettle)" :span="8">{{ 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">{{ 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">{{ selectedRow.highest }}</a-col>
-                </a-row>
-                <a-row>
-                    <a-col :span="4">总量</a-col>
-                    <a-col :span="8">{{ selectedRow.totalvolume }}</a-col>
-                    <a-col :span="4">最低</a-col>
-                    <a-col :class="handleQuotePriceColor(selectedRow.lowest, selectedRow.presettle)" :span="8">{{ 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">{{ selectedRow.limitup }}</a-col>
-                    <a-col :span="4">跌停</a-col>
-                    <a-col class="green" :span="8">{{ selectedRow.limitdown }}</a-col>
-                </a-row>
-                <a-row>
-                    <a-col :span="4">外盘</a-col>
-                    <a-col :span="8">{{ selectedRow.totalbidvolume }}</a-col>
-                    <a-col :span="4">内盘</a-col>
-                    <a-col :span="8">{{ selectedRow.totalaskvolume }}</a-col>
-                </a-row>
-                <a-row>
-                    <a-col :span="4">持仓</a-col>
-                    <a-col :span="8">{{ selectedRow.holdvolume }}</a-col>
-                    <a-col :span="4">结算</a-col>
-                    <a-col :span="8">{{ 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">{{ 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">{{ selectedRow.last }}</a-col>
+          <a-col :span="4">均价</a-col>
+          <a-col :class="handleQuotePriceColor(selectedRow.averageprice, selectedRow.presettle)"
+                 :span="8">{{ 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">{{ 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">{{ selectedRow.highest }}</a-col>
+        </a-row>
+        <a-row>
+          <a-col :span="4">总量</a-col>
+          <a-col :span="8">{{ selectedRow.totalvolume }}</a-col>
+          <a-col :span="4">最低</a-col>
+          <a-col :class="handleQuotePriceColor(selectedRow.lowest, selectedRow.presettle)"
+                 :span="8">{{ 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">{{ selectedRow.limitup }}</a-col>
+          <a-col :span="4">跌停</a-col>
+          <a-col class="green"
+                 :span="8">{{ selectedRow.limitdown }}</a-col>
+        </a-row>
+        <a-row>
+          <a-col :span="4">外盘</a-col>
+          <a-col :span="8">{{ selectedRow.totalbidvolume }}</a-col>
+          <a-col :span="4">内盘</a-col>
+          <a-col :span="8">{{ selectedRow.totalaskvolume }}</a-col>
+        </a-row>
+        <a-row>
+          <a-col :span="4">持仓</a-col>
+          <a-col :span="8">{{ selectedRow.holdvolume }}</a-col>
+          <a-col :span="4">结算</a-col>
+          <a-col :span="8">{{ 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">{{ 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 +172,7 @@ import { QueryQuoteDayRsp, QueryHistoryTikDatasRsp, CycleType } from '@/services
 import { QueryHistoryTikDatas } from '@/services/go/quote';
 import { formatTime } from '@/common/methods';
 import { changeUnit } from '@/utils/qt/common';
-import { ComponentType } from '../setup';
+import { ComponentType } from '@/views/market/spot_trade/spot_trade_order_transaction/setup';
 import { EchartKline, EchartTime } from '@/common/components/echart';
 import { handleQuotePriceColor, quoteChange, quoteAmplitude } from '@/common/setup/table/tableQuote';
 import { useQueryData } from '@/common/setup/request';
@@ -164,7 +196,7 @@ export default defineComponent({
         const activeSeriesType = ref('MACD');
 
         function watchMore() {
-            context.emit('update', ComponentType.tradeDetail);
+            context.emit('update', ComponentType.marketContent);
         }
         const { goodscode } = props.selectedRow;