订单交易 挂牌求购 添加图表

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

@@ -3,38 +3,45 @@
   <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
+          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
+          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>
+      <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 class="chart-tips" v-if="showExchange">
       <div>
         <div class="chart-tips__nav">
           <div class="content content--left">{{ selectedRow.goodscode }}</div>
@@ -42,29 +49,39 @@
         </div>
         <div class="chart-tips__last">
           <div
-               :class="['content content--left', handleQuotePriceColor(selectedRow.last, selectedRow.presettle)]">
-            {{ handleNoneValue(selectedRow.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>
+              :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"
+            >{{ quoteChange(selectedRow) }}</span>
             <span
-                  :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteAmplitude(selectedRow) }}</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.ask, selectedRow.presettle)"
-                   :span="8">{{ handleNoneValue(selectedRow.askvolume) }}</a-col>
+            <a-col
+              :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)"
+              :span="8"
+            >{{ handleNoneValue(selectedRow.ask) }}</a-col>
+            <a-col
+              :class="handleQuotePriceColor(selectedRow.ask, 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.bid, selectedRow.presettle)"
-                   :span="8">{{ handleNoneValue(selectedRow.bidvolume) }}</a-col>
+            <a-col
+              :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)"
+              :span="8"
+            >{{ handleNoneValue(selectedRow.bid) }}</a-col>
+            <a-col
+              :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)"
+              :span="8"
+            >{{ handleNoneValue(selectedRow.bidvolume) }}</a-col>
           </a-row>
         </div>
       </div>
@@ -78,62 +95,76 @@
           </a-row>
         </div>
         <div class="row-content">
-          <a-row v-for="(item, index) in tradedList"
-                 :key="index + '11'">
+          <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-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
+            :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-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
+            :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-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
+            :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-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-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="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 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-col class="green" :span="8">{{ handleNoneValue(selectedRow.limitdown) }}</a-col>
         </a-row>
         <a-row>
           <a-col :span="4">外盘</a-col>
@@ -160,8 +191,9 @@
           <a-col :span="8">{{ '--' }}</a-col>
         </a-row>
       </div>
-      <div @click="watchMore"
-           class="watchMore"><strong>查看更多</strong></div>
+      <div @click="watchMore" class="watchMore">
+        <strong>查看更多</strong>
+      </div>
     </div>
   </div>
 </template>
