update

src/services/go/wrtrade/index.ts

@@ -16,7 +16,7 @@ import {
     QueryWrOrderDetailReq, QueryWrPerformancePlanStepReq,
     QueryWrPositionReq, QueryWrScfContractInterestReq, QueryWrSpecialMatchOrderReq,
     QueryWrStandardFactoryItemReq,
-    QueryWrTradeDetailReq, WrBuybackDetail, WrDeliveryDetail,
+    QueryWrTradeDetailReq, WrAverageTradePriceQsp, WrAverageTradePriceQsq, WrBuybackDetail, WrDeliveryDetail,
     WrFactorTypeInfo,
     WrFAProductDetail,
     WrFilterItem,
@@ -289,5 +289,14 @@ export function queryWrTradeOrderDetail(param: WrTradeOrderDetailReq): Promise<W
         throw new Error(`查询合约交易买卖大厅: ${err}`);
     });
 }
+/**
+ * 询成交价(历史走势)WrTrade2/QueryWrAverageTradePrice
+ * @param WrTradeOrderDetailReq
+ */
+export function queryWrAverageTradePrice(param: WrAverageTradePriceQsq): Promise<WrAverageTradePriceQsp[]> {
+    return commonSearch_go('/WrTrade2/QueryWrAverageTradePrice', param).catch((err) => {
+        throw new Error(`询成交价(历史走势): ${err}`);
+    });
+}
 
 

src/services/go/wrtrade/interface.ts

@@ -958,3 +958,14 @@ export interface WrTradeOrderDetailReq {
     buyorsell: 0 | 1; //买卖方向 0-买 1-卖
 }
 
+export interface WrAverageTradePriceQsq {
+    page?: number; //	页码
+    pagesize?: number; //每页条数
+    haswr: 0 | 1; //0:仓单预售 1:仓单贸易
+    wrfactortypeid: number; //仓单要素id
+}
+
+export interface WrAverageTradePriceQsp {
+    averageprice: number; 	//  成交均价
+    tradedate: string; // 交易日yyyymm
+}

src/views/market/spot_trade/components/buy-sell-market/index.vue

@@ -73,10 +73,11 @@
         <LineChartOutlined />
       </div>
       <!-- 历史走势按钮 -->
-      <!-- <a-button class="historyBtn">
-                历史走势
-                <LineChartOutlined />
-            </a-button>-->
+      <a-button class="historyBtn"
+                @click="openComponent({code: 'HisChart'})">
+        历史走势
+        <LineChartOutlined />
+      </a-button>
       <BtnList :btnList="firstBtn"
                :record="selectedRow"
                @click="openComponent" />
@@ -153,6 +154,7 @@ export default defineComponent({
         LineChartOutlined,
         [ModalEnum.spot_trade_warehouse_detail]: defineAsyncComponent(() => import('../detail/index.vue')),
         [ModalEnum.spot_trade_warehouse_post_buying]: defineAsyncComponent(() => import('../post_buying/index.vue')),
+        HisChart: defineAsyncComponent(() => import('../history-chart/index.vue')),
     },
     setup(props, context) {
         const time = ref<Moment>(moment(props.selectedRow.deliverymonth)); // string 交收月

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

@@ -0,0 +1,122 @@
+<template>
+  <!-- 历史走势-->
+  <Drawer :title="'历史走势'"
+          :placement="'right'"
+          :visible="visible"
+          width="686px"
+          height="479px"
+          @cancel="cancel"
+          class="top">
+    <div class="chart-main"
+         ref="chartRef"
+         id="history-chart"></div>
+  </Drawer>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, PropType, ref, nextTick, watchEffect } from 'vue';
+import { initData } from '@/common/methods';
+import * as echarts from 'echarts/core';
+import {
+    BarChart,
+    // 系列类型的定义后缀都为 SeriesOption
+    BarSeriesOption,
+    LineChart,
+    LineSeriesOption,
+} from 'echarts/charts';
+import {
+    TitleComponent,
+    // 组件类型的定义后缀都为 ComponentOption
+    TitleComponentOption,
+    GridComponent,
+    GridComponentOption,
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { queryWrAverageTradePrice } from '@/services/go/wrtrade';
+import { TempWrOrderQuoteDetail } from '../post_buying/interface';
+import { EnumRouterName } from '@/common/constants/enumRouterName';
+import { WrAverageTradePriceQsq } from '@/services/go/wrtrade/interface';
+import { handleIs } from '../buy-sell-market/setup';
+import { BuyOrSell } from '@/common/constants/enumCommon';
+import { _closeModal } from '@/common/setup/modal/modal';
+import Drawer from '@/common/components/drawer/index.vue';
+
+// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+type ECOption = echarts.ComposeOption<BarSeriesOption | LineSeriesOption | TitleComponentOption | GridComponentOption>;
+
+// 注册必须的组件
+echarts.use([TitleComponent, GridComponent, LineChart, BarChart, CanvasRenderer]);
+export default defineComponent({
+    name: 'purchase-history',
+    emits: ['cancel', 'update'],
+    components: { Drawer },
+    props: {
+        selectedRow: {
+            type: Object as PropType<TempWrOrderQuoteDetail>,
+            default: {},
+        },
+        enumName: {
+            default: '',
+            type: String as PropType<EnumRouterName>,
+        },
+    },
+    setup(props, context) {
+        const { visible, cancel } = _closeModal(context);
+        const option = {
+            xAxis: {
+                type: 'category',
+                data: [''],
+            },
+            yAxis: {
+                type: 'value',
+            },
+            series: [
+                {
+                    data: [1],
+                    type: 'line',
+                    smooth: true,
+                },
+            ],
+        };
+        const { isWR } = handleIs(props.enumName, BuyOrSell.buy);
+        const chartRef = ref();
+        const chartInstance = ref<echarts.ECharts>();
+        function queryHistoryData() {
+            const param: WrAverageTradePriceQsq = {
+                haswr: isWR(),
+                wrfactortypeid: props.selectedRow.wrfactortypeid,
+            };
+            queryWrAverageTradePrice(param).then((res) => {
+                option.xAxis.data.length = 0;
+                option.series[0].data.length = 0;
+                res.forEach((el) => {
+                    option.xAxis.data.push(el.tradedate);
+                    option.series[0].data.push(el.averageprice);
+                });
+                if (chartInstance.value) {
+                    chartInstance.value.setOption(option);
+                }
+            });
+        }
+
+        watchEffect(() => {
+            if (chartRef.value) {
+                chartInstance.value = echarts.init(chartRef.value as HTMLElement);
+                chartInstance.value.setOption(option);
+            }
+        });
+
+        initData(() => {
+            queryHistoryData();
+        });
+        return { option, visible, cancel, chartRef };
+    },
+});
+</script>
+
+<style lang="less">
+.chart-main {
+    height: 441px;
+    width: 100%;
+}
+</style>;