@@ -181,109 +213,113 @@ import { useQueryData } from '@/common/setup/request';
 import moment from 'moment';
 
 export default defineComponent({
-    emits: ['cancel', 'update'],
-    name: 'stock-exchange',
-    components: {
-        EchartKline,
-        EchartTime,
-    },
-    props: {
-        selectedRow: {
-            type: Object as PropType<QueryQuoteDayRsp>,
-            default: {},
-        },
+  emits: ['cancel', 'update'],
+  name: 'stock-exchange',
+  components: {
+    EchartKline,
+    EchartTime,
+  },
+  props: {
+    selectedRow: {
+      type: Object as PropType<QueryQuoteDayRsp>,
+      default: {},
     },
-    setup(props, context) {
-        const { visible, cancel } = _closeModal(context),
-            activeCycleName = ref<string[]>(['time']),
-            activeCycleType = ref<CycleType>(CycleType.time),
-            activeSeriesType = ref<string[]>(['MACD']),
-            tradedList = ref<QueryHistoryTikDatasRsp[]>([]);
+    showExchange: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props, context) {
+    const { visible, cancel } = _closeModal(context),
+      activeCycleName = ref<string[]>(['time']),
+      activeCycleType = ref<CycleType>(CycleType.time),
+      activeSeriesType = ref<string[]>(['MACD']),
+      tradedList = ref<QueryHistoryTikDatasRsp[]>([]);
 
-        function watchMore() {
-            context.emit('update', ComponentType.marketContent);
-        }
+    function watchMore() {
+      context.emit('update', ComponentType.marketContent);
+    }
 
-        // 周期类型
-        const chartType = [
-            { label: '分时', name: 'time', value: CycleType.time },
-            { label: '1分钟', name: 'minutes', value: CycleType.minutes },
-            { label: '5分钟', name: 'minutes5', value: CycleType.minutes5 },
-            { label: '30分钟', name: 'minutes30', value: CycleType.minutes30 },
-            { label: '60分钟', name: 'minutes60', value: CycleType.minutes60 },
-            { label: '4小时', name: 'Hours4', value: CycleType.Hours4 },
-            { label: '日 K', name: 'days', value: CycleType.days },
-        ];
+    // 周期类型
+    const chartType = [
+      { label: '分时', name: 'time', value: CycleType.time },
+      { label: '1分钟', name: 'minutes', value: CycleType.minutes },
+      { label: '5分钟', name: 'minutes5', value: CycleType.minutes5 },
+      { label: '30分钟', name: 'minutes30', value: CycleType.minutes30 },
+      { label: '60分钟', name: 'minutes60', value: CycleType.minutes60 },
+      { label: '4小时', name: 'Hours4', value: CycleType.Hours4 },
+      { label: '日 K', name: 'days', value: CycleType.days },
+    ];
 
-        // 切换图表周期类型
-        const changeCycleType = (e: { key: string }) => {
-            activeCycleType.value = chartType.find((item) => item.name === e.key)!.value;
-        };
+    // 切换图表周期类型
+    const changeCycleType = (e: { key: string }) => {
+      activeCycleType.value = chartType.find((item) => item.name === e.key)!.value;
+    };
 
-        // Tik列表
-        const getHistoryTikDatas = (startTime: string, endTime: string) => {
-            if (!tradedList.value.length) {
-                const param = {
-                    goodsCode: props.selectedRow.goodscode,
-                    count: 20,
-                    startTime: moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
-                    endTime: moment(endTime).format('YYYY-MM-DD HH:mm:ss'),
-                };
-                QueryHistoryTikDatas(param).then((res) => {
-                    tradedList.value = res;
-                });
-            }
+    // Tik列表
+    const getHistoryTikDatas = (startTime: string, endTime: string) => {
+      if (!tradedList.value.length) {
+        const param = {
+          goodsCode: props.selectedRow.goodscode,
+          count: 20,
+          startTime: moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
+          endTime: moment(endTime).format('YYYY-MM-DD HH:mm:ss'),
         };
+        QueryHistoryTikDatas(param).then((res) => {
+          tradedList.value = res;
+        });
+      }
+    };
 
-        // 监听行情变化刷Tik列表
-        watch(
-            () => props.selectedRow.last,
-            () => {
-                if (tradedList.value.length) {
-                    // 移除列表最后一条记录
-                    tradedList.value.pop();
-                    // 向列表开头添加新纪录
-                    tradedList.value.unshift({
-                        AV: 0,
-                        Ask: 0,
-                        BV: 0,
-                        Bid: 0,
-                        HI: 0,
-                        HV: 0,
-                        PE: props.selectedRow.last,
-                        TDR: 0,
-                        TK: 0,
-                        TS: props.selectedRow.lasttime,
-                        TT: 0,
-                        Vol: props.selectedRow.lastvolume,
-                    });
-                }
-            }
-        );
+    // 监听行情变化刷Tik列表
+    watch(
+      () => props.selectedRow.last,
+      () => {
+        if (tradedList.value.length) {
+          // 移除列表最后一条记录
+          tradedList.value.pop();
+          // 向列表开头添加新纪录
+          tradedList.value.unshift({
+            AV: 0,
+            Ask: 0,
+            BV: 0,
+            Bid: 0,
+            HI: 0,
+            HV: 0,
+            PE: props.selectedRow.last,
+            TDR: 0,
+            TK: 0,
+            TS: props.selectedRow.lasttime,
+            TT: 0,
+            Vol: props.selectedRow.lastvolume,
+          });
+        }
+      }
+    );
 
-        return {
-            cancel,
-            visible,
-            chartType,
-            tradedList,
-            CycleType,
-            activeCycleName,
-            activeCycleType,
-            activeSeriesType,
-            changeUnit,
-            watchMore,
-            formatTime,
-            quoteChange,
-            handleNoneValue,
-            quoteAmplitude,
-            handleQuotePriceColor,
-            changeCycleType,
-            getHistoryTikDatas,
-        };
-    },
+    return {
+      cancel,
+      visible,
+      chartType,
+      tradedList,
+      CycleType,
+      activeCycleName,
+      activeCycleType,
+      activeSeriesType,
+      changeUnit,
+      watchMore,
+      formatTime,
+      quoteChange,
+      handleNoneValue,
+      quoteAmplitude,
+      handleQuotePriceColor,
+      changeCycleType,
+      getHistoryTikDatas,
+    };
+  },
 });
 </script>
 
 <style lang="less">
-@import './index.less';
+@import "./index.less";
 </style>

src/views/market/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_swap/components/post_buying/index.vue

@@ -4,8 +4,7 @@
         placement="right"
         :closable="false"
         :visible="visible"
-        :width="900"
-        :height="500"
+        :width="1052"
         :destroyOnClose="true"
         class="post-buying-container"
     >
@@ -34,17 +33,49 @@
                             </div>
                             <div class="chart-tips__last">
                                 <div
-                                    :class="['content--left', handleQuotePriceColor(selectedRow.last, selectedRow.presettle)]"
-                                >{{ handleNoneValue(selectedRow.last) }}</div>
+                                    :class="['content--left', handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')]"
+                                >{{ getQuoteValue_out(selectedRow.refgoodscode, 'last') }}</div>
                                 <div class="content--right">
                                     <span
-                                        :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"
-                                    >{{ quoteChange(selectedRow) }}</span>
+                                        :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')"
+                                    >{{ quoteAmplitude_out(selectedRow.refgoodscode) }}</span>
                                     <span
-                                        :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"
-                                    >{{ quoteAmplitude(selectedRow) }}</span>
+                                        :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')"
+                                    >{{ quoteChange_out(selectedRow.refgoodscode) }}</span>
                                 </div>
                             </div>
+                            <a-row>
+                                <a-col :span="4" :offset="2">最高价</a-col>
+                                <a-col :span="6">
+                                    <span
+                                        :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'highest')"
+                                    >{{ getQuoteValue_out(selectedRow.refgoodscode, 'highest') }}</span>
+                                </a-col>
+                                <a-col :span="4" :offset="2">开盘价</a-col>
+                                <a-col :span="6">
+                                    <span
+                                        :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')"
+                                    >{{ getQuoteValue_out(selectedRow.refgoodscode, 'opened') }}</span>
+                                </a-col>
+                            </a-row>
+                            <a-row>
+                                <a-col :span="4" :offset="2">最低价</a-col>
+                                <a-col :span="6">
+                                    <span
+                                        :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'lowest')"
+                                    >{{ getQuoteValue_out(selectedRow.refgoodscode, 'lowest') }}</span>
+                                </a-col>
+                                <a-col :span="4" :offset="2">昨收价</a-col>
+                                <a-col
+                                    :span="6"
+                                >{{ getQuoteValue_out(selectedRow.refgoodscode, 'preclose') }}</a-col>
+                            </a-row>
+                            <div class="chart-content">
+                                <Chart
+                                    :selectedRow="getQuoteDayInfoByCode(selectedRow.refgoodscode)"
+                                    :showExchange="false"
+                                />
+                            </div>
                         </div>
                     </a-col>
                     <a-col :span="12">
@@ -223,11 +254,13 @@ import { FormParam } from './interface';
 import { handleForm, isFloat, useBuySellDirection, useNum, usePrice, useChart } from './setup';
 import { DoubleRightOutlined, LineChartOutlined } from '@ant-design/icons-vue';
 import { handleQuotePriceColor, quoteChange, handleNoneValue, quoteAmplitude } from '@/common/setup/table/tableQuote';
+import { handleQuotePriceColor_out, handleSubcriteOnDemandQuote, quoteAmplitude_out, quoteAmplituOfVibration, quoteChange_out, getQuoteValue_out } from '@/common/setup/table/tableQuote';
+import Chart from '@/views/market/spot_trade/components/goods-chart/chart/index.vue';
 
 export default defineComponent({
     emits: ['cancel', 'update'],
     name: ModalEnum.spot_trade_warehouse_post_buying,
-    components: { Des, Drawer, PlusOutlined, MinusOutlined, SwapOutlined, LineChartOutlined, DoubleRightOutlined },
+    components: { Des, Drawer, PlusOutlined, MinusOutlined, SwapOutlined, LineChartOutlined, DoubleRightOutlined, Chart },
     props: {
         selectedRow: {
             type: Object as PropType<RefGoodsList>,
@@ -404,7 +437,8 @@ export default defineComponent({
             loading,
             selected,
             showChart,
-            handleQuotePriceColor, quoteChange, handleNoneValue, quoteAmplitude
+            handleQuotePriceColor, quoteChange, handleNoneValue, quoteAmplitude,
+            handleQuotePriceColor_out, handleSubcriteOnDemandQuote, quoteAmplitude_out, quoteAmplituOfVibration, quoteChange_out, getQuoteValue_out, getQuoteDayInfoByCode
         };
     },
 });
@@ -414,10 +448,16 @@ export default defineComponent({
 .post-buying-container {
     top: 101px;
     .ant-drawer-content-wrapper {
-        height: 500px;
+        height: 600px;
     }
 }
-
+.chart-content {
+    height: 400px;
+}
+.formBar {
+    height: 100%;
+    max-height: 100%;
+}
 .post_buying_chart {
     [theme="light"] & {
         --bgcolor: #fff;
@@ -433,6 +473,7 @@ export default defineComponent({
         --tik-title-bgcolor: #ecf2f5;
         --tik-title-color: #7a8a94;
     }
+    color: @m-grey67;
 
     // background-color: var(--bgcolor, #0e0e0f);
 
@@ -446,7 +487,7 @@ export default defineComponent({
             display: flex;
             justify-content: center;
             align-items: center;
-            color: @m-grey67;
+
             .content {
                 &:first-child:not(:last-child) {
                     margin-right: 16px;
@@ -470,24 +511,21 @@ export default defineComponent({
         width: 300px;
         height: 100%;
 
-        &__nav {
+        &__last {
             display: flex;
             justify-content: center;
             align-items: center;
-
+            padding: 16px 0;
             .content {
-                &:first-child:not(:last-child) {
-                    margin-right: 16px;
-                }
-
                 &--left {
-                    font-size: 16px;
-                    color: var(--row-content-color, #acb8c0);
+                    font-size: 24px;
+                    margin-right: 16px;
                 }
 
                 &--right {
-                    font-size: 24px;
-                    color: #fc9618;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: flex-start;
                 }
             }
         }